/* ============================================================ Method DS · Editorial Minimal · Tokens ---------------------------------------------------- 独立的 jupi 风格 design language · cream + dark 交替 section（不用纯白纯黑） · 唯一暖色 peach（仅做 accent，不滥用） · 双 sans 字体（display + body 都是 sans） · 克制字号 — hero 56/60 不超过 · 全 pill 按钮 + 1.5s 光扫 · 5 档 radius taxonomy · 9 档 backdrop-blur · 无 drop-shadow — 深度靠对比 + blur ============================================================ */ :root { /* ============================================================ COLOR · 不用纯黑 / 不用纯白 ============================================================ */ --em-ink: #3b3b3b; /* 原色 */ --em-ink-90: rgba(59,59,59,0.90); --em-ink-80: rgba(59,59,59,0.80); /* ★ 主正文 */ --em-ink-60: rgba(59,59,59,0.60); --em-ink-50: rgba(59,59,59,0.50); --em-ink-40: rgba(59,59,59,0.40); --em-ink-20: rgba(59,59,59,0.20); --em-ink-15: rgba(59,59,59,0.15); --em-ink-10: rgba(59,59,59,0.10); --em-ink-05: rgba(59,59,59,0.05); /* ★ 近白底色 · 参考 hume.ai，不再黄米 */ --em-marble: #FBFAF7; /* ★ 主背景（近白） */ --em-marble-soft: #FFFFFF; /* 卡片底（纯白） */ --em-plaster: #F2F0EB; /* 层次/marquee/footer 用淡暖灰 */ --em-dark: #1f1f1f; /* ★ 深 section（不黑） */ --em-dark-deep: #161616; /* 极深 */ --em-on-dark: rgba(245,244,238,0.85); --em-on-dark-60: rgba(245,244,238,0.60); --em-on-dark-40: rgba(245,244,238,0.40); --em-peach: #fad6b7; /* ★ 唯一暖色 accent（柔） */ --em-peach-deep: #e89263; /* 深 */ --em-peach-soft: #fce8d3; /* 浅 */ --em-orange: #f5d7a8; /* 沙橙 */ --em-mint: #00e2b2; /* spot · 仅插画用 */ /* ============================================================ ★ 9 MODULE LOCK PALETTE · 产品定义画布 9 模块主色 ---------------------------------------------------- 长期锁定，不再改动。9 模块按 3 层 × 3 模块 排布： 第一层 价值洞察（暖）：coral / peach / butter 第二层 场景驱动（冷）：mint / sky / lilac 第三层 落地实现（粉土）：blush / rose / sage 每个 token 提供： --mod-{name} 卡片背景主色 --mod-{name}-deep 边框/强调（深 30~40%） --mod-{name}-soft hover/活跃浅色（浅 50%） --mod-{name}-ink 在该背景上的文字主色 ============================================================ */ /* 01 MO 消费动机 · coral 珊瑚 */ --mod-coral: #FFB3A0; --mod-coral-deep: #E5704F; --mod-coral-soft: #FFE3DA; --mod-coral-ink: #6B2818; /* 02 UP 用户画像 · peach 蜜桃 */ --mod-peach: #FCD49E; --mod-peach-deep: #DE9B4A; --mod-peach-soft: #FEEBCC; --mod-peach-ink: #5C3818; /* 03 VP 价值定位 · butter 黄油 */ --mod-butter: #FBE49C; --mod-butter-deep: #D9B23F; --mod-butter-soft: #FEF1CC; --mod-butter-ink: #5C4818; /* 04 DS 需求场景 · mint 薄荷 */ --mod-mint: #BEE6C5; --mod-mint-deep: #5DB36A; --mod-mint-soft: #E0F2E3; --mod-mint-ink: #1F4E27; /* 05 AI 人机体验 · sky 天蓝 */ --mod-sky: #C2DBF0; --mod-sky-deep: #5A95C8; --mod-sky-soft: #E2EDF8; --mod-sky-ink: #1E3D5C; /* 06 MS 营销场景 · lilac 薰衣草 */ --mod-lilac: #D6C4F2; --mod-lilac-deep: #8F73D2; --mod-lilac-soft: #EAE0F9; --mod-lilac-ink: #3A285C; /* 07 PF 产品形态 · blush 樱花 */ --mod-blush: #FBD2DE; --mod-blush-deep: #E08AA5; --mod-blush-soft: #FCE7ED; --mod-blush-ink: #5C1E32; /* 08 FS 功能集合 · rose 玫瑰 */ --mod-rose: #F8B8B0; --mod-rose-deep: #DA7568; --mod-rose-soft: #FCDDD8; --mod-rose-ink: #5C211B; /* 09 CS 成本结构 · sage 鼠尾草 */ --mod-sage: #D6DDB8; --mod-sage-deep: #8FA15E; --mod-sage-soft: #E8ECD3; --mod-sage-ink: #3A4524; /* ============================================================ TYPOGRAPHY · 双 sans · 编辑感来自字体而非字号 ============================================================ */ --em-font-display: 'Fraunces', 'Source Han Serif SC', Georgia, serif; --em-font-body: 'Inter', 'PingFang SC', system-ui, sans-serif; --em-font-mono: 'JetBrains Mono', 'SF Mono', monospace; /* Type scale - jupi 标志性克制 */ --em-fs-hero: clamp(38px, 5vw, 56px); /* ★ hero 上限 56px */ --em-fs-h1: clamp(32px, 4vw, 44px); --em-fs-h2: clamp(28px, 3vw, 38px); --em-fs-h3: 24px; --em-fs-h4: 20px; --em-fs-body-lg: 18px; --em-fs-body: 16px; --em-fs-sm: 14px; /* ★ label 锚点 */ --em-fs-xs: 13px; --em-fs-mono: 13px; --em-fs-tiny: 11px; /* Line heights - 紧凑 */ --em-lh-hero: 1.07; /* 56/60 */ --em-lh-tight: 1.12; --em-lh-snug: 1.28; --em-lh-base: 1.55; --em-lh-loose: 1.75; --em-lh-label: 17px; /* ★ uppercase label 行高 */ /* Weights - display 仅 500 */ --em-fw-regular: 400; --em-fw-medium: 500; /* ★ display 唯一字重 */ --em-fw-semibold: 600; /* Letter-spacing - 5 档 */ --em-ls-tight: -0.2px; /* hero / body */ --em-ls-snug: -0.1px; --em-ls-normal: 0; --em-ls-label: 0.28px; /* ★ uppercase 14px label */ --em-ls-wide: 0.48px; --em-ls-wider: 0.84px; /* 极宽，少用 */ /* ============================================================ RADIUS · 5 档分类 ============================================================ */ --em-r-chip: 6px; --em-r-input: 10px; --em-r-card: 16px; --em-r-large: 32px; --em-r-pill: 9999px; /* ★ 按钮专用 */ /* ============================================================ BLUR · 9 档 backdrop-blur（核心视觉手法） ============================================================ */ --em-blur-1: 4px; --em-blur-2: 8px; --em-blur-3: 12px; --em-blur-4: 16px; --em-blur-5: 24px; --em-blur-6: 32px; --em-blur-7: 40px; --em-blur-8: 48px; --em-blur-9: 62px; /* ============================================================ SPACING · 8 基底 ============================================================ */ --em-sp-1: 4px; --em-sp-2: 8px; --em-sp-3: 12px; --em-sp-4: 16px; --em-sp-5: 20px; --em-sp-6: 24px; --em-sp-8: 32px; --em-sp-10: 40px; --em-sp-12: 48px; --em-sp-16: 64px; --em-sp-20: 80px; --em-sp-24: 96px; --em-sp-32: 128px; /* ============================================================ LAYOUT ============================================================ */ --em-container: 1440px; --em-content: 1100px; --em-text: 620px; /* ★ 标题最大宽 */ /* ============================================================ MOTION · 4 档 + 1 个签名 ============================================================ */ --em-ease: cubic-bezier(0.4, 0, 0.2, 1); --em-t-fast: 150ms; --em-t-base: 200ms; /* ★ 默认 */ --em-t-med: 300ms; --em-t-slow: 500ms; --em-t-sweep: 1500ms; /* ★ 按钮光扫 — 灵魂 */ }