/* ===== CRITICAL CSS - Preloader Styling ===== */ /* This file is linked directly in to ensure instant styling */ /* DO NOT move to external includes - must load before page renders */ :root { --primary: #0066ff; --secondary: #8b5cf6; --accent: #00d4ff; --dark: #0f172a; --dark-light: #1e293b; --gray-light: #e2e8f0; --white: #ffffff; --glass-bg: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.1); } html, body { width: 100%; max-width: 100%; overflow-x: hidden; scrollbar-gutter: stable both-edges; } body { margin: 0; padding: 0; } /* Ensure Bootstrap containers are responsive */ .container, .container-fluid { width: 100%; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; } /* Global responsive rules */ @media (max-width: 576px) { .container, .container-fluid { padding-left: 12px; padding-right: 12px; } /* Ensure page headers don't overflow */ .page-header { padding: 40px 15px !important; } .page-header h1 { font-size: 1.5rem !important; } .page-header h2 { font-size: 1.25rem !important; } .page-header p { font-size: 0.95rem !important; } } .gt-premium-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--dark) 0%, var(--dark-light) 100%); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .gt-loader-content { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 40px; } /* Animated Logo Orb */ .gt-loader-orb { width: 120px; height: 120px; position: relative; animation: floatOrb 3s ease-in-out infinite; } .gt-orb-inner { width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(from 0deg, var(--primary), var(--secondary), var(--accent), var(--primary)); padding: 8px; animation: rotateOrb 4s linear infinite; } .gt-orb-core { width: 100%; height: 100%; border-radius: 50%; background: var(--dark-light); } /* Multi-color Spinner */ .gt-loader-spinner { position: relative; width: 80px; height: 80px; } .gt-spinner-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 3px solid transparent; animation: spin 1.5s linear infinite; } .gt-spinner-primary { border-top: 3px solid var(--primary); } .gt-spinner-secondary { border-right: 3px solid var(--secondary); animation-delay: 0.1s; } .gt-spinner-accent { border-bottom: 3px solid var(--accent); animation-delay: 0.2s; } /* Brand Text */ .gt-preloader-brand { display: flex; flex-direction: column; gap: 15px; } .gt-preloader-title { font-size: 3rem; font-weight: 800; margin: 0; line-height: 1.1; font-family: 'Poppins', sans-serif; } .gt-text-gradient { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .gt-title-base { color: var(--white); font-weight: 600; } .gt-preloader-subtitle { color: var(--gray-light); font-size: 1.125rem; margin: 0; opacity: 0.8; font-weight: 500; font-family: 'Poppins', sans-serif; } /* Loading Progress */ .gt-loading-progress { display: flex; flex-direction: column; align-items: center; gap: 15px; width: 300px; } .gt-progress-bar { width: 100%; height: 6px; background: var(--glass-bg); border-radius: 10px; overflow: hidden; border: 1px solid var(--glass-border); } .gt-progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); width: 0%; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .gt-progress-text { color: var(--gray-light); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s ease; } /* Page Content Transitions */ .gt-page-content { transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* Animations */ @keyframes floatOrb { 0%, 100% { transform: translateY(0px) scale(1); } 50% { transform: translateY(-20px) scale(1.05); } } @keyframes rotateOrb { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Responsive Design */ @media (max-width: 768px) { .gt-loader-content { gap: 30px; } .gt-loader-orb { width: 100px; height: 100px; } .gt-loader-spinner { width: 60px; height: 60px; } .gt-preloader-title { font-size: 2.5rem; } .gt-preloader-subtitle { font-size: 1rem; } .gt-loading-progress { width: 250px; } } @media (max-width: 480px) { .gt-loader-content { gap: 25px; } .gt-loader-orb { width: 80px; height: 80px; } .gt-loader-spinner { width: 50px; height: 50px; } .gt-preloader-title { font-size: 2rem; } .gt-preloader-subtitle { font-size: 0.9rem; } .gt-loading-progress { width: 200px; } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { .gt-loader-orb, .gt-orb-inner, .gt-spinner-ring { animation: none; } }