/* ============================================================ iOS App Overrides (Phase 2b) Loaded LAST in the CSS chain on HTML files that opt in. ALL selectors are scoped under .ios-app — zero impact on mobile web or desktop. .ios-app is added to by capacitor-init.js when inside the Capacitor WebView. ============================================================ */ /* Dark bg prevents white flashes during MPA navigation reloads */ html.ios-app { background-color: #0a1128; } html.ios-app body { background-color: inherit; } /* ---- Safe areas: notch + home indicator ---- */ /* These LAYER on top of existing mobile-overrides.css rules. env(safe-area-inset-*) returns 0 on devices without notches — safe everywhere. */ .ios-app .mobile-header { padding-top: calc(0.75rem + env(safe-area-inset-top, 0px)) !important; } .ios-app .mobile-fab-post { /* Lowered toward the bottom-right, just above the 76px nav (was 85px). */ bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important; } .ios-app .mobile-filter-fab { bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important; } .ios-app .mobile-sidebar { padding-top: env(safe-area-inset-top, 0px); } /* ---- Content top-offset for the status bar ---- The fixed .mobile-header grows by env(safe-area-inset-top) (rule above), but the scrollable content below it uses fixed top offsets (mobile-overrides.css) that don't account for the notch — so the first content (e.g. the feed search bar, the messages list, the AI chat panel) gets cut off under the status bar. These add the inset on top of the existing offsets. Scoped to the iOS app and to the mobile breakpoint so web/desktop are untouched. Loaded after mobile-overrides so these win; env(...) is 0 on non-notched devices, so it's safe everywhere. */ @media (max-width: 768px) { /* Feed + most tab pages: .main-content uses padding-top: 65px */ .ios-app .main-content { padding-top: calc(65px + env(safe-area-inset-top, 0px)) !important; } /* Kill the navy gap above the bottom nav. mobile-overrides.css reserves 90/85/80px of bottom padding across the 768/480/375 breakpoints, and on iOS also re-adds env(safe-area-inset-bottom) — but the fixed bottom nav is only 76px tall and already bakes the safe-area inset INTO that 76px (box-sizing: border-box). So the wrapper reserved more space than the nav occupies, and the extra showed as empty navy background. Match the nav's 76px exactly (no extra env() — it's already inside the 76px). Higher specificity + last load order means this one rule corrects every breakpoint at once. EXCLUDE .recruiting-board-main: that page sets padding:0 and manages its own bottom spacing (it's the one page WITHOUT the gap) — :not() keeps it as-is. */ .ios-app .main-content:not(.recruiting-board-main):not(.messages-content) { padding-bottom: 76px !important; min-height: calc(100dvh - 76px) !important; } /* Messages page: edge-to-edge on iOS. mobile-overrides.css applies .main-content { padding: 1rem } (loads after messages.css), insetting the whole messages page; zero the side padding so the list + thread reach the screen edges. BOTTOM GAP FIX: an @supports block in mobile-overrides.css sets .main-content { padding-bottom: calc(90px + env(safe-area-inset-bottom)) }. The messages page is
, so that rule (same specificity, loaded later) overrode the per-role .messages-content { padding-bottom:76px } and left a ~90px+ navy band below the content. .ios-app .messages-content (specificity 0,2,0 > .main-content 0,1,0) loaded LAST wins decisively. The bottom nav is exactly 76px tall (safe-area is inside its 76px via box-sizing:border-box), so reserve 76px. */ .ios-app .messages-content { padding-left: 0 !important; padding-right: 0 !important; /* Robust bottom clearance for the fixed 76px nav, device-independent. Instead of guessing bottom PADDING against an ambiguous 100dvh (which mispredicted twice — 76px left a gap, 76px−env hid the footer), make the content BOX itself exactly the nav-height shorter than the dynamic viewport: height = 100dvh − 76px, padding-bottom = 0. The nav is position:fixed; bottom:0; height:76px (safe-area baked inside via box-sizing:border-box), so the box's bottom edge lands exactly on the nav's top edge on every iPhone regardless of home-indicator size — no env() math, no gap, footer/composer fully visible. */ height: calc(100dvh - 76px) !important; padding-bottom: 0 !important; } /* Drop the divider line that renders ABOVE the Recruiting Calendar on mobile: .conversations-list has a bottom border and .conversations-footer a top border; stacked, they read as a stray line above the calendar button. */ .ios-app .conversations-list { border-bottom: none !important; } .ios-app .conversations-footer { border-top: none !important; } /* Messages: .messages-content uses padding-top: 60px (fills viewport) */ .ios-app .messages-content { padding-top: calc(60px + env(safe-area-inset-top, 0px)) !important; } /* My Profile / viewing another profile: the content area is
and my-profile.css forces padding-top: 60px !important, which on a notched device sits the profile header (avatar/name) under the status bar + fixed mobile header — clipping it, especially when viewing another profile. Re-add the safe-area inset. .main-content.profile-content (3 classes) outranks the inline .viewing-other-profile .main-content rule so it applies in both states. */ .ios-app .main-content.profile-content { padding-top: calc(60px + env(safe-area-inset-top, 0px)) !important; } /* AI chat panels (Recruiting Assistant / Portal Intelligence) are position: fixed with top: 50px instead of padding — adjust the top. Scoped to the ACTIVE tab (see mobile-overrides.css): the RA/PI markup stays in the DOM on discover/portal, so a bare :has() matched even when the Find Players / Current Portal tab was showing. */ .ios-app .main-content:has(.dp-tab-content.active .ra-layout), .ios-app .main-content:has(.tp-tab-content.active .pi-layout) { top: calc(50px + env(safe-area-inset-top, 0px)) !important; } /* Discover / Transfer Portal padded (non-AI) tab: align subtabs with the AI-tab position (50px) instead of the default 65px, including the safe-area inset. :not(:has(...active AI layout)) so it only applies on the non-AI tab and never fights the AI tab's fixed padding:0 layout. See mobile-overrides.css. */ .ios-app .main-content:has(.dp-subtabs):not(:has(.dp-tab-content.active .ra-layout)), .ios-app .main-content:has(.tp-subtabs):not(:has(.tp-tab-content.active .pi-layout)) { padding-top: calc(50px + env(safe-area-inset-top, 0px)) !important; } /* ---- Modal headers: keep the X close button below the status bar ---- Full-screen modals sit at top:0; their header positions the X via flex + header padding, so adding env(safe-area-inset-top) to the header's padding-top pushes the X down clear of the time/wifi/battery. Headers are uniquely named (no shared class), so enumerate them. Base top padding is ~1.25rem for most; mobile-post uses 1rem. */ .ios-app .mobile-post-modal-header { padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important; } .ios-app .follow-list-modal-header, .ios-app .rc-header, .ios-app .recruiting-board-modal-header, .ios-app .feed-modal-header, .ios-app .likes-modal-header, .ios-app .shares-modal-header, .ios-app .profile-post-modal-header, .ios-app .delete-account-modal-header, .ios-app .edit-modal-header, .ios-app .add-highlight-modal-header, .ios-app .add-offer-modal-header, .ios-app .add-stars-modal-header, .ios-app .connections-modal-header, .ios-app .edit-academics-modal-header, .ios-app .edit-athletics-modal-header, .ios-app .edit-recruiting-modal-header, .ios-app .season-select-modal-header, .ios-app .switch-modal-header, .ios-app .email-verification-modal-header, .ios-app .forgot-password-modal-header, /* AI Recruiting Assistant + Portal Intelligence full-screen modals (base 1.25rem) */ .ios-app .ra-usage-header, .ios-app .ra-baselines-header, .ios-app .pi-usage-header { padding-top: calc(1.25rem + env(safe-area-inset-top, 0px)) !important; } /* AI RA saved modal + Edit Reply modal (base 1rem) */ .ios-app .ra-saved-header, .ios-app .reply-edit-modal-header { padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important; } /* AI PI watchlist modal (base 20px) */ .ios-app .pi-watchlist-header { padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important; } /* Landing role-selection modals (coach/player type) — JS-injected by auth.js, go full-screen on mobile with a flush-top header. Push the modal content's top padding below the status bar. Scoped to these modals so the generic .modal-header/.modal-content elsewhere is unaffected. Base padding 32px. */ .ios-app .coach-type-modal .modal-content, .ios-app .player-type-modal .modal-content, .ios-app .registration-modal .modal-content { padding-top: calc(32px + env(safe-area-inset-top, 0px)) !important; } } /* ---- Web-isms: make it feel native ---- */ /* No blue/gray flash on tap, no iOS long-press menu */ .ios-app * { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } /* No accidental text selection during scroll. Re-enabled on form fields and user-generated content. */ .ios-app { -webkit-user-select: none; user-select: none; } .ios-app input, .ios-app textarea, .ios-app [contenteditable="true"], .ios-app .post-text, .ios-app .post-content, .ios-app .message-body, .ios-app .comment-text { -webkit-user-select: text; user-select: text; } /* No pull-to-refresh browser indicator */ .ios-app body { overscroll-behavior-y: contain; } /* Kill sticky :hover on tap-only devices — after tapping a button, the hover background otherwise stays highlighted until next tap */ @media (hover: none) { .ios-app a:hover, .ios-app button:hover, .ios-app .nav-item:hover, .ios-app .post-card:hover { background: inherit; color: inherit; } } /* Reassert iOS text-size auto-adjustment control */ .ios-app { -webkit-text-size-adjust: 100%; } /* ============================================================ Generic .web-only / .ios-only helpers (Fix #6) .web-only content is hidden inside the iOS app; .ios-only is hidden everywhere else. Used to swap Stripe / hardcoded $ price language between web and iOS bundles without duplicating entire pages. Apple Guidelines 3.1.1 / 3.1.3. ============================================================ */ .ios-only { display: none !important; } html.ios-app .web-only { display: none !important; } html.ios-app .ios-only { display: revert !important; } /* ============================================================ Landing pages: hide the top Features/Pricing/Support nav on iOS. The links are redundant (also in the footer) and the position:fixed navbar is overlapped by the iOS status bar (time/wifi/battery). Scoped to .v2-nav-minimal so in-app nav bars are unaffected. ============================================================ */ html.ios-app .v2-nav-minimal { display: none !important; } /* ============================================================ iOS-only back button for legal/support pages (support, privacy, terms). These pages have no nav and native swipe-back is unreliable here, so we show a small fixed back button (hidden on web via .ios-only). Sits below the status bar via safe-area inset. ============================================================ */ .ios-back-btn { position: fixed; top: 0; left: 0; z-index: 2000; display: flex; align-items: center; gap: 4px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px 16px; background: transparent; border: none; color: #1282a2; font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; } .ios-back-btn svg { width: 18px; height: 18px; } /* Push legal page content down so the button doesn't overlap the heading */ html.ios-app .legal-section { padding-top: calc(env(safe-area-inset-top, 0px) + 52px); }