/* ── 线下正文底部 · 剧情建议卡（v3 紧凑紫韵版） ────────────────────── 这张卡的外观是用户指定的成品，**不属于线下主题的一部分**： 色值、间距、圆角、阴影一律按给定代码原样写死， 不引用 --xw-* 主题变量，因此博物馆 / 手帐 / 自定义皮肤下长得完全一致。 v3 变化（对齐用户 2026-09 给的最新设计稿，逐字同步）： · 整体收紧：.wrap 内距 16/14→14/12，.sec 圆角 18→14px、 内距 13→11px、阴影收敛，标题 12.5→11px、字距 .20→.18em、 竖条 3×13→2×10px，选项间距 11→7px，按钮 15→13px、 圆角 14→9px、内距大幅收紧（9px 26px 9px 12px）； · hover 语义变轻：只加深边框 / 阴影并点亮 ◇ 与箭头， 不再浮起（v2 的 translateY(-1px) 与图标 scale 删除）； · :active 只压平内阴影，不再写 transform； · 设计稿的 @media (max-width:420px) 窄屏规则不再存在 → 删除， 窄屏与宽屏同一套内距（新稿按钮内距本身就窄，无需再收）。 字号内联常量同步（见 js2/karin-offline-plot.js）： 标题 11px / 图标 11px / 按钮与文案 13px / 卡片根基准 13px。 唯一的结构性调整是外面套了一层 .xw-plot-card 作用域， 让 .wrap / .sec / .body / .choice 这些极通用的类名只在卡内生效， 不会误伤线下其它地方（.choice 这种名字在别处很容易撞车）。 卡片内部的类名、层级、伪元素与给定设计稿逐字对齐。 ⚠️ 字号必须钉死（见文件中部的「字号免疫」段）： css/style.css 里有一条 [data-karin-fs] 全局规则，会把 **所有后代元素** 的 font-size 强行写成 calc(1em * var(--karin-font-size-scale)) !important。 用户在线下设置里调过字号时，.karin-offline-app 会被打上 data-karin-fs， 于是卡片里每一层 div / button / span 都各乘一次倍率 —— 标题挤成一坨、 字距被拉爆、卡片高度失控，和独立 HTML 打开的效果天差地别。 下面是给这条规则打的补丁。 ──────────────────────────────────────────────────────────── */ .xw-plot-card { /* 局部变量：只在本卡作用域内生效，不污染全局也不受主题影响 （色值取自 v3 设计稿 :root，逐字一致） */ --ink: #2A2033; --soft: #7A6E8A; --purple: #6B4E9E; --purple-l: #8B6FC4; --purple-d: #4A2F7A; /* 卡片自身在正文里的落位：贴在正文最底部，与最后一层留出呼吸感 */ display: block; margin: 18px 0 4px; /* 长文案不撑破容器 */ overflow-wrap: anywhere; word-break: break-word; /* 字体必须钉死成设计稿的衬线宋体：线下 App 根节点是 --xw-sans 黑体 且带 font-weight:300，不写死的话整张卡会变成「细黑体」， 和独立打开设计 HTML 的观感完全两样（这是两者长不一样的头号原因）。 真正压得住全局自定义字体规则（style.css 里 body :where(...) !important） 的内联版本由 js2/karin-offline-plot.js 输出，这里管继承与伪元素。 字体栈在设计稿 "Noto Serif CJK SC","Songti SC",serif 的基础上 多兜了 'Noto Serif SC' / 'Source Han Serif SC' 两个真机别名 —— 同一设备同一观感，只是兜底更稳。 */ font-family: "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", "Source Han Serif SC", serif; font-weight: 400; /* 基准字号与选项按钮一致（设计稿 13px），标题 / 图标的差异 由各自规则与 JS 内联显式覆盖 */ font-size: 13px; line-height: 1.6; color: var(--ink); text-align: left; } /* 卡内元素命中时不做全局 reset 依赖：把盒模型钉死，避免其它皮肤的通配规则干扰 */ .xw-plot-card, .xw-plot-card * { box-sizing: border-box; } /* ── 字号免疫 ────────────────────────────────────────────────── 这一段是这张卡最关键、也最容易写错的部分，动之前请读完。 ① 现象 同一份卡片代码，单独用 HTML 打开很好看；放进项目里， 标题挤成一坨、字距被拉爆、卡片高得离谱。 ② 根因 css/style.css 里有一条全局字号缩放规则，展开后等价于： [data-karin-fs] :where(div, button, span, ...) :not(...)×10 { font-size: calc(1em * var(--karin-font-size-scale, 1)) !important; } · 用户在线下设置里调过字号时，karin-theme.js 会给 .karin-offline-app 加上 data-karin-fs，并用【内联样式】把 --karin-font-size-scale 设成倍率（如 1.25）。 · 它用 1em —— 相对值，且带 !important，命中【每一个后代标签】。 · 卡片有 .wrap / .sec / .sec-title / .choice / .choice-text 多层嵌套， 每层都被这条规则重算一次，倍率沿层级反复累积。 · 实测（headless Chromium，scale=1.25，修复前）： 标题 12px → 48.8281px 选项 14px → 48.8281px 字距 .18em → 8.78906px 卡片直接没法看，这就是「差这么多」的全部原因。 ③ 试错记录（别重复踩） a. 只加 `.xw-plot-card * { font-size: ... !important }` → 无效。两个 !important 相撞时比特异性， 对家 (0,10,1)，我们 (0,1,0)，差一个数量级。 b. 用 `.karin-offline-app .xw-plot-card[...] .sec-title` 把特异性顶到 (0,3,0) → 仍无效，还是输给 (0,10,1)。 c. 把 --karin-font-size-scale 在卡片上归零 → 部分有效但不彻底。变量是在 .karin-offline-app 上【内联】设的， 内联值优先于继承，子元素根本读不到我们写在卡片根上的归零； 而且 1em 会在每一层重新取「父级已放大后的计算值」， 哪怕变量是 1，累积出来的结果也已经被上游带偏了（实测 20px）。 ④ 最终解法：变量归零 + 每一层都给绝对字号 · 变量归零：把 --karin-font-size-scale 铺到卡内【每一个元素】上， 让对家的 calc(1em × var(...)) 退化成 1em； · 绝对字号：再给每一层显式写死设计稿的 px 值。 这一条才是真正解决问题的 —— 有了绝对尺寸， 「继承自被放大的父级」这条传播链就被切断了， 1em 取到的就是这一层自己的设定值。 两者缺一不可：只归零不写死，1em 仍会取到上游的放大值（20px 那次）。 v3 注意：.choice-icon / .choice-text 两个真元素 span 同样被全局规则命中，字号（图标 11px / 文案 13px） 仍由 JS 内联钉死 —— 见 renderPlotCardHtml。 ⑤ 副作用（刻意接受） 用户调线下字号时，卡片不跟着变大。原因：这张卡是成品设计， 字号 / 字距 / 内边距 / 圆角是一套调好的整体，跟着缩必然变形 —— 那就又回到「和独立 HTML 不一样」的老问题了。 ──────────────────────────────────────────────────────────── */ /* ① 伪元素与窄屏的字号补丁（元素本体的字号由 JS 内联负责，见下） 为什么元素本体不在这里写 font-size： style.css 的 [data-karin-fs] 规则展开后特异性是 (0,10,1) （10 个 :not(.class) + 1 个 :where(div)，而 :where() 里的标签列表 仍会贡献元素位）。两个 !important 相撞时【只比特异性】， CSS 文件里无论怎么叠加选择器都追不平，而且很脆 —— 将来对面多一个 :not() 就又输了。 唯一稳赢的是【内联样式 + !important】，它在层叠里优先级最高。 所以正文字号在 js2/karin-offline-plot.js 的 renderPlotCardHtml 里 以 style="font-size:XXpx !important" 直接写进元素。 本段只处理内联够不到的部分：伪元素（::before / ::after 无法内联）。 伪元素不承载文字（竖条 / 渐隐线 / 箭头全是形状），字号归零天然安全。 */ .xw-plot-card .sec-title::before, .xw-plot-card .sec-title::after, .xw-plot-card .choice::after { font-size: 0; } /* .wrap 落位与设计稿一致（14px 12px） */ .xw-plot-card .wrap { padding: 14px 12px; } /* ══ 分区外壳：紫色渐变面板 ══ */ .xw-plot-card .sec { border: 1px solid rgba(107, 78, 158, .10); border-radius: 14px; padding: 11px 11px 12px; background: linear-gradient(160deg, #FDFBFF 0%, #F8F3FD 55%, #F2ECFA 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(70, 50, 110, .04), 0 14px 32px -22px rgba(70, 50, 110, .30); } /* 标题：紫色竖条（flex 项）+ 字距 + 渐隐线（设计稿 11px） line-height:normal：设计稿未给标题写行高（走字体默认）， 卡片根的 1.6 是为按钮钉的，不能让它把标题行盒撑高 ~1.6px。 */ .xw-plot-card .sec-title { margin: 0 0 9px; padding-left: 1px; font-size: 11px; line-height: normal; font-weight: 600; letter-spacing: .18em; color: var(--purple-d); display: flex; align-items: center; gap: 8px; } .xw-plot-card .sec-title::before { content: ""; width: 2px; height: 10px; border-radius: 1px; background: linear-gradient(180deg, var(--purple-l), var(--purple)); flex: 0 0 auto; } .xw-plot-card .sec-title::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(107, 78, 158, .20) 0%, rgba(107, 78, 158, .05) 55%, transparent 100%); } /* 选项容器：间距交给 flex gap（按钮自身 margin 归零） */ .xw-plot-card .body { display: flex; flex-direction: column; gap: 7px; } /* ══ 建议按钮：◇ 图标 + 文案 双 span flex 结构 ══ */ .xw-plot-card .choice { appearance: none; -webkit-appearance: none; position: relative; display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 9px 26px 9px 12px; text-align: left; font: inherit; /* 设计稿 13px，与 JS 内联值保持一致 */ font-size: 13px; line-height: 1.6; letter-spacing: .005em; color: var(--ink); background: linear-gradient(155deg, #FFFFFF 0%, #FCFAFF 55%, #F8F3FD 100%); border: 1px solid rgba(107, 78, 158, .09); border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(107, 78, 158, .04), 0 1px 1px rgba(70, 50, 110, .04), 0 4px 12px -8px rgba(107, 78, 158, .22); cursor: pointer; transition: border-color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1); white-space: normal; overflow-wrap: anywhere; word-break: break-word; } /* ◇ 图标：真元素 span（字号由 JS 内联钉死，防全局缩放）。 line-height 1.9 是设计稿原值 —— 让 11px 的 ◇ 对齐 13px × 1.6 文案首行的中线。 */ .xw-plot-card .choice-icon { flex: 0 0 auto; font-size: 11px; line-height: 1.9; color: var(--purple); opacity: .55; user-select: none; transition: opacity .22s ease; } /* 文案列 */ .xw-plot-card .choice-text { flex: 1 1 auto; min-width: 0; } /* 右侧箭头（::after border 画法，hover 滑入） */ .xw-plot-card .choice::after { content: ""; position: absolute; top: 50%; right: 11px; width: 5px; height: 5px; margin-top: -4px; border-top: 1.3px solid var(--purple-l); border-right: 1.3px solid var(--purple-l); transform: translateX(-3px) rotate(45deg); opacity: 0; transition: transform .22s ease, opacity .22s ease; } /* hover：边框 / 阴影加深 + 符号变实 + 箭头滑入 （v3 设计稿没有浮起与图标放大，保持轻量） */ .xw-plot-card .choice:hover { border-color: rgba(107, 78, 158, .26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(107, 78, 158, .05), 0 1px 2px rgba(70, 50, 110, .05), 0 8px 20px -10px rgba(107, 78, 158, .35); } .xw-plot-card .choice:hover .choice-icon { opacity: 1; } .xw-plot-card .choice:hover::after { opacity: 1; transform: translateX(0) rotate(45deg); } /* ── 按下反馈（设计稿原样：内阴影压平，无位移） ──────────────── 触屏没有 hover 也能独立演出。 */ .xw-plot-card .choice:active { box-shadow: inset 0 1px 2px rgba(107, 78, 158, .08), 0 1px 1px rgba(70, 50, 110, .05); } .xw-plot-card .choice:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; } /* 触屏：没有 hover，箭头不显示（保留 ◇ 作视觉锚点）——设计稿原样 */ @media (hover: none) { .xw-plot-card .choice::after { display: none; } }