/* ========================================================================== tokens.css — the design brief, compiled. doctor-fix-it-omaha-omaha-ne — brief.md v1 (C3 approved 2026-09-23), family `retro-local`, archetype `poster-hero`, signature "the swinging shingle". Every value below is copied from brief.md §2.1 (colour), §2.2 (contrast resolution), §2.3-2.4 (typography/type scale), §3.1 (section rhythm) and §5 (motion). Brief-specific tokens (sign-device geometry, wash gradient, swing/spin motion) are added in the marked slots per house-tech-spec §3's own allowance — never renaming or removing a required token. ========================================================================== */ :root { /* --- Colour (brief §2.1). Derivation: step 1 (real-world colour) does not attach — the site's current blue is inherited GoHighLevel funnel template CSS, not a chosen colour (dossier §4.5, dossier-schema §3.2's named ground for non-attachment). Step 2 (local character): standard Omaha residential trade, no distinct regional hue. Step 3 (family norms): oxblood-red, a classic sign-paint colour (retro-local family norm), verified distinct from the vertical's one other retro-local row and from all three real Omaha competitors' blue/orange kit (brief §2.1, §6). */ --scheme: light; --color-bg: #F5EEDC; /* chalk-cream — page ground */ --color-surface: #ECE3D0; /* parchment-oat, one step down — panels, form fields */ --color-ink: #241E1A; /* near-black warm ink */ --color-ink-muted: #5A4E44; /* warm umber-grey */ --color-accent: #7A2A24; /* oxblood-red — the dominant hue */ --color-accent-ink: #FFFFFF; /* white, on accent only */ /* House-required structural colours (consumed by base.css). Not stated as hex in the brief's own §2 (which covers the six required roles plus the contrast table); derived mechanically from the same palette rather than invented: --color-border-strong/--color-focus reuse --color-ink-muted, already measured in the brief's own contrast table at 6.95:1 (bg) / 6.31:1 (surface) — both comfortably clear the >=3:1 WCAG 1.4.11 floor a control boundary needs. --color-border stays a quiet, no-floor decorative hairline one step warmer than --color-surface. */ --color-border: #DCCFB4; /* DECORATIVE hairlines only — no contrast floor */ --color-border-strong: #5A4E44; /* = ink-muted; >=3:1 vs bg AND surface (WCAG 1.4.11) */ --color-focus: #5A4E44; /* = ink-muted; >=3:1 vs bg AND surface */ /* No --color-focus-on-band: one light mode, no dark band or inverted section anywhere on this site (brief §2.1 — light only). */ /* --color-focus-on-band: …; */ --color-selection-bg: #7A2A24; --color-selection-ink: #FFFFFF; /* Hero atmosphere wash (brief §2.2/§6): "radial-gradient(130% 90% at 50% -10%, rgba(122,42,36,0.16), transparent 55%), var(--color-bg)" — 122/42/36 is --color-accent's own RGB (#7A2A24) at 16% alpha. Named token rather than a literal in site.css, for the same reason as every other site in this repo: keeps site.css literal-free without depending on `rgb(from ...)` support. */ --color-accent-wash: rgba(122, 42, 36, 0.16); /* --- Typography (brief §2.3). Ultra: single style only (regular 400, no italic, no other weight exists for this face) — carries the H1 and the H2 "WHAT WE FIX" register. Barlow: two weights + one italic (400 body, 700 primary-CTA/job-name/header-phone/numerals, 400 italic — the small caption line only), the tile's 600 NOT shipped (brief §2.3: "every element the tile set at 600 renders at 700 instead"). 4 files, at the design-rules §5 cap. */ --font-display: 'Ultra', 'Ultra Fallback', Georgia, 'Times New Roman', serif; --font-body: 'Barlow', 'Barlow Fallback', -apple-system, BlinkMacSystemFont, sans-serif; --font-weight-display: 400; /* Ultra's only weight */ --font-weight-body: 400; /* Barlow Regular — paragraph text, job-note, secondary CTA */ --font-weight-body-strong: 700; /* Barlow Bold — primary CTA label, job-name, header phone link, numerals */ /* --- Type scale (brief §2.4), computed at floor/ceiling/375/1440 in the brief's own table. Root font-size assumed 16px, no html{font-size} override (matches the skeleton). --text-small is fixed (brief table lists it "—/—", i.e. not fluid) at the value the brief's own components use it for (FAQ/attribution/caption scale, same step the skeleton ships). */ --text-eyebrow: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --text-h1: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); --text-h2: clamp(1.35rem, 1.15rem + 1vw, 2rem); --text-lead: clamp(1rem, 0.95rem + 0.25vw, 1.1rem); --text-body: 1rem; --text-small: 0.875rem; /* House scale steps not named in brief §2.4 (h3, hero itself is --text-h1 on this site — brief has no separate --text-hero token, the H1 role IS --text-h1). --text-h3 kept at the skeleton's own step for the header wordmark and FAQ question rows. */ --text-h3: 1.3rem; --leading-tight: 1.05; --leading-snug: 1.25; --leading-body: 1.6; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.08em; /* eyebrows / small caps */ /* --- Space — house scale, unchanged by this brief. --- */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --space-3xl: 9rem; /* Inter-section rhythm (brief §3.1): --space-xl (64px), fixed at every width — corrects the tile's illustrative 3.5rem, which is not a step on the house scale. Two call sites only: .section's padding-block and the hero's padding-block-end. */ --section-gap: var(--space-xl); /* --- Layout — house defaults, unchanged by this brief. --- */ --layout-container: 72rem; --layout-measure: 62ch; --layout-gutter: clamp(1.25rem, 5vw, 3rem); --layout-tap-min: 44px; /* Sticky chrome (brief §3.2: "Sticky header: wordmark + tel: link"). Brief §3.4 cites 101px (56px header) as the documented house shape, but the Builder's own self-check (README.md "Build notes") found the header must wrap to 2 rows below 48em to avoid a real post-paint CLS regression — so --header-height is set to the actual measured MOBILE (2-row) flow height (113px), the wider case, so the `[id]` scroll-margin below never under-shoots at any width; the real sticky-chrome totals (measured, not assumed) are in README.md's fold-arithmetic table. */ --header-height: 7.0625rem; /* Sign-device geometry (brief §4.1/§3.4): fixed 220x170 CSS-px footprint, unchanged from 375px through 1440px — "no responsive up-scaling of the device is specified, so none is assumed." Fixed lengths, not clamp(). */ --sign-width: 13.75rem; /* 220px */ --sign-height: 10.625rem; /* 170px */ /* Weathervane finial (motion plan §5) — small fixed ornament mounted at the sign-device's own bracket point, unscaled by viewport (same "fixed decorative size" pattern the house uses for satellite ornaments). */ --vane-size: 2.125rem; /* 34px */ /* --- Radius / shadow / border — brief §2 states no departure from house defaults (no §3.4-style radius/shadow table in this brief, unlike other retro-local briefs); kept at the skeleton's own steps. */ --radius-none: 0; --radius-sm: 2px; --radius-md: 6px; --radius-lg: 16px; --radius-pill: 999px; --shadow-none: none; --shadow-sm: 0 1px 2px rgb(36 30 26 / 0.06); --shadow-md: 0 6px 24px rgb(36 30 26 / 0.09); --shadow-lg: 0 24px 60px rgb(36 30 26 / 0.14); --border-hairline: 1px; --border-thick: 3px; --border-style: solid; /* --- Motion (brief §5). House reveal defaults kept as-is: fade + rise, --duration-base (320ms), --ease-out, --reveal-shift (1.25rem), --reveal-stagger (90ms) — "no new motion tokens are introduced." */ --duration-fast: 140ms; --duration-base: 320ms; --duration-slow: 640ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --reveal-shift: 1.25rem; --reveal-stagger: 90ms; /* Signature move — the swinging shingle + weathervane (brief §5, carried unchanged from the C2-approved tile). Two coprime periods so the loops never repeat in phase. */ --duration-sign-swing: 9s; --ease-sign-swing: var(--ease-in-out); --duration-vane-turn: 13s; --ease-vane-turn: linear; /* --- Z layers — house defaults, unchanged. --- */ --z-base: 0; --z-header: 100; --z-nav-panel: 200; --z-skip-link: 300; } /* -------------------------------------------------------------------------- @font-face — self-hosted woff2, latin subset, static instances only. Ultra: Apache 2.0, Astigmatic/Brian J. Bonislawsky — the source repo files it under apache/ultra/, not ofl/ultra/ (confirmed against github.com/google/fonts on build, not assumed from the brief, which named OFL 1.1; see README.md "Build notes" for the correction). Barlow: SIL OFL 1.1 (assets/fonts/OFL-Barlow.txt). Subset to the house declared safe range (house-tech-spec §8). Coverage gap, recorded per §8's own instruction: U+2011/2012/2015 absent from ALL FOUR faces alike (the pilot site's own documented "lack it equally" case — no FIX). Asymmetric gap, also recorded: Ultra additionally lacks U+2010 and U+2032/U+2033, which all three Barlow instances carry. Per §8 this would be FIX-worthy ONLY if a character in that gap actually renders in the face missing it — checked against this site's copy (grepped, zero hits: the H1/H2 strings Ultra carries are "The handyman Omaha keeps calling back.", "WHAT WE FIX", "THE SAME GUY, EVERY TIME" — no hyphen or prime-mark character in any of them), so the census check passes clean. Re-check on any copy amendment touching Ultra-set text. -------------------------------------------------------------------------- */ @font-face { font-family: 'Ultra'; src: url('../assets/fonts/ultra-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033; } @font-face { font-family: 'Barlow'; src: url('../assets/fonts/barlow-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033; } @font-face { font-family: 'Barlow'; src: url('../assets/fonts/barlow-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033; } @font-face { font-family: 'Barlow'; src: url('../assets/fonts/barlow-latin-400italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+2122, U+00B0, U+00B7, U+00BF, U+00C0-00FF, U+2010-2015, U+2018-201A, U+201C-201E, U+2026, U+2032-2033; } /* --- Metrics-matched fallbacks (house-tech-spec §8, brief §2.3's named gap). Barlow values REUSED from prior sites' own webfont files, confirmed BYTE-IDENTICAL (unitsPerEm, hhea/OS-2 metrics, weighted advance widths — "a property of the font, not the site," poop-busters-clarksville-tn's own README): 400/700 from poop-busters-clarksville-tn, italic from kopp-fencing-cedar-rapids-ia (all Arial donor). Ultra's Georgia-tuned values were reused the same way at first but `local('Georgia')` never resolves in this build/QA environment (no Georgia or Times New Roman installed, only Liberation*/DejaVu* — `fc-list`), so the face failed to bind and the H1 rendered in un-adjusted generic serif, wrapping 2 lines instead of 3 — a 65.9px->98.9px jump, CLS 0.247. `local('Liberation Serif')` is added as a second donor and the overrides below are RE-MEASURED directly against it (`node scripts/font-metrics.mjs`), not reused — full derivation in README.md "Build notes." Verify: `node scripts/qa/lighthouse.mjs` — CLS should read 0.000. */ @font-face { font-family: 'Ultra Fallback'; src: local('Georgia'), local('Liberation Serif'); font-weight: 400; font-style: normal; size-adjust: 157.81%; ascent-override: 63.92%; descent-override: 17.36%; line-gap-override: 0%; } @font-face { font-family: 'Barlow Fallback'; src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans'); font-weight: 400; font-style: normal; size-adjust: 96.96%; ascent-override: 103.14%; descent-override: 20.63%; line-gap-override: 0%; } @font-face { font-family: 'Barlow Fallback'; src: local('Helvetica Neue Bold'), local('Arial Bold'), local('Liberation Sans Bold'), local('Liberation Sans'); font-weight: 700; font-style: normal; size-adjust: 92.39%; ascent-override: 108.23%; descent-override: 21.65%; line-gap-override: 0%; } @font-face { font-family: 'Barlow Fallback'; src: local('Helvetica Neue Italic'), local('Arial Italic'), local('Liberation Sans Italic'), local('Liberation Sans'); font-weight: 400; font-style: italic; size-adjust: 94.58%; ascent-override: 105.73%; descent-override: 21.15%; line-gap-override: 0%; }