Turnkey PCBA - Hero

HookJames2026-04-24 10:28

固定为：

  • 橙色 #FD5320 只给 H1

  • 面包屑不用橙色

  • 不用 Stackable Section / Columns / Feature Grid

  • 只用 Stackable Heading

  • 其余全部用 Gutenberg 原生块

  • 所有类名前缀统一 suga-pcba

  • 可直接复用到 50 个支柱页

一、先做页面级设置

先打开这个 Page 页面 的编辑界面，不是 Post。

第 1 步：Blocksy 页面设置

在右侧页面设置里，把 Blocksy 自带的页面标题区关掉，避免重复标题和顶部空隙。

你要检查并关闭这些：

  • Page Title / Hero Title：关闭

  • Featured Image in Title Area：关闭

  • Sidebar：关闭

  • Page Structure / Content Area ：设为 Full Width

目的只有一个：
这个页面只保留你自己做的 Hero，不再让 Blocksy 自动生成第二个标题区。

二、Hero 的唯一块结构

下面是唯一结构，按顺序插入，不要换结构。

第 2 步：添加最外层 Hero 容器

点击 +

选择：

Gutenberg / 核心 / Group

设置：

  • 对齐方式：Full width

  • 在右侧 高级 > Additional CSS class(es) 里填：

    suga-pcba-hero

这个块是整个 Hero 的最外层背景容器。

第 3 步：添加 Hero 内层容器

在 suga-pcba-hero 里面，再点击 +

选择：

Gutenberg / 核心 / Group

类名填：

复制代码 
suga-pcba-hero__inner

这个块负责：

  • 24px 顶部安全距离

  • 最大内容宽度

  • 左右内边距

  • 把内容放在背景上方

第 4 步：把动态面包屑放进来

在 suga-pcba-hero__inner 里面，最上面放你当前已经在用的 动态面包屑区块 。

不要手写，不要写死。

如果你现在页面里已经有动态面包屑：

  • 直接剪切

  • 移到 Hero 最顶部

然后给它外层再套一个：

Gutenberg / 核心 / Group

类名填：

复制代码 
suga-pcba-breadcrumbs

也就是结构变成：

复制代码 
suga-pcba-hero
└── suga-pcba-hero__inner
    └── suga-pcba-breadcrumbs
        └── 你当前已经在用的动态面包屑

这一步很关键。
面包屑保留动态逻辑，只改容器和样式，不重建。

第 5 步：添加橙色分割线

在面包屑下面点击 +

选择：

Gutenberg / 核心 / Separator

类名填：

复制代码 
suga-pcba-hero-divider

这根线以后固定长度，不再手动拉宽度。

第 6 步：添加 Hero 文案内容容器

在分割线下面点击 +

选择：

Gutenberg / 核心 / Group

类名填：

复制代码 
suga-pcba-hero__content

这个块里面只放：

  • H1

  • H2

  • 一句话价值说明

  • CTA

第 7 步：添加小标题 H1

在 suga-pcba-hero__content 里点击 +

选择：

Stackable / Heading

内容填：

复制代码 
Full Turnkey PCB Assembly Services

Heading Level 设成：

复制代码 
H1

类名填：

复制代码 
suga-pcba-hero-h1

注意：

  • 这是 语义 H1

  • 视觉上它比 H2 小

  • 这是你要的关键词纯净版

  • 橙色只给它，不给面包屑

第 8 步：添加大标题 H2

继续在下面点击 +

选择：

Stackable / Heading

内容填：

复制代码 
Full Turnkey PCB Assembly Services for OEM & Industrial Buyers

Heading Level 设成：

复制代码 
H2

类名填：

复制代码 
suga-pcba-hero-h2

第 9 步：添加一句话价值说明

继续点击 +

选择：

Gutenberg / 核心 / Paragraph

内容填：

复制代码 
From BOM review and component sourcing to PCB fabrication coordination, assembly, testing, and delivery --- all under one accountable partner.

类名填：

复制代码 
suga-pcba-hero-subtext

第 10 步：添加 CTA 按钮行

继续点击 +

选择：

Gutenberg / 核心 / Buttons

类名填：

复制代码 
suga-pcba-hero-actions

主按钮

在 Buttons 里第一个按钮填文字：

复制代码 
Request a Quote

按钮外层类名填：

复制代码 
suga-pcba-btn-primary

次按钮

第二个按钮填文字：

复制代码 
Upload BOM & Gerber

按钮外层类名填：

复制代码 
suga-pcba-btn-secondary

注意：

  • 主按钮文字里 不要自己输入箭头

  • 箭头我会用 CSS 自动加，保证更粗更大

三、Trust Bar 的唯一结构

这里不要再用 Stackable Columns。

Trust Bar 错位最常见原因，就是 Stackable 的列宽和内层 wrapper 把英文挤坏。

第 11 步：添加 Trust 外层

在 suga-pcba-hero__inner 里，放在 suga-pcba-hero__content 的下面，点击 +

选择：

Gutenberg / 核心 / Group

类名填：

复制代码 
suga-pcba-trust-wrap

第 12 步：添加 Trust Grid

在 suga-pcba-trust-wrap 里点击 +

选择：

Gutenberg / 核心 / Group

类名填：

复制代码 
suga-pcba-trust-grid

这个块以后由 CSS 强制变成：

  • 桌面 3 列

  • 平板 2 列

  • 手机 1 列

第 13 步：第 1 个 Trust Item

在 suga-pcba-trust-grid 里点击 +

选择：

Gutenberg / 核心 / Group

把这个 Group 的布局改成：

  • Row

  • 不换行

类名填：

复制代码 
suga-pcba-trust-item

先放图标

在这个 Row Group 里先点击 +

选择：

Gutenberg / 核心 / Custom HTML

粘贴这个图标：

复制代码 
<span class="suga-pcba-trust-icon" aria-hidden="true">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
    <path d="M9 3h6l3 3v12a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V6l3-3z"></path>
    <path d="M8.5 11.8l2.1 2.1 4.5-4.5"></path>
  </svg>
</span>

再放文字容器

在图标后面点击 +

选择：

Gutenberg / 核心 / Group

类名填：

复制代码 
suga-pcba-trust-copy

在 suga-pcba-trust-copy 里放两个块：

标题

Gutenberg / 核心 / Heading

内容：

复制代码 
BOM Validation

类名：

