/* ========================================================================== 俄罗斯电商情报站 — 主样式表（UI v2） 共用页面：index.html / ru|en/index.html / pages/*.html / ru|en/pages/*.html 设计取向：情报工作台（扫描优先），不是新闻阅读站（沉浸优先）。 依据：单日 27~29 条、中文均 152 字/条、俄文均 447 字符/条 —— 长文 + 高频定位， 所以默认折叠、密度可调、导航常驻。 ⚠️ 令牌块由 scripts/inject-tokens.js 从 assets/css/tokens.css 注入，勿手改。 ⚠️ 首屏用的子集在 assets/css/critical.css，两者令牌必须一致（check-seo.js 会断言）。 ========================================================================== */ /*TOKENS:BEGIN*/ /* 由 scripts/inject-tokens.js 从 assets/css/tokens.css 生成 —— 请勿手改本块 */ /* ============================================================================ 设计令牌 —— 唯一真源（source-only，不直接被页面链接） ============================================================================ ⚠️ 用法：本文件不是可用样式表，它是 scripts/inject-tokens.js 的输入。 改令牌只改这里，然后跑 `node scripts/inject-tokens.js`（或直接 `node scripts/merge.js`）， 令牌会被注入到两个文件里由 TOKENS:BEGIN / TOKENS:END 注释包裹的标记块（见 inject-tokens.js 顶部常量）： · assets/css/style.css 全站主样式表（异步加载） · assets/css/critical.css 首屏关键样式（构建期内联进 ） 为什么要有这一层：这两个文件的令牌以前靠人肉同步，改一个忘一个就会出现 「首屏字号 15px、样式表一到跳到 16px」这种闪跳。现在两者是同一段文本的两次注入， check-seo.js 还会断言两处标记块逐字节相同。 ---- 语法 ---- 普通文本原样透传。 夹在 DARK 开始 / DARK 结束 标记之间的令牌是「深色色板」， 注入时会被展开成 html[data-theme="dark"]{...} 与 @media(prefers-color-scheme:dark){html[data-theme="auto"]{...}} 两份 —— 深色值因此只写一次，不会漂移。 ---- 设计判断（依据 ui-v2 方案第三节）---- · 间距收敛到 4 的倍数，消灭 14/18/22/28 这类魔法数字 · 字阶从 11 级（11/11.5/12/12.5/13/13.5/14/14.5/15/16/18）收敛到 7 级 · 正文 16px / 行高 1.75 —— 实测单条摘要中文均 152 字、俄文 447 字符， 是长文阅读场景，15px 长时间读吃力 · 汇率一律中性色，不用红涨绿跌（那是中国股市约定，用在汇率上会被误读） ============================================================================ */ :root { color-scheme: light; /* ---- 间距：4 的倍数 ---- */ --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --sp6: 32px; --sp7: 48px; /* ---- 字阶：7 级 ---- */ --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; /* ---- 圆角 ---- */ --r1: 6px; --r2: 10px; --r3: 14px; /* ---- 面 ---- */ --bg: #f2f4f7; --surface: #ffffff; --surface-2: #f7f9fb; --surface-3: #eef2f6; --line: #e3e8ee; --line-2: #cfd8e3; /* ---- 字色 ---- */ --tx: #0f1620; --tx-2: #3a4654; --tx-3: #6b7683; /* ---- 品牌与语义 ---- */ --ac: #c0392b; --ac-soft: #fdeeec; --blue: #1a5c8f; --blue-soft: #eaf2f9; /* ---- 四档可信度：独立 token，不再和语义色混用 ---- */ --trust-dual: #15803d; --trust-dual-bg: #e8f6ec; --trust-official: #1a5c8f; --trust-official-bg: #eaf2f9; --trust-single: #8a5b06; --trust-single-bg: #fdf4de; --trust-rumor: #b3261e; --trust-rumor-bg: #fdecea; --warn: #8a5b06; --warn-soft: #fdf4de; /* ---- 阴影 ---- */ --sh1: 0 1px 2px rgba(15, 22, 32, .05); --sh2: 0 2px 8px rgba(15, 22, 32, .07); /* ---- 尺寸 ---- */ --maxw: 1180px; --side-w: 232px; --hdr-h: 60px; --sub-h: 52px; /* ---- 字体 ---- */ --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", Roboto, Arial, "Helvetica Neue", sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; } /* 主题三态：auto 跟随系统，light/dark 为手动选择 */ html[data-theme="auto"] { color-scheme: light dark; } html[data-theme="dark"] { color-scheme: dark; --bg: #0d1117; --surface: #161b22; --surface-2: #1b222c; --surface-3: #222a35; --line: #272e38; --line-2: #3a4653; --tx: #e8eef5; --tx-2: #c3cdd9; --tx-3: #8b97a4; --ac: #ff7264; --ac-soft: #3a1d1a; --blue: #7cb8e8; --blue-soft: #152a3d; --trust-dual: #5bcd8b; --trust-dual-bg: #12301f; --trust-official: #7cb8e8; --trust-official-bg: #152a3d; --trust-single: #e0ab48; --trust-single-bg: #33260f; --trust-rumor: #ff7264; --trust-rumor-bg: #3a1d1a; --warn: #e0ab48; --warn-soft: #33260f; --sh1: 0 1px 2px rgba(0, 0, 0, .4); --sh2: 0 2px 8px rgba(0, 0, 0, .45); } @media (prefers-color-scheme: dark) { html[data-theme="auto"] { color-scheme: dark; --bg: #0d1117; --surface: #161b22; --surface-2: #1b222c; --surface-3: #222a35; --line: #272e38; --line-2: #3a4653; --tx: #e8eef5; --tx-2: #c3cdd9; --tx-3: #8b97a4; --ac: #ff7264; --ac-soft: #3a1d1a; --blue: #7cb8e8; --blue-soft: #152a3d; --trust-dual: #5bcd8b; --trust-dual-bg: #12301f; --trust-official: #7cb8e8; --trust-official-bg: #152a3d; --trust-single: #e0ab48; --trust-single-bg: #33260f; --trust-rumor: #ff7264; --trust-rumor-bg: #3a1d1a; --warn: #e0ab48; --warn-soft: #33260f; --sh1: 0 1px 2px rgba(0, 0, 0, .4); --sh2: 0 2px 8px rgba(0, 0, 0, .45); } } /*TOKENS:END*/ /* ------------------------------------------------------------------ 基础 */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--tx); font-family: var(--sans); font-size: var(--fs-base); line-height: 1.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } button, input, select { font-family: inherit; font-size: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r1); } /* 屏幕阅读器专用文本 */ .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* 图标统一走内联 SVG symbol：继承 currentColor，随主题变色，跨系统渲染一致 */ .ico { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* 无 JS 时不显示任何"只有 JS 才有意义"的控件 */ html:not(.js-ready) .js-only { display: none !important; } /* ------------------------------------------------------ 顶部阅读进度条 */ .readbar { position: fixed; inset: 0 auto auto 0; height: 2px; width: 0; z-index: 200; background: var(--ac); transition: width .1s linear; } /* ------------------------------------------------------------------ 页头 */ .hdr { position: sticky; top: 0; z-index: 60; min-height: var(--hdr-h); display: flex; align-items: center; gap: var(--sp4); padding: var(--sp3) var(--sp5); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: var(--sp3); min-width: 0; } /* 品牌标：图形自带品牌红底与白色「E」（见 shell.js 的 #i-mark）。 刻意不用 var(--ac) —— 深色模式下 --ac 会变成偏亮的 #ff7264， 白字压在上面只有 1.9:1。品牌标在两种主题下都保持品牌红，对比度 4.9:1。 */ .bmark { flex: none; width: 36px; height: 36px; display: block; } .bmark svg { width: 36px; height: 36px; display: block; border-radius: var(--r2); } .bname { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.3px; line-height: 1.25; margin: 0; color: var(--tx); } .bsub { font-size: var(--fs-xs); color: var(--tx-3); margin: 0; line-height: 1.3; } .bsub a { color: inherit; } /* 汇率胶囊：从「只在要闻 tab 显示」提升为全站常驻 —— 卖家每天必看的第一数据 */ .fx { display: flex; align-items: center; gap: var(--sp2); flex-wrap: wrap; margin-left: auto; } .fxpill { display: flex; align-items: baseline; gap: 6px; padding: 5px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; } .fxpill .k { font-size: var(--fs-xs); color: var(--tx-3); font-weight: 500; } .fxpill .v { font-family: var(--mono); font-size: var(--fs-sm); font-weight: 600; color: var(--tx); letter-spacing: -.2px; } .fxsrc { font-size: var(--fs-xs); color: var(--tx-3); padding-left: 2px; } .hact { display: flex; align-items: center; gap: var(--sp2); } /* 分段控件（主题 / 语言 / 密度共用） */ .seg { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r2); } .seg button { border: 0; background: none; color: var(--tx-3); padding: 5px 10px; border-radius: var(--r1); cursor: pointer; font-size: var(--fs-xs); font-weight: 500; transition: background .15s, color .15s; display: flex; align-items: center; gap: 5px; min-height: 28px; } .seg button:hover { color: var(--tx); } .seg button[aria-pressed="true"] { background: var(--surface); color: var(--ac); font-weight: 700; box-shadow: var(--sh1); } /* 站内搜索 */ .search { position: relative; display: block; } .search input { width: 200px; padding: 7px 12px 7px 32px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-2); color: var(--tx); font-size: var(--fs-sm); transition: width .2s, border-color .15s; } .search input::placeholder { color: var(--tx-3); } .search input:focus { width: 260px; border-color: var(--blue); outline: none; background: var(--surface); } .search .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--tx-3); width: 15px; height: 15px; } /* ------------------------------------------------------------ 次级控制条 */ .subbar { position: sticky; top: var(--hdr-h); z-index: 55; display: flex; align-items: center; gap: var(--sp3); padding: var(--sp2) var(--sp5); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); } .tabs { display: flex; gap: var(--sp1); flex: none; } .tab { border: 0; background: none; padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: var(--fs-md); font-weight: 500; color: var(--tx-3); transition: background .15s, color .15s; white-space: nowrap; min-height: 34px; } .tab:hover { color: var(--tx); background: var(--surface-2); } .tab[aria-selected="true"] { background: var(--ac-soft); color: var(--ac); font-weight: 700; } .tab .n { font-size: var(--fs-xs); opacity: .7; margin-left: 5px; font-family: var(--mono); } /* 日期条：27 个日期横向 chip，一次可见、标出可用性 —— 取代原下拉框 */ .dates { display: flex; /* ⚠️ align-items 与 height 两行都不能省 —— 这里是"高度循环"的唯一出口。 默认 align-items: stretch 会让 .dchip 的高度去撑容器，容器的内容高又回头 决定 chip 的高度。实测 27 个 chip 时浏览器把它解成了 116×116 的正方形 （border-radius:999px 一画就是个巨大的圆），控制条被顶到 137px 高。 只加 align-items:center 不够 —— chip 回到 30px 了，容器仍卡在 120px； 必须再给一个确定行高才会彻底断开。回归测试见 tools/visual-check.js。 */ align-items: center; height: 34px; /* 与 .tab 等高，chip 30px 垂直居中 */ gap: var(--sp1); overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; } .dates::-webkit-scrollbar { display: none; } .dchip { flex: none; border: 1px solid var(--line); background: var(--surface); color: var(--tx-2); padding: 5px 10px; border-radius: 999px; cursor: pointer; font-size: var(--fs-xs); font-family: var(--mono); line-height: 1.3; transition: border-color .15s, background .15s, color .15s; display: flex; align-items: center; gap: 5px; white-space: nowrap; min-height: 30px; } .dchip:hover { border-color: var(--line-2); background: var(--surface-2); } .dchip[aria-current="true"] { border-color: var(--ac); background: var(--ac-soft); color: var(--ac); font-weight: 700; } .dchip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--trust-dual); flex: none; } .dchip.empty { color: var(--tx-3); opacity: .55; cursor: not-allowed; } .dchip.empty .dot { background: var(--line-2); } /* ------------------------------------------------------------------ 主体 */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: var(--sp5) var(--sp5) var(--sp7); } /* 今日重点：从窄侧栏解放出来升为全宽通栏 —— 全站信息密度最高的 30 秒 */ .hl { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--sp4) var(--sp5) var(--sp5); margin-bottom: var(--sp5); box-shadow: var(--sh1); } .hl-hd { display: flex; align-items: center; gap: var(--sp2); margin-bottom: var(--sp3); flex-wrap: wrap; } .hl-hd h2 { margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--tx); letter-spacing: .2px; } .hl-hd .tag { font-size: var(--fs-xs); color: var(--ac); background: var(--ac-soft); border-radius: 999px; padding: 2px 9px; font-weight: 600; } .hl-hd .cnt { margin-left: auto; font-size: var(--fs-xs); color: var(--tx-3); font-family: var(--mono); } .hl-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp3) var(--sp5); grid-template-columns: 1fr; counter-reset: hln; } .hl-list li { position: relative; padding-left: 26px; font-size: var(--fs-md); color: var(--tx-2); line-height: 1.7; } .hl-list li::before { counter-increment: hln; content: counter(hln); position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--ac); background: var(--ac-soft); } /* 两栏 */ .cols { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); gap: var(--sp5); align-items: start; } .side { position: sticky; top: calc(var(--hdr-h) + var(--sub-h) + var(--sp4)); display: grid; gap: var(--sp4); min-width: 0; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); box-shadow: var(--sh1); min-width: 0; } .card-hd { display: flex; align-items: center; gap: 7px; padding: var(--sp3) var(--sp4); border-bottom: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 700; color: var(--tx-3); letter-spacing: .5px; } .card-bd { padding: var(--sp3) var(--sp4) var(--sp4); } /* 板块导航（粘性） */ .toc { display: block; } .toc a { display: flex; align-items: center; gap: var(--sp2); padding: 7px 9px; border-radius: var(--r1); color: var(--tx-2); font-size: var(--fs-sm); transition: background .15s, color .15s; text-decoration: none; overflow-wrap: anywhere; } .toc a:hover { background: var(--surface-2); color: var(--tx); text-decoration: none; } .toc a.on { background: var(--surface-3); color: var(--ac); font-weight: 600; } .toc a .n { margin-left: auto; font-family: var(--mono); font-size: var(--fs-xs); color: var(--tx-3); flex: none; } .toc a.on .n { color: var(--ac); } .toc .toc-grp { padding: var(--sp3) 9px 4px; font-size: var(--fs-xs); font-weight: 700; color: var(--tx-3); letter-spacing: .5px; } .toc .toc-grp:first-child { padding-top: 0; } /* 汇率卡（侧栏，两个 tab 都在） */ .rgrid { display: grid; gap: var(--sp2); } .rrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp2); padding: 6px 9px; background: var(--surface-2); border-radius: var(--r1); } .rrow .k { font-size: var(--fs-xs); color: var(--tx-3); } .rrow .v { font-family: var(--mono); font-size: var(--fs-md); font-weight: 700; color: var(--tx); letter-spacing: -.3px; } .rnote { font-size: var(--fs-xs); color: var(--tx-3); margin-top: 10px; line-height: 1.6; } /* 信源可信度图例 —— 让四色从「装饰」变成「可解释的判据」 */ .legend { display: grid; gap: 7px; } .legend .lg { display: flex; align-items: flex-start; gap: var(--sp2); font-size: var(--fs-xs); color: var(--tx-2); line-height: 1.5; } .lgd { width: 9px; height: 9px; border-radius: 3px; flex: none; margin-top: 4px; } .legend .lg b { font-weight: 600; } /* ------------------------------------------------------------ 分节与条目 */ .sec { margin-bottom: var(--sp6); scroll-margin-top: 132px; } .sec-hd { display: flex; align-items: center; gap: var(--sp2); margin: 0 0 var(--sp3); padding-bottom: var(--sp2); border-bottom: 1px solid var(--line); } .sec-hd h3 { margin: 0; font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.2px; color: var(--tx); } .sec-hd h2 { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.3px; color: var(--tx); } .sec-hd .bar { width: 4px; height: 16px; border-radius: 2px; background: var(--blue); flex: none; } .sec-hd .n { margin-left: auto; font-family: var(--mono); font-size: var(--fs-xs); color: var(--tx-3); flex: none; } .item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); margin-bottom: var(--sp2); box-shadow: var(--sh1); overflow: hidden; transition: border-color .15s, box-shadow .15s; } .item:hover { border-color: var(--line-2); box-shadow: var(--sh2); } .item[data-v] { border-left: 3px solid var(--line-2); } .item[data-v="dual"] { border-left-color: var(--trust-dual); } .item[data-v="official"] { border-left-color: var(--trust-official); } .item[data-v="single"] { border-left-color: var(--trust-single); } .item[data-v="rumor"] { border-left-color: var(--trust-rumor); } .ihead { width: 100%; display: flex; align-items: flex-start; gap: var(--sp3); text-align: left; background: none; border: 0; padding: var(--sp3) var(--sp4); cursor: pointer; color: inherit; min-height: 44px; } .ihead .chev { flex: none; margin-top: 3px; color: var(--tx-3); transition: transform .2s; } .ihead[aria-expanded="true"] .chev { transform: rotate(90deg); } .ittl { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: 600; line-height: 1.55; color: var(--tx); letter-spacing: -.1px; } .imetro { flex: none; display: flex; align-items: center; gap: var(--sp2); font-size: var(--fs-xs); color: var(--tx-3); white-space: nowrap; padding-top: 2px; } .ibody { padding: 0 var(--sp4) var(--sp4); margin-top: calc(var(--sp2) * -1); } .isum { margin: 0 0 var(--sp3); font-size: var(--fs-base); color: var(--tx-2); line-height: 1.8; } .ifoot { display: flex; align-items: center; gap: var(--sp3); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--tx-3); } .ifoot a { color: var(--blue); display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; margin: -3px -7px; border-radius: var(--r1); } .ifoot a:hover { background: var(--blue-soft); text-decoration: none; } /* 收起态：无 JS 时全部展开（爬虫与禁用 JS 的用户都能读到全文）； JS 就绪后才折叠 —— 这是 SEO 安全的折叠方式，禁止改成纯 CSS display:none */ html.js-ready .ibody { display: none; } html.js-ready .item.open .ibody { display: block; } /* 徽章 */ .bdg { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; border: 1px solid transparent; } .bdg .d { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .bdg[data-v="dual"] { color: var(--trust-dual); background: var(--trust-dual-bg); } .bdg[data-v="official"] { color: var(--trust-official); background: var(--trust-official-bg); } .bdg[data-v="single"] { color: var(--trust-single); background: var(--trust-single-bg); } .bdg[data-v="rumor"] { color: var(--trust-rumor); background: var(--trust-rumor-bg); } /* 密度：紧凑态已移除（Jack 2026-09-15：不需要暴露这个选项，全站按舒适显示）。 原先这里有一组 html[data-density="compact"] 规则做摘要 2 行截断 + 收紧间距。 相关的东西一并清掉了：data-density 属性、data-ls-density、localStorage 键、 .seg-density 控件、ui-text 的 density* 文案键、精灵图里的 i-list / i-dense。 若要恢复：把 换成可变值，并把截断规则加回来。 ⚠️ 无论怎么改，line-clamp 都只能影响视觉、不能改变 DOM 文本 —— 全文必须留在 HTML 里。 */ /* 搜索命中高亮 */ mark { background: var(--warn-soft); color: var(--warn); border-radius: 3px; padding: 0 2px; } /* 搜索结果里的「日期 · 板块」跳转标签 */ .ictx { display: flex; align-items: center; gap: var(--sp2); flex-wrap: wrap; padding: var(--sp2) var(--sp4) 0; font-size: var(--fs-xs); color: var(--tx-3); } .ictx .jump { border: 1px solid var(--line); background: var(--surface-2); color: var(--ac); border-radius: 999px; padding: 2px 9px; cursor: pointer; font-size: var(--fs-xs); font-weight: 600; font-family: var(--mono); } .ictx .jump:hover { border-color: var(--ac); } .srch-meta { font-size: var(--fs-sm); color: var(--tx-3); margin: -4px 0 var(--sp4); } .srch-meta b { color: var(--tx-2); } .srch-meta b.hit { color: var(--ac); } /* ------------------------------------------------------------- 空态/提示 */ .empty { text-align: center; padding: var(--sp7) var(--sp5); color: var(--tx-3); background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r3); font-size: var(--fs-md); } .empty small { display: block; font-size: var(--fs-sm); opacity: .75; margin-top: 6px; } /* --------------------------------------------------- 日报页 日期前后导航 */ .page-nav { display: flex; flex-wrap: wrap; gap: var(--sp2); align-items: center; font-size: var(--fs-sm); flex: 1; min-width: 0; } .page-nav a { color: var(--blue); text-decoration: none; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; min-height: 30px; } .page-nav a:hover { border-color: var(--blue); background: var(--blue-soft); text-decoration: none; } .page-nav .cur { font-family: var(--mono); color: var(--tx-3); font-size: var(--fs-xs); } /* ------------------------------------------------- 首页「历史日报」静态内链 这块是构建期写进 HTML 的（不是 JS 渲染）—— 它是爬虫从首页进入日报页的唯一通路。 在它之前，首页 数量为 0，84 条 URL 只能靠 sitemap 孤儿式被发现。 */ .archive { margin-top: var(--sp6); } .archive-hd { display: flex; align-items: center; gap: var(--sp2); margin: 0 0 var(--sp3); padding-bottom: var(--sp2); border-bottom: 1px solid var(--line); } .archive-hd h2 { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.3px; } .archive-hd .bar { width: 4px; height: 16px; border-radius: 2px; background: var(--blue); flex: none; } .archive-hd .n { margin-left: auto; font-family: var(--mono); font-size: var(--fs-xs); color: var(--tx-3); flex: none; } .archive-intro { font-size: var(--fs-md); color: var(--tx-2); margin: 0 0 var(--sp4); line-height: 1.8; } .arch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp2); } .arch-list li { display: flex; align-items: center; gap: var(--sp3); flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); padding: var(--sp2) var(--sp4); box-shadow: var(--sh1); } .arch-list .d { font-family: var(--mono); font-size: var(--fs-md); font-weight: 600; color: var(--tx); } .arch-list .n { font-size: var(--fs-xs); color: var(--tx-3); font-family: var(--mono); } .arch-list .langs { margin-left: auto; display: flex; gap: var(--sp1); flex-wrap: wrap; } .arch-list .langs a { font-size: var(--fs-xs); padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--tx-2); min-height: 26px; display: inline-flex; align-items: center; } .arch-list .langs a:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); text-decoration: none; } .arch-all { margin: var(--sp4) 0 0; font-size: var(--fs-sm); } /* ------------------------------------------------------------------ 页脚 */ .ftr { border-top: 1px solid var(--line); background: var(--surface); padding: var(--sp5) var(--sp5) var(--sp6); margin-top: var(--sp6); font-size: var(--fs-xs); color: var(--tx-3); text-align: center; line-height: 1.8; } .ftr p { margin: 0 0 5px; } .ftr .trust { opacity: .85; } /* -------------------------------------------------------------- 骨架屏 */ .sk-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--sp4); margin-bottom: var(--sp4); box-shadow: var(--sh1); } .sk { border-radius: var(--r1); background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: sk-shimmer 1.4s ease infinite; } .sk-h { height: 14px; width: 38%; margin-bottom: 14px; } .sk-l { height: 11px; margin-bottom: 9px; } .sk-l:last-child { margin-bottom: 0; } .sk-item { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--sp3) var(--sp4); margin-bottom: var(--sp2); box-shadow: var(--sh1); } .sk-title { height: 14px; margin-bottom: 12px; } .sk-meta { height: 10px; width: 46%; } .sk-sec { height: 15px; width: 26%; margin: 0 0 14px; } @keyframes sk-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .skeleton { animation: sk-fade .2s ease; } @keyframes sk-fade { from { opacity: .6; } to { opacity: 1; } } /* ------------------------------------------------------------ 移动端底栏 */ .mobbar { display: none; } /* ------------------------------------------------------------------ 响应式 */ @media (min-width: 1081px) { .hl-list { grid-template-columns: 1fr 1fr; } } @media (max-width: 1080px) { .cols { grid-template-columns: 1fr; } .side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .hdr { padding: var(--sp3) var(--sp4); gap: var(--sp3); } .fx { order: 3; width: 100%; margin-left: 0; } .hact { margin-left: auto; } .search input { width: 150px; } .search input:focus { width: 170px; } .subbar { position: static; padding: var(--sp2) var(--sp4); flex-wrap: wrap; } .wrap { padding: var(--sp4) var(--sp4) 96px; } .side { grid-template-columns: 1fr; } .hl-list { grid-template-columns: 1fr; } .bname { font-size: var(--fs-base); } .bsub { display: none; } .ittl { font-size: var(--fs-sm); } .imetro .src { display: none; } .mobbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding: 6px var(--sp3) calc(6px + env(safe-area-inset-bottom)); } .mobbar button { flex: 1; border: 0; background: none; padding: 7px 4px; border-radius: var(--r2); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--tx-3); min-height: 48px; } .mobbar button[aria-selected="true"] { color: var(--ac); background: var(--ac-soft); font-weight: 700; } .arch-list .langs { margin-left: 0; width: 100%; } } @media (max-width: 640px) { /* 移动端正文回落到 15px：16px 在窄屏下横向空间不足。 这是响应式覆盖，不是令牌重定义 —— 令牌真源仍是 assets/css/tokens.css。 */ body { font-size: 15px; } :root { --fs-base: 15px; } .hl { padding: var(--sp3) var(--sp4) var(--sp4); } .item .ihead { padding: var(--sp2) var(--sp3); } .ibody { padding: 0 var(--sp3) var(--sp3); } .ifoot { gap: var(--sp2); } } /* 300% 文本缩放（WCAG 1.4.4）不破版：所有容器允许换行、不设固定高度 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }