/* Theme Name: GeneratePress — Minwen Fire Child Theme URI: https://minwenfire.com Description: ShipB2B child theme for Minwen Fire. GeneratePress parent theme. Tokens follow the approved Minwen design system: red is a controlled accent, never a full-page wash. Author: ShipB2B Template: generatepress Version: 1.0.0 Requires at least: 6.5 Text Domain: gp-minwenfire-child */ /* ── Roboto, self-hosted ────────────────────────────────────────────────────── Was loaded from fonts.googleapis.com. That request is render-blocking and third-party: measured at up to 4934ms on a local run, and its woff2 files returned 404 often enough that 11 of 25 pages failed browser QA on console and network errors alone. A gate whose verdict depends on a CDN's mood cannot tell anyone whether a page is shippable. Only the latin and latin-ext subsets are carried — this site publishes in English for overseas buyers. unicode-range still gates the download, so a page that never renders latin-ext never fetches it. If a language outside these subsets is ever added, its faces must be added here too; the fallback is otherwise a silent system-font substitution. Paths are relative to this stylesheet, so they resolve the same way in a local craft preview and on the live site. ─────────────────────────────────────────────────────────────────────────── */ /* latin-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(assets/fonts/roboto-latin-ext-400.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url(assets/fonts/roboto-latin-400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(assets/fonts/roboto-latin-ext-500.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url(assets/fonts/roboto-latin-500.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(assets/fonts/roboto-latin-ext-700.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-stretch: 100%; font-display: swap; src: url(assets/fonts/roboto-latin-700.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url(assets/fonts/roboto-latin-ext-800.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 800; font-stretch: 100%; font-display: swap; src: url(assets/fonts/roboto-latin-800.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; font-stretch: 100%; font-display: swap; src: url(assets/fonts/roboto-latin-ext-900.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; font-stretch: 100%; font-display: swap; src: url(assets/fonts/roboto-latin-900.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── Design tokens ──────────────────────────────────────────────────────────── Source: owner decision recorded in PROJECT_INFO.md on 2026-08-11, using the old-site design document as migration context. The logo file keeps its own #f0000c colour; web actions use the approved #d32235 adaptation. ─────────────────────────────────────────────────────────────────────────── */ :root { --mw-font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* 全站单一字体族。标题与正文同族，层级只靠字号阶梯与字重拉开，不靠第二款 字体——2026-08-13 业主的明确要求。这个变量保留是为了留住接口：标题一律 声明 var(--mw-font-heading)，日后若要换标题字体只改这一行，不必再回头 逐页改硬编码（页面排版此前 0% 走 token，正是这么失控的）。 */ --mw-font-heading: var(--mw-font-sans); /* ── 墨白红系统（2026-08-11 业主确定）────────────────────────────────── 大面积浅色表面统一为白；灰只用于组件内部描边、表格与辅助文字。 连续白色 section 靠间距、构图和内容密度区分，不使用横贯页面的分割线。 红只做受控动作与强调；证据区块用墨底，让真实工厂照片成为视觉重点。 */ --mw-color-ink: #181819; --mw-color-graphite: #3a3b3c; /* 墨 +18% 提亮，正文长读用 */ --mw-color-steel: #55575a; /* 墨与灰之间；4.5 是正文线，辅助文字也按它取 */ --mw-color-brand-red: #d32235; --mw-color-brand-red-deep: #a91a29; /* hover */ --mw-color-brand-red-text: #c01c2e; /* 红当文字时的唯一合法值 */ --mw-color-on-brand: #ffffff; --mw-color-brand-red-soft: #f2d3d7; /* 红提亮，仅作极浅底 */ --mw-color-cloud: #ffffff; /* 页面与浅色 section */ --mw-color-panel: #ffffff; /* 卡片、弹层与表单壳 */ --mw-color-panel-muted: #ffffff; /* 分组面；靠布局而非灰底区分 */ --mw-color-border: #a9adad; /* 灰压暗，1px 描边 */ --mw-color-success: #2f6b46; /* 唯一例外：成功态需要非红的语义色 */ --mw-color-footer: #181819; /* ── 动作表面规则（2026-08-14 业主裁定）──────────────────────────────── 主行动一律红实心白字，深底浅底都是。红是品牌主色，主行动就该带主色， 这条压过可读性上的相对优势。 次动作在深底用 ghost（白描边），在浅底用描边，避免两个红块并排。 留档：2026-08-13 夜我按实测对比度定成「深底用白实心」—— 红实心 on 墨底 #181819 = 3.42:1（过 3:1 非文本下限，但不宽裕） 白实心 on 墨底 = 17.74:1 对比度论证成立，品牌论证不成立：那样做红色在全站最强的位置缺席， 页面读起来不像这个品牌的页面。业主 08-14 裁定改回红实心，本行是真源， color_token_integrity_gate 读它，改这一行即全站生效。 深底红按钮的可读性用白字 + 足够字重保证（白字 on 红 = 5.19:1，过 AA）。 */ --mw-action-on-dark: primary; --mw-action-on-light: primary; --mw-font-ui: var(--mw-font-sans); --mw-font-display: var(--mw-font-heading); --mw-wrap: 1200px; --mw-wrap-text: 760px; --mw-radius: 4px; --mw-space-1: 4px; --mw-space-2: 8px; --mw-space-3: 16px; --mw-space-4: 24px; --mw-space-5: 32px; --mw-space-6: 48px; --mw-space-7: 64px; --mw-space-8: 96px; /* ── 排版阶梯（2026-08-13 补）──────────────────────────────────────────── 墨白红系统把层次交给「间距、构图和内容密度」，而字号一直没有真源： home 用了 17 档、about 19 档，各页自编，所以页面读起来是平的。 以下七档是全站唯一合法字号，页面不得再自行取值。 字重只用 400/700/900。global.css 里 131 处 750/850 不是可用字重：按 CSS 字重匹配规则它们与 800 一起落到同一张字体表，所以现在屏幕上「三档粗体」 实际只有一档。900 已在 functions.php 补进加载列表。 */ --mw-text-display: clamp(44px, 6vw, 82px); /* 仅 hero 主标题 */ --mw-text-h1: clamp(30px, 4vw, 52px); /* section 大标题 */ --mw-text-h2: clamp(22px, 2.2vw, 26px); /* 卡片 / 步骤标题 */ --mw-text-h3: 20px; /* 小标题、可点击标题 */ --mw-text-lead: clamp(17px, 1.6vw, 20px); /* hero 导语，正文与 h3 之间 */ --mw-text-body: 17px; /* 与 body 同值，长读基准 */ --mw-text-small: 15px; /* 卡片正文、次要正文 */ --mw-text-caption: 14px; /* 辅助文字、表格、规格行 */ --mw-text-micro: 12px; /* 标签、脚注、表头；不得再低 */ --mw-lh-tight: 1.08; /* display */ --mw-lh-heading: 1.2; /* h1–h3 */ --mw-lh-body: 1.65; --mw-tracking-display: -0.02em; /* 大字必须收紧，否则松垮 */ --mw-tracking-micro: 0.06em; /* 小字标签放开，才读得出是标签 */ /* letter-spacing 同样作用在空格上，所以收字距必然压掉词距：82px 标题按 -0.02em 收，单词间少 1.6px，"Fire Protection" 会粘成一坨。凡用 tracking-display 之处必须同时给 word-display，两者成对出现。 */ --mw-word-display: 0.08em; --mw-weight-body: 400; --mw-weight-strong: 700; --mw-weight-display: 900; } /* ── Reset / base ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--mw-color-cloud); color: var(--mw-color-graphite); font-family: var(--mw-font-ui); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { color: var(--mw-color-ink); font-family: var(--mw-font-display); line-height: 1.25; margin: 0 0 var(--mw-space-3); font-weight: 700; } h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.015em; } h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.01em; } h3 { font-size: clamp(20px, 2.2vw, 24px); } h4 { font-size: 19px; } p { margin: 0 0 var(--mw-space-3); } img, video { max-width: 100%; height: auto; } /* Components declare their own colours; no page-level `a { color: inherit }`. */ a { color: var(--mw-color-brand-red); text-decoration: none; } a:hover, a:focus { color: var(--mw-color-brand-red-deep); text-decoration: underline; } :focus-visible { outline: 2px solid var(--mw-color-brand-red); outline-offset: 2px; } .mw-wrap { width: 100%; max-width: var(--mw-wrap); margin-inline: auto; padding-inline: var(--mw-space-4); } .mw-skip-link { position: absolute; left: -9999px; } .mw-skip-link:focus { left: var(--mw-space-3); top: var(--mw-space-3); z-index: 999; background: var(--mw-color-panel); padding: var(--mw-space-2) var(--mw-space-3); border: 2px solid var(--mw-color-brand-red); } /* ── Buttons ──────────────────────────────────────────────────────────────── */ .mw-btn { display: inline-block; padding: 13px 26px; border-radius: var(--mw-radius); font-weight: 600; font-size: 16px; line-height: 1.2; text-align: center; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .mw-btn:hover, .mw-btn:focus { text-decoration: none; } .mw-btn--primary { background: var(--mw-color-brand-red); border-color: var(--mw-color-brand-red); color: #ffffff; } .mw-btn--primary:hover, .mw-btn--primary:focus { background: var(--mw-color-brand-red-deep); border-color: var(--mw-color-brand-red-deep); color: #ffffff; } .mw-btn--secondary { background: transparent; border-color: var(--mw-color-ink); color: var(--mw-color-ink); } .mw-btn--secondary:hover, .mw-btn--secondary:focus { background: rgba(23, 26, 31, .05); color: var(--mw-color-ink); } /* ── Site header ────────────────────────────────────────────────────────────── Class names follow template-parts/header.php, which shipb2b-core.js also drives. Renaming them here would break both. ─────────────────────────────────────────────────────────────────────────── */ .mw-site-header { background: var(--mw-color-panel); border-bottom: 1px solid var(--mw-color-border); position: sticky; top: 0; z-index: 100; } .mw-site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--mw-space-4); min-height: 72px; } .mw-site-header__logo { display: flex; align-items: center; gap: var(--mw-space-2); } .mw-site-header__logo img { display: block; max-height: 44px; width: auto; } .mw-site-header__logo-text { font-weight: 700; font-size: 20px; color: var(--mw-color-ink); letter-spacing: -0.01em; } .mw-site-header__cta { flex-shrink: 0; } .mw-site-header__burger { display: none; width: 44px; height: 44px; background: var(--mw-color-panel); border: 1px solid var(--mw-color-border); border-radius: var(--mw-radius); padding: 10px; cursor: pointer; color: var(--mw-color-ink); } .mw-site-header__burger span { display: block; width: 100%; height: 2px; margin: 4px 0; background: currentColor; } /* ── Primary nav ──────────────────────────────────────────────────────────── */ .mw-site-nav { display: flex; align-items: center; } .mw-site-nav__list { display: flex; align-items: center; gap: var(--mw-space-4); list-style: none; margin: 0; padding: 0; } .mw-site-nav__item { position: static; } .mw-site-nav__item--has-dropdown:not(.mw-site-nav__item--mega) { position: relative; } .mw-site-nav__control { display: flex; align-items: stretch; } .mw-site-nav__link { display: inline-flex; align-items: center; color: var(--mw-color-ink); font-size: 15px; font-weight: 500; padding: 24px 0; } .mw-site-nav__submenu-toggle { display: inline-grid; place-items: center; width: 28px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--mw-color-ink); cursor: pointer; } .mw-site-nav__submenu-toggle:hover, .mw-site-nav__submenu-toggle:focus-visible { color: var(--mw-color-brand-red); } .mw-site-nav__link:hover, .mw-site-nav__link:focus, .mw-site-nav__link[aria-current="page"] { color: var(--mw-color-brand-red); text-decoration: none; } /* ── Header over the hero, then stuck ───────────────────────────────────────── shipb2b-core.js adds body.mw-has-hero on pages that open with a hero and toggles .is-scrolled on the header past 24px. Until 2026-08-14 it queried `.mw-header` while this theme renders `.mw-site-header`, so it returned at its first line and neither state ever existed: every page carried the same solid white bar, sitting on top of a dark hero photo. Two states, one hover colour. Over the hero the bar is transparent and its type is white; once stuck it takes the panel background and ink type. Hover is brand red in both, and it is colour only — the 2px border-bottom that used to mark it read as an underline under a nav item. ─────────────────────────────────────────────────────────────────────────── */ .mw-has-hero .mw-site-header { position: absolute; inset-inline: 0; background: transparent; border-bottom-color: transparent; transition: background-color .18s ease, border-color .18s ease; } .mw-has-hero .mw-site-header .mw-site-nav__link, .mw-has-hero .mw-site-header .mw-site-nav__submenu-toggle, .mw-has-hero .mw-site-header .mw-site-header__logo-text { color: var(--mw-color-on-brand); } .mw-has-hero .mw-site-header .mw-site-nav__link:hover, .mw-has-hero .mw-site-header .mw-site-nav__link:focus, .mw-has-hero .mw-site-header .mw-site-nav__link[aria-current="page"], .mw-has-hero .mw-site-header .mw-site-nav__submenu-toggle:hover, .mw-has-hero .mw-site-header .mw-site-nav__submenu-toggle:focus-visible { color: var(--mw-color-brand-red); } .mw-has-hero .mw-site-header.is-scrolled { position: fixed; top: 0; background: var(--mw-color-panel); border-bottom-color: var(--mw-color-border); } .mw-has-hero .mw-site-header.is-scrolled .mw-site-nav__link, .mw-has-hero .mw-site-header.is-scrolled .mw-site-nav__submenu-toggle, .mw-has-hero .mw-site-header.is-scrolled .mw-site-header__logo-text { color: var(--mw-color-ink); } .mw-has-hero .mw-site-header.is-scrolled .mw-site-nav__link:hover, .mw-has-hero .mw-site-header.is-scrolled .mw-site-nav__link:focus, .mw-has-hero .mw-site-header.is-scrolled .mw-site-nav__link[aria-current="page"], .mw-has-hero .mw-site-header.is-scrolled .mw-site-nav__submenu-toggle:hover, .mw-has-hero .mw-site-header.is-scrolled .mw-site-nav__submenu-toggle:focus-visible { color: var(--mw-color-brand-red); } .mw-site-nav__chevron { width: 10px; height: 10px; transition: transform .15s ease; } .mw-site-nav__dropdown { position: absolute; top: 100%; left: 0; min-width: 260px; background: var(--mw-color-panel); border: 1px solid var(--mw-color-border); border-radius: var(--mw-radius); box-shadow: 0 8px 24px rgba(23, 26, 31, .1); padding: var(--mw-space-2); list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; z-index: 20; } .mw-site-nav__item.is-open .mw-site-nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .mw-site-nav__item.is-open .mw-site-nav__chevron { transform: rotate(180deg); } .mw-site-nav__dropdown-link { display: block; padding: 10px 12px; border-radius: var(--mw-radius); color: var(--mw-color-graphite); font-size: 15px; } .mw-site-nav__dropdown-link:hover, .mw-site-nav__dropdown-link:focus { background: var(--mw-color-cloud); color: var(--mw-color-brand-red); text-decoration: none; } .mw-site-nav__mega { position: absolute; top: calc(100% - 1px); left: 0; right: 0; z-index: 30; padding: 26px 0 30px; border-top: 1px solid var(--mw-color-border); border-bottom: 1px solid var(--mw-color-border); background: var(--mw-color-panel); box-shadow: 0 24px 52px rgba(23, 26, 31, .14); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; } .mw-site-nav__item.is-open .mw-site-nav__mega { opacity: 1; visibility: visible; transform: translateY(0); } .mw-site-nav__mega-inner { display: grid; grid-template-columns: minmax(150px, .65fr) minmax(0, 3fr); gap: 34px; } .mw-site-nav__mega-inner:has(.mw-site-nav__mega-feature) { grid-template-columns: minmax(120px, .5fr) minmax(0, 2.7fr) minmax(250px, .95fr); gap: 30px; align-items: center; } .mw-site-nav__mega-overview { padding-right: 24px; border-right: 1px solid var(--mw-color-border); } .mw-site-nav__mega-overview p { margin: 0 0 14px; color: var(--mw-color-ink); font-size: 18px; font-weight: 700; } .mw-site-nav__mega-overview a { white-space: nowrap; } .mw-site-nav__mega-overview a, .mw-site-nav__mega-group a { color: var(--mw-color-graphite); text-decoration: none; } .mw-site-nav__mega-overview a:hover, .mw-site-nav__mega-group a:hover { color: var(--mw-color-brand-red); } .mw-site-nav__mega-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .mw-site-nav__mega--taxonomy_matrix .mw-site-nav__mega-groups, .mw-site-nav__mega--compact_directory .mw-site-nav__mega-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* featured 变体下分组列按内容取宽 —— 等分三列会把长标签压成两行。 只作用于这个变体,taxonomy_matrix / compact_directory 的四列不受影响。 */ .mw-site-nav__mega--featured_media_panel .mw-site-nav__mega-groups { grid-template-columns: repeat(3, minmax(0, max-content)); justify-content: space-between; column-gap: 34px; } .mw-site-nav__mega-feature img { aspect-ratio: 16 / 9; } .mw-site-nav__mega-group h2 { margin: 0 0 10px; color: var(--mw-color-steel); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .mw-site-nav__mega-group ul { margin: 0; padding: 0; list-style: none; } .mw-site-nav__mega-group li + li { margin-top: 4px; } .mw-site-nav__mega-group a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; } .mw-site-nav__mega-group a span { opacity: 0; transform: translateX(-4px); transition: opacity .16s ease, transform .16s ease; } .mw-site-nav__mega-group a:hover span { opacity: 1; transform: translateX(0); } .mw-site-nav__mega-feature { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--mw-radius); background: var(--mw-color-cloud); color: var(--mw-color-graphite); text-decoration: none; } .mw-site-nav__mega-feature img { width: 100%; aspect-ratio: 7 / 4; border-radius: var(--mw-radius); object-fit: cover; } .mw-site-nav__mega-feature small { color: var(--mw-color-brand-red); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .mw-site-nav__mega-feature strong { color: var(--mw-color-ink); } .mw-site-nav__mega-feature span { color: var(--mw-color-steel); font-size: 13px; } .mw-language-switcher { position: relative; flex: 0 0 auto; } .mw-language-switcher summary { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 4px; color: var(--mw-color-ink); font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; } .mw-language-switcher summary::-webkit-details-marker { display: none; } .mw-language-switcher__chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .16s ease; } .mw-language-switcher[open] .mw-language-switcher__chevron { transform: rotate(225deg) translate(-1px, -1px); } .mw-language-switcher ul { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; min-width: 150px; margin: 0; padding: 7px; border: 1px solid var(--mw-color-border); border-radius: var(--mw-radius); background: var(--mw-color-panel); box-shadow: 0 16px 36px rgba(23, 26, 31, .14); list-style: none; } .mw-language-switcher a { display: block; padding: 8px 10px; border-radius: var(--mw-radius); color: var(--mw-color-graphite); font-size: 13px; text-decoration: none; } .mw-language-switcher a:hover, .mw-language-switcher a[aria-current="true"] { background: var(--mw-color-cloud); color: var(--mw-color-brand-red); } /* ── Mobile nav ───────────────────────────────────────────────────────────── */ .mw-mobile-nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); background: var(--mw-color-panel); z-index: 300; transform: translateX(100%); transition: transform .2s ease; display: flex; flex-direction: column; overflow-y: auto; } .mw-mobile-nav.is-open { transform: translateX(0); } .mw-mobile-nav__overlay { position: fixed; inset: 0; background: rgba(16, 20, 24, .5); z-index: 290; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; } .mw-mobile-nav__overlay.is-open { opacity: 1; visibility: visible; } .mw-mobile-nav__header { display: flex; align-items: center; justify-content: space-between; padding: var(--mw-space-3) var(--mw-space-4); border-bottom: 1px solid var(--mw-color-border); } .mw-mobile-nav__close { display: grid; align-content: center; gap: 4px; width: 44px; height: 44px; padding: 10px; background: none; border: none; cursor: pointer; color: var(--mw-color-ink); } .mw-mobile-nav__close span { display: block; width: 100%; height: 2px; background: currentColor; } .mw-mobile-nav__list { list-style: none; margin: 0; padding: var(--mw-space-2) 0; flex: 1; } .mw-mobile-nav__item--group { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--mw-color-border); } .mw-mobile-nav__link { display: block; padding: 14px var(--mw-space-4); color: var(--mw-color-ink); font-size: 16px; font-weight: 500; } .mw-mobile-nav__link:hover, .mw-mobile-nav__link:focus { background: var(--mw-color-cloud); text-decoration: none; } .mw-mobile-nav__sub { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0 0 var(--mw-space-2); background: var(--mw-color-cloud); } .mw-mobile-nav--accordion-ready .mw-mobile-nav__sub { display: none; } .mw-mobile-nav--accordion-ready .mw-mobile-nav__item.is-open > .mw-mobile-nav__sub { display: block; } /* header.php 把子菜单项输出成裸 （没有 .mw-mobile-nav__link 类），而本站全局 `a` 的默认色就是品牌红（见本文件「Components declare their own colours」契约）， 组件必须自己声明颜色。原选择器写成 .mw-mobile-nav__sub .mw-mobile-nav__link， 模板从未输出该类 → 规则一直不生效 → 整片下拉继承全局红。改用元素选择器， 与 keytopshoes 的 .kt-mobile-nav__sub a 同一约定。2026-09-15 修。 注：原本靠 .mw-mobile-nav__link 提供的 display/padding 也一并补上，否则裸 只有 padding-left、没有块级盒子和纵向内距，点按区会塌成一行文字。 */ .mw-mobile-nav__sub a { display: block; padding: 14px var(--mw-space-4) 14px var(--mw-space-6); font-size: 15px; font-weight: 400; color: var(--mw-color-graphite); text-decoration: none; } .mw-mobile-nav__sub a:hover, .mw-mobile-nav__sub a:focus { color: var(--mw-color-brand-red); text-decoration: none; } .mw-mobile-nav__footer { padding: var(--mw-space-4); border-top: 1px solid var(--mw-color-border); } .mw-mobile-nav__footer .mw-btn { width: 100%; } .mw-mobile-nav__toggle { display: grid; place-items: center; width: 52px; background: none; border: none; cursor: pointer; padding: 0; color: var(--mw-color-ink); } .mw-mobile-nav__toggle svg { width: 14px; height: 9px; fill: none; transition: transform .16s ease; } .mw-mobile-nav__toggle path { stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .mw-mobile-nav__item.is-open > .mw-mobile-nav__toggle svg { transform: rotate(180deg); } .mw-mobile-nav__languages { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .mw-mobile-nav__languages a { padding: 7px 10px; border: 1px solid var(--mw-color-border); border-radius: 999px; color: var(--mw-color-graphite); font-size: 12px; text-decoration: none; } /* ── Modal (RFQ + exit intent) ────────────────────────────────────────────── */ .mw-modal, .mw-exit-modal { position: fixed; inset: 0; z-index: 400; display: none; align-items: center; justify-content: center; padding: var(--mw-space-4); } .mw-modal.is-open, .mw-exit-modal.is-open { display: flex; } .mw-modal__overlay { position: absolute; inset: 0; background: rgba(16, 20, 24, .6); } .mw-modal__box { position: relative; background: var(--mw-color-panel); border-radius: var(--mw-radius); padding: var(--mw-space-6); width: min(560px, 100%); max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(16, 20, 24, .25); } .mw-modal__close { position: absolute; top: var(--mw-space-3); right: var(--mw-space-3); background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--mw-color-steel); padding: var(--mw-space-1); } .mw-modal__close:hover { color: var(--mw-color-ink); } .mw-modal__tag { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mw-color-brand-red); margin-bottom: var(--mw-space-2); } .mw-modal__title { font-size: 24px; margin: 0 0 var(--mw-space-2); } .mw-modal__sub { color: var(--mw-color-graphite); font-size: 15px; margin-bottom: var(--mw-space-4); } /* ── Floating actions ─────────────────────────────────────────────────────── */ .mw-floating-actions { position: fixed; right: var(--mw-space-4); bottom: var(--mw-space-4); display: flex; flex-direction: column; gap: var(--mw-space-2); z-index: 200; } .mw-floating-actions__btn { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--mw-color-panel); border: 1px solid var(--mw-color-border); box-shadow: 0 4px 14px rgba(16, 20, 24, .16); cursor: pointer; color: var(--mw-color-ink); } .mw-floating-actions__btn--whatsapp { background: #25d366; border-color: #25d366; color: #ffffff; } .mw-floating-actions__btn--top { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; } .mw-floating-actions__btn--top.is-visible { opacity: 1; visibility: visible; } /* ── Site footer ──────────────────────────────────────────────────────────── */ .mw-footer { background: var(--mw-color-footer); color: #b9c0c8; padding: var(--mw-space-7) 0 var(--mw-space-5); /* 原来有 margin-top: var(--mw-space-8) —— 实测每一页都在正文末节和页脚之间 留出 96px。而 16 页里 13 页的末节是深色 CTA,跟页脚同色,中间就夹着一条 浅色空条。页脚自己有 var(--mw-space-7) 上内边距,分隔已经够了。 */ margin-top: 0; } .mw-footer a { color: #d6dbe0; } .mw-footer a:hover, .mw-footer a:focus { color: #ffffff; } .mw-footer h2, .mw-footer h3 { color: #ffffff; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; } /* 栅格里是 5 个子项:品牌块 + Products / Solutions / Trust / Resources。 原来写的是 repeat(3, 1fr) —— 4 列装 5 项,Resources(Blog 在里面)被挤到第二行、 贴在最左边,右侧整片空着。列数改成 5,间距同时收窄,四列链接才排得下。 */ .mw-footer__grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: var(--mw-space-5); } .mw-footer__list { list-style: none; margin: 0; padding: 0; } .mw-footer__list li { margin-bottom: var(--mw-space-2); font-size: 15px; } .mw-footer__bottom { margin-top: var(--mw-space-6); padding-top: var(--mw-space-4); border-top: 1px solid rgba(255, 255, 255, .12); font-size: 14px; color: #8b939c; display: flex; justify-content: space-between; gap: var(--mw-space-3); flex-wrap: wrap; } /* ── Article / blog ─────────────────────────────────────────────────────────── 427 live posts render through single.php, so this block carries them. ─────────────────────────────────────────────────────────────────────────── */ .mw-article { background: var(--mw-color-panel); padding: var(--mw-space-7) 0 var(--mw-space-6); } .mw-article__head { max-width: var(--mw-wrap-text); margin: 0 auto var(--mw-space-5); } .mw-article__meta { font-size: 14px; color: var(--mw-color-steel); display: flex; gap: var(--mw-space-3); flex-wrap: wrap; margin-bottom: var(--mw-space-3); } .mw-article__meta a { color: var(--mw-color-graphite); } .mw-article__body { max-width: var(--mw-wrap-text); margin: 0 auto; } .mw-article__body > * + * { margin-top: var(--mw-space-4); } /* 正文行高的真源。此前每篇文章都靠

内联写死, 于是样式不在样式表里、也无法整站调整。内联优先级更高,所以既有文章渲染不变; 新文章不必再写内联(taste_skill 的 inline_styles 会红)。 */ .mw-article__body p { line-height: 1.8; } .mw-article__body h2 { margin-top: var(--mw-space-6); } .mw-article__body h3 { margin-top: var(--mw-space-5); } .mw-article__body ul, .mw-article__body ol { padding-left: 22px; margin: 0 0 var(--mw-space-3); } .mw-article__body li { margin-bottom: var(--mw-space-2); } .mw-article__body blockquote { margin: var(--mw-space-4) 0; padding: var(--mw-space-3) var(--mw-space-4); border-left: 3px solid var(--mw-color-brand-red); background: var(--mw-color-cloud); color: var(--mw-color-ink); } .mw-article__body img { border-radius: var(--mw-radius); } .mw-article__body table { width: 100%; border-collapse: collapse; font-size: 15px; margin: var(--mw-space-4) 0; } .mw-article__body th, .mw-article__body td { border: 1px solid var(--mw-color-border); padding: 10px 12px; text-align: left; vertical-align: top; } .mw-article__body th { background: var(--mw-color-panel-muted); color: var(--mw-color-ink); font-weight: 600; } /* Wide content must scroll inside its own box, never the page. */ .mw-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .mw-article__cta { max-width: var(--mw-wrap-text); margin: var(--mw-space-7) auto 0; padding: var(--mw-space-5); background: var(--mw-color-cloud); border: 1px solid var(--mw-color-border); border-radius: var(--mw-radius); } .mw-article__cta h2 { margin-top: 0; font-size: 22px; } /* ── Archive / category ───────────────────────────────────────────────────── */ .mw-archive { padding: var(--mw-space-7) 0; } .mw-archive__head { margin-bottom: var(--mw-space-6); max-width: var(--mw-wrap-text); } .mw-archive__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--mw-space-4); } .mw-card { background: var(--mw-color-panel); border: 1px solid var(--mw-color-border); border-radius: var(--mw-radius); padding: var(--mw-space-4); display: flex; flex-direction: column; gap: var(--mw-space-2); } .mw-card__title { font-size: 19px; margin: 0; } .mw-card__title a { color: var(--mw-color-ink); } .mw-card__title a:hover, .mw-card__title a:focus { color: var(--mw-color-brand-red); text-decoration: none; } .mw-card__meta { font-size: 13px; color: var(--mw-color-steel); } .mw-card__excerpt { font-size: 15px; margin: 0; } .mw-pagination { margin-top: var(--mw-space-6); display: flex; gap: var(--mw-space-2); flex-wrap: wrap; align-items: center; } .mw-pagination .page-numbers { display: inline-block; /* 8px 内边距差 1px 到 44px 触控底线 */ padding: 11px 15px; border: 1px solid var(--mw-color-border); border-radius: var(--mw-radius); background: var(--mw-color-panel); color: var(--mw-color-ink); font-size: 15px; } .mw-pagination .page-numbers:hover { border-color: var(--mw-color-brand-red); text-decoration: none; } .mw-pagination .page-numbers.current { background: var(--mw-color-brand-red); border-color: var(--mw-color-brand-red); color: #ffffff; } /* ── 404 ──────────────────────────────────────────────────────────────────── */ .mw-404 { padding: var(--mw-space-8) 0; text-align: center; } .mw-404__code { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--mw-color-steel); margin-bottom: var(--mw-space-3); } .mw-404__routes { display: flex; gap: var(--mw-space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--mw-space-5); } /* ── Fluent Forms ───────────────────────────────────────────────────────────── The plugin ships its own look; these rules pull it onto the token system so forms do not read as a bolted-on widget. ─────────────────────────────────────────────────────────────────────────── */ .fluentform .ff-el-input--label label { color: var(--mw-color-ink); font-weight: 600; font-size: 15px; } .fluentform .ff-el-form-control { border: 1px solid var(--mw-color-border); border-radius: var(--mw-radius); padding: 11px 13px; font-size: 16px; font-family: var(--mw-font-ui); color: var(--mw-color-ink); background: var(--mw-color-panel); width: 100%; } .fluentform .ff-el-form-control:focus { border-color: var(--mw-color-brand-red); box-shadow: 0 0 0 3px rgba(215, 40, 40, .2); outline: none; } .fluentform .ff-btn-submit { background: var(--mw-color-brand-red); border: 1px solid var(--mw-color-brand-red); color: #ffffff; padding: 13px 26px; border-radius: var(--mw-radius); font-weight: 600; font-size: 16px; cursor: pointer; } .fluentform .ff-btn-submit:hover { background: var(--mw-color-brand-red-deep); border-color: var(--mw-color-brand-red-deep); } .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--mw-color-brand-red); } .fluentform .error-text, .fluentform .text-danger { color: var(--mw-color-brand-red-deep); font-size: 14px; } .ff-message-success { background: rgba(15, 122, 74, .08); border: 1px solid var(--mw-color-success); color: var(--mw-color-success); padding: var(--mw-space-3); border-radius: var(--mw-radius); } /* ── Breadcrumb ───────────────────────────────────────────────────────────── */ .mw-breadcrumb { font-size: 14px; color: var(--mw-color-steel); padding: var(--mw-space-4) 0 0; display: flex; gap: var(--mw-space-2); flex-wrap: wrap; align-items: center; } .mw-breadcrumb a { color: var(--mw-color-graphite); } .mw-breadcrumb a:hover { color: var(--mw-color-brand-red); } .mw-breadcrumb span { color: var(--mw-color-border); } /* ── Category chips on the blog index ─────────────────────────────────────── */ .mw-topics { margin-bottom: var(--mw-space-6); } .mw-topics__list { display: flex; flex-wrap: wrap; gap: var(--mw-space-2); list-style: none; margin: 0; padding: 0; } .mw-topics__link { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--mw-color-border); border-radius: 100px; background: var(--mw-color-panel); color: var(--mw-color-ink); font-size: 14px; font-weight: 500; } .mw-topics__link:hover, .mw-topics__link:focus { border-color: var(--mw-color-brand-red); color: var(--mw-color-brand-red); text-decoration: none; } .mw-topics__count { font-size: 12px; color: var(--mw-color-steel); background: var(--mw-color-cloud); padding: 1px 7px; border-radius: 100px; } /* ── Archive head ─────────────────────────────────────────────────────────── */ .mw-archive__lede { font-size: 18px; color: var(--mw-color-graphite); max-width: var(--mw-wrap-text); margin: 0 0 var(--mw-space-3); } .mw-archive__intro { max-width: var(--mw-wrap-text); } .mw-archive__count { font-size: 14px; color: var(--mw-color-steel); margin: 0; } /* ── Card extras ──────────────────────────────────────────────────────────── */ .mw-card__cat { color: var(--mw-color-brand-red); font-weight: 600; } .mw-card__meta { display: flex; gap: var(--mw-space-3); flex-wrap: wrap; } .mw-card__more { margin-top: auto; padding-top: var(--mw-space-2); font-size: 15px; font-weight: 600; color: var(--mw-color-brand-red); align-self: flex-start; } .mw-card__more::after { content: " →"; } /* ── Article extras ───────────────────────────────────────────────────────── */ .mw-article__standfirst { font-size: 19px; line-height: 1.6; color: var(--mw-color-graphite); margin: var(--mw-space-3) 0 0; } .mw-related { max-width: var(--mw-wrap-text); margin: var(--mw-space-7) auto 0; } .mw-related__title { font-size: 22px; margin-bottom: var(--mw-space-4); } .mw-related .mw-archive__grid { grid-template-columns: 1fr; gap: var(--mw-space-3); } .mw-related .mw-card { padding: var(--mw-space-3) var(--mw-space-4); } .mw-related .mw-card__title { font-size: 17px; } .mw-related .mw-card__excerpt { display: none; } .mw-postnav { max-width: var(--mw-wrap-text); margin: var(--mw-space-6) auto 0; padding-top: var(--mw-space-4); border-top: 1px solid var(--mw-color-border); display: flex; justify-content: space-between; gap: var(--mw-space-4); font-size: 15px; } .mw-postnav__prev { max-width: 48%; } .mw-postnav__next { max-width: 48%; text-align: right; margin-left: auto; } .mw-postnav a { color: var(--mw-color-graphite); } .mw-postnav a:hover { color: var(--mw-color-brand-red); } /* ── Pagination ───────────────────────────────────────────────────────────── */ .mw-pagination { margin-top: var(--mw-space-6); } .mw-pagination__links { display: flex; gap: var(--mw-space-2); flex-wrap: wrap; align-items: center; } .mw-pagination__status { margin: var(--mw-space-3) 0 0; font-size: 14px; color: var(--mw-color-steel); } .mw-pagination .page-numbers.dots { border: none; background: none; padding-inline: 4px; } /* ── Responsive ─────────────────────────────────────────────────────────────── Breakpoints live with the component, so page-level overrides never flatten them (the three-column-on-mobile lesson). ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .mw-footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--mw-space-5); } } @media (max-width: 768px) { body { font-size: 16px; } /* Desktop nav gives way to the mw-mobile-nav drawer. */ .mw-site-nav { display: none; } .mw-site-header__burger { display: inline-block; } .mw-language-switcher { display: none; } .mw-site-header__cta { display: none; } .mw-site-header__inner { min-height: 60px; } .mw-modal__box { padding: var(--mw-space-4); } .mw-floating-actions { right: var(--mw-space-3); bottom: var(--mw-space-3); } .mw-archive__grid { grid-template-columns: 1fr; } .mw-footer__grid { grid-template-columns: 1fr; gap: var(--mw-space-4); } .mw-article { padding: var(--mw-space-5) 0; } } @media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; } } @media print { .mw-header, .mw-footer, .mw-article__cta { display: none; } body { background: #ffffff; } } /* ═══ 图片灯箱（2026-08-18 切主题当天补）═══ shipb2b-core.js 的 initLightbox() 在页面加载时就往 末尾插一个

，打开时给它加 .mw-lb-open。 这段 CSS 一直没写过 —— global.css、style.css、以及收作用域之前的备份里都没有。 后果:那个 div 以 position:static 留在文档流里,1440×28 的空条,里面一个 src 为空的 。浏览器 QA 每一页都报"1 张坏图",而它就是这一张。Frost 是 FSE 主题不加载 shipb2b-core.js,所以这个缺陷在切换之前一次都没暴露过 —— 和那两个报价弹窗同一类: 模板层的代码路径第一次真正跑起来。 写进 style.css 而不是 global.css:这个覆盖层挂在 上,在 [class*="shipb2b-packaged--"] 作用域之外,写进作用域块它永远匹配不上。 */ .mw-lightbox-overlay { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: var(--mw-space-5, 32px); background: rgba(12, 12, 14, .88); cursor: zoom-out; } .mw-lightbox-overlay.mw-lb-open { display: flex; } .mw-lightbox-overlay img { max-width: min(100%, 1200px); max-height: 90vh; width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 24px 64px rgba(0, 0, 0, .5); cursor: default; } @media (prefers-reduced-motion: no-preference) { .mw-lightbox-overlay.mw-lb-open img { animation: mw-lb-in .18s ease-out; } @keyframes mw-lb-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } } } /* ═══ 页脚排版收口（2026-08-18）═══ 之前的问题，都能在 1440 截图上直接看出来： 品牌块是一行加粗文字 "Minwen Fire"，而页头有 logo —— 同一个站两种品牌呈现。 链接列的行距按单行项设定，"Building & Commercial Fire Protection" 这类 断成两行之后，两行之间的距离和两个不同链接之间的距离一样大， 读者分不清哪两行属于同一条。 列标题与首条链接之间的间距比链接之间还小，层级读反了。 logo 是 1096×222 的红色字标（透明底），压在 #181819 上对比度足够， 不需要另做深色版。限高 34px 让它和列标题在同一条视觉基线附近。 */ .mw-footer__brand { max-width: 280px; } .mw-footer__logo { display: inline-block; margin: 0 0 16px; line-height: 0; } .mw-footer__logo img { display: block; width: auto; height: 34px; max-width: 100%; } .mw-footer__brandname { margin: 0 0 12px; font-size: 18px; font-weight: 800; color: #fff; } .mw-footer__blurb { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: rgba(216, 221, 228, .68); } .mw-footer__contact { margin: 0 0 8px; font-size: 13px; } .mw-footer__contact a { color: rgba(216, 221, 228, .85); text-decoration: none; } .mw-footer__contact a:hover { color: #fff; } /* 列标题。原来是内联样式写在

上 —— 内联优先级最高， 任何后写的规则都改不动它，所以先把 markup 换成类再写这里。 */ .mw-footer__heading { margin: 0 0 16px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: #fff; font-weight: 700; } .mw-footer h2, .mw-footer h3 { margin: 0 0 16px; } /* 链接项:行内收紧、项间放开 —— 断成两行的条目才读得出是同一条 */ .mw-footer__list { margin: 0; padding: 0; list-style: none; } .mw-footer__list li { margin-bottom: 12px; font-size: 13.5px; line-height: 1.45; } .mw-footer__list li:last-child { margin-bottom: 0; } .mw-footer__list a { color: rgba(216, 221, 228, .8); text-decoration: none; display: inline-block; } .mw-footer__list a:hover { color: #fff; } /* 同一列里出现第二个小标题（SOLUTIONS 列下面还有 SERVICES）时， 要和上一组拉开，否则读起来像上一组的最后一项。 */ /* SOLUTIONS 列下面还跟着 SERVICES 小标题。原来靠