/* ========================================================= Nuni — V3 Header Fixed-position navbar that floats over page content. On scroll past the threshold, the .is-scrolled class is toggled (see v3-header.js) and the bar gains translucent sand background + backdrop blur + border-bottom + shadow. Because position: fixed takes the navbar out of normal flow, the template post that hosts it adds NO height to the document — there is no whitespace below it. Pages that should pad their first section under the navbar do so themselves (the Hero V3 widget already accounts for ~92px of nav at the top of its copy column). ========================================================= */ /* ===== WP admin bar offset ===== When a logged-in user views the site, WordPress adds the .admin-bar class to and renders a fixed admin bar at top: 0 (32px tall on desktop, 46px on mobile ≤782px). Without this offset our position:fixed nav + drawers sit *behind* that bar. The html margin-top WP injects only pushes normal- flow content, not fixed-positioned elements. */ .admin-bar .nuni-v3-nav, .admin-bar .nuni-v3-scrim, .admin-bar .nuni-v3-cart-drawer, .admin-bar .nuni-v3-mm-drawer { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .nuni-v3-nav, .admin-bar .nuni-v3-scrim, .admin-bar .nuni-v3-cart-drawer, .admin-bar .nuni-v3-mm-drawer { top: 46px; } } /* Strip Elementor wrapper padding/margin so the template that hosts this widget contributes zero block-flow height. We attack three layers: the widget itself, the container that holds it (e-con / e-con-inner / e-con-boxed), and the Elementor header location element. */ .elementor-widget-nuni-v3-header, .elementor-widget-nuni-v3-header > .elementor-widget-container { margin: 0 !important; padding: 0 !important; line-height: 0; min-height: 0 !important; } /* Any Elementor container wrapping the widget. Covers HFE / UAE / Pro Theme Builder + every flavour of v4 container (e-con, e-con-inner, e-con-boxed, e-con-full). The `:has()` selector targets only the chain that actually leads to a V3 header widget — siblings keep their padding. */ .e-con:has(> .elementor-widget-nuni-v3-header), .e-con:has(> .e-con-inner > .elementor-widget-nuni-v3-header), .e-con-inner:has(> .elementor-widget-nuni-v3-header), .e-con-boxed:has(.elementor-widget-nuni-v3-header), .e-con-full:has(.elementor-widget-nuni-v3-header), .elementor-section:has(.elementor-widget-nuni-v3-header), .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-nuni-v3-header), .elementor-widget-wrap:has(> .elementor-widget-nuni-v3-header) { padding: 0 !important; margin: 0 !important; min-height: 0 !important; width: 100% !important; max-width: none !important; background: transparent !important; } /* The Elementor header location element itself (the

emitted by theme builders). Hello Elementor / Pro / HFE all render it as `

…

`. */ header.elementor-location-header, .elementor-location-header, .elementor-location-header > section, .elementor-location-header > div, .elementor-location-header > .e-con, .elementor-location-header > .elementor-section { margin: 0 !important; padding: 0 !important; min-height: 0 !important; background: transparent !important; border: 0 !important; } /* Nav height token — derived from the .nuni-v3-nav padding (22px top + 22px bottom) plus the 48px logo at full size, with mobile breakpoints stepping down to match the responsive padding/logo. The body uses this to reserve space when the nav is opaque (default). */ body { --nuni-nav-h: 92px; } @media (max-width: 820px) { body { --nuni-nav-h: 84px; } } @media (max-width: 640px) { body { --nuni-nav-h: 76px; } } @media (max-width: 380px) { body { --nuni-nav-h: 64px; } } /* Zero whatever the host theme adds above the Elementor header template, then reserve room for the fixed nav below it. Transparent (hero) pages let the nav float over their content and need no offset. */ body.nuni-has-hero-v3-nav { margin-top: 0 !important; } body.nuni-has-hero-v3-nav:not(.nuni-nav-transparent) { padding-top: var(--nuni-nav-h) !important; } body.nuni-has-hero-v3-nav.nuni-nav-transparent { padding-top: 0 !important; } /* ----- Nav shell ----- Default is the opaque sand backdrop (matches what `.is-scrolled` used to add). Pages that explicitly opt in via Page settings → Nuni → Header (or that contain a Hero V3 widget, via auto-detect) get the body class `nuni-nav-transparent`, which strips the backdrop so the nav floats over the hero. Hero Stage pages stay opaque in auto mode — flip the page setting to "Transparent" if you want overlay on a stage. Scroll past the threshold and `.is-scrolled` restores the backdrop on those pages too. */ .nuni-v3-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 22px 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px; background: rgba(232, 213, 189, 0.88); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid rgba(28, 20, 12, 0.12); box-shadow: 0 6px 18px -14px rgba(42, 31, 20, 0.35); font-family: var(--e-global-typography-primary-font-family, 'Gilroy'), 'Inter', system-ui, -apple-system, Helvetica, Arial, sans-serif; color: var(--e-global-color-text, #1C140C); line-height: 1.2; transition: padding 280ms cubic-bezier(.6, .05, .2, 1), background 280ms cubic-bezier(.6, .05, .2, 1), box-shadow 280ms cubic-bezier(.6, .05, .2, 1), border-color 280ms cubic-bezier(.6, .05, .2, 1); } /* Compact mode when the page is scrolled — same backdrop, just smaller padding and logo. */ .nuni-v3-nav.is-scrolled { padding: 12px 56px; } /* Transparent overlay mode — hero pages only. Active when: - body.nuni-nav-transparent (set by plugin per page setting / hero auto-detect) - AND the bar isn't past the scroll threshold (.is-scrolled). Once the user scrolls, the default backdrop returns. */ body.nuni-nav-transparent .nuni-v3-nav:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; } /* ----- Brand ----- */ .nuni-v3-nav__brand { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; color: inherit; } .nuni-v3-nav__brand img { height: 48px; width: auto; display: block; transition: height 280ms cubic-bezier(.6, .05, .2, 1); } .nuni-v3-nav.is-scrolled .nuni-v3-nav__brand img { height: 36px; } .nuni-v3-nav__brand-fallback { font-family: 'CamelloRough', var(--e-global-typography-secondary-font-family, 'Cormorant Garamond'), serif; font-size: 24px; font-weight: 400; letter-spacing: -0.01em; color: inherit; } /* ----- Links ----- */ .nuni-v3-nav__links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: 38px; } .nuni-v3-nav__links a { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: inherit; text-decoration: none; padding: 6px 0; border-bottom: 1.5px solid transparent; transition: border-color 180ms ease, color 180ms ease; display: inline-flex; align-items: center; gap: 4px; } .nuni-v3-nav__links a:hover, .nuni-v3-nav__links .current-menu-item > a, .nuni-v3-nav__links .current_page_item > a { border-bottom-color: currentColor; } .nuni-v3-nav__links .plus { font-size: 12px; opacity: 0.55; } /* ----- Dropdowns (desktop nav) ----- Parents with children get a downward chevron (CSS-only). On hover or focus-within, the sub-menu fades up into a sand-tinted card with the same blur/border treatment as the scrolled navbar — so it reads as a continuation of the bar rather than a separate object. */ .nuni-v3-nav__links .menu-item-has-children { position: relative; } .nuni-v3-nav__links .menu-item-has-children > a { position: relative; } .nuni-v3-nav__links .menu-item-has-children > a::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: 0.55; transition: transform 240ms cubic-bezier(.6, .05, .2, 1), opacity 180ms ease; } .nuni-v3-nav__links .menu-item-has-children:hover > a::after, .nuni-v3-nav__links .menu-item-has-children:focus-within > a::after { transform: rotate(225deg) translateY(0); opacity: 1; } .nuni-v3-nav__links .sub-menu { list-style: none; margin: 0; padding: 8px 0; display: block; position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 220px; background: rgba(244, 236, 221, 0.96); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border: 1px solid rgba(28, 20, 12, 0.08); border-radius: 8px; box-shadow: 0 22px 44px -22px rgba(42, 31, 20, 0.45); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 220ms cubic-bezier(.6, .05, .2, 1), transform 220ms cubic-bezier(.6, .05, .2, 1), visibility 220ms; z-index: 60; } /* Invisible hover bridge so the cursor can travel from parent into the panel without the panel closing in the gap. */ .nuni-v3-nav__links .menu-item-has-children > .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } .nuni-v3-nav__links .menu-item-has-children:hover > .sub-menu, .nuni-v3-nav__links .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nuni-v3-nav__links .sub-menu li { margin: 0; padding: 0; list-style: none; } .nuni-v3-nav__links .sub-menu a { display: block; padding: 9px 22px; font-size: 13px; font-weight: 400; letter-spacing: 0.01em; color: var(--e-global-color-text, #1C140C); text-decoration: none; white-space: nowrap; border-bottom: 0; transition: color 180ms ease, background 180ms ease; } .nuni-v3-nav__links .sub-menu a:hover, .nuni-v3-nav__links .sub-menu .current-menu-item > a, .nuni-v3-nav__links .sub-menu .current_page_item > a { color: var(--e-global-color-secondary, #8A765C); background: rgba(28, 20, 12, 0.04); border-bottom: 0; } /* ----- Actions ----- */ .nuni-v3-nav__actions { display: flex; justify-content: flex-end; align-items: center; gap: 22px; } .nuni-v3-nav__actions a, .nuni-v3-nav__actions button { color: inherit; display: inline-flex; align-items: center; justify-content: center; transition: opacity 180ms ease; background: transparent; border: 0; padding: 0; cursor: pointer; text-decoration: none; line-height: 0; } .nuni-v3-nav__actions a:hover, .nuni-v3-nav__actions button:hover { opacity: 0.65; } .nuni-v3-nav__actions svg { width: 20px; height: 20px; display: block; } /* ----- Cart trigger + counter ----- */ .nuni-v3-nav__cart { position: relative; } .nuni-v3-nav__cart-count { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--e-global-color-text, #1C140C); color: #F4ECDD; border-radius: 999px; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .nuni-v3-nav__cart-count[data-count="0"] { display: none; } /* Hamburger is hidden on desktop — it only appears on mobile (≤820px). Match the specificity of the .nuni-v3-nav__actions button rule above (which sets display: inline-flex) so this !important-free hide wins. */ .nuni-v3-nav__actions .nuni-v3-nav__hamburger { display: none; } /* Kill any inherited theme/Elementor hover colors on the hamburger (some themes paint button:hover pink). Keep the opacity-only feel. */ .nuni-v3-nav__hamburger, .nuni-v3-nav__hamburger:hover, .nuni-v3-nav__hamburger:focus, .nuni-v3-nav__hamburger:focus-visible, .nuni-v3-nav__hamburger:active { color: inherit; background: transparent; box-shadow: none; outline: none; } /* ----- Responsive ----- Mobile tap-target sizing: Apple HIG / Material both recommend ≥44px minimum tap target. On the v3 nav the only two interactive elements on the bar at phone widths are the cart and the hamburger, so both get a 44×44 button with a 26×26 icon. That feels comfortable to thumb without making the bar feel oversized. */ @media (max-width: 820px) { .nuni-v3-nav { padding: 18px 20px; grid-template-columns: auto 1fr auto; gap: 12px; } .nuni-v3-nav.is-scrolled { padding: 12px 20px; } .nuni-v3-nav__brand { order: 0; } .nuni-v3-nav__links { display: none; } .nuni-v3-nav__actions { order: 2; gap: 4px; } /* Search + Account live inside the hamburger drawer on mobile. Cart stays on the bar (it's the higher-frequency action). */ .nuni-v3-nav__actions .nuni-v3-nav__icon--search, .nuni-v3-nav__actions .nuni-v3-nav__icon--account { display: none; } /* Every remaining action button (cart + hamburger) gets a full 44×44 tap target — the visible icon stays its old size, but the click area is now thumb-friendly. The negative right margin on the last button visually re-aligns it with the bar's right padding so the bigger hit area doesn't push the bar's content offset. */ .nuni-v3-nav__actions a, .nuni-v3-nav__actions button { width: 44px; height: 44px; border-radius: 50%; } .nuni-v3-nav__actions svg { width: 26px; height: 26px; } /* Hamburger visible on mobile only, sits at the far right. */ .nuni-v3-nav__actions .nuni-v3-nav__hamburger { display: inline-flex; align-items: center; justify-content: center; order: 3; margin-right: -10px; } /* Pull the cart inward a touch so the cart-count badge doesn't hug the next button. */ .nuni-v3-nav__actions .nuni-v3-nav__cart { margin-right: 0; } /* Cart count badge needs to sit above the larger button — recompute its absolute offset relative to the 44×44 button. */ .nuni-v3-nav__cart-count { top: 4px; right: 4px; } } @media (max-width: 640px) { .nuni-v3-nav { padding: 14px 20px; } .nuni-v3-nav.is-scrolled { padding: 10px 20px; } .nuni-v3-nav__brand img { height: 48px; } .nuni-v3-nav.is-scrolled .nuni-v3-nav__brand img { height: 36px; } /* Keep the action buttons at 44×44 here — we DON'T shrink them like the old code did. Small phones need the tap target the most. */ } @media (max-width: 380px) { .nuni-v3-nav { padding: 12px 16px; } .nuni-v3-nav.is-scrolled { padding: 8px 16px; } .nuni-v3-nav__brand img { height: 40px; } .nuni-v3-nav.is-scrolled .nuni-v3-nav__brand img { height: 32px; } /* Slightly tighter at ultra-narrow widths so the bar still fits the logo + cart + hamburger without crowding, but never below 42×42. */ .nuni-v3-nav__actions a, .nuni-v3-nav__actions button { width: 42px; height: 42px; } .nuni-v3-nav__actions svg { width: 24px; height: 24px; } .nuni-v3-nav__actions .nuni-v3-nav__hamburger { margin-right: -6px; } } /* ============================================ Cart drawer + Mobile menu drawer Shared scrim, both slide in from the right. ============================================ */ .nuni-v3-scrim { position: fixed; inset: 0; background: rgba(28, 20, 12, 0.42); opacity: 0; visibility: hidden; z-index: 99; transition: opacity 280ms cubic-bezier(.6, .05, .2, 1), visibility 280ms; cursor: pointer; } .nuni-v3-scrim.is-open { opacity: 1; visibility: visible; } .nuni-v3-cart-drawer, .nuni-v3-mm-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); background: #FBF7EE; color: #1C140C; z-index: 100; display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform 320ms cubic-bezier(.6, .05, .2, 1), visibility 320ms; box-shadow: -24px 0 60px -30px rgba(42, 31, 20, 0.4); font-family: var(--e-global-typography-primary-font-family, 'Gilroy'), 'Inter', system-ui, sans-serif; } .nuni-v3-cart-drawer.is-open, .nuni-v3-mm-drawer.is-open { transform: translateX(0); visibility: visible; } .nuni-v3-cart-drawer__head, .nuni-v3-mm-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid rgba(28, 20, 12, 0.08); flex: 0 0 auto; } .nuni-v3-cart-drawer__title, .nuni-v3-mm-drawer__title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0.02em; color: inherit; display: inline-flex; align-items: center; gap: 8px; } .nuni-v3-mm-drawer__logo { display: block; height: 28px; width: auto; max-width: 50%; object-fit: contain; } .nuni-v3-cart-drawer__count { font-size: 13px; font-weight: 400; color: rgba(28, 20, 12, 0.55); } .nuni-v3-cart-drawer__close, .nuni-v3-mm-drawer__close { background: transparent; border: 0; padding: 4px; cursor: pointer; color: inherit; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; transition: background 180ms ease; } .nuni-v3-cart-drawer__close:hover, .nuni-v3-mm-drawer__close:hover { background: rgba(28, 20, 12, 0.06); } .nuni-v3-cart-drawer__close svg, .nuni-v3-mm-drawer__close svg { width: 20px; height: 20px; } .nuni-v3-cart-drawer__content { flex: 1 1 auto; overflow-y: hidden; display: flex; flex-direction: column; padding: 0; } /* --- Mini-cart list (scrollable) --- */ .nuni-v3-cart-drawer .woocommerce-mini-cart { flex: 1 1 auto; overflow-y: auto; list-style: none !important; margin: 0 !important; padding: 6px 24px 16px !important; } /* Each item — image left, title + quantity stacked, remove top-right */ .nuni-v3-cart-drawer .woocommerce-mini-cart-item, .nuni-v3-cart-drawer .mini_cart_item { position: relative; display: block; list-style: none !important; padding: 16px 32px 16px 0 !important; margin: 0 !important; border-bottom: 1px solid rgba(28, 20, 12, 0.06); text-align: left; font-size: 14px; line-height: 1.35; } .nuni-v3-cart-drawer .woocommerce-mini-cart-item:last-child, .nuni-v3-cart-drawer .mini_cart_item:last-child { border-bottom: 0; } /* The product link wraps the thumbnail AND the title text. Make it a flex row so the image stays a fixed-size square next to the title. */ .nuni-v3-cart-drawer .woocommerce-mini-cart-item > a:not(.remove), .nuni-v3-cart-drawer .mini_cart_item > a:not(.remove) { display: flex !important; align-items: center; gap: 14px; color: inherit !important; text-decoration: none !important; font-weight: 500; line-height: 1.35; padding: 0 !important; margin: 0 !important; } .nuni-v3-cart-drawer .woocommerce-mini-cart-item img, .nuni-v3-cart-drawer .mini_cart_item img { width: 60px !important; height: 60px !important; min-width: 60px !important; max-width: 60px !important; object-fit: cover !important; border-radius: 6px !important; flex: 0 0 60px !important; display: block !important; margin: 0 !important; padding: 0 !important; float: none !important; } /* Quantity row sits below the title, aligned past the thumbnail */ .nuni-v3-cart-drawer .woocommerce-mini-cart-item .quantity, .nuni-v3-cart-drawer .mini_cart_item .quantity { display: block !important; margin: 6px 0 0 74px !important; font-size: 13px; color: rgba(28, 20, 12, 0.6); font-weight: 500; } .nuni-v3-cart-drawer .woocommerce-mini-cart-item .quantity .woocommerce-Price-amount, .nuni-v3-cart-drawer .mini_cart_item .quantity .woocommerce-Price-amount { color: #1C140C; font-weight: 600; } .nuni-v3-cart-drawer .woocommerce-mini-cart-item .variation, .nuni-v3-cart-drawer .mini_cart_item .variation { margin: 4px 0 0 74px !important; padding: 0 !important; font-size: 12px; color: rgba(28, 20, 12, 0.55); } .nuni-v3-cart-drawer .woocommerce-mini-cart-item .variation dt, .nuni-v3-cart-drawer .woocommerce-mini-cart-item .variation dd { display: inline; margin: 0; } /* Remove "×" button — round, top-right of the row */ .nuni-v3-cart-drawer .woocommerce-mini-cart-item .remove, .nuni-v3-cart-drawer .mini_cart_item .remove, .nuni-v3-cart-drawer .woocommerce-mini-cart-item .remove_from_cart_button { position: absolute !important; top: 14px !important; right: 0 !important; width: 24px !important; height: 24px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: rgba(28, 20, 12, 0.4) !important; font-size: 20px !important; line-height: 1 !important; font-weight: 400 !important; text-decoration: none !important; display: inline-flex !important; align-items: center; justify-content: center; transition: background 180ms ease, color 180ms ease; } .nuni-v3-cart-drawer .woocommerce-mini-cart-item .remove:hover, .nuni-v3-cart-drawer .mini_cart_item .remove:hover { background: rgba(28, 20, 12, 0.06) !important; color: #1C140C !important; } /* --- Total + buttons footer (sticks to bottom) --- */ .nuni-v3-cart-drawer .woocommerce-mini-cart__total { flex: 0 0 auto; display: flex !important; justify-content: space-between; align-items: baseline; padding: 18px 24px 8px !important; border-top: 1px solid rgba(28, 20, 12, 0.12); margin: 0 !important; font-size: 14px; font-weight: 600; color: #1C140C; } .nuni-v3-cart-drawer .woocommerce-mini-cart__total strong { font-weight: 600; } .nuni-v3-cart-drawer .woocommerce-mini-cart__total .woocommerce-Price-amount { font-size: 17px; font-weight: 700; } .nuni-v3-cart-drawer .woocommerce-mini-cart__buttons { flex: 0 0 auto; display: flex !important; flex-direction: row; gap: 8px; padding: 8px 24px 24px !important; margin: 0 !important; } .nuni-v3-cart-drawer .woocommerce-mini-cart__buttons .button { flex: 1 1 0; display: inline-flex !important; align-items: center; justify-content: center; padding: 13px 18px !important; border-radius: 999px !important; font-family: var(--e-global-typography-primary-font-family, 'Gilroy'), 'Inter', system-ui, sans-serif; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.02em; text-decoration: none !important; text-align: center; border: 1.5px solid #1C140C !important; background: transparent !important; color: #1C140C !important; text-transform: none !important; line-height: 1 !important; transition: background 180ms ease, border-color 180ms ease, color 180ms ease; width: auto !important; min-width: 0 !important; white-space: nowrap; } .nuni-v3-cart-drawer .woocommerce-mini-cart__buttons .button:hover { background: rgba(28, 20, 12, 0.06) !important; } .nuni-v3-cart-drawer .woocommerce-mini-cart__buttons .button.checkout, .nuni-v3-cart-drawer .woocommerce-mini-cart__buttons .checkout.wc-forward { background: #1C140C !important; color: #F4ECDD !important; border-color: #1C140C !important; } .nuni-v3-cart-drawer .woocommerce-mini-cart__buttons .button.checkout:hover, .nuni-v3-cart-drawer .woocommerce-mini-cart__buttons .checkout.wc-forward:hover { background: #B68A42 !important; border-color: #B68A42 !important; color: #F4ECDD !important; } .nuni-v3-cart-drawer .woocommerce-mini-cart__empty-message { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center; padding: 40px 24px !important; margin: 0 !important; color: rgba(28, 20, 12, 0.55); font-size: 14px; } /* Mobile menu drawer */ .nuni-v3-mm-drawer__content { flex: 1 1 auto; overflow-y: auto; padding: 12px 0; } .nuni-v3-mm-drawer__list, .nuni-v3-mm-drawer__list.menu { list-style: none !important; margin: 0 !important; padding: 0 !important; } .nuni-v3-mm-drawer__list li { list-style: none !important; border-bottom: 1px solid rgba(28, 20, 12, 0.06); margin: 0 !important; padding: 0 !important; } .nuni-v3-mm-drawer__list li:last-child { border-bottom: 0; } .nuni-v3-mm-drawer__list a { display: flex !important; align-items: center; gap: 8px; padding: 18px 24px !important; margin: 0 !important; font-family: var(--e-global-typography-primary-font-family, 'Gilroy'), 'Inter', system-ui, sans-serif; font-size: 16px; font-weight: 500; letter-spacing: 0.01em; color: inherit !important; text-decoration: none !important; background: transparent; transition: background 180ms ease, color 180ms ease; border: 0; -webkit-tap-highlight-color: transparent; /* kill iOS pink/blue flash */ } /* Defeat any theme :hover/:focus/:active that paints links pink. */ .nuni-v3-mm-drawer__list a:hover, .nuni-v3-mm-drawer__list a:focus, .nuni-v3-mm-drawer__list a:focus-visible, .nuni-v3-mm-drawer__list a:active { color: inherit !important; background: rgba(28, 20, 12, 0.04); outline: 0; } .nuni-v3-mm-drawer__list .current-menu-item > a, .nuni-v3-mm-drawer__list .current_page_item > a { font-weight: 600; } .nuni-v3-mm-drawer__list .plus { font-size: 13px; opacity: 0.45; margin-left: auto; } /* ----- Mobile drawer accordion ----- Parents with children get a chevron toggle injected by JS. The parent still navigates normally; the toggle is a separate button that expands the sub-menu inline. Closed by default. Layout uses flex-wrap so whitespace text nodes between WP nav walker output (between and ) don't break placement the way they can in CSS grid. */ .nuni-v3-mm-drawer__list .menu-item-has-children { display: flex !important; flex-wrap: wrap; align-items: center; width: 100%; } .nuni-v3-mm-drawer__list .menu-item-has-children > a { flex: 1 1 0; min-width: 0; } .nuni-v3-mm-drawer__expander { flex: 0 0 auto; background: transparent !important; border: 0 !important; padding: 18px 22px; min-width: 56px; cursor: pointer; color: inherit !important; display: inline-flex; align-items: center; justify-content: center; transition: background 180ms ease, color 180ms ease; border-left: 1px solid rgba(28, 20, 12, 0.06) !important; -webkit-tap-highlight-color: transparent; box-shadow: none !important; outline: none !important; } /* Defeat any theme :hover/:focus/:active that paints buttons pink. */ .nuni-v3-mm-drawer__expander:hover, .nuni-v3-mm-drawer__expander:focus, .nuni-v3-mm-drawer__expander:focus-visible, .nuni-v3-mm-drawer__expander:active { background: rgba(28, 20, 12, 0.04) !important; color: inherit !important; outline: none !important; box-shadow: none !important; } .nuni-v3-mm-drawer__expander svg { width: 16px; height: 16px; transition: transform 280ms cubic-bezier(.6, .05, .2, 1); display: block; } .nuni-v3-mm-drawer__list .menu-item-has-children.is-open > .nuni-v3-mm-drawer__expander svg { transform: rotate(180deg); } /* Closed state — hard-hidden so no theme rule can override. */ .nuni-v3-mm-drawer__list .menu-item-has-children .sub-menu, .nuni-v3-mm-drawer__list .menu-item-has-children > .sub-menu { display: none !important; } /* Open state — descendant selector (not just direct child) so themes that wrap the in an extra div still get covered. */ .nuni-v3-mm-drawer__list .menu-item-has-children.is-open .sub-menu, .nuni-v3-mm-drawer__list .menu-item-has-children.is-open > .sub-menu { display: block !important; flex: 0 0 100% !important; width: 100% !important; list-style: none !important; margin: 0 !important; padding: 0 !important; background: rgba(28, 20, 12, 0.03) !important; max-height: none !important; height: auto !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; } /* ----- Reveal animation ----- The sub-menu itself does a soft top-down curtain (clip-path) + slide + fade, and each child link cascades in from the left with a small stagger. Triggers off the `is-open` class change — runs together with the inline-style display flip. Respects users with prefers-reduced-motion enabled. */ .nuni-v3-mm-drawer__list .menu-item-has-children.is-open .sub-menu { animation: nuniMmReveal 320ms cubic-bezier(.6, .05, .2, 1) both; transform-origin: top center; } @keyframes nuniMmReveal { 0% { opacity: 0; -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); transform: translateY(-6px); } 100% { opacity: 1; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); transform: translateY(0); } } .nuni-v3-mm-drawer__list .menu-item-has-children.is-open .sub-menu > li { animation: nuniMmItemReveal 280ms cubic-bezier(.6, .05, .2, 1) both; opacity: 0; } .nuni-v3-mm-drawer__list .menu-item-has-children.is-open .sub-menu > li:nth-child(1) { animation-delay: 80ms; } .nuni-v3-mm-drawer__list .menu-item-has-children.is-open .sub-menu > li:nth-child(2) { animation-delay: 120ms; } .nuni-v3-mm-drawer__list .menu-item-has-children.is-open .sub-menu > li:nth-child(3) { animation-delay: 160ms; } .nuni-v3-mm-drawer__list .menu-item-has-children.is-open .sub-menu > li:nth-child(4) { animation-delay: 200ms; } .nuni-v3-mm-drawer__list .menu-item-has-children.is-open .sub-menu > li:nth-child(5) { animation-delay: 240ms; } .nuni-v3-mm-drawer__list .menu-item-has-children.is-open .sub-menu > li:nth-child(n+6) { animation-delay: 280ms; } @keyframes nuniMmItemReveal { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .nuni-v3-mm-drawer__list .menu-item-has-children.is-open .sub-menu, .nuni-v3-mm-drawer__list .menu-item-has-children.is-open .sub-menu > li { animation: none !important; opacity: 1 !important; transform: none !important; -webkit-clip-path: none !important; clip-path: none !important; } } .nuni-v3-mm-drawer__list .sub-menu li { list-style: none !important; border-bottom: 1px solid rgba(28, 20, 12, 0.05) !important; margin: 0 !important; padding: 0 !important; display: block !important; } .nuni-v3-mm-drawer__list .sub-menu li:last-child { border-bottom: 0 !important; } .nuni-v3-mm-drawer__list .sub-menu a { display: block !important; padding: 14px 24px 14px 42px !important; font-size: 14px; font-weight: 400; color: inherit !important; text-decoration: none !important; transition: background 180ms ease; } .nuni-v3-mm-drawer__list .sub-menu a:hover, .nuni-v3-mm-drawer__list .sub-menu a:focus, .nuni-v3-mm-drawer__list .sub-menu a:active { background: rgba(28, 20, 12, 0.05) !important; color: inherit !important; } /* Drawer footer — holds the search / account links that get demoted from the bar on mobile. Sits below the menu list, separated by a hairline. */ .nuni-v3-mm-drawer__footer { flex: 0 0 auto; border-top: 1px solid rgba(28, 20, 12, 0.08); padding: 4px 0 8px; } .nuni-v3-mm-drawer__action { display: flex; align-items: center; gap: 14px; padding: 16px 24px; font-family: var(--e-global-typography-primary-font-family, 'Gilroy'), 'Inter', system-ui, sans-serif; font-size: 15px; font-weight: 500; color: inherit; text-decoration: none; transition: background 180ms ease; } .nuni-v3-mm-drawer__action:hover, .nuni-v3-mm-drawer__action:focus-visible { background: rgba(28, 20, 12, 0.04); outline: 0; } .nuni-v3-mm-drawer__action svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--e-global-color-text, #1C140C); } /* When any drawer is open, lock body scroll */ body.nuni-v3-drawer-open { overflow: hidden; }