.sf-stats { padding: 60px 24px; }
.sf-stats .grid { gap: 0; }
.sf-stats__item {
text-align: center;
padding: 32px 24px;
position: relative;
border-left: 3px solid transparent;
transition: border-color 0.3s, transform 0.3s;
}
.sf-stats__item:hover {
border-left-color: var(--primary);
transform: translateY(-3px);
}
.sf-stats__item:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 20%;
height: 60%;
width: 1px;
background: var(--border);
}
.sf-stats__icon {
display: block;
font-size: 24px;
margin-bottom: 8px;
}
.sf-stats__value {
font-size: 42px;
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(135deg, var(--primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
line-height: 1.2;
}
.sf-stats__label {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted-foreground);
font-weight: 500;
}
.sf-stats__desc {
font-size: 12px;
color: var(--muted-foreground);
opacity: 0.7;
margin-top: 6px;
line-height: 1.4;
}
.sf-stats--highlight .sf-stats__item {
background: var(--surface, var(--card));
border-radius: var(--image-radius, 12px);
margin: 0 8px;
box-shadow: var(--shadow-sm);
}
.sf-stats--highlight .sf-stats__item:not(:last-child)::after { display: none; }
@media (max-width: 768px) {
.sf-stats__item:not(:last-child)::after { display: none; }
.sf-stats__value { font-size: 32px; }
}
.sf-stats--neon .sf-stats__value {
text-shadow:
0 0 10px rgba(var(--primary-rgb), 0.4),
0 0 30px rgba(var(--primary-rgb), 0.2);
-webkit-text-fill-color: var(--primary);
background: none;
}
.sf-stats--pulse .sf-stats__item:hover .sf-stats__value {
animation: stats-value-pulse 0.4s ease;
}
@keyframes stats-value-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.sf-stats--card-glow .sf-stats__item:hover {
box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.12);
border-left-color: var(--primary);
}
.sf-stats--gradient-sep .sf-stats__item:not(:last-child)::after {
background: linear-gradient(180deg, transparent, var(--primary), transparent);
opacity: 0.3;
}
.sf-stats--stagger .sf-stats__item {
opacity: 0;
animation: stats-item-in 0.4s ease forwards;
}
.sf-stats--stagger .sf-stats__item:nth-child(1) { animation-delay: 0s; }
.sf-stats--stagger .sf-stats__item:nth-child(2) { animation-delay: 0.1s; }
.sf-stats--stagger .sf-stats__item:nth-child(3) { animation-delay: 0.2s; }
.sf-stats--stagger .sf-stats__item:nth-child(4) { animation-delay: 0.3s; }
@keyframes stats-item-in {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
.sf-stats--icon-glow .sf-stats__icon {
text-shadow: 0 0 12px rgba(var(--primary-rgb), 0.4);
}
.sf-stats--glass .sf-stats__item {
background: rgba(255,255,255,0.04);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: var(--image-radius, 12px);
border: 1px solid rgba(255,255,255,0.06);
}
@media (prefers-reduced-motion: reduce) {
.sf-stats--pulse .sf-stats__item:hover .sf-stats__value { animation: none; }
.sf-stats--stagger .sf-stats__item { animation: none; opacity: 1; }
}
.sf-testimonials__subtitle {
text-align: center;
font-size: 15px;
color: var(--muted-foreground);
max-width: 500px;
margin: -8px auto 16px;
line-height: 1.6;
}
.sf-testimonials__summary {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 24px;
}
.sf-testimonials__summary-score {
font-size: 36px;
font-weight: 800;
color: var(--foreground);
line-height: 1;
}
.sf-testimonials__summary-stars {
font-size: 20px;
color: #F59E0B;
letter-spacing: 2px;
}
.sf-testimonials__summary-count {
font-size: 14px;
color: var(--muted-foreground);
}
.sf-testimonials__scroll {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 24px 0 16px;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
}
.sf-testimonials__scroll::-webkit-scrollbar { height: 4px; }
.sf-testimonials__scroll::-webkit-scrollbar-track { background: transparent; }
.sf-testimonials__scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.sf-testimonials__scroll > .sf-testimonials__card {
flex: 0 0 340px;
scroll-snap-align: start;
}
.sf-testimonials__card {
padding: 28px;
border-top: 3px solid var(--primary);
position: relative;
transition: transform 0.3s, box-shadow 0.3s;
}
.sf-testimonials__card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.sf-testimonials__quote-mark {
font-size: 56px;
font-family: Georgia, serif;
color: var(--primary);
opacity: 0.12;
line-height: 1;
position: absolute;
top: 16px;
left: 20px;
}
.sf-testimonials__quote {
font-size: 15px;
line-height: 1.8;
color: var(--card-foreground);
margin-bottom: 20px;
position: relative;
padding-left: 16px;
border-left: 3px solid var(--primary);
}
.sf-testimonials__quote p {
font-size: 15px;
line-height: 1.7;
font-style: italic;
}
.sf-testimonials__author {
display: flex;
align-items: center;
gap: 12px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.sf-testimonials__info {
display: flex;
flex-direction: column;
}
.sf-testimonials__name {
font-size: 15px;
font-weight: 600;
color: var(--foreground);
display: flex;
align-items: center;
gap: 6px;
}
.sf-testimonials__title {
font-size: 13px;
color: var(--muted-foreground);
}
.sf-testimonials__verified {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--primary);
color: #fff;
font-size: 11px;
font-weight: 700;
}
.sf-testimonials__avatar-fallback {
display: flex;
align-items: center;
justify-content: center;
background: var(--primary);
color: #fff;
font-weight: 700;
font-size: 18px;
}
.sf-testimonials__author .avatar {
border: 2px solid var(--primary);
box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}
.sf-testimonials__stars {
color: #F59E0B;
font-size: 16px;
margin-bottom: 12px;
letter-spacing: 2px;
}
.sf-testimonials--grid .sf-testimonials__card {
height: 100%;
display: flex;
flex-direction: column;
}
.sf-testimonials--grid .sf-testimonials__quote { flex: 1; }
@media (max-width: 768px) {
.sf-testimonials__scroll > .sf-testimonials__card { flex: 0 0 300px; }
.sf-testimonials__summary-score { font-size: 28px; }
}
.sf-testimonials--quote-glow .sf-testimonials__quote-mark {
opacity: 0.2;
text-shadow: 0 0 20px rgba(var(--primary-rgb), 0.3);
}
.sf-testimonials--avatar-glow .sf-testimonials__author .avatar {
box-shadow:
0 0 0 3px rgba(var(--primary-rgb), 0.2),
0 0 15px rgba(var(--primary-rgb), 0.15);
}
.sf-testimonials--glass .sf-testimonials__card {
background: rgba(255,255,255,0.04);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255,255,255,0.08);
}
.sf-testimonials--card-glow .sf-testimonials__card:hover {
box-shadow:
0 0 15px rgba(var(--primary-rgb), 0.1),
0 8px 24px rgba(0,0,0,0.1);
border-color: rgba(var(--primary-rgb), 0.2);
}
.sf-testimonials--star-shimmer .sf-testimonials__stars {
background: linear-gradient(90deg, #F59E0B, #FCD34D, #F59E0B);
background-size: 200% 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: testimonials-star-shimmer 3s linear infinite;
}
@keyframes testimonials-star-shimmer {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.sf-testimonials--stagger .sf-testimonials__card {
opacity: 0;
animation: testimonials-card-in 0.5s ease forwards;
}
.sf-testimonials--stagger .sf-testimonials__card:nth-child(1) { animation-delay: 0s; }
.sf-testimonials--stagger .sf-testimonials__card:nth-child(2) { animation-delay: 0.15s; }
.sf-testimonials--stagger .sf-testimonials__card:nth-child(3) { animation-delay: 0.3s; }
.sf-testimonials--stagger .sf-testimonials__card:nth-child(4) { animation-delay: 0.45s; }
@keyframes testimonials-card-in {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.sf-testimonials--gradient-border .sf-testimonials__quote {
border-left: 3px solid transparent;
border-image: linear-gradient(180deg, var(--primary), var(--accent)) 1;
}
.sf-testimonials--verified-glow .sf-testimonials__verified {
box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.4);
}
@media (prefers-reduced-motion: reduce) {
.sf-testimonials--star-shimmer .sf-testimonials__stars { animation: none; }
.sf-testimonials--stagger .sf-testimonials__card { animation: none; opacity: 1; }
}