/* ───────────────────────────────────────────────────────────────────────── THEMES Each block overrides :root variables from style.css to give a theme its own color + typography + stylistic feel. Themes are activated by a data-theme="..." attribute on . A good theme changes more than colors — it swaps the font, adjusts letter-spacing, text-shadows, border-radius, and sometimes adds a background texture, so the app actually *feels* different. The CUSTOM theme (no block here) gets its variables injected inline by base.html from the user's saved JSON. ───────────────────────────────────────────────────────────────────────── */ /* ── 1. GITHUB ── developer's home. clean, familiar, sans-serif ──────── */ [data-theme="github"] { --bg: #0d1117; --bg-card: #161b22; --bg-input: #0d1117; --border: #30363d; --accent: #58a6ff; --accent-dim: #1f6feb; --accent-glow: rgba(88,166,255,0.15); --accent-shadow: rgba(88,166,255,0.35); --text: #c9d1d9; --text-dim: #8b949e; --heatmap-empty: #161b22; --heatmap-empty-border: #30363d; --heatmap-1: #0e4429; --heatmap-2: #006d32; --heatmap-3: #26a641; --heatmap-4: #39d353; --success: #3fb950; --danger: #f85149; --danger-glow: rgba(248,81,73,0.12); --danger-dim: #5a1a1a; --danger-text: #ff7b72; --chart-grid: #21262d; --chart-tick: #8b949e; --scanline: transparent; --navbar-bg: #010409; /* Typography — GitHub uses Inter for UI, SF Mono / JetBrains for code */ --font-mono: 'Inter', -apple-system, 'Segoe UI', sans-serif; --font-display: 'Inter', -apple-system, 'Segoe UI', sans-serif; /* Feel — no CRT effects, subtle shadows, modern rounded corners */ --letter-spacing-heading: -0.01em; --letter-spacing-button: normal; --heading-text-transform: none; --heading-shadow: none; --heading-shadow-sm: none; --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.3); --button-glow: 0 2px 8px rgba(88,166,255,0.2); --border-radius: 6px; --flicker-enabled: 0; } [data-theme="github"] h2, [data-theme="github"] h4, [data-theme="github"] h5 { font-weight: 600; } [data-theme="github"] .navbar-brand { font-weight: 700; animation: none; /* no flicker for modern theme */ } [data-theme="github"] .btn { font-weight: 500; } /* ── 2. TYPEWRITER ── warm paper, Courier Prime, red accent ──────────── */ [data-theme="typewriter"] { --bg: #f5efe0; --bg-card: #faf5e8; --bg-input: #ffffff; --border: #d4c8a8; --accent: #b83030; --accent-dim: #8b2424; --accent-glow: rgba(184,48,48,0.1); --accent-shadow: rgba(184,48,48,0.25); --text: #2a1810; --text-dim: #6a5a40; --heatmap-empty: #faf5e8; --heatmap-empty-border: #d4c8a8; --heatmap-1: #e8c8a0; --heatmap-2: #c88a60; --heatmap-3: #a04040; --heatmap-4: #b83030; --success: #4a6a2a; --danger: #8b2424; --danger-glow: rgba(139,36,36,0.1); --danger-dim: #c5a896; --danger-text: #8b2424; --chart-grid: #e8dcb8; --chart-tick: #6a5a40; --scanline: transparent; --navbar-bg: #e8dcb8; --font-mono: 'Courier Prime', 'Courier New', monospace; --font-display: 'Courier Prime', 'Courier New', monospace; --letter-spacing-heading: 2px; --heading-text-transform: uppercase; --heading-shadow: none; --heading-shadow-sm: none; --card-shadow-hover: 2px 2px 0 var(--accent-dim); --button-glow: 2px 2px 0 var(--accent-dim); --border-radius: 0; } [data-theme="typewriter"] .navbar-brand { animation: none; font-weight: 700; } [data-theme="typewriter"] h2, [data-theme="typewriter"] h4, [data-theme="typewriter"] h5 { font-weight: 700; } /* ── 3. BLUEPRINT ── drafting-room grid, architectural feel ──────────── */ [data-theme="blueprint"] { --bg: #1e3a5f; --bg-card: #264866; --bg-input: #1a3555; --border: #89c2d9; --accent: #ffffff; --accent-dim: #c5dff2; --accent-glow: rgba(255,255,255,0.12); --accent-shadow: rgba(255,255,255,0.3); --text: #e8f1fa; --text-dim: #89c2d9; --heatmap-empty: #1a3555; --heatmap-empty-border: #89c2d9; --heatmap-1: #3a5a7a; --heatmap-2: #6a8aaa; --heatmap-3: #a0c0dc; --heatmap-4: #ffffff; --success: #a0ff9a; --danger: #ff8a8a; --danger-glow: rgba(255,138,138,0.12); --danger-dim: #8a4444; --danger-text: #ffaaaa; --chart-grid: #264866; --chart-tick: #89c2d9; --scanline: transparent; --navbar-bg: #16304d; /* Grid background — actual blueprint paper */ --body-bg-image: linear-gradient(rgba(137,194,217,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(137,194,217,0.08) 1px, transparent 1px); --font-mono: 'Archivo Narrow', 'Helvetica', sans-serif; --font-display: 'Archivo Narrow', 'Helvetica', sans-serif; --letter-spacing-heading: 4px; --letter-spacing-button: 2px; --heading-text-transform: uppercase; --heading-shadow: none; --heading-shadow-sm: none; --card-shadow-hover: 0 0 0 1px var(--accent); --button-glow: 0 0 0 1px var(--accent); --border-radius: 0; } [data-theme="blueprint"] body { background-size: 24px 24px; } [data-theme="blueprint"] .navbar-brand { animation: none; font-weight: 700; } [data-theme="blueprint"] h2, [data-theme="blueprint"] h4, [data-theme="blueprint"] h5 { font-weight: 700; } /* ── 4. PARCHMENT ── illuminated manuscript, Cinzel capitals ─────────── */ [data-theme="parchment"] { --bg: #e8dcb8; --bg-card: #f0e5c6; --bg-input: #faf0d4; --border: #b09060; --accent: #8b2020; --accent-dim: #5a1515; --accent-glow: rgba(139,32,32,0.12); --accent-shadow: rgba(139,32,32,0.3); --text: #3a1e0a; --text-dim: #6a4a2a; --heatmap-empty: #f0e5c6; --heatmap-empty-border: #b09060; --heatmap-1: #d4b890; --heatmap-2: #b07a50; --heatmap-3: #8b2020; --heatmap-4: #5a1515; --success: #4a5a1a; --danger: #8b2020; --danger-glow: rgba(139,32,32,0.12); --danger-dim: #c5a896; --danger-text: #8b2020; --chart-grid: #d4c09a; --chart-tick: #6a4a2a; --scanline: transparent; --navbar-bg: #d4c09a; /* Aged-paper texture — radial gradients for warmth */ --body-bg-image: radial-gradient(ellipse at top left, rgba(139,32,32,0.04) 0%, transparent 50%), radial-gradient(ellipse at bottom right, rgba(106,74,42,0.08) 0%, transparent 50%); --font-mono: 'Cinzel', 'Trajan Pro', serif; --font-display: 'Cinzel', 'Trajan Pro', serif; --letter-spacing-heading: 5px; --letter-spacing-button: 3px; --letter-spacing-body: 0.01em; --heading-text-transform: uppercase; --heading-shadow: none; --heading-shadow-sm: none; --card-shadow-hover: 0 4px 12px rgba(58,30,10,0.2); --button-glow: 0 2px 6px rgba(139,32,32,0.2); --border-radius: 0; } [data-theme="parchment"] .navbar-brand { animation: none; font-weight: 700; } [data-theme="parchment"] h2, [data-theme="parchment"] h4, [data-theme="parchment"] h5 { font-weight: 700; } /* ── 5. NEWSPAPER ── black ink on newsprint, Playfair headlines ──────── */ [data-theme="newspaper"] { --bg: #f2efe6; --bg-card: #fafaf4; --bg-input: #ffffff; --border: #1a1a1a; --accent: #1a1a1a; --accent-dim: #4a4a4a; --accent-glow: rgba(26,26,26,0.08); --accent-shadow: rgba(26,26,26,0.3); --text: #1a1a1a; --text-dim: #4a4a4a; --heatmap-empty: #fafaf4; --heatmap-empty-border: #1a1a1a; --heatmap-1: #d0d0cc; --heatmap-2: #8a8a86; --heatmap-3: #4a4a4a; --heatmap-4: #1a1a1a; --success: #2a5a2a; --danger: #8b1010; --danger-glow: rgba(139,16,16,0.08); --danger-dim: #c0a0a0; --danger-text: #8b1010; --chart-grid: #d0d0cc; --chart-tick: #4a4a4a; --scanline: transparent; --navbar-bg: #f2efe6; --font-mono: 'Lora', Georgia, serif; --font-display: 'Playfair Display', Georgia, serif; --letter-spacing-heading: -0.01em; --letter-spacing-button: 1px; --heading-text-transform: none; --heading-shadow: none; --heading-shadow-sm: none; --card-shadow-hover: 0 4px 8px rgba(0,0,0,0.1); --button-glow: none; --border-radius: 0; } [data-theme="newspaper"] .navbar-brand { animation: none; font-weight: 900; font-style: italic; } [data-theme="newspaper"] h2, [data-theme="newspaper"] h4, [data-theme="newspaper"] h5 { font-weight: 900; } /* Newspaper: bottom border on navbar mimics a masthead rule */ [data-theme="newspaper"] .navbar { border-bottom: 3px double var(--accent); } /* ── 6. BBS ── 1994 dial-up board, Press Start 2P ANSI colors ─────────── */ [data-theme="bbs"] { --bg: #000055; --bg-card: #0000aa; --bg-input: #000044; --border: #5555ff; --accent: #ff55ff; --accent-dim: #aa00aa; --accent-glow: rgba(255,85,255,0.2); --accent-shadow: rgba(255,85,255,0.5); --text: #ffff55; --text-dim: #55ffff; --heatmap-empty: #000044; --heatmap-empty-border: #5555ff; --heatmap-1: #0000aa; --heatmap-2: #aa00aa; --heatmap-3: #ff55ff; --heatmap-4: #ffff55; --success: #55ff55; --danger: #ff5555; --danger-glow: rgba(255,85,85,0.15); --danger-dim: #aa0000; --danger-text: #ff5555; --chart-grid: #0000aa; --chart-tick: #55ffff; --scanline: rgba(0,0,0,0.15); --navbar-bg: #000000; --font-mono: 'Press Start 2P', 'Courier New', monospace; --font-display: 'Press Start 2P', 'Courier New', monospace; --letter-spacing-heading: 2px; --letter-spacing-button: 1px; --heading-text-transform: uppercase; --heading-shadow: 2px 2px 0 #0000aa; --heading-shadow-sm: 2px 2px 0 #0000aa; --card-shadow-hover: 4px 4px 0 var(--accent); --button-glow: 2px 2px 0 var(--accent); --border-radius: 0; } [data-theme="bbs"] { /* Press Start 2P is HUGE at default sizes — scale the whole body down */ font-size: 14px !important; } [data-theme="bbs"] body { font-size: 14px; } [data-theme="bbs"] h2 { font-size: 1.4rem; } [data-theme="bbs"] h4, [data-theme="bbs"] h5 { font-size: 1rem; } [data-theme="bbs"] .btn { font-size: 0.6rem !important; } [data-theme="bbs"] .navbar-brand { font-size: 1rem; } [data-theme="bbs"] .empty-state .big-number { font-size: 4rem; } [data-theme="bbs"] .stat-row strong { font-size: 1.1rem; } [data-theme="bbs"] .theme-name { font-size: 0.75rem; } /* ── 7. ZEN ── minimalist Japanese, serif, generous whitespace ───────── */ [data-theme="zen"] { --bg: #faf8f5; --bg-card: #ffffff; --bg-input: #f5f2ed; --border: #e8e4dd; --accent: #2a2a2a; --accent-dim: #8a6a4a; --accent-glow: rgba(42,42,42,0.04); --accent-shadow: rgba(42,42,42,0.15); --text: #2a2a2a; --text-dim: #606060; --heatmap-empty: #f5f2ed; --heatmap-empty-border: #e8e4dd; --heatmap-1: #d8d0c4; --heatmap-2: #a89a8a; --heatmap-3: #6a6a6a; --heatmap-4: #2a2a2a; --success: #5a7a4a; --danger: #8a4a4a; --danger-glow: rgba(138,74,74,0.06); --danger-dim: #c8b8b8; --danger-text: #8a4a4a; --chart-grid: #e8e4dd; --chart-tick: #808080; --scanline: transparent; --navbar-bg: #faf8f5; --font-mono: 'Noto Serif', Georgia, serif; --font-display: 'Noto Serif', Georgia, serif; --letter-spacing-heading: 0.02em; --letter-spacing-button: 0.1em; --letter-spacing-body: 0.005em; --heading-text-transform: none; --heading-shadow: none; --heading-shadow-sm: none; --card-shadow-hover: 0 8px 24px rgba(0,0,0,0.05); --button-glow: none; --border-radius: 2px; } [data-theme="zen"] .navbar-brand { animation: none; font-weight: 400; font-style: italic; } [data-theme="zen"] .navbar { border-bottom: 1px solid var(--border); } [data-theme="zen"] h2, [data-theme="zen"] h4, [data-theme="zen"] h5 { font-weight: 400; } [data-theme="zen"] .card-body { padding: 3rem; } /* ── 8. ARCADE ── 80s cabinet, Press Start 2P, scanlines, hot colors ─── */ [data-theme="arcade"] { --bg: #0a0020; --bg-card: #140040; --bg-input: #0a0030; --border: #4a00aa; --accent: #ffff00; --accent-dim: #ffaa00; --accent-glow: rgba(255,255,0,0.2); --accent-shadow: rgba(255,255,0,0.5); --text: #00ddff; --text-dim: #aa5ad9; --heatmap-empty: #140040; --heatmap-empty-border: #4a00aa; --heatmap-1: #4a00aa; --heatmap-2: #ff00aa; --heatmap-3: #ffaa00; --heatmap-4: #ffff00; --success: #00ff88; --danger: #ff0066; --danger-glow: rgba(255,0,102,0.15); --danger-dim: #5a0020; --danger-text: #ff4488; --chart-grid: #2a0055; --chart-tick: #aa5ad9; --scanline: rgba(0,0,0,0.2); --navbar-bg: #050010; --font-mono: 'Press Start 2P', monospace; --font-display: 'Press Start 2P', monospace; --letter-spacing-heading: 2px; --letter-spacing-button: 1px; --heading-text-transform: uppercase; --heading-shadow: 0 0 10px var(--accent), 3px 3px 0 #ff00aa; --heading-shadow-sm: 0 0 8px var(--accent), 2px 2px 0 #ff00aa; --card-shadow-hover: 0 0 20px var(--accent-glow), 0 0 40px rgba(255,0,170,0.2); --button-glow: 0 0 12px var(--accent-glow); --border-radius: 0; } [data-theme="arcade"] { font-size: 13px !important; } [data-theme="arcade"] body { font-size: 13px; } [data-theme="arcade"] h2 { font-size: 1.4rem; } [data-theme="arcade"] h4, [data-theme="arcade"] h5 { font-size: 1rem; } [data-theme="arcade"] .btn { font-size: 0.55rem !important; } [data-theme="arcade"] .navbar-brand { font-size: 1rem; } [data-theme="arcade"] .empty-state .big-number { font-size: 4rem; } [data-theme="arcade"] .stat-row strong { font-size: 1.1rem; } [data-theme="arcade"] .theme-name { font-size: 0.75rem; } /* ── 9. PAPER ── ink on cream, Crimson Pro serif ─────────────────────── */ [data-theme="paper"] { --bg: #f4ecd8; --bg-card: #ede4c8; --bg-input: #f7f0dd; --border: #c5b896; --accent: #3a2f1b; --accent-dim: #8b6f3a; --accent-glow: rgba(58,47,27,0.1); --accent-shadow: rgba(58,47,27,0.3); --text: #3a2f1b; --text-dim: #8b7a55; --heatmap-empty: #f7f0dd; --heatmap-empty-border: #c5b896; --heatmap-1: #d4c89a; --heatmap-2: #b09060; --heatmap-3: #8b6f3a; --heatmap-4: #3a2f1b; --success: #4a6a2a; --danger: #a04030; --danger-glow: rgba(160,64,48,0.08); --danger-dim: #c5a896; --danger-text: #804030; --chart-grid: #ede4c8; --chart-tick: #8b7a55; --scanline: transparent; --navbar-bg: #ede4c8; --font-mono: 'Crimson Pro', Georgia, serif; --font-display: 'Crimson Pro', Georgia, serif; --letter-spacing-heading: 1px; --letter-spacing-button: 1px; --heading-text-transform: uppercase; --heading-shadow: none; --heading-shadow-sm: none; --card-shadow-hover: 0 4px 12px rgba(58,47,27,0.15); --button-glow: none; --border-radius: 0; } [data-theme="paper"] .navbar-brand { animation: none; text-shadow: none; }