/* ShotWatch /static/css/pwa.css - PWA install prompt and offline states */ .pwa-install-banner { position: fixed; bottom: 1rem; left: 1rem; right: 1rem; max-width: 400px; margin: 0 auto; background: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 1rem; display: flex; align-items: center; gap: 0.875rem; z-index: 200; box-shadow: 0 4px 24px rgba(0,0,0,0.4); transform: translateY(100px); opacity: 0; transition: all 0.4s cubic-bezier(0.4,0,0.2,1); } .pwa-install-banner.visible { transform: translateY(0); opacity: 1; } .pwa-install-icon { width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--gold-glow); border: 1px solid var(--gold-500); display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--gold-300); flex-shrink: 0; } .pwa-install-text { flex: 1; } .pwa-install-title { font-size: 0.875rem; font-weight: 600; color: var(--text-primary); } .pwa-install-sub { font-size: 0.75rem; color: var(--text-muted); } .offline-bar { position: fixed; top: 56px; left: 0; right: 0; background: var(--amber-bg); border-bottom: 1px solid var(--amber); padding: 0.4rem 1rem; text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--amber); z-index: 99; display: none; } .offline-bar.visible { display: block; } /* === iOS / Android PWA hardening ================================== */ @media all and (display-mode: standalone) { html { background: #060D08; } body { 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); } } .pwa-installed body { 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); } * { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; } /* When running as an installed PWA, hide all install bait. The .pwa-installed class is set on by sw_register.js. */ html.pwa-installed #pwaNavInstall, html.pwa-installed #pwaInstallBanner { display: none !important; }