/* =========================================================
ШРИФТИ ДЛЯ ПІДКЛЮЧЕННЯ
=========================================================
Додай у HTML:
========================================================= */
/* =========================================================
BASE STYLES - ПОКРАЩЕНА БАЗА
========================================================= */
.cosmetic-badge,
.tag-badge {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 18px;
border-radius: 20px;
font-weight: 800;
letter-spacing: 0.5px;
line-height: 1.1;
text-align: center;
isolation: isolate;
overflow: hidden !important;
transform: translateZ(0);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
contain: paint;
}
.cosmetic-badge:hover,
.tag-badge:hover,
.status-badge:hover {
transform: translateY(-3px) scale(1.02);
filter: saturate(1.15) brightness(1.05);
}
.cosmetic-badge::before,
.cosmetic-badge::after,
.tag-badge::before,
.tag-badge::after,
.status-badge::before,
.status-badge::after {
content: "";
position: absolute;
inset: -50%;
pointer-events: none;
z-index: 0;
}
.cosmetic-badge::before,
.cosmetic-badge::after,
.tag-badge::before,
.tag-badge::after {
inset: 0 !important; /* замість -50% */
border-radius: inherit; /* кліп по тій самій формі */
transform: none; /* прибираємо випадкові зсуви розміру */
}
.cosmetic-badge > *,
.tag-badge > *,
.status-badge > * {
position: relative;
z-index: 2;
}
.cosmetic-badge,
.tag-badge {
position: relative;
isolation: isolate;
z-index: 0;
}
.cosmetic-badge > *,
.tag-badge > * {
position: relative;
z-index: 2;
}
/* 4) Якщо хочеш рух/дрифт — рухай background-position, а не розмір шару */
.tag-badge::before,
.tag-badge::after,
.cosmetic-badge::before,
.cosmetic-badge::after {
background-repeat: no-repeat;
background-size: auto;
animation: none;
}
/* приклад “дрифту” без роздування шару */
@keyframes bgDrift {
0%,100% { background-position: 0% 0%; }
50% { background-position: 60% 40%; }
}
/* RARITY SHADOWS - ПОКРАЩЕНІ */
.rarity-common {
box-shadow: 0 8px 20px rgba(0,0,0,.15),
0 2px 4px rgba(0,0,0,.1);
}
.rarity-uncommon {
box-shadow: 0 12px 28px rgba(0,0,0,.2),
0 4px 8px rgba(0,0,0,.12),
0 0 20px rgba(255,255,255,.1) inset;
}
.rarity-rare {
box-shadow: 0 16px 36px rgba(0,0,0,.25),
0 6px 12px rgba(0,0,0,.15),
0 0 30px rgba(255,255,255,.15) inset;
}
.rarity-epic {
box-shadow: 0 20px 48px rgba(0,0,0,.3),
0 8px 16px rgba(0,0,0,.18),
0 0 40px rgba(255,255,255,.2) inset,
0 0 60px rgba(255,255,255,.1);
}
.rarity-legendary {
box-shadow: 0 28px 64px rgba(0,0,0,.4),
0 12px 24px rgba(0,0,0,.22),
0 0 50px rgba(255,255,255,.25) inset,
0 0 80px rgba(255,255,255,.15);
animation: legendaryPulse 3s ease-in-out infinite;
}
/* =========================================================
KEYFRAMES - РОЗШИРЕНІ АНІМАЦІЇ
========================================================= */
@keyframes driftSoft {
0%, 100% { transform: translate(0, 0); }
25% { transform: translate(-3%, 4%); }
50% { transform: translate(-6%, 8%); }
75% { transform: translate(-3%, 4%); }
}
@keyframes sheen {
0%, 100% { transform: translateX(-120%) rotate(15deg); opacity: 0; }
50% { transform: translateX(120%) rotate(15deg); opacity: 1; }
}
@keyframes floaty {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-10px) scale(1.05); }
}
@keyframes pulseGlow {
0%, 100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.1);
opacity: 1;
}
}
@keyframes auroraMove {
0%, 100% {
transform: translate(-2%, -2%) rotate(-3deg) scale(1);
}
33% {
transform: translate(2%, 0%) rotate(0deg) scale(1.05);
}
66% {
transform: translate(0%, 2%) rotate(3deg) scale(1.02);
}
}
@keyframes spin360 {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes scanLine {
0% { transform: translateY(-100%); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translateY(100%); opacity: 0; }
}
@keyframes glitchJitter {
0% { transform: translate(0, 0) skewX(0deg); }
20% { transform: translate(-3px, 2px) skewX(3deg); }
40% { transform: translate(3px, -2px) skewX(-3deg); }
60% { transform: translate(-2px, 1px) skewX(2deg); }
80% { transform: translate(2px, -1px) skewX(-2deg); }
100% { transform: translate(0, 0) skewX(0deg); }
}
@keyframes shimmerText {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
@keyframes particleRise {
0% {
transform: translateY(20px) translateX(0) scale(0);
opacity: 0;
}
20% {
opacity: 1;
}
100% {
transform: translateY(-100px) translateX(var(--drift-x, 20px)) scale(1);
opacity: 0;
}
}
@keyframes legendaryPulse {
0%, 100% {
filter: brightness(1) saturate(1);
}
50% {
filter: brightness(1.15) saturate(1.3);
}
}
@keyframes sparkle {
0%, 100% {
opacity: 0;
transform: scale(0) rotate(0deg);
}
50% {
opacity: 1;
transform: scale(1) rotate(180deg);
}
}
/* =========================================================
TAGS - ЕЛІТНА КОЛЕКЦІЯ
========================================================= */
/* 1) Глюкозка - М'ятна свіжість з кристалами цукру */
.tag-glyukozka {
font-family: "Comfortaa", sans-serif;
font-weight: 700;
color: #0a3d1f;
background:
radial-gradient(circle at 25% 25%, rgba(255,255,255,.4), transparent 50%),
radial-gradient(circle at 75% 75%, rgba(125,255,176,.6), transparent 50%),
linear-gradient(135deg, #d0ffeb 0%, #8fffba 50%, #5affaa 100%);
border: 2px solid rgba(90,255,176,.5);
text-shadow:
0 1px 2px rgba(255,255,255,.8),
0 0 20px rgba(125,255,176,.4);
}
.tag-glyukozka::before {
background:
radial-gradient(circle, rgba(255,255,255,.95) 0 3px, transparent 4px) 0 0/45px 45px,
radial-gradient(circle, rgba(255,255,255,.7) 0 2px, transparent 3px) 20px 20px/35px 35px;
opacity: 0.6;
animation: driftSoft 8s ease-in-out infinite;
}
.tag-glyukozka::after {
background: linear-gradient(
110deg,
transparent 25%,
rgba(255,255,255,.8) 50%,
transparent 75%
);
width: 50%;
animation: sheen 4s ease-in-out infinite;
}
/* 2) ТРО FREEDOM - Технологічна сталь з електричними розрядами */
.tag-tro {
font-family: "Unbounded", sans-serif;
font-weight: 800;
color: #0a1a2e;
background:
linear-gradient(135deg, #e6f7ff 0%, #9dd9ff 25%, #5cb8ff 75%, #2a8cdf 100%);
border: 2px solid rgba(42,140,223,.6);
text-shadow:
0 2px 4px rgba(0,0,0,.3),
0 0 30px rgba(92,184,255,.6);
letter-spacing: 1px;
}
.tag-tro::before {
background: repeating-linear-gradient(
135deg,
rgba(255,255,255,.15) 0px,
rgba(255,255,255,.15) 2px,
transparent 2px,
transparent 8px
);
animation: glitchJitter 2s steps(4) infinite;
}
.tag-tro::after {
background: conic-gradient(
from 0deg,
transparent,
rgba(255,255,255,.4),
transparent,
rgba(92,184,255,.3),
transparent
);
animation: spin360 6s linear infinite;
}
/* 3) Фелікс - Королівський фіолет з діамантовим блиском */
.tag-felix {
font-family: "Exo 2", sans-serif;
font-weight: 900;
color: #2a0a3d;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 60%),
linear-gradient(135deg, #ffd6ff 0%, #e4b3ff 40%, #c88fff 100%);
border: 2px solid rgba(200,143,255,.6);
text-shadow:
0 2px 4px rgba(255,255,255,.6),
0 0 25px rgba(228,179,255,.5);
}
.tag-felix::before {
background:
radial-gradient(circle, rgba(255,255,255,1) 0 2px, transparent 3px) 0 0/20px 20px,
radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 2px) 10px 10px/15px 15px,
radial-gradient(circle, rgba(228,179,255,.6) 0 1px, transparent 2px) 5px 15px/25px 25px;
animation: sparkle 3s ease-in-out infinite;
}
.tag-felix::after {
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,.5),
transparent
);
animation: sheen 3s ease-in-out infinite;
}
/* 4) Доктор хаус - Noir детектив з димом */
.tag-doctorhouse {
font-family: "Russo One", sans-serif;
color: #f5f5f5;
background:
radial-gradient(circle at 30% 30%, rgba(80,80,80,.5), transparent 70%),
radial-gradient(circle at 70% 70%, rgba(40,40,40,.6), transparent 70%),
linear-gradient(135deg, #1a1a1a 0%, #3d3d3d 50%, #2a2a2a 100%);
border: 2px solid rgba(100,100,100,.5);
text-shadow:
0 3px 6px rgba(0,0,0,.8),
0 0 20px rgba(255,255,255,.2);
}
.tag-doctorhouse::before {
background: radial-gradient(
circle at 50% 50%,
rgba(255,255,255,.2),
transparent 70%
);
filter: blur(20px);
animation: pulseGlow 4s ease-in-out infinite;
}
.tag-doctorhouse::after {
background: repeating-linear-gradient(
30deg,
rgba(255,255,255,.05) 0px,
rgba(255,255,255,.05) 1px,
transparent 1px,
transparent 6px
);
}
/* 5) Lux Defecta - Божественне золото з halo */
.tag-luxdefecta {
font-family: "Unbounded", sans-serif;
font-weight: 400;
color: #3d2800;
background:
radial-gradient(circle at 40% 40%, rgba(255,255,255,.6), transparent 50%),
linear-gradient(135deg, #fff9e6 0%, #ffd966 40%, #ffb700 100%);
border: 2px solid rgba(255,183,0,.7);
text-shadow:
0 2px 4px rgba(255,217,102,.6),
0 0 30px rgba(255,255,230,.8);
}
.tag-luxdefecta::before {
background: radial-gradient(
circle at 50% 50%,
rgba(255,255,255,.5),
rgba(255,217,102,.3) 40%,
transparent 70%
);
filter: blur(15px);
animation: pulseGlow 3.5s ease-in-out infinite;
}
.tag-luxdefecta::after {
background: conic-gradient(
from 0deg,
transparent,
rgba(255,255,255,.6),
transparent,
rgba(255,217,102,.4),
transparent
);
animation: spin360 8s linear infinite;
}
/* 6) Тренболон - Вогняна сила з іскрами */
.tag-trenbolon {
font-family: "Russo One", sans-serif;
color: #fff;
background:
radial-gradient(circle at 25% 25%, rgba(255,120,0,.5), transparent 60%),
radial-gradient(circle at 75% 75%, rgba(255,40,80,.4), transparent 60%),
linear-gradient(135deg, #9a0000 0%, #ff4040 50%, #ff7070 100%);
border: 2px solid rgba(255,107,107,.7);
text-shadow:
0 3px 6px rgba(0,0,0,.6),
0 0 25px rgba(255,120,0,.6);
}
.tag-trenbolon::before {
background:
radial-gradient(circle, rgba(255,240,150,1) 0 3px, transparent 4px),
radial-gradient(circle, rgba(255,120,0,.9) 0 2px, transparent 3px) 15px 20px,
radial-gradient(circle, rgba(255,40,80,.8) 0 2px, transparent 3px) 30px 10px;
animation: floaty 3s ease-in-out infinite;
}
.tag-trenbolon::after {
background: radial-gradient(
circle at 30% 70%,
rgba(255,120,0,.4),
transparent 60%
);
animation: pulseGlow 2.5s ease-in-out infinite;
}
/* 7) inBlack - Matrix код з скан-лініями */
.tag-inblack {
font-family: "Orbitron", sans-serif;
font-weight: 900;
color: #00ff88;
background:
repeating-linear-gradient(
0deg,
rgba(0,255,136,.03) 0px,
rgba(0,255,136,.03) 2px,
transparent 2px,
transparent 4px
),
linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #1a1a1a 100%);
border: 2px solid rgba(0,255,136,.4);
text-shadow:
0 0 10px rgba(0,255,136,.8),
0 0 20px rgba(0,255,136,.5),
0 0 30px rgba(0,255,136,.3);
letter-spacing: 2px;
}
.tag-inblack::before {
background: repeating-linear-gradient(
90deg,
rgba(0,255,136,.1) 0px,
rgba(0,255,136,.1) 1px,
transparent 1px,
transparent 8px
);
animation: glitchJitter 1.5s steps(3) infinite;
}
.tag-inblack::after {
background: linear-gradient(
0deg,
transparent,
rgba(0,255,136,.3),
transparent
);
height: 100%;
animation: scanLine 2s linear infinite;
}
/* 8) Aegri somnia - Нічна аврора з магією */
.tag-aegri {
font-family: "Unbounded", sans-serif;
font-weight: 800;
color: #e6f0ff;
background:
radial-gradient(circle at 20% 20%, rgba(183,199,255,.6), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(106,139,255,.5), transparent 50%),
linear-gradient(135deg, #1a2a5a 0%, #2a4080 30%, #3a5099 60%, #4a60b0 100%);
border: 2px solid rgba(106,139,255,.7);
text-shadow:
0 3px 6px rgba(0,0,0,.6),
0 0 40px rgba(183,199,255,.6);
}
.tag-aegri::before {
background:
radial-gradient(ellipse at 20% 30%, rgba(0,255,200,.5), transparent 60%),
radial-gradient(ellipse at 80% 70%, rgba(180,100,255,.5), transparent 60%),
radial-gradient(ellipse at 50% 50%, rgba(100,150,255,.4), transparent 70%);
filter: blur(15px);
animation: auroraMove 6s ease-in-out infinite;
}
.tag-aegri::after {
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,.3),
transparent
);
animation: sheen 4.5s ease-in-out infinite;
}
/* 9) ЯЖМЕДІК - Party конфеті з райдужним текстом */
.tag-yazmedik {
font-family: "Caveat", cursive;
font-weight: 700;
font-size: 1.1em;
background: linear-gradient(135deg, #b0fff9 0%, #5eeee0 50%, #20d0c8 100%);
border: 2px solid rgba(32,208,200,.7);
/* Градієнтний текст */
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(
45deg,
#0a3d38,
#20d0c8,
#5eeee0,
#0a3d38
);
background-size: 300% 300%;
animation: shimmerText 3s ease-in-out infinite;
}
.tag-yazmedik::before {
background:
radial-gradient(circle, rgba(255,255,255,1) 0 2px, transparent 3px) 0 0/18px 18px,
radial-gradient(circle, rgba(255,255,255,.9) 0 1.5px, transparent 2.5px) 9px 9px/15px 15px,
radial-gradient(circle, rgba(94,238,224,.7) 0 1px, transparent 2px) 5px 12px/20px 20px;
animation: driftSoft 6s linear infinite;
}
.tag-yazmedik::after {
background: conic-gradient(
from 90deg,
transparent,
rgba(255,255,255,.4),
transparent
);
animation: spin360 5s linear infinite;
}
/* 10) Homo Medicus - Біо-еволюція з ДНК */
.tag-homomedicus {
font-family: "Unbounded", sans-serif;
font-weight: 800;
color: #0a2d00;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.4), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(125,255,99,.5), transparent 60%),
linear-gradient(135deg, #e6ffcc 0%, #99ff66 50%, #66ff33 100%);
border: 2px solid rgba(102,255,51,.7);
text-shadow:
0 2px 4px rgba(255,255,255,.6),
0 0 30px rgba(153,255,102,.5);
}
.tag-homomedicus::before {
background:
radial-gradient(circle at 50% 50%, rgba(255,255,255,.4), transparent 60%),
radial-gradient(circle at 30% 70%, rgba(125,255,99,.3), transparent 70%);
filter: blur(12px);
animation: pulseGlow 3.5s ease-in-out infinite;
}
.tag-homomedicus::after {
background: repeating-linear-gradient(
45deg,
rgba(255,255,255,.1) 0px,
rgba(255,255,255,.1) 3px,
transparent 3px,
transparent 6px
);
animation: driftSoft 8s linear infinite;
}
/* 11) ПАПАЗОЛ - Апельсинова хімія */
.tag-papazol {
font-family: "Russo One", sans-serif;
color: #3d1800;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 60%),
linear-gradient(135deg, #ffe8cc 0%, #ffb366 50%, #ff8c1a 100%);
border: 2px solid rgba(255,140,26,.7);
text-shadow:
0 2px 4px rgba(255,255,255,.5),
0 0 25px rgba(255,179,102,.5);
}
.tag-papazol::before {
background:
radial-gradient(circle at 25% 30%, rgba(255,255,255,.5), transparent 60%),
radial-gradient(circle at 75% 70%, rgba(255,140,0,.3), transparent 60%);
filter: blur(12px);
animation: auroraMove 4s ease-in-out infinite;
}
.tag-papazol::after {
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,.4),
transparent
);
animation: sheen 3.5s ease-in-out infinite;
}
/* 12) АШВАГАНДА - Спокійна ботаніка */
.tag-ashwagandha {
font-family: "Comfortaa", sans-serif;
font-weight: 700;
color: #1a2d1a;
background:
radial-gradient(circle at 35% 35%, rgba(255,255,255,.4), transparent 60%),
linear-gradient(135deg, #f0ffef 0%, #c8f3c8 50%, #a0e6a0 100%);
border: 2px solid rgba(160,230,160,.7);
text-shadow:
0 1px 2px rgba(255,255,255,.7),
0 0 20px rgba(200,243,200,.4);
}
.tag-ashwagandha::before {
background:
radial-gradient(circle, rgba(255,255,255,.8) 0 2px, transparent 3px) 0 0/25px 25px,
radial-gradient(circle, rgba(200,243,200,.6) 0 1px, transparent 2px) 12px 12px/20px 20px;
animation: driftSoft 9s ease-in-out infinite;
}
.tag-ashwagandha::after {
background: radial-gradient(
circle at 50% 50%,
rgba(255,255,255,.3),
transparent 60%
);
filter: blur(15px);
animation: pulseGlow 4.5s ease-in-out infinite;
}
/* 13) ПЕРДОЛАН - Кислотний неон з глітчем */
.tag-perdolan {
font-family: "Russo One", sans-serif;
color: #fff;
background:
linear-gradient(115deg, rgba(255,0,180,.2), rgba(0,200,255,.2)),
linear-gradient(135deg, #660080 0%, #cc00cc 30%, #ff66ff 100%);
border: 2px solid rgba(255,102,255,.8);
text-shadow:
0 0 10px rgba(255,102,255,1),
0 0 20px rgba(204,0,204,.8),
0 0 30px rgba(102,0,128,.6);
letter-spacing: 1.5px;
}
.tag-perdolan::before {
background: repeating-linear-gradient(
90deg,
rgba(255,102,255,.15) 0px,
rgba(255,102,255,.15) 2px,
transparent 2px,
transparent 10px
);
animation: glitchJitter 1.2s steps(4) infinite;
}
.tag-perdolan::after {
background: linear-gradient(
0deg,
transparent,
rgba(255,102,255,.4),
transparent
);
animation: scanLine 1.8s linear infinite;
}
/* 14) Уринотерапевт - Золотий пунктир */
.tag-urinoterapevt {
font-family: "Comfortaa", sans-serif;
font-weight: 700;
color: #3d2800;
background:
radial-gradient(circle at 30% 30%, rgba(0,0,0,.08), transparent 60%),
linear-gradient(135deg, #fff8e6 0%, #ffd966 50%, #ffb700 100%);
border: 2px dashed rgba(255,183,0,.7);
text-shadow:
0 2px 4px rgba(255,255,255,.5),
0 0 20px rgba(255,217,102,.4);
}
.tag-urinoterapevt::before {
background: radial-gradient(
circle at 50% 50%,
rgba(255,255,255,.4),
rgba(255,217,102,.2) 40%,
transparent 70%
);
filter: blur(12px);
animation: pulseGlow 3.8s ease-in-out infinite;
}
.tag-urinoterapevt::after {
background: repeating-linear-gradient(
30deg,
rgba(255,255,255,.15) 0px,
rgba(255,255,255,.15) 2px,
transparent 2px,
transparent 8px
);
}
/* 15) Мандарин - Соковитий цитрус */
.tag-mandarin {
font-family: "Exo 2", sans-serif;
font-weight: 900;
color: #3d1400;
background:
radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(255,138,61,.6), transparent 60%),
linear-gradient(135deg, #ffd9b3 0%, #ff9966 40%, #ff6622 100%);
border: 2px solid rgba(255,102,34,.7);
text-shadow:
0 2px 4px rgba(255,255,255,.6),
0 0 25px rgba(255,153,102,.5);
}
.tag-mandarin::before {
background:
radial-gradient(circle at 40% 35%, rgba(255,255,255,.4), transparent 60%),
radial-gradient(circle at 65% 65%, rgba(255,102,0,.3), transparent 60%);
filter: blur(12px);
animation: auroraMove 4.5s ease-in-out infinite;
}
.tag-mandarin::after {
background:
radial-gradient(circle, rgba(255,255,255,.9) 0 2px, transparent 3px) 0 0/25px 25px;
animation: driftSoft 10s linear infinite;
}
/* 16) Снігурочка - Крижані кристали */
.tag-snigurochka {
font-family: "Comfortaa", sans-serif;
font-weight: 700;
color: #0a2a3d;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.6), transparent 60%),
linear-gradient(135deg, #e6f7ff 0%, #b3e5ff 50%, #80d4ff 100%);
border: 2px solid rgba(128,212,255,.7);
text-shadow:
0 1px 2px rgba(255,255,255,.8),
0 0 25px rgba(179,229,255,.5);
}
.tag-snigurochka::before {
background:
radial-gradient(circle, rgba(255,255,255,1) 0 3px, transparent 4px) 0 0/40px 40px,
radial-gradient(circle, rgba(255,255,255,.8) 0 2px, transparent 3px) 20px 20px/30px 30px;
animation: driftSoft 7s ease-in-out infinite;
}
.tag-snigurochka::after {
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,.5),
transparent
);
animation: sheen 3.8s ease-in-out infinite;
}
/* 17) SNOWie - Супер-скляний сніг */
.tag-snowie {
font-family: "Rubik", sans-serif;
font-weight: 700;
color: #0a2d4d;
background:
radial-gradient(circle at 35% 35%, rgba(255,255,255,.7), transparent 60%),
linear-gradient(135deg, #ffffff 0%, #e6f7ff 50%, #b3e5ff 100%);
border: 2px solid rgba(179,229,255,.8);
text-shadow:
0 1px 2px rgba(255,255,255,1),
0 0 30px rgba(230,247,255,.6);
}
.tag-snowie::before {
background:
radial-gradient(circle, rgba(255,255,255,1) 0 3px, transparent 4px) 0 0/35px 35px,
radial-gradient(circle, rgba(230,247,255,.8) 0 2px, transparent 3px) 17px 17px/28px 28px;
animation: driftSoft 6.5s ease-in-out infinite;
}
.tag-snowie::after {
background: conic-gradient(
from 180deg,
transparent,
rgba(255,255,255,.4),
transparent
);
animation: spin360 7s linear infinite;
}
/* 18) noSNOWie - Паніка і сирена */
.tag-nosnowie {
font-family: "Russo One", sans-serif;
color: #fff;
background:
linear-gradient(135deg, rgba(255,0,0,.15), transparent),
linear-gradient(135deg, #1a1a1a 0%, #4d0000 50%, #ff3333 100%);
border: 2px solid rgba(255,51,51,.8);
text-shadow:
0 0 10px rgba(255,51,51,1),
0 0 20px rgba(255,0,0,.8),
0 3px 6px rgba(0,0,0,.8);
letter-spacing: 1.5px;
}
.tag-nosnowie::before {
background: repeating-linear-gradient(
120deg,
rgba(255,51,51,.2) 0px,
rgba(255,51,51,.2) 2px,
transparent 2px,
transparent 8px
);
animation: glitchJitter 1s steps(3) infinite;
}
.tag-nosnowie::after {
background: linear-gradient(
0deg,
transparent,
rgba(255,51,51,.4),
transparent
);
animation: scanLine 1.5s linear infinite;
}
/* 19) МОРОЗ2026 - Полярна аврора */
.tag-moroz2026 {
font-family: "Unbounded", sans-serif;
font-weight: 800;
color: #0a2d4d;
background:
radial-gradient(circle at 25% 25%, rgba(255,255,255,.6), transparent 50%),
radial-gradient(circle at 75% 75%, rgba(74,163,255,.5), transparent 50%),
linear-gradient(135deg, #e6f7ff 0%, #99d6ff 30%, #4da3ff 60%, #0066cc 100%);
border: 2px solid rgba(77,163,255,.8);
text-shadow:
0 2px 4px rgba(255,255,255,.7),
0 0 35px rgba(153,214,255,.6);
}
.tag-moroz2026::before {
background:
radial-gradient(ellipse at 25% 30%, rgba(0,255,200,.4), transparent 65%),
radial-gradient(ellipse at 75% 70%, rgba(120,80,255,.4), transparent 65%),
radial-gradient(ellipse at 50% 50%, rgba(100,150,255,.3), transparent 70%);
filter: blur(15px);
animation: auroraMove 6.5s ease-in-out infinite;
}
.tag-moroz2026::after {
background:
radial-gradient(circle, rgba(255,255,255,1) 0 3px, transparent 4px) 0 0/42px 42px;
animation: driftSoft 8.5s linear infinite;
}
/* 20) НЕПРИЄМНІСТЬ - Темна слизь */
.tag-nepriyemnist {
font-family: "Russo One", sans-serif;
color: #fff;
background:
radial-gradient(circle at 30% 30%, rgba(0,0,0,.3), transparent 60%),
linear-gradient(135deg, #330000 0%, #660000 50%, #aa0000 100%);
border: 2px solid rgba(170,0,0,.8);
text-shadow:
0 0 15px rgba(170,0,0,.8),
0 3px 6px rgba(0,0,0,.9);
}
.tag-nepriyemnist::before {
background: radial-gradient(
circle at 50% 50%,
rgba(255,0,0,.2),
transparent 60%
);
filter: blur(15px);
animation: pulseGlow 3s ease-in-out infinite;
}
.tag-nepriyemnist::after {
background: repeating-linear-gradient(
30deg,
rgba(255,0,0,.1) 0px,
rgba(255,0,0,.1) 2px,
transparent 2px,
transparent 8px
);
}
/* 21) ДА ЯК ТАК ТО - Мем-конфеті */
.tag-dayaktakto {
font-family: "Caveat", cursive;
font-weight: 700;
font-size: 1.1em;
color: #3d1800;
background:
radial-gradient(circle at 35% 35%, rgba(255,255,255,.4), transparent 60%),
linear-gradient(135deg, #fff5e6 0%, #ffd699 50%, #ffb84d 100%);
border: 2px solid rgba(255,184,77,.7);
text-shadow:
0 2px 4px rgba(255,255,255,.6),
0 0 20px rgba(255,214,153,.4);
}
.tag-dayaktakto::before {
background:
radial-gradient(circle, rgba(255,255,255,1) 0 2px, transparent 3px) 0 0/18px 18px,
radial-gradient(circle, rgba(255,214,153,.8) 0 1.5px, transparent 2.5px) 9px 9px/15px 15px;
animation: driftSoft 6.5s linear infinite;
}
.tag-dayaktakto::after {
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,.35),
transparent
);
animation: sheen 4s ease-in-out infinite;
}
/* 22) Ганс Ланда - Інтелектуальний терор */
.tag-hanslanda {
font-family: "Unbounded", sans-serif;
font-weight: 800;
color: #f5e6ff;
background:
radial-gradient(circle at 20% 25%, rgba(190,120,255,.35), transparent 55%),
radial-gradient(circle at 80% 75%, rgba(255,70,120,.3), transparent 55%),
linear-gradient(135deg, #1a0022 0%, #3d0033 35%, #2d001f 70%, #0f0b16 100%);
border: 2px solid rgba(190,120,255,.5);
text-shadow:
0 0 20px rgba(190,120,255,.6),
0 0 35px rgba(255,70,120,.4),
0 3px 6px rgba(0,0,0,.8);
letter-spacing: 0.8px;
}
.tag-hanslanda::before {
background:
radial-gradient(circle, rgba(200,140,255,.7) 0 3px, transparent 4px) 0 0/50px 50px,
radial-gradient(circle, rgba(255,90,140,.6) 0 2.5px, transparent 3.5px) 25px 25px/45px 45px,
radial-gradient(circle, rgba(180,110,255,.6) 0 2px, transparent 3px) 12px 37px/55px 55px;
animation: particleRise 6s linear infinite;
}
.tag-hanslanda::after {
background: linear-gradient(
0deg,
transparent,
rgba(200,140,255,.3),
rgba(255,70,120,.35),
transparent
);
animation: scanLine 2.5s linear infinite;
}
/* =========================================================
STATUSES - ЕЛІТНА КОЛЕКЦІЯ v6
========================================================= */
/* =========================================================
STATUSES - ПОКРАЩЕНІ ПАРТІКЛИ (овальні, хаотичні)
========================================================= */
/* Контейнери не ріжуть overflow */
.shop-card--status,
.shop-card--status .preview--status,
.shop-grid--status,
#tab-status {
overflow: visible !important;
}
/* База статусу */
.status-badge {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border-radius: 18px;
font-weight: 700;
letter-spacing: 0.4px;
line-height: 1.2;
text-align: center;
isolation: isolate;
overflow: visible;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
/* Текст поверх */
.status-badge .status-text {
position: relative;
z-index: 10;
display: inline-block;
}
/* Два шари партіклів - тепер ОВАЛЬНІ навколо тексту */
.status-badge::before,
.status-badge::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 200%;
height: 200%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 5;
opacity: 0;
filter: none;
mix-blend-mode: multiply;
border-radius: 50%; /* Робимо овальне обмеження */
}
/* КАТЕГОРІЇ - КОЛЬОРИ ТЕКСТУ */
.status-cat-motivation {
font-family: "Exo 2", sans-serif;
color: rgba(255,165,0,.98);
text-shadow:
0 1px 2px rgba(0,0,0,.25),
0 0 18px rgba(255,165,0,.35);
}
.status-cat-folk {
font-family: "Comfortaa", sans-serif;
color: rgba(100,170,255,.98);
text-shadow:
0 1px 2px rgba(0,0,0,.25),
0 0 18px rgba(255,200,80,.25),
0 0 18px rgba(100,170,255,.25);
}
.status-cat-winter {
font-family: "Rubik", sans-serif;
color: rgba(180,220,255,.98);
text-shadow:
0 1px 2px rgba(0,0,0,.25),
0 0 20px rgba(180,220,255,.3);
}
.status-cat-latina {
font-family: "Unbounded", sans-serif;
font-weight: 400;
color: rgba(255,195,70,.98);
text-shadow:
0 1px 2px rgba(0,0,0,.25),
0 0 18px rgba(255,195,70,.25);
}
/* ПАРТІКЛИ ПО КАТЕГОРІЇ - МЕНШЕ І ОВАЛЬНО */
/* Motivation - золоті іскри навколо */
.status-badge.status-cat-motivation::before {
background:
/* Верх */
radial-gradient(circle at 50% 15%, rgba(255,200,80,1) 0 2.2px, transparent 3px),
radial-gradient(circle at 38% 22%, rgba(255,165,0,.9) 0 1.8px, transparent 2.8px),
radial-gradient(circle at 62% 22%, rgba(255,220,120,.85) 0 1.9px, transparent 2.9px),
/* Боки */
radial-gradient(circle at 20% 50%, rgba(255,180,50,.88) 0 2px, transparent 3px),
radial-gradient(circle at 80% 50%, rgba(255,200,80,.86) 0 2.1px, transparent 3.1px),
/* Низ */
radial-gradient(circle at 50% 85%, rgba(255,165,0,.82) 0 1.9px, transparent 2.9px),
radial-gradient(circle at 35% 78%, rgba(255,220,120,.8) 0 1.7px, transparent 2.7px),
radial-gradient(circle at 65% 78%, rgba(255,180,50,.8) 0 1.8px, transparent 2.8px);
background-repeat: no-repeat;
mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 45%, black 50%, black 85%, transparent 90%);
-webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 45%, black 50%, black 85%, transparent 90%);
}
.status-badge.status-cat-motivation::after {
background:
/* Діагональні */
radial-gradient(circle at 30% 30%, rgba(255,230,150,.7) 0 1.4px, transparent 2.5px),
radial-gradient(circle at 70% 30%, rgba(255,165,0,.68) 0 1.3px, transparent 2.4px),
radial-gradient(circle at 30% 70%, rgba(255,240,200,.65) 0 1.3px, transparent 2.4px),
radial-gradient(circle at 70% 70%, rgba(255,200,80,.66) 0 1.4px, transparent 2.5px),
/* Додаткові хаотичні */
radial-gradient(circle at 45% 25%, rgba(255,220,120,.62) 0 1.2px, transparent 2.3px),
radial-gradient(circle at 55% 75%, rgba(255,180,50,.6) 0 1.2px, transparent 2.3px);
background-repeat: no-repeat;
mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 40%, black 48%, black 88%, transparent 93%);
-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 40%, black 48%, black 88%, transparent 93%);
}
/* Folk - блакитно-золотисті навколо */
.status-badge.status-cat-folk::before {
background:
/* Верх */
radial-gradient(circle at 50% 15%, rgba(255,210,80,1) 0 2.2px, transparent 3px),
radial-gradient(circle at 40% 22%, rgba(100,180,255,1) 0 2.1px, transparent 3px),
radial-gradient(circle at 60% 22%, rgba(100,170,255,.9) 0 2px, transparent 3px),
/* Боки */
radial-gradient(circle at 22% 50%, rgba(255,200,80,.88) 0 2px, transparent 3px),
radial-gradient(circle at 78% 50%, rgba(100,180,255,.86) 0 2.1px, transparent 3.1px),
/* Низ */
radial-gradient(circle at 50% 85%, rgba(255,210,80,.84) 0 1.9px, transparent 2.9px),
radial-gradient(circle at 37% 78%, rgba(100,170,255,.82) 0 1.8px, transparent 2.8px),
radial-gradient(circle at 63% 78%, rgba(255,200,80,.8) 0 1.8px, transparent 2.8px);
background-repeat: no-repeat;
mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 45%, black 50%, black 85%, transparent 90%);
-webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 45%, black 50%, black 85%, transparent 90%);
}
.status-badge.status-cat-folk::after {
background:
radial-gradient(circle at 32% 32%, rgba(255,235,160,.68) 0 1.3px, transparent 2.4px),
radial-gradient(circle at 68% 32%, rgba(120,190,255,.68) 0 1.3px, transparent 2.4px),
radial-gradient(circle at 32% 68%, rgba(255,210,80,.65) 0 1.3px, transparent 2.4px),
radial-gradient(circle at 68% 68%, rgba(100,180,255,.66) 0 1.3px, transparent 2.4px),
radial-gradient(circle at 50% 28%, rgba(255,220,120,.6) 0 1.2px, transparent 2.3px),
radial-gradient(circle at 50% 72%, rgba(120,190,255,.6) 0 1.2px, transparent 2.3px);
background-repeat: no-repeat;
mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 40%, black 48%, black 88%, transparent 93%);
-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 40%, black 48%, black 88%, transparent 93%);
}
/* Winter - крижані сніжинки навколо */
.status-badge.status-cat-winter::before {
background:
/* Верх */
radial-gradient(circle at 50% 16%, rgba(255,255,255,1) 0 2.4px, transparent 3.2px),
radial-gradient(circle at 38% 23%, rgba(200,230,255,1) 0 2.2px, transparent 3px),
radial-gradient(circle at 62% 23%, rgba(140,200,255,.95) 0 2px, transparent 3px),
/* Боки */
radial-gradient(circle at 20% 50%, rgba(255,255,255,.9) 0 2.1px, transparent 3px),
radial-gradient(circle at 80% 50%, rgba(200,230,255,.88) 0 2.2px, transparent 3.1px),
/* Низ */
radial-gradient(circle at 50% 84%, rgba(140,200,255,.85) 0 2px, transparent 3px),
radial-gradient(circle at 35% 77%, rgba(255,255,255,.82) 0 1.9px, transparent 2.9px),
radial-gradient(circle at 65% 77%, rgba(200,230,255,.8) 0 1.9px, transparent 2.9px);
background-repeat: no-repeat;
mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 45%, black 50%, black 85%, transparent 90%);
-webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 45%, black 50%, black 85%, transparent 90%);
}
.status-badge.status-cat-winter::after {
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.75) 0 1.4px, transparent 2.5px),
radial-gradient(circle at 70% 30%, rgba(200,230,255,.72) 0 1.3px, transparent 2.4px),
radial-gradient(circle at 30% 70%, rgba(140,200,255,.7) 0 1.3px, transparent 2.4px),
radial-gradient(circle at 70% 70%, rgba(255,255,255,.7) 0 1.4px, transparent 2.5px),
radial-gradient(circle at 50% 26%, rgba(200,230,255,.65) 0 1.2px, transparent 2.3px),
radial-gradient(circle at 50% 74%, rgba(140,200,255,.65) 0 1.2px, transparent 2.3px);
background-repeat: no-repeat;
mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 40%, black 48%, black 88%, transparent 93%);
-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 40%, black 48%, black 88%, transparent 93%);
}
/* Latina - золоті навколо */
.status-badge.status-cat-latina::before {
background:
radial-gradient(circle at 50% 16%, rgba(255,195,70,1) 0 2.2px, transparent 3px),
radial-gradient(circle at 40% 24%, rgba(255,170,50,.92) 0 2px, transparent 3px),
radial-gradient(circle at 60% 24%, rgba(255,220,140,.88) 0 1.9px, transparent 2.9px),
radial-gradient(circle at 22% 50%, rgba(255,195,70,.85) 0 2px, transparent 3px),
radial-gradient(circle at 78% 50%, rgba(255,170,50,.86) 0 2px, transparent 3px),
radial-gradient(circle at 50% 84%, rgba(255,220,140,.82) 0 1.9px, transparent 2.9px),
radial-gradient(circle at 36% 76%, rgba(255,195,70,.8) 0 1.8px, transparent 2.8px),
radial-gradient(circle at 64% 76%, rgba(255,170,50,.8) 0 1.8px, transparent 2.8px);
background-repeat: no-repeat;
mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 45%, black 50%, black 85%, transparent 90%);
-webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 45%, black 50%, black 85%, transparent 90%);
}
.status-badge.status-cat-latina::after {
background:
radial-gradient(circle at 32% 32%, rgba(255,220,140,.7) 0 1.3px, transparent 2.4px),
radial-gradient(circle at 68% 32%, rgba(255,195,70,.68) 0 1.3px, transparent 2.4px),
radial-gradient(circle at 32% 68%, rgba(255,170,50,.66) 0 1.3px, transparent 2.4px),
radial-gradient(circle at 68% 68%, rgba(255,220,140,.65) 0 1.3px, transparent 2.4px),
radial-gradient(circle at 50% 27%, rgba(255,195,70,.62) 0 1.2px, transparent 2.3px),
radial-gradient(circle at 50% 73%, rgba(255,170,50,.6) 0 1.2px, transparent 2.3px);
background-repeat: no-repeat;
mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 40%, black 48%, black 88%, transparent 93%);
-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 40%, black 48%, black 88%, transparent 93%);
}
/* ІНТЕНСИВНІСТЬ ПО RARITY */
.status-badge.rarity-common::before,
.status-badge.rarity-common::after {
opacity: 0;
}
.status-badge.rarity-uncommon::before {
opacity: 0.45;
animation: statusParticlesOrbit 12s ease-in-out infinite;
}
.status-badge.rarity-uncommon::after {
opacity: 0.28;
animation: statusParticlesOrbit 15s ease-in-out infinite reverse;
}
.status-badge.rarity-rare::before {
opacity: 0.68;
filter: blur(0.2px);
animation: statusParticlesOrbit 9s ease-in-out infinite;
}
.status-badge.rarity-rare::after {
opacity: 0.45;
filter: blur(0.35px);
animation: statusParticlesOrbit 12s ease-in-out infinite reverse;
}
.status-badge.rarity-epic::before {
opacity: 0.88;
filter: blur(0.3px) saturate(1.15);
animation: statusParticlesOrbit 6s ease-in-out infinite,
statusParticlesPulse 3.5s ease-in-out infinite;
}
.status-badge.rarity-epic::after {
opacity: 0.6;
filter: blur(0.45px);
animation: statusParticlesOrbit 9s ease-in-out infinite reverse;
}
.status-badge.rarity-legendary::before {
opacity: 1;
filter: blur(0.35px) saturate(1.25);
animation: statusParticlesOrbit 5s ease-in-out infinite,
statusParticlesPulse 2.8s ease-in-out infinite,
statusParticlesFloat 4s ease-in-out infinite;
}
.status-badge.rarity-legendary::after {
opacity: 0.78;
filter: blur(0.55px) saturate(1.1);
animation: statusParticlesPulse 2.2s ease-in-out infinite,
statusParticlesOrbit 7s ease-in-out infinite reverse;
}
/* АНІМАЦІЇ ДЛЯ СТАТУСІВ - ПЛАВНІ ОВАЛЬНІ РУХИ */
@keyframes statusParticlesOrbit {
0%, 100% {
transform: translate(-50%, -50%) rotate(-3deg) scale(1);
}
25% {
transform: translate(-50%, -50%) rotate(-1.5deg) scale(1.02);
}
50% {
transform: translate(-50%, -50%) rotate(3deg) scale(1.04);
}
75% {
transform: translate(-50%, -50%) rotate(1.5deg) scale(1.02);
}
}
@keyframes statusParticlesPulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.85;
}
}
@keyframes statusParticlesFloat {
0%, 100% {
transform: translate(-50%, -50%) translateY(0);
}
50% {
transform: translate(-50%, -50%) translateY(-3px);
}
}
/* ПРОФІЛЬ - СТАТУС */
#profile-status .status-badge {
position: relative;
overflow: visible;
}
#profile-status .status-badge .status-particles {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
#profile-status .status-badge .status-text {
position: relative;
z-index: 1;
}
#profile-status .status-badge .phv2-bubble {
position: absolute;
border-radius: 999px;
opacity: 0.85;
will-change: transform, opacity;
animation: phv2Bubble 2.6s ease-out forwards;
}
@keyframes phv2Bubble {
0% {
transform: translateY(0) scale(0);
opacity: 0;
}
20% {
opacity: 0.85;
}
100% {
transform: translateY(-80px) translateX(var(--bubble-drift, 0)) scale(1.2);
opacity: 0;
}
}
/* =========================================================
PREFIXES - ЕЛІТНА КОЛЕКЦІЯ
========================================================= */
.prefix-badge {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
isolation: isolate;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.prefix-badge:hover {
transform: translateY(-3px) scale(1.08);
filter: saturate(1.2) brightness(1.1);
}
.prefix-badge svg {
position: relative;
z-index: 2;
width: 26px;
height: 26px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.prefix-badge::before,
.prefix-badge::after {
content: "";
position: absolute;
inset: -50%;
pointer-events: none;
z-index: 0;
}
/* Мозок - рожевий нейрон */
.prefix-brain {
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 60%),
linear-gradient(135deg, #ffcce6 0%, #ff99cc 50%, #ff66b3 100%);
border: 2px solid rgba(255,102,179,.7);
box-shadow:
0 8px 20px rgba(255,153,204,.4),
inset 0 0 20px rgba(255,255,255,.3);
}
.prefix-brain::before {
background: radial-gradient(
circle at 50% 50%,
rgba(255,255,255,.4),
transparent 70%
);
filter: blur(12px);
animation: pulseGlow 3.5s ease-in-out infinite;
}
.prefix-brain svg {
fill: #cc0066;
filter: drop-shadow(0 0 8px rgba(255,102,179,.5));
}
/* Мозковий слимак - зелений біо */
.prefix-brainslug {
background:
radial-gradient(circle at 35% 35%, rgba(255,255,255,.4), transparent 60%),
linear-gradient(135deg, #ccffcc 0%, #66ff66 50%, #00cc44 100%);
border: 2px solid rgba(0,204,68,.7);
box-shadow:
0 10px 24px rgba(102,255,102,.4),
inset 0 0 20px rgba(255,255,255,.3);
}
.prefix-brainslug::before {
background:
radial-gradient(circle at 40% 40%, rgba(255,255,255,.3), transparent 65%),
radial-gradient(circle at 60% 60%, rgba(102,255,102,.3), transparent 65%);
filter: blur(10px);
animation: auroraMove 4.5s ease-in-out infinite;
}
.prefix-brainslug svg {
fill: #009933;
filter: drop-shadow(0 0 10px rgba(102,255,102,.6));
}
/* ДНК - блакитна спіраль */
.prefix-dna {
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 60%),
linear-gradient(135deg, #cce6ff 0%, #66b3ff 50%, #0080ff 100%);
border: 2px solid rgba(0,128,255,.7);
box-shadow:
0 12px 28px rgba(102,179,255,.4),
inset 0 0 25px rgba(255,255,255,.3);
}
.prefix-dna::before {
background: conic-gradient(
from 0deg,
transparent,
rgba(255,255,255,.4),
transparent,
rgba(102,179,255,.3),
transparent
);
animation: spin360 8s linear infinite;
}
.prefix-dna svg {
fill: #0066cc;
filter: drop-shadow(0 0 12px rgba(102,179,255,.7));
}
/* Кардіограма - червоний пульс */
.prefix-heartbeat {
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 60%),
linear-gradient(135deg, #ffcccc 0%, #ff6666 50%, #ff0000 100%);
border: 2px solid rgba(255,0,0,.7);
box-shadow:
0 10px 24px rgba(255,102,102,.4),
inset 0 0 20px rgba(255,255,255,.3);
}
.prefix-heartbeat::before {
background: radial-gradient(
circle at 50% 50%,
rgba(255,0,0,.3),
transparent 70%
);
filter: blur(15px);
animation: pulseGlow 1.2s ease-in-out infinite;
}
.prefix-heartbeat svg {
fill: #cc0000;
filter: drop-shadow(0 0 10px rgba(255,0,0,.6));
animation: floaty 1.2s ease-in-out infinite;
}
/* Допомога - зелений хрест */
.prefix-help {
background:
radial-gradient(circle at 35% 35%, rgba(255,255,255,.5), transparent 60%),
linear-gradient(135deg, #d9ffcc 0%, #99ff66 50%, #66cc33 100%);
border: 2px solid rgba(102,204,51,.7);
box-shadow:
0 8px 20px rgba(153,255,102,.4),
inset 0 0 18px rgba(255,255,255,.3);
}
.prefix-help::before {
background: radial-gradient(
circle at 50% 50%,
rgba(255,255,255,.4),
transparent 65%
);
filter: blur(10px);
animation: pulseGlow 3.8s ease-in-out infinite;
}
.prefix-help svg {
fill: #339900;
filter: drop-shadow(0 0 8px rgba(153,255,102,.5));
}
/* Кніговєд - фіолетова мудрість */
.prefix-lovebook {
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 60%),
linear-gradient(135deg, #e6ccff 0%, #b366ff 50%, #8000ff 100%);
border: 2px solid rgba(128,0,255,.7);
box-shadow:
0 14px 32px rgba(179,102,255,.4),
inset 0 0 25px rgba(255,255,255,.3);
}
.prefix-lovebook::before {
background:
radial-gradient(circle at 40% 40%, rgba(255,255,255,.3), transparent 65%),
radial-gradient(circle at 60% 60%, rgba(179,102,255,.3), transparent 65%);
filter: blur(12px);
animation: auroraMove 5s ease-in-out infinite;
}
.prefix-lovebook svg {
fill: #6600cc;
filter: drop-shadow(0 0 15px rgba(179,102,255,.7));
}
/* Пазл - райдужна загадка */
.prefix-puzzle {
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 60%),
linear-gradient(135deg, #ffe6cc 0%, #ffb366 40%, #ff8000 60%, #ff3366 100%);
border: 2px solid rgba(255,128,0,.7);
box-shadow:
0 12px 28px rgba(255,153,102,.4),
inset 0 0 22px rgba(255,255,255,.3);
}
.prefix-puzzle::before {
background: conic-gradient(
from 45deg,
rgba(255,51,102,.3),
rgba(255,128,0,.3),
rgba(255,179,102,.3),
rgba(255,51,102,.3)
);
animation: spin360 10s linear infinite;
}
.prefix-puzzle svg {
fill: #cc6600;
filter: drop-shadow(0 0 12px rgba(255,128,0,.6));
}
/* Стетоскоп - блакитний медик */
.prefix-stethoscope {
background:
radial-gradient(circle at 35% 35%, rgba(255,255,255,.5), transparent 60%),
linear-gradient(135deg, #ccf2ff 0%, #66ccff 50%, #00aaff 100%);
border: 2px solid rgba(0,170,255,.7);
box-shadow:
0 12px 28px rgba(102,204,255,.4),
inset 0 0 22px rgba(255,255,255,.3);
}
.prefix-stethoscope::before {
background: radial-gradient(
circle at 50% 50%,
rgba(255,255,255,.4),
rgba(102,204,255,.2) 50%,
transparent 70%
);
filter: blur(12px);
animation: pulseGlow 3.6s ease-in-out infinite;
}
.prefix-stethoscope svg {
fill: #0088cc;
filter: drop-shadow(0 0 10px rgba(102,204,255,.6));
}
/* Пробірка - лаймово-зелена хімія */
.prefix-testtubeprefix {
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), transparent 60%),
linear-gradient(135deg, #e6ffcc 0%, #99ff33 50%, #66cc00 100%);
border: 2px solid rgba(102,204,0,.7);
box-shadow:
0 12px 28px rgba(153,255,51,.4),
inset 0 0 22px rgba(255,255,255,.3);
}
.prefix-testtubeprefix::before {
background:
radial-gradient(circle at 45% 30%, rgba(255,255,255,.3), transparent 60%),
radial-gradient(circle at 55% 70%, rgba(153,255,51,.3), transparent 60%);
filter: blur(10px);
animation: auroraMove 4.2s ease-in-out infinite;
}
.prefix-testtubeprefix svg {
fill: #559900;
filter: drop-shadow(0 0 12px rgba(153,255,51,.7));
}
/* =========================================================
HOVER EFFECTS - ЗАГАЛЬНІ ПОКРАЩЕННЯ
========================================================= */
.cosmetic-badge:active,
.tag-badge:active,
.status-badge:active,
.prefix-badge:active {
transform: translateY(-1px) scale(0.98);
}
/* Легенда - додаткова анімація */
.rarity-legendary {
animation: legendaryPulse 3s ease-in-out infinite;
}
/* =========================================================
АДАПТИВНІСТЬ
========================================================= */
@media (max-width: 768px) {
.cosmetic-badge,
.tag-badge {
padding: 10px 14px;
font-size: 0.95em;
}
.prefix-badge {
width: 44px;
height: 44px;
}
.prefix-badge svg {
width: 24px;
height: 24px;
}
}
@media (max-width: 480px) {
.cosmetic-badge,
.tag-badge {
padding: 8px 12px;
font-size: 0.9em;
}
.prefix-badge {
width: 40px;
height: 40px;
}
.prefix-badge svg {
width: 22px;
height: 22px;
}
}
/* =========================================================
USERNAME GLOW BY ROLE (admin/publisher/user)
Додай в userfeatures.css (або твій глобальний файл зі стилями)
Працює так само, як у профілі: через CSS variables.
Очікуваний HTML: Nick
або на батьку: Nick
========================================================= */
/* База для ніку (навіть якщо без ролі) */
.username-glow{
--role-glow: rgba(68, 207, 70, .55);
--role-glow-2: rgba(68, 207, 70, .25);
--role-glow-3: rgba(68, 207, 70, .12);
position: relative;
display: inline-block;
line-height: 1.1;
isolation: isolate;
transform: translateZ(0);
text-shadow:
0 0 10px var(--role-glow),
0 0 20px var(--role-glow-2);
transition: filter .2s ease, text-shadow .2s ease, transform .2s ease;
}
/* Додатковий “ореол” позаду тексту (дуже схоже на профіль) */
.username-glow::before{
content: "";
position: absolute;
left: -8%;
right: -8%;
top: 50%;
height: 1.25em;
transform: translateY(-50%);
border-radius: 999px;
background: radial-gradient(closest-side, var(--role-glow-2), transparent 70%);
filter: blur(14px);
opacity: .85;
z-index: -1;
pointer-events: none;
}
/* Легка анімація “дихання” (можеш прибрати, якщо не треба) */
.username-glow.is-animated{
animation: usernameRolePulse 3.2s ease-in-out infinite;
}
@keyframes usernameRolePulse{
0%, 100%{
filter: brightness(1) saturate(1);
}
50%{
filter: brightness(1.08) saturate(1.18);
}
}
/* Hover — трошки сильніше (делікатно) */
.username-glow:hover{
transform: translateY(-1px);
text-shadow:
0 0 12px var(--role-glow),
0 0 26px var(--role-glow-2),
0 0 42px var(--role-glow-3);
}
/* =========================
ROLE VARIABLES
========================= */
/* user = зелений (дефолт, але залишаю і як явний клас) */
.username-glow.role-user,
.role-user .username-glow{
--role-glow: rgba(68, 207, 70, .55);
--role-glow-2: rgba(68, 207, 70, .25);
--role-glow-3: rgba(68, 207, 70, .12);
}
/* admin = золотий */
.username-glow.role-admin,
.role-admin .username-glow{
--role-glow: rgba(251, 191, 36, .70);
--role-glow-2: rgba(251, 191, 36, .32);
--role-glow-3: rgba(251, 191, 36, .16);
}
/* publisher = синій/блакитний */
.username-glow.role-publisher,
.role-publisher .username-glow{
--role-glow: rgba(56, 189, 248, .70);
--role-glow-2: rgba(56, 189, 248, .30);
--role-glow-3: rgba(56, 189, 248, .14);
}
/* =========================
Dark mode (як у профілі — трохи підсилюємо)
========================= */
body.dark-mode .username-glow{
text-shadow:
0 0 12px var(--role-glow),
0 0 28px var(--role-glow-2),
0 0 48px var(--role-glow-3);
}
body.dark-mode .username-glow::before{
filter: blur(16px);
opacity: .9;
}