/** * ZEBRA — the site's whole visual system. * * The brand is built from one idea: the crossing. The mark, the dividers and * the footer band are all the same repeating stripe, so there is no image to * ship and nothing to re-export when a size changes. * * Two rules run through everything below and are worth stating once: * yellow is an accent and never a page background — at most one yellow field * per screenful — and every number a candidate is judged by is set in mono, * because those are the numbers they will be arguing with. * * Themes: every surface, border and text colour is a token. A screen is * authored once and themed by flipping data-theme on . Two colours are * fixed in both themes — the signal yellow and the near-black that sits on it * — because a signal that changed with the theme would stop being a signal. * * `--invert` is a separate axis from `--ink`: it is the deliberately * contrasting panel (footer, the paper card's header strip, the straight-talk * panel, a failed verdict) and it stays dark in both themes. */ :root { color-scheme: light; --paper: #F4F2ED; --card: #FFFFFF; --ink: #0E0E0E; --ink-2: #2A2822; --ink-3: #4A473F; --muted: #6E6A62; --muted-2: #8A867C; --line: #E3E0D8; --line-strong: #CFCBC1; --wrong: #F3E4E1; --danger: #D62B1F; --hatch-a: #E7E4DC; --hatch-b: #F4F2ED; --shadow: #0E0E0E; /* Fixed in both themes. */ --signal: #FFD400; --on-signal: #0E0E0E; --on-signal-2: #5C4E00; --invert: #0E0E0E; --on-invert: #FFFFFF; --on-invert-2: #A5A199; --invert-line: #2A2822; --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --wrap: 1180px; --pad: 32px; } /* Auto: follow the system unless the reader has chosen light explicitly. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { color-scheme: dark; --paper: #121210; --card: #1B1B18; --ink: #F2EFE8; --ink-2: #E0DCD3; --ink-3: #BEB9AE; --muted: #948F85; --muted-2: #7C776E; --line: #2C2C27; --line-strong: #3C3C35; --wrong: #3A2622; --danger: #FF6B5E; --hatch-a: #24241F; --hatch-b: #1B1B18; --shadow: #000000; --invert: #050504; --on-invert: #F2EFE8; } } :root[data-theme='dark'] { color-scheme: dark; --paper: #121210; --card: #1B1B18; --ink: #F2EFE8; --ink-2: #E0DCD3; --ink-3: #BEB9AE; --muted: #948F85; --muted-2: #7C776E; --line: #2C2C27; --line-strong: #3C3C35; --wrong: #3A2622; --danger: #FF6B5E; --hatch-a: #24241F; --hatch-b: #1B1B18; --shadow: #000000; --invert: #050504; --on-invert: #F2EFE8; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--card); color: var(--ink-2); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Radius 0 is a brand decision, not an oversight: the crossing has corners. */ a, button, input, select { border-radius: 0; } a { color: inherit; } h1, h2, h3 { text-wrap: balance; margin: 0; } p { text-wrap: pretty; } img { max-width: 100%; display: block; } :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); } /* ---------------------------------------------------------------- the mark */ /** * The crossing. A black field with stripes knocked out of it — closed on all * four sides, so it survives on white, on yellow and on black alike. * * The gradient stops are elevenths (six black bands, five yellow) above 28px * and sevenths (four and three) below it, where eleven bands turn to mud. The * field is --ink, so the mark inverts with the theme on its own. */ .zmark { --zs: 26px; --zr: calc(var(--zs) / 7); display: inline-block; flex: none; width: var(--zs); height: var(--zs); background: repeating-linear-gradient(90deg, var(--ink) 0 14.2857%, var(--signal) 14.2857% 28.5714%); border-top: var(--zr) solid var(--ink); border-bottom: var(--zr) solid var(--ink); } .zmark--lg { --zr: calc(var(--zs) / 11); background: repeating-linear-gradient(90deg, var(--ink) 0 9.0909%, var(--signal) 9.0909% 18.1818%); } /* On an inverted panel the field flips so the mark stays a closed object. */ .zmark--invert { background: repeating-linear-gradient(90deg, var(--on-invert) 0 14.2857%, var(--signal) 14.2857% 28.5714%); border-color: var(--on-invert); } .zmark--lg.zmark--invert { background: repeating-linear-gradient(90deg, var(--on-invert) 0 9.0909%, var(--signal) 9.0909% 18.1818%); } .zmark-16 { --zs: 16px; } .zmark-20 { --zs: 20px; } .zmark-22 { --zs: 22px; } .zmark-26 { --zs: 26px; } .zmark-34 { --zs: 34px; } .zmark-44 { --zs: 44px; } .zmark-52 { --zs: 52px; } /* The lockup is a link back to the site, so it has to be a real target. */ .lockup { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; min-height: 44px; } .wordmark { font-weight: 800; font-size: 19px; letter-spacing: -0.03em; text-transform: uppercase; color: var(--ink); line-height: 1; } /* --------------------------------------------------------------- the stripe */ .stripe { height: 22px; background: repeating-linear-gradient(90deg, var(--ink) 0 22px, transparent 22px 44px); } .stripe--footer { height: 14px; background: repeating-linear-gradient(90deg, var(--signal) 0 22px, transparent 22px 44px); } /* -------------------------------------------------------------- type pieces */ .eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .eyebrow--on-invert { color: var(--signal); } .chip { display: inline-flex; align-items: center; gap: 8px; background: var(--signal); color: var(--on-signal); padding: 7px 13px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--on-signal); animation: pulse 1.8s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* Names what a block of figures is an example of, so it cannot be read as the product's only country. */ .badge { display: inline-flex; align-items: center; background: var(--invert); color: var(--signal); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 11px; } h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); } .section-lede { font-size: 18px; color: var(--ink-3); margin: 16px 0 34px; max-width: 62ch; } /* ------------------------------------------------------------------ buttons */ /** * The offset shadow is the one piece of depth in the system. Hover lifts by * two, press travels exactly the base offset so the button lands flush inside * its own shadow rather than hovering above a smudge. * * Every hover rule is behind `hover: hover`. Without that guard a tap on a * touch screen leaves the button stuck in its hover state until something * else is touched, which reads as a stuck button. */ .zb { --off: 6px; --sh: var(--shadow); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; border: 2px solid var(--ink); background: var(--signal); color: var(--on-signal); font-family: var(--sans); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; padding: 16px 24px; text-decoration: none; cursor: pointer; box-shadow: var(--off) var(--off) 0 var(--sh); transition: transform 0.09s ease, box-shadow 0.09s ease; -webkit-tap-highlight-color: transparent; } /** * Hover grows the shadow but never moves the button. * * Lifting it by two pixels took the bottom-right edge out from under the * cursor, which un-hovered it, which put it back — a flicker loop for anyone * whose pointer sat near that edge. The shadow carries the lift on its own and * cannot move the hit box, because box-shadow is not hit-tested. */ @media (hover: hover) { .zb:hover { box-shadow: calc(var(--off) + 3px) calc(var(--off) + 3px) 0 var(--sh); } } .zb:active { transform: translate(var(--off), var(--off)); box-shadow: 0 0 0 var(--sh); } .zb svg { display: block; } .zb--lg { --off: 7px; font-size: 17px; padding: 18px 28px; } .zb--sm { --off: 5px; font-size: 15px; padding: 13px 20px; } /* On a yellow or inverted surface the shadow must be a tint, not the fill. */ .zb--on-signal { background: var(--invert); color: var(--signal); border-color: var(--invert); --sh: rgba(0, 0, 0, 0.22); } .zb--on-invert { background: var(--invert); color: var(--signal); border-color: var(--signal); --sh: var(--invert-line); } .zb--header { --off: 4px; --sh: var(--signal); background: var(--invert); color: var(--signal); border-color: var(--invert); font-size: 14px; padding: 11px 16px; } .zb--ghost { background: transparent; box-shadow: none; transition: background 0.12s ease, color 0.12s ease; } @media (hover: hover) { .zb--ghost:hover { background: var(--ink); color: var(--card); transform: none; box-shadow: none; } } .zb--ghost:active { transform: translate(2px, 2px); box-shadow: none; } .zb:disabled, .zb--off { background: var(--line); border-color: var(--line); color: var(--muted-2); box-shadow: none; cursor: not-allowed; } .zb:disabled:hover, .zb:disabled:active { transform: none; box-shadow: none; } /* ------------------------------------------------------------------- header */ header.top { background: var(--card); border-bottom: 1px solid var(--line); } header.top .wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 12px; } .top .right { display: flex; align-items: center; gap: 24px; } .top nav { display: flex; gap: 28px; } .top nav a { font-size: 14px; font-weight: 500; color: var(--ink-3); text-decoration: none; } /* The way into the signed-in area. Outlined rather than filled: the free exam is what the header is selling and two filled controls beside each other sell neither, but this was a grey text link once and a returning user could not find their own account among the nav items. An outline is not a second shout; it is the difference between a link and a control. */ .top .ghost { font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; padding: 10px 14px; border: 1px solid var(--line-strong); display: inline-flex; align-items: center; min-height: 44px; } @media (hover: hover) { .top .ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--card); } } @media (hover: hover) { .top nav a:hover { color: var(--ink); } } /** * Three two-letter codes appear on this site and none of them may be mistaken * for another: the site language, the country pack (always a pack code like * PL-B) and the language the questions are read in. This control is the site * language only, and it is labelled so. */ .switch { display: flex; align-items: center; gap: 8px; } .switch > .label { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); } .segmented { display: flex; } .segmented a, .segmented button { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; min-height: 34px; padding: 8px 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: transparent; text-decoration: none; border: 1px solid var(--line-strong); margin-left: -1px; cursor: pointer; -webkit-tap-highlight-color: transparent; } @media (hover: hover) { .segmented a:hover, .segmented button:hover { color: var(--ink); } } .segmented .on, .segmented [aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--card); } /* --------------------------------------------------------------------- hero */ .hero { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 64px; align-items: start; padding: 64px 0 0; } .hero h1 { font-size: clamp(46px, 6.4vw, 90px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.92; color: var(--ink); margin: 26px 0 0; } .hero .lede { font-size: 20px; line-height: 1.5; color: var(--ink-3); max-width: 47ch; margin: 26px 0 32px; } .hero .cta-note { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 18px 0 0; line-height: 1.6; } /* The photograph. Cropped from the centre, so the empty left of the frame survives on a narrow screen. */ .shot { border: 2px solid var(--ink); background: repeating-linear-gradient(135deg, var(--hatch-a) 0 8px, var(--hatch-b) 8px 16px); overflow: hidden; } .shot img { width: 100%; height: 100%; object-fit: cover; } .hero-shot { margin: 40px 0 0; aspect-ratio: 24 / 7; } /* The paper card: what the candidate walks into, in figures, for whichever country the tabs are showing. */ .paper { border: 2px solid var(--ink); background: var(--card); } .paper .tabs { display: flex; background: var(--invert); } .paper .tabs button { flex: 1; min-height: 44px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--on-invert-2); background: transparent; border: 0; border-right: 1px solid var(--invert-line); padding: 11px 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .paper .tabs button:last-child { border-right: 0; } .paper .tabs button[aria-selected='true'] { background: var(--signal); color: var(--on-signal); } .paper .head { padding: 13px 20px; border-bottom: 1px solid var(--line); } .paper .catalogue { font-family: var(--mono); font-size: 11px; color: var(--muted); } /* Every category the country issues, inside the country that issues it. A letter with a published paper behind it is the control that switches the figures; the rest are listed, unpickable, so the card answers "do you have mine?" instead of implying the product is category B forever. */ .paper .cats { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); } .paper .cat-row { display: flex; gap: 5px; margin-left: auto; } .paper .cat { min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--muted-2); border: 1px solid var(--line-strong); background: transparent; padding: 0; } .paper button.cat { cursor: pointer; color: var(--ink-3); border-color: var(--ink); } /* Not on the chosen letter: it already carries the signal, and a hover that painted over it made the selection disappear under the cursor. */ @media (hover: hover) { .paper button.cat:not(.on):hover { background: var(--paper); } } /* Dimming alone reads as a rendering fault, so the letter that cannot be picked keeps the quiet border and gets the tooltip that says why. */ .paper .cat.soon { cursor: not-allowed; } .paper .cat.on { background: var(--signal); border-color: var(--ink); color: var(--on-signal); } .paper .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); } .paper .cell { background: var(--card); padding: 22px 20px; } .paper .cell.fill { background: var(--signal); } .paper .value { font-family: var(--mono); font-size: 40px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--ink); } .paper .cell.fill .value { color: var(--on-signal); } .paper .label { font-size: 13px; color: var(--muted); margin-top: 8px; } .paper .cell.fill .label { color: var(--on-signal-2); } .paper .foot { padding: 16px 20px; font-size: 13px; color: var(--muted); line-height: 1.5; } .hero-close { margin-top: 64px; } /* ----------------------------------------------------------------- sections */ section { padding: 76px 0; } section.paper-bg { background: var(--paper); } section + section { border-top: 1px solid var(--line); } .head-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } /* §01 — the two parts of one country's real test, labelled as an example. */ .parts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .part { border: 2px solid var(--ink); background: var(--card); } .part .head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 2px solid var(--ink); } .part .head.fill { background: var(--signal); } .part h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); } .part .head.fill h3 { color: var(--on-signal); } .part .kind { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; } .part .head.fill .kind { color: var(--on-signal-2); } .part dl { margin: 0; padding: 0 24px 6px; } .part .row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); } .part .row:last-child { border-bottom: 0; } .part dt { font-size: 15px; color: var(--muted); margin: 0; } .part dd { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--ink); margin: 0; } .part-note { font-size: 15px; color: var(--muted); margin: 26px 0 0; max-width: 78ch; } /* §02 — the size of the whole portfolio. The third card stops the row. */ .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .card { border: 1px solid var(--line); background: var(--card); padding: 26px 24px; } .card .n { font-family: var(--mono); font-size: 46px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; display: block; color: var(--ink); } .card h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin: 14px 0 8px; color: var(--ink); } .card p { font-size: 15px; color: var(--muted); margin: 0; line-height: 1.55; } .card.invert { background: var(--invert); border-color: var(--invert); } .card.invert .n { color: var(--signal); } .card.invert h3 { color: var(--on-invert); } .card.invert p { color: var(--on-invert-2); } /* The second frame: where the practising actually happens. */ .practise { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .practise-shot { aspect-ratio: 16 / 10; } /* §03 — the promises we do not make, given the weight of an inverted panel. */ .candid { border: 2px solid var(--ink); display: grid; grid-template-columns: 0.85fr 1.15fr; } .candid .panel { background: var(--invert); color: var(--on-invert); padding: 36px 32px 0; display: flex; flex-direction: column; } .candid .panel h2 { font-size: 36px; color: var(--on-invert); margin: 18px 0 32px; } .candid .band { height: 12px; background: var(--signal); margin: auto -32px 0; } .candid .items { background: var(--card); padding: 36px 32px; display: grid; gap: 24px; } .candid .item { display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start; } .candid .idx { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--muted); padding-top: 4px; } .candid p { font-size: 16px; margin: 0; color: var(--ink-3); line-height: 1.6; } .candid strong { color: var(--ink); font-weight: 700; } /* §04 — plans for whichever country the tabs are showing. */ .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .plan { border: 1px solid var(--line); background: var(--card); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; } .plan.lead { border: 2px solid var(--ink); background: var(--signal); } .plan .name { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .plan.lead .name { color: var(--on-signal-2); } .plan .price { font-family: var(--mono); font-size: 44px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--ink); } .plan.lead .price { color: var(--on-signal); } .plan .per { font-size: 15px; color: var(--muted); } .plan.lead .per { color: var(--on-signal-2); } /* ------------------------------------------------------------ closing band */ .closing { background: var(--signal); border-top: 2px solid var(--ink); padding: 64px 0; } .closing .wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .closing h2 { font-size: clamp(30px, 4vw, 50px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; color: var(--on-signal); } .closing .note { font-family: var(--mono); font-size: 13px; color: var(--on-signal-2); margin: 16px 0 0; } /* ------------------------------------------------------------------- footer */ footer { background: var(--invert); color: var(--on-invert-2); } footer .inner { padding: 52px 0 64px; } footer .row { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 32px; } footer .row a { color: var(--on-invert); font-size: 14px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; } @media (hover: hover) { footer .row a:hover { color: var(--signal); } } footer p { font-size: 14px; line-height: 1.6; margin: 0 0 12px; max-width: 78ch; } /* Both preference switches, at the very bottom of the page: a reader looking for one comes here on purpose, and neither is worth a place in the header. */ footer .prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--invert-line); } footer .switch > .label { color: var(--on-invert-2); } footer .segmented a, footer .segmented button { color: var(--on-invert-2); border-color: var(--invert-line); } @media (hover: hover) { footer .segmented a:hover, footer .segmented button:hover { color: var(--on-invert); } } footer .segmented .on, footer .segmented [aria-pressed='true'] { background: var(--on-invert); border-color: var(--on-invert); color: var(--invert); } /* -------------------------------------------------------------- legal pages */ /** * English only, and said so on the page. A translated policy that drifts from * the binding one is worse than no translation, so the switcher is replaced * by a note rather than quietly removed. */ .doc { width: 100%; max-width: 760px; margin-inline: auto; padding: 64px var(--pad) 96px; } .doc h1 { font-size: clamp(34px, 4.6vw, 52px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--ink); margin: 16px 0 0; } .doc .updated { font-family: var(--mono); font-size: 13px; color: var(--muted); margin: 18px 0 44px; } .doc h2 { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; margin: 40px 0 12px; color: var(--ink); } .doc h3 { font-size: 17px; font-weight: 700; margin: 26px 0 8px; color: var(--ink); } .doc p, .doc li { font-size: 16px; line-height: 1.7; color: var(--ink-3); } .doc ul { padding-left: 22px; display: grid; gap: 8px; } /* "In short" is the only part most people read; give it the accent rule. It belongs to the legal pages alone — on a chapter of law it would pick out a provision for no reason. */ .doc.legal h2:first-of-type, .doc.legal h2:first-of-type + p { border-left: 4px solid var(--signal); padding-left: 22px; margin-top: 0; } .doc.legal h2:first-of-type { font-size: 22px; padding-top: 4px; margin-bottom: 0; } .doc.legal h2:first-of-type + p { padding-top: 10px; padding-bottom: 4px; font-size: 17px; margin-top: 0; } /* The table keeps its semantics and takes the grid's geometry. */ .doc table { display: grid; width: 100%; margin: 20px 0 8px; border-top: 2px solid var(--ink); } .doc thead, .doc tbody { display: contents; } .doc th, .doc td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; } .doc tr { display: grid; grid-template-columns: 1.3fr 1.3fr 0.8fr; gap: 18px; } .doc th { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .doc td { font-size: 15px; line-height: 1.55; color: var(--ink-3); } .doc-mark { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; } .doc-mark .note { font-family: var(--mono); font-size: 11px; color: var(--muted); border-left: 1px solid var(--line-strong); padding-left: 12px; } /* --------------------------------------------------------------- narrow ---- */ /** * Below 900px every multi-column grid becomes one column. The hero keeps its * proportions by scaling, not by rearranging, so the page reads the same on a * phone as the mockups do. * * Side padding respects the safe area: on a notched phone in landscape the * content would otherwise run under the sensor housing. */ /* Between a laptop and a tablet the nav, the account link and the button still have to share one line. Tightening the gaps keeps them on it down to the width where the nav is dropped altogether. */ @media (max-width: 1100px) { .top nav { gap: 18px; } .top .right { gap: 16px; } .top nav a, .top .ghost { font-size: 13px; } } @media (max-width: 900px) { :root { --pad: 20px; } .wrap, .doc { padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); } header.top .wrap { flex-wrap: wrap; gap: 14px; } .top .right { gap: 12px; width: 100%; justify-content: space-between; flex-wrap: wrap; } .top nav { display: none; } .wordmark { font-size: 16px; } .top .ghost { padding: 10px 12px; } section { padding: 48px 0; } .hero { grid-template-columns: 1fr; gap: 32px; padding: 40px 0 0; } .hero h1 { font-size: 38px; line-height: 0.96; letter-spacing: -0.04em; } .hero .lede { font-size: 15px; margin: 20px 0 24px; } .hero .zb { width: 100%; } .hero .cta-note { text-align: center; } .hero-close { margin-top: 48px; } /* The photograph moves above the call to action on a phone: it is the one thing that says what this actually is before any copy is read. */ .hero-shot { aspect-ratio: 16 / 9; margin: 24px 0 20px; order: -1; } .hero .col { display: flex; flex-direction: column; } .paper .value { font-size: 26px; } .paper .label { font-size: 12px; } .paper .cell { padding: 18px 16px; } .parts, .grid3, .plans, .practise { grid-template-columns: 1fr; } .practise { gap: 24px; } .candid { grid-template-columns: 1fr; } .candid .panel { padding: 28px 22px 0; } .candid .panel h2 { font-size: 28px; } .candid .band { margin-inline: -22px; } .candid .items { padding: 28px 22px; } .closing { padding: 48px 0; } .closing .wrap { flex-direction: column; align-items: stretch; } .closing .zb { width: 100%; } footer .inner { padding-bottom: max(64px, calc(24px + env(safe-area-inset-bottom))); } .doc { padding-top: 40px; padding-bottom: 64px; } .doc tr { grid-template-columns: 1fr; gap: 4px; } .doc thead { display: none; } .doc td { padding: 8px 0; border-bottom: 0; } .doc tbody tr { border-bottom: 1px solid var(--line); padding-block: 10px; } } @media (prefers-reduced-motion: reduce) { .dot { animation: none; } .zb { transition: none; } html { scroll-behavior: auto; } } /* The rules book. A statute is a hierarchy, and printing every level the same way is what turns a readable law into a wall. */ .rule-list { display: grid; gap: 2px; margin-top: 28px; } .rule-row { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: baseline; padding: 16px 18px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; } .rule-row .n { font-family: var(--mono); font-size: 12px; color: var(--muted); font-weight: 400; } /* The book a run of chapters came out of, where the book is made of several. */ .rule-part { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 22px 0 6px; } .rule-part:first-child { margin-top: 0; } @media (hover: hover) { .rule-row:hover { background: var(--signal); color: var(--on-signal); } } .doc .lvl-2 { padding-left: 28px; } .doc .lvl-3 { padding-left: 56px; } .doc .signs { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 18px; } .doc .signs figure { margin: 0; text-align: center; } .doc .signs img { display: block; width: 64px; height: 64px; object-fit: contain; } .doc .signs figcaption { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 4px; } .doc p a { color: inherit; text-underline-offset: 3px; }