/* Maintenance Overlay */ .maintenance-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5, 6, 8, 0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; text-align: center; padding: 20px; } .maintenance-icon { font-size: 80px; margin-bottom: 30px; animation: pulse 2s ease-in-out infinite; } .maintenance-title { font-family: 'Cinzel', serif; font-size: 48px; color: #f8fafc; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 3px; } .maintenance-message { font-size: 20px; color: #94a3b8; max-width: 600px; line-height: 1.6; margin-bottom: 30px; } .maintenance-timer { font-size: 24px; color: rgba(197, 160, 89, 1); margin-top: 20px; font-weight: 600; } .maintenance-progress { width: 300px; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; margin-top: 30px; overflow: hidden; } .maintenance-progress-bar { height: 100%; background: linear-gradient(90deg, rgba(197, 160, 89, 0.4), rgba(197, 160, 89, 1)); width: 0%; animation: progress 3s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.05); } } @keyframes progress { 0% { width: 0%; } 50% { width: 70%; } 100% { width: 100%; } } @media (max-width: 768px) { .maintenance-title { font-size: 32px; } .maintenance-message { font-size: 16px; } .maintenance-icon { font-size: 60px; } }

🔧