/* ========================================================================== AMIN APAC — header-menu.css The mobile disclosure menu. Members, Insights, Free tools, Newsletter and Sign in, behind one button below 720px. WHAT THIS REVERSES, AND WHAT IT DOES NOT. base.css's "THE NAV TAKES A ROW RATHER THAN VANISHING" (2026-09-02) argued against exactly this control: "a disclosure button would hide them behind a tap, an overlay, a focus trap, an Escape handler and a script - a lot of machinery to conceal four words that fit." The reasoning was sound and the machinery below is the price it named, paid in full rather than skipped. The decision was overruled on 2026-09-03 by the person whose page it is. The row is NOT deleted: it is what this degrades to, and above 720px it is still the whole navigation. THE CTA STAYS IN THE BAR. "Get in touch" is the header's one action - a decision that predates both the row and this menu - and a primary action behind a disclosure is a primary action nobody takes. The menu holds the four sections and the account link, which are the things a visitor goes LOOKING for. Nothing that was competing for attention has been hidden; nothing that was earning it has. NOTHING HAPPENS WITHOUT THE SCRIPT. Every rule that collapses the row is scoped under html.has-hdr-menu, which js/header-menu.js sets on itself. With scripting off there is no button, no panel and no class, and the header is byte-for-byte the row this file was written against - which is the promise the header comments on all 26 pages make and the reason a hamburger was refused the first time. ABOVE 720 THE DOM IS UNTOUCHED. The script moves the nav and the account link into the panel only while the query matches, and puts them back where it found them when it stops. Everything measured on the desktop and tablet bar - the flex order, the auto margins header-account.css corrects, the crumb hero-map.css centres on index - runs against the same nodes in the same places it always did. Deletable as a set with js/header-menu.js and the two include lines per page. ========================================================================== */ /* --- The toggle ---------------------------------------------------------- Injected by the script, so it does not exist to be hidden when the script is absent. It still declares display:none as its resting state, because the panel band is 720 and the button must not appear on the tablet bar where the row is still inline and correct. */ .hdr-toggle{display:none} @media (max-width:720px){ .has-hdr-menu .hdr-toggle{ /* Order matters: base.css gives .site-header .btn margin-left:auto, so the CTA takes the free space and the toggle sits hard against it at the far edge. Far right is where a thumb on a phone looks for this control. */ display:inline-flex;align-items:center;justify-content:center; /* 44 square. The site's own touch floor, and this is the smallest named target in the bar. */ width:44px;height:44px;flex:none; padding:0;border:0;background:none; color:var(--black); cursor:pointer; border-radius:var(--r-pill); -webkit-tap-highlight-color:transparent; } /* The bar's other controls take their ring from base.css's global :focus-visible. This is a bare button, so it needs the ring named. */ .has-hdr-menu .hdr-toggle:focus-visible{ outline:2px solid var(--purple-deep);outline-offset:2px; } /* The three bars. One element and its two pseudo-elements rather than three spans: the script injects this markup, and the less of it there is the less there is to disagree with. */ .hdr-burger, .hdr-burger::before, .hdr-burger::after{ display:block;width:20px;height:2px; background:currentColor;border-radius:1px; transition:transform 220ms var(--ease),opacity 120ms linear; } .hdr-burger{position:relative} .hdr-burger::before, .hdr-burger::after{content:"";position:absolute;left:0} .hdr-burger::before{top:-6px} .hdr-burger::after{top:6px} /* Open: the middle bar goes, the outer two cross. Driven off the button's own aria-expanded rather than a class, so the visual state cannot drift from the state assistive technology is told about - if the attribute is ever wrong, the icon is visibly wrong with it. */ .hdr-toggle[aria-expanded="true"] .hdr-burger{background:transparent} .hdr-toggle[aria-expanded="true"] .hdr-burger::before{top:0;transform:rotate(45deg)} .hdr-toggle[aria-expanded="true"] .hdr-burger::after{top:0;transform:rotate(-45deg)} /* --- The bar, collapsed ------------------------------------------------ The row's own rules in base.css are left exactly as they are; the nodes they style are simply not in the bar any more. What the bar needs is a positioning context for the sheet and a layer to sit above the hero in. `html` IS IN THE SELECTOR TO WIN, NOT TO DESCRIBE - the same move, and for the same reason, that header-account.css writes `.site-header .wrap` for. immersive-hero.css sets `body.v2 .site-header{position:static}` below 900, and that is (0,2,1): `body` and `.site-header` and `.v2`. A plain `.has-hdr-menu .site-header` is (0,2,0) and LOSES to it. The header then stayed static, a static element ignores z-index, so it created no stacking context and the scrim painted straight over the open panel - every link in the menu was visible and unclickable. Adding `html` makes this (0,2,1) too and this sheet loads after immersive-hero.css on all 26 pages, which is what settles the tie. Caught by a Playwright click, not by reading. */ html.has-hdr-menu .site-header{position:relative;z-index:60} /* AND IT NEEDS A GROUND WHILE THE MENU IS OPEN. The bar is above the scrim, but index, profile, the eleven member pages and profile-v2 all set `background:transparent` on it below 900 - they are transparent over a white page, not white. A transparent element cannot occlude, so the scrim painted straight through the bar and greyed the wordmark and the CTA along with the page. Measured white on all 24 pages that get this menu, header's own background or the ground behind it, so --white is the true colour rather than a guess. Keyed on the lock class, which only exists while a menu is open, so the bar at rest is untouched on every page. (0,2,1) - the same weight as immersive-hero.css's `body.v2 .site-header`, and this sheet loads after it. */ html.hdr-menu-locked .site-header{background:var(--white)} /* --- The sheet --------------------------------------------------------- Absolute under the bar rather than a full-screen overlay. Five items do not need the whole viewport, and keeping the wordmark and the action visible means the reader can still see what they opened the menu ON. */ .hdr-menu{ position:absolute;left:0;right:0;top:100%; /* Above the scrim's 50 explicitly. The header's z-index:60 already lifts the whole bar clear, so this is belt and braces against a page sheet that gives the header a stacking context of its own. */ z-index:2; background:var(--white); border-top:1px solid var(--line); box-shadow:var(--e-high); /* visibility, not opacity alone - the rule .hdr-context already states in hero-map.css. A panel faded to nothing is still tabbable. `inert` on the element is the real guard and the script sets it; this is the second lock, so a script that fails half way cannot leave a live invisible menu. */ visibility:hidden;opacity:0;transform:translateY(-8px); transition:opacity 200ms var(--ease),transform 240ms var(--ease),visibility 0s linear 240ms; /* A phone in landscape has very little height. The list scrolls inside the sheet rather than running off the bottom of the window. */ max-height:calc(100vh - 100%);overflow-y:auto;overscroll-behavior:contain; } .hdr-menu.is-open{ visibility:visible;opacity:1;transform:none; transition:opacity 220ms var(--ease),transform 260ms var(--ease),visibility 0s; } .hdr-menu-inner{padding:var(--s3) var(--s5) var(--s5)} /* The nav, restacked. base.css's 720 block draws .ins-nav as the full-width scrolling row; at 0,2,0 these outrank it without touching it, so deleting this file restores that row intact. */ .hdr-menu .ins-nav{ display:grid;gap:0; margin:0;padding:0;border-top:0; overflow:visible; } .hdr-menu .ins-nav a{ /* 15px was right for four links competing for one line. A stacked list has the width, and 17px is the base body size - the menu reads as content rather than as chrome. */ font-size:17px;line-height:24px; min-height:52px;padding:0; display:flex;align-items:center; color:var(--black); white-space:normal; } .hdr-menu .ins-nav a + a{border-top:1px solid var(--line)} .hdr-menu .ins-nav a:hover{color:var(--blue-deep)} /* The current page keeps its mark. base.css draws it as an inset underline sized for a horizontal row, which under a stacked item reads as a divider rather than a state - so it becomes ink and weight instead. */ .hdr-menu .ins-nav a[aria-current="page"]{ color:var(--plum);font-weight:600;box-shadow:none; } /* Sign in, below a rule. It is an account control, not a section of the site, and stacking it flush with the four would state that it is one. */ .hdr-menu .hdr-account{ /* header-account.css pushes this with margin-left:auto for the bar. */ margin:var(--s3) 0 0; padding-top:var(--s3); border-top:1px solid var(--line); display:flex;align-items:center;min-height:44px; font-size:15px; } /* The white-on-white correction header-account.css makes in its own 900 block is scoped to .hdr-account generally, so it already covers the link in here. Named so the next person does not add a second copy of it. */ /* --- The scrim --------------------------------------------------------- Appended to by the script. Fixed, and below the header's z-index, so it darkens the page without touching the bar the menu hangs from. */ .hdr-scrim{ position:fixed;inset:0;z-index:50; background:rgb(18 20 25 / .38); opacity:0;transition:opacity 200ms var(--ease); /* A tap on the page behind is a close, and a drag on it must not scroll the document under an open menu. */ touch-action:none; } .hdr-scrim.is-open{opacity:1} } /* The scroll lock. On rather than so a page stylesheet setting body overflow cannot undo it, and outside the media query because the script only ever applies it while the query matches. */ .hdr-menu-locked, .hdr-menu-locked body{overflow:hidden} /* base.css's reduced-motion block already carries `*{transition:none!important}`, which removes every transition declared above - the sheet and the icon snap rather than move, which is the correct outcome and needs no rule here. It also removes the DELAYED visibility transition, because that is the same declaration: visibility then flips instantly in both directions, which is what the delay existed to fake. Recorded so the next person does not "fix" a contract that is already being met. */