/* ========================================================================= GUVNOR DS v4 "Two Voices" + v4.1 "One brand, two grounds" — CORE LAYER Recreated from the design handoff (design_handoff_ds_v4_templates): guidance.css (shared shell + harmony layer) + harmony.css (§1–§5), adapted for this codebase: · dark scope is `.dark` (class on , set by the base.html bootstrap) with a prefers-color-scheme fallback for no-JS visitors · builds on ds4/foundations.css (the verbatim DS colors_and_type.css + type.css) and carries the verbatim official.css artefact layer Loads AFTER the Vite bundle + foundations.css so its :root/.dark harmony overrides win the cascade. ========================================================================= */ /* ---- token bridge — the few tokens the DS foundations don't carry -------- (Everything else — type ramp, measure, radii, tracking, transitions, official/authority hues, link colours — now comes verbatim from ds4/foundations.css.) ---------------------------------------------------- */ :root { --radius-brand: 24px; /* brand blocks only (spec --radius-xl) */ --official-blue-on-dark: #7fb3e8; /* gov-blue lifted for dark grounds */ --auth-regulator: var(--auth-fallback); /* regulator artefacts w/o a coded authority */ --color-accent-fill-ink: #fff; /* ink on the solid fill (dark: on gold) */ --rk: 1; /* rhythm constant; 0.71 compact */ } [data-density="compact"] { --rk: 0.71; } /* ---- harmony layer §1 — light-mode token changes -------------------------- */ :root { --color-ink-deep: #333926; /* olive — the brand ground */ --color-gold: #e3b563; /* the warmth — dark grounds only */ --color-accent-fill: #4b5334; /* solid fills go olive (was emerald) */ --color-accent-fill-hover: #3c4327; --color-bg-page: #f4f1e8; /* v3 warm cream (was #faf6f1) */ --color-bg-elevated: #f1ece4; /* light elevated step */ --color-bg-inverse: var(--color-ink-deep); /* footer/overscroll ground */ } /* ---- harmony layer §2 — dark ramp re-based slate → deep olive ------------- :root.dark matches main.css's own dark block specificity so load order (this file is later) decides. */ .dark, :root.dark { --color-bg-page: #252a1b; --color-bg-light: #252a1b; --color-bg-white: #333926; --color-bg-surface: #333926; --color-bg-alt: #3a412a; --color-bg-elevated: #3a412a; --color-bg-hover: #3e452c; --color-bg-inset: #495136; --color-bg-inverse: #1d2114; --color-border: #525a3d; --color-border-light: #454d32; --color-border-strong: #525a3d; --color-text-primary: #f4f2e9; --color-text-secondary: #c6c6b4; --color-text-muted: #98997f; --color-text-tertiary: #98997f; --color-accent: #2dd4a7; --color-accent-text: #5eead4; --color-accent-fill: #e3b563; /* primary fill goes gold in dark… */ --color-accent-fill-hover: #d9a94f; --color-accent-fill-ink: #22271a; /* …and carries dark ink, not white */ --color-accent-subtle: #22362c; --color-link: #2dd4a7; --color-link-hover: #6ee7c8; --color-link-visited: #8fbfae; --color-focus: #2dd4a7; --shadow-sm: 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 4px 12px rgba(0,0,0,.4); --shadow-lg: 0 12px 32px rgba(0,0,0,.55); } /* No-JS / system fallback: the bootstrap script always stamps .light or .dark, but with JS off neither lands — mirror the olive dark ramp. */ @media (prefers-color-scheme: dark) { :root:not(.light):not(.dark) { --color-bg-page: #252a1b; --color-bg-light: #252a1b; --color-bg-white: #333926; --color-bg-surface: #333926; --color-bg-alt: #3a412a; --color-bg-elevated: #3a412a; --color-bg-hover: #3e452c; --color-bg-inset: #495136; --color-bg-inverse: #1d2114; --color-border: #525a3d; --color-border-light: #454d32; --color-text-primary: #f4f2e9; --color-text-secondary: #c6c6b4; --color-text-muted: #98997f; --color-text-tertiary: #98997f; --color-accent: #2dd4a7; --color-accent-text: #5eead4; --color-accent-fill: #e3b563; --color-accent-fill-hover: #d9a94f; --color-accent-fill-ink: #22271a; --color-accent-subtle: #22362c; --color-link: #2dd4a7; --color-link-hover: #6ee7c8; --color-link-visited: #8fbfae; --color-focus: #2dd4a7; --shadow-sm: 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 4px 12px rgba(0,0,0,.4); --shadow-lg: 0 12px 32px rgba(0,0,0,.55); } } /* ---- base glue on top of foundations.css --------------------------------- (The type ramp, heading margins, link styling and body settings now come from the real DS foundations. These are the residual gaps.) */ b, strong { font-weight: 650; } /* the DS focus ring, extended beyond links to every focusable element */ :focus-visible { outline: var(--focus-outline, 3px solid var(--color-focus, var(--color-accent))); outline-offset: var(--focus-offset, 2px); } /* richtext fragments inside DS contexts pick up the reading rhythm — including the measure cap (bare .flow > p gets it from the flow engine; richtext-wrapped paragraphs need it here) */ .flow .richtext p, .idx-main .richtext p { font-size: 17px; line-height: 28px; text-wrap: pretty; max-width: var(--measure); } .flow .richtext p + p, .idx-main .richtext p + p { margin-top: calc(16px * var(--rk)); } .flow .richtext ul, .flow .richtext ol, .idx-main .richtext ul, .idx-main .richtext ol { font-size: 17px; line-height: 28px; padding-left: 24px; margin: calc(16px * var(--rk)) 0 0; max-width: var(--measure); } .flow .richtext li + li, .idx-main .richtext li + li { margin-top: 8px; } /* ---- flow engine ----------------------------------------------------------- */ .flow > * { margin: 0; } .flow > * + * { margin-top: calc(24px * var(--rk)); } .flow > h2 { margin-top: calc(64px * var(--rk)); } .flow > h3 { margin-top: calc(40px * var(--rk)); } .flow > h4 { margin-top: calc(32px * var(--rk)); } .flow > :first-child { margin-top: 0; } .flow > :where(.snippet, .callout, .official) { margin-top: calc(32px * var(--rk)); } /* signpost rows take a component breath after prose; consecutive rows fuse into one ruled list */ .flow > .linklist { margin-top: calc(32px * var(--rk)); } .flow > .linklist + .linklist { margin-top: 0; } .flow > .linklist + .linklist a:first-child { border-top: 1px solid var(--color-border-light); padding-top: 16px; } .flow > .brand-block { margin-top: calc(48px * var(--rk)); } .flow > h2 + *, .flow > h3 + *, .flow > h4 + * { margin-top: calc(16px * var(--rk)); } .flow > h2 + .snippet--open { margin-top: calc(24px * var(--rk)); } .flow > .section-intro { color: var(--color-text-secondary); max-width: var(--measure); } /* HEADING DEMOTION — when an h2 directly abuts a component that carries its OWN title, that title carries the section and the h2 stands down. How far it stands down depends on what the component already prints: a component that prints its own kicker claims the eyebrow slot, so the abutting h2 goes screen-reader-only — an artefact masthead (.official__title::before names the authority) and a brand block (.brand-block__kicker) both do, and demoting the h2 to an eyebrow there would stack two. A snippet card prints a title but no kicker, so the h2 becomes that kicker. Hidden h2s take their section gap with them (they leave the flow), so the component inherits the 64px an h2 held. Untitled components (bare link collections, open lists) keep the full h2. Add a .section-intro and the h2 promotes itself back. */ .flow > h2:has(+ .official), .flow > h2:has(+ .brand-block) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .flow > h2:has(+ .official) + *, .flow > h2:has(+ .brand-block) + * { margin-top: calc(64px * var(--rk)); } .flow > h2:has(+ .snippet .snippet__title) { font-family: var(--font-stack); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase; color: var(--color-text-muted); } .flow > h2:has(+ .snippet .snippet__title) + * { margin-top: 12px; } .flow > .section-intro + :where(.snippet, .official) { margin-top: calc(24px * var(--rk)); } /* ---- page shell ------------------------------------------------------------ */ .app { min-height: 100vh; display: flex; flex-direction: column; background: var(--color-bg-page); color: var(--color-text-primary); } /* clip, never hidden: overflow-x:hidden would make
a scroll container and break position:sticky for the rails inside it (.toc, .steprail). */ #main-content { overflow-x: clip; } .gv-header { position: sticky; top: 0; z-index: 40; background: var(--color-bg-white); border-bottom: 1px solid var(--color-border-light); padding: 16px 40px; display: flex; align-items: center; gap: 32px; transition: transform 0.25s ease; } html { scroll-padding-top: 72px; } .gv-header nav { margin-left: auto; display: flex; gap: 28px; align-items: center; } .gv-header nav a { color: var(--color-text-secondary); text-decoration: none; font-size: 15px; line-height: 20px; font-weight: 500; } .gv-header nav a:hover { color: var(--color-text-primary); } .gv-header nav a.active { color: var(--color-text-primary); font-weight: 600; } .gv-header nav a.active::after { content: ""; display: block; height: 2px; background: var(--color-accent); margin-top: 4px; border-radius: 1px; } /* ---- Sectors mega-menu (T-347) --------------------------------------------- js/nav-dropdown.js toggles aria-expanded on the trigger and nothing else — the sibling rule below is what actually shows the panel, and it is also why the menu must stay a SIBLING of its trigger inside .nav-dropdown. Desktop only: .gv-header nav is display:none under 768px and the bottom tab bar carries navigation there. */ /* Deliberately NOT position:relative — the panel anchors to .gv-header (which is sticky, so already a containing block) and right-aligns to the header's own 40px padding. Anchored to the trigger instead, a 540px panel hangs 500px off to its LEFT, under Home and past the viewport edge. */ .nav-dropdown { position: static; display: inline-flex; align-items: center; } .gv-header nav .nav-dropdown__trigger { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } .nav-dropdown__trigger svg { width: 14px; height: 14px; transition: transform var(--transition-base); } .nav-dropdown__trigger[aria-expanded="true"] svg { transform: rotate(180deg); } .nav-dropdown__menu { position: absolute; top: 100%; right: 40px; z-index: 50; display: none; width: 540px; max-width: calc(100vw - 80px); padding: 22px 26px 20px; background: var(--color-bg-white); border: 1px solid var(--color-border-light); border-radius: 0 0 18px 18px; box-shadow: var(--shadow-lg); } .nav-dropdown__trigger[aria-expanded="true"] + .nav-dropdown__menu { display: block; } .nav-dropdown__eyebrow { display: block; margin-bottom: 14px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase; color: var(--color-text-muted); } .gv-header nav .nav-dropdown__item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 14px; border-radius: 10px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--color-text-primary); text-decoration: none; } .gv-header nav .nav-dropdown__item:hover { background: var(--color-bg-hover); } .nav-dropdown__item .label { flex: 1; min-width: 0; } /* The visitor's own sector, pinned above the list rather than reordered into it, so the canonical order underneath never shifts about. */ .gv-header nav .nav-dropdown__item--pinned { border: 1px solid var(--color-accent-fill); margin-bottom: 6px; font-weight: 600; color: var(--color-accent-fill); } .nav-dropdown__item--pinned .dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; } .nav-dropdown__item--pinned .tag { flex: none; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: var(--tracking-caps-sm, 0.08em); text-transform: uppercase; } .nav-dropdown__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; padding: 6px 0 4px; } .gv-header nav .nav-dropdown__view-all { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--color-border-light); width: 100%; font-size: 15px; font-weight: 600; color: var(--color-accent-fill); } .nav-dropdown__view-all svg { width: 15px; height: 15px; } /* Gold is a dark-ground colour (1.7:1 on white), so the highlight is olive in light mode and only goes gold once the ground is dark. */ .dark .gv-header nav .nav-dropdown__item--pinned { border-color: var(--color-gold); color: var(--color-gold); } .dark .gv-header nav .nav-dropdown__view-all { color: var(--color-gold); } .gv-crumbs { max-width: var(--max-width); margin: 0 auto; padding: 16px 40px 0; width: 100%; } .gv-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0; margin: 0; font-size: 14px; line-height: 20px; } .gv-crumbs a { color: var(--color-text-secondary); text-decoration: none; } .gv-crumbs a:hover { color: var(--color-link); text-decoration: underline; } .gv-crumbs .sep { color: var(--color-text-muted); } .gv-crumbs [aria-current] { color: var(--color-text-primary); font-weight: 500; } .gv-hero .inner { max-width: var(--max-width); margin: 0 auto; padding: 40px 40px 48px; } .gv-hero .kicker { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase; color: var(--color-accent-text); margin: 0 0 16px; } .gv-hero h1 { font-size: 44px; line-height: 48px; letter-spacing: -0.025em; font-weight: 650; margin: 0; max-width: 20ch; text-wrap: balance; } .gv-hero .lead { font-size: 21px; line-height: 32px; letter-spacing: -0.005em; color: var(--color-text-secondary); max-width: 46ch; margin: 16px 0 0; text-wrap: pretty; } .gv-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 24px; } .gv-tag { display: inline-flex; align-items: center; background: var(--color-accent-subtle); color: var(--color-accent-text); border-radius: var(--border-radius-pill); padding: 4px 12px; font-size: 13px; line-height: 20px; font-weight: 600; white-space: nowrap; } .gv-meta .upd { color: var(--color-text-muted); font-size: 13px; line-height: 20px; font-weight: 500; } .gv-body { max-width: var(--max-width); margin: 0 auto; padding: 0 40px 80px; width: 100%; } .gv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: var(--gutter-lg); align-items: start; } .reading { max-width: var(--measure); } .reading h2 { font-size: 32px; line-height: 36px; letter-spacing: -0.02em; font-weight: 650; scroll-margin-top: 24px; } .reading h3 { font-size: 24px; line-height: 28px; letter-spacing: -0.015em; font-weight: 600; scroll-margin-top: 24px; } .reading h4 { font-size: 20px; line-height: 24px; letter-spacing: -0.01em; font-weight: 600; } .reading p { font-size: 17px; line-height: 28px; text-wrap: pretty; } .reading p strong { font-weight: 650; } /* no margin here — the flow engine owns vertical rhythm (a margin:0 at this specificity beats .flow > h2 + * and crushes the list against the heading) */ .reading .prose-list { font-size: 17px; line-height: 28px; padding-left: 24px; } .reading .prose-list li + li { margin-top: 8px; } /* the app bundle's preflight strips list markers and link styling globally; restore them for written content (prose lists, rich text, reading articles) */ .prose-list, .richtext ul { list-style: disc; } .richtext ol { list-style: decimal; } .richtext ul ul { list-style: circle; } .reading a:not([class]), .richtext a:not([class]) { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .reading a:not([class]):hover, .richtext a:not([class]):hover { text-decoration-thickness: 2px; } /* ---- snippet (Guvnor voice) ------------------------------------------------ */ .snippet__eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 8px; } /* h4-scale (20/650) so the card title clearly outranks step headings + their numbered circles inside the card body */ .snippet__title { font-family: var(--font-heading); font-weight: 650; font-size: 20px; line-height: 24px; letter-spacing: -0.01em; margin: 0; color: var(--color-text-primary); } .snippet__desc { font-size: 15px; line-height: 24px; color: var(--color-text-secondary); margin: 4px 0 0; max-width: 48ch; } .snippet__body { margin-top: 16px; } .snippet__note { font-size: 13px; line-height: 20px; color: var(--color-text-muted); margin: 16px 0 0; } .snippet__note strong { color: var(--color-text-secondary); font-weight: 600; } .snippet--card { background: var(--color-bg-white); border: 1px solid var(--color-border-light); border-radius: var(--border-radius-lg); padding: 24px; box-shadow: var(--shadow-sm); } .snippet--open { padding: 0; } /* snippet content stream — the card interior on one rhythm (15/24 body); shared by guide embeds and journey context wrappers. Component blocks (steps, deflists) take a full breath after prose, matching the flow engine's prose→component step-up. */ .snippet__stream > * { margin: 0; } .snippet__stream > * + * { margin-top: calc(16px * var(--rk)); } .snippet__stream > * + .steps, .snippet__stream > * + .deflist { margin-top: calc(32px * var(--rk)); } .snippet__stream > .steps + *, .snippet__stream > .deflist + * { margin-top: calc(24px * var(--rk)); } .snippet .richtext p { font-size: 15px; line-height: 24px; margin: 0 0 calc(12px * var(--rk)); text-wrap: pretty; max-width: none; } .snippet .richtext p:last-child { margin-bottom: 0; } .snippet .richtext ul, .snippet .richtext ol { font-size: 15px; line-height: 24px; padding-left: 22px; margin: 0 0 calc(12px * var(--rk)); } .snippet .richtext li + li { margin-top: 6px; } .snippet .richtext h3, .snippet .richtext h4 { font-size: 16px; line-height: 24px; letter-spacing: -0.005em; margin: calc(20px * var(--rk)) 0 calc(8px * var(--rk)); } .snippet .richtext h3:first-child, .snippet .richtext h4:first-child { margin-top: 0; } .snippet .steps li + li { margin-top: calc(20px * var(--rk)); } .snippet .steps h4 { margin: 4px 0; } /* nested-context immunity — cards embed inside hosts with their own paragraph rules (.mile-body p et al, which load later and out-specify bare classes); pin the card interior so hosts can't restyle it */ .snippet .snippet__title { font-size: 20px; line-height: 24px; } .snippet .snippet__desc { font-size: 15px; line-height: 24px; max-width: none; } .snippet .snippet__note { font-size: 13px; line-height: 20px; } /* one measure inside a card: the card edge is the column — prose, step bodies and deflist rows all run to it (no mixed narrow/full columns) */ .snippet .steps p { font-size: 15px; line-height: 24px; max-width: none; margin: 0; } .snippet .provenance { font-size: 13px; line-height: 20px; } .provenance { display: flex; align-items: center; gap: 8px; margin: 20px -24px -24px; padding: 12px 24px; background: var(--color-accent-subtle); border-top: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent); border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg); font-size: 13px; line-height: 20px; color: var(--color-accent-text); } .provenance svg { width: 15px; height: 15px; flex: none; } .provenance b { font-weight: 650; } .provenance a { color: var(--official-blue); font-weight: 600; } /* ---- definition rows ------------------------------------------------------- */ .deflist { display: flex; flex-direction: column; } .deflist > div { padding: 12px 0; border-top: 1px solid var(--color-border-light); } .deflist > div:first-child { border-top: 0; padding-top: 0; } .deflist dt { font-weight: 600; font-size: 15px; line-height: 24px; color: var(--color-text-primary); } .deflist dd { margin: 2px 0 0; font-size: 15px; line-height: 24px; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; } /* ---- decision matrix ------------------------------------------------------- */ .matrix .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .matrix .col { background: color-mix(in srgb, var(--edge) 6%, var(--color-bg-white)); border: 1px solid color-mix(in srgb, var(--edge) 26%, transparent); padding: 20px; border-radius: var(--border-radius-md); } .matrix .col.a { --edge: #0f766e; } .matrix .col.b { --edge: #5b6470; } .matrix .col h4 { font-size: 16px; line-height: 24px; margin: 0 0 12px; color: var(--edge); display: flex; align-items: center; gap: 8px; } .matrix .col h4 svg { width: 16px; height: 16px; flex: none; } .matrix .ticks { list-style: none; padding: 0; margin: 0; } .matrix .ticks li { position: relative; padding-left: 26px; font-size: 14px; line-height: 20px; color: var(--color-text-secondary); } .matrix .ticks li + li { margin-top: 8px; } .matrix .ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--edge) url("data:image/svg+xml;utf8,") center/11px no-repeat; } @media (max-width: 560px) { .matrix .cols { grid-template-columns: 1fr; } } /* ---- numbered steps -------------------------------------------------------- */ .steps { list-style: none; padding: 0; margin: 0; counter-reset: step; } .steps li { position: relative; padding-left: 48px; } .steps li + li { margin-top: 20px; } .steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--color-accent-fill); color: var(--color-accent-fill-ink, #fff); font-family: var(--font-heading); font-weight: 700; font-size: 15px; border-radius: 50%; } .steps h4 { font-size: 16px; line-height: 24px; margin: 4px 0; } .steps p { font-size: 15px; line-height: 24px; color: var(--color-text-secondary); margin: 0; max-width: 44ch; } /* ---- guide checklist (verify format — NOT a sequence) ---------------------- The counterpart to .steps. Where .steps says "do this, then this", .checks says "confirm you have done this": open boxes, no numbers, one hairline between rows so the eye reads it as a form to work down. Unlike .ticks it carries no scoping prefix — it is a top-level guide-body component, and the app preflight strips list markers globally, so it sets its own. */ /* the heading keeps the DS h3 scale (.reading h3) — only its rhythm is ours */ .checks__heading { margin: 0 0 12px; } .checks ul { list-style: none; padding: 0; margin: 0; } .checks li { padding: 10px 0; border-top: 1px solid var(--color-border-light); } .checks li:first-child { border-top: 0; } .checks label { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; } /* same control as the journey .do-card so ticking behaves identically across the estate; flat here because on a guide the checklist IS the body content */ .checks input { appearance: none; width: 20px; height: 20px; flex: none; margin: 3px 0 0; border: 2px solid var(--color-border); border-radius: 5px; background: var(--color-bg-white); cursor: pointer; display: grid; place-items: center; } .checks input:checked { background: var(--color-accent); border-color: var(--color-accent); } .checks input:checked::before { content: ""; width: 12px; height: 12px; background: url("data:image/svg+xml;utf8,") center/contain no-repeat; } .checks input:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; } .checks input:checked + .checks__label { color: var(--color-text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--color-text-muted) 50%, transparent); } /* a ticked row recedes whole — the help text is advice on how to do a thing already done, so leaving it at full strength keeps the row shouting */ .checks li:has(input:checked) .checks__detail { color: var(--color-text-muted); } /* rows run the full column like .deflist / .linklist; only the text takes a measure, matching the wide-desktop rule that frees components but not prose. --measure is em-based and calibrated for 17px, so the 14px detail has to be scaled by 17/14 to break on the same physical line as the label above it. */ .checks__label { font-size: 17px; line-height: 26px; color: var(--color-text-primary); max-width: var(--measure); } .checks__detail { font-size: 14px; line-height: 20px; color: var(--color-text-secondary); margin: 2px 0 0 34px; max-width: calc(var(--measure) * 17 / 14); } .checks .opt { color: var(--color-text-muted); font-size: 14px; } /* ---- link collection (leaves Guvnor — blue) -------------------------------- */ .linklist { display: flex; flex-direction: column; } .linklist a { display: grid; grid-template-columns: 1fr 16px; gap: 16px; align-items: start; padding: 16px 0; border-top: 1px solid var(--color-border-light); text-decoration: none; color: inherit; } .linklist a:first-child { border-top: 0; padding-top: 0; } .linklist a:hover .ll-title { text-decoration: underline; text-decoration-thickness: 2px; } .linklist .ll-title { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--official-blue); } .linklist .ll-desc { font-size: 14px; line-height: 20px; color: var(--color-text-secondary); margin: 2px 0 0; } .linklist .ll-src { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: var(--tracking-caps-sm, 0.06em); text-transform: uppercase; color: var(--color-text-muted); margin-top: 6px; } .linklist p { margin: 0; } /* some emitters use

for ll-title/ll-src — kill the global p bottom margin */ .linklist .ll-name { text-transform: none; letter-spacing: 0; } /* publisher names/domains render as authored, not shouted */ .linklist .ll-arrow { width: 16px; height: 16px; margin-top: 4px; color: var(--official-blue); } /* ---- legislation rows — flat inside the artefact (no card-in-card) --------- */ .legal { display: flex; flex-direction: column; margin-top: 8px; } .legal a { display: block; text-decoration: none; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--band, var(--auth-legislation)) 18%, transparent); } .legal a:first-child { border-top: 0; } .legal a:hover .lg-name { text-decoration: underline; text-decoration-thickness: 2px; } .legal .lg-name { font-weight: 650; font-size: 15px; line-height: 20px; color: var(--official-blue); } .legal .lg-meta { font-size: 12px; line-height: 16px; color: var(--color-text-muted); margin-top: 4px; display: flex; gap: 8px; align-items: center; } .legal .lg-pill { background: color-mix(in srgb, var(--auth-legislation) 10%, #fff); color: var(--auth-legislation); border-radius: 2px; padding: 2px 8px; font-size: 11px; line-height: 16px; font-weight: 600; } /* ---- Guv's take callout ---------------------------------------------------- */ .callout { background: var(--color-accent-subtle); border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent); border-radius: var(--border-radius-lg); padding: 24px; } .callout .co-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase; color: var(--color-accent-text); margin: 0 0 12px; } .callout .co-label svg { width: 16px; height: 16px; flex: none; color: var(--color-accent); } /* headed callout: the heading is the only label, so it carries the type icon itself. Hanging, not centred — a title that wraps to two lines keeps a single text column, and the 3px nudge drops the icon onto the heading's cap line. The icon keeps the family colour (amber twin lives in journeys.css). */ .callout .co-headed { display: flex; align-items: flex-start; gap: 8px; } .callout .co-headed svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--color-accent); } .callout p { font-size: 16px; line-height: 24px; margin: 0; color: var(--color-text-primary); max-width: 48ch; } .callout .ticks { list-style: none; padding: 0; margin: 16px 0 0; columns: 2; column-gap: 32px; max-width: 860px; } .callout .ticks li { position: relative; padding-left: 24px; font-size: 14px; line-height: 20px; color: var(--color-text-secondary); break-inside: avoid; margin-bottom: 8px; } .callout .ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--color-accent) url("data:image/svg+xml;utf8,") center/11px no-repeat; } @media (max-width: 560px) { .callout .ticks { columns: 1; } } /* ---- callout family shared furniture (faceted-callout migration) ----------- The .who / .ext lines journeys.css only defines for .callout--req apply to the whole family; the co-label may carry a severity chip after its text. */ .callout .who { font-size: 13px; line-height: 20px; color: var(--color-text-muted); margin-top: 10px; max-width: none; } .callout .who b { color: var(--color-text-secondary); font-weight: 600; } .callout .ext { display: inline-flex; } /* ---- external-link footer rhythm ------------------------------------------- One gap (12px) above a component's closing external link, whatever the context: bare .ext anchors in callouts/areas AND

-wrapped ones in snippet bodies (which otherwise inherit whatever the stream rules give the paragraph — the source of the wildly varying gaps). */ .callout .ext, .callout--req .ext, .area .ext { margin-top: 12px; } :where(.snippet, .snippet__body, .snippet__stream, .official) p:has(> .ext) { margin: 12px 0 0; } .snippet__stream > * + p:has(> .ext) { margin-top: 12px; } .callout .snippet__title { margin-bottom: 8px; } .callout .deflist { margin: 12px 0 0; } .callout .deflist dd { max-width: none; } .callout .co-label .sev { letter-spacing: 0; text-transform: none; } .callout .richtext ul, .callout .richtext ol { font-size: 15px; line-height: 24px; padding-left: 22px; margin: 0 0 12px; } .callout .richtext li + li { margin-top: 6px; } .ticks .opt { color: var(--color-text-muted); font-size: 13px; font-weight: 400; } /* internal variant of the link collection — stays inside Guvnor, so the titles take the product link colour instead of leaves-Guvnor blue */ .linklist--gv .ll-title, .linklist--gv .ll-arrow { color: var(--color-link); } /* ---- accordion section (DS chrome; open/close mechanics live in main.css) -- */ .accordion-section { background: var(--color-bg-white); border: 1px solid var(--color-border-light); border-radius: var(--border-radius-lg); overflow: hidden; } .accordion-section__head { padding: 16px 20px; } .accordion-section__toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; } .accordion-section__toggle .acc-title { font-family: var(--font-heading); font-weight: 650; font-size: 17px; line-height: 24px; letter-spacing: -0.005em; color: var(--color-text-primary); } .accordion-section .accordion-icon { width: 20px; height: 20px; flex: none; color: var(--color-text-muted); } .accordion-section__summary { font-size: 14px; line-height: 20px; color: var(--color-text-secondary); margin: 4px 0 0; } .accordion-section__content { padding: 0 20px 20px; } .accordion-section__content .acc-stream { border-top: 1px solid var(--color-border-light); padding-top: 16px; display: flex; flex-direction: column; gap: 16px; } /* ---- OFFICIAL ARTEFACT LAYER (verbatim from the DS official.css) --------- The visual quarantine for content quoted from official sources: square corners, Noto Sans interiors, colour-banded masthead naming the issuing authority (tax-disc logic), dashed tear-line edge, REQUIRED source CTA. Guvnor-voice surfaces never borrow these tokens, and vice versa. */ .official { position: relative; --band: var(--auth-fallback); --r: 5px; /* tear-line inset */ --notch: var(--official-notch, var(--color-bg-page)); font-family: var(--official-font); background: color-mix(in srgb, var(--band) 5%, #fff); border: 1px solid color-mix(in srgb, var(--band) 24%, var(--official-border)); border-bottom: 1px dashed color-mix(in srgb, var(--band) 42%, var(--official-border)); border-radius: 0; /* artefacts are square */ padding: 0 20px 16px; box-shadow: var(--shadow-md), var(--shadow-sm); /* mild float — reads as laid on the page */ } /* ---- issuing-authority coding (the tax-disc logic) ---------------------- */ .official[data-authority="hmrc"] { --band: var(--auth-hmrc); } .official[data-authority="companies-house"] { --band: var(--auth-companies-house); } .official[data-authority="legislation"] { --band: var(--auth-legislation); } .official[data-authority="govuk"] { --band: var(--auth-govuk); } .official[data-authority="ico"] { --band: var(--auth-ico); } /* ---- the bottom edge itself is the tear-line (see border-bottom above) --- */ /* ---- masthead band — title in reverse type on the authority colour ------ */ .official__title { position: relative; margin: 0 -20px; padding: 16px 56px 13px 20px; background: var(--band); color: #fff; font-family: var(--official-font); font-weight: 650; font-size: 17px; line-height: 24px; letter-spacing: 0; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.18); } /* the kicker NAMES the authority — the legend is self-documenting */ .official__title::before { content: "Official source"; display: block; font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); margin-bottom: 4px; } .official[data-authority="hmrc"] .official__title::before { content: "HM Revenue & Customs"; } .official[data-authority="companies-house"] .official__title::before { content: "Companies House"; } .official[data-authority="legislation"] .official__title::before { content: "UK Legislation"; } .official[data-authority="govuk"] .official__title::before { content: "GOV.UK"; } .official[data-authority="ico"] .official__title::before { content: "Information Commissioner's Office"; } /* stamp roundel — ring + centre pip */ .official__title::after { content: ""; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.5); background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 2.5px, transparent 3px); } /* ---- interior — Noto Sans on tinted paper ------------------------------- */ .official__desc { font-size: 15px; line-height: 24px; color: var(--color-text-secondary); margin: 12px 0 0; max-width: 48ch; } .official__body { margin-top: 16px; } .official__note { font-size: 13px; line-height: 20px; color: var(--color-text-muted); margin: 14px 0 0; } .official__note strong { color: var(--color-text-secondary); font-weight: 600; } .official a { color: var(--official-blue); } .official a:hover { color: var(--official-blue-dark); } .official a:visited { color: #4c2c92; } /* definition rows inside an artefact */ .official .deflist dt { color: color-mix(in srgb, var(--band) 82%, #000); } .official .deflist > div, .official .compare > div { border-top-color: color-mix(in srgb, var(--band) 14%, var(--color-border-light)); } /* ---- source CTA footer — REQUIRED on every artefact ---------------------- */ .official__cta { display: flex; align-items: center; gap: 10px; margin: 20px -20px -16px; padding: 14px 20px; background: color-mix(in srgb, var(--band) 8%, #fff); border-top: 1px solid color-mix(in srgb, var(--band) 22%, var(--official-border)); text-decoration: none; transition: background var(--transition-base); } .official__cta:hover { background: color-mix(in srgb, var(--band) 14%, #fff); } .official__cta .cta-ic { width: 18px; height: 18px; flex: none; color: var(--official-blue); } .official__cta .cta-label { font-family: var(--official-font); font-weight: 650; font-size: 15px; line-height: 20px; color: var(--official-blue); } .official__cta:hover .cta-label { text-decoration: underline; text-decoration-thickness: 2px; } .official__cta .cta-domain { margin-left: auto; font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); white-space: nowrap; } .official__cta .cta-arrow { width: 13px; height: 13px; flex: none; color: var(--official-blue); } /* ---- print: keep artefacts intact ---------------------------------------- */ @media print { .official { break-inside: avoid; box-shadow: none; } .official__cta .cta-label::after { content: " (" attr(href) ")"; font-weight: 400; } } /* harmony §3 (T-258, supersedes "artefacts stay light paper") — artefacts go DARK PAPER on the dark ground. The "official document laid on the page" affordance survives through the band-tinted surface, the solid livery masthead (unchanged — reverse type on the authority colour already carries dark-safe contrast) and the dashed tear-line. Band-COLOURED text inside the artefact switches to a per-authority --band-lift: the original hues are tuned for white paper and fail contrast on olive. */ .dark { --auth-hmrc-lift: #63c495; /* green lift */ --auth-companies-house-lift: #86b6e6; /* royal lift */ --auth-legislation-lift: #e58e9a; /* claret lift */ --auth-govuk-lift: #7fb3e8; /* blue lift (= --official-blue-on-dark) */ --auth-ico-lift: #a8a6e2; /* indigo lift */ --auth-fallback-lift: #9fb0c6; /* slate lift */ } .dark .official { --band-lift: var(--auth-fallback-lift); background: color-mix(in srgb, var(--band) 16%, #2f3524); border-color: color-mix(in srgb, var(--band) 42%, var(--color-border-light)); border-bottom-color: color-mix(in srgb, var(--band-lift) 55%, var(--color-border-light)); color: var(--color-text-primary); color-scheme: dark; } .dark .official[data-authority="hmrc"] { --band-lift: var(--auth-hmrc-lift); } .dark .official[data-authority="companies-house"] { --band-lift: var(--auth-companies-house-lift); } .dark .official[data-authority="legislation"] { --band-lift: var(--auth-legislation-lift); } .dark .official[data-authority="govuk"] { --band-lift: var(--auth-govuk-lift); } .dark .official[data-authority="ico"] { --band-lift: var(--auth-ico-lift); } /* deep bands vanish against the dark surface — masthead keeps a hairline seat */ .dark .official__title { box-shadow: inset 0 -1px 0 rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.06); } .dark .official a { color: var(--official-blue-on-dark, #7fb3e8); } .dark .official a:hover { color: #a8ccf0; } .dark .official a:visited { color: #b5a8e0; } .dark .official .deflist dt { color: color-mix(in srgb, var(--band-lift) 88%, #fff); } .dark .official .deflist > div, .dark .official .compare > div { border-top-color: color-mix(in srgb, var(--band) 34%, var(--color-border-light)); } .dark .official__cta { background: color-mix(in srgb, var(--band) 26%, #2a2f20); border-top-color: color-mix(in srgb, var(--band) 42%, var(--color-border-light)); } .dark .official__cta:hover { background: color-mix(in srgb, var(--band) 36%, #2a2f20); } .dark .official__cta .cta-ic, .dark .official__cta .cta-label, .dark .official__cta .cta-arrow { color: var(--official-blue-on-dark, #7fb3e8); } /* the .legal row family + authority pill follow the same lift logic */ .dark .legal a { border-top-color: color-mix(in srgb, var(--band, var(--auth-legislation)) 38%, transparent); } .dark .legal .lg-name { color: var(--official-blue-on-dark, #7fb3e8); } .dark .legal .lg-pill { background: color-mix(in srgb, var(--auth-legislation) 32%, #2a2f20); color: var(--auth-legislation-lift, #e58e9a); } /* gov-blue elements OUTSIDE artefacts lift for dark grounds */ .dark .linklist .ll-title, .dark .linklist .ll-arrow, .dark .provenance a { color: var(--official-blue-on-dark, #7fb3e8); } /* ---- TOC rail -------------------------------------------------------------- */ .toc { position: sticky; top: 80px; padding-top: 4px; } /* clears the sticky gv-header */ .toc h2 { font-family: var(--font-stack); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 16px; } .toc ol { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--color-border-light); } .toc a { display: block; padding: 6px 0 6px 16px; margin-left: -2px; border-left: 2px solid transparent; color: var(--color-text-secondary); text-decoration: none; font-size: 14px; line-height: 20px; } .toc a:hover { color: var(--color-link); } .toc a.active { color: var(--color-text-primary); font-weight: 600; border-left-color: var(--color-accent); } /* ---- related band + disclaimer + footer ------------------------------------ */ .related { background: var(--color-bg-white); border-top: 1px solid var(--color-border-light); } .related .inner { max-width: var(--max-width); margin: 0 auto; padding: 48px 40px 56px; } .related .eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase; color: var(--color-accent-text); margin: 0 0 8px; } .related h2 { font-size: 28px; line-height: 32px; margin: 0 0 24px; } .related .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .related .cards a { display: block; text-decoration: none; color: inherit; background: var(--color-bg-white); border: 1px solid var(--color-border-light); border-radius: var(--border-radius-lg); padding: 20px; transition: box-shadow var(--transition-base), border-color var(--transition-base); } .related .cards a:hover { box-shadow: var(--shadow-md); border-color: var(--color-border); } .related .cards a h3 { font-size: 17px; line-height: 24px; margin: 0 0 8px; color: var(--color-link); } .related .cards a p { font-size: 14px; line-height: 20px; color: var(--color-text-secondary); margin: 0; } @media (max-width: 880px) { .related .cards { grid-template-columns: 1fr; } } .disclaimer { font-size: 13px; line-height: 20px; color: var(--color-text-muted); border-top: 1px solid var(--color-border-light); margin-top: 48px; padding-top: 20px; max-width: var(--measure); } .gv-footer { background: var(--color-ink-deep); color: rgba(255,255,255,.8); padding: 40px; } .gv-footer .inner { max-width: var(--max-width); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: baseline; } .gv-footer .fnav { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; } .gv-footer a { color: rgba(255,255,255,.8); text-decoration: none; font-size: 14px; line-height: 20px; } .gv-footer a:hover { color: #fff; text-decoration: underline; } .gv-footer .small { width: 100%; font-size: 13px; line-height: 20px; color: rgba(255,255,255,.55); max-width: 60ch; } .gv-footer .credit { margin-left: auto; font-size: 13px; line-height: 20px; color: rgba(255,255,255,.65); max-width: 44ch; } .gv-footer .credit a { color: var(--color-gold, #e3b563); text-decoration: underline; } .gv-footer .substrip-band { border-top: 1px solid rgba(255,255,255,.14); margin: 28px -40px -40px; padding: 0 40px; } .gv-footer .substrip { max-width: var(--max-width); margin: 0 auto; padding: 14px 0 20px; display: flex; gap: 16px; flex-wrap: wrap; } .gv-footer .substrip p { margin: 0; font-size: 13px; line-height: 20px; color: rgba(255,255,255,.55); } .gv-footer .substrip p:last-child { margin-left: auto; } .dark .gv-footer { background: #1d2114; } /* ---- brand block (harmony §5 — marketing surfaces) ------------------------- */ .brand-block { background: var(--color-ink-deep); border-radius: var(--radius-brand); padding: 40px 44px; } .brand-block__kicker { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: var(--tracking-caps, 0.1em); text-transform: uppercase; color: var(--color-gold); margin: 0 0 12px; } /* doubled class = specificity bump: app scopes (.guvnor h3/p etc.) load after this file and must not re-ink the olive ground */ .brand-block.brand-block h3 { color: #fff; margin: 0 0 8px; font-family: var(--font-heading); font-size: 24px; line-height: 28px; letter-spacing: -0.015em; font-weight: 600; } .brand-block.brand-block p { color: rgba(255,255,255,.82); font-size: 16px; line-height: 24px; margin: 0; max-width: 48ch; } .brand-block__btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; background: var(--color-gold); color: #22271a; font-weight: 600; font-size: 15px; line-height: 24px; text-decoration: none; padding: 10px 24px; border-radius: var(--border-radius-pill); transition: background var(--transition-base); } .brand-block__btn:hover { background: #d9a94f; color: #22271a; } .brand-block__btn svg { width: 15px; height: 15px; } .brand-block__row { display: flex; flex-wrap: wrap; gap: 12px; } /* ticks on the olive ground: gold marker, dark check, light text */ .brand-block .ticks { list-style: none; padding: 0; margin: 16px 0 0; } .brand-block .ticks li { position: relative; padding-left: 26px; font-size: 15px; line-height: 24px; color: rgba(255,255,255,.82); } .brand-block .ticks li + li { margin-top: 8px; } .brand-block .ticks li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--color-gold) url("data:image/svg+xml;utf8,") center/11px no-repeat; } .brand-block__btn--ghost { background: rgba(255,255,255,.14); color: #fff; } .brand-block__btn--ghost:hover { background: rgba(255,255,255,.24); color: #fff; } .dark .brand-block { border: 1px solid var(--color-border-light); } /* harmony §4 patches */ .dark .matrix .col.a { --edge: #2dd4a7; } .dark .matrix .col.b { --edge: #9aa4b2; } .dark .matrix .col { background: color-mix(in srgb, var(--edge) 12%, var(--color-bg-white)); } /* ---- boxes hang, text aligns ------------------------------------------------ Boxed children of the reading flow outdent by their own padding+border so their inner text shares the prose left rail (same rule as .flux on the hubs and the journey postamble). brand-block text stays inset (display band) but its box edge matches its neighbours'. */ @media (min-width: 721px) { .flow > .callout, .flow section > .callout, .flow > .snippet--card, .flow section > .snippet--card, .flow > .guide-ref, .flow section > .guide-ref, .flow > .brand-block, .flow section > .brand-block { margin-inline: -25px; } .flow > .official, .flow section > .official { margin-inline: -21px; } } /* ---- wide desktop — use the real estate ------------------------------------ Prose keeps its reading measure; everything else (artefacts, callouts, matrices, link collections, steps) breaks out to the full column. */ @media (min-width: 1200px) { :root { --max-width: 1360px; } .gv-grid { grid-template-columns: minmax(0, 1fr) 260px; } .reading { max-width: none; } .flow > p, .flow > .prose-list, .flow > .section-intro { max-width: var(--measure); } .gv-hero .lead { max-width: 54ch; } .matrix .cols { gap: 24px; } .steps p { max-width: 56ch; } } /* ---- responsive ------------------------------------------------------------ */ @media (max-width: 920px) { .gv-grid { grid-template-columns: 1fr; gap: 40px; } .toc { position: static; order: -1; border: 1px solid var(--color-border-light); background: var(--color-bg-white); border-radius: var(--border-radius-md); padding: 16px 20px; } .toc ol { columns: 2; } } /* implementation glue: header action cluster (theme toggle, mobile triggers) */ .gv-actions { display: flex; align-items: center; gap: 4px; } .gv-header nav + .gv-actions { margin-left: 0; } /* implementation glue: compact shell paddings + type on small screens */ @media (max-width: 767px) { .gv-header nav { display: none; } /* bottom tab bar carries primary nav */ .gv-actions { margin-left: auto; } .gv-footer { padding-bottom: 96px; } /* clear the fixed bottom tab bar */ /* Hide-on-scroll-down, reveal-on-scroll-up (script in base.html toggles the class). Desktop ignores the class entirely — header stays pinned. */ .gv-header.header--hidden { transform: translateY(-100%); } } @media (max-width: 720px) { .gv-header { padding: 12px 20px; gap: 16px; } .gv-header nav { gap: 18px; } .gv-crumbs { padding: 12px 20px 0; } .gv-hero .inner { padding: 28px 20px 32px; } .gv-hero h1 { font-size: 34px; line-height: 38px; } .gv-hero .lead { font-size: 18px; line-height: 28px; } .gv-body { padding: 0 20px 64px; } .related .inner { padding: 40px 20px 48px; } .gv-footer { padding: 32px 20px; } /* The desktop footer leans on `margin-left: auto` to push the nav and the credit to the right of one flex row. Once the row wraps, those autos centre and indent the wrapped items against nothing — stack them left. */ .gv-footer .inner { flex-direction: column; align-items: flex-start; gap: 20px; } .gv-footer .fnav { margin-left: 0; gap: 12px 20px; } .gv-footer .credit { margin-left: 0; max-width: none; } .gv-footer .substrip { flex-direction: column; gap: 8px; } .gv-footer .substrip p:last-child { margin-left: 0; } .gv-footer .substrip-band { margin: 24px -20px -96px; padding: 0 20px 96px; } .brand-block { padding: 28px 24px; } } @media print { .gv-header nav, .toc { display: none; } .gv-grid { grid-template-columns: 1fr; } .snippet--card, .callout, .matrix .col, .steps li, .checks li, .legal a { break-inside: avoid; } /* checklist guides invite "print or save this page to track your progress" — the box has to survive a printer that drops backgrounds */ .checks input { border-color: #333; -webkit-print-color-adjust: exact; print-color-adjust: exact; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }