/* * First-paint loading splash. * * Rendered into #root from index.html before the JS bundle parses + React * mounts. React's root.render() replaces #root's children, so this disappears * automatically once the app boots. * * Goals: * - Brand identity on blank canvas (no flash of white nothing) * - Zero external resources beyond this CSS file (fonts use system stack) * - Theme-aware: reads the user's stored theme from localStorage via the * bootstrap script in index.html, which sets `.light` / `.dark` on . * We style off that class so the user's chosen theme (not just system * preference) is honoured from the very first paint. * - Real progress bar driven by an inline script in index.html that ticks on * DOMContentLoaded / window.load / resource events (not a fake animation) */ /* ── Top progress bar ────────────────────────────────────────────────────── */ #boot-pb { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: transparent; z-index: 2147483647; /* above everything */ pointer-events: none; } #boot-pb-fill { height: 100%; width: 0%; background: #E48400; box-shadow: 0 0 8px rgba(228, 132, 0, 0.6); /* Width is driven by a 60fps rAF loop in index.html so the CSS transition would only fight it — keep only the fade-out when the loader finishes. */ transition: opacity 180ms ease 200ms; } #boot-pb.is-done #boot-pb-fill { opacity: 0; } /* ── Splash body ─────────────────────────────────────────────────────────── */ #app-boot { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; /* Brand-tinted page background (light): mirrors `--custom-background-light` in globals.css (oklch(0.97 0.025 65), amber hue). Hardcoded here because the Tailwind-generated CSS variables don't exist until main.css loads, and the splash needs its color on first paint. */ background: oklch(0.97 0.025 65); color: #6b7280; font: 500 16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; opacity: 0; animation: appBootFadeIn 280ms 60ms ease-out forwards; } /* Dark theme — driven by the `.dark` class the bootstrap script adds to based on the stored `ui-theme-mode` (or system preference when the stored mode is `system` or absent). Background mirrors `--custom-background-dark` in globals.css (oklch(0.22 0.01 160), slight emerald hue). */ :root.dark #app-boot { background: oklch(0.22 0.01 160); color: #9ca3af; } /* Full logo (icon + wordmark). Sits in normal flow at the flex center, so it lands at the true viewport center. Painted after the greetings layer in DOM order, so it naturally stacks on top without z-index. */ .boot-logo { color: #E48400; width: auto; height: 72px; position: relative; } /* * Scrolling greetings — ambient backdrop behind the logo. * * The window is absolutely-positioned to fill the viewport so greetings * read as page-wide texture. `opacity: 0.5` recedes them behind the * centered logo. Mask fades items in very near the top edge and out * very near the bottom edge — the visible band covers ~88% of the * viewport height, so greetings scroll almost edge-to-edge. * * Inner track holds the greeting list duplicated twice end-to-end and * translates from 0 to -50% — at -50% the layout is visually identical * to 0, so the jump back to 0 is invisible. Direction: items enter at * the BOTTOM and exit at the TOP (the track moves upward over time). */ :root { --boot-greeting-line: 56px; } .boot-greetings-window { position: absolute; inset: 0; overflow: hidden; opacity: 0.5; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, black 6%, black 94%, transparent 100%); } .boot-greetings-track { display: flex; flex-direction: column; /* 50s for 45 items ≈ 1.1s per item — deliberately slow so greetings read as ambient background texture rather than a ticker. Pair with the full-viewport backdrop + 50% opacity: slower scroll makes the layer feel calmer behind the logo. */ animation: bootGreetingScroll 50s linear infinite; } .boot-greeting { height: var(--boot-greeting-line); line-height: var(--boot-greeting-line); display: flex; align-items: center; justify-content: center; text-align: center; letter-spacing: 0.01em; font-size: 28px; font-weight: 500; color: #374151; } .boot-greeting--ar { font-size: 36px; font-weight: 600; direction: rtl; } :root.dark .boot-greeting { color: #e5e7eb; } @keyframes bootGreetingScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes appBootFadeIn { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { #app-boot { animation: none; opacity: 1; } .boot-greetings-track { animation: none; transform: translateY(0); } #boot-pb-fill { transition: none; } }