/* ============================================================================= investigation-page.css — shared polish layer for /investigations// pages. Loads AFTER each page's inline CSS so it can override safely. Built to match the editorial flat-section bar of /investigations index. Drop-in: just add to of any subpage. No markup changes required — this stylesheet is purely additive (re-skins existing classes the pages already use: .glass, .glass-strong, h2, section, table.thresh, evidence-grid, etc). Pulls in the site-wide legibility bump first (text-[9px]/text-[10px] etc were too small for casual reading at normal viewing distance). ============================================================================= */ @import url('/css/legibility.css'); /* ── Tighter type scale + better rhythm ──────────────────────────────── */ .inv-page body, body.inv-page { letter-spacing: -0.005em; } section h2 { font-size: 26px !important; font-weight: 900 !important; letter-spacing: -0.025em !important; line-height: 1.15 !important; margin-bottom: 18px !important; color: #fff; position: relative; padding-left: 14px; } section h2::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 2px 2px 0; background: linear-gradient(180deg, #f97316, #ef4444 50%, #a855f7); opacity: .9; } @media (min-width: 1024px) { section h2 { font-size: 30px !important; } } section h3, section .text-lg { font-size: 16px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; color: #f1f5f9 !important; text-transform: uppercase !important; letter-spacing: .08em !important; margin-top: 22px !important; margin-bottom: 10px !important; } section p, section li { font-size: 14.5px; line-height: 1.7; color: #cbd5e1; } /* ── Slim chunky glass cards into editorial panels ──────────────────── */ .glass, .glass-strong { background: linear-gradient(180deg, rgba(15,23,42,.55), rgba(8,12,20,.7)) !important; backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255,255,255,.05) !important; border-radius: 14px !important; box-shadow: 0 14px 50px -28px rgba(0,0,0,.6); transition: border-color .2s, transform .2s; } .glass:hover, .glass-strong:hover { border-color: rgba(255,255,255,.1) !important; } /* ── .smoking-gun — editorial-style accent (modernized 2026-05-03) ────── Replaces the previous "chunky red top stripe + heavy border" look with an editorial left rail (vertical, gradient) + a soft top-left radial glow. Reads as "this is THE evidence" without shouting. The rail and glow stack but no longer compete with each other for attention. */ .smoking-gun { position: relative; /* Almost-invisible border so the card itself feels glassy. The accent comes entirely from the rail (::before) + glow (::after), not the border, which used to triple-stack with both pseudo-elements. */ border-color: rgba(239,68,68,.14) !important; box-shadow: 0 0 0 1px rgba(239,68,68,.06), 0 24px 64px -32px rgba(239,68,68,.22), inset 1px 0 0 rgba(239,68,68,.04) !important; animation: none !important; overflow: hidden; /* clip the radial glow so it doesn't bleed past corners */ background: radial-gradient(120% 60% at 0% 0%, rgba(239,68,68,.05), transparent 55%), rgba(255,255,255,.02) !important; } /* The editorial left rail — gradient from saturated red at the top (where the heading sits) to a warm orange + fading to transparent at the bottom. Reads top-down, anchored to the heading. */ .smoking-gun::before { content: ''; position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; background: linear-gradient(180deg, #ef4444 0%, #f97316 35%, rgba(249,115,22,.55) 70%, transparent 100% ); border-radius: 0 2px 2px 0; box-shadow: 0 0 14px rgba(239,68,68,.45); } /* Subtle top-left corner glow — replaces the old full-width stripe. */ .smoking-gun::after { content: ''; position: absolute; top: 0; left: 0; width: 180px; height: 80px; background: radial-gradient(closest-side, rgba(239,68,68,.18), transparent 70%); pointer-events: none; filter: blur(8px); } /* Hover — rail brightens, glow widens. Small interaction cue without moving the card. */ .smoking-gun:hover::before { box-shadow: 0 0 22px rgba(239,68,68,.7); } .smoking-gun:hover::after { background: radial-gradient(closest-side, rgba(239,68,68,.26), transparent 70%); } /* Neon-red border style — softer accent rail (used together with .smoking-gun on the headline cards, but now plays a supporting role). When NOT paired with .smoking-gun, .neon-red supplies its own subtle rail. */ .neon-red { border-color: rgba(239,68,68,.18) !important; box-shadow: 0 0 0 1px rgba(239,68,68,.05), 0 18px 56px -32px rgba(239,68,68,.18) !important; } .neon-border { border-color: rgba(168,85,247,.18) !important; box-shadow: 0 0 0 1px rgba(168,85,247,.05), 0 18px 56px -32px rgba(168,85,247,.16) !important; } /* ── Section spacing — tighter on desktop, much tighter on mobile ──── */ section.mx-auto { padding-top: 40px !important; padding-bottom: 40px !important; } @media (max-width: 640px) { section.mx-auto { padding-top: 28px !important; padding-bottom: 28px !important; } section h2 { font-size: 21px !important; padding-left: 11px; } section h2::before { width: 2px; } } /* Hairline dividers between major sections — replaces the "void of nothing" feel of stacked cards on long pages. */ section[id] + section[id] { position: relative; } section[id] + section[id]::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(160px, 25%); height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); } /* ── Tables: cleaner, mobile-scrollable, zebra-striped ──────────────── */ section table { border-collapse: separate; border-spacing: 0; width: 100%; margin: 14px 0; font-size: 13px; background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.04); border-radius: 12px; overflow: hidden; } section table th { background: rgba(255,255,255,.025); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; color: #94a3b8; padding: 10px 14px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.05); } section table td { padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.03); color: #cbd5e1; vertical-align: top; } section table tr:last-child td { border-bottom: 0; } section table tr:hover td { background: rgba(255,255,255,.015); } section table tbody tr:nth-child(2n) td { background: rgba(255,255,255,.008); } @media (max-width: 640px) { section table { font-size: 11.5px; } section table th, section table td { padding: 8px 10px; } } /* ── Code + monospace polish ───────────────────────────────────────── */ code, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } section code:not(pre code) { background: rgba(34,211,238,.06); color: #67e8f9; border: 1px solid rgba(34,211,238,.18); padding: 1.5px 7px; border-radius: 6px; font-size: 12.5px; word-break: break-all; } section pre { background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35)); border: 1px solid rgba(255,255,255,.06); border-left: 3px solid #ef4444; border-radius: 10px; padding: 14px 18px; margin: 14px 0; color: #e2e8f0; line-height: 1.7; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 12.5px; } /* ── Anchor link polish ────────────────────────────────────────────── */ section a:not(.btn):not(.no-underline) { color: #67e8f9; text-decoration: underline; text-decoration-color: rgba(103,232,249,.35); text-underline-offset: 3px; transition: text-decoration-color .15s, color .15s; } section a:not(.btn):not(.no-underline):hover { color: #a5f3fc; text-decoration-color: #67e8f9; } /* ── Hero — trim the giant top band, restore visual hierarchy ──────── */ header.app-header, header[class*="border-b"]:first-of-type { border-bottom-color: rgba(255,255,255,.04) !important; } /* ── Stats row — flatten the chunky pill grid ──────────────────────── */ section.border-y .grid { gap: 0 !important; } section.border-y .grid > * { border-right: 1px solid rgba(255,255,255,.04); padding: 14px 16px !important; } section.border-y .grid > *:last-child { border-right: 0; } @media (max-width: 768px) { section.border-y .grid > * { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.04); } section.border-y .grid > *:nth-last-child(-n+2) { border-bottom: 0; } } /* ── Pill / tag — uniform sizing across all investigations ─────────── */ .glass.rounded-full, .glass.rounded, .glass-strong.rounded-full, .inline-flex.items-center.gap-2.glass { font-size: 11px !important; font-weight: 700; letter-spacing: .04em; padding: 4px 10px !important; border-radius: 999px !important; white-space: nowrap; } /* ── Evidence grid — better minmax, taller cards ───────────────────── */ .evidence-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; gap: 14px !important; } .evidence-card { background: rgba(8,12,20,.55); border: 1px solid rgba(255,255,255,.06) !important; border-radius: 12px !important; transition: border-color .2s, transform .2s; } .evidence-card:hover { border-color: rgba(255,255,255,.18) !important; transform: translateY(-2px); } .evidence-card .caption { background: rgba(15,23,42,.85) !important; font-size: 11.5px; color: #cbd5e1; border-top: 1px solid rgba(255,255,255,.04); } /* ── Reveal animation — keep but soften ────────────────────────────── */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity .55s ease-out, transform .55s ease-out; } .reveal.visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } } /* ── Top progress bar — slimmer ─────────────────────────────────────── */ #progress-bar { height: 2px !important; background: linear-gradient(90deg, #f97316, #ef4444 50%, #a855f7) !important; box-shadow: 0 0 8px rgba(239,68,68,.3); } /* ── Scroll-margin so anchor links don't tuck under sticky header ──── */ section[id] { scroll-margin-top: 90px; } /* ── Comments section — slim it, match the editorial bar ────────────── */ section[id="community"] { border-top: 1px solid rgba(255,255,255,.06); padding-top: 32px !important; margin-top: 24px; } /* ── Small-screen polish ───────────────────────────────────────────── */ @media (max-width: 480px) { section h2 { font-size: 19px !important; } section h3 { font-size: 13.5px !important; } section p, section li { font-size: 13.5px; line-height: 1.65; } .glass, .glass-strong { border-radius: 12px !important; padding: 14px !important; } /* Stats row — 2 columns on tiny screens */ section.border-y .grid { grid-template-columns: repeat(2, 1fr) !important; } section.border-y .grid > * { padding: 10px 12px !important; } /* Hero title — a tad smaller */ h1.text-4xl, h1.text-5xl, h1.text-6xl { font-size: 32px !important; line-height: 1.05 !important; letter-spacing: -0.025em !important; } /* Address-like long strings should wrap */ .mono { word-break: break-all; } } /* ── 1024px-1280px — sticky header overlap fix ──────────────────────── */ @media (min-width: 1024px) { body { scroll-padding-top: 80px; } } /* ── Print-friendly fallback (some users save investigations as PDF) ─ */ @media print { body { background: #fff !important; color: #000 !important; } .glass, .glass-strong { background: #f8f9fa !important; box-shadow: none !important; } section h2 { color: #000 !important; } #progress-bar, .reveal { display: none !important; } } /* ============================================================================= Editorial hero (.inv-hero) — refined investigation page-top. Replaces the previous "EXPOSED" gradient + floating SVG disc + 8-tile stat row with a Bloomberg/Pitchbook-style layout: monospace eyebrow metadata, a calm display title, a concise thesis, an inline severity rail, and a 4-stat strip with proper typographic hierarchy. No screaming. No glow. The data is the headline. Used by every /investigations// page that follows the new hero markup. ============================================================================= */ .inv-hero { position: relative; background: radial-gradient(1100px 360px at 12% 0%, rgba(239, 68, 68, .07), transparent 65%), linear-gradient(180deg, rgba(2, 6, 23, 0) 0%, rgba(2, 6, 23, .85) 100%); border-bottom: 1px solid rgba(255, 255, 255, .04); } .inv-hero::after { /* ultra-subtle scanline texture */ content: ''; position: absolute; inset: 0; background-image: linear-gradient( rgba(255, 255, 255, .015) 1px, transparent 1px ); background-size: 100% 3px; pointer-events: none; mask-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 70%); } .inv-hero-grid { position: relative; max-width: 1180px; margin: 0 auto; padding: 78px 28px 64px; display: grid; grid-template-columns: 1fr; gap: 18px; } @media (max-width: 720px) { .inv-hero-grid { padding: 44px 18px 36px; gap: 14px; } } /* Tall left rail — the only severity color on the hero. Replaces the disc. */ .inv-hero-rail { position: absolute; left: 28px; top: 78px; bottom: 64px; width: 2px; border-radius: 2px; background: linear-gradient( 180deg, rgba(239, 68, 68, .9) 0%, rgba(239, 68, 68, .35) 70%, rgba(239, 68, 68, 0) 100% ); } .inv-hero-grid > *:not(.inv-hero-rail) { padding-left: 22px; } @media (max-width: 720px) { .inv-hero-rail { left: 18px; top: 44px; bottom: 36px; } .inv-hero-grid > *:not(.inv-hero-rail) { padding-left: 14px; } } /* Eyebrow metadata strip — monospace, tight, low contrast. */ .inv-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .04em; color: #64748b; text-transform: uppercase; margin-bottom: 4px; } .inv-hero-meta .dot { width: 3px; height: 3px; background: #475569; border-radius: 50%; } .inv-hero-meta-status { display: inline-flex; align-items: center; gap: 6px; color: #f87171; font-weight: 600; } .inv-hero-pulse { width: 6px; height: 6px; background: #ef4444; border-radius: 50%; box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); animation: inv-pulse 1.8s cubic-bezier(.4, 0, .2, 1) infinite; } @keyframes inv-pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .55); } 70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } } /* Title row — small mark + display name. No EXPOSED gradient. */ .inv-hero-title-row { display: flex; align-items: center; gap: 16px; margin-top: 6px; } .inv-hero-mark { width: 38px; height: 38px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); flex-shrink: 0; } .inv-hero-title { font-family: 'Inter', system-ui, sans-serif; font-size: clamp(34px, 5.4vw, 56px); font-weight: 800; letter-spacing: -0.038em; line-height: 1.02; color: #f8fafc; margin: 0; } /* Sub-line — entity + chain. Calm, single line. */ .inv-hero-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 14px; color: #94a3b8; font-weight: 500; margin-top: 6px; } .inv-hero-sub .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; font-weight: 600; color: #cbd5e1; padding: 1px 7px; border-radius: 5px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); } .inv-hero-sub .sep { color: #475569; font-weight: 400; } /* Thesis paragraph — tight column for readability. */ .inv-hero-thesis { font-size: 16px; line-height: 1.65; color: #cbd5e1; max-width: 64ch; margin: 18px 0 8px; letter-spacing: -0.005em; } .inv-hero-thesis strong { color: #f1f5f9; font-weight: 600; border-bottom: 1px dotted rgba(248, 113, 113, .4); padding-bottom: 1px; } /* Severity rail — replaces the disc. */ .inv-hero-severity { display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px; background: rgba(15, 23, 42, .55); border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; margin: 14px 0 4px; width: fit-content; } .inv-hero-severity-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #64748b; } .inv-hero-severity-track { position: relative; width: 116px; height: 4px; background: rgba(255, 255, 255, .06); border-radius: 4px; overflow: hidden; } .inv-hero-severity-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--inv-fill, 0%); background: linear-gradient(90deg, #f59e0b 0%, #ef4444 60%, #b91c1c 100%); border-radius: 4px; transform-origin: left; animation: inv-fill-grow 1.6s cubic-bezier(.4, 0, .2, 1) forwards; transform: scaleX(0); } @keyframes inv-fill-grow { to { transform: scaleX(1); } } .inv-hero-severity-score { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: #cbd5e1; font-variant-numeric: tabular-nums; } .inv-hero-severity-score strong { color: #fca5a5; font-weight: 700; font-size: 16px; letter-spacing: -0.02em; } .inv-hero-severity-score span { color: #475569; margin-left: 1px; } .inv-hero-severity-tag { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #fca5a5; font-weight: 600; padding: 3px 8px; border: 1px solid rgba(252, 165, 165, .25); border-radius: 999px; background: rgba(239, 68, 68, .06); } /* Source links — uniform, monospace, subtle. */ .inv-hero-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .inv-hero-links a { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 500; color: #94a3b8; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 6px; background: rgba(255, 255, 255, .015); text-decoration: none; transition: color .15s, border-color .15s, background .15s, transform .15s; } .inv-hero-links a:hover { color: #67e8f9; border-color: rgba(34, 211, 238, .3); background: rgba(34, 211, 238, .04); transform: translateY(-1px); } /* Stat strip — 4 hero figures, generous, optical alignment. */ .inv-hero-stats { border-top: 1px solid rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(255, 255, 255, .04); background: rgba(2, 6, 23, .55); } .inv-hero-stats-grid { max-width: 1180px; margin: 0 auto; padding: 24px 28px 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } @media (max-width: 880px) { .inv-hero-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; padding: 20px 18px 14px; } } .inv-stat { position: relative; padding-left: 14px; } .inv-stat::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 14px; width: 1px; background: linear-gradient(180deg, rgba(239, 68, 68, .55), rgba(239, 68, 68, 0)); } .inv-stat-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 30px; font-weight: 700; color: #f8fafc; letter-spacing: -0.025em; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 8px; } .inv-stat-lbl { font-size: 12.5px; font-weight: 600; color: #cbd5e1; letter-spacing: -0.005em; } .inv-stat-ctx { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: #64748b; margin-top: 4px; letter-spacing: .01em; } .inv-hero-stats-foot { max-width: 1180px; margin: 0 auto; padding: 0 28px 18px; display: flex; flex-wrap: wrap; gap: 8px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: #94a3b8; letter-spacing: .02em; } .inv-hero-stats-foot strong { color: #f1f5f9; font-weight: 700; font-variant-numeric: tabular-nums; } .inv-hero-stats-foot .sep { color: #334155; } .inv-hero-stats-foot .muted { color: #64748b; } @media (max-width: 720px) { .inv-hero-stats-foot { padding: 0 18px 14px; } } /* Override the legacy `.gradient-text` rainbow — if any other section still uses it we want a single restrained color, not the cyan→pink AI-generated gradient. */ .inv-hero .gradient-text, .gradient-text.inv-restrained { background: none !important; -webkit-text-fill-color: #f8fafc !important; color: #f8fafc !important; } /* ============================================================================= Legacy-hero refinement (.inv-hero-legacy) ---------------------------------------------------------------------------- Targets pages that still use the original `

X EXPOSED` + floating SVG gauge pattern (gotm, basc, orbis, puffsterz). We don't touch the markup — we just quiet the worst offenders so the page reads as editorial restraint instead of AI cyberpunk: · "EXPOSED" rainbow gradient → calm, near-white treatment with a small severity dot in front (replaces the screaming caps); · Floating SVG risk gauge → compact monospace score chip; · Stat row → tightened column count + better number/label hierarchy; · Neon-red box-shadows on hero panels → softer, single-color edge. The fully-refined `.inv-hero` markup (used by /steamx) opts out via the `:not(.inv-hero ...)` guards below. ============================================================================= */ /* Tame the rainbow EXPOSED gradient on legacy pages. The word stays — it's the brand voice — but the cyan→indigo→pink gradient gets replaced with a near-white tint that sits next to a tiny red dot. Targets BOTH `.gradient-text` (basc/orbis/puffsterz) and `.text-red-500` (gotm) since pages use either pattern. */ body:not(.inv-hero-disable) header:not(.inv-hero) h1 .gradient-text, body:not(.inv-hero-disable) header:not(.inv-hero) h1 .text-red-500 { background: none !important; -webkit-text-fill-color: #f8fafc !important; color: #f8fafc !important; font-weight: 800; letter-spacing: -0.02em; position: relative; padding-left: 18px; display: inline-block; } body:not(.inv-hero-disable) header:not(.inv-hero) h1 .gradient-text::before, body:not(.inv-hero-disable) header:not(.inv-hero) h1 .text-red-500::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: #ef4444; border-radius: 50%; box-shadow: 0 0 12px rgba(239, 68, 68, .55); } /* Tighten the legacy h1 type — Tailwind text-4xl/5xl + font-black on a long title like "Steam Exchange EXPOSED" lands too heavy. Bring it in line with the rest of the editorial system. */ body:not(.inv-hero-disable) header:not(.inv-hero) h1 { font-size: clamp(34px, 5.4vw, 52px) !important; font-weight: 800 !important; letter-spacing: -0.038em !important; line-height: 1.04 !important; color: #f8fafc; } /* Compact the floating SVG risk gauge into a small monospace score chip. We don't rewrite markup — we just hide the SVG circle and re-style the score text into a clean, designer-grade pill. */ body:not(.inv-hero-disable) header:not(.inv-hero) svg[viewBox="0 0 120 120"] { display: none !important; } body:not(.inv-hero-disable) header:not(.inv-hero) .relative.h-40.w-40 { height: auto !important; width: auto !important; padding: 8px 14px; background: rgba(15, 23, 42, .55); border: 1px solid rgba(255, 255, 255, .06); border-radius: 10px; display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 12px; position: relative; } body:not(.inv-hero-disable) header:not(.inv-hero) .relative.h-40.w-40::before { content: ''; width: 36px; height: 4px; background: linear-gradient(90deg, #f59e0b, #ef4444 60%, #b91c1c); border-radius: 4px; margin-right: 4px; } body:not(.inv-hero-disable) header:not(.inv-hero) .relative.h-40.w-40 > .absolute { position: static !important; display: inline-flex !important; flex-direction: row !important; align-items: baseline !important; gap: 6px; } body:not(.inv-hero-disable) header:not(.inv-hero) .relative.h-40.w-40 > .absolute > span:first-child { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 22px !important; font-weight: 700 !important; color: #fca5a5 !important; letter-spacing: -0.02em; line-height: 1; } body:not(.inv-hero-disable) header:not(.inv-hero) .relative.h-40.w-40 > .absolute > span:last-child { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 9.5px !important; letter-spacing: .14em !important; color: #64748b !important; text-transform: uppercase; } /* Ditch the "CRITICAL RISK" rounded pill below the gauge — the score chip already carries that signal. Keeping it makes the area noisy. */ body:not(.inv-hero-disable) header:not(.inv-hero) .px-3.py-1.rounded-full.bg-red-500\/20 { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 9.5px !important; letter-spacing: .14em !important; font-weight: 600 !important; background: transparent !important; border: 1px solid rgba(252, 165, 165, .25) !important; color: #fca5a5 !important; padding: 3px 9px !important; } /* Soften the legacy per-section neon red glow boxes. Big red drop- shadows on every panel were AI-tier styling; a single 1px edge with subtle inner glow is enough to read as severity. */ body:not(.inv-hero-disable) .neon-red { border-color: rgba(239, 68, 68, .18) !important; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .04), 0 1px 0 rgba(0, 0, 0, .35) !important; } body:not(.inv-hero-disable) .neon-red:hover { border-color: rgba(239, 68, 68, .28) !important; } /* Trim the legacy 8-tile stat strip's typographic noise on screens where the strip wraps. Numbers go to mono + tabular figures, labels shrink to a quiet caption. Same data, MUCH more readable. */ body:not(.inv-hero-disable) section.border-y .grid > div .text-lg.font-black { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-weight: 700 !important; font-size: 22px !important; letter-spacing: -0.025em !important; font-variant-numeric: tabular-nums !important; line-height: 1 !important; margin-bottom: 4px !important; } body:not(.inv-hero-disable) section.border-y .grid > div .text-\[10px\].text-slate-500 { font-size: 11px !important; color: #94a3b8 !important; letter-spacing: .005em !important; line-height: 1.3 !important; } /* Quiet the 3-pill row above the legacy h1 (Critical Risk + Live Verified + Report Vx). Each was its own loud color; we unify them as a calm monospace metadata strip. */ body:not(.inv-hero-disable) header:not(.inv-hero) .flex.items-center.gap-3.mb-4 { gap: 8px !important; } body:not(.inv-hero-disable) header:not(.inv-hero) .flex.items-center.gap-3.mb-4 > span { font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: 10px !important; letter-spacing: .12em !important; font-weight: 600 !important; background: rgba(255, 255, 255, .03) !important; border-color: rgba(255, 255, 255, .06) !important; color: #cbd5e1 !important; text-transform: uppercase; padding: 3px 8px !important; } /* Restore a single severity tone for the FIRST pill (Critical Risk). */ body:not(.inv-hero-disable) header:not(.inv-hero) .flex.items-center.gap-3.mb-4 > span:first-child { border-color: rgba(252, 165, 165, .25) !important; color: #fca5a5 !important; background: rgba(239, 68, 68, .04) !important; } /* Drop the badge-shine animation — too sales-y. */ body:not(.inv-hero-disable) header:not(.inv-hero) .badge-shine { animation: none !important; background-image: none !important; }