/* ========================================================================== Blog theme — the single source of truth for how every page looks. Design language: modern developer/technical (Vercel / Linear flavour) — dark by default, crisp sans, tight bold headings, an electric blue→violet accent, sharp-ish corners, animated hero backgrounds. Theming model: - Dark is the default (`:root` = dark, also `[data-theme="dark"]`). - Light is an override under `[data-theme="light"]`. - A no-flash inline script in each page's sets the theme from localStorage before first paint; theme.js injects the nav toggle. Rules: - All shared styling lives here. Posts must not redefine these classes. - Colors come from tokens (`var(--…)`). Inline SVG diagrams also use tokens so they flip with the theme. ========================================================================== */ /* ---- dark theme (default) ---- */ :root, [data-theme="dark"]{ --bg:#0a0a0d; --bg-soft:#131319; --card:#16161d; --ink:#f4f4f7; --body:#b6b6c2; --muted:#7c7c8c; --line:#26262f; --accent:#6e8bff; --accent-2:#b07cff; --accent-soft:rgba(110,139,255,.14); --red:#ff6b6b; --red-soft:rgba(255,107,107,.13); --amber:#fbbf5a; --amber-soft:rgba(251,191,90,.13); --green:#4ade80; --green-soft:rgba(74,222,128,.13); --indigo:#b07cff; --indigo-soft:rgba(176,124,255,.15); --nav-bg:rgba(10,10,13,.72); --selection:rgba(110,139,255,.28); --grid:rgba(255,255,255,.045); /* syntax */ --syn-cm:#6b7280; --syn-kw:#c792ea; --syn-str:#7ee787; --syn-fn:#79c0ff; --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 38px rgba(0,0,0,.5); --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 4px 14px rgba(0,0,0,.4); } /* ---- light theme ---- */ [data-theme="light"]{ --bg:#ffffff; --bg-soft:#f6f6f9; --card:#ffffff; --ink:#0b0b12; --body:#41414c; --muted:#6b6b78; --line:#e7e7ec; --accent:#4f46e5; --accent-2:#7c3aed; --accent-soft:rgba(79,70,229,.10); --red:#dc2626; --red-soft:rgba(220,38,38,.08); --amber:#b45309; --amber-soft:rgba(180,83,9,.09); --green:#15803d; --green-soft:rgba(21,128,61,.09); --indigo:#7c3aed; --indigo-soft:rgba(124,58,237,.10); --nav-bg:rgba(255,255,255,.72); --selection:rgba(79,70,229,.14); --grid:rgba(0,0,0,.05); --syn-cm:#8e8e93; --syn-kw:#ad3da4; --syn-str:#1d7d35; --syn-fn:#0f68a0; --shadow:0 1px 3px rgba(10,10,20,.06),0 14px 38px rgba(10,10,20,.10); --shadow-sm:0 1px 2px rgba(10,10,20,.05),0 4px 14px rgba(10,10,20,.07); } :root{ --sans:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --mono:'JetBrains Mono','SF Mono',ui-monospace,'Cascadia Code',Consolas,monospace; } /* ---------- base ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--body);font-family:var(--sans);line-height:1.65;font-size:17px;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .3s ease,color .3s ease} ::selection{background:var(--selection)} .wrap{max-width:720px;margin:0 auto;padding:0 24px} .wrap-wide{max-width:880px;margin:0 auto;padding:0 24px} /* ---------- site navigation (injected by theme.js) ---------- */ .site-nav{position:sticky;top:0;z-index:100;background:var(--nav-bg);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid var(--line)} .site-nav .bar{max-width:880px;margin:0 auto;padding:0 24px;height:56px;display:flex;align-items:center;justify-content:space-between} .site-nav .brand{font-weight:750;color:var(--ink);text-decoration:none;font-size:.98rem;letter-spacing:-.02em;display:inline-flex;align-items:center;gap:9px} .site-nav .brand .dot{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 0 12px var(--accent)} .site-nav .links{display:flex;align-items:center;gap:4px} .site-nav .links a{color:var(--muted);text-decoration:none;font-size:.9rem;padding:7px 12px;border-radius:8px;transition:color .2s,background .2s} .site-nav .links a:hover,.site-nav .links a.active{color:var(--ink);background:var(--bg-soft)} .theme-toggle{margin-left:8px;width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--muted);display:inline-grid;place-items:center;cursor:pointer;transition:color .2s,border-color .2s,background .2s,transform .2s} .theme-toggle:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)} .theme-toggle:active{transform:scale(.92)} .theme-toggle svg{display:block} /* ---------- hero ---------- */ header{position:relative;overflow:hidden;background:var(--bg-soft);padding:96px 0 84px;text-align:center;border-bottom:1px solid var(--line)} header .wrap,header .wrap-wide{position:relative;z-index:2} header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(to bottom,transparent,var(--bg-soft));z-index:1;pointer-events:none} .kicker{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding:6px 15px;border-radius:999px;margin-bottom:24px;animation:fadeUp .7s ease both} h1{font-size:clamp(2.3rem,5.6vw,3.7rem);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:var(--ink);animation:fadeUp .7s .12s ease both} h1 .hl{background:linear-gradient(100deg,var(--accent) 10%,var(--accent-2) 90%);-webkit-background-clip:text;background-clip:text;color:transparent} .sub{max-width:600px;margin:20px auto 0;color:var(--muted);font-size:1.12rem;line-height:1.55;animation:fadeUp .7s .24s ease both} .post-meta{margin-top:18px;color:var(--muted);font-size:.86rem;letter-spacing:.01em;animation:fadeUp .7s .32s ease both} @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} /* ---------- hero background system (topic-aware, animated) ---------- */ /* Add one of these as the first child of
: Variants: hb-aurora (brand/general), hb-flow (pipelines/AI/automation — pair with an inline …), hb-grid (systems/infra), hb-orbs (personal/lighter topics). */ .hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden} .hero-bg .blob{position:absolute;border-radius:50%;filter:blur(70px)} /* aurora — drifting gradient blobs */ .hb-aurora::before,.hb-aurora::after{content:"";position:absolute;border-radius:50%;filter:blur(72px)} .hb-aurora::before{width:540px;height:540px;left:-6%;top:-46%;background:radial-gradient(circle,var(--accent),transparent 62%);opacity:.5;animation:drift1 20s ease-in-out infinite} .hb-aurora::after{width:500px;height:500px;right:-4%;top:-54%;background:radial-gradient(circle,var(--accent-2),transparent 62%);opacity:.42;animation:drift2 24s ease-in-out infinite} .hb-aurora .blob{width:420px;height:420px;left:38%;top:-34%;background:radial-gradient(circle,var(--green),transparent 62%);opacity:.16;animation:drift3 28s ease-in-out infinite} /* flow — dot grid + accent glow + inline node network (svg.net) */ .hb-flow{background-image:radial-gradient(var(--grid) 1px,transparent 1px);background-size:24px 24px;background-position:center top} .hb-flow::before,.hb-flow::after{content:"";position:absolute;border-radius:50%;filter:blur(70px)} .hb-flow::before{width:460px;height:460px;left:-6%;top:-48%;background:radial-gradient(circle,var(--accent),transparent 60%);opacity:.4;animation:drift1 22s ease-in-out infinite} .hb-flow::after{width:420px;height:420px;right:-4%;top:-56%;background:radial-gradient(circle,var(--accent-2),transparent 60%);opacity:.34;animation:drift2 26s ease-in-out infinite} .hero-bg .net{position:absolute;inset:0;width:100%;height:100%} .hero-bg .net .node{fill:var(--accent)} .hero-bg .net .node.v{fill:var(--accent-2)} .hero-bg .net .edge{stroke:var(--accent);stroke-opacity:.32;stroke-width:1.2} /* grid — perspective-less faded grid with a slow sheen */ .hb-grid{background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000 40%,transparent 78%);mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000 40%,transparent 78%)} .hb-grid::before{content:"";position:absolute;width:600px;height:360px;left:50%;top:-30%;transform:translateX(-50%);border-radius:50%;filter:blur(80px);background:radial-gradient(circle,var(--accent),transparent 62%);opacity:.34;animation:drift3 24s ease-in-out infinite} /* orbs — soft floating orbs */ .hb-orbs .blob:nth-child(1){width:340px;height:340px;left:8%;top:-30%;background:radial-gradient(circle,var(--accent),transparent 62%);opacity:.38;animation:drift1 19s ease-in-out infinite} .hb-orbs .blob:nth-child(2){width:300px;height:300px;right:10%;top:-40%;background:radial-gradient(circle,var(--indigo),transparent 62%);opacity:.34;animation:drift2 23s ease-in-out infinite} .hb-orbs .blob:nth-child(3){width:260px;height:260px;left:44%;top:8%;background:radial-gradient(circle,var(--green),transparent 62%);opacity:.2;animation:drift3 27s ease-in-out infinite} @keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(46px,30px)}} @keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,26px)}} @keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,-20px) scale(1.06)}} /* ---------- sections ---------- */ section{padding:40px 0} .step-tag{display:inline-flex;align-items:center;gap:10px;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px} .step-tag .n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:.82rem} h2{font-size:clamp(1.5rem,3.2vw,2rem);font-weight:750;letter-spacing:-.02em;color:var(--ink);margin-bottom:14px} p{margin-bottom:13px} p strong{color:var(--ink);font-weight:650} em{color:var(--ink);font-style:italic} a{color:var(--accent)} .reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease} .reveal.show{opacity:1;transform:none} /* ---------- cards ---------- */ .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:22px 0} .card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px;box-shadow:var(--shadow-sm);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease} .card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))} .card .ico{font-size:1.5rem;margin-bottom:10px} .card h3{font-size:1rem;font-weight:650;color:var(--ink);margin-bottom:6px} .card p{font-size:.92rem;color:var(--muted);line-height:1.6;margin:0} /* ---------- code ---------- */ pre{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:18px 22px;overflow-x:auto;font-family:var(--mono);font-size:.83rem;line-height:1.65;margin:20px 0;position:relative;color:var(--ink)} pre .lbl{position:absolute;top:10px;right:10px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:2px 11px;font-size:.66rem;letter-spacing:.05em;color:var(--muted);font-family:inherit} code{font-family:var(--mono)} .c-cm{color:var(--syn-cm)}.c-kw{color:var(--syn-kw)}.c-str{color:var(--syn-str)}.c-fn{color:var(--syn-fn)}.c-red{color:var(--red);font-weight:600}.c-grn{color:var(--green);font-weight:600} .inline-code{background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;padding:1px 7px;font-family:var(--mono);font-size:.83em;color:var(--ink)} /* ---------- severity badges ---------- */ .sev{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 14px;font-size:.8rem;font-weight:600;margin:0 6px 6px 0} .sev.r{background:var(--red-soft);color:var(--red)} .sev.y{background:var(--amber-soft);color:var(--amber)} .sev.q{background:var(--indigo-soft);color:var(--indigo)} /* ---------- diagrams ---------- */ .diagram{background-color:var(--bg-soft);background-image:radial-gradient(var(--grid) 1px,transparent 1px);background-size:18px 18px;border:1px solid var(--line);border-radius:14px;padding:24px 18px;margin:24px 0;overflow-x:auto} .diagram svg{display:block;margin:0 auto;max-width:100%;height:auto} .flow-line{stroke-dasharray:6 6;animation:dash 1.4s linear infinite} @keyframes dash{to{stroke-dashoffset:-12}} .pulse{animation:pulse 2.6s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}} .dcap{text-align:center;color:var(--muted);font-size:.85rem;margin-top:14px} /* ---------- callouts ---------- */ .callout{background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-left:3px solid var(--accent);border-radius:12px;padding:16px 22px;margin:22px 0} .callout p{margin:0;color:var(--ink)} .callout.warn{background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 24%,transparent);border-left-color:var(--red)} .divider{height:1px;background:linear-gradient(90deg,transparent,var(--line) 20%,var(--line) 80%,transparent);margin:16px auto;max-width:720px} /* ---------- homepage post list (rendered by theme.js) ---------- */ .post-list{display:grid;gap:16px;margin:40px 0 72px} .post-card{position:relative;display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 28px;text-decoration:none;box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .post-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--accent),var(--accent-2));opacity:0;transition:opacity .25s ease} .post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))} .post-card:hover::before{opacity:1} .post-card .meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:.8rem;margin-bottom:10px} .post-card h3{font-size:1.35rem;font-weight:750;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px} .post-card p{color:var(--muted);font-size:.98rem;line-height:1.6;margin-bottom:14px} .post-card .read{color:var(--accent);font-weight:600;font-size:.9rem} .tag{background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:.72rem;color:var(--muted);font-family:var(--mono)} /* ---------- prev/next post links (rendered by theme.js) ---------- */ .post-nav{max-width:720px;margin:48px auto 0;padding:0 24px;display:flex;justify-content:space-between;gap:16px} .post-nav a{flex:1;max-width:48%;border:1px solid var(--line);border-radius:12px;padding:14px 18px;text-decoration:none;background:var(--card);box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s} .post-nav a:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))} .post-nav a.next{margin-left:auto;text-align:right} .post-nav .dir{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px} .post-nav .t{color:var(--ink);font-weight:600;font-size:.95rem} /* ---------- footer ---------- */ footer{background:var(--bg-soft);border-top:1px solid var(--line);padding:44px 0;text-align:center;color:var(--muted);font-size:.9rem;margin-top:32px} @media(max-width:600px){ header{padding:64px 0 52px} body{font-size:16px} .post-nav{flex-direction:column} .post-nav a{max-width:100%} .post-nav a.next{text-align:left} } @media (prefers-reduced-motion: reduce){ *,::before,::after{animation-duration:.001ms!important;animation-iteration-count:1!important} html{scroll-behavior:auto} }