/* ============================================================================ 传音 chuanyin.app — 全站样式 ---------------------------------------------------------------------------- 本轮为「设计框架」pass：只搭 token 体系 + 组件骨架，视觉精修后置。 后续门面设计 pass 的约定：**改 token 值与内容，尽量不动结构与类名**。 目录 01 设计 token（浅色 = 默认） 02 设计 token（深色 · prefers-color-scheme） 03 Reset 与基础排版 04 无障碍（跳转链接 / 焦点可见 / 减少动效） 05 布局原语（.wrap / .section / .grid2） 06 组件 · 顶栏与导航 07 组件 · 按钮 08 组件 · 卡片 / 标签 / 提示条 09 组件 · 首屏与落地页 10 组件 · 法律长文 11 组件 · 页脚 12 工具类（替代内联 style，CSP style-src 'self' 必需） 13 响应式断点 断点（CSS 变量不能用于 @media，故在此约定并在 §13 硬编码） sm ≤ 560px 手机竖屏 md ≤ 768px 小平板 / 大手机横屏 lg ≥ 960px 桌面加宽 ========================================================================== */ /* ── 01 设计 token（浅色 = 默认） ─────────────────────────────────────── */ :root { /* 色板 · 中性 */ --color-canvas: #ffffff; /* 页面底色 */ --color-surface: #fafafa; /* 卡片 / 凹陷块 */ --color-surface-hover: #f2f2f4; --color-border: #e5e5e9; --color-border-strong: #c7c7d0; /* 色板 · 文字 */ --color-text: #111114; /* 标题 / 主要文字 */ --color-text-soft: #33333a; /* 正文 */ --color-text-muted: #5f5f68; /* 次要说明（对 canvas ≥ 5.9:1） */ /* 色板 · 强调（品牌色留给后续设计 pass，当前=墨黑） */ --color-accent: #111114; --color-accent-hover: #2a2a32; --color-on-accent: #ffffff; /* 色板 · 焦点环（a11y：必须与两种主题底色都有足够对比） */ --color-focus: #1a56db; /* 色板 · 语义（加密标签等） */ --color-positive-text: #0a6b2d; --color-positive-border: #a9d8b8; --color-caution-text: #7a5300; --color-caution-border: #e0d1a2; /* 字体 */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* 字阶 */ --text-3xs: 0.75rem; /* 12 */ --text-2xs: 0.8125rem; /* 13 */ --text-xs: 0.875rem; /* 14 */ --text-sm: 0.9375rem; /* 15 */ --text-base: 1rem; /* 16 */ --text-md: 1.0625rem; /* 17 */ --text-lg: 1.25rem; /* 20 */ --text-xl: 1.5rem; /* 24 */ --text-2xl: 1.875rem; /* 30 */ --text-3xl: 2.25rem; /* 36 —— 预留给后续 hero */ /* 行高 / 字重 / 字距 */ --leading-tight: 1.25; --leading-snug: 1.4; --leading-normal: 1.65; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.01em; /* 间距（4px 基准） */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; /* 圆角 */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; /* 阴影（当前克制，后续设计 pass 可加深） */ --shadow-sm: 0 1px 2px rgba(17, 17, 20, 0.05); --shadow-md: 0 4px 16px rgba(17, 17, 20, 0.08); /* 布局 */ --layout-max: 720px; --layout-gutter: 20px; --header-height: 60px; /* 动效 */ --duration-fast: 150ms; --ease-out: cubic-bezier(0.2, 0, 0, 1); } /* ── 02 设计 token（深色 · 与浅色一一对应，完整覆盖） ─────────────────── */ @media (prefers-color-scheme: dark) { :root { --color-canvas: #0d0d0f; --color-surface: #16161a; --color-surface-hover: #1e1e23; --color-border: #2b2b31; --color-border-strong: #43434c; --color-text: #f3f3f4; --color-text-soft: #d5d5da; --color-text-muted: #9d9da6; /* 对 canvas ≥ 7:1 */ --color-accent: #f3f3f4; --color-accent-hover: #ffffff; --color-on-accent: #0d0d0f; --color-focus: #8ab4ff; --color-positive-text: #6ee79a; --color-positive-border: #2c5b38; --color-caution-text: #e8cb72; --color-caution-border: #52441a; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); } } /* ── 03 Reset 与基础排版 ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background: var(--color-canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--color-text); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { color: var(--color-text); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); text-wrap: balance; } h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-3); } h2 { font-size: var(--text-lg); margin: 0 0 var(--space-3); } h3 { font-size: var(--text-base); margin: var(--space-6) 0 var(--space-2); line-height: var(--leading-snug); } p { margin: 0 0 var(--space-4); color: var(--color-text-soft); } ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); color: var(--color-text-soft); } li { margin: var(--space-2) 0; } strong { font-weight: var(--weight-semibold); color: var(--color-text); } code { font-family: var(--font-mono); font-size: 0.9em; padding: 0.1em 0.35em; border-radius: var(--radius-sm); background: var(--color-surface); border: 1px solid var(--color-border); } img, svg { max-width: 100%; height: auto; } hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-7) 0; } /* ── 04 无障碍 ───────────────────────────────────────────────────────── */ /* 跳转到主要内容：仅键盘聚焦时出现 */ .skip-link { position: fixed; top: var(--space-3); left: var(--space-3); z-index: 100; padding: var(--space-2) var(--space-4); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-on-accent); background: var(--color-accent); border-radius: var(--radius-sm); transform: translateY(-200%); transition: transform var(--duration-fast) var(--ease-out); } .skip-link:focus { transform: translateY(0); text-decoration: none; } /* 全站统一焦点环：任何组件都不得 outline:none */ :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── 05 布局原语 ─────────────────────────────────────────────────────── */ .wrap { max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--layout-gutter); } main { padding: var(--space-9) 0 var(--space-10); } .section { margin-top: var(--space-8); } .section > :first-child { margin-top: 0; } .section > :last-child { margin-bottom: 0; } /* 兼容旧类名（g/ 落地页等历史页面不改动） */ section.block { margin-top: var(--space-8); } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } /* ── 06 组件 · 顶栏与导航 ────────────────────────────────────────────── */ .site-header { border-bottom: 1px solid var(--color-border); background: var(--color-canvas); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--header-height); } .brand { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-text); } .brand:hover { text-decoration: none; } .brand .badge { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-md); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); } .nav { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; } .nav a { font-size: var(--text-xs); color: var(--color-text-muted); transition: color var(--duration-fast) var(--ease-out); } .nav a:hover { color: var(--color-text); text-decoration: none; } .nav a[aria-current="page"] { color: var(--color-text); font-weight: var(--weight-medium); } .nav a.disabled { opacity: 0.55; cursor: default; } .nav a.disabled:hover { color: var(--color-text-muted); } /* ── 07 组件 · 按钮 ──────────────────────────────────────────────────── */ .btn { display: inline-block; padding: var(--space-3) var(--space-6); font-family: inherit; /*