/* ========================================================================== S-Class · 全站设计系统（Playful Cartoon / Neo-brutalist） 设计参照：academoo.com —— 粗黑描边、硬阴影、糖果色块、圆角卡片、 Fredoka 展示字体 + Quicksand 正文字体、漂浮彩色圆斑背景。 使用方式： 1) 直接引用类：.sc-btn / .sc-card / .sc-chip / .sc-icon-box … 2) ：为常见 hub 页面结构（.page / a.card / .hero）套用统一皮肤 3) site-nav.js 会自动注入本文件，使所有子页面共享顶栏、字体与令牌 ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Quicksand:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap"); :root { /* 糖果色板（与 academoo cartoon palette 一致） */ --sc-blue: #7dd3fc; --sc-green: #86efac; --sc-orange: #fb923c; --sc-pink: #f9a8d4; --sc-purple: #c084fc; --sc-red: #fca5a5; --sc-yellow: #ffe600; --sc-accent: #ef476f; --sc-sky-50: #f0f9ff; --sc-sky-100: #e0f2fe; --sc-blue-50: #eff6ff; /* 中性色 */ --sc-ink: #111827; --sc-gray-900: #111827; --sc-gray-800: #1f2937; --sc-gray-700: #374151; --sc-gray-600: #4b5563; --sc-gray-500: #6b7280; --sc-gray-300: #d1d5db; --sc-gray-100: #f3f4f6; --sc-white: #ffffff; /* 描边 / 阴影 / 圆角 */ --sc-line: #000; --sc-border: 4px; --sc-border-sm: 3px; --sc-shadow: 4px 4px 0 #000; --sc-shadow-sm: 3px 3px 0 #000; --sc-shadow-lg: 6px 6px 0 #000; --sc-shadow-hover: 6px 6px 0 #000; --sc-shadow-press: 2px 2px 0 #000; --sc-radius: 1rem; --sc-radius-lg: 1.5rem; --sc-radius-xl: 2rem; --sc-radius-full: 999px; /* 字体 */ --sc-font-display: "Fredoka", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Trebuchet MS", "Segoe UI", sans-serif; --sc-font-body: "Quicksand", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Trebuchet MS", "Segoe UI", sans-serif; /* 动效 */ --sc-ease-pop: cubic-bezier(0.68, -0.55, 0.265, 1.55); --sc-dur: 0.2s; } /* -------------------------------------------------------------------------- 关键帧 -------------------------------------------------------------------------- */ @keyframes sc-float-slow { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(6deg); } } @keyframes sc-pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes sc-shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } } @keyframes sc-wiggle { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } @keyframes sc-bounce-subtle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes sc-spin { to { transform: rotate(360deg); } } @keyframes sc-title { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes sc-confetti-fall { 0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: 0.2; } } .sc-anim-float { animation: sc-float-slow 5s ease-in-out infinite; } .sc-anim-pop { animation: sc-pop 0.3s var(--sc-ease-pop) both; } .sc-anim-shake { animation: sc-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } .sc-anim-wiggle { animation: sc-wiggle 2s ease-in-out infinite; } .sc-anim-bounce { animation: sc-bounce-subtle 1.6s ease-in-out infinite; } .sc-anim-title { animation: sc-title 0.6s ease-out both; } /* -------------------------------------------------------------------------- 漂浮彩色圆斑（放在 position:relative; overflow:hidden 的区块里） -------------------------------------------------------------------------- */ .sc-blobs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .sc-blobs span { position: absolute; border-radius: 50%; opacity: 0.3; animation: sc-float-slow 5s ease-in-out infinite; } .sc-blobs span:nth-child(1) { top: -2.5rem; left: -2.5rem; width: 8rem; height: 8rem; background: var(--sc-yellow); } .sc-blobs span:nth-child(2) { top: 25%; right: -2rem; width: 6rem; height: 6rem; background: var(--sc-pink); animation-delay: 1s; } .sc-blobs span:nth-child(3) { bottom: 2.5rem; left: 25%; width: 5rem; height: 5rem; background: var(--sc-blue); animation-delay: 2s; } .sc-blobs span:nth-child(4) { top: 50%; left: 2.5rem; width: 4rem; height: 4rem; background: var(--sc-green); animation-delay: 3s; } .sc-blobs span:nth-child(5) { bottom: 25%; right: 25%; width: 7rem; height: 7rem; background: var(--sc-orange); animation-delay: 1.5s; } .sc-blobs span:nth-child(6) { top: 10%; left: 55%; width: 3.5rem; height: 3.5rem; background: var(--sc-purple); animation-delay: 2.5s; } /* -------------------------------------------------------------------------- 排版 -------------------------------------------------------------------------- */ .sc-display { font-family: var(--sc-font-display); font-weight: 600; letter-spacing: 0.01em; line-height: 1.15; } .sc-body { font-family: var(--sc-font-body); } .sc-kicker { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--sc-font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-gray-600); } .sc-h1 { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(2.1rem, 5vw, 3.25rem); line-height: 1.12; color: var(--sc-gray-900); margin: 0 0 1rem; } .sc-h2 { font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.15; color: var(--sc-gray-900); margin: 0 0 0.75rem; } .sc-h3 { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.25; color: var(--sc-gray-900); margin: 0 0 0.35rem; } .sc-lead { font-family: var(--sc-font-body); font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.65; color: var(--sc-gray-700); margin: 0; } .sc-muted { color: var(--sc-gray-500); } .sc-c-blue { color: #0ea5e9; } .sc-c-purple { color: #a855f7; } .sc-c-orange { color: #f97316; } .sc-c-pink { color: #ec4899; } .sc-c-green { color: #16a34a; } .sc-c-accent { color: var(--sc-accent); } /* -------------------------------------------------------------------------- 按钮 -------------------------------------------------------------------------- */ .sc-btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0.7rem 1.4rem; font-family: var(--sc-font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1.1; color: var(--sc-gray-900); background: var(--sc-white); border: var(--sc-border) solid var(--sc-line); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); cursor: pointer; text-decoration: none !important; user-select: none; touch-action: manipulation; transition: transform var(--sc-dur) ease, box-shadow var(--sc-dur) ease, background var(--sc-dur) ease; } .sc-btn:hover { transform: translate(2px, 2px); box-shadow: var(--sc-shadow-press); } .sc-btn:active { transform: translate(4px, 4px); box-shadow: none; } .sc-btn:focus-visible { outline: 3px solid var(--sc-purple); outline-offset: 3px; } .sc-btn[disabled], .sc-btn.is-disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: var(--sc-shadow) !important; } .sc-btn--lg { font-size: 1.25rem; padding: 0.95rem 2rem; border-radius: var(--sc-radius-lg); text-transform: uppercase; letter-spacing: 0.06em; } .sc-btn--sm { min-height: 36px; padding: 0.4rem 0.9rem; font-size: 0.92rem; border-width: var(--sc-border-sm); box-shadow: var(--sc-shadow-sm); border-radius: 0.75rem; } .sc-btn--sm:hover { box-shadow: 1px 1px 0 #000; } .sc-btn--pill { border-radius: var(--sc-radius-full); } .sc-btn--orange { background: var(--sc-orange); color: #fff; } .sc-btn--blue { background: var(--sc-blue); } .sc-btn--green { background: var(--sc-green); } .sc-btn--pink { background: var(--sc-pink); } .sc-btn--purple { background: var(--sc-purple); color: #fff; } .sc-btn--yellow { background: var(--sc-yellow); } .sc-btn--red { background: var(--sc-red); } .sc-btn--accent { background: var(--sc-accent); color: #fff; } .sc-btn--ink { background: var(--sc-gray-900); color: #fff; } .sc-btn--ghost { background: transparent; box-shadow: none; border-color: transparent; } .sc-btn--ghost:hover { background: var(--sc-gray-100); transform: none; } .sc-btn--block { width: 100%; } .sc-btn .sc-btn-ico { font-size: 1.15em; line-height: 1; } /* 圆形图标按钮 */ .sc-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: var(--sc-border-sm) solid var(--sc-line); background: #fff; box-shadow: var(--sc-shadow-sm); cursor: pointer; font-size: 1.2rem; transition: transform var(--sc-dur), box-shadow var(--sc-dur); } .sc-icon-btn:hover { transform: translate(1px, 1px); box-shadow: 2px 2px 0 #000; } .sc-icon-btn:active { transform: translate(3px, 3px); box-shadow: none; } /* -------------------------------------------------------------------------- 卡片 / 面板 -------------------------------------------------------------------------- */ .sc-card { position: relative; display: flex; flex-direction: column; background: var(--sc-white); color: var(--sc-gray-900); border: var(--sc-border) solid var(--sc-line); border-radius: var(--sc-radius-lg); box-shadow: var(--sc-shadow); padding: 1.25rem; text-decoration: none !important; transition: transform var(--sc-dur) ease, box-shadow var(--sc-dur) ease; } .sc-card--link { cursor: pointer; } .sc-card--link:hover { transform: translateY(-4px); box-shadow: var(--sc-shadow-hover); } .sc-card--link:active { transform: translateY(0); box-shadow: var(--sc-shadow-press); } .sc-card--sm { border-width: var(--sc-border-sm); box-shadow: var(--sc-shadow-sm); border-radius: var(--sc-radius); padding: 1rem; } .sc-card--flat { box-shadow: none; } .sc-card--blue { background: var(--sc-blue); } .sc-card--green { background: var(--sc-green); } .sc-card--pink { background: var(--sc-pink); } .sc-card--purple { background: var(--sc-purple); } .sc-card--orange { background: var(--sc-orange); } .sc-card--yellow { background: var(--sc-yellow); } .sc-card--sky { background: linear-gradient(180deg, var(--sc-sky-100), #fff); } .sc-card-media { position: relative; overflow: hidden; border: var(--sc-border-sm) solid var(--sc-line); border-radius: var(--sc-radius); background: linear-gradient(135deg, var(--sc-sky-100), #fdf2f8); aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; margin-bottom: 0.9rem; } .sc-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; } .sc-card--link:hover .sc-card-media img { transform: scale(1.05); } .sc-card-media .sc-emoji { font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.15)); } .sc-card-title { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; color: var(--sc-gray-900); margin: 0 0 0.3rem; } .sc-card-desc { font-family: var(--sc-font-body); font-size: 0.92rem; line-height: 1.55; color: var(--sc-gray-600); margin: 0; } .sc-card-foot { margin-top: auto; padding-top: 0.85rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; } .sc-card-go { font-family: var(--sc-font-display); font-weight: 600; color: var(--sc-gray-900); display: inline-flex; align-items: center; gap: 0.3rem; } .sc-card--link:hover .sc-card-go { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; text-decoration-color: var(--sc-blue); } /* 图标方块（feature strip） */ .sc-icon-box { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border: var(--sc-border-sm) solid var(--sc-line); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow-sm); background: var(--sc-blue); font-size: 1.6rem; line-height: 1; flex-shrink: 0; } .sc-icon-box--lg { width: 4.5rem; height: 4.5rem; font-size: 2.2rem; border-radius: var(--sc-radius-lg); } .sc-icon-box--sm { width: 2.5rem; height: 2.5rem; font-size: 1.15rem; border-width: 2px; box-shadow: 2px 2px 0 #000; border-radius: 0.65rem; } .sc-icon-box--blue { background: var(--sc-blue); } .sc-icon-box--green { background: var(--sc-green); } .sc-icon-box--pink { background: var(--sc-pink); } .sc-icon-box--purple { background: var(--sc-purple); } .sc-icon-box--orange { background: var(--sc-orange); } .sc-icon-box--yellow { background: var(--sc-yellow); } .sc-icon-box--red { background: var(--sc-red); } .sc-icon-box--white { background: #fff; } /* 芯片 / 标签 */ .sc-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.7rem; font-family: var(--sc-font-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--sc-gray-900); background: #fff; border: 2px solid var(--sc-line); border-radius: var(--sc-radius-full); line-height: 1.3; white-space: nowrap; } .sc-chip--blue { background: var(--sc-blue); } .sc-chip--green { background: var(--sc-green); } .sc-chip--pink { background: var(--sc-pink); } .sc-chip--purple { background: var(--sc-purple); } .sc-chip--orange { background: var(--sc-orange); } .sc-chip--yellow { background: var(--sc-yellow); } .sc-chip--red { background: var(--sc-red); } .sc-chip--gray { background: var(--sc-gray-100); border-color: var(--sc-gray-300); color: var(--sc-gray-600); } .sc-chip--muted { opacity: 0.45; } .sc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } /* 数字徽章（How it works） */ .sc-step-num { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; font-family: var(--sc-font-display); font-size: 1.4rem; font-weight: 700; color: var(--sc-gray-900); background: var(--sc-yellow); border: var(--sc-border-sm) solid var(--sc-line); border-radius: 50%; box-shadow: var(--sc-shadow-sm); } /* 进度条 */ .sc-progress { position: relative; height: 18px; background: #fff; border: var(--sc-border-sm) solid var(--sc-line); border-radius: var(--sc-radius-full); overflow: hidden; } .sc-progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sc-green), var(--sc-blue)); border-right: 3px solid var(--sc-line); transition: width 0.4s ease; } .sc-progress--orange > span { background: linear-gradient(90deg, var(--sc-yellow), var(--sc-orange)); } .sc-progress--pink > span { background: linear-gradient(90deg, var(--sc-pink), var(--sc-purple)); } /* 计分板 */ .sc-scoreboard { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.9rem; font-family: var(--sc-font-display); font-weight: 700; font-size: 1rem; background: #fff; border: var(--sc-border-sm) solid var(--sc-line); border-radius: var(--sc-radius-full); box-shadow: var(--sc-shadow-sm); } .sc-scoreboard b { font-size: 1.2rem; color: var(--sc-accent); } /* 折叠 FAQ */ .sc-faq { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; } .sc-faq details { background: #fff; border: var(--sc-border-sm) solid var(--sc-line); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow-sm); overflow: hidden; } .sc-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; font-family: var(--sc-font-display); font-weight: 600; font-size: 1.05rem; color: var(--sc-gray-900); cursor: pointer; } .sc-faq summary::-webkit-details-marker { display: none; } .sc-faq summary::after { content: "›"; font-size: 1.5rem; line-height: 1; transition: transform 0.2s; color: var(--sc-gray-500); } .sc-faq details[open] summary::after { transform: rotate(90deg); } .sc-faq details > div { padding: 0 1.15rem 1.15rem; font-family: var(--sc-font-body); color: var(--sc-gray-600); line-height: 1.65; } /* 输入框 */ .sc-input { -webkit-appearance: none; appearance: none; width: 100%; min-height: 48px; padding: 0.7rem 1rem; font-family: var(--sc-font-body); font-size: 1rem; color: var(--sc-gray-900); background: #fff; border: var(--sc-border-sm) solid var(--sc-line); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow-sm); outline: none; } .sc-input:focus { box-shadow: var(--sc-shadow-sm), 0 0 0 4px rgba(192, 132, 252, 0.35); } /* 页面容器 / 网格 / 分区 */ .sc-container { width: 100%; max-width: 80rem; margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .sc-container { padding: 0 1.5rem; } } .sc-container--narrow { max-width: 64rem; } .sc-container--tight { max-width: 48rem; } .sc-section { position: relative; padding: 3rem 0; } @media (min-width: 768px) { .sc-section { padding: 4.5rem 0; } } .sc-section--sky { background: linear-gradient(180deg, var(--sc-sky-100), var(--sc-blue-50) 60%, #fff); } .sc-section--band { border-top: var(--sc-border) solid var(--sc-line); border-bottom: var(--sc-border) solid var(--sc-line); background: #fff; } .sc-section--soft { background: #fafafa; } .sc-section-head { text-align: center; max-width: 42rem; margin: 0 auto 2.25rem; } .sc-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); } .sc-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); } .sc-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); } .sc-divider { height: var(--sc-border); background: var(--sc-line); border: 0; margin: 0; } /* 页面外壳（子页面 hub 用） */ .sc-page { position: relative; min-height: 100dvh; background: linear-gradient(180deg, var(--sc-sky-100) 0%, #fff 40%); font-family: var(--sc-font-body); color: var(--sc-gray-900); } .sc-page > .sc-blobs { position: fixed; } .sc-page-inner { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; } @media (min-width: 640px) { .sc-page-inner { padding: 2rem 1.5rem 5rem; } } .sc-page-inner--narrow { max-width: 52rem; } /* 英雄区（子页面） */ .sc-hero { position: relative; display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem; background: #fff; border: var(--sc-border) solid var(--sc-line); border-radius: var(--sc-radius-xl); box-shadow: var(--sc-shadow-lg); margin-bottom: 2rem; overflow: hidden; } .sc-hero--center { flex-direction: column; text-align: center; } .sc-hero-ico { flex-shrink: 0; } .sc-hero h1 { margin-bottom: 0.35rem; } .sc-hero p { margin: 0; } @media (max-width: 640px) { .sc-hero { flex-direction: column; text-align: center; padding: 1.25rem; } } /* 顶部粘性导航（首页用） */ .sc-nav { position: sticky; top: 0; z-index: 300; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: var(--sc-border) solid var(--sc-line); } .sc-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; } .sc-brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.04em; color: #a855f7; text-decoration: none !important; } .sc-brand .sc-mascot { width: 44px; height: 44px; } .sc-nav-links { display: flex; align-items: center; gap: 0.25rem; } .sc-nav-links a { font-family: var(--sc-font-display); font-weight: 600; font-size: 1rem; padding: 0.5rem 0.9rem; border-radius: var(--sc-radius-full); color: var(--sc-gray-800); text-decoration: none; transition: background var(--sc-dur); } .sc-nav-links a:hover, .sc-nav-links a.is-active { background: var(--sc-yellow); text-decoration: none; } .sc-nav-right { display: flex; align-items: center; gap: 0.6rem; } /* 吉祥物（内联 SVG 容器） */ .sc-mascot { display: inline-block; width: 64px; height: 64px; filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.18)); } /* 反馈气泡（游戏） */ .sc-toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 999; padding: 0.7rem 1.2rem; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.05rem; color: var(--sc-gray-900); background: var(--sc-yellow); border: var(--sc-border-sm) solid var(--sc-line); border-radius: var(--sc-radius); box-shadow: var(--sc-shadow); animation: sc-pop 0.3s var(--sc-ease-pop) both; } .sc-toast--good { background: var(--sc-green); } .sc-toast--bad { background: var(--sc-red); } /* 空态 / 加载 */ .sc-loader { display: inline-block; width: 2.5rem; height: 2.5rem; border: 4px solid var(--sc-line); border-top-color: var(--sc-yellow); border-radius: 50%; animation: sc-spin 0.9s linear infinite; } /* 表格 */ .sc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--sc-font-body); border: var(--sc-border-sm) solid var(--sc-line); border-radius: var(--sc-radius); overflow: hidden; background: #fff; } .sc-table th { font-family: var(--sc-font-display); background: var(--sc-yellow); border-bottom: var(--sc-border-sm) solid var(--sc-line); padding: 0.7rem 0.9rem; text-align: left; } .sc-table td { padding: 0.65rem 0.9rem; border-bottom: 2px solid var(--sc-gray-100); } .sc-table tr:last-child td { border-bottom: 0; } /* 页脚 */ .sc-footer { background: var(--sc-gray-900); color: #e5e7eb; font-family: var(--sc-font-body); padding: 3rem 0 2rem; border-top: var(--sc-border) solid var(--sc-line); } .sc-footer a { color: #fff; text-decoration: none; } .sc-footer a:hover { text-decoration: underline; text-decoration-color: var(--sc-yellow); text-decoration-thickness: 3px; text-underline-offset: 4px; } .sc-footer h4 { font-family: var(--sc-font-display); color: #fff; font-size: 1.05rem; margin: 0 0 0.75rem; } .sc-footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } .sc-footer-bottom { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.85rem; color: #9ca3af; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; } /* 无障碍：减少动效 */ @media (prefers-reduced-motion: reduce) { .sc-blobs span, .sc-anim-float, .sc-anim-wiggle, .sc-anim-bounce { animation: none !important; } .sc-btn, .sc-card { transition: none !important; } } /* ========================================================================== 全站皮肤（由 site-nav.js 为每个子页面添加 html.sc-theme） 字体令牌、标题字体、顶部导航；子页面学术皮肤见 s-class-pages-academoo.css。 ========================================================================== */ html.sc-theme .sclass-page-nav { font-family: var(--sc-font-display); font-size: 14px; gap: 12px; padding-top: max(8px, env(safe-area-inset-top, 0px)); padding-bottom: 8px; background: rgba(255, 255, 255, 0.96); border-bottom: var(--sc-border-sm) solid var(--sc-line); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.06); } html.sc-theme .sclass-page-nav-brand { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-family: var(--sc-font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; color: #a855f7 !important; text-decoration: none !important; padding-right: 8px; margin-right: 2px; border-right: 2px solid var(--sc-gray-100); } html.sc-theme .sclass-page-nav-brand svg { width: 26px; height: 26px; display: block; } html.sc-theme .sclass-page-nav-back { min-height: 34px; padding: 4px 14px 4px 10px; border: 2.5px solid var(--sc-line); border-radius: 999px; background: var(--sc-yellow); color: var(--sc-gray-900) !important; font-family: var(--sc-font-display); font-weight: 700 !important; box-shadow: 2px 2px 0 #000; transition: transform 0.15s, box-shadow 0.15s; } html.sc-theme .sclass-page-nav-back:hover { background: var(--sc-yellow); border-color: var(--sc-line); color: var(--sc-gray-900) !important; transform: translate(1px, 1px); box-shadow: 1px 1px 0 #000; text-decoration: none; } html.sc-theme .sclass-page-nav-back:active { transform: translate(2px, 2px); box-shadow: none; } html.sc-theme .sclass-page-nav-crumbs { color: var(--sc-gray-500); font-family: var(--sc-font-body); font-weight: 600; } html.sc-theme .sclass-page-nav-crumbs a { color: var(--sc-gray-600); font-weight: 600; border-radius: 999px; padding: 4px 10px; } html.sc-theme .sclass-page-nav-crumbs a:hover { color: var(--sc-gray-900); background: var(--sc-sky-100); text-decoration: none; } html.sc-theme .sclass-page-nav-sep { color: var(--sc-gray-300); } html.sc-theme .sclass-page-nav-current { color: var(--sc-gray-900); font-weight: 700; padding: 3px 10px; border: 2px solid var(--sc-line); border-radius: 999px; background: #fff; } html.sc-theme .sclass-page-nav-home { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 12px; border: 2.5px solid var(--sc-line); border-radius: 999px; background: #fff; color: var(--sc-gray-900) !important; font-family: var(--sc-font-display); font-weight: 700; text-decoration: none !important; box-shadow: 2px 2px 0 #000; transition: transform 0.15s, box-shadow 0.15s, background 0.15s; } html.sc-theme .sclass-page-nav-home:hover { background: var(--sc-blue); transform: translate(1px, 1px); box-shadow: 1px 1px 0 #000; } @media (max-width: 640px) { html.sc-theme .sclass-page-nav-home span { display: none; } html.sc-theme .sclass-page-nav-brand { border-right: 0; padding-right: 0; } } /* 标题统一为展示字体（仅当页面未指定手写体/衬线体强需求时；抄写/打印页除外） */ html.sc-theme:not(.sc-keep-fonts) body h1, html.sc-theme:not(.sc-keep-fonts) body h2, html.sc-theme:not(.sc-keep-fonts) body h3 { font-family: var(--sc-font-display); } html.sc-theme:not(.sc-keep-fonts) body { font-family: var(--sc-font-body); } @media print { html.sc-theme body, html.sc-theme body h1, html.sc-theme body h2, html.sc-theme body h3 { font-family: inherit; } } /* 焦点环 & 选区颜色统一 */ html.sc-theme ::selection { background: var(--sc-yellow); color: var(--sc-gray-900); } html.sc-theme :focus-visible { outline-color: #a855f7; } /* ========================================================================== Hub 皮肤（html.sc-skin）：为「玻璃拟态 / 暗色 hub」结构套用统一卡通皮肤 适用于 Primary 各课程首页、复习游戏首页等使用 .page/.hero/a.card/.hw/.grid 的页面 ========================================================================== */ html.sc-skin body { background: linear-gradient(180deg, var(--sc-sky-100) 0%, #fff 45%) !important; color: var(--sc-gray-900) !important; font-family: var(--sc-font-body) !important; } html.sc-skin .bg, html.sc-skin .bg-photo, html.sc-skin .bg-frost { display: none !important; } html.sc-skin .page { max-width: 60rem; } html.sc-skin .page > .back, html.sc-skin .back-hub { display: none !important; } html.sc-skin .hero, html.sc-skin .settings-banner { background: #fff !important; border: var(--sc-border) solid var(--sc-line) !important; border-left-width: var(--sc-border) !important; border-radius: var(--sc-radius-xl) !important; box-shadow: var(--sc-shadow-lg) !important; color: var(--sc-gray-900) !important; } html.sc-skin .hero-icon, html.sc-skin .logo-mark { border: var(--sc-border-sm) solid var(--sc-line) !important; border-radius: var(--sc-radius) !important; box-shadow: var(--sc-shadow-sm) !important; background: var(--sc-yellow); } html.sc-skin .hero-tag, html.sc-skin .logo-text, html.sc-skin .card-tag, html.sc-skin .card .tag { font-family: var(--sc-font-display) !important; color: #a855f7 !important; letter-spacing: 0.1em !important; } html.sc-skin h1, html.sc-skin .hero h1, html.sc-skin .hdr h1, html.sc-skin .card-title, html.sc-skin .sb-title { font-family: var(--sc-font-display) !important; color: var(--sc-gray-900) !important; background: none !important; -webkit-text-fill-color: initial !important; font-weight: 600 !important; } html.sc-skin .hero p, html.sc-skin .subtitle, html.sc-skin .hdr p, html.sc-skin .card-desc, html.sc-skin .card p, html.sc-skin footer, html.sc-skin .foot { color: var(--sc-gray-600) !important; } html.sc-skin h2 { font-family: var(--sc-font-display) !important; font-size: 1rem !important; letter-spacing: 0.1em !important; color: var(--sc-gray-600) !important; text-transform: uppercase; } html.sc-skin .grid { gap: 1rem !important; } html.sc-skin a.card, html.sc-skin .card, html.sc-skin a.hw, html.sc-skin a.plan-banner, html.sc-skin a.syllabus-banner, html.sc-skin .level-pill { background: #fff !important; color: var(--sc-gray-900) !important; border: var(--sc-border-sm) solid var(--sc-line) !important; border-left-width: var(--sc-border-sm) !important; border-radius: var(--sc-radius-lg) !important; box-shadow: var(--sc-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } html.sc-skin a.card:hover, html.sc-skin a.hw:hover, html.sc-skin a.plan-banner:hover, html.sc-skin a.syllabus-banner:hover, html.sc-skin .level-pill:hover { transform: translateY(-4px) !important; box-shadow: var(--sc-shadow-lg) !important; border-color: var(--sc-line) !important; } html.sc-skin a.card:active, html.sc-skin a.hw:active { transform: translateY(0) !important; box-shadow: var(--sc-shadow-press) !important; } html.sc-skin a.card::before, html.sc-skin a.card::after { display: none !important; } html.sc-skin .card-label, html.sc-skin .card h2, html.sc-skin a.hw span, html.sc-skin .plan-banner strong, html.sc-skin .card .go { color: var(--sc-gray-900) !important; font-family: var(--sc-font-display) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 1.15rem !important; } html.sc-skin .card-icon { background: var(--sc-sky-100) !important; border: 2.5px solid var(--sc-line) !important; border-radius: 0.85rem !important; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; } html.sc-skin .card-arrow { background: var(--sc-yellow) !important; border: 2.5px solid var(--sc-line) !important; color: var(--sc-gray-900) !important; box-shadow: 2px 2px 0 #000; } html.sc-skin a.card:hover .card-arrow { background: var(--sc-blue) !important; border-color: var(--sc-line) !important; } html.sc-skin .card-tags .tag, html.sc-skin .words span { font-family: var(--sc-font-display) !important; background: #fff !important; color: var(--sc-gray-700) !important; border: 2px solid var(--sc-line) !important; border-radius: 999px !important; opacity: 1 !important; } html.sc-skin .words span.on { background: var(--sc-green) !important; color: var(--sc-gray-900) !important; } html.sc-skin .words span.off { opacity: 0.4 !important; } html.sc-skin .level-pill { padding: 0.5rem 1rem !important; font-family: var(--sc-font-display) !important; font-weight: 600 !important; } html.sc-skin .level-pill.is-active { background: var(--sc-yellow) !important; } html.sc-skin .btn-set { font-family: var(--sc-font-display) !important; background: var(--sc-orange) !important; color: #fff !important; border: var(--sc-border-sm) solid var(--sc-line) !important; border-radius: var(--sc-radius) !important; box-shadow: var(--sc-shadow-sm) !important; } html.sc-skin footer { border-top: var(--sc-border-sm) solid var(--sc-line) !important; } html.sc-skin footer strong, html.sc-skin .settings-banner strong { color: var(--sc-accent) !important; }