/* ============================================================ AutoNews v3 设计系统 — main.css 奶油纸白 + 蜂蜜金 · 衬线标题 + Fraunces 数字 · 日间 + 夜航 ============================================================ */ /* ---------- 0. 字体 ---------- */ /* 中文衬线不走网络字体：Noto Serif SC 的分片表实测一个首页要拉 22 个分片 / 1.7MB （原注释估的「每页 100-300KB」低估了 6-17 倍），手机端 FCP 被拖到 12.8s。 标题全是数据库来的新闻标题，字符集不可预知，子集化也压不下来——改用系统衬线： iOS/macOS 落 Songti SC、Android 落自带的 Noto Serif CJK、Windows 落宋体。详见 #65。 */ /* Fraunces（拉丁数字/英文展示字）：只留拉丁段，ttf → woff2，123KB → 50KB */ @font-face { font-family:'Fraunces'; font-weight:400; font-display:swap; src:url("../vendor/fonts/fraunces-400.2d01d65af8fa.woff2") format('woff2'); } @font-face { font-family:'Fraunces'; font-weight:700; font-display:swap; src:url("../vendor/fonts/fraunces-700.52f45901fdda.woff2") format('woff2'); } @font-face { font-family:'Fraunces'; font-weight:900; font-display:swap; src:url("../vendor/fonts/fraunces-900.fbe1cf30f16a.woff2") format('woff2'); } /* ---------- 1. 设计 Token ---------- */ :root { /* 字体栈 */ /* 拉丁字面放最前：中文衬线（尤其 Windows 的 SimSun）自带的西文极难看，站名 AutoNews、SUV、日期数字都要先走拉丁字。用已经在本地的 Fraunces（不多一个请求）， 不用 Georgia——Georgia 只有旧式数字，「30万」会印成「3o万」。中文再往后落各平台宋体。 */ --font-serif: 'Fraunces','Times New Roman','Songti SC','Source Han Serif SC','Noto Serif CJK SC','STSong','SimSun',serif; --font-display: 'Fraunces',Georgia,'Times New Roman',serif; --font-body: 'PingFang SC','Microsoft YaHei',-apple-system,'Segoe UI',sans-serif; /* 色彩：日间 */ --paper: #FAF8F4; --paper-rgb: 250,248,244; --card: #FFFFFF; --ink: #1E1C18; --ink-2: #4A4640; /* ink-3 从 #8A8578 调暗到 #726D60：原值 on 白只有 3.68:1，不过 WCAG AA(4.5)， 而它是 --text-meta 的实体、被元信息行大量当小字用。现 5.16:1。 */ --ink-3: #6A6659; /* ink-4 是**图形/装饰专用**（分隔符、占位图标、大字）——原值 #B5AFA3 只有 2.18:1， 连图形的 3:1 都不到。现 3.68:1，过图形 AA。**禁止用于正文小字**，小字一律用 ink-3。 */ --ink-4: #8A8578; /* 金色分两支（UI设计规范「图形色与文字色分离」原则，此前只写在文档里、代码没执行）： --gold 是**图形色**（边框/图标/下划线/进度条），2.25:1，不许当文字色； --gold-text 是**文字色**，on 白 5.17:1、on 浅金 4.80:1，金色文字一律用它。 */ --gold: #D9A514; --gold-text: #856A00; --on-gold: #1E1C18; /* 金底上的字色，深浅两套主题都用深墨（见下方 btn-primary 说明）*/ --gold-bright: #F5C518; --gold-dark: #B08A10; --gold-light: #FFF6DC; --gold-wash: rgba(217,165,20,0.08); /* 反相药丸（选中的筛选 chip / sub-nav）：底色跟着主题翻面，字色必须跟着一起翻。 此前写死 background:var(--ink) + 金色字——深色模式下 --ink 变成浅米色， 金字压浅底只有 1.33:1，选中的筛选条在深色模式下**基本看不见**（真 bug，非洁癖）。 */ --invert-bg: #1E1C18; --on-invert: #F5C518; /* 10.4:1 on invert-bg */ --line: #E9E4D8; --line-2: #F0ECE2; /* green/red 各调暗一档：原值叠在自己的 8~10% 淡底上只有 4.56/4.39:1（红的直接不达标）， 现 5.22/5.08:1，留出余量——这两个色会叠在白底和暖白底两种背景上。 */ --green: #556957; --green-light: rgba(94,114,97,0.1); --red: #A94A32; --red-light: rgba(181,84,59,0.08); /* 红底徽章的字色（跟 --on-gold 一个道理）：日间红是深砖红，压白字 6.9:1； 深色模式的红是浅珊瑚，白字只有 2.5:1，必须翻成深墨。 */ --on-red: #FFFFFF; /* 骨架屏的流光：深色模式下白色高光会在深底上闪成一道亮条 */ --sk-sheen: rgba(255,255,255,0.55); /* 次级软底：白卡片内部的二级区块底（投票区、入口卡、免责条、来源说明）。 比 --paper 再深一档，在 --card 白底上分出层次又不必再画一条边。 此前四处模板/样式引用它却从没定义过，其中无 fallback 的两处整条 background 静默失效（#630）。 --bg-soft 是同义别名：两个名字在仓库里各长了一半，统一到这一个值上。 */ --paper-2: #F5F2EA; --bg-soft: var(--paper-2); /* 同一个语义在仓库里又长出两个名字（#643）：--bg-subtle 三处、--bg-2 一处， 全都无 fallback ⇒ background 整条静默失效（月报两页和答题页的区块底消失、 订阅表 hover 完全没反馈）。跟 --bg-soft 一样收敛到 --paper-2，不造第三个值。 这些是 var() 别名，夜航靠 --paper-2 自己翻面，不必在深色块里重复定义。 */ --bg-subtle: var(--paper-2); --bg-2: var(--paper-2); /* algorithm.html:258 的注释早就写着「写 var(--danger,#A94A32) 等于一直在吃那个 硬编码回退值」——发现过，没人补。#A94A32 就是日间的 --red。 */ --danger: var(--red); /* 等宽栈：六处引用都带 fallback，所以一直是 fallback 在干活（#643）。 */ --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --r: 10px; --r-sm: 6px; /* 向后兼容旧 token 名 */ --yellow: var(--gold-bright); --yellow-dark: var(--gold-dark); --yellow-light: var(--gold-light); --yellow-text: var(--gold-text); /* 旧模板里的「黄系文字」指向真·文字色，不再是图形金 */ --bg: var(--paper); --white: var(--card); --text: var(--ink); --text-light: var(--ink-2); --text-meta: var(--ink-3); /* #640：--text-lighter 从 --ink-4 改指 --ink-3。这个别名的名字写着「text」， 它却指着图形专用色（3.47:1，正文 AA 要 4.5）——写代码的人以为在用浅文字色， 全站 82 处 var(--text-lighter) 因此全部不过 AA。改这一行 = 82 处一次修好。 原本借它拿图形色的 5 处已改成直引 var(--ink-4)（见 #640 审计单）。 */ --text-lighter: var(--ink-3); --border: var(--line); --q-good: #2E7D32; --q-mid: #A85D00; /* 原 #E8890C on 白仅 2.62:1，橙色在浅底上几乎必然不达标；现 4.96:1 */ --q-bad: #D93025; --ai-badge: #1A73E8; --ai-wash: #F8FBFF; /* 阴影 → 极淡柔影(取代旧硬阴影)。 颜色不用纯黑：纸面是暖白 #FAF8F4，压中性黑会把暖调压成脏灰。阴影色往表面色相偏 （取墨色 #1E1C18 的暖褐向），并拆成两层——近处一层收边、远处一层散开。 */ --shadow: 0 1px 2px rgba(56,46,28,0.04), 0 2px 6px rgba(56,46,28,0.03); --shadow-hover: 0 2px 4px rgba(56,46,28,0.05), 0 8px 22px rgba(56,46,28,0.06); /* 圆角 */ --radius: var(--r); --radius-sm: var(--r-sm); --radius-full: 999px; /* 字号阶梯: 12/14/16/20/28/44 */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 20px; --fs-2xl: 28px; --fs-3xl: 44px; /* 间距 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; /* 缓动 */ --ease: cubic-bezier(0.4,0,0.2,1); --ease-out: cubic-bezier(0,0,0.2,1); } /* ---------- 1b. 夜航模式 ---------- */ [data-theme="dark"] { --paper: #1A1714; --paper-rgb: 26,23,20; --card: #242018; --ink: #E8E2D6; --ink-2: #C4BCB0; --ink-3: #A6A093; /* 原 #8A8578 on 深卡片 4.41:1 差一点点不过 AA；现 5.38:1 */ --ink-4: #7A7466; /* 图形专用，原 2.23:1 连图形 3:1 都不到；现 3.49:1 */ --gold: #F0C040; --gold-text: #F0C040; --on-gold: #1E1C18; /* 深色模式下 --ink 是浅色，压在亮金上只有 1.07:1，必须固定深墨 */ /* 深色底上金色本身就够亮（9.51:1），文字色不必再分支 */ --gold-bright: #FFD866; --gold-dark: #D9A514; --gold-light: rgba(240,192,64,0.1); --gold-wash: rgba(240,192,64,0.06); --invert-bg: #E8E2D6; /* 深色模式下反相药丸变浅底 */ --on-invert: #1E1C18; /* 13.1:1 on invert-bg */ --line: #2E2A24; --line-2: #363028; --green: #7FA882; --green-light: rgba(127,168,130,0.1); --red: #E07A5F; --red-light: rgba(224,122,95,0.08); --on-red: #1E1C18; /* 8.4:1 on 珊瑚红 */ --sk-sheen: rgba(255,255,255,0.06); --paper-2: #1E1A15; /* 夜航：比 --card 再暗一档，同样是卡内二级区块底 */ /* 旧 token 别名跟随 */ --yellow: var(--gold-bright); --yellow-dark: var(--gold-dark); --yellow-light: var(--gold-light); --yellow-text: var(--gold-text); --bg: var(--paper); --white: var(--card); --text: var(--ink); --text-light: var(--ink-2); --text-meta: var(--ink-3); /* #640：--text-lighter 从 --ink-4 改指 --ink-3。这个别名的名字写着「text」， 它却指着图形专用色（3.47:1，正文 AA 要 4.5）——写代码的人以为在用浅文字色， 全站 82 处 var(--text-lighter) 因此全部不过 AA。改这一行 = 82 处一次修好。 原本借它拿图形色的 5 处已改成直引 var(--ink-4)（见 #640 审计单）。 */ --text-lighter: var(--ink-3); --border: var(--line); /* 质量分/AI 徽章色此前没做深色覆盖，日间的深色值直接落在深卡片上： q-good 3.16:1、q-bad 3.40:1、ai-badge 3.60:1 全部不过 AA。这里各提亮一档。 */ --q-good: #6FBF73; --q-mid: #F0A03C; --q-bad: #F07567; --ai-badge: #6BA6F5; --ai-wash: rgba(107,166,245,.10); } /* 长辈模式 */ html.elder { --fs-xs: 14px; --fs-sm: 15px; --fs-base: 18px; --fs-md: 18px; --fs-lg: 22px; --fs-xl: 24px; --fs-2xl: 30px; --fs-3xl: 48px; --paper: #FFFDF8; --card: #FFFFFF; --ink: #111111; --ink-2: #222222; --ink-3: #333333; --ink-4: #555555; --gold-text: #5C4200; /* 长辈模式合并高对比：正文/状态文字按 AAA 7:1 留余量。 */ --gold-dark: #6B4F00; --green: #2E4A32; --red: #7D2F20; --q-good: #245F28; --q-mid: #7D4300; --q-bad: #9B2118; --ai-badge: #0057A8; --ai-wash: #EEF5FF; --gold-wash: rgba(0,0,0,0); --line: #5A5A5A; --line-2: #D8D2C6; --shadow: none; --shadow-hover: none; line-height: 1.9; } html.elder[data-theme="dark"] { --paper: #111111; --card: #181818; --ink: #F5F5F5; --ink-2: #E3E3E3; --ink-3: #D6D6D6; --ink-4: #C6C6C6; --gold: #FFD54D; --gold-text: #FFD54D; --gold-dark: #FFD54D; --gold-light: rgba(255,213,77,0.12); --gold-wash: rgba(0,0,0,0); --line: #AFAFAF; --line-2: #2D2D2D; --green: #9BE39F; --red: #FF9B85; --q-good: #9BE39F; --q-mid: #FFBD70; --q-bad: #FF9B85; --ai-badge: #8FC2FF; --ai-wash: rgba(143,194,255,.14); } /* ---------- 2. 重置 & 基础 ---------- */ *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; overflow-x:hidden; } body { font-family: var(--font-body); background: var(--paper); color: var(--ink); font-size: var(--fs-base); line-height: 1.75; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 0.4s var(--ease), color 0.4s var(--ease); } /* 印刷噪点纹理 */ body::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:9990; opacity:.025; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); } ::selection { background: var(--gold); color: var(--on-gold); } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } /* ---------- 3. 排版工具 ---------- */ .serif { font-family: var(--font-serif); } .display { font-family: var(--font-display); } .gradient-text { background: linear-gradient(135deg, #F5C518 0%, #F0A830 50%, #E8875A 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="dark"] .gradient-text { background: linear-gradient(135deg, #FFD866 0%, #F5C518 50%, #F0A830 100%); -webkit-background-clip: text; background-clip: text; } .divider-gold { height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); border: none; } /* ---------- 4. 按钮 ---------- */ .btn { padding: 8px 20px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: var(--sp-1); transition: all 0.2s var(--ease); border: 1px solid transparent; } .btn-outline { border: 1px solid var(--line); background: var(--card); color: var(--ink-2); } .btn-outline:hover { border-color: var(--gold); color: var(--ink); } .btn-primary { background: var(--gold); color: var(--on-gold); border-color: var(--gold); font-weight: 700; } .btn-primary:hover { background: var(--gold-dark); border-color: var(--gold-dark); } .btn-ghost { background: none; border: none; color: var(--ink-3); } .btn-ghost:hover { color: var(--ink); } .btn-block { width: 100%; padding: var(--sp-3); background: var(--gold); color: var(--ink); border: none; border-radius: var(--r-sm); font-size: 15px; font-weight: 700; cursor: pointer; transition: background 0.2s; margin-top: var(--sp-2); } .btn-block:hover { background: var(--gold-dark); } html.elder .btn { min-height: 44px; padding: 10px 24px; } /* ---------- 5. 布局容器 ---------- */ .main { max-width: 1200px; margin: 0 auto; padding: var(--sp-6) 28px; } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-6); } /* 次级区块标题：事件详情、车型时间线、首页侧栏里那一层 h3，原来在 10 个地方各写各的 内联 `font-size:17px`（#390）。17px 不在字阶（12/14/16/20/28/44）上，收进 --fs-lg。 */ .section-title.sub { font-size: var(--fs-lg); font-weight: 700; letter-spacing: 0.01em; } .section-title { font-family: var(--font-serif); font-size: var(--fs-2xl); font-weight: 900; color: var(--ink); letter-spacing: 0.02em; line-height: 1.3; } /* ---------- 6. 导航：毛玻璃 ---------- */ /* 旧的顶部黄条 → 隐藏(v3 不需要) */ .top-bar { display: none; } .main-header { position: sticky; top: 0; z-index: 100; background: rgba(var(--paper-rgb), 0.82); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid transparent; transition: border-color 0.3s, background 0.4s var(--ease); } .main-header.scrolled { border-bottom-color: var(--line); } /* 跳到正文：键盘用户不用一路 Tab 过整条导航才能进内容，平时藏在屏幕外 */ .skip-link { position: fixed; top: -60px; left: var(--sp-4); z-index: 10000; padding: 10px 18px; border-radius: 0 0 var(--r-sm) var(--r-sm); background: var(--gold); color: var(--on-gold); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; transition: top 0.2s var(--ease); } .skip-link:focus { top: 0; } #main-content:focus { outline: none; } .header-inner { max-width: 1200px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; /* min-height 而不是 height：长辈模式字号顶到 18px、按钮最小高 44px， 写死 56px 会让 logo 和按钮从头部溢出去 */ min-height: 56px; gap: 8px; } html.elder .header-inner { padding-top: 6px; padding-bottom: 6px; } html.elder { --header-h: 72px; } .logo { font-family: var(--font-serif); font-size: 22px; font-weight: 900; color:var(--gold-text); letter-spacing: -0.02em; margin-right: 28px; text-decoration: none; flex-shrink: 0; } .main-nav { display:flex; gap:2px; } .main-nav a { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); padding: 6px 14px; border-radius: 8px; transition: color 0.2s, background 0.2s; text-decoration: none; white-space: nowrap; } .main-nav a:hover { color: var(--ink); background: var(--gold-wash); } .main-nav a.active { color:var(--gold-text); background: var(--gold-wash); font-weight: 700; } html.elder .main-nav a { font-size: var(--fs-md); padding: var(--sp-3) var(--sp-4); } .header-right { margin-left: 8px; display: flex; align-items: center; gap: var(--sp-2); flex-shrink:0; } /* 暗色切换按钮 */ .theme-toggle { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--ink-3); cursor: pointer; transition: color 0.2s, background 0.2s; border: none; background: none; font-family: inherit; font-size: 18px; padding: 0; } .theme-toggle:hover { background: var(--gold-wash); color:var(--gold-text); } /* ---------- 7. 分类导航（v3 暂隐，#58 重做为首页 chips） ---------- */ .sub-nav { background: var(--card); border-bottom: 1px solid var(--line) !important; transition: background 0.4s, border-color 0.4s; } .sub-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; height: 40px; gap: 6px; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .sub-nav a { text-decoration: none; color: var(--ink-3); font-size: var(--fs-sm); padding: 4px 12px; border-radius: var(--radius-full); transition: all 0.2s; white-space: nowrap; border: 1px solid transparent; } .sub-nav a:hover { color: var(--ink); border-color: var(--line); } .sub-nav a.active { background: var(--invert-bg); color: var(--on-invert); border-color: var(--invert-bg); font-weight: 700; } .sub-nav .dim-label { font-size: var(--fs-xs); color: var(--ink-3); margin-right: var(--sp-1); flex-shrink: 0; white-space: nowrap; font-weight: 600; } /* ---------- 8. 筛选栏（chips 风格） ---------- */ .filter-bar { display: flex; gap: var(--sp-2); margin-bottom: 20px; flex-wrap: wrap; } .filter-item { padding: 4px 16px; border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; color: var(--ink-3); background: var(--card); border: 1px solid var(--line); transition: all 0.2s; } .filter-item:hover { border-color: var(--gold); color: var(--ink-2); } .filter-item.active { background: var(--invert-bg); color: var(--on-invert); border-color: var(--invert-bg); font-weight: 700; } /* 事件类型筛选行：和栏目/品牌行视觉上分开一档（它分的是「事件性质」不是「内容板块」）， 所以给个前缀标签 + 更小的字号；数字用 em 弱化，避免和类型名抢焦点 */ .filter-bar-type { align-items: center; } .filter-label { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; margin-right: var(--sp-1); flex-shrink: 0; } .type-chip { padding: 3px 12px; font-size: var(--fs-xs); } /* 篇数是给用户看的信息不是装饰，用 ink-3（4.5:1 过 AA）而非 ink-4（3.68:1 只够图形） */ .type-chip em { font-style: normal; color: var(--ink-3); margin-left: 3px; font-weight: 400; } .type-chip.active em { color: inherit; opacity: .75; } /* 硬事件（召回/事故/维权）用红系提示，降价用绿系——和卡片上的类型 chip 同色系， 点了之后能一眼对上是同一维度 */ .type-chip.type-recall, .type-chip.type-accident, .type-chip.type-rights { color: var(--red); } .type-chip.type-price { color: var(--green); } .type-chip.type-flag { color: var(--red); border-color: var(--red-light); } .type-chip.active { color: var(--on-invert); } /* ---------- 9. 新闻列表（保留 class 名，重设风格） ---------- */ .news-list { display: flex; flex-direction: column; gap: var(--sp-3); } .news-item { background: var(--card); border-radius: var(--r); padding: 20px var(--sp-6); display: flex; gap: 20px; cursor: pointer; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s; border: 1px solid var(--line); } .news-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); border-color: var(--gold); } .news-thumb { width: 200px; height: 130px; border-radius: var(--r); background: linear-gradient(135deg, var(--line-2) 0%, var(--line) 100%); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--ink-3); overflow: hidden; } .news-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s var(--ease); } .news-item:hover .news-thumb img { transform: scale(1.03); } /* 无封面条目（#291）：整块缩略图不渲染，正文吃满整行宽。 原来还加一道 3px 金色左条「标出条目起点」——那是按「无图是少数」设计的。实际库里 1257 篇只有 14 篇有封面，金线等于逐条常亮，既不再指示任何东西，又让金色在列表里泛滥。 卡片自己的 1px 描边 + 12px 间距已经标住了起点，金线去掉。 */ .news-body { flex: 1; display: flex; flex-direction: column; } .news-body h3 { font-family: var(--font-serif); font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: var(--sp-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-item:hover .news-body h3 { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; } .news-body .summary { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.7; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-body .info-row { display: flex; align-items: center; gap: var(--sp-4); margin-top: auto; font-size: var(--fs-xs); color: var(--ink-3); } .tag { display: inline-block; padding: 2px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; background: var(--gold-wash); color:var(--gold-text); } .news-item.low-quality { opacity: .55; } .news-item.low-quality:hover { opacity: 1; } /* ---------- 10. 论坛 ---------- */ .post-list { display:flex; flex-direction:column; gap:1px; background:var(--line); border-radius:var(--r); overflow:hidden; } .post-item { background: var(--card); padding: var(--sp-4) var(--sp-6); display: flex; align-items: center; gap: var(--sp-4); transition: background 0.2s; } .post-item:hover { background: var(--line-2); } .post-item-main { display:flex; align-items:center; gap:var(--sp-4); flex:1; min-width:0; color:inherit; text-decoration:none; } .post-report-control { margin:0; flex-shrink:0; } .post-report-btn { min-height:32px; padding:5px 10px; font-size:var(--fs-xs); white-space:nowrap; } .post-report-btn[disabled] { opacity:.55; cursor:default; } .post-detail-report { display:flex; justify-content:flex-end; margin-top:var(--sp-4); padding-top:var(--sp-3); border-top:1px solid var(--line-2); } .post-avatar { width:40px; height:40px; border-radius:50%; background: var(--line-2); display:flex; align-items:center; justify-content:center; font-size: var(--fs-md); color: var(--ink-3); flex-shrink:0; font-weight:600; } .post-info { flex:1; min-width:0; } .post-info h4 { font-size:var(--fs-base); color:var(--ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .post-info .post-meta { font-size:var(--fs-xs); color:var(--ink-3); margin-top:3px; } .post-replies { font-size:var(--fs-xs); color:var(--ink-3); text-align:right; flex-shrink:0; } .post-replies strong { color:var(--ink-2); font-size:var(--fs-base); } @media (max-width:640px) { .post-item { flex-wrap:wrap; padding:var(--sp-3) var(--sp-4); gap:var(--sp-2); } .post-item-main { flex-basis:100%; gap:var(--sp-3); } .post-report-control { margin-left:auto; } } /* ---------- 11. 表单 ---------- */ .form-card { background: var(--card); border-radius: var(--r); padding: 36px 40px; max-width: 480px; margin: 40px auto; border: 1px solid var(--line); } .form-card h2 { text-align:center; font-family:var(--font-serif); font-size:var(--fs-xl); margin-bottom:28px; color:var(--ink); } .form-group { margin-bottom: var(--sp-4); } .form-group label { display:block; font-size:var(--fs-sm); font-weight:600; color: var(--ink-2); margin-bottom:6px; } .form-group input, .form-group textarea, .form-group select { width:100%; padding:10px 14px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:var(--fs-base); font-family:inherit; transition: border-color 0.2s; background: var(--card); color: var(--ink); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { /* 焦点态原来只换了 1px 金边（对白底 2.25:1，WCAG 非文字要 3:1）， 再叠一层 10% 的淡晕基本看不出来。改成实心 2px 描边 + 深金边框。 */ outline: 2px solid var(--gold-dark); outline-offset: 1px; border-color:var(--gold-dark); box-shadow: 0 0 0 3px rgba(217,165,20,0.14); } .form-group textarea { resize:vertical; min-height:130px; } .form-group .helptext { font-size:11px; color:var(--ink-3); margin-top:var(--sp-1); display:block; } .form-group .errorlist { font-size:var(--fs-xs); color:var(--red); list-style:none; margin-top:var(--sp-1); } .form-footer { text-align:center; margin-top:20px; font-size:var(--fs-sm); color:var(--ink-3); } .form-footer a { color:var(--gold-text); text-decoration:none; font-weight:600; } .form-footer a:hover { text-decoration:underline; } /* ---------- 12. 空状态 ---------- */ .empty-state { text-align:center; padding:60px 20px; color:var(--ink-3); } .empty-state .empty-icon { font-size:56px; margin-bottom:var(--sp-4); } .empty-state p { font-size:15px; color:var(--ink-3); } .empty-state a { color:var(--gold-text); text-decoration:none; font-weight:600; } /* ---------- 13. 页脚 ---------- */ .site-footer { text-align: center; padding: var(--sp-8) 28px; color: var(--ink-3); font-size: var(--fs-xs); max-width: 1200px; margin: 48px auto 0; border-top: 1px solid var(--line); transition: border-color 0.4s; } .site-footer a { color:var(--ink-3); text-decoration:none; margin:0 var(--sp-2); } .site-footer a:hover { color:var(--gold-text); } /* ---------- 14. 轮播（保留，#58 重做为 hero） ---------- */ .carousel { max-width:1200px; margin:var(--sp-6) auto 0; padding:0 28px; position:relative; } .carousel-slide { display:none; position:relative; border-radius:var(--r); overflow:hidden; height:360px; text-decoration:none; } .carousel-slide.active { display:block; } .carousel-slide img { width:100%; height:100%; object-fit:cover; } .carousel-caption { position:absolute; left:0; right:0; bottom:0; padding:60px 28px 22px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); } .carousel-caption h2 { color:#fff; font-family: var(--font-serif); font-size: var(--fs-2xl); font-weight:900; margin-top:var(--sp-2); line-height:1.35; } .carousel-dots { position:absolute; bottom:16px; right:40px; display:flex; gap:var(--sp-2); } .carousel-dots .dot { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,0.4); cursor:pointer; transition:all 0.2s; } .carousel-dots .dot.active { background:var(--gold-dark); width:28px; border-radius:5px; } .carousel-progress { position:absolute; bottom:0; left:0; right:0; height:3px; background:rgba(255,255,255,0.2); border-radius:0 0 var(--r) var(--r); overflow:hidden; } .carousel-progress .bar { height:100%; background:var(--gold); width:0; } /* ---------- 15. 首页两栏 ---------- */ .home-grid { max-width:1200px; margin:var(--sp-6) auto 0; padding:0 28px; display:grid; grid-template-columns:1fr 300px; gap:var(--sp-8); align-items:start; } .home-main { min-width:0; } .home-side { display:flex; flex-direction:column; gap:20px; } /* 侧栏卡 */ .side-card { background: var(--card); border-radius: var(--r); padding: 20px 22px; border: 1px solid var(--line); position: sticky; top: 76px; transition: background 0.4s, border-color 0.4s; } .hot-item { display:flex; align-items:center; gap:10px; padding:8px 0; text-decoration:none; border-bottom:1px solid var(--line-2); transition: color 0.2s; } .hot-item:last-child { border-bottom:none; } .hot-thumb { width:52px; height:38px; flex-shrink:0; border-radius:4px; object-fit:cover; background:var(--line-2); } .hot-rank { flex-shrink:0; font-family: var(--font-display); font-weight:900; font-size:18px; font-variant-numeric:tabular-nums; width:24px; text-align:center; color: var(--ink-3); line-height:1; } .hot-rank.top, .hot-rank.top-1 { color:var(--gold-text); font-size: 22px; } .hot-rank.top-2 { color:var(--gold-text); opacity:.7; } .hot-rank.top-3 { color:var(--gold-text); opacity:.5; } .hot-title { font-size:var(--fs-sm); color:var(--ink-2); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .hot-item:hover .hot-title { color:var(--ink); } /* ---------- 16. 分页 ---------- */ .pagination { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:var(--sp-6); } .pagination a, .pagination span { min-width:36px; height:36px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:var(--r-sm); font-size:var(--fs-sm); text-decoration:none; color:var(--ink-3); background:var(--card); transition:all 0.2s; font-variant-numeric:tabular-nums; /* 页码等宽，翻页时数字不左右抖 */ } .pagination a:hover { border-color:var(--gold); color:var(--ink); } .pagination .current { background:var(--gold); color:var(--on-gold); border-color:var(--gold); font-weight:700; } /* 省略号不是可点页码：去掉方框，只留一个呼吸位 */ .pagination .ellipsis { border:none; background:none; min-width:20px; padding:0 2px; color:var(--ink-3); } /* ---------- 17. 数据统计 ---------- */ .stat-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); } .stat-card { background:var(--card); border-radius:var(--r); border:1px solid var(--line); padding:var(--sp-6) var(--sp-4); text-align:center; transition: background 0.4s, border-color 0.4s; } .stat-num { font-family: var(--font-display); font-size:34px; font-weight:900; color:var(--gold-text); font-variant-numeric:tabular-nums; } .stat-label { margin-top:6px; font-size:var(--fs-sm); color:var(--ink-3); } .stats-curve { width:100%; height:auto; display:block; } .stats-curve .curve-value { font-size:11px; fill:var(--ink-2); } .stats-curve .curve-label { font-size:10px; fill:var(--ink-3); } /* ---------- 17b. 数据页 v3：Bento 拼盘 + 滚动叙事（#60） ---------- */ /* side-card 的 sticky 是给侧栏用的；数据页里它会和 GSAP pin、bento 网格打架 */ #stats-root { counter-reset: stats-chapter; } #stats-root .side-card { position: static; } #stats-root .side-card > .section-title { font-size: 17px; margin-bottom: 14px; } #stats-root .card-sub { font-size: 12px; font-weight: 400; color: var(--text-meta); } /* 大数字卡：Fraunces 渐变大字（64px 封顶，窄屏随视口缩） */ #stats-root .stat-num { font-size: clamp(36px, 4.5vw, 64px); line-height: 1.1; background: linear-gradient(135deg, var(--gold-bright), var(--gold-dark)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* 章节编号：按出现顺序自动编号，{% if %} 抽走哪张都不断号 */ #stats-root .side-card > .section-title::before { counter-increment: stats-chapter; /* 补零交给 decimal-leading-zero：原来是死写一个 "0" 前缀，第 10 张卡就成了「010」 */ content: counter(stats-chapter, decimal-leading-zero); display: block; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--gold-text); margin-bottom: 4px; } /* pin 章节：大数字 + 曲线左右分栏 */ .stats-chapter { margin-top: var(--sp-6); } .chapter-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-6); align-items: center; } /* Bento 拼盘：12 列不对称拼排，dense 让缺席的卡自动补位 */ .stats-bento { margin-top: var(--sp-4); display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; gap: var(--sp-4); } .stats-bento > .side-card { grid-column: 1 / -1; min-width: 0; } @media (min-width: 900px) { .stats-bento > .span-7 { grid-column: span 7; } .stats-bento > .span-5 { grid-column: span 5; } } @media (max-width: 899px) { .chapter-grid { grid-template-columns: 1fr; gap: var(--sp-3); } } /* 榜单卡：sparkline 嵌进列表流 */ .brand-rank { list-style: none; margin: 0; padding: 0; } .brand-rank-row { display: flex; align-items: center; gap: var(--sp-3); padding: 9px 0; border-bottom: 1px solid var(--line-2); } .brand-rank-row:last-child { border-bottom: none; } .rank-no { font-family: var(--font-display); font-weight: 900; font-size: 15px; color: var(--gold-text); width: 20px; flex-shrink: 0; text-align: center; } .brand-rank-row:nth-child(n+4) .rank-no { color: var(--ink-3); } .rank-name { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rank-count { font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; flex-shrink: 0; } .rank-note { margin-top: 10px; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.7; } /* ---------- 18. 质量分 ---------- */ .q-badge { display:inline-block; padding:1px 7px; border-radius:10px; font-size:var(--fs-xs); font-weight:700; line-height:1.6; } .q-high { background:var(--green-light); color:var(--green); } .q-mid { background:var(--gold-light); color:var(--gold-text); } .q-low { background:var(--red-light); color:var(--red); } .q-flag { display:inline-block; padding:1px 7px; border-radius:3px; font-size:11px; background:var(--red-light); color:var(--red); border:1px solid rgba(181,84,59,0.2); } .quality-panel { margin:var(--sp-4) 0; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm); border:1px solid var(--line); background:var(--card); } .quality-panel.q-low { background:var(--red-light); border-color:rgba(181,84,59,0.15); } .quality-head { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; } /* 「这篇没有质量分」那一格（#669）。刻意**不用红/黄任何告警色**： 没判不是问题也不是警告，是一条中性的事实。用描边和留白跟质量分面板同族， 靠位置和字说话，不靠颜色。 */ .unjudged { margin:var(--sp-4) 0; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-sm); border:1px dashed var(--line); background:var(--card); } .unjudged-t { font-size:var(--fs-sm); font-weight:700; color:var(--ink-2); } .unjudged-why { margin-top:var(--sp-2); font-size:var(--fs-sm); color:var(--ink-3); line-height:1.9; } .unjudged-more { display:inline-block; margin-top:var(--sp-2); font-size:var(--fs-xs); color:var(--gold-text); text-decoration:none; } .unjudged-more:hover { text-decoration:underline; } .quality-why { margin-top:var(--sp-2); } .quality-why summary { cursor:pointer; font-size:var(--fs-sm); color:var(--gold-text); user-select:none; } .quality-detail { margin-top:var(--sp-2); font-size:var(--fs-sm); color:var(--ink-2); } .q-signal { margin:6px 0; padding:6px 10px; background:var(--card); border-left:3px solid var(--gold); border-radius:3px; } .q-signal .q-hit, .quality-detail .q-hit { display:inline-block; margin:1px 3px; padding:0 5px; background:var(--gold-light); color:var(--gold-text); border-radius:3px; font-size:var(--fs-xs); } mark.q-hit { background:var(--gold-light); color:var(--gold-text); padding:0 2px; border-radius:2px; } .folded-low { margin-top:14px; } .folded-low summary { cursor:pointer; user-select:none; padding:10px var(--sp-4); background:var(--card); border:1px dashed var(--line); border-radius:var(--r-sm); font-size:var(--fs-sm); color:var(--ink-3); } .folded-low summary:hover { color:var(--ink-2); border-color:var(--gold); } .folded-low[open] summary { border-bottom-left-radius:0; border-bottom-right-radius:0; } /* 摘要要点溯源（#191）：每条要点旁边挂原文出处，对不上的如实标出 */ .cite-point { margin:6px 0; } .cite-src { display:inline; margin-left:6px; } .cite-src summary { display:inline; cursor:pointer; user-select:none; font-size:var(--fs-xs); color:var(--gold-text); } .cite-src summary::marker { content:''; } .cite-src q { display:block; margin:4px 0 0 18px; padding:6px 10px; background:var(--card); border-left:3px solid var(--gold); border-radius:3px; font-size:var(--fs-sm); color:var(--ink-2); } /* 文字用 ink-3 不用 ink-4：ink-4 的定义那里自己写着「禁止用于正文小字」（3.68:1 不过 AA 4.5），而这行小字恰恰是最该被看清的那句实话——把「这条没对上」印成灰得看不见 等于没标。下划线是装饰，留 ink-4 没问题。 */ .cite-none { margin-left:6px; font-size:var(--fs-xs); color:var(--ink-3); border-bottom:1px dotted var(--ink-4); cursor:help; } /* 措辞没过对外校验的两档（#270）。同 cite-none 的理由：这两行是「你现在看的不是 模型原话」的唯一提示，印成看不清就等于没说，所以照样走 ink-2/ink-3 而不是灰到底。 cite-quoted 展示的是本篇正文原句（可信度比要点更高），所以不做减弱处理，只在 句尾挂一枚「· 原文」的小标区分来源。 */ .cite-quoted { color:var(--ink-2); } .cite-quoted-tag { font-size:var(--fs-xs); color:var(--gold-text); white-space:nowrap; } .cite-withheld { font-size:var(--fs-sm); color:var(--ink-3); border-bottom:1px dotted var(--ink-4); cursor:help; } /* ---------- 19. 搜索高亮 ---------- */ mark { background:var(--gold-light); color:var(--gold-text); padding:0 2px; border-radius:2px; } /* ---------- 20. 内容卡片（详情页/报告页通用） ---------- */ .content-card { background: var(--card); border-radius: var(--r); padding: var(--sp-6) 40px; border: 1px solid var(--line); transition: background 0.4s, border-color 0.4s; } .content-card + .content-card { margin-top: var(--sp-4); } .content-card h1 { font-family: var(--font-serif); font-size: 26px; font-weight: 900; line-height: 1.4; color: var(--ink); margin-bottom: var(--sp-4); } .detail-meta { display:flex; gap:var(--sp-4); font-size:var(--fs-sm); color:var(--ink-3); padding-bottom:var(--sp-4); border-bottom:1px solid var(--line); flex-wrap:wrap; } .event-link { display:block; margin-top:var(--sp-4); padding:10px var(--sp-4); background:var(--gold-wash); border-left:3px solid var(--gold); border-radius:var(--r-sm); text-decoration:none; color:var(--gold-text); font-size:var(--fs-base); } .event-link:hover { background:var(--gold-light); } /* 同源文本路径（#457）：谁先发的 + 两篇正文重合多少，一行一篇按时间排 */ .lineage-box { margin-top:var(--sp-4); padding:12px var(--sp-4); border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card); } .lineage-head { font-size:var(--fs-sm); font-weight:700; color:var(--ink-2); margin-bottom:10px; } .lineage-list { list-style:none; margin:0; padding:0; } .lineage-item { position:relative; padding-top:6px; padding-bottom:6px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; font-size:var(--fs-sm); } .lineage-item:first-child { border-top:none; } /* 当前这篇要一眼找得到——读者是从这篇点进来的，不标出来就得自己逐行找 */ .lineage-item.current { background:var(--gold-wash); border-radius:var(--r-sm); } .lineage-when { color:var(--text-lighter); font-variant-numeric:tabular-nums; } .lineage-src { font-weight:700; color:var(--ink-2); } .lineage-sim { color:var(--text-meta); font-size:var(--fs-xs); } .lineage-sim.first { color:var(--gold-text); font-weight:700; } .lineage-you { font-size:var(--fs-xs); color:var(--gold-text); border:1px solid var(--gold); border-radius:999px; padding:0 8px; } /* 标题独占一行：来源和重合度是这一块的主信息，标题是给点击用的 */ .lineage-title { flex-basis:100%; color:var(--ink); text-decoration:none; line-height:1.5; } a.lineage-title:hover { color:var(--gold-text); text-decoration:underline; } .lineage-foot { margin-top:10px; font-size:var(--fs-xs); color:var(--text-lighter); line-height:1.7; } .lineage-foot a { color:var(--gold-text); } /* AI 摘要 */ .ai-summary { margin:20px 0; padding:14px var(--sp-4); background:var(--gold-wash); border-left:3px solid var(--gold); border-radius:0 var(--r-sm) var(--r-sm) 0; } .ai-summary-label { font-size:var(--fs-xs); font-weight:700; color:var(--gold-text); margin-bottom:var(--sp-1); letter-spacing:0.04em; } .source-link { display:block; margin-top:var(--sp-4); padding:14px 20px; background:var(--gold-wash); border:1px solid var(--gold); border-radius:var(--r); text-decoration:none; color:var(--gold-text); font-size:15px; font-weight:600; text-align:center; } .source-link:hover { background:var(--gold); color:var(--on-gold); } /* 内容来路角标（#185）：形状共用一份、只有配色分家——写法照本文件下面 `.data-chip` / `.data-chip.chip-brand` 的基类 + 修饰符，别再各抄一遍那 5 条声明 （原来两块 7 条里 5 条逐字重复，改一个圆角得记着改两处）。 */ .ai-badge, .rule-badge { display:inline-block; padding:2px 6px; border-radius:3px; /* 11px → 字阶 --fs-xs（#644）：.rule-badge 印的是「规则摘录 · 正文首句」， 8 个字带分隔符，不是规则库允许 11px 的那种 2–3 字短状态。 */ font-size:var(--fs-xs); font-weight:600; vertical-align:middle; margin-left:var(--sp-1); } .ai-badge { background:rgba(26,115,232,0.08); color:var(--ai-badge); } /* 「这一格不是模型出的」——同一个位置的另一档（#185）。 一句话总结、早报摘要这类格子有 LLM 和规则两条来路；来路是规则时不能留白， 留白读者会顺着旁边那些蓝角标以为也是模型写的。灰底中性色，刻意不碰 .ai-badge 的蓝——蓝色在本站只代表「模型生成」这一件事。 文字色走 --ink-3（明/暗两套主题各自定义过，与 .digest-summary 同一档）， 不新增颜色 token，也就不动 tools/contrast_check.py 的那张配对表。 */ .rule-badge { background:var(--line-2); color:var(--ink-3); } /* 卡片摘要那一格的角标（首页 `.card-summary` + 列表条目 `.news-body .summary`， 两处都是 `-webkit-line-clamp:2`）：角标必须**前置**，挂文字后面会被裁掉、等于没标， 所以左边距归零、右边留 4px 跟文字分开。原来这串是两个模板各写一份 inline style、 逐字重复（含同一串 `margin-left:0;margin-right:4px`），收进修饰符。 */ .ai-badge--lead { margin-left:0; margin-right:4px; } /* ---------- 21. Toast ---------- */ .toast { position:fixed; bottom:var(--sp-8); left:50%; transform:translateX(-50%) translateY(100px); background:var(--ink); color:var(--paper); padding:var(--sp-3) var(--sp-6); border-radius:var(--r); font-size:var(--fs-sm); z-index:9999; opacity:0; transition:all 0.3s ease; pointer-events:none; } .toast.show { transform:translateX(-50%) translateY(0); opacity:1; } /* ---------- 22. 动画 ---------- */ @keyframes fadeInUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } } .fade-in-up { animation: fadeInUp 0.5s var(--ease-out) both; } .stagger-1 { animation-delay: 0.05s; } .stagger-2 { animation-delay: 0.10s; } .stagger-3 { animation-delay: 0.15s; } .stagger-4 { animation-delay: 0.20s; } .stagger-5 { animation-delay: 0.25s; } @keyframes shake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-4px); } 40% { transform:translateX(4px); } 60% { transform:translateX(-3px); } 80% { transform:translateX(2px); } } .anim-shake { animation: shake 0.4s ease-in-out 0.6s both; } @keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(181,84,59,0.3); } 50% { box-shadow:0 0 0 5px rgba(181,84,59,0); } } .pulse-red { animation: pulse 2s ease-in-out infinite; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* 滚动浮现 默认什么都不做——首页有 28 个 .reveal，一旦 GSAP/ScrollTrigger 没加载上 （断网、JS 关掉、老浏览器），opacity:0 就再也没人还原，整页内容看不见。 起始态改由 interactions.js 确认 ScrollTrigger 可用后加 .reveal-armed 才生效。 */ .reveal { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .reveal-armed { opacity:0; transform:translateY(16px); } /* ---------- 23. SVG 环形质量分 ---------- */ .score-ring { position:relative; display:inline-flex; align-items:center; justify-content:center; } .score-ring svg { transform:rotate(-90deg); } .score-ring .ring-bg { fill:none; stroke:var(--line); stroke-width:4; } .score-ring .ring-fg { fill:none; stroke-width:4; stroke-linecap:round; } .score-ring .ring-value { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; } .score-ring .ring-num { font-family: var(--font-display); font-size:26px; font-weight:900; line-height:1; } .score-ring .ring-label { font-size:11px; color:var(--ink-3); margin-top:2px; } /* ---------- 24. 导航下拉 ---------- */ .nav-dropdown { position:relative; } .nav-dropdown > a::after { content:' ▾'; font-size:10px; opacity:0.5; } .nav-dropdown .dropdown-menu { display:none; position:absolute; top:calc(100% + 4px); left:50%; transform:translateX(-50%); background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow: 0 12px 32px rgba(0,0,0,0.08); min-width:150px; padding:var(--sp-1) 0; z-index:200; } .nav-dropdown:hover .dropdown-menu, .nav-dropdown:focus-within .dropdown-menu { display:block; } .dropdown-menu a { display:block; padding:8px 18px; font-size:var(--fs-sm) !important; color:var(--ink-2); text-decoration:none; white-space:nowrap; transition:background 0.15s; border-radius:0 !important; background:none !important; font-weight:400 !important; } .dropdown-menu a:hover { background:var(--gold-wash) !important; color:var(--ink); } .dropdown-menu a.active { color:var(--gold-text); font-weight:600 !important; } /* 下拉里的分组标题（「方法」簇下的「其它入口」）：一条抽屉装两类东西时， 没有分隔的清单会重新变回杂物抽屉——这是把「更多」改名成「方法」时要还的债。 不可点，所以用 span 不用 a，读屏也不会把它读成链接。 */ .dropdown-menu .dropdown-group { display:block; padding:10px 18px 4px; font-size:var(--fs-xs); color:var(--ink-3); border-top:1px solid var(--line); margin-top:4px; } /* ---------- 25. 骨架屏 ---------- */ .skeleton { background: linear-gradient(90deg, var(--line-2) 25%, var(--line) 50%, var(--line-2) 75%); background-size:200% 100%; animation: shimmer 1.5s infinite; border-radius:var(--r-sm); } .skeleton-text { height:14px; margin-bottom:8px; border-radius:4px; } .skeleton-text.short { width:60%; } .skeleton-text.medium { width:80%; } .skeleton-circle { border-radius:50%; } .loading-overlay { text-align:center; padding:var(--sp-8) var(--sp-4); } .loading-spinner { width:36px; height:36px; border:3px solid var(--line); border-top-color:var(--gold); border-radius:50%; animation:spin 0.8s linear infinite; margin:0 auto var(--sp-4); } @keyframes spin { to { transform:rotate(360deg); } } .loading-text { font-size:var(--fs-sm); color:var(--ink-3); } /* ---------- 26. 时间线 ---------- */ .timeline { position:relative; padding-left:24px; } .timeline::before { content:''; position:absolute; left:7px; top:0; bottom:0; width:2px; background:var(--line); } .timeline-item { position:relative; padding-bottom:20px; } .timeline-item:last-child { padding-bottom:0; } .timeline-dot { position:absolute; left:-21px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--gold); border:2px solid var(--card); z-index:1; } .timeline-dot.dot-red { background:var(--red); } .timeline-dot.dot-green { background:var(--green); } .timeline-dot.dot-orange { background:var(--q-mid); } .timeline-dot.dot-blue { background:var(--ai-badge); } .timeline-meta { font-size:var(--fs-xs); color:var(--ink-3); } .timeline-title { display:block; font-size:15px; color:var(--ink); text-decoration:none; margin-top:3px; } a.timeline-title:hover { color:var(--gold-text); } .timeline-tags { margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; } .timeline-item.after-buy { background:var(--red-light); margin:0 -12px; padding:10px 12px 10px 36px; border-radius:var(--r-sm); } /* ---------- 27. 状态胶囊 ---------- */ .status-capsule { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:var(--radius-full); font-size:var(--fs-xs); font-weight:600; white-space:nowrap; } .status-active { background:var(--green-light); color:var(--green); } .status-upcoming { background:var(--gold-light); color:var(--gold-text); } .status-draft { background:var(--line-2); color:var(--ink-3); } .status-countdown { font-variant-numeric:tabular-nums; } /* ---------- 28. 事件色条 ---------- */ .event-bar { width:4px; flex-shrink:0; align-self:stretch; border-radius:2px; } .event-bar-cut { background:var(--red); } .event-bar-up { background:var(--green); } .event-bar-rights { background:var(--q-mid); } .event-bar-launch { background:var(--ai-badge); } .event-bar-default { background:var(--gold-dark); } /* ---------- 29. 收据（计算器） ---------- */ .receipt { font-variant-numeric:tabular-nums; } .receipt-row { display:flex; justify-content:space-between; align-items:baseline; padding:8px 0; font-size:var(--fs-sm); } .receipt-row + .receipt-row { border-top:1px solid var(--line-2); } .receipt-row .receipt-label { color:var(--ink-2); } .receipt-row .receipt-value { font-weight:600; text-align:right; } .receipt-row.receipt-total { border-top:2px solid var(--ink); padding-top:12px; margin-top:4px; font-size:var(--fs-md); font-weight:700; } .receipt-total .receipt-value { color:var(--green); } .receipt-check { color:var(--green); } .receipt-miss { color:var(--ink-3); } /* ---------- 30. 杂项 ---------- */ .result-enter { animation: fadeInUp 0.4s ease-out both; } .big-num { font-family:var(--font-display); font-variant-numeric:tabular-nums; font-weight:900; } .ai-summary-blue { margin:20px 0; padding:14px var(--sp-4); background: rgba(26,115,232,0.06); border-left:3px solid var(--ai-badge); border-radius:0 var(--r-sm) var(--r-sm) 0; } .ai-summary-blue .ai-summary-label { color:var(--ai-badge); } .result-bg-good { background:var(--green-light); } .result-bg-mid { background:var(--gold-wash); } .result-bg-bad { background:var(--red-light); } /* ---------- 31. 响应式：中屏 ---------- */ @media (max-width: 1024px) { .home-grid { grid-template-columns:1fr 260px; } .stat-cards { grid-template-columns:repeat(2,1fr); } } /* ---------- 32. 响应式：小屏 ---------- */ @media (max-width: 768px) { .main, .home-grid, .carousel, .sub-nav-inner, .header-inner { padding-left:var(--sp-4); padding-right:var(--sp-4); } .home-grid { grid-template-columns:1fr; } .side-card { position:static; } .carousel-slide { height:200px; } .carousel-caption h2 { font-size:var(--fs-lg); } .news-item { padding:14px var(--sp-4); gap:var(--sp-3); } .news-thumb { width:120px; height:78px; font-size:28px; } .news-body h3 { font-size:15px; } .header-inner { flex-wrap:wrap; height:auto; padding-top:10px; padding-bottom:10px; gap:var(--sp-2); } .stat-cards { grid-template-columns:repeat(2,1fr); } .stat-num { font-size:26px; } .content-card { padding:20px var(--sp-4); } .form-card { padding:var(--sp-6) 20px; margin:20px var(--sp-4); max-width:none; } .nav-dropdown .dropdown-menu { position:static; transform:none; box-shadow:none; border:none; min-width:0; display:none; padding:0; } .nav-dropdown.open .dropdown-menu { display:flex; flex-wrap:wrap; gap:2px; } .dropdown-menu a { padding:6px 12px; } .score-ring .ring-num { font-size:22px; } .sub-nav { display:none; } .site-footer { padding:var(--sp-6) var(--sp-4); margin-top:var(--sp-8); } } /* ---------- 33. 响应式：极小屏 ---------- */ @media (max-width: 480px) { .news-item { flex-direction:column; } .news-thumb { width:100%; height:180px; } .carousel-slide { height:160px; } .main-nav { flex-wrap:wrap; gap:var(--sp-1); } .main-nav a { padding:6px 10px; font-size:var(--fs-sm); } } /* ========================================================== v3 UI 改版 — 新增组件（#67） ========================================================== */ /* ---------- 35. 启动动画 ---------- 遮罩盖满全屏 z-index:10000，只有 JS 会移除它——JS 一挂就是全站白屏。 所以默认 display:none，由 base.html 的内联脚本加 html.startup 才显示， 同一段内联脚本还挂了硬超时兜底，interactions.js 没跑起来也会自动收掉。 */ .startup-overlay { display:none; } html.startup .startup-overlay { position:fixed; inset:0; z-index:10000; background:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; transition: opacity 0.6s var(--ease); } .startup-overlay.fade-out { opacity:0; pointer-events:none; } /* 进站仪式（改版 ⑭；2026-08-11 第三版，**逐条照抄**设计稿 1_首页_v4检测站.html 的 `.gate`）：抬杆 → 五工位灯依次亮 → 累计数落定，三拍共 1.8s。 纯 CSS keyframes，不依赖 GSAP——它是 defer 加载的，没跑起来时这段也得演完。 ⚠️ **被否掉的两版，别往回走**（两版都是自己重解释设计稿的结果）： ① 描线版：杆/车/灯全是 `stroke:var(--gold); stroke-width:2` 的描线， viewBox 260×120，灯是 4px 空心圆——淡金细线摆在整块 --paper 遮罩正中， 远看只是一撮毛。 ② SVG 小场景版：把杆砍到 110 长（稿 206）、条纹节距拉稀，还自己加了**车和 地面线**（稿上没有）。车在左、闸在右，把「一根杆的居中主视觉」打散成一个 歪的小场景，跟底下站名/灯/数字那条中轴对不上；沛伶「做的特别丑」。 这一段的主视觉**就是一根又长又粗的抬杆**：居中、干净、别加道具、别砍长度。 下面所有尺寸都是设计稿原值（.gate-bar-wrap / .gate-post / .gate-bar）， 改之前先想清楚为什么稿子是这个数。 */ .startup-gate { position: relative; width: 300px; height: 230px; } .startup-gate .sg-post { position: absolute; left: 38px; bottom: 0; width: 12px; height: 58px; border-radius: 3px; background: linear-gradient(180deg, var(--ink-3), var(--ink)); } /* 横杆：以**左端**为轴抬起（道闸就是这么转的），抬到 -74° 时杆尖会伸出舞台上沿 约 14px——稿子就是这样，`.startup-gate` 别加 overflow:hidden 去「装下」它。 */ .startup-gate .sg-bar { position: absolute; left: 46px; bottom: 46px; width: 206px; height: 10px; border-radius: 3px; background: repeating-linear-gradient(45deg, var(--red) 0 13px, #F5F2EA 13px 26px); box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transform-origin: left center; /* 第一拍 0.24~1.19s */ animation: sg-lift .95s cubic-bezier(.34, 1.3, .64, 1) .24s forwards; } @keyframes sg-lift { from { transform: rotate(0deg); } to { transform: rotate(-74deg); } } /* 站名：设计稿是 serif 900 + 大字距的英文副题，跟门头同一套字 */ .sg-sign { text-align: center; margin-top: var(--sp-4); } .sg-sign b { display: block; font-family: var(--font-display); font-size: 28px; font-weight: 900; letter-spacing: .08em; color: var(--ink); } .sg-sign span { display: block; margin-top: 4px; font-size: var(--fs-xs); letter-spacing: .3em; color: var(--ink-3); } /* 第二拍 0.30~1.32s：五个工位灯依次点亮。跟抬杆**同时**演（稿子也是这样）， 排在抬杆后面等它演完，1.8 秒就不够用了。 灯下面的工位名不是装饰——它是「每篇稿件过五个工位」的所指，删了这段仪式就没内容了 */ .sg-lamps { display: flex; gap: 14px; margin-top: var(--sp-5); } .sg-lamp { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: .25; animation: sg-lamp .3s ease-out both; } .sg-lamp i { width: 11px; height: 11px; border-radius: 50%; background: var(--ink-4); transition: none; } .sg-lamp span { font-size: var(--fs-xs); color: var(--ink-3); } .sg-lamp:nth-child(1) { animation-delay: 0.30s; } .sg-lamp:nth-child(2) { animation-delay: 0.48s; } .sg-lamp:nth-child(3) { animation-delay: 0.66s; } .sg-lamp:nth-child(4) { animation-delay: 0.84s; } .sg-lamp:nth-child(5) { animation-delay: 1.02s; } @keyframes sg-lamp { from { opacity: .25; } to { opacity: 1; } } /* 亮灯的金色和光晕跟着同一拍走——写在 i 上是因为 opacity 动画管不了子元素的底色 */ .sg-lamp i { animation: sg-lamp-on .3s ease-out both; animation-delay: inherit; } @keyframes sg-lamp-on { to { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-wash), 0 0 12px var(--gold); } } /* 第三拍：收在累计数字上（rAF 数数在 interactions.js）。设计稿 42px serif 金字 + 一行说明 */ .sg-screen { text-align: center; margin-top: var(--sp-5); } .startup-odometer { display: block; font-family: var(--font-display); font-size: 42px; font-weight: 900; line-height: 1; color: var(--gold-text); font-variant-numeric: tabular-nums; } .startup-label { display: block; margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: .04em; } /* 跳过：遮罩盖着全屏，不给出口就是把人按在这 1.8 秒里 */ .sg-skip { position: absolute; right: 24px; bottom: 22px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--fs-xs); color: var(--ink-3); padding: 6px 10px; border-radius: var(--r-sm); } .sg-skip:hover { color: var(--gold-text); background: var(--gold-wash); } /* ---------- 36. Hero 区（替代轮播） ---------- */ .hero { max-width:1200px; margin:var(--sp-6) auto 0; padding:0 28px; display:grid; grid-template-columns:2fr 1fr; gap:var(--sp-4); position:relative; overflow:hidden; } .hero, .hero-main, .hero-secondary, .hero-side-card, .hero-side-body { min-width:0; } .hero-main { position:relative; border-radius:var(--r); overflow:hidden; min-height:400px; display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none; color:#fff; } .hero-main img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 0.8s var(--ease); } .hero-main:hover img { transform:scale(1.03); } .hero-main .hero-overlay { position:relative; z-index:1; padding:48px 32px 28px; background:linear-gradient(transparent, rgba(0,0,0,0.75)); } .hero-main .hero-overlay h2 { font-family:var(--font-serif); font-size:var(--fs-3xl); font-weight:900; line-height:1.15; letter-spacing:0.02em; margin-bottom:var(--sp-2); } .hero-main .hero-overlay .hero-meta { font-size:var(--fs-sm); opacity:0.8; } .hero-watermark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--font-display); font-size:120px; font-weight:900; color:rgba(255,255,255,0.04); pointer-events:none; z-index:0; white-space:nowrap; letter-spacing:0.05em; } .hero-secondary { display:flex; flex-direction:column; gap:var(--sp-4); } .hero-side-card { flex:1; background:var(--card); border-radius:var(--r); padding:0; border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; justify-content:center; text-decoration:none; color:inherit; transition:border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s; } .hero-side-thumb { height:112px; overflow:hidden; background:var(--line-2); } .hero-side-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .hero-side-card:hover .hero-side-thumb img { transform:scale(1.03); } .hero-side-body { padding:var(--sp-4); display:flex; flex:1; flex-direction:column; } .hero-side-card:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow-hover); } .hero-side-card h3 { font-family:var(--font-serif); font-size:var(--fs-lg); font-weight:700; line-height:1.4; margin-bottom:var(--sp-2); overflow-wrap:anywhere; } .hero-side-card .data-chips { margin-bottom:var(--sp-2); } /* 车灯光轨 .headlight-streak 已删：没有任何模板挂过这个类（配套 JS 同删） */ /* ---------- 37. Bento 数据带 ---------- */ .bento-strip { max-width:1200px; margin:var(--sp-6) auto 0; padding:0 28px; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); } .bento-card { background:var(--card); border-radius:var(--r); padding:var(--sp-6) var(--sp-4); border:1px solid var(--line); text-align:center; position:relative; overflow:hidden; transition:border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s; } .bento-card:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow-hover); } .bento-card.card-glow::before { content:''; position:absolute; inset:0; border-radius:var(--r); background:radial-gradient(300px circle at var(--glow-x,50%) var(--glow-y,50%), rgba(217,165,20,0.08), transparent 60%); pointer-events:none; opacity:0; transition:opacity 0.3s; } .bento-card:hover.card-glow::before { opacity:1; } .bento-num { font-family:var(--font-display); font-size:36px; font-weight:900; color:var(--gold-text); line-height:1; font-variant-numeric:tabular-nums; } .bento-label { font-size:var(--fs-sm); color:var(--ink-3); margin-top:var(--sp-2); } .bento-icon { font-size:24px; margin-bottom:var(--sp-2); } .bento-card a { display:block; margin-top:var(--sp-2); font-size:var(--fs-xs); color:var(--gold-text); text-decoration:none; } .bento-card a:hover { text-decoration:underline; } /* ---------- 38. 杂志网格 ---------- */ .magazine-section { max-width:1200px; margin:var(--sp-8) auto 0; padding:0 28px; display:grid; grid-template-columns:1fr 300px; gap:var(--sp-8); align-items:start; } .magazine-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4); } .magazine-grid .news-card:first-child { grid-column:1 / -1; } .magazine-grid .news-card:first-child .news-card-thumb { height:280px; } .magazine-grid .news-card:first-child h3 { font-size:var(--fs-2xl); } /* ---------- 39. 结构化新闻卡 ---------- */ .news-card { background:var(--card); border-radius:var(--r); border:1px solid var(--line); overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column; transition:border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s; position:relative; } .news-card:hover { border-color:var(--gold); transform:translateY(-2px); box-shadow:var(--shadow-hover); } .news-card .news-card-thumb { width:100%; height:180px; overflow:hidden; position:relative; background:linear-gradient(135deg, var(--line-2), var(--line)); } .news-card .news-card-thumb img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s var(--ease); } .news-card:hover .news-card-thumb img { transform:scale(1.03); } /* 无封面卡（#291）：不占位、不摆假图，改用排版撑住——顶部金线代替图片给卡片一个视觉锚点， 标题放大并多给一行，摘要多摆两行，把省下的高度还给文字 */ /* 原来这里还有 `border-top:3px solid var(--gold)`，和列表版的 `.news-item.no-cover` 左金条 是同一个设计的两个出口，一起删（理由写在那一处）：库里 1257 篇只有 14 篇有封面， 首页 20 张卡就是 20 条金线，标记不再指示"这条没图"，只是把金色铺满了整个列表。 下面放大标题、加长摘要的补偿保留——那是真的把省下的高度还给了文字。 */ .news-card.no-cover .news-card-body h3 { font-size:19px; -webkit-line-clamp:3; } .news-card.no-cover .news-card-body .card-summary { -webkit-line-clamp:5; } /* 通栏头条无封面：上一条跟 `.magazine-grid .news-card:first-child h3` 特异性打平(0,3,1)、 且写在后面，会把头条字号从 28px 压到 19px——图没了字还变小，整块塌成一条小字带。 头条本来就该更大，这里明确抢回来。 */ .magazine-grid .news-card:first-child.no-cover .news-card-body { padding:var(--sp-6); } .magazine-grid .news-card:first-child.no-cover .news-card-body h3 { font-size:var(--fs-2xl); -webkit-line-clamp:2; } .news-card-body { padding:var(--sp-4); flex:1; display:flex; flex-direction:column; } .news-card-body h3 { font-family:var(--font-serif); font-size:17px; font-weight:700; line-height:1.5; color:var(--ink); margin-bottom:var(--sp-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .news-card:hover h3 { text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:4px; } .news-card-body .card-summary { font-size:var(--fs-sm); color:var(--ink-2); line-height:1.7; flex:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .news-card-body .card-meta { display:flex; align-items:center; gap:var(--sp-3); margin-top:var(--sp-3); font-size:var(--fs-xs); color:var(--ink-3); } /* 数据 chips */ .data-chips { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:var(--sp-2); } .data-chip { display:inline-flex; align-items:center; gap:2px; padding:2px 8px; border-radius:var(--radius-full); font-size:11px; font-weight:600; white-space:nowrap; border:1px solid var(--line); background:var(--card); color:var(--ink-2); transition:border-color 0.2s; } .data-chip:hover { border-color:var(--gold); } .data-chip.chip-brand { background:var(--gold-wash); color:var(--gold-text); border-color:transparent; } .data-chip.chip-price-down { background:var(--green-light); color:var(--green); border-color:transparent; } .data-chip.chip-price-up { background:var(--red-light); color:var(--red); border-color:transparent; } .data-chip.chip-event { background:rgba(26,115,232,0.06); color:var(--ai-badge); border-color:transparent; } .data-chip.chip-section { background:var(--gold-wash); color:var(--gold-text); border-color:transparent; } /* 事件动作类型 chip（召回/降价/上市…，见 news/nlp/event_type.py）。 配色只分三档、不给每类一个颜色——十三种颜色等于没有颜色，列表页会变成调色盘： · 红 = 与安全/权益直接相关（召回/事故/维权），用户最该先看到； · 绿 = 与钱包直接相关的利好（降价）； · 中性 = 其余类型，只做归类不抢注意力。 同时满足 UI 规范「黄占版面 ≤15%」——类型 chip 一律不用黄，把黄留给品牌/栏目。 */ .data-chip.chip-type { background:var(--line-2); color:var(--ink-2); border-color:transparent; } .data-chip.chip-type.type-recall, .data-chip.chip-type.type-accident, .data-chip.chip-type.type-rights { background:var(--red-light); color:var(--red); } .data-chip.chip-type.type-price { background:var(--green-light); color:var(--green); } /* Sparkline 占位 */ .sparkline-mini { width:60px; height:20px; margin-left:auto; flex-shrink:0; } .sparkline-mini polyline { fill:none; stroke:var(--green); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } /* ---------- 40. 命令面板 Ctrl+K ---------- */ .cmdk-overlay { display:none; position:fixed; inset:0; z-index:9995; background:rgba(0,0,0,0.5); backdrop-filter:blur(8px); align-items:flex-start; justify-content:center; padding-top:20vh; } .cmdk-overlay.open { display:flex; } .cmdk-box { width:560px; max-width:90vw; background:var(--card); border-radius:var(--r); box-shadow:0 24px 64px rgba(0,0,0,0.2); border:1px solid var(--line); overflow:hidden; } .cmdk-header { padding:var(--sp-4); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:var(--sp-3); } .cmdk-header .cmdk-icon { font-size:var(--fs-lg); color:var(--ink-3); } .cmdk-input { flex:1; border:none; outline:none; background:transparent; font-size:var(--fs-base); font-family:var(--font-body); color:var(--ink); } .cmdk-input::placeholder { color:var(--ink-3); } .cmdk-kbd { font-size:var(--fs-xs); color:var(--ink-3); padding:2px 6px; border:1px solid var(--line); border-radius:4px; font-family:var(--font-body); } .cmdk-body { padding:var(--sp-3); max-height:40vh; overflow-y:auto; } .cmdk-hint { font-size:var(--fs-sm); color:var(--ink-3); padding:var(--sp-4); text-align:center; } /* 实时结果（#63）：标题一行 + 栏目/相关度条一行；选中态浅金洗底 */ .cmdk-item { display:block; padding:10px var(--sp-3); border-radius:var(--r-sm); text-decoration:none; cursor:pointer; } .cmdk-item.active { background:var(--gold-wash); } /* 「问一句」那一条（#589）：常驻在结果末尾，跟真结果分开——中间一道线， 免得看起来像检索出来的第 9 条 */ .cmdk-item-ask { border-top:1px solid var(--line-2); margin-top:var(--sp-2); padding-top:var(--sp-3); } .cmdk-item-ask .cmdk-item-title { color:var(--gold-text); } .cmdk-item-title { display:block; font-size:var(--fs-sm); color:var(--ink); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cmdk-item-meta { display:flex; align-items:center; gap:var(--sp-2); margin-top:5px; } .cmdk-item-section { font-size:var(--fs-xs); color:var(--ink-3); flex-shrink:0; } /* 相关度条：金色渐变，宽度=相对本次最高分的百分比 */ .cmdk-score-bar { flex:1; max-width:180px; height:4px; border-radius:2px; background:var(--line-2); overflow:hidden; } .cmdk-score-fill { display:block; height:100%; border-radius:2px; background:linear-gradient(90deg, var(--gold-dark), var(--gold-bright)); transition:width 0.3s var(--ease-out); } .cmdk-score-pct { font-size:var(--fs-xs); color:var(--gold-text); flex-shrink:0; font-variant-numeric:tabular-nums; font-family:var(--font-display); font-weight:700; } .cmdk-footer { display:flex; align-items:center; justify-content:space-between; padding:var(--sp-2) var(--sp-4); border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--ink-3); } .cmdk-footer[hidden] { display:none; } .cmdk-all { border:none; background:none; cursor:pointer; padding:4px 6px; font-size:var(--fs-xs); color:var(--gold-text); font-weight:600; } .cmdk-all:hover { text-decoration:underline; } @media (prefers-reduced-motion: reduce) { .cmdk-score-fill { transition:none; } } /* ---------- 41. 移动端底部 Tab Bar ---------- */ .mobile-tab-bar { display:none; position:fixed; bottom:0; left:0; right:0; z-index:100; background:rgba(var(--paper-rgb),0.92); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-top:1px solid var(--line); padding:6px 0 env(safe-area-inset-bottom,0); } .mobile-tab-bar nav { display:flex; justify-content:space-around; } .mobile-tab-bar a { display:flex; flex-direction:column; align-items:center; gap:2px; /* 改版 ④：10px → 字阶 12px。这是全站最高频被看的一处中文小字， 10px 汉字在手机上低于舒适可读。 2026-08-27 五词化后是 **6 格**（行情/车/媒体/封存馆/方法 + 搜索），最长的 「封存馆」3 字：实算最窄约 288px，375px 的 iPhone SE 仍放得下，不溢出。 */ font-size:var(--fs-xs); color:var(--ink-3); text-decoration:none; padding:6px 12px; transition:color 0.2s; } .mobile-tab-bar a.active { color:var(--gold-text); } .mobile-tab-bar a:hover { color:var(--gold-text); } /* 搜索是