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 小时前
Next.js从入门到实战保姆级教程（第十章）：表单处理与 Server Actions
前端·typescript·next.js
深海鱼在掘金1 小时前
Next.js从入门到实战保姆级教程（第九章）：元数据与 SEO 优化
前端·typescript·next.js
сокол1 小时前
【网安-Web渗透测试-Linux提权】SUID提权
linux·前端·web安全·网络安全
深海鱼在掘金1 小时前
Next.js从入门到实战保姆级教程（第八章）：图像、字体与媒体优化
前端·typescript·next.js
英俊潇洒美少年1 小时前
Vue2 高德地图地址选择器完整实战（组件抽离+高并发优化+@amap/amap-jsapi-loader最佳实践）
前端·javascript·vue.js
深海鱼在掘金2 小时前
Next.js从入门到实战保姆级教程（第七章）：样式方案与 UI 优化
前端·typescript·next.js
晴天丨2 小时前
🛡️ Vue 3 错误处理完全指南：全局异常捕获、前端监控、用户反馈
前端·vue.js
孙凯亮2 小时前
Electron 接口请求全解析：从疑问到落地（真实开发对话整理）
前端·electron
闲坐含香咀翠2 小时前
Electron 桌面端多语言优化实战：从静态全量加载到懒加载与用户自定义
前端·electron·客户端
热门推荐
012026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点032026年4月AI大事件深度解读：大模型竞争进入“深水区“04近期有什么ai的新消息，新动态？ 2026.4月052026 年 AI 编程助手全面对比评测：Cursor vs Copilot vs Claude Code vs GitHub Copilot Free06AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析07codex app每次打开重连5次Reconnecting问题解决08CC-Switch & Claude 基于 Linux 服务器安装使用指南09从限购到畅通：GLM-5.1 Coding Plan接入攻略102026年AI前瞻：量子AI、具身智能与科学发现的新纪元