/** * loader.css — self-contained styles for the full-screen page loader. * * Shared by BOTH the pre-React #root loader in index.html and the React * component, so the two are pixel-identical and the hand-off * needs no fade. * * Linked directly in index.html (a real render-blocking stylesheet, not * JS-injected), so it is available BEFORE the app bundle / Tailwind in both dev * and build. Because index.css tokens are not yet loaded in that pre-React window, * colours are hardcoded here — keep them in sync with src/index.css: * --bifrost-heimdal-blue #2196f3 * --background light #ffffff / dark #141414 * --foreground light #141414 / dark #fafafa */ .bifrost-loader { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: #ffffff; /* Fixed font so the pre-React and React labels match regardless of the app font. */ font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } html.dark .bifrost-loader { background: #141414; } /* Translucent blurred cover over existing content (blocking load). */ .bifrost-loader--overlay { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(4px); } html.dark .bifrost-loader--overlay { background: rgba(20, 20, 20, 0.8); } .bifrost-loader__col { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 20px; } /* Pulsing concentric rings around the brand icon. */ .bifrost-loader__rings { position: relative; display: flex; align-items: center; justify-content: center; width: 320px; height: 320px; } .bifrost-ring { position: absolute; inset: 0; border-radius: 9999px; border: 3px solid rgba(33, 150, 243, 0.6); transform-origin: center; animation: bifrost-ring-expand 3s ease-out infinite backwards; } .bifrost-ring:nth-child(2) { animation-delay: 1s; } .bifrost-ring:nth-child(3) { animation-delay: 2s; } /* Centre brand icon, scaled to fit a fixed box (aspect preserved via the viewBox) so a square mark (bifrost cube) sits at ~80px while a wide wordmark (access/advenica) is clamped to the box width instead of spilling out of the rings. Colour is per-brand: a logo using fill="currentColor" follows the theme foreground (black/white) set here; a brand may bake its own fill in its logo.svg instead (bifrost bakes Heimdal blue). */ .bifrost-loader__logo { width: auto; height: auto; max-width: 260px; max-height: 80px; color: #141414; } html.dark .bifrost-loader__logo { color: #fafafa; } /* Indeterminate shimmer progress bar. */ .bifrost-progress { width: 256px; height: 8px; border-radius: 2px; background-image: linear-gradient( 90deg, rgba(33, 150, 243, 0.22) 0%, rgba(33, 150, 243, 0.22) 30%, #2196f3 50%, rgba(33, 150, 243, 0.22) 70%, rgba(33, 150, 243, 0.22) 100% ); background-size: 300% 100%; animation: bifrost-progress-shimmer 2.4s linear infinite; } .bifrost-loader__label { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .bifrost-loader__label-title { margin: 0; font-size: 1.25rem; line-height: 1.75rem; color: #141414; } html.dark .bifrost-loader__label-title { color: #fafafa; } .bifrost-loader__label-sub { margin: 0; font-size: 0.875rem; line-height: 1.25rem; color: #71717a; } html.dark .bifrost-loader__label-sub { color: #a1a1aa; } @keyframes bifrost-ring-expand { 0% { transform: scale(0.15); opacity: 0; } 30% { opacity: 0.7; } 100% { transform: scale(1); opacity: 0; } } @keyframes bifrost-progress-shimmer { 0% { background-position: 200% center; } 100% { background-position: -100% center; } } @media (prefers-reduced-motion: reduce) { .bifrost-ring, .bifrost-progress { animation: none !important; } }