/** * capacitor-ios.css * Courts Padel — iOS Native Shell Styles * * Loaded only when running inside Capacitor (toggled via JS class on ). * All selectors are scoped under `.cap-ios` to prevent bleeding into * the plain-browser experience. * * Covers: * 1. Safe area insets (notch, Dynamic Island, home indicator) * 2. Touch optimisation (tap targets, active states, no double-tap zoom) * 3. Scroll & overscroll (bounce prevention, momentum scrolling) * 4. Offline overlay * 5. Payment handoff dialog (bottom sheet) * 6. Push notification pre-prompt (bottom sheet) * 7. In-app toast * * Brand tokens: * --cap-green : #2C3E2D (primary) * --cap-gold : #C4A76C (accent) * --cap-cream : #FAF8F5 (light bg / text on dark) * --cap-dark : #1A1A1A (body text) */ /* ════════════════════════════════════════════════════════════════════ * 0. CSS CUSTOM PROPERTIES * ════════════════════════════════════════════════════════════════════ */ :root { --cap-green: #2C3E2D; --cap-gold: #C4A76C; --cap-cream: #FAF8F5; --cap-dark: #1A1A1A; --cap-radius-sm: 10px; --cap-radius-md: 18px; --cap-radius-lg: 24px; --cap-sheet-z: 10000; --cap-overlay-z: 9999; --cap-toast-z: 10001; --cap-transition: 0.28s cubic-bezier(0.32, 0.72, 0, 1); /* Safe area fallbacks for non-notch devices */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); } /* ════════════════════════════════════════════════════════════════════ * 1. SAFE AREA INSETS * Applied globally when running inside the native shell. * The JS bridge adds `.cap-ios` to on init. * ════════════════════════════════════════════════════════════════════ */ html.cap-ios { /* Extend background behind the status bar */ background-color: var(--cap-green); } html.cap-ios body { /* Push content below the Dynamic Island / notch */ padding-top: var(--safe-top); /* Baseline: just the home indicator — overridden when tab bar is present */ padding-bottom: var(--safe-bottom); /* Respect landscape notch on either side */ padding-left: var(--safe-left); padding-right: var(--safe-right); /* Prevent full-page rubber-band bounce */ overscroll-behavior: none; } /* Only add tab bar clearance when the tab bar is actually injected */ html.cap-ios body.cap-has-tab-bar { padding-bottom: calc(60px + var(--safe-bottom)); } /* Hide native scrollbars — iOS apps don't show them */ html.cap-ios *::-webkit-scrollbar { display: none; } html.cap-ios * { scrollbar-width: none; } /* ── MVP .nav bar: pad for Dynamic Island / notch ─────────────────────── */ /* The /mvp/ pages use a sticky .nav with height:52px. On iOS we need to */ /* extend it to cover safe-area-inset-top and push content below the notch. */ html.cap-ios .nav { height: calc(52px + var(--safe-top)) !important; padding-top: var(--safe-top) !important; box-sizing: border-box !important; } /* Hide desktop nav links — replaced by bottom tab bar on iOS */ html.cap-ios .nav-links { display: none !important; } /* ════════════════════════════════════════════════════════════════════ * 1b. NATIVE BOTTOM TAB BAR * Injected by capacitor-bridge.js on /mvp/ pages * ════════════════════════════════════════════════════════════════════ */ #cap-tab-bar { display: none; /* hidden on web — shown only on iOS via JS class */ } html.cap-ios #cap-tab-bar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9000; height: calc(60px + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: rgba(250, 248, 245, 0.97); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-top: 0.5px solid rgba(44, 62, 45, 0.12); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06); align-items: stretch; justify-content: space-around; } html.cap-ios .cap-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 3px; padding: 8px 4px 4px; text-decoration: none; color: rgba(44, 62, 45, 0.45); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.18s ease; min-height: 44px; min-width: 44px; } html.cap-ios .cap-tab:active { opacity: 0.6; transform: scale(0.93); transition: opacity 0.06s ease, transform 0.06s ease; } html.cap-ios .cap-tab.cap-tab-active { color: var(--cap-green); } html.cap-ios .cap-tab-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; position: relative; } html.cap-ios .cap-tab-icon svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.18s ease; } /* Active icon: filled version */ html.cap-ios .cap-tab.cap-tab-active .cap-tab-icon svg { stroke-width: 2; } /* Pill indicator above active tab */ html.cap-ios .cap-tab.cap-tab-active .cap-tab-icon::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 20px; height: 3px; background: var(--cap-green); border-radius: 0 0 3px 3px; } html.cap-ios .cap-tab-label { font-size: 10px; font-weight: 500; letter-spacing: 0.02em; font-family: 'Inter', -apple-system, sans-serif; line-height: 1; text-align: center; } /* ════════════════════════════════════════════════════════════════════ * 2. TOUCH OPTIMISATION * ════════════════════════════════════════════════════════════════════ */ /* Minimum 44×44pt tap targets (Apple HIG) */ html.cap-ios a, html.cap-ios button, html.cap-ios [role="button"], html.cap-ios input[type="submit"], html.cap-ios input[type="button"], html.cap-ios input[type="reset"], html.cap-ios label, html.cap-ios select, html.cap-ios .tap-target { min-height: 44px; min-width: 44px; } /* Remove hover-only states on touch devices; replace with :active */ @media (hover: none) and (pointer: coarse) { /* * IMPORTANT: Target ONLY interactive leaf elements here — never `*`. * * On iOS, when a user taps a text input the `:hover` pseudo-class * propagates UP the ancestor chain (to the parent div, grandparent, etc.). * Using `html.cap-ios *:hover { background-color: unset !important }` would * therefore wipe the white background of `.login-box`, `.card`, and every * other structural container the moment the user touches any child input — * making the whole card invisible (transparent against the green background). * * Scoping to `a`, `button`, and `[role="button"]` suppresses the unwanted * hover colour effects on clickable elements only, while leaving all * structural container backgrounds untouched. */ html.cap-ios a:hover, html.cap-ios button:hover, html.cap-ios [role="button"]:hover, html.cap-ios label:hover { background-color: unset !important; color: unset !important; border-color: unset !important; box-shadow: unset !important; transform: none !important; text-decoration: none !important; opacity: unset !important; } /* Provide a tactile active response instead */ html.cap-ios a:active, html.cap-ios button:active, html.cap-ios [role="button"]:active { opacity: 0.65; transform: scale(0.97); transition: opacity 0.06s ease, transform 0.06s ease; } } /* Prevent double-tap zoom everywhere except text inputs */ html.cap-ios * { touch-action: manipulation; } html.cap-ios input, html.cap-ios textarea { touch-action: auto; /* restore pinch-zoom on text inputs */ font-size: max(16px, 1em); /* prevent iOS auto-zoom on focus < 16px */ } /* Suppress tap highlight flicker */ html.cap-ios * { -webkit-tap-highlight-color: transparent; } /* Disable text selection on non-editable content */ html.cap-ios body { -webkit-user-select: none; user-select: none; } html.cap-ios input, html.cap-ios textarea, html.cap-ios [contenteditable] { -webkit-user-select: text; user-select: text; } /* Momentum scrolling for overflow containers */ html.cap-ios [class*="scroll"], html.cap-ios [class*="list"], html.cap-ios main, html.cap-ios .content, html.cap-ios .feed { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; } /* ════════════════════════════════════════════════════════════════════ * 3. OFFLINE OVERLAY * ════════════════════════════════════════════════════════════════════ */ #cap-offline-overlay { position: fixed; inset: 0; z-index: var(--cap-overlay-z); background: var(--cap-green); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--cap-transition); padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); } #cap-offline-overlay.cap-offline-visible { opacity: 1; pointer-events: all; } .cap-offline-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; max-width: 300px; padding: 20px; } .cap-offline-icon { width: 72px; height: 72px; border-radius: 50%; background: rgba(196, 167, 108, 0.1); display: flex; align-items: center; justify-content: center; } .cap-offline-icon svg { width: 40px; height: 40px; } .cap-offline-title { font-size: 22px; font-weight: 300; letter-spacing: 0.06em; color: var(--cap-cream); font-family: 'Cormorant Garamond', Georgia, serif; } .cap-offline-rule { width: 36px; height: 1px; background: var(--cap-gold); opacity: 0.5; } .cap-offline-body { font-size: 14px; line-height: 1.65; color: rgba(250, 248, 245, 0.6); } /* Pulsing reconnect spinner */ .cap-offline-spinner { width: 28px; height: 28px; border: 2px solid rgba(196, 167, 108, 0.2); border-top-color: var(--cap-gold); border-radius: 50%; animation: cap-spin 0.9s linear infinite; margin-top: 4px; } /* ════════════════════════════════════════════════════════════════════ * 4. BOTTOM SHEET — shared base styles * Used by payment dialog and push prompt * ════════════════════════════════════════════════════════════════════ */ /* Backdrop */ .cap-payment-backdrop, .cap-push-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: calc(var(--cap-sheet-z) - 1); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Sheet wrapper */ #cap-payment-dialog, #cap-push-prompt { position: fixed; inset: 0; z-index: var(--cap-sheet-z); display: flex; align-items: flex-end; pointer-events: none; opacity: 0; transition: opacity var(--cap-transition); } #cap-payment-dialog.cap-payment-visible, #cap-push-prompt.cap-push-visible { opacity: 1; pointer-events: all; } /* Sheet card */ .cap-payment-sheet, .cap-push-sheet { width: 100%; background: var(--cap-cream); border-radius: var(--cap-radius-lg) var(--cap-radius-lg) 0 0; padding: 16px 24px calc(var(--safe-bottom) + 24px); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; transform: translateY(100%); transition: transform var(--cap-transition); max-width: 560px; margin: 0 auto; } #cap-payment-dialog.cap-payment-visible .cap-payment-sheet, #cap-push-prompt.cap-push-visible .cap-push-sheet { transform: translateY(0); } /* Drag handle pill */ .cap-payment-rule, .cap-push-rule { width: 36px; height: 4px; background: rgba(44, 62, 45, 0.15); border-radius: 2px; margin-bottom: 4px; flex-shrink: 0; } /* Icon area */ .cap-payment-icon { margin: 4px 0; } .cap-push-icon { font-size: 40px; line-height: 1; margin: 4px 0; } /* Title */ .cap-payment-title, .cap-push-title { font-size: 20px; font-weight: 600; color: var(--cap-dark); letter-spacing: -0.01em; font-family: 'Cormorant Garamond', Georgia, serif; } /* Body text */ .cap-payment-body, .cap-push-body { font-size: 14px; line-height: 1.6; color: rgba(26, 26, 26, 0.65); max-width: 300px; } /* Primary button */ .cap-payment-confirm, .cap-push-allow { width: 100%; max-width: 340px; padding: 16px 24px; background: var(--cap-green); color: var(--cap-cream); border: none; border-radius: var(--cap-radius-sm); font-size: 15px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 0.12s ease; min-height: 52px; } .cap-payment-confirm:active, .cap-push-allow:active { opacity: 0.75; } /* Secondary / cancel button */ .cap-payment-cancel, .cap-push-skip { width: 100%; max-width: 340px; padding: 14px 24px; background: transparent; color: rgba(26, 26, 26, 0.5); border: none; border-radius: var(--cap-radius-sm); font-size: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; min-height: 44px; } .cap-payment-cancel:active, .cap-push-skip:active { color: var(--cap-dark); } /* ════════════════════════════════════════════════════════════════════ * 5. IN-APP TOAST NOTIFICATION * ════════════════════════════════════════════════════════════════════ */ #cap-toast { position: fixed; top: calc(var(--safe-top) + 12px); left: 16px; right: 16px; z-index: var(--cap-toast-z); background: rgba(44, 62, 45, 0.96); border: 1px solid rgba(196, 167, 108, 0.25); border-radius: var(--cap-radius-md); padding: 14px 16px; display: flex; align-items: center; gap: 12px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); opacity: 0; transform: translateY(-12px) scale(0.96); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } #cap-toast.cap-toast-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; } .cap-toast-icon { font-size: 22px; flex-shrink: 0; line-height: 1; } .cap-toast-content { flex: 1; min-width: 0; } .cap-toast-title { font-size: 14px; font-weight: 600; color: var(--cap-cream); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cap-toast-body { font-size: 12px; color: rgba(250, 248, 245, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } /* ════════════════════════════════════════════════════════════════════ * 6. SHARED ANIMATION * ════════════════════════════════════════════════════════════════════ */ @keyframes cap-spin { to { transform: rotate(360deg); } } /* ════════════════════════════════════════════════════════════════════ * 7. RESPONSIVE — iPad optimisations * ════════════════════════════════════════════════════════════════════ */ @media (min-width: 768px) { /* Centre bottom sheets on iPad */ .cap-payment-sheet, .cap-push-sheet { margin: 0 auto; border-radius: var(--cap-radius-lg); max-width: 480px; margin-bottom: calc(var(--safe-bottom) + 40px); } /* Toast stays centred on wide screens */ #cap-toast { left: auto; right: auto; width: 420px; /* horizontally centred */ left: 50%; transform: translateX(-50%) translateY(-12px) scale(0.96); } #cap-toast.cap-toast-visible { transform: translateX(-50%) translateY(0) scale(1); } } /* ════════════════════════════════════════════════════════════════════ * 8. LANDSCAPE ADJUSTMENTS * ════════════════════════════════════════════════════════════════════ */ @media (orientation: landscape) and (max-height: 500px) { /* Compact bottom sheets in landscape */ .cap-payment-sheet, .cap-push-sheet { gap: 8px; padding-top: 10px; } .cap-payment-icon, .cap-push-icon { display: none; } } /* ════════════════════════════════════════════════════════════════════ * 9. MVP LOGIN PAGE — stable, keyboard-safe layout * * Root cause of the two iOS keyboard glitches: * * a) COLOUR BLEED — body has background:cream (#FAF8F5). The body's * padding-top (= safe-area-inset-top) sits above .login-bg, so * cream is visible behind the Dynamic Island. When WKWebView * auto-scrolls to keep the focused input in view the page shifts * up, revealing more cream at the top and a gap at the bottom. * * b) CONTENT CLIPPED / UNREACHABLE — .login-bg is a flex container * with align-items/justify-content:center. When the keyboard * shrinks the viewport and the content overflows, the overflow * at the START of the flex axis is not reachable by scrolling — * the logo and auth-tabs disappear off the top and cannot be * scrolled back. * * Fix: position:fixed so the container: * 1. starts at top:0, covering the safe-area zone entirely with * the green background — no cream bleed behind the notch; * 2. is anchored to bottom:0 (= top of keyboard when open), so the * container automatically shrinks to the visible area — the * green background never bleeds beyond what the user can see; * 3. cannot be pushed around by WKWebView's keyboard-scroll. * * Use justify-content:flex-start (not center) so content always * stacks downward from the padding-top edge and any overflow is * reachable by normal scrolling within the fixed container. * ════════════════════════════════════════════════════════════════════ */ html.cap-ios .login-bg { /* ── Fixed to viewport: covers full screen including status-bar zone ── */ position: fixed; top: 0; left: 0; right: 0; /* * DO NOT use bottom:0 here. * * iOS WKWebView positions fixed elements relative to the LAYOUT viewport. * When the software keyboard opens, the keyboard overlaps the bottom of * the fixed element rather than shrinking it — so inputs near the bottom * end up hidden behind the keyboard and the layout appears "corrupted". * * Instead we set `height: 100dvh` (dynamic viewport height, iOS 15.4+) * as a CSS fallback, and override it in JS via the Visual Viewport API * (see capacitor-bridge.js §9) which fires on every keyboard show/hide. */ height: 100dvh; /* ── Scroll content inside the fixed container ── */ overflow-y: auto; -webkit-overflow-scrolling: touch; /* ── Stack from top — avoids flex overflow-start clip bug ── */ display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* ── Safe area padding INSIDE the fixed container ── */ padding-top: calc(var(--safe-top) + 28px); padding-bottom: calc(var(--safe-bottom) + 28px); padding-left: 20px; padding-right: 20px; box-sizing: border-box; /* ── Reset old values ── */ min-height: unset; } /* Login card: full available width, consistent padding on iPhone */ html.cap-ios .login-box { width: 100%; max-width: 400px; padding: 28px 24px 32px; border-radius: 16px; /* * DEFENSIVE: Re-declare background + box-shadow with !important. * * On iOS, tapping an input triggers :hover on every ancestor element. * Even with our scoped hover-neutralisation (section 2), WKWebView * can sometimes cache an older stylesheet or other rules can interfere. * Pinning these here guarantees the card is ALWAYS visible — white * card on green background, no matter what. */ background: #fff !important; box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important; /* Parent container handles scrolling — no max-height clipping */ max-height: unset; overflow-y: visible; } /* Ensure form inputs inside the login box are comfortably sized */ html.cap-ios .login-box .form-i, html.cap-ios .login-box input[type="email"], html.cap-ios .login-box input[type="password"], html.cap-ios .login-box input[type="text"] { /* 16px minimum prevents iOS auto-zoom on focus */ font-size: 16px; padding: 13px 14px; } html.cap-ios .login-box .pw-wrap .form-i { padding-right: 46px; /* space for the show/hide toggle */ } /* Submit buttons: full width, easy to tap */ html.cap-ios .login-box .btn { min-height: 50px; font-size: 15px; width: 100%; justify-content: center; } /* Auth tabs: larger touch targets */ html.cap-ios .auth-tab { min-height: 44px; padding: 10px 0 12px; font-size: 14px; } /* ════════════════════════════════════════════════════════════════════ * 10. ADMIN PAGES — iPhone 16 & iPad native treatment * * .adm-topbar sticky dark-green header (all admin pages) * .adm-topbar__nav horizontal link list — wraps on desktop, * scrolls on iPhone (too many items to wrap) * .adm-wrap page content wrapper * ════════════════════════════════════════════════════════════════════ */ /* ── Safe area: extend topbar behind Dynamic Island / notch ── */ html.cap-ios .adm-topbar { padding-top: calc(14px + var(--safe-top)); /* Ensure it's always sticky and above content */ position: sticky; top: 0; z-index: 200; } /* ── Nav links: always make them scrollable horizontally. On wide screens there's no overflow; on iPhone it scrolls. ── */ html.cap-ios .adm-topbar__nav { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; /* never wrap — scroll instead */ } html.cap-ios .adm-topbar__nav::-webkit-scrollbar { display: none; } html.cap-ios .adm-topbar__nav a { white-space: nowrap; flex-shrink: 0; /* Apple HIG: 44pt minimum touch target */ min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; } /* ── iPhone: stack brand/title above scrollable nav strip ── */ @media (max-width: 680px) { html.cap-ios .adm-topbar { flex-direction: column; align-items: flex-start; gap: 0; padding: calc(14px + var(--safe-top)) 0 0; } html.cap-ios .adm-topbar__left { flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 0 20px; } /* Nav strip bleeds edge-to-edge with horizontal padding for scroll feel */ html.cap-ios .adm-topbar__nav { width: 100%; padding: 4px 12px 10px; gap: 2px; border-top: 1px solid rgba(255, 255, 255, 0.06); margin-top: 8px; } html.cap-ios .adm-topbar__nav a { padding: 0 12px; border-radius: 6px; font-size: 0.76rem; } html.cap-ios .adm-topbar__actions { width: 100%; padding: 8px 20px 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); justify-content: flex-end; gap: 8px; } html.cap-ios .adm-topbar__actions > span { display: none; /* hide username text on very small screens */ } /* Content area: tighter padding on iPhone */ html.cap-ios .adm-wrap { padding: 16px 12px calc(var(--safe-bottom) + 24px); } /* Stat numbers slightly smaller on iPhone */ html.cap-ios .adm-stat__num { font-size: 2rem; } /* Tables: allow horizontal scroll on small screens */ html.cap-ios .adm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ── iPad (768px – 1100px): comfortable layout, wider tap targets ── */ @media (min-width: 681px) and (max-width: 1100px) { html.cap-ios .adm-topbar { padding-left: max(24px, var(--safe-left)); padding-right: max(24px, var(--safe-right)); } html.cap-ios .adm-wrap { padding: 24px max(20px, var(--safe-left)) calc(var(--safe-bottom) + 32px); } /* Allow nav to wrap on iPad (plenty of horizontal room) */ html.cap-ios .adm-topbar__nav { flex-wrap: wrap; overflow-x: visible; } } /* ── iPad Pro landscape: near-desktop, just safe areas ── */ @media (min-width: 1101px) { html.cap-ios .adm-topbar { padding-left: max(24px, var(--safe-left)); padding-right: max(24px, var(--safe-right)); } html.cap-ios .adm-wrap { padding-bottom: max(60px, calc(var(--safe-bottom) + 32px)); } html.cap-ios .adm-topbar__nav { flex-wrap: wrap; overflow-x: visible; } }