/* ============================================================ Space Group — 深空蓝 (Deep-Space Navy) design tokens. SINGLE SOURCE OF COLOR. Any color in the project must reference one of these variables — no free-floating hex values. v1.0 ============================================================ */ :root{ /* Brand single-hue ladder (the only hue) */ --sg-navy-900:#0B1D3A; /* logo, headlines, primary buttons, footer, dark grounds */ --sg-navy-700:#24395C; /* hover, button hover, deep dividers */ --sg-navy-500:#4A5B8C; /* secondary buttons, icons, links, secondary emphasis */ --sg-navy-300:#8FA3C4; /* caption, placeholder, disabled, helper text */ --sg-navy-100:#D9E0EC; /* light blocks, chips, zebra rows, hover backgrounds, borders */ /* Grounds (NOT pure white) */ --sg-cloud:#F0EEE9; /* page background — #FFFFFF banned as a page ground */ --sg-surface:#FDFDFC; /* cards, popovers, inputs */ /* Functional text (non-brand, text only) */ --sg-text:#1C2430; --sg-text-soft:#5A6472; /* Semantic (form validation / status only — never decorative) */ --sg-success:#0F6B4F; --sg-error:#A83A2B; --sg-warning:#9A6B15; } /* Dark = navy/white swap, ladder reversed */ [data-theme="dark"], .dark, html[data-theme="dark"]{ --sg-cloud:#0B1D3A; --sg-surface:#16294A; --sg-text:#F0EEE9; --sg-text-soft:#8FA3C4; --sg-navy-900:#F0EEE9; --sg-navy-700:#D9E0EC; --sg-navy-500:#8FA3C4; --sg-navy-300:#4A5B8C; --sg-navy-100:#24395C; } /* Unified focus visibility */ :focus-visible{ outline:2px solid var(--sg-navy-500); outline-offset:2px; } /* ============================================================ spacereai · "Evidence dossier" UI layer (2026 redesign) ------------------------------------------------------------ PURELY PRESENTATIONAL. Activated only when . Loads AFTER styles.css so it wins on equal specificity, and every rule is scoped under [data-ui="re2026"] so un-migrated pages are untouched. Strategy: re-map the existing token VALUES (the site is token-driven: var(--accent) x321, var(--serif) x111, var(--line) x215) so the whole page re-skins, then layer the signature elements (mono eyebrows, section numbering, bento cards, sage "verified" receipts) on top. Design language (per CLAUDE_CODE_BRIEF.md): - oat canvas + white surfaces - terracotta #0b1d3a = accent only (buttons / highlights) - sage #24395c = the "verified / credible" system color - sans headlines (NOT serif) · mono for data / numbers / labels - bento rounded cards, light shadow, hover micro-lift + top rule - the receipt / provenance bar is the signature trust element ============================================================ */ /* ---------- 1. Token re-map (existing names -> new values) ---------- */ html[data-ui="re2026"]{ /* text */ --ink:#1c2430; --ink-2:#1c2430; /* keep strong-secondary dark */ --ink-soft:#5a6472; /* muted body text */ --muted:#8fa3c4; /* surfaces & lines */ --bg:#f0eee9; /* white cards / surfaces */ --bg-alt:#f0eee9; /* oat — recessed sections */ --bg-dark:#1c2430; --line:#d9e0ec; --line-2:#d9e0ec; /* terracotta accent */ --accent:#0b1d3a; --accent-soft:#4a5b8c; --accent-strong:#24395c; --accent-bg:#d9e0ec; /* new tokens introduced by this layer */ --canvas:#f0eee9; --surface:#fdfdfc; --surface-2:#fdfdfc; --brand:#0b1d3a; --brand-deep:#24395c; --brand-tint:#d9e0ec; --verify:#24395c; /* sage — verified / credible */ --verify-tint:#d9e0ec; --amber:#0b1d3a; /* attention */ --grid-dot:rgba(28,24,19,.06); /* type */ --serif:var(--sans); /* flip ALL headings from Fraunces -> sans */ /* one-font consistency: route the old "mono" data font to the same sans stack so the whole site uses a single typeface (Inter + CJK fallback) */ --font-mono:var(--sans); /* shape */ --radius:18px; --radius-sm:12px; --radius-lg:24px; /* shadows — softer, deeper */ --shadow-sm:0 1px 2px rgba(28,24,19,.04),0 1px 3px rgba(28,24,19,.04); --shadow-md:0 1px 2px rgba(28,24,19,.04),0 8px 22px rgba(28,24,19,.06); --shadow-lg:0 2px 6px rgba(28,24,19,.05),0 28px 64px rgba(28,24,19,.12); --shadow-orange:0 16px 44px rgba(28,36,48,.20); } /* ---------- 2. Canvas + headings ---------- */ html[data-ui="re2026"] body{ background:var(--canvas); } /* kill stray horizontal overflow on mobile — the site's horizontal rails (recent-sales / latest-listings / chips) leak ~16px to the document. `clip` (not hidden) does NOT break position:sticky (listings map). */ html[data-ui="re2026"]{ overflow-x:clip; } /* fix: brand logo collapsed to width:0 on desktop (flex-basis quirk on the inside .brand-mark{inline-flex}) — pin it so it keeps its width */ html[data-ui="re2026"] .brand-mark{ flex:0 0 auto; } html[data-ui="re2026"] .brand-logo{ width:auto; flex:0 0 auto; aspect-ratio:1199 / 664; object-fit:contain; } /* logo.png already contains the "SPACE REALTY" wordmark — hide the duplicate text lockup that was colliding with the nav ("Space Re|Buy|lty") */ html[data-ui="re2026"] .brand-text{ display:none; } /* language-discovery popup is redundant with the nav EN|中 toggle and overlapped content */ html[data-ui="re2026"] #sr-lang-hint{ display:none !important; } /* hero gradient bg uses hardcoded old-orange (bypasses tokens) -> align to terracotta/oat */ html[data-ui="re2026"] .hero-photo-bg{ background: radial-gradient(ellipse 70% 60% at 85% 10%, rgba(28,36,48,.13), transparent 70%), radial-gradient(ellipse 70% 60% at 15% 90%, rgba(28,36,48,.06), transparent 70%), linear-gradient(180deg, #F6F4EF 0%, var(--canvas) 100%); } html[data-ui="re2026"] h1, html[data-ui="re2026"] h2, html[data-ui="re2026"] h3, html[data-ui="re2026"] h4{ font-family:var(--sans); font-weight:800; letter-spacing:-.03em; line-height:1.08; } /* keep the em highlight, drop the serif italic look */ html[data-ui="re2026"] em{ font-style:normal; color:var(--brand-deep); font-family:var(--sans); font-weight:800; } /* ---------- 3. Buttons ---------- */ html[data-ui="re2026"] .btn{ border-radius:var(--radius-sm); font-weight:650; } html[data-ui="re2026"] .btn-primary{ background:var(--brand); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.25) inset,var(--shadow-md); } html[data-ui="re2026"] .btn-primary:hover{ background:var(--brand-deep); transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.25) inset,var(--shadow-lg); } /* ---------- 4. Eyebrows -> mono, sage, + editorial section numbering ---------- */ html[data-ui="re2026"] body{ counter-reset:sr-sec; } html[data-ui="re2026"] .eyebrow, html[data-ui="re2026"] .featured-banner-eyebrow{ font-family:var(--font-mono); font-weight:600; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--verify); } /* number + rule line above each major section head (01 / 02 …) */ html[data-ui="re2026"] .section-head{ counter-increment:sr-sec; position:relative; } html[data-ui="re2026"] .section-head .eyebrow{ position:relative; padding-top:26px; } html[data-ui="re2026"] .section-head .eyebrow::before{ content:counter(sr-sec,decimal-leading-zero); position:absolute; top:0; left:0; font:700 13px var(--font-mono); color:var(--brand-deep); letter-spacing:.08em; } html[data-ui="re2026"] .section-head .eyebrow::after{ content:""; position:absolute; top:8px; left:34px; width:120px; height:1px; background:linear-gradient(to right,var(--line-2),transparent); } /* ---------- 5. Chips (mono pill) ---------- */ html[data-ui="re2026"] .chip-label{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } html[data-ui="re2026"] .popular-chip{ font-family:var(--font-mono); font-size:12.5px; background:var(--surface); border:1px solid var(--line); border-radius:999px; color:var(--ink-soft); transition:transform .15s,border-color .15s,color .15s; } html[data-ui="re2026"] .popular-chip:hover{ border-color:var(--brand); color:var(--brand-deep); transform:translateY(-1px); } /* ---------- 6. Bento cards — radius, hover micro-lift + top terracotta rule ---------- */ html[data-ui="re2026"] .neighborhood-card, html[data-ui="re2026"] .tr-win-card, html[data-ui="re2026"] .agent-card-compact, html[data-ui="re2026"] .agent-card, html[data-ui="re2026"] .sr-card, html[data-ui="re2026"] .latest-listing-card, html[data-ui="re2026"] .recent-sale-card{ position:relative; border-radius:var(--radius); overflow:hidden; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; } html[data-ui="re2026"] .neighborhood-card::before, html[data-ui="re2026"] .agent-card-compact::before, html[data-ui="re2026"] .sr-card::before, html[data-ui="re2026"] .latest-listing-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; z-index:3; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } html[data-ui="re2026"] .neighborhood-card:hover, html[data-ui="re2026"] .tr-win-card:hover, html[data-ui="re2026"] .agent-card-compact:hover, html[data-ui="re2026"] .agent-card:hover, html[data-ui="re2026"] .sr-card:hover, html[data-ui="re2026"] .latest-listing-card:hover, html[data-ui="re2026"] .recent-sale-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-2); } html[data-ui="re2026"] .neighborhood-card:hover::before, html[data-ui="re2026"] .agent-card-compact:hover::before, html[data-ui="re2026"] .sr-card:hover::before, html[data-ui="re2026"] .latest-listing-card:hover::before{ transform:scaleX(1); } /* ---------- 7. Track record — the receipt section ---------- */ /* mono numerals = the "字证据" feel */ html[data-ui="re2026"] .tr-stat strong{ font-family:var(--font-mono); font-weight:700; letter-spacing:-.02em; } html[data-ui="re2026"] .tr-stat span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } html[data-ui="re2026"] .tr-range-label, html[data-ui="re2026"] .tr-press-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); } /* give the proof cards a sage "verified" left edge — provenance bar feel */ html[data-ui="re2026"] .tr-win-card{ border-left:3px solid var(--verify); border-radius:0 var(--radius) var(--radius) 0; } /* ---------- 8. Reusable receipt / provenance bar (.receipt) ---------- Available for any AI answer / conclusion block that already carries source + verification content. Pure styling — add no fabricated copy. */ html[data-ui="re2026"] .receipt{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-family:var(--font-mono); background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--verify); border-radius:10px; padding:10px 13px; } html[data-ui="re2026"] .receipt .lbl{ font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); } html[data-ui="re2026"] .receipt .tok{ font-size:11px; padding:3px 8px; border-radius:6px; background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); } html[data-ui="re2026"] .receipt .ver{ display:inline-flex; align-items:center; gap:4px; color:var(--verify); font-size:11px; font-weight:700; } /* ---------- 9. Subtle dot-grid on recessed sections ---------- */ html[data-ui="re2026"] .section-alt{ position:relative; } html[data-ui="re2026"] .section-alt::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55; background-image:radial-gradient(var(--grid-dot) 1px,transparent 1px); background-size:26px 26px; -webkit-mask-image:radial-gradient(circle at 80% 0%,#000,transparent 70%); mask-image:radial-gradient(circle at 80% 0%,#000,transparent 70%); } html[data-ui="re2026"] .section-alt > *{ position:relative; z-index:1; } /* ---------- 10. Dormant dark tokens (no toggle wired yet — kept ready) ---------- */ html[data-ui="re2026"][data-theme="dark"]{ --canvas:#14110D; --surface:#1F1A15; --surface-2:#25201A; --ink:#F3EEE7; --ink-2:#d9e0ec; --ink-soft:#8fa3c4; --muted:#5a6472; --bg:#1F1A15; --bg-alt:#14110D; --bg-dark:#0F0C08; --line:#5a6472; --line-2:#5a6472; --accent:#0b1d3a; --accent-strong:#0b1d3a; --accent-bg:#5a6472; --brand:#0b1d3a; --brand-deep:#0b1d3a; --brand-tint:#5a6472; --verify:#7CA98F; --verify-tint:#1D2922; --amber:#0b1d3a; --grid-dot:rgba(255,250,242,.05); } /* ============================================================ AI-landing hero — the homepage leads with a conversation box, a "how to use" strip, and 4 simple choices. Reuses the real Space AI smart-search (#smartSearchRoot / SRSmartSearch). ============================================================ */ html[data-ui="re2026"] .hero-photo-inner{ text-align:center; } html[data-ui="re2026"] .hero-photo-title{ margin:18px auto 14px; } html[data-ui="re2026"] .hero-photo-sub{ margin-left:auto; margin-right:auto; } /* eyebrow with sage pip */ html[data-ui="re2026"] .re-hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; background:var(--verify-tint); border:1px solid color-mix(in srgb,var(--verify) 22%,transparent); padding:6px 13px; border-radius:999px; } html[data-ui="re2026"] .re-pip{ width:7px; height:7px; border-radius:50%; background:var(--verify); box-shadow:0 0 0 4px color-mix(in srgb,var(--verify) 18%,transparent); } /* the conversation box — make the smart-search bar the big centerpiece */ html[data-ui="re2026"] .smart-search-mount--hero{ max-width:720px; margin:0 auto; } html[data-ui="re2026"] .ss-bar--hero{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:8px 8px 8px 18px; } html[data-ui="re2026"] .ss-bar--hero:focus-within{ border-color:var(--verify); box-shadow:0 0 0 4px var(--verify-tint),var(--shadow-lg); } html[data-ui="re2026"] .ss-input{ font-size:17px; } html[data-ui="re2026"] .ss-submit{ background:var(--brand); color:#fff; border-radius:var(--radius-sm); } html[data-ui="re2026"] .ss-submit:hover{ background:var(--brand-deep); } html[data-ui="re2026"] .ss-eyebrow, html[data-ui="re2026"] .ss-example-chip, html[data-ui="re2026"] .ss-recent-chip{ font-family:var(--font-mono); } /* how-to-use strip */ html[data-ui="re2026"] .re-howto{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1080px; margin:30px auto 0; padding-top:26px; border-top:1px solid var(--line); text-align:left; } html[data-ui="re2026"] .re-step{ display:flex; gap:12px; align-items:flex-start; } html[data-ui="re2026"] .re-step .n{ flex:none; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font:800 13px var(--font-mono); color:#fff; background:var(--brand); box-shadow:var(--shadow-sm); } html[data-ui="re2026"] .re-step b{ font-size:14.5px; letter-spacing:-.01em; display:block; } html[data-ui="re2026"] .re-step p{ margin:4px 0 0; font-size:13px; color:var(--ink-soft); line-height:1.5; } html[data-ui="re2026"] .re-step .ver{ color:var(--verify); font-weight:700; } /* 4 simple choices: Buy / Rent / Sell / Open Houses */ html[data-ui="re2026"] .re-choices{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:1280px; margin:32px auto 0; text-align:left; } html[data-ui="re2026"] .re-choice{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; color:var(--ink); box-shadow:var(--shadow-sm); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; } html[data-ui="re2026"] .re-choice::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } html[data-ui="re2026"] .re-choice:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-2); } html[data-ui="re2026"] .re-choice:hover::before{ transform:scaleX(1); } html[data-ui="re2026"] .re-choice .ic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line); color:var(--brand-deep); } html[data-ui="re2026"] .re-choice .ic svg{ width:19px; height:19px; } html[data-ui="re2026"] .re-choice .rc-t{ font-weight:700; font-size:16px; letter-spacing:-.01em; } html[data-ui="re2026"] .re-choice .rc-d{ font:500 11.5px var(--font-mono); letter-spacing:.04em; color:var(--muted); text-transform:uppercase; } @media (max-width:760px){ html[data-ui="re2026"] .re-howto{ grid-template-columns:1fr; gap:14px; } html[data-ui="re2026"] .re-choices{ grid-template-columns:1fr 1fr; } } /* ---------- Layout: headline band on top, then a MAP with the AI box floating ON it ---------- */ html[data-ui="re2026"] .hero-photo-inner{ padding:clamp(54px,8vh,86px) 0 16px; } html[data-ui="re2026"] .re-choices{ margin-top:24px; } html[data-ui="re2026"] .sr-home-map-section{ padding-top:6px; padding-bottom:46px; } /* ONE cohesive unit: Space AI search bar on top + map below, single frame, aligned */ html[data-ui="re2026"] .re-map-unit{ border:1px solid var(--line-2); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; background:var(--surface); } /* search becomes the unit's header strip (full width, divider under it) */ html[data-ui="re2026"] .re-map-search{ max-width:none; margin:0; padding:14px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); } /* map fills the rest of the unit — drop its own frame, the unit provides it */ html[data-ui="re2026"] .sr-home-map-wrap{ position:relative; border:none; border-radius:0; box-shadow:none; overflow:hidden; } html[data-ui="re2026"] #homeMap, html[data-ui="re2026"] .sr-home-map{ height:clamp(440px,62vh,600px); } /* the "Showing N listings" chip stays at the bottom of the map */ html[data-ui="re2026"] .sr-home-map-overlay{ top:auto; bottom:14px; } /* ---------- Explorer: big map (left) + right rail (listing info top, chat bottom) ---------- */ html[data-ui="re2026"] .re-explorer{ display:grid; grid-template-columns: minmax(0,1fr) clamp(300px, 30%, 380px); height:clamp(520px, 74vh, 760px); } html[data-ui="re2026"] .re-explorer .sr-home-map-wrap{ height:100%; border-right:1px solid var(--line); } html[data-ui="re2026"] .re-explorer #homeMap, html[data-ui="re2026"] .re-explorer .sr-home-map{ height:100%; } html[data-ui="re2026"] .re-rail{ display:flex; flex-direction:column; min-height:0; background:var(--surface); } /* top-right: the selected/featured listing card */ html[data-ui="re2026"] .re-listing-info{ flex:1 1 auto; min-height:0; overflow:auto; padding:14px; border-bottom:1px solid var(--line); } html[data-ui="re2026"] .re-listing-info .ls-map-pop, html[data-ui="re2026"] .re-listing-info .sr-map-pop{ width:100%; max-width:none; } html[data-ui="re2026"] .re-listing-empty{ font-family:var(--font-mono); font-size:12.5px; line-height:1.6; color:var(--ink-soft); } /* bottom-right: the Space AI chat (override the old header-strip styling) */ html[data-ui="re2026"] .re-rail .re-map-search{ margin:0; max-width:none; padding:12px; background:var(--surface-2); border-bottom:none; border-top:1px solid var(--line); } @media (max-width:860px){ html[data-ui="re2026"] .re-explorer{ display:block; height:auto; } html[data-ui="re2026"] .re-explorer .sr-home-map-wrap{ border-right:none; border-bottom:1px solid var(--line); } html[data-ui="re2026"] .re-explorer #homeMap, html[data-ui="re2026"] .re-explorer .sr-home-map{ height:clamp(360px,52vh,520px); } } /* listing info card (top-right rail) — REAL photo (lazy-loaded), mono price */ html[data-ui="re2026"] .re-li-photo{ width:100%; aspect-ratio:4 / 3; border-radius:var(--radius-sm); background:var(--surface-2) center / cover no-repeat; display:flex; align-items:center; justify-content:center; } html[data-ui="re2026"] .re-li-photoload{ font:600 10px var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } html[data-ui="re2026"] .re-li-body{ padding-top:12px; } html[data-ui="re2026"] .re-li-price{ font-family:var(--font-mono); font-weight:700; font-size:20px; letter-spacing:-.02em; color:var(--ink); } html[data-ui="re2026"] .re-li-addr{ font-size:13px; color:var(--ink-soft); margin-top:4px; line-height:1.4; } html[data-ui="re2026"] .re-li-meta{ font:500 11.5px var(--font-mono); color:var(--muted); margin-top:6px; letter-spacing:.04em; } html[data-ui="re2026"] .re-li-cta{ display:inline-block; margin-top:12px; font-weight:650; font-size:13.5px; color:var(--brand-deep); } html[data-ui="re2026"] .re-li-cta:hover{ text-decoration:underline; } /* house keyword chips in the listing card */ html[data-ui="re2026"] .re-li-kw{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; } html[data-ui="re2026"] .re-li-kw:empty{ margin-top:0; } html[data-ui="re2026"] .re-li-tag{ font:500 11px var(--font-mono); letter-spacing:.02em; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px 9px; } /* "How Space AI works" teaching block (landing, below the map) */ html[data-ui="re2026"] .re-howto-head{ text-align:center; margin:4px auto 0; } html[data-ui="re2026"] .re-howto-title{ font-size:clamp(1.45rem,3vw,2rem); margin:8px 0 0; } html[data-ui="re2026"] .re-howto{ margin-top:22px; } /* mobile: in the rail, put the "ask Space AI" box ABOVE the listing card */ @media (max-width:860px){ html[data-ui="re2026"] .re-rail .re-map-search{ order:-1; border-top:none; border-bottom:1px solid var(--line); } html[data-ui="re2026"] .re-listing-info{ border-bottom:none; } } /* shrink the Space AI input inside the narrow rail */ html[data-ui="re2026"] .re-rail .ss-input{ font-size:14px; padding:9px 12px; } html[data-ui="re2026"] .re-rail .ss-bar--hero{ padding:4px 4px 4px 12px; } html[data-ui="re2026"] .re-rail .ss-submit{ padding:8px 14px; font-size:13px; } html[data-ui="re2026"] .re-rail .ss-eyebrow{ font-size:10px; } /* ---------- Tidy the smart-search panel inside the map unit ---------- */ /* the dark onboarding tooltip is redundant with the placeholder and overlapped the search/map seam — hide it for a clean look */ html[data-ui="re2026"] .ss-onboard{ display:none !important; } /* hide the example-chips horizontal scrollbar (chips still scroll/swipe) */ html[data-ui="re2026"] .ss-examples{ scrollbar-width:none; } html[data-ui="re2026"] .ss-examples::-webkit-scrollbar{ display:none; } /* faint "Try: …" hint — calm it down */ html[data-ui="re2026"] .ss-hint{ opacity:.6; } /* ---------- Listing cards (homes.com-clean) — mono price, airier, soft shell ---------- */ html[data-ui="re2026"] .listing-card-price, html[data-ui="re2026"] .ls-map-pop-price, html[data-ui="re2026"] .latest-listing-price, html[data-ui="re2026"] .recent-sale-price{ font-family:var(--font-mono); font-weight:700; letter-spacing:-.02em; color:var(--ink); } html[data-ui="re2026"] .listing-card{ border:1px solid var(--line); box-shadow:var(--shadow-sm); } html[data-ui="re2026"] .listing-card-body{ padding:16px 18px 20px; } html[data-ui="re2026"] .listing-card-addr{ color:var(--ink-soft); } /* Contain Leaflet panes/markers AND the map overlay chips (z 200–700) inside their own stacking context so they can't escape over the fixed mobile nav drawer / header */ html[data-ui="re2026"] .leaflet-container, html[data-ui="re2026"] .sr-home-map-wrap, html[data-ui="re2026"] .listings-map{ isolation:isolate; } /* ---------- Grouped dropdown nav (built by site-nav.js) ---------- */ html[data-ui="re2026"] .nav-links--grouped{ display:flex; align-items:center; gap:4px; } html[data-ui="re2026"] .nav-group{ position:relative; } html[data-ui="re2026"] .nav-grp-top, html[data-ui="re2026"] .nav-grp-link{ display:inline-flex; align-items:center; gap:5px; padding:8px 12px; border-radius:9px; font-size:14.5px; font-weight:500; color:var(--ink-soft); white-space:nowrap; transition:color .14s, background .14s; text-decoration:none; } html[data-ui="re2026"] .nav-grp-top:hover, html[data-ui="re2026"] .nav-grp-link:hover, html[data-ui="re2026"] .nav-group:hover .nav-grp-top{ color:var(--ink); background:var(--surface-2); } html[data-ui="re2026"] .nav-grp-link.is-active, html[data-ui="re2026"] .nav-group.is-active .nav-grp-top{ color:var(--brand-deep); } html[data-ui="re2026"] .nav-caret{ opacity:.5; } html[data-ui="re2026"] .nav-grp-menu{ position:absolute; top:100%; left:0; margin-top:4px; min-width:212px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); padding:7px; display:flex; flex-direction:column; gap:1px; opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:60; } html[data-ui="re2026"] .nav-group:hover .nav-grp-menu, html[data-ui="re2026"] .nav-group:focus-within .nav-grp-menu{ opacity:1; transform:none; pointer-events:auto; } html[data-ui="re2026"] .nav-grp-menu a{ padding:9px 12px; border-radius:8px; font-size:14px; font-weight:500; color:var(--ink-soft); white-space:nowrap; text-decoration:none; } html[data-ui="re2026"] .nav-grp-menu a:hover{ background:var(--surface-2); color:var(--brand-deep); } /* merge: hide the redundant hardcoded "Get Started" CTA + "Agent Portal" link; auth-nav.js provides the single Sign in / account entry */ html[data-ui="re2026"] .nav-cta{ display:none !important; } /* Agent Portal — keep it beside Sign in (per request) */ html[data-ui="re2026"] .nav-portal-link{ display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:9px; font-size:14px; font-weight:500; color:var(--ink-soft); text-decoration:none; } html[data-ui="re2026"] .nav-portal-link:hover{ color:var(--brand-deep); background:var(--surface-2); } /* top tab / chip strips: wrap simply instead of a horizontal scroll track */ html[data-ui="re2026"] .sr-cat-tabs{ flex-wrap:wrap; overflow:visible; scroll-snap-type:none; } html[data-ui="re2026"] .ss-examples{ flex-wrap:wrap; overflow:visible; } html[data-ui="re2026"] .search-chips{ flex-wrap:wrap !important; overflow:visible !important; } /* mobile drawer: groups + their items expand inline */ @media (max-width:920px){ html[data-ui="re2026"] .nav-links--grouped{ flex-direction:column; align-items:stretch; gap:0; z-index:1500; background:var(--surface) !important; max-height:calc(100vh - 64px); overflow-y:auto; -webkit-overflow-scrolling:touch; } html[data-ui="re2026"] .nav-group{ position:static; } html[data-ui="re2026"] .nav-grp-top{ justify-content:space-between; } html[data-ui="re2026"] .nav-grp-top .nav-caret{ display:none; } html[data-ui="re2026"] .nav-grp-menu{ position:static; opacity:1; transform:none; pointer-events:auto; box-shadow:none; border:none; border-radius:0; padding:0 0 8px 16px; margin:0; min-width:0; } } /* ---------- About-page contact block (merged from contact.html) ---------- */ html[data-ui="re2026"] .about-contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:32px; margin-top:28px; align-items:start; } html[data-ui="re2026"] .about-contact-info p{ margin:0 0 16px; color:var(--ink-soft); line-height:1.6; } html[data-ui="re2026"] .about-contact-info strong{ color:var(--ink); } html[data-ui="re2026"] .about-contact-form{ display:flex; flex-direction:column; gap:12px; } html[data-ui="re2026"] .about-contact-form input, html[data-ui="re2026"] .about-contact-form textarea{ width:100%; padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--radius-sm); font:inherit; background:var(--surface); color:var(--ink); } html[data-ui="re2026"] .about-contact-form textarea{ resize:vertical; } html[data-ui="re2026"] .about-contact-form .btn{ align-self:flex-start; } @media (max-width:760px){ html[data-ui="re2026"] .about-contact-grid{ grid-template-columns:1fr; gap:22px; } } /* ---------- Full / ultra-wide layout: fill the whole viewport width ---------- */ html[data-ui="re2026"] .container{ max-width:none; padding-left:clamp(20px,3vw,64px); padding-right:clamp(20px,3vw,64px); } html[data-ui="re2026"] .hero-photo-inner{ max-width:none; } /* hero fills the page like every other section */ html[data-ui="re2026"] .smart-search-mount--hero{ max-width:1000px; } /* keep the headline + sub a readable measure even though the section is full-width */ html[data-ui="re2026"] .hero-photo-title{ max-width:18ch; margin-left:auto; margin-right:auto; } html[data-ui="re2026"] .hero-photo-sub{ max-width:52ch; margin-left:auto; margin-right:auto; } /* recent-sales cards are real links now */ html[data-ui="re2026"] a.recent-sale-card{ display:block; text-decoration:none; color:inherit; transition:transform .15s ease, box-shadow .15s ease; } html[data-ui="re2026"] a.recent-sale-card:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(15,23,42,.14); } /* ---------- Slimmer header (better on mobile) ---------- */ html[data-ui="re2026"] .site-header{ padding:10px 0; } html[data-ui="re2026"] .brand-logo{ height:44px; } html[data-ui="re2026"] .site-header.scrolled .brand-logo{ height:40px; } @media (max-width:920px){ html[data-ui="re2026"] .site-header{ padding:8px 0; } html[data-ui="re2026"] .brand-logo{ height:32px; } /* drop the mobile drawer right under the now-slimmer header */ html[data-ui="re2026"] .nav-links--grouped{ top:50px; max-height:calc(100vh - 50px); } } /* desktop nav must never show a horizontal scroll track (the wider header gives the grouped menu room; kill any inherited overflow-x:auto) */ @media (min-width:921px){ html[data-ui="re2026"] .nav-links--grouped{ overflow:visible !important; } } /* ---------- Uniform section width: align every section to the full-width container ---------- */ html[data-ui="re2026"] .recent-sales-rail, html[data-ui="re2026"] .featured-banner-inner{ max-width:none; padding-left:clamp(20px,3vw,64px); padding-right:clamp(20px,3vw,64px); } /* ---------- Minimal hero search: drop the outer card, keep one clean input ---------- */ html[data-ui="re2026"] .ss-bar--hero{ background:transparent; border:none; box-shadow:none; padding:0; } html[data-ui="re2026"] .ss-bar--hero:focus-within{ background:transparent; border:none; box-shadow:none; } html[data-ui="re2026"] .ss-bar{ border:1px solid var(--line-2); box-shadow:var(--shadow-sm); } html[data-ui="re2026"] .ss-bar:focus-within{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-tint); } html[data-ui="re2026"] .re-hero-eyebrow{ background:none; border:none; padding:0; } html[data-ui="re2026"] .ss-eyebrow{ display:none; } /* redundant with the hero eyebrow */ html[data-ui="re2026"] .ss-hint{ display:none; } /* drop the "Try: …" line */ html[data-ui="re2026"] .ss-example-chip{ background:transparent; border:1px solid var(--line); } /* ---------- listings: ONE smart search ---------- Hide the legacy address/ZIP box + its Search button; the AI search above is the single search. #qInput stays in the DOM (display:none) so the existing ?q= query plumbing keeps working — the AI search navigates to listings.html?q=… and runSearch reads it. */ html[data-ui="re2026"] #searchForm .ls-q-wrap, html[data-ui="re2026"] #searchForm .ls-search-btn{ display:none !important; } html[data-ui="re2026"] #searchForm{ justify-content:flex-start; gap:10px; margin-top:6px; } /* ---------- Unify card tag/signal colors ---------- Was a rainbow: For Sale green, category orange/blue/purple, signals gold/green/blue. New system = ONE neutral (charcoal) for status/info + ONE brand accent (terracotta) reserved for the genuine callouts: your own listing, Open House, Price reduced. */ /* solid status/category pills -> neutral charcoal */ html[data-ui="re2026"] .sr-tag--sale, html[data-ui="re2026"] .sr-tag--rent, html[data-ui="re2026"] .sr-tag--commercial, html[data-ui="re2026"] .sr-tag--business, html[data-ui="re2026"] .sr-tag--listed, html[data-ui="re2026"] .listing-card-catbadge{ background:#1c2430 !important; color:#fff !important; } /* "Space Realty listing" ribbon -> brand terracotta (we DO want to flag our own) */ html[data-ui="re2026"] .sr-tag--own{ background:var(--brand,#0b1d3a) !important; color:#fff !important; } /* white signal pills: neutral border + label by default */ html[data-ui="re2026"] .sr-signal{ border-color:#d9e0ec !important; } html[data-ui="re2026"] .sr-signal, html[data-ui="re2026"] .sr-signal .sr-signal-label{ color:#3b3733 !important; } html[data-ui="re2026"] .sr-signal--hot, html[data-ui="re2026"] .sr-signal--fresh{ border-color:#d9e0ec !important; } html[data-ui="re2026"] .sr-signal--hot .sr-signal-label, html[data-ui="re2026"] .sr-signal--fresh .sr-signal-label{ color:#3b3733 !important; } /* callouts -> brand terracotta accent (Open House / Price reduced / own) */ html[data-ui="re2026"] .sr-signal--oh, html[data-ui="re2026"] .sr-signal--reduced, html[data-ui="re2026"] .sr-signal--drop, html[data-ui="re2026"] .sr-signal--own{ border-color:var(--brand,#0b1d3a) !important; background:#f0eee9 !important; } html[data-ui="re2026"] .sr-signal--oh .sr-signal-label, html[data-ui="re2026"] .sr-signal--reduced .sr-signal-label, html[data-ui="re2026"] .sr-signal--drop .sr-signal-label, html[data-ui="re2026"] .sr-signal--own .sr-signal-label{ color:var(--brand,#0b1d3a) !important; } /* ---------- 11. Respect reduced-motion for the hover transitions we add ---------- */ @media (prefers-reduced-motion:reduce){ html[data-ui="re2026"] *{ transition:none !important; } } /* ============================================================================ 12. Homepage declutter + polish — friend feedback 2026-06 Trim the home to a tight "main trunk"; supporting content lives on L2 pages. ============================================================================ */ /* 12a. Make the [hidden] attribute authoritative even when an element carries its own display rule (flex/grid). This is how we trim the homepage: add `hidden`. */ html[data-ui="re2026"] [hidden]{ display:none !important; } /* 12b. Stop homepage photos from jumping on load / window-resize (no preset size). Keep aspect ratio on resize; reserve the box for background-image tiles. */ html[data-ui="re2026"] main img{ max-width:100%; height:auto; } html[data-ui="re2026"] .neighborhood-photo, html[data-ui="re2026"] .featured-banner-photo, html[data-ui="re2026"] .recent-sale-photo{ background-size:cover; background-position:center center; } /* 12c. Neighborhoods → swipeable horizontal carousel (was a static grid). Each card already links to its own neighborhood page for the full write-up. */ html[data-ui="re2026"] .neighborhood-carousel{ display:flex !important; flex-wrap:nowrap; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:4px 2px 20px; margin:0; scrollbar-width:thin; } html[data-ui="re2026"] .neighborhood-carousel > .neighborhood-card{ scroll-snap-align:start; flex:0 0 clamp(250px, 31%, 350px); margin:0; } html[data-ui="re2026"] .neighborhood-carousel::-webkit-scrollbar{ height:8px; } html[data-ui="re2026"] .neighborhood-carousel::-webkit-scrollbar-thumb{ background:rgba(28,36,48,.18); border-radius:99px; } html[data-ui="re2026"] .neighborhood-carousel::-webkit-scrollbar-track{ background:transparent; } @media (max-width:640px){ /* one-and-a-bit card visible on phones → obviously swipeable */ html[data-ui="re2026"] .neighborhood-carousel > .neighborhood-card{ flex-basis:80%; } } /* 12d. "Meet the full team" link block */ html[data-ui="re2026"] .team-seeall{ width:100%; }