/* 机器人编程教育网站样式文件 */ /* ====== 深色主题变量（与你现有 Tailwind 配色一致） ====== */ :root { --bg-primary: #0F172A; /* 与 tailwind.config 的 primary 一致 */ --bg-dark-80: rgba(15, 23, 42, .80); --bg-dark-60: rgba(15, 23, 42, .60); --bg-dark-40: rgba(15, 23, 42, .40); --glass-blur: 12px; /* iOS安全区变量 */ --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); /* 移动端底部固定CTA的高度（JS会动态更新，下面是兜底值） */ --sticky-cta-height: 72px; } /* 页面统一深色基底（如果你已用，这段作为兜底更稳） */ html, body { background: var(--bg-primary); } /* ====== 导航壳：仅深色系 ====== */ #navbar.nav-shell { padding-top: var(--sat) !important; /* 刘海/圆角安全区 */ background: linear-gradient(to bottom, var(--bg-dark-80), var(--bg-dark-60) 45%, var(--bg-dark-40) 100%) !important; /* 顶部透明→半透的优雅过渡 */ -webkit-backdrop-filter: blur(var(--glass-blur)) !important; backdrop-filter: blur(var(--glass-blur)) !important; } /* 顶部还未滚动时：更透明，衔接首屏背景 */ #navbar.nav-shell.is-top { background: linear-gradient(to bottom, var(--bg-dark-60), var(--bg-dark-40) 35%, rgba(15, 23, 42, 0) 100%) !important; } /* 下滑后收缩：实色一点，保证可读性且不显"白" */ #navbar.nav-shell.is-solid { background: var(--bg-dark-80) !important; } /* 当浏览器不支持 backdrop-filter 时的视觉兜底（仍保持深色） */ @supports not ((backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))) { #navbar.nav-shell, #navbar.nav-shell.is-top, #navbar.nav-shell.is-solid { background: var(--bg-dark-80) !important; } } /* ====== 导航栏文本颜色：确保在深色背景上可见 ====== */ #navbar.nav-shell .nav-link, #navbar.nav-shell .nav-link span, #navbar.nav-shell a, #navbar.nav-shell .text-gradient, #navbar.nav-shell .text-gray-400 { color: white !important; } /* 保持激活状态的颜色 */ #navbar.nav-shell .nav-link.text-secondary { color: #06B6D4 !important; /* secondary 颜色 */ } /* 汉堡菜单按钮 */ #navbar.nav-shell .hamburger-lines .line { background-color: white !important; } /* 图标颜色 */ #navbar.nav-shell .fa, #navbar.nav-shell .fas, #navbar.nav-shell .far, #navbar.nav-shell .fab { color: white !important; } /* ========== 移动端优化 - 点击热区 ========== */ /* 统一可点击区域样式，提高点击命中率 */ .tappable { min-height: 44px; min-width: 44px; padding: .625rem .875rem; } .tappable--icon { gap: .5rem; } /* 为所有可点击元素添加统一的触控热区 */ .nav-link, .mobile-nav-link, .course-cta-btn, .age-nav-btn, .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .625rem .875rem; } /* ========== iOS安全区适配 ========== */ /* 安全区样式类 */ .safe-top { padding-top: var(--sat); } .safe-bottom { padding-bottom: var(--sab); } .safe-x { padding-left: var(--sal); padding-right: var(--sar); } /* 导航栏安全区适配 */ #navbar { padding-top: calc(1rem + var(--sat)); } /* CTA按钮样式 */ .mobile-cta-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 0.75rem 1.5rem; border-radius: 0.75rem; text-decoration: none; font-weight: 600; text-align: center; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); } .mobile-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4); } .mobile-cta-btn:active { transform: translateY(0); } /* 快捷操作按钮 */ .mobile-quick-action { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0; color: #64748b; text-decoration: none; transition: all 0.2s ease; } .mobile-quick-action:hover { background: #e2e8f0; color: #475569; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } /* 响应式调整 */ @media (max-width: 640px) { #mobile-menu .absolute.right-0 { width: 85vw; } } @media (max-width: 480px) { #mobile-menu .absolute.right-0 { width: 90vw; } .mobile-nav-link { padding: 0.875rem 1.25rem; } } /* 底部元素安全区适配 */ footer, .sticky-cta { padding-bottom: calc(1rem + var(--sab)); } /* ========== 现代视口单位 ========== */ /* 修复移动端100vh问题，使用动态视口高度 */ .min-h-screen-fix { min-height: 100dvh; /* 新版浏览器 */ min-height: 100svh; /* iOS 16+ 更稳定 */ } /* 为不支持dvh的旧浏览器提供兜底 */ @supports not (height: 100dvh) { .min-h-screen-fix { min-height: 100vh; } } /* ========== 手势与滚动优化 ========== */ /* 减少300ms双击延迟，避免误触缩放 */ html, body { touch-action: manipulation; } /* 防止嵌套滚动回弹穿透 */ body { overscroll-behavior-y: none; } /* 模态框和抽屉滚动控制 */ .modal, .drawer { overscroll-behavior: contain; } /* ========== 触控反馈增强 ========== */ /* 为触控设备提供更好的点击反馈 */ .nav-link:active, .mobile-nav-link:active, .btn-primary:active, .btn-secondary:active { transform: translateY(1px) scale(.99); filter: brightness(1.05); } /* 焦点可见性优化 */ .nav-link:focus-visible, .mobile-nav-link:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible { outline: 2px solid rgba(6, 182, 212, .6); outline-offset: 2px; border-radius: .75rem; } /* ========== 图片与性能优化 ========== */ /* 离屏内容延迟渲染 */ .section-lazy { content-visibility: auto; contain-intrinsic-size: 1000px; } /* ========== 移动端横向滑动优化 ========== */ /* 课程卡片横向滑动容器 */ @media (max-width: 768px) { .course-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding: 0 1rem; margin: 0 -1rem; scrollbar-width: none; -ms-overflow-style: none; } .course-grid::-webkit-scrollbar { display: none; } .course-card-modern { flex: 0 0 280px; scroll-snap-align: start; scroll-snap-stop: always; } /* 滑动指示器 */ .course-grid::after { content: ''; flex: 0 0 1px; } } /* ========== 触控细节优化 ========== */ /* 移除默认点击高亮 */ * { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* 允许文本选择的元素 */ p, span, h1, h2, h3, h4, h5, h6, li, td, th, input, textarea { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } /* 自定义点击高亮效果 */ .tappable, .nav-link, .mobile-nav-link, .btn-primary, .btn-secondary { -webkit-tap-highlight-color: rgba(6, 182, 212, 0.2); } /* ========== 全局 ========== */ * { scroll-behavior: smooth; } body { line-height: 1.7; letter-spacing: 0.025em; } /* 容器 */ .container { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; } @media (min-width: 1536px) { .container { padding: 0 2rem; } } /* ========== 时间轴 ========== */ .timeline { position: relative; padding: 2rem 0; } .timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: linear-gradient(to bottom, #3b82f6, #8b5cf6); transform: translateX(-50%); } .timeline-item { position: relative; margin: 2rem 0; opacity: 0; transform: translateY(50px); transition: all .6s ease; } .timeline-item.animate { opacity: 1; transform: translateY(0); } .timeline-item:nth-child(odd) { padding-right: 50%; text-align: right; } .timeline-item:nth-child(even) { padding-left: 50%; text-align: left; } .timeline-content { background: #fff; padding: 2rem; border-radius: 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .1); position: relative; } .timeline-item:nth-child(odd) .timeline-content::after { content: ""; position: absolute; right: -10px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 10px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .timeline-item:nth-child(even) .timeline-content::after { content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-right: 10px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .timeline-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background: #3b82f6; border: 4px solid #fff; border-radius: 50%; z-index: 10; } /* ========== 进度圆环 ========== */ .progress-ring { transform: rotate(-90deg); } .progress-ring-circle { transition: stroke-dashoffset .35s; transform-origin: 50% 50%; } /* ========== 通用入场动画 ========== */ .reveal { opacity: 0; transform: translateY(50px); transition: all .6s ease; } .reveal.active { opacity: 1; transform: translateY(0); } /* ========== 渐变背景与动画 ========== */ .gradient-bg { background: linear-gradient(-45deg, #06B6D4, #F97316, #06B6D4, #F97316); background-size: 400% 400%; animation: gradientShift 15s ease infinite; } @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .animate-float { animation: float 6s ease-in-out infinite; } .animate-pulse-slow { animation: pulseSlowCompat 6s ease-in-out infinite; } .animate-spin-slow { animation: rotate 20s linear infinite; } @keyframes float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-20px) } } @keyframes rotate { from { transform: rotate(0) } to { transform: rotate(360deg) } } /* 兼容命名：柔和跳动 */ @keyframes pulseSlowCompat { 0%, 100% { opacity: .8 } 50% { opacity: 1 } } /* ========== 自定义滚动条 ========== */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, #3b82f6, #8b5cf6); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(to bottom, #2563eb, #7c3aed); } /* ========== 玻璃态 ========== */ .glass-effect { background: rgba(15, 23, 42, .8); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, .1); } /* ========== 按钮 ========== */ .btn-primary { background: linear-gradient(135deg, #06B6D4 0%, #F97316 100%); border: none; padding: .875rem 2rem; border-radius: 9999px; font-weight: 600; transition: all .3s cubic-bezier(.4, 0, .2, 1); position: relative; overflow: hidden; } .btn-primary::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent); transition: left .6s; } .btn-primary:hover::before { left: 100%; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(6, 182, 212, .3); } .btn-secondary { background: transparent; border: 2px solid rgba(6, 182, 212, .5); padding: .875rem 2rem; border-radius: 9999px; font-weight: 600; transition: all .3s ease; position: relative; overflow: hidden; } .btn-secondary::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: linear-gradient(135deg, #06B6D4, #F97316); transition: width .3s ease; z-index: -1; } .btn-secondary:hover::before { width: 100%; } .btn-secondary:hover { border-color: transparent; transform: translateY(-2px); } /* ========== 科技素养测评模块 ========== */ .assessment-section.section-padding { padding: clamp(3rem, 5vw, 5rem) 0; background: radial-gradient(circle at 14% 18%, rgba(6, 182, 212, .16), transparent 30%), radial-gradient(circle at 86% 22%, rgba(249, 115, 22, .13), transparent 28%), linear-gradient(180deg, rgba(30, 41, 59, .66), rgba(15, 23, 42, .94)); } .assessment-bg-orbit { position: absolute; border: 1px solid rgba(6, 182, 212, .18); border-radius: 999px; pointer-events: none; } .assessment-bg-orbit-a { top: 10%; left: -140px; width: 360px; height: 360px; animation: assessmentOrbit 18s linear infinite; } .assessment-bg-orbit-b { right: -110px; bottom: 8%; width: 280px; height: 280px; border-color: rgba(249, 115, 22, .18); animation: assessmentOrbit 22s linear infinite reverse; } .assessment-shell { display: grid; grid-template-columns: minmax(300px, .86fr) minmax(500px, 1.14fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .assessment-copy h2 { margin: 18px 0 16px; font-size: clamp(2rem, 4.4vw, 3.55rem); line-height: 1.05; font-weight: 800; color: #fff; } .assessment-copy p { max-width: 680px; color: #cbd5e1; font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.9; } .assessment-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; } .assessment-primary-cta { box-shadow: 0 18px 42px rgba(6, 182, 212, .24); } .assessment-preview { position: relative; isolation: isolate; min-height: 360px; border: 1px solid rgba(6, 182, 212, .3); border-radius: 16px; padding: clamp(22px, 4vw, 34px); background: radial-gradient(circle at 88% 88%, rgba(249, 115, 22, .12), transparent 34%), radial-gradient(circle at 74% 22%, rgba(6, 182, 212, .14), transparent 36%), linear-gradient(135deg, rgba(15, 23, 42, .9), rgba(30, 41, 59, .76)); box-shadow: 0 28px 70px rgba(2, 6, 23, .34); overflow: hidden; backdrop-filter: blur(14px); transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0)); transition: transform .42s cubic-bezier(.16, 1, .3, 1), box-shadow .42s ease; } .assessment-preview::before, .assessment-preview::after { content: ""; position: absolute; z-index: -1; pointer-events: none; } .assessment-preview::before { inset: -1px; border-radius: inherit; background: linear-gradient(135deg, rgba(6, 182, 212, .62), rgba(148, 163, 184, .18), rgba(249, 115, 22, .5)); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; padding: 1px; } .assessment-preview::after { right: -70px; bottom: -90px; width: 220px; height: 220px; border-radius: 999px; background: radial-gradient(circle, rgba(249, 115, 22, .14), transparent 68%); } .assessment-preview:hover { --lift: -6px; box-shadow: 0 34px 84px rgba(6, 182, 212, .22); } .assessment-report-preview { display: grid; grid-template-columns: minmax(190px, .82fr) minmax(300px, 1.18fr); gap: clamp(20px, 3vw, 38px); align-items: center; } .assessment-preview-kicker { margin: 0 0 12px; color: #22d3ee; font-size: .85rem; font-weight: 800; letter-spacing: .08em; } .assessment-preview-copy h3 { margin: 0 0 16px; color: #f8fafc; font-size: clamp(1.2rem, 2.1vw, 1.62rem); font-weight: 800; line-height: 1.25; } .assessment-preview-copy p:last-child { margin: 0; color: #cbd5e1; font-size: clamp(.98rem, 1.35vw, 1.08rem); line-height: 1.75; } .assessment-radar-card { min-width: 0; } .assessment-radar-svg { display: block; width: 100%; max-width: 440px; margin: 0 auto; filter: drop-shadow(0 18px 28px rgba(6, 182, 212, .2)); } .assessment-radar-svg .radar-ring, .assessment-radar-svg .radar-axis { fill: none; stroke: rgba(148, 163, 184, .34); stroke-width: 1.2; } .assessment-radar-svg .radar-area { fill: rgba(6, 182, 212, .2); stroke: #06b6d4; stroke-width: 3; transform-origin: center; transform-box: fill-box; animation: radarAreaBreathe 3.6s ease-in-out infinite; } .assessment-radar-svg .radar-point { fill: #f97316; stroke: #0f172a; stroke-width: 2; } .assessment-radar-svg .radar-label { fill: #dbeafe; font-size: 15px; font-weight: 800; } .assessment-steps { display: grid; gap: 10px; } .assessment-steps div { min-height: 54px; border: 1px solid rgba(148, 163, 184, .18); border-radius: 10px; padding: 12px 14px; background: rgba(15, 23, 42, .64); color: #cbd5e1; } .assessment-steps strong { color: #F97316; font-size: .9rem; } .motion-reveal { opacity: 1; transform: none; } .motion-reveal.is-visible { animation: assessmentReveal .7s cubic-bezier(.16, 1, .3, 1) both; } @keyframes assessmentOrbit { to { transform: rotate(360deg); } } @keyframes assessmentShine { to { transform: rotate(360deg); } } @keyframes assessmentPulse { 0%, 100% { transform: scale(1); opacity: .94; } 50% { transform: scale(1.035); opacity: 1; } } @keyframes radarAreaBreathe { 0%, 100% { transform: scale(1); opacity: .96; } 50% { transform: scale(1.025); opacity: 1; } } @keyframes assessmentReveal { from { opacity: .86; transform: translateY(18px) scale(.992); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (max-width: 1024px) { .assessment-shell { grid-template-columns: 1fr; } .assessment-preview { min-height: auto; } } @media (max-width: 760px) { .assessment-report-preview { grid-template-columns: 1fr; } .assessment-radar-svg { max-width: 360px; } } @media (max-width: 640px) { .assessment-actions { flex-direction: column; } .assessment-actions .btn-primary, .assessment-actions .btn-secondary { width: 100%; } .assessment-preview { border-radius: 14px; padding: 18px; } } @media (prefers-reduced-motion: reduce) { .assessment-bg-orbit, .assessment-preview::before, .assessment-radar-svg .radar-area { animation: none; } .motion-reveal { opacity: 1; transform: none; } } /* ========== 文字渐变/对比度 ========== */ .text-gradient { background: linear-gradient(135deg, #06B6D4 0%, #F97316 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 200%; animation: gradientShift 3s ease-in-out infinite; } .text-gradient-secondary { background: linear-gradient(135deg, #F97316 0%, #06B6D4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .section-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.2; margin-bottom: 1.5rem; letter-spacing: -.025em; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .3); } .section-subtitle { font-size: clamp(1rem, 2.5vw, 1.25rem); color: #CBD5E1; line-height: 1.6; max-width: 600px; margin: 0 auto; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); } .text-gray-400 { color: #9CA3AF !important; } .text-gray-300 { color: #D1D5DB !important; } .text-gray-200 { color: #E5E7EB !important; } /* ========== 卡片中文字对比度 ========== */ .card-front h3, .card-back h3 { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); } .card-front p, .card-back p { color: #E2E8F0 !important; } /* ========== 导航（深色/透明背景时） ========== */ .nav-link { position: relative; text-decoration: none; color: #F1F5F9; margin: 0 15px; transition: color .3s ease; text-shadow: 0 1px 2px rgba(0, 0, 0, .1); } .nav-link::after { content: ""; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: -5px; left: 0; background-color: #007bff; transform-origin: bottom right; transition: transform .3s ease-out; } .nav-link:hover { color: #fff !important; } .nav-link:hover::after { transform: scaleX(1); transform-origin: bottom left; } /* 滚动后（白底）导航样式覆盖 */ #navbar.scrolled { background: rgba(255, 255, 255, .95) !important; } #navbar.scrolled .nav-link { color: #0F172A !important; text-shadow: none !important; } #navbar.scrolled .text-gray-400 { color: #475569 !important; } #navbar.scrolled .hamburger-lines .line { background-color: #0F172A !important; } #navbar.scrolled .fa, #navbar.scrolled .fas, #navbar.scrolled .far, #navbar.scrolled .fab { color: #0F172A !important; } /* ========== 间距系统 ========== */ .section-padding { padding: clamp(4rem, 8vw, 8rem) 0; } .section-padding-sm { padding: clamp(2rem, 4vw, 4rem) 0; } /* ========== 网格布局 ========== */ .grid-auto-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } @media (min-width:768px) { .grid-auto-fit { gap: 2.5rem; } } @media (min-width:1024px) { .grid-auto-fit { gap: 3rem; } } /* ========== 加载动画 ========== */ .loading { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(59, 130, 246, .3); border-radius: 50%; border-top-color: #3b82f6; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ========== 背景网格 ========== */ .bg-grid { background-image: radial-gradient(circle at 25% 25%, rgba(6, 182, 212, .1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(249, 115, 22, .1) 0%, transparent 50%), linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px; background-position: 0 0, 50px 50px, 0 0, 0 0; } /* ========== 额外入场动画 ========== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: translateY(0) } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px) } to { opacity: 1; transform: translateX(0) } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px) } to { opacity: 1; transform: translateX(0) } } .animate-fade-in-up { animation: fadeInUp .6s ease-out; } .animate-fade-in-left { animation: fadeInLeft .6s ease-out; } .animate-fade-in-right { animation: fadeInRight .6s ease-out; } .delay-100 { animation-delay: .1s; } .delay-200 { animation-delay: .2s; } .delay-300 { animation-delay: .3s; } .delay-400 { animation-delay: .4s; } .delay-500 { animation-delay: .5s; } /* ========== 卡片/翻转卡片统一修复 ========== */ .card-front, .card-back, .flip-card-front, .flip-card-back { position: static !important; width: 100% !important; height: auto !important; transform: none !important; } .card-inner, .card-container:hover .card-inner, .flip-card-inner, .flip-card:hover .flip-card-inner { transform: none !important; transition: none !important; } .flip-card-back { position: static !important; opacity: 1 !important; display: block !important; } /* 课程/优势/教师卡片的交互反馈 */ .course-card, .advantage-card, .teacher-card { transition: transform .2s ease, box-shadow .2s ease; will-change: transform; } .course-card.is-pressed, .advantage-card.is-pressed, .teacher-card.is-pressed, .course-card:active, .advantage-card:active, .teacher-card:active { transform: scale(.98); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); } @media (hover:hover) { .course-card:hover, .advantage-card:hover, .teacher-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .14); } } /* ========== 无障碍/性能优化 - 动画降噪 ========== */ /* 尊重用户的"减少动态"偏好设置 */ @media (prefers-reduced-motion: reduce) { .animate-*, [data-parallax] { animation: none !important; transition: none !important; } .reveal, .reveal [class*="reveal"] { opacity: 1 !important; transform: none !important; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .course-card, .advantage-card, .teacher-card { transition: none; } } /* 低端机或省电模式下的动画降级 */ .reduced-motion .animate-*, .reduced-motion [data-parallax], .reduced-motion .reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } .animate-fade-in-up, .animate-fade-in-left, .animate-fade-in-right, .animate-float, .animate-pulse-slow, .animate-spin-slow { will-change: transform, opacity; backface-visibility: hidden; transform: translateZ(0); } .course-card, .advantage-card, .teacher-card, .card-container { backface-visibility: hidden; transform: translateZ(0); } .scroll-progress { will-change: width; contain: layout style paint; } .bg-grid { will-change: auto; } @supports (container-type:inline-size) { .container { container-type: inline-size; } } /* ========== 分龄课程体系（选项卡） ========== */ .age-tab { background: rgba(15, 23, 42, .4); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .1); color: #D1D5DB; cursor: pointer; transition: all .25s ease; } .age-tab.active { border-color: rgba(6, 182, 212, .6); color: #fff; box-shadow: 0 8px 24px rgba(6, 182, 212, .2); } .age-panel { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; } .age-panel.hidden { opacity: 0; visibility: hidden; transform: translateY(10px); } .course-card .card-front { border: 1px solid rgba(255, 255, 255, .12); background: rgba(15, 23, 42, .7); backdrop-filter: blur(12px); } .age-tabs { display: flex; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: .75rem; padding: 0 1rem; margin: 0 -1rem 2.5rem; scroll-snap-type: x proximity; } .age-tabs::-webkit-scrollbar { display: none; } .age-tabs { scrollbar-width: none; } .age-tab { white-space: nowrap; flex: 0 0 auto; scroll-snap-align: start; } @media (min-width:768px) { .age-tabs { overflow: visible; flex-wrap: wrap !important; justify-content: center; margin: 0 0 2.5rem; padding: 0; scroll-snap-type: none; } } /* ========== 返回顶部按钮 ========== */ #back-to-top { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background-color: #007bff; color: #fff; border-radius: 50%; text-align: center; line-height: 50px; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 1000; } #back-to-top.show { opacity: 1; visibility: visible; } /* ========== 新的分龄课程-导航卡 ========== */ .age-nav-btn { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: rgba(15, 23, 42, .4); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; color: #D1D5DB; cursor: pointer; transition: all .3s ease; position: relative; overflow: hidden; } .age-nav-btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(6, 182, 212, .1), transparent); transition: left .5s ease; } .age-nav-btn:hover::before { left: 100%; } .age-nav-btn:hover { border-color: rgba(6, 182, 212, .3); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(6, 182, 212, .15); } .age-nav-btn.active { border-color: rgba(6, 182, 212, .6); background: rgba(6, 182, 212, .1); color: #fff; box-shadow: 0 8px 24px rgba(6, 182, 212, .2); } .age-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(6, 182, 212, .1); display: flex; align-items: center; justify-content: center; font-size: 20px; color: #06B6D4; transition: all .3s ease; } .age-nav-btn.active .age-icon { background: rgba(6, 182, 212, .2); color: #fff; } .age-info { display: flex; flex-direction: column; gap: 2px; } .age-title { font-size: 16px; font-weight: 600; line-height: 1.2; } .age-range { font-size: 12px; opacity: .7; } /* 进度指示器 */ .progress-indicator { width: 100%; height: 4px; background: rgba(255, 255, 255, .1); border-radius: 2px; overflow: hidden; position: relative; } .progress-bar { height: 100%; background: linear-gradient(90deg, #06B6D4, #0EA5E9); border-radius: 2px; width: 25%; transition: all .5s ease; position: relative; } .progress-bar::after { content: ""; position: absolute; top: 0; right: 0; width: 20px; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3)); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { transform: translateX(-20px) } 100% { transform: translateX(20px) } } /* 课程内容区域与卡片 */ .course-content-wrapper { position: relative; min-height: 600px; } .age-header { text-align: center; margin-bottom: 2rem; } .course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin-bottom: 2rem; } @media (max-width:768px) { .course-grid { grid-template-columns: 1fr; gap: 1.5rem; } } .course-card-modern { background: rgba(15, 23, 42, .6); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; overflow: hidden; transition: all .3s ease; position: relative; } .course-card-modern::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #06B6D4, #0EA5E9, #8B5CF6); opacity: 0; transition: opacity .3s ease; } .course-card-modern:hover::before { opacity: 1; } .course-card-modern:hover { transform: translateY(-8px); border-color: rgba(6, 182, 212, .3); box-shadow: 0 20px 40px rgba(6, 182, 212, .15); } .course-card-header { padding: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, .1); } .course-card-body { padding: 1.5rem; } .course-card-footer { padding: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .course-meta { display: flex; gap: 1rem; font-size: .875rem; color: #9CA3AF; } .course-meta span { display: flex; align-items: center; gap: .5rem; } .course-cta-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.5rem; background: linear-gradient(135deg, #06B6D4, #0EA5E9); color: #fff; text-decoration: none; border-radius: 12px; font-size: .875rem; font-weight: 600; transition: all .3s ease; } .course-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(6, 182, 212, .3); } .course-highlights { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } .highlight-tag { padding: .25rem .75rem; background: rgba(6, 182, 212, .1); color: #06B6D4; border-radius: 20px; font-size: .75rem; font-weight: 500; } /* 分龄/课程移动端微调 */ @media (max-width:768px) { .age-nav-btn { flex-direction: column; text-align: center; gap: 8px; padding: 12px 16px; min-width: 120px; } .age-icon { width: 40px; height: 40px; font-size: 18px; } .age-title { font-size: 14px; } .age-range { font-size: 11px; } .course-card-footer { flex-direction: column; align-items: stretch; gap: 1rem; } .course-meta { justify-content: center; } } /* ========== 移动端全局优化 ========== */ @media (max-width:768px) { .container { padding: 0 1rem; } .timeline::before { left: 20px; } .timeline-item { padding-left: 60px !important; padding-right: 0 !important; text-align: left !important; } .timeline-item .timeline-content::after { left: -10px !important; right: auto !important; border-right: 10px solid #fff !important; border-left: none !important; } .timeline-dot { left: 20px; } .card-container { height: auto !important; margin-bottom: 2rem; } .card-front, .card-back { padding: 1.5rem !important; margin-bottom: .5rem; } .grid-auto-fit { grid-template-columns: 1fr !important; gap: 1.5rem !important; } .section-title { font-size: clamp(1.5rem, 6vw, 2.5rem) !important; line-height: 1.3 !important; } /* 移动端：副标题合适字号与内边距（修复未闭合的样式块） */ .section-subtitle { font-size: 1rem !important; padding: 0 1rem; } /* 移动端：节间距略收紧，提升信息密度 */ .section-padding { padding: clamp(2rem, 6vw, 4rem) 0 !important; } .btn-primary, .btn-secondary { padding: 1rem 1.5rem !important; font-size: .9rem !important; width: 100%; text-align: center; } .section-padding { padding: clamp(2rem, 6vw, 4rem) 0 !important; } } @media (max-width:480px) { .container { padding: 0 .75rem; } .card-front, .card-back { padding: 1rem !important; } /* 导航条 */ #navbar { padding: .5rem 0 !important; } #navbar .container { padding: 0 1rem; } #navbar .flex.items-center.space-x-3 { gap: .5rem !important; } #navbar .w-12.h-12 { width: 2.5rem !important; height: 2.5rem !important; } #navbar .text-2xl { font-size: 1.25rem !important; } #navbar .text-xs { font-size: .625rem !important; } .section-title { font-size: clamp(1.25rem, 8vw, 2rem) !important; } } /* ========== 减少动画偏好支持 ========== */ @media (prefers-reduced-motion: reduce) { /* 禁用所有动画和过渡效果 */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* 禁用视差效果 */ [data-parallax] { transform: none !important; background-attachment: scroll !important; } /* 禁用粒子动画 */ #particles-canvas { display: none !important; } } /* 新增：英雄区轮播与Lightbox样式（新手友好中文注释） */ .hero-slider { position: relative; } .hero-track { display: flex; will-change: transform; } .hero-slide { position: relative; } .hero-dot { width: 8px; height: 8px; border-radius: 9999px; background: rgba(255, 255, 255, 0.35); transition: transform .2s, background-color .2s; } .hero-dot.active { background: #22d3ee; transform: scale(1.2); } /* Lightbox 基础样式 */ .lightbox-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: none; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(2px); } .lightbox-overlay.active { display: flex; } .lightbox-content { position: relative; max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .lightbox-image { max-width: 90vw; max-height: 75vh; object-fit: contain; opacity: 0; transition: opacity .25s ease; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); } .lightbox-image.show { opacity: 1; } .lightbox-caption { text-align: center; margin-top: 15px; padding: 8px 16px; background: rgba(0, 0, 0, 0.6); border-radius: 8px; backdrop-filter: blur(4px); color: #e5e7eb; font-size: 14px; max-width: 90vw; } .lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; width: 40px; height: 40px; border-radius: 9999px; background: rgba(31, 41, 55, 0.8); color: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(2px); transition: transform .2s, background-color .2s; } .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { transform: scale(1.08); background: rgba(55, 65, 81, 0.9); } .lightbox-close { top: -50px; right: -10px; } .lightbox-prev { left: -50px; } .lightbox-next { right: -50px; } /* 小屏幕适配 */ @media (max-width: 640px) { .lightbox-close { top: -44px; right: 0; } .lightbox-prev { left: 0; } .lightbox-next { right: 0; } } /* 打开 lightbox 时禁用页面滚动 */ .no-scroll { overflow: hidden; } .section-title { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.2; margin-bottom: 1.5rem; letter-spacing: -.025em; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .3); } .section-subtitle { font-size: clamp(1rem, 2.5vw, 1.25rem); color: #CBD5E1; line-height: 1.6; max-width: 600px; margin: 0 auto; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); } .text-gray-400 { color: #9CA3AF !important; } .text-gray-300 { color: #D1D5DB !important; } .text-gray-200 { color: #E5E7EB !important; } /* ========== 卡片中文字对比度 ========== */ .card-front h3, .card-back h3 { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .2); } .card-front p, .card-back p { color: #E2E8F0 !important; } /* ========== 导航（深色/透明背景时） ========== */ .nav-link { position: relative; text-decoration: none; color: #F1F5F9; margin: 0 15px; transition: color .3s ease; text-shadow: 0 1px 2px rgba(0, 0, 0, .1); } .nav-link::after { content: ""; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: -5px; left: 0; background-color: #007bff; transform-origin: bottom right; transition: transform .3s ease-out; } .nav-link:hover { color: #fff !important; } .nav-link:hover::after { transform: scaleX(1); transform-origin: bottom left; } /* ========== 家长真实反馈（Testimonials） ========== */ /* 小白提示：为了让“家长们的真实反馈”看起来更统一，我们加一点轻量样式 */ .testimonial-card { /* 轻微玻璃态效果，让卡片更有层次感 */ background: rgba(15, 23, 42, .7); backdrop-filter: blur(6px); transition: transform .2s ease, box-shadow .3s ease; } .testimonial-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(6, 182, 212, .15); } .testimonial-avatar { /* 保证头像始终是圆形且不变形 */ object-fit: cover; border: 2px solid rgba(255, 255, 255, .15); } .testimonial-stars i { /* 星星之间留一点间距，更易读 */ margin-right: 2px; } /* 滚动后（白底）导航样式覆盖 */ #navbar.scrolled { background: rgba(255, 255, 255, .95) !important; } #navbar.scrolled .nav-link { color: #0F172A !important; text-shadow: none !important; } #navbar.scrolled .text-gray-400 { color: #475569 !important; } #navbar.scrolled .hamburger-lines .line { background-color: #0F172A !important; } #navbar.scrolled .fa, #navbar.scrolled .fas, #navbar.scrolled .far, #navbar.scrolled .fab { color: #0F172A !important; } /* ========== 间距系统 ========== */ .section-padding { padding: clamp(4rem, 8vw, 8rem) 0; } .section-padding-sm { padding: clamp(2rem, 4vw, 4rem) 0; } /* ========== 网格布局 ========== */ .grid-auto-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } @media (min-width:768px) { .grid-auto-fit { gap: 2.5rem; } } @media (min-width:1024px) { .grid-auto-fit { gap: 3rem; } } /* ========== 加载动画 ========== */ .loading { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(59, 130, 246, .3); border-radius: 50%; border-top-color: #3b82f6; animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ========== 背景网格 ========== */ .bg-grid { background-image: radial-gradient(circle at 25% 25%, rgba(6, 182, 212, .1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(249, 115, 22, .1) 0%, transparent 50%), linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px); background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px; background-position: 0 0, 50px 50px, 0 0, 0 0; } /* ========== 额外入场动画 ========== */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: translateY(0) } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px) } to { opacity: 1; transform: translateX(0) } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px) } to { opacity: 1; transform: translateX(0) } } .animate-fade-in-up { animation: fadeInUp .6s ease-out; } .animate-fade-in-left { animation: fadeInLeft .6s ease-out; } .animate-fade-in-right { animation: fadeInRight .6s ease-out; } .delay-100 { animation-delay: .1s; } .delay-200 { animation-delay: .2s; } .delay-300 { animation-delay: .3s; } .delay-400 { animation-delay: .4s; } .delay-500 { animation-delay: .5s; } /* ========== 卡片/翻转卡片统一修复 ========== */ .card-front, .card-back, .flip-card-front, .flip-card-back { position: static !important; width: 100% !important; height: auto !important; transform: none !important; } .card-inner, .card-container:hover .card-inner, .flip-card-inner, .flip-card:hover .flip-card-inner { transform: none !important; transition: none !important; } .flip-card-back { position: static !important; opacity: 1 !important; display: block !important; } /* 课程/优势/教师卡片的交互反馈 */ .course-card, .advantage-card, .teacher-card { transition: transform .2s ease, box-shadow .2s ease; will-change: transform; } .course-card.is-pressed, .advantage-card.is-pressed, .teacher-card.is-pressed, .course-card:active, .advantage-card:active, .teacher-card:active { transform: scale(.98); box-shadow: 0 6px 16px rgba(0, 0, 0, .12); } @media (hover:hover) { .course-card:hover, .advantage-card:hover, .teacher-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .14); } } /* ========== 无障碍/性能优化 - 动画降噪 ========== */ /* 尊重用户的"减少动态"偏好设置 */ @media (prefers-reduced-motion: reduce) { .animate-*, [data-parallax] { animation: none !important; transition: none !important; } .reveal, .reveal [class*="reveal"] { opacity: 1 !important; transform: none !important; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .course-card, .advantage-card, .teacher-card { transition: none; } } /* 低端机或省电模式下的动画降级 */ .reduced-motion .animate-*, .reduced-motion [data-parallax], .reduced-motion .reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } .animate-fade-in-up, .animate-fade-in-left, .animate-fade-in-right, .animate-float, .animate-pulse-slow, .animate-spin-slow { will-change: transform, opacity; backface-visibility: hidden; transform: translateZ(0); } .course-card, .advantage-card, .teacher-card, .card-container { backface-visibility: hidden; transform: translateZ(0); } .scroll-progress { will-change: width; contain: layout style paint; } .bg-grid { will-change: auto; } @supports (container-type:inline-size) { .container { container-type: inline-size; } } /* ========== 分龄课程体系（选项卡） ========== */ .age-tab { background: rgba(15, 23, 42, .4); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .1); color: #D1D5DB; cursor: pointer; transition: all .25s ease; } .age-tab.active { border-color: rgba(6, 182, 212, .6); color: #fff; box-shadow: 0 8px 24px rgba(6, 182, 212, .2); } .age-panel { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; } .age-panel.hidden { opacity: 0; visibility: hidden; transform: translateY(10px); } .course-card .card-front { border: 1px solid rgba(255, 255, 255, .12); background: rgba(15, 23, 42, .7); backdrop-filter: blur(12px); } .age-tabs { display: flex; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: .75rem; padding: 0 1rem; margin: 0 -1rem 2.5rem; scroll-snap-type: x proximity; } .age-tabs::-webkit-scrollbar { display: none; } .age-tabs { scrollbar-width: none; } .age-tab { white-space: nowrap; flex: 0 0 auto; scroll-snap-align: start; } @media (min-width:768px) { .age-tabs { overflow: visible; flex-wrap: wrap !important; justify-content: center; margin: 0 0 2.5rem; padding: 0; scroll-snap-type: none; } } /* ========== 返回顶部按钮 ========== */ #back-to-top { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background-color: #007bff; color: #fff; border-radius: 50%; text-align: center; line-height: 50px; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 1000; } #back-to-top.show { opacity: 1; visibility: visible; } /* ========== 新的分龄课程-导航卡 ========== */ .age-nav-btn { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: rgba(15, 23, 42, .4); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; color: #D1D5DB; cursor: pointer; transition: all .3s ease; position: relative; overflow: hidden; } .age-nav-btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(6, 182, 212, .1), transparent); transition: left .5s ease; } .age-nav-btn:hover::before { left: 100%; } .age-nav-btn:hover { border-color: rgba(6, 182, 212, .3); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(6, 182, 212, .15); } .age-nav-btn.active { border-color: rgba(6, 182, 212, .6); background: rgba(6, 182, 212, .1); color: #fff; box-shadow: 0 8px 24px rgba(6, 182, 212, .2); } .age-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(6, 182, 212, .1); display: flex; align-items: center; justify-content: center; font-size: 20px; color: #06B6D4; transition: all .3s ease; } .age-nav-btn.active .age-icon { background: rgba(6, 182, 212, .2); color: #fff; } .age-info { display: flex; flex-direction: column; gap: 2px; } .age-title { font-size: 16px; font-weight: 600; line-height: 1.2; } .age-range { font-size: 12px; opacity: .7; } /* 进度指示器 */ .progress-indicator { width: 100%; height: 4px; background: rgba(255, 255, 255, .1); border-radius: 2px; overflow: hidden; position: relative; } .progress-bar { height: 100%; background: linear-gradient(90deg, #06B6D4, #0EA5E9); border-radius: 2px; width: 25%; transition: all .5s ease; position: relative; } .progress-bar::after { content: ""; position: absolute; top: 0; right: 0; width: 20px; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3)); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { transform: translateX(-20px) } 100% { transform: translateX(20px) } } /* 课程内容区域与卡片 */ .course-content-wrapper { position: relative; min-height: 600px; } .age-header { text-align: center; margin-bottom: 2rem; } .course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin-bottom: 2rem; } @media (max-width:768px) { .course-grid { grid-template-columns: 1fr; gap: 1.5rem; } } .course-card-modern { background: rgba(15, 23, 42, .6); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; overflow: hidden; transition: all .3s ease; position: relative; } .course-card-modern::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #06B6D4, #0EA5E9, #8B5CF6); opacity: 0; transition: opacity .3s ease; } .course-card-modern:hover::before { opacity: 1; } .course-card-modern:hover { transform: translateY(-8px); border-color: rgba(6, 182, 212, .3); box-shadow: 0 20px 40px rgba(6, 182, 212, .15); } .course-card-header { padding: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, .1); } .course-card-body { padding: 1.5rem; } .course-card-footer { padding: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .course-meta { display: flex; gap: 1rem; font-size: .875rem; color: #9CA3AF; } .course-meta span { display: flex; align-items: center; gap: .5rem; } .course-cta-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.5rem; background: linear-gradient(135deg, #06B6D4, #0EA5E9); color: #fff; text-decoration: none; border-radius: 12px; font-size: .875rem; font-weight: 600; transition: all .3s ease; } .course-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(6, 182, 212, .3); } .course-highlights { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; } .highlight-tag { padding: .25rem .75rem; background: rgba(6, 182, 212, .1); color: #06B6D4; border-radius: 20px; font-size: .75rem; font-weight: 500; } /* 分龄/课程移动端微调 */ @media (max-width:768px) { .age-nav-btn { flex-direction: column; text-align: center; gap: 8px; padding: 12px 16px; min-width: 120px; } .age-icon { width: 40px; height: 40px; font-size: 18px; } .age-title { font-size: 14px; } .age-range { font-size: 11px; } .course-card-footer { flex-direction: column; align-items: stretch; gap: 1rem; } .course-meta { justify-content: center; } } /* ========== 移动端全局优化 ========== */ @media (max-width:768px) { .container { padding: 0 1rem; } .timeline::before { left: 20px; } .timeline-item { padding-left: 60px !important; padding-right: 0 !important; text-align: left !important; } .timeline-item .timeline-content::after { left: -10px !important; right: auto !important; border-right: 10px solid #fff !important; border-left: none !important; } .timeline-dot { left: 20px; } .card-container { height: auto !important; margin-bottom: 2rem; } .card-front, .card-back { padding: 1.5rem !important; margin-bottom: .5rem; } .grid-auto-fit { grid-template-columns: 1fr !important; gap: 1.5rem !important; } .section-title { font-size: clamp(1.5rem, 6vw, 2.5rem) !important; line-height: 1.3 !important; } .section-subtitle { font-size: clamp(1.2rem, 4vw, 1.8rem) !important; line-height: 1.4 !important; } } /* ========== OJ CTA 炫酷样式 ========== */ .oj-cta { position: relative; color: #fff; text-decoration: none; background: linear-gradient(135deg, rgba(6, 182, 212, .25), rgba(249, 115, 22, .25)); border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 12px 30px rgba(6, 182, 212, .25), 0 0 0px rgba(249, 115, 22, 0); backdrop-filter: blur(8px); transition: transform .25s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease; } .oj-cta::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(6, 182, 212, .6), rgba(249, 115, 22, .6)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .6; pointer-events: none; } .oj-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(6, 182, 212, .35), 0 0 30px rgba(249, 115, 22, .25); border-color: rgba(6, 182, 212, .5); background: linear-gradient(135deg, rgba(6, 182, 212, .35), rgba(249, 115, 22, .35)); } .oj-cta:active { transform: translateY(0) scale(.98); } .oj-cta i { color: #fff; } .oj-cta-shine { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent); transform: skewX(-20deg); animation: ojShine 2.4s ease-in-out infinite; pointer-events: none; border-radius: inherit; } @keyframes ojShine { 0% { left: -40%; } 60% { left: 110%; } 100% { left: 110%; } } /* 已移除：活动展示样式（不再使用） */ /* 已移除：荣誉证书瀑布流与卡片样式（不再使用） */ /* 小白提示：下面的样式把“师资力量”卡片里的老师图片固定为正方形(1:1) */ .teacher-card .image-square { /* 容器宽度占满卡片 */ width: 100%; /* 现代浏览器的正方形比例写法 */ aspect-ratio: 1 / 1; position: relative; overflow: hidden; } .teacher-card .image-square img { /* 图片充满容器 */ width: 100%; height: 100%; /* 保持图片不变形，按容器裁切 */ object-fit: cover; /* 和之前的 object-top 一样，从上方开始裁切 */ object-position: top center; } /* 兼容老旧浏览器：如果不支持 aspect-ratio，就用“撑高 100%”的办法模拟正方形 */ @supports not (aspect-ratio: 1) { .teacher-card .image-square { width: 100%; position: relative; /* 关键：撑高 100% 就是正方形 */ padding-top: 100%; overflow: hidden; } .teacher-card .image-square img { /* 绝对定位填满容器 */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; } } /* ========== 顶部导航占位与视口高度修复 ========== */ /* 小白提示：这个占位元素的高度等于“导航高度 + iOS刘海安全区”，避免内容被固定导航挡住 */ .nav-spacer { height: calc(var(--navbar-height, 80px) + env(safe-area-inset-top, 0px)); } /* 兼容不支持 env() 的浏览器：仅用导航高度变量 */ @supports not (height: calc(1px + env(safe-area-inset-top))) { .nav-spacer { height: var(--navbar-height, 80px); } } /* 小白提示：修复移动端 100vh 不稳定问题，使用动态视口单位 */ .min-h-screen-fix { min-height: 100dvh; } @supports not (min-height: 100dvh) { .min-h-screen-fix { min-height: 100vh; } } /* ========== 移动端：为页面内容预留底部空间，避免被固定CTA遮挡 ========== */ /* 小白提示：当页面存在底部固定按钮条时，给加 has-sticky-cta 类即可自动留出空间 */ @media (max-width:768px) { body.has-sticky-cta { padding-bottom: calc(var(--sticky-cta-height, 72px) + var(--sab)); } } /* ========== 学习路径（#learning-path）桌面端规则已迁移到 timeline-fix.css ========== */ /* 小白提示：为避免样式互相覆盖，这里移除与学习路径时间轴相关的覆盖规则。统一在 timeline-fix.css 中维护学习路径的布局与居中线样式，保证代码单一来源、易于维护。 */ /* ========== 英雄区主图：固定显示比例，降低首屏布局抖动（CLS） ========== */ /* 小白提示：给主图容器设定“纵横比”，浏览器在图片未加载完前也能提前占位，避免内容忽上忽下。16:10 适配多数横图，可按你图片实际比例调整。 */ .hero-image-container { position: relative; width: 100%; /* 现代浏览器：用纵横比占位，防止首屏抖动 */ aspect-ratio: 16 / 10; /* 桌面端限制最大高度，避免整屏出现过多留白 */ max-height: 540px; } .hero-image-container img { width: 100%; height: 100%; /* 小白提示：保持不变形，必要时裁切溢出部分，搭配外层 overflow-hidden 更安全 */ object-fit: cover; } /* 兼容老旧浏览器：若不支持 aspect-ratio，用“padding-top”占位法模拟比例盒子 */ @supports not (aspect-ratio: 1) { .hero-image-container { height: auto; } .hero-image-container::before { content: ""; display: block; /* 16:10 的比例等价于 10 / 16 = 62.5% 的占位高度 */ padding-top: 62.5%; } .hero-image-container>img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } } /* 调整英雄区整体高度：占满视口减去导航高度，减少下方空白 */ .hero-section { min-height: calc(100vh - var(--navbar-height, 80px)); } @media (max-width: 1024px) { .hero-image-container { max-height: 420px; aspect-ratio: 4 / 3; } } /* ========== 竞赛荣誉展示系统 ========== */ /* 年份切换按钮 */ .achievement-year-btn { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1.25rem; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .achievement-year-btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.1), transparent); transition: left 0.5s ease; } .achievement-year-btn:hover::before { left: 100%; } .achievement-year-btn:hover { border-color: rgba(6, 182, 212, 0.3); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(6, 182, 212, 0.1); } .achievement-year-btn.active { border-color: rgba(6, 182, 212, 0.6); background: rgba(6, 182, 212, 0.12); box-shadow: 0 8px 20px rgba(6, 182, 212, 0.2); transform: scale(1.05); } .achievement-year-btn .year-label { font-size: 0.9375rem; font-weight: 600; color: #fff; text-align: center; } .achievement-year-btn .year-badge { font-size: 0.75rem; color: #9CA3AF; text-align: center; font-weight: 500; } .achievement-year-btn.active .year-badge { color: #06B6D4; } /* 年份面板 */ .achievement-year-panel { display: block; opacity: 1; animation: fadeInPanel 0.4s ease-out; } .achievement-year-panel.hidden { display: none; opacity: 0; } .achievement-year-panel.active { display: block; opacity: 1; } @keyframes fadeInPanel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* 赛事卡片 */ .competition-card { padding: 1.25rem; background: rgba(15, 23, 42, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; transition: all 0.3s ease; } .competition-card:hover { border-color: rgba(6, 182, 212, 0.2); background: rgba(15, 23, 42, 0.5); transform: translateX(4px); box-shadow: 0 4px 12px rgba(6, 182, 212, 0.08); } /* 奖项徽章 */ .award-tag { display: inline-flex; align-items: center; padding: 0.375rem 0.75rem; border-radius: 20px; font-size: 0.8125rem; font-weight: 600; border: 1px solid; transition: all 0.2s ease; } .award-tag.gold { background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 193, 7, 0.1)); color: #FFC107; border-color: rgba(255, 215, 0, 0.3); } .award-tag.silver { background: linear-gradient(135deg, rgba(192, 192, 192, 0.15), rgba(158, 158, 158, 0.1)); color: #C0C0C0; border-color: rgba(192, 192, 192, 0.3); } .award-tag.bronze { background: linear-gradient(135deg, rgba(205, 127, 50, 0.15), rgba(184, 115, 51, 0.1)); color: #CD7F32; border-color: rgba(205, 127, 50, 0.3); } /* ========== 导航栏新闻提示徽章 ========== */ /* 小白提示：当有7天内的新闻时，显示这个醒目的提示徽章 */ .nav-news-badge { position: absolute; top: 4px; right: 4px; display: flex; align-items: center; justify-content: center; z-index: 20; } .nav-news-badge.hidden { display: none; } .nav-news-badge .badge-pulse { position: absolute; width: 100%; height: 100%; border-radius: 9999px; background: linear-gradient(135deg, #F97316, #EF4444); animation: nav-badge-pulse 2s ease-in-out infinite; } .nav-news-badge .badge-text { position: relative; padding: 2px 8px; background: linear-gradient(135deg, #F97316, #EF4444); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; border-radius: 9999px; box-shadow: 0 2px 8px rgba(249, 115, 22, 0.5); } @keyframes nav-badge-pulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.4); opacity: 0; } } /* 顶栏新闻提醒横条 */ .news-alert-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: linear-gradient(90deg, rgba(249, 115, 22, 0.95), rgba(239, 68, 68, 0.95)); color: #fff; padding: 10px 20px; transform: translateY(-100%); transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4); } .news-alert-bar.show { transform: translateY(0); } .news-alert-bar .alert-icon { font-size: 1rem; animation: alert-bounce 1s ease-in-out infinite; } .news-alert-bar .alert-text { font-size: 0.875rem; font-weight: 600; } .news-alert-bar .alert-link { color: #fff; text-decoration: underline; font-weight: 700; transition: opacity 0.3s; } .news-alert-bar .alert-link:hover { opacity: 0.8; } .news-alert-bar .alert-close { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: #fff; font-size: 1.25rem; cursor: pointer; padding: 4px 8px; opacity: 0.8; transition: opacity 0.3s, transform 0.3s; } .news-alert-bar .alert-close:hover { opacity: 1; transform: translateY(-50%) scale(1.1); } @keyframes alert-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } /* 当显示顶栏新闻提醒时，调整导航栏位置 */ body.has-news-alert #navbar { top: 44px; } body.has-news-alert .nav-spacer { height: calc(var(--navbar-height, 80px) + 44px + env(safe-area-inset-top, 0px)); } @media (max-width: 768px) { .news-alert-bar { padding: 8px 40px 8px 16px; gap: 8px; } .news-alert-bar .alert-text { font-size: 0.8125rem; } body.has-news-alert #navbar { top: 40px; } body.has-news-alert .nav-spacer { height: calc(var(--navbar-height, 80px) + 40px + env(safe-area-inset-top, 0px)); } } /* ========== 移动端新闻通知按钮 ========== */ /* 小白提示：这是移动端顶栏右侧的新闻通知按钮，有最新动态时会显示 */ .mobile-news-notify { display: none; /* 默认隐藏，由 JS 控制显示 */ flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 12px; background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(239, 68, 68, 0.15)); border: 1px solid rgba(249, 115, 22, 0.3); border-radius: 12px; text-decoration: none; transition: all 0.3s ease; position: relative; overflow: hidden; animation: mobile-notify-glow 2s ease-in-out infinite; } .mobile-news-notify::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); animation: mobile-notify-shine 3s ease-in-out infinite; } @keyframes mobile-notify-glow { 0%, 100% { box-shadow: 0 0 8px rgba(249, 115, 22, 0.3), 0 0 16px rgba(249, 115, 22, 0.1); } 50% { box-shadow: 0 0 16px rgba(249, 115, 22, 0.5), 0 0 24px rgba(249, 115, 22, 0.2); } } @keyframes mobile-notify-shine { 0% { left: -100%; } 50%, 100% { left: 100%; } } .mobile-news-notify:active { transform: scale(0.95); } /* 只在移动端显示（宽度 < 1024px） */ @media (max-width: 1023px) { .mobile-news-notify.show { display: flex; } } /* 桌面端始终隐藏 */ @media (min-width: 1024px) { .mobile-news-notify { display: none !important; } } .mobile-news-notify .notify-icon-wrapper { position: relative; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .mobile-news-notify .notify-icon-wrapper i { font-size: 18px; color: #F97316; animation: bell-ring 2s ease-in-out infinite; } @keyframes bell-ring { 0%, 100% { transform: rotate(0deg); } 10%, 30% { transform: rotate(-10deg); } 20%, 40% { transform: rotate(10deg); } 50% { transform: rotate(0deg); } } .mobile-news-notify .notify-dot { position: absolute; top: 0; right: 0; width: 8px; height: 8px; background: linear-gradient(135deg, #EF4444, #DC2626); border-radius: 50%; animation: dot-pulse 1.5s ease-in-out infinite; box-shadow: 0 0 4px rgba(239, 68, 68, 0.6); } @keyframes dot-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } } .mobile-news-notify .notify-label { font-size: 10px; font-weight: 600; color: #F97316; letter-spacing: 0.5px; } /* 当有新闻提醒横条显示时，移动端隐藏通知按钮避免重复 */ @media (max-width: 1023px) { body.has-news-alert .mobile-news-notify { display: none !important; } }