html.native-app footer{display:none !important} /* App Store / Play rules: no selling digital goods via external payment INSIDE the native apps. `.web-only` hides purchase/upgrade UI in the app (shown on web/PWA); `.native-only` shows an "manage on the web" pointer only in the app. */ .native-only{display:none} html.native-app .web-only{display:none !important} html.native-app .native-only{display:block} /* Android 15 / iOS draw the app edge-to-edge (under the status bar & camera cutout). Pad the top nav by the safe-area inset so the header/banner sits BELOW the camera, and keep the sides/bottom clear too. env() is 0 on the web, so this is a no-op in a desktop browser. */ /* Match the app background so empty space / overscroll shows the app colour, not teal. Teal appears only in the fixed top strip (status bar) below. */ /* The pre-paint --bg bootstrap lives inline in base.html before this stylesheet. */ html{ scrollbar-gutter:stable; } /* reserve the scrollbar space always so pages don't shift the nav by ~15px */ /* Stop iOS rubber-band overscroll from dragging the pinned top banner / bottom nav out of place at the extremes of the page. */ body{ overscroll-behavior-y:none; } /* iOS APP ONLY: native WKWebView ignores overscroll-behavior on its ROOT scroller, so bounces=false never stuck. Lock the document (html) and make a NON-root scroller — overscroll-behavior:none IS honoured there, so the WebView has nothing to rubber-band and the fixed bars can't move. The teal strips / bottom nav are position:fixed (viewport-relative) so they're unaffected; .nav is sticky inside the body scroller. Web/Android untouched. */ html.ios-app{ overflow:hidden; background:var(--bg); } /* is a FIXED, edge-to-edge (viewport-fit:cover) scroller painted with the app background — so it covers the WHOLE screen (no native teal showing at the bottom) while overscroll-behavior:none on this non-root scroller kills the WebView rubber-band. Fixed bars (nav sticky / botnav / top strip) sit relative to this full-viewport body. */ html.ios-app body{ position:fixed; top:0; right:0; bottom:0; left:0; overflow-y:auto; overscroll-behavior:none; -webkit-overflow-scrolling:touch; background:var(--bg); } /* No bottom teal strip in the app (iOS has no bottom system buttons). */ html.ios-app body::after{ display:none !important; } /* Keep the top banner pinned while scrolling (incl. mobile, which CSS made relative). */ .nav{ padding-top: env(safe-area-inset-top); position:sticky !important; top:0 !important; z-index:50; } body{ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } main.container{ padding-bottom: calc(60px + env(safe-area-inset-bottom)); } /* Teal strips behind the system status bar (top) AND navigation bar (bottom) so the clock/reception and the nav buttons (white system icons) stay visible. */ body::before{ content:''; position:fixed; top:0; left:0; right:0; height: env(safe-area-inset-top); background:#118173; z-index:1000; pointer-events:none; } body::after{ content:''; position:fixed; bottom:0; left:0; right:0; height: env(safe-area-inset-bottom); background:#118173; z-index:1000; pointer-events:none; } :root{ --safe-bottom: env(safe-area-inset-bottom); } /* Mobile bottom navigation bar (app + small screens). Tuned to MIRROR the React Native app's TabBar (allquote-rn/components/TabBar.js): a translucent dark dock, a hairline top border, an active "soft teal" pill behind the icon (radius 13, the app's iconWrap), tight 10px labels, and a lifted, ringed, gradient FAB in the centre. Values track the RN StyleSheet 1:1 so the two read the same. All colour from the theme tokens, so light/dark parity is automatic. */ .botnav{ display:none; } @media (max-width:720px){ /* App-shell bottom tabs render ONLY inside the native app. On a mobile BROWSER the site falls back to the top bar + drawer, so it reads as the website, not the deprecated app. */ html.is-native .botnav, html.native-app .botnav{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:95; background:var(--card); border-top:1px solid var(--line); box-shadow:0 -6px 22px rgba(2,6,23,.10); padding:10px 10px 0; /* app TabBar: paddingTop 10 / paddingHorizontal 10 */ padding-bottom: env(safe-area-inset-bottom); } .botnav a{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:0 2px 8px; text-decoration:none; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.1px; line-height:1.1; position:relative; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; } .botnav a span{ max-width:64px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .botnav a.bn-cta{ color:var(--teal); } .botnav a.active{ color:var(--teal); } /* current tab: teal icon + label */ /* Active tab: a soft-teal pill behind the icon — the app's iconWrap (paddingHorizontal 14 / paddingVertical 3 / borderRadius 13 on brandSoft). Inactive icons get matching padding so labels never shift on selection. */ .botnav a .ic{ padding:3px 14px; border-radius:13px; box-sizing:content-box; transition:background .15s; } .botnav a.active:not(.bn-cta) .ic{ background:var(--brand-soft); } /* app iconWrap brandSoft */ /* Centre FAB: the app's lifted gradient circle (RN: 58px, -26 lift, 3px ring in the bar colour, teal glow). The glyph keeps its natural 24px size; the circle is built from padding around it (box-sizing:content-box) so it never stretches. A teal→deep-teal gradient + white glyph reads as the app's create button. */ .botnav a.bn-cta .ic{ padding:9px; box-sizing:content-box; background:linear-gradient(160deg,var(--teal),var(--teal-dark)); color:#fff; border-radius:50%; margin-top:-22px; border:3px solid var(--card); box-shadow:0 6px 16px color-mix(in srgb,var(--teal) 55%,transparent); } .botnav a.bn-cta.active .ic{ background:linear-gradient(160deg,var(--teal),var(--teal-dark)); } .botnav .bn-dot{ position:absolute; top:1px; left:50%; margin-left:5px; width:8px; height:8px; background:#ef4444; border-radius:50%; border:1.5px solid var(--card); } html.is-native main.container, html.native-app main.container{ padding-bottom: calc(82px + env(safe-area-inset-bottom)); } /* Home/Create/Messages/Alerts stay OUT of the mobile top bar in BOTH the native app (botnav owns them) and the browser (the left drawer owns them) — a clean, website-like header. */ .bn-hide-mobile{ display:none !important; } /* The bottom nav now owns the bottom of the screen (its bg + safe-area padding fills down to the home indicator / system bar), so drop the teal bottom strip. */ body::after{ display:none !important; } } /* Shared circular avatar — profile photos, asset + equipment icons (see _avatar.html). Always a scaled CIRCLE with a neutral fallback (kind icon or initials), theme-aware. */ .aq-avatar{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%; overflow:hidden; flex:0 0 auto; line-height:1; font-weight:800; background:var(--teal-light,#e2f1ef); color:var(--teal,#118173); border:1px solid var(--line); } .aq-avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .aq-avatar svg{ width:58%; height:58%; opacity:.8; } .aq-avatar .aq-avatar-txt{ text-transform:uppercase; }