复制代码 
suga-pcba-trust-title
描述

Gutenberg / 核心 / Paragraph

内容：

复制代码 
MPN accuracy & lifecycle review

类名：

复制代码 
suga-pcba-trust-desc

第 14 步：第 2 个 Trust Item

复制第 1 个 suga-pcba-trust-item，只改图标和文字。

图标替换为：

复制代码 
<span class="suga-pcba-trust-icon" aria-hidden="true">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
    <path d="M10 14a4 4 0 0 1 0-5.7l2.3-2.3a4 4 0 0 1 5.7 5.7l-1.7 1.7"></path>
    <path d="M14 10a4 4 0 0 1 0 5.7l-2.3 2.3a4 4 0 1 1-5.7-5.7l1.7-1.7"></path>
  </svg>
</span>

标题改成：

复制代码 
Traceable Sourcing

描述改成：

复制代码 
Counterfeit-risk controlled procurement

第 15 步：第 3 个 Trust Item

再复制一个 suga-pcba-trust-item

图标替换为：

复制代码 
<span class="suga-pcba-trust-icon" aria-hidden="true">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
    <path d="M12 3l7 4v5c0 5-3.5 8-7 9-3.5-1-7-4-7-9V7l7-4z"></path>
    <path d="M9.5 12h5"></path>
    <path d="M12 9.5v5"></path>
  </svg>
</span>

标题改成：

复制代码 
One Accountable Partner

描述改成：

复制代码 
Sourcing, assembly, QC & delivery

四、编辑器里必须统一清空的设置

这一步必须做，否则样式会互相打架。

把下面这些块都检查一遍：

  • suga-pcba-hero

  • suga-pcba-hero__inner

  • suga-pcba-hero__content

  • suga-pcba-trust-wrap

  • suga-pcba-trust-grid

  • suga-pcba-trust-item

统一处理为：

  • 不设置背景色

  • 不设置阴影

  • 不设置圆角

  • 不设置边框

  • 不手动设置 block 间距

  • 不手动设置最小高度

让 CSS 接管。

五、完整 CSS

把下面整段一次性粘贴到：

外观 → 自定义 → Additional CSS

不要拆，不要删局部。

复制代码 
/* =========================================================
   SUGA PCBA HERO --- Blocksy + Gutenberg + Stackable
   Rule locked:
   - Only H1 uses #FD5320
   - Breadcrumb does NOT use #FD5320
   - Mobile responsive included
   ========================================================= */

:root {
  --suga-pcba-accent: #FD5320;
  --suga-pcba-title: #FFFFFF;
  --suga-pcba-text: #D7E2EE;
  --suga-pcba-breadcrumb: #9FB0C3;
  --suga-pcba-trust-desc: #B4C3D4;
  --suga-pcba-border: rgba(255, 255, 255, 0.12);
  --suga-pcba-hero-bg-1: #0C2034;
  --suga-pcba-hero-bg-2: #12314F;
  --suga-pcba-hero-bg-3: #173B61;
}

/* ===== Outer hero ===== */
.suga-pcba-hero {
  --suga-pcba-hero-bg-image: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background:
    linear-gradient(90deg, var(--suga-pcba-hero-bg-1) 0%, var(--suga-pcba-hero-bg-2) 52%, var(--suga-pcba-hero-bg-3) 100%);
}

.suga-pcba-hero.alignfull {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.suga-pcba-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--suga-pcba-hero-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
  opacity: 0.34;
}

.suga-pcba-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(8, 21, 35, 0.94) 0%,
      rgba(11, 30, 50, 0.90) 34%,
      rgba(14, 38, 63, 0.78) 61%,
      rgba(18, 49, 79, 0.58) 100%
    );
}

/* ===== Inner container ===== */
.suga-pcba-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 32px 56px;
  box-sizing: border-box;
}

/* Hero first element should not create blank top gap */
.entry-content > .suga-pcba-hero:first-child,
.site-main > .suga-pcba-hero:first-child {
  margin-top: 0 !important;
}

/* ===== Breadcrumbs ===== */
.suga-pcba-breadcrumbs {
  margin: 0 0 18px;
  padding: 0;
  font-size: 13px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.suga-pcba-breadcrumbs,
.suga-pcba-breadcrumbs * {
  color: var(--suga-pcba-breadcrumb) !important;
}

.suga-pcba-breadcrumbs a:hover {
  color: #FFFFFF !important;
}

/* ===== Accent divider ===== */
.suga-pcba-hero-divider {
  width: 128px !important;
  max-width: 128px !important;
  min-width: 128px !important;
  height: 4px !important;
  margin: 0 0 14px !important;
  border: 0 !important;
  background: var(--suga-pcba-accent) !important;
  opacity: 1 !important;
}

/* ===== Main content width ===== */
.suga-pcba-hero__content {
  max-width: 780px;
  margin: 0;
  padding: 0;
}

/* ===== H1 / H2 ===== */
.suga-pcba-hero-h1,
.suga-pcba-hero-h1 h1,
.suga-pcba-hero-h1 .ugb-heading__text,
.suga-pcba-hero-h1 .stk-block-heading__text {
  color: var(--suga-pcba-accent) !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}

.suga-pcba-hero-h2,
.suga-pcba-hero-h2 h2,
.suga-pcba-hero-h2 .ugb-heading__text,
.suga-pcba-hero-h2 .stk-block-heading__text {
  color: var(--suga-pcba-title) !important;
  font-size: clamp(42px, 5.4vw, 68px) !important;
  line-height: 1.04 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  max-width: 740px;
  margin: 0 0 22px !important;
  text-wrap: balance;
}

/* ===== Supporting copy ===== */
.suga-pcba-hero-subtext {
  color: var(--suga-pcba-text) !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  max-width: 720px;
  margin: 0 0 30px !important;
}

/* ===== CTA row ===== */
.suga-pcba-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
}

.suga-pcba-hero-actions .wp-block-button {
  margin: 0 !important;
}

.suga-pcba-btn-primary .wp-element-button,
.suga-pcba-btn-primary .wp-block-button__link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 58px;
  padding: 0 28px !important;
  border-radius: 0 !important;
  border: 1px solid var(--suga-pcba-accent) !important;
  background: var(--suga-pcba-accent) !important;
  color: #FFFFFF !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.suga-pcba-btn-primary .wp-element-button::after,
