/** * Retech Site — shared frontend + editor styles(全站加载,编辑器 iframe 同源)。 * * 层序(低→高):retech-reset < retech-base < retech-block < retech-responsive * 所有前台规则必须写进 @layer;@media 必须包在 retech-responsive 层内。 * 全局文件只允许 reset / base / responsive 三个层;块文件只允许 block / responsive。 * * 内容分段: * reset —— 元素重置 + 品牌 token(--retech-x-* 变量,供块 CSS 引用) * base —— 共享基座:版心 / 通用 section 原语 / 按钮 / 面包屑 / 404 / 页面正文 * (这些 class 被多个块的 HTML 使用,基础样式唯一属主在本文件) * responsive —— 共享基座的响应式覆盖 * * 断点沿用原型:1240 / 1080 / 700(取自 assets/css/retech.css 与 solutions.css * 的真实 @media 集合,见 CONVERSION.md §4 与补充决策 A4)。 * 规范检查:npm run check:css retech。 */ @layer retech-reset, retech-base, retech-block, retech-responsive; /* ─────────────────────────── reset ─────────────────────────── */ @layer retech-reset { /* ── 自托管 Inter(决策 A5:原型从 Google Fonts 加载,改为自托管)────────── 原型:`` 自托管的三个理由:① 去掉第三方域名 = 少一次 DNS/TLS 握手,首屏字体不等外网; ② GDPR(German 判例把 Google Fonts CDN 视为个人数据传输);③ 断网/内网可用。 ⚠️ 必须写在整个文件的**层内**。check-css 的 E2 规则把顶层裸规则判为错误 (`@font-face` 顶层会被解析成 bare 项 ⇒ E2),而放进 @media 又会触发 E4 (「@media 只能出现在 responsive 层」)。所以放在 reset 层开头。 ⚠️ `@font-face` 不受 @layer 优先级影响(CSS Cascade 5)—— 写在哪一层都一样生效, 放这里纯粹是为了过规范检查 + 就近声明。 ⚠️ url() 是相对于**本样式表**的 URL 解析的(WP 里即 /blocks/style-index.css),所以 `../assets/fonts/…` 指向 /assets/fonts/…。不要改成绝对路径 —— 换域名/搬服务器会断。 两个文件都是**可变字体**(fvar 轴 opsz 14–32、wght 100–900),所以一条 @font-face 覆盖全部字重,不需要 400/500/600/700 各来一份。 */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url('../assets/fonts/inter-var.woff2') format('woff2-variations'), url('../assets/fonts/inter-var.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: italic; font-weight: 100 900; font-stretch: 100%; font-display: swap; src: url('../assets/fonts/inter-italic-var.woff2') format('woff2-variations'), url('../assets/fonts/inter-italic-var.woff2') format('woff2'); } :root { /* ── 品牌色板 ───────────────────────────────────────────────────────── 经 inc/theme-json.php 注入的 theme.json 预设,带字面量兜底。 取值来源:原型 assets/css/retech.css 的 :root(见 CONVERSION.md §4)。 */ --retech-x-graphite: var(--wp--preset--color--graphite, #11171C); --retech-x-steel: var(--wp--preset--color--steel, #1B252D); --retech-x-steel-2: var(--wp--preset--color--steel-2, #243039); --retech-x-gray-light: var(--wp--preset--color--gray-light, #F3F5F6); --retech-x-white: var(--wp--preset--color--white, #FFFFFF); --retech-x-silver: var(--wp--preset--color--silver, #AAB3BA); --retech-x-ink: var(--wp--preset--color--ink, #11171C); --retech-x-ink-2: var(--wp--preset--color--ink-2, #3A4650); --retech-x-ink-3: var(--wp--preset--color--ink-3, #6B7885); --retech-x-line: var(--wp--preset--color--line, #DFE4E8); --retech-x-line-dark: var(--wp--preset--color--line-dark, rgba(255,255,255,.12)); --retech-x-brand-teal: var(--wp--preset--color--brand-teal, #2B7C74); /* ── 双色语义(本站核心机制,不可混用)──────────────────────────────── flow = 循环 / 产出 / 正向结果 / CTA tech = 工艺 / 技术 / 参数 / 控制状态 */ --retech-x-flow: var(--wp--preset--color--green, #76C043); --retech-x-flow-dark: var(--wp--preset--color--green-dark, #619F35); --retech-x-flow-deep: var(--wp--preset--color--green-deep, #4C7D29); --retech-x-tech: var(--wp--preset--color--cyan, #18AFC4); --retech-x-tech-dark: var(--wp--preset--color--cyan-dark, #128FA1); /* 起步模板沿用的旧别名(逐步收敛到上面的语义名) */ --retech-x-muted: var(--retech-x-ink-3); --retech-x-soft: var(--retech-x-gray-light); --retech-x-brand: var(--retech-x-brand-teal); --retech-x-brand-dark: var(--retech-x-graphite); --retech-x-accent: var(--retech-x-flow); /* ── 透明度档(深/浅底上的次级文字与描边)──────────────────────────── */ --retech-x-w90: rgba(255,255,255,.90); --retech-x-w72: rgba(255,255,255,.72); --retech-x-w60: rgba(255,255,255,.60); --retech-x-w40: rgba(255,255,255,.40); --retech-x-w20: rgba(255,255,255,.20); --retech-x-w12: rgba(255,255,255,.12); --retech-x-w08: rgba(255,255,255,.08); --retech-x-b10: rgba(17,23,28,.10); --retech-x-b08: rgba(17,23,28,.08); --retech-x-b05: rgba(17,23,28,.05); --retech-x-flow-a20: rgba(118,192,67,.20); --retech-x-flow-a30: rgba(118,192,67,.30); --retech-x-flow-a45: rgba(118,192,67,.45); --retech-x-tech-a30: rgba(24,175,196,.30); --retech-x-tech-a50: rgba(24,175,196,.50); /* ── 版心 / 头高 ──────────────────────────────────────────────────── */ --retech-x-container: 1360px; --retech-x-header-h: 72px; /* ── 纵向节奏 / 间距 ──────────────────────────────────────────────── */ --retech-x-sec-y: 110px; /* 桌面 section 纵距(--sec-y) */ --retech-x-sec-y-md: 80px; /* 平板 */ --retech-x-sec-y-sm: 56px; /* 手机 */ --retech-x-gap: 32px; /* ── 圆角 / 阴影 ──────────────────────────────────────────────────── */ --retech-x-r-xs: 3px; --retech-x-r-sm: 6px; --retech-x-r-md: 8px; --retech-x-r-lg: 12px; --retech-x-r-pill: 9999px; --retech-x-radius: var(--retech-x-r-md); /* ── 字体族 / 字号 / 行高(逐条对齐原型 `retech.css:80-100`)───────────── ⚠️ 为什么补这一组(2026-09-21 保真审计): 原生 CSS 里这些字号全部写成了**解析后的字面量**(如 `font-size: 21px`), 而原型写的是 `var(--fs-h3)`。字面量本身多数是对的,但两套写法一旦有一处 抄错就再也对不上(而且审计脚本查不出"值抄错了")。 这里把原型的令牌原值补回,新代码一律用令牌;老的字面量按 `tools/gen-*` 的重跑节奏逐步收敛,不做一次性大替换(风险 > 收益)。 令牌值 = 原型 retech.css 的原值,不是"看起来差不多"的近似值。 */ --retech-x-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --retech-x-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --retech-x-fs-h1: 68px; --retech-x-fs-h1-lg: 62px; --retech-x-fs-h1-md: 46px; --retech-x-fs-h1-sm: 34px; --retech-x-fs-h2: 44px; --retech-x-fs-h2-md: 34px; --retech-x-fs-h2-sm: 26px; --retech-x-fs-h3: 21px; --retech-x-fs-lead: 18px; --retech-x-fs-body: 16px; --retech-x-fs-sm: 14px; --retech-x-fs-xs: 13px; --retech-x-fs-eyebrow: 12px; --retech-x-lh-tight: 1.08; --retech-x-lh-head: 1.16; --retech-x-lh-body: 1.68; --retech-x-sh-sm: var(--wp--preset--shadow--sm, 0 1px 2px rgba(17,23,28,.06)); --retech-x-sh-md: var(--wp--preset--shadow--md, 0 8px 24px rgba(17,23,28,.08)); --retech-x-sh-lg: var(--wp--preset--shadow--lg, 0 18px 48px rgba(17,23,28,.12)); --retech-x-shadow: var(--retech-x-sh-lg); /* ── 缓动 / 时长 ──────────────────────────────────────────────────── */ --retech-x-ease-entry: cubic-bezier(.2, 0, 0, 1); --retech-x-ease-scan: cubic-bezier(.64, 0, .36, 1); --retech-x-ease-ui: cubic-bezier(.4, 0, .2, 1); --retech-x-dur-fast: 160ms; --retech-x-dur: 260ms; /* ── Hero 光效(克制化:7.5s 周期 / 峰值 0.26,见 CONVERSION.md §4)── */ --retech-x-cycle-scan: 7.5s; --retech-x-cycle-beam: 11s; --retech-x-scan-peak: 0.26; /* ── 断点(仅作文档;CSS 里按 1240 / 1080 / 700 写 @media)──────────── */ } /* 与 mu-base 主题重置等价(前台已 dequeue mu-base,见 inc/blocks.php) */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* * body 排版**逐字对齐原型**(`retech.css` 的 `body` 规则): * font-size: --fs-body(16px) · line-height: --lh-body(1.68) · color: --ink-2 * 实测差异:我原先写 `line-height: 1.5` —— 于是**全站每一行**都比原型矮 * (16px 字号下 24px vs 26.88px),而 `css-diff.mjs` 在 20/20 个页面上 * 都报这条。行高是级联的,父级错了所有子元素一起错。 * * ⚠️ **不要在 `theme.json` 里写 `styles.elements` 或 typography** —— 那是未分层输出, * 会压过整套 `@layer`(第一批的 E1 教训)。所以这里必须留在 reset 层。 */ body { margin: 0; color: var(--retech-x-ink-2); background: var(--retech-x-white); font-family: var(--wp--preset--font-family--primary, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); font-size: 16px; line-height: 1.68; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } /* 焦点环:统一用 flow 绿。原型先 `:focus { outline: none }` 再由 `:focus-visible` 提供可见环 —— 鼠标点击不出现环,键盘 Tab 一定出现。 这条必须留在 reset 层且不带 class,否则各块会各自为政、键盘可达性不一致。 */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--retech-x-flow); outline-offset: 3px; border-radius: 2px; } img { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; } h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; } /* * ⚠️ `figure` 单独再来一条 `!important` —— 只有它需要,别的元素不需要。 * * WP 核心是**未分层**输出的,里面有 `figure { margin: 0 0 1em }`;CSS 层叠规则下 * **分层规则一律输给未分层规则**(与特异性无关),所以上面那条 `figure { margin: 0 }` * 压不住它。实测(2026-09-23): * · `.retech-x-scope-media` 显式写了 `margin: 0`,站点 computed 仍是 * `margin-bottom: 16px`(1em @16px); * · 后果是 Material Scope 段的图框把该段顶高 16px,栅格从 587.69px 变 603.69px; * · 这个偏差**只出现在
上**(同一页的 p / h3 / img 全都与原型一致), * 所以修这一条就够,不必给整套 reset 加 `!important`。 * * 忠实性:原型 `retech.css:163` 就是 `figure { margin: 0 }`,全站没有任何一处 * 给
留外边距(retech.css / solutions.css 里 figure 的 margin 声明只有 * 三条,值全是 0)。所以这条是"把原型的 reset 真正落地",不是发明新样式。 * * 手法说明:层内 `!important` > 未分层 normal,这是本项目已确立的例外 * (见下方 .wp-site-blocks 的 overflow 修正);W1「零 important」指的是别用 * `!important` 打层内规则,不是禁止处理未分层的核心样式。 */ figure { margin: 0 !important; } /* * ── 放行:正文里需要外边距的三种 figure ────────────────────────────────── * * 原型对正文顶层的图片 / 表格 / 图集都给了 26px 外边距: * · `.art-body .wp-block-image { margin: 26px 0 }` (solutions.css:1018) * · `.art-body .wp-block-table { margin: 26px 0 }` (solutions.css:1030) * · `.art-body .media-grid { margin: 26px 0 }` (solutions.css:1767) * 上面那条全局复位把它们一并抹平了,所以必须在这里放行。 * * ⚠️ 为什么放行只能写在**本文件的本层**: * `!important` 声明在层叠里是**层序反转**的 —— 最先声明的层赢, * `retech-reset` 的 important 压过其后所有层的 important,**与特异性无关**。 * 实测(2026-09-23):写进块层 `retech-block` 或未分层,computed 恒为 * `margin: 0px`;产品段落里图集与上下文的间距每处少 52px、四段合计少 ~200px, * 单页整段几何从「一致」退回 -52px/段。 * 另外块文件**不允许**用 reset 层(scripts/check-css.mjs E3),所以也只能在这里。 * * ⚠️ 一旦本文件出现 `.retech-x-art-body`,`inc/css-auto-loader.php` 会把该类判定为 * 「全局已有」而不再为它入队 `blocks/article-body/style.css`。所以 * `retech/product-section` 与 `retech/pedia-article` 这两个**自己也输出 * `.retech-x-art-body`** 的块,已在各自 block.json 的 `style` 里显式声明 * 依赖 `retech-article-body-style`(article-body 块本身天然加载自己的样式)。 * 新增任何输出 `.retech-x-art-body` 的块时,必须同样显式声明,否则正文排版 * (88ch / 表格外框 / 斑马纹 / 图集网格)会静默失效。 * * ⚠️ 一律用**直接子元素**(`>`):只有正文顶层那三种块需要外边距。图集内部的 * `figure`(新闻图集内层图、产品图集图块)必须保持 0 —— 用后代选择器会把 * 它们一起打成 26px,新闻图集每张图之间就会多出 52px。 */ .retech-x-art-body > .wp-block-image, .retech-x-art-body > .wp-block-table, .retech-x-art-body > .wp-block-gallery { margin: 26px 0 !important; } /* 图集内层 figure 归零(原型 solutions.css:1019 `.art-body .wp-block-gallery figure`)。 */ .retech-x-art-body .wp-block-gallery figure { margin: 0 !important; } /* * ── 正文里三种 figure 的 26px 外边距在哪 ──────────────────────────────── * * 不在这里 —— 它们声明在 blocks/article-body/style.css 的 `@layer retech-reset` * 里(属主文件),原因有两条,缺一条就不成立: * * 1. **只有 reset 层压得住本层的 `figure { margin: 0 !important }`**。 * `!important` 声明在层叠里是**层序反转**的:先声明的层赢, * `retech-reset` 的 important 压过其后所有层的 important,与特异性无关。 * 实测:写进 `@layer retech-block` 或未分层,computed 恒为 `margin: 0px`。 * (`@layer` 是按**名字**全局归属的,所以属主文件里写 `@layer retech-reset` * 加入的就是这一层。) * 2. **放行规则不能写在本文件**。`inc/css-auto-loader.php` 判断「某个 * retech-x-* 类是不是全局已有」靠的是**扫本文件里出现过的类名**; * 一旦这里出现 `.retech-x-art-body`,该类的属主信息就从 class→块 索引里 * 消失,`blocks/article-body/style.css` **再也不会被入队** —— * 正文 88ch / 表格样式 / 图集网格会一起失效(实测:图集塌成竖排 8 张、 * 该段 9358px,整页 18779px)。这个坑已经踩过两次,改动本文件前先看 * inc/css-auto-loader.php 的索引逻辑。 */ /* ── Sticky header 定位修正 ───────────────────────────────────────── * WP 核心(未分层)在 .wp-site-blocks 等外壳上设 overflow,会截断 * sticky/fixed 头部;分层规则压不过未分层规则,此处 !important 是必要的 * (layered important > unlayered normal),见 css-conventions 背景说明。 */ .wp-site-blocks, .wp-block-template-part, .wp-block-group:has(> .retech-x-header-part), .retech-x-header-part { overflow: visible !important; } } /* ─────────────────────────── base(共享基座)─────────────────────────── */ @layer retech-base { /* ═══ 原型必需的两条全局修复(README §4.1)═══════════════════════════════ 这两条不是单页补丁,漏掉会全站出问题: 1) 深色区标题必须**显式**转白。`.h2` 的 color 特异性高于 `.sec--dark` 的继承,否则深色背景上会出现黑字(原型实测于各页 CTA 区块)。 2) 语义列表重置要覆盖**没有 class** 的 ul/ol。 浏览器默认给 ul/ol 加 padding-inline-start:40px,只写 ul[class] 会漏掉 面包屑里的
    、页脚 role="list" 等,导致内容与栅格不对齐。 */ .retech-x-dark .retech-x-h2, .retech-x-dark h2, .retech-x-section--dark .retech-x-h2, .retech-x-section--dark h2 { color: #fff; } .retech-x-dark .retech-x-section-lead, .retech-x-section--dark .retech-x-section-lead { color: var(--retech-x-w72); } :where(ul, ol):where([role="list"], [class]) { margin: 0; padding: 0; list-style: none; } /* 面包屑
      的显式重置见本层后面的 .retech-x-breadcrumb-list （用 :where() 的零特异性 reset 挡不住浏览器对 ol 的 padding-inline-start）。 */ /* 版心:嵌套时回满宽 */ /* * 版心 —— 与原型 `.container` 同构:`max-width` + **左右各 40px 内边距**。 * 实测:我原先写 `width: min(1360px, calc(100% - 40px))` 且**没有内边距**, * 于是 1440 视口下内容宽 **1360** 而行首对齐在 40px;原型的 `.container` * `max-width:1360 + padding:0 40px` 让**内容宽 1280**、行首也在 40px。 * 差 80px 会让每个段落的换行位置都不同(css-diff 在 20/20 页面报这条)。 */ .retech-x-wrap { box-sizing: border-box; width: 100%; max-width: var(--retech-x-container); margin: 0 auto; padding-left: 40px; padding-right: 40px; } .retech-x-wrap .retech-x-wrap { width: 100%; margin: 0; } /* 通用 section 原语(spec-table / faq / contact / 法律页 / 博客模板共用) */ .retech-x-section { padding: var(--retech-x-sec-y) 0; } /* 原型把段落纵距分成两档(实测 solutions.css): · 普通 `.sec` → --sec-y = **110px** · `.art-sec` / `.about-sec` / `.news-sec` / `.vid-sec` / `.prod-overview` / `.prod-related` / `.rel-sec` / `.cat-cross` / `.pedia-sec` / `.search-sec` → --sec-y-sm = **56px** 移植时这层区分丢了,于是**产品详情 / 新闻详情 / RetechPedia / About / Contact** 的每一个段落都拿到了 110px 而不是 56px(实测 8+3+2+1+1+1+1 处)。 这里用 `--pad-sm` 修饰类承载 56px 那一档;由各块的 `pad` 属性决定是否添加 (见 retech_site_section_pad_class())。 选择器写两段类名而不是单类:与上面的 `.retech-x-section` 同特异性时靠源码顺序 决胜太脆,直接提高特异性。 */ .retech-x-section.retech-x-section--pad-sm { padding-top: var(--retech-x-sec-y-sm); padding-bottom: var(--retech-x-sec-y-sm); } .retech-x-band { background: var(--retech-x-soft); } /* 整页滚动锁 —— 移动端菜单(retech-x-open)、询盘弹窗(retech-x-modal-open)、 图片灯箱(retech-x-lightbox-open)打开时用。放在全局文件是因为:body 级规则不 属于任何单个块,且三处都要用。用三个独立类名,避免「关掉弹窗顺手解了菜单的锁」。 */ body.retech-x-open, body.retech-x-modal-open, body.retech-x-lightbox-open { overflow: hidden; } /* 固定 Header 会遮挡锚点目标 —— 给所有可作为跳转目标的区块预留偏移。 同时覆盖 `#core-systems` 这类页内锚点与「跳到页面下方」的普通链接。 改 header 高度只需改 --retech-x-header-h,这里自动跟随。 */ section[id], [id].retech-x-section, .retech-x-hero { scroll-margin-top: calc(var(--retech-x-header-h) + 24px); } /* 深色区/浅色区背景(各 section 块用同一个 class,配色单一属主在此) */ .retech-x-section--light { background: var(--retech-x-white); } .retech-x-section--light.retech-x-alt { background: var(--retech-x-gray-light); } .retech-x-section--dark { background: var(--retech-x-graphite); color: var(--retech-x-w72); } .retech-x-dark { background: var(--retech-x-graphite); color: var(--retech-x-w72); } /* 眉标 —— 对齐原型 `.eyebrow`(12px / 800 / letter-spacing .11em / 下间距 18px) */ .retech-x-eyebrow { margin: 0 0 18px; color: var(--retech-x-accent); font-size: 12px; font-weight: 800; letter-spacing: 0.11em; line-height: 1.68; text-transform: uppercase; } .retech-x-section-title { margin: 10px 0 14px; color: var(--retech-x-brand-dark); font-size: clamp(28px, 4vw, 48px); line-height: 1.08; } .retech-x-section-lead { max-width: 790px; color: var(--retech-x-muted); font-size: 18px; } /* 左右分栏(带图 section 通用) */ .retech-x-split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 4vw, 64px); align-items: center; } /* ⚠️ 栅格子项必须显式 `min-width: 0`。 栅格子项的默认 `min-width: auto` 等于 **min-content**,也就是"拒绝收缩到内容 宽度以下"。内含横滑表格时这是致命的:`retech/spec-table` 的矩阵形态每个单元格 有 `min-width: 120px`,4 列 = 480px 最小宽度 —— 子项不肯收到 350px, 于是整条栅格被顶到 480px,`.retech-x-spec-scroll` 的 `overflow-x:auto` 也就 永远不触发(它自己已经 480 宽了,**没有可滚的余量**), 最终整页横向溢出:实测 `/systems/plastic-washing-systems/` 在 390px 视口下 `documentElement.scrollWidth` = **501**(视口 390)。 原型里这张表在**普通块容器** `.container` 内(不是栅格子项),所以同样的 `min-width: 120px` + `overflow-x:auto` 组合在原型的手机上正常横滑。 本站把表放进了自建的 `.retech-x-split`,必须自己补这一条。 (`.retech-x-wrap` 之外,凡是"横滑容器套在栅格/flex 子项里"的地方都要有它; 同类隐患见 blocks/process-route/style.css 头部的 `min-width: 0` 说明。) */ .retech-x-split > * { min-width: 0; } .retech-x-image-card { overflow: hidden; border-radius: var(--retech-x-radius); background: var(--retech-x-soft); box-shadow: var(--retech-x-shadow); } .retech-x-image-card img { width: 100%; height: 100%; object-fit: cover; } .retech-x-caption { padding: 10px 16px; color: var(--retech-x-muted); font-size: 13px; } /* 按钮(header CTA / hero / 表单 / 404 共用) */ .retech-x-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 0 22px; border: 1px solid transparent; border-radius: 6px; background: var(--retech-x-brand); color: var(--retech-x-white); font-weight: 700; cursor: pointer; transition: background 0.18s ease, transform 0.18s ease; white-space: nowrap; } .retech-x-button:hover { background: var(--retech-x-brand-dark); transform: translateY(-1px); } .retech-x-button--ghost { border-color: var(--retech-x-line); background: transparent; color: var(--retech-x-ink); } .retech-x-button--ghost:hover { background: var(--retech-x-soft); } /* ═══════════════════════════════════════════════════════════════════════════ 面包屑**轨迹**(单一属主在本文件) 为什么在这里而不是 retech/breadcrumb 块里:这段轨迹同时被三处消费 —— · retech/breadcrumb —— 独立条(自带底色),用于没有 hero 的页面 · retech/page-hero —— hero 内部顶部 · retech/detail-hero —— hero 内部顶部 ≥2 个块共用 → 基础样式唯一属主必须是全局文件;块文件只能定义自己的外壳。 配色走 CSS 变量 + 字面量兜底:hero 里是深底(白字系),独立条按 tone 覆盖。 ═══════════════════════════════════════════════════════════════════════════ */ /* 深底(默认):hero 内与深色条上的取值 */ .retech-x-hero, .retech-x-breadcrumb-bar { --retech-x-breadcrumb-fg: var(--retech-x-w60); --retech-x-breadcrumb-link: var(--retech-x-w72); --retech-x-breadcrumb-current: var(--retech-x-w90); --retech-x-breadcrumb-sep: var(--retech-x-w40); --retech-x-breadcrumb-hover: var(--retech-x-flow); } /* 浅底:独立条的 tone="light" */ .retech-x-breadcrumb-bar--light { --retech-x-breadcrumb-fg: var(--retech-x-ink-3); --retech-x-breadcrumb-link: var(--retech-x-ink-3); --retech-x-breadcrumb-current: var(--retech-x-ink); --retech-x-breadcrumb-sep: var(--retech-x-line); --retech-x-breadcrumb-hover: var(--retech-x-flow-dark); } .retech-x-breadcrumb { color: var(--retech-x-breadcrumb-fg, var(--retech-x-ink-3)); font-size: 13px; margin-bottom: 22px; /* ⚠️ 原型 `solutions.css:13` 是 `.breadcrumb { margin-bottom: 22px }` —— 移植时漏了这条,于是每个详情页 hero 里标题紧贴面包屑,hero 整块矮 22px (实测 1440:原型 650.33 / 站点 624.69)。 ⚠️ 也**不要**在这里写 `line-height`。原型只给 `.breadcrumb li` 设了 `font-size: var(--fs-xs)`,行高继续继承 body 的 `--lh-body`(1.68)→ 13×1.68 = 21.84px。移植时写了 `line-height: 1.4`(18.2px),于是整条轨迹矮 3.6px。 本文件下游的 `.retech-x-breadcrumb-item` 也不设行高,保持继承。 */ } /* 独立条(`.retech-x-breadcrumb-bar`)是本站为"无 hero 页面"补的形态,原型 359 处面包屑**全部**在 hero 内(实测全站 grep),所以原型没有对应样式; 它自带 18px 下内边距,再叠 22px 外边距就成了 40px,故这里抵消掉。 */ .retech-x-breadcrumb-bar .retech-x-breadcrumb { margin-bottom: 0; } /* ★ 浏览器默认给
        加 padding-inline-start:40px。全局 reset 用 :where() 保持零特异性,而这里的选择器带 class —— 必须在带 class 的这一层再显式重置 一次,否则整条轨迹会缩进 40px(原型 README §4.1 / CONVERSION.md §4 同一条修复)。 */ .retech-x-breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-inline-start: 0; margin: 0; list-style: none; } .retech-x-breadcrumb-item { display: flex; align-items: center; gap: 8px; color: var(--retech-x-breadcrumb-fg, var(--retech-x-ink-3)); font-size: 13px; } .retech-x-breadcrumb-link { color: var(--retech-x-breadcrumb-link, var(--retech-x-ink-3)); text-decoration: none; transition: color var(--retech-x-dur-fast) var(--retech-x-ease-ui); } .retech-x-breadcrumb-link:hover, .retech-x-breadcrumb-link:focus-visible { color: var(--retech-x-breadcrumb-hover, var(--retech-x-flow)); } /* 当前页(末项,非链接):比同级链接更亮一档 —— 原型 [aria-current="page"] */ .retech-x-breadcrumb-current { color: var(--retech-x-breadcrumb-current, var(--retech-x-ink)); } /* ★ 分隔符必须是显式 ,不用 ::before/::after —— 原型用 `li + li::before { content:"/" }` 时与条目共用 flex gap,出现过间距不一致的坑。 */ .retech-x-breadcrumb__sep { color: var(--retech-x-breadcrumb-sep, var(--retech-x-line)); } /* ══════════════════════════════════════════════════════════════════════════ 页面正文包装层(模板 `$page_body`)。 ⚠️ 这里**绝不能**给 `.wp-block-post-content` 加 `max-width`。第一版写了 `max-width: 840px`,后果是**整条区块序列**(含所有自渲染的全宽 section) 被一起压到 840px: · 产品 / 案例 / 视频 / 知识库文章的 hero 只剩 840px 宽,右侧空一大片 · `retech-x-wrap` 实测被压到 800px(版心本该 1360px) · 页面总高被拉长(实测产品页 19903px,原型 8000 上下) 而几何门禁(`layout-check.mjs`)只量「有没有横向溢出/破图」,**不报这种塌陷** —— 所以它一路全绿。视觉核验必须真的看图(见 `tools/visual-check.mjs`)。 正确做法:包装层只负责纵向留白;需要阅读宽度的块自己限宽 (`.retech-x-art-body` 有 88ch、`width=narrow` 的 section 有 980px)。 ══════════════════════════════════════════════════════════════════════════ */ .retech-x-page-content { padding: 0; } /* 纯文本页面(法务等)仍是**直接排在** post-content 里的段落 —— 给它们 一个阅读宽度,但用 `:where()` 把特异性降到 0,免得压住 section 里的块。 */ :where(.retech-x-page-content > .wp-block-post-content > p) { max-width: 840px; margin-inline: auto; } /* ── 404(模板 `retech-site//404`,见 inc/templates/search404.php)────────── 常规居中版式:巨型 404 → h1 → 说明 → 搜索 → 回首页 → 栏目入口。 本段原先只有 padding/text-align 两条,而模板当时用的是 page-hero + 12 张分诊卡(客户反馈「不像 404,像某个页面的模板」), 于是 `.retech-x-404` 成了**死规则**(全站 0 个元素带这个类)。2026-09-22 模板改回常规 404,这里补齐整段样式 —— 包括把 core/search 对齐到本站表单 原语(core 默认是方形 + 浏览器灰边 + #32373c 深灰按钮,与 --retech-x-r-md / 46px / 品牌绿按钮完全不同)。 */ .retech-x-404 { padding: 96px 0 120px; text-align: center; } /* 巨型「404」:装饰性(语义由 h1 承担),与站内大号序号同用品牌绿 */ .retech-x-404__code { margin: 0; color: var(--retech-x-flow); font-size: clamp(72px, 12vw, 132px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; } .retech-x-404__title { margin: 18px 0 0; color: var(--retech-x-ink); font-size: clamp(26px, 3.2vw, 38px); line-height: 1.18; } .retech-x-404__lede { max-width: 620px; margin: 16px auto 0; color: var(--retech-x-ink-2); font-size: 16px; line-height: 1.7; } /* 搜索:复用站内搜索表单原语(.retech-x-search-form 的版式属主是 header 块, 输入框/按钮观感来自 .retech-x-field / .retech-x-btn--primary)。 ⚠️ 三条约束(踩过): 1. **不要**在这里改 core/search 的观感 —— theme.json 生成的全局样式不在 @layer 里,未分层声明优先级高于任何 layer(与特异性无关),层内怎么写 都压不住。站内统一用自有表单原语正是为了绕开这一点。 2. `.retech-x-search-form` 的属主是 header 块(写在 retech-block 层), 所以它设过的属性(如 padding/gap)在本文件的 retech-base 层**改不动**; 这里只覆盖它没设的(max-width / margin / align-items / flex-wrap), padding 用外边距补偿。 3. **必须**给 `.retech-x-field` 归零 margin-bottom:`.retech-x-field` 的 18px 底距是给「字段容器」的,而站内搜索把该类直接挂在 `` 上, 在 flex 行里变成 18px 行内高度 —— 实测整行被撑到 64px、绿按钮被拉伸成 64px 而输入框只有 46px,基线错位。归零后 表单/输入框/按钮 同为 46px。 */ .retech-x-404 .retech-x-search-form { max-width: 460px; margin: 12px auto 0; /* 表单自带 18px 上下内距(页头属主),合计约 30px */ flex-wrap: wrap; align-items: center; text-align: left; } .retech-x-404 .retech-x-search-form .retech-x-field { flex: 1 1 260px; min-width: 0; margin: 0; } .retech-x-404__actions { margin: 26px 0 0; } /* 栏目入口:一行文字链接(替代原型的 12 张分诊卡 —— 卡片网格正是「像内容页」的主因) */ .retech-x-404__links-title { margin: 56px 0 0; padding-top: 26px; border-top: 1px solid var(--retech-x-line); color: var(--retech-x-ink-3); font-size: 12px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; } .retech-x-404__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 16px 0 0; padding: 0; list-style: none; } .retech-x-404__links li { margin: 0; } .retech-x-404__links a { color: var(--retech-x-ink-2); font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--retech-x-dur-fast) var(--retech-x-ease-ui), border-color var(--retech-x-dur-fast) var(--retech-x-ease-ui); } .retech-x-404__links a:hover { color: var(--retech-x-flow-dark); border-bottom-color: var(--retech-x-flow-dark); } /* 博客卡片列表(博客模板 query loop 的卡片外观) */ .retech-x-blog-archive .wp-block-post-template { gap: 32px 24px; } .retech-x-blog-archive .wp-block-post-template > li { margin: 0; } .retech-x-blog-archive .wp-block-post-featured-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--retech-x-radius); } .retech-x-blog-archive .wp-block-post-title { margin-top: 14px; font-size: 20px; line-height: 1.3; } .retech-x-blog-archive .wp-block-post-title a { color: var(--retech-x-brand-dark); } .retech-x-blog-archive .wp-block-post-excerpt { margin-top: 8px; color: var(--retech-x-muted); font-size: 15px; } .retech-x-blog-archive .wp-block-post-date { margin-top: 10px; color: var(--retech-x-muted); font-size: 13px; } .retech-x-blog-archive .wp-block-query-pagination { margin-top: 40px; justify-content: center; gap: 8px; } /* 博客详情页(single 模板:hero 带 + 正文 + 侧栏) */ .retech-x-post-hero { padding-bottom: 0; } .retech-x-post-hero .wp-block-post-title { margin-top: 10px; color: var(--retech-x-brand-dark); font-size: clamp(30px, 4.5vw, 52px); line-height: 1.1; } .retech-x-post-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; color: var(--retech-x-muted); font-size: 14px; } .retech-x-post-meta a { color: var(--retech-x-brand); } .retech-x-post-main { padding-top: 44px; } .retech-x-post-layout { display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; } .retech-x-post-article { max-width: 760px; } .retech-x-post-article .wp-block-post-featured-image img { border-radius: var(--retech-x-radius); } .retech-x-post-side { display: grid; gap: 24px; } .retech-x-post-side > * { padding: 20px; border: 1px solid var(--retech-x-line); border-radius: var(--retech-x-radius); } .retech-x-post-side h2 { margin-bottom: 10px; font-size: 16px; } /* 搜索页头部带(search 模板) */ .retech-x-search-head { padding-bottom: 0; } /* 法律页正文(inc/starter-content/legal.php 的 wp:html 内容) */ .retech-x-legal-body { max-width: 760px; margin-top: 26px; line-height: 1.7; } .retech-x-legal-body h2 { margin: 28px 0 10px; color: var(--retech-x-brand-dark); font-size: 22px; } .retech-x-legal-body h3 { margin: 20px 0 8px; font-size: 17px; } .retech-x-legal-body p { margin: 0 0 14px; } .retech-x-legal-body ul { margin: 0 0 14px; padding-left: 20px; } .retech-x-legal-body a { color: var(--retech-x-brand); text-decoration: underline; } /* retech-x-rich —— textarea 内联 mini-markdown 的共享容器（≥2 块可复用）。 只出

        /