/* ============================================================ LIQUID GLASS EFFECT — Physics-based refraction Loaded via child theme functions.php Apply classes to any Divi element: Advanced > CSS ID & Classes > CSS Class REQUIRED: .liquid-glass — base effect SURFACE TYPE (pick one, default is squircle): .liquid-glass-concave — concave lens (diverging) .liquid-glass-circle — circular arc profile (sharper) ELEMENT TYPE (pick one): .liquid-glass-header — no border-radius, for nav bars .liquid-glass-btn — pill button .liquid-glass-card — card with padding .liquid-glass-section — large section/row .liquid-glass-pill — small pill/badge OPTIONAL: .liquid-glass-interactive — mouse-follow specular (needs JS) Combine freely: "liquid-glass liquid-glass-card liquid-glass-interactive" "liquid-glass liquid-glass-concave liquid-glass-btn" TUNING (CSS custom properties on :root or per-element): --lg-refraction 0–1 refraction strength (default 0.8) --lg-blur px frost/blur amount (default 2) --lg-bezel px bezel width (default 30) --lg-specular 0–1 specular highlight opacity (default 0.45) --lg-spec-saturation int specular tightness (default 7) --lg-saturate number backdrop saturation multiplier (default 1.8) --lg-brightness number backdrop brightness multiplier (default 1.06) --lg-refractive-index number glass refractive index (default 1.5) ARCHITECTURE: JS generates per-element displacement + specular maps using Snell's law and a surface profile (squircle/circle/concave). Maps are loaded via into a unique SVG filter. backdrop-filter: url(#lg-f-N) is applied to the .lg-effect layer. No static SVG filters needed — everything is computed at init. ============================================================ */ /* ---------------------------------------------------------- Defaults (override per-element or on :root) ---------------------------------------------------------- */ :root { --lg-refraction: 0.8; --lg-blur: 2; --lg-bezel: 30; --lg-specular: 0.45; --lg-spec-saturation: 7; --lg-saturate: 1.8; --lg-brightness: 1.06; --lg-refractive-index: 1.5; --lg-tint: rgba(255, 255, 255, 0.10); --lg-border-opacity: 0.18; --lg-shadow-opacity: 0.08; --lg-shine-top: 0.45; --lg-shine-bottom: 0.3; --lg-shine-glow: 0.1; /* Fallback for browsers that can't render SVG-in-backdrop-filter (Safari mobile/desktop, Firefox desktop + mobile, Android Chrome). The JS feature-tests and only overrides .lg-effect inline when url(#filter) actually paints. Otherwise these values render. */ --lg-fallback-blur: 12px; --lg-fallback-saturate: 1.5; --lg-fallback-brightness: 1.05; } /* ---------------------------------------------------------- Container ---------------------------------------------------------- */ .liquid-glass { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, var(--lg-border-opacity)); border-radius: 20px; box-shadow: 0 4px 16px rgba(0, 0, 0, var(--lg-shadow-opacity)), 0 0 10px rgba(0, 0, 0, calc(var(--lg-shadow-opacity) * 0.35)); transition: box-shadow 0.3s ease; } /* ---------------------------------------------------------- Injected layers (created by liquid-glass.js) ---------------------------------------------------------- */ /* Glass layer — JS sets backdrop-filter: url(#lg-f-N) on browsers that can render SVG-in-backdrop-filter. On browsers that can't (Safari desktop + mobile, Firefox desktop + mobile, Android Chrome), the inline value is never set and the built-in blur fallback below paints instead. Note: do NOT add pointer-events: none here — Safari mobile drops the compositor layer for backdrop-filtered elements when this is set, which kills the blur. .lg-effect is at z-index: 0 anyway, well below .lg-content (z: 3), so it doesn't intercept clicks. */ .lg-effect { position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; backdrop-filter: blur(var(--lg-fallback-blur)) saturate(var(--lg-fallback-saturate)) brightness(var(--lg-fallback-brightness)); -webkit-backdrop-filter: blur(var(--lg-fallback-blur)) saturate(var(--lg-fallback-saturate)) brightness(var(--lg-fallback-brightness)); } /* Tint — semi-transparent fill (z-index: 1 keeps it under .lg-content) */ .lg-tint { position: absolute; inset: 0; z-index: 1; background: var(--lg-tint); } /* Shine — inset box-shadow rim (CSS-only) */ .lg-shine { position: absolute; inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; box-shadow: inset 1.5px 2px 1px -1px rgba(255, 255, 255, var(--lg-shine-top)), inset -1px -1px 1px 0 rgba(255, 255, 255, var(--lg-shine-bottom)), inset 0 0 5px rgba(255, 255, 255, var(--lg-shine-glow)); pointer-events: none; } /* Content — wraps whatever was in the element */ .lg-content { position: relative; z-index: 3; } /* ---------------------------------------------------------- Element types ---------------------------------------------------------- */ /* Override .liquid-glass { position: relative; overflow: hidden } for fixed headers. overflow: visible lets dropdown sub-menus render outside the header bounds. border-radius: 0 means clipping isn't needed anyway. !important guards against Divi's section-level overflow rules. */ .liquid-glass.liquid-glass-header { position: inherit; overflow: visible !important; } .liquid-glass-header { border-radius: 0; --lg-tint: rgba(255, 255, 255, 0.05); --lg-border-opacity: 0.1; --lg-shadow-opacity: 0.03; --lg-bezel: 15; } /* Mobile dropdown menu inside an LG header. The header section is wrapped in .lg-content (position: relative; z-index: 3), which establishes a stacking/containing context that hides Divi's normally absolute-positioned dropdown. Switching to position: fixed anchors the dropdown to the viewport directly under the header (height published by JS as --lg-header-h), bypassing the wrap entirely. Because it's fixed with a top offset and no bottom/height, the panel sizes to its content and spills past the bottom of the viewport. Being out of flow, it never extends the document either, so neither the panel nor the page can scroll to reach the overflow — long sub-menus become unreachable on tablet and phone. Cap the height against the same --lg-header-h the top offset uses and let the panel scroll itself. */ .liquid-glass-header .et_mobile_menu { position: fixed !important; top: var(--lg-header-h, 60px); left: 0; right: 0; width: 100% !important; margin: 0 !important; z-index: 99999; max-height: calc(100vh - var(--lg-header-h, 60px)); /* fallback */ max-height: calc(100dvh - var(--lg-header-h, 60px)); /* honors mobile browser chrome */ overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */ overscroll-behavior-y: contain; /* don't chain the scroll to the page behind */ } /* Sub-menus must not become a second clipped box inside that scroller. */ .liquid-glass-header .et_mobile_menu .sub-menu { max-height: none; overflow: visible; } .liquid-glass-btn { border-radius: 980px; padding: 12px 32px; cursor: pointer; --lg-bezel: 18; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .liquid-glass-btn:hover { --lg-tint: rgba(255, 255, 255, 0.16); --lg-shine-top: 0.6; transform: translateY(-1px); } .liquid-glass-btn:active { transform: translateY(0); --lg-tint: rgba(255, 255, 255, 0.12); } .liquid-glass-card { border-radius: 24px; padding: 32px; } .liquid-glass-section { border-radius: 32px; } .liquid-glass-pill { border-radius: 980px; padding: 6px 18px; font-size: 13px; --lg-bezel: 12; } /* ---------------------------------------------------------- Surface type overrides ---------------------------------------------------------- */ .liquid-glass-concave { --lg-bezel: 35; } /* ---------------------------------------------------------- Interactive mouse-follow highlight ---------------------------------------------------------- */ /* Mouse-follow highlight — JS sets radial gradient via mousemove */ .liquid-glass-interactive .lg-shine { --lg-mouse-x: 50%; --lg-mouse-y: 50%; background: radial-gradient( circle 90px at var(--lg-mouse-x) var(--lg-mouse-y), rgba(255, 255, 255, 0.12) 0%, transparent 100% ); }