/* ===== Page Loader ===== */ #page-loader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: color-mix(in srgb, var(--bs-body-bg, #0b0f14) 88%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity .25s ease, visibility .25s ease; } #page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } #page-loader .pl-inner { display: grid; justify-items: center; gap: 14px; padding: 24px 28px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.35); } #page-loader .pl-text { margin: 0; font-weight: 600; font-size: .95rem; opacity: .85; } #page-loader .pl-spinner { width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: rgba(255,255,255,.95); animation: pl-spin .8s linear infinite; } @keyframes pl-spin { to { transform: rotate(360deg); } } /* Respeita usuários com motion reduzido */ @media (prefers-reduced-motion: reduce) { #page-loader, #page-loader .pl-spinner { animation: none; } #page-loader { transition: none; } } /* ======================================================= PAGE LOADER — TEMA CLARO (override) Ativo quando: ======================================================= */ :root[data-bs-theme="light"] #page-loader { /* fundo mais claro com leve véu */ background: color-mix(in srgb, var(--bs-body-bg, #f6f7fb) 88%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } :root[data-bs-theme="light"] #page-loader .pl-inner { background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.08); box-shadow: 0 12px 28px rgba(16, 22, 34, .10); } :root[data-bs-theme="light"] #page-loader .pl-text { color: #0f1422; opacity: .9; } /* spinner com contraste no claro (usa seu --accent-primary se existir) */ :root[data-bs-theme="light"] #page-loader .pl-spinner { border: 3px solid rgba(0,0,0,.10); border-top-color: var(--accent-primary, #0d6efd); } /* Motion */ @media (prefers-reduced-motion: reduce) { :root[data-bs-theme="light"] #page-loader, :root[data-bs-theme="light"] #page-loader .pl-spinner { animation: none; } :root[data-bs-theme="light"] #page-loader { transition: none; } }