/* * Layer: components. The overlay menu (parts/menu.html) inside core's navigation dialog. * With a custom overlay core adds no colours, padding or close position (L25), so the kit's * side panel (.nd-menu__panel) and scrim are built here. Motion lives in motion.css. */ @layer components { /* * Scrim: core's full-screen fixed container (kit .nd-menu__scrim). M15: it starts below the admin * bar (WP sets the variable only while the bar renders; menu.js refines it to the bar's visible * bottom, since the bar scrolls away under 600px). */ .wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open { top: var(--nd-menu-top, var(--wp-admin--admin-bar--height, 0px)); /* * Not a scroll container: core focuses into the dialog on open, and a scrollable scrim scrolled * the half-slid panel into view, cancelling its slide. Layout containment makes the scrim the * fixed panel's containing block (its backdrop-filter already does), so the panel sits at 0. */ overflow: clip; contain: layout; padding: 0; background-color: color-mix(in srgb, var(--wp--preset--color--cobalt) 35%, transparent); color: var(--wp--preset--color--ink); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* * menu.js shows the open overlay as a manual popover (top layer) so the page behind it can scale * without trapping this fixed overlay; reset the UA popover box to core's full-screen container. */ .wp-block-navigation__responsive-container.is-menu-open[popover] { right: 0; bottom: 0; left: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; border: 0; color: var(--wp--preset--color--ink); } /* * Panel (kit .nd-menu__panel): pinned right, the scrim's full height (so below the admin bar), * scrolls when the menu is taller. A size container so the art layer can match its height (cqh). */ .nd-menu { position: fixed; inset-block: 0; container-type: size; inset-inline-end: 0; box-sizing: border-box; display: flex; flex-direction: column; width: 86%; max-width: 400px; overflow-x: hidden; overflow-y: auto; background-color: var(--wp--preset--color--porcelain); box-shadow: -30px 0 60px -30px color-mix(in srgb, var(--wp--preset--color--cobalt) 50%, transparent); } .nd-menu > * { position: relative; z-index: 1; margin-block: 0; } /* * Kintsugi veins (design/assets; mirrored in M14 so the busy side sits right, away from the links) * at full strength, anchored on that heavy right side. The paper wash is the top background layer * of the same pseudo-element, so both stay below the content (`.nd-menu > *` is z-index 1). * M15 (Mike): the wash needs explicit stops — without them its 60% middle stop sat at mid-panel * and veiled the busy art; now it is gone by 55%, so the right half shows at source contrast. * The layer is sticky and takes no room in the flow (first flex item, height = negative margin = * the panel's height), so a panel shorter than its menu shows art at every scroll position. */ .nd-menu::after { content: ""; position: sticky; top: 0; order: -1; flex: none; height: 100cqh; margin-bottom: -100cqh; background-image: linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--paper) 90%, transparent), color-mix(in srgb, var(--wp--preset--color--paper) 60%, transparent) 30%, transparent 55%), url(../../img/kintsugi-veins-flipped-800.webp); background-image: linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--paper) 90%, transparent), color-mix(in srgb, var(--wp--preset--color--paper) 60%, transparent) 30%, transparent 55%), image-set(url(../../img/kintsugi-veins-flipped-800.avif) type("image/avif"), url(../../img/kintsugi-veins-flipped-800.webp) type("image/webp")); background-position: 0 0, right bottom; background-size: auto, cover; background-repeat: no-repeat; pointer-events: none; } .nd-menu__bar { align-items: center; padding: 22px 14px 6px 28px; } .nd-menu .nd-lockup__mark { width: 44px; height: 44px; } .nd-menu .nd-wordmark { font-size: 17px; } /* * Close (kit .nd-menu__close): the red × in a 44px circle. M14 (Mike): it sits over the busy * image side, so it gets a highlight-gold backing and a gold edge; hover keeps the backing. */ .nd-menu .wp-block-navigation-overlay-close { flex: none; box-sizing: border-box; width: 44px; height: 44px; border: 1px solid var(--wp--preset--color--kintsugi-gold); border-radius: 50%; background-color: var(--wp--preset--color--kintsugi-highlight); color: var(--wp--preset--color--cinnabar); transition: transform 0.45s var(--wp--custom--ease-spring), background-color var(--wp--custom--duration--fast); } .nd-menu .wp-block-navigation-overlay-close:hover { background-color: color-mix(in srgb, var(--wp--preset--color--cinnabar) 8%, var(--wp--preset--color--kintsugi-highlight)); transform: rotate(90deg); } .nd-menu .wp-block-navigation-overlay-close:focus-visible { outline: 2px solid transparent; box-shadow: var(--wp--custom--focus-ring); } /* * M14: kintsugi gold, full strength (other ornaments keep brand-deep). M15 (Mike): 10% wider; a * highlight band fills the space between the two gold lines (alone, the highlight was ~1.1:1 on * the wash — bounded by gold it reads), and a 1px lift above and below sets it off the porcelain. */ .nd-menu__ornament { width: 220px; height: 24px; margin: 0 0 6px 24px; color: var(--wp--preset--color--kintsugi-gold); filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--wp--preset--color--brand-deep) 22%, transparent)) drop-shadow(0 -1px 0 color-mix(in srgb, var(--wp--preset--color--brand-deep) 14%, transparent)); } .nd-menu__ornament .nd-menu__band { fill: var(--wp--preset--color--kintsugi-highlight); stroke: none; } /* Links (kit .nd-menu__nav): display face, one per line. Core copies the class onto the