/* ============================================================ 设计令牌 */ :root{ --geo-primary:#615ced; --geo-primary-strong:#4e4abe; --geo-primary-soft:#efeffd; --geo-primary-line:rgba(97,92,237,0.26); --geo-ring:rgba(97,92,237,0.2); --geo-on-primary:#ffffff; --geo-ink:#0d1526; --geo-fg:#3c4a5e; --geo-muted:#6c7c92; --geo-line:rgba(13,21,38,.09); --geo-line-2:rgba(13,21,38,.16); --geo-bg:#f5f7fb; --geo-surface:#ffffff; --geo-surface-2:#f8fafd; --geo-footer-bg:#0c1526; --geo-footer-fg:#dbe4f0; --geo-footer-muted:#8fa0b8; --geo-sh1:0 1px 2px rgba(13,21,38,.06); --geo-sh2:0 10px 30px -14px rgba(13,21,38,.18); --geo-sh3:0 30px 70px -34px rgba(13,21,38,.28); /* ---- 深色带（job394）：首屏带 / 收尾 CTA 带共用 ---- 这一组**不直接用**，而是在带的作用域里被映射回 --geo-* （见 .geo-hero）。 这样做的好处：带内所有既有组件（eyebrow 胶囊、按钮、面包屑、插画） 一行都不用改就自动反色。 */ --geo-band-primary:#9793f3; --geo-band-primary-strong:#6e69ee; --geo-band-primary-soft:rgba(97,92,237,0.16); --geo-band-primary-line:rgba(97,92,237,0.44); --geo-band-on-primary:#0b1424; --geo-band-bg:#0b1424; --geo-band-bg2:#121d33; --geo-band-ink:#ffffff; --geo-band-fg:#c8d3e3; --geo-band-muted:#8d9fb8; --geo-band-line:rgba(255,255,255,.13); --geo-band-line-2:rgba(255,255,255,.22); --geo-band-surface:rgba(255,255,255,.06); --geo-band-surface-2:rgba(255,255,255,.035); --geo-band-sh2:0 12px 34px -16px rgba(0,0,0,.6); --geo-radius:16px; --geo-radius-sm:11px; /* job451b：「整个页面两边各自再往外扩展三分之一」——总宽 ×5/3。 页头/导航整页容器 与 正文卡片容器 同步放大，两栏/网格按容器自然 重算；job451c：文本行长 37em→52em 同步放宽（容器 ×5/3 后 37em 只占 ~59%，右侧大片留白——用户实测截图标红），52em ≈ 832px。 */ --geo-max:1867px; --geo-measure:1433px; /* 正文文本列宽（job391 定，job451c/job451d 逐次放宽）。与 --geo-measure 分成两个变量是刻意的：卡片要整幅才装得下表格与图示，而**一行字**装 整幅就太长 —— 中文一行过长，眼睛从行尾找回下一行行首就会串行。 表格 / 数据卡 / 流程图不受此限（它们本来就需要宽度），单独放行。 60em ≈ 60 个汉字（营销官网的上限区间；仍守住「文本列 < 卡片容器」 的 job391 S.1b 不等式：960px < 1433px）。 */ --geo-measure-text:60em; --geo-font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC", "Hiragino Sans GB","Microsoft YaHei",Helvetica,Arial,sans-serif; } /* ============================================================ 基础 */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;font-family:var(--geo-font);font-size:16px;line-height:1.9; background:var(--geo-bg);color:var(--geo-fg); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* 顶部一层极淡的主色光晕：整页立刻从「白纸」变成「有设计」。 用 radial-gradient 而不是图片，导出包不增加任何文件。 */ body::before{content:"";position:fixed;inset:0 0 auto;height:420px;z-index:-1; background:radial-gradient(760px 340px at 50% -140px,var(--geo-primary-soft),transparent 72%)} a{color:var(--geo-primary);text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%;height:auto} ::selection{background:var(--geo-primary-line)} :focus-visible{outline:2px solid var(--geo-primary);outline-offset:3px;border-radius:6px} .geo-wrap{max-width:var(--geo-max);margin:0 auto;padding:0 24px} /* ============================================================ 页头 */ .geo-header{position:sticky;top:0;z-index:50; background:var(--geo-surface);border-bottom:1px solid var(--geo-line)} /* backdrop-filter 让吸顶栏「透出」下面的内容 —— 现代官网的默认观感。 不支持时退化成实心表面色，不影响可用性。 */ @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .geo-header{background:color-mix(in srgb,var(--geo-surface) 82%,transparent); -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px)}} .geo-head{display:flex;align-items:center;gap:20px;min-height:70px} .geo-logo{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none; flex:0 0 auto} .geo-logo:hover{text-decoration:none} .geo-logo-mark{width:38px;height:38px;border-radius:11px;flex:0 0 auto; display:grid;place-items:center;font-size:18px;font-weight:800;line-height:1; color:var(--geo-on-primary);letter-spacing:-.02em; background:linear-gradient(135deg,var(--geo-primary),var(--geo-primary-strong)); box-shadow:0 6px 16px -8px var(--geo-primary)} .geo-logo-text{display:flex;flex-direction:column;line-height:1.28} .geo-logo-text b{font-size:17px;font-weight:700;color:var(--geo-ink); letter-spacing:-.01em;white-space:nowrap} .geo-logo-text span{font-size:11.5px;color:var(--geo-muted);white-space:nowrap} .geo-nav{display:flex;align-items:center;gap:2px;flex:1 1 auto; overflow-x:auto;scrollbar-width:none} .geo-nav::-webkit-scrollbar{display:none} .geo-nav a{padding:8px 13px;border-radius:999px;font-size:14.5px;color:var(--geo-fg); white-space:nowrap;transition:background .16s,color .16s} .geo-nav a:hover{background:var(--geo-primary-soft);color:var(--geo-primary); text-decoration:none} .geo-nav a.is-active{color:var(--geo-primary);font-weight:600; background:var(--geo-primary-soft)} /* ============================================================ 按钮 */ .geo-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:11px 22px;border-radius:999px;font-size:15px;font-weight:600;line-height:1.2; border:1px solid transparent;white-space:nowrap; transition:transform .16s,box-shadow .16s,background .16s,color .16s} .geo-btn:hover{text-decoration:none;transform:translateY(-1px)} .geo-btn-primary{background:linear-gradient(135deg,var(--geo-primary), var(--geo-primary-strong));color:var(--geo-on-primary); box-shadow:0 10px 24px -12px var(--geo-primary)} .geo-btn-primary:hover{box-shadow:0 14px 30px -12px var(--geo-primary)} .geo-btn-ghost{background:var(--geo-surface);color:var(--geo-ink); border-color:var(--geo-line-2);box-shadow:var(--geo-sh1)} .geo-btn-ghost:hover{border-color:var(--geo-primary); color:var(--geo-primary)} .geo-btn-sm{padding:9px 17px;font-size:14px} .geo-head-cta{flex:0 0 auto} /* ============================================================ 主体骨架 */ /* overflow-x:clip 是首屏通栏深色带（100vw）的兜底：vw 把竖向滚动条的宽度 也算进去 ⇒ 右侧会多出十几像素的溢出。用 clip 而不是 hidden —— hidden 会把这个元素变成滚动容器、并把 overflow-y 一并改成 auto， 而 clip 不会（另一轴仍是 visible）。 */ /* job428：padding-bottom 76px 撤掉 —— 收尾 CTA 带（.geo-shout）就在
里、页脚紧随其后，这 76px 是两者之间那道白缝的根源（用户要求 「两部分中间不要留白」）。与文章的间距由 .geo-shout 自己的 margin-top 承担。 */ .geo-main{padding:0;overflow-x:clip} .geo-article{max-width:var(--geo-measure);margin:0 auto;padding:0 24px} /* 🔴 job478：以上三条「整页放宽到 --geo-max」的规则**已撤销**。 用户实测（四张截图对照）：常见问题页两侧有明显留白，而资讯知识 / 客户案例 / 联系我们三页的内容几乎顶到左右边缘。 量尺（`.workbuddy/tmp/_measure478.cjs`，视口 2000px，同量尺同视口）： 页面 正文幅 左留白 右留白 faq（基准，走 .geo-article 默认） 1433px 284 283 contact / cases / insights 1867px 67 66 诉求是「参考常见问题页的左右距离」，所以这三页回到与其余页**同一个** 量尺（`--geo-measure` 1433px）。好处不只是对齐：从今往后「五页正文的 左右距离」只有**一处**定义（紧邻上面那条 `.geo-article`），不会再有 两个数各自漂移。 三个模板的专属版式一个都没少（实测：改后逐页量 column 数）： cases 仍 2 列大卡 / insights hub 仍 3 列卡 / contact 仍「1fr + 400px 表单」两栏 —— 网格全是 `repeat(N,minmax(0,1fr))`，与容器宽度无关， 只有 860px 断点才会叠列。当初放宽的动机（contact 的 lead 左栏被 860px 文章量尺挤到 ~20 字/行）在 1433px 下已不成立：正文卡内容宽 1385px，lead 左栏仍有 ~900px。 恢复锚点（万一以后又要单独放宽某一页，一行即可；把 <页面类型> 换成 contact / cases / insights 就是 job440/443/444 的原值）： .geo-article.geo-tpl-<页面类型>{max-width:var(--geo-max)} ⚠️ 这里刻意写成占位形式而不是三条真规则：字符串比对式的守卫会把注释里 的原文当命中（job395 第 7 条的「必须先剥 CSS 注释」）。 */ /* ============================================================ 头图区 job394：首屏从「底色上的一段文字」改成**通栏深色带**。 参考站（xunzhiyinqing.com）六页的首屏一律是深色带（bg-ink-900）， 整页节奏随之变成「深色首屏 → 浅色正文卡 → 深色收尾 → 深色页脚」—— 这是它「一眼像官网」的主要来源，不是靠更多图片。 ⚠️ 三个必须同时成立的点，缺一个就是静默事故： ① **宽度不变**。深色只是 ::before 画出来的一层通栏背景，.geo-hero 自己 仍然是 .geo-article 的 812px。宽度一变，右侧插画的 right:-4px 与标题的 max-width:57% 避让关系就全乱了（插画会跑到视口最右、离标题半个屏幕）。 ② **变量在带内整体反色**。深色带里若还用浅底那套 --geo-ink（深蓝字）， 标题就是深色字压深色底 —— 一片糊，且不报任何错。所以这里把 --geo-* 整组映射成 --geo-band-*（见 _band_tokens）。映射之后带内的 eyebrow 胶囊、按钮、面包屑、插画**一行都不用改**，自动变成浅色版本。 ③ **不产生横向滚动条**。100vw 含滚动条宽度 ⇒ 右边会多出十几像素； 靠 .geo-main 的 overflow-x:clip 兜住（用 clip 而不是 hidden： clip 不建立滚动容器，也不会把另一轴变成 auto）。 */ /* 🔴 job495：`display:flow-root` 不是装饰，是**必须**的。 首屏右侧的图片（见下面 .geo-hero-art）从 job495 起改成**浮动**， 浮动不建立「被包含」关系 —— .geo-hero 若还是普通块，图片会从带里 溢出去，::before 画的深色带就在图片底部之前结束了（`top:0;bottom:0` 量的是 hero 自己的边界）。flow-root 把浮动关在带内，带的高度才会 跟着图片长。页面上没有事实条的页（hero_facts 少于 2 条不输出）全靠 它兜底。 */ .geo-hero{position:relative;isolation:isolate;display:flow-root;padding:78px 0 62px} .geo-hero::before{content:"";position:absolute;z-index:-1;top:0;bottom:0; left:50%;width:100vw;margin-left:-50vw; /* 🔴 本轮：在纯色深带上叠两层极淡的光晕（右上白光 + 左下主色光）， 让首屏从「一片死黑」变成「有光源方向的设计带」，更贴近参考站 那种有质感的深色 hero。纯 CSS、零新增文件、不进正文、不影响任何 取数维度（Jaccard / 文本块 / 体检）。 */ background: radial-gradient(820px 360px at 82% -14%,rgba(255,255,255,.06),transparent 62%), radial-gradient(680px 320px at 4% 118%,var(--geo-band-primary-soft),transparent 58%), var(--geo-band-bg)} /* 带内整组反色（第 ② 点）。写在 hero 与 shout 共用的位置，两处一条带。 */ .geo-hero,.geo-shout{ --geo-primary:var(--geo-band-primary); --geo-primary-strong:var(--geo-band-primary-strong); --geo-primary-soft:var(--geo-band-primary-soft); --geo-primary-line:var(--geo-band-primary-line); --geo-on-primary:var(--geo-band-on-primary); --geo-ink:var(--geo-band-ink); --geo-fg:var(--geo-band-fg); --geo-muted:var(--geo-band-muted); --geo-line:var(--geo-band-line); --geo-line-2:var(--geo-band-line-2); --geo-surface:var(--geo-band-surface); --geo-surface-2:var(--geo-band-surface-2); --geo-sh2:var(--geo-band-sh2); } /* 插画的「卡片投影」在浅底上是 ink 的 5%；深色带上 ink 已变成白色 ⇒ 阴影会变成白光，卡片边缘像描了一圈发光边。带内单独压回黑色并加重， 深底上的投影本来也需要更重才看得出来。 */ .geo-hero .ga-card-shadow,.geo-hero .ga-quote-shadow{fill:#000;opacity:.24} /* 内页 hero 比首页紧凑一点（首页第一屏要「立得住」，内页要尽快进正文）。 job394 起所有页都是深色带，所以这里只调高度，不再叠底纹 —— 五页的区分改由「带内的事实条条数」与「正文区各自的版式」承担。 */ .geo-hero--about,.geo-hero--service,.geo-hero--faq,.geo-hero--contact{ padding:66px 0 54px} /* 头图插画（job391）/ 头图照片面板（job420） 内联 SVG 在正文抽取时被整块丢掉（``site_crawler.DROP_TAGS`` 里有 ``svg``）， 照片是空 div ⇒ 两者都不会把词数灌上去，也不会多算一个「有效文本块」。 宽视口才显示：窄屏把插画与标题挤在一起，比没有图难看得多。 🔴 **job495：从「绝对定位 + 以整个 hero 垂直居中」改成「浮动」。** 症状（用户附截图报障）：「预览图片正常显示，发布到线上图片盖住了下面的文字」 —— 客户案例页首屏事实条第 3、4 格被图片吃掉。 根因不是某一个数值调坏了，是**定位方式本身就允许重叠**： 绝对定位 ⇒ 图片不参与布局 ⇒ 它按 ``top:50% + translateY(-50%)`` 相对 **整个 .geo-hero**（含底部那条通栏事实条）居中。而图片高度是 ``width(38%) × 3/4``，视口一宽就线性长高（1440px 视口实测 526×395）， 内页文字区却只有 ~350px ⇒ 图片越过文字区、压到事实条上。 实测：960/1200 视口 0px，1440 起**每页都开始重叠**（首页 7px、内页 9px）， 客户案例页文字区最短，直接重叠 **36px**（第 3 格吃 174px、第 4 格吃 428px）。 ⚠️ 别再回到「按高度猜避让」的写法。job391 的旧注释写的是 「插画底部约 316px，而这条带在 460px 之下，实测不会与插画重叠」—— 那是**当期取数**，视口/文案一变就失效，且失效时一声不响（本次即如此）。 同理不要再写 ``max-height:calc(100% - <数字>px)``：那等于把「事实条有多高」 硬编码进来，事实条改成 2 行或 padding 一调就又是同一个 bug。 浮动是**结构性**的修法，三条不变量缺一不可： ① 图片回到文档流 ⇒ 比文字高时把后面的事实条**推下去**，几何上无法重叠； ② 事实条 ``clear:both`` 兜一刀（图片比文字矮时也保证整条在图片之下）； ③ .geo-hero 是 ``display:flow-root``（见上）把浮动关在深色带里。 另外 DOM 里图片必须排在事实条**之前**，否则 ② 的 clear 无处可清 （守卫 test_site_hero_overlap_job495.py 的 A.4 钉的就是这条顺序）。 ⚠️ `margin-bottom:30px` 是**间距的一半来源**，别删：clear 的间隙规则 （CSS 2.1 §9.5.2 clearance）会把事实条自己的 `margin-top:30px` **吃掉** —— 图片比文字高时，事实条的顶边正好落在图片的下外边缘上，两张贴在一起 （实测 1440px 视口、客户案例页：事实条顶边 = 图片底边 = 544，零间隙）。 把 30px 挪到图片的下外边距上，两种情形（图片更高 / 文字更高）的间距 才是同一个 30px。 */ .geo-hero-art{float:right;width:clamp(320px,38%,540px);aspect-ratio:4/3; margin:0 0 30px 24px; background-color:var(--geo-surface);background-size:cover;background-position:center; border-radius:20px;overflow:hidden;display:none;pointer-events:none} .ga-glow{fill:var(--geo-primary);opacity:.075} .ga-dot{fill:var(--geo-primary);opacity:.22} .ga-curve{fill:none;stroke:var(--geo-primary);stroke-width:3; stroke-linecap:round;opacity:.5} .ga-node{fill:var(--geo-surface);stroke:var(--geo-primary);stroke-width:3} .ga-card{fill:var(--geo-surface);stroke:var(--geo-line)} .ga-card-shadow{fill:var(--geo-ink);opacity:.05} .ga-title{fill:var(--geo-primary);opacity:.9} .ga-line{fill:var(--geo-line-2)} .ga-quote{fill:var(--geo-surface);stroke:var(--geo-primary-line);stroke-width:1.5} .ga-quote-shadow{fill:var(--geo-ink);opacity:.06} .ga-quote-bar{fill:var(--geo-primary)} .ga-quote-mark{fill:var(--geo-primary);opacity:.55} .ga-quote-line{fill:var(--geo-line-2)} /* job393 的新图形语言：五张头图插画共用（构图见 site_figure）。 全部走 CSS 变量 ⇒ 换主色时五张图一起变色，不需要重新生成任何东西。 */ .ga-rail{stroke:var(--geo-line-2);stroke-width:3;stroke-linecap:round} .ga-grid{stroke:var(--geo-line-2);stroke-width:1.5} .ga-route{fill:none;stroke:var(--geo-primary);stroke-width:2.5; stroke-dasharray:6 7;stroke-linecap:round;opacity:.75} .ga-ripple{fill:none;stroke:var(--geo-primary);stroke-width:1.5;opacity:.28} .ga-pin{fill:var(--geo-primary)} .ga-pin-core{fill:var(--geo-surface)} .ga-tile{fill:var(--geo-surface);stroke:var(--geo-line-2);stroke-width:1.5} .ga-tile-on{fill:var(--geo-primary-soft);stroke:var(--geo-primary);stroke-width:2} .ga-ring{fill:none;stroke:var(--geo-primary);stroke-width:2;opacity:.5} .ga-quote-stroke{stroke:var(--geo-primary);stroke-width:6;stroke-linecap:round} @media(min-width:960px){ .geo-hero-art{display:block} /* 给照片让出右侧空间。job424 取数（参考站同视口 1080px 实测）： 文字列 ~55%、照片 ~40% 贴右缘、中间 ~5% 呼吸缝 ⇒ 55+42=97，永不重叠。 之前文字 52% 配 44px 大标题，中文标题在窄列里逐字断行（「公 司」被拆开）， 文字块被撑得比照片高一倍，照片浮在中间 —— 这就是用户说的「不均匀」。 */ .geo-hero h1,.geo-hero .geo-lede,.geo-hero .geo-meta,.geo-hero .geo-cta, .geo-hero .geo-crumbs,.geo-hero .geo-eyebrow{max-width:55%} /* ⚠️ 这里原来还有一条 `.geo-hero-tight h1{font-size:clamp(26px,3vw,34px)}`。 它是**死的**：`.geo-hero-tight h1`（特异性 0,1,1）在文件后面还有一条同 特异性的规则（`.geo-hero-tight h1{font-size:clamp(27px,3.5vw,38px)}`）， 同特异性下**后面的赢**，媒体查询不改变这一点。job395 取数时实测 h1 在 960px 视口下是 33.6px（= 3.5vw），正好印证它没生效。与其留着让人误会， 不如删掉 —— 现在的紧标题字号统一由那一条规则负责（job395 已调大）。 */ } .geo-crumbs{font-size:13px;color:var(--geo-muted);margin:0 0 20px; display:flex;flex-wrap:wrap;align-items:center;gap:8px} .geo-crumbs a{color:var(--geo-muted)} .geo-crumbs a:hover{color:var(--geo-primary)} .geo-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px; padding:5px 13px 5px 10px;border-radius:999px;font-size:12.5px;font-weight:600; letter-spacing:.02em;color:var(--geo-primary);background:var(--geo-primary-soft); border:1px solid var(--geo-primary-line)} .geo-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%; background:var(--geo-primary);flex:0 0 auto} .geo-hero h1{font-size:clamp(28px,3.8vw,40px);line-height:1.28;font-weight:800; letter-spacing:-.022em;color:var(--geo-ink);margin:0 0 16px;text-wrap:pretty; /* job420：首屏 h1 渐变强调色（对齐参考站 h1 内含渐变 span）。白→主色的 渐变在深色带上仍清晰可读；用 background-clip:text，不新增任何标签/文本， 不影响正文抽取与文本块计数。-webkit- 前缀兼容主流内核。 */ background:linear-gradient(100deg,var(--geo-ink) 52%,var(--geo-primary)); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent} /* 长标题（见 hero_html 的长度判据）降一档字号：中文标题的字宽就是字号， 20 个字的标题按大字号排会溢出容器，被折成「…与选 / 型」—— 末行只剩一个字，比字小一点难看得多。 ⚠️ 这一档在 job395 提到过 clamp(34px,4.2vw,44px)（当时无照片、h1 要和 h2 拉开 1.34 比例）；job420 起右侧有照片、job424 用户实测「文字块过高、 照片浮在中间不均匀」⇒ 参考站同视口 h1 实测 ~35px，收到 clamp(30px,3.5vw,38px)（960px 下 33.6px，与 h2 30px 仍保持 1.12 比例， 层次感由深色带 + 渐变色承担，不单靠字号）。 */ /* job432 收尾校准：h1 提到 clamp(34px,4.2vw,44px)（960px → 40.32px）。 与 .geo-body h2(30px) 的比例 1.344，落在参考站 1.31 附近的 1.2–1.5 舒适区 —— 之前 clamp(30px,3.5vw,38px) 在 960px 只取 33.6px、比例 1.12，「标题不大、 正文不小」正是「没层次感」的一半（E.2a 卡的就是这条）。同特异性后者赢的死 规则已删（见上方注释），这条是文件里唯一生效的 .geo-hero-tight h1。 */ .geo-hero-tight h1{font-size:clamp(34px,4.2vw,44px)} .geo-lede{font-size:17.5px;line-height:1.85;color:var(--geo-muted); margin:0 0 20px;max-width:44em;text-wrap:pretty} .geo-meta{font-size:13.5px;color:var(--geo-muted);margin:0 0 26px; display:flex;flex-wrap:wrap;align-items:center;gap:10px} .geo-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0} /* 首屏关键事实条（job394，参考站首屏底部那一排可核验事实） 摆在一排按钮之下、深色带的底部：先给动作，再给凭据。 宽视口下**不受**上面那条 max-width:55% 的避让约束 —— 它是一条通栏横排， 挤在左半边就变不成「一排出仪表」了（这一排要占满整幅卡片宽度）。 🔴 **`clear:both` 是 job495 补的，不是可选项**：通栏意味着它会横穿首屏 右栏图片所在的横向区间，而图片是浮动的 ⇒ 只有 clear 能保证整条排在 图片之下。缺了它，图片比文字矮的页面上事实条会绕到图片旁边（实机表现 就是「文字被图片盖住」）。改这行前先看 .geo-hero-art 那段注释。 ⚠️ 每一格的值用 包住 ⇒
  • 直接子文本为空 ⇒ 不会被算成 「有效文本块」。这是刻意的，理由见 site_layout.hero_facts。 */ .geo-hero-facts{list-style:none;display:grid;clear:both; margin:30px 0 0;padding:26px 0 0; grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:18px 26px; border-top:1px solid var(--geo-line)} .geo-hero-facts li{position:relative;margin:0;padding-left:15px} .geo-hero-facts li::before{content:"";position:absolute;left:0;top:.34em; width:3px;height:1.6em;border-radius:2px; background:linear-gradient(180deg,var(--geo-primary),var(--geo-primary-strong))} /* ⚠️ 值字号 17px 是**按最长值反推**的，不是随手写的：一格宽约 183px （视口 960–1440 的 4 格都在 183 上下）、左侧竖条占 15px ⇒ 可用 ≈168px。 纯 ASCII 的粗体在 17px 下约 9.5px/字符 ⇒ 16 字符（`_HERO_FACT_VALUE_MAX` 正好也是 16）≈152px，放得下**一行**。第一版写 19px：16 字符的邮箱 `coospur@sina.com` 正好差几个像素放不下，被 `overflow-wrap:anywhere` 断成「coospur@sina.co / m」—— 第一屏最显眼的位置出现这种断词， 不报错、不掉分，只有人眼看得见。 */ .geo-hf-v{display:block;font-size:17px;font-weight:800;line-height:1.35; letter-spacing:-.02em;color:var(--geo-ink);overflow-wrap:anywhere} .geo-hf-k{display:block;margin-top:3px;font-size:12.5px;line-height:1.5; color:var(--geo-muted)} /* ============================================================ 正文卡 */ /* 正文放在一块白色面板上：页面底色是浅灰，正文是白卡 —— 这一步把 「文档」变成「网站」。hero 留在底色上，卡只包正文。 */ .geo-body{background:var(--geo-surface);border:1px solid var(--geo-line); border-radius:var(--geo-radius);box-shadow:var(--geo-sh2); padding:clamp(24px,4.4vw,54px)} /* 正文的「测量宽度」（job391 治密密麻麻的主力） 文本类元素收窄到 --geo-measure-text，**一个字都不删**就把每行字数 压进舒适区间；表格 / 数据卡 / 流程图 / 参考资料区放行，它们本来 就需要整幅宽度。 ⚠️ 用「直接子元素」选择器（> *）而不是给 p / h2 逐个写，是为了让 将来新增的块类型自动继承这条规则 —— 漏掉一个新块就等于留了一行 44 字。 */ .geo-body > *{max-width:var(--geo-measure-text)} .geo-body > ul.geo-facts, .geo-body > ul.geo-cards, .geo-body > .geo-table-wrap, .geo-body > .geo-flow, .geo-body > .geo-sources, /* job393 的页面版式容器也要放行：wrapper 会**打断**上面那条「直接子元素」 规则 —— 被包进去的

    不再匹配 .geo-body > *，会悄悄变回一行 44 字， job391 的成果被静默抹掉且没有任何报错。所以每个新容器都必须在这里 显式放行，靠它自己分栏把每一栏压窄（两栏各约 500px、卡片列约 390px， 都比 37em 更窄，所以不会再叠一层收窄）。 */ .geo-body > .geo-split, .geo-body > .geo-faq-grid, .geo-body > .geo-tint, .geo-body > .geo-dark, .geo-body > .geo-svc, /* job439：联系页「留需求」两栏 + 「到访」深色宽卡（.geo-visit 内还有 表格与照片，都需要整幅宽度；收窄成对地写在各自容器里）。 */ .geo-body > .geo-lead, .geo-body > .geo-visit, /* job443：cases 页「一行 2 个」网格要跨满正文幅（卡片列约 546px，远大于 37em 文本量尺），必须放行；两列各自内部再压窄，不会叠一层收窄。 */ .geo-body > .geo-case-grid, /* job444：资讯知识库 hub 的卡片网格要跨满正文幅（卡片列约 360px，远大于 37em 文本量尺），必须放行；两列各自内部再压窄，不会叠一层收窄。 */ .geo-body > .geo-hub-grid, /* job447：编辑推荐焦点横幅与卡片网格同幅（图 + 文两栏在 37em 里放不下） */ .geo-body > .geo-feat, /* job450：常见问题工作区（chips + 左栏导航 + 右栏问答卡）跨满正文幅 */ .geo-body > .geo-faqws, .geo-body > ul.geo-stats{max-width:none} /* job458：知识文章详情页「文字贴左 + 左右等距」（替代 job457 的居中方案） 撤掉 job457 的 margin 左右 auto（用户改选贴左）；改为让 insights 模板的 正文文本列**直接填满正文卡**（max-width:none），文字左对齐、离卡片左右 边界各约 78px 等距。预览视口(~960px)下即约 52 字/行的舒适列宽。 仅作用于 geo-tpl-insights（hub 与详情共用该类，详情页是实测反馈来源）； 其余页面保持 job451c/d 的 60em 窄列 + 贴左（用户未要求改，且 S.1a 守卫 限定量尺 ≤60em，不能全局放大）。 */ .geo-tpl-insights .geo-body > *{max-width:none} /* 深浅色带内的子元素在同模板下同样填满，避免带内文字右侧再空一条 */ .geo-tpl-insights .geo-tint > *, .geo-tpl-insights .geo-dark > *{max-width:none} /* ============================================== 模块头（job395） job391 治「正文内部」的节奏、job393 治「五页骨架」、job394 治「全站通栏」。 这一组治的是**每个 h2 模块内部**的层次与留白：用户原话是「还是字太密了， 没有结构和层次感……一堆字堆在那里」。 取数（`.workbuddy/tmp/_probe-h395.cjs`，同视口同量尺量参考站与本地产物）： 指标（960px） 参考站 我们 差距 模块内上下留白 80/80px 62/62px −23% 模块之间留白 160px 96px −40% h2 字号 32px 24px −25% h1 字号 42px 33.6px −20% 模块头部 眉标+标题+导语 只有标题 缺两段 段落与段落之间 109px（块间） 20px −82% 整页高度 12699px 8110px −36% 参考站每个模块是 `

    `：96px 内边距 + 相邻模块 192px 留白 + 隔块换浅底（斑马带）。我们的页面里 h2 全是 `.geo-body` 的 直接子元素，模块在 DOM 上不存在 —— 补容器的代价与收益算过（见 site_layout 的「模块头」一节：Jaccard 水位 0.889，只够一个共用类）， 所以改成**不加容器、不加 class**，用 96px 留白 + 眉标序号 把模块头做成参考站那套三段式：眉标 → 大标题 → 导语。 ⚠️ **job438 撤线收紧**：用户反馈「都去掉横线，间距紧凑」——分隔线 （border-top）已删、模块间距 96→72px（仍 ≥ 段间 36px 的 2 倍）、 线下 padding 24→0。窄屏 64→48px。 ⚠️ 眉标用的是**首屏分类小标签那一个 class**（`.geo-eyebrow`），这里 只是把它的外观在正文里改写成「细线 + 序号」。五页的 class 集合因此 一个字都没变 —— 上面那条 Jaccard 预算就是这么省下来的。 🔴 作用域必须是**后代**（`.geo-body .geo-eyebrow`），不能写成直接子 （`.geo-body > .geo-eyebrow`）。**实测**：关于我们首段是两栏版式， 整段被包进 `.geo-split-main`，那一个模块头跟着进去 —— 用 `>` 的话 它不命中，退回首屏的胶囊形态（带底色的药丸 + 圆点），于是同一页里 01 是药丸、02..10 是「细线 + 序号」。不报错、不掉分，只有人眼看得见， 而且正好长在「没有层次感」那一处。后代选择器让「嵌套几层都命中」 变成**结构性成立**，而不是靠一条断言去追。 */ .geo-body .geo-eyebrow{display:block;margin:72px 0 10px;padding:0; background:none;border:0;border-radius:0;font-size:12px;font-weight:800; letter-spacing:.16em;line-height:1.1;color:var(--geo-primary); font-variant-numeric:tabular-nums} /* ⚠️ 下间距 12px 是**截图看出来的**：12px 的序号（行高 1.1 ⇒ 13px）紧贴 30px 的 标题时，两者在视觉上黏成一团 —— 数值上「有 0 间距」不报错、不掉分，只有 人眼看得见。序号是「这一块是第几模块」的引导，不是标题的一部分。 */ /* 首屏那个胶囊小圆点在正文里不要：正文模块头不带圆点（job438 起也不再带线）。 */ .geo-body .geo-eyebrow::before{display:none} /* 第一个模块上面不加线与留白（它紧接定义句或首屏）。 ⚠️ **判据里必须带上「两栏容器本身是不是 .geo-body 的第一个子元素」**， 不能只写 `.geo-split-main > .geo-eyebrow:first-child` —— 后者是 「两栏里的第一个元素」，而两栏几乎总是排在定义句后面，那时 96px 的 模块间距是**必须留着**的（去掉会让模块头贴上上一段）。手工构造的 无定义句场景（`render_blocks([heading, p, p], layout="about")`）才会 命中这一条，两种形态都要能命中。 */ .geo-body > .geo-eyebrow:first-child, .geo-body > .geo-split:first-child > .geo-split-main > .geo-eyebrow:first-child{ margin-top:0;padding-top:0;border-top:0} /* ============================================== 首页斑马带（job400） 参考官网的模块是「浅灰圆角面板 + 卡片网格」的形态；首页模块几乎全是 卡片网格，隔节铺一层 --geo-surface-2 圆角面板后，模块边界扫视可辨。 容器由 site_layout.section_wrap 决定（仅首页、隔节、第 0 节不铺）。 🔴 两条铁律（都是 job395 的实测坑，别再踩）： ① wrapper 会打断 `.geo-body > *` 的收窄规则 ⇒ 放行（上面 max-width:none 那组已加 .geo-tint）与收回（`.geo-tint > *`）必须**成对**，否则带内 正文静默变回一行 44 字； ② 带内首个模块头若保留 96px 上间距，灰底顶部会多出一大段空白 ⇒ :first-child 清零（与 B.9 同款判据）。模块间距由面板自身的 margin + 内边距承担。 ⚠️ 面板是内容宽的圆角卡片，**不做** 100vw 全出血 / 负 margin 顶边： .geo-body 的 padding 是 clamp()，窄屏还有单独档（22px 18px）， 硬编码负 margin 必有一档溢出。 */ /* 🔴 本轮：选择器从 ``.geo-body > .geo-tint`` 改成 ``.geo-tint``（后代/通用）。 因为 geo-tint 现已扩到所有页面，而关于我们首段是**两栏版式** （整段被包进 ``.geo-split-main``），那里的 geo-tint 不是 ``.geo-body`` 的直接子元素 —— 用 ``>`` 会静默失配、灰底整块消失、只剩一个裸 div， 正好长在「没有层次感」那处。改成通用选择器后嵌套几层都命中，变成 **结构性成立**。 */ .geo-tint{background:var(--geo-surface-2); border:1px solid var(--geo-line);border-radius:var(--geo-radius); padding:18px 34px 26px;margin:40px 0; box-shadow:var(--geo-sh1)} .geo-tint > *{max-width:var(--geo-measure-text)} .geo-tint > .geo-eyebrow:first-child{margin-top:0;padding-top:0;border-top:0} /* ============================================== 页面模板差异（job406） 不同页面走不同模板：zebra 模板（home/about/contact/insights/cases）保留 geo-tint 斑马带，plain 模板（service/faq / 通用 article）不套斑马带、靠各自 内容版式区分。这里再给每套模板加一点**页面专属**的视觉标记，让「这是另一套 模板」一眼可辨。 ⚠️ 这些规则全部挂在 ``article.geo-tpl-*`` 上，不引入任何新 HTML class， 因此不影响 job393 的 Jaccard 差异化契约（_body_classes 只取 geo-body 内 容，article 上的类本就不计入）。 */ /* 服务与产品：能力矩阵大卡顶部加主色强调线，强化「卡片矩阵」观感 */ /* 服务与产品：feature row 卡片加一层柔影，呼应「能力矩阵」卡片质感 （媒体区自身的渐变已用主色，见 .geo-feature-media）。 */ .geo-tpl-service .geo-features > li{box-shadow:var(--geo-sh1)} /* 常见问题：双列问答的左缘主色竖条 + 更大的 Q 角标，强化「一问一答」辨识度 */ .geo-tpl-faq .geo-faq-grid > .geo-faq-item{border-left:3px solid var(--geo-primary); padding-left:18px} .geo-tpl-faq .geo-q{font-size:18px} /* 关于我们：企业档案卡主色描边，呼应「这是一家主体」的档案感 */ .geo-tpl-about .geo-profile{border:1px solid var(--geo-primary); box-shadow:var(--geo-sh1)} /* 联系我们：渠道卡顶线主色 */ .geo-tpl-contact .geo-channels > li{border-top:2px solid var(--geo-primary)} /* ============================================== 服务页 feature row（job435 → job451） 参考站服务模块是「大图一侧 + 信息面板一侧」的整卡行：药丸序号 / 标题 / 主色副标 / 描述 /「服务模块」「适用场景」两组标签胶囊 / 双 CTA 按钮。 偶数行图在左、奇数行图在右（.geo-svc-flip），与参考站一致。 job451 对齐参考版式：图**不再出血拉伸满卡** —— 卡内 padding 24 留白， 图片内嵌圆角定高（340px）顶对齐；标题加大加粗；「适用场景」胶囊换主色 软底（g1）；次按钮改中性描边（白底灰线墨字）。 ⚠️ .geo-svc 是 .geo-body 直接子元素 ⇒ 已进上面的 max-width:none 放行组， 并用 .geo-svc > * 收回（成对）；行内文字由 grid 轨道自然压窄。 药丸/副标/按钮都是行内 span（sr 保真，见 site_builder）。 */ .geo-svc{display:grid;grid-template-columns:minmax(260px,42%) 1fr;gap:24px; background:var(--geo-surface);border:1px solid var(--geo-line); border-radius:16px;padding:24px;box-shadow:var(--geo-sh1);margin:32px 0} .geo-svc > *{max-width:none} .geo-svc-flip{grid-template-columns:1fr minmax(260px,42%)} .geo-svc-flip .geo-svc-media{order:2} /* job451e：图片改「随行拉伸」—— 定高 340px 在文本列更高时（服务模块/ 适用场景标签多）图片下方会空出一大截（用户实测截图）。改为 min-height 兜底 + grid 默认 align-self:stretch 撑满行高，图片与文本列始终等高。 */ .geo-svc-media{min-height:340px;border-radius:10px; background-size:cover;background-position:center} /* job451e：节奏统一由容器 gap 控制 —— 子元素外边距全部归零，杜绝 通用规则（p+p 段距 / ul 外边距）渗进来造成「组间距忽大忽小」。 */ .geo-svc-body{padding:0;display:flex;flex-direction:column;gap:9px} .geo-svc-body > *{margin:0} .geo-svc h2{margin:0;font-size:26px;font-weight:800;line-height:1.3; padding-top:0;border-top:0} .geo-svc-chip{display:block;box-sizing:border-box;width:100%; background:var(--geo-primary-soft);color:var(--geo-primary-strong); font-size:13px;font-weight:600;line-height:1;padding:7px 14px; border-radius:6px} .geo-svc-name{display:block} .geo-svc .geo-svc-desc{margin:0;font-size:14px;color:var(--geo-muted); line-height:1.8} .geo-svc-sub{display:block;color:var(--geo-primary-strong);font-weight:600; font-size:14px;line-height:1.6} .geo-svc-tlabel{display:block;font-size:13px;font-weight:600; color:var(--geo-ink);letter-spacing:.02em;margin-bottom:5px} .geo-svc-chips{list-style:none;margin:0;padding:0;display:flex; flex-wrap:wrap;gap:8px} .geo-svc-chips li{background:var(--geo-surface-2);border:0; border-radius:6px;padding:6px 12px;font-size:13px;font-weight:500; color:var(--geo-ink);line-height:1.4} .geo-svc-g1 .geo-svc-chips li{background:var(--geo-primary-soft); color:var(--geo-primary-strong)} .geo-svc-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .geo-svc-btn{display:inline-flex;align-items:center;justify-content:center; background:var(--geo-primary);color:#fff;font-size:13.5px;font-weight:600; padding:10px 18px;border-radius:8px;line-height:1} .geo-svc-btn-alt{background:var(--geo-surface);color:var(--geo-ink); border:1px solid var(--geo-line)} /* ============================================== cases 页行业大卡（job442 → job443） 参考站行业版式：通栏封面照在上，卡体「标题+等级 chip / 典型诉求 / 可承接的服务模块（两列勾选清单）/ 合作客户｜效果数据 双栏页脚」。 job443：连续行业大卡整批包进 `.geo-case-grid`（一行 2 个），每张卡再套 `.geo-case-cell`（含眉标）。所以 .geo-case **不再**是 .geo-body 直接子元素 —— 宽度由网格栏宽决定（.geo-case-grid 已进 max-width:none 放行组）， 大卡本身不出血，出血的是卡内封面照（卡内 overflow:hidden 裁掉圆角）。 勾选图标是纯 CSS mask（无文本节点 ⇒ li 计数/逐字保真不受影响）。 */ .geo-case{margin:0;border:1px solid var(--geo-line);border-radius:16px; background:var(--geo-surface);overflow:hidden; box-shadow:0 1px 2px rgba(15,23,42,.04)} .geo-case-media{height:300px;background-size:cover;background-position:center; background-color:var(--geo-surface-2)} .geo-case-media svg{width:100%;height:100%;display:block} .geo-case-body{padding:22px 26px 24px;display:flex;flex-direction:column; gap:16px} .geo-case-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px} .geo-case h2{margin:0;font-size:22px;line-height:1.35;padding-top:0; border-top:0} .geo-case-chip{display:inline-flex;align-items:center; background:var(--geo-primary-soft);color:var(--geo-primary-strong); font-size:12px;font-weight:600;line-height:1;padding:6px 11px; border-radius:999px;white-space:nowrap} .geo-case .geo-sr{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap} .geo-case-tlabel{display:block;font-size:12px;font-weight:600; color:var(--geo-muted);letter-spacing:.02em;margin-bottom:6px} .geo-case-ask p{margin:0;font-size:14px;color:var(--geo-muted);line-height:1.85} .geo-case-mods{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 22px} .geo-case-mods li{position:relative;padding-left:24px;font-size:13.5px; font-weight:600;color:var(--geo-ink);line-height:1.6} .geo-case-mods li::before{content:"";position:absolute;left:0;top:.22em; width:14px;height:14px;background:var(--geo-primary); -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012.5l5.5%205.5L20%206.5'/%3E%3C/svg%3E") center/14px 14px no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2012.5l5.5%205.5L20%206.5'/%3E%3C/svg%3E") center/14px 14px no-repeat} .geo-case-foot{display:grid; grid-template-columns:minmax(140px,1fr) minmax(0,2.2fr); gap:12px 28px;border-top:1px solid var(--geo-line);padding-top:14px} .geo-case-fact{min-width:0} .geo-case-flabel{display:block;font-size:12px;font-weight:600; color:var(--geo-muted);letter-spacing:.02em} .geo-case-fact strong{display:block;margin-top:6px;font-size:15px; font-weight:700;color:var(--geo-ink);line-height:1.5} .geo-case-fact p{margin:6px 0 0;font-size:13px;color:var(--geo-muted); line-height:1.8} /* job443：cases 页行业大卡「一行 2 个」网格容器与单元格。整卡不再是 .geo-body 直接子元素（被包进 .geo-case-cell > .geo-case-grid），所以 上面的「直接子元素」测量宽度规则不再约束它 —— 由本网格的栏宽决定。 */ .geo-case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 28px;margin:0} .geo-case-cell{display:flex;flex-direction:column} .geo-case-cell .geo-eyebrow{display:block;margin:0 0 10px;padding:0; border-top:0} /* 2 列时卡片更窄，封面压到 230px 保持比例（窄屏回 200px，见下） */ .geo-case-grid .geo-case-media{height:230px} @media(max-width:719px){ .geo-case-media{height:200px} .geo-case-body{padding:18px 18px 20px;gap:13px} .geo-case-mods{grid-template-columns:1fr} .geo-case-foot{grid-template-columns:1fr} /* job443：窄屏一行放不下 2 个（每卡 < 320px 双列清单会挤），叠单列 */ .geo-case-grid{grid-template-columns:1fr} .geo-case-grid .geo-case-media{height:200px} .geo-case-cell .geo-eyebrow{margin-bottom:8px} } /* ============================================== 资讯知识库 hub（job444） 参考站知识库页：焦点横幅（hero_html 已渲染）+ 分类眉标 + 一行 N 张卡 （卡含「文章」标签 + 标题 + 摘要，点击进详情/锚点）+ 文章正文（带锚点）。 网格已进 max-width:none 放行组（见上面那条），这里只定卡片本身的视觉。 🔴 卡片是 （整卡可点），里面的 h3/p 是普通语义标签、文字一字未动， 所以不进「链接列表」剥离（strip_link_lists 只看「几乎全是链接 + 文字占比 ≥0.8 + 体量 < 正文 25%」的容器；这里卡片文字占主体、整页占比极小，安全）。 */ /* 分类眉标（「前沿研究，深度解读」）—— 与正文模块眉标同款观感但不带序号 */ .geo-hub-kicker{font-size:12px;font-weight:800;letter-spacing:.16em; line-height:1.1;color:var(--geo-primary);margin:0 0 18px} /* 卡片网格：默认 3 列（参考站一行 3 张）；窄屏依次叠 2 列 / 1 列 */ .geo-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 24px;margin:0 0 56px} .geo-hub-card{display:flex;flex-direction:column;gap:10px; background:var(--geo-surface);border:1px solid var(--geo-line); border-radius:14px;padding:20px 22px;box-shadow:var(--geo-sh1); text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s} .geo-hub-card:hover{border-color:var(--geo-primary);box-shadow:var(--geo-sh2)} .geo-hub-chip{display:inline-flex;align-self:flex-start; background:var(--geo-primary-soft);color:var(--geo-primary-strong); font-size:12px;font-weight:600;line-height:1;padding:5px 10px;border-radius:999px} .geo-hub-card-title{margin:0;font-size:17px;line-height:1.45;color:var(--geo-ink)} .geo-hub-card-sum{margin:0;font-size:13.5px;line-height:1.7;color:var(--geo-muted)} /* 卡片元信息（job447）：「阅读约 N 分钟」，收在摘要下方 */ .geo-hub-card-meta{margin:4px 0 0;font-size:12px;line-height:1.4;color:var(--geo-muted)} @media(max-width:860px){ /* 一行放不下 3 张（每卡 < 320px 摘要会挤），叠 2 列 */ .geo-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:560px){ /* 手机端单列，卡片铺满 */ .geo-hub-grid{grid-template-columns:1fr} } /* 「编辑推荐」焦点横幅（job447，参考站样式：封面图 + 右侧文字面板）。 整卡是一个 直跳详情页；封面复用 hero_art 的插画/实景照片 （.geo-hero-art 在 hero 里是绝对定位 + ≥960px 才显示，这里在 .geo-feat-media 内改回文档流铺满容器，横幅自己管响应式）。 */ .geo-feat{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr); gap:26px;align-items:center;margin:0 0 34px;padding:18px; background:var(--geo-surface);border:1px solid var(--geo-line); border-radius:18px;box-shadow:var(--geo-sh1);text-decoration:none;color:inherit; transition:border-color .15s,box-shadow .15s} .geo-feat:hover{border-color:var(--geo-primary);box-shadow:var(--geo-sh2)} .geo-feat-media{position:relative;border-radius:12px;overflow:hidden; aspect-ratio:4/3;background:var(--geo-primary-soft)} /* job449：文章自选封面 = geo-photo- 类（字节在共享样式表）， 这里只管铺排。🔴 不能用 background 简写清底色 —— 简写会把 background-image 一并重置，特异性 (0,2,0) 又压过图库规则 (0,1,0)， 封面就空白了（2026-09-23 实测截图）。只清 background-color。 🔴 job495：`.geo-hero-art` 在首屏里改成了**浮动**（见那段注释）， 这里是它唯一的复用点，必须显式 `float:none;margin:0` 把浮动关掉 —— 否则封面会从横幅里浮出去、并给后面的文字挤出 24px 的左外边距。 同日删掉了 `position:static;transform:none`（那是旧绝对定位时代的 复位规则，现在基类里已经没有绝对定位了）。 */ .geo-feat-media .geo-hero-art{float:none;margin:0;display:block; width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0; background-color:transparent} .geo-feat-media[class*="geo-photo-"]{background-size:cover; background-position:center} .geo-feat-body{display:flex;flex-direction:column;gap:12px;min-width:0} .geo-feat-chip{display:inline-flex;align-self:flex-start; background:var(--geo-primary);color:var(--geo-surface); font-size:12px;font-weight:700;line-height:1;padding:6px 12px;border-radius:999px} .geo-feat-title{margin:0;font-size:22px;line-height:1.4;color:var(--geo-ink)} .geo-feat-sum{margin:0;font-size:14px;line-height:1.8;color:var(--geo-muted)} .geo-feat-meta{margin:0;font-size:12.5px;color:var(--geo-muted)} @media(max-width:860px){ /* 窄屏：图上文下叠单列，横幅退化为大卡 */ .geo-feat{grid-template-columns:1fr;gap:16px} .geo-feat-media{aspect-ratio:16/9} .geo-feat-title{font-size:19px} } /* 详情页「更多知识文章」相关阅读（job444 反馈：卡片直跳详情页后，详情页 底部用同一套卡片互链）。nav 在 article 容器之内、37em 量尺之内 —— 复用 geo-hub-grid 的响应式列数即可，不额外放宽（父级容器已收窄）。 🔴 注释里禁止出现 article 开闭标签这类标签字面量：预览路径是内联样式表， 测试与抽取器按标签正则取正文时会从注释里那个假标签开始匹配（job444 实测）。 */ .geo-detail-more{margin:44px 0 8px;padding-top:22px;border-top:1px solid var(--geo-line)} .geo-detail-more .geo-hub-grid{margin-bottom:0} .geo-detail-more .geo-hub-card-title{font-size:15.5px} @media(max-width:860px){ .geo-detail-more .geo-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:560px){ .geo-detail-more .geo-hub-grid{grid-template-columns:1fr} } /* ============================================== 正文全幅深色带（job407 → 已退役） 参考站首页正文中部有一段通栏深色区（服务覆盖 / 全国服务能力），job407 曾 把这套深色带语言插到正文中间；job409 扩到 about 两段。 ⚠️ **job428 撤 home、job434 撤 about** —— 用户均反馈深色带「跟上下不一致 / 样式乱」，正文模块一律回归白色平铺流。site_layout.DARK_HEADS_BY_PAGE 已空， 不会再派发 geo-dark；以下 CSS 按 .geo-tint 死规则先例**保留作恢复锚点** （恢复时只需补派发表，不必重踩这三条纪律）。 ⚠️ 三条与 .geo-tint 同款的纪律，缺一就是静默事故： ① .geo-body > * 的收窄规则会打在它身上 ⇒ 必须进 max-width:none 放行组， 再用 .geo-dark > * 收回（成对）； ② 带内整组变量反色（复用 _band_tokens 的映射），否则深底深字一片糊； ③ 通栏背景用 hero 同款「::before + 100vw」画法，不产生横向滚动条 （.geo-main 的 overflow-x:clip 兜住）。 */ .geo-dark{position:relative;isolation:isolate;margin:56px 0; /* 带内整组反色（同 .geo-hero /.geo-shout 那组映射） */ --geo-primary:var(--geo-band-primary); --geo-primary-strong:var(--geo-band-primary-strong); --geo-primary-soft:var(--geo-band-primary-soft); --geo-primary-line:var(--geo-band-primary-line); --geo-on-primary:var(--geo-band-on-primary); --geo-ink:var(--geo-band-ink); --geo-fg:var(--geo-band-fg); --geo-muted:var(--geo-band-muted); --geo-line:var(--geo-band-line); --geo-line-2:var(--geo-band-line-2); --geo-surface:var(--geo-band-surface); --geo-surface-2:var(--geo-band-surface-2); --geo-sh2:var(--geo-band-sh2)} .geo-dark::before{content:"";position:absolute;z-index:-1;top:0;bottom:0; left:50%;width:100vw;margin-left:-50vw; background: radial-gradient(820px 320px at 84% -20%,rgba(255,255,255,.055),transparent 62%), radial-gradient(640px 300px at 2% 122%,var(--geo-band-primary-soft),transparent 58%), var(--geo-band-bg)} .geo-dark > *{max-width:var(--geo-measure-text)} .geo-dark > .geo-eyebrow:first-child{margin-top:0;padding-top:0;border-top:0} /* 深色带内的浅色小卡（列表卡片 / 表格行）在深底上要能浮起来： 给直接子级的卡片容器补一层弱白描边，其余组件走反色变量自适配。 */ .geo-dark .geo-cards > li{background:var(--geo-band-surface); border:1px solid var(--geo-band-line)} /* 相邻两条深色带（job409，about 的「服务边界」双模块）在视觉上是同一块 通栏深色区：去掉中间的上下间距，让两条带的 ::before 背景无缝拼合。 */ .geo-dark + .geo-dark{margin-top:0} /* ============================================== 首页暗色页头 + 渐变 CTA（job407） 参考站首页的页头是暗色（与深色首屏连成一体），页尾 CTA 是主色渐变带。 全部 scope 在 body.geo-tpl-home 上 —— 其他页的浅色页头与深色 CTA 不动。 band_* 变量挂在 :root 上，页头虽在带外也能直接引用。 ⚠️ job421：**首页页头改回白底**，与其他几个页面一致（用户诉求 「首页的最上面的头应该是白色，跟其他几个页面一样」）。之前首页页头是暗色 与深色首屏连成一体，但其他页其实是「白页头 + 深色首屏」，反而首页成了 异类。删掉下面这段暗色页头覆盖，首页页头即回退到 .geo-header 的 白底（--geo-surface + --geo-line 描边），与其它页统一。 ⚠️ job429：页尾 CTA 的「主色渐变带」覆盖也删掉了（body.geo-tpl-home .geo-shout::before 那条亮主色横幅）—— 用户拿参考站对比后要求首页收尾 与其他页一致：深色带收尾（135deg band-bg → band-bg2 + 弱光晕），与页脚 的 band-bg2 起步色无缝衔接（job428 的页脚渐变正好吃这个衔接）。删掉 覆盖即回退 .geo-shout 的默认深色带，五页收尾语言统一。 */ .geo-body h2{position:relative;font-size:30px;line-height:1.36;font-weight:700; color:var(--geo-ink);letter-spacing:-.014em;margin:0 0 16px;padding-left:20px} .geo-body h2:first-child{margin-top:0} /* 主色短竖条代替整行下划线：下划线会把每个小节切成「表格」，竖条是引导。 */ .geo-body h2::before{content:"";position:absolute;left:0;top:.2em; width:5px;height:.92em;border-radius:2.5px; background:linear-gradient(180deg,var(--geo-primary),var(--geo-primary-strong))} /* h3 = 小节内部的**分组**。原先它与正文只差 1.5px 字号、没有任何标识， 读者认不出这是一层结构 ⇒ 「缺乏层次感」有一半是这里来的。 现在给它小方块 + 淡色环，并把上下间距拉到明显大于段间距。 ⚠️ 排除 .geo-q：FAQ 的问题也是

    ，它有自己的 Q 角标， 不排除的话这里的选择器（带 :not）特异性更高，会把 Q 角标顶掉。 */ .geo-body h3:not(.geo-q){position:relative;font-size:20px;line-height:1.55; font-weight:700;color:var(--geo-ink);margin:44px 0 12px;padding-left:18px} .geo-body h3:not(.geo-q)::before{content:"";position:absolute;left:0;top:.48em; width:9px;height:9px;border-radius:3px;background:var(--geo-primary); box-shadow:0 0 0 4px var(--geo-primary-soft)} /* 段间距（24px）要明显大于行间空白（line-height 1.9 减字高 ≈ 15px）， 段落才会成为读者眼睛能切出来的单元 —— 这就是「密」与「透气」的分界。 */ .geo-body p{margin:24px 0} /* 连续两段之间再加一档（job395）：实测真实项目的模块里一坐就是 5–7 段连排， 20px 的间距让它们连成一堵灰墙（参考站的「块与块之间」是 109px）。 ⚠️ 必须带 `.geo-body` 前缀：它的特异性 (0,1,2) 要**高于**上面那条 `.geo-body p` (0,1,1)。写成裸 `p + p` 会被上面压掉，而症状只是 「看着没生效」，不报错、不掉分。 */ .geo-body p + p{margin-top:36px} /* 导语：模块的第一个段落（紧跟 h2 的那一段）升一档字号与行高 —— 参考站 10/10 个模块都有这一段，它是「题」与「文」之间的过渡。 ⚠️ 必须用「直接子元素」选择器。两栏版式里 `.geo-split-main` 的段落不是 `.geo-body` 的直接子元素，因此**不会**被放大 —— 那一栏只有 470px 宽， 17.5px 字号会把每行压到 26.9 字，而浏览器验收 P.7g 的红线是 ≥28 字。 */ .geo-body > h2 + p{font-size:17.5px;line-height:1.9;margin-top:0; color:var(--geo-fg)} .geo-body ul,.geo-body ol{margin:24px 0;padding-left:1.35em} .geo-body li{margin:11px 0} .geo-body li::marker{color:var(--geo-primary);font-weight:700} .geo-body strong,.geo-body b{color:var(--geo-ink)} /* 要点列表 → 卡片网格（job391） 一串
  • 与一组卡片在信息量上完全一样，观感上差一整级。 ⚠️ 卡片只由 CSS 生成（伪元素画图标），li 的**直接子文本一字未动** —— 这是「有效文本块」计数那条判据的红线，套 会把直接文本清零。 */ .geo-body ul.geo-cards{list-style:none;padding:0;margin:26px 0; display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px; align-items:start} /* 🔴 job411b：对齐参考站 xunzhiyinqing 的 `.card` 视觉语言（白底 + 描边 + rounded-2xl 圆角 + 常驻浅阴影 + hover 上浮），让卡片从「浅灰块」变成 「浮在页面上的白卡」，与参考站观感一致。纯 CSS、不改任何 HTML class ⇒ Jaccard 五页差异化契约与「有效文本块」计数零影响。 */ .geo-body ul.geo-cards li{position:relative;margin:0;padding:20px 22px 20px 46px; background:var(--geo-surface);border:1px solid var(--geo-line); border-radius:var(--geo-radius);line-height:1.85;font-size:15.5px; box-shadow:var(--geo-sh1); transition:border-color .16s,transform .16s,box-shadow .16s} .geo-body ul.geo-cards li:hover{border-color:var(--geo-primary-line); transform:translateY(-2px);box-shadow:var(--geo-sh2)} .geo-body ul.geo-cards li::before{content:"";position:absolute;left:18px;top:25px; width:12px;height:12px;border-radius:4px;background:var(--geo-primary-soft); box-shadow:inset 0 0 0 2px var(--geo-primary)} /* 🔴 job411b：客户案例 / 资讯知识库的「图文卡」顶部媒体区。对齐参考站 xunzhiyinqing 的 16:9 slate-100 图片位（每个 card 顶部一张图）。 我们没有外部图片 ⇒ 用主色柔光渐变占位（纯装饰、aria-hidden、无文字， 抽取正文时整块无关）。只在 cases / insights 两页的 list 卡上加 （has-media class 由 site_builder 仅在这两个 page_type 下输出）。 负边距把媒体区拉到卡片两端、贴住圆角；文字仍留在卡片 padding 内。 */ /* ⚠️ 特异性必须高于通用卡片规则 .geo-body ul.geo-cards li（0,2,2）， 否则 padding-left / 隐藏图标会被压掉、媒体区左偏 24px。 */ .geo-body ul.geo-cards li.has-media{padding-left:22px} .geo-body ul.geo-cards li.has-media::before{display:none} /* 🔴 job551：底色必须是**实色主色**，不能再用 primary-soft → surface-2。 _decor_svg 的母题是「白色半透明图形」（fill-opacity .08~.24），画在 #efeffd→#f8fafd 这种近白渐变上等于整块看不见 —— 案例页/资讯页的卡片 封面会渲染成 4 个空白灰框（真机上才看得出来，tsc/守卫都抓不到）。 白色母题需要深底，故改用 primary → primary-strong 的实色渐变。 */ /* 🔴 job552：宽度/边距必须是**显式计算值**，不能靠 block 的自动宽度。 父级 li 在 .geo-verify 下是 display:flex;flex-direction:column; align-items:flex-start —— 交叉轴的 flex-start 会让媒体按 SVG 固有宽度 收缩，真机上就是「图只占卡片一半、右边一大片空白」（截图才看得出来， tsc / 静态守卫都抓不到）。所以：width = 内容宽 + 两侧 padding， 两侧负边距与父级 padding 用同一组变量（.geo-verify > li 里覆盖）， 既不撑出横向滚动，也不会因 padding 变了而露出白边。 --geo-card-ar / -pt / -px 三个变量只在需要的地方覆盖，默认值对应 案例 / 资讯列表卡的 padding:20px 22px。 */ .geo-card-media{display:block;flex:0 0 auto; width:calc(100% + var(--geo-card-px, 22px) * 2); aspect-ratio:var(--geo-card-ar, 16 / 9); margin:calc(-1 * var(--geo-card-pt, 20px)) calc(-1 * var(--geo-card-px, 22px)) 14px; border-radius:calc(var(--geo-radius) - 1px) calc(var(--geo-radius) - 1px) 0 0; overflow:hidden; background:linear-gradient(135deg,var(--geo-primary) 0%,var(--geo-primary-strong) 100%); border-bottom:1px solid var(--geo-line);position:relative} .geo-card-media::after{content:"";position:absolute;right:-26px;top:-26px; width:150px;height:150px;border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.28),transparent 70%);opacity:.55} /* 悬停时装饰母题轻微放大：卡片上浮（li:hover transform）已改过一笔， 图片跟着「呼吸」一下，避免大色块在移动时显得死板。 */ .geo-body ul.geo-cards li.has-media .geo-card-media svg{transition:transform .45s ease} .geo-body ul.geo-cards li.has-media:hover .geo-card-media svg{transform:scale(1.04)} @media(prefers-reduced-motion:reduce){ .geo-body ul.geo-cards li.has-media .geo-card-media svg{transition:none} .geo-body ul.geo-cards li.has-media:hover .geo-card-media svg{transform:none} } /* 内联 SVG 装饰图（feature media / 案例封面 / 地图）填满容器 */ .geo-card-media svg,.geo-feature-media svg,.geo-map-canvas svg{display:block; width:100%;height:100%} /* 联系我们：正文末尾的定位地图（job415，参考站联系页有地图）。纯内联 SVG 抽象街网 + 主色定位针，无文字、整块 aria-hidden ⇒ 不进正文、不影响计数。 作为 .geo-body 直接子元素走测量宽度（与内容同宽），不顶出横向滚动。 */ .geo-map{margin:40px 0 8px;border:1px solid var(--geo-line);border-radius:var(--geo-radius); overflow:hidden;background:var(--geo-surface-2)} .geo-map-canvas{display:block;aspect-ratio:16/9; background:linear-gradient(135deg,var(--geo-primary-soft),var(--geo-surface-2))} /* ============================================== 页面版式（job393） 五类页面的**骨架**差异化：下面每一组只作用于某一类页面（class 由 site_layout 在渲染时加）。共同的红线：只包装、只换容器，不动任何 文字与标签 —— 详见 site_layout 的模块 docstring。 ⚠️ 这些规则的特异性必须**高于**上面的通用卡片规则（.geo-body ul.geo-cards 已经是 0,2,1），否则会被通用规则压掉而毫无提示 —— 所以统一写成 `.geo-body ul.geo-cards.geo-xxx` 这种双 class 形式。 */ /* 服务与产品：要点铺成「三列竖卡」（job425，对齐参考站服务页三张卡： 照片封面在顶、标题正文在下、三列等高网格）。媒体区是真实照片/内联 SVG 抽象图（无文字、aria-hidden）；正文放进 .geo-feature-body 空 div —— div 在 BLOCK_TAGS 里，原
  • 直接文本的位置由它顶上，有效文本块计数 不变。geo-features 原是服务专属类；job425 起首页「主营业务」块也走 这个版式（见 site_layout.list_variant），两页共用是刻意的同款。 特异性 0,3,2 > 通用卡片的 0,2,1 ⇒ 压得住 auto-fit 两列网格。 */ .geo-body ul.geo-cards.geo-features{display:grid; grid-template-columns:repeat(3,1fr);gap:18px} .geo-body ul.geo-cards.geo-features > li{display:flex;flex-direction:column; padding:0;margin:0;border:1px solid var(--geo-line); border-radius:var(--geo-radius);overflow:hidden;background:var(--geo-surface)} .geo-body ul.geo-cards.geo-features > li::before{display:none} /* 封面：16/10 定宽高比铺满卡顶（cover 不变形）；卡体等高由网格 stretch 保证 —— 文字短的卡正文贴底对齐，不再出现「孤卡换行」。 */ .geo-feature-media{flex:0 0 auto;width:100%;aspect-ratio:16/10;overflow:hidden; background:linear-gradient(135deg,var(--geo-primary-soft),var(--geo-surface-2)); background-size:cover;background-position:center} .geo-feature-body{flex:1 1 auto;padding:20px 22px;font-size:15px;line-height:1.85; color:var(--geo-ink)} /* 联系我们：联系方式铺成「渠道卡」（左侧一条主色竖条，代替小方块） 竖条代替方块是为了和「要点卡」拉开距离 —— 联系页该像一张名片， 不像一张清单。 */ .geo-body ul.geo-cards.geo-channels{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))} .geo-body ul.geo-cards.geo-channels li{padding:22px 22px 22px 28px;font-size:15.5px} .geo-body ul.geo-cards.geo-channels li::before{left:0;top:0;width:4px;height:100%; border-radius:3px;box-shadow:none; background:linear-gradient(180deg,var(--geo-primary),var(--geo-primary-strong))} /* 服务与产品：「可承接的服务范围」这类**纯短标题**清单 → 无图编号卡 （job456）。三列等宽小卡：序号药丸（CSS counter 出字，无 DOM 文本 ⇒ 有效文本块计数与逐字保真零影响）+ 粗标题一行。特异性 0,3,2 压通用 卡片规则（0,2,1）；基卡 ::before 是左上角方点，这里整体改成药丸。 */ .geo-body ul.geo-cards.geo-scope{grid-template-columns:repeat(3,1fr); counter-reset:gwscope} .geo-body ul.geo-cards.geo-scope > li{padding:18px 20px 16px; counter-increment:gwscope;font-weight:700;font-size:15.5px; color:var(--geo-ink);line-height:1.7} .geo-body ul.geo-cards.geo-scope > li::before{content:"0" counter(gwscope); position:static;display:flex;align-items:center;justify-content:center; width:32px;height:32px;border-radius:9px;margin:0 0 10px; background:var(--geo-primary-soft);color:var(--geo-primary-strong); font-size:13px;font-weight:800;letter-spacing:.04em;box-shadow:none} /* ============================================== 联系页参考版式（job439） 用户参考截图的四段式（首屏深色带之外的新增三件套 + 覆盖三卡）： ② 「官方联系信息」2×2 信息卡 ③ 「留需求」两栏（左文右表单） ④ 「服务覆盖」三卡（粗标题+灰描述）+「到访指引」深色宽卡。 容器放行见上面 max-width:none 放行组（.geo-lead / .geo-visit 成对）。 */ /* ② 信息卡：两列网格；去掉通用卡片的方点与左内距，改成 「小灰标签 + 大粗主值 + 小灰备注」三行。 */ .geo-body ul.geo-cards.geo-contact-cards{grid-template-columns:repeat(2,1fr)} .geo-body ul.geo-cards.geo-contact-cards li{padding:18px 22px 16px} .geo-body ul.geo-cards.geo-contact-cards li::before{content:none} .geo-contact-cards .geo-cl{display:block;font-size:12.5px;font-weight:600; color:var(--geo-muted);letter-spacing:.02em;margin-bottom:8px} .geo-contact-cards .geo-cv{display:block;font-size:17px;font-weight:700; color:var(--geo-ink);line-height:1.5;overflow-wrap:anywhere} .geo-contact-cards .geo-cn{margin:6px 0 0;font-size:12.5px;color:var(--geo-muted); line-height:1.65} /* ③ 留需求两栏：左 = 标题 + 导语 + QA 小卡；右 = 白底表单卡。 外层铺 --geo-surface-2 浅灰面板（参考站这一段就是灰底区）。 */ .geo-lead{display:grid;grid-template-columns:1fr 400px;gap:0; background:var(--geo-surface-2);border:1px solid var(--geo-line); border-radius:14px;overflow:hidden;box-shadow:var(--geo-sh1);margin:32px 0} .geo-lead-main{padding:28px 30px 26px;display:flex;flex-direction:column;gap:12px} .geo-lead-main h2{margin:0} .geo-lead-main p{margin:0;font-size:14.5px;color:var(--geo-muted);line-height:1.8} .geo-lead-qa{background:var(--geo-surface);border:1px solid var(--geo-line); border-radius:10px;padding:14px 16px} /* QA 的小标题在库里是 h2，渲染层降为 h3（语义从属于本模块的 h2）； 这里把通用 h3 的「方块角标 + 44px 上距」收掉，做成小卡标题。 */ .geo-lead-qa h3{margin:0;padding-left:0;font-size:14.5px} .geo-lead-qa h3::before{content:none} .geo-lead-qa p{margin:6px 0 0;font-size:13px;line-height:1.7} .geo-lead-form{padding:24px 26px;background:var(--geo-surface); border-left:1px solid var(--geo-line)} /* 表单在 DROP_TAGS 里（form/select/button），纯视觉件 —— 字段栅格、 输入框、主色提交按钮与备注行。 */ .geo-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0} .geo-form label{display:block;font-size:12.5px;font-weight:600; color:var(--geo-ink);margin-bottom:6px} .geo-form input,.geo-form select,.geo-form textarea{width:100%; box-sizing:border-box;font:inherit;font-size:13.5px;color:var(--geo-ink); background:var(--geo-surface-2);border:1px solid var(--geo-line); border-radius:8px;padding:9px 11px} .geo-form input:focus,.geo-form select:focus,.geo-form textarea:focus{ outline:2px solid var(--geo-primary-soft);border-color:var(--geo-primary)} .geo-form textarea{min-height:96px;resize:vertical} .geo-form ::placeholder{color:var(--geo-muted);opacity:.75} .geo-form .geo-form-full{grid-column:1/-1} .geo-form button{grid-column:1/-1;background:var(--geo-primary);color:var(--geo-on-primary); font-size:14px;font-weight:600;border:0;border-radius:9px;padding:11px 16px; cursor:pointer;transition:filter .16s} .geo-form button:hover{filter:brightness(1.06)} .geo-form .geo-form-note{grid-column:1/-1;margin:0;font-size:12px; color:var(--geo-muted);line-height:1.6} .geo-form .geo-form-status{grid-column:1/-1;margin:8px 0 0;font-size:13px; line-height:1.5;padding:8px 11px;border-radius:8px} .geo-form .geo-form-status-ok{color:#166534;background:#dcfce7; border:1px solid #bbf7d0} .geo-form .geo-form-status-err{color:#991b1b;background:#fee2e2; border:1px solid #fecaca} .geo-form button:disabled{opacity:.6;cursor:not-allowed} /* ④a 覆盖三卡：等宽三列；条目已由渲染层拆「粗标题 + 灰描述」 （_icon_item_li 同款拆法），这里只负责收掉方点、压小字号。 */ .geo-body ul.geo-cards.geo-region{grid-template-columns:repeat(3,1fr)} .geo-body ul.geo-cards.geo-region li{padding:18px 20px} .geo-body ul.geo-cards.geo-region li::before{content:none} .geo-body ul.geo-cards.geo-region li strong{display:block;font-size:15px; margin-bottom:6px} .geo-body ul.geo-cards.geo-region li p{margin:0;font-size:13px; color:var(--geo-muted);line-height:1.7} /* ④b 到访深色宽卡：左 = 两列信息表（保留 语义，对比块判据不掉）， 右 = 实景照片。深底配色复用 .geo-dark 的带内反色变量映射 —— 收进 卡片级（不通栏、不用 ::before 通栏画法）。 */ .geo-visit{display:grid;grid-template-columns:1fr minmax(280px,38%);gap:0; border-radius:14px;overflow:hidden;box-shadow:var(--geo-sh1);margin:32px 0; isolation:isolate; --geo-primary:var(--geo-band-primary); --geo-primary-strong:var(--geo-band-primary-strong); --geo-primary-soft:var(--geo-band-primary-soft); --geo-primary-line:var(--geo-band-primary-line); --geo-on-primary:var(--geo-band-on-primary); --geo-ink:var(--geo-band-ink); --geo-fg:var(--geo-band-fg); --geo-muted:var(--geo-band-muted); --geo-line:var(--geo-band-line); --geo-line-2:var(--geo-band-line-2); --geo-surface:var(--geo-band-surface); --geo-surface-2:var(--geo-band-surface-2); background:var(--geo-band-bg)} .geo-visit-body{padding:24px 26px} .geo-visit .geo-compare{margin:0} .geo-visit .geo-compare th{color:var(--geo-band-muted);background:transparent; border-bottom:1px solid var(--geo-band-line);font-size:12px} .geo-visit .geo-compare td{color:var(--geo-band-fg);font-size:13.5px; line-height:1.7;background:transparent} .geo-visit .geo-compare tbody tr+tr td{border-top:1px solid var(--geo-band-line)} .geo-visit-photo{background-size:cover;background-position:center;min-height:240px} /* 图标网格（job418 初版 / job426 对齐参考站「好礼」版式）： 三列网格 —— 内容宽 702px ÷ minmax(200px) ⇒ auto-fit 收敛到 3 列 （窄屏自动退 2 列 / 1 列）。每条 = 白底细环圆图标（56px）+ 粗标题行 + 灰描述行，全部居中；行距放宽（38px）拉开参考站那种呼吸感。 「标题：描述」由渲染层拆成 /

    （冒号保留在标题行尾，li 取出的 文本与原文逐字一致；见 site_builder._icon_item_li）：strong 不在 BLOCK_TAGS、p 直接文本 <40 字 ⇒ 两者都不进 text_block_count，li 计数 不变（评分取 max(段落, 文本块, li) 不受影响）。零新增 class ⇒ 五页 Jaccard 契约零影响。 ⚠️ 特异性必须高于通用卡片规则 .geo-body ul.geo-cards li（0,2,2）， 所以写成 .geo-cards.geo-icons 双 class（0,2,2）+ ul/li 元素（0,2,2→ 实际 c 多一个 li 元素 = (0,2,3)）才能压住背景/边框/左内距；::before 也要双 class 才能把方点改成顶部圆图标。li p 同理要压过 .geo-body p。 */ .geo-body ul.geo-cards.geo-icons{display:grid; grid-template-columns:repeat(3,1fr);gap:38px 30px;margin:26px 0} .geo-body ul.geo-cards.geo-icons > li{display:flex;position:relative;flex-direction:column; align-items:center;text-align:center;background:transparent;border:0; box-shadow:none;padding:0;margin:0; font-size:14px;line-height:1.8;color:var(--geo-muted)} .geo-body ul.geo-cards.geo-icons > li:hover{transform:none;box-shadow:none} .geo-body ul.geo-cards.geo-icons > li strong{display:block;margin:0 0 6px; font-size:15px;font-weight:700;line-height:1.5;color:var(--geo-ink)} .geo-body ul.geo-cards.geo-icons > li p{margin:0;padding:0; font-size:13.5px;line-height:1.8;color:var(--geo-muted)} .geo-body ul.geo-cards.geo-icons > li::before{position:static;left:auto;top:auto; width:56px;height:56px;border-radius:50%;background:var(--geo-primary-soft); box-shadow:none;margin:0 auto 16px} /* 圆内 line-icon（job419 单枚四角星 → job426 六枚描边图标轮换）： 参考站每条好礼的圆内图标都不一样，用 6 枚 stroke 风格 SVG mask 按 nth-child(6n+k) 轮换（mask 的 alpha 来自描边，颜色无关）。仍纯 CSS、 零新增 class、零文本 ⇒ Jaccard / 文本块计数零影响；绝对定位不占布局。 6 枚 URI 挂在 ul 上做变量，::after 底稿取 --geo-m1，后续只覆写 mask-image（position/size 继承底稿的 shorthand）。 */ .geo-body ul.geo-cards.geo-icons{--geo-m1:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='6.5'/%3E%3Cpath%20d='M16%2016l4.5%204.5'/%3E%3C/svg%3E"); --geo-m2:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.5%2017.5l5-5.5%203.5%203.5%207.5-8.5'/%3E%3Cpath%20d='M14.5%207h5.5v5.5'/%3E%3C/svg%3E"); --geo-m3:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='5'%20y='3.5'%20width='14'%20height='17'%20rx='2'/%3E%3Cpath%20d='M9%209h6M9%2013h6M9%2017h3.5'/%3E%3C/svg%3E"); --geo-m4:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%205h16v11h-9.5L6%2020v-4H4z'/%3E%3C/svg%3E"); --geo-m5:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3.5'/%3E%3C/svg%3E"); --geo-m6:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2021s-6.5-6.4-6.5-11a6.5%206.5%200%200%201%2013%200c0%204.6-6.5%2011-6.5%2011z'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='2.5'/%3E%3C/svg%3E")} .geo-body ul.geo-cards.geo-icons > li::after{content:"";position:absolute; top:0;left:50%;transform:translateX(-50%);width:56px;height:56px; background-color:var(--geo-primary); -webkit-mask:var(--geo-m1) center/24px 24px no-repeat; mask:var(--geo-m1) center/24px 24px no-repeat} .geo-body ul.geo-cards.geo-icons > li:nth-child(6n+2)::after{-webkit-mask-image:var(--geo-m2);mask-image:var(--geo-m2)} .geo-body ul.geo-cards.geo-icons > li:nth-child(6n+3)::after{-webkit-mask-image:var(--geo-m3);mask-image:var(--geo-m3)} .geo-body ul.geo-cards.geo-icons > li:nth-child(6n+4)::after{-webkit-mask-image:var(--geo-m4);mask-image:var(--geo-m4)} .geo-body ul.geo-cards.geo-icons > li:nth-child(6n+5)::after{-webkit-mask-image:var(--geo-m5);mask-image:var(--geo-m5)} .geo-body ul.geo-cards.geo-icons > li:nth-child(6n+6)::after{-webkit-mask-image:var(--geo-m6);mask-image:var(--geo-m6)} /* 资质核验卡（job427）：对齐参考站资质区「chip 眉标 + 粗标题 + 灰描述」 三层卡片。库存条目是「类别·标题：描述」单串，HTML 侧已拆成 + +

    （见 site_builder._verify_item_li， 逐字保真：点号装在屏幕外的 geo-sr 里，抽取可见）。这里只管样子： 2 列等高白卡、无左侧方点图标、chip 浅主色药丸、描述小字灰。 ⚠️ 特异性必须高于通用卡片规则 .geo-body ul.geo-cards li（0,2,2）—— 双 class 选择器（0,3,2）压得住 padding-left / ::before 方点。 */ .geo-body ul.geo-cards.geo-verify{grid-template-columns:repeat(2,1fr); gap:20px 22px;align-items:stretch} /* 🔴 job552：把这条卡的 padding 口径暴露成变量，供 .geo-card-media 的负边距 对齐（默认值 20/22 是按通用卡写的）。单独成一条规则而不是并进下面那条， 是因为 job393 H.2b 断言的是下面整条规则的字面量（剥注释、去换行后做子串 匹配），并进去会让守卫假红 —— 而那条断言本身是版式契约，不该为改样式松动。 */ .geo-body ul.geo-cards.geo-verify > li{--geo-card-pt:24px;--geo-card-px:26px} .geo-body ul.geo-cards.geo-verify > li{display:flex;flex-direction:column; align-items:flex-start;gap:10px;padding:24px 26px} /* 🔴 job552：带封面的卡改成「左缩略图 + 右文字」。 背景：这条清单的条目是一句「承诺」，不是案例封面 —— 满宽 16:9 会让 4 张卡 变成 4 块大色块（图占卡片 75%，文字被挤成一行小字），16/6 的矮横幅又会把 320×180 的抽象母题裁成一条横带。左右排才是这类卡的正确版式： 缩略图 38%、圆角独立、文字自动垂直居中。 ⚠️ 依赖 flex 的**匿名 flex item**：li 里除媒体外的裸文本节点会被当成一个 匿名 item，不需要改 HTML（改了会动正文文本结构，审计计数与逐字保真都受 影响）。所以媒体必须显式给 flex-basis + width，不能只靠 align-self。 特异性 0,4,2 压得住通用的 .geo-card-media（0,1,0）与上面的负边距。 */ .geo-body ul.geo-cards.geo-verify > li.has-media{flex-direction:row; align-items:center;gap:18px} .geo-body ul.geo-cards.geo-verify > li.has-media .geo-card-media{ flex:0 0 38%;width:38%;aspect-ratio:16 / 10; margin:0;border-bottom:0; border-radius:calc(var(--geo-radius) - 4px)} .geo-body ul.geo-cards.geo-verify > li::before{display:none} .geo-body ul.geo-cards.geo-verify > li .geo-chip{display:inline-flex; align-items:center;background:var(--geo-primary-soft);color:var(--geo-primary); font-size:12px;font-weight:600;line-height:1;padding:6px 11px;border-radius:999px} /* sr-only：藏在视觉里、留给抽取层（逐字保真的那枚「·」）。 */ .geo-body ul.geo-cards.geo-verify > li .geo-sr, .geo-svc .geo-sr{position:absolute;width:1px; height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .geo-body ul.geo-cards.geo-verify > li strong{display:block;font-size:15.5px; font-weight:700;color:var(--geo-ink);line-height:1.55} .geo-body ul.geo-cards.geo-verify > li p{margin:0;padding:0;font-size:13.5px; color:var(--geo-muted);line-height:1.8} /* 通栏条目（奇数条清单的最后一条）：标题横贯，描述按「；」分的段排双栏 —— 对齐参考站右侧「实体经营与服务保障」大卡的「标题 + 多条小节」。 */ .geo-body ul.geo-cards.geo-verify > li.geo-wide{display:grid; grid-template-columns:repeat(2,1fr);gap:8px 40px;grid-column:1/-1} .geo-body ul.geo-cards.geo-verify > li.geo-wide strong{grid-column:1/-1} @media(max-width:719px){ .geo-body ul.geo-cards.geo-verify{grid-template-columns:1fr} .geo-body ul.geo-cards.geo-verify > li.geo-wide{grid-template-columns:1fr} .geo-body ul.geo-cards.geo-icons{grid-template-columns:1fr} } /* 关于我们：首段两栏（左正文 / 右「企业档案」卡） 档案卡里的每一行都来自站点配置或本页已有的数字事实，不编造。 ⚠️ 两栏比例是**算出来的**，不是随手写的。约束链条： .geo-article max-width:860px，padding 0 24px → 812px .geo-body border 1px + padding 54px（视口够宽时）→ 内容 702px .geo-body > * 上限 --geo-measure-text:60em → 960px（≈60 字，job391 定 / job451c·job451d 放宽） 左栏是正文，必须**比右栏窄不了多少**，更要紧的是不能比 37 字差太多 —— 否则「治密密麻麻」的成果反而在关于我们页被吃掉。实测第一版按 1.6fr/1fr 分出来是 409.8px / 256.2px ⇒ 左栏只有约 25 字/行， 比别的页窄了三分之一。 第二版把右栏从「按比例分」改成**定宽 206px**（它只是一张元信息卡， 内容全是「所属行业：xxx」这类短行，不需要跟着视口变宽）， 于是左栏 = 702 − 26 − 206 = 470px ≈ 29 字/行，落回舒适区间。 */ .geo-body > .geo-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,206px);gap:26px;align-items:start} .geo-profile{background:var(--geo-surface-2);border:1px solid var(--geo-line); border-radius:var(--geo-radius);padding:18px 20px;box-shadow:var(--geo-sh1)} .geo-profile-title{margin:0 0 4px;font-size:12px;font-weight:700; letter-spacing:.1em;color:var(--geo-primary)} .geo-profile-list{list-style:none;margin:0;padding:0} .geo-profile-list li{position:relative;margin:0;padding:9px 0 9px 14px; border-bottom:1px dashed var(--geo-line-2);font-size:13.5px;line-height:1.65; color:var(--geo-fg);overflow-wrap:anywhere} .geo-profile-list li:last-child{border-bottom:0;padding-bottom:0} .geo-profile-list li::before{content:"";position:absolute;left:0;top:17px; width:5px;height:5px;border-radius:2px;background:var(--geo-primary)} /* 常见问题：对齐参考站 xunzhiyinqing 的「逐条堆叠 card（space-y-4）」形态 —— 参考站每题是一张独立 card，上下排列，而不是两列网格。单栏让每题 自成一块、阅读节奏更顺。纯 CSS 改动，不改 HTML class（仍是 .geo-faq-grid 容器 + .geo-faq-item），Jaccard 与文本块计数零影响。 */ .geo-body > .geo-faq-grid{display:grid; grid-template-columns:1fr;gap:16px;margin:24px 0} .geo-faq-item{background:var(--geo-surface-2);border:1px solid var(--geo-line); border-radius:var(--geo-radius-sm);padding:22px 24px; transition:border-color .16s,box-shadow .16s} .geo-faq-item:hover{border-color:var(--geo-primary-line);box-shadow:var(--geo-sh2)} .geo-faq-item .geo-q{margin:0 0 10px;font-size:16.5px;font-weight:700} .geo-faq-item .geo-a{margin:0;padding-right:0;border-left:0;margin-left:0; font-size:15px;line-height:1.8} /* 首页：数字事实摊成横向条带（比数据卡更像一排出仪表） 条带只在首页用 —— 内页的数字事实往往只有三五条且散在各节，摊成条带会空。 */ .geo-body > ul.geo-stats{list-style:none;padding:0;margin:26px 0;display:grid; grid-template-columns:repeat(auto-fit,minmax(164px,1fr));gap:16px} .geo-body > ul.geo-stats li{position:relative;overflow:hidden;margin:0; padding:22px 20px 24px;border:1px solid var(--geo-line); border-radius:var(--geo-radius-sm); background:linear-gradient(180deg,var(--geo-surface),var(--geo-surface-2))} .geo-body > ul.geo-stats .geo-fact-v{font-size:28px} .geo-body > ul.geo-stats li::after{content:"";position:absolute;left:0;bottom:0; height:3px;width:calc(var(--geo-w,0) * 1%);border-radius:0 3px 3px 0;opacity:.8; background:linear-gradient(90deg,var(--geo-primary),var(--geo-primary-strong))} /* 定义块：整页最该被摘走的一句，给它一个显眼的容器 */ .geo-def{position:relative;background:var(--geo-primary-soft); border:1px solid var(--geo-primary-line);border-left:4px solid var(--geo-primary); border-radius:var(--geo-radius-sm);padding:20px 24px;margin:22px 0; font-size:17px;line-height:1.85;color:var(--geo-ink)} /* 数字事实：一行一条太浪费，改成自适应网格的「数据卡」 */ ul.geo-facts{list-style:none;padding:0;margin:26px 0; display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:16px} ul.geo-facts li{position:relative;overflow:hidden; background:var(--geo-surface-2);border:1px solid var(--geo-line); border-radius:var(--geo-radius-sm);padding:20px 22px;margin:0; font-size:14px;line-height:1.7;color:var(--geo-muted); transition:border-color .16s,transform .16s,box-shadow .16s} ul.geo-facts li:hover{border-color:var(--geo-primary-line);transform:translateY(-2px); box-shadow:var(--geo-sh2)} /* 数据条：宽度由 ``site_figure.facts_bar_ratios`` 算好、写进 ``--geo-w``。 算不出来的条目（单位不可比、或同单位只有一条）根本不带这个变量 ⇒ calc 兜底成 0%，那一格就干净地没有条。**不画一根没有依据的条**： 摆一张「比长短」的图却让人读出假结论，比没有图更有害。 */ ul.geo-facts li::after{content:"";position:absolute;left:0;bottom:0;height:3px; width:calc(var(--geo-w,0) * 1%);border-radius:0 3px 3px 0;opacity:.7; background:linear-gradient(90deg,var(--geo-primary),var(--geo-primary-strong))} .geo-fact-k{display:block;font-size:13px;color:var(--geo-muted);margin-bottom:4px} .geo-fact-v{display:block;font-size:23px;font-weight:800;line-height:1.25; color:var(--geo-ink);letter-spacing:-.02em} /* 操作步骤（job452）：参考版式 —— 3 列编号卡网格。每张卡 = 步骤名（h3）+ 步骤文本（p），右上角一个大号半透明水印序号：CSS counter 画的 （counter-reset/increment + decimal-leading-zero），**零文字节点** —— 可见序号只有水印这一个。「第N步」三个字仍在 DOM 里（geo-sr，机器可读、 体检 RE_HOWTO 的取数点），可见层不再把它念出来 ⇒ 序号与文字不重复。 旧的「流程缩略图 stepper + 纵向时间轴列表」随本版式退役（job391 产物： 窄容器里 stepper 短标签被截断，参考站也没有这两个元素）。 */ ol.geo-howto{list-style:none;padding:0;margin:26px 0;display:grid; grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:gwstep} ol.geo-howto>li{position:relative;margin:0;counter-increment:gwstep; background:var(--geo-surface);border:1px solid var(--geo-line); border-radius:var(--geo-radius-sm);padding:22px 20px 18px;overflow:hidden} ol.geo-howto>li::after{content:counter(gwstep,decimal-leading-zero); position:absolute;top:-10px;right:8px;font-size:56px;font-weight:800; line-height:1;letter-spacing:-.02em;color:var(--geo-primary);opacity:.12} ol.geo-howto>li>*{position:relative;z-index:1} ol.geo-howto h3{margin:0 0 8px;font-size:16px;line-height:1.5} ol.geo-howto p{margin:0;font-size:13.5px;color:var(--geo-muted); line-height:1.75} ol.geo-howto .geo-sr{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap} /* 流程缩略图（job391）：摆在步骤列表上方的「俯瞰图」。 读者先看到全程有几步，再往下读每一步的细节 —— 一长串步骤卡是很闷的。 图里只有序号圆点与短标签，完整表述仍在下面的正文里（那边才是体检 取数的地方），所以这不是把序号念两遍。 */ .geo-flow{margin:24px 0 4px} .geo-flow svg{display:block;width:100%;height:auto} .gf-rail{stroke:var(--geo-primary-line);stroke-width:3;stroke-linecap:round; stroke-dasharray:1 10} .gf-node{fill:var(--geo-surface);stroke:var(--geo-primary);stroke-width:2.5} .gf-num{fill:var(--geo-primary);font-size:17px;font-weight:800; text-anchor:middle;font-family:var(--geo-font)} .gf-label{fill:var(--geo-muted);font-size:15px;text-anchor:middle; font-family:var(--geo-font)} /* 表格：圆角容器 + 主色表头 + 隔行底色 */ .geo-table-wrap{margin:22px 0;overflow-x:auto;border:1px solid var(--geo-line); border-radius:var(--geo-radius-sm);background:var(--geo-surface)} table.geo-compare{border-collapse:collapse;width:100%;font-size:14.5px;margin:0} table.geo-compare th,table.geo-compare td{padding:15px 18px;text-align:left; vertical-align:top;border-bottom:1px solid var(--geo-line)} table.geo-compare th{background:var(--geo-primary-soft);color:var(--geo-ink); font-weight:650;white-space:nowrap} table.geo-compare tbody tr:last-child td{border-bottom:0} table.geo-compare tbody tr:nth-child(even){background:var(--geo-surface-2)} /* 常见问题：问题当小标题、答案留白缩进 —— 一眼分得清问答 */ .geo-q{position:relative;padding-left:30px;margin:34px 0 8px} .geo-q::before{content:"Q";position:absolute;left:0;top:.16em;width:20px;height:20px; border-radius:6px;display:grid;place-items:center;font-size:11.5px;font-weight:800; color:var(--geo-primary);background:var(--geo-primary-soft); border:1px solid var(--geo-primary-line)} .geo-a{position:relative;padding-left:30px;color:var(--geo-fg); border-left:2px solid var(--geo-line);margin-left:9px;padding-right:4px} /* 参考资料 */ .geo-sources{margin-top:52px;padding:24px 26px;background:var(--geo-surface-2); border:1px dashed var(--geo-line-2);border-radius:var(--geo-radius-sm)} .geo-sources h2{margin-top:0} .geo-sources h2::before{display:none} .geo-sources p:first-of-type{margin-top:0} .geo-sources ul{margin-bottom:0} /* ============================================================ 收尾 CTA 带 job394：参考站五页的最后一块都是深色 CTA 带。它让整页节奏闭合 —— 「深色首屏 → 浅色正文 → 深色收尾 → 深色页脚」，正文被两条深色带夹住。 变量映射与首屏共用同一条规则（见上面 .geo-hero,.geo-shout 那组）。 ⚠️ 装饰只用 CSS 渐变、**不放 svg**：正文侧有一条「删掉全部 svg 后九项 计数一模一样」的断言，带上不放图，那条断言就仍然只盯正文。 */ .geo-shout{position:relative;isolation:isolate;padding:62px 0;margin-top:8px; background:linear-gradient(135deg,var(--geo-band-bg),var(--geo-band-bg2))} .geo-shout::before{content:"";position:absolute;z-index:-1;inset:0; background:radial-gradient(660px 250px at 84% 0%, var(--geo-band-primary-soft),transparent 72%)} /* job453：参考版式双栏 —— 左栏文案（标题/引导语/底部元信息行）、右栏双按钮 垂直居中。带本来就是全幅横条（job451b 容器已扩到 1433px），不再收进 --geo-measure-text 窄列；文字行长由左栏 1fr 自然约束，右侧按钮 auto。 */ .geo-shout-inner{display:grid;grid-template-columns:minmax(0,1fr) auto; gap:16px 56px;align-items:center} .geo-shout h2{margin:0 0 14px;font-size:clamp(22px,2.7vw,30px);line-height:1.38; font-weight:800;letter-spacing:-.02em;color:var(--geo-ink)} .geo-shout-lead{margin:0 0 18px;font-size:15.5px;line-height:1.9; color:var(--geo-fg)} /* 底部元信息行：参考站「营业时间 ｜ 服务区域」同款 —— 小号弱色文字 + 竖线分隔。span/b 均非链接，带内「链接 ≤2」红线不受影响。 */ .geo-shout-meta{display:flex;flex-wrap:wrap;gap:8px 0;font-size:12.5px; line-height:1.6;color:var(--geo-muted)} .geo-shout-meta span:not(:first-child){margin-left:14px;padding-left:14px; border-left:1px solid var(--geo-line)} .geo-shout-meta b{font-weight:600;color:var(--geo-fg);margin-right:7px} .geo-shout-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end} /* job429：收尾带里的主按钮 —— 带内默认的 --geo-primary 是「往白混 34%」 的提亮主色（首屏深底上按钮要浮起来），但参考站收尾带的主按钮是**原色深 靛 + 白字**的实心药丸。只 scope 到 .geo-shout：首屏 hero 按钮的提亮语言 不动，五页收尾 CTA 统一换成深靛实心。白字对比度够（brand 主色亮度低）。 */ .geo-shout .geo-btn-primary{background:var(--geo-band-primary-strong); color:#ffffff;box-shadow:0 10px 24px -12px var(--geo-band-primary-line)} .geo-shout .geo-btn-primary:hover{box-shadow:0 14px 30px -12px var(--geo-band-primary-line)} /* ============================================================ 页脚 job428：底色从整片纯色改成「深色带末端 → 页脚黑」的纵向渐变 —— CTA 带的 135° 渐变在底边正好收到 --geo-band-bg2，页脚从同一个颜色 起步再沉到 --geo-footer-bg，两块深色之间不再有硬切线（用户要求 「最下面的黑色调整一下，让整体过渡更协调」）。 */ .geo-footer{background:linear-gradient(180deg,var(--geo-band-bg2), var(--geo-footer-bg) 320px);color:var(--geo-footer-fg); margin-top:0;padding:56px 0 26px;font-size:14px} .geo-footer a{color:var(--geo-footer-fg);opacity:.86} .geo-footer a:hover{color:#fff;opacity:1;text-decoration:none} .geo-foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:36px} .geo-foot-logo{display:flex;align-items:center;gap:10px;margin-bottom:14px} .geo-foot-logo .geo-logo-mark{width:34px;height:34px;border-radius:10px;font-size:16px} .geo-foot-logo b{font-size:16.5px;font-weight:700;color:#fff;letter-spacing:-.01em} .geo-foot-desc{margin:0;color:var(--geo-footer-muted);line-height:1.8;font-size:13.5px} .geo-foot-title{margin:2px 0 14px;font-size:13px;font-weight:700;color:#fff; letter-spacing:.06em} .geo-foot-col ul{list-style:none;margin:0;padding:0} .geo-foot-col li{margin:9px 0;color:var(--geo-footer-muted);line-height:1.7} .geo-foot-bottom{display:flex;flex-wrap:wrap;gap:10px 20px; justify-content:space-between;align-items:center;margin-top:44px; padding-top:20px;border-top:1px solid rgba(255,255,255,.12); color:var(--geo-footer-muted);font-size:13px} .geo-foot-bottom p{margin:0} /* ============================================================ 响应式 */ @media(max-width:960px){ .geo-foot-grid{grid-template-columns:1fr 1fr;gap:30px} .geo-head{gap:14px} .geo-logo-text span{display:none} } /* 两栏的断点**比上面那一档低 80px（880px）**，这是刻意的： 预览面板把站点渲染在 **960px 左右**（`width:1280; maxWidth:100%` —— 容器只有 那么宽），断点若写成 960，关于我们页在**用户唯一会看的那个视图里**就永远是 单列 —— 「这一页和别页不一样」等于白做。实测 881–960px 时左栏仍有 ≈30 字/行， 完全够读；再窄才叠成一栏（并排两栏在窄屏上会把正文压成每行十几字， 读起来要在两列之间来回跳，那是比「一栏到底」更差的体验）。 */ @media(max-width:880px){ /* job435：服务 feature row 叠单列 —— 图在上（flip 的 order 归零）， 高度收到 210px；面板 padding 收窄。 */ .geo-svc,.geo-svc-flip{grid-template-columns:minmax(0,1fr);padding:18px;gap:16px} .geo-svc-flip .geo-svc-media{order:0} .geo-svc-media{min-height:210px} .geo-svc-body{padding:0} /* job439：联系页参考版式窄屏叠单列 —— 两栏面板（留需求）、深色宽卡 （到访）都退成一列；信息卡与覆盖卡退单列（特异性与通用卡片那条成对）。 */ .geo-lead{grid-template-columns:minmax(0,1fr)} .geo-lead-form{border-left:0;border-top:1px solid var(--geo-line)} .geo-visit{grid-template-columns:minmax(0,1fr)} .geo-visit-photo{min-height:200px} .geo-body ul.geo-cards.geo-contact-cards, .geo-body ul.geo-cards.geo-region{grid-template-columns:1fr} .geo-body > .geo-split{grid-template-columns:minmax(0,1fr);gap:26px; /* ⚠️ 叠成单列之后必须**把测量宽度收回来**。两栏状态刻意放行了 max-width:none （好让左栏拿到 470px、右栏 206px）；单列时若不收回，正文会一路铺满整幅 （960px 预览下是 725px ⇒ **一行 45 字**，比 job391 的 37 字目标还差）。 —— 「放行」和「收回」必须成对出现，漏一半不会报错，只会让正文悄悄变宽。 */ max-width:var(--geo-measure-text)} } @media(max-width:768px){ .geo-hero{padding:46px 0 38px} .geo-shout{padding:46px 0} /* job453：双栏 CTA 带在窄屏叠单列 —— 文案在上、按钮回到左对齐 （右对齐在整行宽的按钮上看起来像缩进错误）。 */ .geo-shout-inner{grid-template-columns:1fr;gap:14px} .geo-shout-cta{justify-content:flex-start} .geo-wrap,.geo-article{padding-left:18px;padding-right:18px} /* job395：窄屏的模块留白与标题同时收一档 —— 96px 留白在手机上会把一页 拉成两屏多，而手机本来就靠滚动节奏阅读。两者必须**一起**收，只收留白 会让 30px 的标题贴在上一个模块的正文上。 */ .geo-body .geo-eyebrow{margin-top:48px} .geo-body h2{font-size:24px;margin-bottom:14px} /* job428：窄屏同样不留 CTA→页脚的缝（与桌面端 .geo-main{padding:0} 成对）。 */ .geo-main{padding:0} .geo-footer{padding-top:40px} /* 窄屏把页头折成两行（品牌+按钮 / 导航整行）而不是让导航横向滚动： 横向滚动会把「联系我们」藏在屏幕外，用户根本不知道右边还有东西。 两行只多占 40px 高，但五个入口全部可见。 */ .geo-head{flex-wrap:wrap;row-gap:4px;min-height:0; padding-top:10px;padding-bottom:10px} .geo-nav{order:3;flex:1 0 100%;justify-content:flex-start} .geo-head-cta{margin-left:auto} } @media(max-width:640px){ .geo-hero h1{font-size:30px} .geo-lede{font-size:16px} .geo-nav a{padding:6px 8px;font-size:13px} .geo-head-cta{padding:8px 14px;font-size:13.5px} .geo-foot-grid{grid-template-columns:1fr;gap:26px} .geo-body{padding:22px 18px} .geo-tint{padding:12px 16px 18px;margin:30px 0} ul.geo-facts{grid-template-columns:1fr 1fr} .geo-fact-v{font-size:20px} /* 手机上卡片网格退回单列：两列会把 30 个字的要点压成五六行 */ .geo-body ul.geo-cards{grid-template-columns:1fr} /* job393：大卡与渠道卡的特异性比上面那条高（双 class），必须在这里再显式 退回单列，否则手机宽度会被 minmax(300px,1fr) 顶出横向滚动。 */ .geo-body ul.geo-cards.geo-features, .geo-body ul.geo-cards.geo-channels{grid-template-columns:1fr} .geo-body > .geo-faq-grid{grid-template-columns:1fr} /* job425：竖卡在手机上单列堆叠（封面 16/9 在上、正文在下）—— 桌面端 三列竖卡的结构到窄屏自然退化，flex 方向规则已随横排大行一起删除。 */ .geo-feature-media{flex:0 0 auto;width:100%;aspect-ratio:16/9} /* 横向流程图在手机宽度里会把六个圆点挤成一团、标签小到不可读 —— 宁可少一张图，也不要一张看不懂的图（正文里的步骤列表一字未少）。 */ /* job452：编号卡网格在手机宽度叠单列（3 列在 339px 里每列只有 ~100px， 标题会竖着折成三四行）。水印序号随卡片等比可见，不需调整。 */ ol.geo-howto{grid-template-columns:1fr} /* job456：编号卡同款收窄 —— geo-scope 也是三列 32px 药丸卡，手机单列。 */ .geo-body ul.geo-cards.geo-scope{grid-template-columns:1fr} ol.geo-howto>li{padding:18px 16px 16px} /* 行动按钮排成规整两行：主按钮通栏，其余两个平分 —— 否则 flex 换行会变成「两个 + 一个」，看着像没排完。 */ .geo-cta,.geo-shout-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px} .geo-cta a:first-child,.geo-shout-cta a:first-child{grid-column:1/-1} /* 首屏事实条：手机上一行两格（minmax(142px,1fr) 在 339px 里本来也只排得下 两格，这里显式写死是为了让「几列」变成可断言的事实，不依赖 auto-fit 的 隐式计算）；值降一档字号，免得数字比标题还抢眼。 */ .geo-hero-facts{margin-top:24px;padding-top:22px; grid-template-columns:1fr 1fr;gap:14px 18px} .geo-hf-v{font-size:15px} } /* ============================================== 常见问题工作区（job450） 参考站 FAQ 页形态：顶部一排「分类筛选 chips（带条数）」+ 左栏「按主题浏览 分类导航 + 求助卡」+ 右栏问答卡（Q/A 角标）。只在「分类 + 问答」凑出 ≥2 组 时启用（site_builder._merge_faq_workspace_secs）；单组仍走 job393 两列网格。 文本保真：Q/A 角标是 ::before 伪元素（不是文字节点）；chips 行是