.suga-pcba-btn-primary .wp-block-button__link::after {
  content: "→";
  display: inline-block;
  margin-left: 12px;
  font-size: 24px;
  line-height: 1;
  font-weight: 900;
  transform: translateY(-1px);
}

.suga-pcba-btn-primary .wp-element-button:hover,
.suga-pcba-btn-primary .wp-block-button__link:hover {
  background: #e84c1c !important;
  border-color: #e84c1c !important;
  transform: translateY(-1px);
}

.suga-pcba-btn-secondary .wp-element-button,
.suga-pcba-btn-secondary .wp-block-button__link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 28px !important;
  border-radius: 0 !important;
  border: 1px solid rgba(255,255,255,0.42) !important;
  background: transparent !important;
  color: #FFFFFF !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.suga-pcba-btn-secondary .wp-element-button:hover,
.suga-pcba-btn-secondary .wp-block-button__link:hover {
  border-color: rgba(255,255,255,0.72) !important;
  background: rgba(255,255,255,0.06) !important;
  transform: translateY(-1px);
}

/* ===== Trust wrap ===== */
.suga-pcba-trust-wrap {
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--suga-pcba-border);
}

.suga-pcba-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 34px;
  margin: 0;
  padding: 0;
}

.suga-pcba-trust-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}

/* Icon */
.suga-pcba-trust-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--suga-pcba-accent);
  border-radius: 999px;
  color: var(--suga-pcba-accent);
  box-sizing: border-box;
  transform: translateY(1px);
}

.suga-pcba-trust-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Trust copy */
.suga-pcba-trust-copy {
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
}

.suga-pcba-trust-title,
.suga-pcba-trust-title h3,
.suga-pcba-trust-title h4,
.suga-pcba-trust-title p {
  color: #FFFFFF !important;
  font-size: 21px !important;
  line-height: 1.28 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  margin: 0 0 6px !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.suga-pcba-trust-desc {
  color: var(--suga-pcba-trust-desc) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}

/* Prevent Gutenberg default weird margins */
.suga-pcba-hero .wp-block-group,
.suga-pcba-hero .wp-block-buttons,
.suga-pcba-hero .wp-block-heading,
.suga-pcba-hero p {
  box-sizing: border-box;
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
  .suga-pcba-hero__inner {
    padding: 24px 28px 52px;
  }

  .suga-pcba-hero__content {
    max-width: 720px;
  }
}

@media (max-width: 1024px) {
  .suga-pcba-hero__inner {
    padding: 24px 24px 48px;
  }

  .suga-pcba-hero__content {
    max-width: 100%;
  }

  .suga-pcba-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 28px;
  }

  .suga-pcba-trust-title,
  .suga-pcba-trust-title h3,
  .suga-pcba-trust-title h4,
  .suga-pcba-trust-title p {
    font-size: 19px !important;
  }
}

