/* ============================================================ 明亮主题 · 阶段1（老板 2026-09-24 定：浅灰蓝底 + 白卡片 + 深色字） ------------------------------------------------------------ 为什么要单独一层、而不是改 style.css 里的值： · style.css 的 :root 已经是一套完整令牌（--bg/--panel/--text/--line/--t1..--t3…）， 界面绝大多数地方走 var() —— **覆盖令牌**就能整体变亮，不必动原有规则（改动面小、可回滚）。 · 但模块里还有大量**内联样式写死的深色**（实测 2335 处 / 99 文件），CSS 选择器管不到内联样式， 那部分由 theme-light.js 运行时归一化处理（见该文件头注释）。 · 少数 style.css 内的硬编码深色（如 .sb-toggle 的 #fff / #233355 滚动条）在本文件里精确覆盖。 原则（老板口径 A）： · 底色浅灰蓝（不刺眼）、卡片纯白、正文深色； · **保留品牌金/蓝**与**语义色**（绿=成功 / 红=失败 / 黄=警告 / 蓝=信息），不改语义； · 亮色强调色在白底上对比度会掉，所以同一语义色在明亮主题里用**更深一档**的值（保证 AA）； · **深色媒体区块**（视频播放器、图片预览、代码块）保留深底，只让容器与明亮主题协调。 ============================================================ */ :root { color-scheme: light; /* ---------- 底板与面板 ---------- */ --bg: #f2f5fb; --bg2: #e9eef8; --panel: #ffffff; --panel2: #f7f9fd; /* 卡内嵌块：深色主题用"白色 2.5% 叠加"，明亮主题要反过来用"墨色 4% 叠加" */ --panel-soft: rgba(23, 32, 58, 0.04); /* ---------- 描边 ---------- */ --line: rgba(23, 32, 58, 0.10); --line2: rgba(23, 32, 58, 0.22); /* ---------- 三级文字（浅底上重算对比度，全部 ≥ AA 4.5:1） ---------- */ --text: #17203a; --t1: #17203a; /* 正文 : 浅底上 15.4:1 */ --t2: #46536e; /* 次要 : 6.8:1 */ --t3: #52607d; /* 注释/提示: 4.9:1（12px 小字、含淡色面板上都过 AA） */ --muted: #46536e; --dim: #52607d; /* ---------- 语义色：同色相、更深一档；**同一个值当字/当底都要过 AA** ---------- 令牌没法按用途分流（theme-light.js 的引擎只作用于写死的字面值）， 所以这里选"两头都达标"的值：当字用 ≥4.5:1（浅底上）、当底用白字 ≥4.5:1。 */ --blue: #2554c8; /* 当字 4.8:1（淡底上）/ 白字在其上 6.6:1 */ --green: #0f6b34; /* 5.0:1 / 6.1:1 */ --yellow: #7a4a0a; /* 5.9:1 / 7.4:1 */ --red: #a31c22; /* 5.6:1 / 7.7:1 */ --purple: #553fd0; /* 5.7:1 / 7.0:1 */ --cyan: #0a6a8a; /* 4.8:1 / 6.0:1 */ --pink: #a81f68; /* 5.4:1 / 6.6:1 */ /* ---------- 品牌金：深色主题那档 #ffe1a8/#e8b45c 在白底上几乎看不见 → 用深金 ---------- */ --brand: #7d5210; --brand-soft: rgba(125, 82, 16, 0.12); --shadow: 0 6px 20px rgba(24, 39, 75, 0.10); --focus: 0 0 0 3px rgba(47, 107, 240, 0.25); /* ---------- 侧栏「功能模块」（老板 2026-09-24：PC 端侧栏功能模块颜色深一些 → 再「都加重一些」） ---------- 为什么用**令牌**承载这几个色：theme-light.js 的颜色引擎对 `var(--x)` 与 `--x` 声明一律不碰 （roleOfProp 对 `--` 前缀直接返回 null），写在规则里的字面色值却会被它按"用途"再映射一遍。 走令牌 → 这层改动只由本文件说了算，不会出现"改了又被引擎改回去"。 括号里是实测对比度（1440×900 · 计算样式 · 同类元素**取最坏一例**；口径见 _tmp/sidebar2-before/after.txt）。 第二版把"实渲染"（字色按祖先链累计 opacity 合成到底色）也当判据 —— 上一版只报了不合成 opacity 的 原始比值：分组标题那条 opacity:.85 会把 .g-name/.g-job/.g-tier 三处一起压暗，实测 6.14 / 4.64 / 4.25:1。 */ --nav-fg: #0d1526; /* 模块名文字/图标：15.76:1（最坏底）/ 16.9:1（侧栏白底）—— 老板要的 ≥15:1 */ --nav-fg-title: #1f2a44; /* 分组标题：比条目浅一档 12.15:1（实渲染同值，见下面的 opacity 说明） */ --nav-fg-sub: #2b3752; /* 标题下说明字 / 档位小字：10.1:1 / 9.66:1（都比标题浅一档，且 ≥9:1 / ≥8:1） */ --nav-hover-bg: rgba(37, 84, 200, 0.14); /* 悬停底：一层淡蓝，刻意弱于激活态的实底 */ --nav-active-bg: linear-gradient(135deg, #1f46b0, #17389a); /* 激活底：品牌蓝实底（比第一版再压深一档） */ --nav-active-fg: #ffffff; /* 激活字：白字压品牌蓝 8.2:1（最亮停靠点；要求 ≥6.5:1） */ --nav-active-line: rgba(23, 56, 154, 0.60); --nav-active-shadow: 0 1px 6px rgba(23, 56, 154, 0.40); /* 浅底上 inset 蓝光看不出来，改外投影才"一眼看出在哪" */ /* ---------- 阶段2：其余客户可见页面用的**自有令牌别名** ---------- 这些页面的令牌名跟指挥舱那套不一样，光覆盖 --bg/--panel 不够： · login.html 不加载 style.css，自带 :root{--txt/--dim2/--cy/--bl/--ok/--bad/--warn}； · buy/index.html 与 m/kb.html 用 --card； · m/kb.html 用 --ok/--gold。 本文件在每页 末尾加载（文档序最靠后）→ 同名令牌自然压过页面自己的深色值。 （--txt/--dim2/--card/--cy/--bl/--ok/--bad/--warn 在 style.css 里都不存在， 所以补它们不会影响指挥舱。） */ --txt: #17203a; /* login：正文 */ --dim2: #52607d; /* login：三级文字（原 #6a7488 在浅底上只有 3.9:1） */ --card: #ffffff; /* buy / m-kb：卡面底（原半透明深蓝 rgba(17,24,42,.92)） */ --ok: #0f6b34; /* login / m-kb：成功绿（语义不变，只取浅底够读的一档） */ --bad: #c62f39; /* login：失败红（语义不变） */ --warn: #7a4a0a; /* login：警告黄（语义不变） */ --cy: #0a6a8a; /* login：青（原 #22d3ee 当字太浅、当底配白字只有 1.8:1） */ --bl: #2554c8; /* login：蓝（原 #4d8dff 配白字只有 3.2:1） */ } /* ============================================================ 范围说明 ------------------------------------------------------------------ 阶段1（2026-09-24 老板定）：桌面指挥舱 public/index.html。 阶段2（2026-09-24 老板决定 8B）：**其余客户可见页面** —— /enter.html 欢迎门页（含登录后的站内欢迎）、/login.html 登录注册、 /welcome.html 落地页、/ncard/ 电子名片、/buy/ 购买页、 /m/kb.html 手机知识库、/terms.html 用户协议、/privacy.html 隐私政策。 手机主页 public/m/index.html **仍然不在范围**：它是豆包交付版，老板决定 2B 要求与交付版 **逐字节一致**（blob 15ac73c6…），我方不注入主题层、只测量 + 业主义务豁免 （见 scripts/verify-light-theme.js 的 MOBILE_MIN / WAIVER）； 所以它依然**不引用**本文件：public/m/index.html 没有 。 （将来若手机主页要统一处理，需要补的是它自有的令牌命名：/m/ 不加载 style.css， 它用自己的内联 :root{--card:rgba(22,32,58,.9); --bg:…; --line:…; --text:…}， 在它之后加载本文件即可覆盖，只需补 --card 等缺失项。） ============================================================ */ /* ---------- 页面底色：深色主题那两团蓝紫光晕在浅底上会显脏 → 换成极淡的同色系 ---------- */ body { background: radial-gradient(1200px 600px at 80% -10%, rgba(47, 107, 240, 0.07), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(109, 79, 224, 0.06), transparent 60%), var(--bg) !important; color: var(--text); } /* ---------- 滚动条（style.css 里是硬编码深色） ---------- */ ::-webkit-scrollbar-thumb { background: #c6d2e8; } ::-webkit-scrollbar-thumb:hover { background: #aebedb; } ::-webkit-scrollbar-track { background: transparent; } /* ---------- 精确覆盖：style.css 内写死、且令牌管不到的地方 ---------- */ /* 侧栏收起按钮：深色主题 hover 是"变白 + 蓝底"，浅底上要改成"变深 + 淡蓝底" */ .sb-toggle { color: var(--t2); } .sb-toggle:hover { color: var(--text); background: rgba(47, 107, 240, 0.10); border-color: rgba(47, 107, 240, 0.35); } /* 导航模式切换激活态：保留品牌蓝渐变（用深一档蓝，白字在其上 6.0:1） */ .navmode button.active { background: linear-gradient(135deg, #2554c8, #1f46b0); color: #fff; border-color: rgba(37, 84, 200, 0.5); } /* 空态/提示条：深色主题那几条半透明红底在浅底上需要重新配比 */ .alert-strip, .warn-strip { background: rgba(217, 58, 68, 0.08); color: #9c2530; } /* 时钟等大数字：深色主题用纯白，浅底上要用正文深色 */ .clock { color: var(--text); } /* 弹窗遮罩：明亮主题也要把底压暗（否则弹窗与背景糊在一起），但比深色主题轻 */ .modal-mask { background: rgba(15, 23, 42, 0.35) !important; } /* ============================================================ 侧栏「功能模块」加深（老板 2026-09-24：先「颜色深一些」，再「模块颜色都加重一些」） ------------------------------------------------------------------ 为什么落在这层：侧栏原来的字色写死成 var(--muted)（工程上就是"次要灰"）， 分组标题更是写死 #7f8bab —— 结果在浅色侧栏上，模块之间、以及模块与分组之间全都糊成一片 （实测最初：条目 6.6:1、分组标题 3.1:1，且都偏中性灰蓝，彼此只差一点点）。 这里只动**文字/图标颜色**与**激活/悬停底色**：侧栏底色、尺寸、收起态那套 display:none 一律不碰。 层级（第二版，"实渲染"= 字色按祖先链累计 opacity 合成到底色后取最坏一侧）： 模块名 15.76:1 ＞ 分组标题 12.15:1 ＞ 标题下说明字 10.1:1 ≈ 档位小字 9.66:1 —— 老板要"都加重"， 但仍按"谁更该被读"留三档，避免整条侧栏糊成一片黑。 ============================================================ */ /* ① 模块名（老板点名的"模块颜色"）：#1f2a44 → #0d1526，实渲染 12.15:1 → 15.76:1（最坏底）。 收起成 60px 窄条后显示的是"模块名首字"，它同样落在 .n-txt 里 → 一起跟着加深，不用另写一条。 */ .nav-item { color: var(--nav-fg); } /* ② 悬停：淡蓝底（保留"能点"的手感），**字色不再变** —— 条目已是全侧栏最深的一档， 再"加深"就没地方去了；hover 只靠底色区分，且刻意弱于激活态的品牌蓝实底，两者不抢。 （第一版这里把字改成 var(--text)#17203a，那是当时条目还是 #1f2a44；现在条目更深了， 若沿用会变成"悬停反而变浅"，所以改成与常态同色。） */ .nav-item:hover { background: var(--nav-hover-bg); color: var(--nav-fg); } /* ③ 激活态：品牌蓝实底 + 白字 —— 整个侧栏里只有它是实底，当前在哪一眼可见。 第二版把蓝再压深一档（#2554c8/#1f46b0 → #1f46b0/#17389a）：白字实渲染 6.6:1 → 8.2:1（要求 ≥6.5:1）。 为什么这里**必须** !important（不是图省事）： · theme-light.js 的"白字兜底" whiteTextPass() 判定"白字压在浅底上"时会写**行内 color + !important** —— 实测量到第一版之前 .nav-item.active .n-txt 的 color 正是被它写成 `rgb(23, 32, 58) !important`； · CSS 里的普通声明压不住行内 !important，只有同样带 !important 的规则才压得住。 （激活底是**不透明**品牌蓝，兜底按"深底"判定本来也不会再动它； 这层 !important 是防"切换瞬间 / 旧行内残留"的保险，去掉它随时可能退回浅字。） */ .nav-item.active, .nav-item.active .n-txt, .nav-item.active .ico { color: var(--nav-active-fg) !important; } .nav-item.active { background: var(--nav-active-bg) !important; border-color: var(--nav-active-line) !important; box-shadow: var(--nav-active-shadow) !important; } /* ④ 分组标题：加深到 #1f2a44（比"模块名"浅一档，实渲染 12.15:1 ≥ 老板要求的 10:1）。 排除 .nav-locked-group：「升级解锁 / 角色看不到」那两组的标题是**语义黄**（style.css 里 var(--yellow)）， 一起加深就等于把"这不是你现在能用的"这条信息抹掉（老板口径：锁定项别跟着加深）。 */ .nav-group:not(.nav-locked-group) > .nav-group-title { color: var(--nav-fg-title); } /* ★ 必须把标题行那条 opacity:.85 去掉（style.css 里 `.nav-group-title{…opacity:.85}`，hover 时变 1）： 这一条是**父级透明度**，会把标题、说明字、档位小字**三处一起按 85% 合成到底色上** —— 实测实渲染因此被压到 .g-name 6.14:1 / .g-job 4.64:1 / .g-tier 4.25:1，光改字色永远够不到 "标题实渲染 ≥10:1、说明字 ≥9:1、档位小字 ≥8:1"。去掉后三处实渲染 = 原始比值（12.15 / 10.1 / 9.66）。 代价：原来的"hover 变亮"提示没了（那本来就只是把 .85 补到 1）；标题行仍有 cursor:pointer + 折叠箭头， 可点性没变。**锁定分组不动**（它的弱化是语义，照旧 opacity:.85）。 */ .nav-group:not(.nav-locked-group) > .nav-group-title { opacity: 1; } /* 当前驾驶模式管的那些板块（style.css: .nav-group.nav-ent.is-active .nav-group-title{color:#cfe0ff}， 引擎在浅色下已把它改成正文色 #17203a）给回**最深的一档**当强调，别被上面那条统一成"浅一档"。 */ .nav-group.nav-ent.is-active > .nav-group-title { color: var(--nav-fg); } /* 标题行里的档位小字（.g-tier："保留项 / 升到 X 解锁"）：实渲染 9.66:1（≥8:1），仍比标题浅一档 */ .nav-group:not(.nav-locked-group) .nav-group-title .g-tier { color: var(--nav-fg-sub); } /* ⑤ 标题下那行说明字（.g-job，如「各类数据汇总及待办事项」）：实渲染 6.63 → 10.1:1（≥9:1）。 注意它在 app.js 里是**行内写死** color:#8a94ad（引擎另行改成 #46536e）： 行内样式只有 !important 压得住 —— 不写 !important 就是"改了没生效"，这里必须写。 */ .nav-group-title .g-job { color: var(--nav-fg-sub) !important; } /* ⑥ 锁定项（本档未含 / 角色看不到）：**故意不跟着加深**，它是"用不了"的语义。 钉回旧的 var(--muted)（= 改前的条目色）+ 原有的 .nav-locked{opacity:.6} → 改前改后同色同透明度， 在条目整体加深之后它反而更弱，弱化语义更清楚。悬停那条也照旧（金色淡底 + 正文色）。 */ .nav-item.nav-locked { color: var(--muted); } .nav-item.nav-locked:hover { color: var(--text); background: rgba(212, 169, 78, 0.08); } /* 红色数字角标（.nav-badge）**不动**：白字压 --red 本来就是 7.7:1，老板口径是"别改淡"。 */ /* ---------- 深色媒体区块：保留深底（视频/图片/代码），只保证容器协调 ---------- */ video, .video-box, pre, code, .code-block, .media-dark { color-scheme: dark; } video, .video-box, .media-dark { background: #0b1020; } pre, code, .code-block { background: #0f1628; color: #e6ebf5; } /* ---------- 打印/高对比偏好（无障碍）：跟随系统"减少动态/高对比"时不叠加我们的光晕 ---------- */ @media (prefers-contrast: more) { body { background: #ffffff !important; } :root { --line: rgba(23, 32, 58, 0.35); --line2: rgba(23, 32, 58, 0.5); } } /* ============================================================ 阶段2（老板 2026-09-24 决定 8B）：把**其余客户可见页面**也改亮 ------------------------------------------------------------------ 绝大多数改动已经由上面的令牌覆盖 + theme-light.js 的颜色引擎完成（不要在这里重复）。 这一节只放两类东西： ① 引擎按通用规则处理**会失真**、必须按页面精确覆盖的少数几处； ② /ncard/ 这类**品牌资产**（黑金名片本体、品牌蓝头部、视频缩略图）的"保留原配色"声明。 为什么 ncard 的品牌配色用**自定义属性**承载、而不是给元素挂 .dark-keep 类： · theme-light.js 的颜色引擎**不碰 --xxx 令牌**（roleOfProp 对 `--` 开头的属性直接返回 null）， 所以写在令牌里的深蓝/浅金不会被"深底→浅底、金字→深字"改写；var() 里也没有颜色字面值可改。 · 挂 class 会失效：详情视图里的视频列表/统计数字是 **JS 模板重建**的 （ncard 源码里 `class="v-cover ' + esc(v.cover || 'v1') + '"`），挂上去的 class 会被重建冲掉。 口径与阶段1「深色媒体区块保留深底」一致：**区块保留深底，但里面的字必须达标** （实测：封面两处 50%/45% 金字改前只有 2.98:1 / 2.65:1；品牌蓝头部原金字 3.65:1、白字 2.44:1； 视频缩略图原深金被引擎提亮后白字只有 2.10:1 —— 都已按原色相重新取值到 ≥4.5:1）。 ============================================================ */ /* ---------- welcome.html 落地页：金色渐变标题（.wg-h1 em） ---------- 它是 -webkit-background-clip:text 的"金渐变字"，颜色写死在渐变里、令牌管不到； 亮金 #ffd479/#ffb347 在白底上只有 ~1.3:1 → 换阶段1 为品牌金定的深金一档。 ★ 必须用 background-image 而不是 background 简写：简写会把 -webkit-background-clip:text 一起重置回 border-box，"镂空金字"立刻变成一个金色实心方块（实测踩过，还把对比度算成 1:1）。 */ .wg-h1 em { /* 自带 background-clip:text 声明：theme-light.js 的颜色引擎是按**同一条规则里有没有 background-clip:text** 判断"这是镂空文字、还是底色"的 —— 只写 background-image、把 clip 留在页面原规则里，引擎就会把这条深金渐变再当"深色底"改亮一次（实测 1.84:1）。 */ -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(135deg, #7d5210, #a8781f); } /* ---------- m/kb.html：品牌金强调字（.why 只存在于这个页面） ---------- 原 --gold:#f5b83d 在白卡上只有 1.78:1；令牌名只在 m/kb 用，但不做全局覆盖以免波及其它页。 */ .why b { color: #7d5210; } /* ---------- /ncard/ 电子名片（两个视图：封面 / 点开后的详情）---------- 封面底色由上面的 body 规则统一变亮；下面这些是**品牌资产**与**白底上不达标的写死色**。 */ html[data-page="ncard"] { /* 封面：黑金名片本体（保留深底 + 金箔质感） */ --nc-card-bg: linear-gradient(135deg, rgba(212,175,55,.10) 0%, transparent 35%, transparent 65%, rgba(212,175,55,.08) 100%), radial-gradient(ellipse at 30% 0%, #1f1f1f 0%, #0e0e0e 60%, #050505 100%); --nc-name-gold: linear-gradient(180deg, #f2d58a 0%, #d4af37 60%, #b8952b 100%); /* 改前：YIREN YIJIA rgba(212,175,55,.5)=2.98:1、EST.2018 rgba(212,175,55,.45)=2.65:1（都低于 AA） */ --nc-gold-soft: rgba(242,213,138,.78); --nc-gold-mid: rgba(242,213,138,.92); --nc-gold-sep: rgba(242,213,138,.55); --nc-gold-btn: linear-gradient(135deg, #f2d58a, #d4af37 50%, #b8952b); /* 详情：品牌蓝头部（保留品牌蓝底 + 白字，与阶段1 保留 .navmode 激活态蓝同一口径） */ --nc-hero-bg: radial-gradient(ellipse at 30% 0%, #24509e 0%, #16366f 55%, #0e2450 100%); --nc-hero-gold: #ffe9b0; /* 原 rgba(212,175,55,.85) 在深蓝上只有 3.65:1 */ --nc-hero-gold-soft: rgba(255,233,176,.88); --nc-hero-dim: rgba(255,255,255,.78); /* 原 rgba(255,255,255,.6) → 5.35:1 */ --nc-hero-greet: linear-gradient(180deg, #fff3d0, #f0d090); /* 原金渐变最深一档 #b8952b 在深蓝上只有 2.69:1 */ /* 详情：视频缩略图按"深色媒体区块"保留深底（原 v1 是 #0A0A0A→#3A3A3A、v2 是 #8A6D1F→#D4AF37） */ --nc-thumb-v1: linear-gradient(135deg, #101010, #3a3a3a); --nc-thumb-v2: linear-gradient(135deg, #6b5316, #a8801d); /* 原深金被引擎提亮成 #d4a94e → 白字只有 2.10:1 */ --nc-dur-bg: rgba(0,0,0,.55); --gray: #52607d; /* 原 --gray:#8A8A8A 在白底上只有 3.45:1 */ } html[data-page="ncard"] .card { background: var(--nc-card-bg); } /* 必须用 background-image：简写会把 background-clip:text 一起重置成 border-box， "吴义山"就从镂空金字变成一个金色实心方块（实测踩过）。 */ html[data-page="ncard"] .card .name { background-image: var(--nc-name-gold); } html[data-page="ncard"] .card .card-tag, html[data-page="ncard"] .card .card-est { color: var(--nc-gold-soft); } html[data-page="ncard"] .card .titles { color: var(--nc-gold-mid); } html[data-page="ncard"] .card .titles .sep { color: var(--nc-gold-sep); } html[data-page="ncard"] .card .open { background: var(--nc-gold-btn); color: #1a1a1a; } html[data-page="ncard"] .hero { background: var(--nc-hero-bg); } html[data-page="ncard"] .hero .greet { background-image: var(--nc-hero-greet); } html[data-page="ncard"] .hero .back { color: var(--nc-hero-gold); } html[data-page="ncard"] .hero .greet-date { color: var(--nc-hero-dim); } html[data-page="ncard"] .hero .quote-box .qs { color: var(--nc-hero-gold-soft); } html[data-page="ncard"] .v-cover.v1 { background: var(--nc-thumb-v1); } html[data-page="ncard"] .v-cover.v2 { background: var(--nc-thumb-v2); } html[data-page="ncard"] .v-cover .dur { background: var(--nc-dur-bg); } html[data-page="ncard"] .detail .stat .num em { color: #8a5a12; } /* 原 --gold:#D4AF37 在白卡上只有 1.96:1 */ html[data-page="ncard"] .detail .foot { color: #52607d; } /* 原 #A8A8A8 在白底上只有 2.38:1 */