/* 网页版正式视觉（W4+；零框架）。克制的暖色系，正文可读性优先。 */ :root { --bg: #f2ede4; --card: #fff; --ink: #2b2a28; --muted: #7a7670; --line: #e6e1d8; /* 点缀色（2026-08-27 老师拍板，同日追拍「或者全部用」）：全站用 Claude * 的橘红陶色；黄调暖底保留（底色/墨色/线条不动）。深色主题已撤，见下。 * 2026-08-28 老师拍丙（codex 外审 P2 对比度）：正文链接与导航当前页的 * 「字」用深一档 --accent-text（**当时**那一版 #c2603a 在暖白底上 4.59 达标； * 这个数是 2026-08-28 的历史陈述，**不是现状**——现值见下面第 66 轮那一条， * 压白卡 6.45／压页底 5.53／压引用块 5.25。验收 c43 的 P3-5 点名要把这句写准， * 免得后人当成现在还是 4.59）；按钮、品牌字标等 * 大块点缀观感不动，仍用 --accent。 * 2026-09-21 老师拍（第 66 轮通病 G3，对比图五选一，原话逐字「按建议，方案二」）： * --accent 由 **#d97757** 调深一档为 **#b34b28**。缘由是走查附录二那条「最要紧的 * 一条」——全站所有实心橙按钮（登录、发送验证码、提交、发送、开始排盘、今日签到…） * 上的白字，在 #d97757 上对比度只有 **3.12**，够不上无障碍正文档的 4.5；换成 * #b34b28 之后实算 **5.31**（两个数都是按 WCAG 相对亮度公式算的，见交卷汇报）。 * **--accent-ink 仍 #fff、--accent-text 仍 #b0592f，两格一个字没动**。 * 2026-09-21 老师再拍（第 66 轮小修二第 2 条，对「橙色调深以后，链接字反而比按钮 * 浅了，要不要一起调深」原话逐字：「调深」；「四、等你定的事」第 3 条又答「调深」）： * --accent-text 由 **#b0592f** 调深为 **#9e4223**。 * 原文（改前）那一格的毛病：#b0592f 压页底 #f2ede4 只有 **4.17**、压白卡 **4.87**、 * 压引用块 #efe7da **3.96**——小字门槛是 4.5，三处里两处够不上；而且它比新主橙 * #b34b28 还**浅**（明度 .437 对 .429），与当初分这两格的理由「字用深一档」正好反了。 * 新值实算（同一条 WCAG 相对亮度公式，见交卷汇报）：压白卡 **6.45**、压页底 * **5.53**、压引用块 **5.25**，三处都过 5。色相与饱和度**对齐主橙**（15.1°／.637， * 主橙 15.1°／.635），只把明度压到 .378——同一族橙，只是深一档，不是另起一个颜色。 * **--accent 与 --accent-ink 这一轮一个字没动。** */ --accent: #b34b28; --accent-ink: #fff; --accent-text: #9e4223; --ok: #2f7a3e; --bad: #b3261e; /* 2026-09-13 全站底色改浅一档（老师第 11 轮第 3 条，方案稿 §4.13）之后，这一行 * 里跟底色**贴得最近的那几个**逐个实看实测过（375／1280 真浏览器截图 ＋ 逐像素 * 取样，见 HANDOFF 那一条）： * · --quote-bg 改了：原 #f7f2ea 比**旧**底色 #faf8f4 暗 (3,6,10)，故看得出是块； * 换新底色 #f2ede4 之后它反而比底色**亮** (5,5,6)，引用块整块浮成亮的（条款页 * 「活动价仅在首发活动期间有效」那一段实测：底色 (242,237,228)、块底 * (247,242,234)）。新值 = 新底色 − 原来那个差值 = (242-3,237-6,228-10) * = #efe7da，**明度差与改底色之前一模一样**。 * · --code-bg 不动：`code` 这个选择器全站只落在三处（真人咨询页、意见反馈页、 * 邀请好友页的微信号／邀请链接），三处都在白卡 .card 里、**一处都不贴页面底色**； * 实测块底 (241,237,230) 压在 .notice 的 (252,244,242) 上，改前改后逐像素相同。 * · --skeleton 不动：只用在 `.locked .line`，而 `.locked` 自己的底是 --card（白）， * 骨架条压的是白卡不是页面底色，底色一换对比一点没变（模糊预览页实测）。 * · --veil-from／--veil-to 改了：这两个把**旧底色的 RGB 写死在里面** * （250,248,244 就是 #faf8f4），底色一换，渐隐的尽头就还是旧底色，等于在 * 样式表里留一份过期的底色副本。改成新底色的 RGB (242,237,228)。 * **实测补一句**：遮罩铺在 `.locked` 的白卡上（不是页面底色上），所以改完 * 渐隐尽头会比改前更暖一档——这一点单列请老师过目（见 HANDOFF）。 * 守门在 tests/test_web_theme_bg.py：--bg 钉死 #f2ede4，--veil-* 的 RGB 从 --bg * 现算现比，不写死第二份。 */ --code-bg: #f1ede6; --quote-bg: #efe7da; --skeleton: #e8e2d7; --veil-from: rgba(242,237,228,.15); --veil-to: rgba(242,237,228,.9); /* 这两格是 --accent **同一个颜色的半透明副本**（聚焦光圈、活动句/价签的浅底）， * 2026-09-21 随 --accent 一起从 rgb(217,119,87) 换成 rgb(179,75,40)——不换的话 * 站上会同时存在两种橙，按钮一档、光圈与浅底另一档。透明度两格都没动。 */ --focus-ring: rgba(179,75,40,.2); --promo-bg: rgba(179,75,40,.08); } /* 深色主题已撤（2026-08-27 老师拍板「黑底色效果不好，全部用白底色」）： * 原 @media (prefers-color-scheme: dark) 的 token 覆盖块整体删除，系统开 * 深色的访客也一律见暖白底。安卓壳的日夜垫层归壳工程自管，不受此影响。 */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.65 -apple-system, "PingFang SC", "Noto Sans CJK SC", sans-serif; } /* 上下内边距 `1.05rem` → `.34rem`（第 66 轮第 2 条）。老师 2026-09-21 原话逐字： * 「己所不欲 勿施于人---这几个字不需要放大。也就是这一行不要占太大的空间。」 * 顶栏里现在只剩那一句 11.52px 的小字（见 _fillTopBar），原来那一档内边距是按 * 「品牌字标 ＋ 一枚繁简按钮」配的，留着就是为一行小字空占一截。 * 左右 `1.4rem` 没动——与页面 `main` 的左右留白对齐，题词的左边缘要和正文一条线。 */ nav { display: flex; gap: 1.2rem; align-items: center; padding: .34rem 1.4rem; background: var(--card); border-bottom: 1px solid var(--line); flex-wrap: wrap; position: sticky; top: 0; z-index: 10; } /* `#nav_lang` ＝繁简键的容器。顶栏里那一枚第 66 轮已撤，这个 id 现在只剩两处： * 登录页自开的那一个（web/login.html）与「我的账户」页新落的那一行 * （web/account.html）。`margin-left: auto` 是当初把它推到顶栏右端用的， * 那两处都不需要靠右，故整条删掉，只留下面 `.lang-switch` 那枚按钮自己的样式。 */ .lang-switch { margin-top: 0; padding: .3rem .75rem; font-size: .85rem; } nav a { color: var(--ink); text-decoration: none; position: relative; } nav a.active { color: var(--accent-text); font-weight: 600; } nav .badge { display: inline-block; min-width: 1.2em; padding: 0 .35em; margin-left: .25em; border-radius: 999px; background: var(--bad); color: #fff; font-size: .75rem; text-align: center; line-height: 1.4; } /* 顶栏题词（2026-09-13 老师第 1 轮第 1 条＋第 5 轮第 1 条「把逗号改成空格」）： * 墨灰小号衬线；`white-space: nowrap` 保证它整句不从中间断开。 * 字号 `.72rem`（11.52px）**一个字不动**——第 66 轮 G7 把全站小于 12px 的对客 * 小字都放大到 12px，**只有这一句是例外**，老师 2026-09-21 原话逐字： * 「己所不欲 勿施于人---这几个字不需要放大。也就是这一行不要占太大的空间。」 * * **原文（改前）**末尾还有两格：`padding-left: .5rem; border-left: 1px solid var(--line);` * ——那道细竖线是用来把题词与左边的品牌字标隔开的。第 66 轮字标撤了之后， * 题词就是顶栏最左边那一样，那道竖线会悬在屏幕左沿，故一并撤掉。 */ .nav-motto { font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif; font-size: .72rem; color: var(--muted); letter-spacing: .04em; white-space: nowrap; } /* ── 第 66 轮 G7：全站对客小字放大到不小于 12px ────────────────────────────── * * 出处：走查 `ux-walk-report.md` 附录二末段「正文小于 12px 的地方（每页都有）」。 * 主会话建议「G7 跟顶栏改版一起做」，老师 2026-09-20 深夜答「都按建议」。 * 12px 是手机上正文可读的下限，也是走查用的那把尺。 * * 一律只把 `font-size` 提到 `.75rem`（＝12px；本文件 `rem` 按 `` 的 16px 算， * 窄屏那条 `body { font-size: 15px }` 动的是 `body`、不动 `rem` 的基准）。 * **只改字号这一格**：颜色、行高、内边距、边框一个没动。 * * 改到的十五处（原值 → 现值，各自的规则上不再重复记）： * `.tabbar .tab` 底栏标签字 .7 → .75；`article.report .rpt-k` .7 → .75； * `.site-footer` 页脚三行 .72 → .75；`.zm-pre`「知命之」.7 → .75； * `.zm-sub` 副题 .7 → .75；`.yj .line .t` 宜／忌那枚 .74 → .75； * `.yj .line p` 宜忌两句 .72 → .75；`.gua .self`「自己」小标 .6 → .75； * `.pill` 九个服务小项 .72 → .75；`.rows .row .sub` .7 → .75； * `.rows .row .slot` .62 → .75；`.tagrow .lab2` .7 → .75；`.cap` .74 → .75； * `.ask-ainote` 问AI 那行小字 .72 → .75；`.ask-fine` .7 → .75。 * * **唯一的例外就是上面那条 `.nav-motto`（顶栏题词，仍 .72rem＝11.52px）**—— * 老师 2026-09-21 原话逐字：「己所不欲 勿施于人---这几个字不需要放大。也就是 * 这一行不要占太大的空间。」 */ /* ── 底部导航（方案稿 §4.11；老师 2026-09-13 第 2 轮定，第 10 轮批开工）────── * 钉在视口底，**所有宽度都出**（主会话 2026-09-13 定：不是只手机）。 * `env(safe-area-inset-bottom)` 必带：iPhone 底部那道横条否则会压住第五项； * `constant()` 是 iOS 11.0–11.2 的老拼法，写在前面作兜底（新浏览器整条丢弃）。 * 页面内容不被挡住靠 `body.has-tabbar` 那条下内边距（由 renderBottomNav 挂上）。 */ /* 下面四条是**冲掉通用 `nav` 规则**用的，一条都不能省：底栏这一层是