/* ══════════════════════════════════════════════════════════════ THE TYPEFACES, SELF-HOSTED Not Google Fonts. A request to fonts.googleapis.com or fonts.gstatic.com sends the visitor's IP address to Google before anything is rendered, with no consent and no way to refuse it - which LG Muenchen I ruled a GDPR violation in January 2022, and which is not a thing a product sold into DACH should be doing on its own marketing site. The two faces are OFL licensed, so they are served from this origin instead. Nothing on these pages now talks to a third party. Instrument Sans is variable 400-700, so one file covers all three weights. Latin and latin-ext are kept separate with their own unicode-range, exactly as Google splits them, so a reader who never hits an extended glyph never downloads the second file. ══════════════════════════════════════════════════════════════ */ @font-face{ font-family:'Instrument Sans'; font-style:normal;font-weight:400 600;font-display:swap; src:url('fonts/instrument-sans-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Instrument Sans'; font-style:normal;font-weight:400 600;font-display:swap; src:url('fonts/instrument-sans-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Instrument Serif'; font-style:normal;font-weight:400;font-display:swap; src:url('fonts/instrument-serif-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face{ font-family:'Instrument Serif'; font-style:normal;font-weight:400;font-display:swap; src:url('fonts/instrument-serif-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* General Sans carries the whole site. Three static weights rather than a variable file, because only 400/500/600 are ever used and three subset files are smaller than one variable one. */ @font-face{font-family:'General Sans';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/general-sans-400.woff2') format('woff2')} @font-face{font-family:'General Sans';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/general-sans-500.woff2') format('woff2')} @font-face{font-family:'General Sans';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/general-sans-600.woff2') format('woff2')} /* IBM Plex Mono, for figures only. It has true tabular numerals, so a counting number does not jitter as its digits change. */ @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url('fonts/plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/plex-mono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/plex-mono-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ============================================================ Tyll: the locked design system. FOUR colours. Everything else on this page is a color-mix() derived from them. No file declares a fifth hex. ============================================================ */ :root{ /* ---- The palette --------------------------------------------------- Round 7. White, with one blue. The old four-colour scheme put a dusty slate blue (#39558C) next to a navy of almost the same hue, so the accent read as faded heading text rather than as an accent. The blue is now cleanly separated in saturation, and the navy comes from the wordmark itself. */ --paper:#FFFFFF; /* the page. White, not off-white. */ --paper-alt:#FAFAFA; /* the only other ground. Barely there. */ --navy:#131A28; /* the wordmark's navy: headings and body 17.4:1 */ --grey:#5A6070; /* secondary text 6.3:1 */ --grey-2:#666E7D; /* labels and eyebrows 5.1:1 white, 4.9:1 alt The brief asked for ~#9097A3 here, which is 2.9:1 on white and fails the AA check the same brief also requires. This is the lightest grey that clears 4.5:1 on BOTH grounds; measured against white alone it would have been two steps lighter and would have failed inside the widgets. */ --accent:#1F49C9; /* the one blue. Links, the CTA, every active state, every icon stroke. 7.4:1 */ --accent-tint:#F2F5FE; /* the only tinted fill: a matched row, an icon badge. Nothing else on the page is tinted. */ --flag:#B0473D; /* a muted red, used for ONE thing: the dot that marks a difference that is still open. The only colour on the site that is neither navy, grey, white nor blue. 5.5:1 */ --line:#E8E8EC; /* every border is 1px of this */ /* ---- ROUND 8: the diagram needs a resolved state ------------------ Round 7 banned green outright, because colour was being used for decoration. Round 8 gives red and green one job each inside the How it works diagram and nowhere else: red is a difference that is still open, green is one that has been reviewed. Both clear AA on white and on their own tint, so the euro figure stays readable when the row fills in. */ --ok:#1A7A42; /* resolved 5.4:1 white, 4.8:1 on its tint */ --ok-tint:#EAF5EE; /* the row fill once a difference is closed */ --flag-tint:#FCEDEA; /* the row fill while it is still open */ /* ---- Derived states ------------------------------------------------ */ --accent-hover:color-mix(in srgb, var(--accent) 88%, var(--navy)); --accent-wash:var(--accent-tint); /* --paper-alt is now #FAFAFA, on which --grey is 6.1:1, so the bridge token this used to need is just --grey. Kept as an alias so nothing that references it breaks. */ --text-muted-alt:var(--grey); --line-dark:rgb(255 255 255 / .18); /* over the hero video only */ /* ---- Type ----------------------------------------------------------- The wordmark is a high-contrast lowercase serif. The site therefore carries NO other serif: the logo is the only one on the page, which is what makes it read as a mark rather than as a heading. See the note in the summary for the two systems this was chosen against. Round 7 also retires the old sans + serif-headline + mono-label trio, which is the arrangement half the category already uses. */ --sans:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --display:var(--sans); --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace; /* ---- Geometry -------------------------------------------------------- */ --r:2px; /* everywhere. sharp, near-square, never bubbly */ /* ---- Motion ---------------------------------------------------------- */ /* One ease-out for the whole page, and four durations. Nothing else. */ --ease:cubic-bezier(.22,.61,.36,1); --t-state:.2s; /* hover, focus, small state */ --t-section:.35s; /* a section changing what is lit */ --t-reveal:.65s; /* something arriving */ --t-count:1.1s; /* the counting numbers */ /* ---- Type scale ------------------------------------------------------- Seven steps. Every font-size on the site is one of these; nothing declares its own clamp. Tracking is size-specific (large negative, small positive), so it travels with the step. */ --fs-micro:.625rem; /* mono labels */ --fs-label:.6875rem; /* eyebrows, stat labels */ --fs-sm:.9375rem; /* card body, step body */ --fs-body:clamp(15.5px,1vw,17px); /* the base */ --fs-lede:clamp(1.04rem,1.4vw,1.26rem); /* ledes, h3 */ --fs-h3:clamp(1.6rem,2.8vw,2.3rem); /* sans sub-headings */ --fs-h2:clamp(1.9rem,3.5vw,3.05rem); /* section headlines */ --fs-stat:clamp(2.1rem,3.9vw,3.3rem); /* figures */ --fs-display:clamp(2.1rem,4.6vw,4.4rem); /* the hero */ --tr-display:-.02em; --tr-h2:-.015em; --tr-body:0; --tr-label:.14em; --lh-display:1.05; --lh-h2:1.1; --lh-body:1.6; /* ---- Space scale ------------------------------------------------------ Seven steps, all viewport-aware. Padding, margin and gap come from here; a component that needs something in between rounds to a step. */ --sp-1:clamp(.4rem,1.4vh,1rem); --sp-2:clamp(.9rem,2vw,1.4rem); --sp-3:clamp(1.1rem,2.4vh,1.7rem); --sp-4:clamp(1.6rem,3.2vh,2.4rem); --sp-5:clamp(2rem,4.5vh,3rem); --sp-6:clamp(2.4rem,6vh,4.2rem); --sp-7:clamp(3rem,7vh,5rem); --sp-col:clamp(1.8rem,5vw,5rem); /* the two-column gutter */ /* ---- Rhythm ---------------------------------------------------------- */ --s-tight:.85rem; --s-pair:1.2rem; --s-break:2rem; --s-block:2.9rem; /* ---- Section rhythm --------------------------------------------------- Three tokens do all the vertical work. Nothing declares a one-off section padding, block gap or card padding any more. */ --space-section:clamp(64px,9vh,112px); /* section top/bottom */ /* Round 9 Task 5: ONE value for the space between a section's rules and its content, top and bottom, pinned or not. Derived from --sp-4 so the whole page's section rhythm moves by editing --sp-4 or this multiplier alone. Every per-section override that used to disagree with it is deleted. */ --sec-pad:calc(var(--sp-4) * 2); /* box edge -> the section's rule */ --sec-gap:var(--sp-4); /* the rule -> the first line */ --space-block:clamp(32px,4.5vh,48px); /* header block -> its content */ --space-card:clamp(24px,2.6vw,32px); /* inside a card */ --space-grid:clamp(16px,1.8vw,24px); /* between cards in a grid */ --gut:clamp(20px,4.6vw,72px); --sec:clamp(72px,10vh,140px); --rail:clamp(300px,25vw,368px); } /* Without color-mix the derived states must still be legible, so each one falls back to the nearest of the four rather than to nothing. */ /* Only --accent-hover still uses color-mix; every other token is now a flat hex, so this fallback has one line left in it. */ @supports not (color: color-mix(in srgb, red 50%, blue)){ :root{ --accent-hover:#1A3DA8 } }