/* ============================================================
壹思唯教育 · Corporate Trust Design System (v2)
Indigo → Violet 现代SaaS风格 · 纯静态原生CSS
============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
/* Color Tokens */
--bg: #F8FAFC;
--surface: #FFFFFF;
--primary: #4F46E5;
--primary-dark: #4338CA;
--secondary: #7C3AED;
--gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
--gradient-soft: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 100%);
--text: #0F172A;
--muted: #64748B;
--success: #10B981;
--border: #E2E8F0;
--indigo-50: #EEF2FF;
--violet-50: #F5F3FF;
--emerald-50: #ECFDF5;
--slate-100: #F1F5F9;
--slate-900: #0F172A;
--indigo-900: #312E81;
--indigo-950: #1E1B4B;
/* Colored Shadows (signature) */
--shadow-card: 0 4px 20px -2px rgba(79, 70, 229, 0.10);
--shadow-hover: 0 10px 25px -5px rgba(79, 70, 229, 0.15), 0 8px 10px -6px rgba(79, 70, 229, 0.10);
--shadow-btn: 0 4px 14px 0 rgba(79, 70, 229, 0.30);
--shadow-glow: 0 0 20px rgba(79, 70, 229, 0.35);
--r-card: 12px;
--r-input: 8px;
}
html { scroll-behavior: smooth; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
color: var(--text);
background: var(--bg);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
/* Gradient text utility */
.text-gradient {
background: var(--gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* ============================================================
Navigation
============================================================ */
.navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
background: rgba(255,255,255,0.85);
backdrop-filter: saturate(180%) blur(16px);
-webkit-backdrop-filter: saturate(180%) blur(16px);
border-bottom: 1px solid var(--border);
}
.nav-inner {
max-width: 1280px; margin: 0 auto; padding: 0 24px;
display: flex; align-items: center; justify-content: space-between;
height: 72px;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 40px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-links a {
padding: 8px 14px; border-radius: var(--r-input);
font-size: 14.5px; font-weight: 500; color: #334155;
transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--primary); background: var(--indigo-50); }
.nav-links a.active { color: var(--primary); background: var(--indigo-50); font-weight: 600; }
.nav-cta {
background: var(--gradient) !important; color: #fff !important;
padding: 9px 20px !important; border-radius: 999px !important;
font-weight: 600 !important; box-shadow: var(--shadow-btn);
margin-left: 6px;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(79,70,229,.4); color:#fff !important; background: var(--gradient) !important; }
.mobile-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: none; border-radius: 10px; cursor: pointer; color: var(--primary); line-height: 1; }
.mobile-toggle:active { background: var(--indigo-50); }
/* ============================================================
Hero — soft blobs + isometric image
============================================================ */
.hero { position: relative; overflow: hidden; padding: 148px 0 110px; background: var(--bg); }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); z-index: 0; pointer-events: none; }
.blob-1 { width: 520px; height: 520px; top: -160px; right: -120px; background: rgba(99,102,241,.18); }
.blob-2 { width: 420px; height: 420px; bottom: -180px; left: -120px; background: rgba(139,92,246,.14); }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px; background: var(--indigo-50); color: var(--primary);
border: 1px solid #C7D2FE; border-radius: 999px;
font-size: 13px; font-weight: 600; margin-bottom: 22px;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.hero h1 {
font-size: 50px; line-height: 1.12; font-weight: 800;
letter-spacing: -0.02em; color: var(--text); margin-bottom: 20px;
}
.hero p.hero-sub { font-size: 17px; color: var(--muted); line-height: 1.7; margin-bottom: 34px; max-width: 540px; }
.hero-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 13px 28px; border-radius: 999px;
font-size: 15px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.btn-primary { background: var(--gradient); color: #fff; box-shadow: var(--shadow-btn); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(79,70,229,.42); }
.btn-secondary { background: var(--surface); color: #334155; border-color: var(--border); }
.btn-secondary:hover { background: var(--slate-100); border-color: #CBD5E1; transform: translateY(-2px); }
.btn svg { width: 17px; height: 17px; }
.hero-visual { position: relative; perspective: 2000px; }
.hero-card {
transform: rotateX(5deg) rotateY(-10deg);
transition: transform .5s ease-out;
border-radius: 18px; overflow: hidden;
box-shadow: 0 30px 60px -15px rgba(79,70,229,.35), 0 12px 24px -8px rgba(79,70,229,.2);
border: 1px solid #fff;
}
.hero-visual:hover .hero-card { transform: rotateX(2deg) rotateY(-6deg); }
.hero-card img { width: 100%; }
.hero-float {
position: absolute; background: var(--surface);
border-radius: var(--r-card); padding: 14px 18px;
box-shadow: var(--shadow-hover); border: 1px solid var(--border);
display: flex; align-items: center; gap: 12px;
}
.hero-float .ico {
width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--indigo-50); color: var(--primary);
}
.hero-float .ico svg { width: 21px; height: 21px; }
.hero-float .num { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; letter-spacing: -.02em; }
.hero-float .lbl { font-size: 12px; color: var(--muted); margin-top: 3px; }
.hero-float.f1 { bottom: -22px; left: -28px; }
.hero-float.f2 { top: -20px; right: -14px; }
/* ============================================================
Stats
============================================================ */
.stats-wrap { position: relative; z-index: 5; margin-top: -56px; margin-bottom: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.stat-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-card); padding: 26px 20px; text-align: center;
box-shadow: var(--shadow-card); transition: transform .2s, box-shadow .2s;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.stat-num { font-size: 36px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.stat-num .unit { font-size: 18px; font-weight: 700; }
.stat-label { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
/* ============================================================
Sections
============================================================ */
.section { padding: 96px 0; }
.section.alt { background: var(--surface); }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 56px; }
.section-tag {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 14px; background: var(--indigo-50); color: var(--primary);
border-radius: 999px; font-size: 13px; font-weight: 600; margin-bottom: 16px;
}
.section-title { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--text); margin-bottom: 14px; }
.section-desc { font-size: 16px; color: var(--muted); line-height: 1.7; }
/* ============================================================
Course cards — unified indigo system
============================================================ */
.courses-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.course-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-card); padding: 28px 22px;
box-shadow: var(--shadow-card); transition: transform .25s, box-shadow .25s, border-color .25s;
display: flex; flex-direction: column;
}
.course-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: #C7D2FE; }
.course-ico {
width: 54px; height: 54px; border-radius: 14px; margin-bottom: 18px;
display: flex; align-items: center; justify-content: center;
background: var(--gradient-soft); color: var(--primary);
}
.course-ico svg { width: 27px; height: 27px; }
.course-card h3 { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 8px; letter-spacing: -.01em; }
.course-card > p { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 18px; flex-grow: 1; }
.course-meta { display: flex; gap: 10px; margin-bottom: 18px; }
.course-meta .m {
flex: 1; background: var(--bg); border-radius: var(--r-input); padding: 10px 8px; text-align: center;
}
.course-meta .m .v { font-size: 18px; font-weight: 800; color: var(--primary); letter-spacing: -.01em; }
.course-meta .m .k { font-size: 11px; color: var(--muted); margin-top: 2px; }
.course-link {
display: inline-flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 600; color: var(--primary);
}
.course-link svg { width: 15px; height: 15px; transition: transform .2s; }
.course-card:hover .course-link svg { transform: translateX(3px); }
/* ============================================================
Advantage cards
============================================================ */
.adv-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.adv-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-card); padding: 32px 28px;
box-shadow: var(--shadow-card); transition: transform .25s, box-shadow .25s;
}
.adv-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.adv-ico {
width: 52px; height: 52px; border-radius: 13px; margin-bottom: 20px;
display: flex; align-items: center; justify-content: center;
}
.adv-ico svg { width: 25px; height: 25px; }
.adv-ico.i1 { background: var(--indigo-50); color: var(--primary); }
.adv-ico.i2 { background: var(--violet-50); color: var(--secondary); }
.adv-ico.i3 { background: var(--emerald-50); color: var(--success); }
.adv-card h3 { font-size: 18.5px; font-weight: 700; margin-bottom: 10px; letter-spacing: -.01em; }
.adv-card p { font-size: 14.5px; color: var(--muted); line-height: 1.7; }
/* ============================================================
Gallery
============================================================ */
.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.g-item { border-radius: var(--r-card); overflow: hidden; position: relative; box-shadow: var(--shadow-card); border: 1px solid var(--border); }
.g-item img { width: 100%; height: 230px; object-fit: cover; transition: transform .5s ease; }
.g-item:hover img { transform: scale(1.06); }
.g-cap {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 34px 16px 14px; color: #fff; font-size: 14px; font-weight: 600;
background: linear-gradient(transparent, rgba(15,23,42,.78));
}
/* ============================================================
Zig-zag feature
============================================================ */
.zigzag { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.zigzag h2 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 14px 0 16px; }
.zigzag p { color: var(--muted); font-size: 15px; line-height: 1.8; margin-bottom: 12px; }
.check-list { list-style: none; margin-top: 18px; }
.check-list li {
display: flex; align-items: flex-start; gap: 10px;
padding: 7px 0; font-size: 14.5px; color: var(--text);
}
.check-list li svg { width: 19px; height: 19px; color: var(--success); flex-shrink: 0; margin-top: 2px; }
.zigzag-img { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-hover); border: 1px solid var(--border); }
/* ============================================================
Trust bar (dark indigo)
============================================================ */
.trust { position: relative; overflow: hidden; background: var(--indigo-950); color: #fff; padding: 64px 0; }
.trust::before { content:''; position:absolute; width:500px;height:500px;border-radius:50%;filter:blur(100px);background:rgba(124,58,237,.25);top:-200px;left:50%;transform:translateX(-50%); }
.trust-grid { position: relative; z-index:2; display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; text-align: center; }
.t-item .t-ico {
width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 14px;
background: rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center;
}
.t-item .t-ico svg { width: 25px; height: 25px; color: #C4B5FD; }
.t-item h4 { font-size: 16.5px; font-weight: 700; margin-bottom: 6px; }
.t-item p { font-size: 13.5px; color: rgba(255,255,255,.65); line-height: 1.6; }
/* ============================================================
Final CTA — deep indigo gradient
============================================================ */
.cta { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--indigo-900), var(--indigo-950)); color: #fff; padding: 88px 0; text-align: center; }
.cta::before { content:''; position:absolute; width:600px;height:300px;border-radius:50%;filter:blur(100px);background:rgba(124,58,237,.3);top:-100px;left:50%;transform:translateX(-50%); }
.cta h2 { position:relative; font-size: 34px; font-weight: 800; letter-spacing:-.02em; margin-bottom: 14px; }
.cta p { position:relative; font-size: 16.5px; color: rgba(255,255,255,.72); margin-bottom: 32px; }
.cta .btn-light, .cta-section .btn-light {
position: relative; background: #fff; color: var(--primary-dark);
box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.cta .btn-light:hover, .cta-section .btn-light:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.32); }
/* ============================================================
Footer
============================================================ */
.footer { background: var(--slate-900); color: rgba(255,255,255,.65); padding: 56px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 36px; }
.footer-brand img { height: 38px; background:#fff; padding:5px 10px; border-radius:8px; margin-bottom: 16px; }
.footer-brand p { font-size: 13.5px; line-height: 1.75; color: rgba(255,255,255,.5); max-width: 320px; }
.footer h4 { color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 18px; }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 11px; }
.footer ul li a, .footer ul li { font-size: 13.5px; color: rgba(255,255,255,.5); transition: color .2s; display:flex; gap:8px; align-items:center; }
.footer ul li a:hover { color: #C4B5FD; }
.footer ul li svg { width:15px;height:15px;flex-shrink:0;color:#818CF8; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.38); }
/* ============================================================
Responsive
============================================================ */
@media (max-width: 1024px) {
.hero h1 { font-size: 40px; }
.courses-grid { grid-template-columns: repeat(2,1fr); }
.hero-inner { grid-template-columns: 1fr; gap: 48px; }
.hero-visual { max-width: 480px; }
}
@media (max-width: 768px) {
.nav-links { display: none; }
.nav-links.open {
display: flex; flex-direction: column; align-items: stretch; gap: 4px;
position: absolute; top: 72px; left: 0; right: 0; background: #fff;
padding: 14px; box-shadow: 0 12px 30px rgba(15,23,42,.12);
}
.nav-links.open .nav-cta { margin-left: 0; text-align:center; }
.mobile-toggle { display: flex; }
.hero { padding: 148px 0 84px; }
.hero h1 { font-size: 32px; }
.section { padding: 64px 0; }
.section-title { font-size: 26px; }
.stats-grid { grid-template-columns: repeat(2,1fr); gap: 14px; }
.adv-grid, .gallery-grid, .trust-grid, .zigzag { grid-template-columns: 1fr; gap: 20px; }
.zigzag { gap: 32px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
.hero-float.f1 { left: 0; }
.hero-float.f2 { right: 0; }
}
@media (max-width: 600px) {
.courses-grid { grid-template-columns: 1fr; }
.stat-label { font-size: 14px; }
.course-meta .k { font-size: 12px; }
.hero-float .lbl { font-size: 12.5px; }
.section-tag, .hero-badge { font-size: 13.5px; }
.footer ul li a, .footer ul li { padding: 3px 0; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
.hero h1 { font-size: 28px; }
.hero-buttons .btn { width: 100%; justify-content: center; }
}
/* ============================================================
课程页 / 关于页 组件
============================================================ */
/* Page hero (课程页) */
.page-hero { position: relative; overflow: hidden; background: var(--bg); padding: 140px 0 92px; }
.page-hero .blob-1 { width: 480px; height: 480px; top: -180px; right: -100px; }
.page-hero .blob-2 { width: 380px; height: 380px; bottom: -200px; left: -120px; }
.page-hero-inner { position: relative; z-index: 2; display: flex; align-items: center; gap: 26px; }
.page-hero-icon {
flex-shrink: 0; width: 76px; height: 76px; border-radius: 20px;
display: flex; align-items: center; justify-content: center;
background: var(--gradient); color: #fff; box-shadow: var(--shadow-btn);
}
.page-hero-icon svg { width: 38px; height: 38px; }
.page-hero h1 { font-size: 38px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 12px; }
.page-hero p { font-size: 16.5px; color: var(--muted); line-height: 1.7; max-width: 720px; }
/* Course stats */
.course-stats { position: relative; z-index: 5; margin-top: -52px; display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.course-stat-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
padding: 26px 18px; text-align: center; box-shadow: var(--shadow-card);
transition: transform .2s, box-shadow .2s;
}
.course-stat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.cs-num { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.cs-label { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
/* Section header (居中，兼容旧命名) */
.section-header { text-align: center; max-width: 680px; margin: 0 auto 52px; }
.section-header .section-title { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 14px 0 12px; }
.section-header .section-desc { font-size: 16px; color: var(--muted); line-height: 1.7; }
/* About content 两栏图文 */
.about-content { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.about-content.reverse .about-text { order: 2; }
.about-content.reverse .about-image { order: 1; }
.about-text h2 { font-size: 29px; font-weight: 800; letter-spacing: -.02em; margin: 12px 0 16px; line-height: 1.2; }
.about-text p { color: var(--muted); font-size: 15px; line-height: 1.85; margin-bottom: 12px; }
.about-text ul { list-style: none; margin-top: 18px; }
.about-text ul li {
display: flex; align-items: flex-start; gap: 10px; padding: 6px 0;
font-size: 14.5px; color: var(--text);
}
.about-text ul li::before {
content: ''; flex-shrink: 0; width: 19px; height: 19px; margin-top: 2px;
background: var(--success); border-radius: 50%;
-webkit-mask: url("data:image/svg+xml;utf8,") center/12px no-repeat;
mask: url("data:image/svg+xml;utf8,") center/12px no-repeat;
}
.about-image { border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-hover); border: 1px solid var(--border); }
.about-image img { width: 100%; }
/* Course table */
.course-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; overflow-x: auto; }
.course-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.course-table thead th {
background: var(--gradient); color: #fff; text-align: left;
padding: 16px 20px; font-size: 14.5px; font-weight: 600;
}
.course-table tbody td { padding: 16px 20px; border-bottom: 1px solid var(--border); font-size: 14px; color: #334155; vertical-align: top; }
.course-table tbody tr:last-child td { border-bottom: none; }
.course-table tbody tr { transition: background .15s; }
.course-table tbody tr:hover { background: var(--indigo-50); }
.course-table .class-type { font-weight: 700; color: var(--primary); white-space: nowrap; }
/* Teacher card */
.teacher-card {
display: flex; gap: 26px; align-items: flex-start;
background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
padding: 32px; box-shadow: var(--shadow-card);
}
.teacher-avatar {
flex-shrink: 0; width: 72px; height: 72px; border-radius: 50%;
background: var(--gradient); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 28px; font-weight: 800; box-shadow: var(--shadow-btn);
}
.teacher-info h3 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.teacher-title { font-size: 14px; font-weight: 600; color: var(--primary); margin: 4px 0 12px; }
.teacher-info p { font-size: 14.5px; color: var(--muted); line-height: 1.8; }
/* Advantage cards (课程页特色/适合人群) */
.advantages-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.advantage-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
padding: 28px 24px; box-shadow: var(--shadow-card); transition: transform .25s, box-shadow .25s;
}
.advantage-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.advantage-icon {
width: 52px; height: 52px; border-radius: 13px; margin-bottom: 18px;
display: flex; align-items: center; justify-content: center;
background: var(--indigo-50); color: var(--primary);
}
.advantage-icon svg { width: 25px; height: 25px; }
.advantages-grid .advantage-card:nth-child(3n+2) .advantage-icon { background: var(--violet-50); color: var(--secondary); }
.advantages-grid .advantage-card:nth-child(3n) .advantage-icon { background: var(--emerald-50); color: var(--success); }
.advantage-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 9px; letter-spacing: -.01em; }
.advantage-card p { font-size: 14px; color: var(--muted); line-height: 1.7; }
/* Gallery (课程页，兼容旧命名) */
.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.gallery-item { position: relative; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); border: 1px solid var(--border); }
.gallery-item img { width: 100%; height: 220px; object-fit: cover; transition: transform .5s; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-caption {
position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 16px 13px;
color: #fff; font-size: 14px; font-weight: 600;
background: linear-gradient(transparent, rgba(15,23,42,.78));
}
/* CTA section (课程页) */
.cta-section { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--indigo-900), var(--indigo-950)); color: #fff; padding: 84px 0; text-align: center; }
.cta-section::before { content:''; position:absolute; width:560px;height:280px;border-radius:50%;filter:blur(100px);background:rgba(124,58,237,.3);top:-90px;left:50%;transform:translateX(-50%); }
.cta-section h2 { position:relative; font-size: 32px; font-weight: 800; letter-spacing:-.02em; margin-bottom: 12px; }
.cta-section p { position:relative; font-size:16px; color: rgba(255,255,255,.72); margin-bottom: 30px; }
.cta-section .btn { position: relative; }
/* ===== About 页 ===== */
.about-hero { position: relative; overflow: hidden; background: var(--bg); padding: 140px 0 72px; text-align: center; }
.about-hero .blob-1 { width: 520px; height: 520px; top: -200px; left: 50%; transform: translateX(-50%); }
.about-hero h1 { position: relative; z-index: 2; font-size: 44px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; }
.about-hero p { position: relative; z-index: 2; font-size: 17px; color: var(--muted); max-width: 720px; margin: 0 auto; line-height: 1.7; }
.about-subnav {
position: sticky; top: 72px; z-index: 900;
background: rgba(255,255,255,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--border);
}
.about-subnav-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; gap: 6px; overflow-x: auto; }
.about-subnav a {
padding: 15px 18px; font-size: 14.5px; font-weight: 500; color: var(--muted);
border-bottom: 2px solid transparent; white-space: nowrap; transition: color .2s, border-color .2s;
}
.about-subnav a:hover { color: var(--primary); }
.about-subnav a.active { color: var(--primary); font-weight: 700; border-bottom-color: var(--primary); }
.about-section { padding: 88px 0; scroll-margin-top: 130px; }
.about-section.tint { background: var(--surface); }
/* 理念引用卡 */
.quote-card { max-width: 820px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 42px; box-shadow: var(--shadow-card); position: relative; }
.quote-card::before { content:''; position:absolute; left:0; top:32px; bottom:32px; width:4px; border-radius:4px; background: var(--gradient); }
.quote-card .quote { font-size: 17px; line-height: 1.9; color: var(--text); }
.quote-card .quote-meta { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 14px; color: var(--muted); line-height: 1.7; }
.quote-card .quote-meta strong { color: var(--primary); }
/* About 战绩 */
.results-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-bottom: 36px; }
.results-stats .rstat { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-card); padding: 24px 18px; text-align:center; box-shadow: var(--shadow-card); }
.results-stats .rstat .n { font-size: 32px; font-weight: 800; letter-spacing:-.02em; }
.results-stats .rstat .l { font-size: 13px; color: var(--muted); margin-top: 6px; }
.results-table { background: var(--surface); border:1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden; overflow-x: auto; }
.results-table table { width:100%; border-collapse: collapse; min-width: 600px; }
.results-table th { background: var(--gradient); color:#fff; text-align:left; padding:15px 20px; font-size:14px; font-weight:600; }
.results-table td { padding:15px 20px; border-bottom:1px solid var(--border); font-size:14px; color:#334155; }
.results-table tr:last-child td { border-bottom:none; }
.results-table tr:hover td { background: var(--indigo-50); }
.results-table .exam-name { font-weight: 700; color: var(--primary); white-space:nowrap; }
.results-table .full-score { font-weight: 700; white-space:nowrap; }
/* Honors */
.honors-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.honor-card {
display: flex; gap: 16px; align-items: flex-start;
background: var(--surface); border:1px solid var(--border); border-radius: var(--r-card);
padding: 24px; box-shadow: var(--shadow-card); transition: transform .25s, box-shadow .25s;
}
.honor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.honor-icon {
flex-shrink:0; width:48px; height:48px; border-radius:12px;
display:flex; align-items:center; justify-content:center;
background: var(--gradient-soft); color: var(--primary);
}
.honor-icon svg { width:24px; height:24px; }
.honor-card h4 { font-size:16px; font-weight:700; margin-bottom:5px; }
.honor-card p { font-size:13.5px; color:var(--muted); line-height:1.65; }
/* Contact */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: start; }
.contact-info-card {
background: linear-gradient(150deg, var(--indigo-900), var(--indigo-950));
color: #fff; border-radius: 16px; padding: 36px 32px; position: relative; overflow: hidden;
}
.contact-info-card::before { content:''; position:absolute; width:300px;height:300px;border-radius:50%;filter:blur(80px);background:rgba(124,58,237,.3);top:-120px;right:-100px; }
.contact-info-card h3 { position:relative; font-size:21px; font-weight:700; margin-bottom:24px; }
.contact-info-item { position:relative; display:flex; gap:14px; align-items:flex-start; margin-bottom:20px; }
.ci-icon {
flex-shrink:0; width:40px;height:40px;border-radius:10px;
background: rgba(255,255,255,.12); display:flex;align-items:center;justify-content:center;
}
.ci-icon svg { width:19px;height:19px;color:#C4B5FD; }
.ci-label { font-size:12.5px; color: rgba(255,255,255,.6); margin-bottom:2px; }
.ci-value { font-size:15px; font-weight:600; line-height:1.5; }
.contact-info-card .city-note { position:relative; margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,255,255,.15); font-size:13px; color:rgba(255,255,255,.72); line-height:1.8; }
.contact-form { background: var(--surface); border:1px solid var(--border); border-radius:16px; padding:36px 32px; box-shadow: var(--shadow-card); }
.contact-form h3 { font-size:21px; font-weight:700; margin-bottom:24px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:13.5px; font-weight:600; color:#334155; margin-bottom:7px; }
.form-group input, .form-group select, .form-group textarea {
width:100%; padding:11px 14px; font-size:15px; font-family:inherit; color:var(--text);
background:#fff; border:1px solid var(--border); border-radius:var(--r-input);
transition: border-color .15s, box-shadow .15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.15);
}
.form-group textarea { resize: vertical; }
.form-submit {
width:100%; padding:14px; border:none; border-radius:999px; cursor:pointer;
background: var(--gradient); color:#fff; font-size:15.5px; font-weight:600; font-family:inherit;
box-shadow: var(--shadow-btn); transition: transform .2s, box-shadow .2s;
}
.form-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(79,70,229,.42); }
/* 表单状态、蜜罐与辅助提示 */
.form-hp { display:none !important; }
.form-status { display:none; margin-top:14px; padding:11px 15px; border-radius:10px; font-size:14px; line-height:1.6; }
.form-status.success { background:#ECFDF5; color:#047857; border:1px solid #A7F3D0; }
.form-status.error { background:#FEF2F2; color:#B91C1C; border:1px solid #FECACA; }
.form-submit:disabled { opacity:.65; cursor:not-allowed; transform:none !important; }
.form-tip { margin:12px 0 0; font-size:12.5px; color:var(--muted); text-align:center; line-height:1.6; }
@media (max-width:640px){ .form-group input,.form-group select,.form-group textarea{ font-size:16px; } }
/* 课程页/关于页响应式 */
@media (max-width: 1024px) {
.about-content { grid-template-columns: 1fr; gap: 36px; }
.about-content.reverse .about-text { order: 1; }
.about-content.reverse .about-image { order: 2; }
.contact-grid { grid-template-columns: 1fr; }
.honors-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
.page-hero { padding: 128px 0 76px; }
.page-hero-inner { flex-direction: column; align-items: flex-start; gap: 18px; }
.page-hero h1 { font-size: 28px; }
.about-hero { padding: 128px 0 56px; }
.about-hero h1 { font-size: 32px; }
.course-stats { grid-template-columns: repeat(2,1fr); gap:14px; }
.results-stats { grid-template-columns: repeat(2,1fr); gap:14px; }
.advantages-grid, .gallery-grid, .honors-grid { grid-template-columns: 1fr; }
.about-section { padding: 64px 0; }
.teacher-card { flex-direction: column; padding: 26px; gap:18px; }
.quote-card { padding: 28px 24px; }
.form-row { grid-template-columns: 1fr; gap: 0; }
.cta-section h2 { font-size: 26px; }
.about-subnav { top: 72px; }
}
@media (max-width: 600px) {
.cs-num { font-size: 27px; }
.cs-label { font-size: 12.5px; }
.contact-info-card, .contact-form { padding:28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
html { scroll-behavior: auto; }
}