:root {
--joinchat-ico: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M3.516%203.516c4.686-4.686%2012.284-4.686%2016.97%200s4.686%2012.283%200%2016.97a12%2012%200%200%201-13.754%202.299l-5.814.735a.392.392%200%200%201-.438-.44l.748-5.788A12%2012%200%200%201%203.517%203.517zm3.61%2017.043.3.158a9.85%209.85%200%200%200%2011.534-1.758c3.843-3.843%203.843-10.074%200-13.918s-10.075-3.843-13.918%200a9.85%209.85%200%200%200-1.747%2011.554l.16.303-.51%203.942a.196.196%200%200%200%20.219.22zm6.534-7.003-.933%201.164a9.84%209.84%200%200%201-3.497-3.495l1.166-.933a.79.79%200%200%200%20.23-.94L9.561%206.96a.79.79%200%200%200-.924-.445l-2.023.524a.797.797%200%200%200-.588.88%2011.754%2011.754%200%200%200%2010.005%2010.005.797.797%200%200%200%20.88-.587l.525-2.023a.79.79%200%200%200-.445-.923L14.6%2013.327a.79.79%200%200%200-.94.23z%22%2F%3E%3C%2Fsvg%3E");
--joinchat-font: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, "Helvetica Neue", sans-serif;
}
.joinchat {
--sep: 20px;
--bottom: var(--sep);
--s: 60px;
--h: calc(.5 * var(--s));
--ch: 142;
--cs: 70%;
--cl: 49%;
--bw: 1;
--text: hsl(0deg 0% clamp(0%, 1000% * var(--bw), 100%) / clamp(70%, 1000% * var(--bw), 100%));
--hover: hsl(var(--ch) var(--cs) calc(20% + var(--cl)));
--color: hsl(var(--ch) var(--cs) var(--cl));
display: none;
position: fixed;
z-index: 9000;
right: var(--sep);
bottom: var(--bottom);
font: 16px/1.625em var(--joinchat-font);
letter-spacing: 0;
animation: joinchat_show 500ms cubic-bezier(0.18, 0.89, 0.32, 1.28) 10ms both;
transform: scale3d(0, 0, 0);
transform-origin: calc(-.5 * var(--s)) calc(-.25 * var(--s));
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
touch-action: manipulation;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgb(0 0 0 / 0%);
contain: style;
}
.joinchat *,
.joinchat *::before,
.joinchat *::after {
box-sizing: border-box;
}
.joinchat--show {
display: block;
transform: scale3d(1, 1, 1);
}
.joinchat--left {
right: auto;
left: var(--sep);
}
.joinchat--noanim {
animation: none;
}
.joinchat__button {
position: absolute;
z-index: 2;
bottom: 8px;
right: 8px;
height: var(--s);
width: var(--s);
background: #25d366 var(--joinchat-ico) center / 60% no-repeat;
color: inherit;
border-radius: 50%;
box-shadow: 1px 6px 24px 0 rgba(7, 94, 84, 0.24);
cursor: pointer;
transition: background-color 0.2s linear;
}
.joinchat__button:hover {
background-color: #128c7e
}
.joinchat__button:active {
background-color: #128c7e;
transition: none;
}
.joinchat--left .joinchat__button {
right: auto;
left: 8px;
}
.joinchat__button__ico {
position: absolute;
inset: 0;
display: flex;
border-radius: 50%;
overflow: hidden;
color: var(--text) !important;
}
.joinchat__button__ico svg {
width: var(--ico-size, 100%);
height: var(--ico-size, 100%);
margin: calc(.5 * (100% - var(--ico-size, 100%)));
}
.joinchat__button:has(.joinchat__button__ico) {
background: var(--color);
box-shadow: 1px 6px 24px 0 hsl(var(--ch) var(--cs) calc(-10% + var(--cl)) / 24%);
}
.joinchat__button:has(.joinchat__button__ico):hover,
.joinchat__button:has(.joinchat__button__ico):active {
background: var(--hover);
}
.joinchat__button__image {
position: absolute;
inset: 1px;
border-radius: 50%;
overflow: hidden;
opacity: 0;
}
.joinchat__button__image img,
.joinchat__button__image video {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.joinchat--show .joinchat__button__image {
animation: joinchat_image_loop 20s linear 5s infinite normal both;
}
.joinchat--img .joinchat__button__image {
opacity: 1;
animation: none;
}
.joinchat__tooltip {
position: absolute;
top: calc(-16px + var(--h));
right: calc(16px + var(--s));
max-width: calc(100vw - 45px - var(--s));
height: 32px;
padding: 0 14px;
border: none;
border-radius: 16px;
background: #fff;
color: rgba(0, 0, 0, 0.8);
line-height: 31px;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease-out 0.4s;
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
pointer-events: none;
}
.joinchat__tooltip::after {
content: '';
display: block;
position: absolute;
top: 10px;
right: -6px;
border: 8px solid transparent;
border-width: 6px 0 6px 8px;
border-left-color: #fff;
}
.joinchat__tooltip div {
width: -moz-max-content;
width: max-content;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.joinchat--tooltip .joinchat__tooltip {
animation: joinchat_tootlip 20s linear 5s 1 normal both;
}
.joinchat--left .joinchat__tooltip {
right: auto;
left: calc(16px + var(--s));
}
.joinchat--left .joinchat__tooltip::after {
left: -6px;
right: auto;
border-color: transparent;
border-width: 6px 8px 6px 0;
border-right-color: #fff;
}
.joinchat__qr {
position: absolute;
z-index: 2;
bottom: calc(24px + var(--s));
right: 8px;
display: none;
flex-direction: column-reverse;
width: 228px;
min-height: 200px;
padding: 14px 14px 10px;
border: none;
border-radius: 16px;
background: #fff;
color: rgba(0, 0, 0, 0.8);
text-align: center;
white-space: nowrap;
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
animation: joinchat_badge_in 400ms cubic-bezier(0.11, 0.84, 0.83, 1.01) 500ms both;
pointer-events: none;
}
.joinchat__qr::after {
content: '';
display: block;
position: absolute;
bottom: -6px;
right: calc(-6px + var(--h));
border: 8px solid transparent;
border-width: 8px 6px 0;
border-top-color: #fff;
}
.joinchat--left .joinchat__qr {
left: 8px;
right: auto;
}
.joinchat--left .joinchat__qr::after {
left: calc(-6px + var(--h));
right: auto;
}
.joinchat__qr div {
font-size: 14px;
color: #4a4a4a;
overflow: hidden;
text-overflow: ellipsis;
}
.joinchat__qr canvas {
display: block;
width: 200px;
height: 200px;
margin: 0;
image-rendering: pixelated;
}
@keyframes joinchat_show {
from {
transform: scale3d(0, 0, 0);
}
to {
transform: scale3d(1, 1, 1);
}
}
@keyframes joinchat_badge_in {
from {
opacity: 0;
transform: translate3d(0, 50px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes joinchat_image_loop {
0% {
opacity: 0;
}
3%,
20% {
opacity: 1;
}
25%,
100% {
opacity: 0;
}
}
@keyframes joinchat_tootlip {
0% {
opacity: 0;
transform: scale3d(1, 0, 1);
}
1%,
20% {
opacity: 1;
transform: scale3d(1, 1, 1);
}
25%,
100% {
opacity: 0;
transform: scale3d(1, 1, 1);
}
}
.joinchat__woo-btn__wrapper {
clear: both;
}
.joinchat__woo-btn {
--s: 40px;
display: inline-block;
box-sizing: border-box;
height: var(--s);
max-width: 100%;
padding: 0 calc(.5 * var(--s)) 0 var(--s);
background: #25d366 var(--joinchat-ico) calc(.2 * var(--s)) 50% no-repeat;
background-size: calc(.6 * var(--s));
color: #fff;
border-radius: calc(.5 * var(--s));
font: 700 calc(.35 * var(--s))/var(--s) var(--joinchat-font);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
cursor: pointer;
transition: background-color 200ms;
}
.joinchat__woo-btn:empty {
padding-right: 0;
}
.joinchat__woo-btn:hover {
background-color: #128c7e;
}
@media (orientation: portrait) and (width >=481px),
(orientation: landscape) and (height >=481px) {
.joinchat--mobile {
display: none !important;
}
}
@media (width <=767px) {
.joinchat--footer-bar {
--bottom: 76px !important;
}
}
@media (width <=480px),
(orientation: landscape) and (height <=480px) {
.joinchat {
--sep: 6px
}
}
@media (hover: hover) {
.joinchat__button:hover .joinchat__tooltip {
opacity: 1;
animation: none;
transition: opacity 0.2s;
}
.joinchat--btn .joinchat__button:hover~.joinchat__qr {
display: flex;
}
}
@media (prefers-reduced-motion) {
.joinchat {
animation: none
}
}