Placeholder files
This commit is contained in:
@@ -0,0 +1,590 @@
|
||||
/* ============================================================
|
||||
SIENA — Design tokens
|
||||
============================================================ */
|
||||
:root{
|
||||
--limestone: #F1E9DA;
|
||||
--limestone-dim: #E8DDC9;
|
||||
--paper: #FBF7EE;
|
||||
--ink: #221C16;
|
||||
--ink-soft: #4A4038;
|
||||
--sienna: #9A4A2C;
|
||||
--sienna-deep: #7A3A22;
|
||||
--cypress: #3F4A38;
|
||||
--cypress-deep: #2C3527;
|
||||
--brass: #A9803F;
|
||||
--stone-line: #CBBFA6;
|
||||
|
||||
--display: "Fraunces", "Iowan Old Style", serif;
|
||||
--body: "Inter", -apple-system, "Segoe UI", sans-serif;
|
||||
|
||||
--measure: 62ch;
|
||||
--arch-radius: 260px 260px 0 0;
|
||||
--radius-sm: 4px;
|
||||
|
||||
--ease: cubic-bezier(.22,.61,.36,1);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark){
|
||||
/* Site is intentionally light/warm regardless of system scheme —
|
||||
the palette itself is the brand, not a mode. */
|
||||
}
|
||||
|
||||
*, *::before, *::after{ box-sizing: border-box; }
|
||||
html{ scroll-behavior: smooth; }
|
||||
@media (prefers-reduced-motion: reduce){
|
||||
html{ scroll-behavior: auto; }
|
||||
*, *::before, *::after{
|
||||
animation-duration: 0.001ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.001ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
body{
|
||||
margin: 0;
|
||||
background: var(--limestone);
|
||||
color: var(--ink);
|
||||
font-family: var(--body);
|
||||
font-size: 17px;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
img, svg{ display: block; max-width: 100%; }
|
||||
|
||||
a{ color: inherit; text-decoration: none; }
|
||||
|
||||
h1, h2, h3, h4{
|
||||
font-family: var(--display);
|
||||
font-weight: 500;
|
||||
color: var(--ink);
|
||||
margin: 0;
|
||||
line-height: 1.08;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
p{ margin: 0 0 1em; max-width: var(--measure); }
|
||||
p:last-child{ margin-bottom: 0; }
|
||||
|
||||
::selection{ background: var(--sienna); color: var(--paper); }
|
||||
|
||||
:focus-visible{
|
||||
outline: 2px solid var(--sienna);
|
||||
outline-offset: 3px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.container{
|
||||
width: 100%;
|
||||
max-width: 1180px;
|
||||
margin: 0 auto;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px){
|
||||
.container{ padding: 0 20px; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Header / Nav
|
||||
============================================================ */
|
||||
.site-header{
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
background: rgba(241, 233, 218, 0.86);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid transparent;
|
||||
transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
|
||||
}
|
||||
.site-header.is-scrolled{
|
||||
border-bottom-color: var(--stone-line);
|
||||
box-shadow: 0 8px 24px -20px rgba(34,28,22,0.4);
|
||||
}
|
||||
.site-header .container{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 84px;
|
||||
}
|
||||
.wordmark{
|
||||
font-family: var(--display);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
color: var(--ink);
|
||||
}
|
||||
.wordmark span{ color: var(--sienna); }
|
||||
|
||||
.main-nav{ display: flex; align-items: center; gap: 40px; }
|
||||
.main-nav ul{
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.main-nav a{
|
||||
font-size: 0.95rem;
|
||||
color: var(--ink-soft);
|
||||
position: relative;
|
||||
padding: 4px 0;
|
||||
transition: color .2s var(--ease);
|
||||
}
|
||||
.main-nav a:hover,
|
||||
.main-nav a[aria-current="page"]{ color: var(--sienna); }
|
||||
.main-nav a[aria-current="page"]::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0; right: 0; bottom: -3px;
|
||||
height: 2px;
|
||||
background: var(--sienna);
|
||||
}
|
||||
|
||||
.btn{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 13px 26px;
|
||||
font-family: var(--body);
|
||||
font-size: 0.92rem;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease);
|
||||
}
|
||||
.btn:active{ transform: translateY(1px); }
|
||||
.btn-primary{ background: var(--sienna); color: var(--paper); }
|
||||
.btn-primary:hover{ background: var(--sienna-deep); }
|
||||
.btn-ghost{ border-color: var(--ink); color: var(--ink); }
|
||||
.btn-ghost:hover{ background: var(--ink); color: var(--paper); }
|
||||
.btn-ghost-light{ border-color: rgba(251,247,238,.55); color: var(--paper); }
|
||||
.btn-ghost-light:hover{ background: var(--paper); color: var(--ink); }
|
||||
|
||||
.nav-toggle{
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
.nav-toggle span{
|
||||
width: 24px; height: 2px; background: var(--ink);
|
||||
transition: transform .25s var(--ease), opacity .25s var(--ease);
|
||||
}
|
||||
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
|
||||
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
|
||||
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
|
||||
|
||||
@media (max-width: 860px){
|
||||
.main-nav{
|
||||
position: fixed;
|
||||
inset: 84px 0 0 0;
|
||||
background: var(--limestone);
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 12px 20px 32px;
|
||||
transform: translateY(-8px);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .25s var(--ease), transform .25s var(--ease);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.main-nav.is-open{
|
||||
opacity: 1; transform: translateY(0); pointer-events: auto;
|
||||
}
|
||||
.main-nav ul{ flex-direction: column; gap: 0; }
|
||||
.main-nav li{ border-bottom: 1px solid var(--stone-line); }
|
||||
.main-nav a{ display: block; padding: 16px 4px; font-size: 1.05rem; }
|
||||
.main-nav .nav-cta{ margin-top: 20px; }
|
||||
.nav-toggle{ display: flex; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Hero
|
||||
============================================================ */
|
||||
.hero{
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
}
|
||||
.hero .container{
|
||||
display: grid;
|
||||
grid-template-columns: 1.05fr 0.95fr;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
padding-top: 76px;
|
||||
padding-bottom: 76px;
|
||||
min-height: 640px;
|
||||
}
|
||||
.hero-eyebrow{
|
||||
font-size: 0.95rem;
|
||||
color: var(--brass);
|
||||
margin-bottom: 22px;
|
||||
font-style: italic;
|
||||
font-family: var(--display);
|
||||
}
|
||||
.hero h1{
|
||||
font-size: clamp(2.6rem, 5.2vw, 4.4rem);
|
||||
color: var(--paper);
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
.hero-lede{
|
||||
color: rgba(251,247,238,.82);
|
||||
font-size: 1.1rem;
|
||||
max-width: 46ch;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.hero-actions{ display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 44px; }
|
||||
.hero-stats{
|
||||
display: flex;
|
||||
gap: 36px;
|
||||
border-top: 1px solid rgba(251,247,238,.2);
|
||||
padding-top: 24px;
|
||||
}
|
||||
.hero-stats div{ display: flex; flex-direction: column; gap: 4px; }
|
||||
.hero-stats strong{
|
||||
font-family: var(--display);
|
||||
font-size: 1.6rem;
|
||||
color: var(--paper);
|
||||
font-weight: 500;
|
||||
}
|
||||
.hero-stats span{ font-size: 0.85rem; color: rgba(251,247,238,.6); }
|
||||
|
||||
.hero-art{
|
||||
position: relative;
|
||||
height: 100%;
|
||||
min-height: 460px;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.hero-art svg{ width: 100%; height: auto; }
|
||||
|
||||
.hero[data-reveal] .hero-eyebrow,
|
||||
.hero[data-reveal] h1,
|
||||
.hero[data-reveal] .hero-lede,
|
||||
.hero[data-reveal] .hero-actions,
|
||||
.hero[data-reveal] .hero-stats,
|
||||
.hero[data-reveal] .hero-art{
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
}
|
||||
.hero.is-revealed .hero-eyebrow,
|
||||
.hero.is-revealed h1,
|
||||
.hero.is-revealed .hero-lede,
|
||||
.hero.is-revealed .hero-actions,
|
||||
.hero.is-revealed .hero-stats,
|
||||
.hero.is-revealed .hero-art{
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: opacity .8s var(--ease), transform .8s var(--ease);
|
||||
}
|
||||
.hero.is-revealed h1{ transition-delay: .08s; }
|
||||
.hero.is-revealed .hero-lede{ transition-delay: .16s; }
|
||||
.hero.is-revealed .hero-actions{ transition-delay: .24s; }
|
||||
.hero.is-revealed .hero-stats{ transition-delay: .32s; }
|
||||
.hero.is-revealed .hero-art{ transition-delay: .1s; }
|
||||
|
||||
@media (max-width: 900px){
|
||||
.hero .container{ grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 48px; min-height: auto; }
|
||||
.hero-art{ order: -1; min-height: 280px; }
|
||||
.hero-stats{ flex-wrap: wrap; row-gap: 18px; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Section rhythm
|
||||
============================================================ */
|
||||
.section{ padding: 108px 0; }
|
||||
.section-tight{ padding: 72px 0; }
|
||||
.section-dark{ background: var(--cypress-deep); color: var(--paper); }
|
||||
.section-paper{ background: var(--paper); }
|
||||
@media (max-width: 640px){
|
||||
.section{ padding: 68px 0; }
|
||||
.section-tight{ padding: 52px 0; }
|
||||
}
|
||||
|
||||
.section-head{
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
gap: 48px;
|
||||
align-items: end;
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
.section-head h2{ font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
|
||||
.section-head p{ color: var(--ink-soft); }
|
||||
.section-dark .section-head p{ color: rgba(251,247,238,.75); }
|
||||
@media (max-width: 760px){
|
||||
.section-head{ grid-template-columns: 1fr; gap: 16px; }
|
||||
}
|
||||
|
||||
.divider{
|
||||
border: none;
|
||||
border-top: 1px solid var(--stone-line);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Arch motif — the recurring signature shape
|
||||
============================================================ */
|
||||
.arch{
|
||||
border-radius: var(--arch-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
.arch-frame{
|
||||
border-radius: var(--arch-radius);
|
||||
border: 1px solid var(--stone-line);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Amenity / feature cards
|
||||
============================================================ */
|
||||
.grid-3{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 28px;
|
||||
}
|
||||
.grid-2{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 28px;
|
||||
}
|
||||
@media (max-width: 860px){
|
||||
.grid-3{ grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 620px){
|
||||
.grid-3, .grid-2{ grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.feature-card{
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--stone-line);
|
||||
border-radius: var(--arch-radius);
|
||||
padding: 40px 30px 30px;
|
||||
}
|
||||
.feature-card .icon{ margin-bottom: 22px; color: var(--sienna); }
|
||||
.feature-card h3{ font-size: 1.2rem; margin-bottom: 10px; }
|
||||
.feature-card p{ color: var(--ink-soft); font-size: 0.96rem; }
|
||||
|
||||
/* ============================================================
|
||||
Residence / plan rows
|
||||
============================================================ */
|
||||
.plan-row{
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.5fr 0.5fr 0.5fr auto;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 26px 0;
|
||||
border-top: 1px solid var(--stone-line);
|
||||
}
|
||||
.plan-row:last-child{ border-bottom: 1px solid var(--stone-line); }
|
||||
.plan-row .plan-name{ font-family: var(--display); font-size: 1.15rem; }
|
||||
.plan-row .plan-meta{ color: var(--ink-soft); font-size: 0.9rem; }
|
||||
.plan-row .plan-label{
|
||||
display: none;
|
||||
font-size: 0.75rem;
|
||||
color: var(--brass);
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
.plan-head{
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.5fr 0.5fr 0.5fr auto;
|
||||
gap: 20px;
|
||||
padding-bottom: 14px;
|
||||
font-size: 0.78rem;
|
||||
color: var(--brass);
|
||||
}
|
||||
@media (max-width: 760px){
|
||||
.plan-head{ display: none; }
|
||||
.plan-row{ grid-template-columns: 1fr; gap: 4px; }
|
||||
.plan-row .plan-label{ display: block; }
|
||||
.plan-row a.btn{ margin-top: 12px; width: fit-content; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Steps (genuine sequence — used only for process flows)
|
||||
============================================================ */
|
||||
.steps{
|
||||
counter-reset: step;
|
||||
display: grid;
|
||||
gap: 30px;
|
||||
}
|
||||
.step{
|
||||
display: grid;
|
||||
grid-template-columns: 52px 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
.step::before{
|
||||
counter-increment: step;
|
||||
content: counter(step);
|
||||
font-family: var(--display);
|
||||
font-size: 1.3rem;
|
||||
color: var(--sienna);
|
||||
border: 1px solid var(--sienna);
|
||||
width: 52px; height: 52px;
|
||||
border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.step h3{ font-size: 1.05rem; margin-bottom: 6px; }
|
||||
.step p{ color: var(--ink-soft); font-size: 0.95rem; }
|
||||
|
||||
/* ============================================================
|
||||
Forms
|
||||
============================================================ */
|
||||
.form-card{
|
||||
background: var(--paper);
|
||||
border: 1px solid var(--stone-line);
|
||||
border-radius: 18px;
|
||||
padding: 44px;
|
||||
}
|
||||
@media (max-width: 640px){ .form-card{ padding: 28px 22px; } }
|
||||
|
||||
.field{ margin-bottom: 24px; }
|
||||
.field label{
|
||||
display: block;
|
||||
font-size: 0.88rem;
|
||||
color: var(--ink-soft);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.field .hint{ font-size: 0.8rem; color: var(--stone-line); margin-top: 6px; }
|
||||
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||||
@media (max-width: 560px){ .field-row{ grid-template-columns: 1fr; } }
|
||||
|
||||
input, select, textarea{
|
||||
width: 100%;
|
||||
font-family: var(--body);
|
||||
font-size: 1rem;
|
||||
color: var(--ink);
|
||||
background: var(--limestone);
|
||||
border: 1px solid var(--stone-line);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 13px 14px;
|
||||
transition: border-color .2s var(--ease), background .2s var(--ease);
|
||||
}
|
||||
input:focus, select:focus, textarea:focus{
|
||||
border-color: var(--sienna);
|
||||
background: var(--paper);
|
||||
outline: none;
|
||||
}
|
||||
textarea{ resize: vertical; min-height: 120px; }
|
||||
|
||||
fieldset{ border: none; padding: 0; margin: 0 0 24px; }
|
||||
legend{ font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 10px; padding: 0; }
|
||||
.radio-group{ display: flex; gap: 20px; flex-wrap: wrap; }
|
||||
.radio-option{ display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
|
||||
.radio-option input{ width: auto; }
|
||||
|
||||
.form-status{
|
||||
display: none;
|
||||
margin-top: 22px;
|
||||
padding: 16px 18px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(63,74,56,0.1);
|
||||
border: 1px solid var(--cypress);
|
||||
color: var(--cypress-deep);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
.form-status.is-visible{ display: block; }
|
||||
|
||||
/* ============================================================
|
||||
Quote / testimonial
|
||||
============================================================ */
|
||||
.quote{
|
||||
font-family: var(--display);
|
||||
font-size: clamp(1.4rem, 2.6vw, 1.9rem);
|
||||
font-style: italic;
|
||||
line-height: 1.4;
|
||||
max-width: 34ch;
|
||||
}
|
||||
.quote-attr{
|
||||
margin-top: 22px;
|
||||
font-family: var(--body);
|
||||
font-style: normal;
|
||||
font-size: 0.9rem;
|
||||
color: var(--brass);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
CTA band
|
||||
============================================================ */
|
||||
.cta-band{
|
||||
background: var(--sienna);
|
||||
color: var(--paper);
|
||||
border-radius: var(--arch-radius);
|
||||
padding: 64px 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 32px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.cta-band h2{ color: var(--paper); font-size: clamp(1.6rem, 3vw, 2.2rem); max-width: 20ch; }
|
||||
@media (max-width: 640px){
|
||||
.cta-band{ padding: 44px 28px; flex-direction: column; align-items: flex-start; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Footer
|
||||
============================================================ */
|
||||
.site-footer{
|
||||
background: var(--ink);
|
||||
color: rgba(251,247,238,.7);
|
||||
padding: 72px 0 32px;
|
||||
}
|
||||
.footer-grid{
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1fr 1fr 1fr;
|
||||
gap: 36px;
|
||||
padding-bottom: 48px;
|
||||
border-bottom: 1px solid rgba(251,247,238,.14);
|
||||
}
|
||||
.footer-grid h4{ color: var(--paper); font-size: 0.95rem; margin-bottom: 16px; font-family: var(--body); font-weight: 600; }
|
||||
.footer-grid .wordmark{ color: var(--paper); margin-bottom: 14px; display: block;}
|
||||
.footer-grid p{ font-size: 0.92rem; }
|
||||
.footer-links{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 0.92rem; }
|
||||
.footer-links a:hover{ color: var(--paper); }
|
||||
.footer-bottom{
|
||||
padding-top: 28px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 0.82rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
@media (max-width: 760px){
|
||||
.footer-grid{ grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
@media (max-width: 480px){
|
||||
.footer-grid{ grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Page header (interior pages)
|
||||
============================================================ */
|
||||
.page-hero{
|
||||
background: var(--ink);
|
||||
color: var(--paper);
|
||||
padding: 64px 0 56px;
|
||||
}
|
||||
.page-hero .hero-eyebrow{ margin-bottom: 16px; }
|
||||
.page-hero h1{ color: var(--paper); font-size: clamp(2.1rem, 4vw, 3rem); }
|
||||
.page-hero p{ color: rgba(251,247,238,.78); margin-top: 18px; max-width: 56ch; }
|
||||
|
||||
.breadcrumb{ font-size: 0.85rem; color: var(--brass); margin-bottom: 14px; }
|
||||
.breadcrumb a{ color: rgba(251,247,238,.7); }
|
||||
.breadcrumb a:hover{ color: var(--paper); }
|
||||
|
||||
/* utility */
|
||||
.mt-0{ margin-top: 0 !important; }
|
||||
.text-center{ text-align: center; }
|
||||
.visually-hidden{
|
||||
position: absolute; width: 1px; height: 1px;
|
||||
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
// SIENA — shared site behavior
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initHeaderScroll();
|
||||
initMobileNav();
|
||||
initHeroReveal();
|
||||
initForms();
|
||||
});
|
||||
|
||||
/* Give the sticky header a hairline + shadow once the page scrolls. */
|
||||
function initHeaderScroll() {
|
||||
const header = document.querySelector('.site-header');
|
||||
if (!header) return;
|
||||
const setState = () => {
|
||||
header.classList.toggle('is-scrolled', window.scrollY > 8);
|
||||
};
|
||||
setState();
|
||||
window.addEventListener('scroll', setState, { passive: true });
|
||||
}
|
||||
|
||||
/* Mobile nav toggle button. */
|
||||
function initMobileNav() {
|
||||
const toggle = document.querySelector('.nav-toggle');
|
||||
const nav = document.querySelector('.main-nav');
|
||||
if (!toggle || !nav) return;
|
||||
|
||||
toggle.addEventListener('click', () => {
|
||||
const isOpen = nav.classList.toggle('is-open');
|
||||
toggle.setAttribute('aria-expanded', String(isOpen));
|
||||
document.body.style.overflow = isOpen ? 'hidden' : '';
|
||||
});
|
||||
|
||||
nav.querySelectorAll('a').forEach((link) => {
|
||||
link.addEventListener('click', () => {
|
||||
nav.classList.remove('is-open');
|
||||
toggle.setAttribute('aria-expanded', 'false');
|
||||
document.body.style.overflow = '';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* One orchestrated reveal for the hero on first paint, not per-scroll. */
|
||||
function initHeroReveal() {
|
||||
const hero = document.querySelector('.hero[data-reveal]');
|
||||
if (!hero) return;
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => hero.classList.add('is-revealed'));
|
||||
});
|
||||
}
|
||||
|
||||
/* Support + lease inquiry forms: client-side confirmation only.
|
||||
No backend is wired up — this simulates a submission and shows
|
||||
the confirmation state so the page is demonstrable end to end. */
|
||||
function initForms() {
|
||||
document.querySelectorAll('form[data-inquiry-form]').forEach((form) => {
|
||||
const status = form.querySelector('.form-status');
|
||||
form.addEventListener('submit', (event) => {
|
||||
event.preventDefault();
|
||||
if (!form.checkValidity()) {
|
||||
form.reportValidity();
|
||||
return;
|
||||
}
|
||||
const submitBtn = form.querySelector('button[type="submit"]');
|
||||
const originalLabel = submitBtn.textContent;
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.textContent = 'Sending…';
|
||||
|
||||
window.setTimeout(() => {
|
||||
form.reset();
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.textContent = originalLabel;
|
||||
if (status) {
|
||||
status.textContent = form.dataset.successMessage ||
|
||||
"Thank you — we've received your message and will be in touch shortly.";
|
||||
status.classList.add('is-visible');
|
||||
status.setAttribute('tabindex', '-1');
|
||||
status.focus();
|
||||
}
|
||||
}, 650);
|
||||
});
|
||||
});
|
||||
}
|
||||
+139
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Visit & Contact — Siena</title>
|
||||
<meta name="description" content="Visit the Siena leasing office in Portland, Oregon, or get in touch by phone or email.">
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='3' fill='%23221C16'/%3E%3Cpath d='M9 24V15a7 7 0 0 1 14 0v9' fill='none' stroke='%23A9803F' stroke-width='2.2'/%3E%3C/svg%3E">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<a href="index.html" class="wordmark">SIENA<span>.</span></a>
|
||||
<nav class="main-nav" aria-label="Primary">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="residences.html">Residences</a></li>
|
||||
<li><a href="residences.html#amenities">Amenities</a></li>
|
||||
<li><a href="support.html">Resident Support</a></li>
|
||||
<li><a href="contact.html" aria-current="page">Visit</a></li>
|
||||
</ul>
|
||||
<a href="lease.html" class="btn btn-primary nav-cta">Inquire About Leasing</a>
|
||||
</nav>
|
||||
<button class="nav-toggle" aria-label="Toggle menu" aria-expanded="false">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<p class="breadcrumb"><a href="index.html">Home</a> / Visit & Contact</p>
|
||||
<h1>Visit Siena</h1>
|
||||
<p>Our leasing office sits just off the courtyard entrance. Walk-ins are welcome, but a scheduled tour means someone will actually be free to show you around.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="grid-2" style="align-items:start;">
|
||||
|
||||
<div>
|
||||
<div class="arch-frame" style="margin-bottom:36px;">
|
||||
<iframe
|
||||
title="Map showing the Siena leasing office location in downtown Portland, Oregon"
|
||||
src="https://www.google.com/maps?q=Portland,+OR&output=embed"
|
||||
width="100%" height="360" style="border:0; border-radius:254px 254px 0 0; display:block;"
|
||||
loading="lazy"
|
||||
referrerpolicy="no-referrer-when-downgrade">
|
||||
</iframe>
|
||||
</div>
|
||||
|
||||
<div class="grid-2">
|
||||
<div class="feature-card">
|
||||
<h3>Address</h3>
|
||||
<p>820 SW Ankeny Street<br>Portland, OR 97205</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>Leasing office hours</h3>
|
||||
<p>Mon–Sat, 9am–6pm<br>Sun, 11am–4pm</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 style="font-size:1.15rem; margin-bottom:18px;">Reach us directly</h3>
|
||||
<div style="display:grid; gap:20px; margin-bottom:36px;">
|
||||
<div class="feature-card">
|
||||
<h3>Leasing inquiries</h3>
|
||||
<p>(503) 555-0142<br>[email protected]</p>
|
||||
<a href="lease.html" class="btn btn-ghost" style="margin-top:16px;">Start a Lease Inquiry</a>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>Current residents</h3>
|
||||
<p>For maintenance and account questions, use the resident support form — it routes faster than email.</p>
|
||||
<a href="support.html" class="btn btn-ghost" style="margin-top:16px;">Go to Resident Support</a>
|
||||
</div>
|
||||
<div class="feature-card" style="border-color:var(--sienna);">
|
||||
<h3>After-hours emergency</h3>
|
||||
<p>(503) 555-0199 — for anything that can't wait until morning.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div>
|
||||
<span class="wordmark">SIENA<span style="color:var(--brass);">.</span></span>
|
||||
<p>128 residences around a shared courtyard, in the heart of Portland.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Explore</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="residences.html">Residences</a></li>
|
||||
<li><a href="residences.html#amenities">Amenities</a></li>
|
||||
<li><a href="residences.html#neighborhood">Neighborhood</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Get in touch</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="lease.html">Lease inquiry</a></li>
|
||||
<li><a href="support.html">Resident support</a></li>
|
||||
<li><a href="contact.html">Visit & contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Leasing office</h4>
|
||||
<ul class="footer-links">
|
||||
<li>820 SW Ankeny Street<br>Portland, OR 97205</li>
|
||||
<li>(503) 555-0142</li>
|
||||
<li>[email protected]</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<span>© 2026 Siena Residences. All rights reserved.</span>
|
||||
<span>Equal Housing Opportunity</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+259
@@ -0,0 +1,259 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Siena — Residences in Portland, Oregon</title>
|
||||
<meta name="description" content="Siena is a 128-residence community in Portland, Oregon, drawn from the brickwork, arches, and courtyards of the Tuscan city it takes its name from.">
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='3' fill='%23221C16'/%3E%3Cpath d='M9 24V15a7 7 0 0 1 14 0v9' fill='none' stroke='%23A9803F' stroke-width='2.2'/%3E%3C/svg%3E">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<a href="index.html" class="wordmark">SIENA<span>.</span></a>
|
||||
<nav class="main-nav" aria-label="Primary">
|
||||
<ul>
|
||||
<li><a href="index.html" aria-current="page">Home</a></li>
|
||||
<li><a href="residences.html">Residences</a></li>
|
||||
<li><a href="residences.html#amenities">Amenities</a></li>
|
||||
<li><a href="support.html">Resident Support</a></li>
|
||||
<li><a href="contact.html">Visit</a></li>
|
||||
</ul>
|
||||
<a href="lease.html" class="btn btn-primary nav-cta">Inquire About Leasing</a>
|
||||
</nav>
|
||||
<button class="nav-toggle" aria-label="Toggle menu" aria-expanded="false">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="hero" data-reveal>
|
||||
<div class="container">
|
||||
<div class="hero-copy">
|
||||
<p class="hero-eyebrow">Now leasing — Portland, Oregon</p>
|
||||
<h1>An address built the way old cities are built — slowly, and with care.</h1>
|
||||
<p class="hero-lede">Siena is a 128-residence community drawn from the brickwork, arcades, and courtyards of the Tuscan city it's named for, reworked for how people actually live today.</p>
|
||||
<div class="hero-actions">
|
||||
<a href="lease.html" class="btn btn-primary">Schedule a Tour</a>
|
||||
<a href="residences.html" class="btn btn-ghost-light">View Residences</a>
|
||||
</div>
|
||||
<div class="hero-stats">
|
||||
<div><strong>128</strong><span>Residences</span></div>
|
||||
<div><strong>9</strong><span>Stories</span></div>
|
||||
<div><strong>24/7</strong><span>On-site concierge</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-art" aria-hidden="true">
|
||||
<svg viewBox="0 0 560 640" xmlns="http://www.w3.org/2000/svg" role="img">
|
||||
<defs>
|
||||
<linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#4A392C"/>
|
||||
<stop offset="55%" stop-color="#8A4B30"/>
|
||||
<stop offset="100%" stop-color="#C98B4E"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="archFace" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#E9DCC3"/>
|
||||
<stop offset="100%" stop-color="#CBB78F"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="archFaceFar" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#C79A62"/>
|
||||
<stop offset="100%" stop-color="#9E6E3E"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<rect x="0" y="0" width="560" height="640" fill="url(#sky)"/>
|
||||
<circle cx="430" cy="120" r="72" fill="#F3D8A8" opacity="0.55"/>
|
||||
|
||||
<!-- receding arcade, far to near -->
|
||||
<g opacity="0.9">
|
||||
<path d="M40 380 a60 60 0 0 1 120 0 v130 h-120 z" fill="url(#archFaceFar)"/>
|
||||
<path d="M170 380 a60 60 0 0 1 120 0 v130 h-120 z" fill="url(#archFaceFar)"/>
|
||||
</g>
|
||||
<g>
|
||||
<path d="M-10 400 a80 80 0 0 1 160 0 v170 h-160 z" fill="url(#archFace)"/>
|
||||
<path d="M150 400 a80 80 0 0 1 160 0 v170 h-160 z" fill="url(#archFace)"/>
|
||||
<path d="M310 400 a80 80 0 0 1 160 0 v170 h-160 z" fill="url(#archFace)"/>
|
||||
</g>
|
||||
|
||||
<!-- brick coursing -->
|
||||
<g stroke="#8A6B3F" stroke-width="1" opacity="0.35">
|
||||
<line x1="-10" y1="440" x2="470" y2="440"/>
|
||||
<line x1="-10" y1="480" x2="470" y2="480"/>
|
||||
<line x1="-10" y1="520" x2="470" y2="520"/>
|
||||
<line x1="-10" y1="560" x2="470" y2="560"/>
|
||||
</g>
|
||||
|
||||
<rect x="-10" y="568" width="580" height="72" fill="#2C1E14"/>
|
||||
<g fill="#B08D57" opacity="0.9">
|
||||
<circle cx="70" cy="410" r="4"/>
|
||||
<circle cx="230" cy="410" r="4"/>
|
||||
<circle cx="390" cy="410" r="4"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-dark">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2>Every good city has a Campo.</h2>
|
||||
<p>In Siena, Italy, the Piazza del Campo is where the city actually happens — the square everyone crosses, meets in, and lingers. Our courtyard borrows the idea, not the postcard.</p>
|
||||
</div>
|
||||
<div class="grid-2">
|
||||
<div class="arch-frame">
|
||||
<svg viewBox="0 0 500 360" role="img" aria-label="Illustration of the courtyard, shown as a warm arched colonnade around a shared lawn">
|
||||
<rect width="500" height="360" fill="#EFE7D8"/>
|
||||
<rect x="0" y="230" width="500" height="130" fill="#4B5842"/>
|
||||
<g fill="none" stroke="#7A3A22" stroke-width="3">
|
||||
<path d="M20 230 v-60 a40 40 0 0 1 80 0 v60"/>
|
||||
<path d="M110 230 v-60 a40 40 0 0 1 80 0 v60"/>
|
||||
<path d="M200 230 v-60 a40 40 0 0 1 80 0 v60"/>
|
||||
<path d="M290 230 v-60 a40 40 0 0 1 80 0 v60"/>
|
||||
<path d="M380 230 v-60 a40 40 0 0 1 80 0 v60"/>
|
||||
</g>
|
||||
<rect x="0" y="60" width="500" height="20" fill="#9A4A2C"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="display:flex; flex-direction:column; justify-content:center; gap:28px;">
|
||||
<blockquote class="quote">
|
||||
"We moved in for the apartment and stayed for the courtyard. There's always someone reading, or the dog, or a birthday — it's the closest thing our block has to a piazza."
|
||||
<div class="quote-attr">— Nora F., resident since 2022</div>
|
||||
</blockquote>
|
||||
<a href="residences.html#amenities" class="btn btn-ghost-light" style="width:fit-content;">Explore the Amenities</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="amenities">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2>Designed for the hours outside your door.</h2>
|
||||
<p>A short list of what's just downstairs — the fuller one lives on the residences page.</p>
|
||||
</div>
|
||||
<div class="grid-3">
|
||||
<div class="feature-card">
|
||||
<div class="icon" aria-hidden="true">
|
||||
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><path d="M6 30V17a11 11 0 0 1 22 0v13"/></svg>
|
||||
</div>
|
||||
<h3>Courtyard & loggia</h3>
|
||||
<p>A shared arcade and lawn at the center of the building, open from sunrise to midnight.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="icon" aria-hidden="true">
|
||||
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><rect x="5" y="10" width="24" height="17" rx="2"/><path d="M11 10V6h12v4"/></svg>
|
||||
</div>
|
||||
<h3>Rooftop terrace</h3>
|
||||
<p>West-facing views, communal grills, and a fireplace for the nine months it isn't sunny.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="icon" aria-hidden="true">
|
||||
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><circle cx="10" cy="25" r="5"/><circle cx="26" cy="25" r="5"/><path d="M10 25 15 12h6l5 13M15 12l4-6"/></svg>
|
||||
</div>
|
||||
<h3>Bike & gear room</h3>
|
||||
<p>Secure storage, a repair stand, and direct courtyard access for muddy boots.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-paper">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2>Six floor plans, one address.</h2>
|
||||
<p>From a well-proportioned studio to a top-floor two-bedroom with its own loggia.</p>
|
||||
</div>
|
||||
<div class="plan-head">
|
||||
<span>Plan</span><span>Beds</span><span>Baths</span><span>Sq. Ft.</span><span></span>
|
||||
</div>
|
||||
<div class="plan-row">
|
||||
<div><span class="plan-label">Plan</span><span class="plan-name">The Cortile</span><div class="plan-meta">Studio</div></div>
|
||||
<div><span class="plan-label">Beds</span>Studio</div>
|
||||
<div><span class="plan-label">Baths</span>1</div>
|
||||
<div><span class="plan-label">Sq. Ft.</span>512</div>
|
||||
<a href="lease.html" class="btn btn-ghost">Inquire</a>
|
||||
</div>
|
||||
<div class="plan-row">
|
||||
<div><span class="plan-label">Plan</span><span class="plan-name">The Duomo</span><div class="plan-meta">One bedroom</div></div>
|
||||
<div><span class="plan-label">Beds</span>1</div>
|
||||
<div><span class="plan-label">Baths</span>1</div>
|
||||
<div><span class="plan-label">Sq. Ft.</span>701</div>
|
||||
<a href="lease.html" class="btn btn-ghost">Inquire</a>
|
||||
</div>
|
||||
<div class="plan-row">
|
||||
<div><span class="plan-label">Plan</span><span class="plan-name">The Torre</span><div class="plan-meta">Two bedroom, corner</div></div>
|
||||
<div><span class="plan-label">Beds</span>2</div>
|
||||
<div><span class="plan-label">Baths</span>2</div>
|
||||
<div><span class="plan-label">Sq. Ft.</span>1,140</div>
|
||||
<a href="lease.html" class="btn btn-ghost">Inquire</a>
|
||||
</div>
|
||||
<div class="text-center" style="margin-top:44px;">
|
||||
<a href="residences.html#plans" class="btn btn-primary">View All Floor Plans</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-tight">
|
||||
<div class="container">
|
||||
<div class="cta-band">
|
||||
<h2>See it in person before you decide on paper.</h2>
|
||||
<div style="display:flex; gap:16px; flex-wrap:wrap;">
|
||||
<a href="contact.html" class="btn btn-ghost-light">Schedule a Tour</a>
|
||||
<a href="lease.html" class="btn" style="background:var(--paper); color:var(--sienna);">Start a Lease Inquiry</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div>
|
||||
<span class="wordmark">SIENA<span style="color:var(--brass);">.</span></span>
|
||||
<p>128 residences around a shared courtyard, in the heart of Portland.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Explore</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="residences.html">Residences</a></li>
|
||||
<li><a href="residences.html#amenities">Amenities</a></li>
|
||||
<li><a href="residences.html#neighborhood">Neighborhood</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Get in touch</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="lease.html">Lease inquiry</a></li>
|
||||
<li><a href="support.html">Resident support</a></li>
|
||||
<li><a href="contact.html">Visit & contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Leasing office</h4>
|
||||
<ul class="footer-links">
|
||||
<li>820 SW Ankeny Street<br>Portland, OR 97205</li>
|
||||
<li>(503) 555-0142</li>
|
||||
<li>[email protected]</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<span>© 2026 Siena Residences. All rights reserved.</span>
|
||||
<span>Equal Housing Opportunity</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+192
@@ -0,0 +1,192 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lease Inquiry — Siena</title>
|
||||
<meta name="description" content="Start a lease inquiry for Siena, a 128-residence community in Portland, Oregon. Tell us what you're looking for and we'll follow up within one business day.">
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='3' fill='%23221C16'/%3E%3Cpath d='M9 24V15a7 7 0 0 1 14 0v9' fill='none' stroke='%23A9803F' stroke-width='2.2'/%3E%3C/svg%3E">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<a href="index.html" class="wordmark">SIENA<span>.</span></a>
|
||||
<nav class="main-nav" aria-label="Primary">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="residences.html">Residences</a></li>
|
||||
<li><a href="residences.html#amenities">Amenities</a></li>
|
||||
<li><a href="support.html">Resident Support</a></li>
|
||||
<li><a href="contact.html">Visit</a></li>
|
||||
</ul>
|
||||
<a href="lease.html" class="btn btn-primary nav-cta" aria-current="page">Inquire About Leasing</a>
|
||||
</nav>
|
||||
<button class="nav-toggle" aria-label="Toggle menu" aria-expanded="false">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<p class="breadcrumb"><a href="index.html">Home</a> / Lease Inquiry</p>
|
||||
<h1>Start a lease inquiry</h1>
|
||||
<p>Tell us a little about what you're looking for. A member of our leasing team will follow up within one business day with availability and next steps.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="grid-2" style="grid-template-columns: 1.4fr 1fr; align-items:start;">
|
||||
|
||||
<div class="form-card">
|
||||
<h2 style="font-size:1.5rem; margin-bottom:28px;">Tell us about your search</h2>
|
||||
<form data-inquiry-form data-success-message="Thank you — we've received your inquiry. A member of our leasing team will reach out within one business day.">
|
||||
<div class="field-row">
|
||||
<div class="field">
|
||||
<label for="name">Full name</label>
|
||||
<input type="text" id="name" name="name" required autocomplete="name">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email" required autocomplete="email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<div class="field">
|
||||
<label for="phone">Phone</label>
|
||||
<input type="tel" id="phone" name="phone" autocomplete="tel">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="move-in">Desired move-in date</label>
|
||||
<input type="date" id="move-in" name="move-in">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<div class="field">
|
||||
<label for="plan">Floor plan of interest</label>
|
||||
<select id="plan" name="plan">
|
||||
<option value="">Not sure yet</option>
|
||||
<option>The Cortile — Studio</option>
|
||||
<option>The Duomo — One bedroom</option>
|
||||
<option>The Palio — One bedroom + den</option>
|
||||
<option>The Contrada — Two bedroom</option>
|
||||
<option>The Torre — Two bedroom, corner</option>
|
||||
<option>The Belvedere — Penthouse</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="household">Household size</label>
|
||||
<input type="number" id="household" name="household" min="1" max="8" placeholder="e.g. 2">
|
||||
</div>
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend>How would you like to see the property?</legend>
|
||||
<div class="radio-group">
|
||||
<label class="radio-option"><input type="radio" name="tour-type" value="in-person" checked> In-person tour</label>
|
||||
<label class="radio-option"><input type="radio" name="tour-type" value="virtual"> Virtual tour</label>
|
||||
<label class="radio-option"><input type="radio" name="tour-type" value="self-guided"> Self-guided</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="field">
|
||||
<label for="notes">Anything else we should know?</label>
|
||||
<textarea id="notes" name="notes" placeholder="Timeline, budget, pets, parking needs — whatever's relevant."></textarea>
|
||||
</div>
|
||||
<div class="field" style="display:flex; align-items:flex-start; gap:10px;">
|
||||
<input type="checkbox" id="consent" name="consent" required style="width:auto; margin-top:4px;">
|
||||
<label for="consent" style="margin:0;">I agree to be contacted by Siena's leasing team by phone or email.</label>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Send Inquiry</button>
|
||||
<div class="form-status" role="status" aria-live="polite"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 style="font-size:1.15rem; margin-bottom:22px;">How leasing works</h3>
|
||||
<div class="steps" style="margin-bottom:44px;">
|
||||
<div class="step">
|
||||
<div>
|
||||
<h3>Tour</h3>
|
||||
<p>See the residence and courtyard in person, virtually, or on your own schedule.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div>
|
||||
<h3>Apply</h3>
|
||||
<p>A short online application, processed within two business days.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div>
|
||||
<h3>Sign</h3>
|
||||
<p>Review and sign your lease electronically — no office visit required.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div>
|
||||
<h3>Move in</h3>
|
||||
<p>Pick up your keys and access fob from the concierge desk.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>Prefer to talk it through?</h3>
|
||||
<p>Call the leasing office directly at <strong>(503) 555-0142</strong>, Monday through Saturday, 9am–6pm.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div>
|
||||
<span class="wordmark">SIENA<span style="color:var(--brass);">.</span></span>
|
||||
<p>128 residences around a shared courtyard, in the heart of Portland.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Explore</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="residences.html">Residences</a></li>
|
||||
<li><a href="residences.html#amenities">Amenities</a></li>
|
||||
<li><a href="residences.html#neighborhood">Neighborhood</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Get in touch</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="lease.html">Lease inquiry</a></li>
|
||||
<li><a href="support.html">Resident support</a></li>
|
||||
<li><a href="contact.html">Visit & contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Leasing office</h4>
|
||||
<ul class="footer-links">
|
||||
<li>820 SW Ankeny Street<br>Portland, OR 97205</li>
|
||||
<li>(503) 555-0142</li>
|
||||
<li>[email protected]</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<span>© 2026 Siena Residences. All rights reserved.</span>
|
||||
<span>Equal Housing Opportunity</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+219
@@ -0,0 +1,219 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Residences & Amenities — Siena</title>
|
||||
<meta name="description" content="Floor plans, amenities, and neighborhood details for Siena, a 128-residence community in Portland, Oregon.">
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='3' fill='%23221C16'/%3E%3Cpath d='M9 24V15a7 7 0 0 1 14 0v9' fill='none' stroke='%23A9803F' stroke-width='2.2'/%3E%3C/svg%3E">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<a href="index.html" class="wordmark">SIENA<span>.</span></a>
|
||||
<nav class="main-nav" aria-label="Primary">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="residences.html" aria-current="page">Residences</a></li>
|
||||
<li><a href="residences.html#amenities">Amenities</a></li>
|
||||
<li><a href="support.html">Resident Support</a></li>
|
||||
<li><a href="contact.html">Visit</a></li>
|
||||
</ul>
|
||||
<a href="lease.html" class="btn btn-primary nav-cta">Inquire About Leasing</a>
|
||||
</nav>
|
||||
<button class="nav-toggle" aria-label="Toggle menu" aria-expanded="false">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<p class="breadcrumb"><a href="index.html">Home</a> / Residences</p>
|
||||
<h1>Residences & amenities</h1>
|
||||
<p>Six floor plans and the shared spaces around them — from the courtyard loggia to the room where you'll actually keep your bike.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="plans">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2>Floor plans</h2>
|
||||
<p>Every residence includes white oak flooring, a full-size washer and dryer, and at least one operable window with an actual view.</p>
|
||||
</div>
|
||||
|
||||
<div class="plan-head">
|
||||
<span>Plan</span><span>Beds</span><span>Baths</span><span>Sq. Ft.</span><span></span>
|
||||
</div>
|
||||
<div class="plan-row">
|
||||
<div><span class="plan-label">Plan</span><span class="plan-name">The Cortile</span><div class="plan-meta">Studio</div></div>
|
||||
<div><span class="plan-label">Beds</span>Studio</div>
|
||||
<div><span class="plan-label">Baths</span>1</div>
|
||||
<div><span class="plan-label">Sq. Ft.</span>512</div>
|
||||
<a href="lease.html" class="btn btn-ghost">Inquire</a>
|
||||
</div>
|
||||
<div class="plan-row">
|
||||
<div><span class="plan-label">Plan</span><span class="plan-name">The Palio</span><div class="plan-meta">One bedroom + den</div></div>
|
||||
<div><span class="plan-label">Beds</span>1 + den</div>
|
||||
<div><span class="plan-label">Baths</span>1</div>
|
||||
<div><span class="plan-label">Sq. Ft.</span>820</div>
|
||||
<a href="lease.html" class="btn btn-ghost">Inquire</a>
|
||||
</div>
|
||||
<div class="plan-row">
|
||||
<div><span class="plan-label">Plan</span><span class="plan-name">The Duomo</span><div class="plan-meta">One bedroom</div></div>
|
||||
<div><span class="plan-label">Beds</span>1</div>
|
||||
<div><span class="plan-label">Baths</span>1</div>
|
||||
<div><span class="plan-label">Sq. Ft.</span>701</div>
|
||||
<a href="lease.html" class="btn btn-ghost">Inquire</a>
|
||||
</div>
|
||||
<div class="plan-row">
|
||||
<div><span class="plan-label">Plan</span><span class="plan-name">The Contrada</span><div class="plan-meta">Two bedroom</div></div>
|
||||
<div><span class="plan-label">Beds</span>2</div>
|
||||
<div><span class="plan-label">Baths</span>2</div>
|
||||
<div><span class="plan-label">Sq. Ft.</span>980</div>
|
||||
<a href="lease.html" class="btn btn-ghost">Inquire</a>
|
||||
</div>
|
||||
<div class="plan-row">
|
||||
<div><span class="plan-label">Plan</span><span class="plan-name">The Torre</span><div class="plan-meta">Two bedroom, corner</div></div>
|
||||
<div><span class="plan-label">Beds</span>2</div>
|
||||
<div><span class="plan-label">Baths</span>2</div>
|
||||
<div><span class="plan-label">Sq. Ft.</span>1,140</div>
|
||||
<a href="lease.html" class="btn btn-ghost">Inquire</a>
|
||||
</div>
|
||||
<div class="plan-row">
|
||||
<div><span class="plan-label">Plan</span><span class="plan-name">The Belvedere</span><div class="plan-meta">Penthouse, top floor</div></div>
|
||||
<div><span class="plan-label">Beds</span>2</div>
|
||||
<div><span class="plan-label">Baths</span>2.5</div>
|
||||
<div><span class="plan-label">Sq. Ft.</span>1,460</div>
|
||||
<a href="lease.html" class="btn btn-ghost">Inquire</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-dark" id="amenities">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2>Amenities</h2>
|
||||
<p>Shared spaces that earn their square footage.</p>
|
||||
</div>
|
||||
<div class="grid-3">
|
||||
<div class="feature-card">
|
||||
<div class="icon" aria-hidden="true"><svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><path d="M6 30V17a11 11 0 0 1 22 0v13"/></svg></div>
|
||||
<h3>Courtyard & loggia</h3>
|
||||
<p>A shared arcade and lawn at the building's center, open sunrise to midnight, with fixed seating and a communal fireplace.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="icon" aria-hidden="true"><svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><rect x="5" y="10" width="24" height="17" rx="2"/><path d="M11 10V6h12v4"/></svg></div>
|
||||
<h3>Rooftop terrace</h3>
|
||||
<p>West-facing views over the West End, communal grills, string lighting, and a gas fireplace for the wetter months.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="icon" aria-hidden="true"><svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><circle cx="10" cy="25" r="5"/><circle cx="26" cy="25" r="5"/><path d="M10 25 15 12h6l5 13M15 12l4-6"/></svg></div>
|
||||
<h3>Bike & gear room</h3>
|
||||
<p>Secure ground-floor storage, a repair stand with tools, and direct courtyard access for wet boots and muddy tires.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="icon" aria-hidden="true"><svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><path d="M17 4v26M6 12h22M6 22h22"/></svg></div>
|
||||
<h3>Fitness studio</h3>
|
||||
<p>Free weights, cardio, and a separate room for the 7am class you keep meaning to sign up for.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="icon" aria-hidden="true"><svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><rect x="5" y="6" width="24" height="22" rx="2"/><path d="M5 14h24"/></svg></div>
|
||||
<h3>Resident lounge</h3>
|
||||
<p>A quiet room for working, a bookable dining room for the nights your kitchen is too small, and coffee that's actually good.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="icon" aria-hidden="true"><svg width="34" height="34" viewBox="0 0 34 34" fill="none" stroke="#9A4A2C" stroke-width="2"><circle cx="17" cy="17" r="12"/><path d="M17 10v7l5 3"/></svg></div>
|
||||
<h3>24/7 concierge</h3>
|
||||
<p>Package acceptance, guest check-in, and someone to call after hours who actually picks up.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="neighborhood">
|
||||
<div class="container">
|
||||
<div class="section-head">
|
||||
<h2>The neighborhood</h2>
|
||||
<p>Set in Portland's West End, a few minutes' walk from the Park Blocks, the Pearl District, and the streetcar line.</p>
|
||||
</div>
|
||||
<div class="grid-3">
|
||||
<div class="feature-card">
|
||||
<h3>Walk Score® 94</h3>
|
||||
<p>Groceries, coffee, and the streetcar are all within a five-minute walk.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>Bike Score® 91</h3>
|
||||
<p>Protected lanes run directly to the river and the east side.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<h3>4 min to the Park Blocks</h3>
|
||||
<p>Portland State's tree-lined promenade, straight down 9th.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section-tight">
|
||||
<div class="container">
|
||||
<div class="cta-band">
|
||||
<h2>Found a plan you like?</h2>
|
||||
<div style="display:flex; gap:16px; flex-wrap:wrap;">
|
||||
<a href="lease.html" class="btn" style="background:var(--paper); color:var(--sienna);">Start a Lease Inquiry</a>
|
||||
<a href="contact.html" class="btn btn-ghost-light">Schedule a Tour</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div>
|
||||
<span class="wordmark">SIENA<span style="color:var(--brass);">.</span></span>
|
||||
<p>128 residences around a shared courtyard, in the heart of Portland.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Explore</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="residences.html">Residences</a></li>
|
||||
<li><a href="residences.html#amenities">Amenities</a></li>
|
||||
<li><a href="residences.html#neighborhood">Neighborhood</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Get in touch</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="lease.html">Lease inquiry</a></li>
|
||||
<li><a href="support.html">Resident support</a></li>
|
||||
<li><a href="contact.html">Visit & contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Leasing office</h4>
|
||||
<ul class="footer-links">
|
||||
<li>820 SW Ankeny Street<br>Portland, OR 97205</li>
|
||||
<li>(503) 555-0142</li>
|
||||
<li>[email protected]</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<span>© 2026 Siena Residences. All rights reserved.</span>
|
||||
<span>Equal Housing Opportunity</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
+182
@@ -0,0 +1,182 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Resident Support — Siena</title>
|
||||
<meta name="description" content="Submit a maintenance or support request as a Siena resident, or find the after-hours emergency line.">
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='3' fill='%23221C16'/%3E%3Cpath d='M9 24V15a7 7 0 0 1 14 0v9' fill='none' stroke='%23A9803F' stroke-width='2.2'/%3E%3C/svg%3E">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<a href="index.html" class="wordmark">SIENA<span>.</span></a>
|
||||
<nav class="main-nav" aria-label="Primary">
|
||||
<ul>
|
||||
<li><a href="index.html">Home</a></li>
|
||||
<li><a href="residences.html">Residences</a></li>
|
||||
<li><a href="residences.html#amenities">Amenities</a></li>
|
||||
<li><a href="support.html" aria-current="page">Resident Support</a></li>
|
||||
<li><a href="contact.html">Visit</a></li>
|
||||
</ul>
|
||||
<a href="lease.html" class="btn btn-primary nav-cta">Inquire About Leasing</a>
|
||||
</nav>
|
||||
<button class="nav-toggle" aria-label="Toggle menu" aria-expanded="false">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<p class="breadcrumb"><a href="index.html">Home</a> / Resident Support</p>
|
||||
<h1>Resident support</h1>
|
||||
<p>For current residents. Submit a maintenance request, a billing question, or anything else — our team responds within one business day, and same-day for urgent issues.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="grid-2" style="grid-template-columns: 1.4fr 1fr; align-items:start;">
|
||||
|
||||
<div class="form-card">
|
||||
<h2 style="font-size:1.5rem; margin-bottom:28px;">Submit a request</h2>
|
||||
<form data-inquiry-form data-success-message="Thank you — your request has been logged. You'll hear from our team shortly, sooner if you marked it urgent.">
|
||||
<div class="field-row">
|
||||
<div class="field">
|
||||
<label for="name">Full name</label>
|
||||
<input type="text" id="name" name="name" required autocomplete="name">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="unit">Unit number</label>
|
||||
<input type="text" id="unit" name="unit" required placeholder="e.g. 412">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<div class="field">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" name="email" required autocomplete="email">
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="phone">Phone</label>
|
||||
<input type="tel" id="phone" name="phone" autocomplete="tel">
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="category">What's this about?</label>
|
||||
<select id="category" name="category" required>
|
||||
<option value="" disabled selected>Select a category</option>
|
||||
<option>Maintenance & repairs</option>
|
||||
<option>Billing & payments</option>
|
||||
<option>Amenity reservation</option>
|
||||
<option>Noise or neighbor concern</option>
|
||||
<option>Package or delivery</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend>Priority</legend>
|
||||
<div class="radio-group">
|
||||
<label class="radio-option"><input type="radio" name="priority" value="routine" checked> Routine</label>
|
||||
<label class="radio-option"><input type="radio" name="priority" value="urgent"> Urgent</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="field">
|
||||
<label for="message">Details</label>
|
||||
<textarea id="message" name="message" required placeholder="Tell us what's going on — the more detail, the faster we can help."></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Submit Request</button>
|
||||
<div class="form-status" role="status" aria-live="polite"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="steps" style="margin-bottom:44px;">
|
||||
<div class="step">
|
||||
<div>
|
||||
<h3>Submit your request</h3>
|
||||
<p>Include your unit number and as much detail as you can — photos help, but there's nowhere to attach one here, so just describe it well.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div>
|
||||
<h3>Get a confirmation</h3>
|
||||
<p>You'll receive an email confirming we've received it, usually within a few minutes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div>
|
||||
<h3>We schedule a visit</h3>
|
||||
<p>Our maintenance team reaches out to confirm a time that works for you.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="step">
|
||||
<div>
|
||||
<h3>Follow-up</h3>
|
||||
<p>We check back in to make sure it's actually resolved, not just closed.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature-card" style="border-color:var(--sienna);">
|
||||
<h3>After-hours emergency</h3>
|
||||
<p>For anything that can't wait — flooding, no heat, being locked out after hours — call the 24/7 emergency line directly.</p>
|
||||
<p style="margin-top:14px; font-family:var(--display); font-size:1.3rem; color:var(--sienna);">(503) 555-0199</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div>
|
||||
<span class="wordmark">SIENA<span style="color:var(--brass);">.</span></span>
|
||||
<p>128 residences around a shared courtyard, in the heart of Portland.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Explore</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="residences.html">Residences</a></li>
|
||||
<li><a href="residences.html#amenities">Amenities</a></li>
|
||||
<li><a href="residences.html#neighborhood">Neighborhood</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Get in touch</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="lease.html">Lease inquiry</a></li>
|
||||
<li><a href="support.html">Resident support</a></li>
|
||||
<li><a href="contact.html">Visit & contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Leasing office</h4>
|
||||
<ul class="footer-links">
|
||||
<li>820 SW Ankeny Street<br>Portland, OR 97205</li>
|
||||
<li>(503) 555-0142</li>
|
||||
<li>[email protected]</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<span>© 2026 Siena Residences. All rights reserved.</span>
|
||||
<span>Equal Housing Opportunity</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="assets/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user