/* ══════════════════════════════════════════════════════════ NPS SPLASH SCREEN v3 — Responsive + Content Blocker All visual styles are inlined in splash.js for reliability. This CSS provides: 1. Body-level content hiding BEFORE JS loads (no flash) 2. Responsive scaling for all screen sizes ══════════════════════════════════════════════════════════ */ /* ── CRITICAL: Hide ALL app content BY DEFAULT ── This fires IMMEDIATELY when the CSS loads (in ), BEFORE any JS runs. The splash JS will add 'splash-done' class to when the animation finishes, which stops this rule from applying — revealing the app content. This prevents the login screen from flashing before the splash overlay mounts. Uses visibility (not display) so layout isn't disrupted. */ html:not(.skip-splash) body:not(.splash-done) > *:not(#nps-splash):not(script):not(link):not(style) { visibility: hidden !important; pointer-events: none !important; } html.skip-splash #nps-splash-static { display: none !important; } /* ── Responsive icon stage ── */ /* Very small phones (≤ 340px, e.g. Galaxy Fold closed) */ @media (max-width: 340px) { #sp-stage { width: 130px !important; height: 160px !important; } #sp-lottie { width: 220px !important; height: 220px !important; } #sp-brand { font-size: 11px !important; letter-spacing: 2px !important; } #sp-tag { font-size: 8px !important; } } /* Small phones (341–400px) */ @media (min-width: 341px) and (max-width: 400px) { #sp-stage { width: 155px !important; height: 190px !important; } #sp-lottie { width: 280px !important; height: 280px !important; } #sp-brand { font-size: 12px !important; letter-spacing: 2.5px !important; } #sp-tag { font-size: 9px !important; } } /* Standard phones (401–767px) — uses inline defaults (180×220) */ /* Tablets (768–1199px) */ @media (min-width: 768px) { #sp-stage { width: 220px !important; height: 270px !important; } #sp-lottie { width: 420px !important; height: 420px !important; } #sp-brand { font-size: 16px !important; letter-spacing: 4px !important; } #sp-tag { font-size: 12px !important; } } /* Desktop (1200px+) */ @media (min-width: 1200px) { #sp-stage { width: 260px !important; height: 320px !important; } #sp-lottie { width: 500px !important; height: 500px !important; } #sp-brand { font-size: 18px !important; letter-spacing: 5px !important; } #sp-tag { font-size: 13px !important; } } /* ── Landscape orientation: reduce height, keep centered ── */ @media (max-height: 500px) and (orientation: landscape) { #sp-stage { width: 120px !important; height: 148px !important; } #sp-lottie { width: 200px !important; height: 200px !important; } #sp-brand { font-size: 11px !important; margin-top: 12px !important; } #sp-tag { font-size: 8px !important; margin-top: 2px !important; } #sp-shadow { display: none !important; } #sp-strack { bottom: 20px !important; } } /* ── Safe area insets for notched phones ── */ @supports (padding: env(safe-area-inset-top)) { #nps-splash { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } }