/* ═══════════════════════════════════════════════════════════════════ AKA SENTINEL · Shared theme system Dark / Light / System theme via [data-theme] on Persisted under localStorage key aka_settings.theme ═══════════════════════════════════════════════════════════════════ */ /* ── DEFAULT (DARK) PALETTE ──────────────────────────────────────── */ :root{ --aka-bg: #010509; --aka-bg2: #060d17; --aka-bg3: #0a1220; --aka-panel: rgba(6,13,23,.92); --aka-panel-2: rgba(8,16,28,.85); --aka-text: #dde6f0; --aka-text-dim: rgba(221,230,240,.55); --aka-text-mute: rgba(221,230,240,.25); --aka-cyan: #22d3ee; --aka-cyan-soft: rgba(34,211,238,.55); --aka-blue: #3b82f6; --aka-purple: #a78bfa; --aka-amber: #f59e0b; --aka-red: #ef4444; --aka-green: #10b981; --aka-border: rgba(34,211,238,.10); --aka-border-a: rgba(34,211,238,.28); --aka-shadow: 0 12px 40px rgba(0,0,0,.45); --aka-glow: 0 0 24px rgba(34,211,238,.18); --aka-track: rgba(34,211,238,.04); --aka-thumb: rgba(34,211,238,.22); --aka-thumb-h: rgba(34,211,238,.45); --aka-radius: 6px; } /* ── LIGHT PALETTE ───────────────────────────────────────────────── */ html[data-theme="light"]{ --aka-bg: #f5f7fa; --aka-bg2: #ffffff; --aka-bg3: #eef2f7; --aka-panel: rgba(255,255,255,.92); --aka-panel-2: rgba(248,250,253,.95); --aka-text: #0c1626; --aka-text-dim: rgba(12,22,38,.66); --aka-text-mute: rgba(12,22,38,.40); --aka-cyan: #0891b2; --aka-cyan-soft: rgba(8,145,178,.65); --aka-blue: #1d4ed8; --aka-purple: #7c3aed; --aka-amber: #b45309; --aka-red: #b91c1c; --aka-green: #047857; --aka-border: rgba(8,145,178,.18); --aka-border-a: rgba(8,145,178,.42); --aka-shadow: 0 8px 24px rgba(15,40,70,.10); --aka-glow: 0 0 18px rgba(8,145,178,.10); --aka-track: rgba(8,145,178,.05); --aka-thumb: rgba(8,145,178,.32); --aka-thumb-h: rgba(8,145,178,.55); } /* ── BRIEF / REPORTS UNPREFIXED VAR OVERRIDES (light mode) ───────── */ /* Those pages declare their own :root with --bg, --text, etc. We override the same names at the html[data-theme="light"] scope so `var(--bg)` resolves to light values without touching the pages. */ html[data-theme="light"]{ --bg: #f5f7fa; --bg2: #ffffff; --bg3: #eef2f7; --input-bg: #ffffff; --space: #f5f7fa; --panel: #ffffff; --card: rgba(255,255,255,.95); --glass: rgba(255,255,255,.92); --glass2: rgba(255,255,255,.95); --text: #0c1626; --dim: rgba(12,22,38,.55); --dimmer: rgba(12,22,38,.30); --muted: rgba(12,22,38,.45); --sub: rgba(12,22,38,.65); --cyan: #0891b2; --blue: #1d4ed8; --purple: #7c3aed; --gold: #b45309; --amber: #b45309; --red: #b91c1c; --orange: #c2410c; --green: #047857; --magenta: #be185d; --c10: rgba(8,145,178,.10); --c15: rgba(8,145,178,.15); --c20: rgba(8,145,178,.22); --c30: rgba(8,145,178,.32); --c50: rgba(8,145,178,.55); --b1: rgba(8,145,178,.12); --b2: rgba(8,145,178,.28); --border: rgba(8,145,178,.18); --border-a: rgba(8,145,178,.42); --glow: 0 0 16px rgba(8,145,178,.18); } /* ── PAGE-LEVEL BACKGROUND OVERRIDES (light mode) ────────────────── */ /* Existing pages hardcode dark colors; nudge the most visible ones. */ html[data-theme="light"], html[data-theme="light"] body{ background:var(--aka-bg) !important; color:var(--aka-text) !important; } html[data-theme="light"] body::after{ display:none !important; } /* kill scanlines */ html[data-theme="light"] canvas#bg{ filter:brightness(.55) saturate(.7) hue-rotate(-15deg); } html[data-theme="light"] .corner{ border-color:rgba(8,145,178,.35) !important; } html[data-theme="light"] .hud-top, html[data-theme="light"] .hud-bottom{ background:linear-gradient(180deg,rgba(255,255,255,.92),transparent) !important; color:var(--aka-text) !important; } html[data-theme="light"] .hud-bottom{ background:linear-gradient(0deg,rgba(255,255,255,.92),transparent) !important; } html[data-theme="light"] .hud-top .h-tag, html[data-theme="light"] .hud-bottom .h-tag, html[data-theme="light"] .hero-classification, html[data-theme="light"] .hero-sub, html[data-theme="light"] .section-label, html[data-theme="light"] .section-sub{ color:rgba(8,145,178,.55) !important; } html[data-theme="light"] .h-clock{ color:rgba(8,145,178,.7) !important; } /* Auth/landing card backdrops */ html[data-theme="light"] .auth-card, html[data-theme="light"] .p-card, html[data-theme="light"] .section{ background:rgba(255,255,255,.94) !important; border-color:rgba(8,145,178,.18) !important; color:var(--aka-text) !important; } html[data-theme="light"] .form-input{ background:#fff !important; color:var(--aka-text) !important; border-color:rgba(8,145,178,.20) !important; } html[data-theme="light"] .form-input::placeholder{ color:rgba(12,22,38,.30) !important; } html[data-theme="light"] .form-label, html[data-theme="light"] .auth-footer{ color:rgba(12,22,38,.55) !important; } html[data-theme="light"] .auth-footer a, html[data-theme="light"] .nav-link, html[data-theme="light"] .footer-links a{ color:var(--aka-cyan) !important; } html[data-theme="light"] .bg-grid{ background-image: linear-gradient(rgba(8,145,178,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(8,145,178,.05) 1px,transparent 1px) !important; } html[data-theme="light"] .plan-label{ background:#fff !important; border-color:rgba(8,145,178,.15) !important; } html[data-theme="light"] .plan-name{ color:var(--aka-text) !important; } html[data-theme="light"] .pro-bar, html[data-theme="light"] .pro-actions, html[data-theme="light"] .nav-bar, html[data-theme="light"] .topbar{ background:rgba(255,255,255,.92) !important; color:var(--aka-text) !important; border-color:rgba(8,145,178,.16) !important; } /* ── CUSTOM SCROLLBARS (themed) ──────────────────────────────────── */ /* `scrollbar-color` / `scrollbar-width` are inherited, so applying to covers every scrollable descendant without forcing the browser to re-evaluate a universal selector for every node. */ html{ scrollbar-color: var(--aka-thumb) var(--aka-track); scrollbar-width: thin; } ::-webkit-scrollbar{ width:8px; height:8px; } ::-webkit-scrollbar-track{ background:var(--aka-track); } ::-webkit-scrollbar-thumb{ background:var(--aka-thumb); border-radius:4px; border:1px solid transparent; background-clip:padding-box; } ::-webkit-scrollbar-thumb:hover{ background:var(--aka-thumb-h); } ::-webkit-scrollbar-corner{ background:transparent; } /* ── SCROLL REVEAL ───────────────────────────────────────────────── */ .aka-reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.23,1,.32,1), transform .7s cubic-bezier(.23,1,.32,1); will-change:opacity,transform; } .aka-reveal.in{ opacity:1; transform:none; } .aka-reveal[data-aka-delay="1"]{ transition-delay:.08s; } .aka-reveal[data-aka-delay="2"]{ transition-delay:.16s; } .aka-reveal[data-aka-delay="3"]{ transition-delay:.24s; } .aka-reveal[data-aka-delay="4"]{ transition-delay:.32s; } .aka-reveal[data-aka-delay="5"]{ transition-delay:.40s; } @media(prefers-reduced-motion:reduce){ .aka-reveal{ opacity:1; transform:none; transition:none; } } /* ── EXPANDABLE INFO CARDS ───────────────────────────────────────── */ .aka-card{ position:relative; } .aka-card .aka-card-extra{ max-height:0; opacity:0; overflow:hidden; transition:max-height .45s cubic-bezier(.23,1,.32,1), opacity .35s ease, margin-top .35s ease; margin-top:0; } .aka-card.aka-expanded .aka-card-extra{ max-height:600px; opacity:1; margin-top:14px; } .aka-card-toggle, .aka-ask-ai{ display:inline-flex; align-items:center; gap:6px; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.18em; text-transform:uppercase; padding:7px 12px; border:1px solid var(--aka-border-a); border-radius:4px; background:transparent; color:var(--aka-cyan); cursor:pointer; transition:background .2s, border-color .2s, transform .2s, box-shadow .2s, color .2s; text-decoration:none; } .aka-card-toggle:hover, .aka-ask-ai:hover{ background:rgba(34,211,238,.08); border-color:var(--aka-cyan); box-shadow:var(--aka-glow); transform:translateY(-1px); } html[data-theme="light"] .aka-card-toggle:hover, html[data-theme="light"] .aka-ask-ai:hover{ background:rgba(8,145,178,.08); } .aka-ask-ai{ border-color:rgba(167,139,250,.45); color:var(--aka-purple); } .aka-ask-ai:hover{ background:rgba(167,139,250,.10); border-color:var(--aka-purple); box-shadow:0 0 18px rgba(167,139,250,.25); } .aka-card-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } .aka-icon{ width:10px; height:10px; flex-shrink:0; } /* ── THEME SWITCH (segmented) ────────────────────────────────────── */ .aka-theme-switch{ display:inline-flex; align-items:center; border:1px solid var(--aka-border); border-radius:99px; padding:2px; gap:1px; background:var(--aka-panel); font-family:'DM Mono',monospace; } .aka-theme-switch button{ border:0; background:transparent; width:24px; height:20px; cursor:pointer; color:var(--aka-text-mute); font-size:11px; line-height:1; display:inline-flex; align-items:center; justify-content:center; border-radius:99px; transition:background .2s, color .2s; } .aka-theme-switch button:hover{ color:var(--aka-cyan); } .aka-theme-switch button.active{ background:rgba(34,211,238,.14); color:var(--aka-cyan); } html[data-theme="light"] .aka-theme-switch button.active{ background:rgba(8,145,178,.14); } .aka-theme-switch button[title]{ position:relative; } /* Floating slot at top-right (non-intrusive) */ .aka-theme-mount{ position:fixed; top:8px; right:60px; z-index:1200; } @media(max-width:640px){ .aka-theme-mount{ top:6px; right:48px; } } /* ── NEWS FEED PANEL ─────────────────────────────────────────────── */ .aka-news-toggle{ position:fixed; right:16px; bottom:48px; z-index:1100; width:42px; height:42px; border-radius:50%; background:var(--aka-panel); border:1px solid var(--aka-border-a); color:var(--aka-cyan); cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:'Syne',sans-serif; font-size:14px; font-weight:700; box-shadow:var(--aka-shadow), var(--aka-glow); transition:transform .25s, box-shadow .25s, border-color .25s; } .aka-news-toggle:hover{ transform:translateY(-2px) scale(1.04); border-color:var(--aka-cyan); } .aka-news-toggle .aka-news-pip{ position:absolute; top:6px; right:6px; width:6px; height:6px; border-radius:50%; background:var(--aka-red); box-shadow:0 0 6px var(--aka-red); animation:aka-pulse 2s ease-in-out infinite; } .aka-news-toggle.open .aka-news-pip{ display:none; } @keyframes aka-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} } .aka-news-panel{ position:fixed; top:64px; right:16px; bottom:96px; width:340px; max-width:calc(100vw - 32px); background:var(--aka-panel); border:1px solid var(--aka-border-a); border-radius:8px; backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); box-shadow:var(--aka-shadow); display:flex; flex-direction:column; z-index:1099; transform:translateX(120%); opacity:0; pointer-events:none; transition:transform .35s cubic-bezier(.23,1,.32,1), opacity .25s; font-family:'DM Mono',monospace; color:var(--aka-text); } .aka-news-panel.open{ transform:translateX(0); opacity:1; pointer-events:auto; } .aka-news-head{ flex-shrink:0; padding:14px 16px 10px; border-bottom:1px solid var(--aka-border); display:flex; align-items:center; gap:10px; } .aka-news-head .aka-news-title{ font-family:'Syne',sans-serif; font-size:11px; font-weight:800; letter-spacing:.22em; color:var(--aka-cyan); text-transform:uppercase; } .aka-news-head .aka-news-live{ display:inline-flex; align-items:center; gap:5px; margin-left:auto; font-size:7px; letter-spacing:.22em; color:var(--aka-green); text-transform:uppercase; } .aka-news-head .aka-news-live::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--aka-green); box-shadow:0 0 6px var(--aka-green); animation:aka-pulse 2s ease-in-out infinite; } .aka-news-tabs{ flex-shrink:0; display:flex; gap:0; padding:8px 12px 0; border-bottom:1px solid var(--aka-border); } .aka-news-tabs button{ border:0; background:transparent; padding:8px 12px; font-family:'DM Mono',monospace; font-size:8px; letter-spacing:.18em; color:var(--aka-text-mute); text-transform:uppercase; cursor:pointer; border-bottom:1px solid transparent; transition:color .2s, border-color .2s; } .aka-news-tabs button:hover{ color:var(--aka-cyan); } .aka-news-tabs button.active{ color:var(--aka-cyan); border-bottom-color:var(--aka-cyan); } .aka-news-list{ flex:1; overflow-y:auto; padding:8px 4px 8px 12px; } .aka-news-item{ padding:10px 8px 11px; border-bottom:1px solid var(--aka-border); cursor:pointer; transition:background .15s; text-decoration:none; display:block; color:inherit; } .aka-news-item:hover{ background:rgba(34,211,238,.05); } html[data-theme="light"] .aka-news-item:hover{ background:rgba(8,145,178,.05); } .aka-news-item .aka-news-meta{ display:flex; gap:8px; align-items:center; font-size:7px; letter-spacing:.15em; color:var(--aka-text-mute); text-transform:uppercase; margin-bottom:4px; } .aka-news-item .aka-news-source{ color:var(--aka-cyan-soft); } .aka-news-item .aka-news-headline{ font-size:11px; line-height:1.45; color:var(--aka-text); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .aka-news-empty, .aka-news-loading{ padding:24px 16px; text-align:center; font-size:8px; letter-spacing:.25em; color:var(--aka-text-mute); text-transform:uppercase; } .aka-news-loading::before{ content:'⟳'; display:inline-block; margin-right:6px; animation:aka-spin 1.2s linear infinite; font-size:14px; vertical-align:middle; } @keyframes aka-spin{ to{ transform:rotate(360deg) } } .aka-news-foot{ flex-shrink:0; padding:8px 14px; border-top:1px solid var(--aka-border); display:flex; gap:8px; align-items:center; font-size:7px; letter-spacing:.18em; color:var(--aka-text-mute); text-transform:uppercase; } .aka-news-foot .aka-news-refresh{ margin-left:auto; cursor:pointer; background:transparent; border:1px solid var(--aka-border); border-radius:3px; color:var(--aka-cyan); padding:3px 8px; font-size:7px; letter-spacing:.18em; text-transform:uppercase; font-family:'DM Mono',monospace; } .aka-news-foot .aka-news-refresh:hover{ border-color:var(--aka-cyan); } @media(max-width:520px){ .aka-news-panel{ right:8px; left:8px; width:auto; top:auto; bottom:96px; max-height:60vh; } } /* ── ASK-AI MODAL ────────────────────────────────────────────────── */ .aka-modal{ position:fixed; inset:0; z-index:1300; display:none; align-items:center; justify-content:center; background:rgba(2,8,17,.65); backdrop-filter:blur(4px); } html[data-theme="light"] .aka-modal{ background:rgba(8,20,40,.35); } .aka-modal.open{ display:flex; } .aka-modal-card{ width:480px; max-width:92vw; max-height:80vh; display:flex; flex-direction:column; background:var(--aka-panel); border:1px solid var(--aka-border-a); border-radius:8px; box-shadow:var(--aka-shadow); font-family:'DM Mono',monospace; color:var(--aka-text); } .aka-modal-head{ padding:14px 18px; border-bottom:1px solid var(--aka-border); display:flex; align-items:center; gap:10px; } .aka-modal-head .aka-modal-title{ font-family:'Syne',sans-serif; font-size:12px; font-weight:800; letter-spacing:.22em; color:var(--aka-purple); text-transform:uppercase; } .aka-modal-close{ margin-left:auto; background:transparent; border:1px solid var(--aka-border); color:var(--aka-text-dim); width:22px; height:22px; border-radius:50%; cursor:pointer; font-size:12px; line-height:1; } .aka-modal-close:hover{ color:var(--aka-cyan); border-color:var(--aka-cyan); } .aka-modal-body{ padding:14px 18px; overflow-y:auto; } .aka-modal-body .aka-q-context{ font-size:9px; letter-spacing:.12em; color:var(--aka-text-mute); text-transform:uppercase; margin-bottom:6px; } .aka-modal-body .aka-q-text{ font-size:13px; line-height:1.55; color:var(--aka-text); margin-bottom:14px; } .aka-modal-body textarea{ width:100%; min-height:90px; padding:10px 12px; background:var(--aka-bg2); border:1px solid var(--aka-border); border-radius:6px; color:var(--aka-text); font-family:'DM Mono',monospace; font-size:12px; resize:vertical; outline:none; } .aka-modal-body textarea:focus{ border-color:var(--aka-cyan); box-shadow:0 0 12px rgba(34,211,238,.10); } .aka-modal-foot{ padding:12px 18px; border-top:1px solid var(--aka-border); display:flex; gap:8px; justify-content:flex-end; } .aka-modal-foot button{ font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:8px 16px; border:1px solid var(--aka-border-a); border-radius:4px; background:transparent; color:var(--aka-cyan); cursor:pointer; transition:all .2s; } .aka-modal-foot button.primary{ background:var(--aka-cyan); color:var(--aka-bg); border-color:var(--aka-cyan); } .aka-modal-foot button:hover{ box-shadow:var(--aka-glow); transform:translateY(-1px); }