/* ============================================================ 全局骨架 · 羊驼考务基准背景（v6.2 · 2026-04-24 · 导航感知双档） ------------------------------------------------------------ **硬规则**：顶部彩光必须匹配页面是否有顶部导航条 · 有 → 3 色彩光（红+金+蓝）—— bg-with-nav-*.webp · 无顶部导航 → 仅金光 —— bg-no-nav-*.webp 原因：无玻璃导航遮掩时，左上朱砂红 + 中部品牌蓝会整片发"黑"（2026-04-24 截图确认）。 **切换机制（M4 · 自动 + 手动兜底）**： 1. 组件自动：共享导航条挂载时给加 data-has-navbar="true" 2. 手动覆盖：或 data-bg="no-nav" 强制指定 3. 默认（无任何标记）：走安全的 no-nav 版，避免新人忘记挂 navbar 导致背景变黑 body 单层 background 由多层组成： · K5 冰裂纹 4 层 · 淡化斜线（23° / -64° / 7° / 97°）—— CSS 矢量 · 答题卡瓦片 SVG（132×288）—— CSS 矢量内嵌 · 顶部彩光 —— 预烘焙 WebP 位图（由 --bg-glow-url 变量切换） · 尺寸 960×400，WebP q=0.90 —— 2026-07-02 自 3840×1600 q=0.92 降档（经拼缝对照 + 合成基底色逐像素指标 ≤4/255 + 用户视觉验收）：柔和渐变按 background-size: 100% 800px 拉伸视觉无损，全套 2.9MB → 222KB · 导出工具：docs/forWeb-reference/_bg-glow-export.html（Canvas 渲染 → 下载） · ⚠ 重导图注意：Canvas 渐变末端 stop 必须用"同色 + alpha 0"（详见烘焙工具头部注释） · 底部 K5 中央暖 cream 聚焦 —— CSS 矢量（1 层 radial）基色 var(--bg) 跟随 6 档亮度语义 token 翻转。视觉契约：docs/forWeb-reference/components-background-withnav.html（with-nav） docs/forWeb-reference/components-background-nonav.html（no-nav） ============================================================ */ /* 全高链沿革自模板烘焙期；#app 为 Vue 宿主约定（非 Vue 宿主无此元素、无害）。看似惰性（body 高度 auto → 百分比高解析为 auto），但删除会改变 documentElement 的 JS 测量值（offsetHeight 等），保留勿动（2026-07-02 评审）。 */ html, #app { height: 100%; } @media (prefers-reduced-motion: reduce) { body { transition: none !important; } } /* ============================================================ 顶部彩光 url —— 按"是否有导航"自动/手动切换默认（D2 安全策略）：走 no-nav，新人忘挂 navbar 时不会发黑 ⚠ 彩光 WebP 的相对 url() 按【声明所在样式表】解析 → 本产品目录。这是契约 §4.4「外部静态宿主跨 origin link 本 CSS」的正确形态，勿改绝对路径 /front/...（会按宿主 origin 解析、打断跨 origin 场景）。已知代价：极老 Chromium 内核按文档 base 解析 → WebP 404、静默丢彩光层（其余 7 层不受影响）。可接受降级，2026-07-02 评审拍板。 ============================================================ */ /* 默认 = 无导航安全版 */ :root { --bg-glow-url: url('bg-no-nav-light.webp'); } /* 自动：挂载 → with-nav 彩光 */ html[data-has-navbar="true"] { --bg-glow-url: url('bg-with-nav-light.webp'); } /* 手动 data-bg 可覆盖自动档（M4 兜底） */ html[data-bg="with-nav"] { --bg-glow-url: url('bg-with-nav-light.webp'); } html[data-bg="no-nav"] { --bg-glow-url: url('bg-no-nav-light.webp'); } /* 暗色档（70 / 60）同样 3 档，只是 url 切 *-dark */ html[data-theme='70'], html[data-theme='60'] { --bg-glow-url: url('bg-no-nav-dark.webp'); } html[data-theme='70'][data-has-navbar="true"], html[data-theme='60'][data-has-navbar="true"] { --bg-glow-url: url('bg-with-nav-dark.webp'); } html[data-theme='70'][data-bg="with-nav"], html[data-theme='60'][data-bg="with-nav"] { --bg-glow-url: url('bg-with-nav-dark.webp'); } html[data-theme='70'][data-bg="no-nav"], html[data-theme='60'][data-bg="no-nav"] { --bg-glow-url: url('bg-no-nav-dark.webp'); } body { margin: 0; color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); transition: background-color var(--dur-theme) var(--ease-in-out), color var(--dur-theme) var(--ease-in-out); min-height: 100vh; background-color: var(--bg); background-attachment: scroll; background-image: /* ── K5 冰裂纹 4 层（淡化斜线，不同角度 × 间距） ── */ repeating-linear-gradient( 23deg, transparent 0 120px, rgba(125, 98, 50, 0.07) 120px 121px, transparent 121px 300px), repeating-linear-gradient(-64deg, transparent 0 180px, rgba(125, 98, 50, 0.06) 180px 181px, transparent 181px 420px), repeating-linear-gradient( 7deg, transparent 0 240px, rgba(125, 98, 50, 0.045) 240px 241px, transparent 241px 480px), repeating-linear-gradient( 97deg, transparent 0 140px, rgba(125, 98, 50, 0.05) 140px 141px, transparent 141px 320px), /* ── 答题卡瓦片 SVG（132×288）：上 6 软 + 下 4 硬 + 30 空心 + 2 竖线 ── */ url("data:image/svg+xml;utf8,"), /* ── 顶部彩光（按 is-navbar 自动/手动切换） ── */ var(--bg-glow-url), /* ── K5 中央暖聚焦（保留 CSS · 跟随 body 高度自适应） ── */ radial-gradient(ellipse 90% 100% at 50% 50%, rgba(245, 233, 196, 0.30), transparent 70%); background-size: auto, auto, auto, auto, 132px 288px, 100% 800px, auto; background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } /* ============================================================ 暗色档（data-theme='70' / '60'）：线条 + SVG 点翻成浅米 rgba(240,225,182,…) —— 只覆盖 background-image；background-color / -size / -repeat / -position 与基底 body 逐字相同（基底用 longhand，不会被重置），从基底级联下来，不在此重复声明（改基底几何时无需两处同步）。 ============================================================ */ html[data-theme='70'] body, html[data-theme='60'] body { background-image: repeating-linear-gradient( 23deg, transparent 0 120px, rgba(240, 225, 182, 0.06) 120px 121px, transparent 121px 300px), repeating-linear-gradient(-64deg, transparent 0 180px, rgba(240, 225, 182, 0.05) 180px 181px, transparent 181px 420px), repeating-linear-gradient( 7deg, transparent 0 240px, rgba(240, 225, 182, 0.04) 240px 241px, transparent 241px 480px), repeating-linear-gradient( 97deg, transparent 0 140px, rgba(240, 225, 182, 0.045) 140px 141px, transparent 141px 320px), url("data:image/svg+xml;utf8,"), var(--bg-glow-url), radial-gradient(ellipse 90% 100% at 50% 50%, rgba(240, 225, 182, 0.10), transparent 70%); } /* 默认给未设置 data-theme 的场景一个兜底：100 档（牛皮纸）。 tokens 在场时跟随其 --bg 单一定义（契约 §2.1），tokens 缺席（link 断）才落字面兜底值——本行字面量是唯一合法出处，勿在别处复制。 */ html:not([data-theme]) { background: var(--bg, #D6C6AA); }