/* Page-type sheet for privacy / terms / support (#44 — legal pages reskin, Direction B). Also linked directly (bypassing BaseLayout) by the chromeless /download splash, which needs the same deep-water backdrop + neutral-aqua pin but no Nav/Footer/panel chrome — see that page. Direction B = dark reading panel lifted off the water. New tokens (scoped here, not global.css): --panel (reading surface) and --read-ink (body copy, brighter than --ink-dim for long reading). Logical CSS properties are used for every horizontal-direction-sensitive rule (padding-inline, margin-inline, border-inline-start, text-align:start) so a future RTL locale is a free flip (spec §239-241) — vertical rules (border-bottom underlines, margin-top rhythm) stay physical, RTL doesn't affect block flow. */ /* ============ deep-water backdrop (lifted verbatim from article.css — pure CSS gradient, no --water-img asset dependency, so there is no missing-image failure mode on these pages) ============ */ .bg{position:fixed;inset:0;z-index:-2;background:radial-gradient(120% 70% at 50% -10%, #11314e 0%, var(--deep) 36%, var(--abyss) 80%)} .rays{position:fixed;inset:0;top:-10%;height:70vh;z-index:-1;pointer-events:none;opacity:.4; background:linear-gradient(174deg, rgba(var(--cyan-bright-rgb),.10), transparent 42%), conic-gradient(from 180deg at 52% -8%, transparent 0deg, rgba(var(--cyan-bright-rgb),.07) 8deg, transparent 16deg, rgba(var(--cyan-bright-rgb),.05) 26deg, transparent 34deg, rgba(var(--cyan-bright-rgb),.08) 44deg, transparent 52deg); -webkit-mask:linear-gradient(to bottom, #000 0%, transparent 86%);mask:linear-gradient(to bottom, #000 0%, transparent 86%)} .caustic{position:fixed;inset:0;top:-6%;height:86vh;z-index:-1;pointer-events:none;opacity:.55;background:radial-gradient(38% 30% at 16% 10%, rgba(var(--cyan-bright-rgb),.09), transparent 62%),radial-gradient(32% 26% at 86% 6%, rgba(var(--cyan-rgb),.07), transparent 60%),radial-gradient(40% 34% at 70% 22%, rgba(233,199,158,.045), transparent 66%);-webkit-mask:linear-gradient(#000,transparent 82%);mask:linear-gradient(#000,transparent 82%)} /* ============ neutral aqua pin (trust surfaces — do not follow the theme picker, spec §84-105) ============ BaseLayout's head snippet writes the --cyan family and --bgf on as an inline style before this sheet loads. Re-declaring the vars on `body` (a descendant element with no matching inline style of its own) gives every element under it — Nav, Footer, the document panel — a freshly cascaded aqua value without needing !important to fight the inline style on . */ body{ --panel:#0f2439; /* reading surface — a touch lighter than --water #0e2840 */ --read-ink:#d3e0ec; /* body text — brighter than --ink-dim for sustained reading */ --cyan:#7fd3ef;--cyan-bright:#aee8fb;--cyan-rgb:127,211,239;--cyan-bright-rgb:174,232,251; } .bg,.rays,.caustic{filter:none} /* ============ document shell (Direction B panel) ============ */ main{padding-block:46px 70px} .doc{ max-width:760px;margin-inline:auto; background: linear-gradient(180deg, rgba(var(--cyan-bright-rgb),.04), transparent 220px), var(--panel); color:var(--read-ink); border:1px solid var(--line); border-radius:22px; padding-inline:clamp(22px,5vw,64px); padding-block:clamp(28px,5vw,60px) clamp(40px,6vw,68px); /* lift off the water: layered shadow + faint top highlight, not a hard border alone */ box-shadow: 0 1px 0 rgba(var(--cyan-bright-rgb),.08) inset, 0 30px 70px -28px rgba(0,0,0,.7), 0 10px 30px -18px rgba(0,0,0,.55); } /* mobile tuning (spec §77-80): brighten the panel ~2% at narrow widths so the hairline lift reads clearly instead of the panel nearly filling the column — chosen over shrinking .wrap's shared horizontal inset, which would also affect Nav/Footer on every other page-type. */ @media(max-width:600px){ .doc{background:linear-gradient(180deg, rgba(var(--cyan-bright-rgb),.06), transparent 180px), #142c42} } .dochead{padding-block-end:22px;margin-block-end:30px;border-block-end:1px solid var(--line)} .dochead h1{font-size:clamp(2rem,4.6vw,2.7rem);line-height:1.12;margin-block-start:14px;color:var(--ink);text-wrap:balance} .dochead .updated,.dochead .subtitle{font-size:.86rem;color:var(--ink-dim);margin-block-start:12px} .dochead .updated{font-variant-numeric:tabular-nums} .doc p{font-size:1.0625rem;line-height:1.74;margin-block-start:14px;color:var(--read-ink);text-wrap:pretty;max-width:66ch} .doc h2{font-size:1.34rem;line-height:1.15;margin-block-start:38px;color:var(--ink);text-wrap:balance} .doc h3{font-family:'Inter',sans-serif;font-weight:600;font-size:1.04rem;margin-block-start:22px;color:var(--ink)} .doc a{color:var(--cyan);border-bottom:1px solid rgba(var(--cyan-rgb),.4);transition:border-color .18s,color .18s} .doc a:hover{color:var(--cyan-bright);border-bottom-color:var(--cyan-bright)} .doc ul{margin-block-start:14px;margin-block-end:0;padding:0;list-style:none;display:grid;gap:10px;max-width:66ch} .doc li{display:flex;gap:12px;font-size:1.0375rem;line-height:1.6;color:var(--read-ink)} .doc li::before{content:"";flex:0 0 6px;height:6px;border-radius:50%;margin-block-start:10px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)} /* "The short version" callout */ .highlight{background:linear-gradient(135deg, rgba(var(--cyan-rgb),.10), rgba(8,22,38,.35));border:1px solid rgba(var(--cyan-rgb),.28);border-inline-start:3px solid var(--cyan);border-radius:14px;padding:20px 22px;margin-block:26px 6px} .highlight strong{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-bright);margin-block-end:8px} .highlight p{margin-block-start:0;font-size:1.02rem;color:var(--ink);max-width:none} .section{scroll-margin-top:88px} .docfoot{margin-block-start:40px;padding-block-start:22px;border-block-start:1px solid var(--line);font-size:.9rem;color:var(--ink-dim)} .docfoot a{color:var(--cyan)} .docfoot p{max-width:none} /* ============ terms — optional sticky ToC rail (≥1000px only, spec §124-128 / §173-179) ============ */ .docgrid{display:grid} .toc{display:none} @media(min-width:1000px){ .docgrid{grid-template-columns:200px minmax(0,760px);column-gap:34px;justify-content:center} .toc{ display:block;position:sticky;top:100px;align-self:start; max-height:calc(100vh - 140px);overflow-y:auto;padding-inline-end:8px; } } .toc__eyebrow{display:block;margin-block-end:14px} .toc__list{display:grid;gap:2px} .toc__list a{display:block;padding-block:7px;padding-inline-start:14px;border-inline-start:2px solid transparent;font-size:.86rem;color:var(--ink-dim);text-align:start;transition:color .18s,border-color .18s} .toc__list a:hover{color:var(--cyan)} .toc__list a.active{color:var(--cyan);border-inline-start-color:var(--cyan)} /* ============ support — mini-page treatment (spec §130-137) ============ */ .contact-card{margin:26px auto 0;max-width:420px;text-align:center;padding:32px 28px;border-radius:18px;border:1px solid var(--line);background:rgba(var(--cyan-rgb),.06)} .contact-card p{margin-block-start:0;color:var(--ink-dim);font-size:.94rem;max-width:none} .contact-card .email{display:inline-block;margin-block-start:10px;font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:1.5rem;color:var(--cyan);border-bottom:2px solid rgba(var(--cyan-rgb),.4);transition:color .18s,border-color .18s} .contact-card .email:hover{color:var(--cyan-bright);border-bottom-color:var(--cyan-bright)} .qa{margin-block-start:14px;display:grid;gap:20px} .qa dt{font-family:'Inter',sans-serif;font-weight:600;font-size:1.02rem;color:var(--ink)} .qa dd{margin:6px 0 0;color:var(--read-ink);font-size:1.0375rem;line-height:1.6;max-width:66ch} .linksrow{margin-block-start:8px;display:flex;gap:22px;flex-wrap:wrap} .linksrow a{color:var(--cyan);font-size:.98rem} /* entrance (reduced-motion guard: only declared inside the no-preference query, so `reduce` users simply never get the animation — no override rule needed) */ @media(prefers-reduced-motion:no-preference){ .doc{animation:legalRise .5s cubic-bezier(.2,.7,.2,1) both} @keyframes legalRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} }