/* * TWA Liquid Glass — v1.1.8 * * Stacking approach: * - .liquid-glass has position:relative but NO isolation, NO transform, * NO z-index. This means it does NOT form a stacking context, so * z-index:-1 on ::after falls behind the element's background paint * in the PARENT stacking context — exactly what we want. * - ::after (refraction) at z-index:-1 — paints behind everything * - ::before (tint/shadow) at z-index:-1 also, but declared after ::after * in source order so it paints on top of it at the same z level * - Child content flows normally above both pseudos * * backdrop-filter on ::after composites against whatever is behind * .liquid-glass in the page — video, image, anything — because no * stacking context boundary interrupts it. */ :root { --lg-tint-color: 255, 255, 255; --lg-tint-opacity: 0.06; --lg-shadow-blur: 20px; --lg-shadow-spread: -5px; --lg-shadow-color: rgba(255, 255, 255, 0.45); --lg-outer-shadow: 24px; --lg-radius: 60px; } .liquid-glass { position: relative; border-radius: var(--lg-radius); box-shadow: 0px 4px var(--lg-outer-shadow) rgba(0, 0, 0, 0.18); } /* Refraction — behind everything in the parent stacking context */ .liquid-glass::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; backdrop-filter: url(#twa-lg-filter); -webkit-backdrop-filter: url(#twa-lg-filter); pointer-events: none; } /* Tint + inset shadow — paints over ::after (same z, later in source) */ .liquid-glass::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: inset 0 0 var(--lg-shadow-blur) var(--lg-shadow-spread) var(--lg-shadow-color); background-color: rgba(var(--lg-tint-color), var(--lg-tint-opacity)); pointer-events: none; } /* Firefox / WebKit fallback. * * Driven by a class the JS puts on , not by @supports. WebKit reports * support for url() inside backdrop-filter and then renders nothing, so * @supports gives a false negative on the fallback and the effect disappears. * The class is set from a real capability test instead. * * html.twa-lg-fallback .liquid-glass::after outranks the style block the JS * injects per element, so this wins whatever order they land in. */ html.twa-lg-fallback .liquid-glass::after { backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); background: rgba(255, 255, 255, 0.07); } /* No-JS safety net. Harmless where the class above already applies. */ @supports not (backdrop-filter: url('#x')) { .liquid-glass::after { backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); background: rgba(255, 255, 255, 0.07); } }