/* ============================================================ 全站共享外壳样式 chrome.css （顶栏 / 头部 / 页脚） ------------------------------------------------------------ 与 nav.css 同一个道理：本站是两套渲染体系 · 首页 index.html 等 → 原样式 international.css · 内页 419 页 → 原样式 style.css + intl-reskin.css 过去「顶栏 / 头部 / 页脚」的样式也是两边各写一份 → 常年不同步。 现在收口成两份唯一来源： 内容(HTML)：_partials/header.html、_partials/footer.html → 由 _sync_chrome.py 注入全站（自动处理 ../ 前缀） 外观(CSS) ：本文件 今后改文案/链接 → 改 _partials/*.html 后跑一次 _sync_chrome.py 改外观 → 只改本文件 首页与内页自动保持一致，不会再漏改。 加载顺序：international.css / intl-reskin.css / nav.css 之后。 依赖：无。全部使用字面色值，两套体系独立生效。 ============================================================ */ /* body 兜底：避免横向滚动条出现/消失造成页面跳动 */ body.intl{ overflow-x:hidden; } /* ---------- 1. 顶栏 ---------- */ .intl-topbar{ background:#f5f7fb; border-bottom:1px solid #e6ebf2; font-size:13px; color:#475569; } .intl-topbar .wrap{ max-width:1200px; margin:0 auto; padding:0 24px; display:flex; justify-content:space-between; align-items:center; height:42px; gap:16px; } .intl-topbar .left{ display:flex; align-items:center; gap:10px; } .intl-topbar .dot{ width:7px; height:7px; border-radius:50%; background:#1d4ed8; display:inline-block; flex:0 0 auto; } .intl-topbar .right{ display:flex; align-items:center; } .intl-topbar .right a{ margin-left:18px; color:#475569; text-decoration:none; transition:color .2s; } .intl-topbar .right a:hover{ color:#1d4ed8; } .intl-topbar a{ text-decoration:none; } /* ---------- 2. 头部：logo + 热线 ---------- */ .intl-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid #e6ebf2; } .intl-header .wrap{ max-width:1200px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; height:74px; gap:16px; } .intl-logo{ display:flex; align-items:center; gap:12px; text-decoration:none; } .intl-logo img{ display:block; height:46px; width:auto; } /* 备用文字标（若哪天不用图片 logo，可去掉 img 直接用这两个类）*/ .intl-logo .mark{ width:42px; height:42px; border-radius:11px; background:linear-gradient(135deg,#1d4ed8,#0ea5e9); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:20px; } .intl-logo .cn{ font-size:18px; font-weight:700; letter-spacing:.5px; color:#0f1b2d; } .intl-logo .en{ font-size:11px; color:#94a3b8; letter-spacing:1.5px; font-weight:600; } .intl-hotline{ display:flex; align-items:center; gap:18px; } .hl-lab{ font-size:12px; color:#94a3b8; text-align:right; line-height:1.3; } .hl-num{ font-size:20px; font-weight:800; color:#1d4ed8; letter-spacing:.5px; white-space:nowrap; } .quote-btn{ background:#1d4ed8; color:#fff; padding:11px 20px; border-radius:10px; font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap; box-shadow:0 6px 18px rgba(15,27,45,.06); transition:background .2s, transform .2s; } .quote-btn:hover{ background:#1e3a8a; color:#fff; transform:translateY(-1px); } /* ---------- 2.5 移动端汉堡按钮（配合 nav.css 的 ≤900px 抽屉） ---------- */ /* 桌面端隐藏；≤900px 显示。三横线用 aria-expanded="true" 变成 ✕。 */ .nav-toggle{ display:none; width:44px; height:40px; flex:0 0 auto; margin-left:10px; padding:0; align-items:center; justify-content:center; flex-direction:column; gap:4px; border:1px solid #dbe3ee; border-radius:10px; background:#fff; cursor:pointer; transition:background .2s, border-color .2s; } .nav-toggle span{ display:block; width:18px; height:2px; border-radius:2px; background:#0f1b2d; transition:transform .25s ease, opacity .2s ease; } .nav-toggle:hover{ background:#f5f7fb; border-color:#c7d3e4; } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } /* ---------- 3. 页脚 ---------- */ /* 内容区宽度 1200px：与头部/导航/CTA 共用同一主容器，全站上下一竖线贯通。 四列用 flex + space-between：每列宽度随自身内容，四列被均匀铺开， 栏与栏之间的三处空隙**完全相等**（等宽 fr 列 + 各列对齐方式不同会导致空隙一宽一窄）。 首列贴左、末列贴右，中间两列居中排布。 */ .intl-footer{ background:#0b1422; color:#cbd5e1; padding:60px 0 28px; } .intl-footer .grid{ max-width:1200px; margin:0 auto; padding:0 24px; display:flex; justify-content:space-between; align-items:flex-start; } .intl-footer .grid > div{ flex:0 0 auto; } /* 品牌列定宽：简介在此宽度内换行（不限宽会一行到底，撑破 1200 容器） */ .intl-footer .grid > div:first-child{ width:320px; } .intl-footer .name{ font-size:18px; font-weight:700; color:#fff; } .intl-footer .en{ font-size:11px; letter-spacing:1.5px; color:#0ea5e9; font-weight:600; margin:6px 0 14px; } .intl-footer .desc{ font-size:13.5px; line-height:1.8; color:#94a3b8; margin:0; } .intl-footer h4{ font-size:14px; font-weight:700; color:#fff; letter-spacing:.5px; margin:0 0 16px; } /* 栏目标题前的装饰小蓝条已移除（h4::before），标题纯文字排布 */ .intl-footer ul{ list-style:none; margin:0; padding:0; } .intl-footer ul li{ margin:0 0 10px; padding:0; } .intl-footer ul li a{ font-size:13.5px; color:#94a3b8; text-decoration:none; transition:color .2s; } .intl-footer ul li a:hover{ color:#fff; } .intl-footer a{ text-decoration:none; } .intl-copy{ border-top:1px solid rgba(255,255,255,.08); max-width:1200px; margin:40px auto 0; padding:22px 24px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:#94a3b8; } .intl-copy a{ color:#94a3b8; text-decoration:none; } .intl-copy a:hover{ color:#fff; } /* ---------- 4. 响应式 ---------- */ @media (max-width:980px){ /* 窄屏回到网格折行，品牌列取消定宽 */ .intl-footer .grid{ display:grid; grid-template-columns:1fr 1fr; gap:30px; } .intl-footer .grid > div:first-child{ width:auto; } } @media (max-width:900px){ .nav-toggle{ display:inline-flex; } /* 汉堡按钮与 nav.css 的抽屉同步启用 */ } @media (max-width:720px){ .intl-topbar .left{ display:none; } /* 窄屏顶栏只留右侧链接，避免挤压 */ .intl-header .wrap{ height:64px; gap:10px; } .intl-logo img{ height:36px; } /* 窄屏空间不够四件套（logo / 热线 / CTA / 汉堡）：**整块热线区隐藏**。 用户 2026-09-16 要求「移动端顶部中间这个电话不要」——改前只隐藏 CTA 按钮、 保留 16px 号码，头部仍显拥挤。电话号码在抽屉菜单的「联系我们」页、 页脚、首页 CTA 里都可达，不会丢失联系入口。 */ .intl-hotline{ display:none; } } @media (max-width:560px){ /* 页脚：品牌简介独占一行，三个链接栏横向并排 —— 单列竖排会把整屏拉得很长且右侧留白 */ .intl-footer{ padding:44px 0 24px; } .intl-footer .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px 14px; } .intl-footer .grid > div:first-child{ grid-column:1 / -1; } .intl-footer h4{ font-size:13.5px; margin-bottom:12px; } .intl-footer ul li{ margin:0 0 9px; } .intl-footer ul li a{ font-size:13px; } .intl-copy{ flex-direction:column; } } @media (max-width:380px){ /* 极窄屏：三列改两列，避免长词换行把列撑开 */ .intl-footer .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* ============================================================ ---------- 5. 场景详情页（solutions/ind-*.html）版式统一 ---------- ------------------------------------------------------------ 这些页面的正文是从原文抓来的，原先把「编号 / 项目符号 / 子项 / 说明」 整坨拍平进一个
  • 或

    ，导致 24 个页面长短悬殊、毫无层次。 _fmt_ind.py 已把它们拆成规整条目： · 关键词 -> （核心痛点：/ 解决方案：/ 安全性高 …） · 编号 -> （1. / 2. / a. / b. …） · 要点段 ->

    · 从属说明 ->

    这里统一规定它们的呈现方式。 ============================================================ */ /* --- 5.1 两栏面板（行业痛点 / 方案要点） --- */ .two-col{ gap:22px; align-items:stretch; } /* 只有一个 panel 时，两列网格会整列留空（实测空块 672×1160）。 改为整行占满，并把要点列表分两栏，避免变成又宽又薄的一栏文字。 */ .two-col--single{ grid-template-columns:1fr; } .two-col--single .pd-feats{ columns:2; column-gap:44px; } .two-col--single .pd-feats li{ break-inside:avoid; } .panel{ padding:26px 28px 22px; } .panel h3{ margin-bottom:14px; font-size:17.5px; } .panel .pd-feats{ margin:0; } .panel li{ position:relative; padding-left:16px; margin-bottom:11px; font-size:14px; line-height:1.9; color:#475569; } .panel li:last-child{ margin-bottom:0; } .panel li::before{ content:""; position:absolute; left:0; top:10px; width:6px; height:6px; border-radius:50%; background:#1d4ed8; opacity:.5; } .panel li strong{ color:#1d4ed8; font-weight:700; } .panel li b.pn{ display:inline-block; min-width:17px; margin-right:2px; color:#1d4ed8; font-weight:800; } /* --- 5.2 方案详解正文 --- */ .pd-body{ max-width:920px; margin:0 auto; } .pd-body h4{ font-size:17px; font-weight:700; color:#0f172a; line-height:1.5; margin:30px 0 12px; padding-left:12px; border-left:4px solid #1d4ed8; } .pd-body h4:first-child{ margin-top:0; } .pd-body p{ font-size:15px; line-height:1.95; color:#4a4a4a; margin:0 0 10px; } .pd-body p.pd-pt{ margin:20px 0 9px; color:#334155; font-weight:600; } .pd-body p.pd-pt:first-child{ margin-top:0; } .pd-body p.pd-pt b.pn{ color:#1d4ed8; font-weight:800; margin-right:3px; } .pd-body p.pd-pt strong{ color:#0f172a; } .pd-body p.pd-sub{ padding-left:14px; border-left:2px solid #eef2f7; font-size:14px; line-height:1.9; color:#64748b; margin:0 0 9px; } /* --- 5.3 原文层级标题（_x3_fix.py 从句中拆出，见 scanmax-site-ops §10.4）--- 源头：_gen_ind.py 把原文所有行 ''.join 后按 110 字并段，章节号（一、二、三） 和括号子标题（（一）（二））被粘进句子中间。修复后它们独立成条， 这里给它们「标题」而不是「条目」的观感，与 .pd-body h4 同一套语言。 */ .pd-feats li.ph{ margin:18px 0 10px; font-size:15.5px; font-weight:800; color:#0f172a; } .pd-feats li.ph:first-child{ margin-top:0; } .pd-feats li.ph::before{ background:#1d4ed8; opacity:1; width:7px; height:7px; top:12px; } .pd-feats li.ph2{ margin:14px 0 7px; font-size:14.5px; font-weight:700; color:#1d4ed8; } .pd-feats li.ph2::before{ background:#93c5fd; opacity:1; } .pd-body p.ph2{ margin:16px 0 8px; font-size:15px; font-weight:700; color:#1d4ed8; } /* 分组小标题：原文里没有编号的分组名（如 anti 页「物理结构与光学防伪技术」）。 2026-09-17 起由 _gen_ind.py 的 blocks_of() 识别为 H3 —— 旧版没有这一级， 这些分组名会被粘进相邻正文（"化学与材料防伪特殊油墨：…"）。 */ .pd-body p.ph3{ margin:14px 0 6px; padding-left:10px; font-size:14.5px; font-weight:700; color:#0f172a; border-left:3px solid #93c5fd; } /* --- 5.4 方案详解里的对比表（_x8b_table.py 重建，2026-09-17）--- 源头：原文里的一张 5 列对比表被 _gen_ind.py 的 paras() 拍平成一整段文字。 复用站内闲置的 .spec-table（定义在 style.css，此前全站 0 处引用）， 这里用字面色值改成当前设计语言（蓝 #1d4ed8 / 深 #0f172a / 灰 #64748b）。 */ .pd-body .pd-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:16px 0 22px; } .pd-body .spec-table{ margin:16px 0 22px; font-size:13.5px; line-height:1.7; background:#fff; border:1px solid #e2e8f0; } .pd-body .spec-table th, .pd-body .spec-table td{ padding:11px 13px; text-align:left; vertical-align:top; border-bottom:1px solid #e2e8f0; border-right:1px solid #e2e8f0; } .pd-body .spec-table th{ background:#f1f5f9; color:#0f172a; font-weight:700; white-space:nowrap; } .pd-body .spec-table th:last-child, .pd-body .spec-table td:last-child{ border-right:0; } .pd-body .spec-table tr:last-child td{ border-bottom:0; } .pd-body .spec-table td.tt{ background:#f8fafc; } .pd-body .spec-table td.tt strong{ display:block; color:#0f172a; font-weight:700; } .pd-body .spec-table span.adv, .pd-body .spec-table span.dis{ display:block; } .pd-body .spec-table span.adv{ color:#1d4ed8; } .pd-body .spec-table span.dis{ color:#64748b; margin-top:4px; } @media (max-width:900px){ .pd-body .pd-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:16px 0 22px; } .pd-body .spec-table{ margin:0; font-size:12.5px; } .pd-body .spec-table th, .pd-body .spec-table td{ padding:9px 11px; white-space:nowrap; } } @media (max-width:900px){ .two-col{ grid-template-columns:1fr; gap:16px; } .panel{ padding:22px 20px 18px; } .two-col--single .pd-feats{ columns:1; } } /* ============================================================ ---------- 6. 移动端悬浮联系条（在线咨询 / 拨打电话） ---------- ------------------------------------------------------------ 用户 2026-09-16 要求：移动端加「在线咨询」（跳 53KF 客服）与「拨打」 （拨 13530790621）两个入口，「小巧美观一点」。 做法：右下角竖排两枚小胶囊（宽 ≥90 / 高 38，正好 4 字 + 15px 图标）， 上「在线咨询」用品牌蓝渐变做主行动，下「拨打电话」白底描边做次行动。 内容来源：_partials/fab.html（由 _sync_chrome.py 注入全站）。 层级 150：盖过 .catbar(88) 与粘性头部(50)，但低于导航抽屉(200)； 抽屉打开时 nav-mobile.js 会给 body 加 .nav-open 直接把悬浮条隐藏， 避免抽屉高度不足时它在下方露出来。 ============================================================ */ .mfab{ display:none; /* 桌面端 >900px 不出现，版面照旧 */ position:fixed; right:13px; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); /* 避开 iPhone 底部横条 */ z-index:150; flex-direction:column; align-items:flex-end; gap:9px; animation:mfab-in .42s cubic-bezier(.22,.61,.36,1) .3s both; } @keyframes mfab-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } } .mfab-btn{ display:inline-flex; align-items:center; justify-content:center; gap:5px; box-sizing:border-box; width:98px; height:38px; padding:0 8px; border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:.2px; white-space:nowrap; text-decoration:none; -webkit-tap-highlight-color:transparent; transition:transform .16s ease, box-shadow .16s ease, background .16s ease; } .mfab-btn:active{ transform:scale(.94); } .mfab-ico, .mfab-ico svg{ display:block; width:15px; height:15px; flex:0 0 auto; } /* 两枚按钮都写成 .mfab-btn.xxx（0,2,0），否则会被 style.css 的 a:hover（0,1,1）压过去 */ .mfab-btn.mfab-chat{ background:linear-gradient(135deg,#1d4ed8,#0ea5e9); color:#fff; box-shadow:0 6px 16px rgba(29,78,216,.30); } .mfab-btn.mfab-chat:hover, .mfab-btn.mfab-chat:active{ color:#fff; } .mfab-btn.mfab-call{ background:#fff; color:#1d4ed8; border:1px solid #cfdcf3; box-shadow:0 4px 12px rgba(15,27,45,.12); } .mfab-btn.mfab-call:hover, .mfab-btn.mfab-call:active{ color:#1d4ed8; background:#f4f8ff; } @media (max-width:900px){ .mfab{ display:flex; } } body.nav-open .mfab{ display:none; } /* 导航抽屉打开时让位 */ @media (prefers-reduced-motion:reduce){ .mfab{ animation:none; } } /* ============================================================ 7. 桌面端（>900px）：下滑隐藏导航条 / 上滑立即滑回 ------------------------------------------------------------ 用户 2026-09-17 第二次要求（第一次的"整个顶部一起收"被否掉了）： 「PC 端的导航栏这块区域，下滑的时候隐藏，往上滑动的时候就展示出来，只做这块」 → 只动