/* ============================================= File: wwwroot/css/preloader.css Description: First-paint preloader styles. Loaded synchronously from before any other CSS so the spinner appears immediately while the rest of the page boots. Externalized from App.razor in Step 17 of the security remediation so CSP can drop 'unsafe-inline' from script-src. Author: Denny A Devassy Date: 2026-05-05 ============================================= */ html, body { margin: 0; padding: 0; background: #ffffff; } #dca-preloader { position: fixed; inset: 0; z-index: 99999; background: #ffffff; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease, visibility 0.6s ease; font-family: 'Century Gothic', sans-serif !important; } #dca-preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; } .preloader-content { text-align: center; } .preloader-logo-ring { position: relative; width: 160px; height: 160px; margin: 0 auto 28px; } .preloader-logo-ring svg.ring-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .preloader-logo-img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 105px; height: 105px; object-fit: contain; } .ring-track { fill: none; stroke: rgba(196, 30, 30, 0.12); stroke-width: 2; } .ring-spinner { fill: none; stroke: #C41E1E; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 120 345; animation: preloader-spin 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: center; } .ring-inner-track { fill: none; stroke: rgba(196, 30, 30, 0.06); stroke-width: 1; } .ring-inner-spinner { fill: none; stroke: rgba(196, 30, 30, 0.4); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 80 322; animation: preloader-spin-reverse 2s cubic-bezier(0.4, 0, 0.2, 1) infinite; transform-origin: center; } .preloader-text { animation: preloader-fadeUp 0.8s ease-out 0.3s both; } .preloader-text .gov-text { color: #C41E1E; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; margin: 0 0 6px; font-weight: 500; } .preloader-text .dept-en { color: #1a1a1a; font-size: 15px; font-weight: 500; margin: 0 0 4px; letter-spacing: 0.5px; } .preloader-text .dept-ar { color: #666666; font-size: 12px; margin: 0; align-items: center; justify-content: center; font-family: 'JF Flat Regular', sans-serif !important; } .preloader-dots { margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 6px; animation: preloader-fadeUp 0.8s ease-out 0.6s both; } .preloader-dots span { width: 5px; height: 5px; border-radius: 50%; background: #C41E1E; animation: preloader-bounce 1.4s ease-in-out infinite; } .preloader-dots span:nth-child(2) { animation-delay: 0.2s; } .preloader-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes preloader-spin { to { transform: rotate(360deg); } } @keyframes preloader-spin-reverse { to { transform: rotate(-360deg); } } @keyframes preloader-fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes preloader-bounce { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.2); } }