/* Urenus-style mega panel for the Blocksy header (us.similius.com) * * Paste into Appearance → Customize → Additional CSS, or enqueue from a child theme. * Scoped to the desktop nav (#menu-main-menu); the mobile offcanvas copy * (#menu-main-menu-1) is untouched. * * Every top-level dropdown gets the same panel chrome — full-bleed background, * left edge on HOME, same typography, no dashed dividers or arrows. * * The COLUMN layout only applies where there is a third level to make columns * out of (Catalog, Help). Flat two-level menus (Homeopathic Remedies, * Supplements, Materia Medica) get the same panel with a single stacked list. * * Marker selectors, used throughout: * .sub-menu:has(> .menu-item-has-children) → 3-level, gets columns * .sub-menu:not(:has(> .menu-item-has-children)) → flat, single list * * NOTE: urenus.com keeps its flat menus as small stock dropdowns. Unifying them * is a deliberate departure — delete the "flat menus" block to go back. */ /* The mega panel lives inside the header, so the HEADER's z-index is what competes with page content — the panel's own value only orders things within it. Blocksy ships #header { z-index: 50 }, which loses to PayPal's express button (iframe z-index 100) and its #smart-menu (z-index 300). 1000 clears both while staying under PayPal's own modal overlay (100000), so their payment window still opens above the site. */ #header.ct-header { z-index: 1000; } /* Inside the header, the mini-cart dropdown ships at z-index 15 — below the mega panel's 100 — so an open panel paints its full-bleed white band over the cart. Both live in the same stacking context, so lifting the cart above the panel is enough. (Blocksy's offcanvas drawers sit at 999999 and are unaffected.) */ .ct-header .ct-cart-content { z-index: 200; } @media (min-width: 1000px) { /* Anchor the panel to the menu list itself, so its left edge lands on the first menu item (HOME) whatever the header layout or row. */ #menu-main-menu { position: relative; } /* Every dropdown detaches from its menu item and aligns to the nav. */ #menu-main-menu > .menu-item-has-children { position: static; } /* Top-level nav items (HOME, CATALOG, …). Blocksy sets 12px from the Customizer via [data-header*="type-1"] … [data-id="menu"] > ul > li > a; the #id here outranks it. */ #menu-main-menu > li > .ct-menu-link { --theme-font-size: 14px; } /* Hover underline — top-level nav items */ #menu-main-menu > li > .ct-menu-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; } /* --- Panel chrome: every top-level dropdown ------------------------- */ #menu-main-menu > .menu-item-has-children > .sub-menu { /* half the item spacing = the padding inside HOME's link, so the content lines up with the HOME text rather than its box */ left: calc(var(--menu-items-spacing, 25px) / 2); right: auto; width: 1400px; max-width: calc(100vw - 40px); margin-top: 0; /* Blocksy ships z-index: 10 on dropdowns; raise it so Brizy sections, sliders and sticky bars in the page can't paint over the panel. */ z-index: 100; display: flex; align-items: flex-start; gap: 40px; padding: 45px 0 55px; border-radius: 0; /* Full-bleed background is painted by ::before below, NOT by a spread box-shadow. The old spread approach needed clip-path to stop it covering the header, and opening that clip to let a drop shadow through also let 22px of white band escape — which read as a doubled line under the panel. A real element has an actual bottom edge, so no clip is needed. */ box-shadow: none; clip-path: none; background: transparent; /* Blocksy applies `overflow: hidden` to any panel WITHOUT .ct-active: [class*=animated-submenu]:not(.ct-active):not([class*=ct-mega-menu]) > .sub-menu { overflow: hidden; max-height: calc(…) } On a switch that lands the instant the panel loses .ct-active — while it is still ~80% opaque — and it clips the ::before band's -100vmax extensions. The full-bleed white vanishes at the left and right edges mid-fade and the page flashes through: the black flicker. (The old spread box-shadow never showed this, because overflow does not clip an element's own box-shadow.) */ overflow: visible; max-height: none; /* Blocksy slides the panel in: translate3d(0, 10px, 0) easing to 0. While it slides, the panel — and its background band — has not reached the header yet, so a few-pixel strip at the seam shows the page behind and reads as a flickering line. Dropping the slide leaves the fade, which needs no gap. */ transform: none; } /* The full-bleed background band. Sits behind the columns via z-index:-1, and carries the hairline as its own border-bottom so the line always ends exactly where the panel ends. Blocksy uses ::before as an invisible hover bridge above the panel — it is not needed here because margin-top is 0, so the panel is already flush against the header row. The transform/width/height resets below undo that bridge styling. */ #menu-main-menu > .menu-item-has-children > .sub-menu::before { content: ""; position: absolute; top: 0; bottom: 0; left: -100vmax; right: -100vmax; width: auto; height: auto; transform: none; background: var(--dropdown-background-color, #ffffff); border-bottom: 1px solid rgba(41, 51, 61, .08); z-index: -1; pointer-events: none; } /* Drop shadow under an open panel — a gradient, not a box-shadow, so it fades properly. Absolutely positioned, so it never becomes a flex column. */ #menu-main-menu > .menu-item-has-children > .sub-menu::after { content: ""; position: absolute; top: 100%; left: -100vmax; right: -100vmax; height: 22px; background: linear-gradient( to bottom, rgba(41, 51, 61, .20), rgba(41, 51, 61, .08) 40%, rgba(41, 51, 61, 0) ); pointer-events: none; /* Hidden by default, and hidden instantly on close. Blocksy cross-fades panels: for ~200ms while moving between two parent items BOTH panels are on screen (measured 0.42 / 0.58 opacity at 60ms). An always-on shadow from the incoming, shorter panel then paints a dark band straight across the middle of the outgoing, taller one — the black flicker. Delaying it past the cross-fade removes that. */ opacity: 0; transition: opacity .12s ease 0s; } #menu-main-menu > .menu-item-has-children.ct-active > .sub-menu::after { opacity: 1; transition: opacity .18s ease .22s; /* .22s = wait out the cross-fade */ } /* Narrower desktops: a 1400px panel anchored to the nav runs off the right edge, because the nav does not start at the viewport edge. The old fix centred it with `left: 50%`, but 50% resolves against the menu