/* 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; } /* ---- top utility bar: drop the "Fully Licensed / Dulux Accredited / social" strip on mobile (that info already lives in the hero). In standalone the bar keeps only its dark safe-area strip (content hidden) so the white status-bar text stays readable over a dark backdrop. ---- */ html.pv-app [data-nav-root] > div:first-child > div { display: none !important; } html.pv-app [data-nav-root] > div:first-child { border-bottom: none !important; background: transparent !important; } @media (display-mode: standalone) { /* the strip sitting directly behind the iOS status icons — kept solid and dark so the clock/battery stay readable, and matched to the top of the glass bar below it so the two read as one surface */ html.pv-app [data-nav-root] > div:first-child { background: #0C1520 !important; } } /* ---- Safari-integrated top bar (Neil 25 Jul): the bar adopts Safari's own dark-chrome gray (#1C1C1E — matches the theme-color meta so Safari's pill area and our bar read as ONE surface), blending to a lighter gray at its base. Logo + hamburger go white. "Can't beat them, join them." ---- */ html.pv-app [data-nav-root] > nav { border-bottom: none !important; position: relative; /* Solid at the very top so the iOS status glyphs keep a dark backing, then progressively transparent so the bar reads as glass over the page rather than a black slab. Navy-tinted to sit with the brand, not near-black. */ background: linear-gradient(180deg, rgba(12,21,32,0.97) 0%, rgba(14,27,42,0.93) 34%, rgba(19,40,61,0.86) 74%, rgba(22,49,74,0.78) 100%) !important; -webkit-backdrop-filter: blur(22px) saturate(165%) !important; backdrop-filter: blur(22px) saturate(165%) !important; box-shadow: inset 0 -1px 0 rgba(255,255,255,0.14) !important; /* sticky so page content slides UNDER the glass — that is what makes the blur visible and stops the bar reading as a separate black slab */ position: sticky !important; top: 0; z-index: 900; } /* Fallback where the OS/browser can't frost: lean opaque so the logo still reads. */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { html.pv-app [data-nav-root] > nav { background: linear-gradient(180deg, #0C1520 0%, #12263C 62%, #16314A 100%) !important; } } /* white logo with brand-green tick — generated from the original (assets/proview-logo-white.png); replace that file if Neil supplies art */ html.pv-app [data-nav-root] > nav img { content: url("assets/proview-logo-white.png"); height: 36px !important; /* the bar is translucent now — this keeps the mark legible if something light scrolls underneath it */ filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6)) drop-shadow(0 0 12px rgba(0,0,0,0.35)); } /* first-of-type ONLY — the hamburger dropdown is also a direct div child of nav; an unscoped height squashes it so its white bg vanishes (v63 bug) */ html.pv-app [data-nav-root] > nav > div:first-of-type { height: 42px !important; } /* hamburger lines → white */ html.pv-app .pv-burger span { background: #FFFFFF !important; box-shadow: 0 1px 3px rgba(0,0,0,0.55); } /* blend the bar's base into the page: dark gray -> gray -> a whisper of white, dying out right below the bar (Neil's mark) — not a thick band */ /* No blend band under the bar — the old white strip read as a hard seam. The bar's own inset hairline is the edge; the reserved block below carries the navy fade into the page. */ html.pv-app [data-nav-root] > nav::after { display: none !important; } /* the nav's placeholder block reserves 91px (old trust-strip layout) — shrink it so the page content rises to meet the blend just under the bar */ html.pv-app div.sc-host:has([data-nav-root]) { height: 46px !important; /* the reserved block is a few px taller than the bar; without this the page's white background shows through as a hard seam under the header */ background: linear-gradient(180deg, rgba(18,38,58,0.94) 0%, rgba(18,38,58,0.90) 90%, rgba(18,38,58,0) 100%) !important; } /* ---- In a normal browser (Safari / Chrome), not the installed app ---- Safari draws its own white status band above the page and will not tint it, so instead of fighting it the bar MATCHES it: white frosted glass, with the logo and burger flipped dark so they stand out. The installed app keeps the dark treatment above, because there the status glyphs are white. ---- */ @media (display-mode: browser) { html.pv-app [data-nav-root] > nav { background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.80) 55%, rgba(248,251,253,0.68) 100%) !important; -webkit-backdrop-filter: blur(22px) saturate(180%) !important; backdrop-filter: blur(22px) saturate(180%) !important; box-shadow: inset 0 -1px 0 rgba(22,49,74,0.10) !important; } @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { html.pv-app [data-nav-root] > nav { background: #FFFFFF !important; } } /* dark mark on the light bar */ html.pv-app [data-nav-root] > nav img { content: url("assets/proview-logo-tight.png") !important; filter: none !important; } html.pv-app .pv-burger span { background: #16314A !important; box-shadow: none; } /* the reserved block under the bar fades white, not navy */ html.pv-app div.sc-host:has([data-nav-root]) { background: linear-gradient(180deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.72) 90%, rgba(255,255,255,0) 100%) !important; } /* the utility strip above the bar carries the same white */ html.pv-app [data-nav-root] > div:first-child { background: rgba(255,255,255,0.92) !important; } } }