/* * SportsPal app header + sheets — WP9 (SPEC-WP9 9.2 / 9.4, D29). * * Loaded on every athlete page from partials/app-head.blade.php, after app-shell.css. EVERY rule * is scoped to `html.is-app` (set by partials/app-client for the iOS shell, the Android TWA and an * installed PWA); the ordinary web matches nothing here. The markup these rules show on the app * (partials/app-header's .sp-apphdr, the Races list's .sp-pillrow and .sp-sheet) carries `hidden` * on the web, and Bootstrap's [hidden] { display: none !important } keeps it hidden there. * * The tab bar (partials/app-tabbar, app-shell.css) is 56 px + the home indicator; sheets stand * 8 px above it: bottom: calc(64px + env(safe-area-inset-bottom)). */ /* ---- Compact header (partials/app-header.blade.php) --------------------------------------- */ /* The sticky header: no 20-px web padding, just the status bar / notch above the 52-px bar. One step more specific than app-shell.css's `html.is-app header` padding-top rule. */ html.is-app body header { padding: env(safe-area-inset-top, 0px) 0 0; } /* The web header rows — logo, sports pills, location pill, account menu — give way to the bar. */ html.is-app header .header-top-blk, html.is-app header .header_sports_nav { display: none !important; } html.is-app .sp-apphdr { display: grid; /* equal side columns keep the title centred on the screen, whatever the action is */ grid-template-columns: 44px minmax(0, 1fr) 44px; column-gap: 8px; align-items: center; height: 52px; color: #fff; } /* A layout with no

(lg-app: sign-in, register, password pages) renders the bar straight in : it brings its own sticky black strip and the status-bar inset. */ html.is-app body > .sp-apphdr { position: sticky; top: 0; z-index: 5; box-sizing: border-box; height: calc(52px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0; background: var(--dark-page-bg, #040505); } html.is-app .sp-apphdr__start, html.is-app .sp-apphdr__end { display: flex; align-items: center; min-width: 0; } html.is-app .sp-apphdr__start { justify-content: flex-start; } html.is-app .sp-apphdr__end { justify-content: flex-end; } html.is-app .sp-apphdr__centre { display: flex; align-items: center; justify-content: center; min-width: 0; } html.is-app .sp-apphdr__title { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 17px; line-height: 22px; font-weight: 600; color: #fff; } html.is-app .sp-apphdr__logo { display: block; line-height: 0; } html.is-app .sp-apphdr__logo img { display: block; height: 30px; width: auto; } /* Right action: the location pill (partials/location-pill), icon only — as the web header shows it on a phone — 36 px, with a 44-px tap area. */ html.is-app .sp-apphdr .select_location_style { position: relative; width: 36px; height: 36px; padding: 0; flex: 0 0 auto; } html.is-app .sp-apphdr .select_location_style::after { content: ""; position: absolute; inset: -4px; } html.is-app .sp-apphdr .select_location_style span.location-icon + span { display: none; } /* Right action: Share on an event page (the same 44-px round control as the back chevron). */ html.is-app .sp-apphdr__action { position: relative; flex: 0 0 44px; width: 44px; height: 44px; margin-right: -6px; 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-apphdr__action svg { display: block; width: 22px; height: 22px; } html.is-app .sp-apphdr__action:active { background: rgba(255, 255, 255, 0.14); } html.is-app .sp-apphdr__action:focus-visible { outline: 2px solid #00A99D; outline-offset: 2px; } /* no share sheet and no Web Share API: the link was copied */ html.is-app .sp-apphdr__action.is-copied::after { content: "Link copied"; position: absolute; top: calc(100% + 4px); right: 0; padding: 5px 10px; border-radius: 8px; background: #fff; color: #040505; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } /* Event page: share lives in the header, so the fixed left share rail goes. */ html.is-app .share-sidebar { display: none !important; } /* ---- Sports pill row on the Races list (category/category.blade.php) --------------------- */ html.is-app .sp-pillrow { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 6px 12px 12px; list-style: none; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; background: var(--dark-page-bg, #040505); } html.is-app .sp-pillrow::-webkit-scrollbar { display: none; } html.is-app .sp-pill { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border: 1px solid var(--gray-54, #545454); border-radius: 999px; background: transparent; color: #fff; font-size: 15px; line-height: 1; white-space: nowrap; text-decoration: none; -webkit-tap-highlight-color: transparent; } html.is-app .sp-pill:hover, html.is-app .sp-pill:focus { color: #fff; text-decoration: none; } html.is-app .sp-pill.is-active { background: var(--theme-clr, #00A99D); border-color: var(--theme-clr, #00A99D); color: #fff; } /* The list's own all-sports pills (events.blade.php's .tags_tab, filterBySport) would repeat the row above; single-sport mode keeps .tags_tab — those are the distance bands. */ html.is-app .tags_tab:has(button[wire\:click^="filterBySport"]) { display: none; } /* ---- Sheets (9.4) ------------------------------------------------------------------------ */ @media screen and (max-width: 576px) { /* The filter sheet (media-responsive.css) stands on the tab bar instead of the screen edge. Its 3001 is local: it lives inside .offerings_section, a stacking context lifted only to z-index 10 while it is open, so the tab bar (1030) stays above its backdrop, undimmed — and without this its footer (Clear all / Show results) would sit behind the bar. */ html.is-app .filters-panel { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); max-height: min(85vh, calc(100vh - 88px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))); padding-bottom: 0; border-radius: 18px; transform: translateY(calc(100% + 64px + env(safe-area-inset-bottom, 0px))); } html.is-app .filters-panel.filters-panel--open { transform: translateY(0); } } /* The list's controls: at least 44 px to tap. */ html.is-app .mobile-filters-btn, html.is-app .filters-sheet-clear, html.is-app .filters-sheet-apply { min-height: 44px; } /* The select sheet (category.blade.php): the Races list's "viewing events" selects open as a bottom sheet in the app; the native select stops taking taps, the sheet script takes them. It stacks like the filter sheet does in effect: over the page and the sticky header (5), under the tab bar (1030) and Bootstrap's modals, standing 8 px above the bar. */ html.is-app .viewing-events-row .offering_by_location select { pointer-events: none; min-height: 44px; } html.is-app .viewing-events-row .offering_by_location { cursor: pointer; } html.is-app body.sp-sheet-open { overflow: hidden; } html.is-app .sp-sheet__backdrop { position: fixed; inset: 0; z-index: 1028; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s; } html.is-app .sp-sheet.is-open .sp-sheet__backdrop { opacity: 1; visibility: visible; } html.is-app .sp-sheet__panel { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 1029; display: flex; flex-direction: column; max-height: min(70vh, calc(100vh - 88px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))); background: #fff; border-radius: 18px; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18); overflow: hidden; visibility: hidden; transform: translateY(calc(100% + 64px + env(safe-area-inset-bottom, 0px))); transition: transform 0.28s ease, visibility 0.28s; } html.is-app .sp-sheet.is-open .sp-sheet__panel { visibility: visible; transform: translateY(0); } html.is-app .sp-sheet__header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 12px 10px 12px 18px; border-bottom: 1px solid #eee; } html.is-app .sp-sheet__title { margin: 0; font-size: 18px; font-weight: 600; color: #040505; } html.is-app .sp-sheet__close { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #333; display: inline-flex; align-items: center; justify-content: center; } html.is-app .sp-sheet__list { flex: 1 1 auto; margin: 0; padding: 6px 0 10px; list-style: none; overflow-y: auto; -webkit-overflow-scrolling: touch; } html.is-app .sp-sheet__option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0 18px; border: 0; background: transparent; color: #040505; font-size: 16px; text-align: left; -webkit-tap-highlight-color: transparent; } html.is-app .sp-sheet__option:active { background: #f2f2f2; } html.is-app .sp-sheet__option.is-selected { color: var(--theme-clr, #00A99D); font-weight: 600; } html.is-app .sp-sheet__check { flex: 0 0 auto; width: 20px; height: 20px; visibility: hidden; } html.is-app .sp-sheet__option.is-selected .sp-sheet__check { visibility: visible; } /* Belt and braces (like the tab bar): in app mode the compact bar shows even if its unhide script ran before the client was known. */ html.is-app .sp-apphdr[hidden] { display: flex !important; }