/* ============================================================ * Fix: prevent marker variables from inheriting to child brxe- * elements, which caused JS to apply av-squircle / av-nebo * classes to nested elements (text, icons, etc.) — v4.0.2 * ============================================================ */ @property --_av-sq-enable { syntax: '*'; inherits: false; initial-value: ; } @property --_av-nb-enable { syntax: '*'; inherits: false; initial-value: ; } @property --_av-nb-corner { syntax: '*'; inherits: false; initial-value: ; } @property --_av-sq-glow { syntax: '*'; inherits: false; initial-value: ; } @property --av-sq-border-w { syntax: '*'; inherits: false; initial-value: ; } @property --av-sq-sh-x { syntax: '*'; inherits: false; initial-value: ; } @property --av-sq-sh-y { syntax: '*'; inherits: false; initial-value: ; } @property --av-sq-sh-blur { syntax: '*'; inherits: false; initial-value: ; } @property --av-sq-sh-color { syntax: '*'; inherits: false; initial-value: ; } /* Per-corner sharp toggles — v4.1.0. Same non-inheriting treatment so * a parent with "sharp top-left" doesn't propagate that flag to * nested squircle elements. */ @property --_av-sq-sharp-tl { syntax: '*'; inherits: false; initial-value: ; } @property --_av-sq-sharp-tr { syntax: '*'; inherits: false; initial-value: ; } @property --_av-sq-sharp-br { syntax: '*'; inherits: false; initial-value: ; } @property --_av-sq-sharp-bl { syntax: '*'; inherits: false; initial-value: ; } /* Bricks Shape Tools by Avanton Studio v4.1.0 * * Selectors: * .av-squircle — squircle clip-path effect * .av-squircle.av-squircle-glow — squircle + premium hover glow * .av-squircle.av-sq-has-border — squircle with SVG border overlay * .av-nebo, .av-nebo--{tl|tr|bl|br} — negative corner (mask) * .nebo, .nebo--{tl|tr|bl|br} — backward-compat aliases * .av-shape-border-svg — JS-injected stroke overlay (inside shaped element) * .av-shape-shadow-svg — JS-injected shadow (sibling BEFORE shaped element) * * Shadow architecture (v4.0): * Shadow is rendered as an SVG element placed as the previous sibling * of each shaped element. The SVG contains a matching the shape * silhouette, blurred via . No filter or stacking * context on the shaped element itself — so forms / fixed-position * content inside it work normally. */ /* ============================================================ Squircle === */ .av-squircle { --av-sq-radius: 48px; --av-sq-roundness: 5; --av-sq-steps: 64; clip-path: var(--av-sq-path, inset(0 round var(--av-sq-radius))); -webkit-clip-path: var(--av-sq-path, inset(0 round var(--av-sq-radius))); } .av-squircle.av-squircle-glow { position: relative; transition: transform .28s ease, filter .28s ease; } .av-squircle.av-squircle-glow::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient( circle at var(--av-mx, 50%) var(--av-my, 50%), rgba(255, 255, 255, .25), transparent 48% ); transition: opacity .22s ease; } .av-squircle.av-squircle-glow:hover { transform: translateY(-2px) scale(1.015); } .av-squircle.av-squircle-glow:hover::before { opacity: 1; } .av-squircle.av-squircle-glow > * { position: relative; z-index: 2; } /* --- Squircle: SVG border overlay -------------------------------------- */ /* When border is enabled the JS injects an * child. The squircle parent must establish a containing block so the SVG * can be position: absolute relative to it. Bricks-injected position * settings on the element (#brxe-id selector, ID specificity) override * this rule, so user layouts that explicitly set position keep working. */ .av-squircle.av-sq-has-border { position: relative; } .av-squircle > svg.av-shape-border-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; /* Sit above content so the border traces the silhouette visibly. */ z-index: 10; } /* ====================================== Negative radius / Nebo (mask) === */ .nebo, .av-nebo { --nb-r: 20px; --nb-w: 20px; --nb-h: 20px; /* Fine-tuned radii (kept tied to --nb-r so users only adjust one var). */ --nb-cor1-rw: var(--nb-r); --nb-cor1-rh: var(--nb-r); --nb-cor2-rw: var(--nb-r); --nb-cor2-rh: var(--nb-r); --nb-curve-rw: var(--nb-r); --nb-curve-rh: var(--nb-r); --_nb-smooth: 98%; /* Curve anchor points (per corner). */ --_nb-curve-pos-tl: 0 0; --_nb-curve-pos-tr: 100% 0; --_nb-curve-pos-bl: 0 100%; --_nb-curve-pos-br: 100% 100%; --_nb-curve-pos: var(--_nb-curve-pos-br); --_nb-mask-image: linear-gradient(to bottom, #000, #000), linear-gradient(to bottom, #000, #000), linear-gradient(to bottom, #000, #000), linear-gradient(to bottom, #000, #000), radial-gradient(closest-side at center, #000 var(--_nb-smooth), transparent 100%), radial-gradient(closest-side at center, #000 var(--_nb-smooth), transparent 100%), radial-gradient(farthest-side at var(--_nb-curve-pos), transparent var(--_nb-smooth), #000 100%); --_nb-mask-size: 100% calc(100% - var(--nb-h) - var(--nb-cor1-rh) - var(--nb-curve-rh) - var(--nb-cor2-rh)), calc(100% - var(--nb-cor1-rw)) calc(100% - var(--nb-h) - var(--nb-curve-rh) - var(--nb-cor2-rh)), calc(100% - var(--nb-w) - var(--nb-curve-rw) - var(--nb-cor1-rw)) calc(100% - var(--nb-cor2-rh)), calc(100% - var(--nb-w) - var(--nb-cor1-rw) - var(--nb-curve-rw) - var(--nb-cor2-rw)) 100%, calc(var(--nb-cor1-rw) * 2) calc(var(--nb-cor1-rh) * 2), calc(var(--nb-cor2-rw) * 2) calc(var(--nb-cor2-rh) * 2), calc(var(--nb-curve-rw) + 0.5px) calc(var(--nb-curve-rh) + 0.5px); --_nb-mask-position-tl: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 0 calc(var(--nb-h) + var(--nb-curve-rh) + var(--nb-cor2-rh)), calc(var(--nb-w) + var(--nb-cor1-rw) + var(--nb-curve-rw)) 0, calc(var(--nb-w) + var(--nb-cor1-rw)) calc(var(--nb-h) + var(--nb-cor2-rh)); --_nb-mask-position-tr: 0 100%, 0 100%, 0 100%, 0 100%, 100% calc(var(--nb-h) + var(--nb-curve-rh) + var(--nb-cor2-rh)), calc(100% - var(--nb-w) - var(--nb-curve-rw) - var(--nb-cor1-rw)) 0, calc(100% - var(--nb-w) - var(--nb-cor1-rw)) calc(var(--nb-h) + var(--nb-cor2-rh)); --_nb-mask-position-bl: 100% 0, 100% 0, 100% 0, 100% 0, 0 calc(100% - var(--nb-h) - var(--nb-curve-rh) - var(--nb-cor2-rh)), calc(var(--nb-w) + var(--nb-curve-rw) + var(--nb-cor1-rw)) 100%, calc(var(--nb-w) + var(--nb-cor1-rw)) calc(100% - var(--nb-h) - var(--nb-cor2-rh)); --_nb-mask-position-br: 0 0, 0 0, 0 0, 0 0, 100% calc(100% - var(--nb-h) - var(--nb-curve-rh) - var(--nb-cor2-rh)), calc(100% - var(--nb-w) - var(--nb-curve-rw) - var(--nb-cor1-rw)) 100%, calc(100% - var(--nb-w) - var(--nb-cor1-rw)) calc(100% - var(--nb-h) - var(--nb-cor2-rh)); --_nb-mask-position: var(--_nb-mask-position-br); -webkit-mask-image: var(--_nb-mask-image); mask-image: var(--_nb-mask-image); -webkit-mask-size: var(--_nb-mask-size); mask-size: var(--_nb-mask-size); -webkit-mask-position: var(--_nb-mask-position); mask-position: var(--_nb-mask-position); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .nebo--tl, .av-nebo--tl { --_nb-curve-pos: var(--_nb-curve-pos-tl); --_nb-mask-position: var(--_nb-mask-position-tl); } .nebo--tr, .av-nebo--tr { --_nb-curve-pos: var(--_nb-curve-pos-tr); --_nb-mask-position: var(--_nb-mask-position-tr); } .nebo--bl, .av-nebo--bl { --_nb-curve-pos: var(--_nb-curve-pos-bl); --_nb-mask-position: var(--_nb-mask-position-bl); } .nebo--br, .av-nebo--br { --_nb-curve-pos: var(--_nb-curve-pos-br); --_nb-mask-position: var(--_nb-mask-position-br); } /* --- Shape shadow (SVG sibling) ---------------------------------------- */ /* Most positioning is set inline by JS based on the shaped element's * dimensions and offset. These rules just provide safe defaults so the * SVG never breaks layout if JS hasn't finished positioning yet. */ .av-shape-shadow-svg { position: absolute; pointer-events: none; overflow: visible; margin: 0; padding: 0; /* Speedup: the SVG is GPU-composited as its own layer, which avoids * repaints of the shaped element's surroundings when shadow updates. */ will-change: transform; }