自包字段，
自包按钮。
不再有任何 CF7 自动注入的
修饰类（叠加在 .bldc-table 上，可组合）：
.bldc-table--striped 偶数行浅灰底
.bldc-table--compact 紧凑行高（规格密集表）
.bldc-table--first-col-label 第一列浅灰底 + 灰字（无表头的参数表）
单元格修饰：
该列表头变琥珀色（用于"我们家产品列"这种突出胜出列）
/ 该列右对齐 + 等宽数字（用于流量/扬程/数值列）
.bldc-table-wrap 提供窄屏横向滚动；不要把 .bldc-table 直接裸放到容器里，
否则 5+ 列的表格在 480px 屏会撑破布局。
========================================================================== */
.bldc-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 8px;
border: 1px solid #E3E8EE;
background: #ffffff;
box-shadow: 0 2px 8px -2px rgba(15, 37, 51, 0.08);
}
.bldc-table {
width: 100%;
min-width: 560px;
border-collapse: collapse;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 14px;
line-height: 1.55;
color: #0F2533;
background: #ffffff;
}
.bldc-table caption {
caption-side: top;
text-align: left;
padding: 14px 18px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #6c757d;
background: #F8FAFB;
border-bottom: 1px solid #E3E8EE;
}
.bldc-table thead th {
padding: 14px 16px;
text-align: center;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #5BC4DE;
background: #062A42;
border-right: 1px solid rgba(91, 196, 222, 0.2);
white-space: nowrap;
}
.bldc-table thead th:first-child {
text-align: left;
padding-left: 18px;
}
.bldc-table thead th:last-child {
border-right: none;
}
/* 强调列（"我们家产品"突出胜出列）— amber 文字 + 加粗 */
.bldc-table thead th.accent {
color: #FFB547;
font-weight: 700;
}
/* body 单元格强调（同列）— navy 加粗，配合 thead .accent 形成完整列高亮 */
.bldc-table tbody td.accent {
color: #0B5E8F;
font-weight: 600;
}
.bldc-table tbody td {
padding: 11px 14px;
text-align: center;
color: #6B7A88;
border-right: 1px solid #E3E8EE;
border-bottom: 1px solid #E3E8EE;
vertical-align: top;
}
.bldc-table tbody td:first-child {
text-align: left;
padding-left: 18px;
color: #0F2533;
font-weight: 500;
}
.bldc-table tbody td:last-child {
border-right: none;
}
.bldc-table tbody tr:last-child td {
border-bottom: none;
}
/* 数字列右对齐（手动加 .num 到 td/th 上 — 覆盖默认居中） */
.bldc-table .num {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* 斑马纹（可选）— 低调浅灰，不抢网格线视觉 */
.bldc-table--striped tbody tr:nth-child(even) td {
background: #FAFBFC;
}
/* 紧凑行高 */
.bldc-table--compact thead th { padding: 11px 12px; }
.bldc-table--compact tbody td { padding: 9px 12px; font-size: 13px; }
/* 第一列灰 label 风（无表头的参数表，常配合无 thead 用）*/
.bldc-table--first-col-label tbody td:first-child {
color: #6c757d;
font-weight: 500;
width: 38%;
background: #F8FAFB;
text-align: left;
}
@media (max-width: 768px) {
.bldc-table { font-size: 13px; min-width: 520px; }
.bldc-table thead th { padding: 11px 12px; font-size: 11px; }
.bldc-table tbody td { padding: 9px 11px; }
.bldc-table thead th:first-child,
.bldc-table tbody td:first-child { padding-left: 14px; }
}
/* ==========================================================================
.bldc-toc — 全站标准目录（取代 LuckyWP TOC 插件）
--------------------------------------------------------------------------
使用：
在文章正文外层加 class="bldc-article"，TOC 容器写：
toc.js 会扫描 scope 内的 h2/h3 自动生成嵌套目录 + scrollspy 高亮。
data-toc-scope 必填 CSS 选择器，扫描标题的范围（默认 .bldc-article）
data-toc-levels 可选 逗号分隔的标题级别，默认 "h2,h3"
data-toc-title 可选 目录顶部标题，默认 "On this page"
桌面端可选 sticky 用法：把 .bldc-toc 放在双栏布局的左/右窄列里，
父列加 inline style position:sticky; top:96px; align-self:start;
========================================================================== */
.bldc-toc {
display: block;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: #F8FAFB;
border: 1px solid #e1e8ed;
border-left: 3px solid #1CA0C4;
border-radius: 6px;
padding: 24px 28px 24px 40px;
margin: 0 0 32px;
font-size: 15px;
line-height: 1.55;
}
.bldc-toc__title {
display: block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #1CA0C4;
margin: 0 0 12px;
}
.bldc-toc__list,
.bldc-toc__list ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Top-level CSS counter (only top-level items get "1." "2." prefixes; nested ul stays unnumbered) */
.bldc-toc__list {
counter-reset: bldc-toc-num;
}
.bldc-toc__list > li {
counter-increment: bldc-toc-num;
margin: 0;
padding: 0;
}
.bldc-toc__list ul li {
margin: 0;
padding: 0;
}
.bldc-toc__list a {
display: block;
padding: 5px 0 5px 12px;
color: #2c3e50;
text-decoration: none;
border-left: 2px solid transparent;
margin-left: -14px;
padding-left: 12px;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
/* Top-level item — show counter "1." "2." in cyan, reserve room via increased padding-left */
.bldc-toc__list > li > a {
position: relative;
padding-left: 36px;
}
.bldc-toc__list > li > a::before {
content: counter(bldc-toc-num) ".";
position: absolute;
left: 12px;
top: 5px;
color: #1CA0C4;
font-weight: 700;
font-variant-numeric: tabular-nums;
min-width: 18px;
}
.bldc-toc__list > li > a.is-active::before {
color: #062A42;
}
.bldc-toc__list a:hover {
color: #1CA0C4;
border-left-color: #5BC4DE;
}
.bldc-toc__list a.is-active {
color: #062A42;
font-weight: 600;
border-left-color: #1CA0C4;
background: #F2FAFC;
}
/* 二级嵌套（h3） */
.bldc-toc__list ul {
margin-left: 16px;
border-left: 1px dashed #d5dde5;
padding-left: 0;
}
.bldc-toc__list ul a {
font-size: 14px;
color: #6c757d;
padding-left: 14px;
margin-left: 0;
}
.bldc-toc__list ul a:hover {
color: #1CA0C4;
}
.bldc-toc__list ul a.is-active {
color: #062A42;
}
/* 可折叠（移动端友好）：toc.js 会在窄屏给容器加 .is-collapsible / .is-open */
.bldc-toc__toggle {
display: none;
}
.bldc-toc.is-collapsible .bldc-toc__toggle {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: none;
color: #1CA0C4;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
padding: 0;
margin-left: 8px;
}
.bldc-toc.is-collapsible .bldc-toc__list {
display: none;
}
.bldc-toc.is-collapsible.is-open .bldc-toc__list {
display: block;
margin-top: 14px;
}
.bldc-toc.is-collapsible .bldc-toc__toggle::after {
content: "▾";
transition: transform 0.15s;
}
.bldc-toc.is-collapsible.is-open .bldc-toc__toggle::after {
transform: rotate(180deg);
}
@media (max-width: 768px) {
.bldc-toc { padding: 18px 18px 18px 28px; margin-bottom: 24px; }
.bldc-toc__list a { padding: 6px 0 6px 12px; }
.bldc-toc__list > li > a { padding-left: 32px; }
}
/* ==========================================================================
.bldc-hotspot — Block #12 Image Hotspot
Why: vanilla replacement for Elementor JetTricks Hotspot widget. Authors
place transparent dots over an image at percentage coordinates;
hover/click reveals a tooltip with parts info.
Markup contract (post_content):
JS at assets/js/hotspot.js sets data-side-x (left|right) and data-side-y
(top|bottom) on each dot based on coordinates so the tooltip emerges
away from the figure edge. Pure CSS handles hover; click toggles
.is-open for sticky display (mobile-friendly).
========================================================================== */
.bldc-hotspot-figure {
position: relative;
display: block;
margin: 0 auto;
max-width: 800px;
line-height: 0; /* avoid stray text-node baseline */
}
.bldc-hotspot-figure > img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}
/* The clickable dot (positioned by JS via inline left/top %).
3-color hollow target: amber #FFB547 ring + dual-side halo (white outer + navy inner outline)
+ center white pinpoint, transparent middle area. The user can SEE THROUGH the dot to read
the pump structure underneath; the bright amber ring + dual halo + pulse animation grab
attention without blocking the image. Works on dark, light, metallic, and colored photos. */
.bldc-hotspot-dot {
position: absolute;
width: 22px;
height: 22px;
margin: 0;
padding: 0;
border: 2.5px solid #FFB547;
border-radius: 50%;
background: transparent;
box-shadow:
0 0 0 1.5px rgba(6, 42, 66, 0.85), /* navy thin outline — pops on light bg */
0 0 0 4px rgba(255, 255, 255, 0.4), /* white outer halo — pops on dark bg */
0 0 14px 3px rgba(255, 181, 71, 0.55); /* amber glow — strengthens "look at me" */
cursor: pointer;
transform: translate(-50%, -50%);
transition: transform 0.2s, box-shadow 0.2s, border-width 0.2s;
z-index: 2;
}
/* Center pinpoint — small white dot for "this exact spot" semantic; transparent ring around it */
.bldc-hotspot-dot::after {
content: "";
position: absolute;
inset: 7px;
background: #FFFFFF;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(6, 42, 66, 0.6);
pointer-events: none;
}
.bldc-hotspot-dot:focus {
outline: 0;
}
.bldc-hotspot-dot:focus-visible {
outline: 3px solid #1CA0C4;
outline-offset: 4px;
}
/* Pulse ring (amber to match ring) */
.bldc-hotspot-dot::before {
content: "";
position: absolute;
inset: -8px;
border: 2px solid rgba(255, 181, 71, 0.75);
border-radius: 50%;
animation: bldc-hotspot-pulse 1.6s ease-out infinite;
pointer-events: none;
}
@keyframes bldc-hotspot-pulse {
0% { transform: scale(0.7); opacity: 1; }
100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.bldc-hotspot-dot::before { animation: none; opacity: 0; }
.bldc-hotspot-dot { transition: none; }
}
.bldc-hotspot-dot:hover,
.bldc-hotspot-dot.is-open {
transform: translate(-50%, -50%) scale(1.15);
border-width: 3px;
box-shadow:
0 0 0 1.5px rgba(6, 42, 66, 1),
0 0 0 5px rgba(255, 255, 255, 0.6),
0 0 22px 6px rgba(255, 181, 71, 0.75);
}
/* Tooltip card (hidden by default, shown on hover or .is-open) */
.bldc-hotspot-tooltip {
position: absolute;
display: block;
width: max-content;
max-width: 280px;
padding: 12px 14px;
background: #FFFFFF;
color: #0F2533;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.55;
letter-spacing: 0;
text-align: left;
white-space: normal;
border: 1px solid #E3E8EE;
border-radius: 8px;
box-shadow: 0 12px 28px -10px rgba(6, 42, 66, 0.28), 0 2px 4px rgba(6, 42, 66, 0.08);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.18s, transform 0.18s;
z-index: 3;
}
.bldc-hotspot-tooltip strong {
color: #062A42;
font-weight: 600;
}
/* Tooltip side placement (set by JS based on dot x/y) */
.bldc-hotspot-dot[data-side-x="right"] .bldc-hotspot-tooltip {
left: 28px;
transform: translateY(-50%) translateX(-6px);
}
.bldc-hotspot-dot[data-side-x="right"]:hover .bldc-hotspot-tooltip,
.bldc-hotspot-dot[data-side-x="right"].is-open .bldc-hotspot-tooltip {
transform: translateY(-50%) translateX(0);
}
.bldc-hotspot-dot[data-side-x="left"] .bldc-hotspot-tooltip {
right: 28px;
transform: translateY(-50%) translateX(6px);
}
.bldc-hotspot-dot[data-side-x="left"]:hover .bldc-hotspot-tooltip,
.bldc-hotspot-dot[data-side-x="left"].is-open .bldc-hotspot-tooltip {
transform: translateY(-50%) translateX(0);
}
/* Vertical baseline — anchor tooltip vertical center to dot center.
For dots near top edge, push tooltip downward so it doesn't clip. */
.bldc-hotspot-dot[data-side-y="bottom"] .bldc-hotspot-tooltip {
top: 0;
}
.bldc-hotspot-dot[data-side-y="top"] .bldc-hotspot-tooltip {
bottom: 0;
top: auto;
transform: translateY(50%) translateX(var(--bldc-hotspot-tx, 0));
}
/* Show on hover (desktop fine pointer) and on .is-open (click-toggle) */
.bldc-hotspot-dot:hover .bldc-hotspot-tooltip,
.bldc-hotspot-dot:focus-visible .bldc-hotspot-tooltip,
.bldc-hotspot-dot.is-open .bldc-hotspot-tooltip {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Tooltip arrow */
.bldc-hotspot-tooltip::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #FFFFFF;
border: 1px solid #E3E8EE;
transform: rotate(45deg);
}
.bldc-hotspot-dot[data-side-x="right"] .bldc-hotspot-tooltip::before {
left: -6px;
top: 50%;
margin-top: -5px;
border-right: 0;
border-top: 0;
}
.bldc-hotspot-dot[data-side-x="left"] .bldc-hotspot-tooltip::before {
right: -6px;
top: 50%;
margin-top: -5px;
border-left: 0;
border-bottom: 0;
}
/* Mobile: ≤480px — tooltip becomes bottom drawer, full image width.
At very narrow widths, edge-flipping isn't enough; force a docked card below the image. */
@media (max-width: 480px) {
.bldc-hotspot-tooltip {
position: fixed;
left: 16px;
right: 16px;
bottom: 16px;
top: auto !important;
max-width: none;
width: auto;
transform: translateY(8px) !important;
box-shadow: 0 -8px 28px -8px rgba(6, 42, 66, 0.35);
}
.bldc-hotspot-dot.is-open .bldc-hotspot-tooltip,
.bldc-hotspot-dot:focus-visible .bldc-hotspot-tooltip {
transform: translateY(0) !important;
}
.bldc-hotspot-tooltip::before { display: none; }
/* Hide hover-only tooltip on touch — only .is-open shows it */
.bldc-hotspot-dot:hover .bldc-hotspot-tooltip { opacity: 0; visibility: hidden; }
}
/* ============================================================
Blog archive (post 1294 zeroy_template, type=blog)
Replaces inline-style font stacks that broke PHP quote nesting.
============================================================ */
.archive-title-h1 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: clamp(26px, 4vw, 38px);
font-weight: 600;
color: #062A42;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0 0 12px;
}
.archive-description-p {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 15px;
color: #6B7A88;
line-height: 1.6;
margin: 0;
}
/* ==========================================================================
Block #12 — hotspot figure decoration helpers (site-wide)
--------------------------------------------------------------------------
First user: /support/the-structure-of-bldc-pump/ (post 1019).
Promoted from per-page zeroY compiled CSS so any page using the
markup can wrap it with corner-marks
+ annot-line + chip-row. Font stacks normalised to system sans (was
ui-monospace / JetBrains Mono, banned by font strategy memory).
========================================================================== */
.corner-marks { position: relative; }
.corner-marks::before,
.corner-marks::after,
.corner-marks .cm-br,
.corner-marks .cm-bl {
content: "";
position: absolute;
width: 16px;
height: 16px;
border-color: #1CA0C4;
border-style: solid;
border-width: 0;
pointer-events: none;
}
/* !important is necessary: zeroY page-local compiled CSS occasionally emits
the .corner-marks rule block 2-3 times when the class is reused on a single
page (1049 = 3x: hero, hotspot, certifications), and its later repetitions
reset border-width to 0 without restoring all four corner specifics. The
!important here ensures every corner remains visible regardless of any
downstream cascade that re-emits the base rule. */
.corner-marks::before { top: 10px !important; left: 10px !important; border-top-width: 1.5px !important; border-left-width: 1.5px !important; }
.corner-marks::after { top: 10px !important; right: 10px !important; border-top-width: 1.5px !important; border-right-width: 1.5px !important; }
.corner-marks .cm-br { bottom: 10px !important; right: 10px !important; border-bottom-width: 1.5px !important; border-right-width: 1.5px !important; }
.corner-marks .cm-bl { bottom: 10px !important; left: 10px !important; border-bottom-width: 1.5px !important; border-left-width: 1.5px !important; }
.annot-line {
display: flex;
align-items: center;
gap: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 11px;
color: #1CA0C4;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.annot-line::before,
.annot-line::after {
content: "";
display: block;
height: 1px;
background: #1CA0C4;
flex: 1;
min-width: 18px;
}
.annot-line::before { margin-right: 8px; }
.annot-line::after { margin-left: 8px; }
.chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 9px;
border-radius: 999px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.chip-brand { background: #E6F4F9; color: #0B5E8F; border: 1px solid rgba(28, 160, 196, 0.25); }
.chip-neutral { background: #F6F8FA; color: #0F2533; border: 1px solid #E3E8EE; }
/* ============================================================
Pump Archive (/pump/) — zeroy_template post 1358
Session 23 — 2026-05-11
============================================================ */
.pump-archive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.pump-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 8px;
overflow: hidden;
text-decoration: none;
color: inherit;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
transition: transform 0.2s, box-shadow 0.2s;
}
.pump-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(6, 42, 66, 0.10);
}
.pump-card-image {
aspect-ratio: 1 / 1;
background: #F6F8FA;
overflow: hidden;
}
.pump-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pump-card-image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #94A3B8;
font-size: 13px;
}
.pump-card-body {
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
}
.pump-card-title {
font-size: 18px;
font-weight: 700;
color: #062A42;
margin: 0 0 14px;
line-height: 1.3;
}
.pump-card-specs {
display: grid;
grid-template-columns: auto 1fr;
gap: 6px 14px;
font-size: 13px;
color: #475569;
margin: 0 0 18px;
}
.pump-card-specs dt { white-space: nowrap; }
.pump-card-specs dd {
margin: 0;
text-align: right;
font-weight: 600;
color: #062A42;
white-space: nowrap;
}
.pump-card-cta {
margin-top: auto;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 6px;
background: #1CA0C4;
color: #fff;
padding: 9px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
}
.pump-archive-pagination {
margin-top: 48px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.pump-archive-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 14px;
background: #fff;
color: #062A42;
text-decoration: none;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
transition: background 0.15s, color 0.15s;
}
.pump-archive-pagination .page-numbers:hover { background: #E2E8F0; }
.pump-archive-pagination .page-numbers.current,
.pump-archive-pagination .page-numbers.current:hover {
background: #1CA0C4;
color: #fff;
}
.pump-archive-pagination .page-numbers.dots {
background: transparent;
box-shadow: none;
}
@media (max-width: 768px) {
.pump-archive-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 480px) {
.pump-archive-grid { grid-template-columns: 1fr; }
}
或
。
作用域：.wpcf7-form（任何 CF7 表单自动继承，不用挨个页面 override）。
注：html_id="contact-form-zjf" 是 GTM 追踪 ID，与样式无关。
========================================================================== */
.wpcf7-form {
line-height: 1.5;
}
/* 每个字段行（label + input/textarea）— 行间距 14px */
.wpcf7-form .wpcf7-row {
margin-bottom: 14px;
}
/* Submit 区 — message 字段下方紧贴 14px，按钮自身不再叠 margin
position:relative 给 spinner 提供 absolute 定位上下文 */
.wpcf7-form .wpcf7-actions {
margin-top: 14px;
position: relative;
}
/* 大写 monospace label（mockup 标志性元素，纯 system font stack 无下载） */
.wpcf7-form .wpcf7-label {
display: block;
font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6B7A88;
margin-bottom: 6px;
}
/* 文本类输入框统一风格（text / email / tel / url / number / date / select） */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-url,
.wpcf7-form-control.wpcf7-number,
.wpcf7-form-control.wpcf7-date,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-select {
width: 100%;
padding: 12px 16px;
border: 1.5px solid #E3E8EE;
border-radius: 4px;
background: #FFFFFF;
color: #0F2533;
font-family: inherit;
font-size: 15px;
line-height: 1.5;
outline: none;
transition: border-color 0.2s;
box-sizing: border-box;
}
/* Placeholder 文字颜色 — 比正文浅、但仍清晰可读 */
.wpcf7-form-control::placeholder {
color: #6B7A88;
}
/* Focus 态：边框换成 accent cyan — 呼应设计系统 */
.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-email:focus,
.wpcf7-form-control.wpcf7-tel:focus,
.wpcf7-form-control.wpcf7-url:focus,
.wpcf7-form-control.wpcf7-number:focus,
.wpcf7-form-control.wpcf7-date:focus,
.wpcf7-form-control.wpcf7-textarea:focus,
.wpcf7-form-control.wpcf7-select:focus {
border-color: #1CA0C4;
}
/* Textarea 特有：6 行起步 + 行高 + 只允许纵向拉伸（mockup rows="6"） */
.wpcf7-form-control.wpcf7-textarea {
height: 168px;
min-height: 90px;
line-height: 1.6;
resize: vertical;
}
/* 提交按钮 — cyan + 大写 + 内嵌 → 箭头（mockup 视觉规格）
注： 不支持伪元素，用 background-image 嵌入 SVG 箭头 */
.wpcf7-form .wpcf7-submit {
width: 100%;
padding: 15px 50px 15px 26px;
margin: 0;
background-color: #1CA0C4;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 8h12M9 4l4 4-4 4' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 18px center;
background-size: 16px 16px;
color: #FFFFFF;
border: none;
border-radius: 4px;
font-family: inherit;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
cursor: pointer;
box-shadow: 0 4px 14px -4px rgba(28, 160, 196, 0.55);
transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.wpcf7-form .wpcf7-submit:hover {
background-color: #0B5E8F;
box-shadow: 0 6px 20px -4px rgba(11, 94, 143, 0.6);
transform: translateY(-1px);
}
/* CF7 spinner —— CF7 自带 visibility:hidden + display:inline-block + width/height:24px，
表面看不见但仍占布局，被 submit 按钮 (width:100%) 挤到下一行多出约 24px 空白。
策略：默认彻底 display:none，提交进行时改 absolute 浮在按钮右侧。 */
.wpcf7-form .wpcf7-spinner {
display: none;
}
.wpcf7-form.submitting .wpcf7-spinner {
display: inline-block;
visibility: visible;
position: absolute;
top: 50%;
right: 18px;
transform: translateY(-50%);
width: 18px;
height: 18px;
margin: 0;
background-color: rgba(255, 255, 255, 0.85);
}
/* 校验失败提示 — 淡化为小号红字，不喧宾夺主 */
.wpcf7-not-valid-tip {
color: #B91C1C;
font-size: 12px;
margin-top: 4px;
display: block;
}
.wpcf7-form-control.wpcf7-not-valid {
border-color: #B91C1C;
}
/* 提交后的反馈条（成功/失败/validation summary） */
.wpcf7-response-output {
margin: 14px 0 0 !important;
padding: 12px 14px !important;
border-radius: 4px !important;
font-size: 13px;
line-height: 1.5;
}
/* ============================================================
Video Modal (driven by assets/js/video-modal.js)
触发：[data-youtube-modal="VIDEO_ID"] 元素 click → 打开
关闭：点 backdrop / ESC / 点 × — 任一即可
设计：黑色半透 backdrop + 居中容器 + 16:9 比例 iframe
============================================================ */
.video-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.82);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: video-modal-fade 0.18s ease-out;
}
@keyframes video-modal-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.video-modal-frame {
position: relative;
width: 100%;
max-width: 960px;
background: #000;
border-radius: 8px;
overflow: visible;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.video-modal-aspect {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
border-radius: 8px;
overflow: hidden;
}
.video-modal-aspect iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.video-modal-close {
position: absolute;
top: -44px;
right: 0;
width: 36px;
height: 36px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
color: #ffffff;
cursor: pointer;
transition: background 0.15s, transform 0.15s;
}
.video-modal-close:hover,
.video-modal-close:focus-visible {
background: rgba(255, 255, 255, 0.22);
transform: scale(1.05);
outline: none;
}
@media (max-width: 768px) {
.video-modal-backdrop { padding: 16px; }
.video-modal-close {
top: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.55);
border-color: rgba(255, 255, 255, 0.4);
}
}
/* ============================================================
Gallery Modal (driven by assets/js/gallery-modal.js)
触发：[data-gallery-images="url1|url2|url3"] 元素 click → 打开
关闭：点 backdrop / ESC / 点 ×
切换：← → 键 / 左右箭头按钮 / 底部圆点
设计：白色卡片 + 居中图片（max aspect 4:3）+ 圆点指示器
============================================================ */
.gallery-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.82);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
animation: gallery-modal-fade 0.18s ease-out;
}
@keyframes gallery-modal-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.gallery-modal-frame {
position: relative;
width: 100%;
max-width: 960px;
background: #FFFFFF;
border-radius: 12px;
padding: 48px 64px 32px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.gallery-modal-stage {
width: 100%;
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
background: #FFFFFF;
border-radius: 8px;
overflow: hidden;
}
.gallery-modal-img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.gallery-modal-close {
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
color: #062A42;
cursor: pointer;
border-radius: 50%;
transition: background 0.15s;
}
.gallery-modal-close:hover,
.gallery-modal-close:focus-visible {
background: rgba(6, 42, 66, 0.08);
outline: none;
}
.gallery-modal-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.96);
border: 1px solid #E3E8EE;
color: #062A42;
cursor: pointer;
border-radius: 50%;
box-shadow: 0 4px 14px rgba(6, 42, 66, 0.12);
transition: transform 0.15s, box-shadow 0.15s;
}
.gallery-modal-nav:hover,
.gallery-modal-nav:focus-visible {
transform: translateY(-50%) scale(1.05);
box-shadow: 0 6px 18px rgba(6, 42, 66, 0.18);
outline: none;
}
.gallery-modal-prev { left: 14px; }
.gallery-modal-next { right: 14px; }
.gallery-modal-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.gallery-modal-dot {
width: 8px;
height: 8px;
padding: 0;
border-radius: 50%;
background: #D5DDE5;
border: 0;
cursor: pointer;
transition: background 0.15s, transform 0.15s;
}
.gallery-modal-dot.is-active {
background: #1CA0C4;
transform: scale(1.25);
}
.gallery-modal-dot:hover,
.gallery-modal-dot:focus-visible {
background: #1CA0C4;
outline: none;
}
@media (max-width: 768px) {
.gallery-modal-backdrop { padding: 12px; }
.gallery-modal-frame { padding: 44px 16px 26px; border-radius: 10px; }
.gallery-modal-nav { width: 38px; height: 38px; }
.gallery-modal-prev { left: 6px; }
.gallery-modal-next { right: 6px; }
}
/* ==========================================================================
.bldc-table — 全站标准数据表格（取代 TablePress）
--------------------------------------------------------------------------
视觉锚点（与 971 "How Important Is Circulation Pump" 对比表对齐）：
- 外壳：圆角 8px + 1px #E3E8EE 边框 + 柔软投影 → 卡片感
- 表头：dark navy #062A42 底 + cyan #5BC4DE uppercase tracked 文字
- 表体：白底 + #E3E8EE 网格线 + 第一列深字加粗 + 其他列灰字居中
- 字体：system-ui（与正文一致），不再是 monospace
- 强调列：thead th 加 class="accent" → 该列表头变 amber #FFB547
使用：
| Features | AC Pumps | Brushless DC Pumps |
|---|---|---|
| Power Source | AC | DC |