/* ═══════════════════════════════════════════════════════════════════ 松墨青禾 · 设计 Token 单一事实源 ─────────────────────────────────────────────────────────────────── 建立日期：2026-08-21 依据：design-specs/DECISIONS.md（2026-07-10 六项定稿决策） 口径修正：域名分界线修正与官网重做-决策-2026-08-21.md §7 ——主绿色值不变，叫法从「清禾青绿」改为「孟德主绿」 （GEO 已是主业务，公司母色不应叫另一条产品线的名字） ⚠️ 这个文件此前只在文档里被引用、实际不存在。本次是首次落盘。 色值不是新定的，是从生产在跑的 geo-saas/public/geo-entry.css 的 :root 逐条抄出来的——所以引入它不会改变任何现有页面的观感。 使用方式： 然后只用 var(--md-*)，不要在页面里写死色值。 四个消费方：web-portal 官网 / geo-saas 工作台 / qinghe-gateway 各页 / 管理台 ═══════════════════════════════════════════════════════════════════ */ :root { /* ── 底色与纸面 ──────────────────────────────────────────────── 应用端用鱼肚白 #F7F4ED，官网与支付页用绫素白 #F8F3E6。 废除：#FAF8F3、冷灰 #f7f8fa（DECISIONS 决策 2） */ --md-bg-page: #f7f4ed; /* 鱼肚白 · 应用端页面底 */ --md-bg-page-warm: #f8f3e6; /* 绫素白 · 官网/支付页底 */ --md-bg-subtle: #f4f0e6; --md-surface: #fffef8; /* 近白纸面 */ --md-surface-soft: #f8f4f0; --md-surface-hover: #f1ece1; /* ── 描边 ─────────────────────────────────────────────────── */ --md-border: #ddd7c8; --md-border-subtle: #e9e2d6; --md-border-strong: #b5ad9c; /* ── 文字 ─────────────────────────────────────────────────── */ --md-text: #1d1b1c; --md-text-strong: #223e36; --md-text-secondary: #4a4035; --md-text-muted: #80766e; --md-text-faint: #a49c93; --md-text-disabled: #b7aea3; /* ── 主绿（孟德主绿）──────────────────────────────────────── DECISIONS 决策 1：主绿定为 #3F7A61，黛绿 #3B7A57 一族废除。 这是公司母色，两条产品线共用。 */ --md-primary: #3f7a61; --md-primary-hover: #2f684f; --md-primary-pressed: #24543f; --md-primary-soft: #e1ece4; --md-primary-border: #bfd3c5; --md-on-primary: #ffffff; --md-focus-ring: rgba(63, 122, 97, 0.18); /* ── 价值金 ─────────────────────────────────────────────────── DECISIONS 决策 3：统一 #9A7132，鎏金 #D4AF37/#B8860B 废除。 🔴 只用于金额、额度、套餐推荐徽标。**不做任何 CTA。** */ --md-value: #9a7132; --md-value-soft: #f0e5cf; --md-value-border: #d6c18b; /* ── 状态色 ───────────────────────────────────────────────── */ --md-success: #2c9678; --md-warning: #986524; --md-danger: #9e2f2f; --md-info: #3b4f5c; /* 青灰 · 同时是 GEO 的产品点缀色 */ --md-info-soft: #e8eef0; /* ── 产品点缀色 ─────────────────────────────────────────────── DECISIONS 决策 5：母系统统一，点缀只许小面积。 禁科技蓝——石青蓝 #2E5D8C 已废除。 旧产品线点缀色已退役，不再定义。 */ --md-brand-geo: #3b4f5c; /* GEO · 青灰 */ --md-brand-qinghe: #3f7a61; /* 清禾 · 沿用主绿 */ /* ── 字体 ───────────────────────────────────────────────────── DECISIONS 决策 4：只指定开源字体。 PingFang / 微软雅黑移出指定栈，只作系统自然兜底。 衬线体仅用于官网标题，应用端不用。 */ --md-font-sans: "Source Han Sans SC", "Noto Sans SC", "Inter", system-ui, sans-serif; --md-font-serif: "Source Han Serif SC", "Noto Serif SC", Georgia, serif; --md-font-mono: "JetBrains Mono", "Noto Sans Mono CJK SC", ui-monospace, monospace; /* ── 圆角 ───────────────────────────────────────────────────── DECISIONS 决策 6：不超过 8px；官网大卡至多 12/16px。 */ --md-radius-xs: 4px; --md-radius-sm: 6px; --md-radius-md: 8px; --md-radius-lg: 12px; /* 官网大卡专用，应用端不要用 */ --md-radius-xl: 16px; /* 官网首屏级容器专用 */ /* ── 阴影三档 ─────────────────────────────────────────────── */ --md-shadow-xs: 0 1px 2px rgba(29, 27, 28, 0.04); --md-shadow-sm: 0 8px 24px rgba(29, 27, 28, 0.07); --md-shadow-modal: 0 18px 56px rgba(29, 27, 28, 0.14); /* ── 官网专用：流体字号 ─────────────────────────────────────── 应用端用固定字号，不用这一组。 */ --md-text-xs: clamp(0.7rem, 0.66rem + 0.2vw, 0.75rem); --md-text-sm: clamp(0.8rem, 0.76rem + 0.2vw, 0.875rem); --md-text-base: clamp(0.938rem, 0.9rem + 0.2vw, 1rem); --md-text-lg: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem); --md-text-xl: clamp(1.25rem, 1rem + 1.2vw, 1.875rem); --md-text-2xl: clamp(1.75rem, 1.2rem + 2.8vw, 3rem); --md-text-hero: clamp(2.25rem, 1.4rem + 4.2vw, 4.25rem); /* ── 官网专用：留白节奏 ─────────────────────────────────────── */ --md-sp-xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem); --md-sp-sm: clamp(0.5rem, 0.4rem + 0.5vw, 0.875rem); --md-sp-md: clamp(1rem, 0.8rem + 1vw, 1.75rem); --md-sp-lg: clamp(1.75rem, 1.2rem + 2.8vw, 3.5rem); --md-sp-xl: clamp(3.5rem, 2rem + 7vw, 7rem); --md-sp-2xl: clamp(5.5rem, 3.5rem + 10vw, 11rem); /* ── 动效 ─────────────────────────────────────────────────── */ --md-ease-gentle: cubic-bezier(0.25, 0.1, 0.25, 1); --md-ease-snappy: cubic-bezier(0.2, 0.8, 0.2, 1); --md-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ═══════════════════════════════════════════════════════════════════ 暗色 ─────────────────────────────────────────────────────────────────── ⚠️ 只有官网启用暗色（跟随 html.dark）。 应用端（工作台/账户中心/管理台）目前不做暗色—— 财务数字与状态色在暗底下的对比度还没有做过验收， 别在应用端擅自打开这个类。 ═══════════════════════════════════════════════════════════════════ */ html.dark { --md-bg-page: #17160f; --md-bg-page-warm: #17160f; --md-bg-subtle: #1e1d15; --md-surface: #252419; --md-surface-soft: #1e1d15; --md-surface-hover: #2c2b1f; --md-border: #33312a; --md-border-subtle: #2a2820; --md-border-strong: #4a473c; --md-text: #e8e3d6; --md-text-strong: #f0ece1; --md-text-secondary: #a9a18e; --md-text-muted: #7a7362; --md-text-faint: #55503f; --md-text-disabled: #45412f; --md-primary: #6fae8f; --md-primary-hover: #86c2a4; --md-primary-pressed:#5b9a7b; --md-primary-soft: #24332b; --md-primary-border: #3c5a4a; --md-on-primary: #10201a; --md-focus-ring: rgba(111, 174, 143, 0.24); --md-value: #d6c18b; --md-value-soft: #33301f; --md-value-border: #5a5238; --md-info: #8fa3b0; --md-info-soft: #232c31; --md-brand-geo: #8fa3b0; --md-brand-qinghe: #6fae8f; } /* ═══════════════════════════════════════════════════════════════════ 动效降级：系统开了「减少动态效果」就全停 ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }