` inside a platform-managed admin form, regardless of whether it lives in a form-table cell, a section description, or a custom field block. */ .be-platform-settings-form .description, .be-platform-integrations-form .description { color: var(--be-platform-admin-text-soft); font-size: 11px; font-style: italic; line-height: 1.5; margin-top: 6px; } /* Section descriptions sit above the fields on their own line and read as a paragraph rather than per-field help text — slightly larger so they don't get lost. */ .be-platform-settings-form .be-platform-settings-section-description, .be-platform-integrations-form .be-platform-settings-section-description { font-size: 12px; margin: 12px 0 4px; } /* Submit row — separated from the last form-table by a thin rule so the primary action reads as the page conclusion, not an afterthought. */ .be-platform-settings-form .submit, .be-platform-integrations-form .submit { margin: 12px -24px 0; padding: 14px 24px 4px; border-top: 1px solid var(--be-platform-admin-rule); } /* Prune-to-schema secondary card — visual twin of the main settings card so its heading sits in the same edge-to-edge grey band as the section above it (BANDSINTOWN CONNECTION, etc.). Used in two places: - Per-tab: rendered below each plugin's primary form on Settings / Integrations. - Global: rendered below the plugins table on Overview, marked additionally with `--global` for any future variant tweaks. */ .be-platform-kit-prune { margin-top: 16px; background: var(--be-platform-admin-card-bg); border: 1px solid var(--be-platform-admin-border); } .be-platform-kit-prune > h2 { margin: 0; padding: 12px 24px; background: var(--be-platform-admin-bg); border-bottom: 1px solid var(--be-platform-admin-border); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--be-platform-admin-text); } .be-platform-kit-prune__body { padding: 14px 24px 16px; } .be-platform-kit-prune__description { margin: 0 0 12px; color: var(--be-platform-admin-text-soft); } .be-platform-kit-prune__form { margin: 0; } /* Empty / informational paragraphs (e.g. "No plugins have registered…") — render in soft grey on the page background so they read as system copy rather than form content. */ .be-platform-overview .description, .be-platform-integrations .description, .be-platform-settings .description, .be-platform-preflight .description { color: var(--be-platform-admin-text-soft); } /* ---------------------------------------------------------------------------- * Two-column section layout (since 0.10.0) * * Used by Sections declared with `Section::LAYOUT_TWO_COLUMN`. The Settings / * Integrations Renderer emits one `.be-platform-section-columns` grid per * such section; each column is a vertical flex stack of `.be-platform-field` * blocks, optionally separated by `.be-platform-field-divider` rules. * ---------------------------------------------------------------------------- */ .be-platform-section-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 16px 0 4px; } .be-platform-section-column { display: flex; flex-direction: column; gap: 16px; } .be-platform-field-divider { border: 0; border-top: 1px solid var(--be-platform-admin-rule); margin: 4px 0; } /* ---------------------------------------------------------------------------- * Field block — self-contained label + control + description unit. Used by * `Settings\Renderer::render_field_block()` for two-column layouts (and any * future custom layout that doesn't rely on WP's form-table). * * Stacks vertically so it composes naturally inside narrow columns: * *

` the consumer's render path emits). The `.be-platform-glass` * element itself is just a positioning context + clip frame; all the * visual paint (translucent tint, backdrop-filter, edge highlights, * inner glow) lives on the inner overlay div. * * Why a real DOM child instead of a `::before` pseudo: cross-engine * `backdrop-filter` semantics on pseudo-elements are not reliable — * macOS Safari and iOS Safari compute the pseudo's backdrop image * from the page-root compositing layer rather than from the parent * element's painted background, producing a uniform pastel wash * instead of refracting through the consumer's own background-image. * A real DOM child has unambiguous backdrop semantics in every * engine: the parent's `background` paints first, then the child * paints on top with its `backdrop-filter` reading the parent's * already-painted bg as backdrop. No isolation/compositing-layer * tricks, no engine-specific gates. * * Platform Container Glass auto-injection uses the same two-layer * optical model without moving Elementor's existing children: * *

* * ...original Elementor children stay as direct children... *

