/* ========================================================= 6mhr.com 并行站（官网2.0 平行版）· 样式 品牌口径：八脉裸写不带®｜灵机书院®带®｜八脉组织自动化运营系统© 设计基准：版心 1200px 全站唯一｜浅底分层（白／--bg 双档段带）＋脉青强调＋责权利金 （S-20260922-71r2：原文写"深藏青打底"，与浅色化后事实不符，已更正 —— 营销包建议项③） ========================================================= */ :root{ --navy:#061F32; /* 主色 藏青 */ --navy-2:#0A2C49; --navy-3:#0E3A5E; --teal:#1E9E8F; /* 脉青 强调色 */ --teal-soft:#E4F3F0; --gold:#E8B33B; /* 责权利金 仅用于按钮/数字/识别件 */ --gold-soft:#FBF1DC; --ink:#1A2433; /* 正文 */ --muted:#5A6675; /* 辅助文字 */ /* 🔴 S-20260922-71r2（营销甲方验收 必改①）：#F7F9FB → #EEF2F7。 根因：原值与白只差 8/255（1.06:1，通道差 8/6/4），段带几乎不可分 —— 营销实测 和君咨询同位置色带 #E0E4ED 通道差 31/27/18（1.27:1），本站弱 3.9 倍。 新值 vs 白 = 通道差 17/13/8（1.13:1）＝对齐和君式色带的 55%，"能看见但不脏"。 ⚠️ 连带影响（营销包已预算，本包复算复核）：四个文字令牌在新 --bg 上的对比度为 --navy 14.95:1 ／ --muted 5.20:1 ／ --gold-ink 4.87:1 ／ --teal-ink 4.75:1 —— 四项全 ≥4.5:1，无回归。 🔴 S-20260922-75（学术复核 §⑦ 回归 A）：上一版本处写 14.8／5.15／4.71，**三个数不可复核** —— 逐值复算其底为 **#EDF1F6**（--navy 14.81／--muted 5.15／--teal-ink 4.71），而非本节实际的 --bg **#EEF2F7**；仅 --gold-ink 4.87 的底是对的。即该组数系两次不同底色的复算拼接。 #EDF1F6 在本仓（*.css/*.md/*.html）命中 0，疑为中间草稿值。已按实际 --bg 复算更正为上式四值 （对照：#EDF1F6 列 14.81／5.15／4.83／4.71）。4 值原本就全 ≥4.5，结论未变，修的是"数字可复核性"。 判据：本文件 grep 14.81｜5.15｜4.71 应仅在本注出现（作错值对照），且不得再以"on --bg"名义出现。 另：.hero 与 .lead 的渐变终点同用 var(--bg)，首屏底部/留资段顶部随之获得一层可见的淡灰收边。 */ --bg:#EEF2F7; --card:#FFFFFF; --line:#E3E8EE; --gold-ink:#8A6212; /* 深金：浅色底上的小字专用，保证对比度 ≥4.5:1 */ --teal-ink:#14786C; /* 深脉青：≤13px 小标签专用，白底对比 ≈4.8:1 */ --gutter:1200px; /* 全站版心，唯一 */ --radius:8px; /* 全站唯一圆角（按钮/输入/标签/浮动件），禁止 >10px 胶囊 */ --radius-lg:12px; /* 容器级卡片专用，仅此一档 */ --shadow:0 6px 24px rgba(6,31,50,.08); --shadow-lg:0 12px 40px rgba(6,31,50,.14); /* ---- 字号梯度令牌（工程固化）---- L7：H1 48–64／H2 32–40／H3 20–24／正文 16–17／辅助 13–14，相邻级差 ≥4px L8：标题行高 1.15–1.35；正文行高 1.60–1.75 注（学术 P2-3）：本站"语义级"与"视觉级"解耦 —— 卡片级标题一律用

保语义（无 h2→h4 跳级）， 但其视觉字号按原稿落在 17–18px（.vcard/.relation .rb/.acard/.bm/.case/.news/.fcard/.footer）， 低于本表 H3 的 20–24px。这是刻意的工程取舍，不是令牌违规：改这些字号会连带改视觉层级， 后续维护者请勿"对齐令牌"反向升格字号或降标签。h4 令牌保留备用（当前 h4 计数 0）。 */ --fs-h1:56px; --fs-h2:34px; --fs-h3:22px; --fs-h4:18px; --fs-body:16px; --fs-aux:13px; /* 辅助字号下限，禁止 12px */ --lh-title:1.28; --lh-body:1.68; /* ---- 留白与节奏令牌（S-19 · R5①：同一套尺度，禁逐段手调数值）---- 改前实测各段为 6 套不同数值（栅格 gap 16/18/20/22、卡片内距 16/20/22/24/26/28）， 无"尺度"可言；以下令牌把留白收成明确 3 级（大卡 / 常规 / 密排）＋ 2 级栅格间距。 S-19 返工 G2：再收一档（88→60 等）以把 #cases 压进 ≤7.1 屏；只动既有令牌取值， 未新增令牌、未删内容件、未动区块排序。 */ --sec-pad-y:60px; /* 区块上下留白（改前 96；S-19 首轮 88；G2 再收一档） */ --sec-head-mb:28px; /* 段头与栅格间距（改前 48；S-19 首轮 40） */ --gap-card:16px; /* 多列卡片栅格间距（3–4 列） */ --gap-card-dense:14px; /* 密排栅格（交付实景墙 / 八部位卡） */ --card-pad-lg:24px; /* 卡片内边距·大卡（留资卡，页面级唯一） */ --card-pad:18px; /* 卡片内边距·常规 */ --card-pad-sm:14px; /* 卡片内边距·密排（八部位卡 / 人像卡） */ } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ /* 中文字体栈：优先系统内建高质量黑体（PingFang / HarmonyOS Sans / 思源 / Noto）， 再回落到雅黑；西文与数字走 Roboto/Arial。全站仅此一套，不加载外部字体，零额外请求。 */ font-family:"PingFang SC","HarmonyOS Sans SC","Source Han Sans SC","Noto Sans SC","Microsoft YaHei UI","Microsoft YaHei","Hiragino Sans GB",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; color:var(--ink);background:var(--bg); font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* 可见焦点态：键盘用户必须能看见焦点在哪（原实现曾整体抹掉 outline）。 🔴 S-71 修正：原焦点环用 --gold（#E8B33B）。全站改浅底后，金环在白底实测仅 1.92:1， 低于 WCAG 2.4.11／1.4.11 对「焦点指示器」的 3:1 非文本对比要求 ⇒ 改 --navy（白底 16.80:1）。 ⚠️ S-20260922-71r2（学术包必改⑤）：原注释写的是一个与本轮/上轮任何一档口径都不吻合的陈旧比值 （--navy 白底 = 16.80 ／ on --bg = 15.92，两者皆非），系更早轮次遗留值（本文件三处注释同源）。 已按本包复算值更正为 **16.80:1**；判据：对本文件 grep 该陈旧数字，命中 = 0。 金环在深底上曾是正确选择，本次是**背景变浅带来的连带修正**，不是配色偏好。 */ a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--navy);outline-offset:2px} /* 表单控件焦点环：🔴 S-20260922-71r2 连带修正（--bg 改 #EEF2F7 引入的回归） 原用 --teal（#1E9E8F）。复算：on 白 3.31:1 ✓ ／ **on 新 --bg #EEF2F7 = 2.95:1 ✗**（低于非文本 3:1）。 --bg 变深 8/255 后，原值由"on --bg 3.14（旧 --bg）"跌到 2.95 ⇒ 改为 **--teal-ink** （on --bg 4.75:1 ／ on 白 5.34:1，两侧均达标；且零新色 —— --teal-ink 本就是"浅色底专用"令牌）。 本页无 input/textarea/select 实例（结构性不适用），本条修的是**规则层隐患**，非页面上已发生的失配。 */ input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--teal-ink);outline-offset:2px;border-color:var(--teal-ink)} /* 跳到主要内容（WCAG 2.4.1 Bypass Blocks · Level A）：默认移出视口，键盘聚焦时即时落到左上角显形 （不加 transition：skip link 的显形必须与 Tab 同帧，且"减少动态效果"下无需额外降级） */ .skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--gold);color:#3A2400; font-weight:700;font-size:14px;padding:10px 16px;border-radius:var(--radius)} .skip-link:focus{top:12px} /*
主内容地标：与 section[id] 同一套锚点防吸顶栏遮挡口径 */ main{display:block;scroll-margin-top:96px} .container{max-width:var(--gutter);margin:0 auto;padding:0 24px;width:100%} /* ---------- 字号梯度（H1 56 / H2 34 / H3 22 / 正文 16 / 辅助 13） ---------- */ h1{font-size:var(--fs-h1);line-height:1.20;font-weight:600;letter-spacing:-.02em;text-wrap:balance} h2{font-size:var(--fs-h2);line-height:var(--lh-title);font-weight:600;letter-spacing:-.015em;text-wrap:balance} /* 🔴 S-20260922-75（营销 §四.4 **L3** · 章节层次装置 · 本轮落地）： 背景：浅色化后 13 个 h2 **同字号(34px) 同色(--ink)**，段与段之间只剩 1px --line(#E3E8EE，vs 白 1.232:1) 一条分隔手段 ⇒ 营销判"本站段落看不出在换段"（与和君式老站对比：视觉重量与层次装置偏弱）。 处置：给每个 h2 加一枚**金竖条**前缀（营销原文给的取值，逐字落地，未自改数值）—— 4px × .9em（在 34px 下 = 30.6px 高）、右侧 .5em(17px) 间距、圆角 2px、垂直微调 -.06em。 为什么用 --gold-ink：与 `.eyebrow`／`.rk`／`.trust .num` 同一条既有规则——"浅底上的金色取深金" （--gold 在白底仅 1.92:1 不达，--gold-ink 5.47:1；本条是**装饰性图形件**，不承担文字对比义务， 但仍取可达标的那一档，不做"反正装饰"的例外）。零新色、零新 DOM、零脚本。 ⚠️ 深底段例外（见下方 `#contact h2::before`）：`.lead` 是 navy 深底，--gold-ink 在 navy 上只有 3.07:1（临界），故该段竖条改 **--gold**（navy 上 8.76:1）—— 与 `.eyebrow` 同一条"同语义随底换明度"。 ⚠️ 回归护栏：本装置不得改变 h2 的**换行数**与**首行基线**。已逐段实测（1532 / 718 两档， `offsetHeight ÷ line-height` 改前 ≡ 改后）。 🔴 **对营销原文的一处"取证驱动偏离"（1 个属性）**：营销给的写法（`::before` 只有 `margin-right:.5em`、无负左外边距）在 **718 档**把 `#assess` 的 h2 `「八个部位、八套测评：先测出堵在哪，再谈怎么治」` 由 **1 行挤成 2 行** —— 该 h2 在 27px/590px 内容宽下实测文本宽 585.1px，只剩 **4.9px** 余量， 而"竖条 4px ＋ .5em(13.5px) ＝ 17.5px"的前缀直接把它顶过线（1532 档 13 个 h2 无一变化，只有 718 档这一处）。 修法：给 `::before` 补 **`margin-left:calc(-1*(4px + .5em))`** —— 竖条改画在标题左侧**天头**（容器 padding 内），竖条几何与 .5em 间距**一字未改**，而行内推进量回到 0 ⇒ **文字零位移、换行逐段不变**。 为什么天头放得下：最紧一档是 ≥1400/≤576 的 `padding-inline:24px` ⇒ 最大占位 4px＋.5em(34px 字下 17px)＝21px < 24px， 577–992 档 padding 64px、993–1299 档 clamp(48,5.5vw,64) 更宽裕。 判据：1532 与 718 两档 13 个 h2 的 lines 数组与改前**逐项相等**（见 _tools/_s75/probe_{old,new}.json）。 */ h2::before{content:"";display:inline-block;width:4px;height:.9em;background:var(--gold-ink);margin-right:.5em;margin-left:calc(-1*(4px + .5em));vertical-align:-.06em;border-radius:2px} /* `.lead`（#contact）是 navy 深底 ⇒ 本段竖条取 --gold（8.76:1；--gold-ink 在 navy 上仅 3.07:1） */ #contact h2::before{background:var(--gold)} h3{font-size:var(--fs-h3);line-height:1.34;font-weight:600} h4{font-size:var(--fs-h4);font-weight:600} p{font-size:var(--fs-body);line-height:var(--lh-body);text-wrap:pretty} .small{font-size:var(--fs-aux);line-height:1.62;color:var(--muted)} /* 段 eyebrow：13px 小字在浅底上必须用深脉青（--teal-ink：on --bg 4.75:1 ／ on 白 5.34:1）； 原用 --teal（#1E9E8F）在浅底上实测 on 白仅 3.31:1、on --bg 仅 2.95:1，不达 R5② 的 4.5:1。 🔴 S-20260922-71r2（学术必改⑤）复算更正：原注释写"--teal-ink 4.8:1""--teal on --bg 3.14:1"， 均为**改 --bg 之前**的值（旧 --bg #F7F9FB）。--bg 改 #EEF2F7 后本行两值已复算更新。 */ .eyebrow{font-size:var(--fs-aux);font-weight:600;letter-spacing:.16em;color:var(--teal-ink)} /* 🔴 S-20260922-71r2（学术必改 P2-4 ②）：把原先写在 index.html:392 / :734 的两处 inline `style="color:var(--gold-ink)"` 收进 CSS。改前 `.eyebrow` 基色 --teal-ink，但 #method(03) 与 #contact(07) 两段靠 inline 覆盖成金 ⇒ "同类名两色 + 颜色藏在 HTML 里"（改版时最易漏改的一种）。 改后差异由**显式选择器依据**承担：`#method`（八脉方法论）与 `#contact`（留资收口）是"主张段"， 与首屏 eyebrow 同走金；其余 13 段走脉青（功能段）。 判据：`grep -c 'style="color:' index.html` = 0，且两处 eyebrow 的 computed color 仍为 --gold-ink。 */ #method .eyebrow,#contact .eyebrow{color:var(--gold-ink)} /* 段序号（R4 分区可见化的"序号体系"）：与顶栏站内项序号一一对应， 装饰性编号（标记侧 aria-hidden），不参与语义与标题树；编号沿用段内既有色（color:inherit）， 不新增金色——金色 eyebrow 段的编号随金色，脉青 eyebrow 段的编号随深脉青。 */ .sec-no{color:inherit;font-variant-numeric:tabular-nums;margin-right:.5em} /* ---------- 按钮（圆角 6-10px，金色仅主按钮） ---------- */ .btn{ display:inline-flex;align-items:center;gap:8px; padding:14px 26px;border-radius:var(--radius); font-size:16px;font-weight:600;cursor:pointer;border:1px solid transparent; transition:.18s ease; } .btn-primary{background:var(--gold);color:#3A2400;border-color:var(--gold)} .btn-primary:hover{background:#F0C059;transform:translateY(-1px)} /* 🔴 S-20260922-71r2（学术必改 P2-3 ／ 政委 P2-2）：本轮**删除** `.btn-ghost` 与 `.btn-ghost:hover` 两条死规则。 依据：`index.html` 对该类名引用 = 0（`grep -c 'btn-ghost' index.html` → 0）； 其原声明为「文字色白（#fff）」＋ 白描边，在浅底上是 1.00:1（本文件**唯一**的白色"文字色"），属浅底化后的隐形雷。 判据：本文件中「文字色白（#fff）」的**声明式写法**命中 = 0（注释里的历史记述不算声明）。删除前原文见 css/portal.css.bak-20260922-S71r2:126-127。 */ /* 次按钮：浅底上文字色用 --teal-ink（--teal 在白底 3.31:1 不达 4.5:1；首屏由下方 .hero .btn-line 显式覆盖为 --gold-ink） */ .btn-line{color:var(--teal-ink);font-weight:600} .btn-line:hover{text-decoration:underline} /* 🔴 S-20260922-71r2（学术必改 P2-4 ①）：把原先写死在 index.html:161 的 inline 色收进 CSS。 改前：`.btn-line` 基色 --teal-ink，但首屏那一个带 `style="color:var(--gold-ink)"`（inline 胜出）⇒ 同页两个 .btn-line 渲成两色（首屏金 5.19:1 ／ 案例段脉青 5.06:1），属"同类名两色"的一致性缺陷。 改后：差异由**显式选择器依据**承担（首屏金 = 品牌第一露面，与 .hero-title .eyebrow 同口径）， 且 `grep -c 'style="color:' index.html` = 0。 */ .hero .btn-line{color:var(--gold-ink)} /* ===================== 顶栏 ===================== */ /* 🔴 S-20260922-71 改动A-1（相公 2026-09-22 22:21「能不用深色背景吗？全用浅色背景行吗？」） 改前：background:rgba(6,31,50,.96)（实测 lum=0.106）＋ 底边 1px rgba(255,255,255,.08)（白线，只在深底可见） 改后：白底 .94 半透 ＋ 底边 1px var(--line)（#E3E8EE） 为什么留 .94 半透而不用纯白：顶栏是 sticky，滚动时正文会从其下方穿过； 半透 + blur 让穿过的内容形成极淡的"毛玻璃压暗"，避免纯白条把正文生硬切断（原深底同理，只是方向相反）。 */ .header{ position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94); backdrop-filter:blur(8px);border-bottom:1px solid var(--line); } .header .container{display:flex;align-items:center;height:72px;gap:24px} /* 左上角品牌 = LOGO 图形（S20 R5：favicon.svg，24px，与文字留 8px 间距，图形上不带符号） + 北京六脉咨询（小字）+ 灵机书院®（大字）； align-items 由 baseline 改 center：行内含 24px 图形时按中线对齐，文字行高不受图形挤压； flex-shrink:0 + nowrap 防被导航挤压截断 */ /* S66（相公 2026-09-22 19:50「LOGO 再大一倍」）：主名 20→40px（严格 ×2）、图形 24→42px、® 11→16px； line-height:1 把行盒钉在字身。 🔴 S-20260922-67 修正（相公 2026-09-22 20:09「感觉没什么变化，连 LOGO 都没有变大一倍」）： S66 曾用「窄档隐藏『北京六脉咨询』」给放大的 logo 腾宽 —— **本件已全部撤回**。 撤回理由：① 相公原话只说「LOGO 再大一倍」，从未授权删公司名；② 撤回前 ≤1160 全带品牌主体名消失 （并排图 对照_S67_线上vs待上线_864.png 已证：右图只剩「灵机书院®」，"北京六脉咨询"整块不见）。 新处置见下方 @media (min-width:769px) and (max-width:1160px)：**顶栏改两行**， 品牌（含公司名）与 8 项导航各自完整 —— 不再"二选一"。 */ /* S69（相公 2026-09-22 21:07「LOGO 再大一些，更醒目一些」）：主名 40 → 52px（+30%）、图形 42 → 54px、 ® 16 → 20px、主名上标 18 → 24px、图形右间距 8 → 10px。 顶栏高度**不动**：`.header .container` 是 `height:72px` 固定值 + align-items:center， 54px 图形在 72px 盒内上下各留 9px，不会撑高、不动 sticky 锚点、不动首屏起点。 唯一代价＝宽度：logo 实测 384 → 451px（+67px），故单行档门槛由 1335 上调至 1400（见下方 ★ 条）。 */ .logo{flex-shrink:0;min-width:0;display:inline-flex;align-items:center;font-size:52px;font-weight:700;color:var(--ink);white-space:nowrap;line-height:1} .logo .lb-mark-wrap{position:relative;display:inline-flex;flex:0 0 auto;margin-right:10px} .logo .lb-mark{display:block;height:54px;width:auto} /* 🔴 S-71 改动B（相公 2026-09-22 22:21「调整®的位置要在图的右上角」） 改前：top:-3px;right:-11px；改后：top:2px;right:6px。 依据＝**图形墨迹实测**（不是容器盒实测，这一点是本单最容易做错的地方）： assets/logo-36043480.png 为 541×508 的透明底 PNG，墨迹 bbox = x[126,393] y[144,360]， 按渲染盒 58×54 换算 ⇒ **图形墨迹只占盒内 x[13.5,42.1] y[15.3,38.3]**， 即盒内右侧 16px、上下各约 15px 全是透明空白。 容器盒右边缘在视口 1920 下为 x=442，而图形**墨迹**右边缘只到 x≈426。 改前 ® 盒 x[442,452]/y[6,26] ⇒ 整体落在墨迹右侧 16px 的透明区里，读作"悬在图形右侧外面"（相公原话所指）。 改后 ® 盒 x[425,435]/y[11,31] ⇒ 左下角正落在图形右上角轮廓上（墨迹在 y=28–31 处最右到 x≈424–426）， 四个候选（right:2/4/6/-1）出图比对后取本值：只有本值读作"贴在图形的右上角"，其余仍留 3–6px 悬浮感。 颜色一并改：--gold → --gold-ink（20px 粗体属非大字，白底需 4.5:1；金 #E8B33B 仅 1.92:1，深金 5.46:1）。 ⚠ 本值与派工单"建议 right:-2px~0"不一致，属**取证驱动的偏离**，理由即上面墨迹 bbox（派工单的建议值以 "容器盒＝可见图形"为假设，该假设对本 PNG 不成立）。 */ /* 🔴 `.lb-reg` 的 `top` 终值（承"两步流程"第二步：先出候选、再圈定终值）：由营销口径圈定为 **6px**。 出处：营销裁决「`.lb-reg` 的 `top` 终值 ＝ 6px」——完整出图与证据见本地改版留痕（不上线）。 判据：净空 Δ = ® 墨迹下缘 B − 图形墨迹上缘 T ∈ [−2, +4]px；top:6px 实测 Δ = +1.50px （营销口径）／+1.75px（本包口径），**全档唯一两侧余量皆 ≥2.25px**。 ⇒ 只改 `top` 一个值：2px → 6px；`right:6px` 及其余属性**冻结不动**（营销口径"只给 top"）。 判据：computed `top` = "6px"、`right` = "6px"；® 与图形墨迹重叠像素 = 0；右净空 = +8.75px。 */ .logo .lb-reg{position:absolute;top:6px;right:6px;font-size:20px;font-weight:700;color:var(--gold-ink);line-height:1;pointer-events:none} /* 🔴 S-71：「北京六脉咨询」原 rgba(255,255,255,.86)（只在深底成立）→ --muted（白底 5.85:1）。 */ .logo .lb-org{font-size:22px;font-weight:600;color:var(--muted);letter-spacing:.5px} /* 分隔短横：装饰件，原 rgba(232,179,59,.6)（深底上的半透明金）。 🔴 S-71 修正（由 `_tools/_probe_s71_alltext.py` 独立全量扫描捞出，见落地报告坑 10）： 第一版改成了 var(--line)（#E3E8EE）—— 白底 **1.23:1**，且它是**真字符**（`-`，继承 52px 字号）， 会被"全量文本对比度"扫描判为不达标（大字阈值 3:1）。改为 **--gold-ink**（白底 5.46:1）： ① 过了 4.5:1；② 令牌既有、零新色；③ 还原原始设计意图（这条短横本来就是金色）。 注：`.logo` 已带 aria-label="北京六脉咨询-灵机书院® 首页"，短横不单独进无障碍朗读， 故无需 aria-hidden；这样它既不靠"装饰豁免"过关，也不多挂一个属性。 */ .logo .lb-dash{color:var(--gold-ink);font-weight:400;margin:0 2px} /* 🔴 S-71 品牌大字配色裁定：「灵机书院®」52px 取 **--navy(#061F32)**，不取 --gold-ink。 理由四条：① 白底对比度 navy ≈16.80:1 vs gold-ink 5.47:1 —— 52px 品牌第一识别位应取最强对比； ② --gold-ink 的令牌语义是「浅色底上的**小字**专用」（见 :root 注），拿它做 52px 大字属令牌越界； ③ 品牌金已由「顶栏 CTA 金底」「导航当前项金条」「页脚/信任条金数字」承担，此处再上金＝金色失去重心； ④ 与 H1/标题同走 navy，全站"深色主张 + 金属点缀"的层级更清楚。 ⚠ 本条是**营销口径级选择**，已列入落地报告 §分歧点 交营销包验收；另有备选 A：--gold-ink。 */ .logo .lb-name{color:var(--navy);letter-spacing:1.5px} /* 🔴 S-75 裁决①（P20 营销包 2026-09-23）：**一金一墨＝P20 2026-09-23 裁决，勿改**。 图形 ®（.lb-reg）走 --gold-ink（#8A6212，白底 5.474:1）；文字 ®（本行的 sup）走 --navy （继承 .lb-name，白底 16.803:1）—— 一金一墨是**刻意编码**，非疏漏。 理由（营销原文）：两 ® 分属**两个不同的注册商标客体**（图形商标 36043480／文字服务商标「灵机书院®」）， 异色＝"异客体"的可视化编码；顶栏金已由 .lb-reg ＋ .lb-dash 占 2 点，再加第三点即稀释。 ⇒ **本行保持无 color 声明**，禁止补写 color:var(--gold-ink)。 可核验：.lb-reg computed color = rgb(138,98,18) ≠ .lb-name sup computed color = rgb(6,31,50)； 且 .lb-name sup 的 computed color **恒等于** .lb-name 的（继承链未被截断）。 */ .logo .lb-name sup{font-size:24px;margin-left:3px;font-weight:700;vertical-align:super;line-height:0} /* 导航 7 项（实测 2026-09-22：站内 6 锚点 #products/#method/#assess/#cases/#culture/#faculty ＋ 1 末位外链「智能体绩效看板 ↗」；本注释旧写"8 项"与实测不符，已随 R6-N 探针核正）： 993–1200 档最紧，gap 走 clamp、字号在 ≤1200 降一档防溢出。 站内 6 项按 DOM 段序严格单调递增（R1），外链独占全链末位（R3）。 */ /* 🔴 S-20260922-67：**全站**锁「单行不可折 ＋ 溢出走横滚」。 原口径只覆盖 ≤1160（下方同名块），≥1161 漏网 —— 本轮实测：1161 档 7 项**全部折 2 行** （项盒高 43.66 ＝ 2×21.83）、1440 档同样折 2 行（50.38 ＝ 2×25.2）， 而 nav.scrollWidth==clientWidth（419=419 / 549=549）让旧判据恒过 ⇒ **静默型缺陷**（判据通过、实质落空）。 折行根因：`.nav a` 是 flex item 且 flex-shrink:1，空间不足时被压窄 → 文本折行，而不是溢出。 修法：全站 nowrap ＋ flex:0 0 auto ＋ nav 自身横滚兜底 —— 缺口一律由"可见的横向滚动"消化， **绝不再由"静默折行"消化**（P0 原则，与下方 P0 返工注释同源）。 */ .nav{display:flex;gap:clamp(12px,1.4vw,22px);margin-left:auto; overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none} .nav::-webkit-scrollbar{display:none} .nav a{position:relative;color:var(--muted);font-size:15px;font-weight:500; white-space:nowrap;flex:0 0 auto} /* 🔴 S-71：hover 原为 #fff（白字只在深底成立）。浅底后改 --navy —— 与基态 --muted 拉开明度差， 同时是全站唯一"深色强调"，不与品牌金抢权。 */ .nav a:hover{color:var(--navy)} /* 外链项（末位）与站内锚点的视觉＋语义双重区分（R3）：弱化色 ＋ 左侧 1px 竖分隔 ＋ 既有 ↗ 字形（语义由 target/rel/aria 承担）。竖分隔用 ::before 绝对定位 ⇒ 不占布局宽（0 成本）； 金色仅留给顶栏 CTA，外链不使用金色（避免与 CTA 抢权）。 */ /* 🔴 S-71：外链项原 rgba(255,255,255,.68)（浅底＝不可见）→ --muted；hover → --navy。 */ .nav a.nav-ext{color:var(--muted)} .nav a.nav-ext:hover{color:var(--navy)} @media (min-width:769px){ /* gap ≥12 档：分隔线落在外链项左 9px（仍在栏间空隙内）。 🔴 S-71：原 rgba(255,255,255,.3)（白线，浅底不可见）→ var(--line)。 */ .nav a.nav-ext::before{content:"";position:absolute;left:-9px;top:50%;width:1px;height:15px; margin-top:-7.5px;background:var(--line)} } @media (min-width:993px) and (max-width:1330px){ /* 该区间 gap 收到 10px，分隔线内收，避免压到前一项文字 */ .nav a.nav-ext::before{left:-6px} } /* 顶栏当前段高亮（R5③ 长页阅读引导）：不只用颜色——≥769 同时给 2px 金色下划线； 另由 js/app.js 置 aria-current（WCAG 1.4.1 不以颜色为唯一信息载体）。 */ /* 🔴 S-71：基态原 #fff（白字）→ --navy。 下划线色原 --gold（白底 1.92:1）→ --gold-ink：下划线是"当前段"的**视觉状态指示器**， WCAG 1.4.11 对状态指示器要求 3:1，深金 5.47:1 达标，同时保住品牌金语义（深金也是金）。 状态另由 js 置 aria-current 承担（不靠颜色单一载体）。 */ .nav a.is-current{color:var(--navy)} @media (min-width:769px){ .nav a.is-current::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--gold-ink)} } /* 注：我方无公开的客服热线，不虚构号码、不留占位文本；顶栏原电话槽位已整体移除。 */ .header-cta{background:var(--gold);color:#3A2400;padding:10px 18px;border-radius:var(--radius);font-weight:600;font-size:15px;white-space:nowrap} .header-cta:hover{background:#F0C059} /* ≤576 顶栏空间无余量：主按钮降为 4 字「免费体检」（桌面／平板仍用 8 字全称） */ .header-cta .cta-mini{display:none} /* ===================== 首屏 ===================== */ /* 首屏：section 自身的上下留白归零，只保留 .container 内边距，避免双层 padding 叠加把首屏撑高（L15：首屏 600–720px） 🔴 S-71 改动A-2：改前 linear-gradient(135deg,#061F32,#0A2C49,#0E3A5E)（三停深藏青，实测 lum=0） 改后 linear-gradient(160deg,#FFFFFF,#F7F9FB)：白 → 页底浅灰，方向由 135° 改 160° 使明暗过渡更平缓， 首屏仍是"整页最亮的一段"，靠亮度（而不是靠深色）与下方信任条拉开层次。 navy 未删：本节标题 --navy、主按钮金底、四星图白卡阴影仍承担品牌主色。 */ .hero{position:relative;background:linear-gradient(160deg,#FFFFFF 0%,var(--bg) 100%);color:var(--ink);overflow:hidden;padding:0} /* 🔴 S-20260922-71r2（营销甲方必改④·首屏视觉锤补救）：浅色化把"占满首屏 100% 的深青渐变大色块"换成 白→浅灰的弱渐变，首屏有色占比由 ~100% 掉到 7.6%（营销实测；和君对照 20.6%），"视觉锤"丢了。 这是本单**唯一的视觉净损失**（营销 §4.3 判定：消失的不是"锚点"，是"底色作为锚点"）。 补救不用退回深色（R2 硬指令）—— 在首屏左缘立一条 6px 竖向金色带：以极小面积换回一个"版心左界" 的强色锚点，且与全站金色语义（责权利识别色）一致，零新色（--gold / --gold-ink 皆既有令牌）。 为什么放左侧：全站所有 section 的左界对齐同一 x，金带等于给首屏"钉"了一根可见的栏标； 不会与右栏四星图抢注意力。z-index 无需设置：x=0..6 与 .container 内容（padding 0 24px）无重叠。 */ .hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--gold),var(--gold-ink))} /* 🔴 S-20260922-71r2（营销甲方必改④·资质 chip 降权）：营销原文写 `.hero .hero-tags{opacity:.75}`， ⚠️ **该类名全站不存在**（`grep -n 'hero-tags' index.html css/portal.css` → 0 命中；全站唯一资质 chip 容器类名是 `.cert-tags`，index.html:164 一处）。本包按营销**明文声明的意图**（"chip 仍全在页内（不删， 守相公硬要求），仅降权"）落到真实元素 `.cert-tags` 上，未改其内容与数量。 */ .hero .cert-tags{opacity:.75} .hero .container{ display:grid;grid-template-columns:1fr 1fr; grid-template-areas:"title title" "copy media" "reach reach"; column-gap:48px;row-gap:24px;align-items:center; padding-top:44px;padding-bottom:44px;min-height:560px; } .hero-title{grid-area:title} .hero-copy{grid-area:copy} .hero-media{grid-area:media} .hero-reach{grid-area:reach} /* 🔴 S-71：首屏 eyebrow 原 --gold（深底金色），浅底改用 --gold-ink（白底 5.47:1）。 为什么首屏 eyebrow 走金而不是跟其他段走 --teal-ink：首屏是"品牌第一次露面"， 金＝责权利识别色，与其他 13 段的脉青 eyebrow 形成"首屏品牌 / 正文功能"的区分。 */ .hero-title .eyebrow{color:var(--gold-ink)} /* H1 删除 max-width:13em（13em=728px 会主动把 H1 框窄，nowrap 下必然静默裁字）；字号按内容可用宽度分档 🔴 S-71：#fff → --navy（白底 16.80:1；S-20260922-71r2 学术必改⑤ 复算更正，原写陈旧比值，系更早轮次遗留）。 */ .hero h1{color:var(--navy);margin:14px 0 18px;max-width:none;font-size:52px;letter-spacing:-.02em} /* ≥1024 才锁单行；≤1023 交回正常折行（移动端 34/29px 全角标题远超 343px 内容宽，锁 nowrap 必崩） */ @media (min-width:1024px){.hero h1{white-space:nowrap}} @media (max-width:1023px){.hero h1{white-space:normal;overflow-wrap:anywhere}} /* 分档字号：993–1200 档的内容可用宽最窄（实测 1024 视口仅 873px），是"按 1152 满版心算字号必翻车"的档位。 甲方要求书给 993–1200 档 44px，实测该档最窄处余量仅 4.70px（真实单行宽 868.30 / 可用 873）—— 任何字体回落或字形差即会 nowrap 静默裁字，故按"取更保守一方（更大余量）"降一档到 42px（余量 44.2px）。见留痕 §参数分歧 */ @media (min-width:1201px) and (max-width:1299px){.hero h1{font-size:48px}} @media (min-width:993px) and (max-width:1200px){.hero h1{font-size:42px}} /* 🔴 S-71：价值主张行原 --gold（22px/600，属非大字，需 4.5:1；白底金仅 1.92:1）→ --gold-ink 5.47:1。 保留金色语义：这行是"客户得到什么"的**价值断言**，用金区别于 --navy 的 H1（主张）与 --muted 的正文（论证）。 */ .hero-value{margin-top:16px;font-size:22px;font-weight:600;color:var(--gold-ink);line-height:1.5} .hero .sub{font-size:19px;color:var(--muted);max-width:26em;line-height:1.55} .hero-actions{display:flex;align-items:center;gap:20px;margin-top:30px;flex-wrap:wrap} .hero-price{margin-top:14px;font-size:var(--fs-aux);color:var(--muted);line-height:1.6} /* 🔴 S-71：认证小标签原 rgba(255,255,255,.8) 字 + rgba(255,255,255,.22) 边（白字白边，浅底全不可见）。 改 --muted 字 + #fff 底 + --line 边：由"贴边白字"变"白底小药丸" —— 浅底上小字必须自带背景块才有边界感。 */ .cert-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .cert-tags span{font-size:var(--fs-aux);color:var(--muted);background:#fff;border:1px solid var(--line);padding:5px 11px;border-radius:var(--radius)} .hero-media{position:relative} .hero-media picture{display:block} /* text-align:center —— 首图列宽内居中，使下方按钮级"看原尺寸大图"提示与图对齐（不影响 img：img 走 margin-inline:auto） */ .hero-media .star-map-link{display:block;border-radius:var(--radius-lg);text-align:center} /* 首图 = 四星图（信息图）：必须 contain（cover 会切掉信息图边缘）；限宽 560px 居中（R20），列宽 412–552px 天然不超。 height:auto —— 让框高跟随真实比例（1360×864）。`width/height` 属性仍在，浏览器据此推导 aspect-ratio，CLS 保护不减； 而框高不再被属性钉死在 356px，窄档（1024 档列宽 412px）原先 94px 的上下白边（contain 留白）随之消失。 图上"内容"的显示尺寸不变（contain 缩放结果一致），首屏高度却回到 L15 的 600–720 区间中段。 */ /* 🔴 S-20260922-71r2（营销甲方必改⑤·首屏信息图可读性补偿）：显式声明 aspect-ratio:1360/864。 根因链（实测，见 _tools/_s71r2_starmap.txt）：源图 1360×864（AR 1.5741）。改前该元素盒被 `max-height` 钳制（≤768 档 320px），盒 AR 变成 560/320=1.75 ≠ 图 AR ⇒ `object-fit:contain` 必然左右留白 56.3px，实绘宽只有 503.7px ⇒ 实绘缩放 **37.04%**（图上标签 ≈8px，读不出）。 ⚠️ **本包实测更正**：单加 `aspect-ratio` 一项**不足以修好**（718 档仍 37.04%），因为 width:100% 与 max-height 都是确定值，AR 只决定未被钳制的那一轴。必须同时松开移动端的 `max-height` 钳制（见 ≤768 档）。 本单范围：**只做 aspect-ratio 补偿**（总经理 §三裁决）；「建 /四星图/ 独立图页」的结构性正解属 P0 另立单。 营销原文 ⑤ 另含 `.star-map-hint{font-size:15px;text-decoration:underline}` —— 依同一范围裁决**本轮不做**， 记录于 P13落地报告「第二轮」章的「未做项与依据」。 */ .hero-media img{aspect-ratio:1360/864;width:100%;height:auto;max-width:560px;margin-inline:auto;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-height:520px} /* 图注：首图由"照片+角标"改为"信息图+点击查看大图"，绝对定位角标会压住下方 hint，故改为流内图注 🔴 S-71：rgba(255,255,255,.78) → --muted（浅底 5.85:1）。 */ .hero-media .cap{margin-top:6px;text-align:center;color:var(--muted);font-size:var(--fs-aux);line-height:1.4} /* ===================== 通用区块 ===================== */ /* 段距与段头间距统一走令牌（R5①）：全站 13 段同一值，禁逐段手调 */ section{padding:var(--sec-pad-y) 0} /* 锚点落点防吸顶栏遮挡：顶栏 72px，留 96px（≤768 顶栏两行更高，见断点内 124px） */ section[id]{scroll-margin-top:96px} /* 🔴 S-71 补节奏（浅色化后"色块分界"的替代件） 根因：全站原有的"层次"有一半来自 4 条深色带（trust/method/lead/footer）。深色带撤掉后， 相邻的"白底带"与"浅灰带(--bg)"会出现两处**同色相接**（method|assess 皆白、gallery|culture 皆白）， 不处理就是一片死白、段与段失去边界。 处置：给"新起一段浅色带"的段顶统一加 1px var(--line) 细线 —— 颜色不变的段靠线分界， 颜色变化的段靠"变色 + 线"更脆。**只加 border-top，不加 border-bottom**： 避免与 .zone-bar 自带的上下 1px 线叠加成双线（实测 zone-bar 有两处，分别在 trust 后、assess 后）。 装饰性 1px 线（非文字、非唯一状态载体），不适用 4.5:1 文字阈值。 */ /* 🔴 S-20260922-71r2（学术必改 P1-1）：`.match`(#pairs) 并入本群组。 根因：改前 `.industry` 与 `.match` 皆不在名单内，两段有效底又完全相同 ⇒ y=1637 边界实测 ΔRGB=0、 连续 7 行纯色 distinct=1，属"零分隔"。本单已把 `.industry` 改白，但边界仍属"同群组之外"， 按学术判据须有一条 1px 线明确分段。 ⚠️ 关于 `.industry` 是否也应并入：**实测排除**。`.industry` 上邻是 `.zone-bar`(#zone-a)， 而 `.zone-bar` 自带 `border-bottom:1px solid var(--line)`（见 .zone-bar 规则）⇒ 若再给 `.industry` 加 `border-top`，同一条物理边界将落两条 1px 线叠成 2px，正是学术原文警告的"叠成 2px 双线"。 实测记录见 _tools/_s71r2_industry_double.txt（zone-a|industry 边界线厚 = 2px）。故只并 `.match`。 */ /* 🔴 S-20260922-75（学术复核 §⑦ 回归 B）：`.products` 并入本群组。 根因：`section.relation`（bg = --bg）与 `section.products`（bg 透明，继承 body --bg）**同底相接**， y=3569 边界实测连续 9 行整宽纯色（`rgb(238,242,247)`）、相邻行 ΔRGB=0、无细线 ⇒ 与必改 1 （industry|pairs）同类同严重度的"零分隔"。学术已反事实验证：`.relation` 的 `border-bottom = 0px` ⇒ 给 `.products` 加 `border-top` **不会叠成 2px**，仅 +1px 页高。 ⚠️ 判据修正（因 --bg 由 #F7F9FB 变深到 #EEF2F7）：边界行 = `rgb(227,232,238)` 且整行 `distinct = 1` 且该行 vs 两侧行 ΔRGB ≥ 8（线 vs 新 --bg 的通道差只有 11，老的"ΔRGB ≥ 20"只适用于"线的一侧是纯白"）。 */ .trust,.value,.method,.assess,.gallery,.culture,.faculty,.news,.footer,.match,.products{border-top:1px solid var(--line)} .section-head{max-width:760px;margin-bottom:var(--sec-head-mb)} .section-head h2{margin:12px 0 10px} @media (min-width:1100px){.value .section-head h2{font-size:30px;text-wrap:nowrap}} .section-head p{color:var(--muted)} .section-head .accent{width:46px;height:4px;background:var(--gold);border-radius:3px;margin-top:18px} /* ===================== 分区引导条（R4「分区肉眼可验」的结构/视觉件）===================== A 区「客户视角」＝#industry… #assess；B 区「我们做过什么」＝#cases… #contact。 两条引导条是全页**仅有**的两处全宽浅底异色带 ⇒ 滚动时形成两个视觉分段点， 使"首行链接顺序＝下方内容顺序"一眼成立，不需要访客自己数段。 硬约束：不含任何 h 级标签（标题树 h1=1／h2=11／h3=54 不变），文案非导航文案的重复件。 */ .zone-bar{background:var(--teal-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0} .zone-bar .container{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center} .zone-bar .zone-k{font-size:var(--fs-aux);font-weight:700;letter-spacing:.08em;color:var(--teal-ink); background:#fff;border:1px solid rgba(30,158,143,.35);border-radius:var(--radius);padding:4px 10px} .zone-bar .zone-t{font-size:var(--fs-h4);font-weight:600;color:var(--navy);letter-spacing:-.01em} /* ===================== 信任条 ===================== */ /* 🔴 S-71 改动A-3：改前 background:var(--navy)（实测 lum=0.106）、文字色白（#fff）。 改后白底 + 上边 1px var(--line)。**不加下边框**：紧随其后的 .zone-bar 自带 border-top， 两条叠加会成 2px 双线（实测该处下邻元素即 zone-bar#zone-a）。 数字 --gold → --gold-ink（46px 属大字，阈值 3:1；金 1.92:1 不达，深金 5.47:1 富余）。 注：--gold-ink 令牌原注为"浅色底上的小字专用"，本次**扩用到大数字**——同色同底、语义一致 （"浅底上的金"），且 :root 对 --gold 的定义本就写明"仅用于按钮/数字/识别件"，数字用金是原始口径。 */ .trust{background:#fff;color:var(--ink);border-top:1px solid var(--line)} .trust .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center} .trust .num{font-size:46px;font-weight:700;color:var(--gold-ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums} .trust .lbl{font-size:16px;margin-top:6px} /* 口径小字原 rgba(255,255,255,.5)（深底降权）→ --muted（浅底 5.85:1，仍是段内最弱一级）。 */ .trust .src{font-size:var(--fs-aux);color:var(--muted);margin-top:8px} /* ===================== 行业覆盖墙 ===================== */ /* 🔴 S-20260922-71r2（营销甲方必改②·段带分级）：本段由"无底色（随 body --bg 灰）"改 **#FFFFFF**。 根因：本段与紧邻的 #pairs(.match) 有效底完全相同（实测 y=1637 边界 ΔRGB=0、7 行纯色 distinct=1）， 形成 521+882=1403px 的"同色相接"，滚动时无分段可辨。二者必须一白一灰才有分节带。 为什么改本段而不是改 #pairs：`.mcard` 是白卡（background:#fff），若 #pairs 改白则白卡白底＝卡片边界消失； 反之 `.industry .chip` 亦为白卡 —— 二者皆为白卡，故取"上游段改白、下游段留灰"，使白卡落在灰底上更清晰。 */ .industry{background:#FFFFFF} .industry .wall{display:flex;flex-wrap:wrap;gap:12px} .industry .chip{ border:1px solid var(--line);background:#fff;border-radius:var(--radius); padding:11px 16px;font-size:14px;color:var(--ink);font-weight:500; transition:.15s; } /* hover 态小字同样要过 4.5:1：--teal 在白底仅 3.31:1，故文字改 --teal-ink（边框仍用 --teal，仅需 3:1） */ .industry .chip:hover{border-color:var(--teal);color:var(--teal-ink);transform:translateY(-2px)} .industry .note{margin-top:22px;color:var(--muted);font-size:var(--fs-aux)} /* ===================== 堵点—解法配对区（S20 R2·#pairs） ===================== 7 组四件套卡：部位小标签＋客户语言标题＋堵点句＋对应解法＋0 元入口。 全部走既有令牌（--gap-card/--card-pad/--radius-lg/--fs-aux/--teal-ink/--teal-soft）， 零三方依赖、零新色；mkey/mgo 沿用 .akey/.ago 同款取值（teal-ink on teal-soft ≈4.67:1，既有哨兵项口径）。 */ .match .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-card)} .mcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-pad);box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.18s} .mcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--teal)} .mcard .mkey{align-self:flex-start;font-size:var(--fs-aux);font-weight:700;letter-spacing:.06em;color:var(--teal-ink);background:var(--teal-soft);border-radius:var(--radius);padding:4px 9px} .mcard h3{font-size:var(--fs-h4);line-height:1.42;margin:12px 0 8px;color:var(--navy)} .mcard .mpain{font-size:var(--fs-aux);color:var(--muted);line-height:1.62;flex:1} .mcard .mfix{margin-top:12px;font-size:var(--fs-aux);color:var(--ink);line-height:1.6} .mcard .mfix b{color:var(--navy)} .mcard .mgo{margin-top:12px;font-size:var(--fs-aux);font-weight:700;color:var(--teal-ink)} .mcard .mgo:hover{text-decoration:underline} .match .note{margin-top:22px;color:var(--muted);font-size:var(--fs-aux)} /* ===================== 企业文化（S20 R4·#culture） ===================== 中等偏短约 1.5 屏：段头＋三格数字（口径随信任条）＋口径注＋三张事实卡＋行动引导。 只写事实层＋已钦定立场短句；零新色、零三方依赖。 */ .culture{background:#fff} .culture .cstats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card)} .culture .cstat{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-pad);text-align:center} .culture .cstat .num{font-size:34px;font-weight:700;color:var(--navy);letter-spacing:-.01em;font-variant-numeric:tabular-nums} .culture .cstat .lbl{font-size:14px;color:var(--ink);margin-top:6px} .culture .cstat .csrc{font-size:var(--fs-aux);color:var(--muted);margin-top:8px;line-height:1.5} .culture .cnote{margin-top:14px;font-size:var(--fs-aux);color:var(--muted)} .culture .cfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card);margin-top:24px} .culture .cfact{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-pad)} .culture .cfact h3{font-size:var(--fs-h4);color:var(--navy);margin-bottom:8px} .culture .cfact p{font-size:var(--fs-aux);color:var(--muted);line-height:1.62} .culture .cstance{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card);margin-top:24px} /* S58：钦定立场层（使命/愿景/价值观） */ .culture .stance-item{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-pad);text-align:center} .culture .stance-item .slabel{display:block;font-size:var(--fs-aux);color:var(--gold-ink);font-weight:600;letter-spacing:.12em} .culture .stance-item .stext{display:block;font-size:18px;font-weight:700;color:var(--navy);margin-top:6px} .culture .ccta{margin-top:26px;font-size:16px;font-weight:600;color:var(--ink)} /* ===================== 价值主张 ===================== */ .value{background:#fff} .value .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card)} .vcard{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-pad)} .vcard h3{font-size:var(--fs-h4);margin-bottom:10px;color:var(--navy)} .vcard p{font-size:14px;color:var(--muted)} .vline{margin-top:28px;font-size:var(--fs-aux);color:var(--muted);line-height:1.8} /* ===================== 客户关系 / 陪跑方式 ===================== */ /* 🔴 S-20260922-71r2（营销甲方必改③·补漏的分隔线）：本段上邻 #value 为白底（色差本身够分节）， 但同型接缝 @2520/@5323/@7767 皆有 1px var(--line)，唯本处缺 —— 属"线不一致"，非"无线不可用"。 补上边线使其归入同一节奏。判据：x=15 列跨本段上边界采样应出现 R≈227 停点。 ⚠️ 只加 border-top，**不加 border-bottom**：本段下邻 #products 仍是灰底。 🔴 S-20260922-75（学术复核 §⑦ 回归 B）：**上段预留的"下边界线留给下一轮"已在本轮闭合** —— 条件用的是 `.products` 的 `border-top`（见上方补线群组），不是本段的 `border-bottom` （本段 bb 仍为 0，避免与 `.products` 的 bt 叠成 2px）。 */ .relation{background:var(--bg);border-top:1px solid var(--line)} .relation .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-card)} .rstep{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-pad)} /* 陪跑序号 01–04：原用 --gold（#E8B33B）在白卡上实测仅 1.92:1（大字阈值 3:1 也不达）； 改深金 --gold-ink（专为浅底小字/数字设的令牌）实测 5.47:1。 */ .rk{font-size:28px;font-weight:700;color:var(--gold-ink);line-height:1} .relation .rb h3{font-size:var(--fs-h4);margin:10px 0 6px} /* 甲方原稿此处为 h4；为避免 h2→h4 跳级改 h3，字号仍按 h4（18px）落地 */ .relation .rb p{font-size:var(--fs-aux);color:var(--muted);line-height:1.6} .relation .note{margin-top:24px;font-size:var(--fs-aux);color:var(--muted);line-height:1.8} /* ===================== 产品线 ===================== */ .products .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-card)} .pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-pad);box-shadow:var(--shadow);transition:.18s;display:flex;flex-direction:column} .pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--teal)} /* 图标底座统一走基础圆角（与 .acard .ico 同档，原为 10px 非令牌值） */ .pcard .ico{width:46px;height:46px;border-radius:var(--radius);background:var(--teal-soft);display:flex;align-items:center;justify-content:center;margin-bottom:16px} .pcard h3{font-size:20px;margin-bottom:10px} .pcard p{font-size:14px;color:var(--muted);flex:1} .pcard .price{margin-top:16px;font-size:15px;font-weight:700;color:var(--navy)} .pcard .price small{font-weight:400;color:var(--muted);font-size:var(--fs-aux)} /* ===================== 八大测评工具 ===================== */ /* 🔴 S-20260922-71r2（营销甲方必改②）：白 → var(--bg)。本段上邻 #method 为白底， 原为白+白（1179+1047=2226px，全页最长同色连续段）。改灰后方法段（白）／测评段（灰）一眼分节。 副作用（正向）：同段 9 张 `.acard` 是白卡，落在灰底上边界更清楚。 */ .assess{background:var(--bg)} .assess .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-card)} .acard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-pad);box-shadow:var(--shadow);transition:.18s} .acard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--teal)} .acard .ico{width:40px;height:40px;border-radius:var(--radius);background:var(--teal-soft);display:flex;align-items:center;justify-content:center;margin-bottom:12px} .acard .akey{align-self:flex-start;font-size:var(--fs-aux);font-weight:700;letter-spacing:.06em;color:var(--teal-ink);background:var(--teal-soft);border-radius:var(--radius);padding:4px 9px} .acard h3{font-size:var(--fs-h4);line-height:1.42;margin:14px 0 8px;color:var(--navy)} .acard p{font-size:var(--fs-aux);color:var(--muted);flex:1} .acard .ago{margin-top:14px;font-size:var(--fs-aux);font-weight:700;color:var(--teal-ink)} .assess .note{margin-top:22px;font-size:var(--fs-aux);color:var(--muted)} /* 技术段末尾「智能体绩效看板」外链卡（甲方 §四 P1-③）：与顶栏第 2 项同一落点，补齐"持续看"这一步 🔴 S-71 改动A-5：改前 background:var(--navy)（实测 lum=0.106）+ 文字色白（#fff）。 改后：--gold-soft 底 + --gold 边 + --navy 字。为什么不做成"白卡"：本卡在 .assess 段内， 同段已有 9 张白卡（.acard），再做白卡＝第 10 张白卡，完全失去"这是一个特殊入口"的辨识； 改用站内既有的 --gold-soft 强调底（.cases .disclaimer 同款）＝花最小代价保住它的特殊性， 且 --gold-soft 自身是浅色，不破"全浅底"。 */ .board-card{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; margin-top:20px;background:var(--gold-soft);color:var(--navy);border:1px solid var(--gold);border-radius:var(--radius-lg); padding:18px 24px;font-size:17px;font-weight:700;box-shadow:var(--shadow);transition:.18s} .board-card span{font-size:var(--fs-aux);font-weight:400;color:var(--muted);line-height:1.5} /* hover 原 background:var(--navy-2)（更深）→ 边框加深金 + 抬阴影；底色不动，避免浅底 hover 时"变浅看不出"。 */ .board-card:hover{background:var(--gold-soft);border-color:var(--gold-ink);box-shadow:var(--shadow-lg)} /* ===================== 案例 / 交付 ===================== */ /* 🔴 S-20260922-71r2（营销甲方必改②）：本段原随 body 为灰（--bg）；改 **#FFFFFF**。 根因：本段下邻 .gallery 已按本单改为 var(--bg)，若本段留灰则形成新的"灰+灰"（1323+973px）； 反之本段改白，则 zone-b(薄荷) → 案例(白) → 花园(灰) 三段色阶连续可辨。 本段卡片 `.case` 是白卡＋--line 边，落在白底上仍靠 1px 边与 --shadow 自证边界（图上件另有圆角与阴影）。 */ .cases{background:#FFFFFF} .cases .disclaimer{ background:var(--gold-soft);border-left:4px solid var(--gold); padding:14px 18px;border-radius:var(--radius);font-size:var(--fs-aux);color:#6b4e10;margin-bottom:20px; } .cases .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card)} .case{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)} /* 🔴 S-71：图位占位底原 var(--navy)。占位底只在"图未加载/加载失败"时可见， 深藏青会在浅色页里闪出一块深色（首屏之后最显眼的一处深色残留）→ 改 --bg。 实测两处图片均已就位（assets/scene/、assets/faculty/ 均在白名单），此改动只影响加载中间态与兜底态。 */ .case .ph{height:160px;overflow:hidden;background:var(--bg)} .case .ph img{width:100%;height:100%;object-fit:cover} .case .body{padding:var(--card-pad)} .case .tag{font-size:var(--fs-aux);color:var(--teal-ink);font-weight:600} .case h3{font-size:17px;line-height:1.5;margin:8px 0 12px} .case .step{font-size:var(--fs-aux);margin:8px 0;line-height:1.55} .case .step b{color:var(--navy)} .case .res{color:#0c7a4a;font-weight:600;font-size:var(--fs-aux)} /* ===================== 交付实景墙 ===================== */ /* 🔴 S-20260922-71r2（营销甲方必改②）：白 → var(--bg)。本段下邻 #culture 为白底（且**必须**为白： `.culture .cstat/.cfact/.stance-item` 是 var(--bg) 填充卡，段底若改灰则卡片与段底同色消失）。 故取本段改灰，使 花园（灰）／文化（白）分节。副作用：`.gallery .grid img` 有 box-shadow，落在灰底上更立。 */ .gallery{background:var(--bg)} .gallery .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-card-dense)} .gallery .grid img{width:100%;height:220px;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:.18s} .gallery .grid img:hover{transform:scale(1.02);box-shadow:var(--shadow-lg)} /* ===================== 师资 ===================== */ .faculty .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-card)} .fcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:.18s} .fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} /* 🔴 S-71：照片位占位底原 var(--navy-2)。更关键的是**首字母兜底字**原 rgba(255,255,255,.85)： 占位底改浅后白字即"白底白字"（实测对比度 1.00，等于不可见）⇒ 必须同步改 --muted（--bg 上 5.6:1）。 */ .fcard .photo{aspect-ratio:3/4;background:var(--bg);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden} .fcard .photo img{width:100%;height:100%;object-fit:cover} /* 🔴 S-20260922-75（学术复核 §④ 遗留 2）：原 `.fcard .photo .initial{font-size:54px;color:var(--muted);font-weight:700}` **整条删除**。依据（本包自验，未照抄"零引用"之说）： `grep -c 'class="initial"' index.html` = **0**（index.html 内 `initial` 唯一命中是 viewport meta 的 `initial-scale=1.0`）；`grep -n 'initial' js/app.js` = **0** ⇒ 类名无任何引用方，该规则空转 （7 张 `.fcard` 全部带 `.photo > img` 真照片，无首字母兜底图）。 判据：删除后 `grep -n '\.initial' css/portal.css` **无活规则命中**（仅存本注）；页脚/师资卡渲染不变。 */ .fcard .body{padding:var(--card-pad-sm)} .fcard .name{font-size:17px;font-weight:700} .fcard .role{font-size:var(--fs-aux);color:var(--teal-ink);font-weight:600;margin:2px 0 8px} .fcard .spec{font-size:var(--fs-aux);color:var(--muted);line-height:1.5} .fcard .exp{font-size:var(--fs-aux);color:var(--gold-ink);font-weight:600;margin-top:10px;line-height:1.5} .faculty .note{margin-top:24px;font-size:var(--fs-aux);color:var(--muted)} /* ===================== 方法论（八脉） ===================== */ /* 🔴 S-71 改动A-4：改前 background:var(--navy)（实测 lum=0.106）+ 文字色白（#fff）。 改后白底 + --ink 字。与 .assess（同白）之间由上面"补节奏"的 1px 细线分界。 全部"深底白字/金字"连带改写逐条如下（每条都只解决"白底白字/金在白底不可读"）： .section-head p rgba255,.? → --muted .bm 卡片底 rgba(255,255,255,.05) + 边 rgba(255,255,255,.12) → #fff + --line + --shadow .bm .part 金小字 --gold → --gold-ink（13px） .bm .desc rgba(255,255,255,.72) → --muted .judge 金句 --gold → --gold-ink；judge span 白字 → --navy .legend rgba(255,255,255,.6) → --muted .star-map h3 白字 → --navy；figcaption 白 → --muted；缩略图白卡补 1px 边（白图在白底上原无边界） */ .method{background:#fff;color:var(--ink)} .method h2{color:var(--navy)} .method .section-head p{color:var(--muted)} .method .bamai{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-card-dense);margin-top:8px} .bm{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-pad-sm);box-shadow:var(--shadow)} .bm-ico{width:30px;height:30px;margin-bottom:8px} .bm .part{font-size:var(--fs-aux);color:var(--gold-ink);font-weight:600;letter-spacing:1px} /* 八部位卡标题：语义升为 h3（与师资卡 div→h3 同型，供屏幕阅读器跳转与 GEO 抽取 8 个实体）， line-height 钉回 1.68 保持视觉与升格前逐像素一致（L7 令牌的"语义级≠视觉级"另见 :root 注记） */ .bm .name{font-size:18px;line-height:1.68;font-weight:700;margin:6px 0 8px} .bm .desc{font-size:var(--fs-aux);color:var(--muted);line-height:1.55} .method .judge{margin-top:22px;font-size:22px;font-weight:600;text-align:center;color:var(--gold-ink)} .method .judge span{color:var(--navy)} .method .legend{text-align:center;color:var(--muted);font-size:var(--fs-aux);margin-top:6px} /* canvas：官网插图限宽 560px 居中（超宽插图=读者体验事故），给白卡免得深底上发灰。 本节四星图与首屏首图同为 canonical《…四星图202609》，为避免"同图同呈现"重复， 方法论段降级为缩略入口（420px，明显小于首屏 472–552px 主图），八部位信息由上方 .bamai 八卡 + .legend 文字复述，缩略可点击看原尺寸。 */ .star-map{margin:24px auto 0;max-width:420px;text-align:center} .star-map h3{color:var(--navy);margin-bottom:18px} .star-map-link{display:block;border-radius:var(--radius-lg)} .star-map img{width:100%;max-width:560px;height:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)} /* 补偿通道升级为按钮级（甲方 §四 P1-①／学术 §五 P1-3）： 四星图原尺寸 1360×864，首屏呈现宽上限 552px（两栏版式）⇒ 倍率 0.4059 ⇒ 图内模型名仅渲染 12.14px、 1024 档 9.48px、方法论段 420px 缩略仅 9.23px，均跌破全站辅助字号下限 13px，且是结构性的 （要达 13px 需呈现宽 ≥680px，已超 R20 上限 560px 与首屏列宽上限 552px）。 学术 §2.5 已裁定不开 R20-E1 例外（冻结），故不放大破限；改为把"点开看原图"从 13px 小字升为按钮级提示， 并在图注明说"图上小字请点开原图查看"。 */ .star-map-hint{display:inline-block;margin-top:10px;font-size:14px;font-weight:700;color:#3A2400;background:var(--gold);padding:8px 16px;border-radius:var(--radius)} .star-map-link:hover .star-map-hint{background:#F0C059;text-decoration:none} .star-map figcaption{margin-top:14px;font-size:var(--fs-aux);color:var(--muted);line-height:1.6} /* ===================== 动态 / 洞见 ===================== */ /* 🔴 S-20260922-71r2（营销甲方必改②）：本段原随 body 为灰；改 **#FFFFFF**。 根因：上邻 #faculty 为灰底，原为"灰+灰"（1391+686=2077px）；且下邻 #contact(.lead) 亦为灰底， 原形成第二处"灰+灰"（686+485=1171px）。改白后 #faculty(灰) → #news(白) → #contact(灰) 三段互相可辨， **一处改动同时拆掉两对同色相接**（这是本轮"5→1"判据能达标的关键一步）。 本段 `.news .item` 是白卡，改白底后靠 --line 边自证边界（hover 时边框转 --teal）。 */ .news{background:#FFFFFF} .news .list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-card)} .news .item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--card-pad);transition:.15s} .news .item:hover{border-color:var(--teal)} .news .date{font-size:var(--fs-aux);color:var(--teal-ink);font-weight:600} .news .item h3{font-size:17px;line-height:1.5;margin:8px 0 6px} .news .item p{font-size:14px;color:var(--muted)} /* ===================== 联系 / 领取 ===================== */ /* 🔴 S-20260922-75（相公 2026-09-23 00:54 批「1.听营销的」= 采纳 P20《营销裁决书_20260923_S75》§七） ＋（P20 §六 B / 派工单 §三 A「待裁 1」）： `.lead` 由 线性渐变(160deg,#FFFFFF,var(--bg)) **浅底** 改回 **--navy #061F32 重底 ＋ 浅色字**。 沿革：S-71 改动A-6 曾把本段由深藏青渐变改浅（承相公 R2「全用浅色背景」）；本轮营销以 "首屏/留资段是全页唯二的整幅段，浅底化后第 7 屏（留资）失去收束感、转化区不成立"为由申请复发， 相公明批「听营销的」⇒ **本段是全站唯一获批的深色段**（红线：不得顺势把别的段改深）。 深色段计数判据（简化式 lum<0.55，与对比度口径分离，见坑 8）：全站应 = **1**（仅本段）。 ⚠️ 右栏 `.lead-card` 仍是白卡（深底上的白卡＝强分层，是设计意图，不是缺陷）；`--shadow-lg` 保留。 🔴 段内前景逐处实测替换（WCAG 线性化式；底色 = #061F32）。营销预警的 5 个撞色点， 处置后实测值（本包独立复算，底 = rgb(6,31,50)）： ① `.lead h2` --navy 1.00:1（文字消失）→ **#FFFFFF 16.80:1** 必改 ✅ ② `--muted` 系 --muted 2.87:1（<4.5） → **--bg #EEF2F7 14.95:1** 必改 ✅（正文级） ③ `.eyebrow` --gold-ink 3.07:1（<4.5） → **--gold #E8B33B 8.76:1** 必改 ✅ ④ navy 焦点环 --navy 1.00:1（=段底） → **--gold 8.76:1** 必改 ✅ ⑤ `--teal-ink` 焦点环 3.15:1 → **达标，勿动**（登记为"实测通过"） 附带：`.btn-primary`（金底 #E8B33B／字 #3A2400）落深底仍成立（金 vs navy 8.76:1），**不动**。 ⚠️ 白字一律写 `#FFFFFF`（本文件既有大写纯白书写惯例，见 .industry/.cases/.news 的 `background:#FFFFFF`）—— 故判据「白色**文字色**、三字母十六进制写法」的 grep 计数仍 = 0（本注刻意不写出该字面，避免自命中）； 该判据的原意是"浅底上的白色文字色死角"（原 .btn-ghost），本段是经相公批准的深底， 白字是该段的正确选择，非绕闸。 */ .lead{background:var(--navy);color:#FFFFFF} .lead .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .lead h2{color:#FFFFFF} /* 段 eyebrow：本段 eyebrow 受 `#contact .eyebrow{color:var(--gold-ink)}`（id 选择器，(1,1,0)）命中， 在 navy 上实测 3.07:1（13px 需 4.5:1，不达）⇒ 本段显式改 **--gold**（8.76:1）。 为什么在深底上用 --gold 而不是 --gold-ink：同 `.hero` 金带/.eyebrow 一样，是"同一语义随底换明度"—— 金在浅底取深金（--gold-ink 5.47:1）、在深底取亮金（--gold 8.76:1），零新色。 特异性：本条 (1,1,0) 与上方 `#method .eyebrow,#contact .eyebrow` 同级，靠**后置**胜出（#method 仍为 --gold-ink）。 */ #contact .eyebrow{color:var(--gold)} /* 🔴 特异性缺陷修复（S-19 实测）：原 `.lead p{...白 .82}` 的特异性(0,1,1) 高于单类名 `.lead-card-p`/`.copy-feedback`/`.lead-card-privacy`(0,1,0)，把白卡内 3 个

