/* ========================================================================== Ondervale design system — TOKENS (v1, full visual redesign) -------------------------------------------------------------------------- Shared skeleton for ALL pages. One domain, many niches. THE SKIN MECHANISM (unchanged from v0) A niche page changes exactly THREE things: copy, imagery, and --accent. Theme a page by setting ONLY: :root { --accent: ; --accent-contrast: ; } Everything else derives automatically: hovers, soft tints, and the new --accent-bright (accent mixed with white — the AA-safe accent for text on the dark ink bands). v1 DESIGN DIRECTION (owner review 2026-08: "wouldn't trust it in 1998") Benchmarked against the three owner-named references (placepaymedia.com, dexteraintel.com, hellodexter.com). What changed: - Bigger, tighter display type (clamp up to 4rem, -0.025em tracking) - Cool-slate neutral ramp (was warm gray) + an INK band pair for dark sections (hero / CTA band / footer) — "color confidence" without a second hue - Kicker type step (small caps section labels) — the strongest shared trait of all three references - Larger radii (10/16/24) and softer, layered shadows What did NOT change: system font stack only (€0, zero webfont bytes), 4px spacing base, one structural breakpoint at 720px, the AA rule. THE ACCENT RULE (binding, "Pam's rules") Arbitrary accent colors are NOT allowed unless they pass WCAG AA: the accent must reach >= 4.5:1 against white AND near-white surfaces (#F6F7F9, our lightest token) when used as text/icon color, AND its paired --accent-contrast must reach >= 4.5:1 as text on an accent fill. APPROVED ACCENT SWATCHES — v1 re-verification (script: docs/redesign-v1/contrast-check.txt) accent hex on #FFF / on #F6F7F9 / on band #EDEFF2 / white-on-accent slate-blue #33608C 6.58 / 6.14 / 5.71 / 6.58 --accent-contrast:#FFFFFF (root default) graphite #3F4A56 9.03 / 8.43 / — / 9.03 deep-green #166534 7.13 / 6.65 / — / 7.13 teal #0E6363 7.04 / 6.57 / — / 7.04 navy #1F3A5F 11.48 / 10.71 / — / 11.48 terracotta #9C4522 6.39 / 5.96 / 5.54 / 6.39 (groomers / trades) plum #6D2A5C 9.83 / 9.17 / — / 9.83 wine #7B2333 9.86 / 9.20 / — / 9.86 bronze #7A5200 6.92 / 6.46 / — / 6.92 On the INK band (--color-ink), accent-colored text uses --accent-bright (accent 55% + white): verified >= 5.7:1 on #0E1320 for every swatch above (lightest case terracotta 6.45 at 62% — the 55% default is lighter still). Never put a raw accent on an ink surface. No webfonts, no CDNs, no build step. System font stack only. ========================================================================== */ :root { /* ---- Type ---------------------------------------------------------------- Mobile-first. Display/h1/h2 fluid via clamp() (360px → ~1200px). Display is deliberately LARGE (references: 3–7rem) with tight tracking and near-solid weight — that scale is most of the "modern" read. */ --text-micro: 0.8125rem; /* 13px — kickers, chips, captions */ --text-small: 0.875rem; /* 14px — fine print, footnotes */ --text-body: 1rem; /* 16px — base */ --text-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); /* 17→20px */ --text-h3: 1.25rem; /* 20px — card titles */ --text-h2: clamp(1.75rem, 1.55rem + 1vw, 2.25rem); /* 28→36px */ --text-h1: clamp(2.125rem, 1.7rem + 2.1vw, 3.25rem);/* 34→52px */ --text-display: clamp(2.5rem, 1.85rem + 3.2vw, 4.25rem); /* 40→68px */ --text-stat: clamp(2.25rem, 2rem + 1.6vw, 3.5rem); /* 36→56px numerals */ --leading-solid: 1.05; /* display/h1 */ --leading-tight: 1.2; /* h2/h3 */ --leading-body: 1.65; --tracking-tight: -0.025em; /* display headings */ --tracking-kicker: 0.14em; /* uppercase section labels */ --weight-body: 400; --weight-medium: 500; --weight-bold: 700; --weight-display: 800; /* ---- Spacing (4px base, v0 scale kept) ------------------------------------ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px — desktop section rhythm */ /* Section padding: compact phones → roomy desktop (references sit at 96–128px). Single scale keeps the vertical rhythm even everywhere. */ --section-pad: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); /* ---- Radius (larger, per references) --------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ---- Elevation: soft, layered (never decoration — hierarchy only) ---------- */ --shadow-sm: 0 1px 2px rgba(16, 19, 30, 0.05); --shadow-md: 0 2px 4px rgba(16, 19, 30, 0.05), 0 8px 20px rgba(16, 19, 30, 0.07); --shadow-lg: 0 4px 8px rgba(16, 19, 30, 0.06), 0 16px 40px rgba(16, 19, 30, 0.12); /* ---- Neutral palette (cool slate, v1) --------------------------------------- Muted text (--gray-600): 7.15:1 on white, 6.67:1 on gray-50, 6.21:1 on gray-100 → AA. --gray-500 is 4.66:1 on white but BELOW AA on gray-50 — borders/placeholder/decoration ONLY, never body text on tinted bands. */ --gray-50: #f6f7f9; --gray-100: #edeff2; --gray-200: #e1e4ea; --gray-300: #c9ced8; --gray-400: #98a0ae; --gray-500: #6c7583; --gray-600: #515866; --gray-700: #3b414e; --gray-800: #262b34; --gray-900: #14171e; /* ---- INK band (dark sections: hero / CTA band / footer) --------------------- White on ink-900: 18.5:1 · ink-muted on ink-900: 10.2:1 · on ink-800: 9.1:1 (all AA, verified). Cards on ink use ink-800 + a hairline rgba border. */ --color-ink: #0e1320; --color-ink-raised: #171f31; --ink-border: rgba(255, 255, 255, 0.12); --color-on-ink: #ffffff; --color-on-ink-muted: #b7c1d4; /* 10.2:1 on ink-900 */ /* ---- Semantic aliases -------------------------------------------------------- */ --color-text: var(--gray-900); --color-text-muted: var(--gray-600); --color-surface: var(--gray-50); /* page background */ --color-surface-raised: #ffffff; /* cards */ --color-surface-band: var(--gray-100); /* alternating light band */ --color-border: var(--gray-200); --color-error: #b3261e; /* 6.54:1 on white → AA small text */ /* ---- Fonts: system stack only (€0, no webfont requests) ---------------------- Display headings reuse the same stack at weight 800 + tight tracking. */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* ---- THE SKIN: per-niche accent ------------------------------------------------ Default = slate-blue (root page claims no niche). Theme a page by overriding THESE TWO variables only, from the approved table above. */ --accent: #33608C; --accent-contrast: #ffffff; /* ---- Derived accent shades (automatic; do not override per page) ---------------- All computed with color-mix() (baseline 2023). Without support the base accent is used — graceful degradation, AA still holds. */ --accent-deep: color-mix(in srgb, var(--accent), #000 14%); /* hover fills */ --accent-soft: color-mix(in srgb, var(--accent) 8%, #ffffff); /* tint fills */ --accent-softer: color-mix(in srgb, var(--accent) 5%, #ffffff); /* section tint */ --accent-line: color-mix(in srgb, var(--accent) 28%, transparent); /* Accent text/icons on INK band — verified >= 5.7:1 for all approved swatches (see table above). Use instead of --accent on dark surfaces. */ --accent-bright: color-mix(in srgb, var(--accent) 55%, #ffffff); /* ---- Header ---------------------------------------------------------------------- */ --header-height: 4rem; /* ---- Motion ----------------------------------------------------------------------- One duration scale; everything else is instant. All v1 motion is cosmetic (reveal fades, hover lifts, arrow nudges) and switches off under prefers-reduced-motion (components.css). */ --motion-fast: 140ms; --motion-reveal: 480ms; --ease-out: cubic-bezier(0.22, 0.68, 0, 1); /* ---- Focus -------------------------------------------------------------------------- */ --focus-ring: 3px solid currentColor; }