/* ═══════════════════════════════════════════════════════════════════════ tokens.css — 设计令牌（单一事实源） ─────────────────────────────────────────────────────────────────────── 全部视觉常量集中在这里，任何组件都不写死颜色/间距/时长。 配色取自产品自身的 ui/NukeTheme.kt（深蓝底 + 长春花蓝强调 + 微信绿作次品牌色）， 排版与描边手法借鉴参考站点的 mono 刊头 + hairline 体系。 ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── 底色层 ─────────────────────────────────────────────────────────── */ --bg: #05070f; /* 页面底 · 比产品 BG 再深一档，让卡片浮起来 */ --bg-2: #080b14; /* 次级区块（= NukeTheme.BG） */ --surface: #0e1322; /* 面板 / 卡片（= NukeTheme.CARD） */ --surface-2: #111727; /* 卡片抬升层（= NukeTheme.FEATURE） */ --surface-3: #141b2e; /* hover / 代码块 */ --input-bg: #0b1020; /* = NukeTheme.INPUT_BG */ /* ── 文字 ───────────────────────────────────────────────────────────── */ --fg: #e8ebf6; /* 主文字（= NukeTheme.TEXT） */ --fg-dim: #9ba4bd; /* 次级：描述、标签（= TEXT_MUTED） */ --fg-faint: #6b7595; /* 弱：角标、脚注 */ --fg-inverse: #071024; /* 落在强调色底上的文字（= TEXT_ON_ACCENT） */ /* ── 强调色 ─────────────────────────────────────────────────────────── */ --accent: #91a9ff; /* 主强调 · 长春花蓝（= NukeTheme.ACCENT） */ --accent-hi: #b3c4ff; /* hover 提亮 */ --accent-strong:#718fff; /* 实心填充（= ACCENT_STRONG） */ --accent-soft: rgba(145, 169, 255, 0.14); --accent-glow: rgba(145, 169, 255, 0.50); --green: #07c160; /* 微信绿 · 次品牌色（= CardTheme 预设） */ --green-soft: rgba(7, 193, 96, 0.16); --ok: #5fe0a3; /* = NukeTheme.OK */ --warn: #ffb35f; /* = NukeTheme.WARN */ --danger: #ffb4c1; /* = NukeTheme.DANGER_TEXT */ --danger-bg: rgba(65, 25, 37, 0.55); /* ── 红色 · 主行动按钮「看看能做什么」 ───────────────────────────────── */ --red: #f0413f; --red-hi: #ff5b58; --red-soft: rgba(240, 65, 63, 0.14); --red-glow: rgba(240, 65, 63, 0.34); /* ── 使用人数曲线：绿=当前人数，红=历史累计人数 ────────────────────────── 这两条线要能在深底上清晰区分，所以绿比品牌绿更亮、红比按钮红更亮， 且与既有 --red（#f0413f）刻意错开，避免曲线和按钮抢同一注意力。 */ --live-green: #3ddc84; --live-red: #ff5c5c; /* ── 分析结果卡片：浅色纸质卡片（取自真实卡片截图） ──────────────────── */ --card-bg: #f2f2f3; /* 卡片底色（近白） */ --card-ink: #17171a; /* 卡片正文（近黑） */ --card-dim: #5f6068; /* 卡片次级文字 */ --card-faint: #8d8c92; /* 卡片弱化文字（原因行） */ --card-line: #dcdce0; /* 卡片分隔线 */ --card-accent: #5272e7; /* 卡片强调（蓝） */ --card-deep: #8b6ee7; /* 卡片强调（紫） */ --card-quote: #141825; /* 引用块深底 */ /* ── 线条 / 边框 ────────────────────────────────────────────────────── */ --line: rgba(40, 50, 82, 0.60); /* = CARD_BORDER 半透明化 */ --line-strong: rgba(48, 58, 91, 0.95); /* = INPUT_BORDER */ --line-accent: rgba(145, 169, 255, 0.32); --badge-bg: #1d2744; /* = NukeTheme.BADGE_BG */ --badge-fg: #a9b7e8; /* = NukeTheme.BADGE_TEXT */ /* ── 排版 ───────────────────────────────────────────────────────────── */ --font-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, "Cascadia Mono", monospace; --fs-micro: 11px; /* mono 微标签：角标、编号、脚注 —— 手机上会整体上调 */ --fs-xs: 11.5px; --fs-sm: 13px; --fs-base: 15px; --fs-lg: 18px; --fs-xl: 24px; --fs-2xl: 34px; --fs-3xl: clamp(1.9rem, 3.2vw, 3.1rem); --fs-hero: clamp(2.6rem, 6.4vw, 5.4rem); --fw-body: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 900; --lh-tight: 1.06; --lh-body: 1.65; --ls-label: 0.22em; /* mono 小标签统一宽字距 */ --ls-title: -0.02em; /* 大标题反向收紧 */ /* ── 间距阶梯 ───────────────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-section: clamp(56px, 9vh, 116px); --sp-gutter: clamp(18px, 4.4vw, 72px); --sp-card: clamp(16px, 2.4vw, 30px); /* ── 圆角 ───────────────────────────────────────────────────────────── */ --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 99px; /* ── 动效 ───────────────────────────────────────────────────────────── */ --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 460ms; --dur-reveal: 640ms; /* 缓动与参考站点同源，并在 JS 侧另有命名缓动用于动画编排 */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-flow: cubic-bezier(0.33, 0, 0.2, 1); --ease-inout: cubic-bezier(0.45, 0.05, 0.55, 0.95); /* ── 阴影（三明治：深度 + 品牌辉光 + 边缘提亮）────────────────────── */ --shadow-card: 0 20px 48px rgba(0, 0, 0, 0.55); --shadow-float: 0 48px 120px rgba(0, 0, 0, 0.70), 0 0 90px rgba(113, 143, 255, 0.07), inset 0 0 0 1px rgba(145, 169, 255, 0.05); --glow-dot: 0 0 8px var(--accent-glow); --glow-lg: 0 0 54px rgba(145, 169, 255, 0.42); /* ── 层级 ───────────────────────────────────────────────────────────── */ --z-bg: 0; --z-content: 1; --z-grain: 90; --z-nav: 100; --z-overlay: 150; --z-loader: 200; /* ── 布局 ───────────────────────────────────────────────────────────── */ --maxw: 1400px; --nav-h: 60px; --rail-w: 68px; } /* ───────────────────────────────────────────────────────────────────── 手机端令牌覆盖 ───────────────────────────────────────────────────────────────────── 这个展示站的主要读者在手机上，所以策略不是「缩小」，而是： · 正文与标签字号上调，不让人眯眼看 · 缩小栅格与留白，把宽度让给内容本身 · 触摸目标的下限由 --tap-min 统一约束 ───────────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { :root { /* 字号上调：微标签从 10px 提到 12px，正文回到 15.5px 以上 —— 手机上没有「微标签」这个概念，任何需要看的字都得看得清 */ --fs-micro: 12px; --fs-xs: 12.5px; --fs-sm: 14px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 21.5px; --fs-2xl: 28px; --fs-3xl: clamp(1.7rem, 7.2vw, 2.5rem); --fs-hero: clamp(2rem, 9vw, 3.1rem); /* 留白收紧，但不小于 14px，保证不贴边 */ --sp-gutter: clamp(14px, 4.6vw, 24px); --sp-section: clamp(40px, 7vh, 64px); --sp-card: clamp(15px, 4vw, 20px); --sp-7: 34px; --sp-8: 46px; /* 导航在手机上略矮，滚动时占屏更少 */ --nav-h: 54px; /* 触摸目标下限：iOS 44pt / Android 48dp 是通行标准。 这里取 44px 作为所有可点控件的高度下限。 */ --tap-min: 44px; } } /* 极窄屏（320–380px）再收一档，避免任何横向滚动 */ @media (max-width: 380px) { :root { --fs-hero: clamp(1.75rem, 8.6vw, 2.4rem); --fs-2xl: 24px; --fs-xl: 20px; --sp-gutter: 13px; } } /* 用户在系统层请求减少动效时，整体降级到近乎瞬时 —— 组件无需各自处理 */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; } }