/** * ExpoXR Liquid Glass — Interactive Styles * Version: 1.0.0 * * Apple-inspired Liquid Glass: frosted backdrop blur, dynamic specular highlight, * caustic light patterns, iridescent edge border — all responding to mouse position. * * Usage: * Add class="liquid-glass" to any Elementor Container, Section, or HTML element. * For multiple elements on the same page: use class="liquid-glass" (recommended). * Single shorthand: id="liquid-glass" also works (triggers on that one element). * * Optional modifier classes (add alongside liquid-glass): * liquid-glass--dark — darker tint, better on light page backgrounds * liquid-glass--strong — heavier blur + opacity for dramatic glass look * liquid-glass--subtle — lighter tint for minimal glass hint * liquid-glass--sharp — less blur, sharper see-through glass * * @package ExpoXR * @version 1.0.0 */ /* ── Container ──────────────────────────────────────────────────────────────── */ #liquid-glass, .liquid-glass { position: relative; isolation: isolate; overflow: hidden; border-radius: inherit; /* Physical glass depth */ box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.12), 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.10); } /* ══════════════════════════════════════════════════════════════════════════════ LAYER 1 — Glass Surface (backdrop blur + tint) ══════════════════════════════════════════════════════════════════════════════ */ #liquid-glass .lg-surface, .liquid-glass .lg-surface { position: absolute !important; inset: 0 !important; z-index: 0 !important; border-radius: 15px; pointer-events: none !important; margin: 0 !important; /* Frosted glass */ backdrop-filter: blur(16px) saturate(1.9) brightness(1.08); -webkit-backdrop-filter: blur(16px) saturate(1.9) brightness(1.08); background: rgba(255, 255, 255, 0.07); /* Subtle inner bevel: light from top-left */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.06), inset 1px 0 0 rgba(255, 255, 255, 0.12), inset -1px 0 0 rgba(0, 0, 0, 0.04); /* Idle breathing */ animation: lg-breathe 7s ease-in-out infinite; } @keyframes lg-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.004); } } /* ══════════════════════════════════════════════════════════════════════════════ LAYER 2 — Caustic Light Canvas ══════════════════════════════════════════════════════════════════════════════ */ #liquid-glass .lg-canvas, .liquid-glass .lg-canvas { position: absolute !important; inset: 0 !important; z-index: 1 !important; width: 100% !important; height: 100% !important; border-radius: 15px; pointer-events: none !important; display: block !important; margin: 0 !important; padding: 0 !important; /* Additive blending so caustic light adds on top of the glass surface */ mix-blend-mode: screen; } /* ══════════════════════════════════════════════════════════════════════════════ LAYER 3 — Refraction Shimmer (SVG displacement applied by JS) ══════════════════════════════════════════════════════════════════════════════ */ #liquid-glass .lg-refract, .liquid-glass .lg-refract { position: absolute !important; inset: 0 !important; z-index: 2 !important; border-radius: 15px; pointer-events: none !important; /* Subtle angled light streak — this gradient gets displaced by SVG feTurbulence */ background: linear-gradient( 135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.00) 40%, rgba(200, 235, 255, 0.06) 70%, rgba(255, 255, 255, 0.08) 100% ); } /* ══════════════════════════════════════════════════════════════════════════════ LAYER 4 — Specular Highlight (follows mouse via CSS custom properties) ══════════════════════════════════════════════════════════════════════════════ */ #liquid-glass .lg-highlight, .liquid-glass .lg-highlight { position: absolute !important; inset: 0 !important; z-index: 3 !important; border-radius: 15px; pointer-events: none !important; /* Radial hot-spot centred at --lg-hx / --lg-hy set by JS */ background: radial-gradient( ellipse 55% 45% at var(--lg-hx, 35%) var(--lg-hy, 25%), rgba(255, 255, 255, 0.36) 0%, rgba(210, 240, 255, 0.16) 35%, rgba(180, 220, 255, 0.06) 60%, transparent 80% ); opacity: var(--lg-highlight-op, 0.08); transition: opacity 0.05s linear; } /* ══════════════════════════════════════════════════════════════════════════════ LAYER 5 — Iridescent Edge Border (angle follows mouse via --lg-edge-angle) ══════════════════════════════════════════════════════════════════════════════ */ #liquid-glass .lg-edge, .liquid-glass .lg-edge { position: absolute !important; inset: 0 !important; z-index: 4 !important; border-radius: 15px; pointer-events: none !important; /* 1px rainbow border via mask punch-out technique */ padding: 1px; background: linear-gradient( var(--lg-edge-angle, 45deg), rgba(243, 110, 36, 0.80) 0%, rgba(239, 70, 129, 0.70) 25%, rgba(128, 98, 170, 0.70) 50%, rgba( 19, 188, 212, 0.80) 75%, rgba( 42, 172, 226, 0.75) 100% ); /* Punch out the content area so only the 1px border shows the gradient */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; /* Glows brighter as mouse approaches */ opacity: calc(0.20 + var(--lg-prox, 0) * 0.80); transition: opacity 0.05s linear; } /* Outer edge glow (separate from border — sits outside via negative inset) */ #liquid-glass .lg-edge::after, .liquid-glass .lg-edge::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; padding: 3px; background: linear-gradient( var(--lg-edge-angle, 45deg), rgba(243, 110, 36, 0.30), rgba( 19, 188, 212, 0.30), rgba(128, 98, 170, 0.25) ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; filter: blur(4px); opacity: calc(var(--lg-prox, 0) * 0.90); transition: opacity 0.05s linear; } /* ══════════════════════════════════════════════════════════════════════════════ CONTENT LAYER — Everything above the glass ══════════════════════════════════════════════════════════════════════════════ */ /* Direct children that are not glass layers */ #liquid-glass > *:not(.lg-surface):not(.lg-canvas):not(.lg-refract):not(.lg-highlight):not(.lg-edge):not(svg), .liquid-glass > *:not(.lg-surface):not(.lg-canvas):not(.lg-refract):not(.lg-highlight):not(.lg-edge):not(svg) { position: relative !important; z-index: 5 !important; } /* Elementor Container inner elements */ #liquid-glass .elementor-element, #liquid-glass .e-con, #liquid-glass .e-con-inner, #liquid-glass .elementor-widget-wrap, #liquid-glass .elementor-container, .liquid-glass .elementor-element, .liquid-glass .e-con, .liquid-glass .e-con-inner, .liquid-glass .elementor-widget-wrap, .liquid-glass .elementor-container { position: relative !important; z-index: 5 !important; } /* ══════════════════════════════════════════════════════════════════════════════ MODIFIER: --dark (for use on light page backgrounds) ══════════════════════════════════════════════════════════════════════════════ */ #liquid-glass.liquid-glass--dark .lg-surface, .liquid-glass.liquid-glass--dark .lg-surface { background: rgba(0, 0, 0, 0.20); backdrop-filter: blur(18px) saturate(1.6) brightness(0.88); -webkit-backdrop-filter: blur(18px) saturate(1.6) brightness(0.88); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.12); } #liquid-glass.liquid-glass--dark .lg-highlight, .liquid-glass.liquid-glass--dark .lg-highlight { background: radial-gradient( ellipse 55% 45% at var(--lg-hx, 35%) var(--lg-hy, 25%), rgba(120, 160, 200, 0.28) 0%, rgba( 80, 120, 170, 0.10) 40%, transparent 70% ); } /* ══════════════════════════════════════════════════════════════════════════════ MODIFIER: --strong (heavy blur, more visible glass) ══════════════════════════════════════════════════════════════════════════════ */ #liquid-glass.liquid-glass--strong .lg-surface, .liquid-glass.liquid-glass--strong .lg-surface { background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(28px) saturate(2.2) brightness(1.12); -webkit-backdrop-filter: blur(28px) saturate(2.2) brightness(1.12); } /* ══════════════════════════════════════════════════════════════════════════════ MODIFIER: --subtle (minimal, nearly invisible glass) ══════════════════════════════════════════════════════════════════════════════ */ #liquid-glass.liquid-glass--subtle .lg-surface, .liquid-glass.liquid-glass--subtle .lg-surface { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(8px) saturate(1.4) brightness(1.04); -webkit-backdrop-filter: blur(8px) saturate(1.4) brightness(1.04); } /* ══════════════════════════════════════════════════════════════════════════════ MODIFIER: --sharp (less blur, cleaner glass) ══════════════════════════════════════════════════════════════════════════════ */ #liquid-glass.liquid-glass--sharp .lg-surface, .liquid-glass.liquid-glass--sharp .lg-surface { backdrop-filter: blur(6px) saturate(2.0) brightness(1.06); -webkit-backdrop-filter: blur(6px) saturate(2.0) brightness(1.06); } /* ══════════════════════════════════════════════════════════════════════════════ MOBILE — Reduce effect on touch devices ══════════════════════════════════════════════════════════════════════════════ */ @media (hover: none) and (pointer: coarse) { #liquid-glass .lg-surface, .liquid-glass .lg-surface { backdrop-filter: blur(8px) saturate(1.5); -webkit-backdrop-filter: blur(8px) saturate(1.5); animation: none; } /* Caustic canvas hidden on touch (JS disabled, canvas stays empty) */ #liquid-glass .lg-canvas, .liquid-glass .lg-canvas { display: none !important; } #liquid-glass .lg-refract, .liquid-glass .lg-refract { filter: none !important; } }