/* 野山会员平台 · 一期高保真原型 视觉调性：延续公众号的简洁人文风（D28） —— 纸感底色、宋体标题、正文优先、弱装饰、克制的苔绿点缀 本文件为设计基调的实现，可直接作为设计交付的视觉参照。 */ /* ---------------- 自托管衬线正文字体（2026-09-29）---------------- 【根因】原 --serif 栈里的 "Songti SC" / "Source Han Serif SC" / "Noto Serif SC" 等 在绝大多数安卓机与部分 iOS 机型上**并不存在**，浏览器只能**逐字回退**： 某个字在系统里找不到 → 换下一个字体 ⇒ 同一个标题、同一句话里出现宋体与黑体混排， 个别字甚至落到异体字形。本机 CDP 实测原栈 6 个字体族只解析出 STSong 一个。 【对策】自托管 Noto Serif SC（SIL OFL 1.1，允许自由分发）的站点子集。 ★★ 关键：中文字体**绝不加 unicode-range 分片** —— 分片一旦没下载完，片外的字就会 回退到系统宋体，反而制造更严重的「同句混排」（这正是要治的病）。 单文件 + font-display:swap ⇒ 要么整页都用本字体，要么整页都用回退栈， **任何时刻都不会有两种字体出现在同一句里**。 【子集】站点全量字符 ∪ GB2312（∩ 字体覆盖范围），共 5896 字； 400 ≈ 1.02MB / 600 ≈ 1.03MB，只在命中衬线文本时下载。 【升级】静态托管按文件名缓存 ⇒ 换字体时把文件名里的 `.v1` 递增为 `.v2` 即破缓存。 【再生成】backend/scripts/51_build_site_webfont.py（字符集与切分逻辑都在这一个脚本里）。 */ @font-face{ font-family:"Yeshan Serif"; src:url("fonts/ys-serif-400.v1.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:"Yeshan Serif"; src:url("fonts/ys-serif-600.v1.woff2") format("woff2"); font-weight:600;font-style:normal;font-display:swap; } :root{ --paper:#F7F3EA; --paper-2:#F1EBDD; --paper-3:#E8E1D0; --ink:#23211C; --ink-2:#4A453E; /* ★ CL-04（2026-09-18）：原 #867E73 在纸底上仅 3.77:1，不达 AA。 改为 #6E655A（实算 5.39:1），覆盖面包屑/页脚/元信息/结果计数等全部小字号次级文字。 */ --muted:#6E655A; --line:#E2DAC8; --line-2:#D3C9B4; --accent:#1C3A2E; /* 苔绿 */ --accent-2:#2E5A46; --accent-soft:#E7EDE5; --accent-deep:#365239; /* 主按钮 hover 深一档（会员端 :root 早有此键，内容站此前只在 6 处硬编码） */ /* ★ CL-04（2026-09-18）：原 #A8663C 在纸底上仅 4.28:1，用于 11–13px 小字（kicker／期次号／ 字段标签／分类小标等）不达 AA。加深到 #8A4E28（实算 6.18:1），一次性覆盖全站小字号暖色文字； 装饰性线条/色块沿用同色，非文字对比度 3:1 仍达标。 */ --warm:#9A421F; /* 山褐 */ --warm-soft:#F7E9DF; --danger:#9B4A3C; /* ★ 自托管衬线**必须排第一**（字体族说明见文件头 @font-face 处）； 后面那一串只是**回退栈**，仅在自托管字体没下载到时才生效，顺序仍按"越前越像宋体"排。 自托管字体一旦生效，整页中文就只有一个字形来源，不会再逐字回退。 */ --serif:"Yeshan Serif","Songti SC","Source Han Serif SC","Noto Serif SC","Hiragino Mincho ProN",STSong,Georgia,serif; --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif; --r:3px; /* ★ 2026-10-09（详情页改版）：轻分区细线——比 --line 更淡一档，只用于区块间的"有间隔感但不抢眼"。 */ --hair:#E9E2D1; --shadow:0 1px 2px rgba(35,33,28,.05),0 6px 20px rgba(35,33,28,.06); --maxw:1120px; /* ---------------- 版式尺度（D75 全站统一·正文单栏满宽）---------------- 版心 1120，左右各内缩 24 → **内容块宽 1072**。全站每个顶层块的 左右边界都必须落在这一条线上（右边界 = 版心右缘），不允许某一块 自己另设 max-width 缩进去。 ★ 2026-09-17 D75：**「正文分两栏」方案作废**。主理人反馈两栏把页面 切成"一栏两栏混在一起"，短文本被分成每栏仅三行、非常碎。 现行规则：**正文一律单栏、且铺满版心（1072），右侧不留空**。 因此 `--m-prose / --m-lead` 不再用于**左对齐**的正文块； 仅**居中**的独立阅读页（来信正文 `.article-*`）与首页居中金句保留行宽， 因为那是左右对称的版式，不会产生"右边空一片"的观感。 */ --m-prose:820px; /* 仅保留给居中的首页金句 */ --m-lead:640px; /* 仅保留给居中的阅读页 */ --m-read:720px; /* 独立阅读页的正文栏（来信正文，居中） */ /* ===== 2026-10-05 阶段 1 · 新增令牌（新皮肤引入；当前零引用，供首页私有段使用）===== */ --card:#FDFBF6; --cream:#F1EBDC; --cream2:rgba(241,235,220,.75); --deep:#1C3A2E; --deeper:#122619; --gl:rgba(0,0,0,0); --gold:#C9A86A; --gold-ink:#8C6D3F; --ink2:#4A453E; --seal:#B4552D; --seal-ink:#9A421F; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--serif);font-size:16px;line-height:1.85; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} a:hover{color:var(--accent)} button{font-family:var(--sans);cursor:pointer} /* ★ CL-03（2026-09-18）：全站键盘焦点态。浏览器默认 outline 在多处被覆盖， 纯键盘 Tab 基本看不到焦点。统一用 2px 苔绿描边，并兜底覆盖 a/button/input/select 及所有可聚焦的卡片/按钮类。不要移除默认 outline 而不补替代。 */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, .ychip:focus-visible, .mchip:focus-visible, .idx-tg:focus-visible, .sc-btn:focus-visible, .sc-dot:focus-visible, .appear:focus-visible, .rel-card:focus-visible, .appear a:focus-visible, .rel-card a:focus-visible, .bl-band a:focus-visible{ outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r)} /* 搜索框：保留边框高亮，且键盘焦点有明确描边（旧版 outline:none 且无替代，键盘不可见） */ .search-bar input:focus{border-color:var(--accent)} .search-bar input:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* ★ CL-19（2026-09-18）：补 `:active` 触感反馈；加购按钮本就是「禁用态外观＋ cursor:not-allowed」的占位（二期才真接交易），这里也给可点击元素统一的按压缩放。 */ .btn:active,.idx-tg:active,.fold-btn:active,.ychip:active,.mchip:active,.sc-btn:active,.sc-dot:active{ transform:translateY(1px)} /* ★ CL-05（2026-09-18）：跳转链接——键盘第一次 Tab 即聚焦且可见，点击直达主内容。 */ .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff; font-family:var(--sans);font-size:14px;padding:10px 18px;border-radius:0 0 var(--r) 0} .skip:focus,.skip:focus-visible{left:0} /* ★ CL-02 修订（2026-09-18）：撤掉轮播/金句的显式「暂停/继续」按钮，改为无感暂停—— 悬停（含键盘聚焦）即停，移开/失焦恢复，由 app.js 处理，无按钮样式。 */ /* ★ CL-14（2026-09-18）：移动端检索入口——桌面隐藏（顶栏已有 nav-search），窄屏折叠菜单内出现。 */ .nav-search-li{display:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .sans{font-family:var(--sans)} .muted{color:var(--muted)} .small{font-size:13px} /* ★ 2026-09-21（主理人）：窄屏「目录」与「我的」原先风格不一 —— 前者 3px 方角、 高 32px，后者 100px 胶囊、高 38px。统一为与全站导航控件同一种胶囊描边语言 （`.nav-search` / `.nav-me` / `.btn` 本就都是 100px 胶囊，方角是这里的孤例）。 */ /* ---------------- 页头 ---------------- */ .page-head{padding:34px 0 30px;border-bottom:1px solid var(--line)} .page-head .kicker{font-family:var(--sans);font-size:12px;letter-spacing:.22em;color:var(--warm);margin-bottom:12px} .page-head h1{font-size:34px;margin:0 0 12px;font-weight:600;letter-spacing:.02em;line-height:1.35} .page-head p{margin:0;color:var(--ink-2);font-size:14.5px} /* 面包屑别贴着上面的全站公告条（2026-09-17 主理人指出「每月选书」页太挤） */ .crumb{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-bottom:18px} .wrap > .crumb:first-child{padding-top:26px} .crumb a:hover{color:var(--accent)} /* ★★ 2026-10-11（需求②配套）：新书选/主题书单详情页 —— 面包屑与期头细线的间距收紧。 其它页的 `.crumb{margin-bottom:18px}` 原样（那是"面包屑→区块"的通用节奏）。 */ body[data-page="newbook-detail"] .wrap > .crumb, body[data-page="booklist-detail"] .wrap > .crumb{margin-bottom:10px} /* ---------------- 区块 ---------------- */ .section{padding:44px 0} /* ★ 2026-09-17（D73）区块头收敛为**一套语汇**： 「3px 山褐竖线 ＋ 标题 21px ＋（注记）＋ 一条延伸到版心右缘的细线 ＋（更多 →）」 原来全站有两套并行：列表页的 .section-head 是「标题 ＋ 下方通栏细线」， 书籍详情页的 .sec-h 是「左竖线 ＋ 同行向右延伸的细线」。同一件事两种长相， 翻页时节奏会跳。现合为一套——**两个类名都保留**（页面可任选，也便于老页面不动）， 纵向节奏仍由各自的 margin 决定（列表页靠 .section 的 padding，详情页自带宽上边距）。 细线用 order 排在标题之后、.more 之前，所以「更多 →」始终落在版心右缘。 */ .section-head,.sec-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .section-head::before,.sec-h::before{content:"";flex:none;width:3px;height:16px; border-radius:2px;background:var(--warm)} .section-head h2,.sec-h h2{font-size:21px;margin:0;font-weight:600;flex:none} .section-head .note,.sec-h .note{font-family:var(--sans);font-size:12.5px;color:var(--muted);flex:none} .section-head::after,.sec-h::after{content:"";flex:1;height:1px;background:var(--line); min-width:24px;order:1} .section-head .more,.sec-h .more{order:2;flex:none;font-family:var(--sans);font-size:13px; color:var(--accent);white-space:nowrap} .section-head{margin:0 0 22px} .sec-h{margin:44px 0 4px} /* ★ 2026-10-09（详情页改版）：区块标题左侧小图标——首页磁贴右上角（.tile .ico）同族线性 SVG， 让「出现过的地方 / 本期新书选中的其他图书 / 内容介绍」三处更灵动（主理人原型定稿）。 */ .sec-h h2 .hic,.sec-cap h2 .hic{display:inline-block;width:21px;height:21px;vertical-align:-3.5px; margin-right:10px;color:#8A8071;opacity:.55} /* ---------------- 首页 hero（D70 重排：引言组 → 金句 → 动作 → 数据） ---------------- */ /* ① 引言组：品牌行与说明段属同一类内容，必须紧邻，不能被中间的金句劈开 */ .btn{display:inline-block;padding:10px 22px;border-radius:100px;font-size:14px;border:1px solid var(--line-2); background:#fff;transition:.15s} .btn:hover{border-color:var(--accent);color:var(--accent)} .btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)} .btn.primary:hover{background:var(--accent-deep);color:#fff} /* ---------------- 轮换文案（首页首屏 / 每月选书详情页顶部，D55） ---------------- 一次渲染全部条目（无 JS 时显示第一条），由 app.js 随机挑一条先显示、之后随机轮换。 文案与落款都来自数据，改文案不需要动页面。 */ .hq{min-height:150px} .hq-item{display:none;margin:0 0 22px} /* 落款与引文同一水平行、贴到容器最右侧（2026-09-17 主理人要求：原来吊在正文宽度下不好看） */ .hq-item.on{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;animation:hqin .6s ease} @keyframes hqin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} .hq-item p{margin:0;font-size:33px;line-height:1.6;font-weight:600;letter-spacing:.01em;line-break:strict;text-wrap:balance; max-width:var(--m-prose);text-wrap:balance} .hq-item cite{display:block;flex:0 0 auto;text-align:right;font-style:normal;font-family:var(--sans); font-size:13px;color:var(--ink-2);letter-spacing:.05em;margin:0 0 8px;white-space:nowrap} /* ★ 首页首屏金句（D70）：整块**居中**——短句也不至于把文字全挤在左边；上方加一条 42px 短横线做引语起手，落款从 12.5px 提到 13.5px、换成实色并居中排在句子下方。 */ /* 月选详情页顶部用的是小一号的同一套（正文语态，不做标题） */ .hq-sm{min-height:88px;margin:0} .hq-sm .hq-item{margin-bottom:8px} .hq-sm .hq-item p{font-size:19px;font-weight:400;line-height:1.9;color:var(--ink-2);line-break:strict;text-wrap:balance} .hq-sm .hq-item cite{margin-bottom:4px} /* ---------------- 首页数据条（D38） ---------------- */ /* 数据条窄屏瘦身（2026-09-21 主理人确认方案 v0.1）： 只收紧留白 + 微调字号，**6 个指标与标签文案一字未改**；>620px 完全不受影响。 实测（390 视口）：单格 82→64、整块 250→195、含上方间距 290→221（-24%）。 */ /* ---------------- 板块卡 ---------------- */ /* ---------------- 期次卡：标题卡 / 封面聚合卡 交替错落（D34 + 2026-09-17 调整） ---------------- */ .issue-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(302px,1fr));gap:18px} .issue-grid .extra{display:none} .issue-grid.all .extra{display:block} /* 错落：DOM 顺序是「标题,封面,标题,封面…」。 3 列时自然蛇形成「标题 / 封面 / 标题」＋「封面 / 标题 / 封面」； 2 列时用列定位把每两对调换一次，做到隔行左右互换（否则每行都是「标题在左、封面在右」）。 */ @media (min-width:1180px){.issue-grid{grid-template-columns:repeat(3,1fr)}} @media (min-width:721px) and (max-width:1179px){ .issue-grid{grid-template-columns:1fr 1fr;grid-auto-flow:row dense} .issue-grid > .ic-panel:nth-child(4n+3){grid-column:2} .issue-grid > .ic-covers:nth-child(4n+4){grid-column:1} } /* 标题卡：底色 = 当期第 1 本书封面主色（纯色，不做渐变）；标题 21px；黑/白字在取色阶段按对比度定 */ .ic-panel{display:flex;flex-direction:column;background:var(--ic-bg,#3C423A);color:var(--ic-fg,#fff); border-radius:var(--r);padding:22px 22px 20px;min-height:206px;transition:.18s;overflow:hidden} .ic-panel:hover{color:var(--ic-fg,#fff);box-shadow:var(--shadow);transform:translateY(-2px);filter:saturate(1.06)} .ic-panel .ic-line{display:flex;align-items:baseline;gap:10px;margin-bottom:12px} .ic-panel .ic-no{font-family:var(--sans);font-size:21px;font-weight:600;letter-spacing:.03em} /* ★ CL-04（2026-09-18）：取消小字 opacity 弱化（旧 .82 把达标值压到 3–4:1）， 改用生成器算好的 4.5:1 单独前景色 --ic-fg2（与 21px 标题的 --ic-fg 取色阈值不同）。 */ .ic-panel .ic-date{font-family:var(--sans);font-size:12.5px;margin-left:auto;color:var(--ic-fg2,var(--ic-fg,#fff))} .ic-panel .ic-title{font-size:21px;font-weight:600;line-height:1.5;margin:0; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .ic-panel .ic-more{margin-top:auto;padding-top:14px;font-family:var(--sans);font-size:12.5px;color:var(--ic-fg2,var(--ic-fg,#fff))} /* 封面聚合卡：10 张封面 */ .ic-covers{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;min-height:206px; display:flex;align-items:center;transition:.18s} .ic-covers:hover{box-shadow:var(--shadow);border-color:var(--line-2);color:inherit} .ic-covers:hover .thumbs img{filter:saturate(1.06)} .thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:6px} /* ★ CL-13（2026-09-18）：首页新书选 10 连封面带——桌面 10 列，窄屏降列， 保证 390px 下每图 ≥60px（inline 的 repeat(10,1fr) 无法被媒体查询覆盖，故改用类）。 */ .thumbs.home-nb{grid-template-columns:repeat(10,1fr)} .thumbs .t{display:block} .thumbs img,.thumbs .cover-ph{width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--line); border-radius:2px;background:var(--paper-2)} /* ---------------- 期次索引（当年一行 / 其他年份点开展开） ---------------- */ /* ★★ 2026-10-10（主理人拍板）：newbook.html 索引栏改版 —— 旧 .idx 盒子退役， 改用与 reading-plan 同一套 .rp-tabs 年份筛选标签（视觉/交互一处定义）。 下方期次卡片区按年份包 .yr-block，点年份 ⇒ 只显该年；再点当前年＝回全部 （initNewbookTabs 委托，与 initPlanTabs 同款行为）。 ★ 旧 .idx/.idx-row/.ychip/.idx-tg 样式暂留（其他页可能引用），不再被 newbook.html 使用。 */ .yr-block[data-hidden="1"]{display:none}.idx{margin-top:18px;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden} .idx-row{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap} .idx-row:last-child{border-bottom:0} .idx-y{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink);min-width:76px;padding-top:5px} .idx-n{font-family:var(--sans);font-size:12px;color:var(--muted);min-width:46px;padding-top:6px} /* 期号 chip 行：不做任何渐变/淡出，单纯一行裁切（2026-09-17 按主理人要求去掉 mask 渐变） */ /* ★ CL-16 修订（2026-09-18）：恢复「单行裁切 ＋ 展开全部」的展示——撤掉横向滚动条（主理人反馈 滑轨很丑）。裁掉的 chip 不再用滚动条露出，而是靠右侧「展开全部」完整展示；被裁掉、 看不见的 chip 由 app.js `syncIdxTab()` 从 Tab 序摘出（tabindex=-1），不留「焦点黑洞」。 */ .idx-chips{display:flex;flex-wrap:nowrap;gap:6px;flex:1;min-width:200px;max-height:32px;overflow:hidden; transition:max-height .32s ease} .idx-chips.closed{max-height:0} .idx-chips.all{max-height:1600px;flex-wrap:wrap} .idx-tg{font-family:var(--sans);font-size:12px;color:var(--accent);background:none;border:1px solid #CFDECF; border-radius:100px;padding:5px 12px;cursor:pointer;white-space:nowrap;transition:.16s;margin-top:1px;min-height:32px;display:inline-flex;align-items:center} .idx-tg:hover{background:var(--accent-soft)} /* ★ CL-15（2026-09-18）：chip 类触控目标提到 ≥32px（旧约 28px）。 */ .ychip{font-family:var(--sans);font-size:12.5px;padding:5px 11px;border:1px solid var(--line); border-radius:100px;color:var(--ink-2);white-space:nowrap;transition:.16s;min-height:32px;display:inline-flex;align-items:center} .ychip:hover{background:var(--accent-soft);border-color:#CFDECF;color:var(--accent)} .ychip.cur{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600} /* 年份区块下方的「展开全部」 */ .fold-bar{margin-top:18px;text-align:center} .fold-btn{font-family:var(--sans);font-size:13px;color:var(--ink-2);background:#fff;border:1px solid var(--line); border-radius:100px;padding:9px 24px;cursor:pointer;transition:.18s;min-height:44px;display:inline-flex;align-items:center} .fold-btn:hover{border-color:var(--accent);color:var(--accent)} /* ---------------- 门店实拍轮播（关于野山）：3 张竖图 = 一屏，避免竖图被塞进宽幅 ---------------- */ .sc{position:relative;margin-top:26px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#1A1A17} .sc-vp{position:relative;aspect-ratio:21/9;overflow:hidden} .sc-slide{position:absolute;inset:0;opacity:0;transition:opacity .65s ease;pointer-events:none;visibility:hidden} .sc-slide.on{opacity:1;pointer-events:auto;visibility:visible} .sc-imgs{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:7px} .sc-imgs img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block; border-radius:var(--r);background:var(--paper-2)} .sc-cap{position:absolute;left:0;right:0;bottom:0;padding:56px 22px 18px;color:#fff;font-family:var(--sans); font-size:13.5px;background:linear-gradient(transparent,rgba(0,0,0,.78));z-index:2;pointer-events:none} .sc-cap b{display:block;font-weight:600;font-size:16px;margin-bottom:3px} .sc-cap em{font-style:normal;font-size:12.5px} .sc-btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;cursor:pointer; border-radius:50%;background:rgba(255,255,255,.84);color:var(--ink);font-size:20px;line-height:1; display:flex;align-items:center;justify-content:center;transition:.18s;z-index:3} .sc-btn:hover{background:#fff} .sc-prev{left:14px}.sc-next{right:14px} .sc-dots{position:absolute;right:18px;bottom:18px;display:flex;gap:7px;z-index:3} .sc-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:.2s} .sc-dot.on{width:20px;border-radius:100px;background:#fff} .sc-hint{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:11px} @media (max-width:760px){ .sc-vp{aspect-ratio:3/2} .sc-imgs{grid-template-columns:repeat(2,1fr)} .sc-imgs img:nth-child(3){display:none} .sc-btn{width:44px;height:44px;font-size:19px} .sc-prev{left:8px}.sc-next{right:8px} .sc-dots{right:12px;bottom:12px} .sc-cap{padding:42px 14px 13px;font-size:12px} .sc-cap b{font-size:14px;margin-bottom:2px} .sc-cap em{font-size:11.5px} .idx-tg{margin-left:auto} .ic-panel{min-height:0} .ic-panel .ic-title{font-size:19px} } /* ---------------- 书籍条目 ---------------- */ .book-row{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)} .book-row:last-child{border-bottom:0} .book-row .cv{flex:none;width:96px} .book-row .cv img{width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--line); border-radius:2px;background:var(--paper-2)} .book-row .bd{flex:1;min-width:0} .book-row .seq{font-family:var(--sans);font-size:11px;color:#fff;background:var(--ink-2);border-radius:2px;padding:1px 6px;margin-right:8px} /* ★ 2026-10-11（259 同款移植）：序号徽标（封面右上角）＝**手机档专用**。 DOM 双写（.cvb 在封面里、.seq 仍在书名行）：桌面档 .cvb 全局隐藏（桌面视觉零改动）， ≤720 档（文末追加块）显示 .cvb、隐藏 .seq。样式与小程序端 .cv-seq 同源同值。 */ .cvb{display:none;position:absolute;top:10px;right:10px;z-index:2;min-width:19px;text-align:center; font-family:var(--sans);font-size:10px;line-height:1.45;color:#fff;background:rgba(35,33,28,.8); border-radius:2px;padding:0 5px;box-shadow:0 1px 2px rgba(0,0,0,.22);pointer-events:none} .book-row h3{margin:0 0 8px;font-size:18px;font-weight:600;line-height:1.5} .book-row h3 a:hover{color:var(--accent)} .book-row .sub{font-size:13px;color:var(--muted);margin:-4px 0 8px} .meta{font-family:var(--sans);font-size:13px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 14px;margin-bottom:10px} .meta span{white-space:nowrap} .meta i{color:var(--muted);font-style:normal} .summary{font-size:13.5px;color:var(--ink-2);line-height:1.85;margin:0; display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .cover-ph{border:1px solid var(--line);border-radius:2px;aspect-ratio:2/3;background: repeating-linear-gradient(135deg,var(--paper-2) 0 8px,var(--paper-3) 8px 16px); display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:var(--sans);font-size:11px; text-align:center;padding:6px;line-height:1.5} /* 排版化封面：主题书单暂无封面源（公号图表未含封面列），用书名排版替代，避免破图 */ /* ---------------- 期次头 ---------------- */ .issue-head{padding:40px 0 30px;border-bottom:1px solid var(--line);margin-bottom:8px} .issue-head .no{font-family:var(--sans);font-size:13px;letter-spacing:.16em;color:var(--warm);margin-bottom:14px} .issue-head h1{font-size:30px;margin:0 0 14px;font-weight:600;line-height:1.5} /* ★★ 2026-10-10 四轮（主理人）：主题标题 —— ①去左侧竖线（与筛选标签/书名撞形）； ②字号 19→27px（向全站主标题 .issue-head h1=30px 看齐，与书名 18px 拉开层级）。 */ .issue-head .theme{font-size:27px;line-height:1.7;color:var(--ink);padding-left:0;border-left:0;margin:0 0 16px} /* ---------------- 新书选单期列表卡（.book-row 平面结构）—— 四轮改版 ---------------- ★ 封面高度自适应右栏；96→112px（等高后比例不至于瘦长）。 ★ 信息行分组化（同月选）：.g.g1 主信息 ＋ .g.g2 补充（定价/ISBN）；整字段换行。 ★★ 2026-10-10 复核修复（主理人对照原型）：DOM 统一为三块 .cv ＋ .bd ＋ .row-sum （简介挪出 .bd，app.js 同改）—— 行改**两列网格**「cv bd / cv sum」：桌面简介 仍落右栏 .bd 下方（视觉与旧 flex 版一致）；手机端（≤720 档）换「cv bd / sum sum」， 简介横铺整行 —— 原实现简介挤在封面右侧窄栏里，与原型手机版不符。 */ body[data-page="newbook-detail"] .book-row{display:grid;grid-template-columns:112px minmax(0,1fr); grid-template-areas:"cv bd" "cv sum";column-gap:24px;row-gap:10px;padding:22px 0; border-bottom:1px solid var(--line);align-items:stretch} /* ★★ 2026-10-11（简介全显的**连带修正**）：简介不再截断后，行高由右栏文字决定、 会比封面高 ⇒ 若封面还是 `height:100%`（stretch 拉满），**封面会被越拉越长**： 线上实测 168px → 217px（比例 1:1.5 → 1:1.94，被 cover 裁掉左右各约 14%）， 且各卡高度不一致（189/217 参差）——原本封面是齐整的一档高。 现口径：封面**按书封固有比例**（2/3 ⇒ 112×168，与原值完全一致）， 顶部对齐（`align-self:start`），右栏文字长了就往下淌。 ⇒ 简介仍在 3 行内的书（大多数）**视觉与改前逐像素一致**，只有超长的书才变。 */ body[data-page="newbook-detail"] .book-row .cv{grid-area:cv;width:100%;display:flex;align-self:start} body[data-page="newbook-detail"] .book-row .cv img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover} body[data-page="newbook-detail"] .book-row .bd{grid-area:bd;min-width:0} /* ★★ 2026-10-11（主理人：「每本书的简介默认三行、超出被隐藏，这个是要全部显示的」）： 原实现 clamp 3 行 —— **线上实测**（CDP：clientHeight vs scrollHeight） 桌面被截 24~52px（≈1~2 行）、**手机档被截 117~187px（≈3~5 行）**， 即手机档截得远比桌面狠。现整段退役，简介有多少显示多少。 ★ 同批处理书单详情（`.bcard .row-sum`）—— 同构同语义（都是「每期列表里每本书的简介」）。 ★ 手机档不用另写规则：基础规则的 clamp 一摘，≤720 档（只改字号）自动跟着全显。 */ body[data-page="newbook-detail"] .book-row .row-sum{grid-area:sum;min-width:0; font-size:14.5px;color:var(--ink-2);line-height:1.9;margin:0} body[data-page="newbook-detail"] .book-row .meta{display:flex;flex-wrap:wrap;gap:2px 18px;align-items:baseline;width:100%} body[data-page="newbook-detail"] .book-row .meta .g{display:inline-flex;flex-wrap:wrap;gap:2px 14px;min-width:0} /* ★★ 2026-10-12 批1 缺陷A（CDP 实测：@320 该页横向溢出 59px）： 根因＝本 `span` 是 flex item、默认 `min-width:auto`，又带 `nowrap` ⇒ **既不能缩也不能断行**。 父级 :389 `.g{min-width:0}` 只管住父，管不到它。⇒ 补 `min-width:0`（先让它能缩）； 仅"能缩"在 `nowrap` 下仍可能 320 溢出，故 ≤360 档再允许换行（见文件末 360 档）。 */ body[data-page="newbook-detail"] .book-row .meta .g span{min-width:0;white-space:nowrap} .pager{display:flex;justify-content:space-between;gap:16px;padding:28px 0;font-family:var(--sans);font-size:14px;border-top:1px solid var(--line);margin-top:30px} /* ---------------- 主题书单 ---------------- ★ 2026-09-17 重做：公号正文是四层结构（引句 → 开篇导语 → 主推 → 三个分类）。 ★★ 2026-09-17 第十五轮（主理人反馈「整个版式线条太多，做一些减法」）： ① 书单页的正文块**不再用竖线引文体**——开篇导语与分类小导读都去掉左侧 3px 竖线 （图书详情页的「内容简介」仍是竖线引文体，本组规则只作用于 `.bl-block` / `.bl-cat`）； ② 分类头去掉左侧竖线与「1/2/3」序号，合成一行 `分类名：小标题`，同一字号； ③ 主推卡去掉「主推」色块，简介收进封面右侧，不再单独排一块； ④ 其他阅读推荐由裸封面改成「封面＋书名」小卡。 */ .issue-head .bl-quote{margin:0;padding-left:18px;border-left:3px solid var(--warm)} .issue-head .bl-quote p{font-family:var(--serif);font-size:19px;line-height:1.86;color:var(--ink); margin:0 0 3px} .issue-head .bl-quote p:last-child{margin-bottom:0} /* ---------------- 主题书单详情页：区块分层（D75 重排） ---------------- 主理人反馈：「文字板块之间阅读体验差，板块与板块、板块内部元素的相关关系不清晰」， 最典型的症状是「其他阅读推荐」——原先只是一个小灰字标签 ＋ 一行**没有容器**的封面， 而下方隔一段就是**强视觉**的下一个分类头（3px 竖线 ＋ 延伸到版心右缘的细线）， 视觉引力朝下 → 看不出它到底属于上面的分类还是下面的分类。 改法（三层一起下手，缺一层都会剩歧义）： ① **顶层区块统一成区块卡**（本期导读／本期主推／每个分类）——与月选月度页的 `.guide` 同款语汇（浅底 ＋ 1px 描边 ＋ 圆角）。块的范围从此**可见**， 不必再靠 44px 与 20px 的间距差去猜。 ② 卡内区块头不再带 44px 上边距，细线自然收到**卡内右缘**，不穿出卡片。 ③ 卡内用**同级小节标签**说明主次——第十五轮起只保留「其他阅读推荐」， 「本类核心」四字已删（三本书目紧跟小导读，层级本就清楚）。 */ .bl-block,.bl-cat{background:var(--paper-2);border:1px solid var(--line); border-radius:var(--r);padding:26px 30px 28px;margin:16px 0 0} .bl-block .sec-h,.bl-cat .sec-h{margin:0 0 16px} /* 区块卡里的第一个正文块不必再留上边距（外边距会顶在卡的内边距上） */ .bl-block .summary-wrap:first-child,.bl-cat .summary-wrap:first-child{margin-top:0} /* ★ 第十五轮：书单页正文去掉左侧竖线（.summary-wrap 原本是 `3px + 1fr` 的两栏网格， 左栏由 ::before 画竖线）。改成单栏、去掉 ::before，并在窄屏同步（见文件末尾的 720px 断点里 `.summary-wrap{gap:12px}` 不再需要）。 */ .bl-block .summary-wrap,.bl-cat .summary-wrap{grid-template-columns:minmax(0,1fr);gap:0} .bl-block .summary-wrap::before,.bl-cat .summary-wrap::before{display:none} /* 主推卡在区块卡内换成白底：避免"卡中卡"两层浅底叠在一起分不出边界 */ .bl-block .main-pick{background:#fff;border:1px solid var(--line);padding:20px;margin:0 0 18px} .bl-block .main-pick:last-child{margin-bottom:0} /* 卡内同级小节标签：靠字号/字距/短横线统一 */ .bl-cat .bl-sub{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.08em; color:var(--warm);display:flex;align-items:center;gap:9px;margin:0 0 12px} .bl-cat .bl-sub::before{content:"";flex:none;width:14px;height:2px;border-radius:2px; background:var(--warm);opacity:.55} /* ★ 第十六轮：「其他阅读推荐」前面的那根短横线去掉（减法继续）； 顶部的分隔细线保留——它负责把「三本核心」与「延伸推荐」分开，标签本身不再带任何装饰。 */ .bl-cat .bl-sub--other{margin-top:24px;border-top:1px solid var(--line);padding-top:16px} .bl-cat .bl-sub--other::before{display:none} /* 核心书目：行间虚线分隔；末行不留尾巴（下面接的是小节标签，不是列表续行） */ /* ★ 第十六轮：分类小导读与下面三本书之间加一条细横线—— 导读是「整体在讲什么」，三本书是「具体是哪几本」，两件事，需要一道界。 只在**确有导读**时才出现（相邻兄弟选择器天然满足：没有 .summary-wrap 就不画线）。 */ .bl-cat .summary-wrap + .bl-core{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)} .bl-core > .bl-item:last-child{border-bottom:0} .bl-cat .bl-cat-h{margin:0 0 16px} /* ★ 第十五轮：分类头只留一行文字（`分类名：小标题`）。 删掉左侧 3px 竖线（::before 置 none）与`.cat-no` 序号； 向右延伸到版心右缘的细线（::after）**保留**，仍用来封住右边界。 */ .bl-cat .bl-cat-h::before{display:none} .bl-cat .bl-cat-h h2{font-size:19px} .bl-cat .summary-wrap + .bl-sub{margin-top:20px} .bl-item{display:flex;gap:16px;padding:16px 0;border-bottom:1px dashed var(--line)} .bl-item .cv{flex:none;width:74px} .bl-item h4{margin:0 0 6px;font-size:16px;font-weight:600} .bl-item .rc{font-size:14px;color:var(--ink-2);line-height:1.8;margin:6px 0 0} .main-pick{background:var(--warm-soft);border:1px solid #EBDCCB;border-radius:var(--r);padding:24px;display:flex;gap:24px;margin-bottom:12px} .main-pick .cv{flex:none;width:130px} .main-pick h3{margin:0 0 8px;font-size:22px;font-weight:600} /* 月选详情页与书单页的主推块：左右等高对齐（与列表页同一套做法） ★ 第十六轮：**封面不拉伸、不裁切**——竖向书封在窄高列里用 object-fit:cover 会被切掉两侧四成， 所以改由 `app.js` 的 `alignMainPicks()` 反算出封面列宽度，使图片自然高度＝右栏内容高度 （宽度夹在 120–260px）。这里只负责「宽生效、顶端对齐」的基础形态。 */ .main-pick.eq{align-items:stretch;gap:30px} /* ★ 方案 E（2026-09-20）：图书信息卡重设计——封面 + 定妆照同框，与右侧简介/字段顶部对齐； contain 不裁切，根治封面忽大忽小、右侧留白（D89 旧疾）。 ★★ 2026-09-20 二次调整（主理人反馈「图片太小，高度至少翻倍」）： 原 122×162 两张并排 → 现**统一高度 324px**（＝原 162 的 2 倍），宽度由图片自身比例决定 （封面 2:3 → 216×324；定妆照 3:4 → 243×324），两图仍是「同高并排」，视觉上更像一组。 实现方式：`.ph` 只定高、不定宽，宽度交给内部 img 的固有比例撑开 —— 这样**不写死宽高、 不裁切、不拉伸**，将来换任何比例的图都不会变形（与后端上传裁剪的口径一致）。 */ .main-pick.eq .cv{flex:none;width:auto;display:flex;gap:14px;align-items:flex-start} /* 定高 324px；宽度由 `aspect-ratio` **先占位**、图片进来后 contain 填满 —— 加载前后都不抖版 （这正是原版「只定宽高、不给比例」时 `loading=lazy` 造成的位移来源）。 封面取全站竖向书封的中位比例 7:10（≈227×324，实测 199 张封面中位 0.700），定妆照恒 3:4 （243×324，实测 28 张全部在 0.738–0.777）。个别异形封面只在白底上留极窄纸边，不裁不拉。 */ /* ★★ 2026-09-20 第五轮（主理人）：`contain` 会给"比例不合舞台"的图留出一圈边。 原来底色是**纯白**，衬在暖色卡面上就成了**白边**（实测：封面 7:10 放进 250×324 的舞台， 左右各留 11.5px）。改法：**底色直接取信息卡自己的底纹 `--warm-soft`**、描边取卡片同色， 那圈边就与卡面同色、视觉上消失；同时**去掉外投影**（它原本是"浮起的白相框"的观感来源）。 */ .main-pick.eq .cv .ph{flex:none;height:324px;aspect-ratio:7/10;display:flex;align-items:center; justify-content:center;background:var(--warm-soft);border:1px solid #EBDCCB;border-radius:2px;overflow:hidden} /* 封面外套的 要撑满舞台，里面的 才能按 100% 铺开（见下方 `.ph img`）。 */ .main-pick.eq .cv .ph a{display:block;width:100%;height:100%;cursor:pointer} /* 只有**登记进灯箱组**的图才给"可放大"的指针；封面是链接，用普通手型。 */ .main-pick.eq .cv .ph img[data-lb-group]{cursor:zoom-in} .main-pick.eq .cv .ph:nth-child(2){aspect-ratio:3/4} .main-pick.eq .cv .ph img{height:100%;width:100%;object-fit:contain;display:block} /* ★★ 轮转图（2026-09-20 第三轮，主理人）：「封面 + 定妆照」不再并排，改成**单幅轮转**—— 定尺舞台内两张图叠放，靠下方两颗小标签切换；桌面与窄屏**同一形态**。 舞台 250×324（＝上一轮的定高，两种比例都完整放得下：封面 7:10→227 宽、定妆照 3:4→243 宽， contain 留出的白边都在 3–12px，看不出来）；两张 `.ph` 绝对定位叠放、靠 `.on` 切透明度 ⇒ **切换时高度恒定、不跳版**。窄屏改为按 7:10 自适应宽度（封面零留白，定妆照上下各约 3%）。*/ .main-pick.eq .cv.rot{flex:none;width:250px;display:flex;flex-direction:column;gap:10px;align-items:stretch} .main-pick.eq .cv.rot .rot-stage{position:relative;width:100%;height:324px} .main-pick.eq .cv.rot .rot-stage .ph{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto; opacity:0;visibility:hidden} .main-pick.eq .cv.rot .rot-stage .ph.on{opacity:1;visibility:visible} /* ★★ 2026-09-20 第四轮（主理人）：切换条"太硬" → **去掉按钮框与填色**，改成一行**轻文字**： 未选中＝次级灰（`--muted`），选中＝山褐（`--warm`）＋一根发丝下划线；居中、12px。 对比度仍达标（`--muted` 5.39:1 ／ `--warm` 6.18:1，均过 AA）。 ★ 不再用 flex:1 撑满整列 —— 那是"两个大按钮"的观感来源；现在宽度跟着文字走。 */ .main-pick.eq .cv.rot .rot-dots{display:flex;justify-content:center;align-items:baseline;gap:14px;padding-top:2px} .main-pick.eq .cv.rot .rot-dot{appearance:none;background:none;border:0;border-radius:2px;position:relative; padding:5px 4px 6px;font-family:var(--sans);font-size:12px;line-height:1.4;letter-spacing:.02em; color:var(--muted);cursor:pointer} .main-pick.eq .cv.rot .rot-dot::after{content:"";position:absolute;left:4px;right:4px;bottom:3px;height:1px; background:currentColor;opacity:0} .main-pick.eq .cv.rot .rot-dot:hover{color:var(--ink-2)} .main-pick.eq .cv.rot .rot-dot.on{color:var(--warm)} .main-pick.eq .cv.rot .rot-dot.on::after{opacity:.38} .main-pick.eq .cv.rot .rot-dot:focus-visible{outline:2px solid var(--accent);outline-offset:2px} @media (prefers-reduced-motion: no-preference){ .main-pick.eq .cv.rot .rot-stage .ph{transition:opacity .3s ease} } .main-pick.eq .bd{flex:1;min-width:0} /* ★ 第十六轮：主推书若同时命中每月选书，给出跨板块入口。 形态很轻——一枚描边的小标签 ＋ 一句带箭头的话，不做重色块（本期刚做完减法）。 */ .plan-hit{display:inline-flex;align-items:baseline;gap:9px;margin:0 0 10px;font-family:var(--sans); font-size:13px;line-height:1.6;color:var(--ink-2)} .plan-hit .ph-tag{flex:none;font-size:11.5px;letter-spacing:.06em;color:var(--warm); border:1px solid #E3D2BE;border-radius:2px;padding:1px 7px;background:#fff} .plan-hit .ph-txt{color:var(--ink-2)} .plan-hit:hover .ph-txt{color:var(--accent);text-decoration:underline;text-underline-offset:3px} /* ★ 第十五轮：简介收进主推卡右栏（`h3 + .meta + .summary-wrap`），上边距收一档， 让它与封面顶端对齐、不再单起一整块。 */ .main-pick .bd .summary-wrap{margin-top:14px} /* ★ 第十七轮（D85）：主选卡底部两个跨板块入口**并列一行**—— 「这本书还出现在哪里 →」（底层图书详情页）＋「这本书的延伸阅读 →」（那期主题书单）。 同一行、同一字号、同一套箭头语气；后者没有时不占位（前台不出空链接）。 */ .pick-links{margin-top:14px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px} .pick-links a{color:var(--accent)} .pick-links a:hover{text-decoration:underline;text-underline-offset:3px} /* 分类标题下只剩别名 */ .bl-count{font-family:var(--sans);font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line); padding-bottom:12px;margin:34px 0 22px} /* ---------------- 「其他阅读推荐」小卡网格（第十五轮重做） ---------------- 改前是一行**裸封面**（62px，只有图没有字），认不出是哪本书； 现在是「封面 ＋ 书名」的小卡，书与书之间留出间距（行 20px / 列 16px）。 */ .cov-cards{display:flex;flex-wrap:wrap;gap:20px 16px;margin-top:14px} .cov-cards a{display:block;width:104px;flex:none} .cov-cards img,.cov-cards .cover-ph{width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--line); border-radius:var(--r);background:var(--paper-2)} .cov-cards a:hover img{border-color:var(--line-2);filter:saturate(1.06)} .cov-cards .t{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font-size:12.5px;line-height:1.55;color:var(--ink-2);margin-top:7px} /* 旧类名保留为空壳（既有的 `.cov-row` 规则不再被书单页使用） */ /* ---------------- 野山来信 ---------------- */ .letter-list{display:grid;gap:2px} .letter-card{display:flex;gap:24px;padding:28px 0;border-bottom:1px solid var(--line)} .letter-card .cv{flex:none;width:200px} /* ★ 2026-09-28（v0.3）：首页来信卡改用 class 控制宽度（原行内 width:132px 的优先级 压过窄屏媒体查询的 100%，导致窄屏配图被钉死 132px——本次修的根因）。 放在 .letter-card .cv 之后 ⇒ 桌面 132px 生效；≤900px 媒体查询的 100% 在文件更后 ⇒ 窄屏齐宽。 */ .letter-card .cv img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line);border-radius:2px} .letter-card h3{margin:0 0 10px;font-size:21px;font-weight:600;line-height:1.55} .letter-card h3 a:hover{color:var(--accent)} .letter-card .ex{font-size:13.5px;color:var(--ink-2);line-height:1.85;margin:0 0 12px} .letter-card .lm{font-family:var(--sans);font-size:12.5px;color:var(--muted);display:flex;gap:16px} /* ★ D73：来信页的正文栏是居中的 720px，但 .article-head 原来挂在版心左缘（184px）， 与正文左缘（360px）差 176px——标题与正文不在同一条起跑线上。现把页头也放进同一个 居中栏，整页成为"一条居中阅读栏"，四块（页头/正文/翻页/来源）左缘统一。 */ .article-head{max-width:var(--m-read);margin:0 auto;padding:56px 0 30px} .article-head h1{font-size:30px;line-height:1.5;margin:0 0 18px;font-weight:600} /* ★ 2026-10-11：全站文章标题统一 30px（原 32） */ .article-head .lm{font-family:var(--sans);font-size:13px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap} .article-body{max-width:var(--m-read);margin:0 auto;padding:16px 0 60px;font-size:16px;line-height:2} .article-body p{margin:0 0 1.35em} .article-body img{width:100%!important;height:auto!important;max-width:100%!important;margin:1.6em 0;border-radius:2px} .article-body section,.article-body div{max-width:100%!important} .article-body span{max-width:100%!important} .article-body *{font-size:inherit!important;line-height:inherit!important; background-color:transparent!important;letter-spacing:normal!important} /* ★ CL-12（2026-09-18）：旧版 `.article-body *` 用 color:inherit!important 把正文内链接也压成正文色， 链接不可辨识。改为只约束外来富文本的字体/行高/背景/字距，链接与强调字重单独恢复。 */ .article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px} .article-body a:hover{color:var(--ink)} .article-body strong,.article-body em,.article-body b{font-weight:600} .article-body blockquote{border-left:3px solid var(--line-2);padding-left:18px;color:var(--ink-2);margin:1.6em 0} /* ★ 2026-09-28（v0.3 主理人终审）：法律条款页（用户协议/隐私政策）全文统一字号—— 正文与条款标题（h2）同字号，标题仅加粗区分；只对 body[data-page="legal"] 生效， 来信正文（同用 .article-body）一字不动。宽屏 14.5px、窄屏 12.5px（≤720px）。 */ body[data-page="legal"] .article-body{font-size:14.5px;line-height:1.85;padding:16px 0 46px} body[data-page="legal"] .article-body p{margin:0 0 .95em} body[data-page="legal"] .article-body h2{font-size:14.5px;line-height:1.85;font-weight:600;margin:1.25em 0 .5em} body[data-page="legal"] .article-body ul{margin:0 0 .95em} .article-source{max-width:720px;margin:0 auto;padding:18px 0;border-top:1px solid var(--line); font-family:var(--sans);font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} /* ---------------- 关于野山 ---------------- */ .about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start} .fact{display:flex;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line);font-size:13.5px} .fact b{flex:none;width:92px;font-weight:400;color:var(--muted);font-family:var(--sans);font-size:13px} .media-item{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)} .media-kind{flex:none;width:64px;font-family:var(--sans);font-size:11px;letter-spacing:.06em;color:var(--warm); border:1px solid #EBDCCB;background:var(--warm-soft);border-radius:2px;height:22px;line-height:20px;text-align:center} .media-item h4{margin:0 0 6px;font-size:16.5px;font-weight:600} .media-item .src-line{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-bottom:6px} .media-item .ex{font-size:13px;color:var(--ink-2);line-height:1.8;margin:0} .stale{font-family:var(--sans);font-size:11px;color:var(--danger);border:1px solid #E3C9C4;background:#F8EDEB; border-radius:2px;padding:1px 6px;margin-left:8px} .plan-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px} .plan-box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px} .plan-box h4{margin:0 0 10px;font-size:16.5px;font-weight:600} .plan-box ul{margin:0;padding-left:18px;font-size:14px;color:var(--ink-2);line-height:1.9} /* 阅读计划说明（选书主题 / 选书范围及类型 / 适不适合）：后台可编辑的整段素材。 2026-09-17：主理人反馈「字挤在一起」→ 加分隔线、拉开组间距与段间距、限宽提升可读性。 */ .plan-guide{margin-top:28px;border-top:1px solid var(--line);padding-top:6px} .plan-guide h4{margin:32px 0 14px;font-size:16px;font-weight:600;line-height:1.6; position:relative;padding-left:16px} .plan-guide h4:first-child{margin-top:26px} .plan-guide h4::before{content:"";position:absolute;left:1px;top:.6em;width:6px;height:6px; border-radius:50%;background:var(--warm)} .plan-guide p{margin:0 0 13px;font-size:13.5px;color:var(--ink-2);line-height:1.98} .plan-guide p:last-child{margin-bottom:0} .plan-guide ul.dash{margin:2px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--ink-2); line-height:1.98} .plan-guide ul.dash li{position:relative;padding-left:17px;margin-bottom:.55em} .plan-guide ul.dash li::before{content:"";position:absolute;left:2px;top:.92em;width:6px;height:1px;background:var(--warm)} /* ---------------- 检索 ---------------- */ .search-bar{display:flex;gap:10px;margin:26px 0 10px} .search-bar input{flex:1;font-family:var(--serif);font-size:16px;padding:13px 16px;border:1px solid var(--line-2); border-radius:var(--r);background:#fff;color:var(--ink)} .search-bar input:focus{outline:none;border-color:var(--accent)} .search-bar button{padding:0 26px;border-radius:var(--r);border:1px solid var(--accent);background:var(--accent); color:#fff;font-size:14px;min-height:44px} .filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-family:var(--sans);font-size:13px;margin-bottom:8px} .filters select{font-family:var(--sans);font-size:13px;padding:8px 10px;border:1px solid var(--line-2); border-radius:var(--r);background:#fff;color:var(--ink-2)} .filters .clear{color:var(--accent);text-decoration:underline;text-underline-offset:3px;background:none;border:0} .result-count{font-family:var(--sans);font-size:13px;color:var(--muted);margin:16px 0 4px} .res-item{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)} .res-item .cv{flex:none;width:72px} .res-item h4{margin:0 0 6px;font-size:16.5px;font-weight:600} .hit{background:#FBEFD9;padding:0 2px;border-radius:2px} .badge{font-family:var(--sans);font-size:11px;color:var(--accent);border:1px solid #CFDECF;background:var(--accent-soft); border-radius:2px;padding:1px 6px;margin-right:6px} /* ---------------- 图书详情 ---------------- 所有单本图书共用同一套基础格式（不管它来自每周新书选、主题书单还是每月选书）： ① 头部：封面 + 书名层 + 字段层　② 加购条（二期预留）　③ 内容简介 ④ 每月选书图书独有的三块导读位　⑤ 这本书在野山出现过的地方　⑥ 相关推荐 ★★ 2026-10-09 视觉改版（主理人五轮原型评审定稿，outputs/视觉优化_图书详情页_20261009）： · hero 改 **grid 两列**（areas："cv bd" / "ac intro"）——左列＝封面＋「加入我的阅读计划」 （与封面同宽、贴封面下方）；右列＝书名＋字段＋「内容介绍」。 ⚠ 2026-10-04「加购跨整行」版式被本版取代（主理人原型拍板按钮回封面下方）； 展开面板/弹窗逻辑不受影响（事件委托认 .addcart 盒，不认它在哪一列）。 · 分区＝**淡细线（--hair）＋留白**的轻分区；区块标题前加首页磁贴同族小图标。 · 字段表改**纯文本 kv 行**（标签暖色小字＋值同行），不再三列格子加顶线。 ⚠ 运行时覆写层（bookApplyLive）锚点 `.book-hero .bd` / `.bmeta` / `.summary-wrap .prose` 全部保持可用 —— 只改 CSS 与 pageBook 输出结构，覆写锚点一个没动。 */ /* ★★ 2026-10-09 晚·二修（主理人线上实测反馈）：grid areas 版（"cv bd"/"ac intro"）在 封面高于右栏文字时，「内容介绍」被压到第二行 ⇒ 右栏挤出一大片空白。 改为**两列壳**：.bh-l（封面＋按钮）｜.bh-r（书名＋字段＋简介**文字流连排**）， 简介紧跟字段行下方——与原型（.hero-right 内 .intro 连排）一致。 */ .book-hero{display:grid;grid-template-columns:300px minmax(0,1fr);gap:0 48px;padding:30px 0 40px;align-items:start} .book-hero .bh-l{display:flex;flex-direction:column;min-width:0} .book-hero .bh-r{min-width:0;border-top:1px solid var(--hair);padding-top:30px} .book-hero .cv{width:100%} /* ★ 2026-10-09 深夜·三修：封面**装裱框**（原型 .cover-box 同值）——细边＋纸底留边＋双层投影； 只挂在 img 上不动 DOM（框随封面列宽）。 ★★ 2026-10-10 四修（主理人线上实测）：封面**固定纵横比 5:7**（300px 列 ⇒ 高 420px）＋ `object-fit:contain` —— 之前只有 width:100%，高度跟原图比例走 ⇒ 有的书封面被拉得明显 更高、右栏文字短时挤出一大片空白。现在所有书的封面框**同尺寸**，图在框内等比缩放， 比例偏差以装裱框纸底补白（视觉上像装裱留边，不突兀）。 */ .book-hero .cv img{width:100%;aspect-ratio:5/7;object-fit:contain;border:1px solid var(--line); background:var(--card);padding:10px; box-shadow:0 1px 2px rgba(35,33,28,.05),0 6px 20px rgba(35,33,28,.06)} .book-hero .bd{min-width:0} .book-hero h1{font-size:34px;margin:0 0 8px;font-weight:600;line-height:1.32} .book-hero .sub{font-size:15.5px;color:var(--muted);margin:0} /* 基本信息：纯文本 kv 行（暖色小标签 + 值），流式换行（原型定稿：无格子、无顶线） */ .bmeta{display:flex;flex-wrap:wrap;column-gap:28px;row-gap:4px;align-items:baseline;margin-top:14px} .bmeta div{display:flex;align-items:baseline;gap:8px;min-width:0} .bmeta i{display:inline;font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.12em; color:var(--warm);white-space:nowrap} .bmeta span{font-size:14px;color:var(--ink-2);line-height:1.7;display:inline;overflow-wrap:break-word} /* 「内容介绍」（summary）在 hero 右栏文字流内；上方淡细线与字段行轻分隔；**不再用左侧 3px 色条** */ .book-intro{border-top:1px solid var(--hair);padding-top:24px;margin-top:26px} .book-intro .sec-cap{margin:0 0 10px} .book-intro .sec-cap h2{margin:0;font-size:20px;font-weight:600} .book-intro .summary-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:0} .book-intro .summary-wrap::before{content:none} /* 加购条：只出形态与规则说明，**不接任何在线交易**（金额与确认由野山线下完成）。 D72：从头部右栏移出，独立成一条整页宽带。 ★★ 2026-10-04（M13b）：形态升级 —— 未登录时 `.ac-btn` 是**跳登录的链接**、 已登录时是**可点的按钮**（展开「寄送方式」并提交到会员侧写入口）。 ⇒ 按钮不再是 `cursor:not-allowed`（那是对"一期不可点"时代的描述）。 */ .addcart{margin:22px 0 0;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2); padding:14px 20px;display:flex;align-items:center;gap:22px;flex-wrap:wrap} /* ★★ 2026-10-04 改版：加购块**融进图书详情页信息卡右栏**（不再独立成整页宽带）—— 无边框无底色，只保留一行按钮与点击后展开的两层选择； 常驻「两种寄法」说明已随改版删除（49_ 回执 §二）。 */ .book-hero .addcart{margin:18px 0 0;border:0;background:none;padding:0;display:block} .addcart .ac-price{flex-basis:100%;margin:2px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.8;color:var(--ink-2)} .addcart .ac-price b{font-weight:600;color:var(--warm)} @media (max-width:900px){ .book-hero .addcart .ac-btn{width:100%;text-align:center;padding:12px 20px} } .addcart .ac-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .addcart .ac-btn{font-family:var(--sans);font-size:14px;padding:9px 20px;border-radius:var(--r); border:1px solid var(--line-2);background:#fff;color:var(--ink-2);cursor:pointer; text-decoration:none;display:inline-block;line-height:1.2} .addcart .ac-btn:hover{border-color:var(--warm);color:var(--warm)} .addcart .ac-btn[disabled]{cursor:default;color:var(--muted);border-color:var(--line-2)} /* ★ 2026-10-09 晚（主理人线上实测）：主按钮「加入我的阅读计划」＝原型 .cta-btn 的 墨绿实底＋通栏（在 .bh-l 内 ⇒ 与封面同宽）；secondary 态（撤销/提交等）仍走 .ac-btn 原样。 ⚠ 必须写在 .ac-btn 基础规则**之后**（同权重后者赢，写前面会被白底盖掉）。 */ .addcart .ac-btn.ac-cta{width:100%;text-align:center;font-size:15px;font-weight:600;padding:13px 20px; border-color:var(--accent);background:var(--accent);color:#fff} .addcart .ac-btn.ac-cta:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff} /* ★★ 2026-10-09 深夜·三修（主理人拍板「会员流程改回居中弹窗，与非会员保持一致」）： 两步内容装进 .ac-pick/.ac-card 弹窗壳（桌面居中偏上／窄屏从底部升起，沿用既有壳规则）； 第一步仍是两个整行选项卡（点击即选），第二步寄送单选＋会员价＋提交。 */ .addcart .ac-card .ac-opt{display:block;width:100%;text-align:left;font-family:var(--sans);background:var(--card); border:1px solid var(--line-2);border-radius:var(--r);padding:11px 14px;cursor:pointer;margin:8px 0 0} .addcart .ac-card .ac-opt b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)} .addcart .ac-card .ac-opt span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.6} .addcart .ac-card .ac-opt:hover{border-color:var(--accent);background:var(--accent-soft)} .addcart .ac-card .ac-opt:first-of-type{margin-top:2px} .addcart .ac-card .ac-modes{display:flex;flex-direction:column;align-items:flex-start;gap:6px; font-size:12.5px;color:var(--ink-2)} .addcart .ac-card .ac-modes label{display:flex;align-items:flex-start;gap:8px; font-size:13px;color:var(--ink-2);line-height:1.7;cursor:pointer;margin:2px 0} .addcart .ac-card .ac-modes label input{margin-top:5px;accent-color:var(--accent)} .addcart .ac-card .ac-price{margin:6px 0 10px;font-size:12px;color:var(--warm)} .addcart .ac-card .ac-submit{width:100%;text-align:center;font-size:13.5px;font-weight:600;padding:10px 16px} /* ★★ 2026-10-09（主理人拍板，原型第五版）：未登录点击＝**弹引导卡**（不再直接跳登录、 不再有「登录后可加入」徽标）——卡内先给专属功能说明（小红书／微信客服），再给「去登录」； 场景：会员没登录时点了，才知道自己能登录。复用 .ac-pick/.ac-card 弹窗体系（事件委托不变）。 */ .addcart .ac-signin-copy{font-size:13px;color:var(--ink-2);line-height:2} .addcart .ac-signin-copy b{color:var(--warm);font-weight:600} /* ★★ 2026-11-04：原来这一行**没写 color** ⇒ 继承 `.addcart p` 的 `--muted`（冷灰褐）， 而小程序那行是暖色红字 `#9A421F` ⇒ 同一句提示两端一暖一灰（上一轮对齐表只比了字、没比颜色）。 这里补 `var(--warm)`，与小程序 `book-detail.wxss` 的 `.ac-signin-tip` 同色系。 */ .addcart .ac-signin-tip{font-size:11.5px;text-align:center;color:var(--warm)} .addcart .ac-go{width:100%;text-align:center;margin-top:4px} /* ── 引导弹层的标题行与客服联络行（2026-11-04 新增）────────────────────────── `.ac-h` 是卡片标题：加购弹层原来**没有标题**，第一行直接是正文， 而右上 `×` 是 `absolute;top:8px;right:8px`（34×34）⇒ 会压在正文第一行末尾上 （2026-11-04 截图可证）。补标题行后重叠自动消失 —— 所以这不只是文案补齐，也是修版式。 字号/字重取 `.ysd-t` 同族但收一档（`.ac-card` 是 520 宽窄弹层，`ysd-card` 是 440 居中弹层）。 */ .addcart .ac-card .ac-h{width:100%;margin:0 0 2px;padding-right:40px; font-family:var(--serif);font-size:16px;font-weight:600;color:var(--ink);line-height:1.6} .addcart .ac-card > .ac-signin-copy{width:100%} /* 客服联络行（兜底档）：把微信号写进弹层，可读、可选中，点一下则整段复制 */ .addcart .ac-contact{width:100%;margin:2px 0 0;font-size:12.5px;line-height:1.9;color:var(--muted)} .addcart .ac-contact b{color:var(--warm);font-weight:600} /* ── 弹层里的并排双按钮（2026-11-04）──────────────────────────────────────── 主按钮实底、次按钮描边，**1.5 : 1**。为什么不是等宽：两颗等权会让人不知道先点哪个 —— 这正是 2026-10-25 撤掉「去登录」那颗的理由；本轮要保留两颗，就必须让主次看得出来。 ⚠ `flex:1.62`（不是 1.5）：flex 分的是**内容盒**，两钮各带左右 20px padding， 按 1.5 分出来外框只有 1.39；补到 1.62 外框才回到 1.5（实测 278.7 : 187.3 = 1.49）。 ⚠ 必须写在 `.addcart .ac-btn` 之后（同权重后者赢，写前面会被基础规则盖掉）。 */ .addcart .ac-duo{display:flex;gap:10px;width:100%;margin-top:4px} .addcart .ac-duo .ac-btn{min-width:0;text-align:center;margin:0;padding-left:10px;padding-right:10px; font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .addcart .ac-duo .ac-btn.primary{flex:1.562 1 0} .addcart .ac-duo .ac-btn.ghost{flex:1 1 0;background:transparent;color:var(--accent); border-color:var(--accent);box-shadow:inset 0 0 0 0 transparent} .addcart .ac-duo .ac-btn.ghost:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)} /* 引导弹层里**只有一颗**按钮的档（多份订阅 / 兜底）：整宽居中，与双按钮那档的视觉重量一致。 ⚠ 只限定 `.ac-card-guide`：`.ac-acts` 在"已提交态"里还装着「我不要了，撤销申请」那颗弱按钮， 那颗**必须**保持收缩（它是补救动作，撑满整行会跟主按钮抢注意力）。 */ .addcart .ac-card-guide .ac-acts{width:100%} .addcart .ac-card-guide .ac-acts .ac-btn{width:100%;text-align:center} /* ── 「写了微信号的地方点一下即复制」（2026-11-04）──────────────────────────── ★ 网页端拉不起企业微信，「联系客服」能做的只有复制微信号 ⇒ 全站那句 「或联系书店微信客服（yeshanbook2023）」由 `bindCopyWx()` 自动挂上 `data-copy-wx`。 ★ 视觉只用**光标 + 淡暖底**，不加下划线、不加图标：这 34 个落点是正文句子， 加下划线会被读成链接（点了却只复制，更困惑）。淡底用 `box-shadow` 扩张， **不占布局** ⇒ 长句折行位置一个字都不会变（本轮验收口径之一）。 ★ 不写 `color` 变化：`.rp-nb` 等既有类各有自己的字色，改色会与页面既有强调打架。 */ [data-copy-wx]{cursor:copy;border-radius:2px} [data-copy-wx]:hover{background:var(--warm-soft);box-shadow:0 0 0 2px var(--warm-soft)} /* ★ 2026-10-09：成功条（清单「想读」成功后插入）——纸底与弹窗面板同风格，文字与按钮分行 */ .addcart .ac-done{flex-basis:100%;border:1px solid var(--line-2);background:var(--card);border-radius:var(--r); padding:12px 16px;font-family:var(--sans);font-size:12.5px;line-height:1.9;color:var(--ink-2)} .addcart .ac-done-t{display:block} .addcart .ac-done-t::before{content:"✓ ";color:var(--accent);font-weight:600} .addcart .ac-done .ac-btn{margin-top:10px;width:100%;text-align:center;background:var(--accent);color:#fff;border-color:var(--accent)} .addcart .ac-done .ac-btn:hover{background:var(--accent-deep);color:#fff;border-color:var(--accent-deep)} /* ── 加购完成面板（2026-10-17 · 与小程序「已加入「待提交」」同构）────────────── 为什么是面板而不是 toast：加购从"当场落库"改成"只入篮子"之后，用户需要知道 ① 东西去哪了（待提交）② 下一步去哪儿（加购页）。toast 装不下这两件事。 色值/圆角全部取既有令牌，不新造。 */ .ac-ok{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff; display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;margin:4px auto 10px} .ac-ok-t{margin:0;text-align:center;font-family:var(--sans);font-size:14.5px;font-weight:600;color:var(--ink)} .ac-ok-p{margin:9px 0 0;text-align:center;font-family:var(--sans);font-size:12.5px;color:var(--warm)} /* 完成面板里的「会员参考价」行用的是 `.ac-price`（门禁 ③h 靠这个类认产出点）， 这里只补"居中"，不改它的口径（暖色/字号由 `.ac-price` 自己给）。 */ .ac-ok-panel .ac-price{text-align:center;margin:9px 0 0} .ac-blockbtn{display:block;width:100%;text-align:center;margin-top:12px} /* 寄送方式（第二层）与结果回显：flex 容器下**独占一行**（`flex-basis:100%`）， 否则会与按钮挤在同一行。 */ /* ★★ 2026-10-04 四改（主理人）：两层选择＝**弹出窗口**，不再在按钮下方展开。 `.ac-pick` ＝ **遮罩层**（铺满视口、半透明，点它自身即关闭）； `.ac-card` ＝ 面板本体（桌面窗内居中偏上／窄屏从底部升起，见窄屏媒体查询）。 ★ 用 `position:fixed` 的前提是**祖先里没有 transform/filter**（有的话 fixed 会改成 相对那个祖先定位）—— 全站实测无此类祖先（只有 hover/active 上的位移，不构成包含块）。 ★ z-index 9000：高于吸顶导航（60）与浮层（200），低于图片灯箱（9999）。 */ .addcart .ac-pick{position:fixed;inset:0;z-index:9000;display:flex;align-items:flex-start; justify-content:center;padding:11vh 20px 20px;background:rgba(26,20,14,.52);overflow:auto} .addcart .ac-modes{display:flex;align-items:center;gap:20px;flex-wrap:wrap; font-family:var(--sans);font-size:12.5px;color:var(--ink-2)} .addcart .ac-modes label{display:inline-flex;align-items:center;gap:6px;cursor:pointer} .addcart .ac-msg{flex-basis:100%;margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.8; color:var(--muted)} .addcart .ac-msg[data-ac-state="ok"]{color:var(--ink-2)} .addcart .ac-msg[data-ac-state="err"]{color:var(--warm)} .addcart p{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.9;color:var(--muted)} .addcart p b{color:var(--ink-2);font-weight:600} /* ★★ 2026-10-04（真机反馈修复）：两层选择器 ＋ 已提交态。 ── 两层为什么要视觉分开：第一层问"要不要从野山买"、第二层问"怎么寄" —— 两件事；挤成一行会被读成一个三选一（原型 ② 屏点名要避免）。 ⇒ 每层一个 `.ac-q` 小问句 ＋ 一组单选；第二层只在选了"加购"后出现（JS 控 `hidden`）。 */ .addcart .ac-q{margin:0 0 2px;font-family:var(--sans);font-size:12px;color:var(--ink-2);font-weight:600} /* 面板本体：原来的"面板内排版"（列向、左对齐、10px 间隙）搬到 `.ac-card` 上。 */ .addcart .ac-card{position:relative;width:100%;max-width:520px;background:var(--paper); border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 18px; display:flex;flex-direction:column;align-items:flex-start;gap:10px; box-shadow:0 18px 48px rgba(30,22,14,.22)} /* ★ 关闭按钮（×）：弹窗必须有显式出口 —— 展开形态可以直接忽略， 浮层形态如果只能"点遮罩"才算会关，键盘用户与手抖用户都会卡住。 */ .addcart .ac-x{position:absolute;top:8px;right:8px;width:34px;height:34px;border:0;background:none; font-size:21px;line-height:1;color:var(--muted);cursor:pointer;border-radius:50%; font-family:var(--sans)} .addcart .ac-x:hover{color:var(--warm);background:var(--paper-2)} /* ★★ 2026-10-10（主理人：「提交按钮居中」）—— 这两条是同一个原因的两面： 两步内容的包裹层（`[data-ac-step]`）是 `.ac-card` 的 flex 子项，而 `.ac-card` 是 `align-items:flex-start` ⇒ 包裹层**收缩到"最宽那行文本"的宽度**（实测 310px， 面板内宽 476px）⇒ 里面的 `width:100%`（提交按钮、第一层两个选项行）只等于那 310px， 于是按钮缩在左边、既不满宽也不居中。 ⇒ 让包裹层自己撑满面板，`width:100%` 才回到"面板内宽"这个本意（提交＝满宽＋文字居中）。 */ .addcart .ac-card > [data-ac-step]{width:100%} /* 提交＝弹窗里的主动作：给主色，和「取消想读」那类弱按钮区分开。 */ .addcart .ac-card .ac-btn[data-ac="submit"]{width:100%;text-align:center;padding:11px 20px;margin-top:2px} .addcart .ac-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)} .addcart .ac-btn.primary:hover{background:var(--accent-deep);color:#fff} /* 弹窗开着时锁住背景页滚动（判据在 JS 里看 DOM 现状 ⇒ 不会锁死，见 acSyncBodyLock）。 */ html.ac-lock,html.ac-lock body{overflow:hidden} .addcart .ac-pick2{display:flex;flex-direction:column;gap:6px;padding-left:2px} .addcart .ac-pick[hidden]{display:none} .ac-pick2[hidden]{display:none} /* 已提交 / 已确认态：**不是灰按钮**，是一句状态话（灰按钮会被读成"暂时点不了，回头再试"） */ .addcart .ac-state{font-family:var(--sans);font-size:13px;color:var(--ink-2); border:1px solid var(--line-2);background:#fff;border-radius:var(--r);padding:9px 16px;line-height:1.2} .addcart .ac-state[data-ac-state="pending"]{border-color:#EBDCCB;background:var(--warm-soft);color:var(--warm)} .addcart .ac-note{flex-basis:100%;margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.8;color:var(--muted)} /* ★★ 2026-10-04 三改：已提交态的「我不要了，撤销申请」（详情页与会员端两处都能撤）。 画成**弱按钮**（描边、字色偏灰）：它是补救动作，不该和主按钮抢注意力。 */ .addcart .ac-acts{flex-basis:100%;display:flex;gap:10px;flex-wrap:wrap;margin-top:2px} .addcart .ac-btn.ghost.sm{font-size:12.5px;padding:7px 14px;color:var(--muted);border-color:var(--line);background:#fff} .addcart .ac-btn.ghost.sm:hover{color:var(--warm);border-color:var(--warm)} /* 「暂时不能提交」时的引导链接（多档/无订阅）—— 与状态句不同：它是**要去的地方** */ .addcart .ac-link{color:var(--warm);text-decoration:underline;text-underline-offset:2px} .addcart .ac-state[data-ac-state="guide"]{color:var(--muted)} /* ★ 区块头（.sec-h）已并入文件开头的「区块」一节——与 .section-head 共用同一套规则， 竖线＋标题＋（注记）＋延伸到版心右缘的细线。此处不再重复定义（D73）。 */ /* ---------------- 长正文：内容简介 / 各类导读（D75：单栏满宽） ---------------- ★ 版本沿革（别再走回头路）： · 初版给简介加 max-width:841px → 块的右边界缩到 1025，比其它块（1256） 差 231px，观感是"右边空着"。 · 于是 D73 改成「块铺满版心 + 长文本分两栏」——又被主理人否掉： 页面里一栏两栏混在一起，短文本被切成每栏仅三行，非常碎。 · **D75 定稿：一律单栏，正文铺满版心，右侧不留空。** 不要再引入 columns，也不要再给左对齐的正文加 max-width。 */ .summary-wrap{display:grid;grid-template-columns:3px minmax(0,1fr);gap:22px;margin-top:16px} .summary-wrap::before{content:"";background:#DCC7A8;border-radius:2px} /* ★★ 2026-10-12（Q6）：**`.prose` 家族（详情页/文章页长文正文）收敛到 14.5px / 行高 1.95**。 原先 6 个值并存：`15/2.02`（基础）·`14.5/1.9`（卡内）·`14/1.85`（延伸列表）·`14.5/2`（图书页）· `14.5/1.92`（月选页）·`lh 2`（月选页窄档）—— 同一语义六份实现。 ★ **字号分档是有意保留的**（独立长文页 `.article-body` 16 ／ 详情页简介 14.5 ／ 卡内/延伸 14）， 本项只收敛**同一场景内部的漂移**与**行高**（行高统一 1.95）。 ★ `.article-body`（来信/关于/法律**独立长文页**）不属本族：它是自己的分档（桌面 16/2 → 窄档 15.5/1.95），不动。 */ .prose{font-size:14.5px;line-height:1.95;color:var(--ink-2);min-width:0} .prose p{margin:0 0 .95em} .prose > :last-child{margin-bottom:0} /* 旧类名保留为空壳：万一某处仍带着 `prose--2col`，也只是单栏，不会再分栏 */ /* 分隔线：源数据里的 ———— / ---- 行 */ .sp-sep{border:0;border-top:1px solid var(--line);margin:1.5em 0 1.3em} /* 卖点条目：★ / ◎ / 🌿 / ❓ 起手的行，保留源符号（作者语气），不再另加项目符 */ .sp-leads{list-style:none;margin:0 0 1.1em;padding:0} .sp-leads li{font-size:1.03em;font-weight:500;color:var(--ink);line-height:1.9; margin:0 0 .3em} /* 小节标题：★内容介绍 / ★编辑推荐 / ★媒体评论 —— 用山褐小字起手，与卖点条目分层 */ .sp-h{font-family:var(--sans);font-size:.85em;font-weight:600;color:var(--warm); letter-spacing:.08em;margin:1.15em 0 .55em} /* 媒体署名行：—— 《新周刊》 */ .sp-by{font-family:var(--sans);font-size:.82em;color:var(--muted);text-align:right;margin:0 0 .5em} /* 卡片里的简介（月选月度页主选卡）：只做摘要，溢出渐隐 */ /* 卡片里的简介用的是卡片自己的字号，条目/署名跟着缩放（相对单位），摘要高度也重设 */ .book-row .prose{font-size:14.5px;line-height:1.95} .book-row .prose--clamp{max-height:10.5em} .prose--clamp{max-height:16.2em;overflow:hidden; -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent); mask-image:linear-gradient(180deg,#000 72%,transparent)} /* 兼容：老的 .summary-p 类名仍可用（等同 .prose 的单栏形态） */ /* 登场记录：标签 + 期号 + 该期标题（链接）；2026-10-09 改版＝去行线，靠留白与悬停底色分层 */ /* ★ 2026-11-01（与「每月选书」同一批）：这块原本**紧贴板块标题**（4px，因为容器是 `
` 无类名、没有任何上边距），而 `.pb-sec` / `.rel-grid` 都在 16px —— 主理人说的「和同页面另外板块不一致」在页面上其实有两处，这是第二处。 加 16px 后三块同值（标题的 4px 下边距会被折叠掉，实际都落在 16px）。 ★ 用属性选择器而不是加类名：这一层是 `bookAppearRefresh` 的**运行时就地刷新锚点** （见 app.js 的 `[data-book-appear]`），改名会牵动那个锚点，不值得。 */ [data-book-appear]{margin-top:16px} .appear{display:grid;grid-template-columns:auto auto 1fr;gap:13px;align-items:baseline; padding:12px 8px;border-radius:var(--r);font-size:14.5px} .appear:hover{background:var(--paper-2)} .appear .ty{justify-self:start;font-family:var(--sans);font-size:11.5px;color:var(--warm); border:1px solid #EBDCCB;background:var(--warm-soft);border-radius:2px;padding:2px 9px;white-space:nowrap} .appear .no{font-family:var(--sans);font-size:12.5px;color:var(--muted);white-space:nowrap} .appear .det{color:var(--ink-2);min-width:0} .appear .det a{color:var(--accent);text-decoration:none; border-bottom:1px solid #DCC7A8;padding-bottom:1px} .appear .det a:hover{border-bottom-color:var(--accent)} /* ★ 第十七轮（2026-09-18）：`.ext-links / .ext-link` 整块撤掉—— 上一轮把它挂在**每本书底层详情页**的登场记录下面，是挂错了地方（主理人要的入口在 「每月选书那本书的信息页」上，见 `.pick-links`）。登场记录保持三列时间轴的统一格式。 */ /* ══════════════════════════════════════════════════════════════════════════ 图书详情页「每月选书」目录带（A17 · 2026-11-01，照 原型_网站_图书详情_v2） -------------------------------------------------------------------------- 改的是什么：这一块原来叫「《书名》的导读」，把三篇导读**全文铺开**（`.guide` 卡）。 现在改成**目录带**：三行导读 + 卡底「查看本期选书 →」，点行跳月选详情页对应那一块。 ⇒ `.guides` 包裹层**退役**（`.guide` 一族本身保留：书单页等仍在用，删了会塌）。 ★ 逐值来源＝原型 v2 的 `.pick-band/.pb-*`（px 原样，本站 1px＝1px）。 ★ 这一块**不由构建期产出**（`book.html` 是空壳，只由 app.js 运行时画） ⇒ G11 两腿对拍结构上覆盖不到，判据在 `check_plan_article.js` ⑨ 组。 ══════════════════════════════════════════════════════════════════════════ */ /* 板块头：**不再覆盖 `.sec-h` 的边距**（2026-11-01 修 —— 原注「`.sec-h` 默认 44px 0 4px 贴下一块太紧」把病因判反了：同页别的板块是「4px 下边距 ＋ 内容块 `margin-top:16px`」 ＝ **20px**，而这里写 14px ⇒ 偏紧 6px，正是主理人点出的「离下面的卡片太近、 和同页面另外板块不一致」。⇒ 下边距交回 4px、间距交给 `.pick-band` 的 16px， 与 `.summary-wrap` / `.rel-grid` 完全同构。上边距与 `.sec-h` 同值 44px。 */ .pb-sec{margin:44px 0 4px} /* 目录带：上内距 2px 是给第一行 `border-top:0` 留的呼吸，不是随手写的； 上外边距 16px ＝ 同页 `.summary-wrap` / `.rel-grid` 的同一个值（不是随手写的，见上一条） */ .pick-band{background:var(--paper-2);border:1px solid var(--line); border-radius:var(--r);padding:2px 30px 0;margin-top:16px} /* 一行：54px 序号栏 ｜ 正文列 ｜ 14px 箭头 */ .pb-row{display:grid;grid-template-columns:54px minmax(0,1fr) 14px;gap:0 18px; align-items:center;padding:17px 0;border-top:1px solid var(--hair); text-decoration:none;cursor:pointer} .pb-row:first-child{border-top:0} .pb-row .n{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.2; color:var(--warm);letter-spacing:.02em;opacity:.85} .pb-row .mb{min-width:0} .pb-row .tt{display:block;font-size:16.5px;font-weight:600;line-height:1.5; color:var(--ink);transition:color .15s} /* 摘要**单行截断**（原型就是单行，不是两行）：JS 侧不截，截断在这里 */ .pb-row .s{display:block;margin-top:4px;font-size:13.5px;line-height:1.6; color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pb-row .go{font-size:15px;color:var(--muted);transition:transform .15s,color .15s} .pb-row:hover .tt,.pb-row:hover .go,.pb-row:hover .n{color:var(--accent)} .pb-row:hover .go{transform:translateX(2px)} /* 键盘可达：目录行是 ，用 focus-visible 而不是 focus（鼠标点完不留框） */ .pb-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} /* 卡底：锁图标 + 篇数 ｜ 查看本期选书 → */ .pb-foot{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:14px 0 15px;border-top:1px solid var(--hair)} .pb-mo{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans); font-size:12px;color:var(--warm)} .pb-mo svg{width:11px;height:12px;flex:none} .pb-more{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--accent); text-decoration:none} .pb-more:hover{text-decoration:underline} /* 相关推荐（本期新书选中的其他图书 / 同作者的其他书）：2026-10-09 改版＝横条小卡 3 列 （封面 54px + 右侧书名/作者），占屏高度约为旧竖卡版一半；窄屏两列（见 720 断点） */ .rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px;margin-top:16px} .rel-card{display:flex;gap:13px;align-items:center;padding:9px 12px 9px 9px;border:1px solid var(--line); border-radius:var(--r);background:#fff;min-width:0} .rel-card:hover{border-color:var(--line-2);background:var(--paper-2)} .rel-card .cv{flex:none;width:54px} .rel-card .cv img{width:100%;display:block} .rel-card h4{margin:0;font-size:14px;font-weight:600;line-height:1.55; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .rel-card .who{font-family:var(--sans);font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.6; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} .rel-card:hover h4{color:var(--accent)} /* 「查看本期全部」：桌面放区块头（.sec-h .more-link）；网格内这份只在窄屏出现（落第 9 本右侧空格） */ .rel-grid .rel-all{display:none} /* ---------------- 通用 ---------------- */ .empty{text-align:center;padding:70px 20px;color:var(--muted);font-family:var(--sans);font-size:14px} .empty h3{font-family:var(--serif);font-size:20px;color:var(--ink);margin:0 0 10px;font-weight:600} .prototype-note{font-family:var(--sans);font-size:11px;color:var(--muted);text-align:center;padding:14px 0 30px} /* ---------------- 「这本书的延伸阅读」（每月选书详情页，口径 2026-09-19 改） ---------------- 内容＝**派生自主题书单**：本月主选书对应那期书单的 9 本「分类X・核心」书，平铺 9 行。 （信息卡的「延伸书单」**不在本站采用**，转主题书单项目储备书目——那份数据不渲染。） 样式：**复用站点既有的书目行语言**（.book-row：封面 ＋ 编号徽标 ＋ 书名 ＋ 推荐语）， 只补「容器 ＋ 封面尺寸 ＋ 行距微调」，不另起一套视觉。 ★ 折叠（主理人 2026-09-19）：整列**默认收起**；开关**与标题同一行**（不再单独占一条 居中折叠条 —— 收起时只是标题行右端一枚小按钮，不突兀）。状态只用 `.all` 一个类 （站内统一的「已展开」类名，由 app.js:initFolds() 切换）。 ★ 刻意**不沿用 `.mchips.fold{max-height}` 那套动画**：一列 9 行带推荐语， 高度上限给不出合适的值 → 直接 display 切换最实在，也绝无截断风险。 */ .ext-list{display:none;margin-top:2px} .ext-list.all{display:block} .ext-list .book-row{padding:16px 0} .ext-list .book-row:first-child{padding-top:2px} .ext-list .book-row .cv{width:64px} .ext-list .book-row h3{font-size:16px;margin:0 0 6px} .ext-list .book-row .prose{font-size:14px;line-height:1.95} /* 折叠开关并入区块头：order:2 让它落在细线右端、与标题**同一行**（与 `.more` 同位） */ .section-head .fold-btn,.sec-h .fold-btn{order:2;flex:none;padding:3px 12px} /* 单本行（2026-10-10 主理人改版）：简介挪出 .bd 成独立 .row-sum 后，行改**两列网格** —— 桌面端网格区「cv bd / cv sum」：封面竖跨两行、垂直居中；.bd（年月＋书名＋信息行）与 .row-sum（简介）自上而下落在右栏 —— 视觉与旧 flex 版**完全一致**，只是 DOM 分了块 （手机端 @media 里把 .row-sum 换到第二行横铺整行，见 ≤720 档注释）。 */ .book-row.eq{display:grid;grid-template-columns:150px minmax(0,1fr); grid-template-areas:"cv bd" "cv sum";column-gap:30px;align-items:stretch} /* ★★ 2026-10-10 四轮（主理人）：封面高度自适应右栏 —— .cv 绝对定位填充， img 不参与行高计算 ⇒ 行高完全由右栏文字决定，两侧零空白（原型 CDP 实测 hDiff 0）。 contain 不裁切封面画心；列宽 150px 是画心填充率的最优点（164px 反而更差——文字栏变高）。 */ .book-row.eq .cv{grid-area:cv;width:100%;display:flex;align-items:stretch;position:relative;min-height:200px} .book-row.eq .cv img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border:0;background:transparent} .book-row.eq .bd{grid-area:bd;display:flex;flex-direction:column;min-width:0} .book-row.eq .row-sum{grid-area:sum;min-width:0} .rw-month{font-family:var(--sans);font-size:12.5px;letter-spacing:.06em;color:var(--warm);margin-bottom:8px} /* ---------------- 每月选书：年份筛选标签条（2026-10-10 主理人改版） ---------------- 旧「.mrow 年份分组 ＋ .mchip 月份刻度」整套退役（月份 chip 点了就跳走、起不到 「筛本页」的作用）—— 改成「全部 / 各年份」标签条，由 app.js initPlanTabs 委托过滤。 视觉沿用旧 .mchip 的语言（胶囊、纸底、选中苔绿淡底），只是从「跳转导航」变「本页筛选」。 */ .rp-tabs{display:flex;flex-wrap:nowrap;gap:8px;margin-top:16px;overflow-x:auto;scrollbar-width:none} .rp-tabs::-webkit-scrollbar{display:none} /* ★ 2026-10-10 四轮：胶囊不可收缩（flex:none）—— newbook 索引复用本条；恒一行、超出横滑 */ .rp-tab{font-family:var(--sans);font-size:13px;padding:6px 15px;min-height:32px;flex:none; border:1px solid var(--line);border-radius:100px;color:var(--muted);background:#fff; cursor:pointer;display:inline-flex;align-items:center;gap:7px} .rp-tab:hover{border-color:var(--accent);color:var(--accent)} .rp-tab.on{background:var(--accent-soft);border-color:#CFDECF;color:var(--accent);font-weight:600} .rp-tab-n{font-family:var(--sans);font-size:11px;font-weight:400;color:var(--muted)} .rp-tab.on .rp-tab-n{color:var(--accent)} /* 月份选择与下方书目之间的那条横线（不用再写「按月份倒序」这种说明） */ .rp-cards{border-top:1px solid var(--line);margin-top:28px} /* ---------------- 月选列表卡 · 信息行两组化（2026-10-10 四轮，主理人原型定稿） ---------------- 主信息组（作者/译者/出版/出版时间/页数）＋补充组（定价/豆瓣/ISBN）。 ★ 组内**整字段**换行：字段自身 nowrap 永不拆半，行宽不够 ⇒ 整字段落下一行（3→4 行自适应）； ★ 间距全走父级 column-gap —— 落行后与「作者」左缘对齐（.g+.g margin 方案在换行后 仍生效，曾把第二行整体缩进 18px，四轮已修）。 ★★ 只作用于 .book-row.eq（月选列表卡）；新书选/书单/详情页的 .meta 平面结构不受影响。 ★ 手机端（≤720）由窄屏块接管：.g1 只留五项、.g2 整组隐藏。 */ .book-row.eq .meta{display:flex;flex-wrap:wrap;gap:2px 18px;align-items:baseline;width:100%} .book-row.eq .meta .g{display:inline-flex;flex-wrap:wrap;gap:2px 14px;min-width:0} .book-row.eq .meta .g span{white-space:nowrap} /* ---------------- 三块导读（D70 重排：卡内「序号栏 + 正文栏」） ---------------- 主理人反馈：序号 11px 几乎看不见，三段导读整体挤在左侧、右边大片留白。 改法：每块做成浅底卡片铺满版心；卡内左侧 78px 序号栏（30px 衬线 + 短横线）， 右侧正文栏标题 21px、正文最宽 820px——序号有了体量，正文有了明确起止。 */ .guide{display:grid;grid-template-columns:78px 1fr;gap:26px; background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r); padding:26px 30px 28px;margin-bottom:14px} .guide:last-of-type{margin-bottom:0} .g-num{font-family:var(--serif);font-size:30px;font-weight:600;color:var(--warm); line-height:1;letter-spacing:.02em;padding-top:3px} .g-num::after{content:"";display:block;width:24px;height:2px;border-radius:2px; background:var(--warm);opacity:.45;margin-top:13px} .g-body{min-width:0} .g-body h3{margin:0 0 13px;font-size:21px;font-weight:600;line-height:1.5} .g-body p{margin:0 0 .9em;font-size:15.5px;line-height:1.98;color:var(--ink-2)} .g-body p:last-child{margin-bottom:0} /* ★ 方案 E（2026-09-20）：导读「左右对照」——文字为主，右侧素材图（书店导读配主题图； 作者/译者/编辑导读配手写件）。无图则整块退回纯文字（不出空壳）。 ★★ 2026-09-20 二次调整（主理人反馈「图片太小，高度至少翻倍」）： 列宽 141→250px，并**取消 max-height 硬顶**，图片按自身比例铺满列宽 → 2:3 的图约 250×376， 高度 ≈ 原 188 的 2 倍。导读正文动辄 700–900px 高，图仅 188px 时图下会留一大片空白， 故给 `.g-side` 加 `position:sticky`：图片在导读块内**跟随滚动**，长文读到哪、图就陪到哪。 多图（同一位手写者留了两张，全站仅 202505「我脑袋里的小狐狸」1 例）改成列内两栏小网格， 避免竖排把导读撑得过高；`.art-sm` 从此只作 `:has()` 的钩子，不再承担尺寸语义。 */ /* ★★ 2026-09-20 第三轮（主理人）：素材图**下移，与正文首行齐平**（原来与标题齐平）， 图下补一行物料说明；sticky 跟随滚动保持不变。 做法：外层只留「序号 ｜ 正文」，把「正文 ＋ 素材」一起收进子网格 `.g-flow`， 子网格的顶边正好落在 h3 的下边距之后 ＝ 第一个 `

` 的顶边 ⇒ 天然齐平。 ★ 不要用 `margin-top` 硬写偏移量：标题一折行、字号一调，那个数就不准了。 */ .guide.has-art{grid-template-columns:78px minmax(0,1fr);gap:26px} .g-flow{display:grid;grid-template-columns:minmax(0,1fr) 250px;column-gap:24px;align-items:start} .g-text{min-width:0} .g-side{align-self:start;position:sticky;top:96px;display:flex;flex-direction:column;gap:10px} .g-side:has(.art-sm){display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start} /* 素材图 ＋ 图下一行物料说明（导读卡 / 作者手迹 / 译者手迹 / 编辑手迹）。 ★ 说明文字由「这块导读是谁写的」派生（`build_prototype.py:_GUIDE_CAP` ↔ `app.js:GUIDE_ART_CAP`）， 不新造数据字段；将来后台开了素材上传页，再考虑让它可编辑。 */ .art-fig{margin:0;min-width:0} .art-cap{margin:6px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.5; color:var(--muted);text-align:center} /* `aspect-ratio` 同样是**占位**用途：素材一律竖构图（主题图中位 0.666、手写件 0.662，即 2:3）， 先按 2:3 占好 250×375，图片加载完成后 contain 填满，滚动时不会突然「啪」地跳出一大块。 */ .g-side .art-img{width:100%;aspect-ratio:2/3;height:auto;max-height:none;object-fit:contain; background:#fff;border:1px solid var(--line);border-radius:2px;cursor:zoom-in;display:block; box-shadow:0 1px 2px rgba(34,32,29,.05),0 6px 18px rgba(34,32,29,.05)} /* ★ 2026-09-20：素材图放大后已是「可点开的大图」，悬停与键盘聚焦都要看得出来 （app.js 给这些图补了 tabindex=0，键盘 Enter/空格同样能开灯箱）。 */ .g-side .art-img:hover,.main-pick.eq .cv .ph img:hover{opacity:.94} .g-side .art-img:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* 信息卡 `.ph` 带 overflow:hidden，外描边会被裁掉 → 改用内阴影画焦点环 */ .main-pick.eq .cv .ph img:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--accent)} /* ★ 2026-09-20 第五轮：封面现在焦点落在外层 `` 上（img 不再是焦点目标）， 所以焦点环要画在 `` 上；负 offset 让环画在元素内侧，才不会被 `.ph` 的 overflow 裁掉。 */ .main-pick.eq .cv .ph a:focus-visible{outline:2px solid var(--accent);outline-offset:-3px} /* ★ 2026-09-17 修：原来有一条 `.guide p:last-child{color:…;font-size:14px}`， 把每块导读的**最后一段**单独缩小、变灰，看起来像「正文有两种字体、最后一段字号不一样」。 那是排版意外，不是设计——已删除，全块正文统一。 */ @media (max-width:720px){ .guide{grid-template-columns:1fr;gap:12px;padding:22px 20px 24px} .g-num{font-size:22px} .g-num::after{width:20px;margin-top:9px} .g-body h3{font-size:19px} /* 方案 E 移动端：信息卡竖叠（媒体列在上），导读图在文字下排成横条。 ★ 2026-09-20：素材同步放大（信息卡高 240、导读图高 240），并**取消 sticky** （窄屏图在文下，跟随无意义）。 ★★ 2026-09-20 第三轮：媒体列改成**单幅轮转**（与桌面同一形态），窄屏不再并排两图。 */ .main-pick.eq{flex-direction:column;gap:16px} .main-pick.eq .cv{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start} .main-pick.eq .cv .ph,.main-pick.eq .cv .ph:nth-child(2){height:auto;width:100%;aspect-ratio:7/10} /* 轮转图窄屏：舞台按 7:10 自适应（封面零留白，定妆照上下各约 3%），整列居中；切换条随列宽。 ★ 说明：`.ph` 的绝对定位/尺寸由上方那条更高优先级的轮转规则统一管住，这里不必重复。 */ .main-pick.eq .cv.rot{width:100%;max-width:320px;margin:0 auto; display:flex;flex-direction:column;gap:10px;align-items:stretch} .main-pick.eq .cv.rot .rot-stage{height:auto;width:100%;aspect-ratio:7/10} .guide.has-art{grid-template-columns:1fr;gap:14px} /* 窄屏：子网格塌成一列，素材排到正文之后（此时「与首行齐平」不再适用，也不该适用） */ .g-flow{grid-template-columns:1fr;row-gap:14px} .g-side{flex-direction:row;flex-wrap:wrap;gap:10px;position:static} .g-side:has(.art-sm){display:grid;grid-template-columns:1fr 1fr;gap:10px} .g-side .art-img{width:auto;max-width:100%;height:240px} } /* ---------------- 首页「每月选书」轮转（D48 + 2026-09-17 减法） ---------------- 一屏一期：左边本月封面（缩小、竖图不裁），右边**只有书名 + 一段不超过三行的简介**。 元信息（作者/出版/页数/定价）不在这里出现——按主理人要求全部删掉。 */ .psc{background:var(--paper-2);border-color:var(--line)} /* 视口用 grid 叠放幻灯（都在 1/1 格），高度由最高的那张自然撑开—— 必须把 .sc-vp 基础款的 aspect-ratio 覆盖成 auto，否则窄屏下内容会被裁掉； 也不再依赖固定宽高比，避免窄屏「aspect-ratio:auto 但幻灯仍是 absolute」 导致容器塌成 0 高（2026-09-17 在 860px 断点实测踩到）。 */ .psc .sc-vp{display:grid;aspect-ratio:auto} .psc .sc-slide{position:relative;inset:auto;grid-area:1/1} .psc .sc-btn{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)} .psc .sc-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)} .psc .sc-dots{right:26px;bottom:15px} .psc .sc-dot{background:rgba(34,32,29,.16)} .psc .sc-dot.on{background:var(--accent)} .ps-month{position:absolute;left:30px;bottom:17px;font-family:var(--sans);font-size:12px; letter-spacing:.14em;color:var(--warm);z-index:2} .ps-slide{display:grid;grid-template-columns:132px 1fr;gap:30px;padding:22px 30px 46px;align-items:center} .ps-cv{display:block;flex:none} .ps-cv img{width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--line-2); border-radius:2px;background:var(--paper-3);box-shadow:var(--shadow)} .ps-bd{min-width:0} .ps-t{margin:0 0 14px;font-size:26px;font-weight:600;line-height:1.4} .ps-t a:hover{color:var(--accent)} .ps-x{margin:0;font-size:14.5px;line-height:1.95;color:var(--ink-2); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* ---------------- 首页「野山主题书单」（2026-09-17 减法） ---------------- 与「每周新书选」同款节奏，四件套：标题 → 一句主推推荐语（左竖线）→ 一行图带 → 一行说明。 原来的两栏（左主推信息卡 ＋ 右三分类核心/延伸两排）元素太多，按主理人要求砍掉。 */ .bl-lede{font-size:19px;line-height:1.8;margin:0 0 22px;padding-left:18px;border-left:3px solid var(--accent)} .bl-band{display:grid;grid-template-columns:repeat(10,1fr);gap:6px} .bl-band a{display:block} .bl-band img{width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--line); border-radius:2px;background:var(--paper-2)} /* 主题书单在公号图表里没有封面列 → 除主推外的书目用「书脊色块」占位，不假装有封面 */ .bl-foot{margin-top:18px;font-family:var(--sans);font-size:12.5px;color:var(--muted); display:flex;gap:8px;flex-wrap:wrap;align-items:baseline} .bl-foot a{color:var(--accent)} /* ---------------- 响应式 ---------------- */ @media (max-width:900px){ /* ★★ 2026-10-12（Q3）：平板档版心 **24 → 18px**。 原先 `.wrap` 只在 ≤720 被收到 18px，**721–900 这一段仍是桌面 24px** ⇒ 平板与手机两档版心不同， 且与会员端（其平板/手机档均已 18px，见 me/theme.css）也对不上。补此一处即三段同口径。 ★ 只动横向，纵向不变。 */ .wrap{padding:0 18px} /* ★★ 2026-10-12（Q5）：**小节标题 21 → 19px**（平板/手机档）。 原先内容站 ≤720 与 ≤900 **都没有覆盖** ⇒ 平板/手机档仍是桌面 21px，而会员端 `.section-head h2` 在窄档是 19px ⇒ 两端差 2px。此处统一到 19px（桌面档仍 21px，与正文"桌面大/窄档小"同逻辑）。 ★ `body[data-page="book"] .sec-h h2` 早已是 19px ⇒ 与本文一致，不冲突。 ★ 首页 `.legacy .section-head h2`（17.5px）属 v13 首页**特型**，不在本项。 */ .section-head h2,.sec-h h2{font-size:19px} /* ★★ 2026-10-12（Q4 补洞）：**页主标题组** —— 与上方 Q3/Q5 同一原因： 这 5 个类原先**只在 ≤720 档**设了窄档值 ⇒ **721–900 区间回落桌面值**。 ★ CDP 实测（未补洞前）：834px 下 `.page-head h1` 仍是 **34px**， 而手机档是 23px ⇒ 平板档与手机档的标题口径不一致。 ⇒ 在本档（≤900）补齐，让"平板档 = 手机档"的标题口径成立。 */ .page-head h1{font-size:23px} .issue-head h1{font-size:23px} .issue-head .theme{font-size:22px} /* 期次副标题：刻意低一档（与桌面 30/27 同比例） */ /* ★★★ 2026-10-12（批 W10）：`.article-head h1` / `.ih2 h1` 的窄档值**不能写在这里** —— 它们的**桌面值**写在本文件**更靠后**（期头改造段 L2368），而 `@media` **不增加特异性**、 同特异性下**后写的赢** ⇒ 写在这里等于**死规则**（834px 实测仍是 30px，应为 23px）。 原先此处那两条**已删除**，窄档值移到 L2378 之后新补的 `@media (max-width:900px)`。 ★ 这一类由新门禁 `backend/tools/check_dead_media_rules.py` 守（挂 `ci.sh fast`）。 */ /* 两栏正文在窄屏折回单栏（960px 以下两栏每栏不足 460px，中文会碎行） */ .about-grid{grid-template-columns:1fr;gap:30px} /* ★★ 2026-10-04 二改（主理人真机反馈，参照手机版豆瓣图书条目）： 窄屏**不再**「封面在上、书名与字段在下」地纵向堆 —— 改成**封面在左（104px）、 书名与字段在右**。原纵向堆叠在真机上的两个病：封面两侧空一大片、字段区半屏只摆得下三行。 同时把字段字号/行距/间隔整体收一档（原值是按桌面三列排的，搬到窄屏就显得松）。 */ /* ★★ 2026-10-10-09 改版（主理人原型定稿）：中屏保持两列 grid，封面与字号收一档。 （原 2026-10-04 的「封面在左 104px 横排」被本轮原型取代——手机端改回纵向堆叠，见 720 断点。） */ .book-hero{grid-template-columns:200px minmax(0,1fr);gap:0 32px;padding:24px 0 30px} .book-hero h1{font-size:24px;line-height:1.32;margin-bottom:6px} .book-hero .sub{font-size:13.5px;line-height:1.5} .bmeta{column-gap:18px} .bmeta i{font-size:10px} .bmeta span{font-size:12.5px;line-height:1.5} .section-head,.sec-h{row-gap:3px} .section-head::after,.sec-h::after{display:none} .main-pick{flex-direction:column} .main-pick .cv{width:110px} .letter-card{flex-direction:column;gap:16px} .letter-card .cv{width:100%} /* 首页紧凑卡窄屏：取消桌面垂直居中，文本恢复满宽左对齐（与列表页卡一致） */ .letter-card .cv img{aspect-ratio:16/9} } @media (max-width:720px){ /* ★ CL-14（2026-09-18）：移动端折叠菜单内显示检索入口（顶栏 nav-search 在窄屏隐藏）。 */ .nav-search-li{display:block;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink-2)} /* ★ 2026-09-21（主理人）：「我的」与「目录」窄屏风格统一 —— 等高 36px、同一种胶囊外框、 同字号同内距、并排贴右。原先两条规则都写了 margin-left:auto，剩余空档被自动外边距 平分，「我的」被推到栏中段（实测 x=187 / 栏右缘 372），看着像两个不同来源的控件； 现在只保留「我的」的 auto，让两个胶囊连续贴右。 */ /* ★ 2026-09-21（变体 D · 依据《窄屏首屏引言块_线稿方案 v0.1》）：窄屏首屏引言块 由 229px 降为「类公告栏体量」的两行小字（店名＋品牌句），导语整块让位首屏， 首屏主角交给金句 → 按钮。宽屏逐字不动。 导语 `.lead` 仍在 DOM 里（宽屏可见、后台仍可改字），窄屏只是不显示 —— 落点待主理人定。 */ /* ★ 2026-09-21：品牌行自 CL-08 起是

，会被这条通用规则命中 —— .hero h1（0-1-1） 权重高于 .brand-row（0-1-0），窄屏字号被顶到 29px；且 .brand-name 未自设字号， 会继承该值变大（.brand-note 自带 13.5px 故不受影响），视觉上头重脚轻。 排除品牌行，保留「真正的页首大标题窄屏 29px」原意。 */ /* ★★ 2026-10-12（Q4）：页主标题统一 **23px**（原 25）。 全站"页主标题"此前 **4 个值**：page-head 25 ／ issue-head h1 23 ／ article-head 22 ／ ih2 22， 且与会员端 `.page-head h1`（23px）也对不上。⇒ 一律 **23px**。 ★ 展示型大标题**不属本项**：`.yk-hero h1` 31px（寻书页深底 hero，奶油字）、首页门面金句。 */ .page-head h1{font-size:23px} /* ★ 2026-10-10 四轮：期次头主题标题 —— 去竖线已在基础区；窄屏 17→22px（向手机主标题 25px 看齐） ★ 2026-10-12（Q4）：`.issue-head h1` 23px = 页主标题口径 ✓ 不动； `.theme` **保持 22px** —— 它是期次的**副标题**（桌面档 30/27 同比例，刻意低一档，非漏改）。 */ .issue-head h1{font-size:23px} .issue-head .theme{font-size:22px} /* ★★ 2026-10-10 四轮（主理人）：新书选单期卡手机版 —— 与月选卡同规范一比一： 封面 76→104（白底描边框，与详情页 .book-hero .cv img 同语言）、等高对齐（stretch）； 序号徽标已并入书名行（DOM 改动，无需样式钩子）；信息行隐藏 定价/ISBN（.g2 整组隐藏）， 只留 作者/译者/出版/出版时间/页数、整字段换行（3~4 行自适应）；简介整行铺下方、无细线。 */ /* ★★ 2026-10-10 复核修复（主理人对照原型手机版）：新书选单期卡手机版 —— 行改两行网格「cv bd / sum sum」：简介 .row-sum 横铺**整行**（原实现挤在 封面右侧窄栏里＝布局不对的根因）；封面 104 恢复**正常流**（width:100%、 高度随固有比例，aspect-ratio 仅作加载占位）——原 flex stretch + img height:100% 会把封面拉到右栏高度再被 cover 裁掉上下（「显示不全」根因）。 与月选列表卡手机版（.book-row.eq ≤720 档）同一套规范，一比一。 */ body[data-page="newbook-detail"] .book-row{grid-template-columns:104px minmax(0,1fr); grid-template-areas:"cv bd" "sum sum";column-gap:16px;row-gap:12px;padding:18px 0} body[data-page="newbook-detail"] .book-row .cv{width:auto;display:block} body[data-page="newbook-detail"] .book-row .cv img{position:static;width:100%;height:auto;aspect-ratio:7/10; object-fit:cover;border:1px solid var(--line);background:var(--card);padding:7px; box-shadow:0 1px 2px rgba(35,33,28,.05)} body[data-page="newbook-detail"] .book-row .meta .g2{display:none} body[data-page="newbook-detail"] .book-row .row-sum{font-size:13px;line-height:1.8;margin:0} .book-row{gap:14px} .book-row .cv{width:76px} /* ★ 2026-10-12（批 W10）：此处原有 `.article-head h1{font-size:23px}`，被更靠后的桌面值 （L2368 `.article-head h1{30px}`）盖掉 ⇒ **死规则，已删除**； 窄档值统一由文件末尾新补的 `@media (max-width:900px)` 给。 */ .article-body{font-size:15.5px;line-height:1.95} .plan-compare{grid-template-columns:1fr} /* ★ 2026-09-28（v0.3 主理人终审）：窄屏页脚只留居中底块 —— 三栏（地址/时间·逛一逛·找到我们）整体隐藏，书店地址以 10.5px 并入底块首行 （.copy-addr 断行跟随后台 address 配置），版权/备案·协议依次居中。 宽屏三栏照旧，配置值不动、仅 CSS 显隐。 */ /* ★ 2026-09-28（v0.3）：协议页窄屏字号（宽屏 14.5px 见基础区 legal 规则）。 */ body[data-page="legal"] .article-body{font-size:12.5px;line-height:1.78} body[data-page="legal"] .article-body p{margin:0 0 .8em} body[data-page="legal"] .article-body h2{font-size:12.5px;line-height:1.78;margin:1.1em 0 .45em} /* ★ 2026-09-28（v0.3）：首页「找一本书」检索胶囊窄屏居中（仅 ≤720px，宽屏不动）。 */ .wrap{padding:0 18px} /* ★★ 2026-10-09 详情页改版（主理人原型定稿）——窄屏单列： 封面（居中 158px）→ 书名（居中）→ 信息两行（居中）→ 窄条按钮（通栏）→ 内容介绍。 ★★ 2026-10-09 晚·二修：桌面改 .bh-l/.bh-r 两列壳后，窄屏用 `display:contents` 解开两壳，再按 order 排出上面的流（DOM 序是 cv→按钮→bd→简介，order 校正）。 CDP 量化（原型）：按钮底部 559px < 一屏 844px。 ★★ 2026-10-10 三修：桌面规则（612 行）带 `align-items:start`，本块换成列向 flex 后 没重置它 ⇒ 交叉轴变成「贴左＋收缩到内容宽」——书名短的 `.bd` 缩成 ~168px 贴左， 视觉上"书名/作者没居中"（书名长的撑满整行 ⇒ 只有部分书露馅，主理人 10-10 手机实测）。 补 `align-items:stretch` 让 `.bd` 恢复通栏，`text-align:center` 才有宽度可用； 封面有 `align-self:center`、按钮有 `width:100%`，均不受影响。 */ .book-hero{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:16px 0 30px} .book-hero .bh-l,.book-hero .bh-r{display:contents} .book-hero .cv{width:158px;align-self:center} .book-hero .cv img{padding:7px} .book-hero .bd{text-align:center;margin-top:13px} .book-hero .addcart{order:3;margin-top:13px;width:100%} .book-hero .addcart .ac-btn{width:100%;text-align:center;padding:9px 8px;font-size:13px} .book-hero .addcart .ac-top{width:100%} .bmeta{justify-content:center;margin-top:8px;column-gap:16px} .bmeta i{font-size:10.5px} .bmeta span{font-size:13px;line-height:1.8} .book-intro{order:4;margin-top:24px;padding-top:20px;text-align:left} .book-intro .prose{font-size:14.5px;line-height:1.95} /* 区块头（手机端，原型定稿，**仅图书详情页**——.sec-h 全站共用不挪）： 「第 X 期 · 共 N 本」注记删除（.rel-note 专类）；标题与图标收一档 */ body[data-page="book"] .sec-h h2{font-size:19px} body[data-page="book"] .sec-h h2 .hic{width:18px;height:18px;vertical-align:-3px;margin-right:8px} .sec-h .rel-note{display:none} /* 登场记录窄屏：白底卡（与下方书卡同语言），三元素流式一行（标签+期号+标题连排自然折行） */ .appear{display:block;border:1px solid var(--line);background:#fff;border-radius:var(--r); padding:13px 15px;font-size:14px;line-height:2.1} .appear + .appear{margin-top:8px} .appear .ty{margin-right:8px} .appear .no{margin-right:10px} .appear .det{display:inline} /* 本期新书选中的其他图书：两列紧凑小卡；「查看本期全部」落第 9 本右侧空格右下角、 底边贴齐左侧卡片方框底线（原型定稿）；区块头的「查看本期全部」窄屏隐藏（避免双出口） */ .rel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px} .rel-card{gap:9px;padding:6px 8px 6px 6px} .rel-card .cv{width:40px} .rel-card h4{font-size:12.5px} .rel-card .who{font-size:10px;margin-top:2px} .sec-h .more{display:none} .rel-grid .rel-all{display:flex;align-self:end;justify-self:end;align-items:center; padding:0 0 8px 2px;font-family:var(--sans);font-size:11.5px;color:var(--warm)} .rel-grid .rel-all:hover{text-decoration:underline;text-underline-offset:3px} /* 两个跨板块入口在窄屏各占一行，不再并排（否则长文案会挤成一团） */ .pick-links{flex-direction:column;gap:8px} .summary-wrap{gap:12px} .addcart{padding:14px 16px;gap:12px} .addcart .ac-btn{font-size:13px;padding:8px 16px} /* 轮换文案与等高书目行在窄屏收一档 */ .hq{min-height:132px} .hq-item.on{flex-direction:column;align-items:flex-start;gap:0} .hq-item p{font-size:24px;line-height:1.55} .hq-item cite{font-size:11.5px;margin-top:12px} .hq-sm{min-height:88px} .hq-sm .hq-item p{font-size:17px} /* ★★ 2026-10-10（主理人示意图）：月选卡手机版 —— 封面在左（白底描边框， 与详情页 .book-hero .cv img 同语言），右栏自上而下＝「年·月」**纯文字**（★四轮： 退役胶囊，避免与筛选标签胶囊撞形）→ 书名 →（副标题）→ 信息行；简介 .row-sum 落到 第二行**横铺整行**（★四轮：不用细线分隔）。DOM 就是桌面端那份（网格区换行即成）。 ★ 四轮：封面 118→104（主理人「手机端封面再小一点点」）。 */ .book-row.eq{grid-template-columns:104px minmax(0,1fr); grid-template-areas:"cv bd" "sum sum";column-gap:16px;row-gap:12px;padding:20px 0} /* ★★ 2026-10-10 复核修复（主理人线上实测「封面看不清」）：桌面档给 img 的 position:absolute（等高技法）泄漏到了窄屏 —— 绝对定位的 img 不参与行高 ⇒ .cv 被右栏高度压成 104×57 的扁条。窄屏照原型恢复**正常流**（img width:100%、 高度随固有比例撑起，104px 宽 ⇒ 约 150px 高）；aspect-ratio 仅作加载中占位， 图片加载后固有比例接管，与原型手机版行为一致。 */ .book-row.eq .cv{width:auto;min-height:0;display:block} /* ★ 2026-10-12（批 W10）：本声明原带 `aspect-ratio:7/10`，被更靠后的 `.book-row.eq .cv img{aspect-ratio:7/11}`（齐平机制段，同在本档）盖掉 ⇒ **死声明，已删除**。 */ .book-row.eq .cv img{position:static;inset:auto;width:100%;height:auto; object-fit:cover;border:1px solid var(--line);background:var(--card);padding:7px; box-shadow:0 1px 2px rgba(35,33,28,.05)} .book-row.eq .rw-month{align-self:flex-start;margin:0 0 2px;padding:0; border:0;border-radius:0;background:none; font-size:11.5px;letter-spacing:.04em} .book-row.eq h3{font-size:17px} .book-row.eq .row-sum{border-top:0;padding-top:0} /* ★★ 四轮（主理人）：月选列表卡信息行 —— 桌面端的「两组化」在手机端不适用（窄）； 隐藏 定价/豆瓣/ISBN 三格（.g2 整组），右侧只留 作者/译者/出版/出版时间/页数。 ★ 月选列表是 .book-row.eq —— 只命中它，不碰新书选详情/书单的 .meta。 ★★ 2026-10-10 复核修复：此处曾误写成 `.meta{display:none}` —— display:none 不可被子规则恢复，手机端信息行（作者/出版/出版时间/页数）整行消失，与注释 「只留五项」自相矛盾；删除该行，只保留下方 .g2 隐藏（与原型手机版一致）。 */ .book-row.eq .meta .g{display:inline-flex;flex-wrap:wrap;gap:2px 14px;min-width:0} .book-row.eq .meta .g span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .book-row.eq .meta .g2{display:none} /* ★★ 2026-09-20：这里原有一条 `.main-pick.eq .cv{width:112px}`。它与上方 720px 块里的 `.main-pick.eq .cv{width:auto}` **同权重、位置更靠后** ⇒ 一直悄悄胜出，把「封面+定妆照」 的双图列硬压成 112px（方案 E 上线后窄屏卡片一直是被挤扁的，属潜伏缺陷）。 双图列宽度必须由图片自身决定，这里删除，不再设宽。 */ .cov-cards{gap:16px 12px} .cov-cards a{width:88px} .cov-cards .t{font-size:12px} /* D75 区块卡在窄屏收内边距，避免内容被挤成窄条 */ .bl-block,.bl-cat{padding:20px 18px 22px;margin-top:12px} .bl-cat .bl-sub--other{margin-top:18px;padding-top:13px} /* ★ 分类头合并成「分类名：小标题」后是一整条长标题；`.sec-h h2` 是 flex:none， 390px 下不肯收宽 → 整页横向溢出（实测 103~160px）。窄屏放开让标题折行。 */ .bl-cat .bl-cat-h h2{flex:1 1 auto;min-width:0;font-size:17px} /* 窄屏：`.meta span` 默认 `white-space:nowrap`，「出版 出版社丨出品方」这种长串会把 卡片顶出视口（实测 390px 下整页横向溢出 13px）。窄屏允许折行。 */ .meta span{white-space:normal;word-break:break-word} /* ★★ 窄屏文案适配（2026-09-21 主理人提出） 范围严格限定：只动「导语 / 标题 / 按钮组」三类。 正文（简介·导读·来信·媒体摘录）与卡片模块组（含 .ic-title）一律不动 —— 中文长段落 居中会让视线每行重找行首，是可读性问题不是审美问题；卡片内标题居中会与同卡左对齐的 封面/期号错位。关于野山「栏目说明」不在 .page-head 内，故保持左对齐。 */ /* ① 软断行点：文案里的零宽空格「\u200b」（U+200B）＝「窄屏可在此断开」，由生成器与运行时 包成 .brk；宽屏 inline 原样，窄屏每段独占一行。 ★ 必须用「未处理时不可见」的标记：旧缓存客户端（旧 JS ＋ 新文案）不会裸显乱码。 （「｜」U+FF5C 是页面标题分隔符，「丨」U+4E28 是「出版社丨出品方」，三者互不相同。） */ .brk{display:block} /* ② 品牌行窄屏按语义断成三行并居中：店名 / 我们把书挑好，/ 然后告诉你为什么是它。 */ /* ③ 说明性导语窄屏**左对齐**（2026-10-10 主理人改版）：原「窄屏居中 + 限宽」整套退役， 手机端与网页端同款左对齐 —— 每月选书 / 每周新书选 / 主题书单 / 野山来信 / 关于野山 等所有 .page-head 页一并生效。小程序端共用页头组件 ys-pagehead 的 .ph-p 同批改 （同一条主理人口径，别让两端分叉）。 */ .page-head p{text-align:left;max-width:none;margin-inline:0} /* 首屏导语里的硬换行
只服务宽屏（宽屏仍是 2 行）；窄屏由 .brk 段断行接管， 留着会多出一个空行。 */ /* .bl-lede 是首页书单导语，自带左侧竖线（border-left）；居中后竖线与居中文本打架， 故窄屏一并去掉竖线与缩进。 */ .bl-lede{text-align:center;max-width:26em;margin-inline:auto;padding-left:0;border-left:0} /* ④ 按钮组窄屏居中；顺带禁止按钮内文字被压成两行（按钮换行比段落掉行难看得多）。 */ .btn{white-space:nowrap} } @media (max-width:1000px){ .bl-band{grid-template-columns:repeat(6,1fr)} .thumbs.home-nb{grid-template-columns:repeat(6,1fr)} } @media (max-width:900px){ .ps-slide{grid-template-columns:112px 1fr;gap:22px;padding:20px 64px 46px} .psc .sc-prev{left:12px} .psc .sc-next{right:12px} .ps-t{font-size:23px} .ps-x{-webkit-line-clamp:4} } @media (max-width:720px){ .ps-slide{grid-template-columns:1fr;gap:14px;padding:20px 18px 60px} .ps-cv{width:104px;justify-self:center} .ps-t{font-size:21px} .ps-x{font-size:13.5px;line-height:1.85;-webkit-line-clamp:3} .ps-month{left:50%;transform:translateX(-50%);bottom:46px;letter-spacing:.1em} /* 窄屏把左右箭头放到卡片底部两角，避免压在封面与文字上 */ .psc .sc-btn{top:auto;bottom:12px;transform:none;width:44px;height:44px;font-size:19px} .psc .sc-prev{left:16px} .psc .sc-next{right:16px} .psc .sc-dots{left:50%;right:auto;transform:translateX(-50%);bottom:19px} .bl-band{grid-template-columns:repeat(5,1fr)} .thumbs.home-nb{grid-template-columns:repeat(5,1fr)} } /* ★★ 加购弹窗 · 窄屏形态（2026-10-04 四改） --------------------------------------------------------------------------- 为什么这段**必须放在文件末尾**而不是上面那个 900px 块里：CSS 同优先级下**后写的赢**， 而 `.ac-pick` 的桌面规则就在下面不远处 ⇒ 放前面会被它盖掉（实测：窄屏点开仍是"桌面居中"， 面板左右各留 20px、也没贴底 —— 就是这么来的）。 形态＝**从底部升起的面板**：① 拇指够得到；② 第二层出现时只向上长，面板不跳；③ 顶部留白就是遮罩本身。 */ @media (max-width:900px){ .addcart .ac-pick{align-items:flex-end;padding:0} .addcart .ac-card{max-width:none;border-radius:14px 14px 0 0;border-bottom:0; padding:20px 18px calc(16px + env(safe-area-inset-bottom,0px)); box-shadow:0 -14px 40px rgba(30,22,14,.22)} .addcart .ac-card .ac-q{font-size:12.5px} .addcart .ac-modes{gap:12px} } /* ★ CL-02（2026-09-18）：减弱动效——除 app.js 读取 prefers-reduced-motion 让 轮播/金句不自动播之外，这里再兜一层 CSS：用户开启「减少动态效果」时， 全局关闭过渡与动画（双保险，覆盖任何漏网的 CSS 动效）。 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ★★ 首帧防闪（P1 配置层 · 2026-09-20） --------------------------------------------------------------------------- 问题：配置层文案（site_setting / nav_section / hero_quote）的**静态值是构建期快照**， 运行时才被 /api/public/bootstrap 覆写。后台改过、而没重新生成+部署时，两者不一致 ⇒ 首帧先渲染旧值、接口回来后再换成新值 —— 顶部公告条每次都"闪一下旧公告"。 （不是浏览器缓存：旧值写在服务端静态产物里，换浏览器一样复现。） 做法：生成器在 data.js 之后立刻给 挂 `ys-cfg-pending`，这里把"可配元素"先藏起来。 ★ 用 `visibility`（不是 `display`）—— **保留占位**，所以不会跳版； app.js 的 cfgReady() 拿到接口响应（成功或失败）即解除，另有 2s 兜底； JS 不可用时不加类 ⇒ 文案照常可见，行为与从前一致。 */ html.ys-cfg-pending [data-ys] { visibility: hidden; } /* ★★ 运行时覆写区块的**首帧防闪**（2026-10-08 · 主理人实测反馈） --------------------------------------------------------------------------- 问题（主理人原话）：「更新主题书单第二期《乌合之众》新封面新版信息，前端现在已经 更新替换了，但是页面刷新的时候，会闪现旧封面才出现新封面（主题书单页面进入后也会 闪现之前八期都在的页面，之后才是正常的两期在线的页面）」。 —— 与上面那条 `[data-ys]` **同一族**，只是覆写来源不同（封面 / 图书字段 / 期次清单 来自 `/covers`、`/work/`、`/booklist//items`，不是 bootstrap）。 ★ 为什么**不能靠"重新生成产物"消除**（别再往那个方向试）： 构建期的书单/图书数据来自 `poc/booklist_raw.json`（公号抓取快照）与 `seed/work.json`，与云端库**不同源**；且构建期的封面是**本地相对路径** （`assets/covers/bl_*.jpg`），而运行时的 `/covers` 给的是**云存储绝对 URL** ⇒ 即使两边指的是同一张图，`src` 字符串也不同 ⇒ **每次刷新都会发生一次替换**。 做法：**复用同一个 `ys-cfg-pending` 类**（多列几个选择器即可，不新增生命周期）， 把"会被运行时覆写的区块"也先藏起来；`visibility` 保留占位、不跳版。 app.js 侧把解除时机**推迟到封面与图书字段也回来**（见 `livePendingHold/Release`）， 生成器的 2s 兜底照旧 —— 接口不可达不会把页面永久留在隐藏态。 ★ 为什么用**元素选择器**而不是打 `data-live-guard` 钩子：钩子要同改生成器与 app.js 两处渲染口（本项目最贵的那类"同形不同源"），而这几处的类名本来就是稳定契约 （`.book-hero` / `.book-row` 由版式定义，不是临时钩子）。少一处能分叉的地方。 */ html.ys-cfg-pending .book-hero, html.ys-cfg-pending .issue-grid, html.ys-cfg-pending .bl-band, html.ys-cfg-pending .book-row .cv img { visibility: hidden; } /* ★★ 2026-10-10 补（主理人实测「首页刷新闪现一组旧数据」）： 首页数据条四格（data-stat=plan/newbook/booklist/items，运行时被 /home-stats 就地换数）＋「野山寻书」卡「N 册可检索」（data-search-count，同源同值）—— 这两处的静态值也是构建期快照，但**没列进上面的隐藏名单** ⇒ bootHomeStats() 虽然调了 livePendingHold() 推迟解除，数字本身却从未被藏过， 旧快照从首帧可见、接口回来才跳新值＝闪现。补进名单即与 [data-ys] 同口径。 ★ 只藏 （数字）， 标签照常可见 —— 保留占位、不跳版； 开业天数（data-open-days）是本地实时计算的、首帧即正确，**不藏**。 */ html.ys-cfg-pending [data-stat] b, html.ys-cfg-pending [data-search-count] { visibility: hidden; } /* ============ 方案 E（2026-09-20）统一 Lightbox ============ */ #lb{position:fixed;inset:0;z-index:9999;display:none;background:rgba(20,16,12,.93); align-items:center;justify-content:center;flex-direction:column;outline:none} #lb.on{display:flex} #lb img{max-width:92vw;max-height:84vh;object-fit:contain;border:1px solid rgba(255,255,255,.18); background:#fff;box-shadow:0 10px 40px rgba(0,0,0,.5)} #lb .lb-cap{color:#e8e0d4;font-size:12px;margin-top:12px;letter-spacing:.06em;font-family:var(--sans)} #lb .lb-close{position:absolute;top:14px;right:20px;color:#fff;font-size:30px;line-height:1; cursor:pointer;opacity:.85;padding:6px 10px} #lb .lb-nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:42px; cursor:pointer;user-select:none;opacity:.7;padding:0 20px} #lb .lb-nav:hover{opacity:1} #lb .lb-prev{left:0}#lb .lb-next{right:0} @media (prefers-reduced-motion: no-preference){#lb img{transition:opacity .2s ease}} /* ══ 加入阅读计划（S6-04，2026-09-28）════════════════════════════════════════ 详情页正文收尾的转化入口。视觉沿用站内既有语汇：纸底块 ＋ 3px 方角 ＋ 苔绿按钮， 不新增颜色（山褐只留给 kicker/细线那类小字）。 */ .plan-cta{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r); padding:22px 24px;margin-top:44px;text-align:center} .plan-cta .ct-t{font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:6px} .plan-cta .ct-s{font-size:13.5px;color:var(--ink-2);margin-bottom:16px} .plan-cta .btn{display:inline-block} /* ★ 六修：订阅引导块（.plan-cta）新文案——小标题 .ct-h 断层、「了解更多」沿用弹窗件 .rp-more */ .plan-cta .ct-h{font-family:var(--serif);font-size:15.5px;font-weight:600;margin:2px 0 8px} .plan-cta .ct-s{line-height:1.9;margin-bottom:10px} .plan-cta .ct-s:last-of-type{margin-bottom:16px} .plan-cta .rp-more{display:inline-block;min-width:200px;padding:11px 30px} .plan-cta .rp-nb{white-space:nowrap} @media (max-width:819px){.plan-cta{padding:18px 16px;margin-top:32px}.plan-cta .ct-t{font-size:17px} /* ★ 六修：手机档「了解更多」通栏（与原弹窗件同观感） */ .plan-cta .rp-more{display:block;min-width:0}} /* ===== 2026-10-05 阶段 1 · 正文字号整体收紧 ===== ★ 为什么不改 body：实测全站 198 条 font-size 声明**无一依赖 body 继承**， 改 body 的 font-size 视觉变化为 0（tools/probe_fontsize.py 实测 16→15 迁移元素数 = 0）。 ★ 真正的正文载体（按元素文本长度 >60 字客观定位，tools/probe_bodytext.py）： .article-body / .bl-lede / .hero .lead / .g-body p / .prose / .summary / .page-head p / .fact / .board-card p / .book-row .sub / .media-item .ex 等， 横跨 14–19px 共 6 档 —— 逐档 -1px 保留梯度，不拉平。 ★ 不动的：标题档（≥20px）、小字档（≤13.5px）、导航/按钮/表单等 UI 档。 */ /* ══════════════════════════════════════════════════════════════════════════ 2026-10-05 · 阶段 2a：首页改版私有样式（源自 build/home-v13.css，v0.13 定稿 C 档） --------------------------------------------------------------------------- ★ 已剔除 6 条全局级规则（:root / body / .sans / a:focus-visible / a / img）： · 令牌已由阶段 1 并入现有 :root； · body 与 .sans 会覆盖字体族 —— 打掉自托管 Yeshan Serif / 架空 --sans 令牌； · a:focus-visible 会削弱 CL-03 全站焦点整改。 ★ 保留部分的适用面已核：home-v13.css 全部选择器 × 子页面 145 个共用类名， 未加 .legacy 且命中共用类的只有 `.sans` 一条（已剔除）⇒ 对子页面零影响。 ★ 约 34 条 `.legacy` 覆盖规则必须留在 `@media (min-width:901px)` 里 （原样保留，未打散）—— 它们特异性高于线上原样式，不锁视口会把手机单列版式顶掉。 ★ 生效前提：这些类名要等阶段 2b 把首页结构落进生成器后才会被用到。 ══════════════════════════════════════════════════════════════════════════ */ /* 野山首页改版 v0.13 —— 增量/覆盖样式（★ 必须排在 assets/style.css 之后） 来源：proto_V5/home_v13.html 的