/* ============================================================================ soft.css —— 「史锦泽的软件」站点唯一样式真源 被 /software.html（总览）与 /software/copy.html /tool.html /android.html（详情）共用。 ── 设计决定：亮色是默认，暗色是【用户自己选】的（2026-08-07 改）─────────────── ⚠ 这一段原来写的是「本站点只做亮色，本文件没有任何 [data-theme] 选择器」。需求变了， 但**变的不是那条判断，是那条判断的前提**，别把两件事混成一件： 当初被否掉的是「一进来就被强制成看不清的暗色」（用户原话：「不要暗黑色系，看不清」）， 现在要的是「用户自己能切，默认仍是亮色」。所以下面三条只有第 2 条改了： 1. 本站点【仍然不引】 /js/theme.js，也不引 /css/xiliu-tokens.css。theme.js 的默认值写死是 'dark'（读 cookie xiliu_theme，读不到就 dark），引进来 = 首次访问的人直接被扔进暗色， 正是当初被否掉的那个行为；而且它用的是全局变量名，和本站点的 --s-/--app- 两套会打架。 ⚠ 2026-08-07 定案：本站点【没有自己的主题开关】。当天加过一颗（存 localStorage `sjz_soft_theme`），但本站被首页当内嵌页签打开后同屏出现两颗开关、各管各的值， 按哪个都只对一半，于是撤掉 —— 主题完全跟随全站 cookie `xiliu_theme`（首页那颗浮钮）， 读不到按 dark；soft.js 里只剩「跟随」不再有「切换」。 注意这一条与上面「默认亮色」的旧结论**已经不一致**：现在首访跟的是首页，而首页默认暗色。 2. 本文件现在有 [data-theme="dark"] 选择器了，配色部分全部集中在第 17 节（页尾），**上面的 1~15 节一个字节都没动** —— 亮色外观与改动前完全一致，这是硬回归底线。 暗色是「加一层覆盖」而不是「重写样式」：本文件 188 处 var(--) 早就把颜色全收进了 --s-* / --app-* 变量，所以只要换变量值 + 补十来条写死颜色的规则（见第 17 节的清单）。 3. 所有 CSS 变量一律加 `--s-` / `--app-` 前缀，与 xiliu-tokens.css 的 --bg/--text/--accent 等全局变量名【零交集】。theme.js 是把那 22 个变量以 inline style 打在 上的， 命名不撞车 = 就算被打上也污染不到本站点。 ── 炫酷靠什么 ──────────────────────────────────────────────────────────── 浅色玻璃拟态 + 大面积低饱和 aurora 光晕 + 极淡网格 + 高饱和渐变只用在按钮/徽标/标题局部 + 滚动进场 + hover 抬升与光泽扫过。不靠「把背景变暗」。 ── 对比度（逐个按 WCAG 算过，全部 ≥ 4.5:1 on --s-bg #f7f8fc，含最小号的微标签）─── （下面每个数字给的是【最差情况】：按 .soft-bg 底渐变最深处 #eef2fa 算，不是按 --s-bg #f7f8fc） --s-text #1b2436 = 13.84 --s-text-2 #55617a = 5.54 --s-text-3 #5f6a82 = 4.84 --s-text-4 #616a80 = 4.82 强调文字 --app-ink：copy #4338ca = 7.04 / tool #0e7490 = 4.78 / android #047857 = 4.89 idea #9c4f08 = 5.29 / vscode #0b5f9e = 5.95 / obsidian #9a1aa8 = 6.06 白字按钮渐变端点 --app-btn-a/b 现在是【六套皮肤 12 个色】（2026-08-06 加了三套插件皮肤）： 最低 4.99（vscode #0d74b8）、最高 6.82（vscode #1257b8），全部 ≥4.5:1 on white。 ⚠ 这两行原来写的是「六个色最低 5.35，最高 8.00」——那个 8.00 是 android 的旧末端 #045c46， 它早就因为「太深、看不出渐变」被换成 #0b6f77 了，数字一直没跟着改。教训：改颜色必须回来改这里， 不然后面的人会照着一个不存在的值去校准。 警示条 .notice--warn 正文 #6b4108 on #fff6e8 = 8.22，其中的 走 --s-warn #8a4a06 = 6.40 ── 对比度（暗色，2026-08-07 新增；口径与上面那段【完全一致】，都是现算的 WCAG 相对亮度）── （下面每个数字同样是【最差情况】。暗色的「最差」和亮色反过来 —— 亮色要防「底太深」， 暗色要防「底太亮」，所以基准取的是【全站最亮的那一块底】： tool 皮肤详情页 HERO 处，= .soft-bg 最亮那一站 #141b2b + 该皮肤 aura 一层 + .hero__halo 两层 叠出来的 #11394c。玻璃卡内部反而更暗（#203343 一带），数字只会更好看。） --s-text #e8edf7 = 10.44 --s-text-2 #b6c1d6 = 6.76 --s-text-3 #a4b0c6 = 5.61 --s-text-4 #a2aec4 = 5.48 强调文字 --app-ink（各按【本皮肤】最亮的底算，另给药丸底 --app-tint 上的复核值）： copy #adb0ff 6.39 / on tint 5.41 tool #4fd3e8 6.90 / on tint 5.23 android #34d9a0 6.90 / on tint 5.32 idea #f3ba63 7.50 / on tint 5.52 vscode #6ac2f7 6.30 / on tint 4.99 obsidian #ec8ef5 6.43 / on tint 5.64 标题渐变字 --app-1 / --app-2（走大字号 3:1 那一档，口径同亮色那段；实测全部 ≥4.42， 顺带把亮色遗留的「tool 2.43 / android 2.54 / android --app-2 1.92 不达标」在暗色下一并解决了）： --app-1 copy 4.42 / tool 6.78 / android 6.51 / idea 6.24 / vscode 5.38 / obsidian 4.94 --app-2 copy 5.25 / tool 5.05 / android 8.21 / idea 5.55 / vscode 4.72 / obsidian 6.60 白字按钮渐变端点 --app-btn-a/b：**暗色下【不改值】，12 个色原样沿用亮色**，所以还是 最低 4.99 / 最高 6.82。理由见第 17 节，一句话：这两个色是「白字压在上面」， 它的对比度只和自己有关、和页面底色无关；一改亮就把白字推到 4.5 以下 = 按钮反而先坏。 警示条 .notice--warn 暗色正文 #f3d7ab on 该条自己的底 = 8.03~8.42（六套皮肤全测）， 其中 走暗色 --s-warn #ffc46b = 7.10~7.48 语义色 --s-ok #3ddc9a = 6.95、--s-danger #ff8a80 = 5.37（均 on 最亮底） 禁用按钮 rgba(255,255,255,.06) 底上的 --s-text-3 = 4.86~5.28（六套皮肤） 图上角标 .shot__corner / .is-zoomable::after：底改成 rgba(11,16,27,.86)， 按「压在纯白截图上」这一最差情况算，--s-text-2 = 7.18 ⚠ 改暗色任何一个颜色，都必须回来把这段数字重算重写 —— 亮色那段上面已经写过一次 「改颜色必须回来改这里」的教训（android 的 8.00 挂了很久），别再犯第二遍。 ============================================================================ */ /* ========================================================================== 1. 变量层 ========================================================================== */ :root{ /* —— 中性色阶 —— */ --s-bg: #f7f8fc; /* 页面底色 */ --s-bg-2: #eef1f8; /* 次级底色（大区块交替） */ --s-white: #ffffff; --s-surface: rgba(255,255,255,.72); /* 玻璃卡片底 */ --s-surface-2: rgba(255,255,255,.55); /* 更透的玻璃 */ --s-surface-3: rgba(27,36,54,.035); /* 内嵌浅槽（占位、代码块） */ --s-text: #1b2436; /* 正文/标题 */ --s-text-2: #55617a; /* 次级正文 */ /* ⚠ 这两档一定要按【页面最深的那块底】算，不是按 --s-bg 算： .soft-bg 的底渐变最深处是 #eef2fa（页面下半部/页脚那一带），而页脚正文与 .app-card__note / .shot__ph-size 都用这两个色，直接压在那块底上（不在玻璃卡里）。 旧值 #64708a / #666f85 在 #f7f8fc 上是 4.68/4.74 达标，但在 #eef2fa 上只有 4.43/4.48， 页脚那一截其实是不合格的。压深到下面这组，最差处也 ≥4.8。 */ --s-text-3: #5f6a82; /* 元信息（on #eef2fa = 4.84，on #fff = 5.34） */ --s-text-4: #616a80; /* 微标签（英文 eyebrow / 图位尺寸提示）on #eef2fa = 4.82 */ --s-border: rgba(27,36,54,.09); --s-border-2: rgba(27,36,54,.16); --s-hairline: rgba(255,255,255,.85); /* 玻璃上沿的 1px 亮边 */ /* —— 语义色 —— */ /* ⚠ --s-warn 是【文字色】，不是装饰色：.notice--warn b 与 .app-card__note b 都用它， 而那两处正是安卓「换了签名，覆盖安装会失败」那条最要紧的提示。 原值 #b4620a 在警示条底 #fff6e8 上只有 4.18、在白卡上 4.41，双双不到 4.5:1 （文件头注释里算的 8.22 是 .notice--warn 的【正文】色 #6b4108，不是 b 的色，别混）。 压深到 #8a4a06：on #fff6e8 = 6.40、on 白 = 6.75、on #eef2fa = 6.11。 */ --s-warn: #8a4a06; --s-warn-bg: #fff6e8; --s-warn-bd: rgba(180,98,10,.26); --s-ok: #0f7a4f; --s-danger: #b42318; /* —— 圆角刻度 —— */ --s-r-xs: 8px; --s-r-sm: 12px; --s-r: 18px; --s-r-lg: 24px; --s-r-xl: 30px; --s-r-pill: 999px; /* —— 阴影刻度（柔和多层，白底上不发灰）—— */ --s-sh-1: 0 1px 2px rgba(27,44,80,.05), 0 4px 12px rgba(27,44,80,.05); --s-sh-2: 0 2px 6px rgba(27,44,80,.06), 0 12px 28px rgba(27,44,80,.08); --s-sh-3: 0 4px 10px rgba(27,44,80,.07), 0 24px 56px rgba(27,44,80,.12); --s-sh-in: inset 0 1px 0 var(--s-hairline); /* —— 间距刻度 —— */ --s-1: 6px; --s-2: 10px; --s-3: 14px; --s-4: 20px; --s-5: 28px; --s-6: 40px; --s-7: 56px; --s-8: 80px; /* —— 字体 —— */ --s-sans: "Segoe UI Variable Text","Segoe UI","PingFang SC","Microsoft YaHei", -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif; --s-mono: "SF Mono",ui-monospace,"JetBrains Mono","Cascadia Mono",Consolas,monospace; /* —— 布局 —— */ --s-maxw: 1180px; --s-pad: 30px; /* —— 默认皮肤（站点级/总览页用的中性蓝紫，等同 copy 皮肤的中性版）—— 每个 App 的详情页在 或某个容器上加 data-app="copy|tool|android" 覆盖 */ --app-1: #6366f1; /* 品牌主色（鲜艳，用于光晕/描边/图标底板） */ --app-2: #a855f7; /* 品牌副色 */ --app-ink: #4338ca; /* 亮底上的强调文字色，必须 ≥4.5:1 on white */ --app-btn-a: #4f46e5; /* 主按钮渐变起（白字 ≥4.5:1） */ --app-btn-b: #7c3aed; /* 主按钮渐变止（白字 ≥4.5:1） */ --app-tint: rgba(99,102,241,.10); /* 极淡底 */ --app-tint-2:rgba(99,102,241,.18); --app-bd: rgba(99,102,241,.30); --app-glow: rgba(99,102,241,.34); /* 按钮外发光 */ } /* —— 六套皮肤：同一套组件，换一行 data-app 就换一身衣服 —— 前 3 套是 App（copy / tool / android），后 3 套是 IDE / 笔记插件（idea / vscode / obsidian）。 用法： 或
…
总览页故意把 data-app 加在【单张卡片】上而不是 上 —— 因为下面有 `[data-app] .soft-bg{}` 这条规则，加在 上会把整页背景光晕也染成该皮肤的色， 总览页六张卡各一个色，整页背景必须保持中性蓝紫，否则以最后一个生效的为准，乱套。 */ [data-app="copy"]{ /* 剪贴板 = 蓝紫系 */ --app-1:#6366f1; --app-2:#a855f7; --app-ink:#4338ca; --app-btn-a:#4f46e5; --app-btn-b:#7c3aed; --app-tint:rgba(99,102,241,.10); --app-tint-2:rgba(99,102,241,.18); --app-bd:rgba(99,102,241,.30); --app-glow:rgba(99,102,241,.34); } [data-app="tool"]{ /* 工具箱 = 靛青系 */ --app-1:#06b6d4; --app-2:#3b82f6; --app-ink:#0e7490; --app-btn-a:#0e7490; --app-btn-b:#1d4ed8; --app-tint:rgba(6,182,212,.10); --app-tint-2:rgba(6,182,212,.20); --app-bd:rgba(14,116,144,.30); --app-glow:rgba(13,148,180,.32); } [data-app="android"]{ /* 安卓 = 翠绿系（按钮渐变刻意压深两档，白字才够 4.5:1）*/ --app-1:#10b981; --app-2:#34d399; --app-ink:#047857; /* 按钮渐变的两个端点要和另外两套「同一个量级」，否则三颗下载按钮并排时安卓那颗 又暗又平，一眼就出戏。校准口径（白字对比度 / 色相行程，全部现算，别拍脑袋填）： copy #4f46e5→#7c3aed 6.29:1 → 5.70:1，色相 243°→262°（19°） tool #0e7490→#1d4ed8 5.36:1 → 6.70:1，色相 193°→224°（31°） android(旧) #067a55→#045c46 5.35:1 → 8.00:1，色相 161°→165°（4°） ↑ 末端掉到 8:1 = 比谁都深，两端又几乎同色 = 看不出渐变 → 「一坨深绿」 android(新) #067a55→#0b6f77 5.35:1 → 5.91:1，色相 161°→184°（23°） 起点原样保留（绿色高饱和时想压到 4.5:1 就只能这么深，再亮白字就不合格了）， 只把末端从「更深的绿」换成「同亮度的深青」——亮度落差、色相行程都对齐了另外两套。 ⚠ 改这两个值必须重算白字对比度，两端都得 ≥4.5:1（按钮文案是 14.5px 粗体，非大字号）。*/ --app-btn-a:#067a55; --app-btn-b:#0b6f77; --app-tint:rgba(16,185,129,.11); --app-tint-2:rgba(16,185,129,.20); --app-bd:rgba(4,120,87,.30); --app-glow:rgba(6,122,85,.32); } /* —— 下面三套是 IDE / 笔记插件的皮肤（2026-08-06 新增）—————————————————————— 所有数字都是用 node 现算的 WCAG 相对亮度对比度（不是拍脑袋估的），口径与上面三套完全一致： · --app-btn-a / --app-btn-b 两端【都】要对白字 ≥4.5:1 （按钮文案 .dl-btn .os-txt b 是 14.5~15.5px 粗体，够不上 WCAG 的「大字号」豁免， 所以走 4.5:1 这一档，不是 3:1） · --app-ink 是亮底上的强调文字色（.chip--accent / .badge / .eyebrow / .app-card__tag）， 白底 ≥4.5:1，同时按页面最深的底 #eef2fa 和本皮肤 --app-tint 各复核一遍 · --app-1 / --app-2 【不是纯装饰色，它们要当标题正文用】——这一条 2026-08-06 改过， 原文写的是「只出现在装饰里，所以允许鲜亮」，是错的，别再照那句去挑色： 纯装饰的只有 .eyebrow 的 dot（--app-1）和 .app-card__logo 底板（--app-1 → --app-btn-b）； 但 .grad-text 也吃这两个色 —— `linear-gradient(112deg,--app-btn-a 0%,--app-1 46%,--app-2 100%)`， 而 .grad-text 用在 .h1 / .h2 里被高亮的那一段【标题正文】（总览页 + 六个详情页， 七个 html 每页都有 ），中间那一站正好落在字身上。同理 .stat--big b 是 --app-btn-a → --app-2 的渐变字。 所以口径是：--app-1 / --app-2 走【大字号 3:1】这一档（.h1 是 clamp(34px,5.2vw,60px)、 .h2 是 clamp(22px,2.6vw,30px)、.stat--big b 是 20px/750，都够得上 WCAG 的大字号豁免）， 不是 4.5:1，也不是「装饰随便亮」。 ⚠ 六套里【只有新加的 idea / vscode 两套按这个口径校准过】。老三套 --app-1 对白底实测 copy #6366f1 = 4.47（达标）、tool #06b6d4 = 2.43、android #10b981 = 2.54（两套不达标）， --app-2 里 android #34d399 = 1.92（不达标）—— 这几笔是历史遗留，本次【故意不动】： 它们是三个已上线页面的标题观感，改了就是动线上视觉，不在这次修插件页的范围内。 记在这里是为了以后有人专门做「老三套配色返工」时不用再重新测一遍。 · 「一家人但一眼分得清」怎么验的：把六套皮肤的 --app-1/--app-btn-a/--app-btn-b 两两算 CIELAB ΔE，新皮肤对老三套（copy/tool/android）的【最小】ΔE 是 idea 67.9（idea #9a6207 ↔ android #067a55）、vscode 25.5（vscode #0d74b8 ↔ tool #0e7490）、 obsidian 27.2（obsidian #c026d3 ↔ copy #7c3aed）。 作为参照：copy 自己两个端点之间的 ΔE 才 14.4（那是一条正常渐变），所以 25 已经是 「明显不是同一个色」的量级了。 （这三个数 2026-08-06 改完 idea / vscode 的 --app-1 之后重算过一遍：三组最小值都落在 --app-btn-a/b 上、不涉及 --app-1，所以数值本身没被这次改动影响；原注释写的 68/26/27 是四舍五入过的，这里换成实测原值，免得下次有人复算时以为对不上。） */ [data-app="idea"]{ /* IDEA 书签插件 = 琥珀 / 焦橙系。六套里【只有这一套是暖色】，扫一眼就能从一排卡里挑出来。 */ /* --app-1 原来是 amber-500 #f59e0b，2026-08-06 压深到 #c87608，理由见上面那条口径说明： 它是 .grad-text 的中间站 = 标题正文，走大字号 3:1 那一档，而 #f59e0b 对白底只有 2.15、 对页面最深的底 #eef2fa 只有 1.91 —— H1 的中段直接糊在背景里。 实测（node 现算，白底 / #eef2fa 两个口径都过 3:1）： #f59e0b 2.15 / 1.91 ✗ ← 旧值 #d97706 3.19 / 2.84 △ ← amber-600，白底刚过线，但页面下半屏那块 #eef2fa 上还是 2.84 #c87608 3.47 / 3.09 ✓ ← 取它 #b45309 5.02 / 4.48 ✗ ← amber-700 太深：它和 --app-btn-a #9a6207（5.09）亮度几乎重合， 「鲜色装饰层」和「按钮底」变成同一个深浅，光晕/图标底板就没层次了 为什么按 #eef2fa 而不是纯白算：.soft-bg 是 position:fixed 的整屏渐变，最深处 #eef2fa 永远 压在视口底部，往下滚时 .h2 就落在那一块上（文件头 --s-text-3/-4 那两条也是这个口径）。 挑深浅之外还确认了三件事：① 仍然是高饱和琥珀（hue 34°、sat 0.96），当光晕/图标底板够鲜； ② 和 --app-2 #ea580c 的 CIELAB ΔE = 28.2、和 --app-btn-a #9a6207 = 17.5，.grad-text 三站 层次没塌（对照：copy 自己两个端点之间 ΔE 才 14）；③ 对老三套 --app-1 的最小 ΔE = 90.5， 仍然是「一眼就能从一排卡里挑出来的那个暖色」。 */ --app-1:#c87608; --app-2:#ea580c; --app-ink:#9c4f08; /* 校准（白字对比度 / 色相行程），口径同上面 android 那段： idea #9a6207→#b03a12 5.09:1 → 6.07:1，色相 37°→15°（22°） 对照：copy 6.29→5.70（19°）/ tool 5.36→6.70（31°）/ android 5.35→5.91（23°）——同一量级。 ⚠ 暖色想让白字达标，只能压到「焦糖 / 砖红」这个深度：amber-500 #f59e0b 对白字只有 2.15:1、orange-600 #ea580c 也才 3.56:1，直接拿去当按钮底就是【不合格】。 所以按钮底另配 #9a6207 / #b03a12 这两个深色，--app-1/--app-2 走的是另一档 （大字号 3:1，因为 .grad-text 会把它们画在标题字上，不是纯装饰 —— 详见上面那条口径说明）。 别看着「橙色不够亮」就把 --app-btn-a/b 调回鲜橙。 --app-ink #9c4f08：on 白 5.94、on 页脚最深底 #eef2fa 5.29、on 本皮肤 --app-tint 5.50。 ⚠ 它和全局的 --s-warn #8a4a06 长得像，但不是一回事：--s-warn 是【语义色】（警示条里的 、.app-card__note b，安卓那条「换签名会装不上」就靠它），这里是本皮肤的强调色。 两者别互相替代，改一个不要顺手改另一个。 */ --app-btn-a:#9a6207; --app-btn-b:#b03a12; /* rgba(245,158,11,…) 就是旧的 --app-1 #f59e0b，【故意】留在这里没跟着压深： 这两个只当【底】用（.soft-bg / .hero__halo 的光晕、.shot 占位底、.eyebrow/.chip--accent 等药丸的浅底），10%~20% 的透明度铺在白底上，正需要那支最亮的琥珀托住整页暖调； 换成 #c87608 会让页底整体发脏。压在 --app-tint 上的文字一律走 --app-ink #9c4f08， 那个色已经按 on --app-tint = 5.50 复核过（见下面），所以底色亮一点不影响可读性。 */ --app-tint:rgba(245,158,11,.10); --app-tint-2:rgba(245,158,11,.20); --app-bd:rgba(154,98,7,.30); --app-glow:rgba(180,83,9,.34); } [data-app="vscode"]{ /* VS Code 插件 = 天蓝 azure（微软那支标志蓝的方向），全程不带一丝青绿，好和 tool 分开 */ /* --app-1 原来直接用了 VS Code 那支标志蓝 #1f9cf0，2026-08-06 压深到 #1387d4： 同上，它是 .grad-text 的中间站 = 标题正文，走大字号 3:1；#1f9cf0 白底 2.97 / #eef2fa 2.65， 两个口径都差一口气。新值 #1387d4 = 白底 3.86 / #eef2fa 3.44，hue 仍是 204°、sat 0.91， 还是那支天蓝，没往青（tool）也没往紫（copy）挪一度。 ⚠ 代价要说清楚，别以为是没调好：#1387d4 和 --app-2 #0e8fdb 的 ΔE 只剩 3.5（旧值 #1f9cf0 对它是 6.3），.grad-text 的层次现在主要靠 --app-btn-a #0d74b8 → --app-1 那一段（ΔE 8.5）。 这不是能挑更好值的问题，是这条蓝通道被挤死了：任何满足 3:1 的蓝，亮度上不是贴着 --app-btn-a（4.99）就是贴着 --app-2（3.52），中间没有空位。好处是三站变成单调的 深→浅（4.99 → 3.86 → 3.52），比原来「深→亮→中」的折返更顺。 真要把层次做回来，得连 --app-2 一起重排，那会动到已经校准过的按钮渐变，不在本次范围。 另：.app-card__logo 底板是 linear-gradient(--app-1,--app-btn-b) 上盖 38px 白色 SVG， --app-1 压深之后白图标反而更清楚（白对 #1387d4 = 3.86，旧值只有 2.97）。 */ --app-1:#1387d4; --app-2:#0e8fdb; --app-ink:#0b5f9e; /* 校准：vscode #0d74b8→#1257b8 4.99:1 → 6.82:1，色相 204°→215°（11°） ⚠ 这套的色相行程【故意】只有 11°，不是偷懒 —— 蓝这一段左右两边都被占了： 再往青走就撞 tool 的起点 #0e7490（193°），再往紫走就撞 copy 的起点 #4f46e5（243°）。 实测把末端挪到 226° 的 #2a4fcc，它和 tool 末端 #1d4ed8 的 CIELAB ΔE 只剩 8 （≈ 肉眼同一个色），那才是真正的「分不清」。 所以这套改用【明度行程】撑渐变：4.99→6.82 是六套里跨度最大的一组（copy 才 6.29→5.70）， 看得出是渐变，又不去踩邻居。实测最小 ΔE：对 tool = 26、对 copy = 28，都够认。 --app-ink #0b5f9e：on 白 6.68、on #eef2fa 5.95、on 本皮肤 --app-tint 6.03。 ⚠ VS Code 那支标志蓝 #1f9cf0 对白字只有 2.97:1，按钮底、强调文字色都轮不到它； 2026-08-06 起连 --app-1 也不用它了（--app-1 会被 .grad-text 画在标题上，见上一段）。 它现在只活在本皮肤的 --app-tint（rgba(31,156,240,.10)）与 --app-tint-2（同色 .19）里 —— 那两个只当【底】用（光晕、药丸浅底、图位底），压在上面的文字一律是 --app-ink #0b5f9e （on --app-tint = 6.03，见下面），所以底再亮也不牵扯文字对比度，这才是它合适的位置。 （--app-bd / --app-glow 用的是另一支 rgba(13,116,184,…)，也就是 --app-btn-a #0d74b8，别记混。） */ --app-btn-a:#0d74b8; --app-btn-b:#1257b8; --app-tint:rgba(31,156,240,.10); --app-tint-2:rgba(31,156,240,.19); --app-bd:rgba(13,116,184,.30); --app-glow:rgba(13,116,184,.32); } [data-app="obsidian"]{ /* Obsidian 插件 = 紫红（洋红宝石）系，刻意从 copy 的蓝紫再往品红推一段 */ --app-1:#c026d3; --app-2:#d946ef; --app-ink:#9a1aa8; /* 校准：obsidian #a21caf→#b52490 6.32:1 → 5.80:1，色相 295°→315°（20°） ⚠ Obsidian 官方那支紫（#7c3aed 一带）【正好就是】copy 的按钮末端 #7c3aed，照搬 = 两张卡穿同一身衣服。所以整体往品红推了约 50°：copy 是 243°→262°（蓝紫）， 这套是 295°→315°（紫红），对 copy 各色的最小 ΔE = 27，并排放能分清。 --app-ink #9a1aa8：on 白 6.80、on #eef2fa 6.06、on 本皮肤 --app-tint 5.86。 --app-1 #c026d3 对白字 4.71:1（够 4.5），但它的用途只有装饰，别当正文色使。 */ --app-btn-a:#a21caf; --app-btn-b:#b52490; --app-tint:rgba(192,38,211,.10); --app-tint-2:rgba(192,38,211,.19); --app-bd:rgba(162,28,175,.30); --app-glow:rgba(162,28,175,.32); } /* ========================================================================== 2. 基础 ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--s-sans); color:var(--s-text); background:var(--s-bg); line-height:1.6; overflow-x:hidden; /* body 永不横向滚动 */ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } h1,h2,h3,h4,p,ul,ol,figure{margin:0} ul,ol{padding:0;list-style:none} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} b,strong{font-weight:700} code{font-family:var(--s-mono);font-size:.92em} :focus-visible{outline:2px solid var(--app-btn-a);outline-offset:3px;border-radius:6px} /* 宽内容（表格/代码块/长清单）必须自己横向滚动，别把 body 顶宽 */ .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ========================================================================== 3. 背景层：aurora 光晕 + 极淡网格（亮色，绝不整屏深色） 直接在 里放： ========================================================================== */ .soft-bg{ position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(46% 38% at 82% -4%, rgba(99,102,241,.20), transparent 62%), radial-gradient(42% 34% at 8% 6%, rgba(168,85,247,.15), transparent 64%), radial-gradient(50% 36% at 50% 42%, rgba(56,189,248,.12), transparent 66%), radial-gradient(56% 40% at 18% 88%, rgba(16,185,129,.12), transparent 64%), radial-gradient(48% 34% at 92% 74%, rgba(244,114,182,.10), transparent 62%), linear-gradient(178deg,#fbfcff 0%,#f5f7fd 46%,#eef2fa 100%); } /* 详情页可选：让光晕跟随当前 App 主题色（在 [data-app] 容器下自动生效） */ [data-app] .soft-bg{ background: radial-gradient(46% 38% at 82% -4%, var(--app-tint-2), transparent 62%), radial-gradient(42% 34% at 8% 6%, var(--app-tint), transparent 64%), radial-gradient(50% 36% at 50% 42%, rgba(56,189,248,.10), transparent 66%), radial-gradient(56% 40% at 16% 92%, var(--app-tint), transparent 64%), linear-gradient(178deg,#fbfcff 0%,#f5f7fd 46%,#eef2fa 100%); } .soft-grid{ position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.7; background-image: linear-gradient(rgba(27,44,80,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(27,44,80,.045) 1px,transparent 1px); background-size:52px 52px; -webkit-mask-image:radial-gradient(78% 62% at 50% 0%,#000 0%,transparent 78%); mask-image:radial-gradient(78% 62% at 50% 0%,#000 0%,transparent 78%); } /* ========================================================================== 4. 布局骨架 ========================================================================== */ .page{position:relative;z-index:1;max-width:var(--s-maxw);margin:0 auto;padding:0 var(--s-pad) var(--s-8)} .page--narrow{max-width:980px} .sec{margin-top:var(--s-8)} .sec--tight{margin-top:var(--s-7)} /* —— 顶部返回条（详情页用；总览页也可放一个回首页的）—— */ .snav{ position:sticky;top:0;z-index:20; display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap; padding:12px 0;margin-bottom:4px; } /* 顶栏的渐隐底【铺满视口宽度】，不能画在 .snav 自己身上。 ⚠ 2026-08-07 修：原来 background 直接写在 .snav 上，而 .snav 在 .page 里， .page 有 max-width 且居中 —— 于是这块底色只有内容区那么宽，左右两侧露出页面渐变， 看起来就是「一块白矩形浮在带光晕的背景上」，边界清清楚楚。 再加上 .92 的不透明度把 .soft-bg 顶部那几团 radial 光斑压掉，矩形内部纯白、 外面却是淡紫淡蓝，对比更扎眼。 做法：背景移到 ::before，用 left:50% + width:100vw + margin-left:-50vw 顶出容器。 body 本来就是 overflow-x:hidden（见第 1 节），100vw 不会带出横向滚动条。 */ .snav::before{ content:""; position:absolute;inset:0; left:50%;width:100vw;margin-left:-50vw; background:linear-gradient(180deg,rgba(250,251,255,.92),rgba(250,251,255,.62) 70%,transparent); -webkit-backdrop-filter:saturate(160%) blur(10px); backdrop-filter:saturate(160%) blur(10px); pointer-events:none;z-index:-1; } .snav__back{ display:inline-flex;align-items:center;gap:7px; padding:8px 15px;border-radius:var(--s-r-pill); background:var(--s-surface);border:1px solid var(--s-border); box-shadow:var(--s-sh-1),var(--s-sh-in); font-size:13px;font-weight:650;color:var(--s-text-2); transition:transform .16s ease,color .16s,border-color .16s,box-shadow .16s; } .snav__back:hover{transform:translateX(-2px);color:var(--app-ink);border-color:var(--app-bd);box-shadow:var(--s-sh-2)} .snav__crumb{font-size:12.5px;color:var(--s-text-3);letter-spacing:.3px} .snav__crumb b{color:var(--s-text);font-weight:700} .snav__spacer{margin-left:auto} /* —— 亮 / 暗主题切换按钮（七个页面都有，一律放在 .snav__spacer 之后 = 顶栏最右）—————— 长相刻意照抄 .snav__back（同样的药丸 + 玻璃底 + hover 抬升），两颗并排像一套东西。 ⚠ 图标与文案的切换【纯靠 CSS 的 [data-theme] 选择器】，不靠 JS 改 innerHTML： 每个页面 里那段内联脚本在首屏渲染前就把 data-theme 打好了，所以按钮第一帧 就是对的。若改成 JS 写文案，soft.js 在 body 末尾才执行 —— 会先画一个错的再被纠正， 和「防闪烁」是同一个坑，白做。 ⚠ 文案给的是【点下去会变成什么】（亮色下显示「暗色」），不是当前状态。 aria-label 写在