/* ========================================================================= SHOGOL — Kinetic theme (light + dark) Single source of truth for index.html and every /posts/*.html page. Light is default; [data-theme="dark"] on flips the palette. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root{ /* light palette (Kinetic LIGHT / #s9) */ --bg:#f4f5f8; --surface:#ffffff; --ink:#0a0c12; --muted:#4a5466; --faint:#7a849c; --line:rgba(10,12,18,.14); --line-strong:rgba(10,12,18,.30); --accent:#2563eb; --accent-bright:#2f6bff; --accent-soft:rgba(47,107,255,.10); --on-accent:#ffffff; --code-bg:#0d1018; --code-ink:#cdd6e0; --shadow:0 24px 60px rgba(10,20,50,.10); } [data-theme="dark"]{ /* dark palette (Kinetic DARK / #s7) */ --bg:#0a0c12; --surface:#11151f; --ink:#ffffff; --muted:#9aa6c4; --faint:#6b7796; --line:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.26); --accent:#60a5fa; --accent-bright:#2f6bff; --accent-soft:rgba(47,107,255,.16); --on-accent:#ffffff; --code-bg:#0d1018; --code-ink:#cdd6e0; --shadow:0 24px 60px rgba(0,0,0,.5); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:'Space Grotesk',system-ui,sans-serif; background:var(--bg);color:var(--ink); transition:background .4s ease,color .4s ease; overflow-x:hidden;line-height:1.6; } ::selection{background:var(--accent-bright);color:#fff} a{color:inherit;text-decoration:none} .mono{font-family:'JetBrains Mono',monospace} /* ---- marquee ---------------------------------------------------------- */ .marq{white-space:nowrap;overflow:hidden;background:var(--accent-bright); border-top:2px solid var(--accent-bright);border-bottom:2px solid var(--accent-bright)} .marq .track{display:inline-block;padding:13px 0;animation:marq 26s linear infinite} .marq span{font-family:'JetBrains Mono';font-size:13px;font-weight:700;letter-spacing:2px; color:#fff;text-transform:uppercase;padding:0 18px} @keyframes marq{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.marq .track{animation:none}} /* ---- header ----------------------------------------------------------- */ .hdr{max-width:1180px;margin:0 auto;padding:26px 28px; display:flex;justify-content:space-between;align-items:center;gap:20px} .hdr .brand{font-weight:700;font-size:19px;letter-spacing:-.5px} .hdr .brand b{color:var(--accent)} .hdr nav{display:flex;gap:24px;align-items:center;font-size:14px;color:var(--muted);font-weight:500} .hdr nav a{transition:color .2s} .hdr nav a:hover{color:var(--accent)} /* theme toggle */ .toggle{width:48px;height:28px;border-radius:999px;border:1px solid var(--line-strong); background:var(--surface);position:relative;cursor:pointer;flex:none;transition:.3s} .toggle::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%; background:var(--accent-bright);transition:.3s cubic-bezier(.5,1.6,.4,.9); box-shadow:0 2px 8px rgba(47,107,255,.5)} [data-theme="dark"] .toggle::after{transform:translateX(20px)} .toggle svg{position:absolute;top:7px;width:14px;height:14px;pointer-events:none;color:var(--faint)} .toggle .sun{left:7px}.toggle .moon{right:7px} /* ---- masthead (loud outline type) ------------------------------------ */ .masthead{max-width:1180px;margin:0 auto;padding:40px 28px 0} .masthead .meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px; font-family:'JetBrains Mono';font-size:12px;color:var(--faint);letter-spacing:1px; border-bottom:1px solid var(--line);padding-bottom:16px;text-transform:uppercase} .masthead .meta b{color:var(--accent)} .display{font-weight:700;text-transform:uppercase;line-height:.84;letter-spacing:-4px; font-size:clamp(54px,12vw,164px);margin:34px 0} .display .out{-webkit-text-stroke:2px var(--accent);color:transparent} .display .fill{color:var(--accent)} .lede{max-width:560px;font-size:18px;color:var(--muted);line-height:1.6;margin-left:auto} /* ---- post list (hover-fill rows) ------------------------------------- */ .plist{max-width:1180px;margin:54px auto 0;padding:0 28px 90px} .plist h2.sec{font-family:'JetBrains Mono';font-size:12px;letter-spacing:3px;color:var(--faint); text-transform:uppercase;margin-bottom:6px} .row{display:grid;grid-template-columns:64px 1fr auto;gap:24px;align-items:center; padding:26px 0;border-top:1px solid var(--line);cursor:pointer;transition:.3s} .row:last-child{border-bottom:1px solid var(--line)} .row:hover{background:var(--accent-bright);padding-left:18px;padding-right:18px;border-color:transparent} .row:hover *{color:#fff !important;-webkit-text-stroke:0 !important} .row .nn{font-family:'JetBrains Mono';font-size:14px;color:var(--accent)} .row .ttl h3{font-size:clamp(20px,3vw,34px);font-weight:600;letter-spacing:-1px;line-height:1.05;transition:.3s} .row .ttl p{font-size:14px;color:var(--muted);margin-top:6px;max-width:620px} .row .side{display:flex;align-items:center;gap:22px} .row .cat{font-family:'JetBrains Mono';font-size:11px;letter-spacing:1px;color:var(--faint);text-transform:uppercase;white-space:nowrap} .row .ar{font-size:26px;color:var(--accent);transition:transform .3s} .row:hover .ar{transform:translateX(6px)} /* ===== ARTICLE (post pages) =========================================== */ .article{max-width:760px;margin:0 auto;padding:0 28px 40px} .post-meta{font-family:'JetBrains Mono';font-size:12px;letter-spacing:1px;color:var(--faint); text-transform:uppercase;display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px} .post-meta b{color:var(--accent)} .post-title{font-weight:700;font-size:clamp(38px,7vw,76px);line-height:.92;letter-spacing:-3px; text-transform:uppercase;margin:18px 0 10px} .post-dek{font-size:20px;color:var(--muted);line-height:1.5;max-width:660px;margin-bottom:8px} .prose{font-size:18px;line-height:1.78;color:var(--ink);margin-top:30px} .prose > *{max-width:680px} .prose p{margin:0 0 22px;color:var(--muted)} .prose strong{color:var(--ink);font-weight:600} .prose h2{font-size:clamp(26px,4vw,36px);font-weight:700;letter-spacing:-1px;line-height:1.1; margin:54px 0 18px;color:var(--ink)} .prose h2::before{content:"";display:inline-block;width:26px;height:4px;background:var(--accent); vertical-align:middle;margin-right:14px;border-radius:2px} .prose h3{font-size:21px;font-weight:600;margin:34px 0 12px;color:var(--ink)} .prose a{color:var(--accent);border-bottom:1px solid var(--accent-soft);transition:.2s} .prose a:hover{border-bottom-color:var(--accent)} .prose ul,.prose ol{margin:0 0 22px;padding-left:22px;color:var(--muted)} .prose li{margin:0 0 10px} .prose li::marker{color:var(--accent)} .prose blockquote{margin:30px 0;padding:18px 26px;border-left:3px solid var(--accent); background:var(--accent-soft);border-radius:0 10px 10px 0;font-size:20px;color:var(--ink)} .prose blockquote p{color:var(--ink);font-weight:500;margin:0} .prose hr{border:none;border-top:1px solid var(--line);margin:44px 0} .prose code{font-family:'JetBrains Mono';font-size:.86em;background:var(--accent-soft); color:var(--accent);padding:2px 7px;border-radius:5px} .prose pre{background:var(--code-bg);color:var(--code-ink);border:1px solid var(--line); border-radius:12px;padding:22px 24px;overflow-x:auto;margin:26px 0;font-size:14px;line-height:1.65} .prose pre code{background:none;color:inherit;padding:0;font-size:14px} /* key-takeaway / callout */ .callout{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 12px 12px 0; background:var(--surface);padding:20px 24px;margin:30px 0;box-shadow:var(--shadow)} .callout .k{font-family:'JetBrains Mono';font-size:11px;letter-spacing:2px;color:var(--accent); text-transform:uppercase;margin-bottom:8px} .callout p{margin:0;color:var(--ink) !important} /* ===== DIAGRAMS (bespoke inline SVG) ================================== */ /* Use these classes inside so diagrams adapt to light/dark. Wrap each in
. Animate strokes with class="draw". */ .diagram{margin:38px 0;padding:26px;border:1px solid var(--line);border-radius:16px; background:var(--surface);box-shadow:var(--shadow);overflow:hidden} .diagram svg{display:block;width:100%;height:auto;max-width:100%;overflow:visible} .diagram figcaption{font-family:'JetBrains Mono';font-size:11px;letter-spacing:1px;color:var(--faint); text-transform:uppercase;margin-top:16px;text-align:center} .dgm-box{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.5} .dgm-box-accent{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.5} .dgm-line{stroke:var(--line-strong);stroke-width:1.5;fill:none} .dgm-flow{stroke:var(--accent);stroke-width:2;fill:none} .dgm-ink{fill:var(--ink)} .dgm-muted{fill:var(--muted)} .dgm-accent{fill:var(--accent)} .dgm-accent-stroke{stroke:var(--accent);fill:none} .dgm-label{font-family:'JetBrains Mono';font-size:12px;fill:var(--muted)} .dgm-title{font-family:'Space Grotesk';font-weight:600;fill:var(--ink)} /* draw-on animation: give path pathLength="1" + class="draw" */ .draw{stroke-dasharray:1;stroke-dashoffset:1} .diagram.in .draw{animation:draw 1.1s ease forwards} .diagram.in .draw.d2{animation-delay:.25s} .diagram.in .draw.d3{animation-delay:.5s} .diagram.in .draw.d4{animation-delay:.75s} .diagram.in .pop{animation:pop .5s ease both} .diagram.in .pop.d2{animation-delay:.3s}.diagram.in .pop.d3{animation-delay:.5s} .diagram.in .pop.d4{animation-delay:.7s}.diagram.in .pop.d5{animation-delay:.9s} @keyframes draw{to{stroke-dashoffset:0}} @keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}} /* ===== scroll reveal ================================================== */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .reveal{opacity:1 !important;transform:none !important} .draw{stroke-dashoffset:0 !important;animation:none !important} } /* ===== prev / next footer ============================================= */ .pn{max-width:760px;margin:60px auto 0;padding:0 28px 90px;display:grid;grid-template-columns:1fr 1fr;gap:16px} .pn a{border:1px solid var(--line);border-radius:14px;padding:22px;transition:.3s;background:var(--surface)} .pn a:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow)} .pn .k{font-family:'JetBrains Mono';font-size:11px;letter-spacing:1px;color:var(--faint);text-transform:uppercase} .pn a:last-child{text-align:right} .pn h4{font-size:18px;font-weight:600;margin-top:8px;line-height:1.2} .pn .empty{border:1px dashed var(--line);opacity:.4;pointer-events:none} .backlink{max-width:760px;margin:0 auto;padding:24px 28px 0} .backlink a{font-family:'JetBrains Mono';font-size:13px;color:var(--accent);letter-spacing:.5px} .backlink a:hover{text-decoration:underline} /* ===== footer ========================================================= */ .foot{border-top:1px solid var(--line);margin-top:40px} .foot .in{max-width:1180px;margin:0 auto;padding:34px 28px;display:flex;justify-content:space-between; flex-wrap:wrap;gap:14px;font-family:'JetBrains Mono';font-size:12px;color:var(--faint);letter-spacing:1px} @media(max-width:720px){ .hdr nav .lk{display:none} .row{grid-template-columns:44px 1fr;gap:14px} .row .side{grid-column:2;justify-content:flex-start;margin-top:4px} .row .ar{display:none} .pn{grid-template-columns:1fr} .lede{margin-left:0} } /* ===== multi-series: filter chips, feed, series CTA ================== */ .backlink .sep{opacity:.4;margin:0 2px} .post-meta .date{color:var(--accent)} .filters{display:flex;flex-wrap:wrap;gap:10px;max-width:1180px;margin:34px auto 0;padding:0 28px} .chip{font-family:'JetBrains Mono';font-size:12.5px;font-weight:500;color:var(--muted); background:var(--surface);border:1px solid var(--line-strong);border-radius:999px; padding:9px 18px;cursor:pointer;transition:.25s;letter-spacing:.3px} .chip:hover{color:var(--accent);border-color:var(--accent)} .chip.active{background:var(--accent-bright);border-color:var(--accent-bright);color:#fff; box-shadow:0 0 22px rgba(47,107,255,.4)} #series-cta{max-width:1180px;margin:16px auto 0;padding:0 28px;min-height:18px} .series-cta-link{font-family:'JetBrains Mono';font-size:13px;color:var(--accent);letter-spacing:.5px} .series-cta-link:hover{text-decoration:underline} .plist .sec{margin-top:6px} @keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .row.anim{animation:riseIn .5s ease both} @media(prefers-reduced-motion:reduce){.row.anim{animation:none}}