.site-stats {
padding: 15px 0;
margin-bottom: 25px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
font-size: 0.85rem;
background: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}
.stats-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.stats-group {
display: flex;
gap: 20px;
transition: transform 0.3s ease;
}
.stats-group:hover {
transform: translateY(-2px);
}
.stats-divider {
width: 1px;
height: 30px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
margin: 0 5px;
}
.stats-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 12px;
position: relative;
overflow: hidden;
}
.stats-item::after {
content: "";
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 1px;
background-color: rgba(255, 255, 255, 0.2);
transition: width 0.3s ease, left 0.3s ease;
}
.stats-item:hover::after {
width: 70%;
left: 15%;
}
.stats-label {
color: rgba(255, 255, 255, 0.5);
font-size: 0.75rem;
margin-bottom: 5px;
white-space: nowrap;
letter-spacing: 0.5px;
transition: color 0.3s ease;
}
.stats-item:hover .stats-label {
color: rgba(255, 255, 255, 0.7);
}
.stats-value {
color: rgba(255, 255, 255, 0.85);
font-weight: 600;
position: relative;
transition: color 0.3s ease;
}
.stats-item:hover .stats-value {
color: rgba(255, 255, 255, 1);
text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
} .stats-fade-in {
opacity: 0;
transform: translateY(10px);
animation: fadeIn 0.8s forwards;
}
@keyframes fadeIn {
to {
opacity: 1;
transform: translateY(0);
}
} @media (max-width: 768px) {
.stats-wrapper {
flex-direction: column;
align-items: stretch;
gap: 15px;
}
.stats-group {
justify-content: center;
}
.stats-divider {
width: 80%;
height: 1px;
margin: 5px auto;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}
} @media (max-width: 480px) {
.stats-group {
flex-direction: column;
gap: 10px;
}
.stats-item {
flex-direction: row;
justify-content: space-between;
width: 100%;
padding: 0 20px;
}
.stats-label {
margin-bottom: 0;
}
.stats-item::after {
display: none;
}
}