/* ========================================================================== BufordCare Mobile Bottom Navigation — floating dark "pill" style - Mobile & tablet only (<= 1024px). Hidden on desktop. - Floating, glassmorphic dark pill with an elevated, glowing center button. - Icon-only (labels kept as screen-reader-only text for accessibility). - ALWAYS visible (stays on scroll, while the menu is open, on every page). - Chat : opens the existing chatbot as a fullscreen, app-like view + Back button. - Menu : opens the ElementsKit menu WITHOUT hiding the bar. - Accent uses the live Elementor brand colour (with the tan brand as fallback). z-index map (mobile): page < ElementsKit menu (1000) < bar (99990) < chatbot fullscreen (1000000) ========================================================================== */ :root { --bcmn-h: 62px; /* pill height */ --bcmn-gap: 16px; /* gap from the screen edges (floating) */ } #bufordcare-mobile-nav { /* Brand accent (live Elementor global → tan brand fallback). */ --bcmn-accent: var(--e-global-color-primary, #997F66); /* Dark glass bar palette (warm near-black, on-brand). */ --bcmn-bar-bg: 26, 22, 19; --bcmn-ink: rgba(255, 255, 255, 0.60); --bcmn-ink-active: #ffffff; display: none; /* desktop: never rendered */ } @media (max-width: 1024px) { /* Reserve room for the floating bar (pre-JS → no CLS). */ body { padding-bottom: calc(var(--bcmn-h) + var(--bcmn-gap) + env(safe-area-inset-bottom, 0px) + 8px) !important; } #bufordcare-mobile-nav { display: flex; position: fixed; left: 50%; bottom: calc(var(--bcmn-gap) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 99990; /* above the ElementsKit menu (1000); below the fullscreen chat */ align-items: stretch; justify-content: space-between; gap: 2px; width: calc(100% - (var(--bcmn-gap) * 2)); max-width: 460px; height: var(--bcmn-h); margin: 0; padding: 0 12px; box-sizing: border-box; background: rgba(var(--bcmn-bar-bg), 0.80); -webkit-backdrop-filter: saturate(165%) blur(20px); backdrop-filter: saturate(165%) blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; box-shadow: 0 16px 36px -12px rgba(18, 14, 11, 0.60), inset 0 1px 0 rgba(255, 255, 255, 0.06); font-family: inherit; overflow: visible; /* let the elevated Chat button float above the pill */ -webkit-tap-highlight-color: transparent; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #bufordcare-mobile-nav { background: rgba(var(--bcmn-bar-bg), 0.96); } } /* Full-height menu on EVERY page: cover the whole viewport (incl. the header) with a solid panel so no page content shows through. ElementsKit sets top+height, so we override both. The floating bar (z 99990) stays above this panel (z 1000) and remains visible/tappable. */ body.bcmn-menu-open .elementskit-navbar-nav-default.active { top: 0 !important; bottom: 0 !important; height: 100vh !important; height: 100dvh !important; max-height: 100vh !important; max-height: 100dvh !important; background: #ffffff !important; } /* Let the menu's scroll area use the full height and clear the floating bar at the end. */ body.bcmn-menu-open .elementskit-navbar-nav-default.active .elementskit-navbar-nav { max-height: 100% !important; padding-bottom: calc(var(--bcmn-h) + var(--bcmn-gap) + env(safe-area-inset-bottom, 0px) + 24px) !important; } /* Keep the menu's own close (X) clear of the notch/status-bar now that it sits at top:0. */ body.bcmn-menu-open .elementskit-navbar-nav-default.active .elementskit-menu-close { top: calc(env(safe-area-inset-top, 0px) + 10px) !important; } /* Hide the header hamburger + pull its column out of flow (header stays balanced). */ .elementskit-menu-hamburger { display: none !important; } [data-bcmn-headercol], .e-con:has(> .elementor-widget-ekit-nav-menu) { position: absolute !important; top: 0 !important; right: 0 !important; width: auto !important; min-width: 0 !important; } /* Remove the duplicate floating chatbot launcher on mobile (kept on desktop). */ #bcc-fab, .bcc-fab, #bcc-fab-bubble, .bcc-fab-bubble { display: none !important; } /* ----- CHAT: fullscreen, app-like takeover ----- */ body.bcmn-chat-open #bcc-widget.bcc-widget-floating { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; height: 100dvh !important; max-width: none !important; max-height: none !important; margin: 0 !important; border-radius: 0 !important; z-index: 1000000 !important; /* above the bar — only the chat + its Back button show */ animation: bcmn-chat-in 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes bcmn-chat-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } body.bcmn-chat-open .bcmn-chat-back { display: inline-flex !important; } body.bcmn-chat-open .bcc-minimize { display: none !important; } } /* Back button injected into the chat header (hidden until fullscreen). Scoped under .bcc-widget-header with !important so the chatbot's own header-button styles (which otherwise force padding + collapse the SVG to 0 width) cannot override it. */ .bcc-widget-header .bcmn-chat-back { display: none; box-sizing: border-box !important; align-items: center; justify-content: center; flex: 0 0 auto !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; margin: 0 10px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.16) !important; color: #fff !important; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease, transform 0.15s ease; } .bcc-widget-header .bcmn-chat-back:hover { background: rgba(255, 255, 255, 0.26) !important; } .bcc-widget-header .bcmn-chat-back:active { transform: scale(0.9); } .bcc-widget-header .bcmn-chat-back svg { width: 22px !important; height: 22px !important; min-width: 22px !important; flex: 0 0 auto !important; display: block !important; stroke: currentColor !important; } /* ---- items (icon-only) ---- */ #bufordcare-mobile-nav .bcmn__item { position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; color: var(--bcmn-ink); font: inherit; text-decoration: none; cursor: pointer; border-radius: 999px; -webkit-appearance: none; appearance: none; touch-action: manipulation; transition: color 0.25s ease, transform 0.18s ease; } #bufordcare-mobile-nav .bcmn__item:active { transform: scale(0.9); } #bufordcare-mobile-nav .bcmn__icon { position: relative; display: grid; place-items: center; width: 26px; height: 26px; } #bufordcare-mobile-nav .bcmn__svg { width: 24px; height: 24px; display: block; transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1); } /* soft halo behind the active icon (light, for the dark bar) */ #bufordcare-mobile-nav .bcmn__icon::after { content: ""; position: absolute; inset: -9px -14px; border-radius: 999px; background: #ffffff; opacity: 0; transform: scale(0.5); transition: opacity 0.28s ease, transform 0.28s ease; z-index: -1; } /* icon-only: labels become screen-reader-only (kept for a11y) */ #bufordcare-mobile-nav .bcmn__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* active / open states. NOTE: the Menu button is a toggle ACTION, not a destination — it deliberately gets NO lit/highlight state, so it never double-highlights alongside the current-page item (e.g. when you're on Booking/Login and open the menu). Hence :not([data-bcmn="menu"]). */ #bufordcare-mobile-nav .bcmn__item.is-active, #bufordcare-mobile-nav .bcmn__item.is-open:not([data-bcmn="menu"]), #bufordcare-mobile-nav .bcmn__item[aria-current="page"] { color: var(--bcmn-ink-active); } #bufordcare-mobile-nav .bcmn__item.is-active .bcmn__svg, #bufordcare-mobile-nav .bcmn__item.is-open:not([data-bcmn="menu"]) .bcmn__svg { transform: scale(1.08); } #bufordcare-mobile-nav .bcmn__item.is-active .bcmn__icon::after, #bufordcare-mobile-nav .bcmn__item.is-open:not([data-bcmn="menu"]) .bcmn__icon::after { opacity: 0.16; transform: scale(1); } /* ----- CHAT TAB: elevated, glowing center button (like the reference) ----- */ #bufordcare-mobile-nav .bcmn__item--chat .bcmn__icon { width: 52px; height: 52px; margin-top: -22px; /* lift it above the pill */ border-radius: 50%; background-color: var(--bcmn-accent); background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.26), rgba(0, 0, 0, 0.16)); box-shadow: 0 8px 20px -4px rgba(153, 127, 102, 0.75), /* brand-tan glow */ 0 0 0 5px rgba(var(--bcmn-bar-bg), 0.92), /* ring matches the bar → "cut-out" look */ 0 2px 6px rgba(0, 0, 0, 0.35); transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.22s ease; } #bufordcare-mobile-nav .bcmn__item--chat .bcmn__svg { width: 26px; height: 26px; color: #fff; } #bufordcare-mobile-nav .bcmn__item--chat .bcmn__icon::after { display: none; } #bufordcare-mobile-nav .bcmn__item--chat:active .bcmn__icon { transform: translateY(-1px) scale(0.95); } #bufordcare-mobile-nav .bcmn__item--chat.is-open .bcmn__icon { box-shadow: 0 6px 16px -4px rgba(153, 127, 102, 0.85), 0 0 0 5px rgba(var(--bcmn-bar-bg), 0.92); } /* keyboard focus */ #bufordcare-mobile-nav .bcmn__item:focus-visible { outline: 2px solid var(--bcmn-accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { #bufordcare-mobile-nav, #bufordcare-mobile-nav *, body.bcmn-chat-open #bcc-widget.bcc-widget-floating { animation: none !important; transition: none !important; } } @media print { #bufordcare-mobile-nav { display: none !important; } }