@layer dx-component-base { /* ========================================================================== Component: Nav Menu Shared rendering primitive for navigation menus with two layout variants — `--horizontal` (header) and `--vertical` (footer / sidebar). Both variants consume the same `--dx-menu-*` typography tokens edited in Misc → Menu Item on the Elegance page, so changing weight/size/colour updates every nav at once. Markup contract (`components/partials/nav-menu.php` + nav-menu.js): The toggle button is JS-injected because the link must stay a real link — clicking "About" should navigate to /about/ — while still giving keyboard / touch users a way to reveal children. CSS styles the button defensively (via `:has` is avoided to keep older Safari working) — if JS never runs, no caret appears and submenus stay collapsed (still reachable on the horizontal variant via :hover). ========================================================================== */ .dx-nav-menu__list, .dx-nav-menu .sub-menu { list-style: none; margin: 0; padding: 0; z-index: 999; } .dx-nav-menu a { text-decoration: none; color: hsl(var(--dx-menu-color, var(--dx-text))); font-weight: var(--dx-menu-weight); font-size: var(--dx-menu-size); /* Empty token = inherit (line-height tracks the body Global value). Non-empty token overrides for every nav-menu link site-wide. Same pattern as Rich Text / Button. */ line-height: var(--dx-menu-line-height, inherit); transition: color var(--dx-effect-transition-duration) ease; } .dx-nav-menu a:hover { /* Hover = colour change only. `--dx-menu-hover-color` is emitted per-mode by the Variable Manager's `dynamic_menu_hover` alias (wrapped here with hsl() because the stored value is an HSL triplet token-ref). Empty when no override is configured — falls back to `--dx-text` (a sensible "no visible change" state; users who want a real hover effect should configure the dynamic_menu_hover alias). Previously this rule also set `opacity: 0.7` as a "dim on hover" effect. That was a holdover from before mode-aware hover colours existed — the opacity competed with the colour change (colour brightens + opacity dims = invisible net change) and a workaround in inc/tokens.php was supposed to reset the opacity to 1 when a hover colour was configured. The workaround only checked the legacy typography-token storage path (`menu_hover_color_light/_dark`); hover colours configured via the newer Variable Manager dynamic_menu_hover alias bypassed it, leaving sites' hover effects silently muted. Removed entirely — hover is now a clean colour change, no opacity entanglement. */ color: hsl(var(--dx-menu-hover-color, var(--dx-text))); } /* ── Toggle button (JS-injected) ────────────────────────────────────────── Sits next to a parent link as a separate click target so the link's own click stays a navigation. Inherits the menu colour and font size so it tracks any token edit. */ .dx-nav-menu__toggle { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0.25em; /* Legit margin per CLAUDE.md "Spacing — use gap" — the toggle is a JS-injected sibling appended after the menu-item's link in normal inline-flow inside the
  • . The
  • is intentionally NOT flex (items without a toggle are link-only and rely on normal text flow). Small horizontal offset between the link text and this toggle is the right shape; converting to flex+gap would force layout on every menu-item including those without a toggle. */ margin-left: 0.25em; /* Match the sibling link's colour so the caret reads as part of the link, not a dimmer affordance. We re-state the value here (instead of `color: inherit`) because the toggle is a SIBLING of the ``, not a descendant — `color: inherit` would walk past the `.dx-nav-menu a { color: hsl(var(--dx-menu-color)) }` declaration (which only applies inside the link) and inherit the ambient section text colour instead. The SVG inside uses `stroke="currentColor"` so it tracks this `color` directly. Previously the caret was further muted by a default `opacity: 0.7` that made it visibly dimmer than the link — intended as a "secondary affordance" visual but read as a colour mismatch in practice. Removed: default opacity is 1 (matches the link's default), and the hover opacity is picked up via the rule below so both link and caret dim together when the user's `--dx-menu-hover-opacity` token is configured for a dim-on-hover style. */ color: hsl(var(--dx-menu-color, var(--dx-text))); cursor: pointer; font: inherit; line-height: 1; transition: transform var(--dx-effect-transition-duration) ease, color var(--dx-effect-transition-duration) ease; } /* Hover / focus — track the link's hover state. The `.menu-item-has-children:hover` selector triggers when the user hovers anywhere inside the parent menu item (including the link itself), so the caret stays visually tethered to its sibling link without the user having to aim for the tiny caret. Mirrors `.dx-nav-menu a:hover` — colour change only, no opacity declaration. See the comment on that rule for why the opacity was retired (the short version: it competed with the colour change and made configured hover colours invisible). */ .dx-nav-menu .menu-item-has-children:hover > .dx-nav-menu__toggle, .dx-nav-menu__toggle:focus-visible { color: hsl(var(--dx-menu-hover-color, var(--dx-text))); } .dx-nav-menu__toggle svg { display: block; } .menu-item-has-children.dx-open > .dx-nav-menu__toggle { transform: rotate(-180deg); } /* ────────────────────────────────────────────────────────────────────── Horizontal variant (header) Inline row. Sub-menus render as an absolute-positioned dropdown — opens on parent :hover (desktop pointer) AND when the toggle button sets `.dx-open` (touch + keyboard). ────────────────────────────────────────────────────────────────────── */ .dx-nav-menu--horizontal .dx-nav-menu__list { display: flex; gap: 1.5rem; align-items: center; } .dx-nav-menu--horizontal .menu-item-has-children { position: relative; } .dx-nav-menu--horizontal .sub-menu { /* Hidden until parent is hovered or `.dx-open`. We use opacity + visibility (not display: none) so the open state can transition in smoothly; visibility is animated with a 0s delay on open and full duration on close so it doesn't kill the fade. */ position: absolute; top: 100%; left: 0; min-width: 12rem; /* Background, text, and border are all mode-coupled: - bg → `--dx-menu-surface` (dedicated dropdown background, configured per mode in the Variable Manager → Menu Surface row). Defaults to `--dx-bg` for solid contrast against the page content below; pre-collapse this used `--dx-surface`, but that token is often semi-transparent in modes layered over alpha overlays, which read poorly as a floating panel. Users can repoint each mode independently. - text → `--dx-text` (mode-aware, pairs with the chosen surface) - border → `--dx-border` (mode-aware hairline) For bespoke dropdown styling beyond a single background-colour pick, use the Custom CSS field on the Nav Menu panel. */ background: hsl(var(--dx-menu-surface)); color: hsl(var(--dx-text)); border: 1px solid hsl(var(--dx-border)); border-radius: var(--dx-effect-border-radius, 0); padding: 0.5rem 0; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--dx-effect-transition-duration) ease, transform var(--dx-effect-transition-duration) ease, visibility 0s linear var(--dx-effect-transition-duration); z-index: 100; } /* Desktop dropdown "open" state — gated to "drawer NOT open" so this rule's `transition: opacity, transform, visibility` doesn't replace the drawer-mode rule's `transition: max-height` when both selectors match. (Without the gate, this rule has higher specificity than the drawer rule and wins the cascade, which turned the sub-menu accordion in drawer mode into an unanimated snap-open — the same element is supposed to animate via max-height when the parent is `.dx-nav-menu--open`, and via opacity/transform when it isn't.) The `:not(.dx-nav-menu--open)` qualifier on the root makes "desktop dropdown" and "drawer accordion" mutually exclusive at the CSS level. */ .dx-nav-menu--horizontal:not(.dx-nav-menu--open) .menu-item-has-children:hover > .sub-menu, .dx-nav-menu--horizontal:not(.dx-nav-menu--open) .menu-item-has-children:focus-within > .sub-menu, .dx-nav-menu--horizontal:not(.dx-nav-menu--open) .menu-item-has-children.dx-open > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); /* On open: visibility flips immediately (delay 0) so the fade is visible from the start. */ transition: opacity var(--dx-effect-transition-duration) ease, transform var(--dx-effect-transition-duration) ease, visibility 0s linear 0s; } .dx-nav-menu--horizontal .sub-menu li { display: block; } .dx-nav-menu--horizontal .sub-menu a { display: block; padding: 0.5rem 1rem; white-space: nowrap; /* Link colour inherits the panel's `color: hsl(var(--dx-text))` set on `.sub-menu` above — mode-aware, pairs correctly with the mode-aware bg-2 fallback. The base `.dx-nav-menu a` rule's --dx-menu-color override stays in effect when explicitly set. */ } /* ────────────────────────────────────────────────────────────────────── Mobile collapse (horizontal variant only) Below `48rem` of available section width, the horizontal variant transforms into a hamburger button + full-viewport drawer: - The inline `