/** * Signal Pack Global Components — WhatsApp * Uses existing brand CSS variables with safe fallbacks (same pattern * as the other components in this plugin). Depends on buttons.css for * the .spgc-btn-whatsapp inline button styling. */ .spgc-wa-floating { position: fixed; right: 24px; bottom: 24px; z-index: 8900; /* below drawers/modals/search (9000+) and toasts, above ordinary page content */ width: 56px; height: 56px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 16px 34px rgba(23, 22, 46, 0.18); transition: background 0.2s ease, transform 0.2s ease; text-decoration: none; } .spgc-wa-floating:hover { background: #1ebc59; transform: scale(1.05); } .spgc-wa-floating svg { width: 28px; height: 28px; fill: #fff; } .spgc-wa-floating:focus-visible { outline: 2px solid var(--ink, #17162e); outline-offset: 3px; } /* Mobile: lift above the mobile sticky action bar (see 11-mobile-sticky pattern in the static component library — sticky bars run ~64-70px tall) and pull in from the edge so it never overlaps the cookie banner or a mobile nav's safe area. */ @media (max-width: 880px) { .spgc-wa-floating { right: 16px; bottom: 82px; /* clears a mobile sticky action bar sitting at the very bottom */ width: 50px; height: 50px; } .spgc-wa-floating svg { width: 24px; height: 24px; } } /* If a page has no mobile sticky bar (no [data-spgc-mobile-sticky] present), themes can add this class to the to drop the button back down near the true bottom edge instead of leaving a large gap. */ body.spgc-no-mobile-sticky .spgc-wa-floating { bottom: 20px; }