/* ========================================================================== UNIFIED STYLESHEET // MULTI-THEME ENGINE & CORE STYLES ========================================================================== */ /* -------------------------------------------------------------------------- 1. GLOBAL ROOT VARIABLES (DEFAULT SPY THEME) -------------------------------------------------------------------------- */ :root { --bg-main: #0a0e17; --panel-bg: rgba(13, 22, 38, 0.85); --panel-border: rgba(0, 240, 255, 0.2); --accent-cyan: #00f0ff; --accent-cyan-glow: rgba(0, 240, 255, 0.25); --text-main: #e0f7fc; --text-muted: #62829c; --font-heading: 'Orbitron', sans-serif; --font-body: 'Inter', sans-serif; --radius-sm: 6px; --radius-md: 12px; --transition-fast: 0.2s ease; --input-bg: rgba(0, 0, 0, 0.4); --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); } /* Base Body Resets */ * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--bg-main); color: var(--text-main); font-family: var(--font-body); min-height: 100vh; overflow-x: hidden; transition: background-color 0.4s ease, color 0.4s ease; } /* Background Grid Overlay */ .bg-grid-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 30px 30px; pointer-events: none; z-index: -2; } .ambient-glow { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient(circle, var(--accent-cyan-glow) 0%, transparent 70%); pointer-events: none; z-index: -1; opacity: 0.6; transition: background 0.4s ease; } /* Glassmorphism Panel Base */ .glass-panel { background: var(--panel-bg); border: 1px solid var(--panel-border); backdrop-filter: blur(12px); box-shadow: var(--card-shadow); transition: border-color 0.3s ease, background 0.3s ease; } /* Shared Buttons */ .btn-primary { background: var(--accent-cyan); color: #000; border: none; padding: 0.75rem 1.25rem; border-radius: var(--radius-sm); font-family: var(--font-heading); font-weight: 700; font-size: 0.85rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all var(--transition-fast); } .btn-primary:hover { box-shadow: 0 0 15px var(--accent-cyan-glow); transform: translateY(-1px); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } /* Screen View Toggles */ .view-screen { display: none; width: 100%; min-height: 100vh; } .view-screen.active { display: flex; } .hidden { display: none !important; } /* -------------------------------------------------------------------------- 2. THEME DEFINITIONS (DYNAMIC CLASSES ON ) -------------------------------------------------------------------------- */ /* Theme 1: Secret Agent (Default CIA Cyan) */ body.theme-spy { --bg-main: #0a0e17; --panel-bg: rgba(13, 22, 38, 0.85); --panel-border: rgba(0, 240, 255, 0.2); --accent-cyan: #00f0ff; --accent-cyan-glow: rgba(0, 240, 255, 0.25); --text-main: #e0f7fc; --text-muted: #62829c; --font-heading: 'Orbitron', sans-serif; --font-body: 'Inter', sans-serif; } /* Theme 2: Stealth Ops (Matrix Tactical Green) */ body.theme-stealth { --bg-main: #050d08; --panel-bg: rgba(10, 26, 15, 0.88); --panel-border: rgba(57, 255, 20, 0.25); --accent-cyan: #39ff14; --accent-cyan-glow: rgba(57, 255, 20, 0.3); --text-main: #e5ffe8; --text-muted: #5e8a64; --font-heading: 'JetBrains Mono', monospace; --font-body: 'JetBrains Mono', monospace; } /* Theme 3: Vintage CIA Dossier (STRICTLY ISOLATED HIGH-CONTRAST) */ body.theme-dossier { --bg-main: #14110e; --panel-bg: rgba(36, 30, 23, 0.92); --panel-border: rgba(190, 150, 90, 0.45); --accent-cyan: #dfaa52; /* Vibrant Aged Gold */ --accent-cyan-glow: rgba(223, 170, 82, 0.35); --text-main: #f9f3e6; /* Crisp Bright Parchment */ --text-muted: #e5d3b8; /* Warm Readable Bone-Cream */ --font-heading: 'Special Elite', 'Courier New', monospace; --font-body: 'Special Elite', 'Courier New', monospace; } /* Strictly scoped Dossier text contrast rules (Does NOT touch other themes) */ body.theme-dossier #label-hero-name, body.theme-dossier #label-hero-code, body.theme-dossier #label-parent-id, body.theme-dossier .input-group label, body.theme-dossier .subtitle, body.theme-dossier .label, body.theme-dossier .helper-label { color: #e5d3b8; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); } body.theme-dossier .preview-header .value, body.theme-dossier .cipher-text { color: #ffca68; } body.theme-dossier .chip-btn { background: rgba(190, 150, 90, 0.15); border-color: rgba(223, 170, 82, 0.4); color: #f9f3e6; } body.theme-dossier .chip-btn:hover, body.theme-dossier .chip-btn.active { background: #dfaa52; color: #14110e; } /* Theme 4: Enchanted Academy & Magic (Purple & Magenta) */ body.theme-magic { --bg-main: #120a1c; --panel-bg: rgba(30, 15, 48, 0.88); --panel-border: rgba(216, 112, 255, 0.25); --accent-cyan: #d870ff; --accent-cyan-glow: rgba(216, 112, 255, 0.3); --text-main: #faedff; --text-muted: #9c71a8; --font-heading: 'Cinzel Decorative', serif; --font-body: 'Inter', sans-serif; } /* Theme 5: Royal Secret Order (Gold & Crimson) */ body.theme-royal { --bg-main: #1a080c; --panel-bg: rgba(45, 12, 20, 0.9); --panel-border: rgba(255, 215, 0, 0.3); --accent-cyan: #ffd700; --accent-cyan-glow: rgba(255, 215, 0, 0.35); --text-main: #fff8e1; --text-muted: #a88567; --font-heading: 'Cinzel', serif; --font-body: 'Inter', sans-serif; } /* Theme 6: Sleuth Society & Detective Club (Midnight Blue & Amber) */ body.theme-sleuth { --bg-main: #0b131f; --panel-bg: rgba(18, 30, 48, 0.88); --panel-border: rgba(255, 179, 0, 0.25); --accent-cyan: #ffb300; --accent-cyan-glow: rgba(255, 179, 0, 0.3); --text-main: #e8f1f5; --text-muted: #6b8296; --font-heading: 'Special Elite', monospace; --font-body: 'Inter', sans-serif; } /* Theme 7: Pirate Treasure Hunt (Deep Sea Teal & Gold) */ body.theme-pirate { --bg-main: #0a161a; --panel-bg: rgba(14, 38, 42, 0.88); --panel-border: rgba(230, 175, 46, 0.3); --accent-cyan: #e6af2e; --accent-cyan-glow: rgba(230, 175, 46, 0.3); --text-main: #f4f1de; --text-muted: #7d938a; --font-heading: 'Pirata One', cursive; --font-body: 'Inter', sans-serif; } /* Theme 8: Galactic Space Fleet (Cosmic Neon Violet) */ body.theme-galaxy { --bg-main: #08061a; --panel-bg: rgba(20, 15, 50, 0.88); --panel-border: rgba(0, 229, 255, 0.3); --accent-cyan: #00e5ff; --accent-cyan-glow: rgba(0, 229, 255, 0.35); --text-main: #e6f9ff; --text-muted: #707b9e; --font-heading: 'Press Start 2P', monospace; --font-body: 'JetBrains Mono', monospace; } /* -------------------------------------------------------------------------- 3. TOAST NOTIFICATIONS -------------------------------------------------------------------------- */ .toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 9999; pointer-events: none; } .toast-item { background: rgba(10, 15, 25, 0.95); border: 1px solid var(--accent-cyan); color: var(--text-main); padding: 0.6rem 1rem; border-radius: var(--radius-sm); font-size: 0.8rem; font-family: var(--font-body); font-weight: 600; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); display: flex; align-items: center; gap: 0.5rem; pointer-events: auto; transition: all 0.3s ease; } .toast-item i { color: var(--accent-cyan); } .toast-item.success { border-color: #38b000; } .toast-item.success i { color: #38b000; } .toast-item.warn { border-color: #ff3366; } .toast-item.warn i { color: #ff3366; }