/* ============================================================================ web/static/css/public.css —— 公开层（营销层）样式 ============================================================================ 用途：`web/templates/base_public.html`（公开层基模板）专用。 数据来源：`docs/plan_stage_site.md` §5.14.11 / §5.14.12（三轮实测锁定值） ⚠️ 与 `app.css` 的关系（★ 防漂移，见 plan §5.7）： · `.topbar` 骨架 / `.nav-drop` 下拉逻辑**留在 app.css 共用**，本文件**不复制** · 本文件只写**公开层的差异**（`.topbar--public` 配色）+ 公开层独有版块 · ⇒ 铁律：**本文件不许出现 `.nav-drop` 的 hover / :focus-within 逻辑** ⚠️ 铁律：本文件**不许残留 `__px` / `#____` 占位符**（preflight 会断言） ============================================================================ */ /* ============================================================================ 1. 设计变量 —— ★ 全部为参照站（stageanalysis.net）实测值，不许凭感觉改 ============================================================================ */ /* --------------------------------------------------------------------------- ★ 自托管 Inter（用户裁定 2026-09-25「1b」） --------------------------------------------------------------------------- 为什么自托管而不是 Google Fonts CDN： · 零外部请求（墙内也能加载；CDN 故障不影响站点） · 版本固定（不会哪天 Google 改版导致字形漂移） · 符合 .clinerules「不引入外部依赖」的精神 ★ 这是 **可变字体**（一个文件含 100~900 全部字重）⇒ 只下载一次 ★ 只含 latin 子集（48 KB）⇒ 中文由 fallback 字体负责（见 --pub-font-cjk） --------------------------------------------------------------------------- */ @font-face { font-family: "InterVar"; font-style: normal; font-weight: 100 900; /* ★ 可变字体范围 */ font-display: swap; /* 先显示 fallback，不阻塞渲染 */ src: url("../fonts/inter-var-latin.woff2") format("woff2-variations"); } :root { /* ---- 颜色：★ 这些已被 app.css :root 统一定义（全站唯一真源）， 本文件**只使用不重定义**。保留此注释说明来源，避免后人误以为是漏定义。 · --pub-accent = #0076FF（app.css） · --pub-text = #333333 · --pub-bg = #FFFFFF · --pub-card-bg = #FFFFFF · --pub-line = #E5E5E7 ---- */ /* 底栏链接色（公开层专有，未与会员区共用）*/ --pub-footer-color: #333333; /* ★ 手机端灰底（卡片外壳）*/ --pub-page-bg: #F5F5F7; /* ---- ★ Subscribe 框（2026-09-25 修 BUG-B：参照站是浅灰底，不是白底）---- */ --pub-subscribe-bg: #F5F5F7; /* 灰化底 */ --pub-subscribe-br: 0; /* 参照站**无边框**（靠底色区分）*/ /* ---- ★ 品牌色 / 字体 —— **已上移到 app.css :root 作全站唯一真源** （2026-09-26 用户裁定「方案甲」，见 app.css 顶部注释）。 ⚠️ 本文件**不再重复定义** `--pub-brand-*` / `--pub-accent` / `--pub-text` / `--pub-bg` / `--pub-card-bg` / `--pub-line` / `--pub-font` / `--pub-font-cjk` —— 定义在 app.css，此处只使用。 ⚠️ `@font-face` 声明保留在本文件（app.css 未重复声明，避免重复下载）。 ⚠️ 值一旦在这里重写 ⇒ 又变成「两处维护同一常量」⇒ 漂移（本仓明令禁止）。 ---- */ /* ---- 字号 / 行高 ---- */ --pub-body-fs: 16px; --pub-body-lh: 22.8571px; /* ★ 2026-09-25（§7.7 抓参照站真值）：导航改 13px（原 16px） ⚠️ 参照站看起来"更大"不是因为字号大，而是 **uppercase + 1.5px 字距** ⇒ 中文无大写概念，靠**字距 + 字重**营造同样的"块感" */ --pub-nav-fs: 13px; --pub-nav-lh: 20px; --pub-nav-fw: 500; /* 参照站实测 = 500（保持）*/ --pub-nav-ls: 1.5px; /* ★ 参照站实测 1.5px（原 0.16px，差 10 倍）*/ --pub-nav-tt: uppercase; /* ★ 参照站是 uppercase（中文无影响）*/ --pub-nav-fw-cur: 600; /* 当前页（比常规重一档做高亮）*/ --pub-footer-fs: 12px; --pub-footer-lh: 17.1429px; /* ---- 尺寸：桌面（基准档 1440，与 1218 档交叉验证一致）---- */ --pub-topbar-h: 60.8px; /* ★ 桌面顶栏（手机档 50.8px）*/ --pub-nav-h: 60px; /* nav 本体（手机 50px）*/ --pub-topbar-border: 1px; /* ★ header−nav 恒定 0.8px ⇒ 1px 边框 */ /* ★ 2026-09-25 修 BUG-①：「图标偏小」——38px 是含透明边距的整体高度， 视觉上比参照站小一圈 ⇒ 提到 44px（后续按用户并排截图微调）*/ --pub-logo-h: 44px; /* ★ 2026-09-25（§7.7）：参照站右侧留白 32.5px（其 container padding 15 + margin 17.5） ⇒ 我方顶栏左右内边距对齐到 32.5px */ --pub-topbar-px: 32.5px; --pub-nav-link-h: 60px; /* ★ 参照站 nav 高 60px（原 50）*/ /* ★ 2026-09-25（§7.7）：参照站 nav 项 padding = 16px 9.75px（上下 16 / 左右 9.75） ⇒ 原为 py=0 / px=16（不对称，也是"文字不垂直居中"的残留）*/ --pub-nav-link-py: 16px; --pub-nav-link-px: 9.75px; --pub-nav-gap: 0px; /* ★ 间隙完全由 padding 决定（参照站无 gap）*/ --pub-footer-h: 153.938px; /* ★ 桌面底栏 */ --pub-content-pt: 40px; /* 内容与顶栏的呼吸留白 */ --pub-container-w: 1280px; /* ★ 决策：1280 上限（参照站实测 maxWidth=none）*/ --pub-container-px: 24px; /* 容器左右内边距 */ /* ---- CTA 胶囊 ★ 2026-09-25（§7.7 抓参照站真值，全部按实测改）---- 参照站实测：159.3 x 41px ｜ padding 11.5/22/12.5/24 ｜ radius 20px 字号 14px ｜ 字重 500 ｜ 字距 1.75px ｜ uppercase 背景实心蓝 ｜ 文字白 ｜ 与左邻间距 9.8px */ --pub-cta-h: 41px; /* ★ 原 40 */ --pub-cta-radius: 20px; /* ★ 原 999px（不是全圆 pill）*/ --pub-cta-fs: 14px; --pub-cta-fw: 500; /* ★ 原 600 */ --pub-cta-ls: 1.75px; /* ★ 原 0.28px（关键差异）*/ --pub-cta-tt: uppercase; /* ★ 参照站是大写（中文无影响）*/ /* ★ 用与参照站一致的**非对称上下内边距**（11.5 / 12.5）→ 自然得到 41px 高 */ --pub-cta-pt: 11.5px; --pub-cta-pb: 12.5px; --pub-cta-px: 24px; /* 左 24 / 右 22（参照站非对称）*/ --pub-cta-pr: 22px; --pub-cta-ml: 9.8px; /* ★ 与左邻间距（参照站实测）*/ --pub-cta-prev-pr: 0px; /* CTA 前一项的右内边距（参照站无）*/ --pub-cta-bg: var(--pub-accent); /* 实心蓝 */ --pub-cta-fg: #FFFFFF; /* 白字 */ /* ---- 尺寸：手机档 ---- */ --pub-topbar-h-sm: 50.8px; --pub-nav-h-sm: 50px; --pub-footer-h-sm: 204.212px; } /* ============================================================================ 2. 基础排版 ============================================================================ */ body.pub-body { margin: 0; font-family: var(--pub-font); font-size: var(--pub-body-fs); line-height: var(--pub-body-lh); color: var(--pub-text); background: var(--pub-bg); } .pub-container { max-width: var(--pub-container-w); margin: 0 auto; padding-left: var(--pub-container-px); padding-right: var(--pub-container-px); } .pub-content { padding-top: var(--pub-content-pt); } /* 链接：参照站是品牌蓝、无下划线（hover 才加）*/ .pub-body a { color: var(--pub-accent); text-decoration: none; } .pub-body a:hover { text-decoration: underline; } /* 公共小工具类（公开层独立定义，避免依赖用户区 app.css）*/ .pub-muted { color: #6b7280; } .pub-small { font-size: .875rem; } /* ============================================================================ 3. 顶栏（★ 覆盖 app.css 的 .topbar 配色，不复制骨架） ============================================================================ 为什么用「覆盖式」而不是重写： `.topbar` 的 flex / `flex-wrap` / `nav` 换行规则在 app.css 里（V-0.9 事故后补的）， 公开层若再抄一份 ⇒ 日后修一边忘一边（本仓 nav_layout_test.py 就是为防这个） ⇒ 公开层只加 `.topbar--public` 改配色与尺寸，**骨架规则零复制** ★★ 2026-09-25 修 4 个顶栏 bug（用户并排截图对比）： BUG-① logo 偏小 + 太靠左 ⇒ --pub-logo-h 38→44 + 加 --pub-topbar-px 内边距 BUG-② 字体太大/没加粗 ⇒ nav fs 18→16 + fw 500 + ls .01em BUG-③ CTA 变形 + 太靠右 ⇒ 见下方「★ CTA 独立块」的高特异性覆盖 BUG-④ 文字不垂直居中 ⇒ 去掉 padding-top，改对称内边距 + flex 居中 ⚠️★ 架构说明：app.css 的 `.topbar a`（用户区规则）会**污染**公开层 ⇒ 本节的公开层选择器一律用 `.topbar--public` 前缀**提高特异性**压制 ⇒ 治本方向（未做）：公开层顶栏用独立 class 或 app.css 规则限定作用域 ============================================================================ */ .topbar--public { background: var(--pub-bg); color: var(--pub-text); /* ★ BUG-①：左右内边距（原为 0 ⇒ logo 紧贴屏幕边缘） */ padding: 0 var(--pub-topbar-px); box-shadow: none; /* 参照站是 1px 细线，不是阴影 */ border-bottom: var(--pub-topbar-border) solid var(--pub-line); min-height: var(--pub-topbar-h); } .topbar--public .pub-nav { display: flex; flex-wrap: wrap; /* ★ 与 app.css .topbar 一致，防溢出（V-0.9）*/ align-items: center; /* ★ BUG-④：垂直居中靠它，不靠 padding-top */ justify-content: flex-end; gap: 0 var(--pub-nav-gap); min-width: 0; height: var(--pub-nav-h); } /* 公开层导航链接：★ §7.7 按参照站实测改 —— 13px / 500 / 1.5px 字距 / uppercase padding 16px 9.75px（上下 16 / 左右 9.75）｜ 高 60px */ .topbar--public .pub-nav a, .topbar--public .pub-nav .pub-nav-label { display: inline-flex; align-items: center; /* ★ 文字在项内垂直居中 */ height: var(--pub-nav-link-h); padding: var(--pub-nav-link-py) var(--pub-nav-link-px); margin: 0; /* ★ 清掉 app.css 的 margin-right:12px */ font-size: var(--pub-nav-fs); line-height: var(--pub-nav-lh); font-weight: var(--pub-nav-fw); letter-spacing: var(--pub-nav-ls); text-transform: var(--pub-nav-tt);/* ★ 参照站是大写（中文无影响）*/ color: var(--pub-text); white-space: nowrap; } .topbar--public .pub-nav a:hover { color: var(--pub-accent); text-decoration: none; } .topbar--public .pub-nav .pub-nav-label { cursor: default; } .topbar--public .pub-nav .pub-nav-label::after { content: " \25BE"; font-size: .7em; opacity: .8; margin-left: 2px; } /* 当前页高亮 */ .topbar--public .pub-nav a.cur { color: var(--pub-accent); font-weight: var(--pub-nav-fw-cur); } /* logo：★ BUG-① 高度 44px + 宽度由原图比例决定 ⚠️ 锁版原图比例 5.374 ⇒ 44px 高时宽 ≈ 236px（保比例，不拉伸） ⇒ 见 plan §5.14.13「顶栏尺寸的实测约束」*/ .topbar--public .pub-logo { display: block; height: var(--pub-logo-h); width: auto; flex: 0 0 auto; } .topbar--public .pub-brand { display: flex; align-items: center; } /* ★ §7.7 按参照站实测：CTA 与左邻的间距 = 9.8px 参照站的 nav 项**无 margin-right**（间隙全由 padding 提供）， 而 app.css 给 `.nav-drop` 加了 margin-right:12px ⇒ 必须清掉， 否则间隙 = 12 + 9.8 = 21.8px（比参照站宽一倍） ⚠️ `:has()` 支持：Chrome 105+ / Safari 15.4+ / Firefox 121+； 不支持时退化为 12+9.8px（仅视觉略宽，不影响功能）*/ .topbar--public .pub-nav > :has(+ a.pub-cta) { margin-right: 0; /* ★ 清掉 app.css 的 .nav-drop margin */ padding-right: var(--pub-cta-prev-pr); } /* ↓ CTA 左侧间距（= 参照站的 9.8px）*/ .topbar--public .pub-nav a.pub-cta { margin-left: var(--pub-cta-ml); } /* --------------------------------------------------------------------------- ★★ CTA 胶囊（BUG-③ 的核心修复） --------------------------------------------------------------------------- 问题根因（三条 CSS 互踩，用户截图表现为「完全变形」）： app.css:36 .topbar a { margin-right:12px } ← 命中 public.css(旧):123 .topbar--public .pub-nav a { padding:12px 15px 0 0 } ← ★ 也命中！ public.css(旧):156 .pub-cta { height:48px; border-radius:24px } ⇒ CTA 同时拿到「导航链接的 padding-top」+「自己的胶囊形状」⇒ 形状被压瘪 修法（★ 用户裁定 3a：只改 public.css，不动 HTML）： 用 `.topbar--public .pub-nav a.pub-cta` 这个**三元素选择器**（特异性 0,3,0） ⇒ 稳赢 `.topbar--public .pub-nav a`（0,2,0）与 app.css 的 `.topbar a`（0,1,1） ⇒ 不必用 !important --------------------------------------------------------------------------- */ .topbar--public .pub-nav a.pub-cta, .pub-body a.pub-cta { /* ★ §7.7 参照站实测：胶囊 159.3 x 41px ⚠️ 不能靠上下 padding 撑高：`line-height:1` 时行框=14px ⇒ 只有 38px ⇒ 用 **显式 height**（41px）+ flex 居中，最可控 */ display: inline-flex; align-items: center; justify-content: center; height: var(--pub-cta-h); padding: var(--pub-cta-pt) var(--pub-cta-pr) var(--pub-cta-pb) var(--pub-cta-px); margin: 0 0 0 var(--pub-cta-ml); /* ★ 覆盖 app.css 的 margin-right:12px */ border: 0; /* 实心按钮无需描边 */ border-radius: var(--pub-cta-radius); font-size: var(--pub-cta-fs); font-weight: var(--pub-cta-fw); line-height: 1; letter-spacing: var(--pub-cta-ls); text-transform: var(--pub-cta-tt); /* ★ 参照站是大写（中文无影响）*/ background: var(--pub-cta-bg); color: var(--pub-cta-fg); white-space: nowrap; flex: 0 0 auto; text-decoration: none; } /* ★ BUG-A 的核心：**必须覆盖全部伪类**，否则链接被访问过后 :visited 生效， `.pub-body a` 的蓝色重新盖上来 ⇒ 蓝底蓝字 ⇒ 用户看到"按钮里什么都看不见" */ .pub-body a.pub-cta:link, .pub-body a.pub-cta:visited, .pub-body a.pub-cta:hover, .pub-body a.pub-cta:active, .pub-body a.pub-cta:focus { color: var(--pub-cta-fg); text-decoration: none; } .topbar--public .pub-nav a.pub-cta:hover { background: #0062D6; /* 悬停加深（参照站观感） */ color: var(--pub-cta-fg); } /* ============================================================================ 4. 底栏（★ 公开层独有 —— 参照站版式：1px 线 + 左版权 / 右两链接） ============================================================================ 实测：桌面底栏 153.938px 高，字号 12px / 行高 17.1429px ⚠️ 文案来源 = 批次 0-C 用户裁定（见 docs/todo_stage_site_us.md §0-C） 英文：© Valmentum {year}. All rights reserved. 中文：© Valmentum {year}（用户未给中文主体 ⇒ 不带"保留所有权利"） ============================================================================ */ .pub-footer { border-top: 1px solid var(--pub-line); margin-top: 48px; padding-top: 24px; padding-bottom: 24px; } .pub-footer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font-size: var(--pub-footer-fs); line-height: var(--pub-footer-lh); color: var(--pub-footer-color); } .pub-copy { color: var(--pub-footer-color); } .pub-footer-links { display: flex; flex-wrap: wrap; gap: 16px; } /* ★ 2026-09-25 用户裁定：两链接在**左**、版权在**右**（已对调） ⇒ 版权是 DOM 里的最后一个 ⇒ 用 margin-left:auto 推到最右 */ .pub-copy { margin-left: auto; } .pub-footer-links a { color: var(--pub-footer-color); } /* 免责声明预留位：★ 默认 `hidden`（不渲染）。用户裁定"要"时只填文案，不动版式 */ .pub-disclaimer { margin: 12px 0 0; font-size: var(--pub-footer-fs); line-height: var(--pub-footer-lh); color: #8a8f98; } /* ============================================================================ 5. Subscribe 框（公开层核心转化组件） ============================================================================ 参照站段序：① 标题 → ② 介绍段 → ③ 免责声明 → ④ ★ Subscribe 框 → ⑤ 免费内容 ★★ 2026-09-25 修 BUG-B / BUG-C（用户截图对比参照站「Non-members / JOIN TODAY」框）： BUG-B 框未灰化 ⇒ background 白→浅灰 #F5F5F7，去掉边框 （参照站靠**底色**区分，不靠边框） BUG-C 版式不同 ⇒ 内容**全部居中** + 按钮居中 + 加 🔒 图标 （参照站是 `Non-members` 居中 + 说明居中 + 按钮居中） ============================================================================ */ .pub-subscribe { background: var(--pub-subscribe-bg); /* ★ BUG-B：灰化 */ border: var(--pub-subscribe-br) solid transparent; border-radius: 6px; padding: 28px 24px; margin: 24px 0; text-align: center; /* ★ BUG-C：全部居中 */ } .pub-subscribe h2 { margin: 0 0 10px; font-size: 1.0625rem; /* 参照站标题不大（约 17px）*/ font-weight: 600; text-align: center; } .pub-subscribe p { margin: 0 auto 20px; max-width: 720px; /* 参照站说明约 2 行宽 */ color: #3d434d; text-align: center; line-height: 1.5; } /* 实心 CTA（框内按钮）—— ★ 与顶栏 CTA 同一套变量，避免两处漂移 */ .pub-body a.pub-cta--solid, .topbar--public .pub-nav a.pub-cta--solid { background: var(--pub-cta-bg); color: var(--pub-cta-fg); border: 0; } .pub-body a.pub-cta--solid:hover, .topbar--public .pub-nav a.pub-cta--solid:hover { background: #0062D6; } /* 🔒 图标（★ BUG-C：参照站按钮里有锁） ⚠️ 必须用**纯字符**，不能带 `lock-badge` class ⇒ 否则撞公开层红线「0 个 class="lock-badge"」（preflight 断言）*/ .pub-cta-lock { font-size: .85em; margin-right: 7px; line-height: 1; } /* ============================================================================ 6. 内容版块 ============================================================================ */ .pub-hero { text-align: center; padding: 48px 0 32px; } .pub-hero h1 { margin: 0 0 16px; font-size: 2rem; line-height: 1.25; } .pub-hero p { max-width: 760px; margin: 0 auto 24px; color: #4b5563; } .pub-page-title { margin: 32px 0 12px; font-size: 1.75rem; } .pub-lead { color: #4b5563; } .pub-card { border: 1px solid var(--pub-line); border-radius: 8px; padding: 20px; margin: 12px 0; background: var(--pub-card-bg); } .pub-card h3 { margin: 0 0 8px; font-size: 1.05rem; } .pub-note { border-left: 3px solid var(--pub-line); padding: 4px 0 4px 12px; margin: 16px 0; color: #6b7280; font-size: .875rem; } /* 免费层「订阅后可见」提示条 */ .pub-paywall-hint { border: 1px dashed var(--pub-line); border-radius: 8px; padding: 16px; margin: 16px 0; text-align: center; color: #6b7280; } /* 公开层只读表（★ 红色线 1 允许：说明性小表，**不是**选股结果表） ⚠️ 用 .pub-table 而不是 .data ⇒ 与用户区付费表样式物理隔离 */ .pub-table { width: 100%; border-collapse: collapse; font-size: .9375rem; } .pub-table th, .pub-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--pub-line); } .pub-table th { font-weight: 600; color: #4b5563; } /* ============================================================================ 7. 手机档（★ 用户裁定"窄框的也要学"，见 plan §5.14.5） ============================================================================ 参照站手机版面：① 浅灰底 + 白色圆角卡片外壳 ② logo 左 + MENU 右 ③ 菜单逐行堆叠、无分隔线 ④ SUBSCRIBE 全宽实心蓝胶囊 ⑤ 首页全居中 ⚠️ 断点 700px（对齐 app.css 既有断点习惯） ⚠️ 纯 CSS 折叠，零 JS（照本仓 :focus-within /
范式） ============================================================================ */ @media (max-width: 700px) { :root { --pub-content-pt: var(--pub-topbar-h-sm); --pub-container-px: 16px; } body.pub-body { background: var(--pub-page-bg); } /* ① 卡片外壳：内容白底圆角卡片浮在浅灰底上 */ .pub-shell { background: var(--pub-card-bg); border-radius: 12px; margin: 12px 0 24px; padding: 16px; } .topbar--public { min-height: var(--pub-topbar-h-sm); } .topbar--public .pub-nav { height: var(--pub-nav-h-sm); } /* ② 顶栏折叠：logo 左 + MENU 右 */ .pub-menu-toggle { display: inline-flex; } /* ★ 用 `.topbar--public .pub-nav`（0,2,0）胜过上面 `.topbar--public .pub-nav` 的桌面 height:60px（同特异性但本块在后）⇒ 无需 !important */ .topbar--public .pub-nav { display: none; width: 100%; height: auto; flex-direction: column; align-items: stretch; } .topbar--public .pub-nav--open { display: flex; } /* ③ 菜单展开态：逐行堆叠、无分隔线 */ .topbar--public .pub-nav a, .topbar--public .pub-nav .pub-nav-label { height: auto; padding: 12px 0; font-size: var(--pub-nav-fs); } .topbar--public .pub-nav .pub-nav-label::after { content: ""; } /* ④ SUBSCRIBE 全宽实心蓝胶囊（★ 用 a.pub-cta 提高特异性，胜过上面那条）*/ .pub-body a.pub-cta, .topbar--public .pub-nav a.pub-cta { width: 100%; margin-left: 0; justify-content: center; } /* ⑤ 首页全居中 */ .pub-hero { padding: 24px 0 16px; } .pub-hero h1 { font-size: 1.5rem; } .pub-footer { margin-top: 24px; } .pub-footer-bar { flex-direction: column; align-items: flex-start; } /* ★ 手机档：两链接在上、版权在下（都是左对齐，取消 margin-left:auto）*/ .pub-copy { margin-left: 0; } } /* 桌面上 MENU 按钮不出现 */ .pub-menu-toggle { display: none; align-items: center; gap: 6px; background: none; border: 0; font-size: var(--pub-nav-fs); color: var(--pub-text); cursor: pointer; padding: 8px 0; }