/* ============================================================ shinn.life — shared theme Alas! Design tokens, base reset, scrollbar and the brand-logo system. Loaded by index.html, 404.html and any future page so the look stays consistent in one place. Fonts (Anta + Inter + JetBrains Mono) are linked per-page in . ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* brand */ --brand: #2563eb; --brand-2: #06b6d4; --brand-3: #7c3aed; --accent: #10b981; /* dark theme (default) */ --bg: #121b2d; --bg-soft: #1a2541; --surface: #1e2a49; --surface-2: #273656; --border: rgba(148, 163, 184, 0.16); --border-str: rgba(148, 163, 184, 0.30); --text: #e8eefc; --text-soft: #aab6d0; /* was #828fb2 — only 4.4:1 on --surface, just under AA for body text */ --text-mute: #8b98bb; --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7); --glow: 0 0 0 1px rgba(37, 99, 235, 0.25), 0 22px 50px -20px rgba(37, 99, 235, 0.4); --hero-grid: rgba(148, 163, 184, 0.06); --grid: rgba(148, 163, 184, 0.045); --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* display face for headings only — Anta ships a single 400 weight, so anything using it must set font-weight: 400 or the browser will synthesise a bold */ --font-display: 'Anta', var(--font); --mono: 'JetBrains Mono', ui-monospace, 'Courier New', monospace; --radius: 16px; --maxw: 1080px; } [data-theme="light"] { /* cyan-500 is only 2.4:1 on white — too faint for links, kickers and tags, so light mode drops to cyan-700 (5.0:1) and keeps the same hue */ --brand-2: #0e7490; --bg: #f6f8fc; --bg-soft: #eef2f9; --surface: #ffffff; --surface-2: #f3f6fc; --border: rgba(15, 23, 42, 0.10); --border-str: rgba(15, 23, 42, 0.18); --text: #0f172a; --text-soft: #475569; /* was #8090a8 — only 3.1:1 on the page background, failed AA badly */ --text-mute: #5b6b85; --shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.25); --glow: 0 0 0 1px rgba(37, 99, 235, 0.18), 0 22px 50px -24px rgba(37, 99, 235, 0.3); --hero-grid: rgba(15, 23, 42, 0.05); --grid: rgba(15, 23, 42, 0.035); } html { scroll-behavior: smooth; } /* themed scrollbar */ html { scrollbar-width: thin; scrollbar-color: var(--brand) var(--bg-soft); } ::-webkit-scrollbar { width: 13px; height: 13px; } ::-webkit-scrollbar-track { background: var(--bg-soft); border-left: 1px solid var(--border); } ::-webkit-scrollbar-thumb { border-radius: 999px; background: linear-gradient(var(--brand-3), var(--brand), var(--brand-2)); border: 3px solid var(--bg-soft); background-clip: padding-box; box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 18%, transparent); } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(var(--brand-2), var(--brand), var(--brand-3)); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: var(--bg-soft); } /* ── real-world brand logos ───────────────────────────────────── rendered from an inline sprite via ; kept on a dark chip so brand colours stay legible in both themes */ .tlogo { width: 1em; height: 1em; display: inline-block; fill: currentColor; flex-shrink: 0; } .ci .tlogo { width: 60%; height: 60%; } .ci { background: #0f1729 !important; } .b-docker { color: #2496ED !important; } .b-linux { color: #FCC624 !important; } .b-python { color: #4B8BBE !important; } .b-git { color: #F05032 !important; } .b-github { color: #ffffff !important; } .b-actions { color: #2088FF !important; } .b-jenkins { color: #D33833 !important; } .b-bash { color: #4EAA25 !important; } .b-aws { color: #FF9900 !important; } .b-lf { color: #0094FF !important; } .b-datacamp { color: #03EF62 !important; } .b-coursera { color: #2A73CC !important; } .b-k8s { color: #326CE5 !important; } .b-terraform { color: #844FBA !important; }