/* Navigation loading overlay — the SAME frosted scrim + "bouncing dots" loader the candidate portal uses, shown during enhanced navigation. Driven by the `nav-loading` class js/nav-progress.js toggles on . External stylesheet so the strict admin CSP (style-src 'self') is happy. The loader is scoped under .nav-progress and its keyframes are renamed so nothing here can clash with the admin app.css. */ /* Full-viewport dimming scrim that centers the spinner. Hidden unless has .nav-loading. */ .nav-progress { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; background: rgba(248, 250, 255, 0.78); /* frosted dimming scrim — matches the candidate portal */ backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .15s ease; } body.nav-loading .nav-progress { opacity: 1; pointer-events: auto; /* block interaction while navigating */ } /* Centered loading card (matches the candidate .app-loading-box). */ .nav-progress .nav-progress-box { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.75rem 2.25rem; background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(13, 71, 161, .18); } .nav-progress .nav-progress-text { margin: 0; font-weight: 600; color: #334155; } /* ---- the candidate-portal loader, copied so the two portals match ---- */ .nav-progress .loader { --loader-color: #1a73e8; width: 40px; height: 20px; --c: no-repeat radial-gradient(farthest-side, var(--loader-color) 93%, #0000); background: var(--c) 0 0, var(--c) 50% 0, var(--c) 100% 0; background-size: 8px 8px; position: relative; animation: nav-loader-0 1s linear infinite alternate; } .nav-progress .loader:before { content: ""; position: absolute; width: 8px; height: 12px; background: var(--loader-color); left: 0; top: 0; animation: nav-loader-1 1s linear infinite alternate, nav-loader-2 0.5s cubic-bezier(0, 200, 0.8, 200) infinite; } @keyframes nav-loader-0 { 0% { background-position: 0 100%, 50% 0, 100% 0; } 8%, 42% { background-position: 0 0, 50% 0, 100% 0; } 50% { background-position: 0 0, 50% 100%, 100% 0; } 58%, 92% { background-position: 0 0, 50% 0, 100% 0; } 100% { background-position: 0 0, 50% 0, 100% 100%; } } @keyframes nav-loader-1 { 100% { left: calc(100% - 8px); } } @keyframes nav-loader-2 { 100% { top: -0.1px; } }