/* Proview Painting — PWA standalone-mode styles. * EVERY rule is scoped to (display-mode: standalone) — i.e. the site opened * from the Home-Screen icon. Normal mobile Safari/Chrome and desktop are * completely unaffected. */ @media (display-mode: standalone) { /* iPhone notch / status bar: the app draws edge-to-edge (viewport-fit=cover + black-translucent). Pad the fixed nav's dark trust bar so its glassy navy extends up under the status icons, and push the page content down by the same amount so nothing hides under the taller nav. */ [data-nav-root] > div:first-child { padding-top: env(safe-area-inset-top); } body { padding-top: env(safe-area-inset-top); } /* Keep the last of the page clear of the iPhone home indicator. */ body { padding-bottom: env(safe-area-inset-bottom); } /* Keep the canvas white. IMPORTANT: in this DC runtime the page content overflows a viewport-height (#dc-root), so ANY non-white html background leaks behind every transparent section below the first screen. Do not put a dark background on html here. */ html { background-color: #FFFFFF; } /* Small native-app feel touches. */ html { -webkit-tap-highlight-color: transparent; } body { -webkit-touch-callout: none; overscroll-behavior-y: none; } } /* ============================================================ Bottom tab bar — installed app (or ?app=1 preview) ONLY. html.pv-app is added by pwa-app.js. Hidden entirely on desktop (>820px) and on the normal mobile website. ============================================================ */ .pvTab { display: none; } @media (max-width: 820px) { html.pv-app .pvTab { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; align-items: stretch; justify-content: space-around; background: rgba(13, 28, 43, 0.96); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); } /* brand gradient hairline along the top edge — the Proview stripe */ html.pv-app .pvTab::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2.5px; background: linear-gradient(90deg, #16314A, #2E7DB8 50%, #8DC63F); } html.pv-app .pvTab-item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px 4px; color: #9DB2C7; text-decoration: none; -webkit-tap-highlight-color: transparent; } html.pv-app .pvTab-icon { width: 23px; height: 23px; display: block; } html.pv-app .pvTab-icon svg { width: 100%; height: 100%; display: block; } html.pv-app .pvTab-label { font-family: 'Public Sans', -apple-system, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; } html.pv-app .pvTab-item.is-active { color: #8DC63F; } /* centre Quote button — raised gradient circle, on-brand */ html.pv-app .pvTab-center { position: relative; } html.pv-app .pvTab-center .pvTab-icon { width: 46px; height: 46px; margin-top: -22px; border-radius: 50%; background: linear-gradient(135deg, #2E7DB8, #73BE3F); border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: 0 8px 22px rgba(46, 125, 184, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35); display: flex; align-items: center; justify-content: center; color: #fff; } html.pv-app .pvTab-center .pvTab-icon svg { width: 22px; height: 22px; } html.pv-app .pvTab-center .pvTab-label { color: #C2D2DF; } html.pv-app .pvTab-center.is-active .pvTab-label { color: #8DC63F; } /* keep the page end clear of the fixed bar (footer padding, not body — body is viewport-height in this DC runtime, see note above) */ html.pv-app footer { padding-bottom: calc(30px + 72px + env(safe-area-inset-bottom)) !important; } }