/* ============================================================================ nav-v2.css - the wolverineworldwide.com header LAYOUT, carrying ISSB content. ============================================================================ Replaces the original EverWonder

. This folder is a design sandbox now, not a parity clone of everwonder.studio, so the original nav is gone rather than toggled. Every rule below is transcribed from wolverineworldwide.com's dist/main-bTb3VakF.css (98 .c-header* rules), and every token value is the one that stylesheet resolves to - captured with getComputedStyle at 1440x751 rather than re-derived, so the computed output matches property for property. CONTENT PARITY ENDED 28 AUG 2026, owner-directed, when the nav was rebranded to Prepare ISSB: new logo mark, seven ISSB links, no Responsibility dropdown, no footwear-brand links. _build/verify-nav-parity.js CANNOT PASS ANY MORE, BY DESIGN, and is retired the way _build/verify-parity.js already was - see the README. THE GEOMETRY IS STILL THE SOURCE'S, AND THAT IS WHAT THIS FILE IS FOR. The bar, the pill collapse, the hide past the fold, the Flip and the mobile panel are unchanged, so the six transcription traps in _build/NAV-PARITY-TODO.md STILL APPLY IN FULL to every rule below. Read them before editing. Losing parity as a test did not make any of them safe to reintroduce - it only removed the tool that would have caught them. ~~Rules for the removed dropdown (.c-header_dropdown*, html.has-dropdown-opened, .c-header_tile*) are deliberately left in place, matching nothing. They carry the @starting-style trap, which is trap 4.~~ PRUNED 28 AUG 2026 - see below. THE PRUNE, AND HOW DEAD WAS PROVEN. This file shipped ~10 KB of rules that could not match anything on the generated page: the Responsibility dropdown and its tiles, the .c-image lazy-load block that only styled those tiles, the .c-button glass CTA, .c-accordion, the mobile

accordion and the mobile footwear-brand grid - all removed from NAV_V2 in the 28 Aug rebrand, none of them removed from here. It is now the page's own , on the site's highest-traffic URL, so it was measured and cut. THE METHOD IS THE CONTAINMENT SWEEP, WITH ONE ADDITION, and the addition is the whole point. Running el.matches() over every element for every selector answers "does this rule apply RIGHT NOW", which is the wrong question: `html.has-scrolled .c-header`, `.c-header_logo:hover` and `html.has-mobile-menu-open .c-mobile-menu` all score zero at rest and are all completely alive. So each selector is reduced to its STRUCTURAL REMAINDER first - state-class prefixes, :hover/:focus/ :active, :has(:focus-visible), [aria-expanded], .is-open/.is-loaded/.is-inview and every pseudo-element stripped - and only a remainder that matches nothing counts as dead. Run against all 1,082 elements of the generated page; 193 rules in, and only the families named above came back zero. TWO FALSE POSITIVES THE NAIVE SWEEP PRODUCED, recorded so nobody "finishes the job" later. Both `html:not(.wf-design-mode) .page-wrapper:has([data-load-wrap])` rules report zero because the sweep runs AFTER the preloader has removed the wrap. They are the rules that hide the nav behind the curtain, and the c-header_nav one is the load-bearing opt-out that stops the inline `nav` rule catching our header. Do not remove them. Every trap in _build/NAV-PARITY-TODO.md survived intact: 1, 2, 3, 5, 6 and 7 touch rules that were not cut, and trap 4 - which the dropdown block was being kept to document - is restated in full at the tombstone where that block used to be. Two things worth knowing before editing: 1. The tokens sit on :root, exactly as the source has them. That is safe here: all 19 token families were checked against the Webflow bundle and index.html and not one appears in either (Webflow namespaces its own as --_theme---*, --_colors---*, --size-unit, --r-lg). Keeping them on :root rather than a wrapper class is what lets the header markup stay byte-identical to the source, which is what makes verify-nav-parity meaningful. Element resets are scoped to .c-header instead, so they cannot leak into the rest of the page. The header deliberately opts out of the clone's --size-unit adaptive-scaling system, sizing in rem/clamp() exactly like the source. Note that system sets font-size on body, not html, so rem stays 16px and the clamp() values resolve identically on both sites. 2. --vw is set from JS (see nav-v2.js), not from CSS. The source does the same and the value is the raw viewport width in px, so calc(var(--vw, 1vw) * 100) evaluates to 100x the viewport width. That looks wrong, and arguably is - but it is what the live site computes, it only ever feeds a max-width that never binds because the element is width:auto, and reproducing it is what keeps the computed max-width identical (95929.3px at 1440). Do not "fix" it; parity will fail. ---------------------------------------------------------------------------- */ /* ---------------------------------------------------------------- fonts ---- ~~ABCDiatype, from wolverineworldwide.com/fonts/.~~ SUBSTITUTED 28 Aug 2026. The header used to declare ABCDiatype here in two weights - Medium mapped onto 400 (the source's own mapping, not a slip) and Bold onto 700 - and set it as the inheritance firewall's font-family in the two rules further down. It is a commercial Dinamo licence: fine for a localhost design reference, and the last thing on this page that could not travel to prepareissb.com. It is now Instrument Sans, which is already vendored, already OFL, and already the body face for the whole page (assets/css/fonts-v2.css) and the pricing cards. The header therefore acquires no fourth typeface - it joins the one the rest of the document uses, which was the explicit reason to pick the same face for the nav as for the body rather than a closer width match. THE TWO @font-face BLOCKS ARE GONE, not merely unused. Everywhere else in this folder dead declarations are kept with a note, but a licence is different from a design decision: a live @font-face pointing at a font we may not ship is one forgotten selector away from fetching it again. The woff2 files stay on disk in assets/fonts/, dormant - see README -> "The fonts - licensed substitution" for how to put them back. Instrument Sans is declared in fonts-v2.css, which loads after this sheet; @font-face is not order-sensitive, so the family resolves here regardless. 400 and 700 both sit inside its 400-700 variable range, so the source's weight mapping survives the swap unchanged. */ /* --------------------------------------------------------------- tokens --- */ :root { --unit-sm: 12px; --unit-md: 20px; --unit-lg: 48px; --grid-columns: 12; --grid-margin: var(--unit-lg); --grid-gutter: var(--unit-md); --grid-width: calc(var(--vw, 100vw) - (2 * var(--grid-margin))); --grid-column-width: calc((var(--grid-width) - ((var(--grid-columns) - 1) * var(--grid-gutter))) / var(--grid-columns)); --spacing-unit-sm: var(--unit-sm); --spacing-unit-lg: var(--unit-lg); --spacing-gutter: var(--grid-gutter); --spacing-fluid-2xs: clamp(.375rem, .3315rem + .2174vw, .5rem); --spacing-fluid-xs: clamp(.5rem, .4565rem + .2174vw, .625rem); --spacing-fluid-sm: clamp(1rem, .8261rem + .8696vw, 1.5rem); --spacing-fluid-md: clamp(1.5rem, 1.3261rem + .8696vw, 2rem); --spacing-fluid-xl: clamp(2.5rem, 2.1522rem + 1.7391vw, 3.5rem); --spacing-fluid-2xl: clamp(3.5rem, 2.7609rem + 3.6957vw, 5.625rem); --radius-md: 10px; --radius-lg: 12px; --text-body-sm: clamp(.875rem, .8533rem + .1087vw, .9375rem); --text-body-md: clamp(.875rem, .7663rem + .5435vw, 1.1875rem); --text-body-lg: clamp(1.0625rem, .8668rem + .9783vw, 1.625rem); --text-heading-xs: clamp(1.25rem, .9674rem + 1.413vw, 2.0625rem); --color-white: #fff; --color-black: #010101; --color-gray-200: #ccc; --ease: cubic-bezier(.215, .61, .355, 1); --ease-power4-out: cubic-bezier(.23, 1, .32, 1); --transition-duration: .4s; --transition-duration-fast: .2s; --transition-duration-slow: .6s; --z-index-header: 50; --z-index-menu: 200; --z-index-below: -1; --z-index-above: 1; --icon-width-logo: 24px; --icon-ratio-logo: 24/16; /* THE TWO LOGOTYPE BOXES ARE OURS, NOT THE SOURCE'S (28 Aug 2026 navbar rebuild). Wolverine's drawn lettering was 252x16 and 176x9; "ISSB Preparation" is inline . */ html:not(.wf-design-mode) .page-wrapper:has([data-load-wrap]) nav.c-header_nav { visibility: visible; } /* Same trap, second victim: `.c-mobile-menu_outer` is also a

inside .page-wrapper, so that inline rule (0-3-2) pins it hidden and beat the open-state rule below at 0-2-1 - the panel got its opacity and clip-path but never became visible. Gated on `has-mobile-menu-open` so the CLOSED state still resolves to hidden normally; the preloader rule and the panel's own base rule agree there, so no counterpart is needed. Specificity here is 0-5-2, comfortably above the inline rule. */ html:not(.wf-design-mode).has-mobile-menu-open .page-wrapper:has([data-load-wrap]) nav.c-mobile-menu_outer { visibility: visible; } /* Inheritance firewall, part two. Measured on the live site, inherits exactly what does - ABCDiatype / 16px / 400 / 1.5 / normal / black - because both sit in

under Tailwind preflight. In the clone they would both inherit Webflow's 12px / 500 / -0.24px instead, so the panel needs its own copy of the same firewall. Kept as a separate rule rather than folded into the `.c-header` block below because that block also carries header-only layout (position: fixed, the max-width ladder, z-index). */ .c-mobile-menu { font-family: "Instrument Sans", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: normal; color: rgb(0, 0, 0); } .c-header { --header-transition-duration: .4s; --header-transition-ease: var(--ease); /* Inheritance firewall. The source header inherits its typography from Tailwind preflight (16px / 400 / 1.5 / letter-spacing normal) and its colour from the document default (black). Dropped into this clone it would instead inherit Webflow's body, which the --size-unit adaptive system drives to 12px / 500 / -0.24px, plus EverWonder's light-blue body text. Every header descendant that does not set its own size would then be wrong - measured as 45 of 67 nodes off before this rule existed. Restating the source's inherited values here fixes all of them at once. line-height stays unitless so descendants recompute it the way the source does. */ font-family: "Instrument Sans", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: normal; color: rgb(0, 0, 0); z-index: var(--z-index-header); width: 100%; transition: transform var(--header-transition-duration) var(--header-transition-ease); pointer-events: none; justify-content: center; align-items: center; margin-inline: auto; display: flex; position: fixed; top: 0; left: 0; right: 0; max-width: none !important; } /* The source ships this ladder of max-widths; the !important above defeats every one of them. Transcribed anyway so the cascade matches. */ @media (min-width: 340px) { .c-header { max-width: 340px; } } @media (min-width: 500px) { .c-header { max-width: 500px; } } @media (min-width: 700px) { .c-header { max-width: 700px; } } @media (min-width: 1000px) { .c-header { max-width: 1000px; } } @media (min-width: 1200px) { .c-header { max-width: 1200px; } } @media (min-width: 1400px) { .c-header { max-width: 1400px; } } @media (min-width: 1600px) { .c-header { max-width: 1600px; } } @media (min-width: 1800px) { .c-header { max-width: 1800px; } } @media (min-width: 2000px) { .c-header { max-width: 2000px; } } @media (min-width: 2400px) { .c-header { max-width: 2400px; } } @media not all and (min-width: 700px) { .c-header { padding-inline: var(--spacing-unit-sm); } } @media (min-width: 700px) { .c-header { padding-inline: var(--spacing-unit-lg); } } @media (min-width: 1000px) { .c-header { padding-top: var(--spacing-fluid-md); padding-bottom: var(--spacing-fluid-md); } } @media not all and (min-width: 1000px) { .c-header { padding-top: var(--spacing-gutter); padding-bottom: var(--spacing-gutter); } } /* Full-viewport scrim behind an open dropdown. */ .c-header:before { content: ""; opacity: 0; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: var(--z-index-below); transition: opacity var(--header-transition-duration) var(--header-transition-ease); background: #0003; position: fixed; top: 0; right: 0; bottom: 0; left: 0; } html:not(.has-dropdown-opened) .c-header:before { pointer-events: none; } /* Hide on scroll-down past the fold; reveal on any scroll-up. One rule, no JS. */ html.has-passed-fold.is-scrolling-down:not(.has-dropdown-opened):not(.brands-in-view) .c-header:not(:has(:focus-visible)) { transform: translateY(-100%); } /* ----------------------------------------------------------------- inner --- */ .c-header_inner { gap: var(--spacing-fluid-sm); width: 100%; transition: max-width var(--header-transition-duration) var(--header-transition-ease), width var(--header-transition-duration) var(--header-transition-ease), transform var(--header-transition-duration) var(--header-transition-ease); pointer-events: all; display: grid; position: relative; } @media (min-width: 1000px) { .c-header_inner { transform: translateY(var(--spacing-fluid-sm)); } html.has-scrolled .c-header_inner { gap: var(--spacing-fluid-xs); max-width: calc(8/12 * (calc(var(--vw, 1vw) * 100) - 2 * var(--grid-margin, 0px)) - (1 - 8/12) * var(--grid-gutter, 0px) + 0 * var(--grid-gutter, 0px)); width: auto; transform: translateY(0); } html.has-scrolled .c-header_inner, .c-header_inner:has(:focus-visible) { color: var(--color-white); } } @media not all and (min-width: 1000px) { .c-header_inner { color: var(--color-white); padding: 0; } } /* The clone's page is dark at scroll 0 on every route, so the header is white throughout - matching the source, where the same is true of the hero routes. */ .c-header_inner { color: var(--color-white); } /* ------------------------------------------------------------------ head --- */ .c-header_head { justify-content: space-between; gap: var(--spacing-fluid-sm); grid-template-columns: auto auto; width: 100%; display: grid; } @media (min-width: 1000px) { html.has-scrolled .c-header_head { justify-content: center; width: auto; } } /* ------------------------------------------------------------------ logo --- */ .c-header_logo { align-items: center; gap: var(--spacing-gutter); transition: opacity var(--transition-duration-fast) var(--ease); justify-self: start; display: flex; } @media (hover: hover) { .c-header_logo:hover { opacity: .8; } } @media not all and (min-width: 1000px) { .c-header_logo { margin: 0 var(--spacing-fluid-xs); position: relative; } } @media (min-width: 1000px) { .c-header_logo-icon.-large-desktop { transition: opacity var(--transition-duration) var(--ease); position: absolute; } html.has-scrolled .c-header_logo-icon.-large-desktop { opacity: 0; visibility: hidden; transition: opacity var(--transition-duration) var(--ease), visibility var(--transition-duration) var(--ease); } .c-header_logo-icon.-large-mobile { display: none; } } @media not all and (min-width: 1000px) { .c-header_logo-icon.-large-desktop { display: none; } .c-header_logo-icon.-large-mobile { transition: opacity var(--transition-duration) var(--ease), clip-path var(--transition-duration) var(--ease); clip-path: inset(0); position: absolute; } html.has-scrolled .c-header_logo-icon.-large-mobile { opacity: 0; visibility: hidden; clip-path: inset(0 100% 0 0); transition: opacity var(--transition-duration) var(--ease), visibility var(--transition-duration) var(--ease), transform var(--transition-duration) var(--ease), clip-path var(--transition-duration) var(--ease); } } html:not(.has-scrolled) .c-header_logo-icon.-small { visibility: hidden; } /* --------------------------------------------------------- mobile toggle --- */ @media (min-width: 1000px) { .c-header_toggle-mobile { display: none; } } @media not all and (min-width: 1000px) { .c-header_toggle-mobile { gap: var(--spacing-gutter); margin: 0 var(--spacing-fluid-xs); padding: 0 var(--spacing-fluid-2xs); cursor: pointer; font-size: var(--text-body-sm); text-transform: unset; letter-spacing: -.02em; font-style: normal; font-weight: 400; line-height: 1.2; display: flex; position: relative; } /* The pill behind the Menu button, and the label that sits above it. These are inside the mobile media query in the source too - transcribing them unscoped gave the desktop toggler a ::before with content and a positioned span, which is how they showed up as diffs at 1440 despite the button itself being display:none there. */ .c-header_toggle-mobile:before { content: ""; z-index: 0; border-radius: var(--radius-lg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); inset: calc(-1 * var(--spacing-fluid-xs)); opacity: 0; transition: opacity calc(var(--header-transition-duration) * 2) var(--header-transition-ease) calc(var(--header-transition-duration) * .25); background-color: #000c; position: absolute; } .c-header_toggle-mobile span { z-index: var(--z-index-above); position: relative; } html.has-scrolled .c-header_toggle-mobile:before { opacity: 1; transition-delay: 0s; } } /* Left unscoped, as the source has it - inert at desktop once ::before has no content. */ @media (hover: hover) { .c-header_toggle-mobile:hover:before { opacity: 1; background-color: #000; } } /* ------------------------------------------------------------------- nav --- */ .c-header_nav { gap: var(--spacing-gutter); justify-self: end; display: flex; } html.has-scrolled:not(.has-dropdown-opened) .c-header_nav { position: relative; } @media not all and (min-width: 1000px) { .c-header_nav { display: none; } } .c-header_nav-item { font-size: var(--text-body-sm); text-transform: unset; letter-spacing: -.02em; font-style: normal; font-weight: 400; line-height: 1.2; } .c-header_nav-link { --transition-duration: var(--transition-duration-fast); cursor: pointer; display: inline-block; position: relative; outline-offset: -.25em !important; } .c-header_nav-link:before { content: ""; inset: -.5em calc(-1 * var(--spacing-fluid-2xs)); border-radius: var(--radius-md); opacity: 0; transition: opacity calc(var(--transition-duration) * .5) var(--ease); background-color: color-mix(in srgb, currentColor 10%, transparent); position: absolute; } .c-header_nav-link:focus:before { opacity: 1; } .c-header_nav-link[aria-expanded="true"]:before { opacity: 1; } @media (hover: hover) { .c-header_nav-link:hover:before { opacity: 1; } } /* PRUNED 28 Aug 2026 - five rules removed here, all provably dead. They were `.c-header_nav-link > span` (our links are bare text; the source wrapped its label in a span), the three `.c-header_nav-link.-external` rules (Register stopped being an outbound link in the 28 Aug rebrand) and the two `.c-header_nav-dropdown-toggler-icon` chevron rules (the Responsibility toggler went with the dropdown). Verified with the el.matches() sweep described in the PRUNE note at the top of this file: zero matches for the STRUCTURAL remainder of every selector, at every header state. `.c-header_nav-link > span` IS TRAP 2's WORKED EXAMPLE and the lesson does not leave with the rule, because it is written up in full in _build/NAV-PARITY-TODO.md: the source's `.c-header_nav-link > span` (0-1-1) beats its bare `.c-icon` (0-1-0), so scoping the icon rule as `.c-header .c-icon` (0-2-0) silently reverses the contest. That is why `.c-icon` above is scoped with `:where()`. Removing the span rule cannot re-open the trap - `:where()` is already there, and it stays. */ /* -------------------------------------------------------------- the pill --- */ .c-header_bg { z-index: var(--z-index-below); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: #000c; position: absolute; } @media (min-width: 1000px) { .c-header_bg { border-radius: var(--radius-lg); inset: calc(-1 * var(--spacing-fluid-xs)) calc(-1 * var(--spacing-gutter)); opacity: 0; /* Fades out fast (.12s) and in slow (.4s) - see the override below. */ transition: opacity calc(var(--header-transition-duration) * .3) var(--header-transition-ease); } html.has-scrolled .c-header_bg, .c-header:has(:focus-visible) .c-header_bg { opacity: 1; transition-duration: var(--header-transition-duration); } } @media not all and (min-width: 1000px) { /* Mobile collapses by clipping the full-width bar down to the logo, not by shrinking. */ .c-header_bg { clip-path: inset(0 0 0 0 round var(--radius-lg)); inset: calc(-1 * var(--spacing-fluid-xs)) 0; transition: opacity var(--header-transition-duration) var(--header-transition-ease), clip-path var(--header-transition-duration) var(--header-transition-ease); } html.has-scrolled .c-header_bg { clip-path: inset(0 calc(100% - var(--icon-width-logo) - var(--spacing-fluid-xs) * 2) 0 0 round var(--radius-lg)); } } /* ---------------------------------------- dropdown, tiles, image, button --- */ /* PRUNED 28 Aug 2026 - about 360 lines removed here: the whole `.c-header_dropdowns` / `.c-header_dropdown` panel, the four `.c-header_tile*` families it held, the `.c-header .c-image*` lazy-load block that only ever styled those tiles' pictures, the entire `.c-button*` glass-CTA component (used only by a tile and by the mobile Responsibility sub-links) and `.c-accordion`. ALL OF IT WAS DEAD, and dead structurally rather than dead in one state. The Responsibility dropdown - toggler, panel, chevron and its three menu-reponsibility-*.webp tiles - went out of NAV_V2 in the 28 Aug rebrand, and `has-dropdown-opened` is never added to any more (nav-v2.js keeps only closeDropdowns(), which returns on its first line). Verified rather than argued: the el.matches() sweep in the PRUNE note at the top of this file reports zero matches for the STRUCTURAL remainder of every selector in the removed block, against all 1,082 elements on the generated page. WHY THIS WAS KEPT UNTIL NOW, AND WHY KEEPING IT IS NO LONGER THE RIGHT CALL. The README recorded this block as "matching nothing, deliberately: those rules carry trap 4". That was a real reason - but trap 4 is a WRITING rule, and it is written up in _build/NAV-PARITY-TODO.md under "Do not regress", which is where it belongs and where it survives this cut untouched. Keeping ~14 KB of unreachable CSS on the critical path of the site's highest-traffic URL in order to store a lesson that is already stored in prose is the wrong trade once this page actually ships. TRAP 4, IN ONE PARAGRAPH, so it is legible from here too. The source wraps `.c-header_dropdown.is-open { clip-path: inset(0 20% 100% 20% round ...) }` in `@starting-style`. It is the transition's FIRST FRAME, not a state, and it is paired with `transition-behavior: allow-discrete` on the base rule. Transcribed bare - which is what a regex rule-grabber hands you, because it strips at-rule context - it becomes a permanent rule and clips the panel shut forever. The symptom is not a style diff; it shows up as the tile images never gaining `is-loaded`, because Chrome correctly declines to lazy-load pictures that are clipped out of view. WHEN EXTRACTING RULES WITH A REGEX, CHECK WHAT AT-RULE EACH ONE WAS INSIDE. The header-relevant wrappers in the source are `@layer components`, three `@supports (color: color-mix(in lab, red, red))` guards, and that one `@starting-style`. Two smaller findings that were in the removed comments and are worth keeping: `.c-header .c-image.-lazy-load .c-image_img[loading="lazy"]` reproduced the source's BROKEN `transition: transform theme-speed(slow)theme-ease(), ...` on purpose - the unresolved functions invalidate the declaration so both sides compute `transition: all`, and writing the "fixed" version is what made that node diff forever. And `.c-button.-unstyled .c-button_label { all: unset }` is the source's own use of the same `all: unset` that trap 3 has to defeat elsewhere. TO RESTORE: the removed rules are the `.c-header_dropdown*`, `.c-header_tile*`, `.c-header .c-image*`, `.c-button*` and `.c-accordion` runs of wolverineworldwide.com's `dist/main-bTb3VakF.css`, which is where every rule in this file came from. Restoring the markup without them is what would need doing first, and that is a design decision, not a CSS one. */ /* -------------------------------------------------------------- mobile menu --- */ /* A SIBLING of inside

, not a child - see the note in utilities. Transcribed from dist/main-bTb3VakF.css. The panel is a fixed full-viewport layer holding a scrim (::before) and an inset rounded card (.c-mobile-menu_outer) that clip-paths open from the top. All state is two classes: `has-mobile-menu-open` on and `is-open` on the element. */ .c-mobile-menu { --mobile-menu-transition-duration: var(--transition-duration); --mobile-menu-transition-ease: var(--ease); z-index: var(--z-index-menu); pointer-events: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .c-mobile-menu:before { content: ""; z-index: var(--z-index-below); opacity: 0; pointer-events: none; transition: opacity var(--mobile-menu-transition-duration) var(--mobile-menu-transition-ease); background-color: #000c; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } html.has-mobile-menu-open .c-mobile-menu { pointer-events: all; } html.has-mobile-menu-open .c-mobile-menu:before { opacity: 1; } @media (min-width: 1000px) { .c-mobile-menu { display: none; } } .c-mobile-menu_outer { inset: var(--spacing-fluid-xs) var(--grid-margin); color: var(--color-white); z-index: var(--z-index-menu); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0 round var(--radius-lg)); transition-property: opacity, clip-path, visibility; transition-duration: calc(var(--mobile-menu-transition-duration) * .5), calc(var(--mobile-menu-transition-duration) * .5), 0s; transition-timing-function: var(--mobile-menu-transition-ease); transition-delay: 0s, 0s, calc(var(--mobile-menu-transition-duration) * .5); background-color: #000c; position: absolute; overflow: auto; } html.has-mobile-menu-open .c-mobile-menu_outer { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0 round var(--radius-lg)); transition-duration: var(--mobile-menu-transition-duration), var(--mobile-menu-transition-duration), 0s; transition-delay: 0s, 0s, 0s; } .c-mobile-menu_inner { gap: var(--spacing-fluid-2xl); min-height: 100%; padding: var(--spacing-gutter); flex-direction: column; display: flex; position: relative; } /* ~~NOTE: this computes ~19478px wide at 390...~~ FIXED 28 Aug 2026 (QA defect D5). The rule used to carry the source's own grid-space() calc verbatim: width: calc(2/4 * (calc(var(--vw, 1vw) * 100) - 2 * var(--grid-margin, 0px)) - (1 - 2/4) * var(--grid-gutter, 0px) + 0 * var(--grid-gutter, 0px)); --vw is set from JS as the raw viewport width IN PX (nav-v2.js), so `* 100` makes it a hundred times too large: 15,978px at 320, 19,478px at 390. The button is position:absolute right:0 with justify-content:space-between, so what that produced was a box hanging ~19,000px off the left edge of the screen with its "Close" label parked at x = -19,080 and only the cross visible. It was verified harmless - links win the hit test inside the panel and the box is inside an overflow container, so it caused no horizontal overflow - and it was kept because reproducing the source exactly is what made verify-nav-parity meaningful. THAT TEST IS RETIRED (README -> "Header parity ... RETIRED"), so the only thing the calc was still buying is a 19,478px layout box on a control a finger has to hit. It is now `width: auto`, which is what the element effectively renders as anyway. WHAT DOES NOT CHANGE, and this is the whole point of doing it this way. Correcting the calc to `var(--vw, 100vw)` - the honest reading, and what line 122 already does - gives 138px at 320 and 173px at 390, and at that width the "Close" label comes back ON SCREEN next to the cross. That is a visible design change nobody asked for. So the box is sized to its content instead and the label is kept exactly as it renders today - off-screen - by the rule below, which also keeps it as the button's accessible name. Result: the cross sits at the same distance from the panel's right edge as before (padding-right is --spacing-gutter either way), and the hit area stops being 19,478px wide. The SAME slip survives at line ~475 (`html.has-scrolled .c-header_inner`) and is deliberately left there: that one feeds a max-width on a width:auto element, it does not bind at 95,929px and it would start binding at 596-889px, so "fixing" it would introduce a constraint on the collapsed pill that does not exist today. Inert, and documented at the rule. */ .c-mobile-menu_close { z-index: var(--z-index-above); width: auto; justify-content: space-between; align-items: center; gap: var(--spacing-fluid-2xs); padding: var(--spacing-fluid-2xs) var(--spacing-gutter); border-radius: var(--radius-lg); cursor: pointer; display: flex; position: absolute; top: 0; right: 0; } /* The "Close" label. The source's broken width pushed it ~19,000px off the left edge; with `width: auto` it would land back beside the cross, so it is held off-screen explicitly instead. Taking it out of flow rather than out of the accessible tree: display:none would leave the button with no accessible name at all, and this button has no aria-label. One in-flow child remains, so space-between is a no-op and the cross keeps its position. */ .c-mobile-menu_close > span:first-child { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .c-mobile-menu_close:before { content: ""; opacity: 0; z-index: var(--z-index-below); border-radius: var(--radius-md); background-color: currentColor; position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px; } @supports (color: color-mix(in lab, red, red)) { .c-mobile-menu_close:before { background-color: color-mix(in srgb, currentColor 10%, transparent); } } @media (hover: hover) { .c-mobile-menu_close:hover:before { opacity: 1; } } .c-mobile-menu_logo-link { margin-top: var(--spacing-fluid-xl); transform: translate3d(0, calc(-1 * var(--spacing-fluid-xl)), 0); transition: transform var(--mobile-menu-transition-duration) var(--mobile-menu-transition-ease); align-self: center; } html.has-mobile-menu-open .c-mobile-menu_logo-link { transform: translate(0); } .c-mobile-menu_logo { --icon-width-logo: 100px; display: block; } .c-mobile-menu_main { flex-direction: column; display: flex; } .c-mobile-menu_main-item { transform: translate3d(0, calc(-1 * var(--spacing-fluid-xs)), 0); opacity: 0; transition: transform var(--mobile-menu-transition-duration) var(--mobile-menu-transition-ease), opacity var(--mobile-menu-transition-duration) var(--mobile-menu-transition-ease); border-bottom: 1px solid; } @supports (color: color-mix(in lab, red, red)) { .c-mobile-menu_main-item { border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); } } /* PRUNED 28 Aug 2026 - `.c-mobile-menu_main-item summary` and its two marker-hiding rules. The mobile panel's items were

only while the Responsibility accordion existed; every item is now a plain

holding one . The `summary { display: block }` / `summary::-webkit-details-marker { display: none }` pair in the RESET band above is deliberately NOT removed with them - that band is trap 3 territory (it has to land in a 0-0-2 specificity window between Webflow's bare element rules and the component rules) and is not the place to make a byte argument. */ html.has-mobile-menu-open .c-mobile-menu_main-item { opacity: 1; transform: translate(0); } .c-mobile-menu_main-link { font-size: var(--text-body-lg); text-transform: unset; letter-spacing: -.02em; padding: .6em 0 .3em; font-style: normal; font-weight: 400; line-height: 1.2; display: block; } @media (min-width: 700px) { .c-mobile-menu_main-link { line-height: 1.1; } } /* PRUNED 28 Aug 2026 - the mobile panel's two dead subtrees, ~2.4 KB. `.c-mobile-menu_main-dropdown*` (8 rules) styled the Responsibility

accordion inside the mobile menu: the +/- glyph drawn from two pseudo-elements, its `details[open]` scaleX(0) collapse, the sub-link list and the `.c-mobile-menu_main-dropdown-button` token block. `.c-mobile-menu_secondary*` (4 rules, counting the @supports pair) styled the two-column grid of eleven outbound footwear-brand links that used to sit under them. Both were removed from NAV_V2 in the 28 Aug rebrand - the accordion because ISSB has no Responsibility section, the brand grid because none of those links may travel to prepareissb.com. Zero matches for the structural remainder of every selector, in both header states, at 390 and 1440. ONE CONSEQUENCE WORTH KNOWING, because it is layout rather than paint: `.c-mobile-menu_secondary-wrapper` was `flex-grow: 1; justify-content: flex-end`, i.e. the bottom spacer that pushed the brand grid to the foot of the panel. With the wrapper gone the seven links simply sit at the top of the panel, which is what they already did - the wrapper was removed from the markup on 28 Aug and this rule has been styling nothing since. */ /* ============================================================================ TAP TARGETS - owner-directed hard gate, 28 Aug 2026. ============================================================================ Every interactive control in the header and the mobile panel must measure at least 44px in its smallest dimension. THREE OF THEM DID NOT, and none of it was visible by eye - the numbers came out of getBoundingClientRect at 320/390/767: .c-header_toggle-mobile 16.9px tall at 390 (the hamburger) .c-mobile-menu_main-link 38.1px tall at 390 (the seven menu links) .c-mobile-menu_close 36.3px tall at 390 (the close button) .c-header_nav-link 33px tall at 1024 (all seven desktop links) The desktop one is the easiest to miss, because 1024 still shows the DESKTOP nav - the header's breakpoint is 1000, not 768 - while being a width people touch. Sign in and Register are desktop nav links there, not menu links. THIS IS THE em TRAP, and it is inherited from the source rather than introduced here: these controls are sized in em against --text-body-sm / --text-body-lg, which are clamp() values that shrink as the viewport narrows. So the controls are smallest exactly where fingers are largest, and reading the CSS tells you nothing - the only way to know is to measure the rendered px at the narrow end. Fixed below rather than by editing the transcribed rules above, so those still read as the source wrote them and the six traps in _build/NAV-PARITY-TODO.md still line up against them. */ @media not all and (min-width: 1000px) { /* THE HAMBURGER IS WIDENED BY A PSEUDO-ELEMENT, NOT BY min-height. It is a grid item in .c-header_head, sitting next to the logo, so giving the button itself a 44px height would push the whole header row from 56.9px to ~76px and move every mobile measurement with it. An absolutely positioned ::after inherits the hit area without contributing any layout, which keeps the row exactly where it was. ::before is already taken - it is the blurred pill behind the label - so this is ::after. No z-index: it must not paint over the label, and it does not need to. Hit testing walks to the originating element either way, so a tap anywhere in this box is a tap on the button. */ .c-header_toggle-mobile:after { content: ""; position: absolute; left: 0; right: 0; top: 50%; /* 48, not 44. At exactly 44 the measured hit band came back 43-44px depending on where the sub-pixel boundary fell (the button's own box is 16.9px tall, so the band is centred on a fraction). 48 clears the gate at every width without reaching the 56.9px header row. */ height: 48px; transform: translateY(-50%); } /* The panel scrolls and nothing measures off these, so here min-height is safe and honest. display:block is PRESERVED deliberately - switching these to flex to centre the text would make the whitespace between the label and the arrow collapse, which is the 4px icon shift called out in the NAV_V2 comment. */ /* 45, not 44 - pre-ship review finding L7, 28 Aug 2026. The 0.5px elementFromPoint probe reads a genuinely 44.0px control as 44.5 (22 up + 22 down + the centre step); these boxes sit on fractional coordinates, so the probe loses half a step on one side and they read exactly 44.0, i.e. 43.5 of reachable area. Half a pixel is not a usability problem, but it fails a >=44 gate, and the same one-pixel correction is applied to the footer row in footer-v2.css. */ .c-mobile-menu_main-link { min-height: 45px; } /* Already display:flex with align-items:center, so min-height centres the cross without moving it. The button's absurd computed width (~19478px) is the source's own --vw slip and is left alone - see the note on the rule above. */ .c-mobile-menu_close { min-height: 45px; } /* 45, not 44 - see above */ } @media (min-width: 1000px) { /* Same pseudo-element trick as the hamburger, and for the same reason: these links sit in a flex row inside .c-header_head, so a real height would push the header row and move the pill with it. ::before is the hover chip, so this is ::after. THE 8px HORIZONTAL BLEED IS BUDGETED, not guessed. The narrowest link is "Blog" at 29.1px, which clears 44 in height but not in width, so the hit area has to grow sideways too. The gap between adjacent links is --spacing-gutter, measured at 20px, and 8px each side spends 16 of it - leaving 4px of dead space between neighbouring hit areas. Going to 10px would make them touch, and one link would start swallowing taps meant for the next. If --spacing-gutter ever shrinks, re-measure before trusting this number. */ .c-header_nav-link:after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 46px; transform: translateY(-50%); } } /* THE LOGO WAS THE FIFTH CONTROL, and it was missed by the 28 Aug tap-target pass because it is the one that does not LOOK small: at rest the wordmark beside it is 92-124px wide and reads as a big, obvious target. Measured (elementFromPoint probing at 0.5px, not getBoundingClientRect alone, because the absolutely-positioned logotype spans hit-test to the anchor and widen it well past its own box): width 320 390 767 1024 1440 hit W 92 92.5 92.5 124 124 <- never the problem hit H 17 17 17.5 18 18 <- ALWAYS the problem Height is the whole failure and it is flat across the ladder, which is the tell that this is not the em trap that produced the other four: the logo's height comes from --icon-height-logo, and that token does not shrink with the viewport. It was just never 44 anywhere. AND IT CANNOT BE FIXED WITH min-height, more strictly than any of the other four. .c-header_logo's only IN-FLOW child is the -small icon span (both logotypes are position:absolute), so this element's height IS the header's row height - see the note on the viewBox in NAV_V2. Giving it 44px would take the header from 82 to ~108 at desktop and 56.9 to ~83 at mobile, and drag the collapsed pill's geometry with it. Hence the same ::after as the hamburger and the desktop links. height: 46px MATCHES .c-header_nav-link's, deliberately - the two hit areas sit side by side in the collapsed pill and a mismatched pair reads as a misalignment under any hit-area debugger. Both bleed ~6px below the 82px header at desktop, on to hero backdrop that carries no interactive element; that was already accepted for the links on 28 Aug and the reasoning has not changed. A FIXED 44px WIDTH CENTRED ON THE MARK, not a symmetric bleed, and the first attempt is why. `left: -10px; right: -10px` looks equivalent and is not: the logo box is 24px at >=1000 but only 20px below it (different icon token), so one bleed value cannot produce one width - measured, that rule gave 44.5px at 1024/1440 and 40.5px at 320/390/767, i.e. it passed on desktop and failed on every phone. Asking for the width directly is both shorter and correct at all five widths. 44 IS ALSO THE CEILING HERE, not just the floor, because of what sits beside it. In the collapsed pill at 1440 the logo box is x 469.9..493.9, so 44px centred is 459.9..503.9, and the first nav link's OWN hit area already begins at 509.85 (box at 517.9, less its 8px bleed) - 5.9px of dead space. At 1024 the same sum leaves 4.1px. Anything wider and the logo starts swallowing taps meant for "Pricing". Below 1000 there is no nav to collide with (the hamburger is ~185px away), so the same 44 is comfortable rather than tight. position: relative is added for the >=1000 case, where the element is static and an absolutely-positioned ::after would otherwise resolve against some ancestor. It moves nothing: relative with no offsets does not shift the box the GSAP Flip measures, and the two logotype spans use auto offsets, so they stay at their static position whichever ancestor becomes their containing block. Verified by measuring the logotype rect either side of the change - identical. ::before is free on this element (unlike the hamburger and the links), but ::after is used anyway so all five hit areas in this file are the same construct. */ .c-header_logo { position: relative; } .c-header_logo:after { content: ""; position: absolute; left: 50%; top: 50%; /* 45, not 44 - finding L7, same half-step probe artefact as the two mobile-menu controls above. The "44 is also the ceiling" note above still holds with a pixel to spare: at 1440 the collapsed pill's logo box is x 469.9..493.9, so 45 centred spans 459.4..504.4 against the first nav link's hit area starting at 509.85 - 5.4px of dead space, and 3.6px at 1024. Re-measured after the change at both header states and all five widths. */ width: 45px; height: 46px; transform: translate(-50%, -50%); }