.dante-whatsapp {
--dante-wa-size: 60px;
--dante-wa-offset: 24px;
position: fixed;
z-index: 999999;
bottom: calc( var( --dante-wa-offset ) + env( safe-area-inset-bottom, 0px ) );
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 15px;
line-height: 1;
isolation: isolate;
}
.dante-whatsapp *,
.dante-whatsapp *::before,
.dante-whatsapp *::after {
box-sizing: border-box;
}
.dante-whatsapp--right {
right: calc( var( --dante-wa-offset ) + env( safe-area-inset-right, 0px ) );
}
.dante-whatsapp--left {
left: calc( var( --dante-wa-offset ) + env( safe-area-inset-left, 0px ) );
}
.dante-whatsapp__link {
display: inline-flex;
position: relative;
align-items: center;
justify-content: center;
gap: 10px;
min-width: var( --dante-wa-size );
height: var( --dante-wa-size );
padding: 0 20px 0 16px;
border: 1px solid rgba( 255, 255, 255, 0.26 );
border-radius: 999px;
background: var( --dante-wa-accent, #25d366 );
box-shadow:
0 4px 10px rgba( 19, 63, 38, 0.13 ),
0 14px 32px rgba( 15, 81, 43, 0.28 );
color: #ffffff;
text-decoration: none !important;
transform: translateZ( 0 );
transition: transform 180ms cubic-bezier( 0.2, 0.8, 0.2, 1 ), box-shadow 180ms ease, filter 180ms ease;
-webkit-tap-highlight-color: transparent;
animation: dante-whatsapp-arrive 520ms cubic-bezier( 0.16, 1, 0.3, 1 ) both;
}
.dante-whatsapp__link:hover {
box-shadow:
0 6px 13px rgba( 19, 63, 38, 0.14 ),
0 18px 38px rgba( 15, 81, 43, 0.33 );
color: #ffffff;
filter: saturate( 1.08 ) brightness( 0.97 );
text-decoration: none;
transform: translateY( -3px );
}
.dante-whatsapp__link:active {
box-shadow: 0 8px 18px rgba( 15, 81, 43, 0.25 );
transform: translateY( -1px ) scale( 0.98 );
}
.dante-whatsapp__link:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 3px;
box-shadow: 0 0 0 6px rgba( 13, 92, 47, 0.46 ), 0 16px 36px rgba( 15, 81, 43, 0.3 );
}
.dante-whatsapp__icon {
display: inline-flex;
position: relative;
z-index: 2;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: 0 0 auto;
color: currentColor;
}
.dante-whatsapp__icon svg {
display: block;
width: 30px;
height: 30px;
overflow: visible;
}
.dante-whatsapp__label {
position: relative;
z-index: 2;
font-size: 14px;
font-weight: 750;
letter-spacing: -0.012em;
line-height: 1;
white-space: nowrap;
}
.dante-whatsapp__halo {
position: absolute;
z-index: -1;
inset: -1px;
border: 2px solid var( --dante-wa-accent, #25d366 );
border-radius: inherit;
pointer-events: none;
animation: dante-whatsapp-halo 3.2s ease-out 1.2s infinite;
}
.dante-whatsapp__tooltip {
position: absolute;
top: 50%;
right: calc( 100% + 12px );
padding: 9px 11px;
border: 1px solid rgba( 255, 255, 255, 0.08 );
border-radius: 9px;
background: #17241c;
box-shadow: 0 9px 24px rgba( 12, 34, 21, 0.2 );
color: #ffffff;
font-size: 12px;
font-weight: 680;
line-height: 1;
opacity: 0;
pointer-events: none;
transform: translate( 5px, -50% );
transition: opacity 150ms ease, transform 150ms ease;
white-space: nowrap;
}
.dante-whatsapp__tooltip::after {
position: absolute;
top: 50%;
right: -5px;
width: 10px;
height: 10px;
background: #17241c;
content: "";
transform: translateY( -50% ) rotate( 45deg );
}
.dante-whatsapp--left .dante-whatsapp__tooltip {
right: auto;
left: calc( 100% + 12px );
transform: translate( -5px, -50% );
}
.dante-whatsapp--left .dante-whatsapp__tooltip::after {
right: auto;
left: -5px;
}
.dante-whatsapp--icon .dante-whatsapp__link {
width: var( --dante-wa-size );
padding: 0;
}
.dante-whatsapp--icon .dante-whatsapp__label {
display: none;
}
.dante-whatsapp--icon .dante-whatsapp__link:hover .dante-whatsapp__tooltip,
.dante-whatsapp--icon .dante-whatsapp__link:focus-visible .dante-whatsapp__tooltip {
opacity: 1;
transform: translate( 0, -50% );
}
.dante-whatsapp--pill .dante-whatsapp__tooltip {
display: none;
}
.dante-whatsapp .screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
border: 0;
clip: rect( 0, 0, 0, 0 );
clip-path: inset( 50% );
overflow: hidden;
white-space: nowrap;
}
@keyframes dante-whatsapp-arrive {
from { opacity: 0; transform: translateY( 16px ) scale( 0.88 ); }
to { opacity: 1; transform: translateY( 0 ) scale( 1 ); }
}
@keyframes dante-whatsapp-halo {
0% { opacity: 0.34; transform: scale( 0.94 ); }
72%, 100% { opacity: 0; transform: scale( 1.24 ); }
}
@media ( max-width: 480px ) {
.dante-whatsapp {
--dante-wa-size: 56px;
--dante-wa-offset: 16px;
}
.dante-whatsapp--pill .dante-whatsapp__link {
padding-inline: 14px 17px;
}
.dante-whatsapp--pill .dante-whatsapp__label {
font-size: 13px;
}
.dante-whatsapp__icon,
.dante-whatsapp__icon svg {
width: 28px;
height: 28px;
}
}
@media ( forced-colors: active ) {
.dante-whatsapp__link {
border: 2px solid ButtonText;
}
}
@media ( prefers-reduced-motion: reduce ) {
.dante-whatsapp__link,
.dante-whatsapp__halo,
.dante-whatsapp__tooltip {
animation: none !important;
transition: none !important;
}
}