/* ========================================================================== BINERET โ€” LIQUID GLASS + INTERACTION LAYER -------------------------------------------------------------------------- Printed by hand on `wp_head` at priority 103, i.e. after the database stylesheet (100), the brand layer (101) and the services sheet (102). It is last on purpose: everything in here is an ADDITION to a surface that already exists, and it must be able to win a specificity tie without `!important`. ๐Ÿ”ด READ THIS BEFORE ADDING ANYTHING WITH A FILTER IN IT. `backdrop-filter` has frozen this site's renderer twice. Twenty-one blurred panes over the gradient canvas locked the tab for thirty seconds; two large ones tore frames and then locked it as well. There is exactly one rule in this project that is not open for re-litigation: `backdrop-filter` lives on `.topbar` and `.tabbar` and nowhere else. Nothing in this file adds one. So where does "liquid glass" come from, if not from blur? From the thing that actually makes glass read as glass: a MOVING SPECULAR. A pane of glass is not interesting because it is frosted, it is interesting because the highlight on it travels when you or it move. iOS sells the material on that reflection, not on the blur behind it. Every effect below is a way of moving a highlight, and every one of them animates `opacity` or `transform` and nothing else: 1. a specular that follows the pointer across the surface (opacity) 2. a rim that lights up on the side the pointer is nearest (opacity) 3. a slow sheen drifting across the two big panels (transform) 4. a reveal that lifts a block into place once, as it arrives (both) All four are free in the compositor. None of them read a backdrop. ========================================================================== */ /* ========================================================================== 1 ยท TOKENS -------------------------------------------------------------------------- Every value below is an alpha on a decorative layer that appears on hover. None of them is behind text at rest, which is why the whole of this file leaves the page's contrast ratios where it found them โ€” measured after each change, not assumed. ========================================================================== */ :root { /* dark mode: the surface is nearly black, so the specular IS the light and a single bright stop carries it. */ --lq-spec-core:rgba(214,234,255,.26); --lq-spec-mid-1:rgba(160,200,255,.13); --lq-spec-mid-2:rgba(120,170,255,.05); --lq-spec-r:240px; --lq-rim-core:rgba(226,240,255,.95); --lq-rim-mid:rgba(130,180,255,.34); --lq-rim-r:170px; --lq-flow-1:rgba(190,216,255,.045); --lq-flow-2:rgba(210,230,255,.10); --lq-lens: inset 0 9px 20px -14px rgba(205,228,255,.34), inset 0 -11px 24px -16px rgba(3,10,26,.55); } :root[data-theme="light"] { /* ๐Ÿ”ด A WHITE HIGHLIGHT ON A WHITE PANE IS NOTHING, AND THAT IS THE WHOLE PROBLEM WITH LIGHT-MODE GLASS. The pane is 42% white over a pale canvas. Adding more white to it moves it a few points up a ramp it is already near the top of, and the first version of this โ€” one white stop at .90 โ€” was invisible on screen at any radius. What the eye reads is not brightness, it is the STEP. So the specular is four stops that go up and then come back DOWN past where they started: a near-white core, a white shoulder, and then a ring of brand blue at .11 before it clears. The bright middle and the tinted ring are only a few percent apart in luminance and unmistakable together, because an edge between two colours is legible at a contrast where either alone is not. Same trick on the rim, harder: white at the centre, brand blue at 45% by the middle of the falloff. That is what makes the lit edge read as a bevel catching light rather than as a glow drawn around a box. */ --lq-spec-core:rgba(255,255,255,.98); --lq-spec-mid-1:rgba(255,255,255,.55); --lq-spec-mid-2:rgba(4,57,217,.11); --lq-spec-r:240px; --lq-rim-core:rgba(255,255,255,1); --lq-rim-mid:rgba(4,57,217,.45); --lq-rim-r:170px; --lq-flow-1:rgba(255,255,255,.20); --lq-flow-2:rgba(255,255,255,.46); /* Light pools under the top edge and the canvas tint pools above the bottom one. This is what gives a pane thickness: the existing three-part rim draws the EDGES of the glass, this draws the few millimetres just inside them. */ --lq-lens: inset 0 9px 20px -13px rgba(255,255,255,.95), inset 0 -11px 24px -15px rgba(4,57,217,.15); } /* ========================================================================== 2 ยท THE LIQUID SURFACE -------------------------------------------------------------------------- `.lq` is added by assets/js/liquid.js to a fixed list of surfaces rather than written into twenty template files. Three reasons, in order of weight: ยท several of those surfaces are rendered from CSS/markup held in the DATABASE (the shop, the blog, the account pages), where there is no template to edit; ยท the class carries no styling of its own that matters when the script is absent โ€” every effect on it is a hover state โ€” so a no-JS visitor sees the same page, minus a highlight they were never going to trigger; ยท one list in one file is the only version of "which things are glass". The two pseudo-elements are free on every element in that list: the stretched card links use `a::after`, which belongs to the anchor, not the card. ========================================================================== */ /* ๐Ÿ”ด `isolation:isolate` AND `z-index:-1`, AND THE BUG THAT FORCED BOTH. The obvious build is `z-index:0` on the pseudo-elements and `position:relative; z-index:2` on the card's children, to lift the text back above the highlight. That version is wrong, and it breaks the site in a way that is invisible until somebody tries to click something. Half the cards on this page are stretched-link cards: the title contains `a::after { position:absolute; inset:0 }`, which grows the anchor's hit area to fill the whole card. `inset:0` resolves against the nearest POSITIONED ancestor. Making the `

` position:relative moves that ancestor from the card to the heading, so every one of those cards silently shrinks its click target to the two words in its title. So the layers go BELOW the content instead of the content going above them. A negative z-index child paints in step 2 of the painting order: above the element's own background and border, below its in-flow text, and below the positioned stretched link in step 6. Exactly the three relationships needed, and no child is touched. `isolation:isolate` is what keeps that promise local. Without a stacking context on the card itself, `z-index:-1` escapes to the nearest ancestor that has one and the highlight paints behind the section instead of inside the card. It costs nothing โ€” it does not promote a layer, it only draws a boundary. */ .lq { position:relative; isolation:isolate; } /* โ€” the specular โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€” `--mx`/`--my` are written by the script on pointermove. They default to the centre so a keyboard user focusing the card still gets a highlight, just a stationary one. `opacity` is the only animated property. */ .lq::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; background:radial-gradient(var(--lq-spec-r) circle at var(--mx,50%) var(--my,50%), var(--lq-spec-core) 0%, var(--lq-spec-mid-1) 22%, var(--lq-spec-mid-2) 46%, transparent 72%); opacity:0; transition:opacity 260ms cubic-bezier(0.22,1,0.36,1); } .lq:hover::after, .lq:focus-within::after, .lq.is-lit::after { opacity:1; } /* โ€” the rim โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€” A one-pixel frame, masked out of a radial that also follows the pointer, so the edge is brightest on the side nearest the cursor and fades away round the back. This is the detail that reads as a physical pane rather than as a lighting effect painted on a rectangle, and it is the cheapest thing here: the gradient is rasterised once and only its opacity is touched after that. */ .lq::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; padding:1.5px; background:radial-gradient(var(--lq-rim-r) circle at var(--mx,50%) var(--my,50%), var(--lq-rim-core) 0%, var(--lq-rim-mid) 48%, transparent 78%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity 260ms cubic-bezier(0.22,1,0.36,1); } .lq:hover::before, .lq:focus-within::before, .lq.is-lit::before { opacity:1; } /* โ€” the lens โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€” Static, always on, no animation: the inner glow that gives the pane thickness. It is added to the box-shadow the brand layer already sets rather than replacing it, which is why the two variables are restated here in full instead of being appended โ€” CSS has no way to add to a shorthand. */ .lq { box-shadow:var(--glass-rim), var(--lq-lens), var(--glass-cast); } .lq:hover, .lq:focus-within { box-shadow:var(--glass-rim), var(--lq-lens), var(--glass-cast-lift); } /* ========================================================================== 2b ยท `.glass` โ€” THE INNER PAGES JOIN THE SAME MATERIAL -------------------------------------------------------------------------- ๐Ÿ”ด TWO FAULTS, BOTH OF THEM ON EVERY PAGE THAT IS NOT THE HOME PAGE. `.glass` is the panel class on the shop, the blog, the account pages, the checkout and the services templates. Measured on `/products/` it resolved to: background-color rgba(255,255,255,.55) (--lav-glass-tint) background-image linear-gradient(#fff .92 โ€ฆ) (--surf-sheen) backdrop-filter blur(14px) saturate(1.25) The first two composite to about 96% white. That is the exact bug the home page rebuild was written to fix โ€” a pane you cannot see through is a painted rectangle, and no amount of blur behind an opaque sheet is visible. The inner pages had "glassmorphism" in the stylesheet and none of it on the screen. The third is worse than cosmetic. There are SIX `.glass` panels on the shop page and more on the account pages, each one a live backdrop blur over the gradient canvas. Twenty-one of those is what froze the renderer on the home page; six is the same mistake with a smaller number in front of it, and it was shipping on the busiest non-home template on the site. So `.glass` is answered here with the recipe the home surfaces already use โ€” the same four tokens, the same lens, the same cast โ€” and the blur comes off. One material, one definition, every template. The pane is now genuinely translucent, which is what makes the canvas behind it visible and the whole effect real rather than declared. Only `background-color`, `background-image`, `border-color`, `box-shadow` and the filter are touched. Radius, padding, layout and the `::before` bevels that `.glass--crystal` and `.glass--frost-rim` draw are left exactly as they are โ€” which is also why `.glass` is NOT in the list of surfaces that get the pointer specular: that effect needs `::before`, and on those two variants it is taken. ========================================================================== */ .glass { background-color:var(--glass-fill); background-image:var(--glass-sheen); border-color:var(--glass-line); box-shadow:var(--glass-rim), var(--lq-lens), var(--glass-cast); -webkit-backdrop-filter:none; backdrop-filter:none; } .glass:hover { border-color:var(--glass-line-strong); box-shadow:var(--glass-rim), var(--lq-lens), var(--glass-cast-lift); } /* The strong tier is the one used for panels that carry a heading and a block of copy rather than a single control, and it reads better one step denser. */ .glass--deep, .glass--t4, .glass--t5 { background-color:var(--glass-fill-strong); } /* ========================================================================== 3 ยท THE DRIFT โ€” the two big panels only -------------------------------------------------------------------------- A wide, very soft diagonal band of light that slides slowly back and forth across the panel. It is what the surface does when nobody is touching it, and it is the reason the page reads as glass in a screenshot as well as under a cursor. `.lq--flow` replaces the rim-follow on `::before` rather than adding a third layer: a panel 1240px wide does not need a 190px rim highlight, and a third absolutely-positioned pseudo would be a third layer to composite for no gain. The element is deliberately oversized and clipped by the panel's own `overflow:hidden`, so the band can travel without its ends ever showing. Two elements on the page carry this. That is the budget, and it is why the animation is on `transform` alone: two compositor layers, no repaints. ========================================================================== */ .lq--flow::before { padding:0; inset:-45% -110%; border-radius:0; -webkit-mask:none; mask:none; background:linear-gradient(104deg, transparent 30%, var(--lq-flow-1) 43%, var(--lq-flow-2) 50%, var(--lq-flow-1) 57%, transparent 70%); opacity:1; transition:none; animation:lq-drift 16s cubic-bezier(0.45,0,0.55,1) infinite alternate; will-change:transform; } .lq--flow:hover::before, .lq--flow:focus-within::before { opacity:1; } @keyframes lq-drift { from { transform:translate3d(-26%,0,0); } to { transform:translate3d(26%,0,0); } } /* ========================================================================== 4 ยท REVEAL -------------------------------------------------------------------------- Each section lifts 12px and fades in once, the first time it crosses into view, and the children stagger behind it by 45ms each up to a ceiling. Once revealed the class is removed and the observer stops watching, so nothing on this page is still being observed after the first pass down it. ๐Ÿ”ด The `transform`/`opacity` pair promotes the element to its own layer while it animates. Anything inside a `background-clip:text` parent would vanish for the duration โ€” the gradient title in the brand layer is the one on this site. Section heads are safe because the clip is on the H1 inside the hero, and the hero is never revealed (it is on screen at load, and it is out of scope). ========================================================================== */ [data-lq-reveal] { } .lq-hide { opacity:0; transform:translate3d(0,12px,0); } .lq-in { opacity:1; transform:none; transition:opacity 460ms cubic-bezier(0.22,1,0.36,1), transform 460ms cubic-bezier(0.22,1,0.36,1); transition-delay:var(--lq-d,0ms); } /* ========================================================================== 5 ยท SCROLL PROGRESS -------------------------------------------------------------------------- Two pixels along the top of the page shell, scaled on the X axis from a scroll listener that does its arithmetic inside a rAF. `transform-origin` is the inline start so it grows the way the language reads. It sits at the top of `.main`, i.e. inside the framed shell and above the topbar, so it never covers content and never needs a z-index fight with the sticky header. ========================================================================== */ .lq-progress { position:fixed; inset-block-start:0; inset-inline:0; z-index:60; block-size:2px; pointer-events:none; background:linear-gradient(90deg, var(--lav-cta,#0439D9), var(--lav-cyan,#0E7490)); transform:scaleX(var(--lq-p,0)); transform-origin:left center; will-change:transform; } :root:not([data-theme="light"]) .lq-progress { opacity:.85; } /* ========================================================================== 6 ยท BACK TO TOP -------------------------------------------------------------------------- Appears after two viewport heights and not before: a control that is on screen from the first frame is a control nobody needed. It is a real `