/* ============================================================ 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 { bottom: calc(85px + 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; } /* Messages: .messages-content uses padding-top: 60px (fills viewport) */ .ios-app .messages-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. */ .ios-app .main-content:has(.ra-layout), .ios-app .main-content:has(.pi-layout) { 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 { padding-top: calc(1.25rem + 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); }