，故用后代选择器；价格指南插在 ts-pg-hero__main 内。
与关于天舜 / 联系我们同构：容器自带内边距，此处只留与下方眉标的间距。 */
.ts-fq-hero__inner > div > .breadcrumb-container,
.ts-pg-hero__main > .breadcrumb-container {
position: relative;
z-index: 2;
padding: 0;
margin-bottom: 20px;
}
.ts-pg-hero > .breadcrumb-container,
.ts-fq-hero > .breadcrumb-container,
.ts-cx-hero > .breadcrumb-container {
padding-top: 28px;
}
@media (max-width: 767px) {
.ts-crumb {
font-size: 12.5px;
}
.tsap-hero > .breadcrumb-container,
.tssg-hero > .breadcrumb-container,
.ts-pg-hero > .breadcrumb-container,
.ts-fq-hero > .breadcrumb-container,
.ts-cx-hero > .breadcrumb-container {
padding: 0 var(--ts-gutter);
margin-bottom: 16px;
}
.tsab-hero__inner > .breadcrumb-container {
padding: 0;
margin-bottom: 16px;
}
.ts-pg-hero > .breadcrumb-container,
.ts-fq-hero > .breadcrumb-container,
.ts-cx-hero > .breadcrumb-container {
padding-top: 22px;
}
}
/* ==========================================================================
7. Misc
========================================================================== */
blockquote { border-left: 4px solid var(--ts-accent); background: #f9f9f9; padding: 20px 30px; margin: 30px 0; font-style: italic; border-radius: 0 var(--ts-radius) var(--ts-radius) 0; }
@media print { header, footer, .sidebar, .gb-button, .breadcrumb-container { display: none; } }
/* 404 page: remove blog column pollution */
body.error404 .site-main .generate-columns-container { display: block; margin: 0; }
body.error404 .site-main .generate-columns { width: 100%; padding: 0; float: none; }
/* ==========================================================================
S1 Hero V3.4
========================================================================== */
/* ===== S1 首屏主视觉 ===== */
/* 品牌色变量已在本文件顶部 :root 中定义（--ts-primary / --ts-accent / --ts-accent-dark /
--ts-accent-text / --ts-radius / --ts-container 等）。各区块只负责 var() 引用，不重复定义。
铁律：品牌色令牌只在本文件 :root 出现一次，其他地方一律 var()，再出现十六进制品牌色值就是 bug。 */
/* 外层全宽：掰开 GeneratePress 外层包裹的宽度限制和内边距
这些规则作用于整个首页全部区块，保留它们让 .ts-hero 能出血到视口两边。
内层版心由 .ts-section__inner / .ts-hero__inner 各自管理，不依赖 GP 默认限宽。
注意：别删这几条——一删首屏就缩回 1200px 居中，不出血了。 */
.home .site-content,
.home .inside-article,
.home .entry-content {
padding: 0;
max-width: 100%;
margin: 0;
background: transparent;
}
.home #primary {
float: none;
width: 100%;
padding: 0;
margin: 0;
}
/* 内容区外层全宽：只作用于 .site-content 及其直接子 .grid-container，
不碰导航栏（导航栏在 .site-header 下，与 .site-content 同级）。
去 !important，改用 html body.home 高特异性覆盖 GP 父主题默认值 */
html body.home .site-content {
max-width: 100%;
width: 100%;
margin-left: 0;
margin-right: 0;
}
html body.home .site-content > .grid-container {
max-width: 100%;
padding: 0;
margin-left: 0;
margin-right: 0;
}
/* GB 容器兜底：若 GenerateBlocks 插入了限宽 .gb-container，一并掰开 */
html body.home .gb-container,
html body.home .gb-inside-container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
/* GeneratePress 3.x 内容区包装器：GP 默认给 .content-area 一个 max-width（容器宽度设置），
会把首屏整块内容缩在中间/偏右。必须一并掰开（此前教程只掰了 site-content/entry-content，
漏掉了这一层——这正是首屏只占右边、左侧大片空白的原因）。 */
html body.home .content-area {
max-width: 100%;
width: 100%;
margin-left: 0;
margin-right: 0;
}
/* 首屏隐藏页面标题包装器（前置 B 的 PHP 已从源码删除 H1，这里隐藏空壳）——
待核验：上线前 curl 首页 | grep -o ']*>' 确认唯一 H1 是 .ts-hero__title */
.home .entry-header {
display: none;
}
/* 全站共用版心（S1-S15 每块内容容器加 class="ts-section__inner"，版心自动对齐） */
.ts-section__inner {
max-width: var(--ts-container);
margin: 0 auto;
padding: 0 var(--ts-gutter);
box-sizing: border-box;
}
/* 首屏容器 + 素色底 fallback */
.ts-hero {
position: relative;
margin: 0;
/* ★ 2026-10-12：曾一度改为按底图比例 calc((100vw - sbw)/1.778)（首屏 = 图高，
图完整零裁切），但 1891 视口下首屏涨到 1055px —— 老周反馈「高度太高」。
现回到 82vh（视口高驱动）：首屏 738px。代价是底图上下被裁约 30%
（1.778:1 的图塞不进 2.54:1 的容器，两者只能选一个）。
若要兼得，需换一张比例 ≥2.5:1 的横构图底图。 */
/* ★ 2026-10-12 统一方案：全站首屏容器比例统一为 2.5:1（原 82vh 视口高驱动） */
min-height: calc((100vw - var(--ts-sbw, 0px)) / 2.5);
display: flex;
align-items: center;
overflow: hidden;
background-color: var(--ts-primary);
isolation: isolate;
/* 突破父容器限宽：GP #page.grid-container 把内容区锁在版心内，
用 100vw + 负 margin 让 ts-hero 单独铺满视口，内容区保持版心居中 */
width: calc(100vw - var(--ts-sbw, 0px));
margin-left: calc((100% - (100vw - var(--ts-sbw, 0px))) / 2);
margin-right: calc((100% - (100vw - var(--ts-sbw, 0px))) / 2);
}
@media (max-width: 1180px) {
.ts-hero {
align-items: flex-start;
padding-top: 72px;
min-height: calc((100vw - var(--ts-sbw, 0px)) / 2.5);
}
}
/* 左侧 4 色标渐变遮罩（左暗右亮，文字侧够暗，图片侧透出） */
.ts-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
/* color-mix 降级：旧浏览器用 rgba（#0B1F3A = 11,31,58），新浏览器用 color-mix */
/* ★ 2026-10-12（老周「怎么左边的房子没显示出来呢」）：
0.52/0.44/0.30/0.16 → 0.15/0.13/0.09/0.06。
底图稿左侧中位亮度仅 30/255（极暗的夜景建筑），再叠 0.52 墨蓝后
建筑轮廓被完全压掉（实测左侧 R 标准差 18.7 = 近乎平坦）。
减弱后同一区域 R 标准差 18.7 → 31.6，楼房轮廓与窗格重新显现；
白字对比 10.1:1 → 6.8:1，仍高出 WCAG AA（4.5:1）约 50%。 */
background: linear-gradient(
100deg,
rgba(var(--ts-primary-rgb), 0.52) 0%,
rgba(var(--ts-primary-rgb), 0.44) 30%,
rgba(var(--ts-primary-rgb), 0.30) 65%,
rgba(var(--ts-primary-rgb), 0.16) 100%
);
background: linear-gradient(
100deg,
color-mix(in srgb, var(--ts-primary) 52%, transparent) 0%,
color-mix(in srgb, var(--ts-primary) 44%, transparent) 30%,
color-mix(in srgb, var(--ts-primary) 30%, transparent) 65%,
color-mix(in srgb, var(--ts-primary) 16%, transparent) 100%
);
pointer-events: none;
}
/* 底部深色渐变（Phase 1 同色叠同色零效果；Phase 2 有图时底部压深略有作用。
可选清理：Phase 2 补图后实测，如无明显效果可整段删除——连带清掉 z-index 和说明。
color-mix 降级同 ::before */
.ts-hero::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
z-index: 1;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(var(--ts-primary-rgb), 0.9) 100%
);
background: linear-gradient(
to bottom,
transparent 0%,
color-mix(in srgb, var(--ts-primary) 90%, transparent) 100%
);
pointer-events: none;
}
/* Phase 2: 真实 ![]()
背景图层（Phase 1 不需要，CSS 先放着不影响） */
.ts-hero__media {
position: absolute;
inset: 0;
z-index: 0;
}
.ts-hero__img {
width: 100%;
/* 2026-10-12：首屏高度回到 82vh 后，这里也回到 cover 满铺
（高度驱动型首屏下 height:auto 会让图矮于容器、底部露底色）。
brightness 0.72（原 0.55）—— 底图是夜景，中位亮度仅 9~14%，
0.55 再压 45% 后左侧暗部几乎与遮罩同色，看起来像一块纯色背景。
★ 2026-10-12 老周要求提亮：0.72 → 0.85（客户 2560×1024 新稿换图后）。
实测（1891 视口）左侧背景中位亮度 1.1%→1.3%、白字 CR 11.4→10.1:1（仍远超 4.5:1）。 */
height: 100%;
object-fit: cover;
object-position: center right;
filter: brightness(0.72);
}
/* 内容层（在遮罩之上），版心与 .ts-section__inner 同一规格，纵向 padding 单独覆盖 */
.ts-hero__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: var(--ts-container);
margin: 0 auto;
padding: clamp(64px, 8vw, 96px) 48px;
box-sizing: border-box;
}
/* H1 标题 */
.ts-hero__title {
color: #FFFFFF;
font-size: clamp(26px, 4vw, 46px);
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.01em;
text-wrap: balance;
margin: 0 0 24px 0;
max-width: 820px;
}
/* 副标题 */
/* AI 答案段：前置实体定义，提升 GEO 引用率 */
.ts-hero__answer {
color: rgba(255, 255, 255, 0.88);
font-size: clamp(14px, 1.5vw, 16px);
font-weight: 400;
line-height: 1.55;
margin: 0 0 16px 0;
max-width: 560px;
}
.ts-hero__subtitle {
color: rgba(255, 255, 255, 0.82);
font-size: clamp(13px, 1.3vw, 15px);
font-weight: 400;
line-height: 1.6;
margin: 0 0 28px 0;
max-width: 560px;
}
/* 按钮组 */
.ts-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
margin-bottom: 40px;
}
/* 主按钮 - 电话咨询（实心，锁定橙，墨蓝字过 WCAG AA） */
a.ts-btn-call {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 30px;
font-size: 16px;
font-weight: 700;
text-decoration: none;
background: var(--ts-accent);
color: var(--ts-primary);
border: 2px solid var(--ts-accent);
border-radius: var(--ts-radius);
box-shadow: 0 8px 24px rgba(var(--ts-accent-rgb), 0.3); /* 降级：不支持 color-mix 的浏览器 */
box-shadow: 0 8px 24px color-mix(in srgb, var(--ts-accent) 30%, transparent);
transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
a.ts-btn-call:hover,
a.ts-btn-call:focus-visible {
background: var(--ts-accent-dark);
border-color: var(--ts-accent-dark);
color: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(var(--ts-accent-rgb), 0.4); /* 降级：不支持 color-mix 的浏览器 */
box-shadow: 0 12px 28px color-mix(in srgb, var(--ts-accent) 40%, transparent);
}
/* 次按钮 - 看实拍案例（Ghost Button，Phase 1 不渲染，CSS 保留供 Phase 2 使用） */
a.ts-btn-cases {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 30px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
background: transparent;
color: #FFFFFF;
border: 2px solid rgba(255, 255, 255, 0.55);
border-radius: var(--ts-radius);
transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
a.ts-btn-cases:hover,
a.ts-btn-cases:focus-visible {
background: rgba(255, 255, 255, 0.1);
border-color: #FFFFFF;
color: #FFFFFF;
transform: translateY(-2px);
}
/* 按钮键盘焦点 */
a.ts-btn-call:focus-visible,
a.ts-btn-cases:focus-visible {
/* color-mix 降级 */
outline: 3px solid rgba(var(--ts-accent-rgb), 0.5);
outline: 3px solid color-mix(in srgb, var(--ts-accent) 50%, transparent);
outline-offset: 3px;
}
/* 按钮内 SVG 图标 */
.ts-hero__actions svg {
flex-shrink: 0;
}
/* 信任角标组 */
.ts-hero__trust {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
/* 首屏承诺条（2026-09-23）：复用信任徽标样式，与下方资质徽标留 12px 组内间距，
与按钮组的 40px 间距保持原节奏。文案仅前置站内已有口径，不加码。 */
.ts-hero__promises {
margin: 0 0 12px 0;
}
/* 玻璃拟态角标（统一 8px 圆角） */
.ts-hero__badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
font-size: 13px;
font-weight: 500;
color: rgba(255, 255, 255, 0.85);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: var(--ts-radius);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
text-decoration: none;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
/* 角标橙色圆点 */
.ts-hero__badge::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
background: var(--ts-accent);
border-radius: 50%;
flex-shrink: 0;
}
/* 角标内 SVG */
.ts-hero__badge svg {
flex-shrink: 0;
}
/* 审核人姓名（2026-09-23 加）：徽标文字本身是 85% 白（11.7:1），
名字若用橙 #F26B21（深底 5.43:1）反而比周围暗、看着像被弱化。
故用纯白加粗（16.52:1），在深墨蓝首屏上自然跳出来，强化"有真人负责"的信号。 */
.ts-hero__badge .ts-hero__reviewer {
color: #FFFFFF;
font-weight: 700;
}
/* 可点击角标悬停（仅指针设备，避免触屏 sticky hover） */
@media (hover: hover) {
a.ts-hero__badge--link:hover {
border-color: var(--ts-accent);
background: color-mix(in srgb, var(--ts-accent) 12%, transparent);
color: #FFFFFF;
}
}
/* 键盘焦点：所有输入方式始终生效 */
a.ts-hero__badge--link:focus-visible {
border-color: var(--ts-accent);
background: color-mix(in srgb, var(--ts-accent) 12%, transparent);
color: #FFFFFF;
/* color-mix 降级 */
outline: 3px solid rgba(var(--ts-accent-rgb), 0.5);
outline: 3px solid color-mix(in srgb, var(--ts-accent) 50%, transparent);
outline-offset: 3px;
}
/* Phase 2: AI 场景示意标记（已隐藏，用户反馈太丑） */
.ts-hero__ai-note {
display: none;
}
.nav-float-right #site-navigation,
.nav-float-right .main-navigation {
margin-left: 0;
}
/* ===== 移动端（767px 以下，与全站三档断点对齐）===== */
@media (max-width: 767px) {
.ts-hero {
min-height: calc((100vw - var(--ts-sbw, 0px)) / 2.5);
}
.ts-hero__inner {
padding: 56px 18px;
}
.ts-hero__actions {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
a.ts-btn-call,
a.ts-btn-cases {
width: 100%;
justify-content: center;
}
.ts-hero__trust {
gap: 8px;
}
.ts-hero__badge {
font-size: 12px;
padding: 5px 10px;
}
}
/* ===== 中等屏幕（768px - 1180px）===== */
@media (min-width: 768px) and (max-width: 1180px) {
.ts-hero__inner {
padding: 72px 20px;
}
}
/* ===== 减少动画（用户系统设置了减少动画时生效）===== */
@media (prefers-reduced-motion: reduce) {
a.ts-btn-call,
a.ts-btn-cases,
a.ts-hero__badge--link {
transition: none;
}
a.ts-btn-call:hover,
a.ts-btn-cases:hover,
a.ts-hero__badge--link:hover {
transform: none;
}
}
/* ==========================================================================
S2 Facts V2.0
========================================================================== */
/* ===== S2 关键事实条 V2.0 ===== */
/* 外层 section：白底全宽出血，和 S1 Hero 同手法 */
/* margin-top 制造 S1 与 S2 之间的呼吸间距；padding 让卡片在白色区域内自然展示 */
.ts-facts {
background: #FFFFFF;
padding: 40px 0 40px;
margin-top: 32px;
position: relative;
z-index: 3;
width: calc(100vw - var(--ts-sbw, 0px));
margin-left: calc((100% - (100vw - var(--ts-sbw, 0px))) / 2);
margin-right: calc((100% - (100vw - var(--ts-sbw, 0px))) / 2);
}
/* 2026-09-23 新增：信任条区块主标题（原为 ts-visually-hidden 仅供读屏）。
改为可见小标题的**真实动机**：信任信息（工商可查/业绩/场地/报价保修）显性化对客户更有说服力，
而不是"躲避隐藏文本判罚"——视觉隐藏是 WCAG 标准无障碍写法（clip:rect+1px，非 display:none），
搜索引擎可正常读取，不存在作弊问题。此处只是把该说的话让客户也看得见。
样式：中等字重 + 主色，与下方极小的 eyebrow(13px) 形成层次，不喧宾夺主。
---------------------------------------------------------------
★ 2026-09-23 修复「标题不居中」（老周截图反馈，偏左约 80px）：
根因：父级 .ts-facts 用 100vw + 负 margin 全宽出血（宽 1440），
子元素 max-width:1280 + margin:0 auto 本应得到 ml/mr = 80/80 而居中。
但 L111 主题规则 `#content .entry-content h2, ... h3 { margin-left: 0 }`
特异性 (1,2,1) 高于本类名 (0,1,0)，把 margin-left 强制压成 0，
导致 auto 只在右侧生效 → mr 变 160px → 标题整体左移 80px。
实测：卡片中心 712.5 / 标题中心 632.5，偏差 -80.0px（1440 视口）。
手机端（<768px）父级无负 margin，故不显现。
修法：选择器加 `#content .entry-content` 前缀提升特异性到 (1,3,1)，压过 L111，
并把 margin-left/right 分开写为 auto，确保两侧都参与分配。
与 L1056「.ts-svc-card__title position: static」同一套解法（R148 同类坑）。
实测（修复后）：1440 卡片中心 712.5 / 标题中心 712.5，偏差 0.0px；
1025 / 768 / 390 全部 0.0px；横向无溢出。 */
#content .entry-content .ts-facts__title {
box-sizing: border-box;
max-width: var(--ts-container);
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 18px;
font-size: 20px;
line-height: 1.4;
font-weight: 700;
color: var(--ts-primary);
text-align: center;
}
/* 卡片本体：白底 + 边框 + 阴影，版心 1280px 居中 */
.ts-facts__card {
box-sizing: border-box;
max-width: var(--ts-container);
margin: 0 auto;
padding: 28px 40px 40px;
background: #FFFFFF;
border: 1px solid var(--ts-line);
border-radius: var(--ts-radius);
box-shadow: 0 12px 32px -8px rgba(var(--ts-primary-rgb), 0.10);
}
/* 头部行：eyebrow + 信用代码，底部发丝线分隔 */
.ts-facts__head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding-bottom: 20px;
margin-bottom: 32px;
border-bottom: 1px solid var(--ts-line);
}
/* eyebrow：橙点 + 文字 */
.ts-facts__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--ts-primary);
}
.ts-facts__eyebrow::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ts-accent);
}
/* 信用代码 */
.ts-facts__credit {
margin: 0;
font-size: 13px;
color: var(--ts-muted);
font-variant-numeric: tabular-nums;
user-select: all;
}
/* "公开可查"查证链接：指向国家企业信用信息公示系统 */
.ts-facts__verify {
color: var(--ts-accent-text);
text-decoration: underline;
text-underline-offset: 3px;
}
@media (hover: hover) {
.ts-facts__verify:hover {
color: var(--ts-primary);
}
}
/* 四列网格 */
.ts-facts__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin: 0;
}
/* 每格 */
.ts-facts__cell {
display: flex;
flex-direction: column;
gap: 10px;
padding: 4px 28px;
}
/* 左分隔线：仅桌面四列布局 */
@media (min-width: 1025px) {
/* 2026-09-23（风险 8 配套）：S2 改为信任条后，四格的值都变成 12–20 字的长句，
原左右各 28px 内边距把 4 列每列压到 243px 可用宽，长句贴边折行显得拥挤。
此处仅把本区块的横向内边距收到 24px（与同区块历史上 --addr 那格用过的值一致），
可用宽提到 251px，配合上方 .ts-facts__value 的缩字规则，长句折行更从容。
分隔线位置不受影响（padding 变化不移动 border）。 */
.ts-facts__cell {
padding: 4px 24px;
}
.ts-facts__cell + .ts-facts__cell {
border-left: 1px solid var(--ts-line);
}
}
/* 两列布局统一十字分隔（平板 768-1024 + 手机 <=767） */
@media (max-width: 1024px) {
.ts-facts__cell:nth-child(odd) {
border-right: 1px solid var(--ts-line);
}
.ts-facts__cell:nth-child(-n+2) {
border-bottom: 1px solid var(--ts-line);
}
}
/* 橙色短横线：用 ::before 伪元素，避免 在
上下文中违反 HTML 规范 */
.ts-facts__cell::before {
content: "";
order: 1;
width: 28px;
height: 3px;
margin-bottom: 6px;
background: var(--ts-accent);
border-radius: 2px;
transition: width 0.25s ease;
}
@media (hover: hover) {
.ts-facts__cell:hover::before {
width: 48px;
}
}
/* 事实大字（dd，视觉排第二） */
.ts-facts__value {
order: 2;
margin: 0;
margin-inline-start: 0;
color: var(--ts-primary);
font-size: clamp(19px, 2vw, 22px);
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.01em;
}
/* 标签小字（dt，视觉排第三） */
.ts-facts__label {
order: 3;
margin: 0;
font-weight: 400;
color: var(--ts-muted);
font-size: 14px;
line-height: 1.6;
}
/* 悬停背景微染（仅在支持 hover 的设备生效，避免触屏 sticky） */
@media (hover: hover) {
.ts-facts__cell:hover {
background: rgba(var(--ts-accent-rgb), 0.03);
background: color-mix(in srgb, var(--ts-accent) 3%, transparent);
}
}
/* 无障碍：屏幕阅读器专用隐藏文字 */
.ts-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ===== 平板（768px - 1024px）：2x2 ===== */
@media (min-width: 768px) and (max-width: 1024px) {
.ts-facts__card {
padding: 24px 24px 32px;
}
.ts-facts__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ts-facts__cell {
padding: 4px 20px;
}
}
/* ===== 手机（767px 以下）：2x2 小字 ===== */
@media (max-width: 767px) {
.ts-facts {
padding: 48px 0 56px;
margin-top: 0;
/* 手机端负 margin 崩坏防护：禁止负 margin 超出视口 */
margin-left: 0;
margin-right: 0;
width: 100%;
}
.ts-facts__card {
padding: 20px 20px 28px;
}
.ts-facts__head {
padding-bottom: 14px;
margin-bottom: 24px;
}
.ts-facts__credit {
font-size: 12px;
}
.ts-facts__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ts-facts__cell {
padding: 18px 16px;
}
.ts-facts__value {
font-size: 17px;
}
.ts-facts__label {
font-size: 13px;
}
}
/* ===== 减少动画 ===== */
@media (prefers-reduced-motion: reduce) {
.ts-facts__cell::before {
transition: none;
}
}
/* ==========================================================================
S3 Ad Production V1.1
========================================================================== */
/* ===== S3/S4/S5 通用服务区卡片系统 V1.1 ===== */
.ts-s3 {
background: #FFFFFF;
padding: 40px 0 40px;
width: calc(100vw - var(--ts-sbw, 0px));
margin-left: calc((100% - (100vw - var(--ts-sbw, 0px))) / 2);
margin-right: calc((100% - (100vw - var(--ts-sbw, 0px))) / 2);
}
.ts-s3__inner {
max-width: var(--ts-container, 1280px);
margin: 0 auto;
}
/* 头部 */
.ts-s3__head {
text-align: center;
margin-bottom: 48px;
}
.ts-s3__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--ts-primary, #0B1F3A);
}
.ts-s3__eyebrow::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ts-accent, #F26B21);
}
.ts-s3__title {
margin: 0;
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
color: var(--ts-primary, #0B1F3A);
line-height: 1.3;
}
/* AI 摘录位：与 .ts-s3__head 内的居中风格保持一致（2026-09-22 实测补） */
/* 2026-09-23 改：原文案在 1280 版心下横跨整屏、单行拉到 1200+px，读起来很散。
此处加阅读宽度上限并居中，把这段副标题归到标题下方的舒适行宽内。
数值取 62 个中文字符宽 ≈ 820px 上限（16px 字号下约 51 字/行），
正文段落常规行宽区间（45~75 字符），既不满屏也不至于折成碎行。
margin-inline:auto 保证窄屏（<820px）时自动退化为满宽+居中，不影响手机。 */
.ts-s3__sub {
text-align: center;
max-width: 820px;
margin-inline: auto;
}
/* 四列网格 */
.ts-s3__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 28px;
}
/* 卡片：flex 布局保证等高，CTA 沉底 */
.ts-svc-card {
position: relative;
display: flex;
flex-direction: column;
background: #FFFFFF;
border: 1px solid var(--ts-line, #E5E7EB);
border-radius: var(--ts-radius, 8px);
overflow: hidden;
transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
/* 整卡可点击：标题链接的 ::after 铺满卡片 */
.ts-svc-card__title a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
/* ★ 2026-09-22 修复：上面这条「整卡可点击」此前是失效的。
根因：L111 的 #content .entry-content h2, #content .entry-content h3 { position: relative; }
把标题 h3.ts-svc-card__title 变成了定位祖先，而 h3 才是 ::after 最近的定位祖先，
于是 inset:0 解析为「标题行」(126x20) 而非「整张卡片」(156x217) —— 实测覆盖率仅 0.07，
卡片 90% 以上的区域点不到，只有标题那一行文字能点。
修法：把标题复位为 static，让 ::after 的包含块回落到 .ts-svc-card（已是 position:relative），
从而真正铺满整卡。点击区从 126x20 提升到 156x217（手机）/ 299x302（桌面）。
选择器必须带 #content .entry-content 前缀：L111 那条特异性是 (1,1,1)，
单写 .ts-svc-card__title (0,1,0) 按源码顺序也压不过（R148 同类坑）。
h2/h3 的伪元素已被 L124 全部 display:none，故复位为 static 不影响任何装饰。 */
#content .entry-content .ts-svc-card__title {
position: static;
}
/* 键盘焦点环（所有设备，含触摸 tap 聚焦） */
.ts-svc-card:focus-within {
outline: 3px solid rgba(var(--ts-accent-rgb, 242, 107, 33), 0.55);
outline: 3px solid color-mix(in srgb, var(--ts-accent, #F26B21) 55%, transparent);
outline-offset: 2px;
}
/* 图片位 */
.ts-svc-card__media {
aspect-ratio: 16/9;
background: var(--ts-primary, #0B1F3A);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Phase 2 安全网：媒体位有 img 时 SVG 自动隐藏 */
.ts-svc-card__media:has(img) svg {
display: none;
}
.ts-svc-card__icon {
width: 48px;
height: 48px;
color: rgba(255, 255, 255, 0.65);
}
/* 实拍照片 */
.ts-svc-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
/* 卡片正文：flex 撑满，CTA 沉底 */
.ts-svc-card__body {
display: flex;
flex-direction: column;
flex: 1;
padding: 24px;
text-align: center;
}
.ts-svc-card__title {
margin: 0 0 6px;
font-size: 16px;
font-weight: 700;
line-height: 1.4;
}
.ts-svc-card__title a {
color: var(--ts-primary, #0B1F3A);
text-decoration: none;
}
.ts-svc-card__desc {
margin: 0;
font-size: 13px;
color: var(--ts-muted, #6B7280);
line-height: 1.6;
}
/* "了解详情" CTA：沉到卡片底部 */
.ts-svc-card__more {
margin-top: auto;
padding-top: 14px;
display: inline-flex;
align-self: center;
align-items: center;
gap: 4px;
font-size: 13px;
font-weight: 600;
color: var(--ts-muted, #6B7280);
transition: color 0.25s ease;
}
.ts-svc-card__more::after {
content: "\2192";
transition: transform 0.25s ease;
}
/* 尾部链接 */
.ts-s3__more {
text-align: center;
margin-top: 40px;
}
.ts-s3__more a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 12px 28px;
font-size: 15px;
font-weight: 600;
color: var(--ts-primary, #0B1F3A);
text-decoration: none;
border: 1px solid var(--ts-line, #E5E7EB);
border-radius: var(--ts-radius, 8px);
transition: border-color 0.25s ease, color 0.25s ease;
}
.ts-s3__more a::after {
content: "\203A";
margin-left: 4px;
transition: margin-left 0.25s ease;
}
/* 指针设备悬停效果（触摸设备不触发，避免 sticky hover） */
@media (hover: hover) {
.ts-svc-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px -8px rgba(var(--ts-primary-rgb, 11, 31, 58), 0.12);
border-color: rgba(var(--ts-accent-rgb, 242, 107, 33), 0.3);
border-color: color-mix(in srgb, var(--ts-accent, #F26B21) 30%, transparent);
}
.ts-svc-card:hover .ts-svc-card__title a {
color: var(--ts-accent-dark, #E0631A);
}
.ts-svc-card:hover .ts-svc-card__media img {
transform: scale(1.04);
}
.ts-svc-card:hover .ts-svc-card__more {
color: var(--ts-accent, #F26B21);
}
.ts-svc-card:hover .ts-svc-card__more::after {
transform: translateX(3px);
}
.ts-s3__more a:hover {
border-color: var(--ts-accent, #F26B21);
color: var(--ts-accent-dark, #E0631A);
}
.ts-s3__more a:hover::after {
margin-left: 8px;
}
}
/* 平板（768px - 1024px）：2x4 */
@media (min-width: 768px) and (max-width: 1024px) {
.ts-s3__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* 手机（767px 以下）：2x4 小字 */
@media (max-width: 767px) {
.ts-s3 {
padding: 40px 16px 56px;
}
.ts-s3__head {
margin-bottom: 32px;
}
.ts-s3__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.ts-svc-card__body {
padding: 14px;
}
.ts-svc-card__title {
font-size: 14px;
}
.ts-svc-card__desc {
font-size: 12px;
}
.ts-svc-card__icon {
width: 28px;
height: 28px;
}
.ts-s3__more {
margin-top: 28px;
}
.ts-s3__more a {
padding: 10px 20px;
font-size: 14px;
}
}
/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
.ts-svc-card,
.ts-svc-card__media img,
.ts-svc-card__more::after,
.ts-s3__more a,
.ts-s3__more a::after {
transition: none;
}
.ts-svc-card:hover {
transform: none;
}
.ts-svc-card:hover .ts-svc-card__media img {
transform: none;
}
}
/* ==========================================================================
S4 Ad Design V2.0
========================================================================== */
/* ===== S4 广告设计服务区 V2.0（白底，复用 S3 卡片 CSS） ===== */
.ts-s4 {
background: #FFFFFF;
padding: 40px 0 80px;
width: calc(100vw - var(--ts-sbw, 0px));
margin-left: calc((100% - (100vw - var(--ts-sbw, 0px))) / 2);
margin-right: calc((100% - (100vw - var(--ts-sbw, 0px))) / 2);
}
.ts-s4__inner {
max-width: var(--ts-container, 1280px);
margin: 0 auto;
}
/* 头部 */
.ts-s4__head {
text-align: center;
margin-bottom: 48px;
}
.ts-s4__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--ts-primary, #0B1F3A);
}
.ts-s4__eyebrow::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ts-accent, #F26B21);
}
.ts-s4__title {
margin: 0;
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
color: var(--ts-primary, #0B1F3A);
line-height: 1.3;
}
/* 导语（AI 摘录位）：头部标题下方、网格上方，限宽居中，对齐站内 __sub 节奏 */
.ts-s4__sub {
max-width: 720px;
margin: 14px auto 40px;
font-size: clamp(15px, 1.5vw, 17px);
line-height: 1.7;
color: var(--ts-text-soft, #4B5563);
}
/* 四列网格（6 卡 = 2x4，末行左对齐） */
.ts-s4__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 28px;
}
/* 平板（768px - 1024px）：2x3 */
@media (min-width: 768px) and (max-width: 1024px) {
.ts-s4__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* 尾部链接 */
.ts-s4__more {
text-align: center;
margin-top: 40px;
}
.ts-s4__more a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 12px 28px;
font-size: 15px;
font-weight: 600;
color: var(--ts-primary, #0B1F3A);
text-decoration: none;
border: 1px solid var(--ts-line, #E5E7EB);
border-radius: var(--ts-radius, 8px);
transition: border-color 0.25s ease, color 0.25s ease;
}
.ts-s4__more a::after {
content: "\203A";
margin-left: 4px;
transition: margin-left 0.25s ease;
}
/* 指针设备：尾部按钮 hover（文字色 --ts-accent-text 过 AA，禁用 accent-dark） */
@media (hover: hover) {
.ts-s4__more a:hover {
border-color: var(--ts-accent, #F26B21);
color: var(--ts-accent-text, #C2410C);
}
.ts-s4__more a:hover::after {
margin-left: 8px;
}
}
/* 手机（767px 以下） */
@media (max-width: 767px) {
.ts-s4 {
padding: 40px 16px 56px;
}
.ts-s4__head {
margin-bottom: 32px;
}
.ts-s4__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.ts-s4__more {
margin-top: 28px;
}
.ts-s4__more a {
padding: 10px 20px;
font-size: 14px;
}
}
/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
.ts-s4__more a,
.ts-s4__more a::after {
transition: none;
}
}
/* ==========================================================================
S5 Event Planning V3.0
========================================================================== */
/* ===== S5 活动策划服务区 V4.1 —— 白底 + 橙色生长条，间距对齐 S3/S4 ===== */
.ts-event {
background: #FFFFFF;
padding: 0 0 clamp(28px, 3.5vw, 40px);
position: relative;
overflow: hidden;
}
.ts-event__inner {
max-width: var(--ts-container, 1280px);
margin: 0 auto;
padding: 0 24px;
box-sizing: border-box;
}
/* 等宽双栏 */
.ts-event__layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
/* 两栏等高（默认 stretch），左栏 CTA 用 margin-top:auto 沉到底部与右栏最末卡对齐 */
}
/* 左栏：顶部与右栏对齐，自然滚动（不吸顶，避免与右栏错位） */
.ts-event__left {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
padding-top: 8px;
height: 100%;
}
/* eyebrow：与 S4 一致 */
.ts-event__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--ts-primary, #0B1F3A);
margin-bottom: 16px;
}
.ts-event__eyebrow::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ts-accent, #F26B21);
}
/* H2 */
.ts-event__heading {
font-size: clamp(24px, 3vw, 32px);
font-weight: 700;
color: var(--ts-primary, #0B1F3A);
margin: 0 0 16px 0;
letter-spacing: -0.02em;
line-height: 1.3;
}
/* 副标题 */
.ts-event__sub {
font-size: clamp(15px, 1.5vw, 17px);
color: var(--ts-text-soft, #4B5563);
line-height: 1.7;
margin: 0 0 32px 0;
max-width: 480px;
}
/* CTA 容器：margin-top:auto 让 CTA 沉到左栏底部，与右栏最末一张卡对齐 */
.ts-event__cta {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 24px;
flex-wrap: wrap;
margin-top: auto;
}
/* 胶囊按钮：橙色实心（和 S3/S4 底部链接风格呼应但更强） */
.ts-event__more {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
font-size: 16px;
font-weight: 700;
color: #FFFFFF;
background: linear-gradient(135deg, var(--ts-accent), var(--ts-accent-dark));
border: none;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 8px 24px -6px rgba(var(--ts-accent-rgb), 0.5);
transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
/* 电话直拨 */
.ts-event__tel {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 17px;
font-weight: 800;
color: var(--ts-accent-text, #C2410C);
text-decoration: none;
letter-spacing: 0.02em;
}
.ts-event__tel svg {
color: var(--ts-accent, #F26B21);
}
/* 信任标签：白底上的浅灰标签 */
.ts-event__tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 36px;
}
.ts-event__tags span {
font-size: 13px;
color: var(--ts-text-soft, #4B5563);
background: var(--ts-bg-alt, #F8F9FA);
border: 1px solid var(--ts-line, #E5E7EB);
padding: 7px 16px;
border-radius: 999px;
font-weight: 600;
letter-spacing: 0.02em;
}
/* 右栏服务列表：2列网格（5卡=2×2+1，最后一张居中） */
.ts-event__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.ts-event__list li:last-child {
grid-column: 1 / -1;
}
/* 单张卡片：恢复舒适尺寸，现代化质感 */
.ts-event__card {
position: relative;
display: flex;
align-items: center;
gap: 16px;
background: #FFFFFF;
border: 1px solid var(--ts-line, #E5E7EB);
border-radius: var(--ts-radius, 8px);
padding: 20px 24px;
text-decoration: none;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.25s ease;
height: 100%;
box-sizing: border-box;
}
/* 左侧橙色生长条 */
.ts-event__card::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background: linear-gradient(180deg, var(--ts-accent), var(--ts-accent-dark));
transform: scaleY(0);
transition: transform 0.3s ease;
}
/* 图标：橙色描边图标（和 S3/S4 卡片标题色呼应） */
.ts-event__icon {
flex-shrink: 0;
width: 36px;
height: 36px;
padding: 8px;
box-sizing: border-box;
color: var(--ts-accent, #F26B21);
}
.ts-event__icon svg {
width: 100%;
height: 100%;
stroke-width: 1.8;
}
/* 卡片正文 */
.ts-event__body {
flex: 1;
min-width: 0;
}
.ts-event__title {
font-size: 16px;
font-weight: 700;
color: var(--ts-primary, #0B1F3A);
margin: 0 0 2px 0;
}
.ts-event__desc {
font-size: 13px;
color: var(--ts-text-soft, #4B5563);
margin: 0;
}
/* 编号：白卡上的橙色胶囊 */
.ts-event__index {
position: absolute;
top: 12px;
right: 14px;
font-size: 11px;
font-weight: 800;
color: #FFFFFF;
background: var(--ts-accent, #F26B21);
padding: 3px 10px;
border-radius: 20px;
letter-spacing: 0;
}
/* 箭头：灰色 */
.ts-event__arrow {
flex-shrink: 0;
color: var(--ts-muted, #6B7280);
transition: transform 0.3s ease, color 0.3s ease;
}
/* 键盘焦点 */
.ts-event__more:focus-visible,
.ts-event__tel:focus-visible,
.ts-event__card:focus-visible {
outline: 3px solid var(--ts-accent, #F26B21);
outline-offset: 2px;
}
/* 指针设备：悬停效果 */
@media (hover: hover) {
a.ts-event__more:hover {
transform: translateY(-2px);
filter: brightness(1.06);
box-shadow: 0 14px 32px -8px rgba(var(--ts-accent-rgb), 0.6);
color: var(--ts-pure);
}
.ts-event__card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px -8px rgba(11, 31, 58, 0.35);
}
.ts-event__card:hover::before {
transform: scaleY(1);
}
.ts-event__card:hover .ts-event__arrow {
transform: translateX(4px);
color: var(--ts-accent, #F26B21);
}
.ts-event__tel:hover {
color: var(--ts-accent, #F26B21);
}
}
/* 平板（<=1024px）：堆叠布局 */
@media (max-width: 1024px) {
.ts-event__layout {
grid-template-columns: 1fr;
gap: 48px;
}
.ts-event__left {
padding-top: 0;
}
.ts-event__sub {
max-width: 600px;
}
}
/* 手机（<=767px）：紧凑化 */
@media (max-width: 767px) {
.ts-event__list {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.ts-event__list li:last-child {
grid-column: auto;
}
.ts-event__card {
padding: 18px 20px;
gap: 14px;
}
.ts-event__icon {
width: 38px;
height: 38px;
padding: 8px;
}
.ts-event__index {
display: none;
}
.ts-event__title {
font-size: 16px;
}
.ts-event__desc {
font-size: 13px;
}
.ts-event__more {
padding: 12px 24px;
font-size: 15px;
}
}
/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
.ts-event__card,
.ts-event__card::before,
.ts-event__arrow,
.ts-event__more {
transition: none;
}
.ts-event__card:hover {
transform: none;
}
}
/* ==========================================================================
S6 Marketing V2.0
========================================================================== */
/* ===== S6 营销策划横幅条 V5.0 —— 白底卡片 CTA，现代极简 ===== */
.ts-mkt {
background: transparent;
padding: clamp(24px, 3vw, 36px) 0;
position: relative;
}
.ts-mkt::before,
.ts-mkt::after {
content: none;
}
.ts-mkt__inner {
max-width: var(--ts-container, 1280px);
margin: 0 auto;
padding: clamp(28px, 4vw, 44px) clamp(24px, 3vw, 40px);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(24px, 4vw, 48px);
position: relative;
background: #FFFFFF;
border-radius: var(--ts-radius, 8px);
border-left: 4px solid var(--ts-accent, #F26B21);
box-shadow: 0 1px 3px rgba(11, 31, 58, 0.06), 0 8px 24px rgba(11, 31, 58, 0.08);
}
.ts-mkt__content {
flex: 1;
min-width: 0;
}
.ts-mkt__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
/* 2026-09-23 无障碍修正（风险 9）：原 12px + --ts-accent(#F26B21) 白底对比度仅 3.04:1，未达 AA 的 4.5:1。
改为 --ts-accent-text(#C2410C) 白底 5.18:1 达标；字号 12→12.5px（保持原设计档位，仅保证 ≥12px）。
注意：装饰短横线(.ts-mkt__eyebrow::before 等)与图标仍用原橙 --ts-accent，只改文字。 */
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--ts-accent-text, #C2410C);
margin-bottom: 10px;
text-transform: uppercase;
}
.ts-mkt__eyebrow::before {
content: "";
width: 20px;
height: 3px;
background: var(--ts-accent, #F26B21);
border-radius: 2px;
}
.ts-mkt__heading {
font-size: clamp(26px, 3.2vw, 38px);
font-weight: 800;
color: var(--ts-primary, #0B1F3A);
margin: 0 0 10px 0;
letter-spacing: -0.02em;
line-height: 1.2;
}
.ts-mkt__desc {
font-size: clamp(15px, 1.5vw, 17px);
color: var(--ts-text-soft, #4B5563);
line-height: 1.7;
margin: 0;
max-width: 520px;
}
.ts-mkt__actions {
display: flex;
gap: 12px;
flex-shrink: 0;
flex-wrap: wrap;
}
.ts-mkt__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
border-radius: 999px;
transition: all 0.3s ease;
white-space: nowrap;
}
.ts-mkt__btn--solid {
background: var(--ts-accent, #F26B21);
color: #FFFFFF;
border: 2px solid var(--ts-accent, #F26B21);
box-shadow: 0 4px 14px rgba(242, 107, 33, 0.25);
}
.ts-mkt__btn--ghost {
background: transparent;
color: var(--ts-primary, #0B1F3A);
border: 2px solid var(--ts-line, #E5E7EB);
}
.ts-mkt__btn svg {
transition: transform 0.3s ease;
flex-shrink: 0;
}
@media (hover: hover) {
.ts-mkt__btn--solid:hover {
background: var(--ts-accent-dark, #E0631A);
border-color: var(--ts-accent-dark, #E0631A);
box-shadow: 0 6px 20px rgba(242, 107, 33, 0.35);
transform: translateY(-2px);
}
.ts-mkt__btn--ghost:hover {
background: var(--ts-primary, #0B1F3A);
border-color: var(--ts-primary, #0B1F3A);
color: #FFFFFF;
transform: translateY(-2px);
}
.ts-mkt__btn:hover svg {
transform: translateX(4px);
}
}
.ts-mkt__btn:focus-visible {
outline: 3px solid var(--ts-accent, #F26B21);
outline-offset: 4px;
}
.ts-mkt__btn:active {
transform: translateY(0);
}
@media (max-width: 1024px) {
.ts-mkt__inner {
flex-direction: column;
align-items: flex-start;
gap: 24px;
padding: clamp(24px, 4vw, 36px);
}
.ts-mkt__desc {
max-width: 100%;
}
}
@media (max-width: 767px) {
.ts-mkt__inner {
margin-left: 16px;
margin-right: 16px;
}
.ts-mkt__actions {
flex-direction: column;
width: 100%;
}
.ts-mkt__btn {
justify-content: center;
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.ts-mkt__btn,
.ts-mkt__btn svg {
transition: none;
}
.ts-mkt__btn:hover svg {
transform: none;
}
}
/* ==========================================================================
S8 Case Wall V5.0 - Compact Bento Grid
Smaller tiles, tighter spacing, lighter visual weight. All 6 cards equal.
========================================================================== */
.ts-case {
background: transparent;
padding: clamp(32px, 4vw, 48px) 0 clamp(24px, 3vw, 40px);
position: relative;
}
.ts-case__inner {
max-width: var(--ts-container, 1280px);
margin: 0 auto;
padding: 0 24px;
box-sizing: border-box;
}
/* Section header */
.ts-case__header {
text-align: center;
margin-bottom: clamp(32px, 4vw, 48px);
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
.ts-case__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #FFFFFF;
margin-bottom: 16px;
padding: 7px 18px;
background: var(--ts-primary, #0B1F3A);
border-radius: 999px;
}
.ts-case__eyebrow::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ts-accent, #F26B21);
flex-shrink: 0;
}
.ts-case__heading {
font-size: clamp(28px, 3.5vw, 42px);
font-weight: 800;
color: var(--ts-primary, #0B1F3A);
margin: 0 0 14px 0;
letter-spacing: -0.03em;
line-height: 1.15;
}
.ts-case__desc {
font-size: clamp(15px, 1.5vw, 17px);
color: var(--ts-text-soft, #4B5563);
line-height: 1.7;
margin: 0;
}
/* Bento Grid — 3 cols x 2 rows, all tiles equal, compact */
.ts-case__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, clamp(140px, 14vw, 180px));
gap: 16px;
}
/* Card — compact floating tile */
.ts-case__item {
position: relative;
display: block;
text-decoration: none;
overflow: hidden;
border-radius: var(--ts-radius-lg, 12px);
background: var(--ts-primary, #0B1F3A);
border: 1px solid rgba(var(--ts-primary-rgb, 11, 31, 58), 0.08);
box-shadow: 0 4px 20px rgba(var(--ts-primary-rgb, 11, 31, 58), 0.08);
transition: box-shadow 0.45s cubic-bezier(0.25, 0.8, 0.4, 1),
transform 0.45s cubic-bezier(0.25, 0.8, 0.4, 1);
}
/* All tiles equal — no featured special sizing */
.ts-case__item--featured {
grid-column: span 1;
grid-row: span 1;
}
/* Phase 1 cover card: gradient + subtle dot grid */
.ts-case__item:not(:has(.ts-case__img)) {
background: linear-gradient(135deg, #142850 0%, var(--ts-primary, #0B1F3A) 55%, #091632 100%);
}
.ts-case__item:not(:has(.ts-case__img))::before {
content: "";
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: 100% 100%, 28px 28px;
pointer-events: none;
z-index: 0;
}
/* Type-word cover — compact size */
.ts-case__placeholder {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.88);
font-size: clamp(18px, 2.2vw, 26px);
font-weight: 700;
letter-spacing: 0.12em;
}
/* No featured size difference */
.ts-case__item--featured .ts-case__placeholder {
font-size: clamp(18px, 2.2vw, 26px);
}
.ts-case__item:has(.ts-case__img) .ts-case__placeholder {
display: none;
}
.ts-case__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
filter: saturate(1.06) brightness(1.06);
transition: transform 0.65s cubic-bezier(0.25, 0.8, 0.4, 1);
}
/* Bottom gradient overlay — compact padding */
.ts-case__overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 20px;
background: linear-gradient(
to top,
rgba(var(--ts-primary-rgb, 11, 31, 58), 0.92) 0%,
rgba(var(--ts-primary-rgb, 11, 31, 58), 0.66) 24%,
rgba(var(--ts-primary-rgb, 11, 31, 58), 0.20) 52%,
transparent 72%
);
}
/* Equal overlay padding */
.ts-case__item--featured .ts-case__overlay {
padding: 20px;
}
/* Category tag — compact */
.ts-case__tag {
display: inline-flex;
align-items: center;
padding: 4px 12px;
background: var(--ts-accent, #F26B21);
color: #FFFFFF;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
border-radius: 999px;
margin-bottom: 8px;
box-shadow: 0 2px 8px rgba(var(--ts-accent-rgb, 242, 107, 33), 0.30);
}
/* Equal tag size */
.ts-case__item--featured .ts-case__tag {
font-size: 11px;
padding: 4px 12px;
}
.ts-case__overlay h3 {
font-size: clamp(15px, 1.5vw, 18px);
font-weight: 700;
color: #FFFFFF;
margin: 0 0 4px 0;
line-height: 1.3;
text-shadow: 0 1px 4px rgba(var(--ts-primary-rgb, 11, 31, 58), 0.35);
}
/* Equal heading size */
.ts-case__item--featured .ts-case__overlay h3 {
font-size: clamp(15px, 1.5vw, 18px);
margin-bottom: 4px;
}
.ts-case__location {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: rgba(255, 255, 255, 0.78);
}
.ts-case__location::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--ts-accent, #F26B21);
flex-shrink: 0;
}
/* Hover */
@media (hover: hover) {
.ts-case__item:hover {
transform: translateY(-8px);
box-shadow: 0 32px 64px -16px rgba(var(--ts-primary-rgb, 11, 31, 58), 0.18);
border-color: rgba(var(--ts-primary-rgb, 11, 31, 58), 0.14);
}
.ts-case__item:hover .ts-case__img {
transform: scale(1.08);
}
.ts-case__item:not(:has(.ts-case__img)):hover {
background: linear-gradient(135deg, #1a3470 0%, #0d2647 55%, #0a1a3a 100%);
}
.ts-case__item:not(:has(.ts-case__img)):hover::before {
background-image:
radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.14) 0%, transparent 50%),
radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
background-size: 100% 100%, 28px 28px;
}
}
.ts-case__item:focus-visible {
outline: 3px solid var(--ts-accent-dark, #E0631A);
outline-offset: 4px;
}
/* CTA */
.ts-case__footer {
text-align: center;
margin-top: clamp(32px, 4vw, 48px);
}
.ts-case__more {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
background: var(--ts-accent, #F26B21);
color: #FFFFFF;
font-size: 15px;
font-weight: 700;
text-decoration: none;
border-radius: 999px;
transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 16px rgba(var(--ts-accent-rgb, 242, 107, 33), 0.25);
}
.ts-case__more:hover {
background: var(--ts-accent-dark, #E0631A);
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(var(--ts-accent-dark-rgb, 224, 99, 26), 0.30);
}
.ts-case__more:focus-visible {
outline: 3px solid var(--ts-accent-dark, #E0631A);
outline-offset: 4px;
}
.ts-case__more svg {
transition: transform 0.3s ease;
}
.ts-case__more:hover svg {
transform: translateX(4px);
}
/* Tablet */
@media (max-width: 1024px) {
.ts-case__grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, clamp(140px, 14vw, 180px));
}
.ts-case__item--featured {
grid-column: span 1;
grid-row: span 1;
}
}
/* Mobile */
@media (max-width: 767px) {
.ts-case__grid {
grid-template-columns: 1fr;
grid-template-rows: none;
}
.ts-case__item,
.ts-case__item--featured {
grid-column: span 1;
grid-row: span 1;
height: 200px;
}
.ts-case__overlay {
padding: 18px;
}
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
.ts-case__item,
.ts-case__img,
.ts-case__more,
.ts-case__more svg {
transition: none;
}
.ts-case__item:hover {
transform: none;
}
.ts-case__item:hover .ts-case__img {
transform: none;
}
.ts-case__more:hover {
transform: none;
}
.ts-case__more:hover svg {
transform: none;
}
}
/* ==========================================================================
S10 Service Flow V2.0
========================================================================== */
/* ===== S10 服务流程 V2.0 ===== */
.ts-flow {
/* 2026-09-23 改：去掉浅灰底，改透明，与页面整体背景（白）融合。
原因：首页 S7b 位置上下都是白底区块（S7 案例墙、S7c 价格速查表 padding-top 32~48px），
原浅灰底 + 上下各 56~96px 内边距会在中间多出一道 28~48px 的灰带，视觉上像"贴上去的另一块"。
去掉背景后白卡片本身失去对照，故卡片侧改用 --ts-line 描边 + 更明显的投影来托底。
【2026-09-23 19:40 再收紧：对齐全站区块的内边距规范】
上一轮我把本区块内边距定为 clamp(40px,4.6vw,64px)（桌面取到 64px），
但全站区块实测的主流值是「上 48 / 下 40」：
.ts-case 48/40、.ts-price 48/40、.ts-s3 40/40、.ts-facts 40/40、.ts-mkt 36/36
64px 是全站最大的一档，导致两处过渡带明显偏大（老周 19:37 截图指出）：
① S7 案例墙「查看全部案例」按钮底 → 本区块 eyebrow 文字顶：桌面 202px
② 本区块 CTA 按钮底 → S7c 价格速查 eyebrow 文字顶：桌面 122px
现改齐为与 .ts-case / .ts-price 完全相同的一行（复用既有数值，未新增自定义值）：
padding: clamp(32px, 4vw, 48px) 0 clamp(24px, 3vw, 40px);
只动上下内边距，左右仍由 .ts-flow__inner 的 padding: 0 24px 负责（未改）。 */
background: transparent;
padding: clamp(32px, 4vw, 48px) 0 clamp(24px, 3vw, 40px);
}
.ts-flow__inner {
max-width: var(--ts-container);
margin: 0 auto;
padding: 0 24px;
box-sizing: border-box;
}
/* 头部居中 */
.ts-flow__head {
text-align: center;
margin-bottom: clamp(28px, 3.4vw, 44px);
}
/* eyebrow 双线 */
.ts-flow__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--ts-primary);
margin-bottom: 12px;
}
.ts-flow__eyebrow::before,
.ts-flow__eyebrow::after {
content: "";
width: 24px;
height: 2px;
background: var(--ts-accent); /* 图形色：eyebrow 装饰短横线 */
flex-shrink: 0;
}
.ts-flow__heading {
font-size: clamp(24px, 3vw, 36px);
font-weight: 800;
color: var(--ts-primary);
margin: 0 0 12px 0;
letter-spacing: -0.02em;
line-height: 1.25;
}
.ts-flow__sub {
font-size: clamp(15px, 1.5vw, 17px);
/* 比 --ts-muted #6B7280 深，压浅灰底 #F4F5F7 过 AA（#6B7280 仅 4.42:1） */
color: var(--ts-text-soft);
line-height: 1.7;
margin: 0;
}
/* 步骤容器 */
.ts-flow__steps {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(16px, 2vw, 28px);
position: relative;
}
/* 桌面连接线（穿过图标圆中心）
2026-09-23：去背景后虚线仍只在卡片之间的间隙里可见（图标圆 80px 白底 + 2px 描边遮住段内部分），
视觉与原先一致；虚线透明度由 .3 提到 .4，补偿失去浅灰底后的对比损失。 */
@media (min-width: 1025px) {
.ts-flow__steps::before {
content: "";
position: absolute;
top: 40px;
left: 12.5%;
right: 12.5%;
height: 2px;
background: repeating-linear-gradient(
90deg,
rgba(var(--ts-accent-dark-rgb), 0.4) 0,
rgba(var(--ts-accent-dark-rgb), 0.4) 6px,
transparent 6px,
transparent 12px
);
z-index: 0;
}
}
/* 单步卡片 —— 原靠浅灰底把白卡片托出来，2026-09-23 去背景后改由「描边更深 + 常驻轻投影」托底，
保证在白底上仍是可辨识的一张卡，而不是几块飘着的白。 */
.ts-flow__step {
text-align: center;
position: relative;
z-index: 1;
padding: clamp(20px, 2vw, 32px) clamp(12px, 1.5vw, 20px);
border: 1px solid #DDE1E7;
border-radius: var(--ts-radius);
background: #FFFFFF;
box-shadow: 0 2px 10px rgba(var(--ts-primary-rgb), 0.06);
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
.ts-flow__step:hover {
border-color: rgba(var(--ts-accent-dark-rgb), 0.4);
box-shadow: 0 8px 24px rgba(var(--ts-primary-rgb), 0.13);
transform: translateY(-4px);
}
}
/* 图标圆 */
.ts-flow__icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
border-radius: 50%;
background: #FFFFFF;
border: 2px solid rgba(var(--ts-accent-dark-rgb), 0.2);
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) {
.ts-flow__step:hover .ts-flow__icon {
border-color: var(--ts-accent); /* 图形色：hover 描边 */
background: rgba(var(--ts-accent-dark-rgb), 0.04);
box-shadow: 0 4px 16px rgba(var(--ts-accent-dark-rgb), 0.12);
}
}
.ts-flow__icon svg {
width: 32px;
height: 32px;
color: var(--ts-accent); /* 图形色：图标线条 */
}
/* 步骤正文区（桌面无特殊布局，手机端由 flex 子项接管；原空规则块已清理） */
/* 步骤编号 */
.ts-flow__num {
display: block;
font-size: 20px;
font-weight: 800;
color: var(--ts-accent); /* 图形色：步骤编号 */
line-height: 1;
margin-bottom: 8px;
letter-spacing: 0.05em;
}
/* 步骤标题 */
.ts-flow__title {
display: block;
font-size: clamp(16px, 1.8vw, 18px);
font-weight: 700;
color: var(--ts-primary);
line-height: 1.4;
margin: 0 0 8px 0;
}
/* 步骤描述 */
.ts-flow__desc {
font-size: 14px;
/* 2026-09-23 改：原用 --ts-muted(#6B7280) 是压浅灰底算的；现为白底，
#6B7280 在白底对比度 4.83:1（过 AA），但 14px 已偏小，统一提为 --ts-text-soft(#4B5563)
在白底 7.56:1，读起来更稳。不新增色值，用站内既有变量。 */
color: var(--ts-text-soft);
line-height: 1.7;
margin: 0;
}
/* CTA 按钮 */
.ts-flow__cta {
text-align: center;
margin-top: clamp(28px, 3.4vw, 40px);
}
.ts-flow__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 32px;
border-radius: var(--ts-radius);
font-size: 15px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
background: var(--ts-accent);
color: var(--ts-primary);
border: 1.5px solid var(--ts-accent);
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.ts-flow__btn::after {
content: "\2192";
font-size: 16px;
line-height: 1;
transition: transform 0.25s ease;
}
@media (hover: hover) {
.ts-flow__btn:hover {
background: var(--ts-accent-dark);
border-color: var(--ts-accent-dark);
color: var(--ts-primary);
transform: translateY(-2px);
}
.ts-flow__btn:hover::after {
transform: translateX(3px);
}
}
.ts-flow__btn:focus-visible {
outline: 3px solid var(--ts-accent); /* 图形色：聚焦描边 */
outline-offset: 3px;
}
/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
.ts-flow__step,
.ts-flow__icon,
.ts-flow__btn,
.ts-flow__btn::after {
transition: none;
}
.ts-flow__step:hover,
.ts-flow__btn:hover,
.ts-flow__btn:hover::after {
transform: none;
}
}
/* 平板（<=1024px）：2×2 网格，无连接线 */
@media (max-width: 1024px) {
.ts-flow__steps {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.ts-flow__steps::before {
display: none;
}
}
/* 手机（<=767px）：竖向时间轴，左线串联 */
@media (max-width: 767px) {
.ts-flow__steps {
grid-template-columns: 1fr;
gap: 0;
}
.ts-flow__step {
display: flex;
align-items: flex-start;
gap: 16px;
text-align: left;
/* 2026-09-23 改：上下节奏按 24px 收（原 28px），与 block 内边距收紧同频 */
padding: 0 0 24px 0;
border: none;
border-radius: 0;
background: none;
box-shadow: none;
}
.ts-flow__step:last-child {
padding-bottom: 0;
}
.ts-flow__step:hover {
border: none;
box-shadow: none;
transform: none;
}
.ts-flow__step:hover .ts-flow__icon {
border-color: rgba(var(--ts-accent-dark-rgb), 0.4);
background: rgba(var(--ts-accent-dark-rgb), 0.02);
box-shadow: none;
}
.ts-flow__icon {
flex-shrink: 0;
width: 56px;
height: 56px;
margin: 0;
}
.ts-flow__icon svg {
width: 24px;
height: 24px;
}
/* 竖向连接线 */
.ts-flow__step:not(:last-child)::after {
content: "";
position: absolute;
left: 27px;
top: 56px;
bottom: 0;
width: 2px;
background: repeating-linear-gradient(
180deg,
rgba(var(--ts-accent-dark-rgb), 0.4) 0,
rgba(var(--ts-accent-dark-rgb), 0.4) 6px,
transparent 6px,
transparent 12px
);
z-index: 0;
}
.ts-flow__body {
flex: 1;
padding-top: 4px;
}
.ts-flow__num {
margin-bottom: 4px;
}
.ts-flow__desc {
/* 2026-09-23：移动端本就无卡片白底（原按浅灰底加深），现区块底也为白，口径统一为白底 → --ts-text-soft 7.56:1 */
color: var(--ts-text-soft);
}
.ts-flow__btn {
width: 100%;
justify-content: center;
}
}
/* ===== S12 FAQ V10.0（9 条 —— 白底深蓝卡片网格） ===== */
/* ==========================================================================
S7b 服务流程（2026-09-23 新增到首页）
复用第 2237 行起的 .ts-flow 组件（原注释即为「S10 服务流程 V2.0」，本就是为首页预留），
本次只往首页内容里插区块，未新增任何样式。
【2026-09-23 第二轮改动：去背景 + 收紧上下间距】
现状与改法（只动本区块及其上下相邻间距，不碰其他板块的布局/配色/内容）：
1) 背景 → 透明
.ts-flow 原为 background: var(--ts-bg-soft) 浅灰底。本区块两侧邻居都是白底：
上邻 S7 案例墙 .ts-case（background: transparent，padding-bottom 24~40px）
下邻 S7c 价格速查表 .ts-price（background: transparent，padding-top 32~48px）
于是页面在 S7 与 S7c 之间凭空多出一条灰带，等于把"服务流程"单拎出来一块，
与老周要的"自然融合"相反。现改 background: transparent（见 2239 行）。
连带影响与对策（去背景不是删一行就完事，否则卡片会"飘"）：
· 卡片 .ts-flow__step 原靠灰底反衬才立得住 → 改深描边 #DDE1E7 + 常驻轻投影托底
· 圆图标 .ts-flow__icon 本就是白底，在白底上只剩描边 → 保留 2px 描边（未改）
· 正文色不用再迁就灰底 → .ts-flow__desc 由 --ts-muted 提为 --ts-text-soft
（白底 7.56:1，见 2396 行；--ts-muted 在白底也有 4.83:1，提色是为 14px 小字读着更稳）
· 桌面/手机连接虚线在浅灰底上的对比本就偏弱 → 透明度 .3 → .4 补偿
2) 上下间距收紧（原 56~96px → 40~64px）
收紧后"视觉间距"由三段相加，取值如下（桌面 1440 实测）：
上方 S7 案例墙 padding-bottom 24~40px
+ 本区块 padding-top 40~64px → 上方合计 64~104px（原 80~136px）
+ 本区块 padding-bottom 40~64px
+ 下方 S7c 价格速查表 padding-top 32~48px → 下方合计 72~112px（原 88~144px）
上下对称、互为节奏，既不挤（卡片与 H2 之间仍留 28~44px）也不脱节。
· 区块内同时微收：头部下间距 32~56 → 28~44px，CTA 上间距 32~48 → 28~40px
（纯阴影/自证需求为 0，属随外层一起收的连带量，避免"外紧内松"看着别扭）
· 未改 .ts-case / .ts-price 自身的任何数值 —— 收紧靠本区块内边距完成，
另外两块零改动，"不影响其他板块"由此保证。
========================================================================== */
/* ==========================================================================
S7c 价格速查表（2026-09-23 新增）
设计意图：把藏在折叠问答里的价格做成可见表格——带数字、成表格、有区间的内容
更容易被 AI 搜索整段引用，用户也能一眼看到价位。
数据口径：与首页 FAQ、/pricing/ 价格指南页三处必须一致，改价时三处同改。
无障碍：表头用 th scope；手机端转卡片时用 data-label 显示字段名；
正文 --ts-text-soft(#4B5563) 在白底对比度 8.6:1，达 AA。
========================================================================== */
.ts-price {
background: transparent;
padding: clamp(32px, 4vw, 48px) 0 clamp(24px, 3vw, 40px);
/* 【2026-09-23 撤销】曾在此加 border-top: 1px solid #E8EAEE，本行已删除，勿再加回。
撤销原因（老周 2026-09-23 19:22 定）：
① 加线的动机是"S7b 去背景后两块白底相连、怕糊成一片"——但那是本区块自己造的伪问题：
去背景要的就是融合，两块白底相连正是融合的正常表现，加线反而把去背景的效果抵消掉一半；
② 全站其他区块之间一律无分隔线（S7 案例墙→S7b、S7c→S8 FAQ 均靠留白分节），
只有这一处有线属全站不一致；
③ 价格速查表自带「价格速查」eyebrow + H2 标题，边界本已清晰，不依赖分隔线。
若日后又觉得两节太糊，正确解法是加大留白或调整标题层级 ——
不要再引入分隔线，它会让 S7b「与页面自然融合」的改动前功尽弃。 */
}
.ts-price__inner {
max-width: var(--ts-container, 1280px);
margin: 0 auto;
padding: 0 24px;
box-sizing: border-box;
}
.ts-price__head {
text-align: center;
margin-bottom: clamp(20px, 2.6vw, 32px);
}
.ts-price__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--ts-primary, #0B1F3A);
margin-bottom: 12px;
}
.ts-price__eyebrow::before,
.ts-price__eyebrow::after {
content: "";
width: 24px;
height: 2px;
background: var(--ts-accent); /* 图形色：装饰短横线，非文字 */
flex-shrink: 0;
}
.ts-price__heading {
font-size: clamp(24px, 3vw, 34px);
font-weight: 800;
color: var(--ts-primary, #0B1F3A);
margin: 0 0 12px 0;
letter-spacing: -0.02em;
line-height: 1.25;
}
.ts-price__sub {
max-width: 720px;
margin: 0 auto;
font-size: clamp(14px, 1.4vw, 16px);
color: var(--ts-text-soft, #4B5563);
line-height: 1.7;
}
.ts-price__table {
width: 100%;
margin: 0;
border-collapse: collapse;
border: 1px solid var(--ts-line, #E5E7EB);
font-size: 15px;
line-height: 1.6;
}
.ts-price__table thead th {
padding: 14px 16px;
background: var(--ts-bg-soft, #F4F5F7);
border-bottom: 1px solid var(--ts-line, #E5E7EB);
font-size: 14px;
font-weight: 700;
color: var(--ts-primary, #0B1F3A);
text-align: left;
white-space: nowrap;
}
.ts-price__table tbody th,
.ts-price__table tbody td {
padding: 14px 16px;
border-bottom: 1px solid var(--ts-line, #E5E7EB);
text-align: left;
vertical-align: top;
}
.ts-price__table tbody tr:last-child th,
.ts-price__table tbody tr:last-child td {
border-bottom: 0;
}
.ts-price__table tbody th {
font-weight: 700;
color: var(--ts-primary, #0B1F3A);
white-space: nowrap;
}
.ts-price__table tbody td {
color: var(--ts-text-soft, #4B5563);
}
.ts-price__table tbody td b {
font-size: 17px;
font-weight: 800;
color: var(--ts-primary, #0B1F3A);
letter-spacing: -0.01em;
}
.ts-price__note {
max-width: 900px;
margin: clamp(16px, 2vw, 24px) auto 0;
text-align: center;
font-size: 13px;
line-height: 1.8;
color: var(--ts-text-soft, #4B5563);
}
.ts-price__note a {
color: var(--ts-accent-text, #C2410C);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ============================================================================
S2b 核心事实速览（2026-09-23 新增）
定位：给 AI 抽取用的「事实块」——两列定义表（事实名 / 事实值），
视觉上复用 .ts-price 的白底 + 居中标题语言，保持全站一致。
为什么用 而不是
| 天然表达了「这是事实名」的语义。 ⚠️ 特异性提醒（本项目已知坑）：本块标题是 h2，容器内的文本节点若用类名 控制，须带 #content .entry-content 前缀，否则会被主题 `#content .entry-content h2 { margin-left:0 }` 等规则压过。 ============================================================================ */ #content .entry-content .ts-quick { background: transparent; padding: clamp(28px, 3.4vw, 42px) 0 clamp(20px, 2.6vw, 32px); } #content .entry-content .ts-quick__inner { max-width: var(--ts-container, 1280px); margin: 0 auto; padding: 0 24px; box-sizing: border-box; } #content .entry-content .ts-quick__head { text-align: center; margin-bottom: clamp(18px, 2.2vw, 28px); } #content .entry-content .ts-quick__eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--ts-primary, #0B1F3A); margin-bottom: 8px; } #content .entry-content .ts-quick__heading { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.4; font-weight: 700; color: var(--ts-primary, #0B1F3A); margin: 0 0 8px; } #content .entry-content .ts-quick__sub { font-size: 14px; line-height: 1.7; color: var(--ts-text-soft, #4B5563); margin: 0; } /* 两列定义表：左列事实名（窄、右对齐感），右列事实值（宽） */ #content .entry-content .ts-quick__table { width: 100%; max-width: 900px; margin: 0 auto; border-collapse: collapse; background: #FFFFFF; border: 1px solid #E8EAEE; border-radius: 12px; overflow: hidden; font-size: 14px; } #content .entry-content .ts-quick__table tr + tr { border-top: 1px solid #F0F2F5; } #content .entry-content .ts-quick__table th, #content .entry-content .ts-quick__table td { padding: 12px 18px; text-align: left; vertical-align: top; line-height: 1.7; } #content .entry-content .ts-quick__table th { width: 32%; font-weight: 700; color: var(--ts-primary, #0B1F3A); background: #FAFBFC; white-space: nowrap; } #content .entry-content .ts-quick__table td { color: var(--ts-text, #3D4757); } #content .entry-content .ts-quick__table td b { color: var(--ts-accent-text, #C2410C); } /* 价格时效戳：小字灰底，让「这条价格是哪个月的」在视觉上也成立 */ #content .entry-content .ts-quick__stamp { display: inline-block; margin-left: 2px; padding: 1px 7px; font-size: 11px; line-height: 1.6; color: var(--ts-text-soft, #4B5563); background: #F3F4F6; border-radius: 4px; white-space: nowrap; } #content .entry-content .ts-quick__table td a { color: var(--ts-accent-text, #C2410C); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; } #content .entry-content .ts-quick__note { max-width: 900px; margin: clamp(14px, 1.8vw, 20px) auto 0; text-align: center; font-size: 13px; line-height: 1.8; color: var(--ts-text-soft, #4B5563); } #content .entry-content .ts-quick__note a { color: var(--ts-accent-text, #C2410C); text-decoration: underline; text-underline-offset: 3px; } /* 手机端（<=767px）：两列表转上下堆叠，事实名做成小标签 */ @media (max-width: 767px) { #content .entry-content .ts-quick__table { border-radius: 10px; font-size: 13.5px; } #content .entry-content .ts-quick__table th, #content .entry-content .ts-quick__table td { display: block; width: 100%; padding: 8px 16px; white-space: normal; } #content .entry-content .ts-quick__table th { background: #FAFBFC; padding-bottom: 2px; font-size: 12.5px; letter-spacing: 0.02em; } #content .entry-content .ts-quick__table td { padding-top: 2px; } #content .entry-content .ts-quick__table tr + tr { border-top: 1px solid #E8EAEE; } } /* 手机端：表格转卡片（保留全部字段，不做横向滚动） 用 data-label 把列名显示在值前面，避免手机上左右滑表格 */ @media (max-width: 767px) { .ts-price__table thead { display: none; } .ts-price__table, .ts-price__table tbody, .ts-price__table tr, .ts-price__table th, .ts-price__table td { display: block; width: auto; } .ts-price__table { border: 0; } .ts-price__table tbody tr { margin: 0 0 12px; padding: 4px 0; background: #fff; border: 1px solid var(--ts-line, #E5E7EB); border-radius: var(--ts-radius, 8px); } .ts-price__table tbody tr:last-child { margin-bottom: 0; } .ts-price__table tbody th { padding: 12px 16px 6px; font-size: 15px; white-space: normal; } .ts-price__table tbody td { padding: 6px 16px; border-bottom: 0; } .ts-price__table tbody td:last-child { padding-bottom: 14px; } .ts-price__table tbody td::before { content: attr(data-label) "："; font-weight: 700; color: var(--ts-primary, #0B1F3A); } .ts-price__table tbody td b { font-size: 16px; } } /* 打印：去掉浅灰底省墨，文字转深色 */ @media print { .ts-price__table thead th, .ts-price__table tbody tr, .ts-price { background: #fff; } .ts-price__heading { color: #000; } .ts-price__sub, .ts-price__note, .ts-price__table tbody td { color: #444; } } .ts-faq { background: transparent; padding: 16px 0 clamp(32px, 4vw, 48px); } .ts-faq__inner { max-width: var(--ts-container, 1280px); margin: 0 auto; padding: 0 24px; box-sizing: border-box; } /* 头部 —— 居中，深蓝标题在浅灰底上 */ .ts-faq__head { text-align: center; margin-bottom: clamp(40px, 5vw, 60px); } /* 问号图标 —— 深蓝底白字大圆，与卡片同色 */ .ts-faq__pin { width: 64px; height: 64px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: var(--ts-primary); /* 图形色：深蓝底 */ border-radius: 50%; color: #FFFFFF; /* 硬编码白：图标反白 */ } .ts-faq__pin svg { width: 32px; height: 32px; color: #FFFFFF; /* 硬编码白：问号线条 */ } .ts-faq__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.15em; /* 2026-09-23 无障碍修正（风险 9）：原 --ts-accent(#F26B21) 白底 3.04:1 未达 AA → 改 --ts-accent-text 5.18:1 */ color: var(--ts-accent-text, #C2410C); margin-bottom: 12px; text-transform: uppercase; } .ts-faq__eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--ts-accent); /* 图形色：左装饰线 */ flex-shrink: 0; } .ts-faq__eyebrow::after { content: ""; width: 24px; height: 2px; background: var(--ts-accent); /* 图形色：右装饰线 */ flex-shrink: 0; } .ts-faq__heading { font-size: clamp(28px, 3.5vw, 40px); font-weight: 800; color: var(--ts-primary); margin: 0 0 16px 0; letter-spacing: -0.02em; line-height: 1.15; } .ts-faq__sub { font-size: clamp(15px, 1.5vw, 17px); /* 压白底过 AA（#6B7280 仅 4.42:1，#4B5563 约 7:1） */ color: var(--ts-text-soft, #4B5563); line-height: 1.6; margin: 0 auto; max-width: 600px; } /* FAQ 列表 —— 三列卡片网格（桌面），767px 以下回退单列 */ .ts-faq__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 32px); align-items: start; counter-reset: faq-counter; } /* 单条 FAQ —— 深蓝沉浸式卡片 + 大圆角 + 强阴影 */ .ts-faq__item { background: var(--ts-primary); /* 深蓝底：品牌主色 */ border: none; border-radius: 16px; box-shadow: 0 12px 32px rgba(var(--ts-primary-rgb, 11, 31, 58), 0.25); overflow: hidden; /* 锚点定位被固定导航遮挡时保留可读间距 */ scroll-margin-top: 120px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @media (hover: hover) { .ts-faq__item:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 20px 48px rgba(var(--ts-primary-rgb, 11, 31, 58), 0.35), 0 0 0 2px rgba(var(--ts-accent-rgb, 242, 107, 33), 0.25); } } /* 展开项跨整行（2026-09-23 加，opus-4-7 提出的布局问题，实测成立）： 三列网格 + 手风琴（同 name 组只能开一条）→ 展开的那一条会把所在列 撑高、另外两列留白（实测桌面端 423px vs 86px）。让展开项跨满整行后： ① 无留白；② 宽度变大 → 换行减少 → 高度反而比窄列展开时更低； ③ 视线落在展开项上，跨行重排不明显。 注意：跨整行的项会被 grid 自动放置到下一个完整行，因此点击靠后的条目 时会有一次重排跳动 —— 这是手风琴 + 网格的固有代价，比留白更可接受。 若老周更在意「零跳动」，改为 .ts-faq__list 桌面端单列即可。 */ #content .entry-content .ts-faq__item[open] { grid-column: 1 / -1; } .ts-faq__item[open] { /* 展开态：橙光外发光 */ box-shadow: 0 20px 48px rgba(var(--ts-primary-rgb, 11, 31, 58), 0.35), 0 0 0 2px rgba(var(--ts-accent-rgb, 242, 107, 33), 0.4); } /* 问题行 —— 白字，与深蓝底形成高对比 */ .ts-faq__q { display: flex; align-items: center; gap: 16px; padding: 24px; cursor: pointer; list-style: none; /* 移除默认三角 */ font-size: clamp(15px, 1.6vw, 17px); font-weight: 700; line-height: 1.4; color: #FFFFFF; /* 硬编码白：深蓝底上的问题文字 */ position: relative; } .ts-faq__q::-webkit-details-marker { display: none; /* Safari 移除默认三角 */ } .ts-faq__q::before { /* 编号徽章：白边框 + 透明底 + 白字 */ counter-increment: faq-counter; content: counter(faq-counter, decimal-leading-zero); display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); /* 白边框 */ color: #FFFFFF; /* 硬编码白：编号文字 */ font-size: 13px; font-weight: 700; flex-shrink: 0; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .ts-faq__item[open] .ts-faq__q::before { background: var(--ts-accent); border-color: var(--ts-accent); color: #FFFFFF; /* 硬编码白：展开编号文字 */ } .ts-faq__q:focus-visible { outline: 3px solid var(--ts-accent); /* 图形色：聚焦描边 */ outline-offset: 2px; border-radius: 16px; } .ts-faq__q > span:first-child { flex: 1; padding-right: 32px; /* 给 chevron 留空间 */ } /* Chevron 箭头 —— 白色 */ .ts-faq__icon { position: absolute; right: 24px; top: 50%; width: 12px; height: 12px; flex-shrink: 0; border-style: solid; border-width: 0 2.5px 2.5px 0; border-color: #FFFFFF; /* 硬编码白：箭头 */ transform-origin: center; /* 默认闭合：箭头向下 */ transform: translateY(-50%) rotate(45deg); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* 展开：箭头向上 */ .ts-faq__item[open] .ts-faq__icon { transform: translateY(-50%) rotate(-135deg); } /* 答案区 —— 半透明白字 + 橙色竖条 */ .ts-faq__a { padding: 0 24px 24px 72px; font-size: clamp(14px, 1.4vw, 15px); line-height: 1.7; color: rgba(255, 255, 255, 0.85); /* 白字 85% 不透明：答案正文 */ position: relative; } .ts-faq__a::before { content: ""; position: absolute; left: 36px; top: 0; bottom: 24px; width: 3px; border-radius: 2px; background: var(--ts-accent); /* 图形色：答案区左侧竖条 */ opacity: 0.8; } .ts-faq__a p { margin: 0; } /* 答案区列表与段落间距（2026-09-23 加）： FAQ 答案改为「一句结论 + bullet 要点 + 一句行动」三段结构后，答案区首次 出现 |
|---|