/* ========================================================================= NOVA Labs — legal document shell (privacy.html, terms.html) Editorial-gold document chrome per DESIGN-DOCTRINE.md. Consumes the token contract from /css/tokens.css directly — no local :root duplicates. Type via /css/fonts.css (Fraunces headings, Geist body, JBM stamps). Load order in : fonts.css → legal.css → tokens.css (tokens last so the shared a11y/interaction grammar wins ties). ========================================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } html { color-scheme: dark; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 1.0625rem; /* 17px — doctrine §3 body */ line-height: 1.6; color: var(--text-body); background: var(--surface-0); -webkit-font-smoothing: antialiased; } /* Subtle editorial gold wash, fixed behind content — mirrors proof.html. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient( ellipse 80% 50% at 50% -10%, var(--gold-tint) 0%, transparent 60% ), var(--surface-0); pointer-events: none; } ::selection { background: var(--gold-tint); color: var(--text-display); } /* ---- A11y: skip link ---- */ .skip-link { position: absolute; top: -100%; left: 16px; background: var(--gold); color: #0a0a0b; padding: 8px 16px; border-radius: 8px; z-index: 1000; font-size: 14px; font-weight: 600; text-decoration: none; } .skip-link:focus { top: 8px; } /* ---- Links — gold, ≥500 weight (doctrine §4), designed hover ---- */ a { color: var(--gold); font-weight: 500; text-decoration: none; transition: color var(--motion-fast) var(--ease-out); } a:hover { color: var(--gold-bright); } main a { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; transition: color var(--motion-fast) var(--ease-out), text-decoration-color var(--motion-fast) var(--ease-out); } main a:hover { text-decoration-color: var(--gold-bright); } /* ---- Top bar (minimal, standalone — mirrors proof.html) ---- */ header.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 980px; margin: 0 auto; padding: 20px 24px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--text-display); letter-spacing: 0.2px; text-decoration: none; } .brand:hover { color: var(--text-display); } .brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 16px var(--gold-glow); /* the page's single glow */ } .brand small { font-family: var(--font-body); font-weight: 500; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.5px; } .bar-back { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--text-muted); min-height: var(--tap-min); display: inline-flex; align-items: center; padding: 0 10px; } .bar-back:hover { color: var(--gold); } /* ---- Document layout — 70ch editorial measure ---- */ main { max-width: calc(70ch + 48px); margin: 0 auto; padding: 40px 24px 96px; } /* Document masthead */ h1 { font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: "opsz" 144; font-weight: 600; font-size: clamp(2.4rem, 6vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--text-display); margin-bottom: 14px; } .meta { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; color: var(--text-muted); padding-bottom: 28px; margin-bottom: 40px; border-bottom: 1px solid var(--rule); } /* Section heads — Fraunces at text optical size */ h2 { font-family: var(--font-display); font-optical-sizing: auto; font-variation-settings: "opsz" 72; font-weight: 600; font-size: clamp(1.35rem, 2.6vw, 1.55rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--text-display); margin: 3rem 0 0.9rem; padding-top: 2rem; border-top: 1px solid var(--rule-soft); } /* First section directly after the masthead: the meta rule already separates it — don't double the hairline (terms.html case). */ .meta + h2 { border-top: 0; padding-top: 0; margin-top: 2.5rem; } p { margin-bottom: 1rem; max-width: 70ch; } strong { font-weight: 600; color: var(--text-display); } ul { padding-left: 1.35rem; margin-bottom: 1rem; max-width: 70ch; } li { margin-bottom: 0.45rem; } li::marker { color: var(--gold-deep); } /* "See also" cross-reference block */ .doc-refer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule-soft); font-size: 0.9rem; color: var(--text-muted); } /* ---- Footer (mirrors proof.html shell) ---- */ footer { max-width: calc(70ch + 48px); margin: 8px auto 0; padding: 0 24px 56px; border-top: 1px solid var(--rule-soft); } .foot-inner { padding-top: 28px; display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; } .brand--foot { font-size: 16px; } .foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; } .foot-links a { color: var(--text-muted); min-height: var(--tap-min); display: inline-flex; align-items: center; } .foot-links a:hover { color: var(--gold); } .foot-legal { margin-top: 16px; /* 14px, not proof.html's 13px — doctrine §4 floors gold text at 14px, and this line carries gold links. */ font-size: 14px; line-height: 1.6; color: var(--text-muted); max-width: 70ch; } .foot-legal a { color: var(--gold-deep); } .foot-legal a:hover { color: var(--gold-bright); } /* ---- 390px correctness ---- */ @media (max-width: 480px) { header.bar { padding: 16px 20px; } main { padding: 28px 20px 72px; } footer { padding: 0 20px 48px; } h2 { margin-top: 2.4rem; padding-top: 1.6rem; } }