/** * Page Designer — Liquid Glass Block CSS (pd-blk-glass-*) * * Loaded INSIDE the canvas iframe AND on published pages. The actual * filter primitives live in an inline injected by glass_runtime.js * — this stylesheet handles the static visual treatment (backdrop-filter, * tint overlay, highlight pseudo-element, iridescent edge, inner-glow). * * Runtime sets CSS custom properties on each glass root: * --pd-glass-blur (px) * --pd-glass-tint, --pd-glass-tint-op * --pd-glass-hx, --pd-glass-hy (highlight position 0..1) * --pd-glass-hover-amt (0..1) * --pd-glass-anim-dur (s) * * Each style preset gets a different SVG filter id which the runtime * applies via element.style.filter. */ [data-pd-glass-on="1"] { position: relative; isolation: isolate; /* Cross-browser backdrop blur — actual amount via custom prop */ backdrop-filter: blur(var(--pd-glass-blur, 18px)) saturate(140%); -webkit-backdrop-filter: blur(var(--pd-glass-blur, 18px)) saturate(140%); } /* Tint layer — sits at z:0 above the backdrop, beneath user content. */ [data-pd-glass-on="1"]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: color-mix( in srgb, var(--pd-glass-tint, #ffffff) calc(var(--pd-glass-tint-op, 10) * 1%), transparent ); z-index: 0; } /* Mouse-tracked specular highlight — sits at z:1 above tint. The runtime updates --pd-glass-hx / hy as the pointer moves over the surface. */ [data-pd-glass-on="1"][data-pd-glass-highlight="1"]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient( var(--pd-glass-highlight-size, 520px) circle at calc(var(--pd-glass-hx, 0.3) * 100%) calc(var(--pd-glass-hy, 0.3) * 100%), rgba(255, 255, 255, var(--pd-glass-highlight-int, 0.45)), transparent 35% ); mix-blend-mode: overlay; opacity: calc(0.4 + 0.6 * var(--pd-glass-hover-amt, 0)); transition: opacity 0.22s ease; z-index: 1; } /* Glass content (user's children) renders at z:2 */ [data-pd-glass-on="1"] > * { position: relative; z-index: 2; } /* Iridescent edge — subtle multi-hue 1px stroke applied as a layered box-shadow ring. Visible only when toggled on. */ [data-pd-glass-on="1"][data-pd-glass-iridescent="1"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(var(--pd-glass-iridescent-int, 0.32) * 1.55)), inset 1px 0 0 hsl(calc(319deg + var(--pd-glass-iridescent-hue, 0deg)) 100% 66% / var(--pd-glass-iridescent-int, 0.32)), inset -1px 0 0 hsl(calc(192deg + var(--pd-glass-iridescent-hue, 0deg)) 100% 66% / var(--pd-glass-iridescent-int, 0.32)), inset 0 1px 0 hsl(calc(46deg + var(--pd-glass-iridescent-hue, 0deg)) 100% 70% / var(--pd-glass-iridescent-int, 0.32)), inset 0 -1px 0 hsl(calc(147deg + var(--pd-glass-iridescent-hue, 0deg)) 100% 74% / var(--pd-glass-iridescent-int, 0.32)), 0 18px 50px -22px rgba(0, 0, 0, 0.35); } /* Inner glow — soft luminous halo emanating from inside the edge */ [data-pd-glass-on="1"][data-pd-glass-inner-glow="1"] { box-shadow: inset 0 0 var(--pd-glass-glow-spread, 28px) rgba(255, 255, 255, var(--pd-glass-glow-int, 0.18)), inset 0 0 0 1px rgba(255, 255, 255, calc(var(--pd-glass-glow-int, 0.18) * 1.55)), 0 18px 50px -22px rgba(0, 0, 0, 0.32); } /* Both Iridescent Edge AND Inner Glow enabled — merged stack so neither cascades the other away. Iridescent's chromatic bands + white centre ride on top of inner-glow's soft halo; inner-glow's own 1px white edge stroke is dropped (the iridescent centre stroke already fills that role with hue-shift baked in). Selector specificity (0,0,3,0) wins over either single-attr rule (0,0,2,0). */ [data-pd-glass-on="1"][data-pd-glass-iridescent="1"][data-pd-glass-inner-glow="1"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, calc(var(--pd-glass-iridescent-int, 0.32) * 1.55)), inset 1px 0 0 hsl(calc(319deg + var(--pd-glass-iridescent-hue, 0deg)) 100% 66% / var(--pd-glass-iridescent-int, 0.32)), inset -1px 0 0 hsl(calc(192deg + var(--pd-glass-iridescent-hue, 0deg)) 100% 66% / var(--pd-glass-iridescent-int, 0.32)), inset 0 1px 0 hsl(calc(46deg + var(--pd-glass-iridescent-hue, 0deg)) 100% 70% / var(--pd-glass-iridescent-int, 0.32)), inset 0 -1px 0 hsl(calc(147deg + var(--pd-glass-iridescent-hue, 0deg)) 100% 74% / var(--pd-glass-iridescent-int, 0.32)), inset 0 0 var(--pd-glass-glow-spread, 28px) rgba(255, 255, 255, var(--pd-glass-glow-int, 0.18)), 0 18px 50px -22px rgba(0, 0, 0, 0.35); } /* Blend nested blocks — when data-pd-glass-blend-mode is anything except "off" (or absent), nested children blend with the glass-styled element underneath them via the chosen CSS mix-blend-mode. */ [data-pd-glass-on="1"][data-pd-glass-blend-mode]:not([data-pd-glass-blend-mode=""]):not([data-pd-glass-blend-mode="off"]) > * { mix-blend-mode: var(--pd-glass-blend-content-mode, normal); } /* Holographic style — animated rainbow shimmer painted onto the tint ::before pseudo-element so it overlays the user's bg-image without touching its size or position. The tint color still mixes in via the color-mix base layer; the rainbow is the moving sweep on top. */ [data-pd-glass-on="1"][data-pd-glass-style="holographic"]::before { background: linear-gradient( 115deg, rgba(255, 100, 200, 0.10), rgba(100, 255, 220, 0.10), rgba(255, 200, 100, 0.10), rgba(180, 130, 255, 0.10), rgba(255, 100, 200, 0.10) ), color-mix( in srgb, var(--pd-glass-tint, #ffffff) calc(var(--pd-glass-tint-op, 10) * 1%), transparent ); background-size: 300% 300%, 100% 100%; background-position: 0% 50%, 0 0; background-repeat: no-repeat, no-repeat; animation: pd-blk-glass-holo var(--pd-glass-anim-dur, 7s) linear infinite; animation-play-state: var(--pd-glass-anim-state, running); } @keyframes pd-blk-glass-holo { 0% { background-position: 0% 50%, 0 0; } 100% { background-position: 300% 50%, 0 0; } } /* Inline SVG defs container — invisible, just hosts filter primitives. */ .pd-blk-glass-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; visibility: hidden; }