/* StudyCare PWA shell styles. * * Separate from css/mobile-shell.css (which carries the per-page mobile * layout). This file only owns rules tied to the Progressive Web App * install/standalone experience: * * 1. Edge-to-edge polish that applies on every page once the user has * installed the app (display-mode: standalone). * 2. A shared .pwa-install-help popover used by the install card on * _mobile-index.php for iOS Safari (which can't fire * beforeinstallprompt and needs manual "Add to Home Screen" steps). * * The dashboard install card itself is styled inline inside * _mobile-index.php so it can use the page's --primary-* tokens. This * file is intentionally global, palette-agnostic, and small. */ /* ----------------------------------------------------------------- Standalone-mode polish. We DELIBERATELY do NOT add `padding-top: env(safe-area-inset-top)` or shift the banner/body by the top safe area here. Reason: the pwa-meta.php meta tag sets `apple-mobile-web-app-status-bar-style` to "default" (opaque iOS status bar). iOS then reserves / overlays the status bar slice itself; adding our own env(...) padding on top would stack on the OS-reserved space and create a visible gap above the page header. The same applies to Android, where the system status bar is opaque by default and the OS already pushes our content below it. The bottom safe area (home indicator on iPhone X+) IS still exposed via env(safe-area-inset-bottom) and pages that pin a tab bar to the bottom (e.g. _mobile-index.php) handle it themselves with their own padding rules. If we ever switch back to `apple-mobile-web-app-status-bar-style: black-translucent` (translucent status bar overlaying content), we'll need to reintroduce a top env() shift here. ----------------------------------------------------------------- */ @media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: fullscreen) { html, body { overscroll-behavior-y: contain; -webkit-tap-highlight-color: transparent; } /* Opt-in helper for pages that want explicit safe-area padding (e.g. full-bleed views without any sticky header). Off by default - pages add `class="pwa-safe-pad"` to if/when they need it. */ body.pwa-safe-pad { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } } /* ----------------------------------------------------------------- Mobile phone-shell gap defense. Any page that renders the `.phone-shell` mobile wrapper (every mobile-shell page: _mobile-index.php, student/*, coaching/*, etc.) pairs it with a sticky `.topbar` at top: 0. If ANYTHING further up the cascade (professional-theme.css's `body { padding-top: 60px }` on max-width:480, an inline `body { padding-top: 70px }` reserved for the desktop fixed banner, a `mobile-shell.css` rule that depends on the JS-toggled is-mobile-shell class, etc.) puts top padding on , , or .phone-shell, the sticky topbar's natural document position is pushed down by that amount - which manifests as a visible gap between the system status bar and the topbar at scroll=0 that collapses to 0 once you scroll and sticky kicks in. This block is the authoritative "no top padding on mobile-shell layouts" guarantee. It applies on every viewport ≤600px (the threshold the in-page IIFE uses to decide is-mobile-shell), wins on specificity (and !important) over everything else, and is active before any JS runs - so there's no FOUC either. ----------------------------------------------------------------- */ @media (max-width: 600px) { /* The two layout roots that ever host a .phone-shell. */ html body:has(> .phone-shell), html body:has(> .phone-shell) > .phone-shell { padding-top: 0 !important; margin-top: 0 !important; } /* And for browsers that don't support :has() (very few left, but .phone-shell { padding-top: 0 !important; margin-top: 0 !important; } } /* ----------------------------------------------------------------- Shared iOS "Add to Home Screen" helper popover. Markup is injected on demand by mobile-shell.js (StudyCarePWA.showIOSHelp) when the install card on _mobile-index.php is tapped on iOS Safari. ----------------------------------------------------------------- */ .pwa-install-help { position: fixed; inset: 0; z-index: 10000; display: none; align-items: flex-end; justify-content: center; background: rgba(15, 23, 42, 0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); font-family: 'Poppins', system-ui, sans-serif; } .pwa-install-help[data-open="1"] { display: flex; } .pwa-install-help-card { background: #fff; color: #1f2937; border-radius: 18px; width: 100%; max-width: 360px; padding: 1.25rem 1.25rem 1rem; box-shadow: 0 20px 60px -20px rgba(15, 23, 42, 0.35); position: relative; animation: pwa-help-rise 220ms ease-out both; } @keyframes pwa-help-rise { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .pwa-install-help-title { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.5rem; } .pwa-install-help-text { font-size: 0.92rem; line-height: 1.55; color: #4b5563; margin: 0 0 0.85rem; } .pwa-install-help-text strong { color: #1f2937; } .pwa-install-help-text i { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 6px; background: #f1f5f9; margin: 0 0.15rem; vertical-align: -5px; color: #2563eb; font-size: 0.85rem; font-style: normal; } .pwa-install-help-close { position: absolute; top: 0.5rem; right: 0.6rem; width: 32px; height: 32px; border: 0; background: transparent; color: #6b7280; font-size: 1.4rem; line-height: 1; border-radius: 999px; cursor: pointer; } .pwa-install-help-close:hover { background: #f3f4f6; color: #111827; } .pwa-install-help-arrow { display: block; margin: 0.5rem auto 0; color: #2563eb; opacity: 0.7; } /* Per-page opt-out: any page that sets data-pwa-hide-install on (e.g. a full-screen test runner) suppresses the help popover. */ body[data-pwa-hide-install] .pwa-install-help { display: none !important; }