/* kv_bottomnav_safe.css * --------------------------------------------------------------------------- * ONE convention for "nothing hides behind the mobile bottom navigation". * * The bottom nav is `.kv-bottom-nav` (rendered by incfiles/footerbase.php, * `d-md-none` so it only exists below 768px). Its geometry used to be repeated * as magic numbers (76px / 82px / 74px / 62px / 68px / 88px …) in a dozen * places, and every floating control invented its own z-index — which is why * the Cookie Consent buttons, the processing toast, the app-promo banner and * the compare bar all ended up UNDER the nav and could not be tapped. * * Everything now derives from these variables: * * --kv-topbar-h fixed header height on mobile * --kv-bottomnav-h rendered nav height (0 where the nav does not exist) * --kv-bottomnav-safe nav height + the iOS home-indicator inset * --kv-bottomnav-gap standard breathing room a floating control keeps * --kv-z-bottomnav the nav's own stacking level * --kv-z-above-bottomnav floating controls / banners / FABs * --kv-z-bottomsheet bottom sheets & drawers that must cover the nav * * HOW TO USE IT (do not hardcode pixels again): * - a fixed control anchored to the bottom -> add class `kv-above-bottomnav` * - a page container that scrolls to the end -> add class `kv-bottomnav-pad` * - a new bottom sheet -> `bottom: var(--kv-bottomnav-safe); * z-index: var(--kv-z-bottomsheet);` * * THE Z LADDER (the root cause of "everything hides behind the toolbar"). * The nav was pinned at z-index 2147483000 — effectively INT_MAX — in BOTH * assets/css/kv_topbar_mobile.css and assets/css/auth-common.css, so literally * nothing could paint above it: cookie consent, toasts, dropdowns, sticky * action bars and (on pages with a small modal layer) even dialogs. This file * loads last on every page that renders the nav, so it restates the nav at the * Bootstrap "fixed" level and everything else falls into place: * * 1020 Bootstrap sticky * 1030 --kv-z-bottomnav .kv-bottom-nav * 1035 --kv-z-above-bottomnav banners, FABs, snackbars, back-to-top * 1038 --kv-z-bottomsheet quick-settings / tour / footer sheets * 1040 Bootstrap offcanvas-backdrop * 1045 Bootstrap offcanvas * 1050 Bootstrap modal-backdrop * 1055 Bootstrap modal (and the app's 30050 / 100050 / 2147483620 layers) * 1070 popover 1080 tooltip * * Section 4 additionally demotes these overlays while a dialog is open, so a * control raised above the nav can never end up above a modal. * * Loaded once by incfiles/_topbar.php, incfiles/_kx_public_header.php and * incfiles/footerbase.php (see incfiles/_kv_bottomnav_css.php). * ------------------------------------------------------------------------- */ :root { --kv-topbar-h: 0px; --kv-bottomnav-h: 0px; --kv-bottomnav-gap: 12px; --kv-bottomnav-safe: calc(var(--kv-bottomnav-h) + env(safe-area-inset-bottom, 0px)); --kv-z-bottomnav: 1030; --kv-z-above-bottomnav: 1035; --kv-z-bottomsheet: 1038; } /* Header height: kv_topbar_mobile.css pins #kt_app_header to min-height 58px below 992px (and body gets the matching padding-top). */ @media (max-width: 991.98px) { :root { --kv-topbar-h: 58px; } } /* Nav height: measured at 76px on production (390x844, mydashboard.php). The old 450px "compact" tier claimed 62px, which under-reserved space on exactly the phones that need it most — one value for the whole mobile range. */ @media (max-width: 767.98px) { :root { --kv-bottomnav-h: 76px; } } /* The single declaration of the nav's stacking level. This file is emitted after kv_topbar_mobile.css, auth-common.css and keen_polish.css on every page that renders the nav, so this is the value that wins. */ .kv-bottom-nav { z-index: var(--kv-z-bottomnav) !important; } /* =========================================================================== 1. The reusable helpers ======================================================================== */ .kv-above-bottomnav { bottom: calc(var(--kv-bottomnav-safe) + var(--kv-bottomnav-gap)) !important; } .kv-bottomnav-pad { padding-bottom: calc(var(--kv-bottomnav-safe) + var(--kv-bottomnav-gap)) !important; } @media (max-width: 767.98px) { .kv-above-bottomnav { z-index: var(--kv-z-above-bottomnav) !important; } /* Full-bleed bars sit flush on top of the nav instead of floating above it. */ .kv-above-bottomnav-flush { bottom: var(--kv-bottomnav-safe) !important; z-index: var(--kv-z-above-bottomnav) !important; } /* The page itself must be able to scroll past the nav. kv_topbar_mobile.css and keen_polish.css already reserve a flat 76px; this restates it from the variable and adds the home-indicator inset on top. */ body { padding-bottom: calc(var(--kv-bottomnav-safe) + 4px); } } /* =========================================================================== 2. Shared chrome that lives at the bottom of every page ======================================================================== */ /* Cookie consent (incfiles/footerbase.php) — the founder's named case, and the clearest example of why this file exists. Measured on production before the fix (mydashboard.php, 390px wide, viewport 749px): #kvCookieBanner bottom: 0px z-index: 2070 .kv-bottom-nav top: 673px height: 76px z-index: 2147483000 #kvCookieAccept spans 671–707px document.elementFromPoint() -> A.kv-bottom-nav-item So it failed TWICE over, and both had to be fixed: 1. GEOMETRY — the button sat at 671–707px while the nav starts at 673px, i.e. physically inside the nav band. (`body { padding-bottom: 76px }` already existed, but body padding only reserves space in document flow and does nothing whatsoever for a position:fixed overlay — which is the entire class of bug this file addresses.) 2. STACKING — 2070 is a perfectly real z-index, but the nav's 2147483000 beat it, so the nav literally owned the pixel and swallowed the tap. NB: --kv-z-toast is NOT undefined on pages without koovira_zindex.css — it is declared as 2070 in assets/css/style.bundle.css, the site-wide theme bundle. The `2070` below is therefore only a defensive fallback, not the fix; the fix is the nav dropping to --kv-z-bottomnav plus the offset in the block below. */ #kvCookieBanner { z-index: var(--kv-z-toast, 2070); } @media (max-width: 767.98px) { #kvCookieBanner, .kv-global-announce { bottom: var(--kv-bottomnav-safe) !important; z-index: var(--kv-z-above-bottomnav) !important; } /* 375px: the card + three buttons need to breathe, and the outer .container gutters waste width the buttons need. */ #kvCookieBanner { padding: .5rem !important; } #kvCookieBanner > .container { padding-left: 0; padding-right: 0; max-width: 100%; } #kvCookieBanner .card-body { padding: .85rem .9rem; gap: .6rem !important; } #kvCookieBanner .card-body > div:last-child { width: 100%; } #kvCookieBanner .card-body .btn { flex: 1 1 auto; min-height: 40px; } /* Processing snackbar (incfiles/footerbase.php) — was bottom:18px, and its 560px breakpoint left 561–767px sitting inside the nav band. */ .kv-proc-bar { bottom: calc(var(--kv-bottomnav-safe) + var(--kv-bottomnav-gap)) !important; z-index: var(--kv-z-above-bottomnav) !important; } /* Profile-completion nudge (footerbase) and the app-promo card (assets/newjs/kv_app_promo.js) both position themselves inline. */ #kvProfileNudge, #kvAppPromo { bottom: calc(var(--kv-bottomnav-safe) + var(--kv-bottomnav-gap)) !important; z-index: var(--kv-z-above-bottomnav) !important; } /* Bottom sheets rendered by footerbase — they were already lifted with magic numbers; re-express them through the variable and put them on the ladder so a tall sheet can never be clipped by the nav. */ .kv-mobile-settings-sheet, .kv-tour-sheet, .kv-footer-sheet { bottom: calc(var(--kv-bottomnav-safe) + 6px) !important; z-index: var(--kv-z-bottomsheet) !important; max-height: calc(100dvh - var(--kv-bottomnav-safe) - 90px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .kv-mobile-settings-backdrop { z-index: calc(var(--kv-z-bottomsheet) - 1) !important; } /* QA overlay (dev only) — keep it on the same contract. */ #kvQaOverlay { bottom: calc(var(--kv-bottomnav-safe) + var(--kv-bottomnav-gap)) !important; } /* Public slide-in menu (incfiles/_kx_offcanvas.php) — a full-height fixed drawer whose footer "Log in" / "Join Koovira" buttons ended flush at bottom:0, i.e. inside the nav band. Its own z (100091) already clears the nav now, so only the geometry needs fixing. */ .kx-oc-foot { padding-bottom: calc(14px + var(--kv-bottomnav-safe)) !important; } /* Bootstrap's own bottom bar utility — a fixed-bottom bar under the nav is always wrong on a phone. */ .fixed-bottom { bottom: var(--kv-bottomnav-safe) !important; z-index: var(--kv-z-above-bottomnav) !important; } /* Dropdowns opened near the bottom of the viewport must clear the nav so the last option stays tappable. */ .dropdown-menu.show, .menu-sub-dropdown.show { max-height: calc(100dvh - var(--kv-bottomnav-safe) - 120px); overflow-y: auto; -webkit-overflow-scrolling: touch; } } /* =========================================================================== 3. Page-level floating controls found in the bottom-occlusion sweep ======================================================================== */ @media (max-width: 767.98px) { /* Services hub / provider hub compare bar — a sticky action bar at bottom:0, z 1050: entirely behind the nav. */ .kv-compare-bar { bottom: var(--kv-bottomnav-safe) !important; z-index: var(--kv-z-above-bottomnav) !important; } /* Support widget (cpages/myaccount/support/support.php) — FAB + chat shell. */ .kv-support-bubble { bottom: calc(var(--kv-bottomnav-safe) + var(--kv-bottomnav-gap)) !important; z-index: var(--kv-z-above-bottomnav) !important; } /* The shell keeps its own z (1050 / overlay 1045 — both clear the nav now); only its geometry needed fixing, so it no longer runs under the nav. */ .kv-support-shell { bottom: calc(var(--kv-bottomnav-safe) + var(--kv-bottomnav-gap)) !important; max-height: calc(100dvh - var(--kv-bottomnav-safe) - 24px) !important; height: min(760px, calc(100dvh - var(--kv-bottomnav-safe) - 24px)) !important; } /* Commerce product list mobile filter FAB. */ .filter-float-btn { bottom: calc(var(--kv-bottomnav-safe) + var(--kv-bottomnav-gap)) !important; z-index: var(--kv-z-above-bottomnav) !important; } /* Back-to-top progress ring (faqbase/assets/css/backToTop.css, z-index 99). */ .progress-wrap { bottom: calc(var(--kv-bottomnav-safe) + var(--kv-bottomnav-gap)) !important; right: 18px !important; z-index: var(--kv-z-above-bottomnav) !important; } } /* =========================================================================== 4. Dialogs always win Belt-and-braces on top of the ladder above: demote the bottom-anchored overlays while a dialog is open, so none of them can fight a modal even on pages whose modal layer is only Bootstrap's 1055 (the cookie banner's own 2070 default used to beat it, which is how the "Customize" dialog could open behind its own banner). Mirrors what assets/css/kv_modal_fix.css already does for the fixed chrome. ======================================================================== */ body.modal-open #kvCookieBanner, body.modal-open #kvAppPromo, body.modal-open #kvProfileNudge, body.modal-open .kv-global-announce, body.modal-open .kv-compare-bar, body.modal-open .kv-support-bubble, body.modal-open .filter-float-btn, body.modal-open .progress-wrap, body.modal-open .kv-above-bottomnav, body.modal-open .kv-above-bottomnav-flush, body.offcanvas-open #kvCookieBanner, body.offcanvas-open .kv-above-bottomnav, body.offcanvas-open .kv-above-bottomnav-flush { z-index: 100 !important; } /* =========================================================================== 5. Sidebar / drawer scrolling Mobile is handled by the drawer rules in kv_topbar_mobile.css plus the scoped