/* ============================================================================ blog-post.css: The IOn Project blog, editorial article style. Long-form reading identity: Newsreader serif body, Space Grotesk headings, Space Mono labels, softer editorial teal accent (#2fe0ac) on near-black. Distinct from the app/marketing surfaces (which stay Inter + aurora cyan). Loaded after aurora-tokens.css; defines its own palette via --bl-* tokens. ========================================================================== */ :root{ --bl-bg:#07090c; --bl-accent:#2fe0ac; --bl-accent-hover:#5cead0; --bl-heading:#f2f5f7; --bl-body:#c8cdd4; --bl-strong:#f2f5f7; --bl-muted:#9aa3ad; --bl-dim:#6b7580; --bl-faint:#5a626c; --bl-hair:rgba(255,255,255,0.07); --bl-hair-soft:rgba(255,255,255,0.06); --bl-serif:'Newsreader',Georgia,'Times New Roman',serif; --bl-sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,sans-serif; --bl-mono:'Space Mono',ui-monospace,monospace; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--bl-bg); color:var(--bl-body); font-family:var(--bl-serif); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* Guard against stray horizontal overflow without creating a scroll container (which would break the sticky TOC) or a containing block for the fixed layers. */ .post-hero,.post-shell,footer{overflow-x:clip;} ::selection{background:rgba(47,224,172,0.22);color:#eef2f5;} /* ── Ambient backgrounds (CSS only, light, no canvas) ────────────────────── */ .bg-aurora,.bg-grid,.bg-particles{position:fixed;inset:0;z-index:0;pointer-events:none;} .bg-aurora{ background: radial-gradient(1100px 600px at 78% -8%, rgba(47,224,172,0.10), transparent 60%), radial-gradient(900px 700px at 10% 110%, rgba(47,224,172,0.06), transparent 55%); } .bg-grid{ opacity:.4; background-image:radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size:38px 38px; -webkit-mask-image:radial-gradient(1200px 800px at 60% 0%, #000, transparent 70%); mask-image:radial-gradient(1200px 800px at 60% 0%, #000, transparent 70%); } .bg-particles{overflow:hidden;} .bg-particles span{ position:absolute;bottom:-4px;width:2px;height:2px;border-radius:50%; background:var(--bl-accent);animation:bl-float linear infinite; } @keyframes bl-float{ 0%{transform:translateY(20px);opacity:0;} 15%{opacity:.5;}85%{opacity:.35;} 100%{transform:translateY(-90vh);opacity:0;} } /* ── Reading progress bar ────────────────────────────────────────────────── */ .read-progress{ position:fixed;top:0;left:0;right:0;height:2px;z-index:200; transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,var(--bl-accent),var(--bl-accent-hover)); box-shadow:0 0 12px rgba(47,224,172,0.6); transition:transform .08s linear; } /* ── Nav ─────────────────────────────────────────────────────────────────── */ /* Scoped to the top-level header nav so it never hits the inner .post-toc-list