/* ════════════════════════════════════════════════════════════ SIQA Public Pages — Signal System overrides Loaded ONLY for unauthenticated visitors on public marketing pages (about, blog, visibility, terms, privacy), AFTER design-system.css and blog.css. Replaces public-editorial.css as the pin layer: instead of forcing the light "One Answer" identity, this repins the same tokens to the dark Signal System used by the landing page (Void / Iris / Halo, Clash Display + Instrument Sans + JetBrains Mono). blog.css (loaded just before this file) already ships a full dark "glassmorphism" identity by default — its header literally says "matches landing page aesthetic: indigo accent... premium card elevation." The ONLY reason these pages don't already look like Signal is that base.html hardcodes on every page, which fires blog.css's OWN light-mode overrides (~22 rules) on top of that good dark default. This file: 1. Repins the shared design-system.css tokens to Signal values (scoped to these pages only, since custom properties cascade by load order, not by which file "owns" a selector — this file is only ed on public pages, same mechanism public-editorial.css used for the light identity). 2. Neutralizes every blog.css [data-theme="light"] rule back to a Signal-tuned version of its own dark default, since that attribute is always "light" here regardless of theme. ════════════════════════════════════════════════════════════ */ /* ── 1. Token pinning — Signal System dark ────────────────── */ :root, :root[data-theme="dark"], :root[data-theme="light"] { --bg-base: #0b0a14; --bg-surface: #141222; --bg-raised: #1c1930; --bg-overlay: #141222; /* Aliased names used ad-hoc by visibility.html / research_report.html — never defined anywhere, so those cards rendered with no background at all before this file existed. Same values as --bg-raised/--border-default. */ --bg-elevated: #1c1930; --border-subtle: rgba(255,255,255,0.12); --border-faint: rgba(255,255,255,0.06); --border-default: rgba(255,255,255,0.12); --border-strong: rgba(255,255,255,0.20); --text-1: #ffffff; --text-2: rgba(255,255,255,0.64); --text-3: rgba(255,255,255,0.40); --text-4: rgba(255,255,255,0.30); --accent: #593be2; --accent-hover: #9272fa; --accent-muted: rgba(89,59,226,0.14); --green: #2fbf8f; --green-muted: rgba(47,191,143,0.12); --yellow: #f5a623; --yellow-muted: rgba(245,166,35,0.12); --red: #f0446c; --red-muted: rgba(240,68,108,0.10); --blue: #9272fa; --blue-muted: rgba(146,114,250,0.12); --glass-bg: rgba(255,255,255,0.03); --glass-bg-md: rgba(255,255,255,0.05); --glass-border: rgba(255,255,255,0.08); --glass-border-md: rgba(255,255,255,0.14); --blog-accent: #593be2; --blog-accent-hover: #9272fa; --blog-accent-muted: rgba(89,59,226,0.14); --blog-accent-glow: rgba(146,114,250,0.24); --font: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --font-display: 'Clash Display', 'Instrument Sans', sans-serif; /* Signal geometry: generous rounding, not editorial's near-square */ --r1: 8px; --r2: 8px; --r3: 14px; --r4: 24px; /* Glow elevation — the only shadow family allowed in the void */ --shadow-sm: 0 0 0 1px rgba(255,255,255,0.06); --shadow-md: 0 0 0 1px #262347, 0 8px 24px rgba(146,114,250,0.10); --shadow-lg: 0 0 0 1px #262347, 0 12px 40px rgba(146,114,250,0.14); } body { background: var(--bg-base); color: var(--text-1); } ::selection { background: rgba(89,59,226,0.32); color: #fff; } /* Signal is dark-only, like the landing page — no toggle */ .pub-nav-theme-btn { display: none !important; } /* ── 2. Typography — Clash Display headings, JetBrains Mono labels ── */ .public-main h1, .public-main h2, .public-main h3, .blog-header-title, .blog-featured-title, .article-hero-title, .blog-card-body h3, .author-hero-name, .post-body h2, .post-body h3, .blog-related-title, .blog-newsletter h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; } .public-main h1 em, .public-main h2 em, .blog-header-title em, .article-hero-title em { font-style: normal; color: var(--accent); } .blog-header-eyebrow, .blog-card-meta, .blog-featured-meta, .article-hero-meta, .blog-breadcrumb, .blog-related-eyebrow, .blog-newsletter-eyebrow, .author-label { font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; } .skip-link { background: var(--accent); color: #fff; font-family: var(--font-mono); } /* ── 3. Neutralize blog.css's [data-theme="light"] rules ────── always carries data-theme="light" (base.html hardcodes it for every page, editorial or not), so these ~22 rules always fire. Each override below returns the element to a Signal-tuned version of blog.css's OWN dark default — same selectors, same specificity, later in the cascade wins. ── */ /* Nav — blog.css's un-light-themed .pub-nav is already the void glass look; these just stop the light variant from replacing it. */ [data-theme="light"] .pub-nav { background: rgba(11,10,20,.62); } [data-theme="light"] .pub-nav.scrolled { background: rgba(11,10,20,.86); box-shadow: 0 4px 32px rgba(0,0,0,.4); } [data-theme="light"] .pub-nav::after { display: none; } [data-theme="light"] .pub-nav-link { color: var(--text-3); } [data-theme="light"] .pub-nav-link:hover { color: var(--text-1); background: rgba(255,255,255,.055); } [data-theme="light"] .pub-nav-link.active { color: var(--text-1); background: var(--blog-accent-muted); } [data-theme="light"] .pub-nav-btn-ghost { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); color: var(--text-2); } [data-theme="light"] .pub-nav-btn-ghost:hover { background: rgba(255,255,255,.09); color: var(--text-1); border-color: rgba(255,255,255,.15); } [data-theme="light"] .pub-nav-theme-btn { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); color: var(--text-3); } [data-theme="light"] .pub-nav-hamburger { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); } [data-theme="light"] .pub-mobile-menu { background: rgba(10,10,16,.98); } [data-theme="light"] .pub-mobile-menu a { color: var(--text-2); } [data-theme="light"] .pub-mobile-menu a:hover { background: rgba(255,255,255,.05); color: var(--text-1); border-color: rgba(255,255,255,.08); } [data-theme="light"] .pub-mobile-menu-divider { background: rgba(255,255,255,.06); } /* Primary nav CTA + logo mark — Iris→Halo ramp instead of indigo */ .pub-nav-logo-mark { background: linear-gradient(135deg, #3b28a2 0%, #593be2 45%, #9272fa 100%); box-shadow: 0 0 0 1px rgba(146,114,250,.4), 0 4px 16px rgba(146,114,250,.35); } .pub-nav-logo:hover .pub-nav-logo-mark { box-shadow: 0 0 0 1px rgba(146,114,250,.6), 0 6px 24px rgba(146,114,250,.5); } .pub-nav-btn-primary { background: linear-gradient(135deg, #3b28a2 0%, #593be2 45%, #9272fa 100%); box-shadow: 0 4px 16px rgba(146,114,250,.35); } .pub-nav-btn-primary:hover { box-shadow: 0 6px 22px rgba(146,114,250,.5); } /* Featured post — back to the void-purple gradient blog.css ships by default */ [data-theme="light"] .blog-featured { background: linear-gradient(135deg, #1c1930 0%, #0d0d18 100%); border-color: rgba(255,255,255,.08); box-shadow: 0 8px 32px rgba(89,59,226,.10); } /* Standard cards — glow shadow instead of a light drop shadow */ [data-theme="light"] .blog-card, [data-theme="light"] .blog-related-card { box-shadow: var(--shadow-sm); } /* Post-body code + table hover — dark-appropriate tint */ [data-theme="light"] .post-body code { background: rgba(255,255,255,.06); color: var(--halo, #9272fa); border-color: rgba(255,255,255,.06); } [data-theme="light"] .post-body tr:hover td { background: rgba(255,255,255,.02); } /* Cover placeholder — Signal ramp glow instead of pastel indigo */ [data-theme="light"] .blog-cover-placeholder { background: radial-gradient(120% 80% at 20% 0%, rgba(89,59,226,.30) 0%, transparent 50%), radial-gradient(100% 80% at 100% 100%, rgba(146,114,250,.30) 0%, transparent 55%), linear-gradient(135deg, #1c1930 0%, #16162e 55%, #0d0d18 100%); } [data-theme="light"] .blog-cover-placeholder-mark { color: #fff; text-shadow: 0 4px 24px rgba(0,0,0,.35); } /* Pre-existing bug, unrelated to theme: blog.css's no-cover-image hero variant zeroes ALL content padding (`.article-hero-noimage .article-hero-content { padding: 0 }`), so the meta line sits flush against the rounded container edge and its first character clips. */ .article-hero-noimage .article-hero-content { padding: var(--s6) 0 0; } @media (prefers-reduced-motion: reduce) { .blog-card:hover, .blog-card-compact:hover, .blog-related-card:hover { transform: none; } }