/* ============================================================ MOMO MOBILE FOOTER — GLOBAL ============================================================ */ /* Nu acoperim niciodată Cart / Checkout */ @media (max-width: 768px) { body.woocommerce-cart #bb-mobile-footer, body.woocommerce-checkout #bb-mobile-footer { display: none !important; } body.bb-no-mobile-footer #bb-mobile-footer { display: none !important; } } /* Never create horizontal overflow */ #bb-mobile-footer { max-width: calc(100vw - 20px); } /* ============================================================ MOMO ȘI PRIETENII MOBILE FLOATING NAV Premium / iPhone / App-like UI BLUE GLASS + FLOATING ============================================================ */ /* ------------------------------------------------------------ DESKTOP — Hide Mobile Footer ------------------------------------------------------------ */ @media (min-width: 769px) { #bb-mobile-footer { display: none !important; } } /* ------------------------------------------------------------ MOBILE ------------------------------------------------------------ */ @media (max-width: 768px) { /* ======================================================== FLOATING NAV ======================================================== */ #bb-mobile-footer { position: fixed; left: 10px; right: 10px; bottom: calc( 10px + env(safe-area-inset-bottom) ); width: auto; height: 74px; padding: 7px 8px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-around; /* ---------------------------------------------------- PREMIUM BLUE GLASS ---------------------------------------------------- */ background: linear-gradient( 135deg, rgba(12, 23, 100, .96) 0%, rgba(27, 51, 165, .93) 50%, rgba(13, 25, 105, .97) 100% ); /* * iOS-style glass */ backdrop-filter: blur(18px) saturate(165%); -webkit-backdrop-filter: blur(18px) saturate(165%); /* * Floating pill */ border-radius: 999px; /* * Foarte subtil. * Nu vrem să pară o linie. */ border: 1px solid rgba(255,255,255,.10); /* * Floating depth */ box-shadow: 0 18px 40px rgba(5, 10, 65, .30), 0 7px 18px rgba(5, 10, 65, .20), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.08); overflow: visible; z-index: 999999; isolation: isolate; /* * Smooth rendering */ transform: translateZ(0); will-change: transform; } /* ======================================================== GLASS TOP HIGHLIGHT ======================================================== */ #bb-mobile-footer::before { content: ""; position: absolute; left: 8%; right: 8%; top: 1px; height: 35px; border-radius: 999px; pointer-events: none; background: linear-gradient( to bottom, rgba(255,255,255,.10), rgba(255,255,255,.035), rgba(255,255,255,0) ); filter: blur(5px); opacity: .8; z-index: -1; } /* ======================================================== AMBIENT BLUE GLOW ======================================================== */ #bb-mobile-footer::after { content: ""; position: absolute; left: -15%; right: -15%; top: -38px; height: 75px; border-radius: 50%; pointer-events: none; background: radial-gradient( ellipse at center, rgba(75,105,245,.24) 0%, rgba(60,85,220,.13) 30%, rgba(45,65,190,.06) 55%, rgba(30,45,150,0) 75% ); filter: blur(18px); opacity: .8; z-index: -2; animation: momoNavGlow 8s ease-in-out infinite; } /* ======================================================== AMBIENT GLOW ANIMATION ======================================================== */ @keyframes momoNavGlow { 0%, 100% { opacity: .55; transform: scaleX(.94) translateY(2px); } 50% { opacity: .9; transform: scaleX(1.05) translateY(-3px); } } /* ======================================================== NAV ITEMS ======================================================== */ #bb-mobile-footer .bb-mobile-item { position: relative; flex: 1; height: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: var(--bb-footer-inactive-color); transition: color .25s ease, transform .28s cubic-bezier(.2,.8,.2,1); -webkit-tap-highlight-color: transparent; } /* ======================================================== ICON ======================================================== */ #bb-mobile-footer .bb-icon { display: flex; align-items: center; justify-content: center; width: var(--bb-footer-icon-size); height: var(--bb-footer-icon-size); flex: none; color: inherit; transition: transform .30s cubic-bezier(.2,.8,.2,1), opacity .25s ease, filter .25s ease; } /* ======================================================== SVG ======================================================== */ #bb-mobile-footer .bb-icon svg { display: block; width: 100%; height: 100%; stroke: currentColor; fill: none; } /* ======================================================== LABEL ======================================================== */ #bb-mobile-footer .bb-mobile-item span:last-child { font-size: var(--bb-footer-font-size); line-height: 1; font-weight: 600; letter-spacing: .01em; white-space: nowrap; opacity: .94; } /* ======================================================== LEGACY ACTIVE CLASS SAFETY Older cached JS used .active. It must never control the visual state anymore, otherwise a stale Video state can remain yellow. v1.2.0 uses .bb-current exclusively. ======================================================== */ #bb-mobile-footer .bb-mobile-item.active:not(.bb-current) { color: var(--bb-footer-inactive-color) !important; } #bb-mobile-footer .bb-mobile-item.active:not(.bb-current)::after { content: none !important; } /* ======================================================== ACTIVE ITEM ======================================================== */ #bb-mobile-footer .bb-mobile-item.bb-current { color: var(--bb-footer-active-color); } /* ======================================================== ACTIVE ICON ======================================================== */ #bb-mobile-footer .bb-mobile-item.bb-current .bb-icon { transform: translateY(-2px) scale(1.06); filter: drop-shadow( 0 2px 8px rgba(255,255,255,.13) ); } /* ======================================================== ACTIVE PILL / INDICATOR ======================================================== */ #bb-mobile-footer .bb-mobile-item.bb-current::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 20px; height: 3px; border-radius: 999px; transform: translateX(-50%); background: currentColor; opacity: .65; filter: blur(.3px); } /* ======================================================== TOUCH FEEDBACK ======================================================== */ #bb-mobile-footer .bb-mobile-item:active { transform: scale(.93); } #bb-mobile-footer .bb-mobile-item:active .bb-icon { transform: scale(.94); } /* ======================================================== NO LABELS ======================================================== */ #bb-mobile-footer.no-labels .bb-mobile-item { justify-content: center; gap: 0; } #bb-mobile-footer.no-labels .bb-icon { margin-top: 0; } /* ======================================================== SAFE AREA — iPHONE ======================================================== */ @supports ( padding-bottom: env(safe-area-inset-bottom) ) { #bb-mobile-footer { bottom: calc( 10px + env(safe-area-inset-bottom) ); } } /* ======================================================== SMALL PHONES ======================================================== */ @media (max-width: 380px) { #bb-mobile-footer { left: 8px; right: 8px; height: 70px; padding: 6px 6px; } #bb-mobile-footer .bb-mobile-item { gap: 3px; } #bb-mobile-footer .bb-mobile-item span:last-child { font-size: 11px; } } /* ======================================================== REDUCE MOTION ======================================================== */ @media (prefers-reduced-motion: reduce) { #bb-mobile-footer, #bb-mobile-footer *, #bb-mobile-footer::before, #bb-mobile-footer::after { animation: none !important; transition: none !important; } } } /* ============================================================ BELLSABI BUILDER 1.1 — CUSTOM FOOTER ICON SUPPORT ============================================================ */ #bb-mobile-footer .bb-icon .bb-custom-icon { display: block; width: 100%; height: 100%; object-fit: contain; } /* ============================================================ BELLSABI BUILDER 1.3.0 — AUTHORITATIVE ACTIVE STATE Only data-bb-current="1" may be yellow. Old .active/.bb-current classes are intentionally neutralized to defeat cached JS. ============================================================ */ @media (max-width: 768px) { #bb-mobile-footer .bb-mobile-item, #bb-mobile-footer .bb-mobile-item.active, #bb-mobile-footer .bb-mobile-item.bb-current, #bb-mobile-footer .bb-mobile-item[aria-current] { color: var(--bb-footer-inactive-color) !important; } #bb-mobile-footer .bb-mobile-item::after, #bb-mobile-footer .bb-mobile-item.active::after, #bb-mobile-footer .bb-mobile-item.bb-current::after, #bb-mobile-footer .bb-mobile-item[aria-current]::after { content: none !important; display: none !important; } #bb-mobile-footer .bb-mobile-item .bb-icon, #bb-mobile-footer .bb-mobile-item.active .bb-icon, #bb-mobile-footer .bb-mobile-item.bb-current .bb-icon, #bb-mobile-footer .bb-mobile-item[aria-current] .bb-icon { color: inherit !important; filter: none !important; } #bb-mobile-footer .bb-mobile-item[data-bb-current="1"] { color: var(--bb-footer-active-color) !important; } #bb-mobile-footer .bb-mobile-item[data-bb-current="1"] .bb-icon { transform: translateY(-2px) scale(1.06) !important; filter: drop-shadow(0 2px 8px rgba(255,255,255,.13)) !important; } #bb-mobile-footer .bb-mobile-item[data-bb-current="1"]::after { content: "" !important; display: block !important; position: absolute; left: 50%; bottom: 2px; width: 20px; height: 3px; border-radius: 999px; transform: translateX(-50%); background: currentColor; opacity: .65; filter: blur(.3px); } }