/* Powershift glass — the two schemes (light and dark) in one token layer. Loaded before header.css, which consumes these tokens and owns no colour of its own. WHY THIS FILE EXISTS Handoff v2 §0.2 deleted v1's dark/light pair, and it was right to: v1 chose a ground PER PAGE TYPE, which meant two bars to keep in sync and a body-class rule that guessed wrong every time a page's hero changed. This is not that. There is ONE bar; this file only says which ink it is drawn in, site-wide, from one switch. The page-type signal that survived v2 (`body.pwr-header-flat`, the flat-ground fill) still does its smaller job below, and now does it per scheme. THE SWITCH lives in functions.php — `pwr/header_scheme`: 'light', 'mid' or 'dark'. It normalises BOTH the scheme class on .pwr-header AND the logo variant, so flipping the site is one filter line and nothing else. parts/header.html carries the same default in static markup purely so the Site Editor canvas previews what the front end ships. REUSE (the reason the tokens are not header-scoped): every rule here keys on `.pwr-glass-dark` / `.pwr-glass-mid` / `.pwr-glass-light`, not on `.pwr-header`. A glass card can take the same class and inherit the same fill, stroke, rules and ink — which is the groundwork for the dark/light card pair, not the card itself. Nothing here paints anything: a consumer still has to draw its own two chamfered layers (see header.css, traps 1–3). THE TRAPS STILL APPLY, unchanged, to both schemes. In particular a `filter` on any ancestor kills `backdrop-filter`, so the shadow is always a blurred strip BEHIND the sheet and never a drop-shadow. See the header of assets/css/header.css. */ /* ══ light ═══════════════════════════════════════════════════════════════════════════════ The v2 recipe, values exactly as handed off: white glass, Deep Grey ink. */ .pwr-glass-light { --pwr-glass-fill: rgb(255 255 255 / 0.3); --pwr-glass-fill-panel: rgb(255 255 255 / 0.62); --pwr-glass-stroke: rgb(255 255 255 / 0.62); --pwr-glass-lit: rgb(255 255 255 / 0.7); --pwr-glass-cast: rgb(15 33 44 / 0.42); --pwr-glass-blur: 38px; --pwr-glass-ink: var(--wp--preset--color--contrast); /* #0f212c */ --pwr-glass-ink-soft: var(--wp--preset--color--grey); /* #495c73 — field labels, hours */ --pwr-glass-accent: var(--wp--preset--color--orange); /* current page, links */ --pwr-glass-accent-hi: var(--wp--preset--color--orange-dark); /* hover DEEPENS on light */ --pwr-glass-eyebrow: var(--wp--preset--color--orange); /* the one opaque control in the panel (v2 §3) */ --pwr-glass-btn-bg: var(--wp--preset--color--contrast); --pwr-glass-btn-ink: var(--wp--preset--color--base); --pwr-rule: rgb(15 33 44 / 0.16); /* panel top rule, nav row rules, column rule */ --pwr-hairline: rgb(15 33 44 / 0.24); /* social + burger borders */ } /* ══ dark ════════════════════════════════════════════════════════════════════════════════ Ink glass, white type. Three values carry the whole scheme and are the ones to nudge: · fill 0.42 — denser than light's 0.3 on purpose. Light glass gets its separation from being brighter than almost any ground; dark glass is often sitting ON a dark ground (the product, series and case-study heroes are all `contrast` bands), so it cannot lean on tonal difference and needs the blur to do visible work. · stroke 0.26 white — this is what actually draws the bar on an ink hero, and it is why the stroke is a real 1px layer (trap 2) rather than an inset shadow. Drop it below ~0.2 and the bar dissolves into a dark hero; push it past ~0.35 and it reads as an outline rather than an edge. · cast — deepened and pushed past Deep Grey, because a 0.42 shadow that matches the bar's own fill stops reading as a shadow. Hover INVERTS against light: orange → Light Orange (up, toward the light) instead of orange → Deep Orange (down). Deep Orange on ink glass goes muddy at label size. */ .pwr-glass-dark { /* 0.55, not the 0.42 this trial started at. Over a BRIGHT ground — the products hero is sunlit scaffolding — a 0.42 ink fill barely darkens what is behind it, which leaves the 1px stroke as the only thing describing the bar's shape. A line with no plate behind it does not read as an edge, it reads as a stray hairline tracing the chamfer. The fill has to carry the shape; the stroke only finishes it. Still visibly glass: the hero's contents read through it. */ --pwr-glass-fill: rgb(15 33 44 / 0.55); /* The open panel is FAR denser than the light scheme's equivalent (0.62 white), and the gap is not a taste decision. Dark-on-white hides a light background: the light panel can sit at 0.62 over the front page's display headline because Deep Grey type simply covers the ghost. White-on-ink does the opposite — a white headline bleeding up through ink glass lands in the same tonal register as the menu labels sitting on it, and at 0.74 the front page's "ACCELERATE YOUR PATHWAY…" read straight through the nav rows. This is the density at which the ground stops competing. */ --pwr-glass-fill-panel: rgb(15 33 44 / 0.9); /* A GRADIENT, where the light scheme has a flat colour — the one structural difference between the two schemes, and the reason the dark bar stopped looking like a sticker. A uniform white line on every edge is what white glass wants: on a bright plate it reads as brightness, not as a drawn line. On an ink plate the same uniform line reads as a BORDER — glass is lit from above and has no reason to be equally bright along its bottom edge. So the stroke fades down the bar instead: lit along the top edge and the top-left chamfer, nearly gone by the bottom edge and the bottom-right chamfer. It works because the stroke is a full-height layer with the fill sitting 1px inside it (trap 2) — the visible "stroke" is that layer's 1px margin, so a top-to-bottom gradient lands as a lit top edge, fading sides, and a dark-ish bottom. The `background` slot takes an image as happily as a colour, so nothing in header.css changes. Over the tall open panel the same gradient stretches and reads the same way. */ --pwr-glass-stroke: linear-gradient( to bottom, rgb(255 255 255 / 0.38), rgb(255 255 255 / 0.12) 40%, rgb(255 255 255 / 0.05) ); /* Pulled well back from the light scheme's 0.7: this inset highlight sits DIRECTLY under the stroke's brightest point, and at anything higher the two stack into one hot line. */ --pwr-glass-lit: rgb(255 255 255 / 0.08); --pwr-glass-cast: rgb(4 11 16 / 0.52); --pwr-glass-blur: 38px; --pwr-glass-ink: var(--wp--preset--color--base); /* #ffffff */ --pwr-glass-ink-soft: var(--wp--preset--color--grey-light); /* #7f97af — the one grey that holds up on ink */ --pwr-glass-accent: var(--wp--preset--color--orange); --pwr-glass-accent-hi: var(--wp--preset--color--orange-dark); /* hover DEEPENS, as everywhere else: the orange-light lift read as YELLOW in the 15 Oct design review */ --pwr-glass-eyebrow: var(--wp--preset--color--orange); /* inverted with the ground: white plate, Deep Grey label. Its hover is the brand's orange-on-Deep-Grey in both schemes, so header.css states that once. */ --pwr-glass-btn-bg: var(--wp--preset--color--base); --pwr-glass-btn-ink: var(--wp--preset--color--contrast); --pwr-rule: rgb(255 255 255 / 0.16); --pwr-hairline: rgb(255 255 255 / 0.26); } /* ══ mid ═════════════════════════════════════════════════════════════════════════════════ Grey #495c73 — one step further up the ramp than this scheme first shipped (it was Dark Grey #2e3c48, which Wayne read as still too close to the ink bar). Same white ink and lit-from-above stroke as dark; what changes is that the plate is now clearly OFF the bottom of the ramp, so the bar sits on the page rather than punching a hole in it. THE TINT IS ONE LINE — everything tinted below derives from `--pwr-glass-tint`, so stepping the scheme again is three numbers: `46 60 72` back to Dark Grey, `127 151 175` up to Light Grey. But read the next paragraph before doing it, because the tint is not the only thing that moves. GOING LIGHTER COSTS TWO OTHER VALUES, both of which bit on this step: 1. The FILL has to rise with it (0.62 → 0.72). #495c73 is a mid-tone meant for secondary TEXT, not for a plate. Over a sunlit hero the old alpha let the ground lift the composite to around #707f8f, which leaves white labels at roughly 3.9:1 — passable for the big uppercase nav rows, thin for the 14px captions. At 0.72 it settles near #667688, ~4.6:1, and the bar still reads through to the photograph. 2. `--pwr-glass-ink-soft` has to climb off the same ramp. Light Grey #7f97af was the soft ink on the darker plate and it CANNOT stay: #7f97af on a ~#667688 composite is two mid-tones on top of each other, and PHONE / EMAIL / the hours line go nearly invisible. It moves to Bright Grey #d9e0e6, which keeps the step down from white ink while staying legible. This is the trap in any lighter scheme — the plate and the secondary ink walk up the ramp together, and moving only the plate silently eats the quieter type. */ .pwr-glass-mid { --pwr-glass-tint: 73 92 115; /* Denser than dark's 0.55, and denser than this scheme's own first pass — see (1) above. */ --pwr-glass-fill: rgb(var(--pwr-glass-tint) / 0.72); --pwr-glass-fill-panel: rgb(var(--pwr-glass-tint) / 0.93); /* Lit from above, same reasoning as dark — a flat white line on a tinted plate reads as a drawn border. A little brighter than the darker mid carried: the lighter the plate, the more white it takes for the top edge to register at all. */ --pwr-glass-stroke: linear-gradient( to bottom, rgb(255 255 255 / 0.36), rgb(255 255 255 / 0.12) 40%, rgb(255 255 255 / 0.05) ); --pwr-glass-lit: rgb(255 255 255 / 0.12); /* The cast stays deep ink, NOT the tint: a shadow the colour of the thing casting it stops reading as a shadow, and this plate is light enough that the difference shows. */ --pwr-glass-cast: rgb(4 11 16 / 0.5); --pwr-glass-blur: 38px; --pwr-glass-ink: var(--wp--preset--color--base); /* Bright Grey, NOT Light Grey — see (2) above. It walks up the ramp with the plate. */ --pwr-glass-ink-soft: var(--wp--preset--color--grey-bright); --pwr-glass-accent: var(--wp--preset--color--orange); --pwr-glass-accent-hi: var(--wp--preset--color--orange-dark); --pwr-glass-eyebrow: var(--wp--preset--color--orange); --pwr-glass-btn-bg: var(--wp--preset--color--base); --pwr-glass-btn-ink: var(--wp--preset--color--contrast); /* Both up a step too: a hairline that read on the darker plate is faint on this one. */ --pwr-rule: rgb(255 255 255 / 0.22); --pwr-hairline: rgb(255 255 255 / 0.34); } /* The arrow on the nav rows is a baked fill, not a mask (v2 §3) — Light Grey #7f97af, which is the one shape asset that needs no second copy: it sits mid-tone and reads on both grounds. If a third scheme ever lands, that is the first thing to re-check. */ /* ══ the reusable glass SURFACE ══════════════════════════════════════════════════════════ Everything above is tokens. This is the only painter, and it is the header bar's recipe lifted out so anything else can wear it — the Hire Now CTA is the first, glass cards are the obvious next. A consumer adds TWO classes: a scheme (`pwr-glass-dark`) and this. THE THREE LAYERS AND WHY THEY ARE SEPARATE ELEMENTS (header.css traps 1 and 2): · `::before` is the STROKE — a chamfered box whose background IS the outline. There is no `border` and no `box-shadow` outline, because `clip-path` cuts the two diagonals off a border box and the notches then read as holes rather than cuts. · `::after` is the GLASS — inset 1px and clipped 1px tighter, so the stroke shows as a hairline on every edge INCLUDING the diagonals. It carries the `backdrop-filter`. · The two are SIBLINGS, never nested. A `filter` on an ancestor makes it a backdrop root and the descendant's `backdrop-filter` silently collapses to a flat tint. THE CAST IS A THIRD, REAL ELEMENT — `
` as the surface's first child — and it has to be. Both pseudos are spent on stroke and glass; a drop-shadow on an ancestor would make it a backdrop root and kill the blur (trap 1); and `clip-path` clips a normal `box-shadow` away, so the chamfered layers cannot cast one themselves. The header solves it exactly this way with `.pwr-header__cast`, and these are its values. It is a blurred STRIP tucked under the bottom edge, not a shadow following the outline. That is what the header does too — the chamfer is not traced, the strip just reads as lift. GLASS NEEDS SOMETHING BEHIND IT (trap 3). Over a flat page the blur has nothing to sample and this is just a translucent tint — correct, but not glass. Put it over photography or an ink band, or use `body.pwr-header-flat`'s denser fills as the model for a flat-ground case. */ .pwr-glass-surface { position: relative; z-index: 0; /* a stacking context, so the layers cannot escape behind the page */ --pwr-surface-chamfer: 26px; --pwr-surface-chamfer-in: 25px; } .pwr-glass-surface > :not(.pwr-glass-cast) { position: relative; z-index: 1; /* content above both layers — but never the cast, which sits behind */ } /* Same recipe and same numbers as `.pwr-header__cast`. Behind everything via z-index -1, which stays inside the surface's own stacking context rather than escaping behind the page. */ .pwr-glass-surface > .pwr-glass-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; } .pwr-glass-surface::before, .pwr-glass-surface::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; } .pwr-glass-surface::before { background: var(--pwr-glass-stroke); clip-path: polygon( var(--pwr-surface-chamfer) 0, 100% 0, 100% calc(100% - var(--pwr-surface-chamfer)), calc(100% - var(--pwr-surface-chamfer)) 100%, 0 100%, 0 var(--pwr-surface-chamfer) ); } .pwr-glass-surface::after { inset: 1px; 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( var(--pwr-surface-chamfer-in) 0, 100% 0, 100% calc(100% - var(--pwr-surface-chamfer-in)), calc(100% - var(--pwr-surface-chamfer-in)) 100%, 0 100%, 0 var(--pwr-surface-chamfer-in) ); } @media (max-width: 639px) { .pwr-glass-surface { --pwr-surface-chamfer: 18px; --pwr-surface-chamfer-in: 17px; } /* proportionally tighter at phone size, as the header's cast is */ .pwr-glass-surface > .pwr-glass-cast { left: 14px; right: 14px; bottom: -12px; height: 32px; filter: blur(12px); } } /* ══ flat-ground fallback (trap 3) ═══════════════════════════════════════════════════════ `body.pwr-header-flat` is set in functions.php for pages that do NOT open on a cover or an ink band. Over a flat page the blur has nothing to sample, so each scheme raises its fill until the bar separates on its own. Same signal as v2, one set of values per scheme: light needs to out-white a white page, dark needs to stop reading as a grey wash on it. SCOPED TO `.pwr-header` ON PURPOSE. The class says what the page OPENS on, which is a fact about the header and nothing else. Left unscoped it also caught the glass CTA far down the same page — so a CTA sitting on photography rendered at the dark scheme's flat-ground 0.82 instead of 0.55 and lost the colour bleeding through it, purely because the header above it happened to be flat. Any future glass surface decides its own ground; it does not inherit the header's. */ body.pwr-header-flat .pwr-header.pwr-glass-light { --pwr-glass-fill: rgb(255 255 255 / 0.72); --pwr-glass-fill-panel: rgb(255 255 255 / 0.82); } body.pwr-header-flat .pwr-header.pwr-glass-mid { --pwr-glass-fill: rgb(var(--pwr-glass-tint) / 0.92); --pwr-glass-fill-panel: rgb(var(--pwr-glass-tint) / 0.97); } body.pwr-header-flat .pwr-header.pwr-glass-dark { --pwr-glass-fill: rgb(15 33 44 / 0.82); --pwr-glass-fill-panel: rgb(15 33 44 / 0.94); } /* ══ small screens ═══════════════════════════════════════════════════════════════════════ Only the cast: at phone size the shadow strip is proportionally tighter and shallower, and v2 §1 lightens it with the size. The GEOMETRY of that (inset, height, blur radius) lives in header.css with the rest of the breakpoint — this is just the colour, which is per scheme. */ @media (max-width: 639px) { .pwr-glass-light { --pwr-glass-cast: rgb(15 33 44 / 0.38); } .pwr-glass-mid { --pwr-glass-cast: rgb(4 11 16 / 0.46); } .pwr-glass-dark { --pwr-glass-cast: rgb(4 11 16 / 0.48); } } /* ══ no backdrop-filter ══════════════════════════════════════════════════════════════════ An honest translucent bar rather than near-invisible type. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .pwr-glass-light { --pwr-glass-fill: rgb(255 255 255 / 0.72); --pwr-glass-fill-panel: rgb(255 255 255 / 0.9); } .pwr-glass-mid { --pwr-glass-fill: rgb(var(--pwr-glass-tint) / 0.94); --pwr-glass-fill-panel: rgb(var(--pwr-glass-tint) / 0.98); } .pwr-glass-dark { --pwr-glass-fill: rgb(15 33 44 / 0.86); --pwr-glass-fill-panel: rgb(15 33 44 / 0.96); } } /* ══ Hire Now CTA — glass mode ═══════════════════════════════════════════════════════════ Registered in functions.php as the block style "Glass". The block's own fields and labels are untouched — heading, text, primary button, ghost secondary, AU/NZ contacts all render exactly as the default treatment. This only changes the surface under them. The default `.pwr-b-cta` is a full-bleed ink band: `background: contrast`, padding only, no max-width, its contents held on the wide rail by `.pwr-b-cta__rail`. Glass inverts that relationship — the PANEL becomes the object, so it needs its own width, its own inset from the page edge, and the band's own background off. */ .pwr-b-cta.is-style-pwr-glass { background: transparent; color: var(--pwr-glass-ink); /* Without this the clamp below bounds the CONTENT box, padding pushes the border box back out, and the panel touches the viewport edge again — which is exactly the full-width case it exists to prevent. Measured: 1376 content + 2x32 padding = 1440 border box. */ box-sizing: border-box; /* NEVER FULL WIDTH. The clamp is here rather than in the block's supports because `full` is legitimate for the default treatment — this style just refuses to honour it. The inset keeps the chamfers on screen; run to the viewport edge and both corners are cut off by it, which is the one thing that stops it reading as a floating panel. */ max-width: min( 100% - var(--pwr-bar-inset, var(--wp--preset--spacing--l)) * 2, var(--wp--style--global--wide-size, 1440px) ); margin-inline: auto; padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--l); } /* The rail is the band's device for holding contents in from a full-bleed edge. The panel already does that with its own width, so the rail stops constraining and just lays out. */ .pwr-b-cta.is-style-pwr-glass .pwr-b-cta__rail { max-width: none; } /* Ink comes from the scheme, so the panel reads correctly on dark, mid or light glass rather than assuming white on ink the way the default band can. */ .pwr-b-cta.is-style-pwr-glass :where(h2, h3) { color: var(--pwr-glass-ink); } .pwr-b-cta.is-style-pwr-glass p { color: var(--pwr-glass-ink); opacity: 0.85; } .pwr-b-cta.is-style-pwr-glass .pwr-b-cta__contact { color: var(--pwr-glass-ink-soft); } .pwr-b-cta.is-style-pwr-glass .pwr-b-cta__contact strong { color: var(--pwr-glass-ink); } /* The ghost secondary is drawn in the scheme's hairline rather than a fixed white, for the same reason the social buttons in the menu panel are. The primary Hire now button is left alone on purpose — it is the one conversion control here and stays the solid brand button, exactly as the menu panel's Contact us does. */ .pwr-b-cta.is-style-pwr-glass .pwr-b-cta__secondary { color: var(--pwr-glass-ink); box-shadow: inset 0 0 0 2px var(--pwr-hairline); } .pwr-b-cta.is-style-pwr-glass .pwr-b-cta__secondary:hover { color: var(--pwr-glass-accent); box-shadow: inset 0 0 0 2px var(--pwr-glass-accent); }