/* Design tokens. * * Every value here is what the site already renders, so introducing this file * changes nothing on screen. It exists so the design can be changed in one * place, and so a second set can be switched on and off whole. * * A second set goes on `:root[data-design="v2"]`, and the switch is one * attribute on . That covers everything expressible as a value — * colour, type, spacing, radius. It does not cover structure: column counts, * breakpoints and the order of blocks are markup, and those belong on a * branch of their own. * * Loaded before newstyle.css, which sets `* { color: #000; font-family: … }` * and reaches every element directly. Until that rule goes, a token can be * beaten by it on any element that does not restate what it inherits. */ :root { /* ---------- surfaces ---------- */ --c-surface: #fff; --c-surface-tinted: #f7f9fc; --c-surface-dark: #0e1f3d; /* ---------- text ---------- */ --c-text: #1a1a1a; --c-text-muted: #44505f; --c-text-subtle: #7b8798; --c-text-on-dark: #fff; /* ---------- accent ---------- */ --c-accent: #1a73e8; --c-accent-hover: #1b5ed0; /* The call to action and the accent are one colour today. They are separate roles because a design can pull them apart, and the current mockup does. */ --c-cta: #1a73e8; --c-cta-text: #fff; /* ---------- lines ---------- */ --c-border: #e3e9f2; --c-border-soft: #eef2f8; --c-rule: #c3cede; /* ---------- type ---------- */ --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; /* ---------- measure ---------- The content column, and how much of a narrower window it takes. */ --measure-page: 1350px; --measure-page-fill: 95%; /* ---------- rhythm ---------- */ --space-section: 88px; /* The opening section clears the hero, so it runs deeper than the rest. */ --space-section-open: 104px; --space-head: 44px; --space-grid: 24px; /* Five tiles in a row sit closer than three cards do. */ --space-grid-tight: 16px; --space-card: 28px; /* The comparison columns end a little shallower than they begin. */ --space-card-foot: 24px; --space-record: 26px 22px; /* ---------- corners ---------- */ --radius-card: 16px; --radius-pill: 999px; /* ---------- type ---------- Two sizes for the hero: the front door runs larger from 1200 up. */ --fs-hero: 40px; --fs-hero-wide: 44px; --lh-hero: 1.25; --track-hero: 0; --fs-subtitle: 21px; --lh-subtitle: 32px; --fw-subtitle: 590; --fs-h2: 32px; --lh-h2: 1.4; --track-h2: 0; --fs-lede: 17px; --lh-lede: 1.6; --fs-card-title: 22px; --lh-card-title: 1.4; --fs-body: 16px; --lh-body: 1.6; /* The prose column runs 26px against the cards' 25.6. The difference looks accidental, but it is what the page draws, so it keeps a role of its own rather than being rounded into --lh-body. */ --lh-prose: 26px; --fs-caption: 15px; --lh-caption: 1.5; --fs-eyebrow: 12px; --track-eyebrow: 1.2px; /* ---------- hero ---------- */ --hero-bg: var(--c-accent) url('/img/hero-bg.png') 90px 0 / cover no-repeat; --hero-blend: normal; --hero-cta-bg: #fff; --hero-cta-text: var(--c-accent); --cta-fs: 14px; --cta-fw: 500; --cta-pad: 12px 28px; --nav-cta-bg: var(--c-accent); --nav-cta-text: #fff; /* The bar keeps one ground in this design, so clear and solid are the same colour and the class the header carries changes nothing. */ --nav-bg: #fff; --nav-bg-clear: #fff; --nav-hover-bg: #e8f0fe; --link-hover-shift: 0; --nav-burger: #24292e; --nav-text: #000; --nav-text-clear: #000; --nav-text-current: var(--c-accent); --nav-text-current-clear: var(--c-accent); --nav-logo: normal; --nav-arrow: normal; /* Nothing is pulled under the bar, because the bar is never transparent. */ --nav-pull: 0; --hero-measure: 780px; --hero-title-measure: 700px; --hero-pad: 120px 45px 96px; /* ---------- the tile that carries the argument ---------- Fourth of five: the record that does not exist yet. */ --record-lead-bg: var(--c-accent); --record-lead-ring: none; /* ---------- parts the v1 design does not draw ---------- Markup that only the new design uses is shipped once and switched on by value, so neither design needs a branch of its own. */ --tile-icon: none; /* The consumer phrases run as one sentence here, so the items sit on a line, the full stops come back, and there is no marker and no indent. */ --says-item: inline; --says-sep: '. '; --says-mark: none; --says-indent: 0; --says-gap: 0; /* ---------- cards ---------- */ --card-bg: #fff; --card-title-color: var(--c-text); --card-title-weight: 700; /* ---------- the four questions ---------- Four cards here; one panel divided by rules in the next design. */ --panel-bg: transparent; --panel-radius: 0; --panel-pad: 0; --panel-gap: var(--space-grid); --panel-card-bg: #fff; --panel-card-radius: var(--radius-card); --panel-card-pad: var(--space-card); --panel-rule: 1px solid var(--c-border); /* ---------- the two question columns ---------- Two cards here, one of them dark; two plain ruled lists in the next. */ --compare-gap: var(--space-grid); --compare-col-bg: #fff; --compare-col-pad: var(--space-card); --compare-col-pad-foot: var(--space-card-foot); --compare-col-radius: var(--radius-card); --compare-missing-bg: var(--c-surface-dark); --compare-missing-border: #cddcf5; --compare-missing-text: #fff; --compare-missing-rule: #23375c; --compare-missing-h3: rgba(255, 255, 255, 0.6); --compare-h3-fs: 13px; --compare-h3-weight: 700; --compare-h3-case: uppercase; --compare-h3-track: 0.6px; --compare-h3-lh: 1.5; --compare-h3-color: #5a6b82; --compare-h3-gap: 18px; /* ---------- a heading block that is set left ---------- Every heading block is centred here, so these repeat what `.head` says. */ --head-left-align: center; --head-left-ml: auto; --head-left-measure: 860px; /* The two column headings are different lengths, so one wraps and the other does not, and the lists under them start at different heights. Holding two lines' worth of space puts both lists on the same line. Only the design that sets these headings large enough to wrap needs it. */ --compare-h3-min: auto; /* ---------- a section set on the dark band ---------- Nothing is dark here, so every value repeats what the plain section says. */ --dark-band: var(--band-plain); --dark-band-blend: normal; --dark-band-text: var(--c-text); --dark-band-lede: var(--c-text-muted); --dark-band-kicker: var(--c-accent); --dark-band-link: var(--c-accent); --evidence-glow: none; /* ---------- the closing band ---------- One band on every page. This design centres it on accent blue; the next lays it out as a row on tint. Direction and alignment are values too, so the switch does not need two copies of the markup. */ --closer-bg: var(--c-accent); --closer-pad: 88px 0; --closer-measure: 760px; --closer-dir: column; --closer-justify: center; --closer-gap: 0; --closer-text-align: center; --closer-title-fs: 32px; --closer-title-lh: 150%; --closer-title-color: #fff; --closer-text-color: #fff; --closer-text-gap: 20px; --closer-btn-bg: #fff; --closer-btn-color: var(--c-accent); --closer-btn-border: 2px solid var(--c-accent); --closer-btn-w: 182px; --closer-btn-h: 48px; --closer-btn-margin: auto; --closer-btn-pad: 0; --closer-text-display: contents; --closer-text-measure: none; /* ---------- the footer ---------- */ --footer-bg: #f1f6fe; --footer-pad-top: 80px; --footer-pad-bottom: 150px; --footer-head-color: #1a1a1a; --footer-head-gap: 30px; --footer-link-color: #484f56; --footer-link-weight: 400; --footer-link-gap: 16px; --footer-rights-color: #1a1a1a; --footer-rights-opacity: 0.8; --footer-top-display: flex; --footer-cols: none; --footer-gap: 0; --footer-group-display: contents; --footer-pair-display: flex; --footer-res-display: flex; --footer-cta-display: flex; --footer-blog-display: none; --footer-legal-gap: 50px; /* ---------- the alternation ---------- Sections alternate plain and tinted. Which of the two starts the page is a design decision, so it is a value: the mockup opens on tint where this design opens on white, and swapping these two inverts the whole run. */ --band-plain: var(--c-surface); --band-tinted: var(--c-surface-tinted); } /* --------------------------------------------------------------------------- * v2 — the September 2026 design direction. * * Switch it on with `?design=v2` on any URL, or `data-design="v2"` on . * Take it off with `?design=v1`. Nothing is built twice and no branch is * needed, because every value below is a value. Structure is not here: * twelve columns, new breakpoints and any change to the order of blocks are * markup, and those belong on a branch. * ------------------------------------------------------------------------- */ :root[data-design='v2'] { --c-surface: #fff; --c-surface-tinted: #f0f2fa; --c-surface-dark: #000d40; --c-text: #000; --c-text-muted: #54608c; --c-text-subtle: #54608c; --c-text-on-dark: #fff; --c-accent: #0041ff; /* Not specified. A darker step of the accent, to be replaced. */ --c-accent-hover: #0034cc; --c-cta: #fb4027; --c-cta-text: #fff; /* Cards carry no outline in this design. The role stays so the rule it feeds keeps working; it just draws nothing. */ --c-border: transparent; --c-border-soft: #ccd0e0; --c-rule: #ccd0e0; --font-sans: 'Google Sans', -apple-system, BlinkMacSystemFont, sans-serif; --measure-page: 1280px; /* 80px of air each side of a 1440 frame, which is what the mockup draws. */ --measure-page-fill: calc(100% - 160px); --space-section: 120px; --space-section-open: 120px; --space-head: 40px; --space-grid: 20px; --space-grid-tight: 20px; --space-card: 24px; --space-card-foot: 24px; --space-record: 24px; --radius-card: 12px; --radius-pill: 999px; /* 64/70, 40/50, 20/24, 16/24, 14/20, 12/16 — the mockup's whole scale. Leading tightens as size grows, which is why the headings read denser than the 150% the site has used everywhere until now. */ --fs-hero: 64px; --fs-hero-wide: 64px; --lh-hero: 1.094; --track-hero: -1px; --fs-subtitle: 20px; --lh-subtitle: 1.5; --fw-subtitle: 500; --fs-h2: 40px; --lh-h2: 1.25; --track-h2: -1px; --fs-lede: 16px; --lh-lede: 1.5; --fs-card-title: 20px; --lh-card-title: 1.25; --fs-body: 16px; --lh-body: 1.5; --lh-prose: 1.5; --fs-caption: 16px; --lh-caption: 1.5; --fs-eyebrow: 12px; --track-eyebrow: 1px; /* Exported from the mockup rather than rebuilt as a gradient: it is one blurred ellipse over #000D40, and the export is the ellipse. */ /* Three layers: the dot screen, the band, the ground. The dots multiply, so they disappear into the dark corners and only show where the glow lifts the band — which is how the mockup behaves. The SVG export drops this layer, so it is rebuilt here: a 24px grid of 2px dots, measured off the mockup at eight times. The ink is the one value worth reaching for: the screen should read as texture, not as a pattern you can count. */ --dot-ink: rgba(0, 0, 0, 0.15); --dot-screen: radial-gradient(circle at 1px 1px, var(--dot-ink) 1px, transparent 1.4px) 0 0 / 24px 24px repeat; --hero-bg: var(--dot-screen), url('/img/design/hero-band.svg') 0 0 / 100% 100% no-repeat, var(--c-surface-dark); --hero-blend: multiply, normal, normal; --hero-cta-bg: var(--c-cta); --hero-cta-text: var(--c-cta-text); --cta-fs: 16px; --cta-fw: 700; --cta-pad: 12px 24px; --nav-cta-bg: var(--c-cta); --nav-cta-text: var(--c-cta-text); --nav-bg: var(--c-surface-dark); --nav-bg-clear: transparent; /* White at a tenth, which is what the mockup uses for every translucent block in the bar. It works over both grounds: over the hero it lifts the band, over the solid bar it lifts the navy. */ --nav-hover-bg: rgba(255, 255, 255, 0.1); --link-hover-shift: 4px; /* Both of the bar's grounds are dark, so the burger is white on either. */ --nav-burger: #fff; --nav-text: #fff; --nav-text-clear: #fff; --nav-text-current: #fff; --nav-text-current-clear: #fff; --nav-logo: url('/img/design/logo-on-dark.svg'); --nav-arrow: url('/img/design/chevron-down-on-dark.svg'); /* The bar is 74 tall and starts clear, so the hero has to begin behind it. A negative margin does that without taking the bar out of the flow, which is what keeps it sticky. */ --nav-pull: -74px; --hero-measure: 1000px; --hero-title-measure: 1000px; --hero-pad: 199px 80px 120px; /* The lead tile stops being the blue one and becomes the dark one, lit from behind. Same tile, opposite weight. */ --record-lead-bg: var(--c-surface-dark); --record-lead-ring: 0 0 0 6px rgba(0, 65, 255, 0.25); --tile-icon: block; --says-item: block; --says-sep: none; --says-mark: ''; --says-indent: 16px; --says-gap: 4px; --card-bg: var(--c-surface-tinted); --card-title-color: #000e40; /* Card titles are set Medium in this design, not Bold. */ --card-title-weight: 500; --panel-bg: #f7f8fc; --panel-radius: var(--radius-card); --panel-pad: 24px 0; --panel-gap: 0; --panel-card-bg: transparent; --panel-card-radius: 0; --panel-card-pad: 0 24px; --panel-rule: 1px solid var(--c-border-soft); --compare-gap: 80px; --compare-col-bg: transparent; --compare-col-pad: 0; --compare-col-pad-foot: 0; --compare-col-radius: 0; --compare-missing-bg: transparent; --compare-missing-border: transparent; --compare-missing-text: var(--c-text); --compare-missing-rule: var(--c-border-soft); --compare-missing-h3: #000e40; --compare-h3-fs: 24px; --compare-h3-weight: 500; --compare-h3-case: none; --compare-h3-track: 0; --compare-h3-lh: 32px; --compare-h3-color: #000e40; --compare-h3-gap: 20px; --head-left-align: left; --head-left-ml: 0; --head-left-measure: 700px; --compare-h3-min: 64px; /* The same band as the hero, dots and all — same screen, same ink. */ --dark-band: var(--dot-screen), url('/img/design/hero-band.svg') 0 0 / 100% 100% no-repeat, var(--c-surface-dark); --dark-band-blend: multiply, normal, normal; --dark-band-text: #fff; --dark-band-lede: rgba(255, 255, 255, 0.75); --dark-band-kicker: #fff; --dark-band-link: #fff; --evidence-glow: 0 0 90px rgba(0, 65, 255, 0.45); --closer-bg: var(--c-surface-tinted); --closer-pad: 120px 0; --closer-measure: var(--measure-page); --closer-dir: row; --closer-justify: space-between; --closer-gap: 40px; --closer-text-align: left; --closer-title-fs: var(--fs-h2); --closer-title-lh: var(--lh-h2); --closer-title-color: var(--c-text); --closer-text-color: var(--c-text-muted); --closer-text-gap: 12px; --closer-btn-bg: var(--c-cta); --closer-btn-color: var(--c-cta-text); --closer-btn-border: none; --closer-btn-w: auto; --closer-btn-h: auto; --closer-btn-margin: 0; --closer-btn-pad: var(--cta-pad); --closer-text-display: block; --closer-text-measure: 700px; --footer-bg: var(--c-surface); --footer-pad-top: 60px; --footer-pad-bottom: 60px; --footer-head-color: #000e40; --footer-head-gap: 8px; --footer-link-color: var(--c-text-muted); --footer-link-weight: 500; --footer-link-gap: 8px; --footer-rights-color: #6a737d; --footer-rights-opacity: 1; --footer-top-display: grid; --footer-cols: repeat(4, minmax(0, 1fr)); --footer-gap: 20px; --footer-group-display: flex; /* Company and Legal become two of the four columns. */ --footer-pair-display: contents; /* Blog moves under Company, so the Resources column and the spacer go. */ --footer-res-display: none; --footer-cta-display: none; --footer-blog-display: block; --footer-legal-gap: 0; --band-plain: var(--c-surface-tinted); --band-tinted: var(--c-surface); } /* newstyle.css sets `* { font-family: … }` and matches every element directly, so the typeface can only follow a token from a rule that comes after it and carries the same weight. Components that name their own face — the terminal and the lineage sample — are scoped, which outranks this. */ * { font-family: var(--font-sans); }