), so this file can never reach into a page that does not opt in. ========================================================================= */ /* ---- Page frame --------------------------------------------------------- The dark base is set on rather than inherited from a .vos-section, because a legal page has no bands — one continuous surface, top to bottom, with the footer's own background taking over at the end. */ .legal { background: var(--bg-deep); color: var(--text); } /* ---- Masthead ----------------------------------------------------------- NOT the hero's nav. That nav's CSS lives inside #hero and is bound to the hero's layout, its scroll-spy and its mobile menu; lifting it here would mean either duplicating ~200 lines or loading the hero's stylesheet for a page with no hero. A legal page also has nowhere to scroll-spy TO. So: brand lockup back to the site, and one link out. Two elements, no JavaScript, and nothing that can drift out of sync with the real nav. */ .legal-mast { position: sticky; top: 0; z-index: 10; background: rgba(5, 8, 15, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--stroke); } .legal-mast__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 72px; padding-block: var(--sp-3); } .legal-mast__brand { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: 1; color: var(--text); } .legal-mast__brand img { width: 40px; height: 28px; } .legal-mast__back { font-size: var(--fs-sm); font-weight: var(--fw-medium); /* --text-muted, not --text-dim. Measured on composited pixels, --text-dim is 4.21:1 on this surface, under AA's 4.5 for normal text; --text-muted is 7.72:1. Same correction the hero's Client Login needed. */ color: var(--text-muted); transition: color var(--dur) var(--ease); } .legal-mast__back:hover, .legal-mast__back:focus-visible { color: var(--vos-blue); } /* ---- Document column ---------------------------------------------------- 72ch, not the 1232px --container. Legal prose is read line by line, and a 1232px measure runs to ~150 characters, roughly twice the width at which a reader reliably finds the start of the next line. The masthead and footer still span the full container, so the page does not read as narrow — only the prose is. */ .legal-doc { max-width: 72ch; margin-inline: auto; padding-block: clamp(40px, 6vw, 80px) clamp(56px, 8vw, 112px); font-size: var(--fs-body); font-weight: var(--fw-light); line-height: var(--lh-body); color: var(--text-strong); } /* ---- Headings ----------------------------------------------------------- */ .legal-doc h1 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: -.01em; color: var(--text); } .legal-doc h2 { margin-top: var(--sp-12); font-size: var(--fs-title); font-weight: var(--fw-semibold); line-height: 1.25; color: var(--text); } .legal-doc h3 { margin-top: var(--sp-8); font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: 1.3; color: var(--vos-blue); } /* The heading immediately after another heading gets no extra air — the gap belongs BETWEEN a section's prose and the next section's title. */ .legal-doc h2 + h3 { margin-top: var(--sp-6); } /* ---- Blocks ------------------------------------------------------------- */ .legal-doc p { margin-top: var(--sp-4); } .legal-doc h1 + p, .legal-doc h2 + p, .legal-doc h3 + p { margin-top: var(--sp-3); } .legal-doc strong { font-weight: var(--fw-semibold); color: var(--text); } .legal-doc ul { margin-top: var(--sp-4); padding-left: 0; list-style: none; } .legal-doc li { position: relative; margin-top: var(--sp-3); padding-left: var(--sp-6); } /* Authored mark rather than a list-style bullet, so its colour and optical size are ours. Sits on the first line's centre at --lh-body. */ .legal-doc li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--vos-blue); } .legal-doc a { color: var(--vos-blue); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur) var(--ease); } .legal-doc a:hover, .legal-doc a:focus-visible { color: var(--vos-mint); } .legal-doc hr { margin-top: var(--sp-10); border: 0; height: 1px; background: var(--stroke); } /* ---- Tables ------------------------------------------------------------- The subprocessor tables are the widest thing on any of these pages and they must never push the page body sideways (contract non-negotiable 1). The wrapper scrolls; the page does not. `tabindex="0"` on the wrapper is deliberate — a scrollable region that only responds to a mouse is unreachable by keyboard, so the build gives it focus and an accessible name. */ .legal-doc .legal-tablewrap { margin-top: var(--sp-6); overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--stroke); border-radius: var(--r-lg); background: var(--bg-panel); } .legal-doc .legal-tablewrap:focus-visible { outline: 2px solid var(--vos-blue); outline-offset: 2px; } .legal-doc table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.5; } .legal-doc th, .legal-doc td { padding: var(--sp-3) var(--sp-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--stroke); } .legal-doc thead th { font-weight: var(--fw-semibold); color: var(--text); white-space: nowrap; background: var(--bg-panel-2); } .legal-doc tbody tr:last-child th, .legal-doc tbody tr:last-child td { border-bottom: 0; } .legal-doc tbody td:first-child, .legal-doc tbody th:first-child { color: var(--text); } /* ---- Narrow screens: stack the tables ---------------------------------- Measured at 375px, the three-column subprocessor tables fit their scroll wrapper but clip "What it receives" — the column that carries the actual disclosure — behind a horizontal scroll a reader has to find. The page never scrolls sideways either way, so this is not an overflow fix; it is a "the content is legible on a phone" fix. Each row becomes a labelled block: the provider name as its heading, then one line per column with the column's own heading in front of it, supplied by the data-label the generator wrote. The semantics are left intact for assistive tech — only the visual box model changes. */ @media (max-width: 639px) { .legal-doc .legal-tablewrap { overflow-x: visible; border: 0; border-radius: 0; background: none; } .legal-doc table, .legal-doc tbody, .legal-doc tr, .legal-doc td, .legal-doc th { display: block; } /* The header row's only job was to label columns, and data-label does that now. clip rather than display:none so it stays in the a11y tree. */ .legal-doc thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .legal-doc tbody tr { margin-top: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--stroke); border-radius: var(--r-lg); background: var(--bg-panel); } .legal-doc tbody th[scope="row"] { padding: 0 0 var(--sp-3); border-bottom: 1px solid var(--stroke); font-size: var(--fs-body); color: var(--text); } .legal-doc tbody td { padding: var(--sp-3) 0 0; border-bottom: 0; } .legal-doc tbody td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--vos-blue); } } /* ---- The dateline under the title --------------------------------------- */ .legal-doc .legal-dateline { margin-top: var(--sp-4); font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-muted); } /* ---- Unfilled publication date ------------------------------------------ Rendered loud ON PURPOSE. Matt's handoff makes the date a precondition of publishing, and a blank that looks like body copy is a blank that ships. qa-check.mjs fails the build while this element is present, so the styling is a second line of defence, not the only one. */ .legal-doc .legal-unset { display: inline-block; padding: 2px 8px; border-radius: var(--r-sm); background: rgba(255, 195, 0, .14); border: 1px solid rgba(255, 195, 0, .45); color: var(--vos-gold); font-weight: var(--fw-semibold); font-size: var(--fs-sm); } /* ---- Counsel-pending marker (terms only) -------------------------------- */ .legal-doc .legal-pending { margin-top: var(--sp-4); padding: var(--sp-4) var(--sp-5); border: 1px dashed rgba(255, 195, 0, .45); border-radius: var(--r-lg); background: rgba(255, 195, 0, .06); color: var(--vos-gold); font-weight: var(--fw-medium); } /* ---- Table of contents -------------------------------------------------- Built from the document's own h2s. The privacy policy is 15 sections and ~2,400 words; without this the only way to find "How long we keep information" is to scroll and read headings. */ .legal-doc .legal-toc { margin-top: var(--sp-8); padding: var(--sp-5) var(--sp-6); border: 1px solid var(--stroke); border-radius: var(--r-lg); background: var(--bg-panel); } .legal-doc .legal-toc h2 { margin-top: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .legal-doc .legal-toc ul { margin-top: var(--sp-3); columns: 1; } .legal-doc .legal-toc li { margin-top: var(--sp-2); padding-left: 0; break-inside: avoid; } .legal-doc .legal-toc li::before { content: none; } .legal-doc .legal-toc a { font-size: var(--fs-sm); color: var(--text-strong); text-decoration: none; } .legal-doc .legal-toc a:hover, .legal-doc .legal-toc a:focus-visible { color: var(--vos-blue); text-decoration: underline; } /* Anchored headings land under the sticky masthead without this. */ .legal-doc h2[id] { scroll-margin-top: 88px; } @media (min-width: 768px) { .legal-doc .legal-toc ul { columns: 2; column-gap: var(--sp-8); } }