/* ========================================================= stdout.chat — shared design system Used by: index, privacy, terms, updates, support ========================================================= */ :root{ --bg: #07090a; --bg-2: #0c100e; --bg-3: #0f1411; --line: #1c2a22; --line-2: #2a3d32; --text: #d8f0de; --text-2: #a8c4ae; --text-dim: #7d9689; --accent: #00ff7a; --accent-glow: rgba(0,255,122,0.35); --accent-soft: rgba(0,255,122,0.12); --amber: #ffb454; --red: #ff5a5a; --grade-s: #ffd24a; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --sans: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } /* Theme variants applied via [data-theme=…] on — kept as fallback styling even though the in-page swatch toggles are no longer mounted. */ html[data-theme="amber"] { --accent:#ffb454; --accent-glow: rgba(255,180,84,.35); --accent-soft: rgba(255,180,84,.12); --text:#f0e3cf; --text-2:#cbb89a; --text-dim:#8a7c63; } html[data-theme="red"] { --accent:#ff5a5a; --accent-glow: rgba(255,90,90,.35); --accent-soft: rgba(255,90,90,.12); --text:#ffdada; --text-2:#d4a8a8; --text-dim:#8a6868; } html[data-theme="matrix"] { --accent:#00ff66; --accent-glow: rgba(0,255,102,.35); --accent-soft: rgba(0,255,102,.12); --text:#d4ffe2; --text-2:#9bd6ad; --bg:#040806; --bg-2:#070d0a; --bg-3:#0a1310; } html[data-theme="white"] { --accent:#f5f5f5; --accent-glow: rgba(240,240,240,.28); --accent-soft: rgba(240,240,240,.08); --text:#e8e8e8; --text-2:#a8a8a8; --text-dim:#6e6e6e; --bg:#0a0a0a; --bg-2:#101010; --bg-3:#161616; --line:#2a2a2a; --line-2:#3a3a3a; } html[data-theme="blue"] { --accent:#4ad6ff; --accent-glow: rgba(74,214,255,.35); --accent-soft: rgba(74,214,255,.12); --text:#d4eeff; --text-2:#9bc1d6; --text-dim:#5d7a8a; --bg:#050a14; --bg-2:#081222; --bg-3:#0a1830; } /* ========================================================= Reset ========================================================= */ *{ box-sizing:border-box; } html, body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased; } /* Offset anchor jumps so section tops aren't hidden under the sticky topbar */ html{ scroll-padding-top:88px; } body{ background: radial-gradient(1200px 600px at 80% -10%, var(--accent-soft), transparent 60%), radial-gradient(900px 500px at -10% 30%, var(--accent-soft), transparent 60%), var(--bg); background-attachment: fixed; min-height:100vh; overflow-x:hidden; } html[data-theme="white"] body{ background: radial-gradient(1200px 600px at 80% -10%, rgba(255,255,255,.04), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(255,255,255,.03), transparent 60%), var(--bg); } /* Subtle scanlines for terminal themes (not white) */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:1; background: repeating-linear-gradient(180deg, rgba(255,255,255,0) 0 2px, rgba(255,255,255,0.012) 2px 3px); mix-blend-mode: overlay; } html[data-theme="white"] body::before{ display:none; } /* ========================================================= Typography helpers ========================================================= */ a{ color:inherit; text-decoration:none; transition: opacity .15s ease; } a:hover{ opacity:.7; } a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; } /* Skip-to-content */ .skip-link{ position:fixed; top:-100%; left:16px; z-index:100; padding:8px 16px; background:var(--accent); color:var(--bg); font-family:var(--mono); font-size:13px; font-weight:600; border-radius:0 0 6px 6px; text-decoration:none; opacity:1; } .skip-link:focus{ top:0; } .mono{ font-family:var(--mono); } .accent{ color:var(--accent); } .dim{ color:var(--text-dim); } /* ========================================================= Layout containers ========================================================= */ .wrap{ max-width:1320px; margin:0 auto; padding:0 32px; position:relative; z-index:2; } .wrap-narrow{ max-width:1080px; margin:0 auto; padding:0 32px; position:relative; z-index:2; } /* ========================================================= Top bar (header) ========================================================= */ /* Full-width sticky bar; lives directly under so its containing block is the whole page (not a single .wrap) — keeps it stuck across all sections. */ .topbar{ position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line); background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } /* Inner wrapper carries the original .wrap centering + the bar's flex layout, so brand/nav/cta alignment is unchanged. */ .topbar-inner{ max-width:1320px; margin:0 auto; padding:22px 32px; display:flex; align-items:center; justify-content:space-between; font-family:var(--mono); font-size:14px; } .brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.01em; color:var(--text); } .brand:hover{ opacity:1; } .brand .dot{ width:10px; height:10px; background:var(--accent); border-radius:2px; box-shadow:0 0 12px var(--accent-glow); animation: blink 1.2s steps(1) infinite; } .brand:hover .dot{ animation: none; } @keyframes blink{ 50%{ opacity:.25; } } .top-nav{ display:flex; gap:28px; color:var(--text-dim); } .top-nav a{ color:inherit; } .top-nav a:hover{ color:var(--text); opacity:1; } .top-nav a.active{ color:var(--accent); } .top-cta{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border:1px solid var(--accent); color:var(--accent); border-radius:999px; font-weight:600; transition: background .15s ease, color .15s ease, opacity .15s ease; } .top-cta:hover{ background:var(--accent); color:var(--bg); opacity:1; } /* ========================================================= Sub-page header (privacy/terms/updates/support) ========================================================= */ .page-head{ padding: 80px 0 60px; border-bottom: 1px solid var(--line); } .page-eyebrow{ font-family:var(--mono); font-size:14px; color:var(--accent); letter-spacing:.06em; margin-bottom: 18px; } .page-title{ font-family:var(--sans); font-weight:800; font-size: clamp(56px, 8vw, 104px); letter-spacing:-.035em; line-height:.92; margin: 0 0 28px; text-wrap: balance; } .page-title em{ font-style:italic; font-weight:500; color:var(--text-dim); } .page-title .green{ color:var(--accent); } .page-sub{ font-size:20px; color:var(--text-2); max-width: 720px; line-height: 1.5; margin: 0; text-wrap: pretty; } .page-meta{ margin-top: 36px; display:flex; flex-wrap:wrap; gap: 24px 36px; font-family:var(--mono); font-size:13px; color:var(--text-dim); border-top:1px dashed var(--line-2); padding-top: 24px; } .page-meta b{ color:var(--text); font-weight:600; } .page-meta code{ font-family:var(--mono); background: var(--accent-soft); color: var(--accent); padding: 2px 8px; border-radius: 4px; font-size:12px; } /* ========================================================= Footer ========================================================= */ footer{ border-top:1px solid var(--line); padding: 48px 0 40px; font-family:var(--mono); font-size:13px; color:var(--text-dim); margin-top: 80px; } .foot-row{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; } .foot-row a{ color:inherit; } .foot-row a:hover{ color:var(--text); opacity:1; } .foot-row .links{ display:flex; gap:24px; flex-wrap:wrap; } .foot-row .who{ display:flex; align-items:center; gap:10px; } .foot-row .who .dot{ width:7px; height:7px; background:var(--accent); border-radius:50%; } /* ========================================================= Legal pages shared (privacy / terms) ========================================================= */ .legal{ display:grid; grid-template-columns: 280px 1fr; gap: 80px; padding: 64px 0 80px; align-items:start; } .toc{ position: sticky; top: 32px; font-family: var(--mono); font-size: 13px; max-height: calc(100vh - 64px); overflow-y:auto; padding-right: 8px; } .toc-label{ color: var(--accent); letter-spacing:.06em; margin-bottom: 18px; font-weight: 600; } .toc ol{ margin:0; padding:0; list-style:none; counter-reset: tocn; } .toc li{ counter-increment: tocn; margin: 0; } .toc a{ display: flex; gap: 12px; padding: 8px 0; color: var(--text-dim); border-bottom: 1px dashed var(--line); font-size: 13px; line-height:1.4; } .toc a::before{ content: counter(tocn, decimal-leading-zero); color: var(--accent); opacity:.6; flex-shrink:0; } .toc a:hover, .toc a.active{ color: var(--text); opacity:1; } .toc a:hover{ background: var(--accent-soft); padding-left: 8px; margin-left:-8px; } .doc{ font-size: 17px; line-height: 1.65; max-width: 780px; } .doc > p:first-of-type{ font-size: 19px; color: var(--text); } .doc p{ color: var(--text-2); margin: 0 0 22px; } .doc h2{ font-family: var(--sans); font-weight: 700; font-size: 40px; letter-spacing:-.025em; line-height:1.1; margin: 80px 0 28px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--text); scroll-margin-top: 24px; } .doc h2 .n{ font-family: var(--mono); font-size: 13px; color: var(--accent); display: block; font-weight: 600; letter-spacing: .08em; margin-bottom: 10px; } .doc h3{ font-family: var(--sans); font-weight: 600; font-size: 22px; letter-spacing: -.015em; margin: 36px 0 14px; color: var(--text); } .doc h3::before{ content: "// "; font-family: var(--mono); color: var(--accent); opacity:.7; font-weight: 500; } .doc ul, .doc ol{ margin: 0 0 24px; padding-left: 20px; color: var(--text-2); } .doc li{ margin: 8px 0; } .doc li::marker{ color: var(--accent); } .doc strong, .doc b{ color: var(--text); font-weight:600; } .doc code{ font-family: var(--mono); background: var(--accent-soft); color: var(--accent); padding: 2px 8px; border-radius: 4px; font-size: 14px; } .doc a{ border-bottom: 1px dashed currentColor; padding-bottom:1px; } .doc a:hover{ opacity: 0.8; } .doc .callout{ background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 20px 24px; margin: 28px 0; font-size: 16px; } .doc .callout strong{ color: var(--accent); } .doc .callout.warn{ border-left-color: var(--red); } .doc .callout.warn strong{ color: var(--red); } /* ========================================================= Responsive base ========================================================= */ @media (max-width: 900px){ .top-nav{ display:none; } .wrap{ padding: 0 18px; } .wrap-narrow{ padding: 0 18px; } .page-head{ padding: 50px 0 40px; } .legal{ grid-template-columns: 1fr; gap: 32px; padding: 40px 0 60px; } .toc{ position: static; max-height: none; padding-right:0; } .toc ol{ columns: 2; column-gap: 16px; } .doc h2{ font-size: 32px; margin: 56px 0 24px; } }