/* ========================================================= 1980s Retro Arcade / Synthwave Theme Activated by toggling the ".retro-1980s" class on . Purely additive - does not alter default/modern styles. ========================================================= */ /* ---------- Toggle Switch (Skeuomorphic Arcade Button) ---------- */ .retro-toggle-wrapper { display: flex !important; align-items: center; gap: 10px; margin-left: 12px; padding: 6px 12px; background: linear-gradient(145deg, #1c1c22, #0c0c10); border: 2px solid #3a3a44; border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -2px 4px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.4); z-index: 10; transition: border-color 0.3s ease, box-shadow 0.3s ease; } body.retro-1980s .retro-toggle-wrapper { border-color: #FF007F; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -2px 4px rgba(0,0,0,0.6), 0 0 10px #FF007F, 0 0 18px rgba(0,255,255,0.5); } @media (max-width: 480px) { .retro-toggle-wrapper .retro-toggle-label { display: none; } } .retro-toggle-label { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: #6b7280; text-transform: uppercase; transition: color 0.3s ease, text-shadow 0.3s ease; user-select: none; } body.retro-1980s .retro-toggle-label { color: #FFD500; text-shadow: 0 0 4px #FFD500, 0 0 10px #FF007F, 0 0 16px #00FFFF; animation: retroLabelPulse 1.4s infinite alternate; } @keyframes retroLabelPulse { from { text-shadow: 0 0 4px #FFD500, 0 0 8px #FF007F; } to { text-shadow: 0 0 8px #FFD500, 0 0 18px #FF007F, 0 0 26px #00FFFF; } } /* Physical arcade rocker/toggle housed in a chrome-style bezel */ .retro-switch { position: relative; width: 54px; height: 26px; display: inline-block; cursor: pointer; border-radius: 14px; background: linear-gradient(145deg, #d8d8de, #8a8a92); padding: 3px; box-shadow: 0 1px 2px rgba(255,255,255,0.4) inset, 0 2px 3px rgba(0,0,0,0.5); } .retro-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; top: 0; left: 0; } .retro-switch-track { position: absolute; inset: 3px; border-radius: 12px; background: linear-gradient(180deg, #2a2a2a, #050505); border: 1px solid #000; box-shadow: inset 0 2px 5px rgba(0,0,0,0.85); transition: background 0.3s ease, box-shadow 0.3s ease; } .retro-switch-knob { position: absolute; top: 5px; left: 5px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #f5f5f5, #9a9a9a 70%, #6b6b6b 100%); border: 1px solid #4a4a4a; box-shadow: 0 2px 3px rgba(0,0,0,0.6); transition: left 0.25s cubic-bezier(0.68, -0.4, 0.32, 1.4), background 0.3s ease, box-shadow 0.3s ease; } /* LED indicator dot glowing red/green depending on state */ .retro-switch::after { content: ""; position: absolute; top: -8px; right: -3px; width: 6px; height: 6px; border-radius: 50%; background: #5a0010; box-shadow: 0 0 3px rgba(255,0,0,0.6); transition: background 0.3s ease, box-shadow 0.3s ease; } .retro-switch input:checked ~ .retro-switch-track { background: linear-gradient(180deg, #3d0057, #000); box-shadow: inset 0 2px 5px rgba(0,0,0,0.9), 0 0 10px #FF007F; } .retro-switch input:checked ~ .retro-switch-knob { left: 27px; background: radial-gradient(circle at 30% 30%, #e0ffff, #00FFFF 60%, #008b8b 100%); border-color: #FF007F; box-shadow: 0 0 6px #00FFFF, 0 0 12px #FF007F; } .retro-switch:has(input:checked)::after { background: #00ff6a; box-shadow: 0 0 6px #00ff6a, 0 0 10px #39ff14; } /* ========================================================= RETRO MODE - applied globally via body.retro-1980s ========================================================= */ body.retro-1980s { font-family: 'VT323', 'Press Start 2P', monospace !important; background-color: #0a0014 !important; color: #00FFFF !important; position: relative; text-shadow: 0 0 4px rgba(0, 255, 255, 0.6); } /* CRT Scanline overlay - pure CSS linear-gradient */ body.retro-1980s::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 1px, rgba(0, 0, 0, 0.25) 2px, rgba(0, 0, 0, 0.25) 3px ); background-size: 100% 4px; mix-blend-mode: overlay; } /* Subtle vignette / flicker for extra CRT feel */ body.retro-1980s::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9997; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%); } body.retro-1980s * { border-radius: 0 !important; } body.retro-1980s h1, body.retro-1980s h2, body.retro-1980s h3, body.retro-1980s h4, body.retro-1980s h5, body.retro-1980s h6 { color: #FFD500; text-shadow: 0 0 6px #FFD500, 0 0 14px #FF007F; letter-spacing: 1px; } body.retro-1980s a, body.retro-1980s .nav-link { color: #00FFFF !important; text-shadow: 0 0 5px #00FFFF, 0 0 10px #00FFFF; } body.retro-1980s a:hover, body.retro-1980s .nav-link:hover { color: #FF007F !important; text-shadow: 0 0 8px #FF007F, 0 0 16px #FF007F; } body.retro-1980s .navbar-premium { background: #12001f !important; border-bottom: 3px solid #FF007F; box-shadow: 0 0 15px #FF007F, 0 0 25px #00FFFF inset; } body.retro-1980s .navbar-brand { color: #FFD500 !important; text-shadow: 0 0 8px #FFD500, 0 0 16px #FF007F; } body.retro-1980s .btn, body.retro-1980s .btn-primary-premium { background: #000 !important; color: #FF007F !important; border: 2px solid #FF007F !important; box-shadow: 0 0 8px #FF007F, 0 0 16px #00FFFF; text-shadow: 0 0 6px #FF007F; } body.retro-1980s .btn:hover, body.retro-1980s .btn-primary-premium:hover { background: #FF007F !important; color: #000 !important; box-shadow: 0 0 14px #00FFFF, 0 0 28px #FF007F; } body.retro-1980s .card, body.retro-1980s .container, body.retro-1980s footer, body.retro-1980s section, body.retro-1980s .navbar, body.retro-1980s input, body.retro-1980s textarea, body.retro-1980s select { border: 2px solid #00FFFF !important; box-shadow: 0 0 10px rgba(0, 255, 255, 0.4); } body.retro-1980s footer { background: #0a0014; border-top: 3px solid #00FFFF !important; box-shadow: 0 0 15px #00FFFF; color: #FF007F !important; text-shadow: 0 0 5px #FF007F; }