/* * loader.css * * Two-stage content hiding: * * 1. html.app-loading-html — set synchronously by loader.js before the first * paint, hides everything while the might not exist yet. * Uses background-color on so the user sees only black, not a * partially-painted page. * * 2. body.app-loading — set as soon as is available (also by * loader.js), hides all children except #app-loader via visibility. * * Both classes are removed together when all holds are released. */ /* Stage 1: very early — before body exists */ html.app-loading-html { background-color: var(--color-black, #191918); overflow: hidden; } /* Stage 2: body is ready */ body.app-loading { overflow: hidden; } body.app-loading > *:not(#app-loader) { visibility: hidden !important; pointer-events: none !important; user-select: none !important; } body.app-loading *:not(#app-loader):not(#app-loader *) { visibility: hidden !important; pointer-events: none !important; } /* ── Loader panel ─────────────────────────────────────────────────────────── */ #app-loader { position: fixed; inset: 0; z-index: 999999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; background-color: var(--color-black, #191918); opacity: 1; transition: opacity 0.35s ease; pointer-events: all; } #app-loader.app-loader--out { opacity: 0; pointer-events: none; } #app-loader.app-loader--gone { display: none !important; } /* ── Logo ─────────────────────────────────────────────────────────────────── */ .app-loader-logo { display: flex; align-items: center; justify-content: center; } .app-loader-logo-img { width: 72px; height: 72px; object-fit: contain; animation: loader-pulse 1.8s ease-in-out infinite; } @keyframes loader-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.92); } } /* ── Spinner dots ─────────────────────────────────────────────────────────── */ .app-loader-spinner { display: flex; gap: 8px; align-items: center; } .app-loader-spinner span { width: 7px; height: 7px; border-radius: 50%; background-color: var(--color-blue, #3b82f6); animation: loader-dot 1.2s ease-in-out infinite; } .app-loader-spinner span:nth-child(1) { animation-delay: 0s; } .app-loader-spinner span:nth-child(2) { animation-delay: 0.18s; } .app-loader-spinner span:nth-child(3) { animation-delay: 0.36s; } @keyframes loader-dot { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.2); } } #app-loader.app-loader--error { background-color: var(--color-black, #191918); text-align: center; padding: 24px; } .app-loader-error-msg { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #fff; max-width: 320px; } .app-loader-error-icon { font-size: 48px; line-height: 1; } .app-loader-error-text { font-size: 14px; opacity: 0.9; } .app-loader-error-retry { padding: 10px 24px; background: var(--color-blue, #3b82f6); color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s ease; } .app-loader-error-retry:hover { background: var(--color-blue-dark, #2563eb); }