/* ============================================================ PRELOADER.CSS Link this on EVERY page inside ============================================================ */ /* ── LOCK SCROLL WHILE LOADING ── */ body.loading { overflow: hidden; } /* ── OVERLAY ── */ #pageLoader { position: fixed; inset: 0; background: #0a0a0a; z-index: 999999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; transition: opacity 0.6s ease, visibility 0.6s ease; } #pageLoader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* ── LOGO WRAP ── */ .pl-logo-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; opacity: 0; transform: translateY(24px); animation: plFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards; } /* ── LOGO IMAGE ── */ .pl-logo { width: 80px; height: 80px; border-radius: 50%; border: 3px solid #FF9933; object-fit: cover; animation: plPulse 2s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(255, 153, 51, 0.4); } @keyframes plPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 153, 51, 0.5); } 50% { box-shadow: 0 0 0 18px rgba(255, 153, 51, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 153, 51, 0); } } /* ── TRUST NAME ── */ .pl-name { font-family: 'Cormorant Garamond', serif; font-size: clamp(20px, 4vw, 30px); font-weight: 600; color: #ffffff; letter-spacing: 1.5px; text-align: center; line-height: 1.3; opacity: 0; animation: plFadeIn 0.6s ease 0.6s forwards; } .pl-name span { color: #FF9933; } /* ── TAGLINE ── */ .pl-tagline { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(11px, 1.5vw, 13px); font-weight: 500; color: rgba(255, 255, 255, 0.45); letter-spacing: 4px; text-transform: uppercase; text-align: center; opacity: 0; animation: plFadeIn 0.6s ease 0.9s forwards; } /* ── PROGRESS BAR ── */ .pl-bar-wrap { width: clamp(160px, 30vw, 220px); height: 3px; background: rgba(255, 255, 255, 0.1); border-radius: 10px; overflow: hidden; opacity: 0; animation: plFadeIn 0.4s ease 0.8s forwards; } .pl-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #FF9933, #e3892f); border-radius: 10px; animation: plProgress 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.9s forwards; } @keyframes plProgress { 0% { width: 0%; } 40% { width: 55%; } 70% { width: 78%; } 90% { width: 92%; } 100% { width: 100%; } } /* ── DOTS LOADING ── */ .pl-dots { display: flex; gap: 8px; opacity: 0; animation: plFadeIn 0.4s ease 1s forwards; } .pl-dots span { width: 6px; height: 6px; border-radius: 50%; background: #FF9933; animation: plDot 1.2s ease-in-out infinite; } .pl-dots span:nth-child(1) { animation-delay: 0s; } .pl-dots span:nth-child(2) { animation-delay: 0.2s; } .pl-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes plDot { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1.2); opacity: 1; } } /* ── KEYFRAMES ── */ @keyframes plFadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes plFadeIn { to { opacity: 1; } } /* ── PAGE CONTENT — fades in after loader hides ── */ #pageContent { opacity: 0; transition: opacity 0.5s ease; } #pageContent.visible { opacity: 1; }