/* ========================================================================== Equilibrium Pools — Design tokens Single source of truth for colour, type, space and motion. ========================================================================== */ :root { /* --------------------------------------------------------------------- BRAND PALETTE --------------------------------------------------------------------- */ --brand-navy: #00013a; /* Deep Navy */ --brand-ghost: #f2f4ff; /* Ghost White */ --brand-azure: #3185fc; /* Azure Blue */ --brand-clay: #865346; /* Clay Soil */ --brand-ice: #25e4e1; /* Neon Ice */ /* Semantic brand colours */ --brand-warning: #fac748; /* Tuscan Sun */ --brand-success: #87cd79; /* Willow Green */ --brand-error: #f55200; /* Crimson Carrot */ /* Azure darkened 25% toward black. The CTA ground. There is only a narrow window that satisfies everything at once: raw #3185FC carries Ghost White at just 3.25:1 and the pill's Neon Ice border at 2.25:1, while going much darker drops the navy pill below the 3:1 it needs against its own ground. 20–30% is the band that works; this sits in the middle of it. */ --brand-cta: #2564bd; --brand-info: #3185fc; /* Azure Blue */ /* --------------------------------------------------------------------- CONTRAST-SAFE ROLES Measured against WCAG 2.1 (AA body 4.5:1, AA large / non-text 3:1). Tokens are split into --fill-* and --text-* families on purpose: every brand colour except navy, ghost and clay FAILS as body text on a light ground, so those combinations must be unreachable by accident. navy on ghost 17.98 ghost on navy 17.98 clay on ghost 5.74 ghost on clay 5.74 ice on navy 12.45 navy on ice 12.45 azure on navy 5.53 navy on warning 12.51 azure on ghost 3.25 x navy on success 10.36 ice on ghost 1.44 x navy on error 5.72 warning on ghost 1.44 x success on ghost 1.74 x error on ghost 3.15 x Light-ground text tokens are derived at ~5.5:1 rather than the 4.5:1 minimum. That headroom is deliberate: it keeps them passing when they sit on --ground-sink, the recessed panel. Derived at exactly 4.5 they dropped to ~4.1 there and failed. --------------------------------------------------------------------- */ /* Grounds */ --ground: var(--brand-ghost); --ground-deep: var(--brand-navy); --ground-warm: var(--brand-clay); --ground-sink: #e8eaf7; /* recessed panel on ghost — navy at 4% */ /* Text on light grounds */ --text: var(--brand-navy); /* 17.98 ghost / 16.47 sink */ --text-muted: #4a4c73; /* 7.45 ghost / 6.82 sink */ --text-quiet: #5f607f; /* 5.53 ghost / 5.06 sink */ --text-on-clay: var(--brand-ghost); /* Text on deep grounds */ --text-invert: var(--brand-ghost); --text-invert-muted: #b6bcdf; /* 9.39:1 on navy */ --text-invert-quiet: #8d94bd; /* 5.75:1 on navy */ /* Interactive — the light-ground link is a darkened Azure (5.51:1). Raw --brand-azure is 3.25:1 and must never carry body text. */ --link: #2461b8; /* 5.51 ghost / 5.05 sink */ --link-hover: var(--brand-navy); --link-invert: var(--brand-ice); --link-invert-hover: var(--brand-ghost); /* Focus ring — clears 3:1 on both grounds */ --focus: #1a5fc4; /* 5.51 ghost / 5.05 sink */ --focus-invert: var(--brand-ice); --focus-width: 3px; --focus-offset: 3px; /* Semantic FILLS — always carry navy text on top */ --fill-warning: var(--brand-warning); --fill-success: var(--brand-success); --fill-error: var(--brand-error); --fill-info: var(--brand-azure); --fill-ice: var(--brand-ice); --on-fill: var(--brand-navy); /* Semantic TEXT on light grounds — hue-matched darkenings at ~5.5:1 */ --text-warning: #785f22; /* 5.54 ghost / 5.07 sink */ --text-success: #476b3f; /* 5.57 ghost / 5.10 sink */ --text-error: #b03b00; /* 5.52 ghost / 5.05 sink */ --text-info: #2461b8; /* 5.51 ghost / 5.05 sink */ --text-ice: #126e6d; /* 5.51 ghost / 5.05 sink */ /* Lines */ --line: color-mix(in srgb, var(--brand-navy) 14%, transparent); --line-strong: color-mix(in srgb, var(--brand-navy) 28%, transparent); --line-invert: color-mix(in srgb, var(--brand-ghost) 20%, transparent); --line-accent: var(--brand-ice); /* --------------------------------------------------------------------- TYPOGRAPHY — 1.333 Perfect Fourth from a 20px base html { font-size: 125% } sets 1rem = 20px, keeping the scale in round rem values. --------------------------------------------------------------------- */ --font-display: "Syne", "Syne Fallback", ui-sans-serif, system-ui, sans-serif; --font-body: "Newsreader", "Newsreader Fallback", ui-serif, Georgia, serif; --step--2: 0.563rem; /* 11.3px */ --step--1: 0.75rem; /* 15.0px */ --step-0: 1rem; /* 20.0px */ --step-1: 1.333rem; /* 26.7px */ --step-2: 1.777rem; /* 35.5px */ --step-3: 2.369rem; /* 47.4px */ --step-4: 3.157rem; /* 63.2px */ --step-5: 4.209rem; /* 84.2px */ --step-6: 5.61rem; /* 112.2px */ /* Fluid display sizes — never overflow a 375px viewport */ --step-3-fluid: clamp(1.777rem, 1.35rem + 2.1vw, 2.369rem); --step-4-fluid: clamp(2.115rem, 1.4rem + 3.6vw, 3.157rem); --step-5-fluid: clamp(2rem, 1.1rem + 4.6vw, 4.209rem); --step-6-fluid: clamp(2.2rem, 1rem + 6.6vw, 5.61rem); --leading-display: 0.98; --leading-tight: 1.14; --leading-body: 1.62; --leading-loose: 1.75; --tracking-display: -0.025em; --tracking-tight: -0.012em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-eyebrow: 0.18em; --weight-body: 400; --weight-medium: 500; --weight-display: 600; /* every H1 on the site — Simon's call */ --weight-bold: 700; --weight-heavy: 800; --measure: 68ch; --measure-tight: 46ch; --measure-lead: 34ch; /* --------------------------------------------------------------------- SPACE — 1.5 ratio from 0.5rem (10px) --------------------------------------------------------------------- */ --space-1: 0.5rem; /* 10px */ --space-2: 0.75rem; /* 15px */ --space-3: 1.125rem; /* 23px */ --space-4: 1.688rem; /* 34px */ --space-5: 2.531rem; /* 51px */ --space-6: 3.797rem; /* 76px */ --space-7: 5.695rem; /* 114px */ --space-8: 8.543rem; /* 171px */ /* Section rhythm — whitespace is the primary carrier of the luxury feel */ --section-y: clamp(var(--space-6), 12vw, var(--space-8)); --section-y-tight: clamp(var(--space-5), 8vw, var(--space-7)); /* --------------------------------------------------------------------- LAYOUT --------------------------------------------------------------------- */ --gutter: clamp(var(--space-3), 5vw, var(--space-6)); --container: 86rem; /* 1720px */ --container-narrow: 58rem; /* 1160px */ --container-prose: 36rem; /* 720px */ --header-h: 5.5rem; --radius-sm: 2px; --radius: 3px; --radius-pill: 999px; /* --------------------------------------------------------------------- MOTION Durations and easings only — the scroll-driven animations that use them live in motion.css. --------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 180ms; --dur: 320ms; --dur-slow: 620ms; --dur-ambient: 40s; /* Motion amplitudes — kept deliberately small. Content reacts to scroll; it never travels in from off-canvas. */ --reveal-rise: 12px; --reveal-stagger: 60ms; --parallax-shift: 8%; /* hero — reads as ~0.85x scroll rate */ --parallax-shift-subtle: 4%; /* gallery — ~0.94x */ --kenburns-scale: 1.06; --shadow-lift: 0 1px 2px color-mix(in srgb, var(--brand-navy) 6%, transparent), 0 12px 32px -12px color-mix(in srgb, var(--brand-navy) 22%, transparent); --shadow-float: 0 2px 6px color-mix(in srgb, var(--brand-navy) 10%, transparent), 0 20px 50px -16px color-mix(in srgb, var(--brand-navy) 34%, transparent); --z-media: 0; --z-content: 1; --z-invite: 40; --z-header: 50; --z-drawer: 60; --z-lightbox: 70; } /* Sections opt into the deep ground by swapping role tokens rather than restating colours, so any component nested inside stays correct. */ .on-deep { --ground: var(--brand-navy); --text: var(--brand-ghost); --text-muted: var(--text-invert-muted); --text-quiet: var(--text-invert-quiet); --link: var(--brand-ice); --link-hover: var(--brand-ghost); --line: var(--line-invert); --line-strong: color-mix(in srgb, var(--brand-ghost) 34%, transparent); --focus: var(--focus-invert); --text-error: var(--brand-error); --text-success: var(--brand-success); --text-warning: var(--brand-warning); --text-info: var(--brand-azure); background-color: var(--ground); color: var(--text); } /* The call-to-action ground. Every CTA rail on the site uses it, so the device is recognisable wherever it appears. ghost on cta blue 5.27 ice border on it 3.65 navy pill on it 3.41 (non-text, needs 3) */ .on-cta { --ground: var(--brand-cta); --text: var(--brand-ghost); --text-muted: color-mix(in srgb, var(--brand-ghost) 86%, var(--brand-cta)); --text-quiet: color-mix(in srgb, var(--brand-ghost) 72%, var(--brand-cta)); --link: var(--brand-ghost); --link-hover: var(--brand-ice); --line: color-mix(in srgb, var(--brand-ghost) 24%, transparent); --line-strong: color-mix(in srgb, var(--brand-ghost) 42%, transparent); --focus: var(--brand-ghost); background-color: var(--ground); color: var(--text); } .on-warm { --ground: var(--brand-clay); --text: var(--brand-ghost); --text-muted: color-mix(in srgb, var(--brand-ghost) 82%, var(--brand-clay)); --text-quiet: color-mix(in srgb, var(--brand-ghost) 68%, var(--brand-clay)); --link: var(--brand-ghost); --link-hover: var(--brand-ice); --line: color-mix(in srgb, var(--brand-ghost) 24%, transparent); --line-strong: color-mix(in srgb, var(--brand-ghost) 40%, transparent); --focus: var(--brand-ghost); background-color: var(--ground); color: var(--text); }