/* ============================================================ Comic Intelligence — Dark Mode Theme Activated by: All colours override the light-mode :root variables. Accent colours (red, yellow, cyan, green, orange) are kept but slightly brightened so they pop on dark backgrounds. ============================================================ */ [data-theme="dark"] { --ink: #F0EBE1; --paper: #141414; --paper-dark: #1C1C1C; --card: #1F1F1F; --card-bg: #1F1F1F; --red: #F03336; --yellow: #F7CC1A; --cyan: #12C6EC; --green: #34D95E; --orange: #FF7A3D; --muted: #7A7570; --border: rgba(240,235,225,0.10); --border-strong:rgba(240,235,225,0.22); } /* ── TOP BAR ── stays ink-black in both modes, just tweak border */ [data-theme="dark"] .top-bar { background: #0A0A0A; border-bottom-color: var(--red); } /* Top bar text elements — force light so they're visible on black bar */ [data-theme="dark"] .top-bar-brand { color: #F0EBE1; } [data-theme="dark"] .user-name { color: #F0EBE1; } [data-theme="dark"] .user-role-label { color: #7A7570; } [data-theme="dark"] .btn-top { color: #F0EBE1; border-color: rgba(255,255,255,0.2); } [data-theme="dark"] .btn-top:hover { color: var(--yellow); border-color: var(--yellow); } [data-theme="dark"] .btn-top.admin { color: var(--cyan); border-color: var(--cyan); } [data-theme="dark"] .btn-top.admin:hover { background: var(--cyan); color: #0A0A0A; } /* ── PAGE HEADER ── */ [data-theme="dark"] .page-header { border-bottom-color: rgba(240,235,225,0.18); } /* ── TICKER ── */ [data-theme="dark"] .ticker-bar { background: #0A0A0A; } [data-theme="dark"] #tickerContent .ticker-item { background: rgba(255,255,255,0.05); color: #F0EBE1; } [data-theme="dark"] #tickerContent .ticker-item:hover { background: rgba(255,255,255,0.10); color: white; } /* ── NOTES COLUMNS ── */ [data-theme="dark"] .notes-column { background: var(--card); border-color: var(--border); } [data-theme="dark"] .notes-column.drag-over { border-color: var(--red); background: rgba(240,51,54,0.06); } [data-theme="dark"] .column-header { border-bottom-color: rgba(240,235,225,0.18); color: var(--ink); } /* ── STICKY NOTES ── */ [data-theme="dark"] .sticky-note { background: #282828; border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .sticky-note:hover { box-shadow: 3px 3px 0 rgba(240,235,225,0.25); } [data-theme="dark"] .note-content { color: #C8C2B8; } [data-theme="dark"] .note-title { color: var(--ink); } [data-theme="dark"] .note-shared-label { color: var(--muted); } [data-theme="dark"] .notes-empty { color: var(--muted); } [data-theme="dark"] .note-btn { border-color: rgba(255,255,255,0.15); color: var(--ink); } [data-theme="dark"] .note-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* ── SIDEBAR ACTION BUTTONS ── */ [data-theme="dark"] .action-btn { background: var(--card); border-color: var(--border); color: var(--ink); } [data-theme="dark"] .action-btn .action-label { color: #F0EBE1; } [data-theme="dark"] .action-btn .action-sub { color: #7A7570; } [data-theme="dark"] .action-btn:hover { border-color: rgba(240,235,225,0.4); box-shadow: 3px 3px 0 rgba(240,235,225,0.2); } [data-theme="dark"] .action-btn.intel { background: #0A0A0A; border-color: rgba(255,255,255,0.15); color: var(--paper); } [data-theme="dark"] .action-btn.intel .action-label { color: #F0EBE1; } [data-theme="dark"] .action-btn.intel .action-sub { color: #7A7570; } [data-theme="dark"] .action-btn.intel:hover { background: var(--red); border-color: var(--red); } [data-theme="dark"] .action-btn.intel:hover .action-sub { color: rgba(255,255,255,0.7); } /* ── MAIN LAYOUT DIVIDER ── */ [data-theme="dark"] .main-layout { border-color: var(--border); } [data-theme="dark"] .content-area { border-right-color: var(--border); } /* ── SECTION / SIDEBAR LABELS ── */ [data-theme="dark"] .section-label, [data-theme="dark"] .sidebar-label { border-bottom-color: rgba(240,235,225,0.18); } /* ── MODALS ── */ [data-theme="dark"] .modal-content { background: #1C1C1C; border-color: rgba(240,235,225,0.2); box-shadow: 6px 6px 0 rgba(0,0,0,0.6); } [data-theme="dark"] .modal-header { border-bottom-color: rgba(240,235,225,0.15); } [data-theme="dark"] textarea, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] select { background: #141414; border-color: rgba(240,235,225,0.15); color: var(--ink); } [data-theme="dark"] textarea:focus, [data-theme="dark"] input:focus, [data-theme="dark"] select:focus { border-color: rgba(240,235,225,0.4); box-shadow: 2px 2px 0 var(--red); } [data-theme="dark"] .btn-save { background: rgba(240,235,225,0.9); color: #141414; border-color: rgba(240,235,225,0.9); } [data-theme="dark"] .btn-save:hover { background: var(--red); border-color: var(--red); color: white; } /* ── STATS ROWS (admin / spec / order pages) ── */ [data-theme="dark"] .stats-row, [data-theme="dark"] .stat-cell { border-color: var(--border); } /* ── TABLES (admin, order tracker) ── */ [data-theme="dark"] .users-table thead tr, [data-theme="dark"] .users-table th { color: var(--muted); border-color: rgba(240,235,225,0.18); } [data-theme="dark"] .users-table tbody tr { border-bottom-color: var(--border); } [data-theme="dark"] .users-table tbody tr:hover { background: #252525; } [data-theme="dark"] .users-table td { color: var(--ink); } /* ── ORDER / SPEC CARDS ── */ [data-theme="dark"] .order-card, [data-theme="dark"] .spec-card { background: var(--card); border-color: var(--border); } [data-theme="dark"] .order-card:hover, [data-theme="dark"] .spec-card:hover { box-shadow: 3px 3px 0 rgba(240,235,225,0.2); } /* ── FILTER TABS ── */ [data-theme="dark"] .filter-tab { color: var(--muted); border-color: var(--border); } [data-theme="dark"] .filter-tab.active, [data-theme="dark"] .filter-tab:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* ── ORDER TRACKER — back link button ── */ [data-theme="dark"] .back-link { color: #F0EBE1; border-color: rgba(255,255,255,0.2); } [data-theme="dark"] .back-link:hover { color: var(--yellow); border-color: var(--yellow); } /* ── DATE INPUT — lighten native calendar icon ── */ [data-theme="dark"] input[type="date"] { color-scheme: dark; color: #F0EBE1; } [data-theme="dark"] .login-brand-panel { background: #0A0A0A; } [data-theme="dark"] .login-form-panel { background: #141414; } /* ── SCROLLBARS — subtle in dark mode ── */ [data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #1C1C1C; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3A3A3A; border-radius: 3px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #4A4A4A; } /* ── THEME TOGGLE BUTTON ── */ .theme-toggle { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.2); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all 0.2s; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--yellow); transform: rotate(20deg); } /* Icon swap — JS sets data-theme on */ .theme-toggle .icon-light { display: inline; } .theme-toggle .icon-dark { display: none; } [data-theme="dark"] .theme-toggle .icon-light { display: none; } [data-theme="dark"] .theme-toggle .icon-dark { display: inline; } /* ============================================================ WEEKLY INTEL — Dark Mode Overrides ============================================================ */ /* ── HEADER ── */ [data-theme="dark"] header { background: #0A0A0A; border-bottom-color: var(--red); } [data-theme="dark"] .header-eyebrow { color: var(--yellow); } [data-theme="dark"] .header-sub { color: rgba(240,235,225,0.5); } [data-theme="dark"] .date-label { color: rgba(240,235,225,0.4); } [data-theme="dark"] .date-block { color: #F0EBE1; } /* ── TICKER ── */ [data-theme="dark"] .ticker-wrap { background: #0A0A0A; border-bottom-color: rgba(255,255,255,0.06); } [data-theme="dark"] .ticker-inner { color: var(--yellow); } [data-theme="dark"] .ticker-sep { color: rgba(255,255,255,0.25); } /* ── DATE CIRCLE — richer gold, no green bias ── */ [data-theme="dark"] header::before { background: #C8960A; opacity: 0.55; } /* ── MARKET SNAPSHOT STATS — brighter in dark mode ── */ [data-theme="dark"] .snapshot-stat { background: #1F1F1F; border-color: rgba(240,235,225,0.1); } [data-theme="dark"] .stat-number { color: #F5C518; } [data-theme="dark"] .stat-label { color: #7A7570; } [data-theme="dark"] .main-grid { border-bottom-color: rgba(240,235,225,0.12); } [data-theme="dark"] .col-left { border-right-color: rgba(240,235,225,0.12); } /* ── SECTION LABELS ── */ [data-theme="dark"] .section-label { color: var(--muted); border-bottom-color: rgba(240,235,225,0.12); } [data-theme="dark"] .section-label span { color: var(--yellow); } /* ── HEAT CARDS ── */ [data-theme="dark"] .heat-card { background: #222222; border-color: rgba(240,235,225,0.12); box-shadow: 4px 4px 0 rgba(0,0,0,0.5); } [data-theme="dark"] .heat-card.hot { border-color: var(--red); } [data-theme="dark"] .heat-card.warm { border-color: var(--orange); } [data-theme="dark"] .heat-card.watch { border-color: var(--cyan); } [data-theme="dark"] .heat-card.indie { border-color: var(--green); } [data-theme="dark"] .card-title { color: #F0EBE1; } [data-theme="dark"] .card-issue { color: var(--muted); } [data-theme="dark"] .card-desc { color: #A09890; } [data-theme="dark"] .card-price { color: var(--yellow); } /* ── PRICE TRACKER ── */ [data-theme="dark"] .price-cover { border-top-color: var(--yellow); background: #1A1A1A; } [data-theme="dark"] .price-market { color: var(--green); } [data-theme="dark"] .price-market.flat { color: var(--muted); } /* ── SPEC LIST ── */ [data-theme="dark"] .spec-row { background: #1F1F1F; border-bottom-color: rgba(240,235,225,0.08); } [data-theme="dark"] .spec-row:hover { background: #2A2A2A; } [data-theme="dark"] .spec-name { color: #F0EBE1; } [data-theme="dark"] .spec-reason { color: var(--muted); } /* ── SNAPSHOT STATS ── */ [data-theme="dark"] .snapshot-stat { border-color: rgba(240,235,225,0.1); } [data-theme="dark"] .stat-number { color: #F0EBE1; } [data-theme="dark"] .stat-label { color: var(--muted); } /* ── SIDEBAR SECTIONS ── */ [data-theme="dark"] .sidebar-section { border-bottom-color: rgba(240,235,225,0.08); } /* ── FOC DEADLINES ── */ [data-theme="dark"] .foc-item { border-left-color: var(--muted); background: transparent; } [data-theme="dark"] .foc-item.urgent { border-left-color: var(--red); background: rgba(240,51,54,0.08); } [data-theme="dark"] .foc-item.soon { border-left-color: var(--orange); background: rgba(255,122,61,0.08); } [data-theme="dark"] .foc-item.upcoming { border-left-color: var(--cyan); background: rgba(18,198,236,0.06); } [data-theme="dark"] .foc-title { color: #C8C2B8; } /* ── ORDER RECOMMENDATIONS ── */ [data-theme="dark"] .order-cat-label { color: #F0EBE1; } [data-theme="dark"] .order-items { color: #A09890; } /* ── BUZZ STRIP ── */ [data-theme="dark"] .buzz-strip { background: #111111; border-top-color: rgba(240,235,225,0.1); border-bottom-color: rgba(240,235,225,0.1); } [data-theme="dark"] .buzz-item { border-right-color: rgba(240,235,225,0.08); } [data-theme="dark"] .buzz-item-label { color: var(--yellow); } [data-theme="dark"] .buzz-item-title { color: #F0EBE1; } [data-theme="dark"] .buzz-item-desc { color: #A09890; } /* ── BOTTOM GRID ── */ [data-theme="dark"] .bottom-grid { background: #111111; } [data-theme="dark"] .bottom-col { border-right-color: rgba(240,235,225,0.08); } /* ── BIG EVENT CARDS ── */ [data-theme="dark"] .big-event-card { background: #1A3A5C; } [data-theme="dark"] .event-name { color: #F0EBE1; } [data-theme="dark"] .event-desc { color: #A0B8CC; } /* ── INDIE WATCH ── */ [data-theme="dark"] .indie-row { border-bottom-color: rgba(240,235,225,0.08); } [data-theme="dark"] .indie-row-title { color: #F0EBE1; } [data-theme="dark"] .indie-row-pub { color: var(--muted); } /* ── PLATFORM ROWS ── */ [data-theme="dark"] .platform-row { border-bottom-color: rgba(240,235,225,0.08); } [data-theme="dark"] .platform-name { color: #F0EBE1; } [data-theme="dark"] .platform-detail { color: #A09890; } [data-theme="dark"] .trend-up { color: var(--green); } /* ── FOOTER ── */ [data-theme="dark"] footer { background: #0A0A0A; border-top-color: rgba(240,235,225,0.1); color: rgba(240,235,225,0.4); } [data-theme="dark"] footer a { color: var(--yellow); } /* ── CONTENT PLAYS CARD — keep dark on dark, don't inherit cream --ink ── */ [data-theme="dark"] .content-plays-card { background: #0A0A0A !important; color: #F0EBE1 !important; }