/* ========================================================================== UnoDock — Frontend bottom nav bar ========================================================================== */ .udock-bottom-nav { display: none; /* shown only on mobile via media query */ left: 0; right: 0; bottom: 0; height: var(--udock-height, 60px); background: var(--udock-bg, #ffffff); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08); z-index: var(--udock-zindex, 9999); align-items: stretch; justify-content: space-around; box-sizing: border-box; border-top-left-radius: var(--udock-top-radius, 0px); border-top-right-radius: var(--udock-top-radius, 0px); /* Intentionally no overflow:hidden here — it would clip the featured button's icon background as it pops up above the bar. */ } .udock-bottom-nav.udock-sticky { position: fixed; } .udock-bottom-nav.udock-rtl { direction: rtl; } /* Scroll-hide: slides fully off-screen on scroll-down, back on scroll-up. Only meaningful together with Sticky (position: fixed) — a static bar already scrolls away with the page on its own. */ .udock-bottom-nav.udock-scroll-hide-enabled { transition: transform 0.3s ease; } .udock-bottom-nav.udock-scroll-hide-enabled.udock-scrolled-down { transform: translateY(100%); } /* Hidden while a fullscreen-mode Menu Panel is open — a true fullscreen panel replaces the bar entirely, rather than floating above it. */ .udock-bottom-nav.udock-bar-hidden { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } /* PRO only: glassmorphism background */ .udock-bottom-nav.udock-glass { -webkit-backdrop-filter: blur(var(--udock-glass-blur, 12px)); backdrop-filter: blur(var(--udock-glass-blur, 12px)); } .udock-bottom-nav.udock-glass:not(.udock-glass-no-border)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); pointer-events: none; } .udock-bottom-nav.udock-static { position: relative; } .udock-bottom-nav.udock-safe-area { height: calc(var(--udock-height, 60px) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); } @media (max-width: 782px) { .udock-bottom-nav { display: flex; } /* Prevents the site content from being hidden behind the fixed bar */ body { padding-bottom: var(--udock-height, 60px); } } .udock-nav-item { flex: 1; display: flex; align-items: center; justify-content: center; gap: 3px; text-decoration: none !important; position: relative; padding: 4px 2px; -webkit-tap-highlight-color: transparent; background: none !important; border: none !important; outline: none !important; cursor: pointer; font-family: inherit; touch-action: manipulation; transition: transform 70ms cubic-bezier(.2,.8,.2,1), background-color 70ms linear; } .udock-nav-item:focus, .udock-nav-item:focus-visible { outline: none !important; box-shadow: none !important; } /* Keep theme link interaction styles from bleeding into UnoDock items. Some themes paint anchors on hover/focus/active, which is especially visible as an opaque rectangle inside floating bar styles. */ .udock-bottom-nav .udock-nav-item, .udock-bottom-nav .udock-nav-item:hover, .udock-bottom-nav .udock-nav-item:focus, .udock-bottom-nav .udock-nav-item:focus-visible, .udock-bottom-nav .udock-nav-item:active { background-color: transparent !important; background-image: none !important; box-shadow: none !important; outline: none !important; } .udock-bottom-nav .udock-nav-item::before, .udock-bottom-nav .udock-nav-item::after { content: none !important; display: none !important; } .udock-nav-item:active { transform: scale(0.96); } .udock-nav-item:active .udock-nav-icon-wrap { opacity: 0.84; } /* Label below the icon (default): icon first, label after, in normal order */ .udock-nav-item.udock-label-bottom { flex-direction: column; } /* Label above the icon: the label is already output before the icon in the markup, so normal (non-reversed) column order already places it on top */ .udock-nav-item.udock-label-top { flex-direction: column; } .udock-nav-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; height: var(--udock-icon-size, 22px); } /* Featured buttons render a bigger icon (scaled via --udock-featured-scale) — give the wrap matching extra height so it isn't clipped. Buttons with a colored icon background already get their own explicit height below. */ .udock-nav-icon-wrap.udock-icon-featured:not(.udock-icon-bg) { height: calc(var(--udock-icon-size, 22px) * var(--udock-featured-scale, 1.5)); } /* Real WhatsApp brand glyph (Font Awesome Free, CC BY 4.0), used via CSS mask so it inherits the button's icon color like the font-based icons. Automatically shown for "WhatsApp" link-type buttons. */ .udock-icon-whatsapp { display: inline-block; width: var(--udock-icon-size, 22px); height: var(--udock-icon-size, 22px); background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E"); } .udock-nav-item.udock-active .udock-icon-whatsapp { background-color: var(--udock-icon-active, #16E2F5); } /* UnoDock official "Menu" icons — same mask technique as WhatsApp, so they inherit the button's icon color. */ .udock-icon-menu-diagonal { display: inline-block; width: var(--udock-icon-size, 22px); height: var(--udock-icon-size, 22px); background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='2' y1='19' x2='7' y2='12'/%3E%3Cline x1='9' y1='19' x2='16' y2='9'/%3E%3Cline x1='16' y1='19' x2='24' y2='7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='2' y1='19' x2='7' y2='12'/%3E%3Cline x1='9' y1='19' x2='16' y2='9'/%3E%3Cline x1='16' y1='19' x2='24' y2='7'/%3E%3C/svg%3E"); } .udock-nav-item.udock-active .udock-icon-menu-diagonal { background-color: var(--udock-icon-active, #16E2F5); } .udock-icon-menu-sort { display: inline-block; width: var(--udock-icon-size, 22px); height: var(--udock-icon-size, 22px); background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 100' fill='black'%3E%3Crect x='10' y='12' width='26' height='12' rx='6'/%3E%3Crect x='10' y='38' width='42' height='12' rx='6'/%3E%3Crect x='10' y='64' width='58' height='12' rx='6'/%3E%3Cpath d='M82,74 Q82,76 84,76 L86,76 Q88,76 88,74 L88,36 L94,36 Q96,36 95,34 L87,14 Q85,12 83,14 L75,34 Q74,36 76,36 L82,36 Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 100' fill='black'%3E%3Crect x='10' y='12' width='26' height='12' rx='6'/%3E%3Crect x='10' y='38' width='42' height='12' rx='6'/%3E%3Crect x='10' y='64' width='58' height='12' rx='6'/%3E%3Cpath d='M82,74 Q82,76 84,76 L86,76 Q88,76 88,74 L88,36 L94,36 Q96,36 95,34 L87,14 Q85,12 83,14 L75,34 Q74,36 76,36 L82,36 Z'/%3E%3C/svg%3E"); } .udock-nav-item.udock-active .udock-icon-menu-sort { background-color: var(--udock-icon-active, #16E2F5); } .udock-nav-item i { font-size: var(--udock-icon-size, 22px); color: var(--udock-icon, #808080); transition: color 70ms linear; } /* WordPress' own .dashicons rule pins a fixed 20x20px box, which would otherwise override the --udock-icon-size sizing above. */ .udock-nav-item i.dashicons { width: auto; height: auto; } .udock-nav-label { font-size: var(--udock-font-size, 11px); color: var(--udock-button-text, var(--udock-text, #808080)); line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none !important; letter-spacing: normal !important; font-weight: normal; position: relative; padding-bottom: 3px; } .udock-nav-item.udock-active i { color: var(--udock-icon-active, #16E2F5); } .udock-nav-item.udock-active .udock-nav-label { color: var(--udock-button-text-active, var(--udock-button-text, var(--udock-text, #808080))); } /* Premium instant-active underline. Keep the pseudo-element mounted so a pointerdown only changes compositor-friendly transform/opacity; there is no keyframe setup or layout work on tap. The 70ms ease-out starts immediately and normally completes while the finger is still down. */ .udock-bottom-nav:not(.udock-underline-off) .udock-nav-item .udock-nav-label::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--udock-underline, #16E2F5); border-radius: 2px; transform: scaleX(0); transform-origin: center; opacity: 0; transition: transform 70ms cubic-bezier(.16,1,.3,1), opacity 45ms linear; } .udock-bottom-nav:not(.udock-underline-off) .udock-nav-item.udock-active .udock-nav-label::after { transform: scaleX(1); opacity: 1; } /* Featured button (larger icon) — size is configurable via --udock-featured-scale */ .udock-icon-featured i { font-size: calc(var(--udock-icon-size, 22px) * var(--udock-featured-scale, 1.5)) !important; } /* Featured button idle "wiggle" — a periodic attention-getting shake while the visitor is actually on the page that button points to. Off by one toggle in Appearance; on by default. Purely decorative, so it respects prefers-reduced-motion for visitors who've asked for less motion. */ @media (prefers-reduced-motion: no-preference) { .udock-nav-item.udock-featured.udock-wiggle.udock-active .udock-nav-icon-wrap { animation: udock-page-wiggle 3s ease-in-out infinite; animation-delay: 2s; } } @keyframes udock-page-wiggle { 0%, 8%, 100% { transform: rotate(0deg); } 2% { transform: rotate(-16deg); } 4% { transform: rotate(16deg); } 6% { transform: rotate(-9deg); } } /* Icon background (any button: solid color or gradient) */ .udock-icon-bg { width: calc(var(--udock-icon-size, 22px) * 1.9); height: calc(var(--udock-icon-size, 22px) * 1.9); border-radius: 50%; box-sizing: border-box; } .udock-icon-featured.udock-icon-bg { width: calc(var(--udock-icon-size, 22px) * (var(--udock-featured-scale, 1.5) + 0.7)); height: calc(var(--udock-icon-size, 22px) * (var(--udock-featured-scale, 1.5) + 0.7)); margin-top: -18px; } .udock-icon-filled { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .udock-icon-featured.udock-icon-filled i { font-size: calc(var(--udock-icon-size, 22px) * var(--udock-featured-scale, 1.5) * 0.867) !important; } /* --------------------------------------------------------- * WooCommerce cart count badge * ------------------------------------------------------- */ .udock-cart-count-badge { position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; background: #ef4444; color: #ffffff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; border-radius: 20px; box-shadow: 0 0 0 2px var(--udock-bg, #ffffff); } .udock-cart-count-badge:empty { display: none; } .udock-wishlist-count-badge { position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; background: #ec4899; color: #ffffff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; border-radius: 20px; box-shadow: 0 0 0 2px var(--udock-bg, #ffffff); } .udock-wishlist-count-badge:empty { display: none; } /* --------------------------------------------------------- * Search overlay — UnoizeStudio pill search. * ------------------------------------------------------- */ .udock-search-overlay{position:fixed;inset:0;z-index:calc(var(--udock-zindex,9999) + 1);display:flex;align-items:flex-end;justify-content:center;padding:18px 14px calc(82px + env(safe-area-inset-bottom,0px));box-sizing:border-box;background:rgba(11,15,25,.12);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease} .udock-search-overlay.udock-open{opacity:1;visibility:visible;pointer-events:auto} .udock-search-shell{display:flex;align-items:center;gap:9px;width:min(620px,100%);transform:translateY(12px) scale(.985);opacity:.2;transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .18s ease} .udock-search-overlay.udock-open .udock-search-shell{transform:translateY(0) scale(1);opacity:1} .udock-search-form{display:flex;align-items:center;gap:9px;flex:1;min-width:0;min-height:54px;padding:6px 7px 6px 17px;border:1px solid rgba(148,163,184,.24);border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 18px 42px rgba(15,23,42,.18),inset 0 1px 0 rgba(255,255,255,.85);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-sizing:border-box} .udock-search-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px;height:20px;color:#6b7280} .udock-search-icon svg,.udock-search-submit svg{display:block;width:100%;height:100%} .udock-search-overlay .udock-search-form .udock-search-input{flex:1;min-width:0;height:40px;padding:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;color:#172033!important;-webkit-text-fill-color:#172033!important;caret-color:#249df0!important;opacity:1!important;font:inherit;font-size:15px;line-height:40px;-webkit-appearance:none;appearance:none} .udock-search-overlay .udock-search-form .udock-search-input::placeholder{color:#98a2b3!important;-webkit-text-fill-color:#98a2b3!important;opacity:1!important} .udock-search-input::-webkit-search-cancel-button{-webkit-appearance:none} .udock-search-overlay .udock-search-form .udock-search-input:-webkit-autofill,.udock-search-overlay .udock-search-form .udock-search-input:-webkit-autofill:hover,.udock-search-overlay .udock-search-form .udock-search-input:-webkit-autofill:focus{-webkit-text-fill-color:#172033!important;caret-color:#249df0!important;-webkit-box-shadow:0 0 0 1000px transparent inset!important;transition:background-color 9999s ease-out 0s} .udock-search-context{display:none;align-items:center;justify-content:center;flex:0 0 auto;min-height:25px;padding:0 9px;border-radius:999px;background:linear-gradient(135deg,rgba(36,157,240,.11),rgba(139,92,246,.12));color:#5572c9;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap} .udock-search-context.is-visible{display:inline-flex} .udock-search-submit{display:inline-flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;margin:0;padding:0;border:0;border-radius:50%;background:linear-gradient(135deg,#249df0,#7c5cff);color:#fff;box-shadow:0 8px 18px rgba(66,114,255,.27);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s ease,box-shadow .14s ease} .udock-search-submit svg{width:18px;height:18px} .udock-search-submit:active{transform:scale(.92)} .udock-search-close{display:inline-flex;align-items:center;justify-content:center;flex:0 0 46px;width:46px;height:46px;margin:0;padding:0;border:1px solid rgba(148,163,184,.22);border-radius:50%;background:rgba(255,255,255,.92);color:#667085;box-shadow:0 12px 30px rgba(15,23,42,.14);font-size:24px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s ease,background .14s ease} .udock-search-close span{display:block;transform:translateY(-1px)} .udock-search-close:active{transform:scale(.9)} .udock-search-submit:focus-visible,.udock-search-close:focus-visible{outline:2px solid #249df0;outline-offset:3px} @media(prefers-color-scheme:dark){.udock-search-overlay{background:rgba(2,6,15,.26)}.udock-search-form{background:rgba(18,24,36,.94);border-color:rgba(148,163,184,.20);box-shadow:0 18px 42px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06)}.udock-search-icon{color:#9ca8ba}.udock-search-overlay .udock-search-form .udock-search-input{color:#f4f7fb!important;-webkit-text-fill-color:#f4f7fb!important;caret-color:#73bdf7!important}.udock-search-overlay .udock-search-form .udock-search-input::placeholder{color:#7e899c!important;-webkit-text-fill-color:#7e899c!important;opacity:1!important}.udock-search-context{background:linear-gradient(135deg,rgba(36,157,240,.18),rgba(139,92,246,.20));color:#b9c9ff}.udock-search-close{background:rgba(18,24,36,.94);border-color:rgba(148,163,184,.20);color:#cbd5e1;box-shadow:0 12px 30px rgba(0,0,0,.28)}} @media(prefers-color-scheme:dark){.udock-search-overlay .udock-search-form .udock-search-input:-webkit-autofill,.udock-search-overlay .udock-search-form .udock-search-input:-webkit-autofill:hover,.udock-search-overlay .udock-search-form .udock-search-input:-webkit-autofill:focus{-webkit-text-fill-color:#f4f7fb!important;caret-color:#73bdf7!important}} @media(max-width:520px){.udock-search-overlay{padding-left:10px;padding-right:10px}.udock-search-shell{gap:7px}.udock-search-form{min-height:50px;padding-left:14px}.udock-search-submit{flex-basis:38px;width:38px;height:38px}.udock-search-close{flex-basis:42px;width:42px;height:42px}.udock-search-context{padding:0 7px;font-size:9px}} /* --------------------------------------------------------- * Side menu panel (opened by a "Menu" type button) * ------------------------------------------------------- */ .udock-menu-trigger-active { background-color: var(--udock-menu-btn-active-bg, transparent) !important; border-radius: 12px; } .udock-menu-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: calc(var(--udock-zindex, 9999) - 2); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; } .udock-menu-backdrop.udock-open { opacity: 1; visibility: visible; pointer-events: auto; } /* The fullscreen panel is itself fully opaque and covers the whole screen, so the dark overlay behind it would never actually be seen — skip animating/painting it at all in that case. */ .udock-menu-backdrop-fullscreen { display: none; } .udock-menu-panel { position: fixed; top: 50%; width: 80%; max-width: 320px; height: var(--udock-menu-panel-height, 320px); max-height: calc(100vh - var(--udock-height, 60px) - 60px); border: 2px solid transparent; border-radius: 20px; background-image: var(--udock-menu-panel-bg-layer, linear-gradient(#fff, #fff)), var(--udock-menu-panel-border-layer, linear-gradient(#e5e7eb, #e5e7eb)); background-origin: border-box; background-clip: padding-box, border-box; z-index: calc(var(--udock-zindex, 9999) - 1); display: flex; flex-direction: column; overflow: hidden; padding: 20px 18px; box-sizing: border-box; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease, clip-path 0.4s ease; /* Several effects (fade/zoom/slide-fade/flip) only hide this panel via opacity, which does NOT remove it from click hit-testing — without this, an invisible-but-clickable panel sits centered and fixed over the page at all times, silently swallowing clicks on whatever real content happens to be underneath it. */ pointer-events: none; } .udock-menu-panel.udock-open { pointer-events: auto; } .udock-menu-panel-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .udock-menu-panel-socials { flex-shrink: 0; display: flex; justify-content: center; gap: 22px; padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--udock-menu-panel-separator, rgba(0, 0, 0, 0.08)); color: var(--udock-menu-socials-color, var(--udock-menu-panel-text, #1f2937)); } .udock-menu-panel-socials a { color: var(--udock-menu-socials-color, var(--udock-menu-panel-text, #1f2937)); opacity: 0.75; transition: opacity .15s ease; } .udock-menu-panel-socials a:hover { opacity: 1; } .udock-menu-panel-right { right: 0; } .udock-menu-panel-left { left: 0; } /* Slide (default) — comes in from the chosen side */ .udock-menu-effect-slide.udock-menu-panel-right { transform: translateY(-50%) translateX(100%); } .udock-menu-effect-slide.udock-menu-panel-left { transform: translateY(-50%) translateX(-100%); } .udock-menu-effect-slide.udock-open { transform: translateY(-50%) translateX(0); } /* Fade — no movement, just appears */ .udock-menu-effect-fade { opacity: 0; transform: translateY(-50%); } .udock-menu-effect-fade.udock-open { opacity: 1; } /* Zoom — grows in from slightly smaller */ .udock-menu-effect-zoom { opacity: 0; transform: translateY(-50%) scale(0.85); } .udock-menu-effect-zoom.udock-open { opacity: 1; transform: translateY(-50%) scale(1); } /* Slide + Fade — softer slide, combined with a fade */ .udock-menu-effect-slide-fade.udock-menu-panel-right { opacity: 0; transform: translateY(-50%) translateX(40%); } .udock-menu-effect-slide-fade.udock-menu-panel-left { opacity: 0; transform: translateY(-50%) translateX(-40%); } .udock-menu-effect-slide-fade.udock-open { opacity: 1; transform: translateY(-50%) translateX(0); } /* Flip — rotates in around a vertical axis, from the chosen side */ .udock-menu-effect-flip.udock-menu-panel-right { opacity: 0; transform: translateY(-50%) perspective(1000px) rotateY(-90deg); } .udock-menu-effect-flip.udock-menu-panel-left { opacity: 0; transform: translateY(-50%) perspective(1000px) rotateY(90deg); } .udock-menu-effect-flip.udock-open { opacity: 1; transform: translateY(-50%) perspective(1000px) rotateY(0deg); } /* --------------------------------------------------------- * Menu Panel — Fullscreen mode * A completely different layout from the sliding side panel: * takes over the whole viewport, so the bar itself is hidden * while it's open (see .udock-bar-hidden) and a dedicated close * button replaces the bar's own trigger for closing it again. * ------------------------------------------------------- */ .udock-menu-panel.udock-menu-fullscreen { top: 0; right: 0; left: 0; bottom: 0; width: 100%; max-width: none; height: 100%; max-height: none; border: none; border-radius: 0; padding: calc(env(safe-area-inset-top, 0px) + 24px) 22px calc(env(safe-area-inset-bottom, 0px) + 24px); } .udock-menu-fullscreen-header { flex-shrink: 0; display: flex; justify-content: flex-end; align-items: center; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--udock-menu-panel-separator, rgba(0, 0, 0, 0.08)); } .udock-menu-fullscreen-header-has-logo { justify-content: space-between; } .udock-menu-logo-link { display: inline-flex; align-items: center; line-height: 0; } .udock-menu-logo { display: block; max-height: 32px; max-width: 160px; width: auto; height: auto; object-fit: contain; } .udock-menu-close { background: none; border: none; padding: 0; margin: 0; line-height: 1; font-size: 46px; font-weight: 300; color: var(--udock-menu-close-color, #1f2937); cursor: pointer; } /* Fade — no movement, just appears */ .udock-menu-fullscreen-effect-fade { opacity: 0; } .udock-menu-fullscreen-effect-fade.udock-open { opacity: 1; } /* Slide up — rises in from the bottom */ .udock-menu-fullscreen-effect-slideup { opacity: 0; transform: translateY(24px); } .udock-menu-fullscreen-effect-slideup.udock-open { opacity: 1; transform: translateY(0); } /* Zoom — grows in from slightly smaller */ .udock-menu-fullscreen-effect-zoom { opacity: 0; transform: scale(0.92); } .udock-menu-fullscreen-effect-zoom.udock-open { opacity: 1; transform: scale(1); } /* Curtain — reveals top-down, like a blind opening */ .udock-menu-fullscreen-effect-curtain { opacity: 0; clip-path: inset(0 0 100% 0); } .udock-menu-fullscreen-effect-curtain.udock-open { opacity: 1; clip-path: inset(0 0 0 0); } /* Circle — expands from the exact point that was tapped, set as --udock-circle-x/y by frontend.js right before opening. */ .udock-menu-fullscreen-effect-circle { opacity: 0; clip-path: circle(0% at var(--udock-circle-x, 50%) var(--udock-circle-y, 50%)); } .udock-menu-fullscreen-effect-circle.udock-open { opacity: 1; clip-path: circle(150% at var(--udock-circle-x, 50%) var(--udock-circle-y, 50%)); } /* Pill-style menu items — fullscreen mode only */ .udock-menu-fullscreen .udock-menu-panel-list > li { background: var(--udock-menu-pill-bg, #ffffff); border-radius: 14px; margin-bottom: 10px; padding: 0 6px; } .udock-menu-fullscreen .udock-menu-panel-list > li:last-child { margin-bottom: 0; } .udock-menu-fullscreen .udock-menu-panel-list .udock-menu-item-row a { padding: 15px 10px; } .udock-menu-fullscreen .udock-menu-sublist { margin: 0 0 10px 10px; } .udock-menu-fullscreen .udock-menu-sublist a { /* Deliberately subtle — just enough to read as "nested", not enough to look faded out or hard to read. */ opacity: 0.9; } /* Up to 3 extra buttons below the menu, fullscreen mode only */ .udock-menu-fullscreen-buttons { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--udock-menu-panel-separator, rgba(0, 0, 0, 0.08)); } .udock-menu-fullscreen-btn { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 22px; border-radius: 999px; color: #ffffff; text-decoration: none; text-align: center; font-size: 14px; font-weight: 600; } .udock-menu-fullscreen-btn .udock-menu-item-icon { color: #ffffff; opacity: 1; font-size: 16px; margin-right: 0; } .udock-menu-panel-list { list-style: none; margin: 0; padding: 0; } .udock-menu-panel-list li { border-bottom: 1px solid var(--udock-menu-panel-separator, rgba(0, 0, 0, 0.08)); } .udock-menu-panel-list li:last-child { border-bottom: none; } .udock-menu-item-row { display: flex; align-items: center; } .udock-menu-item-icon { display: inline-block; width: 18px; margin-right: 10px; text-align: center; font-size: 15px; vertical-align: -2px; color: inherit; opacity: 0.85; } .udock-menu-item-icon.dashicons { width: 18px; height: auto; } .udock-menu-panel-list a, .udock-menu-sublist a { display: block; flex: 1; padding: 12px 4px; color: var(--udock-menu-panel-text, #1f2937); text-decoration: none; font-size: 14.5px; font-weight: 500; } .udock-menu-sublist a { font-size: 13.5px; font-weight: 400; opacity: 0.85; } .udock-menu-toggle { flex-shrink: 0; width: 30px; height: 30px; border: none !important; background: none !important; outline: none !important; box-shadow: none !important; padding: 0; cursor: pointer; color: var(--udock-menu-panel-text, #1f2937) !important; opacity: 0.6; -webkit-tap-highlight-color: transparent; } .udock-menu-toggle:focus, .udock-menu-toggle:focus-visible, .udock-menu-toggle:hover, .udock-menu-toggle:active { color: var(--udock-menu-panel-text, #1f2937) !important; outline: none !important; background: none !important; box-shadow: none !important; } .udock-menu-toggle:focus-visible { outline: none !important; background: none !important; box-shadow: none !important; } .udock-menu-toggle svg { width: 18px; height: 18px; transition: transform 0.2s ease; } .udock-menu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .udock-menu-sublist { list-style: none; margin: 0 0 0 16px; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .udock-menu-has-children.udock-menu-open > .udock-menu-sublist { max-height: 1000px; } /* Social platform icons for the menu panel's social row. */ .udock-icon-social-instagram { display: inline-block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='6' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4.6' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='6' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4.6' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='17.4' cy='6.6' r='1.4'/%3E%3C/svg%3E"); } .udock-icon-social-facebook { display: inline-block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M15 3h-2.5C10 3 8.5 4.6 8.5 7.2V10H6v3.4h2.5V21h3.6v-7.6h2.7l.5-3.4h-3.2V7.5c0-.9.5-1.4 1.5-1.4H15V3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M15 3h-2.5C10 3 8.5 4.6 8.5 7.2V10H6v3.4h2.5V21h3.6v-7.6h2.7l.5-3.4h-3.2V7.5c0-.9.5-1.4 1.5-1.4H15V3z'/%3E%3C/svg%3E"); } .udock-icon-social-tiktok { display: inline-block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M16.5 3c.4 2.2 1.8 3.6 4 3.9v3.1c-1.4 0-2.7-.4-3.9-1.2v6.4c0 3.3-2.6 5.8-5.8 5.8S5 18.5 5 15.2s2.6-5.8 5.8-5.8c.3 0 .6 0 .9.1v3.2c-.3-.1-.6-.2-.9-.2-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.8-1.1 2.8-2.7V3h3z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M16.5 3c.4 2.2 1.8 3.6 4 3.9v3.1c-1.4 0-2.7-.4-3.9-1.2v6.4c0 3.3-2.6 5.8-5.8 5.8S5 18.5 5 15.2s2.6-5.8 5.8-5.8c.3 0 .6 0 .9.1v3.2c-.3-.1-.6-.2-.9-.2-1.5 0-2.7 1.2-2.7 2.7s1.2 2.7 2.7 2.7 2.8-1.1 2.8-2.7V3h3z'/%3E%3C/svg%3E"); } .udock-icon-social-youtube { display: inline-block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' d='M6,5 H18 A4,4 0 0 1 22,9 V15 A4,4 0 0 1 18,19 H6 A4,4 0 0 1 2,15 V9 A4,4 0 0 1 6,5 Z M10,8.5 L10,15.5 L16,12 Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' d='M6,5 H18 A4,4 0 0 1 22,9 V15 A4,4 0 0 1 18,19 H6 A4,4 0 0 1 2,15 V9 A4,4 0 0 1 6,5 Z M10,8.5 L10,15.5 L16,12 Z'/%3E%3C/svg%3E"); } .udock-icon-social-linkedin { display: inline-block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' d='M6,2 H18 A4,4 0 0 1 22,6 V18 A4,4 0 0 1 18,22 H6 A4,4 0 0 1 2,18 V6 A4,4 0 0 1 6,2 Z M5.2,5 H7.8 V7.6 H5.2 Z M5.2,9.5 H7.8 V18.5 H5.2 Z M10.6,9.5 H13.2 V18.5 H10.6 Z M13.2,9.5 H16.4 V13 H13.2 Z M16.4,13 H19 V18.5 H16.4 Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' d='M6,2 H18 A4,4 0 0 1 22,6 V18 A4,4 0 0 1 18,22 H6 A4,4 0 0 1 2,18 V6 A4,4 0 0 1 6,2 Z M5.2,5 H7.8 V7.6 H5.2 Z M5.2,9.5 H7.8 V18.5 H5.2 Z M10.6,9.5 H13.2 V18.5 H10.6 Z M13.2,9.5 H16.4 V13 H13.2 Z M16.4,13 H19 V18.5 H16.4 Z'/%3E%3C/svg%3E"); } .udock-icon-social-x { display: inline-block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='4' y1='4' x2='20' y2='20'/%3E%3Cline x1='20' y1='4' x2='4' y2='20'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='4' y1='4' x2='20' y2='20'/%3E%3Cline x1='20' y1='4' x2='4' y2='20'/%3E%3C/svg%3E"); } /* Floating bar */ .udock-bottom-nav.udock-style-floating,.udock-bottom-nav.udock-style-floating-notch{border-radius:var(--udock-floating-radius,18px)}.udock-bottom-nav.udock-style-floating.udock-sticky,.udock-bottom-nav.udock-style-floating-notch.udock-sticky{left:var(--udock-floating-side,12px);right:var(--udock-floating-side,12px);bottom:var(--udock-floating-gap,10px);width:auto}.udock-bottom-nav.udock-style-floating.udock-safe-area,.udock-bottom-nav.udock-style-floating-notch.udock-safe-area{height:var(--udock-height,60px);padding-bottom:0}.udock-bottom-nav.udock-style-floating.udock-sticky.udock-safe-area,.udock-bottom-nav.udock-style-floating-notch.udock-sticky.udock-safe-area{bottom:calc(var(--udock-floating-gap,10px) + env(safe-area-inset-bottom,0px))}.udock-bottom-nav.udock-style-floating.udock-static,.udock-bottom-nav.udock-style-floating-notch.udock-static{left:auto;right:auto;width:calc(100% - (var(--udock-floating-side,12px) * 2));margin:var(--udock-floating-gap,10px) var(--udock-floating-side,12px)}.udock-bottom-nav.udock-style-floating.udock-scroll-hide-enabled.udock-scrolled-down,.udock-bottom-nav.udock-style-floating-notch.udock-scroll-hide-enabled.udock-scrolled-down{transform:translateY(calc(100% + var(--udock-floating-gap,10px) + env(safe-area-inset-bottom,0px) + 3px))} /* PRO moving Floating Notch */ .udock-bottom-nav.udock-style-floating-notch{background:transparent;box-shadow:none;--udock-notch-x:50%}.udock-bottom-nav.udock-style-floating-notch>.udock-notch-surface{position:absolute;inset:0;z-index:0;border-radius:inherit;background:var(--udock-bg,#fff);box-shadow:0 -2px 10px rgba(0,0,0,.08);-webkit-mask-image:radial-gradient(circle 34px at var(--udock-notch-x) 0,transparent 0 32px,#000 33px);mask-image:radial-gradient(circle 34px at var(--udock-notch-x) 0,transparent 0 32px,#000 33px);pointer-events:none}.udock-bottom-nav.udock-style-floating-notch.udock-glass>.udock-notch-surface{-webkit-backdrop-filter:blur(var(--udock-glass-blur,12px));backdrop-filter:blur(var(--udock-glass-blur,12px))}.udock-bottom-nav.udock-style-floating-notch.udock-glass:not(.udock-glass-no-border)>.udock-notch-surface{box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 -2px 10px rgba(0,0,0,.08)}.udock-bottom-nav.udock-style-floating-notch:before{display:none!important}.udock-bottom-nav.udock-style-floating-notch>.udock-notch-indicator{position:absolute;z-index:1;left:0;top:-27px;width:54px;height:54px;border-radius:50%;background:var(--udock-bg,#fff);box-shadow:0 7px 18px rgba(0,0,0,.14);pointer-events:none;transform:translate3d(calc(var(--udock-notch-x) - 27px),0,0);will-change:transform}.udock-bottom-nav.udock-style-floating-notch>.udock-nav-item{z-index:2}.udock-bottom-nav.udock-style-floating-notch>.udock-nav-item .udock-nav-icon-wrap{transition:transform 105ms cubic-bezier(.16,1,.3,1),opacity 70ms linear}.udock-bottom-nav.udock-style-floating-notch>.udock-nav-item.udock-active .udock-nav-icon-wrap{transform:translateY(-18px);z-index:3} /* Featured Button remains fully active in Floating Notch. Its configured size is preserved and the whole featured item gets a size-aware extra lift. */ .udock-bottom-nav.udock-style-floating-notch>.udock-nav-item.udock-featured{transform:translateY(calc(var(--udock-featured-lift,6px) * -1));z-index:3} .udock-bottom-nav.udock-style-floating-notch>.udock-nav-item.udock-featured .udock-icon-featured.udock-icon-bg{margin-top:0} .udock-bottom-nav.udock-style-floating-notch>.udock-nav-item.udock-featured.udock-active .udock-nav-icon-wrap{transform:translateY(-18px);z-index:4} .udock-bottom-nav.udock-style-floating-notch>.udock-nav-item:active .udock-nav-icon-wrap{opacity:.78}@media(prefers-reduced-motion:reduce){.udock-bottom-nav.udock-style-floating-notch>.udock-notch-indicator,.udock-bottom-nav.udock-style-floating-notch>.udock-nav-item,.udock-bottom-nav.udock-style-floating-notch>.udock-nav-item .udock-nav-icon-wrap{transition:none!important}} @keyframes udock-notch-anim-shrink{0%{transform:translateY(-18px) scale(1)}50%{transform:translateY(-18px) scale(.82)}100%{transform:translateY(-18px) scale(1)}} @keyframes udock-notch-anim-zoom{0%{transform:translateY(-18px) scale(1)}50%{transform:translateY(-18px) scale(1.28)}100%{transform:translateY(-18px) scale(1)}} .udock-bottom-nav.udock-style-floating-notch>.udock-nav-item.udock-active .udock-nav-icon-wrap.udock-play-shrink{animation:udock-notch-anim-shrink .3s ease}.udock-bottom-nav.udock-style-floating-notch>.udock-nav-item.udock-active .udock-nav-icon-wrap.udock-play-zoom{animation:udock-notch-anim-zoom .35s ease} /* PRO Pulse Notch — compact moving cut-out with a persistent pulse indicator. */ .udock-bottom-nav.udock-style-pulse-notch{ border-radius:var(--udock-floating-radius,18px); background:transparent; box-shadow:none; --udock-notch-x:50%; } .udock-bottom-nav.udock-style-pulse-notch.udock-sticky{left:var(--udock-floating-side,12px);right:var(--udock-floating-side,12px);bottom:var(--udock-floating-gap,10px);width:auto} .udock-bottom-nav.udock-style-pulse-notch.udock-safe-area{height:var(--udock-height,60px);padding-bottom:0} .udock-bottom-nav.udock-style-pulse-notch.udock-sticky.udock-safe-area{bottom:calc(var(--udock-floating-gap,10px) + env(safe-area-inset-bottom,0px))} .udock-bottom-nav.udock-style-pulse-notch.udock-static{left:auto;right:auto;width:calc(100% - (var(--udock-floating-side,12px) * 2));margin:var(--udock-floating-gap,10px) var(--udock-floating-side,12px)} .udock-bottom-nav.udock-style-pulse-notch.udock-scroll-hide-enabled.udock-scrolled-down{transform:translateY(calc(100% + var(--udock-floating-gap,10px) + env(safe-area-inset-bottom,0px) + 3px))} .udock-bottom-nav.udock-style-pulse-notch>.udock-pulse-surface{ position:absolute;inset:0;z-index:0;border-radius:inherit;background:var(--udock-bg,#fff); box-shadow:0 8px 24px rgba(15,23,42,.13),0 -1px 7px rgba(15,23,42,.08); -webkit-mask-image:radial-gradient(circle 12px at var(--udock-notch-x) 0,transparent 0 9px,#000 10px); mask-image:radial-gradient(circle 12px at var(--udock-notch-x) 0,transparent 0 9px,#000 10px); pointer-events:none } .udock-bottom-nav.udock-style-pulse-notch.udock-glass>.udock-pulse-surface{-webkit-backdrop-filter:blur(var(--udock-glass-blur,12px));backdrop-filter:blur(var(--udock-glass-blur,12px))} .udock-bottom-nav.udock-style-pulse-notch.udock-glass:not(.udock-glass-no-border)>.udock-pulse-surface{box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 8px 24px rgba(15,23,42,.13)} .udock-bottom-nav.udock-style-pulse-notch:before{display:none!important} .udock-bottom-nav.udock-style-pulse-notch>.udock-pulse-indicator{ position:absolute;z-index:2;left:0;top:-10px;width:12px;height:12px;border-radius:50%; background:var(--udock-pulse-dot,#39FF14);box-shadow:0 3px 10px rgba(15,23,42,.24),0 0 12px rgba(57,255,20,.28); pointer-events:none;transform:translate3d(calc(var(--udock-notch-x) - 6px),0,0);will-change:transform } .udock-bottom-nav.udock-style-pulse-notch>.udock-pulse-indicator:after{ content:"";position:absolute;inset:-1px;border-radius:inherit;background:inherit;z-index:-1; animation:udock-pulse-notch-ring 1.35s cubic-bezier(.2,.65,.25,1) infinite } .udock-bottom-nav.udock-style-pulse-notch>.udock-nav-item{z-index:1} @keyframes udock-pulse-notch-ring{0%{transform:scale(.85);opacity:.58}62%,100%{transform:scale(2.35);opacity:0}} @media(prefers-reduced-motion:reduce){.udock-bottom-nav.udock-style-pulse-notch>.udock-pulse-indicator:after{animation:none!important;opacity:.26;transform:scale(1.45)}} /* Floating Notch + Featured Button: preserve the notch elevation while the optional idle wiggle is running, instead of letting the animation replace the translateY used by the active notch item. */ @media (prefers-reduced-motion: no-preference) { .udock-bottom-nav.udock-style-floating-notch > .udock-nav-item.udock-featured.udock-wiggle.udock-active .udock-nav-icon-wrap { animation-name: udock-notch-featured-wiggle; } } @keyframes udock-notch-featured-wiggle { 0%, 8%, 100% { transform: translateY(-18px) rotate(0deg); } 2% { transform: translateY(-18px) rotate(-16deg); } 4% { transform: translateY(-18px) rotate(16deg); } 6% { transform: translateY(-18px) rotate(-9deg); } } /* Floating Notch rim — trace the curved cavity itself, not just the active circle. */ .udock-bottom-nav.udock-style-floating-notch::after { content: ""; position: absolute; z-index: 1; left: calc(var(--udock-notch-x) - 34px); top: -1px; width: 68px; height: 34px; box-sizing: border-box; border: 1.5px solid rgba(255, 255, 255, 0.58); border-top: 0; border-radius: 0 0 34px 34px; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.16); pointer-events: none; will-change: left; } .udock-bottom-nav.udock-style-floating-notch > .udock-notch-indicator { box-shadow: 0 7px 18px rgba(0, 0, 0, 0.14), 0 0 0 1.5px rgba(255, 255, 255, 0.58), 0 0 0 2.5px rgba(15, 23, 42, 0.08); } @media (prefers-color-scheme: dark) { .udock-bottom-nav.udock-auto-dark.udock-style-floating-notch::after { border-color: rgba(255, 255, 255, 0.32); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.42); } .udock-bottom-nav.udock-auto-dark.udock-style-floating-notch > .udock-notch-indicator { box-shadow: 0 7px 18px rgba(0, 0, 0, 0.28), 0 0 0 1.5px rgba(255, 255, 255, 0.30), 0 0 0 2.5px rgba(0, 0, 0, 0.18); } } /* Floating Notch geometry — smooth concave shoulders like the reference. The second mask layer is a custom cubic cut-out, subtracted from the full bar surface. This avoids the sharp tangent produced by a simple radial hole. */ .udock-bottom-nav.udock-style-floating-notch > .udock-notch-surface { -webkit-mask-image: linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2096%2036'%3E%3Cpath%20fill%3D'black'%20d%3D'M0%200H10C20%200%2025%201%2030%208C36%2017%2038%2033%2048%2034C58%2033%2060%2017%2066%208C71%201%2076%200%2086%200H96V0H0Z'%2F%3E%3C%2Fsvg%3E"); -webkit-mask-position: 0 0, calc(var(--udock-notch-x) - 48px) 0; -webkit-mask-size: 100% 100%, 96px 36px; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: xor; mask-image: linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2096%2036'%3E%3Cpath%20fill%3D'black'%20d%3D'M0%200H10C20%200%2025%201%2030%208C36%2017%2038%2033%2048%2034C58%2033%2060%2017%2066%208C71%201%2076%200%2086%200H96V0H0Z'%2F%3E%3C%2Fsvg%3E"); mask-position: 0 0, calc(var(--udock-notch-x) - 48px) 0; mask-size: 100% 100%, 96px 36px; mask-repeat: no-repeat; mask-composite: exclude; } .udock-bottom-nav.udock-style-floating-notch::after { display:none !important; } .udock-bottom-nav.udock-style-floating-notch > .udock-notch-indicator { box-shadow:0 7px 18px rgba(0,0,0,.14); } @media (prefers-color-scheme: dark) { .udock-bottom-nav.udock-auto-dark.udock-style-floating-notch > .udock-notch-indicator { box-shadow:0 7px 18px rgba(0,0,0,.28); } } /* Pulse Notch — wider and shallower, using the same rounded shoulder language. Dot, pulse, glow and movement remain untouched. */ .udock-bottom-nav.udock-style-pulse-notch > .udock-pulse-surface { -webkit-mask-image: linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2084%2012'%3E%3Cpath%20fill%3D'black'%20d%3D'M0%200H8C18%200%2023%200.5%2028%203C34%206.5%2037%209%2042%209C47%209%2050%206.5%2056%203C61%200.5%2066%200%2076%200H84V0H0Z'%2F%3E%3C%2Fsvg%3E"); -webkit-mask-position: 0 0, calc(var(--udock-notch-x) - 42px) 0; -webkit-mask-size: 100% 100%, 84px 12px; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: xor; mask-image: linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2084%2012'%3E%3Cpath%20fill%3D'black'%20d%3D'M0%200H8C18%200%2023%200.5%2028%203C34%206.5%2037%209%2042%209C47%209%2050%206.5%2056%203C61%200.5%2066%200%2076%200H84V0H0Z'%2F%3E%3C%2Fsvg%3E"); mask-position: 0 0, calc(var(--udock-notch-x) - 42px) 0; mask-size: 100% 100%, 84px 12px; mask-repeat: no-repeat; mask-composite: exclude; } /* Final notch geometry refinement — single smooth concave cut-outs with rounded shoulders. This replaces the earlier harsher circular/multi-part look that produced a dark crescent under the active circle. */ .udock-bottom-nav.udock-style-floating-notch > .udock-notch-surface { -webkit-mask-image: linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20120%2040'%3E%3Cpath%20fill%3D'black'%20d%3D'M0%200H18C31%200%2039%201.5%2045%2010C50%2017%2053%2029%2060%2033C67%2029%2070%2017%2075%2010C81%201.5%2089%200%20102%200H120V0H0Z'%2F%3E%3C%2Fsvg%3E"); -webkit-mask-position: 0 0, calc(var(--udock-notch-x) - 60px) 0; -webkit-mask-size: 100% 100%, 120px 40px; -webkit-mask-repeat: no-repeat; -webkit-mask-composite: xor; mask-image: linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20120%2040'%3E%3Cpath%20fill%3D'black'%20d%3D'M0%200H18C31%200%2039%201.5%2045%2010C50%2017%2053%2029%2060%2033C67%2029%2070%2017%2075%2010C81%201.5%2089%200%20102%200H120V0H0Z'%2F%3E%3C%2Fsvg%3E"); mask-position: 0 0, calc(var(--udock-notch-x) - 60px) 0; mask-size: 100% 100%, 120px 40px; mask-repeat: no-repeat; mask-composite: exclude; } .udock-bottom-nav.udock-style-floating-notch > .udock-notch-indicator { box-shadow: 0 4px 12px rgba(0,0,0,.12); } @media (prefers-color-scheme: dark) { .udock-bottom-nav.udock-auto-dark.udock-style-floating-notch > .udock-notch-indicator { box-shadow: 0 4px 12px rgba(0,0,0,.24); } } /* Floating Notch final surface — SVG clip-path generated from two cubic Beziers. */ .udock-bottom-nav.udock-style-floating-notch > .udock-notch-clip-svg { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; } .udock-bottom-nav.udock-style-floating-notch > .udock-notch-surface { -webkit-mask:none !important; mask:none !important; -webkit-clip-path:url(#udock-floating-notch-clip); clip-path:url(#udock-floating-notch-clip); border-radius:0 !important; box-shadow:0 6px 18px rgba(15,23,42,.10); } .udock-bottom-nav.udock-style-floating-notch.udock-glass:not(.udock-glass-no-border) > .udock-notch-surface { box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 6px 18px rgba(15,23,42,.10); } .udock-bottom-nav.udock-style-floating-notch > .udock-notch-indicator { box-shadow:0 4px 12px rgba(15,23,42,.14); } @media (prefers-color-scheme: dark) { .udock-bottom-nav.udock-auto-dark.udock-style-floating-notch > .udock-notch-indicator { box-shadow:0 4px 12px rgba(0,0,0,.26); } } /* Floating Notch compact proportions — same Bezier geometry, reduced visual footprint. */ .udock-bottom-nav.udock-style-floating-notch > .udock-notch-indicator{ top:-23px; width:46px; height:46px; transform:translate3d(calc(var(--udock-notch-x) - 23px),0,0); box-shadow:0 3px 10px rgba(15,23,42,.12); } .udock-bottom-nav.udock-style-floating-notch > .udock-nav-item.udock-active .udock-nav-icon-wrap{transform:translateY(-15px);} .udock-bottom-nav.udock-style-floating-notch > .udock-nav-item.udock-featured.udock-active .udock-nav-icon-wrap{transform:translateY(-15px);} @media (prefers-color-scheme: dark){ .udock-bottom-nav.udock-auto-dark.udock-style-floating-notch > .udock-notch-indicator{box-shadow:0 3px 10px rgba(0,0,0,.24);} } @media (prefers-reduced-motion:no-preference){ .udock-bottom-nav.udock-style-floating-notch > .udock-nav-item.udock-featured.udock-wiggle.udock-active .udock-nav-icon-wrap{animation-name:udock-notch-featured-wiggle-compact;} } @keyframes udock-notch-featured-wiggle-compact{ 0%,8%,100%{transform:translateY(-15px) rotate(0deg)} 2%{transform:translateY(-15px) rotate(-16deg)} 4%{transform:translateY(-15px) rotate(16deg)} 6%{transform:translateY(-15px) rotate(-9deg)} } /* PRO Dock Bar — slim base with icons visually elevated above the surface. */ .udock-bottom-nav.udock-style-dock { background: transparent; box-shadow: none; align-items: stretch; } .udock-bottom-nav.udock-style-dock::before { display:none!important; } .udock-bottom-nav.udock-style-dock > .udock-dock-surface { position:absolute; left:0;right:0;bottom:0; top:14px; z-index:0; background:var(--udock-bg,#fff); border-radius:16px 16px 0 0; box-shadow:0 -2px 10px rgba(0,0,0,.07); pointer-events:none; } .udock-bottom-nav.udock-style-dock.udock-glass > .udock-dock-surface { -webkit-backdrop-filter:blur(var(--udock-glass-blur,12px)); backdrop-filter:blur(var(--udock-glass-blur,12px)); } .udock-bottom-nav.udock-style-dock.udock-glass:not(.udock-glass-no-border) > .udock-dock-surface { box-shadow:inset 0 1px 0 rgba(255,255,255,.48),0 -2px 10px rgba(0,0,0,.07); } .udock-bottom-nav.udock-style-dock > .udock-nav-item, .udock-bottom-nav.udock-style-dock > .udock-nav-item { padding-top:1px;padding-bottom:1px; } .udock-bottom-nav.udock-style-dock > .udock-nav-item .udock-nav-icon-wrap { transform:translateY(-4px); transition:transform 90ms cubic-bezier(.16,1,.3,1),color 70ms linear; z-index:1; } .udock-bottom-nav.udock-style-dock > .udock-nav-item .udock-nav-icon-wrap::before { content:""; position:absolute; left:50%;top:50%; width:calc(var(--udock-icon-size,22px) + 18px); height:calc(var(--udock-icon-size,22px) + 18px); border-radius:13px; background:var(--udock-dock-active-bg,var(--udock-bg,#fff)); box-shadow:0 6px 16px rgba(0,0,0,.11); opacity:0; transform:translate(-50%,-50%) scale(.9); transition:opacity 70ms linear,transform 90ms cubic-bezier(.16,1,.3,1); pointer-events:none; z-index:-1; } .udock-bottom-nav.udock-style-dock > .udock-nav-item.udock-active .udock-nav-icon-wrap { transform:translateY(-8px); } .udock-bottom-nav.udock-style-dock > .udock-nav-item.udock-active .udock-nav-icon-wrap::before { opacity:1; transform:translate(-50%,-50%) scale(1); } .udock-bottom-nav.udock-style-dock > .udock-nav-item .udock-nav-label { transform:translateY(-1px); } .udock-bottom-nav.udock-style-dock.udock-scroll-hide-enabled.udock-scrolled-down { transform:translateY(100%); } @media (prefers-reduced-motion: reduce) { .udock-bottom-nav.udock-style-dock > .udock-nav-item .udock-nav-icon-wrap, .udock-bottom-nav.udock-style-dock > .udock-nav-item .udock-nav-icon-wrap::before { transition:none!important; } } /* -------------------------------------------------------------------------- * Icon metric isolation * Keep third-party theme/builder typography from shifting UnoDock glyphs. * Templates often switch icon packs, which used to expose inconsistent * baselines inherited from site CSS even though the template did not change * bar/icon dimensions. * -------------------------------------------------------------------------- */ .udock-bottom-nav .udock-nav-icon-wrap { line-height: 1 !important; font-size: var(--udock-icon-size, 22px); vertical-align: middle !important; } .udock-bottom-nav .udock-nav-icon-wrap > i, .udock-bottom-nav .udock-nav-icon-wrap > .udock-icon-whatsapp, .udock-bottom-nav .udock-nav-icon-wrap > span[class^="udock-icon-"], .udock-bottom-nav .udock-nav-icon-wrap > span[class*=" udock-icon-"] { display: block !important; position: static !important; float: none !important; line-height: 1 !important; vertical-align: middle !important; margin: 0 !important; margin-block: 0 !important; margin-inline: 0 !important; padding: 0 !important; padding-block: 0 !important; padding-inline: 0 !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; inset: auto !important; transform: none !important; translate: none !important; rotate: none !important; scale: none !important; } .udock-bottom-nav .udock-nav-icon-wrap > i::before { display: block !important; position: static !important; line-height: 1 !important; vertical-align: middle !important; margin: 0 !important; padding: 0 !important; transform: none !important; } /* Theme color isolation — UnoDock-controlled visual colors must win over theme/builder CSS. */ .udock-bottom-nav:not(.udock-style-dock):not(.udock-style-floating-notch):not(.udock-style-pulse-notch){background:var(--udock-bg,#fff)!important} .udock-bottom-nav .udock-nav-item, .udock-bottom-nav .udock-nav-item:hover, .udock-bottom-nav .udock-nav-item:focus, .udock-bottom-nav .udock-nav-item:focus-visible, .udock-bottom-nav .udock-nav-item:active{background-color:transparent!important;background-image:none!important} .udock-bottom-nav .udock-nav-item i, .udock-bottom-nav .udock-nav-item .udock-icon-whatsapp{color:var(--udock-icon,#808080)!important} .udock-bottom-nav .udock-nav-item.udock-active i, .udock-bottom-nav .udock-nav-item.udock-active .udock-icon-whatsapp{color:var(--udock-icon-active,#16E2F5)!important} .udock-bottom-nav .udock-icon-whatsapp{background-color:currentColor!important} .udock-bottom-nav .udock-nav-label{color:var(--udock-button-text,var(--udock-text,#808080))!important} .udock-bottom-nav .udock-nav-item.udock-active .udock-nav-label{color:var(--udock-button-text-active,var(--udock-button-text,var(--udock-text,#808080)))!important} .udock-bottom-nav:not(.udock-underline-off) .udock-nav-item.udock-active .udock-nav-label::after{background:var(--udock-underline,#16E2F5)!important} .udock-bottom-nav.udock-style-dock{background:transparent!important} .udock-bottom-nav.udock-style-dock>.udock-dock-surface{background:var(--udock-bg,#fff)!important} .udock-bottom-nav.udock-style-floating-notch{background:transparent!important} .udock-bottom-nav.udock-style-floating-notch>.udock-notch-surface{background:var(--udock-bg,#fff)!important} .udock-bottom-nav.udock-style-pulse-notch{background:transparent!important} .udock-bottom-nav.udock-style-pulse-notch>.udock-pulse-surface{background:var(--udock-bg,#fff)!important} .udock-bottom-nav.udock-style-dock>.udock-nav-item .udock-nav-icon-wrap::before{background:var(--udock-dock-active-bg,var(--udock-bg,#fff))!important} .udock-cart-count-badge{background:#ef4444!important;color:#fff!important} .udock-wishlist-count-badge{background:#ec4899!important;color:#fff!important} .udock-search-overlay{background:rgba(11,15,25,.12)!important} .udock-search-form{background:rgba(255,255,255,.94)!important;border-color:rgba(148,163,184,.24)!important} .udock-search-icon{color:#6b7280!important} .udock-search-context{background:linear-gradient(135deg,rgba(36,157,240,.11),rgba(139,92,246,.12))!important;color:#5572c9!important} .udock-search-submit{background:linear-gradient(135deg,#249df0,#7c5cff)!important;color:#fff!important;border-color:transparent!important} .udock-search-submit svg,.udock-search-icon svg{color:inherit!important} .udock-search-submit svg path,.udock-search-icon svg path{stroke:currentColor!important} .udock-search-close{background:rgba(255,255,255,.92)!important;border-color:rgba(148,163,184,.22)!important;color:#667085!important} @media(prefers-color-scheme:dark){ .udock-search-overlay{background:rgba(2,6,15,.26)!important} .udock-search-form{background:rgba(18,24,36,.94)!important;border-color:rgba(148,163,184,.20)!important} .udock-search-icon{color:#9ca8ba!important} .udock-search-context{background:linear-gradient(135deg,rgba(36,157,240,.18),rgba(139,92,246,.20))!important;color:#b9c9ff!important} .udock-search-close{background:rgba(18,24,36,.94)!important;border-color:rgba(148,163,184,.20)!important;color:#cbd5e1!important} } .udock-menu-trigger-active{background-color:var(--udock-menu-btn-active-bg,transparent)!important} .udock-menu-panel{background-image:var(--udock-menu-panel-bg-layer,linear-gradient(#fff,#fff)),var(--udock-menu-panel-border-layer,linear-gradient(#e5e7eb,#e5e7eb))!important} .udock-menu-panel-socials{border-top-color:var(--udock-menu-panel-separator,rgba(0,0,0,.08))!important;color:var(--udock-menu-socials-color,var(--udock-menu-panel-text,#1f2937))!important} .udock-menu-panel-socials a{color:var(--udock-menu-socials-color,var(--udock-menu-panel-text,#1f2937))!important} .udock-menu-fullscreen-header,.udock-menu-fullscreen-buttons{border-color:var(--udock-menu-panel-separator,rgba(0,0,0,.08))!important} .udock-menu-close{background:none!important;border-color:transparent!important;color:var(--udock-menu-close-color,#1f2937)!important} .udock-menu-fullscreen .udock-menu-panel-list>li{background:var(--udock-menu-pill-bg,#fff)!important} .udock-menu-fullscreen-btn,.udock-menu-fullscreen-btn .udock-menu-item-icon{color:#fff!important} .udock-menu-panel-list li{border-bottom-color:var(--udock-menu-panel-separator,rgba(0,0,0,.08))!important} .udock-menu-panel-list a,.udock-menu-sublist a,.udock-menu-toggle{color:var(--udock-menu-panel-text,#1f2937)!important} .udock-pulse-dot{background:var(--udock-pulse-dot,#39FF14)!important} /* Interaction highlight isolation: keep mobile taps app-like and prevent theme/browser click flashes. */ .udock-bottom-nav a, .udock-bottom-nav button, .udock-search-overlay a, .udock-search-overlay button, .udock-menu-panel a, .udock-menu-panel button { -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none; } .udock-bottom-nav a:focus:not(:focus-visible), .udock-bottom-nav button:focus:not(:focus-visible), .udock-search-overlay a:focus:not(:focus-visible), .udock-search-overlay button:focus:not(:focus-visible), .udock-menu-panel a:focus:not(:focus-visible), .udock-menu-panel button:focus:not(:focus-visible), .udock-bottom-nav a:active, .udock-bottom-nav button:active, .udock-search-overlay a:active, .udock-search-overlay button:active, .udock-menu-panel a:active, .udock-menu-panel button:active { outline: none !important; } .udock-bottom-nav .udock-nav-item:hover, .udock-bottom-nav .udock-nav-item:focus, .udock-bottom-nav .udock-nav-item:active, .udock-menu-panel .udock-menu-panel-list a:hover, .udock-menu-panel .udock-menu-panel-list a:focus, .udock-menu-panel .udock-menu-panel-list a:active, .udock-menu-panel .udock-menu-panel-socials a:hover, .udock-menu-panel .udock-menu-panel-socials a:focus, .udock-menu-panel .udock-menu-panel-socials a:active, .udock-menu-panel .udock-menu-logo-link:hover, .udock-menu-panel .udock-menu-logo-link:focus, .udock-menu-panel .udock-menu-logo-link:active, .udock-menu-panel .udock-menu-close:hover, .udock-menu-panel .udock-menu-close:focus, .udock-menu-panel .udock-menu-close:active { background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* Keyboard users still receive a deliberate UnoDock focus indicator; touch taps do not. */ .udock-bottom-nav .udock-nav-item:focus-visible, .udock-search-submit:focus-visible, .udock-search-close:focus-visible, .udock-menu-panel .udock-menu-panel-list a:focus-visible, .udock-menu-panel .udock-menu-panel-socials a:focus-visible, .udock-menu-panel .udock-menu-logo-link:focus-visible, .udock-menu-panel .udock-menu-close:focus-visible, .udock-menu-panel .udock-menu-toggle:focus-visible, .udock-menu-panel .udock-menu-fullscreen-btn:focus-visible { outline: 2px solid #249df0 !important; outline-offset: 2px !important; } /* Glass isolation for styles with transparent outer wrappers. Blur belongs only to the actual bar surface, never to the wrapper area. */ .udock-bottom-nav.udock-style-dock.udock-glass, .udock-bottom-nav.udock-style-floating-notch.udock-glass, .udock-bottom-nav.udock-style-pulse-notch.udock-glass { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Glass blur ownership — keep the transparent wrapper clean while preserving the user-selected blur intensity on the real visible bar surface. */ .udock-bottom-nav.udock-glass:not(.udock-style-dock):not(.udock-style-floating-notch):not(.udock-style-pulse-notch) { -webkit-backdrop-filter: blur(var(--udock-glass-blur, 12px)) !important; backdrop-filter: blur(var(--udock-glass-blur, 12px)) !important; } .udock-bottom-nav.udock-style-dock.udock-glass > .udock-dock-surface, .udock-bottom-nav.udock-style-floating-notch.udock-glass > .udock-notch-surface, .udock-bottom-nav.udock-style-pulse-notch.udock-glass > .udock-pulse-surface { -webkit-backdrop-filter: blur(var(--udock-glass-blur, 12px)) !important; backdrop-filter: blur(var(--udock-glass-blur, 12px)) !important; } /* Glass backdrop-root fix — the real surface must see the page behind the nav. Do not isolate transparent-wrapper styles: isolation would prevent the child surface backdrop-filter from sampling the page behind UnoDock. */ .udock-bottom-nav.udock-style-dock, .udock-bottom-nav.udock-style-floating-notch, .udock-bottom-nav.udock-style-pulse-notch { isolation: auto !important; } /* Glass fallback for transparent-wrapper bar styles. These geometries remain visually glass-like through their translucent tint, but deliberately avoid backdrop blur to prevent wrapper/backdrop artifacts. */ .udock-bottom-nav.udock-style-dock.udock-glass > .udock-dock-surface, .udock-bottom-nav.udock-style-floating-notch.udock-glass > .udock-notch-surface, .udock-bottom-nav.udock-style-pulse-notch.udock-glass > .udock-pulse-surface { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Glass wrapper fallback — reliable blur for transparent-wrapper geometries. These bar types need the outer wrapper to own the backdrop sampling. Keep the support layer almost transparent so the page remains visually clean while the user-selected Blur intensity still produces a real glass effect. */ .udock-bottom-nav.udock-style-dock.udock-glass, .udock-bottom-nav.udock-style-floating-notch.udock-glass, .udock-bottom-nav.udock-style-pulse-notch.udock-glass { background: rgba(255,255,255,.018) !important; -webkit-backdrop-filter: blur(var(--udock-glass-blur, 12px)) !important; backdrop-filter: blur(var(--udock-glass-blur, 12px)) !important; } .udock-bottom-nav.udock-style-dock.udock-glass > .udock-dock-surface, .udock-bottom-nav.udock-style-floating-notch.udock-glass > .udock-notch-surface, .udock-bottom-nav.udock-style-pulse-notch.udock-glass > .udock-pulse-surface { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }