/* ==================================================
BOTÃO WHATSAPP
================================================== */
.whatsapp-palavra-antiga {
position: fixed;
right: 20px;
/* Compatível com smartphones com barra inferior */
bottom: calc(20px + env(safe-area-inset-bottom));
width: 64px;
height: 64px;
border-radius: 50%;
background: #25D366;
display: flex;
align-items: center;
justify-content: center;
z-index: 999999;
text-decoration: none;
box-shadow:
0 5px 15px rgba(0,0,0,0.25),
0 10px 30px rgba(0,0,0,0.16);
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease;
-webkit-tap-highlight-color: transparent;
}
/* ==================================================
LOGÓTIPO
================================================== */
.radio-whatsapp-logo {
width: 52px;
height: 52px;
overflow: visible;
}
/* MICROFONE */
.microphone-body {
fill: #ffffff;
}
/* OLHOS */
.microphone-face {
fill: #25D366;
}
/* SORRISO */
.microphone-smile {
fill: none;
stroke: #25D366;
stroke-width: 2.8;
stroke-linecap: round;
}
/* SUPORTE + BASE */
.microphone-support {
fill: none;
stroke: #ffffff;
stroke-width: 5;
stroke-linecap: round;
}
/* ONDAS DE RÁDIO */
.radio-wave {
fill: none;
stroke: #ffffff;
stroke-width: 3.5;
stroke-linecap: round;
}
.outer-wave {
stroke-width: 3;
opacity: 0.75;
}
/* CHAMA */
.logo-flame {
fill: #FFD447;
}
/* ==================================================
EFEITOS
================================================== */
.whatsapp-palavra-antiga:hover {
transform: scale(1.08);
background: #20bd5a;
box-shadow:
0 7px 18px rgba(0,0,0,0.27),
0 12px 32px rgba(37,211,102,0.25);
}
.whatsapp-palavra-antiga:active {
transform: scale(0.94);
}
/* ==================================================
PEQUENA ANIMAÇÃO DAS ONDAS
================================================== */
.whatsapp-palavra-antiga:hover .outer-wave {
animation: radio-wave-animation 1.1s infinite ease-in-out;
}
@keyframes radio-wave-animation {
0% {
opacity: 0.35;
}
50% {
opacity: 1;
}
100% {
opacity: 0.35;
}
}
/* ==================================================
SMARTPHONES
================================================== */
@media (max-width: 600px) {
.whatsapp-palavra-antiga {
width: 60px;
height: 60px;
right: 14px;
bottom: calc(
14px + env(safe-area-inset-bottom)
);
}
.radio-whatsapp-logo {
width: 48px;
height: 48px;
}
}
A carregar…
