/* ========================================================================== PlotFact — components. Every colour comes from tokens.css. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* Wins over component rules that set `display`. */ [hidden] { display: none !important; } /* Audience gating (see layout.js). JS is authoritative; these rules only suppress the flash before it runs, using the pre-paint hint in . Signed-out CTAs stay visible until we KNOW you're signed in — the majority of visitors are logged out and must never wait for their call to action. */ html[data-auth-state="free"] [data-auth="signed-out"], html[data-auth-state="premium"] [data-auth="signed-out"], html[data-auth-state="in"] [data-auth="signed-out"], html[data-auth-state="out"] [data-auth="signed-in"], html[data-auth-state="out"] [data-auth="free"], html[data-auth-state="out"] [data-auth="premium"] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--text-primary); background: var(--bg-secondary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis-weight: none; } a { color: var(--accent-primary); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); color: var(--text-primary); font-weight: 700; margin: 0 0 var(--sp-3); } h1 { font-size: var(--fs-2xl); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-md); } p { margin: 0 0 var(--sp-4); } p:last-child { margin-bottom: 0; } img, svg { max-width: 100%; } strong, b { font-weight: 650; } :focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; border-radius: var(--radius-sm); } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-4); } .prose { max-width: var(--maxw-prose); } /* The page shell. `flush` lets a page (the landing hero) run full-bleed while its inner .container blocks keep the same measure as every other page. */ main.site-main { padding-top: var(--sp-5); padding-bottom: var(--sp-6); min-height: 50vh; } main.site-main.flush { max-width: none; padding: 0 0 var(--sp-6); } main.site-main.flush > .container { padding-left: var(--sp-4); padding-right: var(--sp-4); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--sp-4); top: -60px; z-index: 100; background: var(--accent-primary); color: var(--text-inverse); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: 600; transition: top 140ms ease; } .skip-link:focus { top: var(--sp-3); text-decoration: none; } /* -------------------------------------------------------------------------- Header / nav -------------------------------------------------------------------------- */ .site-header { background: var(--bg-primary); border-bottom: 1px solid var(--border-light); position: sticky; top: 0; z-index: 50; } .site-header .container { display: flex; align-items: center; gap: var(--sp-4); height: 62px; } .brand { display: inline-flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; } .brand:hover { text-decoration: none; } /* Theme-aware wordmark: light art on light ground, dark art on dark. Mirrors the token theme logic (an explicit [data-theme] wins; otherwise follow OS). */ .brand-logo { display: block; height: 30px; width: auto; } .brand-logo-dark { display: none; } [data-theme="dark"] .brand-logo-light { display: none; } [data-theme="dark"] .brand-logo-dark { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-logo-light { display: none; } :root:not([data-theme="light"]) .brand-logo-dark { display: block; } } .nav { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); } .nav a { color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 500; padding: var(--sp-1) 0; position: relative; } .nav a:hover { color: var(--text-primary); text-decoration: none; } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent-primary); transform: scaleX(0); transform-origin: left; transition: transform 160ms ease; } .nav a:hover::after { transform: scaleX(1); } .nav a.nav-cta { color: var(--text-inverse); } .nav a.nav-cta:hover { color: var(--text-inverse); text-decoration: none; } .nav a.nav-cta::after { display: none; } /* Sits OUTSIDE the collapsible menu so it stays visible on mobile rather than hiding behind the hamburger. The extra left margin keeps it from reading as just another nav link. */ .nav-upgrade { flex: 0 0 auto; white-space: nowrap; padding: var(--sp-2) var(--sp-4); margin-left: var(--sp-2); } @media (max-width: 719px) { .nav-upgrade { margin-left: 0; padding: var(--sp-2) var(--sp-3); } } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid var(--border-light); background: var(--bg-primary); border-radius: var(--radius-md); color: var(--text-secondary); cursor: pointer; transition: color 120ms ease, border-color 120ms ease, background 120ms ease; } .icon-btn:hover { color: var(--accent-primary); border-color: var(--border-medium); } /* The toggle shows the theme you'd switch TO, so the icon must follow the resolved theme (explicit choice first, OS preference otherwise). */ #theme-toggle .icon-sun { display: none; } [data-theme="dark"] #theme-toggle .icon-sun { display: block; } [data-theme="dark"] #theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]) #theme-toggle .icon-moon { display: none; } } #menu-toggle { display: none; } @media (max-width: 719px) { #menu-toggle { display: inline-flex; } } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; letter-spacing: 0; padding: var(--sp-2) var(--sp-4); min-height: 38px; border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; background: var(--bg-tertiary); color: var(--text-primary); transition: background 130ms ease, border-color 130ms ease, color 130ms ease, box-shadow 130ms ease, transform 70ms ease; } .btn:hover { background: var(--bg-sunken); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent-primary); color: var(--text-inverse); box-shadow: var(--shadow-light); } .btn-primary:hover { background: var(--accent-primary-hover); color: var(--text-inverse); } .btn-outline { background: var(--bg-elevated); border-color: var(--border-input); color: var(--text-primary); } .btn-outline:hover { border-color: var(--accent-primary); color: var(--accent-primary); background: var(--bg-elevated); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); } .btn-ghost:hover { background: var(--bg-tertiary); color: var(--text-primary); } .btn-lg { font-size: var(--fs-base); padding: var(--sp-3) var(--sp-5); min-height: 48px; } .btn-block { width: 100%; } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; } .btn[disabled]:hover { background: var(--bg-tertiary); } .btn-primary[disabled]:hover { background: var(--accent-primary); } /* -------------------------------------------------------------------------- Cards + the plat annotation label -------------------------------------------------------------------------- */ .card { background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-light); padding: var(--sp-5); } .card + .card { margin-top: var(--sp-4); } .card h2 { font-size: var(--fs-lg); } .card-accent { border-color: var(--accent-primary); box-shadow: var(--shadow-medium); } /* A section label annotates a boundary in the data the way a plat annotates a parcel line: fixed-width, tracked, preceded by a short tick. */ .section-label { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--text-muted); margin-bottom: var(--sp-3); } .section-label::before { content: ""; flex: 0 0 auto; width: 12px; height: 2px; background: var(--accent-primary); border-radius: 1px; } .section-label > .asof-tag { margin-left: auto; } .eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--accent-primary); } /* -------------------------------------------------------------------------- Chips -------------------------------------------------------------------------- */ .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .chip { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 3px var(--sp-3); border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.01em; background: var(--chip-bg); color: var(--chip-text); border: 1px solid transparent; } .chip svg { width: 14px; height: 14px; } .chip-warning { background: var(--warning-bg); color: var(--warning); } .chip-error { background: var(--error-bg); color: var(--error); } .chip-success { background: var(--success-bg); color: var(--success); } .chip-info { background: var(--info-bg); color: var(--info); } /* -------------------------------------------------------------------------- Motivation score — ONE ramp, shared by the badge and the map pins -------------------------------------------------------------------------- */ .score-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 2px var(--sp-2); border-radius: var(--radius-sm); font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; background: var(--score-low-bg); color: var(--score-low); } .score-badge.sb-high { background: var(--score-high-bg); color: var(--score-high); } .score-badge.sb-med { background: var(--score-med-bg); color: var(--score-med); } .score-badge.sb-low { background: var(--score-low-bg); color: var(--score-low); } /* -------------------------------------------------------------------------- Stat tiles -------------------------------------------------------------------------- */ .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } @media (min-width: 720px) { .stat-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } } .stat-tile { background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--sp-4); position: relative; overflow: hidden; } .stat-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent-primary); opacity: 0.75; } .stat-tile .stat-value { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: var(--tr-snug); color: var(--text-primary); line-height: 1.1; } .stat-tile .stat-label { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: var(--sp-1); } /* -------------------------------------------------------------------------- Definition rows -------------------------------------------------------------------------- */ .dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-3) var(--sp-5); margin: 0; } .dl dt { color: var(--text-muted); font-size: var(--fs-sm); font-family: var(--font-mono); font-weight: 400; } .dl dd { margin: 0; color: var(--text-primary); font-size: var(--fs-sm); } @media (max-width: 519px) { .dl { grid-template-columns: 1fr; gap: var(--sp-1); } .dl dd { margin-bottom: var(--sp-3); } } /* -------------------------------------------------------------------------- Tables — the ledger -------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } table.data th, table.data td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-light); white-space: nowrap; } table.data th { color: var(--text-muted); font-weight: 600; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; } table.data tr:hover td { background: var(--bg-secondary); } table.data tr:last-child td { border-bottom: 0; } .text-right { text-align: right; } td.text-right, th.text-right { font-variant-numeric: tabular-nums; font-family: var(--font-mono); } th.text-right { font-family: var(--font-mono); } .cell-strong { font-weight: 600; color: var(--text-primary); } .cell-muted { color: var(--text-muted); } .card table.data tr[data-reid] { cursor: pointer; } /* -------------------------------------------------------------------------- Inputs / search -------------------------------------------------------------------------- */ .search-box { position: relative; } .search-input { width: 100%; font-family: var(--font-sans); font-size: var(--fs-md); padding: var(--sp-3) var(--sp-5); border: 1px solid var(--border-input); border-radius: var(--radius-pill); background: var(--bg-input); color: var(--text-primary); transition: border-color 120ms ease, box-shadow 120ms ease; } .search-input::placeholder { color: var(--text-muted); opacity: 1; } .search-input:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--focus-ring); } .search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-strong); overflow: hidden; } .search-results:empty { display: none; } .search-result { display: block; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-light); color: var(--text-primary); cursor: pointer; } .search-result:last-child { border-bottom: 0; } .search-result:hover, .search-result[aria-selected="true"] { background: var(--select-bg); text-decoration: none; } /* Address then meta on their own lines — run inline they read as one string ("100 MAIN STFIDELITY BANK"). */ .search-result .sr-addr { display: block; font-weight: 600; line-height: 1.35; } .search-result .sr-meta { display: block; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.35; } /* -------------------------------------------------------------------------- Landing — the plat-signal hero The parcel field is the product's own subject: we watch the parcels every day, and catch the one that changed. -------------------------------------------------------------------------- */ .plat-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border-light); background: radial-gradient(120% 80% at 78% 8%, var(--accent-quiet) 0%, transparent 58%), var(--bg-primary); } .plat-hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; } .plat-hero-canvas svg { width: 100%; height: 100%; display: block; } .plat-hero-canvas::after { /* Fade the linework out under the text so the copy always wins. */ content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--bg-primary) 0%, var(--bg-primary) 44%, transparent 74%); } .plat-line { fill: none; stroke: var(--accent-secondary); stroke-width: 1; opacity: 0.26; } .plat-road { fill: none; stroke: var(--border-strong); stroke-width: 6; opacity: 0.22; stroke-linecap: round; } .plat-mon { fill: var(--accent-secondary); opacity: 0.4; } .plat-lot { fill: var(--accent-primary); stroke: var(--accent-primary); stroke-width: 1.5; stroke-linejoin: round; fill-opacity: 0; stroke-opacity: 0; animation: platSignal 12s ease-in-out infinite; } .plat-lot:nth-of-type(2) { animation-delay: 4s; } .plat-lot:nth-of-type(3) { animation-delay: 8s; } @keyframes platSignal { 0%, 4% { fill-opacity: 0; stroke-opacity: 0; } 10% { fill-opacity: 0.16; stroke-opacity: 1; } 26% { fill-opacity: 0.16; stroke-opacity: 1; } 34%, 100% { fill-opacity: 0; stroke-opacity: 0; } } /* On narrow screens the copy spans the full width, so the diagonal fade can't keep the linework off the text — dial the plat down instead. */ @media (max-width: 719px) { .plat-line { opacity: 0.13; } .plat-road { opacity: 0.12; } .plat-mon { opacity: 0.22; } .plat-hero-canvas::after { background: linear-gradient(180deg, var(--bg-primary) 0%, transparent 78%); } } .plat-hero-inner { position: relative; padding: var(--sp-9) 0 var(--sp-8); max-width: 40rem; } @media (max-width: 719px) { .plat-hero-inner { padding: var(--sp-7) 0 var(--sp-7); } } .display-1 { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 800; font-stretch: 108%; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); margin: var(--sp-4) 0 0; text-wrap: balance; } .display-1 em { font-style: normal; color: var(--accent-primary); } .lede { font-size: var(--fs-md); color: var(--text-secondary); margin: var(--sp-5) 0 0; max-width: 34rem; } .hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-6); } .hero-fineprint { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-4); } /* Generic marketing section rhythm (replaces per-element inline margins) */ .section { padding: var(--sp-8) 0; } .section-tight { padding: var(--sp-7) 0; } .section + .section { border-top: 1px solid var(--border-light); } .section-head { max-width: var(--maxw-prose); margin-bottom: var(--sp-5); } .section-head h2 { margin-bottom: var(--sp-2); } .section-head p { color: var(--text-secondary); margin: 0; } .grid-cards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .step-card { display: flex; flex-direction: column; height: 100%; } .step-card h3 { margin: var(--sp-2) 0 var(--sp-2); font-size: var(--fs-md); } .step-card p { color: var(--text-secondary); font-size: var(--fs-sm); margin: 0; } .step-num { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; color: var(--accent-primary); letter-spacing: var(--tr-wide); } /* Legacy hero (kept for the orphaned index.html) */ .hero { padding: var(--sp-8) 0; text-align: center; } .hero h1 { font-size: var(--fs-2xl); } .hero p { color: var(--text-secondary); font-size: var(--fs-md); max-width: 38rem; margin: 0 auto var(--sp-5); } .hero .search-box { max-width: 40rem; margin: 0 auto; } /* -------------------------------------------------------------------------- Pricing -------------------------------------------------------------------------- */ .price-grid { display: grid; gap: var(--sp-4); align-items: stretch; grid-template-columns: 1fr; max-width: 58rem; } @media (min-width: 800px) { .price-grid { grid-template-columns: 1fr 1fr; } } .price-card { display: flex; flex-direction: column; position: relative; } .price-amount { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; letter-spacing: var(--tr-tight); line-height: 1; margin: 0; font-variant-numeric: tabular-nums; color: var(--text-primary); } .price-sub { color: var(--text-muted); font-size: var(--fs-sm); margin: var(--sp-2) 0 0; } .price-was { color: var(--text-muted); font-weight: 600; font-size: 0.55em; text-decoration-thickness: 2px; margin-right: var(--sp-2); vertical-align: middle; } .price-launch { color: var(--accent-primary); font-weight: 600; } /* Saved-search email alerts (account page) */ .btn-sm { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); } .alert-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-light); } .alert-row:last-child { border-bottom: 0; } .alert-name { font-weight: 600; color: var(--text-primary); } .alert-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--sp-1); line-height: 1.5; } .alert-actions { display: flex; gap: var(--sp-2); flex: 0 0 auto; } .alert-actions .chip-btn[aria-pressed="true"] { border-color: var(--accent-primary); color: var(--accent-primary); } .price-list { list-style: none; padding: 0; margin: var(--sp-5) 0 0; flex: 1 1 auto; } .price-list li { position: relative; padding-left: var(--sp-6); margin-bottom: var(--sp-3); font-size: var(--fs-sm); color: var(--text-secondary); } .price-list li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 11px; height: 6px; border-left: 2px solid var(--accent-primary); border-bottom: 2px solid var(--accent-primary); transform: rotate(-45deg); } .price-list li.is-soon { color: var(--text-muted); } .price-list li.is-soon::before { border-color: var(--border-medium); } .price-list li strong { color: var(--text-primary); } .price-tag { position: absolute; top: calc(-1 * var(--sp-3)); right: var(--sp-5); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-wide); background: var(--accent-primary); color: var(--text-inverse); padding: 2px var(--sp-3); border-radius: var(--radius-pill); } .price-foot { margin-top: var(--sp-5); } /* Current-plan marker on the pricing card. */ .plan-current { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--text-muted); margin: 0 0 var(--sp-3); } .plan-current::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex: 0 0 auto; } .plan-current.is-active { color: var(--accent-primary); } .plan-current.is-active::before { background: var(--accent-primary); } /* -------------------------------------------------------------------------- FAQ -------------------------------------------------------------------------- */ .faq-item { border-bottom: 1px solid var(--border-light); padding: var(--sp-4) 0; } .faq-item:last-child { border-bottom: 0; } .faq-item h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-base); } .faq-item p { color: var(--text-secondary); font-size: var(--fs-sm); margin: 0; } /* -------------------------------------------------------------------------- Property page -------------------------------------------------------------------------- */ .property-head { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: flex-start; padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--border-light); } .property-head-main { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; } .property-head h1 { font-size: var(--fs-xl); margin-bottom: 0; line-height: var(--lh-tight); } .property-sub { color: var(--text-secondary); font-size: var(--fs-sm); font-family: var(--font-mono); } .property-head-aside { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; } .head-score { display: inline-flex; align-items: center; gap: var(--sp-2); } .head-score-meta { display: flex; flex-direction: column; line-height: 1.2; } .head-score-meta strong { color: var(--text-primary); font-size: var(--fs-sm); } .head-score-meta span { color: var(--text-muted); font-size: var(--fs-xs); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; } .score-badge.lg { font-size: var(--fs-lg); min-width: 76px; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md); white-space: nowrap; } .score-badge.lg small { font-size: var(--fs-sm); font-weight: 400; opacity: 0.7; } /* A badge is already a distinct object — the dotted tooltip underline just makes it look damaged. Keep the help cursor, drop the rule. */ .score-badge[data-tip] { text-decoration: none; } /* minmax(0, 1fr), not 1fr: a grid item defaults to min-width:auto, so a track sized 1fr still refuses to shrink below its content's min-content width. One unbreakable string (a long situs address, a mono REID) then pushes the column past the viewport and the whole page scrolls sideways. Measured on the property page at 320px: the column held 359px inside a 320px viewport. */ .grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } @media (min-width: 900px) { .grid-2 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } /* Only the right rail pins — the main column is taller than the viewport, so making it sticky too does nothing but complicate scrolling. */ .grid-2 > .stack:last-child { position: sticky; top: calc(62px + var(--sp-4)); } } .hero-stat { display: flex; gap: var(--sp-3); align-items: baseline; flex-wrap: wrap; margin-bottom: var(--sp-2); } .hero-num { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; line-height: 1; letter-spacing: var(--tr-tight); font-variant-numeric: tabular-nums; color: var(--text-primary); } .hero-unit { color: var(--text-muted); font-size: var(--fs-md); font-weight: 600; margin-left: 2px; } .hero-note { color: var(--text-muted); font-size: var(--fs-sm); margin: var(--sp-3) 0 0; } .factor-list { list-style: none; padding: 0; margin: var(--sp-4) 0 0; } .factor-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-light); font-size: var(--fs-sm); } .factor-list li:last-child { border-bottom: 0; } .factor-list .pts { color: var(--accent-primary); font-weight: 600; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .mao-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-3); } .mao-field { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-secondary); font-size: var(--fs-sm); } .mao-out { margin: 0; font-size: var(--fs-sm); } .mao-out strong { font-size: var(--fs-md); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .mini-input { height: 38px; width: 96px; font-family: var(--font-mono); font-size: var(--fs-sm); padding: 0 var(--sp-3); border: 1px solid var(--border-input); border-radius: var(--radius-md); background: var(--bg-input); color: var(--text-primary); } .mini-input:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--focus-ring); } /* Data freshness strip */ .data-freshness { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); } .data-freshness:empty { display: none; } .fresh-lead { text-transform: uppercase; letter-spacing: var(--tr-wide); font-weight: 600; color: var(--text-muted); } .fresh-item { font-weight: 600; color: var(--text-primary); } .fresh-item b { font-weight: 600; color: var(--text-primary); } .fresh-sep { color: var(--border-medium); } .fresh-detail { margin-left: var(--sp-2); color: var(--text-muted); text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; } /* -------------------------------------------------------------------------- Tooltip — always the custom one; never the native title attribute -------------------------------------------------------------------------- */ .tooltip-pop { position: fixed; z-index: 1000; display: none; max-width: 320px; background: var(--text-primary); color: var(--bg-primary); font-family: var(--font-sans); font-size: var(--fs-xs); line-height: 1.5; font-weight: 400; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); box-shadow: var(--shadow-strong); pointer-events: none; white-space: pre-line; opacity: 0; transition: opacity 90ms ease; } .tooltip-pop.show { opacity: 1; } [data-tip] { cursor: help; text-decoration: underline dotted var(--text-muted); text-underline-offset: 2px; } .asof-tag { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--radius-pill); padding: 1px var(--sp-2); white-space: nowrap; } /* -------------------------------------------------------------------------- Map -------------------------------------------------------------------------- */ .map-wrap { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-light); } #parcel-map { height: 340px; width: 100%; background: var(--bg-tertiary); } .map-empty { height: 340px; display: flex; align-items: center; justify-content: center; /* text-secondary, not muted: muted on this surface is 4.2:1 — below AA, and this is a message the reader actually needs. */ text-align: center; padding: var(--sp-4); color: var(--text-secondary); font-size: var(--fs-sm); background: var(--bg-tertiary); } .map-toggle { display: inline-flex; gap: 2px; margin: 0 0 var(--sp-3); padding: 3px; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--radius-md); } .map-toggle button { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 600; height: 32px; padding: 0 var(--sp-3); border: 0; background: transparent; color: var(--text-secondary); border-radius: var(--radius-sm); cursor: pointer; transition: background 120ms ease, color 120ms ease; } .map-toggle button:hover { color: var(--text-primary); } .map-toggle button[aria-pressed="true"] { background: var(--accent-primary); color: var(--text-inverse); } .parcel-svg { width: 100%; height: 340px; background: var(--bg-tertiary); display: block; } .parcel-svg polygon { fill: var(--accent-primary); fill-opacity: 0.26; stroke: var(--accent-primary); stroke-width: 2; } /* -------------------------------------------------------------------------- Lock / teaser -------------------------------------------------------------------------- */ .lock-card { text-align: center; border-color: var(--accent-primary); } .lock-card .lock-icon { color: var(--accent-primary); margin-bottom: var(--sp-2); } .lock-card h2 { font-size: var(--fs-md); } .lock-card p { font-size: var(--fs-sm); } .blurred { filter: blur(5px); user-select: none; pointer-events: none; } /* -------------------------------------------------------------------------- Notices -------------------------------------------------------------------------- */ .notice { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); font-size: var(--fs-sm); border: 1px solid var(--border-light); background: var(--bg-elevated); color: var(--text-secondary); } .notice a { font-weight: 600; } .notice-info { background: var(--info-bg); color: var(--info); border-color: transparent; } .notice-info a { color: var(--info); } .notice-warning { background: var(--warning-bg); color: var(--warning); border-color: transparent; } .notice-warning a { color: var(--warning); } .notice-error { background: var(--error-bg); color: var(--error); border-color: transparent; } .notice-error a { color: var(--error); } .dev-banner { background: var(--warning-bg); color: var(--warning); border-bottom: 1px solid var(--border-light); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; text-align: center; padding: var(--sp-2) var(--sp-4); text-transform: uppercase; letter-spacing: 0.05em; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { margin-top: var(--sp-8); padding: var(--sp-7) 0 var(--sp-6); border-top: 1px solid var(--border-light); color: var(--text-muted); font-size: var(--fs-sm); background: var(--bg-primary); } .footer-top { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp-5); } .footer-brand { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 22rem; } .footer-tag { color: var(--text-secondary); font-size: var(--fs-sm); margin: 0; } .footer-nav { display: flex; flex-wrap: wrap; gap: var(--sp-6); } .footer-col { display: flex; flex-direction: column; gap: var(--sp-2); } .footer-col .section-label { margin-bottom: var(--sp-1); } .footer-col a { color: var(--text-secondary); font-size: var(--fs-sm); } .footer-col a:hover { color: var(--accent-primary); text-decoration: none; } .footer-legal { border-top: 1px solid var(--border-light); padding-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); justify-content: space-between; } .footer-legal p { margin: 0; font-size: var(--fs-xs); max-width: 46rem; } .footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-3); } .footer-links a { color: var(--text-muted); font-size: var(--fs-xs); } .consent-note { font-size: var(--fs-xs); } /* -------------------------------------------------------------------------- Utilities -------------------------------------------------------------------------- */ .muted { color: var(--text-muted); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; } .stack > * + * { margin-top: var(--sp-4); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .center { text-align: center; } .spinner { display: inline-block; vertical-align: -3px; width: 18px; height: 18px; border: 2px solid var(--border-medium); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- Responsive nav -------------------------------------------------------------------------- */ @media (min-width: 720px) { .nav .nav-collapsible { display: flex; align-items: center; gap: var(--sp-4); } } @media (max-width: 719px) { .nav .nav-collapsible { display: none; position: absolute; top: 62px; right: 0; left: 0; flex-direction: column; align-items: stretch; background: var(--bg-primary); border-bottom: 1px solid var(--border-light); padding: var(--sp-3) var(--sp-4); gap: var(--sp-1); box-shadow: var(--shadow-medium); } .nav.open .nav-collapsible { display: flex; } .nav .nav-collapsible a { padding: var(--sp-3) 0; font-size: var(--fs-base); } .nav .nav-collapsible a::after { display: none; } } /* -------------------------------------------------------------------------- Deal Finder (legacy /finder page) -------------------------------------------------------------------------- */ .finder-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; } @media (min-width: 900px) { .finder-layout { grid-template-columns: 290px 1fr; } } .filter-group { margin-bottom: var(--sp-4); } .filter-group > .section-label { margin-bottom: var(--sp-2); } .check { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0; cursor: pointer; font-size: var(--fs-sm); color: var(--text-secondary); } .check:hover { color: var(--text-primary); } .check input { accent-color: var(--accent-primary); width: 16px; height: 16px; flex: 0 0 auto; } .range { display: flex; gap: var(--sp-2); align-items: center; } .range .search-input { width: 100%; min-width: 0; } .finder-count { color: var(--text-muted); font-size: var(--fs-sm); } .finder-msg { color: var(--text-muted); font-size: var(--fs-sm); min-height: 1.2em; } /* ========================================================================== Explore surface ========================================================================== */ body.explore-page main.site-main { max-width: min(1560px, 100%); } .explore-bar { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; position: relative; z-index: 30; } .explore-search { position: relative; flex: 1 1 320px; max-width: 520px; } .explore-search-icon { position: absolute; left: var(--sp-3); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; } .explore-search .search-input { width: 100%; height: 40px; font-size: var(--fs-sm); padding: 0 var(--sp-4) 0 calc(var(--sp-6) + var(--sp-1)); border-radius: var(--radius-md); background: var(--bg-elevated); } .explore-search .search-results { z-index: 40; } .explore-controls { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; } .explore-controls .map-toggle { margin: 0; } .explore-controls .btn { height: 40px; } .control { height: 40px; font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500; padding: 0 var(--sp-3); border: 1px solid var(--border-input); border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--text-primary); cursor: pointer; transition: border-color 120ms ease, box-shadow 120ms ease; } .control:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--focus-ring); } .control-select { position: relative; display: inline-flex; } .control-select select.control { appearance: none; -webkit-appearance: none; padding-right: calc(var(--sp-5) + var(--sp-3)); max-width: 200px; } .control-select::after { content: ""; position: absolute; right: var(--sp-3); top: 50%; width: 7px; height: 7px; transform: translateY(-70%) rotate(45deg); border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); pointer-events: none; } .explore-chipbar { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); } .chip-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; } .chip-row-label { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--text-muted); display: inline-flex; align-items: center; gap: var(--sp-2); margin-right: var(--sp-1); } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-primary); flex: 0 0 auto; animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--accent-ring); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .chip-sep { width: 1px; align-self: stretch; background: var(--border-light); margin: 2px var(--sp-1); } .chip-btn { display: inline-flex; align-items: center; gap: var(--sp-1); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 500; padding: var(--sp-1) var(--sp-3); min-height: 30px; cursor: pointer; border: 1px solid var(--border-medium); border-radius: var(--radius-pill); background: var(--bg-elevated); color: var(--text-secondary); text-decoration: none; transition: border-color 120ms ease, color 120ms ease, background 120ms ease; } .chip-btn:hover { border-color: var(--accent-primary); color: var(--text-primary); } .chip-btn svg { width: 14px; height: 14px; } .chip-btn[aria-pressed="true"] { background: var(--accent-quiet); color: var(--accent-contrast); border-color: var(--accent-primary); font-weight: 600; } .chip-btn-accent { border-style: dashed; } .chip-btn-signal[aria-pressed="true"] { background: var(--accent-quiet); color: var(--accent-contrast); border-color: var(--accent-primary); } .chip-btn[aria-expanded="true"] { background: var(--accent-quiet); color: var(--accent-contrast); border-color: var(--accent-primary); border-style: solid; font-weight: 600; } .chip-btn .chev { margin-left: 1px; } /* Reports launcher */ .reports-menu { position: relative; display: inline-flex; } .reports-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 45; min-width: 292px; max-height: 72vh; overflow-y: auto; padding: var(--sp-2); background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-strong); } .reports-panel[hidden] { display: none; } .reports-group { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--text-muted); font-weight: 600; padding: var(--sp-3) var(--sp-2) var(--sp-1); } .reports-group:first-child { padding-top: var(--sp-1); } .report-item { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; font-family: var(--font-sans); padding: var(--sp-2) var(--sp-3); border: 0; background: transparent; border-radius: var(--radius-sm); cursor: pointer; color: var(--text-primary); transition: background 120ms ease; } .report-item:hover { background: var(--accent-quiet); } .ri-title { font-size: var(--fs-sm); font-weight: 600; } .ri-desc { font-size: var(--fs-xs); color: var(--text-muted); } .control-select-block { display: flex; } .control-select-block .control { width: 100%; } .explore-filters { margin-top: var(--sp-3); } .explore-filter-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } /* Owner & equity holds three controls including a side-by-side pair, so it needs two columns' worth of room or the placeholders truncate. */ @media (min-width: 900px) { .filter-group-wide { grid-column: span 2; } } .explore-filters .filter-group { margin-bottom: 0; min-width: 0; } .explore-filters .search-input { font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-4); min-width: 0; } .filter-actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; } .explore-filters .filter-actions { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border-light); } .explore-statusline { display: flex; gap: var(--sp-3); align-items: baseline; flex-wrap: wrap; margin: var(--sp-4) 0 var(--sp-2); min-height: 1.4em; } .explore-statusline .finder-count { color: var(--text-primary); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; } .explore-statusline .finder-msg { color: var(--text-muted); font-size: var(--fs-sm); } .explore-split { position: relative; display: grid; gap: var(--sp-3); align-items: stretch; height: calc(100vh - 262px); min-height: 540px; } .explore-split.view-split { grid-template-columns: minmax(360px, 470px) 1fr; } .explore-split.view-list { grid-template-columns: minmax(0, 1fr); } .explore-split.view-map { grid-template-columns: minmax(0, 1fr); } .explore-split.view-list .explore-map { display: none; } .explore-split.view-map .explore-list { display: none; } .explore-list { position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: var(--bg-primary); box-shadow: var(--shadow-light); } .explore-list-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; } .explore-list-scroll::-webkit-scrollbar { width: 11px; height: 11px; } .explore-list-scroll::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: var(--radius-pill); border: 3px solid var(--bg-primary); } /* The results table is wider than the split panel — it must SCROLL, not clip. */ .explore-list .table-wrap { overflow-x: auto; } .explore-list table.data { font-size: var(--fs-sm); } .explore-list table.data thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-primary); color: var(--text-muted); font-weight: 600; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; padding: var(--sp-3); border-bottom: 1px solid var(--border-medium); white-space: nowrap; } .explore-list table.data tbody td { padding: var(--sp-3); border-bottom: 1px solid var(--border-light); vertical-align: middle; white-space: nowrap; } .explore-list table.data tbody tr { cursor: pointer; transition: background 120ms ease; } .explore-list table.data tbody tr:hover td { background: var(--bg-secondary); } .explore-list table.data tbody tr.is-sel td { background: var(--select-bg); } /* In split view the table is wider than the panel, so it scrolls sideways. Pin the first column — the row's identity in every mode (score, brand, address) — so you never lose track of which row you're reading. */ .explore-list table.data th:first-child, .explore-list table.data td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg-primary); box-shadow: 1px 0 0 var(--border-light); } .explore-list table.data thead th:first-child { z-index: 3; } .explore-list table.data tbody tr:hover td:first-child { background: var(--bg-secondary); } .explore-list table.data tbody tr.is-sel td:first-child { background: var(--select-bg); box-shadow: inset 3px 0 0 var(--accent-primary), 1px 0 0 var(--border-light); } .explore-list .notice { margin: var(--sp-3); } .skel { display: block; height: 12px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 37%, var(--bg-tertiary) 63%); background-size: 400% 100%; animation: skel 1.4s ease infinite; } @keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .skel-row td { cursor: default; } .pager { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; flex: 0 0 auto; padding: var(--sp-2) var(--sp-3); background: var(--bg-primary); border-top: 1px solid var(--border-light); } .pager .muted { font-family: var(--font-mono); font-size: var(--fs-xs); } .pager .btn { min-height: 32px; padding: var(--sp-1) var(--sp-3); } .explore-map { position: relative; isolation: isolate; min-width: 0; } .explore-map-wrap { height: 100%; } #finder-map.explore-map-wrap { height: 100%; min-height: 480px; border-radius: var(--radius-lg); } .explore-map .map-toggle { position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 5; margin: 0; background: var(--bg-elevated); box-shadow: var(--shadow-medium); } .panel-step { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1200; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 48px; border: 1px solid var(--border-light); background: var(--bg-elevated); color: var(--text-secondary); cursor: pointer; box-shadow: var(--shadow-medium); transition: color 120ms ease, border-color 120ms ease; } .panel-step:hover { color: var(--accent-primary); border-color: var(--border-medium); } .panel-step-right { right: 0; border-right: none; border-radius: var(--radius-md) 0 0 var(--radius-md); } .panel-step-left { left: 0; border-left: none; border-radius: 0 var(--radius-md) var(--radius-md) 0; } /* Detail drawer */ .explore-drawer { position: absolute; top: 0; left: 0; bottom: 0; z-index: 20; width: min(460px, 100%); background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-strong); overflow-y: auto; transform: translateX(-12px); opacity: 0; transition: transform 150ms ease, opacity 150ms ease; } .explore-drawer[hidden] { display: none; } .explore-drawer.show { transform: translateX(0); opacity: 1; } .drawer-head { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; padding: var(--sp-2); background: var(--bg-elevated); border-bottom: 1px solid var(--border-light); } .drawer-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); } .drawer-body h2 { font-size: var(--fs-lg); margin: 0 0 var(--sp-1); } .drawer-sub { color: var(--text-secondary); font-size: var(--fs-sm); margin-bottom: var(--sp-2); font-family: var(--font-mono); } .drawer-facts { color: var(--text-secondary); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-4); } .drawer-score { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-3); } .drawer-score .num { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: var(--tr-tight); } .drawer-body .dl { margin-top: var(--sp-4); gap: var(--sp-3) var(--sp-5); } .drawer-body .btn-primary { width: 100%; margin-top: var(--sp-5); } @media (max-width: 899px) { .explore-split { height: auto; min-height: 0; } .explore-split.view-split { grid-template-columns: minmax(0, 1fr); } .explore-split.view-split .explore-map { display: none; } .explore-list { max-height: 70vh; } #finder-map.explore-map-wrap { height: 70vh; } .explore-drawer { position: fixed; width: 100%; border-radius: 0; } .explore-search { max-width: none; } .panel-step { display: none; } } /* -------------------------------------------------------------------------- Motion preferences — honoured everywhere, not just the hero -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- Touch devices -------------------------------------------------------------------------- */ /* iOS Safari ZOOMS THE PAGE when a focused form control's font-size is under 16px, and does not zoom back out. Tapping the Explore search box at 14px threw the whole map surface out of frame and left the visitor pinching to recover. Scoped to coarse pointers so the desktop type scale is untouched. */ @media (pointer: coarse) { /* !important because component rules (.explore-search .search-input, .control-select select.control) set --fs-sm and out-specify a bare element selector. This must win everywhere or the zoom still fires. */ input, select, textarea, .explore-search .search-input, .explore-filters .search-input, .control-select select.control { font-size: 16px !important; } /* Discrete controls to a 44px touch target (Apple HIG). Deliberately NOT applied to inline links inside prose — padding a link in a sentence to 44px wrecks the line rhythm, and a word in running text is a target people hit accurately anyway. Only standalone controls get the bump. */ .btn { min-height: 44px; } .icon-btn { width: 44px; height: 44px; } .chip-btn { min-height: 44px; } .map-toggle button { min-height: 44px; } input.search-input, .explore-search .search-input { min-height: 44px; } select.control, .control-select select.control { min-height: 44px; } /* .pager .btn pins 32px for the desktop density; touch needs the full target. */ .pager .btn { min-height: 44px; } /* Footer navigation is a stack of links, not prose — on a phone these are genuine tap targets and sat at 22px. Padding rather than font-size keeps the type scale intact. */ .footer-col a { padding: var(--sp-2) 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } /* The lit parcels are meaningful, not decorative — hold them lit. */ .plat-lot { animation: none; fill-opacity: 0.16; stroke-opacity: 1; } .skel { background: var(--bg-tertiary); } /* A frozen spinner reads as a crash. Rotation in place carries little vestibular risk, so keep it turning — just slower. */ .spinner { animation-duration: 1.4s !important; animation-iteration-count: infinite !important; } } /* -------------------------------------------------------------------------- Print — a property report should print as a clean record -------------------------------------------------------------------------- */ @media print { .site-header, .site-footer, .explore-map, .panel-step, .pager, .map-toggle, #save-btn, .lock-card { display: none !important; } /* Paper is always white — these two are deliberately not tokens. */ body { background: #fff; } .card { break-inside: avoid; box-shadow: none; border-color: #ccc; } } /* Active-feed pill: feeds are chosen from the Reports menu, so this is the only on-screen indication you're in one — and the way back out. */ .chip-btn-feed { background: var(--accent-quiet); color: var(--accent-contrast); border-color: var(--accent-primary); font-weight: 600; } .chip-btn-feed:hover { color: var(--accent-contrast); border-color: var(--accent-primary-hover); } .chip-btn-feed svg { opacity: 0.7; } .chip-btn-feed:hover svg { opacity: 1; }