/* ========================================================================== DNS4EU · Design tokens — SINGLE SOURCE OF TRUTH Extracted from the approved "DNS4EU Homepage Wireframe v2" design system and the official Whalebone Colors / Typography brand guidelines. RULE: every colour, font, size, space, radius and shadow used anywhere in the site must reference a variable from this file. Never hardcode these values elsewhere. If a value you need is missing, add it here first, deliberately. ========================================================================== */ :root { /* ---- Brand palette (Whalebone Colors, verified hex) ------------------- */ --wb-navy: #05052B; /* Midnight Depth — deep ink, dark sections only, minimal doses */ --wb-purple: #3723B5; /* Deep Navy — brand primary accent */ --wb-teal: #00B9BE; /* Cyber Aqua — signature accent, primary CTA */ --wb-teal-200: #5CD2D5; --wb-teal-100: #ACE8E9; --wb-coral: #FF5C5C; /* Alert Coral — warnings/alerts ONLY, tiny amounts */ --wb-coral-200: #FF9797; --wb-pink: #F1C6F7; /* Seabreeze — soft highlight ONLY, tiny amounts */ --wb-cloud: #F4F6F9; /* Pale Horizon — the dominant page ground */ --wb-white: #FFFFFF; /* Lighthouse Beam — dominant surface */ --wb-black: #000000; /* ---- Neutral ladder (derived for UI) --------------------------------- */ --wb-ink-900: #05052B; --wb-ink-700: #1C1C4A; --wb-ink-500: #3B3B6E; --wb-ink-300: #8A8AB2; --wb-ink-200: #C4C4D6; --wb-ink-100: #E4E4EE; --wb-ink-50: #F4F6F9; /* ---- Semantic foreground --------------------------------------------- */ --fg-1: var(--wb-ink-900); /* primary text */ --fg-2: var(--wb-ink-700); /* secondary text */ --fg-3: var(--wb-ink-500); /* tertiary / captions */ --fg-muted: var(--wb-ink-300); --fg-on-dark: var(--wb-white); --fg-link: var(--wb-purple); /* On dark bands. White at reduced opacity so the navy reads through. Both tones clear WCAG-AA against --wb-navy; measured, not assumed. */ --fg-on-dark-muted: rgba(255, 255, 255, 0.78); --fg-on-dark-subtle: rgba(255, 255, 255, 0.62); /* ---- Semantic background --------------------------------------------- */ --bg-page: var(--wb-cloud); /* DEFAULT page background is LIGHT */ --bg-surface: var(--wb-white); --bg-sunken: var(--wb-ink-50); --bg-inverse: var(--wb-navy); /* dark bands only, used sparingly */ --bg-brand: var(--wb-purple); --bg-brand-soft: #ECE9FB; /* ~8% purple over white */ /* ---- Semantic state --------------------------------------------------- */ --semantic-success: var(--wb-teal); --semantic-warning: #FFB547; --semantic-danger: var(--wb-coral); --semantic-info: var(--wb-purple); /* ---- Borders / radii / shadow ---------------------------------------- */ --border-subtle: #E4E4EE; --border-default: #C4C4D6; --border-strong: var(--wb-ink-500); /* Keylines and fills used on dark bands only. Non-text, so no AA floor. */ --border-on-dark: rgba(255, 255, 255, 0.16); --border-on-dark-strong: rgba(255, 255, 255, 0.45); --surface-on-dark: rgba(255, 255, 255, 0.10); --surface-on-dark-strong: rgba(255, 255, 255, 0.16); /* Soft aqua tints. --bg-success-soft is Cyber Aqua at 12% over white. */ --bg-success-soft: #E0F7F7; --fill-teal-soft: rgba(0, 185, 190, 0.28); /* Third-party emblem colours. NOT part of the Whalebone palette and never for UI. The EU emblem is a regulated mark with legally specified colours; it must not be recoloured to brand tokens, but it should not sit in the markup as a stray literal either. */ --eu-emblem-blue: #003399; --eu-emblem-gold: #FFCC00; --radius-xs: 4px; --radius-sm: 6px; /* The tile radius, and the measured one: every card on whalebone.io/immunity is 8px. It was 10px here, which is close enough to look like a mistake rather than a choice. Measured again 2026-08-20. */ --radius-md: 8px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgba(5, 5, 43, 0.06), 0 1px 1px rgba(5, 5, 43, 0.04); --shadow-2: 0 4px 12px rgba(5, 5, 43, 0.08), 0 2px 4px rgba(5, 5, 43, 0.04); --shadow-3: 0 16px 40px rgba(5, 5, 43, 0.14), 0 4px 12px rgba(5, 5, 43, 0.06); /* The one whalebone.io actually uses, measured 2026-08-26: soft, far and almost invisible, and only on something that genuinely floats over content. Their value is rgba(0,0,0,.05); ours takes the same geometry on our ink base so it sits in the family with --shadow-1..3. DESIGN.md has recorded this value since 2026-08-19 and nothing carried it. Overlays only: a tile on the pale ground is separated by contrast, never by this. */ --shadow-overlay: 0 15px 30px rgba(5, 5, 43, 0.05); /* ---- Typography ------------------------------------------------------ Display: Albra Light (serif) — hero statements, big numbers. Thin weight IS the signature; never bold it. Only weight 300 exists. Serif: Albra / Minion Pro — H3-level subheads, pull quotes, long-form. Sans: Overused Grotesk — headings, body, labels, buttons (400/500 only). Official fallback per Whalebone guidelines is Arial. Mono: system mono — domains, resolver addresses, technical specs. All fonts are SELF-HOSTED in assets/fonts/. No Google Fonts / CDN. FALLBACK RULE (measured, not assumed): neither Albra nor Minion Pro is licensed or installed, and a chain ending in Georgia / Times resolved EVERY heading on the site to Times New Roman. Verified by canvas width probe: "Albra", "Minion Pro" and "Times New Roman" all measured an identical 318.85px for the same string. Per DESIGN.md the fallback is Overused Grotesk, never a foreign serif, so both chains now end in the sans. "Albra" stays first: drop the .woff2 into assets/fonts/, add an @font-face, and it takes over with no other edits. ------------------------------- */ --font-display: "Albra", "Minion Pro", "Overused Grotesk", Arial, Helvetica, sans-serif; --font-serif: "Albra", "Minion Pro", "Overused Grotesk", Arial, Helvetica, sans-serif; --font-sans: "Overused Grotesk", Arial, Helvetica, sans-serif; --font-mono: ui-monospace, "Courier New", Courier, monospace; /* ---- Font weights ---------------------------------------------------- Matched to whalebone.io/immunity (measured from computed styles). Whalebone type is LIGHT. Sans never goes above 500. Big headings are 400 Regular with tight tracking — NOT bold. The only "300" is Albra (serif). */ --fw-regular: 400; /* body, buttons, links, H1/hero */ --fw-medium: 500; /* H2, H4, H5, eyebrows */ --fw-serif-light: 300; /* Albra ONLY (H3/H6 subheads, quotes, big numbers) */ /* ---- Heading weight map (as on Immunity) ----------------------------- hero / display : Overused Grotesk 400, tracking -0.015em..-0.02em h1 : Overused Grotesk 400, tracking -0.015em h2 : Overused Grotesk 500, tracking -0.02em h3 : Albra 300 (serif accent) — falls back to Overused Grotesk 500 h4 / h5 : Overused Grotesk 500 body / button : Overused Grotesk 400 Do NOT set headings to 600/700. That is what makes the page look heavy. */ /* type scale (px + line-height + tracking) */ --fs-display-1: 72px; --lh-display-1: 1.04; --tk-display-1: -0.02em; --fs-display-2: 56px; --lh-display-2: 1.06; --tk-display-2: -0.02em; --fs-h1: 40px; --lh-h1: 1.12; --tk-h1: -0.01em; --fs-h2: 32px; --lh-h2: 1.20; --tk-h2: -0.01em; --fs-h3: 24px; --lh-h3: 1.28; --fs-h4: 20px; --lh-h4: 1.32; --fs-body-lg: 18px; --lh-body-lg: 1.55; --fs-body: 16px; --lh-body: 1.60; --fs-body-sm: 14px; --lh-body-sm: 1.55; --fs-caption: 12px; --lh-caption: 1.40; --fs-overline: 11px; --lh-overline: 1.40; --tk-overline: 0.14em; /* Whalebone's own small label is NOT a wide-tracked overline. Measured 2026-08-26 on whalebone.io: 15px, weight 500, letter-spacing 1px, and the capitals are TYPED IN THE CONTENT, not applied with text-transform (--tt-title, --tt-nav, --tt-link and --tt-other are all `none` in their theme). 1px at 15px is 0.067em. Use this where a label should read as text set in capitals; use --tk-overline where it should read as an overline. */ --tk-label: 0.067em; /* ---- Spacing scale (use these, not arbitrary px) --------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 144px; /* ---- Motion ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* Hover timing measured off whalebone.io/immunity: 0.4s ease-in-out on background-color, border-color, color, opacity and box-shadow. */ --dur-hover: 400ms; /* Step between siblings in a staggered reveal. Small on purpose: the group should read as arriving together with a slight cascade, not one by one. */ --dur-stagger: 70ms; /* ---- Layout ----------------------------------------------------------- */ --maxw: 1180px; --maxw-narrow: 760px; --nav-h: 72px; /* ---- Signature gradients --------------------------------------------- Use SPARINGLY, and only where the brand imagery calls for it (e.g. a single dark hero band or one feature panel). NOT as a default page background, and NOT layered with orbs/prisms. On a light institutional site these are the exception, not the rule. */ /* Scrims. Laid over a brand photograph so text on it still clears WCAG-AA. A hero image is NEVER used without one. Horizontal on wide screens where the copy sits in a left column, vertical on narrow ones where it sits on top of the artwork. See the hero image band in PATTERNS.md. */ /* Steep, not flat. The copy column needs cover; the artwork side does not. A flat light scrim made the whole band dim AND failed contrast, which is the worst of both. */ --scrim-image-h: linear-gradient(90deg, rgba(5, 5, 43, 0.94) 0%, rgba(5, 5, 43, 0.88) 62%, rgba(5, 5, 43, 0.18) 82%, rgba(5, 5, 43, 0.02) 100%); /* Narrow screens carry the copy down the full height of the band, so the vertical scrim has to stay strong all the way to the bottom. The artwork is heavily cropped at that width regardless, so little is lost and the trust line stays readable, which it did not at 0.30. */ --scrim-image-v: linear-gradient(180deg, rgba(5, 5, 43, 0.94) 0%, rgba(5, 5, 43, 0.92) 60%, rgba(5, 5, 43, 0.86) 100%); /* Side-by-side hero: copy on clean navy at the left, artwork at the right, the two barely overlapping. The scrim protects only the copy column and is fully clear by 58%, so the map needs no overlay at all and can be lifted as far as it likes. Scrimming the map and then brightening it back was the mistake this replaces. */ /* Flat, not a gradient. Any gradient across an artwork band reads as a seam between a dark side and a bright side. Where narrow screens still need the artwork held back behind full-width copy, hold it back evenly. */ --scrim-image-flat: rgba(5, 5, 43, 0.84); /* The plateau has to cover the copy column and clear before the landmass. That is a genuine constraint, not a preference: the EU spans about 37% of the artwork width, so plateau + falloff + 37% must fit inside 100%. Widen the copy too far and the choice becomes covering Iberia or cropping the Baltics. These stops are the balance point. */ --scrim-image-split: linear-gradient(90deg, rgba(5, 5, 43, 0.96) 0%, rgba(5, 5, 43, 0.94) 44%, rgba(5, 5, 43, 0.30) 54%, rgba(5, 5, 43, 0.00) 60%, rgba(5, 5, 43, 0.00) 100%); /* The supplied artwork is genuinely dark: mean luminance stayed near 0.009 even under a much lighter scrim, so thinning the scrim alone cannot brighten the hero. This lifts the artwork itself instead. */ --filter-artwork: brightness(1.5) saturate(1.08); /* Text sitting directly on artwork. Brighter than the on-navy tones, because a photograph is never as dark or as even as a flat band. Using --fg-on-dark-subtle over an image measured 3.65 and failed AA. */ --fg-on-image: rgba(255, 255, 255, 0.94); --fg-on-image-subtle: rgba(255, 255, 255, 0.76); --gradient-deep: linear-gradient(160deg, #1E1180 0%, #05052B 100%); --gradient-soft: radial-gradient(circle at 40% 35%, #ACE8E9 0%, #F1C6F7 40%, rgba(255,255,255,0) 70%); /* --gradient-aurora / --gradient-sphere exist in brand imagery but are heavy; do not apply them as UI backgrounds without a specific approved reason. */ }