/** * themes.css — Swappable visual themes for SaltaVidas. * * Applied via data-theme attribute on . * The default (Neon Noir) lives in :root of style.css. * * Themes: * default — Neon Noir (dark navy + crimson + teal) * arcade — Arcade Gold (warm dark + amber + lime, monospace) * sakura — Sakura Night (warm dark parchment + cherry pink + spring green) * ocean — Deep Ocean (near-black teal + cyan + coral, glass panels) */ /* ══════════════════════════════════════════════════════════════════════════ 🕹️ ARCADE GOLD — Retro terminal warmth. Chunky pixels, amber glow. ══════════════════════════════════════════════════════════════════════════ */ [data-theme="arcade"] { --sv-bg: #111008; --sv-surface: #1c1a0e; --sv-card: #27250f; --sv-card-deep: #0e0d06; --sv-track: #1a1808; --sv-border: #3c3a18; --sv-border-hi: #5c5820; --sv-border-lo: #2a2810; --sv-text: #f0e060; --sv-text-sub: #c4b838; --sv-text-muted: #888628; --sv-text-dim: #484510; --sv-accent: #ff7700; --sv-accent-h: #dd5500; --sv-green: #44ff80; --sv-green-2: #88ffcc; --sv-amber: #ffcc00; --sv-gold: #ffaa00; --sv-btn-bg: #27250f; --sv-btn-bg-h: #38360f; --sv-btn-2-text: #f0e060; --sv-font: 'Courier New', 'Lucida Console', monospace; --sv-radius: 4px; --sv-radius-sm: 2px; --sv-header-grad: linear-gradient(135deg, #0a0904, #1c1a0e); --sv-hud-bg: rgba(17, 16, 8, 0.75); --sv-pulse-glow: rgba(255, 119, 0, 0.45); --sv-footer-bg: rgba(10, 9, 4, 0.95); --sv-modal-bg: #1c1a0e; --sv-modal-border: #ff7700; --sv-panel-shadow: none; --sv-card-shadow: none; } /* Scanline atmosphere on panels */ [data-theme="arcade"] .panel { background-image: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.08) 2px, rgba(0, 0, 0, 0.08) 4px ); } /* Panel headers get a retro dashed border */ [data-theme="arcade"] .panel h2 { border-bottom-style: dashed; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.88rem; } /* Tab bar gets a terminal-style bottom line only */ [data-theme="arcade"] .tab { border-radius: 0; border-bottom: 2px solid transparent; background: transparent; } [data-theme="arcade"] .tab:hover { background: var(--sv-card); } [data-theme="arcade"] .tab.active { background: transparent; border-bottom-color: var(--sv-accent); } /* Buttons get a retro border + NO radius */ [data-theme="arcade"] .btn-primary { border: 2px solid var(--sv-accent); } [data-theme="arcade"] .btn-secondary { border: 2px solid var(--sv-border-hi); } /* Activity items — square corners + dashed border on hover */ [data-theme="arcade"] .activity-item:hover { border-color: var(--sv-accent); border-style: dashed; } /* Cursor blink on panel h2 — little personality touch */ [data-theme="arcade"] .panel h2::after { content: '█'; animation: blink 1.1s step-start infinite; font-size: 0.9em; margin-left: 4px; color: var(--sv-accent); } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Progress bars — blocky segments */ [data-theme="arcade"] .lsb-bar { border-radius: 0; } [data-theme="arcade"] .lsb-fill { border-radius: 0; } [data-theme="arcade"] .action-progress-track { border-radius: 0; } [data-theme="arcade"] .action-progress-bar { border-radius: 0; } /* Modal border — double frame */ [data-theme="arcade"] .modal { border-width: 3px; border-style: double; } /* ══════════════════════════════════════════════════════════════════════════ 🌸 SAKURA NIGHT — Warm parchment dark. Cherry pink blooms, serif warmth. ══════════════════════════════════════════════════════════════════════════ */ [data-theme="sakura"] { --sv-bg: #1a100a; --sv-surface: #251810; --sv-card: #301e14; --sv-card-deep: #160e08; --sv-track: #1c1208; --sv-border: #3e2a1c; --sv-border-hi: #5e3e2c; --sv-border-lo: #2c1e14; --sv-text: #f8e8d0; --sv-text-sub: #d4b898; --sv-text-muted: #a07858; --sv-text-dim: #5c4030; --sv-accent: #ff5fa0; --sv-accent-h: #dd3d80; --sv-green: #72d870; --sv-green-2: #98ec96; --sv-amber: #f0b040; --sv-gold: #e89030; --sv-btn-bg: #301e14; --sv-btn-bg-h: #402a1c; --sv-btn-2-text: #f8e8d0; --sv-font: Georgia, 'Palatino Linotype', Palatino, serif; --sv-radius: 14px; --sv-radius-sm: 10px; --sv-header-grad: linear-gradient(135deg, #1a100a, #301e14); --sv-hud-bg: rgba(26, 16, 10, 0.72); --sv-pulse-glow: rgba(255, 95, 160, 0.45); --sv-footer-bg: rgba(16, 8, 4, 0.94); --sv-modal-bg: #251810; --sv-modal-border: #ff5fa0; --sv-panel-shadow: 0 2px 16px rgba(255, 95, 160, 0.06); --sv-card-shadow: 0 1px 8px rgba(0, 0, 0, 0.3); } /* Warm petal glow on panels */ [data-theme="sakura"] .panel { box-shadow: 0 2px 16px rgba(255, 95, 160, 0.07), inset 0 1px 0 rgba(255, 200, 180, 0.05); } /* Section headers — elegant with petal emoji spacing */ [data-theme="sakura"] .panel h2 { font-style: italic; letter-spacing: 0.03em; border-bottom-color: var(--sv-border-hi); } /* Tabs — pill shape, no hard edges */ [data-theme="sakura"] .tab { border-radius: 20px; margin-bottom: 4px; } [data-theme="sakura"] .tab.active { background: color-mix(in srgb, var(--sv-accent) 20%, var(--sv-surface)); color: var(--sv-accent); border-bottom: none; } [data-theme="sakura"] .tab-bar { gap: 6px; } /* Buttons — rounder, softer */ [data-theme="sakura"] .btn-primary { border-radius: 22px; letter-spacing: 0.04em; } [data-theme="sakura"] .btn-secondary { border-radius: 22px; border: 1px solid var(--sv-border-hi); } /* Activity items — petal hover glow */ [data-theme="sakura"] .activity-item:hover { border-color: var(--sv-accent); box-shadow: 0 0 10px rgba(255, 95, 160, 0.15); } /* Job nodes — softer selected state */ [data-theme="sakura"] .job-node.active-job { border-color: var(--sv-green); box-shadow: 0 0 8px rgba(114, 216, 112, 0.2); } /* Progress bars — rounder ends */ [data-theme="sakura"] .lsb-bar { border-radius: 8px; height: 8px; } [data-theme="sakura"] .lsb-fill { border-radius: 8px; } /* Finance cards — warm inner glow */ [data-theme="sakura"] .finance-card { box-shadow: 0 1px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,200,180,0.04); } /* Modal — warmer border */ [data-theme="sakura"] .modal { box-shadow: 0 8px 40px rgba(255, 95, 160, 0.15); } /* ══════════════════════════════════════════════════════════════════════════ 🌊 DEEP OCEAN — Bioluminescent abyss. Glass panels, cyan + coral. ══════════════════════════════════════════════════════════════════════════ */ [data-theme="ocean"] { --sv-bg: #030c16; --sv-surface: #071524; --sv-card: #0b1e32; --sv-card-deep: #040e1c; --sv-track: #071828; --sv-border: #0f2840; --sv-border-hi: #1a4060; --sv-border-lo: #0a1e30; --sv-text: #d0eef8; --sv-text-sub: #94c8e0; --sv-text-muted: #5090b0; --sv-text-dim: #284860; --sv-accent: #00ccff; --sv-accent-h: #00a8d8; --sv-green: #00ffb0; --sv-green-2: #00dda0; --sv-amber: #ff9060; --sv-gold: #ffb878; --sv-btn-bg: #0b1e32; --sv-btn-bg-h: #142a44; --sv-btn-2-text: #d0eef8; --sv-font: 'Segoe UI', system-ui, sans-serif; --sv-radius: 14px; --sv-radius-sm: 9px; --sv-header-grad: linear-gradient(135deg, #020810, #071524); --sv-hud-bg: rgba(3, 12, 22, 0.68); --sv-pulse-glow: rgba(0, 204, 255, 0.4); --sv-footer-bg: rgba(2, 8, 16, 0.95); --sv-modal-bg: #071524; --sv-modal-border: #00ccff; --sv-panel-shadow: 0 0 24px rgba(0, 204, 255, 0.06); --sv-card-shadow: 0 0 12px rgba(0, 204, 255, 0.04); } /* Glass morphism panels */ [data-theme="ocean"] .panel { background: rgba(7, 21, 36, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(26, 64, 96, 0.8); box-shadow: 0 0 24px rgba(0, 204, 255, 0.06), inset 0 1px 0 rgba(0, 204, 255, 0.06); } /* Panel h2 — cyan with subtle text glow */ [data-theme="ocean"] .panel h2 { color: var(--sv-accent); text-shadow: 0 0 12px rgba(0, 204, 255, 0.4); border-bottom-color: rgba(26, 64, 96, 0.8); } /* Cards — glassy with subtle top-edge highlight */ [data-theme="ocean"] .finance-card, [data-theme="ocean"] .job-item, [data-theme="ocean"] .activity-item, [data-theme="ocean"] .digest-stat { background: rgba(11, 30, 50, 0.7); border-color: rgba(26, 64, 96, 0.8); box-shadow: inset 0 1px 0 rgba(0, 204, 255, 0.05); } /* Tabs — glassy style, no harsh borders */ [data-theme="ocean"] .tab { background: rgba(11, 30, 50, 0.5); border-radius: 8px 8px 0 0; } [data-theme="ocean"] .tab:hover { background: rgba(20, 42, 68, 0.7); } [data-theme="ocean"] .tab.active { background: rgba(7, 21, 36, 0.8); color: var(--sv-accent); border-bottom-color: var(--sv-accent); text-shadow: 0 0 8px rgba(0, 204, 255, 0.5); } /* Primary button — glowing cyan */ [data-theme="ocean"] .btn-primary { background: var(--sv-accent); color: #020c18; font-weight: 800; text-shadow: none; box-shadow: 0 0 16px rgba(0, 204, 255, 0.4); } [data-theme="ocean"] .btn-primary:hover { background: var(--sv-accent-h); box-shadow: 0 0 24px rgba(0, 204, 255, 0.6); } /* Secondary button — glass */ [data-theme="ocean"] .btn-secondary { background: rgba(11, 30, 50, 0.6); border: 1px solid rgba(26, 64, 96, 0.9); backdrop-filter: blur(4px); } [data-theme="ocean"] .btn-secondary:hover { background: rgba(20, 42, 68, 0.8); border-color: rgba(0, 204, 255, 0.3); } /* Activity items — bioluminescent hover glow */ [data-theme="ocean"] .activity-item:hover { border-color: rgba(0, 204, 255, 0.4); box-shadow: 0 0 12px rgba(0, 204, 255, 0.1); } /* Active job border glow */ [data-theme="ocean"] .job-node.active-job { border-color: var(--sv-green); box-shadow: 0 0 10px rgba(0, 255, 176, 0.25); } /* Progress bars — taller, glowing */ [data-theme="ocean"] .lsb-bar { height: 8px; background: rgba(7, 24, 40, 0.8); } [data-theme="ocean"] .lsb-fill { box-shadow: 0 0 6px currentColor; } /* Modal glass effect */ [data-theme="ocean"] .modal { background: rgba(7, 21, 36, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 8px 48px rgba(0, 204, 255, 0.15); border-color: rgba(0, 204, 255, 0.5); } /* Notification glow */ [data-theme="ocean"] .notification { box-shadow: 0 0 16px rgba(0, 204, 255, 0.3); } [data-theme="ocean"] .notification.good { background: var(--sv-green); color: #020c18; }