/* ============================================================ THEME: FLUX ACTIONABLE Midnight blue base. Yellow precision accent. Green operational signal. Slate gray surfaces. For actionable intelligence articles in the FLUX ecosystem. Usage: ============================================================ */ .theme-flux-actionable { --fa-bg: #05080f; --fa-surface: #0a0f1e; --fa-card: #111827; --fa-blue: #1a2444; --fa-blue-glow: #3b6fd4; --fa-blue-bright: #6b9fff; --fa-yellow: #e8d44d; --fa-yellow-dim: rgba(232,212,77,0.55); --fa-yellow-faint: rgba(232,212,77,0.18); --fa-green: #4ade80; --fa-green-dim: rgba(74,222,128,0.8); --fa-green-faint: rgba(74,222,128,0.16); --fa-text: #F0E6E4; --fa-white: #f0ede8; --fa-muted: #6b7a8d; --fa-border: rgba(107,159,255,0.32); --fa-border-y: rgba(232,212,77,0.38); background: var(--fa-bg) !important; color: var(--fa-text) !important; font-family: 'IBM Plex Sans', -apple-system, sans-serif !important; font-weight: 300; } a { color: #6b9fff; text-decoration: none; } a:hover { text-decoration: underline; } /* ── SIGNAL BAR — single precision line at top ── .theme-flux-actionable::before { content: '● FLUX ACTIONABLE · ' attr(data-date) ' · INTELLIGENCE IN MOTION'; display: block; background: var(--fa-bg); color: var(--fa-yellow-dim); font-family: 'IBM Plex Mono', monospace; font-size: 0.55rem; letter-spacing: 0.3em; text-transform: uppercase; text-align: center; padding: 0.45rem 0; border-bottom: 1px solid var(--fa-border-y); position: fixed; top: 0; left: 0; right: 0; z-index: 1001; }*/ /* ── NAV ── */ .theme-flux-actionable nav { background: rgba(5,8,15,0.97) !important; border-bottom: 1px solid var(--fa-border) !important; box-shadow: 0 0 20px rgba(107,159,255,0.05) !important; position: fixed !important; left: 0 !important; right: 0 !important; width: 100% !important; padding: 1rem 2rem; backdrop-filter: blur(12px); z-index: 1000; } .theme-flux-actionable nav .container { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100%; } .theme-flux-actionable .logo img { filter: brightness(0) invert(1); height: 28px !important; margin-left: 20px; } .theme-flux-actionable .back-link { color: white !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em; font-style: normal; margin-right: 2rem; } .theme-flux-actionable .back-link:hover { color: var(--fa-yellow) !important; opacity: 1; } .theme-flux-actionable .nav-section { color: var(--fa-yellow) !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.6em; opacity: 1;} nav .logo-area { display: flex; align-items: center; gap: 1.5rem; } nav .flux-mark { font-family: 'Cinzel', serif; font-size: 1rem; letter-spacing: 0.4em; color: #f0ede8; text-decoration: none; } nav .flux-mark span { color: #4f7fe8; } /* ── HEADER ── */ .theme-flux-actionable .article-header { margin-top: 60px !important; height: 55vh !important; min-height: 480px; background: var(--fa-bg) !important; border-left: 4px solid var(--fa-yellow); height: auto !important; } .theme-flux-actionable .header-design { opacity: 0.65 !important; mix-blend-mode: luminosity; } .theme-flux-actionable .header-overlay { background: linear-gradient( to top, rgba(5,8,15,0.92) 0%, rgba(5,8,15,0.5) 50%, rgba(5,8,15,0.1) 100% ) !important; } .theme-flux-actionable .article-category { background: rgba(232,212,77,0.1) !important; border: 1px solid rgba(232,212,77,0.35) !important; color: var(--fa-yellow) !important; border-radius: 0 !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.58rem; letter-spacing: 0.3em; text-decoration: none; } .theme-flux-actionable .article-title { font-family: 'IBM Plex Sans', sans-serif !important; font-size: clamp(2rem, 4.5vw, 3.5rem) !important; font-weight: 600 !important; color: var(--fa-white) !important; letter-spacing: -0.01em; line-height: 1.1; margin-left: 0 !important; max-width: 900px !important; } .theme-flux-actionable .article-meta { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(200,212,224,0.45) !important; max-width: unset !important; margin: 0 !important; } .theme-flux-actionable .deck { border-left: 12px solid var(--fa-yellow); color: rgba(189, 220, 252, 0.8); } /* ── ARTICLE BODY ── */ .theme-flux-actionable .article-container { max-width: 760px !important; padding: 4rem 2rem 6rem !important; background: var(--fa-bg) !important; } .theme-flux-actionable .article-content { background: var(--fa-bg) !important; } .theme-flux-actionable .article-intro { font-style: italic; color: var(--fa-text) !important; border-bottom: 1px solid var(--fa-border) !important; border-left: 3px solid var(--fa-yellow) !important; padding-left: 1.25rem !important; padding-bottom: 2.5rem; margin-bottom: 2.5rem; line-height: 1.75; font-size: 1.15em !important; } .theme-flux-actionable .article-content p { color: rgba(200,212,224,0.82) !important; font-size: 1.05rem; line-height: 1.85; } .theme-flux-actionable .article-content strong { color: var(--fa-white) !important; font-weight: 500; } .theme-flux-actionable .article-content h2 { font-family: 'IBM Plex Mono', monospace !important; font-size: clamp(0.9rem, 1.8vw, 1.1rem) !important; font-weight: 500 !important; color: var(--fa-green) !important; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--fa-green-faint) !important; border-top: none !important; padding-bottom: 0.5rem !important; padding-top: 0 !important; margin: 3rem 0 1.25rem; } /* ── COMPONENTS ── */ .theme-flux-actionable .pullquote { font-family: 'IBM Plex Mono', monospace !important; font-size: clamp(1rem, 2vw, 1.25rem) !important; color: var(--fa-yellow) !important; background: var(--fa-yellow-faint) !important; border: 1px solid var(--fa-border-y) !important; border-left: 4px solid var(--fa-yellow) !important; border-radius: 0 !important; text-align: left !important; padding: 1.5rem 1.75rem !important; font-style: normal !important; line-height: 1.6; } .theme-flux-actionable .stats-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; gap: 1px !important; background: var(--fa-border) !important; } .theme-flux-actionable .stat-card { background: var(--fa-surface) !important; border-radius: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0.4rem !important; padding: 1.5rem 1.25rem !important; } .theme-flux-actionable .stat-number { font-family: 'IBM Plex Mono', monospace !important; font-size: 2rem !important; color: var(--fa-yellow) !important; display: block !important; line-height: 1 !important; } .theme-flux-actionable .stat-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: white; display: block !important; line-height: 1.4 !important; font-style: normal !important; } .theme-flux-actionable .receipt-inline { font-family: 'IBM Plex Mono', monospace; font-size: 0.7em; color: rgba(232,212,77,0.7); text-decoration: none; border-bottom: 1px solid rgba(232,212,77,0.3); margin-left: 0.3em; white-space: nowrap; } .theme-flux-actionable .receipt-inline:hover { color: rgba(232,212,77,1); border-bottom-color: rgba(232,212,77,0.8); } .theme-flux-actionable .highlight-box { background: var(--fa-green-faint) !important; border: 1px solid rgba(74,222,128,0.12) !important; border-left: 4px solid var(--fa-green) !important; border-radius: 0 !important; color: var(--fa-text) !important; } .theme-flux-actionable .highlight-box h3 { color: var(--fa-green) !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-align: left !important; } .theme-flux-actionable .highlight-box p { color: rgba(200,212,224,0.75) !important; } .theme-flux-actionable .highlight-box li { color: rgba(200,212,224,0.75) !important; } .theme-flux-actionable .takeaways { background: var(--fa-yellow-faint) !important; border: 1px solid var(--fa-border-y) !important; border-left: 4px solid var(--fa-yellow) !important; border-radius: 0 !important; } .theme-flux-actionable .takeaways h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fa-yellow) !important; } .theme-flux-actionable .takeaways li { color: rgba(200,212,224,0.75) !important; } .theme-flux-actionable .takeaways li strong { color: var(--fa-white) !important; } .theme-flux-actionable .evidence-box { background: var(--fa-green-faint) !important; border: 1px solid rgba(74,222,128,0.1) !important; border-left: 4px solid var(--fa-green) !important; } .theme-flux-actionable .evidence-box h3 { color: var(--fa-green) !important; } .theme-flux-actionable .evidence-box li { color: rgba(200,212,224,0.8) !important; } .theme-flux-actionable .evidence-box li strong { color: var(--fa-white) !important; } .theme-flux-actionable .broadcast-block { background: rgba(0,0,0,0.4) !important; border: 1px solid var(--fa-border); border-left: 4px solid var(--fa-green) !important; } .theme-flux-actionable .broadcast-block .bcast-header { color: var(--fa-green) !important; } .theme-flux-actionable .broadcast-block .bcast-label { color: var(--fa-yellow) !important; } .theme-flux-actionable .broadcast-block li { color: rgba(200,212,224,0.7) !important; } .theme-flux-actionable .broadcast-block li::before { color: var(--fa-green) !important; } .theme-flux-actionable .broadcast-block li .source { color: var(--fa-muted) !important; } .theme-flux-actionable .signal-note { background: rgba(107,159,255,0.04) !important; border: 1px solid var(--fa-border) !important; border-left: 4px solid var(--fa-blue-bright) !important; } .theme-flux-actionable .signal-note .label { color: var(--fa-blue-bright) !important; font-style: normal !important; } .theme-flux-actionable .signal-note p { color: rgba(200,212,224,0.7) !important; font-style: normal !important; } /* ── FLUX SEARCH WIDGET ── */ .flux-search-block { margin: 3rem 0; padding: 1.75rem 2rem; background: rgba(10,15,30,0.8); border: 1px solid var(--fa-border-y); border-left: 4px solid var(--fa-yellow); } .flux-search-block .fsb-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.55rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fa-yellow-dim); margin-bottom: 0.6rem; display: block; } .flux-search-block .fsb-title { font-family: 'IBM Plex Sans', sans-serif; font-size: 0.95rem; font-weight: 500; color: var(--fa-white); margin-bottom: 0.4rem; } .flux-search-block .fsb-sub { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; color: var(--fa-muted); margin-bottom: 1.25rem; line-height: 1.6; } .flux-search-block .fsb-terms { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; } .flux-search-block .fsb-term { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em; color: var(--fa-yellow); border: 1px solid var(--fa-border-y); padding: 0.25rem 0.7rem; background: var(--fa-yellow-faint); cursor: pointer; transition: all 0.2s; text-decoration: none; font-style: normal; } .flux-search-block .fsb-term:hover { background: rgba(232,212,77,0.15); color: var(--fa-white); } .flux-search-block .fsb-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--fa-bg); background: var(--fa-yellow); border: none; padding: 0.55rem 1.4rem; cursor: pointer; text-decoration: none; font-style: normal; transition: background 0.2s; } .flux-search-block .fsb-btn:hover { background: #f0e060; } /* ── FLUX PAPER LINKS ── */ .flux-papers-block { margin: 2rem 0; padding: 1.5rem 1.75rem; background: var(--fa-green-faint); border: 1px solid rgba(74,222,128,0.1); border-left: 4px solid var(--fa-green); } .flux-papers-block .fpb-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.55rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fa-green-dim); margin-bottom: 0.85rem; display: block; } .flux-papers-block .fpb-links { display: flex; flex-direction: column; gap: 0.5rem; } .flux-papers-block .fpb-links a { font-family: 'IBM Plex Sans', sans-serif; font-size: 0.88rem; color: var(--fa-green) !important; border-left: 2px solid rgba(74,222,128,0.2) !important; padding-left: 0.75rem !important; font-style: normal; transition: all 0.2s; line-height: 1.5; } .flux-papers-block .fpb-links a:hover { color: var(--fa-white) !important; border-left-color: var(--fa-green) !important; } /* ── FOOTER ── */ .theme-flux-actionable .read-more { border-top-color: var(--fa-border) !important; } .theme-flux-actionable .read-more h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fa-muted) !important; } .theme-flux-actionable .read-more-links a { color: var(--fa-yellow) !important; border-left-color: var(--fa-border-y) !important; font-style: normal !important; font-size: 0.85rem !important; line-height: 1.5 !important; padding: 0.5rem 0 !important; } .theme-flux-actionable .read-more-links a:hover { color: var(--fa-white) !important; border-left-color: var(--fa-yellow) !important; } .theme-flux-actionable .article-footer { border-top-color: var(--fa-border) !important; margin-top: 4rem; } .theme-flux-actionable .author-bio { background: transparent !important; padding: 0 !important; } .theme-flux-actionable .author-bio h4 { font-family: 'IBM Plex Mono', monospace !important; font-size: 0.62rem !important; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fa-muted) !important; text-align: left !important; font-weight: 400; font-style: normal; margin-bottom: 1.5rem; } /* ── FLUX LOGO FOOTER ── */ .flux-footer-logo { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--fa-border); } .flux-footer-logo .flux-wordmark { font-family: 'Cinzel', serif; font-size: 1rem; letter-spacing: 0.4em; color: rgba(240,237,232,0.3); text-decoration: none; font-style: normal; transition: color 0.3s; } .flux-footer-logo .flux-wordmark .u { color: rgba(107,159,255,0.5); } .flux-footer-logo .flux-wordmark:hover { color: rgba(240,237,232,0.7); } .flux-footer-logo .flux-tagline { font-family: 'IBM Plex Mono', monospace; font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fa-muted); opacity: 0.5; } .theme-flux-actionable .back-to-top { background: var(--fa-yellow) !important; color: var(--fa-bg) !important; border-radius: 0 !important; border: none !important; font-size: 1rem !important; } .theme-flux-actionable .back-to-top:hover { background: #f0e060 !important; transform: none !important; } /* ── RESPONSIVE ── */ @media (max-width: 768px) { .theme-flux-actionable::before { font-size: 0.42rem; padding: 0.3rem 0; } .theme-flux-actionable nav { top: 22px !important; } .theme-flux-actionable .article-header { height: 60vh !important; margin-top: 80px !important; } .theme-flux-actionable .article-title { font-size: 1.9rem !important; } .theme-flux-actionable .article-container { padding: 2.5rem 1.25rem 4rem !important; } .flux-search-block .fsb-terms { flex-direction: column; } } /* TIMELINE /* ── TIMELINE ─────────────────────────────────────────── */ .timeline { position: relative; margin: 3rem 0; padding: 0; } .timeline::before { content: ''; position: absolute; left: 5.5rem; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent 0%, rgba(200,168,75,0.3) 5%, rgba(200,168,75,0.3) 95%, transparent 100% ); } .tl-entry { display: grid; grid-template-columns: 5rem 2rem 1fr; gap: 0 0; margin-bottom: 0; padding: 2rem 0; border-bottom: 1px solid rgba(200,168,75,0.06); position: relative; } .tl-entry:last-child { border-bottom: none; } .tl-year { font-family: 'IBM Plex Mono', monospace; font-size: 0.68em; color: rgba(200,168,75,0.5); letter-spacing: 0.08em; padding-top: 0.15rem; text-align: right; padding-right: 0; line-height: 1.4; } .tl-year.tl-exact { font-size: 0.6em; line-height: 1.3; } .tl-dot { display: flex; justify-content: center; padding-top: 0.35rem; } .tl-dot::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgba(200,168,75,0.4); border: 1px solid rgba(200,168,75,0.6); flex-shrink: 0; margin-top: 2px; } .tl-entry.tl-red .tl-dot::after { background: rgba(180,40,40,0.5); border-color: rgba(180,40,40,0.8); } .tl-entry.tl-red .tl-year { color: rgba(200,80,80,0.6); } .tl-body { padding-left: 1.5rem; } .tl-name { font-family: 'IBM Plex Sans', sans-serif; font-size: 0.8em; font-weight: 600; color: #c8a84b; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.4rem; } .tl-what { font-family: 'Libre Baskerville', serif; font-size: 1.0em; font-weight: 300!important; color: #f2ede4; line-height: 1.7; margin-bottom: 0.6rem; } .tl-outcome { font-family: 'IBM Plex Mono', monospace; font-size: 0.68em; color: #8C835A; line-height: 1.6; border-left: 2px solid rgba(200,168,75,0.2); padding-left: 0.75rem; margin-top: 0.5rem; } .tl-outcome.tl-outcome-red { border-left-color: rgba(180,40,40,0.4); color: #9a7070; } .tl-img { margin: 1rem 0 0.5rem; max-width: 100%; } .tl-img img { width: 100%; max-width: 480px; display: block; filter: grayscale(20%) brightness(0.88); border: 1px solid rgba(200,168,75,0.15); } .tl-img figcaption { font-family: 'IBM Plex Mono', monospace; font-size: 0.6em; color: #5a5040; padding-top: 0.4rem; letter-spacing: 0.05em; } /* video embed */ .tl-video { margin: 1rem 0 0.5rem; max-width: 540px; } .tl-video .video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #0a0908; border: 1px solid rgba(200,168,75,0.2); } .tl-video .video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .tl-video figcaption { font-family: 'IBM Plex Mono', monospace; font-size: 0.6em; color: #5a5040; padding-top: 0.4rem; letter-spacing: 0.05em; } /* transcript block */ .tl-transcript { margin-top: 0.75rem; background: rgba(10,9,8,0.6); border: 1px solid rgba(200,168,75,0.12); border-left: 3px solid rgba(200,168,75,0.35); padding: 1rem 1.25rem; max-width: 480px; } .tl-transcript-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.58em; color: #5a5040; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.6rem; } .tl-transcript-body { font-family: 'IBM Plex Mono', monospace; font-size: 0.8em; color: #8a8070; line-height: 1.8; } .tl-transcript-body strong { color: #f2ede4; font-weight: 500; } .tl-transcript-body em { color: rgba(200,80,80,0.9); font-style: normal; font-weight: 600; } /* silence entry — special */ .tl-entry.tl-silence { padding: 3rem 0; } .tl-silence .tl-what { font-size: 1.1em; font-style: italic; color: rgba(242,237,228,0.5); } /* read more */ .sources-block { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid rgba(200,168,75,0.2); } .sources-block h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.95em; color: #AB9E67; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.5rem; } .source-item { display: flex; gap: 1rem; margin-bottom: 0.9rem; align-items: baseline; } .source-year { font-family: 'IBM Plex Mono', monospace; font-size: 0.82em; color: rgba(200,168,75,0.4); min-width: 3.5rem; flex-shrink: 0; } .source-link { font-family: 'IBM Plex Sans', sans-serif; font-size: 0.78em; color: #AB9E67; text-decoration: none; line-height: 1.5; transition: color 0.2s; } .source-link:hover { color: #c8a84b; } .source-pub { font-family: 'IBM Plex Mono', monospace; font-size: 0.7em; color: #AB9E67; margin-left: 0.4rem; } /* closing statement */ .closing-silence { margin: 4rem 0 2rem; text-align: center; padding: 3rem 2rem; border-top: 1px solid rgba(200,168,75,0.1); border-bottom: 1px solid rgba(200,168,75,0.1); } .closing-silence p { font-family: 'Libre Baskerville', serif; font-size: 1.1em; font-style: italic; color: rgba(242,237,228,0.35); line-height: 1.8; margin: 0; } @media (max-width: 600px) { .timeline::before { left: 4rem; } .tl-entry { grid-template-columns: 4rem 1.5rem 1fr; } .tl-year { font-size: 0.58em; } } /* ============================================================ KALEIDO INVESTIGATE — style.css /investigate/style.css HOW THEMES WORK: Add ONE class to to activate a theme: ← editorial, most articles ← red alert, active breaking news ← surveillance/threat pieces ← grey-blue, archival long-form No class = default white (existing article behavior, unchanged) ============================================================ */ /* ============================================================ 1. UNIVERSAL RESET ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } :root { --article-accent: #e74c3c; --article-accent-light: rgba(231, 76, 60, 0.1); --article-accent-medium: rgba(231, 76, 60, 0.2); --article-accent-shadow: rgba(231, 76, 60, 0.2); --primary: #667eea; --secondary: #764ba2; --accent: #4ecdc4; --dark: #1a1a2e; --light: #f8f9fa; } /* ============================================================ 2. DEFAULT (unthemed) — only fires when NO theme class on body Scoped with :not() so theme rules always win cleanly. ============================================================ */ :not(.theme-newsprint):not(.theme-breaking):not(.theme-dark-intel):not(.theme-cold-case) > .theme-base, body:not([class]) , body.default-article { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; line-height: 1.8; color: var(--dark); background: #fff; } /* Simpler approach — use a low-specificity base then let themes override */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; line-height: 1.8; color: var(--dark); background: #fff; } /* ── NAV base ── */ nav { background: white; padding: 1rem 0; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } nav .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; display: flex; justify-content: space-between; align-items: center; } .logo { color: var(--dark); text-decoration: none; font-weight: 700; font-size: 1.5em; display: flex; align-items: center; } .logo img { height: 50px; width: auto; } .back-link { color: var(--accent); text-decoration: none; font-weight: 600; transition: opacity 0.3s; } .back-link:hover { opacity: 0.7; } /* ── MISC base ── */ iframe { min-height: flex; min-width: 300px; text-align: center; overflow: hidden; } .inline-image img { height: 600px; width: auto; display: block; padding: 30px; } .article-card img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; transform: translateZ(0); backface-visibility: hidden; } a, a:link, a:visited, a:hover, a:active { text-decoration: none; font-style: italic; } /* Prevent anchor italic from bleeding into article components */ .signal-note p, .signal-note .label, .highlight-box p, .highlight-box li, .highlight-box h3, .evidence-box li, .evidence-box h3, .takeaways li, .takeaways h3, .broadcast-block li, .stat-label, .article-meta, .read-more-links a, .read-more h3, .author-bio h4, .nav-section, .back-link, .article-category { font-style: normal; } /* ── HEADER base ── */ .header-design { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; position: absolute; top: 0; left: 0; z-index: 1; } .article-header { position: relative; height: 500px; background: #111; overflow: hidden; display: flex; align-items: flex-end; } .header-overlay { position: absolute; bottom: 0; left: 0; right: 0; top: 0; padding: 3rem 2rem; color: white; z-index: 2; } /* ── ARTICLE base ── */ .article-category { display: inline-block; background: #e74c3c; color: white; padding: 0.5rem 1.2rem; border-radius: 20px; font-size: 0.85em; font-weight: 600; margin-bottom: 1rem; } .article-title { font-size: 3em; font-weight: 700; margin-bottom: 1rem; line-height: 1.2; max-width: 1200px; margin-left: auto; margin-right: auto; } .article-meta { font-size: 1em; opacity: 0.9; max-width: 1200px; margin: 0 auto; } .article-container { max-width: 900px; margin: 0 auto; padding: 3rem 2rem; } .article-intro { font-size: 1.3em; color: #555; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 3px solid #e74c3c; font-weight: 400; line-height: 1.6; } .article-content h2 { font-size: 2em; color: var(--dark); margin: 2.5rem 0 1rem; line-height: 1.3; } .article-content h3 { font-size: 1em; color: var(--dark); margin: 1.5rem 0 1rem; line-height: 1.3; text-align: center; } .article-content p { margin-bottom: 1.5rem; font-size: 1.1em; color: #333; } .article-content strong { font-weight: 700; } /* ── COMPONENTS base ── */ .technical-box { background: #1f2937; color: #d1d5db; padding: 2rem; border-radius: 12px; margin: 2.5rem 0; font-family: 'Courier New', monospace; font-size: 0.95rem; line-height: 1.6; } .technical-box h4 { color: #dc2626; margin-bottom: 1rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .pullquote { font-size: clamp(1.1rem, 2vw, 1.4rem); font-style: italic; text-align: center; margin: 2.5rem auto; padding: 1.5rem 2rem; background: transparent; border: none; border-left: 4px solid rgba(150,150,150,0.4); color: inherit; border-radius: 0; display: block; width: fit-content; max-width: 100%; line-height: 1.6; } .highlight-box { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-left: 4px solid rgba(255,255,255,0.25); color: inherit; padding: 1.5rem 1.75rem; border-radius: 0; margin: 2.5rem 0; } .highlight-box h3 { margin-top: 0; margin-bottom: 0.75rem; font-size: 0.8em; letter-spacing: 0.1em; text-transform: uppercase; } .highlight-box ul { margin-left: 1.25rem; margin-top: 0.75rem; } .highlight-box li { margin-bottom: 0.6rem; line-height: 1.6; } .highlight-link { color: #fff; text-decoration: none; font-style: italic; font-weight: 200; transition: color 0.3s ease; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; } .stat-card { background: var(--dark); color: white; padding: 1.5rem 1.25rem; border-radius: 15px; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; } .stat-number { font-size: 3em; font-weight: 700; line-height: 1; display: block; } .stat-label { font-size: 0.8em; opacity: 0.9; line-height: 1.4; display: block; font-style: normal; } .takeaways { background: #fff5f5; border: 2px solid #e74c3c; border-radius: 15px; padding: 2rem; margin: 2.5rem 0; } .takeaways h3 { color: var(--dark); margin-top: 0; } .takeaways ul { margin-left: 1.5rem; margin-top: 1rem; } .takeaways li { margin-bottom: 1rem; color: #333; } .article-footer { border-top: 2px solid var(--light); margin-top: 4rem; padding-top: 2rem; } .author-bio { background: var(--light); padding: 2rem; border-radius: 5px; margin-bottom: 2rem; } .author-bio h4 { color: black; text-align: center; font-size: 5rem; margin-bottom: 1rem; } .share-section { text-align: center; padding: 2rem; background: var(--dark); color: white; border-radius: 15px; margin-bottom: 2rem; } .share-section h3 { margin-bottom: 1.5rem; } .share-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .share-btn { padding: 0.8rem 2rem; border-radius: 25px; text-decoration: none; font-weight: 600; transition: transform 0.3s; display: inline-block; } .share-btn:hover { transform: translateY(-3px); } .btn-twitter { background: #1DA1F2; color: white; } .btn-copy { background: var(--accent); color: white; } .read-more { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #e0e0e0; } .read-more h3 { color: #000; margin-bottom: 1rem; } .read-more-links { display: flex; flex-direction: column; gap: 0.75rem; } .read-more-links a { color: #000; border-left: 3px solid #000; padding-left: 1rem; transition: all 0.3s; } .read-more-links a:hover { border-left-color: #e74c3c; color: #e74c3c; } .back-to-top { position: fixed; bottom: 2rem; right: 2rem; background: #e74c3c; color: white; width: 50px; height: 50px; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 5px 20px rgba(0,0,0,0.2); transition: all 0.3s; font-size: 1.5em; } .back-to-top:hover { background: #c0392b; transform: translateY(-5px); } @keyframes fadeOut { 0%, 80% { opacity: 1; } 100% { opacity: 0; } } #smart-share-btn { transition: opacity 0.15s ease; } .related-audio { background: radial-gradient(circle at top left, rgba(0,255,255,0.05), transparent 80%); border-top: 1px solid rgba(0,255,255,0.15); border-bottom: 1px solid rgba(0,255,255,0.1); margin-top: 3rem; padding: 2rem; text-align: center; border-radius: 12px; box-shadow: 0 0 15px rgba(0,255,255,0.08); transition: background 0.3s ease, box-shadow 0.3s ease; } .related-audio:hover { background: radial-gradient(circle at top left, rgba(0,255,255,0.1), transparent 90%); box-shadow: 0 0 25px rgba(0,255,255,0.15); } .related-audio h3 { color: #0ff; font-weight: 600; margin-bottom: 0.6rem; letter-spacing: 0.5px; } .related-audio p { color: #aaa; font-size: 0.95rem; margin-bottom: 1.2rem; } .related-audio audio { width: 100%; max-width: 500px; border-radius: 6px; outline: none; box-shadow: 0 0 10px rgba(0,255,255,0.15); background: #111; } .related-audio .source { margin-top: 0.8rem; font-size: 0.9rem; color: #666; } .related-audio .source a { color: #0ff; border-bottom: 1px dotted #0ff; transition: color 0.2s ease; } .related-audio .source a:hover { color: #fff; } .corroboration-block, .x-post-card, .context-box, .analysis-box { border-radius: 8px; } .x-post-card { display: block; overflow: hidden; } .x-post-card iframe { display: block !important; vertical-align: top !important; } /* ============================================================ 3. INVESTIGATIVE SHARED COMPONENTS These classes are available in ALL themes. ============================================================ */ /* Broadcast block */ .broadcast-block { padding: 2rem 2.25rem; margin: 3rem 0; font-family: 'IBM Plex Mono', 'Courier New', monospace; } .broadcast-block .bcast-header { font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.25rem; padding-bottom: 0.75rem; } .broadcast-block .bcast-label { font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; margin: 1.25rem 0 0.5rem; } .broadcast-block ul { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; } .broadcast-block li { font-size: 0.78rem; line-height: 1.5; padding-left: 1rem; position: relative; } .broadcast-block li::before { content: '•'; position: absolute; left: 0; } .broadcast-block li .source { font-size: 0.7rem; } /* Evidence box */ .evidence-box { padding: 1.75rem 2rem; margin: 2.5rem 0; } .evidence-box h3 { font-family: 'IBM Plex Mono', 'Courier New', monospace; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 1.25rem; } .evidence-box ol { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.85rem; } .evidence-box li { font-size: 0.97rem; line-height: 1.65; } /* Signal note */ .signal-note { padding: 1.75rem 2rem; margin: 2.5rem 0; } .signal-note .label { font-family: 'IBM Plex Mono', 'Courier New', monospace; font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; display: block; margin-bottom: 0.75rem; } .signal-note p { font-size: 0.9rem !important; font-style: normal; margin-bottom: 0 !important; } /* Deck subtitle */ .deck { font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 300; max-width: 720px; line-height: 1.6; margin-bottom: 1.5rem; padding-left: 1.25rem; } /* Nav section label */ .nav-section { font-family: 'IBM Plex Mono', 'Courier New', monospace; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; } /* ============================================================ 4. RESPONSIVE base ============================================================ */ @media (max-width: 768px) { .article-title { font-size: 2em; } .article-intro { font-size: 1.1em; } .article-content h2 { font-size: 1.5em; } .article-header { height: 400px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } iframe { min-width: unset; width: 100%; } } /* ============================================================ 5. THEME: NEWSPRINT Ink on cream paper. Editorial. Newspaper gravitas. Usage: ============================================================ */ .theme-newsprint { --np-ink: #0E0E0E; --np-paper: #F2EDE4; --np-newsprint: #DDD8CF; --np-red: #C0392B; --np-red-lt: #E74C3C; --np-amber: #D4860A; --np-amber-lt: #F0A72A; --np-steel: #3A4A58; --np-mist: #7A8896; --np-rule: rgba(14,14,14,0.12); --np-rule-heavy: rgba(14,14,14,0.35); background: var(--np-paper) !important; color: var(--np-ink) !important; font-family: 'IBM Plex Sans', -apple-system, sans-serif !important; font-weight: 300; } .theme-newsprint nav { background: var(--np-ink) !important; border-bottom: 3px solid var(--np-red) !important; box-shadow: none !important; position: fixed !important; top: 0 !important; } .theme-newsprint .logo img { filter: brightness(0) invert(1); height: 28px !important; } .theme-newsprint .back-link { color: rgba(242,237,228,0.5) !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em; } .theme-newsprint .back-link:hover { color: var(--np-amber-lt) !important; opacity: 1; } .theme-newsprint .nav-section { color: var(--np-red-lt) !important; } .theme-newsprint .article-header { margin-top: 60px !important; height: 100vh !important; min-height: 520px; background: var(--np-ink) !important; border-left: 6px solid var(--np-red); } .theme-newsprint .header-design { opacity: 0.3 !important; mix-blend-mode: luminosity; } .theme-newsprint .article-category { background: rgba(192,57,43,0.1) !important; border: 1px solid rgba(192,57,43,0.5) !important; color: var(--np-red-lt) !important; border-radius: 0 !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.25em; } .theme-newsprint .article-title { font-family: 'Libre Baskerville', Georgia, serif !important; font-size: clamp(2rem, 5vw, 3.8rem) !important; color: #F2EDE4 !important; letter-spacing: -0.02em; margin-left: 0 !important; margin-right: 0 !important; max-width: 900px !important; } .theme-newsprint .article-meta { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(242,237,228,0.55) !important; max-width: unset !important; margin: 0 !important; } .theme-newsprint .deck { border-left: 2px solid var(--np-amber); color: rgba(242,237,228,0.65); } .theme-newsprint .article-container { max-width: 760px !important; padding: 4rem 2rem 6rem !important; } .theme-newsprint .article-intro { font-family: 'Libre Baskerville', Georgia, serif !important; font-style: italic; color: var(--np-steel) !important; border-bottom: 1px solid var(--np-rule-heavy) !important; font-size: clamp(1.1rem, 2vw, 1.35rem) !important; line-height: 1.7; padding-bottom: 2.5rem; margin-bottom: 2.5rem; } .theme-newsprint .article-content p { color: #2A2A2A !important; font-size: 1.05rem; line-height: 1.85; } .theme-newsprint .article-content strong { color: var(--np-ink) !important; } .theme-newsprint .article-content h2 { font-family: 'Libre Baskerville', Georgia, serif !important; font-size: clamp(1.4rem, 2.8vw, 1.9rem) !important; color: var(--np-ink) !important; border-top: 3px double var(--np-rule-heavy) !important; border-bottom: none !important; padding-top: 1.5rem; margin: 3.5rem 0 1.25rem; } .theme-newsprint .pullquote { font-family: 'Libre Baskerville', Georgia, serif !important; font-size: clamp(1.25rem, 2.5vw, 1.65rem) !important; font-weight: 700; color: var(--np-red) !important; background: none !important; border-left: none !important; border-top: 2px solid var(--np-red) !important; border-bottom: 2px solid var(--np-red) !important; border-radius: 0 !important; padding: 2rem 0 !important; margin: 2.5rem 0; line-height: 1.45; } .theme-newsprint .stats-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 1px !important; background: var(--np-rule-heavy) !important; border: 1px solid var(--np-rule-heavy); } .theme-newsprint .stat-card { background: #F7F3EC !important; border-radius: 0 !important; padding: 1.75rem 1.25rem; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0.4rem !important; } .theme-newsprint .stat-number { font-family: 'Libre Baskerville', serif !important; font-size: 2rem !important; color: var(--np-red) !important; display: block !important; line-height: 1 !important; } .theme-newsprint .stat-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--np-mist) !important; display: block !important; line-height: 1.4 !important; font-style: normal !important; } .theme-newsprint .highlight-box { background: rgba(192,57,43,0.05) !important; border: 1px solid rgba(192,57,43,0.2) !important; border-left: 4px solid var(--np-red) !important; border-radius: 0 !important; color: #2A2A2A !important; } .theme-newsprint .highlight-box h3 { color: var(--np-red) !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; text-align: left !important; } .theme-newsprint .highlight-box p { color: #2A2A2A !important; } .theme-newsprint .highlight-box li { color: #2A2A2A !important; } .theme-newsprint .takeaways { background: rgba(212,134,10,0.06) !important; border: 1px solid rgba(212,134,10,0.2) !important; border-left: 4px solid var(--np-amber) !important; border-radius: 0 !important; } .theme-newsprint .takeaways h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--np-amber) !important; } .theme-newsprint .takeaways li { color: #2A2A2A !important; } .theme-newsprint .read-more { border-top: 1px solid var(--np-rule-heavy) !important; } .theme-newsprint .read-more h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--np-mist) !important; } .theme-newsprint .read-more-links a { color: var(--np-steel) !important; border-left-color: var(--np-newsprint) !important; font-style: normal !important; } .theme-newsprint .read-more-links a:hover { color: var(--np-red) !important; border-left-color: var(--np-red) !important; } .theme-newsprint .article-footer { border-top: 3px double var(--np-rule-heavy) !important; } .theme-newsprint .author-bio { background: transparent !important; } .theme-newsprint .author-bio h4 { font-family: 'Libre Baskerville', serif; font-size: 0.95rem !important; font-style: italic; color: var(--np-mist) !important; font-weight: 400; text-align: left !important; } .theme-newsprint .back-to-top { background: var(--np-ink) !important; border: 1px solid var(--np-red) !important; border-radius: 0 !important; color: var(--np-red) !important; } .theme-newsprint .back-to-top:hover { background: var(--np-red) !important; color: var(--np-paper) !important; transform: none !important; } .theme-newsprint .broadcast-block { background: var(--np-ink) !important; color: var(--np-paper); border-left: 4px solid var(--np-red); } .theme-newsprint .broadcast-block .bcast-header { color: var(--np-red-lt) !important; border-bottom: 1px solid rgba(242,237,228,0.1); } .theme-newsprint .broadcast-block .bcast-label { color: var(--np-amber-lt) !important; } .theme-newsprint .broadcast-block li { color: rgba(242,237,228,0.75) !important; } .theme-newsprint .broadcast-block li::before { color: var(--np-red-lt) !important; } .theme-newsprint .broadcast-block li .source { color: rgba(242,237,228,0.35) !important; } .theme-newsprint .evidence-box { background: rgba(192,57,43,0.05) !important; border: 1px solid rgba(192,57,43,0.2) !important; border-left: 4px solid var(--np-red) !important; } .theme-newsprint .evidence-box h3 { color: var(--np-red) !important; } .theme-newsprint .evidence-box li { color: #2A2A2A !important; } .theme-newsprint .evidence-box li strong { color: var(--np-ink) !important; } .theme-newsprint .signal-note { background: rgba(58,74,88,0.07) !important; border: 1px solid rgba(58,74,88,0.15) !important; border-left: 4px solid var(--np-steel) !important; } .theme-newsprint .signal-note .label { color: var(--np-steel) !important; font-style: normal !important; } .theme-newsprint .signal-note p { color: var(--np-steel) !important; font-style: normal !important; } .theme-newsprint .related-audio { background: rgba(14,14,14,0.04) !important; box-shadow: none !important; } .theme-newsprint .related-audio h3 { color: var(--np-steel) !important; } .theme-newsprint .related-audio p { color: var(--np-mist) !important; } .theme-newsprint .related-audio .source a { color: var(--np-amber) !important; border-bottom-color: var(--np-amber) !important; } /* ============================================================ 6. THEME: BREAKING White background, aggressive red, maximum urgency. Usage: ============================================================ */ .theme-breaking { --br-red: #D0021B; --br-red-dk: #9B0015; --br-red-lt: #FF1A35; --br-ink: #111111; --br-gray: #444444; background: #fff !important; color: var(--br-ink) !important; font-family: 'IBM Plex Sans', -apple-system, sans-serif !important; } /* Breaking ticker */ .theme-breaking::before { content: '⚡ BREAKING ⚡ LIVE COVERAGE ⚡ DEVELOPING STORY ⚡ BREAKING ⚡ LIVE COVERAGE ⚡ DEVELOPING STORY ⚡'; display: block; background: var(--br-red); color: white; font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.15em; padding: 0.4rem 0; text-align: center; position: fixed; top: 0; left: 0; right: 0; z-index: 2000; } .theme-breaking nav { background: var(--br-ink) !important; border-bottom: 4px solid var(--br-red) !important; box-shadow: none !important; position: fixed !important; top: 24px !important; } .theme-breaking .logo img { filter: brightness(0) invert(1); height: 28px !important; } .theme-breaking .back-link { color: rgba(255,255,255,0.5) !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; } .theme-breaking .back-link:hover { color: var(--br-red-lt) !important; opacity: 1; } .theme-breaking .nav-section { color: var(--br-red-lt) !important; } .theme-breaking .article-header { margin-top: 84px !important; height: 85vh !important; min-height: 540px; background: var(--br-ink) !important; border-left: 8px solid var(--br-red); } .theme-breaking .header-design { opacity: 0.3 !important; mix-blend-mode: luminosity; } .theme-breaking .article-category { background: var(--br-red) !important; color: white !important; border-radius: 0 !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.25em; animation: flashPulse 2s ease-in-out infinite; } @keyframes flashPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } .theme-breaking .article-title { font-family: 'Bebas Neue', 'Arial Black', sans-serif !important; font-size: clamp(3rem, 7vw, 6rem) !important; color: #fff !important; letter-spacing: 0.02em; line-height: 0.95; margin-left: 0 !important; margin-right: 0 !important; max-width: 960px !important; } .theme-breaking .article-meta { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.45) !important; max-width: unset !important; margin: 0 !important; } .theme-breaking .deck { border-left: 3px solid var(--br-red); color: rgba(255,255,255,0.7); font-weight: 400; } .theme-breaking .article-container { max-width: 800px !important; padding: 4rem 2rem 6rem !important; } .theme-breaking .article-intro { font-size: clamp(1.1rem, 2vw, 1.3rem) !important; color: var(--br-ink) !important; border-bottom: none !important; border-left: 4px solid var(--br-red) !important; padding: 1.5rem !important; margin-bottom: 2.5rem; background: rgba(208,2,27,0.03); font-weight: 400; } .theme-breaking .article-content p { color: var(--br-gray) !important; font-size: 1.08rem; line-height: 1.8; } .theme-breaking .article-content strong { color: var(--br-ink) !important; font-weight: 700; } .theme-breaking .article-content h2 { font-family: 'Bebas Neue', 'Arial Black', sans-serif !important; font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important; color: var(--br-ink) !important; letter-spacing: 0.04em; border-left: 6px solid var(--br-red) !important; border-top: none !important; border-bottom: none !important; padding-left: 1rem !important; padding-top: 0 !important; margin: 3rem 0 1rem; line-height: 1.1; } .theme-breaking .pullquote { font-family: 'Bebas Neue', sans-serif !important; font-size: clamp(1.8rem, 3vw, 2.5rem) !important; letter-spacing: 0.05em; color: white !important; background: var(--br-red) !important; border: none !important; border-radius: 0 !important; padding: 2rem !important; margin: 3rem 0; line-height: 1.2; font-style: normal !important; } .theme-breaking .stats-grid { gap: 2px !important; background: var(--br-red) !important; } .theme-breaking .stat-card { background: var(--br-ink) !important; border-radius: 0 !important; } .theme-breaking .stat-number { color: var(--br-red-lt) !important; font-size: 2.5rem !important; } .theme-breaking .stat-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5) !important; } .theme-breaking .highlight-box { background: var(--br-red) !important; border: none !important; border-radius: 0 !important; color: white !important; } .theme-breaking .highlight-box h3 { color: white !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.2em; text-align: left !important; } .theme-breaking .highlight-box p { color: rgba(255,255,255,0.9) !important; } .theme-breaking .highlight-box li { color: rgba(255,255,255,0.9) !important; } .theme-breaking .takeaways { background: #fff5f5 !important; border: none !important; border-left: 6px solid var(--br-red) !important; border-radius: 0 !important; } .theme-breaking .takeaways h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--br-red) !important; } .theme-breaking .evidence-box { background: rgba(208,2,27,0.04) !important; border: 1px solid rgba(208,2,27,0.2) !important; border-left: 5px solid var(--br-red) !important; border-radius: 0 !important; } .theme-breaking .evidence-box h3 { color: var(--br-red) !important; } .theme-breaking .broadcast-block { background: var(--br-ink) !important; color: #eee; border-left: 5px solid var(--br-red) !important; border-radius: 0; } .theme-breaking .broadcast-block .bcast-header { color: var(--br-red-lt) !important; border-bottom-color: rgba(255,255,255,0.1); } .theme-breaking .broadcast-block .bcast-label { color: #FFB347 !important; } .theme-breaking .broadcast-block li { color: rgba(238,238,238,0.8) !important; } .theme-breaking .broadcast-block li::before { color: var(--br-red-lt) !important; } .theme-breaking .signal-note { background: rgba(17,17,17,0.04) !important; border-left: 4px solid var(--br-gray) !important; } .theme-breaking .signal-note .label { color: var(--br-gray) !important; } .theme-breaking .signal-note p { color: var(--br-gray) !important; } .theme-breaking .read-more h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; } .theme-breaking .read-more-links a { color: var(--br-ink) !important; border-left-color: var(--br-red) !important; font-style: normal !important; } .theme-breaking .read-more-links a:hover { color: var(--br-red) !important; } .theme-breaking .article-footer { border-top: 4px solid var(--br-red) !important; } .theme-breaking .author-bio { background: var(--br-ink) !important; border-radius: 0 !important; } .theme-breaking .author-bio h4 { color: rgba(255,255,255,0.5) !important; font-size: 0.9rem !important; font-style: italic; text-align: left !important; } .theme-breaking .back-to-top { background: var(--br-red) !important; border-radius: 0 !important; } .theme-breaking .back-to-top:hover { background: var(--br-red-dk) !important; transform: none !important; } /* ============================================================ 7. THEME: DARK INTEL Near-black. Amber & green terminal accents. Usage: ============================================================ */ .theme-dark-intel { --di-bg: #0A0D0F; --di-surface: #111518; --di-border: rgba(255,255,255,0.06); --di-green: #00FF88; --di-amber: #FFB627; --di-text: #C8D0D8; --di-muted: #7a8899; --di-white: #E8EDF2; background: var(--di-bg) !important; color: var(--di-text) !important; font-family: 'IBM Plex Sans', -apple-system, sans-serif !important; font-weight: 300; } .theme-dark-intel nav { background: rgba(10,13,15,0.96) !important; border-bottom: 1px solid var(--di-green) !important; box-shadow: 0 0 20px rgba(0,255,136,0.05) !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; backdrop-filter: blur(12px); } .theme-dark-intel nav .container { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100%; } .theme-dark-intel .logo img { filter: brightness(0) invert(1); height: 28px !important; } .theme-dark-intel .back-link { color: rgba(200,208,216,0.4) !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em; } .theme-dark-intel .back-link:hover { color: var(--di-green) !important; opacity: 1; } .theme-dark-intel .nav-section { color: var(--di-green) !important; } .theme-dark-intel .article-header { margin-top: 60px !important; height: 80vh !important; min-height: 500px; background: var(--di-bg) !important; border-left: 4px solid var(--di-green); } .theme-dark-intel .header-design { opacity: 0.55 !important; mix-blend-mode: luminosity; } .theme-dark-intel .article-category { background: rgba(0,255,136,0.08) !important; border: 1px solid rgba(0,255,136,0.3) !important; color: var(--di-green) !important; border-radius: 0 !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.58rem; letter-spacing: 0.3em; } .theme-dark-intel .article-title { font-family: 'IBM Plex Sans', sans-serif !important; font-size: clamp(2rem, 4.5vw, 3.5rem) !important; font-weight: 600 !important; color: var(--di-white) !important; letter-spacing: -0.01em; line-height: 1.1; margin-left: 0 !important; max-width: 900px !important; } .theme-dark-intel .article-meta { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(200,208,216,0.55) !important; max-width: unset !important; margin: 0 !important; } .theme-dark-intel .deck { border-left: 2px solid var(--di-green); color: rgba(200,208,216,0.6); } .theme-dark-intel .article-container { max-width: 760px !important; padding: 4rem 2rem 6rem !important; } .theme-dark-intel .article-intro { font-style: italic; color: var(--di-text) !important; border-bottom: 1px solid var(--di-border) !important; border-left: 3px solid var(--di-green) !important; padding-left: 1.25rem !important; padding-bottom: 2.5rem; margin-bottom: 2.5rem; line-height: 1.75; } .theme-dark-intel .article-content p { color: rgba(200,208,216,0.8) !important; font-size: 1.05rem; line-height: 1.85; } .theme-dark-intel .article-content strong { color: var(--di-white) !important; font-weight: 500; } .theme-dark-intel .article-content h2 { font-family: 'IBM Plex Mono', monospace !important; font-size: clamp(1.1rem, 2.2vw, 1.5rem) !important; font-weight: 500 !important; color: var(--di-green) !important; letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 1px solid rgba(0,255,136,0.15) !important; border-top: none !important; padding-bottom: 0.5rem !important; padding-top: 0 !important; margin: 3rem 0 1.25rem; } .theme-dark-intel .pullquote { font-family: 'IBM Plex Mono', monospace !important; font-size: clamp(1rem, 2vw, 1.3rem) !important; color: var(--di-amber) !important; background: rgba(255,182,39,0.05) !important; border: 1px solid rgba(255,182,39,0.15) !important; border-left: 4px solid var(--di-amber) !important; border-radius: 0 !important; text-align: left !important; padding: 1.5rem 1.75rem !important; font-style: normal !important; line-height: 1.6; } .theme-dark-intel .stats-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 1px !important; background: var(--di-border) !important; } .theme-dark-intel .stat-card { background: var(--di-surface) !important; border-radius: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0.4rem !important; padding: 1.5rem 1.25rem !important; } .theme-dark-intel .stat-number { font-family: 'IBM Plex Mono', monospace !important; font-size: 2rem !important; color: var(--di-green) !important; display: block !important; line-height: 1 !important; } .theme-dark-intel .stat-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--di-muted) !important; display: block !important; line-height: 1.4 !important; font-style: normal !important; color: rgba(200,208,216,0.65) !important; } .theme-dark-intel .highlight-box { background: rgba(0,255,136,0.04) !important; border: 1px solid rgba(0,255,136,0.12) !important; border-left: 4px solid var(--di-green) !important; border-radius: 0 !important; color: var(--di-text) !important; } .theme-dark-intel .highlight-box h3 { color: var(--di-green) !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.2em; text-align: left !important; } .theme-dark-intel .highlight-box p { color: rgba(200,208,216,0.75) !important; } .theme-dark-intel .highlight-box li { color: rgba(200,208,216,0.75) !important; } .theme-dark-intel .takeaways { background: rgba(255,182,39,0.04) !important; border: 1px solid rgba(255,182,39,0.1) !important; border-left: 4px solid var(--di-amber) !important; border-radius: 0 !important; } .theme-dark-intel .takeaways h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--di-amber) !important; } .theme-dark-intel .takeaways li { color: rgba(200,208,216,0.75) !important; } .theme-dark-intel .takeaways li strong { color: var(--di-white) !important; } .theme-dark-intel .broadcast-block { background: rgba(0,0,0,0.5) !important; border: 1px solid var(--di-border); border-left: 4px solid var(--di-green) !important; } .theme-dark-intel .broadcast-block .bcast-header { color: var(--di-green) !important; } .theme-dark-intel .broadcast-block .bcast-label { color: var(--di-amber) !important; } .theme-dark-intel .broadcast-block li { color: rgba(200,208,216,0.7) !important; } .theme-dark-intel .broadcast-block li::before { color: var(--di-green) !important; } .theme-dark-intel .broadcast-block li .source { color: var(--di-muted) !important; } .theme-dark-intel .evidence-box { background: rgba(0,255,136,0.03) !important; border: 1px solid rgba(0,255,136,0.1) !important; border-left: 4px solid var(--di-green) !important; } .theme-dark-intel .evidence-box h3 { color: var(--di-green) !important; } .theme-dark-intel .evidence-box li { color: rgba(200,208,216,0.8) !important; } .theme-dark-intel .evidence-box li strong { color: var(--di-white) !important; } .theme-dark-intel .signal-note { background: rgba(255,182,39,0.04) !important; border: 1px solid rgba(255,182,39,0.12) !important; border-left: 4px solid var(--di-amber) !important; } .theme-dark-intel .signal-note .label { color: var(--di-amber) !important; font-style: normal !important; } .theme-dark-intel .signal-note p { color: rgba(200,208,216,0.75) !important; font-style: normal !important; } .theme-dark-intel .read-more { border-top-color: var(--di-border) !important; } .theme-dark-intel .read-more h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--di-muted) !important; } .theme-dark-intel .read-more-links a { color: var(--di-green) !important; border-left-color: rgba(0,255,136,0.2) !important; font-style: normal !important; font-size: 0.82rem !important; line-height: 1.5 !important; padding: 0.5rem 0 !important; } .theme-dark-intel .read-more-links a:hover { color: var(--di-amber) !important; border-left-color: var(--di-amber) !important; } .theme-dark-intel .article-footer { border-top-color: var(--di-border) !important; } .theme-dark-intel .author-bio { background: transparent !important; } .theme-dark-intel .author-bio h4 { color: var(--di-muted) !important; font-size: 0.9rem !important; font-style: italic; text-align: left !important; } .theme-dark-intel .back-to-top { background: rgba(0,255,136,0.1) !important; border: 1px solid var(--di-green) !important; border-radius: 0 !important; color: var(--di-green) !important; } .theme-dark-intel .back-to-top:hover { background: var(--di-green) !important; color: var(--di-bg) !important; transform: none !important; } .theme-dark-intel .related-audio { background: rgba(0,255,136,0.03) !important; } .theme-dark-intel .related-audio h3 { color: var(--di-green) !important; } .theme-dark-intel .related-audio p { color: var(--di-muted) !important; } .theme-dark-intel .related-audio .source a { color: var(--di-amber) !important; border-bottom-color: var(--di-amber) !important; } /* ============================================================ 8. THEME: COLD CASE Grey-blue, archival, document-heavy long-form. Usage: ============================================================ */ .theme-cold-case { --cc-bg: #F0F2F5; --cc-paper: #E8ECF0; --cc-card: #DDE2E8; --cc-blue: #2C4A6E; --cc-blue-lt: #4A7AAB; --cc-slate: #5A6E82; --cc-ink: #1A2332; --cc-muted: #8A9AAA; --cc-rule: rgba(44,74,110,0.15); --cc-rule-hv: rgba(44,74,110,0.3); background: var(--cc-bg) !important; color: var(--cc-ink) !important; font-family: 'IBM Plex Sans', -apple-system, sans-serif !important; font-weight: 300; } .theme-cold-case nav { background: var(--cc-blue) !important; border-bottom: 2px solid var(--cc-blue-lt) !important; box-shadow: 0 2px 8px rgba(44,74,110,0.2) !important; position: fixed !important; top: 0 !important; } .theme-cold-case .logo img { filter: brightness(0) invert(1); height: 28px !important; } .theme-cold-case .back-link { color: rgba(240,242,245,0.55) !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em; } .theme-cold-case .back-link:hover { color: white !important; opacity: 1; } .theme-cold-case .nav-section { color: rgba(240,242,245,0.7) !important; } .theme-cold-case .article-header { margin-top: 60px !important; height: 70vh !important; min-height: 480px; background: var(--cc-blue) !important; } .theme-cold-case .header-design { opacity: 0.3 !important; mix-blend-mode: luminosity; } .theme-cold-case .article-category { background: transparent !important; border: 1px solid rgba(240,242,245,0.3) !important; color: rgba(240,242,245,0.7) !important; border-radius: 0 !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.58rem; letter-spacing: 0.25em; } .theme-cold-case .article-title { font-family: 'Libre Baskerville', Georgia, serif !important; font-size: clamp(1.8rem, 4vw, 3.2rem) !important; color: #F0F2F5 !important; letter-spacing: -0.015em; margin-left: 0 !important; max-width: 860px !important; line-height: 1.15; } .theme-cold-case .article-meta { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(240,242,245,0.3) !important; max-width: unset !important; margin: 0 !important; } .theme-cold-case .deck { border-left: 2px solid rgba(240,242,245,0.3); color: rgba(240,242,245,0.6); } .theme-cold-case .article-container { max-width: 780px !important; padding: 4rem 2rem 6rem !important; } .theme-cold-case .article-intro { font-family: 'Libre Baskerville', Georgia, serif !important; font-style: italic; color: var(--cc-slate) !important; border-bottom: 1px solid var(--cc-rule-hv) !important; font-size: clamp(1.05rem, 1.8vw, 1.25rem) !important; line-height: 1.75; padding-bottom: 2.5rem; margin-bottom: 2.5rem; } .theme-cold-case .article-content p { color: #2A3A4A !important; font-size: 1.05rem; line-height: 1.85; } .theme-cold-case .article-content strong { color: var(--cc-ink) !important; font-weight: 600; } .theme-cold-case .article-content h2 { font-family: 'Libre Baskerville', Georgia, serif !important; font-size: clamp(1.3rem, 2.5vw, 1.8rem) !important; color: var(--cc-blue) !important; border-bottom: 1px solid var(--cc-rule) !important; border-top: none !important; padding-bottom: 0.5rem !important; padding-top: 0 !important; margin: 3rem 0 1.25rem; } .theme-cold-case .pullquote { font-family: 'Libre Baskerville', serif !important; font-size: clamp(1.2rem, 2.2vw, 1.5rem) !important; color: var(--cc-blue) !important; background: var(--cc-paper) !important; border: 1px solid var(--cc-rule-hv) !important; border-left: 4px solid var(--cc-blue-lt) !important; border-radius: 0 !important; padding: 1.75rem 2rem !important; text-align: left !important; line-height: 1.55; } .theme-cold-case .stats-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 1px !important; background: var(--cc-rule-hv) !important; } .theme-cold-case .stat-card { background: var(--cc-paper) !important; border-radius: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0.4rem !important; } .theme-cold-case .stat-number { font-family: 'Libre Baskerville', serif !important; font-size: 2rem !important; color: var(--cc-blue) !important; display: block !important; line-height: 1 !important; } .theme-cold-case .stat-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cc-muted) !important; display: block !important; line-height: 1.4 !important; font-style: normal !important; } .theme-cold-case .highlight-box { background: var(--cc-paper) !important; border: 1px solid var(--cc-rule-hv) !important; border-left: 4px solid var(--cc-blue-lt) !important; border-radius: 0 !important; color: #2A3A4A !important; } .theme-cold-case .highlight-box h3 { color: var(--cc-blue) !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.2em; text-align: left !important; } .theme-cold-case .highlight-box p { color: #2A3A4A !important; } .theme-cold-case .highlight-box li { color: #2A3A4A !important; } .theme-cold-case .takeaways { background: white !important; border: 1px solid var(--cc-rule-hv) !important; border-left: 4px solid var(--cc-blue) !important; border-radius: 0 !important; } .theme-cold-case .takeaways h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cc-blue) !important; } .theme-cold-case .takeaways li { color: #2A3A4A !important; } .theme-cold-case .broadcast-block { background: var(--cc-blue) !important; color: #E8ECF0; border-left: 4px solid var(--cc-blue-lt) !important; } .theme-cold-case .broadcast-block .bcast-header { color: rgba(232,236,240,0.6) !important; } .theme-cold-case .broadcast-block .bcast-label { color: rgba(232,236,240,0.85) !important; } .theme-cold-case .broadcast-block li { color: rgba(232,236,240,0.7) !important; } .theme-cold-case .evidence-box { background: white !important; border: 1px solid var(--cc-rule-hv) !important; border-left: 4px solid var(--cc-blue) !important; } .theme-cold-case .evidence-box h3 { color: var(--cc-blue) !important; } .theme-cold-case .evidence-box li { color: #2A3A4A !important; } .theme-cold-case .signal-note { background: var(--cc-card) !important; border: 1px solid var(--cc-rule-hv) !important; border-left: 4px solid var(--cc-slate) !important; } .theme-cold-case .signal-note .label { color: var(--cc-slate) !important; font-style: normal !important; } .theme-cold-case .signal-note p { color: var(--cc-slate) !important; font-style: normal !important; } .theme-cold-case .read-more { border-top-color: var(--cc-rule-hv) !important; } .theme-cold-case .read-more h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cc-muted) !important; } .theme-cold-case .read-more-links a { color: var(--cc-blue) !important; border-left-color: var(--cc-rule-hv) !important; font-style: normal !important; } .theme-cold-case .read-more-links a:hover { color: var(--cc-blue-lt) !important; border-left-color: var(--cc-blue-lt) !important; } .theme-cold-case .article-footer { border-top-color: var(--cc-rule-hv) !important; } .theme-cold-case .author-bio { background: transparent !important; } .theme-cold-case .author-bio h4 { color: var(--cc-muted) !important; font-size: 0.9rem !important; font-style: italic; font-weight: 400; text-align: left !important; } .theme-cold-case .back-to-top { background: var(--cc-blue) !important; border-radius: 0 !important; color: white !important; border: none !important; } .theme-cold-case .back-to-top:hover { background: var(--cc-blue-lt) !important; transform: none !important; } .theme-cold-case .related-audio { background: var(--cc-paper) !important; box-shadow: none !important; } .theme-cold-case .related-audio h3 { color: var(--cc-blue) !important; } .theme-cold-case .related-audio p { color: var(--cc-muted) !important; } .theme-cold-case .related-audio .source a { color: var(--cc-blue-lt) !important; border-bottom-color: var(--cc-blue-lt) !important; } /* ============================================================ 9. RESPONSIVE — investigative themes ============================================================ */ @media (max-width: 768px) { .theme-newsprint .article-header, .theme-dark-intel .article-header, .theme-cold-case .article-header { height: 60vh !important; margin-top: 56px !important; } .theme-breaking .article-header { height: 65vh !important; margin-top: 80px !important; } .theme-breaking::before { font-size: 0.5rem; padding: 0.3rem 0; } .theme-newsprint .article-title, .theme-cold-case .article-title { font-size: 2rem !important; } .theme-breaking .article-title { font-size: 2.8rem !important; } .theme-dark-intel .article-title { font-size: 1.8rem !important; } .theme-newsprint .article-container, .theme-breaking .article-container, .theme-dark-intel .article-container, .theme-cold-case .article-container { padding: 2.5rem 1.25rem 4rem !important; } iframe { min-width: unset !important; width: 100%; } } /* ============================================================ 10. THEME: DISPATCH Dark parchment. Deep burnished gold. Long-form investigative with archival weight. Built for The Arrangement. Usage: ============================================================ */ .theme-dispatch { --dp-bg: #141210; /* lifted from #0f0d0a — less cave */ --dp-surface: #1e1a14; /* lifted from #181410 */ --dp-card: #252018; /* lifted from #1e1a14 */ --dp-gold: #d4b05a; /* slightly brighter/warmer */ --dp-gold-dk: #9a7e38; /* lifted */ --dp-gold-lt: #f0d47a; /* brighter highlight gold */ --dp-gold-dim: rgba(212,176,90,0.22); /* slightly more visible */ --dp-gold-faint: rgba(212,176,90,0.12); /* lifted from 0.09 */ --dp-red: #c83838; /* slightly brighter */ --dp-text: #d8d0be; /* lifted from #c8c0b0 — main body text */ --dp-ink: #f5f0e8; /* lifted from #f2ede4 — headlines/strong */ --dp-muted: #9a9080; /* lifted from #7a7060 — most important fix */ --dp-rule: rgba(212,176,90,0.18); /* slightly more visible */ --dp-rule-hv: rgba(212,176,90,0.32); /* lifted */ background: var(--dp-bg) !important; color: var(--dp-text) !important; font-family: 'IBM Plex Sans', -apple-system, sans-serif !important; font-weight: 300; } /* Force dark background on all structural containers */ .theme-dispatch .article-container { background: var(--dp-bg) !important; } .theme-dispatch .article-content { background: var(--dp-bg) !important; } .theme-dispatch .header-design { opacity: 0.65 !important; } .theme-dispatch nav { background: var(--dp-surface) !important; border-bottom: 2px solid var(--dp-gold-dk) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important; position: fixed !important; top: 0 !important; width: 100% !important; left: 0 !important; } .theme-dispatch .logo img { height: 28px !important; } .theme-dispatch .back-link { color: var(--dp-gold) !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em; opacity: 0.7; } .theme-dispatch .back-link:hover { color: var(--dp-gold-lt) !important; opacity: 1; } /* ── SMART SHARE POPUP ── */ #smart-share-btn { position: fixed; background: var(--dp-gold); color: #0f0d0a; border: none; border-radius: 6px; padding: 8px 14px; font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; z-index: 9999; display: none; align-items: center; gap: 6px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); transition: background 0.2s, opacity 0.15s ease; white-space: nowrap; pointer-events: all; } #smart-share-btn:hover { background: var(--dp-gold-lt); } #smart-share-btn.copied { background: #4caf50; color: white; } #smart-share-toast { position: fixed; bottom: 6rem; right: 2rem; background: #1e1a14; border: 1px solid var(--dp-gold); color: var(--dp-gold); font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.06em; padding: 10px 20px; border-radius: 4px; z-index: 9999; opacity: 1; transition: opacity 0.3s; pointer-events: none; } #smart-share-toast.show { opacity: 1; } .theme-dispatch .nav-section { color: var(--dp-gold) !important; } .theme-dispatch .article-header { margin-top: 60px !important; height: 80vh !important; min-height: 520px; background: var(--dp-surface) !important; border-left: 6px solid var(--dp-gold-dk); } .theme-dispatch .header-design { opacity: 0.65 !important; mix-blend-mode: luminosity; } .theme-dispatch .article-category { background: rgba(200,168,75,0.1) !important; border: 1px solid rgba(200,168,75,0.35) !important; color: var(--dp-gold) !important; border-radius: 0 !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.25em; } .theme-dispatch .article-title { font-family: 'Libre Baskerville', Georgia, serif !important; font-size: clamp(2rem, 5vw, 3.8rem) !important; color: var(--dp-ink) !important; letter-spacing: -0.02em; margin-left: 0 !important; margin-right: 0 !important; max-width: 900px !important; line-height: 1.1; } .theme-dispatch .article-meta { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(200,168,75,0.7) !important; max-width: unset !important; margin: 0 !important; } .theme-dispatch .deck { border-left: 2px solid var(--dp-gold-dk); color: rgba(232,224,208,0.65); } .theme-dispatch .header-content { position: relative; z-index: 2; } .theme-dispatch .article-container { max-width: 1000px !important; padding: 4rem 3rem 6rem !important; } .theme-dispatch .article-intro { font-family: 'Libre Baskerville', Georgia, serif !important; font-style: italic; color: var(--dp-muted) !important; border: none !important; border-left: 3px solid var(--dp-gold-dk) !important; font-size: clamp(1.05rem, 1.8vw, 1.25rem) !important; line-height: 1.75; padding: 1rem 1.5rem !important; margin-bottom: 2.5rem; background: var(--dp-gold-faint) !important; } .theme-dispatch .article-content p { color: #c8c0b0 !important; font-size: 1.03rem; line-height: 1.85; margin-bottom: 1.5rem !important; } .theme-dispatch .article-content strong { color: var(--dp-ink) !important; font-weight: 600; } .theme-dispatch .article-content h2 { font-family: 'Libre Baskerville', Georgia, serif !important; font-size: clamp(1.3rem, 2.5vw, 1.85rem) !important; color: var(--dp-gold) !important; border-top: 1px solid var(--dp-rule-hv) !important; border-bottom: none !important; padding-top: 1.5rem !important; margin: 3.5rem 0 1.25rem; letter-spacing: 0.01em; } .theme-dispatch .pullquote { font-family: 'Libre Baskerville', serif !important; font-size: clamp(1.2rem, 2.2vw, 1.55rem) !important; color: var(--dp-gold-lt) !important; background: var(--dp-card) !important; background-image: none !important; border: 1px solid var(--dp-rule-hv) !important; border-left: 4px solid var(--dp-gold) !important; border-radius: 0 !important; padding: 1.75rem 2rem !important; text-align: left !important; line-height: 1.55; font-style: italic !important; display: block; width: fit-content; max-width: 100%; margin-left: auto !important; margin-right: auto !important; } .theme-dispatch .stats-grid { gap: 1px !important; background: var(--dp-rule-hv) !important; grid-template-columns: repeat(3, 1fr) !important; margin: 2rem 0 !important; } .theme-dispatch .stat-card { background: var(--dp-card) !important; border-radius: 0 !important; padding: 1.5rem 1.5rem !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0.5rem !important; } .theme-dispatch .stat-number { font-family: 'Libre Baskerville', serif !important; font-size: 2.4rem !important; color: var(--dp-gold) !important; line-height: 1 !important; display: block !important; } .theme-dispatch .stat-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem !important; font-weight: 500 !important; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(200,190,170,0.75) !important; opacity: 1 !important; line-height: 1.6 !important; display: block !important; font-style: normal !important; } /* highlight-box — key facts, frameworks. Gold accent — primary information box */ .theme-dispatch .highlight-box { background: var(--dp-gold-dim) !important; background-image: none !important; border: 1px solid var(--dp-rule-hv) !important; border-left: 4px solid var(--dp-gold) !important; border-radius: 0 !important; color: var(--dp-text) !important; padding: 1.5rem 1.75rem !important; margin: 2rem 0 !important; } .theme-dispatch .highlight-box h3 { color: var(--dp-gold) !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; text-align: left !important; margin-bottom: 0.75rem !important; } .theme-dispatch .highlight-box p { color: var(--dp-text) !important; } .theme-dispatch .highlight-box li { color: var(--dp-text) !important; } /* takeaways — conclusions, what it means. Blue-steel accent — cool analytical tone */ .theme-dispatch .takeaways { background: rgba(80,110,150,0.07) !important; background-image: none !important; border: 1px solid rgba(100,140,200,0.15) !important; border-left: 4px solid rgba(100,160,240,0.45) !important; border-radius: 0 !important; padding: 1.5rem 1.75rem !important; margin: 2rem 0 !important; } .theme-dispatch .takeaways h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(140,190,255,0.8) !important; margin-bottom: 0.75rem !important; } .theme-dispatch .takeaways li { color: var(--dp-text) !important; } .theme-dispatch .broadcast-block { background: var(--dp-surface) !important; color: var(--dp-text); border-left: 4px solid var(--dp-gold-dk); } .theme-dispatch .broadcast-block .bcast-header { color: var(--dp-gold) !important; border-bottom: 1px solid var(--dp-rule); } .theme-dispatch .broadcast-block .bcast-label { color: var(--dp-gold-lt) !important; } .theme-dispatch .broadcast-block li { color: rgba(232,224,208,0.7) !important; } .theme-dispatch .broadcast-block li::before { color: var(--dp-gold) !important; } .theme-dispatch .broadcast-block li .source { color: var(--dp-muted) !important; } /* evidence-box — documented proof, receipts. Red-amber accent — heightened urgency */ .theme-dispatch .evidence-box { background: rgba(160,80,60,0.07) !important; border: 1px solid rgba(180,80,60,0.2) !important; border-left: 4px solid rgba(200,100,70,0.6) !important; border-radius: 0 !important; padding: 1.5rem 1.75rem !important; margin: 2rem 0 !important; } .theme-dispatch .evidence-box h3 { color: rgba(220,140,100,0.9) !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.75rem !important; } .theme-dispatch .evidence-box li { color: var(--dp-text) !important; } .theme-dispatch .evidence-box li strong { color: var(--dp-ink) !important; } /* signal-note — intelligence signals, sourced context. Gold-faint — quieter than highlight */ .theme-dispatch .signal-note { background: var(--dp-gold-faint) !important; border: 1px solid var(--dp-rule) !important; border-left: 4px solid var(--dp-gold-dk) !important; padding: 1.5rem 1.75rem !important; margin: 2rem 0 !important; } .theme-dispatch .signal-note .label { color: var(--dp-gold) !important; font-style: normal !important; display: block; margin-bottom: 0.6rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; } .theme-dispatch .signal-note a { color: var(--dp-gold) !important; } .theme-dispatch .signal-note p { color: var(--dp-text) !important; font-style: normal !important; margin-bottom: 0.5rem; } /* ── QUOTE BLOCK ── */ .theme-dispatch .quote-block { border-left: 3px solid var(--dp-gold); margin: 2.5rem 0; padding: 1.5rem 2rem; background: var(--dp-gold-faint); } .theme-dispatch .quote-block .speaker { font-family: 'IBM Plex Mono', monospace; font-size: 0.7em; color: var(--dp-gold); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.75rem; display: block; } .theme-dispatch .quote-block blockquote { font-family: 'Libre Baskerville', serif; font-size: 1.15em; font-style: italic; color: var(--dp-ink); margin: 0 0 0.75rem 0; line-height: 1.7; } .theme-dispatch .quote-block .attribution { font-family: 'IBM Plex Sans', sans-serif; font-size: 0.8em; color: var(--dp-muted); } /* ── QUOTE LAYER (stacked document quotes) ── */ .theme-dispatch .quote-layer { display: flex; flex-direction: column; gap: 0; margin: 3rem 0; border: 1px solid var(--dp-rule-hv); border-radius: 4px; overflow: hidden; } .theme-dispatch .quote-layer-header { background: var(--dp-gold-dim); padding: 0.75rem 1.5rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.65em; color: var(--dp-gold); letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid var(--dp-rule-hv); } .theme-dispatch .quote-entry { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--dp-rule); display: grid; grid-template-columns: 120px 1fr; gap: 1.5rem; align-items: start; background: var(--dp-gold-faint); } .theme-dispatch .quote-entry:nth-child(even) { background: rgba(200,168,75,0.06); } .theme-dispatch .quote-entry:last-child { border-bottom: none; } .theme-dispatch .quote-year { font-family: 'Bebas Neue', sans-serif; font-size: 2em; color: rgba(200,168,75,0.5); line-height: 1; padding-top: 4px; } .theme-dispatch .quote-text { font-family: 'Libre Baskerville', serif; font-size: 0.95em; font-style: italic; color: #d4cfc6; line-height: 1.6; margin-bottom: 0.4rem; } .theme-dispatch .quote-src { font-family: 'IBM Plex Mono', monospace; font-size: 0.62em; color: #8a7e6e; letter-spacing: 0.05em; } /* ── TIMELINE ── */ .theme-dispatch .timeline { margin: 3rem 0; position: relative; } .theme-dispatch .timeline::before { content: ''; position: absolute; left: 100px; top: 0; bottom: 0; width: 1px; background: var(--dp-rule-hv); } .theme-dispatch .timeline-entry { display: grid; grid-template-columns: 100px 1fr; gap: 2rem; margin-bottom: 2.5rem; position: relative; align-items: start; } .theme-dispatch .timeline-entry::before { content: ''; position: absolute; left: 100px; top: -10px; width: 9px; height: 9px; background: var(--dp-gold); border-radius: 50%; transform: translateX(-4px); } .theme-dispatch .timeline-year { font-family: 'IBM Plex Mono', monospace; font-size: 0.75em; color: var(--dp-gold); text-align: right; padding-top: 0; line-height: 1.2; } .theme-dispatch .timeline-content strong { display: block; color: var(--dp-ink); font-family: 'IBM Plex Sans', sans-serif; font-size: 0.95em; font-weight: 600; margin-bottom: 0.3rem; } .theme-dispatch .timeline-content p { font-size: 0.88em; color: var(--dp-muted); margin: 0; line-height: 1.5; } /* ── DATELINE BOX ── */ .theme-dispatch .dateline-box { background: var(--dp-gold-dim); border: 1px solid var(--dp-rule-hv); border-radius: 4px; padding: 1.5rem 2rem; margin: 2.5rem 0; font-family: 'IBM Plex Mono', monospace; font-size: 0.82em; color: var(--dp-gold); line-height: 1.8; } .theme-dispatch .dateline-box .date { font-size: 0.7em; opacity: 0.6; margin-bottom: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase; display: block; } /* ── WARNING BOX ── */ .theme-dispatch .warning-box { background: rgba(180,40,40,0.1); border: 1px solid rgba(180,40,40,0.35); border-radius: 4px; padding: 1.5rem 2rem; margin: 2.5rem 0; } .theme-dispatch .warning-box h3 { color: #c85050; font-family: 'IBM Plex Mono', monospace; font-size: 0.75em; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.75rem 0; } .theme-dispatch .warning-box p { color: #c4bdb4; font-size: 0.9em; margin: 0; line-height: 1.6; } .theme-dispatch figure { margin: 3rem 0; } .theme-dispatch figcaption { font-family: 'IBM Plex Mono', 'Courier New', monospace; font-size: 0.62rem; color: var(--dp-muted); letter-spacing: 0.06em; line-height: 1.6; padding-top: 0.6rem; border-top: 1px solid var(--dp-rule); margin-top: 0.5rem; } .theme-dispatch figure img { width: 100%; display: block; } .theme-dispatch .read-more { border-top: 1px solid var(--dp-rule-hv) !important; } .theme-dispatch .read-more h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dp-muted) !important; } .theme-dispatch .read-more h3 * { color: var(--dp-muted) !important; } .theme-dispatch .read-more-links a { color: var(--dp-gold) !important; border-left-color: var(--dp-rule-hv) !important; border-left-width: 3px !important; border-left-style: solid !important; font-style: normal !important; padding-left: 1rem; display: block; } .theme-dispatch .read-more-links a:hover { color: var(--dp-gold-lt) !important; border-left-color: var(--dp-gold) !important; } .theme-dispatch .article-footer { border-top: 1px solid var(--dp-rule-hv) !important; background: var(--dp-bg) !important; } .theme-dispatch .author-bio { background: transparent !important; } .theme-dispatch .author-bio h4 { color: var(--dp-muted) !important; font-size: 0.9rem !important; font-style: italic; font-weight: 400; text-align: left !important; } .theme-dispatch .back-to-top { background: var(--dp-surface) !important; border: 1px solid var(--dp-gold-dk) !important; border-radius: 0 !important; color: var(--dp-gold) !important; } .theme-dispatch .back-to-top:hover { background: var(--dp-gold-dk) !important; color: var(--dp-bg) !important; transform: none !important; } .theme-dispatch .related-audio { background: var(--dp-gold-faint) !important; box-shadow: none !important; border-color: var(--dp-rule) !important; } .theme-dispatch .related-audio h3 { color: var(--dp-gold) !important; } .theme-dispatch .related-audio p { color: var(--dp-muted) !important; } .theme-dispatch .related-audio .source a { color: var(--dp-gold-lt) !important; border-bottom-color: var(--dp-gold-lt) !important; } @media (max-width: 768px) { .theme-dispatch .article-header { height: 60vh !important; margin-top: 56px !important; } .theme-dispatch .article-title { font-size: 2rem !important; } .theme-dispatch .article-container { padding: 2.5rem 1.25rem 4rem !important; } .theme-dispatch .stats-grid { grid-template-columns: repeat(2, 1fr) !important; max-width: 100% !important; } } @media (max-width: 480px) { .theme-dispatch .stats-grid { grid-template-columns: 1fr 1fr !important; } } /* ============================================================ SHARED ARTICLE COMPONENTS — migrated from inline styles ============================================================ */ /* Citation superscripts — used across all Investigate articles */ .cite { color: rgba(200,168,75,0.6); text-decoration: none; font-size: 0.6em; font-style: normal; font-weight: 300; vertical-align: super; padding: 0 1px; transition: color 0.15s ease, text-shadow 0.15s ease; } .cite:hover { color: #fff !important; text-shadow: 0 0 8px rgba(200,168,75,0.7); text-decoration: underline; } /* Portrait cards — person profiles with name/role/outcome */ .portrait { border: 1px solid rgba(200,168,75,0.15); border-left: 4px solid rgba(200,168,75,0.3); background: rgba(200,168,75,0.04); padding: 1.5rem 1.75rem; margin: 2rem 0; transition: border-left-color 0.2s ease, background 0.2s ease; } .portrait:hover { border-left-color: var(--dp-gold, #c8a84b); background: rgba(200,168,75,0.08); } .portrait-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.5em; letter-spacing: 0.05em; color: rgba(200,168,75,0.9); line-height: 1; margin-bottom: 0.25rem; } .portrait-role { font-family: 'IBM Plex Mono', monospace; font-size: 0.65em; color: rgba(200,168,75,0.5); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.9rem; } .portrait-what { font-size: 0.88em; line-height: 1.7; color: rgba(237,231,217,0.85); margin-bottom: 0.5rem; } .portrait-quote { font-style: italic; font-size: 0.85em; color: rgba(237,231,217,0.65); border-left: 2px solid rgba(200,168,75,0.2); padding-left: 0.75rem; margin: 0.75rem 0; } .portrait-outcome { font-family: 'IBM Plex Mono', monospace; font-size: 0.62em; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(200,80,80,0.7); margin-top: 0.75rem; } /* Epigraph — opening block quote with decorative quotemark */ .epigraph { font-family: 'Libre Baskerville', serif; font-style: italic; font-size: 1.35em; color: rgba(237,231,217,0.75); line-height: 1.6; text-align: center; padding: 2.5rem 2rem; margin: 0 0 2.5rem; border-top: 1px solid rgba(200,168,75,0.15); border-bottom: 1px solid rgba(200,168,75,0.15); position: relative; } .epigraph::before { content: '\201C'; font-size: 3em; color: rgba(200,168,75,0.15); position: absolute; top: 0.1em; left: 1rem; line-height: 1; font-style: normal; } .epigraph-attr { display: block; font-style: normal; font-family: 'IBM Plex Mono', monospace; font-size: 0.52em; color: rgba(200,168,75,0.45); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 1rem; } /* Precedent grid — historical events table */ .precedent-grid { display: flex; flex-direction: column; gap: 0; margin: 2rem 0; border: 1px solid rgba(200,168,75,0.15); } .precedent-row { display: grid; grid-template-columns: 5rem 1fr 8rem; gap: 0; border-bottom: 1px solid rgba(200,168,75,0.08); transition: background 0.15s ease; } .precedent-row:last-child { border-bottom: none; } .precedent-row:hover { background: rgba(200,168,75,0.04); } .precedent-year { font-family: 'IBM Plex Mono', monospace; font-size: 0.72em; color: rgba(200,168,75,0.5); padding: 0.85rem 0.75rem; border-right: 1px solid rgba(200,168,75,0.08); display: flex; align-items: center; } .precedent-event { font-family: 'IBM Plex Sans', sans-serif; font-size: 0.82em; color: #ede8db; padding: 0.85rem 1rem; line-height: 1.5; } .precedent-event strong { color: #c8a84b; font-weight: 600; } .precedent-verdict { font-family: 'IBM Plex Mono', monospace; font-size: 0.62em; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.85rem 0.75rem; border-left: 1px solid rgba(200,168,75,0.08); display: flex; align-items: center; color: rgba(180,60,60,0.7); } /* Flow steps — chain of custody / process flows */ .flow-chain { margin: 1.5rem 0; border-left: 2px solid rgba(200,168,75,0.15); padding-left: 0; } .flow-step { display: flex; align-items: flex-start; gap: 1rem; padding: 0.75rem 1rem; border-left: 2px solid rgba(200,168,75,0.2); position: relative; } .flow-step::before { content: '→'; color: rgba(200,168,75,0.5); font-family: 'IBM Plex Mono', monospace; font-size: 0.8em; flex-shrink: 0; margin-top: 0.1rem; } .flow-step:first-child::before { content: '◉'; color: #c8a84b; } .flow-step-text { font-size: 0.9em; line-height: 1.6; } .flow-step-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.6em; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(200,168,75,0.5); display: block; margin-bottom: 0.2rem; } /* Series nav — prev/next article navigation */ .series-nav-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 3rem 0 0; padding: 1.25rem 0; border-top: 1px solid rgba(200,168,75,0.12); } .series-nav-prev, .series-nav-next { font-family: 'IBM Plex Mono', monospace; font-size: 0.68em; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(200,168,75,0.6); text-decoration: none; transition: color 0.15s ease; } .series-nav-prev:hover, .series-nav-next:hover { color: #c8a84b; } .series-nav-title { font-family: 'IBM Plex Sans', sans-serif; font-size: 0.8em; color: rgba(237,231,217,0.5); text-align: center; font-style: italic; } /* Receipts journalism bar */ .receipts-bar { font-size: 12px; font-family: 'IBM Plex Mono', monospace; color: rgba(242,237,228,0.4); border-top: 1px solid rgba(242,237,228,0.08); border-bottom: 1px solid rgba(242,237,228,0.08); padding: 0.75rem 0; margin-bottom: 2rem; } .receipts-bar strong { color: rgba(242,237,228,0.6); } .receipts-bar a { color: var(--dp-gold-lt, #c8a84b); text-decoration: none; } @media (max-width: 600px) { .precedent-row { grid-template-columns: 4rem 1fr; } .precedent-verdict { display: none; } .epigraph { font-size: 1.1em; padding: 2rem 1.25rem; } .portrait { padding: 1.25rem; } .series-nav-bar { flex-direction: column; align-items: flex-start; gap: 0.75rem; } } /* Impact banner / receipts journalism bar */ .impact-banner { font-family: 'IBM Plex Mono', monospace; font-size: 0.72em; letter-spacing: 0.04em; color: rgba(200,168,75,0.5); border-top: 1px solid rgba(200,168,75,0.12); border-bottom: 1px solid rgba(200,168,75,0.12); padding: 0.75rem 0; margin-bottom: 2.5rem; line-height: 1.6; } .impact-banner strong { color: rgba(200,168,75,0.75); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.95em; } .impact-banner a { color: var(--dp-gold-lt, #c8a84b) !important; text-decoration: none; } .impact-banner a:hover { text-decoration: underline; } /* ============================================================ EDITORIAL LAYOUT COMPONENTS ============================================================ */ /* Photo pair — two images side by side, centered, smaller at rest */ .photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin: 2.5rem auto 0; max-width: 780px; padding: 0 1rem; } .photo-pair figure { margin: 0; } .photo-pair a { display: block; } .photo-pair img { width: 100%; display: block; border-radius: 4px; filter: grayscale(30%); transition: transform 0.5s ease, filter 0.5s ease, box-shadow 0.5s ease; cursor: zoom-in; } .photo-pair img:hover { transform: scale(1.15); filter: grayscale(0%); box-shadow: 0 12px 40px rgba(0,0,0,0.7); position: relative; z-index: 10; } .photo-pair figcaption { margin-top: 0.5rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.58em; color: rgba(200,168,75,0.4); letter-spacing: 0.04em; line-height: 1.5; } @media (max-width: 600px) { .photo-pair { grid-template-columns: 1fr; max-width: 100%; } } /* Chapter break — typographic section closer, gold italic centered */ .chapter-break { text-align: center; margin: 3rem 0; padding: 2rem 0; border-top: 1px solid rgba(200,168,75,0.15); border-bottom: 1px solid rgba(200,168,75,0.15); } .chapter-break span { font-family: 'Libre Baskerville', serif; font-style: italic; font-size: clamp(1.3rem, 2.5vw, 1.8rem); color: var(--dp-gold-lt, #c8a84b); letter-spacing: 0.01em; line-height: 1.4; } /* Caption italic — editorial caption below photo pairs */ .caption-italic { font-family: 'Libre Baskerville', serif; font-style: italic; font-size: 0.88em; color: rgba(200,190,170,0.65); line-height: 1.8; text-align: center; max-width: 780px; margin: 1.25rem auto 1.75rem; padding: 0 1rem; } @media (max-width: 600px) { .chapter-break span { font-size: 1.2rem; } .photo-pair { grid-template-columns: 1fr; max-width: 100%; } } /* Override theme-dispatch global figcaption border inside photo-pair */ .theme-dispatch .photo-pair figcaption { border-top: none !important; padding-top: 0.4rem !important; font-size: 0.58em !important; color: rgba(200,168,75,0.4) !important; letter-spacing: 0.04em !important; } /* Ordinal labels in speech blockquotes — First/Second/Third etc */ .theme-dispatch .quote-block blockquote strong { color: var(--dp-gold, #c8a84b) !important; font-style: normal; } /* Receipts / sources section */ .receipts-section { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(200,168,75,0.15); } .receipts-section h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(200,168,75,0.6); margin-bottom: 1.5rem; } .receipts-section ol { list-style: none !important; counter-reset: source-counter; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; } .receipts-section ol li { counter-increment: source-counter; font-size: 0.82em; line-height: 1.6; color: rgba(200,190,170,0.55); padding-left: 2.5rem; position: relative; } .receipts-section ol li::before { content: "[" counter(source-counter) "]"; position: absolute; left: 0; top: 0; color: #0066cc; font-weight: 600; font-size: 0.9em; min-width: 2rem; } .receipts-section a { color: rgba(200,168,75,0.7) !important; text-decoration: none; } .receipts-section a:hover { color: var(--dp-gold-lt, #c8a84b) !important; text-decoration: underline; } /* theme-dispatch receipts overrides */ .theme-dispatch .receipts-section ol li { color: var(--dp-text); line-height: 1.75; padding-left: 3rem; position: relative; } .theme-dispatch .receipts-section ol li::before { color: var(--dp-gold-lt, #d4b86a); position: absolute; left: 0; top: 0; min-width: 3rem; text-align: left; } .theme-dispatch .receipts-section ol li a { color: var(--dp-gold-lt, #d4b86a) !important; } .theme-dispatch .receipts-section ol li a:hover { text-decoration: underline; } .theme-dispatch .receipts-section a { color: var(--dp-gold-lt, #d4b86a) !important; } .theme-dispatch .receipts-section a:hover { color: var(--dp-gold-lt) !important; } /* Radio / episode link block */ .radio-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(200,168,75,0.5); text-align: center; margin-top: 2.5rem; margin-bottom: 0.35rem; } .radio-sublabel { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.08em; color: rgba(200,168,75,0.3); text-align: center; margin-bottom: 0; } .radio-episode-link { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 0.68em; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(0,210,200,0.5); text-decoration: none; padding: 0.6rem 1.25rem; border: 1px solid rgba(0,210,200,0.15); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .radio-episode-link:hover { color: rgba(0,230,220,0.8); border-color: rgba(0,210,200,0.35); background: rgba(0,210,200,0.04); } /* Series next — bottom of article CTA to next piece */ .series-next { display: block; text-decoration: none; margin: 3rem 0 0; padding: 2rem 2rem 2rem 2.5rem; border: 1px solid rgba(200,168,75,0.15); border-left: 4px solid rgba(200,168,75,0.35); background: rgba(200,168,75,0.03); transition: background 0.25s ease, border-color 0.25s ease, border-left-color 0.25s ease; } .series-next:hover { background: rgba(200,168,75,0.07); border-color: rgba(200,168,75,0.3); border-left-color: var(--dp-gold, #c8a84b); } .series-next-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(200,168,75,0.45); margin-bottom: 0.5rem; } .series-next-title { font-family: 'IBM Plex Sans', sans-serif; font-size: 1.3rem; font-weight: 600; color: var(--dp-gold-lt, #c8a84b); line-height: 1.2; margin-bottom: 0.4rem; } .series-next-deck { font-family: 'Libre Baskerville', serif; font-style: italic; font-size: 0.88rem; color: rgba(200,190,170,0.55); line-height: 1.6; } .series-next-arrow { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(200,168,75,0.4); margin-top: 1rem; transition: color 0.2s ease; } .series-next:hover .series-next-arrow { color: var(--dp-gold, #c8a84b); } /* theme-dispatch series-next overrides */ .theme-dispatch .series-next { border-color: rgba(200,168,75,0.15) !important; border-left-color: rgba(200,168,75,0.35) !important; background: rgba(200,168,75,0.03) !important; } .theme-dispatch .series-next:hover { background: rgba(200,168,75,0.07) !important; border-left-color: #c8a84b !important; } .theme-dispatch .series-next-label { color: rgba(200,168,75,0.45) !important; } .theme-dispatch .series-next-title { color: #c8a84b !important; } .theme-dispatch .series-next-deck { color: rgba(200,190,170,0.55) !important; } .theme-dispatch .series-next-arrow { color: rgba(200,168,75,0.4) !important; } .theme-dispatch .series-next:hover .series-next-arrow { color: #c8a84b !important; } /* Asymmetry blocks — numbered contained sections */ .asymmetry-block { counter-increment: asymmetry-counter; border: 1px solid rgba(200,168,75,0.12); border-left: 4px solid rgba(200,168,75,0.25); background: rgba(200,168,75,0.02); padding: 1.25rem 1.5rem; margin: 0 0 0.5rem; position: relative; } .asymmetry-block:first-of-type { margin-top: 1.5rem; } .asymmetry-block h3 { font-family: 'IBM Plex Mono', monospace !important; font-size: 0.68rem !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; color: rgba(200,168,75,0.7) !important; text-align: left !important; margin: 0 0 0.6rem !important; padding-left: 2rem; } .asymmetry-block h3::before { content: counter(asymmetry-counter, upper-roman) " — "; color: rgba(200,168,75,0.35); font-size: 0.85em; position: absolute; left: 1.5rem; } .asymmetry-block p { margin: 0 !important; font-size: 0.95em; line-height: 1.75; } /* Reset counter on the parent */ .article-content { counter-reset: asymmetry-counter; } /* VS comparison blocks — side by side contrasting cases */ .vs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2rem 0; } .vs-cell { padding: 1.25rem 1.5rem; border: 1px solid rgba(200,168,75,0.12); border-top: 3px solid rgba(200,80,80,0.4); background: rgba(200,80,80,0.03); } .vs-cell.left { border-top-color: rgba(200,168,75,0.5); background: rgba(200,168,75,0.03); } .vs-label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.75rem; } .vs-cell.left .vs-label { color: rgba(200,168,75,0.6); } .vs-cell .vs-label { color: rgba(200,100,80,0.7); } @media (max-width: 640px) { .vs-row { grid-template-columns: 1fr; } } /* Officer memorial — four cards for fallen officers */ .officer-memorial { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 2rem 0; background: rgba(200,168,75,0.08); border: 1px solid rgba(200,168,75,0.12); } .officer-card { background: rgba(10,8,6,0.8); padding: 1.5rem 1.75rem; border-left: 3px solid rgba(200,168,75,0.15); transition: border-left-color 0.2s ease, background 0.2s ease; } .officer-card:hover { border-left-color: rgba(200,168,75,0.5); background: rgba(200,168,75,0.03); } .officer-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.3em; letter-spacing: 0.05em; color: rgba(237,231,217,0.9); line-height: 1; margin-bottom: 0.6rem; } .officer-detail { font-family: 'IBM Plex Mono', monospace; font-size: 0.62em; letter-spacing: 0.04em; color: rgba(200,168,75,0.45); line-height: 1.8; } @media (max-width: 600px) { .officer-memorial { grid-template-columns: 1fr; } } /* Institution header blocks — purge article */ .institution-header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; border: 1px solid rgba(200,168,75,0.15); border-left: 4px solid rgba(200,168,75,0.4); background: rgba(200,168,75,0.03); margin: 2.5rem 0 1rem; } .institution-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(200,168,75,0.45); display: block; margin-bottom: 0.3rem; } .institution-name { font-family: 'Libre Baskerville', serif !important; font-size: 1.4rem !important; color: #c8a84b !important; margin: 0 !important; line-height: 1.2; } .institution-status { font-family: 'IBM Plex Mono', monospace; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.35rem 0.75rem; border: 1px solid; white-space: nowrap; } .status-gutted { color: rgba(200,80,80,0.8); border-color: rgba(200,80,80,0.25); background: rgba(200,80,80,0.06); } .status-redirected { color: rgba(200,140,60,0.8); border-color: rgba(200,140,60,0.25); background: rgba(200,140,60,0.06); } .status-weaponized { color: rgba(180,60,60,0.9); border-color: rgba(180,60,60,0.3); background: rgba(180,60,60,0.08); } .status-renamed { color: rgba(120,160,200,0.8); border-color: rgba(120,160,200,0.2); background: rgba(120,160,200,0.05); } /* Dynasty grid — Board of Peace data cards */ .dynasty-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(200,168,75,0.1); border: 1px solid rgba(200,168,75,0.15); margin: 2rem 0; } .dynasty-card { background: rgba(10,8,6,0.9); padding: 1.5rem 1.75rem; border-left: 3px solid rgba(200,168,75,0.15); transition: background 0.2s ease, border-left-color 0.2s ease; } .dynasty-card:hover { background: rgba(200,168,75,0.04); border-left-color: rgba(200,168,75,0.45); } .dynasty-name { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(200,168,75,0.55); margin-bottom: 0.3rem; } .dynasty-role { font-family: 'IBM Plex Sans', sans-serif; font-size: 0.82em; color: rgba(237,231,217,0.6); margin-bottom: 0.75rem; line-height: 1.5; } .dynasty-amount { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; color: #c8a84b; line-height: 1; margin-bottom: 0.5rem; letter-spacing: 0.03em; } .dynasty-detail { font-size: 0.78em; line-height: 1.7; color: rgba(200,190,170,0.5); } /* Succession compare — side by side dynasty columns */ .succession-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2rem 0; } .succession-col { padding: 1.25rem 1.5rem; border: 1px solid rgba(200,168,75,0.12); border-top: 3px solid rgba(200,168,75,0.3); background: rgba(200,168,75,0.02); } .succession-leader { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; color: #c8a84b; letter-spacing: 0.04em; line-height: 1; margin-bottom: 0.3rem; } .succession-heir { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(200,168,75,0.4); margin-bottom: 0.75rem; } .succession-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .succession-items li { font-size: 0.82em; line-height: 1.6; color: rgba(200,190,170,0.65); padding-left: 0.75rem; border-left: 2px solid rgba(200,168,75,0.15); } @media (max-width: 800px) { .dynasty-grid { grid-template-columns: 1fr; } .succession-compare { grid-template-columns: 1fr; } } /* Silence grid — Taxonomy of Quiet cards */ .silence-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(200,168,75,0.08); border: 1px solid rgba(200,168,75,0.12); margin: 2rem 0; } .silence-card { background: rgba(10,8,6,0.9); padding: 1.25rem 1.5rem; border-left: 3px solid rgba(200,80,80,0.2); transition: background 0.2s ease, border-left-color 0.2s ease; } .silence-card:hover { background: rgba(200,80,80,0.04); border-left-color: rgba(200,80,80,0.5); } .silence-type { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: 0.05em; color: rgba(237,231,217,0.85); line-height: 1; margin-bottom: 0.25rem; } .silence-target { font-family: 'IBM Plex Mono', monospace; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(200,80,80,0.6); margin-bottom: 0.6rem; } .silence-example { font-size: 0.82em; line-height: 1.7; color: rgba(200,190,170,0.6); } /* The line — Espionage Act prosecution timeline */ .the-line { font-family: 'IBM Plex Mono', monospace; font-size: 0.72em; line-height: 2.2; color: rgba(200,190,170,0.55); padding: 1.5rem 1.75rem; border: 1px solid rgba(200,168,75,0.12); border-left: 4px solid rgba(200,80,80,0.3); background: rgba(200,80,80,0.03); margin: 2rem 0; } .the-line span { color: rgba(237,231,217,0.8); font-weight: 500; } .line-charge { color: rgba(200,80,80,0.7) !important; font-weight: 400; } @media (max-width: 640px) { .silence-grid { grid-template-columns: 1fr; } } /* Responsive video embed */ .video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-top: 1rem; margin-left: -1.75rem; margin-right: -1.75rem; border-radius: 0; } .video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Video embed outside signal-note — full width, rounded */ .article-content > .video-embed, figure .video-embed { margin-left: 0; margin-right: 0; border-radius: 4px; } /* ============================================================ LIVE UPDATES FEED — Article X Real Time ============================================================ */ .live-feed-wrapper { margin: 2rem 0 2.5rem; border: 1px solid rgba(200,168,75,0.2); border-left: 4px solid rgba(200,80,80,0.6); background: rgba(10,8,6,0.6); } .live-feed-header { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1.25rem; border-bottom: 1px solid rgba(200,168,75,0.1); background: rgba(200,80,80,0.05); } .live-feed-badge { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(200,80,80,0.9); animation: pulse-red 2s infinite; } @keyframes pulse-red { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .live-feed-hint { font-family: 'IBM Plex Mono', monospace; font-size: 0.58rem; letter-spacing: 0.1em; color: rgba(200,168,75,0.3); text-transform: uppercase; } /* The scrollable container — no scrollbar visible */ .live-feed { max-height: 520px; overflow-y: scroll; padding: 0; /* Hide scrollbar — all browsers */ scrollbar-width: none; -ms-overflow-style: none; } .live-feed::-webkit-scrollbar { display: none; } /* Individual update entry */ .live-entry { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(200,168,75,0.07); transition: background 0.15s ease; } .live-entry:last-child { border-bottom: none; } .live-entry:hover { background: rgba(200,168,75,0.03); } .live-entry-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; } .live-entry-date { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.08em; color: rgba(200,168,75,0.45); text-transform: uppercase; } .live-entry-cat { font-family: 'IBM Plex Mono', monospace; font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.15rem 0.5rem; border-radius: 0; } .cat-military { color: rgba(120,180,240,0.8); border: 1px solid rgba(120,180,240,0.2); background: rgba(120,180,240,0.05); } .cat-diplomatic { color: rgba(200,168,75,0.8); border: 1px solid rgba(200,168,75,0.2); background: rgba(200,168,75,0.05); } .cat-economic { color: rgba(100,200,140,0.8); border: 1px solid rgba(100,200,140,0.2); background: rgba(100,200,140,0.05); } .cat-legal { color: rgba(200,120,80,0.8); border: 1px solid rgba(200,120,80,0.2); background: rgba(200,120,80,0.05); } .cat-natsec { color: rgba(200,80,80,0.8); border: 1px solid rgba(200,80,80,0.2); background: rgba(200,80,80,0.05); } .cat-AI { color: rgba(39, 245, 213, 0.8); border: 1px solid rgba(200,80,80,0.2); background: rgba(200,80,80,0.05); } .live-entry-body { font-size: 0.88em; line-height: 1.7; color: rgba(200,190,170,0.75); } .live-entry-body strong { color: rgba(237,231,217,0.9); font-weight: 600; } .live-entry-body a { color: rgba(200,168,75,0.7) !important; text-decoration: none; } .live-entry-body a:hover { color: #c8a84b !important; text-decoration: underline; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { --np-ink: #0E0E0E; --np-paper: #F2EDE4; --np-newsprint: #DDD8CF; --np-red: #C0392B; --np-red-lt: #E74C3C; --np-amber: #D4860A; --np-amber-lt: #F0A72A; --np-steel: #3A4A58; --np-mist: #7A8896; --np-rule: rgba(14,14,14,0.12); --np-rule-heavy: rgba(14,14,14,0.35); background: var(--np-paper); color: var(--np-ink); font-family: 'IBM Plex Sans', sans-serif; font-weight: 300; line-height: 1.8; } a, a:link, a:visited { text-decoration: none; font-style: italic; } nav { background: var(--np-ink); border-bottom: 3px solid var(--np-red); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 1rem 2rem; } nav .container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .nav-left { display: flex; align-items: center; gap: 1.5rem; } .flux-mark { font-family: 'IBM Plex Mono', monospace; font-size: 1rem; letter-spacing: 0.4em; color: #f0ede8; text-decoration: none; font-style: normal; } .flux-mark span { color: #4f7fe8; } .nav-section { color: var(--np-red-lt); font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.6em; font-style: normal; } .back-link { color: rgba(242,237,228,0.5); font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em; font-style: normal; } .back-link:hover { color: var(--np-amber-lt); } .article-header { margin-top: 60px; height: 75vh; min-height: 520px; background: var(--np-ink); border-left: 6px solid var(--np-red); position: relative; overflow: hidden; display: flex; align-items: flex-end; } .header-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.28; mix-blend-mode: luminosity; } .header-overlay { position: relative; z-index: 2; padding: 3rem 2rem; background: linear-gradient(to top, rgba(14,14,14,0.95) 0%, rgba(14,14,14,0.6) 60%, transparent 100%); width: 100%; } .header-inner { max-width: 1100px; margin: 0 auto; } .article-title { font-family: 'Libre Baskerville', serif; font-size: clamp(2.2rem, 5vw, 4rem); color: #F2EDE4; letter-spacing: -0.02em; line-height: 1.1; max-width: 900px; margin-bottom: 1rem; } .deck { font-size: clamp(1rem, 1.8vw, 1.2rem); font-weight: 300; max-width: 680px; height: 100%; line-height: 1.6; margin-bottom: 1.5rem; border-left: 2px solid var(--np-amber); padding-left: 1.25rem; color: rgba(242,237,228,0.65); } .article-meta { font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(242,237,228,0.35); } .article-container { max-width: 760px; margin: 0 auto; padding: 4rem 2rem 6rem; } .article-intro { font-family: 'Libre Baskerville', serif; font-style: italic; font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--np-steel); border-left: 3px solid var(--np-amber); border-bottom: 1px solid var(--np-rule-heavy); padding-left: 1.25rem; padding-bottom: 2.5rem; margin-bottom: 2.5rem; line-height: 1.75; } .article-content p { color: #2A2A2A; font-size: 1.05rem; line-height: 1.85; margin-bottom: 1.5rem; } .article-content strong { color: var(--np-ink); font-weight: 600; } .article-content h2 { font-family: 'Libre Baskerville', serif; font-size: clamp(1.3rem, 2.5vw, 1.8rem); color: var(--np-ink); border-top: 3px double var(--np-rule-heavy); padding-top: 1.5rem; margin: 3.5rem 0 1.25rem; } .article-category, .article-category .category-link { background: rgba(232,212,77,0.1) !important; color: var(--fa-yellow) !important; border-radius: 0 !important; font-family: 'IBM Plex Mono', monospace; font-size: 0.58rem; letter-spacing: 0.3em; text-decoration: none !important; margin-bottom: 12px; } .pullquote { font-family: 'Libre Baskerville', serif; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 700; color: var(--np-red); border-top: 2px solid var(--np-red); border-bottom: 2px solid var(--np-red); padding: 1.75rem 0; margin: 2.5rem 0; line-height: 1.45; } /* Receipt inline cite */ .receipt { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; color: var(--np-amber); border: 1px solid rgba(212,134,10,0.3); padding: 0.1rem 0.4rem; margin-left: 0.3rem; text-decoration: none; font-style: normal; white-space: nowrap; vertical-align: middle; transition: all 0.2s; } .receipt:hover { background: rgba(212,134,10,0.1); color: var(--np-ink); } .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--np-rule-heavy); border: 1px solid var(--np-rule-heavy); margin: 2rem 0; } .stat-card { background: #F7F3EC; padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; } .stat-number { font-family: 'Libre Baskerville', serif; font-size: 2rem; color: var(--np-red); line-height: 1; display: block; } .stat-label { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--np-mist); line-height: 1.4; font-style: normal; } .stat-sub { font-family: 'IBM Plex Mono', monospace; font-size: 0.58rem; color: var(--np-red); font-style: normal; margin-top: 0.2rem; } /* Calibration timeline */ .calibration { margin: 2.5rem 0; border-left: 3px solid var(--np-rule-heavy); } .cal-entry { display: grid; grid-template-columns: 5rem 1fr; gap: 1.5rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--np-rule); } .cal-entry:last-child { border-bottom: none; } .cal-year { font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: var(--np-mist); padding-top: 0.2rem; letter-spacing: 0.08em; } .cal-body {} .cal-action { font-weight: 600; color: var(--np-ink); font-size: 0.95rem; margin-bottom: 0.3rem; } .cal-outrage { font-size: 0.85rem; color: #444; line-height: 1.6; margin-bottom: 0.3rem; } .cal-consequence { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.06em; color: var(--np-red); text-transform: uppercase; margin-top: 0.4rem; } .highlight-box { background: rgba(192,57,43,0.05); border: 1px solid rgba(192,57,43,0.2); border-left: 4px solid var(--np-red); padding: 1.5rem 1.75rem; margin: 2.5rem 0; } .highlight-box h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--np-red); margin-bottom: 0.75rem; text-align: left; } .highlight-box p { color: #2A2A2A; margin-bottom: 0.75rem; } .highlight-box p:last-child { margin-bottom: 0; } .evidence-box { background: rgba(212,134,10,0.06); border: 1px solid rgba(212,134,10,0.2); border-left: 4px solid var(--np-amber); padding: 1.5rem 1.75rem; margin: 2.5rem 0; } .evidence-box h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--np-amber); margin-bottom: 1rem; } .evidence-box ol { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; } .evidence-box li { font-size: 0.97rem; line-height: 1.65; color: #2A2A2A; } .evidence-box li strong { color: var(--np-ink); } .signal-note { background: rgba(58,74,88,0.07); border: 1px solid rgba(58,74,88,0.15); border-left: 4px solid var(--np-steel); padding: 1.5rem 1.75rem; margin: 2.5rem 0; } .signal-note .label { font-family: 'IBM Plex Mono', monospace; font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--np-steel); display: block; margin-bottom: 0.75rem; font-style: normal; } .signal-note p { font-size: 0.9rem; color: var(--np-steel); margin-bottom: 0.5rem; font-style: normal; } .signal-note p:last-child { margin-bottom: 0; } .takeaways { background: rgba(212,134,10,0.06); border: 1px solid rgba(212,134,10,0.2); border-left: 4px solid var(--np-amber); padding: 1.5rem 1.75rem; margin: 2.5rem 0; } .takeaways h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--np-amber); margin-bottom: 0.75rem; } .takeaways ul { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; } .takeaways li { font-size: 0.97rem; line-height: 1.65; color: #2A2A2A; } .takeaways li strong { color: var(--np-ink); } .read-more { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--np-rule-heavy); } .read-more h3 { font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--np-mist); margin-bottom: 1rem; } .read-more-links { display: flex; flex-direction: column; gap: 0.75rem; } .read-more-links a { color: var(--np-steel); border-left: 3px solid var(--np-newsprint); padding-left: 1rem; font-size: 0.85rem; line-height: 1.5; display: block; font-style: normal; transition: all 0.2s; } .read-more-links a:hover { color: var(--np-red); border-left-color: var(--np-red); } .article-footer { border-top: 3px double var(--np-rule-heavy); margin-top: 4rem; padding-top: 2rem; } .author-bio h4 { font-family: 'Libre Baskerville', serif; font-size: 0.9rem; font-style: italic; color: var(--np-mist); font-weight: 400; text-align: left; margin-bottom: 1.5rem; } .flux-footer-logo { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--np-rule); } .flux-wordmark { font-family: 'IBM Plex Mono', monospace; font-size: 1rem; letter-spacing: 0.4em; color: rgba(14,14,14,0.3); text-decoration: none; font-style: normal; } .flux-wordmark .u { color: rgba(79,127,232,0.5); } .flux-tagline { font-family: 'IBM Plex Mono', monospace; font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--np-mist); opacity: 0.5; } .back-to-top { position: fixed; bottom: 2rem; right: 2rem; background: var(--np-ink); border: 1px solid var(--np-red); color: var(--np-red); width: 44px; height: 44px; display: none; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; } .back-to-top:hover { background: var(--np-red); color: var(--np-paper); } @media (max-width: 768px) { .article-header { height: 60vh; margin-top: 56px; } .article-title { font-size: 2rem; } .article-container { padding: 2.5rem 1.25rem 4rem; } .stats-grid { grid-template-columns: 1fr 1fr; } .cal-entry { grid-template-columns: 4rem 1fr; gap: 1rem; } }