/* Powershift header — v5, the glass bar back on its own terms (Wayne, 16 Oct 2026). THE SHAPE HAS MOVED FOUR TIMES. This file is the fourth, and it is v2's bar again — the floating capped-width sheet of glass with a text toggle at each end — with five changes and nothing else. The two shapes in between were built, looked at, and dropped: v3 no bar at all: two glass chips at the rail's edges, a hero lockup that left on scroll. Rejected the day it was built ("this is what we asked for but no one likes it"). v4 a full-bleed bar with the lockup in it and brand-coloured buttons. Also dropped: a full-width bar stopped reading as an object, and keeping it over the open sheet put glass on glass, which flattens both. WHAT v5 CHANGES AGAINST v2, and it is only this: 1 · PINNED TO THE TOP of the browser — no top margin. The bar's side insets and its width are v2's, untouched; only the gap above it is gone. 2 · NOTCHES AT BOTTOM-LEFT AND BOTTOM-RIGHT. v2 cut top-left + bottom-right; v1 cut both bottom corners, which is where this returns to. 3 · The open menu is the FULL-SCREEN SHEET (v3's): the whole viewport, square, the menu list in two columns and the social row, and nothing else. 4 · WHILE THE SHEET IS OPEN THE BAR ITSELF IS GONE. Its glass, its stroke and its shadow all switch off and only the Menu-turned-Close, Hire now and the lockup stay, each exactly where it sits on the bar. Glass over glass reads as neither. 5 · The contact region is out of the sheet — social only. Gated, not deleted; see blocks/header-contact/render.php. Everything else here is v2's, including the two text toggles, the 40px lockup and the 78px row. There is no JavaScript in this header: assets/js/header-glass.js went when the sheet stopped being part of the bar (nothing left to measure), and v3's header-logo.js went with v3. The lockup's animated build still plays once on load, from inside the SVG. COLOUR LIVES IN assets/css/glass.css, not here. .pwr-header carries `.pwr-glass-dark` or `.pwr-glass-light`, set by `pwr/header_scheme` in functions.php, and this file names no preset colour at all — only tokens. Read that file before changing any colour here. Structure, outside in: .pwr-header pinned by the template part; its ::before IS the open sheet's glass .pwr-header__frame the floating box: width, and the two painted glass layers .pwr-header__cast the shadow — a blurred strip tucked under the bar .pwr-header__bar the content layer (no paint of its own; see trap 1) .pwr-header__rail → .pwr-header__row → menu · logo · CTA The sheet is core's overlay, now the whole viewport, and it opens UNDER the bar's contents. */ /* ══════════════════════════════════════════════════════════════════════════════════════ FIVE TRAPS (v2 §2, plus two found since). Each fails SILENTLY: the page still renders, the glass just isn't glass. Read these before changing anything above the tokens. 1 · `filter` OR `backdrop-filter` ON AN ANCESTOR KILLS `backdrop-filter`. Both make an element a "backdrop root", so a descendant's backdrop-filter samples only inside that ancestor and collapses to a flat tint. This is why there is no `filter: drop-shadow()` anywhere on the header, and why a chip gets no cast: the drop shadow would switch off the chip's own glass. It also decides WHERE each layer lives. The sheet's glass is `.pwr-header::before` — a pseudo-element, so it is a SIBLING of the open panel in the box tree, not an ancestor, and the panel's contents are not sampled into it. A chip paints the same way one level down: the chip's own background is the stroke and its ::before is the glass, and the chip is a sibling of the overlay, never a parent of it. 2 · `clip-path` LEAVES THE CHAMFER DIAGONALS UNSTROKED. `box-shadow: inset 0 0 0 1px` follows the border box, so on a chamfered element the two diagonals get no line and the notches read as holes. The fix is two stacked chamfered layers: the outer one is the stroke colour, the inner one is inset 1px and clipped 1px tighter. The inner layer's backdrop-filter samples the outer's translucent white too, which is why the fill reads slightly lighter than its stated value — that is accounted for. On a chip the outer layer is the element's own background and the inner is its ::before at `z-index: -1`, which paints after the background and before the label. 3 · GLASS NEEDS SOMETHING BEHIND IT. Over a flat page the blur has nothing to do and a chip reads as a plain tint. On page types that open on a flat light ground, `body.pwr-header-flat` raises the fill (see functions.php and glass.css). Browsers without backdrop-filter get the same via @supports at the end of glass.css. 4 · `backdrop-filter` IS INERT INSIDE CORE'S OVERLAY — and v3 is why that stopped mattering. Declared anywhere inside `.wp-block-navigation__responsive-container.is-menu-open` it computes correctly and blurs NOTHING: measured 2.5% edge-softening against blur switched off, i.e. none. Eliminated individually: ancestor filter / backdrop-filter / opacity (there are none), the chamfer clip-paths, the container's identity transform, the nested stacking contexts, the header's fixed positioning, the `overflow: hidden` core puts on via `has-modal-open`, and moving the glass to a pseudo or to an injected div. Every one: still 0–2%. The same recipe OUTSIDE the overlay measures 50–82% on the same page with the menu open. It is the overlay SUBTREE, nothing else. v2 worked around it by stretching the bar's own glass down over the open panel, which needed the panel's height published from JavaScript (assets/js/header-glass.js, now deleted). The sheet is the viewport, so `.pwr-header::before` can be `position: fixed; inset: 0` and no measurement is needed. DO NOT move the sheet's glass back inside the overlay to "simplify" it — it will render flat. 5 · INSIDE THIS FIXED HEADER, ONLY A FIXED BOX GETS A BACKDROP. Measured 15 Oct 2026, Chromium, over the front page's photographic hero, while building v3's chips — and it is why THE BAR'S TWO LAYERS ARE `position: fixed` rather than absolutely positioned inside the frame: · `backdrop-filter` on an absolutely-positioned layer anywhere inside the fixed header, while that layer lies within the header's own box, blurs NOTHING. Tried and failed: on the element, on its ::before, on a real injected , at `z-index: -1` and `0`, with and without clip-path on either, with `will-change: backdrop-filter`, with `translateZ(0)`, with `isolation: isolate`, with the radius dropped to 12px, and with every stacking context between it and the header flattened one at a time. · the SAME element blurs correctly once it is positioned outside the header's box, and a `position: fixed` box blurs correctly at the very same coordinates inside it. So: anything in this header that has to blur is `position: fixed`. That costs nothing here — the bar is pinned to the top of the viewport and the sheet is the viewport — but it is not optional, and "tidying" either layer back to `absolute` will quietly flatten the glass. ══════════════════════════════════════════════════════════════════════════════════════ */ /* ── tokens ── COLOUR IS NOT HERE — see the note above. Geometry only. The bar and the sheet carry DIFFERENT densities, which is v2's one deviation from its own handoff and still correct: `--pwr-glass-fill` is the bar, three short labels over whatever the page opens on; `--pwr-glass-fill-panel` is the sheet, a screen of type over the same. The two are never on screen together — the bar's glass switches off while the sheet is open (change 4), so there is still exactly one density visible at a time. */ :root { /* The bar's chamfer is its own size, not --wp--custom--chamfer (22px): the handoff specifies 26px with the inner layer at 25px, and the 1px difference IS the stroke. */ --pwr-chamfer: 26px; --pwr-chamfer-in: 25px; /* The bar row. ONE VALUE AT EVERY WIDTH, and that is measured rather than chosen: v2 wrote 66px and 62px into its two breakpoints and the bar rendered 78px anyway at 360, 390, 480, 639, 640, 768, 900, 1024, 1440 and 1920 — the CTA link's own box sets a floor the row cannot go under, so the smaller values never reached the screen. v2's own note records the symptom ("the bar stopped changing size at breakpoints") without the cause, and the three per-breakpoint clearances it replaced were each 8–28px short because of it. So the token now says what actually renders. Everything that has to line up with the bar reads it — the sheet's top padding, the close button's height, the phone squares' offset — and they are correct at every width for the first time. */ --pwr-row-h: 78px; /* --pwr-bar-h is the distance from the top of the viewport to the BOTTOM of the bar — what a band underneath has to clear. v2's was 102px because the bar floated 24px down; pinned to the top (change 1), it is exactly the row. */ --pwr-bar-h: var(--pwr-row-h); --pwr-bar-inset: var(--wp--preset--spacing--l); /* the row's inline padding: where a toggle's outer edge lands, and what the sheet's content column has to match so the first menu label lines up under the Menu button */ --pwr-row-pad: var(--wp--preset--spacing--l); } /* ══ pinning and clearance ══════════════════════════════════════════════════════════════ Pinning lives on the TEMPLATE PART wrapper, not on .pwr-header: a sticky element can only travel inside its parent's box, and the template part is only as tall as the header — so sticking the inner element makes it scroll away with its parent. Fixed at all times: one geometry, always on screen. The transparent area either side of the floating bar must not eat clicks, so pointer events are off on the wrapper and back on for the frame — which covers the bar and everything on it. v3 proved how easily a transparent box across the top of a hero swallows a cover's own buttons. While the sheet is open the sheet itself takes the clicks, and it is inside the frame, so it is already covered. */ header.wp-block-template-part { position: fixed; inset: 0 0 auto 0; z-index: 100; pointer-events: none; } header.wp-block-template-part .pwr-header__frame { pointer-events: auto; } .pwr-header__row .wp-block-navigation__responsive-container.is-menu-open { pointer-events: auto; } /* EVERY template bleeds to the top of the browser so the header floats over it — nothing reserves space for it. Instead the first band carries top padding that clears the header at every breakpoint, from the token above. */ /* Skip pages whose first element is — or wraps — a full-bleed cover. A cover sizes itself and centres its content, so it should bleed to the browser top with the header floating over it. Without these `:has()` exclusions the rule lands on the post-content WRAPPER and pushes the cover down by the header's height. .pwr-b-srows is the series rows block (products index) and the series hero (range pages): a cover-shaped band that is not a core/cover, so :has() cannot see it. */ body:not(.home) main > .alignfull:first-child:not(.wp-block-cover):not(:has(> .wp-block-cover)):not(.pwr-b-srows), body:not(.home) main > .wp-block-group:first-child:not(:has(> .wp-block-cover)) { padding-top: calc(var(--pwr-bar-h) + var(--wp--preset--spacing--l)) !important; } /* A top-of-page cover has room to spare on desktop, but on a phone its min-height box is short enough that the centred eyebrow lands under the header. The clearance goes on the cover's INNER CONTAINER, never on `main > :first-child`. On the front page that first child is the post-content wrapper, so padding there pushed the whole cover down the page and left a white gap above it with the header floating on nothing. The cover itself must keep bleeding to the top of the browser. No media query on purpose (2026-09-22). The trigger is a cover that is SHORT relative to its own content, and that is a function of viewport HEIGHT, not width: a 54vh cover on a 1440x800 laptop is 432px, and once the heading wraps the centred block's top edge rises above the header. CSS cannot ask "is the content taller than the box", so it is unconditional. The cost is that cover text sits a little below true centre, which reads correctly anyway with a lockup floating over the top of the band. */ main > .wp-block-cover:first-child > .wp-block-cover__inner-container, main > :first-child > .wp-block-cover:first-child > .wp-block-cover__inner-container { padding-top: var(--pwr-bar-h); } /* The products index and the range pages open on .pwr-b-srows — a cover-shaped band that is not a core/cover, so neither :has() nor the selectors above can see it. Same treatment, its own hook. */ main > .pwr-b-srows:first-child .pwr-b-srow__cover:first-of-type .pwr-b-srow__rail, main > :first-child > .pwr-b-srows:first-child .pwr-b-srow__cover:first-of-type .pwr-b-srow__rail { padding-top: var(--pwr-bar-h); } /* ══ the bar ════════════════════════════════════════════════════════════════════════════ v2's floating box, pinned to the top of the browser (change 1). Unpinned from the sides it is only a little wider than its own content rail, so on a big screen it reads as a floating bar rather than a stretched one, and it stops growing past ~1504px. Below that it falls back to the side inset. Centred either way. That width is v2's and is explicitly unchanged. The two layers are ABSOLUTE on the frame, which is where v2 had them and where the blur is known to work (measured 50% there, and again when this shape came back). Trap 5 is about layers deeper in the row — do not move these down there. `:root` prefix on purpose. WP's reset is `:root :where(.is-layout-flow) > :first-child { margin-block-start: 0 }` — 0,2,0 — so a doubled class only TIES and loses on order. */ :root .pwr-header .pwr-header__frame { position: relative; z-index: 0; /* a stacking context, so the cast can sit at -1 without escaping */ margin: 0 auto; width: min( 100% - var(--pwr-bar-inset) * 2, calc(var(--wp--style--global--wide-size, 1440px) + var(--wp--preset--spacing--l) * 2) ); } /* WP's layout gap puts `margin-block-start` on .pwr-header__bar (the frame's second child, after the cast). With nothing to stop it the margin collapses straight out through the frame and the whole header sits lower than it asks for. Doubled class for 0,2,0. */ .pwr-header__frame.pwr-header__frame > * { margin-block-start: 0; } /* layer 1 — the stroke. This IS the chamfer outline (trap 2); there is no border anywhere. BOTH BOTTOM CORNERS are cut (change 2). */ .pwr-header__frame::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--pwr-glass-stroke); clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--pwr-chamfer)), calc(100% - var(--pwr-chamfer)) 100%, var(--pwr-chamfer) 100%, 0 calc(100% - var(--pwr-chamfer)) ); } /* layer 2 — the glass. Inset 1px and clipped 1px tighter, so layer 1 shows as a hairline on every edge INCLUDING the two diagonals — EXCEPT THE TOP, where it runs right to the edge. That exception is change 1 catching up with itself. While the bar floated, the 1px of stroke along its top was a hairline on an edge you could see. Pinned to the browser, that same 1px sits hard against the top of the screen with the page scrolling underneath it — and the stroke is translucent and does NOT blur, so it read as a 1px window of sharp photograph sliding along above the glass. There is no edge up there to outline any more: the glass covers it, and the `inset 0 1px 0` highlight below still draws the lit top line. */ .pwr-header__frame::after { content: ""; position: absolute; inset: 0 1px 1px; z-index: 0; background: var(--pwr-glass-fill); -webkit-backdrop-filter: blur(var(--pwr-glass-blur)) saturate(1.3); backdrop-filter: blur(var(--pwr-glass-blur)) saturate(1.3); box-shadow: inset 0 1px 0 var(--pwr-glass-lit); clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--pwr-chamfer-in)), calc(100% - var(--pwr-chamfer-in)) 100%, var(--pwr-chamfer-in) 100%, 0 calc(100% - var(--pwr-chamfer-in)) ); } /* the shadow — a blurred strip tucked UNDER the bar, never a drop-shadow (trap 1) */ .pwr-header__cast { position: absolute; left: 22px; right: 22px; bottom: -18px; height: 46px; z-index: -1; background: var(--pwr-glass-cast); filter: blur(17px); pointer-events: none; } /* ══ the bar is gone while the sheet is open (change 4) ═════════════════════════════════ Glass over glass reads as neither, so the bar stops painting entirely the moment the menu opens: no fill, no stroke, no shadow. What stays is everything ON the bar — Menu (which core swaps for Close), Hire now and the lockup — each exactly where it was, so the sheet opens underneath them rather than replacing them. This is v2's rule, kept for a different reason: v2 switched the bar off because the panel took over painting the whole sheet. */ .pwr-header:has(.is-menu-open) .pwr-header__frame::before, .pwr-header:has(.is-menu-open) .pwr-header__frame::after, .pwr-header:has(.is-menu-open) .pwr-header__cast { display: none; } /* the content layer. No paint of its own — it exists so the row sits above both glass layers, and so the sheet inside it is NOT a descendant of anything filtered or clipped. */ .pwr-header__bar { position: relative; z-index: 1; color: var(--pwr-glass-ink); } .pwr-header__rail { max-width: var(--wp--style--global--wide-size, 1440px); margin-inline: auto; } /* Three-slot GRID, not flex: the centre column is `auto` and the outer columns absorb everything, so the logo is optically centred and can never be compressed the way a nowrap flex row compressed it to zero width between 600 and 1140px. */ .pwr-header__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--wp--preset--spacing--s); min-height: var(--pwr-row-h); padding-inline: var(--pwr-row-pad); } /* Group block-gap puts margin-block-start on siblings; harmless in a stack, but in this grid it added 24px to the row and defeated the min-height. Doubled class because WP's rule is `:where(...) > :not(:first-child)` — also 0,1,0, and printed after this file. */ .pwr-header__row.pwr-header__row > * { margin-block: 0; } /* Lockup and CTA are raised so the open sheet — also positioned, and earlier in the DOM — passes BEHIND them. The nav is deliberately not raised: the panel lives inside it, and raising the nav would carry the panel up over the lockup with it. */ .pwr-header-logo, .pwr-header__cta { position: relative; z-index: 1; } /* ── slot 1: the menu button (core/navigation's overlay opener) ── */ /* CHILD COMBINATOR, ALWAYS. core copies the block's className onto the inner