/* ========================================================= Liquid glass: the material every button on the site is made of (Rowen's call, 2026-10-03). Loaded before each page's own stylesheet on rowen.work, KitTheme, the studio tools and the motion pages. Apple's Liquid Glass (WWDC 2025, the `.glass` and `.glassProminent` button styles) translated to CSS, following the liquid-glass skill (stormaref/LiquidGlassSkill): - a near-clear body (white at 6%) that blurs and saturates whatever sits behind it, - a rim: the top edge catches the light, a hairline runs all round, the bottom edge glints faintly, the top of the body is lit and the bottom is shaded, - a soft shadow under it, because glass floats over the page, - a press that squeezes it a little and springs back. In Chromium, liquid-glass.js turns every glass control into a real lens with the look of @ybouane/liquidglass (Rowen's reference): clear glass that bends what is behind it across its whole face, a Fresnel edge and a lit top stroke, and a colour fringe on controls over artwork. While it runs has .lg-lens and the bodies go clear (the html.lg-lens block below). In Safari and Firefox, or with the accessibility settings at the bottom, this file is the whole effect. What we leave out on purpose: the skill's ambient mesh of violet, pink and cyan glows behind the page. Both brands ban glows and light blobs (DESIGN.md, kittheme/DESIGN.md); the artwork is the colour the glass picks up. Also no gradient fills, no lift on hover and no pointer tracking. Glass is for controls only, never for artwork, cards, list rows, menus' rows or text. Components read these tokens instead of copying the values, so the settings at the bottom change every button at once: regular glass background: var(--lg-fill); border: 1px solid var(--lg-edge); box-shadow: var(--lg-shadow); backdrop-filter: var(--lg-blur); hover: var(--lg-fill-hover) / var(--lg-edge-hover); press: var(--lg-fill-press) prominent glass background: color-mix(in srgb, var(--lg-tint), transparent); box-shadow: var(--lg-shadow-tint) (rim restated for a coloured body) ghost glass background: transparent; box-shadow: var(--lg-shadow-clear); takes the regular fill on hover inside a glass a segment, or anything else sitting on glass, paints no track surface of its own; the selected one gets var(--lg-fill-hover) (or the brand tint) and var(--lg-shadow-clear), no blur press transform: var(--lg-press), with the transform transitioned on var(--lg-spring) so it springs back over artwork background: var(--lg-fill-art) (a darker body), and --lg-lens-chroma: 1 to ask the lens for the colour fringe ========================================================= */ :root { --lg-blur: blur(12px) saturate(170%); --lg-fill: rgba(255, 255, 255, .06); --lg-fill-hover: rgba(255, 255, 255, .11); --lg-fill-press: rgba(255, 255, 255, .15); --lg-edge: rgba(255, 255, 255, .09); --lg-edge-hover: rgba(255, 255, 255, .2); /* the rim, and the light and shade inside the body */ --lg-rim: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 -1px 0 rgba(255, 255, 255, .06), inset 0 12px 16px -14px rgba(255, 255, 255, .2), inset 0 -12px 16px -14px rgba(0, 0, 0, .45); /* the same rim on a coloured body: brighter on top, darker below */ --lg-rim-tint: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(0, 0, 0, .14), inset 0 12px 16px -14px rgba(255, 255, 255, .3), inset 0 -12px 16px -14px rgba(0, 0, 0, .28); --lg-float: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px -8px rgba(0, 0, 0, .55); /* ghost buttons and selected segments: the rim alone */ --lg-shadow-clear: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .04); /* round controls laid over artwork or video keep a darker body so a white icon reads over any picture */ --lg-fill-art: rgba(8, 8, 10, .42); --lg-fill-art-hover: rgba(8, 8, 10, .6); /* how much of the brand colour a prominent body keeps */ --lg-tint: 88%; --lg-white-tint: 88%; --lg-on-tint: var(--black); --lg-tint-hover: #fff; --lg-tint-press: #d9d9d6; --lg-press: scale(.97); --lg-spring: cubic-bezier(.3, 1.6, .5, 1); } /* Light grounds: the KitTheme editor's light theme and the studio's Bone theme. Frosted white glass with a dark hairline, lit from above. */ html[data-theme="light"], .daw-body[data-theme="bone"] { --lg-fill: rgba(255, 255, 255, .55); --lg-fill-hover: rgba(255, 255, 255, .85); --lg-fill-press: rgba(255, 255, 255, .95); --lg-edge: rgba(0, 0, 0, .1); --lg-edge-hover: rgba(0, 0, 0, .2); --lg-rim: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .04), inset 0 12px 16px -14px rgba(255, 255, 255, .9), inset 0 -12px 16px -14px rgba(0, 0, 0, .06); --lg-float: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 16px -8px rgba(0, 0, 0, .2); --lg-shadow-clear: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(0, 0, 0, .04); } /* The lens is running (liquid-glass.js, Chromium only, never with the settings below): the glass goes clear, as in @ybouane/liquidglass, so the bent backdrop is what you see. The filter draws the Fresnel edge and the top stroke, so the CSS rim keeps only the top light and the shade underneath, and the shadow is that library's soft drop shadow. */ html.lg-lens { --lg-white-tint: 12%; --lg-on-tint: var(--white); --lg-tint-hover: rgba(255,255,255,.18); --lg-tint-press: rgba(255,255,255,.23); --lg-rim-tint: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.12); --lg-fill: rgba(255, 255, 255, .02); --lg-fill-hover: rgba(255, 255, 255, .07); --lg-fill-press: rgba(255, 255, 255, .11); --lg-edge: rgba(255, 255, 255, .025); --lg-edge-hover: rgba(255, 255, 255, .16); --lg-rim: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -12px 16px -14px rgba(0, 0, 0, .35); --lg-float: 0 2px 4px rgba(0, 0, 0, .25), 0 10px 24px -8px rgba(0, 0, 0, .5); --lg-fill-art: rgba(8, 8, 10, .3); --lg-fill-art-hover: rgba(8, 8, 10, .45); } /* Reduce transparency: solid bodies, nothing seen through them. */ @media (prefers-reduced-transparency: reduce) { :root { --lg-blur: none; --lg-fill: #17171a; --lg-fill-hover: #1f1f23; --lg-fill-press: #26262a; --lg-fill-art: #111114; --lg-fill-art-hover: #1b1b1f; --lg-tint: 100%; --lg-white-tint: 100%; --lg-on-tint: var(--black); --lg-tint-hover: #fff; --lg-tint-press: #d9d9d6; } html[data-theme="light"], .daw-body[data-theme="bone"] { --lg-fill: #f7f7f7; --lg-fill-hover: #fff; --lg-fill-press: #fff; } } /* Increase contrast: solid bodies and a clear edge instead of light. */ @media (prefers-contrast: more) { :root { --lg-blur: none; --lg-fill: #000; --lg-fill-hover: #1f1f23; --lg-fill-press: #26262a; --lg-fill-art: #000; --lg-fill-art-hover: #1f1f23; --lg-edge: rgba(255, 255, 255, .65); --lg-edge-hover: #fff; --lg-rim: 0 0 0 0 transparent; --lg-rim-tint: 0 0 0 0 transparent; --lg-shadow-clear: 0 0 0 0 transparent; --lg-tint: 100%; --lg-white-tint: 100%; --lg-on-tint: var(--black); --lg-tint-hover: #fff; --lg-tint-press: #d9d9d6; } html[data-theme="light"], .daw-body[data-theme="bone"] { --lg-fill: #fff; --lg-fill-hover: #f0f0f0; --lg-fill-press: #e6e6e6; --lg-edge: rgba(0, 0, 0, .7); --lg-edge-hover: #000; --lg-rim: 0 0 0 0 transparent; --lg-shadow-clear: 0 0 0 0 transparent; } } /* Reduce motion: no squeeze, no spring. */ @media (prefers-reduced-motion: reduce) { :root { --lg-press: none; --lg-spring: linear; } } /* The two composite shadows are declared wherever their parts can change, so a light ground or an accessibility setting reaches them too (a custom property is resolved on the element that declares it). */ :root, html[data-theme="light"], .daw-body[data-theme="bone"] { --lg-shadow: var(--lg-rim), var(--lg-float); --lg-shadow-tint: var(--lg-rim-tint), var(--lg-float); }