/* ============================================================ CDMTRAK — SHARED THEME Single source of truth for the black-and-white look across every CDMTrak hub page. Change colours here, all pages update. Linked by: index, strive, crypto, tutoring, youtube, family ------------------------------------------------------------ Two modes: default = dark B&W, [data-theme="light"] = light B&W. The toggle on each page sets data-theme on . ============================================================ */ /* ── PALETTE ───────────────────────────────────────────────── */ /* Dark mode (default) */ :root { --bg: #0E0E0E; --surface: #1A1A1A; --surface2: #242424; --surface3: #2E2E2E; --border: #333333; --border-strong: #4D4D4D; /* Monochrome accent + readable text colour for use ON the accent */ --accent: #FFFFFF; --on-accent: #111111; /* All section accents collapse to the single B&W accent */ --cyan: var(--accent); --health: var(--accent); --green: var(--accent); --amber: var(--accent); --purple: var(--accent); --tutor: var(--accent); --crypto: var(--accent); --strive: var(--accent); --family: var(--accent); --yt: var(--accent); --yt-soft: rgba(255,255,255,0.08); --yt-line: rgba(255,255,255,0.30); /* Red kept as the one semantic colour — severity / errors / status */ --red: #FF6B6B; --text: #F4F4F4; --text-soft: #999999; --text-faint: #6A6A6A; --shadow: 0 2px 12px rgba(0,0,0,0.40); --glow-crypto: 0 0 0 1px rgba(255,255,255,0.10); } /* Light mode */ :root[data-theme="light"] { --bg: #F8F8F8; --surface: #FFFFFF; --surface2: #F0F0F0; --surface3: #E8E8E8; --border: #DDDDDD; --border-strong: #BBBBBB; --accent: #111111; --on-accent: #FFFFFF; --yt-soft: rgba(0,0,0,0.05); --yt-line: rgba(0,0,0,0.25); --red: #D44848; --text: #111111; --text-soft: #666666; --text-faint: #999999; --shadow: 0 2px 12px rgba(0,0,0,0.10); --glow-crypto: 0 0 0 1px rgba(0,0,0,0.10); } /* ── UNIFIED NAV ───────────────────────────────────────────── */ /* Pill-style bar — same on every page. Width comes from the page's own .app container, so this stays layout-agnostic. */ .nav-bar { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; scrollbar-width: none; margin-bottom: 18px; } .nav-bar::-webkit-scrollbar { display: none; } .nav-link { flex: none; padding: 8px 14px; font-size: 0.84rem; font-weight: 500; color: var(--text-soft); text-decoration: none; border-radius: 8px; white-space: nowrap; border-bottom: none; transition: background 0.15s, color 0.15s; } .nav-link:hover { color: var(--text); background: var(--surface2); } .nav-link.active { color: var(--on-accent); background: var(--accent); font-weight: 600; border-color: transparent; } /* ── UNIFIED THEME TOGGLE ──────────────────────────────────── */ .theme-toggle { width: 32px; height: 32px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border); color: var(--text-soft); font-size: 14px; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; font-family: inherit; padding: 0; line-height: 1; transition: background 0.15s, color 0.15s; } .theme-toggle:hover { background: var(--border); color: var(--text); }