.wa-widget { position: fixed; right: 25px; bottom: 25px; z-index: 999999; font-family: Arial, Helvetica, sans-serif; } /* ========================================= TOMBOL UTAMA 100 x 100 ========================================= */ .wa-toggle { width: clamp(68px, 6vw, 100px) !important; height: clamp(68px, 6vw, 100px) !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: #25D366 !important; color: #ffffff !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; box-shadow: 0 8px 25px rgba(0,0,0,.25); transition: transform .25s ease, box-shadow .25s ease; } /* ========================================= ICON WHATSAPP UTAMA ========================================= */ .wa-toggle > i.fa-whatsapp { display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-family: "Font Awesome 6 Brands" !important; font-style: normal !important; font-weight: 400 !important; font-size: clamp(45px, 4.2vw, 70px) !important; line-height: 1 !important; } .wa-toggle { } .wa-toggle > i.fa-whatsapp, .wa-toggle > i.fa-whatsapp::before { } /* Paksa pseudo element Font Awesome */ .wa-toggle > i.fa-whatsapp::before { display: inline-block !important; font-size: 70px !important; line-height: 1 !important; color: #ffffff !important; } /* ========================================= HOVER ========================================= */ .wa-toggle:hover { transform: scale(1.08); box-shadow: 0 12px 35px rgba(0,0,0,.30); } /* ========================================= POPUP ========================================= */ .wa-menu { position: absolute; right: 0; bottom: 115px; width: 320px; background: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 15px 45px rgba(0,0,0,.20); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(15px) scale(.96); transform-origin: bottom right; transition: opacity .25s ease, transform .25s ease, visibility .25s ease; } .wa-menu.active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } /* ========================================= HEADER ========================================= */ .wa-header { background: #25D366; color: #ffffff; padding: 17px 18px; display: flex; align-items: center; justify-content: space-between; } .wa-header strong { display: block; font-size: 17px; margin-bottom: 4px; } .wa-header small { display: block; font-size: 12px; opacity: .9; } /* ========================================= CLOSE ========================================= */ .wa-close { width: 30px; height: 30px; padding: 0; margin: 0; border: 0; background: transparent; color: #ffffff; font-size: 25px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* ========================================= CONTACT LIST ========================================= */ .wa-contacts { padding: 10px; } /* ========================================= CONTACT ========================================= */ .wa-contact { width: 100%; padding: 13px 12px; margin: 0; border: 0; background: #ffffff; border-radius: 12px; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; transition: background .2s ease, transform .2s ease; } .wa-contact:hover { background: #f2f2f2; transform: translateX(2px); } /* ========================================= ICON KONTAK ========================================= */ .wa-contact-icon { width: 43px; height: 43px; min-width: 43px; border-radius: 50%; background: #25D366; color: #ffffff; display: flex; align-items: center; justify-content: center; } .wa-contact-icon i.fa-whatsapp { font-family: "Font Awesome 6 Brands" !important; font-size: 21px !important; font-weight: 400 !important; color: #ffffff !important; } /* ========================================= INFO ========================================= */ .wa-contact-info { flex: 1; } .wa-contact-name { display: block; color: #222222; font-size: 14px; font-weight: 700; margin-bottom: 3px; } .wa-contact-number { display: block; color: #777777; font-size: 12px; } /* ========================================= ARROW ========================================= */ .wa-contact-arrow { color: #999999; font-size: 20px; } /* ========================================= MOBILE ========================================= */ @media (max-width: 480px) { .wa-widget { right: 15px; bottom: 15px; } .wa-toggle { width: 100px !important; height: 100px !important; } .wa-toggle > i.fa-whatsapp { font-size: 70px !important; } .wa-toggle > i.fa-whatsapp::before { font-size: 70px !important; } .wa-menu { right: 0; bottom: 115px; width: calc(100vw - 30px); max-width: 320px; } }