/** * Loading Overlay CSS * * Loaded FIRST in . * Shows overlay with spinner and progress until page is ready. */ /* =========================================== OVERLAY CONTAINER =========================================== */ #firstLoadOverlay { position: fixed; inset: 0; background: var(--bg-primary); display: flex; align-items: center; justify-content: center; z-index: 99999; transition: opacity 0.3s ease; } [data-theme="light"] #firstLoadOverlay { background: var(--bg-primary); } /* Fade out state */ #firstLoadOverlay.hiding { opacity: 0; pointer-events: none; } /* =========================================== LOADING CONTENT (centered) =========================================== */ #firstLoadOverlay .loading-content { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } /* =========================================== SPINNER =========================================== */ #firstLoadOverlay .spinner { width: 48px; height: 48px; border: 3px solid var(--accent-a-15); border-top-color: var(--accent-a); border-radius: var(--radius-full); animation: overlay-spin 0.8s linear infinite; } [data-theme="light"] #firstLoadOverlay .spinner { border-color: rgb(14 165 233 / 25%); border-top-color: var(--sky-600); } @keyframes overlay-spin { to { transform: rotate(360deg); } } /* =========================================== TEXT =========================================== */ #firstLoadOverlay .loading-text { margin: 1rem 0 0; padding: 0; color: var(--white-60); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 400; } [data-theme="light"] #firstLoadOverlay .loading-text { color: rgb(0 0 0 / 50%); } #firstLoadOverlay #loadingProgress { font-variant-numeric: tabular-nums; } /* =========================================== CONTENT VISIBILITY =========================================== */ /* Hide main content until loaded */ body:not(.site-loaded) > header, body:not(.site-loaded) > main, body:not(.site-loaded) > footer { opacity: 0; } /* Fade in when loaded */ body.site-loaded > header, body.site-loaded > main, body.site-loaded > footer { opacity: 1; transition: opacity 0.25s ease; }