diff --git a/themes/trade-pro/theme.css b/themes/trade-pro/theme.css index 3ab7c0f..373dc39 100644 --- a/themes/trade-pro/theme.css +++ b/themes/trade-pro/theme.css @@ -270,7 +270,9 @@ html { scroll-behavior: smooth; } -body { +/* Element baselines are scoped to the theme body class so they win the cascade + over platform pro-base.css (same specificity would lose to later loads). */ +body.sf-theme-trade-pro { margin: 0; background: var(--sf-tp-color-surface-page); color: var(--sf-tp-color-text-primary); @@ -281,10 +283,10 @@ body { overflow-x: hidden; } -h1, -h2, -h3, -h4 { +.sf-theme-trade-pro h1, +.sf-theme-trade-pro h2, +.sf-theme-trade-pro h3, +.sf-theme-trade-pro h4 { font-family: var(--sf-tp-font-family-heading); font-weight: var(--sf-tp-font-weight-bold); line-height: var(--sf-tp-line-height-tight); @@ -293,21 +295,21 @@ h4 { text-wrap: balance; } -h1 { font-size: var(--sf-tp-font-size-display); } -h2 { font-size: var(--sf-tp-font-size-3xl); } -h3 { font-size: var(--sf-tp-font-size-xl); } -h4 { font-size: var(--sf-tp-font-size-lg); } +.sf-theme-trade-pro h1 { font-size: var(--sf-tp-font-size-display); } +.sf-theme-trade-pro h2 { font-size: var(--sf-tp-font-size-3xl); } +.sf-theme-trade-pro h3 { font-size: var(--sf-tp-font-size-xl); } +.sf-theme-trade-pro h4 { font-size: var(--sf-tp-font-size-lg); } -p { +.sf-theme-trade-pro p { margin: 0 0 var(--sf-tp-space-4); } -a { +.sf-theme-trade-pro a { color: inherit; text-decoration: none; } -:focus-visible { +.sf-theme-trade-pro :focus-visible { outline: var(--sf-tp-focus-outline-width) var(--sf-tp-focus-outline-style) var(--sf-tp-focus-outline-color); outline-offset: var(--sf-tp-focus-outline-offset); } @@ -528,16 +530,16 @@ a { /* ── 表单(label 永远可见)── */ -label { +.sf-theme-trade-pro label { display: block; font-weight: var(--sf-tp-font-weight-semibold); font-size: var(--sf-tp-font-size-sm); margin-block-end: var(--sf-tp-space-2); } -input, -select, -textarea { +.sf-theme-trade-pro input, +.sf-theme-trade-pro select, +.sf-theme-trade-pro textarea { width: 100%; border: var(--sf-tp-input-border-width) solid var(--sf-tp-color-border-default); border-radius: var(--sf-tp-input-border-radius); @@ -547,37 +549,37 @@ textarea { color: inherit; } -input:focus-visible, -select:focus-visible, -textarea:focus-visible { +.sf-theme-trade-pro input:focus-visible, +.sf-theme-trade-pro select:focus-visible, +.sf-theme-trade-pro textarea:focus-visible { border-color: var(--sf-tp-color-border-brand); } -textarea { +.sf-theme-trade-pro textarea { min-height: 120px; resize: vertical; } /* ── FAQ 折叠(原生 details,静态可抓取)── */ -details { +.sf-theme-trade-pro details { border: var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle); border-radius: var(--sf-tp-radius-sm); margin-block-end: calc(var(--sf-tp-space-3) - var(--sf-tp-space-1)); background: var(--sf-tp-color-surface-default); } -summary { +.sf-theme-trade-pro summary { cursor: pointer; padding: var(--sf-tp-space-4) calc(var(--sf-tp-space-4) + var(--sf-tp-space-1)); font-weight: var(--sf-tp-font-weight-semibold); } -details[open] summary { +.sf-theme-trade-pro details[open] summary { border-block-end: var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle); } -details p { +.sf-theme-trade-pro details p { padding: var(--sf-tp-space-4) calc(var(--sf-tp-space-4) + var(--sf-tp-space-1)); color: var(--sf-tp-color-text-muted); margin: 0; @@ -594,10 +596,11 @@ details p { color: var(--sf-tp-color-text-brand); } -/* ── 滚动浮现动效(reduced-motion 与无 JS 时默认可见,渐进增强)── */ +/* ── 滚动浮现动效(渐进增强:仅在 JS 打开 html.js 且注册 IntersectionObserver + 后生效——Task 10 随布局引入配套 JS;无 JS/reduced-motion 时默认可见)── */ @media (prefers-reduced-motion: no-preference) { - [data-reveal] { + html.js [data-reveal] { opacity: 0; transform: translateY(calc(var(--sf-tp-space-3))); transition: @@ -606,7 +609,7 @@ details p { transition-delay: calc(var(--sf-tp-duration-fast) * var(--reveal-i, 0)); } - [data-reveal].is-visible { + html.js [data-reveal].is-visible { opacity: 1; transform: none; } @@ -743,13 +746,13 @@ details p { .tabs { gap: 8px; margin-block-end: 16px; } .tab { min-width: auto; padding: 9px 14px; font-size: 11px; } - /* FAQ */ - details { margin-block-end: 6px; } - summary { padding: 10px 12px; font-size: 12px; } - details p { padding: 0 12px 10px; font-size: 11px; } + /* FAQ(作用域同桌面基线,保持移动端覆写有效) */ + .sf-theme-trade-pro details { margin-block-end: 6px; } + .sf-theme-trade-pro summary { padding: 10px 12px; font-size: 12px; } + .sf-theme-trade-pro details p { padding: 0 12px 10px; font-size: 11px; } /* 表单 */ - input, select, textarea { padding: 8px 10px; font-size: 13px; } - label { font-size: 11px; } - textarea { min-height: 80px; } + .sf-theme-trade-pro input, .sf-theme-trade-pro select, .sf-theme-trade-pro textarea { padding: 8px 10px; font-size: 13px; } + .sf-theme-trade-pro label { font-size: 11px; } + .sf-theme-trade-pro textarea { min-height: 80px; } }