/* ========================================================================== Seam — single-page stylesheet (formerly Seam) Brand: Newsreader, Libre Franklin and IBM Plex Mono; warm paper, ink text, ochre accents. Token names are kept from before: --lime is now ochre. Sharp edges only. Node/link motif taken from the logo, used everywhere: in the page background, the section dividers and the hero animation. No build step. Edit variables in :root to retune the whole site. ========================================================================== */ :root { /* Palette — taken from the Seam decks (theme colours used in slides) */ --paper: #f6f3ee; /* page background */ --paper-2: #fffdf9; /* alternating sections */ --surface: #fffdf9; /* cards */ --ink: #211d19; /* primary text */ --ink-soft: #5d564d; /* secondary text */ --muted: #6f675c; /* captions, meta — 5.0:1 on --paper. Before Seam: 4.6:1. It was #74716a, which is 4.2:1 and fails the readable minimum at the 11-13px this token is mostly used at. */ --lime: #b9791f; /* signature accent — ochre (name kept) */ /* The footer's ground is var(--ink), which inverts between the light pages and the dark ones. --on-ink is the accent that reads against it either way: lime on the dark footer of a light page, deep green on the light footer of a dark one. The lime was used unconditionally and came out at 1.2:1 on every register page's footer — not faint, invisible. */ --on-ink: #b9791f; --accent: #9a6314; /* text-safe ochre — kickers, links, prices (4.5:1) */ --divider: #ddd7cd; /* warm border (light) */ --divider-2: #c9c2b6; /* warm border (stronger) */ /* --- The mark --------------------------------------------------------- The logo is a field of dots at five depths, near to far. The colours are tokens rather than fixed fills so ONE piece of markup works on paper, on the dark footer, on the dark analysis pages and on the dark hero: each of those contexts redefines these five and the same SVG re-colours itself. */ --mark-1: #211d19; /* stitch bars 1 & 3 */ --mark-2: #b9791f; /* stitch bars 2 & 4 */ --mark-3: #b9791f; --mark-4: #b9791f; --mark-5: #b9791f; /* 3-5 unused by the Seam mark; kept defined */ /* Type */ --font-heading: "Newsreader", Georgia, "Times New Roman", serif; --font-body: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; /* Shape & shadow — the deck has no rounded corners; everything is sharp */ --radius: 0; --radius-sm: 0; --shadow-sm: 0 1px 2px color-mix(in srgb, #211d19 12%, transparent); --shadow-md: 0 6px 20px color-mix(in srgb, #211d19 12%, transparent); --shadow-lg: 0 18px 48px color-mix(in srgb, #211d19 16%, transparent); /* Layout */ --maxw: 1120px; --gap: clamp(1rem, 2vw, 1.5rem); --header-h: 61px; /* sticky masthead */ --rail-h: 50px; /* sticky "jump to" rail */ /* --- Background field ------------------------------------------------- The hero draws a field of small square points at four depths, loosely clustered. The page background is that same field held still and turned right down — squares, not dots, because squares are what the canvas actually paints. Two tiles at different sizes (260 and 170) so the repeat period is long enough that no pattern is visible. */ --field-a: none; /* Seam: plain paper, no dot field */ --field-b: none; /* --- State colours ----------------------------------------------------- The analysis pages score things: a rating passes or fails, a document is on your subject or is not, a body filed a return or did not. Those states were written as literal hex values inside each page, which meant eleven pages had to agree by hand and none of them could change theme. They are tokens now, defined here in the light values the pages already used, and redefined once for dark below. */ --ok-ink: #3d5400; /* pass, positive, on your subject */ --ok-bg: #eef4dc; --ok-bg-2: #e7f0cb; --ok-bg-3: #d7e9a5; /* the strongest of the green fills */ --ok-line: #cfe08f; --warn-ink: #8a4a12; /* weak, missing, a gap in the record */ --warn-bg: #f7ddc8; --warn-bg-2: #fbf1e6; --warn-line: #e6cdae; --warn-line-2:#d3ab77; --bad-ink: #93211c; /* fail, red opinion, worse off */ --bad-bg: #f3d0cc; --bad-bg-2: #eec6c1; --bad-line: #d8b3aa; --info-ink: #2f4562; /* older, re-dated, second category */ --info-bg: #dde3ec; --flat-bg: #eeece2; /* satisfactory / no signal */ --hatch: #e3e0d4; /* the diagonal "unassessable" fill */ --hatch-ink: #6f6b5d; --bar-fill: #c9c6b4; /* the unshaded half of a two-tone bar */ } /* ========================================================================== Dark — the eleven analysis pages only -------------------------------------------------------------------------- govaudit, govintel and the nine registers carry data-theme="dark" on ; index.html and the marketing pages do not, and stay light. Everything below redefines tokens, never components, so a page picks the whole theme up from the variables it was already using. Two notes on the choices: * --accent is the deep ochre (#9a6314) in light, which is too dark on a dark ground. It becomes a lighter ochre (#d9a04a). --lime itself (ochre, #b9791f) is the brand colour and does not move. * color-scheme: dark is not decoration. Without it the browser paints its own light widgets — the search fields, the selects, the scrollbars — and they sit on the page like holes. ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --paper: #1a1612; --paper-2: #211c17; --surface: #27211b; --ink: #f1ebe1; --ink-soft: #cbbfae; --muted: #a3978a; /* 5.6:1 at worst (Seam); before, 4.7:1 at worst against the dark grounds here; #7d876a was 3.7:1 on the darker panels at 11-12px. */ --lime: #b9791f; --accent: #d9a04a; --on-ink: #9a6314; /* the mark, seen against a dark ground: ink bars turn paper */ --mark-1: #f6f3ee; --mark-2: #b9791f; --mark-3: #b9791f; --mark-4: #b9791f; --mark-5: #b9791f; --divider: #3a322a; --divider-2: #4a4036; /* a shadow has to be darker than the surface to read at all */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.5); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6); /* the same field, in the hero's own depth ramp rather than in ink */ --field-a: none; --field-b: none; --ok-ink: #b3d95f; --ok-bg: #23301a; --ok-bg-2: #2a3a1c; --ok-bg-3: #35491f; --ok-line: #4e6a26; --warn-ink: #e2a75f; --warn-bg: #3a2716; --warn-bg-2: #33240f; --warn-line: #5d3f1c; --warn-line-2:#6b4c22; --bad-ink: #f0907c; --bad-bg: #3d1c17; --bad-bg-2: #4a201a; --bad-line: #6a2f26; --info-ink: #9fbbe0; --info-bg: #202c3c; --flat-bg: #2a281f; --hatch: #3a372c; --hatch-ink: #bdb8a2; --bar-fill: #4a4739; } /* --- Reset-ish --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* The `hidden` attribute is how every toggle on the site hides things, so it has to beat any component that sets its own `display`. Without this, `.eyebrow { display: inline-flex }` keeps a hidden kicker on screen. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: clamp(1rem, 0.96rem + 0.25vw, 1.125rem); line-height: 1.6; color: var(--ink); font-weight: 300; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* the hero's particle field (Seam: the tokens are none, so plain paper), held still and turned right down */ background-color: var(--paper); background-image: var(--field-a), var(--field-b); background-size: 260px 260px, 170px 170px; background-position: 0 0, 60px 40px; } img { max-width: 100%; display: block; } a { color: inherit; } /* --- Typography -------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 0.5em; color: var(--ink); } h1 { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.25rem); } h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); } h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); } p { margin: 0 0 1rem; } .lead { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); line-height: 1.45; color: var(--ink-soft); max-width: 44ch; } .eyebrow { font-family: var(--font-mono); font-size: 0.69rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; display: inline-flex; align-items: center; gap: 0.6em; } /* Deck "key" motif — a short dark-lime rule that precedes kickers */ .eyebrow::before { content: none; /* Seam: no rule before kickers */ width: 2.2em; height: 3px; background: var(--accent); flex: none; } /* Lime highlight behind key words — a round-capped stroke, not a block. A round-capped stroke rather than a square block, carrying the same rounded line-cap as the logo's traced path. Built from three background layers (round cap, bar, round cap) so .mark stays a plain inline element: an inline-block would be an atomic inline and would let the line break between the phrase and the full stop after it. box-decoration-break gives each line its own capped bar when it wraps. */ .mark { padding-inline: 0.09em; background-image: radial-gradient(circle at 50% 50%, var(--lime) 49.5%, transparent 50%), radial-gradient(circle at 50% 50%, var(--lime) 49.5%, transparent 50%), linear-gradient(var(--lime), var(--lime)); background-size: 0.09em 0.09em, 0.09em 0.09em, calc(100% - 0.09em) 0.09em; background-position: left 0 bottom 0.11em, right 0 bottom 0.11em, center bottom 0.11em; background-repeat: no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* Round full stops. Archivo sets a square period, which fights the node vocabulary everywhere else. The character stays in the markup (so it is still read aloud and still copies) and is drawn as a circle instead. Used on display type only — headings and straplines, not body copy. */ .stop { color: inherit; white-space: nowrap; } /* Seam: Newsreader's full stop is already round */ .stop::after { content: none; display: inline-block; /* an empty inline-block takes its baseline from its bottom margin edge, so the dot's underside lands exactly on the text baseline — where a period's ink sits. Absolute positioning would measure from the line box instead and drop it into the descender space. */ vertical-align: baseline; width: 0.15em; height: 0.15em; border-radius: 50%; background: var(--stop, var(--ink)); /* pull back over the hidden period and re-space to its advance width */ margin-left: -0.225em; margin-right: 0.07em; } /* --- Layout helpers ---------------------------------------------------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); } .section { padding-block: clamp(2.75rem, 4.5vw, 4.75rem); position: relative; } .section--alt { background-color: var(--paper-2); border-block: 1px solid var(--divider); } /* --- The homepage bands ------------------------------------------------- Below the hero the sections are shaded rather than alternated. Each band is a translucent wash in the accent hue, and consecutive bands share the colour they meet at, so the page grades gently from one section to the next with no seam and no rule. The wash is translucent, so the background field carries straight through it unbroken. These ids exist on the homepage only. */ #approach, #in-the-works, #contact { background-color: transparent; background-image: var(--band); border-block: 0; } /* Each band carries three stops, so the colour moves WITHIN the section as well as between them, and consecutive bands share the value they meet at, so there is no seam where one ends and the next begins. */ #approach { --band: linear-gradient(180deg, rgba(185,121,31,.005) 0%, rgba(185,121,31,.060) 55%, rgba(185,121,31,.035) 100%); } #in-the-works { --band: linear-gradient(180deg, rgba(185,121,31,.050) 0%, rgba(185,121,31,.115) 60%, rgba(185,121,31,.065) 100%); } #contact { --band: linear-gradient(180deg, rgba(185,121,31,.065) 0%, rgba(185,121,31,.120) 40%, rgba(185,121,31,.015) 100%); } .section__head { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); } /* --- The opening screen of a register page ---------------------------- Every page here asks the same question — "what does your organisation do?" — and on every page that box used to sit below the fold, at a different depth: 606px on one register, 3,952px on another. A visitor who learned where to look on one page had to hunt on the next. The box now sits directly under the first paragraph on all of them, and these three rules buy back the height that kept it off the first screen: a display size that does not need four lines for six words, a lead paragraph set at reading size rather than display size, and less air above the heading. The rest of the prose follows the box, where somebody who wants the background can still find it. */ .page-intro h1 { font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.15rem); } .page-intro + .ga-strip, .page-intro { margin-bottom: clamp(1.1rem, 2vw, 1.6rem); } .section--intro { padding-block-start: clamp(1.6rem, 2.6vw, 2.6rem); } .lead--intro { font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.18rem); max-width: 66ch; } .section__sub { margin-top: clamp(2rem, 3.5vw, 3rem); } /* a section led by its eyebrow alone still needs the space a headline gave it */ .section > .container > .eyebrow, .section > .container > div > .eyebrow:first-child { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } /* Anchors clear the sticky masthead + rail */ /* --chrome-h is written by site.js from the measured heights of the masthead and the rail, because the rail now wraps and its height is not a constant. The calc() is the fallback for the first paint. */ [id] { scroll-margin-top: calc(var(--chrome-h, calc(var(--header-h) + var(--rail-h))) + 12px); } .grid { display: grid; gap: clamp(1.1rem, 2.4vw, 1.75rem); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 860px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* --- Buttons ----------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.5em; font: 500 0.9rem var(--font-body); text-decoration: none; cursor: pointer; padding: 1.05em 1.5em; border-radius: 0; border: 1px solid var(--ink); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; } .btn:hover { transform: none; box-shadow: none; } .btn--primary { background: var(--ink); color: var(--paper); } .btn--primary:hover { background: #000; } .btn--accent { background: #8a5810; color: #f6f3ee; border-color: #8a5810; } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--divider-2); } .btn--ghost:hover { background: var(--ink); color: var(--paper); } .btn .arrow { transition: transform .12s ease; } .btn:hover .arrow { transform: translateX(3px); } /* --- Header / nav ------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 60; min-height: var(--header-h); /* SOLID, not frosted. It was `color-mix(in srgb, var(--paper) 90%, transparent)` with a 10px backdrop blur, on the assumption that the blur would smear whatever scrolled beneath it. It does not always: backdrop-filter needs the compositor, and where that is unavailable — remote desktops, software rendering, some Windows setups — the filter is silently skipped and the 90% is all that is left. Ten per cent of a table row is perfectly legible, and on the procurement register, whose filter panel is not sticky, notices scroll straight under the masthead and read as though they are on top of the column headings. The `.is-over-hero` state below has been solid since it was written, for exactly this reason, with the note "a translucent dark would show the light body through". This is the same decision applied at rest. */ background: var(--paper); border-bottom: 1px solid var(--divider); transition: background .25s ease, border-color .25s ease, color .25s ease; } /* Over the dark hero the masthead goes dark with it, and hands itself back the moment the hero has scrolled past. site.js toggles the class. */ .site-header.is-over-hero { background: #211d19; /* solid: at rest the masthead sits ABOVE the hero, not over it, so a translucent dark would show the light body through */ border-bottom-color: rgba(185, 121, 31, 0.16); /* The masthead borrows the dark theme's TOKENS while it is over the hero, rather than setting colours on elements. That distinction matters: the dropdown panels live inside .mainnav, so a rule like ".mainnav a" also recolours every link inside them and leaves pale text on a white panel. Redefining the tokens instead carries the panels, their hover states, the dividing rules, the expand buttons and the hover descriptions with it, and every one of them reverts on its own once the hero scrolls past. Same approach the dark analysis pages use. */ --paper: #1a1612; --paper-2: #211c17; --surface: #27211b; --ink: #f1ebe1; --ink-soft: #cbbfae; --muted: #a3978a; /* 4.7:1 at worst against the dark grounds here; #7d876a was 3.7:1 on the darker panels at 11-12px. */ --divider: #3a322a; --divider-2: #4a4036; --accent: #d9a04a; --on-ink: #9a6314; /* the footer band is light here — see --on-ink above */ --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6); --mark-1: #f6f3ee; --mark-2: #b9791f; --mark-3: #b9791f; --mark-4: #b9791f; --mark-5: #b9791f; } /* The masthead carries the lockup and one call to action. Section navigation lives entirely in the jump rail below it. */ .nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.9rem; padding-block: 0.9rem; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); flex: none; } .brand__mark { width: 32px; height: 32px; flex: none; display: block; overflow: visible; } /* Presentation attributes do not reliably accept var(), so each depth is a class and the fill is set here. */ .brand__mark .m1 { fill: var(--mark-1); } .brand__mark .m2 { fill: var(--mark-2); } .brand__mark .m3 { fill: var(--mark-3); } .brand__mark .m4 { fill: var(--mark-4); } .brand__mark .m5 { fill: var(--mark-5); } /* the footer is ink-dark on every page, light theme included */ .footer-brand .brand__mark { --mark-1: #f6f3ee; --mark-2: #b9791f; --mark-3: #b9791f; --mark-4: #b9791f; --mark-5: #b9791f; } .brand__word { font: 400 1.6rem/1 var(--font-heading); letter-spacing: -0.02em; } /* --- Primary nav (with dropdown menus) -------------------------------- */ .mainnav { margin-left: auto; } .mainnav__list { list-style: none; display: flex; align-items: center; gap: 0.15rem; margin: 0; padding: 0; } .mainnav__list > li { position: relative; } .mainnav a { display: inline-flex; align-items: center; gap: 0.35em; font: 400 0.9rem var(--font-body); color: var(--ink-soft); text-decoration: none; padding: 0.5rem 0.7rem; white-space: nowrap; } .mainnav > .mainnav__list > li > a:hover, .mainnav > .mainnav__list > li > a:focus-visible { color: var(--ink); } .mainnav .caret { font-size: 0.68em; color: var(--ink-soft); transition: transform .15s ease; } /* Top-level nav labels lowercase, to match the "futureworks" wordmark (submenu items are already lowercased above). */ .mainnav__list > li > a { text-transform: lowercase; } .submenu { list-style: none; margin: 0; padding: 0.4rem; position: absolute; top: 100%; right: 0; min-width: 250px; /* no panel: it reads as the masthead carrying on downwards, held off the page by its shadow alone rather than by a box */ background: var(--paper); border: 0; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .14s ease, transform .14s ease, visibility .14s; z-index: 70; } .has-menu:hover .submenu, .has-menu:focus-within .submenu, .has-menu.is-open .submenu { opacity: 1; visibility: visible; transform: none; } /* A hover menu should not fly open as the pointer merely crosses it on the way to somewhere else. The delay sits on the HOVER state only: a keyboard tab (:focus-within) and a tap (.is-open) are deliberate and open at once. Leaving falls back to the block above, whose `transition` shorthand resets the delay to zero - so it opens lazily and closes promptly, which is the way round that feels right. */ .has-menu:hover .submenu { transition-delay: .2s; } .has-menu:hover .caret, .has-menu:focus-within .caret, .has-menu.is-open .caret { transform: rotate(180deg); } .submenu a { display: block; padding: 0.55rem 0.7rem; font-size: 0.9rem; font-weight: 600; } .submenu a:hover, .submenu a:focus-visible { background: var(--paper-2); color: var(--accent); } /* The "nothing here matches you closely" line. Deliberately plain rather than alarming: it is a caveat, not an error, and it appears beside a count the reader is already reading. */ .weak { display: inline-block; margin-left: .4rem; padding: .05rem .4rem; border-left: 2px solid var(--divider-2); color: var(--ink-soft); font-style: italic; } .noscript { margin: 1rem 0; padding: .9rem 1.1rem; border: 1px solid var(--divider-2); background: var(--surface); color: var(--ink-soft); font-size: .95rem; max-width: 62ch; } /* --- when a register did not arrive (see fw-data.js) ------------------- Deliberately plain and not alarming: this is information, not an error the reader caused. The warning form sits above real answers that are merely incomplete; the replacement form stands where the answers would have been. */ .fw-datawarn, .fw-dataout { margin: 0 0 1.1rem; padding: .8rem 1rem; border: 1px solid var(--divider-2); border-left: 3px solid var(--accent); background: var(--surface); color: var(--ink-soft); font-size: .93rem; line-height: 1.55; max-width: 68ch; } .fw-dataout { margin: 1.2rem 0; } .fw-datawarn b, .fw-dataout b { color: var(--ink); display: block; margin-bottom: .2rem; } /* --- fingertips ------------------------------------------------------- The accepted minimum for a touch target is 44x44 — roughly the pad of an adult finger. Measured at 390px on 4 September 2026, GovAudit had eighty controls below 40px in one dimension, including the menu button (91x31), every link inside the menu it opens (38px tall) and "See my briefing" (157x33). The menu button matters most: it is the only way to navigate on a phone. This is padding, not layout — none of these controls were short of room. */ @media (max-width: 900px) { .navtoggle { min-height: 44px; padding-inline: 0.85rem; } .mainnav__list > li > a, .mainnav .submenu a, .mainnav__here a { min-height: 44px; display: flex; align-items: center; } .rail a { min-height: 44px; padding-block: 0.55rem; } button.go, .go, .more, .more--all, .fw-url__go, .chat__launch, .chat__send, .chat__chip { min-height: 44px; } /* Small inline actions sit in running text, where 44px would break the line box. They get a wider hit area instead of a taller one. */ .fw-saved__act, .fw-carry__clear, .link { padding-block: 0.55rem; } /* The wordmark is a link home and is tapped as one. */ .brand { min-height: 44px; align-items: center; } /* View switches, sort buttons and the filter boxes are discrete controls too, and were 28–34px. Links inside a sentence are deliberately NOT in this list: the standard exempts them, and stretching them would break the line they sit in. */ .ga-view, .gi-view, .ga-sort, .gi-sort, .tn-chip, .chip, input[type="search"], .controls select, .controls input, select { min-height: 44px; } .ga-view, .gi-view, .ga-sort, .gi-sort { padding-inline: 0.8rem; } /* A cell whose only content is a link is a control, not a sentence. */ .ga-plink, .gi-plink { display: inline-flex; align-items: center; min-height: 44px; } } /* --- very narrow screens ---------------------------------------------- 280px is a folding phone's cover screen and a handful of old handsets. The page put 290px of content in it and scrolled sideways; the padding is what did it. 320px — the width 400% zoom produces, and the one that matters for accessibility — was already clean. */ @media (max-width: 320px) { .container { padding-inline: 0.55rem; } /* The table's own minimum width is what is left over at this size; it scrolls inside its wrapper, which is correct, but the wrapper must not push the page itself sideways. */ .ga-tablewrap, .gi-tablewrap { max-width: 100%; } body { overflow-x: hidden; } } .fw-cap { margin: .4rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--ink-soft); max-width: 62ch; border-left: 2px solid var(--divider-2); padding-left: .6rem; } /* The skip link's target. Browsers refuse to move focus to an element that cannot receive it, so without tabindex="-1" here "Skip to content" scrolled the page and left the keyboard exactly where it was — the next Tab started again at the top of the menu. The outline is suppressed because the target is a whole page region, not a control; the skip link itself keeps its ring. */ #main:focus { outline: none; } #main:focus-visible { outline: none; } /* --- The menu button --------------------------------------------------- Above 860px the primary menu sits in the masthead and the section rail sits under it, both open. Below that, a horizontal strip of ten links in a 350px-wide window is not navigation — it scrolled, but with its scrollbar hidden and no fade at the edge nothing said so. So on phones the rail is folded into this panel instead (site.js clones the links in) and one button reaches every link on the site. */ .navtoggle { display: none; margin-left: auto; flex: none; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-weight: 700; font-size: 0.86rem; text-transform: lowercase; letter-spacing: 0.01em; color: var(--ink); background: transparent; border: 1px solid var(--divider-2); border-radius: 3px; padding: 0.42rem 0.7rem; cursor: pointer; } .navtoggle:hover { border-color: var(--muted); } .navtoggle__bars { width: 15px; height: 10px; position: relative; display: block; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; } .navtoggle__bars::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; } .navtoggle[aria-expanded="true"] { background: var(--surface); border-color: var(--muted); } /* The rail's links, cloned into the menu panel on phones. */ /* Only ever shown inside the phone menu panel; above 860px the rail itself is on screen and this clone would be a second copy of it. */ .mainnav__here { display: none; margin: 0.35rem 0 0; padding: 0.6rem 0 0; border-top: 1px solid var(--divider); } .mainnav__herelabel { display: block; margin: 0 0 0.25rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .mainnav__here ul { list-style: none; margin: 0; padding: 0; } .mainnav__here a { display: block; padding: 0.45rem 0; font-size: 0.92rem; text-transform: lowercase; } @media (max-width: 860px) { .nav { align-items: center; } .navtoggle { display: inline-flex; } .mainnav { margin-left: 0; width: 100%; display: none; order: 99; } .mainnav.is-open { display: block; } .mainnav__list { flex-direction: column; align-items: stretch; gap: 0; } .mainnav__list > li > a { display: block; padding: 0.55rem 0; } .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-left: 2px solid var(--divider-2); margin: 0 0 0.3rem 0.7rem; min-width: 0; display: none; padding: 0.1rem 0; } .has-menu.is-open .submenu { display: block; } /* Folded into the panel above; see .mainnav__here. */ .rail { display: none; } .mainnav__here { display: block; } } /* Tagline, set beside the wordmark and divided from it by a warm rule */ .brand__tag { margin: 0; flex: none; font-family: var(--font-heading); font-weight: 600; font-size: 0.86rem; color: var(--ink-soft); letter-spacing: 0.005em; white-space: nowrap; padding-left: 0.9rem; border-left: 1px solid var(--divider-2); } /* The tagline is part of the lockup, so it stays visible right down to narrow phones. It only steps down in size; it is dropped only below the width where it genuinely cannot sit beside the wordmark. */ @media (max-width: 620px) { .brand__tag { font-size: 0.78rem; padding-left: 0.65rem; } } @media (max-width: 400px) { .brand__tag { display: none; } } .footer-tag { font-family: var(--font-heading); font-weight: 600; font-size: 0.92rem; color: var(--on-ink); margin: -0.35rem 0 0.6rem; } /* --- "Jump to" rail — the skip-to buttons ------------------------------ */ /* NOT sticky. It used to be, and the result was that the one row a reader needs while scrolling a long table — the column headings — scrolled away while a row of section links they had already used followed them down the page. Now the rail behaves as a page heading, the table heads are pinned instead (see .ga-tablewrap), and the sticky chrome is one masthead tall rather than three rows. */ .rail { position: static; z-index: 55; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--divider); } .rail__inner { display: flex; align-items: center; gap: 0.75rem; min-height: var(--rail-h); } /* Section links are set lower-case throughout, to match the wordmark. */ .rail__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: lowercase; color: var(--muted); flex: none; display: inline-flex; align-items: center; gap: 0.55em; } .rail__label::after { content: ""; width: 1.4em; height: 2px; background: var(--divider-2); } @media (max-width: 640px) { .rail__label { display: none; } } /* Wraps rather than scrolls. It used to be one line with overflow-x:auto and scrollbar-width:none, which meant that at 1440px a 1,715px list sat in a 938px window with nothing on screen to say the rest was there. */ .rail ul { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.35rem; list-style: none; margin: 0; padding: 0.35rem 0; } .rail a { display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap; text-decoration: none; text-transform: lowercase; font-family: var(--font-heading); font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-soft); padding: 0.42em 0.8em; border: 1px solid transparent; border-radius: 0; transition: background .12s ease, color .12s ease, border-color .12s ease; } .rail a::before { content: ""; width: 6px; height: 6px; border-radius: 0; background: var(--divider-2); flex: none; transition: background .12s ease, transform .12s ease; } .rail a:hover { color: var(--ink); border-color: var(--divider-2); background: var(--surface); } .rail a[aria-current="true"] { color: var(--ink); background: var(--surface); border-color: var(--ink); } .rail a[aria-current="true"]::before { background: var(--lime); transform: scale(1.35); } /* --- The opening screen ------------------------------------------------- The same ground and the same lime as the hero, so it does not so much disappear as resolve into it: the overlay fades, the hero is already underneath it in the same colour, and the headline rises in. Shown once per browsing session, never without JS (the markup only displays when the head script has put .booting on ), and never under prefers-reduced-motion. ------------------------------------------------------------------------ */ .boot { position: fixed; inset: 0; z-index: 300; display: none; background: #1a1612; --mark-1: #f6f3ee; --mark-2: #b9791f; --mark-3: #b9791f; --mark-4: #b9791f; --mark-5: #b9791f; } /* .is-done has to keep the overlay displayed on its own. site.js removes .booting from in the same frame as it adds .is-done, and if display depended on .booting alone the overlay would flip straight to display:none and the fade below would never run — the opening screen snapped off. */ html.booting .boot, .boot.is-done { display: grid; place-items: center; } /* The gutter is reserved while the page cannot scroll, so that restoring the scrollbar at the handover does not shift the whole layout sideways. */ html.booting body { overflow: hidden; scrollbar-gutter: stable; } /* the same field the hero runs, on the same ground, so the overlay is already the hero before it clears */ .boot__field { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .boot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(52% 44% at 50% 50%, rgba(26, 22, 18,.86), rgba(26, 22, 18,0) 70%); } .boot__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 0.85rem; } .boot__mark { width: 54px; height: 54px; } .boot__word { font-family: var(--font-heading); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em; color: #f3f6ea; margin: 0; } .boot.is-done { opacity: 0; pointer-events: none; transition: opacity .3s ease; } /* the hero arriving as the overlay clears */ .hero.is-revealed .hero__inner { animation: heroRise .85s cubic-bezier(.16, .84, .3, 1) both; } .hero.is-revealed .hero__cue { animation: heroFade .8s .35s ease both; } @keyframes heroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes heroFade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hero.is-revealed .hero__inner, .hero.is-revealed .hero__cue { animation: none; } } /* --- Hero --------------------------------------------------------------- A dark, full-bleed band at the top of the homepage: a particle field on a canvas behind, a veil that darkens the left so the headline holds, and the copy in the usual .container so it lines up with every section below. The masthead above it goes dark to match (see .is-over-hero). ------------------------------------------------------------------------ */ .hero { position: relative; overflow: hidden; display: grid; align-items: center; min-height: min(82vh, 760px); background: #1a1612; color: #f1ebe1; --stop: #f4f8e8; /* the round full stop, on dark */ } .hero__field { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .hero__veil { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 78% 45%, rgba(185, 121, 31, 0.10), rgba(26, 22, 18, 0) 55%), linear-gradient(90deg, rgba(26, 22, 18, 0.94) 0%, rgba(26, 22, 18, 0.78) 34%, rgba(26, 22, 18, 0) 62%); } .hero__inner { position: relative; z-index: 2; padding-block: clamp(3rem, 8vw, 6rem); } /* the one place on the site that runs larger than the shared h1 scale */ .hero h1 { font-size: clamp(2.35rem, 1.3rem + 4.1vw, 4.6rem); max-width: 19ch; color: #f4f8e8; margin-bottom: 0; } .hero .lead { max-width: 52ch; color: #cbbfae; margin-bottom: 0; } .hero__cue { position: absolute; z-index: 2; right: clamp(1.15rem, 4vw, 2.5rem); bottom: 1.5rem; display: flex; align-items: center; gap: 0.85rem; pointer-events: none; } .hero__cue-track { position: relative; display: block; width: 1px; height: 34px; background: rgba(185, 121, 31, 0.22); overflow: hidden; } .hero__cue-track i { position: absolute; top: 0; left: 0; width: 1px; height: 10px; background: var(--lime); animation: heroCue 2.1s ease-in-out infinite; } .hero__cue span { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #7d876a; } @keyframes heroCue { 0% { transform: translateY(0); opacity: 0.15; } 45% { transform: translateY(14px); opacity: 1; } 100% { transform: translateY(28px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hero__cue-track i { animation: none; } } @media (max-width: 700px) { .hero { min-height: 66vh; } /* the veil turns vertical on a narrow screen: there is no room for a left-hand column, so the field is dimmed under the copy instead */ .hero__veil { background: linear-gradient(180deg, rgba(26, 22, 18,.88) 0%, rgba(26, 22, 18,.66) 60%, rgba(26, 22, 18,.42) 100%); } .hero__cue { display: none; } } /* --- Cards ------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius); padding: clamp(1.35rem, 2.2vw, 1.9rem); box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--divider-2); } .card h3 { margin-bottom: 0.4rem; } .card p:last-child { margin-bottom: 0; color: var(--ink-soft); } .card__num { font-family: var(--font-mono); font-weight: 400; font-size: 0.69rem; color: var(--accent); letter-spacing: 0.12em; margin-bottom: 0.6rem; } /* Node glyphs — built from the logo's own vocabulary (nodes, links, one lime). No pictorial icons anywhere on the site. */ .glyph { width: 48px; height: 48px; display: block; color: var(--ink); margin-bottom: 1.15rem; overflow: visible; } .glyph--lg { width: 60px; height: 60px; } .glyph--row { width: 72px; height: auto; display: block; color: var(--ink); margin-bottom: 1rem; overflow: visible; } /* --- Method: the three stages ----------------------------------------- Research, ideation, translation. Deliberately airy: one full-width band per stage, a wide gutter between the label column and the text, hairline rules instead of boxes, and a lot of vertical space between bands. ---------------------------------------------------------------------- */ .method-flow { margin-top: clamp(0.5rem, 2vw, 1.5rem); } .method-step { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.25rem, 6vw, 5rem); padding-block: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid var(--divider); } .method-step:first-child { border-top: 0; padding-top: 0; } .method-step__label { align-self: start; } .method-step__num { font-family: var(--font-heading); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--accent); margin: 0 0 0.7rem; } /* the stage name carries h2 weight even though it is an h3 in the outline */ .method-step__label h3 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); margin: 0; } .method-step__body { max-width: 60ch; } .method-step__lead { font-size: clamp(1.05rem, 1rem + 0.4vw, 1.28rem); line-height: 1.55; color: var(--ink-soft); margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem); } /* Points are plain text with a lime node in the margin — no cards, so the white space between them does the separating. */ .method-points { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.15rem, 2.4vw, 1.75rem); } .method-points li { position: relative; padding-left: 1.6rem; } .method-points li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1px var(--divider-2); } .method-points b { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; margin-bottom: 0.2rem; } .method-points span { color: var(--ink-soft); } @media (max-width: 860px) { .method-step { grid-template-columns: 1fr; gap: 1.25rem; } } /* the console shot now sits inside the Research stage, under its points */ .method-step__body .shot { margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; max-width: none; } /* --- Step / process list ---------------------------------------------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: step; } .step { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius); padding: 1.35rem 1.5rem; } .step__no { counter-increment: step; font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); flex: none; } .step__no::before { content: counter(step, decimal-leading-zero); } .step h3 { margin-bottom: 0.25rem; } .step p { margin: 0; color: var(--ink-soft); } /* --- Stat band --------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 640px) { .stats { grid-template-columns: 1fr; } } .stat { text-align: left; } .stat__num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; } .stat__num .u { color: var(--accent); } .stat__label { color: var(--ink-soft); margin-top: 0.5rem; max-width: 30ch; } /* --- The message ladder ------------------------------------------------ One line, one sentence, one paragraph, one page — the same statement at four lengths. Type size steps *down* as the detail steps up. */ .ladder { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--divider-2); } .ladder__step { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: baseline; padding-block: clamp(1.4rem, 3vw, 2.2rem); border-bottom: 1px solid var(--divider); } @media (max-width: 720px) { .ladder__step { grid-template-columns: 1fr; gap: 0.6rem; } } .ladder__k { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 0.6em; white-space: nowrap; } .ladder__k::before { content: ""; width: 1.8em; height: 3px; background: var(--accent); flex: none; } .ladder__v { margin: 0; color: var(--ink-soft); max-width: 68ch; } .ladder__v--xl { font-family: var(--font-heading); font-weight: 800; color: var(--ink); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); line-height: 1.05; letter-spacing: -0.02em; } .ladder__v--lg { font-size: clamp(1.1rem, 1rem + 0.55vw, 1.35rem); line-height: 1.4; color: var(--ink); } .ladder__step--link .ladder__v a { font-family: var(--font-heading); font-weight: 700; color: var(--accent); text-decoration: none; } .ladder__step--link .ladder__v a:hover { text-decoration: underline; } .ladder__step--link .arrow { display: inline-block; transition: transform .12s ease; } .ladder__step--link a:hover .arrow { transform: translateX(3px); } /* an

that needs to carry h2 weight in the layout */ .h2-ish { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); } /* --- The questions behind the question --------------------------------- The ones a team has hours for read as answered; the rest fade out. That contrast is the whole problem statement, so it is carried by the type weight and the node colour rather than by a caption alone. */ .questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; max-width: 46ch; } .questions li { position: relative; padding-left: 1.9rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.02rem, 0.96rem + 0.4vw, 1.22rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); } .questions li::before { content: ""; position: absolute; left: 0; top: 0.46em; width: 11px; height: 11px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1.5px var(--ink); } .questions li.is-dim { color: var(--muted); font-weight: 600; } .questions li.is-dim::before { background: transparent; box-shadow: 0 0 0 1.5px var(--divider-2); } .questions__note { margin: 1.1rem 0 0; max-width: 42ch; font-size: 0.92rem; color: var(--muted); padding-top: 0.9rem; border-top: 1px solid var(--divider); } /* --- Use cases: sector cards ------------------------------------------ */ .sector { position: relative; padding-top: clamp(1.5rem, 2.4vw, 2rem); } .sector .card__num { position: absolute; top: clamp(1.35rem, 2.2vw, 1.9rem); right: clamp(1.35rem, 2.2vw, 1.9rem); margin: 0; opacity: 0.55; } .sector ul { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.55rem; } .sector li { position: relative; padding-left: 1.4rem; font-size: 0.95rem; color: var(--ink-soft); line-height: 1.45; } .sector li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: 0.35; } .sector li:last-child::before { background: var(--lime); opacity: 1; box-shadow: 0 0 0 1.5px var(--ink); } /* --- Use cases: the task list ------------------------------------------ */ .tasks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--divider); } @media (max-width: 760px) { .tasks { grid-template-columns: 1fr; } } .task { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; padding: 1rem 1.1rem 1rem 0.9rem; border-bottom: 1px solid var(--divider); transition: background .12s ease; } .tasks > .task:nth-child(odd) { padding-right: clamp(1.1rem, 3vw, 2.25rem); } @media (min-width: 761px) { .tasks > .task:nth-child(odd) { border-right: 1px solid var(--divider); } } .task:hover { background: color-mix(in srgb, var(--lime) 9%, transparent); } /* one lime node every fifth row — the dot-band's single accent, repeated */ .task::before { content: ""; width: 9px; height: 9px; border-radius: 50%; margin-top: 0.5em; background: var(--ink); opacity: 0.3; flex: none; } .task:nth-child(5n+3)::before { background: var(--lime); opacity: 1; box-shadow: 0 0 0 1.5px var(--ink); } .task b { display: block; font-family: var(--font-heading); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; } .task span { display: block; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.45; margin-top: 0.15rem; } /* --- Our work ---------------------------------------------------------- */ .work { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.1rem, 2.4vw, 1.75rem); } @media (max-width: 760px) { .work { grid-template-columns: 1fr; } } .work-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--divider); padding: clamp(1.35rem, 2.2vw, 1.9rem); box-shadow: var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } a.work-card { text-decoration: none; color: inherit; } a.work-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--ink); } .work-card__kind { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; display: flex; align-items: center; gap: 0.6rem; } .work-card__kind::before { content: ""; width: 1.6em; height: 2px; background: var(--lime); flex: none; } .work-card h3 { margin-bottom: 0.5rem; } .work-card p { color: var(--ink-soft); margin-bottom: 1.25rem; } .work-card__foot { margin-top: auto; display: flex; align-items: center; gap: 0.5em; font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--accent); } a.work-card:hover .work-card__foot .arrow { transform: translateX(3px); } .work-card__foot .arrow { transition: transform .12s ease; } .work-card--soon .work-card__foot { color: var(--muted); font-weight: 600; } .chip { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35em 0.65em; border: 1px solid var(--divider-2); color: var(--muted); background: var(--paper-2); } .chip--live { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--lime) 26%, var(--paper)); } /* --- Openworks: the featured post ----------------------------------- */ .post { background: var(--surface); border: 1px solid var(--divider-2); box-shadow: var(--shadow-md); padding: clamp(1.5rem, 4vw, 3.25rem); position: relative; overflow: hidden; } /* a lime spine down the left edge — the logo's signature stroke */ .post::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--lime); } .post__head { margin-bottom: clamp(1rem, 2vw, 1.5rem); } .post__kind { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.7rem; display: inline-flex; align-items: center; gap: 0.6em; } .post__kind::before { content: ""; width: 2.2em; height: 3px; background: var(--accent); flex: none; } .post__title { margin-bottom: 0; } .post__body { max-width: 70ch; } .post__body p:last-child { margin-bottom: 0; } .post__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: clamp(1.25rem, 3vw, 2rem); padding-top: 1.1rem; border-top: 1px solid var(--divider); } .post__meta { font-size: 0.88rem; color: var(--muted); } /* --- Console shot ------------------------------------------------------ */ /* Capped and centred — at full container width it is 650px tall and swamps the section it sits in. */ .shot { margin: 0 auto; max-width: 760px; } .shot__frame { border: 1px solid var(--divider-2); background: var(--surface); box-shadow: var(--shadow-lg); overflow: hidden; } .shot__frame img { width: 100%; height: auto; } .shot figcaption { margin-top: 0.9rem; font-size: 0.92rem; color: var(--muted); max-width: 68ch; } .shot figcaption b { color: var(--ink-soft); font-weight: 700; } /* --- CTA band ---------------------------------------------------------- */ .cta { --stop: var(--paper); /* round full stops read paper-on-ink here */ background: var(--ink); color: var(--paper); border-radius: 0; padding: clamp(2rem, 5vw, 3.75rem); padding-bottom: clamp(3.25rem, 6vw, 5.5rem); position: relative; overflow: hidden; } /* the same node lattice, inverted, so the dark band stays on-theme */ .cta::before { content: none; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle at 50% 50%, rgba(246, 243, 238,.10) 1.15px, transparent 1.25px), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--lime) 40%, transparent) 2px, transparent 2.1px); background-size: 28px 28px, 140px 140px; background-position: 0 0, 14px 14px; } /* Dot motif, paper-on-dark, bleeding off the box's right edge */ .cta__dots { position: absolute; left: 0; right: 0; bottom: clamp(1rem, 2.4vw, 1.9rem); width: 100%; line-height: 0; pointer-events: none; } .cta__dots svg { display: block; width: 100%; height: clamp(20px, 2.6vw, 32px); } .cta h2, .cta p { color: var(--paper); position: relative; z-index: 1; } .cta .eyebrow { position: relative; z-index: 1; } .cta .lead { color: color-mix(in srgb, var(--paper) 80%, transparent); } .cta .eyebrow::before { background: var(--lime); } .cta__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; } .cta .btn--primary { background: var(--paper); color: var(--ink); border-color: var(--paper); } .cta .btn--primary:hover { background: #ece7de; } .cta .btn--ghost { color: var(--paper); border-color: color-mix(in srgb, var(--paper) 50%, transparent); } .cta .btn--ghost:hover { background: var(--paper); color: var(--ink); } /* --- Prose (long-form) ------------------------------------------------- */ .prose { max-width: 68ch; } .prose h2 { margin-top: 2.4rem; } .prose h3 { margin-top: 1.8rem; } .prose ul, .prose ol { padding-left: 1.2rem; } .prose li { margin-bottom: 0.5rem; } .prose blockquote { margin: 1.6rem 0; padding: 0.4rem 0 0.4rem 1.3rem; border-left: 4px solid var(--lime); font-size: 1.15rem; color: var(--ink); font-style: italic; } .prose code { background: var(--paper-2); border: 1px solid var(--divider); border-radius: 0; padding: 0.1em 0.4em; font-size: 0.9em; } /* --- Contact form ------------------------------------------------------ */ .form { display: grid; gap: 1.1rem; } .field { display: grid; gap: 0.4rem; } .field label { font-weight: 600; font-size: 0.95rem; } .field input, .field textarea { font-family: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1.5px solid var(--divider-2); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; width: 100%; transition: border-color .12s ease, box-shadow .12s ease; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 55%, transparent); } .field textarea { min-height: 140px; resize: vertical; } .form__note { font-size: 0.9rem; color: var(--muted); } /* --- Contact split ----------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } } .contact-detail { margin-bottom: 1.5rem; } .contact-detail .k { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); font-weight: 700; } .contact-detail .v { font-size: 1.2rem; font-weight: 700; } .contact-detail a { color: var(--accent); text-decoration: none; } .contact-detail a:hover { text-decoration: underline; } /* The form is folded away until someone wants it. A
rather than a button so it still opens with JavaScript off. */ .contact-form { border: 1.5px solid var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); } .contact-form > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; } .contact-form > summary::-webkit-details-marker { display: none; } .contact-form > summary:hover { background: var(--paper-2); } .contact-form > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; } .contact-form__icon { font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; line-height: 1; color: var(--accent); transition: transform .15s ease; } .contact-form[open] .contact-form__icon { transform: rotate(45deg); } .contact-form .form { padding: 1.25rem; border-top: 1px solid var(--divider); } @media (prefers-reduced-motion: reduce) { .contact-form__icon { transition: none; } } /* --- Footer ------------------------------------------------------------ */ .site-footer { --stop: var(--paper); background: var(--ink); color: color-mix(in srgb, var(--paper) 85%, transparent); margin-top: 0; border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); } .site-footer a { color: color-mix(in srgb, var(--paper) 88%, transparent); text-decoration: none; } .site-footer a:hover { color: var(--on-ink); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; padding-block: clamp(2.5rem, 5vw, 4rem); } @media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; } } .footer-brand .brand { color: var(--paper); margin-bottom: 0.75rem; } .footer-brand p { color: color-mix(in srgb, var(--paper) 75%, transparent); max-width: 34ch; } /* Present to a screen reader, absent to the eye. Used where a section needs a heading for the document outline but already announces itself visually — the results list under a page's own h1, for one. */ /* The Open Justice Licence attribution on caselaw.html. It is a condition of using the judgments at all, so it is quiet but never hidden: same size as the copyright line beside it, and it wraps onto its own row on a phone rather than being squeezed. */ /* ---- the year control (fw-years.js) ---- A register that holds six years but loads one has to say so, or a reader quite reasonably concludes the earlier years do not exist. This sits above the count, states what is on screen against what is available, and offers each year with its size so pressing it is an informed choice. */ .fw-years { margin: 0 0 0.9rem; } .fw-years__line { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--ink-soft); } .fw-years__row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .fw-years__btn { font-family: var(--font-heading); font-weight: 600; font-size: 0.82rem; padding: 0.34rem 0.7rem; border: 1px solid var(--divider-2); background: var(--surface); color: var(--ink); cursor: pointer; border-radius: 2px; line-height: 1.3; } .fw-years__btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .fw-years__btn:disabled { opacity: 0.55; cursor: default; } .fw-years__btn--all { border-style: dashed; } /* The years already on the page. Shown in the same row as the buttons so the list reads 2026, 2025, 2024 rather than starting at last year, but flat and unpressable, because there is nothing to press: they are here. */ .fw-years__on { font-family: var(--font-heading); font-weight: 700; font-size: 0.82rem; padding: 0.34rem 0.7rem; border: 1px solid var(--ink-soft); background: transparent; color: var(--ink); border-radius: 2px; line-height: 1.3; } .fw-years__done, .fw-years__fail { font-size: 0.85rem; color: var(--ink-soft); } .fw-years__fail { margin: 0.5rem 0 0; color: var(--ink); } @media (max-width: 900px) { /* Same 44px minimum as every other control on a phone. */ .fw-years__btn { min-height: 44px; padding-inline: 0.9rem; } } /* The "these are suggestions" line. It used to be the tail of a forty-word sentence repeated on every row; it is now said once, above the results, and set quieter than the count it follows so it informs without shouting. */ /* The held-back wider set. Four close matches and ninety plausible ones is not a shortlist, it is the register again with a heading on it — so the plausible ones sit behind one press that says how many there are. */ /* ---- the coverage box (fw-coverage.js) ---- Facts, laid out as facts: the number first and big, the name of the thing second, the period it covers third and quiet. Reads down the page on a phone and across it on a desktop without needing a second layout. */ .cov { margin: 0 0 2.2rem; } .cov__head { font-size: 1.02rem; color: var(--ink-soft); margin: 0 0 1.4rem; max-width: 60ch; } .cov__head b { color: var(--ink); font-family: var(--font-heading); font-size: 1.6rem; } .cov__set { margin: 0 0 1.6rem; } .cov__setname { margin: 0 0 .15rem; font-size: 1.05rem; display: flex; gap: .6rem; align-items: baseline; } .cov__setname a { color: var(--ink); text-decoration: none; } .cov__setname a:hover { color: var(--accent); } .cov__setn { font-family: var(--font-heading); font-weight: 700; font-size: .82rem; color: var(--muted); } .cov__what { margin: 0 0 .7rem; font-size: .88rem; color: var(--muted); } .cov__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } /* flex-wrap so the period drops to a second line rather than being written over. min-width:0 alone let a single unbreakable word ("Announcements") overflow its own box and paint across the nowrap period beside it. */ .cov__row { display: flex; flex-wrap: wrap; gap: .2rem .55rem; align-items: baseline; text-decoration: none; border: 1px solid var(--divider-2); background: var(--surface); padding: .5rem .7rem; color: var(--ink); } .cov__row:hover { border-color: var(--accent); } .cov__n { font-family: var(--font-heading); font-weight: 700; font-size: .98rem; color: var(--accent); } /* The period sits on its own line, always. Beside the label it had to be nowrap, and a single unbreakable name ("Announcements") then overflowed its own box and painted straight across it. Wrapping only the long ones fixed the collision and left the grid ragged, so every row wraps and the rows come out level. */ .cov__label { flex: 1 1 auto; min-width: 0; font-size: .86rem; overflow-wrap: anywhere; } .cov__when { flex: 0 0 100%; text-align: right; font-size: 0.75rem; color: var(--muted); white-space: nowrap; } .cov__foot { margin: 0; font-size: .82rem; color: var(--muted); } @media (max-width: 900px) { .cov__row { min-height: 44px; align-items: center; } } .tierhold { margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; align-items: baseline; } .tierhold__note { font-size: 0.84rem; color: var(--muted); } .matchnote__how { color: var(--muted); font-size: 0.88em; } /* The one-line hover explanation (fw-hedge.js). Short enough now to read at a glance, so it is set as one line that truncates rather than a paragraph. */ .why-hover { font-size: 0.84rem; color: var(--ink-soft); margin: 0.35rem 0 0; } .why-hover::before { content: ""; } /* ---- column headings that stay put ------------------------------------- Every table on this site is long enough to scroll past its own headings, and a column of ticks and dashes means nothing without the word at the top of it. A heading you cannot see is a column you cannot read. `top` clears the sticky masthead. --chrome-h is measured by site.js from whatever furniture actually stays on screen, so this is right whether or not a page has a rail, and stays right when the rail wraps to two lines on a narrow window. The fallback matters: --chrome-h is only set once site.js has run, and a heading that starts life underneath the header until the first scroll looks broken. A background is not optional. A sticky cell with a transparent background lets the rows slide visibly underneath it, which reads as a rendering fault rather than a fixed heading. */ thead th { position: sticky; top: var(--chrome-h, 64px); z-index: 3; background: var(--surface); /* box-shadow rather than border-bottom: a border on a sticky cell scrolls away with the cell's own box in Safari, leaving the heading floating. */ box-shadow: inset 0 -1px 0 var(--divider-2); } /* A second heading row (the tables that group columns under a span) has to sit below the first rather than on top of it. */ thead tr:nth-child(2) th { top: calc(var(--chrome-h, 64px) + 2.4rem); z-index: 2; } /* The register pages keep their own filter bar stuck under the masthead, so their headings have to clear that too. */ .reg thead th { top: calc(var(--chrome-h, 64px) + 3.6rem); } /* A sticky heading sticks to its nearest SCROLLING ancestor, not to the page. .sc-scroll, .pir-scroll and the rest carry overflow:auto so a wide table can be dragged sideways on a small screen — and that quietly made them the scrollport, so the headings scrolled away with the page and the pinning did nothing at all. Measured at 1440, 1100 and 960: not one of these tables is wider than its wrapper, so above the phone breakpoint the sideways scroll is machinery for a problem that does not exist. Below it, the tables become cards and the pinning is off anyway. */ @media (min-width: 901px) { /* .sc-scroll and .pir-scroll are fixed in their own pages'