/* ===================================================================== Mobile web-app polish — drop-in stylesheet --------------------------------------------------------------------- Loaded on every page via . Adds the small details that make a site feel like a native iOS app: • No tap-highlight gray flash on iOS • No 300ms tap delay (touch-action: manipulation) • No iOS text auto-scaling (-webkit-text-size-adjust) • No rubber-band overscroll white flash on iOS Safari • No callout menu on long-press • Safe-area-inset padding so the iPhone notch doesn't tuck content • Inputs sized 16px to suppress iOS focus zoom • Match canvas background to body so the notch area blends in ===================================================================== */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Notch / status-bar area gets the same dark base as the body so there's no white strip at the top when the app runs in standalone mode. */ html, body { background-color: #0e0e0e; } body { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; overscroll-behavior-y: none; } /* Belt-and-suspenders: every element loses the tap-highlight flash. */ *, *::before, *::after { -webkit-tap-highlight-color: transparent; } /* Kill the 300ms tap delay on interactive elements. The selectors cover every clickable component class our portal uses. */ button, a, [role="button"], input[type="button"], input[type="submit"], input[type="reset"], input[type="checkbox"], input[type="radio"], label, .btn, .btn-action, .nav-tab, .pin-key, .filter-pill, .cat-pill, .subcat-pill, .view-tab, .lift-tab, .lb-row, .ath-card, .exercise, .rpe-btn, .wf-nav-btn, .wf-log-btn, .wf-set, .wf-demo-btn, .upcoming-row, .cal-list-row, .ath-circle, .ath-circle-all, .recipe-card, .tray-tile, .action-stack a, .drag-handle { touch-action: manipulation; -webkit-user-select: none; user-select: none; } /* Inputs and textareas keep system text selection. */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea { -webkit-user-select: text; user-select: text; } /* iOS focus-zoom on inputs is triggered by font-size < 16px. Force the floor without overriding intentional larger values. */ input, textarea, select { font-size: max(16px, 1em); } /* Smooth momentum scrolling — older iOS Safari still needs the prefix. */ .workout-overlay, .modal, .drill-modal-card, .results-table-wrapper, .lift-tabs, .cat-strip, .athletes-grid, .upcoming, .recent, .cal-list, .cards-grid { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Safe-area-inset for the iPhone notch and home-indicator. We can't blanket-add to because some pages (login) center content vertically and the extra padding would shift it. Instead: – Every page uses `.back-link` as the topmost element; push that element down by the notch height so it doesn't tuck under the status bar / Dynamic Island. Standalone PWA mode hides the status bar, but in regular Safari the iPhone notch still applies. – Full-screen overlays (workout flow, modals) get the inset on the overlay itself. – Opt-in helper classes for any element that genuinely sits at a fixed top/bottom edge. */ @supports (padding: env(safe-area-inset-top)) { /* Generic "top of the page" element gets shoved down to clear the iPhone notch / Dynamic Island in standalone PWA mode. Whichever element is first inside .wrap gets the inset margin — that covers back-link pages AND hero-first pages (Parent HQ, Coaches HQ, Athlete HQ, etc.). */ .wrap > .back-link:first-child, .wrap > .hero:first-child, .wrap > section.hero:first-child, .wrap > header.hero:first-child { margin-top: env(safe-area-inset-top); } /* Team-chat: sticky header has padding-top: 12px which puts its title under the notch. Push it down. The chat-head's gradient background already extends behind the notch, so the area looks finished — only the text needs to clear it. */ .chat-head { padding-top: calc(12px + env(safe-area-inset-top)) !important; } /* Team-chat's hamburger is position:fixed top:12px — same deal. */ .mobile-menu-btn { top: calc(12px + env(safe-area-inset-top)) !important; } .workout-overlay, .modal-overlay, .drill-modal, .vid-modal { padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: max(18px, env(safe-area-inset-bottom)); } .safe-top { padding-top: max(0px, env(safe-area-inset-top)); } .safe-bottom { padding-bottom: max(0px, env(safe-area-inset-bottom)); } } /* Standalone PWA hooks — anything you'd like to hide/show only when the site is launched from the home-screen icon. */ @media all and (display-mode: standalone) { /* Hide any in-app prompts to "install as PWA" since they already did. */ .pwa-install-prompt { display: none !important; } } /* Better-feeling active states on touch — slight press feedback so the button feels responsive even on a slow network. */ button:active, .btn:active, .btn-action:active, .cat-pill:active, .lift-tab:active, .view-tab:active, .filter-pill:active, .wf-nav-btn:active, .wf-log-btn:active, .rpe-btn:active { transform: scale(.97); transition: transform .08s ease; } /* iOS PWA splash background — when the splash appears before our HTML loads, it should still feel branded, not white. */ :root { color-scheme: dark; }