/** * Page loader – first paint only (full screen). * Navigate loader – thin top bar + small top-right pill (wire:navigate). * Indicators are appended to via JS so Livewire morph cannot remove them. */ #page-loader { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #fff 0%, #f8fafc 50%, #f1f5f9 100%); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); transition: opacity 0.25s ease-out, visibility 0.25s ease-out; } #page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* * After first paint the full-screen loader must never cover the page again. * wire:navigate swaps and re-injects a fresh (un-hidden) #page-loader, but * persists — so this class reliably keeps it hidden on every navigated page. */ html.app-booted #page-loader { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } #page-loader .page-loader-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 24px); } #page-loader .page-loader-spinner-wrap { position: relative; width: clamp(44px, 12vmin, 64px); height: clamp(44px, 12vmin, 64px); } #page-loader .page-loader-spinner { position: absolute; inset: 0; border-radius: 50%; border: 3px solid #e2e8f0; border-top-color: #E76F2E; border-right-color: #4d6a92; animation: page-loader-spin 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite; } #page-loader .page-loader-spinner::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid transparent; border-top-color: #5A8FA0; animation: page-loader-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite reverse; } #page-loader .page-loader-text { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: clamp(12px, 2.5vw, 14px); font-weight: 500; color: #64748b; letter-spacing: 0.04em; text-transform: uppercase; } /* ===== Top progress bar ===== */ #nav-progress { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important; z-index: 2147483000 !important; pointer-events: none !important; opacity: 0; visibility: hidden; transition: opacity 0.12s ease, visibility 0.12s ease; background: rgba(231, 111, 46, 0.15); overflow: hidden; } #nav-progress.is-active { opacity: 1 !important; visibility: visible !important; } #nav-progress .nav-progress-bar { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, #E76F2E 0%, #f59e0b 55%, #4d6a92 100%); box-shadow: 0 0 10px rgba(231, 111, 46, 0.65); border-radius: 0 3px 3px 0; animation: nav-progress-indeterminate 1s ease-in-out infinite; } /* ===== Top-right corner pill ===== */ #nav-corner { position: fixed !important; top: calc(14px + env(safe-area-inset-top, 0px)) !important; right: calc(14px + env(safe-area-inset-right, 0px)) !important; z-index: 2147483001 !important; display: none !important; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #0f172a !important; color: #fff !important; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.35); pointer-events: none !important; } #nav-corner.is-active { display: inline-flex !important; } #nav-corner .nav-corner-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.28); border-top-color: #E76F2E; animation: page-loader-spin 0.65s linear infinite; flex-shrink: 0; } @keyframes page-loader-spin { to { transform: rotate(360deg); } } @keyframes nav-progress-indeterminate { 0% { transform: translateX(-140%); } 100% { transform: translateX(360%); } } @media (max-width: 576px) { #nav-corner { top: calc(10px + env(safe-area-inset-top, 0px)) !important; right: calc(10px + env(safe-area-inset-right, 0px)) !important; padding: 8px 12px; font-size: 11px; } }