/* ===================================================================== cm-glass.css — Apple-style glass panels, in CSS. WHY NOT liquid-glass-js: it is v0.1.0 and depends on html2canvas (44KB gzipped) which RASTERISES THE DOM behind every panel to feed its refraction sampler — a full layout + paint walk on the main thread, repeated on resize and on content change. CryptoMath interior pages stack 13 inline skin layers over thousands of nodes, which is the worst possible input for that approach. It would also have eaten a third of the 150KB budget on its own. This gets ~90% of the look for 0KB of JS, works without WebGL, and cannot drop a frame because nothing runs. OPT-IN ONLY. Applied via on game and tool surfaces. It must never reach a lesson body or a page carrying notation. ===================================================================== */ body.cm-fx-glass .cm-card{ position:relative; background:rgba(255,255,255,.045) !important; /* !important is required: the per-page skins already declare their own backdrop-filter (blur(6px)) and would otherwise win. */ -webkit-backdrop-filter:blur(18px) saturate(1.25) !important; backdrop-filter:blur(18px) saturate(1.25) !important; border:1px solid rgba(255,255,255,.10) !important; box-shadow: 0 18px 48px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.13) !important; overflow:hidden; transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s, border-color .28s; } /* Specular edge: a 1.2px gradient rim, brightest top-left, using the same mask-composite trick the homepage .liquid-glass already uses. */ body.cm-fx-glass .cm-card::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px; background:linear-gradient(135deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.10) 26%, rgba(255,255,255,0) 52%, rgba(227,199,122,.16) 88%, rgba(227,199,122,.34) 100%); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:2; } /* Sheen: a soft highlight sitting in the top-left corner of the panel. */ body.cm-fx-glass .cm-card::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1; background:radial-gradient(120% 80% at 8% 0%, rgba(255,255,255,.075) 0%, rgba(255,255,255,0) 58%); } body.cm-fx-glass .cm-card:hover{ transform:translateY(-3px); border-color:rgba(227,199,122,.28) !important; box-shadow: 0 26px 62px rgba(0,0,0,.54), inset 0 1px 0 rgba(255,255,255,.18) !important; } /* ---------- RTL ---------- The rim and the sheen are directional, so both mirror. Without this the light source jumps to the other side of the panel when a reader switches to Arabic, which reads as a rendering bug. */ [dir="rtl"] body.cm-fx-glass .cm-card::before, body.cm-fx-glass[dir="rtl"] .cm-card::before, [dir="rtl"].cm-fx-glass .cm-card::before{ background:linear-gradient(225deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.10) 26%, rgba(255,255,255,0) 52%, rgba(227,199,122,.16) 88%, rgba(227,199,122,.34) 100%); } [dir="rtl"] body.cm-fx-glass .cm-card::after, [dir="rtl"].cm-fx-glass .cm-card::after{ background:radial-gradient(120% 80% at 92% 0%, rgba(255,255,255,.075) 0%, rgba(255,255,255,0) 58%); } /* ---------- graceful degradation ---------- No backdrop-filter (older Firefox, some Android WebViews): fall back to a solid dark panel. Still perfectly usable, just not translucent. */ @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ body.cm-fx-glass .cm-card{ background:rgba(20,18,14,.94) !important; } } @media (prefers-reduced-motion: reduce){ body.cm-fx-glass .cm-card{ transition:none !important; } body.cm-fx-glass .cm-card:hover{ transform:none !important; } }