/* Floating WhatsApp and accessibility buttons. Split out of widgets.ts so it is fetched once and cached, instead of being inlined on every page — and then paid for a second time inside the RSC payload, which is where an inlined string really costs. */ /* The artwork is a finished circular badge, so the button itself is just a transparent box — no gradient, border or glass behind it to peek out from under the icon's own edge. Size and inset are custom properties because the consent bubble sits in the gap between the two buttons and has to know how much room they take. */ .vn-fab{position:fixed;bottom:var(--vn-fab-bottom,22px);width:var(--vn-fab-size,58px);height:var(--vn-fab-size,58px);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;border:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 6px 16px rgba(0,0,0,.22));transition:opacity .2s ease,filter .28s ease,transform .2s cubic-bezier(.34,1.56,.64,1),bottom .35s cubic-bezier(.34,1.3,.64,1)} /* Layers are placed by percentage of the button, mirroring where the source artwork sits on its own 2900-unit canvas, so the fill lines up inside the outline at any size. */ .vn-fab__layer{position:absolute;display:block;pointer-events:none;transition:transform .28s cubic-bezier(.34,1.4,.64,1)} .vn-fab__layer--full{inset:0;width:100%;height:100%;object-fit:contain} .vn-fab__layer--fill{left:10.034%;top:7.862%;width:81.724%;height:81.69%} .vn-fab__layer--mark{left:.517%;top:0;width:99.034%;height:100%} /* A ring that blooms out from under the badge on hover — the whole effect is one soft pulse plus a small lift, nothing that jumps. */ .vn-fab::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--vn-fab-ring,rgba(255,255,255,.7));opacity:0;transform:scale(.9);transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1);pointer-events:none} .vn-fab:hover{filter:drop-shadow(0 12px 24px var(--vn-fab-glow,rgba(0,0,0,.28)))} .vn-fab:hover .vn-fab__layer{transform:translateY(-3px) scale(1.06)} .vn-fab:hover::after{opacity:.55;transform:scale(1.18)} .vn-fab:focus-visible{outline:none} .vn-fab:focus-visible::after{opacity:.9;transform:scale(1.12);border-width:3px} @media (prefers-reduced-motion:reduce){ .vn-fab__layer,.vn-fab::after{transition:none} .vn-fab:hover .vn-fab__layer{transform:none} .vn-fab:hover::after{opacity:0} } /* The product page's sticky buy bar slides up from the bottom on the same corner these float in. Without this the WhatsApp button sits on top of the add-to-cart button — the two things a shopper most wants to press. */ body{--vn-fab-bottom:22px;--vn-fab-size:58px;--vn-fab-inset:22px} body.vn-buybar-up{--vn-fab-bottom:6.4rem} /* Out of the way while the keyboard is up. These are fixed to the bottom of the screen, and iOS pins fixed elements to the visual viewport once the keyboard opens — so instead of staying at the foot of the page they ride up with it and land in the middle of the form being filled in. Faded rather than removed, so they slide back on the same transition they left on; `pointer-events` is what actually matters, since a badge at 0 opacity still swallows the tap under it. `body.vn-keyboard-open` is set in widgets.js. */ body.vn-keyboard-open .vn-fab{opacity:0;pointer-events:none;transform:translateY(0.75rem)} /* On a phone the badges are pulled in and down a size, and let a little of the page through, so the consent bubble has room between them and the pair reads as chrome rather than as two more things competing for a tap. */ @media (max-width:34rem){ body{--vn-fab-size:48px;--vn-fab-inset:16px} .vn-fab{opacity:.82} } /* The `