/* Aircrate PWA shell. * * Only active when the page is running in display-mode: standalone * (i.e. the user installed it and launched from the home screen). The * body gets `.is-pwa` from pwa-shell.js; without that class every rule * here is dormant, so non-installed mobile users keep the regular site. * * Design inspiration: the "Manifest" variant from the design canvas — * paper bg, wordmark top bar with ink/blue dot, tab bar at the bottom * with home/route/plus/user icons. */ /* Cross-document View Transitions — Chrome 126+, Safari 18+ (iOS 18+). * Browsers that understand this rule do a smooth crossfade between * pages on same-origin navigation, papering over the "loading flash" * during tab swaps. Older browsers (iOS 17 and below, Firefox) just * ignore the rule and navigate normally — no regression. * * The tab bar + top bar get a stable view-transition-name so they * stay in place while the main content fades; that's what makes the * swap feel native rather than full-page reload. */ @view-transition { navigation: auto; } .pwa-tabbar { view-transition-name: pwa-tabbar; } .pwa-topbar { view-transition-name: pwa-topbar; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* Hide the site's marketing layout inside the PWA. Our top app bar + tab bar + per-route dashboards take its place, and the marketing header / hero / pricing / FAQ sections are the wrong shape for a phone (plus they cause a flash on home before pwa-home.js mounts). Both html.is-pwa AND body.is-pwa selectors listed: the inline detection adds the class to documentElement before first paint, body class arrives on DOMContentLoaded. */ html.is-pwa header.site, html.is-pwa footer.site, html.is-pwa #lang-switcher, html.is-pwa #install-banner, html.is-pwa .marketing-landing, body.is-pwa header.site, body.is-pwa footer.site, body.is-pwa #lang-switcher, body.is-pwa #install-banner, body.is-pwa .marketing-landing { display: none !important; } /* PWA home skeleton — the inverse pair. Hidden in marketing mode so non-installed visitors only see the landing page; shown the moment the inline detection script flips html → .is-pwa. Painted at 0ms from cached HTML; pwa-home.js fills the personalised placeholders. */ #pwa-home-root { display: none; } html.is-pwa #pwa-home-root, body.is-pwa #pwa-home-root { display: block; } html.is-pwa body, body.is-pwa { /* Reserve room above the bottom tab bar (56px content + iOS home-indicator safe-area + 16px buffer so the tab labels clear the home-indicator gesture zone with comfortable breathing room). Pages inside the shell scroll naturally above it. */ padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 16px); padding-top: calc(48px + env(safe-area-inset-top, 0px)); background: #F4F4F2; /* Hard-opt out of Chrome's Force Dark Mode flag. Without `only light` Chrome will still recolour the page if the user has force-dark enabled at the flag level, which is exactly what the design forbids (the Manifest variant is paper-themed by definition). */ color-scheme: only light; } html.is-pwa { color-scheme: only light; } body.is-pwa.is-dark { background: #0E1116; color: #F4F4F2; /* Manifest-dark tokens — same palette as `acTheme('manifest', dark)` in pwa-theme.jsx so the screens read the same as the canvas. */ --ink: #F4F4F2; --ink-soft: #E2E1DC; --ink-muted: #8A8F99; --surface: #1A1E26; --surface-2: #222732; --hairline: #2A2F39; --hairline-strong: #404552; --accent: #1158E8; --accent-deep: #1158E8; } body.is-pwa.is-dark .pwa-card, body.is-pwa.is-dark .card, body.is-pwa.is-dark section[style*="background: var(--surface)"], body.is-pwa.is-dark div[style*="background: var(--surface)"] { background: #1A1E26 !important; border-color: #2A2F39 !important; color: #F4F4F2; } body.is-pwa.is-dark section[style*="background: var(--surface-2)"], body.is-pwa.is-dark div[style*="background: var(--surface-2)"] { background: #222732 !important; border-color: #2A2F39 !important; } body.is-pwa.is-dark .btn.primary { background: #F4F4F2 !important; color: #0E1116 !important; border-color: #F4F4F2 !important; } body.is-pwa.is-dark .btn.ghost { background: #1A1E26 !important; color: #F4F4F2 !important; border-color: #2A2F39 !important; } body.is-pwa.is-dark input[type="text"], body.is-pwa.is-dark input[type="email"], body.is-pwa.is-dark input[type="tel"], body.is-pwa.is-dark input[type="url"], body.is-pwa.is-dark input[type="number"], body.is-pwa.is-dark input[type="password"], body.is-pwa.is-dark input[type="search"], body.is-pwa.is-dark input:not([type]), body.is-pwa.is-dark select, body.is-pwa.is-dark textarea { background: #1A1E26 !important; color: #F4F4F2 !important; border-color: #2A2F39 !important; -webkit-text-fill-color: #F4F4F2; } body.is-pwa.is-dark input::placeholder, body.is-pwa.is-dark textarea::placeholder { color: #595E69 !important; -webkit-text-fill-color: #595E69; } body.is-pwa.is-dark .meta-strip { border-bottom-color: #404552 !important; } /* ── Manifest-variant aesthetic inside the PWA ────────────────────── When wrapped by the PWA shell the existing pages get a paper feel that matches the design canvas. We deliberately keep the overrides minimal — the goal is consistent chrome, not a top-to-bottom restyling that would re-litigate every existing layout. */ body.is-pwa main, body.is-pwa .wrap, body.is-pwa .wrap-mid, body.is-pwa .wrap-narrow { background: transparent; } /* Horizontal page padding inside the PWA shell. Cards should always * have a generous gutter against the screen edge. We use the longhand * properties because some browsers don't apply !important consistently * to the shorthand padding-inline when there are also padding-left/ * padding-right rules in cascade. */ body.is-pwa main { padding-left: calc(22px + env(safe-area-inset-left, 0px)) !important; padding-right: calc(22px + env(safe-area-inset-right, 0px)) !important; } body.is-pwa .wrap-mid, body.is-pwa .wrap-narrow { padding-inline: 0 !important; } /* Belt-and-braces: ensure the page-padding applies even on pages where * `
` carries an inline style with padding-inline (which beats the * class rule above on iOS Safari). */ body.is-pwa main[style*="padding-block"], body.is-pwa main[style*="padding-top"] { padding-left: calc(22px + env(safe-area-inset-left, 0px)) !important; padding-right: calc(22px + env(safe-area-inset-right, 0px)) !important; } body.is-pwa h1.display, body.is-pwa h1.display-section { font-size: clamp(26px, 7vw, 32px) !important; } body.is-pwa h2.display, body.is-pwa h2.display-section { font-size: clamp(22px, 6vw, 28px) !important; } /* Hide chrome that duplicates the PWA shell. The site header (wordmark + nav) is already in the top bar; the marketing footer is just noise inside an app. Removing them tightens every page. */ body.is-pwa header.site, body.is-pwa footer.site, body.is-pwa #lang-switcher, body.is-pwa #install-banner { display: none !important; } /* Pages that have a hero block (index marketing only) get their content re-padded so it doesn't sit at viewport-edge. */ body.is-pwa section.hero { padding-top: 12px !important; padding-bottom: 12px !important; } /* Surface cards: regular site uses var(--surface) which under force-dark becomes some grey. Inside the PWA we always want true white cards on the paper bg — explicit values beat the variable. */ body.is-pwa .card, body.is-pwa section[style*="background: var(--surface)"], body.is-pwa div[style*="background: var(--surface)"] { background: #FFFFFF !important; border-color: #DADAD5 !important; } body.is-pwa section[style*="background: var(--surface-2)"], body.is-pwa div[style*="background: var(--surface-2)"] { background: #ECECE8 !important; border-color: #DADAD5 !important; } /* The site's CSS uses CSS custom properties (--ink, --ink-soft, etc.) that look fine on the marketing site but get muddled when force-dark recolours the underlying variables. Inside the PWA we redeclare them to the design's Manifest palette. */ body.is-pwa { --ink: #0E1116; --ink-soft: #1A1F26; --ink-muted: #7A7872; --surface: #FFFFFF; --surface-2: #ECECE8; --hairline: #DADAD5; --hairline-strong: #B7B6B0; --accent: #1158E8; --accent-deep: #1158E8; color: #0E1116; } /* Buttons — keep them flat, ink/blue, no gradients. */ body.is-pwa .btn.primary { background: #0E1116 !important; color: #fff !important; border-color: #0E1116 !important; } body.is-pwa .btn.ghost { background: #FFFFFF !important; color: #0E1116 !important; border: 1px solid #DADAD5 !important; } /* Inputs inside the PWA: paper-coloured, ink text — fights force-dark that would otherwise paint the inputs grey-on-grey. */ body.is-pwa input[type="text"], body.is-pwa input[type="email"], body.is-pwa input[type="tel"], body.is-pwa input[type="url"], body.is-pwa input[type="number"], body.is-pwa input[type="password"], body.is-pwa input[type="search"], body.is-pwa input:not([type]), body.is-pwa select, body.is-pwa textarea { background: #FFFFFF !important; color: #0E1116 !important; border: 1px solid #DADAD5 !important; -webkit-text-fill-color: #0E1116; } body.is-pwa input::placeholder, body.is-pwa textarea::placeholder { color: #B7B6B0 !important; -webkit-text-fill-color: #B7B6B0; } /* The marketing meta-strip / eyebrow above page titles is loud on the marketing site but reads as cluttered chrome inside a phone app. */ body.is-pwa .meta-strip { border-bottom: 1px dashed #B7B6B0 !important; } /* ── Top app bar ─────────────────────────────────────────────────── */ .pwa-topbar { position: fixed; top: 0; left: 0; right: 0; /* Same reasoning as .pwa-tabbar — stay above PayPal iframes. */ z-index: 10000; background: #F4F4F2; border-bottom: 1px solid #DADAD5; padding: env(safe-area-inset-top, 0px) 16px 0; height: calc(48px + env(safe-area-inset-top, 0px)); display: flex; align-items: center; justify-content: space-between; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-tap-highlight-color: transparent; } body.is-pwa.is-dark .pwa-topbar { background: #0E1116; border-bottom-color: #2A2F39; } .pwa-topbar .pwa-back { appearance: none; background: none; border: 0; cursor: pointer; padding: 8px; margin-left: -8px; color: #0E1116; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } body.is-pwa.is-dark .pwa-topbar .pwa-back { color: #F4F4F2; } .pwa-topbar .pwa-back svg { width: 22px; height: 22px; } .pwa-topbar .pwa-wordmark { font-weight: 800; font-size: 19px; letter-spacing: -0.045em; line-height: 1; color: #0E1116; text-decoration: none; } body.is-pwa.is-dark .pwa-topbar .pwa-wordmark { color: #F4F4F2; } .pwa-topbar .pwa-wordmark .pwa-dot { color: #1158E8; margin-left: 0.02em; } .pwa-topbar .pwa-balance { font: 700 13px/1 "SF Mono", ui-monospace, Menlo, monospace; color: #0E1116; padding: 5px 9px; border: 1px dashed #B7B6B0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-decoration: none; } .pwa-topbar .pwa-balance.is-hidden { display: none; } .pwa-topbar .pwa-bell { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: -8px; color: #0E1116; -webkit-tap-highlight-color: transparent; } body.is-pwa.is-dark .pwa-topbar .pwa-bell { color: #F4F4F2; } .pwa-topbar .pwa-bell svg { width: 22px; height: 22px; } .pwa-topbar .pwa-balance .k { font: 500 8.5px/1 "SF Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; color: #7A7872; } body.is-pwa.is-dark .pwa-topbar .pwa-balance { color: #F4F4F2; border-color: #404552; } body.is-pwa.is-dark .pwa-topbar .pwa-balance .k { color: #8A8F99; } /* ── Bottom tab bar ──────────────────────────────────────────────── */ .pwa-tabbar { position: fixed; bottom: 0; left: 0; right: 0; /* Stack above PayPal Smart Button iframes (which default to ~9999 for popups). The tab bar must always own the bottom edge. */ z-index: 10000; background: #F4F4F2; border-top: 1px solid #DADAD5; /* Add a 16px buffer on top of the iOS safe-area inset so the tab icons/labels sit well above the home-indicator gesture zone — testers reported taps near the bottom felt like they were about to trigger the home swipe. */ padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); height: calc(56px + env(safe-area-inset-bottom, 0px) + 16px); display: flex; align-items: stretch; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } body.is-pwa.is-dark .pwa-tabbar { background: #0E1116; border-top-color: #2A2F39; } .pwa-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: #7A7872; font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; } .pwa-tabbar a.is-active { color: #1158E8; font-weight: 700; } .pwa-tabbar a svg { width: 22px; height: 22px; } body.is-pwa.is-dark .pwa-tabbar a { color: #8A8F99; } body.is-pwa.is-dark .pwa-tabbar a.is-active { color: #1158E8; } /* ── Install banner (regular browser, mobile, not installed) ─────── */ #pwa-install-banner { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 50; background: #0E1116; color: #F4F4F2; border-radius: 12px; padding: 14px 14px 14px 16px; display: none; align-items: center; gap: 12px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } #pwa-install-banner.is-visible { display: flex; } #pwa-install-banner .pwa-banner-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 8px; } #pwa-install-banner .pwa-banner-body { flex: 1; font-size: 13px; line-height: 1.35; } #pwa-install-banner .pwa-banner-body strong { font-weight: 700; font-size: 14px; display: block; margin-bottom: 2px; letter-spacing: -0.02em; } #pwa-install-banner .pwa-banner-body span { color: rgba(244, 244, 242, 0.72); } #pwa-install-banner button { appearance: none; cursor: pointer; border: 0; border-radius: 8px; padding: 10px 14px; font: 700 13px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -0.01em; background: #1158E8; color: #fff; } #pwa-install-banner .pwa-banner-close { background: transparent; color: rgba(244, 244, 242, 0.6); padding: 8px; font-size: 18px; font-weight: 400; margin: -8px -4px -8px 0; } #pwa-ios-sheet { position: fixed; inset: 0; z-index: 60; display: none; align-items: flex-end; background: rgba(0, 0, 0, 0.5); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } #pwa-ios-sheet.is-visible { display: flex; } #pwa-ios-sheet .pwa-ios-card { background: #F4F4F2; color: #0E1116; border-radius: 16px 16px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px)); width: 100%; box-sizing: border-box; } #pwa-ios-sheet h3 { margin: 0 0 6px; font: 800 19px/1.15 "Helvetica Neue"; letter-spacing: -0.022em; } #pwa-ios-sheet p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: #5A5F66; } #pwa-ios-sheet ol { margin: 0 0 18px; padding-left: 22px; font-size: 14px; line-height: 1.6; } #pwa-ios-sheet ol b { color: #1158E8; } #pwa-ios-sheet button { width: 100%; appearance: none; cursor: pointer; border: 0; border-radius: 8px; padding: 13px; background: #0E1116; color: #fff; font: 700 15px/1 "Helvetica Neue"; }