/* Rogue re-brand for the MP13 Glass Menu (theme-side override — no plugin edits).
- Layers pour VIOLET → PINK → VOLT with ANGULAR/diagonal edges (not soft waves).
- Dark frosted-glass panel + light text (plugin defaults were the old tahini brand). */
/* 1) Re-map the plugin's palette tokens to Rogue (recolors layers 1,2,5 + text) */
.mp13-glass-menu, .y-mobile-menu {
--c-pal-1: #A9CF3F; /* volt green (leading edge / layer 5) */
--c-pal-2: #DB1E79; /* gradient pink */
--c-pal-3: #DB1E79; /* pink (labels) */
--c-pal-4: #7B4AA8; /* violet (layer 1 back / hover) */
--c-pal-5: #E6E6E6; /* light ink */
--c-pal-6: #FFFFFF; /* nav link text → white on dark glass */
--c-accent-sage: #A9CF3F;
}
/* 2) FROSTED DARK GLASS: kill the opaque colour pour that was tinting everything
reddish. The pour layers become FAINT tints; the frost + backdrop-blur live on
layer 6 (the top surface) so the page behind reads through. */
.mp13-glass-menu__layer--1, .y-mobile-menu__layer--1 { background: rgba(92, 53, 133, 0.12) !important; }
.mp13-glass-menu__layer--2, .y-mobile-menu__layer--2 { background: rgba(123, 74, 168, 0.10) !important; }
.mp13-glass-menu__layer--3, .y-mobile-menu__layer--3 { background: rgba(168, 58, 140, 0.09) !important; }
.mp13-glass-menu__layer--4, .y-mobile-menu__layer--4 { background: rgba(219, 30, 121, 0.09) !important; }
.mp13-glass-menu__layer--5, .y-mobile-menu__layer--5 { background: transparent !important; }
/* 3) Layer 6 → just a faint dark tint (NO backdrop-filter here: every layer has a
`transform` + `mask`, which BREAK backdrop-filter — it samples nothing). */
.mp13-glass-menu__layer--6, .y-mobile-menu__layer--6 {
background: rgba(14, 14, 16, 0.08) !important;
-webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.mp13-glass-menu__layer--6::before, .y-mobile-menu__layer--6::before {
background:
linear-gradient(120deg, rgba(169,207,63,0.18) 0%, rgba(169,207,63,0.06) 45%, transparent 75%),
radial-gradient(60% 45% at 28% 14%, rgba(169,207,63,0.22), transparent 70%) !important; /* volt-green glow */
}
/* 4) BIG SINGLE CURVE per layer — one elegant smooth arc (not busy waves).
Small band (14vh) so layers sit TIGHT and overlap, not spread apart. */
/* Apply the wave mask to layers 3-4 ONLY. Layers 1 & 2 stay UNMASKED (solid fill)
so the TOP has no quirky wave — the pour waves start lower down. */
.mp13-glass-menu__layer--3, .y-mobile-menu__layer--3,
.mp13-glass-menu__layer--4, .y-mobile-menu__layer--4 {
-webkit-mask:
linear-gradient(#000, #000) top / 100% calc(100% - 8vh) no-repeat,
url("data:image/svg+xml;utf8,") bottom / 100% 8vh no-repeat !important;
mask:
linear-gradient(#000, #000) top / 100% calc(100% - 8vh) no-repeat,
url("data:image/svg+xml;utf8,") bottom / 100% 8vh no-repeat !important;
}
/* Layers 1, 2 & 5: solid, no mask. Layer 5 is the BLACK back-fill — the plugin's
base rule masks it with a wave, which painted a black wave over the top. Unmask
it so the black is a flat solid, killing the top wave. */
.mp13-glass-menu__layer--1, .y-mobile-menu__layer--1,
.mp13-glass-menu__layer--2, .y-mobile-menu__layer--2,
.mp13-glass-menu__layer--5, .y-mobile-menu__layer--5,
.mp13-glass-menu__layer--6, .y-mobile-menu__layer--6 {
-webkit-mask: none !important; mask: none !important;
}
/* desktop band — keep it tight (shallow, subtle curve). Layers 3-4 only. */
@media (min-width: 768px) {
.mp13-glass-menu__layer--3, .y-mobile-menu__layer--3,
.mp13-glass-menu__layer--4, .y-mobile-menu__layer--4 {
-webkit-mask-size: 100% calc(100% - 9vh), 100% 9vh !important;
mask-size: 100% calc(100% - 9vh), 100% 9vh !important;
}
}
/* Panel itself is transparent; the FROST is a ::before on the panel — the panel has
NO transform/mask (unlike the layers), so backdrop-filter actually works here. It
blurs the page behind the whole open menu. */
.mp13-glass-menu, .y-mobile-menu { background: transparent !important; }
.mp13-glass-menu::before, .y-mobile-menu::before {
content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
background: rgba(12, 12, 14, 0.18);
-webkit-backdrop-filter: blur(34px) saturate(125%);
backdrop-filter: blur(34px) saturate(125%);
opacity: 0; transition: opacity 0.4s ease;
}
.mp13-glass-menu.is-open::before, .y-mobile-menu.is-open::before,
.mp13-glass-menu.is-closing::before, .y-mobile-menu.is-closing::before { opacity: 1; }
/* Phones: an 18%-alpha tint leaning on backdrop-filter is not enough — mobile blur is
weaker (and dropped entirely under battery saver / reduced transparency), so the page
showed straight through the menu and the two sets of text overlapped illegibly.
Use a near-opaque dark plate here; the blur stays as a bonus where it is supported. */
@media (max-width: 900px) {
/* Solid black plate BEHIND the wave layers (z-index:-1), not on top of them:
an opaque ::before at z-index 0 hid the pour/wave animation entirely. This sits
under everything the menu draws, so the waves still read against solid black. */
.mp13-glass-menu::before, .y-mobile-menu::before {
background: #000;
z-index: -1;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.mp13-glass-menu.is-open, .y-mobile-menu.is-open {
background: #000 !important;
}
}
/* The "Wishlist / Search" flash was NOT a timing problem — those were extra
items injected into the nav by a filter in inc/woocommerce.php, rendered as plain
text before the pour animation ran. They are removed at source now, so no content
fade is needed here. Fading the menu's children also killed the wave layers on
close (they are direct children), which made closing freeze instead of animate. */
/* CRITICAL: the header's glassmorphism uses backdrop-filter, which (like transform)
creates a containing block for position:fixed descendants — trapping the glass
menu's fixed layers inside the ~header-height box → half-open bug. While the menu
is open, strip the header's backdrop-filter so the menu covers the full viewport. */
body:has(.mp13-glass-menu.is-open) [data-rg-header],
body:has(.mp13-glass-menu.is-closing) [data-rg-header],
body:has(.y-mobile-menu.is-open) [data-rg-header],
body:has(.y-mobile-menu.is-closing) [data-rg-header] {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
transform: none !important;
/* strip INSTANTLY (no transition) — animating the backdrop-filter removal
mid-open caused repaints that made the menu pour jump/feel abrupt. */
transition: none !important;
}
/* FIX "half-open" bug: the pour layers animate in with staggered delays and can be
caught mid-transition (hero shows through the bottom half). Add a guaranteed
full-viewport BLACK base that appears instantly when open — so there's always a
solid backdrop covering the whole screen regardless of the pour animation state. */
.mp13-glass-menu::after, .y-mobile-menu::after {
content: ""; position: fixed; inset: 0; z-index: -1; /* BEHIND the pour layers, not over them */
/* NOT solid black (that killed see-through). A translucent dark veil that, paired
with the ::before backdrop-blur, gives frosted glass you can still see through. */
background: rgba(10, 10, 12, 0.10); opacity: 0; pointer-events: none;
transition: opacity 0.2s ease;
}
.mp13-glass-menu.is-open::after, .y-mobile-menu.is-open::after,
.mp13-glass-menu.is-closing::after, .y-mobile-menu.is-closing::after {
opacity: 1;
}
/* 5) Text/links readable on the dark glass — heavy Montserrat Black like the site headings */
.mp13-glass-menu__list a, .y-mobile-menu__list a {
color: #FFFFFF !important;
font-weight: 900 !important;
letter-spacing: -0.01em !important;
}
.mp13-glass-menu__list a:hover, .y-mobile-menu__list a:hover { color: #A9CF3F !important; }
/* The utility items (My account / Wishlist / Search) used to be appended as the last
3 nav items, and these rules hid or restyled them by POSITION (nth-last-child).
They are no longer added to the menu at all — the header carries them as icons — so
position-based rules now hit the real menu items instead, which is what made
Reviews, Blog and Contacts disappear on desktop. Removed. */
.mp13-glass-menu__label, .y-mobile-menu__label { color: #DB1E79 !important; }
.mp13-glass-menu__featured-name, .y-mobile-menu__featured-name { color: #FFFFFF !important; }
.mp13-glass-menu__featured-price, .y-mobile-menu__featured-price { color: #A9CF3F !important; }
.mp13-glass-menu__featured-card, .y-mobile-menu__featured-card {
background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.12) !important;
}
.mp13-glass-menu__social a, .y-mobile-menu__social a {
color: #FFFFFF !important; background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.16) !important;
}
.mp13-glass-menu__social a:hover, .y-mobile-menu__social a:hover {
background: #A9CF3F !important; color: #121212 !important;
}
/* Plugin's own close button (green circle, top-right) is HIDDEN — the morphing
hamburger→X pinned top-LEFT is the single close control. Two X's confused users. */
.mp13-glass-menu__close, .y-mobile-menu__close { display: none !important; }
/* Raise the header burger ABOVE the open menu (menu is z-index:9000) so the X
shows on top and is clickable to close. When the menu is OPEN, PIN it to the
viewport top-left (position:fixed) so it's ALWAYS visible as the close X —
regardless of scroll position or a hidden/translated header. */
body:has(.mp13-glass-menu.is-open) .rg-burger,
body:has(.mp13-glass-menu.is-closing) .rg-burger,
body:has(.y-mobile-menu.is-open) .rg-burger,
body:has(.y-mobile-menu.is-closing) .rg-burger {
position: fixed !important;
top: clamp(1.2rem, 3vh, 2.2rem);
left: clamp(1.2rem, 4vw, 2.5rem);
z-index: 9500;
}
.rg-burger.is-active { z-index: 9500; }
/* Keep the X visible even though the header may be translated on scroll */
.rg-burger.is-active span { background: #A9CF3F; }
/* Menu vertical scroll on short screens.
`__content` uses `margin: auto 0` to centre itself, which on a phone pushes the
featured products below the fold with no way to reach them. Anchor to the top once
the content is taller than the panel and let `__inner` scroll. */
@media (max-width: 900px) {
.y-mobile-menu__inner, .mp13-glass-menu__inner {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
touch-action: pan-y;
padding-block: clamp(64px, 11vh, 96px) clamp(28px, 6vh, 56px);
}
.y-mobile-menu__content, .mp13-glass-menu__content {
margin-block: 0; /* was `auto 0` — centring hid overflow off-screen */
}
}