/* ============================================================================ REAGLE × PORTFOLIO · DESIGN TOKENS v2.0 ---------------------------------------------------------------------------- 这一层是整套 UI 的唯一参数来源。组件 CSS 里不允许出现任何字面量： 颜色只写 var(--gray-*)/var(--alpha-*)/var(--mint…)，尺寸只写 var(--u-*)/var(--text-*)， 阴影只写 var(--elev-*)/var(--type-*)，动效只写 var(--dur-*)/var(--ease-*)。 三层结构（改上层，下层全部跟着走）： L1 原语 --gray / --warm / --cool / --alpha / --u / --icon 由参考图逐像素实测得出 L2 语义 --panel / --main / --ink / --hair / --r-… / --text-… 说明「用在哪里」 L3 组件 --elev-… / --type-… / --fx-… 每个组件的外形参数 复用方式：整份文件 @import 或 即可。另一个项目只需覆盖 L2 的那十几个 语义变量，L3 会顺着「L3 → L2 → L1」的引用链整片跟着变，组件不用改一行。 唯一保留字面量的地方是 @media 的断点 —— CSS 规范不允许在条件里使用 var()。 ---------------------------------------------------------------------------- v2.0（2026-10-21）：portfolio-site 改用同一套设计语言，两站共用这一份参数。 新增的只有文件尾「05e / 06b / 08b」三段 —— 全部从既有的 mint / gold / rose 三支信号色与 --u-* 长度原语派生，没有引入第四支色相。 ============================================================================ */ :root{ /* --------------------------------------------------------------------- 01 · 中性灰阶 --gray-{L} 后缀就是实测亮度（0-255，chroma 恒为 0）。整套 UI 只由一个灰阶构成， 表面之间只差 2~7 级，靠 1px 边线和阴影分离，不靠颜色跳跃。 --------------------------------------------------------------------- */ --gray-0:#000; /* 最深：图标描边 / 遮罩 */ --gray-8:#080808; --gray-15:#0f0f0f; --gray-16:#101010; --gray-18:#121212; --gray-20:#141414; --gray-22:#161616; --gray-29:#1d1d1d; --gray-36:#242424; --gray-38:#262626; --gray-58:#3a3a3a; --gray-90:#5a5a5a; --gray-92:#5c5c5c; --gray-106:#6a6a6a; --gray-107:#6b6b6b; --gray-110:#6e6e6e; --gray-111:#6f6f6f; --gray-117:#757575; --gray-120:#787878; --gray-122:#7a7a7a; --gray-123:#7b7b7b; --gray-124:#7c7c7c; --gray-138:#8a8a8a; --gray-140:#8c8c8c; --gray-142:#8e8e8e; --gray-155:#9b9b9b; --gray-157:#9d9d9d; --gray-159:#9f9f9f; --gray-160:#a0a0a0; --gray-161:#a1a1a1; --gray-162:#a2a2a2; --gray-163:#a3a3a3; --gray-164:#a4a4a4; --gray-166:#a6a6a6; --gray-167:#a7a7a7; --gray-168:#a8a8a8; --gray-169:#a9a9a9; --gray-170:#aaaaaa; --gray-171:#ababab; --gray-172:#acacac; --gray-173:#adadad; --gray-175:#afafaf; --gray-177:#b1b1b1; --gray-182:#b6b6b6; --gray-184:#b8b8b8; --gray-185:#b9b9b9; --gray-198:#c6c6c6; --gray-208:#d0d0d0; --gray-213:#d5d5d5; --gray-231:#e7e7e7; --gray-245:#f5f5f5; --gray-255:#fff; /* 最亮：玻璃高光 */ /* 暖墨：正文、压印标签、深色胶囊上的文字（r>g>b，极低彩度） */ --warm-231a:#e9e7e2; --warm-23:#181715; --warm-31:#211f1d; --warm-33:#222120; --warm-34:#232220; --warm-61:#3f3d39; --warm-75:#4d4b46; --warm-85:#57554f; --warm-88:#5a5852; --warm-106:#6c6a64; --warm-107:#6d6b65; --warm-109:#6f6d67; --warm-137:#8b8983; --warm-139:#8d8b85; --warm-169:#aaa9a8; --warm-204:#cfccc6; /* 冷墨：左侧金属轨道上的深色胶囊（b 略高于 r） */ --cool-29:#1d1d1f; --cool-34:#222224; --cool-36:#242426; --cool-38:#262628; --cool-43:#2b2b2d; --cool-49:#313133; --cool-53:#353537; --cool-69:#454547; /* --------------------------------------------------------------------- 02 · 信号色 --mint / --gold / --rose 头像上方那三颗珠子就是全站状态色板：live / paused / blocked。 每一支只有四档：lip（受光端）· mid（体）· shade（暗端）· deep（落影）。 除这三支以外，UI 不允许出现任何色相。 --------------------------------------------------------------------- */ --mint-lip: #d5f2e8; /* 薄荷 · 受光 */ --mint: #a6d0c2; /* 薄荷 · 体 = live */ --mint-bright: #a9d7c8; /* 薄荷 · 发光字（204% 徽标） */ --mint-mid: #a9d4c6; /* 薄荷 · 中 */ --mint-shade: #85a49a; /* 薄荷 · 暗端 */ --mint-deep: #65796f; /* 薄荷 · 落影 */ --mint-ink: #3e6b5c; /* 薄荷 · 深字（表格状态，对比 2.68） */ --gold-lip: #efe7d4; /* 金 · 受光 */ --gold: #cec19c; /* 金 · 体 = paused */ --gold-mid: #d3c5a0; /* 金 · 中 */ --gold-shade: #9f9878; /* 金 · 暗端 */ --gold-deep: #767964; /* 金 · 落影 */ --gold-ink: #6f6248; /* 金 · 深字 */ --rose-lip: #eddcde; /* 玫 · 受光 */ --rose: #be929b; /* 玫 · 体 = blocked */ --rose-mid: #c69aa3; /* 玫 · 中 */ --rose-shade: #9b6e77; /* 玫 · 暗端 */ --rose-deep: #74555c; /* 玫 · 落影 */ /* --------------------------------------------------------------------- 03 · 透明度阶梯 --alpha-{source}-{AAA} AAA = alpha × 1000。同一支颜色的每个透明度都是 token， 所以「把整个面的高光统一压暗」只需要改一次。 --------------------------------------------------------------------- */ /* 白 · 高光与亮唇 */ --alpha-white-000: rgba(255,255,255,0); --alpha-white-006: rgba(255,255,255,.006); --alpha-white-008: rgba(255,255,255,.008); --alpha-white-012: rgba(255,255,255,.012); --alpha-white-015: rgba(255,255,255,.015); --alpha-white-020: rgba(255,255,255,.02); --alpha-white-028: rgba(255,255,255,.028); --alpha-white-030: rgba(255,255,255,.03); --alpha-white-035: rgba(255,255,255,.035); --alpha-white-040: rgba(255,255,255,.04); --alpha-white-045: rgba(255,255,255,.045); --alpha-white-050: rgba(255,255,255,.05); --alpha-white-055: rgba(255,255,255,.055); --alpha-white-060: rgba(255,255,255,.06); --alpha-white-070: rgba(255,255,255,.07); --alpha-white-075: rgba(255,255,255,.075); --alpha-white-080: rgba(255,255,255,.08); --alpha-white-085: rgba(255,255,255,.085); --alpha-white-090: rgba(255,255,255,.09); --alpha-white-100: rgba(255,255,255,.10); --alpha-white-105: rgba(255,255,255,.105); --alpha-white-110: rgba(255,255,255,.11); --alpha-white-115: rgba(255,255,255,.115); --alpha-white-120: rgba(255,255,255,.12); --alpha-white-125: rgba(255,255,255,.125); --alpha-white-130: rgba(255,255,255,.13); --alpha-white-135: rgba(255,255,255,.135); --alpha-white-140: rgba(255,255,255,.14); --alpha-white-160: rgba(255,255,255,.16); --alpha-white-170: rgba(255,255,255,.17); --alpha-white-180: rgba(255,255,255,.180); --alpha-white-200: rgba(255,255,255,.20); --alpha-white-220: rgba(255,255,255,.22); --alpha-white-240: rgba(255,255,255,.24); --alpha-white-260: rgba(255,255,255,.26); --alpha-white-275: rgba(255,255,255,.275); --alpha-white-300: rgba(255,255,255,.30); --alpha-white-320: rgba(255,255,255,.32); --alpha-white-340: rgba(255,255,255,.34); --alpha-white-345: rgba(255,255,255,.345); --alpha-white-380: rgba(255,255,255,.38); --alpha-white-400: rgba(255,255,255,.40); --alpha-white-420: rgba(255,255,255,.42); --alpha-white-450: rgba(255,255,255,.45); --alpha-white-460: rgba(255,255,255,.46); --alpha-white-550: rgba(255,255,255,.55); --alpha-white-620: rgba(255,255,255,.62); --alpha-white-700: rgba(255,255,255,.7); --alpha-white-800: rgba(255,255,255,.80); --alpha-white-880: rgba(255,255,255,.88); --alpha-white-900: rgba(255,255,255,.90); /* 黑 · 阴影与凹陷 */ --alpha-black-000: rgba(0,0,0,0); --alpha-black-012: rgba(0,0,0,.012); --alpha-black-015: rgba(0,0,0,.015); --alpha-black-020: rgba(0,0,0,.020); --alpha-black-028: rgba(0,0,0,.028); --alpha-black-030: rgba(0,0,0,.03); --alpha-black-035: rgba(0,0,0,.035); --alpha-black-040: rgba(0,0,0,.04); --alpha-black-042: rgba(0,0,0,.042); --alpha-black-045: rgba(0,0,0,.045); --alpha-black-050: rgba(0,0,0,.05); --alpha-black-055: rgba(0,0,0,.055); --alpha-black-058: rgba(0,0,0,.058); --alpha-black-060: rgba(0,0,0,.06); --alpha-black-068: rgba(0,0,0,.068); --alpha-black-070: rgba(0,0,0,.07); --alpha-black-074: rgba(0,0,0,.074); --alpha-black-080: rgba(0,0,0,.08); --alpha-black-082: rgba(0,0,0,.082); --alpha-black-090: rgba(0,0,0,.09); --alpha-black-100: rgba(0,0,0,.10); --alpha-black-110: rgba(0,0,0,.11); --alpha-black-120: rgba(0,0,0,.12); --alpha-black-130: rgba(0,0,0,.13); --alpha-black-140: rgba(0,0,0,.14); --alpha-black-150: rgba(0,0,0,.15); --alpha-black-160: rgba(0,0,0,.16); --alpha-black-200: rgba(0,0,0,.20); --alpha-black-210: rgba(0,0,0,.21); --alpha-black-240: rgba(0,0,0,.24); --alpha-black-300: rgba(0,0,0,.30); --alpha-black-340: rgba(0,0,0,.34); --alpha-black-380: rgba(0,0,0,.38); --alpha-black-420: rgba(0,0,0,.42); --alpha-black-450: rgba(0,0,0,.45); --alpha-black-500: rgba(0,0,0,.5); --alpha-black-550: rgba(0,0,0,.55); --alpha-black-750: rgba(0,0,0,.75); --alpha-black-950: rgba(0,0,0,.95); /* 暖黑 · 分隔线与刻线 (28,27,25) */ --alpha-warm-010: rgba(28,27,25,.010); --alpha-warm-050: rgba(28,27,25,.05); --alpha-warm-055: rgba(28,27,25,.055); --alpha-warm-058: rgba(28,27,25,.058); --alpha-warm-070: rgba(28,27,25,.07); --alpha-warm-075: rgba(28,27,25,.075); --alpha-warm-080: rgba(28,27,25,.08); --alpha-warm-100: rgba(28,27,25,.10); --alpha-warm-115: rgba(28,27,25,.115); --alpha-warm-160: rgba(28,27,25,.16); /* 结构线专用两档：技术图的走线必须能读成线，又不能比正文重。 0.28 落在浅板上约等于中性 152，0.34 约等于 140（主干/边框用）。 */ --alpha-warm-280: rgba(28,27,25,.28); --alpha-warm-340: rgba(28,27,25,.34); /* 薄荷 · 状态辉光 (166,208,194) */ --alpha-mint-140: rgba(166,208,194,.14); --alpha-mint-160: rgba(166,208,194,.16); --alpha-mint-200: rgba(166,208,194,.20); --alpha-mint-750: rgba(166,208,194,.75); /* 薄荷 · 徽标光晕 (168,212,198) */ --alpha-mintglow-550: rgba(168,212,198,.55); /* 薄荷 · 旧底 (154,198,182) */ --alpha-mintsoft-160: rgba(154,198,182,.16); --alpha-mintsoft-320: rgba(154,198,182,.32); --alpha-mintsoft-400: rgba(154,198,182,.40); --alpha-mintsoft-550: rgba(154,198,182,.55); --alpha-mintsoft-700: rgba(154,198,182,.7); /* 金 · 状态辉光 (206,193,156) */ --alpha-gold-140: rgba(206,193,156,.14); --alpha-gold-160: rgba(206,193,156,.16); --alpha-gold-180: rgba(206,193,156,.18); --alpha-gold-220: rgba(206,193,156,.22); /* --------------------------------------------------------------------- 04 · 长度原语 --u-{px} 唯一的一套长度编码（负值 --u-n{px}，小数用 _ 代替 .）。 所有间距、尺寸、圆角、描边、图标都从这里取，组件不再出现 px。 --------------------------------------------------------------------- */ --u-n46:-46px; --u-n34:-34px; --u-n32:-32px; --u-n30:-30px; --u-n26:-26px; --u-n24:-24px; --u-n22:-22px; --u-n20:-20px; --u-n16:-16px; --u-n14:-14px; --u-n12:-12px; --u-n11:-11px; --u-n10:-10px; --u-n9:-9px; --u-n8:-8px; --u-n5:-5px; --u-n4:-4px; --u-n3_5:-3.5px; --u-n3:-3px; --u-n2_5:-2.5px; --u-n2:-2px; --u-n1:-1px; --u-n0_5:-0.5px; --u-0:0px; --u-0_5:0.5px; --u-1:1px; --u-1_5:1.5px; --u-2:2px; --u-2_5:2.5px; --u-3:3px; --u-4:4px; --u-5:5px; --u-6:6px; --u-7:7px; --u-8:8px; --u-9:9px; --u-9_5:9.5px; --u-10:10px; --u-10_5:10.5px; --u-11:11px; --u-11_5:11.5px; --u-12:12px; --u-12_5:12.5px; --u-13:13px; --u-13_5:13.5px; --u-14:14px; --u-15:15px; --u-16:16px; --u-17:17px; --u-18:18px; --u-19:19px; --u-20:20px; --u-21:21px; --u-22:22px; --u-22_5:22.5px; --u-23:23px; --u-24:24px; --u-25:25px; --u-26:26px; --u-27:27px; --u-28:28px; --u-30:30px; --u-31:31px; --u-32:32px; --u-33:33px; --u-34:34px; --u-35:35px; --u-36:36px; --u-38:38px; --u-39:39px; --u-40:40px; --u-42:42px; --u-43:43px; --u-44:44px; --u-46:46px; --u-47:47px; --u-48:48px; --u-50:50px; --u-52:52px; --u-54:54px; --u-56:56px; --u-58:58px; --u-60:60px; --u-63:63px; --u-64:64px; --u-66:66px; --u-68:68px; --u-70:70px; --u-72:72px; --u-76:76px; --u-78:78px; --u-84:84px; --u-92:92px; --u-104:104px; --u-106:106px; --u-112:112px; --u-130:130px; --u-132:132px; --u-146:146px; --u-150:150px; --u-160:160px; --u-200:200px; --u-210:210px; --u-236:236px; --u-250:250px; --u-278:278px; --u-280:280px; --u-300:300px; --u-460:460px; --u-560:560px; --u-735:735px; --u-790:790px; --u-820:820px; --u-840:840px; --u-920:920px; --u-940:940px; --u-980:980px; --u-1180:1180px; --u-1500:1500px; --u-999:999px; /* --------------------------------------------------------------------- 04b · 图标阶梯 --icon-{档} 全站只有四档，任何图标都必须落在其中一档。 这一条是补的漏：`chev` 曾经没有自己的盒子，在 flex 行里被拉伸到 70px， 成了整页最响的形状。图标不能自己决定大小。 --------------------------------------------------------------------- */ --icon-2xs:12px; /* 行内微标：树折叠箭头、徽标箭头 */ --icon-xs: 16px; /* 默认：行图标、磁贴字形、搜索框、右向箭头 */ --icon-sm: 20px; /* 控件图标：轨道按钮、导航行、设置齿轮 */ --icon-md: 24px; /* 空态插画 */ /* 断点阶梯（--u-735 … --u-1180）：CSS 规范禁止在 @media 条件里用 var()， 所以这些 token 不能写进媒体查询；它们的用途是给 JS（matchMedia 阈值） 和阅读者当基准，保证「同一套数字」在样式表与脚本之间不会各写一遍。 */ /* --------------------------------------------------------------------- 05 · 语义表层 —— 只说明“这块是什么”，数值全部来自 L1 --------------------------------------------------------------------- */ --canvas-top:var(--gray-167); /* 画布最亮处（右上） */ --canvas-mid:var(--gray-157); --canvas-bot:var(--gray-123); /* 画布最深处（左下） */ --panel:var(--gray-168); /* 导航面板：全页最亮的承重面 */ --panel-hi:var(--gray-170); --main:var(--gray-161); /* 主面板：比面板低一级，是「嵌进去」的那块 */ --main-hi:var(--gray-163); --card:var(--gray-167); /* 卡片只比主板高 6 级 */ --card-hi:var(--gray-169); --raised:var(--gray-171); --rail-hi:var(--cool-43); /* 左侧金属轨道深胶囊：四段竖向光 */ --rail-a:var(--cool-38); --rail-b:var(--cool-36); --rail-c:var(--cool-34); /* 文字：最深的字也不是纯黑，参考图落在 36 级附近 */ --ink:var(--gray-36); --ink-soft:var(--gray-58); --muted:var(--gray-111); --muted-2:var(--gray-117); /* 分组标签：像压进面板里 */ --faint:var(--gray-160); /* 轨道上的竖排压印字 */ /* 状态别名：组件只认这三个名字 */ --sig-mint:var(--mint); --sig-mint-ink:var(--mint-ink); --sig-gold:var(--gold); --sig-gold-ink:var(--gold-ink); --sig-rose:var(--rose); /* --------------------------------------------------------------------- 05b · 行几何 --row-* / --tile 全站只有两种行：表行（五列、密度优先）和列表行（两行文字、可读优先）。 两种行共用同一个行首磁贴 —— 之前表里是 30、列表里是 32，同一个角色 两个尺寸，只是没人并排看过。 --------------------------------------------------------------------- */ --row-h: var(--u-48); /* 表行 */ --row-h-lg:var(--u-60); /* 列表行 */ --tile: var(--u-32); /* 行首磁贴，两种行共用 */ /* --------------------------------------------------------------------- 05c · 芯片尺度 --chip-* 全站只有一种「小标签」：左边一颗状态珠、右边一行 11px 字的胶囊。 表里的状态与指标卡上的 delta 是同一件东西的两档（紧凑 / 常规）， 圆角、内边距、珠径、座圈共用，只在高度与字号上分档。 宽度是「足迹」不是「内容」：同一列里的芯片必须等宽。之前 Active 62 / Paused 68 / Draft 47 三种宽度并在，右缘锯齿，整列读不成一条竖线。 --------------------------------------------------------------------- */ --chip-h: var(--u-23); /* 紧凑档：表内状态 */ --chip-h-lg: var(--u-28); /* 常规档：指标卡 delta */ --chip-w: var(--u-76); /* 等宽足迹：最宽标签 Success 74 + 2 */ --chip-pad: var(--u-9); --chip-gap: var(--u-6); /* 珠 → 字 */ --chip-gap-lg:var(--u-3); --chip-r: var(--u-7); --chip-fs: var(--text-11); --chip-fs-lg:var(--text-13); --chip-dot: var(--u-5); /* 状态珠直径 */ --chip-ring: var(--u-2); /* 珠外座圈：三种状态同一厚度，只换色素 */ /* --------------------------------------------------------------------- 05d · 窗口几何 --frame-pad / --rail-* / --fade-h 这一组是「窗口不再是全屏」之后的修正。舞台四周的空气原来只由 2.4vw 算， 横向的值被拿去管纵向：窗口一拉宽、一压低，上下的空气反而更厚，应用被 挤到 405px，轨道里的键位只好互相叠压。空气必须由两个方向里更紧的那个 决定，所以是 min(2.4vw, 4vh)。 轨道同理：键位、键间距、两块压印板的高度都收成四个名字，矮窗时只换这 四个名字，组件不必知道自己在第几档。 --------------------------------------------------------------------- */ --frame-pad: clamp(var(--u-10), min(2.4vw, 4vh), var(--u-36)); --rail-key: var(--u-38); /* 轨道键：常规 */ --rail-key-sm: var(--u-34); /* 轨道键：矮窗 / 窄窗 */ --rail-gap: var(--u-14); /* 图标列间距 */ --rail-plate-nav: var(--u-150); /* NAV 压印板 */ --rail-plate-set: var(--u-210); /* SETTINGS 压印板（字 + 齿轮键） */ --rail-plate-hug: var(--u-58); /* 收成一颗齿轮键的压印板 */ --fade-h: var(--u-28); /* 被裁断处的渐隐带：没有滚动条时的「还有」 */ /* --------------------------------------------------------------------- 06 · 圆角 --------------------------------------------------------------------- */ --r-xs:var(--u-5); --r-sm:var(--u-9); --r-md:var(--u-12); --r-lg:var(--u-16); --r-xl:var(--u-26); --r-pill:var(--u-999); /* --------------------------------------------------------------------- 07 · 字体：字族 / 字号 / 字重 / 行高 / 字距 字号 token 是长度原语的别名，所以字距与间距永远同源。 --------------------------------------------------------------------- */ --font-sans:"Inter","Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --text-8: var(--u-8); --text-9: var(--u-9); --text-9_5: var(--u-9_5); --text-10_5: var(--u-10_5); --text-11: var(--u-11); --text-11_5: var(--u-11_5); --text-12: var(--u-12); --text-12_5: var(--u-12_5); --text-13: var(--u-13); --text-13_5: var(--u-13_5); --text-14: var(--u-14); --text-15: var(--u-15); --text-16: var(--u-16); --text-19: var(--u-19); --text-21: var(--u-21); --text-23: var(--u-23); --text-26: var(--u-26); --text-27: var(--u-27); --text-30: var(--u-30); --text-34: var(--u-34); --text-40: var(--u-40); --text-46: var(--u-46); --text-48: var(--u-48); --text-58: var(--u-58); --text-68: var(--u-68); --fw-light: 380; --fw-medium: 500; --fw-numeral: 340; --fw-regular: 400; --fw-semibold:600; --lh-normal: 1.5; --lh-numeral: .90; --lh-snug: 1.2; --lh-tight: 1.08; --tracking-n28: -.028em; --tracking-n24: -.024em; --tracking-n20: -.02em; --tracking-n14: -.014em; --tracking-n12: -.012em; --tracking-n8: -.008em; --tracking-n6: -.006em; --tracking-n5: -.005em; --tracking-n4: -.004em; --tracking-n2: -.002em; --tracking-2: .002em; --tracking-5: .005em; --tracking-80: .08em; --tracking-100: .1em; --tracking-150: .15em; --tracking-160: .16em; --tracking-170: .17em; /* --------------------------------------------------------------------- 08 · 运动 --------------------------------------------------------------------- */ --dur-150: .15s; --dur-160: .16s; --dur-170: .17s; --dur-180: .18s; --dur-200: .2s; --dur-250: .25s; --dur-260: .26s; --dur-280: .28s; --dur-320: .32s; --dur-340: .34s; --dur-380: .38s; --dur-800: .8s; --ease: cubic-bezier(.4,0,.2,1); /* 标准缓动 */ --ease-out: cubic-bezier(.22,1,.36,1); /* 落位：起手快、收尾长 */ /* --------------------------------------------------------------------- 09 · 层级 --------------------------------------------------------------------- */ --z-2: 2; --z-4: 4; --z-5: 5; --z-12: 12; --z-20: 20; --z-55: 55; --z-60: 60; /* --------------------------------------------------------------------- 10 · 纹理：全屏胶片颗粒（整套拟真的最后一道） --------------------------------------------------------------------- */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); /* --------------------------------------------------------------------- 11 · 高程与雕工 —— 每个组件的「体积」参数 一条 token 就是整串阴影：接触线 + 中层衰减 + 大范围环境光。 --elev-* box-shadow --type-* text-shadow --fx-* filter --------------------------------------------------------------------- */ --shadow-panel:0 40px 70px -46px rgba(0,0,0,.55), 0 10px 22px -16px rgba(0,0,0,.26), 0 2px 4px -3px rgba(0,0,0,.20); --shadow-card:0 22px 38px -30px rgba(0,0,0,.42), 0 3px 6px -4px rgba(0,0,0,.14); /* .avatar */ --elev-avatar:0 0 0 var(--u-1) var(--alpha-white-800), 0 0 0 var(--u-2) var(--alpha-black-045), 0 var(--u-1) var(--u-2) var(--alpha-black-160), 0 var(--u-10) var(--u-16) var(--u-n9) var(--alpha-black-550); /* .btn-ghost */ --elev-btn-ghost:inset 0 var(--u-1) 0 var(--alpha-white-220), inset 0 0 0 var(--u-1) var(--alpha-white-100), inset 0 var(--u-n1) 0 var(--alpha-black-050); /* .btn-ghost:hover */ --elev-btn-ghost-hover:inset 0 var(--u-1) 0 var(--alpha-white-300), inset 0 0 0 var(--u-1) var(--alpha-white-140), inset 0 var(--u-n1) 0 var(--alpha-black-060); /* .collection */ --elev-collection:inset 0 var(--u-1) 0 var(--alpha-white-120), 0 0 0 var(--u-1) var(--alpha-white-090), var(--shadow-card); /* .crow:hover */ --elev-crow-hover:inset 0 0 0 var(--u-1) var(--alpha-white-070); /* .data-card */ --elev-data-card:0 var(--u-1) 0 0 var(--alpha-black-055), inset 0 var(--u-1) 0 var(--alpha-white-080), inset 0 var(--u-n1) 0 var(--alpha-black-035), 0 var(--u-3) var(--u-6) var(--u-n5) var(--alpha-black-140), 0 var(--u-22) var(--u-38) var(--u-n34) var(--alpha-black-380); /* .delta */ --elev-delta:inset 0 var(--u-1) 0 var(--alpha-white-075), inset 0 var(--u-n1) 0 var(--alpha-white-028); /* .doc-search */ --elev-doc-search:inset var(--u-1) 0 0 var(--alpha-white-130), inset var(--u-n1) 0 0 var(--alpha-white-045), inset 0 var(--u-2) var(--u-3) var(--u-n1) var(--alpha-black-150), inset 0 var(--u-1) 0 var(--alpha-black-060), inset 0 var(--u-n1) 0 var(--alpha-white-130), 0 var(--u-1) 0 var(--alpha-white-100); /* .doc-search:focus-within */ --elev-doc-search-focus-within:inset 0 0 0 var(--u-1) var(--alpha-white-200), 0 0 0 var(--u-3) var(--alpha-mintsoft-160); /* .dot */ --elev-dot:inset 0 var(--u-1) var(--u-1) var(--alpha-white-900), inset 0 0 0 var(--u-1) var(--alpha-black-110), inset 0 var(--u-n2) var(--u-3) var(--u-n1) var(--alpha-black-300), 0 var(--u-1) var(--u-2) var(--alpha-black-240), 0 0 0 .5px var(--alpha-black-090); /* .gear-btn */ --elev-gear-btn:inset 0 var(--u-1) 0 var(--alpha-white-170), inset 0 var(--u-n1) 0 var(--alpha-white-085), 0 var(--u-1) 0 var(--alpha-black-300), 0 var(--u-9) var(--u-14) var(--u-n10) var(--alpha-black-750); /* .main */ --elev-main:inset 0 var(--u-3) var(--u-4) var(--u-n3) var(--alpha-black-130); /* .metric-card */ --elev-metric-card:0 var(--u-1) 0 0 var(--alpha-black-055), inset 0 var(--u-1) 0 var(--alpha-white-060), inset 0 var(--u-n1) 0 var(--alpha-black-040), 0 var(--u-3) var(--u-6) var(--u-n4) var(--alpha-black-140), 0 var(--u-26) var(--u-44) var(--u-n34) var(--alpha-black-420); /* .metric-card:hover */ --elev-metric-card-hover:0 var(--u-1) 0 0 var(--alpha-black-070), inset 0 var(--u-1) 0 var(--alpha-white-200), 0 var(--u-26) var(--u-42) var(--u-n32) var(--alpha-black-450); /* .nav-grip */ --elev-nav-grip:inset 0 var(--u-1) 0 var(--alpha-white-260), var(--u-n2) 0 var(--u-4) var(--u-n2) var(--alpha-black-340), 0 var(--u-4) var(--u-8) var(--u-n5) var(--alpha-black-450); /* .nav-row.is-active */ --elev-nav-row-is-active:0 var(--u-16) var(--u-22) var(--u-n8) var(--alpha-black-090), 0 var(--u-28) var(--u-36) var(--u-n24) var(--alpha-black-110); /* .nav-row.is-active .count */ --elev-nav-row-is-active-count:inset 0 var(--u-1) 0 var(--gray-255), inset 0 var(--u-n1) 0 var(--alpha-black-050), 0 0 0 var(--u-1) var(--alpha-white-420), 0 var(--u-1) var(--u-2) var(--u-n1) var(--alpha-black-200); /* .rail-btn.is-active */ --elev-rail-btn-is-active:inset 0 var(--u-1) 0 var(--alpha-white-260), inset 0 0 0 var(--u-1) var(--alpha-white-045), inset 0 var(--u-n1) 0 var(--alpha-white-090), 0 var(--u-1) 0 var(--alpha-black-450), 0 var(--u-9) var(--u-16) var(--u-n12) var(--alpha-black-950); /* .rail-case */ --elev-rail-case:inset 0 var(--u-1) 0 var(--alpha-white-400), inset 0 0 0 var(--u-1) var(--alpha-white-100), inset 0 var(--u-n1) 0 var(--alpha-black-055), 0 var(--u-18) var(--u-30) var(--u-n26) var(--alpha-black-550), 0 var(--u-3) var(--u-5) var(--u-n4) var(--alpha-black-160); /* .rail-dark */ --elev-rail-dark:inset 0 var(--u-1) 0 var(--alpha-white-140), inset 0 var(--u-n1) 0 var(--alpha-white-055), 0 0 0 var(--u-1) var(--alpha-black-100), 0 var(--u-4) var(--u-7) var(--u-n4) var(--alpha-black-450), 0 var(--u-12) var(--u-20) var(--u-n16) var(--alpha-black-550); /* .rail-tag */ --elev-rail-tag:inset 0 var(--u-1) 0 var(--alpha-white-300), inset var(--u-1) 0 0 var(--alpha-white-140), inset var(--u-n1) 0 0 var(--alpha-black-030), inset 0 var(--u-n14) var(--u-18) var(--u-n16) var(--alpha-black-100), 0 var(--u-14) var(--u-24) var(--u-n22) var(--alpha-black-500), 0 var(--u-2) var(--u-3) var(--u-n3) var(--alpha-black-140); /* .rail-tag::after */ --elev-rail-tag-after:inset 0 var(--u-1) 0 var(--alpha-white-160), inset 0 var(--u-n20) var(--u-24) var(--u-n22) var(--alpha-black-120); /* .rail-tag::before */ --elev-rail-tag-before:0 var(--u-1) 0 var(--alpha-white-300); /* .rail-tag--settings::before */ --elev-rail-tag-settings-before:0 var(--u-1) 0 var(--alpha-white-550); /* .reopen */ --elev-reopen:0 var(--u-6) var(--u-14) var(--u-n12) var(--alpha-black-500); /* .rule */ --elev-rule:0 var(--u-1) 0 var(--alpha-white-115); /* .search-lg */ --elev-search-lg:inset 0 var(--u-2) var(--u-4) var(--u-n1) var(--alpha-black-130), inset 0 var(--u-1) 0 var(--alpha-black-045), inset 0 var(--u-n1) 0 var(--alpha-white-460), 0 var(--u-1) 0 var(--alpha-white-130); /* .search-lg:focus-within */ --elev-search-lg-focus-within:inset 0 0 0 var(--u-1) var(--alpha-white-220), 0 0 0 var(--u-3) var(--alpha-mintsoft-160); /* .status —— 三种状态共用一条外缘：1px 中性唇，只换色素。 曾经 draft 是「无填充 + 深色 hairline」，光学上比同伴小一圈， 同一列里读起来像另一个组件（像禁用按钮，而不像未点亮的状态）。 */ --elev-status:inset 0 0 0 var(--u-1) var(--alpha-warm-100), inset 0 var(--u-1) 0 var(--alpha-white-100); /* .status i —— 未点亮的珠：同 5px、同 2px 座圈，只换色素。 三颗珠对各自床面的对比都锁在 1.3 左右（mint 1.34 / gold 1.27 / 石墨 1.27）—— 之前是 1.34 / 1.27 / 1.55 且直径 11 / 9 / 5， 同一个组件在三行里是三个尺寸。 */ --elev-status-i:0 0 0 var(--chip-ring) var(--alpha-black-090); /* .status.live */ --elev-status-live:inset 0 0 0 var(--u-1) var(--alpha-mint-160), inset 0 var(--u-1) 0 var(--alpha-white-100); /* .status.live i —— 溢光收到 3px：它负责「发光」，不负责「变大」。 原来是 7px，光学直径 19，而 paused 只有 11、draft 只有 5 —— 同一颗珠 在三种状态下有三个尺寸，这才是「规格不统一」最刺眼的地方。 */ --elev-status-live-i:0 0 0 var(--chip-ring) var(--alpha-mint-200), 0 0 var(--u-2) var(--alpha-mint-750); /* .status.paused */ --elev-status-paused:inset 0 0 0 var(--u-1) var(--alpha-gold-160), inset 0 var(--u-1) 0 var(--alpha-white-100); /* .status.paused i */ --elev-status-paused-i:0 0 0 var(--chip-ring) var(--alpha-gold-220); /* .tab.is-active::after */ --elev-tab-is-active-after:inset 0 var(--u-1) 0 var(--alpha-white-450), inset 0 var(--u-n1) 0 var(--alpha-black-060), 0 var(--u-1) 0 var(--alpha-white-180), 0 var(--u-2) var(--u-5) var(--u-n2) var(--alpha-black-240); /* .tab.is-active::before */ --elev-tab-is-active-before:inset 0 var(--u-1) 0 var(--alpha-white-550), 0 var(--u-1) var(--u-1) var(--alpha-black-200); /* .tabs */ --elev-tabs:0 var(--u-1) 0 var(--alpha-white-340); /* .tile */ --elev-tile:inset 0 var(--u-1) 0 var(--alpha-white-550), inset 0 var(--u-n1) 0 var(--alpha-white-140), 0 0 0 var(--u-1) var(--alpha-white-100), 0 var(--u-1) 0 var(--alpha-black-045), 0 var(--u-2) var(--u-3) var(--u-n2) var(--alpha-black-120); /* .tree */ --elev-tree:inset 0 0 0 var(--u-1) var(--alpha-warm-058); /* .tree-row .count */ --elev-tree-row-count:inset 0 0 0 var(--u-1) var(--alpha-white-070); /* .tree-row.is-active */ --elev-tree-row-is-active:inset 0 var(--u-1_5) var(--u-2) var(--alpha-black-100), inset 0 0 0 var(--u-1) var(--alpha-black-035), inset 0 var(--u-n1) 0 var(--alpha-white-320), 0 var(--u-1) 0 var(--alpha-white-120); /* .trow:hover */ --elev-trow-hover:inset 0 0 0 var(--u-1) var(--alpha-white-070); /* .gear-btn:hover */ --fx-gear-btn-hover:brightness(1.14); /* .rail */ --fx-rail:drop-shadow(0 var(--u-2) var(--u-3) var(--alpha-black-100)) drop-shadow(0 var(--u-12) var(--u-20) var(--alpha-black-120)); /* .delta .glow */ --type-delta-glow:0 0 var(--u-1) var(--alpha-mintglow-550); /* .h2 */ --type-h2:0 var(--u-1) 0 var(--alpha-white-160); /* .metric-num */ --type-metric-num:0 var(--u-1) 0 var(--alpha-white-180); /* .rail-tag span */ --type-rail-tag-span:0 var(--u-1) 0 var(--alpha-white-620), 0 var(--u-n1) 0 var(--alpha-black-150); /* .section-label */ --type-section-label:0 var(--u-1) 0 var(--alpha-white-260); /* .title */ --type-title:0 var(--u-1) 0 var(--alpha-white-100); /* --------------------------------------------------------------------- 12 · 插图调色板 --illus-* 头像是一幅独立插画，不属于 UI 灰阶体系，但同样是「参数」而不是组件私有 常量。集中在这里，换肤色/换发色只改这一处。 --------------------------------------------------------------------- */ --illus-bg: #dedcd6; /* 圆形底色 */ --illus-skin: #efd9c9; /* 面部高光 */ --illus-skin-deep: #e6cfc0; /* 颈部阴影 */ --illus-neck: #d9c3b4; /* 衣领缝线 */ --illus-lip: #b78a74; /* 唇线 */ --illus-hair: #262421; /* 发型 */ --illus-brow: #3b3833; /* 眉/发丝高光 */ --illus-shirt: #1f1e1c; /* 上身剪影 */ --illus-frame: #2b2926; /* 眼镜框 */ --illus-collar: #2a2825; /* 衣领线 */ /* --------------------------------------------------------------------- 05e · 作品集信号池 --sig-{池} 七个能力池需要七个名字，但色谱不允许出现第四个色相。所以每一支都是 mint / gold / rose 里的一档 —— 池与池之间靠「同一色相的不同深度」区分， 而不是靠换颜色。这样整页仍然只有一个色素体系。 --------------------------------------------------------------------- */ --sig-pool: var(--gold-ink); /* 供给中枢：金色最深一档，压得住 */ --sig-text: var(--mint-ink); /* 文本 LLM */ --sig-image: var(--rose-shade); /* 图像 AI */ --sig-video: var(--mint-shade); /* 视频 */ --sig-audio: var(--gold-ink); /* 音频 */ --sig-vision: var(--mint-deep); /* 实时视觉 */ --sig-infer: var(--rose-deep); /* 本地推理 */ --sig-media: var(--gold-deep); /* 生成 · 媒体 */ --sig-line: var(--alpha-warm-115); /* 结构线：比正文轻，比底色重 */ /* --------------------------------------------------------------------- 06b · 作品集补充圆角 reagle 的 --r-xs 是 5px（芯片），作品集的插图卡需要更方的一档。 --------------------------------------------------------------------- */ --r-2xs: var(--u-3); /* --------------------------------------------------------------------- 07b · 作品集补充字号 首页主标题比后台的 title 大得多，单列两个 clamp；两者都落在 --u-* 上， 所以它们与间距仍然同源。 --------------------------------------------------------------------- */ --text-hero: clamp(var(--u-34), 4.6vw, var(--u-58)); --text-h2: clamp(var(--u-23), 2.6vw, var(--u-34)); --text-lede: clamp(var(--u-13_5), 1.15vw, var(--u-16)); /* --------------------------------------------------------------------- 08b · 作品集补充动效 树图逐笔生长、流水线信号巡回这两处需要更长的时长，单独开档。 --------------------------------------------------------------------- */ --dur-450: .45s; --dur-560: .56s; --dur-900: .9s; --dur-1400: 1.4s; --ease-in-out: cubic-bezier(.65,0,.35,1); --fx-backdrop: blur(var(--u-6)); /* 弹窗遮罩的毛玻璃 */ /* --------------------------------------------------------------------- 05f · 表面别名 portfolio 的组件层用这三个更短的名字描述「线 / 面」，仍然指回 L1。 --------------------------------------------------------------------- */ --line: var(--alpha-warm-115); --line-2: var(--alpha-white-090); --surface: var(--card); --surface-2: var(--raised); } /* ============================================================================ 用法速查 —— 其它项目复制这一份文件即可拿到整套外观 ---------------------------------------------------------------------------- 1) 拿外观（不改任何组件 CSS）： 然后用 L3 名字写组件： .surface{ background:var(--panel); border-radius:var(--r-xl); box-shadow:var(--shadow-panel); color:var(--ink); font:var(--fw-regular) var(--text-14)/var(--lh-snug) var(--font-sans); transition:background var(--dur-180) var(--ease); } .surface--inset{ background:var(--main); box-shadow:var(--elev-main); } .tag--live{ color:var(--sig-mint-ink); background:var(--alpha-mint-160); } /* 状态胶囊：几何全部来自 --chip-*，组件只决定色素 */ .chip{ height:var(--chip-h); min-width:var(--chip-w); padding:0 var(--chip-pad); gap:var(--chip-gap); border-radius:var(--chip-r); font-size:var(--chip-fs); } .chip i{ width:var(--chip-dot); height:var(--chip-dot); } 2) 换表层色（推荐路径，只动 L2 的十几个名字）： 新建 my-theme.css（必须排在 tokens.css 之后）： :root{ --panel:var(--gray-155); --main:var(--gray-142); --canvas-top:var(--gray-157); --canvas-bot:var(--gray-122); --rail-b:var(--cool-36); --ink:var(--gray-29); } L3 的阴影、rim、材质是顺着 L2→L1 引用链算出来的，会整片跟着走。 3) 只在确定要改「雕刻」时才碰 L1 / L3： L1 的一个灰阶值被 20+ 处材质引用，单改它会让相邻表面的关系失衡； L3（--elev-* / --type-* / --fx-*）是逐组件的外形参数，改哪个只影响哪个。 4) portfolio-site 用的是同一份文件，只多出 05e（--sig-* 池色）/ 07b （--text-hero · --text-h2）/ 05f（--line · --surface）三组别名。 5) 唯一不能 token 化的是 @media 断点（规范禁止在条件里用 var()）， 以及 JS 里按行高算出来的运行时坐标（如滑钮 top）—— 它们是数据不是设计值。 ============================================================================ */