/** * Pre-React splash styles. * * Why this file lives in `public/` instead of being bundled through * `src/index.css`: * - `src/index.css` is part of the JS chunk graph and only applies once * the JS bundle has been downloaded, parsed, and executed. The splash * needs to be styled from the *very first paint* (before the bundle * is even available). Serving this as a plain static asset from * `public/` and linking it from `` makes it parse alongside the * HTML, so the splash is fully styled the instant the page paints. * * Keep this file: * - small (it blocks first paint until parsed), * - free of Tailwind / @apply (no build step runs on it), * - in sync with the React `BrandedLoader` in src/auth/AuthGuard.tsx * so the splash <-> React handoff is visually seamless. * * Intentionally STATIC: there is no entrance animation. A normal website * paints its content at its final position; an animated entrance read as * "vibration" on every reload, which is exactly what we are eliminating. */ html, body { margin: 0; padding: 0; min-height: 100%; } body { /* Soft slate canvas — matches Clinical Calm tokens. Font stays system here so first paint never waits on webfonts; the app bundle applies Inter after mount (do not set font-family on body here — it would override the layered Tailwind base styles). */ background-color: #f1f5f9; color: #0f172a; } html.dark body { background-color: #09090b; color: #fafafa; } /* ---------- Splash layer ---------- */ #initial-splash { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1.5rem; background-color: #f1f5f9; z-index: 9999; color: #0f172a; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* The only animation on the splash: a smooth opacity fade-out once the React app marks with `.app-mounted`. Entry has no animation -- the splash is the first thing the user sees, so it paints in place. */ transition: opacity 320ms ease-out; } html.dark #initial-splash { background-color: #09090b; color: #fafafa; } html.app-mounted #initial-splash { opacity: 0; pointer-events: none; } /* Logo is intentionally STATIC. Earlier revisions pulsed it every 3s and pinged a halo around it -- on Retina/Safari that read as a vibrating logo. The dots below carry the "still loading" feedback instead. */ #initial-splash .splash-logo { width: 64px; height: 64px; /* Promote to its own GPU layer so any sub-pixel positioning is done by the compositor, not on the CPU each frame. */ transform: translateZ(0); } #initial-splash h1 { font-size: 1.25rem; font-weight: 600; margin: 0; color: #0f172a; } html.dark #initial-splash h1 { color: #fafafa; } #initial-splash h1 .muted { color: #94a3b8; } html.dark #initial-splash h1 .muted { color: #71717a; } #initial-splash p { font-size: 0.875rem; margin: 0.25rem 0 0; color: #64748b; } html.dark #initial-splash p { color: #a1a1aa; } #initial-splash .dots { display: flex; gap: 0.375rem; } /* Opacity-only pulse on the dots -- no transform: scale(), which on 6px elements at Retina density produces sub-pixel jitter that reads as "vibration". Three staggered dots create a calm wave loading signal. */ #initial-splash .dots span { width: 6px; height: 6px; border-radius: 9999px; background-color: #6366f1; opacity: 0.25; animation: splash-dot 1.2s ease-in-out infinite; } #initial-splash .dots span:nth-child(2) { animation-delay: 0.18s; } #initial-splash .dots span:nth-child(3) { animation-delay: 0.36s; } @keyframes splash-dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } } /* Respect reduced-motion preferences: drop both the fade-out transition and the dot pulse so the page is fully static. */ @media (prefers-reduced-motion: reduce) { #initial-splash { transition: none; } #initial-splash .dots span { animation: none; opacity: 0.5; } }