2026-10-23 09:23:30 +08:00
/* trade-pro pro.css — component layer.
Phase 2 shipped a skeleton tint layer; Phase 3 Task 10a prepends the ported
2026-10-28 11:42:51 +08:00
cms home components; Task 12a rebuilds the product detail components (sticky tabs / panels / rich-body tables / spec-table) to match the cms source. Sources
2026-10-23 10:17:31 +08:00
(scoped CSS + dist pixel baseline
D:/project/cms/runtimes/astro-site-runtime/dist/hesupipe/en/):
2026-10-23 09:23:30 +08:00
- src/pages/[locale]/index.astro (hero / trustbar / two-col about /
applications band / section-head / card / feature / cta-band)
2026-10-23 10:17:31 +08:00
- src/pages/[locale]/products/[slug].astro (product hero gallery /
2026-10-28 11:42:51 +08:00
summary / sticky tabs + panels / rich-body tables / spec table / quote grid)
2026-10-23 09:23:30 +08:00
- 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 ( 420 px , 60 vh , 640 px ); background : linear-gradient ( 115 deg , 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 ( 90 deg , 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 , 1 fr )}
. 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 : 1 fr 1.22 fr ; 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 ( 130 deg , 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 , 1 fr ); 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 -2 xl ); 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 , 1 fr )); 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 , 1 fr ))}
. 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 ( 90 deg , 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.95 fr 1.15 fr ; 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 ( 34 px , 3.6 vw , var ( -- sf - tp - font - size -4 xl )); margin-block-end : var ( -- sf - tp - space -4 )}
. sf-theme-trade-pro . sf-tp-applications-copy p { max-width : 510 px ; 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 : 1 fr 1 fr ; gap : calc ( var ( -- sf - tp - space -4 ) - var ( -- sf - tp - space -1 ))}
. sf-theme-trade-pro . sf-tp-app-tile { position : relative ; min-height : 150 px ; 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 ( 135 deg , 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 2 px 6 px 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 , 1 fr ); 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 ( 90 deg , 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 }
2026-10-29 13:49:08 +08:00
/* ── 产品详情(Task 12a, [slug].astro 精确对齐重做 10b; Task 15 选项卡改
锚点 Tab + 自定义区块/特性栅格):hero 画廊/标题 + sticky 锚点选项卡 +
rich-body 正文表格 + spec-table + detail-features + 询盘。
2026-10-28 11:42:51 +08:00
断点映射:cms 900 与 960(询盘堆叠)→ 900; cms 620 → 620。 ── */
2026-10-23 10:17:31 +08:00
. 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.08 fr 0.92 fr ; 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 120 px ; 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 }
2026-10-28 11:42:51 +08:00
/* 标题区:产品名用 cms h2 量级(2xl 非巨型;cms 为 h2,平台保留
全站单 h1 契约用 h1 标签),导语 + 管理字段行 + CTA 对(药丸圆角,cms .detail-actions) */
2026-10-23 10:17:31 +08:00
. sf-theme-trade-pro . sf-tp-product-title { font-size : var ( -- sf - tp - font - size -2 xl ); 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 )}
2026-10-28 11:42:51 +08:00
/* 选项卡导航(cms .product-tabs):muted 底 + 上下发丝线 + sticky 于页眉下 */
. sf-theme-trade-pro . sf-tp-product-tabs { border-block : var ( -- sf - tp - border - width - hairline ) solid var ( -- sf - tp - color - border - subtle ); background : var ( -- sf - tp - color - surface - muted ); position : sticky ; top : var ( -- sf - tp - space -16 ); z-index : var ( -- sf - tp - z - raised )}
/* Tab 单行横滚(数量多不换行);隐藏滚动条 + scroll-snap 贴合(cms .tabs-row) */
. sf-theme-trade-pro . sf-tp-tabs-row { display : flex ; gap : var ( -- sf - tp - space -6 ); overflow-x : auto ; scroll-behavior : smooth ; scrollbar-width : none ; scroll-snap-type : x proximity }
. sf-theme-trade-pro . sf-tp-tabs-row :: -webkit-scrollbar { display : none }
2026-10-29 13:49:08 +08:00
. sf-theme-trade-pro . sf-tp-tab { flex : 0 0 auto ; white-space : nowrap ; padding : var ( -- sf - tp - space -4 ) var ( -- sf - tp - space -1 ); color : var ( -- sf - tp - color - text - secondary ); font-weight : var ( -- sf - tp - font - weight - semibold ); font-size : var ( -- sf - tp - font - size - sm ); background : none ; border : none ; border-block-end : var ( -- sf - tp - border - width - strong ) solid transparent ; cursor : pointer ; scroll-snap-align : center ; text-decoration : none }
2026-10-28 11:42:51 +08:00
. sf-theme-trade-pro . sf-tp-tab . active , . sf-theme-trade-pro . sf-tp-tab : hover { color : var ( -- sf - tp - color - text - link ); border-block-end-color : var ( -- sf - tp - color - border - brand )}
2026-10-29 13:49:08 +08:00
. sf-theme-trade-pro . sf-tp-tab : focus-visible { outline : 2 px solid var ( -- sf - tp - color - border - brand ); outline-offset : -2 px }
/* 锚点选项卡(Task 15 重做 12a 面板切换):Tab 是页内锚点链接,区块全部平铺
渲染、panel-title 常显(无 JS 原生跳转也可读);JS 平滑滚动 + scrollspy
高亮当前 Tab( .sf-tp-tab.active)。区块锚点滚动让位 sticky 条见下方
.sf-tp-detail-section 的 scroll-margin-top。 */
2026-10-28 11:42:51 +08:00
/* 详情面板(cms .detail-section):区块距 + 锚点滚动让位 sticky 选项卡;
区块标题品牌色 3px 下划短线(cms .detail-section > .wrap > h2) */
. sf-theme-trade-pro . sf-tp-detail-section { padding-block : calc ( var ( -- sf - tp - space -10 ) + var ( -- sf - tp - space -1 )); scroll-margin-top : calc ( var ( -- sf - tp - space -16 ) + var ( -- sf - tp - space -16 ))}
. sf-theme-trade-pro . sf-tp-detail-section--compact { padding-block : var ( -- sf - tp - space -5 ) calc ( var ( -- sf - tp - space -10 ) + var ( -- sf - tp - space -1 ))}
. sf-theme-trade-pro . sf-tp-detail-section > . wrap > h2 { 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 )}
/* 正文 rich-body( cms .detail-overview--rich 单列通栏 + 老编辑器表格完整规则
照搬):解除内联固定宽高恢复 table 布局铺满表宽;单元格 magic-* div 净空;
发丝框 + 斑马纹。WP 迁移规格表就在正文里——不拆表,整体作 Product
Details 面板渲染 */
. sf-theme-trade-pro . sf-tp-product-body { color : var ( -- sf - tp - color - text - secondary ); line-height : var ( -- sf - tp - line - height - relaxed )}
. sf-theme-trade-pro . sf-tp-product-body :: after { content : "" ; display : table ; clear : both }
. sf-theme-trade-pro . sf-tp-product-body table { display : table ; width : 100 % !important ; height : auto !important ; 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 div , . sf-theme-trade-pro . sf-tp-product-body td div { margin : 0 ; padding : 0 ; border : none ; background : none }
. 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 ; white-space : normal ; word-break : break-word }
2026-10-23 10:17:31 +08:00
. sf-theme-trade-pro . sf-tp-product-body tbody tr : nth-child ( even ) td { background : var ( -- sf - tp - color - neutral -50 )}
2026-10-28 11:42:51 +08:00
/* 参数表(cms .spec-table):键列灰底 semibold、每行两对键值;
table-scroll 横滚容器(宽表不溢出容器) */
2026-10-23 10:17:31 +08:00
. 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 )}
2026-10-28 11:42:51 +08:00
. 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 : calc ( var ( -- sf - tp - space -4 ) - var ( -- sf - tp - space -1 )) 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 )}
2026-10-29 13:49:08 +08:00
/* 特性栅格(cms .detail-feature-row, fields.features 数据驱动):品牌色星标 +
标题/描述两行卡;auto-fit 自适应条目数(cms 固定 4 列,数据条目不定) */
. sf-theme-trade-pro . sf-tp-detail-features { display : grid ; grid-template-columns : repeat ( auto - fit , minmax ( 220 px , 1 fr )); gap : var ( -- sf - tp - space -3 ) var ( -- sf - tp - space -6 )}
. sf-theme-trade-pro . sf-tp-detail-feature { display : grid ; grid-template-columns : auto 1 fr ; gap : var ( -- sf - tp - space -3 ); align-items : start ; padding-block : var ( -- sf - tp - space -2 )}
. sf-theme-trade-pro . sf-tp-detail-feature > span { color : var ( -- sf - tp - color - text - brand ); font-size : var ( -- sf - tp - font - size - xl ); line-height : var ( -- sf - tp - line - height - tight )}
. sf-theme-trade-pro . sf-tp-detail-feature h3 { font-size : var ( -- sf - tp - font - size - md ); margin-block-end : var ( -- sf - tp - space -1 )}
. sf-theme-trade-pro . sf-tp-detail-feature p { margin : 0 ; color : var ( -- sf - tp - color - text - muted ); font-size : var ( -- sf - tp - font - size - sm )}
2026-10-23 10:17:31 +08:00
/* 询盘板块(cms quote-grid 同构):左联系信息 + 右表单卡 */
. sf-theme-trade-pro . sf-tp-quote-grid { display : grid ; grid-template-columns : 0.85 fr 1.15 fr ; 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 : 110 px }
. 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 }
2026-10-28 11:42:51 +08:00
/* ── 产品详情响应式(cms 断点映射:900 ← cms 900 栅格堆叠 + 960 询盘堆叠;
620 ← cms 620 紧凑。产品规则收口在本块,不进下方共享响应式块)── */
@ media ( max-width : 900px ) {
. sf-theme-trade-pro . sf-tp-product-grid { grid-template-columns : 1 fr ; gap : var ( -- sf - tp - space -8 )}
. sf-theme-trade-pro . sf-tp-quote-grid { grid-template-columns : 1 fr ; gap : var ( -- sf - tp - space -8 )}
}
@ media ( max-width : 620px ) {
. sf-theme-trade-pro . sf-tp-product-hero { padding-block : 14 px 21 px }
. sf-theme-trade-pro . sf-tp-breadcrumb { margin-block-end : 8 px ; font-size : 10 px }
. sf-theme-trade-pro . sf-tp-product-grid { gap : 14 px }
. sf-theme-trade-pro . sf-tp-product-media { aspect-ratio : 16 / 9 }
. sf-theme-trade-pro . sf-tp-product-thumbs { gap : 8 px ; margin-block-start : 7 px }
. sf-theme-trade-pro . sf-tp-product-thumb { flex-basis : 86 px ; aspect-ratio : 16 / 9 }
. sf-theme-trade-pro . sf-tp-product-title { font-size : 18 px }
. sf-theme-trade-pro . sf-tp-product-lead { font-size : 11 px ; line-height : 1.35 }
. sf-theme-trade-pro . sf-tp-product-actions { display : grid ; grid-template-columns : 1 fr 1 fr ; gap : 8 px }
. sf-theme-trade-pro . sf-tp-product-actions . sf-tp-btn { min-height : 37 px ; font-size : 11 px }
/* 选项卡:静态化 + 行内滚动(cms 620: position:static + wrap max-content + tab 最小宽) */
. sf-theme-trade-pro . sf-tp-product-tabs { overflow-x : auto ; position : static }
. sf-theme-trade-pro . sf-tp-tabs-row { width : max-content }
. sf-theme-trade-pro . sf-tp-tab { min-width : 145 px }
/* 参数表横向滚动(cms 620: min-width 720px) */
. sf-theme-trade-pro . sf-tp-spec-table { min-width : 720 px }
. sf-theme-trade-pro . sf-tp-quote-list { gap : 12 px ; margin-block-start : 16 px }
. sf-theme-trade-pro . sf-tp-quote-form { padding : 16 px }
}
2026-10-23 09:23:30 +08:00
/* ── 响应式(断点随 cms 设计稿:900 栅格堆叠 / 767 hero 竖版 / 620 紧凑)── */
@ media ( max-width : 900px ) {
. sf-theme-trade-pro . sf-tp-applications-grid { grid-template-columns : 1 fr ; gap : calc ( var ( -- sf - tp - space -8 ) + var ( -- sf - tp - space -1 ))}
. sf-theme-trade-pro . sf-tp-two-col { grid-template-columns : 1 fr }
. sf-theme-trade-pro . sf-tp-card-grid , . sf-theme-trade-pro . sf-tp-card-grid--news { grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr ))}
. sf-theme-trade-pro . sf-tp-feature-grid , . sf-theme-trade-pro . sf-tp-trust-grid { grid-template-columns : 1 fr 1 fr }
. 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 : 520 px }
. 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 : 320 px }
. sf-theme-trade-pro . sf-tp-hero-copy { max-width : 57 % }
. sf-theme-trade-pro . sf-tp-hero-copy . sf-tp-lead { font-size : 11 px ; line-height : 1.35 ; margin-block-end : 12 px }
/* 信任条:浮动圆角卡片 2×2(图标左、文字右) */
. sf-theme-trade-pro . sf-tp-trustbar { margin-block-start : -1 px ; padding-inline : 0 ; border-radius : 10 px ; box-shadow : var ( -- sf - tp - shadow - md ); overflow : hidden }
. sf-theme-trade-pro . sf-tp-trust-grid { grid-template-columns : 1 fr 1 fr }
. sf-theme-trade-pro . sf-tp-trust-item { min-height : 72 px ; padding : 11 px 7 px ; text-align : left ; display : grid ; grid-template-columns : 45 px 1 fr ; align-content : center ; border-inline-end : 1 px solid var ( -- sf - tp - color - border - subtle ); border-block-end : 1 px 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 : 20 px }
. sf-theme-trade-pro . sf-tp-trust-item strong { font-size : 10 px }
. sf-theme-trade-pro . sf-tp-trust-item span { font-size : 9 px }
/* 关于区:紧凑双栏 + 数据 2×2 */
. sf-theme-trade-pro . sf-tp-two-col { grid-template-columns : 1 fr 1.08 fr ; gap : 13 px ; align-items : start }
. sf-theme-trade-pro . sf-tp-copy p { font-size : 11 px ; line-height : 1.35 ; margin-block-end : 10 px }
. sf-theme-trade-pro . sf-tp-photo { min-height : 162 px }
. sf-theme-trade-pro . sf-tp-stats { grid-template-columns : repeat ( 2 , 1 fr ); margin-block-start : -1 px }
. sf-theme-trade-pro . sf-tp-stat { padding : 9 px 3 px }
. sf-theme-trade-pro . sf-tp-stat strong { font-size : 19 px }
. sf-theme-trade-pro . sf-tp-stat span { font-size : 8 px }
/* 应用带:浅底代替深色,按钮隐藏 */
. sf-theme-trade-pro . sf-tp-applications { padding-block : 28 px ; color : var ( -- sf - tp - color - text - primary ); background : linear-gradient ( 135 deg , 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 : 22 px ; margin-block-end : 4 px }
. sf-theme-trade-pro . sf-tp-applications-copy p { color : var ( -- sf - tp - color - text - secondary ); font-size : 11 px ; margin-block-end : 9 px }
. 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 : 7 px }
. sf-theme-trade-pro . sf-tp-app-tile { min-height : 92 px }
. sf-theme-trade-pro . sf-tp-app-tile span { padding : 9 px ; font-size : 11 px }
/* 卡片 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 , 1 fr )); gap : 10 px }
. sf-theme-trade-pro . sf-tp-card-media { aspect-ratio : 16 / 9 }
. sf-theme-trade-pro . sf-tp-card-body { padding : 9 px 10 px 11 px }
. sf-theme-trade-pro . sf-tp-card h3 { font-size : 13 px ; margin-block-end : 2 px }
. sf-theme-trade-pro . sf-tp-card p { font-size : 11 px ; margin-block-end : 5 px }
. sf-theme-trade-pro . sf-tp-more { font-size : 10 px }
. 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 : 1 fr 1 fr ; gap : 8 px }
. sf-theme-trade-pro . sf-tp-feature { min-height : 92 px ; text-align : left ; padding : 12 px ; display : grid ; grid-template-columns : 44 px 1 fr ; align-content : center ; column-gap : 7 px }
. sf-theme-trade-pro . sf-tp-feature . icon-circle { grid-row : 1 / 3 ; align-self : center ; margin : 0 ; font-size : 20 px }
. sf-theme-trade-pro . sf-tp-feature h3 { font-size : 12 px ; margin : 0 0 3 px }
. sf-theme-trade-pro . sf-tp-feature p { font-size : 10 px ; line-height : 1.3 }
. sf-theme-trade-pro . sf-tp-section-head { display : block }
/* CTA:纵向堆叠 */
. sf-theme-trade-pro . sf-tp-cta { padding-block : 28 px }
. sf-theme-trade-pro . sf-tp-cta-inner { display : block }
. sf-theme-trade-pro . sf-tp-cta h2 { font-size : 22 px }
. sf-theme-trade-pro . sf-tp-cta p { font-size : 11 px }
. sf-theme-trade-pro . sf-tp-cta . sf-tp-btn { margin-block-start : 12 px }
2026-10-23 10:17:31 +08:00
/* 产品详情 620 紧凑(cms 移动端设计稿):面包屑收紧、缩略图缩格、
CTA 双列铺满、表单卡与参数表留白降档 */
. sf-theme-trade-pro . sf-tp-breadcrumb { margin-block-end : 8 px ; font-size : 10 px }
2026-10-23 09:23:30 +08:00
}
/* ── Phase 2 skeleton tint layer( chrome 着色,供其余页面与 pro-base 骨架)── */
2026-10-22 18:19:30 +08:00
. sf-theme-trade-pro . pro-wrap { max-width : 1200 px ; margin : 0 auto ; padding : 0 20 px }
. sf-theme-trade-pro . pro-header { background : #fff ; border-bottom : 3 px solid var ( -- sf - tp - primary , #0b3d91 )}
. sf-theme-trade-pro . pro-logo-name small { color : var ( -- sf - tp - primary , #0b3d91 ); letter-spacing : .18 em }
. 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 : 1 px 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 : 1 px solid #dfe7f2 ; border-radius : var ( -- sf - tp - radius , 8 px ); background : #fff }
. sf-theme-trade-pro . pro-category-tiles a span { color : var ( -- sf - tp - accent , #f5a623 )}
. sf-theme-trade-pro . pro-card { border : 1 px solid #dfe7f2 ; border-radius : var ( -- sf - tp - radius , 8 px ); 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 : 1 px solid #24344c }
. sf-theme-trade-pro . pro-filter-panel { border : 1 px solid #dfe7f2 ; border-radius : var ( -- sf - tp - radius , 8 px )}
. sf-theme-trade-pro . pro-404 strong { color : var ( -- sf - tp - primary , #0b3d91 )}
2026-10-23 11:00:13 +08:00
/* ── 无图占位重设计(用户反馈 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 ( 135 deg , 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 : 28 px ; font-weight : 800 ; letter-spacing : .04 em }
. sf-theme-trade-pro . pro-art . pro-art-label { font-size : 10 px ; letter-spacing : .18 em ; text-transform : uppercase ; color : var ( -- sf - tp - color - text - muted )}
2026-10-23 11:43:52 +08:00
/* 询盘蜜罐:隐藏但不移出 DOM( pro-base 的 .pro-inquiry 作用域规则不覆盖新表单容器) */
. sf-theme-trade-pro . pro-honeypot { position : absolute ; left : -9999 px ; width : 1 px ; height : 1 px ; opacity : 0 ; pointer-events : none }
2026-10-23 14:06:15 +08:00
/* ── 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 ( 115 deg , 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 ( 90 deg , 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 : 260 px 1 fr ; gap : var ( -- sf - tp - space -8 )}
. sf-theme-trade-pro . sf-tp-catalogue-single { display : block }
2026-10-23 14:26:34 +08:00
. 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 )}
2026-10-23 14:06:15 +08:00
. 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 , 1 fr ))}
. 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 : 1 fr 310 px ; 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 : 290 px 1 fr ; 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 -2 xl ); 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 : 36 px ; height : 36 px ; padding-inline : 6 px ; 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 : 2 px }
/* 空列表友好空态(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 : 1 fr }
. sf-theme-trade-pro . sf-tp-side-panel { position : static ; display : grid ; grid-template-columns : repeat ( 2 , 1 fr ); gap : 0 var ( -- sf - tp - space -4 )}
2026-10-23 14:26:34 +08:00
/* listing 栅格折叠规则须落在上方 3 列声明之后(同特异性按源顺序取胜),
既有 10a 的 900px 折叠块在本段之前,覆盖不到 --listing 修饰符 */
. sf-theme-trade-pro . sf-tp-card-grid--listing { grid-template-columns : repeat ( 2 , minmax ( 0 , 1 fr ))}
2026-10-23 14:06:15 +08:00
. sf-theme-trade-pro . sf-tp-news-layout { grid-template-columns : 1 fr }
. sf-theme-trade-pro . sf-tp-news-row { grid-template-columns : 240 px 1 fr }
}
@ 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 : 28 px ; line-height : 1.05 ; margin-block-end : 8 px }
. sf-theme-trade-pro . sf-tp-page-hero-lead { font-size : 11 px ; line-height : 1.35 ; margin-block-end : 12 px }
. sf-theme-trade-pro . sf-tp-side-panel { display : block }
2026-10-23 14:26:34 +08:00
. sf-theme-trade-pro . sf-tp-card-grid--listing { gap : 10 px }
2026-10-23 14:06:15 +08:00
. sf-theme-trade-pro . sf-tp-news-row { grid-template-columns : 1 fr }
. 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 : 32 px ; height : 32 px }
}
2026-10-23 15:04:07 +08:00
/* ── 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 : 3 px 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 , 1 fr ) 300 px ; 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 : 120 px 1 fr ; 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 : 1 fr }
}
@ media ( max-width : 620px ) {
2026-10-23 15:38:23 +08:00
/* 本任务无媒体的 h1 复位(0,3,1)会压过 10c 的 620 hero 紧凑字号
(0,2,1)——同选择器补回移动端字号(cms 620:28px) */
2026-10-23 15:04:07 +08:00
. sf-theme-trade-pro . sf-tp-article-hero . sf-tp-page-hero-copy h1 { font-size : 28 px ; 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 : 13 px }
. 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 : 16 px }
. sf-theme-trade-pro . sf-tp-article-side-item { grid-template-columns : 72 px 1 fr }
. sf-theme-trade-pro . sf-tp-article-side-cta { padding : 16 px }
}
2026-10-23 15:58:30 +08:00
/* ── 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 ( 90 deg , 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 : 22 px }
. sf-theme-trade-pro . sf-tp-about-mission . sf-tp-intro { font-size : 11 px }
. sf-theme-trade-pro . sf-tp-about-facility figcaption { padding : 9 px 10 px }
. sf-theme-trade-pro . sf-tp-about-facility . sf-tp-tag { font-size : 10 px }
}
2026-10-23 16:34:28 +08:00
/* ── Task 10f: contact 联系页(contact.astro + LeadForm.astro 移植)──
源 src/pages/[locale]/contact.astro:联系信息/表单双栏(0.85fr 信息列 +
1.25fr 灰底 form-card) + LeadForm(引导语 + 纵向字段栅格 + 提交按钮)。
共享组件复用:sf-tp-page-hero/breadcrumb( 10c 内页 hero)、
sf-tp-article-body( 10d 富文本排版层双挂);表单卡与 10b 询盘表单卡
同构(cms 同一 LeadForm 组件),字段样式走 theme.css 元素基线,
本块只补 contact 专属布局(双栏比、信息列表、图标实底圆)。 */
. sf-theme-trade-pro . sf-tp-contact-grid { display : grid ; grid-template-columns : 0.85 fr 1.25 fr ; gap : calc ( var ( -- sf - tp - space -16 ) + var ( -- sf - tp - space -6 )); align-items : start }
. sf-theme-trade-pro . sf-tp-contact-info > p { color : var ( -- sf - tp - color - text - muted )}
/* 信息列表(cms contact-list):图标圆 + 标题/值两列行 */
. sf-theme-trade-pro . sf-tp-contact-list { display : grid ; gap : var ( -- sf - tp - space -6 ); margin-block-start : var ( -- sf - tp - space -8 )}
. sf-theme-trade-pro . sf-tp-contact-item { display : grid ; grid-template-columns : var ( -- sf - tp - space -12 ) 1 fr ; gap : var ( -- sf - tp - space -4 ); align-items : center }
/* cms icon-solid:品牌实底圆覆写默认 brand-soft 形态(居中 auto 边距归零) */
. sf-theme-trade-pro . sf-tp-contact-item . icon-circle { margin : 0 ; background : var ( -- sf - tp - color - brand - primary ); color : var ( -- sf - tp - color - text - on - brand )}
. sf-theme-trade-pro . sf-tp-contact-item strong { display : block ; margin-block-end : var ( -- sf - tp - space -1 )}
. sf-theme-trade-pro . sf-tp-contact-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-contact-item a { color : inherit ; word-break : break-all }
. sf-theme-trade-pro . sf-tp-contact-item a : hover { color : var ( -- sf - tp - color - text - link )}
/* 表单卡(cms form-card + lead-text):灰底圆角;两形态共用(外部表单/
无表单引导卡),卡内引导语 muted( cms .lead-text 间距) */
. sf-theme-trade-pro . sf-tp-contact-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-contact-form > p { color : var ( -- sf - tp - color - text - muted ); margin-block-end : var ( -- sf - tp - space -6 )}
. sf-theme-trade-pro . sf-tp-contact-form form { display : grid ; gap : var ( -- sf - tp - space -4 )}
. sf-theme-trade-pro . sf-tp-contact-form . sf-tp-btn { justify-self : start }
. sf-theme-trade-pro . sf-tp-contact-form textarea { min-height : 110 px }
. sf-theme-trade-pro . sf-tp-contact-note { font-size : var ( -- sf - tp - font - size - xs ); color : var ( -- sf - tp - color - text - muted ); margin : 0 }
/* ── contact 响应式(cms 断点 900/620; 767 无 contact 专属规则——内页
hero 的 767 竖版由 10c 既有块覆盖。折叠规则收在本任务媒体块内
(10c 教训:同特异性按源顺序取胜)── */
@ media ( max-width : 900px ) {
. sf-theme-trade-pro . sf-tp-contact-grid { grid-template-columns : 1 fr }
}
@ media ( max-width : 620px ) {
. sf-theme-trade-pro . sf-tp-contact-list { gap : 16 px }
. sf-theme-trade-pro . sf-tp-contact-item { grid-template-columns : 40 px 1 fr ; gap : 10 px }
. sf-theme-trade-pro . sf-tp-contact-form { padding : 20 px }
}
2026-10-23 16:59:52 +08:00
/* ── Task 10g: case 案例详情(projects/[slug].astro 移植)──
源 src/pages/[locale]/projects/[slug].astro: detail-grid 1.2fr/0.8fr 双栏
(文案列概览块 + 正文;侧列 sticky:主图 + 3 列相册瓦片 + Results 成果卡)。
共享组件复用:sf-tp-page-hero/breadcrumb( 10c 内页 hero)、sf-tp-photo/
photo-plain( 10a 实景框)、sf-tp-section-head/card-grid/card( 10a 卡片系)、
sf-tp-article-body 排版层(10d 双挂)。本块只补 case 专属形态:● location
行、相册瓦片、成果卡与 ✓ 圆徽。 */
. sf-theme-trade-pro . sf-tp-case-grid { display : grid ; grid-template-columns : 1.2 fr 0.8 fr ; gap : calc ( var ( -- sf - tp - space -12 ) + var ( -- sf - tp - space -4 )); align-items : start }
/* 概览块:眉题 + h2 + ● location 行(cms .location:品牌色半粗) */
. sf-theme-trade-pro . sf-tp-case-overview h2 { margin-block : var ( -- sf - tp - space -2 ) var ( -- sf - tp - space -4 )}
. sf-theme-trade-pro . sf-tp-case-location { display : flex ; align-items : baseline ; gap : var ( -- sf - tp - space -2 ); color : var ( -- sf - tp - color - text - brand ); font-weight : var ( -- sf - tp - font - weight - semibold ); margin-block-end : var ( -- sf - tp - space -3 ); line-height : var ( -- sf - tp - line - height - normal )}
. sf-theme-trade-pro . sf-tp-case-location span { font-size : var ( -- sf - tp - font - size - xs )}
/* 正文块与概览块分组(cms .detail-block 发丝线分隔的对应物) */
. sf-theme-trade-pro . sf-tp-case-body { margin-block-start : var ( -- sf - tp - space -8 ); padding-block-start : var ( -- sf - tp - space -6 ); border-block-start : var ( -- sf - tp - border - width - hairline ) solid var ( -- sf - tp - color - border - subtle )}
/* 侧列 sticky( cms .detail-side: top = space-16 + space-4) */
. sf-theme-trade-pro . sf-tp-case-side { display : grid ; gap : var ( -- sf - tp - space -6 ); position : sticky ; top : calc ( var ( -- sf - tp - space -16 ) + var ( -- sf - tp - space -4 ))}
/* 相册:3 列瓦片(cms .case-gallery),悬浮轻缩放 */
. sf-theme-trade-pro . sf-tp-case-gallery { display : grid ; grid-template-columns : repeat ( 3 , 1 fr ); gap : var ( -- sf - tp - space -2 )}
. sf-theme-trade-pro . sf-tp-case-gallery img { width : 100 % ; aspect-ratio : var ( -- sf - tp - ratio - landscape ); object-fit : cover ; border-radius : var ( -- sf - tp - radius - sm ); border : var ( -- sf - tp - border - width - hairline ) solid var ( -- sf - tp - color - border - subtle ); transition : transform var ( -- sf - tp - duration - fast ) var ( -- sf - tp - easing - standard )}
. sf-theme-trade-pro . sf-tp-case-gallery img : hover { transform : scale ( 1.03 )}
/* 成果卡(cms .results-card):accent 顶边 + ✓ 圆徽要点列表 */
. sf-theme-trade-pro . sf-tp-case-results { background : var ( -- sf - tp - color - surface - default ); border : var ( -- sf - tp - border - width - hairline ) solid var ( -- sf - tp - color - border - subtle ); border-block-start : var ( -- sf - tp - border - width - strong ) solid var ( -- sf - tp - color - brand - accent ); border-radius : var ( -- sf - tp - card - border - radius ); padding : var ( -- sf - tp - card - padding - md )}
. sf-theme-trade-pro . sf-tp-case-results h3 { font-size : var ( -- sf - tp - font - size - lg ); margin-block-end : var ( -- sf - tp - space -3 )}
. sf-theme-trade-pro . sf-tp-case-results ul { list-style : none ; margin : 0 ; padding : 0 ; display : grid ; gap : var ( -- sf - tp - space -2 )}
. sf-theme-trade-pro . sf-tp-case-results li { 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 - secondary )}
. sf-theme-trade-pro . sf-tp-case-check { display : inline-flex ; align-items : center ; justify-content : center ; width : calc ( var ( -- sf - tp - space -4 ) + var ( -- sf - tp - space -1 )); height : calc ( var ( -- sf - tp - space -4 ) + var ( -- sf - tp - space -1 )); color : var ( -- sf - tp - color - text - on - brand ); background : var ( -- sf - tp - color - brand - primary ); border-radius : var ( -- sf - tp - radius - full ); flex : 0 0 auto }
/* ── case 响应式(cms 断点 900 单列堆叠 + 侧列取消 sticky;620 紧凑。
内页 hero 的 767/620 竖版由 10c 既有块覆盖;卡片栅格折叠由 10a 既有块
提供(复用 sf-tp-card-grid 类名);正文 620 字号由 10d 的
sf-tp-article-body 双挂规则提供。折叠规则收在本任务媒体块内
(10c 教训:同特异性按源顺序取胜)── */
@ media ( max-width : 900px ) {
. sf-theme-trade-pro . sf-tp-case-grid { grid-template-columns : 1 fr ; gap : var ( -- sf - tp - space -8 )}
. sf-theme-trade-pro . sf-tp-case-side { position : static }
}
@ media ( max-width : 620px ) {
. sf-theme-trade-pro . sf-tp-case-results { padding : 16 px }
. sf-theme-trade-pro . sf-tp-case-results li { font-size : var ( -- sf - tp - font - size - xs )}
}
2026-10-23 17:25:21 +08:00
/* ── Task 10h: standard 标准内容页(applications.astro + support.astro 移植)──
源 src/pages/[locale]/applications.astro 与 support.astro(通用内容页,
像素基准 dist/hesupipe/en/{applications,support}/):两页共性形态 =
PageHero(眉题/h1/导语/页内锚点按钮 + 封面底图)→ 内容区。
本任务零新增样式规则——设计源同构事实:applications.astro 自身零 scoped
CSS( 100% 由 PageHero/SectionHead/CardGrid/FeatureGrid 共享组件构成),
support.astro 的 scoped CSS(锚点导航/doc 卡/FAQ 双栏)全绑 HESU 词典
数据,不移植(跨站即假数据)。本模板同样纯组合复用:
sf-tp-page-hero/bg/overlay/copy/lead( 10c 内页 hero,无封面时浅品牌
渐变兜底)、sf-tp-breadcrumb( 10b)、eyebrow/sf-tp-btn( theme.css
基线)、sf-tp-section-head( 10a)、sf-tp-article-body 排版层双挂
( 10d, sf-tp-standard-body 为结构与测试钩子类)。sf-tp-standard-hero/
-body-section 仅作模板定位钩子,无视觉规则;响应式(767/620 hero 竖版
与正文紧凑字号)全部由 10c/10d 既有媒体块经共用类名覆盖——无自有媒体块
即无级联顺序风险(10c 教训:同特异性按源顺序取胜)。 #}
2026-10-23 17:53:14 +08:00
/* ── Task 10j: cms 页眉/页脚 chrome 视觉还原 + 手机端抽屉导航 ──
源 src/components/Header.astro(玻璃拟态吸顶:brand-soft 88% + blur(10px)、
右对齐半粗导航 + 透明下划线悬停转品牌线、白卡下拉(hover/键盘聚焦展开)、
汉堡 + 右滑抽屉 + 遮罩)与 Footer.astro( surface-inverse 深底四栏栅格 +
h3 栏目标题 + 发丝线版权条),像素基准 dist/hesupipe/en/。
纯样式层重塑平台 chrome DOM( .pro-utility/.pro-header/.pro-head-inner/
.pro-navigation/.pro-nav-children/.pro-mega/.pro-footer 等),数据流与
pro.js 钩子全保留。机制复用说明:
- 抽屉 = 上游 V8.21.3 四主题统一机制(commercial.css 的 ≤1024px 样式段 +
pro.js 通用逻辑按 [data-pro-menu]/#pro-navigation 选择器寻钩子,与主题
无关);trade-pro 的 pro.html 本就输出同款类名结构,机制自动可用。
- 平台 drawer/tabs 样式段消费 --pro-* 变量且大量 !important 锁定(宽度/
定位/内边距/链接色等),本块以 .sf-theme-trade-pro 作用域的变量桥把
cms 令牌注入 --pro-*( body 级声明压过 pro-base 的 :root,继承取胜,
零 !important 对抗)——抽屉/底部 tabs/下拉卡的配色随桥整体品牌化。
- mobile_tabs 为模板驱动(pro.html 渲染块 + commercial.css 767px 样式 +
pro.js [data-mobile-open-menu] 开抽屉),10j 给 trade-pro 补上渲染块。
级联:本块 0,2,0+ 作用域规则晚于 pro-base/commercial(链接序 theme →
blocks → factory → pro-base → pro → commercial)与本文件 Phase 2 tint
层;对 commercial 中同特异性晚载规则(如 .pro-end-cta h2、
.pro-header-cta:hover)以更高特异性取胜,不用 !important。 */
/* 变量桥:平台 chrome(含 commercial 抽屉/底部 tabs 的 !important 锁定段)
全部经 --pro-* 消费颜色 → cms 令牌直通(含焦点环/激活 tab 色) */
. sf-theme-trade-pro { --pro-background : var ( -- sf - tp - color - surface - default ); --pro-surface : var ( -- sf - tp - color - surface - muted ); --pro-border : var ( -- sf - tp - color - border - subtle ); --pro-text : var ( -- sf - tp - color - text - primary ); --pro-muted : var ( -- sf - tp - color - text - muted ); --pro-accent : var ( -- sf - tp - color - brand - primary ); --pro-hero : var ( -- sf - tp - color - surface - inverse ); --pro-radius : var ( -- sf - tp - radius - sm )}
/* chrome 容器 = cms .wrap 几何(min(1440px,90vw),无内边距靠宽度收边);
页面内容模板已用 .wrap 同款(10a-10h),页眉/页脚自此与正文对齐。
620 的 mobile_container_padding 配置项被下方 620 块的 cms 几何覆盖
(等价意图:宽度收边),其余 site_design 选项(导航/公告/CTA/页脚/
mobile_tabs)不受影响 */
. sf-theme-trade-pro . pro-wrap { width : min ( 1440 px , 90 vw ); max-width : none ; padding : 0 ; margin-inline : auto }
/* mega 例外:面板收在页面容器内(cms 下拉卡语义,非全幅横幅) */
. sf-theme-trade-pro . pro-mega . pro-wrap { width : min ( 100 % , var ( -- sf - tp - container - page - max ))}
/* 公告条(chrome.header.announcement 数据位):cms 无对应物——按 cms 深色
版权条语汇收敛为藏青细条(宽字距小字) */
. sf-theme-trade-pro . pro-utility { background : var ( -- sf - tp - color - surface - inverse ); color : var ( -- sf - tp - color - text - inverse - muted ); font-size : var ( -- sf - tp - font - size - xs ); letter-spacing : var ( -- sf - tp - letter - spacing - wide )}
. sf-theme-trade-pro . pro-utility . pro-wrap { padding-block : var ( -- sf - tp - space -2 )}
/* 页眉(Header.astro .site-header):sticky 玻璃拟态,cms 无底边线。
body 的 overflow-x:hidden 会禁用后代 sticky(滚动容器劫持)——theme.css
的 body.sf-theme-trade-pro(0,1,1) 载于本文件之前,此处同特异性晚载以
clip 覆写(支持 clip 的浏览器内 sticky 生效,不支持则回落现状) */
body . sf-theme-trade-pro { overflow-x : hidden ; overflow-x : clip }
. sf-theme-trade-pro . pro-header { position : sticky ; top : 0 ; z-index : var ( -- sf - tp - z - sticky ); background : color-mix ( in srgb , var ( -- sf - tp - color - surface - brand - soft ) 88 % , transparent ); backdrop-filter : blur ( 10 px ); -webkit- backdrop-filter : blur ( 10 px ); border-block-end : 0 }
. sf-theme-trade-pro . pro-head-inner { min-height : var ( -- sf - tp - space -16 ); gap : var ( -- sf - tp - space -8 )}
/* Logo( cms .logo-img:高 44px 宽自适应;max-width 兜底防超宽图溢出) */
. sf-theme-trade-pro . pro-logo { min-width : 0 }
. sf-theme-trade-pro . pro-brand-logo { height : calc ( var ( -- sf - tp - space -10 ) + var ( -- sf - tp - space -1 )); width : auto ; max-width : min ( 30 vw , 220 px ); max-height : none ; object-fit : contain }
. sf-theme-trade-pro . pro-logo-name { font-size : var ( -- sf - tp - font - size - lg ); font-weight : var ( -- sf - tp - font - weight - semibold ); letter-spacing : var ( -- sf - tp - letter - spacing - tight )}
. sf-theme-trade-pro . pro-logo-name small { color : var ( -- sf - tp - color - text - muted )}
/* 导航(cms .nav-links):右对齐(pro-base margin-left:auto 保留)、半粗、
拉伸满高、透明下划线悬停转品牌色实线(cms active 态的平台化——静态
产物无当前页标记,悬停即反馈);搜索链接(show_search 数据位)并入导航
字级,pro-base 的 19px!important 需同强度覆写 */
. sf-theme-trade-pro . pro-navigation { gap : var ( -- sf - tp - space -8 ); align-self : stretch ; align-items : stretch }
. sf-theme-trade-pro . pro-navigation > a , . sf-theme-trade-pro . pro-navigation . pro-nav-group > a { display : flex ; align-items : center ; color : var ( -- sf - tp - color - text - primary ); font-size : var ( -- sf - tp - font - size - md ); font-weight : var ( -- sf - tp - font - weight - semibold ); border-block-end : var ( -- sf - tp - border - width - medium ) solid transparent ; transition : color var ( -- sf - tp - duration - fast ) var ( -- sf - tp - easing - standard ), border-color var ( -- sf - tp - duration - fast ) var ( -- sf - tp - easing - standard )}
. sf-theme-trade-pro . pro-navigation > a : hover , . sf-theme-trade-pro . pro-navigation . pro-nav-group > a : hover { color : var ( -- sf - tp - color - text - link ); border-block-end-color : var ( -- sf - tp - color - border - brand ); opacity : 1 }
. sf-theme-trade-pro . pro-search-link { font-size : var ( -- sf - tp - font - size - sm ) !important ; color : var ( -- sf - tp - color - text - secondary ); gap : var ( -- sf - tp - space -1 )}
/* caret( cms .caret ▾ 旋转 180°):disclose 钮去按钮化,随组悬停/展开旋转 */
. sf-theme-trade-pro . pro-navigation . pro-nav-disclose { padding : var ( -- sf - tp - space -2 ); color : var ( -- sf - tp - color - text - muted ); align-self : center }
. sf-theme-trade-pro . pro-navigation . pro-nav-disclose . sf-tp-icon { transition : transform var ( -- sf - tp - duration - fast ) var ( -- sf - tp - easing - standard )}
. sf-theme-trade-pro . pro-navigation . pro-nav-group : hover . pro-nav-disclose . sf-tp-icon , . sf-theme-trade-pro . pro-navigation . pro-nav-disclose [ aria-expanded = "true" ] . sf-tp-icon { transform : rotate ( 180 deg )}
/* CTA( chrome.header.show_cta 数据位):cms 按钮语汇(蓝底白字、radius 10px、
悬浮上抬 + shadow-sm);commercial 的 .pro-header-cta:hover(0,2,0) 晚载
——以 0,3,0 取胜 */
. sf-theme-trade-pro . pro-header-cta { min-height : calc ( var ( -- sf - tp - button - height - md ) - var ( -- sf - tp - space -1 )); padding-inline : var ( -- sf - tp - button - padding - x - sm ); font-size : var ( -- sf - tp - font - size - sm ); font-weight : var ( -- sf - tp - button - font - weight ); border-radius : var ( -- sf - tp - button - border - radius ); background : var ( -- sf - tp - color - surface - brand ); border : var ( -- sf - tp - border - width - hairline ) solid var ( -- sf - tp - color - border - brand ); color : var ( -- sf - tp - color - text - on - brand )}
. sf-theme-trade-pro . pro-header-cta : hover { transform : translateY ( calc ( -1 * var ( -- sf - tp - space -1 ))); background : var ( -- sf - tp - color - brand - primary - strong ); box-shadow : var ( -- sf - tp - shadow - sm ); color : var ( -- sf - tp - color - text - on - brand )}
/* 下拉卡(cms .sub-menu):白卡 + 发丝边 + radius-sm + shadow-md + 小字链接
brand-soft 悬停(叶子项缩进灰字) */
. sf-theme-trade-pro . pro-nav-children { min-width : 220 px ; padding : var ( -- sf - tp - space -2 ); display : grid ; gap : var ( -- sf - tp - space -1 ); 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 - radius - sm ); box-shadow : var ( -- sf - tp - shadow - md )}
. sf-theme-trade-pro . pro-nav-children a { padding : var ( -- sf - tp - space -2 ) var ( -- sf - tp - space -3 ); font-size : var ( -- sf - tp - font - size - sm ); font-weight : var ( -- sf - tp - font - weight - medium ); color : var ( -- sf - tp - color - text - secondary ); border-radius : var ( -- sf - tp - radius - xs ); white-space : normal }
. sf-theme-trade-pro . pro-nav-children a : hover { background : var ( -- sf - tp - color - surface - brand - soft ); color : var ( -- sf - tp - color - text - link )}
. sf-theme-trade-pro . pro-nav-children . pro-nav-leaf { padding-inline-start : var ( -- sf - tp - space -6 ); color : var ( -- sf - tp - color - text - muted )}
/* mega 面板(data-pro-mega 钩子保留;cms 无对应物——产品分类条按下拉卡
语汇收敛:去下划线列表改 brand-soft 悬停) */
. sf-theme-trade-pro . pro-mega { padding : var ( -- sf - tp - space -5 ); border : var ( -- sf - tp - border - width - hairline ) solid var ( -- sf - tp - color - border - subtle ); border-radius : 0 0 var ( -- sf - tp - radius - sm ) var ( -- sf - tp - radius - sm ); box-shadow : var ( -- sf - tp - shadow - md )}
. sf-theme-trade-pro . pro-mega > span { font-size : var ( -- sf - tp - font - size - xs ); font-weight : var ( -- sf - tp - font - weight - semibold ); letter-spacing : var ( -- sf - tp - letter - spacing - wide ); text-transform : uppercase ; color : var ( -- sf - tp - color - text - muted )}
. sf-theme-trade-pro . pro-mega > div a { font-size : var ( -- sf - tp - font - size - sm ); font-weight : var ( -- sf - tp - font - weight - medium ); color : var ( -- sf - tp - color - text - secondary ); border-block-end : 0 ; border-radius : var ( -- sf - tp - radius - xs ); transition : background-color var ( -- sf - tp - duration - fast ) var ( -- sf - tp - easing - standard ), color var ( -- sf - tp - duration - fast ) var ( -- sf - tp - easing - standard )}
. sf-theme-trade-pro . pro-mega > div a : hover { background : var ( -- sf - tp - color - surface - brand - soft ); color : var ( -- sf - tp - color - text - link )}
. sf-theme-trade-pro . pro-mega > div a . sf-tp-icon { color : var ( -- sf - tp - color - text - muted )}
/* 汉堡(cms .drawer-toggle 三线形态):44px 触达目标保留(commercial 锁定),
☰ 字形以三道 2px 线替代(font-size:0 隐字,纯视觉层;桌面本就 display:none) */
. sf-theme-trade-pro . pro-mobile-toggle { font-size : 0 ; color : var ( -- sf - tp - color - text - primary ); border : var ( -- sf - tp - border - width - hairline ) solid var ( -- sf - tp - color - border - default ); border-radius : var ( -- sf - tp - radius - xs ); background : linear-gradient ( var ( -- sf - tp - color - text - primary ), var ( -- sf - tp - color - text - primary )) center top 12 px / 18 px 2 px no-repeat , linear-gradient ( var ( -- sf - tp - color - text - primary ), var ( -- sf - tp - color - text - primary )) center / 18 px 2 px no-repeat , linear-gradient ( var ( -- sf - tp - color - text - primary ), var ( -- sf - tp - color - text - primary )) center bottom 12 px / 18 px 2 px no-repeat }
/* 页脚(Footer.astro .site-footer):surface-inverse 深底 + 栏目栅格(cms
1.7/0.8/0.9/1.25 四栏 → 平台三栏 DOM 映射为 1.7/0.9/1.25) + h3 栏目
标题(Quick Links 随 footer_nav 数据流)+ 发丝线版权条 */
. sf-theme-trade-pro . pro-footer { background : var ( -- sf - tp - color - surface - inverse ); color : var ( -- sf - tp - color - text - inverse - muted ); padding : calc ( var ( -- sf - tp - space -12 ) + var ( -- sf - tp - space -4 )) 0 var ( -- sf - tp - space -5 )}
. sf-theme-trade-pro . pro-footer-top { display : grid ; grid-template-columns : 1.7 fr 0.9 fr 1.25 fr ; gap : calc ( var ( -- sf - tp - space -12 ) + var ( -- sf - tp - space -4 ))}
. sf-theme-trade-pro . pro-footer . pro-eyebrow { color : var ( -- sf - tp - color - text - inverse - muted )}
. sf-theme-trade-pro . pro-footer h2 { font-size : var ( -- sf - tp - font - size - xl ); font-weight : var ( -- sf - tp - font - weight - bold ); letter-spacing : var ( -- sf - tp - letter - spacing - tight ); color : var ( -- sf - tp - color - text - inverse ); margin-block-end : var ( -- sf - tp - space -3 )}
. sf-theme-trade-pro . pro-footer h3 { font-size : var ( -- sf - tp - font - size - md ); color : var ( -- sf - tp - color - text - inverse ); margin-block-end : var ( -- sf - tp - space -3 )}
. sf-theme-trade-pro . pro-footer p { font-size : var ( -- sf - tp - font - size - sm ); color : var ( -- sf - tp - color - text - inverse - muted ); margin : 0 0 var ( -- sf - tp - space -2 )}
. sf-theme-trade-pro . pro-footer a { color : var ( -- sf - tp - color - text - inverse - muted )}
. sf-theme-trade-pro . pro-footer a : hover { color : var ( -- sf - tp - color - text - inverse )}
. sf-theme-trade-pro . pro-footer-links ul { display : flex ; flex-direction : column ; gap : var ( -- sf - tp - space -1 ); margin : 0 ; padding : 0 ; list-style : none }
. sf-theme-trade-pro . pro-footer-links a { font-size : var ( -- sf - tp - font - size - sm ); padding-block : var ( -- sf - tp - space -1 )}
/* cms 页脚链接为纯文字(无箭头)——装饰性 SVG 隐藏,DOM 保留 */
. sf-theme-trade-pro . pro-footer-links a . sf-tp-icon { display : none }
. sf-theme-trade-pro . pro-footer-bottom { border-block-start : var ( -- sf - tp - border - width - hairline ) solid var ( -- sf - tp - color - border - inverse ); margin-block-start : var ( -- sf - tp - space -8 ); padding-block-start : var ( -- sf - tp - space -5 ); font-size : var ( -- sf - tp - font - size - xs ); letter-spacing : normal ; color : var ( -- sf - tp - color - neutral -400 )}
/* 结尾 CTA 带(pro.html 全局 pro-end-cta):与 10a sf-tp-cta 同款深色渐变
语汇(cms Cta 组件),白底按钮反色 */
. sf-theme-trade-pro . pro-end-cta { background : linear-gradient ( 90 deg , color-mix ( in srgb , var ( -- sf - tp - color - surface - inverse ) 94 % , transparent ), color-mix ( in srgb , var ( -- sf - tp - color - brand - primary ) 67 % , transparent )); color : var ( -- sf - tp - color - text - inverse ); padding-block : calc ( var ( -- sf - tp - space -12 ) + var ( -- sf - tp - space -4 ))}
. sf-theme-trade-pro . pro-end-cta . pro-eyebrow { color : var ( -- sf - tp - color - text - inverse - muted )}
. sf-theme-trade-pro . pro-end-cta h2 { font-size : clamp ( 30 px , 4 vw , var ( -- sf - tp - font - size -4 xl )); color : var ( -- sf - tp - color - text - inverse ); letter-spacing : var ( -- sf - tp - letter - spacing - tight )}
. sf-theme-trade-pro . pro-end-cta p { color : color-mix ( in srgb , var ( -- sf - tp - color - text - inverse ) 83 % , transparent )}
. sf-theme-trade-pro . pro-end-cta . 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 . pro-end-cta . sf-tp-btn : hover { background : var ( -- sf - tp - color - brand - primary ); border-color : var ( -- sf - tp - color - brand - primary ); color : var ( -- sf - tp - color - text - on - brand )}
/* 桌面下拉悬停/键盘聚焦展开(cms sub-menu 交互的纯 CSS 复刻)。仅 ≥1025px:
≤1024 走抽屉,[hidden]=display:none 的折叠语义由 commercial !important
锁定保留。[hidden] 面板改为 opacity/visibility 隐藏后随组悬停浮现;
pro.js 点击 disclose 置 hidden=false 仍是持久展开——两通道共存互不破坏 */
@ media ( min-width : 1025px ) {
. sf-theme-trade-pro . pro-navigation . pro-nav-children [ hidden ] { display : grid !important ; opacity : 0 ; visibility : hidden ; pointer-events : none ; transform : translateY ( var ( -- sf - tp - space -1 )); transition : opacity var ( -- sf - tp - duration - fast ) var ( -- sf - tp - easing - standard ), transform var ( -- sf - tp - duration - fast ) var ( -- sf - tp - easing - standard ), visibility var ( -- sf - tp - duration - fast )}
. sf-theme-trade-pro . pro-navigation . pro-nav-group : hover > . pro-nav-children , . sf-theme-trade-pro . pro-navigation . pro-nav-group : focus-within > . pro-nav-children { opacity : 1 ; visibility : visible ; pointer-events : auto ; transform : translateY ( 0 )}
}
/* 抽屉/移动端精修(≤1024;形态与尺寸由 commercial !important 锁定段提供——
右滑面板 min(88vw,360px)/100dvh/安全区 padding、遮罩、sticky 抽屉头、
44px 触达、焦点环与 sf-drawer-extra 均为上游机制)。本块只做 cms 语汇的
未锁定属性:cms 头部 ≤1023 的 68px 头高/32px logo、链接悬停 brand-soft、
抽屉列表紧凑节奏(gap 归零靠链接自身 padding 分隔) */
@ media ( max-width : 1024px ) {
. sf-theme-trade-pro . pro-head-inner { min-height : 68 px ; gap : var ( -- sf - tp - space -4 )}
. sf-theme-trade-pro . pro-brand-logo { height : var ( -- sf - tp - space -8 )}
. sf-theme-trade-pro . pro-navigation { gap : 0 }
. sf-theme-trade-pro . pro-navigation > a : hover , . sf-theme-trade-pro . pro-navigation . pro-nav-group > a : hover , . sf-theme-trade-pro . pro-navigation . sf-drawer-extra > a : hover { background : var ( -- sf - tp - color - surface - brand - soft )}
. sf-theme-trade-pro . sf-drawer-header { font-size : var ( -- sf - tp - font - size - md ); font-weight : var ( -- sf - tp - font - weight - semibold ); letter-spacing : var ( -- sf - tp - letter - spacing - normal )}
}
/* chrome 响应式(cms 断点):1280 导航降一档字级防溢出;900 页脚折两栏
(联系栏整行,cms Footer 900 同构);620 单栏 + 版权条堆叠 + wrap 收边
( cms .wrap 620 = calc(100% - 30px)) */
@ media ( max-width : 1280px ) {
. sf-theme-trade-pro . pro-navigation > a , . sf-theme-trade-pro . pro-navigation . pro-nav-group > a { font-size : var ( -- sf - tp - font - size - sm )}
}
@ media ( max-width : 900px ) {
. sf-theme-trade-pro . pro-footer-top { grid-template-columns : 1.5 fr 1 fr ; gap : var ( -- sf - tp - space -10 )}
. sf-theme-trade-pro . pro-footer-top > div : last-child { grid-column : 1 /- 1 }
}
@ media ( max-width : 620px ) {
. sf-theme-trade-pro . pro-wrap { width : calc ( 100 % - 30 px )}
. sf-theme-trade-pro . pro-footer-top { grid-template-columns : 1 fr ; gap : var ( -- sf - tp - space -8 )}
. sf-theme-trade-pro . pro-footer-bottom { display : block }
}
2026-10-28 12:12:37 +08:00
/* ── 用户反馈:隐藏页眉的分类下拉按钮和 Search(导航只保留菜单项)── */
. sf-theme-trade-pro . pro-catalog-toggle { display : none !important }
. sf-theme-trade-pro . pro-mega { display : none !important }