/* --- 1. THEME VARIABLES (The Magic Switch) --- */ :root { /* DEFAULT THEME (Blue/Cyber) */ --brand-color: #3b82f6; /* Blue 500 */ --brand-dim: rgba(59, 130, 246, 0.1); --brand-glow: #60a5fa; /* Blue 400 */ --navbar-bg: rgba(3, 3, 5, 0.9); --gradient-primary: linear-gradient(135deg, #ffffff 0%, #3b82f6 100%); } /* --- THEME DEFINITIONS --- */ /* Usage: */ /* CHRISTMAS (Red/Blue Cyber Xmas) */ [data-theme="xmas"] { --brand-color: #ff003c; /* Cyber Red */ --brand-dim: rgba(255, 0, 60, 0.15); --brand-glow: #00f0ff; /* Cyber Blue (Accents) */ --gradient-primary: linear-gradient(90deg, #ff003c 0%, #00f0ff 100%); } /* WINTER (Icy Blue/White) */ [data-theme="winter"] { --brand-color: #0ea5e9; /* Sky 500 */ --brand-dim: rgba(14, 165, 233, 0.15); --brand-glow: #e0f2fe; /* Sky 100 */ --gradient-primary: linear-gradient(90deg, #0ea5e9 0%, #e0f2fe 100%); } /* SPRING (Emerald/Pink) */ [data-theme="spring"] { --brand-color: #10b981; /* Emerald 500 */ --brand-dim: rgba(16, 185, 129, 0.15); --brand-glow: #f472b6; /* Pink 400 */ --gradient-primary: linear-gradient(90deg, #10b981 0%, #f472b6 100%); } /* SUMMER (Orange/Yellow) */ [data-theme="summer"] { --brand-color: #f97316; /* Orange 500 */ --brand-dim: rgba(249, 115, 22, 0.15); --brand-glow: #facc15; /* Yellow 400 */ --gradient-primary: linear-gradient(90deg, #f97316 0%, #facc15 100%); } /* HALLOWEEN (Purple/Orange) */ [data-theme="halloween"] { --brand-color: #a855f7; /* Purple 500 */ --brand-dim: rgba(168, 85, 247, 0.15); --brand-glow: #f97316; /* Orange 500 */ --gradient-primary: linear-gradient(90deg, #a855f7 0%, #f97316 100%); } /* --- 2. CORE SETTINGS --- */ body { /* The Gradient ensures it doesn't look flat. Darker at bottom, lighter at top. */ background: radial-gradient(circle at 50% 0%, #0f172a 0%, #020617 100%); background-attachment: fixed; color: #e5e5e5; overflow-x: hidden; cursor: default; } /* GLOBAL HEADLINE GRADIENTS */ .text-gradient-cyber { background-image: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline; /* Changed from inline-block to allow text wrapping if needed, though inline-block is usually safer for transforms. Let's try standard block behavior for heading spans */ } /* UTILITY: Animation Delays (Replacing inline styles) */ .delay-50 { transition-delay: 50ms; animation-delay: 50ms; } .delay-100 { transition-delay: 100ms; animation-delay: 100ms; } .delay-150 { transition-delay: 150ms; animation-delay: 150ms; } .delay-200 { transition-delay: 200ms; animation-delay: 200ms; } .delay-250 { transition-delay: 250ms; animation-delay: 250ms; } .delay-300 { transition-delay: 300ms; animation-delay: 300ms; } .delay-350 { transition-delay: 350ms; animation-delay: 350ms; } /* --- 3. LAYERING SYSTEM --- */ .cyber-grid { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background-image: linear-gradient(rgba(56, 189, 248, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.07) 1px, transparent 1px); background-size: 50px 50px; transform: perspective(500px) rotateX(60deg); animation: gridFlow 25s linear infinite; mask-image: radial-gradient(circle at center, black 0%, transparent 60%); z-index: 0; pointer-events: none; } /* PARTICLE CANVAS (Generic) */ #particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; opacity: 0; transition: opacity 2s; } /* FROST OVERLAY (Visible on Winter/Xmas) */ .frost-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 10; opacity: 0; transition: opacity 2s; box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.05); } /* Show effects based on theme attributes */ [data-theme="xmas"] #particle-canvas, [data-theme="winter"] #particle-canvas, [data-theme="spring"] #particle-canvas, [data-theme="summer"] #particle-canvas, [data-theme="halloween"] #particle-canvas { opacity: 1; } [data-theme="xmas"] .frost-overlay, [data-theme="winter"] .frost-overlay { opacity: 1; } .scanlines { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.25) 50%), linear-gradient(90deg, rgba(255,0,0,0.06), rgba(0,255,0,0.02), rgba(0,0,255,0.06)); background-size: 100% 2px, 3px 100%; pointer-events: none; z-index: 100; opacity: 0.4; } /* --- 4. UTILITIES & COMPONENTS --- */ .glass-panel { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(12px); border: 1px solid rgba(148, 163, 184, 0.1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); position: relative; z-index: 20; } .glass-panel:hover { border-color: var(--brand-color); box-shadow: 0 0 25px var(--brand-dim); } /* BUTTONS */ .btn-core { position: relative; display: inline-flex; align-items: center; justify-content: center; font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; text-decoration: none; clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px); z-index: 20; overflow: hidden; } .btn-core::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s; } .btn-core:hover::before { left: 100%; } .btn-primary { background-color: var(--brand-color); color: #fff; border: 1px solid var(--brand-color); box-shadow: 0 0 10px var(--brand-dim); text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } .btn-primary:hover { background-color: #fff; color: #000; box-shadow: 0 0 25px var(--brand-color), 0 0 50px var(--brand-dim); transform: translateY(-2px); } .btn-secondary { background-color: rgba(255, 255, 255, 0.03); color: #e5e5e5; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 0 10px transparent; text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } .btn-secondary:hover { border-color: var(--brand-glow); color: #fff; background-color: rgba(255, 255, 255, 0.1); box-shadow: 0 0 15px var(--brand-dim); text-shadow: 0 0 8px var(--brand-glow); transform: translateY(-2px); } .clip-notch { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); } /* ANIMATIONS */ .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; } .reveal.active { opacity: 1; transform: translateY(0); } @keyframes scan { 0% { top: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.4s ease-out forwards; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: #030305; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--brand-color); } /* Modal */ #exit-modal { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.4s ease, visibility 0.4s; z-index: 200; } #exit-modal.active { visibility: visible; opacity: 1; pointer-events: auto; } /* --- 7. BACKGROUND PATTERNS (Optimized) --- */ .bg-rust { background-image: url('https://files.facepunch.com/lewis/1b2911b1/rust-social-2.jpg'); } .bg-minecraft { background-image: url('https://cdn.akamai.steamstatic.com/steam/apps/252490/header.jpg'); } .bg-fivem { background-image: url('https://cdn.akamai.steamstatic.com/steam/apps/271590/header.jpg'); } .bg-dayz { background-image: url('https://cdn.akamai.steamstatic.com/steam/apps/221100/capsule_616x353.jpg'); } .bg-arma { background-image: url('https://cdn.akamai.steamstatic.com/steam/apps/1874880/header.jpg'); } .bg-squad { background-image: url('https://cdn.akamai.steamstatic.com/steam/apps/393380/header.jpg'); } .bg-ark { background-image: url('https://cdn.akamai.steamstatic.com/steam/apps/346110/header.jpg'); } .bg-circuit { background-image: url('https://www.transparenttextures.com/patterns/circuit-board.png'); } .bg-carbon { background-image: url('https://www.transparenttextures.com/patterns/carbon-fibre.png'); } /* --- 8. MOBILE PERFORMANCE OPTIMIZATIONS --- */ /* Reduce heavy effects on mobile for better performance */ @media (max-width: 768px) { .cyber-grid { display: none; /* Hide expensive grid animation on mobile */ } .scanlines { opacity: 0.2; /* Reduce scanline intensity */ } /* Reduce blur intensity on mobile */ .glass-panel { backdrop-filter: blur(6px); } } /* Respect user's motion preferences */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .animate-pulse, .animate-bounce, .animate-ping, .animate-marquee { animation: none; } #particle-canvas { display: none; } .cyber-grid { animation: none; } } /* Improve touch targets on mobile */ @media (max-width: 640px) { .btn-core { min-height: 48px; /* Minimum touch target */ padding-left: 1.25rem; padding-right: 1.25rem; } } /* Grid flow animation */ @keyframes gridFlow { 0% { transform: perspective(500px) rotateX(60deg) translateY(0); } 100% { transform: perspective(500px) rotateX(60deg) translateY(50px); } } /* Marquee animation for scrolling content */ @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .animate-marquee { display: flex; width: max-content; /* Ensure container fits all content */ animation: marquee 60s linear infinite; } /* Pulse animation variants */ @keyframes pulse-fast { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse-fast { animation: pulse-fast 1.5s ease-in-out infinite; } /* Gradient animation */ @keyframes gradient-x { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .animate-gradient-x { background-size: 200% 200%; animation: gradient-x 3s ease infinite; }