/* ========================================================================== tokens.css — Geaux Cuts Landscaping (geaux-cuts-landscaping-shreveport-la) Compiled from the approved brief (runs/geaux-cuts-landscaping-shreveport-la/ brief.md §2-§7). family: clean-clinical · archetype: editorial-stack · palette: shell-limestone/bone-white, light. Every value below is the brief's, translated into the house token names (house-tech-spec §3). No value here is improvised. ========================================================================== */ :root { /* --- Colour (brief §2.1, §2.2) ------------------------------------------- Derivation order per design-rules §6: no real-world brand colour to echo (dossier — brand_color omitted, logo monochrome) -> local character (not argued by this tile) -> family norms (clean-clinical's airy, high-white register, pushed warm because the dossier voice is neighbourly, not clinical-cold). The §6.1 semantic anchor (green/growth) is carried by imagery (§7), not by the dominant ground colour — brief §2, §11. Every text/bg pairing below is computed in brief §2.2's contrast table. */ --scheme: light; --color-bg: #FAF8F4; /* bone-white — page ground */ --color-surface: #F1ECE3; /* shell-limestone — hero atmosphere far stop, raised panels */ --color-ink: #23272B; /* cool charcoal-slate */ --color-ink-muted: #5B6268; /* secondary text — 5.83:1 on bg, 5.26:1 on surface */ --color-accent: #3F5D45; /* moss-green — the §6.1 anchor's text-safe accent */ --color-accent-ink: #FFFFFF; /* House-required structural colours */ --color-border: #DDD6C9; /* decorative hairlines only, no contrast floor */ --color-border-strong: #8C857A; /* control boundaries — 3.44:1 vs bg, 3.10:1 vs surface (brief §2.2 pair 9) */ --color-focus: #3F5D45; /* :focus-visible ring — AA vs bg AND surface */ --color-selection-bg: #3F5D45; --color-selection-ink: #FFFFFF; /* No dark band anywhere on this site (brief §2.1) — --color-focus-on-band is intentionally not declared. */ /* Brief-specific colour */ --color-accent2: #A6472B; /* straw-rust — dossier §4.1 V-tier material fact */ --color-accent2-ink: #FFFFFF; /* --- Typography (brief §3) ------------------------------------------------ Display: Hanken Grotesk (SIL OFL 1.1). Body: Source Sans 3 (SIL OFL 1.1). Four static woff2 files, house cap 4 (brief §3.1): hanken-grotesk-600 -> h2/h3, nav wordmark, table , primary CTA label, inline emphasis (the display face carries emphasis duty — no separate body-bold file, keeps the count at 4) hanken-grotesk-700 -> hero h1, pricing-row index numerals (01-07) source-sans-3-400 -> all body copy, FAQ answers, footer source-sans-3-400italic -> the two verbatim review quotes only --font-weight-body-strong is a required token name; it is used ONLY on elements that also switch font-family to --font-display (§8 below), per the brief's own routing — never to fake-bold Source Sans 3, which has no 600 file on this site. */ --font-display: 'Hanken Grotesk', 'Hanken Grotesk Fallback', Arial, sans-serif; --font-body: 'Source Sans 3', 'Source Sans 3 Fallback', Arial, sans-serif; --font-weight-body: 400; --font-weight-body-strong: 600; /* Hanken Grotesk 600 — only where font-family is also switched */ --font-weight-display: 600; /* h2/h3, nav wordmark, table th, CTA label, strong */ --font-weight-hero: 700; /* hero h1 + pricing row numerals only */ /* --- Type scale (brief §3.2, fluid via clamp(), floor 375px / ceiling 1440px) */ --text-hero: clamp(2.1rem, 1.5rem + 2.7vw, 3.5rem); /* 33.6 / 34.1@375 / 56.0@1440 */ --text-h2: clamp(1.5rem, 1.3rem + 1vw, 1.9rem); /* 24.0 / 24.5@375 / 30.4@1440 */ --text-h3: clamp(1.15rem, 1.05rem + 0.6vw, 1.35rem); /* 18.4 / 19.1@375 / 21.6@1440 */ --text-lead: clamp(1rem, 0.94rem + 0.22vw, 1.12rem); /* 16.0 / 16.0@375 / 18.2@1440 */ --text-body: clamp(0.96rem, 0.93rem + 0.14vw, 1.02rem); /* 15.4 / 15.4@375 / 16.3@1440 */ --text-small: 0.8125rem; /* fixed — footer fine print, table captions */ --text-eyebrow: 0.75rem; /* fixed — not sale-carrying type (brief §3.2) */ --leading-tight: 1.03; --leading-snug: 1.25; --leading-body: 1.45; --tracking-tight: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.08em; /* eyebrows */ /* --- Space (house default, brief §4.3 confirms --section-gap only) ------- */ --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; --section-gap: var(--space-xl); /* 64px, the only inter-section token (brief §4.3) */ /* --- Layout (house default, brief §4.4) ----------------------------------- */ --layout-container: 72rem; --layout-measure: 62ch; --layout-gutter: clamp(1.25rem, 5vw, 3rem); --layout-tap-min: 44px; /* The living-hero field's own height (brief §4.4): clamp floor resolves to exactly 320px at 375px width (the brief's stated target), growing toward 448px by 1440px. Brief-added structural token, not a house one. */ --hero-field-height: clamp(20rem, 17rem + 8vw, 28rem); /* --- Radius / shadow / border --------------------------------------------- Brief is silent on radius/shadow (no §2/§4 line argues a whole-site answer, unlike e.g. dakota-lawn-landscape's explicit "zero rounding"). House defaults kept unmodified rather than introducing an uncited value. */ --radius-none: 0; --radius-sm: 2px; --radius-md: 6px; --radius-lg: 16px; --radius-pill: 999px; --shadow-none: none; --shadow-sm: 0 1px 2px rgb(35 39 43 / 0.06); --shadow-md: 0 6px 24px rgb(35 39 43 / 0.09); --shadow-lg: 0 24px 60px rgb(35 39 43 / 0.14); --border-hairline: 1px; --border-thick: 3px; /* the moss-green head-rule (brief §4.3) */ --border-style: solid; /* --- Motion (brief §7) ----------------------------------------------------- House reveal timings, unmodified, plus the three unsynced signature loops: sheen sweep 9s linear, sprig sway 8.3s ease-in-out, straw tag float 5.6s ease-in-out — no common small-integer ratio, so the three never visibly re-align (brief §7). */ --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-device tokens (brief §7) — brief-added, not house-required. */ --duration-sheen: 9s; --duration-sprig: 8.3s; --duration-tag-float: 5.6s; --sprig-sway-angle: 3deg; --tag-float-distance: 4px; /* --- Z layers ------------------------------------------------------------- */ --z-base: 0; --z-header: 100; --z-nav-panel: 200; --z-skip-link: 300; } /* -------------------------------------------------------------------------- @font-face — self-hosted woff2, latin subset, font-display: swap. Licences: assets/fonts/OFL-HankenGrotesk.txt, assets/fonts/OFL-SourceSans3.txt (SIL OFL 1.1, both). Sourced from fonts.gstatic.com 2026-09-14, re-subset locally to the house declared safe range (house-tech-spec §8) with pyftsubset — no remote font request ships on this site. COVERAGE GAP, disclosed per house-tech-spec §8 (the "found on first use" paragraph): Hanken Grotesk (both weights, confirmed against the family's own variable source file) carries NONE of U+2010, U+2011, U+2012, U+2032, U+2033 — an inherent gap in the typeface, not a subsetting artefact. Source Sans 3 DOES carry all five. This is the "one face lacks what the other carries" case the spec calls out as a coverage MISMATCH rather than a shared gap — and it is inert on this site: copy.md's only non-ASCII characters are the middle dot (U+00B7, present in every face here) and an em dash confined to Builder-instruction prose that never reaches the page (grep-verified). No hyphen-variant or prime character is ever set in a Hanken Grotesk context (h2/h3, nav wordmark, table , CTA label, ) or anywhere else, so the census check reads clean. Recorded here so the next Builder inherits the fact rather than rediscovering it — same resolution pattern as full-circle-land-design-chattanooga-tn's tokens.css. -------- */ @font-face { font-family: 'Hanken Grotesk'; src: url('../assets/fonts/hanken-grotesk-600.woff2') format('woff2'); font-weight: 600; 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: 'Hanken Grotesk'; src: url('../assets/fonts/hanken-grotesk-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: 'Source Sans 3'; src: url('../assets/fonts/source-sans-3-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: 'Source Sans 3'; src: url('../assets/fonts/source-sans-3-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 §7/§8). Measured with scripts/font-metrics.mjs (the fontaine algorithm, English-letter-frequency weighted) against the four shipped webfonts, donor Liberation Sans Regular (Arial's metric-compatible open clone, installed on this build machine) — the shipped CSS still names the brief's first-choice local face ('Arial') first, per house-tech-spec §7.1's exception-5 precedent. */ @font-face { font-family: 'Hanken Grotesk Fallback'; src: local('Arial'), local('Liberation Sans'); font-weight: 600; font-style: normal; size-adjust: 102.66%; ascent-override: 97.40%; descent-override: 29.51%; line-gap-override: 0%; } @font-face { font-family: 'Hanken Grotesk Fallback'; src: local('Arial'), local('Liberation Sans'); font-weight: 700; font-style: normal; size-adjust: 103.16%; ascent-override: 96.94%; descent-override: 29.37%; line-gap-override: 0%; } @font-face { font-family: 'Source Sans 3 Fallback'; src: local('Arial'), local('Liberation Sans'); font-weight: 400; font-style: normal; size-adjust: 94.14%; ascent-override: 108.77%; descent-override: 42.49%; line-gap-override: 0%; } @font-face { font-family: 'Source Sans 3 Fallback'; src: local('Arial'), local('Liberation Sans'); font-weight: 400; font-style: italic; size-adjust: 91.93%; ascent-override: 111.39%; descent-override: 43.51%; line-gap-override: 0%; }