/** * Theme Name: TMC LAB 迈科检测 * Theme URI: https://www.tmc-lab.com/ * Description: 高转化营销官网主题 —— 首屏资质前置、按行业服务方案、案例实证、全局转化入口与内容营销专栏。含响应式布局与询盘来源埋点。 * Author: TMC LAB * Version: 3.10.41 * Tags: corporate, responsive, clean */ /* ========================================================================== 0. 设计变量 风格对标国际认证机构：白底为主、深蓝压场、红色点睛，克制留白 + 宽敞栅格 ========================================================================== */ :root { --red: #6c8650; --red-d: #5a7042; --red-l: #eef3e8; --navy: #3f503b; --navy-2: #4d6150; --navy-3: #5d7259; --ink: #2c3a2e; --ink-2: #4a5a48; --muted: #6b7b66; --muted-2: #62715D; --muted-3: #5A6756; --bg: #FFFFFF; --bg-soft: #f4f7f2; --bg-soft-2: #e8ede4; /* 浅绿自然色系：参考中国传统色卡「无心绿 / 兰苕 / 碧滋 / 葱倩 / 青玉案 / 雀梅 / 油绿 / 螺青」 */ --surface-1: #f8faf6; --surface-2: #eef3ea; --surface-3: #e3ebe0; --surface-line: #d3ddd0; --line: #e1e8de; --line-2: #cdd6c9; --gold: #a8b092; --green: #6c8650; /* :root 基线色板（自然绿）；html[data-theme] 按套覆盖，站点默认 = sgs 橙灰 */ --acc-tint: #c9d4b8; /* 深色底上的浅强调色文字 */ --dot: #9dbd7f; /* 圆点标记 */ --dot-ring: rgba(108, 134, 80, .22); /* 首页 hero 是深底大图，遮罩与「标题高亮笔」原来是**写死的绿色** rgba(63,80,59) 与 rgba(108,134,80) —— 那样换配色时 hero 会串色。抽成两个 RGB 三元组， 用 rgba(var(--x), .82) 复用。默认值 = 原来的绿，所以其余 4 套配色输出完全不变； 需要按主题调的地方（如莱茵蓝）在自己的 html[data-theme] 块里覆盖这两行即可。 */ --deep-rgb: 63, 80, 59; /* hero 遮罩 / 深色小块的底色 */ --acc-rgb: 108, 134, 80; /* 标题高亮笔 / 脉冲环 */ --grad-hero: linear-gradient(168deg, #FAFCFE 0%, #F1F7FC 42%, #E6EFF8 100%); --grad-page: linear-gradient(152deg, #F9FCFE 0%, #EDF5FB 48%, #E2EDF7 100%); --scrim-mid: rgba(243, 248, 253, .78); --scrim-end: rgba(230, 240, 249, .84); --hl-soft: rgba(226, 35, 26, .14); /* 标题高亮笔 */ --hl-faint: rgba(226, 35, 26, .03); --acc-sh: rgba(226, 35, 26, .24); /* 主按钮投影 */ --acc-sh-h: rgba(226, 35, 26, .3); --acc-92: rgba(226, 35, 26, .92); --acc-45: rgba(226, 35, 26, .45); --acc-30: rgba(226, 35, 26, .3); --acc-10: rgba(226, 35, 26, .1); --acc-0: rgba(226, 35, 26, 0); --r: 12px; --r-sm: 8px; --r-lg: 18px; --shadow-sm: 0 2px 8px rgba(16, 38, 58, .05); --shadow: 0 8px 30px rgba(16, 38, 58, .08); --shadow-lg: 0 20px 60px rgba(16, 38, 58, .14); --head-h: 68px; --topbar-h: 38px; --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif; --font-num: "DIN Alternate", "Barlow", "Helvetica Neue", Arial, sans-serif; /* 门户式标题字（对标 sina）：雅黑/黑体优先，Windows 下即微软雅黑； 放 SimSun 兜底是新浪列表正文的原始字面，只在缺雅黑/黑体的系统才命中。 */ --font-portal: "Microsoft YaHei", "微软雅黑", SimHei, "黑体", "PingFang SC", "Hiragino Sans GB", SimSun, "宋体", Arial, sans-serif; } /* ========================================================================== 0.1 配色主题（右上角切换 · localStorage 记忆） 网站配色 7 套：自然绿 / 活力橙灰(默认) / 暖阳琥珀 / 莱茵蓝 / 黑白灰 / 优雅紫金 / 中国红 活力橙灰：橙 #FF6600 + 灰 #999999 暖阳琥珀：深金 #8F6A00 + 亮金 #F2B705（2026-09-13 加，替代已下线的「经典蓝白」） 莱茵蓝　：蓝 #0071B9 + 浅蓝 #BDCEE9（照 TÜV 官网实测配色，2026-09-12 加） 优雅紫金：紫 #AD84C6 + 金黄 #FFC000（取自参考色板，深紫 #8E66B4 做主按钮） 中国红　：正红 #C8102E + 古铜金 #B08D3F（2026-09-13 加，深色带 #4A2028） ⚠️ 2026-09-13 起「经典蓝白 / tuv」已下线（lemon 指定）。但 logo-tuv.png 与 **必须保留** —— 莱茵蓝复用那枚蓝色 logo，删了页头页脚就没 logo 了。 ⚠️ 主色 --red 会被大量用作「白字底色」（按钮/角标/分页），所以**不能取亮黄**： #F2B705 配白字只有 1.9:1。这里取深金 #8F6A00 = 4.96:1，亮金只做装饰点缀。 ⚠️ 加一套配色要**同时改 5 个文件**，漏一处就是「切过去没反应」或「刷新后弹回」： ① style.css html[data-theme="xxx"] 变量块 + .sw--xxx 色板圆点 +（可选）logo 规则 ①b header.php/footer.php 新增主题的 （不加法：沿用绿色 default logo） ② header.php 内联预应用脚本的 K 数组（防刷新闪烁）+ 切换弹层里的一项 ③ assets/js/tmc-site.js VALID 数组（不在这里 = 点了不生效） ④ 升 TMC_THEME_VER / style.css 的 Version （现成脚本 D:/tmcwp/patch_crimson.py 一次改齐，下套主题复制它改色值） ========================================================================== */ /* --- SGS 橙灰 ----------------------------------------------------------- */ html[data-theme="sgs"] { --red: #FF6600; --red-d: #D95400; --red-l: #FFF1E4; --navy: #33322E; --navy-2: #4A4945; --navy-3: #5F5E59; --ink: #2B2A27; --ink-2: #4C4B46; --muted: #6E6D67; --muted-2: #6E6D66; --muted-3: #65645E; --bg: #FFFFFF; --bg-soft: #F6F5F2; --bg-soft-2: #ECEAE4; --surface-1: #FAF9F6; --surface-2: #F1EFE9; --surface-3: #E7E4DC; --surface-line: #D8D4CA; --line: #E5E2D9; --line-2: #CFCBC0; --gold: #999999; --green: #5E8A46; --acc-tint: #FFD9B3; --dot: #FF6600; --dot-ring: rgba(255, 102, 0, .22); --grad-hero: linear-gradient(168deg, #FDFBF8 0%, #FBF3EA 42%, #F7E9D8 100%); --grad-page: linear-gradient(152deg, #FDFBF7 0%, #FAF1E6 48%, #F5E7D3 100%); --scrim-mid: rgba(251, 243, 234, .8); --scrim-end: rgba(247, 233, 216, .85); --hl-soft: rgba(255, 102, 0, .16); --hl-faint: rgba(255, 102, 0, .04); --acc-sh: rgba(255, 102, 0, .26); --acc-sh-h: rgba(255, 102, 0, .34); --acc-92: rgba(255, 102, 0, .92); --acc-45: rgba(255, 102, 0, .45); --acc-30: rgba(255, 102, 0, .3); --acc-10: rgba(255, 102, 0, .1); --acc-0: rgba(255, 102, 0, 0); } /* --- 暖阳琥珀（2026-09-13 新增，顶替「经典蓝白」）-------------------------- 主色：深金 #8F6A00 —— ⚠️ 不是亮黄。--red 全站被当「白字底色」用（主按钮、 角标、分页、筛选激活态），亮黄 #F2B705 配白字只有 1.9:1 直接看不清； #8F6A00 配白字 4.96:1，过 WCAG AA。亮金只留给 --gold / 圆点做装饰。 深色带 --navy 取 #453506（深棕金）：白字对比度 11.9:1，--acc-tint 8.58:1 面是暖奶油色（#FDFAF1 / #FAF3E0），整体是「米黄 + 金」而不是刺眼的荧光黄。 ⚠️ --deep-rgb / --acc-rgb 一并覆盖成金色三元组 —— 不覆盖的话 hero 遮罩 / 标题高亮笔 / 深色小色块会静默回落 :root 的绿色（63, 80, 59）。 ------------------------------------------------------------------------ */ html[data-theme="amber"] { --red: #8F6A00; --red-d: #6F5200; --red-l: #FBF0D5; --navy: #453506; --navy-2: #5C4808; --navy-3: #74600F; /* hero 遮罩 / 标题高亮笔 / 深色小色块：:root 默认是绿，这里合成品牌金 */ --deep-rgb: 69, 53, 6; /* = #453506 */ --acc-rgb: 143, 106, 0; /* = #8F6A00 */ --ink: #2F2A1B; --ink-2: #4E4632; --muted: #776C55; --muted-2: #746C58; --muted-3: #6D634E; --bg: #FFFFFF; --bg-soft: #FDFAF1; --bg-soft-2: #FAF3E0; --surface-1: #FEFCF6; --surface-2: #FBF6E9; --surface-3: #F5EDD8; --surface-line: #E3D6B4; --line: #F0E8D3; --line-2: #DED0AC; --gold: #F2B705; --green: #5E8A46; --acc-tint: #F0D9A0; /* 深色带上的浅金文字：对 #453506 = 8.58:1 */ --dot: #8F6A00; --dot-ring: rgba(143, 106, 0, .22); --grad-hero: linear-gradient(168deg, #FFFDF7 0%, #FDF6E4 42%, #FAEFD2 100%); --grad-page: linear-gradient(152deg, #FFFDF6 0%, #FCF5E2 48%, #F8EDCF 100%); --scrim-mid: rgba(253, 246, 228, .8); --scrim-end: rgba(250, 239, 210, .85); --hl-soft: rgba(143, 106, 0, .16); --hl-faint: rgba(143, 106, 0, .04); --acc-sh: rgba(143, 106, 0, .26); --acc-sh-h: rgba(143, 106, 0, .34); --acc-92: rgba(143, 106, 0, .92); --acc-45: rgba(143, 106, 0, .45); --acc-30: rgba(143, 106, 0, .3); --acc-10: rgba(143, 106, 0, .1); --acc-0: rgba(143, 106, 0, 0); } /* --- 莱茵蓝（TÜV 官网配色，2026-09-12 新增）------------------------------ 来源：直接抓 https://www.tuv.com/greater-china/cn/ 与其主样式表 /system-media-files/css/style.css 统计出的真实用色（不是目测）： #0071B9 ×415 主品牌蓝：按钮、链接、激活态、边框、标题 #265D7F ×14 深一档的蓝：按钮 hover / 深色压场 #E6F1F8 ×31 极浅蓝：信息框、tab hover、卡片底 #BDCEE9 ×36 浅蓝：禁用态、虚线框 #F2F2F2 ×98 标志性浅灰底（分区色带就是这个） #E6E6E6 / #D9D9D9 / #E1E5E8 分隔线与浅面 #333333 深灰（gunmetal）：正文与深色按钮 #565656 / #999999 次级与更浅的文字灰 #D20033 红 —— **只用于表单报错**，不是品牌强调色，别拿来当主色 #50B400 绿 —— 成功态（此处按文字对比度压深成 #357A0C） ⚠️ 和 2026-09-13 下线的那套「经典蓝白 / tuv」不是一回事：旧 tuv 是「蓝白晕染」 （navy 深蓝 + 大量蓝调面），这套是照官网实测做的「白 + 中性灰 + 蓝点睛」—— 面几乎全是灰白，蓝只出现在强调处。tuv 已删，但 logo 仍复用它的蓝色那枚。 ⚠️ 深色带 --navy 取 #265D7F（官网最深的品牌蓝）：白字对比度 7.11:1。 想再压深就同步回算 --navy-2 / --navy-3 与 --acc-tint，别只改一个。 ------------------------------------------------------------------------ */ html[data-theme="rhein"] { --red: #0071B9; --red-d: #265D7F; --red-l: #E6F1F8; --navy: #265D7F; --navy-2: #356F93; --navy-3: #4C85A8; /* hero 遮罩 / 标题高亮笔 / 深色小色块：:root 里默认是绿，这里合成品牌蓝 */ --deep-rgb: 38, 93, 127; /* = #265D7F */ --acc-rgb: 0, 113, 185; /* = #0071B9 */ --ink: #333333; --ink-2: #565656; --muted: #767676; --muted-2: #6D6D6D; --muted-3: #636363; --bg: #FFFFFF; --bg-soft: #F2F2F2; --bg-soft-2: #E6E6E6; --surface-1: #F8F8F8; --surface-2: #F2F2F2; --surface-3: #E6E6E6; --surface-line: #D9D9D9; --line: #E1E5E8; --line-2: #D0D0D0; --gold: #5A8DB4; --green: #357A0C; --acc-tint: #C6D8EE; /* 深色带上的浅蓝文字：对 #265D7F = 4.89:1 */ --dot: #0071B9; --dot-ring: rgba(0, 113, 185, .22); --grad-hero: linear-gradient(168deg, #FFFFFF 0%, #F4F8FB 42%, #E8F0F6 100%); --grad-page: linear-gradient(152deg, #FFFFFF 0%, #F2F7FA 48%, #E5EEF5 100%); --scrim-mid: rgba(244, 248, 251, .8); --scrim-end: rgba(232, 240, 246, .85); --hl-soft: rgba(0, 113, 185, .16); --hl-faint: rgba(0, 113, 185, .04); --acc-sh: rgba(0, 113, 185, .26); --acc-sh-h: rgba(0, 113, 185, .34); --acc-92: rgba(0, 113, 185, .92); --acc-45: rgba(0, 113, 185, .45); --acc-30: rgba(0, 113, 185, .3); --acc-10: rgba(0, 113, 185, .1); --acc-0: rgba(0, 113, 185, 0); } /* --- 黑白灰 ------------------------------------------------------------- */ html[data-theme="mono"] { --red: #1C1C1C; --red-d: #000000; --red-l: #EFEFEF; --navy: #111111; --navy-2: #2E2E2E; --navy-3: #454545; --ink: #1A1A1A; --ink-2: #3C3C3C; --muted: #6A6A6A; --muted-2: #6D6D6D; --muted-3: #636363; --bg: #FFFFFF; --bg-soft: #F5F5F5; --bg-soft-2: #EAEAEA; --surface-1: #FAFAFA; --surface-2: #F1F1F1; --surface-3: #E5E5E5; --surface-line: #D4D4D4; --line: #E3E3E3; --line-2: #CCCCCC; --gold: #8C8C8C; --green: #3D3D3D; --acc-tint: #D6D6D6; --dot: #1C1C1C; --dot-ring: rgba(0, 0, 0, .18); --grad-hero: linear-gradient(168deg, #FDFDFD 0%, #F5F5F5 42%, #EBEBEB 100%); --grad-page: linear-gradient(152deg, #FDFDFD 0%, #F4F4F4 48%, #E9E9E9 100%); --scrim-mid: rgba(245, 245, 245, .8); --scrim-end: rgba(235, 235, 235, .85); --hl-soft: rgba(0, 0, 0, .12); --hl-faint: rgba(0, 0, 0, .03); --acc-sh: rgba(0, 0, 0, .22); --acc-sh-h: rgba(0, 0, 0, .3); --acc-92: rgba(28, 28, 28, .92); --acc-45: rgba(28, 28, 28, .45); --acc-30: rgba(28, 28, 28, .3); --acc-10: rgba(28, 28, 28, .1); --acc-0: rgba(28, 28, 28, 0); } /* --- 优雅紫金 ------------------------------------------------------------- */ html[data-theme="violet"] { --red: #8E66B4; --red-d: #74509A; --red-l: #F3ECFA; --navy: #4C3D68; --navy-2: #5F5080; --navy-3: #746494; --ink: #382F4A; --ink-2: #524868; --muted: #6E6484; --muted-2: #736789; --muted-3: #685F7D; --bg: #FFFFFF; --bg-soft: #F8F6FB; --bg-soft-2: #EFEAF6; --surface-1: #FBFAFD; --surface-2: #F4F0F9; --surface-3: #EAE3F2; --surface-line: #D5CBDF; --line: #E7E1EE; --line-2: #D0C6DC; --gold: #FFC000; --green: #5E9384; --acc-tint: #E2D3F0; --dot: #8E66B4; --dot-ring: rgba(142, 102, 180, .22); --grad-hero: linear-gradient(168deg, #FDFCFF 0%, #F6F2FA 42%, #EDE5F5 100%); --grad-page: linear-gradient(152deg, #FDFCFF 0%, #F5F1FA 48%, #EAE1F3 100%); --scrim-mid: rgba(246, 242, 250, .8); --scrim-end: rgba(234, 225, 243, .85); --hl-soft: rgba(142, 102, 180, .16); --hl-faint: rgba(142, 102, 180, .04); --acc-sh: rgba(142, 102, 180, .28); --acc-sh-h: rgba(142, 102, 180, .36); --acc-92: rgba(142, 102, 180, .92); --acc-45: rgba(142, 102, 180, .45); --acc-30: rgba(142, 102, 180, .3); --acc-10: rgba(142, 102, 180, .1); --acc-0: rgba(142, 102, 180, 0); } /* --- 中国红（2026-09-13 新增）---------------------------------------------- 主色：正红 #C8102E（= --red 品牌强调色），深红 #9E0C24 做 hover / 压场 深色带 --navy 取 #4A2028（深红棕）：白字对比度 13.7:1 辅色：古铜金 #B08D3F —— 只做装饰点缀（分隔线、角标），不做正文 ⚠️ 和「活力橙灰」同为暖色系，但把橙换成红，并把 --deep-rgb / --acc-rgb 一并覆盖成红色三元组 —— 不覆盖的话 hero 遮罩 / 标题高亮笔 / 深色小色块 会静默回落 :root 的绿色（63, 80, 59）。 ------------------------------------------------------------------------ */ html[data-theme="crimson"] { --red: #C8102E; --red-d: #9E0C24; --red-l: #FCEAED; --navy: #4A2028; --navy-2: #63202C; --navy-3: #7E2E3B; /* hero 遮罩 / 标题高亮笔 / 深色小色块：:root 默认是绿，这里合成品牌红 */ --deep-rgb: 74, 32, 40; /* = #4A2028 */ --acc-rgb: 200, 16, 46; /* = #C8102E */ --ink: #2E2426; --ink-2: #4E4244; --muted: #75676A; --muted-2: #766A6C; --muted-3: #6D6063; --bg: #FFFFFF; --bg-soft: #FBF6F6; --bg-soft-2: #F5EAEA; --surface-1: #FDFAFA; --surface-2: #F8F1F1; --surface-3: #EEE2E2; --surface-line: #DDCBCB; --line: #F1E5E5; --line-2: #D9C6C6; --gold: #B08D3F; --green: #5E8A46; --acc-tint: #F0B8C0; /* 深色带上的浅红文字：对 #4A2028 = 8.06:1 */ --dot: #C8102E; --dot-ring: rgba(200, 16, 46, .22); --grad-hero: linear-gradient(168deg, #FFFDFD 0%, #FDF3F4 42%, #F8E5E7 100%); --grad-page: linear-gradient(152deg, #FFFDFC 0%, #FCF2F2 48%, #F7E3E4 100%); --scrim-mid: rgba(253, 243, 244, .8); --scrim-end: rgba(248, 229, 231, .85); --hl-soft: rgba(200, 16, 46, .16); --hl-faint: rgba(200, 16, 46, .04); --acc-sh: rgba(200, 16, 46, .26); --acc-sh-h: rgba(200, 16, 46, .34); --acc-92: rgba(200, 16, 46, .92); --acc-45: rgba(200, 16, 46, .45); --acc-30: rgba(200, 16, 46, .3); --acc-10: rgba(200, 16, 46, .1); --acc-0: rgba(200, 16, 46, 0); } /* --- logo 随主题自动匹配 -------------------------------------------------- */ .brand__logo:not([data-logo="default"]), .foot-logo:not([data-logo="default"]) { display: none; } html[data-theme="sgs"] .brand__logo[data-logo="sgs"], html[data-theme="sgs"] .foot-logo[data-logo="sgs"] { display: block; } html[data-theme="sgs"] .brand__logo[data-logo="default"], html[data-theme="sgs"] .foot-logo[data-logo="default"] { display: none; } /* ⛔ 已下线的「经典蓝白 / tuv」主题块删了，但下面这两条必须留 —— 莱茵蓝复用蓝色那枚 logo（logo-tuv.png）。删了这两条，切到莱茵蓝页头页脚就没 logo 了。 哪天要给莱茵蓝单独出图，加 logo-rhein.png + 把这里的 data-logo 换掉即可。 */ html[data-theme="rhein"] .brand__logo[data-logo="tuv"], html[data-theme="rhein"] .foot-logo[data-logo="tuv"] { display: block; } html[data-theme="rhein"] .brand__logo[data-logo="default"], html[data-theme="rhein"] .foot-logo[data-logo="default"] { display: none; } html[data-theme="amber"] .brand__logo[data-logo="amber"], html[data-theme="amber"] .foot-logo[data-logo="amber"] { display: block; } html[data-theme="amber"] .brand__logo[data-logo="default"], html[data-theme="amber"] .foot-logo[data-logo="default"] { display: none; } html[data-theme="mono"] .brand__logo[data-logo="mono"], html[data-theme="mono"] .foot-logo[data-logo="mono"] { display: block; } html[data-theme="mono"] .brand__logo[data-logo="default"], html[data-theme="mono"] .foot-logo[data-logo="default"] { display: none; } html[data-theme="violet"] .brand__logo[data-logo="violet"], html[data-theme="violet"] .foot-logo[data-logo="violet"] { display: block; } html[data-theme="violet"] .brand__logo[data-logo="default"], html[data-theme="violet"] .foot-logo[data-logo="default"] { display: none; } html[data-theme="crimson"] .brand__logo[data-logo="crimson"], html[data-theme="crimson"] .foot-logo[data-logo="crimson"] { display: block; } html[data-theme="crimson"] .brand__logo[data-logo="default"], html[data-theme="crimson"] .foot-logo[data-logo="default"] { display: none; } /* --- 右上角配色切换器 ------------------------------------------------------ */ .theme-sw { position: relative; flex: 0 0 auto; } .theme-sw__btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: #fff; color: var(--navy); transition: border-color .18s ease, color .18s ease, box-shadow .18s ease; } .theme-sw__btn:hover { border-color: var(--red); color: var(--red); box-shadow: var(--shadow-sm); } .theme-sw__pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 80; min-width: 172px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); } .theme-sw__title { margin: 4px 8px 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); } .theme-sw__opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-align: left; transition: background .15s ease, color .15s ease; } .theme-sw__opt:hover { background: var(--red-l); color: var(--red); } .theme-sw__opt[aria-checked="true"] { color: var(--red); font-weight: 800; } .theme-sw__opt[aria-checked="true"]::after { content: "✓"; margin-left: auto; font-size: 13px; } .sw { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); } .sw--default { background: linear-gradient(135deg, #6c8650 50%, #3f503b 50%); } .sw--sgs { background: linear-gradient(135deg, #FF6600 50%, #999999 50%); } /* 暖阳琥珀：深金 + 亮金（和「活力橙灰」的橙+灰、「优雅紫金」的紫+金都区分开） */ .sw--amber { background: linear-gradient(135deg, #8F6A00 50%, #F2B705 50%); } /* 莱茵蓝：品牌蓝 + 浅蓝（和「经典蓝白」的蓝+深灰区分开）。 ⚠️ 色板圆点是静态的，写死各主题自己的色，不跟 --red 走。 */ .sw--rhein { background: linear-gradient(135deg, #0071B9 50%, #BDCEE9 50%); } .sw--mono { background: linear-gradient(135deg, #1C1C1C 50%, #BBBBBB 50%); } .sw--violet { background: linear-gradient(135deg, #8E66B4 50%, #FFC000 50%); } /* 中国红：正红 + 古铜金（和「活力橙灰」的橙+灰区分开） */ .sw--crimson { background: linear-gradient(135deg, #C8102E 50%, #B08D3F 50%); } @media (max-width: 760px) { .theme-sw__btn { width: 34px; height: 34px; } .theme-sw__pop { position: fixed; top: 118px; right: 12px; left: auto; } } /* ========================================================================== 1. 基础重置 ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* 关键兜底：作者样式里的 display（如 .tmc-modal{display:grid}）会盖掉 UA 样式表的 [hidden]{display:none}，导致弹层 / 条件字段在初始状态泄漏到页面。 这条 !important 保证 JS 用 hidden 属性开关元素一定生效。 */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.is-locked { overflow: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--navy); text-decoration: none; transition: color .18s ease; } a:hover { color: var(--red); } h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; color: var(--navy); } p { margin: 0; } ul, ol, dl, dd, dt, blockquote, figure { margin: 0; padding: 0; } li { list-style: none; } button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; } input, select, textarea { font-family: inherit; font-size: inherit; } :focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; color: #fff; } .container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; } .ic { flex: 0 0 auto; vertical-align: middle; } /* ========================================================================== 2. 按钮 ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 24px; border-radius: 10px; font-size: 15px; font-weight: 700; line-height: 1.2; white-space: nowrap; border: 1.5px solid transparent; cursor: pointer; transition: transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; } .btn .arrow { transition: transform .2s ease; } .btn:hover .arrow { transform: translateX(3px); } .btn--red { background: var(--red); color: #fff; box-shadow: 0 6px 20px var(--acc-sh); } .btn--red:hover { background: var(--red-d); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 26px var(--acc-sh-h); } .btn--outline { background: #fff; color: var(--navy); border-color: var(--line-2); } .btn--outline:hover { border-color: var(--navy); color: var(--navy); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); } .btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; } .btn--light { background: #fff; color: var(--navy); border-color: #fff; } .btn--light:hover { background: rgba(255, 255, 255, .92); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 0, 0, .22); } .btn--lg { padding: 16px 30px; font-size: 16px; } .btn--sm { padding: 10px 16px; font-size: 14px; border-radius: 8px; } .btn--block { width: 100%; } /* ========================================================================== 3. 顶部信任条（3 秒内确认资质） ========================================================================== */ .topbar { height: var(--topbar-h); background: var(--navy); color: rgba(255, 255, 255, .82); font-size: 12.5px; position: relative; z-index: 60; } .topbar__in { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 16px; } .topbar__left { display: flex; align-items: center; gap: 14px; min-width: 0; } .topbar__brand { color: #fff; font-weight: 600; letter-spacing: .01em; white-space: nowrap; } .topbar__sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .22); } .topbar__creds { display: flex; align-items: center; gap: 14px; min-width: 0; overflow: hidden; } .mini-creds { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: rgba(255, 255, 255, .9); font-weight: 600; } .mini-creds .ic { color: var(--gold); } .topbar__right { display: flex; align-items: center; gap: 18px; } .topbar__tel { display: inline-flex; align-items: center; gap: 7px; color: #fff; white-space: nowrap; } .topbar__tel .ic { color: var(--red); } .topbar__tel strong { font-family: var(--font-num); font-size: 15px; letter-spacing: .02em; } .topbar__tel:hover { color: #fff; } .topbar__tel-label { color: rgba(255, 255, 255, .6); } .topbar__mail { color: rgba(255, 255, 255, .62); white-space: nowrap; } .topbar__mail:hover { color: #fff; } /* 语言切换（GTranslate）：在深色顶栏内垂直居中、与资质信息同排 */ .topbar__lang { display: inline-flex; align-items: center; margin-left: 2px; flex: 0 0 auto; } .topbar__lang .gtranslate_wrapper { display: inline-flex; align-items: center; } .topbar__lang .gt_switcher { font-size: 12.5px; line-height: 1; color: inherit !important; } .topbar__lang .gt_switcher .gt-selected, .topbar__lang .gt_switcher .gt-current-lang, .topbar__lang .gt_switcher .gt-arrow, .topbar__lang .gt_switcher a { color: inherit !important; } /* ========================================================================== 4. 吸顶导航 ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .24s ease, background .24s ease; } .site-header.is-stuck { box-shadow: 0 6px 24px rgba(16, 38, 58, .08); } .nav { display: flex; align-items: center; justify-content: space-between; height: var(--head-h); gap: 24px; } .brand { display: flex; align-items: center; flex: 0 0 auto; background: transparent; } .brand__logo { height: 40px; width: auto; mix-blend-mode: normal; } /* align-self/align-items: stretch：把导航条高度一路传到 li， Mega 面板才能从 header 底边无缝展开，鼠标从菜单项下移不会掉出 hover 区 */ .nav__wrap { flex: 1 1 auto; display: flex; align-self: stretch; align-items: stretch; justify-content: center; } /* stretch：让每个顶层项撑满导航条高度 —— Mega 面板从 header 底边无缝展开，鼠标下移不断档 */ .nav-menu { display: flex; align-items: stretch; gap: 10px; } .nav-item { display: flex; align-items: center; position: relative; } .nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 11px 18px; border-radius: 10px; font-size: 15px; font-weight: 700; color: var(--ink-2); white-space: nowrap; background: #fff; border: 1px solid transparent; box-shadow: 0 1px 2px rgba(var(--deep-rgb), .04); transition: all .2s ease; } .nav-link:hover { background: #fff; color: var(--navy); border-color: var(--line-2); box-shadow: 0 4px 12px rgba(var(--deep-rgb), .10); transform: translateY(-1px); } .caret { width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; } .dropdown { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 8px); min-width: 232px; padding: 10px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transition: all .2s ease; } .nav-item.has-children:hover .dropdown, .nav-item.has-children:focus-within .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .dropdown::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } .dd-title { padding: 6px 12px 8px; color: var(--muted-2); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .dropdown a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); } .dropdown a:hover { background: var(--red-l); color: var(--red); } .nav-cta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .nav-cta__tel { color: var(--navy); border-color: var(--line-2); font-family: var(--font-num); } .nav-cta__tel:hover { border-color: var(--navy); } .burger { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line-2); flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .burger span { display: block; width: 18px; height: 2px; background: var(--navy); border-radius: 2px; } /* 移动抽屉 */ .mobile-nav { position: fixed; inset: 0; z-index: 80; background: #fff; display: flex; flex-direction: column; padding: 20px 22px 26px; transform: translateY(-8px); opacity: 0; transition: all .22s ease; } .mobile-nav.is-open { transform: translateY(0); opacity: 1; } .mobile-nav__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .mobile-nav__title { font-weight: 700; color: var(--navy); } .mobile-nav__close { padding: 6px; color: var(--muted); } .mobile-nav__body { flex: 1; overflow-y: auto; padding-top: 8px; } .mobile-nav__body a { display: block; padding: 16px 4px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 700; color: var(--navy); } .mobile-nav__foot { display: grid; gap: 10px; padding-top: 18px; } /* ========================================================================== 5. 通用区块 ========================================================================== */ .section { padding: 88px 0; } .section--soft { background: var(--bg-soft); } .section--navy { background: var(--navy); color: rgba(255, 255, 255, .82); } .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; } .section-head { max-width: 780px; margin-bottom: 44px; } .section-head h2 { font-size: 38px; margin: 12px 0 14px; } .section-head > p { color: var(--muted); font-size: 17px; line-height: 1.8; } .section-head--dark > p { color: rgba(255, 255, 255, .7); } .section-head--dark h2 { color: #fff; } .eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--red); font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .section--navy .eyebrow { color: var(--acc-tint); } .section > .container > h1 { font-size: 36px; margin-bottom: 12px; } /* ========================================================================== 6. 首屏 Hero ========================================================================== */ .hero { position: relative; overflow: hidden; background: var(--navy); color: rgba(255, 255, 255, .86); padding: 74px 0 0; } .hero__media { position: absolute; inset: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .34; } .hero__scrim { position: absolute; inset: 0; background: radial-gradient(1100px 520px at 12% 24%, rgba(var(--deep-rgb), .82), transparent 62%), linear-gradient(160deg, rgba(var(--deep-rgb), .95) 0%, rgba(var(--deep-rgb), .88) 46%, rgba(var(--acc-rgb), .9) 100%); } .hero__in { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: 56px; } .hero__tag { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .02em; } .hero__tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 4px var(--dot-ring); } .hero__title { font-size: 54px; line-height: 1.16; color: #fff; margin: 20px 0 18px; letter-spacing: -.02em; } .hero__title .hl { position: relative; z-index: 1; color: #fff; } .hero__title .hl::after { content: ""; position: absolute; left: -.02em; right: -.02em; bottom: .06em; height: .34em; background: linear-gradient(90deg, rgba(var(--acc-rgb), .95), rgba(var(--acc-rgb), .4)); z-index: -1; border-radius: 3px; } .hero__lede { font-size: 17.5px; line-height: 1.85; color: rgba(255, 255, 255, .78); max-width: 620px; } /* 核心服务承诺 */ .promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 26px 0 30px; } .promise { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; border-radius: var(--r); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); } .promise__ic { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; background: var(--acc-92); color: #fff; } .promise__tx { display: flex; flex-direction: column; min-width: 0; } .promise__tx strong { color: #fff; font-size: 15px; font-weight: 700; } .promise__tx em { font-style: normal; font-size: 13px; color: rgba(255, 255, 255, .64); line-height: 1.6; margin-top: 2px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } .hero__tel { display: inline-flex; align-items: center; gap: 13px; margin-top: 26px; padding: 13px 20px 13px 15px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); } .hero__tel:hover { background: rgba(255, 255, 255, .13); } .hero__tel-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--red); color: #fff; animation: ring 2.6s ease-in-out infinite; } @keyframes ring { 0%, 72%, 100% { box-shadow: 0 0 0 0 rgba(var(--acc-rgb), .5); } 36% { box-shadow: 0 0 0 10px rgba(var(--acc-rgb), 0); } } .hero__tel em { display: block; font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .6); } .hero__tel strong { display: block; font-family: var(--font-num); font-size: 25px; line-height: 1.15; color: #fff; letter-spacing: .02em; } .hero__tel i { display: block; font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .55); margin-top: 2px; } /* 首屏资质卡内的服务热线（移到右侧栏，浅底深字） */ .hero__tel--card { margin-top: 16px; padding: 13px 16px; background: var(--bg-soft); border: 1px solid var(--line); box-shadow: none; } .hero__tel--card:hover { background: #fff; border-color: var(--red); } .hero__tel--card em { color: var(--muted); } .hero__tel--card strong { color: var(--navy); font-size: 22px; } .hero__tel--card i { color: var(--muted-2); } .hero__tel--card .hero__tel-ic { background: var(--red); } /* 首屏资质卡 */ .hero__card { background: rgba(255, 255, 255, .97); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, .5); } .hero__card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .hero__card-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; } .hero__card-badge { padding: 3px 10px; border-radius: 999px; background: var(--red-l); color: var(--green); font-size: 11.5px; font-weight: 800; } .hero__card-title { font-size: 22px; margin: 10px 0 16px; } .hero__creds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .hcred { text-align: left; padding: 13px 13px 11px; border-radius: var(--r); background: var(--bg-soft); border: 1px solid var(--line); transition: all .18s ease; cursor: zoom-in; } .hcred:hover { border-color: var(--red); background: var(--red-l); transform: translateY(-2px); } .hcred strong { display: block; font-size: 19px; color: var(--navy); letter-spacing: .01em; } .hcred span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; word-break: break-all; } .hcred em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--red); margin-top: 7px; } .hero__card-link { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; padding-top: 15px; border-top: 1px dashed var(--line-2); font-size: 14.5px; font-weight: 700; color: var(--red); } /* 首屏信任带 */ .hero__facts { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--r-lg) var(--r-lg) 0 0; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); border-bottom: 0; } .fact { padding: 20px 22px; border-right: 1px solid rgba(255, 255, 255, .1); } .fact:last-child { border-right: 0; } .fact b { display: block; font-family: var(--font-num); font-size: 25px; color: #fff; letter-spacing: .01em; } .fact span { display: block; font-size: 13px; color: rgba(255, 255, 255, .62); margin-top: 3px; } /* ========================================================================== 7. 资质信任区 ========================================================================== */ .verify-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; margin-bottom: 40px; } .verify-card { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; padding: 18px 20px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: all .2s ease; } .verify-card:hover { border-color: var(--navy); transform: translateY(-3px); box-shadow: var(--shadow); } .verify-card__ic { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; background: var(--navy); color: #fff; } .verify-card__tx { flex: 1; min-width: 0; } .verify-card__tx strong { display: block; font-size: 16px; color: var(--navy); font-weight: 800; } .verify-card__tx em { display: block; font-style: normal; font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.6; } .verify-card__go { color: var(--red); flex: 0 0 auto; } .cert-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .cert { text-align: left; padding: 0; border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: all .22s ease; width: 100%; } button.cert { cursor: zoom-in; } .cert:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--line-2); } /* 证书缩略图：缩小为横版缩略图节省空间，hover 时图片在容器内放大，移开恢复。 */ .cert__thumb { position: relative; display: block; aspect-ratio: 4 / 3; background: linear-gradient(180deg, #FFFFFF 0%, var(--surface-1) 100%); overflow: hidden; border-bottom: 1px solid var(--line); } .cert__thumb img { width: 100%; height: 100%; padding: 8px; object-fit: contain; object-position: center; transition: transform .4s ease; } .cert:hover .cert__thumb img { transform: scale(1.18); } .cert__zoom { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(var(--deep-rgb), .84); color: #fff; } .cert__hot { position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11.5px; font-weight: 800; } .cert__body { display: block; padding: 15px 16px 17px; } .cert__abbr { display: block; font-size: 17px; color: var(--navy); } .cert__abbr i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--muted); } .cert__no { display: block; font-family: var(--font-num); font-size: 13px; color: var(--ink-2); margin-top: 7px; } .cert__valid { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.6; } .cert__thumb--mark { display: grid; place-items: center; } .cert__mark { font-family: var(--font-num); font-size: 26px; font-weight: 800; color: var(--navy); letter-spacing: .04em; opacity: .5; } /* 报告编号滚动 */ .reports { margin: 46px 0 0; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); overflow: hidden; } .reports__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--line); } .reports__label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--navy); } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 1.8s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--acc-45); } 50% { opacity: .65; box-shadow: 0 0 0 6px var(--acc-0); } } .reports__note { font-size: 12.5px; color: var(--muted-2); } .marquee { overflow: hidden; padding: 16px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .marquee__track { display: flex; width: max-content; animation: slide 46s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__group { display: flex; gap: 12px; padding-right: 12px; } @keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } .rep { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; padding: 9px 15px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); } .rep b { font-family: var(--font-num); font-size: 13.5px; color: var(--navy); font-weight: 700; } .rep i { font-style: normal; font-size: 12px; color: var(--muted); } .rep em { font-style: normal; font-size: 12px; color: var(--red); font-weight: 700; } /* 实验室实拍：每页 1 张大图（左，占 2 列 × 2 行）+ 6 张小图（右，3 列 × 2 行），左右等高。 列数由 PHP 通过 --lab-cols 注入（大图 2 列 + 小图每行列数），改 TMC_LAB_PER_PAGE 自动适配。 */ .lab-block { margin-top: 50px; } .lab-block__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; } .lab-block__head h3 { font-size: 24px; margin-bottom: 6px; } .lab-block__head p { color: var(--muted); font-size: 15px; } /* 实拍视频声音开关（板块里有视频时才渲染，见 front-page.php） */ .lab-sound { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 9px 15px; border-radius: 999px; cursor: pointer; background: var(--bg-soft); border: 1px solid var(--line-2); color: var(--ink-2); font-family: inherit; font-size: 13px; font-weight: 700; transition: background .2s ease, border-color .2s ease, color .2s ease; } .lab-sound:hover { border-color: var(--red); color: var(--red); } .lab-sound .ic--sound { display: none; } .lab-sound.is-on { background: var(--red-l); border-color: var(--red); color: var(--red); } .lab-sound.is-on .ic--mute { display: none; } .lab-sound.is-on .ic--sound { display: inline-block; } .lab-grid { display: grid; grid-template-columns: repeat(var(--lab-cols, 5), minmax(0, 1fr)); gap: 14px; } .lab { position: relative; overflow: hidden; border-radius: var(--r); cursor: zoom-in; aspect-ratio: 4 / 3; background: var(--bg-soft-2); padding: 0; box-shadow: var(--shadow-sm); } /* 大图：跨 2 列 × 2 行，高度由右侧两排小图撑出（故不设 aspect-ratio，避免与行高打架） */ .lab--wide { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } .lab img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } /* 大图内的图绝对定位：不参与内在高度计算，保证左右两侧严格等高 */ .lab--wide img { position: absolute; inset: 0; } /* 分页补位：最后一页不满时撑住行高（占位由 tmc-site.js 生成并控制显隐） */ .lab--blank { visibility: hidden; pointer-events: none; box-shadow: none; background: transparent; cursor: default; } .lab:hover img { transform: scale(1.06); } .lab__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; pointer-events: none; } .lab:hover .lab__video, .lab.is-playing .lab__video { opacity: 1; } /* 大图：实拍视频自动播放，常显（不再依赖指针悬停） */ .lab--wide .lab__video { opacity: 1; } .lab .lab__cap { z-index: 2; } .lab__hint { position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(var(--deep-rgb), .82); color: #fff; font-size: 12px; font-weight: 700; transition: opacity .2s ease; } .lab:hover .lab__hint { opacity: 0; } /* 大图左上角常显角标：说明这是自动播放的实拍视频（不随悬停消失） */ .lab__badge { position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(var(--deep-rgb), .82); color: #fff; font-size: 12px; font-weight: 700; } /* 小图右上角播放角标：提示点开是视频不是静态图（悬停预览时淡出） */ .lab__play { position: absolute; right: 12px; top: 12px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--deep-rgb), .82); color: #fff; transition: opacity .2s ease; } .lab:hover .lab__play { opacity: 0; } .lab__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; background: linear-gradient(to top, rgba(6, 24, 38, .9), transparent); text-align: left; } .lab__cap strong { display: block; color: #fff; font-size: 14.5px; } .lab__cap em { display: block; font-style: normal; color: rgba(255, 255, 255, .72); font-size: 12px; margin-top: 2px; } .lab-cta { margin-top: 18px; text-align: center; } /* 实拍图多于每页张数时，板块最下方出现页码（切换逻辑见 tmc-site.js） */ .lab-pages { margin-top: 26px; } .lab-pages__tip { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 12px; } .pager.lab-pager { margin-top: 0; } .pager.lab-pager button.page-numbers { cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 700; } .pager.lab-pager button.page-numbers:hover { border-color: var(--red); color: var(--red); } .pager.lab-pager button.page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; } .pager.lab-pager button.page-numbers[disabled] { opacity: .38; cursor: default; } .pager.lab-pager button.page-numbers[disabled]:hover { border-color: var(--line-2); color: var(--ink-2); } .lab-pager__prev .ic { transform: rotate(180deg); } /* 战略合作伙伴 · 浅色立体棋盘格 logo 矩阵 浅色背景 + 圆角立体瓦片（白 / 主题浅色交替）+ 悬浮抬升阴影 */ .section--clients { background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%); color: var(--ink); padding: 44px 0 40px; } .section--clients .container { position: relative; } .clients--dark { margin: 0; padding: 0; border: none; } .clients--dark .clients__head { text-align: center; margin: 0 auto 16px; max-width: 600px; } .clients--dark .clients__head h3 { font-size: 24px; font-weight: 800; color: var(--navy); letter-spacing: .04em; margin-bottom: 6px; } .clients--dark .clients__head p { font-size: 12.5px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; } /* 战略合作伙伴：浅色立体棋盘格 logo 矩阵（参考图片），港口集装箱灰底 + 白 / 主题浅色交替瓦片 + Dock 放大 */ .client-showcase--dark { position: relative; margin: 0 auto; width: 100%; min-height: 340px; display: flex; align-items: center; justify-content: center; padding: 22px 0; border-radius: var(--r-lg); background: transparent; overflow: visible; } .client-showcase--dark::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* v3.10.40：优先 WebP（25 KB），不支持的浏览器回落到 JPEG（59 KB）。 两代声明 —— 不认 image-set() 的浏览器整条丢弃，保留上一代。 */ background: linear-gradient(rgba(245, 247, 249, .88), rgba(245, 247, 249, .88)), url('images/bg-port.jpg') center / cover no-repeat; background: linear-gradient(rgba(245, 247, 249, .88), rgba(245, 247, 249, .88)), image-set( url('images/bg-port.webp') type('image/webp'), url('images/bg-port.jpg') type('image/jpeg') ) center / cover no-repeat; border-radius: var(--r-lg); opacity: .28; filter: grayscale(100%) contrast(90%) brightness(105%); pointer-events: none; z-index: 0; } .client-showcase__grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; max-width: 1080px; margin: 0 auto; gap: 10px; } .client-cell { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: 14px; overflow: visible; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 22px -10px rgba(20, 30, 45, .45), 0 3px 6px -2px rgba(20, 30, 45, .12), inset 0 1px 0 rgba(255, 255, 255, .95); transition: transform .22s ease, box-shadow .22s ease; } .client-cell:hover { transform: translateY(-5px); box-shadow: 0 18px 34px -14px rgba(20, 30, 45, .55), 0 5px 10px -3px rgba(20, 30, 45, .16), inset 0 1px 0 rgba(255, 255, 255, .95); z-index: 2; } .client-cell--light { background: linear-gradient(145deg, #ffffff 0%, #f3f5f7 100%); } .client-cell--dark { background: linear-gradient(145deg, #ffffff 0%, #eef1f4 100%); background: linear-gradient(145deg, #ffffff 0%, color-mix(in srgb, var(--primary) 12%, #ffffff) 100%); } .client-cell__img { display: block; position: relative; max-width: 88%; max-height: 82%; width: auto; height: auto; object-fit: contain; filter: none; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); transform-origin: center; } .client-cell:hover .client-cell__img { transform: scale(3); z-index: 10; } .client-cell__name { font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--navy); text-align: center; padding: 0 8px; word-break: break-word; position: relative; transition: transform .25s cubic-bezier(.34, 1.56, .64, 1); transform-origin: center; } .client-cell:hover .client-cell__name { transform: scale(2); z-index: 10; } .clients--dark .clients__note { margin: 16px auto 0; max-width: 640px; font-size: 12.5px; color: var(--muted); text-align: center; } /* 品牌墙分页指示（最多 18 格/页，>18 自动循环，点按可切换） */ .client-pager { display: flex; gap: 7px; justify-content: center; align-items: center; margin-top: 16px; position: relative; z-index: 1; } .client-pager__dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 50%; background: var(--line-2); cursor: pointer; transition: all .25s ease; } .client-pager__dot:hover { background: var(--muted); } .client-pager__dot.is-active { background: var(--navy); width: 20px; border-radius: 4px; } @media (max-width: 1180px) { .client-showcase--dark { min-height: 300px; padding: 20px 0; } .client-showcase__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .client-cell__name { font-size: 15px; } } @media (max-width: 768px) { .section--clients { padding: 36px 0 32px; } .clients--dark .clients__head h3 { font-size: 22px; } .client-showcase--dark { min-height: 280px; padding: 18px 0; border-radius: var(--r); } .client-showcase__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .client-cell__name { font-size: 14px; } } @media (max-width: 480px) { .section--clients { padding: 32px 0 28px; } .client-showcase--dark { min-height: 240px; padding: 16px 0; } .client-showcase__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .client-cell__name { font-size: 12px; } } /* ========================================================================== 8. 服务方案区 ========================================================================== */ /* 每行 4 张（v3.9.9）。4 列后单卡只有 ~280px 宽，详情再往卡下面纵向铺开就会顶出视口、 也放不下 —— 所以详情改成「悬停时原位横向展开」：面板盖住本卡、横向铺满两列， 高度与卡片等高，内容分左右两栏。横向那个 left 由 assets/js/tmc-site.js 按容器实时算， 4 列里第 3、4 张会自动往左展开，保证不越出栅格。 */ .plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } /* 行业卡 = 图片卡。外层只占网格格子（高度固定），卡体与详情面板都是绝对定位： 悬停展开不会撑动同行/下一行的其它卡，也不会产生横向溢出。 */ .plan { position: relative; height: 330px; transition: transform .3s ease; } .plan:hover, .plan:focus-within { z-index: 30; transform: translateY(-4px); } .plan__card { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: box-shadow .3s ease, border-color .3s ease, opacity .18s ease; } /* 悬停时详情面板接管这张卡。面板可能因内容更多而上下偏移， 所以让卡面直接退场，免得从面板边上露出一截。 注意：opacity:0 仍会接收鼠标事件，hover 不会因此断掉。 */ .plan:hover .plan__card, .plan:focus-within .plan__card { opacity: 0; box-shadow: 0 18px 40px rgba(16, 38, 58, .18); border-color: var(--line-2); } .plan--hot .plan__card { border-color: var(--acc-30); } /* 图片区：占卡片 53% 高度，底部压渐变让图标与标签可读 */ .plan__pic { position: relative; flex: none; height: 176px; overflow: hidden; background: var(--bg-soft-2); } .plan__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; } .plan:hover .plan__pic img, .plan:focus-within .plan__pic img { transform: scale(1.06); } .plan__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 38, 58, .3) 0%, rgba(16, 38, 58, 0) 45%, rgba(16, 38, 58, .2) 100%); } /* v3.10.0：图标放大到 56px 并统一用品牌橙实底 —— 原先非「主力能力」卡是深蓝半透明底（rgba(16,38,58,.55)），压在照片上像一块灰， 图标小、对比弱，看不清是哪个行业。hot 与否改由右上角「主力能力」药丸区分。 */ .plan__ic { position: absolute; left: 16px; bottom: 14px; z-index: 2; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--red); color: #fff; border: 1px solid rgba(255, 255, 255, .5); box-shadow: 0 6px 16px rgba(255, 102, 0, .3); } .plan__flag { position: absolute; right: 14px; top: 14px; z-index: 2; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--red); font-size: 11.5px; font-weight: 800; letter-spacing: .02em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* 文字区 */ .plan__body { flex: 1; display: flex; flex-direction: column; padding: 15px 18px 17px; } .plan__head h3 { font-size: 18.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .plan__head em { display: block; font-style: normal; font-size: 10.5px; letter-spacing: .12em; color: var(--muted-2); margin-top: 4px; font-family: var(--font-num); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .plan__tagline { margin-top: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .plan__more { margin-top: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--red); letter-spacing: .02em; transition: opacity .22s ease; } .plan__more i { font-style: normal; transition: transform .28s ease; } .plan__more-t { display: none; } /* 桌面端说「悬停」，触摸端说「点击」 */ .plan:hover .plan__more i, .plan:focus-within .plan__more i { transform: translateX(4px); } .plan:hover .plan__more, .plan:focus-within .plan__more { opacity: 0; } /* 详情面板：悬停时原位横向展开 —— 宽 = 2 列 + 1 个间距， 盖住本卡并向左/右铺开，内容分左右两栏。这样 4 列窄卡也能把方案说完整。 高度默认与卡片等高；内容确实放不下时（如「电子电器」7 个标准） 最多长到视口高，纵向位置由 JS 兜住（见 tmc-site.js 末尾的 align()）。 横向 left 同理由 JS 按栅格实时算。 */ .plan__detail { position: absolute; left: 0; top: 0; z-index: 3; width: calc(200% + 18px); height: auto; min-height: 100%; max-height: calc(100vh - 16px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 17px 19px 19px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: 0 28px 56px rgba(16, 38, 58, .22); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .26s ease, transform .26s ease, visibility .26s ease; } .plan:hover .plan__detail, .plan:focus-within .plan__detail { opacity: 1; visibility: visible; transform: translateY(0); } .plan__dcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .plan__dcol + .plan__dcol { padding-left: 19px; border-left: 1px solid var(--line); } /* 面板里所有小标签都压一档，免得把 330px 的卡片撑破 */ .plan__detail .plan__items li, .plan__detail .std { padding: 3px 9px; font-size: 12px; line-height: 1.4; } .plan__pain { display: block; padding: 11px 13px; border-radius: var(--r); background: var(--red-l); border-left: 3px solid var(--red); } .plan__pain strong { display: block; font-size: 11.5px; color: var(--red); letter-spacing: .06em; margin-bottom: 3px; } .plan__pain span { font-size: 13px; color: var(--ink-2); line-height: 1.6; } .plan__block h4 { font-size: 11.5px; color: var(--muted-2); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; } .plan__items { display: flex; flex-wrap: wrap; gap: 6px; } .plan__items li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); font-weight: 600; } .plan__items .ic { color: var(--green); } .plan__stds { display: flex; flex-wrap: wrap; gap: 5px; } .std { padding: 4px 9px; border-radius: 7px; background: var(--bg-soft); border: 1px dashed var(--line-2); font-family: var(--font-num); font-size: 12px; color: var(--navy); font-weight: 600; } .plan__cycle { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: var(--r); background: var(--bg-soft); font-size: 13px; font-weight: 700; color: var(--navy); } .plan__cycle .ic { color: var(--red); } .plan__actions { display: grid; gap: 9px; margin-top: auto; } .plan__link { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 13px; color: var(--muted); font-weight: 600; } .plan__link:hover { color: var(--red); } /* 触摸设备 / 窄屏：没有 hover，改成「点击展开」，默认仍然只有一张紧凑图片卡 */ @media (hover: none), (max-width: 768px) { .plan { height: auto; } .plan__card { position: static; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom-color: transparent; } .plan__pic { height: 168px; } .plan__detail { position: static; width: auto; height: auto; min-height: 0; max-height: none; display: none; grid-template-columns: minmax(0, 1fr); margin-top: -1px; padding: 18px 20px 20px; opacity: 1; visibility: visible; transform: none; overflow: visible; border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--shadow-sm); border-color: var(--line); } .plan--open .plan__detail { display: grid; } .plan__dcol + .plan__dcol { padding-left: 0; border-left: 0; } .plan__actions { margin-top: 0; } .plan--open .plan__card { border-bottom-color: transparent; } .plan__more-t { display: inline; } .plan__more-h { display: none; } /* 触摸端有些浏览器会残留 sticky hover，别让它把「点击查看方案详情」吞掉 */ .plan:hover .plan__more, .plan:focus-within .plan__more { opacity: 1; } /* 展开后箭头朝上，暗示可再点收起 */ .plan--open .plan__more i { transform: rotate(-90deg); } .plan:hover { transform: none; } .plan:hover .plan__card { opacity: 1; box-shadow: var(--shadow-sm); } .plan:hover .plan__detail { box-shadow: var(--shadow-sm); } } .more-fields { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); } .more-fields__label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 13px; font-weight: 600; } .more-fields__chips { display: flex; flex-wrap: wrap; gap: 9px; } .field-chip { padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); font-size: 14px; font-weight: 700; color: var(--ink-2); transition: all .18s ease; } .field-chip:hover { background: var(--navy); border-color: var(--navy); color: #fff; transform: translateY(-2px); } /* ========================================================================== 9. 案例实证区 ========================================================================== */ .case-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; } .case-filter { padding: 9px 17px; border-radius: 999px; font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); transition: all .18s ease; } .case-filter:hover { background: rgba(255, 255, 255, .15); color: #fff; } .case-filter.is-active { background: var(--red); border-color: var(--red); color: #fff; } /* /cases/ 案例页用 3 列（每张卡是「图文详情直铺」版式，见第 16 节），首页用下面的 4 列 */ .case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .case { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: #fff; border: 1px solid rgba(255, 255, 255, .1); transition: all .26s ease; } .case.is-hidden { display: none; } .case:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } /* ------------------------------------------------------------------ 首页案例卡（v3.9.9）：与「按你的行业，直接找到检测方案」同一套视觉 每行 4 张 → 单卡只有 ~280px 宽，详情再往卡下面纵向铺开就会顶出视口， 所以做成「悬停原位横向展开」：详情面板盖住本卡、横向铺满两列， 高度与卡片等高，内容分左右两栏 —— 窄卡也能把交付细节说完整。 横向 left 由 assets/js/tmc-site.js 按栅格实时算（第 3、4 张自动往左展）。 ------------------------------------------------------------------ */ .case-grid--show { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .case-grid--show .case { position: relative; display: block; height: 330px; overflow: visible; background: none; border: 0; border-radius: 0; transition: transform .3s ease; } .case-grid--show .case:hover, .case-grid--show .case:focus-within { z-index: 30; transform: translateY(-4px); box-shadow: none; } /* ⚠️ 卡片 / 条目的显示隐藏不要用 is-hidden 这类「双类」工具类 —— 第 1209 行的 `.case.is-hidden{display:none}` 与这里的 `.case-grid--show .case{display:block}` 特异性同为 (0,2,0)，后者写在后面会赢：表现就是「点 tab 只有按钮变色、卡片一张不少」 （/cases/ 因为只有 .case-grid、没有 --show，才侥幸没事，所以极难自查）。 现在 tmc-site.js 的 initCaseGrid / initInsightPager 统一改用 `hidden` 属性 —— 命中第 398 行的 `[hidden]{display:none !important}`，任何 display 规则都压不掉。 下面这条保留只作兜底。 */ .case-grid--show .case.is-hidden { display: none; } .case__card { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-lg); background: #fff; border: 1px solid rgba(255, 255, 255, .14); box-shadow: var(--shadow-sm); transition: box-shadow .3s ease, border-color .3s ease, opacity .18s ease; } .case-grid--show .case:hover .case__card, .case-grid--show .case:focus-within .case__card { opacity: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .32); border-color: var(--line-2); } .case__thumb { position: relative; display: block; flex: none; width: 100%; height: 176px; aspect-ratio: auto; overflow: hidden; padding: 0; cursor: zoom-in; background: var(--bg-soft-2); } .case__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; } .case-grid--show .case:hover .case__thumb img, .case-grid--show .case:focus-within .case__thumb img { transform: scale(1.06); } .case__cat { position: absolute; left: 12px; top: 12px; padding: 4px 11px; border-radius: 999px; background: rgba(var(--deep-rgb), .9); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .case__zoom { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(var(--deep-rgb), .88); color: #fff; } .case__body { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 15px 18px 17px; color: var(--ink); } .case__body h3 { font-size: 16.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .case__sub { display: flex; align-items: flex-start; gap: 5px; margin-top: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.6; } .case__sub .ic { flex: none; margin-top: 2px; color: var(--muted-2); } .case__hint { margin-top: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--red); letter-spacing: .02em; transition: opacity .22s ease; } .case__hint i { font-style: normal; transition: transform .28s ease; } .case__hint-t { display: none; } .case-grid--show .case:hover .case__hint i, .case-grid--show .case:focus-within .case__hint i { transform: translateX(4px); } .case-grid--show .case:hover .case__hint, .case-grid--show .case:focus-within .case__hint { opacity: 0; } /* 详情面板（与 .plan__detail 同一套机制） */ .case__detail { position: absolute; left: 0; top: 0; z-index: 3; width: calc(200% + 18px); height: auto; min-height: 100%; max-height: calc(100vh - 16px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 17px 19px 19px; background: #fff; color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: 0 28px 56px rgba(16, 38, 58, .32); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .26s ease, transform .26s ease, visibility .26s ease; } .case-grid--show .case:hover .case__detail, .case-grid--show .case:focus-within .case__detail { opacity: 1; visibility: visible; transform: translateY(0); } .case__dcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .case__dcol + .case__dcol { padding-left: 19px; border-left: 1px solid var(--line); } .case__detail .case__dmethods li { padding: 3px 9px; font-size: 12px; line-height: 1.4; } .case__dblock h4 { font-size: 11px; color: var(--muted-2); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 7px; } .case__need { padding: 11px 13px; border-radius: var(--r); background: var(--red-l); border-left: 3px solid var(--red); } .case__need strong { display: block; font-size: 11.5px; color: var(--red); letter-spacing: .06em; margin-bottom: 3px; } .case__need span { font-size: 13px; color: var(--ink-2); line-height: 1.6; } .case__dmethods { display: flex; flex-wrap: wrap; gap: 6px; } .case__dmethods li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); font-weight: 600; } .case__dmethods .ic { color: var(--green); } .case__dcycle { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: var(--r); background: var(--bg-soft); font-size: 13px; font-weight: 700; color: var(--navy); } .case__dcycle .ic { color: var(--red); } .case__dsum { font-size: 13px; color: var(--ink-2); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .case__dres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .case__dres .cres { padding: 11px 13px; } .case__dres .cres b { font-size: 19px; } .case__dact { display: grid; gap: 9px; margin-top: auto; } .case__dl { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); } .case__dl:hover { color: var(--red); } .case__dl .ic { color: var(--muted-2); } /* 触摸端 / 窄屏：点击展开，详情回到卡片下方纵向铺开（同 .plan） */ @media (hover: none), (max-width: 768px) { .case-grid--show .case { height: auto; } .case-grid--show .case:hover, .case-grid--show .case:focus-within { transform: none; } .case__card { position: static; border-radius: var(--r-lg) var(--r-lg) 0 0; } .case__detail { position: static; width: auto; height: auto; min-height: 0; max-height: none; display: none; grid-template-columns: minmax(0, 1fr); margin-top: -1px; padding: 18px 20px 20px; opacity: 1; visibility: visible; transform: none; overflow: visible; border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: var(--shadow-sm); border-color: var(--line); } .case--open .case__detail { display: grid; } .case__dcol + .case__dcol { padding-left: 0; border-left: 0; } .case__dact { margin-top: 0; } .case__hint-t { display: inline; } .case__hint-h { display: none; } .case-grid--show .case:hover .case__hint, .case-grid--show .case:focus-within .case__hint { opacity: 1; } .case--open .case__hint i { transform: rotate(-90deg); } .case-grid--show .case:hover .case__card, .case-grid--show .case:focus-within .case__card { opacity: 1; box-shadow: var(--shadow-sm); } } .case__meta { display: grid; gap: 10px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .case__meta > div { display: grid; grid-template-columns: 66px 1fr; gap: 10px; } .case__meta dt { font-size: 12.5px; color: var(--muted-2); font-weight: 700; } .case__meta dd { font-size: 14px; color: var(--ink-2); line-height: 1.6; } .case__cycle { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--navy); } .case__cycle .ic { color: var(--red); } .case__summary { margin: 14px 0 16px; font-size: 14px; color: var(--muted); line-height: 1.75; } .case__results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } .cres { padding: 12px 14px; border-radius: var(--r); background: var(--bg-soft); border: 1px solid var(--line); } .cres b { display: block; font-family: var(--font-num); font-size: 22px; color: var(--red); letter-spacing: .01em; } .cres span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; } .case__quote { margin-top: auto; padding: 14px 16px; border-radius: var(--r); background: var(--bg-soft); border-left: 3px solid var(--gold); } .case__quote .ic { color: var(--gold); margin-bottom: 6px; } .case__quote p { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; } .case__quote cite { display: block; font-style: normal; font-size: 12.5px; color: var(--muted-2); margin-top: 7px; } .cases-cta { margin-top: 34px; text-align: center; } /* ========================================================================== 10. 转化入口 + 表单 ========================================================================== */ .apply-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: start; } .apply-copy h2 { font-size: 36px; margin: 14px 0 18px; line-height: 1.25; } .apply-copy__desc { color: var(--muted); font-size: 16.5px; line-height: 1.85; margin-bottom: 32px; } .steps { display: grid; } .steps li { display: flex; gap: 15px; padding-bottom: 22px; position: relative; } .steps li::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 1.5px; background: var(--line-2); } .steps li:last-child::before { display: none; } .steps__n { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 31px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 14px; font-weight: 800; position: relative; z-index: 1; } .steps__t strong { display: block; font-size: 15.5px; color: var(--navy); font-weight: 700; line-height: 1.4; } .steps__t em { display: block; font-style: normal; font-size: 13.5px; color: var(--muted); margin-top: 3px; line-height: 1.55; } .steps__branch { display: flex; align-items: flex-start; gap: 6px; padding: 4px 0; border-bottom: 1px dashed var(--line-2); } .steps__branch:last-child { border-bottom: 0; } .steps__branch b { display: inline-grid; place-items: center; min-width: 44px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; } .apply-quick { display: grid; gap: 12px; margin-top: 12px; } .apply-quick__tel, .apply-quick__calc { display: flex; align-items: center; gap: 13px; text-align: left; padding: 15px 18px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: all .2s ease; } .apply-quick__tel .ic, .apply-quick__calc .ic { color: var(--red); flex: 0 0 auto; } .apply-quick__tel em, .apply-quick__calc em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); } .apply-quick__tel strong { display: block; font-family: var(--font-num); font-size: 21px; color: var(--navy); } .apply-quick__calc strong { display: block; font-size: 15px; color: var(--navy); } .apply-quick__tel:hover, .apply-quick__calc:hover { border-color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow); } .apply-form { position: relative; background: #fff; border-radius: var(--r-lg); padding: 30px; border: 1px solid var(--line); box-shadow: var(--shadow); } .apply-form__tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 5px; border-radius: var(--r); background: var(--bg-soft); margin-bottom: 24px; } .apply-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px; border-radius: 9px; font-size: 14.5px; font-weight: 700; color: var(--muted); transition: all .18s ease; } .apply-tab.is-active { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); } .tmc-form { display: grid; gap: 18px; } .form-row { display: grid; gap: 8px; } .form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .form-row--2 > div { display: grid; gap: 8px; } .form-row label { font-size: 13.5px; font-weight: 700; color: var(--ink-2); } .req { color: var(--red); } .opt { color: var(--muted-2); font-weight: 500; } .tmc-form input[type="text"], .tmc-form input[type="tel"], .tmc-form input[type="date"], .tmc-form textarea { width: 100%; padding: 14px 16px; border-radius: 11px; background: var(--bg-soft); border: 1.5px solid var(--line); font-size: 15px; color: var(--ink); transition: all .18s ease; } .tmc-form textarea { resize: vertical; min-height: 92px; line-height: 1.7; } .tmc-form input:focus, .tmc-form textarea:focus { outline: none; border-color: var(--navy); background: #fff; box-shadow: 0 0 0 4px rgba(var(--deep-rgb), .07); } .tmc-form input.has-error, .tmc-form textarea.has-error { border-color: var(--red); background: var(--red-l); } .form-err { font-size: 12.5px; color: var(--red); font-weight: 600; } .form-err:empty { display: none; } .form-hint { font-size: 12.5px; color: var(--muted-2); line-height: 1.6; } .form-privacy { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted-2); text-align: center; } .form-privacy .ic { color: var(--green); } .form-kw { color: var(--red); font-weight: 700; } .hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .form-done { text-align: center; padding: 26px 10px 12px; } .form-done__ic { display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--red-l); color: var(--green); margin-bottom: 16px; } .form-done h3 { font-size: 23px; margin-bottom: 8px; } .form-done p { color: var(--muted); font-size: 15px; margin-bottom: 22px; } .form-done__acts { display: grid; gap: 10px; } /* ========================================================================== 11. 内容营销区 ========================================================================== */ .insight-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; } .insight-tab { position: relative; text-align: left; padding: 20px 22px; border-radius: var(--r-lg); background: #fff; border: 1.5px solid var(--line); transition: all .2s ease; } .insight-tab:hover { border-color: var(--line-2); transform: translateY(-2px); } .insight-tab.is-active { border-color: var(--navy); box-shadow: var(--shadow); } .insight-tab__cn { display: block; font-size: 19px; font-weight: 800; color: var(--navy); } .insight-tab__en { display: block; font-size: 11px; letter-spacing: .14em; color: var(--muted-2); margin-top: 4px; } .insight-tab__n { position: absolute; top: 20px; right: 22px; font-style: normal; font-family: var(--font-num); font-size: 13px; color: var(--muted-2); } .insight-tab.is-active .insight-tab__n { color: var(--red); font-weight: 800; } .insight-panel { display: none; } .insight-panel.is-active { display: block; animation: fadeUp .32s ease; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .insight-list { display: grid; gap: 12px; } .insight { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 22px 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); transition: all .2s ease; } .insight:hover { border-color: var(--line-2); box-shadow: var(--shadow); } .insight__top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .insight__tag { padding: 3px 10px; border-radius: 999px; background: var(--navy); color: #fff; font-size: 11.5px; font-weight: 700; } .insight__meta { font-size: 12.5px; color: var(--muted-2); } .insight__main h3 { font-size: 18.5px; margin-bottom: 7px; } .insight__main p { font-size: 14px; color: var(--muted); line-height: 1.75; } .insight__go { flex: 0 0 auto; padding: 11px 18px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--line); font-size: 14px; font-weight: 700; color: var(--navy); white-space: nowrap; transition: all .18s ease; } .insight__go:hover { background: var(--red); border-color: var(--red); color: #fff; } .insight-foot { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; padding: 22px; border-radius: var(--r-lg); background: var(--bg-soft); border: 1px dashed var(--line-2); } .insight-foot p { font-size: 15.5px; font-weight: 700; color: var(--navy); } /* ========================================================================== 12. 悬浮转化栏 / 移动底栏 ========================================================================== */ .dock { position: fixed; right: 18px; top: 50%; transform: translateY(-50%) translateX(140%); z-index: 45; transition: transform .3s cubic-bezier(.2, .8, .3, 1); } .dock.is-visible { transform: translateY(-50%) translateX(0); } .dock__in { display: grid; gap: 8px; } .dock__btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 76px; padding: 12px 6px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); transition: all .2s ease; } .dock__btn:hover { transform: translateX(-4px); border-color: var(--navy); } .dock__ic { color: var(--navy); display: grid; place-items: center; } .dock__btn--red { background: var(--red); border-color: var(--red); } .dock__btn--red .dock__ic, .dock__btn--red .dock__tx { color: #fff; } .dock__btn--red:hover { border-color: var(--red-d); } .dock__tx { font-size: 12.5px; font-weight: 800; color: var(--navy); line-height: 1.2; text-align: center; } .dock__tip { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(8px); padding: 9px 13px; border-radius: 9px; background: var(--navy); color: #fff; font-size: 12.5px; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: all .2s ease; } .dock__btn:hover .dock__tip { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); } .dock__btn--top { background: var(--bg-soft); opacity: 0; visibility: hidden; } .dock__btn--top.is-visible { opacity: 1; visibility: visible; } .mobile-bar { display: none; } /* ========================================================================== 12b. 在线咨询浮窗（右下角主动弹出） 目的：接住「看了半天还没动作」的高意图访客 —— 电话 / 微信 / 留需求三条路 一次摆到眼前。同一次访问只主动弹一次，关掉后不再打扰（见 tmc-site.js）。 ⚠️ 面板展开时给 body 加 .kf-open，让右侧悬浮栏 .dock 让位 —— 两者都待在右侧，同时出现会互相压住。 ========================================================================== */ .kf { position: fixed; right: 22px; bottom: 22px; z-index: 65; /* column-reverse：DOM 里气泡在前、面板在后，视觉上让气泡落到最下， 面板从气泡上方展开 —— 这是聊天窗该有的方向。 */ display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 12px; pointer-events: none; } .kf > * { pointer-events: auto; } /* --- 气泡 --- */ .kf__launcher { position: relative; display: flex; align-items: center; gap: 9px; padding: 11px 17px 11px 14px; border-radius: 999px; background: var(--red); color: #fff; border: 1px solid var(--red); box-shadow: 0 10px 26px rgba(200, 30, 30, .3); font-size: 14px; font-weight: 800; letter-spacing: .01em; transform: translateY(12px) scale(.9); opacity: 0; transition: transform .32s cubic-bezier(.2, .8, .3, 1), opacity .28s ease, box-shadow .2s ease; } .kf--in .kf__launcher { transform: none; opacity: 1; } .kf__launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(200, 30, 30, .42); } .kf__launcher-ic { display: grid; place-items: center; } /* 呼吸点只跳 3 次就停，常驻闪烁会显廉价 */ .kf__launcher-dot { position: absolute; right: 9px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: kfPulse 2.2s ease-out 3; } @keyframes kfPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .85); } 70% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } /* --- 面板 --- */ .kf__panel { position: relative; width: 336px; max-width: calc(100vw - 44px); max-height: calc(100vh - 150px); overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); transform: translateY(14px) scale(.96); transform-origin: 100% 100%; opacity: 0; visibility: hidden; transition: transform .3s cubic-bezier(.2, .8, .3, 1), opacity .24s ease, visibility .24s; } .kf--open .kf__panel { transform: none; opacity: 1; visibility: visible; } .kf__head { display: flex; align-items: center; gap: 11px; padding: 14px 14px 14px 16px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: linear-gradient(135deg, var(--navy) 0%, #19384f 100%); color: #fff; } .kf__ava { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); } .kf__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .kf__who strong { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; } .kf__who em { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-style: normal; color: rgba(255, 255, 255, .74); } .kf__live { width: 6px; height: 6px; border-radius: 50%; background: #48d18a; } .kf__x { margin-left: auto; flex: none; padding: 6px; border-radius: 8px; color: rgba(255, 255, 255, .7); transition: all .18s ease; } .kf__x:hover { background: rgba(255, 255, 255, .14); color: #fff; } .kf__body { padding: 15px; display: grid; gap: 12px; } .kf__hello { font-size: 13.5px; line-height: 1.68; color: var(--ink-2); } .kf__chips { display: flex; flex-wrap: wrap; gap: 7px; } .kf__chip { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-soft); color: var(--navy); font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.35; text-align: left; transition: all .18s ease; } .kf__chip:hover { border-color: var(--red); background: #fff; color: var(--red); } .kf__qrbox { display: grid; justify-items: center; gap: 8px; padding: 13px 13px 12px; border-radius: 14px; background: var(--bg-soft); border: 1px dashed var(--line); } .kf__qr, .kf__qrph { width: 118px; height: 118px; border-radius: 10px; background: #fff; border: 1px solid var(--line); } .kf__qr { object-fit: contain; display: block; } .kf__qrph { display: grid; place-items: center; gap: 5px; padding: 10px; text-align: center; } .kf__qrph-ic { color: var(--muted); } .kf__qrph strong { font-size: 12.5px; font-weight: 700; color: var(--navy); } .kf__qrph-tx { font-size: 11px; line-height: 1.55; color: var(--muted-2); } .kf__qrtip { font-size: 12.5px; font-weight: 700; color: var(--navy); } .kf__go { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--red); } .kf__go:hover { text-decoration: underline; } .kf__foot { padding: 0 16px 15px; display: grid; gap: 10px; } .kf__tel { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--navy); } .kf__tel:hover { color: var(--red); } .kf__never { justify-self: center; font-family: inherit; font-size: 11.5px; color: var(--muted-2); text-decoration: underline; } .kf__never:hover { color: var(--muted); } /* 面板一展开就让右侧悬浮栏退场（原本的 transition 只有 transform，这里补上淡出） */ .dock { transition: transform .3s cubic-bezier(.2, .8, .3, 1), opacity .22s ease, visibility .22s; } body.kf-open .dock { opacity: 0; visibility: hidden; pointer-events: none; } @media (max-width: 1024px) { /* 窄屏是底部固定操作栏（mobile-bar，约 62px），气泡要抬到它上面 */ .kf { right: 14px; bottom: 74px; } .kf__panel { max-height: calc(100vh - 210px); } } @media (max-width: 768px) { .kf { left: 14px; right: 14px; align-items: stretch; } .kf__launcher { align-self: flex-end; padding: 10px 15px 10px 12px; font-size: 13.5px; } .kf__panel { width: auto; max-width: none; } .kf__body { padding: 14px; gap: 12px; } .kf__foot { padding: 0 14px 14px; } .kf__qr, .kf__qrph { width: 124px; height: 124px; } } /* ========================================================================== 13. 弹层 ========================================================================== */ .tmc-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 20px; } .tmc-modal__mask { position: absolute; inset: 0; border: 0; padding: 0; width: 100%; background: rgba(6, 24, 38, .62); backdrop-filter: blur(3px); opacity: 0; transition: opacity .24s ease; } .tmc-modal.is-open .tmc-modal__mask { opacity: 1; } .tmc-modal__panel { position: relative; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; border-radius: var(--r-lg); padding: 30px; box-shadow: var(--shadow-lg); transform: translateY(16px) scale(.98); opacity: 0; transition: all .26s cubic-bezier(.2, .8, .3, 1); } .tmc-modal.is-open .tmc-modal__panel { transform: none; opacity: 1; } .tmc-modal__panel--wide { max-width: 880px; } .tmc-modal__panel--sm { max-width: 440px; } .tmc-modal__panel--md { max-width: 620px; } .tmc-modal__x { position: absolute; right: 16px; top: 16px; padding: 7px; border-radius: 9px; color: var(--muted); transition: all .18s ease; } .tmc-modal__x:hover { background: var(--bg-soft); color: var(--navy); } .tmc-modal__head { margin-bottom: 22px; padding-right: 30px; } .tmc-modal__eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; } .tmc-modal__head h2 { font-size: 25px; margin: 10px 0 8px; } .tmc-modal__head p { font-size: 14.5px; color: var(--muted); line-height: 1.75; } .tmc-form--modal { gap: 15px; } /* 报价估算器 */ .quoter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 26px; } .quoter__field { margin-bottom: 16px; } .quoter__field label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 7px; } .quoter__field select { width: 100%; padding: 13px 15px; border-radius: 10px; background: var(--bg-soft); border: 1.5px solid var(--line); font-size: 15px; color: var(--ink); appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; } .quoter__field select:focus { outline: none; border-color: var(--navy); background-color: #fff; } .quoter__result { padding: 24px; border-radius: var(--r-lg); background: var(--navy); text-align: center; } .quoter__label { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .6); letter-spacing: .08em; } .quoter__amount { margin: 10px 0 16px; font-family: var(--font-num); font-size: 30px; font-weight: 800; color: #fff; letter-spacing: .01em; } .quoter__note { font-size: 12.5px; color: rgba(255, 255, 255, .6); line-height: 1.7; margin-bottom: 18px; text-align: left; } .quoter__result .btn { margin-bottom: 9px; } .quoter__result .btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); } .quoter__result .btn--outline:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; } /* --- 报价估算器 · 真实价目双模式 -------------------------------------- */ .quoter { align-items: start; } .quoter__tabs { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .quoter__tab { padding: 12px 15px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg-soft); text-align: left; cursor: pointer; transition: all .18s ease; } .quoter__tab strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink-2); } .quoter__tab em { display: block; font-style: normal; font-size: 12px; color: var(--muted-2); margin-top: 3px; line-height: 1.5; } .quoter__tab:hover { border-color: var(--line-2); } .quoter__tab.is-active { border-color: var(--navy); background: #fff; box-shadow: var(--shadow-sm); } .quoter__tab.is-active strong { color: var(--navy); } .quoter__pane { grid-column: 1; grid-row: 2; min-width: 0; } .quoter__pane[hidden] { display: none; } .quoter__bar { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 10px; margin-bottom: 12px; } .quoter__search { position: relative; min-width: 0; } .quoter__search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; } .quoter__search input { width: 100%; padding: 11px 12px 11px 36px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg-soft); font-size: 14px; color: var(--ink); } .quoter__search input:focus { outline: none; border-color: var(--navy); background: #fff; } .quoter__hours label { display: block; font-size: 11.5px; color: var(--muted-2); margin-bottom: 5px; line-height: 1.4; } .quoter__hours select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg-soft); font-size: 13.5px; color: var(--ink); } .quoter__hours select:focus { outline: none; border-color: var(--navy); background: #fff; } .quoter__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; } .qchip { padding: 7px 13px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: 13px; color: var(--ink-2); cursor: pointer; white-space: nowrap; transition: all .16s ease; } .qchip em { font-style: normal; color: var(--muted-2); font-size: 11.5px; margin-left: 2px; } .qchip:hover { border-color: var(--line-2); } .qchip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; } .qchip.is-active em { color: rgba(255, 255, 255, .72); } .quoter__list { max-height: 380px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 12px; background: #fff; } .qsub { border-bottom: 1px solid var(--line); } .qsub:last-child { border-bottom: 0; } .qsub__hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-soft); } .qsub__hd strong { color: var(--navy); font-size: 13.5px; font-weight: 700; } .qsub__hd em { font-style: normal; color: var(--muted-2); font-size: 11.5px; flex: 0 0 auto; } .qsub__bd { padding: 4px 0; } .qitem-wrap.is-hide { display: none; } .qsub__more { display: block; width: 100%; padding: 9px; border: 0; border-top: 1px dashed var(--line); background: transparent; color: var(--red); font-size: 12.5px; cursor: pointer; } .qsub__more:hover { background: var(--bg-soft); } .qitem { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 9px 14px; cursor: pointer; } .qitem:hover { background: var(--bg-soft); } .qitem.is-on { background: var(--bg-soft); } .qitem.is-on .qitem__n { color: var(--navy); font-weight: 700; } .qitem.is-on .qitem__p { color: var(--green); } .qitem input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--green); } .qitem__n { font-size: 14px; color: var(--ink); line-height: 1.45; } .qitem__m { grid-column: 2; font-size: 11.5px; color: var(--muted-2); line-height: 1.5; } .qitem__p { grid-column: 3; grid-row: 1 / span 2; align-self: center; white-space: nowrap; font-family: var(--font-num); font-size: 13px; font-weight: 700; color: var(--navy); } .quoter__empty { padding: 26px 16px; text-align: center; color: var(--muted-2); font-size: 13.5px; } .quoter__hint { margin-top: 9px; font-size: 12px; color: var(--muted-2); line-height: 1.7; } .quoter__side { grid-column: 2; grid-row: 2; align-self: start; position: sticky; top: 0; min-width: 0; } .quoter__rush { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin-bottom: 12px; } .quoter__rush label { font-size: 12.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; } .quoter__rush select { padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg-soft); font-size: 13.5px; color: var(--ink); } .quoter__result { text-align: left; } .quoter__amount { margin: 8px 0 10px; } .quoter__meta { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin-bottom: 14px; } .quoter__detail { margin-bottom: 14px; border-top: 1px solid var(--surface-line); padding-top: 10px; } .quoter__detail summary { font-size: 12.5px; color: var(--navy); cursor: pointer; } .quoter__detail summary span { color: var(--muted-2); } .quoter__detail ul { margin: 10px 0 0; max-height: 168px; overflow-y: auto; display: grid; gap: 6px; } .quoter__detail li { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); } .quoter__detail li b { font-family: var(--font-num); color: var(--ink-2); font-weight: 700; white-space: nowrap; } .quoter__actions { display: grid; gap: 9px; } .quoter__result .btn { margin-bottom: 0; } .quoter__result .quoter__note { margin: 14px 0 0; } @media (max-width: 900px) { .quoter { grid-template-columns: minmax(0, 1fr); } .quoter__tabs { grid-column: 1; } .quoter__pane, .quoter__side { grid-column: 1; grid-row: auto; position: static; } .quoter__bar { grid-template-columns: minmax(0, 1fr); } .quoter__list { max-height: 320px; } } @media (max-width: 520px) { .quoter__tabs { grid-template-columns: 1fr; } .quoter__rush { grid-template-columns: 1fr; } .qitem { grid-template-columns: 18px minmax(0, 1fr); } .qitem__m, .qitem__p { grid-column: 2; grid-row: auto; } .qitem__p { justify-self: start; } } /* 报告核验 */ .verify-steps { display: grid; gap: 14px; margin-bottom: 22px; } .verify-steps li { padding: 16px 18px; border-radius: var(--r); background: var(--bg-soft); border-left: 3px solid var(--red); } .verify-steps strong { display: block; font-size: 15px; color: var(--navy); margin-bottom: 4px; } .verify-steps span { font-size: 14px; color: var(--muted); line-height: 1.75; } .verify-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } /* 微信 */ .wechat-box { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: center; } .wechat-box__qr { aspect-ratio: 1; border-radius: var(--r); background: var(--bg-soft); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; } .wechat-box__qr img { width: 100%; height: 100%; object-fit: contain; } .wechat-box__ph { display: grid; place-items: center; gap: 8px; color: var(--muted-2); } .wechat-box__ph em { font-style: normal; font-size: 11.5px; text-align: center; line-height: 1.5; } .wechat-box__alt { display: grid; gap: 9px; } .wechat-box__alt p { font-size: 14px; color: var(--muted); } /* 微信 · 两套二维码（电子电器 / 汽车零部件） */ .wechat-nest { display: grid; gap: 18px; } .wechat-duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .wechat-card { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 14px 14px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-1); } .wechat-card__qr { width: 100%; aspect-ratio: 1; max-width: 200px; border-radius: var(--r); background: var(--bg-soft); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; } .wechat-card__qr img { width: 100%; height: 100%; object-fit: contain; } .wechat-card__t { font-size: 14.5px; font-weight: 800; color: var(--navy); line-height: 1.3; } .wechat-card__d { font-size: 12px; color: var(--muted); line-height: 1.65; } .wechat-card__qr .ic { color: var(--navy); opacity: .38; } .wechat-card__qr .wechat-box__ph { width: 100%; height: 100%; } /* 灯箱 */ .lightbox { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 4vh 4vw; } .lightbox__mask { position: absolute; inset: 0; border: 0; padding: 0; width: 100%; background: rgba(4, 16, 26, .9); opacity: 0; transition: opacity .24s ease; cursor: zoom-out; } .lightbox.is-open .lightbox__mask { opacity: 1; } .lightbox__in { position: relative; z-index: 1; max-width: 1080px; width: 100%; } .lightbox__x { position: absolute; right: -6px; top: -50px; padding: 9px; border-radius: 10px; background: rgba(255, 255, 255, .12); color: #fff; } .lightbox__x:hover { background: rgba(255, 255, 255, .22); } .lightbox__figure { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); transform: scale(.96); opacity: 0; transition: all .28s cubic-bezier(.2, .8, .3, 1); max-height: calc(100vh - 12vh); display: flex; flex-direction: column; } .lightbox.is-open .lightbox__figure { transform: none; opacity: 1; } /* ⚠️ 灯箱是 flex 纵向布局 + max-height + overflow:hidden。 说明区（标题 / 编号 / 查询链接）必须 flex-shrink:0，否则视口一矮就被压缩、 内容溢出后被裁 —— 症状就是最下面那条「CNAS 认可名录查询」只露半截。 让位的是图片/视频（可收缩，min-height:0 才允许缩到内容以下）。 */ .lightbox__figure img { flex: 0 1 auto; min-height: 0; width: 100%; height: auto; max-height: calc(100vh - 24vh); object-fit: contain; background: var(--bg-soft); } /* 灯箱内播实拍视频（卡片带视频时，放大后直接放视频而不是静态图） width:auto + max-* 让竖屏/横屏素材都按原始比例自适应，不撑出大片黑边 */ .lightbox__video { flex: 0 1 auto; min-height: 0; display: block; margin: 0 auto; width: auto; max-width: 100%; max-height: calc(100vh - 24vh); background: #000; } /* 播视频时让卡片贴合视频宽度，竖屏素材两侧不留大片空白 */ .lightbox.is-video .lightbox__in { width: fit-content; max-width: min(1080px, 92vw); } /* 说明区永远占满自己的高度，绝不让 flex 压缩（查询链接必须完整可见） */ .lightbox__figure figcaption { flex: 0 0 auto; padding: 16px 22px; border-top: 1px solid var(--line); } .lightbox__figure figcaption strong { display: block; font-size: 16.5px; color: var(--navy); } .lightbox__figure figcaption span { display: block; font-size: 13.5px; color: var(--muted); margin-top: 3px; } .lightbox__link { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--red); } /* ========================================================================== 14. 页脚 ========================================================================== */ .site-footer { background: var(--navy); color: rgba(255, 255, 255, .72); padding: 62px 0 26px; } .foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; gap: 34px; } .foot-logo { height: 40px; margin-bottom: 16px; } .foot-brand p { font-size: 13.5px; line-height: 1.85; color: rgba(255, 255, 255, .62); } /* v3.10.39：页脚资质编号徽章（.foot-creds）已按 lemon 要求删除，编号看顶部信任条/关于页资质区 */ .foot-contact { display: grid; gap: 10px; margin-top: 16px; } .foot-tel, .foot-mail { display: inline-flex; align-items: center; gap: 11px; } .foot-tel .ic, .foot-mail .ic { color: var(--red); } .foot-tel em, .foot-mail em { display: block; font-style: normal; font-size: 11.5px; color: rgba(255, 255, 255, .55); } .foot-tel strong { display: block; font-family: var(--font-num); font-size: 22px; color: #fff; } .foot-mail strong { display: block; font-family: var(--font-num); font-size: 15px; color: #fff; } .foot-tel:hover strong, .foot-mail:hover strong { color: #fff; } .foot-col h3 { font-size: 13.5px; color: #fff; letter-spacing: .06em; margin-bottom: 15px; } .foot-col ul { display: grid; gap: 10px; } .foot-col a, .foot-col li { font-size: 13.5px; color: rgba(255, 255, 255, .66); } .foot-col a:hover { color: #fff; } /* v3.10.39 按行业找方案：条目 >8 条时切两列（footer.php 输出 .foot-col--ind2 / .foot-top--ind2）。行业名普遍 6-9 个字（约 90-125px），单列 182px 放一条刚好、 两列必须先把这一列在栅格里加宽，否则等于截断。 */ .foot-top--ind2 { grid-template-columns: 1.5fr 1.9fr 1fr 1fr 1.3fr; } .foot-col--ind2 ul { grid-template-columns: 1fr 1fr; gap: 10px 22px; } /* ≤1180 栅格收成 4 列后行业列只剩 ~220px，硬塞两列会把长名挤成两行 —— 退回单列 */ @media (max-width: 1180px) { .foot-col--ind2 ul { grid-template-columns: 1fr; } } .foot-base { margin-bottom: 8px; padding: 10px 12px; border-radius: var(--r); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); } .foot-base strong { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; color: #fff; } .foot-base strong i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; } .foot-base--branch strong i { background: var(--gold); color: var(--navy); } .foot-base span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .7); line-height: 1.6; margin-top: 3px; } .foot-base em { display: block; font-style: normal; font-size: 11.5px; color: var(--gold); margin-top: 4px; } .foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12.5px; color: rgba(255, 255, 255, .5); } .foot-bottom__mid { color: rgba(255, 255, 255, .42); } .foot-bottom a { color: rgba(255, 255, 255, .6); } .foot-bottom a:hover { color: #fff; } /* 认可范围说明（小字 · 浅灰 · 不显眼位置） 落位：页脚底栏最下一行、关于我们「资质与认可」区末尾。 文案与开关见 后台 › TMC 检测 › 站点设置 › 资质编号与查验入口 › 认可范围说明。 */ .scope-note { margin: 16px 0 0; max-width: 46em; /* v3.10.40：改 12.5px 后限宽，单行 <=46 字更好读 */ font-size: 12.5px; line-height: 1.85; color: var(--muted-2); } .scope-note--foot { margin-top: 20px; max-width: 46em; } .scope-note--creds { margin-top: 22px; max-width: 46em; } /* 页脚公正性声明 */ .foot-impartiality { margin-top: 46px; padding: 26px 28px; border-radius: 10px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); font-size: 13px; line-height: 1.7; color: rgba(255, 255, 255, .78); } .foot-impartiality h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14.5px; color: #fff; font-weight: 600; } .foot-impartiality h3 svg { flex: 0 0 16px; } .foot-impartiality p { margin: 0 0 14px; max-width: 46em; } /* v3.10.40 控行长远行 */ .foot-impartiality ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .foot-impartiality li { padding-left: 14px; position: relative; } .foot-impartiality li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } .foot-impartiality li b { color: #fff; font-weight: 600; } @media (max-width: 1024px) { .foot-impartiality ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .foot-impartiality { margin-top: 34px; padding: 20px 22px; } .foot-impartiality ul { grid-template-columns: 1fr; gap: 10px; } } /* 面包屑 */ .breadcrumb { font-size: 13px; color: var(--muted-2); padding: 20px 0 0; } .breadcrumb a { color: var(--muted); } /* ========================================================================== 15. 内页兼容（基础排版 / 旧类名兜底） ========================================================================== */ .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; box-shadow: var(--shadow-sm); transition: all .2s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .card h3 { font-size: 19px; margin-bottom: 8px; } .card p { color: var(--muted); font-size: 14.5px; line-height: 1.75; } .card .ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--navy); color: #fff; font-size: 19px; font-weight: 800; margin-bottom: 16px; } .card .more { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--red); } .grid { display: grid; gap: 22px; } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cta { padding: 46px; border-radius: var(--r-lg); text-align: center; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); color: #fff; } .cta h2 { color: #fff; font-size: 32px; margin-bottom: 12px; } .cta p { color: rgba(255, 255, 255, .72); font-size: 16px; margin-bottom: 24px; } .news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .news__item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } .news__thumb { height: 132px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); color: rgba(255, 255, 255, .8); display: grid; place-items: center; font-size: 12px; font-weight: 800; letter-spacing: .16em; } .news__body { padding: 20px 22px 24px; } .news__body h3 { font-size: 17.5px; margin-bottom: 8px; } .news__body p { font-size: 14px; color: var(--muted); line-height: 1.75; } .news__date { font-size: 12.5px; color: var(--muted-2); margin-bottom: 7px; } .qual { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .chip { padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font-size: 14px; font-weight: 700; } .stat-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; text-align: center; } .stat-band .n { font-family: var(--font-num); font-size: 40px; font-weight: 800; color: var(--navy); line-height: 1; } .stat-band .n small { font-size: 18px; } .stat-band .l { font-size: 14px; color: var(--muted); margin-top: 8px; } .ind-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .ind { display: grid; place-items: center; padding: 26px 16px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); font-weight: 700; color: var(--navy); transition: all .2s ease; } .ind:hover { border-color: var(--red); color: var(--red); transform: translateY(-3px); box-shadow: var(--shadow); } .hero__badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; } .hero__badges > div { font-size: 13px; color: rgba(255, 255, 255, .7); } .hero__badges strong { display: block; font-family: var(--font-num); font-size: 24px; color: #fff; } /* ========================================================================== 16. 响应式 ========================================================================== */ /* v3.10.4：新增第 6 个一级项「资讯与资源」后，1440 一带放不下了 —— 容器内容区只有 1192px，而 brand 227 + 导航 729 + CTA 380 + 两处 24px 间距 = 1384px， 导航项被 flex 压缩后横向压到右侧 CTA 上，并把整行顶出视口（1456 视口溢出 8px、 1366 溢出 45px、1200 溢出 148px）。容器居中最多能吸收这么多，算下来视口窄于 ~1458px 就会冒出横向滚动条，所以断点取 1456。 让位的办法是收回 header 里的电话按钮：热线在它正上方的信任条（.topbar__tel）一直可见， 这里是重复入口，1180 以下原本就已经隐藏，现在把这条提前。全尺寸留白只在 ≥1457px 生效。 */ @media (max-width: 1456px) { .nav { gap: 18px; } .nav-menu { gap: 4px; } .nav-link { padding: 11px 13px; font-size: 14.5px; } .nav-cta__tel { display: none; } } @media (max-width: 1180px) { .nav-menu { gap: 0; } .nav-link { padding: 10px 10px; font-size: 14.5px; } /* .nav-cta__tel 已在 ≤1456 隐藏，这里无需重复 */ .foot-top { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } .foot-col:nth-child(4) { display: none; } /* 栅格收窄后 4 列只剩 ~230px，卡面会被挤扁；1180 以下先降到 3 列，1024 再降到 2 列 */ .plan-grid, .case-grid--show { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* v3.10.4：1009–1085 这一段容器已放到全宽（100%），再没有居中余量可吸收， 6 个一级项 + brand + CTA 会顶出右边缘 ~50px。这里再收一档：内边距、间距、logo 高度。 */ @media (max-width: 1100px) { .nav { gap: 10px; } .nav-link { padding: 10px 7px; } .brand__logo { height: 34px; } /* 3 个下拉箭头共占 36px，这一档最紧，先把箭头收掉（下拉本身照常悬停展开） */ .nav-item.has-children .caret { display: none; } } @media (max-width: 1024px) { .section { padding: 68px 0; } .hero__in { grid-template-columns: 1fr; gap: 32px; } .hero__title { font-size: 44px; } .hero__card { max-width: 560px; } .plan-grid, .case-grid, .case-grid--show { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .verify-row { grid-template-columns: 1fr; } .lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 窄屏：大图横跨整行当头图，其余 6 张按 2 列 × 3 行铺满，不留空位 */ .lab--wide { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 9; } .apply-layout { grid-template-columns: 1fr; gap: 36px; } .foot-top { grid-template-columns: 1fr 1fr; gap: 28px; } .foot-col:nth-child(4) { display: block; } .grid-3, .news { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dock { display: none; } .mobile-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--line); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .mobile-bar__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 11px 4px; background: #fff; color: var(--navy); font-size: 12px; font-weight: 700; } .mobile-bar__btn--primary { background: var(--red); color: #fff; } body { padding-bottom: 62px; } .quoter { grid-template-columns: 1fr; } .insight-tabs { grid-template-columns: 1fr; gap: 10px; } .insight-tab { padding: 15px 18px; } .insight-tab__cn { font-size: 17px; } } @media (max-width: 900px) { .topbar__brand, .topbar__sep, .topbar__mail { display: none; } .topbar__in { gap: 10px; } .topbar__left { flex: 1 1 auto; } .topbar__creds { gap: 10px; flex: 1 1 auto; } .topbar__tel-label { display: none; } .topbar__tel strong { font-size: 14px; } .topbar__right { flex: 0 0 auto; } .nav__wrap { display: none; } .burger { display: flex; } .nav-cta .btn { display: none; } .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fact:nth-child(2) { border-right: 0; } .fact:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .1); } } /* 窄屏：收起证书编号，只留资质缩写，避免文字被裁成半截 */ @media (max-width: 620px) { .topbar { font-size: 11.5px; } .mc-num { display: none; } .topbar__check { display: none; } .topbar__creds { gap: 9px; } .mini-creds { gap: 4px; } .mini-creds .ic { width: 12px; height: 12px; } .topbar__tel .ic { width: 12px; height: 12px; } .topbar__tel strong { font-size: 13px; } } @media (max-width: 768px) { :root { --head-h: 60px; } .container { padding: 0 18px; } .section { padding: 56px 0; } .section-head { margin-bottom: 32px; } .section-head h2 { font-size: 28px; } .section-head > p { font-size: 15.5px; } .hero { padding-top: 46px; } .hero__title { font-size: 33px; } .hero__lede { font-size: 15.5px; } .hero__tag { font-size: 12px; } .promises { grid-template-columns: 1fr; } .hero__actions .btn { width: 100%; } .hero__tel { width: 100%; } .hero__tel strong { font-size: 22px; } .hero__creds { grid-template-columns: 1fr; } .hero__card { padding: 20px; max-width: 100%; } .hero__facts { border-radius: var(--r); } .fact { padding: 15px 16px; } .fact b { font-size: 20px; } .plan-grid, .case-grid, .cert-grid, .grid-3, .grid-4, .news, .ind-grid, .lab-grid { grid-template-columns: 1fr; } /* 客户墙在手机上仍走 2 列（单列会拉得很长），字号与内边距见上文客户墙段落 */ /* 移动端单列，证书框压扁一点，避免资质区过长（contain 不裁切，只是显示得更小） */ .cert__thumb { aspect-ratio: 1 / 1; } .lab--wide { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 3; } .apply-form { padding: 20px; } .form-row--2 { grid-template-columns: 1fr; } .apply-copy h2 { font-size: 27px; } .case__meta > div { grid-template-columns: 1fr; gap: 3px; } .insight { grid-template-columns: 1fr; gap: 14px; } .insight__go { justify-self: start; } .insight-foot { flex-direction: column; gap: 12px; text-align: center; } .tmc-modal { padding: 0; align-items: flex-end; } .tmc-modal__panel { max-width: 100%; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); max-height: 92vh; transform: translateY(100%); } .tmc-modal.is-open .tmc-modal__panel { transform: none; } .verify-actions { grid-template-columns: 1fr; } .wechat-box { grid-template-columns: 1fr; } .wechat-duo { gap: 10px; } .wechat-card { padding: 11px 9px 13px; border-radius: var(--r); } .wechat-card__t { font-size: 13.5px; } .wechat-card__d { font-size: 11px; } .wechat-box__qr { width: 200px; margin: 0 auto; } .quoter__amount { font-size: 25px; } .lightbox { padding: 2vh 14px; } .lightbox__x { top: -44px; right: 0; } .foot-top { grid-template-columns: 1fr; gap: 24px; } .foot-bottom { flex-direction: column; align-items: flex-start; gap: 8px; } .stat-band { grid-template-columns: repeat(2, 1fr); } .hero__badges { grid-template-columns: repeat(2, 1fr); } .section > .container > h1 { font-size: 28px; } .cta { padding: 30px 22px; } .cta h2 { font-size: 24px; } .reports__head { flex-direction: column; align-items: flex-start; gap: 6px; } } /* 减少动效偏好 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } html { scroll-behavior: auto; } .marquee__track { animation: none; } } /* 打印 */ @media print { .topbar, .site-header, .dock, .mobile-bar, .mobile-nav, .tmc-modal, .lightbox { display: none !important; } body { padding-bottom: 0; } .section { padding: 24px 0; } } /* ========================================================================== 17. 二三级页面组件 -------------------------------------------------------------------------- 二级页面（关于 / 服务 / 行业 / 实验室 / 案例 / 新闻 / 招聘 / 联系 / 常见问题） 与三级详情页（行业方案 / 服务 / 实验室 / 岗位 / 问答 / 文章）共用的一组组件。 与既有设计系统保持一致：白底、深蓝压场、红色点睛。 ========================================================================== */ /* -------------------------------------------------------------------------- 17.1 版式工具 -------------------------------------------------------------------------- */ .section--tight { padding: 46px 0; } .h2 { font-size: 38px; } .section-head--left { max-width: 820px; } .section-head--left h2 { font-size: 34px; } .eyebrow--light { color: rgba(255, 255, 255, .62); } .two-col { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 44px; align-items: start; } .two-col--text { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .two-col__main { min-width: 0; } .two-col__side { min-width: 0; display: grid; gap: 18px; position: sticky; top: calc(var(--head-h) + 22px); } .card-grid { display: grid; gap: 22px; } .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .row-act { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; } .row-act--center { justify-content: center; } .brand-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 26px; padding: 15px 18px; border-radius: var(--r-sm); background: var(--bg-soft); border-left: 3px solid var(--gold); color: var(--muted); font-size: 13.5px; line-height: 1.75; max-width: 46em; /* v3.10.40：修 88 字/行 */ } .brand-note .ic { flex: 0 0 auto; margin-top: 2px; color: var(--gold); } .brand-note--center { justify-content: center; text-align: center; margin-left: auto; margin-right: auto; } .tbl-note { margin-top: 12px; max-width: 46em; color: var(--muted-2); font-size: 13px; line-height: 1.7; } .muted-tx { color: var(--muted); font-size: 15px; line-height: 1.8; } .lead-tx { color: var(--ink-2); font-size: 18px; line-height: 1.8; } .empty-tx { color: var(--muted); font-size: 15.5px; line-height: 1.8; } .section-img { position: relative; margin: 0 0 30px; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-soft-2); } .section-img img { width: 100%; display: block; } .section-img--wide img { aspect-ratio: 21 / 9; object-fit: cover; } /* 关于页公司简介大图：悬停播放实拍视频（与首页 lab--video 同机制） */ .section-img--video { cursor: pointer; } .section-img--video img { transition: transform .4s ease; } .section-img--video:hover img { transform: scale(1.04); } .section-img__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; pointer-events: none; } .section-img--video:hover .section-img__video { opacity: 1; } .section-img__hint { position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(var(--deep-rgb), .82); color: #fff; font-size: 12px; font-weight: 700; transition: opacity .2s ease; } .section-img--video:hover .section-img__hint { opacity: 0; } .section-img__play { position: absolute; right: 12px; top: 12px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--deep-rgb), .82); color: #fff; transition: opacity .2s ease; } .section-img--video:hover .section-img__play { opacity: 0; } .section-img figcaption { display: block; margin-top: 10px; color: var(--muted); font-size: 13px; text-align: left; } /* 空态卡 */ .empty-card { padding: 44px 34px; border-radius: var(--r-lg); text-align: center; background: #fff; border: 1px dashed var(--line-2); } .empty-card__ic { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 50%; background: var(--bg-soft); color: var(--navy); } .empty-card h3 { font-size: 21px; margin-bottom: 10px; } .empty-card > strong { display: block; font-size: 21px; color: var(--navy); margin-bottom: 10px; } .empty-card p { color: var(--muted); font-size: 15px; line-height: 1.8; max-width: 560px; margin: 0 auto 18px; } .empty-card .btn { margin-top: 4px; } /* KPI 横排（招聘 / 关于） */ .kpi-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .kpi { padding: 28px 26px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .kpi b { display: block; font-family: var(--font-num); font-size: 27px; color: var(--navy); margin-bottom: 9px; letter-spacing: -.01em; } .kpi span { color: var(--muted); font-size: 14.5px; line-height: 1.75; } /* 键值列表 */ .kv { list-style: none; margin: 16px 0 20px; display: grid; gap: 1px; background: var(--line); border-radius: var(--r-sm); overflow: hidden; } .kv li { display: flex; justify-content: space-between; gap: 14px; padding: 12px 14px; background: #fff; font-size: 14px; } .kv li > span { color: var(--muted); } .kv li > b { color: var(--navy); font-weight: 700; text-align: right; } .kv__on { color: var(--green) !important; } /* 链接胶囊组 */ .link-chips { display: flex; flex-wrap: wrap; gap: 10px; } .link-chips .chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); color: var(--navy); font-size: 14.5px; font-weight: 700; transition: all .18s ease; } .link-chips .chip:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .link-chips .chip .ic { color: var(--red); } .link-chips .chip--all { background: var(--navy); border-color: var(--navy); color: #fff; } .link-chips .chip--all:hover { background: var(--red); border-color: var(--red); color: #fff; } .link-chips .chip--all .ic { color: rgba(255, 255, 255, .8); } /* -------------------------------------------------------------------------- 17.2 内页 Page-Hero -------------------------------------------------------------------------- */ .page-hero { position: relative; overflow: hidden; padding: 62px 0 66px; background: linear-gradient(140deg, var(--navy) 0%, var(--navy-2) 52%, var(--navy-3) 100%); color: rgba(255, 255, 255, .82); } .page-hero--compact { padding: 44px 0 48px; } /* 背景图统一图层（v3.10.35）：全站内页共用一张，压在 --grad-page 之上、文字之下。 --page-hero-bg / --page-hero-bg-op 由 templates/part-hero.php 写成行内变量； 后台「站点设置 → 内页页头背景」可换图与调不透明度（默认 .6 = 60%）。 独立伪元素是为了只给「图」设 opacity，不影响容器里的标题与按钮。 */ .page-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: var( --page-hero-bg ); background-size: cover; background-position: center 42%; background-repeat: no-repeat; opacity: var( --page-hero-bg-op, .6 ); pointer-events: none; } /* 文字一侧再压一层极淡白色蒙版：图再怎么换，深色标题都够清楚 */ .page-hero::after { content: ''; position: absolute; inset: 0; z-index: 0; /* 左侧（面包屑/大标题/导语）压厚保正文对比度，右侧渐隐让配对图露出来。 v3.10.36 起每页配的是实拍图（比原来那张浅色底纹暗），薄蒙版会让导语对比度掉到 2.0 上下， 这里配 .page-hero__lead 用 --ink-2 一起保。实测见 D:/tmcwp/verify_hero36_contrast.py。 */ background: linear-gradient(96deg, rgba(255, 255, 255, .74) 0%, rgba(255, 255, 255, .58) 50%, rgba(255, 255, 255, .20) 78%, rgba(255, 255, 255, 0) 100%); pointer-events: none; } .page-hero__in { position: relative; z-index: 1; } .page-hero .breadcrumb { margin-bottom: 20px; } .page-hero .breadcrumb a, .page-hero .breadcrumb > span { color: rgba(255, 255, 255, .58); } .page-hero .breadcrumb a:hover { color: #fff; } .page-hero .breadcrumb .breadcrumb__current { color: rgba(255, 255, 255, .9); } .page-hero__eyebrow { display: inline-block; margin-bottom: 14px; color: var(--acc-tint); font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .page-hero h1 { color: #fff; font-size: 44px; line-height: 1.2; letter-spacing: -.02em; max-width: 900px; margin-bottom: 18px; } .page-hero--compact h1 { font-size: 34px; max-width: 1000px; } .page-hero__lead { color: rgba(255, 255, 255, .74); font-size: 17px; line-height: 1.85; max-width: 780px; } .page-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } .breadcrumb a { color: var(--muted); font-weight: 600; } .breadcrumb a:hover { color: var(--red); } .breadcrumb__current { color: var(--ink); font-weight: 700; } /* -------------------------------------------------------------------------- 17.3 行业 / 服务 / 实验室卡片（icard） -------------------------------------------------------------------------- */ .icard { display: flex; flex-direction: column; position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: all .22s ease; } .icard:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; } .icard__top { position: relative; display: block; } .icard__img { display: block; aspect-ratio: 16 / 10; background: var(--bg-soft-2); overflow: hidden; } .icard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .icard:hover .icard__img img { transform: scale(1.05); } .icard__ico { display: grid; place-items: center; height: 108px; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); color: #fff; } .icard__ico .ic { width: 34px; height: 34px; opacity: .92; } .icard__tag { position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--navy); font-size: 12px; font-weight: 800; } .icard__bd { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; } .icard__en { color: var(--muted-2); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 7px; } .icard__name { display: block; color: var(--navy); font-size: 19px; font-weight: 800; line-height: 1.35; margin-bottom: 10px; } .icard:hover .icard__name { color: var(--red); } .icard__tx { display: block; color: var(--muted); font-size: 14.5px; line-height: 1.75; flex: 1; } .icard__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .icard__meta > span { padding: 4px 11px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-2); font-size: 12.5px; font-weight: 700; } .icard__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--red); font-size: 14px; font-weight: 800; } .icard__go .ic { transition: transform .2s ease; } .icard:hover .icard__go .ic { transform: translateX(4px); } /* -------------------------------------------------------------------------- 17.4 表格 -------------------------------------------------------------------------- */ .tbl-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); background: #fff; -webkit-overflow-scrolling: touch; } .tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 620px; } .tbl thead th { padding: 14px 18px; text-align: left; white-space: nowrap; background: var(--navy); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .03em; } .tbl tbody th, .tbl tbody td { padding: 14px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); line-height: 1.7; } .tbl tbody th { color: var(--navy); font-weight: 800; white-space: nowrap; } .tbl tbody td { color: var(--ink-2); } .tbl tbody tr:nth-child(even) td, .tbl tbody tr:nth-child(even) th { background: #FBFCFD; } .tbl tbody tr:hover td, .tbl tbody tr:hover th { background: var(--red-l); } .tbl--matrix { min-width: 780px; } .tbl--matrix thead th { text-align: center; } .tbl--matrix thead th:first-child { text-align: left; } .tbl--matrix tbody th a { color: var(--navy); font-weight: 800; } .tbl--matrix tbody th a:hover { color: var(--red); } .cell-mark { text-align: center !important; } .mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; } .mark--y { background: var(--acc-10); color: var(--red); } .mark--n { color: var(--muted-2); } .tbl--standards tbody th { width: 34%; } .tbl--equip { min-width: 720px; } .tbl--equip tbody th { width: 26%; } .tbl--equip tbody td:last-child { color: var(--muted); font-size: 13.5px; } /* -------------------------------------------------------------------------- 17.5 区块语法输出（blk / steps / feature-list / svc-grid） -------------------------------------------------------------------------- */ .blk-stack { display: block; } .blk-stack > .blk + .blk { margin-top: 40px; } .blk { display: block; } .blk__title { position: relative; font-size: 23px; color: var(--navy); margin-bottom: 20px; padding-left: 16px; } .blk__title::before { content: ''; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px; border-radius: 3px; background: var(--red); } .blk__p { color: var(--ink-2); font-size: 16px; line-height: 1.9; margin-bottom: 12px; } .blk--bullets .feature-list { margin-top: 4px; } .steps { list-style: none; display: grid; gap: 0; counter-reset: none; } .step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); } .step:last-child { border-bottom: 1px solid var(--line); } .step__n { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--red-l); color: var(--red); font-family: var(--font-num); font-size: 16px; font-weight: 800; } .step__bd b { display: block; color: var(--navy); font-size: 17px; font-weight: 800; margin-bottom: 5px; } .step__bd em { display: block; color: var(--red); font-size: 14px; font-style: normal; font-weight: 700; margin-bottom: 7px; } .step__bd p { color: var(--muted); font-size: 14.5px; line-height: 1.8; max-width: 46em; } .feature-list { list-style: none; display: grid; gap: 12px; } .feature-list > li { display: flex; align-items: flex-start; gap: 11px; color: var(--ink-2); font-size: 15px; line-height: 1.8; } .feature-list > li b { color: var(--navy); } .feature-list .tick { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 4px; border-radius: 50%; background: var(--acc-10); color: var(--red); } .feature-list--wide { gap: 14px; } .feature-list--wide > li { font-size: 15.5px; } .svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .svc-card { padding: 26px 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: all .2s ease; } .svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; } .svc-card .ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--red-l); color: var(--red); margin-bottom: 16px; } .svc-card h3, .svc-card__t { color: var(--navy); font-size: 17px; margin-bottom: 9px; font-weight: 700; } .svc-card p { color: var(--muted); font-size: 14.5px; line-height: 1.78; } /* -------------------------------------------------------------------------- 17.6 时间线 / 价值观 / 基地 / 设施 -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 17.6 时间线 / 价值观 / 基地 / 设施 -------------------------------------------------------------------------- */ /* 发展里程碑：竖版时间轴（2026-09-13 lemon） 横向版要左右拖动才看得全，实际没人会去点箭头 → 改竖版一屏到底。 设计语言不变：中轴凹槽轨道 + 强调色进度 + 径向渐变立体球 + 三层阴影卡片 + 浮雕年份 + 最新一站高亮 + 悬停上浮。 结构 section.tlx-sec（雪山背景层 / 遮罩层 / container） › div.vtl › ol.vtl__list（中轴画在它的两个伪元素上） › li.vtl__item（三列栅格：卡片 / 中轴 108px / 图片框，奇偶左右互换） › span.vtl__node（absolute 压在中轴上） ⚠️ 中轴用 left:50% + translateX(-50%) 贯穿整个列表；进度高度由 JS 写 --vtl-prog， **不要**改成每行画一段 —— 那样每一行都会出现断口。 ⚠️ span.vtl__node 必须 absolute（不能进栅格流），否则节点会把行高撑开， 卡片与图片框就对不齐了。 ⚠️ 图片框用 aspect-ratio 定比例 + object-fit:cover，别让原图尺寸决定行高。 */ /* ---- 板块背景：昆仑雪山（半透明）----------------------------------------- */ .tlx-sec { position: relative; overflow: hidden; } .tlx-sec__bg, .tlx-sec__scrim { position: absolute; inset: 0; pointer-events: none; } /* ⚠️ 桌面端必须用 background-attachment: fixed。 这个板块本身很高（9 站约 3000px），不加 fixed 时 cover 会按板块高度放大， 最后只剩正中央一小块雪峰（实测过），完全看不出是雪山。 */ .tlx-sec__bg { z-index: 0; opacity: .22; background: #fff url(images/kunlun.jpg) center/cover no-repeat; } /* 渐隐遮罩：把雪山压下去、首尾融回 --bg。 ⚠️ 所有主题的 --bg 都是 #FFFFFF，所以这里的白色写死不冲突； 哪天真改成带底色的主题，这几处 rgba 白色要一起换。 */ .tlx-sec__scrim { z-index: 1; background: linear-gradient(180deg, var(--bg) 0%, rgba(255, 255, 255, .44) 11%, rgba(255, 255, 255, .44) 74%, var(--bg) 100%); } .tlx-sec > .container { position: relative; z-index: 2; } @media (min-width: 769px) { .tlx-sec__bg { background-attachment: fixed; } } /* 手机端不用 fixed（iOS 上 fixed 背景会抖），改成「整幅雪山铺在板块顶部」， 往下由遮罩渐隐回白底。 */ @media (max-width: 768px) { .tlx-sec__bg { background-size: 100% auto; background-position: center top; background-repeat: no-repeat; } } /* ---- 中轴轨道 ------------------------------------------------------------ */ .vtl { position: relative; } .vtl__list { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 34px; } .vtl__list::before, .vtl__list::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 6px; border-radius: 999px; pointer-events: none; } .vtl__list::before { /* 凹槽本体：左暗右亮 = 一条物理导轨 */ top: 8px; bottom: 8px; z-index: 0; background: linear-gradient(90deg, var(--surface-3), #fff); box-shadow: inset 1px 0 2px rgba(16, 38, 58, .16), 1px 0 0 #fff; } .vtl__list::after { /* 已读进度：高度由 JS 写 --vtl-prog */ top: 8px; z-index: 1; height: calc(var(--vtl-prog, 0) * (100% - 16px)); background: linear-gradient(180deg, var(--red), var(--acc-30)); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .45), 0 2px 10px var(--acc-sh); transition: height .3s ease; } /* ---- 一行：卡片 / 中轴 / 图片框 ------------------------------------------ */ .vtl__item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 108px minmax(0, 1fr); align-items: center; } .vtl__item > .vtl__card, .vtl__item > .vtl__media { grid-row: 1; } .vtl__item > .vtl__card { grid-column: 1; } .vtl__item > .vtl__media { grid-column: 3; } /* 偶数行左右互换，形成上下咬合的阅读节奏 */ .vtl__item:nth-child(even) > .vtl__card { grid-column: 3; } .vtl__item:nth-child(even) > .vtl__media { grid-column: 1; } /* 进入视口逐条淡入。 ⚠️ opacity / transform 只挂在 .vtl--js 下（由 JS 加上这个类）—— 没有 JS 时整块照常显示，不会白屏。 */ .vtl--js .vtl__item { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1); } .vtl--js .vtl__item.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .vtl--js .vtl__item { opacity: 1; transform: none; transition: none; } } .vtl__card { position: relative; padding: 20px 22px 22px; border-radius: var(--r-lg); border: 1px solid var(--line); background: linear-gradient(158deg, #fff, var(--surface-1)); /* 立体三层：顶部高光 → 挤出侧边 → 落地投影。缺一层就变扁平卡片 */ box-shadow: inset 0 1px 0 #fff, 0 1px 0 var(--line-2), 0 3px 0 var(--surface-3), 0 14px 26px -12px rgba(16, 38, 58, .22); transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease; } .vtl__card::before { /* 左上柔光，让平面有弧度 */ content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 62%); } .vtl__card::after { /* 顶部强调色压条 */ content: ''; position: absolute; left: 20px; right: 20px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--red), var(--acc-30)); } .vtl__item:hover .vtl__card { transform: translateY(-6px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 var(--line-2), 0 6px 0 var(--surface-3), 0 24px 40px -14px rgba(16, 38, 58, .3); } /* ---- 图片框（含悬停播实拍）---------------------------------------------- */ .vtl__media { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-2); box-shadow: inset 0 1px 0 #fff, 0 1px 0 var(--line-2), 0 3px 0 var(--surface-3), 0 16px 30px -14px rgba(16, 38, 58, .26); transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease; } .vtl__media img, .vtl__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .vtl__media img { transition: transform .6s cubic-bezier(.22, .61, .36, 1); } .vtl__media:hover img { transform: scale(1.05); } .vtl__media:hover { transform: translateY(-6px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 var(--line-2), 0 6px 0 var(--surface-3), 0 26px 42px -14px rgba(16, 38, 58, .34); } /* 实拍视频：默认透明压在图片上，悬停 / 触屏点按才淡入播放（同首页实验室实拍） */ .vtl__video { opacity: 0; transition: opacity .35s ease; pointer-events: none; } .vtl__media:hover .vtl__video, .vtl__media.is-playing .vtl__video { opacity: 1; } .vtl__cap { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: rgba(var(--deep-rgb), .82); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; } .vtl__hint { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(var(--deep-rgb), .82); color: #fff; font-size: 12px; font-weight: 700; transition: opacity .2s ease; } .vtl__play { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--red); box-shadow: 0 8px 20px -8px rgba(16, 38, 58, .55); transition: opacity .25s ease, transform .25s ease; } .vtl__media:hover .vtl__hint, .vtl__media:hover .vtl__play { opacity: 0; } /* ---- 中轴上的立体球 ------------------------------------------------------ */ .vtl__node { position: absolute; left: 50%; top: 50%; z-index: 2; width: 22px; height: 22px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 34% 28%, #fff 0 22%, var(--red) 58%, var(--red-d) 100%); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line), 0 6px 12px -3px rgba(16, 38, 58, .4); transition: transform .25s ease; } .vtl__item:hover .vtl__node { transform: translate(-50%, -50%) scale(1.18); } .vtl__item.is-now .vtl__node { box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--dot-ring), 0 6px 14px -2px var(--acc-sh), 0 0 0 12px var(--acc-10); } /* ---- 年份 / 标签 / 文案 -------------------------------------------------- */ .vtl__year { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-family: var(--font-num); font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.01em; color: var(--navy); text-shadow: 0 1px 0 #fff, 0 2px 3px rgba(16, 38, 58, .14); /* 轻微浮雕 */ } .vtl__tag { font-family: var(--font); font-size: 11.5px; font-style: normal; font-weight: 800; letter-spacing: .1em; color: var(--red); padding: 4px 9px; border-radius: 999px; background: var(--red-l); border: 1px solid var(--acc-30); } .vtl__card b { display: block; color: var(--ink); font-size: 17px; font-weight: 800; line-height: 1.5; margin-bottom: 9px; } .vtl__card p { color: var(--muted); font-size: 13.8px; line-height: 1.8; } /* 最新一站（现在是 2026 东莞塘厦）：底色走强调色浅调 + 年份变强调色 */ .vtl__item.is-now .vtl__card { background: linear-gradient(158deg, #fff, var(--red-l)); border-color: var(--acc-30); } .vtl__item.is-now .vtl__year { color: var(--red); } .val-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .val { padding: 28px 24px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); } .val__ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: 12px; background: rgba(255, 255, 255, .1); color: var(--acc-tint); } .val b { display: block; color: #fff; font-size: 18px; font-weight: 800; margin-bottom: 4px; } .val em { display: block; color: rgba(255, 255, 255, .55); font-size: 13px; font-style: normal; margin-bottom: 12px; } .val p { color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.78; } .base-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } .base { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .base__img { aspect-ratio: 16 / 10; height: 320px; background: var(--bg-soft-2); overflow: hidden; } .base__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* 双基地图片库：与首页实验室实拍一致的自动轮播（淡入淡出 + 圆点） */ .base__img--gal { position: relative; } .base__img--gal .base__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; } .base__img--gal .base__slide.is-active { opacity: 1; } .base__dots { position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2; display: flex; justify-content: center; gap: 8px; pointer-events: none; } .base__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .55); pointer-events: auto; cursor: pointer; transition: all .2s ease; } .base__dot.is-active { width: 20px; border-radius: 5px; background: #fff; } .base__bd { padding: 24px 26px 26px; } .base__en { color: var(--muted-2); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .base__bd h3 { color: var(--navy); font-size: 20px; margin: 7px 0 10px; } .base__role { color: var(--red); font-size: 13.5px; font-weight: 700; margin-bottom: 14px; } .base__addr { color: var(--muted); font-size: 14.5px; line-height: 1.78; } .base__tel { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; color: var(--navy); font-weight: 800; font-size: 15px; } .base__tel:hover { color: var(--red); } .base__note { margin-top: 14px; color: var(--muted-2); font-size: 13px; line-height: 1.7; } .fac { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } .fac__img { aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--bg-soft-2); } .fac__img img { width: 100%; height: 100%; object-fit: cover; } .fac__bd { padding: 18px 20px 20px; } .fac__bd b { display: block; color: var(--navy); font-size: 17px; font-weight: 800; margin-bottom: 8px; } .fac__bd p { color: var(--muted); font-size: 14px; line-height: 1.75; } /* 数据带（实验室详情 / 内页通用） */ .stat-band__i { text-align: center; } .stat-band__i b { display: block; font-family: var(--font-num); font-size: 40px; font-weight: 800; color: var(--navy); line-height: 1; } .stat-band__i span { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; } /* -------------------------------------------------------------------------- 17.7 筛选栏 / 新闻网格 / 分页 -------------------------------------------------------------------------- */ .filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; } .filter { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 14px; font-weight: 700; transition: all .18s ease; } .filter:hover { border-color: var(--red); color: var(--red); } .filter.is-active { background: var(--navy); border-color: var(--navy); color: #fff; } .filter em { font-style: normal; font-family: var(--font-num); font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--bg-soft); color: var(--muted); } .filter.is-active em { background: rgba(255, 255, 255, .18); color: #fff; } .filter-desc { margin: -14px 0 28px; color: var(--muted); font-size: 14.5px; line-height: 1.8; } /* 覆盖旧版 .news（旧版把 .news 当网格容器用，这里改为卡片） */ .news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .news-grid .news { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: all .22s ease; } .news-grid .news:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; } .news__link { display: flex; flex-direction: column; height: 100%; } .news__img { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--bg-soft-2); overflow: hidden; } .news__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .news-grid .news:hover .news__img img { transform: scale(1.05); } .news__cat { position: absolute; top: 13px; left: 13px; font-style: normal; padding: 5px 12px; border-radius: 999px; background: rgba(var(--deep-rgb), .86); color: #fff; font-size: 12px; font-weight: 800; } .news__bd { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; } .news__bd time { color: var(--muted-2); font-size: 12.5px; font-weight: 700; margin-bottom: 8px; } .news__bd strong { display: block; color: var(--navy); font-size: 17.5px; font-weight: 800; line-height: 1.45; margin-bottom: 10px; } .news-grid .news:hover .news__bd strong { color: var(--red); } .news__ex { display: block; flex: 1; color: var(--muted); font-size: 14px; line-height: 1.78; } .news__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--red); font-size: 13.5px; font-weight: 800; } .news-grid .news:hover .news__go .ic { transform: translateX(4px); } .news__go .ic { transition: transform .2s ease; } /* TÜV SÜD press-and-media 风格：资讯列表改为简洁的日期 + 标题 + 摘要纵向列表 */ .press-list { display: flex; flex-direction: column; margin-top: 36px; } .press-item { border-bottom: 1px solid var(--line); } .press-item__link { display: grid; grid-template-columns: 120px 1fr; gap: 28px; padding: 30px 0; color: inherit; text-decoration: none; transition: background-color .2s ease; } .press-item__link:hover { background-color: var(--surface-2); } .press-item__date { color: var(--muted); font-size: 14px; font-weight: 700; line-height: 1.6; white-space: nowrap; font-family: var(--font-num); } .press-item__body { min-width: 0; } .press-item__cat { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted-2); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .press-item__title { margin: 0 0 10px; font-size: 21px; font-weight: 800; color: var(--navy); line-height: 1.35; transition: color .2s ease; } .press-item__link:hover .press-item__title { color: var(--red); } .press-item__ex { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 44px; } .pager .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 13px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line-2); color: var(--ink-2); font-size: 14.5px; font-weight: 700; } .pager .page-numbers:hover { border-color: var(--red); color: var(--red); } .pager .page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; } .pager .page-numbers.dots { background: transparent; border-color: transparent; } /* 订阅引导带 */ .sub-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; margin-top: 54px; padding: 34px 38px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); } .sub-band h3 { color: #fff; font-size: 22px; margin-bottom: 8px; } .sub-band p { color: rgba(255, 255, 255, .72); font-size: 15px; line-height: 1.8; max-width: 640px; } /* -------------------------------------------------------------------------- 17.8 常见问题 -------------------------------------------------------------------------- */ .faq-layout { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); gap: 46px; align-items: start; } .faq-layout__main { min-width: 0; } .faq-layout__side { min-width: 0; display: grid; gap: 18px; position: sticky; top: calc(var(--head-h) + 22px); } .faq-group { display: block; scroll-margin-top: calc(var(--head-h) + 20px); } .faq-group + .faq-group { margin-top: 46px; } .faq-group__head { margin-bottom: 28px; } .faq-group__eyebrow { color: var(--red); font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } .faq-group__title { color: var(--navy); font-size: 26px; margin: 10px 0 12px; } .faq-group__desc { color: var(--muted); font-size: 14.5px; line-height: 1.8; } .faq-list { display: grid; gap: 12px; } .faq-item { border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color .18s ease, box-shadow .18s ease; } .faq-item[open] { border-color: var(--line-2); box-shadow: var(--shadow-sm); } .faq-item__q { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; color: var(--navy); font-size: 16.5px; font-weight: 800; line-height: 1.6; } .faq-item__q::-webkit-details-marker { display: none; } .faq-item__q:hover { color: var(--red); } .faq-item__ico { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; background: var(--bg-soft); color: var(--muted); transition: all .2s ease; } .faq-item[open] .faq-item__ico { background: var(--red); color: #fff; transform: rotate(90deg); } .faq-item__a { margin-top: 6px; padding: 0 22px 22px; color: var(--ink-2); font-size: 15px; line-height: 1.85; } .faq-item__a p + p { margin-top: 12px; } .faq-item__a ul, .faq-item__a ol { margin: 10px 0 10px 20px; } .faq-item__a li { margin-bottom: 7px; } .faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; } .faq-grid .faq-item { padding: 26px 28px 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow-wrap: break-word; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .faq-grid .faq-item:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-2px); } .faq-grid .faq-item h3 { margin: 0 0 14px; color: var(--navy); font-size: 17px; font-weight: 800; line-height: 1.55; } .faq-grid .faq-item__a { margin-top: 0; padding: 0; color: var(--ink-2); font-size: 15px; line-height: 1.85; } .faq-grid .faq-item__a p { margin: 0; } .faq-grid .faq-item__a p + p { margin-top: 10px; } /* -------------------------------------------------------------------------- 17.9 侧栏卡片 / CTA 转化带 -------------------------------------------------------------------------- */ .notice-card { padding: 26px 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .notice-card--soft { background: var(--bg-soft); border-color: transparent; box-shadow: none; } .notice-card__ico, .notice-card__ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 15px; border-radius: 12px; background: var(--red-l); color: var(--red); } .notice-card__ic { float: left; margin: 0 16px 6px 0; } .notice-card strong, .notice-card__t { display: block; color: var(--navy); font-size: 18px; font-weight: 800; margin-bottom: 10px; } .notice-card p { color: var(--muted); font-size: 14.5px; line-height: 1.8; } .notice-card .btn { margin-top: 18px; } .notice-card__tel { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; color: var(--navy); font-size: 15px; font-weight: 800; } .notice-card__tel:hover { color: var(--red); } .notice-card__list { list-style: none; display: grid; gap: 10px; } .notice-card__list a { display: inline-flex; align-items: center; color: var(--ink-2); font-size: 14.5px; font-weight: 600; } .notice-card__list a::before { content: '→'; margin-right: 8px; color: var(--red); font-weight: 800; } .notice-card__list a:hover { color: var(--red); } .cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px; padding: 44px 46px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%); } .cta-band__tx { max-width: 640px; } .cta-band h2 { color: #fff; font-size: 29px; margin-bottom: 12px; } .cta-band__tx p { color: rgba(255, 255, 255, .72); font-size: 15.5px; line-height: 1.82; } .cta-band__act { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .cta-band__tel { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .72); font-size: 14px; } .cta-band__tel:hover { color: #fff; } /* -------------------------------------------------------------------------- 17.9b 首页新增 · 认证业务比重（检测 / 认证 / 跨界合规 三柱） -------------------------------------------------------------------------- */ .pillar-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .pillar { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 28px 26px 30px; } .pillar__k { font-family: var(--font-num); font-size: 12.5px; letter-spacing: .05em; color: var(--muted); text-transform: uppercase; } .pillar__t { font-size: 21px; color: var(--navy); margin: 10px 0 12px; line-height: 1.35; } .pillar__d { font-size: 15px; color: var(--ink-2); line-height: 1.82; } .pillar__d ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; } .pillar__d li { position: relative; padding-left: 22px; } .pillar__d li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); } .pillar--hot { border-color: var(--red); background: linear-gradient(180deg, rgba(255, 102, 0, .06), var(--surface)); box-shadow: 0 14px 34px rgba(255, 102, 0, .14); } .pillar--hot .pillar__t { color: var(--red); } .pillar__tag { position: absolute; top: -13px; left: 26px; background: var(--red); color: #fff; font-size: 12.5px; font-weight: 700; padding: 5px 13px; border-radius: 999px; box-shadow: 0 6px 16px rgba(255, 102, 0, .3); } .cert-weight-note { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding: 16px 20px; border-radius: var(--r-lg); background: var(--bg-soft); border-left: 4px solid var(--red); font-size: 15.5px; color: var(--ink-2); line-height: 1.8; } .cert-weight-note b { color: var(--navy); } /* -------------------------------------------------------------------------- 17.9c 首页新增 · 欧盟新电池法规预热板块（2027 推广） -------------------------------------------------------------------------- */ .eu-teaser { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 36px 34px; position: relative; overflow: hidden; } .eu-teaser::before { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 102, 0, .12), transparent 70%); } .eu-teaser__badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--red); border: 1px solid var(--red); border-radius: 999px; padding: 5px 14px; } .eu-teaser__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: euPulse 1.8s infinite; } @keyframes euPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .eu-teaser h3 { font-size: 26px; color: var(--navy); margin: 16px 0 10px; line-height: 1.4; position: relative; } .eu-teaser__lead { font-size: 16px; color: var(--ink-2); line-height: 1.85; max-width: 760px; position: relative; } .tl-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 28px 0 6px; position: relative; } .tl-mini__i { border-left: 3px solid var(--red); padding: 4px 0 4px 16px; } .tl-mini__d { font-family: var(--font-num); font-weight: 800; color: var(--navy); font-size: 16px; } .tl-mini__t { font-size: 14.5px; color: var(--ink-2); margin-top: 5px; line-height: 1.7; } .eu-teaser__ready { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; position: relative; } .eu-teaser__ready .chip { font-size: 13.5px; color: var(--navy); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; } .eu-teaser__act { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 14px; position: relative; } @media (max-width: 900px) { .pillar-row { grid-template-columns: 1fr; } .tl-mini { grid-template-columns: 1fr; gap: 14px; } } @media (max-width: 768px) { .eu-teaser { padding: 28px 22px; } .eu-teaser h3 { font-size: 22px; } } /* -------------------------------------------------------------------------- 17.10 行业 / 服务详情专用 -------------------------------------------------------------------------- */ .pain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .pain { padding: 26px 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--red); } .pain__n { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 14px; border-radius: 50%; background: var(--red-l); color: var(--red); font-family: var(--font-num); font-size: 14px; font-weight: 800; } .pain p { color: var(--ink-2); font-size: 15px; line-height: 1.82; } .cycle-band { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 30px 34px; border-radius: var(--r-lg); background: var(--bg-soft); border-left: 4px solid var(--gold); } .cycle-band__ico { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; border-radius: 14px; background: #fff; color: var(--gold); box-shadow: var(--shadow-sm); } .cycle-band > div { flex: 1 1 380px; } .cycle-band h2 { color: var(--navy); font-size: 21px; margin-bottom: 8px; } .cycle-band p { color: var(--ink-2); font-size: 15px; line-height: 1.82; } .cap-grid { display: flex; flex-wrap: wrap; gap: 10px; } .cap { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-size: 14px; font-weight: 600; line-height: 1.5; } .cap .ic { color: var(--red); flex: 0 0 auto; } .std-list { display: flex; flex-wrap: wrap; gap: 9px; } .std { padding: 8px 14px; border-radius: 6px; background: var(--bg-soft); color: var(--ink-2); font-family: var(--font-num); font-size: 13px; font-weight: 700; letter-spacing: .01em; } /* -------------------------------------------------------------------------- 17.11 联系页 -------------------------------------------------------------------------- */ .contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.38fr); gap: 40px; align-items: start; } .contact-side { display: grid; gap: 26px; min-width: 0; } .contact-form-wrap { min-width: 0; } .office { display: grid; grid-template-columns: 132px minmax(0, 1fr); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .office__img { background: var(--bg-soft-2); } .office__img img { width: 100%; height: 100%; object-fit: cover; } .office__bd { padding: 22px 24px; } .office__en { color: var(--muted-2); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .office__bd h3 { color: var(--navy); font-size: 19px; margin: 6px 0 4px; } .office__role { color: var(--red); font-size: 13px; font-weight: 700; margin-bottom: 12px; } .office__list { list-style: none; display: grid; gap: 9px; } .office__list li { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 14px; line-height: 1.7; } .office__list li .ic { flex: 0 0 auto; margin-top: 3px; color: var(--navy); opacity: .55; } .office__list a { color: var(--navy); font-weight: 700; } .office__list a:hover { color: var(--red); } .office__note { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--muted-2); font-size: 13px; line-height: 1.7; } .ship-guide { margin-top: 26px; padding: 26px 28px; border-radius: var(--r-lg); background: var(--bg-soft); border-left: 4px solid var(--gold); } .ship-guide h3 { color: var(--navy); font-size: 19px; margin-bottom: 12px; } .ship-guide ol { margin-left: 20px; display: grid; gap: 9px; } .ship-guide li { color: var(--ink-2); font-size: 14.5px; line-height: 1.8; } .map-box { margin-top: 30px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: #fff; } .map-box__ph { display: grid; place-items: center; gap: 8px; padding: 54px 24px; text-align: center; background: repeating-linear-gradient(45deg, var(--bg-soft) 0 12px, #fff 12px 24px); color: var(--muted); } /* ---- 地图（v3.10.41）：画布与地址卡叠在同一格，地图就绪后由 JS 收起地址卡 ---- */ .map-box__stage { display: grid; } .map-box__canvas, .map-box__ph { grid-area: 1 / 1; } .map-box__canvas { width: 100%; height: 420px; background: var(--bg-soft); } /* 地址卡是不透明底，压住画布；`.is-map-ready` 一加就消失，所以永远不会出现空白块 */ .map-box__ph { position: relative; z-index: 1; } .map-box.is-map-ready .map-box__ph { display: none; } /* 高德标记自带的白色文字框：改成品牌色系，别用它的默认样式 */ .amap-marker-label { border: 0; border-radius: 6px; padding: 4px 9px; font-size: 12.5px; color: var(--navy); box-shadow: 0 2px 10px rgba(0, 0, 0, .14); } .map-box__foot { display: grid; gap: 10px 26px; padding: 18px 22px; border-top: 1px solid var(--line); background: var(--bg-soft); } .map-box__addr { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); } .map-box__tag { flex: 0 0 auto; color: var(--navy); font-weight: 600; } .map-box__tx { min-width: 0; overflow-wrap: anywhere; } .map-box__foot .map-box__links { justify-content: flex-start; margin-top: 0; } @media (min-width: 900px) { .map-box__foot { grid-template-columns: 1fr 1fr auto; align-items: center; } } @media (max-width: 768px) { .map-box__canvas { height: 320px; } /* ⛔ 这里千万别给 .amap-marker-label 加 white-space: normal 想让它折行： 高德的标签是绝对定位在一个「零宽」的 marker 容器里的， 一旦允许折行，shrink-to-fit 的可用宽度≈0，文字会被挤成一条竖排柱子。 正确做法：保持单行（它默认就是 nowrap），限宽 + 省略号兜底， 真正的窄屏省地方案在模板 JS 里 —— 窄屏只把「深圳基地」这种短名喂给标签。 */ .amap-marker-label { max-width: 56vw; overflow: hidden; text-overflow: ellipsis; font-size: 12px; padding: 3px 8px; } } .map-box__ph .ic { color: var(--navy); opacity: .4; } .map-box__ph strong { display: block; color: var(--navy); font-size: 17px; margin-bottom: 6px; } .map-box__ph p { font-size: 14px; line-height: 1.75; max-width: 520px; } .map-box__links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; } .wechat-box__qr--ph { display: grid; place-items: center; gap: 8px; padding: 26px 16px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--bg-soft); color: var(--muted); font-size: 13.5px; line-height: 1.7; } .wechat-box__qr--ph .ic { color: var(--navy); opacity: .4; } .contact-form-wrap .form-foot { margin-top: 14px; color: var(--muted-2); font-size: 13px; line-height: 1.7; } /* -------------------------------------------------------------------------- 17.12 文章详情 -------------------------------------------------------------------------- */ .art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 48px; align-items: start; } .art-layout__main { min-width: 0; } .art-layout__side { min-width: 0; display: grid; gap: 20px; position: sticky; top: calc(var(--head-h) + 22px); } .art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--muted-2); font-size: 13px; font-weight: 600; } .art-meta > span, .art-meta time { display: inline-flex; align-items: center; gap: 6px; } .art-meta__sep { width: 1px; height: 12px; background: var(--line-2); } .art-meta__cat { padding: 4px 12px; border-radius: 999px; background: var(--red-l); color: var(--red); font-weight: 800; font-size: 12.5px; } .art-meta__cat:hover { background: var(--red); color: #fff; } .toc { padding: 22px 22px 24px; border-radius: var(--r); background: var(--bg-soft); } .toc__t { display: block; color: var(--navy); font-size: 14px; font-weight: 800; letter-spacing: .04em; margin-bottom: 14px; } .toc__list { list-style: none; display: grid; gap: 10px; counter-reset: toc; } .toc__list li { counter-increment: toc; } .toc__list a { display: flex; align-items: flex-start; gap: 9px; color: var(--ink-2); font-size: 14px; line-height: 1.65; } .toc__list a::before { content: counter(toc, decimal-leading-zero); flex: 0 0 auto; font-family: var(--font-num); font-size: 11.5px; font-weight: 800; color: var(--red); line-height: 1.9; } .toc__list a:hover { color: var(--red); } .art-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 54px; } .art-nav__i { display: flex; flex-direction: column; gap: 7px; padding: 20px 22px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); transition: all .18s ease; } .art-nav__i:hover { border-color: var(--red); box-shadow: var(--shadow-sm); } .art-nav__i > span { color: var(--muted-2); font-size: 12.5px; font-weight: 800; letter-spacing: .06em; } .art-nav__i strong { color: var(--navy); font-size: 15.5px; line-height: 1.6; } .art-nav__i:hover strong { color: var(--red); } .art-nav__i--next { text-align: right; align-items: flex-end; } .art-nav__i--empty { background: transparent; border: 0; } .answer p { color: var(--ink-2); font-size: 16.5px; line-height: 1.95; } .answer p + p { margin-top: 14px; } /* -------------------------------------------------------------------------- 17.13 正文排版（prose） -------------------------------------------------------------------------- */ .prose { color: var(--ink-2); font-size: 16px; line-height: 1.9; } .prose > * + * { margin-top: 18px; } .prose h2 { font-size: 27px; color: var(--navy); margin-top: 44px; margin-bottom: 18px; padding-left: 16px; position: relative; line-height: 1.35; } .prose h2::before { content: ''; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 3px; background: var(--red); } .prose h3 { font-size: 20px; color: var(--navy); margin-top: 32px; margin-bottom: 12px; } .prose h4 { font-size: 17px; color: var(--navy); margin-top: 24px; margin-bottom: 10px; } .prose p { color: var(--ink-2); } .prose strong { color: var(--navy); font-weight: 800; } .prose a { color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .prose a:hover { color: var(--red-d); } .prose ul, .prose ol { margin: 16px 0 16px 22px; display: grid; gap: 9px; } .prose li { color: var(--ink-2); line-height: 1.85; } .prose li::marker { color: var(--red); font-weight: 800; } .prose blockquote { margin: 26px 0; padding: 18px 24px; border-left: 4px solid var(--red); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--red-l); color: var(--ink-2); } .prose blockquote p { margin: 0; } .prose code { padding: 2px 7px; border-radius: 5px; background: var(--bg-soft); color: var(--red-d); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; } .prose pre { padding: 18px 20px; border-radius: var(--r-sm); overflow-x: auto; background: var(--navy); color: rgba(255, 255, 255, .88); font-size: 13.5px; line-height: 1.7; } .prose pre code { padding: 0; background: transparent; color: inherit; } .prose img { border-radius: var(--r); margin: 26px 0; } .prose table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 14.5px; } .prose thead th { padding: 13px 16px; text-align: left; background: var(--navy); color: #fff; font-size: 13px; font-weight: 800; } .prose tbody td { padding: 13px 16px; border-top: 1px solid var(--line); color: var(--ink-2); } .prose tbody tr:nth-child(even) td { background: #FBFCFD; } .prose hr { margin: 36px 0; border: 0; border-top: 1px solid var(--line); } .prose--article { font-size: 16.5px; line-height: 1.95; } .prose--article > p:first-of-type { font-size: 17.5px; color: var(--ink); } .prose--article h2 { scroll-margin-top: calc(var(--head-h) + 24px); } .prose--article table { display: block; overflow-x: auto; white-space: nowrap; } /* -------------------------------------------------------------------------- 17.14 招聘 -------------------------------------------------------------------------- */ .job-list { display: grid; gap: 18px; } .job { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 26px 28px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: all .2s ease; } .job:hover { box-shadow: var(--shadow); border-color: transparent; } .job__hd { flex: 1 1 420px; min-width: 0; } .job__hd h3 { font-size: 20px; margin-bottom: 10px; } .job__hd h3 a { color: var(--navy); } .job__hd h3 a:hover { color: var(--red); } .job__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .job__meta > span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; font-weight: 600; } .job__meta > span .ic { color: var(--navy); opacity: .5; } .job__desc { flex: 1 1 320px; color: var(--muted); font-size: 14.5px; line-height: 1.8; } .job__act { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .tag { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--red-l); color: var(--red); font-size: 12.5px; font-weight: 800; font-style: normal; } /* -------------------------------------------------------------------------- 17.15 案例卡片补充 / 其他 -------------------------------------------------------------------------- */ .case__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft-2); } .case__img img { width: 100%; height: 100%; object-fit: cover; } .case__bd { padding: 22px 24px 24px; } .case__ind { display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 999px; background: var(--bg-soft); color: var(--ink-2); font-size: 12.5px; font-weight: 800; } .case__sum { color: var(--muted); font-size: 14.5px; line-height: 1.8; } .case__res { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .case__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--red); font-size: 14px; font-weight: 800; } .cert--nocopy .cert__thumb::after { display: none; } .stat { text-align: center; } .stat b { display: block; font-family: var(--font-num); font-size: 38px; font-weight: 800; color: var(--navy); line-height: 1; } .stat span { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; } .form-row--sampling { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .quoter__fields { display: grid; gap: 14px; } .foot-bottom__links { display: flex; flex-wrap: wrap; gap: 16px; } .foot-col--contact { min-width: 0; } .hero__copy { min-width: 0; } /* ========================================================================== 18. 响应式（二三级页面） ========================================================================== */ @media (max-width: 1180px) { .two-col, .two-col--text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; } .art-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 36px; } .faq-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 34px; } .card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .val-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } @media (max-width: 1024px) { .page-hero { padding: 52px 0 56px; } .page-hero h1 { font-size: 38px; } .two-col, .two-col--text, .faq-layout, .art-layout, .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 34px; } .two-col__side, .faq-layout__side, .art-layout__side { position: static; top: auto; } .section-head--left h2, .h2 { font-size: 30px; } .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-grid--3, .svc-grid, .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .base-grid, .fac, .faq-grid { grid-template-columns: minmax(0, 1fr); } .blk-stack > .blk + .blk { margin-top: 32px; } .cta-band { padding: 34px 30px; } .cta-band h2 { font-size: 25px; } .sub-band { padding: 28px 26px; } /* 竖版时间轴在 1024 下：中轴收窄、字号降一档，卡片与图片框仍左右互换。 ⚠️ 历史坑：这里曾残留竖向旧版的 `grid-template-columns: 84px minmax(0,1fr)`， 把卡片塞进 84px 那一列、文字塌成长条 → 行高被撑爆 → 节点全部错位。 动这套栅格时先确认没有第二处的 grid-template-columns 覆盖。 */ .vtl__item { grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); } .vtl__list { gap: 28px; } .vtl__card { padding: 18px 18px 20px; } .vtl__card b { font-size: 16px; } .vtl__card p { font-size: 13.2px; } .vtl__year { font-size: 27px; } } @media (max-width: 768px) { .page-hero { padding: 40px 0 44px; } .page-hero h1 { font-size: 29px; } .page-hero--compact h1 { font-size: 25px; } .page-hero__lead { font-size: 15.5px; } .page-hero__cta { margin-top: 24px; } .page-hero__cta .btn { width: 100%; } .section--tight { padding: 32px 0; } .h2, .section-head--left h2 { font-size: 26px; } .blk__title { font-size: 20px; } .prose h2 { font-size: 22px; margin-top: 34px; } .prose--article { font-size: 16px; } .card-grid--3, .card-grid--4, .svc-grid, .pain-grid, .news-grid, .val-grid, .kpi-row, .faq-grid, .base-grid, .fac { grid-template-columns: minmax(0, 1fr); } .filter-bar { gap: 8px; } .filter { padding: 9px 15px; font-size: 13.5px; } .press-item__link { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; } .press-item__date { font-size: 13px; } .press-item__title { font-size: 18px; } .press-item__ex { -webkit-line-clamp: 3; } .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .stat-band__i b { font-size: 30px; } .pain-grid { gap: 16px; } .cycle-band { padding: 24px 22px; gap: 16px; } .cycle-band > div { flex: 1 1 100%; } .cap-grid, .std-list { gap: 8px; } .cap { padding: 9px 14px; font-size: 13.5px; } .std { font-size: 12.5px; } .contact-layout { gap: 28px; } .office { grid-template-columns: minmax(0, 1fr); } .office__img { aspect-ratio: 16 / 7; } .office__img img { height: 100%; } .ship-guide { padding: 22px 20px; } .sub-band { flex-direction: column; align-items: flex-start; gap: 18px; } .cta-band { flex-direction: column; align-items: flex-start; gap: 22px; padding: 30px 24px; } .cta-band h2 { font-size: 22px; } .cta-band__act { width: 100%; } .cta-band__act .btn { width: 100%; } /* 竖版时间轴：手机把中轴挪到左侧，单列堆叠（图片框在上、卡片在下）， 左右交错在小屏上会把卡片挤成窄条，必须收成单列。 */ .vtl__list { gap: 24px; } .vtl__list::before, .vtl__list::after { left: 13px; transform: none; width: 5px; } .vtl__item { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-content: start; gap: 12px; padding-left: 40px; } .vtl__item > .vtl__card, .vtl__item:nth-child(even) > .vtl__card { grid-column: 1; grid-row: 2; } .vtl__item > .vtl__media, .vtl__item:nth-child(even) > .vtl__media { grid-column: 1; grid-row: 1; } .vtl__node { left: 13px; width: 18px; height: 18px; } .vtl__card { padding: 17px 17px 19px; } .vtl__card b { font-size: 15.6px; } .vtl__card p { font-size: 13px; line-height: 1.76; } .vtl__year { font-size: 26px; } .vtl__play { width: 40px; height: 40px; margin: -20px 0 0 -20px; } .art-nav { grid-template-columns: minmax(0, 1fr); } .art-nav__i--next { text-align: left; align-items: flex-start; } .art-nav__i--empty { display: none; } .faq-item__q { padding: 16px 18px; font-size: 15.5px; } .faq-item__a { padding: 0 18px 18px; font-size: 14.5px; } .faq-group + .faq-group { margin-top: 36px; } .faq-group__title { font-size: 22px; } .faq-grid { gap: 16px; } .faq-grid .faq-item { padding: 20px 22px 22px; } .faq-grid .faq-item h3 { font-size: 15.5px; margin-bottom: 10px; } .faq-grid .faq-item__a { font-size: 14px; line-height: 1.8; } .job { padding: 22px 20px; gap: 16px; } .job__hd, .job__desc, .job__act { flex: 1 1 100%; } .job__act .btn { flex: 1 1 auto; justify-content: center; } .blk-stack > .blk + .blk { margin-top: 28px; } .step { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 18px 0; } .step__n { width: 32px; height: 32px; font-size: 14px; } .tbl { font-size: 14px; } .tbl thead th, .tbl tbody th, .tbl tbody td { padding: 12px 14px; } .notice-card, .empty-card { padding: 22px 20px; } .pager { margin-top: 32px; } .pager .page-numbers { min-width: 38px; height: 38px; font-size: 14px; } } @media (max-width: 480px) { .page-hero h1 { font-size: 25px; } .filter { padding: 8px 13px; font-size: 13px; } .kpi { padding: 22px 20px; } .kpi b { font-size: 23px; } .val { padding: 22px 20px; } .pain { padding: 22px 20px; } .cap { font-size: 13px; padding: 8px 12px; } .row-act .btn { width: 100%; justify-content: center; } } /* -------------------------------------------------------------------------- 17.16 补充：三点说明条 / 文章导航修饰 -------------------------------------------------------------------------- */ .duo-note { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .duo-note__item { padding: 26px 24px; border-radius: var(--r-lg); background: var(--bg-soft); border-left: 3px solid var(--red); } .duo-note__item > span { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: #fff; color: var(--red); box-shadow: var(--shadow-sm); } .duo-note__item h3 { color: var(--navy); font-size: 17.5px; margin-bottom: 8px; } .duo-note__item p { color: var(--muted); font-size: 14.5px; line-height: 1.8; } .art-nav__i--prev { align-items: flex-start; } @media (max-width: 900px) { .duo-note { grid-template-columns: minmax(0, 1fr); gap: 16px; } } /* 页脚「查看全部」链接 */ .foot-more { color: var(--red) !important; font-weight: 800; } /* ========================================================================== §19 窄屏横向溢出修复 ========================================================================== 症状：360px 下首页出现 24px 横向滚动。 根因：.btn 全局带 white-space:nowrap。首页底部「提交需求，1 个工作日内给方案 →」 是 .btn--block（整宽按钮），nowrap 让它无法换行，min-content 宽度达到 309px； .apply-layout 是 grid，grid item 默认 min-width:auto 不会收缩到 min-content 以下， 于是单列被顶到 351px，撑破 309px 的内容盒 → 页面横向溢出。 两层修复： 1) 整宽按钮允许换行（.btn--block 本来就不需要 nowrap，宽度由 width:100% 决定）； 2) 给 grid / flex 容器里的直接子项加 min-width:0 作兜底， 避免以后任何长不可断词（标准号、型号、URL）再次顶破布局。 ========================================================================== */ .btn--block { white-space: normal; } /* 兜底：允许 grid / flex 子项收缩到内容最小宽度以下 */ .apply-layout > *, .two-col > *, .card-grid > *, .svc-grid > *, .cap-grid > *, .news-grid > *, .pain-grid > *, .val-grid > *, .base-grid > *, .kpi-row > * { min-width: 0; } /* 长不可断词（标准号 / 型号 / 邮箱 / URL）一律允许断行 */ .muted-tx, .lead-tx, .tbl-note, .brand-note, .empty-tx, .kv b, .kv span, .job__meta, .art-meta, .answer, .prose { overflow-wrap: anywhere; } @media (max-width: 480px) { /* 窄屏收紧大号按钮内边距，给文案留出换行余量 */ .btn--lg { padding: 14px 20px; font-size: 15px; } } /* ========================================================================== 19. 浅色主题改版 -------------------------------------------------------------------------- 改版原因：大面积深蓝压场视觉偏压抑，客户反馈不够亲和。 改版原则： 1) 大面积区块（顶部条 / 首屏 / 案例区 / 内页 Hero / 页脚 / CTA 色块） 一律换为浅色系表面（--surface-1 ~ --surface-3）。 2) 深蓝（--navy）降级为「标题文字色」与「小面积功能色块」 （表头、标签、步骤序号、卡片图标块）——保留专业感与层次，不再压场。 3) 品牌红（--red）继续作点睛色，金色作辅助。 实现方式：同名选择器追加覆盖，仅改「表面色 / 文字色 / 边框 / 阴影」， 不触碰 padding、font-size、grid-template-columns， 因此不会与 §16、§18 的响应式规则冲突。 ========================================================================== */ /* --- 19.1 顶部信任条：深蓝 → 浅色 ------------------------------------- */ .topbar { background: var(--surface-2); color: var(--ink-2); border-bottom: 1px solid var(--surface-line); } .topbar__brand { color: var(--navy); } .topbar__sep { background: var(--line-2); } .mini-creds { color: var(--ink-2); } .mini-creds .ic { color: var(--red); } .topbar__tel { color: var(--navy); } .topbar__tel:hover { color: var(--red); } .topbar__tel-label { color: var(--muted); } .topbar__mail { color: var(--muted); } .topbar__mail:hover { color: var(--red); } /* GTranslate 文字在浅色顶栏下保持可读（插件默认可能带白色内联样式） */ .topbar__lang .gt_switcher, .topbar__lang .gt_switcher .gt-selected, .topbar__lang .gt_switcher .gt-current-lang, .topbar__lang .gt_switcher .gt-arrow, .topbar__lang .gt_switcher a { color: var(--ink-2) !important; } .topbar__lang .gt_switcher .gt_options { background: var(--surface-1) !important; border-color: var(--line-2) !important; box-shadow: var(--shadow) !important; } .topbar__lang .gt_switcher .gt_options a:hover { background: var(--surface-2) !important; color: var(--navy) !important; } /* --- 19.2 首屏：深色照片遮罩 → 浅色渐变 ------------------------------- */ .hero { background: var(--grad-hero); color: var(--ink-2); } /* 底纹照片：环境可靠性实验室过道实拍（两侧白色恒温恒湿箱）， v3.10.36 起不透明度统一由后台「页头背景图 → 背景图不透明度」控制（默认 0.6 = 60%）， 首页与内页共用同一个值；换图见 functions.php 的 tmc_home_hero_bg()。 */ .hero__media img { opacity: var(--hero-bg-op, .6); } /* 遮罩：左侧（文案区）压厚保证正文对比度，中右逐渐放淡让过道与试验箱透出来。 ⚠️ 不能用 --scrim-mid/--scrim-end（那套是给深色时代的整屏遮罩，alpha .78~.85 会把照片压没）。 */ .hero__scrim { background: radial-gradient(880px 470px at 12% 28%, rgba(255, 255, 255, .88), transparent 60%), linear-gradient(115deg, rgba(255, 255, 255, .70) 0%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, .10) 100%); } .hero__tag { background: #fff; border-color: var(--surface-line); color: var(--navy); box-shadow: var(--shadow-sm); } .hero__title { color: var(--navy); } .hero__title .hl { color: var(--red); } .hero__title .hl::after { background: linear-gradient(90deg, var(--hl-soft), var(--hl-faint)); } /* v3.10.36：首屏底纹换成环境可靠性实验室过道实拍（比原来那张浅色底纹暗）， --muted 在照片上的对比度掉到 4.1 左右（低于 AA 的 4.5），这里改用 --ink-2。 */ .hero__lede { color: var(--ink-2); } .promise { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); } .promise__tx strong { color: var(--navy); } .promise__tx em { color: var(--muted); } .hero__tel { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); } .hero__tel:hover { background: #fff; border-color: var(--red); } .hero__tel em { color: var(--muted); } .hero__tel strong { color: var(--navy); } .hero__tel i { color: var(--muted-2); } .hero__card { border-color: var(--line); box-shadow: var(--shadow); } .hero__facts { background: #fff; border-color: var(--line); box-shadow: var(--shadow); } .fact { border-right-color: var(--line); } .fact b { color: var(--navy); } .fact span { color: var(--muted); } .hero__badges > div { color: var(--muted); } .hero__badges strong { color: var(--navy); } /* --- 19.3 案例区（原 .section--navy）→ 浅色 ---------------------------- */ .section--navy { background: var(--surface-2); color: var(--ink-2); } .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--navy); } .section--navy .eyebrow { color: var(--red); } .section-head--dark h2 { color: var(--navy); } .section-head--dark > p { color: var(--muted); } .case-filter { color: var(--ink-2); background: #fff; border-color: var(--line); } .case-filter:hover { background: var(--red-l); color: var(--red); border-color: var(--red); } .case { border-color: var(--line); box-shadow: var(--shadow-sm); } /* --- 19.4 内页 Page-Hero：深蓝渐变 → 浅色渐变 -------------------------- */ .page-hero { background: var(--grad-page); color: var(--ink-2); border-bottom: 1px solid var(--surface-line); } .page-hero__eyebrow { color: var(--red); } .page-hero h1 { color: var(--navy); } .page-hero__lead { color: var(--ink-2); } .page-hero .breadcrumb a, .page-hero .breadcrumb > span { color: var(--muted); } .page-hero .breadcrumb a:hover { color: var(--red); } .page-hero .breadcrumb .breadcrumb__current { color: var(--ink); } /* --- 19.5 页脚：深蓝 → 浅色 ------------------------------------------- */ .site-footer { background: var(--surface-2); color: var(--muted); border-top: 1px solid var(--surface-line); } /* 页脚 logo：透明底绿色 logo，在浅色背景上正常显示 */ .foot-logo { mix-blend-mode: normal; } .foot-brand p { color: var(--muted); } .foot-tel em { color: var(--muted-2); } .foot-tel strong { color: var(--navy); } .foot-tel:hover strong { color: var(--red); } .foot-col h3 { color: var(--navy); } .foot-col a, .foot-col li { color: var(--muted); } .foot-col a:hover { color: var(--red); } .foot-base { background: var(--surface-1); border-color: var(--line-2); } .foot-base strong { color: var(--navy); } .foot-base strong i { background: var(--surface-3); color: var(--navy); } .foot-base--branch strong i { background: var(--gold); } .foot-base span { color: var(--muted); } .foot-mail em { color: var(--muted-2); } .foot-mail strong { color: var(--navy); } .foot-mail:hover strong { color: var(--red); } .foot-bottom { border-top-color: var(--surface-line); color: var(--muted-2); } .foot-bottom__mid { color: var(--muted-2); } .foot-bottom a { color: var(--muted); } .foot-bottom a:hover { color: var(--red); } .foot-impartiality { background: var(--surface-3); border-color: var(--surface-line); color: var(--muted-3); } .foot-impartiality h3 { color: var(--navy); } .foot-impartiality li::before { background: var(--green); } .foot-impartiality li b { color: var(--navy); } /* 友情链接一行（v3.10.35）：夹在公正性声明与版权底栏之间，内容在后台「站点设置 → 页脚」维护 */ .foot-links { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 13px; line-height: 1.9; } .foot-links__label { flex: 0 0 auto; color: var(--navy); font-weight: 600; } .foot-links__items { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; } .foot-links__items i { font-style: normal; color: var(--line-2); } .foot-links__items a, .foot-links__items span { color: var(--muted); } .foot-links__items a:hover { color: var(--red); } /* --- 19.6 CTA 色块 → 浅色 --------------------------------------------- */ .cta { background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-1) 100%); color: var(--ink-2); border: 1px solid var(--surface-line); } .cta h2 { color: var(--navy); } .cta p { color: var(--muted); } .sub-band { background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-1) 100%); border: 1px solid var(--surface-line); } .sub-band h3 { color: var(--navy); } .sub-band p { color: var(--muted); } .cta-band { background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-1) 100%); border: 1px solid var(--surface-line); } .cta-band h2 { color: var(--navy); } .cta-band__tx p { color: var(--muted); } .cta-band__tel { color: var(--muted); } .cta-band__tel:hover { color: var(--red); } /* ghost 按钮原本是给深底用的（白字白边），浅色化后会「隐身」， 改为深色文字 + 浅边框，顺便修掉移动端抽屉里白底白字的问题。 */ .btn--ghost { color: var(--navy); border-color: var(--line-2); } .btn--ghost:hover { background: var(--red-l); color: var(--red); border-color: var(--red); } /* --- 19.7 卡片图标带 / 缩略图 → 浅蓝 ---------------------------------- */ .icard__ico { background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-1) 100%); color: var(--navy); border-bottom: 1px solid var(--surface-line); } .news__thumb { background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-1) 100%); color: var(--navy); } /* --- 19.8 表头：深蓝 → 浅蓝灰（宽表格反复出现，浅色更透气） ----------- */ .tbl thead th { background: var(--surface-3); color: var(--navy); border-bottom: 1px solid var(--surface-line); } .prose thead th { background: var(--surface-3); color: var(--navy); } /* --- 19.9 自助报价结果块 → 浅色卡 ------------------------------------- */ .quoter__result { background: var(--surface-2); border: 1px solid var(--surface-line); } .quoter__label { color: var(--muted); } .quoter__amount { color: var(--red); } .quoter__note { color: var(--muted); } .quoter__result .btn--outline { background: #fff; color: var(--navy); border-color: var(--line-2); } .quoter__result .btn--outline:hover { background: #fff; border-color: var(--navy); color: var(--navy); } /* --- 19.10 关于页价值观块（原深色区）→ 浅色卡 -------------------------- */ .val { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); } .val__ic { background: var(--red-l); color: var(--red); } .val b { color: var(--navy); } .val em { color: var(--muted-2); } .val p { color: var(--muted); } /* --- 19.11 「报告查验」入口（客户高频需求，首页与页脚都给出显眼入口） -- */ .report-check { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; margin: 22px 0 0; padding: 22px 26px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-1) 100%); border: 1px solid var(--surface-line); } .report-check__tx { min-width: 0; } .report-check__tx strong { display: block; color: var(--navy); font-size: 18px; font-weight: 800; margin-bottom: 5px; } .report-check__tx span { color: var(--muted); font-size: 14.5px; line-height: 1.7; } .report-check__act { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 1 auto; min-width: 0; } /* CNAS 特色块：用品牌绿做左侧强调条，突出最重要的认可资质 */ .report-check--cnas { border-left: 4px solid var(--green); background: linear-gradient(135deg, var(--surface-3) 0%, var(--surface-1) 100%); } .report-check--cnas .report-check__tx strong { color: var(--green); } /* 关于页：CNAS 查验卡与下方资质证书之间拉开间距，避免两区块紧贴 */ .report-check + .cert-grid { margin-top: 48px; } .report-check__note { margin-top: 14px; color: var(--muted-2); font-size: 12.5px; line-height: 1.7; } /* 顶部信任条的报告查验快捷入口 */ .topbar__check { display: inline-flex; align-items: center; gap: 5px; color: var(--red); font-weight: 700; white-space: nowrap; } .topbar__check:hover { color: var(--red-d); } /* 报告编号滚动条右侧：说明 + 直达链接 */ .reports__meta { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; } .reports__go { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--red); } .reports__go:hover { color: var(--red-d); } /* --- 19.12 分部服务点（联系方式页） ----------------------------------- */ .branch-box { margin-top: 26px; padding: 24px 26px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .branch-box__head { margin-bottom: 18px; } .branch-box__head h2 { font-size: 21px; margin-bottom: 6px; } .branch-box__head p { color: var(--muted); font-size: 14px; line-height: 1.7; } .branch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .branch { padding: 18px 20px; border-radius: var(--r); background: var(--surface-1); border: 1px solid var(--surface-line); } .branch__en { display: block; color: var(--muted-2); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .branch strong { display: block; color: var(--navy); font-size: 17px; font-weight: 800; margin: 5px 0 3px; } .branch em { display: block; color: var(--red); font-size: 12.5px; font-style: normal; font-weight: 700; margin-bottom: 10px; } .branch__addr { display: flex; align-items: flex-start; gap: 7px; color: var(--ink-2); font-size: 14px; line-height: 1.7; } .branch__addr .ic { flex: 0 0 auto; margin-top: 3px; color: var(--navy); opacity: .55; } .branch__note { margin-top: 8px; color: var(--muted-2); font-size: 12.5px; line-height: 1.7; } .branch__tel { margin-top: 8px; color: var(--muted); font-size: 13.5px; } .branch__tel .ic { color: var(--red); } .branch__tel a { color: var(--navy); font-weight: 800; } .branch__tel a:hover { color: var(--red); } @media (max-width: 620px) { .branch-grid { grid-template-columns: minmax(0, 1fr); } /* 窄屏下报告查验区改为纵向堆叠，按钮撑满，避免两个按钮并排撑破容器 */ .report-check { flex-direction: column; align-items: stretch; padding: 20px; } .report-check__act { flex: 1 1 auto; width: 100%; } .report-check__act .btn { flex: 1 1 auto; justify-content: center; } } /* ========================================================================== §20 资源下载页 ========================================================================== */ /* 版面：整页两列（对标门户分栏），栏目组在列内自上而下排 —— 单组不再横着占满一屏 */ .res-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; row-gap: 26px; align-items: start; } .res-group__head { margin-bottom: 8px; } /* 标题不加粗（lemon：加粗很丑）—— 门户字 + 常规字重，靠字号与红色小条立层级 */ .res-group__title { display: flex; align-items: center; gap: 8px; color: var(--ink); font-family: var(--font-portal); font-size: 16px; font-weight: 400; letter-spacing: .01em; margin: 0 0 3px; } .res-group__title::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--red); flex: none; } .res-group__desc { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; } /* 条目录：一行一条、单线分隔、去卡片。 两列之后每列只有 ~570px，名字 + 描述挤一行必然截断 —— 改成「名字一行、描述一行」， 描述给两行封顶，行距收紧（lemon：占太宽 + 行距缩小一些）。 */ .res-list { list-style: none; margin: 0; padding: 0; display: block; } .res-item { display: flex; align-items: center; gap: 14px; padding: 8px 0; border: 0; border-bottom: 1px dotted var(--line); border-radius: 0; background: transparent; } .res-item:hover { border-bottom-color: var(--line-2); } .res-item__main { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } .res-item__name { color: var(--ink); font-family: var(--font-portal); font-size: 14.5px; font-weight: 400; flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; transition: color .16s ease; } .res-item:hover .res-item__name { color: var(--red); } .res-item__ext { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--bg-soft-2); color: var(--muted-2); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; } .res-item__desc { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin: 0; flex: 0 1 auto; min-width: 0; max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .res-item--pending .res-item__name { color: var(--muted); } .res-item__act { flex: 0 0 auto; } .res-item__dl, .res-item__soon { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .res-list .res-item__dl.btn, .res-list .res-item__soon.btn { padding: 4px 12px; font-size: 12.5px; border-radius: 999px; } .res-item__soon { background: var(--bg-soft); color: var(--muted-2); border: 1px solid var(--line); font-weight: 600; cursor: not-allowed; opacity: .85; } /* v3.10.34 · 分类切换（顶部一行胶囊）：默认「全部」看各组并排，点某一类只看该类。 切到单一分类时栅格收成一列（.is-one）—— 半屏空着比铺满更难看。 */ .res-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 22px; } .res-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-family: var(--font-portal); font-size: 13px; font-weight: 500; line-height: 1.5; cursor: pointer; transition: color .16s ease, border-color .16s ease, background .16s ease; } .res-tab em { font-family: var(--font-num); font-size: 11px; font-style: normal; color: var(--muted-2); } .res-tab:hover { color: var(--red); border-color: var(--red); } .res-tab.is-active { color: #fff; background: var(--red); border-color: var(--red); } .res-tab.is-active em { color: rgba(255, 255, 255, .85); } .res-cols.is-one { grid-template-columns: minmax(0, 1fr); } /* v3.10.34 · 分类内翻页：视觉与资讯板块翻页（.np-pager）保持一致， 只有超过 $res_per 项的分类才由 PHP 输出整条 —— 页数 = 1 时不存在于 DOM。 */ .res-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; } .res-pg { display: inline-flex; align-items: center; justify-content: center; min-width: 25px; height: 25px; padding: 0 7px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--muted); font-family: var(--font-portal); font-size: 12px; font-weight: 600; cursor: pointer; transition: color .16s ease, border-color .16s ease; } .res-pg:hover { color: var(--red); border-color: var(--red); } .res-pg.is-active { color: #fff; background: var(--red); border-color: var(--red); font-weight: 700; } .res-pg[disabled] { opacity: .4; cursor: default; } .res-pg__nums { display: inline-flex; align-items: center; gap: 6px; } .res-pager__sum { margin-left: auto; color: var(--muted-2); font-size: 11.5px; font-family: var(--font-num); } @media (max-width: 900px) { .res-cols { grid-template-columns: minmax(0, 1fr); row-gap: 22px; } } @media (max-width: 768px) { .res-item { gap: 10px 12px; padding: 9px 0; } .res-item__dl, .res-item__soon { flex: 0 0 auto; justify-content: center; } } /* ========================================================================== 案例页 · 七步方法论 + 完整复盘折叠（v3.3.1） ========================================================================== */ .method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; } .method { padding: 22px 20px 20px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: all .2s ease; } .method:hover { border-color: var(--red); transform: translateY(-2px); } .method__n { display: block; font-family: var(--font-num); font-size: 24px; font-weight: 800; line-height: 1; color: var(--acc-30); margin-bottom: 9px; } .method b { display: block; color: var(--navy); font-size: 16px; margin-bottom: 7px; } .method p { color: var(--muted); font-size: 14px; line-height: 1.78; } .case__scene { font-size: 13.5px; color: var(--muted-2); margin-bottom: 12px; } .case__methods { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 14px; padding: 0; } .case__methods li { padding: 3px 9px; border-radius: 6px; background: var(--acc-10); color: var(--red); font-size: 12px; font-weight: 700; line-height: 1.5; } .case__more { margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--line); } .case__more summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--navy); transition: color .18s ease; } .case__more summary:hover { color: var(--red); } .case__more[open] summary { color: var(--red); margin-bottom: 4px; } .case__more-bd { display: grid; gap: 11px; margin-top: 10px; } .case__more-bd p { font-size: 13.5px; line-height: 1.85; color: var(--muted); } .case__more-bd b { display: inline-block; margin-right: 7px; padding: 1px 8px; border-radius: 5px; background: var(--surface-2); color: var(--navy); font-size: 12px; font-weight: 800; } /* ========================================================================== 30. 自助工具条（首页显眼入口） ========================================================================== */ .tool-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .tool-card { display: flex; align-items: center; gap: 16px; text-align: left; padding: 22px 24px; border-radius: 18px; cursor: pointer; border: 1.5px solid var(--line); background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .22s ease, border-color .2s ease; font: inherit; color: inherit; } .tool-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(15, 43, 30, .14); } .tool-card__ic { flex: none; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; color: #fff; } .tool-card--red .tool-card__ic { background: var(--red); box-shadow: 0 8px 18px var(--acc-sh); } .tool-card--red:hover { border-color: var(--red); } .tool-card--blue .tool-card__ic { background: #1c6ea4; box-shadow: 0 8px 18px rgba(28, 110, 164, .3); } .tool-card--blue:hover { border-color: #1c6ea4; } .tool-card__tx { flex: 1; min-width: 0; } .tool-card__tx strong { display: block; font-size: 17.5px; font-weight: 800; color: var(--ink); } .tool-card__tx em { display: block; margin-top: 3px; font-style: normal; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; } .tool-card__go { flex: none; font-size: 13.5px; font-weight: 700; white-space: nowrap; } .tool-card--red .tool-card__go { color: var(--red); } .tool-card--blue .tool-card__go { color: #1c6ea4; } /* ========================================================================== 31. 跨境合规自查页 ========================================================================== */ .cc-tool { background: #fff; border: 1.5px solid var(--line); border-radius: 22px; padding: 34px 36px 26px; box-shadow: var(--shadow-sm); } .cc-step { margin-bottom: 26px; } .cc-step__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .cc-step__n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; font-size: 14px; font-weight: 800; display: grid; place-items: center; } .cc-step__t { font-size: 17px; font-weight: 800; color: var(--ink); } .cc-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .cc-cat { display: flex; align-items: center; gap: 10px; text-align: left; padding: 12px 13px; border-radius: 13px; cursor: pointer; font: inherit; border: 1.5px solid var(--line); background: var(--bg-soft, #f7f9f7); transition: border-color .16s ease, background .16s ease, transform .16s ease; } .cc-cat:hover { border-color: var(--red); transform: translateY(-1px); } .cc-cat.is-active { border-color: var(--red); background: var(--acc-tint, #eef6f0); box-shadow: inset 0 0 0 1px var(--red); } .cc-cat__ic { flex: none; color: var(--ink-2); display: grid; place-items: center; } .cc-cat.is-active .cc-cat__ic { color: var(--red); } .cc-cat__tx { min-width: 0; } .cc-cat__tx strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.3; } .cc-cat__tx em { display: none; } .cc-mkts { display: flex; flex-wrap: wrap; gap: 10px; } .cc-mkt { padding: 10px 16px; border-radius: 999px; cursor: pointer; font: inherit; text-align: center; border: 1.5px solid var(--line); background: var(--bg-soft, #f7f9f7); transition: border-color .16s ease, background .16s ease; } .cc-mkt strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); } .cc-mkt em { display: block; font-style: normal; font-size: 11px; color: var(--ink-2); letter-spacing: .02em; } .cc-mkt:hover { border-color: var(--red); } .cc-mkt.is-active { border-color: var(--red); background: var(--acc-tint, #eef6f0); box-shadow: inset 0 0 0 1px var(--red); } .cc-mkt.is-active strong { color: var(--red); } .cc-specs { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .cc-toggle { cursor: pointer; } .cc-toggle input { position: absolute; opacity: 0; pointer-events: none; } .cc-toggle span { display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg-soft, #f7f9f7); font-size: 13.5px; color: var(--ink); transition: border-color .16s ease, background .16s ease; } .cc-toggle input:checked + span { border-color: var(--red); background: var(--acc-tint, #eef6f0); color: var(--red); font-weight: 700; } .cc-volt { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); } .cc-volt select { padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font-size: 13.5px; color: var(--ink); } .cc-submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; } .cc-quota { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); padding: 9px 14px; border-radius: 999px; background: var(--bg-soft, #f7f9f7); border: 1px dashed var(--line-2); } .cc-hint { margin-top: 14px; font-size: 12.5px; color: var(--ink-3, #8a938c); line-height: 1.6; } /* 结果区 */ .cc-result { margin-top: 26px; background: #fff; border: 1.5px solid var(--line); border-radius: 22px; padding: 30px 36px; box-shadow: var(--shadow-sm); } .cc-result__eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; color: var(--red); } .cc-result__head h3 { font-size: 22px; font-weight: 900; color: var(--ink); margin: 6px 0 8px; } .cc-result__head p { font-size: 14.5px; color: var(--ink-2); line-height: 1.65; margin: 0 0 18px; } .cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .cc-item { border: 1.5px solid var(--line); border-radius: 14px; padding: 15px 16px; background: var(--bg-soft, #f7f9f7); } .cc-item__top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .cc-item__mark { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--red); background: var(--acc-tint, #eef6f0); padding: 3px 9px; border-radius: 6px; border: 1px solid currentColor; } .cc-item__name { font-size: 14.5px; font-weight: 800; color: var(--ink); } .cc-item__cycle { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; } .cc-item__std { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-2); background: rgba(0, 0, 0, .035); border-radius: 7px; padding: 6px 9px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-x: auto; white-space: nowrap; } .cc-item__desc { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.6; } .cc-notes-list { margin: 16px 0 0; padding: 14px 18px; border-radius: 12px; background: #fff8ec; border: 1px solid #f0dfc0; } .cc-notes-list li { font-size: 13px; color: #6b5b3e; line-height: 1.7; list-style: none; position: relative; padding-left: 18px; } .cc-notes-list li::before { content: '·'; position: absolute; left: 4px; font-weight: 900; } .cc-result__foot { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line-2); } .cc-result__tip { font-size: 12px; color: var(--ink-3, #8a938c); margin: 0 0 14px; } .cc-result__acts { display: flex; gap: 12px; flex-wrap: wrap; } /* 次数用完 */ .cc-locked { margin-top: 26px; background: linear-gradient(135deg, #fff 55%, var(--acc-tint, #eef6f0)); border: 1.5px solid var(--red); border-radius: 22px; padding: 34px 36px; text-align: center; } .cc-locked__ic { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--red); color: #fff; margin-bottom: 12px; } .cc-locked__head h3 { font-size: 20px; font-weight: 900; color: var(--ink); margin: 0 0 8px; } .cc-locked__head p { max-width: 520px; margin: 0 auto; font-size: 14px; color: var(--ink-2); line-height: 1.65; } .cc-locked__acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; } /* 页尾三说明 */ .cc-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; } .cc-note { display: flex; gap: 12px; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 18px; } .cc-note__ic { flex: none; color: var(--red); margin-top: 2px; } .cc-note strong { display: block; font-size: 14.5px; font-weight: 800; color: var(--ink); } .cc-note em { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; } @media (max-width: 900px) { .tool-strip { grid-template-columns: 1fr; } .cc-tool { padding: 24px 18px 20px; } .cc-cats { grid-template-columns: repeat(2, 1fr); } .cc-grid { grid-template-columns: 1fr; } .cc-result { padding: 22px 18px; } .cc-locked { padding: 26px 18px; } .cc-notes { grid-template-columns: 1fr; } } @media (max-width: 520px) { .tool-card { padding: 16px; gap: 12px; } .tool-card__ic { width: 46px; height: 46px; border-radius: 12px; } .tool-card__tx strong { font-size: 15.5px; } .cc-cats { grid-template-columns: 1fr 1fr; gap: 8px; } .cc-cat { padding: 10px 11px; } } /* ========================================================================== 32. 服务二级分组（检测服务 / 认证合规） ========================================================================== */ .dd-title--grp { margin-top: 6px; padding: 8px 12px 6px; color: var(--red); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: none; border-bottom: 1px solid var(--line); } .dd-title--grp:first-child { margin-top: 0; } .dropdown a em { display: block; margin-top: 2px; font-style: normal; font-size: 12px; font-weight: 500; color: var(--muted-2); line-height: 1.45; } .dropdown a:hover em { color: var(--red); } .svc-group + .svc-group { margin-top: 46px; } .svc-group__head { margin-bottom: 18px; } .svc-group__title { font-size: 21px; font-weight: 900; color: var(--ink); margin: 4px 0 0; padding-left: 12px; border-left: 3px solid var(--red); line-height: 1.3; } .mobile-nav__sub { display: block; margin: 12px 0 2px; padding: 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: var(--red); } .mobile-nav__kid { padding-left: 18px !important; font-size: 14px !important; } /* ========================================================================== 33. 公正性声明专页（/impartiality/） ========================================================================== */ .imp-wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; } .imp-toc { position: sticky; top: 92px; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; padding: 16px 12px; box-shadow: var(--shadow-sm); } .imp-toc__title { display: block; padding: 0 10px 10px; margin-bottom: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; color: var(--muted-2); border-bottom: 1px solid var(--line); } .imp-toc a { display: flex; gap: 9px; align-items: flex-start; padding: 8px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); line-height: 1.5; transition: background .16s ease, color .16s ease; } .imp-toc a i { flex: none; font-style: normal; font-weight: 800; font-size: 12px; color: var(--red); margin-top: 1px; } .imp-toc a:hover { background: var(--red-l); color: var(--red); } .imp-body { min-width: 0; } .imp-sec { background: #fff; border: 1.5px solid var(--line); border-radius: 18px; padding: 26px 30px; margin-bottom: 18px; box-shadow: var(--shadow-sm); scroll-margin-top: 96px; } .imp-sec__title { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; font-size: 18px; font-weight: 900; color: var(--ink); line-height: 1.5; } .imp-sec__title span { flex: none; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; background: var(--red); color: #fff; font-size: 13px; font-weight: 800; display: grid; place-items: center; } .imp-sec__lead { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-2); line-height: 1.85; } .imp-list { margin: 0; padding: 0; list-style: none; } .imp-list li { display: flex; gap: 10px; padding: 9px 0; border-top: 1px dashed var(--line); font-size: 14px; color: var(--ink-2); line-height: 1.8; } .imp-list li:first-child { border-top: 0; } .imp-list li i { flex: none; font-style: normal; font-weight: 800; font-size: 13px; color: var(--red); min-width: 18px; } .imp-sign { display: flex; gap: 42px; justify-content: flex-end; flex-wrap: wrap; padding: 22px 30px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--bg-soft, #f7f9f7); } .imp-sign span { display: block; font-size: 12px; color: var(--muted-2); letter-spacing: .06em; margin-bottom: 3px; } .imp-sign strong { font-size: 17px; font-weight: 900; color: var(--ink); letter-spacing: .04em; } /* 页脚：一句话 + 专页链接 */ .foot-impartiality { display: flex; align-items: center; gap: 26px; justify-content: space-between; } .foot-impartiality__tx { max-width: 780px; } .foot-impartiality__link { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 11px 20px; border-radius: 999px; border: 1.5px solid var(--red); background: #fff; color: var(--red); font-size: 13.5px; font-weight: 700; white-space: nowrap; transition: background .18s ease, color .18s ease, border-color .18s ease; } .foot-impartiality__link:hover { background: var(--red); color: #fff; } @media (max-width: 900px) { .imp-wrap { grid-template-columns: minmax(0, 1fr); gap: 22px; } .imp-toc { position: static; } .imp-sec { padding: 20px 18px; } .imp-sign { gap: 22px; justify-content: flex-start; padding: 18px; } .foot-impartiality { flex-direction: column; align-items: flex-start; gap: 14px; } .foot-impartiality__link { white-space: normal; } } /* ========================================================================== 20. 主导航 Mega 面板（您的行业 / 我们的服务） 参考风格：全宽白底面板 + 橙色指示三角 + 多列分组（图标 + 组名 + 细横线 + 链接列表） 数据来自 tmc_mega_industries() / tmc_mega_services()，后台增删条目导航自动同步 ========================================================================== */ /* 顶层项自身不定位，面板才能相对 .site-header 铺满整宽 */ .nav-item--mega { position: static; } .mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; } .nav-item--mega:hover .mega, .nav-item--mega:focus-within .mega { opacity: 1; visibility: visible; transform: translateY(0); } .mega__in { max-height: calc(100vh - var(--head-h) - 20px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border-top: 3px solid var(--red); border-radius: 0 0 var(--r-lg) var(--r-lg); box-shadow: 0 26px 60px rgba(16, 38, 58, .17); } /* 橙色指示三角：尖朝下，落在导航条底边（= 面板顶边） */ .mega__arrow { position: absolute; top: -9px; left: var(--mega-x, 50%); width: 0; height: 0; margin-left: -9px; border: 9px solid transparent; border-top: 0; border-bottom-color: var(--red); } .mega__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 30px; align-items: start; width: 100%; max-width: 1240px; margin: 0 auto; padding: 22px 24px 6px; } .mega-col { min-width: 0; } .mega-col__head { display: flex; align-items: center; gap: 10px; font-size: 16.5px; font-weight: 800; color: var(--navy); line-height: 1.35; letter-spacing: -.01em; } .mega-col__ic { display: inline-flex; flex: none; color: var(--red); } .mega-col__ic .ic { width: 20px; height: 20px; } .mega-col__head:hover .mega-col__name { color: var(--red); } .mega-col__rule { display: block; height: 2px; margin: 9px 0 5px; background: linear-gradient(90deg, var(--red) 0 32px, var(--line) 32px 100%); } .mega-col__list { margin: 0; padding: 0; list-style: none; } .mega-col--dense .mega-col__list { columns: 2; column-gap: 18px; } .mega-link { display: block; width: 100%; text-align: left; padding: 4px 0; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 400; color: var(--ink-2); line-height: 1.55; transition: color .16s ease; } .mega-link span { border-bottom: 1px solid transparent; transition: border-color .16s ease; } .mega-link:hover { color: var(--red); } .mega-link:hover span { border-bottom-color: currentColor; } /* 面板底部转化条 */ .mega__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 16px; padding: 15px max(24px, calc((100% - 1240px) / 2 + 24px)); border-top: 1px solid var(--line); background: var(--surface-1); border-radius: 0 0 var(--r-lg) var(--r-lg); } .mega__foot p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; } .mega__foot .btn { flex: 0 1 auto; white-space: nowrap; } @media (max-width: 1180px) { .mega__grid { gap: 22px 20px; padding: 22px 18px 4px; } .mega-col__head { font-size: 16px; } .mega-link { font-size: 12px; padding: 3.5px 0; } /* 网格降到 3 列后行数变多，项目改两栏密排，面板高度砍半，避免出现内部滚动 */ .mega-col__list { columns: 2; column-gap: 16px; } .mega__foot { padding: 14px 18px; } } @media (max-width: 1024px) { .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mega__foot { flex-direction: column; align-items: flex-start; gap: 10px; } .mega__foot .btn { white-space: normal; } } /* 锚点跳转要避开吸顶导航（Mega 面板的 #scope 等） */ .section[id] { scroll-margin-top: calc(var(--head-h) + 16px); } /* ------------------------------------------------------------------ v3.10.6 · 首页知识区（标准解读 / 行业合规 / 常见问题）每类 3 条 + 翻页 nav 复用 .pager 的基础排版与 .current 态；但 .pager 原本是给文字链用的， 这里是