/* ========================================================= HOST ========================================================= */ #lr-whatsapp-floating-host { position: absolute; top: 0; left: 0; width: 100%; height: 0; margin: 0; padding: 0; border: 0; pointer-events: none; overflow: visible; z-index: 9999; } /* ========================================================= LR WHATSAPP FLOATING BUTTON ========================================================= */ #lr-whatsapp-floating-button { /* ===================================================== ICONA ===================================================== */ --lr-wa-icon-size: 2vw; --lr-wa-icon-color: var(--e-global-color-secondary); --lr-wa-hover-icon-color: var(--e-global-color-text); /* ===================================================== PADDING ===================================================== */ --lr-wa-padding-top: 1vw; --lr-wa-padding-right: 1vw; --lr-wa-padding-bottom: 1vw; --lr-wa-padding-left: 1vw; /* ===================================================== BORDER RADIUS ===================================================== */ --lr-wa-border-radius: 50%; /* ===================================================== SOOMI LIQUID GLASS ===================================================== */ --lr-wa-glass-background: rgba(254, 249, 245, 0.20); --lr-wa-glass-background-reduced: rgba(254, 249, 245, 0.88); --lr-wa-glass-box-shadow: 0 0 12px 0 rgba(255, 255, 255, 0.25) inset, 0 0 4px 0 rgba(255, 255, 255, 1) inset; --lr-wa-glass-backdrop-fallback: blur(1px) brightness(1.1) contrast(1.1); --lr-wa-glass-backdrop-enhanced: url("#lr-liquid-glass-filter-v1") blur(1px) brightness(1.1) contrast(1.1); /* ===================================================== HOVER / ACTIVE ===================================================== */ --lr-wa-hover-scale: 1.06; --lr-wa-active-scale: 0.96; /* ===================================================== TRANSIZIONI ===================================================== */ --lr-wa-transition-duration: 0.25s; /* ===================================================== Z INDEX ===================================================== */ --lr-wa-z-index: 9999; /* ===================================================== STRUTTURA IMPORTANTE: nessuna transition / transform viene usata per seguire il footer. ===================================================== */ display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; line-height: 0; text-decoration: none !important; cursor: pointer; pointer-events: auto; z-index: var(--lr-wa-z-index); isolation: isolate; overflow: visible; -webkit-tap-highlight-color: transparent; /* * Nessuna animazione sulla posizione * dell'elemento principale. */ transition: none !important; transform: none !important; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { #lr-whatsapp-floating-button { --lr-wa-icon-size: 4vw; --lr-wa-padding-top: 2vw; --lr-wa-padding-right: 2vw; --lr-wa-padding-bottom: 2vw; --lr-wa-padding-left: 2vw; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { #lr-whatsapp-floating-button { --lr-wa-icon-size: 8vw; --lr-wa-padding-top: 4vw; --lr-wa-padding-right: 4vw; --lr-wa-padding-bottom: 4vw; --lr-wa-padding-left: 4vw; } } /* ========================================================= ELEMENTO VISUALE Hover e click sono confinati qui. La posizione del floating button non viene quindi contaminata dallo scale(). ========================================================= */ #lr-whatsapp-floating-button .lr-wa-visual { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; padding: var(--lr-wa-padding-top) var(--lr-wa-padding-right) var(--lr-wa-padding-bottom) var(--lr-wa-padding-left); margin: 0; /* ===================================================== LIQUID GLASS ===================================================== */ background: var(--lr-wa-glass-background) !important; box-shadow: var(--lr-wa-glass-box-shadow) !important; border: none !important; -webkit-backdrop-filter: var(--lr-wa-glass-backdrop-fallback) !important; backdrop-filter: var(--lr-wa-glass-backdrop-enhanced) !important; /* ===================================================== ASPETTO ===================================================== */ border-radius: var(--lr-wa-border-radius); color: var(--lr-wa-icon-color) !important; line-height: 0; overflow: visible; pointer-events: none; transform: scale(1); transform-origin: center center; /* ===================================================== TRANSIZIONI SOLO VISUALI ===================================================== */ transition: color var(--lr-wa-transition-duration) ease, transform var(--lr-wa-transition-duration) ease, box-shadow var(--lr-wa-transition-duration) ease, background-color var(--lr-wa-transition-duration) ease; } /* ========================================================= ICONA ========================================================= */ #lr-whatsapp-floating-button .lr-wa-icon { display: block !important; width: var(--lr-wa-icon-size) !important; height: var(--lr-wa-icon-size) !important; min-width: var(--lr-wa-icon-size); min-height: var(--lr-wa-icon-size); max-width: none !important; max-height: none !important; flex: 0 0 var(--lr-wa-icon-size); color: inherit !important; fill: currentColor !important; stroke: none !important; overflow: visible; pointer-events: none; opacity: 1 !important; visibility: visible !important; position: relative; z-index: 1; } #lr-whatsapp-floating-button .lr-wa-icon path { display: block; fill: currentColor !important; stroke: none !important; opacity: 1 !important; visibility: visible !important; } /* ========================================================= HOVER ========================================================= */ @media (hover: hover) and (pointer: fine) { #lr-whatsapp-floating-button:hover .lr-wa-visual { background: var(--lr-wa-glass-background) !important; box-shadow: var(--lr-wa-glass-box-shadow) !important; color: var(--lr-wa-hover-icon-color) !important; transform: scale(var(--lr-wa-hover-scale)); } } /* ========================================================= ACTIVE ========================================================= */ #lr-whatsapp-floating-button:active .lr-wa-visual { color: var(--lr-wa-hover-icon-color) !important; transform: scale(var(--lr-wa-active-scale)); } /* ========================================================= FOCUS ========================================================= */ #lr-whatsapp-floating-button:focus { outline: none; } #lr-whatsapp-floating-button:focus-visible .lr-wa-visual { outline: 3px solid rgba(37, 211, 102, 0.35); outline-offset: 4px; } /* ========================================================= VISITED ========================================================= */ #lr-whatsapp-floating-button:visited .lr-wa-visual { color: var(--lr-wa-icon-color) !important; } /* ========================================================= REDUCED TRANSPARENCY ========================================================= */ @media (prefers-reduced-transparency: reduce) { #lr-whatsapp-floating-button .lr-wa-visual { background: var(--lr-wa-glass-background-reduced) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { #lr-whatsapp-floating-button .lr-wa-visual { transition: none !important; } } /* ========================================================= SAFE INITIAL POSITION Evita un frame non posizionato prima dell'avvio JS. Il controller sovrascrive questi valori in base al config. ========================================================= */ #lr-whatsapp-floating-button { position: fixed; right: 30px; bottom: 30px; left: auto; top: auto; }