/** * Responsive components. * * Hand-written component classes, loaded after dist/output.css. That file is * generated from src/input.css by the Tailwind build and must not be edited by * hand, so shared layout rules live here instead: written once, reused by name, * so a fix lands in one place rather than being sprinkled through the markup. * * Nothing in here uses !important. If a rule needs it, the markup is wrong. */ /* --------------------------------------------------------------------------- * Header mega menu * * A dropdown used to hang off its own nav item: `relative` on the item and * `left-0` on the panel. The mega panel is up to 1000px wide, so an item right * of centre pushed it past the window. Measured on the live page: * * viewport panel document width * 1024 x 639 → 1631 (607 out) 1630 * 1280 (270 out) 1550 * 1440 x 521 → 1521 (81 out) 1520 * 1920 fits 1920 * * `overflow-x: hidden` on did not contain it, because the scroller is * — the page still measured wider than the screen, and the panel itself * opened half off the edge on any laptop or iPad in landscape. * * The panel now hangs off the nav ROW instead, so it spans the container and * cannot leave it at any width. A new mega item needs no new CSS: give the row * .wax-nav-row and the item the three classes below. * ------------------------------------------------------------------------ */ /* The row is the positioning context every mega panel measures itself from. */ .wax-nav-row { position: relative; } /* Static on purpose: the panel must skip the item and find the row. */ .wax-nav-mega { position: static; } /* Spans the row, so the panel can never start past the container's edge. */ .wax-nav-mega__drop { left: 0; right: 0; } /* Full width of the row until the row is wider than the panel's own maximum. */ .wax-nav-mega__panel { width: min(1000px, 100%); margin-inline: auto; } /* --------------------------------------------------------------------------- * Header contact widget + icon buttons * * Moved here from a 2.6 KB inline