/* ========================================================================== Finewerk — BG Logo (.fw-bg-logo) -------------------------------------------------------------------------- Decorative `bg-logo` emblem breaking out of the TOP-RIGHT corner of any Elementor element: add the CSS class `fw-bg-logo` (Elementor → element → Advanced → CSS Classes). No special markup, no JavaScript, no variants — the single class is the whole API. The image is painted on the element's ::before pseudo-element. Visual stack: element background → bg-logo decoration → element content ASSET — theme-local, migration-proof --------------------------------------------------------------------------- The image is the design asset from the project references (refferences/bg-logo.png — a 464×467 white circular emblem). The reference export has its black backdrop BAKED IN (every pixel fully opaque), which would paint a black box over any background, so the theme copy is a processed version: luminance extracted to the alpha channel (white mark on true transparency, anti-aliased edges preserved as semi-transparent white). The reference file itself is untouched. The processed copy lives PERMANENTLY in this child theme at: softro-child/assets/images/bg-logo.png and is referenced RELATIVELY from this stylesheet (../images/bg-logo.png). Nothing is loaded from the WordPress Media Library and no production domain is hardcoded, so the effect keeps working across migrations, staging copies and domain changes. Override per element with `--fw-logo-image: url(…)` if a section ever needs a different mark. GEOMETRY — diagonal corner badge, 60% in / 40% out --------------------------------------------------------------------------- The pseudo-element is anchored near the container's top-right corner (top: 12px; right: 10px — the containing block is the container itself, never the viewport or an ancestor) and then shifted diagonally with a PERCENTAGE `transform: translate(40%, -40%)`. Translate percentages resolve against the pseudo-element's OWN box, so "40% outside" per axis is exact BY CONSTRUCTION at every container size, every logo size and every viewport — no fixed pixel offsets that only line up at one width. (The 12px / 10px anchor nudge is a fixed design offset of the anchor point; the in/out SPLIT itself stays purely proportional.) SCROLL SAFETY — why the diagonal needs (and gets) a guard --------------------------------------------------------------------------- Overflow past the RIGHT edge of a viewport-flush container adds horizontal page scroll — and neither Softro nor this site clips body overflow-x; on mobile every container is viewport-flush. So the diagonal breakout is paired with `overflow-x: clip` + `overflow-clip-margin` on the element: `clip` removes the horizontal SCROLLABLE overflow contribution entirely (unlike `hidden`, it creates no scroll container), while the clip-margin lets the overhang still PAINT as ink up to 12rem past the edge — more than the largest possible overhang (40% × 300px = 120px). `overflow-y` stays `visible` (visible+clip is the one combination CSS allows to mix), so the top breakout — which can never cause scroll (content above the scroll origin is unreachable ink) — is untouched. The diagonal package is gated behind `@supports (overflow-clip-margin)`: browsers without it (Safari) render the top-only breakout instead — a graceful, uncut fallback — rather than clipping the emblem mid-ring or growing a page scrollbar. Scoping note: the clip guard means children of an element carrying this class cannot visibly overflow it by more than 12rem horizontally — don't put the class on containers whose content intentionally bleeds far outside them. SIZING --------------------------------------------------------------------------- width: clamp(96px, 20%, 300px) — 20% of the container's width (the containing block, since the pseudo is absolutely positioned in it), so the emblem scales WITH its container; the floor keeps it present on mobile, the ceiling stays under the PNG's native 464px so it is never upscaled. aspect-ratio preserves the asset's exact 464:467 proportions and background-size: contain paints it edge-to-edge in that box. (The emblem is roughly square — on very short strip-like containers it will also bleed below; use --fw-logo-width to size it down there if needed.) STACKING — same Elementor reality as fw-bg-gradient (see fw-background.css) --------------------------------------------------------------------------- `z-index: -1` only means "above the background, below the content" inside a stacking context, and Elementor's own `.e-con { z-index: var(--z-index) }` resolves to `auto` (no context) at specificity (0,1,0) — beating any zero-specificity rule. So the context is forced with `isolation: isolate` (doubled class): it forms a stacking context WITHOUT touching `position` or `z-index`, Elementor's Position / Z-Index controls keep working, and Elementor's stylesheet never uses `isolation`, so nothing collides. WHY ::before (and its one trade-off) --------------------------------------------------------------------------- ::after belongs to fw-bg-gradient, and both utilities must compose on the same element (gradient + grain texture + corner emblem). Elementor's container background-overlay feature also renders on `.e-con::before` (`content: var(--background-overlay)`), so on a Container that BOTH has an Elementor background overlay configured AND carries fw-bg-logo, the logo replaces that overlay — documented trade-off. Every property Elementor's `.e-con:before` rule sets (left / height / borders / radius / blend / opacity / transition) is explicitly re-declared below so none of it leaks into the logo box. Sections are unaffected (their overlay is a real div). Tunables (set on the element, a wrapper, or in Elementor custom CSS): --fw-logo-image the image (default: the theme-local bg-logo.png) --fw-logo-width logo width (default clamp(96px, 20%, 300px)) --fw-logo-ratio aspect ratio (default 464 / 467 — match the image) --fw-logo-inset inset from the right edge (default 10px) --fw-logo-overflow how much sticks out, per axis (default 40%) --fw-logo-opacity logo opacity (default 0.1 — subtle watermark) --fw-logo-blend blend mode against the background (default normal) Safety: - pointer-events: none → never intercepts clicks, hover, focus or Elementor editing. - Out-of-flow pseudo-element → zero effect on layout, spacing or the container's dimensions; content is never pushed. - Selectors are doubled (.fw-bg-logo.fw-bg-logo) so they beat Elementor's single-class rules regardless of stylesheet order. - One shared PNG (~36 KB) painted per instance — no JS, no observers; any number of instances per page cost one request total. Author: Chili-House ========================================================================== */ .fw-bg-logo { /* Tunables — sensible defaults; adding the class alone is enough. */ --fw-logo-image: url("../images/bg-logo.png"); --fw-logo-width: clamp(96px, 20%, 300px); --fw-logo-ratio: 464 / 467; --fw-logo-inset: 10px; --fw-logo-overflow: 40%; --fw-logo-opacity: 0.1; --fw-logo-blend: normal; } /* Position fallback for elements that are `static` (Elementor Containers, Sections and widgets are already `position: relative`). :where() keeps specificity at zero so an Elementor Position setting (absolute / fixed / sticky) always wins — any of those is still a containing block for the pseudo-element, so the logo stays anchored to THIS element either way. */ :where(.fw-bg-logo) { position: relative; } /* Guarantee the stacking context that makes `z-index: -1` mean "above the background, below the content" (see header). Doubled class so it cannot be lost to Elementor's own single-class rules. Idempotent with fw-bg-gradient, which sets the same value. */ .fw-bg-logo.fw-bg-logo { isolation: isolate; } .fw-bg-logo.fw-bg-logo::before { content: ""; position: absolute; top: 12px; right: var(--fw-logo-inset); z-index: -1; /* above the background, below every child */ pointer-events: none; /* never intercept clicks / editing */ /* The box: sized from the container's width, shaped like the asset. */ width: var(--fw-logo-width); aspect-ratio: var(--fw-logo-ratio); background-image: var(--fw-logo-image); background-repeat: no-repeat; background-position: center; background-size: contain; /* Fallback geometry (no overflow-clip-margin support, e.g. Safari): top-only breakout — 60% of the image inside, 40% above the edge. Needs no overflow guard because top overflow can never cause scroll. The @supports block below upgrades this to the full diagonal. */ transform: translateY(calc(-1 * var(--fw-logo-overflow))); opacity: var(--fw-logo-opacity); mix-blend-mode: var(--fw-logo-blend); /* Explicit resets of everything Elementor's `.e-con:before` background- overlay rule would otherwise leak into this box (it sets left, height, border widths/style/radius from container vars, and a transition). */ left: auto; bottom: auto; height: auto; border: 0; border-radius: 0; transition: none; } /* -------------------------------------------------------------------------- Diagonal corner breakout — THE default behaviour (60% of the width and height inside, 40% past the top AND 40% past the right edge), activated together with its scroll guard wherever the guard is supported (see header: SCROLL SAFETY). -------------------------------------------------------------------------- */ @supports (overflow-clip-margin: 1rem) { .fw-bg-logo.fw-bg-logo { overflow-x: clip; overflow-y: visible; overflow-clip-margin: 12rem; } .fw-bg-logo.fw-bg-logo::before { transform: translate(var(--fw-logo-overflow), calc(-1 * var(--fw-logo-overflow))); } }