/* WhatsApp snake-glow CTA — see resources/views/partials/wa-cta-styles.blade.php * * Two rules learned the hard way, do not reintroduce either: * 1. Gradient stops must fade to transparent GREEN (rgba(37,211,102,0)). The CSS * `transparent` keyword is transparent BLACK, which interpolates through grey. * 2. The outer halo uses box-shadow, NOT a blurred pseudo-element. `filter: blur()` * on a negative-z-index child of an `isolation: isolate` stacking context is * rasterised into its own layer and clipped to a RECTANGLE — that painted a * visible box around every button. box-shadow always follows border-radius. */ @property --wa-angle { syntax: ''; initial-value: 0deg; inherits: false; } .wa-cta{ --wa:#25D366; --wa-mid:#1EBE57; --wa-deep:#0B8A44; --wa-head:#c9ffe3; --wa-spin:2.8s; position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:.75rem; padding:1.15rem 2.6rem; border-radius:9999px; font-weight:800; font-size:1.0625rem; letter-spacing:.13em; text-transform:uppercase; line-height:1.15; color:#fff; text-decoration:none; text-align:center; cursor:pointer; background:linear-gradient(180deg,var(--wa) 0%,var(--wa-mid) 55%,var(--wa-deep) 100%); /* ambient halo — layered box-shadows, perfectly pill-shaped */ box-shadow: 0 0 12px rgba(37,211,102,.45), 0 0 28px rgba(37,211,102,.30), 0 0 54px rgba(37,211,102,.18), 0 10px 30px rgba(37,211,102,.22), 0 2px 8px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 6px rgba(0,0,0,.18); transition:transform .18s ease, box-shadow .25s ease; } .wa-cta:hover{ transform:translateY(-2px) scale(1.02); color:#fff; box-shadow: 0 0 16px rgba(37,211,102,.60), 0 0 38px rgba(37,211,102,.40), 0 0 70px rgba(37,211,102,.24), 0 12px 34px rgba(37,211,102,.28), 0 2px 8px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.30), inset 0 -2px 6px rgba(0,0,0,.18); } .wa-cta:active{ transform:translateY(0) scale(.99); } .wa-cta:focus-visible{ outline:3px solid #c9ffe3; outline-offset:3px; } /* the snake: bright head chasing around the border, masked to a ring. No filter here — this is what makes the effect move, and it stays artifact-free. */ .wa-cta::before{ content:""; position:absolute; inset:0; padding:3px; border-radius:inherit; z-index:-1; background:conic-gradient(from var(--wa-angle), rgba(37,211,102,0) 0deg, rgba(37,211,102,0) 200deg, var(--wa) 245deg, var(--wa-head) 285deg, #ffffff 296deg, var(--wa-head) 307deg, var(--wa) 345deg, rgba(37,211,102,0) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:wa-spin var(--wa-spin) linear infinite; } @keyframes wa-spin{ to{ --wa-angle:360deg; } } .wa-cta__icon{ width:1.5rem; height:1.5rem; flex:none; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)); } .wa-cta__label{ display:inline-block; } /* sizes */ .wa-cta--lg{ font-size:1.25rem; padding:1.5rem 3.25rem; gap:1rem; } .wa-cta--lg .wa-cta__icon{ width:1.85rem; height:1.85rem; } .wa-cta--sm{ font-size:.8125rem; padding:.7rem 1.4rem; gap:.5rem; letter-spacing:.1em; } .wa-cta--sm .wa-cta__icon{ width:1.15rem; height:1.15rem; } /* glow intensity */ .wa-cta--intense{ --wa-spin:2.2s; box-shadow: 0 0 16px rgba(37,211,102,.60), 0 0 36px rgba(37,211,102,.42), 0 0 68px rgba(37,211,102,.26), 0 12px 34px rgba(37,211,102,.26), 0 2px 8px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.30), inset 0 -2px 6px rgba(0,0,0,.20); } .wa-cta--subtle{ --wa-spin:3.6s; box-shadow: 0 0 8px rgba(37,211,102,.30), 0 0 20px rgba(37,211,102,.18), 0 8px 22px rgba(37,211,102,.16), 0 2px 6px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25); } .wa-cta--block{ display:flex; width:100%; } /* floating action button (mobile-first, always reachable) */ .wa-fab{ --wa:#25D366; --wa-deep:#0B8A44; --wa-head:#c9ffe3; position:fixed; right:1.25rem; bottom:1.25rem; z-index:50; width:3.9rem; height:3.9rem; border-radius:9999px; display:flex; align-items:center; justify-content:center; isolation:isolate; color:#fff; text-decoration:none; background:linear-gradient(180deg,var(--wa),var(--wa-deep)); box-shadow: 0 0 12px rgba(37,211,102,.50), 0 0 30px rgba(37,211,102,.32), 0 10px 26px rgba(37,211,102,.30), inset 0 1px 0 rgba(255,255,255,.30); transition:transform .2s ease; } .wa-fab:hover{ transform:scale(1.08); color:#fff; } .wa-fab:focus-visible{ outline:3px solid #c9ffe3; outline-offset:3px; } .wa-fab svg{ width:2.05rem; height:2.05rem; } .wa-fab::before{ content:""; position:absolute; inset:0; padding:3px; border-radius:inherit; z-index:-1; background:conic-gradient(from var(--wa-angle),rgba(37,211,102,0) 0 200deg, var(--wa) 245deg,var(--wa-head) 290deg,#fff 298deg,var(--wa-head) 306deg,var(--wa) 345deg,rgba(37,211,102,0) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:wa-spin 2.6s linear infinite; } /* pause the paint-heavy loop while off-screen (set by the observer in the partial) */ .wa-cta.wa-paused::before,.wa-fab.wa-paused::before{ animation-play-state:paused; } /* header instance: desktop only — on mobile the floating button already covers WhatsApp, and the header has to fit logo + burger menu */ .wa-cta--header{ display:none; } @media (min-width:768px){ .wa-cta--header{ display:inline-flex; } } @media (max-width:640px){ .wa-cta{ font-size:.9375rem; padding:1rem 1.6rem; letter-spacing:.1em; gap:.6rem; width:100%; } .wa-cta--lg{ font-size:1rem; padding:1.15rem 1.7rem; } .wa-cta--sm{ width:auto; } .wa-fab{ right:1rem; bottom:1rem; width:3.5rem; height:3.5rem; } .wa-fab svg{ width:1.85rem; height:1.85rem; } } @media (prefers-reduced-motion: reduce){ .wa-cta::before,.wa-fab::before{ animation:none; --wa-angle:296deg; } .wa-cta:hover,.wa-fab:hover{ transform:none; } }