/* ESGRI mobile menu β closing it should be as easy as opening it.
*
* Chase, 2026-09-17: the panel opens with one tap on the hamburger and closes
* only by hitting a 50x33 cross inside it. Nothing dims the page, tapping the
* page does nothing, so it reads as a floating board rather than a mode.
*
* Measured on /home-2/ at 390px before this file:
* hamburger 34 x 37 (44 x 44 is the usual floor for a touch target)
* close 50 x 33
* panel 300 of 390
* overlay 390 x 72 <- see below
*
* π¨ THE WIDGET ALREADY HAS A SCRIM AND IT IS THE RIGHT COLOUR. Elementor's
* Premium Nav Menu renders .premium-nav-slide-overlay at rgba(0,0,0,.6),
* position fixed, z-index 10002 β and gives it a box of 390 x 72. Seventy-two
* pixels: the height of the header it lives in. So it dims the header strip and
* nothing else, which is exactly why the page below looked untouched. It only
* needed to be the size of the screen.
*
* I built a scrim of my own first. It painted OVER the menu even at a lower
* z-index, because z-index ranks siblings within one stacking context and this
* menu's 10002 is resolved five levels down: panel 10002 < .elementor-element
* 9999 < a fixed wrapper 1401 < .aux-elementor-header 1400 < a div at z=3. The
* whole menu competes with other body children as "3". Using the widget's own
* overlay sidesteps all of that β it is already the panel's sibling.
*
* π¨ The close button STAYS INSIDE THE PANEL. Putting it at the screen's corner
* where the thumb already is does not work: the panel slides with a transform,
* and any transform on an ancestor re-anchors a position:fixed child to that
* ancestor, so "fixed, top right" lands at the panel's corner. Moving the node
* out to does reach the screen corner β and then sits there when the
* menu is CLOSED, swallowing every tap on the hamburger. Measured both.
* ========================================================================== */
/* ---- the scrim covers the screen, not the header ------------------------- */
.premium-nav-slide-overlay {
inset: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
max-height: none !important;
opacity: 0;
visibility: hidden;
transition: opacity .28s ease, visibility 0s linear .28s;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.premium-nav-slide-overlay.premium-vertical-toggle-open {
opacity: 1;
visibility: visible;
transition: opacity .28s ease, visibility 0s linear 0s;
}
/* The page must not scroll behind an open menu β on a phone that is the other
half of "am I in a mode or not". The class is set by esgri-mobile-menu.js. */
body.esgri-menu-open {
overflow: hidden !important;
}
/* ---- touch targets ------------------------------------------------------- */
/* π¨ NEVER SET `display` ON THE HAMBURGER. It is the widget's own switch between
the desktop menu bar and the phone toggle, and an !important display here
overrides it at EVERY width. I shipped `display: inline-flex !important` on
2026-09-17 and it put the hamburger on the desktop header beside the full nav,
pushing the menu onto a second line β Chase: "δ½ ζη΅θηηζε΄©δΊ". Size it
without touching how it is laid out. */
.premium-hamburger-toggle.premium-mobile-menu-icon {
min-width: 44px !important;
min-height: 44px !important;
align-items: center !important;
justify-content: center !important;
}
.premium-mobile-menu-close {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
}
/* ==========================================================================
π¨ THE PANEL BORROWS THE DESKTOP NAV'S GOLD
Chase, 2026-09-17, reading Bunny's "still old style" on the phone menu: the
new desktop bar turns an item gold and draws a gold rule under it, and the
hamburger panel should be the same thing β "εδΈδΈͺι£ζ ΌδΈηε€ε»".
Measured off the desktop bar before copying anything: at rest the label is
#14171F with an ::after 1px tall at width 0 and opacity 0; on hover the label
becomes #B89642 and that rule grows to the label's full width. Gold and a 1px
rule, in other words.
π¨ text-decoration, NOT an ::after. On the desktop bar the ::after can be the
link's full width because the link IS the label. In the panel the link is a
280px row with a 46px touch target, and the label is a bare text node with no
span around it β Premium renders `Research`. An ::after
at 100% would draw a 280px rule across the panel, which reads as a divider
between items rather than an underline on one. text-decoration follows the
words themselves and leaves the touch target alone.
π¨ There is no hover on a phone, so the state that matters is WHERE YOU ARE.
The widget marks it: on /staff/ the About item carries a current class,
because People sits under About. That item is gold all the time; :active
gives the same while a finger is down, and :hover is there for a tablet with
a pointer.
========================================================================== */
.premium-mobile-menu-container .premium-menu-link:hover,
.premium-mobile-menu-container .premium-menu-link:active,
.premium-mobile-menu-container .premium-sub-menu-link:hover,
.premium-mobile-menu-container .premium-sub-menu-link:active,
.premium-mobile-menu-container .current-menu-item > .premium-menu-link,
.premium-mobile-menu-container .current-menu-ancestor > .premium-menu-link,
.premium-mobile-menu-container .current-menu-parent > .premium-menu-link,
.premium-mobile-menu-container .premium-active-item > .premium-menu-link,
.premium-mobile-menu-container .current-menu-item > .premium-sub-menu-link {
color: #B89642 !important;
}
/* the chevron follows the label, the way it does on the desktop bar */
.premium-mobile-menu-container .premium-menu-link:hover .premium-dropdown-icon,
.premium-mobile-menu-container .premium-menu-link:active .premium-dropdown-icon,
.premium-mobile-menu-container .current-menu-item > .premium-menu-link .premium-dropdown-icon,
.premium-mobile-menu-container .current-menu-ancestor > .premium-menu-link .premium-dropdown-icon,
.premium-mobile-menu-container .premium-active-item > .premium-menu-link .premium-dropdown-icon {
color: #B89642 !important;
}
.premium-mobile-menu-container .premium-menu-link,
.premium-mobile-menu-container .premium-sub-menu-link {
transition: color .2s ease;
}
/* π¨ AND THE OLD GREEN BAR GOES. Pressing an item also drew a 3px rule the full
280px of the panel in rgb(56, 90, 72) β the legacy green, from the palette
this site left behind. That is almost certainly the whole of Bunny's "still
old style" on this screenshot: the menu was still indicating in the old
colour while every other surface had moved to black and gold.
It is the widget's own ::after. Zeroed rather than recoloured, because at
280px it spans the panel and reads as a divider between rows; the gold
underline above follows the words, which is what the desktop bar does. */
.premium-mobile-menu-container .premium-menu-link::after,
.premium-mobile-menu-container .premium-menu-link::before,
.premium-mobile-menu-container .premium-sub-menu-link::after,
.premium-mobile-menu-container .premium-sub-menu-link::before {
background-color: transparent !important;
height: 0 !important;
}
/* π¨ THE SUBMENU LINKS WERE THE OLD GREEN TOO. At rest every child link in the
panel was rgb(56, 90, 72) β the same legacy green as the indicator bar, and
on the one screen a visitor opens most often. The desktop dropdown has them
at rgb(20, 23, 31) going gold on hover, so the panel matches that now.
Measured on /staff/ at 1440 before copying: rest #14171F, hover #B89642. */
.premium-mobile-menu-container .premium-sub-menu-link,
.premium-mobile-menu-container .premium-sub-menu a {
color: #14171F !important;
}
.premium-mobile-menu-container .premium-sub-menu-link:hover,
.premium-mobile-menu-container .premium-sub-menu-link:active,
.premium-mobile-menu-container .premium-sub-menu a:hover,
.premium-mobile-menu-container .premium-sub-menu a:active,
.premium-mobile-menu-container .premium-sub-menu .current-menu-item > a {
color: #B89642 !important;
}
/* ==========================================================================
π¨ THE RULE HANGS OFF A WRAPPER, NOT off text-decoration.
Chase, 2026-09-17: "η°ε¨ηζ±ε ‘θεζδΈͺζͺζ". The underline was arriving in
two pieces β a line under the word, a 5px hole, a stub under the chevron.
The panel link is `display: flex`, so `Insights` is two
flex items and a propagated text-decoration paints each box on its own.
Measured on /insights/ at 390px: label 20..84, chevron 89..99. Two things
were tried on the live page and neither works, for the same reason both
times β a child cannot cancel a decoration its parent propagated:
Β· text-decoration:none on the chevron β stub still drawn
Β· the chevron's 5px margin turned into padding β padding is not decorated
So esgri-mobile-menu.js wraps each link's contents in .esg-mm-label and the
rule is that wrapper's border-bottom: it hugs label and chevron together and
runs straight through the gap. `margin-bottom: -5px` cancels the padding that
sets the rule 5px clear of the baseline, so the rows keep their height β
measured 46px before, 47px after, the 1px being the border itself.
Not the desktop bar's geometry, and it cannot be: there the ::after is the
full width of the link because the link IS the label (124px for Insights,
padding included). Here the link is the whole 280px row, and a rule that wide
reads as a divider between items rather than an underline on one. */
.premium-mobile-menu-container .premium-menu-link,
.premium-mobile-menu-container .premium-menu-link:hover,
.premium-mobile-menu-container .premium-menu-link:active,
.premium-mobile-menu-container .premium-sub-menu-link,
.premium-mobile-menu-container .premium-sub-menu-link:hover,
.premium-mobile-menu-container .premium-sub-menu-link:active,
.premium-mobile-menu-container .current-menu-item > .premium-menu-link,
.premium-mobile-menu-container .current-menu-ancestor > .premium-menu-link {
text-decoration: none !important;
}
.premium-mobile-menu-container .esg-mm-label {
display: inline-flex;
align-items: center;
gap: 5px;
border-bottom: 1px solid transparent;
padding-bottom: 5px;
margin-bottom: -5px;
transition: border-bottom-color .2s ease;
}
.premium-mobile-menu-container .premium-menu-link:hover .esg-mm-label,
.premium-mobile-menu-container .premium-menu-link:active .esg-mm-label,
.premium-mobile-menu-container .current-menu-item > .premium-menu-link .esg-mm-label,
.premium-mobile-menu-container .current-menu-ancestor > .premium-menu-link .esg-mm-label,
.premium-mobile-menu-container .current-menu-parent > .premium-menu-link .esg-mm-label,
.premium-mobile-menu-container .premium-active-item > .premium-menu-link .esg-mm-label,
.premium-mobile-menu-container .premium-sub-menu-link:hover .esg-mm-label,
.premium-mobile-menu-container .premium-sub-menu-link:active .esg-mm-label,
.premium-mobile-menu-container .premium-sub-menu .current-menu-item > a .esg-mm-label {
border-bottom-color: #B89642;
}
/* the gap now belongs to the wrapper, so the chevron's own margin goes */
.premium-mobile-menu-container .premium-menu-link .premium-dropdown-icon {
margin-left: 0 !important;
}