.glass-stat {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 160px;
padding: 16px 18px;
border-radius: 18px;
/* 💎 стекло */
background:
linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)),
rgba(255,255,255,0.04);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.2);
/* ✨ глубина */
box-shadow:
inset 0 2px 6px rgba(255,255,255,0.2),
inset 0 -15px 30px rgba(0,0,0,0.35),
0 10px 30px rgba(0,0,0,0.3);
color: #fff;
overflow: visible;
}
/* цифра */
.glass-stat strong {
font-size: 34px;
font-weight: 600;
line-height: 1.2;
text-shadow: 0 2px 10px rgba(255,255,255,0.15);
}
/* текст */
.glass-stat span {
font-size: 13px;
color: rgba(255,255,255,0.65);
}
/* галочка как на скрине */
.glass-stat::after {
content: "+";
position: absolute;
top: -10px;
right: -10px;
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #22c55e;
color: #fff;
font-weight: 700;
box-shadow:
0 4px 12px rgba(34,197,94,0.6),
inset 0 1px 2px rgba(255,255,255,0.4);
}
/* убираем плюсик */
.glass-stat::after {
display: none;
}
/* выравнивание влево */
.glass-stat {
align-items: flex-start;
text-align: left;
}
.glass-stat {
box-shadow:
0 4px 16px rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 767px) {
.glass-stat {
width: 100%;
padding: 12px 14px;
border-radius: 14px;
}
.glass-stat strong {
font-size: 24px;
}
.glass-stat span {
font-size: 12px;
}
}
.glass-stat {
-webkit-mask-image: linear-gradient(
to left,
transparent 0%,
rgba(0,0,0,0.2) 20%,
rgba(0,0,0,0.6) 50%,
rgba(0,0,0,1) 80%
);
mask-image: linear-gradient(
to left,
transparent 0%,
rgba(0,0,0,0.2) 20%,
rgba(0,0,0,0.6) 50%,
rgba(0,0,0,1) 80%
);
}