/* Site-wide PWA splash — complements critical preboot CSS in . */ /* Cold-start / preboot: hide page content; splash remains visible. */ html.rwjm-preboot, html.rwjm-preboot body, html.rwjm-preboot-splash, html.rwjm-preboot-splash body { background: #000 !important; } html.rwjm-preboot body > *:not(#rwjm-pwa-splash), html.rwjm-preboot-splash body > *:not(#rwjm-pwa-splash) { visibility: hidden !important; } html.rwjm-preboot #rwjm-pwa-splash, html.rwjm-preboot-splash #rwjm-pwa-splash { visibility: visible !important; opacity: 1; pointer-events: auto; } /* Legacy class retained for older cached HTML */ html.rwjm-pwa-cold-start, html.rwjm-pwa-cold-start body { background: #000 !important; } html.rwjm-pwa-cold-start body { visibility: hidden; } html.rwjm-pwa-cold-start #rwjm-pwa-splash { visibility: visible; } /* Hidden unless cold-start preboot classes are active (or JS adds is-visible). */ #rwjm-pwa-splash { position: fixed; inset: 0; z-index: 2147483000; display: none; align-items: center; justify-content: center; margin: 0; padding: max(1.5rem, env(safe-area-inset-top, 0px)) max(1.5rem, env(safe-area-inset-right, 0px)) max(1.5rem, env(safe-area-inset-bottom, 0px)) max(1.5rem, env(safe-area-inset-left, 0px)); box-sizing: border-box; background: #000; opacity: 1; pointer-events: none; transition: opacity 0.55s ease; } html.rwjm-preboot #rwjm-pwa-splash, html.rwjm-preboot-splash #rwjm-pwa-splash, html.rwjm-pwa-cold-start #rwjm-pwa-splash, #rwjm-pwa-splash.is-visible { display: flex; opacity: 1; pointer-events: auto; } #rwjm-pwa-splash.is-hiding { opacity: 0; pointer-events: none; } #rwjm-pwa-splash img { display: block; width: min(72vw, 22rem); height: auto; max-height: 70vh; object-fit: contain; } @media (prefers-reduced-motion: reduce) { #rwjm-pwa-splash { transition: none; } }