/* ============================================================ Refractive Glass — styling for the WebGL refraction engine ------------------------------------------------------------ The surface half of the refractive-glass material; the optics live in refractive-glass.js. That file hands this one a filter reference in --rg-filter and sets .rg-on only once it has confirmed the engine can do the work. Tinting here is driven entirely by the predefined per-section values the script writes into --rg-tint-rgb / --rg-tint-a. Nothing in this file inspects or samples the pixels behind the bar. NOTHING IN HERE DRAWS A LINE. No border, no rim stroke, no highlight along the top edge, no texture inside the plate. Every attempt at a lit edge on a plate this wide ended up reading as a drawn border rather than as light, because a highlight that runs the full width of a shape is a line no matter how it was computed — and a short one near a corner reads as a badly drawn one. What defines the edge is the lens: the band of compressed page the refraction pulls in at the perimeter. The only help it gets is a diffuse inner shading, spread wide enough that it has no edge of its own. Six tokens carry the plate: --rg-frost one blur, used by the refracting path, the fallback path and every breakpoint alike --rg-sat saturation of the backdrop --rg-veil a MULTIPLIER on the section-derived tint the script writes into --rg-tint-rgb / --rg-tint-a, never a replacement, so the bar keeps reading what passes underneath --rg-wash one FLAT colour, no stops and no direction, sitting under the section tint. It is a temperature, not a texture: the rule against painting is a rule against structure --rg-fold the diffuse inner shading where the faces turn over --rg-cast what the plate throws on the page below it ============================================================ */ .rg-defs{ position:absolute; width:0;height:0; overflow:hidden; pointer-events:none; } /* ============================================================ Plate ============================================================ */ .nav.rg-on{ --rg-tint-rgb:7,11,21; --rg-tint-a:.21; /* Blur is split about evenly between here and the shaped two-stage defocus in the filter graph. The graph's pass lets a bright object behind the plate fade out instead of stopping dead at the rim; this one is a plain blur, and plain is what most of a blur should look like. Between them the plate stays a lens rather than a fogged panel: you should be able to read what is behind the bar, bent and compressed, not guess at it. */ --rg-frost:2.5px; /* Low, and doing two jobs. Saturation multiplies whatever is already behind the plate, so over a bright headline the blue wash and the blue colour matrix compound into something far more saturated than either is alone. The second job set the final number. Saturation also multiplies low-contrast content: the faint coloured shapes of a section passing under the bar, which the blur has softened past recognition but not into uniformity. High, those resolve as vague cloudy patches drifting inside the plate, which reads as an artefact rather than as something seen through glass — the eye can tell it is looking at SOMETHING and cannot tell what. Pulling the chroma amplification back is what settles them. */ --rg-sat:116%; /* Under one. The weight comes from the barrel in the lens and from the cast, never from clouding the page. */ /* .915, and the odd number is a correction rather than a taste. Collapsing the graph's two-stage defocus into one gaussian (see the note in refractive-glass.js) matched the AMOUNT of blur by adding the variances, but not the SHAPE: the old wide component reached further and carried more of a bright object behind the bar into the plate. Losing that tail made the plate darker, and specifically darker where something bright sits behind it — measured at 1.19/255 over the hero's white button and 0.97 over the hero headline, while dark sections moved by less than 0.11. The veil is the right knob to put that back, because it is an alpha overlay of a dark colour: easing it brightens in proportion to how bright the backdrop already is, which is the same shape as the deficit. At .915 every sampled position sits within a third of a code of the two-gaussian build. */ --rg-veil:.915; --rg-radius:16px; /* Inverting the dispersion makes the fringe cool but leaves the body of the glass the same neutral navy as everything else, and a bar meant to read as blue should read as blue over an empty dark section too, where there is nothing behind it for the lens to colour. Flat, warmed a little off pure azure, and under the section tint rather than replacing it. */ --rg-wash:linear-gradient(rgba(7,16,40,.13),rgba(7,16,40,.13)); /* Both edges. The bottom passes over the big display type and the white buttons, so it keeps slightly more shading than the top — only slightly: run at twice the top's weight it buries the seam down there and the plate ends up with a visible edge on three sides. Both terms carry a negative spread, which pushes each shadow's own edge outside the box so only the diffuse part lands. That is what keeps a fold from becoming the line it is there to soften. */ --rg-fold: inset 0 5px 13px -5px rgba(1,5,18,.34), inset 0 -7px 16px -8px rgba(1,5,18,.36); /* No coloured bloom. An outward glow in a box-shadow is a blur with a hue on it, and next to a real refracted edge that is exactly what it looks like. Two honest shadows: a long soft drop, and a tight near one so the plate sits on the page rather than floating. */ --rg-cast: 0 16px 36px -19px rgba(0,0,0,.66), 0 3px 10px -6px rgba(4,10,26,.44), 0 1px 26px -8px rgba(0,0,0,.66); } .nav.rg-on .nav__inner{ position:relative; background:transparent; /* The blur lives on .rg-refract. A backdrop-filter here as well would blur the plate twice and cost a second pass. */ -webkit-backdrop-filter:none; backdrop-filter:none; /* .nav__inner promoted itself to stop the blurred pill painting half drawn while a mobile URL bar animates. That promotion moves to the refraction layer: `will-change:backdrop-filter` on the parent makes it a backdrop root and cuts the child off from the page it is supposed to be refracting. */ transform:none; will-change:auto; /* Kept at 1px for layout, never drawn. */ border-color:transparent; border-radius:var(--rg-radius,16px); box-shadow:var(--rg-cast); } .nav.rg-on.is-stuck .nav__inner{ background:transparent; border-color:transparent; } /* The labels read through glass, so they need more weight than they do on bare page. The site's own --ink-3 is 44% white, which is right for text on a flat ground and too faint once a tinted plate sits under it. At 91% they clear WCAG AA against the plate over every section the bar crosses, with the hover state left as the full --ink the rest of the site uses so the interaction still reads. */ .nav.rg-on .nav__links a{color:rgba(236,242,253,.91)} .nav.rg-on .nav__links a:hover, .nav.rg-on .nav__links a:focus-visible{color:var(--ink)} /* Content rides above the glass. */ .nav.rg-on .nav__brand, .nav.rg-on .nav__links, .nav.rg-on .nav__cta{position:relative;z-index:2} .rg-layer{ position:absolute; /* -1px, not 0, and this is a bug fix rather than a nicety. `inset` resolves against the PADDING box, and .nav__inner keeps a 1px border — transparent, kept only so the pill's layout does not shift between the plain and the glass paths. So inset:0 leaves the glass one pixel short of the pill on every side, while border-radius:inherit still gives it the full border-box radius. The result is a 1px ring around the whole shape, following its corners exactly, where the page shows through raw: unblurred, unrefracted, untinted. Over a dark section it is invisible. Over anything bright passing under the bar — a white button, the big display type — it lights up as a hard hairline tracing the pill, and reads as a cheap drawn border stuck to the island. Measured at the time: 167 against 115 for the glass four pixels further in. At -1px the layer covers the border box exactly, which is also the box the inherited radius was always describing. */ inset:-1px; z-index:0; border-radius:inherit; overflow:hidden; pointer-events:none; } .rg-refract{ position:absolute; inset:0; border-radius:inherit; transform:translateZ(0); will-change:backdrop-filter; background-color:rgba(var(--rg-tint-rgb,7,11,21),calc(var(--rg-tint-a,.21) * var(--rg-veil,1))); background-image:var(--rg-wash,none); box-shadow:var(--rg-fold); transition:background-color .6s var(--ease); } .nav.rg-on .rg-refract{ -webkit-backdrop-filter:saturate(var(--rg-sat,126%)) blur(var(--rg-frost,3.2px)); backdrop-filter:saturate(var(--rg-sat,126%)) blur(var(--rg-frost,3.2px)) var(--rg-filter); } /* ============================================================ Fallbacks ============================================================ */ /* Backdrop-filter works, referenced SVG filters in it do not (Safari, Firefox, most in-app WebViews). Keep the frost, drop the lensing rather than shipping a filter the engine will discard — a backdrop-filter carrying an unusable url() is dropped whole, which would leave a bare transparent plate. Without the lens there is no seam to carry the perimeter, so the plate needs a little more body: a firmer veil and a step more blur. A step is not a jump. */ .nav.rg-soft{--rg-veil:1.04} .nav.rg-soft .rg-refract{ -webkit-backdrop-filter:saturate(calc(var(--rg-sat,126%) + 6%)) blur(calc(var(--rg-frost,3.2px) * 1.9)); backdrop-filter:saturate(calc(var(--rg-sat,126%) + 6%)) blur(calc(var(--rg-frost,3.2px) * 1.9)); } /* No backdrop-filter at all: an opaque plate, still built from the same tokens so the bar keeps its shape and its inner shading. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .nav.rg-on .rg-refract{ background-color:rgba(6,10,19,.93); } .nav.rg-on .nav__inner{ border-color:rgba(255,255,255,.08); } } @media (prefers-reduced-motion:reduce){ .rg-refract{transition:none} } /* Someone who has asked their OS to cut transparency is asking not to read text through moving imagery. Drop the whole effect — blur, lens and all — for an opaque plate. This sits after the .rg-soft rule on purpose: equal specificity, so source order decides, and this has to win on every path. */ @media (prefers-reduced-transparency:reduce){ .nav.rg-on .rg-refract, .nav.rg-soft .rg-refract{ -webkit-backdrop-filter:none; backdrop-filter:none; background-color:rgba(6,10,19,.95); background-image:none; } .nav.rg-on .nav__links a{color:rgba(240,245,254,.95)} } /* Increased contrast: firm the plate up and take the labels to white. */ @media (prefers-contrast:more){ .nav.rg-on .rg-refract, .nav.rg-soft .rg-refract{background-color:rgba(4,7,14,.90)} .nav.rg-on .nav__links a{color:#fff} .nav.rg-on .nav__inner{border-color:rgba(255,255,255,.32)} }