.af-social-sidebar-widget {
position: relative;
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.af-social-widget {
--afsw-text: #f4f7fb;
--afsw-muted: #b2bfd1;
--afsw-accent: #67e8f9;
--afsw-green: #6ee7b7;
--afsw-dark: #03111d;
position: relative;
isolation: isolate;
display: block;
width: 100%;
height: auto !important;
max-height: none !important;
overflow: visible !important;
color: var(--afsw-text);
} .af-social-widget::before {
position: absolute;
z-index: -1;
inset: -9px;
border: 1px solid rgba(103, 232, 249, 0.24);
border-radius: 18px;
background: transparent;
box-shadow:
0 0 12px rgba(103, 232, 249, 0.22),
0 0 28px rgba(103, 232, 249, 0.13),
0 0 42px rgba(110, 231, 183, 0.08);
content: "";
opacity: 0.4;
pointer-events: none;
transform: scale(0.985);
animation:
afsw-container-boundary
2.5s
ease-in-out
infinite
alternate;
}
@keyframes afsw-container-boundary {
from {
opacity: 0.32;
border-color: rgba(103, 232, 249, 0.2);
transform: scale(0.985);
}
to {
opacity: 0.9;
border-color: rgba(110, 231, 183, 0.5);
transform: scale(1.015);
}
}
.af-social-widget:hover::before,
.af-social-widget:focus-within::before {
opacity: 1;
border-color: rgba(103, 232, 249, 0.68);
box-shadow:
0 0 16px rgba(103, 232, 249, 0.42),
0 0 34px rgba(103, 232, 249, 0.2),
0 0 50px rgba(110, 231, 183, 0.13);
} .af-sidebar
.af-social-sidebar-widget
.af-social-widget-description,
.af-sidebar-panel.af-social-sidebar-widget
.af-social-widget-description,
.af-social-widget
.af-social-widget-description {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 0 0.85rem !important;
padding: 0 !important;
overflow: visible !important;
color: var(--afsw-muted) !important;
font-family: inherit !important;
font-size: 0.92rem !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 1.55 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
text-overflow: clip !important;
text-transform: none !important;
opacity: 1 !important;
visibility: visible !important;
-webkit-box-orient: initial !important;
-webkit-line-clamp: unset !important;
line-clamp: unset !important;
} .af-global-left-widgets,
.af-global-right-widgets,
.af-global-left-widgets .af-widget,
.af-global-right-widgets .af-widget,
.af-social-sidebar-widget .af-social-widget {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
.af-social-widget-links {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(42px, 1fr));
gap: 0.55rem;
width: 100%;
} .af-social-widget-link {
--afsw-platform: var(--afsw-accent);
--afsw-shine-delay: 0s;
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 44px;
gap: 0.48rem;
overflow: hidden;
padding: 0.58rem;
border: 1px solid rgba(103, 232, 249, 0.38);
border-radius: 11px;
color: var(--afsw-platform);
background: rgba(5, 18, 31, 0.97);
box-shadow:
inset 0 1px rgba(255, 255, 255, 0.05),
0 0 7px rgba(103, 232, 249, 0.1);
font-family: inherit;
font-size: 0.83rem;
font-weight: 850;
line-height: 1.2;
text-align: center;
text-decoration: none;
text-shadow: none;
transform: translateZ(0);
transition:
color 150ms ease,
background-color 150ms ease,
border-color 150ms ease,
box-shadow 150ms ease,
transform 150ms ease;
} .af-social-widget-link::after {
position: absolute;
z-index: 1;
inset: 2px;
border: 1px solid rgba(103, 232, 249, 0.42);
border-radius: 8px;
content: "";
opacity: 0.32;
pointer-events: none;
transform: scale(0.96);
animation:
afsw-button-boundary
1.8s
ease-in-out
infinite
alternate;
}
@keyframes afsw-button-boundary {
from {
opacity: 0.22;
transform: scale(0.96);
}
to {
opacity: 0.72;
transform: scale(1);
}
} .af-social-widget-link::before {
position: absolute;
z-index: 2;
top: -45%;
left: 0;
width: 34%;
height: 190%;
border-radius: 50%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.04) 20%,
rgba(255, 255, 255, 0.3) 40%,
rgba(255, 255, 255, 0.68) 50%,
rgba(190, 247, 255, 0.24) 64%,
rgba(255, 255, 255, 0.04) 82%,
transparent 100%
);
content: "";
opacity: 0;
pointer-events: none;
transform:
translate3d(-190%, 0, 0)
skewX(-18deg);
animation:
afsw-smooth-glass-shine
5.8s
cubic-bezier(0.4, 0, 0.2, 1)
infinite;
animation-delay: var(--afsw-shine-delay);
will-change: transform, opacity;
}
@keyframes afsw-smooth-glass-shine {
0%,
8% {
opacity: 0;
transform:
translate3d(-190%, 0, 0)
skewX(-18deg);
}
12% {
opacity: 0.18;
}
17% {
opacity: 0.62;
}
23% {
opacity: 0.72;
}
29% {
opacity: 0.25;
}
34% {
opacity: 0;
transform:
translate3d(520%, 0, 0)
skewX(-18deg);
}
35%,
100% {
opacity: 0;
transform:
translate3d(520%, 0, 0)
skewX(-18deg);
}
} .af-social-widget-link:nth-child(1) {
--afsw-shine-delay: 0s;
}
.af-social-widget-link:nth-child(2) {
--afsw-shine-delay: 160ms;
}
.af-social-widget-link:nth-child(3) {
--afsw-shine-delay: 320ms;
}
.af-social-widget-link:nth-child(4) {
--afsw-shine-delay: 480ms;
}
.af-social-widget-link:nth-child(5) {
--afsw-shine-delay: 640ms;
}
.af-social-widget-link:nth-child(6) {
--afsw-shine-delay: 800ms;
}
.af-social-widget-link:nth-child(7) {
--afsw-shine-delay: 960ms;
}
.af-social-widget-link:nth-child(8) {
--afsw-shine-delay: 1120ms;
}
.af-social-widget-link:nth-child(9) {
--afsw-shine-delay: 1280ms;
}
.af-social-widget-link:nth-child(10) {
--afsw-shine-delay: 1440ms;
} .af-social-widget-link:hover::before,
.af-social-widget-link:focus-visible::before {
animation:
afsw-smooth-glass-hover
900ms
cubic-bezier(0.4, 0, 0.2, 1)
both;
}
@keyframes afsw-smooth-glass-hover {
0% {
opacity: 0;
transform:
translate3d(-190%, 0, 0)
skewX(-18deg);
}
22% {
opacity: 0.2;
}
50% {
opacity: 0.78;
}
78% {
opacity: 0.28;
}
100% {
opacity: 0;
transform:
translate3d(520%, 0, 0)
skewX(-18deg);
}
} .af-social-widget-links:hover
.af-social-widget-link:not(:hover)::before,
.af-social-widget-links:focus-within
.af-social-widget-link:not(:focus-visible)::before {
animation-play-state: paused;
} .af-social-widget-link svg {
position: relative;
z-index: 3;
display: block;
width: 19px;
height: 19px;
flex: 0 0 19px;
color: inherit;
fill: currentColor;
filter:
drop-shadow(
0 0 5px
rgba(103, 232, 249, 0.4)
);
transform-origin: 50% 50%;
animation:
afsw-icon-breathe
1.7s
ease-in-out
infinite
alternate;
transition:
color 150ms ease,
fill 150ms ease,
filter 150ms ease,
transform 170ms ease;
will-change: transform;
}
@keyframes afsw-icon-breathe {
from {
filter:
drop-shadow(
0 0 2px
rgba(103, 232, 249, 0.24)
);
transform: scale(1);
}
to {
filter:
drop-shadow(
0 0 7px
rgba(103, 232, 249, 0.58)
);
transform: scale(1.06);
}
}
.af-social-widget-link >
span:not(.screen-reader-text) {
position: relative;
z-index: 3;
display: inline-block;
min-width: 0;
color: inherit;
font-weight: 850;
line-height: 1.2;
opacity: 1;
overflow-wrap: anywhere;
text-shadow: none;
transition:
color 150ms ease,
transform 170ms ease;
} .af-social-widget-telegram {
--afsw-platform: #74dcff;
--afsw-telegram-blue: #229ed9;
border-color: rgba(116, 220, 255, 0.5);
box-shadow:
inset 0 1px rgba(255, 255, 255, 0.05),
0 0 8px rgba(34, 158, 217, 0.16);
animation:
afsw-telegram-button-pulse
4s
ease-out
infinite;
}
.af-social-widget-telegram svg {
filter:
drop-shadow(
0 0 4px
rgba(116, 220, 255, 0.42)
)
drop-shadow(
0 0 9px
rgba(34, 158, 217, 0.18)
);
transform-origin: 55% 55%;
animation:
afsw-telegram-plane
4s
cubic-bezier(0.22, 0.75, 0.24, 1)
infinite;
}
@keyframes afsw-telegram-plane {
0%,
8%,
38%,
100% {
transform:
translate3d(0, 0, 0)
rotate(0deg)
scale(1);
}
11% {
transform:
translate3d(-2px, 2px, 0)
rotate(-8deg)
scale(0.96);
}
17% {
transform:
translate3d(5px, -4px, 0)
rotate(8deg)
scale(1.13);
}
22% {
transform:
translate3d(9px, -7px, 0)
rotate(13deg)
scale(1.05);
filter:
drop-shadow(
-5px 5px 3px
rgba(116, 220, 255, 0.48)
)
drop-shadow(
0 0 10px
rgba(34, 158, 217, 0.55)
);
}
27% {
transform:
translate3d(-2px, 1px, 0)
rotate(-5deg)
scale(0.98);
}
32% {
transform:
translate3d(1px, -1px, 0)
rotate(2deg)
scale(1.03);
}
}
@keyframes afsw-telegram-button-pulse {
0%,
7%,
35%,
100% {
border-color: rgba(116, 220, 255, 0.5);
box-shadow:
inset 0 1px rgba(255, 255, 255, 0.05),
0 0 8px rgba(34, 158, 217, 0.16);
}
18% {
border-color: rgba(116, 220, 255, 0.9);
box-shadow:
inset 0 1px rgba(255, 255, 255, 0.08),
0 0 0 1px rgba(116, 220, 255, 0.12),
0 0 17px rgba(34, 158, 217, 0.38);
}
} .af-social-widget-telegram:hover,
.af-social-widget-telegram:focus-visible {
animation: none;
} .af-social-widget-telegram:hover svg,
.af-social-widget-telegram:focus-visible svg {
animation:
afsw-telegram-hover-launch
620ms
cubic-bezier(0.2, 0.8, 0.25, 1)
both;
}
@keyframes afsw-telegram-hover-launch {
0% {
transform:
translate3d(0, 0, 0)
rotate(0deg)
scale(1);
}
35% {
transform:
translate3d(-2px, 2px, 0)
rotate(-8deg)
scale(0.96);
}
70% {
transform:
translate3d(7px, -6px, 0)
rotate(12deg)
scale(1.18);
}
100% {
transform:
translate3d(2px, -2px, 0)
rotate(4deg)
scale(1.12);
}
} .af-social-widget-link:hover,
.af-social-widget-link:focus-visible {
color: var(--afsw-dark) !important;
border-color: #d4fbff;
background:
linear-gradient(
135deg,
#7deeff,
#70e8bd
);
box-shadow:
0 0 0 2px rgba(212, 251, 255, 0.42),
0 0 21px rgba(103, 232, 249, 0.75),
0 9px 19px rgba(0, 0, 0, 0.24);
text-shadow: none;
transform:
translateY(-2px)
scale(1.025);
}
.af-social-widget-link:hover::after,
.af-social-widget-link:focus-visible::after {
border-color: rgba(3, 17, 29, 0.36);
box-shadow:
inset 0 0 0 1px
rgba(255, 255, 255, 0.4),
0 0 9px
rgba(255, 255, 255, 0.5);
opacity: 1;
animation-duration: 600ms;
} .af-social-widget-link:not(
.af-social-widget-telegram
):hover svg,
.af-social-widget-link:not(
.af-social-widget-telegram
):focus-visible svg {
color: var(--afsw-dark) !important;
fill: var(--afsw-dark) !important;
filter:
drop-shadow(
0 1px 0
rgba(255, 255, 255, 0.32)
);
animation: none;
transform:
scale(1.18)
rotate(-7deg);
}
.af-social-widget-telegram:hover svg,
.af-social-widget-telegram:focus-visible svg {
color: var(--afsw-dark) !important;
fill: var(--afsw-dark) !important;
filter:
drop-shadow(
-3px 3px 2px
rgba(255, 255, 255, 0.3)
)
drop-shadow(
0 0 5px
rgba(3, 17, 29, 0.16)
);
}
.af-social-widget-link:hover >
span:not(.screen-reader-text),
.af-social-widget-link:focus-visible >
span:not(.screen-reader-text) {
color: var(--afsw-dark) !important;
opacity: 1 !important;
text-shadow: none !important;
transform: translateX(1px);
}
.af-social-widget-link:focus-visible {
outline:
3px solid
rgba(103, 232, 249, 0.82);
outline-offset: 3px;
} .af-social-widget-facebook {
--afsw-platform: #78b4ff;
}
.af-social-widget-x {
--afsw-platform: #f4f7fb;
}
.af-social-widget-linkedin {
--afsw-platform: #67c3ff;
}
.af-social-widget-instagram {
--afsw-platform: #ff8dcc;
}
.af-social-widget-youtube {
--afsw-platform: #ff777d;
}
.af-social-widget-whatsapp {
--afsw-platform: #6ee7ae;
}
.af-social-widget-github {
--afsw-platform: #d8e0ec;
}
.af-social-widget-email {
--afsw-platform: #ccb1ff;
}
.af-social-widget-rss {
--afsw-platform: #ffba67;
} @media (max-width: 620px) {
.af-social-widget-links {
grid-template-columns:
repeat(auto-fit, minmax(40px, 1fr));
gap: 0.45rem;
}
.af-social-widget-link {
min-height: 42px;
padding: 0.52rem;
}
.af-social-widget-link svg {
width: 18px;
height: 18px;
flex-basis: 18px;
}
} @media (prefers-reduced-motion: reduce) {
.af-social-widget::before,
.af-social-widget-link,
.af-social-widget-link::before,
.af-social-widget-link::after,
.af-social-widget-link svg,
.af-social-widget-link:hover::before,
.af-social-widget-link:focus-visible::before {
animation: none;
}
.af-social-widget::before {
opacity: 0.58;
transform: none;
}
.af-social-widget-link::before {
opacity: 0;
transform: none;
will-change: auto;
}
.af-social-widget-link::after {
opacity: 0.5;
transform: none;
}
.af-social-widget-link svg {
will-change: auto;
}
.af-social-widget-link,
.af-social-widget-link svg,
.af-social-widget-link >
span:not(.screen-reader-text) {
transition: none;
}
.af-social-widget-link:hover,
.af-social-widget-link:focus-visible,
.af-social-widget-link:hover svg,
.af-social-widget-link:focus-visible svg,
.af-social-widget-link:hover >
span:not(.screen-reader-text),
.af-social-widget-link:focus-visible >
span:not(.screen-reader-text) {
transform: none;
}
}