@media (max-width: 782px) {
  .suga-pcba-hero::before {
    background-position: center center;
    opacity: 0.22;
  }

  .suga-pcba-hero::after {
    background:
      linear-gradient(
        180deg,
        rgba(8, 21, 35, 0.94) 0%,
        rgba(11, 30, 50, 0.90) 42%,
        rgba(14, 38, 63, 0.82) 100%
      );
  }

  .suga-pcba-hero__inner {
    padding: 24px 20px 40px;
  }

  .suga-pcba-breadcrumbs {
    font-size: 12px;
    margin-bottom: 16px;
  }

  .suga-pcba-hero-divider {
    width: 128px !important;
    min-width: 128px !important;
    margin-bottom: 12px !important;
  }

  .suga-pcba-hero-h1,
  .suga-pcba-hero-h1 h1,
  .suga-pcba-hero-h1 .ugb-heading__text,
  .suga-pcba-hero-h1 .stk-block-heading__text {
    font-size: 16px !important;
    margin-bottom: 10px !important;
  }

  .suga-pcba-hero-h2,
  .suga-pcba-hero-h2 h2,
  .suga-pcba-hero-h2 .ugb-heading__text,
  .suga-pcba-hero-h2 .stk-block-heading__text {
    font-size: clamp(34px, 9vw, 48px) !important;
    line-height: 1.08 !important;
    margin-bottom: 18px !important;
  }

  .suga-pcba-hero-subtext {
    font-size: 17px !important;
    line-height: 1.68 !important;
    margin-bottom: 24px !important;
  }

  .suga-pcba-hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .suga-pcba-btn-primary .wp-element-button,
  .suga-pcba-btn-primary .wp-block-button__link,
  .suga-pcba-btn-secondary .wp-element-button,
  .suga-pcba-btn-secondary .wp-block-button__link {
    width: 100%;
    min-height: 56px;
    padding: 0 22px !important;
    justify-content: center;
  }

  .suga-pcba-trust-wrap {
    margin-top: 34px;
    padding-top: 24px;
  }

  .suga-pcba-trust-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .suga-pcba-trust-item {
    gap: 14px;
  }

  .suga-pcba-trust-icon {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .suga-pcba-trust-title,
  .suga-pcba-trust-title h3,
  .suga-pcba-trust-title h4,
  .suga-pcba-trust-title p {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  .suga-pcba-trust-desc {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 480px) {
  .suga-pcba-hero__inner {
    padding: 24px 16px 34px;
  }

  .suga-pcba-breadcrumbs {
    line-height: 1.6;
  }

  .suga-pcba-hero-subtext {
    font-size: 16px !important;
  }

  .suga-pcba-btn-primary .wp-element-button::after,
  .suga-pcba-btn-primary .wp-block-button__link::after {
    font-size: 22px;
    margin-left: 10px;
  }
}

/* ===== Future background image rule =====
   Later, add a second class on the outer hero Group:
   suga-pcba-hero suga-pcba-hero--turnkey

   Then uncomment and replace the URL below:

.suga-pcba-hero--turnkey {
  --suga-pcba-hero-bg-image: url("YOUR-IMAGE-URL");
}
*/

六、最后检查 6 件事

做完以后你只检查这 6 个结果：

  1. 面包屑离菜单正好 24px

  2. 只有 H1 是 #FD5320，面包屑不是橙色

  3. 右侧不再露白，Hero 背景整屏铺满

  4. 橙色分割线长度是原来两倍

  5. Trust Bar 桌面是一行 3 项，图标在左，文字在右

  6. 手机端 CTA 变成上下两颗按钮，Trust Bar 变成单列

七、你后面替换背景图时，只改这一个地方

以后你换背景图，不要动结构，不要动颜色逻辑。

只需要给最外层 Hero 再加一个类：

复制代码 
suga-pcba-hero--turnkey

然后把 CSS 末尾这段打开，替换图片地址：

复制代码 
.suga-pcba-hero--turnkey {
  --suga-pcba-hero-bg-image: url("YOUR-IMAGE-URL");
}

这样以后 50 个支柱页都能复用同一套 Hero 规则。

你把现在页面里 Hero 的区块树截图给我，我可以按这套类名帮你逐项核对，看看哪一层加错了。

优化好的css

复制代码 
/* =========================================================
   SUGA PCBA HERO --- COMPLETE CSS OVERRIDE V5
   只改 CSS，不改结构

   本版修正：
   1) 修复"分割线 margin 被后续规则覆盖"的问题
   2) 分割线与 H1 的真实间距固定为 20px
   3) Hero 最外层 group 继续 full-bleed 铺满整个区域
   4) Hero 内层不再做"居中容器 + 小数 gutter"挤压
   5) 改为整块内容左对齐，并使用整数 side padding，避免面包屑首字母发虚
   6) 保持 H2 桌面端最大字号 40px
   7) 不改结构，只改 CSS

   背景图未来替换说明：
   ---------------------------------------------------------
   推荐方案 A（只做 1 张通用图）：
   - 尺寸：2560 x 1600 px
   - 格式：WebP 优先，其次 JPG
   - 文件体积：尽量控制在 400KB - 900KB

   推荐方案 B（分端输出，更稳）：
   - Desktop：2560 x 1400 px
   - Tablet ：1600 x 1200 px
   - Mobile ：1080 x 1440 px

   构图安全区建议：
   - 左侧 0% - 42% 作为文字安全区，尽量不要放人物脸、产品主体、强对比细节
   - 主要视觉主体建议放在右侧 45% - 82% 区域
   - 因为这里使用 background-size: cover，四周会按屏幕比例被裁切
   --------------------------------------------------------- */

   V4 说明：
   - 桌面端 H2 最大字号固定为 40px，不再上探到 52px
   - H2 可用宽度已放宽；同时取消桌面端 balance 强制均衡换行
   - 目标是在多数桌面宽度下呈现：
     "Full Turnkey PCB Assembly Services"
     "for OEM & Industrial Buyers"
   - 实际是否恰好两行，仍会受你站点真实容器宽度、字体文件、浏览器字距渲染影响


body[data-prefix="single_page"] .entry-content.is-layout-constrained > .suga-pcba-hero,
body[data-prefix="single_page"] .entry-content .suga-pcba-hero.alignfull,
body[data-prefix="single_page"] .entry-content .wp-block-group.suga-pcba-hero,
body[data-prefix="single_page"] .entry-content .stk-block.suga-pcba-hero {
  --suga-pcba-hero-bg-image: none;
  --suga-pcba-hero-side-padding: 32px;
  position: relative;
  z-index: 1;
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
  background-color: #081a2e !important;
  background-image: linear-gradient(90deg, #041526 0%, #0a2741 42%, #123b61 100%) !important;
}

body[data-prefix="single_page"] .suga-pcba-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--suga-pcba-hero-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  opacity: 0.24;
  transform: scale(1.01);
}

body[data-prefix="single_page"] .suga-pcba-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(4, 18, 31, 0.94) 0%,
    rgba(8, 28, 46, 0.90) 28%,
    rgba(12, 38, 62, 0.80) 56%,
    rgba(18, 59, 97, 0.56) 100%
  );
}

body[data-prefix="single_page"] .suga-pcba-hero,
body[data-prefix="single_page"] .suga-pcba-hero * {
  box-sizing: border-box;
}

/* 解除 Gutenberg constrained 对 hero 内部的自动居中/限宽影响 */
body[data-prefix="single_page"] .suga-pcba-hero.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body[data-prefix="single_page"] .suga-pcba-hero__inner.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body[data-prefix="single_page"] .suga-pcba-breadcrumbs.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body[data-prefix="single_page"] .suga-pcba-hero__content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body[data-prefix="single_page"] .suga-pcba-trust-wrap.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body[data-prefix="single_page"] .suga-pcba-trust-grid.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body[data-prefix="single_page"] .suga-pcba-trust-copy.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 关键修正：不再把内容硬顶到最左侧，而是改成"居中容器 + 安全左边距" */
body[data-prefix="single_page"] .suga-pcba-hero__inner {
  position: relative;
  z-index: 2;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px var(--suga-pcba-hero-side-padding) 56px !important;
}


/* =========================
   本轮修正（仅调间距/字号，不改结构）
   1) 橙色小标题与分割线距离拉大
   2) 白色主标题字号收小
   3) Hero 文字整体向右再收一点
   4) 标题 / 描述 / CTA 的垂直间距扩大到上一版约 2 倍
   ========================= */

/* 面包屑 */
body[data-prefix="single_page"] .suga-pcba-breadcrumbs,
body[data-prefix="single_page"] .suga-pcba-hero .ct-breadcrumbs {
  margin: 0 0 18px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transform: none !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

body[data-prefix="single_page"] .suga-pcba-hero .ct-breadcrumbs,
body[data-prefix="single_page"] .suga-pcba-hero .ct-breadcrumbs a,
body[data-prefix="single_page"] .suga-pcba-hero .ct-breadcrumbs span,
body[data-prefix="single_page"] .suga-pcba-hero .ct-breadcrumbs [itemprop="name"],
body[data-prefix="single_page"] .suga-pcba-hero .ct-breadcrumbs .last-item {
  color: rgba(231, 238, 247, 0.84) !important;
  text-decoration: none !important;
}

body[data-prefix="single_page"] .suga-pcba-hero .ct-breadcrumbs .ct-separator {
  color: rgba(231, 238, 247, 0.58) !important;
  fill: currentColor !important;
}

body[data-prefix="single_page"] .suga-pcba-hero .ct-breadcrumbs a:hover {
  color: #ffffff !important;
}

/* 分割线 */
body[data-prefix="single_page"] .suga-pcba-hero-divider,
body[data-prefix="single_page"] .suga-pcba-hero__line {
  display: block !important;
  width: 128px !important;
  max-width: 128px !important;
  min-width: 128px !important;
  margin: 0 0 20px !important;
  text-align: left !important;
  border: 0 !important;
  opacity: 1 !important;
  background: transparent !important;
}

body[data-prefix="single_page"] .suga-pcba-hero-divider {
  height: 4px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  border: 0 !important;
  background: #FD5320 !important;
}

body[data-prefix="single_page"] .suga-pcba-hero__line hr,
body[data-prefix="single_page"] .suga-pcba-hero__line .stk-block-divider__hr {
  height: 4px !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  border: 0 !important;
  background: #FD5320 !important;
}

/* Hero 内容区 */
body[data-prefix="single_page"] .suga-pcba-hero__content {
  max-width: 1080px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* H1：橙色 */
body[data-prefix="single_page"] .suga-pcba-hero-h1,
body[data-prefix="single_page"] .suga-pcba-hero-h1 h1,
body[data-prefix="single_page"] .suga-pcba-hero-h1 .stk-block-heading__text,
body[data-prefix="single_page"] .suga-pcba-hero__h1,
body[data-prefix="single_page"] .suga-pcba-hero__h1 h1,
body[data-prefix="single_page"] .suga-pcba-hero__h1 .stk-block-heading__text {
  margin: 0 0 24px !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase !important;
  color: #FD5320 !important;
  -webkit-text-fill-color: #FD5320 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* H2：强制白色 */
body[data-prefix="single_page"] .suga-pcba-hero__h2,
body[data-prefix="single_page"] .suga-pcba-hero__h2 h2,
body[data-prefix="single_page"] .suga-pcba-hero__h2 .stk-block-heading__text,
body[data-prefix="single_page"] .suga-pcba-hero .suga-pcba-hero__h2 .stk-container,
body[data-prefix="single_page"] .suga-pcba-hero .suga-pcba-hero__content h2 {
  max-width: 1040px !important;
  margin: 0 0 44px !important;
  font-size: clamp(34px, 3.2vw, 40px) !important;
  line-height: 1.06 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  background: transparent !important;
  box-shadow: none !important;
  text-wrap: pretty;
}


/* 描述 */
body[data-prefix="single_page"] .suga-pcba-hero-subtext,
body[data-prefix="single_page"] .suga-pcba-hero__desc,
body[data-prefix="single_page"] .suga-pcba-hero .suga-pcba-hero__content > p {
  max-width: 840px !important;
  margin: 0 0 60px !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: #d7e2ee !important;
}

/* CTA 容器 */
body[data-prefix="single_page"] .suga-pcba-hero-actions,
body[data-prefix="single_page"] .suga-pcba-hero__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-prefix="single_page"] .suga-pcba-hero-actions .wp-block-button,
body[data-prefix="single_page"] .suga-pcba-hero__actions .wp-block-button {
  margin: 0 !important;
}

/* 主 CTA：Get Your Instant Quote
   这里做"呼吸发光 + 轻微扫光"动态。
   如果以后觉得动效太强，只删掉 animation 和伪元素相关代码即可。 */
body[data-prefix="single_page"] .suga-pcba-btn-primary .wp-block-button__link,
body[data-prefix="single_page"] .suga-pcba-btn--primary .wp-block-button__link {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 196px !important;
  min-height: 58px !important;
  padding: 0 28px !important;
  border-radius: 0 !important;
  border: 1px solid #FD5320 !important;
  background: #FD5320 !important;
  color: #ffffff !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: 0 0 0 0 rgba(253, 83, 32, 0.00) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease !important;
  animation: sugaHeroCtaPulse 2.2s ease-in-out infinite !important;
}

body[data-prefix="single_page"] .suga-pcba-btn-primary .wp-block-button__link::before,
body[data-prefix="single_page"] .suga-pcba-btn--primary .wp-block-button__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, #ff6e3a 0%, #FD5320 52%, #ff7b4c 100%);
}

body[data-prefix="single_page"] .suga-pcba-btn-primary .wp-block-button__link::after,
body[data-prefix="single_page"] .suga-pcba-btn--primary .wp-block-button__link::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -35%;
  width: 24%;
  height: 140%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.32) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-22deg);
  pointer-events: none;
  animation: sugaHeroCtaShine 2.8s ease-in-out infinite;
}

