/* ── theme.css ────────────────────────────────────────────────────────────────── All CSS custom properties for both themes. The attribute controls which set applies. ─────────────────────────────────────────────────────────────────────────── */ /* ── Galaxy theme (default) ─────────────────────────────────────────────── */ :root, [data-theme="galaxy"] { --kc-bg-base: #0d0818; --kc-bg-bar: #130f22; --kc-bg-panel: #1a1430; --kc-bg-card: #1a1430; --kc-bg-card-art: #110d24; --kc-accent: #a78bfa; --kc-accent-strong: #7c3aed; --kc-accent-2: #ec4899; --kc-accent-gold: #fbbf24; --kc-border-base: rgba(167, 139, 250, 0.18); --kc-border-panel: rgba(167, 139, 250, 0.10); --kc-border-card: rgba(255, 255, 255, 0.06); --kc-border-bar: 1px solid rgba(160, 130, 220, 0.22); --kc-text-primary: #ddd6fe; --kc-text-secondary: #3d3460; --kc-text-muted: #2a2450; --kc-text-card: #c4b5fd; --kc-text-gold: #fbbf24; --kc-text-btn: #ede9fe; --kc-nav-active: #a78bfa; --kc-streak-active: #7c3aed; --kc-progress-fill: #7c3aed; --kc-title-color: #fbbf24; --kc-foil-edge: linear-gradient(90deg, #a78bfa, #ec4899, #a78bfa); --kc-foil-corner: #a78bfa; /* Rarity dot colors */ --kc-rarity-common: #6b7280; --kc-rarity-uncommon: #34d399; --kc-rarity-rare: #3b82f6; --kc-rarity-epic: #a78bfa; --kc-rarity-legendary: #fbbf24; --kc-rarity-foil: #ec4899; --kc-rarity-ultra: #d4af37; /* Background atmosphere */ --kc-particle-color: rgba(167, 139, 250, 0.55); --kc-scanline-color: rgba(167, 139, 250, 0.012); --kc-vignette: rgba(0, 0, 0, 0.7); --kc-logo: url('../img/logo-galaxy.png'); } /* ── Crimson theme ───────────────────────────────────────────────────────── */ [data-theme="crimson"] { --kc-bg-base: #0d0d0d; --kc-bg-bar: #111111; --kc-bg-panel: #161616; --kc-bg-card: #161616; --kc-bg-card-art: #111111; --kc-accent: #dc2626; --kc-accent-strong: #b91c1c; --kc-accent-2: #d4af37; --kc-accent-gold: #d4af37; --kc-border-base: rgba(220, 38, 38, 0.2); --kc-border-panel: rgba(255, 255, 255, 0.06); --kc-border-card: rgba(255, 255, 255, 0.06); --kc-border-bar: 1px solid rgba(220, 38, 38, 0.22); --kc-text-primary: #f0f0f0; --kc-text-secondary: #444444; --kc-text-muted: #2a2a2a; --kc-text-card: #c8c8c8; --kc-text-gold: #d4af37; --kc-text-btn: #ffffff; --kc-nav-active: #f0f0f0; --kc-streak-active: #dc2626; --kc-progress-fill: #dc2626; --kc-title-color: #d4af37; --kc-foil-edge: linear-gradient(90deg, #dc2626, #d4af37, #dc2626); --kc-foil-corner: #dc2626; --kc-rarity-common: #6b7280; --kc-rarity-uncommon: #34d399; --kc-rarity-rare: #3b82f6; --kc-rarity-epic: #a78bfa; --kc-rarity-legendary: #d4af37; --kc-rarity-foil: #dc2626; --kc-rarity-ultra: #d4af37; --kc-particle-color: rgba(220, 38, 38, 0.4); --kc-scanline-color: rgba(220, 38, 38, 0.008); --kc-vignette: rgba(0, 0, 0, 0.75); --kc-logo: url('../img/logo-crimson.png'); } /* ── Background atmosphere layers ────────────────────────────────────────── */ /* These are fixed overlays that sit above the body bg but below all content */ #kc-scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, var(--kc-scanline-color) 2px, var(--kc-scanline-color) 4px ); } #kc-vignette { position: fixed; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, var(--kc-vignette) 100%); } #kc-particles { position: fixed; inset: 0; pointer-events: none; z-index: 1; } /* Top accent bar — galaxy only */ #kc-top-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100; background: linear-gradient(90deg, transparent, var(--kc-accent) 20%, var(--kc-accent-2) 50%, var(--kc-accent) 80%, transparent); animation: kcBarPulse 5s ease-in-out infinite; transition: background 0.4s ease; } @keyframes kcBarPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* Corner decorations */ .kc-corner { position: fixed; width: 16px; height: 16px; pointer-events: none; z-index: 55; opacity: 0.4; border-color: var(--kc-accent); border-style: solid; transition: border-color 0.4s ease; } .kc-corner.tl { top: 12px; left: 12px; border-width: 1.5px 0 0 1.5px; } .kc-corner.tr { top: 12px; right: 12px; border-width: 1.5px 1.5px 0 0; } .kc-corner.bl { bottom: 12px; left: 12px; border-width: 0 0 1.5px 1.5px; } .kc-corner.br { bottom: 12px; right: 12px; border-width: 0 1.5px 1.5px 0; } /* Theme transition — smooth on switch */ body, .kc-topbar, .kc-body, .kc-sidebar, .kc-card, .kc-widget, .kc-pull-banner, .kc-modal-box { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; }