/* ============================================================================ LIQUID GLASS — portable design kit (extracted from the Garaj marketplace) ---------------------------------------------------------------------------- A self-contained, project-agnostic version of the iOS-style "liquid glass" look: an aurora colour field with frosted surfaces floating above it, a cursor-following shine on interactive elements, and springy micro-motion. HOW TO USE (any website): 1. Link this file: 2. Link the shine script: 3. Put class "lg-aurora" on (or your app's root wrapper). 4. Build with the classes below. Dark mode: set data-theme="dark" on . 5. Rebrand: override --lg-accent (and friends) — everything follows. THE CLASSES (the five Garaj recipes, generalized): .lg-deck big airy panels: heroes, cards, floating bars (blur, shadow) .lg-pill small decorative surfaces: chips, round buttons (blur, light) .lg-solid work surfaces: forms, drawers, modals — text-heavy (opaque-ish) .lg-menu floating menus/popovers: near-solid plate, pop-in, NO blur .lg-field inputs/selects sitting ON a solid panel (tinted, visible edge) .lg-btn primary accent button (gradient, glow, springy) .lg-shine ADD to any element to give it the cursor-following shine .lg-press ADD for the springy press (scale on :active) .lg-row menu/list option rows: smooth hover, slide, row sheen TWO TRAPS (learned the hard way — respect them): 1. backdrop-filter creates a stacking context. A dropdown INSIDE a glass panel is trapped in its paint layer: give every glass container that owns popovers an explicit z-index above whatever follows it. 2. :is() takes the specificity of its most specific entry, and the `background` SHORTHAND wipes background-image. When overriding recipe backgrounds, prefer background-color. Also: don't backdrop-blur dozens of elements (lists!) — one deck, or none; and never blur a layer that sits next to an animated effect (GPU streaks). ========================================================================== */ /* ------------------------------- Tokens --------------------------------- */ :root { /* Rebrand here: the accent drives buttons, glows and the aurora's warm pole. */ --lg-accent: #dc2626; --lg-accent-strong: #b91c1c; --lg-accent-deep: #921515; /* Ink & lines (light theme) */ --lg-ink: #0f172a; --lg-ink-muted: #4a5568; --lg-ink-faint: #7b8794; --lg-line: #e6eaef; /* Glass strengths */ --lg-bg: rgba(255, 255, 255, 0.52); /* airy — decorative */ --lg-bg-strong: rgba(255, 255, 255, 0.66); /* hovers, small controls */ --lg-bg-solid: rgba(255, 255, 255, 0.8); /* work surfaces */ --lg-menu-bg: rgba(255, 255, 255, 0.98); /* floating menus: near-solid */ --lg-edge: rgba(255, 255, 255, 0.65); --lg-highlight: rgba(255, 255, 255, 0.8); --lg-shadow: 0 8px 32px rgba(31, 41, 55, 0.14); --lg-menu-edge: rgba(15, 23, 42, 0.09); --lg-menu-shadow: 0 24px 56px rgba(31, 41, 55, 0.22), 0 4px 14px rgba(31, 41, 55, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9); --lg-blur: blur(24px) saturate(1.7); /* Fields on solid panels: ink-tinted so they never go white-on-white */ --lg-field-bg: rgba(15, 23, 42, 0.07); --lg-field-edge: rgba(15, 23, 42, 0.18); /* Shines */ --lg-sheen: rgba(255, 255, 255, 0.5); /* on colourful/airy surfaces */ --lg-sheen-ink: rgba(15, 23, 42, 0.07); /* on near-white menu rows */ /* Shape & motion */ --lg-radius: 22px; --lg-radius-lg: 28px; --lg-pill-radius: 999px; --lg-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --lg-soft: cubic-bezier(0.22, 1, 0.36, 1); /* The aurora (light) */ --lg-aurora: radial-gradient(900px 600px at 12% -5%, rgba(220, 38, 38, 0.16), transparent 60%), radial-gradient(1100px 700px at 88% 8%, rgba(96, 165, 250, 0.28), transparent 62%), radial-gradient(800px 620px at 45% 38%, rgba(244, 114, 182, 0.14), transparent 65%), radial-gradient(1000px 800px at 78% 92%, rgba(129, 140, 248, 0.2), transparent 60%), #f6f8fa; } [data-theme='dark'] { --lg-ink: #e8ecf2; --lg-ink-muted: #aeb8c4; --lg-ink-faint: #7e8995; --lg-line: #2a313c; --lg-bg: rgba(20, 26, 36, 0.5); --lg-bg-strong: rgba(24, 30, 40, 0.68); --lg-bg-solid: rgba(21, 27, 37, 0.82); --lg-menu-bg: rgba(26, 32, 43, 0.98); --lg-edge: rgba(255, 255, 255, 0.14); --lg-highlight: rgba(255, 255, 255, 0.1); --lg-shadow: 0 10px 36px rgba(0, 0, 0, 0.55); --lg-menu-edge: rgba(255, 255, 255, 0.14); --lg-menu-shadow: 0 24px 56px rgba(0, 0, 0, 0.6), 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); --lg-field-bg: rgba(255, 255, 255, 0.07); --lg-field-edge: rgba(255, 255, 255, 0.22); --lg-sheen: rgba(255, 255, 255, 0.16); --lg-sheen-ink: rgba(255, 255, 255, 0.09); --lg-aurora: radial-gradient(900px 600px at 12% -5%, rgba(220, 38, 38, 0.22), transparent 60%), radial-gradient(1100px 700px at 88% 8%, rgba(59, 130, 246, 0.2), transparent 62%), radial-gradient(800px 620px at 45% 38%, rgba(168, 85, 247, 0.12), transparent 65%), radial-gradient(1000px 800px at 78% 92%, rgba(99, 102, 241, 0.16), transparent 60%), #0c1117; } /* ------------------------------ Backdrop --------------------------------- */ .lg-aurora { min-height: 100vh; background: var(--lg-aurora); background-attachment: fixed; color: var(--lg-ink); } /* ------------------------------- Recipes --------------------------------- */ /* 1 — glass DECK: heroes, cards, floating bars */ .lg-deck { background-color: var(--lg-bg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); border: 1px solid var(--lg-edge); border-radius: var(--lg-radius); box-shadow: var(--lg-shadow), inset 0 1px 0 var(--lg-highlight); } /* 2 — glass PILL: chips, small round things */ .lg-pill { background-color: var(--lg-bg); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); border: 1px solid var(--lg-edge); border-radius: var(--lg-pill-radius); box-shadow: inset 0 1px 0 var(--lg-highlight); color: var(--lg-ink); transition: background-color 0.2s ease, transform 0.16s var(--lg-spring); } .lg-pill:hover { background-color: var(--lg-bg-strong); } /* 3 — SOLID glass: forms, drawers, modals, text panels */ .lg-solid { background-color: var(--lg-bg-solid); backdrop-filter: var(--lg-blur); -webkit-backdrop-filter: var(--lg-blur); border: 1px solid var(--lg-edge); border-radius: var(--lg-radius); box-shadow: var(--lg-shadow), inset 0 1px 0 var(--lg-highlight); } /* 4 — floating MENU: near-solid plate, pop-in, deliberately NO blur (nested blur renders inconsistently and janks — see header). */ .lg-menu { background-color: var(--lg-menu-bg); border: 1px solid var(--lg-menu-edge); border-radius: 18px; box-shadow: var(--lg-menu-shadow); animation: lg-menu-in 0.16s cubic-bezier(0.2, 0.9, 0.3, 1); overflow-x: hidden; /* y-scroll lists must never scroll sideways */ } @keyframes lg-menu-in { from { opacity: 0; transform: translateY(-5px) scale(0.99); } } /* Menu/list option rows: smooth liquid hover */ .lg-row { position: relative; overflow: hidden; border-radius: 10px; color: var(--lg-ink); transition: background-color 0.25s ease, color 0.2s ease, transform 0.3s var(--lg-soft); } .lg-row:hover { background-color: var(--lg-field-bg); transform: translateX(3px); } .lg-row::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), var(--lg-sheen-ink), transparent 70%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .lg-row:hover::after { opacity: 1; } /* 5 — FIELD on a solid panel: tinted glass, always visible */ .lg-field { background-color: var(--lg-field-bg); border: 1px solid var(--lg-field-edge); border-radius: 16px; color: var(--lg-ink); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .lg-field::placeholder { color: var(--lg-ink-muted); } .lg-field:focus { outline: none; border-color: var(--lg-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-accent) 18%, transparent); } /* Primary accent button: rich gradient, specular edge, glow, springy */ .lg-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; height: 46px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--lg-pill-radius); background: linear-gradient(180deg, color-mix(in srgb, var(--lg-accent) 92%, white), var(--lg-accent-strong)); color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px color-mix(in srgb, var(--lg-accent) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: transform 0.16s var(--lg-spring), filter 0.2s ease; } .lg-btn:hover { filter: brightness(1.07); transform: translateY(-1px); } /* Add-ons: cursor shine + springy press (combine with anything above) */ .lg-shine { position: relative; overflow: hidden; } .lg-shine::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(78px circle at var(--mx, 50%) var(--my, 50%), var(--lg-sheen), transparent 62%); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .lg-shine:hover::after { opacity: 0.45; } /* smaller + softer, owner call 2026-07-31 */ .lg-press:active { transform: scale(0.965); } /* Optional: the two-stage "dwell" card rise (quick 75% lift, full on stay) */ /* Two-way transition (owner-approved 2026-07-18): the old 2s entry animation snapped on mouse-out because cancelling an animation bypasses transitions. In: fast rise with a soft landing; out: gentle .45s glide. */ .lg-rise { transition: transform 0.45s cubic-bezier(0.33, 0, 0.2, 1), box-shadow 0.45s ease; } .lg-rise:hover { transform: translateY(-7px) scale(1.02); transition: transform 0.55s cubic-bezier(0.22, 0.9, 0.3, 1), box-shadow 0.35s ease; }