/* ==== styles.css ==== */ /* ============================================================================ CostAndPrice — Design System · v2 "Instrument" · 2026-07 ---------------------------------------------------------------------------- Territory: this file is the DESIGN SYSTEM (tokens / base / shared components). pages.css (content pages) and tool.css (calculator + evidence) are concatenated AFTER this file at build time and build on these tokens. Contract: docs/DESIGN-SYSTEM.md. Self-contained, CSP-safe, zero external assets. Light + dark via light-dark() — no JS, no toggle. Layers: later layers win; downstream un-layered rules win over all layers. ========================================================================== */ @layer reset, tokens, base, layout, components, utilities; /* ============================= TOKEN TYPES ================================ */ /* Typed color tokens: animatable, validated. Initial values = light theme. */ @property --brand { syntax: ""; inherits: true; initial-value: #006c9b; } @property --brand-ink { syntax: ""; inherits: true; initial-value: #00517b; } @property --money { syntax: ""; inherits: true; initial-value: #914b0e; } @property --ink { syntax: ""; inherits: true; initial-value: #141a23; } @property --ink-2 { syntax: ""; inherits: true; initial-value: #4a5360; } @property --ink-3 { syntax: ""; inherits: true; initial-value: #5e6773; } @property --surface-0 { syntax: ""; inherits: true; initial-value: #fafbfc; } @property --surface-1 { syntax: ""; inherits: true; initial-value: #f4f6f9; } @property --surface-2 { syntax: ""; inherits: true; initial-value: #ecf0f4; } @property --surface-card { syntax: ""; inherits: true; initial-value: #ffffff; } @property --line { syntax: ""; inherits: true; initial-value: #dbe1e6; } @property --line-2 { syntax: ""; inherits: true; initial-value: #c6cdd5; } @layer tokens { /* Visitor theme override (light / auto / dark toggle). data-theme is set pre-paint by the inline script and toggled live by shared/theme.js. Every color token uses light-dark(), which resolves from color-scheme — so flipping color-scheme re-resolves the whole palette with no per-token overrides. "auto" removes the attribute (OS preference). */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root { color-scheme: light dark; /* ---- Color · engineered neutrals (cool-cast, hue ≈ 250–258) ----------- */ /* Light values first, dark second. All AA pairs documented in docs/DESIGN-SYSTEM.md §3 (ratios computed, not eyeballed). */ --surface-0: light-dark(oklch(98.8% 0.002 250), oklch(18.3% 0.012 258)); /* page */ --surface-1: light-dark(oklch(97.3% 0.004 250), oklch(21.5% 0.014 258)); /* soft panel */ --surface-2: light-dark(oklch(95.2% 0.007 250), oklch(25.3% 0.015 258)); /* band / inset */ --surface-card: light-dark(#ffffff, oklch(22.5% 0.014 258)); /* raised card */ --ink: light-dark(oklch(21.5% 0.02 258), oklch(92.8% 0.006 250)); /* primary text */ --ink-2: light-dark(oklch(44% 0.024 257), oklch(73% 0.018 252)); /* secondary */ --ink-3: light-dark(oklch(51% 0.022 257), oklch(64.5% 0.018 252)); /* tertiary */ --line: light-dark(oklch(90.6% 0.01 250), oklch(29.2% 0.015 254)); /* hairline */ --line-2: light-dark(oklch(84.6% 0.014 250), oklch(35.5% 0.017 254)); /* strong hairline */ /* ---- Color · brand (instrument blue, hue 235/228) ---------------------- */ --brand: light-dark(oklch(50% 0.115 235), oklch(73.5% 0.10 228)); --brand-ink: light-dark(oklch(41% 0.105 237), oklch(80% 0.09 226)); /* hover / emphasis */ --brand-tint: color-mix(in oklab, var(--brand) 9%, transparent); --brand-bg: light-dark(oklch(95.5% 0.016 235), oklch(26% 0.03 232)); --on-brand: light-dark(#ffffff, oklch(18.3% 0.012 258)); /* text on solid brand */ /* ---- Color · money (warm copper — prices & big numbers) --------------- */ --money: light-dark(oklch(49% 0.115 55), oklch(80% 0.115 78)); /* ---- Color · verdicts ------------------------------------------------- */ --ok: light-dark(oklch(47% 0.10 152), oklch(75% 0.115 152)); /* Observed / DIY-yes */ --ok-bg: light-dark(oklch(96.2% 0.02 152), oklch(25.5% 0.03 152)); --est: light-dark(oklch(50% 0.105 70), oklch(79% 0.10 82)); /* Estimated */ --est-bg: light-dark(oklch(96.2% 0.024 85), oklch(26% 0.035 85)); /* ---- Atmosphere (page-top glow; resolves per scheme) ------------------ */ --glow-brand: light-dark(color-mix(in oklab, oklch(50% 0.115 235) 8%, transparent), color-mix(in oklab, oklch(73.5% 0.10 228) 9%, transparent)); --glow-money: light-dark(color-mix(in oklab, oklch(49% 0.115 55) 5%, transparent), color-mix(in oklab, oklch(80% 0.115 78) 5%, transparent)); /* ---- Depth (layered translucent shadows + hairlines, never mud) ------- */ --shadow-tint: light-dark(oklch(30% 0.03 250), oklch(5% 0.02 250)); --shadow-1: 0 1px 2px color-mix(in oklab, var(--shadow-tint) 7%, transparent); --shadow-2: 0 1px 2px color-mix(in oklab, var(--shadow-tint) 6%, transparent), 0 4px 12px color-mix(in oklab, var(--shadow-tint) 8%, transparent); --shadow-3: 0 2px 4px color-mix(in oklab, var(--shadow-tint) 6%, transparent), 0 12px 32px color-mix(in oklab, var(--shadow-tint) 12%, transparent); /* ---- Focus ------------------------------------------------------------ */ --focus: var(--brand); /* ---- Type · tuned system stack (SF Pro / Segoe UI Variable / Roboto) -- */ --font-sans: system-ui, -apple-system, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code", Menlo, Consolas, monospace; /* ---- Type · fluid scale (rem + vw clamp; px @ 375 → @ 1280) ----------- */ --text-2xs: clamp(0.6875rem, 0.67rem + 0.08vw, 0.71875rem); /* 11 → 11.5 */ --text-xs: clamp(0.78125rem, 0.765rem + 0.08vw, 0.8125rem); /* 12.5 → 13 */ --text-sm: clamp(0.875rem, 0.855rem + 0.09vw, 0.90625rem); /* 14 → 14.5 */ --text-base: clamp(1rem, 0.973rem + 0.12vw, 1.0625rem); /* 16 → 17 */ --text-lg: clamp(1.125rem, 1.09rem + 0.16vw, 1.1875rem); /* 18 → 19 */ --text-h3: clamp(1.125rem, 1.06rem + 0.28vw, 1.25rem); /* 18 → 20 */ --text-h2: clamp(1.375rem, 1.24rem + 0.58vw, 1.625rem); /* 22 → 26 */ --text-h1: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); /* 28 → 40 */ --text-display: clamp(2rem, 1.5rem + 2.2vw, 3.125rem); /* 32 → 50 */ --text-num-xl: clamp(1.5rem, 1.3rem + 0.9vw, 1.9375rem); /* 24 → 31 — headline range */ /* ---- Type · optical tracking per size ---------------------------------- */ --track-display: -0.032em; --track-h1: -0.026em; --track-h2: -0.018em; --track-h3: -0.011em; --track-caps: 0.07em; /* uppercase micro-labels */ /* ---- Space (8px base) --------------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ /* ---- Shape -------------------------------------------------------------- */ --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-full: 999px; /* ---- Layout ------------------------------------------------------------- */ --container: 1080px; --gutter: clamp(1rem, 0.6rem + 2.2vw, 1.75rem); --measure: 70ch; /* max prose line length */ --header-h: 60px; /* ---- Motion ------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); --dur-1: 150ms; --dur-2: 200ms; --dur-3: 250ms; accent-color: var(--brand); } } /* @layer tokens */ /* ================================ RESET =================================== */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; hanging-punctuation: first last; } img, svg { display: block; max-width: 100%; } input, button, select, textarea { font: inherit; color: inherit; } } /* @layer reset */ /* ================================= BASE ==================================== */ @layer base { html { scroll-padding-top: calc(var(--header-h) + 16px); } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.6; color: var(--ink); background: radial-gradient(1100px 460px at 18% -8%, var(--glow-brand), transparent 68%), radial-gradient(900px 420px at 88% -6%, var(--glow-money), transparent 62%), var(--surface-0); background-attachment: scroll; background-repeat: no-repeat; background-color: var(--surface-0); font-feature-settings: "kern"; text-rendering: optimizeLegibility; } ::selection { background: color-mix(in oklab, var(--brand) 24%, transparent); } h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; text-wrap: balance; color: var(--ink); font-variant-numeric: lining-nums; } h1 { font-size: var(--text-h1); letter-spacing: var(--track-h1); margin: 0 0 var(--space-3); } h2 { font-size: var(--text-h2); letter-spacing: var(--track-h2); margin: var(--space-8) 0 var(--space-4); } h3 { font-size: var(--text-h3); letter-spacing: var(--track-h3); margin: var(--space-6) 0 var(--space-3); line-height: 1.3; } h2 + h3 { margin-top: var(--space-4); } p { margin: 0 0 var(--space-4); text-wrap: pretty; } main p, main ul:not([class]), main ol:not([class]), main dl { max-width: var(--measure); } a { color: var(--brand); text-decoration: none; transition: color var(--dur-1) var(--ease-out); } a:hover { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } strong { font-weight: 650; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-7) 0; } code, pre, .formula { font-family: var(--font-mono); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; } /* Lede — the page's opening statement */ .lede { font-size: var(--text-lg); line-height: 1.55; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; margin-bottom: var(--space-5); } .lede strong { color: var(--ink); font-variant-numeric: tabular-nums; } /* Home page gets display-size headline (body.home set by the shell) */ body.home main > h1 { font-size: var(--text-display); letter-spacing: var(--track-display); max-width: 21ch; } } /* @layer base */ /* ================================ LAYOUT =================================== */ @layer layout { .wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } main { padding-top: var(--space-6); padding-bottom: var(--space-8); container-type: inline-size; container-name: page; } main:focus { outline: none; } /* skip-link target */ /* Skip link */ .skip-link { position: absolute; left: var(--space-4); top: calc(-1 * var(--space-9)); z-index: 100; padding: 10px 16px; background: var(--surface-card); color: var(--brand); font-weight: 600; border: 1px solid var(--line-2); border-radius: var(--r-2); box-shadow: var(--shadow-2); transition: top var(--dur-2) var(--ease-out); } .skip-link:focus-visible { top: var(--space-4); } /* ---- Header ---- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--surface-0); border-bottom: 1px solid var(--line); view-transition-name: site-header; } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: color-mix(in oklab, var(--surface-0) 80%, transparent); -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); } } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-h); padding-block: var(--space-2); flex-wrap: wrap; } /* Brand wordmark (pure CSS + inline SVG mark — no image files) */ .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; min-height: 44px; } .brand:hover { text-decoration: none; color: var(--ink); } .brand-mark { width: 28px; height: 28px; flex: none; border-radius: 8.5px; box-shadow: var(--shadow-1); transition: transform var(--dur-2) var(--ease-out); } .brand:hover .brand-mark { transform: scale(1.06) rotate(-2deg); } .brand-and { color: var(--ink-3); font-weight: 500; padding-inline: 1px; } /* Primary nav */ .site-nav { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; } .site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border-radius: var(--r-full); color: var(--ink-2); font-size: var(--text-sm); font-weight: 550; transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); } .site-nav a:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); text-decoration: none; } .site-nav a[aria-current] { color: var(--brand-ink); background: var(--brand-tint); font-weight: 600; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 0; border: 1px solid transparent; border-radius: var(--r-full); background: transparent; color: var(--ink-2); cursor: pointer; transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); } .theme-toggle:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); } .theme-toggle[data-theme-state="light"], .theme-toggle[data-theme-state="dark"] { color: var(--brand-ink); background: var(--brand-tint); } .theme-toggle svg { display: block; } /* ---- Header site-search (shared/search.js) ---- */ .cp-search { position: relative; display: inline-flex; } /* visually-hidden label (kept for AT even though the input also has a placeholder + aria-label) */ .cp-search-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .cp-search-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 0; border: 1px solid transparent; border-radius: var(--r-full); background: transparent; color: var(--ink-2); cursor: pointer; transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); } .cp-search-btn:hover { color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); } .cp-search.is-open .cp-search-btn { color: var(--brand-ink); background: var(--brand-tint); } .cp-search-btn svg { display: block; } .cp-search-panel { position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 60; width: min(22rem, 78vw); padding: var(--space-2); background: var(--surface-card); border: 1px solid var(--line-2); border-radius: var(--r-3); box-shadow: var(--shadow-3); } .cp-search-input { width: 100%; padding: 9px 12px; font: inherit; font-size: var(--text-sm); color: var(--ink); background: var(--surface-0); border: 1px solid var(--line-2); border-radius: var(--r-2); } .cp-search-input::placeholder { color: var(--ink-3); } .cp-search-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--brand); } .cp-search-list { list-style: none; margin: 0; padding: 0; } .cp-search-panel.has-results .cp-search-list { margin-top: var(--space-2); max-height: min(60vh, 22rem); overflow-y: auto; } .cp-search-opt { margin: 0; } .cp-search-opt > a { display: block; padding: 8px 10px; border-radius: var(--r-1); color: var(--ink); font-size: var(--text-sm); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cp-search-opt > a:hover { text-decoration: none; background: color-mix(in oklab, var(--ink) 6%, transparent); } .cp-search-opt[aria-selected="true"] > a { background: var(--brand-tint); color: var(--brand-ink); } @media (max-width: 640px) { /* Wider, near-full-width dropdown under the header on small screens */ .cp-search-panel { width: min(26rem, calc(100vw - var(--space-5))); } } @media (forced-colors: active) { .cp-search-panel { border: 1px solid CanvasText; } .cp-search-opt[aria-selected="true"] > a { outline: 2px solid Highlight; } } /* ---- Breadcrumbs ---- */ .breadcrumbs { font-size: var(--text-xs); color: var(--ink-3); margin: 0 0 var(--space-5); } .breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .breadcrumbs li { display: flex; align-items: center; gap: var(--space-2); } .breadcrumbs li + li::before { content: "/"; color: color-mix(in oklab, var(--ink-3) 45%, transparent); } .breadcrumbs a { color: var(--ink-3); } .breadcrumbs a:hover { color: var(--brand); text-decoration: none; } .breadcrumbs li[aria-current], .breadcrumbs li:last-child { color: var(--ink-2); font-weight: 550; } /* ---- Footer ---- */ .site-footer { margin-top: 0; /* main's padding-bottom sets the approach space */ border-top: 1px solid var(--line); background: var(--surface-1); color: var(--ink-2); font-size: var(--text-sm); } .site-footer .wrap { padding-block: var(--space-7) var(--space-6); } .foot-grid { display: grid; grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-6) var(--space-5); align-items: start; margin-bottom: var(--space-6); } .foot-brand .brand { font-size: 1rem; } .foot-brand .tagline { color: var(--ink-3); font-size: var(--text-xs); margin: var(--space-2) 0 0; max-width: 30ch; } .foot-col h2 { font-size: var(--text-2xs); font-weight: 650; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-3); margin: 0 0 var(--space-3); } .foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .foot-col a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-2); transition: color var(--dur-1) var(--ease-out); } .foot-col a:hover { color: var(--brand); text-decoration: none; } .foot-trust { border-top: 1px solid var(--line); padding-top: var(--space-5); max-width: 78ch; } .foot-trust strong { color: var(--ink); } .site-footer p { margin: 0 0 var(--space-2); } .site-footer .faint { color: var(--ink-3); } } /* @layer layout */ /* ============================== COMPONENTS ================================= */ @layer components { /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 10px 20px; border: 1px solid transparent; border-radius: var(--r-2); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.005em; cursor: pointer; user-select: none; text-decoration: none; transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out); } .btn:hover { text-decoration: none; } .btn:active { transform: scale(0.98); } .btn--primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-1); } .btn--primary:hover { background: var(--brand-ink); color: var(--on-brand); box-shadow: var(--shadow-2); } .btn--secondary { background: var(--surface-card); color: var(--ink); border-color: var(--line-2); box-shadow: var(--shadow-1); } .btn--secondary:hover { border-color: color-mix(in oklab, var(--brand) 45%, var(--line-2)); color: var(--brand-ink); } .btn--ghost { background: transparent; color: var(--brand); } .btn--ghost:hover { background: var(--brand-tint); color: var(--brand-ink); } .btn--sm { min-height: 36px; padding: 6px 14px; font-size: var(--text-xs); } /* ---- Badges (status pills with indicator dot) ---- */ .badge, .est-badge, .obs-badge, .soon-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.025em; line-height: 1; padding: 4px 10px; border-radius: var(--r-full); vertical-align: middle; white-space: nowrap; } .badge::before, .est-badge::before, .obs-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .est-badge, .badge--est { color: var(--est); background: var(--est-bg); border: 1px solid color-mix(in oklab, var(--est) 28%, transparent); } .obs-badge, .badge--obs { color: var(--ok); background: var(--ok-bg); border: 1px solid color-mix(in oklab, var(--ok) 28%, transparent); } .soon-badge { color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--line); margin-top: var(--space-2); } /* ---- Citation line (trust asset — quiet but legible) ---- */ .citation { font-size: var(--text-xs); line-height: 1.55; color: var(--ink-3); max-width: var(--measure); margin: var(--space-2) 0 0; padding-left: var(--space-3); border-left: 2px solid var(--line); } .citation a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in oklab, var(--ink-3) 45%, transparent); } .citation a:hover { color: var(--brand); text-decoration-color: currentColor; } /* ---- Price tables (the product surface) ---- */ .price-block { margin: var(--space-5) 0 var(--space-2); } .table-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface-card); box-shadow: var(--shadow-1); } table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); } caption { text-align: left; font-size: var(--text-sm); font-weight: 650; letter-spacing: -0.006em; color: var(--ink); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); background: color-mix(in oklab, var(--surface-1) 55%, transparent); } caption .est-badge, caption .obs-badge { margin-left: var(--space-2); } th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid color-mix(in oklab, var(--line) 62%, transparent); vertical-align: top; } thead th { font-size: var(--text-2xs); font-weight: 650; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-3); white-space: nowrap; background: color-mix(in oklab, var(--surface-1) 55%, transparent); border-bottom: 1px solid var(--line); padding-block: 10px; } tbody tr { transition: background-color var(--dur-1) var(--ease-out); } tbody tr:not(.tier-head):hover { background: color-mix(in oklab, var(--brand) 4%, transparent); } tbody tr:last-child td { border-bottom: none; } td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } td.num { font-weight: 600; color: var(--ink); } /* Sticky-header option: add .sticky-head to .table-scroll (needs max-height) */ .table-scroll.sticky-head { max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; } .table-scroll.sticky-head thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-card); box-shadow: 0 1px 0 var(--line); } /* Verdict text inside tables */ .diy-yes { color: var(--ok); font-weight: 600; font-size: var(--text-xs); } .diy-no { color: var(--ink-3); font-weight: 550; font-size: var(--text-xs); } /* Tier-grouped brand table (the tier-label row is a spanning , not a — see templates/tool.mjs; keep both selectors so the visual is unchanged) */ tr.tier-head th, tr.tier-head td { background: color-mix(in oklab, var(--surface-2) 70%, transparent); color: var(--ink); font-weight: 650; font-size: var(--text-xs); text-transform: none; letter-spacing: 0; padding-block: var(--space-2); } .tier-factor { font-weight: 600; font-size: var(--text-2xs); color: var(--money); font-variant-numeric: tabular-nums; margin-left: var(--space-2); } td .c-sub { display: block; font-size: var(--text-xs); color: var(--ink-3); margin-top: 2px; text-transform: capitalize; font-weight: 400; } /* ---- Stat callout ("Observed" aggregate block) ---- */ .obs-stat, .stat { background: color-mix(in oklab, var(--ok) 5%, var(--surface-card)); border: 1px solid color-mix(in oklab, var(--ok) 22%, transparent); border-radius: var(--r-3); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; max-width: var(--measure); font-size: var(--text-base); line-height: 1.55; } .obs-stat .num, .stat .num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--money); letter-spacing: -0.01em; } .obs-stat .obs-badge { margin-right: var(--space-2); } /* ---- Cards ---- */ .cardlist { list-style: none; padding: 0; margin: var(--space-4) 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); } .cardlist a, .vcard-soon { display: block; height: 100%; padding: var(--space-4); background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-1); color: var(--ink); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); } .cardlist a:hover { text-decoration: none; transform: translateY(-2px); border-color: color-mix(in oklab, var(--brand) 38%, var(--line)); box-shadow: var(--shadow-2); } .cardlist a:active { transform: translateY(0); } .cardlist .c-sub { display: block; font-size: var(--text-xs); color: var(--ink-3); margin-top: var(--space-1); line-height: 1.45; } .vcard-title { display: block; font-weight: 650; font-size: var(--text-base); letter-spacing: -0.008em; color: var(--ink); } .vcard-soon { background: var(--surface-1); box-shadow: none; } .vcard-soon .vcard-title { color: var(--ink-2); } /* Subgrid alignment for the homepage vertical cards (progressive) */ @supports (grid-template-rows: subgrid) { .vcardlist { grid-auto-rows: auto; } } /* ---- Link grid ---- */ .linkgrid { list-style: none; padding: 0; margin: var(--space-3) 0; columns: 2; column-gap: var(--space-6); } .linkgrid li { margin: 0; break-inside: avoid; } .linkgrid a { display: inline-flex; align-items: center; min-height: 36px; color: var(--ink-2); transition: color var(--dur-1) var(--ease-out); } .linkgrid a:hover { color: var(--brand); } /* ---- Callout / methodology box ---- */ .method-block, .callout { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--space-5); margin: var(--space-5) 0; } .method-block h2 { margin-top: 0; font-size: var(--text-h3); } .method-block h2 + p, .callout h2 + p { margin-top: var(--space-2); } .formula { font-size: var(--text-xs); line-height: 1.7; background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--space-3) var(--space-4); overflow-x: auto; overscroll-behavior-x: contain; font-variant-numeric: tabular-nums; } dl.meta { margin: var(--space-3) 0; } dl.meta dt { font-weight: 650; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-3); } dl.meta dd { margin: 2px 0 var(--space-3); } /* ---- Evidence quote ---- */ .evidence-quote { margin: var(--space-3) 0; padding: var(--space-2) var(--space-4); border-left: 2px solid color-mix(in oklab, var(--brand) 45%, var(--line)); color: var(--ink-2); font-size: var(--text-sm); font-style: italic; max-width: var(--measure); } /* ---- Referral unit ---- */ .referral { background: var(--brand-bg); border: 1px solid color-mix(in oklab, var(--brand) 22%, transparent); border-radius: var(--r-3); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0; font-size: var(--text-sm); } /* ---- Trust list (checkmark bullets) ---- */ .trust-list { list-style: none; margin: var(--space-3) 0 var(--space-5); padding: 0; max-width: var(--measure); } .trust-list li { position: relative; padding-left: 30px; margin: 0 0 var(--space-3); } .trust-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--ok); background: var(--ok-bg); border: 1px solid color-mix(in oklab, var(--ok) 26%, transparent); border-radius: 50%; } /* ---- Kicker (uppercase micro-label above headings) ---- */ .kicker { display: block; font-size: var(--text-2xs); font-weight: 650; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--brand); margin-bottom: var(--space-2); } /* ---- Calculator shell (foundation; tool.css refines internals) ---- */ .tool { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-4); padding: clamp(var(--space-4), 2.5vw, var(--space-6)); margin: var(--space-5) 0; box-shadow: var(--shadow-3); container-type: inline-size; container-name: tool; position: relative; } /* Full-bleed moment: the instrument breaks the text column on wide screens */ @media (min-width: 1200px) { .tool { margin-inline: calc(-1 * var(--space-7)); } } .tool-controls { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; } .tool .field { display: flex; flex-direction: column; gap: 6px; } .tool .field > label, .seg-label { font-size: var(--text-2xs); font-weight: 650; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-3); } .seg-label { display: block; margin-bottom: 6px; } .tool select, .tool input { font-size: 16px; /* ≥16px: prevents iOS focus zoom */ min-height: 44px; min-width: 160px; padding: 8px 12px; background: var(--surface-card); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-2); box-shadow: var(--shadow-1); transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .tool select:hover, .tool input:hover { border-color: color-mix(in oklab, var(--brand) 40%, var(--line-2)); } .tool select:focus-visible, .tool input:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 22%, transparent); } .tool input::placeholder { color: var(--ink-3); } .field:has(:focus-visible) label { color: var(--brand); } /* Headline range — the LCP element. System font: renders on first paint. */ .tool-range { font-size: var(--text-lg); line-height: 1.35; margin: 0 0 var(--space-4); color: var(--ink-2); text-wrap: pretty; } .tool-range strong { display: inline-block; font-size: var(--text-num-xl); font-weight: 700; letter-spacing: -0.022em; font-variant-numeric: tabular-nums; color: var(--money); line-height: 1.1; margin-right: 2px; } .tool-fee { font-size: var(--text-sm); color: var(--ink-2); margin: var(--space-3) 0 0; } .tool-fee strong { font-variant-numeric: tabular-nums; color: var(--ink); } .tool-note { font-size: var(--text-xs); color: var(--ink-3); margin: var(--space-3) 0 0; max-width: var(--measure); } .tool .zip-status { font-size: var(--text-xs); color: var(--ink-2); margin-top: var(--space-2); min-height: 1.2em; } .tool .zip-status.localized { color: var(--ok); font-weight: 600; } .tool .table-scroll { box-shadow: none; } /* ---- Segmented control (iOS-grade) ---- */ .segmented { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-2); align-self: flex-start; /* hug options; .field's column layout stretches otherwise */ width: fit-content; } .seg-opt { position: relative; } .seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .seg-opt > span { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 6px 14px; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); border-radius: calc(var(--r-2) - 3px); cursor: pointer; user-select: none; white-space: nowrap; transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .seg-opt:hover > span { color: var(--ink); } .seg-opt.is-on > span, .seg-opt input:checked + span { background: var(--surface-card); color: var(--ink); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); } .seg-opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; } /* Tier row spans the full control row */ .field-tier { flex: 1 1 100%; } /* Homepage hero-tool deeplink CTA */ .home-tool-cta { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-base); font-weight: 600; } .home-tool-cta a { display: inline-flex; align-items: center; min-height: 44px; } /* ---- OWNER-TODO placeholder (never-published copy) ---- */ .owner-todo { border: 1px dashed color-mix(in oklab, var(--est) 55%, transparent); background: var(--est-bg); color: var(--est); border-radius: var(--r-2); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); } .owner-todo code { font-size: var(--text-xs); } /* ---- Container-query refinements ---- */ @container tool (max-width: 620px) { .tool-controls { flex-direction: column; align-items: stretch; } .tool .field { width: 100%; } .tool select, .tool input { min-width: 0; width: 100%; } .segmented { display: flex; align-self: stretch; width: auto; } .seg-opt { flex: 1 1 30%; } /* 5 options wrap 3+2, evenly */ .seg-opt > span { width: 100%; padding-inline: var(--space-2); } } @container page (max-width: 560px) { .linkgrid { columns: 1; } } } /* @layer components */ /* ============================== UTILITIES ================================= */ @layer utilities { .muted { color: var(--ink-2); } .faint { color: var(--ink-3); } .small { font-size: var(--text-sm); } .num { font-variant-numeric: tabular-nums; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } } /* @layer utilities */ /* ==================== PROGRESSIVE ENHANCEMENT / MODES ===================== */ /* Cross-document view transitions (MPA, no JS router) */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: var(--ease-out); } /* Scroll-driven: header gains depth once the page scrolls (subtle) */ @supports (animation-timeline: scroll()) { .site-header { animation: header-depth linear both; animation-timeline: scroll(root); animation-range: 0 120px; } @keyframes header-depth { to { box-shadow: var(--shadow-2); } } } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Forced-colors (Windows High Contrast) sanity */ @media (forced-colors: active) { .est-badge, .obs-badge, .badge, .soon-badge, .btn { border: 1px solid CanvasText; } .seg-opt.is-on > span, .seg-opt input:checked + span { border: 2px solid Highlight; } .site-header { border-bottom: 1px solid CanvasText; } .brand-mark { forced-color-adjust: none; } } /* Narrow-viewport fallbacks (container queries handle most of it) */ @media (max-width: 640px) { .site-header .wrap { justify-content: center; row-gap: 0; padding-block: 2px; min-height: 0; } .brand { min-height: 44px; } .site-nav a { padding-inline: 10px; font-size: var(--text-xs); } .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } } /* ==== pages.css ==== */ /* ============================================================================ pages.css — content-page components (v2 "Instrument"). Concatenated AFTER styles.css at build: un-layered rules here win over all of the system's layers. Tokens only — no raw colors, no !important. ========================================================================== */ /* ---- Kicker row (kicker + optional currency chip on /canada/ pages) ------ */ .kicker-row { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-2); } .kicker-row .kicker { margin-bottom: 0; } .cur-chip { display: inline-flex; align-items: center; font-size: var(--text-2xs); font-weight: 650; letter-spacing: var(--track-caps); line-height: 1; padding: 4px 8px; border-radius: var(--r-1); color: var(--brand); background: var(--brand-bg); border: 1px solid color-mix(in oklab, var(--brand) 28%, transparent); } /* ---- Chips (anchor pills: jump nav, hub symptom links) ------------------- */ .chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-full); color: var(--ink-2); font-size: var(--text-sm); font-weight: 550; transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out); } .chip::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; } /* 44px hit area */ .chip:hover { text-decoration: none; color: var(--brand-ink); border-color: color-mix(in oklab, var(--brand) 45%, var(--line)); box-shadow: var(--shadow-1); transform: translateY(-1px); } .chip:active { transform: translateY(0); } .jump-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 var(--space-5); } /* ---- Fact row (quiet instrument stats under a hero) ---------------------- */ .fact-row { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-7); margin: 0 0 var(--space-5); } .fact-row .fact { display: flex; flex-direction: column; gap: 2px; } .fact-label { font-size: var(--text-2xs); font-weight: 650; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-3); } .fact-value { font-size: var(--text-lg); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.35; } /* ---- Local-evidence band (metro pages: observed fees + taxes) ------------ */ .local-band { display: grid; gap: var(--space-5) var(--space-6); margin: var(--space-6) 0; align-items: start; } @container page (min-width: 820px) { .local-band.two-up { grid-template-columns: 1fr 1fr; } } .local-cell h2 { margin: 0 0 var(--space-3); font-size: var(--text-h3); } .local-cell .obs-stat { margin: 0 0 var(--space-3); } .local-cell p:last-child { margin-bottom: 0; } /* ---- Per-appliance sections (metro pages) --------------------------------- */ .type-group { margin-top: var(--space-6); } .type-group > h2 { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-2); padding-top: var(--space-6); border-top: 1px solid var(--line); } .type-count { font-size: var(--text-xs); font-weight: 600; color: var(--ink-3); letter-spacing: 0; white-space: nowrap; } .type-group h3 { margin-top: var(--space-5); } .type-group h3 a { color: var(--ink); } .type-group h3 a:hover { color: var(--brand-ink); } /* ---- Collapsible long tail (
) — content stays in the DOM -------- */ .more-fold { margin: var(--space-5) 0 0; border: 1px solid var(--line); border-radius: var(--r-3); background: color-mix(in oklab, var(--surface-1) 62%, transparent); } .more-fold > summary { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: var(--space-2) var(--space-4); border-radius: calc(var(--r-3) - 1px); cursor: pointer; user-select: none; list-style: none; font-size: var(--text-sm); font-weight: 600; color: var(--brand); transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); } .more-fold > summary::-webkit-details-marker { display: none; } .more-fold > summary:hover { background: var(--brand-tint); color: var(--brand-ink); } .more-fold > summary::before { content: ""; flex: none; width: 7px; height: 7px; margin-inline: 3px 1px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(-45deg); /* points right when closed */ transition: transform var(--dur-2) var(--ease-out); } .more-fold[open] > summary::before { transform: rotate(45deg); } .more-fold[open] > summary { border-bottom: 1px solid var(--line); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .fold-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-full); background: var(--surface-2); color: var(--ink-2); font-size: var(--text-2xs); font-weight: 650; font-variant-numeric: tabular-nums; } .fold-body { padding: 0 var(--space-4) var(--space-4); } .fold-body > h3:first-child { margin-top: var(--space-4); } /* ---- Cause cards (problem pages: "What usually causes it") ---------------- */ .cause-grid { list-style: none; padding: 0; margin: var(--space-4) 0 var(--space-2); max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-3); } .cause-card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-5); background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-1); } .cause-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .cause-card h3 { margin: 0; font-size: var(--text-base); letter-spacing: -0.008em; line-height: 1.35; } .cause-top .diy-yes, .cause-top .diy-no { white-space: nowrap; } .cause-range { font-size: var(--text-h3); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.014em; margin: 0; } .cause-note { font-size: var(--text-sm); color: var(--ink-2); margin: 0; } .cause-meta { font-size: var(--text-xs); color: var(--ink-3); margin: var(--space-1) 0 0; font-variant-numeric: tabular-nums; } /* ---- Callout with a heading inside (fee / repair-vs-replace) -------------- */ .callout h2 { margin: 0 0 var(--space-2); font-size: var(--text-h3); } .callout p:last-child { margin-bottom: 0; } .callout .citation { margin-top: var(--space-3); } /* ---- Hub directory: grouped cards with symptom chips ---------------------- */ .hub-groups { list-style: none; padding: 0; margin: var(--space-4) 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-4); } .hub-card { padding: var(--space-5); background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-1); } .hub-card > h3 { margin: 0 0 var(--space-3); font-size: var(--text-base); } .chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; max-width: none; } .chips .chip { background: transparent; box-shadow: none; min-height: 36px; padding: 5px 12px; font-size: var(--text-xs); font-weight: 600; color: var(--brand); border-color: color-mix(in oklab, var(--brand) 24%, var(--line)); } .chips .chip:hover { background: var(--brand-tint); box-shadow: none; } /* ---- Mini metro cards (nearby metros) -------------------------------------- */ .cardlist--mini { grid-template-columns: repeat(auto-fill, minmax(min(100%, 175px), 1fr)); gap: var(--space-2); } .cardlist--mini a { padding: var(--space-3) var(--space-4); } .cardlist--mini .vcard-title { font-size: var(--text-sm); } /* ---- Compact link directory (all-problems set on metro pages) ------------- */ .linkgrid--compact { columns: 3; column-gap: var(--space-5); } .linkgrid--compact a { min-height: 32px; font-size: var(--text-sm); } @container page (max-width: 900px) { .linkgrid--compact { columns: 2; } } @container page (max-width: 560px) { .linkgrid--compact { columns: 1; } } /* ---- Homepage: "Home services we price" card grid -------------------------- */ .cardlist--services { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); } /* ---- Homepage: appliance tiles --------------------------------------------- */ .type-grid { list-style: none; padding: 0; margin: var(--space-4) 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: var(--space-2); } .type-grid a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 52px; padding: 10px var(--space-4); background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--shadow-1); color: var(--ink); font-weight: 600; font-size: var(--text-sm); line-height: 1.3; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); } .type-grid a::after { content: "\2192"; color: var(--ink-3); font-weight: 400; flex: none; transition: transform var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out); } .type-grid a:hover { text-decoration: none; transform: translateY(-2px); border-color: color-mix(in oklab, var(--brand) 38%, var(--line)); box-shadow: var(--shadow-2); } .type-grid a:hover::after { transform: translateX(3px); color: var(--brand); } .type-grid a:active { transform: translateY(0); } /* ---- Button row + homepage trust band --------------------------------------- */ .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: var(--space-5) 0; } .trust-band { display: grid; gap: var(--space-5); align-items: start; margin: var(--space-4) 0; } @container page (min-width: 860px) { .trust-band { grid-template-columns: 1.2fr 1fr; gap: var(--space-6); } } .trust-band .trust-list { margin-block: 0; } .method-teaser { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--space-5); } .method-teaser p { margin-bottom: var(--space-3); } .method-teaser .btn-row { margin: var(--space-4) 0 0; } /* ---- Formula: never wraps mid-token; scrolls like a table ------------------- */ .formula { display: block; white-space: pre; overflow-x: auto; max-width: 100%; margin: var(--space-3) 0; } /* ---- Methodology: the formula as centerpiece -------------------------------- */ .method-hero .formula { font-size: var(--text-sm); line-height: 1.9; padding: var(--space-4) var(--space-5); } /* ---- State/province hubs: the rules & taxes block gets presence ------------- */ .rules-feature .method-block { background: var(--surface-card); box-shadow: var(--shadow-1); } .rules-feature .method-block h2 { font-size: var(--text-h2); } .rules-feature .method-block h3 { margin-top: var(--space-5); } /* ---- Problem pages: "also searched as" hero footnote ------------------------ */ .also-searched { color: var(--ink-3); font-size: var(--text-xs); margin: calc(-1 * var(--space-3)) 0 var(--space-5); } /* ---- Error codes: directory chips, code page, calculator hook ------------- Code text is an instrument reading: mono + tabular, never shouty. The "Have an error code?" hook lives INSIDE .tool, so inputs inherit the tool's field styling; code-lookup.js builds the row on demand (no-JS = plain link). */ .code-chip { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .code-chip .code-chip-type { font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: 600; color: var(--ink-3); letter-spacing: 0.02em; } .code-value { font-family: var(--font-mono); letter-spacing: 0.02em; } .code-causes { margin: var(--space-3) 0 var(--space-4); padding-left: var(--space-5); } .code-causes li { margin-bottom: var(--space-2); } .code-causes li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: var(--text-xs); } .code-family { color: var(--ink-2); font-size: var(--text-sm); } .hub-card .code-family { margin: var(--space-3) 0 0; color: var(--ink-3); font-size: var(--text-xs); } .code-hook { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line); } .code-hook-line { margin: 0; font-size: var(--text-sm); color: var(--ink-2); max-width: none; } .code-hook-q { font-weight: 600; color: var(--ink); margin-right: var(--space-2); } .code-hook-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; } .code-hook-row .code-field input { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; max-width: 180px; } .code-hook-row .code-field input::placeholder { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; } .code-hook-row .btn { margin-bottom: 0; } .code-hook-all { align-self: center; font-size: var(--text-xs); } .code-result { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-2); font-size: var(--text-sm); color: var(--ink-2); max-width: none; } .code-result strong { font-family: var(--font-mono); color: var(--ink); } .code-pick { cursor: pointer; } @container tool (max-width: 560px) { .code-hook-row .code-field { flex: 1 1 100%; } .code-hook-row .code-field input { max-width: none; } } /* ---- Metro-card index chip (state/province hubs) ---- The metro's localization multiplier, shown as a quiet instrument reading. Money-family tint per system §3; tabular-nums via .num. */ .cardlist .idx-chip { display: inline-block; margin-left: var(--space-2); padding: 1px 8px; font-size: var(--text-2xs); font-weight: 650; color: var(--money); background: color-mix(in oklab, var(--money) 9%, transparent); border: 1px solid color-mix(in oklab, var(--money) 22%, transparent); border-radius: 999px; vertical-align: 2px; } /* ---- Type pages + spread strip + hub type links (2026-07-02 pass) ---- */ .spread-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin: var(--space-4) 0 var(--space-2); } .spread-col { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--space-3) var(--space-4); } .spread-col h3 { font-size: var(--text-2xs); font-weight: 650; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-3); margin: 0 0 var(--space-2); } .spread-col ul { list-style: none; margin: 0; padding: 0; } .spread-col li { display: flex; align-items: baseline; gap: var(--space-2); padding: 6px 0; border-top: 1px solid var(--line-soft, var(--line)); } .spread-col li:first-child { border-top: 0; } .spread-col .spread-range { margin-left: auto; color: var(--money); font-weight: 650; } .code-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: none; } .hub-card h3 .type-all { font-size: var(--text-2xs); font-weight: 600; margin-left: var(--space-2); } .hub-card h3 a:first-child { color: inherit; text-decoration: none; } .hub-card h3 a:first-child:hover { text-decoration: underline; } /* ==== tool.css ==== */ /* ============================================================================ tool.css — calculator + evidence components (tool territory). Concatenated LAST at build; un-layered rules here win over every @layer in styles.css by design. Contract: docs/DESIGN-SYSTEM.md. Tokens only — no raw hex, no !important, no token redefinition. Animations: transform/opacity only; global prefers-reduced-motion / forced-colors overrides apply. ========================================================================== */ /* ---- The instrument: measurement-tick motif along the top edge ----------- */ .tool::before { content: ""; position: absolute; top: 0; left: var(--space-6); right: var(--space-6); height: 9px; pointer-events: none; background-image: repeating-linear-gradient(90deg, color-mix(in oklab, var(--ink-3) 30%, transparent) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, color-mix(in oklab, var(--ink-3) 45%, transparent) 0 1px, transparent 1px 50px); background-size: 100% 5px, 100% 9px; background-repeat: no-repeat; } /* ---- Head strip: instrument label + localization status chip ------------- */ .tool-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); } .tool-title { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-2xs); font-weight: 650; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-3); } .tool-title::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; } /* ---- Localization status chip (idle / pending / ok / none / err) --------- */ .tool .zip-status { display: inline-flex; align-items: center; gap: 6px; margin: 0; min-height: 0; max-width: 100%; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.02em; line-height: 1.25; padding: 4px 10px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--surface-1); color: var(--ink-2); transition: opacity var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); } .tool .zip-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .tool .zip-status:empty, .tool .zip-status[data-state="idle"] { opacity: 0; } .tool .zip-status[title] { cursor: help; } .tool .zip-status[data-state="pending"] { color: var(--brand); background: var(--brand-tint); border-color: color-mix(in oklab, var(--brand) 28%, transparent); } .tool .zip-status[data-state="pending"]::before { animation: chip-pulse 800ms var(--ease-inout) infinite alternate; } .tool .zip-status[data-state="ok"] { color: var(--ok); background: var(--ok-bg); border-color: color-mix(in oklab, var(--ok) 28%, transparent); } .tool .zip-status[data-state="err"] { color: var(--est); background: var(--est-bg); border-color: color-mix(in oklab, var(--est) 28%, transparent); } @keyframes chip-pulse { from { opacity: 0.3; } to { opacity: 1; } } /* ---- Custom selects: appearance-none + system chevron (::after) ---------- */ .tool .select-wrap { position: relative; display: grid; } .tool .select-wrap select { appearance: none; -webkit-appearance: none; padding-right: 34px; text-overflow: ellipsis; } .tool .select-wrap::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3); transform: rotate(45deg); pointer-events: none; transition: border-color var(--dur-1) var(--ease-out); } .tool .field:hover .select-wrap::after { border-color: var(--ink-2); } .tool .field:has(select:focus-visible) .select-wrap::after { border-color: var(--brand); } /* ---- ZIP / postal field: monospace + inline validation states ------------ */ .tool .field-zip { position: relative; } .tool .field-zip input { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; text-transform: uppercase; } .tool .field-zip input::placeholder { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; } .tool .field-zip input[data-state="ok"] { border-color: color-mix(in oklab, var(--ok) 55%, var(--line-2)); } .tool .field-zip input[data-state="ok"]:focus-visible { border-color: var(--ok); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 20%, transparent); } .tool .field-zip input[data-state="err"] { border-color: color-mix(in oklab, var(--est) 65%, var(--line-2)); } .tool .field-zip input[data-state="err"]:focus-visible { border-color: var(--est); box-shadow: 0 0 0 3px color-mix(in oklab, var(--est) 22%, transparent); } /* lookup spinner (opacity + transform only; reduced-motion leaves a static ring) */ .tool .field-zip::after { content: ""; position: absolute; right: 13px; bottom: 14px; width: 15px; height: 15px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--brand) 28%, transparent); border-top-color: var(--brand); opacity: 0; pointer-events: none; transition: opacity var(--dur-1) var(--ease-out); } .tool .field-zip:has(input[data-state="pending"])::after { opacity: 1; animation: zip-spin 700ms linear infinite; } @keyframes zip-spin { to { transform: rotate(360deg); } } /* ---- Rhythm inside the instrument ----------------------------------------- */ .tool .tool-controls { margin-bottom: var(--space-5); } /* ---- Calm update motion (post-hydration only; .is-live set by the engine) - */ @keyframes tool-in { from { opacity: 0; transform: translateY(4px); } } .tool-range.swap { animation: tool-in var(--dur-3) var(--ease-out) both; } .tool.is-live .tool-results caption { animation: tool-in var(--dur-2) var(--ease-out); } .tool.is-live .tool-results tbody tr { animation: tool-in var(--dur-3) var(--ease-out) backwards; } .tool.is-live .tool-results tbody tr:nth-child(2) { animation-delay: 45ms; } .tool.is-live .tool-results tbody tr:nth-child(3) { animation-delay: 90ms; } .tool.is-live .tool-results tbody tr:nth-child(4) { animation-delay: 135ms; } .tool.is-live .tool-results tbody tr:nth-child(n+5) { animation-delay: 180ms; } /* ---- DIY verdicts as refined pills (all price tables, incl. CAD) ---------- */ td .diy-yes, td .diy-no { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.02em; line-height: 1.25; padding: 3px 9px; border-radius: var(--r-full); white-space: nowrap; } td .diy-yes::before, td .diy-no::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; } td .diy-yes { color: var(--ok); background: var(--ok-bg); border: 1px solid color-mix(in oklab, var(--ok) 24%, transparent); } td .diy-no { color: var(--ink-2); background: var(--surface-1); border: 1px solid var(--line); } /* ---- Brand-by-tier table (problem pages) ----------------------------------- */ .brand-table td:first-child { font-weight: 550; } .brand-table td.brand-basis { color: var(--ink-2); font-size: var(--text-xs); } /* ---- Observed fee stat: the signature trust moment ------------------------- */ .obs-fees { padding: var(--space-5); } .obs-fees p { margin: 0; max-width: none; } .obs-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--text-xs); color: var(--ink-2); } .obs-src strong { color: var(--ink); font-weight: 650; } .obs-figure { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); } .obs-figure strong.num { font-size: var(--text-num-xl); line-height: 1.1; letter-spacing: -0.022em; } .obs-what { font-size: var(--text-sm); color: var(--ink-2); } .obs-notes { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid color-mix(in oklab, var(--ok) 16%, transparent); font-size: var(--text-sm); color: var(--ink-2); } /* ---- Tax & licensing note (metro/CMA pages) -------------------------------- */ .tax-note dl.meta { margin: 0; display: grid; gap: var(--space-4); max-width: none; } .tax-note dl.meta > div { min-width: 0; } .tax-note dl.meta dd { margin: 4px 0 0; font-size: var(--text-sm); } .tax-note .tax-hub-link { margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line); } @container page (min-width: 760px) { .tax-note dl.meta { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); } } /* ---- State/province rules block (hubs) -------------------------------------- */ .rules-block h3 { font-size: var(--text-2xs); font-weight: 650; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-3); margin: var(--space-5) 0 var(--space-2); } /* ---- Tier segmented control: aligned grid at every width ---- The base .segmented flex-wrap produced a ragged 3+2 with a stretched bottom row at narrow widths (flex:1 1 30% grow-fills the last line). Grid columns keep every option equal-width and aligned — one row on desktop, an even 3+2 on tablet, 2-up on phones — never a stretched orphan row. */ .field-tier .segmented { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; align-self: stretch; } .field-tier .seg-opt { flex: initial; } .field-tier .seg-opt > span { width: 100%; padding-inline: var(--space-2); white-space: nowrap; } @container tool (max-width: 560px) { .field-tier .segmented { grid-template-columns: repeat(3, 1fr); } } @container tool (max-width: 380px) { .field-tier .segmented { grid-template-columns: repeat(2, 1fr); } } /* ---- Inline error-code field (owner decision: sits right after Problem) ---- Overrides pages.css's legacy bottom-block .code-hook treatment when the hook renders as a control-row field. Input matches system fields; the result line spans the full row so a decoded meaning never squeezes the flex column. */ .tool-controls .code-hook { margin: 0; padding-top: 0; border-top: 0; } .field-code input { font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: 0.04em; text-transform: uppercase; min-width: 9ch; } .field-code input::placeholder { font-family: inherit; letter-spacing: 0; text-transform: none; } .field-code .code-hook-all { font-size: var(--text-2xs); margin-top: 4px; align-self: flex-start; } .tool-controls .code-result { flex: 1 1 100%; margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--ink-2); } /* Alignment fix (owner): .tool-controls aligns fields at flex-end, so the "All codes" link below the code input added height and pushed its input/label out of line with Appliance/Problem. The link now floats at the label row's right edge — the field's flex height is exactly label + input, symmetric. */ .field-code { position: relative; } .field-code .code-hook-all { position: absolute; top: 0; right: 0; margin: 0; line-height: 1.2; } /* ---- Division-aware brand lockup ---- */ /* The wordmark and the division line are two stacked links. The division line used to be a ~18px-tall tap target 1px under the logo (fails the 24px min target + adjacent-target spacing). Give it a >=24px effective height and >=8px separation, and drop the wordmark's 44px min-height WITHIN the lockup so the two targets don't inflate the header. The header links elsewhere (.brand standalone, .site-nav a, .theme-toggle, .cp-search-btn) already carry min-height:44px in styles.css. */ .brand-lockup { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .brand-lockup .brand { min-height: 0; } /* mark (28px) still exceeds the 24px target */ .brand-division { display: inline-flex; align-items: center; min-height: 24px; padding-block: 4px; /* + the gap above => >=8px separation from the wordmark link */ font-size: var(--text-2xs); font-weight: 650; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--brand); text-decoration: none; padding-left: 36px; /* aligns under the wordmark, clear of the mark */ white-space: nowrap; } .brand-division:hover { text-decoration: underline; } /* ==== U9 illustration wiring ==== */ .type-illo { width: 44px; height: 44px; flex: none; } .type-head { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-2) 0 var(--space-3); } .type-head h1 { margin: 0; } .hub-card-head { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); } .hub-card-head h3 { margin: 0; } .hub-card-head .type-illo { width: 40px; height: 40px; } .vcard-illo { display: flex; align-items: center; gap: var(--space-3); } .vcard-illo .type-illo { width: 40px; height: 40px; } .tile-illo { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; } .tile-illo .type-illo { width: 26px; height: 26px; } .cell-cite a { white-space: nowrap; }