/** * Finewerk — CSS Glass (`.fw-css-glass`) * * Lightweight, static glass surface. This is the frontend replacement for * the liquid-glass material (assets/css/liquid-glass.css + * assets/js/liquid-glass.js), which stays in the repository but is no * longer enqueued by default (see Frontend_Assets::enqueue_glass_material() * and the `finewerk_site_components_glass_material` filter). * * What it is: plain CSS glassmorphism — a translucent tint, one standard * `backdrop-filter` blur, a 1px translucent edge, a faint top highlight and a * soft shadow, so the page behind the element stays visibly blurred through * it. * What it is NOT: no SVG displacement filter, no backdrop sampling, no * JavaScript, no canvas, no per-frame work, no layered filter chains. * * What is shared is the BLUR (backdrop-filter + edge + shadow); the tint is * per component: `.fw-css-glass--dark` / `.fw-css-glass--light` presets, or * any component rule setting `--fw-css-glass-bg`. `.fw-css-glass--sheer` is * the lighter, less blurred variant the widget cards use. `.fw-css-glass--flat` * only exists to switch the blur off on a surface that is not visible. * * Tokens: the `--fw-glass-*` names (written by the header's admin "Glass * background" fields and by the dormant material) are read as overrides; * the `--fw-css-glass-*` names are the defaults. * * NOT the site header. The navbar paints its own `.fw-header-glass` plate * (assets/css/site-header.css) and shares no token or rule with this * sheet, so anything retuned here leaves the header untouched. * * Author: Chili-House */ .fw-css-glass { /* Tint: component CSS overrides --fw-css-glass-bg (or uses a modifier below). The --fw-glass-* names are read as overrides so an element that already carries them keeps working. */ --fw-css-glass-rgb: var(--fw-glass-dyn-tint, 28, 32, 31); --fw-css-glass-alpha: var(--fw-glass-dyn-opacity-min, 0.58); --fw-css-glass-bg: rgba(var(--fw-css-glass-rgb), var(--fw-css-glass-alpha)); --fw-css-glass-blur: var(--fw-glass-blur, 18px); --fw-css-glass-saturate: var(--fw-glass-saturation, 1.25); /* 1px translucent edge + top highlight strength (0–1). */ --fw-css-glass-edge: var(--fw-glass-border-opacity, 0.10); --fw-css-glass-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.10); background-color: var(--fw-css-glass-bg); /* Edge as an inset shadow (no layout impact, follows border-radius). */ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, var(--fw-css-glass-edge)), inset 0 1px 0 0 rgba(255, 255, 255, calc(var(--fw-css-glass-edge) * 0.6)), var(--fw-css-glass-shadow); -webkit-backdrop-filter: blur(var(--fw-css-glass-blur)) saturate(var(--fw-css-glass-saturate)); backdrop-filter: blur(var(--fw-css-glass-blur)) saturate(var(--fw-css-glass-saturate)); } /* Tint presets. Components may instead set --fw-css-glass-bg themselves. */ .fw-css-glass--dark { --fw-css-glass-bg: rgba(28, 32, 31, 0.58); --fw-css-glass-edge: 0.10; } .fw-css-glass--light { --fw-css-glass-bg: rgba(255, 255, 255, 0.12); --fw-css-glass-edge: 0.18; --fw-css-glass-blur: 14px; --fw-css-glass-saturate: 1.15; } /* -------------------------------------------------------------------------- Sheer variant (`.fw-css-glass--sheer`) The same glass, lighter: half the blur and a thinner tint, so more of what is behind the element shows through. Edge, highlight, shadow and radius stay the base look. Token-only — it adds no layer and no filter, and the smaller blur radius makes the backdrop pass cheaper, not dearer. Opt-in per element, next to the host glass class: class="fw-css-glass fw-css-glass--sheer" (tinted surfaces) class="finewerk-liquid-glass fw-css-glass--sheer" (widget card plates) The site header's surfaces do not carry it: they have their own `.fw-header-glass` plate (assets/css/site-header.css). -------------------------------------------------------------------------- */ .fw-css-glass.fw-css-glass--sheer { --fw-css-glass-alpha: 0.30; --fw-css-glass-blur: 9px; --fw-css-glass-saturate: 1.2; } .finewerk-liquid-glass.fw-css-glass--sheer { --fw-glass-opacity: 0.06; --fw-glass-blur: 8px; --fw-glass-saturation: 1.3; } /* Opt-out of the blur for a surface that is never visible (opacity 0, off-canvas) so it costs no backdrop pass; re-enable it with the class removed. Not used for anything visible. */ .fw-css-glass--flat { -webkit-backdrop-filter: none; backdrop-filter: none; } /* -------------------------------------------------------------------------- Static plate for markup that still carries the dormant material's class names (`finewerk-liquid-glass` on the Services V2 / Side Tabs / Audit Section / Testimonials V2 / Steps cards, and any Elementor element an editor gave the class). Visually this is the material's own CSS-only "Tier 2": a white frosted tint, one standard backdrop blur, a static rim. Nothing here is dynamic and nothing needs liquid-glass.js. The plate is a `::before` at z-index -1 (exactly like the material) so widget rules that target `.finewerk-liquid-glass::before` keep working. -------------------------------------------------------------------------- */ .finewerk-liquid-glass, .finewerk-liquid-glass__dynamic { --fw-glass-opacity: 0.12; --fw-glass-tint: 255, 255, 255; --fw-glass-blur: 16px; --fw-glass-saturation: 1.5; --fw-glass-radius: 24px; --fw-glass-border-opacity: 0.5; --fw-glass-rim-rgb: 255, 255, 255; --fw-glass-shadow-rgb: 15, 21, 38; --fw-glass-inner-shadow-opacity: 0.16; } :where(.finewerk-liquid-glass, .finewerk-liquid-glass__dynamic) { position: relative; z-index: 0; border-radius: var(--fw-glass-radius); } .finewerk-liquid-glass.finewerk-liquid-glass::before, .finewerk-liquid-glass__dynamic.finewerk-liquid-glass__dynamic::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; border-radius: inherit; pointer-events: none; /* No-backdrop fallback: a stronger tint keeps the panel readable. */ background: rgba(var(--fw-glass-tint), calc(var(--fw-glass-opacity) * 2.5)); box-shadow: 0 24px 48px -16px rgba(var(--fw-glass-shadow-rgb), 0.30), 0 6px 14px -6px rgba(var(--fw-glass-shadow-rgb), 0.16), inset 0 0 0 1px rgba(var(--fw-glass-rim-rgb), calc(var(--fw-glass-border-opacity) * 0.5)), inset 0 1.5px 0.5px -1px rgba(255, 255, 255, calc(var(--fw-glass-border-opacity) * 1.2)), inset 0 -1.5px 0.5px -1px rgba(255, 255, 255, calc(var(--fw-glass-border-opacity) * 0.7)), inset 0 18px 30px -20px rgba(255, 255, 255, 0.40), inset 0 -16px 30px -22px rgba(var(--fw-glass-shadow-rgb), var(--fw-glass-inner-shadow-opacity)); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .finewerk-liquid-glass.finewerk-liquid-glass::before, .finewerk-liquid-glass__dynamic.finewerk-liquid-glass__dynamic::before { background: rgba(var(--fw-glass-tint), var(--fw-glass-opacity)); -webkit-backdrop-filter: blur(var(--fw-glass-blur)) saturate(var(--fw-glass-saturation)); backdrop-filter: blur(var(--fw-glass-blur)) saturate(var(--fw-glass-saturation)); } } /* -------------------------------------------------------------------------- Accessibility preferences (same contract as the material) -------------------------------------------------------------------------- */ @media (prefers-contrast: more) { .fw-css-glass { background-color: rgba(var(--fw-css-glass-rgb), 0.96) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important; } .finewerk-liquid-glass.finewerk-liquid-glass::before, .finewerk-liquid-glass__dynamic.finewerk-liquid-glass__dynamic::before { background: rgba(var(--fw-glass-tint), 0.92) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: inset 0 0 0 1px rgba(var(--fw-glass-shadow-rgb), 0.8) !important; } } @media (prefers-reduced-transparency: reduce) { .fw-css-glass { background-color: rgba(var(--fw-css-glass-rgb), 0.92) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; } .finewerk-liquid-glass.finewerk-liquid-glass::before, .finewerk-liquid-glass__dynamic.finewerk-liquid-glass__dynamic::before { background: rgba(var(--fw-glass-tint), 0.88) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; } }