/* ===== FONTS =====
Self-hosted from R2 rather than fetched from Google. Three reasons, in order
of how much they cost: a third-party font host is a second DNS lookup, a
second TLS handshake and a dependency whose downtime is invisible to us; the
files are served with max-age=31536000, immutable, which Google caps far
lower; and nothing about a visitor is announced to a third party.
These are the same subsetted WOFF2 files Google serves - same unicode-range
splits, so a page still downloads only the latin range it needs - copied to
c21-branding/fonts/ and served from our own domain. Regenerate them with the
manifest rather than editing by hand: the file names encode style, weight
and subset, and a mismatch here fails silently as a fallback face.
================= */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(https://library.c21masters.com/c21-branding/fonts/cormorant-garamond/cormorant-garamond-italic-300-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(https://library.c21masters.com/c21-branding/fonts/cormorant-garamond/cormorant-garamond-italic-300-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://library.c21masters.com/c21-branding/fonts/cormorant-garamond/cormorant-garamond-italic-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://library.c21masters.com/c21-branding/fonts/cormorant-garamond/cormorant-garamond-italic-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(https://library.c21masters.com/c21-branding/fonts/cormorant-garamond/cormorant-garamond-italic-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(https://library.c21masters.com/c21-branding/fonts/cormorant-garamond/cormorant-garamond-italic-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://library.c21masters.com/c21-branding/fonts/cormorant-garamond/cormorant-garamond-normal-300-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://library.c21masters.com/c21-branding/fonts/cormorant-garamond/cormorant-garamond-normal-300-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://library.c21masters.com/c21-branding/fonts/cormorant-garamond/cormorant-garamond-normal-400-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://library.c21masters.com/c21-branding/fonts/cormorant-garamond/cormorant-garamond-normal-400-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://library.c21masters.com/c21-branding/fonts/cormorant-garamond/cormorant-garamond-normal-500-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://library.c21masters.com/c21-branding/fonts/cormorant-garamond/cormorant-garamond-normal-500-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(https://library.c21masters.com/c21-branding/fonts/inter/inter-normal-300-700-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(https://library.c21masters.com/c21-branding/fonts/inter/inter-normal-300-700-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ==========================================================================
AURELIA — Century 21 Masters agent template
Mirror of https://library.c21masters.com/global-css/aurelia.css
Warm cinematic hospitality. A calm, golden-hour aesthetic: full-viewport
Ken Burns hero behind a gold passe-partout frame, warm charcoal bands
alternating with ivory calm sections, Roman-numeral chapters.
Warm, not dramatic - this is the Aman of the set, not the gallery-at-night.
Fonts: Cormorant Garamond (display) / Inter (body), from Google Fonts.
Converted from the "Aurelia Luxury" source stylesheet. Dropped with the
markup they styled:
.marquee* "As featured in Architectural Digest, Robb Report,
The Wall Street Journal..." - fabricated press
credits. Not a missing-data problem: a false claim,
and it would have shipped on every agent site.
.team-*, .member* the four-person grid. Every agent here is solo, and
the design was already written for a solo advisor.
.stats-band,
.insight* counter bands and market metrics
.testimonial-* reviews become a widget with its own styling
.faq-* no FAQ on any converted template
.form-*, .valuation forms are injected and bring their own CSS
.service-entry* the services page does not exist here
.hero__toggle,
.hero__video the film hero is deferred - see section 7
.hero__marks,
.hero__mark marginalia the source template never actually used
.site-footer,
.footer-* footer.js injects the footer and defines a
.footer-bottom of its own. Keeping the source rules
would restyle the injected footer, which carries the
legal disclaimers.
.feature, .rail and .estate-card survive: the IDX and sold widgets have to
land in that card design, and widgets/aurelia/listings.html is the
reference. The template itself renders the widget, not hand-written cards.
========================================================================== */
/* --------------------------------------------------------------------------
1. Design Tokens
-------------------------------------------------------------------------- */
:root {
/* Ground */
--ink: #111111;
--ink-warm: #17140F;
--ink-deep: #0E0C08;
--soft-white: #FAF9F7;
--warm-white: #F5F3EF;
/* Gold family (hairlines and accents only - never a fill field) */
--gold: #B68C4D;
/* Focus rings and small icons on the light grounds: --gold is 2.76-2.91:1
there, under the 3:1 an indicator needs. This is 3.55-3.74:1 on them
and 4.78:1 on --ink, so one value serves every ring in the template. */
--gold-deep: #9C7B41;
--champagne: #C9A96A;
--bronze: #9A7B4F;
--gold-muted: #A8864A;
/* Text on light */
--text: #2A2622;
--muted: #6B655C;
--faint: #8A847A;
/* On dark */
--on-ink: #F4F0E8;
--on-ink-muted: rgba(244, 240, 232, 0.62);
--on-ink-faint: rgba(244, 240, 232, 0.40);
--on-ink-line: rgba(201, 169, 106, 0.20);
/* Supporting */
--border: rgba(17, 17, 17, 0.08);
--border-strong: rgba(17, 17, 17, 0.14);
--gold-divider: rgba(182, 140, 77, 0.35);
--shadow-soft: 0 1px 2px rgba(30, 22, 10, 0.05);
--shadow-lift: 0 30px 60px -30px rgba(30, 22, 10, 0.28);
--success: #2F7D5D;
--error: #B0413E;
/* Type */
--font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--t-hero: clamp(3.25rem, 1.6rem + 7vw, 5.75rem);
--t-h1: clamp(2.75rem, 1.7rem + 4.4vw, 4.5rem);
--t-h2: clamp(2.25rem, 1.55rem + 3vw, 3.5rem);
--t-h3: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
--t-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
--t-lead: clamp(1.125rem, 1.02rem + 0.4vw, 1.375rem);
--t-body: 1.125rem; /* 18px */
--t-small: 0.9375rem; /* 15px */
--t-caption: 0.875rem; /* 14px */
--t-label: 0.75rem; /* 12px labels */
/* Space */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--section-pad: clamp(5rem, 3.5rem + 7vw, 10rem);
--wrap: 74rem;
--wrap-wide: 86rem;
--wrap-narrow: 52rem;
--pad-x: clamp(1.25rem, 4vw, 3.5rem);
--rule: 1px solid var(--border);
--rule-gold: 1px solid var(--gold-divider);
/* Radius: cards 12 / images 16 / buttons 10 */
--radius-card: 12px;
--radius-image: 16px;
--radius-btn: 10px;
--radius-pill: 999px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--fast: 240ms;
--med: 560ms;
--slow: 800ms;
}
/* --------------------------------------------------------------------------
2. Reset & Base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
font-size: var(--t-body);
font-weight: 400;
line-height: 1.7;
color: var(--text);
background: var(--soft-white);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; border: none; background: none; cursor: pointer; color: inherit; }
/* The list reset again, at class strength, because on the contact page the
line above stops holding. form-inject.js copies every
off the FluentForms host into our - the whole Kadence theme with it -
and those links land after this file. Kadence ships
`ul,ol{margin:0 0 1.5em 1.5em;padding:0}` and `ul{list-style:disc}`, which
beat a bare element selector on order alone: the nav row slid 1.5em right,
carried 1.5em of dead space under it, and every item that is not a
.nav-group grew a bullet - a .nav-group is display:flex, so it has no marker
box to fill, which is why Buyers and Sellers were the two without one.
The nav lists are the only ul this template renders, so naming them is the
whole fix, and a class outranks a bare element whatever the injected sheet
does next. */
.nav-list, .nav-sub { list-style: none; margin: 0; padding: 0; }
::selection { background: var(--gold); color: #fff; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; border-radius: 2px; }
iframe:focus { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.skip-link {
position: absolute; top: -200%; left: var(--space-4); z-index: 300;
padding: var(--space-3) var(--space-6);
background: var(--ink); color: var(--on-ink);
font-size: var(--t-small); border-radius: var(--radius-btn);
}
.skip-link:focus { top: var(--space-4); }
/* --------------------------------------------------------------------------
3. Typography
-------------------------------------------------------------------------- */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 400;
line-height: 1.08;
color: var(--ink);
letter-spacing: -0.01em;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }
h1 em, h2 em, h3 em { font-style: italic; color: var(--gold); }
.text-gold { font-style: normal; color: var(--gold); }
p { max-width: 62ch; }
.lead {
font-size: var(--t-lead);
line-height: 1.65;
color: var(--muted);
font-weight: 300;
}
/* Eyebrow / chapter marker. The Roman numeral is the recurring motif. */
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-body);
font-size: var(--t-label);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.28em;
color: var(--gold-muted);
margin-bottom: var(--space-6);
}
.eyebrow .chapter {
font-family: var(--font-display);
font-style: italic;
font-size: 1.35em;
letter-spacing: 0;
color: var(--gold);
text-transform: none;
}
.eyebrow--centered { justify-content: center; }
.eyebrow--light { color: var(--champagne); }
/* --------------------------------------------------------------------------
4. Layout
-------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad-x); }
.container--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section-pad); }
.section--tight { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.section--surface { background: var(--warm-white); }
.section--dark {
background: var(--ink-warm);
color: var(--on-ink);
background-image:
radial-gradient(120% 90% at 85% -10%, rgba(182, 140, 77, 0.10), transparent 55%),
radial-gradient(90% 80% at 0% 110%, rgba(182, 140, 77, 0.06), transparent 50%);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--on-ink); }
.section-head { max-width: 46rem; margin-bottom: var(--space-16); }
.section-head--centered { margin-inline: auto; text-align: center; }
.section-head p { color: var(--muted); margin-top: var(--space-5); }
.section--dark .section-head p { color: var(--on-ink-muted); }
.section-head--centered p { margin-inline: auto; }
.section-foot { margin-top: var(--space-16); text-align: center; }
/* --------------------------------------------------------------------------
5. Buttons & Links
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-3);
padding: 1.05rem 2rem;
font-family: var(--font-body);
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.04em;
border-radius: var(--radius-btn);
border: 1px solid transparent;
transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn i, .btn svg { width: 18px; height: 18px; transition: transform var(--fast) var(--ease); }
.btn:hover i, .btn:hover svg { transform: translateX(3px); }
.btn--ink { background: var(--ink); color: #fff; }
/* A white label on --gold is 3.06:1; the ink this button sits on elsewhere
is 6.15:1 against the same gold. */
.btn--ink:hover { background: var(--gold); color: var(--ink); }
.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: var(--ink); color: #fff; }
.btn--outline { border-color: var(--gold); color: var(--gold-muted); background: transparent; }
.btn--outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--outline-light { border-color: rgba(244, 240, 232, 0.4); color: var(--on-ink); background: transparent; }
.btn--outline-light:hover { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.link-arrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-size: var(--t-small);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
padding-bottom: 3px;
border-bottom: 1px solid var(--gold-divider);
transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.link-arrow i, .link-arrow svg { width: 16px; height: 16px; transition: transform var(--fast) var(--ease); }
.link-arrow:hover { color: var(--gold); border-color: var(--gold); }
.link-arrow:hover i, .link-arrow:hover svg { transform: translateX(4px); }
.section--dark .link-arrow { color: var(--on-ink); border-color: var(--on-ink-line); }
.section--dark .link-arrow:hover { color: var(--champagne); border-color: var(--champagne); }
/* --------------------------------------------------------------------------
6. Header / Navigation
-------------------------------------------------------------------------- */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 100;
padding-block: var(--space-5);
transition: background var(--med) var(--ease), padding var(--med) var(--ease),
box-shadow var(--med) var(--ease), border-color var(--med) var(--ease);
border-bottom: 1px solid transparent;
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-8);
}
/* Transparent over the home hero; goes solid on scroll. */
.site-header--transparent { color: var(--on-ink); }
.site-header--transparent .nav-list a { color: var(--on-ink); }
.site-header--transparent .brand { color: var(--on-ink); }
/* The row's own backdrop while the bar is transparent. Same reasoning as the
classic trio: the links and the mark go --on-ink over the hero photograph,
and .hero__scrim is 0.55 at the top of the frame, which is not enough over a
bright sky - measured, the nav row read at about 2.9:1 and the CTA at 1.1:1.
Fades out by the foot of the bar so the hero below is unchanged, and only in
the transparent state, since .is-scrolled paints a real ground. */
.site-header--transparent:not(.is-scrolled)::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: calc(100% + 2.5rem);
background: linear-gradient(to bottom, rgba(14, 12, 8, 0.62) 0%, rgba(14, 12, 8, 0.56) 62%, rgba(14, 12, 8, 0) 100%);
pointer-events: none;
z-index: -1;
}
.site-header.is-scrolled {
background: var(--soft-white);
color: var(--text);
padding-block: var(--space-4);
border-bottom-color: var(--border);
box-shadow: 0 10px 30px -24px rgba(30, 22, 10, 0.4);
}
.site-header.is-scrolled .nav-list a,
.site-header.is-scrolled .brand { color: var(--ink); }
.site-header.is-scrolled .brand-mark { background: var(--ink); color: var(--gold); border-color: transparent; }
/* The nav CTA was missed by the three rules above. --site-header--transparent
stays in the class list once .is-scrolled is added, so the button kept the
cream it wears over the hero - #F4F0E8 on the solid bar's --soft-white, which
measures 1.08:1. Over the hero it is 7.64:1; scrolled it was invisible while
remaining clickable. Ink text is 17.9:1 and the 45% ink edge is 3.23:1, which
is what a control boundary needs. The hover inverts rather than filling with
cream, which on a near-white bar would erase the button's shape. */
.site-header--transparent.is-scrolled .nav-cta {
color: var(--ink);
border-color: rgba(17, 17, 17, 0.45);
}
.site-header--transparent.is-scrolled .nav-cta:hover {
background: var(--ink);
color: var(--on-ink);
border-color: var(--ink);
}
/* Interior pages open under a solid bar rather than over a hero. */
.site-header--solid {
position: sticky;
background: var(--soft-white);
color: var(--text);
border-bottom-color: var(--border);
}
.site-header--solid .nav-list a, .site-header--solid .brand { color: var(--ink); }
.brand {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-family: var(--font-display);
font-size: 1.6rem;
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1;
}
.brand em { font-style: italic; color: var(--gold); }
.brand-mark {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 9px;
border: 1px solid var(--gold-divider);
background: transparent;
color: var(--gold);
font-family: var(--font-display);
font-size: 1.35rem;
font-style: italic;
flex: none;
transition: background var(--med) var(--ease), color var(--med) var(--ease), border-color var(--med) var(--ease);
}
.site-nav { display: flex; align-items: center; gap: var(--space-10); }
.nav-list { display: flex; align-items: center; gap: var(--space-8); }
.nav-list a {
position: relative;
font-size: var(--t-caption);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.16em;
padding-block: var(--space-2);
white-space: nowrap;
transition: color var(--fast) var(--ease);
}
.nav-list a::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 0; height: 1px;
background: var(--gold);
transition: width var(--fast) var(--ease);
}
.nav-list a:hover::after,
.nav-list a[aria-current="page"]::after { width: 100%; }
.nav-list a[aria-current="page"] { color: var(--gold); }
.nav-cta { padding: 0.7rem 1.4rem; font-size: var(--t-caption); white-space: nowrap; }
.site-header--transparent .nav-cta { border-color: rgba(244, 240, 232, 0.45); color: var(--on-ink); }
.site-header--transparent .nav-cta:hover { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.nav-toggle {
display: none;
width: 44px; height: 44px;
align-items: center; justify-content: center;
color: currentColor;
flex: none;
}
.nav-toggle .icon-close { display: none; }
/* --------------------------------------------------------------------------
7. Hero — the signature cinematic plate
--------------------------------------------------------------------------
The source hero played a looping background film with a play/pause control.
The film is deferred: agent.json carries no video field, and adding one is a
schema decision rather than a template detail. Until it lands the plate runs
on the agent's hero photograph with the same slow Ken Burns drift, so the
composition - warm scrim, gold passe-partout frame with corner ticks, the
rotated marginalia rail, the advisor identity bar - is unchanged.
When the film ships it slots into .hero__media beside the image and needs
.hero__video (object-fit: cover, same drift) plus the toggle button back.
-------------------------------------------------------------------------- */
.hero {
position: relative;
min-height: 100svh;
display: flex;
align-items: center;
color: var(--on-ink);
overflow: hidden;
isolation: isolate;
background: var(--ink-deep);
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--ink-deep); }
.hero__media img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transform: scale(1.05);
animation: heroDrift 32s ease-in-out infinite alternate;
}
@keyframes heroDrift {
from { transform: scale(1.05) translate3d(0, 0, 0); }
to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}
/* The horizontal wash is deeper than the source's. The source hero was a dusk
film whose right half was already dark, so it could fall to 0.12 and keep
the headline legible. Agent hero photographs are whatever the agent has -
noon exteriors, white stucco, pale sky - and at 0.12 the display type
disappeared into them. These stops hold contrast on a bright photograph
without flattening a dark one. */
.hero__scrim {
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(90deg, rgba(14, 12, 8, 0.86) 0%, rgba(14, 12, 8, 0.64) 42%, rgba(14, 12, 8, 0.30) 74%, rgba(14, 12, 8, 0.44) 100%),
linear-gradient(180deg, rgba(14, 12, 8, 0.55) 0%, rgba(14, 12, 8, 0) 26%, rgba(14, 12, 8, 0) 62%, rgba(14, 12, 8, 0.72) 100%);
}
/* Inset gold passe-partout frame with brighter corner ticks */
.hero__frame {
position: absolute;
inset: clamp(14px, 1.6vw, 26px);
z-index: 1; pointer-events: none;
border: 1px solid rgba(201, 169, 106, 0.34);
opacity: 0;
animation: frameIn 1.5s var(--ease) 0.25s forwards;
}
.hero__frame::before, .hero__frame::after {
content: ""; position: absolute; width: 16px; height: 16px; border: 0 solid var(--champagne);
}
.hero__frame::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.hero__frame::after { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; }
@keyframes frameIn { from { opacity: 0; transform: scale(1.015); } to { opacity: 1; transform: none; } }
/* Rotated marginalia rail */
.hero__rail {
position: absolute;
right: 1.35rem; top: 50%;
transform: translateY(-50%);
writing-mode: vertical-rl;
z-index: 2; pointer-events: none;
font-size: 0.625rem; letter-spacing: 0.32em; text-transform: uppercase;
color: rgba(244, 240, 232, 0.6);
display: flex; align-items: center; gap: var(--space-5);
}
.hero__rail::after { content: ""; height: 56px; width: 1px; background: var(--gold-divider); }
.hero .container {
width: 100%;
padding-top: clamp(7rem, 5rem + 6vw, 9rem);
padding-bottom: clamp(8rem, 6rem + 8vw, 11rem);
}
.hero__inner { max-width: 54rem; }
.hero__kicker {
font-size: var(--t-label);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3em;
color: var(--champagne);
margin-bottom: var(--space-6);
display: inline-flex; align-items: center; gap: var(--space-3);
}
.hero__title {
font-size: var(--t-hero);
font-weight: 300;
line-height: 1.02;
color: #fff;
letter-spacing: -0.015em;
/* Agent copy, so the length is unknown at design time. */
overflow-wrap: break-word;
}
.hero__title em { color: var(--champagne); font-weight: 300; }
.hero__lead {
margin-top: var(--space-6);
max-width: 40rem;
font-size: var(--t-lead);
font-weight: 300;
color: rgba(255, 255, 255, 0.84);
}
.hero__actions {
margin-top: var(--space-10);
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
/* Bottom bar: advisor identity + scroll cue */
.hero__bar {
position: absolute;
left: 0; right: 0; bottom: clamp(1.4rem, 1rem + 2vw, 2.6rem);
z-index: 3;
}
.hero__bar .container {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-6); flex-wrap: wrap;
padding-block: 0; /* override the hero content container's vertical padding */
}
.hero__agent { display: inline-flex; align-items: center; gap: var(--space-4); }
.hero__agent img {
width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
border: 1px solid rgba(201, 169, 106, 0.5);
transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.hero__agent:hover img { border-color: var(--champagne); transform: scale(1.04); }
.hero__agent-text strong { display: block; font-size: var(--t-small); color: #fff; font-weight: 500; letter-spacing: 0.02em; }
.hero__agent-text span { font-size: var(--t-caption); color: rgba(244, 240, 232, 0.62); letter-spacing: 0.02em; }
.hero__tools { display: inline-flex; align-items: center; gap: var(--space-6); }
.hero__scroll {
display: inline-flex; align-items: center; gap: var(--space-3);
font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.24em;
color: rgba(255, 255, 255, 0.72);
}
.hero__scroll i, .hero__scroll svg { width: 16px; height: 16px; animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
/* --------------------------------------------------------------------------
8. Feature and estate cards
--------------------------------------------------------------------------
Kept for the widgets, not for hand-written listings. The IDX and
sold-properties embeds have to land in this card design; the reference copy
lives in widgets/aurelia/listings.html.
-------------------------------------------------------------------------- */
.feature {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: clamp(1.5rem, 4vw, 4rem);
align-items: center;
}
.feature__media {
position: relative;
border-radius: var(--radius-image);
overflow: hidden;
aspect-ratio: 4 / 3.4;
}
.feature__media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 1.2s var(--ease);
}
.feature:hover .feature__media img { transform: scale(1.05); }
.feature__tag {
position: absolute; top: var(--space-5); left: var(--space-5);
padding: 0.5rem 1rem;
background: rgba(14, 12, 8, 0.55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: var(--champagne);
font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.2em;
border-radius: var(--radius-pill);
border: 1px solid rgba(201, 169, 106, 0.3);
}
.feature__no {
font-family: var(--font-display); font-style: italic;
font-size: 1.35rem; color: var(--gold);
display: block; margin-bottom: var(--space-4);
}
.feature__name { margin-bottom: var(--space-3); }
.feature__loc {
display: inline-flex; align-items: center; gap: var(--space-2);
font-size: var(--t-small); color: var(--muted); letter-spacing: 0.04em;
margin-bottom: var(--space-6);
}
.feature__loc i, .feature__loc svg { width: 16px; height: 16px; color: var(--gold); }
.feature__desc { color: var(--muted); margin-bottom: var(--space-8); }
.feature__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.estate-card {
scroll-snap-align: start;
background: var(--soft-white);
border: var(--rule);
border-radius: var(--radius-card);
overflow: hidden;
display: flex; flex-direction: column;
transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease), border-color var(--med) var(--ease);
}
.estate-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--gold-divider); }
.estate-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.estate-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.estate-card:hover .estate-card__media img { transform: scale(1.06); }
.estate-card__badge {
position: absolute; top: var(--space-4); left: var(--space-4);
padding: 0.35rem 0.85rem;
background: rgba(250, 249, 247, 0.92);
color: var(--gold-muted);
font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.18em;
border-radius: var(--radius-pill);
}
.estate-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }
.estate-card__name { font-size: var(--t-h4); }
.estate-card__loc {
display: inline-flex; align-items: center; gap: var(--space-2);
font-size: var(--t-caption); color: var(--muted);
}
.estate-card__loc i, .estate-card__loc svg { width: 15px; height: 15px; color: var(--gold); }
.estate-card__foot {
margin-top: auto; padding-top: var(--space-5);
border-top: var(--rule);
display: flex; align-items: center; justify-content: space-between;
}
.estate-card__price { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); }
.estate-card__foot a { color: var(--gold); display: inline-flex; }
.estate-card__foot a i, .estate-card__foot a svg { width: 20px; height: 20px; transition: transform var(--fast) var(--ease); }
.estate-card__foot a:hover i, .estate-card__foot a:hover svg { transform: translate(3px, -3px); }
/* --------------------------------------------------------------------------
9. Editorial split
-------------------------------------------------------------------------- */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 6vw, 6rem);
align-items: center;
}
.split--reverse .split-media { order: 2; }
.split-media { position: relative; }
.frame {
position: relative;
border-radius: var(--radius-image);
overflow: hidden;
}
.frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; transition: transform 1.2s var(--ease); }
.frame:hover img { transform: scale(1.05); }
.frame-caption {
position: absolute; left: var(--space-5); bottom: var(--space-5);
padding: var(--space-4) var(--space-5);
background: rgba(14, 12, 8, 0.5);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border-radius: var(--radius-btn);
color: #fff;
display: flex; flex-direction: column; gap: 2px;
}
.frame-caption strong { font-weight: 500; font-size: var(--t-small); }
.frame-caption span { font-size: var(--t-caption); color: var(--champagne); }
/* Offset accent frame. z-index:-1 puts it behind the section background, so it
only reads on a light ground - do not use it inside .section--dark. */
.frame--offset::before {
content: ""; position: absolute; inset: 0;
transform: translate(18px, 18px);
border: 1px solid var(--gold-divider);
border-radius: var(--radius-image);
z-index: -1;
}
.split-body h2 { margin-bottom: var(--space-6); }
.split-body p { color: var(--muted); margin-bottom: var(--space-5); }
.split-body .link-arrow { margin-top: var(--space-4); }
.section--dark .split-body p { color: var(--on-ink-muted); }
/* --------------------------------------------------------------------------
10. Communities mosaic
--------------------------------------------------------------------------
The first tile spans two columns and two rows; the rest fill in around it.
The source hardcoded five California towns with invented residence counts.
It renders the agent's own communities now, each linking into the IDX for
that city.
-------------------------------------------------------------------------- */
.community-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
}
.community-grid .community:first-child { grid-column: span 2; grid-row: span 2; }
.community {
position: relative;
border-radius: var(--radius-image);
overflow: hidden;
min-height: 220px;
display: flex;
isolation: isolate;
}
.community img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; z-index: -2;
transition: transform 1.4s var(--ease);
}
.community::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(14,12,8,0) 35%, rgba(14,12,8,0.78) 100%);
transition: opacity var(--med) var(--ease);
}
.community:hover img { transform: scale(1.07); }
.community__body {
margin-top: auto; padding: var(--space-6);
color: #fff;
}
.community__body h3 { color: #fff; font-size: var(--t-h4); }
.community__body span {
display: inline-flex; align-items: center; gap: var(--space-2);
margin-top: var(--space-2);
font-size: var(--t-caption); color: var(--champagne);
letter-spacing: 0.04em;
}
.community__body span i, .community__body span svg { width: 15px; height: 15px; }
.community:first-child .community__body h3 { font-size: var(--t-h3); }
/* Only the lead tile has room for a description. */
.community__desc { display: none; }
.community:first-child .community__desc {
display: block; margin-top: var(--space-2);
font-size: var(--t-small); color: rgba(255, 255, 255, 0.78); max-width: 44ch;
}
/* --------------------------------------------------------------------------
11. Lifestyle full-bleed parallax band
-------------------------------------------------------------------------- */
.lifestyle {
position: relative;
min-height: 78vh;
display: flex;
align-items: center;
color: var(--on-ink);
overflow: hidden;
isolation: isolate;
}
.lifestyle__media { position: absolute; inset: -12% 0; z-index: -2; }
.lifestyle__media img { width: 100%; height: 100%; object-fit: cover; }
.lifestyle::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(90deg, rgba(14,12,8,0.82) 0%, rgba(14,12,8,0.5) 45%, rgba(14,12,8,0.25) 100%);
}
.lifestyle__inner { max-width: 40rem; }
.lifestyle blockquote {
font-family: var(--font-display);
font-weight: 300;
font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
line-height: 1.2;
color: #fff;
margin-block: var(--space-6);
}
.lifestyle blockquote em { color: var(--champagne); font-style: italic; }
.lifestyle cite {
font-style: normal; font-size: var(--t-small);
text-transform: uppercase; letter-spacing: 0.18em;
color: var(--on-ink-muted);
}
/* --------------------------------------------------------------------------
12. Advisor credentials (About)
-------------------------------------------------------------------------- */
.advisor-creds { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
.advisor-creds li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--t-small); color: var(--on-ink-muted); }
.advisor-creds i, .advisor-creds svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.advisor-creds a { color: var(--on-ink); transition: color var(--fast) var(--ease); }
.advisor-creds a:hover { color: var(--champagne); }
/* --------------------------------------------------------------------------
13. Service cards
-------------------------------------------------------------------------- */
.service-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.service-card {
border: var(--rule);
border-radius: var(--radius-card);
padding: var(--space-10);
background: var(--soft-white);
display: flex; flex-direction: column;
transition: transform var(--med) var(--ease), box-shadow var(--med) var(--ease), border-color var(--med) var(--ease);
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--gold-divider); }
.service-num { font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: 1.2rem; margin-bottom: var(--space-6); }
.service-icon {
display: grid; place-items: center;
width: 56px; height: 56px;
border-radius: 50%;
border: 1px solid var(--gold-divider);
color: var(--gold);
margin-bottom: var(--space-6);
}
.service-icon svg, .service-icon i { width: 24px; height: 24px; }
.service-card h3 { font-size: var(--t-h4); margin-bottom: var(--space-4); }
.service-card p { color: var(--muted); font-size: var(--t-small); margin-bottom: var(--space-6); flex: 1; }
/* --------------------------------------------------------------------------
14. CTA band
-------------------------------------------------------------------------- */
.cta-band { text-align: center; }
.cta-band .eyebrow { justify-content: center; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; margin-bottom: var(--space-6); }
.cta-band p { max-width: 46ch; margin-inline: auto; color: var(--on-ink-muted); margin-bottom: var(--space-10); }
.cta-band .hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-4); }
/* --------------------------------------------------------------------------
15. Page hero (interior pages)
-------------------------------------------------------------------------- */
.page-hero {
position: relative;
padding-top: clamp(9rem, 7rem + 6vw, 13rem);
padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6rem);
color: var(--on-ink);
overflow: hidden;
isolation: isolate;
background: var(--ink-deep);
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); animation: kenburns 22s var(--ease) forwards; }
@keyframes kenburns { from { transform: scale(1.05); } to { transform: scale(1.12); } }
.page-hero::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(14,12,8,0.6), rgba(14,12,8,0.5) 40%, rgba(14,12,8,0.82));
}
.page-hero h1 { color: #fff; font-weight: 300; font-size: var(--t-h1); max-width: 16ch; }
.page-hero h1 em { color: var(--champagne); }
.page-hero p { margin-top: var(--space-6); max-width: 44rem; font-size: var(--t-lead); font-weight: 300; color: rgba(255,255,255,0.82); }
.breadcrumb {
display: flex; align-items: center; gap: var(--space-3);
font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.16em;
color: var(--champagne); margin-bottom: var(--space-6);
}
.breadcrumb a { color: rgba(255,255,255,0.7); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb i, .breadcrumb svg { width: 14px; height: 14px; opacity: 0.6; }
/* --------------------------------------------------------------------------
16. Value grid and process steps
-------------------------------------------------------------------------- */
/* Two columns, not the source's three. The only page that uses this holds
four principles, and three columns left the fourth orphaned on its own row -
a defect the source template shipped with. Two-by-two also suits the
unhurried pacing this design is built on. */
.value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-10) var(--space-16); }
.value__icon { color: var(--gold); margin-bottom: var(--space-5); }
.value__icon svg, .value__icon i { width: 28px; height: 28px; }
.value h3 { font-size: var(--t-h4); margin-bottom: var(--space-3); }
.value p { color: var(--muted); font-size: var(--t-small); }
.section--dark .value h3 { color: var(--on-ink); }
.section--dark .value p { color: var(--on-ink-muted); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
.step { position: relative; padding-top: var(--space-8); border-top: 1px solid var(--gold-divider); }
.step__no { font-family: var(--font-display); font-style: italic; font-size: 2rem; color: var(--gold); display: block; margin-bottom: var(--space-4); }
.step h3 { font-size: var(--t-h4); margin-bottom: var(--space-3); }
.step p { font-size: var(--t-small); color: var(--muted); }
.section--dark .step p { color: var(--on-ink-muted); }
/* Checklist, used on the buyer and seller pages. */
.checklist { display: grid; gap: var(--space-4); margin-block: var(--space-8); }
.checklist li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--t-small); color: var(--text); }
.checklist i, .checklist svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 4px; }
.section--dark .checklist li { color: var(--on-ink-muted); }
/* Contact detail rows. */
.contact-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact-item { display: flex; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-8); }
.contact-item .service-icon { margin-bottom: 0; flex: none; width: 46px; height: 46px; }
.contact-item .service-icon svg, .contact-item .service-icon i { width: 18px; height: 18px; }
.contact-item h3 { font-family: var(--font-body); font-size: var(--t-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--faint); margin-bottom: var(--space-1); }
.contact-item p, .contact-item a { font-size: var(--t-body); color: var(--ink); line-height: 1.5; }
.contact-item a:hover { color: var(--gold); }
/* --------------------------------------------------------------------------
17. Reveal / motion
-------------------------------------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(26px);
transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out);
transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
.hero__inner > * { opacity: 0; transform: translateY(24px); animation: rise 1s var(--ease-out) forwards; }
.hero__inner > *:nth-child(1) { animation-delay: 0.15s; }
.hero__inner > *:nth-child(2) { animation-delay: 0.32s; }
.hero__inner > *:nth-child(3) { animation-delay: 0.49s; }
.hero__inner > *:nth-child(4) { animation-delay: 0.66s; }
@keyframes rise { to { opacity: 1; transform: none; } }
/* --------------------------------------------------------------------------
18. Responsive
-------------------------------------------------------------------------- */
@media (max-width: 1080px) {
.community-grid { grid-template-columns: repeat(2, 1fr); }
.community-grid .community:first-child { grid-column: span 2; grid-row: auto; }
}
/* Burger drawer — the overflow menu, and the phone menu, and the same thing
at every width in between. This used to be @media (max-width: 1024px),
raised by hand when the Gold nav outgrew the source design, and it was
still wrong in a way a bigger number could not have fixed: the row needed
1201px but this template's container caps at 1184px, so the row overflowed
its own container and the viewport edge cut the CTA off mid-word.
global-js/nav-fit.js nests whatever does not fit in here instead. */
.nav-panel {
position: fixed;
inset: 0 0 0 auto;
/* Half the window from 442px up, the whole window at 441 and below. A width
tied to the design's own taste (this was min(88vw, 400px)) made the same
menu a different size on every template; a proportion reproduces. */
width: 50%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: var(--space-8);
padding: var(--space-20) var(--space-10);
background: var(--soft-white);
box-shadow: -30px 0 60px -30px rgba(30,22,10,0.5);
transform: translateX(100%);
opacity: 0;
/* visibility is in the transition with a delay so it flips instantly on
open and only once the slide has finished on close. Without the delay the
drawer disappears on the first frame of closing and the animation is
never seen. */
transition: transform var(--med) var(--ease),
opacity var(--med) var(--ease),
visibility 0s linear var(--med);
z-index: 120;
overflow-y: auto;
/* The drawer sits off-screen rather than hidden, so without this its links
stay in the tab order while it is closed. */
visibility: hidden;
}
/* Safe centring for the panel's contents.
justify-content:center in a scroll container puts the overflow at BOTH ends,
and the half above the centre cannot be scrolled to - scrollTop is already 0
there. It went unnoticed while the panel held only the links that did not
fit; now that the burger means EVERY item is in here, a short screen put the
mark and the first two links in that unreachable half (measured: 153px cut
off at 360x640, 228px at 320x480).
Auto margins centre exactly the same way when there is free space - two of
them split it evenly - and collapse to zero when there is none, so the menu
is centred when it fits and scrolls from its true top when it does not.
Nothing here is a media query: the condition is whether the content fits,
which no breakpoint knows. */
/* No auto margins here, and that is the point.
The panel used to centre its contents with justify-content, which put the
overflow at both ends and made the top half unreachable. Auto margins fixed
the reachability but kept the drift: the mark landed 32px from the panel top
on a short screen and 180px on a tall one, and on a tall drawer it left a
168px void between the mark and the first link - the logo read as stranded
rather than as the head of the menu.
So the stack is simply top-aligned: the mark sits at the panel's top padding,
the links follow one gap below it, and both are the same on every screen. It
costs nothing in emptiness, because the panels that could look sparse
(classic, california, timeless) are height:auto and shrink to their content;
the two side drawers are full-height by design, where a menu that starts at
the top is the ordinary thing. justify-content: flex-start above is what
keeps the top scrollable when the content is taller than the screen. */
body.nav-open .nav-panel { transform: translateX(0); visibility: visible; }
body.nav-open .nav-panel {
transform: translateX(0);
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
/* Phones take the whole window: half of 400px is a column of menu beside a
column of page nobody can read. */
@media (max-width: 441px) {
.nav-panel { width: 100%; }
}
.nav-panel .nav-list { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.nav-panel .nav-list a { font-size: 1rem; color: var(--ink) !important; }
/* Gold stays on the hairline, ink carries the label. --gold-muted on
--soft-white is 3.23:1, which is the same reason the note at the top of
this file gives for keeping gold off fills - the label was the one place
that had not followed it. Ink here is 17.9:1 and the border still reads
as gold. */
.nav-panel .nav-cta { color: var(--ink); border-color: var(--gold); }
body.nav-open .nav-toggle .icon-menu { display: none; }
body.nav-open .nav-toggle .icon-close { display: block; }
body.nav-open .nav-toggle { color: var(--ink); position: relative; z-index: 130; }
body.nav-open { overflow: hidden; }
/* The burger appears only when the drawer has something in it. nav-fit.js
sets this to "false" when every item fits inline; it is absent until the
script runs, and absent has to mean visible - that is the state a phone
loads in, with every item still in the drawer. */
.nav-toggle { display: inline-flex; }
[data-nav-overflow="false"] .nav-toggle { display: none; }
/* An inline nav link that wraps to a second line is the thing overflow is
there to prevent, so it must not be an option the row can take instead. */
.site-nav .nav-list a,
.site-nav .nav-cta { white-space: nowrap; }
/* ---- Nav submenus ---------------------------------------------------
Buyers carries Calculator; Sellers carries Home Valuation and Sold. A group
is ONE element, so nav-fit.js moves it whole and knows nothing about the
nesting - all that is left is how it reads in each of the two places it can
land.
Inline it is an absolutely positioned dropdown, and that is not a styling
preference: a submenu in flow would make the group as wide as its widest
child, nav-fit would measure that width, and the group would nest at every
screen size. On this template that is not hypothetical - the container caps
at 1184px and already nests a link or two, so an in-flow submenu would mean
the dropdown was never once seen.
It opens on :hover and on :focus-within, and no script owns either. Focus
reaches the parent link, which is always visible, before it can reach into
the submenu, so :focus-within is already true by the time the next Tab
lands inside. That is what lets the closed state use visibility:hidden and
keep the submenu out of the tab order until it is on screen. */
.nav-group { position: relative; display: flex; align-items: center; }
.nav-group > a { display: inline-flex; align-items: center; gap: 0.5em; }
.nav-sub { display: flex; flex-direction: column; }
/* Drawn from borders rather than an icon: Lucide is inlined in
global-js/aurelia.js and runs after first paint, so an here
would be an empty box in the bar until that script landed. */
.nav-caret {
width: 0.32em; height: 0.32em; flex: none;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: translateY(-0.1em) rotate(45deg);
transition: transform var(--fast) var(--ease);
}
/* Inline: the dropdown. z-index sits under the drawer's 120 and over the row:
the drawer is a sibling inside this same header, and a dropdown that could
paint over an open drawer would be a menu on top of a menu. */
[data-nav-fit-inline] .nav-sub {
position: absolute;
top: 100%; left: calc(var(--space-4) * -1);
min-width: max-content;
margin-top: var(--space-4);
padding-block: var(--space-2);
background: var(--soft-white);
border: var(--rule);
border-radius: var(--radius-card);
box-shadow: var(--shadow-lift);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity var(--fast) var(--ease),
transform var(--fast) var(--ease),
visibility var(--fast) var(--ease);
z-index: 110;
}
/* The gap between the label and the card is dead ground the pointer has to
cross, and crossing it would close the menu. This bridges it. */
[data-nav-fit-inline] .nav-sub::before {
content: ""; position: absolute; left: 0; right: 0;
top: calc(var(--space-4) * -1); height: var(--space-4);
}
[data-nav-fit-inline] .nav-group:hover .nav-sub,
[data-nav-fit-inline] .nav-group:focus-within .nav-sub {
opacity: 1; visibility: visible; transform: translateY(0);
}
[data-nav-fit-inline] .nav-group:hover .nav-caret,
[data-nav-fit-inline] .nav-group:focus-within .nav-caret { transform: translateY(0.08em) rotate(-135deg); }
[data-nav-fit-inline] .nav-sub a { display: block; padding: var(--space-2) var(--space-5); }
/* The sliding gold hairline is drawn at the link's bottom edge, which inside a
padded row lands in the middle of the gap between items. */
[data-nav-fit-inline] .nav-sub a::after { display: none; }
[data-nav-fit-inline] .nav-sub a:hover { background: var(--warm-white); }
/* The bar recolours its own links twice - cream over the hero, ink once
scrolled - and both rules reach every .nav-list a inside the header. The
dropdown is inside that header but stands on its own ivory card, where
cream is cream on cream. These match .site-header.is-scrolled's (0,3,0) and
come later, so the card keeps its own colour in both bar states. */
.site-header--transparent .nav-sub a,
.site-header.is-scrolled .nav-sub a { color: var(--text); }
.site-header--transparent .nav-sub a:hover,
.site-header.is-scrolled .nav-sub a:hover { color: var(--ink); }
/* Panel: an indented block, always open. There is no disclosure to tap - the
drawer exists to show what did not fit, so hiding half of it behind a
second interaction would defeat it. */
[data-nav-fit-panel] .nav-group {
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
}
[data-nav-fit-panel] .nav-sub {
gap: var(--space-4);
margin-left: var(--space-2);
padding-left: var(--space-4);
border-left: 1px solid var(--gold-divider);
}
[data-nav-fit-panel] .nav-sub a { font-size: var(--t-caption); }
[data-nav-fit-panel] .nav-caret { display: none; }
@media (max-width: 900px) {
.feature { grid-template-columns: 1fr; }
.split { grid-template-columns: 1fr; }
.split--reverse .split-media { order: 0; }
.frame img { aspect-ratio: 16 / 11; }
.contact-layout { grid-template-columns: 1fr; }
.service-grid, .value-grid { grid-template-columns: repeat(2, 1fr); }
.steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
:root { --t-body: 1.0625rem; }
.hero__rail { display: none; }
.service-grid, .value-grid, .community-grid, .steps { grid-template-columns: 1fr; }
.community-grid .community:first-child { grid-column: auto; }
.btn { width: 100%; justify-content: center; }
.hero__actions { width: 100%; }
}
/* Mobile hero: stack the plate so the identity bar cannot overlap the copy. */
@media (max-width: 720px) {
.hero__rail { display: none; }
}
@media (max-width: 640px) {
.hero { display: flex; flex-direction: column; }
.hero .container { padding-top: 7.5rem; padding-bottom: var(--space-10); flex: 1 0 auto; }
.hero__bar { position: static; padding-bottom: var(--space-8); }
.hero__bar .container {
padding-inline: var(--pad-x); flex-direction: column; align-items: flex-start; gap: var(--space-5);
}
.hero__tools { width: 100%; justify-content: space-between; }
.hero__agent img { width: 46px; height: 46px; }
}
@media (max-width: 400px) {
.hero__scroll { display: none; }
}
/* --------------------------------------------------------------------------
19. Reduced motion
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1; transform: none; }
.hero__inner > * { opacity: 1; transform: none; }
.hero__media img, .page-hero__media img { transform: none; animation: none; }
}
/* =====================================================================
ADDED IN CONVERSION — markup the source template did not have
===================================================================== */
/* The IDX. The widget renders into this container asynchronously, so it
reserves its height and shows a warm shimmer until it does. */
.ylopo-easy-widget { min-height: 420px; position: relative; border-radius: var(--radius-card); overflow: hidden; }
.ylopo-easy-widget.ylopo-loading::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, var(--warm-white) 25%, var(--soft-white) 37%, var(--warm-white) 63%);
background-size: 400% 100%;
animation: aurelia-shimmer 1.4s ease infinite;
}
.ylopo-easy-widget.ylopo-ready::before { display: none; }
@keyframes aurelia-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
/* QA build notices, visible while the reviews, sold-properties and contact
widgets are being built. Remove once all three ship. */
.qa-note {
display: flex; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap;
max-width: 60ch; margin-inline: auto;
padding: var(--space-6) var(--space-8);
border: 1px dashed var(--gold-divider);
border-radius: var(--radius-card);
background: rgba(182, 140, 77, 0.06);
text-align: left;
}
.qa-note__tag {
flex: none;
font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
color: #fff; background: var(--gold);
border-radius: var(--radius-pill); padding: 0.35rem 0.85rem;
}
.qa-note p { font-size: var(--t-small); flex: 1 1 22ch; margin: 0; color: var(--muted); }
.section--dark .qa-note p { color: var(--on-ink-muted); }
@media (max-width: 560px) { .qa-note { flex-direction: column; gap: var(--space-3); } }
/* Mobile CTA width ----------------------------------------------------
At phone widths a standalone CTA goes full width with its label centred.
Sized to its own text it leaves a ragged edge against the copy above it,
and of two stacked buttons the shorter reads as the lesser one purely
because it is narrower.
Card actions and widget-injected markup are excluded: community tiles size
their actions to the tile, and the Ylopo cards carry their own classes.
Written as a max-width override rather than a mobile-first base rule so the
desktop layout cannot be affected by construction. */
@media (max-width: 640px) {
.btn { width: 100%; justify-content: center; text-align: center; }
.community .btn,
.ylopo-easy-widget .btn { width: auto; }
.hero__actions,
.cta-band .hero-actions { flex-direction: column; align-items: stretch; }
/* .link-arrow is a text CTA rather than a button, so it is centred without
being stretched. fit-content keeps its underline and arrow tight to the
label instead of dragging them across the column. */
.link-arrow { display: flex; width: fit-content; margin-inline: auto; }
}
/* Sold page with nothing to show.
The visitor-facing counterpart to .qa-note: an agent whose Ylopo agent ids
are not on file yet gets this instead of an empty band. Which of the two
renders is decided in Nunjucks - the widget has to be absent from the page,
not hidden here. */
.sold-empty {
max-width: 46ch; margin-inline: auto;
padding: var(--space-8, 2rem) var(--space-4, 1rem);
text-align: center;
border-top: 1px solid var(--border, rgba(17, 17, 17, 0.08));
border-bottom: 1px solid var(--border, rgba(17, 17, 17, 0.08));
}
.sold-empty .sold-empty__title {
font-family: var(--font-display, Georgia, serif);
font-size: var(--t-h4, 1.375rem); font-weight: 400;
margin: 0 0 var(--space-3, 0.75rem);
color: var(--ink, #111111);
}
.sold-empty p { margin: 0; font-size: var(--t-small, 0.9375rem); color: var(--muted, #6B655C); }
.sold-empty a { color: var(--gold, #B68C4D); text-decoration: underline; text-underline-offset: 0.2em; }
.sold-empty a:hover { color: var(--gold-deep, #9C7B41); }
/* Sale date on sold cards - OFF unless SHOW_SOLD_DATE is on in
scripts/feature-flags.mjs, which is what emits data-sold-date on the widget.
The Ylopo widget puts the date in .gallery-card-b-generate-sort-block, which
this template's card CSS in the ylopo-grid project hides outright. Overriding
that !important needs both the flag attribute and this specificity, so the
rule lives here rather than there - and so the per-template design of the bar,
when it happens, sits with the rest of this template's tokens.
:has(.sold-date) is load-bearing, not decoration. For-sale cards reuse the
same container for "Listed 4 Months Ago", so revealing it unscoped would put
that strip on every listing card on every home and search page. Only a sold
card has .sold-date inside.
Two selectors, not one: the card redesign takes .property-details-wrap out of
layout with display:none, and on these templates that wrapper holds the sort
block and nothing else - so the block alone computes to a 0x0 box inside a
hidden parent. Revealing the wrapper duplicates no content precisely because
it is otherwise empty; check that still holds before copying this to a new
template.
Still wearing the widget's own grey bar styling: designing it per template is
the work that has to happen before the flag is turned on. */
.ylopo-easy-widget[data-sold-date="true"] .property-details-wrap:has(.sold-date),
.ylopo-easy-widget[data-sold-date="true"] .gallery-card-b-generate-sort-block:has(.sold-date) {
display: flex !important;
}
/* ── Footer (injected by footer.js) ──
footer.js owns the footer's markup and its styles; neither rule below
restyles it. Both stop this stylesheet from reaching into it.
`footer p` undoes the measure cap from section 3. `p { max-width: 62ch }`
is right for the editorial body copy it was written for, but it also hits
the injected footer, where footer.js centres the text and not the block:
the DBA line, the DRE licence, the legal disclaimer and the MLS label were
all pinned to the left edge of a full-width column while the Century 21
logo and the MLS grid stayed centred.
`footer > *` gives the footer the same 74rem measure as every band above
it — the same rule brand, signature and starter carry, since the injected
footer brings no wrap of its own and would otherwise run edge to edge. */
footer p { max-width: none; }
footer > * {
max-width: var(--wrap);
margin-inline: auto;
}
/* Backdrop for the nav drawer. Created by the template's script, not by the
layout, so no markup changes. It exists as much to swallow the click as to
dim the page: tapping beside an open drawer should dismiss it and nothing
else, and a dim painted with a shadow on the panel would let that tap fall
through to a link underneath. Sits one below the drawer. */
.nav-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.45);
opacity: 0;
visibility: hidden;
transition: opacity var(--med) var(--ease), visibility 0s linear var(--med);
z-index: 119;
}
.nav-backdrop.is-open {
opacity: 1;
visibility: visible;
transition-delay: 0s;
}