/* ========================================================================== * pages/legal.css — privacy / terms / 404 specific layout * * Shared chrome (tokens, base, layout, topbar, nav, brand, footer) comes * from the layered files. This page-level sheet adds: * - .topbar variant (gap-spaced for crumbs instead of space-between) * - reading line-height bump for long-form text * - #theme-toggle base styling (home uses an inline-styled square button) * - legal-only sections: hero, TLDR card, table-of-contents, * article body, callouts, data tables, sign-off, legal footer * - responsive overrides at 900px breakpoint * ========================================================================== */ /* === TopBar variant: crumbs layout (override space-between → gap) === */ .topbar{gap:24px;justify-content:flex-start} /* === Reading rhythm — slightly more leading for long-form === */ /* Q5 (Sally): match legacy legal-styles.css behavior of 1.6 line-height * across the whole legal page (hero, TLDR, callout body — not just the * article body). base.njk emits class="legal-page" on when * pageType=='legal'; the article-scoped rule below is kept as a safety net. */ body.legal-page{line-height:1.6} article.legal{line-height:1.6} /* === Header strip === */ .legal-hero{padding:64px 32px 36px;border-bottom:var(--b-thick);position:relative;overflow:hidden} .legal-hero .stamp{ position:absolute;top:24px;right:32px; font-family:var(--ff-mono);font-size:11px; background:var(--ink);color:var(--paper);padding:6px 10px;border:var(--b); letter-spacing:.06em;transform:rotate(2deg); } [data-theme="dark"] .legal-hero .stamp{background:#0e0d0a;color:#f4ecd8;border-color:#f4ecd8} .legal-hero .eyebrow{font-family:var(--ff-mono);font-size:13px;color:var(--muted);margin-bottom:18px} .legal-hero .eyebrow b{color:var(--ink)} .legal-hero h1{font-size:clamp(40px,7vw,84px);line-height:.95;letter-spacing:-.035em;margin:0 0 16px;font-weight:700} .legal-hero h1 .hl{ background:var(--accent-2);padding:0 .12em;border:var(--b); box-shadow:6px 6px 0 0 var(--ink);display:inline-block;transform:rotate(-1deg);color:var(--ink); } .legal-hero .meta{ display:flex;gap:16px;flex-wrap:wrap;margin-top:18px; font-family:var(--ff-mono);font-size:12px;color:var(--muted); } .legal-hero .meta span b{color:var(--ink);font-weight:500} /* === TLDR card === */ .tldr{ margin:36px 32px 0;background:var(--paper);border:var(--b-thick); box-shadow:8px 8px 0 0 var(--ink);padding:22px 26px; display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start; } .tldr .badge{ font-family:var(--ff-pixel);font-size:34px;line-height:1;background:var(--accent-2); border:var(--b);padding:6px 10px;color:var(--ink);align-self:start; } .tldr h2{margin:0 0 8px;font-size:18px;letter-spacing:-.01em} .tldr p{margin:0;color:var(--muted);font-size:15px} .tldr ul{margin:8px 0 0;padding-left:18px} .tldr ul li{margin:4px 0} /* === Wrap + Table of Contents === */ .legal-wrap{ max-width:1180px;margin:48px auto 64px;padding:0 32px; display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start; } .toc{ position:sticky;top:96px;border:var(--b);background:var(--paper); padding:16px;font-family:var(--ff-mono);font-size:12px; } .toc .toc-h{ font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.08em; margin-bottom:10px;padding-bottom:8px;border-bottom:var(--b); } .toc ol{margin:0;padding:0;list-style:none;counter-reset:tocn} .toc li{counter-increment:tocn;padding:5px 0;border-bottom:1px dashed rgba(14,13,10,.15)} [data-theme="dark"] .toc li{border-bottom-color:rgba(244,236,216,.18)} .toc li:last-child{border-bottom:0} .toc a{color:var(--ink);text-decoration:none;display:flex;gap:8px} .toc a::before{content:counter(tocn,decimal-leading-zero);color:var(--accent);font-weight:700} .toc a:hover{color:var(--accent)} /* === Article body === */ article.legal{max-width:780px} article.legal section{margin-bottom:40px;scroll-margin-top:96px} article.legal h2{font-size:24px;letter-spacing:-.015em;margin:0 0 4px;display:flex;align-items:baseline;gap:14px} article.legal h2 .num{font-family:var(--ff-mono);font-size:14px;color:var(--accent);font-weight:700;flex-shrink:0} article.legal .lead{ color:var(--muted);font-size:14px;font-family:var(--ff-mono); margin:0 0 16px;padding-left:36px; } article.legal p, article.legal li{font-size:15.5px;color:var(--ink)} article.legal p{margin:0 0 14px} article.legal ul{margin:0 0 14px;padding-left:22px} article.legal li{margin:6px 0} article.legal b{font-weight:600} article.legal a{color:var(--accent);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px} article.legal a:hover{background:var(--accent-2);color:var(--ink);text-decoration:none} article.legal code{ font-family:var(--ff-mono);font-size:13.5px;background:rgba(26,58,255,.08); padding:1px 6px;border:1px solid rgba(26,58,255,.25); } [data-theme="dark"] article.legal code{background:rgba(91,120,255,.15);border-color:rgba(91,120,255,.4)} /* === Callout === */ .callout{ margin:18px 0;padding:14px 16px;border:var(--b);background:var(--paper); display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start; } .callout .ic{ font-family:var(--ff-pixel);font-size:22px;background:var(--ink);color:var(--accent-2); width:30px;height:30px;display:grid;place-items:center;border:var(--b); } .callout.warn .ic{background:var(--accent-3);color:var(--paper)} .callout p{margin:0;font-size:14px;line-height:1.5} .callout p b{ display:block;margin-bottom:2px;font-size:13px;letter-spacing:.04em; text-transform:uppercase;font-family:var(--ff-mono); } /* === Data table === */ .dtable{ width:100%;border-collapse:collapse;border:var(--b); margin:14px 0 18px;font-size:14px;background:var(--paper); } .dtable th,.dtable td{border:1.5px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top} .dtable th{ background:var(--ink);color:var(--paper);font-family:var(--ff-mono); font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:500; } [data-theme="dark"] .dtable th{background:#0e0d0a;color:#f4ecd8} .dtable td.k{font-family:var(--ff-mono);font-size:13px;font-weight:500;width:34%} .dtable td.k b{color:var(--ink);font-weight:600} /* === Sign-off === */ .signoff{ margin-top:48px;padding:20px;border:var(--b-thick);background:var(--paper); box-shadow:8px 8px 0 0 var(--accent-3); display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px; } .signoff .who{font-family:var(--ff-mono);font-size:13px} .signoff .who b{display:block;font-size:16px;font-family:var(--ff-sans);letter-spacing:-.01em} .signoff a{ font-family:var(--ff-mono);font-size:13px;background:var(--ink);color:var(--paper); padding:10px 14px;border:var(--b);text-decoration:none; } [data-theme="dark"] .signoff a{background:#0e0d0a;color:#f4ecd8;border-color:#f4ecd8} .signoff a:hover{background:var(--accent-2);color:var(--ink)} /* === Legal footer === */ footer.legal-foot{ padding:24px 32px;background:var(--paper); border-top:var(--b-thick);font-family:var(--ff-mono);font-size:12px;color:var(--muted); display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px; } footer.legal-foot a{color:var(--muted);text-decoration:none} footer.legal-foot a:hover{color:var(--accent)} footer.legal-foot .links{display:flex;gap:16px} /* === Responsive — phone/tablet === */ @media (max-width:900px){ .legal-wrap{grid-template-columns:1fr;gap:24px;margin:32px auto;padding:0 calc(18px + var(--shadow-extent))} .toc{position:static} .legal-hero{padding:48px calc(18px + var(--shadow-extent)) 28px} .legal-hero .stamp{right:18px;top:18px} .tldr{margin:24px calc(18px + var(--shadow-extent)) 0;grid-template-columns:1fr} nav.main{padding:12px calc(18px + var(--shadow-extent))} .topbar{padding:8px calc(18px + var(--shadow-extent));font-size:11px;flex-wrap:wrap} .topbar .crumbs{flex-basis:100%} }