/** * Mega menu — home-spec.md §11, build-plan.md Phase 6. * * Four columns plus two promo tiles, in a panel that spans the viewport. */ .hermizon-mega { position: relative; /* The split trigger is two siblings — label link and chevron button — and * this row is what keeps them on one line at the single-button render's 4px * gap. Row-gap stays 0 because in the overlay the static panel wraps onto * its own line below the pair (flex-basis: 100%, in the ≤900 band). The * absolutely positioned desktop panel never participates in this layout. */ display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--wp--preset--spacing--10); } .hermizon-mega__trigger { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--10); padding: var(--wp--preset--spacing--20) 0; color: inherit; background: transparent; border: 0; font-family: inherit; font-size: inherit; cursor: pointer; transition: color var(--wp--custom--transition--fast); } /* The trigger is an `` when the block carries a `url`, and it must read as * a nav item, not as body copy. */ a.hermizon-mega__trigger { text-decoration: none; } .hermizon-mega__toggle { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 24px; height: 24px; padding: 0; color: inherit; background: transparent; border: 0; border-radius: var(--wp--custom--radius--sm); cursor: pointer; transition: color var(--wp--custom--transition--fast); } /* Hover, keyboard focus, the open panel and the current page all say it in * brand red — the label and the chevron together, which is what the wrapper's * `is-open` class (bound in render.php) is for. The theme colours the rest of * the header's nav items the same way, so the row reads as one system. */ .hermizon-mega__trigger:hover, .hermizon-mega__trigger:focus-visible, .hermizon-mega__toggle:hover, .hermizon-mega__toggle:focus-visible, .hermizon-mega.is-open .hermizon-mega__trigger, .hermizon-mega.is-open .hermizon-mega__toggle, a.hermizon-mega__trigger[aria-current="page"] { color: var(--wp--preset--color--brand); } .hermizon-mega__chevron { transition: transform var(--wp--custom--transition--fast); } .hermizon-mega__trigger.is-open .hermizon-mega__chevron, .hermizon-mega__toggle.is-open .hermizon-mega__chevron { transform: rotate(180deg); } /* -------------------------------------------------------------------------- * The panel * ----------------------------------------------------------------------- */ .hermizon-mega__panel { position: absolute; /* Full-bleed from a relatively positioned trigger: 50% of the viewport, * pulled back by half of it. `100vw` rather than `100%` because the panel * is wider than its container by design, and this is what "mega" means. */ inset-inline-start: 50%; top: 100%; z-index: 100; width: 100vw; max-width: 100vw; transform: translateX(-50%); background-color: var(--wp--preset--color--base); border-block-start: var(--wp--custom--border--width) solid var(--wp--preset--color--line); /* `shadow-menu` is drawn for this element and nothing else (design-tokens.md * §6). What stood here was the *card* shadow written out longhand — * `0 14px 24px rgba(0, 0, 0, 0.08)` — so the panel was carrying a product * card's depth on a hardcoded value while its own token went unused. */ box-shadow: var(--wp--preset--shadow--menu); } /* The panel is full-bleed; its *content* is not. The frame's first column of * text starts at x 145 and its right-hand tile ends at x 1455 — which is the * 1320 content container at x 140–1460, not the 1600 wide container this used * to align to. */ .hermizon-mega__inner { max-width: var(--wp--style--global--content-size); margin-inline: auto; /* The frame's panel is 381 tall around a 335 tile, so its vertical padding * is ~25 and not the 40 this started with. */ padding: var(--wp--preset--spacing--50); } /* A hover intent needs somewhere to hover through. In the header the panel * hangs from the header's bottom edge, a measured 19px below the trigger, and * the pointer crosses that gap to reach it. The bridge covers the 12px nearest * the panel; view.js's 250ms grace timer forgives the rest. Not taller: the * strip spans the panel's full width, and at 20px it reached the bottom 4px of * the header's cart and account icons, eating their clicks while the panel — * or its grace period — was open. 12 leaves them 3.5px clear. */ .hermizon-mega.is-hoverable .hermizon-mega__panel::before { content: ""; position: absolute; inset-inline: 0; top: -12px; height: 12px; } /* -------------------------------------------------------------------------- * In the header, anchor to the header — not to the trigger * * The `100vw` rule above centres the panel on whatever is positioned nearest, * which is `.hermizon-mega` itself. That is only the viewport centre when the * trigger happens to be centred — true on the Phase 6 block harness, where the * block sat alone in a 1320 container, and false the moment it becomes a nav * item. Reproduced before building: with the trigger at x 690 in a header row * the panel landed at **x = -87**, hanging off the left edge with a matching * white gap on the right; with "Shop" at x 639 in the real header it is ~136px * out. * * The header is already `alignfull`, so anchoring to it gives the frame's * full-bleed panel exactly, and drops `100vw` — which counts the scrollbar and * is a horizontal-overflow trap of its own. The generic rule is left in place * so the block still works standalone. * ----------------------------------------------------------------------- */ /* Every positioned ancestor between the panel and the header has to stand * down, or `inset-inline: 0` resolves against the wrong box. * * There are **four**, not one, and the ancestor chain had to be walked in the * browser to find them all — two rounds of "fixed it" measured 355px, the * width of the nav, before the list was complete: * * .hermizon-mega this block's own wrapper * .wp-block-navigation core ships it relative * .wp-block-navigation__responsive-container relative above 900px * .wp-block-navigation__responsive-dialog relative always * * The last two are the overlay scaffolding, and core needs them positioned * *while the overlay is open* — the close button is absolute inside the * dialog. So they are only reset above the overlay breakpoint and only while * it is closed, which is the same state core itself styles relative. The extra * `:not(.hidden-by-default)` matches core's own specificity rather than * relying on stylesheet order. * * The breakpoint is **901**, not core's 601: the theme takes the collapse over at * 900, because the inline row needs 813px and wraps below it, so everything from * 601 to 900 is overlay territory now and the scaffolding must stay positioned * there. */ .hermizon-header .hermizon-mega, .hermizon-header .wp-block-navigation { position: static; } @media (min-width: 901px) { .hermizon-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open), .hermizon-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog { position: static; } } .hermizon-header .hermizon-mega__panel { inset-inline: 0; width: auto; max-width: none; transform: none; } /* -------------------------------------------------------------------------- * Opening and closing, animated — desktop only * * The panel is shown by *removing* the `hidden` attribute, so a bare * transition has nothing to run from: the element goes from not rendered to * rendered in one step. `@starting-style` supplies the missing "from" state * and `allow-discrete` holds `display` through the fade on the way out. * A browser without either simply toggles instantly — which is exactly the * behaviour this build shipped with. Scoped to pointer widths (the accordion * is an in-flow block; fading it adds nothing) and to users who have not * asked for reduced motion. `pointer-events` guards the fade-out: the attribute * is set the moment close runs, but the element keeps painting for 200ms, and * a ghost that still took clicks would eat the click that closed it. * ----------------------------------------------------------------------- */ @media (min-width: 901px) and (prefers-reduced-motion: no-preference) { .hermizon-mega__panel { opacity: 1; translate: 0 0; transition: opacity var(--wp--custom--transition--base), translate var(--wp--custom--transition--base), display var(--wp--custom--transition--base) allow-discrete; } .hermizon-mega__panel[hidden] { display: none; opacity: 0; translate: 0 -6px; pointer-events: none; } @starting-style { .hermizon-mega__panel { opacity: 0; translate: 0 -6px; } } } /* -------------------------------------------------------------------------- * The panel's own layout — three text columns and two tiles * * Measured from the frame (content-ia.md §2), relative to the 1320 container: * columns start at 5 · 270 · 521 · 764 · 1052, so the text tracks are 265, 251 * and 243 wide and each tile is 263 with a 25px gutter. * * Those three text widths are within 9% of one another, and the difference is * where the ink starts rather than where the column does — so they ship as * three equal fluid tracks, which lands every column within 14px of the frame * and stays right at any width. The tiles keep their stated 263. * ----------------------------------------------------------------------- */ .hermizon-mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 263px 263px; gap: 25px; align-items: start; } .hermizon-mega__heading { margin-block: 0 var(--wp--preset--spacing--40); font-weight: 500; } .hermizon-mega__list { margin-block: 0; padding-inline-start: 0; list-style: none; } /* The frame's 32px item pitch, expressed as leading rather than as a margin so * a label that wraps keeps the same rhythm. */ .hermizon-mega__list li { line-height: 32px; } .hermizon-mega__list a { color: var(--wp--preset--color--muted); text-decoration: none; } /* The first column carries no heading and is set in the body ink — it is the * editorial list, and the frame draws it darker than the two beside it. * * Having no heading, it also had nothing holding it down, so it started at the * top of the grid row — **17px above the two headings beside it**, measured by * scanning ink rows in a screenshot and in the frame export the same way. The * frame puts it 8px *below* the headings; 24px of leading lands it within a * pixel of that, and keeps the three columns reading as one band. * * It took two attempts and both failures were specificity, which is the fault * this build keeps meeting. A margin loses to core's global * `:root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }`, * (0,2,0) and printed after this stylesheet. Padding is the right property * anyway — this is leading, not separation — but a bare class loses too: the * panel lives inside `core/navigation`, which zeroes `padding` on **every** `ul` * beneath it at (0,1,1). Hence the grid in the selector. */ .hermizon-mega__grid > .hermizon-mega__list--lead { padding-block-start: var(--wp--preset--spacing--50); } .hermizon-mega__list--lead a { color: var(--wp--preset--color--contrast); } /* Brand red, matching the trigger row above — the whole menu answers hover in * one colour. The lead column starts in contrast ink, so its hover changes * colour too, not just decoration. */ .hermizon-mega__list a:hover, .hermizon-mega__list a:focus-visible { color: var(--wp--preset--color--brand); text-decoration: underline; } /* -------------------------------------------------------------------------- * The two tiles * * The frame draws a circular "10% Off" badge on each. It is not here: no * product carries a sale price, so there is no discount to badge. The block * `hermizon/discount-badge` already exists for the day there is one. * * Sources are 1024 square and the tile is 263 x 335 portrait, so the crop is * `object-fit: cover` on a stated aspect ratio — and `box-sizing`, because * this theme ships no reset and a stated size without it is the trap that has * caught five things on this build already. * ----------------------------------------------------------------------- */ .hermizon-mega__tile { box-sizing: border-box; margin: 0; } .hermizon-mega__tile a { display: block; overflow: hidden; border-radius: var(--wp--custom--radius--md); } .hermizon-mega__tile img { display: block; width: 100%; aspect-ratio: 263 / 335; object-fit: cover; transition: transform var(--wp--custom--transition--fast); } .hermizon-mega__tile a:hover img, .hermizon-mega__tile a:focus-visible img { transform: scale(1.03); } .hermizon-mega__tile figcaption { margin-block-start: var(--wp--preset--spacing--30); color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--medium); text-align: start; } /* -------------------------------------------------------------------------- * Inside the navigation overlay * * At 900px `core/navigation` becomes a full-screen overlay — core collapses at * 600 and the theme takes the boundary to 900, because the inline row needs 813px * and wraps below it — and a viewport-wide absolutely positioned panel inside it * would be a modal inside a modal. The panel becomes an ordinary block in the * flow instead, which is the accordion behaviour a small menu wants anyway. * * The band has to match the theme's exactly. Left at 600 it would leave 601–900 * rendering the desktop panel — absolute, off the overlay's own relative dialog — * inside a column overlay. * ----------------------------------------------------------------------- */ /* Two 263px tiles and their gutter take 551px of the panel before the three lists * get anything, so one of them is the first thing to go: the lists are the * navigation and the tiles are merchandising. * * **One tile survives, at 220.** Phase 18 dropped both, and the tablet panel * became three bare text columns — Phase 19 brings the first tile back so the * band keeps a face. The arithmetic at the band's floor: 901 viewport − 48 * root padding = 853 of panel, minus three 25px gutters and the 220 tile * leaves **186px per text column** — well clear of the 143 that Phase 18 * measured as the narrowest width where nothing wraps. Both tiles at 901 gave * the columns 76px each, which broke the labels; that stays the reason the * second tile goes. This block precedes the accordion band, so the overlay's * one-track grid still wins inside it. */ @media (max-width: 1100px) { .hermizon-mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) 220px; } .hermizon-mega__tile + .hermizon-mega__tile { display: none; } } @media (max-width: 900px) { .hermizon-mega__panel { position: static; width: auto; transform: none; box-shadow: none; } .hermizon-mega__inner { padding: var(--wp--preset--spacing--40) 0; } /* The overlay lays everything out as a centred column, and `align-items: * center` makes each level shrink to its own content. `width: 100%` on this * item alone therefore resolved against a `