/* Base design language for every TypeCrt page outside the app itself: /privacy, /terms, /security, /license, /about, /docs and the blog. Kept in one file so those pages cannot drift apart. Editorial extras (bylines, tables of contents, post cards, CTAs) live in article.css, which layers on top of this and never redefines what is here. Type follows Apple's sizing discipline: tracking tightens as size grows (large display text reads too loose otherwise) while leading loosens as size shrinks. Spacing is in rem/em so the layout scales with the reader's own text size setting instead of breaking against it. */ /* These pages follow whatever theme the reader picked in the app. Each token defers to the app's own CSS variable, which the inline snippet in every page's restores from localStorage before first paint; the hex after the comma is the fallback for a first-time visitor who has never chosen one. Previously these pages were hard-wired to Catppuccin, so picking a theme in the app and then opening /docs or /privacy threw you back to purple. */ :root { --bg: var(--bg-color, #1e1e2e); --surface: var(--sub-alt-color, #252536); --surface-2: var(--sub-alt-color, #1a1a28); --text: var(--text-color, #cdd6f4); --sub: var(--sub-readable, #6c7086); --main: var(--main-readable, #cba6f7); --accent: var(--caret-color, #94e2d5); --warn: var(--error-color, #f9e2af); --line: rgba(128, 128, 128, 0.22); } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); font: 100%/1.65 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; min-height: 100vh; -webkit-font-smoothing: antialiased; } a { color: var(--main); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Translucent chrome — content scrolls beneath rather than being clipped by an opaque strip. Solid fallback under prefers-reduced-transparency. */ .bar { position: sticky; top: 0; z-index: 10; background: rgba(30, 30, 46, 0.72); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--line); } .bar-inner { max-width: 46rem; margin: 0 auto; padding: 0.85rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; } .bar-back { color: var(--sub); } .bar-back:hover { color: var(--main); text-decoration: none; } .bar-here { color: var(--sub); } .wrap { max-width: 46rem; margin: 0 auto; padding: 3.5rem 1.5rem 5rem; } h1 { font-size: clamp(2rem, 5.5vw, 2.9rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 0.5rem; } .lede { font-size: 1.05rem; line-height: 1.6; letter-spacing: -0.005em; opacity: 0.72; margin-bottom: 0.9rem; max-width: 34rem; } .stamp { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--sub); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 2.75rem; } h2 { font-size: 1.3rem; font-weight: 650; line-height: 1.25; letter-spacing: -0.012em; margin: 3rem 0 0.9rem; } h3 { font-size: 0.95rem; font-weight: 600; color: var(--accent); margin: 1.75rem 0 0.5rem; } p { margin-bottom: 1rem; opacity: 0.88; } /* Answers the question most readers actually arrived with, before the prose. */ .summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.7rem; margin: 0 0 1rem; } .fact { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem; } .fact-k { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sub); margin-bottom: 0.3rem; } .fact-v { font-size: 1.02rem; font-weight: 650; letter-spacing: -0.01em; } /* .yes highlights a reassuring answer; .no is the deliberate neutral, so a negative fact reads as plain rather than as a warning. Colour never carries the meaning on its own here — the value text always states it. */ .fact-v.yes { color: var(--accent); } .fact-v.no { color: var(--text); } .callout { background: var(--surface); border-left: 3px solid var(--accent); border-radius: 10px; padding: 1rem 1.15rem; margin: 1.4rem 0; font-size: 0.94rem; } .callout.warn { border-left-color: var(--warn); } .callout p:last-child { margin-bottom: 0; } ul { list-style: none; margin: 0 0 1.35rem; } li { position: relative; padding-left: 1.4rem; margin-bottom: 0.6rem; opacity: 0.88; } li::before { content: ''; position: absolute; left: 0.32rem; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--main); opacity: 0.65; } .scroll-x { overflow-x: auto; margin: 1.35rem 0; border-radius: 12px; border: 1px solid var(--line); } table { width: 100%; border-collapse: collapse; font-size: 0.87rem; min-width: 30rem; } thead th { text-align: left; padding: 0.7rem 0.95rem; background: var(--surface-2); font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sub); font-weight: 500; border-bottom: 1px solid var(--line); } td { padding: 0.7rem 0.95rem; border-bottom: 1px solid var(--line); opacity: 0.88; vertical-align: top; } tbody tr:last-child td { border-bottom: none; } code { font-family: 'JetBrains Mono', monospace; font-size: 0.86em; background: rgba(0, 0, 0, 0.28); padding: 0.1em 0.38em; border-radius: 4px; color: var(--accent); } /* Dense legal clauses: numbered, quieter than body prose, still scannable. */ .clause { margin-bottom: 1.75rem; } .clause-n { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; color: var(--sub); letter-spacing: 0.1em; display: block; margin-bottom: 0.25rem; } .legalese { font-size: 0.84rem; line-height: 1.7; opacity: 0.66; letter-spacing: 0.004em; } .foot { margin-top: 4rem; padding-top: 1.75rem; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--sub); display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-family: 'JetBrains Mono', monospace; } @media (prefers-reduced-transparency: reduce) { .bar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-contrast: more) { .fact, .callout, .scroll-x { border-color: rgba(255, 255, 255, 0.32); } p, li, td, .legalese { opacity: 1; } } @media (max-width: 34rem) { .wrap { padding: 2.5rem 1.15rem 3.5rem; } }