/* Hello Care Consulting -- floating "Chat with Hellocare" WhatsApp button. Loaded on every public page next to search-widget.css; the button itself is created by whatsapp-float.js. Sits bottom-left because the search trigger owns bottom-right. Starts hidden; the script reveals it when no WhatsApp CTA or form is on screen. */ .wa-float { position: fixed; left: 20px; bottom: 20px; z-index: 900; width: 52px; height: 52px; border-radius: 999px; /* WhatsApp green (not the brand gold) so the channel is recognisable at a glance; navy on #25D366 is ~10:1 contrast. */ background: #25D366; color: var(--navy, #141B2C); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(15, 21, 36, 0.32); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .wa-float.is-visible { opacity: 1; visibility: visible; transform: none; } .wa-float:hover { background: #3EE07A; } .wa-float:focus-visible { outline: 2px solid var(--gold, var(--accent, #A0762F)); outline-offset: 3px; } .wa-float svg { width: 26px; height: 26px; } /* Step aside while the mobile slide-in menu is open (nav.js / homepage inline script put .mm-lock on ). */ body.mm-lock .wa-float { opacity: 0; visibility: hidden; } @media (max-width: 640px) { .wa-float { left: 16px; bottom: 16px; } } @media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } } @media print { .wa-float { display: none; } }