/*!
* ═══════════════════════════════════════════════════════════════
* Student Success Stories — 组件样式
* 打包说明：
* css/student-success.css ← 本文件（含 Font Awesome 图标）
* js/student-success.js ← 交互逻辑
* webfonts/ ← Font Awesome 本地字体文件
*
* 使用方式（在 中引入）：
*
* 在 前引入：
*
* ═══════════════════════════════════════════════════════════════
*/
/* ════════════════════════════════════════════════════════════════
PART 1 · Font Awesome 6 Free (本地字体，无需 CDN)
字体文件位于同级 ../webfonts/ 目录
════════════════════════════════════════════════════════════════ */
/* --- Font Awesome core --- */
.fa,.fa-brands,.fa-classic,.fa-regular,.fa-sharp,.fa-solid,.fab,.far,.fas{
-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;
display:inline-block;font-style:normal;font-variant:normal;line-height:1;text-rendering:auto
}
.fa-classic,.fa-regular,.fa-solid,.far,.fas{font-family:"Font Awesome 6 Free"}
.fa-brands,.fab{font-family:"Font Awesome 6 Brands"}
.fa-solid,.fas{font-weight:900}
.fa-regular,.far{font-weight:400}
/* --- @font-face Solid (fas) --- */
@font-face {
font-family: "Font Awesome 6 Free";
font-style: normal;
font-weight: 900;
font-display: block;
src: url(../webfonts/fa-solid-900.woff2) format("woff2");
}
/* --- @font-face Regular (far) --- */
@font-face {
font-family: "Font Awesome 6 Free";
font-style: normal;
font-weight: 400;
font-display: block;
src: url(../webfonts/fa-regular-400.woff2) format("woff2");
}
/* --- Icon unicode map (仅组件用到的图标) --- */
.fa-graduation-cap:before { content: "\f19d" }
.fa-star-of-life:before { content: "\f621" }
.fa-layer-group:before { content: "\f5fd" }
.fa-university:before,
.fa-building-columns:before { content: "\f19c" }
.fa-trophy:before { content: "\f091" }
.fa-star:before { content: "\f005" }
.fa-expand-alt:before,
.fa-up-right-and-down-left-from-center:before { content: "\f424" }
.fa-times:before,
.fa-xmark:before { content: "\f00d" }
.fa-user-graduate:before { content: "\f501" }
.fa-book-open:before { content: "\f518" }
.fa-map-marker-alt:before,
.fa-location-dot:before { content: "\f3c5" }
.fa-square-root-alt:before,
.fa-square-root-variable:before { content: "\f698" }
.fa-infinity:before { content: "\f534" }
.fa-atom:before { content: "\f5d2" }
.fa-flask:before { content: "\f0c3" }
.fa-dna:before { content: "\f471" }
.fa-balance-scale:before,
.fa-scale-balanced:before { content: "\f24e" }
.fa-pen-nib:before { content: "\f5ad" }
.fa-landmark:before { content: "\f66f" }
/* ════════════════════════════════════════════════════════════════
PART 2 · Student Success Stories 组件样式
════════════════════════════════════════════════════════════════ */
/* ---------- section wrapper ---------- */
.its-student-section {
max-width: 100%;
margin: 0 auto;
padding: 20px 0;
}
/* ---------- section heading ---------- */
.its-section-header {
display: flex; align-items: center; gap: 14px; margin-bottom: 36px;
/* background: linear-gradient(90deg, #ffffff 28%, #084b76 100%); */
/* padding: 5px 2px; */
}
.its-badge-line {
width: 4px; height: 36px; border-radius: 4px; flex-shrink: 0;
background: linear-gradient(180deg, #1D73B7 0%, #3AB4F2 100%);
}
.its-section-header h2 {
font-size: 1.65rem; font-weight: 700; color: #ffffff; letter-spacing: -0.3px;
margin: 0;
}
.its-section-header h2 span {
background: linear-gradient(90deg, #1D73B7, #3AB4F2);
-webkit-background-clip: text;
/* -webkit-text-fill-color: transparent; */
background-clip: text;
}
/* ---------- cards grid ---------- */
.its-students-grid {
display: flex;
justify-content: center;
gap: 28px;
flex-wrap: wrap;
}
/* ---------- single card ---------- */
.its-student-card {
width: 100%;
max-width: 300px;
background: #ffffff;
border: 1px solid #dce8f5;
border-radius: 20px;
padding: 32px 24px 24px;
position: relative;
overflow: hidden;
cursor: pointer;
transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.28s ease;
box-shadow: 0 2px 12px rgba(29,115,183,0.08);
text-align: left;
}
/* top colour line */
.its-student-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: var(--accent-bar, linear-gradient(90deg,#1D73B7,#3AB4F2));
border-radius: 20px 20px 0 0;
}
/* top tint wash */
.its-student-card::after {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 120px;
background: var(--card-tint, linear-gradient(180deg,rgba(232,244,254,0.55) 0%,rgba(255,255,255,0) 100%));
pointer-events: none; border-radius: 20px 20px 0 0;
}
.its-student-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 48px rgba(29,115,183,0.14),
0 0 0 1.5px var(--accent-color, #1D73B7);
}
/* hover hint */
.its-card-hint {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 12px 0 10px;
background: linear-gradient(0deg, var(--hint-wash,rgba(29,115,183,0.07)) 0%, transparent 100%);
border-radius: 0 0 20px 20px;
display: flex; align-items: center; justify-content: center; gap: 5px;
font-size: 0.67rem; font-weight: 600; letter-spacing: 0.3px;
color: var(--accent-color, #1D73B7);
opacity: 0; transform: translateY(4px);
transition: opacity 0.22s, transform 0.22s;
pointer-events: none; z-index: 3;
}
.its-student-card:hover .its-card-hint { opacity: 1; transform: translateY(0); }
/* avatar */
.its-avatar-wrap {
display: flex; justify-content: center;
margin-bottom: 20px; position: relative; z-index: 1;
}
.its-avatar {
width: 80px; height: 80px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 2rem; font-weight: 900; color: #fff;
background: var(--avatar-grad, linear-gradient(135deg,#1D73B7,#3AB4F2));
box-shadow:
0 0 0 5px #fff,
0 0 0 6px var(--avatar-ring, rgba(29,115,183,0.2)),
0 8px 28px var(--avatar-glow, rgba(29,115,183,0.28));
}
/* exam badge */
.its-exam-badge {
display: inline-flex; align-items: center; gap: 6px;
border-radius: 20px; padding: 4px 12px;
font-size: 0.63rem; font-weight: 700; letter-spacing: 0.9px; text-transform: uppercase;
background: var(--badge-bg, #e6f2fb);
border: 1px solid var(--badge-border, #b3d4ee);
color: var(--accent-color, #1D73B7);
margin-bottom: 16px; position: relative; z-index: 1;
}
.its-exam-badge i { font-size: 0.65rem; }
/* name */
.its-student-name {
font-size: 1.45rem; font-weight: 800; color: #0c2d55;
margin: 0 0 6px; line-height: 1.15; position: relative; z-index: 1;
}
/* university line */
.its-student-uni {
display: flex; align-items: flex-start; gap: 6px;
font-size: 0.78rem; color: #6a96be; line-height: 1.5;
margin: 0 0 22px; position: relative; z-index: 1;
}
.its-student-uni i { margin-top: 2px; font-size: 0.7rem; flex-shrink: 0; }
/* result box */
.its-result-box {
display: flex; align-items: center; justify-content: space-between;
background: var(--box-bg, #f0f7ff);
border: 1px solid var(--box-border, #c0daf5);
border-radius: 12px; padding: 14px 16px;
margin-bottom: 16px; position: relative; z-index: 1;
}
.its-result-main {
font-size: 1.5rem; font-weight: 900;
color: var(--accent-color, #1D73B7);
line-height: 1.1; letter-spacing: -0.5px;
}
.its-result-sub { font-size: 0.72rem; color: #7a9fbe; margin-top: 3px; font-weight: 500; }
.its-result-trophy {
font-size: 1.15rem; color: var(--accent-color, #1D73B7);
opacity: 0.75; flex-shrink: 0;
}
/* bottom note */
.its-bottom-note {
display: flex; align-items: center; gap: 7px;
font-size: 0.74rem; font-weight: 600;
color: var(--accent-color, #1D73B7);
position: relative; z-index: 1;
}
.its-bottom-note i { color: #f59e0b; font-size: 0.75rem; flex-shrink: 0; }
/* ════════════════════════════════════
MODAL OVERLAY
════════════════════════════════════ */
.its-modal-overlay {
position: fixed; inset: 0;
background: rgba(10,30,60,0.45);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
z-index: 9999; padding: 20px;
opacity: 0; pointer-events: none;
transition: opacity 0.28s ease;
}
.its-modal-overlay.open { opacity: 1; pointer-events: all; }
/* ════════════════════════════════════
STUDENT MODAL
════════════════════════════════════ */
.its-student-modal {
background: #fff; border: 1px solid #dce8f5; border-radius: 20px;
width: 100%; max-width: 620px;
box-shadow: 0 24px 70px rgba(10,40,90,0.16);
transform: translateY(20px) scale(0.97);
transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.28s ease;
opacity: 0; overflow: hidden;
max-height: 90vh; display: flex; flex-direction: column;
}
.its-modal-overlay.open .its-student-modal { transform: translateY(0) scale(1); opacity: 1; }
.its-sm-accent { height: 4px; flex-shrink: 0; }
.its-sm-header {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 24px 16px; flex-shrink: 0;
border-bottom: 1px solid #edf2f8;
}
.its-sm-header-left { display: flex; align-items: center; gap: 14px; }
.its-sm-avatar {
width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 1.35rem; font-weight: 800; color: #fff;
}
.its-sm-name { font-size: 1.1rem; font-weight: 800; color: #0c2d55; margin-bottom: 5px; }
.its-sm-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.its-sm-pill {
display: inline-flex; align-items: center; gap: 5px;
border-radius: 20px; padding: 3px 10px;
font-size: 0.68rem; font-weight: 600;
}
.its-sm-pill.score {
background: var(--sm-badge-bg, #e6f2fb);
border: 1px solid var(--sm-badge-border, #b3d4ee);
color: var(--sm-color, #1D73B7);
}
.its-sm-pill.uni { background: #f0f5fb; border: 1px solid #dce8f5; color: #3a6080; }
.its-sm-pill i { font-size: 0.6rem; }
.its-modal-close {
width: 32px; height: 32px; border-radius: 50%;
background: #f0f5fb; border: 1px solid #dce8f5;
color: #8aaccb; font-size: 0.85rem;
display: flex; align-items: center; justify-content: center;
cursor: pointer; flex-shrink: 0;
transition: background 0.2s, color 0.2s;
border: 1px solid #dce8f5;
}
.its-modal-close:hover { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }
.its-sm-body { padding: 0 24px 30px; overflow-y: auto; flex: 1; }
.its-sm-body::-webkit-scrollbar { width: 4px; }
.its-sm-body::-webkit-scrollbar-track { background: transparent; }
.its-sm-body::-webkit-scrollbar-thumb { background: #dce8f5; border-radius: 4px; }
.its-sm-section { padding: 18px 0 0; border-top: 1px solid #edf2f8; margin-top: 18px; }
.its-sm-section:first-child { border-top: none; margin-top: 18px; }
.its-sm-section-label {
display: flex; align-items: center; gap: 7px;
font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 1.1px; color: #8aaccb; margin-bottom: 12px;
}
.its-sm-section-label i { font-size: 0.7rem; }
.its-sm-bg-text {
background: #f8fafc; border: 1px solid #edf2f8; border-radius: 10px;
padding: 14px 16px; font-size: 0.83rem; color: #3a6080; line-height: 1.65;
}
.its-sm-subjects { display: flex; flex-wrap: wrap; gap: 8px; }
.its-sm-chip {
display: inline-flex; align-items: center; gap: 8px;
background: #f8fafc; border: 1px solid #e4edf8; border-radius: 10px;
padding: 8px 14px; font-size: 0.8rem; font-weight: 500; color: #2a4f70;
min-width: 140px;
}
.its-sm-chip-icon {
width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 0.72rem;
background: var(--sm-badge-bg, #e6f2fb);
color: var(--sm-color, #1D73B7);
}
.its-sm-uni-list { display: flex; flex-direction: column; gap: 7px; }
.its-sm-uni-row {
display: flex; align-items: center; gap: 12px;
background: #f8fafc; border: 1px solid #edf2f8; border-radius: 10px;
padding: 10px 14px;
}
.its-sm-uni-name {
display: flex; align-items: center; gap: 8px;
font-size: 0.81rem; font-weight: 500; color: #1e3a5f;
}
.its-sm-uni-name i { color: #8aaccb; font-size: 0.75rem; flex-shrink: 0; }
/* ---------- responsive ---------- */
@media (max-width: 680px) {
.its-students-grid { gap: 18px; }
.its-student-card { max-width: 100%; }
}
@media (max-width: 600px) {
.its-sm-body { padding: 16px 18px 24px; }
}