/* * SportsPal app shell — SPEC 1.7 (/home/ubuntu/mobile-app/SPEC.md). * * Loaded on every athlete page from partials/app-head.blade.php, but EVERY rule is scoped to * `html.is-app …` (set by partials/app-client.blade.php for the iOS shell, the Android TWA and an * installed PWA) or sits inside `@media (display-mode: standalone)` (the same PWA before that * script has run). The ordinary web — desktop or a phone browser — matches nothing here. * * env(safe-area-inset-*) is only non-zero with `viewport-fit=cover`, which partials/app-client adds * to the viewport meta for app clients only (the ordinary web keeps the default viewport). * Selectors are one step more specific than the rules they shift, because some of those rules * (the Ask SportsPal button, the sign-in bar) are inline and load AFTER this file. */ /* ---- Notch / status bar: the sticky header (style.css `header`, padding 20px 0) ---------- */ html.is-app header { padding-top: calc(20px + env(safe-area-inset-top, 0px)); } /* ---- Home indicator: everything pinned to the bottom edge ------------------------------- */ html.is-app .offering_nav { bottom: calc(25px + env(safe-area-inset-bottom, 0px)); } html.is-app .sp-ask { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } html.is-app #contact-signin-bar { /* the bar's own inline style says padding: 12px 20px */ padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; } html.is-app .filters-panel { /* a bottom sheet on phones; display:contents (padding ignored) on wider screens */ padding-bottom: env(safe-area-inset-bottom, 0px); } @media (max-width: 767px) { html.is-app .sp-ask { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } html.is-app body:has(.offering_nav) .sp-ask { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } } /* ---- No cookie banner in the iOS shell (D10/D25): the server never injects it there; this is belt-and-braces. The installed PWA and the Android TWA are browsers and keep the banner. --- */ html.is-ios-app #cookieConsent { display: none !important; } /* ---- Back control (partials/app-back.blade.php): a 40-px chevron in the header's colours - */ html.is-app .sp-back { flex: 0 0 40px; width: 40px; height: 40px; margin: 0 -4px 0 -8px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; } html.is-app .sp-back svg { width: 24px; height: 24px; display: block; } html.is-app .sp-back:active { background: rgba(255, 255, 255, 0.14); } html.is-app .sp-back:focus-visible { outline: 2px solid #00A99D; outline-offset: 2px; } html.is-app .sp-back[hidden] { display: none !important; } /* ---- Installed PWA before the client script has tagged --------------------------- */ @media (display-mode: standalone) { html header { padding-top: calc(20px + env(safe-area-inset-top, 0px)); } html .offering_nav { bottom: calc(25px + env(safe-area-inset-bottom, 0px)); } html .sp-ask { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } html #contact-signin-bar { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; } html .filters-panel { padding-bottom: env(safe-area-inset-bottom, 0px); } } @media (display-mode: standalone) and (max-width: 767px) { html .sp-ask { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } html body:has(.offering_nav) .sp-ask { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } }