设计Section 12：Related PCB Assembly Services
这个区块只做Related Services 内链卡片。
不做：
FAQ Schema FAQ 区 Ninja Tables Fluent Forms Custom HTML Gutenberg Spacer Gutenberg Separator Phase 2 占位内容一、使用组件结构
Gutenberg Group └── Gutenberg Group ├── Gutenberg Group：橙色短线 ├── Gutenberg Heading：H2 ├── Gutenberg Paragraph：说明文字 └── Stackable Columns：4 列卡片 ├── Stackable Column：卡片 1 ├── Stackable Column：卡片 2 ├── Stackable Column：卡片 3 └── Stackable Column：卡片 4二、Block Edit 操作步骤
1）外层 Section
添加组件：
Gutenberg → Group设置：
Alignment: Full widthAdditional CSS class(es)：
suga-pillar-section suga-pillar-section--12 suga-pillar-section--related-services不要在页面里输入：
Section 122）内层容器
在外层 Group 里面添加：
Gutenberg → Group设置：
Alignment: Full widthAdditional CSS class(es)：
suga-pillar-section__inner3）橙色短线
在内层 Group 里面添加：
Gutenberg → GroupAdditional CSS class(es)：
suga-pillar-kicker-line这个 Group 保持空白。
不要用 Separator。
4）H2 标题
添加组件：
Gutenberg → Heading内容：
Related PCB Assembly Services设置：
Heading level: H2Additional CSS class(es)：
suga-pillar-h2不要手动设置左对齐。
普通 Section 的 H2 仍然走全局居中规则。
5）说明文字
添加组件：
Gutenberg → Paragraph内容：
Not the right fit? Here are adjacent service models within our PCB assembly silo.Additional CSS class(es)：
suga-pillar-lead三、添加 4 列卡片网格
添加组件：
Stackable → Columns设置：
Columns: 4Additional CSS class(es)：
suga-stack-grid suga-stack-grid--4 suga-related-services-gridStackable Columns 里面不要手动设置：
背景 padding border shadow width这些全部交给 CSS。
四、4 张卡片内容
每一列都是：
Stackable Column每个 Column 内部放 4 个 Gutenberg 块：
Gutenberg Paragraph：Eyebrow Gutenberg Heading：H3 Gutenberg Paragraph：描述 Gutenberg Paragraph：链接Card 1
Column Additional CSS class(es)：
suga-related-card suga-related-card--sibling内容：
| 块 | 内容 | Class |
|---|---|---|
| Paragraph | Sibling Service | suga-related-card__eyebrow |
| H3 | Prototype PCB Assembly | suga-related-card__title |
| Paragraph | Early-stage validation builds, small runs, fast iterations. | suga-related-card__text |
| Paragraph Link | Prototype PCB Assembly | suga-related-card__link |
链接 URL：
/pcb-assembly-services/prototype/Card 2
Column Additional CSS class(es)：
suga-related-card suga-related-card--sibling内容：
| 块 | 内容 | Class |
|---|---|---|
| Paragraph | Sibling Service | suga-related-card__eyebrow |
| H3 | Quick-Turn PCB Assembly | suga-related-card__title |
| Paragraph | Accelerated schedule builds when speed is the priority. | suga-related-card__text |
| Paragraph Link | Quick-Turn PCB Assembly | suga-related-card__link |
链接 URL：
/pcb-assembly-services/quick-turn/Card 3
Column Additional CSS class(es)：
suga-related-card suga-related-card--sibling内容：
| 块 | 内容 | Class |
|---|---|---|
| Paragraph | Sibling Service | suga-related-card__eyebrow |
| H3 | Consigned Assembly | suga-related-card__title |
| Paragraph | Customer-supplied materials, assembly-only engagement. | suga-related-card__text |
| Paragraph Link | Consigned Assembly | suga-related-card__link |
链接 URL：
/pcb-assembly-services/consigned/Card 4
Column Additional CSS class(es)：
suga-related-card suga-related-card--parent内容：
| 块 | 内容 | Class |
|---|---|---|
| Paragraph | Parent Service | suga-related-card__eyebrow |
| H3 | PCB Assembly Services | suga-related-card__title |
| Paragraph | Complete PCB assembly service overview — parent service page. | suga-related-card__text |
| Paragraph Link | PCB Assembly Services | suga-related-card__link |
链接 URL：
/pcb-assembly-services/五、前端最终只出现这些文字
Related PCB Assembly Services Not the right fit? Here are adjacent service models within our PCB assembly silo. Sibling Service Prototype PCB Assembly Early-stage validation builds, small runs, fast iterations. Prototype PCB Assembly Sibling Service Quick-Turn PCB Assembly Accelerated schedule builds when speed is the priority. Quick-Turn PCB Assembly Sibling Service Consigned Assembly Customer-supplied materials, assembly-only engagement. Consigned Assembly Parent Service PCB Assembly Services Complete PCB assembly service overview — parent service page. PCB Assembly Services不要出现：
Section 12 Related Services Design Spec Anchor Text Rules Future Placeholder Phase 2 Learn more Click here View service六、Section 12 CSS
把下面 CSS 放到当前 V15 CSS 文件最后。
这份 CSS 只控制 Section 12，不重新定义全局 full-bleed、inner 宽度、H2 对齐。
/* ========================================================= SECTION 12 - RELATED PCB ASSEMBLY SERVICES ========================================================= */ /* 1. Section background and rhythm */ body[data-prefix="single_page"] .suga-pillar-section--12, body[data-prefix="single_page"] .suga-pillar-section--related-services { background: var(--suga-color-section-blue) !important; --suga-section-padding-top: 52px; --suga-section-padding-bottom: 48px; --suga-related-card-border: #dbe5ee; --suga-related-card-bg: #ffffff; --suga-related-card-text: #52677e; --suga-related-card-title: #102a46; --suga-related-card-dark: #0f3156; } /* 2. Stackable Columns grid */ body[data-prefix="single_page"] .suga-related-services-grid { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body[data-prefix="single_page"] .suga-related-services-grid > .stk-row, body[data-prefix="single_page"] .suga-related-services-grid .stk-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body[data-prefix="single_page"] .suga-related-services-grid .stk-row > .stk-column, body[data-prefix="single_page"] .suga-related-services-grid .stk-row > .stk-block-column { width: auto !important; max-width: none !important; min-width: 0 !important; flex: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* 3. Stackable column reset */ body[data-prefix="single_page"] .suga-related-card .stk-column-wrapper { width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; box-sizing: border-box !important; } body[data-prefix="single_page"] .suga-related-card .stk-column-wrapper > .stk-block-content, body[data-prefix="single_page"] .suga-related-card .stk-column-wrapper > .stk-inner-blocks { width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; box-sizing: border-box !important; } /* 4. Default related service card */ body[data-prefix="single_page"] .suga-related-card .stk-column-wrapper > .stk-block-content, body[data-prefix="single_page"] .suga-related-card .stk-column-wrapper > .stk-inner-blocks { display: flex !important; flex-direction: column !important; padding: 26px 22px 24px !important; border: 1px solid var(--suga-related-card-border) !important; border-top: 4px solid var(--suga-color-orange) !important; border-radius: 0 !important; background: var(--suga-related-card-bg) !important; box-shadow: 0 10px 24px rgba(15, 49, 86, 0.06) !important; box-sizing: border-box !important; } /* 5. Parent service card */ body[data-prefix="single_page"] .suga-related-card--parent .stk-column-wrapper > .stk-block-content, body[data-prefix="single_page"] .suga-related-card--parent .stk-column-wrapper > .stk-inner-blocks { border-color: var(--suga-related-card-dark) !important; border-top-color: var(--suga-related-card-dark) !important; border-left: 4px solid var(--suga-color-orange) !important; background: var(--suga-related-card-dark) !important; box-shadow: 0 12px 28px rgba(15, 49, 86, 0.16) !important; } /* 6. Eyebrow */ body[data-prefix="single_page"] .suga-related-card__eyebrow, body[data-prefix="single_page"] .suga-related-card__eyebrow p, body[data-prefix="single_page"] .suga-related-card__eyebrow .stk-block-text__text { margin: 0 0 18px !important; padding: 0 !important; color: #314961 !important; -webkit-text-fill-color: #314961 !important; font-size: 11px !important; line-height: 1.2 !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } body[data-prefix="single_page"] .suga-related-card--parent .suga-related-card__eyebrow, body[data-prefix="single_page"] .suga-related-card--parent .suga-related-card__eyebrow p, body[data-prefix="single_page"] .suga-related-card--parent .suga-related-card__eyebrow .stk-block-text__text { color: var(--suga-color-orange) !important; -webkit-text-fill-color: var(--suga-color-orange) !important; } /* 7. H3 title */ body[data-prefix="single_page"] .suga-related-card__title, body[data-prefix="single_page"] h3.suga-related-card__title { margin: 0 0 18px !important; padding: 0 0 18px !important; border-bottom: 1px solid #e4ebf2 !important; color: var(--suga-related-card-title) !important; -webkit-text-fill-color: var(--suga-related-card-title) !important; font-size: 19px !important; line-height: 1.22 !important; font-weight: 800 !important; letter-spacing: -0.025em !important; text-align: left !important; } body[data-prefix="single_page"] .suga-related-card--parent .suga-related-card__title, body[data-prefix="single_page"] .suga-related-card--parent h3.suga-related-card__title { border-bottom-color: rgba(255,255,255,0.14) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* 8. Description text */ body[data-prefix="single_page"] .suga-related-card__text, body[data-prefix="single_page"] .suga-related-card__text p, body[data-prefix="single_page"] .suga-related-card__text .stk-block-text__text { margin: 0 0 14px !important; padding: 0 !important; color: var(--suga-related-card-text) !important; -webkit-text-fill-color: var(--suga-related-card-text) !important; font-size: 13px !important; line-height: 1.65 !important; font-weight: 500 !important; } body[data-prefix="single_page"] .suga-related-card--parent .suga-related-card__text, body[data-prefix="single_page"] .suga-related-card--parent .suga-related-card__text p, body[data-prefix="single_page"] .suga-related-card--parent .suga-related-card__text .stk-block-text__text { color: rgba(255,255,255,0.68) !important; -webkit-text-fill-color: rgba(255,255,255,0.68) !important; } /* 9. Exact-match anchor link */ body[data-prefix="single_page"] .suga-related-card__link { margin: auto 0 0 !important; padding: 0 !important; } body[data-prefix="single_page"] .suga-related-card__link, body[data-prefix="single_page"] .suga-related-card__link p, body[data-prefix="single_page"] .suga-related-card__link .stk-block-text__text { font-size: 13px !important; line-height: 1.3 !important; font-weight: 800 !important; } body[data-prefix="single_page"] .suga-related-card__link a { color: var(--suga-color-orange) !important; -webkit-text-fill-color: var(--suga-color-orange) !important; text-decoration: none !important; font-weight: 800 !important; } body[data-prefix="single_page"] .suga-related-card__link a::after { content: " →"; } body[data-prefix="single_page"] .suga-related-card__link a:hover { text-decoration: underline !important; text-underline-offset: 3px !important; } /* 10. Remove final unwanted margins */ body[data-prefix="single_page"] .suga-pillar-section--12 .suga-pillar-section__inner > :last-child, body[data-prefix="single_page"] .suga-pillar-section--related-services .suga-pillar-section__inner > :last-child, body[data-prefix="single_page"] .suga-related-card .stk-column-wrapper > .stk-block-content > :last-child, body[data-prefix="single_page"] .suga-related-card .stk-column-wrapper > .stk-inner-blocks > :last-child { margin-bottom: 0 !important; margin-block-end: 0 !important; } /* 11. Tablet */ @media (max-width: 1024px) { body[data-prefix="single_page"] .suga-pillar-section--12, body[data-prefix="single_page"] .suga-pillar-section--related-services { --suga-section-padding-top: 46px; --suga-section-padding-bottom: 42px; } body[data-prefix="single_page"] .suga-related-services-grid > .stk-row, body[data-prefix="single_page"] .suga-related-services-grid .stk-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; } } /* 12. Mobile */ @media (max-width: 782px) { body[data-prefix="single_page"] .suga-pillar-section--12, body[data-prefix="single_page"] .suga-pillar-section--related-services { --suga-section-padding-top: 40px; --suga-section-padding-bottom: 36px; } body[data-prefix="single_page"] .suga-related-services-grid > .stk-row, body[data-prefix="single_page"] .suga-related-services-grid .stk-row { grid-template-columns: 1fr !important; gap: 16px !important; } body[data-prefix="single_page"] .suga-related-card .stk-column-wrapper > .stk-block-content, body[data-prefix="single_page"] .suga-related-card .stk-column-wrapper > .stk-inner-blocks { padding: 24px 20px 22px !important; } body[data-prefix="single_page"] .suga-related-card__title, body[data-prefix="single_page"] h3.suga-related-card__title { font-size: 18px !important; } }七、检查点
发布前检查 5 个地方：
1. 外层 Group class 是否包含 suga-pillar-section--related-services 2. Stackable Columns class 是否包含 suga-related-services-grid 3. 每个 Stackable Column 是否有 suga-related-card 4. 第 4 张卡片是否是 suga-related-card--parent 5. 链接文字是否是精确锚文本，不是 Learn more最容易出错的是第 3 点：
suga-related-card 要加在 Stackable Column 上，不是加在里面的 Paragraph 上。
/* ========================================================= SECTION 12 - RELATED PCB ASSEMBLY SERVICES No Eyebrow / No Auto Arrow Version ========================================================= */ /* 1. Section background and local variables */ body[data-prefix="single_page"] .suga-pillar-section--12, body[data-prefix="single_page"] .suga-pillar-section--related-services { background: var(--suga-color-section-blue) !important; --suga-section-padding-top: 52px; --suga-section-padding-bottom: 48px; --suga-related-card-border: #dbe5ee; --suga-related-card-bg: #ffffff; --suga-related-card-text: #52677e; --suga-related-card-title: #102a46; --suga-related-card-dark: #0f3156; } /* 2. Stackable Columns grid */ body[data-prefix="single_page"] .suga-related-services-grid { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body[data-prefix="single_page"] .suga-related-services-grid > .stk-row, body[data-prefix="single_page"] .suga-related-services-grid .stk-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 18px !important; align-items: stretch !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } body[data-prefix="single_page"] .suga-related-services-grid > .stk-row > .stk-column, body[data-prefix="single_page"] .suga-related-services-grid > .stk-row > .stk-block-column, body[data-prefix="single_page"] .suga-related-services-grid .stk-row > .stk-column, body[data-prefix="single_page"] .suga-related-services-grid .stk-row > .stk-block-column { width: auto !important; max-width: none !important; min-width: 0 !important; flex: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* 3. Stackable column wrapper reset */ body[data-prefix="single_page"] .suga-related-card > .stk-column-wrapper { width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; box-sizing: border-box !important; } body[data-prefix="single_page"] .suga-related-card > .stk-column-wrapper > .stk-block-content, body[data-prefix="single_page"] .suga-related-card > .stk-column-wrapper > .stk-inner-blocks { width: 100% !important; max-width: 100% !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; box-sizing: border-box !important; } /* 4. Default related service card */ body[data-prefix="single_page"] .suga-related-card > .stk-column-wrapper > .stk-block-content, body[data-prefix="single_page"] .suga-related-card > .stk-column-wrapper > .stk-inner-blocks { display: flex !important; flex-direction: column !important; padding: 28px 22px 24px !important; border: 1px solid var(--suga-related-card-border) !important; border-top: 4px solid var(--suga-color-orange) !important; border-radius: 0 !important; background: var(--suga-related-card-bg) !important; box-shadow: 0 10px 24px rgba(15, 49, 86, 0.06) !important; box-sizing: border-box !important; } /* 5. Parent service card */ body[data-prefix="single_page"] .suga-related-card--parent > .stk-column-wrapper > .stk-block-content, body[data-prefix="single_page"] .suga-related-card--parent > .stk-column-wrapper > .stk-inner-blocks { border-color: var(--suga-related-card-dark) !important; border-top-color: var(--suga-related-card-dark) !important; border-left: 4px solid var(--suga-color-orange) !important; background: var(--suga-related-card-dark) !important; box-shadow: 0 12px 28px rgba(15, 49, 86, 0.16) !important; } /* 6. Card title */ body[data-prefix="single_page"] .suga-related-card__title, body[data-prefix="single_page"] h3.suga-related-card__title { margin: 0 0 18px !important; padding: 0 0 18px !important; border-bottom: 1px solid #e4ebf2 !important; color: var(--suga-related-card-title) !important; -webkit-text-fill-color: var(--suga-related-card-title) !important; font-size: 19px !important; line-height: 1.22 !important; font-weight: 800 !important; letter-spacing: -0.025em !important; text-align: left !important; } body[data-prefix="single_page"] .suga-related-card--parent .suga-related-card__title, body[data-prefix="single_page"] .suga-related-card--parent h3.suga-related-card__title { border-bottom-color: rgba(255,255,255,0.14) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } /* 7. Card description */ body[data-prefix="single_page"] .suga-related-card__text, body[data-prefix="single_page"] .suga-related-card__text p, body[data-prefix="single_page"] .suga-related-card__text .stk-block-text__text { margin: 0 0 18px !important; padding: 0 !important; color: var(--suga-related-card-text) !important; -webkit-text-fill-color: var(--suga-related-card-text) !important; font-size: 13px !important; line-height: 1.65 !important; font-weight: 500 !important; } body[data-prefix="single_page"] .suga-related-card--parent .suga-related-card__text, body[data-prefix="single_page"] .suga-related-card--parent .suga-related-card__text p, body[data-prefix="single_page"] .suga-related-card--parent .suga-related-card__text .stk-block-text__text { color: rgba(255,255,255,0.68) !important; -webkit-text-fill-color: rgba(255,255,255,0.68) !important; } /* 8. Exact-match anchor link - no auto arrow */ body[data-prefix="single_page"] .suga-related-card__link { margin: auto 0 0 !important; padding: 0 !important; } body[data-prefix="single_page"] .suga-related-card__link, body[data-prefix="single_page"] .suga-related-card__link p, body[data-prefix="single_page"] .suga-related-card__link .stk-block-text__text { font-size: 13px !important; line-height: 1.3 !important; font-weight: 800 !important; } body[data-prefix="single_page"] .suga-related-card__link a { color: var(--suga-color-orange) !important; -webkit-text-fill-color: var(--suga-color-orange) !important; text-decoration: none !important; font-weight: 800 !important; } body[data-prefix="single_page"] .suga-related-card__link a::after { content: none !important; } body[data-prefix="single_page"] .suga-related-card__link a:hover { text-decoration: underline !important; text-underline-offset: 3px !important; } body[data-prefix="single_page"] .suga-related-card--parent .suga-related-card__link a { color: var(--suga-color-orange) !important; -webkit-text-fill-color: var(--suga-color-orange) !important; } /* 9. Terminal margin guard */ body[data-prefix="single_page"] .suga-pillar-section--12 .suga-pillar-section__inner > :last-child, body[data-prefix="single_page"] .suga-pillar-section--related-services .suga-pillar-section__inner > :last-child, body[data-prefix="single_page"] .suga-related-card > .stk-column-wrapper > .stk-block-content > :last-child, body[data-prefix="single_page"] .suga-related-card > .stk-column-wrapper > .stk-inner-blocks > :last-child { margin-bottom: 0 !important; margin-block-end: 0 !important; } /* 10. Tablet */ @media (max-width: 1024px) { body[data-prefix="single_page"] .suga-pillar-section--12, body[data-prefix="single_page"] .suga-pillar-section--related-services { --suga-section-padding-top: 46px; --suga-section-padding-bottom: 42px; } body[data-prefix="single_page"] .suga-related-services-grid > .stk-row, body[data-prefix="single_page"] .suga-related-services-grid .stk-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; } } /* 11. Mobile */ @media (max-width: 782px) { body[data-prefix="single_page"] .suga-pillar-section--12, body[data-prefix="single_page"] .suga-pillar-section--related-services { --suga-section-padding-top: 40px; --suga-section-padding-bottom: 36px; } body[data-prefix="single_page"] .suga-related-services-grid > .stk-row, body[data-prefix="single_page"] .suga-related-services-grid .stk-row { grid-template-columns: 1fr !important; gap: 16px !important; } body[data-prefix="single_page"] .suga-related-card > .stk-column-wrapper > .stk-block-content, body[data-prefix="single_page"] .suga-related-card > .stk-column-wrapper > .stk-inner-blocks { padding: 24px 20px 22px !important; } body[data-prefix="single_page"] .suga-related-card__title, body[data-prefix="single_page"] h3.suga-related-card__title { font-size: 18px !important; } }