/* Channel navigation and page-local navigation have separate jobs. */ :root { --header: 72px; } .site-header .nav { display: grid; align-items: center; width: min(calc(100% - 48px), 1240px); height: var(--header); margin: auto; grid-template-columns: minmax(0, 1fr) auto minmax(100px, 1fr); gap: 24px; } .site-header .brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; font-family: var(--sans); font-weight: 600; } .site-header .brand-name { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .site-header .brand-divider { flex: none; width: 1px; height: 1.05em; background: currentColor; opacity: .52; } .site-header .brand-mark { display: block; flex: none; width: 32px; height: 32px; background: transparent url('assets/favicon-liaoyuan.svg?v=20260904-r1') center / contain no-repeat; } .site-header .nav-links { position: static; display: flex; align-items: center; gap: 26px; padding: 0; border: 0; background: transparent; visibility: visible; opacity: 1; transform: none; } .site-header .nav-links a { position: relative; color: var(--ink-soft); font-family: var(--sans); white-space: nowrap; } .site-header .nav-links a { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 0; font-size: 15px; font-weight: 600; } .site-header .nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; } .site-header .nav-links a[aria-current="page"]::after { transform: scaleX(1); } .site-header .nav-links a::after { position: absolute; content: ''; bottom: 3px; left: 0; right: 0; height: 1px; background: var(--accent); transform: scaleX(0); } .site-header .nav-links a[aria-current="page"]::after { transform: scaleX(1); } .site-get { position: relative; justify-self: end; display: inline-flex; align-items: center; min-height: 44px; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; } .site-get > span[aria-hidden="true"] { display: none !important; } .site-get::after { position: absolute; inset: auto 0 6px; height: 1px; content: ""; background: var(--line-dark); } .site-get:hover::after, .site-get:focus-visible::after, .site-get[aria-current="page"]::after { background: var(--accent); } .site-get:hover, .site-get[aria-current="page"] { color: var(--accent-dark, var(--accent)); } .site-header a:focus-visible, .section-nav a:focus-visible, .breadcrumb a:focus-visible, .journal-page a:focus-visible, .site-footer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .scroll-progress { position: absolute; inset: auto 0 0; height: 2px; z-index: 1; background: var(--accent); transform: scaleX(0); transform-origin: left; pointer-events: none; } body[data-site-page="index"] main { padding-top: var(--header); } .section-nav { display: flex; align-items: center; gap: 28px; min-height: 54px; border-bottom: 1px solid var(--line); } .section-nav-label { margin-right: auto; color: var(--muted); font-size: 12px; } .section-nav a { position: relative; display: inline-flex; align-items: center; min-height: 48px; color: var(--muted); font-size: 13px; white-space: nowrap; } .section-nav a[aria-current="true"] { color: var(--ink); } .section-nav a[aria-current="true"]::after { position: absolute; content: ""; inset: auto 0 6px; height: 1px; background: var(--ink); } body[data-site-page="index"] .hero { padding-top: 48px; } .breadcrumb { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; min-height: 28px; } .breadcrumb [aria-current] { color: var(--ink-soft); } .breadcrumb a { display: inline-flex; align-items: center; min-height: 36px; } .breadcrumb a:hover { color: var(--accent); } .breadcrumb-back { margin-left: auto; gap: 8px; } .publication-breadcrumb { margin-bottom: 6px; } .edition-switch { gap: 26px; } body[data-site-page="learn"] .publication-breadcrumb { padding-top: 0; } html:has(body[data-site-page="tools"]), html:has(body[data-site-page="councli"]) { scroll-padding-top: calc(var(--header) + 24px); } .daily-actions, .film-actions { flex-wrap: wrap; gap: 10px 20px; } .back-to-channel { font-size: 13px; color: var(--muted); } .news-entry, .journal-feature, #daily-archive, #film-list { scroll-margin-top: calc(var(--header) + 20px); } .journal-page, .access-page { padding-top: calc(var(--header) + 40px); padding-bottom: 64px; } .journal-intro { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding-bottom: 24px; } .journal-intro .kicker { margin-bottom: 12px; } .journal-intro h1, .access-intro h1 { margin: 0; font-size: 40px; line-height: 1.3; } .journal-intro > p { margin: 0 0 4px; color: var(--muted); font-size: 15px; } .journal-contents { display: flex; align-items: center; gap: 24px; padding-block: 0; border-bottom: 1px solid var(--line); } .journal-contents a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0 12px; color: var(--muted); font-family: var(--sans); font-size: var(--fs-sm); line-height: 1.5; white-space: nowrap; } .journal-contents a > span[aria-hidden="true"] { display: none; } .journal-contents a::after { position: absolute; inset: auto 0 -1px; height: 1px; content: ""; background: var(--accent); transform: scaleX(0); transition: transform .2s ease; } .journal-contents a:hover, .journal-contents a:focus-visible { color: var(--ink); } .journal-contents a:hover::after, .journal-contents a:focus-visible::after { transform: scaleX(1); } .channel-more span { color: var(--accent); } .journal-feature { display: grid; grid-template-columns: minmax(180px, .38fr) minmax(0, 1fr); gap: 56px; padding-block: 48px; border-bottom: 1px solid var(--line); } .journal-channel h2 { margin: 0 0 12px; font-size: 24px; line-height: 1.4; } .journal-channel > p:not(.kicker) { margin: 0 0 20px; font-size: 14px; color: var(--muted); } .journal-channel .kicker { margin-bottom: 16px; font-size: 11px; } .channel-more { display: inline-flex; align-items: center; gap: 14px; min-height: 40px; font-size: 13px; color: var(--ink-soft); } .journal-meta { margin: 0 0 12px; font-size: 12px; color: var(--muted); line-height: 1.6; } .journal-article h3 { margin: 0 0 16px; font-size: 34px; line-height: 1.4; } .journal-article > p:not(.journal-meta) { max-width: 620px; margin-bottom: 12px; font-family: var(--serif); font-size: 19px; color: var(--ink-soft); line-height: 1.9; } .journal-news-row + .journal-news-row { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); } .journal-news-row h3 { margin: 0; font-size: 21px; line-height: 1.6; } .journal-page h2 a:hover, .journal-page h3 a:hover { color: var(--accent-dark); } .journal-film-link { display: block; } .journal-film-link img { display: block; width: 100%; height: auto; aspect-ratio: 1260 / 720; object-fit: contain; } .journal-film-link > div { padding-top: 20px; } .journal-film-link h3 { margin: 0 0 10px; font-size: 28px; } .journal-film-link p:not(.journal-meta) { margin-bottom: 8px; font-size: 15px; color: var(--muted); } .access-intro .breadcrumb { margin-bottom: 26px; } .access-intro .kicker { margin-bottom: 12px; } .access-intro > p:last-of-type { margin: 16px 0 28px; color: var(--muted); font-size: 16px; } .access-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding-bottom: 30px; } .access-steps a { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px 16px; padding-block: 18px; border-top: 1px solid var(--line-dark); } .access-steps a > span { font-size: 12px; color: var(--accent); } .access-steps strong { font-family: var(--serif); font-size: 21px; font-weight: 500; } .access-steps small { grid-column: 2; color: var(--muted); font-size: 12px; } /* Shared navigation feedback; native link navigation stays immediate. */ .edition-switch, .journal-contents { --nav-line-bottom: -1px; } .section-nav { --nav-line-bottom: 6px; } :is(.site-header .nav-links, .journal-contents, .edition-switch, .section-nav) > a { position: relative; transition: color .16s ease, opacity .12s ease; } :is(.site-header .nav-links, .journal-contents, .edition-switch, .section-nav) > a::after { position: absolute; content: ""; right: 0; bottom: var(--nav-line-bottom, 3px); left: 0; height: 1px; background: var(--accent); box-shadow: none; transform: scaleX(0); /* 改版前是从中线向两端展开，节奏也更舒展；这里对齐那套参数。 */ transform-origin: center center; transition: transform .35s cubic-bezier(.22, 1, .36, 1); } :is(.site-header .nav-links, .journal-contents, .edition-switch, .section-nav) > a:is([aria-current="page"], [aria-current="true"], [aria-selected="true"], :focus-visible, :active)::after { transform: scaleX(1); } :is(.site-header .nav-links, .journal-contents, .edition-switch, .section-nav) > a:is([aria-current="page"], [aria-current="true"], [aria-selected="true"])::after { animation: nav-line-enter .22s cubic-bezier(.2, .65, .3, 1); } :is(.site-header .nav-links, .journal-contents, .edition-switch, .section-nav) > a:active { color: var(--accent); opacity: .76; } @keyframes nav-line-enter { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (hover: hover) { :is(.site-header .nav-links, .journal-contents, .edition-switch, .section-nav) > a:hover::after { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { :is(.site-header .nav-links, .journal-contents, .edition-switch, .section-nav) > a, :is(.site-header .nav-links, .journal-contents, .edition-switch, .section-nav) > a::after { transition: none !important; animation: none !important; } } @media (max-width: 1080px) and (min-width: 821px) { .site-header .nav { grid-template-columns: auto 1fr auto; gap: 24px; } .site-header .nav-links { justify-content: center; gap: 18px; } .site-header .brand { font-size: 15px; gap: 8px; } .site-header .brand-name { gap: 6px; } } @media (max-width: 820px) { :root { --header: 108px; } .site-header .nav { width: calc(100% - 40px); grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 64px 44px; height: var(--header); gap: 0 12px; } .site-header .brand { font-size: 15px; gap: 8px; } .site-header .brand-name { gap: 6px; } .site-header .brand-mark { width: 28px; height: 28px; } .site-get { grid-column: 2; grid-row: 1; gap: 6px; font-size: 12px; } /* auto 列 + space-between：等宽列会让首尾项的外侧留白随文字长短相差悬殊 （「产品」余 25px、「AI 造价论坛」余 3px），看起来左右不对称。 与下方 .edition-switch 用同一套写法，两端才能贴齐。 */ .site-header .nav-links { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 0 8px; height: 44px; border-top: 1px solid var(--line); } .site-header .nav-links a { color: var(--ink-soft); font-size: 15px; font-weight: 600; min-height: 44px; padding: 0; } .site-header .nav-links a::after { bottom: 7px; left: 0; right: 0; } /* learn.css 在窄屏给 .nav-links 加了 overflow-x:auto，滚动条轨道会在右侧 画出一条竖线（内容其实并未溢出）。与 .edition-switch 一样藏掉。 */ .site-header .nav-links { scrollbar-width: none; -ms-overflow-style: none; } .site-header .nav-links::-webkit-scrollbar { display: none; } /* 窄屏没有 hover，当前页要靠字重立住。自托管字体的 400/600 是 Medium/SemiBold， 两档太接近；900 命中 Heavy，对比才够。桌面端仍用 600。 */ .site-header .nav-links a[aria-current="page"] { font-weight: 900; } .section-nav { gap: 24px; justify-content: space-between; min-height: 50px; } .section-nav-label { display: none; } .section-nav a { font-size: 12px; } body[data-site-page="index"] .hero { padding-top: 30px; } .publication-breadcrumb { font-size: 11px; margin-bottom: 4px; } .edition-switch { display: grid; grid-template-columns: auto auto auto auto; justify-content: space-between; gap: 8px; } .edition-switch .edition-tab { font-size: 12px; white-space: nowrap; } .journal-page, .access-page { padding-top: calc(var(--header) + 28px); padding-bottom: 40px; } .journal-intro { display: block; padding-bottom: 22px; } .journal-intro h1, .access-intro h1 { font-size: 34px; } .journal-intro > p { margin-top: 16px; font-size: 14px; line-height: 1.8; } .journal-contents { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 8px; } .journal-contents a { font-size: var(--fs-xs); } .journal-feature { grid-template-columns: 1fr; gap: 24px; padding-block: 30px; } .journal-channel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 16px; } .journal-channel .kicker { grid-column: 1 / -1; margin-bottom: 10px; } .journal-channel h2 { font-size: 21px; margin: 0; } .journal-channel > p:not(.kicker) { display: none; } .journal-channel .channel-more { grid-column: 2; grid-row: 2; font-size: 12px; gap: 8px; } .journal-article h3 { font-size: 30px; margin-bottom: 12px; } .journal-article > p:not(.journal-meta) { font-size: 17px; line-height: 1.85; } .journal-news-row h3 { font-size: 19px; } .journal-film-link h3 { font-size: 26px; } .access-intro .breadcrumb { margin-bottom: 20px; } .access-intro > p:last-of-type { font-size: 15px; line-height: 1.8; } .access-steps { gap: 18px; padding-bottom: 8px; } .access-steps a { gap: 8px; } .access-steps strong { font-size: 17px; } .access-steps small { grid-column: 1 / -1; font-size: 11px; } } @media (max-width: 360px) { .site-header .brand { font-size: 13px; gap: 6px; } .site-header .brand-name { gap: 5px; } .site-header .brand-mark { width: 24px; height: 24px; } .site-header .nav { width: calc(100% - 32px); column-gap: 8px; } .site-get { font-size: 11px; gap: 4px; } .site-header .nav-links a { font-size: 12px; font-weight: 600; } .publication-breadcrumb { gap: 6px; } .edition-switch .edition-tab { font-size: 11px; } } /* ============================================================ 燎原清单定额 · 视觉与可读性调整（2026-09-07） 追加在 hierarchy.css 末尾。整块删除即可完全回滚。 1 配色 2 正文字号 3 截图不滚动 4 收掉第二条导航 5 首屏焦点 6 手机端排版 ============================================================ */ /* ---------- 1. 配色：把「AI 默认赤陶」换成有信念的炭火朱 ---------- */ /* 2026-09-09：按要求回到改版前的配色。这四个值对比度较低 （accent 4.66 / muted 4.58 / sage 4.12，sage 不达 WCAG AA 4.5:1）， 是刻意选择的视觉效果，不是遗漏。 */ :root{ --accent: #b64b31; --accent-dark: #8f3927; --muted: #687069; --sage: #6a796e; } /* ---------- 2. 正文字号回到阅读尺度 ---------- */ .ai-news-entry-lead, .ai-news-entry-impact, .forum-thread-excerpt, .forum-reply p, .beta-points li, .beta-form > p, .forum-compose-lead, .daily-body p, details p{ font-size: var(--fs-body); line-height: 1.85; } /* 真正的次要信息留小号，但从 13px 抬到 15px */ .beta-footnote, .forum-footnote, .ai-news-footnote, .download-boundary, .update-note, footer{ font-size: var(--fs-sm); line-height: 1.75; } /* ---------- 3. 产品截图不再内部滚动，整张显示 ---------- */ /* refinement.css 里给这一张加了 max-height + overflow-y:auto， 导致 975px 高的图被压在 820px 框里，要在图片内部滚动才能看全。 另外三张截图没有这个限制。 */ .result-feature .shot{ max-height: none; overflow: hidden; } /* ---------- 4 与 5 已移除：恢复原版构图 ---------- .section-nav 恢复显示（工作方式 / 产品实景 / AI 算力 三个锚点要留着） .hero-evidence 恢复 refinement.css 的原值（strong 22px，不再放大到 30px） .hero / .hero-visual 的间距覆盖一并撤回 保留的是 1 配色对比度、2 正文字号、3 截图不滚动、6 手机端排版 */ /* ---------- 6. 手机端深度优化 ---------- 375x812 实测：固定头 108px（占屏 13%），其中第一行 64px 而 .brand 内容 只有 28px，白白空了 36px；main 顶部补偿 132px；栏目 Tab 下边距 24px； meta 里「一篇文章，不是新闻」与眉标「每天一篇，写给正在生活的人」语义重复 且独占一行。正文要到 477px 才开始，占首屏 59%。 关键：固定头高度与 main 补偿都由 --header 派生，改这一个变量即可整体收敛。 */ /* 锚点跳转不被固定头盖住（原先 scroll-padding-top 未设置，是实打实的 bug） */ html{ scroll-padding-top: calc(var(--header) + 12px); } @media (max-width: 640px){ /* 108 -> 92：第一行 64 的空档压到 48，第二行 44 保留为触摸目标下限 */ :root{ --header: 92px; } .site-header .nav{ grid-template-rows: 48px 44px; } /* 栏目 Tab 与面包屑收紧 */ .edition-switch, [class*="edition-switch"]{ margin-bottom: 12px; } .journal-breadcrumb, [class*="crumb"]{ margin-bottom: 2px; } /* meta：去掉与眉标重复的那句，消除孤行 */ .daily-article-meta > span:last-child{ display: none; } /* 本篇没有分节线，段间距稍开一点 */ .daily-body p{ margin-bottom: 17px; } .daily-article h2{ line-height: 1.25; } /* ---------- 7. 中文正文对齐（已修正）---------- 先前一版把正文改成 text-align:justify，实测在 430px 机型上更难读，已撤回。 430px 实测数据： 两端对齐 每字占位 17.00 ~ 18.57px，行间密度差 9%（22 字的行紧、21 字的行松） 左对齐 每字占位恒为 17.00px，波动 0；右端参差 17px＝正好一个字 浏览器在中文两端对齐时是把余量摊到字与字之间，余量多的行就明显变稀。 对中文而言字距均匀比右边缘齐平重要：阅读依赖恒定的字距节奏， 而一个字宽的参差几乎不可察。因此保持左对齐。 line-break:strict 实测与 auto 断行完全一致（浏览器本就对中文做基本禁则）， 保留仅作为显式声明，无副作用。 */ .daily-body p, .daily-dek{ text-align: start; line-break: strict; } /* ---------- 8. ONE·壹 长文阅读节奏 ---------- 393px 实测（这才是读着累的真正原因，前几轮一直在盯右边缘，方向错了）： 行高 31.45px = 1.85 倍（偏松，中文正文常用 1.6~1.75） 段间总跨度 49px 段间 ÷ 行距 1.53 倍（中文长文常规 1.8~2.2；低于 1.6 段落分界偏弱） 行距太松让段内文字散开，段距太紧让段与段黏连——两个方向同时削弱段落分界。 《客房》31 段、约 15 分钟，且 section_breaks 为空（无分节线）， 于是整篇视觉上黏成一片，没有段落节奏。 调整后：行距 30px，段间跨度 57px，比值 1.90。 页面反而从 10,341 缩到 10,171——行距收紧省下的比段距增加的多。 */ .daily-body p{ line-height: 1.75; margin-bottom: 27px; } @media (max-width: 640px){ .daily-body p{ line-height: 1.75; margin-bottom: 27px; } }