/* --- 1. THEME VARIABLES (The Magic Switch) --- */ :root { /* DEFAULT THEME (Blue/Cyber) */ --brand-color: #3b82f6; --brand-dim: rgba(59, 130, 246, 0.1); --brand-glow: #60a5fa; --navbar-bg: rgba(3, 3, 5, 0.9); } /* CHRISTMAS THEME OVERRIDES */ /* To enable: Add class="xmas-theme" to the tag */ body.xmas-theme { --brand-color: #ef4444; /* Holiday Red */ --brand-dim: rgba(239, 68, 68, 0.15); --brand-glow: #22c55e; /* Green Accents */ } /* --- 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; /* Keeps the gradient stable while scrolling */ color: #e5e5e5; overflow-x: hidden; cursor: default; } /* --- 3. LAYERING SYSTEM (Z-INDEX FIXES) --- */ /* Layer 0: Backgrounds / Cyber Grid Layer 10: Snow / Frost Effects (Pointer events NONE) Layer 20: Interactive Content (Buttons, Text) Layer 50: Navbar Layer 100: Scanlines / Overlays Layer 200: Modals */ .cyber-grid { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; /* Cyan tinted grid lines instead of gray */ 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; /* Slightly larger grid feels more 'spatial' */ 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; } /* SNOW CANVAS: Fixed to prevent blocking clicks */ #snow-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* CRITICAL */ z-index: 10; opacity: 0; transition: opacity 2s; } .frost-overlay { position: fixed; inset: 0; pointer-events: none; /* CRITICAL */ z-index: 10; opacity: 0; transition: opacity 2s; box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.05); } /* Only show snow/frost when theme is active */ body.xmas-theme #snow-canvas, body.xmas-theme .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. GLASSMORPHISM CARDS (Updated for Navy) --- */ .glass-panel { /* More blue-tinted transparency */ background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(12px); /* Lighter, blue-ish border */ 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); /* Blue glow on hover */ box-shadow: 0 0 25px rgba(59, 130, 246, 0.15); } /* --- 5. BUTTON SYSTEM (Unified) --- */ .btn-core { position: relative; display: inline-flex; align-items: center; justify-content: center; font-family: 'Rajdhani', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.3s 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; } .btn-primary { background-color: var(--brand-color); color: #fff; border: 1px solid var(--brand-color); } .btn-primary:hover { background-color: #fff; color: #000; box-shadow: 0 0 20px var(--brand-glow); } .btn-secondary { background-color: rgba(255, 255, 255, 0.03); color: #e5e5e5; border: 1px solid rgba(255, 255, 255, 0.2); } .btn-secondary:hover { border-color: var(--brand-color); color: #fff; background-color: var(--brand-dim); } .btn-discord { background-color: #5865F2; color: white; border: 1px solid #5865F2; } .btn-discord:hover { background-color: white; color: #5865F2; box-shadow: 0 0 20px rgba(88, 101, 242, 0.6); } .btn-icon { width: 45px; height: 45px; padding: 0; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); } /* --- 6. UTILITIES --- */ .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; } .reveal.active { opacity: 1; transform: translateY(0); } .clip-notch { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); } /* Modal Animation */ #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; } /* 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); } /* Discord Hex Pattern */ .hex-bg { background-color: #000; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%235865F2' fill-opacity='0.05' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-7.5l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } @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; }