/* ═══════════════════════════════════════════════════════════ JOG-THEME.CSS — design tokens (ported from JOG_Portal prototype) Dark / Light via [data-theme] on ; brand via [data-brand]. No resets here — this layer must not disturb Bootstrap 3 markup. ═══════════════════════════════════════════════════════════ */ /* ── DARK THEME ───────────────────────────────────────────── */ [data-theme="dark"] { --bg: #07080C; --surface: #0F1117; --card: #141720; --elevated: #1A1F30; --border: #1E2332; --border-hi: #2A3048; --text: #E8EAF2; --text-sub: #7A839A; --text-muted: #4E5570; --input-bg: #0F1117; --shadow: 0 2px 16px rgba(0,0,0,.55); /* Price guide specifics */ --pg-hd: #1A1F30; --pg-hd-txt: #E8EAF2; --pg-alt: #0F1117; --pg-cats-bg: #0B0D14; /* Theme toggle icons */ --show-sun: inline; --show-moon: none; } /* ── LIGHT THEME ─────────────────────────────────────────── */ [data-theme="light"] { --bg: #EEF0F7; --surface: #FFFFFF; --card: #FFFFFF; --elevated: #F4F6FC; --border: #DFE3EF; --border-hi: #C6CEDF; --text: #1A1E2E; --text-sub: #6B7489; --text-muted: #9199AE; --input-bg: #F4F6FC; --shadow: 0 2px 12px rgba(0,0,0,.08); --pg-hd: #2C3650; --pg-hd-txt: #FFFFFF; --pg-alt: #F4F6FC; --pg-cats-bg: #232B40; --show-sun: none; --show-moon: inline; } /* ── BRAND TOKENS (theme-independent) ────────────────────── */ :root { --red: #E8192C; --red-hover: #FF2D40; --red-lo: rgba(232,25,44,.12); --red-glow: rgba(232,25,44,.3); --blue: #3D7FFF; --blue-lo: rgba(61,127,255,.1); --green: #22C55E; --green-lo: rgba(34,197,94,.1); --amber: #F59E0B; --amber-lo: rgba(245,158,11,.1); --purple: #A855F7; --purple-lo: rgba(168,85,247,.1); --cyan: #06B6D4; --cyan-lo: rgba(6,182,212,.1); /* Layout */ --sw: 228px; /* sidebar width */ --sw-sm: 60px; /* collapsed sidebar (nav-sm) */ --hh: 58px; /* header height */ /* Radius */ --r: 10px; --rs: 6px; --rl: 14px; /* Fonts */ --font-ui: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: 'DM Mono', Menlo, monospace; --font-display: var(--font-ui); /* QTY band colours (price guide sticky header bands) */ --qg1: #1B4F8A; --qg2: #1A6340; --qg3: #6B2E9A; --qg4: #8B4513; /* Fixed light canvas used by the legacy "light island" */ --island-bg: #EEF0F7; --island-card: #FFFFFF; --island-text: #1A1E2E; } /* ── BAUER BRAND VARIANT ─────────────────────────────────── */ [data-brand="bauer"] { --red: #009CDA; --red-hover: #21B1EA; --red-lo: rgba(0,156,218,.14); --red-glow: rgba(0,156,218,.3); --font-ui: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-display: 'din-2014-narrow', 'Roboto Condensed', Impact, sans-serif; } [data-brand="bauer"][data-theme="dark"] { --bg: #050608; --surface: #0C0E12; --card: #12151B; --elevated: #191D26; } /* ── ANIMATIONS ──────────────────────────────────────────── */ @keyframes jogSlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes jogFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes jogPulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } } @keyframes jogBump { 0% { transform: scale(1); } 50% { transform: scale(1.6); } 100% { transform: scale(1); } }