/* ========================================================================== Design tokens — every colour, font and shape value the site uses. HOW TO SWITCH THE LOOK ---------------------- Put the theme name on the element: Seven themes ship. "nachtblau" is the default and needs no attribute. The three blues are a staircase, measured against white so the steps are comparable rather than a matter of opinion: nachtblau 18.33:1 near-black navy — the first variant himmelblau 8.68:1 sky blue, dark — what the one-pager uses himmelblau-hell 5.80:1 one step further up, still light text — what the site uses himmelblau-tag 1.14:1 daylight: pale sky, dark ink And three that are not blue at all: konzept the colours from the original concept document, light editorial warm paper, ink blue, magazine typography geometrie technical and precise, derived from the Fibonacci ratios Switching all pages at once: ./tools/Set-Theme.ps1 -Theme editorial RULES FOR EVERY OTHER STYLESHEET -------------------------------- No literal colour, font family or radius outside this file. If a value is needed that no token provides, the token is missing — add it here rather than hard-coding it, otherwise a theme switch will leave that one element behind, and that is exactly the kind of thing nobody notices until a client does. Contrast ratios in the comments are computed with tools/Test-Contrast.ps1 (WCAG relative luminance), not estimated. Body text needs 4.5:1, large text and the boundaries of interactive components need 3:1. ========================================================================== */ /* -------------------------------------------------------------------------- System tokens — shared by all themes. Only the character tokens at the end of each theme block override these. -------------------------------------------------------------------------- */ :root { /* Type scale. Fluid between a 360px phone and a 1440px desktop. The minimum of every step is deliberately readable on its own — a clamp() whose lower bound is too small produces a page that is fine on the design machine and unreadable on a phone. */ --step--2: clamp(0.76rem, 0.74rem + 0.10vw, 0.82rem); --step--1: clamp(0.88rem, 0.85rem + 0.16vw, 0.97rem); --step-0: clamp(1.03rem, 0.99rem + 0.22vw, 1.16rem); --step-1: clamp(1.22rem, 1.13rem + 0.44vw, 1.50rem); --step-2: clamp(1.48rem, 1.30rem + 0.86vw, 2.05rem); --step-3: clamp(1.80rem, 1.46rem + 1.62vw, 2.90rem); --step-4: clamp(2.20rem, 1.60rem + 2.90vw, 4.20rem); --step-5: clamp(2.60rem, 1.60rem + 4.70vw, 5.80rem); /* Spacing. Fibonacci numbers as a ratio — 1 1 2 3 5 8 13 21 34 55 — because the subject of this site is that sequence. It also happens to be a good spacing scale: the steps grow the way the eye expects. */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1.25rem; --sp-5: 2rem; --sp-6: 3.25rem; --sp-7: 5.25rem; --sp-8: 8.5rem; --gutter: clamp(1.15rem, 4.5vw, 4rem); --measure: 64ch; --measure-tight: 52ch; --wrap: 76rem; --wrap-narrow: 46rem; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; --border-width: 1px; /* Print is theme-independent: paper is white whichever theme the screen shows. They are tokens anyway so that site.css can keep its promise that no colour literal lives outside this file - a promise with one quiet exception is a promise nobody can rely on. */ --c-print-bg: #FFFFFF; --c-print-ink: #000000; /* WhatsApp's own green, and theme-independent for the same reason as the print colours: it is somebody else's brand, not part of this palette. #25D366 is the brand green. White on it measures 1.98:1, which would fail WCAG 1.4.11 for a graphical object - except that 1.4.11 exempts logotypes outright ("Part of a logo or brand name has no minimum contrast requirement"), and this glyph is the WhatsApp mark, drawn the one way it is allowed to be drawn. What the button must NOT rely on is the glyph carrying meaning: the accessible name sits on the link, not in the picture. The earlier darker #128C7E scored better on paper and was simply not recognisable as WhatsApp - the point of the button is that it is. The ring in --c-ink stays: no single green clears the 3:1 boundary contrast of 1.4.11 against all seven page backgrounds, and the ink colour does so in every theme by definition. */ --c-whatsapp: #25D366; --c-on-whatsapp: #FFFFFF; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 160ms; --dur: 320ms; --dur-slow: 620ms; --header-height: 4.5rem; } /* ========================================================================== A — NACHTBLAU & GOLD (default) Dark navy, gold as a scarce accent. Very little colour overall so the gold still reads as precious rather than as decoration. ========================================================================== */ :root, [data-theme="nachtblau"] { color-scheme: dark; --c-bg: #0A1524; --c-surface: #101E33; --c-surface-2: #16283F; --c-line: #24394F; /* decorative hairline, not a component border */ --c-line-strong: #4C6480; /* 3.32:1 on --c-bg — component borders */ --c-ink: #EEF3F8; /* 16.42:1 on --c-bg */ --c-ink-muted: #A6B7C9; /* 8.94:1 on --c-bg */ --c-accent: #5C9AEE; /* 6.38:1 on --c-bg — safe as link text */ --c-accent-ink: #5C9AEE; --c-accent-surface: #1D3D66; /* Dark, not light: .btn--accent puts this on --c-accent-ink, and light text on that light blue measured 2.57:1. Dark on it measures 6.38. */ --c-on-accent: #0A1524; --c-gold: #D9B863; /* 9.59:1 on --c-bg */ --c-gold-ink: #D9B863; --c-gold-display: #D9B863; --c-gold-soft: #F0DFA8; --c-on-gold: #0A1524; /* 9.59:1 on --c-gold */ --c-silver: #BFC1C2; --c-up: #4FC79A; --c-down: #EE7A70; --c-focus: #F0DFA8; --c-hairline-on-image: rgb(255 255 255 / 0.14); --shadow-1: 0 1px 2px rgb(0 0 0 / 0.34), 0 6px 18px rgb(0 0 0 / 0.28); --shadow-2: 0 2px 6px rgb(0 0 0 / 0.40), 0 22px 52px rgb(0 0 0 / 0.38); --grad-hero: radial-gradient(62% 58% at 20% 4%, color-mix(in oklab, var(--c-accent) 26%, transparent), transparent 70%), radial-gradient(46% 44% at 88% 0%, color-mix(in oklab, var(--c-gold) 16%, transparent), transparent 72%); --grad-band: linear-gradient(168deg, var(--c-surface) 0%, var(--c-bg) 62%); --grad-rule: linear-gradient(90deg, transparent, var(--c-gold), transparent); --grad-accent-line: linear-gradient(90deg, var(--c-accent), var(--c-gold)); --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 600; --display-tracking: -0.021em; --display-variation: "SOFT" 30, "WONK" 1; --body-weight: 400; --body-weight-strong: 600; --radius-card: var(--radius-lg); } /* ========================================================================== HIMMELBLAU Sky blue instead of night blue: the same structure as "nachtblau", but the ground is lifted out of near-black into an actual blue. Measured, because this is the range where a background stops being able to carry text: #134E7E reaches 8.68:1 against white where #0A1524 reaches 18.33, so it is visibly lighter and still comfortable to read on. One step lighter (#16588C) drops the gold to 3.91:1 and it can no longer be used as a text colour at all - which is why the ground stops here. The gold and the link colour are lifted with it. The old #D9B863 lands at exactly 4.54:1 on this ground, and a value that close to the 4.5 threshold is not a value, it is a coincidence. ========================================================================== */ [data-theme="himmelblau"] { color-scheme: dark; --c-bg: #134E7E; --c-surface: #0F4370; /* sunk, not raised: keeps text contrast up */ --c-surface-2: #0D3A5E; --c-line: #2F6FA0; /* decorative hairline */ --c-line-strong: #6AA0C9; /* 3.09:1 on --c-bg — component borders */ --c-ink: #EAF4FD; /* 7.80:1 on --c-bg */ --c-ink-muted: #B4CFE6; /* 5.38:1 on --c-bg */ --c-accent: #8ECDF4; /* 5.04:1 on --c-bg */ --c-accent-ink: #8ECDF4; --c-accent-surface: #17588C; --c-on-accent: #08283F; --c-gold: #E8CE8A; /* 5.63:1 on --c-bg */ --c-gold-ink: #E8CE8A; --c-gold-display: #E8CE8A; --c-gold-soft: #F5E7BE; --c-on-gold: #0B2E4C; /* 9.03:1 on --c-gold */ --c-silver: #C6D3DE; --c-up: #74DCB4; /* 5.23:1 */ --c-down: #FFAEA3; /* 4.89:1 */ --c-focus: #F5E7BE; --c-hairline-on-image: rgb(255 255 255 / 0.20); --shadow-1: 0 1px 2px rgb(4 24 42 / 0.30), 0 6px 18px rgb(4 24 42 / 0.26); --shadow-2: 0 2px 6px rgb(4 24 42 / 0.36), 0 22px 52px rgb(4 24 42 / 0.34); /* Light comes from above, the way it does in a sky. */ --grad-hero: radial-gradient(75% 60% at 50% -10%, color-mix(in oklab, #9DD5F7 34%, transparent), transparent 68%), radial-gradient(42% 40% at 88% 2%, color-mix(in oklab, var(--c-gold) 16%, transparent), transparent 72%); --grad-band: linear-gradient(180deg, color-mix(in oklab, #9DD5F7 10%, var(--c-bg)) 0%, var(--c-bg) 70%); --grad-rule: linear-gradient(90deg, transparent, var(--c-gold), transparent); --grad-accent-line: linear-gradient(90deg, var(--c-accent), var(--c-gold)); --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 600; --display-tracking: -0.021em; --display-variation: "SOFT" 30, "WONK" 1; --body-weight: 400; --body-weight-strong: 600; --radius-card: var(--radius-lg); } /* ========================================================================== HIMMELBLAU-HELL One step further up the same sky, and after a second lightening the step the site actually runs on. The ground reaches 5.80:1 against white where "himmelblau" reaches 8.68 and "nachtblau" 18.33, so the three form a staircase rather than three shades of the same thing. Everything that sits on the ground had to be lifted with it, and that is the whole reason this is a theme and not a single changed value: at #1A6299 the gold of the darker theme lands at 4.19:1 and stops working as a text colour, the muted text at 4.00. Both were raised until they measured over 4.5 again, and the same had to be done once more for #1C6AA5. ========================================================================== */ [data-theme="himmelblau-hell"] { color-scheme: dark; /* Lightened once more on request, from #1A6299 (6.46:1 against white) to #1C6AA5 (5.80:1). That is not one value: everything sitting on the ground lost contrast with it, so hue and saturation were kept and only lightness raised, until each token measured over 4.65 again - a value that lands exactly on 4.50 fails the next time anybody touches it. There is not much room left. At about 4.65:1 against white the ground reaches a hard ceiling: white body text itself no longer clears 4.5:1 there, so no choice of ink can rescue it. And one step before that, at 5.2:1, the gold arrives at #FAF2DF and the accent at #E5F5FD - readable, and no longer colours. Both measured, not estimated. */ --c-bg: #1F75B6; --c-surface: #1C6BA7; --c-surface-2: #1A639A; --c-line: #2D90DB; --c-line-strong: #ADD1E9; /* 3.06:1 on --c-bg */ --c-ink: #F2F8FE; /* 4.59:1 on --c-bg */ --c-ink-muted: #F0F7FB; /* 4.54:1 on --c-bg */ /* From here on the FILL colours and the TEXT colours part company, and that is what saves the palette at this brightness. A gold button only has to carry its own dark label (9.60:1), not to stand out against the page - so --c-gold stays gold for buttons, badges, the logo and the rules. Only gold as TEXT has to clear 4.5:1 against the ground, and at this brightness that forces it to near-white. Same split for the accent. */ --c-accent: #CEECFC; /* fill and decoration - keeps its colour */ --c-accent-ink: #ECF8FE; /* 4.54:1 on --c-bg - text only */ --c-accent-surface: #2281C8; --c-on-accent: #0B3A5E; /* 9.56:1 on --c-accent */ --c-gold: #F5E7C2; /* fill: buttons, badges, logo, rules */ --c-gold-ink: #FBF6E8; /* 4.55:1 on --c-bg - text only */ --c-gold-display: #F5E7C2; --c-gold-soft: #FAF2DF; --c-on-gold: #0B3A5E; /* 9.60:1 on --c-gold */ --c-silver: #DFE7EE; --c-up: #E7FAF3; /* 4.53:1 */ --c-down: #FFF4F1; /* 4.55:1 */ --c-focus: #FAF2DF; --c-hairline-on-image: rgb(255 255 255 / 0.24); --shadow-1: 0 1px 2px rgb(6 34 58 / 0.26), 0 6px 18px rgb(6 34 58 / 0.22); --shadow-2: 0 2px 6px rgb(6 34 58 / 0.32), 0 22px 52px rgb(6 34 58 / 0.30); --grad-hero: radial-gradient(75% 60% at 50% -10%, color-mix(in oklab, #C6E9FB 40%, transparent), transparent 68%), radial-gradient(42% 40% at 88% 2%, color-mix(in oklab, var(--c-gold) 20%, transparent), transparent 72%); --grad-band: linear-gradient(180deg, color-mix(in oklab, #C6E9FB 12%, var(--c-bg)) 0%, var(--c-bg) 70%); --grad-rule: linear-gradient(90deg, transparent, var(--c-gold), transparent); --grad-accent-line: linear-gradient(90deg, var(--c-accent), var(--c-gold)); --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 600; --display-tracking: -0.021em; --display-variation: "SOFT" 30, "WONK" 1; --body-weight: 400; --body-weight-strong: 600; --radius-card: var(--radius-lg); } /* ========================================================================== HIMMELBLAU-TAG The other reading of "lighter": not a lighter blue behind light text, but daylight — pale sky as the ground and dark ink on top. 1.14:1 against white, so it is a light theme in the ordinary sense. Blue and gold change role here. On a pale ground they cannot be text at their full brightness, so each has two values: a saturated one for surfaces and a darkened one for type. Gold as a surface with dark text on it measures 9.28:1; gold as text has to come down to #7E6220 to reach 5.06. ========================================================================== */ [data-theme="himmelblau-tag"] { color-scheme: light; --c-bg: #E7F2FB; --c-surface: #FFFFFF; --c-surface-2: #D8E9F7; --c-line: #C9DCEC; --c-line-strong: #5F7C96; /* 3.84:1 on --c-bg */ --c-ink: #0D2C47; /* 12.59:1 on --c-bg */ --c-ink-muted: #3E5B75; /* 6.25:1 on --c-bg */ --c-accent: #0F5488; /* 6.99:1 on --c-bg */ --c-accent-ink: #0F5488; --c-accent-surface: #D3E6F6; --c-on-accent: #FFFFFF; /* 7.94:1 on --c-accent */ --c-gold: #E8CE8A; /* surface only */ --c-gold-ink: #7E6220; /* 5.06:1 on --c-bg */ --c-gold-display: #7E6220; --c-gold-soft: #F6EDD6; --c-on-gold: #0D2C47; /* 9.28:1 on --c-gold */ --c-silver: #A9B8C6; --c-up: #12654A; /* 6.19:1 */ --c-down: #A32E22; /* 6.22:1 */ --c-focus: #0F5488; --c-hairline-on-image: rgb(13 44 71 / 0.16); --shadow-1: 0 1px 2px rgb(13 44 71 / 0.07), 0 6px 16px rgb(13 44 71 / 0.08); --shadow-2: 0 2px 6px rgb(13 44 71 / 0.09), 0 20px 46px rgb(13 44 71 / 0.12); --grad-hero: radial-gradient(75% 62% at 50% -12%, color-mix(in oklab, #9DD5F7 46%, transparent), transparent 66%), radial-gradient(44% 40% at 90% 0%, color-mix(in oklab, var(--c-gold) 40%, transparent), transparent 72%); --grad-band: linear-gradient(180deg, var(--c-surface-2) 0%, var(--c-bg) 68%); --grad-rule: linear-gradient(90deg, transparent, var(--c-gold), transparent); --grad-accent-line: linear-gradient(90deg, var(--c-accent), var(--c-gold)); --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 600; --display-tracking: -0.021em; --display-variation: "SOFT" 30, "WONK" 1; --body-weight: 400; --body-weight-strong: 600; --radius-card: var(--radius-lg); } /* ========================================================================== B — KONZEPT The three colours from the concept document, used the only way their measured contrast allows: blue and gold are SURFACE colours carrying dark text. For links and body text they are replaced by darker derivatives, because #3F89EC reaches only 3.50:1 on white and #CFAF5B only 2.11:1. ========================================================================== */ [data-theme="konzept"] { color-scheme: light; --c-bg: #FFFFFF; --c-surface: #F5F7FA; --c-surface-2: #EAEFF6; --c-line: #DCE3EB; /* 3.16:1 on white. The previous #8A97A8 carried the note "3.04:1" and measured 2.97 - a figure written down without being computed. */ --c-line-strong: #8692A3; --c-ink: #16233A; /* 15.72:1 on white */ --c-ink-muted: #4E5D72; /* 6.70:1 on white */ --c-accent: #3F89EC; /* the specified blue — SURFACE only */ --c-accent-ink: #1B5FBF; /* 6.11:1 on white — the text-safe derivative */ --c-accent-surface: #E7F0FD; --c-on-accent: #FFFFFF; /* on --c-accent-ink, 6.11:1 */ --c-gold: #CFAF5B; /* the specified gold — SURFACE only */ --c-gold-ink: #7A6220; /* 5.84:1 on white — the text-safe derivative */ --c-gold-display: #7A6220; --c-gold-soft: #F3E9CE; --c-on-gold: #16233A; /* 7.44:1 on --c-gold */ --c-silver: #BFC1C2; --c-up: #1B7A56; --c-down: #B4392F; --c-focus: #1B5FBF; --c-hairline-on-image: rgb(22 35 58 / 0.12); --shadow-1: 0 1px 2px rgb(22 35 58 / 0.07), 0 6px 16px rgb(22 35 58 / 0.07); --shadow-2: 0 2px 6px rgb(22 35 58 / 0.09), 0 20px 46px rgb(22 35 58 / 0.11); --grad-hero: radial-gradient(60% 56% at 18% 2%, color-mix(in oklab, var(--c-accent) 20%, transparent), transparent 68%), radial-gradient(46% 44% at 90% 0%, color-mix(in oklab, var(--c-gold) 24%, transparent), transparent 72%); --grad-band: linear-gradient(168deg, var(--c-surface) 0%, var(--c-bg) 60%); --grad-rule: linear-gradient(90deg, transparent, var(--c-gold), transparent); --grad-accent-line: linear-gradient(90deg, var(--c-accent), var(--c-gold)); --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif; --display-weight: 700; --display-tracking: -0.030em; /* Montserrat runs wide at display sizes */ --display-variation: normal; --body-weight: 400; --body-weight-strong: 700; --radius-card: var(--radius-md); } /* ========================================================================== C — EDITORIAL Warm paper, ink blue, gold reserved for rules and figures. High-contrast serif at display sizes, generous white space. ========================================================================== */ [data-theme="editorial"] { color-scheme: light; --c-bg: #F7F4EE; --c-surface: #FFFDF8; --c-surface-2: #F0EBE0; --c-line: #DED7C9; --c-line-strong: #8F836A; /* 3.40:1 on --c-bg */ --c-ink: #101D2E; /* 15.46:1 on --c-bg */ --c-ink-muted: #4A5666; /* 6.80:1 on --c-bg */ --c-accent: #1B3F72; /* 9.56:1 on --c-bg */ --c-accent-ink: #1B3F72; --c-accent-surface: #E3E9F2; --c-on-accent: #F7F4EE; --c-gold: #C9A548; /* decorative rules only */ --c-gold-ink: #7B6124; /* 5.35:1 on --c-bg */ --c-gold-display: #7B6124; --c-gold-soft: #EFE4C8; --c-on-gold: #101D2E; --c-silver: #A9A9A2; --c-up: #1F6B4E; --c-down: #A83A2E; --c-focus: #7B6124; --c-hairline-on-image: rgb(16 29 46 / 0.14); --shadow-1: 0 1px 2px rgb(70 58 34 / 0.08), 0 6px 16px rgb(70 58 34 / 0.07); --shadow-2: 0 2px 6px rgb(70 58 34 / 0.10), 0 20px 46px rgb(70 58 34 / 0.10); --grad-hero: radial-gradient(58% 54% at 16% 0%, color-mix(in oklab, var(--c-gold) 26%, transparent), transparent 68%), radial-gradient(44% 42% at 92% 4%, color-mix(in oklab, var(--c-accent) 14%, transparent), transparent 74%); --grad-band: linear-gradient(168deg, var(--c-surface) 0%, var(--c-bg) 58%); --grad-rule: linear-gradient(90deg, transparent, var(--c-gold), transparent); --grad-accent-line: linear-gradient(90deg, var(--c-accent), var(--c-gold)); --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif; --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --display-weight: 400; --display-tracking: -0.006em; --display-variation: normal; --body-weight: 400; --body-weight-strong: 700; --radius-card: var(--radius-sm); } /* ========================================================================== D — GEOMETRIE Technical and precise. One type family carried by weight and tracking alone, near-square corners, the retracement marks used as a graphic device. ========================================================================== */ [data-theme="geometrie"] { color-scheme: light; --c-bg: #FBFCFD; --c-surface: #F0F3F7; --c-surface-2: #E4EAF1; --c-line: #CFD8E3; --c-line-strong: #7C8FA8; /* 3.22:1 on --c-bg */ --c-ink: #0D1B2A; /* 16.93:1 on --c-bg */ --c-ink-muted: #54637A; /* 5.94:1 on --c-bg */ --c-accent: #1E5AA8; /* 6.63:1 on --c-bg */ --c-accent-ink: #1E5AA8; --c-accent-surface: #DEE9F7; --c-on-accent: #FBFCFD; --c-gold: #D4AF4F; /* retracement marks, decorative */ --c-gold-ink: #8A6E24; /* 4.71:1 on --c-bg */ --c-gold-display: #8A6E24; --c-gold-soft: #F2E7C8; --c-on-gold: #0D1B2A; --c-silver: #A7B0BB; --c-up: #14724F; --c-down: #A63428; --c-focus: #1E5AA8; --c-hairline-on-image: rgb(13 27 42 / 0.14); --shadow-1: 0 1px 1px rgb(13 27 42 / 0.06), 0 4px 12px rgb(13 27 42 / 0.06); --shadow-2: 0 1px 3px rgb(13 27 42 / 0.08), 0 16px 40px rgb(13 27 42 / 0.09); --grad-hero: linear-gradient(180deg, color-mix(in oklab, var(--c-accent) 7%, transparent), transparent 58%), radial-gradient(50% 48% at 88% 0%, color-mix(in oklab, var(--c-gold) 20%, transparent), transparent 72%); --grad-band: linear-gradient(180deg, var(--c-surface) 0%, var(--c-bg) 55%); --grad-rule: linear-gradient(90deg, var(--c-gold), var(--c-gold)); --grad-accent-line: linear-gradient(90deg, var(--c-accent), var(--c-gold)); --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 700; --display-tracking: -0.034em; --display-variation: normal; --body-weight: 400; --body-weight-strong: 600; --radius-card: 2px; --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; }