/* * GotAScam — colour themes * Applied via * Default (Hacker / dark) lives in each page's :root — no override needed. */ /* ── MIDNIGHT — deep navy, cyan accent ── */ [data-theme="midnight"] { --bg: #060810; --bg2: #0b0d1a; --card: #0e1020; --card2: #131526; --card3: #181b2e; --green: #00d4ff; --green-dim: #00b8e0; --green-glow: rgba(0,212,255,0.15); --green-bg: rgba(0,212,255,0.05); --border-g: rgba(0,212,255,0.22); --border: rgba(255,255,255,0.07); } /* ── CRIMSON — dark, red accent ── */ [data-theme="crimson"] { --bg: #0b0808; --bg2: #110d0d; --card: #150f0f; --card2: #1c1414; --card3: #221818; --green: #ff4444; --green-dim: #e03030; --green-glow: rgba(255,68,68,0.15); --green-bg: rgba(255,68,68,0.05); --border-g: rgba(255,68,68,0.22); --border: rgba(255,255,255,0.06); } /* ── AMBER — dark, gold accent ── */ [data-theme="amber"] { --bg: #090800; --bg2: #0f0d00; --card: #141200; --card2: #1a1800; --card3: #211e00; --green: #ffaa00; --green-dim: #e09500; --green-glow: rgba(255,170,0,0.15); --green-bg: rgba(255,170,0,0.05); --border-g: rgba(255,170,0,0.22); --border: rgba(255,255,255,0.06); } /* ── VIOLET — dark, purple accent ── */ [data-theme="violet"] { --bg: #08070f; --bg2: #0e0d18; --card: #121020; --card2: #181628; --card3: #1e1c30; --green: #a855f7; --green-dim: #9333e8; --green-glow: rgba(168,85,247,0.15); --green-bg: rgba(168,85,247,0.05); --border-g: rgba(168,85,247,0.22); --border: rgba(255,255,255,0.07); } /* ── LIGHT ─────────────────────────────────────────────── */ [data-theme="light"] { /* Backgrounds */ --bg: #f8f9fb; --bg2: #eef0f4; --card: #ffffff; --card2: #f2f4f7; --card3: #e8eaee; /* Text */ --text: #111318; --muted: #6b7280; --muted2: #374151; /* Borders */ --border: rgba(0,0,0,0.09); /* Accent — darker green so it's legible on white */ --green: #00a046; --green-dim: #007d38; --green-glow: rgba(0,160,70,0.12); --green-bg: rgba(0,160,70,0.07); --border-g: rgba(0,160,70,0.30); /* Semantic status colours — adjusted for light bg */ --red: #dc2626; --red-bg: rgba(220,38,38,0.06); --red-border: rgba(220,38,38,0.22); --amber: #b45309; --amber-bg: rgba(180,83,9,0.06); --amber-bdr: rgba(180,83,9,0.22); --cyan: #0369a1; --cyan-bg: rgba(3,105,161,0.06); --cyan-bdr: rgba(3,105,161,0.22); } /* Nav background is hardcoded dark on every page — override for light */ [data-theme="light"] nav { background: rgba(248,249,251,0.94) !important; border-bottom-color: rgba(0,0,0,0.09) !important; } /* Noise overlay — keep it visible in light mode for texture */ [data-theme="light"] body::before { opacity: 0.22 !important; } /* Cards/panels that use inline dark rgba backgrounds */ [data-theme="light"] .side-col { background: var(--bg2) !important; } /* Score bar segments — safe segment should stay readable on light */ [data-theme="light"] .conf-seg { background: var(--card2) !important; } /* Pro box border needs to stay visible on light bg */ [data-theme="light"] .pro-box { background: rgba(0,160,70,0.05) !important; border-color: rgba(0,160,70,0.25) !important; } /* Signal cards on light */ [data-theme="light"] .signal { background: var(--card) !important; } [data-theme="light"] .signal:hover, [data-theme="light"] .signal.open { background: var(--card2) !important; } /* Similar-scam items */ [data-theme="light"] .similar-item { background: var(--card) !important; } [data-theme="light"] .similar-item:hover { background: var(--card2) !important; } /* Detail inner panels */ [data-theme="light"] .detail-inner { background: var(--card2) !important; border-color: var(--border) !important; } /* Report ID pill */ [data-theme="light"] .report-id-pill { background: var(--card2) !important; border-color: var(--border) !important; } /* Theme picker button on light bg */ [data-theme="light"] #gts-btn, [data-theme="light"] #gts-panel { background: rgba(248,249,251,0.96) !important; border-color: rgba(0,0,0,0.12) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.12) !important; } [data-theme="light"] .gts-label { color: #374151 !important; } /* Active swatch ring — white is invisible on light panel, use dark */ [data-theme="light"] .gts-swatch.gts-active { border-color: #111318 !important; } /* ── Light mode — card depth & stronger borders ───────────── */ /* Stronger border so cards don't bleed into the background */ [data-theme="light"] { --border: rgba(0,0,0,0.12); --border-g: rgba(0,160,70,0.35); } /* Subtle shadow on cards so they lift off the background */ [data-theme="light"] .stat-cell, [data-theme="light"] .step, [data-theme="light"] .tier, [data-theme="light"] .pipeline-stage, [data-theme="light"] .check-section, [data-theme="light"] .verdict-card, [data-theme="light"] .submit-box, [data-theme="light"] .signal, [data-theme="light"] .similar-item { box-shadow: 0 1px 3px rgba(0,0,0,0.07), 0 4px 12px rgba(0,0,0,0.04) !important; } /* Stronger stat bar accent underline on hover */ [data-theme="light"] .stat-cell::after { background: var(--green) !important; } /* Canvas map on light — JS reads this to pick colours */ [data-theme="light"] #bgMap { opacity: 0.7 !important; } /* Scan-line animation in light mode needs contrast */ [data-theme="light"] .hero-left::before { background: linear-gradient(180deg, transparent, var(--green), transparent) !important; } /* Blink dot remains accent colour */ [data-theme="light"] .status-dot { background: var(--green) !important; box-shadow: 0 0 6px var(--green) !important; }