/* * theme.css — light theme overrides. * * style.css drives every surface from a small set of CSS variables, so the * cleanest way to flip themes is to redefine those variables. Anything that * still uses hardcoded colors gets a targeted override below. * * Activated by [data-theme="light"] on ; defaults to light per spec. */ html[data-theme="light"] { /* Core palette */ --bg-base: #f6f7fb; --bg-surface: #ffffff; --bg-raised: #ffffff; --bg-hover: #eef0f6; --border: rgba(20, 24, 40, 0.08); --border-bright: rgba(20, 24, 40, 0.18); --text-primary: #1a1d2b; --text-secondary: #5b6172; --text-muted: #8a90a3; --accent: #3aab96; --accent-dim: rgba(58, 171, 150, 0.15); } /* Hard-coded surfaces in style.css that don't use variables */ html[data-theme="light"] body { background: #f6f7fb; color: #1a1d2b; } html[data-theme="light"] #main::before { background-image: linear-gradient(rgba(20, 24, 40, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 24, 40, 0.04) 1px, transparent 1px) !important; } html[data-theme="light"] #tooltip { box-shadow: 0 8px 32px rgba(20, 24, 40, 0.18) !important; } /* Node labels: darken and saturate for contrast on light bg */ html[data-theme="light"] svg .node-label { filter: brightness(0.55) saturate(1.8); } /* Node body: solid-ish fill with vivid stroke so nodes pop on white */ html[data-theme="light"] svg .node-body { fill-opacity: 0.18; stroke-opacity: 1; stroke-width: 2.5px; filter: brightness(0.75) saturate(1.6); } /* Glow ring: stronger in light mode */ html[data-theme="light"] svg .node-glow { opacity: 0.55; filter: brightness(0.7) saturate(1.6); } /* Track-page hero gradient is fine, just darken text */ html[data-theme="light"] .track-body { background: #f6f7fb; color: #1a1d2b; } html[data-theme="light"] #track-hero { background: radial-gradient(800px 300px at 0% 0%, var(--track-accent) -50%, transparent 60%), #ffffff !important; border-color: rgba(20, 24, 40, 0.1) !important; } html[data-theme="light"] #track-description, html[data-theme="light"] .news-meta, html[data-theme="light"] .stat-label, html[data-theme="light"] .company-table th, html[data-theme="light"] .company-table td.dim { color: #5b6172 !important; } html[data-theme="light"] .meta-pill, html[data-theme="light"] .stat-cell, html[data-theme="light"] .news-item { background: #ffffff !important; border-color: rgba(20, 24, 40, 0.1) !important; color: #1a1d2b !important; } html[data-theme="light"] .company-table th, html[data-theme="light"] .company-table td { border-color: rgba(20, 24, 40, 0.08) !important; } html[data-theme="light"] .company-table tr:hover td { background: #eef0f6 !important; } html[data-theme="light"] .news-summary { color: #5b6172 !important; } html[data-theme="light"] .news-empty, html[data-theme="light"] .empty { border-color: rgba(20, 24, 40, 0.12) !important; color: #8a90a3 !important; } html[data-theme="light"] .sort-row select { background: #ffffff !important; color: #1a1d2b !important; border-color: rgba(20, 24, 40, 0.15) !important; } html[data-theme="light"] .back-link, html[data-theme="light"] .theme-toggle { color: #5b6172 !important; } html[data-theme="light"] .back-link:hover { color: #1a1d2b !important; } html[data-theme="light"] .ipick-logo-link { background: transparent; } html[data-theme="light"] .ipick-logo { filter: none; } html[data-theme="light"] .theme-toggle { border-color: rgba(20, 24, 40, 0.18) !important; } /* ── Stats grid + news layout (shared by track and stock pages) ── */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; } .stat-cell { border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.02); border-radius: 10px; padding: 14px 16px; } .stat-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 4px; } .stat-val { font-size: 16px; font-variant-numeric: tabular-nums; } .news-list { display: flex; flex-direction: column; gap: 12px; } .news-item { display: block; text-decoration: none; color: inherit; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; background: rgba(255, 255, 255, 0.02); transition: border-color 0.15s, background 0.15s; } .news-item:hover { border-color: var(--track-accent, #2563eb); background: rgba(255, 255, 255, 0.04); } .news-title { font-size: 14px; font-weight: 500; margin-bottom: 6px; } .news-meta { font-size: 11px; color: rgba(255, 255, 255, 0.5); } .news-summary { font-size: 13px; color: rgba(255, 255, 255, 0.7); margin-top: 6px; line-height: 1.4; } .news-ticker { display: inline-block; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); font-weight: 500; } .theme-toggle { background: transparent; border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.7); border-radius: 6px; width: 30px; height: 28px; padding: 0; font-size: 14px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-left: 8px; flex-shrink: 0; } .theme-toggle:hover { color: #fff; } .dim { color: rgba(255, 255, 255, 0.45); } .small { font-size: 11px; } .source-badge { font-family: var(--font-mono, monospace); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); margin-right: 8px; } html[data-theme="light"] .source-badge { background: rgba(20, 24, 40, 0.08) !important; color: #5b6172 !important; }