xinyouhe/cms-SiteForge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
7d7e98adfa9f59d8386813cc42e52b4cfde9b055
cms-SiteForge/themes/trade-pro/pro.css
T
浅念 7d7e98adfa feat: port cms about layout into trade-pro 
Task 10e: rewrite pages/about.html from the 2-row thin variant to the
full cms about page design (about.astro, pixel baseline
dist/hesupipe/en/about/): page hero with breadcrumb + cover backdrop +
in-page anchor button, company intro two-col with derived stats bar,
rich body (gated on body), advantages grid, dark mission band with
gallery backdrop and glass feature cards, gallery-driven facility card
grid (hidden when empty), certifications grid.

Data mapping: about page = ordinary page entry; cms dict-only stats and
factory copy have no platform fields, so stats reuse the 10a home
derivation (products/categories/brands/cases counts, hidden when all
empty) and facility cards are driven by page.cover + fields.gallery
(make_context gallery, deduped, cover first); markFloatImages is not
ported (sanitize strips class attributes, same conclusion as 10d) and
the body renders through body_copy + the 10d sf-tp-article-body
typography layer via dual classing.

CSS lands in pro.css under sf-tp-about-* reusing the 10a/10b/10c
components (two-col, stats, feature/card grids, section head, page
hero, breadcrumb); responsive collapse comes from the existing 10a/10c
media blocks, with about-specific 900/620 rules in a dedicated block
(767 intentionally empty, covered by 10c page-hero).

Tests: test_trade_pro_about_layout_structure drives a data-rich /about/
(PATCHed bootstrap entry with cover/summary/rich body/gallery + product
and post entries) and an empty custom-route about page
(meta.page_template), asserting structure, data mapping, and empty-data
section hiding.

Co-Authored-By: Claude Code <noreply@anthropic.com>
2026-10-23 15:58:30 +08:00

