/* ========================================================================== HW Tree Service LLC - Design Tokens Every color, font, space, and timing value in the site is declared here. Nothing downstream hard-codes a raw value. LOCKED DECISIONS (do not break these without updating notes.md): - ONE accent color: the red from HW's own mark. Used identically on every page. - ONE corner radius: 2px on every surface. Rugged, not glossy. - ONE theme per view: light by default, dark via prefers-color-scheme. Sections never invert against the page theme. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TYPEFACES Self-hosted woff2 (no third-party font CDN, keeps LCP and privacy clean). Pairing per the DGB font package, trade-contractor row: display = Barlow Condensed 800, labels = Barlow Condensed 700, body = Barlow. -------------------------------------------------------------------------- */ @font-face { font-family: 'Barlow'; src: url('../fonts/barlow-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow'; src: url('../fonts/barlow-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Barlow Condensed'; src: url('../fonts/barlow-condensed-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } :root { --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif; --font-label: 'Barlow Condensed', 'Arial Narrow', sans-serif; --font-body: 'Barlow', 'Helvetica Neue', sans-serif; /* ------------------------------------------------------------------------ 2. TYPE SCALE Fluid via clamp so nothing needs a breakpoint to stay readable. Body floor is 17px: this audience reads on a phone in bright daylight. ------------------------------------------------------------------------ */ --t-display: clamp(2.75rem, 1.6rem + 5.1vw, 5.5rem); --t-h1: clamp(2.375rem, 1.5rem + 3.9vw, 4.25rem); --t-h2: clamp(1.875rem, 1.35rem + 2.3vw, 3rem); --t-h3: clamp(1.3125rem, 1.13rem + 0.8vw, 1.75rem); --t-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); --t-body-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.28rem); --t-body: 1.0625rem; --t-small: 0.9375rem; --t-label: 0.8125rem; --lh-tight: 0.96; --lh-head: 1.08; --lh-body: 1.62; --tracking-label: 0.08em; --tracking-display: -0.015em; /* ------------------------------------------------------------------------ 3. SPACE SCALE ------------------------------------------------------------------------ */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.75rem; --s-8: 4rem; --s-9: 5.5rem; --s-10: 7.5rem; /* Section rhythm: tighter on phones, generous on desktop. */ --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); --gutter: clamp(1.125rem, 0.6rem + 2.2vw, 2.5rem); --measure: 65ch; --wrap: 1280px; --wrap-narrow: 860px; /* ------------------------------------------------------------------------ 4. SHAPE + ELEVATION ONE radius everywhere. Shadows are tinted to the accent hue, never pure black. ------------------------------------------------------------------------ */ --r: 2px; --border: 1px; /* ------------------------------------------------------------------------ 5. MOTION MOTION_INTENSITY 7: a video hero, a time-based hero entrance, transform only scroll drift on editorial imagery, and hover feedback. No scroll hijack, no infinite loops, and nothing that gates content visibility. Everything collapses to static under prefers-reduced-motion. ------------------------------------------------------------------------ */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 140ms; --dur: 260ms; --dur-slow: 620ms; /* ------------------------------------------------------------------------ 6. LAYER SCALE Documented so nothing invents a z-index. ------------------------------------------------------------------------ */ --z-base: 1; --z-sticky: 100; --z-nav: 200; --z-skip: 300; /* ------------------------------------------------------------------------ 7. COLOR - LIGHT (default) REBRANDED TO RED 24 Aug 2026. The owner replaced the green-and-black mark with a red-and-white one, so the palette follows the logo rather than the logo fighting the palette. --accent is his mark's exact red, sampled off the artwork he sent (#DE0201 was the single most common opaque red in it). Every pairing below was measured, not eyeballed. His red is a hot one, so the light surfaces are deliberately lighter than the old green system's: at the old --surface-sunk (#eef0ed) the red measured 4.33:1 and failed AA for body text. --surface-sunk was raised until it cleared, while keeping paper-to-sunk separation (1.045) in line with the old system's (1.067) so sections still read as distinct bands. --ink on --paper 16.7:1 (AAA) --ink-soft on --paper 8.2:1 (AAA) --ink-faint on --paper 4.5:1 (AA) --accent on --paper 4.7:1 (AA) --accent on --surface 5.0:1 (AA) --accent on --surface-sunk 4.5:1 (AA) --accent-deep on --paper 7.3:1 (AAA) --ink on --accent-tint 16.4:1 (AAA) --accent on --accent-tint 4.6:1 (AA) white on --accent 5.1:1 (AA) ------------------------------------------------------------------------ */ --paper: #f7f6f6; --surface: #fdfdfd; --surface-sunk: #f2f1f1; --ink: #16161a; --ink-soft: #464a52; --ink-faint: #6e7178; /* His mark's exact red. Do not "correct" this value. */ --accent: #DE0201; --accent-deep: #A80007; --accent-tint: #fef1f0; --line: #dedbdb; --line-strong: #bdb9b9; /* Form control borders are UI component boundaries, so WCAG 1.4.11 wants 3:1 against their background. --line-strong is tuned for decorative hairlines and only reaches 1.8:1, which is why fields get their own token. Measures 3.5:1 on --surface. */ --field-border: #84807f; --focus: #A80007; --shadow: 0 2px 4px rgba(30, 20, 22, 0.05), 0 12px 28px rgba(30, 20, 22, 0.07); --shadow-lift: 0 3px 6px rgba(30, 20, 22, 0.07), 0 18px 40px rgba(30, 20, 22, 0.11); /* Accent for use ON the dark hero scrim. The hero is dark in BOTH themes, so this token is deliberately NOT redefined in the dark block: the light theme's --accent (#DE0201) only reaches 3.7:1 against the scrim. Measures 9.4:1 on the scrim, the same in either theme. */ --accent-hero: #FF8A80; /* Inverted band (the dark CTA strip). Deliberate and used site-wide, not a mid-page theme flip. Near-black rather than a block of red: a full-bleed red band at that size overwhelms the photography and reads as a warning label, which lets his red stop being the accent. */ --band: #191416; --band-ink: #f4f2f2; --band-ink-soft: #c3bcbc; --band-line: rgba(244, 242, 242, 0.18); color-scheme: light; } /* -------------------------------------------------------------------------- 8. COLOR - DARK Same hierarchy and the same accent identity, re-weighted. His #DE0201 only reaches 3.7:1 on a near-black page, which fails AA for body text, so dark mode uses a lightened red. It is still unmistakably his red, just survivable on black. This is the normal brand-to-dark-mode move, not a different brand. --ink on --paper 16.1:1 (AAA) --ink-soft on --paper 8.4:1 (AAA) --ink-faint on --paper 5.5:1 (AA) --accent on --paper 7.0:1 (AAA) --accent on --surface 6.6:1 (AAA) --accent-deep on --paper 8.9:1 (AAA) near-black on --accent 7.0:1 (AAA) <- solid-button label -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { --paper: #111011; --surface: #191718; --surface-sunk: #201d1e; --ink: #eeecec; --ink-soft: #b2abac; --ink-faint: #8f8889; --accent: #FF6F6A; --accent-deep: #FF938E; --accent-tint: #2a1517; --line: #2c2829; --line-strong: #403a3b; /* 3.3:1 on the dark --surface. See the light-theme note above. */ --field-border: #6f6869; --focus: #FF938E; --shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.45); --shadow-lift: 0 3px 6px rgba(0, 0, 0, 0.45), 0 18px 40px rgba(0, 0, 0, 0.55); --band: #140f11; --band-ink: #eeecec; --band-ink-soft: #aca4a5; --band-line: rgba(238, 236, 236, 0.16); color-scheme: dark; } }