/** * NILPIS Page Transitions — PWA Phase 1 (Session 133) * * Purpose: kill the white flash on full-page navigations (login → dashboard, * customer ↔ shop dashboard) and soften first paint. * * Loaded by: the 3 dashboards + login.php + index.php + pin-login.php. * Deliberately tiny — this file is SW-cached and render-blocking. */ /* ── 1. Pre-paint dark background ───────────────────────────────────────────── The dark-mode boot IIFE adds .dark/.dark-mode to BEFORE first paint (customer + shop dashboards), but dark-mode-shared.css only styles body.dark-mode — and doesn't get the class until DOMContentLoaded. Without this rule, dark-mode users get a white→dark flash on every navigation. Solid color (not the body's gradient) is intentional: it's the backdrop for the paint gap only, matching the gradient's start color. (Admin's boot only classes , so html.dark-mode never applies there — known limitation, admin is not a customer-facing surface.) */ html.dark-mode, html.dark { background-color: #1a1a2e; } /* ── 2. Gentle page fade-in ─────────────────────────────────────────────────── Animation-only idiom ON PURPOSE: no static `opacity:0` base rule, so if animations are unsupported or this file fails to load, the page renders normally — nothing can ever be stuck invisible. Opacity animation creates a stacking context on body only while it runs (~180ms at boot, no modals/FABs interacting yet) and does NOT create a containing block for fixed children, so the shop body{zoom:0.9} counter-zoomed modals are unaffected. */ @keyframes nlPageFadeIn { from { opacity: 0; } to { opacity: 1; } } body { animation: nlPageFadeIn 0.18s ease-out; } /* ── 3. Accessibility ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { body { animation: none; } }