body[data-prefix="single_page"] .suga-pcba-btn-primary .wp-block-button__link:hover,
body[data-prefix="single_page"] .suga-pcba-btn--primary .wp-block-button__link:hover {
  transform: translateY(-1px) scale(1.015) !important;
  filter: brightness(1.05) !important;
  box-shadow: 0 10px 28px rgba(253, 83, 32, 0.30), 0 0 0 1px rgba(255,255,255,0.08) inset !important;
}

body[data-prefix="single_page"] .suga-pcba-btn-primary .wp-block-button__link:focus-visible,
body[data-prefix="single_page"] .suga-pcba-btn--primary .wp-block-button__link:focus-visible {
  outline: 2px solid rgba(255,255,255,0.90) !important;
  outline-offset: 3px !important;
}

body[data-prefix="single_page"] .suga-pcba-btn-secondary .wp-block-button__link,
body[data-prefix="single_page"] .suga-pcba-btn--secondary .wp-block-button__link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 196px !important;
  min-height: 58px !important;
  padding: 0 28px !important;
  border-radius: 0 !important;
  border: 1px solid rgba(255,255,255,0.42) !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: border-color 0.22s ease, background-color 0.22s ease, transform 0.22s ease !important;
}

body[data-prefix="single_page"] .suga-pcba-btn-secondary .wp-block-button__link:hover,
body[data-prefix="single_page"] .suga-pcba-btn--secondary .wp-block-button__link:hover {
  border-color: rgba(255,255,255,0.72) !important;
  background: rgba(255,255,255,0.06) !important;
  transform: translateY(-1px) !important;
}

/* Trust 区 */
body[data-prefix="single_page"] .suga-pcba-trust-wrap {
  margin-top: 44px !important;
  padding-top: 30px !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
}

body[data-prefix="single_page"] .suga-pcba-trust-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 26px 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: start !important;
}

body[data-prefix="single_page"] .suga-pcba-trust-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 20px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-prefix="single_page"] .suga-pcba-trust-icon {
  flex: 0 0 48px !important;
  width: 48px !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #FD5320 !important;
  border-radius: 50% !important;
  color: #FD5320 !important;
  transform: translateY(1px);
}

