/* ========================================================= 门头招牌 · 发光字制作页 · 专属样式 文件：generatepress-child/signage.css 页面：/signage-led/ --------------------------------------------------------- 架构：与 contact.css / faq.css / pricing.css / cases.css / event.css / ad-design.css / ad-production.css 完全同构 —— 专属 CSS 文件 + 无条件全站入队 + 空依赖 + 零全局裸选择器。 作用域：#tsSignageMain（模块根容器 id）/ .tssg-*（类前缀） 令牌：全部声明在 #tsSignageMain 内，不污染 style.css 全站 :root 设计纪律（继承项目既有硬规则）： ① 禁用灰色背景 —— 底色只用纯白 #FFFFFF 与深墨 #0A1628 两级， 小面积暖色仅 #FFF1E5；禁用任何 R−B<15 的浅中性底。 ② 橙色 #FF6B1A 为纯强调色，总面积 ≤5%，只用于按钮/关键数字/小标记。 ③ 橙色文字统一 #B83E00（WCAG AA 达标），按钮渐变保留 #DC4E00。 ④ 间距全部取自 8px 基准令牌，无 px 字面量。 ⑤ h2/h3 居中一律带 #tsSignageMain.tssg 复合前缀（特异度 1,2,0）， 规避 style.css:111 的 margin-left:0 与 text-wrap:balance。 ⑥ 深色区块一律 1240px 版心宽（仅 hero 全宽出血）； 末段 CTA 为深色且页脚为全宽深色，故 CTA 保留底部间距。 ========================================================= */ /* ========== 设计令牌（作用域化）========== */ #tsSignageMain{ /* ---- 深色面（墨）---- */ --ts-ink-900:#050D1A; --ts-ink-800:#0A1628; /* 主深色 */ --ts-ink-700:#122340; --ts-ink-600:#1B3050; --ts-ink-rgb:10,22,40; /* ---- 强调色（暖橙）：只用于小面积 ---- */ --ts-brand:#FF6B1A; --ts-brand-600:#B83E00; /* 浅底上的橙色【文字】统一用它 */ --ts-brand-300:#FFA868; --ts-brand-rgb:255,107,26; /* ---- 中性底色：只用纯白一种 ---- */ --ts-white:#FFFFFF; --ts-paper-2:#FFF1E5; /* 小面积暖色：眉标胶囊、图标盒 */ /* ---- 浅色面文字 ---- */ --ts-ink:#0A1628; --ts-body:#3D4757; --ts-soft:#5F6B7C; --ts-muted:rgba(10,22,40,.52); /* ---- 浅色面线 ---- */ --ts-line:rgba(10,22,40,.09); --ts-line-strong:rgba(10,22,40,.16); --ts-line-warm:rgba(255,107,26,.22); /* ---- 深色面文字 ---- */ --ts-d-ink:#FFFFFF; --ts-d-body:rgba(255,255,255,.78); --ts-d-muted:rgba(255,255,255,.55); --ts-d-line:rgba(255,255,255,.14); --ts-d-card:rgba(255,255,255,.06); --ts-d-card-2:rgba(255,255,255,.09); /* ---- 字号阶梯（8 级）---- */ --ts-fs-display:clamp(34px,4.8vw,62px); /* 首屏主标题 */ --ts-fs-h1:clamp(31px,4.1vw,52px); /* 主段标题 */ --ts-fs-h2:clamp(25px,3.1vw,38px); /* 次段标题 */ --ts-fs-h3:clamp(19px,2.1vw,25px); /* 组内标题 */ --ts-fs-lead:clamp(16px,1.6vw,19px); /* 段首导语 */ --ts-fs-card:17px; --ts-fs-body:15px; --ts-fs-small:13.5px; /* ★ 2026-09-22 多视口体检：原 11.5px 低于全站 12px 可读底线； 同族页面 ad-production.css:69 已把同名令牌改为 12px 并注明「原 11.5px」， 本页仍留 11.5px 属跨页不一致。受影响：hero 眉标、服务区域卡副标。 */ --ts-fs-micro:12px; /* ---- 圆角 ---- */ --ts-radius-xs:8px; --ts-radius-sm:12px; --ts-radius:18px; --ts-radius-lg:24px; --ts-radius-xl:32px; /* ---- 容器 ---- */ --ts-container:1240px; --ts-gutter:24px; /* ---- 阴影 ---- */ --ts-shadow-sm:0 1px 2px rgba(10,22,40,.05),0 4px 12px -3px rgba(10,22,40,.07); --ts-shadow:0 2px 4px rgba(10,22,40,.04),0 12px 32px -8px rgba(10,22,40,.12); --ts-shadow-lg:0 4px 8px rgba(10,22,40,.05),0 28px 64px -16px rgba(10,22,40,.20); --ts-ease:cubic-bezier(.25,.8,.4,1); --ts-ease-out:cubic-bezier(.2,.7,.2,1); /* ---- 渐变 ---- */ --ts-grad-dark:linear-gradient(165deg,#050D1A 0%,#0A1628 46%,#122340 100%); --ts-grad-accent:linear-gradient(135deg,#FF6B1A 0%,#DC4E00 100%); --ts-grad-text:linear-gradient(135deg,#FF6B1A 0%,#FFA868 62%,#FFD2A0 100%); /* ---- 8px 基准空间梯度（1=4 … 12=96）---- 全部 spacing 必须从此处取，禁用 px 字面量。 */ --ts-space-1:4px; --ts-space-2:8px; --ts-space-3:12px; --ts-space-4:16px; --ts-space-5:20px; --ts-space-6:24px; --ts-space-7:32px; --ts-space-8:40px; --ts-space-9:48px; --ts-space-10:64px; --ts-space-11:80px; --ts-space-12:96px; /* 语义别名：保持响应式，底值取自上面梯度 */ --ts-section-y:clamp(24px,3vw,48px); /* 标准段上下内边距 */ --ts-section-y-sm:clamp(16px,2.2vw,32px); /* 紧凑段 */ --ts-head-gap:clamp(16px,2vw,28px); /* 段首标题到内容 */ --ts-card-pad:24px; --ts-card-pad-sm:16px; --ts-grid-gap:16px; --ts-stack-2:8px; --ts-stack-3:12px; --ts-stack-4:16px; /* ---- 兼容别名：旧变量名继续可用，一律指向新令牌 ---- */ --ts-accent:var(--ts-brand); --ts-accent-2:var(--ts-brand-600); --ts-accent-3:var(--ts-brand-300); --ts-accent-soft:var(--ts-paper-2); --ts-accent-rgb:var(--ts-brand-rgb); --ts-snow:var(--ts-white); --ts-sand:var(--ts-white); --ts-sand-2:var(--ts-paper-2); } /* ========== 页面级对齐：只零化左右内边距 ========== */ body.page:has(#tsSignageMain) .site-content, body.page:has(#tsSignageMain) .content-area, body.page:has(#tsSignageMain) .site-main, body.page:has(#tsSignageMain) .inside-article, body.page:has(#tsSignageMain) .entry-content{ padding-left:0; padding-right:0; max-width:100%; } /* ========== 根容器 ========== */ .tssg{ margin:0;padding:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Noto Sans SC","Microsoft YaHei","HarmonyOS Sans SC",sans-serif; color:var(--ts-body); line-height:1.75; font-size:16px; background:var(--ts-white); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .tssg img{max-width:100%;display:block;} .tssg a{color:inherit;} .tssg-inner{ max-width:var(--ts-container); margin:0 auto; padding-left:var(--ts-gutter); padding-right:var(--ts-gutter); } /* ========== 通用版式 ========== */ #tsSignageMain .tssg-eyebrow{ display:inline-flex;align-items:center;gap:var(--ts-space-2); margin:0 0 var(--ts-space-4); padding:7px 16px;border-radius:999px; background:var(--ts-paper-2);color:var(--ts-accent-2); font-size:var(--ts-fs-micro);font-weight:800;letter-spacing:.16em; line-height:1.4; } #tsSignageMain .tssg-eyebrow--dark{ background:rgba(255,255,255,.10);color:#FFB27A; } /* 十四轮（2026-09-18）：段首标题改单行显示。 实测 1440px 下「门头招牌、发光字、标识标牌三类都做」单行需 874px、 容器只有 820px，超出 54px 才折成两行，第二行只剩「都做」两字（孤行）。 同段的导语单行需 817px，同样差 37px。 修法：**加宽容器，不缩字号**（缩到 94% 才能塞下，会削弱段首标题的层级）。 900px 给最长的一条留 26px 余量。 */ #tsSignageMain .tssg-head{ max-width:900px;margin:0 auto var(--ts-head-gap); text-align:center; } #tsSignageMain .tssg-h2{ font-size:var(--ts-fs-h2); font-weight:800;line-height:1.34;letter-spacing:-.4px; color:var(--ts-ink);text-align:center; /* 十四轮：820 → 900px。真正的宽度上限在这里，不在 .tssg-head 上 （改 .tssg-head 无效，因为子元素自带 max-width 才是约束）。 */ max-width:900px;margin:0 auto var(--ts-stack-3); } #tsSignageMain .tssg-h2--lg{font-size:var(--ts-fs-h1);letter-spacing:-.6px;} #tsSignageMain .tssg-h2--sm{font-size:var(--ts-fs-h3);letter-spacing:-.2px;} #tsSignageMain .tssg-lead{ /* 十四轮：780 → 860px。S3 导语单行需 817px，原 780px 差 37px， 折行后第二行只剩「能定。」三字。 */ max-width:860px;margin:0 auto; font-size:var(--ts-fs-lead);line-height:1.85;color:var(--ts-soft); text-align:center; } /* 十四轮补：正文类孤行抑制。 用 `_scan_orphans.py` 全页扫描发现，以下正文块折行后末行只剩两三个字。 实测 `text-wrap:pretty` 对**中文**几乎无效（中文按字断行，没有「词」可搬）， 改用 `text-wrap:balance`：它把两行拉成等长，正好治「一行 43 字 + 一行 1 字」。 **不改字号、不改容器宽度**，零布局风险；不支持的浏览器按普通断行。 注意：浏览器对 balance 的行数有上限（超出则退化为普通断行）， 故仅用于卡片短描述，不用于长段落。 */ #tsSignageMain .tssg-hero__desc, #tsSignageMain .tssg-lead, #tsSignageMain .tssg-svc__text, #tsSignageMain .tssg-kind__desc, #tsSignageMain .tssg-sol__list span, #tsSignageMain .tssg-mat__item span, #tsSignageMain .tssg-why__text, #tsSignageMain .tssg-why__note, #tsSignageMain .tssg-step__text, #tsSignageMain .tssg-pcard__text, #tsSignageMain .tssg-quote__row dd, #tsSignageMain .tssg-prep__lead, #tsSignageMain .tssg-q__p, #tsSignageMain .tssg-cta__desc, #tsSignageMain .tssg-kind__note, #tsSignageMain .tssg-flow__note, #tsSignageMain .tssg-price__note, #tsSignageMain .tssg-sol__note, #tsSignageMain .tssg-area__note, #tsSignageMain .tssg-industry__note, /* ★ 2026-09-22 多视口体检：FAQ 问句为 flex:1 1 auto 的定宽项， balance 可生效。m-360 下 5 条问句末行只剩 2~3 字。 */ #tsSignageMain .tssg-q__t, #tsSignageMain .tssg-prep__tip{ text-wrap:balance; } /* ★ h2 / h3 关键属性覆盖块 style.css:111 `#content .entry-content h2,h3{margin-left:0;padding:0; border:none;background:none;position:relative;text-wrap:balance}` 特异度 (1,1,1)。 本块用 #tsSignageMain.tssg 复合前缀提到 (1,2,0)，不依赖加载顺序即可稳定取胜。 */ #tsSignageMain.tssg .tssg-head h2, #tsSignageMain.tssg .tssg-head h3, #tsSignageMain.tssg .tssg-h2, #tsSignageMain.tssg .tssg-cta h2, #tsSignageMain.tssg .tssg-flow h2, #tsSignageMain.tssg .tssg-svc__title, #tsSignageMain.tssg .tssg-kind__name, #tsSignageMain.tssg .tssg-step__title, #tsSignageMain.tssg .tssg-pcard__title, #tsSignageMain.tssg .tssg-industry__title, #tsSignageMain.tssg .tssg-q__h{ margin-left:auto; margin-right:auto; /* ★ 2026-09-22 多视口体检：原为 text-wrap:pretty。 本文件上方「正文类孤行抑制」块已实测「pretty 对中文几乎无效 （中文按字断行，没有词可搬）」并改用 balance，且 style.css:111 给 h2/h3 的本来就是 balance —— 本覆盖块写 pretty 属降级。 实测孤行：m-360 六处、m-390 五处、m-414 五处，末行只剩 2~3 字 （如「在益阳做过的门头与发 / 光字」）。改 balance 后孤行归零。 */ text-wrap:balance; } /* ========== 通用按钮（均为 ，不受父主题 button 规则影响）========== */ #tsSignageMain .tssg-btn-call{ display:inline-flex;align-items:center;justify-content:center;gap:var(--ts-space-2); padding:14px 26px;border-radius:999px; background:var(--ts-grad-accent);color:#fff; font-size:15px;font-weight:700;text-decoration:none; box-shadow:0 10px 24px -8px rgba(255,107,26,.50); transition:transform .25s var(--ts-ease),box-shadow .25s var(--ts-ease); } #tsSignageMain .tssg-btn-call:hover, #tsSignageMain .tssg-btn-call:focus{ color:#fff;transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(255,107,26,.62); } #tsSignageMain .tssg-btn-ghost{ display:inline-flex;align-items:center;justify-content:center;gap:var(--ts-space-2); padding:14px 26px;border-radius:999px; border:1px solid var(--ts-line-strong); background:transparent;color:var(--ts-ink); font-size:15px;font-weight:700;text-decoration:none; transition:border-color .25s var(--ts-ease),color .25s var(--ts-ease),transform .25s var(--ts-ease); } #tsSignageMain .tssg-btn-ghost:hover, #tsSignageMain .tssg-btn-ghost:focus{ border-color:var(--ts-brand);color:var(--ts-brand-600);transform:translateY(-2px); } #tsSignageMain .tssg-hero .tssg-btn-ghost, #tsSignageMain .tssg-cta .tssg-btn-ghost{ border-color:rgba(255,255,255,.30);color:#fff; } #tsSignageMain .tssg-hero .tssg-btn-ghost:hover, #tsSignageMain .tssg-hero .tssg-btn-ghost:focus, #tsSignageMain .tssg-cta .tssg-btn-ghost:hover, #tsSignageMain .tssg-cta .tssg-btn-ghost:focus{ border-color:var(--ts-brand-300);color:#FFC79A; } /* ========== 滚动进度条 ========== */ #tsSignageMain .tssg-progress{ position:fixed;top:0;left:0;right:0;height:3px;z-index:9998; background:rgba(10,22,40,.06);pointer-events:none; } #tsSignageMain .tssg-progress span{ display:block;height:100%;width:0; background:var(--ts-grad-accent); transition:width .12s linear; } /* ========================================================= S1 Hero（唯一全宽出血区块） ========================================================= */ #tsSignageMain .tssg-hero{ position:relative;isolation:isolate;overflow:hidden;color:#fff; 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); padding-top:clamp(48px,6vw,80px); padding-bottom:clamp(40px,4.5vw,64px); background:var(--ts-grad-dark); } #tsSignageMain .tssg-hero__bg{ position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden; } #tsSignageMain .tssg-hero__orb{ position:absolute;border-radius:50%;filter:blur(70px);opacity:.5; } #tsSignageMain .tssg-hero__orb--1{ width:520px;height:520px;top:-220px;right:-120px; background:radial-gradient(circle,rgba(255,107,26,.42),transparent 68%); animation:tssgFloat 14s var(--ts-ease) infinite; } #tsSignageMain .tssg-hero__orb--2{ width:440px;height:440px;bottom:-220px;left:-120px; background:radial-gradient(circle,rgba(56,120,255,.30),transparent 70%); animation:tssgFloat 18s var(--ts-ease) infinite reverse; } #tsSignageMain .tssg-hero__grid{ position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:56px 56px; mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 78%); -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 78%); } @keyframes tssgFloat{ 0%,100%{transform:translate3d(0,0,0);} 50%{transform:translate3d(0,32px,0);} } #tsSignageMain .tssg-hero__inner{ position:relative;z-index:1; display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(28px,4vw,56px); align-items:center; } /* 网格子项：min-width:0 防止长内容撑破 grid 轨道 */ #tsSignageMain .tssg-hero__left, #tsSignageMain .tssg-hero__right{min-width:0;} #tsSignageMain .tssg-hero__badge{ display:inline-flex;align-items:center;gap:var(--ts-space-2); margin:0 0 var(--ts-space-4); padding:7px 16px;border-radius:999px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.86); font-size:var(--ts-fs-micro);font-weight:700;letter-spacing:.12em; } #tsSignageMain .tssg-hero__badge i{ width:6px;height:6px;border-radius:50%; background:var(--ts-brand); box-shadow:0 0 0 4px rgba(255,107,26,.22); } #tsSignageMain .tssg-hero__title{ margin:0 0 var(--ts-space-4); font-size:var(--ts-fs-display); font-weight:800;line-height:1.16;letter-spacing:-1.2px;color:#fff; } #tsSignageMain .tssg-hero__title span{display:block;} #tsSignageMain .tssg-hero__title-top{line-height:1.14;} #tsSignageMain .tssg-hero__title-sub{ font-size:clamp(20px,2.4vw,30px); font-weight:700;letter-spacing:.4px; color:rgba(255,255,255,.72); margin-top:var(--ts-space-2); } #tsSignageMain .tssg-hero__title em{ font-style:normal; background:var(--ts-grad-text); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; /* 规则 3：负字距 + 渐变文字必须补偿右侧内边距，否则末字被切 */ padding-right:.10em; display:inline-block; } #tsSignageMain .tssg-hero__desc{ margin:0 0 var(--ts-space-6); max-width:620px; font-size:var(--ts-fs-lead);line-height:1.85; color:rgba(255,255,255,.74); } #tsSignageMain .tssg-hero__desc b{color:#fff;font-weight:700;} #tsSignageMain .tssg-hero__actions{ display:flex;flex-wrap:wrap;gap:var(--ts-space-3); margin-bottom:var(--ts-space-6); } /* Hero 右图 */ #tsSignageMain .tssg-hero__pics{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:var(--ts-space-3); } #tsSignageMain .tssg-hero__pic{ position:relative;margin:0;overflow:hidden; border-radius:var(--ts-radius); border:1px solid rgba(255,255,255,.14); background:var(--ts-ink-700); } #tsSignageMain .tssg-hero__pic img{ width:100%;height:100%;object-fit:cover; transition:transform .6s var(--ts-ease); } @media (hover: hover){ #tsSignageMain .tssg-hero__pic:hover img{transform:scale(1.05);} } #tsSignageMain .tssg-hero__pic figcaption{ position:absolute;left:12px;bottom:12px; padding:6px 14px;border-radius:999px; background:rgba(5,13,26,.72); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); color:#fff;font-size:12.5px;font-weight:600; } #tsSignageMain .tssg-hero__pic--main{ grid-column:span 2; aspect-ratio:16/9; } #tsSignageMain .tssg-hero__pic--sub{aspect-ratio:4/3;} #tsSignageMain .tssg-hero__pic--main figcaption{ left:14px;bottom:14px;padding:7px 16px;font-size:13px; } /* Hero 数据条 */ #tsSignageMain .tssg-quickfacts{ list-style:none;margin:0;padding:var(--ts-space-4) 0 0; display:grid;grid-template-columns:repeat(4,1fr); border-top:1px solid var(--ts-d-line); } #tsSignageMain .tssg-quickfacts li{ padding:var(--ts-space-2) var(--ts-space-4); border-left:1px solid var(--ts-d-line); } #tsSignageMain .tssg-quickfacts li:first-child{border-left:0;padding-left:0;} #tsSignageMain .tssg-quickfacts b{ display:block; font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.2; color:#fff;letter-spacing:-.5px; /* 数值项一律不折行。「09:00-18:30」折行时断点落在连字符上， 会显示成「09:00-」/「18:30」两行，看起来像两个数字。 列宽保障见下方 ≥1181px 的 2×2 规则；此处 nowrap 为兜底， 若某视口放不下会撑宽 grid 列，由 _measure_quickfacts.py 逐视口验证 avail ≥ need。 */ white-space:nowrap; } #tsSignageMain .tssg-quickfacts b em{ font-style:normal;font-size:.5em;font-weight:700; color:var(--ts-brand-300);margin-left:2px; } #tsSignageMain .tssg-quickfacts span{ display:block;margin-top:var(--ts-space-1); font-size:var(--ts-fs-small);color:rgba(255,255,255,.62); } /* ========================================================= S2 服务范围（图文卡 · 变体 D） ========================================================= */ #tsSignageMain .tssg-svc{padding:var(--ts-section-y) 0;background:var(--ts-white);} #tsSignageMain .tssg-svc__grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:var(--ts-grid-gap); } #tsSignageMain .tssg-svc__card{ display:flex;flex-direction:column;overflow:hidden; background:var(--ts-white); border:1px solid var(--ts-line); border-radius:var(--ts-radius); box-shadow:var(--ts-shadow-sm); transition:transform .3s var(--ts-ease),box-shadow .3s var(--ts-ease),border-color .3s var(--ts-ease); } @media (hover: hover){ #tsSignageMain .tssg-svc__card:hover{ transform:translateY(-4px); box-shadow:var(--ts-shadow); border-color:var(--ts-line-warm); } } #tsSignageMain .tssg-svc__pic{ position:relative;aspect-ratio:16/10;overflow:hidden; background:var(--ts-paper-2); } #tsSignageMain .tssg-svc__pic img{ width:100%;height:100%;object-fit:cover; transition:transform .6s var(--ts-ease); } @media (hover: hover){ #tsSignageMain .tssg-svc__card:hover .tssg-svc__pic img{transform:scale(1.06);} } #tsSignageMain .tssg-svc__no{ position:absolute;top:var(--ts-space-3);left:var(--ts-space-3); width:32px;height:32px;border-radius:10px; display:grid;place-items:center; background:rgba(5,13,26,.72);color:#fff; font-size:12.5px;font-weight:800; } /* 十三轮（2026-09-18）：卡片内容改居中。 依据：本页标题体系早已全居中（.tssg-head / .tssg-price__range-title / .tssg-quote__title），且 S7 制作流程、S10 服务区域的卡片本身就是 text-align:center（实测文本盒偏差 = 0）。只有 S2/S3/S4/S6/S8 的卡片还是左对齐， 全页「一半居中、一半左对齐」。此处统一为居中。 注意：.tssg-quote__row / .tssg-prep__item 是「固定宽标签列 + 内容列」的定义列表， 靠列对齐阅读，**不参与居中**，否则标签列会散开。 */ #tsSignageMain .tssg-svc__body{padding:var(--ts-card-pad);text-align:center;} #tsSignageMain .tssg-svc__title{ margin:0 0 var(--ts-stack-2); font-size:var(--ts-fs-h3);font-weight:800;line-height:1.4; letter-spacing:-.2px;color:var(--ts-ink); } #tsSignageMain .tssg-svc__text{ margin:0 0 var(--ts-stack-4); font-size:var(--ts-fs-body);line-height:1.8;color:var(--ts-soft); } #tsSignageMain .tssg-svc__tags{ list-style:none;margin:0;padding:0; display:flex;flex-wrap:wrap;gap:var(--ts-space-2); justify-content:center; /* 十三轮：chip 随卡片内容一起居中 */ } #tsSignageMain .tssg-svc__tags li{ padding:5px 12px;border-radius:999px; background:var(--ts-paper-2);color:var(--ts-brand-600); font-size:var(--ts-fs-small);font-weight:600; } /* ---- S2 尾：适用行业（细线 chip 行 · 与 .tssg-svc__tags 实心 pill 区分形态）---- */ #tsSignageMain .tssg-industry{ margin-top:var(--ts-section-y-sm); padding-top:var(--ts-section-y-sm); border-top:1px dashed var(--ts-line); text-align:center; } #tsSignageMain .tssg-industry__title{ margin:0 auto var(--ts-space-4); font-size:var(--ts-fs-h3);font-weight:800;line-height:1.45; letter-spacing:-.2px;color:var(--ts-ink); /* ★ 2026-09-22：同 FIX-1，中文标题用 balance（pretty 对中文无效） */ text-wrap:balance; } #tsSignageMain .tssg-industry__list{ list-style:none;margin:0;padding:0; display:flex;flex-wrap:wrap;justify-content:center; gap:var(--ts-space-2) var(--ts-space-3); } #tsSignageMain .tssg-industry__list li{ padding:6px 14px;border-radius:var(--ts-space-1); background:var(--ts-white); border:1px solid var(--ts-line); font-size:var(--ts-fs-small);font-weight:600; color:var(--ts-ink-700);line-height:1.5; transition:border-color .22s ease,color .22s ease; } @media (hover: hover){ #tsSignageMain .tssg-industry__list li:hover{ border-color:var(--ts-brand); color:var(--ts-brand-600); } } /* ★ 窄版心「注记块」家族宽度统一为 780px（勿单独改窄/改宽）： .tssg-kind__note / .tssg-flow__note / .tssg-price__note / .tssg-sol__note / .tssg-area__note / .tssg-industry__note。 本块原为 760px，比家族内其余 5 处窄 20px → 与直接同构的 .tssg-area__note （同为 780px + text-align:center + 零 padding）出现左右各 10px 边缘错位，已归一。 改宽会破坏与价格表 / 报价单 / 准备清单的左右边缘对齐。 */ #tsSignageMain .tssg-industry__note{ margin:var(--ts-space-4) auto 0; max-width:780px; font-size:var(--ts-fs-small);line-height:1.85; color:var(--ts-soft);text-align:center; } /* ========================================================= S3 发光字种类（左图标横排卡 · 变体 B） ========================================================= */ #tsSignageMain .tssg-kind{ padding:var(--ts-section-y) 0; background:var(--ts-white); border-top:1px solid var(--ts-line); } #tsSignageMain .tssg-kind__grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:var(--ts-grid-gap); } /* 十三轮：由「图标在左 + 文字在右」的横排改为「图标在上 + 内容居中」。 横排下居中文字会与左侧图标错位，必须一起改成纵向才成立。 */ #tsSignageMain .tssg-kind__card{ display:flex;flex-direction:column;align-items:center; gap:var(--ts-space-3); text-align:center; padding:var(--ts-card-pad); background:var(--ts-white); border:1px solid var(--ts-line); border-radius:var(--ts-radius); transition:transform .3s var(--ts-ease),box-shadow .3s var(--ts-ease),border-color .3s var(--ts-ease); } @media (hover: hover){ #tsSignageMain .tssg-kind__card:hover{ transform:translateY(-3px); box-shadow:var(--ts-shadow-sm); border-color:var(--ts-line-warm); } } #tsSignageMain .tssg-kind__ico{ /* 十三轮：改纵向布局后 flex-basis 作用在高度上，交给 width/height 控制更直观 */ flex:0 0 auto;width:48px;height:48px;border-radius:14px; display:grid;place-items:center; background:var(--ts-paper-2);color:var(--ts-brand-600); } #tsSignageMain .tssg-kind__ico svg{width:22px;height:22px;} #tsSignageMain .tssg-kind__main{flex:0 0 auto;width:100%;min-width:0;} #tsSignageMain .tssg-kind__name{ margin:0 0 var(--ts-space-2); font-size:var(--ts-fs-card);font-weight:800;line-height:1.45; color:var(--ts-ink); } #tsSignageMain .tssg-kind__desc{ margin:0 0 var(--ts-space-3); font-size:var(--ts-fs-body);line-height:1.75;color:var(--ts-soft); } #tsSignageMain .tssg-kind__use{ display:inline-block; padding:5px 12px;border-radius:999px; background:var(--ts-paper-2);color:var(--ts-brand-600); font-size:var(--ts-fs-small);font-weight:600; } #tsSignageMain .tssg-kind__note{ max-width:780px;margin:var(--ts-space-6) auto 0; padding:var(--ts-card-pad-sm) var(--ts-card-pad); border-left:3px solid var(--ts-brand); background:var(--ts-paper-2);border-radius:0 var(--ts-radius-sm) var(--ts-radius-sm) 0; font-size:var(--ts-fs-body);line-height:1.8;color:var(--ts-ink); } /* ========================================================= S4 案例展示（图片墙 · 突出）★ ========================================================= */ #tsSignageMain .tssg-case{ padding:var(--ts-section-y) 0; background:var(--ts-white); border-top:1px solid var(--ts-line); } #tsSignageMain .tssg-case__grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:clamp(140px,15vw,200px); gap:var(--ts-grid-gap); } #tsSignageMain .tssg-case__item{ position:relative;margin:0;overflow:hidden; border-radius:var(--ts-radius); background:var(--ts-paper-2); cursor:pointer; } #tsSignageMain .tssg-case__item--lg{ grid-column:span 2; grid-row:span 2; } #tsSignageMain .tssg-case__item img{ width:100%;height:100%;object-fit:cover; transition:transform .7s var(--ts-ease); } #tsSignageMain .tssg-case__item:hover img, #tsSignageMain .tssg-case__item:focus-within img{transform:scale(1.07);} #tsSignageMain .tssg-case__veil{ position:absolute;inset:0; background:linear-gradient(to top,rgba(5,13,26,.80) 0%,rgba(5,13,26,.28) 42%,transparent 72%); opacity:.92; transition:opacity .35s var(--ts-ease); } #tsSignageMain .tssg-case__item:hover .tssg-case__veil, #tsSignageMain .tssg-case__item:focus-within .tssg-case__veil{opacity:1;} #tsSignageMain .tssg-case__cap{ position:absolute;left:var(--ts-space-4);right:var(--ts-space-4);bottom:var(--ts-space-4); display:flex;align-items:center;flex-wrap:wrap;gap:var(--ts-space-2); } #tsSignageMain .tssg-case__tag{ padding:6px 14px;border-radius:999px; background:var(--ts-grad-accent);color:#fff; font-size:var(--ts-fs-small);font-weight:700; } #tsSignageMain .tssg-case__loc{ padding:6px 12px;border-radius:999px; background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); color:#fff;font-size:var(--ts-fs-small);font-weight:600; } #tsSignageMain .tssg-case__item--lg .tssg-case__cap{ left:var(--ts-space-6);right:var(--ts-space-6);bottom:var(--ts-space-6); } #tsSignageMain .tssg-case__item--lg .tssg-case__tag{ padding:8px 18px;font-size:15px; } /* 案例卡：第三行「内容/做法」，独占一行 */ #tsSignageMain .tssg-case__way{ flex:0 0 100%; font-size:var(--ts-fs-micro); color:rgba(255,255,255,.72); line-height:1.6; } #tsSignageMain .tssg-case__item--lg .tssg-case__way{font-size:var(--ts-fs-small);} /* ========================================================= S6 为什么选天舜 ========================================================= */ #tsSignageMain .tssg-why{ padding:var(--ts-section-y) 0; background:var(--ts-white); border-top:1px solid var(--ts-line); } #tsSignageMain .tssg-why__grid{ display:grid;grid-template-columns:repeat(4,1fr); gap:var(--ts-grid-gap); } #tsSignageMain .tssg-why__card{ padding:var(--ts-card-pad); background:var(--ts-white); border:1px solid var(--ts-line); border-radius:var(--ts-radius); text-align:center; /* 十三轮 */ transition:border-color .3s var(--ts-ease),transform .3s var(--ts-ease),box-shadow .3s var(--ts-ease); } @media (hover: hover){ #tsSignageMain .tssg-why__card:hover{ border-color:var(--ts-line-warm); transform:translateY(-4px); box-shadow:var(--ts-shadow-sm); } } #tsSignageMain .tssg-why__num{ display:block;margin-bottom:var(--ts-space-3); font-size:34px;font-weight:800;line-height:1;letter-spacing:-.02em; color:transparent; -webkit-text-stroke:1.4px var(--ts-brand); } #tsSignageMain .tssg-why__title{ margin:0 0 var(--ts-space-2); font-size:var(--ts-fs-card);font-weight:800;line-height:1.45; color:var(--ts-ink); } #tsSignageMain .tssg-why__text{ margin:0; font-size:var(--ts-fs-small);line-height:1.8;color:var(--ts-soft); } /* ★ 本块归入「注记块家族」：宽度必须 780px，与 .tssg-area__note 完全同构 （780px + text-align:center + 零 padding + 卡片网格之后）。 改窄或改宽都会破坏与价格表 / 报价单 / 服务区域注记的左右边缘对齐。 八轮新增，用途：给出统一社会信用代码，让「实体公司」这一信任点可自行核验。 */ #tsSignageMain .tssg-why__note{ max-width:780px;margin:var(--ts-space-5) auto 0; text-align:center; font-size:var(--ts-fs-small);line-height:1.85;color:var(--ts-soft); } /* 十轮补：注记内的「百度百科查看中标详情」外链。 注记是弱化灰调，链接须与 .tssg-price__note a 保持同一套观感 （品牌橙文字 + 下划线），否则可核验入口会被整段淹没。 */ #tsSignageMain .tssg-why__note a{ color:var(--ts-brand-600);font-weight:700;text-decoration:underline; text-underline-offset:3px; } #tsSignageMain .tssg-case__tip{ margin:var(--ts-space-5) 0 0; text-align:center; font-size:var(--ts-fs-small);color:var(--ts-muted); } /* ========================================================= S5 制作流程（白底 · 横向时间轴 · 变体 A） ========================================================= */ /* 十四轮改版（2026-09-18）：本段原为深墨底，现改白底。 理由：设计系统规定「背景节奏：纯白 + 深墨 + **2 个深色锚点**（hero / cta）」， 而本段是第 3 个深色段（hero / flow / cta），与规范冲突。 改白底后全页深色只剩 hero 与 cta 两处，节奏回到「深—白—深」。 代价：本段上下（S4 门头方案 / S6 价格）都是白底，需加分隔线区分， 故补 border-top（与 .tssg-area 同一手法）。 */ #tsSignageMain .tssg-flow{ padding:var(--ts-section-y) 0; background:var(--ts-white); border-top:1px solid var(--ts-line); } #tsSignageMain .tssg-flow .tssg-h2, #tsSignageMain .tssg-flow h2{color:var(--ts-ink);} #tsSignageMain .tssg-flow .tssg-lead{color:var(--ts-soft);} #tsSignageMain .tssg-flow__steps{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(6,1fr); gap:var(--ts-grid-gap); position:relative; } /* 连接线：画在容器层，保证每条恒定，不随单行文字漂移 */ #tsSignageMain .tssg-flow__steps::before{ content:""; position:absolute;top:23px;left:4%;right:4%;height:1px; background:linear-gradient(90deg,transparent,var(--ts-line-strong) 12%,var(--ts-line-strong) 88%,transparent); } #tsSignageMain .tssg-step{ position:relative; padding:var(--ts-space-6) var(--ts-space-3) 0; text-align:center; } #tsSignageMain .tssg-step__no{ position:relative;z-index:1; display:grid;place-items:center; width:46px;height:46px;margin:0 auto var(--ts-space-4); border-radius:50%; /* 白底上仍用深墨实心圆：与 --ts-ink 同源，对比度足够且不引入新色。 补一圈柔和外环——深色圆直接落在纯白上偏硬，加环后与时间轴线的过渡更自然。 */ background:var(--ts-ink-800); border:1px solid transparent; box-shadow:0 0 0 6px var(--ts-line); color:#fff;font-size:14px;font-weight:800;letter-spacing:.02em; transition:background .3s var(--ts-ease),border-color .3s var(--ts-ease),transform .3s var(--ts-ease); } @media (hover: hover){ #tsSignageMain .tssg-step:hover .tssg-step__no{ background:var(--ts-grad-accent); border-color:transparent; box-shadow:0 0 0 6px var(--ts-line-warm); transform:scale(1.08); } } #tsSignageMain .tssg-step__title{ margin:0 0 var(--ts-space-2); font-size:var(--ts-fs-card);font-weight:800;line-height:1.5;color:var(--ts-ink); } #tsSignageMain .tssg-step__text{ margin:0; font-size:var(--ts-fs-small);line-height:1.75; color:var(--ts-soft); } #tsSignageMain .tssg-flow__note{ /* 十四轮：本注记受「注记块家族 780px」硬约束（改宽会破坏与价格表 / 报价单 / 服务区域注记的左右边缘对齐），所以宽度只能从盒内腾： 横向内边距 24px → 12px，正文 15px → 13.5px（--ts-fs-small， 与同族的 .tssg-why__note 同一档）。 实测：文本可用宽 732 → 756px，单行所需 810 → 756px。 但 756 对 756 是零余量，故字号再降到 13px：单行所需 728px，余量 28px（约 2 字）。 中文为全角，每字恰为 1em，宽度可精确预测，28px 余量足够容纳日后微调。 另两个选择是「把盒子加宽到 860px」（破坏家族对齐）或「文案砍掉 5 个字」， 均未采用。 */ max-width:780px;margin:var(--ts-space-8) auto 0; padding:var(--ts-card-pad-sm) var(--ts-space-3); /* 十四轮改版：本段转白底，注记随之换成浅色口径 （虚线边框 + 透明底 + --ts-soft，与同族的 .tssg-price__note 一致） */ border:1px dashed var(--ts-line-strong); border-radius:var(--ts-radius-sm); background:transparent; font-size:13px;line-height:1.8; color:var(--ts-soft);text-align:center; } /* ========================================================= S6 价格与工期 ========================================================= */ #tsSignageMain .tssg-price{ padding:var(--ts-section-y) 0; background:var(--ts-white); } #tsSignageMain .tssg-price__grid{ display:grid;grid-template-columns:repeat(3,1fr); gap:var(--ts-grid-gap); } #tsSignageMain .tssg-pcard{ padding:var(--ts-card-pad); background:var(--ts-white); border:1px solid var(--ts-line); border-radius:var(--ts-radius); box-shadow:var(--ts-shadow-sm); text-align:center; /* 十三轮 */ } #tsSignageMain .tssg-pcard__ico{ display:grid;place-items:center; /* 十三轮：44px 方块要随文字一起居中，margin 左右须为 auto（原为纯 margin-bottom） */ width:44px;height:44px;margin:0 auto var(--ts-space-4); border-radius:var(--ts-radius-sm); background:var(--ts-paper-2);color:var(--ts-brand-600); font-size:15px;font-weight:800; } #tsSignageMain .tssg-pcard__title{ margin:0 0 var(--ts-stack-2); font-size:var(--ts-fs-card);font-weight:800;line-height:1.5;color:var(--ts-ink); } #tsSignageMain .tssg-pcard__text{ margin:0; font-size:var(--ts-fs-body);line-height:1.8;color:var(--ts-soft); } #tsSignageMain .tssg-price__note{ max-width:780px;margin:var(--ts-space-6) auto 0; padding:var(--ts-card-pad); border:1px dashed var(--ts-line-strong); border-radius:var(--ts-radius); font-size:var(--ts-fs-body);line-height:1.85;color:var(--ts-soft); text-align:center; } #tsSignageMain .tssg-price__note a{ color:var(--ts-brand-600);font-weight:700;text-decoration:underline; text-underline-offset:3px; } /* 十轮补：价格注记里的「2026 年 9 月核对」等时间/范围限定词。 注记正文是弱化灰调，限定词需回深一档并加粗，否则时效信息会被整段淹没。 */ #tsSignageMain .tssg-price__note b{ color:var(--ts-ink-800);font-weight:700; } /* ========================================================= S7 常见问题（手风琴 · 变体 C） ========================================================= */ #tsSignageMain .tssg-faq{ padding:var(--ts-section-y) 0; background:var(--ts-white); border-top:1px solid var(--ts-line); } #tsSignageMain .tssg-faq__list{ max-width:860px;margin:0 auto; border-top:1px solid var(--ts-line); } #tsSignageMain .tssg-q{border-bottom:1px solid var(--ts-line);} #tsSignageMain .tssg-q__h{margin:0;} /* ★