/* ============================================================ 七小龙汉语 Seven Dragons Chinese · 设计令牌 v1.0.0 ------------------------------------------------------------ 本文件只声明 :root 自定义属性，不包含任何选择器规则。 单独引入不会改变站点外观 —— 真正的替换在下一步逐文件做。 全部颜色按 WCAG 2.1 AA 实测（白底 #fff 与米白底 #f7f2ea 双底均 >= 4.5:1）。 ============================================================ */ :root { /* ---------- Brand 朱砂红（沿用，不改） ---------- */ --ht-brand: #b8442e; /* 主色：按钮 / 强调文字 白 5.38 米 4.83 */ --ht-brand-dark: #8f3222; /* hover / 按下 白 7.93 米 7.12 */ --ht-brand-soft: #fdf3f0; /* 极浅底：选中态 / 提示块 文字须用 ink 系 */ --ht-brand-tint: #fbeae6; /* 浅底：免费标签 / 区块底色 */ --ht-on-brand: #ffffff; /* 品牌底/砖红底上的文字（按钮、CTA 带） */ --ht-brand-light: #c14a32; /* 深底上的品牌按钮（主推定价卡） */ --ht-brand-light-hover: #a83c28; --ht-brand-on-dark:#e08a72; /* 深底上的品牌文字/图标（✓ 列表符号） */ /* ---------- Neutral 暖灰（统一页脚与内容区两套灰阶） ---------- */ --ht-ink: #1c2430; /* 标题 / 正文 白 15.62 米 14.02 */ --ht-ink-2: #3d4756; /* 次级标题 白 9.40 米 8.43 */ --ht-muted: #5b6675; /* 说明文字（替换 #8a94a3） 白 5.83 米 5.23 */ --ht-subtle: #677080; /* 最淡文字 / 轻声（下限 4.99） 白 4.99 米 4.48 */ --ht-line: #e6e9ee; /* 分隔线 / 卡片描边 */ --ht-line-strong: #d7dbe1; /* 输入框描边 */ /* ---------- Surface ---------- */ --ht-surface: #ffffff; /* 卡片 / 内容区 */ --ht-surface-alt: #f7f2ea; /* 宣纸米白：交替区块底 */ --ht-surface-soft: #faf8f5; /* 更浅米白（二期可与 alt 合并） */ /* ---------- On dark 深底上的文字 ---------- */ --ht-dark: #1c2430; /* 深底区块：Hero / 顶部导航。注意：**页脚不是深底**， .ht-footer 用的是 --ht-surface(#fff)。曾因误信这条旧注释 把页脚订阅按钮改成米白反白，结果米白落白底对比仅 1.06。 */ --ht-on-dark: #ffffff; --ht-on-dark-soft: #f7f2ea; /* 深底主文字（Hero 标题、主推卡正文） */ --ht-on-dark-muted:#b9b3ab; /* 替换 .ht-trust 的 #8d877f（4.39 -> 7.51） */ --ht-on-dark-dim: #9aa3b0; /* ---------- Tone 四声 + 轻声（核心教学配色） ---------- */ --ht-tone-1: #c0392b; /* 一声 ā 旧 #d0453b 4.57 -> 5.44 */ --ht-tone-2: #8f5a12; /* 二声 á 旧 #e08a2e 2.68 -> 5.77 */ --ht-tone-3: #197a52; /* 三声 ǎ 旧 #3d9970 3.51 -> 5.32 */ --ht-tone-4: #2f6fb2; /* 四声 à 沿用，5.20 */ --ht-tone-0: #677080; /* 轻声 a 旧 #8a94a3 3.07 -> 4.99 */ /* ---------- Semantic ---------- */ --ht-success: #3b6d11; /* 成功提示 / FREE 徽章文字 */ --ht-success-bg: #eaf3de; --ht-success-border:#a7f3d0; --ht-danger: #b3261e; /* 表单错误 白 6.54 米 5.87 */ --ht-danger-bg: #fef2f2; --ht-danger-border:#fecaca; --ht-star: #8f6207; /* 评价星级 旧 #f5a623 2.03 -> 5.36 */ /* ---------- Typography 字号阶梯（20 种 -> 9 级，取消 10/11/11.5/12.5） ---------- */ --ht-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", sans-serif; --ht-font-cn: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif; --ht-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ht-fs-xs: 0.8125rem; /* 13 下限：脚注 / 徽章 */ --ht-fs-sm: 0.875rem; /* 14 次要文字 */ --ht-fs-base: 1rem; /* 16 正文 */ --ht-fs-md: 1.0625rem; /* 17 小标题 */ --ht-fs-lg: 1.125rem; /* 18 导语 */ --ht-fs-xl: 1.25rem; /* 20 卡片标题 */ --ht-fs-h3: 1.5rem; /* 24 */ --ht-fs-h2: clamp(1.75rem, 1.25rem + 2vw, 2.25rem); /* 28 -> 36 区块标题 */ /* v1.7.0：手机上实测 37px 偏大（欧美落地页 Hero h1 手机端主流 30–34px）。 重解线性方程使 375px 屏 = 33px、1280px 屏仍 = 64px（桌面不动）。 */ --ht-fs-h1: clamp(2.0625rem, 1.25rem + 3.43vw, 4rem); /* 33 -> 64 Hero */ --ht-fs-hanzi: clamp(2.5rem, 2rem + 2.5vw, 4rem); /* 汉字主字形 */ --ht-fs-pinyin: var(--ht-fs-md); /* 拼音：旧渲染约 10px -> 17px */ --ht-fs-price: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); /* 32 -> 44 价格数字 */ --ht-lh-tight: 1.2; --ht-lh-snug: 1.35; --ht-lh-base: 1.6; /* ---------- Spacing 4pt 栅格（收敛 22/26/13/9/7 等零散值） ---------- */ --ht-s-1: 4px; --ht-s-2: 8px; --ht-s-3: 12px; --ht-s-4: 16px; --ht-s-5: 24px; --ht-s-6: 32px; --ht-s-7: 48px; --ht-s-8: 64px; --ht-gutter: clamp(20px, 5vw, 40px); /* 页面左右安全边距 */ --ht-container: 1200px; /* 内容最大宽度 */ /* 区块上下留白（单侧）。欧美落地页基准：桌面单侧 64–96px、手机 40–56px。 v1.7.0：上一轮收敛把 .ht-section 写死成 --ht-s-6(32px)，区块合计仅 64px， 远低于基准 → 反馈「挤」。现按基准重设：375px 屏 40px、1280px 屏 77px、≥1333px 封顶 80px。 仍嫌紧就把上限 80px 改 96px；嫌松改 64px。 */ --ht-section-y: clamp(40px, 6vw, 80px); --ht-tap: 44px; /* 最小触摸目标（Google 44–48px） */ /* ---------- Radius（11 种 -> 4 档，99px 一律写 999px） ---------- */ --ht-r-sm: 6px; /* 徽章 / tag */ --ht-r-md: 10px; /* 按钮 / 输入框 */ --ht-r-lg: 16px; /* 卡片 */ --ht-r-pill: 999px; /* 胶囊 */ /* ---------- Shadow 3 档 + 焦点环 ---------- */ --ht-sh-sm: 0 1px 2px rgba(28, 36, 48, .06); --ht-sh-md: 0 8px 24px rgba(28, 36, 48, .07); --ht-sh-lg: 0 16px 40px rgba(28, 36, 48, .16); --ht-ring: 0 0 0 3px rgba(184, 68, 46, .35); /* :focus-visible 专用 */ --ht-sh-brand: 0 2px 8px rgba(184, 68, 46, .35); /* 品牌标识投影 */ --ht-sh-up: 0 -4px 18px rgba(17, 17, 17, .08); /* 底部固定条（cookie）向上投影 */ /* ---------- Button 按钮专用（v1.6.0 起） ---------- 字重 600（700 在 16px 下笔画糊在一起）、圆角 12px、三层阴影对应 静息/悬停/按下。 */ --ht-r-btn: 12px; --ht-fw-btn: 600; --ht-grad-brand: linear-gradient(135deg, #c4523c, #a3391f); /* 主 CTA 渐变 */ --ht-sh-btn: 0 1px 2px rgba(28, 36, 48, .10), 0 4px 12px rgba(184, 68, 46, .22); --ht-sh-btn-hover:0 2px 4px rgba(28, 36, 48, .10), 0 8px 20px rgba(184, 68, 46, .30); --ht-sh-btn-active: 0 1px 2px rgba(28, 36, 48, .12); --ht-sh-btn-ghost: 0 1px 2px rgba(28, 36, 48, .06); /* 反白按钮：只用于深底（Hero、主推定价卡、页脚）。 渐变主 CTA 放在深墨 #1c2430 上实测对比仅 3.44 / 2.35（非文本元素最低要求 3.0）， 放在品牌红底 #b8442e 上更只有 1.18 —— 等于按钮与背景融为一体，这是「不跳」的根因， 不是审美问题。深底上唯一能跳的是高明度：米白底 vs 深墨 = 14.02， 字 #8f3222 vs 米白 = 7.12（AAA）。这也是欧美深色定价卡的通行做法（Linear / Vercel / Stripe）。 */ --ht-btn-invert-bg: #f7f2ea; /* 沿用宣纸米白而不是纯白，保持纸感 */ --ht-btn-invert-bg-hover: #ffffff; --ht-btn-invert-fg: #8f3222; --ht-sh-btn-invert: 0 2px 4px rgba(0, 0, 0, .28), 0 8px 20px rgba(0, 0, 0, .30); /* ---------- Motion ---------- */ --ht-dur: 180ms; --ht-ease: cubic-bezier(.2, .7, .3, 1); /* ---------- Layer ---------- */ --ht-z-nav: 100; --ht-z-modal: 1000; --ht-z-toast: 1100; /* ---------- Breakpoints（CSS 变量不能用于 media query，此处仅作唯一文档） ---------- 480 / 768 / 1024 / 1280 旧值归并：600·620·760·782 -> 768；1080·1100·1120 -> 1024 */ }