15 CSS Testimonials & Reviews 08 / 15
EdTech Bright
Confetti-dot background, SVG circular progress rings per card, spring-bounce hover, color-coded subject badges (math/code/bio/design/psych), achievement chips, and a dark "career switch" featured card.
The code
<section class="tm-edu" aria-label="Learner testimonials">
<header class="tm-edu-hdr">
<div class="tm-edu-hdr-brand">
<span class="tm-edu-brand-icon" aria-hidden="true">🎓</span>
<div>
<div class="tm-edu-brand-name">LearnSpark</div>
<div class="tm-edu-brand-sub">Adaptive learning platform</div>
</div>
</div>
<div class="tm-edu-hdr-stats">
<div class="tm-edu-hstat tm-edu-sun"><div class="tm-edu-hstat-n">94%</div><div class="tm-edu-hstat-l">Completion rate</div></div>
<div class="tm-edu-hstat tm-edu-sky"><div class="tm-edu-hstat-n">2.1M</div><div class="tm-edu-hstat-l">Learners</div></div>
<div class="tm-edu-hstat tm-edu-mint"><div class="tm-edu-hstat-n">4.97★</div><div class="tm-edu-hstat-l">Avg rating</div></div>
</div>
</header>
<div class="tm-edu-layout">
<article class="tm-edu-card tm-edu-sun-card">
<div class="tm-edu-ring-wrap" aria-hidden="true">
<svg class="tm-edu-ring-svg" viewBox="0 0 42 42">
<circle class="tm-edu-ring-track" cx="21" cy="21" r="20"></circle>
<circle class="tm-edu-ring-prog" cx="21" cy="21" r="20" stroke="#f59e0b" stroke-dashoffset="13"></circle>
</svg>
</div>
<div class="tm-edu-badge tm-edu-sun-badge">Mathematics</div>
<div class="tm-edu-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-edu-q">"Failed calculus twice in college. Came to LearnSpark. Passed my <em>actuarial exam</em> on the first try. The adaptive pacing changed everything."</blockquote>
<figcaption class="tm-edu-author">
<span class="tm-edu-av tm-edu-sun-av" aria-hidden="true">TM</span>
<span><cite class="tm-edu-an">Tobias Müller</cite><span class="tm-edu-ar">Actuarial student · Germany</span></span>
</figcaption>
<span class="tm-edu-achiev" aria-hidden="true">Course completer</span>
</article>
<article class="tm-edu-card tm-edu-sky-card">
<div class="tm-edu-ring-wrap" aria-hidden="true">
<svg class="tm-edu-ring-svg" viewBox="0 0 42 42">
<circle class="tm-edu-ring-track" cx="21" cy="21" r="20"></circle>
<circle class="tm-edu-ring-prog" cx="21" cy="21" r="20" stroke="#2563eb" stroke-dashoffset="6"></circle>
</svg>
</div>
<div class="tm-edu-badge tm-edu-sky-badge">Coding</div>
<div class="tm-edu-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-edu-q">"Landed my <em>first dev job</em> six months after starting the Web Dev track. The project-based learning is genuinely how it should be taught."</blockquote>
<figcaption class="tm-edu-author">
<span class="tm-edu-av tm-edu-sky-av" aria-hidden="true">PA</span>
<span><cite class="tm-edu-an">Priscilla Adom</cite><span class="tm-edu-ar">Junior developer · Ghana</span></span>
</figcaption>
</article>
<article class="tm-edu-card tm-edu-mint-card">
<div class="tm-edu-ring-wrap" aria-hidden="true">
<svg class="tm-edu-ring-svg" viewBox="0 0 42 42">
<circle class="tm-edu-ring-track" cx="21" cy="21" r="20"></circle>
<circle class="tm-edu-ring-prog" cx="21" cy="21" r="20" stroke="#10b981" stroke-dashoffset="19"></circle>
</svg>
</div>
<div class="tm-edu-badge tm-edu-mint-badge">Biology</div>
<div class="tm-edu-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-edu-q">"Got into medical school. My LearnSpark <em>MCAT biology</em> score was in the 98th percentile. Coincidence? I don't think so."</blockquote>
<figcaption class="tm-edu-author">
<span class="tm-edu-av tm-edu-mint-av" aria-hidden="true">SC</span>
<span><cite class="tm-edu-an">Seo-Yeon Choi</cite><span class="tm-edu-ar">Med school applicant · Korea</span></span>
</figcaption>
<span class="tm-edu-achiev" aria-hidden="true">Top 1% learner</span>
</article>
<article class="tm-edu-card tm-edu-coral-card">
<div class="tm-edu-badge tm-edu-coral-badge">Design</div>
<div class="tm-edu-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-edu-q">"The design thinking curriculum is <em>better than my $40K degree</em>. I mean that without exaggeration. Hired at a top-5 agency within 3 months."</blockquote>
<figcaption class="tm-edu-author">
<span class="tm-edu-av tm-edu-coral-av" aria-hidden="true">LR</span>
<span><cite class="tm-edu-an">Lucia Romero</cite><span class="tm-edu-ar">UI designer · Spain</span></span>
</figcaption>
</article>
<article class="tm-edu-card tm-edu-lavender-card">
<div class="tm-edu-badge tm-edu-lavender-badge">Psychology</div>
<div class="tm-edu-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-edu-q">"The AI tutor remembered <em>where I struggled</em> three weeks ago and revisited it unprompted. That's better than most human tutors I've had."</blockquote>
<figcaption class="tm-edu-author">
<span class="tm-edu-av tm-edu-lavender-av" aria-hidden="true">NW</span>
<span><cite class="tm-edu-an">Nia Williams</cite><span class="tm-edu-ar">PhD student · UK</span></span>
</figcaption>
</article>
<article class="tm-edu-card tm-edu-ink-card tm-edu-feat">
<div class="tm-edu-badge tm-edu-white-badge">Career switch · Featured</div>
<div class="tm-edu-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-edu-q">"I was a high school PE teacher for 12 years. Not unhappy — just curious whether I could do more with my life. I finished the Data Science bootcamp in nine months, evenings only. Within two weeks of finishing, I had <em>three offers</em>. Accepted a senior analyst role at 2.4× my old salary."</blockquote>
<figcaption class="tm-edu-author">
<span class="tm-edu-av tm-edu-ink-av" aria-hidden="true">DK</span>
<span><cite class="tm-edu-an">Damien Kowalski</cite><span class="tm-edu-ar">Former PE teacher → Data analyst · Poland</span></span>
</figcaption>
</article>
</div>
</section> <section class="tm-edu" aria-label="Learner testimonials">
<header class="tm-edu-hdr">
<div class="tm-edu-hdr-brand">
<span class="tm-edu-brand-icon" aria-hidden="true">🎓</span>
<div>
<div class="tm-edu-brand-name">LearnSpark</div>
<div class="tm-edu-brand-sub">Adaptive learning platform</div>
</div>
</div>
<div class="tm-edu-hdr-stats">
<div class="tm-edu-hstat tm-edu-sun"><div class="tm-edu-hstat-n">94%</div><div class="tm-edu-hstat-l">Completion rate</div></div>
<div class="tm-edu-hstat tm-edu-sky"><div class="tm-edu-hstat-n">2.1M</div><div class="tm-edu-hstat-l">Learners</div></div>
<div class="tm-edu-hstat tm-edu-mint"><div class="tm-edu-hstat-n">4.97★</div><div class="tm-edu-hstat-l">Avg rating</div></div>
</div>
</header>
<div class="tm-edu-layout">
<article class="tm-edu-card tm-edu-sun-card">
<div class="tm-edu-ring-wrap" aria-hidden="true">
<svg class="tm-edu-ring-svg" viewBox="0 0 42 42">
<circle class="tm-edu-ring-track" cx="21" cy="21" r="20"></circle>
<circle class="tm-edu-ring-prog" cx="21" cy="21" r="20" stroke="#f59e0b" stroke-dashoffset="13"></circle>
</svg>
</div>
<div class="tm-edu-badge tm-edu-sun-badge">Mathematics</div>
<div class="tm-edu-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-edu-q">"Failed calculus twice in college. Came to LearnSpark. Passed my <em>actuarial exam</em> on the first try. The adaptive pacing changed everything."</blockquote>
<figcaption class="tm-edu-author">
<span class="tm-edu-av tm-edu-sun-av" aria-hidden="true">TM</span>
<span><cite class="tm-edu-an">Tobias Müller</cite><span class="tm-edu-ar">Actuarial student · Germany</span></span>
</figcaption>
<span class="tm-edu-achiev" aria-hidden="true">Course completer</span>
</article>
<article class="tm-edu-card tm-edu-sky-card">
<div class="tm-edu-ring-wrap" aria-hidden="true">
<svg class="tm-edu-ring-svg" viewBox="0 0 42 42">
<circle class="tm-edu-ring-track" cx="21" cy="21" r="20"></circle>
<circle class="tm-edu-ring-prog" cx="21" cy="21" r="20" stroke="#2563eb" stroke-dashoffset="6"></circle>
</svg>
</div>
<div class="tm-edu-badge tm-edu-sky-badge">Coding</div>
<div class="tm-edu-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-edu-q">"Landed my <em>first dev job</em> six months after starting the Web Dev track. The project-based learning is genuinely how it should be taught."</blockquote>
<figcaption class="tm-edu-author">
<span class="tm-edu-av tm-edu-sky-av" aria-hidden="true">PA</span>
<span><cite class="tm-edu-an">Priscilla Adom</cite><span class="tm-edu-ar">Junior developer · Ghana</span></span>
</figcaption>
</article>
<article class="tm-edu-card tm-edu-mint-card">
<div class="tm-edu-ring-wrap" aria-hidden="true">
<svg class="tm-edu-ring-svg" viewBox="0 0 42 42">
<circle class="tm-edu-ring-track" cx="21" cy="21" r="20"></circle>
<circle class="tm-edu-ring-prog" cx="21" cy="21" r="20" stroke="#10b981" stroke-dashoffset="19"></circle>
</svg>
</div>
<div class="tm-edu-badge tm-edu-mint-badge">Biology</div>
<div class="tm-edu-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-edu-q">"Got into medical school. My LearnSpark <em>MCAT biology</em> score was in the 98th percentile. Coincidence? I don't think so."</blockquote>
<figcaption class="tm-edu-author">
<span class="tm-edu-av tm-edu-mint-av" aria-hidden="true">SC</span>
<span><cite class="tm-edu-an">Seo-Yeon Choi</cite><span class="tm-edu-ar">Med school applicant · Korea</span></span>
</figcaption>
<span class="tm-edu-achiev" aria-hidden="true">Top 1% learner</span>
</article>
<article class="tm-edu-card tm-edu-coral-card">
<div class="tm-edu-badge tm-edu-coral-badge">Design</div>
<div class="tm-edu-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-edu-q">"The design thinking curriculum is <em>better than my $40K degree</em>. I mean that without exaggeration. Hired at a top-5 agency within 3 months."</blockquote>
<figcaption class="tm-edu-author">
<span class="tm-edu-av tm-edu-coral-av" aria-hidden="true">LR</span>
<span><cite class="tm-edu-an">Lucia Romero</cite><span class="tm-edu-ar">UI designer · Spain</span></span>
</figcaption>
</article>
<article class="tm-edu-card tm-edu-lavender-card">
<div class="tm-edu-badge tm-edu-lavender-badge">Psychology</div>
<div class="tm-edu-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-edu-q">"The AI tutor remembered <em>where I struggled</em> three weeks ago and revisited it unprompted. That's better than most human tutors I've had."</blockquote>
<figcaption class="tm-edu-author">
<span class="tm-edu-av tm-edu-lavender-av" aria-hidden="true">NW</span>
<span><cite class="tm-edu-an">Nia Williams</cite><span class="tm-edu-ar">PhD student · UK</span></span>
</figcaption>
</article>
<article class="tm-edu-card tm-edu-ink-card tm-edu-feat">
<div class="tm-edu-badge tm-edu-white-badge">Career switch · Featured</div>
<div class="tm-edu-stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote class="tm-edu-q">"I was a high school PE teacher for 12 years. Not unhappy — just curious whether I could do more with my life. I finished the Data Science bootcamp in nine months, evenings only. Within two weeks of finishing, I had <em>three offers</em>. Accepted a senior analyst role at 2.4× my old salary."</blockquote>
<figcaption class="tm-edu-author">
<span class="tm-edu-av tm-edu-ink-av" aria-hidden="true">DK</span>
<span><cite class="tm-edu-an">Damien Kowalski</cite><span class="tm-edu-ar">Former PE teacher → Data analyst · Poland</span></span>
</figcaption>
</article>
</div>
</section>/* EdTech Bright — confetti-dot background contained in the wrapper.
Six color families (sun/sky/mint/coral/lavender/ink) cycle through
subject badges + avatar tints. SVG progress rings use stroke-dasharray
to render a fillable circular arc. */
.tm-edu {
--tm-edu-bg: #fdf9f3;
--tm-edu-ink: #1a1a2e;
--tm-edu-sun: #ffb700;
--tm-edu-sky: #2563eb;
--tm-edu-mint: #10b981;
--tm-edu-coral: #f43f5e;
--tm-edu-lavender: #8b5cf6;
position: relative;
padding: clamp(28px, 4vw, 48px);
background: var(--tm-edu-bg);
background-image:
radial-gradient(circle, rgba(255,183,0,0.15) 1px, transparent 1px),
radial-gradient(circle, rgba(37,99,235,0.1) 1px, transparent 1px),
radial-gradient(circle, rgba(16,185,129,0.1) 1px, transparent 1px);
background-size: 60px 60px, 90px 90px, 120px 120px;
background-position: 0 0, 30px 45px, 60px 15px;
font-family: 'DM Sans', system-ui, sans-serif;
color: var(--tm-edu-ink);
min-height: 520px;
}
.tm-edu-hdr {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
flex-wrap: wrap;
gap: 18px;
}
.tm-edu-hdr-brand {
display: flex;
align-items: center;
gap: 10px;
}
.tm-edu-brand-icon {
width: 40px;
height: 40px;
background: var(--tm-edu-sun);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 4px 12px rgba(255,183,0,0.4);
}
.tm-edu-brand-name {
font-family: 'Nunito', system-ui, sans-serif;
font-size: 18px;
font-weight: 900;
color: var(--tm-edu-ink);
}
.tm-edu-brand-sub {
font-size: 10px;
color: #888;
margin-top: -2px;
font-weight: 400;
}
.tm-edu-hdr-stats { display: flex; gap: 22px; }
.tm-edu-hstat { text-align: center; }
.tm-edu-hstat-n {
font-family: 'Nunito', system-ui, sans-serif;
font-size: 1.3rem;
font-weight: 900;
color: var(--tm-edu-ink);
}
.tm-edu-hstat-l { font-size: 10px; color: #888; margin-top: 1px; }
.tm-edu-sun .tm-edu-hstat-n { color: var(--tm-edu-sun); }
.tm-edu-sky .tm-edu-hstat-n { color: var(--tm-edu-sky); }
.tm-edu-mint .tm-edu-hstat-n { color: var(--tm-edu-mint); }
.tm-edu-layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.tm-edu-card {
border-radius: 20px;
padding: 24px 22px;
position: relative;
overflow: hidden;
transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1),
box-shadow 0.35s;
animation: tm-edu-pop 0.65s cubic-bezier(.34, 1.2, .64, 1) both;
}
.tm-edu-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.tm-edu-card:nth-child(1) { animation-delay: 0.04s; }
.tm-edu-card:nth-child(2) { animation-delay: 0.10s; }
.tm-edu-card:nth-child(3) { animation-delay: 0.16s; }
.tm-edu-card:nth-child(4) { animation-delay: 0.22s; }
.tm-edu-card:nth-child(5) { animation-delay: 0.28s; }
.tm-edu-card:nth-child(6) { animation-delay: 0.34s; }
@keyframes tm-edu-pop {
from { opacity: 0; transform: scale(.94) translateY(12px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.tm-edu-sun-card { background: linear-gradient(135deg, #fff8dc, #fff3ba); border: 2px solid rgba(255,183,0,0.2); }
.tm-edu-sky-card { background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 2px solid rgba(37,99,235,0.15); }
.tm-edu-mint-card { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border: 2px solid rgba(16,185,129,0.15); }
.tm-edu-coral-card { background: linear-gradient(135deg, #fff1f2, #ffe4e6); border: 2px solid rgba(244,63,94,0.15); }
.tm-edu-lavender-card { background: linear-gradient(135deg, #f5f3ff, #ede9fe); border: 2px solid rgba(139,92,246,0.15); }
.tm-edu-ink-card { background: var(--tm-edu-ink); border: 2px solid transparent; }
.tm-edu-feat { grid-column: span 2; }
.tm-edu-ring-wrap {
position: absolute;
top: 18px;
right: 18px;
width: 44px;
height: 44px;
}
.tm-edu-ring-svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.tm-edu-ring-track {
fill: none;
stroke: rgba(0,0,0,0.08);
stroke-width: 4;
}
.tm-edu-ring-prog {
fill: none;
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 126;
}
.tm-edu-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: 'Nunito', system-ui, sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 20px;
margin-bottom: 12px;
}
.tm-edu-sun-badge { background: rgba(255,183,0,0.2); color: #b45309; }
.tm-edu-sky-badge { background: rgba(37,99,235,0.12); color: var(--tm-edu-sky); }
.tm-edu-mint-badge { background: rgba(16,185,129,0.15); color: #059669; }
.tm-edu-coral-badge { background: rgba(244,63,94,0.12); color: var(--tm-edu-coral); }
.tm-edu-lavender-badge { background: rgba(139,92,246,0.15); color: var(--tm-edu-lavender); }
.tm-edu-white-badge { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); }
.tm-edu-stars {
display: flex;
gap: 3px;
margin-bottom: 10px;
font-size: 13px;
}
.tm-edu-sun-card .tm-edu-stars { color: var(--tm-edu-sun); }
.tm-edu-sky-card .tm-edu-stars { color: var(--tm-edu-sky); }
.tm-edu-mint-card .tm-edu-stars { color: var(--tm-edu-mint); }
.tm-edu-coral-card .tm-edu-stars { color: var(--tm-edu-coral); }
.tm-edu-lavender-card .tm-edu-stars { color: var(--tm-edu-lavender); }
.tm-edu-ink-card .tm-edu-stars { color: var(--tm-edu-sun); }
.tm-edu-q {
font-size: 0.88rem;
line-height: 1.65;
font-weight: 400;
margin: 0 0 16px;
color: #333;
font-style: normal;
}
.tm-edu-ink-card .tm-edu-q { color: rgba(255,255,255,0.75); }
.tm-edu-q em { font-style: normal; font-weight: 700; }
.tm-edu-sun-card .tm-edu-q em { color: #b45309; }
.tm-edu-sky-card .tm-edu-q em { color: var(--tm-edu-sky); }
.tm-edu-mint-card .tm-edu-q em { color: #059669; }
.tm-edu-coral-card .tm-edu-q em { color: var(--tm-edu-coral); }
.tm-edu-lavender-card .tm-edu-q em { color: var(--tm-edu-lavender); }
.tm-edu-ink-card .tm-edu-q em { color: var(--tm-edu-sun); }
.tm-edu-author {
display: flex;
align-items: center;
gap: 10px;
}
.tm-edu-av {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Nunito', system-ui, sans-serif;
font-size: 12px;
font-weight: 900;
flex-shrink: 0;
}
.tm-edu-sun-av { background: var(--tm-edu-sun); color: #7c5000; }
.tm-edu-sky-av { background: var(--tm-edu-sky); color: #fff; }
.tm-edu-mint-av { background: var(--tm-edu-mint); color: #fff; }
.tm-edu-coral-av { background: var(--tm-edu-coral); color: #fff; }
.tm-edu-lavender-av { background: var(--tm-edu-lavender); color: #fff; }
.tm-edu-ink-av { background: rgba(255,255,255,0.15); color: #fff; }
.tm-edu-an {
font-family: 'Nunito', system-ui, sans-serif;
font-size: 13px;
font-weight: 800;
font-style: normal;
line-height: 1.3;
display: block;
}
.tm-edu-ink-card .tm-edu-an { color: #fff; }
.tm-edu-ar { font-size: 10px; color: #888; margin-top: 2px; }
.tm-edu-ink-card .tm-edu-ar { color: rgba(255,255,255,0.4); }
.tm-edu-achiev {
position: absolute;
bottom: 18px;
right: 18px;
background: rgba(255,183,0,0.9);
color: #7c5000;
font-family: 'Nunito', system-ui, sans-serif;
font-size: 8px;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 20px;
}
@media (max-width: 820px) {
.tm-edu-layout { grid-template-columns: 1fr; }
.tm-edu-feat { grid-column: 1; }
.tm-edu-hdr-stats { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.tm-edu-card { animation: none; transition: none; }
.tm-edu-card:hover { transform: none; }
} /* EdTech Bright — confetti-dot background contained in the wrapper.
Six color families (sun/sky/mint/coral/lavender/ink) cycle through
subject badges + avatar tints. SVG progress rings use stroke-dasharray
to render a fillable circular arc. */
.tm-edu {
--tm-edu-bg: #fdf9f3;
--tm-edu-ink: #1a1a2e;
--tm-edu-sun: #ffb700;
--tm-edu-sky: #2563eb;
--tm-edu-mint: #10b981;
--tm-edu-coral: #f43f5e;
--tm-edu-lavender: #8b5cf6;
position: relative;
padding: clamp(28px, 4vw, 48px);
background: var(--tm-edu-bg);
background-image:
radial-gradient(circle, rgba(255,183,0,0.15) 1px, transparent 1px),
radial-gradient(circle, rgba(37,99,235,0.1) 1px, transparent 1px),
radial-gradient(circle, rgba(16,185,129,0.1) 1px, transparent 1px);
background-size: 60px 60px, 90px 90px, 120px 120px;
background-position: 0 0, 30px 45px, 60px 15px;
font-family: 'DM Sans', system-ui, sans-serif;
color: var(--tm-edu-ink);
min-height: 520px;
}
.tm-edu-hdr {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
flex-wrap: wrap;
gap: 18px;
}
.tm-edu-hdr-brand {
display: flex;
align-items: center;
gap: 10px;
}
.tm-edu-brand-icon {
width: 40px;
height: 40px;
background: var(--tm-edu-sun);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 4px 12px rgba(255,183,0,0.4);
}
.tm-edu-brand-name {
font-family: 'Nunito', system-ui, sans-serif;
font-size: 18px;
font-weight: 900;
color: var(--tm-edu-ink);
}
.tm-edu-brand-sub {
font-size: 10px;
color: #888;
margin-top: -2px;
font-weight: 400;
}
.tm-edu-hdr-stats { display: flex; gap: 22px; }
.tm-edu-hstat { text-align: center; }
.tm-edu-hstat-n {
font-family: 'Nunito', system-ui, sans-serif;
font-size: 1.3rem;
font-weight: 900;
color: var(--tm-edu-ink);
}
.tm-edu-hstat-l { font-size: 10px; color: #888; margin-top: 1px; }
.tm-edu-sun .tm-edu-hstat-n { color: var(--tm-edu-sun); }
.tm-edu-sky .tm-edu-hstat-n { color: var(--tm-edu-sky); }
.tm-edu-mint .tm-edu-hstat-n { color: var(--tm-edu-mint); }
.tm-edu-layout {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.tm-edu-card {
border-radius: 20px;
padding: 24px 22px;
position: relative;
overflow: hidden;
transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1),
box-shadow 0.35s;
animation: tm-edu-pop 0.65s cubic-bezier(.34, 1.2, .64, 1) both;
}
.tm-edu-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.tm-edu-card:nth-child(1) { animation-delay: 0.04s; }
.tm-edu-card:nth-child(2) { animation-delay: 0.10s; }
.tm-edu-card:nth-child(3) { animation-delay: 0.16s; }
.tm-edu-card:nth-child(4) { animation-delay: 0.22s; }
.tm-edu-card:nth-child(5) { animation-delay: 0.28s; }
.tm-edu-card:nth-child(6) { animation-delay: 0.34s; }
@keyframes tm-edu-pop {
from { opacity: 0; transform: scale(.94) translateY(12px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.tm-edu-sun-card { background: linear-gradient(135deg, #fff8dc, #fff3ba); border: 2px solid rgba(255,183,0,0.2); }
.tm-edu-sky-card { background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 2px solid rgba(37,99,235,0.15); }
.tm-edu-mint-card { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border: 2px solid rgba(16,185,129,0.15); }
.tm-edu-coral-card { background: linear-gradient(135deg, #fff1f2, #ffe4e6); border: 2px solid rgba(244,63,94,0.15); }
.tm-edu-lavender-card { background: linear-gradient(135deg, #f5f3ff, #ede9fe); border: 2px solid rgba(139,92,246,0.15); }
.tm-edu-ink-card { background: var(--tm-edu-ink); border: 2px solid transparent; }
.tm-edu-feat { grid-column: span 2; }
.tm-edu-ring-wrap {
position: absolute;
top: 18px;
right: 18px;
width: 44px;
height: 44px;
}
.tm-edu-ring-svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.tm-edu-ring-track {
fill: none;
stroke: rgba(0,0,0,0.08);
stroke-width: 4;
}
.tm-edu-ring-prog {
fill: none;
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 126;
}
.tm-edu-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: 'Nunito', system-ui, sans-serif;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 20px;
margin-bottom: 12px;
}
.tm-edu-sun-badge { background: rgba(255,183,0,0.2); color: #b45309; }
.tm-edu-sky-badge { background: rgba(37,99,235,0.12); color: var(--tm-edu-sky); }
.tm-edu-mint-badge { background: rgba(16,185,129,0.15); color: #059669; }
.tm-edu-coral-badge { background: rgba(244,63,94,0.12); color: var(--tm-edu-coral); }
.tm-edu-lavender-badge { background: rgba(139,92,246,0.15); color: var(--tm-edu-lavender); }
.tm-edu-white-badge { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.85); }
.tm-edu-stars {
display: flex;
gap: 3px;
margin-bottom: 10px;
font-size: 13px;
}
.tm-edu-sun-card .tm-edu-stars { color: var(--tm-edu-sun); }
.tm-edu-sky-card .tm-edu-stars { color: var(--tm-edu-sky); }
.tm-edu-mint-card .tm-edu-stars { color: var(--tm-edu-mint); }
.tm-edu-coral-card .tm-edu-stars { color: var(--tm-edu-coral); }
.tm-edu-lavender-card .tm-edu-stars { color: var(--tm-edu-lavender); }
.tm-edu-ink-card .tm-edu-stars { color: var(--tm-edu-sun); }
.tm-edu-q {
font-size: 0.88rem;
line-height: 1.65;
font-weight: 400;
margin: 0 0 16px;
color: #333;
font-style: normal;
}
.tm-edu-ink-card .tm-edu-q { color: rgba(255,255,255,0.75); }
.tm-edu-q em { font-style: normal; font-weight: 700; }
.tm-edu-sun-card .tm-edu-q em { color: #b45309; }
.tm-edu-sky-card .tm-edu-q em { color: var(--tm-edu-sky); }
.tm-edu-mint-card .tm-edu-q em { color: #059669; }
.tm-edu-coral-card .tm-edu-q em { color: var(--tm-edu-coral); }
.tm-edu-lavender-card .tm-edu-q em { color: var(--tm-edu-lavender); }
.tm-edu-ink-card .tm-edu-q em { color: var(--tm-edu-sun); }
.tm-edu-author {
display: flex;
align-items: center;
gap: 10px;
}
.tm-edu-av {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Nunito', system-ui, sans-serif;
font-size: 12px;
font-weight: 900;
flex-shrink: 0;
}
.tm-edu-sun-av { background: var(--tm-edu-sun); color: #7c5000; }
.tm-edu-sky-av { background: var(--tm-edu-sky); color: #fff; }
.tm-edu-mint-av { background: var(--tm-edu-mint); color: #fff; }
.tm-edu-coral-av { background: var(--tm-edu-coral); color: #fff; }
.tm-edu-lavender-av { background: var(--tm-edu-lavender); color: #fff; }
.tm-edu-ink-av { background: rgba(255,255,255,0.15); color: #fff; }
.tm-edu-an {
font-family: 'Nunito', system-ui, sans-serif;
font-size: 13px;
font-weight: 800;
font-style: normal;
line-height: 1.3;
display: block;
}
.tm-edu-ink-card .tm-edu-an { color: #fff; }
.tm-edu-ar { font-size: 10px; color: #888; margin-top: 2px; }
.tm-edu-ink-card .tm-edu-ar { color: rgba(255,255,255,0.4); }
.tm-edu-achiev {
position: absolute;
bottom: 18px;
right: 18px;
background: rgba(255,183,0,0.9);
color: #7c5000;
font-family: 'Nunito', system-ui, sans-serif;
font-size: 8px;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 20px;
}
@media (max-width: 820px) {
.tm-edu-layout { grid-template-columns: 1fr; }
.tm-edu-feat { grid-column: 1; }
.tm-edu-hdr-stats { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.tm-edu-card { animation: none; transition: none; }
.tm-edu-card:hover { transform: none; }
}