/* ============================================= Splash Screen — Sports4Society This file is a STATIC stylesheet loaded from index.html , before the app bundle. It therefore cannot read the design tokens from global.css — var(--background) & co. are still unresolved at this point, which is the whole reason the splash paints instantly. So the values below are literals that MUST be kept in sync by hand with the "Sports4Society Theme" :root / .dark block at the end of apps/cms-react/src/styles/global.css. If you re-theme the admin, change both places or the splash will drift out of brand again. --background #F7F8FA / #0A1420 --card #FFFFFF / #111E2E --border #DEE2E9 / rgba(255,255,255,.08) --brand #0A2C7A / #FFD200 --radius 10px ============================================= */ #splash-screen { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 999999; /* Mirrors .brand-wash + bg-background on the guest shell (EmptyLayout in libs/next-cms app/authenticated-layout.tsx) so the splash dissolves into an identically-painted canvas. color-mix(in oklab, X n%, transparent) is just X at n% alpha, which is what the rgba() below spell out. */ background-color: #f7f8fa; background-image: radial-gradient( 60rem 40rem at 50% -10%, rgba(10, 44, 122, 0.1), transparent 70% ), radial-gradient( 40rem 30rem at 100% 100%, rgba(255, 210, 0, 0.12), transparent 70% ); background-repeat: no-repeat; transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1), transform 400ms cubic-bezier(0.4, 0, 0.2, 1); } body.dark #splash-screen { background-color: #0a1420; background-image: radial-gradient( 60rem 40rem at 50% -10%, rgba(255, 210, 0, 0.12), transparent 70% ), radial-gradient( 40rem 30rem at 100% 100%, rgba(0, 78, 158, 0.18), transparent 70% ); } /* --- Card --- */ #splash-screen .splash-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3rem; padding: 1.5rem; border-radius: 10px; background: #ffffff; border: 1px solid #dee2e9; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); width: min(calc(100vw - 2rem), 24rem); min-height: 18rem; animation: splash-card-enter 700ms cubic-bezier(0.22, 1, 0.36, 1) both; } body.dark #splash-screen .splash-card { background: #111e2e; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } /* --- Logo --- */ #splash-screen .splash-logo { width: auto; height: 64px; max-width: 220px; object-fit: contain; animation: splash-logo-enter 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 150ms both, splash-breathe 4s ease-in-out 900ms infinite; } #splash-screen .splash-logo-dark { display: none; } body.dark #splash-screen .splash-logo { display: none; } body.dark #splash-screen .splash-logo-dark { display: block; width: auto; height: 64px; max-width: 220px; object-fit: contain; animation: splash-logo-enter 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 150ms both, splash-breathe 4s ease-in-out 900ms infinite; } /* --- Loading dots --- */ #splash-screen .spinner { display: flex; align-items: center; justify-content: center; gap: 10px; } #splash-screen .spinner > div { width: 10px; height: 10px; background: #0a2c7a; border-radius: 100%; will-change: transform, opacity; animation-name: splash-dot-enter, splash-dot-wave; animation-duration: 400ms, 1.6s; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1), ease-in-out; animation-fill-mode: both, none; animation-iteration-count: 1, infinite; } body.dark #splash-screen .spinner > div { background: #ffd200; } #splash-screen .spinner .bounce1 { animation-delay: 500ms, 1000ms; } #splash-screen .spinner .bounce2 { animation-delay: 560ms, 1060ms; } #splash-screen .spinner .bounce3 { animation-delay: 620ms, 1120ms; } /* --- Keyframes — Entry --- */ @keyframes splash-card-enter { from { opacity: 0; transform: scale(0.96) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes splash-logo-enter { 0% { opacity: 0; transform: scale(0); } 65% { opacity: 1; transform: scale(1.08); } 82% { transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } } @keyframes splash-dot-enter { from { opacity: 0; transform: translateY(8px) scale(0); } to { opacity: 0.55; transform: translateY(0) scale(1); } } /* --- Keyframes — Idle --- */ @keyframes splash-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } @keyframes splash-dot-wave { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(-6px); opacity: 1; } } /* --- Reduced motion --- */ @media (prefers-reduced-motion: reduce) { #splash-screen, #splash-screen .splash-card, #splash-screen .splash-logo, #splash-screen .splash-logo-dark, #splash-screen .spinner > div { animation: none !important; transition-duration: 0.01ms !important; opacity: 1 !important; transform: none !important; } }