/* |-------------------------------------------------------------------------- | Global ShopCore WhatsApp Float |-------------------------------------------------------------------------- | | Fixed permanently to the right side. | No dragging. | No manual/custom positioning. | No icon movement. | */ :root{ --sc-wa-right:24px; --sc-wa-bottom:84px; --sc-wa-z:2100; --sc-wa-tablet-right:18px; --sc-wa-tablet-bottom:102px; --sc-wa-mobile-right:14px; --sc-wa-mobile-bottom:104px; --sc-wa-small-right:10px; --sc-wa-small-bottom:98px; --sc-wa-green:#25d366; --sc-wa-green-dark:#1fb857; --sc-wa-text:#17233b; --sc-wa-soft:#64748b; --sc-wa-white:#ffffff; --sc-wa-shadow: 0 15px 38px rgba(15,23,42,.18), 0 5px 14px rgba(15,23,42,.08); } /* |-------------------------------------------------------------------------- | Fixed Wrapper |-------------------------------------------------------------------------- */ .sc-whatsapp-float{ position:fixed !important; right:var(--sc-wa-right) !important; bottom:calc( var(--sc-wa-bottom) + env(safe-area-inset-bottom) ) !important; left:auto !important; top:auto !important; z-index:var(--sc-wa-z); width:56px; height:56px; display:block; pointer-events:auto; /* |-------------------------------------------------------------------------- | No dragging |-------------------------------------------------------------------------- */ touch-action:auto; user-select:none; -webkit-user-select:none; cursor:default; /* |-------------------------------------------------------------------------- | Prevent old drag classes/styles affecting position |-------------------------------------------------------------------------- */ transform:none !important; } /* |-------------------------------------------------------------------------- | Ignore Old Draggable Classes |-------------------------------------------------------------------------- */ .sc-whatsapp-float.is-custom-position, .sc-whatsapp-float.is-dragging{ position:fixed !important; right:var(--sc-wa-right) !important; bottom:calc( var(--sc-wa-bottom) + env(safe-area-inset-bottom) ) !important; left:auto !important; top:auto !important; transform:none !important; cursor:default; } /* |-------------------------------------------------------------------------- | Badge |-------------------------------------------------------------------------- */ .sc-whatsapp-float-badge{ position:absolute; top:50%; right:calc(100% + 11px); width:max-content; max-width:210px; padding:11px 15px; border:1px solid rgba(226,232,240,.92); border-radius:15px; background:rgba(255,255,255,.97); color:var(--sc-wa-text); box-shadow: 0 10px 28px rgba(15,23,42,.11), 0 2px 6px rgba(15,23,42,.04); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); opacity:0; visibility:hidden; transform: translateY(-50%) translateX(8px) scale(.97); transform-origin:right center; pointer-events:none; transition: opacity .22s ease, visibility .22s ease, transform .22s ease; white-space:nowrap; } /* |-------------------------------------------------------------------------- | Badge Visible |-------------------------------------------------------------------------- */ .sc-whatsapp-float.is-badge-visible .sc-whatsapp-float-badge, .sc-whatsapp-float:hover .sc-whatsapp-float-badge{ opacity:1; visibility:visible; transform: translateY(-50%) translateX(0) scale(1); } /* |-------------------------------------------------------------------------- | Badge Typography |-------------------------------------------------------------------------- */ .sc-whatsapp-float-badge strong{ display:block; margin:0; overflow:hidden; color:var(--sc-wa-text); font-size:11px; font-weight:800; line-height:1.2; text-overflow:ellipsis; } .sc-whatsapp-float-badge small{ display:block; margin-top:2px; overflow:hidden; color:var(--sc-wa-soft); font-size:8.5px; font-weight:600; line-height:1.2; text-overflow:ellipsis; } /* |-------------------------------------------------------------------------- | WhatsApp Button |-------------------------------------------------------------------------- */ .sc-whatsapp-float-button{ position:relative; width:56px; height:56px; display:flex; align-items:center; justify-content:center; border:0; border-radius:50%; background:var(--sc-wa-green); color:var(--sc-wa-white); text-decoration:none; box-shadow:var(--sc-wa-shadow); cursor:pointer; /* |-------------------------------------------------------------------------- | Icon stays in one position |-------------------------------------------------------------------------- */ transform:none !important; animation:none !important; transition: background .18s ease, box-shadow .18s ease; -webkit-tap-highlight-color:transparent; } /* |-------------------------------------------------------------------------- | Hover |-------------------------------------------------------------------------- */ .sc-whatsapp-float-button:hover{ background:var(--sc-wa-green-dark); color:var(--sc-wa-white); text-decoration:none; transform:none !important; box-shadow: 0 18px 40px rgba(15,23,42,.21), 0 5px 14px rgba(15,23,42,.09); } .sc-whatsapp-float-button:active{ background:var(--sc-wa-green-dark); transform:none !important; } /* |-------------------------------------------------------------------------- | Focus |-------------------------------------------------------------------------- */ .sc-whatsapp-float-button:focus-visible{ outline:3px solid rgba(37,211,102,.25); outline-offset:4px; } /* |-------------------------------------------------------------------------- | Pulse Ring |-------------------------------------------------------------------------- | | This does NOT move the WhatsApp icon. | */ .sc-whatsapp-float-button::before{ content:""; position:absolute; inset:-5px; border:2px solid rgba(37,211,102,.25); border-radius:50%; pointer-events:none; animation:scWhatsappPulse 2.7s ease-out infinite; } /* |-------------------------------------------------------------------------- | Highlight Layer |-------------------------------------------------------------------------- */ .sc-whatsapp-float-button::after{ content:""; position:absolute; inset:0; border-radius:50%; background: linear-gradient( 180deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,0) 58% ); pointer-events:none; } /* |-------------------------------------------------------------------------- | WhatsApp Icon |-------------------------------------------------------------------------- */ .sc-whatsapp-float-icon{ position:relative; z-index:2; width:25px; height:25px; display:flex; align-items:center; justify-content:center; transform:none !important; } .sc-whatsapp-float-icon svg{ display:block; width:100%; height:100%; fill:currentColor; transform:none !important; } /* |-------------------------------------------------------------------------- | Pulse Animation |-------------------------------------------------------------------------- */ @keyframes scWhatsappPulse{ 0%{ transform:scale(.92); opacity:.72; } 70%{ transform:scale(1.18); opacity:0; } 100%{ transform:scale(1.18); opacity:0; } } /* |-------------------------------------------------------------------------- | Tablet |-------------------------------------------------------------------------- */ @media(max-width:900px){ .sc-whatsapp-float, .sc-whatsapp-float.is-custom-position, .sc-whatsapp-float.is-dragging{ right:var(--sc-wa-tablet-right) !important; bottom:calc( var(--sc-wa-tablet-bottom) + env(safe-area-inset-bottom) ) !important; left:auto !important; top:auto !important; } } /* |-------------------------------------------------------------------------- | Mobile |-------------------------------------------------------------------------- */ @media(max-width:620px){ .sc-whatsapp-float, .sc-whatsapp-float.is-custom-position, .sc-whatsapp-float.is-dragging{ right:var(--sc-wa-mobile-right) !important; bottom:calc( var(--sc-wa-mobile-bottom) + env(safe-area-inset-bottom) ) !important; left:auto !important; top:auto !important; width:49px; height:49px; } .sc-whatsapp-float-button{ width:49px; height:49px; } .sc-whatsapp-float-icon{ width:22px; height:22px; } .sc-whatsapp-float-badge{ right:calc(100% + 9px); max-width:165px; padding:9px 12px; border-radius:13px; } .sc-whatsapp-float-badge strong{ font-size:9.5px; } .sc-whatsapp-float-badge small{ font-size:7.5px; } } /* |-------------------------------------------------------------------------- | Small Mobile |-------------------------------------------------------------------------- */ @media(max-width:420px){ .sc-whatsapp-float, .sc-whatsapp-float.is-custom-position, .sc-whatsapp-float.is-dragging{ right:var(--sc-wa-small-right) !important; bottom:calc( var(--sc-wa-small-bottom) + env(safe-area-inset-bottom) ) !important; left:auto !important; top:auto !important; width:46px; height:46px; } .sc-whatsapp-float-button{ width:46px; height:46px; } .sc-whatsapp-float-icon{ width:21px; height:21px; } .sc-whatsapp-float-badge{ right:calc(100% + 8px); max-width:145px; padding:8px 10px; border-radius:12px; } .sc-whatsapp-float-badge strong{ font-size:8.8px; } .sc-whatsapp-float-badge small{ font-size:7px; } } /* |-------------------------------------------------------------------------- | Very Small Mobile |-------------------------------------------------------------------------- */ @media(max-width:350px){ .sc-whatsapp-float, .sc-whatsapp-float.is-custom-position, .sc-whatsapp-float.is-dragging{ right:8px !important; bottom:calc( 94px + env(safe-area-inset-bottom) ) !important; left:auto !important; top:auto !important; width:44px; height:44px; } .sc-whatsapp-float-button{ width:44px; height:44px; } .sc-whatsapp-float-icon{ width:20px; height:20px; } .sc-whatsapp-float-badge{ max-width:130px; } } /* |-------------------------------------------------------------------------- | Short Desktop Screens |-------------------------------------------------------------------------- */ @media(max-height:700px) and (min-width:901px){ .sc-whatsapp-float, .sc-whatsapp-float.is-custom-position, .sc-whatsapp-float.is-dragging{ bottom:60px !important; } } /* |-------------------------------------------------------------------------- | Reduced Motion |-------------------------------------------------------------------------- */ @media(prefers-reduced-motion:reduce){ .sc-whatsapp-float, .sc-whatsapp-float *, .sc-whatsapp-float *::before, .sc-whatsapp-float *::after{ animation:none !important; transition:none !important; } }