/* ===================================================================== DIVE & THRIVE — DESIGN SYSTEM FOUNDATIONS --------------------------------------------------------------------- Brand: premium technical swim coaching. Built on the Workoutclub design language (Montserrat, generous 8pt spacing, premium structure, thin line-icons in chips, split heroes) — upgraded to the Dive & Thrive identity: deep navy + gold + cream, with the logo's blues as data / accent tints. Surfaces work in BOTH light and dark. Brand colours are theme-agnostic; semantic surface tokens flip per theme. Put .theme-dark or .theme-light on any container (they nest) to switch a subtree. defaults light. Voice: Dutch with English headline hooks. Sentence-case headlines with periods for rhythm; a single word lifted in gold. Eyebrows UPPERCASE, widely tracked, separated by • dots. ===================================================================== */ /* ---- MONTSERRAT — one compact variable file per style ---- */ @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Variable.woff2') format('woff2-variations'); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Italic-Variable.woff2') format('woff2-variations'); font-weight: 300 900; font-style: italic; font-display: swap; } :root { /* =================================================================== BRAND CORE — theme agnostic =================================================================== */ /* -- Navy (cool, deep — the signature surface) -- */ --navy-950: #07111E; /* deepest — footer, gradient floor */ --navy-900: #0B1B2E; /* PRIMARY dark surface — hero, bands */ --navy-800: #102539; /* elevated card on dark */ --navy-700: #173049; /* raised / hover on dark */ --navy-600: #20405C; /* dark-mode borders (solid) */ /* -- Gold (premium detail — used with restraint) -- */ --gold: #C9A24A; /* PRIMARY accent — CTAs, eyebrows, highlight */ --gold-bright: #E0C079; /* highlight word, eyebrow on dark, star */ --gold-deep: #74571D; /* accessible text / hover on light surfaces */ --gold-tint: rgba(201,162,74,0.14); /* chip / badge fill */ /* -- Cream (the swimmer figure — warm light for display on dark) -- */ --cream: #F4EEDE; --cream-soft: #E8DFC9; /* -- Logo blues (water → data & accent tints, never dominant) -- */ --blue-deep: #1C3D6E; --blue: #2B6CA6; --blue-bright: #3E92C4; --blue-050: #EAF2F8; /* light tinted surface / chip on light */ /* -- Neutrals (subtly warm to harmonise with cream brand) -- */ --paper: #FCFBF7; /* primary LIGHT surface — warm white */ --soft: #F3F1E9; /* cards / sections on light */ --soft-2: #ECE9DE; /* deeper soft band */ --line-lt: #E5E1D4; /* hairline on light (warm) */ --ink: #0E2235; /* primary text on light (cool near-black) */ --ink-soft:#56697B; /* secondary text on light */ --ink-mute:#5D6B78; /* tertiary / captions on light (AA contrast) */ /* =================================================================== SEMANTIC SURFACES — default = LIGHT theme =================================================================== */ --surface: var(--paper); --surface-2: var(--soft); --surface-3: var(--soft-2); --surface-elev: #FFFFFF; --line: var(--line-lt); --text: var(--ink); --text-soft: var(--ink-soft); --text-mute: var(--ink-mute); --display: var(--ink); /* headline colour */ --eyebrow-c: var(--gold-deep); /* eyebrow reads as deep gold on light */ --on-accent: var(--navy-900); /* text on a gold fill */ --chip-stroke: var(--blue-deep); --chip-bg: var(--blue-050); --shadow-color: 16,28,45; /* =================================================================== TYPE =================================================================== */ --font-sans: 'Montserrat', -apple-system, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; --font-display: 'Montserrat', -apple-system, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; --fs-display: 76px; /* hero — "Swim smarter." */ --fs-h1: 52px; --fs-h2: 38px; --fs-h3: 26px; --fs-h4: 20px; --fs-lead: 19px; --fs-body: 17px; --fs-small: 15px; --fs-eyebrow: 13px; --lh-tight: 1.05; --lh-snug: 1.18; --lh-body: 1.62; --track-eyebrow: 0.2em; --track-tight: -0.02em; --track-btn: 0.1em; /* =================================================================== SPACING (8pt, generous) · RADII · ELEVATION =================================================================== */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-btn:12px; --r-pill:999px; --shadow-xs: 0 1px 2px rgba(var(--shadow-color),0.06); --shadow-sm: 0 4px 14px rgba(var(--shadow-color),0.08); --shadow-md: 0 16px 44px rgba(var(--shadow-color),0.12); --shadow-lg: 0 30px 70px rgba(var(--shadow-color),0.16); --shadow-gold: 0 12px 30px rgba(160,126,51,0.30); /* gold CTA lift */ } /* =================================================================== THEME FLIPS — nestable. .theme-dark on any container -> dark subtree. =================================================================== */ .theme-dark { --surface: var(--navy-900); --surface-2: var(--navy-800); --surface-3: var(--navy-700); --surface-elev: var(--navy-800); --line: rgba(255,255,255,0.10); --text: rgba(255,255,255,0.92); --text-soft: rgba(255,255,255,0.66); --text-mute: rgba(255,255,255,0.44); --display: var(--cream); --eyebrow-c: var(--gold-bright); --chip-stroke: var(--gold); --chip-bg: rgba(201,162,74,0.10); --shadow-color: 0,0,0; } .theme-light { /* explicit reset back to light when nested in dark */ --surface: var(--paper); --surface-2: var(--soft); --surface-3: var(--soft-2); --surface-elev: #FFFFFF; --line: var(--line-lt); --text: var(--ink); --text-soft: var(--ink-soft); --text-mute: var(--ink-mute); --display: var(--ink); --eyebrow-c: var(--gold-deep); --chip-stroke: var(--blue-deep); --chip-bg: var(--blue-050); --shadow-color: 16,28,45; } /* =================================================================== SEMANTIC ELEMENT STYLES =================================================================== */ *{box-sizing:border-box} .ds-type{ color:var(--text); font-family:var(--font-sans); } .eyebrow{ font:700 var(--fs-eyebrow)/1 var(--font-sans); letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--eyebrow-c); } .display{ font:800 var(--fs-display)/var(--lh-tight) var(--font-display); letter-spacing:-0.03em; color:var(--display); } h1,.h1{ font:800 var(--fs-h1)/var(--lh-tight) var(--font-display); letter-spacing:var(--track-tight); color:var(--display); } h2,.h2{ font:800 var(--fs-h2)/var(--lh-snug) var(--font-display); letter-spacing:var(--track-tight); color:var(--display); } h3,.h3{ font:700 var(--fs-h3)/1.22 var(--font-display); color:var(--display); } h4,.h4{ font:700 var(--fs-h4)/1.3 var(--font-sans); color:var(--text); } .lead { font:400 var(--fs-lead)/var(--lh-body) var(--font-sans); color:var(--text-soft); } p,.body{ font:400 var(--fs-body)/var(--lh-body) var(--font-sans); color:var(--text-soft); } small,.small{ font:400 var(--fs-small)/1.5 var(--font-sans); color:var(--text-soft); } /* a single word lifted in gold inside an otherwise plain headline */ .hl{ color:var(--gold-deep); } .theme-dark .hl{ color:var(--gold-bright); }