/* Liquid Glass — trimmed for kryptopico.dev (from Downloads\liquid-glass-kit). Kept: lensed surface fallback, REQUIRED .lg2-spec specular rules, a11y queries. Dropped: kit demo body/.btn/.card rules (would restyle the whole site). The engine (ky/liquid-glass.js) hardcodes .lg2-spec and the --lg2-ang / --lg2-mx / --lg2-my / --lg2-spec-o / --lg2-glare-o custom properties — DO NOT RENAME ANY OF THEM. 2026-08 RETUNE (glass lane) ------------------------------------------------ This file shipped tuned for a DARK BLUE app: an rgba(10,16,28,.20) ground, an rgba(111,183,255,.30) inner glow and an rgba(2,6,14,.55) navy drop shadow. Dropped onto WARM AMBER PAPER with ink type it read cold, dirty and foreign. Every colour below is now DERIVED from the live theme tokens (--color-foreground / --color-accent-200 / --color-accent-600), which the inline #ky-switch-js rewrites on documentElement, so the glass follows all 12 themes — light (Honey, Paper, Porcelain) and dark (Noir, Cobalt) alike. The recipe is deliberately identical to ky/ky-music.css and ky/ky-glassify.css so every glass surface on the site is visibly the SAME material. TWO CHANGES OF BEHAVIOUR, both deliberate: 1. `position:fixed` has been REMOVED from the .lg-surface base rule. It is a *surface* class, not a layout class; #ky-music already sets its own position:fixed. Leaving it here made .lg-surface unusable on any in-flow element (e.g. the hero calendar) — it silently tore it out of the page. 2. [data-lg-inflow] (stamped by ky/ky-glassify.js on any .lg-surface whose computed position is not fixed/sticky) forces a plain blur with !important, which beats the engine's inline backdrop-filter. That is the PERF LAW enforced from CSS: an SVG displacement lens inside a scroller re-runs its whole filter chain every scrolled frame. --------------------------------------------------------------------------- */ /* one shared material recipe. Redeclared (not @import-ed) so this file stands alone if ky-glassify.css is ever dropped from the build. */ [data-glass]{ --lg-ink: var(--color-foreground, #14110A); --lg-ground: var(--color-accent-200, #E3AC33); /* The tint is the theme's RAISED-SURFACE token, not the page ground: it is lighter than the ground on light themes and darker on dark ones, so a glass pane always reads as the thing catching the light and text contrast always moves the safe way. Tinting with the ground instead measured 4.10:1 on the site's small print. Same value as ky-glassify.css --kyg-surface. */ --lg-surface: var(--color-background, #F7EDD3); --lg-warm: var(--color-accent-600, #C4901D); /* TINT — 2026-08-05: 46% -> 14%. ----------------------------------------- The user's note was "too opaque, the earlier one was still better, I need around full transparency or kind of Apple liquid glass". 46% of the raised-surface colour is a MILKY PLATE: you read the plate, not what is behind it. Apple's material is the other way round — you read the backdrop, softened. Legibility no longer comes from hiding the backdrop. It comes from NORMALISING it (see --lg-bd below): a heavy blur destroys the high-frequency detail that breaks up glyph edges, and the brightness / contrast pair pulls whatever is behind the pane toward one predictable end of the range. That is what makes 14% survive travelling over both the amber hero and the dark #Works band, where 46% was needed before. */ --lg-tint: 9%; --lg-sheen: 22%; /* top-edge light — raised, it is now the main edge cue */ /* the colour of the light hitting the glass: paper white carrying a little of the theme's own side-accent. Warm on Honey, gold on Cobalt, etc. */ --lg-glare: color-mix(in srgb, #fff 82%, var(--lg-warm)); /* ── THE BACKDROP RECIPE ──────────────────────────────────────────────── One place, used by BOTH paths: the plain-blur rule below, and the lens engine's inline backdrop-filter (ky/liquid-glass.js reads these same four custom properties — see LENS_CSS there). Change the material here. 2026-08-29 RETUNE, against Atlas Glass V2 (C:\Atlas\dist\css\glass.css, the site's own reference build of this exact engine — .lg2-spec and the --lg2-* vars are a byte-for-byte port of it). Atlas's lens runs blur(16px) saturate(150%) brightness(1.05) — noticeably crisper than the 30px/185%/1.22 this file had drifted to, because a heavy blur is itself a second source of opacity: it destroys high-frequency backdrop detail until the pane reads as milk regardless of the tint number sitting next to it. Owner call: "more better transparent." tint 14%->9% (dark 20%->14%) and blur 30px->18px are the two changes that actually buy transparency; saturate comes down with them (185%->155%, matching Atlas's 150%) because a lighter tint no longer needs as much colour-punch to avoid looking washed out. brightness/contrast are LEFT doing the same job at the same strength — they are the legibility mechanism, not the opacity one, and a thinner pane needs them MORE, not less. Re-verified >=4.5:1 on #ky-cal-panel over both the Honey-ink amber hero and a dark-theme wallpaper frame after this retune (see PATTERNS.md glass-lane entry) before shipping it site-wide. */ --lg-blur: 18px; --lg-sat: 155%; --lg-bright: 1.22; --lg-contrast: .78; } /* Dark themes (Noir, Cobalt, ...) carry LIGHT ink, so the backdrop has to be normalised downward instead of upward or the ink washes out. html gets data-glass-lum from ky/ky-glassify.js, which measures the live --color-background's relative luminance rather than hardcoding theme names — a new theme is handled without touching this file. */ [data-glass][data-glass-lum="dark"]{ --lg-bright: .72; --lg-contrast: .80; --lg-sheen: 14%; /* a touch more tint on dark: even after the 2026-08-29 retune, a fully transparent pane over a bright wallpaper frame stops reading as a pane */ --lg-tint: 14%; } [data-glass] .lg-surface{ border-radius: 22px; /* frost: a light sheen falling into a translucent tint of the CURRENT page ground — honey glass on amber, smoked glass on the dark themes. */ background: linear-gradient(180deg, color-mix(in srgb, #fff var(--lg-sheen), transparent) 0%, color-mix(in srgb, #fff 7%, transparent) 46%, color-mix(in srgb, #fff 13%, transparent) 100%), color-mix(in srgb, var(--lg-surface) var(--lg-tint), transparent); backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) contrast(var(--lg-contrast)); -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) contrast(var(--lg-contrast)); /* the rim is doing much more work now that the plate is nearly clear — at 14% tint a 30%-white hairline is the main thing separating pane from page, so it is brighter and doubled with an ink line in the shadow below */ border: 1px solid color-mix(in srgb, #fff 46%, transparent); box-shadow: /* crisp top light + a faint ink hairline so the edge still reads on a LIGHT ground, where a white-only border disappears */ inset 0 1px 0 color-mix(in srgb, #fff 46%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--lg-ink) 7%, transparent), inset 1.5px 3px 10px -6px color-mix(in srgb, #fff 32%, transparent), /* was cold blue; now the theme's own warm side-accent */ inset -8px -12px 26px -20px color-mix(in srgb, var(--lg-warm) 55%, transparent), /* was navy; now ink, so it grounds the panel instead of tinting it */ 0 1px 2px color-mix(in srgb, var(--lg-ink) 14%, transparent), 0 16px 42px -14px color-mix(in srgb, var(--lg-ink) 34%, transparent); color: var(--lg-ink); overflow: hidden; isolation: isolate; } /* ── specular (engine-driven; class + var names are load-bearing) ────────── */ [data-glass] .lg2-spec{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2; } [data-glass] .lg2-spec::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; /* warm white, not paper white — the highlight now carries the theme's light */ background:conic-gradient(from calc(var(--lg2-ang,135) * 1deg), transparent 0deg, color-mix(in srgb, var(--lg-glare) 88%, transparent) 55deg, transparent 130deg, transparent 210deg, color-mix(in srgb, var(--lg-glare) 34%, transparent) 275deg, transparent 340deg); -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:var(--lg2-spec-o,.35); transition:opacity .35s ease; } [data-glass] .lg2-spec::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle 200px at var(--lg2-mx,50%) var(--lg2-my,50%), color-mix(in srgb, var(--lg-glare) 22%, transparent) 0%, color-mix(in srgb, var(--lg-glare) 6%, transparent) 45%, transparent 70%); mix-blend-mode:screen; opacity:var(--lg2-glare-o,0); transition:opacity .35s ease; } /* ── PERF LAW, enforced from CSS ───────────────────────────────────────────── !important in an author stylesheet outranks the engine's inline backdrop-filter, so an in-flow .lg-surface can never carry the SVG lens. */ [data-glass] .lg-surface[data-lg-inflow]{ backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) contrast(var(--lg-contrast)) !important; -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-sat)) brightness(var(--lg-bright)) contrast(var(--lg-contrast)) !important; } /* ── fallbacks / a11y ────────────────────────────────────────────────────── */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){ [data-glass] .lg-surface{ background: var(--color-background, #F7EDD3); border-color: color-mix(in srgb, var(--lg-ink) 18%, transparent); } } @media (prefers-reduced-transparency: reduce){ [data-glass] .lg-surface{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; /* was rgba(14,22,38,.97) — a cold navy slab on an amber page. --color-background is the theme's own raised-surface token. */ background: var(--color-background, #F7EDD3); border-color: color-mix(in srgb, var(--lg-ink) 22%, transparent); } [data-glass] .lg2-spec{ display:none; } } @media (prefers-reduced-motion: reduce){ [data-glass] .lg2-spec::before, [data-glass] .lg2-spec::after{ transition:none; } }