* * The overlay is absolute, fills the whole container, and ignores * pointer events. The original children remain direct siblings of * the overlay and are lifted above it with z-index. This avoids the * failed 0.13.x wrapper/reparenting attempts that broke the editor * canvas. * * For Elementor Containers, `\BE\Platform\Elementor\ContainerGlass` * adds the Glass controls and injects the overlay. For consumer * widgets, emit the two-div shape directly in `render()`. * * Consumer pattern (custom widget): emit the two-div shape * directly in `render()`. See BSM's `.be-social-filler-pane` → * `.be-social-filler.be-platform-glass` → `.be-platform-glass-overlay` * for the canonical example. * * The hype4-derived recipe has five always-on parameters, each tunable * via a CSS custom property: * * 1. Blur (--be-platform-glass-blur) — backdrop-filter blur radius * 2. Tint (--be-platform-glass-tint) — translucent white wash * 3. Refraction (--be-platform-glass-refraction) — opacity of the * edge-highlight / bevel layer (0 = invisible, * 1 = full hype4 intensity) * 4. Depth (--be-platform-glass-depth-strength) — alpha 0–1 of the * inner-glow inset shadow that gives the surface its * "milky thickness" * 5. Saturation (--be-platform-glass-saturation) — backdrop-filter saturate * * Plus a static recipe baked into the overlay (not parameterised — * part of the hype4 look): * - Outer drop shadow * * The `--liquid` modifier ADDS an SVG `feDisplacementMap` step on top of * the base blur+saturate, producing genuine optical refraction (straight * lines behind the pane wobble, they don't just blur). The base * recipe's parameters all still apply when `--liquid` is on; liquid is * additive, not a replacement. * * Browser support — progressive enhancement: * - Base recipe (blur + refraction + depth + saturation): Safari 16+, Chrome 105+, Firefox 110+ (family floor) * - Liquid (the --liquid mod): Chrome 105+, Firefox 110+ (NOT Safari/iOS) * * Two cases fall back to the base frost via the cascade: * - Browsers below the `url()`-in-`backdrop-filter` cliff (gated by * `@supports (backdrop-filter: url())` below). * - All WebKit browsers (every Safari version, all iOS browsers). * WebKit's renderer collapses the entire backdrop-filter chain * (blur + saturate + displacement → invisible) when * `feDisplacementMap` is present — dramatically worse than the * plain frost. The exclusion is gated by the * `data-be-platform-engine="webkit"` attribute that * `\BE\Platform\UI\Assets::maybe_emit_engine_detect()` sets on * `` from a tiny inline `` script. Revisit if Apple * ever ships a working displacement primitive in `backdrop-filter`. * * Default values for the five custom properties match the hype4 * reference recipe exactly so a bare `

` * over any background looks intentional out of the box: * * --be-platform-glass-blur (default 4px) * --be-platform-glass-tint (default rgba(255,255,255,0.14)) * --be-platform-glass-refraction (default 1 — full intensity edge highlights) * --be-platform-glass-depth-strength (default 1 — full inner glow) * --be-platform-glass-saturation (default 100%) * * Plus one additional knob not exposed as an Elementor control but * available as CSS custom-property overrides for site-wide theming: * * --be-platform-glass-depth-spread (default 19px) * * Implementation notes: * - `.be-platform-glass` (the parent / glass element) sets * `position: relative` + `overflow: hidden` so the overlay can * anchor and clip to whatever `border-radius` the consumer applied. * No background, no backdrop-filter on this element itself — the * consumer keeps their own background (Elementor's classic/gradient/ * image bg control) on this element, and `backdrop-filter` on the * overlay INSIDE this element refracts through it. * - `.be-platform-glass-overlay` (the injected overlay) holds the * tint, blur, saturate, drop shadow, and inner glow. Its `::before` * pseudo holds the edge-highlight / bevel layer that the Refraction * slider fades in/out. It also re-publishes the parent's full * content area via `position: absolute; inset: 0` and never * participates in flex/grid layout. * - The base class does NOT set `border-radius`. Glass corners come * from the consumer's existing border control (Elementor * containers already expose this; the overlay's edges follow the * parent's content box, and the parent's `overflow: hidden` * clips both overlay and any backdrop-filter halo to the * rounded corners). * - The `--liquid` SVG filter is delivered as an in-document * `` block * emitted on `wp_footer` / `admin_footer` by * `\BE\Platform\UI\Assets::maybe_emit_glass_filter()` whenever * `be-platform-ui` is enqueued. We can't inline the filter as a * `data:` URL inside `backdrop-filter` because Chromium silently * ignores SVG-filter `data:` URLs in `backdrop-filter` (the parser * accepts the syntax — `CSS.supports` returns `true` — but the * renderer produces no displacement). Per-instance tuning of the * displacement (refraction `scale`, noise `baseFrequency`) is * intentionally not exposed: one fixed recipe = one consistent * platform look. * ---------------------------------------------------------------------------- */ .be-platform-glass { overflow: hidden; /* No background, no backdrop-filter on the element itself — those live on the `.be-platform-glass-overlay` child, which refracts through this element's painted background. */ } /* Elementor Containers set `position: var(--position)` and `overflow: var(--overflow)` in core CSS. The auto-injected overlay needs the Container to be the containing block and clip frame even when saved Container values would otherwise make it static/visible. Keep this scoped to `.e-con` so consumer widgets can put `.be-platform-glass` on elements with their own positioning contract (e.g. BSM's `.be-social-filler { position:absolute; inset:0; }`). */ .be-platform-glass.e-con { overflow: hidden; position: relative !important; } /* The actual glass surface — real DOM child div injected as the first child of `.be-platform-glass`. It is a full-size absolute layer and never participates in the parent's flex/grid layout. */ .be-platform-glass-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--be-platform-glass-tint, rgba(255, 255, 255, 0.14)); backdrop-filter: blur(var(--be-platform-glass-blur, 4px)) saturate(var(--be-platform-glass-saturation, 100%)); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 0 calc(var(--be-platform-glass-depth-spread, 19px) * 2) var(--be-platform-glass-depth-spread, 19px) rgba(255, 255, 255, var(--be-platform-glass-depth-strength, 1)); } /* Dedicated edge-glint / bevel layer. Keeping this separate from the tint and backdrop-filter means the Refraction slider can use a plain unitless opacity value, matching the 0–1 CSS variable Elementor already emits. */ .be-platform-glass-overlay::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--be-platform-glass-refraction, 1); border: 1px solid rgba(255, 255, 255, 0.32); background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.8), transparent ) top / 100% 2px no-repeat, linear-gradient( 180deg, rgba(255, 255, 255, 0.8), transparent 50%, rgba(255, 255, 255, 0.3) ) left / 2px 100% no-repeat; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 1px 0 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.12), inset -1px 0 0 rgba(0, 0, 0, 0.06); } /* Keep real Elementor child content above the glass surface without reparenting it. Do not lift arbitrary non-Elementor helper nodes such as background-effect overlays; those are part of the backdrop the glass should refract through. */ .be-platform-glass > .elementor-element { position: relative; z-index: 1; } /* `--liquid` adds an SVG `feDisplacementMap` step on top of the base blur+saturate, producing genuine optical refraction. Applied to the overlay (where the base backdrop-filter lives). Gating is two-tier: 1. Outer `@supports (backdrop-filter: url())` — excludes browsers that don't accept `url()` as a filter-function in `backdrop-filter` at all. They silently fall back to the base frost (still hype4-shape, not invisible). 2. WebKit-exclusion via the `html[data-be-platform-engine="webkit"]` attribute set by `\BE\Platform\UI\Assets::maybe_emit_engine_detect()`. WebKit PARSES `url()` in backdrop-filter as valid (so `@supports` returns true) but its renderer collapses the entire chain when `feDisplacementMap` is present, dropping the visible blur and saturate along with the displacement. Net effect would be "transparent pane" — much worse than the base frost — so we exclude WebKit and let it fall through to the base overlay rule via the cascade. See the header comment of this file for why we use an in-document `` reference rather than a `data:` URL. */ @supports (backdrop-filter: url(#x)) { html:not([data-be-platform-engine="webkit"]) .be-platform-glass--liquid > .be-platform-glass-overlay { backdrop-filter: blur(var(--be-platform-glass-blur, 4px)) saturate(var(--be-platform-glass-saturation, 100%)) url(#be-platform-glass-liquid); } }