/* ============================================================================ Amu 设计规范 · 唯一 token 源 (tokens.css) ---------------------------------------------------------------------------- 用法：在页面 最前面引用（早于其它样式）： 主题机制（与会员站现有约定一致，localStorage 持久化）： 浅色；不写 = 暗色（默认） 换强调色；不写 = 品牌金 ---------------------------------------------------------------------------- 本文件分三部分： 1. 规范名（canonical）—— 新代码一律用这些 2. 兼容别名（legacy）—— 旧代码里的 --c/--text/--card 等自动跟随，零改写 3. 浅色主题与换色覆盖 ============================================================================ */ /* ============================ 1. 规范名（暗色默认） ============================ */ :root { /* —— 品牌强调色 —— */ --brand: #FFC94D; /* 主强调：按钮、链接、高亮 */ --brand-2: #FFD87A; /* 亮一档：hover、副强调 */ --brand-dim: rgba(255, 201, 77, .12); /* 极淡底：徽标、chip */ --brand-soft: rgba(255, 201, 77, .14); /* 淡底：选中态、图标底 */ --brand-glow: rgba(255, 201, 77, .35); /* 光晕：焦点、头像环 */ --on-brand: #0E1116; /* 品牌色上的文字（金底深字） */ /* —— 表面层级（由深到浅）—— */ --bg: #0E1116; /* 页面底 */ --bg-2: #151A22; /* 次级面：导航条、页脚、内嵌块 */ --bg-3: #0A0D12; /* 更深底：凹陷区、代码块 */ --surface: #1A212B; /* 卡片面（浮起一层） */ /* —— 描边 —— */ --line: #1E242F; /* 细分隔线 */ --line-2: #2A3242; /* 强描边：卡片、输入框 */ /* —— 文字层级 —— */ --tx: #E8ECF2; /* 正文 */ --tx-2: #98A2B3; /* 次要：说明、标签 */ --tx-3: #7E8798; /* 最弱：占位、脚注 */ /* —— 语义色 —— */ --ok: #3ECF8E; /* 成功 */ --warn: #FFB454; /* 警告 / 提示 */ --danger: #FF8A8A; /* 错误 / 危险 */ --info: #5AB0FF; /* 信息 / 蓝调强调 */ /* —— 字号层级 —— */ --fs-display: 56px; /* 数字大屏（积分余额等） */ --fs-h1: 44px; /* 页面主标题 */ --fs-h2: 32px; /* 区块标题 */ --fs-h3: 22px; /* 卡片标题 */ --fs-h4: 18px; /* 小标题 */ --fs-body: 15px; /* 正文 */ --fs-sm: 13px; /* 辅助文字 */ --fs-xs: 12px; /* 脚注、徽标 */ /* —— 字重（只用两档）—— */ --fw-normal: 400; --fw-bold: 700; /* —— 字体栈（与官网一致：中文优先 PingFang/YaHei）—— */ --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace; /* —— 间距节奏（4/8 栅格）—— */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 88px; /* 官网大区块上下留白 */ /* —— 圆角刻度 —— */ --r-sm: 10px; /* 小控件：chip、小按钮、输入框 */ --r-md: 14px; /* 默认：按钮、卡片 */ --r-lg: 18px; /* 大卡片、弹层 */ --r-xl: 22px; /* 主视觉容器 */ --r-pill: 999px; /* 胶囊 */ /* —— 阴影 —— */ --shadow-1: 0 8px 24px rgba(0, 0, 0, .24); /* 浮起 */ --shadow-2: 0 18px 40px rgba(0, 0, 0, .32); /* 弹层、主视觉 */ /* —— 焦点环（无障碍）—— */ --ring: 0 0 0 3px var(--brand-dim); /* —— 容器宽度 —— */ --w-narrow: 560px; /* 表单页 */ --w-page: 620px; /* 会员站内容页 */ --w-wide: 1080px; /* 官网内容区 */ /* ======================= 2. 兼容别名（旧代码零改写） ======================= */ /* 官网旧名 */ --bg2: var(--bg-2); --bg3: var(--bg-3); --c: var(--brand); --c-dim: var(--brand-dim); --line2: var(--line-2); --tx2: var(--tx-2); --tx3: var(--tx-3); /* 会员站旧名 */ --card: var(--surface); --c2: var(--brand-2); --soft: var(--brand-soft); --glow: var(--brand-glow); --muted: var(--tx-2); --text: var(--tx); --today: #FFFFFF; } /* ============================ 3a. 浅色主题 ============================ */ html[data-theme="light"] { --brand: #B8860B; /* 浅底上用深金，保证可读 */ --brand-2: #9A6F00; --brand-dim: rgba(184, 134, 11, .10); --brand-soft: rgba(184, 134, 11, .12); --brand-glow: rgba(184, 134, 11, .25); --bg: #F4F6FA; --bg-2: #FFFFFF; --bg-3: #ECEFF5; --surface: #FFFFFF; --line: #E8EDF3; --line-2: #D3DBE6; --tx: #1F2937; --tx-2: #64748B; --tx-3: #94A3B8; --ok: #17A673; --warn: #B26A00; --danger: #D93A3A; --info: #1668B8; --on-brand: #FFFFFF; --shadow-1: 0 6px 18px rgba(15, 23, 42, .08); --shadow-2: 0 14px 34px rgba(15, 23, 42, .12); --today: #334155; } /* ============================ 3b. 换强调色 ============================ */ /* 暗色下换色连带微调底色（带该色相的暗夜），与原会员站行为一致 */ html[data-accent="blue"] { --brand: #5AB0FF; --brand-2: #A6D4FF; --brand-dim: rgba(90, 176, 255, .12); --brand-soft: rgba(90, 176, 255, .14); --brand-glow: rgba(90, 176, 255, .38); --bg: #0B101B; --bg-2: #111827; --bg-3: #080C14; --line: #1C2740; --line-2: #28365A; --on-brand: #06101C; } html[data-accent="purple"] { --brand: #C79BFF; --brand-2: #E2CDFF; --brand-dim: rgba(199, 155, 255, .12); --brand-soft: rgba(199, 155, 255, .14); --brand-glow: rgba(199, 155, 255, .38); --bg: #110D1A; --bg-2: #171226; --bg-3: #0C0915; --line: #272040; --line-2: #372C5C; --on-brand: #150B26; } /* 浅色下的换色（需要更深的色值才可读；底色保持浅色，须重新声明盖回） */ html[data-theme="light"][data-accent="blue"] { --brand: #1668B8; --brand-2: #0E548F; --brand-dim: rgba(22, 104, 184, .10); --brand-soft: rgba(22, 104, 184, .12); --brand-glow: rgba(22, 104, 184, .25); --bg: #F4F6FA; --bg-2: #FFFFFF; --bg-3: #ECEFF5; --surface: #FFFFFF; --line: #E8EDF3; --line-2: #D3DBE6; } html[data-theme="light"][data-accent="purple"] { --brand: #7A4FD0; --brand-2: #6539B8; --brand-dim: rgba(122, 79, 208, .10); --brand-soft: rgba(122, 79, 208, .12); --brand-glow: rgba(122, 79, 208, .25); --bg: #F4F6FA; --bg-2: #FFFFFF; --bg-3: #ECEFF5; --surface: #FFFFFF; --line: #E8EDF3; --line-2: #D3DBE6; } /* ============================ 4. 基础重置 ============================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: var(--fs-body); font-weight: var(--fw-normal); line-height: 1.6; color: var(--tx); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-2); } h1, h2, h3, h4 { margin: 0 0 var(--sp-3); line-height: 1.3; font-weight: var(--fw-bold); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } code, pre, kbd { font-family: var(--font-mono); } /* 统一焦点可见性：键盘用户看得见，鼠标用户不打扰 */ :focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); } /* 尊重减少动效偏好 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ============================ 5. 通用组件基类 ============================ */ /* 卡片 */ .amu-card { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--sp-5); } /* 按钮：主 / 幽灵 / 危险 / 小尺寸 */ .amu-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 11px var(--sp-4); border: 1px solid transparent; border-radius: var(--r-sm); background: var(--brand); color: var(--on-brand); font-family: inherit; font-size: var(--fs-body); font-weight: var(--fw-bold); cursor: pointer; transition: background .15s, border-color .15s, opacity .15s; } .amu-btn:hover { background: var(--brand-2); } .amu-btn:disabled { opacity: .5; cursor: not-allowed; } .amu-btn.is-ghost { background: transparent; color: var(--brand); border-color: var(--brand); } .amu-btn.is-ghost:hover { background: var(--brand-soft); } .amu-btn.is-dim { background: var(--bg-2); color: var(--tx); border-color: var(--line-2); } .amu-btn.is-dim:hover { border-color: var(--brand); color: var(--brand); } .amu-btn.is-danger { background: var(--danger); color: #2a0b0b; } .amu-btn.is-sm { padding: 7px var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-sm); } /* 输入框 */ .amu-input { width: 100%; padding: 11px var(--sp-3); border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg); color: var(--tx); font-family: inherit; font-size: var(--fs-body); } .amu-input::placeholder { color: var(--tx-3); } .amu-input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); } /* 徽标 / 胶囊 */ .amu-pill { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 4px 10px; border-radius: var(--r-pill); background: var(--bg-2); border: 1px solid var(--line-2); color: var(--tx-2); font-size: var(--fs-xs); } .amu-pill.is-brand { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); } /* 区块标题（左侧竖条 + 标题 + 右侧提示） */ .amu-sec { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-5) 2px var(--sp-3); font-size: var(--fs-h4); font-weight: var(--fw-bold); } .amu-sec::before { content: ""; width: 4px; height: 16px; border-radius: 3px; background: var(--brand); } .amu-sec .hint { margin-left: auto; font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--tx-2); }