/* 页面样式 —— 零依赖，无构建步骤，手写 CSS。 * * 两条硬规矩（都是被同一类问题咬过之后定下来的）： * * 1. 颜色变量**全部**定义在 :root 上。 * 曾经把变量定义在一个内层容器（.app）上，结果解析不到 --ink， * 继承 body color 的文字退回浏览器初始的黑色：浅色下看不出问题，深色下 * 整片文字变成黑压黑，几乎不可读。变量只挂 :root，谁都能拿到。 * * 2. 弱证据用「文字颜色变浅 + 虚线边 + 明确标签」表达，**不用 opacity**。 * 半透明会把文字和背景一起冲淡，深色底下淡到读不出来；换成独立的浅色文字变量， * 两套配色下都还能读，而「这不是他本人说的」的信息又不会丢。 */ /* ── 配色：两套值只写一次，靠映射行切换 ──────────────────────────────────── */ :root { /* 浅色值 */ --l-bg: #f6f6f3; --l-panel: #ffffff; --l-panel-2: #fbfbf9; --l-ink: #1b1e23; --l-ink-soft: #5b626c; --l-ink-faint: #868d97; --l-line: #e2e2dc; --l-line-strong: #c9c9c1; --l-accent: #1f6b4a; --l-accent-ink: #ffffff; --l-accent-soft: #e8f2ec; --l-quote-bg: #f2f4f1; --l-weak-bg: #f4f4f2; --l-warn-bg: #fdf3e3; --l-warn-ink: #6b4c12; /* 深色值 */ --d-bg: #13151a; --d-panel: #1a1d23; --d-panel-2: #1f232a; --d-ink: #e7e8ec; --d-ink-soft: #a7aeb9; --d-ink-faint: #838b96; --d-line: #2b3038; --d-line-strong: #3c434e; --d-accent: #7ec9a2; --d-accent-ink: #10231a; --d-accent-soft: #1d2d26; --d-quote-bg: #202429; --d-weak-bg: #1c2026; --d-warn-bg: #2e2718; --d-warn-ink: #e6cf9e; /* 默认映射 = 浅色。没有任何偏好时就是这一份。 */ color-scheme: light; --bg: var(--l-bg); --panel: var(--l-panel); --panel-2: var(--l-panel-2); --ink: var(--l-ink); --ink-soft: var(--l-ink-soft); --ink-faint: var(--l-ink-faint); --line: var(--l-line); --line-strong: var(--l-line-strong); --accent: var(--l-accent); --accent-ink: var(--l-accent-ink); --accent-soft: var(--l-accent-soft); --quote-bg: var(--l-quote-bg); --weak-bg: var(--l-weak-bg); --warn-bg: var(--l-warn-bg); --warn-ink: var(--l-warn-ink); --radius: 10px; --maxw: 62rem; } /* 跟随系统深色。选择器写成 :root:where(:not([data-theme="light"]))： * :where() 内部不计权重，所以整条选择器的权重仍等于裸 :root（0,1,0）。 * 这样任何一条带属性的显式覆盖（下面两条，权重 0,2,0）都能压过它， * 包括「系统是深色、读者却显式选了浅色」这一档 —— 那一档必须真的变浅， * 靠源码顺序去赌是不牢的。 */ @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { color-scheme: dark; --bg: var(--d-bg); --panel: var(--d-panel); --panel-2: var(--d-panel-2); --ink: var(--d-ink); --ink-soft: var(--d-ink-soft); --ink-faint: var(--d-ink-faint); --line: var(--d-line); --line-strong: var(--d-line-strong); --accent: var(--d-accent); --accent-ink: var(--d-accent-ink); --accent-soft: var(--d-accent-soft); --quote-bg: var(--d-quote-bg); --weak-bg: var(--d-weak-bg); --warn-bg: var(--d-warn-bg); --warn-ink: var(--d-warn-ink); } } /* 显式选深色：与系统偏好无关 */ :root[data-theme="dark"] { color-scheme: dark; --bg: var(--d-bg); --panel: var(--d-panel); --panel-2: var(--d-panel-2); --ink: var(--d-ink); --ink-soft: var(--d-ink-soft); --ink-faint: var(--d-ink-faint); --line: var(--d-line); --line-strong: var(--d-line-strong); --accent: var(--d-accent); --accent-ink: var(--d-accent-ink); --accent-soft: var(--d-accent-soft); --quote-bg: var(--d-quote-bg); --weak-bg: var(--d-weak-bg); --warn-bg: var(--d-warn-bg); --warn-ink: var(--d-warn-ink); } /* 显式选浅色：把上面那条跟随系统的深色压回去（权重 0,2,0 > 0,1,0） */ :root[data-theme="light"] { color-scheme: light; --bg: var(--l-bg); --panel: var(--l-panel); --panel-2: var(--l-panel-2); --ink: var(--l-ink); --ink-soft: var(--l-ink-soft); --ink-faint: var(--l-ink-faint); --line: var(--l-line); --line-strong: var(--l-line-strong); --accent: var(--l-accent); --accent-ink: var(--l-accent-ink); --accent-soft: var(--l-accent-soft); --quote-bg: var(--l-quote-bg); --weak-bg: var(--l-weak-bg); --warn-bg: var(--l-warn-bg); --warn-ink: var(--l-warn-ink); } /* ── 基础 ──────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0 1rem 4rem; background: var(--bg); color: var(--ink); font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; } .wrap { max-width: var(--maxw); margin: 0 auto; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } /* ── 字体 ──────────────────────────────────────────────────────────────── 霞鹜文楷 TC（LXGW WenKai TC），SIL Open Font License 1.1，自托管。许可证是从字体二进制的 name 表读出来的，版本 1.522；上游基于 Klee，两层版权。 OFL 要求随字体附带版权与许可声明 —— 裁子集时保留了 name 表，声明就在 woff2 里面。子集由 scripts/build-font-subset.py 按本站实际用字裁出（647 KB / 2558 码位）， **产物提交进 git**：托管平台的构建只跑 bash + python3 标准库，不装 fonttools。文本长出新字时构建端会体检出来并提示重跑那个脚本。 font-display:swap —— 字体没到之前先用系统字渲染。这个站是每天更新的日报，读者要的是内容，不是等字体。 */ @font-face { font-family: "LXGW WenKai TC"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lxgw-wenkai-tc-subset.woff2") format("woff2"); } /* 两套栈，刻意分开用： --reading 手写楷体，只给**阅读内容**（逐字引用、摘要、主题综述）。 --ui 系统无衬线，给界面、表格、数字、日期 —— 楷体的数字与等宽对齐都不适合密集表格，全站换掉会让「谁在哪天说过话」那张表变得难读。这是照 sibling 参考站的 --reading / --sans 分工来的，不是我发明的。 */ :root { --reading: "LXGW WenKai TC", "Noto Serif SC", Georgia, serif; --ui: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; } h1, h2, h3 { line-height: 1.35; } h1 { font-size: 1.5rem; margin: 0; } h2 { font-size: 1.15rem; margin: 0 0 .6rem; } h3 { font-size: 1.02rem; margin: 0; } button { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; padding: .3rem .7rem; cursor: pointer; } button:hover { border-color: var(--accent); } button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button[aria-pressed="true"], .chip[aria-current="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .muted { color: var(--ink-soft); } .faint { color: var(--ink-faint); font-size: .88rem; } /* ── 页头 ──────────────────────────────────────────────────────────────── */ .site-head { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: baseline; justify-content: space-between; padding: 1.4rem 0 .8rem; border-bottom: 1px solid var(--line); } .site-head .tagline { margin: .35rem 0 0; color: var(--ink-soft); font-size: .93rem; max-width: 46rem; } /* ── 日期导航 ──────────────────────────────────────────────────────────── */ .datebar { padding: 1rem 0 .4rem; } .datebar__row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; } .datebar__today { font-size: 1.1rem; font-weight: 600; margin-right: .3rem; } .chips { display: flex; gap: .35rem; overflow-x: auto; padding: .35rem 0; scrollbar-width: thin; } .chip { flex: 0 0 auto; font-size: .85rem; padding: .22rem .55rem; white-space: nowrap; } .chip small { display: block; font-size: .72rem; opacity: .85; } /* ── 覆盖度披露 ────────────────────────────────────────────────────────── */ .coverage { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; margin: .6rem 0 1rem; } .coverage__head { font-weight: 600; } .coverage__list { margin: .45rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: .92rem; } .coverage__list li { margin: .15rem 0; } .coverage__list li.warn { color: var(--warn-ink); } /* ── 筛选器 ────────────────────────────────────────────────────────────── */ /* [hidden] 必须能压过下面的 display:flex。UA 样式表里 [hidden]{display:none} 的特异性和 .filters 一样，后写的赢 —— 结果是 JS 设了 hidden 但筛选栏照样显示，点里面残留的旧选项直接抛 TypeError（切到「未整理」的日子时会踩到）。 */ .filters[hidden] { display: none; } .filters { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: 0 0 1rem; } .filter { position: relative; } .filter__btn::after { content: " ▾"; color: var(--ink-faint); } .filter__panel { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 15rem; max-height: 20rem; overflow-y: auto; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); padding: .5rem; } .filter__panel[hidden] { display: none; } .filter__opt { display: flex; gap: .45rem; align-items: baseline; padding: .22rem .3rem; border-radius: 6px; cursor: pointer; font-size: .92rem; } .filter__opt:hover { background: var(--panel-2); } .filter__opt input { margin: 0; } .filter__opt .n { margin-left: auto; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .filter__hint { font-size: .82rem; color: var(--ink-faint); padding: .3rem; } .filters__note { font-size: .85rem; color: var(--ink-soft); flex-basis: 100%; } /* ── 区块 ──────────────────────────────────────────────────────────────── */ .section { margin: 1.6rem 0; } .section > h2 { display: flex; align-items: baseline; gap: .5rem; } .section > h2 .faint { font-weight: 400; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; margin: .7rem 0; } /* 今日主题（跨人） */ .theme__topic { margin: 0 0 .3rem; } .theme__summary { margin: 0; } .theme__who { margin: .45rem 0 0; font-size: .88rem; color: var(--ink-soft); } .theme__who a + a { margin-left: .5rem; } /* ── 今日要点 ────────────────────────────────────────────────────────── * 全页第一块内容，所以给它一点视觉重量：左边一道竖线 + 略大的字。 * 但**不用色块背景** —— 它下面紧跟着的主题卡片已经是带背景的卡了， * 两块都上底色会让首屏看起来是两个横幅而不是一段可读的正文。 */ .brief { border-left: 3px solid var(--accent); padding-left: .9rem; } .brief__headline { font-family: var(--reading); font-size: 1.12rem; line-height: 1.6; font-weight: 600; margin: 0 0 .55rem; } .brief__points { font-family: var(--reading); margin: 0; padding-left: 1.35rem; /* 留住序号，读者要能说「第 3 条」 */ line-height: 1.75; } .brief__point { margin: .4rem 0; } .brief__text { } /* 人名与原帖入口。跟正文同一行往后接，不换行成一个块 —— * 换块会让每条要点看起来像一张卡片，五条就成了五张卡，首屏又被撑走了。 */ .brief__tail { font-family: var(--ui); font-size: .84rem; white-space: normal; } /* 「原帖1」被折成「原 / 帖1」实测过，必须整块不断。 */ .brief__tail > * { margin-left: .5rem; white-space: nowrap; } .brief__who { color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted var(--line-strong, var(--line)); cursor: pointer; } .brief__who:hover { color: var(--ink); } /* ── 人物卡片 ──────────────────────────────────────────────────────────── */ .person__head { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: .5rem; margin-bottom: .6rem; } .person__links { margin-left: auto; font-size: .85rem; } .person__summary { margin: 0 0 .7rem; } /* 「这一天可能没收全」挂在人物卡片里。用提示色而不是正文色：它是关于这张卡片 * 可信度的话，读者不该把它当成他说过的内容。 */ .person__note { margin: 0 0 .7rem; font-size: .88rem; color: var(--warn-ink); background: var(--warn-bg); border-radius: 8px; padding: .35rem .6rem; } .person__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .7rem; } .person__sub { font-size: .82rem; letter-spacing: .04em; color: var(--ink-faint); text-transform: none; margin: .9rem 0 .35rem; } .tag { display: inline-block; font-size: .78rem; line-height: 1.5; padding: .05rem .45rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-soft); background: var(--panel-2); white-space: nowrap; } .tag--claim { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .tag--role { border-style: dashed; } /* 观点条目 */ .views { list-style: none; margin: 0; padding: 0; } .view { border-left: 3px solid var(--accent); background: var(--panel-2); border-radius: 0 8px 8px 0; padding: .55rem .8rem; margin: .5rem 0; } .view__tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .3rem; } .view__stance { margin: .1rem 0 .35rem; font-weight: 600; } .view__quote { margin: 0; padding: .45rem .7rem; background: var(--quote-bg); border-radius: 6px; font-size: .95rem; white-space: pre-wrap; overflow-wrap: anywhere; } .view__quote::before { content: "原文："; color: var(--ink-faint); } .view__meta { margin-top: .35rem; font-size: .84rem; color: var(--ink-soft); } .view__meta > * + *::before { content: " · "; color: var(--ink-faint); } /* 弱证据：不是他本人说的话。虚线 + 变浅的文字 + 显式标签，三重区分。 */ .view--weak { border-left: 3px dashed var(--line-strong); background: var(--weak-bg); color: var(--ink-soft); } .view--weak .view__stance { font-weight: 500; } .view--weak .tag--claim { color: var(--ink-soft); border-color: var(--line-strong); background: transparent; } .notice-weak { font-size: .85rem; color: var(--ink-soft); background: var(--weak-bg); border: 1px dashed var(--line-strong); border-radius: 8px; padding: .35rem .6rem; margin: 0 0 .4rem; } /* 闲聊：折叠，不与观点平级 */ .banter { margin-top: .8rem; } .banter > summary { cursor: pointer; font-size: .88rem; color: var(--ink-soft); } .banter .view { border-left-color: var(--line-strong); background: var(--weak-bg); } /* ── 没有内容的人 ──────────────────────────────────────────────────────── */ .quiet { display: grid; gap: .5rem; } .quiet__group { font-size: .93rem; } .quiet__group b { font-weight: 600; } .quiet__names { color: var(--ink-soft); } /* ── 离散出现网格（刻意不连线）─────────────────────────────────────────── */ .grid-scroll { overflow-x: auto; padding-bottom: .3rem; } table.presence { border-collapse: collapse; font-size: .8rem; } table.presence th, table.presence td { padding: 0; } table.presence th.name { position: sticky; left: 0; background: var(--panel); text-align: left; font-weight: 500; padding: .12rem .5rem .12rem .2rem; white-space: nowrap; z-index: 1; } table.presence td.cell { width: 1.15rem; height: 1.15rem; text-align: center; } table.presence td.cell span { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); } table.presence td.cell.empty span { width: .3rem; height: .3rem; background: var(--line-strong); border-radius: 1px; } table.presence td.cell.today { outline: 1px solid var(--accent); outline-offset: -2px; } table.presence th.date { font-weight: 400; color: var(--ink-faint); vertical-align: bottom; padding-bottom: .25rem; } table.presence th.date span { display: inline-block; writing-mode: vertical-rl; font-size: .7rem; line-height: 1; } /* 日期表头做成可点的按钮（键盘也能到），但外观保持成一行小字， * 不要长成一排真按钮 —— 21 个按钮框会把这张小图压垮。 */ table.presence th.date button { border: 0; background: none; padding: 0; color: inherit; cursor: pointer; } table.presence th.date button:hover { color: var(--accent); } /* ── 状态与页脚 ────────────────────────────────────────────────────────── */ .status { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: .8rem 1rem; margin: 1rem 0; } .status[hidden] { display: none; } .loading { color: var(--ink-soft); padding: 1rem 0; } .site-foot { margin-top: 2.4rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--ink-soft); } .site-foot ul { margin: .3rem 0 .6rem; padding-left: 1.1rem; } .site-foot li { margin: .2rem 0; } @media (max-width: 34rem) { body { padding: 0 .7rem 3rem; } .person__links { margin-left: 0; flex-basis: 100%; } .filter__panel { min-width: 12rem; } } /* 尊重「减少动态效果」偏好；本页动效很少，这里只是把过渡关掉。 */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* 留言区讨论摘要。和本人摘要（.person__summary）刻意做成两种观感：这段讲的是**别人**在说什么，读者一眼就要分得开，不能读成投资人自己的话。 */ .person__discussion { margin: .35rem 0 .6rem; padding: .55rem .7rem; border-left: 3px solid var(--border); background: var(--surface-1); color: var(--text-secondary); font-size: .93rem; line-height: 1.7; } /* ── 头部按钮组 + 页尾联系卡片 ────────────────────────────────────────────── 从 sibling 项目 power-tracker 移过来的。token 名两边完全不同，逐个映射过： --page → --panel --border → --line --text-primary → --ink --muted → --ink-faint --text-secondary → --ink-soft --series-1 → --accent 缺一个变量不会报错、只会静默解析成空值（卡片变透明、说明文字变默认黑），所以是查过 :root 才写的，不是照抄。 */ .head-btns { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; } /* 「联系我」是个，但要长得和旁边的