/* ═══════════════════════════════════════════════════════════════════════ TalkerABC 官网 · talkerabc.vip 设计口径与主应用完全一致（见项目 design-spec.md）： · 品牌色 #4f46e5；语义色：绿=已掌握 / 蓝=生词 / 红=错题 / 琥珀=收藏 · 字重只用 400 / 600；圆角 6 / 9 / 12 / 16；动效 200ms ease · 卡片靠**边框 + 底色差**表达层级，不用重投影 · 亮/暗两套令牌，靠 切换（无 FOUC，见 index.html 的启动脚本） ═══════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; --bg: #f7f8fb; --bg-rgb: 247 248 251; --surface: #ffffff; --surface-rgb: 255 255 255; --surface-2: #fcfcfd; --surface-3: #f8fafc; --surface-hover: #f1f5f9; --border: #e8eaf0; --border-2: #e4e8ef; --border-soft: #eef1f6; --line: #8494a6; --ink: #0f172a; --ink-2: #475569; --ink-3: #64748b; --ink-4: #828fa2; --brand: #4f46e5; --brand-fg: #4f46e5; --brand-hover: #4338ca; --brand-deep: #3730a3; --brand-soft: #f1f0fe; --brand-soft-2: #eef0ff; --brand-line: #c7c2f7; --on-brand: #ffffff; /* 五色调「浅底 + 深字」 */ --tone-brand-bg: #f1f0fe; --tone-brand-fg: #4f46e5; --tone-ok-bg: #e7f6ef; --tone-ok-fg: #047857; --tone-info-bg: #e8f1fd; --tone-info-fg: #1d4ed8; --tone-danger-bg: #fcecec; --tone-danger-fg: #b91c1c; --tone-warn-bg: #fef4e4; --tone-warn-fg: #92400e; --ok: #047857; --danger: #b91c1c; --shadow-rgb: 15 23 42; --radius-s: 6px; --radius-m: 9px; --radius-l: 12px; --radius-xl: 16px; --maxw: 1120px; /* ── 布局令牌 ── 这几个值互相咬合，改任意一个都要连带看另外两个（见 html 的 scroll-padding-top）： --head-h 顶栏**内容**高度，被 .head-in 与锚点让位共用（≤620px 降为 60px） --head-line 顶栏底部分隔线宽度（吸顶时才着色，但一直占位） --anchor-gap 点导航后，区块标题与顶栏**底边**的目标间距 --sec-y 区块上下留白（页面纵向节奏） */ --head-h: 68px; --head-line: 1px; --anchor-gap: 24px; --sec-y: clamp(56px, 6.6vw, 92px); } [data-theme='dark'] { color-scheme: dark; --bg: #0b1020; --bg-rgb: 11 16 32; --surface: #141a2e; --surface-rgb: 20 26 46; --surface-2: #111730; --surface-3: #1a2137; --surface-hover: #1e2740; --border: #232c47; --border-2: #2a3450; --border-soft: #1d2540; --line: #566079; --ink: #eef2fb; --ink-2: #c0c9de; --ink-3: #94a0bb; --ink-4: #6f7c9b; /* 暗色下「当填充的靛蓝」要够深才压得住白字，「当文字的靛蓝」要够亮才读得清 —— 分两个值 */ --brand: #4f46e5; --brand-fg: #a5b4fc; --brand-hover: #6366f1; --brand-deep: #4338ca; --brand-soft: #1c2143; --brand-soft-2: #212747; --brand-line: #3d4180; --on-brand: #ffffff; --tone-brand-bg: #1c2143; --tone-brand-fg: #a5b4fc; --tone-ok-bg: #102a22; --tone-ok-fg: #6ee7b7; --tone-info-bg: #12213c; --tone-info-fg: #93c5fd; --tone-danger-bg: #2b1718; --tone-danger-fg: #fca5a5; --tone-warn-bg: #2b2211; --tone-warn-fg: #fcd34d; --ok: #6ee7b7; --danger: #fca5a5; --shadow-rgb: 0 0 0; } /* ───────── 基础 ───────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* 锚点落点：导航指向的是区块的**标题容器**（.sec-head / .cta-in），不是
本身。 这里让出「顶栏总高（内容 + 分隔线）+ --anchor-gap」，标题因此恒定落在顶栏下方 24px —— 任何视口宽度都一样（已在 1440 / 1024 / 768 / 390 四个宽度实测落点一致）。 反面教材（改前）：锚点挂在
上、这里让位 84px，而区块自己还有 96px 上留白， 两者叠加把标题推到视口 180px 处，顶栏下方空出 111px —— 就是「点功能按钮后一大片空白」。 另外，让位值必须 ≥ 顶栏总高，否则 Tab 聚焦到页面顶部的元素时会被吸顶栏盖住。 */ scroll-padding-top: calc(var(--head-h) + var(--head-line) + var(--anchor-gap)); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.7 -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; } p { margin: 0; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } strong { font-weight: 600; color: var(--ink); } /* 键盘按键提示（功能卡里的「回车」「Alt+Q」）。 改前 吃的是浏览器默认样式：等宽字体、无底色、无边框、无内边距 —— 混在 14.5px 的正文里根本看不出这是个按键，等于把这条卖点写废了。 */ kbd { display: inline-block; margin: 0 1px; padding: 1px 5px; border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: var(--radius-s); background: var(--surface-3); color: var(--ink); font-family: ui-monospace, Consolas, monospace; font-size: 0.85em; line-height: 1.5; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* 图标：统一线性风格，颜色跟随文字 */ .ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .wrap-narrow { max-width: 760px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px 16px; border-radius: 0 0 var(--radius-m) 0; background: var(--brand); color: var(--on-brand); font-size: 14px; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-s); } /* ───────── 按钮 ───────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--radius-m); font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease; } .btn-sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: var(--radius-s); } .btn-lg { height: 50px; padding: 0 26px; font-size: 16px; border-radius: var(--radius-l); } .btn .ico { font-size: 17px; } .btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); transform: translateY(-1px); } .btn-ghost { background: var(--surface); border-color: var(--border-2); color: var(--ink-2); } .btn-ghost:hover { background: var(--surface-hover); color: var(--ink); border-color: var(--brand-line); } /* 按压反馈：hover 上浮，active 压回并轻微缩，形成「点得动」的手感 */ .btn:active { transform: translateY(0) scale(0.985); } /* ───────── 顶栏 ───────── */ .head { position: sticky; top: 0; z-index: 50; background: rgb(var(--bg-rgb) / 0.78); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: var(--head-line) solid transparent; transition: border-color 200ms ease, background 200ms ease; } .head.is-stuck { border-bottom-color: var(--border); } .head-in { display: flex; align-items: center; gap: 20px; height: var(--head-h); } .brand { display: flex; align-items: center; gap: 10px; margin-right: auto; } .brand img { width: 36px; height: 36px; border-radius: 10px; } .brand-txt { display: flex; flex-direction: column; line-height: 1.2; } .brand-txt b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } .brand-txt i { font-style: normal; font-size: 11.5px; color: var(--ink-3); } .nav { display: flex; align-items: center; gap: 4px; } .nav a { padding: 7px 12px; border-radius: var(--radius-s); font-size: 14px; color: var(--ink-2); transition: background 200ms ease, color 200ms ease; } .nav a:hover { background: var(--surface-hover); color: var(--ink); } .head-act { display: flex; align-items: center; gap: 10px; } /* 移动端汉堡：默认隐藏，≤820px 才出现（桌面端仍用完整 .nav） */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border-2); border-radius: var(--radius-s); background: var(--surface); color: var(--ink-2); transition: background 200ms ease, color 200ms ease, border-color 200ms ease; } .nav-toggle:hover { background: var(--surface-hover); color: var(--ink); } .nav-toggle[aria-expanded='true'] { color: var(--brand-fg); border-color: var(--brand-line); } /* 移动端下拉导航：吸顶 header 内的展开区，点链接自动收起（JS 控制 hidden/open） */ .mobile-nav { display: none; flex-direction: column; gap: 2px; padding: 8px 12px 14px; border-top: 1px solid var(--border); background: var(--bg); } .mobile-nav:not([hidden]) { display: flex; } .mobile-nav a { padding: 12px 12px; border-radius: var(--radius-s); font-size: 15px; color: var(--ink-2); transition: background 200ms ease, color 200ms ease; } .mobile-nav a:hover { background: var(--surface-hover); color: var(--ink); } /* 主题三态：连体胶囊（与主应用外观切换同一套语汇） */ .theme { display: flex; align-items: center; border: 1px solid var(--border-2); border-radius: var(--radius-m); background: var(--surface); overflow: hidden; } .theme button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-right: 1px solid var(--border-2); background: transparent; color: var(--ink-3); transition: background 200ms ease, color 200ms ease; } .theme button:last-child { border-right: 0; } .theme button .ico { font-size: 15px; } .theme button:hover { background: var(--surface-hover); color: var(--ink); } .theme button[aria-pressed='true'] { background: var(--brand-soft); color: var(--brand-fg); } .theme button[aria-pressed='true']:hover { background: var(--brand-soft-2); } /* ───────── Hero ───────── */ /* 上下留白从 92/104 收到 68/88：首屏左列是**垂直居中**的（.hero-in 的 align-items:center）， 居中本身还会再顶下来约 34px，所以改前 h1 落在视口 195px 处、顶栏下方空 126px。 收过之后 h1 落到 ~171px，首屏的"头重脚轻"消失，下一区块的标题也正好探进首屏下沿。 */ .hero { position: relative; overflow: hidden; padding: clamp(40px, 4.8vw, 68px) 0 clamp(52px, 6.6vw, 88px); } /* 一层极淡的品牌光晕，让大留白不显得空 */ .hero-glow { position: absolute; z-index: 0; pointer-events: none; top: -320px; left: 50%; transform: translateX(-50%); width: 1100px; height: 780px; background: radial-gradient(closest-side, var(--brand-soft) 0%, transparent 72%); opacity: 0.9; } .hero-in { position: relative; z-index: 1; /* 右列略宽于左列：产品示意要复刻真实界面（侧栏 + 顶栏三段信息），窄了会折行； 左列从 0.72fr 提到 0.85fr，给文案更舒展的呼吸空间 */ display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); align-items: center; } .hero-copy { min-width: 0; } /* 注：hero 顶部原来有个「连词成句 · 听句子练语序」的胶囊标签，2026-09-18 按要求删除， 对应的 `.pill` 样式一并清掉。现在 h1 是这一列的第一行，故上外边距归零 （h1 与下方导语之间的间距由 .lede 的 margin-top 提供）。 */ .hero h1 { margin: 0; font-size: clamp(34px, 5.2vw, 58px); line-height: 1.12; letter-spacing: -0.025em; } /* 「拼」字是这一屏的题眼：用品牌色 + 手绘感下划线强调，不用渐变糊满整句 */ .hero h1 em { font-style: normal; color: var(--brand-fg); position: relative; padding: 0 2px; } .hero h1 em::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: 0.08em; height: 0.16em; background: var(--brand-line); border-radius: 999px; z-index: -1; } [data-theme='dark'] .hero h1 em::after { background: rgba(165, 180, 252, 0.28); } .lede { margin: 20px 0 0; max-width: 39em; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.75; color: var(--ink-2); } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .trust { margin: 30px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; color: var(--ink-3); } .trust li { display: inline-flex; align-items: center; gap: 7px; } .trust .ico { font-size: 16px; color: var(--brand-fg); } /* ───────── 产品界面示意（按真实界面截图 2026-09-18 复刻）───────── */ /* 侧栏菜单顺序、顶栏三段信息（课程 / 题号 / 乱序）、计时与对错计数、 题面大字居中、逐词词格（绿=拼对、红=拼错）均与真实界面一致。 注 1：顶栏课程名不写具体教材名（如"某教材 第一册"），用课程名「日常会话」—— 文案短于原版，顶栏仍为单行，外框尺寸不变。 注 2：顶栏右侧只留「计时 + 对错计数」，2026-09-18 按要求去掉了全屏与声音两个工具图标。 */ .mock { min-width: 0; } .mock-frame { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); overflow: hidden; box-shadow: 0 24px 60px rgb(var(--shadow-rgb) / 0.14); } .mock-body { display: grid; grid-template-columns: 132px minmax(0, 1fr); } /* 侧栏：真实菜单顺序（训练场 / 我的课程 / 学习中心 / 课程广场），当前项高亮 */ .mock-side { display: flex; flex-direction: column; gap: 1px; padding: 13px 9px; background: var(--surface-2); border-right: 1px solid var(--border-soft); } .mock-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 0 6px; font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; } .mock-brand img { width: 20px; height: 20px; border-radius: 6px; } .mock-nav { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--radius-s); font-size: 12px; color: var(--ink-2); } .mock-nav .ico { font-size: 14px; color: var(--ink-3); flex: none; } .mock-nav.sub { font-size: 11.5px; color: var(--ink-3); } .mock-nav.on { background: var(--brand-soft); color: var(--brand-fg); font-weight: 600; } .mock-nav.on .ico { color: var(--brand-fg); } .mock-group { margin: 14px 0 5px; padding: 0 9px; font-size: 11px; color: var(--ink-3); } /* 顶栏：左「课程 · 题号 · 乱序」，右「计时 · 对错 · 工具」 */ .mock-main { display: flex; flex-direction: column; min-width: 0; } .mock-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 13px; border-bottom: 1px solid var(--border-soft); } .mock-left, .mock-right { display: flex; align-items: center; gap: 9px; min-width: 0; } .mock-ico-btn { font-size: 15px; color: var(--ink-3); flex: none; } .mock-book, .mock-no { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 11.5px; font-weight: 600; } .mock-book .ico, .mock-no .ico { font-size: 14px; color: var(--brand-fg); } .mock-no { color: var(--ink-2); } .mock-no i { font-style: normal; font-weight: 400; color: var(--ink-3); font-size: 10.5px; } .mock-shuffle { white-space: nowrap; font-size: 10.5px; font-weight: 600; color: var(--ink-2); padding: 3px 10px; border-radius: 999px; background: var(--surface-hover); border: 1px solid var(--border-soft); } .mock-timer { padding: 3px 9px; border-radius: 999px; background: var(--surface-hover); font-size: 11px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; } .mock-count { display: inline-flex; gap: 8px; font-size: 11.5px; font-weight: 700; } .mock-count .ok { color: var(--ok); } .mock-count .no { color: var(--danger); } /* 题面 + 词格 */ .mock-q { margin: auto 18px 0; padding-top: 30px; text-align: center; font-size: clamp(17px, 1.55vw, 21px); font-weight: 700; letter-spacing: -0.01em; } .mock-cells { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 9px 14px; justify-content: center; margin: 0 18px auto; padding: 26px 0 38px; } /* 拼对的词 = 绿线绿字；拼错的词 = 红线红字（真实实现不给底色） */ .mcell { padding-bottom: 5px; border-bottom: 2px solid currentColor; font-size: clamp(14px, 1.25vw, 16.5px); font-weight: 500; color: var(--ok); } .mcell.bad { color: var(--danger); } /* ───────── 区块骨架 ───────── */ /* 纵向节奏：上下一律 var(--sec-y)。 注意锚点让位不在这里 —— 见 html 的 scroll-padding-top（导航指向的是 .sec-head， 所以这里的留白只负责"区块之间隔多远"，不再被"点导航后标题落哪"绑架）。 */ .sec { padding: var(--sec-y) 0; } .sec-alt { background: var(--surface-2); border-block: 1px solid var(--border-soft); } /* 紧邻收尾区（.cta）的那个内容区块：底部留白收一档。 它的下留白若按常规给，会和 .cta 的上留白叠起来 —— 滚到页底时 （「获取激活码」的落点就在页底，物理上无法再往上滚）卡片上方会空出一条无内容的带。 */ .sec-tail { padding-bottom: clamp(40px, 4.2vw, 60px); } .sec-head { max-width: 640px; margin-bottom: 40px; } /* 注：原来这里有一条 `.eyebrow`（区块上方的小号紫色眉标）。2026-09-18 按要求全部删除 —— 它原本承担的信息量已并入各区主标题，例如 FAQ 区标题直接改成「常见问题解答」， 否则「你可能想知道」这样的悬念式标题会看不出下面是问答区。 */ .sec-head h2 { font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -0.02em; } .sec-sub { margin-top: 12px; font-size: 16px; color: var(--ink-3); } /* ───────── 功能卡 ───────── */ .grid { display: grid; gap: 18px; } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card { padding: 24px 22px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--border); transition: border-color 200ms ease, transform 200ms ease, background 200ms ease; } .card:hover { border-color: var(--brand-line); transform: translateY(-2px); } .card h3 { margin: 14px 0 8px; font-size: 17px; } .card p { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); } .card-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; font-size: 21px; } .tone-brand { background: var(--tone-brand-bg); color: var(--tone-brand-fg); } .tone-ok { background: var(--tone-ok-bg); color: var(--tone-ok-fg); } .tone-info { background: var(--tone-info-bg); color: var(--tone-info-fg); } .tone-danger { background: var(--tone-danger-bg); color: var(--tone-danger-fg); } .tone-warn { background: var(--tone-warn-bg); color: var(--tone-warn-fg); } /* ───────── 三步 ───────── */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; } .steps li { position: relative; padding: 26px 22px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--border); } .step-no { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: 14px; font-weight: 600; } .steps h3 { margin: 14px 0 8px; font-size: 16px; } .steps p { font-size: 14.5px; line-height: 1.7; color: var(--ink-2); } /* ───────── 课程设计 ───────── */ .book { position: relative; padding: 26px 24px 24px; border-radius: var(--radius-l); background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: border-color 200ms ease, transform 200ms ease; } .book::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--brand); opacity: 0.85; } .book:hover { border-color: var(--brand-line); transform: translateY(-2px); } .book-no { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--brand-fg); } .book h3 { margin: 8px 0 4px; font-size: 18px; } .book-sub { font-size: 13px; color: var(--ink-3); } .book-desc { margin-top: 12px; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); } .book-note { margin-top: 20px; font-size: 14px; color: var(--ink-3); } /* ───────── FAQ ───────── */ .faq { border-bottom: 1px solid var(--border); padding: 4px 0; } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-size: 16px; font-weight: 600; } .faq summary::-webkit-details-marker { display: none; } /* 展开指示：向下的箭头图标，展开后旋转 180° 指向上 */ .faq summary .chev { width: 20px; height: 20px; color: var(--ink-3); transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease; } .faq summary:hover .chev { color: var(--brand-fg); } .faq[open] summary .chev { transform: rotate(180deg); color: var(--brand-fg); } .faq p { padding: 0 0 20px; max-width: 60em; font-size: 14.5px; line-height: 1.8; color: var(--ink-2); } /* ───────── CTA（页面收尾区）───────── 它和别的 .sec 不同：上方是页面最后一个内容区块、下方紧接页脚，不构成"区块间的呼吸"。 改前上下沿用区块的 96px，与 FAQ 的 96px 叠出 192px 的空带 —— 滚到页底点「获取激活码」时， 那 192px 就是卡片上方那块无内容的空场。现在上 48 / 下 92： 上留白与 .sec-tail 的 60px 合成 ~108px（够分成"两块"，不再是空场）， 下留白多留一点，让卡片"浮"在页脚之前而不是贴着页脚。 */ .cta { padding-top: clamp(32px, 3.6vw, 48px); padding-bottom: clamp(56px, 6.4vw, 92px); } .cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; padding: clamp(28px, 4vw, 44px); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--brand-soft) 0%, var(--surface) 62%); border: 1px solid var(--brand-line); } .cta h2 { font-size: clamp(24px, 2.8vw, 32px); letter-spacing: -0.02em; } .cta p { margin-top: 10px; max-width: 34em; font-size: 15px; color: var(--ink-2); } .cta-act { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .wx { display: flex; flex-direction: column; gap: 2px; padding: 10px 18px; border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--border-2); } .wx-label { font-size: 11.5px; color: var(--ink-3); } .wx-id { font-size: 20px; font-weight: 600; letter-spacing: 0.02em; font-family: ui-monospace, Consolas, monospace; } /* ───────── 页脚 ───────── */ .foot { border-top: 1px solid var(--border); background: var(--surface-2); padding: 40px 0 32px; } .foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .foot-brand { display: flex; align-items: center; gap: 11px; } .foot-brand img { width: 34px; height: 34px; border-radius: 9px; } .foot-brand b { font-size: 15px; font-weight: 600; } .foot-brand p { font-size: 12px; color: var(--ink-3); } .foot-nav { display: flex; flex-wrap: wrap; gap: 6px 18px; } .foot-nav a { font-size: 13.5px; color: var(--ink-2); } .foot-nav a:hover { color: var(--brand-fg); } /* 版权与备案同处一行。 用 grid 的 `1fr auto 1fr` 而不是 flex + space-between： 后者只能把两端顶开，中间那列会随左右宽度漂移；这里左右两列等宽， 中间那列因此**恒定落在页面中线上**（这才是"居中"，不是"大致在中间"）。 将来补一条公安备案时它会落到右列，中间那列依然居中。 */ .foot-legal { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border-soft); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px 16px; } .foot-copy { justify-self: start; } .foot-icp { justify-self: center; } .foot-line { font-size: 12.5px; color: var(--ink-3); } .foot-line a { color: var(--ink-3); text-decoration: none; } .foot-line a:hover { color: var(--brand-fg); text-decoration: underline; } /* ───────── 响应式 ───────── */ @media (max-width: 1040px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 940px) { .hero-in { grid-template-columns: minmax(0, 1fr); gap: 40px; } .mock { max-width: 640px; margin-inline: auto; } .hero-glow { top: -260px; width: 780px; height: 620px; } } @media (max-width: 820px) { .nav { display: none; } .nav-toggle { display: inline-flex; } .brand-txt i { display: none; } .grid-3, .grid-2, .steps { grid-template-columns: minmax(0, 1fr); } .cta-in { flex-direction: column; align-items: flex-start; } } /* 桌面端无论如何不显示移动菜单（防止缩放回桌面时残留展开态） */ @media (min-width: 821px) { .mobile-nav { display: none !important; } } @media (max-width: 620px) { /* 顶栏高度在窄屏降一档：--head-h 是唯一来源，.head-in 的高度与锚点让位都跟着走 */ :root { --head-h: 60px; } .wrap { padding: 0 18px; } .head-in { gap: 12px; } /* 注：原 `.btn-sm .ico { display: none }` 已删 —— 顶栏按钮的箭头图标已移除， 这条规则随之失去对象（小屏仍需要的是更紧的内边距）。 */ .btn-sm { padding: 0 11px; } /* 小屏藏掉示意里的侧栏：把宽度全留给答题区，否则文字会挤成一团 */ .mock-body { grid-template-columns: minmax(0, 1fr); } .mock-side { display: none; } /* 顶栏一行放不下：允许换行，工具区靠左收齐 */ .mock-top { flex-wrap: wrap; gap: 8px 12px; padding: 10px 13px; } .mock-left, .mock-right { gap: 9px; } .mock-q { margin-inline: 14px; padding-top: 24px; } .mock-cells { margin-inline: 14px; gap: 8px 14px; padding: 20px 0 28px; } .theme button { width: 30px; height: 30px; } /* 窄屏一行放不下两段：改为居中堆叠（"备案号居中"的意图在小屏继续成立） */ .foot-legal { grid-template-columns: minmax(0, 1fr); gap: 4px; } .foot-copy, .foot-icp { justify-self: center; } } /* 尊重「减弱动态效果」：去掉位移与平滑滚动，只留状态变化 */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .card:hover, .book:hover, .btn-primary:hover, .btn:active { transform: none; } } /* 打印：官网用途不大，但要保证备案号与版权能印出来 */ @media print { .head, .hero-glow, .mock, .cta-act, .theme { display: none !important; } body { background: #fff; color: #000; } }