/* ============================================================ PAGE-LOADER.CSS Full-screen loading overlay shown on every page load/refresh. Injected by page-loader.js — include this in every page . ============================================================ */ #page-loader { position: fixed; inset: 0; background: #1a3a8c; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; /* Fade out when .hide is added */ opacity: 1; transition: opacity 0.35s ease; } #page-loader.hide { opacity: 0; pointer-events: none; } #page-loader .pl-logo { width: 90px; height: auto; object-fit: contain; margin-bottom: 24px; animation: plFadeIn 0.6s ease both; } #page-loader .pl-text { font-family: 'Segoe UI', sans-serif; font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: 8px; animation: plFadeIn 0.6s ease 0.2s both; } #page-loader .pl-sub { font-family: 'Segoe UI', sans-serif; font-size: 0.85rem; color: #c8d8f0; display: flex; align-items: center; gap: 4px; animation: plFadeIn 0.6s ease 0.4s both; } /* Dot bounce loader */ #page-loader .pl-dots { display: inline-flex; gap: 5px; margin-left: 4px; } #page-loader .pl-dots span { width: 5px; height: 5px; background: #c8d8f0; border-radius: 50%; animation: plBounce 1.4s infinite ease-in-out; } #page-loader .pl-dots span:nth-child(1) { animation-delay: 0s; } #page-loader .pl-dots span:nth-child(2) { animation-delay: 0.2s; } #page-loader .pl-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes plBounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } @keyframes plFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }