/* ═══════════════════════════════════════════════════════════ LEGAL PAGES (Terms of Service / Privacy Policy) Dark-glass aesthetic matching Help / Hub / Profile / Didactics. Dark: #050d1a canvas, frosted glass panels, cyan #38bdf8 Light: class .profile-light on , #ffffff academic paper ═══════════════════════════════════════════════════════════ */ :root { --legal-canvas: #050d1a; --legal-text: #e2e8f0; --legal-text-muted: rgba(203,231,251,.7); --legal-text-subtle: rgba(203,231,251,.5); --legal-accent: #38bdf8; --legal-accent-dim: #7dd3fc; --legal-glass-bg: rgba(56,189,248,.045); --legal-glass-bd: rgba(125,211,252,.14); --legal-glass-sh: inset 0 1px 1px rgba(199,211,234,.14), inset 0 28px 56px rgba(56,189,248,.05), 0 24px 40px rgba(5,6,15,.5); --legal-nav-bg: rgba(5,13,26,.72); --legal-serif: Charter, "Bitstream Charter", "Source Serif 4", Georgia, "Times New Roman", serif; } .profile-light { --legal-canvas: #ffffff; --legal-mist: #eff1f6; --legal-text: #1f1f1f; --legal-text-muted: #3c4043; --legal-text-subtle: #5f6368; --legal-accent: #0e7490; --legal-accent-dim: #155e75; --legal-glass-bg: #ffffff; --legal-glass-bd: #dadce0; --legal-glass-sh: 0 1px 2px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.05); --legal-nav-bg: #ffffff; } body.legal-page { margin: 0; min-height: 100vh; font-family: 'Outfit', system-ui, sans-serif; color: var(--legal-text); background: radial-gradient(120% 80% at 50% -10%, rgba(56,189,248,.10), transparent 60%), radial-gradient(90% 60% at 85% 110%, rgba(99,102,241,.08), transparent 60%), var(--legal-canvas); transition: background .3s ease, color .3s ease; } html.profile-light body.legal-page { background: var(--legal-canvas); } .legal-atmos { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .legal-orb { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .42; } .legal-orb--1 { width: 50vw; height: 50vw; left: -10vw; top: -8vw; background: radial-gradient(circle, rgba(56,189,248,.38), transparent 68%); } .legal-orb--2 { width: 40vw; height: 40vw; right: -8vw; bottom: -6vw; background: radial-gradient(circle, rgba(99,102,241,.32), transparent 68%); } .legal-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(125,211,252,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(125,211,252,.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 75% at 50% 40%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 40%, #000 20%, transparent 78%); } .profile-light .legal-atmos { display: none; } .legal-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 10px 24px; background: var(--legal-nav-bg); border-bottom: 1px solid var(--legal-glass-bd); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); } .profile-light .legal-header { backdrop-filter: none; -webkit-backdrop-filter: none; } .legal-brand { font-weight: 700; letter-spacing: -.02em; color: #f0f9ff; font-size: 17px; text-decoration: none; } .profile-light .legal-brand { color: var(--legal-text); } .legal-brand .brand-talk { color: #38bdf8; } .profile-light .legal-brand .brand-talk { color: var(--legal-accent); } .legal-brand sup { color: #38bdf8; font-size: .4em; vertical-align: super; } .profile-light .legal-brand sup { color: var(--legal-accent); } .legal-header__actions { display: flex; align-items: center; gap: 8px; } .legal-header-back { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--legal-accent-dim); text-decoration: none; background: var(--legal-glass-bg); border: 1px solid var(--legal-glass-bd); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .2s, box-shadow .2s, transform .2s; } .profile-light .legal-header-back { color: var(--legal-text); background: #ffffff; border-color: var(--legal-glass-bd); border-radius: 10px; backdrop-filter: none; -webkit-backdrop-filter: none; } .legal-header-back:hover { border-color: rgba(125,211,252,.35); transform: translateY(-1px); } .profile-light .legal-header-back:hover { color: var(--legal-accent); border-color: var(--legal-accent); } .legal-theme-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 7px 11px; border-radius: 999px; font-size: 15px; line-height: 1; cursor: pointer; background: var(--legal-glass-bg); border: 1px solid var(--legal-glass-bd); color: var(--legal-text); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .profile-light .legal-theme-toggle { background: #ffffff; border-color: var(--legal-glass-bd); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Standalone page: neutralise the app-shell two-column grid that style.css applies via `body:not(.admin-app):not(.studio) main` (specificity 0,2,2 — beats a bare `.legal-main`). We match that specificity with `body.legal-page main.legal-main` and win on source order (legal.css loads after style.css), restoring single-column document flow. Mirrors the same fix on help.html's `.help-main`. */ body.legal-page main.legal-main { display: block; height: auto; max-width: 780px; margin: 0 auto; padding: 40px 24px 88px; position: relative; z-index: 1; } .legal-main h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 700; margin: 0 0 4px; letter-spacing: -.02em; } .profile-light .legal-main h1 { font-family: var(--legal-serif); font-weight: 600; } .legal-meta { color: var(--legal-text-subtle); font-size: 13px; margin: 0 0 28px; } .legal-glass { background: var(--legal-glass-bg); border: 1px solid var(--legal-glass-bd); border-radius: 16px; backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); box-shadow: var(--legal-glass-sh); padding: 24px 28px; margin-bottom: 18px; } .profile-light .legal-glass { border-radius: 10px; backdrop-filter: none; -webkit-backdrop-filter: none; } .legal-toc__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--legal-text-subtle); margin: 0 0 10px; } .legal-toc ul { margin: 0; padding-left: 20px; columns: 2; column-gap: 24px; list-style: none; } .legal-toc li { font-size: 14px; line-height: 1.9; break-inside: avoid; } .legal-toc a { color: var(--legal-accent-dim); text-decoration: none; } .legal-toc a:hover { text-decoration: underline; } @media (max-width: 560px) { .legal-toc ol { columns: 1; } } .legal-main h2 { font-size: 18px; font-weight: 700; margin: 0 0 12px; letter-spacing: -.01em; color: var(--legal-text); scroll-margin-top: 80px; } .profile-light .legal-main h2 { font-family: var(--legal-serif); font-weight: 600; } .legal-main p { font-size: 15px; line-height: 1.7; color: var(--legal-text-muted); margin: 0 0 12px; } .legal-main p:last-child { margin-bottom: 0; } .legal-main ul { margin: 0 0 12px; padding-left: 20px; } .legal-main ul:last-child { margin-bottom: 0; } .legal-main li { font-size: 15px; line-height: 1.7; color: var(--legal-text-muted); margin-bottom: 8px; } .legal-main li:last-child { margin-bottom: 0; } .legal-main strong { color: var(--legal-text); } .legal-main a { color: var(--legal-accent-dim); }