/* ========================================================================== tokens.css — the design brief, compiled. Source: runs/daniels-lawn-care-landscaping-longview-tx/brief.md, approved at C3 (runs/daniels-lawn-care-landscaping-longview-tx/c3-decision.md). Every value below traces to a brief section cited in its comment. Nothing here is a model default. --text-h2 and --text-h3 ARE A BUILD-TIME GAP FILL, NOT A BRIEF VALUE — brief §3.4's fluid-scale table never states a section-heading size, even though §4.1's plan needs two

s and base.css's `h2`/`h3` rules need the tokens regardless. Filled with the SAME linear-interpolation method the brief used for its other five scales; flagged in README.md for the Art Director rather than invented as a free aesthetic choice. ========================================================================== */ :root { /* --- Colour -------------------------------------------------------------- Brief §3.1. Derivation: dossier §4.5 ground 4 withholds a real brand- colour echo (no logo, no truck/signage/livery, the business's own imagery is generic watermarked stock clip art), so the palette moves to family norms per design-rules §6, argued at C2. One deliberate mode: light. Full contrast table is brief §3.2. */ --scheme: light; --color-bg: #FBF3E7; /* cream — page ground */ --color-surface: #FDF6E8; /* warm "ticket paper" — corrected per brief §2.2 from the tile's unused #F3E4CF */ --color-ink: #3A2A1E; /* umber-black — body + heading text */ --color-ink-muted: #6B5440; /* eyebrow, lead, facts row — 6.43:1 on bg */ --color-accent: #A94F27; /* clay-umber — the one colour that means "act" */ --color-accent-ink: #FFF8EF; /* text on accent — 5.19:1 */ --color-support: #3E6B3F; /* fern — the §6.1 growth anchor's tick colour. DECORATIVE / LARGE-ELEMENT USE ONLY, never body copy (brief §3.1 — a design restriction carried from C2, not a contrast failure: it clears AA body too). */ --color-border: #E3D3B6; /* decorative hairlines only, no contrast floor */ --color-border-strong: #8C6F52; /* a control's own boundary, WCAG 1.4.11, ≥3:1 both grounds */ --color-focus: #A94F27; /* = accent; no dark band on this site, so no --color-focus-on-band */ --color-selection-bg: #A94F27; --color-selection-ink: #FFF8EF; /* Brief-specific: the ticket/job-card lift, a warm-tinted shadow rather than the house neutral --shadow-sm/md/lg (brief §3.1 — a grey shadow under warm paper reads as a printing error, not a lift). */ --shadow-ticket: 0 6px 14px rgb(58 42 30 / 0.18); /* Brief-specific: the hero's radial atmosphere nearest stop (brief §3.2 — "the hero background is radial-gradient(130% 90% at 80% -10%, #F7E9D3 0%, var(--color-bg) 55%)"; its darkest reachable point, L = 0.8275, measured against every text colour that sits over it in the brief's own contrast table). */ --color-hero-atmosphere: #F7E9D3; /* --- Typography ------------------------------------------------------------ Brief §3.3: display Caudex 700 (upright) + 400 Italic (the one emphasis role on the site — the italic word inside the H1), SIL OFL 1.1. Body Karla 400/700, SIL OFL 1.1. Both self-hosted, static per-weight instances (no variable-font wght axis, per house-tech-spec §8's font-variation-settings/wght trap). */ --font-display: 'Caudex', 'Caudex Fallback', 'Caudex Fallback 2', Georgia, 'Times New Roman', serif; --font-body: 'Karla', 'Karla Fallback', Arial, sans-serif; --font-weight-body: 400; --font-weight-body-strong: 700; --font-weight-display: 700; /* H1, section heads, job-card labels, "Job Ticket" label (brief §3.3) */ --font-weight-emphasis: 400; /* brief-specific: Caudex Italic, the H1's one italic accent word only */ /* --- Type scale ---------------------------------------------------------- Brief §3.4, computed at floor (375) / ceiling (1440) by linear interpolation, viewport-locked. --text-h2/--text-h3: see file-header note — not a brief value, flagged as a gap fill. */ --text-eyebrow: clamp(0.8125rem, 0.769rem + 0.188vw, 0.9375rem); /* 13 / 15px */ --text-h1: clamp(2.2rem, 1.425rem + 3.305vw, 4.4rem); /* 35.2 / 70.4px */ --text-h2: clamp(1.5rem, 1.236rem + 0.0704vw, 2.25rem); /* GAP FILL — 24 / 36px, see file header */ --text-h3: clamp(1.125rem, 1.037rem + 0.0235vw, 1.375rem); /* GAP FILL — 18 / 22px, unused today (no h3 content), reserved for job-card headings */ --text-lead: clamp(1.0625rem, 0.9745rem + 0.376vw, 1.3125rem); /* 17 / 21px */ --text-body: clamp(1rem, 0.978rem + 0.094vw, 1.0625rem); /* 16 / 17px */ --text-small: clamp(0.875rem, 0.853rem + 0.094vw, 0.9375rem); /* 14 / 15px */ --leading-tight: 1.05; --leading-snug: 1.25; --leading-body: 1.6; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.08em; /* eyebrows / ticket field labels */ /* --- Space ----------------------------------------------------------------- House scale, unchanged. Brief §3.5 picks --section-gap = --space-xl (64px) as the ONE inter-section spacing value. */ --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); /* brief §3.5 — 64px, floor and ceiling */ /* --- Layout ----------------------------------------------------------------- */ --layout-container: 72rem; --layout-measure: 62ch; --layout-gutter: clamp(1.25rem, 5vw, 3rem); --layout-tap-min: 44px; /* Brief-specific: the wide container the hero, "What's on the ticket" and footer/contact sections share at >=64rem, so their content edges align down the page (brief §5.1/§5.2/§5.3). At 1440: 1440 - 2x72 = 1296px content area. Below 64rem the plain --layout-gutter above applies. */ --layout-container-wide: 90rem; /* 1440px, brief §5.1 */ --layout-gutter-wide: 4.5rem; /* brief §5.1/§5.2/§5.3 */ /* --- Radius / shadow / border ----------------------------------------- Brief §3.5: --radius-sm for buttons (house default). The ticket plate and job-cards use a brief-specific 3px step, not the house 6px --radius-md, because 3px is not on the house scale and the family's "hand-built, honest" register argues for the sharper corner of a real paper ticket over the rounder house default. */ --radius-none: 0; --radius-sm: 2px; --radius-md: 6px; --radius-lg: 16px; --radius-pill: 999px; --radius-ticket: 3px; /* brief §3.5 — ticket plate + both job-cards */ --shadow-none: none; --shadow-sm: 0 1px 2px rgb(58 42 30 / 0.06); --shadow-md: 0 6px 24px rgb(58 42 30 / 0.09); --shadow-lg: 0 24px 60px rgb(58 42 30 / 0.14); --border-hairline: 1px; --border-thick: 3px; --border-style: solid; /* --- Motion ------------------------------------------------------------ House reveal tokens, unchanged (base.css collapses these under prefers-reduced-motion, spec §8). --reveal-stagger is already the house 90ms the brief's §9 asks for the job-card group — no override needed. */ --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; /* Brief §9 — the signature move: three independently-timed ambient loops in the hero's ticket-scene, non-synchronised by construction (three different, mutually prime-ish periods). Collapsed to a neutral rest transform under prefers-reduced-motion in site.css (brief-specific tokens, not reached by base.css's blanket --duration-* collapse). */ --loop-ticket: 8.6s; --loop-pencil: 6.2s; --loop-sprig: 7.1s; --sway-angle: 1.5deg; /* execution-level amplitude — brief §9 states "sways"/"rocking", no angle; house precedent (aaa-lawn-services-dayton-oh) treats this as an execution detail, not a design decision */ /* --- Z layers ----------------------------------------------------------- */ --z-base: 0; --z-header: 100; --z-nav-panel: 200; --z-skip-link: 300; /* --- Brief-specific: hero ticket-scene composition (brief §4.2 arithmetic, §5.1, §7). Execution-level sizes within that arithmetic are tokenized here per spec §3 (no raw literals outside this file). */ --hero-scene-bleed: -1.25rem; /* brief §5.1 — margin-inline cancelling the hero's own gutter at <64rem */ --hero-field-height: 11.875rem; /* 190px — brief §4.2's own arithmetic ("Ticket-scene (field) | 303 | 190 | 493") */ --hero-turf-height: 40%; /* brief §7 — "the lower ~40% of the hero frame at 375 ... is living turf"; 100% at >=64rem (brief §7 — "the full-height scene column at 1440") */ --hero-cta-gap: 1.25rem; /* 20px — brief §4.2's own arithmetic ("cta-row margin-bottom 20px") */ --ticket-width: 11rem; /* execution-level, not stated by brief (unlike the §5.2 precedent on aaa-lawn-services-dayton-oh, this brief gives no inner pixel table) */ --ticket-min-width: 9rem; --ticket-top: var(--space-sm); --ticket-left: var(--space-md); --pencil-width: 0.75rem; --pencil-height: 5rem; --pencil-bottom: var(--space-md); --pencil-right: var(--space-2xl); --sprig-width: 0.875rem; --sprig-height: 1.875rem; --sprig-bottom: var(--space-sm); --sprig-right: var(--space-md); --shape-leaf: 0 100% 0 100%; /* asymmetric "leaf" corner radius — the hero's CSS-drawn sprig prop, execution-level */ /* --- Brief-specific: desktop hero grid (brief §5.1) --------------------- */ --hero-text-column: 36rem; /* brief §5.1 — "grid-template-columns: 36rem 1fr" */ --hero-column-gap: 3.5rem; /* brief §5.1 — "column-gap: 3.5rem" */ --hero-lead-measure: 40ch; /* brief §5.1 — "the lead's max-width: 40ch at this width" */ /* --- Brief-specific: "What's on the ticket" job-card grid (brief §4.1, §5.2) --- */ --job-card-gap: 0.9rem; /* brief §5.2 — "margin-top: 0.9rem between them" at <64rem */ --job-card-col-gap: 2rem; /* brief §5.2 — "gap: 1rem 2rem" at >=64rem; row gap reuses --space-sm (1rem) */ --job-card-row-max-width: 60rem; /* brief §5.2 — the unstamped card's own row, centred */ /* --- Brief-specific: footer/contact centred column (brief §5.3) --------- */ --contact-max-width: 42rem; /* brief §5.3 */ /* --- Brief-specific: "What's on the ticket" section figure (tool-texture, brief §7 slot 2) — execution-level cap, not stated by the brief. --- */ --section-figure-max-width: 20rem; --footer-sprig-width: 6rem; /* execution-level — the footer NAP accent (brief §7 slot 3) */ /* --- Brief-specific: sticky header (brief §4.2, §5.4) -------------------- */ --header-wordmark-size: 1.05rem; /* brief §4.2 — "Daniel's Lawn Care" (Caudex 700, 1.05rem)" */ --nav-toggle-reserve: 0; /* no collapsible nav on this one-pager (brief §5.4) — no toggle to reserve space for */ } /* -------------------------------------------------------------------------- @font-face — self-hosted woff2, latin subset, static instances only (no variable-font axis). Caudex: SIL OFL 1.1, copyright Hjort Nidudsson, with Reserved Font Name Caudex. Karla: SIL OFL 1.1, The Karla Project Authors. Licence text: assets/fonts/OFL.txt. Subset to the house declared range (house-tech-spec §8), identical on all four faces. Coverage gap against the actual shipped files (checked with fontTools, not assumed): U+2010, U+2011, U+2012, U+2015, U+2032, U+2033 are declared and absent from both Karla weights alike — none render in this site's copy (no em-dash, no en-dash, no prime marks — copy.md rule 4/5), and a page falling back for one of them falls back consistently across every face, never mid-sentence in two. Caudex (both weights) also lacks U+2122 (™), which this site's copy never renders either. -------------------------------------------------------------------------- */ @font-face { font-family: 'Caudex'; src: url('../assets/fonts/caudex-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: 'Caudex'; src: url('../assets/fonts/caudex-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; } @font-face { font-family: 'Karla'; src: url('../assets/fonts/karla-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: 'Karla'; src: url('../assets/fonts/karla-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; } /* --- Metrics-matched fallbacks (house-tech-spec §7/§8, brief §3.3). Donors: Gelasio (Georgia's metric-compatible proxy), Liberation Sans (Arial's). Overrides computed by scripts/font-metrics.mjs from the real shipped instances' own OS/2 + hhea metrics (the fontaine algorithm). 'Caudex Fallback 2' is a required second tier (precedent: aaa-lawn-services-dayton-oh, 3-dogs-and-a-girl-lincoln-ne) measured against DejaVu Serif/Bold, the face this build machine's generic `serif` actually resolves to with neither Georgia nor Gelasio installed. Full reasoning and the measured CLS result: README.md. */ @font-face { font-family: 'Caudex Fallback'; src: local('Georgia'), local('Gelasio'); font-weight: 700; font-style: normal; size-adjust: 88.26%; ascent-override: 112.53%; descent-override: 33.53%; line-gap-override: 0%; } @font-face { font-family: 'Caudex Fallback'; src: local('Georgia Italic'), local('Gelasio Italic'); font-weight: 400; font-style: italic; size-adjust: 100.65%; ascent-override: 98.67%; descent-override: 29.4%; line-gap-override: 0%; } @font-face { font-family: 'Caudex Fallback 2'; src: local('DejaVu Serif Bold'), local('DejaVu Serif'); font-weight: 700; font-style: normal; size-adjust: 79.73%; ascent-override: 124.57%; descent-override: 37.11%; line-gap-override: 0%; } @font-face { font-family: 'Caudex Fallback 2'; src: local('DejaVu Serif'); font-weight: 400; font-style: italic; size-adjust: 88.05%; ascent-override: 112.79%; descent-override: 33.61%; line-gap-override: 0%; } @font-face { font-family: 'Karla Fallback'; src: local('Arial'), local('Liberation Sans'); font-weight: 400; font-style: normal; size-adjust: 103.53%; ascent-override: 88.57%; descent-override: 24.34%; line-gap-override: 0%; } @font-face { font-family: 'Karla Fallback'; src: local('Arial Bold'), local('Liberation Sans Bold'); font-weight: 700; font-style: normal; size-adjust: 100.06%; ascent-override: 91.64%; descent-override: 25.18%; line-gap-override: 0%; }