/* ========================================================================== Home Dynamics — chrome.css (header · hero · search/mega-menu · homepage sections) Consolidated VERBATIM, in cascade order, from the mockup ports: design/hero-bplus.css + hero-transparent.css + megasearch.css + home-v2.css No rules changed — only renamed/merged. Loads after base.css, before components.css. ========================================================================== */ /* ========================================================================== Home Dynamics — Hero "B+" : button/panel search + persistent header search H1 anchored bottom-left, no body copy, trust element bottom-right. Layers on tokens.css + homepage-v2.css. ========================================================================== */ /* ---- Persistent header search (Lennar-style, opens the panel) ---- */ .headersearch { display: inline-flex; align-items: center; gap: var(--hdc-space-3); min-width: 340px; /* The left inset is the FIELD's, and it keeps its original 24px. Trimming it to make room for the pill was the wrong economy: the pill ended up against the rounded edge, which reads as cramped no matter how well padded the pill itself is. The pill gets its room from its own padding instead. */ padding: var(--hdc-space-2) var(--hdc-space-2) var(--hdc-space-2) var(--hdc-space-5); background: var(--hdc-surface); border: 1px solid var(--hdc-line-strong); border-radius: var(--hdc-radius-pill); font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-300); letter-spacing: 0.01em; cursor: pointer; transition: border-color var(--hdc-dur) var(--hdc-ease); } .headersearch:hover { border-color: var(--hdc-color-primary); } /* ---- the resolved location, in the field ---- Find Your Home puts the place it is showing here rather than in a filter dropdown, so there is one home for the idea and nothing can contradict anything. Empty on every other page, and :empty carries no margin so the input keeps its full width when there is nothing to show. */ /* "Near me:" ahead of the ZIP the browser put you in. Quieter than the ZIP itself, which is the fact worth checking. */ .msr-chip__geo { color: var(--hdc-color-primary); font-weight: var(--hdc-fw-medium); } /* Placeholder bars while the search index loads. Sized like the rows they stand in for, so nothing jumps when the real content lands. */ .msr-skel { display: flex; flex-direction: column; gap: var(--hdc-space-4); padding: var(--hdc-space-5); } .msr-skel i { display: block; height: 14px; border-radius: var(--hdc-radius-sm); background: linear-gradient(90deg, var(--hdc-surface-warm) 25%, var(--hdc-line) 50%, var(--hdc-surface-warm) 75%); background-size: 200% 100%; animation: msr-shimmer 1.2s linear infinite; } @keyframes msr-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .msr-skel i { animation: none; background: var(--hdc-surface-warm); } } /* Ragged widths, so three identical bars read as lines of text rather than as a loading graphic. They were inline style="width:38%" in search.js — markup carrying design values, and the one place a stylesheet could not reach them. */ .msr-skel__a { width: 38%; } .msr-skel__b { width: 62%; } .msr-skel__c { width: 52%; } /* The dead-end note reads as two things: what happened, then what we can offer. Run together they are one long apology. */ .msr-geo__lead, .msr-geo__sub { display: block; } .msr-geo__sub { font-weight: var(--hdc-fw-regular); margin-top: 2px; } .headersearch__pills { display: inline-flex; align-items: center; gap: var(--hdc-space-2); flex: 0 0 auto; } .headersearch__pills:empty { display: none; } .headersearch__pill { display: inline-flex; align-items: center; gap: var(--hdc-space-2); padding: 6px var(--hdc-space-3) 6px var(--hdc-space-4); background: var(--hdc-color-primary-wash); border: 1px solid var(--hdc-color-primary-line); border-radius: var(--hdc-radius-pill); font-size: var(--hdc-fs-300); font-weight: var(--hdc-fw-medium); color: var(--hdc-color-heading); white-space: nowrap; } /* ⚠️ GeneratePress paints content buttons on hover and gives them padding at (0,1,1); --_bg/--_fg is how theme.css routes around that. The ✕ is CENTRED BY FLEX, not by line-height. As a block with line-height 0 the glyph was laid out in normal inline flow and sat up and to the left of its own circle — which is not GP's doing, just the wrong tool: a zero line-height collapses the line box, it does not centre anything in it. */ .headersearch__pill button { --_bg: transparent; --_fg: var(--hdc-color-muted); box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--_bg); color: var(--_fg); cursor: pointer; flex: 0 0 auto; } .headersearch__pill button::before { content: "\00d7"; font-size: 18px; line-height: 1; display: block; } .headersearch__pill button:hover { --_bg: var(--hdc-color-primary); --_fg: var(--hdc-color-on-dark); } .headersearch__pill button:focus-visible { outline: 2px solid var(--hdc-color-primary); outline-offset: 1px; } /* With a pill present the placeholder is redundant and the field is tight. */ .headersearch__pills:not(:empty) + .headersearch__input::placeholder { color: transparent; } .headersearch__text { flex: 1 1 auto; display: flex; align-items: center; text-align: left; white-space: nowrap; padding-block: var(--hdc-space-2); color: var(--hdc-color-muted); } /* circular magnifier button — inset from the bar edges, no border */ .headersearch__go { flex: 0 0 auto; width: 42px; height: 42px; border: 0; border-radius: var(--hdc-radius-pill); display: inline-flex; align-items: center; justify-content: center; background: var(--hdc-color-primary); color: var(--hdc-color-on-dark); transition: background var(--hdc-dur) var(--hdc-ease); } .headersearch:hover .headersearch__go { background: var(--hdc-color-primary-deep); } /* ---- Header fit: keep everything on one line with search added ---- */ .site-header .container { gap: var(--hdc-space-5); } .site-header .mainnav { gap: var(--hdc-space-5); } .mainnav a { white-space: nowrap; } .header-cta { gap: var(--hdc-space-4); } .btn { white-space: nowrap; } /* ---- Hero: bottom-anchored, split left/right, left-aligned, full-height ---- */ .hero--bplus { align-items: flex-end; min-height: 100vh; } .hero--bplus .container { text-align: left; } /* The hero scrim is declared ONCE, further down ("Hero overlay"). A second ::after rule used to sit here and was dead — the later one replaces `background` wholesale, so editing this one changed nothing on screen. */ /* Bottom-aligned, but lifted off the edge — sitting flush on the boundary read as the copy having fallen out of the hero rather than being placed in it. */ .hero--bplus .container { padding-bottom: var(--hdc-space-9); } .hero__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--hdc-space-7); width: 100%; } .hero__lead { max-width: 44rem; } .hero__lead h1 { color: var(--hdc-color-on-dark); font-size: var(--hdc-fs-900); line-height: var(--hdc-lh-tight); letter-spacing: -0.005em; } /* ---- Trust element (typographic, no icon, no line) ---- */ .hero-award { display: flex; flex-direction: column; gap: 3px; text-align: left; color: var(--hdc-color-on-dark); } .hero-award__eyebrow { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-100); font-weight: var(--hdc-fw-semi); letter-spacing: var(--hdc-tracking-wide); text-transform: uppercase; color: var(--hdc-color-on-dark-muted); } .hero-award__title { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-400); font-weight: var(--hdc-fw-semi); color: var(--hdc-color-on-dark); } .hero-award__sub { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-300); letter-spacing: var(--hdc-tracking-ui); text-transform: uppercase; color: var(--hdc-color-on-dark-muted); } /* ---- Trust element, bottom-right (legacy badge) ---- */ .hero__trust { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--hdc-space-4); padding: var(--hdc-space-4) var(--hdc-space-5); border-radius: var(--hdc-radius-md); background: var(--hdc-surface-ink); color: var(--hdc-color-on-dark); box-shadow: var(--hdc-shadow-2); } .hero__trust-mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--hdc-radius-pill); background: var(--hdc-color-primary); color: var(--hdc-color-on-dark); font-size: var(--hdc-fs-500); } .hero__trust-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; } .hero__trust-text strong { font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-semi); font-size: var(--hdc-fs-300); letter-spacing: 0.01em; } .hero__trust-text span { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-100); letter-spacing: var(--hdc-tracking-ui); text-transform: uppercase; color: var(--hdc-color-on-dark-muted); } @media (max-width: 900px) { .hero__bottom { flex-direction: column; align-items: flex-start; gap: var(--hdc-space-6); } } @media (max-width: 720px) { .headersearch { min-width: 0; } .headersearch__text { display: none; } } /* ========================================================================== Home Dynamics — Transparent header over hero (turns solid on scroll) Layers on tokens.css + homepage-v2.css + hero-bplus.css. Load LAST. ========================================================================== */ /* Fixed overlay wrapper holding utility bar + header */ /* Padding, not offset: the bar's BACKGROUND still runs under the status bar and the notch — a strip of page showing above a floating header is worse than no inset at all — while its contents start below them. Applies to both header modes, since .topnav.is-static (sticky) is the same element. */ .topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding-top: var(--hdc-safe-t); padding-left: var(--hdc-safe-l); padding-right: var(--hdc-safe-r); transition: background var(--hdc-dur) var(--hdc-ease), box-shadow var(--hdc-dur) var(--hdc-ease); } .topnav .site-header { position: static; background: transparent; border-bottom: 0; backdrop-filter: none; } .topnav .utilbar { background: transparent; border-bottom: 0; } /* Smooth transition between transparent and solid */ .topnav .brand img { transition: filter var(--hdc-dur) var(--hdc-ease); } .topnav .mainnav a, .topnav .header-phone, .topnav .utilbar a { transition: color var(--hdc-dur) var(--hdc-ease); } /* --- Transparent state (over the hero photo): light treatment; reverts on hover --- */ /* Full-strength white, same as the headings and .mainnav below — the muted tone lost the links against bright sky. Transparent state only; the solid header keeps its dark --hdc-color-muted from homepage-v2.css. */ .topnav:not(.is-solid):not(.menu-open) .utilbar a { color: var(--hdc-color-on-dark); } .topnav:not(.is-solid):not(.menu-open) .brand img { filter: brightness(0) invert(1); } .topnav:not(.is-solid):not(.menu-open) .mainnav a { color: var(--hdc-color-on-dark); } .topnav:not(.is-solid):not(.menu-open) .header-phone { color: var(--hdc-color-on-dark); } /* Header search stays a solid white bar in both states (user request) */ /* --- Solid state: after scroll OR when the menu is open (no hover trigger) --- */ /* .menu-open = solid look forced while the hamburger menu is open, WITHOUT collapsing the utility bar (that collapse is on .is-solid only, below) so the utility bar stays put when you open the menu. */ .topnav.is-solid, .topnav.menu-open { background: var(--hdc-surface); box-shadow: var(--hdc-shadow-1); } /* Bigger logo */ .site-header .brand img { height: 54px; } /* Smaller hero headline + CTA button below it */ .hero--bplus .hero__lead h1 { font-size: var(--hdc-fs-850); } .hero__cta { margin-top: var(--hdc-space-5); } /* ---- Hero overlay — the ONE scrim rule. Four layers, each with a job ---- Every stop is a color-mix of --hdc-surface-ink, so the scrim stays on the site's own ink rather than an arbitrary black, and one token moves all of it. 1 · top — carries the white logo, utility row and search over bright sky 2 · bottom — the ground the headline and CTA sit on; the heaviest layer 3 · left — biases weight to the text side without dimming the whole photo 4 · base — a flat wash over everything, so the mid-band between the top and bottom gradients is not left bare. This is the layer that makes it read as an overlay rather than two separate fades. ⚠️ THE LAYERS COMPOSITE — read the stack, not the individual numbers. A first pass at this used 90/46/14 and the bottom-left corner came out essentially opaque: 90% over 46% over 14% leaves almost none of the photograph. The values below were tuned in the browser against the real image, per BUILD-STATUS's rule that color is judged on the page and never from a swatch. */ /* Background film. Sits over the poster and is revealed only once it is genuinely playing, so a stalled load shows the photograph rather than a black rectangle. Under the ::after scrim, which is why the rule sits above it. */ .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity var(--hdc-dur-slow) var(--hdc-ease); } .hero__video.is-on { opacity: 1; } .hero--bplus .hero__media::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--hdc-surface-ink) 58%, transparent) 0%, transparent 24%), linear-gradient(to top, color-mix(in srgb, var(--hdc-surface-ink) 86%, transparent) 0%, color-mix(in srgb, var(--hdc-surface-ink) 42%, transparent) 40%, color-mix(in srgb, var(--hdc-surface-ink) 10%, transparent) 76%), linear-gradient(to right, color-mix(in srgb, var(--hdc-surface-ink) 38%, transparent), transparent 62%), linear-gradient(color-mix(in srgb, var(--hdc-surface-ink) 8%, transparent), color-mix(in srgb, var(--hdc-surface-ink) 8%, transparent)); } /* The photo-hero scrim, once. Three layers, each doing a job: a TOP wash so the transparent header's utility links stay legible over bright sky, a BOTTOM lift so the title holds against whatever is behind it, and a LEFT wash for the copy column. ⚠️ .hero--bplus and .community-hero still carry their own hand-tuned copies of this (58/86/42/38 and 55/82/34/34 respectively — they already disagree). Point them at this class next time either is touched; a fourth hand-tuned copy is how the numbers drifted in the first place. */ .hero-scrim::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--hdc-surface-ink) 55%, transparent) 0%, transparent 22%), linear-gradient(to top, color-mix(in srgb, var(--hdc-surface-ink) 82%, transparent) 0%, color-mix(in srgb, var(--hdc-surface-ink) 34%, transparent) 38%, color-mix(in srgb, var(--hdc-surface-ink) 6%, transparent) 70%), linear-gradient(to right, color-mix(in srgb, var(--hdc-surface-ink) 34%, transparent), transparent 60%); } /* Demo-only: a section under the hero so you can scroll and see the header solidify */ .demo-next { background: var(--hdc-surface-warm); padding-block: var(--hdc-space-9); } .demo-next .container { max-width: 60rem; } .demo-next .eyebrow { color: var(--hdc-color-primary); } .demo-next h2 { font-family: var(--hdc-font-display); font-size: var(--hdc-fs-800); color: var(--hdc-color-heading); margin: 0 0 var(--hdc-space-4); } .demo-next p { font-size: var(--hdc-fs-500); color: var(--hdc-color-text); margin: 0; max-width: 46ch; } /* ========================================================================== Home Dynamics — Mega search: corner-reveal overlay (shared) Grows out of the top-right (where the search trigger sits). Used by both home.html (header search bar) and home-v2.html (pill-nav "Find my home"). Reuses .status / .searchpanel-backdrop from the shared stack. ========================================================================== */ .megasearch { position: fixed; top: calc(var(--hdc-space-4) + var(--hdc-safe-t)); right: max(var(--hdc-gutter), var(--hdc-safe-r)); left: auto; z-index: 101; width: min(1080px, 94vw); max-height: calc(100vh - var(--hdc-space-7)); overflow: auto; background: var(--hdc-surface); border-radius: var(--hdc-radius-md); box-shadow: var(--hdc-shadow-3); transform-origin: top right; transform: scale(0.9); opacity: 0; visibility: hidden; transition: transform var(--hdc-dur) var(--hdc-ease), opacity var(--hdc-dur) var(--hdc-ease), visibility var(--hdc-dur) var(--hdc-ease); } .megasearch.is-open { transform: scale(1); opacity: 1; visibility: visible; } .megasearch__bar { display: flex; align-items: center; gap: var(--hdc-space-4); padding: var(--hdc-space-5) var(--hdc-space-6); border-bottom: 1px solid var(--hdc-line); position: sticky; top: 0; background: var(--hdc-surface-warm); } .megasearch__bar > svg { color: var(--hdc-color-muted); flex: 0 0 auto; } .megasearch__bar input { flex: 1 1 auto; border: 0; outline: 0; background: transparent; font-family: var(--hdc-font-body); font-size: var(--hdc-fs-600); color: var(--hdc-color-heading); } .megasearch__bar input::placeholder { color: var(--hdc-color-muted); } .megasearch__close { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer; border-radius: var(--hdc-radius-pill); background: var(--hdc-surface); color: var(--hdc-color-heading); font-size: var(--hdc-fs-500); transition: background var(--hdc-dur) var(--hdc-ease); } .megasearch__close:hover { background: var(--hdc-line); } .megasearch__body { display: grid; grid-template-columns: 260px 1fr; gap: var(--hdc-space-8); padding: var(--hdc-space-7) var(--hdc-space-6); } .megasearch__actions { display: flex; flex-direction: column; gap: var(--hdc-space-4); } .megasearch__action { display: inline-flex; align-items: center; justify-content: center; gap: var(--hdc-space-3); padding: var(--hdc-space-5); background: var(--hdc-surface); border: 1px solid var(--hdc-line); border-radius: var(--hdc-radius-md); font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-semi); font-size: var(--hdc-fs-400); color: var(--hdc-color-heading); cursor: pointer; transition: border-color var(--hdc-dur) var(--hdc-ease), color var(--hdc-dur) var(--hdc-ease); } .megasearch__action:hover { border-color: var(--hdc-color-primary); color: var(--hdc-color-primary); } .megasearch__panelright { display: flex; flex-direction: column; gap: var(--hdc-space-6); } .ms-label { display: flex; align-items: center; gap: var(--hdc-space-3); margin: 0 0 var(--hdc-space-4); font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-100); font-weight: var(--hdc-fw-semi); letter-spacing: var(--hdc-tracking-wide); text-transform: uppercase; color: var(--hdc-color-muted); } .ms-label::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--hdc-line); } .ms-comm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hdc-space-4); } .ms-comm-card { display: flex; align-items: center; gap: var(--hdc-space-4); padding: var(--hdc-space-3); border: 1px solid var(--hdc-line); border-radius: var(--hdc-radius-md); background: var(--hdc-surface); transition: border-color var(--hdc-dur) var(--hdc-ease); } .ms-comm-card:hover { border-color: var(--hdc-color-primary); } .ms-comm-card img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--hdc-radius-md); flex: 0 0 auto; } .ms-comm-card__name { font-family: var(--hdc-font-display); font-size: var(--hdc-fs-600); color: var(--hdc-color-heading); line-height: 1.1; } .ms-comm-card__meta { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-200); color: var(--hdc-color-muted); margin: 4px 0 var(--hdc-space-2); } .ms-browse { display: flex; flex-wrap: wrap; gap: var(--hdc-space-2) var(--hdc-space-6); } .ms-browse a { font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-medium); font-size: var(--hdc-fs-300); color: var(--hdc-color-heading); transition: color var(--hdc-dur) var(--hdc-ease); } .ms-browse a:hover { color: var(--hdc-color-primary); } /* ---- AI search: mode switch, answer cards, why-it-fits ---- */ .spark { color: var(--hdc-color-primary); flex: 0 0 auto; vertical-align: -2px; } .msr-mode { display: inline-flex; gap: 2px; padding: 3px; margin: 0 0 var(--hdc-space-5); background: var(--hdc-surface-tint); border-radius: var(--hdc-radius-pill); } .msr-mode__btn { display: inline-flex; align-items: center; gap: var(--hdc-space-2); border: 0; cursor: pointer; background: transparent; padding: var(--hdc-space-2) var(--hdc-space-5); border-radius: var(--hdc-radius-pill); font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-medium); font-size: var(--hdc-fs-300); color: var(--hdc-color-muted); transition: background var(--hdc-dur) var(--hdc-ease), color var(--hdc-dur) var(--hdc-ease); } .msr-mode__btn .spark { color: var(--hdc-color-muted); } .msr-mode__btn.is-on { background: var(--hdc-surface); color: var(--hdc-color-heading); box-shadow: var(--hdc-shadow-1); } .msr-mode__btn.is-on .spark { color: var(--hdc-color-primary); } /* AI restatement line */ .msr-ai__read { display: flex; align-items: center; gap: var(--hdc-space-2); margin: 0 0 var(--hdc-space-5); font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-300); color: var(--hdc-color-muted); } .msr-ai__read .spark { color: var(--hdc-color-primary); } /* AI answer card */ .msr-ai { background: var(--hdc-surface-warm); border: 1px solid var(--hdc-line); border-left: 3px solid var(--hdc-color-primary); border-radius: 0 var(--hdc-radius-md) var(--hdc-radius-md) 0; padding: var(--hdc-space-5) var(--hdc-space-6); } .msr-ai__head { display: flex; align-items: center; gap: var(--hdc-space-2); font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-100); font-weight: var(--hdc-fw-semi); letter-spacing: var(--hdc-tracking-wide); text-transform: uppercase; color: var(--hdc-color-primary); margin: 0 0 var(--hdc-space-3); } .msr-ai__a { margin: 0; font-size: var(--hdc-fs-400); line-height: var(--hdc-lh-normal); color: var(--hdc-color-heading); } .msr-ai__cta { display: inline-flex; align-items: center; gap: var(--hdc-space-2); margin-top: var(--hdc-space-4); font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-medium); font-size: var(--hdc-fs-300); color: var(--hdc-color-primary); text-decoration: none; } .msr-ai__cta:hover { text-decoration: underline; text-underline-offset: 3px; } .msr-ai__foot { margin: var(--hdc-space-4) 0 0; font-size: var(--hdc-fs-200); color: var(--hdc-color-muted); } .msr-ai__foot a { color: var(--hdc-color-primary); text-decoration: none; } .msr-ai__foot a:hover { text-decoration: underline; } /* why-it-fits under a home card */ .msr-why { display: flex; align-items: center; gap: 6px; margin-top: var(--hdc-space-2); font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-200); color: var(--hdc-color-primary); } .msr-why .spark { width: 13px; height: 13px; } /* AI suggestion pills */ .msr-ai__sugtitle { display: flex; align-items: center; gap: var(--hdc-space-2); margin: 0 0 var(--hdc-space-4); font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-200); font-weight: var(--hdc-fw-semi); letter-spacing: var(--hdc-tracking-wide); text-transform: uppercase; color: var(--hdc-color-muted); } .msr-sugs { display: flex; flex-wrap: wrap; gap: var(--hdc-space-3); } .msr-sug { font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-medium); font-size: var(--hdc-fs-300); padding: var(--hdc-space-3) var(--hdc-space-5); border-radius: var(--hdc-radius-pill); background: var(--hdc-surface); color: var(--hdc-color-heading); border: 1px solid var(--hdc-line); cursor: pointer; text-align: left; transition: border-color var(--hdc-dur) var(--hdc-ease), color var(--hdc-dur) var(--hdc-ease); } .msr-sug:hover { border-color: var(--hdc-color-primary); color: var(--hdc-color-primary); } .msr-book { display: inline-flex; align-items: center; gap: var(--hdc-space-2); margin-top: var(--hdc-space-4); font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-medium); font-size: var(--hdc-fs-300); color: var(--hdc-color-primary); text-decoration: none; } .msr-book:hover { text-decoration: underline; text-underline-offset: 3px; } /* ---- A1: "Ask AI" button (opens the AI lane) — shares the first row with the pills/chips ---- */ .msr-headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--hdc-space-4); margin: 0 0 var(--hdc-space-5); } .msr-headrow__l { flex: 1 1 auto; min-width: 0; } .msr-headrow__l > .msr-refine, .msr-headrow__l > .msr-chips, .msr-headrow__l > .msr-ai__sugtitle { margin: 0; } .msr-headrow__l:empty { display: none; } .msr-askai-corner { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--hdc-color-primary); background: var(--hdc-color-primary); color: var(--hdc-color-on-dark); border-radius: var(--hdc-radius-pill); padding: var(--hdc-space-2) var(--hdc-space-4); font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-semi); font-size: var(--hdc-fs-300); cursor: pointer; transition: background var(--hdc-dur) var(--hdc-ease), color var(--hdc-dur) var(--hdc-ease), border-color var(--hdc-dur) var(--hdc-ease); } .msr-askai-corner:hover { background: var(--hdc-color-primary-deep); border-color: var(--hdc-color-primary-deep); } .msr-askai-corner.on { background: var(--hdc-color-primary-deep); color: var(--hdc-color-on-dark); border-color: var(--hdc-color-primary-deep); } .msr-askai-corner.on .spark { color: var(--hdc-color-on-dark); } /* redirect hint shown when a filter query is typed in the AI lane */ .msr-airow-hint { display: flex; align-items: center; gap: var(--hdc-space-2); margin: 0 0 var(--hdc-space-5); padding: var(--hdc-space-3) var(--hdc-space-4); border: 1px dashed var(--hdc-line-strong); border-radius: var(--hdc-radius-sm); color: var(--hdc-color-muted); font-size: var(--hdc-fs-300); } @media (max-width: 760px) { .megasearch { right: 0; left: 0; width: auto; } .megasearch__body { grid-template-columns: 1fr; gap: var(--hdc-space-6); } .ms-comm-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { /* stack the Ask AI button onto its own line so the pills get full width */ .msr-headrow { flex-direction: column-reverse; align-items: stretch; gap: var(--hdc-space-3); } .msr-askai-corner { align-self: flex-end; } } /* ========================================================================== Home Dynamics — Header variant v3: hamburger + centered search, no nav Layers on the shared home.html stack. Load LAST. ========================================================================== */ /* Wider content on this page */ /* ONE measure for the whole site. Was a raw 1560px literal overriding the token below it; everything now points at --hdc-container so the grid actually aligns and the width is changeable in one place. */ .container { max-width: var(--hdc-container); } /* Centered header: logo left · search center · hamburger right */ .site-header--center .container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: relative; } .site-header--center .brand { justify-self: start; } /* wrap is static so the dropdown anchors to the full-height header .container (its bottom = the header's bottom), NOT the shorter centered search field — otherwise the panel tucks behind the solid header. */ .site-header--center .headersearch-wrap { justify-self: center; width: min(620px, 46vw); position: static; } .site-header--center .headersearch { width: 100%; } .site-header--center .header-actions { justify-self: end; display: inline-flex; align-items: center; gap: var(--hdc-space-5); } /* Mobile header: drop the utility bar; stack the search full-width below logo + hamburger */ @media (max-width: 720px) { .topnav .utilbar { display: none; } .site-header--center .container { grid-template-columns: 1fr auto; grid-template-areas: "brand actions" "search search"; row-gap: var(--hdc-space-3); min-height: 0; padding-block: var(--hdc-space-4); } .site-header--center .brand { grid-area: brand; } .site-header .brand img { height: 38px; } /* smaller logo on mobile */ .site-header--center .header-actions { grid-area: actions; } .site-header--center .headersearch-wrap { grid-area: search; justify-self: stretch; width: 100%; } /* shorter search field so the sticky header takes less height */ .headersearch { padding-block: var(--hdc-space-1); min-width: 0; } .headersearch__input { padding-block: 6px; } .headersearch__go { height: 38px; min-width: 40px; } } /* Hamburger button */ .hamburger { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 46px; height: 46px; padding: 0; background: transparent; border: 0; cursor: pointer; color: var(--hdc-color-heading); } .hamburger span { display: block; width: 26px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--hdc-dur) var(--hdc-ease); } .topnav:not(.is-solid):not(:hover):not(.menu-open) .hamburger { color: var(--hdc-color-on-dark); } /* Header search is a real input; suggestions panel drops below it */ .headersearch__input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-300); letter-spacing: 0.01em; color: var(--hdc-color-heading); padding-block: var(--hdc-space-2); } .headersearch__input::placeholder { color: var(--hdc-color-muted); } /* Search button: circular icon that expands to a "Search" pill on focus (icon slides left, label reveals) */ .headersearch__go { overflow: hidden; width: auto; min-width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; transition: gap var(--hdc-dur) var(--hdc-ease), padding var(--hdc-dur) var(--hdc-ease), background var(--hdc-dur) var(--hdc-ease); } .headersearch__sign { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .headersearch__golabel { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; color: var(--hdc-color-on-dark); font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-medium); font-size: var(--hdc-fs-300); transition: max-width var(--hdc-dur) var(--hdc-ease), opacity var(--hdc-dur) var(--hdc-ease); } .headersearch:focus-within .headersearch__go { gap: var(--hdc-space-3); padding: 0 var(--hdc-space-5); } .headersearch:focus-within .headersearch__golabel { max-width: 160px; opacity: 1; } .topnav { position: fixed; z-index: 110; } /* header sticks; the utility row (below) collapses away on scroll. Above the dim. */ /* Utility row is NOT sticky — it collapses as soon as you scroll, leaving just the header pinned */ .topnav .utilbar { overflow: hidden; transition: max-height var(--hdc-dur) var(--hdc-ease), opacity var(--hdc-dur) var(--hdc-ease); max-height: 60px; } .topnav.is-solid .utilbar { max-height: 0; opacity: 0; } /* The utility row animates on EVERY header, in-flow one included. It was briefly pinned to `transition: none` here, because the sticky sub-nav beneath pins to a header height and a 400ms animation meant that height was wrong for 400ms. That was treating the symptom: the sub-nav now tracks the header's MEASURED height (--hdc-header-now, published by a ResizeObserver in assets/chrome.js), which updates on every frame of this animation — so the bar can animate and the sub-nav follows it down. Killing the transition just made the utility row vanish. */ .searchpanel-backdrop { z-index: 90; } /* dropdown attached directly under the field (one connected unit) */ .megasearch { position: absolute; top: calc(100% + var(--hdc-space-3)); right: auto; left: 50%; width: min(760px, 92vw); transform: translateX(-50%) scale(0.98); transform-origin: top center; } .megasearch.is-open { transform: translateX(-50%) scale(1); } .ms-comm-grid { grid-template-columns: 1fr; } /* ===== Predictive dropdown (Design 1 — Guided) ===== */ .msr { padding: var(--hdc-space-6); } .msr-refine { display: flex; align-items: center; flex-wrap: wrap; gap: var(--hdc-space-3); } .msr-refine__lab { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-100); font-weight: var(--hdc-fw-semi); letter-spacing: var(--hdc-tracking-ui); text-transform: uppercase; color: var(--hdc-color-muted); margin-right: var(--hdc-space-2); } .rchip { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-300); padding: 6px var(--hdc-space-4); border: 1px solid var(--hdc-line); border-radius: var(--hdc-radius-pill); background: var(--hdc-surface); color: var(--hdc-color-heading); cursor: pointer; transition: border-color var(--hdc-dur) var(--hdc-ease), color var(--hdc-dur) var(--hdc-ease); } .rchip:hover { border-color: var(--hdc-color-primary); color: var(--hdc-color-primary); } .rchip--loc { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--hdc-fw-medium); } .rchip--loc svg { color: var(--hdc-color-primary); } /* "Near me" leads the Try row and is deliberately not one of the others: they add a word to the query, this one asks the browser where you are. Brand blue with the arrow, so the difference is visible before it is read. ⚠️ (0,3,0), AND AFTER .rchip. Three things were beating this in turn: declared earlier in the file it lost to .rchip's own `color` on source order; raised to .megasearch .rchip--geo it still lost, because theme.css sets `.megasearch .rchip { --_fg: heading }` at the SAME (0,2,0) and theme.css is the last stylesheet loaded. Doubling the class is what actually clears it. The icon is fill:currentColor, so every one of those left it near-black. */ .megasearch .rchip.rchip--geo { --_fg: var(--hdc-color-primary); display: inline-flex; align-items: center; gap: 6px; color: var(--_fg); border-color: var(--hdc-color-primary-line); font-weight: var(--hdc-fw-medium); } .rchip--geo svg { flex: 0 0 auto; color: inherit; } .megasearch .rchip.rchip--geo:hover { --_fg: var(--hdc-color-on-dark); background: var(--hdc-color-primary); border-color: var(--hdc-color-primary); } /* Denied or unavailable: it keeps its place and says so, rather than vanishing and leaving a gap where the thing they just pressed used to be. */ .megasearch .rchip.rchip--geo[disabled] { --_fg: var(--hdc-color-muted); border-color: var(--hdc-line); background: var(--hdc-surface); cursor: default; } .msr-chips { display: flex; flex-wrap: wrap; gap: var(--hdc-space-3); } .msr-chip { display: inline-flex; align-items: center; gap: var(--hdc-space-3); font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-300); font-weight: var(--hdc-fw-medium); padding: 6px var(--hdc-space-3) 6px var(--hdc-space-4); border-radius: var(--hdc-radius-pill); background: var(--hdc-color-primary-wash); color: var(--hdc-color-primary); border: 1px solid var(--hdc-color-primary-line); } .msr-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0; opacity: 0.7; } .msr-chip button:hover { opacity: 1; } /* The × is a 9×15 glyph, so on a phone it took several tries to hit (Carter, launch day). An invisible ::before grows the target to the chip's full height and out through the gap and right padding, about 35×39, without moving or resizing anything you can see. */ .msr-chip button { position: relative; } .msr-chip button::before { content: ""; position: absolute; inset: calc(-1 * var(--hdc-space-3)); right: calc(-1 * var(--hdc-space-3) - 1px); } .msr-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--hdc-space-6); margin-top: var(--hdc-space-5); } .msr-home { display: flex; align-items: center; gap: var(--hdc-space-4); padding: var(--hdc-space-3); border: 1px solid var(--hdc-line); border-radius: var(--hdc-radius-md); background: var(--hdc-surface); text-decoration: none; margin-bottom: var(--hdc-space-3); transition: border-color var(--hdc-dur) var(--hdc-ease); } .msr-home:hover { border-color: var(--hdc-color-primary); } .msr-home img { width: 84px; height: 62px; object-fit: cover; border-radius: var(--hdc-radius-md); flex: 0 0 auto; } .msr-home__b { flex: 1 1 auto; min-width: 0; } .msr-home__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--hdc-space-3); } .msr-home__model { font-family: var(--hdc-font-display); font-size: var(--hdc-fs-500); color: var(--hdc-color-heading); } .msr-home__price { font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-semi); font-size: var(--hdc-fs-300); color: var(--hdc-color-heading); white-space: nowrap; } .msr-home__meta { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-200); color: var(--hdc-color-muted); margin-top: 3px; } .msr-cats { display: flex; flex-direction: column; gap: 2px; } .msr-cats a { display: flex; align-items: center; gap: var(--hdc-space-3); font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-medium); font-size: var(--hdc-fs-300); color: var(--hdc-color-heading); text-decoration: none; padding: var(--hdc-space-3) 0; } .msr-cats a:hover { color: var(--hdc-color-primary); } .msr-cats svg { width: 24px; height: 24px; color: inherit; flex: 0 0 auto; } /* Under the community grid in the results view the links are a secondary action, not the main column — the mockup separates them with a top margin. */ .msr-cats--tight { margin-top: var(--hdc-space-3); } .msr-empty { padding: var(--hdc-space-5); text-align: center; color: var(--hdc-color-muted); font-size: var(--hdc-fs-300); border: 1px dashed var(--hdc-line-strong); border-radius: var(--hdc-radius-md); } @media (max-width: 640px) { .msr-cols { grid-template-columns: 1fr; } } /* Search dropdown community cards — flush image, blue status pills, bolder city */ .ms-comm-card { align-items: stretch; gap: 0; padding: 0; overflow: hidden; } .ms-comm-card img { width: 150px; height: auto; align-self: stretch; border-radius: 0; } .ms-comm-card > div { padding: var(--hdc-space-4); } .ms-comm-card__name { font-size: var(--hdc-fs-500); } .ms-comm-card__meta { font-size: var(--hdc-fs-300); color: var(--hdc-color-text); margin: 5px 0 var(--hdc-space-3); } .ms-comm-card .status { background: var(--hdc-color-primary); color: var(--hdc-color-on-dark); padding: 2px var(--hdc-space-2); border-radius: 4px; font-size: 0.62rem; } .ms-comm-card .status::before { display: none; } .ms-comm-card .status--coming_soon { background: var(--hdc-color-muted); } /* ========================================================================== Menu drawer (opened by the hamburger) ========================================================================== */ .menudrawer-backdrop { position: fixed; inset: 0; z-index: 100; background: color-mix(in srgb, var(--hdc-surface-ink) 55%, transparent); opacity: 0; visibility: hidden; transition: opacity var(--hdc-dur) var(--hdc-ease), visibility var(--hdc-dur) var(--hdc-ease); } .menudrawer-backdrop.is-open { opacity: 1; visibility: visible; } /* Pinned to three viewport edges, so it takes the inset on all three. The home-indicator one matters most: the drawer's last nav link sat under it. */ .menudrawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 101; width: min(440px, 92vw); background: var(--hdc-surface); box-shadow: var(--hdc-shadow-3); transform: translateX(100%); transition: transform var(--hdc-dur) var(--hdc-ease); display: flex; flex-direction: column; padding: max(var(--hdc-space-6), var(--hdc-safe-t)) max(var(--hdc-space-7), var(--hdc-safe-r)) max(var(--hdc-space-6), var(--hdc-safe-b)) var(--hdc-space-7); } .menudrawer.is-open { transform: translateX(0); } .menudrawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--hdc-space-6); } .menudrawer__head img { height: 40px; } .menudrawer__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; color: var(--hdc-color-heading); font-size: var(--hdc-fs-500); } .menudrawer nav { display: flex; flex-direction: column; } .menudrawer nav a { font-family: var(--hdc-font-display); font-size: var(--hdc-fs-700); color: var(--hdc-color-heading); padding: var(--hdc-space-4) 0; border-bottom: 1px solid var(--hdc-line); transition: color var(--hdc-dur) var(--hdc-ease); } .menudrawer nav a:hover { color: var(--hdc-color-primary); } .menudrawer__foot { margin-top: auto; padding-top: var(--hdc-space-6); display: flex; flex-direction: column; gap: var(--hdc-space-3); } .menudrawer__foot a { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-300); letter-spacing: var(--hdc-tracking-ui); text-transform: uppercase; color: var(--hdc-color-muted); } .menudrawer__foot a:hover { color: var(--hdc-color-primary); } /* ========================================================================== Our Story — emblem bleed + photo ========================================================================== */ .our-story { position: relative; overflow: hidden; padding-block: clamp(var(--hdc-space-9), 5vw + 3rem, 10rem); } .our-story .container { position: relative; z-index: 2; } .os-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--hdc-space-7), 6vw, 7rem); align-items: center; } .os-media { overflow: hidden; border-radius: var(--hdc-radius-md); aspect-ratio: 16 / 10; background: var(--hdc-surface-tint); } .os-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .os-h { font-family: var(--hdc-font-display); font-weight: var(--hdc-fw-regular); color: var(--hdc-color-heading); font-size: var(--hdc-fs-800); line-height: 1.14; letter-spacing: -0.01em; margin: 0; } .os-p { font-size: var(--hdc-fs-500); color: var(--hdc-color-text); margin: var(--hdc-space-4) 0 0; max-width: 46ch; } .os-actions { display: flex; flex-wrap: wrap; gap: var(--hdc-space-6); margin-top: var(--hdc-space-6); } .os-link { display: inline-flex; align-items: center; gap: var(--hdc-space-3); font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-medium); font-size: var(--hdc-fs-400); color: var(--hdc-color-primary); text-decoration: none; transition: color var(--hdc-dur) var(--hdc-ease); } .os-link:hover { color: var(--hdc-color-primary-deep); } .os-link span { text-decoration: underline; text-underline-offset: 4px; } .os-link svg { width: 22px; height: 22px; flex: 0 0 auto; } .os-link:first-child svg { width: 28px; height: 28px; } /* larger community icon */ .os-bleed { position: absolute; z-index: 1; top: 50%; right: -120px; transform: translateY(-50%); height: 520px; width: 500px; overflow: hidden; opacity: 0.08; } .os-bleed img { height: 520px; width: auto; max-width: none; display: block; } @media (max-width: 820px) { .os-split { grid-template-columns: 1fr; gap: var(--hdc-space-6); } .os-bleed { opacity: 0.05; } } /* ========================================================================== Featured Communities — photo + overlay caption, description + button below Namespaced (fc-) so it never collides with the global .btn / .status. ========================================================================== */ .featured-communities { background: var(--hdc-surface-warm); } /* base section bg — same as other light sections */ /* ===== Path-chooser CTA bar (between Featured Communities & Featured Homes) → search page ===== */ .pathcta { background: var(--hdc-surface-tint); color: var(--hdc-color-heading); } /* soft primary wash */ .pathcta__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--hdc-space-8); padding-block: var(--hdc-space-8); } /* white buttons on the soft wash */ .pathcta .btn { --_bg: var(--hdc-color-on-dark); --_fg: var(--hdc-color-primary); --_bd: var(--hdc-color-on-dark); } .pathcta .btn:hover { --_bg: var(--hdc-color-primary); --_fg: var(--hdc-color-on-dark); --_bd: var(--hdc-color-primary); } .pathcta__prompt { font-family: var(--hdc-font-display); font-weight: var(--hdc-fw-regular); font-size: var(--hdc-fs-700); line-height: var(--hdc-lh-tight); margin: 0; } .pathcta__body { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-500); line-height: var(--hdc-lh-normal); color: var(--hdc-color-text); margin: var(--hdc-space-3) 0 0; max-width: 52ch; } .pathcta__actions { display: flex; gap: var(--hdc-space-4); flex-shrink: 0; } @media (max-width: 760px) { .pathcta__inner { flex-direction: column; align-items: flex-start; gap: var(--hdc-space-5); } .pathcta__actions { width: 100%; flex-direction: column; } .pathcta__actions .btn { width: 100%; justify-content: center; } } /* ===== Have a question? band → FAQ page ===== */ /* A contained LIGHT BLUE panel, not a full-bleed stripe. Both pages render it the same way, so it lives on the component rather than as a page override. The section keeps the page background; the color sits on the inner block. Was briefly navy. It sat 96px from the Custom Collection's ink band with 1.04:1 between them — the same value, 194° apart in hue, which reads as two blacks that do not match rather than as a pair. --hdc-color-primary-wash, not --hdc-surface-tint. The tint is a blue-GREY at 1.03:1 against the page, so as a panel it barely separated from its own surroundings; the wash is derived from the brand blue and is an actual light blue. Both are far more legible now that the panel has an edge and a radius. */ .faqband { background: transparent; padding-block: var(--hdc-space-9); } /* Navy panel. No shadow: --hdc-surface-deep against the warm page is ~13:1, so the panel already has its ONE edge mechanism through contrast — a shadow on top of that is a second one doing nothing. The wash version needed the shadow precisely because it had no contrast to work with (1.08:1 against the page). */ .faqband__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--hdc-space-8); background: var(--hdc-surface-deep); border-radius: var(--hdc-radius-md); padding: var(--hdc-space-8) var(--hdc-space-7); } /* Eyebrow takes primary-PALE, not primary: the brand blue is ~2.4:1 on indigo and fails. Same call as the sticky sub-nav. */ .faqband__ey { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-200); font-weight: var(--hdc-fw-semi); letter-spacing: var(--hdc-tracking-eyebrow); text-transform: uppercase; color: var(--hdc-color-primary-pale); margin: 0 0 var(--hdc-space-2); } .faqband__h { font-family: var(--hdc-font-display); font-weight: var(--hdc-fw-regular); font-size: var(--hdc-fs-700); line-height: var(--hdc-lh-tight); color: var(--hdc-color-on-dark); margin: 0; } .faqband__chips { display: flex; flex-wrap: wrap; gap: var(--hdc-space-3); margin: var(--hdc-space-5) 0 0; } /* Outlined on the navy rather than filled white — a row of white pills on indigo reads as the panel's main event, and these are secondary to the heading. */ /* Solid outline, not a transparent one. A border mixed toward transparent lets the navy through and reads as a faint smudge rather than an edge; mixing toward the SURFACE keeps it a real, opaque line at the same lightness. */ .faqband__chips a { font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-medium); font-size: var(--hdc-fs-300); padding: var(--hdc-space-2) var(--hdc-space-5); border-radius: var(--hdc-radius-pill); background: transparent; color: var(--hdc-color-on-dark); border: 1px solid color-mix(in srgb, var(--hdc-color-on-dark) 55%, var(--hdc-surface-deep)); text-decoration: none; transition: border-color var(--hdc-dur) var(--hdc-ease), background var(--hdc-dur) var(--hdc-ease); } .faqband__chips a:hover { border-color: var(--hdc-color-on-dark); background: color-mix(in srgb, var(--hdc-color-on-dark) 12%, var(--hdc-surface-deep)); color: var(--hdc-color-on-dark); } .faqband__actions { display: flex; align-items: center; gap: var(--hdc-space-4); flex-shrink: 0; } /* Button colors for this panel live with the other navy surfaces in components.css, so a new navy ground joins one list rather than each one carrying its own copy. */ @media (max-width: 760px) { .faqband__inner { flex-direction: column; align-items: flex-start; gap: var(--hdc-space-6); } /* Panel padding drops with the viewport. At space-7 the 48px inline padding ate 96px of a 350px panel, leaving less than the two buttons' own min-content width — which pushed "Ask a Question" past the viewport and gave the whole PAGE a horizontal scroll. */ .faqband__inner { padding: var(--hdc-space-6) var(--hdc-space-5); } /* And let them wrap: flex:1 1 auto still refuses to break a row, so two buttons that cannot both fit will overflow rather than stack. */ .faqband__actions { width: 100%; flex-wrap: wrap; } .faqband__actions .btn { flex: 1 1 auto; justify-content: center; min-width: 0; } } .fc-head { margin: 0 0 var(--hdc-space-7); } .fc-ey { display: block; font-family: var(--hdc-font-ui); text-transform: uppercase; letter-spacing: var(--hdc-tracking-eyebrow); font-size: var(--hdc-fs-200); font-weight: var(--hdc-fw-semi); color: var(--hdc-color-primary); margin-bottom: var(--hdc-space-2); } .fc-h { font-family: var(--hdc-font-display); font-weight: var(--hdc-fw-regular); color: var(--hdc-color-heading); font-size: var(--hdc-fs-800); letter-spacing: -0.01em; line-height: var(--hdc-lh-tight); margin: 0; } .fc-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--hdc-space-6), 5vw, var(--hdc-space-8)); } /* One card, not two — the community single's "Also selling" cross-sell. Capped so a lone card does not stretch to the full 1320px measure and stop reading as a card. (Was .feature-duo--single, deleted with that duplicate component.) */ .fc-duo--single { grid-template-columns: minmax(0, 620px); } /* The whole card is an . Color is inherited so the caption/description keep their own tokens rather than picking up a link color. */ .fc-item { display: block; text-decoration: none; color: inherit; } .fc-item:focus-visible { outline: 2px solid var(--hdc-color-primary); outline-offset: 4px; border-radius: var(--hdc-radius-md); } /* The tint ground shows through when a community has no photograph yet (the community single renders a .media-empty placeholder into this slot). */ .fc-media { position: relative; aspect-ratio: 16 / 10; border-radius: var(--hdc-radius-md); overflow: hidden; background: var(--hdc-surface-tint); } .fc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--hdc-dur-slow) var(--hdc-ease), filter var(--hdc-dur) var(--hdc-ease); } .fc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--hdc-surface-ink) 68%, transparent), transparent 46%); } /* The photo is the biggest target on the card and has to read as clickable: a slow push-in plus a small brightness drop. Darkening the IMAGE, not the ::after scrim — the scrim can only be faded from full opacity, i.e. lightened, and it is what holds the name legible while the picture moves under it. */ .fc-item:hover .fc-media img, .fc-item:focus-visible .fc-media img { transform: scale(1.04); filter: brightness(0.94); } @media (prefers-reduced-motion: reduce) { .fc-media img { transition: none; } .fc-item:hover .fc-media img, .fc-item:focus-visible .fc-media img { transform: none; } } .fc-status { position: absolute; z-index: 2; top: var(--hdc-space-5); right: var(--hdc-space-5); font-family: var(--hdc-font-ui); text-transform: uppercase; letter-spacing: var(--hdc-tracking-ui); font-size: 0.62rem; font-weight: var(--hdc-fw-semi); color: var(--hdc-color-primary); background: var(--hdc-surface); padding: 6px var(--hdc-space-3); border-radius: 4px; } .fc-cap { position: absolute; z-index: 2; left: var(--hdc-space-5); right: var(--hdc-space-5); top: var(--hdc-space-5); color: var(--hdc-color-on-dark); } .fc-name { font-family: var(--hdc-font-display); font-weight: var(--hdc-fw-regular); font-size: var(--hdc-fs-700); line-height: 1.05; margin: 0; color: var(--hdc-color-on-dark); } .fc-city { font-family: var(--hdc-font-ui); font-weight: var(--hdc-fw-regular); font-size: var(--hdc-fs-400); color: var(--hdc-color-on-dark); margin-top: var(--hdc-space-1); } .fc-below { display: flex; align-items: center; justify-content: space-between; gap: var(--hdc-space-6); padding-top: var(--hdc-space-5); } .fc-desc { font-family: var(--hdc-font-display); font-weight: var(--hdc-fw-regular); font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.25rem); color: var(--hdc-color-heading); line-height: var(--hdc-lh-snug); margin: 0; max-width: 30ch; } /* ~17 → 20px desktop */ /* The card's CTA is the canonical .btn (see the featured-communities partial). The only thing it needs here is its hover wired to the CARD's hover: the whole card is the link, so the pointer is usually somewhere else on it when the button should already read as active. ⚠️ --_bg/--_bd, never background/border-color: GeneratePress repaints anything else (theme.css documents this at length). */ .fc-item:hover .fc-cta, .fc-item:focus-visible .fc-cta { --_bg: var(--hdc-color-primary-deep); --_bd: var(--hdc-color-primary-deep); } @media (max-width: 820px) { .fc-duo { grid-template-columns: 1fr; gap: var(--hdc-space-8); } .fc-below { flex-wrap: wrap; gap: var(--hdc-space-4); } } /* ========================================================================== Featured Homes (Quick Move-In) — Unit-B home cards fh- namespaced; warm surface to alternate against the blue-tint Communities. ========================================================================== */ .featured-homes { background: var(--hdc-surface-warm); } .fh-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--hdc-space-4); margin: 0 0 var(--hdc-space-7); } .fh-ey { display: block; font-family: var(--hdc-font-ui); text-transform: uppercase; letter-spacing: var(--hdc-tracking-eyebrow); font-size: var(--hdc-fs-200); font-weight: var(--hdc-fw-semi); color: var(--hdc-color-primary); margin-bottom: var(--hdc-space-2); } .fh-h { font-family: var(--hdc-font-display); font-weight: var(--hdc-fw-regular); color: var(--hdc-color-heading); font-size: var(--hdc-fs-800); letter-spacing: -0.01em; line-height: var(--hdc-lh-tight); margin: 0; } .fh-viewall { font-family: var(--hdc-font-ui); font-size: var(--hdc-fs-300); font-weight: var(--hdc-fw-medium); letter-spacing: 0.01em; color: var(--hdc-color-primary); text-decoration: none; white-space: nowrap; } .fh-viewall:hover { color: var(--hdc-color-primary-deep); } /* Spotlight carousel — horizontal center card + peeks + arrows below. Full-bleed track; head stays in .container. The track is a REAL scroller (overflow-x + scroll-snap), not a transformed flex row, so touch swipe and trackpad work natively with their own momentum. Same mechanism as the community page's .area-car; the arrows animate scrollLeft by hand for the same reason documented there (native smooth does not land on this element, and snap cancels it outright). */ .fh-spotlight { padding-block: var(--hdc-space-2) 0; } .fh-track { --fh-card: min(640px, 54vw); display: flex; gap: clamp(var(--hdc-space-5), 3vw, var(--hdc-space-7)); overflow-x: auto; overscroll-behavior-x: none; /* proximity, not mandatory: a flick that ends BETWEEN points must be corrected under mandatory, which is the bounce-back this site has already been bitten by. Mobile — one card per view — switches to mandatory below. */ scroll-snap-type: x proximity; scrollbar-width: none; /* Room for the card's own drop shadow; overflow-x:auto makes the other axis auto too, so without this the shadow would raise a vertical scrollbar. */ padding-block: var(--hdc-space-2) var(--hdc-space-5); } .fh-track::-webkit-scrollbar { display: none; } /* Leading/trailing spacers so the FIRST and LAST card can still center. Flex pseudo-items, not padding-inline: trailing padding on a horizontal scroller is unreliably included in the scroll extent, and a flex item's % basis resolves against the container's content box, which is exactly the width we want. */ .fh-track::before, .fh-track::after { content: ""; flex: 0 0 calc(50% - var(--fh-card) / 2); } /* The spotlight renders the canonical .home-card (components.css). The carousel only sizes it up from the grid default and dims/scales the peeked cards; all card styling — image ratio, specs, price, CTA — lives in the component. */ /* 560, not 720. The card lost height when the body was reduced to one anchor plus meta, and at 720 the same height read as a letterbox. */ /* CENTER alignment, not start: the inactive cards are scaled to 0.95 and a snap area is the TRANSFORMED border box, so start-aligned points would drift by half the scale delta. A symmetric scale leaves the center where it was. */ .fh-track .home-card { flex: 0 0 var(--fh-card); scroll-snap-align: center; } .fh-track .home-card:not(.is-active) { opacity: 0.72; transform: scale(0.95); } /* Snap is lifted while an arrow glide runs, or it fights every intermediate frame. */ .fh-track.is-gliding { scroll-snap-type: none; } .fh-nav { display: flex; align-items: center; justify-content: center; gap: var(--hdc-space-5); margin-top: var(--hdc-space-7); } /* Matches .area-car__arrow on the community page — 40px, arrow glyphs, same border and hover. ⚠️ background AND color are pinned across every state: GeneratePress paints a bare