/* theme.css — palettes + base reset + UI primitives for the production site. light = paper, dark = console. Toggle via data-theme on . */ /* ─── Palettes ────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { /* Paper */ --bg: #F2EDE3; --bg-1: #FBF7EE; --bg-2: #ECE5D6; --bg-3: #E5DDCB; --line: #D6CDB6; --line-2: #B8AC8C; --ink: #1A1816; --ink-mute: #6E6A60; --ink-dim: #9C9684; --accent: #1547D6; --accent-ink:#FBF7EE; --accent-2: #BF3F26; --warn: #C0791A; --good: #2F7A4A; --bad: #BF3F26; --shadow: 0 24px 60px -24px rgba(60,40,20,0.25); --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-serif: 'Instrument Serif', 'GT Sectra', Georgia, serif; } [data-theme="dark"] { /* Console */ --bg: #0B0B0E; --bg-1: #111116; --bg-2: #16161D; --bg-3: #1C1C24; --line: #25252F; --line-2: #34343F; --ink: #EDEAE4; --ink-mute: #8A8A93; --ink-dim: #5A5A63; --accent: #C8FF3B; --accent-ink:#0B0B0E; --accent-2: #FF6B47; --warn: #FFB347; --good: #7CE2A1; --bad: #FF6B47; --shadow: 0 30px 80px -20px rgba(0,0,0,0.6); } /* ─── Base ────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: 'ss01', 'cv11'; line-height: 1.5; } html { transition: background-color 0.18s ease, color 0.18s ease; } body { min-height: 100vh; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; } input, textarea { font: inherit; color: inherit; background: none; border: 0; outline: 0; } h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.05; color: var(--ink); } img, svg { display: block; max-width: 100%; } ::selection { background: var(--accent); color: var(--accent-ink); } .mono { font-family: var(--font-mono); } .serif { font-family: var(--font-serif); } /* ─── Layout primitives ────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 32px; } .wrap-narrow { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 32px; } @media (max-width: 720px) { .wrap, .wrap-narrow { padding: 0 20px; } } section { padding: 96px 0; border-top: 1px solid var(--line); } section:first-of-type { border-top: 0; } @media (max-width: 720px) { section { padding: 64px 0; } } /* ─── Logo ────────────────────────────────────────────────────────────── */ .sw-logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; letter-spacing: -0.01em; color: var(--ink); } .sw-logo-mark { display: inline-block; width: 14px; height: 14px; border: 1.5px solid var(--ink); border-radius: 2px; position: relative; } .sw-logo-mark::after { content: ''; position: absolute; inset: 2px; background: var(--accent); border-radius: 1px; } .sw-logo strong { font-weight: 600; } .sw-logo span.dim { color: var(--ink-mute); } /* ─── Buttons ────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; border-radius: 4px; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); white-space: nowrap; transition: filter 0.15s ease, transform 0.05s ease; } .btn:hover { filter: brightness(1.05); } .btn:active { transform: translateY(1px); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-2); } .btn-ghost:hover { background: var(--bg-1); filter: none; } .btn-sm { height: 28px; padding: 0 10px; font-size: 11.5px; } .btn-lg { height: 48px; padding: 0 24px; font-size: 14px; } .btn-block { width: 100%; } /* ─── Badges ─────────────────────────────────────────────────────────── */ .b { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 10.5px; line-height: 1; padding: 3px 6px; border-radius: 3px; background: var(--bg-2); color: var(--ink-mute); border: 1px solid var(--line); } .b-accent { background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 35%, transparent); } .b-good { color: var(--good); border-color: color-mix(in oklab, var(--good) 30%, transparent); } .b-warn { color: var(--warn); border-color: color-mix(in oklab, var(--warn) 30%, transparent); } .b-bad { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 30%, transparent); } .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .kbd { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--bg-2); color: var(--ink-mute); border: 1px solid var(--line); } /* ─── Tables ─────────────────────────────────────────────────────────── */ .tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); } .tbl th, .tbl td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; } .tbl th { font-weight: 500; color: var(--ink-mute); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; background: var(--bg-1); } .tbl tr:last-child td { border-bottom: 0; } .tbl tbody tr:hover td { background: var(--bg-1); } /* ─── Forms ──────────────────────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.08em; display: flex; justify-content: space-between; align-items: center; } .input { padding: 12px 14px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--bg-1); color: var(--ink); font-size: 14px; transition: border-color 0.12s ease; } .input:focus { border-color: var(--accent); } .input::placeholder { color: var(--ink-dim); } /* ─── Nav + footer ────────────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: saturate(140%) blur(8px); -webkit-backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line); } .nav-inner { max-width: 1180px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; gap: 24px; } .nav-links { display: flex; align-items: center; gap: 24px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-mute); } .nav-links a:hover { color: var(--ink); } .nav-spacer { flex: 1; } @media (max-width: 720px) { .nav-inner { padding: 14px 20px; gap: 12px; } .nav-links { display: none; } } .foot { border-top: 1px solid var(--line); padding: 28px 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-dim); } .foot-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .foot a:hover { color: var(--ink); } /* ─── Theme toggle ────────────────────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--ink-mute); transition: background 0.15s, color 0.15s, border-color 0.15s; } .theme-toggle:hover { background: var(--bg-1); color: var(--ink); border-color: var(--line-2); } .theme-toggle svg { width: 14px; height: 14px; } [data-theme="light"] .theme-toggle-sun { display: block; } [data-theme="light"] .theme-toggle-moon { display: none; } [data-theme="dark"] .theme-toggle-sun { display: none; } [data-theme="dark"] .theme-toggle-moon { display: block; } /* ─── Cards / misc ────────────────────────────────────────────────────── */ .card { border: 1px solid var(--line); border-radius: 8px; background: var(--bg-1); } .grid-bg { background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 32px 32px; } /* ─── Typography helpers ─────────────────────────────────────────────────── */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.12em; } .eyebrow .eyebrow-line { width: 24px; height: 1px; background: var(--line-2); } .eyebrow .eyebrow-n { color: var(--accent); } .muted { color: var(--ink-mute); } .dim { color: var(--ink-dim); } .accent { color: var(--accent); } /* hide scrollbars where appropriate */ .no-scrollbar { scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; }