/* ═══════════════════════════════════════════════════════════════════ Native-Feel Polish — applied only inside Capacitor iOS shell Adds an `is-native-app` class to (see inline script in base.html). Browser users on dev.pepcoach.ai are untouched. Tier 1 fixes for Chen launch sprint (2026-06-04): A. Disable WebView bounce-scroll B. San Francisco system fonts globally C. Kill blue tap-highlight + native press states D. Safe area / notch handling E. Prevent flash-of-white between pages ═══════════════════════════════════════════════════════════════════ */ /* ── E. Flash-of-white prevention (applies to all users, not just native) ── */ html { background-color: #000000; } /* ── Everything below scoped to .is-native-app ── */ /* ── A. Disable WebView bounce-scroll ───────────────────────────────── */ html.is-native-app, html.is-native-app body { overscroll-behavior-y: none; -webkit-overflow-scrolling: auto; } /* ── B. San Francisco system fonts globally ─────────────────────────── */ html.is-native-app, html.is-native-app body, html.is-native-app .card, html.is-native-app .btn, html.is-native-app input, html.is-native-app select, html.is-native-app textarea, html.is-native-app button, html.is-native-app h1, html.is-native-app h2, html.is-native-app h3, html.is-native-app h4, html.is-native-app h5, html.is-native-app h6, html.is-native-app p, html.is-native-app span, html.is-native-app div, html.is-native-app a, html.is-native-app li, html.is-native-app label { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; } /* Preserve monospace for tabular numbers (chips, timers, weights) */ html.is-native-app .mono, html.is-native-app .tnum, html.is-native-app .num-cell, html.is-native-app code, html.is-native-app pre, html.is-native-app .weight-display, html.is-native-app .timer-display { font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace !important; font-variant-numeric: tabular-nums; } /* ── C. Kill blue tap-highlight + native press states ───────────────── */ html.is-native-app * { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } /* User text remains selectable */ html.is-native-app input, html.is-native-app textarea, html.is-native-app [contenteditable] { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; } /* Native press state — scale-down on tap */ html.is-native-app .btn, html.is-native-app button, html.is-native-app a.btn, html.is-native-app .card[role="button"], html.is-native-app [data-tap], html.is-native-app .nav-link, html.is-native-app .clickable { transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 120ms cubic-bezier(0.2, 0.8, 0.2, 1); -webkit-user-select: none; user-select: none; } html.is-native-app .btn:active, html.is-native-app button:active, html.is-native-app a.btn:active, html.is-native-app .card[role="button"]:active, html.is-native-app [data-tap]:active, html.is-native-app .nav-link:active, html.is-native-app .clickable:active { transform: scale(0.97); opacity: 0.85; } /* Disable iOS link long-press menu */ html.is-native-app a, html.is-native-app a:link { -webkit-touch-callout: none; } /* ── D. Safe area / notch handling (top status-bar buffer) ──────────── */ /* base.html already pads body for safe-area. This adds a top buffer for pages that use absolute-positioned headers / bottom tab bars. */ html.is-native-app .navbar-fixed-top, html.is-native-app .app-header, html.is-native-app .fixed-top { padding-top: calc(env(safe-area-inset-top, 0px) + 0.5rem); } html.is-native-app .navbar-fixed-bottom, html.is-native-app .bottom-tab-bar, html.is-native-app .fixed-bottom { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 0.25rem); } /* ── E. Flash-of-white between pages ────────────────────────────────── */ html.is-native-app, html.is-native-app body { background-color: #000000; } /* Disable iOS WebView's default "drag to back-navigate" gesture on app surfaces */ html.is-native-app body { overflow-x: hidden; } /* ── Bonus polish — smooth scroll containers ────────────────────────── */ html.is-native-app .scroll-container, html.is-native-app main, html.is-native-app .main-content { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } /* ═══════════════════════════════════════════════════════════════════ Tier 2 — Skeleton loaders + page fade-in (Chen launch sprint) 2026-06-05 — added to make hero flows (Body Scan, My Workouts, Build Workout) feel "structure-first" instead of "white-flash". These rules apply to BOTH native shell AND browser users so the marketing landing experience benefits too. ═══════════════════════════════════════════════════════════════════ */ /* Skeleton placeholder: a soft gray block with shimmer. Usage:
*/ .skeleton { background: linear-gradient( 90deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.10) 50%, rgba(255, 255, 255, 0.05) 100% ); background-size: 200% 100%; border-radius: 8px; animation: pep-shimmer 1.4s ease-in-out infinite; display: block; } @keyframes pep-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Light-themed skeleton for white-card pages (my_workouts, body_scan) */ .skeleton-light { background: linear-gradient( 90deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.08) 50%, rgba(0, 0, 0, 0.04) 100% ); background-size: 200% 100%; border-radius: 8px; animation: pep-shimmer 1.4s ease-in-out infinite; display: block; } /* Common shapes */ .skeleton-line { height: 14px; width: 60%; margin: 8px 0; } .skeleton-line--short { width: 30%; } .skeleton-line--full { width: 100%; } .skeleton-line--medium { width: 70%; } .skeleton-line--title { height: 22px; width: 50%; margin-bottom: 12px; } .skeleton-card { height: 96px; width: 100%; border-radius: 14px; margin-bottom: 12px; } .skeleton-card--tall { height: 140px; } .skeleton-avatar { height: 48px; width: 48px; border-radius: 50%; } .skeleton-pill { height: 28px; width: 80px; border-radius: 999px; } /* Page fade-in — applied to
or body content on initial render. Combined with html.is-native-app's black bg, this means the page appears to "build up" instead of "flash in". */ @keyframes pep-page-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } html.is-native-app .container, html.is-native-app main, html.is-native-app .main-wrapper { animation: pep-page-fadein 220ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { html.is-native-app .container, html.is-native-app main, html.is-native-app .main-wrapper { animation: none; } .skeleton, .skeleton-light { animation: none; } html.is-native-app .btn, html.is-native-app button { transition: none; } } /* ═══════════════════════════════════════════════════════════════════ Tier 2.B — Sticky bottom safe-area for forms / submit bars ═══════════════════════════════════════════════════════════════════ */ html.is-native-app .sticky-submit-bar { position: sticky; bottom: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); z-index: 100; } /* ═══════════════════════════════════════════════════════════════════ Tier 2.C — Pull-to-refresh indicator styling (browser default is jarring; this softens it) ═══════════════════════════════════════════════════════════════════ */ html.is-native-app { overscroll-behavior-y: contain; } /* ═══════════════════════════════════════════════════════════════════ ════════════════════════ TIER 3 — DEEP NATIVE PATTERNS ═════════════ 2026-06-05 — the previous tiers handled defaults (fonts, bg colors, tap states). This tier replaces COMPONENT-LEVEL Bootstrap defaults that still felt web-ish: form inputs, toggles, segmented controls, list rows, big titles, action buttons. All scoped to .is-native-app. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ Tier 3.* — Page slide transitions via View Transitions API (#85) 2026-06-05 — when supported (iOS 18.2+ WKWebView, Chromium 111+), tapping a link slides the old page out to the left and the new page in from the right. iOS UINavigationController feel. Falls back to the existing fade-in (Tier 2) on older browsers — zero regression. ═══════════════════════════════════════════════════════════════════ */ @view-transition { navigation: auto; } @supports (view-transition-name: root) { /* Scope only to native shell — browser users get instant nav. */ html.is-native-app::view-transition-old(root) { animation: pep-page-slide-out-left 260ms cubic-bezier(0.32, 0.72, 0, 1) both; } html.is-native-app::view-transition-new(root) { animation: pep-page-slide-in-right 260ms cubic-bezier(0.32, 0.72, 0, 1) both; } } @keyframes pep-page-slide-out-left { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-22%); opacity: 0.6; } } @keyframes pep-page-slide-in-right { from { transform: translateX(100%); opacity: 0.9; } to { transform: translateX(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { html.is-native-app::view-transition-old(root), html.is-native-app::view-transition-new(root) { animation: none; } } /* ── Tier 3.* — Compliance footer iOS-native treatment ─────────────── */ /* Must stay visible (App Review requirement) but should not look like a web footer with a hard top border + light gray text. iOS version: dark inline footer with subtle separator, smaller links. */ html.is-native-app .pep-compliance-footer { margin: 32px 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important; border-top: none !important; background: transparent !important; font-size: 11px !important; color: rgba(255, 255, 255, 0.30) !important; padding: 16px 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.06) !important; } html.is-native-app .pep-compliance-footer a { color: rgba(127, 202, 255, 0.65) !important; text-decoration: none !important; } html.is-native-app .pep-compliance-footer a:active { color: rgba(127, 202, 255, 0.85) !important; } /* ── Tier 3.* — Hide web-app installer prompts inside native shell ── */ /* PWA install banner JS already checks for native and returns early, but the element + styles are still in the DOM. Belt-and-suspenders. */ html.is-native-app #installBanner, html.is-native-app .install-banner { display: none !important; } /* ── Tier 3.* — iOS toast notification (replaces Bootstrap alerts) ── */ /* Rendered by base.html when flash messages exist. Slides up from bottom-center, 3s auto-dismiss, fades + slides down. */ .pep-toast { background: rgba(28, 28, 35, 0.94); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); color: #fff; padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 500; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(255, 255, 255, 0.08); min-width: 240px; max-width: 88vw; text-align: center; animation: pep-toast-slide-up 320ms cubic-bezier(0.32, 0.72, 0, 1) both; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; line-height: 1.35; } .pep-toast--success { background: rgba(52, 199, 89, 0.94); /* iOS green */ } .pep-toast--error, .pep-toast--danger { background: rgba(255, 59, 48, 0.94); /* iOS red */ } .pep-toast--warning { background: rgba(255, 159, 10, 0.96); /* iOS orange */ color: #1a1100; } .pep-toast--info { background: rgba(0, 122, 255, 0.94); /* iOS blue */ } .pep-toast--out { animation: pep-toast-slide-down 280ms cubic-bezier(0.32, 0.72, 0, 1) forwards; } @keyframes pep-toast-slide-up { from { transform: translateY(120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes pep-toast-slide-down { from { transform: translateY(0); opacity: 1; } to { transform: translateY(120%); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .pep-toast, .pep-toast--out { animation: none; } } /* ── Tier 3.A — iOS-style form inputs ─────────────────────────────── */ /* 2026-06-06 REVERTED — the previous version forced color:#fff + dark bg which broke text visibility on LIGHT-background forms (login, chat, settings cards, body_scan). Now: only safe iOS polish (17px font to prevent focus zoom, rounded corners, no browser appearance) — but the text color stays inherited so it adapts to whatever the parent card already uses. To get the dark-input look on dark surfaces, opt-in via the new .pep-input-dark class. */ html.is-native-app input[type="text"], html.is-native-app input[type="email"], html.is-native-app input[type="password"], html.is-native-app input[type="number"], html.is-native-app input[type="tel"], html.is-native-app input[type="search"], html.is-native-app input[type="url"], html.is-native-app input[type="date"], html.is-native-app input[type="time"], html.is-native-app textarea, html.is-native-app select, html.is-native-app .form-control, html.is-native-app .form-select { border-radius: 12px; font-size: 17px; /* iOS default body — prevents zoom on focus */ -webkit-appearance: none; appearance: none; } /* Opt-in dark input pattern for explicit dark cards/surfaces */ html.is-native-app .pep-input-dark, html.is-native-app .pep-input-dark.form-control { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); color: #fff; padding: 12px 14px; transition: border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1), background 180ms cubic-bezier(0.2, 0.8, 0.2, 1); outline: none; } html.is-native-app .pep-input-dark:focus { background: rgba(255, 255, 255, 0.10); border-color: rgba(127, 202, 255, 0.55); box-shadow: 0 0 0 3px rgba(127, 202, 255, 0.15); } html.is-native-app .pep-input-dark::placeholder { color: rgba(255, 255, 255, 0.40); } /* ── Tier 3.B — iOS-style toggle switch ───────────────────────────── */ /* Replaces the Bootstrap form-check switch with an iOS pill toggle. Applies to: */ html.is-native-app .form-check.form-switch .form-check-input { width: 51px !important; height: 31px !important; background-color: rgba(255, 255, 255, 0.18); background-image: none !important; border-radius: 999px; border: none; cursor: pointer; position: relative; transition: background-color 240ms cubic-bezier(0.2, 0.8, 0.2, 1); -webkit-appearance: none; appearance: none; } html.is-native-app .form-check.form-switch .form-check-input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; background: #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1); } html.is-native-app .form-check.form-switch .form-check-input:checked { background-color: #34c759; /* iOS green */ } html.is-native-app .form-check.form-switch .form-check-input:checked::before { transform: translateX(20px); } /* ── Tier 3.C — iOS-style grouped list (settings-style cells) ─────── */ /* Pattern: Renders as iOS settings-style rows with hairline separators. */ .pep-list { list-style: none; padding: 0; margin: 0 0 22px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; overflow: hidden; } .pep-list__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-top: 1px solid rgba(255, 255, 255, 0.06); min-height: 50px; color: #fff; text-decoration: none; transition: background 120ms ease; } .pep-list__row:first-child { border-top: none; } .pep-list__row:active, a.pep-list__row:active { background: rgba(255, 255, 255, 0.06); } .pep-list__label { font-size: 16px; font-weight: 500; color: #fff; } .pep-list__value { font-size: 16px; color: rgba(255, 255, 255, 0.55); text-align: right; white-space: nowrap; } .pep-list__chevron { color: rgba(255, 255, 255, 0.35); font-weight: 700; font-size: 18px; margin-left: 2px; } .pep-list__header { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.45); margin: 22px 16px 6px; font-weight: 600; } /* ── Tier 3.D — iOS large title pattern ──────────────────────────── */ /* For page hero headers — large at top, behaves like UINavigationController large title. Static for now; future enhancement could collapse on scroll. */ .pep-large-title { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #fff; margin: 6px 0 14px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif; } .pep-large-title__subtitle { font-size: 15px; color: rgba(255, 255, 255, 0.55); font-weight: 400; margin-top: 4px; } /* ── Tier 3.E — iOS segmented control ─────────────────────────────── */ /* Replaces tab-style buttons / Bootstrap nav-pills with iOS segmented. Pattern:
*/ .pep-segmented { display: inline-flex; background: rgba(255, 255, 255, 0.08); border-radius: 9px; padding: 2px; gap: 0; position: relative; } .pep-segmented__item { background: transparent; border: none; padding: 7px 14px; border-radius: 7px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.65); cursor: pointer; transition: background 200ms cubic-bezier(0.2, 0.8, 0.2, 1), color 200ms cubic-bezier(0.2, 0.8, 0.2, 1); } .pep-segmented__item.is-active, .pep-segmented__item[aria-selected="true"] { background: rgba(255, 255, 255, 0.18); color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20); } /* ── Tier 3.F — iOS action button (filled, prominent) ─────────────── */ /* For primary CTAs. Use .pep-action-btn for big tappable confirm actions. Replaces the bland Bootstrap btn-primary on touchy moments. */ .pep-action-btn { display: block; width: 100%; padding: 15px 18px; border: none; border-radius: 14px; font-size: 17px; font-weight: 700; background: linear-gradient(135deg, #2c5ff5 0%, #6c5ce7 100%); color: #fff; cursor: pointer; text-align: center; text-decoration: none; transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 120ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 200ms cubic-bezier(0.2, 0.8, 0.2, 1); box-shadow: 0 6px 18px rgba(44, 95, 245, 0.32); -webkit-tap-highlight-color: transparent; } .pep-action-btn:active { transform: scale(0.97); opacity: 0.88; } .pep-action-btn:disabled, .pep-action-btn[aria-disabled="true"] { background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.35); box-shadow: none; cursor: not-allowed; } .pep-action-btn--secondary { background: rgba(255, 255, 255, 0.10); color: #fff; box-shadow: none; } .pep-action-btn--destructive { background: linear-gradient(135deg, #ff453a 0%, #ff3b30 100%); box-shadow: 0 6px 18px rgba(255, 59, 48, 0.30); } /* ── Tier 3.G — Polish for Bootstrap defaults that still leak through */ html.is-native-app .modal-content { background: linear-gradient(160deg, #131b2e 0%, #0a0e1a 100%); border: 1px solid rgba(127, 202, 255, 0.18); border-radius: 18px; color: #fff; } html.is-native-app .modal-header { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } html.is-native-app .modal-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); } html.is-native-app .btn-close { filter: invert(1) opacity(0.7); } /* Bootstrap dropdown menus — darken to match app shell */ html.is-native-app .dropdown-menu { background: #131b2e; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; color: #fff; padding: 6px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.50); } html.is-native-app .dropdown-item { color: #fff; border-radius: 8px; padding: 10px 12px; } html.is-native-app .dropdown-item:hover, html.is-native-app .dropdown-item:active { background: rgba(255, 255, 255, 0.08); color: #fff; } html.is-native-app .dropdown-divider { border-color: rgba(255, 255, 255, 0.08); } /* Tooltips */ html.is-native-app .tooltip-inner { background: rgba(15, 20, 35, 0.95); color: #fff; border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 500; } /* Alert / flash messages */ html.is-native-app .alert { border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.08); padding: 14px 16px; } /* Bootstrap cards — softer, more iOS card vibe */ html.is-native-app .card { border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); } html.is-native-app .card-header { border-bottom-color: rgba(255, 255, 255, 0.06); background: transparent; } html.is-native-app .card-footer { border-top-color: rgba(255, 255, 255, 0.06); background: transparent; } /* Bootstrap badges → iOS-style pills */ html.is-native-app .badge { border-radius: 999px; font-weight: 600; letter-spacing: 0.01em; padding: 5px 10px; } /* Bootstrap primary buttons */ html.is-native-app .btn-primary { background: linear-gradient(135deg, #2c5ff5 0%, #6c5ce7 100%); border: none; border-radius: 12px; font-weight: 700; letter-spacing: -0.01em; padding: 12px 22px; box-shadow: 0 4px 14px rgba(44, 95, 245, 0.30); } html.is-native-app .btn-success { background: linear-gradient(135deg, #34c759 0%, #2db84f 100%); border: none; border-radius: 12px; font-weight: 700; } html.is-native-app .btn-danger { background: linear-gradient(135deg, #ff453a 0%, #ff3b30 100%); border: none; border-radius: 12px; font-weight: 700; } html.is-native-app .btn-secondary { background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; color: #fff; font-weight: 600; } html.is-native-app .btn-outline-primary, html.is-native-app .btn-outline-secondary, html.is-native-app .btn-outline-success, html.is-native-app .btn-outline-danger { border-radius: 12px; font-weight: 600; } html.is-native-app .btn { letter-spacing: -0.01em; transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 120ms ease, box-shadow 200ms ease; } html.is-native-app .btn:active { transform: scale(0.97); } /* Bootstrap nav-pills → iOS segmented vibe */ html.is-native-app .nav-pills .nav-link { border-radius: 10px; color: rgba(255, 255, 255, 0.65); padding: 8px 16px; font-weight: 600; } html.is-native-app .nav-pills .nav-link.active { background: rgba(255, 255, 255, 0.18); color: #fff; } html.is-native-app .nav-tabs { border-bottom-color: rgba(255, 255, 255, 0.08); } html.is-native-app .nav-tabs .nav-link { color: rgba(255, 255, 255, 0.55); border: none; border-bottom: 2px solid transparent; font-weight: 600; padding: 10px 14px; } html.is-native-app .nav-tabs .nav-link.active { background: transparent; color: #fff; border-bottom-color: #2c5ff5; } /* Progress bars */ html.is-native-app .progress { background: rgba(255, 255, 255, 0.06); border-radius: 999px; height: 8px; overflow: hidden; } html.is-native-app .progress-bar { background: linear-gradient(90deg, #34c759, #30d158); border-radius: 999px; } /* Spinners */ html.is-native-app .spinner-border, html.is-native-app .spinner-grow { color: rgba(127, 202, 255, 0.85); } /* Bootstrap close button on dark surfaces */ html.is-native-app .btn-close-white { filter: invert(0); } /* Bootstrap list groups */ html.is-native-app .list-group { border-radius: 14px; overflow: hidden; } html.is-native-app .list-group-item { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.06); color: #fff; } /* ── Tier 3.I — Sidebar drawer iOS treatment ──────────────────────── */ /* Existing translateX animation is browser-default ease. Override with iOS spring curve. Backdrop gets blur on iOS. */ @media (max-width: 992px) { html.is-native-app .sidebar { transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1) !important; box-shadow: 4px 0 30px rgba(0, 0, 0, 0.4); } html.is-native-app .sidebar-overlay { background: rgba(5, 8, 17, 0.55) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: opacity 240ms ease-out; } } /* ── Tier 3.J — Success burst (post-save micro-animation) ─────────── */ /* Pattern:
✓ Saved
Trigger via JS: el.classList.add('is-firing'); Auto-removes after animation completes. */ .pep-burst { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: linear-gradient(135deg, #34c759 0%, #2db84f 100%); color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 6px 20px rgba(52, 199, 89, 0.40); opacity: 0; transform: scale(0.6); pointer-events: none; } .pep-burst.is-firing { animation: pep-burst-pop 720ms cubic-bezier(0.2, 0.8, 0.2, 1.05) forwards; } .pep-burst__check { display: inline-block; width: 18px; height: 18px; background: #fff; border-radius: 50%; color: #2db84f; font-weight: 900; text-align: center; line-height: 18px; font-size: 13px; } @keyframes pep-burst-pop { 0% { opacity: 0; transform: scale(0.6); } 35% { opacity: 1; transform: scale(1.06); } 60% { opacity: 1; transform: scale(1); } 85% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1) translateY(-4px); } } /* ── Tier 3.K — Long-press visual feedback ────────────────────────── */ /* For elements with data-long-press attribute — shows a subtle pulsing ring on touch-and-hold so iOS users get tactile + visual cue. */ html.is-native-app [data-long-press]:active { position: relative; } html.is-native-app [data-long-press]:active::after { content: ""; position: absolute; inset: -8px; border-radius: inherit; border: 2px solid rgba(127, 202, 255, 0.45); animation: pep-long-press-ring 600ms cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; } @keyframes pep-long-press-ring { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } /* ── Tier 3.L — Number stepper (sets/reps style) ──────────────────── */ /* iOS-native -/+ control. Pattern:
10
*/ .pep-stepper { display: inline-flex; align-items: stretch; background: rgba(255, 255, 255, 0.08); border-radius: 10px; overflow: hidden; height: 36px; } .pep-stepper__btn { background: transparent; border: none; color: rgba(127, 202, 255, 0.95); font-size: 18px; font-weight: 600; width: 36px; cursor: pointer; transition: background 120ms ease; } .pep-stepper__btn:active { background: rgba(255, 255, 255, 0.12); } .pep-stepper__value { min-width: 40px; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; color: #fff; padding: 0 8px; } /* ── Tier 3.* — Bootstrap modal slide-up animation (native) ───────── */ /* Default Bootstrap modal fade is stiff. Native iOS modals slide up from the bottom with a spring curve. Override the .modal .fade behavior inside .is-native-app. */ html.is-native-app .modal.fade .modal-dialog { transform: translateY(40px) scale(0.96); transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1), opacity 220ms ease-out; } html.is-native-app .modal.show .modal-dialog { transform: translateY(0) scale(1); } html.is-native-app .modal-backdrop.fade { transition: opacity 220ms ease-out; } html.is-native-app .modal-backdrop.show { opacity: 0.7; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* On mobile, anchor modals to bottom (sheet style) */ @media (max-width: 640px) { html.is-native-app .modal-dialog { margin: 0; position: fixed; left: 0; right: 0; bottom: 0; max-width: 100%; } html.is-native-app .modal-content { border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom, 12px); } html.is-native-app .modal.fade .modal-dialog { transform: translateY(100%); } } /* ── Tier 3.N — Sidebar nav items iOS treatment ───────────────────── */ /* Sidebar items inside native shell should feel like iOS sheet rows — pill-shaped active state, subtle press feedback, no underline hover. */ html.is-native-app .sidebar-nav-item { border-radius: 12px; margin: 2px 8px; transition: background 180ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1); } html.is-native-app .sidebar-nav-item:active { transform: scale(0.98); background: rgba(255, 255, 255, 0.08) !important; } html.is-native-app .sidebar-nav-item.active { background: rgba(44, 95, 245, 0.20) !important; color: #fff !important; font-weight: 600; } html.is-native-app .sidebar-nav-item.active::before { content: ""; position: absolute; left: -4px; top: 8px; bottom: 8px; width: 3px; background: #2c5ff5; border-radius: 0 3px 3px 0; } html.is-native-app .sidebar-nav-item { position: relative; } /* Hamburger menu button feel */ html.is-native-app .mobile-menu-btn { border-radius: 10px; transition: background 160ms ease, transform 120ms ease; } html.is-native-app .mobile-menu-btn:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.10); } /* ── Tier 3.O — Bootstrap input-group polish ──────────────────────── */ html.is-native-app .input-group { border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); } html.is-native-app .input-group .form-control, html.is-native-app .input-group input { background: transparent; border: none; border-radius: 0; } html.is-native-app .input-group .form-control:focus { box-shadow: none; background: transparent; } html.is-native-app .input-group:focus-within { border-color: rgba(127, 202, 255, 0.55); background: rgba(255, 255, 255, 0.10); } html.is-native-app .input-group-text { background: rgba(255, 255, 255, 0.04); border: none; color: rgba(255, 255, 255, 0.55); font-weight: 600; } /* ── Tier 3.P — Bootstrap accordion polish ────────────────────────── */ html.is-native-app .accordion-item { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px !important; margin-bottom: 8px; overflow: hidden; } html.is-native-app .accordion-button { background: transparent; color: #fff; font-weight: 600; border-radius: 12px !important; } html.is-native-app .accordion-button:not(.collapsed) { background: rgba(255, 255, 255, 0.04); color: #fff; box-shadow: none; } html.is-native-app .accordion-body { color: rgba(255, 255, 255, 0.85); } html.is-native-app .accordion-button::after { filter: invert(1) opacity(0.6); } /* ── Tier 3.M — Inline empty-state pattern ────────────────────────── */ /* Pattern:
🏋️
No workouts yet
Tap "Build a Workout" to get started.
*/ .pep-empty { text-align: center; padding: 36px 24px; color: rgba(255, 255, 255, 0.78); } .pep-empty__icon { font-size: 44px; margin-bottom: 12px; opacity: 0.88; } .pep-empty__title { font-size: 17px; font-weight: 700; margin-bottom: 4px; color: #fff; } .pep-empty__sub { font-size: 14px; color: rgba(255, 255, 255, 0.55); line-height: 1.45; max-width: 320px; margin: 0 auto; } /* ═══════════════════════════════════════════════════════════════════ Tier 2.E — Reusable bottom-sheet modal (task #87) 2026-06-05. Extracts the pattern from dashboard2.html's pc-no-modal into reusable .pep-sheet-* classes so any new modal can adopt the native iOS bottom-sheet look: - slides up from bottom on mobile - centered card on tablet+ desktop - blur backdrop - rounded top corners only on mobile Usage: Existing pc-no-modal classes (Watch onboarding modal) intentionally untouched — that flow is working and tested; this is for NEW modals. ═══════════════════════════════════════════════════════════════════ */ .pep-sheet { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-end; justify-content: center; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Arial, sans-serif; } .pep-sheet[hidden] { display: none; } .pep-sheet__backdrop { position: absolute; inset: 0; background: rgba(5, 8, 17, 0.84); animation: pep-sheet-fade 220ms ease-out; } @supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) { .pep-sheet__backdrop { background: rgba(5, 8, 17, 0.62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } } .pep-sheet__panel { position: relative; z-index: 1; width: 100%; max-width: 520px; padding: 8px 22px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0; background: linear-gradient(160deg, #131b2e 0%, #0a0e1a 100%); border-top: 1px solid rgba(127, 202, 255, 0.18); box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.55); color: #f3f5fa; animation: pep-sheet-slide-up 320ms cubic-bezier(0.32, 0.72, 0, 1); } .pep-sheet__handle { width: 38px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); margin: 6px auto 14px; } .pep-sheet__close { position: absolute; top: 12px; right: 14px; background: transparent; border: none; color: rgba(255, 255, 255, 0.55); font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 8px; } .pep-sheet__close:hover, .pep-sheet__close:active { color: rgba(255, 255, 255, 0.95); } @keyframes pep-sheet-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pep-sheet-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } /* Desktop / tablet: centered card instead of bottom-anchored sheet */ @media (min-width: 640px) { .pep-sheet { align-items: center; } .pep-sheet__panel { border-radius: 18px; max-width: 480px; margin: 0 22px; animation: pep-sheet-scale-in 240ms cubic-bezier(0.32, 0.72, 0, 1); } .pep-sheet__handle { display: none; } } @keyframes pep-sheet-scale-in { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .pep-sheet__backdrop, .pep-sheet__panel { animation: none; } } /* ═══════════════════════════════════════════════════════════════════ Tier 2.D — iOS easing curves on interactive elements (task #91) 2026-06-05. CSS default `ease` and `linear` look mechanical; iOS uses spring curves. Targeted at interactive surfaces only — not progress bars, charts, or specialty animations. ═══════════════════════════════════════════════════════════════════ */ html.is-native-app .btn, html.is-native-app button, html.is-native-app a.btn, html.is-native-app a[role="button"], html.is-native-app .card, html.is-native-app .nav-link, html.is-native-app [role="button"], html.is-native-app [data-tap], html.is-native-app .clickable, html.is-native-app .pc-card, html.is-native-app .pc-no-btn, html.is-native-app .d2-native-pillar, html.is-native-app input[type="checkbox"], html.is-native-app input[type="radio"], html.is-native-app .form-check-input, html.is-native-app .toggle, html.is-native-app .accordion-button { transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); } /* Modal panels + bottom sheets use a snappier overshoot curve */ html.is-native-app .modal, html.is-native-app .modal-dialog, html.is-native-app .modal-content, html.is-native-app .pc-no-modal__panel, html.is-native-app .offcanvas { transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1); }