body[data-prefix="single_page"] .suga-pcba-trust-icon svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}

body[data-prefix="single_page"] .suga-pcba-trust-copy {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-prefix="single_page"] .suga-pcba-trust-title,
body[data-prefix="single_page"] .suga-pcba-trust-title h4,
body[data-prefix="single_page"] .suga-pcba-trust-copy h4 {
  margin: 0 0 6px !important;
  font-size: 21px !important;
  line-height: 1.28 !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

body[data-prefix="single_page"] .suga-pcba-trust-desc,
body[data-prefix="single_page"] .suga-pcba-trust-copy p {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #c5d3e2 !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}

/* 动效 keyframes */
@keyframes sugaHeroCtaPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(253, 83, 32, 0.00), 0 0 0 0 rgba(253, 83, 32, 0.00);
    filter: brightness(1);
  }
  35% {
    box-shadow: 0 8px 22px rgba(253, 83, 32, 0.26), 0 0 0 6px rgba(253, 83, 32, 0.08);
    filter: brightness(1.04);
  }
  70% {
    box-shadow: 0 10px 28px rgba(253, 83, 32, 0.18), 0 0 0 12px rgba(253, 83, 32, 0.00);
    filter: brightness(1.01);
  }
}

@keyframes sugaHeroCtaShine {
  0% {
    left: -35%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  45% {
    left: 125%;
    opacity: 0;
  }
  100% {
    left: 125%;
    opacity: 0;
  }
}

/* 平板 */
@media (max-width: 1024px) {
  body[data-prefix="single_page"] .suga-pcba-hero {
    --suga-pcba-hero-side-padding: 24px;
  }

  body[data-prefix="single_page"] .suga-pcba-hero__inner {
    padding-top: 24px !important;
    padding-bottom: 46px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-hero__content {
    max-width: 100% !important;
  }

  body[data-prefix="single_page"] .suga-pcba-hero__h2,
  body[data-prefix="single_page"] .suga-pcba-hero__h2 h2,
  body[data-prefix="single_page"] .suga-pcba-hero__h2 .stk-block-heading__text,
  body[data-prefix="single_page"] .suga-pcba-hero .suga-pcba-hero__content h2 {
    max-width: 920px !important;
    font-size: clamp(32px, 4.3vw, 38px) !important;
  }

  body[data-prefix="single_page"] .suga-pcba-trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 28px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-trust-title,
  body[data-prefix="single_page"] .suga-pcba-trust-title h4,
  body[data-prefix="single_page"] .suga-pcba-trust-copy h4 {
    font-size: 19px !important;
  }
}

/* 手机 */
@media (max-width: 782px) {
  body[data-prefix="single_page"] .suga-pcba-hero {
    --suga-pcba-hero-side-padding: 20px;
  }

  body[data-prefix="single_page"] .suga-pcba-hero::before {
    background-position: 64% center;
    opacity: 0.20;
  }

  body[data-prefix="single_page"] .suga-pcba-hero::after {
    background: linear-gradient(
      180deg,
      rgba(4, 18, 31, 0.95) 0%,
      rgba(8, 28, 46, 0.91) 42%,
      rgba(14, 43, 70, 0.83) 100%
    );
  }

  body[data-prefix="single_page"] .suga-pcba-hero__inner {
    padding-top: 24px !important;
    padding-bottom: 38px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-breadcrumbs,
  body[data-prefix="single_page"] .suga-pcba-hero .ct-breadcrumbs {
    font-size: 12px !important;
    margin-bottom: 16px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-hero__h2,
  body[data-prefix="single_page"] .suga-pcba-hero__h2 h2,
  body[data-prefix="single_page"] .suga-pcba-hero__h2 .stk-block-heading__text,
  body[data-prefix="single_page"] .suga-pcba-hero .suga-pcba-hero__content h2 {
    max-width: 100% !important;
    font-size: clamp(30px, 8vw, 40px) !important;
    line-height: 1.08 !important;
    margin-bottom: 34px !important;
    text-wrap: balance !important;
  }

  body[data-prefix="single_page"] .suga-pcba-hero-subtext,
  body[data-prefix="single_page"] .suga-pcba-hero__desc,
  body[data-prefix="single_page"] .suga-pcba-hero .suga-pcba-hero__content > p {
    font-size: 17px !important;
    line-height: 1.68 !important;
    margin-bottom: 44px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-hero-actions,
  body[data-prefix="single_page"] .suga-pcba-hero__actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-btn-primary .wp-block-button__link,
  body[data-prefix="single_page"] .suga-pcba-btn--primary .wp-block-button__link,
  body[data-prefix="single_page"] .suga-pcba-btn-secondary .wp-block-button__link,
  body[data-prefix="single_page"] .suga-pcba-btn--secondary .wp-block-button__link {
    width: 100% !important;
    min-width: 100% !important;
  }

  body[data-prefix="single_page"] .suga-pcba-trust-wrap {
    margin-top: 34px !important;
    padding-top: 24px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-trust-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-trust-item {
    gap: 14px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-trust-icon {
    flex-basis: 44px !important;
    width: 44px !important;
    height: 44px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-trust-title,
  body[data-prefix="single_page"] .suga-pcba-trust-title h4,
  body[data-prefix="single_page"] .suga-pcba-trust-copy h4 {
    font-size: 18px !important;
  }

  body[data-prefix="single_page"] .suga-pcba-trust-desc,
  body[data-prefix="single_page"] .suga-pcba-trust-copy p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
}

/* 极小屏 */
@media (max-width: 480px) {
  body[data-prefix="single_page"] .suga-pcba-hero-h1,
  body[data-prefix="single_page"] .suga-pcba-hero-h1 h1,
  body[data-prefix="single_page"] .suga-pcba-hero-h1 .stk-block-heading__text {
    font-size: 15px !important;
    letter-spacing: 0.09em !important;
  }

  body[data-prefix="single_page"] .suga-pcba-hero__h2,
  body[data-prefix="single_page"] .suga-pcba-hero__h2 h2,
  body[data-prefix="single_page"] .suga-pcba-hero__h2 .stk-block-heading__text,
  body[data-prefix="single_page"] .suga-pcba-hero .suga-pcba-hero__content h2 {
    max-width: 100% !important;
    font-size: clamp(30px, 9.8vw, 38px) !important;
    text-wrap: balance !important;
  }

  body[data-prefix="single_page"] .suga-pcba-hero-subtext,
  body[data-prefix="single_page"] .suga-pcba-hero__desc,
  body[data-prefix="single_page"] .suga-pcba-hero .suga-pcba-hero__content > p {
    font-size: 16px !important;
  }
}

/* 降低动态敏感用户的不适 */
@media (prefers-reduced-motion: reduce) {
  body[data-prefix="single_page"] .suga-pcba-btn-primary .wp-block-button__link,
  body[data-prefix="single_page"] .suga-pcba-btn--primary .wp-block-button__link,
  body[data-prefix="single_page"] .suga-pcba-btn-primary .wp-block-button__link::after,
  body[data-prefix="single_page"] .suga-pcba-btn--primary .wp-block-button__link::after {
    animation: none !important;
    transition: none !important;
  }
}


/* =========================================================
   背景图接口说明（保留这一套，旧的 .hero-section 背景写法建议删除）
   ---------------------------------------------------------
   建议删除旧代码：
   #main .hero-section {
     background-size: 2000px;
     background-position: center -40px;
   }
   原因：
   1) 这套 V5 已经统一由 .suga-pcba-hero::before 承担背景图
   2) 旧规则如果命中同一 Hero，可能和当前 cover / position 逻辑冲突
   3) 保留会造成后续调图时出现"双来源控制"，不利于维护

   换背景图时，只额外补这一小段即可：
   body[data-prefix="single_page"] .entry-content.is-layout-constrained > .suga-pcba-hero {
     --suga-pcba-hero-bg-image: url("你的背景图地址");
   }
   ========================================================= */


/* =========================================================
   V6 PATCH
   只处理你指定的 2 个问题，其他保持不变
   1) 菜单到底部 → 面包屑顶部，留出 20px 高度间隔
   2) Hero 区左右两侧从视觉上必须与 Hero 背景完全一致，不能出现白边/空白感
   ========================================================= */

/* 1) 菜单与面包屑的顶部间隔：固定 20px */
body[data-prefix="single_page"] .suga-pcba-hero__inner {
  padding-top: 20px !important;
}

body[data-prefix="single_page"] .suga-pcba-breadcrumbs,
body[data-prefix="single_page"] .suga-pcba-hero .ct-breadcrumbs {
  margin-top: 0 !important;
}

/* 2) Hero 左右两侧视觉铺满：外层 group、本体、以及 Stackable/Gutenberg 常见包裹层统一继承同一背景 */
body[data-prefix="single_page"] .entry-content.is-layout-constrained > .suga-pcba-hero,
body[data-prefix="single_page"] .entry-content .wp-block-group.suga-pcba-hero,
body[data-prefix="single_page"] .entry-content .stk-block.suga-pcba-hero,
body[data-prefix="single_page"] .entry-content .suga-pcba-hero.alignfull,
body[data-prefix="single_page"] .suga-pcba-hero {
  background-color: #081a2e !important;
  background-image: linear-gradient(90deg, #041526 0%, #0a2741 42%, #123b61 100%) !important;
}

/* 让可能产生"中间内容块 / 两侧白边视觉"的内层容器透明，并取消额外限宽背景差 */
body[data-prefix="single_page"] .suga-pcba-hero > .stk-content-align,
body[data-prefix="single_page"] .suga-pcba-hero > .stk-container,
body[data-prefix="single_page"] .suga-pcba-hero > .wp-block-group__inner-container,
body[data-prefix="single_page"] .suga-pcba-hero .stk-content-align,
body[data-prefix="single_page"] .suga-pcba-hero .stk-container {
  background: transparent !important;
  max-width: none !important;
  width: 100% !important;
}

/* 防止 Gutenberg / Stackable 给 hero 这个 group 额外套白底或可见留白 */
body[data-prefix="single_page"] .entry-content.is-layout-constrained > .suga-pcba-hero:where(:not(.has-background)),
body[data-prefix="single_page"] .entry-content .wp-block-group.suga-pcba-hero:where(:not(.has-background)),
body[data-prefix="single_page"] .entry-content .stk-block.suga-pcba-hero:where(:not(.has-background)) {
  background-color: #081a2e !important;
}

/* 如果主题把 section / article 父级露出来，继续补齐视觉背景 */
body[data-prefix="single_page"] .suga-pcba-hero::before,
body[data-prefix="single_page"] .suga-pcba-hero::after {
  left: 0 !important;
  right: 0 !important;
}


/* =========================================================
   V7 PATCH
   只针对一个问题：
   把 Hero 从 Gutenberg / Stackable 的 constrained 视觉里彻底拉满
   不碰其他排版、字号、间距、按钮、内容样式
   ========================================================= */

/* 允许 Hero 从 entry-content 的 constrained 画布中"伸出去" */
body[data-prefix="single_page"] .entry-content.is-layout-constrained {
  overflow: visible !important;
}

/* 只锁定当前这个 Hero block，自身强制 full-bleed */
body[data-prefix="single_page"] .entry-content.is-layout-constrained > .wp-block-group.suga-pcba-hero.is-layout-constrained.wp-block-group-is-layout-constrained {
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
}

/* 清掉 Gutenberg 对"非 alignfull 子元素"的 constrained 限宽影响 */
body[data-prefix="single_page"] .entry-content.is-layout-constrained > .wp-block-group.suga-pcba-hero.is-layout-constrained.wp-block-group-is-layout-constrained:not(.alignfull) {
  max-width: 100vw !important;
  margin-inline-start: -50vw !important;
  margin-inline-end: -50vw !important;
}

/* Hero 第一层 inner 容器保持 100% 宽，不再形成中间一块、两侧露白 */
body[data-prefix="single_page"] .entry-content.is-layout-constrained > .wp-block-group.suga-pcba-hero.is-layout-constrained.wp-block-group-is-layout-constrained > .wp-block-group.suga-pcba-hero__inner.is-layout-constrained.wp-block-group-is-layout-constrained {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* =========================================================
   V8 PATCH
   只修复 V7 带来的一个副作用：
   Hero 背景继续 full-bleed，但文字恢复"安全内边距"
   不改字号、不改层级、不改间距体系
   ========================================================= */

/* 背景继续拉满，但内容不要贴边 */
body[data-prefix="single_page"] .entry-content.is-layout-constrained > .wp-block-group.suga-pcba-hero.is-layout-constrained.wp-block-group-is-layout-constrained > .wp-block-group.suga-pcba-hero__inner.is-layout-constrained.wp-block-group-is-layout-constrained,
body[data-prefix="single_page"] .entry-content.is-layout-constrained > .wp-block-group.suga-pcba-hero.is-layout-constrained.wp-block-group-is-layout-constrained > .wp-block-group__inner-container,
body[data-prefix="single_page"] .suga-pcba-hero > .wp-block-group__inner-container,
body[data-prefix="single_page"] .suga-pcba-hero > .stk-container,
body[data-prefix="single_page"] .suga-pcba-hero > .stk-content-align {
  padding-left: 32px !important;
  padding-right: 32px !important;
  box-sizing: border-box !important;
}

/* 平板 */
@media (max-width: 1024px) {
  body[data-prefix="single_page"] .entry-content.is-layout-constrained > .wp-block-group.suga-pcba-hero.is-layout-constrained.wp-block-group-is-layout-constrained > .wp-block-group.suga-pcba-hero__inner.is-layout-constrained.wp-block-group-is-layout-constrained,
  body[data-prefix="single_page"] .entry-content.is-layout-constrained > .wp-block-group.suga-pcba-hero.is-layout-constrained.wp-block-group-is-layout-constrained > .wp-block-group__inner-container,
  body[data-prefix="single_page"] .suga-pcba-hero > .wp-block-group__inner-container,
  body[data-prefix="single_page"] .suga-pcba-hero > .stk-container,
  body[data-prefix="single_page"] .suga-pcba-hero > .stk-content-align {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* 手机 */
@media (max-width: 782px) {
  body[data-prefix="single_page"] .entry-content.is-layout-constrained > .wp-block-group.suga-pcba-hero.is-layout-constrained.wp-block-group-is-layout-constrained > .wp-block-group.suga-pcba-hero__inner.is-layout-constrained.wp-block-group-is-layout-constrained,
  body[data-prefix="single_page"] .entry-content.is-layout-constrained > .wp-block-group.suga-pcba-hero.is-layout-constrained.wp-block-group-is-layout-constrained > .wp-block-group__inner-container,
  body[data-prefix="single_page"] .suga-pcba-hero > .wp-block-group__inner-container,
  body[data-prefix="single_page"] .suga-pcba-hero > .stk-container,
  body[data-prefix="single_page"] .suga-pcba-hero > .stk-content-align {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* =========================================================
   V9 PATCH
   回退到你前面已经定过的"安全边距"数值与作用位置
   之前定下来的安全边距是：
   - 桌面：左右 32px
   - 平板：左右 24px
   - 手机：左右 20px

   关键点：
   - 安全边距只作用在 .suga-pcba-hero__inner
   - 不再给 wp-block-group__inner-container / stk-container / stk-content-align 叠加 padding
   - Hero 背景继续 full-bleed
   ========================================================= */

/* 先清掉 V8 给多个容器叠加的左右 padding，避免边距位置错乱 */
body[data-prefix="single_page"] .entry-content.is-layout-constrained > .wp-block-group.suga-pcba-hero.is-layout-constrained.wp-block-group-is-layout-constrained > .wp-block-group__inner-container,
body[data-prefix="single_page"] .suga-pcba-hero > .wp-block-group__inner-container,
body[data-prefix="single_page"] .suga-pcba-hero > .stk-container,
body[data-prefix="single_page"] .suga-pcba-hero > .stk-content-align {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 恢复你前面版本的安全边距作用位置与数值 */
body[data-prefix="single_page"] .entry-content.is-layout-constrained > .wp-block-group.suga-pcba-hero.is-layout-constrained.wp-block-group-is-layout-constrained > .wp-block-group.suga-pcba-hero__inner.is-layout-constrained.wp-block-group-is-layout-constrained,
body[data-prefix="single_page"] .suga-pcba-hero__inner {
  padding: 20px 120px 56px !important;
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  body[data-prefix="single_page"] .entry-content.is-layout-constrained > .wp-block-group.suga-pcba-hero.is-layout-constrained.wp-block-group-is-layout-constrained > .wp-block-group.suga-pcba-hero__inner.is-layout-constrained.wp-block-group-is-layout-constrained,
  body[data-prefix="single_page"] .suga-pcba-hero__inner {
    padding: 24px 24px 46px !important;
  }
}

@media (max-width: 782px) {
  body[data-prefix="single_page"] .entry-content.is-layout-constrained > .wp-block-group.suga-pcba-hero.is-layout-constrained.wp-block-group-is-layout-constrained > .wp-block-group.suga-pcba-hero__inner.is-layout-constrained.wp-block-group-is-layout-constrained,
  body[data-prefix="single_page"] .suga-pcba-hero__inner {
    padding: 24px 20px 38px !important;
  }
}
相关推荐
大圣编程1 小时前
Python中continue语句的用法是什么？
开发语言·前端·python
yuhaiqiang1 小时前
随手 vibecoding 的浏览器插件已经 6000 多次下载，聊聊他的产品设计
前端·后端·面试
之歆2 小时前
Vue商品详情与放大镜组件
前端·javascript·vue.js
再吃一根胡萝卜3 小时前
如何把小米 MiMo 接入 CodeBuddy，打造私有 Agent
前端
负责的蛋挞4 小时前
异步HttpModule的实现方式
java·服务器·前端
AC赳赳老秦4 小时前
防火墙规则批量配置实战：OpenClaw 自动生成模板、批量下发与合规性校验全解析
java·开发语言·人工智能·python·github·php·openclaw
2502_921286076 小时前
【企业网络管理】DHCP 与 SAMBA：从协议原理到企业级实战配置全解析
开发语言·php
丹宇码农6 小时前
把 HLS 字幕玩出花：zwPlayer 如何让 M3U8 视频支持全文搜索、翻译与码率自适应
前端·javascript·音视频·hls·视频播放器
2501_943782357 小时前
【共创季稿事节】猜数字游戏：二分法思维与交互式反馈
前端·游戏·microsoft·harmonyos·鸿蒙·鸿蒙系统
热门推荐
01GitHub 镜像站点022026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf03AI科技热点日报 | 2026年07月01日04【AI】2026 年具身智能模型和世界模型总结052026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？062026 年 AI 大模型 & AI 编程工具实战全总结072026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？08Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费09Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析102026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？