/* * Template Switcher CSS * Background and transition styles for templates * Note: Template variables are loaded separately via base_website.html */ /* Template Transition Effects */ html { transition: background-color 0.5s ease, color 0.5s ease; } body { transition: background 0.5s ease; } /* Template-specific body background overrides */ /* Note: data-template is now on element */ html[data-template="default"] body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } html[data-template="cyberpunk"] body { background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); } html[data-template="sunset"] body { background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #ff6b9d 100%); } html[data-template="neon"] body { background: #0a0e27; } html[data-template="ocean"] body { background: linear-gradient(135deg, #0093E9 0%, #80D0C7 100%); } html[data-template="darkpro"] body { background: #000000; } html[data-template="cosmos"] body { background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%); } html[data-template="minimal"] body { background: var(--bg-primary); } /* VPN Brand Templates backgrounds */ html[data-template="nordvpn"] body { background: linear-gradient(135deg, #1A1B21 0%, #2A2B32 100%); } html[data-template="surfshark"] body { background: linear-gradient(135deg, #0D1821 0%, #162A38 100%); } html[data-template="expressvpn"] body { background: linear-gradient(135deg, #001D2F 0%, #002840 100%); } html[data-template="protonvpn"] body { background: linear-gradient(135deg, #1C1C28 0%, #252532 100%); } html[data-template="cyberghost"] body { background: linear-gradient(135deg, #1A1625 0%, #251F35 100%); } html[data-template="piavpn"] body { background: linear-gradient(135deg, #1E2329 0%, #282D35 100%); } /* ===== LIGHT MODE BACKGROUNDS ===== */ html[data-template="default"][data-theme="light"] body { background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); } html[data-template="cyberpunk"][data-theme="light"] body { background: linear-gradient(135deg, #f8fafc 0%, #e8f4fc 100%); } html[data-template="sunset"][data-theme="light"] body { background: linear-gradient(135deg, #fef7f7 0%, #fff5f5 100%); } html[data-template="neon"][data-theme="light"] body { background: linear-gradient(135deg, #f8fafc 0%, #f0f9ff 100%); } html[data-template="ocean"][data-theme="light"] body { background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); } html[data-template="darkpro"][data-theme="light"] body { background: #f8fafc; } html[data-template="cosmos"][data-theme="light"] body { background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); } html[data-template="minimal"][data-theme="light"] body { background: var(--bg-primary); } /* VPN Brand Templates - Light Mode */ html[data-template="nordvpn"][data-theme="light"] body { background: linear-gradient(135deg, #f5f6fa 0%, #ffffff 100%); } html[data-template="surfshark"][data-theme="light"] body { background: linear-gradient(135deg, #f0fdf9 0%, #ffffff 100%); } html[data-template="expressvpn"][data-theme="light"] body { background: linear-gradient(135deg, #fef9f9 0%, #ffffff 100%); } html[data-template="protonvpn"][data-theme="light"] body { background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 100%); } html[data-template="cyberghost"][data-theme="light"] body { background: linear-gradient(135deg, #fefce8 0%, #ffffff 100%); } html[data-template="piavpn"][data-theme="light"] body { background: linear-gradient(135deg, #f0fdf0 0%, #ffffff 100%); } /* Custom template - uses store-specific theme.css */ html[data-template="custom"] body { background: var(--bg-primary); } html[data-template="custom"][data-theme="light"] body { background: var(--bg-primary); } /* Additional Templates */ html[data-template="github"] body { background: #0d1117; } html[data-template="github"][data-theme="light"] body { background: #ffffff; } html[data-template="discord"] body { background: #2b2d31; } html[data-template="discord"][data-theme="light"] body { background: #ffffff; } html[data-template="telegram"] body { background: #17212b; } html[data-template="telegram"][data-theme="light"] body { background: #ffffff; } html[data-template="dracula"] body { background: #282a36; } html[data-template="dracula"][data-theme="light"] body { background: #f8f8f2; } html[data-template="elegant"] body { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); } html[data-template="elegant"][data-theme="light"] body { background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%); } html[data-template="modern"] body { background: #121212; } html[data-template="modern"][data-theme="light"] body { background: #fafafa; } html[data-template="glassmorphism"] body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } html[data-template="glassmorphism"][data-theme="light"] body { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); } html[data-template="luxury"] body { background: #0a0a0a; } html[data-template="luxury"][data-theme="light"] body { background: #f9f6f2; } html[data-template="matrix"] body { background: #0d0208; } html[data-template="matrix"][data-theme="light"] body { background: #e8f5e9; } html[data-template="nature"] body { background: linear-gradient(135deg, #134e5e 0%, #71b280 100%); } html[data-template="nature"][data-theme="light"] body { background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%); } html[data-template="ios16"] body { background: #000000; } html[data-template="ios16"][data-theme="light"] body { background: #f2f2f7; } html[data-template="darknet"] body { background: #0a0a0a; } html[data-template="darknet"][data-theme="light"] body { background: #f5f5f5; } html[data-template="google"] body { background: #202124; } html[data-template="google"][data-theme="light"] body { background: #ffffff; } /* Smooth transitions for all color changes */ * { transition-property: background-color, color, border-color, box-shadow; transition-duration: 0.3s; transition-timing-function: ease; } /* Preserve specific transitions */ a, button, .btn, [class*="hover"] { transition-property: all; transition-duration: 0.3s; }