.glass-circle a {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
border-radius: 50%;
/* TRANSPARENT GLASS */
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.25);
/* glass depth */
box-shadow:
inset 0 2px 6px rgba(255,255,255,0.25),
inset 0 -10px 25px rgba(0,0,0,0.4),
0 10px 30px rgba(0,0,0,0.25);
color: #fff;
text-align: center;
overflow: hidden;
}
.glass-circle strong {
font-size: 22px; /* numbers are large */
font-weight: 800;
line-height: 1.5;
}
.glass-circle span {
font-size: 13px;
opacity: 0.9;
}
.glass-circle a::after {
content: "✓";
position: absolute;
top: 10px; /* adjust how much it sticks out */
right: -0px;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #27c46b;
color: #fff;
font-size: 16px;
font-weight: 700;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
border: 2px solid rgba(255,255,255,0.8);
}
.glass-circle a {
overflow: visible; /* important */
}
@media (max-width: 767px) {
.glass-circle a {
width: 100px;
height: 100px;
}
.glass-circle strong {
font-size: 22px; /* smaller numbers */
}
.glass-circle span {
font-size: 11px;
}
/* checkmark */
.glass-circle a::after {
width: 22px;
height: 22px;
font-size: 12px;
top: -4px;
right: -4px;
}
}
.glass-stat {
box-shadow:
0 4px 16px rgba(0,0,0,0.2);
border: 1px solid rgba(255,255,255,0.12);
}
.glass-circle a {
box-shadow:
0 6px 20px rgba(0,0,0,0.25); /* outer shadow only */
}