, not h1–3, so the uppercase display transform hits section & hero headings without shouting on listing/agent cards.) */ [data-theme="estate"] { --font-display: 'Cormorant', 'Georgia', 'Times New Roman', serif; --font-body: 'Jost', 'Helvetica Neue', 'Segoe UI', sans-serif; --display-weight: 600; --display-tracking: 0.01em; --display-transform: uppercase; --display-line: 1.05; --text-display: 82px; --text-h1: 54px; --text-h2: 40px; --text-h3: 26px; --text-md: 15px; --line-body: 1.7; --eyebrow-size: 11px; --eyebrow-tracking: 0.3em; --eyebrow-weight: 500; --eyebrow-color: var(--accent-text); --control-font: var(--font-body); --control-weight: 500; --control-size: 12px; --control-tracking: 0.2em; --control-transform: uppercase; /* cool near-black navy dark; a barely-cool paper so light cards/testimonials pop */ --surface-page: oklch(0.986 0.003 255); --surface-tint: oklch(0.955 0.006 255); --site-dark: oklch(0.17 0.02 264); /* soft antique gold — luminous variant for gold-on-dark eyebrows/stars */ --accent: oklch(0.58 0.072 72); --accent-soft: oklch(0.58 0.072 72 / 0.1); --accent-on-dark: oklch(0.83 0.08 82); --accent-on-dark-ink: oklch(0.17 0.02 264); /* rounded cards + pill controls; keeps the root's soft warm shadow (unlike luxury) */ --radius-card: 18px; --radius-control: 999px; --radius-media: 18px; --container: 1240px; --section-pad-y: clamp(64px, 10vw, 128px); --grid-gap: var(--space-6); } /* PLATFORM preset — the CommunitySync marketing look: DARK-NATIVE everywhere (the whole page is near-black, not just per-section dark bands), a transitional Newsreader serif display with a warm-orange accent, and an italic-serif heading highlight. Unlike estate (light paper + dark section bands), this preset flips the FOUNDATION surface + text tokens to a dark palette, so every unwrapped section inherits the dark page and reads light. cs-surface--dark bands still work — they just sit on an already-dark page. Tokens only; block markup is untouched. Built for the platform site, but any community can select it. */ [data-theme="platform"] { --font-display: 'Newsreader', 'Georgia', 'Times New Roman', serif; --font-body: 'Public Sans', 'Helvetica Neue', 'Segoe UI', sans-serif; --display-weight: 500; --display-tracking: -0.01em; --display-transform: none; --display-line: 1.04; --text-display: 76px; --text-h1: 50px; --text-h2: 38px; --text-h3: 23px; --text-md: 16px; --line-body: 1.65; --eyebrow-size: 12px; --eyebrow-tracking: 0.22em; --eyebrow-weight: 700; --eyebrow-color: var(--accent-on-dark); --control-weight: 600; --control-tracking: 0.01em; --control-transform: none; --control-size: 14px; --container: 1200px; --section-pad-y: clamp(64px, 9vw, 120px); --hero-pad-y: clamp(72px, 11vw, 150px); --radius-card: 14px; --radius-control: 10px; --radius-media: 12px; /* warm-orange accent — a rich orange for fills/buttons, a brighter one for text and eyebrows sitting on the dark page. */ --accent: oklch(0.70 0.16 55); --accent-soft: oklch(0.70 0.16 55 / 0.14); --accent-on-dark: oklch(0.80 0.14 62); --accent-on-dark-ink: oklch(0.18 0.03 60); --accent-on: #12100e; /* the page is DARK, so accent-as-text must be the bright on-dark orange (the light-page --accent would be an unreadable dark orange on near-black). */ --accent-text: var(--accent-on-dark); /* DARK foundation — near-black warm page, light cards, off-white text. */ --surface-page: oklch(0.17 0.006 60); --surface-card: oklch(0.22 0.008 60); --surface-tint: oklch(0.20 0.007 60); --site-dark: oklch(0.145 0.006 60); --site-dark-ink: oklch(0.97 0.004 90); --text-heading: oklch(0.98 0.004 90); --text-body: oklch(0.84 0.006 85); --text-muted: oklch(0.68 0.008 80); --text-faint: oklch(0.52 0.008 80); --border: oklch(0.32 0.008 70); --border-soft: oklch(0.26 0.008 65); --border-strong: oklch(0.46 0.01 70); --nav-pop-bg: var(--surface-card); --nav-pop-muted: var(--text-faint); --shadow-card: 0 1px 2px oklch(0 0 0 / 0.3), 0 12px 32px oklch(0 0 0 / 0.35); --shadow-pop: 0 2px 8px oklch(0 0 0 / 0.4), 0 24px 60px oklch(0 0 0 / 0.5); } /* platform nav/eyebrows — uppercase, letter-spaced links; the orange eyebrow. */ [data-theme="platform"] .eyebrow { color: var(--accent-on-dark); } [data-theme="platform"] .block-nav__links a:not(.block-nav__cta), [data-theme="platform"] .block-nav__group-btn { color: var(--text-body); } /* platform display headings lean lighter-weight serif; the italic highlight uses a serif italic in the accent — matches "Build your tribe" / "everything your agents do". */ [data-theme="platform"] .cs-hl { font-style: italic; font-weight: 500; } /* ARENA preset — the dark athletic/entertainment look: DARK-NATIVE like platform (the whole page is near-black), but a NEUTRAL cold black (no warm tint), bold Montserrat for display AND body, a signal-red accent, uppercase letter-spaced controls/nav and tight radii. Built for sports & entertainment brands (broker groups, arenas, media) — any community can select it. Tokens only; block markup is untouched. */ [data-theme="arena"] { --font-display: 'Montserrat', 'Helvetica Neue', 'Segoe UI', sans-serif; --font-body: 'Montserrat', 'Helvetica Neue', 'Segoe UI', sans-serif; --display-weight: 300; --display-tracking: 0; --display-transform: none; --display-line: 1.12; --text-display: 58px; --text-h1: 42px; --text-h2: 32px; --text-h3: 21px; --text-md: 15.5px; --line-body: 1.7; --eyebrow-size: 12px; --eyebrow-tracking: 0.24em; --eyebrow-weight: 700; --eyebrow-color: var(--accent-text); --control-weight: 600; --control-tracking: 0.08em; --control-transform: uppercase; --control-size: 13px; --container: 1200px; --section-pad-y: clamp(64px, 9vw, 120px); --hero-pad-y: clamp(72px, 11vw, 150px); --radius-card: 8px; --radius-control: 6px; --radius-media: 6px; /* signal-red accent — a saturated stadium red for fills/buttons, a brighter variant for text and eyebrows sitting on the near-black page. */ --accent: oklch(0.55 0.19 22); --accent-soft: oklch(0.55 0.19 22 / 0.14); --accent-on-dark: oklch(0.66 0.2 24); --accent-on-dark-ink: #ffffff; --accent-on: #ffffff; /* the page is DARK, so accent-as-text must be the bright on-dark red. */ --accent-text: var(--accent-on-dark); /* DARK foundation — neutral cold near-black page, charcoal cards, white text. */ --surface-page: oklch(0.16 0 0); --surface-card: oklch(0.21 0 0); --surface-tint: oklch(0.19 0 0); --site-dark: oklch(0.13 0 0); --site-dark-ink: oklch(0.97 0 0); --text-heading: oklch(0.98 0 0); --text-body: oklch(0.85 0 0); --text-muted: oklch(0.68 0 0); --text-faint: oklch(0.52 0 0); --border: oklch(0.32 0 0); --border-soft: oklch(0.26 0 0); --border-strong: oklch(0.46 0 0); --nav-pop-bg: var(--surface-card); --nav-pop-muted: var(--text-faint); --shadow-card: 0 1px 2px oklch(0 0 0 / 0.3), 0 12px 32px oklch(0 0 0 / 0.35); --shadow-pop: 0 2px 8px oklch(0 0 0 / 0.4), 0 24px 60px oklch(0 0 0 / 0.5); } /* arena nav — uppercase, letter-spaced links, the athletic wordmark register. */ [data-theme="arena"] .site-nav a, [data-theme="arena"] .block-nav__links a:not(.block-nav__cta), [data-theme="arena"] .block-nav__group-btn { color: var(--text-body); text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--text-xs); } [data-theme="arena"] .eyebrow { color: var(--accent-text); text-transform: uppercase; } /* NOIR preset — the minimal black-and-white luxury look (KW Elevate register): a LIGHT near-white page with true-black section bands (like luxury/estate, NOT dark-native), thin uppercase Jost display on wide tracking, and — the defining trait — a MONOCHROME palette: no accent hue at all. The "accent" is near-black ink on the light page (flips to near-white on dark bands), so links/eyebrows/ rules read as black, never a colour. Sharp 0-radius edges, flat cards, airy spacing. Per-site brand colours still layer on via accentVars if a community sets them; left unset (the intended look) the site stays pure monochrome. Tokens only — block markup untouched. Card titles are

, so the uppercase display transform hits section + hero headings without shouting on cards. */ [data-theme="noir"] { --font-display: 'Jost', 'Helvetica Neue', 'Segoe UI', sans-serif; --font-body: 'Jost', 'Helvetica Neue', 'Segoe UI', sans-serif; --display-weight: 300; --display-tracking: 0.12em; --display-transform: uppercase; --display-line: 1.18; --text-display: 60px; --text-h1: 40px; --text-h2: 29px; --text-h3: 20px; --text-md: 16px; --line-body: 1.75; --eyebrow-size: 12px; --eyebrow-tracking: 0.3em; --eyebrow-weight: 400; --eyebrow-color: var(--text-muted); --control-font: var(--font-body); --control-weight: 500; --control-size: 12px; --control-tracking: 0.22em; --control-transform: uppercase; /* MONOCHROME — near-black ink as the "accent" (no hue); on a dark band it flips to near-white via --accent-on-dark. --accent-soft is a faint ink wash. */ --accent: oklch(0.26 0.004 80); --accent-soft: oklch(0.26 0.004 80 / 0.07); --accent-on-dark: oklch(0.97 0.004 90); --accent-on-dark-ink: oklch(0.17 0.004 80); --accent-on: #ffffff; --accent-text: var(--accent); /* light near-white paper + a barely-grey tint; true-black dark bands so the black featured/CTA sections read as ink, not charcoal. */ --surface-page: oklch(0.992 0.001 90); --surface-tint: oklch(0.966 0.002 90); --site-dark: oklch(0.155 0.002 80); --site-dark-ink: oklch(0.98 0.003 90); /* sharp, flat, airy, wide — the editorial minimal geometry. */ --radius-card: 0px; --radius-control: 0px; --radius-media: 0px; --shadow-card: none; --container: 1280px; --section-pad-y: clamp(64px, 11vw, 136px); --grid-gap: var(--space-6); } /* noir nav + eyebrow — uppercase, widely letter-spaced (matches luxury/estate). */ [data-theme="noir"] .site-nav a, [data-theme="noir"] .block-nav__links a:not(.block-nav__cta), [data-theme="noir"] .block-nav__group-btn { text-transform: uppercase; letter-spacing: 0.18em; font-size: var(--text-xs); } [data-theme="noir"] .eyebrow { text-transform: uppercase; } /* ──────────────────────────────────────────────────────────────────────────── NOIR STRUCTURAL LAYER — layout, not paint. This is the "a theme can restructure the whole page" layer (design decision 2026-07-24): unlike the token block above (colour/type/spacing), these rules change WHERE things sit — full-bleed breakout, text-on-image overlays, gutterless tiles, seam-to-seam bands. Same mechanism Luxury uses to reshape listing cards, applied comprehensively so selecting Noir transforms every section at once. POLICY: theme wins page-wide (author per-section choices are overridden — the whole page adopts the full-bleed minimal language). Built SECTION BY SECTION against real references; the running ruleset lives in memory 'website-noir-structural-theme'. Each section's rules are grouped under a "──

──" header below. Shared conventions: • FULL-BLEED: neutralize a block's inner .container so it spans the viewport — '. .container { max-width: none; padding-inline: 0; }'. Applied only to image/tile/band blocks; text blocks (richText/article) stay contained for readable measure. • GUTTERLESS: tile grids drop --grid-gap + radius to 0 so images touch. • Every new rule must be reusable — if two sections need it, promote it to a shared selector list here rather than repeating it. ── end conventions ── */ /* ── Hero (section 1) — 85vh lead hero + transparent nav overlaying it ── Reference: kwelevate.com home. The nav floats over the hero photo (logo left, links right, all light), the hero fills ~85vh with the display title + search centred. Uses the theme-neutral lead-hero markers renderSections emits (cs-hero-lead / cs-nav-overlay) so INTERIOR pages (no leading hero) keep a normal solid nav — the overlay only happens where a hero opens the page. */ /* 85svh via the SAME --hero-tall-h var the built-in tall hero uses, so the editor canvas's px pin (:root{--hero-tall-h:600px} in SiteEditor) applies here too — a raw svh balloons the auto-sizing canvas iframe (editor-embed-vh-balloon). */ /* :not(.hero--fit) — a "Match image" hero sizes itself to its photo; forcing the 85svh lead-hero band on it would re-crop the very image it exists to show. */ [data-theme="noir"] .cs-hero-lead:not(.hero--fit) { display: grid; place-items: center; min-height: var(--hero-tall-h, 85svh); } /* nav floats transparently over the hero (absolute = out of flow, so the hero image bleeds to the very top under it). Scrolls away with the hero — a sticky-solid-on-scroll variant would need a small scroll script (flagged). */ [data-theme="noir"] .cs-nav-overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; border-bottom: none; /* The bar is transparent over the hero, BUT the collapsed (mobile) hamburger dropdown must be a SOLID DARK panel — it inherits the light --nav-pop-bg otherwise, giving light-links-on-white / a see-through menu over the hero. Point the dropdown fill + its group-header muted colour at the dark scheme so the opened menu matches the overlay's light-on-dark ink. */ --nav-pop-bg: var(--site-dark); --nav-pop-muted: var(--text-on-dark-muted); } /* light nav ink over the dark hero scrim. Covers BOTH nav variants: the chrome siteNav block (.block-nav__*) and the auto-header (.site-header__* / .site-nav). */ [data-theme="noir"] .cs-nav-overlay .block-nav__links a:not(.block-nav__cta), [data-theme="noir"] .cs-nav-overlay .block-nav__group-btn, [data-theme="noir"] .cs-nav-overlay .block-nav__brandtext, [data-theme="noir"] .cs-nav-overlay .block-nav__tagline, [data-theme="noir"] .cs-nav-overlay .site-header__home, [data-theme="noir"] .cs-nav-overlay .site-nav a { color: var(--text-on-dark); } [data-theme="noir"] .cs-nav-overlay .block-nav__tagline { border-left-color: color-mix(in srgb, var(--text-on-dark) 34%, transparent); } /* .nav-toggle is shared by both navs (ghost hamburger over the hero). */ [data-theme="noir"] .cs-nav-overlay .nav-toggle { color: var(--text-on-dark); background: transparent; border-color: color-mix(in srgb, var(--text-on-dark) 40%, transparent); } /* ── Feature grid → immersive image-overlay tiles (KW Elevate "4 tiles") ── Reference: kwelevate.com HOME SEARCH / FEATURED PROPERTIES / STAGING / CONTACT. The card-with-body-below becomes a full-photo tile: the image fills the tile, the label + copy sit BOTTOM-LEFT over a gradient scrim in white. CONTAINED (not full-bleed) with a small gap — matches KW's 4-tile band; the full-bleed gutterless treatment is reserved for the neighborhoods/gallery sections. Copy is KEPT (muted white) so authored descriptions aren't lost. */ [data-theme="noir"] .features__grid { gap: var(--space-2); margin-top: var(--space-8); } [data-theme="noir"] .feature-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; padding: var(--space-6) var(--space-5); border: none; background: none; overflow: hidden; } /* image becomes the full-tile background layer */ [data-theme="noir"] .feature-card__media { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; border: none; z-index: 0; background: var(--site-dark); } [data-theme="noir"] .feature-card__media img { transition: transform var(--speed-slow) var(--ease); } [data-theme="noir"] .feature-card:hover .feature-card__media img { transform: scale(1.045); } /* legibility scrim over the photo, under the text */ [data-theme="noir"] .feature-card::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, oklch(0 0 0 / 0.74), oklch(0 0 0 / 0.14) 48%, transparent 74%); } /* copy above the scrim, bottom-left, white */ [data-theme="noir"] .feature-card h3, [data-theme="noir"] .feature-card p, [data-theme="noir"] .feature-card__chips, [data-theme="noir"] .feature-card__icon, [data-theme="noir"] .feature-card__link { position: relative; z-index: 2; } [data-theme="noir"] .feature-card h3 { color: var(--text-on-dark); margin-bottom: var(--space-2); } [data-theme="noir"] .feature-card p { color: var(--text-on-dark-muted); } [data-theme="noir"] .feature-card__link { color: var(--text-on-dark); margin-top: var(--space-3); } [data-theme="noir"] .feature-card__icon { color: var(--text-on-dark); border-color: color-mix(in srgb, var(--text-on-dark) 40%, transparent); margin-bottom: var(--space-3); } /* HOVER affects the text too (KW Elevate): the copy lifts, an accent underline grows under the label, and the scrim deepens — not just the photo zoom. */ [data-theme="noir"] .feature-card h3, [data-theme="noir"] .feature-card p, [data-theme="noir"] .feature-card__link { transition: transform var(--speed-base) var(--ease); } [data-theme="noir"] .feature-card h3::after { content: ''; display: block; height: 1px; width: 0; margin-top: var(--space-3); background: var(--text-on-dark); transition: width var(--speed-slow) var(--ease); } [data-theme="noir"] .feature-card:hover h3, [data-theme="noir"] .feature-card:hover p, [data-theme="noir"] .feature-card:hover .feature-card__link { transform: translateY(-6px); } [data-theme="noir"] .feature-card:hover h3::after { width: 46px; } [data-theme="noir"] .feature-card:hover::after { background: linear-gradient(to top, oklch(0 0 0 / 0.82), oklch(0 0 0 / 0.2) 50%, transparent 78%); } /* ── Featured properties / listings (section 3) — CONTAINED, sharp, Zillow-safe ── Our best Zillow photo is 1536×1152 (uncropped_scaled_within_1536; the -p_f fallback is only 1024). So listings deliberately DO NOT go full-bleed like the hero/neighborhoods — a full-width blow-up on a wide monitor would upscale a Zillow pic and pixelate (KW Elevate's giant featured carousel does exactly that). The contained grid keeps each photo ≲ container/cols (~400px at 3-col, ≤ container at 1-col) — always ≤ the 1536 source, always crisp. The 1536 cap on the grid is a backstop if the content width is ever widened. Cards read sharp, flat, monochrome; hover is a keyline highlight, not a lift. */ /* The cap must NOT catch the carousel track (.listings__grid.lcar__track): the track is the scroll container and its slide-centering padding is computed from 100vw, so capping the box hides the neighbor-card peeks (next card sat almost entirely past the 1536px edge — "no cards on the sides"). Peeks need the full-vw box; sharpness is already guaranteed per-slide (--lcar-slide caps at 1100px + the img 1536 cap), not by the container. */ [data-theme="noir"] .listings__grid:not(.lcar__track) { max-width: 1536px; } [data-theme="noir"] .listing-card { box-shadow: none; border-color: var(--border); } [data-theme="noir"] .listing-card:hover { transform: none; box-shadow: none; border-color: var(--text-heading); } [data-theme="noir"] .listing-card__badge { border-radius: 0; text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; font-weight: 500; } [data-theme="noir"] .listing-card__photo img { max-width: 1536px; } /* Featured carousel (listingsCarousel): near-solid black info panel, sharp arrows — the big-slide showcase. Slides still cap at 1536 so Zillow pics stay sharp. */ [data-theme="noir"] .lcar .listing-card__body { background: color-mix(in srgb, var(--ink-900) 90%, transparent); padding: var(--space-5) var(--space-6); } [data-theme="noir"] .lcar .listing-card:hover { box-shadow: none; } /* ============================================================ FOUNDATION ELEMENTS + block CSS rebased onto the tokens. (Block markup is unchanged; full per-block restyle is a follow-up.) ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); font-size: var(--text-md); color: var(--text-body); background: var(--surface-page); line-height: var(--line-body); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); text-transform: var(--display-transform); line-height: var(--display-line); color: var(--text-heading); } img { max-width: 100%; display: block; } a { color: var(--accent-text); text-decoration: none; } .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); } /* skip-to-content — off-screen until focused (keyboard users) */ .cs-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--surface-card); color: var(--text-heading); padding: var(--space-3) var(--space-5); border-radius: var(--radius-control); box-shadow: var(--shadow-pop); } .cs-skip:focus { left: var(--space-3); top: var(--space-3); } /* header */ .site-header { position: sticky; top: 0; background: var(--surface-card); border-bottom: 1px solid var(--border); z-index: 10; } .site-header__inner { max-width: var(--container); margin: 0 auto; padding: var(--space-3) var(--space-5); display: flex; align-items: center; gap: var(--space-5); } .site-header__home { display: flex; align-items: center; gap: var(--space-3); min-width: 0; color: var(--text-heading); font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-h3); letter-spacing: var(--display-tracking); } .site-header__logo { height: 36px; width: auto; max-width: 60vw; object-fit: contain; } .site-nav { margin-left: auto; display: flex; gap: var(--space-5); } .site-nav a { color: var(--text-muted); font-weight: 500; font-size: var(--text-sm); transition: color var(--speed-fast) var(--ease); } .site-nav a:hover, .site-nav a.active { color: var(--accent-text); } /* buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 24px; font-family: var(--control-font); font-size: var(--control-size); font-weight: var(--control-weight); letter-spacing: var(--control-tracking); text-transform: var(--control-transform); line-height: 1.2; border-radius: var(--radius-button, var(--radius-control)); border: 1px solid transparent; cursor: pointer; transition: opacity var(--speed-fast) var(--ease), background var(--speed-fast) var(--ease); } .btn--brand { background: var(--btn-bg, var(--ink-900)); color: var(--btn-on, var(--text-on-dark)); } .btn--brand:hover { opacity: 0.88; } /* "inverse" button = the surface's ink as the fill, the surface colour as the text (a light button on a dark band, a dark button on a light band). --on/--on-inverse are set by the section surface; fallbacks keep it a light button off-surface. */ .btn--inverse { background: var(--on, var(--text-on-dark)); color: var(--on-inverse, var(--ink-900)); } .btn--inverse:hover { opacity: 0.88; } /* Explicit button tokens — a discrete colour (--bc fill / --bf text) × a style (solid fill or outline). Literal colours, no tints; the author picks one that suits the section. */ .btn--c-brand { --bc: var(--accent); --bf: var(--accent-ink, var(--text-on-dark)); } .btn--c-black { --bc: var(--ink-900); --bf: var(--text-on-dark); } .btn--c-white { --bc: #ffffff; --bf: var(--ink-900); } .btn--c-dark { --bc: var(--site-dark); --bf: var(--site-dark-ink, var(--text-on-dark)); } .btn--solid { background: var(--bc); color: var(--bf); border-color: var(--bc); } .btn--outline { background: transparent; color: var(--bc); border-color: var(--bc); } .btn--solid:hover, .btn--outline:hover { opacity: 0.88; } /* hero — background comes from the section surface (defaults to Dark); a media layer (image/slideshow/video) + scrim sits on top when set. Text uses the scoped tokens, so the hero flips correctly on any surface. */ .hero { background: transparent; color: var(--text-heading); padding: var(--hero-pad-y) 0; text-align: center; position: relative; overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; } img.hero__bg, video.hero__bg { width: 100%; height: 100%; object-fit: cover; } /* Phone-image