:root {
--avjapan-tg-bottom: 96px;
--avjapan-tg-right: 18px;
--avjapan-tg-red: #ff1744;
--avjapan-tg-hot: #ffccd6;
--avjapan-tg-deep: #65000f;
}
.avjapan-telegram-banner {
position: fixed;
right: var(--avjapan-tg-right);
bottom: var(--avjapan-tg-bottom);
z-index: 999999;
display: block;
box-sizing: border-box;
width: 184px;
height: 360px;
padding: 4px;
overflow: hidden;
isolation: isolate;
border: 0;
border-radius: 10px;
color: #fff;
text-align: center;
text-decoration: none;
background: var(--avjapan-tg-red);
box-shadow:
0 0 0 2px rgba(255, 230, 235, .95),
0 0 24px rgba(255, 23, 68, .98),
0 0 50px rgba(255, 0, 42, .78),
0 14px 34px rgba(0, 0, 0, .5);
-webkit-tap-highlight-color: transparent;
transition: transform .18s ease, box-shadow .18s ease;
animation: avjapanTelegramBannerBlink 1.12s ease-in-out infinite;
}
.avjapan-telegram-banner::before {
position: absolute;
inset: -42%;
z-index: 0;
display: block;
content: "";
background:
conic-gradient(
from 0deg,
rgba(255, 23, 68, .14),
#fff0f4 7%,
#ff8da2 15%,
#ff1744 26%,
rgba(255, 23, 68, .16) 43%,
rgba(101, 0, 15, .22) 58%,
#ff3f63 72%,
#65000f 84%,
rgba(255, 23, 68, .14)
);
filter: blur(.2px);
animation: avjapanTelegramBorderRun 1.5s linear infinite;
}
.avjapan-telegram-banner::after {
position: absolute;
inset: 4px;
z-index: 3;
display: block;
content: "";
border: 1px solid rgba(255, 235, 240, .98);
border-radius: 7px;
box-shadow:
inset 0 0 18px rgba(255, 23, 68, .58),
0 0 24px rgba(255, 23, 68, .86);
pointer-events: none;
}
.avjapan-telegram-banner:hover,
.avjapan-telegram-banner:focus {
color: #fff;
text-decoration: none;
}
.avjapan-telegram-banner:hover {
transform: translateY(-2px) scale(1.02);
box-shadow:
0 0 0 2px rgba(255, 240, 244, 1),
0 0 36px rgba(255, 23, 68, 1),
0 0 66px rgba(255, 0, 42, .9),
0 16px 36px rgba(0, 0, 0, .55);
}
.avjapan-telegram-banner__media,
.avjapan-telegram-banner__shade {
position: absolute;
inset: 4px;
display: block;
overflow: hidden;
border-radius: 7px;
}
.avjapan-telegram-banner__media {
z-index: 1;
}
.avjapan-telegram-banner__image {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
.avjapan-telegram-banner__shade {
z-index: 2;
background: transparent;
}
.avjapan-telegram-banner__copy {
position: absolute;
left: 7px;
right: 7px;
bottom: 12px;
z-index: 4;
display: grid;
place-items: center;
}
.avjapan-telegram-banner__headline,
.avjapan-telegram-banner__button {
max-width: 100%;
overflow: hidden;
text-overflow: clip;
letter-spacing: 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, .78);
white-space: nowrap;
}
.avjapan-telegram-banner__headline {
display: block;
box-sizing: border-box;
width: 100%;
padding: 7px 5px;
border: 1px solid rgba(255, 235, 240, .96);
border-radius: 6px;
color: #fff;
background: rgba(101, 0, 15, .94);
box-shadow:
0 0 16px rgba(255, 23, 68, .86),
0 3px 10px rgba(0, 0, 0, .45);
font: 800 11px/1.12 Tahoma, Arial, sans-serif;
}
.avjapan-telegram-banner__button {
display: inline-block;
min-width: 130px;
padding: 8px 12px;
border: 1px solid rgba(255, 255, 255, .95);
border-radius: 999px;
color: #fff;
background: linear-gradient(#ffccd6, var(--avjapan-tg-red) 48%, var(--avjapan-tg-deep));
box-shadow:
0 0 16px rgba(255, 23, 68, .98),
0 4px 10px rgba(0, 0, 0, .42);
font: 800 16px/1.12 Tahoma, Arial, sans-serif;
}
.avjapan-telegram-banner:focus-visible {
outline: 3px solid #fff;
outline-offset: 5px;
}
@keyframes avjapanTelegramBorderRun {
to {
transform: rotate(1turn);
}
}
@keyframes avjapanTelegramBannerBlink {
0%, 100% {
filter: brightness(1) saturate(1);
}
50% {
filter: brightness(1.12) saturate(1.04);
}
}
@media (max-width: 640px) {
.avjapan-telegram-banner {
right: 10px;
bottom: 82px;
width: 136px;
height: 268px;
padding: 3px;
}
.avjapan-telegram-banner::after,
.avjapan-telegram-banner__media,
.avjapan-telegram-banner__shade {
inset: 3px;
border-radius: 6px;
}
.avjapan-telegram-banner__copy {
left: 5px;
right: 5px;
bottom: 9px;
}
.avjapan-telegram-banner__headline {
padding: 6px 3px;
font-size: 8px;
}
}