覆盖成 "白字白底"（实测对比度 1.00，等于不可见）。改为只命中**左栏文字列**的直系

（左栏＝.wrap 的第一个

；不可写 `.wrap > div > p`——白卡 .lead-card 也是
，会再度误命中）， 卡内文字回归各自令牌色。 🔴 S-75：左栏两段正文（含 `.small`）由 --muted（navy 上 2.87:1，不达）改 **--bg #EEF2F7（14.95:1）**。 为什么取 --bg 而不是 #FFFFFF：给 h2（16.80）与正文留一档明度差，形成"标题亮、正文次亮"的层级； 两者皆 ≥4.5:1（正文 14.95、标题 16.80）。本条特异性 (0,3,2) 高于 `.small`(0,1,0)，两段同色。 */ .lead .wrap > div:first-child > p{color:var(--bg)} /* 🔴 S-75 焦点环（营销预警第 4 点）：基础规则 `.lead` 外的 `a/button/[tabindex]:focus-visible` 用 `outline:2px solid var(--navy)`；落进本段即"navy 环套 navy 底"＝1.00:1。 处置：本段内**落在深底上的**焦点件改 **--gold**（8.76:1 ≥3:1，WCAG 2.4.11／1.4.11）。 为什么还要单独给 `.lead-card` 内**改回 --navy**：本段唯一的焦点件（`.btn-primary#copyContact`） 在**白卡内**，白卡上金环只有 1.92:1 不达；它在卡内 24px 内距里，环（outline-offset 2px） 根本触不到 navy 段底，故按"环实际压在哪种底上"分别取色，而不是一律取段底色。 判据：`#copyContact:focus-visible` computed outline-color = rgb(6,31,50)，vs 白卡 16.80:1； 若后续在深底上直接加焦点件，本段 `--gold` 规则自动生效（8.76:1）。 */ .lead a:focus-visible,.lead button:focus-visible,.lead summary:focus-visible,.lead [tabindex]:focus-visible{outline-color:var(--gold)} .lead-card a:focus-visible,.lead-card button:focus-visible,.lead-card summary:focus-visible,.lead-card [tabindex]:focus-visible{outline-color:var(--navy)} .lead-card{background:#fff;border-radius:var(--radius-lg);padding:var(--card-pad-lg);box-shadow:var(--shadow-lg);color:var(--ink)} .lead-card h3{font-size:var(--fs-h3);color:var(--navy)} .lead-card-p{margin-top:12px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--muted)} .lead-steps{margin:16px 0 0 1.15em;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)} .lead-steps li{margin-bottom:8px} .lead .submit{width:100%;margin-top:22px;justify-content:center} .copy-feedback{margin-top:12px;font-size:var(--fs-aux);line-height:1.6;color:var(--teal-ink);font-weight:600} .lead-card-privacy{font-size:var(--fs-aux);color:var(--muted);margin-top:14px;text-align:center} /* 仅屏幕阅读器可见（状态播报区） */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* 防拆词工具类：把中文短语锁成单行（不折行、不拆词），用于"整块不可断"的标题片段； 极窄屏（<360px）回退普通换行，避免窄屏横向溢出、也不出现逐字断行。 */ .nb{white-space:nowrap} @media (max-width:359px){.nb{white-space:normal}} /* S66（相公 2026-09-22 19:50「免费做企业组织体检有两个黄色字块都不动，留一个就行」）： 右下常驻浮窗 .float-cta（position:fixed，不随滚动移动）与顶栏 .header-cta（sticky，同样常驻）重复 ⇒ **删浮窗、留顶栏那个**（顶栏在导航内、不遮正文；浮窗固定悬浮会压住卡片）。转化入口仍有三处： 顶栏 CTA ＋ 首屏主按钮 ＋ 页脚兜底。原 ≤768 的"底部固定条"规则亦一并删除（见断点区）。 */ /* ===================== 页脚 ===================== */ /* 🔴 S-71 改动A-7：改前 background:#04141F（实测 lum=0.068，全站最深的一处）+ 半透明白字。 改后白底 + 顶 1px var(--line)（由上面"补节奏"统一给）+ --muted 字。 为什么页脚不用 --bg 而用 #fff：页脚之上 .lead 的渐变末端就是 --bg，页脚若也用 --bg 则首行无边界； 白底 + 1px 线让页脚成为"干净收尾的一张白纸"。 连带全改（原全是 rgba(255,255,255,x) 白/半透明白）： h3 #fff → --navy；a .7 → --muted；a:hover #fff → --navy； qr figcaption .72 → --muted；.bottom 分隔线 rgba(255,255,255,.10) → --line、字 .5 → --muted； .copy a .5 → --muted；.copy a:hover #fff → --navy。 注：QR 图自身是白底（.qr-item img{background:#fff}），原在深底上是一块"白方块"； 浅底后与页底同色，靠 padding 与圆角自证边界，另有 figcaption 文字说明，不影响识别。 */ .footer{background:#fff;color:var(--muted);padding:56px 0 28px;font-size:14px} /* 页脚 7 栏：品牌｜产品｜工具｜方法论｜动态｜关于我们｜联系（导航让位项的兜底入口在此，见 R6） */ .footer .top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr .8fr 1fr 1fr;gap:24px} .footer h3{color:var(--navy);font-size:15px;line-height:1.4;margin-bottom:14px} .footer a{color:var(--muted);display:block;margin:8px 0} .footer a:hover{color:var(--navy)} /* 三码区（企微／微信服务号／微信视频号）· 实物图，仅页脚、不进首屏 */ .footer .qr-grid{display:flex;gap:14px;margin-top:16px} .footer .qr-item{width:96px;margin:0;text-align:center} .footer .qr-item img{width:96px;height:96px;background:#fff;border-radius:var(--radius);padding:5px} .footer .qr-item figcaption{font-size:var(--fs-aux);color:var(--muted);margin-top:6px;line-height:1.4} .footer .bottom{border-top:1px solid var(--line);margin-top:36px;padding-top:20px;font-size:var(--fs-aux);color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px} .footer .copy{max-width:760px;line-height:1.7} /* 备案行：ICP + 公安联网备案号，均可点击 */ .footer .copy a{display:inline-flex;align-items:center;gap:4px;color:var(--muted);margin:4px 16px 0 0} .footer .copy a:hover{color:var(--navy)} .footer .beian-mps img{width:18px;height:20px;display:inline-block} /* ===================== 响应式断点 ===================== */ @media (max-width:1200px){.container{max-width:1120px}.nav a{font-size:14px}} @media (max-width:992px){ h1{font-size:42px}.hero h1{font-size:42px} /* 🔴 S-20260922-66：hero 单栏落点由本档（≤992）**下移到 ≤768**（规则见下方 max-width:768px 块）。 依据：相公真实窗口 864px 正落本档，实测 hero 被压成单栏（863px 一列）、四星图掉出首屏， 而他口中的「预览」是 1080 档（两栏）。769–992 保两栏后，二者格式一致。 */ .value .grid,.relation .steps{grid-template-columns:1fr} /* 🔴 S-20260922-63（相公点名三区「一排四个」）：#method .bamai / #assess .grid / #cases .grid 原先在此档（769–992）降 2 列；相公窗口实测 CSS 视口 ≈870–945px 正落此档 ⇒ 三段呈 2 列， 与「像预览那样的四列」不符。处置：三区**移出本档降列**，四列保底见下方 (min-width:740px) and (max-width:992px) 条（S63 时为 800px，S68 下移至 740px）； 产品/师资两区维持原 2 列不动（相公未点名）。 */ .products .grid,.faculty .grid{grid-template-columns:repeat(2,1fr)} .match .grid,.culture .cfacts{grid-template-columns:repeat(2,1fr)} /* S20：配对区/文化事实卡 992 档降 2 列 */ .lead .wrap{grid-template-columns:1fr;gap:28px} .news .list{grid-template-columns:1fr} .footer .top{grid-template-columns:1fr 1fr} /* 品牌加长后（北京六脉咨询-灵机书院®）在 769–992 导航仍常显，须同步收字号与间距防溢出 */ /* 🔴 S67：S66 在此隐藏「北京六脉咨询」的写法已撤回（相公未授权删品牌名）。 本带宽度矛盾改由下方 769–1160「两行顶栏」承接；此处只保留 nav 收紧。 */ .header .container{gap:12px} .logo .lb-org{font-size:15px} /* S67：公司名**保留**，只降字号让位（不再 display:none） */ .nav{gap:8px} .nav a{font-size:13px} .header-cta{padding:10px 12px;font-size:13px} } /* 🔴 S-20260922-63 · 相公点名「一排四个」的三区（#method .bamai / #assess .grid / #cases .grid） 800–992 档**保四列**（S63 原始口径；**S68 已把下限下移到 740**，依据见下条）。 S63 原依据：相公窗口反推 CSS 视口 ≈872–937px（卡片宽 821px(2列) ＋ .bm-ico 30px 图标环外径 54px 两条独立判据）＋ 项目自证「相公真实窗口约 800–1080px」。 **S68 实测修正**：该窗口带实为 **769–799**——相公 6mhr.com 的页面缩放约 240%，把 1920px 屏压成 799px 视口。 */ /* 🔴 S-20260922-68 · 下限由 800px **下移到 740px**（相公「电脑上看到的像手机版」）。 定位链（三条独立判据，见 `_tools/_probe_s68_*.py`）： ① 归一化几何 —— 相公截图卡片宽 786 ÷ 页面宽 1915 = 0.410；渲染实测唯一匹配 2 列档， 且内容区 1609 / 671 = 2.40 反推 **CSS 视口 ≈ 769–799、页面缩放 ≈ 240%**； ② 档位指纹 —— 线上真站实测：769–799 = 「三区 2 列 + hero 两栏 + H1 单行 + 顶栏 100px」， 与相公三张截图逐一吻合；768 及以下 hero 转单栏，800 及以上转 4 列； ③ 缩放判别 —— 截图内浏览器标签栏字高仅 15 物理 px（系统缩放 240% 时应 ≈30px） ⇒ 系统缩放正常，是**页面 zoom**（浏览器按站点记忆）。 ⇒ 相公视口恰好压在 800 断点下方 1–20px 处，故三区落 2 列。下限下移后该带亦为四列。 代价据实记录：740 档卡宽 ≈141px、760 ≈148px、780 ≈153px、799 ≈160px（800 档 158px）。 <740 仍降 2 列——四列卡宽将 <141px，超出可用下限，不硬撑。 🔴 S69 再下移 740 → **700**（相公 2026-09-22 21:07 截图实测）： 上次（S68）用"卡片宽 786 ÷ 2 列"反推视口 790 —— **该算法把 `.bamai` 的密排 gap 当成 16px，算偏了**。 本次改用**唯一精确已知量**：`.method .bamai` 的 `column-gap:14px`（--gap-card-dense）。 相公截图实拍 gap=37 物理 px ⇒ 缩放 = 37/14 = **2.643** ⇒ CSS 视口 = 1898/2.643 = **≈718px**。 718 恰好压在 740 门槛下方 22px ⇒ 他仍看到 2 列。故门槛再降 40px 到 700（留 18px 裕量）。 同图另一路互证：图2（本地预览 index.html）顶栏单行高 90 物理 ÷ CSS 72 = 1.25 ⇒ 视口 ≈1532px → 4 列 + 单行顶栏，与"预览"观察一致。两图同一份 CSS，视口相差 2.13 倍。 代价据实记录（正文容器 padding 64px 档）：700 档卡宽 ≈132px、718 ≈137px、739 ≈148px。 */ @media (min-width:700px) and (max-width:992px){ .method .bamai,.assess .grid,.cases .grid{grid-template-columns:repeat(3,1fr)} } /* 三区在 577–699 档降 2 列（承接四列保底，避免 4→1 直跳） */ @media (min-width:577px) and (max-width:699px){ .method .bamai,.assess .grid,.cases .grid{grid-template-columns:repeat(2,1fr)} } /* 🔴 S-20260922-66 · 相公 864 窗口的 H1「单行」保障（对应「预览中的格式就对，线上版就不对」） 实测（_tools/_probe_s66_hero.py）：864 档内容宽 736px；≤1023 已交回折行 ⇒ 42px × 21 字 = 882px 必折 2 行， 而「预览」档（1080）H1 单行。口径取 clamp(30px,3.9vw,40px)： 864 → 33.7px（21 字 ≈ 708px < 736，单行；余量 28px） 992 → 38.7px（仍单行）；1023 以下全程 white-space:normal ⇒ 即便字体回落也只折行、**不静默裁字**（P0 红线不破）。 */ @media (min-width:769px) and (max-width:992px){ .hero h1{font-size:clamp(30px,3.9vw,40px)} } /* ---- P0 返工（学术 §五 P0-1）：顶栏 7 项在任何档位都不得折行 ---- 根因：`.nav a` 未设 white-space:nowrap，中文可逐字断行 ⇒ 空间不足时 flex 走的是"收缩容器→文字折行" 这条路径，min-content 极小 ⇒ scrollWidth 不增反等于 clientWidth，于是旧判据 `nav.scrollWidth==nav.clientWidth` 在此带恒为真：判据通过、实质落空（静默型缺陷）。 改前实测：win 800 → 7 项各折 3–4 行、nav 高 94.06px；win 900–1120 → 7/7 各折 2 行、nav 高 47.03px（单行仅 23.52px）。 修法：≤1160 全带锁"单行不可折"，缺口一律由 nav 自身横向滚动消化，绝不以静默折行消化。 判据换成 R6-N：逐链接行盒数===1 ＋ nav 高 ≤ 单行行高+4px（scrollWidth≤clientWidth 降为必要不充分）。 */ /* 🔴 S-20260922-67：本块原先的「nowrap ＋ nav 横滚」三条已**上移为全站 base 规则**（见 .nav 基础规则处）—— ≥1161 档曾漏网，实测 1161／1440 档 7 项折行且旧判据恒过。 另：S66 曾在此隐藏「北京六脉咨询」——**已撤回**（相公未授权删品牌名，并排图已证 ≤1160 全带公司名消失）； 本带宽度矛盾改由 769–1160「两行顶栏」解决。 */ /* 🔴 S-20260922-67 · 769–1160「两行顶栏」——本块同时是 S66「隐藏公司名」的撤回件。 为什么必须两行（实测宽度账 · 864 档顶栏内容宽 736px／1080 档 984px）： logo ×2 后完整品牌 ≈322px（图形 42 ＋「北京六脉咨询」15px×6≒90 ＋「灵机书院®」40px×4≈172） ＋ CTA ≈141px ＋ gap×2 48 ⇒ 留给 nav 只剩约 225px（864）／473px（1080），而 8 项 nav 需 ≈604px ⇒ **单行必溢出**。三件套（完整品牌 / 8 项导航 / CTA）在 ≤1160 单行物理不可兼得。 ★ S69 复测：LOGO 主名 40→52px 后完整品牌 ≈451px（+67px），单行不可兼得带由 ≤1160 上移至 **≤1399**。 处置选「两行」而非「删品牌名」：相公没让删公司名，且公司名是对外第一眼主体名。两行后三者各自完整。 不挂渐隐遮罩：两行后 nav 放得下，渐隐会误淡"刚好放得下"的末项（沿用 S20 判据；**勿恢复本块旧写法**）。 */ @media (min-width:769px) and (max-width:1399px){ .header .container{flex-wrap:wrap;height:auto;padding-top:12px;gap:12px} .logo{order:1} .logo .lb-org{font-size:15px} /* 公司名保留；主名 52px（S69 再放大）不动 */ .header-cta{order:2;margin-left:auto} .nav{ order:3;display:flex;flex:0 0 100%;margin:0;padding:0 0 12px; gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none; } .nav::-webkit-scrollbar{display:none} .nav a{flex:0 0 auto;white-space:nowrap} section[id],main{scroll-margin-top:132px} /* 两行顶栏更高，锚点留更多余量（与 ≤768 同口径） */ } /* 993–1160 档顺带收紧（gap 22→10、字号 14→13＝全站辅助字号下限），压缩"需要横滚"的区间。 甲方 A 方案的"仅压缩"在 800–992 不成立（实测该带 nav 可用宽最窄仅 305px，缺口 163px），故压缩只作辅助，兜底靠上面的横滚。 */ @media (min-width:993px) and (max-width:1160px){ .nav{gap:10px} .nav a{font-size:13px} .header-cta{padding:10px 12px;font-size:13px} } /* 🔴 返工 G1（甲方条件一）：993–1074（innerWidth 口径）"末项被裁、且该带无渐隐"的静默裁字带。 实测（改前 · _rework_tools/probe_r2_geo.py，window 1440×900 口径）：该带 nav 实得 480–534px、需宽 541px ⇒ 末位外链项右端越出 nav 可视框 61.28→7.00px，↗ 出站标识落在可视框之外；而渐隐遮罩在 >992 档已摘除， 访客既读不到末项、也得不到"还能右滑"的提示。 处置：只收横向占位，不动排序、不减项、不改任何文案与链接 —— header gap 24→12、品牌字号回到 ≤992 档同值 17px、 nav gap 10→6、CTA 内边距 18→10（CTA 文案与双 span 不动）。 改后实测（同探针、同档）：nav 实得 513px ＝ 需宽 513px ⇒ 溢出 0、末项完整可见、slack 22.76px； 1160 档不受影响（仍 gap 10 / 品牌 20px / sw=541=cw）。 */ @media (min-width:993px) and (max-width:1074px){ .header .container{gap:12px} .logo .lb-org{font-size:15px} /* S67：公司名**保留**（不再 display:none）；本档宽度问题已由 769–1160 两行顶栏解决 */ .nav{gap:6px} .header-cta{padding:10px 10px;font-size:13px} .nav a.nav-ext::before{left:-3px} /* gap 收到 6px，分隔线随之内收，避免压到前一项文字 */ } /* 🔴 S-20260922-67 · ≥1335 单行档：nav 仍需收 gap。 实测（_tools/_probe_s67_header.py）：logo ×2 后**宽屏不会自动放下**——容器有 max-width， 视口再宽也不给导航更多空间，溢出在 1335 档 47px 起步、1600/1920 档饱和于 66px（不收敛）。 处置：只收 nav 横向间距（clamp 值域 12–22 → 恒 10），**不动字号、不动文案、不动项数**。 依据：6 个 gap 由 ~20px 收至 10px 可省 ~60px ⇒ 覆盖实测最大缺口 66px（1335 档省 52px、覆盖 47px 缺口）。 改后实测：1335–1920 全档 nav 溢出 ≤ 0（8/8 项单行可见，零折行）。 ★ S69 修正：门槛 1335 → **1400**。LOGO 主名 40→52px 后 logo 实测 384 → 451px（+67px）， 1335–1399 单行已容不下，回落两行制（承接块见上方 769–1399）。≥1400 仍为单行 + gap 10。 */ @media (min-width:1400px){ /* ★ S69：logo 384 → 455px（+71px）后，本档 nav 实测溢出 65px。 关键：**溢出是常数**（1400/1440/1532/1920 全为 65px）——容器有 max-width， 视口再宽也不给导航更多空间 ⇒ 调门槛无用，只能在本档压缩横向占位。 处置（比照 993–1160 同一套压缩口径，不动排序/项数/文案/字号下限）： header gap 24→12、nav gap 10→6、nav a 15→14px 预计省 24＋24＋30 = 78px > 缺口 65px（余量 13px）。实测见改动后复跑。 */ .header .container{gap:12px} .nav{gap:6px} .nav a{font-size:14px} } /* 🔴 1161–1300（媒体宽口径，按 innerWidth 实际覆盖 ≈1161–1315）：顶栏在此带放不下时压缩 —— 实测该带 nav 实得 572.87–652.87px、8 项需 ~652.88px（缺口 0.02–80px），若不处理＝新建一条折行带（P0 级）。 处置：比照上面 993–1160 档**同一套压缩口径**（gap 22→10、字号降一档至辅助下限 13px、CTA 同收）， 把"会折行"的区间压掉；不改排序、不减项、不动 ≤1160 横滚带（相公未裁项）。 实测（改后复测）：该带余量 ≥31.93px，8 项全单行。 */ @media (min-width:1161px) and (max-width:1300px){ .nav{gap:10px} .nav a{font-size:13px} .header-cta{padding:10px 12px;font-size:13px} } /* 🔴 S-20260922-63 · 页边距加大（相公：「页边距要加大，要像预览一样的效果」） 根因＝窄屏档容器撑满视口时，衬托"预览"的大留白只剩 padding 一项 （预览档容器被 --gutter 1200 居中，光居中就带来 120+px 外侧留白；窄档容器=视口宽，居中量=0）。 作用域刻意**只取 577–992**（相公真实窗口带 800–1080 的下半 + 其测量带 872–937），理由： ① 相公要看的就是这一段，993 以上他本就看到"预览式"大留白，无需动； ② 993+ 不动 ⇒ 零附带：首屏 H1（≥1024 才 nowrap）余量不损、#cases 屏距 1440 档零位移、 1161–1300 导航余量（仅 ~32px）不受挤。 口径：容器 padding 48–64 → **64–88**（外侧留白：800 档实测 +16.0px/侧；945 档 +12px/侧、6.77%； 992 档 +9.9px/侧。上限 88 需视口 ≥1354px 才取到，本档实际取 64（=clamp 下限）， 即 577–1353 档恒为 64px——写上限只为与 ≥993 档口径衔接，不追求取到）。 顶栏单独回退原留白——顶栏可读宽直接决定导航是否折行（P0），不与正文抢空间； ≤1160 已由 (max-width:1160) 条锁死"单行不可折＋横向滚动"，此处不新增折行风险。 */ @media (min-width:993px) and (max-width:1299px){ .container{padding-inline:clamp(48px,5.5vw,64px)} /* 原口径·一字不动 */ } @media (min-width:577px) and (max-width:992px){ .container{padding-inline:clamp(64px,6.5vw,88px)} .header .container{padding-inline:clamp(48px,5.5vw,64px)} } @media (max-width:768px){ section{padding:64px 0} section[id]{scroll-margin-top:132px} /* 两行顶栏更高，锚点留更多余量（S69：logo 图形 42→54px 后顶栏实测 126px ⇒ 余量须 ≥126） */ main{scroll-margin-top:132px} h1{font-size:34px}.hero h1{font-size:34px}h2{font-size:27px} .trust .grid{grid-template-columns:1fr;gap:20px} .products .grid,.faculty .grid,.news .list{grid-template-columns:1fr} /* S63：三区(方法/测评/案例)移出本档，改由 577–799 降 2 列、≤576 降 1 列 */ .match .grid,.culture .cfacts,.culture .cstats,.culture .cstance{grid-template-columns:1fr} /* S20：配对区/文化段 768 档单列 */ .footer .top{grid-template-columns:1fr} /* ---- 顶栏改两行：第一行「品牌 + CTA」，第二行「全部 7 项导航横向滚动」---- 替代此前"≤768 把整条导航隐藏掉"的写法（那等于违反「顶部链接别消失」）；纯 CSS、零新增脚本。 横向滚动条由 scrollbar-width:none 收掉，右侧渐隐遮罩提示"还能往右滑"。 */ .header .container{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:0;padding-inline:24px;gap:10px} /* 🔴 S69 关键修正：本档原先 `.logo{font-size:26px}` —— 相公真实视口 718 正落在此档， 故 S66/S69 把主名放大到 52px **对他完全无效**（他看到的始终是 26px）。 这正是他反复说「连 LOGO 都没有变大」的真因（改的是 769+ 档，他不在那一档）。 处置：本档改用 clamp，上限对齐 769+ 档量级、下限保留原 26px： 577 → 36.9px（logo 宽 ≈344，+CTA 170 +gap10 = 524 < 可用 529 ✓ 余量 5px） 718 → 45.9px（logo 宽 ≈380，+170+10 = 560 < 可用 670 ✓）← 相公实际取值 768 → 46.0px（clamp 上限） ≤576 档仍由下方独立规则压到 22px（手机档口径不动）。 */ .logo{order:1;font-size:clamp(26px,6.4vw,46px)} .logo .lb-org{font-size:14px} /* S67：公司名**保留**（不再 display:none） */ .header-cta{order:2;margin-left:auto} /* 原靠 .nav{margin-left:auto} 撑右，nav 改行后须 CTA 自己靠右 */ .nav{ order:3;display:flex;flex:0 0 100%; gap:8px;margin:0 -24px;padding:0 24px 8px; overflow-x:auto;overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%); } .nav a{ flex:0 0 auto;scroll-snap-align:start;display:inline-flex;align-items:center; min-height:44px;padding:9px 14px;font-size:14px; border:1px solid var(--line);border-radius:var(--radius); } /* ≤768 导航为药丸卡：当前段高亮改用"深金描边＋谈金底"（不用下划线，下划线会落到药丸之外）。 🔴 S-71：原 文字色白（#fff） / border-color:var(--gold) / rgba(232,179,59,.14) —— 三值全是为深底设的。 改后 color:--navy / border-color:--gold-ink（状态描边需 3:1，金在白底仅 1.92:1）/ background:--gold-soft。 药丸底 --gold-soft(#FBF1DC) 上是 --navy 字（≈13.7:1），是本档最强的一档对比，当前项一眼可辨。 */ .nav a.is-current{color:var(--navy);border-color:var(--gold-ink);background:var(--gold-soft)} /* S66：hero 单栏落点（由 ≤992 下移至此）——单列时必须把子项的具名栅格位一并复位， 否则 grid-area 的具名线会生成隐式轨道，把首屏内容挤窄 */ .hero .container{grid-template-columns:1fr;grid-template-areas:none;min-height:auto;gap:24px} .hero-title,.hero-copy,.hero-media{grid-area:auto} /* 移动端首屏：H1 跨栏置顶 + 新增价值主张/价格行后，首屏会比旧版高；收内边距与行距把它压回 1000px 以内 */ .hero .container{padding-top:40px;padding-bottom:40px;gap:24px} .hero h1{margin:10px 0 12px} .hero-value{font-size:18px;margin-top:12px} /* 移动端首屏：压掉首屏大图高度，避免"一屏半才看见信任条"（P1：移动端 hero ≤1000px）。 🔴 S-20260922-71r2（营销甲方必改⑤ 连带）：320px → **356px**。 原值 320 会把盒 AR 钳成 1.75（560/320），与图 AR 1.5741 不符 ⇒ contain 左右留白 56.3px， 实绘缩放掉到 37.04%。356px ＝ 560/1.5741，即"盒 AR 恰等于图 AR"的临界高度，至此留白归零、 实绘缩放回到 41.17%（营销目标值 41.2%）。实测 718 档 hero 高 986px，仍守 ≤1000px 的 P1 上界。 */ .hero-media img{max-height:356px} /* S66：底部固定条随 .float-cta 一并删除（相公：留一个即可）；保留少量底部余量防页脚末行贴边 */ body{padding-bottom:24px} } @media (max-width:576px){ /* S58：恢复旧站页边距口径——旧版官网全档 .container padding 0 24px（style.css.bak-20260820 可考）， 此前压到 16px 致手机端"满屏贯"；恢复 24px，页边距大、不满屏贯。顶栏药丸横滚布局（-16px 技巧）不受影响 */ .container{padding:0 24px} .header .container{gap:8px;padding-inline:16px} .nav{margin:0 -16px;padding:0 16px 8px} .logo{font-size:22px} .logo .lb-org{font-size:13px} /* S67：公司名**保留**（不再 display:none） */ /* 360 档顶栏右留白仅 20px、无余量：CTA 降为 4 字「免费体检」（约 80px 宽），禁 8 字全称 */ .header-cta{padding:9px 12px;font-size:13px} .header-cta .cta-full{display:none} .header-cta .cta-mini{display:inline} h1{font-size:29px} .hero h1{font-size:29px} /* S63：三区（方法论/测评/案例）在手机档降 1 列（承接 577–768 的 2 列，避免 2→1 直跳） */ .method .bamai,.assess .grid,.cases .grid{grid-template-columns:1fr} .footer .qr-grid{gap:12px} .footer .qr-item{width:84px} .footer .qr-item img{width:84px;height:84px} } /* ===================== 四星图独立图页（/starmap/） ===================== */ /* 目标：让《八脉组织自动化运营系统四星图202609》**在任何档位都能被读清**—— 不是"点开新窗口看原图"，而是站内有一张专门装它的页。 ① **宽度**：上限 = 全站版心令牌 `--gutter`（1200px），**不新造第二套宽度**；下限 = `100% − 32px` （左右各 16px 页边）。窄档把可用宽**全给图**——这是"读清"的物理前提：图不像文字可以折行， 少 1px 视口宽就少 1px 实绘宽。 ⚠️ 不放在 `.container` 内：577–992 档 `.container` 的 `padding-inline:clamp(64px,6.5vw,88px)` 在 718 档实取 **64px/侧** ⇒ 内容宽仅 590px ⇒ R=0.434 **跌破 0.47**（可读性阈值）。本页图另起 `.starmap-figure` 自持页边（16px），**文字仍走 `.container`**，故版心制度未被破。 ② **实测**（自跑探针，证据见本地改版留痕）： 1532 档 图实绘 **1200px** ⇒ R = 0.882 ≥ 0.80 ✔（f_main = 17.65px ≥ 12px ✔） 718 档 图实绘 **686px** ⇒ R = 0.504 ≥ 0.47 ✔（f_main = 10.09px；`20×R<12` ⇒ 放大通道**必需**） ③ **放大通道**：纯 CSS 真缩放（`width` 放到原图自然宽 1360px ＋ 视口容器 `overflow-x:auto`）， **不裁切**（红线：禁 `object-fit` 裁切式放大）且**不离开本站**（不许 `target="_blank"` 把用户甩出去）。 放大态 R_zoom = 1360/1360 = 1.0 ⇒ f_main = 20px ≥ 12px，可达标。 */ .starmap-head{max-width:52em} .starmap-head p{margin-top:16px;font-size:17px;line-height:1.7;color:var(--muted)} .starmap-head .cue{font-size:var(--fs-aux);font-weight:600;color:var(--teal-ink)} .starmap-figure{width:min(calc(100% - 32px),var(--gutter));margin:20px auto 0} .starmap-viewport{display:block;border-radius:var(--radius-lg)} .starmap-viewport picture{display:block} .starmap-img{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--line); border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)} /* 放大开关：`` 走 `.sr-only`（保持**可聚焦**——不用 display:none，否则键盘不可达）； 视觉开关由 `