/* ════════════════════════════════════════════════════════════════ SLOW · 轻质感(soft-tactile)规范层 ──────────────────────────────────────────────────────────────── 这是一层质感规范,叠加在 Slow 既有 token 之上 —— 不改色板、不改形。 气质锚点:精密仪表(冷蓝钢)· 冷静 · 秩序 · 克制 · 不多巴胺。 硬底线(锁定,本层不得违反): · 主蓝 #2142E7 · 亮蓝 #4460ED · 杏色 #E6B17E(仅 IP) · success 用蓝 · 绝对无红 · 字重 ≤600 · 圆角 btn 8 / card 12 · 不许药丸 · 布局对称 · 底色不用纯白 —— 白 / 米白 / 极浅冷灰 ════════════════════════════════════════════════════════════════ */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;600&display=swap"); :root { /* ── 锁定色板(既有 token · 不变)──────────────────────────── */ --slow-blue: #2142E7; /* 主蓝 · 功能强调 */ --slow-blue-bright: #4460ED; /* 亮蓝 · 高亮 */ --slow-blue-deep: #1A36C4; /* 按下态 / hover 加深(同色相,无新色)*/ --slow-apricot: #E6B17E; /* 杏色 · 仅 IP */ --slow-success: var(--slow-blue); /* success 用蓝 */ /* ── 中性 · 蓝钢底 ───────────────────────────────────────── */ --slow-ink: #1A2233; /* 主文字 · 冷蓝钢深 */ --slow-ink-2: #2C3650; /* 次级标题 */ --slow-mute: #5C6680; /* 次要文字 */ --slow-mute-2: #98A0B4; /* 占位 / 禁用 */ /* 底色 —— 不用纯白(白 / 米白 / 极浅冷灰)*/ --slow-paper: #EDF0F6; /* 页面底 · 极浅冷灰 */ --slow-surface: #FAFBFE; /* 卡面 · 近白冷 */ --slow-cream: #F4F2EC; /* 米白 · 备用面 */ --slow-recess: #E4E8F1; /* 凹陷 / 轨道底 */ /* 描边 · 细分隔 */ --slow-line: rgba(26, 34, 51, 0.10); --slow-line-strong: rgba(26, 34, 51, 0.18); --slow-hair: rgba(26, 34, 51, 0.06); /* ── 圆角(锁定)──────────────────────────────────────────── */ --slow-r-btn: 8px; --slow-r-card: 12px; --slow-r-tile: 10px; /* 图标容器 */ --slow-r-badge: 6px; /* 徽章 —— 非药丸 */ --slow-r-bar: 4px; /* 进度条 */ /* ── 紧致圆角(Linear-flavored · 比基础再收一档)────────────── 圆角越小越精密。紧致密度布局下使用,定义边界靠发丝描边。 */ --slow-r-card-tight: 10px; /* 卡片 */ --slow-r-tile-tight: 8px; /* 图标容器 / 面板 */ --slow-r-row: 8px; /* 行 / chip */ /* ── 间距 / 边距 · 4px 栅格(紧致精密 · 宁紧勿松)──────────── 所有间距取 4 的倍数;外边距偏紧是刻意的。 */ --slow-pad-main: 18px 22px; /* 内容区外边距 @kind spacing */ --slow-gap-card: 12px; /* 卡片之间间距 @kind spacing */ --slow-pad-card: 16px 18px; /* 卡片内边距 @kind spacing */ --slow-pad-row: 9px 11px; /* 列表行内边距 @kind spacing */ --slow-pad-chip: 5px 11px; /* chip 内边距 @kind spacing */ --slow-gap-stack: 12px; /* 卡内纵向分组间距 @kind spacing */ /* ════════════════════════════════════════════════════════════ 阴影体系 · 脆边 + 柔体 / Crisp-edge + Soft-body ──────────────────────────────────────────────────────────── 一条优雅阴影 = 脆边(存在感) + 柔体(优雅): 1. 顶 1px inset 白高光 —— 上沿接住环境光,实体感(仅浅色面浮起件) 2. 发丝光环 0 0 0 1px(~.035–.05)—— 不是边框,是几乎不可见的接触 阴影,给边缘"脆度"(高级感关键) 3. 紧贴接触层 0 1px 1px —— 把元素"坐"到纸面 4. 近 + 远 1~2 层环境光 —— 模糊递增、透明递减(约 blur×2 / op×0.8) 全染冷蓝钢 rgba(20,30,60) · 仅垂直偏移(x=0) · 浮起件底色亮一档。 ⛔ 禁止单层硬投影 · ⛔ 禁止纯黑 · ⛔ 禁止把发丝光环当边框用于无浮起元素。 ════════════════════════════════════════════════════════════ */ --slow-elev-1: /* 行 / chip / 小件静止浮起 */ inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(20, 30, 60, 0.035), 0 1px 1px rgba(20, 30, 60, 0.05), 0 3px 6px -1px rgba(20, 30, 60, 0.07), 0 8px 18px -5px rgba(20, 30, 60, 0.10); /* @kind shadow */ --slow-elev-2: /* 卡片 / 浮层 / popover */ inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(20, 30, 60, 0.04), 0 2px 4px -1px rgba(20, 30, 60, 0.06), 0 6px 14px -3px rgba(20, 30, 60, 0.09), 0 16px 32px -8px rgba(20, 30, 60, 0.12); /* @kind shadow */ --slow-elev-3: /* 模态 / 抽屉(最高)*/ inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(20, 30, 60, 0.05), 0 4px 8px -2px rgba(20, 30, 60, 0.08), 0 12px 28px -6px rgba(20, 30, 60, 0.12), 0 28px 56px -12px rgba(20, 30, 60, 0.16); /* @kind shadow */ --slow-elev-focus: /* 蓝色焦点浮起(进行中 / 选中)*/ inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(33, 66, 231, 0.18), 0 4px 10px -3px rgba(33, 66, 231, 0.18), 0 10px 22px -8px rgba(33, 66, 231, 0.16); /* @kind shadow */ /* ── 兼容别名 —— 存量用法自动升级到 elev 体系 ──────────────── */ --slow-lift-sm: var(--slow-elev-1); /* @kind shadow */ --slow-lift: var(--slow-elev-2); /* @kind shadow */ --slow-lift-lg: var(--slow-elev-3); /* @kind shadow */ --slow-float: var(--slow-elev-2); /* @kind shadow */ --slow-float-sm: var(--slow-elev-1); /* @kind shadow */ --slow-float-active: var(--slow-elev-focus); /* @kind shadow */ --slow-sunken: /* 已完成 / 禁用 下沉(凹陷,非浮起阶梯)*/ inset 0 1px 3px rgba(20, 30, 60, 0.09); /* @kind shadow */ /* 浮起件底色 —— 比容器面(--slow-surface)亮一档 */ --slow-surface-raised: #FCFDFF; /* ── Ring 描边(替代蓝色发光)────────────────────────────── 想"被强调" → ring + 玻璃高光,不发光。 */ --slow-ring: 0 0 0 1px rgba(33, 66, 231, 0.35); --slow-ring-strong: 0 0 0 1.5px rgba(33, 66, 231, 0.55); /* ── 玻璃微拟物 · 顶部高光重 / 底部弱 + inset 顶 1px 白高光 ─── */ --slow-glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.92), /* 顶内高光 */ inset 0 -1px 0 rgba(255, 255, 255, 0.18), /* 底内弱光 */ 0 0 0 1px rgba(20, 30, 60, 0.05); /* @kind shadow */ /* ── 按钮投影(主按钮极淡向下投影)────────────────────────── */ --slow-btn-shadow: 0 1px 2px rgba(20, 30, 60, 0.14), 0 2px 6px rgba(33, 66, 231, 0.20); --slow-btn-shadow-press: 0 1px 1px rgba(20, 30, 60, 0.12); /* ── 字体 · 字重 ≤600 ─────────────────────────────────────── */ --slow-sans: "IBM Plex Sans", "PingFang SC", "MiSans", "HarmonyOS Sans SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* @kind font */ --slow-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace; /* @kind font */ /* ── 动效 ─────────────────────────────────────────────────── */ --slow-ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ /* ── 区块标题字体 · Section Title ────────────────────────────── 重而不死、紧而不挤 —— 分量感介于黑体 masthead 与轻量画廊之间。 中文区块/卡片标题统一:600(系统上限)· +0.015em(轻微开,近中性)· 深冷墨 --slow-ink(不用纯黑)· Latin 走 IBM Plex,中文落 PingFang SC。 */ --slow-title-size: 15px; /* 卡片主标题 @kind font */ --slow-title-size-sub: 14px; /* 卡内子标题 @kind font */ --slow-title-weight: 600; /* @kind font */ --slow-title-tracking: 0.015em; /* @kind font */ } /* ════════════════════════════════════════════════════════════════ 玻璃 · 三档(thin / regular / thick) 半透明底 + backdrop-filter blur + 顶强底弱玻璃边 + inset 顶 1px 白高光 ════════════════════════════════════════════════════════════════ */ .slow-glass { position: relative; border: 1px solid rgba(255, 255, 255, 0.55); border-top-color: rgba(255, 255, 255, 0.90); border-bottom-color: rgba(255, 255, 255, 0.30); background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(8px) saturate(118%); backdrop-filter: blur(8px) saturate(118%); box-shadow: var(--slow-glass-edge), var(--slow-lift-sm); } .slow-glass--thin { background: rgba(255, 255, 255, 0.42); -webkit-backdrop-filter: blur(6px) saturate(112%); backdrop-filter: blur(6px) saturate(112%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80), 0 0 0 1px rgba(20, 30, 60, 0.04), var(--slow-lift-sm); } .slow-glass--regular { background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(8px) saturate(118%); backdrop-filter: blur(8px) saturate(118%); } .slow-glass--thick { background: rgba(255, 255, 255, 0.68); -webkit-backdrop-filter: blur(12px) saturate(125%); backdrop-filter: blur(12px) saturate(125%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(20, 30, 60, 0.06), var(--slow-lift); } /* ════════════════════════════════════════════════════════════════ 按钮 —— 靠"投影有无"区分主次,不靠颜色堆叠 ════════════════════════════════════════════════════════════════ */ .slow-btn { font-family: var(--slow-sans); font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; border-radius: var(--slow-r-btn); border: 1px solid transparent; cursor: pointer; transition: transform 90ms var(--slow-ease), box-shadow 120ms var(--slow-ease), background 120ms var(--slow-ease); user-select: none; } /* primary —— 蓝底白字 + 极淡向下投影 + 按下回弹 */ .slow-btn--primary { background: var(--slow-blue); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--slow-btn-shadow); } .slow-btn--primary:hover { background: var(--slow-blue-bright); } .slow-btn--primary:active, .slow-btn--primary.is-press { background: var(--slow-blue-deep); transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--slow-btn-shadow-press); } /* secondary —— 描边扁平、无投影 */ .slow-btn--secondary { background: transparent; color: var(--slow-blue); border-color: rgba(33, 66, 231, 0.40); box-shadow: none; } .slow-btn--secondary:hover { background: rgba(33, 66, 231, 0.06); border-color: rgba(33, 66, 231, 0.55); } .slow-btn--secondary:active, .slow-btn--secondary.is-press { transform: translateY(1px); background: rgba(33, 66, 231, 0.10); } /* ghost —— 无边无底,仅文字 */ .slow-btn--ghost { background: transparent; color: var(--slow-ink-2); box-shadow: none; } .slow-btn--ghost:hover { background: rgba(26, 34, 51, 0.05); } .slow-btn--ghost:active, .slow-btn--ghost.is-press { transform: translateY(1px); background: rgba(26, 34, 51, 0.08); } /* ════════════════════════════════════════════════════════════════ 数据底版 —— 实心锐利,不玻璃化、不浮雕 ════════════════════════════════════════════════════════════════ */ .slow-data { background: var(--slow-surface); border: 1px solid var(--slow-line); border-radius: var(--slow-r-card); box-shadow: none; } /* 浮层卡片 —— 轻浮起 */ .slow-card { background: var(--slow-surface); border: 1px solid var(--slow-hair); border-radius: var(--slow-r-card); box-shadow: var(--slow-elev-2); } /* ════════════════════════════════════════════════════════════════ 布局与密度 · 紧致精密(Linear-flavored) ──────────────────────────────────────────────────────────────── 气质:紧凑 · 克制 · 精密 —— 靠密度和层级出精致感,不靠大留白和厚阴影。 总纲:浅色面上区分元素优先用 密度 + 发丝描边 + 色阶;浮起只用于焦点; 等高布局用 minmax(0, 1fr)。 ════════════════════════════════════════════════════════════════ */ /* 大卡片 —— 发丝描边定义边界 + 极淡单层投影(近扁平),不靠厚浮起 */ .slow-card-flat { background: var(--slow-surface); border: 1px solid var(--slow-line); border-radius: var(--slow-r-card-tight); box-shadow: var(--slow-elev-1); } /* 字阶 —— 整体下沉一档(字重 ≤600 · 数字一律 mono)*/ .slow-h-block { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; } /* 区块标题 */ .slow-h-card { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; } /* 卡内小标题 */ .slow-body { font-size: 13px; font-weight: 400; } /* 正文 */ .slow-meta { font-size: 12px; color: var(--slow-mute); } /* 次要 / 状态 */ .slow-eyebrow { /* eyebrow 标签 */ font-family: var(--slow-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slow-mute); } .slow-num { font-family: var(--slow-mono); } /* 数字一律 mono */ /* 区块标题字体 · Section Title —— 重而不死、紧而不挤(600 / +0.015em / 深冷墨)*/ .slow-title { font-family: var(--slow-sans); font-size: var(--slow-title-size); font-weight: var(--slow-title-weight); letter-spacing: var(--slow-title-tracking); color: var(--slow-ink); line-height: 1.2; } .slow-title--sub { font-size: var(--slow-title-size-sub); } /* 紧致密度 helper */ .slow-dense { padding: var(--slow-pad-main); } .slow-dense .slow-card-flat, .slow-dense .slow-card { padding: var(--slow-pad-card); } .slow-grid-cards { display: grid; gap: var(--slow-gap-card); } .slow-stack-dense { display: flex; flex-direction: column; gap: var(--slow-gap-stack); } /* 等高栅格 —— 绝不用裸 1fr(自带 min-content 下限会被撑高致不等分)。 多卡等高用 minmax(0, 1fr);需要某行更高就调比例(如 1.4fr : 1fr)。 */ .slow-rows-equal { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: var(--slow-gap-card); } /* 焦点浮起 —— 静止扁平,焦点才浮起;完成/禁用下沉 */ .slow-focus-row { box-shadow: var(--slow-elev-1); } /* 静止 · 最低档浮起 */ .slow-focus-row.is-active { box-shadow: var(--slow-elev-focus); } .slow-focus-row.is-done { box-shadow: var(--slow-sunken); }