/* ============================================================================ Dan Temple — Design Tokens (staging.dantemple.co.uk DNA — designlang extract) ---------------------------------------------------------------------------- Re-anchored to the actual staging.dantemple.co.uk extract: - Teal #07c2b0 primary brand (22 uses) + red #ff2023 secondary (8 uses) - Dark teal-ink #081616 for nav / dark sections (57 uses) - Pure black #000 footer (262 uses), white #fff body (214 uses) - Google Sans (display + body) + Google Sans Text (mono) - Pill buttons (border-radius 9999), 6px inputs, 4/12px small/large radii - Easing primary cubic-bezier(0.16, 1, 0.3, 1) — ease-out-quint - Durations 100/200/300/500ms - Material flat — no backdrop-filter, no shadows in production Variable NAMES are stable so existing pages cascade into the new look. Reference via var(--name) — never hard-code. ============================================================================ */ :root { /* ---------- Color: surfaces & ink ----------------------------------- */ --bg: #FFFFFF; /* primary surface — white */ --bg-pure: #FFFFFF; /* alias */ --bg-2: #F5F6F7; /* very light grey alt band */ --panel: #F5F6F7; /* muted neutral band */ --surface-dark: #081616; /* nav + dark sections (extracted) */ --surface-darker:#000000; /* footer + deepest dark band */ --ink: #081616; /* dark teal-ink — primary text colour */ --ink-2: #081616; /* same — staging uses single ink colour */ --ink-3: #686868; /* mid grey — meta, eyebrow, captions */ --ink-4: #A5A5A5; /* muted — disabled */ --ink-pure: #000000; /* pure black — footer text only */ --line: #E5E5E5; /* hairline */ --line-strong: rgba(8, 22, 22, 0.15); /* extracted input border */ --ink-on-dark: #FFFFFF; --ink-on-dark-2: rgba(255, 255, 255, 0.72); --ink-on-dark-3: #A5A5A5; /* ---------- Color: accent (teal primary, red secondary — extracted) -- */ /* Teal #07c2b0 is the workhorse brand colour (22 uses on staging — the most-used non-neutral). Red #ff2023 is the attention/highlight (8 uses). Use teal for hover/focus, links, accent micro-marks, and the single primary CTA per page. Use red sparingly for status/highlight. */ --accent: #07C2B0; /* teal — primary brand accent */ --accent-700: #069B8D; /* deeper teal hover/active */ --accent-300: #4FD8CC; /* lighter teal washes */ --accent-bg: #E6F9F7; /* very pale teal panel */ --accent-glow: rgba(7, 194, 176, 0.18); --accent-glow-soft: rgba(7, 194, 176, 0.06); --accent-secondary: #FF2023; /* red — attention / highlight / CTA */ --accent-secondary-700: #C8161A; /* deeper red */ --accent-secondary-bg: #FFE5E6; /* pale red panel */ /* Bold gradient available (kept from Bjorn extract) — sparing use only */ --grad-bold: linear-gradient( 90deg, #07C2B0 0%, #069B8D 100% ); /* ---------- Color: rules ------------------------------------------- */ --rule: rgba(8, 22, 22, 0.10); --rule-strong: rgba(8, 22, 22, 0.20); --rule-soft: rgba(8, 22, 22, 0.05); /* ---------- Color: semantic ---------------------------------------- */ --on-accent: #FFFFFF; --selection-bg: var(--accent); --selection-fg: #FFFFFF; /* ---------- Typography: families (Google Sans extracted) ------------ */ /* Staging uses "Google Sans" (227 uses) + "Google Sans Text" (32 uses). Google Sans Text + Google Sans Text are both publicly available on Google Fonts since 2024. System fallbacks ensure resilience. */ --font-sans: 'Google Sans Text', 'Google Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Arial', sans-serif; --font-display: 'Google Sans Text', 'Google Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Arial', sans-serif; --font-serif: 'Google Sans Text', 'Google Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Google Sans Text', 'Google Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Mono aliased to the main sans, single-font system across the site */ --font-mono: 'Google Sans Text', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --font-heading: 'Google Sans Text', 'Google Sans', 'Inter', sans-serif; /* ---------- Typography: scale (staging extracted) ------------------- */ /* Extracted: h1 50/600/58, h2 48/600/48 (also 36/500/40), h3 30/600/36 (also 24/800/32 — emphasised body), body 16/400/24, p 17/400/27.6. Translated to fluid clamps. */ --fs-display: clamp(40px, 5.6vw, 64px); /* hero h1 — staging-ish */ --fs-h1: clamp(36px, 4.4vw, 50px); /* page h1 — staging 50 */ --fs-h2: clamp(32px, 4vw, 48px); /* section h2 — staging 48 */ --fs-h2-sm: clamp(26px, 3vw, 36px); /* alt h2 — staging 36 */ --fs-h3: clamp(22px, 2.4vw, 30px); /* card titles — staging 30 */ --fs-h3-em: clamp(18px, 1.8vw, 24px); /* emphasised body — 24/800 */ --fs-h4: clamp(16px, 1.4vw, 18px); --fs-lede: clamp(18px, 1.5vw, 22px); /* opening paragraph */ --fs-body: 16px; /* extracted body */ --fs-body-lg: 17px; /* prose body */ --fs-body-sm: 15px; /* form input, muted body */ --fs-small: 14px; --fs-mono: 12px; /* eyebrows */ --fs-mono-sm: 11px; /* extracted h3 small variant */ --fs-marker: clamp(64px, 10vw, 120px); /* big "01" markers */ /* ---------- Typography: line-heights (staging — relaxed) ----------- */ /* Extracted: h1 50/58 (1.16), h2 48/48 (1.0) and 36/40 (1.11), h3 30/36 (1.20) and 24/32 (1.33), body 16/24 (1.5), p 17/27.6 (1.62) */ --lh-display: 1.05; --lh-h1: 1.16; /* staging 50/58 */ --lh-h2: 1.0; /* staging 48/48 — tight */ --lh-h3: 1.2; /* staging 30/36 */ --lh-body: 1.5; /* staging 16/24 */ --lh-prose: 1.625; /* staging --leading-relaxed */ --lh-tight: 1.375; /* staging --leading-snug */ /* ---------- Typography: tracking & weights ------------------------- */ /* Extracted: 50px / +1px ≈ +0.02em (h1 has slight POSITIVE tracking), 30/-0.75px ≈ -0.025em, 24/-0.96px ≈ -0.04em (negative on display). --tracking-tight: -.025em from staging tailwind theme. */ --tracking-display: -0.025em; --tracking-h: -0.025em; --tracking-h1: 0.02em; /* staging h1 has +1px */ --tracking-mono: 0.05em; /* staging --tracking-wider */ --tracking-eyebrow: 0.18em; --tracking-tight: -0.025em; --tracking-wide: 0.025em; /* staging --tracking-wide */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; /* h1/h2/h3 default */ --weight-bold: 700; --weight-black: 800; /* emphasised body 24/800 */ /* ---------- Spacing scale (staging extracted) --------------------- */ /* Extracted scale: 4 / 48 / 64 / 80 / 96 / 112 / 192. Practical densification below — 4px base, fewer mid-range steps than Bjorn. */ --s-1: 4px; /* extracted */ --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; /* container gap */ --s-7: 48px; /* extracted */ --s-8: 64px; /* extracted */ --s-9: 80px; /* extracted */ --s-10: 96px; /* extracted */ --s-11: 112px; /* extracted */ --s-12: 144px; --s-13: 192px; /* extracted */ --s-14: 240px; /* ---------- Layout (staging container 1280 + 32 pad) -------------- */ --container: 1280px; /* extracted */ --container-wide: 1440px; --container-tight: 896px; /* extracted alt */ --container-prose: 680px; --pad-x: 32px; /* extracted */ --pad-y: clamp(64px, 8vw, 112px); /* extracted spacing scale */ --pad-y-sm: clamp(48px, 6vw, 80px); /* ---------- Radii (staging extracted) ----------------------------- */ /* Extracted: 4px sm (4 uses), 12px lg (1 use), pill on buttons. Inputs use 6px (variant cluster). */ --r-sm: 4px; --r-md: 6px; /* input radius */ --r-lg: 12px; /* large container */ --r-xl: 16px; --r-pill: 9999px; /* button shape — extracted (effectively round-pill) */ --r-full: 9999px; /* ---------- Shadows (staging — flat, no shadows in production) ----- */ /* Extracted: shadow-sm is empty (0 0 #0000). Staging is FLAT — no shadows. Provide minimal optional shadows for hover only. */ --shadow-sm: none; --shadow-md: none; --shadow-lg: 0 4px 16px rgba(8, 22, 22, 0.06); --shadow-card-hover: 0 12px 28px -10px rgba(8, 22, 22, 0.10), 0 4px 10px -4px rgba(8, 22, 22, 0.05); /* ---------- Motion (staging extracted — premium ease-out-quint) ---- */ /* Extracted easings: cubic-bezier(0.16, 1, 0.3, 1) — premium feel, used on hero/scroll-driven; cubic-bezier(0.4, 0, 0.2, 1) — Material default. Durations: 100/200/300/500/650/700ms. */ --ease: cubic-bezier(0.16, 1, 0.3, 1); /* staging signature */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* Material */ --ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --d-fast: 100ms; --d-med: 200ms; --d-slow: 300ms; --d-xslow: 500ms; --d-hero: 700ms; /* extracted scroll/hero reveal duration */ /* ---------- Z-index ------------------------------------------------ */ --z-base: 1; --z-grain: 2; --z-sticky: 20; --z-header: 40; /* extracted */ --z-overlay: 50; /* extracted nav overlay */ --z-modal: 80; --z-toast: 90; } /* ---------------------------------------------------------------------------- Reduced motion ---------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --d-fast: 1ms; --d-med: 1ms; --d-slow: 1ms; --d-xslow: 1ms; --d-hero: 1ms; } }