/* * Legal page chrome (terms / privacy / refund). * ------------------------------------------------------------------------ * Token/base-reset ownership moved to foundry.css (linked before this file * in every legal page's ) — this sheet now holds ONLY what's specific * to the legal-page shell: the family header lockup (a lighter version of * index.html's .site-header-inner, with the mobile hamburger wired up via * the shared /js/nav.js — see the nav-menu/nav-toggle note below), the * prose column, and a slim single-row footer. * * Design call (see task report): legal pages get the slimmer single-row * footer rather than the 4-column .footer-grid — three short policy pages * don't carry enough distinct link groups to justify four columns, and a * full marketing footer under a page of legal prose reads as noise. * ------------------------------------------------------------------------ */ /* Long URLs / emails in prose must wrap rather than force horizontal scroll. Scoped to `main.legal` (the actual wrapper used by privacy/terms/refund pages). */ main.legal a, main.legal p, main.legal li { overflow-wrap: anywhere; } /* ---------------------------------------------------------------------- * * Header (site-header from foundry.css owns the sticky/blur/shadow shell; * this is the page-local inner layout + wordmark lockup, following the * same pattern index.html defines locally rather than centralizing it in * foundry.css) * ---------------------------------------------------------------------- */ .site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; flex-wrap: wrap; } .nav-wordmark { display: flex; flex-direction: column; line-height: 1.2; text-decoration: none; } .nav-wordmark-text { font-size: 1.125rem; font-weight: 700; } .nav-microtag { font-size: .6875rem; font-weight: 400; color: var(--text-tertiary); letter-spacing: .04em; } /* Nav links + mobile hamburger collapse use foundry.css's .nav-menu / .nav-link / .nav-toggle verbatim (same classes + breakpoint index.html uses) — wired up by the shared /js/nav.js (these pages ship no other JS, so they can't reuse landing.js's inline toggle handler). */ /* ---------------------------------------------------------------------- * * Prose column * ---------------------------------------------------------------------- */ main.legal { max-width: 820px; margin: 0 auto; padding: var(--space-13) var(--space-6) var(--space-16); } main.legal h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-2); letter-spacing: -0.01em; } main.legal .last-updated { color: var(--text-tertiary); font-size: .875rem; margin: 0 0 var(--space-10); } main.legal h2 { color: var(--text-primary); font-size: 1.375rem; font-weight: 700; margin: var(--space-10) 0 var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--border); } main.legal h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; } main.legal h3 { color: var(--text-primary); font-size: 1.0625rem; font-weight: 600; margin: var(--space-6) 0 var(--space-2); } main.legal p { margin: 0 0 var(--space-4); font-size: 1rem; color: var(--text-secondary); line-height: 1.7; } main.legal ul, main.legal ol { margin: 0 0 var(--space-4); padding-left: 22px; } main.legal li { margin-bottom: var(--space-2); font-size: 1rem; color: var(--text-secondary); line-height: 1.7; } main.legal strong { color: var(--text-primary); font-weight: 600; } main.legal code { font-family: var(--font-mono); background: var(--bg-tertiary); padding: 2px 6px; border-radius: var(--radius-sm); font-size: .9em; } /* ---------------------------------------------------------------------- * * Footer — slim single row (see design-call note at top of file) * ---------------------------------------------------------------------- */ .legal-footer { padding: var(--space-8) var(--space-6); border-top: 1px solid var(--border); background: var(--bg-secondary); } .legal-footer-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); } .legal-footer-copy { font-size: .875rem; color: var(--text-tertiary); } .legal-footer-copy a { color: var(--accent); } .legal-footer-links { display: flex; gap: var(--space-5); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .legal-footer-links a { color: var(--text-tertiary); font-size: .875rem; text-decoration: none; } .legal-footer-links a:hover { color: var(--accent); } @media (max-width: 640px) { .legal-footer-inner { flex-direction: column; text-align: center; } }