/* ============================================================ Legal pages — editorial typography for /legal/terms-of-use and /legal/privacy-policy. ============================================================ Aesthetic: editorial / magazine-grade clinical refinement. Fraunces (display, opsz variable serif) + Newsreader (body serif). Patient-facing legal text styled with the care of a published act of parliament rather than a corporate EULA. Everything is scoped under `.legal-page` so the design choices here don't bleed into the intake / admin UIs. The page declares its own palette overrides via custom properties on `.legal-page` (paper-toned light theme, deep warm dark theme); semantic tokens from tokens.css are still used everywhere so dark-mode flips automatically. No hardcoded hex outside the local-theme block. Fonts are SELF-HOSTED (assets/fonts/*.woff2), not Google Fonts. Fraunces + Newsreader are both variable woff2 (one file per weight-range / style), latin subset. The page preloads the Newsreader body face. See @font-face declarations immediately below. ============================================================ */ /* Fraunces — variable (wght 300–700), latin. Display serif. */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../assets/fonts/fraunces-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Newsreader — variable (wght 400–700), latin. Body serif, upright + italic. */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../assets/fonts/newsreader-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 500; font-display: swap; src: url("../assets/fonts/newsreader-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ Design rules (continued): no hardcoded hex outside the local-theme block below — ``check_dark_mode.py --strict`` enforces this. CSP note: the marketing site's _headers CSP is `font-src 'self'` / `style-src 'self' 'unsafe-inline'` — the legal pages need NO Google Fonts origins now that the faces above are self-hosted. The only remaining inline-script allowance is for the small inline script in _base_legal.html (TOC ``
`` toggle + IntersectionObserver scroll-spy); for a strict no-`'unsafe-inline'` policy, move that script to a separate file under /static/js/. ============================================================ */ /* ── Local theme: per-page custom properties on top of tokens.css ── The legal pages want a slightly different palette than the rest of the app (paper-warmed light theme, deep warm dark theme) to reinforce the editorial / archival aesthetic. Following the same pattern tokens.css uses — light values on the root, dark values under [data-theme="dark"] — scoped to ``.legal-page`` so nothing leaks. These are the legal-only design tokens; treat each line as the canonical source for that token. Hex values flagged here match the check_dark_mode.py exemption convention: /* dark-mode-ok */ */ .legal-page { /* Paper-toned page surround — warmer than the cool slate the rest of the app uses. Reads as archival / printed-document. */ --legal-paper: #faf7f0; /* dark-mode-ok */ --legal-paper-edge: #ede7d6; /* dark-mode-ok */ /* Rule colour used under section headings and around the TOC. */ --legal-rule: #d6cdb8; /* dark-mode-ok */ /* Drop-cap clause number colour — a muted aged-ink tone. */ --legal-clause-num: #8a6d3b; /* dark-mode-ok */ /* TOC inactive marker — a quiet bullet line on the side. */ --legal-toc-rail: #d6cdb8; /* dark-mode-ok */ /* Subtle backdrop tint behind the prose card. */ --legal-prose-bg: #ffffff; /* dark-mode-ok */ } [data-theme="dark"] .legal-page { /* Deep warm blue-grey — feels intentional next to the cool navy of the rest of the app. Like reading a leather-bound book in a low-lit room. */ --legal-paper: #0c1219; /* dark-mode-ok */ --legal-paper-edge: #1a2230; /* dark-mode-ok */ --legal-rule: #34405a; /* dark-mode-ok */ --legal-clause-num: #c8a16a; /* dark-mode-ok */ --legal-toc-rail: #34405a; /* dark-mode-ok */ --legal-prose-bg: #11161f; /* dark-mode-ok */ } /* ── Base page ── */ .legal-page { min-height: 100vh; background: var(--legal-paper); color: var(--text-primary); display: flex; flex-direction: column; /* Subtle paper-grain backdrop: a single fine-noise radial that adds atmosphere without competing with the prose. Falls back to a flat colour if `background-image` doesn't render. */ background-image: radial-gradient( ellipse 1200px 600px at top center, var(--legal-paper-edge) 0%, transparent 60% ); background-repeat: no-repeat; /* System fallback before Fraunces / Newsreader loads. The serif fallback list is chosen to keep glyph metrics close to Newsreader so the FOUT shift is small. */ font-family: "Newsreader", Charter, "Iowan Old Style", "Source Serif Pro", "Apple Garamond", Georgia, "Times New Roman", serif; /* ``kern`` and ``liga`` are usually on by default but we declare them explicitly for older WebKit. ``calt`` enables contextual alternates (Newsreader uses these to disambiguate similar letterforms). We deliberately do NOT enable ``ss01`` etc. here because Fraunces' stylistic sets affect specific glyphs in a way that hasn't been reviewed against the legal copy; opt in per-element if needed. */ font-feature-settings: "kern", "liga", "calt"; /* Newsreader and Fraunces both expose an opsz axis; let the browser interpolate the optical size based on font-size. */ font-optical-sizing: auto; } /* ── Header (editorial masthead) ── */ .legal-header { position: relative; padding: 2.5rem 1.25rem 2rem; text-align: center; /* Hairline rule along the bottom — sits flush with the start of the layout grid and continues across the full width. */ border-bottom: 1px solid var(--legal-rule); } /* Top nav — back-link left, switch-doc link right. Small kerned sans-serif tracking gives it an editorial header feel. */ .legal-nav { display: flex; justify-content: space-between; align-items: center; max-width: 1100px; margin: 0 auto 2.5rem; gap: 1rem; font-family: "Fraunces", Georgia, serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .legal-back-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-primary); text-decoration: none; min-height: 44px; /* mobile tap target */ transition: color 180ms ease, transform 180ms ease; } .legal-back-link:hover, .legal-back-link:focus-visible { color: var(--color-primary-dark); transform: translateX(-2px); } .legal-back-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: 2px; } .legal-back-link--placeholder { /* Reserve a slot when no return_to is set so the right-side "switch doc" link stays anchored to the right; matches the visual width of the back-link icon + label. */ min-width: 1px; min-height: 44px; display: inline-block; } .legal-switch-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); text-decoration: none; min-height: 44px; transition: color 180ms ease, transform 180ms ease; } .legal-switch-link:hover, .legal-switch-link:focus-visible { color: var(--color-primary); transform: translateX(2px); } .legal-switch-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: 2px; } /* ── Hero ── A kicker (tracked small caps), big serif title with display- optical-size Fraunces, and a refined byline. Composed like the masthead of a feature article. */ .legal-hero { max-width: 720px; margin: 0 auto; } .legal-kicker { font-family: "Fraunces", Georgia, serif; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--color-primary); margin-bottom: 1rem; /* A tiny ornamental dot before and after the kicker — sets the editorial tone without being noisy. */ display: inline-flex; align-items: center; gap: 0.6rem; } .legal-kicker::before, .legal-kicker::after { content: ""; width: 18px; height: 1px; background: var(--color-primary); opacity: 0.6; } .legal-title { /* Display-weight Fraunces with opsz set high so the variant glyphs render. Tight leading. */ font-family: "Fraunces", Georgia, serif; font-variation-settings: "opsz" 144, "wght" 500; font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.015em; color: var(--text-primary); margin: 0; /* A subtle italic-style swash flourish via font-feature-settings where the font supports it. Fraunces has ss01 (stylistic set 1) enabled at the page level. */ } .legal-byline { margin-top: 1.25rem; font-family: "Newsreader", Georgia, serif; font-size: 0.95rem; color: var(--text-secondary); font-style: italic; font-variation-settings: "opsz" 14; } .legal-byline-org { font-weight: 500; color: var(--text-primary); } .legal-byline-sep { margin: 0 0.5rem; color: var(--text-tertiary); } /* ── Layout grid (prose + TOC sidebar) ── Single-column by default; two-column at ≥ 1024 px with the prose on the left (visual) and the sidebar on the right. DOM order is