/* Crumb static site — privacy, terms, support, landing. Variables embedded from tokens/build/crumb.css (generated by scripts/gen-tokens.py); light `mut` overridden to #736759 per Q123 (design/DECISIONS-Q118-Q130.md — AA contrast fix, #8C7E6C failed AA normal-text on paper). Dark values mirror tokens/build/crumb.css's [data-theme="dark"] block, applied here via prefers-color-scheme since this static site has no in-app toggle — it just follows the system. Only external resource: Google Fonts. */ @import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800;900&family=Saira+Semi+Condensed:wght@400;500;600;700&display=swap'); :root{ --crumb-paper:#F2E7DA; --crumb-cream:#FCF6EC; --crumb-crust:#E9DDCB; --crumb-ink:#2A211B; --crumb-mut:#736759; /* Q123 light-mode AA fix, not tokens' #8C7E6C */ --crumb-line:#E6DAC8; --crumb-terracotta:#B14A2E; --crumb-terracotta-press:#8E3A22; --crumb-amber:#c0892f; --crumb-amber-ink:#7a5a1e; --crumb-amber-tint:rgba(192,137,47,.14); --crumb-amber-border:rgba(192,137,47,.5); --bg:var(--crumb-paper); --surf:var(--crumb-cream); --crust:var(--crumb-crust); --ink:var(--crumb-ink); --mut:var(--crumb-mut); --line:var(--crumb-line); --acc:var(--crumb-terracotta); --acc-press:var(--crumb-terracotta-press); --ff:'Schibsted Grotesk',system-ui,-apple-system,sans-serif; --lf:'Saira Semi Condensed',sans-serif; --r-sheet:24px; --r-card:16px; --r-btn:14px; --r-pill:999px; --r-badge:6px; --sp-gutter:18px; --sh-card:0px 10px 26px rgba(20,16,12,.10); } @media (prefers-color-scheme: dark){ :root{ --crumb-paper:#17130F; --crumb-cream:#221C16; --crumb-crust:#2A231C; --crumb-ink:#F1E6D6; --crumb-mut:#9C9082; --crumb-line:#332B23; --crumb-terracotta:#D8663E; --crumb-terracotta-press:#E8895E; --crumb-amber-tint:rgba(192,137,47,.18); --crumb-amber-ink:#e0b76a; --sh-card:0px 10px 26px rgba(0,0,0,.35); } } *{box-sizing:border-box;min-width:0} html{color-scheme:light dark} body{ margin:0; background:var(--bg); color:var(--ink); font:500 15px/1.6 var(--ff); -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:var(--acc);text-decoration:none} a:hover{color:var(--acc-press);text-decoration:underline} /* ---- DRAFT ribbon: one class on controls it; remove the class to remove the ribbon ---- */ .draft-ribbon{display:none} body.draft .draft-ribbon{ display:block; position:sticky; top:0; z-index:20; background:var(--crumb-amber-tint); border-bottom:1px solid var(--crumb-amber-border); color:var(--crumb-amber-ink); font:700 11px/1.4 var(--lf); letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:9px var(--sp-gutter); } /* ---- shell ---- */ .shell{max-width:900px;margin:0 auto;padding:0 var(--sp-gutter)} header.site-header{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:22px var(--sp-gutter); max-width:900px;margin:0 auto; } .brand{display:flex;align-items:center;gap:10px;color:var(--ink)} .brand:hover{color:var(--ink);text-decoration:none} .brand svg{display:block} .wordmark{font:800 20px/1 var(--ff);letter-spacing:-.04em} .wordmark .dot{color:var(--acc)} nav.site-nav{display:flex;gap:18px;font:700 12.5px/1 var(--ff)} nav.site-nav a{color:var(--mut)} nav.site-nav a:hover{color:var(--acc)} main{max-width:68ch;margin:0 auto;padding:8px var(--sp-gutter) 60px} main.wide{max-width:900px} /* ---- legal-doc typography (mirrors design/legal draft's own inline style, tokenised) ---- */ .ey{font:700 11px/1 var(--lf);letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin:0 0 10px} h1{font:800 30px/1.1 var(--ff);letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)} .updated{font:600 12px/1.5 var(--ff);color:var(--mut);margin:0 0 18px} .meta{font:500 12.5px/1.55 var(--ff);color:var(--mut);margin:0 0 20px} h2{font:800 16px/1.25 var(--ff);letter-spacing:-.01em;margin:30px 0 10px;padding-bottom:7px;border-bottom:2px solid var(--acc);color:var(--ink)} h3{font:700 13.5px/1.35 var(--ff);margin:16px 0 6px;color:var(--ink)} p,li{font:500 13.5px/1.65 var(--ff);margin:0 0 10px;color:var(--ink)} ul{margin:0 0 12px;padding-left:22px} li{margin-bottom:5px} table{width:100%;table-layout:fixed;border-collapse:collapse;font:500 12.5px/1.55 var(--ff);margin:8px 0 16px} th{font:700 10px 'Saira Semi Condensed';letter-spacing:.11em;text-transform:uppercase;color:var(--mut);text-align:left;padding:7px 9px;border-bottom:1px solid var(--line)} td{padding:8px 9px;border-bottom:1px solid var(--line);vertical-align:top;word-wrap:break-word;overflow-wrap:break-word} .tbc{background:var(--crumb-amber-tint);color:var(--crumb-amber-ink);border-radius:4px;padding:1px 6px;font-weight:700} .box{background:var(--surf);border:1px solid var(--line);border-radius:var(--r-sheet);padding:16px 18px;margin:14px 0 18px} .box p{margin:0 0 6px} .box p:last-child{margin-bottom:0} .plain{font:500 14px/1.65 var(--ff);color:var(--mut);font-style:italic;margin:0 0 18px} /* ---- footer ---- */ footer.site-footer{ border-top:1px solid var(--line); margin-top:40px; padding:28px var(--sp-gutter) 40px; max-width:900px;margin-left:auto;margin-right:auto; } .mailboxes{display:flex;flex-wrap:wrap;gap:6px 22px;font:700 12.5px/1.5 var(--ff);margin:0 0 12px} .mailboxes a{color:var(--ink)} .mailboxes a:hover{color:var(--acc)} .foot-links{font:600 12px/1.6 var(--ff);color:var(--mut)} .foot-links a{color:var(--mut)} .foot-links a:hover{color:var(--acc)} /* ---- landing page ---- */ .hero{ min-height:calc(100svh - 0px); display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:18px;padding:60px var(--sp-gutter); } .hero .mark{margin-bottom:6px} .hero .wordmark{font:800 34px/1 var(--ff);letter-spacing:-.04em} .hero p.tagline{font:500 15.5px/1.6 var(--ff);color:var(--mut);max-width:44ch;margin:0} .pill-badge{ display:inline-flex;align-items:center;gap:8px; background:var(--surf);border:1px solid var(--line);border-radius:var(--r-pill); padding:9px 18px;font:700 12px/1 var(--ff);letter-spacing:.01em;color:var(--ink); margin:10px 0 6px; } .pill-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--acc)} .hero-links{display:flex;gap:22px;margin-top:8px;font:700 12.5px/1 var(--ff)} .hero-links a{color:var(--mut)} .hero-links a:hover{color:var(--acc)} /* ---- 404 ---- */ .notfound{ min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:14px;padding:60px var(--sp-gutter); } .notfound h1{font:800 26px/1.2 var(--ff)} .notfound p{color:var(--mut);font:500 14px/1.6 var(--ff);max-width:40ch} @media (max-width:480px){ h1{font-size:25px} .hero .wordmark{font-size:28px} header.site-header{padding:18px var(--sp-gutter)} }