/* ============================================================ FIND A HOME . State page visual layer (all 55 states) One scoped, drop-in file for the whole rollout. Tennessee first. Class names match the earlier NC layer, so nothing breaks. WHY THIS IS SAFE 1. Tokens live on the .fah-state wrapper, NOT on :root, so they cannot override anything the global header, footer, protected sections, or other pages read. 2. Every selector is confined with :where(.fah-state). A rule can only match INSIDE the wrapper. Specificity stays (0,1,0). 3. Zero header, nav, logo, or footer rules exist in this file. THE WRAPPER BOUNDARY (this is the important part on Tennessee) The .fah-state wrapper encloses ONLY the redesigned zone. It ENDS before the protected mid-page sections. On Tennessee: {{ global_header }} <- untouched, outside scope

<- redesigned zone only breadcrumb + hero (+ tabs/search) about + home value card three cards: agents preview, listings (existing embed, resized), resources "Ready to take the next step?" CTA band

<- wrapper ENDS here {{ Meet the Tennessee team }} <- untouched, outside scope {{ Find a Home team agent grid }} <- untouched {{ Find a Home Network grid }} <- untouched

{{ global_footer }} <- untouched, outside scope On states with no preserved mid-page sections, the wrapper may enclose the whole body content between header and footer. TOKENS come from design source: the Tennessee mockup SVG vector fills, cross-checked against the live protected sections. This converges on the Find a Home ecosystem system, including the fonts. The live site already loads Fraunces and DM Sans for the protected sections, so this layer simply names them and inherits the files. ============================================================ */ /* ---- TOKENS + page-body surface (on the wrapper, not :root) ---- */ .fah-state { /* color: rust family (vector fills #C4391D/#C84421/#C45228/#A82A19 converge with the live button on ecosystem rust) */ --color-rust: #C04E2F; /* fills: buttons, badges, active tab */ --color-rust-dark: #A82A19; /* accent text: eyebrows, italic hero line, links, hover */ --color-rust-soft: #C45228; /* icon strokes, small accents */ --color-rust-tint: #F6E7DE; /* wash behind resource icons */ /* color: ink scale (vector: headings #2C354A, body #222222, gray #545454) */ --color-ink: #2C354A; /* headings, card titles, avatars */ --color-body: #222222; /* body copy, prices */ --color-muted: #545454; /* secondary labels, breadcrumb, row subtitles */ --color-placeholder: #6B6F75; /* input placeholder, 4.97:1 on white (AA safe) */ /* color: gold (live badge #D2B874 and ecosystem gold; decorative use only: badges, borders, stars. Not for text on white, 2.77:1) */ --color-gold: #D8B868; --color-gold-text: #B3994E; /* only at large sizes or on dark, see playbook */ /* color: surfaces */ --color-paper: #FFFFFF; /* cards, panels, search */ --color-bg: #FCFCFC; /* page-body background (matches live) */ --color-cream: #F7F1EA; /* warm bands: home value wash, CTA band */ --color-line: #E4E0D8; /* hairlines and card borders (live sample) */ --color-success: #257A43; --shadow-soft: 0 18px 50px rgba(44, 53, 74, .12); --shadow-card: 0 10px 28px rgba(44, 53, 74, .10); /* type: the ecosystem faces, already loaded by the live site */ --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --font-sans: 'DM Sans', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --text-xs: 11px; --text-sm: 13px; --text-md: 15px; --text-base: 16px; --text-lg: 20px; --text-xl: 28px; --text-2xl: 42px; --text-3xl: 58px; --leading-tight: 1.02; --leading-normal: 1.45; --tracking-wide: .12em; --tracking-label: .18em; /* spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 56px; --space-9: 72px; /* shape */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; --border-hairline: 1px; --border-card: 1px solid var(--color-line); /* embeds (the listings iframe) */ --embed-height: 320px; /* base surface for the redesigned zone */ font-family: var(--font-sans); color: var(--color-ink); background: var(--color-bg); } /* ============================================================ HERO (breadcrumb, two-line serif H1, copy, optional stat chips, tabs. The photo arrives via --hero-image set inline per state.) ============================================================ */ :where(.fah-state) .fah-hero { min-height: 420px; background: linear-gradient(90deg, var(--color-bg) 0%, rgba(252,252,252,.92) 39%, rgba(252,252,252,.08) 72%), var(--hero-image); background-size: cover; background-position: center right; padding: var(--space-7) var(--space-8); } :where(.fah-state) .fah-hero-inner { max-width: 1120px; margin: 0 auto; } :where(.fah-state) .fah-breadcrumb { font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-5); } :where(.fah-state) .fah-breadcrumb a { color: var(--color-rust-dark); text-decoration: none; } :where(.fah-state) .fah-h1 { margin: 0; font-family: var(--font-serif); font-size: var(--text-3xl); line-height: var(--leading-tight); font-weight: 500; color: var(--color-ink); } :where(.fah-state) .fah-h1 em { display: block; color: var(--color-rust-dark); font-style: italic; } :where(.fah-state) .fah-hero-copy { max-width: 400px; margin-top: var(--space-4); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-body); } /* Optional stat chips (population, median value, YoY). The Tennessee mockup omits them; keep or drop per state via config. */ :where(.fah-state) .fah-metrics { display: flex; gap: var(--space-5); margin-top: var(--space-5); flex-wrap: wrap; } :where(.fah-state) .fah-metric { display: flex; gap: var(--space-2); align-items: center; border-right: var(--border-hairline) solid var(--color-line); padding-right: var(--space-5); } :where(.fah-state) .fah-metric:last-child { border-right: none; padding-right: 0; } :where(.fah-state) .fah-metric-icon { width: 22px; height: 22px; color: var(--color-rust-soft); flex: 0 0 auto; } :where(.fah-state) .fah-metric-value { font-family: var(--font-serif); color: var(--color-rust); font-size: var(--text-lg); } :where(.fah-state) .fah-metric-label { font-size: var(--text-xs); color: var(--color-ink); } /* ============================================================ TABS + SEARCH (Tennessee: tabs in the hero, "Find an Agent" is an anchor to the on-page grid; existing behaviors are preserved, the classes are visual only) ============================================================ */ :where(.fah-state) .fah-tabs { display: flex; gap: var(--space-6); border-bottom: var(--border-hairline) solid var(--color-line); margin-bottom: var(--space-4); } :where(.fah-state) .fah-tab { padding: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-muted); cursor: pointer; text-decoration: none; } :where(.fah-state) .fah-tab.is-active { color: var(--color-rust); border-bottom: 2px solid var(--color-rust); } :where(.fah-state) .fah-search-panel { max-width: 1120px; margin: -40px auto var(--space-8); background: var(--color-paper); border: var(--border-card); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); padding: var(--space-4) var(--space-5); } :where(.fah-state) .fah-search-row { display: grid; grid-template-columns: 2fr repeat(4, 1fr) auto; gap: var(--space-3); } :where(.fah-state) .fah-input, :where(.fah-state) .fah-select { height: 44px; border: var(--border-card); border-radius: var(--radius-sm); padding: 0 var(--space-4); color: var(--color-body); background: var(--color-paper); font-family: var(--font-sans); font-size: var(--text-sm); } :where(.fah-state) .fah-input::placeholder { color: var(--color-placeholder); } :where(.fah-state) .fah-button { height: 44px; padding: 0 var(--space-6); border-radius: var(--radius-sm); border: var(--border-hairline) solid var(--color-rust); background: var(--color-rust); color: var(--color-paper); font-family: var(--font-sans); font-weight: 700; font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); cursor: pointer; text-decoration: none; } :where(.fah-state) .fah-button--outline { background: var(--color-paper); color: var(--color-rust); } :where(.fah-state) .fah-button--block { width: 100%; } /* ============================================================ SECTION SCAFFOLD + SHARED TEXT ============================================================ */ :where(.fah-state) .fah-section { max-width: 1120px; margin: 0 auto var(--space-5); } :where(.fah-state) .fah-grid-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-7); align-items: stretch; } :where(.fah-state) .fah-eyebrow { color: var(--color-rust-dark); font-size: var(--text-xs); font-weight: 800; letter-spacing: var(--tracking-label); text-transform: uppercase; } :where(.fah-state) .fah-h2 { margin: var(--space-3) 0; font-family: var(--font-serif); font-size: var(--text-xl); line-height: 1.12; font-weight: 500; color: var(--color-ink); } :where(.fah-state) .fah-body { color: var(--color-body); line-height: var(--leading-normal); font-size: var(--text-sm); } :where(.fah-state) .fah-link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-rust-dark); text-decoration: none; font-size: var(--text-sm); font-weight: 700; } :where(.fah-state) .fah-link--upper { letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: var(--text-xs); } :where(.fah-state) .fah-check-list { list-style: none; padding: 0; margin: var(--space-4) 0; color: var(--color-body); font-size: var(--text-sm); line-height: 1.75; } :where(.fah-state) .fah-check-list li { position: relative; padding-left: 26px; } :where(.fah-state) .fah-check-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--color-rust-soft); } :where(.fah-state) .fah-card { background: var(--color-paper); border: var(--border-card); border-radius: var(--radius-md); box-shadow: var(--shadow-card); } /* ============================================================ HOME VALUE CARD (house photo + eyebrow + serif heading + button) ============================================================ */ :where(.fah-state) .fah-home-value-card { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; overflow: hidden; padding: var(--space-6); border-radius: var(--radius-md); background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(247,241,234,.90)); } /* ============================================================ THREE-CARD ROW (Tennessee order: agents preview, listings embed, resources. Titles and links come from per-state config.) ============================================================ */ :where(.fah-state) .fah-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } :where(.fah-state) .fah-list-card { padding: var(--space-4); } :where(.fah-state) .fah-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } :where(.fah-state) .fah-list-card-title { margin: 0; font-family: var(--font-serif); font-size: var(--text-lg); color: var(--color-ink); } /* Agents preview rows (Find a Home first, then Network) */ /* TN TEAM PREVIEW CARD ONLY. The agent-row, avatar, badge-gold, and stars classes below style the Find a Home TEAM preview inside the Tennessee redesign zone, per the approved mockup. They are NEVER applied to the Find a Home Network agent grid or to Network agents anywhere. The Network grid, its FFM Badge, and its Gold Arrow Badge are already built and are never changed, altered, or imitated by this layer. */ :where(.fah-state) .fah-agent-row { display: grid; grid-template-columns: 42px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: var(--border-hairline) solid var(--color-line); } :where(.fah-state) .fah-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--color-ink); color: var(--color-paper); display: grid; place-items: center; font-family: var(--font-serif); font-size: var(--text-md); } :where(.fah-state) .fah-avatar--rust { background: var(--color-rust); } :where(.fah-state) .fah-agent-name { font-size: var(--text-sm); color: var(--color-rust-dark); font-weight: 700; } :where(.fah-state) .fah-agent-city { font-size: var(--text-xs); color: var(--color-muted); } :where(.fah-state) .fah-badge-gold { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-2); border-radius: 3px; background: var(--color-gold); color: var(--color-ink); font-size: 10px; font-weight: 800; letter-spacing: var(--tracking-wide); text-transform: uppercase; } :where(.fah-state) .fah-stars { color: var(--color-gold); font-size: var(--text-xs); letter-spacing: 1px; } :where(.fah-state) .fah-agent-phone { font-size: var(--text-sm); color: var(--color-rust-dark); white-space: nowrap; text-decoration: none; } /* Listing rows (only used if a card renders static rows; on Tennessee the listings card holds the existing embed instead, see .fah-embed) */ :where(.fah-state) .fah-listing { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: var(--border-hairline) solid var(--color-line); } :where(.fah-state) .fah-thumb { width: 96px; height: 72px; border-radius: var(--radius-sm); object-fit: cover; background: var(--color-line); } :where(.fah-state) .fah-listing-city { font-size: var(--text-sm); color: var(--color-ink); font-weight: 600; } :where(.fah-state) .fah-listing-price { font-family: var(--font-serif); font-size: var(--text-md); color: var(--color-ink); } :where(.fah-state) .fah-listing-meta { font-size: var(--text-xs); color: var(--color-muted); } /* Resource rows (icon + title + subtitle) */ :where(.fah-state) .fah-resource { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; } :where(.fah-state) .fah-resource-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--color-rust-tint); color: var(--color-rust-soft); display: grid; place-items: center; } :where(.fah-state) .fah-resource-title { font-size: var(--text-sm); color: var(--color-ink); font-weight: 600; } :where(.fah-state) .fah-resource-sub { font-size: var(--text-xs); color: var(--color-muted); } /* ============================================================ EXISTING EMBEDS (the listings iframe on Tennessee) The embed keeps its src, params, id, allow, sandbox, and script handlers exactly as they are. This container only sizes and frames it. If the embed script forces its own inline height, prefer the embed's own size setting over CSS overrides. ============================================================ */ :where(.fah-state) .fah-embed { border: var(--border-card); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-paper); } :where(.fah-state) .fah-embed > iframe { display: block; width: 100%; border: 0; height: var(--embed-height); } /* ============================================================ CTA BAND ("Ready to take the next step?" photo left, copy right. This band is INSIDE the redesigned zone; the protected sections start immediately after it.) ============================================================ */ :where(.fah-state) .fah-footer-cta { display: grid; grid-template-columns: 1fr 1fr; align-items: center; overflow: hidden; background: var(--color-cream); border-radius: var(--radius-md); } :where(.fah-state) .fah-cta-copy { padding: var(--space-6) var(--space-7); } /* ============================================================ OPTIONAL: STATE SUMMARY PANEL (map + top cities + team button) Not used on Tennessee. Kept for states that want it, inert otherwise. ============================================================ */ :where(.fah-state) .fah-state-panel { padding: var(--space-5); } :where(.fah-state) .fah-state-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); } :where(.fah-state) .fah-state-title { margin: 0 0 var(--space-1); font-family: var(--font-serif); font-size: var(--text-xl); color: var(--color-ink); } :where(.fah-state) .fah-state-meta { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink); } :where(.fah-state) .fah-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-3); border-radius: var(--radius-sm); background: var(--color-rust); color: var(--color-paper); font-size: var(--text-xs); font-weight: 800; letter-spacing: var(--tracking-wide); text-transform: uppercase; } :where(.fah-state) .fah-state-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; } :where(.fah-state) .fah-state-map { background: var(--color-cream); border-radius: var(--radius-sm); min-height: 220px; } :where(.fah-state) .fah-city-head { font-size: var(--text-xs); font-weight: 800; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-rust-dark); margin-bottom: var(--space-4); } :where(.fah-state) .fah-city-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-7); font-size: var(--text-sm); } :where(.fah-state) .fah-city { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--color-body); border-bottom: var(--border-hairline) solid var(--color-line); padding: var(--space-1) 0; } :where(.fah-state) .fah-city-count { color: var(--color-ink); font-weight: 700; } /* ============================================================ STATES (hover and focus, inferred, not in the mockup) ============================================================ */ :where(.fah-state) .fah-button:hover { background: var(--color-rust-dark); border-color: var(--color-rust-dark); } :where(.fah-state) .fah-button--outline:hover { background: var(--color-rust); color: var(--color-paper); } :where(.fah-state) .fah-link:hover, :where(.fah-state) .fah-agent-phone:hover { color: var(--color-rust); } :where(.fah-state) .fah-input:focus, :where(.fah-state) .fah-select:focus { outline: 2px solid var(--color-rust); outline-offset: 1px; } :where(.fah-state) .fah-button:focus-visible, :where(.fah-state) .fah-button--outline:focus-visible, :where(.fah-state) .fah-tab:focus-visible, :where(.fah-state) .fah-link:focus-visible { outline: 2px solid var(--color-rust); outline-offset: 3px; } /* ============================================================ RESPONSIVE (scoped) ============================================================ */ @media (max-width: 1000px) { :where(.fah-state) .fah-search-row { grid-template-columns: 1fr 1fr; } :where(.fah-state) .fah-grid-2 { grid-template-columns: 1fr; } :where(.fah-state) .fah-home-value-card { grid-template-columns: 1fr; } :where(.fah-state) .fah-mini-grid { grid-template-columns: 1fr; } :where(.fah-state) .fah-state-body { grid-template-columns: 1fr; } :where(.fah-state) .fah-footer-cta { grid-template-columns: 1fr; } } @media (max-width: 620px) { :where(.fah-state) .fah-hero { padding: var(--space-6) var(--space-5); } :where(.fah-state) .fah-h1 { font-size: var(--text-2xl); } :where(.fah-state) .fah-search-row { grid-template-columns: 1fr; } :where(.fah-state) .fah-city-list { grid-template-columns: 1fr; } } /* ============================================================ PROTECTED ICON ARTWORK (optional one-line toggle) Icon rules above color SVGs via currentColor, right for stroke or currentColor art. If any icons are protected brand assets that must render their own fill, uncomment: :where(.fah-state) .fah-metric-icon, :where(.fah-state) .fah-resource-icon > svg { color: revert; fill: revert; } ============================================================ */ /* ============================================================ COULD THIS BE YOU (recruit) CARD. Redesign-zone only. Renders inside the agents pointer card when a state's live Network roster is zero (mode: auto) or when the config forces it on. A ghost agent row alludes to the open featured spot. It NEVER imitates the built Network presentation, its FFM Badge, or its Gold Arrow Badge. Keyframes are namespaced fah- because keyframe names are global. ============================================================ */ :where(.fah-state) .fah-recruit-row { display: grid; grid-template-columns: 42px 1fr auto; gap: var(--space-3, 12px); align-items: center; padding: var(--space-3, 12px); border: 1.5px dashed var(--color-line); border-radius: var(--radius-md); background: var(--color-paper); } :where(.fah-state) .fah-avatar--ghost { background: var(--color-cream); position: relative; overflow: hidden; } :where(.fah-state) .fah-avatar--ghost::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 34%, var(--color-line) 0 8px, transparent 9px), radial-gradient(ellipse 16px 12px at 50% 92%, var(--color-line) 0 99%, transparent 100%); } :where(.fah-state) .fah-ghost-lines { display: block; } :where(.fah-state) .fah-ghost-bar { display: block; height: 9px; border-radius: 5px; background: var(--color-line); width: 64%; } :where(.fah-state) .fah-ghost-bar--short { width: 38%; margin-top: 6px; opacity: .7; } :where(.fah-state) .fah-recruit-tag { font-family: var(--font-sans); font-size: 12px; letter-spacing: .08em; font-weight: 600; color: var(--color-rust-dark); border: 1px solid var(--color-rust); border-radius: var(--radius-pill); padding: 3px 10px; } :where(.fah-state) .fah-recruit-copy { margin-top: var(--space-3, 12px); } @media (prefers-reduced-motion: no-preference) { :where(.fah-state) .fah-ghost-bar, :where(.fah-state) .fah-avatar--ghost::before { animation: fah-ghost-pulse 3s ease-in-out infinite; } } @keyframes fah-ghost-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }