/* ===================================================================== MOMENTUM — Guardian visual doctrine. Single theme. Pure black void. Surgical red strikes. No softness. This file overrides every per-template :root with !important so the brand wins regardless of legacy tokens still living inside templates. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ── Core palette ─────────────────────────────────────────────── */ --ink-1000: #000000; --ink-950: #0A0A0A; /* MOMENTUM black — body */ --ink-900: #0F0F10; /* panel base */ --ink-850: #131314; /* raised panel */ --ink-chrome: #0A0A0A; /* no gradients — pure black */ --surface-1: rgba(255, 255, 255, 0.03); --surface-2: rgba(255, 255, 255, 0.05); --surface-3: rgba(255, 255, 255, 0.08); --surface-border: rgba(255, 255, 255, 0.10); --surface-border-strong: rgba(255, 255, 255, 0.18); /* ── MOMENTUM Red ─────────────────────────────────────────────── */ --accent: #CC0000; --accent-hover: #FF1A1A; --accent-rgb: 204, 0, 0; --accent-soft: rgba(204, 0, 0, 0.18); --accent-glow: rgba(204, 0, 0, 0.40); --accent-strike: rgba(204, 0, 0, 0.55); /* ── Globe ────────────────────────────────────────────────────── */ --globe-ocean: #0A0A0A; --globe-ocean-emissive: #1A0000; --globe-atmosphere: #CC0000; /* ── Status colors (brand spec) ───────────────────────────────── */ --success: #00CC66; --warning: #FFAA00; --alert: #DC2626; --inactive:#666666; /* ── Typography ───────────────────────────────────────────────── */ --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --font-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; --ls-headline: 0.40em; /* extreme — declarations */ --ls-subhead: 0.30em; /* wide — context */ --ls-tag: 0.25em; /* identifiers */ --ls-body: 0.05em; /* subtle widening for reading */ /* ── Text ─────────────────────────────────────────────────────── */ --text-primary: #FFFFFF; --text-secondary: rgba(255, 255, 255, 0.60); --text-muted: rgba(255, 255, 255, 0.40); --text-faint: rgba(255, 255, 255, 0.25); /* ── Angles (signature element) ───────────────────────────────── */ --angle-sm: 6px; --angle-md: 10px; --angle-lg: 14px; --angle-xl: 20px; /* ── Compatibility aliases for legacy templates ───────────────── */ --bg: var(--ink-950); --bg2: var(--surface-1); --bg-primary: var(--ink-950); --bg-secondary: var(--surface-2); --bg-tertiary: var(--surface-1); --tx: var(--text-primary); --tx2: var(--text-secondary); --tx3: var(--text-muted); --border: var(--surface-border); --border2: var(--surface-border-strong); --border-color: var(--surface-border); --border-hover: var(--surface-border-strong); --accent2: var(--accent-hover); --ok: var(--success); --err: var(--alert); --warn: var(--warning); --panel: var(--ink-900); --muted: var(--text-muted); --text: var(--text-primary); --signal-ink: var(--accent); --status-approved: var(--success); --risk-low: var(--success); --risk-medium: var(--warning); --risk-high: #FF6B00; --risk-critical: var(--alert); } /* ===================================================================== ENFORCEMENT — override every legacy :root that still ships with old tokens. Templates declare their own :root values; these win because theme-premium.css is loaded last in . ===================================================================== */ :root, html, html[data-theme], html[data-theme="blue"], html[data-theme="red"] { --accent: #CC0000 !important; --accent-hover: #FF1A1A !important; --accent2: #FF1A1A !important; --accent-rgb: 204, 0, 0 !important; --accent-soft: rgba(204, 0, 0, 0.18) !important; --accent-glow: rgba(204, 0, 0, 0.40) !important; --bg: #0A0A0A !important; --bg-primary: #0A0A0A !important; --bg2: rgba(255, 255, 255, 0.03) !important; --bg-secondary: rgba(255, 255, 255, 0.05) !important; --bg-tertiary: rgba(255, 255, 255, 0.03) !important; --tx: #FFFFFF !important; --tx2: rgba(255, 255, 255, 0.60) !important; --tx3: rgba(255, 255, 255, 0.40) !important; --text-primary: #FFFFFF !important; --text-secondary: rgba(255, 255, 255, 0.60) !important; --text-muted: rgba(255, 255, 255, 0.40) !important; --border: rgba(255, 255, 255, 0.10) !important; --border2: rgba(255, 255, 255, 0.18) !important; --border-color: rgba(255, 255, 255, 0.10) !important; --border-hover: rgba(255, 255, 255, 0.18) !important; --surface-border: rgba(255, 255, 255, 0.10) !important; --globe-ocean: #0A0A0A !important; --globe-ocean-emissive: #1A0000 !important; --globe-atmosphere: #CC0000 !important; --ok: #00CC66 !important; --err: #DC2626 !important; --warn: #FFAA00 !important; --signal-ink: #CC0000 !important; } /* ===================================================================== Base — pure black void, white text, Space Grotesk ===================================================================== */ html, body { background-color: #0A0A0A !important; color: #FFFFFF; font-family: var(--font-body); max-width: 100%; overflow-x: hidden; } body { /* Kill the radial-gradient body backgrounds in topic/index/system templates. */ background-image: none !important; } /* Subtle 20px dot/grid texture (3% opacity per brand spec) */ body::before, .grid-pattern { background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important; background-size: 20px 20px !important; } /* Force Space Grotesk on every text-bearing element by default. */ body, button, input, select, textarea, .i { font-family: var(--font-body) !important; } /* Inter / IBM Plex / Apple Garamond callers fall back to Space Grotesk */ [style*="font-family: 'Inter'"], [style*="font-family: \"Inter\""], [style*="font-family:'Inter'"], [style*="font-family:Inter"], [style*="font-family: 'IBM Plex Sans'"], [style*="font-family: 'Apple Garamond'"] { font-family: var(--font-body) !important; } /* Mono channels keep JetBrains Mono — technical readouts only. */ .m, .mono, code, pre, kbd, samp, [style*="font-family: 'JetBrains Mono'"] { font-family: var(--font-mono) !important; } /* Surfaces — black chrome with a single white-1px hairline */ body, .hdr, .header, .top-header, .left-sidebar, .right-sidebar, .mobile-panel, .globe-wrapper, .key-display, .log-container, .news-ticker, .panel, .page { background: #0A0A0A; } .card, .region-chip, .system-card, .selected-region-bar, .login-box, .status-bar, .alert, .key-display, .ai-card, .panel { background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%), #0F0F10 !important; border: 1px solid var(--surface-border) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 6px 18px rgba(0, 0, 0, 0.35); } /* ===================================================================== ANGLED CORNERS — never rounded. ===================================================================== */ * { border-radius: 0 !important; } /* Honest circles only */ .status-dot, .dot, .risk-dot, .loading-spinner, .step-dot, .sunflare-layer, .g-session-dot, .bot-dot, .gux-vol-slider::-webkit-slider-thumb, .gux-vol-slider::-moz-range-thumb, [class*="rounded-full"] { border-radius: 50% !important; clip-path: none !important; } .theme-angle-sm { clip-path: polygon(var(--angle-sm) 0, 100% 0, 100% calc(100% - var(--angle-sm)), calc(100% - var(--angle-sm)) 100%, 0 100%, 0 var(--angle-sm)); } .theme-angle-md { clip-path: polygon(var(--angle-md) 0, 100% 0, 100% calc(100% - var(--angle-md)), calc(100% - var(--angle-md)) 100%, 0 100%, 0 var(--angle-md)); } .theme-angle-lg { clip-path: polygon(var(--angle-lg) 0, 100% 0, 100% calc(100% - var(--angle-lg)), calc(100% - var(--angle-lg)) 100%, 0 100%, 0 var(--angle-lg)); } .btn, .btn-primary, .btn-secondary, .btn-submit, .btn-back, .btn-p, .btn-d, .btn-s, .inp, .input, .form-input, .search-input, .select-input, .tab-btn, .card, .region-chip, .system-card, .selected-region-bar, .login-box, .key-display, .alert, .ai-card, .narrative-card, .city-hdr, .toast, .docs-endpoint-card, .docs-error-card, .docs-pre, .stat-box, .client-item, .country-chip, .modal, .panel, .badge { clip-path: polygon(var(--angle-md) 0, 100% 0, 100% calc(100% - var(--angle-md)), calc(100% - var(--angle-md)) 100%, 0 100%, 0 var(--angle-md)); } .pill-track, .pill-bg, .toggle-s { clip-path: polygon(var(--angle-lg) 0, 100% 0, 100% calc(100% - var(--angle-lg)), calc(100% - var(--angle-lg)) 100%, 0 100%, 0 var(--angle-lg)); } .toggle-s::before { clip-path: polygon(var(--angle-sm) 0, 100% 0, 100% calc(100% - var(--angle-sm)), calc(100% - var(--angle-sm)) 100%, 0 100%, 0 var(--angle-sm)); } /* ===================================================================== BUTTONS — red primary, ghost secondary ===================================================================== */ .btn-primary, .btn-submit, .btn-p, .pill-bg { background: linear-gradient(135deg, #CC0000, #FF1A1A) !important; border: 1px solid #FF1A1A !important; color: #FFFFFF !important; box-shadow: 0 6px 20px rgba(204, 0, 0, 0.35) !important; text-transform: uppercase; letter-spacing: var(--ls-tag); font-weight: 700; } .btn-primary:hover, .btn-submit:hover, .btn-p:hover, .pill-opt.active { color: #FFFFFF !important; box-shadow: 0 10px 28px rgba(204, 0, 0, 0.50) !important; } .btn:hover, .btn-secondary:hover, .tab-btn.active, .search-input:focus, .inp:focus, .input:focus, .form-input:focus, .select-input:focus, .region-chip:hover:not(.inactive), .system-card:hover { border-color: #CC0000 !important; box-shadow: 0 0 0 1px rgba(204, 0, 0, 0.18), 0 8px 22px rgba(0, 0, 0, 0.32) !important; } /* ===================================================================== TYPOGRAPHY HIERARCHY — brand spec ===================================================================== */ h1, .h1 { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: var(--ls-headline); color: var(--text-primary); } h2, .h2 { font-family: var(--font-display); font-weight: 300; text-transform: uppercase; letter-spacing: var(--ls-subhead); color: var(--text-primary); } h3, .h3, h4, .h4 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: var(--ls-tag); } /* Section tags / identifiers — red, uppercase */ .tag, .section-tag, .brand-subtitle, .ticker-city { color: var(--accent) !important; text-transform: uppercase; letter-spacing: var(--ls-tag); font-weight: 700; } /* Active states — single accent ribbon */ .tab.active, .tab-btn.active, a.active { color: var(--accent) !important; } /* Toggle: success (brand green) */ .toggle input:checked + .toggle-s { background: linear-gradient(135deg, rgba(0, 204, 102, 0.85), #00CC66) !important; } /* Globe wrapper — pure black void */ .globe-wrapper, #globe-container { background-color: #000000 !important; } /* ===================================================================== THEME-SWITCHER — REMOVED. Hide any leftover markup defensively. ===================================================================== */ .theme-switch-wrap, .theme-switcher, .login-theme-switch, [data-theme-pill], [data-theme-option] { display: none !important; } /* ===================================================================== TAILWIND BLUE/INDIGO/SKY/CYAN OVERRIDES → MOMENTUM Red Templates load Tailwind CDN — these classes appear in markup. ===================================================================== */ [class*="text-blue-"], [class*="text-indigo-"], [class*="text-sky-"], [class*="text-cyan-"] { color: var(--accent) !important; } [class*="bg-blue-"], [class*="bg-indigo-"], [class*="bg-sky-"], [class*="bg-cyan-"] { background-color: rgba(var(--accent-rgb), 0.18) !important; } [class*="border-blue-"], [class*="border-indigo-"], [class*="border-sky-"], [class*="border-cyan-"] { border-color: var(--accent) !important; } [class*="hover:border-blue-"]:hover, [class*="hover:border-indigo-"]:hover { border-color: var(--accent) !important; } [class*="hover:text-blue-"]:hover, [class*="hover:text-indigo-"]:hover { color: var(--accent) !important; } [class*="accent-blue-"], [class*="accent-indigo-"] { accent-color: var(--accent) !important; } [class*="from-blue-"], [class*="from-indigo-"] { --tw-gradient-from: var(--accent) !important; } [class*="to-blue-"], [class*="to-indigo-"] { --tw-gradient-to: var(--accent) !important; } [class*="ring-blue-"], [class*="ring-indigo-"] { --tw-ring-color: var(--accent) !important; } /* Tailwind arbitrary accent (e.g. accent-[#6f92ff]) */ [class*="accent-[#6f92ff]"], [class*="accent-[#2563eb]"], [class*="accent-[#3b82f6]"] { accent-color: var(--accent) !important; } /* ===================================================================== FORM CONTROLS — angular, dark, red focus ===================================================================== */ input, select, textarea { background: rgba(0, 0, 0, 0.40) !important; border: 1px solid var(--surface-border) !important; color: var(--text-primary) !important; font-family: var(--font-body) !important; } input:focus, select:focus, textarea:focus { outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 1px var(--accent-soft), inset 0 1px 3px rgba(0, 0, 0, 0.35) !important; } input::placeholder, textarea::placeholder { color: var(--text-faint) !important; text-transform: uppercase; letter-spacing: 0.10em; font-size: 0.92em; } /* ===================================================================== SCROLLBAR — minimal, neutral ===================================================================== */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width: 1024px) { body { padding-bottom: calc(env(safe-area-inset-bottom) + 8px); } .left-sidebar, .right-sidebar, .mobile-panel, .card, .system-card, .region-chip, .narrative-card, .login-box { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 14px rgba(0, 0, 0, 0.20); } } @media (max-width: 768px) { .header, .top-header, .hdr { padding-top: calc(env(safe-area-inset-top) + 8px); } .btn, .btn-primary, .btn-secondary, .select-input, .input, .inp, .search-input { min-height: 40px; } }