494 lines
53 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* trade-pro pro.css — component layer.
Phase 2 shipped a skeleton tint layer; Phase 3 Task 10a prepends the ported
cms home components; Task 10b adds the product detail components. Sources
(scoped CSS + dist pixel baseline
D:/project/cms/runtimes/astro-site-runtime/dist/hesupipe/en/):
- src/pages/[locale]/index.astro (hero / trustbar / two-col about /
applications band / section-head / card / feature / cta-band)
- src/pages/[locale]/products/[slug].astro (product hero gallery /
summary / panel titles / spec table / quote grid)
- src/components/{PageHero,FeatureGrid,CardGrid,Cta,SectionHead}.astro
Layer split with theme.css (= tokens + element baseline + shared utilities):
pro.css owns the sf-tp-* component classes; markup composes on the
theme.css base utilities (.wrap / .section / .section--soft / .eyebrow /
.icon-circle / .mono / .sf-tp-btn) and the pro-base chrome (.pro-*).
Responsive breakpoints follow the ported tokens: 900px stack, 767px hero
portrait, 620px compact (design-spec mobile). Size stays above the 2 KB
floor required by tests/test_theme_pro_v3.py for packaged assets. */
/* ── Home hero：大图完整显示（height:auto 不裁剪）+ 左深右透叠层 + 白字 ── */
.sf-theme-trade-pro .sf-tp-hero{position:relative;overflow:hidden;min-height:clamp(420px,60vh,640px);background:linear-gradient(115deg,var(--sf-tp-color-surface-inverse),var(--sf-tp-color-brand-primary-deep) 78%)}
.sf-theme-trade-pro .sf-tp-hero-slides{display:grid}
.sf-theme-trade-pro .sf-tp-hero-slide{grid-area:1/1;opacity:0;transition:opacity var(--sf-tp-duration-slow) var(--sf-tp-easing-standard)}
.sf-theme-trade-pro .sf-tp-hero-slide.active{opacity:1}
.sf-theme-trade-pro .sf-tp-hero-slide img{width:100%;height:auto;display:block}
.sf-theme-trade-pro .sf-tp-hero-overlay{position:absolute;inset:0;z-index:var(--sf-tp-z-base);background:linear-gradient(90deg,color-mix(in srgb,var(--sf-tp-color-surface-inverse) 68%,transparent) 0,color-mix(in srgb,var(--sf-tp-color-surface-inverse) 42%,transparent) 34%,transparent 62%)}
.sf-theme-trade-pro .sf-tp-hero::after{content:"";position:absolute;inset:auto 0 0;height:calc(var(--sf-tp-space-10) + var(--sf-tp-space-1));background:linear-gradient(transparent,color-mix(in srgb,var(--sf-tp-color-neutral-0) 35%,transparent));pointer-events:none}
.sf-theme-trade-pro .sf-tp-hero-content{position:absolute;inset:0;z-index:var(--sf-tp-z-raised);display:flex;align-items:center;pointer-events:none}
.sf-theme-trade-pro .sf-tp-hero-copy{position:relative;z-index:var(--sf-tp-z-raised);pointer-events:auto;width:min(calc(var(--sf-tp-container-content-max) - var(--sf-tp-space-16)),56%)}
.sf-theme-trade-pro .sf-tp-hero-copy .eyebrow{color:var(--sf-tp-color-text-inverse-muted)}
.sf-theme-trade-pro .sf-tp-hero-copy h1{color:var(--sf-tp-color-text-inverse)}
.sf-theme-trade-pro .sf-tp-lead{color:color-mix(in srgb,var(--sf-tp-color-text-inverse) 88%,transparent);font-size:var(--sf-tp-font-size-lg);line-height:var(--sf-tp-line-height-relaxed);max-width:var(--sf-tp-container-content-max);margin-block-end:var(--sf-tp-space-6)}
/* ── 信任条：4 列分隔线，图标圆位 + 标题/副题 ── */
.sf-theme-trade-pro .sf-tp-trustbar{position:relative;z-index:var(--sf-tp-z-raised);background:var(--sf-tp-color-surface-default);border-block-end:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle)}
.sf-theme-trade-pro .sf-tp-trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.sf-theme-trade-pro .sf-tp-trust-item{text-align:center;padding:var(--sf-tp-space-6) var(--sf-tp-space-4);border-inline-end:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle)}
.sf-theme-trade-pro .sf-tp-trust-item:last-child{border:0}
.sf-theme-trade-pro .sf-tp-trust-item .icon-circle{margin-block-end:var(--sf-tp-space-2)}
.sf-theme-trade-pro .sf-tp-trust-item strong{display:block;font-size:var(--sf-tp-font-size-sm);font-weight:var(--sf-tp-font-weight-semibold)}
.sf-theme-trade-pro .sf-tp-trust-item span{display:block;color:var(--sf-tp-color-text-muted);font-size:var(--sf-tp-font-size-xs)}
/* ── 关于两栏：文案 + 实景（悬浮数据条压在图底部）── */
.sf-theme-trade-pro .sf-tp-two-col{display:grid;grid-template-columns:1fr 1.22fr;gap:calc(var(--sf-tp-space-12) + var(--sf-tp-space-4));align-items:center}
.sf-theme-trade-pro .sf-tp-copy p{color:var(--sf-tp-color-text-muted);margin-block-end:var(--sf-tp-space-6)}
.sf-theme-trade-pro .sf-tp-photo{border-radius:var(--sf-tp-radius-md);overflow:hidden;box-shadow:var(--sf-tp-shadow-md);aspect-ratio:var(--sf-tp-ratio-landscape)}
.sf-theme-trade-pro .sf-tp-photo img{width:100%;height:100%;object-fit:cover;display:block}
.sf-theme-trade-pro .sf-tp-photo-plain{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(130deg,var(--sf-tp-color-surface-brand-soft),var(--sf-tp-color-neutral-200));color:var(--sf-tp-color-text-brand);font-weight:var(--sf-tp-font-weight-bold);letter-spacing:var(--sf-tp-letter-spacing-wide);font-size:var(--sf-tp-font-size-xs)}
.sf-theme-trade-pro .sf-tp-stats{display:grid;grid-template-columns:repeat(4,1fr);border-radius:var(--sf-tp-radius-sm);background:var(--sf-tp-color-surface-default);box-shadow:var(--sf-tp-shadow-md);margin-block-start:calc(-1 * var(--sf-tp-space-10));position:relative;width:92%;margin-left:auto;margin-right:auto}
.sf-theme-trade-pro .sf-tp-stat{text-align:center;padding:var(--sf-tp-space-5) var(--sf-tp-space-2);border-inline-end:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-default)}
.sf-theme-trade-pro .sf-tp-stat:last-child{border:0}
.sf-theme-trade-pro .sf-tp-stat strong{display:block;color:var(--sf-tp-color-text-brand);font-size:var(--sf-tp-font-size-2xl);line-height:var(--sf-tp-line-height-tight)}
.sf-theme-trade-pro .sf-tp-stat span{color:var(--sf-tp-color-text-muted);font-size:var(--sf-tp-font-size-xs)}
/* ── 区块头行（SectionHead）：眉题/标题左，简介/动作右 ── */
.sf-theme-trade-pro .sf-tp-section-head{display:flex;align-items:end;justify-content:space-between;gap:var(--sf-tp-space-8);margin-block-end:var(--sf-tp-space-8);flex-wrap:wrap}
.sf-theme-trade-pro .sf-tp-intro{max-width:calc(var(--sf-tp-container-content-max) - var(--sf-tp-space-16));color:var(--sf-tp-color-text-muted);font-size:var(--sf-tp-font-size-sm)}
.sf-theme-trade-pro .sf-tp-more{color:var(--sf-tp-color-text-brand);font-size:var(--sf-tp-font-size-sm);font-weight:var(--sf-tp-font-weight-semibold)}
.sf-theme-trade-pro .sf-tp-more:hover{color:var(--sf-tp-color-text-link-hover)}
.sf-theme-trade-pro .sf-tp-more .sf-tp-icon{margin-inline-start:var(--sf-tp-space-1)}
/* ── 卡片网格（CardGrid）：4 列默认 / --news 3 列；媒体 4:3 + 悬浮上抬缩放 ── */
.sf-theme-trade-pro .sf-tp-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sf-tp-space-4) calc(var(--sf-tp-space-4) + var(--sf-tp-space-1))}
.sf-theme-trade-pro .sf-tp-card-grid--news{grid-template-columns:repeat(3,minmax(0,1fr))}
.sf-theme-trade-pro .sf-tp-card{background:var(--sf-tp-color-surface-default);border:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle);border-radius:var(--sf-tp-card-border-radius);overflow:hidden;box-shadow:var(--sf-tp-shadow-xs);transition:transform var(--sf-tp-duration-fast) var(--sf-tp-easing-standard),box-shadow var(--sf-tp-duration-fast) var(--sf-tp-easing-standard)}
.sf-theme-trade-pro .sf-tp-card:hover{transform:translateY(calc(-1 * var(--sf-tp-space-1)));box-shadow:var(--sf-tp-shadow-md)}
.sf-theme-trade-pro .sf-tp-card-media{aspect-ratio:var(--sf-tp-ratio-landscape);overflow:hidden;background:var(--sf-tp-color-surface-muted)}
.sf-theme-trade-pro .sf-tp-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--sf-tp-duration-slow) var(--sf-tp-easing-standard)}
.sf-theme-trade-pro .sf-tp-card:hover .sf-tp-card-media img{transform:scale(1.04)}
.sf-theme-trade-pro .sf-tp-card-media .pro-art{height:100%}
.sf-theme-trade-pro .sf-tp-card-body{padding:var(--sf-tp-space-4) var(--sf-tp-space-4) var(--sf-tp-space-5)}
.sf-theme-trade-pro .sf-tp-card h3{font-size:var(--sf-tp-font-size-lg);margin-block-end:var(--sf-tp-space-2)}
.sf-theme-trade-pro .sf-tp-card h3 a{color:inherit}
.sf-theme-trade-pro .sf-tp-card p{color:var(--sf-tp-color-text-muted);font-size:var(--sf-tp-font-size-sm);margin-block-end:var(--sf-tp-space-2);line-height:var(--sf-tp-line-height-normal)}
.sf-theme-trade-pro .sf-tp-tag{display:inline-block;background:var(--sf-tp-color-surface-brand-soft);color:var(--sf-tp-color-text-brand);border-radius:var(--sf-tp-radius-full);padding:var(--sf-tp-space-1) var(--sf-tp-space-3);font-size:var(--sf-tp-font-size-xs)}
/* ── 应用带（applications）：深蓝渐变 + 光晕 + 2×2 图片瓦片 ── */
.sf-theme-trade-pro .sf-tp-applications{position:relative;padding-block:calc(var(--sf-tp-space-12) + var(--sf-tp-space-6));color:var(--sf-tp-color-text-inverse);overflow:hidden;background:linear-gradient(90deg,color-mix(in srgb,var(--sf-tp-color-surface-inverse) 96%,transparent),color-mix(in srgb,var(--sf-tp-color-brand-primary-deep) 88%,transparent))}
.sf-theme-trade-pro .sf-tp-applications::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,color-mix(in srgb,var(--sf-tp-color-brand-primary) 24%,transparent),transparent 42%);pointer-events:none}
.sf-theme-trade-pro .sf-tp-applications-grid{position:relative;display:grid;grid-template-columns:0.95fr 1.15fr;gap:calc(var(--sf-tp-space-12) + var(--sf-tp-space-6));align-items:center}
.sf-theme-trade-pro .sf-tp-applications .eyebrow{color:color-mix(in srgb,var(--sf-tp-color-text-inverse) 85%,transparent)}
.sf-theme-trade-pro .sf-tp-applications h2{color:var(--sf-tp-color-text-inverse);font-size:clamp(34px,3.6vw,var(--sf-tp-font-size-4xl));margin-block-end:var(--sf-tp-space-4)}
.sf-theme-trade-pro .sf-tp-applications-copy p{max-width:510px;color:color-mix(in srgb,var(--sf-tp-color-text-inverse) 88%,transparent);margin-block-end:calc(var(--sf-tp-space-5) + var(--sf-tp-space-1))}
.sf-theme-trade-pro .sf-tp-applications-copy .sf-tp-btn{background:var(--sf-tp-color-surface-default);border-color:var(--sf-tp-color-surface-default);color:var(--sf-tp-color-text-brand)}
.sf-theme-trade-pro .sf-tp-applications-copy .sf-tp-btn:hover{background:var(--sf-tp-color-brand-primary);color:var(--sf-tp-color-text-on-brand)}
.sf-theme-trade-pro .sf-tp-application-tiles{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--sf-tp-space-4) - var(--sf-tp-space-1))}
.sf-theme-trade-pro .sf-tp-app-tile{position:relative;min-height:150px;display:flex;align-items:flex-end;overflow:hidden;border-radius:var(--sf-tp-radius-sm);box-shadow:var(--sf-tp-shadow-md);background:var(--sf-tp-color-surface-inverse-muted);transition:transform var(--sf-tp-duration-fast) var(--sf-tp-easing-standard),box-shadow var(--sf-tp-duration-fast) var(--sf-tp-easing-standard)}
.sf-theme-trade-pro .sf-tp-app-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sf-theme-trade-pro .sf-tp-tile-art{position:absolute;inset:0;background:linear-gradient(135deg,var(--sf-tp-color-brand-primary-deep),var(--sf-tp-color-brand-accent))}
.sf-theme-trade-pro .sf-tp-app-tile::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,color-mix(in srgb,var(--sf-tp-color-surface-inverse) 86%,transparent))}
.sf-theme-trade-pro .sf-tp-app-tile span{position:relative;z-index:var(--sf-tp-z-raised);width:100%;padding:var(--sf-tp-space-5);color:var(--sf-tp-color-text-inverse);font-size:var(--sf-tp-font-size-lg);font-weight:var(--sf-tp-font-weight-bold);text-shadow:0 2px 6px color-mix(in srgb,var(--sf-tp-color-surface-inverse) 45%,transparent)}
.sf-theme-trade-pro .sf-tp-app-tile:hover{transform:translateY(calc(-1 * var(--sf-tp-space-1)));box-shadow:var(--sf-tp-shadow-lg)}
/* ── 特性网格（FeatureGrid）：圆图标 + 标题 + 描述 ── */
.sf-theme-trade-pro .sf-tp-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--sf-tp-space-4) - var(--sf-tp-space-1))}
.sf-theme-trade-pro .sf-tp-feature{background:var(--sf-tp-color-surface-default);border-radius:var(--sf-tp-card-border-radius);text-align:center;padding:var(--sf-tp-space-6) var(--sf-tp-space-4);border:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle)}
.sf-theme-trade-pro .sf-tp-feature .icon-circle{margin-block-end:var(--sf-tp-space-3)}
.sf-theme-trade-pro .sf-tp-feature h3{font-size:var(--sf-tp-font-size-md);margin-block-end:var(--sf-tp-space-2)}
.sf-theme-trade-pro .sf-tp-feature p{color:var(--sf-tp-color-text-muted);font-size:var(--sf-tp-font-size-sm);margin:0}
/* ── CTA 横幅（Cta）：藏青→品牌蓝渐变 + 幽灵按钮（cms 叠加实景图，静态产物用纯渐变）── */
.sf-theme-trade-pro .sf-tp-cta{padding-block:calc(var(--sf-tp-space-12) + var(--sf-tp-space-4));color:var(--sf-tp-color-text-inverse);background:linear-gradient(90deg,color-mix(in srgb,var(--sf-tp-color-surface-inverse) 94%,transparent),color-mix(in srgb,var(--sf-tp-color-brand-primary) 67%,transparent))}
.sf-theme-trade-pro .sf-tp-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sf-tp-space-6);flex-wrap:wrap}
.sf-theme-trade-pro .sf-tp-cta .eyebrow{color:var(--sf-tp-color-text-inverse-muted)}
.sf-theme-trade-pro .sf-tp-cta h2{margin-block-end:var(--sf-tp-space-2);color:var(--sf-tp-color-text-inverse)}
.sf-theme-trade-pro .sf-tp-cta p{color:color-mix(in srgb,var(--sf-tp-color-text-inverse) 83%,transparent);margin:0}
/* ── 产品详情（Task 10b，[slug].astro 移植）：画廊 + 标题区 + 参数表 + 询盘 ── */
.sf-theme-trade-pro .sf-tp-product-hero{padding-block:calc(var(--sf-tp-space-8) + var(--sf-tp-space-4)) var(--sf-tp-space-8)}
.sf-theme-trade-pro .sf-tp-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;color:var(--sf-tp-color-text-muted);font-size:var(--sf-tp-font-size-sm);margin-block-end:var(--sf-tp-space-6)}
.sf-theme-trade-pro .sf-tp-breadcrumb>*+*::before{content:"›";margin-inline:var(--sf-tp-space-3) calc(var(--sf-tp-space-3) - var(--sf-tp-space-1));color:var(--sf-tp-color-neutral-400)}
.sf-theme-trade-pro .sf-tp-breadcrumb a:hover{color:var(--sf-tp-color-text-link)}
.sf-theme-trade-pro .sf-tp-breadcrumb-current{color:var(--sf-tp-color-text-secondary);font-weight:var(--sf-tp-font-weight-semibold)}
.sf-theme-trade-pro .sf-tp-product-grid{display:grid;grid-template-columns:1.08fr 0.92fr;gap:calc(var(--sf-tp-space-12) + var(--sf-tp-space-4));align-items:center}
/* grid 列最小宽归零：缩略图横滚依赖列宽被约束（cms 同款注释） */
.sf-theme-trade-pro .sf-tp-product-gallery,.sf-theme-trade-pro .sf-tp-product-summary{min-width:0}
/* 主图：cms product-main-image（4:3 + 圆角 + 浅底）；覆盖 pro-product-media 的骨架固定高。
.pro-product-media 类仅作 pro.js 画廊钩子（querySelector 定位主图）保留。 */
.sf-theme-trade-pro .sf-tp-product-media{height:auto;aspect-ratio:var(--sf-tp-ratio-product-main);overflow:hidden;border-radius:var(--sf-tp-radius-sm);background:var(--sf-tp-color-surface-muted)}
.sf-theme-trade-pro .sf-tp-product-media img{width:100%;height:100%;object-fit:cover;display:block}
/* 缩略图：单行横滚 + scroll-snap（cms product-thumbs）；激活态沿用 pro.js
维护的 aria-pressed，品牌描边 + 焦点环 */
.sf-theme-trade-pro .sf-tp-product-thumbs{display:flex;gap:var(--sf-tp-space-3);margin-block-start:var(--sf-tp-space-3);overflow-x:auto;scroll-behavior:smooth;scrollbar-width:thin;scroll-snap-type:x proximity;padding-block-end:var(--sf-tp-space-1)}
.sf-theme-trade-pro .sf-tp-product-thumb{flex:0 0 120px;aspect-ratio:var(--sf-tp-ratio-landscape);padding:0;overflow:hidden;border:var(--sf-tp-border-width-medium) solid transparent;border-radius:var(--sf-tp-radius-xs);background:var(--sf-tp-color-surface-muted);cursor:pointer;scroll-snap-align:center}
.sf-theme-trade-pro .sf-tp-product-thumb[aria-pressed="true"],.sf-theme-trade-pro .sf-tp-product-thumb:focus-visible{border-color:var(--sf-tp-color-border-brand);box-shadow:var(--sf-tp-shadow-focus-ring)}
.sf-theme-trade-pro .sf-tp-product-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* 标题区：产品名 h1 用 cms 量级（2xl，非巨型 display），导语 + 管理字段行 + CTA 对 */
.sf-theme-trade-pro .sf-tp-product-title{font-size:var(--sf-tp-font-size-2xl);line-height:var(--sf-tp-line-height-snug);letter-spacing:var(--sf-tp-letter-spacing-normal);margin-block-end:var(--sf-tp-space-3)}
.sf-theme-trade-pro .sf-tp-product-lead{color:var(--sf-tp-color-text-muted);line-height:var(--sf-tp-line-height-relaxed);margin-block-end:var(--sf-tp-space-4)}
.sf-theme-trade-pro .sf-tp-product-meta{display:flex;flex-wrap:wrap;gap:var(--sf-tp-space-2) var(--sf-tp-space-5);color:var(--sf-tp-color-text-secondary);font-size:var(--sf-tp-font-size-sm);margin-block-end:var(--sf-tp-space-6)}
.sf-theme-trade-pro .sf-tp-product-actions{display:flex;gap:var(--sf-tp-space-4);flex-wrap:wrap}
.sf-theme-trade-pro .sf-tp-product-actions .sf-tp-btn{border-radius:var(--sf-tp-radius-full)}
/* 详情面板标题：品牌色下划短线（cms .detail-section h2 层次） */
.sf-theme-trade-pro .sf-tp-panel-title{display:inline-block;margin-block-end:var(--sf-tp-space-6);padding-block-end:var(--sf-tp-space-3);border-block-end:var(--sf-tp-border-width-strong) solid var(--sf-tp-color-border-brand)}
/* 正文：迁移富文本（.pro-rich 基线之上补表格形态——WP 迁移正文常带规格表） */
.sf-theme-trade-pro .sf-tp-product-body table{width:100%;border-collapse:collapse;table-layout:auto;font-size:var(--sf-tp-font-size-sm);margin-block:var(--sf-tp-space-6)}
.sf-theme-trade-pro .sf-tp-product-body th,.sf-theme-trade-pro .sf-tp-product-body td{border:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-default);padding:var(--sf-tp-space-3) var(--sf-tp-space-4);text-align:start;vertical-align:middle;word-break:break-word}
.sf-theme-trade-pro .sf-tp-product-body tbody tr:nth-child(even) td{background:var(--sf-tp-color-neutral-50)}
/* 参数表（cms spec-table）：键列灰底，横向可滚（宽表不溢出容器） */
.sf-theme-trade-pro .sf-tp-table-scroll{overflow-x:auto}
.sf-theme-trade-pro .sf-tp-spec-table{width:100%;border-collapse:collapse;font-size:var(--sf-tp-font-size-sm)}
.sf-theme-trade-pro .sf-tp-spec-table th,.sf-theme-trade-pro .sf-tp-spec-table td{border:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-default);padding:var(--sf-tp-space-3) var(--sf-tp-space-4);text-align:start}
.sf-theme-trade-pro .sf-tp-spec-table th{background:var(--sf-tp-color-surface-muted);font-weight:var(--sf-tp-font-weight-semibold);white-space:nowrap}
/* 询盘板块（cms quote-grid 同构）：左联系信息 + 右表单卡 */
.sf-theme-trade-pro .sf-tp-quote-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:calc(var(--sf-tp-space-12) + var(--sf-tp-space-4));align-items:start}
.sf-theme-trade-pro .sf-tp-quote-info>p{color:var(--sf-tp-color-text-muted)}
.sf-theme-trade-pro .sf-tp-quote-list{display:grid;gap:var(--sf-tp-space-5);margin-block-start:var(--sf-tp-space-6)}
.sf-theme-trade-pro .sf-tp-quote-item{display:flex;align-items:center;gap:var(--sf-tp-space-4)}
.sf-theme-trade-pro .sf-tp-quote-item .icon-circle{margin:0;flex-shrink:0}
.sf-theme-trade-pro .sf-tp-quote-item strong{display:block;margin-block-end:var(--sf-tp-space-1)}
.sf-theme-trade-pro .sf-tp-quote-item p{margin:0;color:var(--sf-tp-color-text-muted);font-size:var(--sf-tp-font-size-sm)}
.sf-theme-trade-pro .sf-tp-quote-item a:hover{color:var(--sf-tp-color-text-link)}
.sf-theme-trade-pro .sf-tp-quote-form{background:var(--sf-tp-color-surface-muted);padding:calc(var(--sf-tp-space-8) + var(--sf-tp-space-1));border-radius:var(--sf-tp-radius-sm)}
.sf-theme-trade-pro .sf-tp-quote-form form{display:grid;gap:var(--sf-tp-space-4)}
.sf-theme-trade-pro .sf-tp-quote-form .sf-tp-btn{justify-self:start}
.sf-theme-trade-pro .sf-tp-quote-form textarea{min-height:110px}
.sf-theme-trade-pro .sf-tp-quote-note{font-size:var(--sf-tp-font-size-xs);color:var(--sf-tp-color-text-muted);margin:0}
/* ── 响应式（断点随 cms 设计稿：900 栅格堆叠 / 767 hero 竖版 / 620 紧凑）── */
@media (max-width: 900px){
.sf-theme-trade-pro .sf-tp-applications-grid{grid-template-columns:1fr;gap:calc(var(--sf-tp-space-8) + var(--sf-tp-space-1))}
.sf-theme-trade-pro .sf-tp-two-col{grid-template-columns:1fr}
/* 产品详情：画廊/标题区上下堆叠；询盘左右并排收窄间距（cms 900 同款） */
.sf-theme-trade-pro .sf-tp-product-grid{grid-template-columns:1fr;gap:var(--sf-tp-space-8)}
.sf-theme-trade-pro .sf-tp-quote-grid{grid-template-columns:1fr;gap:var(--sf-tp-space-8)}
.sf-theme-trade-pro .sf-tp-card-grid,.sf-theme-trade-pro .sf-tp-card-grid--news{grid-template-columns:repeat(2,minmax(0,1fr))}
.sf-theme-trade-pro .sf-tp-feature-grid,.sf-theme-trade-pro .sf-tp-trust-grid{grid-template-columns:1fr 1fr}
.sf-theme-trade-pro .sf-tp-trust-item{border-inline-end:0;border-block-end:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle)}
}
@media (max-width: 767px){
.sf-theme-trade-pro .sf-tp-hero{aspect-ratio:3/4;min-height:520px}
.sf-theme-trade-pro .sf-tp-hero-copy{width:100%}
}
@media (max-width: 620px){
.sf-theme-trade-pro .sf-tp-hero{aspect-ratio:375/320;min-height:320px}
.sf-theme-trade-pro .sf-tp-hero-copy{max-width:57%}
.sf-theme-trade-pro .sf-tp-hero-copy .sf-tp-lead{font-size:11px;line-height:1.35;margin-block-end:12px}
/* 信任条：浮动圆角卡片 2×2（图标左、文字右） */
.sf-theme-trade-pro .sf-tp-trustbar{margin-block-start:-1px;padding-inline:0;border-radius:10px;box-shadow:var(--sf-tp-shadow-md);overflow:hidden}
.sf-theme-trade-pro .sf-tp-trust-grid{grid-template-columns:1fr 1fr}
.sf-theme-trade-pro .sf-tp-trust-item{min-height:72px;padding:11px 7px;text-align:left;display:grid;grid-template-columns:45px 1fr;align-content:center;border-inline-end:1px solid var(--sf-tp-color-border-subtle);border-block-end:1px solid var(--sf-tp-color-border-subtle)}
.sf-theme-trade-pro .sf-tp-trust-item:nth-child(2n){border-inline-end:0}
.sf-theme-trade-pro .sf-tp-trust-item:nth-last-child(-n+2){border-block-end:0}
.sf-theme-trade-pro .sf-tp-trust-item .icon-circle{grid-row:1/3;margin:0;background:transparent;font-size:20px}
.sf-theme-trade-pro .sf-tp-trust-item strong{font-size:10px}
.sf-theme-trade-pro .sf-tp-trust-item span{font-size:9px}
/* 关于区：紧凑双栏 + 数据 2×2 */
.sf-theme-trade-pro .sf-tp-two-col{grid-template-columns:1fr 1.08fr;gap:13px;align-items:start}
.sf-theme-trade-pro .sf-tp-copy p{font-size:11px;line-height:1.35;margin-block-end:10px}
.sf-theme-trade-pro .sf-tp-photo{min-height:162px}
.sf-theme-trade-pro .sf-tp-stats{grid-template-columns:repeat(2,1fr);margin-block-start:-1px}
.sf-theme-trade-pro .sf-tp-stat{padding:9px 3px}
.sf-theme-trade-pro .sf-tp-stat strong{font-size:19px}
.sf-theme-trade-pro .sf-tp-stat span{font-size:8px}
/* 应用带：浅底代替深色，按钮隐藏 */
.sf-theme-trade-pro .sf-tp-applications{padding-block:28px;color:var(--sf-tp-color-text-primary);background:linear-gradient(135deg,var(--sf-tp-color-neutral-50),var(--sf-tp-color-surface-brand-soft))}
.sf-theme-trade-pro .sf-tp-applications::before{content:none}
.sf-theme-trade-pro .sf-tp-applications .eyebrow{color:var(--sf-tp-color-text-brand)}
.sf-theme-trade-pro .sf-tp-applications h2{color:var(--sf-tp-color-text-primary);font-size:22px;margin-block-end:4px}
.sf-theme-trade-pro .sf-tp-applications-copy p{color:var(--sf-tp-color-text-secondary);font-size:11px;margin-block-end:9px}
.sf-theme-trade-pro .sf-tp-applications-copy .sf-tp-btn{display:none}
.sf-theme-trade-pro .sf-tp-applications-grid{display:block}
.sf-theme-trade-pro .sf-tp-application-tiles{gap:7px}
.sf-theme-trade-pro .sf-tp-app-tile{min-height:92px}
.sf-theme-trade-pro .sf-tp-app-tile span{padding:9px;font-size:11px}
/* 卡片 2 列紧凑；新闻网格移动端只显示前 2 张 */
.sf-theme-trade-pro .sf-tp-card-grid,.sf-theme-trade-pro .sf-tp-card-grid--news{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sf-theme-trade-pro .sf-tp-card-media{aspect-ratio:16/9}
.sf-theme-trade-pro .sf-tp-card-body{padding:9px 10px 11px}
.sf-theme-trade-pro .sf-tp-card h3{font-size:13px;margin-block-end:2px}
.sf-theme-trade-pro .sf-tp-card p{font-size:11px;margin-block-end:5px}
.sf-theme-trade-pro .sf-tp-more{font-size:10px}
.sf-theme-trade-pro .sf-tp-card-grid--news .sf-tp-card:nth-child(n+3){display:none}
/* 特性 2 列横排（图标左、文字右） */
.sf-theme-trade-pro .sf-tp-feature-grid{grid-template-columns:1fr 1fr;gap:8px}
.sf-theme-trade-pro .sf-tp-feature{min-height:92px;text-align:left;padding:12px;display:grid;grid-template-columns:44px 1fr;align-content:center;column-gap:7px}
.sf-theme-trade-pro .sf-tp-feature .icon-circle{grid-row:1/3;align-self:center;margin:0;font-size:20px}
.sf-theme-trade-pro .sf-tp-feature h3{font-size:12px;margin:0 0 3px}
.sf-theme-trade-pro .sf-tp-feature p{font-size:10px;line-height:1.3}
.sf-theme-trade-pro .sf-tp-section-head{display:block}
/* CTA：纵向堆叠 */
.sf-theme-trade-pro .sf-tp-cta{padding-block:28px}
.sf-theme-trade-pro .sf-tp-cta-inner{display:block}
.sf-theme-trade-pro .sf-tp-cta h2{font-size:22px}
.sf-theme-trade-pro .sf-tp-cta p{font-size:11px}
.sf-theme-trade-pro .sf-tp-cta .sf-tp-btn{margin-block-start:12px}
/* 产品详情 620 紧凑（cms 移动端设计稿）：面包屑收紧、缩略图缩格、
CTA 双列铺满、表单卡与参数表留白降档 */
.sf-theme-trade-pro .sf-tp-product-hero{padding-block:14px 21px}
.sf-theme-trade-pro .sf-tp-breadcrumb{margin-block-end:8px;font-size:10px}
.sf-theme-trade-pro .sf-tp-product-grid{gap:14px}
.sf-theme-trade-pro .sf-tp-product-media{aspect-ratio:16/9}
.sf-theme-trade-pro .sf-tp-product-thumbs{gap:8px;margin-block-start:7px}
.sf-theme-trade-pro .sf-tp-product-thumb{flex-basis:86px}
.sf-theme-trade-pro .sf-tp-product-lead{font-size:11px;line-height:1.35}
.sf-theme-trade-pro .sf-tp-product-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sf-theme-trade-pro .sf-tp-product-actions .sf-tp-btn{min-height:37px;font-size:11px}
.sf-theme-trade-pro .sf-tp-quote-list{gap:12px;margin-block-start:16px}
.sf-theme-trade-pro .sf-tp-quote-form{padding:16px}
.sf-theme-trade-pro .sf-tp-spec-table th,.sf-theme-trade-pro .sf-tp-spec-table td{padding:9px 12px}
}
/* ── Phase 2 skeleton tint layer（chrome 着色，供其余页面与 pro-base 骨架）── */
.sf-theme-trade-pro .pro-wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.sf-theme-trade-pro .pro-header{background:#fff;border-bottom:3px solid var(--sf-tp-primary,#0b3d91)}
.sf-theme-trade-pro .pro-logo-name small{color:var(--sf-tp-primary,#0b3d91);letter-spacing:.18em}
.sf-theme-trade-pro .pro-navigation a{color:var(--sf-tp-text,#1a2332);text-decoration:none;font-weight:500}
.sf-theme-trade-pro .pro-navigation a:hover{color:var(--sf-tp-primary,#0b3d91)}
.sf-theme-trade-pro .pro-header-cta{white-space:nowrap}
.sf-theme-trade-pro .pro-mega{border-top:1px solid #e3e9f2;background:#f7fafd}
.sf-theme-trade-pro .pro-mega a{color:var(--sf-tp-primary,#0b3d91)}
.sf-theme-trade-pro .pro-category-tiles a{border:1px solid #dfe7f2;border-radius:var(--sf-tp-radius,8px);background:#fff}
.sf-theme-trade-pro .pro-category-tiles a span{color:var(--sf-tp-accent,#f5a623)}
.sf-theme-trade-pro .pro-card{border:1px solid #dfe7f2;border-radius:var(--sf-tp-radius,8px);background:#fff;overflow:hidden}
.sf-theme-trade-pro .pro-card h3{color:var(--sf-tp-text,#1a2332)}
.sf-theme-trade-pro .pro-card:hover{border-color:var(--sf-tp-primary,#0b3d91)}
.sf-theme-trade-pro .pro-card-link{color:var(--sf-tp-primary,#0b3d91)}
.sf-theme-trade-pro .pro-end-cta{background:var(--sf-tp-primary,#0b3d91);color:#fff}
.sf-theme-trade-pro .pro-end-cta .pro-eyebrow{color:var(--sf-tp-accent,#f5a623)}
.sf-theme-trade-pro .pro-end-cta .sf-tp-btn{background:#fff;color:var(--sf-tp-primary,#0b3d91);border-color:#fff}
.sf-theme-trade-pro .pro-footer{background:#0d1b2e;color:#c7d3e2}
.sf-theme-trade-pro .pro-footer h2{color:#fff}
.sf-theme-trade-pro .pro-footer a{color:#fff}
.sf-theme-trade-pro .pro-footer-bottom{border-top:1px solid #24344c}
.sf-theme-trade-pro .pro-filter-panel{border:1px solid #dfe7f2;border-radius:var(--sf-tp-radius,8px)}
.sf-theme-trade-pro .pro-404 strong{color:var(--sf-tp-primary,#0b3d91)}
/* ── 无图占位重设计（用户反馈 2026-10-23：共享宏灰块与设计不符）──
brand 渐变底 + 首字母 + 小型 kind 标签；环形装饰隐藏 */
.sf-theme-trade-pro .pro-art{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sf-tp-space-2);background:linear-gradient(135deg,var(--sf-tp-color-surface-brand-soft),color-mix(in srgb,var(--sf-tp-color-brand-primary) 12%,var(--sf-tp-color-surface-default)));color:var(--sf-tp-color-text-brand)}
.sf-theme-trade-pro .pro-art .pro-art-ring{display:none}
.sf-theme-trade-pro .pro-art .pro-art-center{font-size:28px;font-weight:800;letter-spacing:.04em}
.sf-theme-trade-pro .pro-art .pro-art-label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sf-tp-color-text-muted)}
/* 询盘蜜罐：隐藏但不移出 DOM（pro-base 的 .pro-inquiry 作用域规则不覆盖新表单容器） */
.sf-theme-trade-pro .pro-honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
/* ── Task 10c：listing 列表页（products/news 列表移植）──
源 src/pages/[locale]/products/[...page].astro（PageHero / 260px 分类
侧栏 / CardGrid cols-3 / Pagination）与 news/[...page].astro
（1fr+310px 双栏 / news-row 横向行 / aside-box 侧栏盒）。 */
/* 内页 PageHero：浅品牌横幅；有封面时叠图 + brand-soft 渐变罩（无图纯渐变） */
.sf-theme-trade-pro .sf-tp-page-hero{position:relative;display:flex;align-items:center;overflow:hidden;min-height:calc(var(--sf-tp-space-24) * 3.5);padding-block:var(--sf-tp-space-12) calc(var(--sf-tp-space-10) + var(--sf-tp-space-1));background:linear-gradient(115deg,var(--sf-tp-color-surface-brand-soft),color-mix(in srgb,var(--sf-tp-color-surface-brand-soft) 26%,var(--sf-tp-color-surface-default)));}
.sf-theme-trade-pro .sf-tp-page-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:calc(var(--sf-tp-z-base) - 1)}
.sf-theme-trade-pro .sf-tp-page-hero-overlay{position:absolute;inset:0;z-index:var(--sf-tp-z-base);background:linear-gradient(90deg,var(--sf-tp-color-surface-brand-soft) 0,var(--sf-tp-color-surface-brand-soft) 44%,color-mix(in srgb,var(--sf-tp-color-surface-brand-soft) 74%,transparent) 53%,color-mix(in srgb,var(--sf-tp-color-surface-brand-soft) 8%,transparent) 68%)}
.sf-theme-trade-pro .sf-tp-page-hero-copy{position:relative;z-index:var(--sf-tp-z-raised);width:min(calc(var(--sf-tp-container-content-max) - var(--sf-tp-space-16)),56%)}
.sf-theme-trade-pro .sf-tp-page-hero-copy h1{margin-block:var(--sf-tp-space-2) var(--sf-tp-space-3)}
.sf-theme-trade-pro .sf-tp-page-hero-lead{color:var(--sf-tp-color-text-secondary);font-size:var(--sf-tp-font-size-lg);line-height:var(--sf-tp-line-height-relaxed);max-width:var(--sf-tp-container-content-max);margin-block-end:var(--sf-tp-space-6)}
/* 产品目录布局：260px 分类侧栏 + 主列（cms layout-sidebar / side-panel） */
.sf-theme-trade-pro .sf-tp-catalogue-layout{display:grid;grid-template-columns:260px 1fr;gap:var(--sf-tp-space-8)}
.sf-theme-trade-pro .sf-tp-catalogue-single{display:block}
.sf-theme-trade-pro .sf-tp-side-panel{align-self:start;padding:var(--sf-tp-space-5);border-radius:var(--sf-tp-card-border-radius);background:var(--sf-tp-color-surface-muted);position:sticky;top:var(--sf-tp-space-24)}
.sf-theme-trade-pro .sf-tp-side-panel h3{font-size:var(--sf-tp-font-size-sm);letter-spacing:var(--sf-tp-letter-spacing-wide);text-transform:uppercase;margin-block-end:var(--sf-tp-space-2)}
.sf-theme-trade-pro .sf-tp-side-link{display:block;padding:calc(var(--sf-tp-space-4) - var(--sf-tp-space-1)) var(--sf-tp-space-4);border-block-end:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-default);font-weight:var(--sf-tp-font-weight-semibold);color:var(--sf-tp-color-text-secondary);font-size:var(--sf-tp-font-size-sm)}
.sf-theme-trade-pro .sf-tp-side-link:hover{color:var(--sf-tp-color-text-brand)}
.sf-theme-trade-pro .sf-tp-side-link--active{color:var(--sf-tp-color-text-on-brand);background:var(--sf-tp-color-brand-primary);border-radius:var(--sf-tp-radius-xs)}
/* 列表栅格 = cms cols-3（主列比首页窄）；双类共存时显式压过 Phase 2 的
.pro-card 平台着色（更高特异性，与文件顺序无关） */
.sf-theme-trade-pro .sf-tp-card-grid--listing{grid-template-columns:repeat(3,minmax(0,1fr))}
.sf-theme-trade-pro .sf-tp-card.pro-card{background:var(--sf-tp-color-surface-default);border:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle);border-radius:var(--sf-tp-card-border-radius)}
/* pro.js 零结果空态注入的 .pro-filter-empty：栅格内整行展示 */
.sf-theme-trade-pro .pro-filter-scope>.pro-filter-empty{grid-column:1/-1;padding:var(--sf-tp-space-6);border:var(--sf-tp-border-width-hairline) dashed var(--sf-tp-color-border-default);color:var(--sf-tp-color-text-muted)}
/* 新闻分支：1fr + 310px 双栏；行 = 290px 封面 + 文本列，行间发丝线分隔 */
.sf-theme-trade-pro .sf-tp-news-layout{display:grid;grid-template-columns:1fr 310px;gap:calc(var(--sf-tp-space-8) + var(--sf-tp-space-2))}
.sf-theme-trade-pro .sf-tp-news-row{display:grid;grid-template-columns:290px 1fr;gap:var(--sf-tp-space-6);padding-block-end:var(--sf-tp-space-6);margin-block-end:var(--sf-tp-space-6);border-block-end:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-default)}
/* 行也是 pro-card（pro.js 过滤钩子）：还原为无框行形态，压过 Phase 2 着色 */
.sf-theme-trade-pro .sf-tp-news-row.pro-card{display:grid;background:transparent;border:0;border-radius:0;overflow:visible;box-shadow:none}
.sf-theme-trade-pro .sf-tp-news-row.pro-card:hover{transform:none;box-shadow:none}
.sf-theme-trade-pro .sf-tp-news-row .sf-tp-card-media{border-radius:var(--sf-tp-radius-sm);background:var(--sf-tp-color-surface-muted)}
.sf-theme-trade-pro .sf-tp-news-row:hover .sf-tp-card-media img{transform:scale(1.04)}
.sf-theme-trade-pro .sf-tp-news-body .sf-tp-tag{margin-block-end:var(--sf-tp-space-2)}
.sf-theme-trade-pro .sf-tp-news-body h3{font-size:var(--sf-tp-font-size-2xl);margin-block:var(--sf-tp-space-2)}
.sf-theme-trade-pro .sf-tp-news-body h3 a{color:inherit}
.sf-theme-trade-pro .sf-tp-news-body h3 a:hover{color:var(--sf-tp-color-text-brand)}
.sf-theme-trade-pro .sf-tp-news-body p{color:var(--sf-tp-color-text-muted);font-size:var(--sf-tp-font-size-sm);margin-block-end:var(--sf-tp-space-3)}
/* 侧栏三盒（cms aside-box）：灰底圆角卡 + 右浮计数 */
.sf-theme-trade-pro .sf-tp-aside-box{background:var(--sf-tp-color-surface-muted);border-radius:var(--sf-tp-card-border-radius);padding:calc(var(--sf-tp-space-5) + var(--sf-tp-space-1));margin-block-end:var(--sf-tp-space-4)}
.sf-theme-trade-pro .sf-tp-aside-box h3{font-size:var(--sf-tp-font-size-md);margin-block-end:var(--sf-tp-space-3)}
.sf-theme-trade-pro .sf-tp-aside-box p{margin-block-end:var(--sf-tp-space-3);font-size:var(--sf-tp-font-size-sm)}
.sf-theme-trade-pro .sf-tp-aside-box p:last-child{margin-block-end:0}
.sf-theme-trade-pro .sf-tp-aside-box a:hover{color:var(--sf-tp-color-text-brand)}
.sf-theme-trade-pro .sf-tp-aside-box strong{float:inline-end;color:var(--sf-tp-color-text-brand)}
.sf-theme-trade-pro .sf-tp-aside-box ol{padding-inline-start:var(--sf-tp-space-6);margin-block-end:0}
.sf-theme-trade-pro .sf-tp-aside-box li{margin-block:var(--sf-tp-space-4);font-size:var(--sf-tp-font-size-sm);color:var(--sf-tp-color-text-muted)}
.sf-theme-trade-pro .sf-tp-aside-box li:last-child{margin-block-end:0}
/* 分页器（cms Pagination）：窗口页码 + SVG 箭头，居中可换行 */
.sf-theme-trade-pro .sf-tp-pagination{display:flex;justify-content:center;align-items:center;gap:var(--sf-tp-space-1);margin-block-start:var(--sf-tp-space-10);flex-wrap:wrap}
.sf-theme-trade-pro .sf-tp-page-num,.sf-theme-trade-pro .sf-tp-page-arrow{display:inline-grid;place-items:center;min-width:36px;height:36px;padding-inline:6px;border-radius:var(--sf-tp-radius-sm);border:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle);color:var(--sf-tp-color-text-secondary);font-size:var(--sf-tp-font-size-sm);transition:all var(--sf-tp-duration-fast) var(--sf-tp-easing-standard)}
.sf-theme-trade-pro .sf-tp-page-num:hover,.sf-theme-trade-pro .sf-tp-page-arrow:hover:not(.is-disabled){border-color:var(--sf-tp-color-border-brand);color:var(--sf-tp-color-text-brand)}
.sf-theme-trade-pro .sf-tp-page-num.is-active{background:var(--sf-tp-color-brand-primary);border-color:var(--sf-tp-color-brand-primary);color:var(--sf-tp-color-text-on-brand);font-weight:var(--sf-tp-font-weight-semibold)}
.sf-theme-trade-pro .sf-tp-page-arrow.is-disabled{opacity:.35;cursor:default}
.sf-theme-trade-pro .sf-tp-page-dots{color:var(--sf-tp-color-text-muted);padding-inline:2px}
/* 空列表友好空态（noindex 栏目占位页）：居中提示，不渲染筛选/栅格/分页 */
.sf-theme-trade-pro .sf-tp-listing-empty{text-align:center;padding:var(--sf-tp-space-12) var(--sf-tp-space-6);border:var(--sf-tp-border-width-hairline) dashed var(--sf-tp-color-border-default);border-radius:var(--sf-tp-card-border-radius);color:var(--sf-tp-color-text-muted)}
.sf-theme-trade-pro .sf-tp-listing-empty h2{color:var(--sf-tp-color-text-secondary);margin-block-end:var(--sf-tp-space-3)}
/* ── listing 响应式（cms 断点：900 双栏堆叠 / 767 hero 竖版 / 620 紧凑）── */
@media (max-width: 900px){
.sf-theme-trade-pro .sf-tp-page-hero-copy{width:100%}
.sf-theme-trade-pro .sf-tp-catalogue-layout{grid-template-columns:1fr}
.sf-theme-trade-pro .sf-tp-side-panel{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--sf-tp-space-4)}
/* listing 栅格折叠规则须落在上方 3 列声明之后（同特异性按源顺序取胜），
既有 10a 的 900px 折叠块在本段之前，覆盖不到 --listing 修饰符 */
.sf-theme-trade-pro .sf-tp-card-grid--listing{grid-template-columns:repeat(2,minmax(0,1fr))}
.sf-theme-trade-pro .sf-tp-news-layout{grid-template-columns:1fr}
.sf-theme-trade-pro .sf-tp-news-row{grid-template-columns:240px 1fr}
}
@media (max-width: 767px){
.sf-theme-trade-pro .sf-tp-page-hero{min-height:auto;padding-block:calc(var(--sf-tp-space-12) - var(--sf-tp-space-4)) calc(var(--sf-tp-space-8) + var(--sf-tp-space-2))}
}
@media (max-width: 620px){
.sf-theme-trade-pro .sf-tp-page-hero{padding-block:calc(var(--sf-tp-space-10) + var(--sf-tp-space-4)) calc(var(--sf-tp-space-4) + var(--sf-tp-space-2));align-items:flex-start}
.sf-theme-trade-pro .sf-tp-page-hero-copy{width:62%}
.sf-theme-trade-pro .sf-tp-page-hero-copy h1{font-size:28px;line-height:1.05;margin-block-end:8px}
.sf-theme-trade-pro .sf-tp-page-hero-lead{font-size:11px;line-height:1.35;margin-block-end:12px}
.sf-theme-trade-pro .sf-tp-side-panel{display:block}
.sf-theme-trade-pro .sf-tp-card-grid--listing{gap:10px}
.sf-theme-trade-pro .sf-tp-news-row{grid-template-columns:1fr}
.sf-theme-trade-pro .sf-tp-news-row .sf-tp-card-media{aspect-ratio:16/9}
.sf-theme-trade-pro .sf-tp-news-body h3{font-size:var(--sf-tp-font-size-lg)}
.sf-theme-trade-pro .sf-tp-news-aside{margin-block-start:var(--sf-tp-space-8)}
.sf-theme-trade-pro .sf-tp-page-num,.sf-theme-trade-pro .sf-tp-page-arrow{min-width:32px;height:32px}
}
/* ── Task 10d：article 文章详情（news/[slug].astro 移植）──
源 src/pages/[locale]/news/[slug].astro：PageHero（面包屑内置）+ meta 行 +
rich-body 富文本 + 分隔线 + 作者卡 + 下一篇导航 + More News 侧盒
（120px 缩略图行）+ 深色侧栏 CTA + 返回链接。hero 复用 10c 的
sf-tp-page-hero 组件（底图/罩层/内边距由其提供）。 */
/* pro-base 的 .pro-article-hero 骨架（居中/浅底）与 .pro-article-hero h1
（clamp(40..75px) 巨型字）按特异性压平；0,3,0 > 0,1,0 / 0,1,1 */
.sf-theme-trade-pro .sf-tp-article-hero.pro-article-hero{text-align:start}
.sf-theme-trade-pro .sf-tp-article-hero .sf-tp-page-hero-copy h1{font-size:var(--sf-tp-font-size-display)}
/* hero 内面包屑（cms：置 hero 顶部，宽度随 copy 收敛，900 放开） */
.sf-theme-trade-pro .sf-tp-article-breadcrumb{margin-block-end:var(--sf-tp-space-5);max-width:min(56%,var(--sf-tp-container-content-max))}
/* meta 行：tag 胶囊 · 发布日期 · 作者 */
.sf-theme-trade-pro .sf-tp-article-meta{display:flex;align-items:center;gap:var(--sf-tp-space-2);font-size:var(--sf-tp-font-size-sm);color:var(--sf-tp-color-text-muted);margin-block-end:var(--sf-tp-space-5);flex-wrap:wrap}
.sf-theme-trade-pro .sf-tp-article-meta-dot{color:var(--sf-tp-color-neutral-400)}
/* 正文排版层（.pro-rich 基线之上，cms rich-body 同构；WP 迁移正文常带
figure/表格，class 属性被 sanitize 剥离故不做 alignleft/right 浮动分支） */
.sf-theme-trade-pro .sf-tp-article-body{color:var(--sf-tp-color-text-secondary);line-height:var(--sf-tp-line-height-relaxed)}
.sf-theme-trade-pro .sf-tp-article-body .pro-rich p{margin-block-end:var(--sf-tp-space-5)}
.sf-theme-trade-pro .sf-tp-article-body .pro-rich h2,.sf-theme-trade-pro .sf-tp-article-body .pro-rich h3,.sf-theme-trade-pro .sf-tp-article-body .pro-rich h4{color:var(--sf-tp-color-text-primary);font-weight:var(--sf-tp-font-weight-bold);margin-block:var(--sf-tp-space-6) var(--sf-tp-space-3)}
.sf-theme-trade-pro .sf-tp-article-body .pro-rich img{max-width:100%;height:auto;border-radius:var(--sf-tp-radius-md);margin-block:var(--sf-tp-space-4)}
.sf-theme-trade-pro .sf-tp-article-body .pro-rich figure{margin-block:var(--sf-tp-space-6)}
.sf-theme-trade-pro .sf-tp-article-body .pro-rich figcaption{margin-block-start:var(--sf-tp-space-2);font-size:var(--sf-tp-font-size-sm);color:var(--sf-tp-color-text-muted);text-align:center}
.sf-theme-trade-pro .sf-tp-article-body .pro-rich ul,.sf-theme-trade-pro .sf-tp-article-body .pro-rich ol{padding-inline-start:var(--sf-tp-space-6);margin-block-end:var(--sf-tp-space-5)}
.sf-theme-trade-pro .sf-tp-article-body .pro-rich li{margin-block-end:var(--sf-tp-space-2)}
.sf-theme-trade-pro .sf-tp-article-body .pro-rich blockquote{border-inline-start:3px solid var(--sf-tp-color-border-brand);padding-inline-start:var(--sf-tp-space-4);color:var(--sf-tp-color-text-muted);margin-block-end:var(--sf-tp-space-5)}
.sf-theme-trade-pro .sf-tp-article-body table{width:100%;border-collapse:collapse;font-size:var(--sf-tp-font-size-sm);margin-block:var(--sf-tp-space-6)}
.sf-theme-trade-pro .sf-tp-article-body th,.sf-theme-trade-pro .sf-tp-article-body td{border:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-default);padding:var(--sf-tp-space-3) var(--sf-tp-space-4);text-align:start;vertical-align:middle}
.sf-theme-trade-pro .sf-tp-article-body tbody tr:nth-child(even) td{background:var(--sf-tp-color-neutral-50)}
/* 分隔线 + 作者卡（cms article-foot：首字母头像 + 团队名 + 简介） */
.sf-theme-trade-pro .sf-tp-article-divider{margin-block:var(--sf-tp-space-8);border-block-end:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle)}
.sf-theme-trade-pro .sf-tp-article-author{display:flex;align-items:center;gap:var(--sf-tp-space-4)}
.sf-theme-trade-pro .sf-tp-article-avatar{width:var(--sf-tp-space-12);height:var(--sf-tp-space-12);border-radius:var(--sf-tp-radius-full);background:var(--sf-tp-color-brand-primary);color:var(--sf-tp-color-text-on-brand);display:grid;place-items:center;font-size:var(--sf-tp-font-size-xl);font-weight:var(--sf-tp-font-weight-bold);flex:0 0 auto}
.sf-theme-trade-pro .sf-tp-article-author strong{display:block;margin-block-end:var(--sf-tp-space-1)}
.sf-theme-trade-pro .sf-tp-article-author span{font-size:var(--sf-tp-font-size-sm);color:var(--sf-tp-color-text-muted)}
/* 下一篇导航（cms next-story：灰底卡，悬浮转 brand-soft） */
.sf-theme-trade-pro .sf-tp-next-story{display:flex;flex-direction:column;gap:var(--sf-tp-space-2);margin-block-start:var(--sf-tp-space-8);padding:var(--sf-tp-space-5);background:var(--sf-tp-color-surface-muted);border-radius:var(--sf-tp-card-border-radius);transition:background-color var(--sf-tp-duration-fast) var(--sf-tp-easing-standard)}
.sf-theme-trade-pro .sf-tp-next-story:hover{background:var(--sf-tp-color-surface-brand-soft)}
.sf-theme-trade-pro .sf-tp-next-story-label{font-size:var(--sf-tp-font-size-xs);text-transform:uppercase;letter-spacing:var(--sf-tp-letter-spacing-wide);color:var(--sf-tp-color-text-muted);font-weight:var(--sf-tp-font-weight-semibold)}
.sf-theme-trade-pro .sf-tp-next-story-title{font-size:var(--sf-tp-font-size-md);font-weight:var(--sf-tp-font-weight-semibold);color:var(--sf-tp-color-text-primary);display:inline-flex;align-items:center;gap:var(--sf-tp-space-2)}
/* 相关阅读带（cms .side）：More News 盒占宽列 + 深色 CTA 300px + 返回整行 */
.sf-theme-trade-pro .sf-tp-article-side{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:calc(var(--sf-tp-space-8) + var(--sf-tp-space-2));align-items:start}
.sf-theme-trade-pro .sf-tp-article-side>.sf-tp-article-back{grid-column:1/-1}
.sf-theme-trade-pro .sf-tp-article-side-box{background:var(--sf-tp-color-surface-default);border:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle);border-radius:var(--sf-tp-card-border-radius);padding:var(--sf-tp-space-5)}
.sf-theme-trade-pro .sf-tp-article-side-box h3{font-size:var(--sf-tp-font-size-sm);text-transform:uppercase;letter-spacing:var(--sf-tp-letter-spacing-wide);color:var(--sf-tp-color-text-muted);margin-block-end:var(--sf-tp-space-4)}
.sf-theme-trade-pro .sf-tp-article-side-item{display:grid;grid-template-columns:120px 1fr;gap:var(--sf-tp-space-3);padding-block:var(--sf-tp-space-3);border-block-end:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle)}
.sf-theme-trade-pro .sf-tp-article-side-item:last-child{border-block-end:0;padding-block-end:0}
/* 媒体复用 sf-tp-card-media（4:3 + 裁剪 + 无图占位），补行内块与圆角 */
.sf-theme-trade-pro .sf-tp-article-side-media{display:block;border-radius:var(--sf-tp-radius-xs)}
.sf-theme-trade-pro .sf-tp-article-side-tag{display:block;font-size:var(--sf-tp-font-size-xs);color:var(--sf-tp-color-text-link);font-weight:var(--sf-tp-font-weight-semibold);margin-block-end:var(--sf-tp-space-1)}
.sf-theme-trade-pro .sf-tp-article-side-title{display:block;font-size:var(--sf-tp-font-size-sm);font-weight:var(--sf-tp-font-weight-semibold);color:var(--sf-tp-color-text-primary);line-height:var(--sf-tp-line-height-snug)}
.sf-theme-trade-pro .sf-tp-article-side-item:hover .sf-tp-article-side-title{color:var(--sf-tp-color-text-brand)}
.sf-theme-trade-pro .sf-tp-article-side-cta{background:var(--sf-tp-color-surface-inverse);border-radius:var(--sf-tp-card-border-radius);padding:var(--sf-tp-space-5);display:grid;gap:var(--sf-tp-space-3);color:var(--sf-tp-color-text-inverse)}
.sf-theme-trade-pro .sf-tp-article-side-cta .eyebrow{color:var(--sf-tp-color-text-inverse-muted)}
.sf-theme-trade-pro .sf-tp-article-side-cta h3{font-size:var(--sf-tp-font-size-md);color:var(--sf-tp-color-text-inverse)}
/* 深底上的按钮换白底品牌字（沿用应用带按钮反色方案） */
.sf-theme-trade-pro .sf-tp-article-side-cta .sf-tp-btn{justify-self:start;background:var(--sf-tp-color-surface-default);border-color:var(--sf-tp-color-surface-default);color:var(--sf-tp-color-text-brand)}
.sf-theme-trade-pro .sf-tp-article-back{font-size:var(--sf-tp-font-size-sm);color:var(--sf-tp-color-text-link);font-weight:var(--sf-tp-font-weight-semibold);display:inline-flex;align-items:center;gap:var(--sf-tp-space-2)}
.sf-theme-trade-pro .sf-tp-article-back:hover{color:var(--sf-tp-color-text-link-hover)}
/* ── article 响应式（cms 断点 1023/620 映射到平台 900/620；折叠规则收在
本任务媒体块内——10a/10c 的既有折叠块在本段之前，覆盖不到 10d 类名，
10d 也不依赖其折叠（10c 教训：同特异性按源顺序取胜））── */
@media (max-width: 900px){
.sf-theme-trade-pro .sf-tp-article-breadcrumb{max-width:100%}
.sf-theme-trade-pro .sf-tp-article-side{grid-template-columns:1fr}
}
@media (max-width: 620px){
/* 本任务无媒体的 h1 复位（0,3,1）会压过 10c 的 620 hero 紧凑字号
（0,2,1）——同选择器补回移动端字号（cms 620：28px） */
.sf-theme-trade-pro .sf-tp-article-hero .sf-tp-page-hero-copy h1{font-size:28px;line-height:1.05}
.sf-theme-trade-pro .sf-tp-article-meta{font-size:var(--sf-tp-font-size-xs)}
.sf-theme-trade-pro .sf-tp-article-body .pro-rich p{font-size:13px}
.sf-theme-trade-pro .sf-tp-article-author span{font-size:var(--sf-tp-font-size-xs)}
.sf-theme-trade-pro .sf-tp-next-story{padding:var(--sf-tp-space-4)}
.sf-theme-trade-pro .sf-tp-article-side-box{padding:16px}
.sf-theme-trade-pro .sf-tp-article-side-item{grid-template-columns:72px 1fr}
.sf-theme-trade-pro .sf-tp-article-side-cta{padding:16px}
}
/* ── Task 10e：about 关于页（about.astro 移植）──
源 src/pages/[locale]/about.astro：PageHero → 公司介绍两栏（实景图 +
悬浮数据条）→ 富文本正文 → 优势网格 → 使命深色带（实景底图 + 玻璃
特性卡，cms dark-photo/.dark .feature）→ 厂区图集卡（CardGrid cols-4，
平台 gallery 驱动）→ 资质网格。共享组件复用 10a/10b/10c 移植成果：
sf-tp-two-col/copy/photo/stats（介绍两栏 = 首页关于两栏同构，cms 源码
本就同款）、sf-tp-feature-grid/card-grid/section-head（cms 同组件）、
sf-tp-page-hero/breadcrumb（10c 内页 hero）、sf-tp-article-body（10d
富文本排版层，about-body 与全站 rich-body 同构，markup 双挂类名）。
本块只补 about 专属形态：使命带底图叠层与玻璃卡、厂区图集卡。 */
/* 使命深色带：cms dark-photo = section--dark 渐变 + 实景图（object-position
center 55%）。叠层级序（同 page-hero）：图（z-1）→ ::before 渐变罩
（z-base，复刻 section--dark 渐变盖住图保证文字对比）→ .wrap（z-raised）。
无图时罩层叠在原渐变上，视觉与 .section--dark 纯渐变一致。 */
.sf-theme-trade-pro .sf-tp-about-mission{position:relative;overflow:hidden}
.sf-theme-trade-pro .sf-tp-about-mission-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;z-index:calc(var(--sf-tp-z-base) - 1)}
.sf-theme-trade-pro .sf-tp-about-mission::before{content:"";position:absolute;inset:0;z-index:var(--sf-tp-z-base);background:linear-gradient(90deg,color-mix(in srgb,var(--sf-tp-color-surface-inverse) 94%,transparent),color-mix(in srgb,var(--sf-tp-color-brand-primary) 60%,transparent))}
.sf-theme-trade-pro .sf-tp-about-mission .wrap{position:relative;z-index:var(--sf-tp-z-raised)}
/* 玻璃特性卡（cms .dark .feature）：半透明白 + 反色字。0,3,0 无条件压过
10a 的 .sf-tp-feature 底色（0,2，0），620 横排布局仍由 10a 折叠规则提供 */
.sf-theme-trade-pro .sf-tp-about-mission .sf-tp-feature{background:color-mix(in srgb,var(--sf-tp-color-neutral-0) 10%,transparent);border-color:var(--sf-tp-color-border-inverse)}
.sf-theme-trade-pro .sf-tp-about-mission .sf-tp-feature h3{color:var(--sf-tp-color-text-inverse)}
.sf-theme-trade-pro .sf-tp-about-mission .sf-tp-feature p{color:color-mix(in srgb,var(--sf-tp-color-text-inverse) 82%,transparent)}
.sf-theme-trade-pro .sf-tp-about-mission .sf-tp-intro{color:color-mix(in srgb,var(--sf-tp-color-text-inverse) 82%,transparent)}
/* 厂区图集卡（cms CardGrid 卡片形态，数据驱动无悬停语义故不复用 .sf-tp-card
的链接上抬）：媒体复用 sf-tp-card-media（4:3 + 裁剪），编号 tag 补位
cms 卡片标题行 */
.sf-theme-trade-pro .sf-tp-about-facility{margin:0;background:var(--sf-tp-color-surface-default);border:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle);border-radius:var(--sf-tp-card-border-radius);overflow:hidden;box-shadow:var(--sf-tp-shadow-xs)}
.sf-theme-trade-pro .sf-tp-about-facility figcaption{padding:var(--sf-tp-space-3) var(--sf-tp-space-4)}
/* ── about 响应式（cms 断点 900/620；767 无 about 专属规则——内页 hero
的 767 竖版由 10c 既有块覆盖。介绍两栏/数据条/特性网格/图集栅格的折叠
全部由 10a 既有块提供（复用同一批类名）；10d 的 620 富文本字号经
sf-tp-article-body 双挂类名作用于本页正文。折叠规则收在本任务媒体块
内的原则只针对本任务新类名（10c 教训：同特异性按源顺序取胜）── */
@media (max-width: 900px){
.sf-theme-trade-pro .sf-tp-about-mission .sf-tp-intro{max-width:100%}
}
@media (max-width: 620px){
.sf-theme-trade-pro .sf-tp-about-mission h2{font-size:22px}
.sf-theme-trade-pro .sf-tp-about-mission .sf-tp-intro{font-size:11px}
.sf-theme-trade-pro .sf-tp-about-facility figcaption{padding:9px 10px}
.sf-theme-trade-pro .sf-tp-about-facility .sf-tp-tag{font-size:10px}
}
Reference in New Issue View Git Blame Copy Permalink