/* ============================================================================ 知萃 DistillAI — Design Token CSS 真理源文件 版本: v2.7 · 依据: distillai_ui_brand_design_v4_integrated_landing.html 用途: 全平台 CSS 自定义属性唯一来源 策略: 水滴品牌记忆 + 70%浅色工作层 + 20%深色品牌层 + 10%薄荷行动层 ============================================================================ */ :root { /* ========================================================================== §1 品牌色系 — Brand Colors ========================================================================== */ /* 深海军蓝 — 品牌底色 / Hero / 导航 / 插件头部 / 营销区 */ --zd-navy-950: #07101F; --zd-navy-900: #0A1424; --zd-navy-850: #0D1726; --zd-navy-800: #111E33; --zd-navy-700: #17243A; /* 薄荷绿 — 主品牌行动色 / 主按钮 / 成功状态 / 进度 / 保存 */ --zd-mint-600: #37C98D; --zd-mint-500: #62E3A7; --zd-mint-400: #8AF0C1; --zd-mint-300: #A9F3D0; --zd-mint-200: #C6F7E2; --zd-mint-100: #E8FFF4; --zd-mint-50: #F4FFF9; /* 辅助色系 */ --zd-sky-500: #38BDF8; /* 天蓝 — 雷达 / 链接 / 信息提示 */ --zd-sky-100: #EAF7FF; --zd-blue-500: #3B82F6; /* 蓝 — 次要强调 */ --zd-lavender-500: #A78BFA; /* 薰衣草紫 — 高级功能 */ --zd-lavender-100: #F5F3FF; --zd-amber-800: #78350F; /* 琥珀最深 — 重要文字 */ --zd-amber-700: #92400E; /* 琥珀暗色 — 描述文字 */ --zd-amber-600: #B45309; /* 琥珀深色 — 文字 / hover */ --zd-amber-500: #F59E0B; /* 琥珀 — 警告 / 需转写 / 积分确认 */ --zd-amber-400: #FBBF24; /* 琥珀中色 */ --zd-amber-300: #FCD34D; /* 琥珀边框 */ --zd-amber-200: #FDE68A; /* 琥珀浅色边框 */ --zd-amber-100: #FFFBEB; --zd-rose-600: #DC2626; /* 玫红深色 — 危险 hover */ --zd-rose-500: #EF4444; /* 玫红 — 错误 / 失败 */ --zd-rose-300: #FCA5A5; /* 玫红边框 */ --zd-rose-200: #FECACA; /* 玫红浅色边框 */ --zd-rose-100: #FEF2F2; --zd-rose-50: #FFF5F5; /* 玫红极浅背景 */ /* ========================================================================== §2 浅色工作层 — Light Work Layer (70% 使用面积) ========================================================================== */ --zd-cloud: #F6F8FB; /* 工作台 / 页面底色 */ --zd-paper: #FFFFFF; /* 卡片 / 内容区白底 */ --zd-paper2: #FBFCFE; /* 次级白底卡片 */ --zd-ink: #111827; /* 最深文字 */ --zd-text: #243044; /* 正文色 */ --zd-muted: #667085; /* 次要文字 */ --zd-dim: #94A3B8; /* 占位符 / 极弱文字 */ --zd-line: #E6EAF0; /* 边框主色 */ --zd-line2: #DDE3EC; /* 次级边框 */ /* ========================================================================== §3 圆角层级 — Border Radius Scale ========================================================================== */ --zd-radius-xs: 8px; --zd-radius-sm: 12px; --zd-radius-md: 16px; --zd-radius-lg: 24px; --zd-radius-xl: 32px; --zd-radius-pill: 999px; /* 组件级圆角 */ --zd-radius-button: 14px; /* 所有按钮 */ --zd-radius-card: 18px; /* 内容卡片 */ --zd-radius-panel: 24px; /* 面板 / 抽屉 */ --zd-radius-appicon: 28%; /* 应用图标水滴 */ /* ========================================================================== §4 阴影层级 — Shadow Scale ========================================================================== */ --zd-shadow-card: 0 8px 24px rgba(10,20,36,.07); --zd-shadow-md: 0 16px 45px rgba(10,20,36,.10); --zd-shadow-floating: 0 24px 70px rgba(10,20,36,.14); /* ========================================================================== §5 字体系统 — Typography ========================================================================== */ --zd-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; --zd-mono: "SF Mono", "JetBrains Mono", "Cascadia Code", "Consolas", monospace; /* ========================================================================== §6 间距系统 — Spacing Scale (4px 基准) ========================================================================== */ --zd-space-1: 4px; --zd-space-2: 8px; --zd-space-3: 12px; --zd-space-4: 16px; --zd-space-5: 20px; --zd-space-6: 24px; --zd-space-8: 32px; --zd-space-10: 40px; --zd-space-12: 48px; --zd-space-16: 64px; /* ========================================================================== §7 过渡动画 — Transitions ========================================================================== */ --zd-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --zd-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --zd-duration-fast: 150ms; --zd-duration-normal: 250ms; --zd-duration-slow: 400ms; } /* ========================================================================== §8 旧变量别名 — Legacy Variable Aliases (兼容迁移) 逐步替换旧代码中的变量引用，但保留别名避免硬切换断裂 ========================================================================== */ :root { /* 旧 → 新 颜色映射 */ --doc-accent: var(--zd-mint-500); /* 原 #62E3A7 → 薄荷绿 */ --distill-accent: var(--zd-sky-500); /* 原 #38BDF8 → 降级为辅助色 */ --z-paper: var(--zd-cloud); /* 原 #F8FAFC → 工作台底色 */ --z-radius-sm: var(--zd-radius-card); /* 原 12px → 升级到 18px */ --bg-primary: var(--zd-navy-900); /* 插件旧暗色 → 深海军蓝 */ --bg-secondary: var(--zd-navy-800); --text-primary: var(--zd-ink); --text-secondary: var(--zd-muted); /* 旧代码常见硬编码色值映射 (便于 grep 替换) */ --zd-legacy-dark: var(--zd-navy-900); /* 替代 #0f172a / #0a0f1e */ --zd-legacy-accent: var(--zd-mint-500); /* 替代 #62E3A7 */ } /* ========================================================================== §9 响应式断点 — Breakpoint Reference (文档用，CSS 中直接写 @media) ========================================================================== */ /* Desktop ≥ 1200px : 顶部导航 + 双栏/三栏 Tablet 768-1199 : 内容卡双栏，证据链右侧抽屉 Mobile ≤ 767px : 全部单列，证据链 Bottom Sheet，主操作固定底部 Compact ≤ 420px : 精简标签、隐藏次要图表、短文案 @media (max-width: 1199px) { ... } @media (max-width: 767px) { ... } @media (max-width: 420px) { ... } */ /* ========================================================================== §10 品牌颜色使用比例宣言 (非代码，团队共识) ========================================================================== */ /* 70% 浅色工作层 (--zd-cloud / --zd-paper) → 结果页、Library、Dashboard、证据链正文、列表页、长阅读 20% 深色品牌层 (--zd-navy-*) → 首页 Hero、导航、插件头部、营销图、重要空态、Chrome Store 10% 薄荷行动层 (--zd-mint-500) → 主按钮、成功状态、当前选择、进度点、保存动作 */ /* ========================================================================== 无障碍 — Accessibility ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --zd-duration-fast: 0ms; --zd-duration-normal: 0ms; --zd-duration-slow: 0ms; } }