@font-face{font-family:SG;src:url("../fonts/space-grotesk-light.woff2") format("woff2");font-display:block} @font-face{font-family:MM;src:url("../fonts/martian-mono-regular.woff2") format("woff2");font-display:block} @font-face{font-family:Manrope;src:url("../fonts/manrope-extralight.woff2") format("woff2");font-display:block} *{box-sizing:border-box;margin:0;padding:0} :root{--paper:#f3f3f1;--ink:#16181a;--dim:#67696d;--line:#cdcecc;--line2:#a8aaa9; --cy:#0096c7;--mg:#e11d74;--yl:#f2b705} body{background:var(--paper);color:var(--ink);font:16px/1.6 Manrope,sans-serif} a{color:inherit;text-decoration:none} .wrap{max-width:1216px;margin:0 auto;padding:0 56px} /* 色标条 —— 印刷语言 */ .cbar{height:8px;display:flex} .cbar i{flex:1} .cbar i:nth-child(1){background:var(--cy)}.cbar i:nth-child(2){background:var(--mg)} .cbar i:nth-child(3){background:var(--yl)}.cbar i:nth-child(4){background:var(--ink)} .meta{border-bottom:1px solid var(--line2)} .meta .wrap{display:flex;align-items:center;gap:14px;height:42px;font:500 10.5px/1 MM; letter-spacing:.18em;text-transform:uppercase;color:var(--dim)} .meta b{color:var(--ink);font-weight:500} .meta .r{margin-left:auto;display:flex;gap:20px} /* hero：居中大标题 + 出血图 */ .hero{padding:78px 0 0;text-align:center} .eyebrow{font:500 10.5px/1 MM;letter-spacing:.26em;text-transform:uppercase;color:var(--mg)} h1{font-family:SG;font-weight:500;font-size:clamp(40px,5.4vw,76px);line-height:1.02; letter-spacing:-.03em;margin:22px auto 0;max-width:16ch} .lede{margin:26px auto 0;max-width:56ch;color:var(--dim);font-size:16.5px} .cta{display:flex;gap:12px;justify-content:center;margin-top:34px} .btn{font:500 11px/1 MM;letter-spacing:.16em;text-transform:uppercase;padding:16px 24px;border:1.5px solid var(--ink)} .btn.solid{background:var(--ink);color:var(--paper)} .bleed{margin-top:56px;position:relative;background:#fff;height:400px;overflow:hidden; border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)} .bleed img{width:100%;height:100%;object-fit:cover} .bleed .reg{position:absolute;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.75)} .bleed .reg::before,.bleed .reg::after{content:"";position:absolute;background:rgba(255,255,255,.75)} .bleed .reg::before{left:50%;top:0;width:1px;height:100%} .bleed .reg::after{top:50%;left:0;height:1px;width:100%} .bleed .r1{left:20px;top:20px}.bleed .r2{right:20px;bottom:20px} .bleed .chip{position:absolute;left:0;bottom:0;background:var(--paper);padding:14px 22px; font:500 10.5px/1.6 MM;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)} /* 目录：大号数字 + 引导线 */ .toc{padding:8px 0 72px} .toc-head{padding:60px 0 18px;border-bottom:2.5px solid var(--ink)} .toc-head h2{font-family:SG;font-weight:500;font-size:34px;letter-spacing:-.02em} .entry{display:grid;grid-template-columns:112px 168px 1fr 292px;gap:34px;align-items:center; padding:26px 0;border-bottom:1px solid var(--line2)} .entry .idx{font-family:SG;font-weight:500;font-size:56px;line-height:.9;letter-spacing:-.04em} .entry .idx small{display:block;font:500 10px/1 MM;letter-spacing:.2em;color:var(--dim);margin-top:10px} .entry .ph-img{height:124px;background:var(--paper);border:1px solid var(--line);display:flex; align-items:center;justify-content:center} .entry .ph-img img{max-width:84%;max-height:84%;object-fit:contain} .entry h3{font-family:SG;font-weight:500;font-size:21px;letter-spacing:-.015em;line-height:1.25;margin:0 0 8px} .entry .code{font:500 10.5px/1 MM;letter-spacing:.18em;text-transform:uppercase;color:var(--mg)} .entry p{color:var(--dim);font-size:14px;max-width:50ch;margin:10px 0 0} .spec{border-top:1.5px solid var(--ink)} .spec div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line); font:500 12px/1 MM} .spec dt{color:var(--dim);font-weight:400} .spec dd{color:var(--ink)} /* ================= 覆盖层（源 c-press.html 不动） ================= */ :root{--paper:#f3f3f1;--ink:#16181a;--dim:#67696d;--line:#cdcecc;--line2:#a8aaa9; --c1:#0096c7;--c2:#e11d74;--c3:#f2b705;--mg-ink:#c2185b} body{background:var(--paper)} .entry .ph-img{background:var(--paper)} /* 按钮 → Apple 胶囊：去直角 / 去边框 / 去大写+大字距 */ .btn{font:500 16px/1 Manrope,sans-serif;letter-spacing:0;text-transform:none; padding:13px 27px;border:0;border-radius:980px;background:transparent;color:var(--ink); box-shadow:inset 0 0 0 1px rgba(22,24,26,.30); transition:background .18s ease,box-shadow .18s ease} .btn.solid{background:var(--ink);color:#fff;box-shadow:none} .cta{gap:14px} /* ================= 主 CTA · CMYK 色码「多米诺」================= 几何（与 _tmp/fin-mock/btn-domino-v3.html 同源，勿改）： 色码 5×15、gap 3px、.chips 高 15px 且 align-items:flex-end ⇒ 地面线 = .chips 容器下缘（色码落脚处） 铰链 = 底左角（transform-origin:bottom left）⇒ 站立的底角原地不动， 身体沿地面线躺下（倒后下缘 − 地面线 = 0.0px）。 反例：**只改轴、不改角度**（bottom right 配 rotate(-90deg)）会让身体掉到 地面线以下 5px（= 色码自身宽度），站立原位被腾空 —— 用户判「像绕角转圈 / 少一个头的高度」。 ⚠ 上面是「轴与角度必须配对」的反例，不等于 bottom right 本身不可用： 见下方 .chips.end —— 轴改底右角时必须同步把角度取正（rotate(90deg)）， 两条判据同样成立。 彩色只给主 CTA；次按钮保持中性 ghost 描边，否则层级被稀释。 */ .btn{display:inline-flex;align-items:center;gap:14px} .chips{display:inline-flex;gap:3px;align-items:flex-end;height:15px;flex:none} .chips i{display:block;width:5px;height:15px;border-radius:1.5px; transform-origin:bottom left; transition:transform .42s cubic-bezier(.6,.04,.3,1); transition-delay:calc(var(--i) * 60ms)} /* 立回：左 → 右 */ .chips i:nth-child(1){--i:0;background:var(--c1)} .chips i:nth-child(2){--i:1;background:var(--c2)} .chips i:nth-child(3){--i:2;background:var(--c3)} .chips i:nth-child(4){--i:3;background:#8b8f95} /* ── 色码排在标签**右侧**的按钮（`end` 类）：几何整体镜像，倒向**右** ── 同一个多米诺被用在两种排布上，方向不能照搬： 色码在右时若沿用左倒，身体正好倒进「标签 ↔ 色码」那段 14px 的 gap 里压住末字母 （实测倒后左缘越过色码左缘 15px > gap 14px）。 镜像做法 = 轴改底**右**角 + 角度取正（rotate 90deg）—— 轴与角度**成对**改： ① 铰链（底右角）仍原地不动；② 身体仍躺在地面线（.chips 下缘）上； ③ 落点全在按钮的空白侧，文字之外。 波次同步对调：倒下仍沿「倒的方向」推进（左 → 右，左端先倒），立回反向。 */ .chips.end i{transform-origin:bottom right; transition-delay:calc((3 - var(--i)) * 60ms)} /* 立回：右 → 左 */ .btn.solid:focus-visible .chips i, .btn.solid.is-play .chips i{transform:rotate(-90deg); transition-delay:calc((3 - var(--i)) * 70ms)} /* 倒下：右 → 左 */ .btn.solid:focus-visible .chips.end i, .btn.solid.is-play .chips.end i{transform:rotate(90deg); transition-delay:calc(var(--i) * 70ms)} /* 倒下：左 → 右 */ /* :hover 必须包在指针精确的媒体查询里 —— 否则触屏 tap 把 :hover 粘住 */ @media (hover:hover) and (pointer:fine){ .btn:hover{box-shadow:inset 0 0 0 1px rgba(22,24,26,.52)} .btn.solid:hover{background:#33363b} .btn.solid:hover .chips i{transform:rotate(-90deg); transition-delay:calc((3 - var(--i)) * 70ms)} .btn.solid:hover .chips.end i{transform:rotate(90deg); transition-delay:calc(var(--i) * 70ms)} } @media (pointer:coarse){ .btn{padding:15px 27px} } /* 触控目标 ≥44px */ @media (prefers-reduced-motion: reduce){ .chips i,.chips.end i{transition:none} .btn.solid:hover .chips i,.btn.solid.is-play .chips i, .btn.solid:focus-visible .chips i, .btn.solid:hover .chips.end i,.btn.solid.is-play .chips.end i, .btn.solid:focus-visible .chips.end i{transform:none} } /* 小字强调色加深：#e11d74 在中性底上仅 4.08:1，不达 AA 4.5 */ .eyebrow,.entry .code{color:var(--mg-ink)} /* CMYK 点缀：每条产品线一枚色码条（不承载文字，只做索引） */ .toc article.entry{position:relative} .toc article.entry::before{content:"";position:absolute;left:-26px;top:20px;bottom:20px; width:5px;border-radius:2.5px;background:var(--line2)} .toc article.entry:nth-of-type(1)::before{background:var(--c1)} .toc article.entry:nth-of-type(2)::before{background:var(--c2)} .toc article.entry:nth-of-type(3)::before{background:var(--c3)} /* ============================================================================ v2 追加层：完整首页其余 10 区块 语言沿用方向 C —— 目录 / 表格化行 / 发丝细线 / CMYK 只作索引色 模块清单与顺序来自 P1 竞对调研（19 家英文标杆，首页模块中位 12 块） ============================================================================ */ :root{ /* 令牌层（v2 新增段落一律走令牌；既有 4 段仍是裸值，待与闸门配置一并整改） */ --fs-idx:56px; --fs-sec:34px; --fs-h3:19px;--fs-h4:17px; --fs-lede:16.5px;--fs-sm:14px; --fs-micro:10.5px;--fs-note:12px; --gap:1px } /* 待填槽位：全站统一标记。虚线是「未填」的非颜色线索，文字仍为满对比 ink（不低于 4.5:1） */ .ph{color:var(--ink);border-bottom:1px dashed var(--line2)} /* ---- 通用区块头（与 .toc-head 同一形态：2.5px 墨线在标题下） ---- 2026-10-10：去掉右侧说明句。眉标 + 标题即可，不再做左右分栏（也不给标题留半宽）。 标题拿满整行后长标题折行更少，故这里不再需要 flex / justify-content。 */ .sh{margin-top:64px;padding:0 0 16px;border-bottom:2.5px solid var(--ink)} .sh .k{display:block;font:500 var(--fs-micro)/1 MM;letter-spacing:.2em; text-transform:uppercase;color:var(--mg-ink);margin-bottom:13px} .sh h2{font-family:SG;font-weight:500;font-size:var(--fs-sec);letter-spacing:-.02em;line-height:1.1} /* ---- 索引色条：与 .toc article.entry::before 同一语言（5px 圆头竖条） ---- 必须挂在行元素上做绝对定位：做成网格子项时 grid-row:1/-1 会退化成第 1 行 （没有显式行轨道时 -1 指第 1 条线），窄屏折行后竖条只剩 18px 高。 */ .hair.apps>*:nth-of-type(1)::before{background:var(--c1)} .hair.apps>*:nth-of-type(2)::before{background:var(--c2)} .hair.apps>*:nth-of-type(3)::before{background:var(--c3)} .hair.apps>*:nth-of-type(4)::before{background:#8b8f95} /* ---- 发丝线网格：gap:1px + 底线色 = 网格线。换列/换行时不会像 border-left 那样错边 ---- */ .hair{display:grid;gap:var(--gap);background:var(--line2); border-bottom:1px solid var(--line2)} .hair>*{background:var(--paper)} /* 01 应用行业 */ .hair.apps{grid-template-columns:1fr} .hair.apps>*{position:relative;display:grid;grid-template-columns:44px 1fr 168px; gap:24px;align-items:start;padding:22px 0 22px 24px} .hair.apps>*::before{content:"";position:absolute;left:0;top:22px;bottom:22px; width:5px;border-radius:2.5px;background:var(--line2)} .apps .n{font:500 11px/1.6 MM;letter-spacing:.18em;color:var(--dim)} .apps h3{font-family:SG;font-weight:500;font-size:var(--fs-h3);letter-spacing:-.01em;margin:0} .apps p{color:var(--dim);font-size:var(--fs-sm);margin:8px 0 0;max-width:46ch;line-height:1.6} .apps .sub{font:500 11px/1.7 MM;letter-spacing:.1em;text-transform:uppercase; color:var(--dim);text-align:right;padding-top:2px} /* 02 选型指引 */ .hair.guide{grid-template-columns:1fr} .hair.guide>*{display:grid;grid-template-columns:1.15fr 1fr 168px;gap:28px; align-items:center;padding:24px 0} .guide .if{font-family:SG;font-weight:500;font-size:var(--fs-h3);line-height:1.3} .guide .if em{display:block;font:400 var(--fs-sm)/1.5 Manrope,sans-serif;font-style:normal; color:var(--dim);margin-top:7px} .guide .then{color:var(--dim);font-size:14.5px;line-height:1.65} .guide .pick{font:500 11px/1 MM;letter-spacing:.16em;text-transform:uppercase; border:1px solid var(--line2);padding:13px 10px;text-align:center} /* 03 流程 */ .hair.flow{grid-template-columns:repeat(5,1fr)} .hair.flow>*{padding:24px 22px 28px} .flow .n{display:block;font:500 var(--fs-micro)/1 MM;letter-spacing:.2em; color:var(--dim);margin-bottom:15px} .flow h4{font-family:SG;font-weight:500;font-size:var(--fs-h4);letter-spacing:-.01em; line-height:1.3;margin:0 0 9px} .flow p{color:var(--dim);font-size:13.5px;line-height:1.6;margin:0} /* 04 工厂与品控 */ .hair.facts{grid-template-columns:repeat(4,1fr)} .hair.facts>*{padding:26px 22px} .facts b{display:block;font-family:SG;font-weight:500;font-size:33px; letter-spacing:-.02em;line-height:1.05} .facts span{display:block;margin-top:12px;font:500 var(--fs-micro)/1 MM; letter-spacing:.18em;text-transform:uppercase;color:var(--dim)} .fnote{display:grid;grid-template-columns:1fr 1fr;gap:48px; padding:32px 0 8px;border-bottom:1px solid var(--line2)} .fnote p{color:var(--dim);font-size:14.5px;line-height:1.75;margin:0;max-width:44ch} .qc{list-style:none;margin:0} .qc li{position:relative;padding-left:20px;font-size:var(--fs-sm);line-height:1.6; margin-bottom:13px;color:var(--ink)} .qc li:last-child{margin-bottom:0} .qc li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px; border-radius:1px;background:var(--ink)} /* 05 OEM / ODM */ .oem{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start; padding:34px 0 8px;border-bottom:1px solid var(--line2)} .oem .lede2{color:var(--dim);font-size:14.5px;line-height:1.75;margin:0 0 24px;max-width:44ch} .oemspec{border-top:1.5px solid var(--ink);max-width:320px} .oem ol{list-style:none;counter-reset:o;margin:0} .oem li{counter-increment:o;position:relative;padding-left:40px;margin-bottom:19px; color:var(--dim);font-size:var(--fs-sm);line-height:1.6} .oem li:last-child{margin-bottom:0} .oem li::before{content:counter(o,decimal-leading-zero);position:absolute;left:0;top:3px; font:500 11px/1 MM;letter-spacing:.14em;color:var(--mg-ink)} .oem li b{display:block;color:var(--ink);font-family:SG;font-weight:500; font-size:var(--fs-h4);letter-spacing:-.01em;margin-bottom:4px} /* 06 服务与支持 */ .hair.svc{grid-template-columns:repeat(4,1fr)} .hair.svc>*{padding:26px 22px 28px} .svc .n{display:block;font:500 var(--fs-micro)/1 MM;letter-spacing:.2em; color:var(--dim);margin-bottom:15px} .svc h4{font-family:SG;font-weight:500;font-size:var(--fs-h4);letter-spacing:-.01em; line-height:1.3;margin:0 0 9px} .svc p{color:var(--dim);font-size:13.5px;line-height:1.6;margin:0} /* 07 客户证言（形占位：给出预期体量，便于日后填入真实引语时不返工） */ .hair.qs{grid-template-columns:repeat(2,1fr)} .hair.qs>*{padding:30px 28px} .qs blockquote{margin:0;font-family:SG;font-weight:500;font-size:var(--fs-h3); line-height:1.5;letter-spacing:-.01em;color:var(--dim)} .qs cite{display:block;margin-top:18px;font:500 var(--fs-micro)/1.7 MM; letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-style:normal} /* 08 经销网络 */ .hair.dl{grid-template-columns:repeat(4,1fr)} .hair.dl>*{padding:24px 22px 26px} .dl .region{font:500 var(--fs-micro)/1 MM;letter-spacing:.18em; text-transform:uppercase;color:var(--dim)} .dl h4{font-family:SG;font-weight:500;font-size:var(--fs-h4);letter-spacing:-.01em; margin:13px 0 7px} .dl .who{font-size:13.5px;color:var(--dim);line-height:1.6} /* 09 资料下载 */ .hair.dls{grid-template-columns:1fr} .hair.dls>*{display:grid;grid-template-columns:1fr 76px 84px;gap:24px; align-items:baseline;padding:18px 0} .dls .t{font-family:SG;font-weight:500;font-size:var(--fs-h4);letter-spacing:-.01em} .dls .f,.dls .z{font:500 11px/1 MM;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .dls .z{text-align:right} .dnote{color:var(--dim);font-size:var(--fs-note);line-height:1.7; margin:18px 0 0;max-width:62ch} /* 10 询盘 */ .inq{display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:start; padding:34px 0 8px;border-bottom:1px solid var(--line2)} .inq .note{color:var(--dim);font-size:var(--fs-sm);line-height:1.75;margin:0;max-width:38ch} .inq form{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px} .inq .f{display:flex;flex-direction:column;gap:8px} .inq .f.full{grid-column:1/-1} .inq label{font:500 var(--fs-micro)/1 MM;letter-spacing:.16em; text-transform:uppercase;color:var(--dim)} .inq input,.inq select,.inq textarea{font:400 14.5px/1.5 Manrope,sans-serif; color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line2); padding:9px 2px;border-radius:0;width:100%} .inq textarea{min-height:78px;resize:vertical} .inq input:focus,.inq select:focus,.inq textarea:focus{outline:0;border-bottom-color:var(--ink)} .inq .fnote2{grid-column:1/-1;color:var(--dim);font-size:var(--fs-note); line-height:1.6;margin:2px 0 0} /* ---- 页脚（单文件版自带；站点版由注入脚本产出，不共用这一份） ---- */ .ft{border-top:2.5px solid var(--ink);margin-top:76px;padding:46px 0 34px} .ft-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px} .ft-top .brand b{display:block;font-family:SG;font-weight:500;font-size:var(--fs-h3); letter-spacing:-.01em} .ft-top .brand p{color:var(--dim);font-size:13.5px;line-height:1.7; margin:11px 0 0;max-width:34ch} .ft-col .hd{display:block;font:500 var(--fs-micro)/1 MM;letter-spacing:.18em; text-transform:uppercase;color:var(--dim);margin-bottom:15px} .ft-col a,.ft-col .phv{display:block;width:max-content;max-width:100%; font-size:13.5px;line-height:2;color:var(--ink);text-decoration:none} /* 联系方式与社媒账号沿用 purcellcutting.com 的对外口径（同一家公司、同一个销售台）。 非链接的两行（地址 / 营业时间）与链接同排版，免得一行是链接一行是文本、基线不齐。 */ .ft-col .ftv{display:block;width:max-content;max-width:100%; font-size:13.5px;line-height:2;color:var(--ink)} /* 按钮形态服从本站性格：直角 + 发丝描边，无圆角、无阴影、无位移（与主 CTA 的胶囊刻意反差—— 胶囊只给「只此一个」的主按钮，页脚图标不能抢层级）。 */ .ft-social{display:flex;gap:7px;margin-top:14px} .ft-social a{display:flex;align-items:center;justify-content:center;width:32px;height:32px; border:1px solid var(--line2);color:var(--dim); transition:color .18s ease,border-color .18s ease} .ft-social a:hover{color:var(--ink);border-color:var(--ink)} .ft-bot{display:flex;gap:18px;margin-top:38px;padding-top:17px; border-top:1px solid var(--line2);font:500 var(--fs-micro)/1.6 MM; letter-spacing:.14em;text-transform:uppercase;color:var(--dim)} .ft-bot .r{margin-left:auto;display:flex;gap:22px} /* ---- 键盘焦点指示（此前全站缺失；虚线/描边之外必须有一条可见外描边） ---- */ a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible{outline:2px solid var(--mg-ink);outline-offset:3px} /* ---- 既有一处节奏微调：设备清单后紧接新区块，去掉多余的下留白 ---- */ .toc{padding:8px 0 0} /* ============================ 响应式 ============================ */ @media (max-width:1080px){ .hair.apps>*{grid-template-columns:44px 1fr} .apps .sub{grid-column:2;text-align:left;padding-top:6px} .hair.guide>*{grid-template-columns:1fr 1fr;row-gap:14px} .guide .pick{grid-column:1/-1;text-align:left} .hair.flow{grid-template-columns:repeat(3,1fr)} .hair.facts,.hair.svc,.hair.dl{grid-template-columns:repeat(2,1fr)} .inq{grid-template-columns:1fr;gap:32px} .oem,.fnote{grid-template-columns:1fr;gap:30px} .ft-top{grid-template-columns:1fr 1fr} } @media (max-width:900px){ .entry{grid-template-columns:1fr;row-gap:18px} .entry .idx{font-size:40px} .entry .ph-img{height:150px} .bleed{height:300px} .hair.qs{grid-template-columns:1fr} .meta .r{display:none} } @media (max-width:720px){ .wrap{padding:0 22px} .hero{padding-top:52px} .bleed{height:210px} .bleed .reg{display:none} .cta{flex-wrap:wrap} .btn{flex:1 1 100%;justify-content:center} .sh{margin-top:50px} .hair.flow,.hair.facts,.hair.svc,.hair.qs,.hair.dl{grid-template-columns:1fr} .hair.apps>*{grid-template-columns:1fr} .apps .n,.apps .sub,.apps>*>div{grid-column:1;text-align:left} .hair.guide>*{grid-template-columns:1fr} .hair.dls>*{grid-template-columns:1fr 58px 66px;row-gap:7px} .inq form{grid-template-columns:1fr} .ft-top{grid-template-columns:1fr;gap:28px} .ft-bot{flex-direction:column;gap:9px} .ft-bot .r{margin-left:0;flex-direction:column;gap:7px} .meta span{display:none} } /* ============================================================================ v2 影像带（2026-10-10 用户：「首页的图片含量是不是太少了点，至少增加 5 张」） 语言沿用 **发丝线网格**（与 .hair 同一手法：gap:1px + 底线色 = 分隔线）， 因此换列/换行不会像 border-left 那样错边；**不等宽、无框、无圆角、无投影** —— 不构成「等宽卡片网格」，仍是目录式版面的影像版。 高度不是拍脑袋定的：--pbh 按**源图宽高比**反推，目标是 object-fit:cover 的 裁切面积损失 ≤ 30%（保留率 = min(盒AR, 源AR) / max(盒AR, 源AR)）。 ▸ 应用带源图是 1:1 的特写 ⇒ 盒子也要接近方形（1.38）， 若做成 2.2 的横条，一张 1000×1000 只剩中间 45% 高，上下全削掉。 ▸ 工厂带源图是 16:9 的车间实拍 ⇒ 盒子必须保持横向（168px 高、1.42~2.1）， 压成竖条会把人直接裁掉一半。 改档只动 --pbh 这一个数（与 glass 的 --scrim 同思路）。 ============================================================================ */ .pband{display:grid;gap:var(--gap);background:var(--line2);--pbh:300px; margin-top:26px;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--line2)} .pband figure{margin:0;min-width:0;background:var(--paper);display:flex;flex-direction:column} .pband .shot{height:var(--pbh);overflow:hidden;background:var(--line)} .pband img{display:block;width:100%;height:100%;object-fit:cover} .pband figcaption{padding:10px 0 13px;font:500 var(--fs-micro)/1.5 MM;letter-spacing:.13em; text-transform:uppercase;color:var(--dim)} .pband figcaption b{display:block;font-weight:500;color:var(--ink)} /* 应用带：源图 1:1 → 两格等宽、盒子接近方形 */ .pband.apps{grid-template-columns:1fr 1fr;--pbh:400px} /* 工厂带：三格不等宽（主轴 1.5fr），盒子保持横向 */ .pband.fac{grid-template-columns:1.5fr 1fr 1.15fr;--pbh:168px} /* 收尾影像带：与 hero 的 .bleed 同一形态（套准十字 + 左下角标签），首尾呼应 */ .bleed.ship{margin-top:64px} @media (max-width:1080px){ .pband.apps{--pbh:360px} .pband.fac{grid-template-columns:1fr 1fr;--pbh:250px} /* 三格改两列后末格跨满，避免右下留半格空 */ .pband.fac>figure:last-child{grid-column:span 2} } @media (max-width:720px){ .pband{margin-top:20px} .pband.apps{--pbh:260px} .pband.fac{--pbh:200px} .bleed.ship{margin-top:50px} } @media (max-width:480px){ .pband.apps{--pbh:200px} .pband.fac{--pbh:120px} } @font-face{font-family:'PJersey';font-style:normal;font-weight:400;font-display:block;src:url(../fonts/jersey-10.woff2) format('woff2')} @font-face{font-family:'PDoto';font-style:normal;font-weight:100 900;font-display:block;src:url(../fonts/doto-black.woff2) format('woff2')} /* ============================================================================ 像素字层：只作用于显示字族 —— 标题 / 陈述 / 大数字 正文 Manrope、等宽标签 MM、表单、页脚小字一律不动。 字号倍数来自像素实测（见 _tmp/pixfont/measure_ink.py），不是拍脑袋： Jersey 10 ×1.37 ⇒ 与 SG 等视觉高、等行宽 Doto 800 ×1.06 ⇒ 同上（只用于大数字） ============================================================================ */ :root{--pixs:1.37;--pixn:1.06} h1,h2,.sh h2,.toc-head h2,.entry h3,.apps h3,.guide .if,.flow h4,.svc h4,.dl h4,.oem li b,.dls .t,.qs blockquote,.ft-top .brand b{font-family:'PJersey',SG;font-weight:400;letter-spacing:0} .entry .idx,.facts b{font-family:'PDoto',SG;font-weight:800;letter-spacing:0} h1{font-size:clamp(calc(40px*var(--pixs)),calc(5.4vw*var(--pixs)),calc(76px*var(--pixs))); line-height:calc(1.02/var(--pixs));max-width:20ch} .sh h2{font-size:calc(var(--fs-sec)*var(--pixs));line-height:calc(1.1/var(--pixs))} h2,.toc-head h2{font-size:calc(34px*var(--pixs));line-height:calc(1.6/var(--pixs))} .entry h3{font-size:calc(21px*var(--pixs));line-height:calc(1.25/var(--pixs))} .apps h3,.ft-top .brand b{font-size:calc(var(--fs-h3)*var(--pixs));line-height:calc(1.6/var(--pixs))} .guide .if{font-size:calc(var(--fs-h3)*var(--pixs));line-height:calc(1.3/var(--pixs))} .qs blockquote{font-size:calc(var(--fs-h3)*var(--pixs));line-height:calc(1.5/var(--pixs))} .flow h4,.svc h4{font-size:calc(var(--fs-h4)*var(--pixs));line-height:calc(1.3/var(--pixs))} .dl h4,.oem li b,.dls .t{font-size:calc(var(--fs-h4)*var(--pixs));line-height:calc(1.6/var(--pixs))} .entry .idx{font-size:calc(56px*var(--pixn));line-height:calc(.9/var(--pixn))} .facts b{font-size:calc(33px*var(--pixn));line-height:calc(1.05/var(--pixn))} /* 响应式字号也要跟着倍数走；本层在样式表末尾，若不重复声明会盖掉 900px 那档 */ @media (max-width:900px){.entry .idx{font-size:calc(40px*var(--pixn))}} /* 换字后 ch 宽度变了，标题的折行位置跟着变，会出现「job」独占一行的孤字。 balance 让两行长度接近，孤字消失；不支持的浏览器退回自动折行，不会更差。 */ h1,.sh h2,.toc-head h2,.entry h3,.qs blockquote,.guide .if{text-wrap:balance} /* ============================================================================ 站框架层（2026-10-24 落地 A 版时新增） 页头 / 页脚由 assets/js/site.js 注入，故样式写在这里、不写进 HTML。 语言沿用方向 C：纸底 + 墨线 + 等宽小字；按钮沿用模块里那一枚胶囊，不另造。 ============================================================================ */ :root{--fs-meta:10.5px;--fs-nav:11.5px} /* 占位符不套像素字：Doto 的方点会把「[[ ]]」拆成一排离散方块，读不出「未填」。 .ph 的语义就是未填，用等宽体 + 虚线更准。 */ .facts b.ph{font-family:MM,monospace;font-weight:400;font-size:23px;letter-spacing:.05em; line-height:1.55;color:var(--dim)} /* 设备条目缩略图：画布本身已留 10% 白边，容器内不再二次缩 */ .entry .ph-img img{max-width:100%;max-height:100%} /* ---- 页头 ---- */ .fi-header{position:sticky;top:0;z-index:60;background:var(--paper); border-bottom:1.5px solid var(--ink)} .fi-header .wrap{display:flex;align-items:center;gap:24px;height:64px} .fi-logo{display:flex;align-items:baseline;gap:9px;font-family:SG;font-weight:500; font-size:21px;letter-spacing:-.02em;line-height:1} .fi-logo .sub{font:500 9.5px/1 MM;letter-spacing:.2em;text-transform:uppercase; color:var(--dim);border-left:1px solid var(--line2);padding-left:9px} .fi-menu{margin-left:auto;display:flex;align-items:stretch;height:64px} .fi-menu>a,.fi-menu>.has-sub>a{display:flex;align-items:center;padding:0 13px; font:500 var(--fs-nav)/1 MM;letter-spacing:.13em;text-transform:uppercase; color:var(--dim);transition:color .18s ease} .fi-menu>a:hover,.fi-menu>.has-sub>a:hover{color:var(--ink)} .has-sub{position:relative;display:flex;align-items:stretch} .has-sub>.sub{display:none;position:absolute;top:100%;left:0;min-width:232px; background:var(--paper);border-top:1.5px solid var(--ink); border-bottom:1px solid var(--line2);padding:6px 0; box-shadow:0 18px 34px rgba(22,24,26,.10)} .has-sub:hover>.sub,.has-sub:focus-within>.sub{display:block} .has-sub>.sub a{display:block;padding:10px 16px;font:400 13px/1.5 Manrope,sans-serif; color:var(--dim)} .has-sub>.sub a:hover{color:var(--ink);background:#ecebe7} .fi-cta{margin-left:8px;display:flex;align-items:center;gap:10px} .fi-cta .btn{padding:10px 18px;font-size:13px} .fi-toggle{display:none;background:transparent;border:1px solid var(--line2); color:var(--ink);padding:9px 13px;font:500 10.5px/1 MM;letter-spacing:.14em;cursor:pointer} /* 折叠菜单里的询价入口：小屏时页头那颗胶囊放不下（390 下 logo+CTA+MENU 合计 410 > 346 可用）， 改由展开菜单承载，保证每屏都有且只许有一个主 CTA。 */ .fi-menu .m-cta{display:none} /* ---- 页脚：直接用 A 版 .ft 结构，注入脚本复用同一组类名 ---- */ .fi-footer{border-top:2.5px solid var(--ink);margin-top:0;padding:52px 0 30px} .fi-footer .ft-top{grid-template-columns:1.6fr 1fr 1fr 1fr} /* CTA 顶回按钮形态：.ft-col a 是后代选择器（0,1,1），会把裸 压成 13.5px 次级链接； .ft-col .btn（0,2,0）才能赢。display 与 color 是两个独立战场，只改 display 会得到浅底浅灰字。 */ .ft-col .btn{display:inline-flex;width:auto;max-width:100%;margin:16px 0 0;padding:12px 20px; font:500 13.5px/1 Manrope,sans-serif;letter-spacing:0;color:#fff;background:var(--ink); border:0;border-radius:980px;line-height:1} .ft-col .btn:hover{background:#33363b;color:#fff} .ft-col .btn .chips{height:13px} .ft-col .btn .chips i{width:4px;height:13px} /* ============================================================================ 产品页组件（系列页 / 总览页） ============================================================================ */ .crumb{font:500 var(--fs-meta)/1 MM;letter-spacing:.16em;text-transform:uppercase; color:var(--dim);padding:24px 0 0} .crumb a{color:var(--dim)} .crumb a:hover{color:var(--ink)} .crumb span{margin:0 9px;color:var(--dim)} /* 产品头：左文右图 */ .phead{display:grid;grid-template-columns:1fr 1.06fr;gap:56px;align-items:start; padding:26px 0 0} .phead .eyebrow{margin-bottom:14px} .phead h1{margin:0;font-size:clamp(52px,4.2vw,64px);max-width:18ch; line-height:1.06} .phead .lede{margin:18px 0 0;max-width:48ch;font-size:15.5px;color:var(--dim); line-height:1.72} .phead .shot{background:#fff;border:1px solid var(--line2);position:relative} .phead .shot img{width:100%;aspect-ratio:4/3;object-fit:contain;display:block} .phead .shot .cap{position:absolute;left:0;bottom:0;background:var(--paper); padding:9px 15px;font:500 var(--fs-meta)/1.5 MM;letter-spacing:.13em; text-transform:uppercase;color:var(--dim);border-top:1px solid var(--line2); border-right:1px solid var(--line2)} .phead .hl{display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--line2);border:1px solid var(--line2);border-top:0;margin-top:0} .phead .hl div{background:var(--paper);padding:15px 16px 17px} .phead .hl b{display:block;font-family:SG;font-weight:500;font-size:25px; letter-spacing:-.02em;line-height:1.1} .phead .hl span{display:block;margin-top:9px;font:500 9.5px/1.5 MM;letter-spacing:.16em; text-transform:uppercase;color:var(--dim)} /* 规格表：两列瀑布（29 行不分左右两页，靠 column-count 自动平衡） */ .specwrap{columns:2;column-gap:64px;padding-top:6px} .specwrap .specblock{break-inside:avoid;margin-bottom:26px} .specblock .hd{font:500 var(--fs-meta)/1 MM;letter-spacing:.2em;text-transform:uppercase; color:var(--mg-ink);padding-bottom:11px;border-bottom:2.5px solid var(--ink); margin-bottom:2px} .specblock dl{margin:0} .specblock dl div{display:flex;justify-content:space-between;gap:16px;padding:9px 0; border-bottom:1px solid var(--line)} .specblock dt{font:400 12.5px/1.5 MM;color:var(--dim);margin:0} .specblock dd{font:500 12.5px/1.5 MM;color:var(--ink);margin:0;text-align:right} /* 型号对照：同系列多型号的差异表 */ .mtab{width:100%;border-collapse:collapse;margin-top:6px} .mtab th,.mtab td{border-bottom:1px solid var(--line);padding:12px 14px;text-align:left; vertical-align:top;font:400 13px/1.6 Manrope,sans-serif;color:var(--dim)} .mtab thead th{font:500 10.5px/1.4 MM;letter-spacing:.14em;text-transform:uppercase; color:var(--ink);border-bottom:2.5px solid var(--ink);white-space:nowrap} .mtab td:first-child{font:500 11px/1.5 MM;letter-spacing:.1em;text-transform:uppercase; color:var(--dim);width:190px} .mtab td b{color:var(--ink);font-weight:500} .mtab tbody tr:hover td{background:#ecebe7} /* 图集：发丝线网格（与 .hair 同一手法） ⚠ 容器底色只出现在 1px 缝里。列数必须等于实际张数（生成器写 g1…g4）， 否则空轨道会把整块底色露出来 —— 曾出现占两格的大块灰底（s-series / sv-series / zd680）。 张数 → 列数：1→1、2→2、3→3、4→2（4 张走 2×2，刚好填满不留空槽）。 */ .gal{display:grid;--cols:3;grid-template-columns:repeat(var(--cols),minmax(0,1fr)); gap:1px;background:var(--line2); border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);margin-top:26px} .gal.g1{--cols:1} .gal.g2{--cols:2} .gal.g3{--cols:3} .gal.g4{--cols:2} .gal figure{margin:0;background:var(--paper);display:flex;flex-direction:column} .gal .shot{aspect-ratio:1/1;overflow:hidden;background:var(--line)} .gal img{width:100%;height:100%;object-fit:cover;display:block} /* 单张：不裁切整幅（产品图是 1200×900 白底画布，1:1 cover 会切掉左右）。 并且限宽到约 2 列宽（内容列 1104 → 每列 ~551）：一张 4:3 白底图铺满整行时， 图内自带的白边会把整屏读成「一大片空白」，限宽后机器才读得清。 */ .gal.g1{max-width:560px} .gal.g1 .shot{aspect-ratio:4/3;background:#fff} .gal.g1 img{object-fit:contain} .gal figcaption{padding:9px 0 12px;font:500 9.5px/1.5 MM;letter-spacing:.13em; text-transform:uppercase;color:var(--dim)} /* 系列入口（总览页每一组的行） */ .srow{display:grid;grid-template-columns:150px 1fr 236px 168px;gap:30px;align-items:center; padding:20px 0;border-bottom:1px solid var(--line2)} .srow .pic{background:#fff;border:1px solid var(--line);aspect-ratio:4/3;overflow:hidden} /* 画布本身已留 10% 白边（1200x900，内容 90%），再叠 padding 会让机器缩成一点 —— 这里不加内边距 */ .srow .pic img{width:100%;height:100%;object-fit:contain;padding:0;display:block} .srow h4{font-family:SG;font-weight:500;font-size:21px;letter-spacing:-.01em;margin:0; line-height:1.2} .srow .models{font:500 10px/1.6 MM;letter-spacing:.13em;text-transform:uppercase; color:var(--dim);margin-top:9px} .srow p{margin:9px 0 0;color:var(--dim);font-size:13.5px;line-height:1.6;max-width:46ch} .srow dl{margin:0} .srow dl div{display:flex;justify-content:space-between;gap:10px;padding:6px 0; border-bottom:1px solid var(--line);font:400 11.5px/1.5 MM} .srow dt{color:var(--dim);margin:0} .srow dd{margin:0;color:var(--ink)} .srow .go{font:500 10.5px/1 MM;letter-spacing:.16em;text-transform:uppercase; border:1px solid var(--line2);padding:13px 10px;text-align:center} .srow .go:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)} /* 组头（总览页 4 条线） */ .grp{margin-top:56px} .grp .hd{display:flex;align-items:baseline;gap:16px;padding-bottom:14px; border-bottom:2.5px solid var(--ink)} .grp .hd .n{font-family:SG;font-weight:500;font-size:26px;letter-spacing:-.02em} .grp .hd h3{font-family:SG;font-weight:500;font-size:26px;letter-spacing:-.02em;margin:0} .grp .hd .c{margin-left:auto;font:500 10.5px/1 MM;letter-spacing:.16em; text-transform:uppercase;color:var(--dim)} /* 询价尾块 */ .tailspec{display:grid;grid-template-columns:1fr 1.15fr;gap:52px;align-items:start; padding:32px 0 6px;border-bottom:1px solid var(--line2)} .tailspec .note{color:var(--dim);font-size:14.5px;line-height:1.75;margin:0;max-width:40ch} .tailspec .note a{color:var(--ink);border-bottom:1px solid var(--line2)} /* 相关系列：同一手法。列数 = 链接数（r1…r4），4 条走 2×2 刚好填满。 */ .related{display:grid;--cols:3;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:1px; background:var(--line2); border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);margin-top:26px} .related.r1{--cols:1} /* 只有 1 条时铺满整行会读成一大片空，改成同行并排（标签在左、名字在右） */ .related.r1 a{display:flex;align-items:baseline;gap:26px} .related.r1 b{margin-top:0} .related.r2{--cols:2} .related.r3{--cols:3} .related.r4{--cols:2} .related a{background:var(--paper);padding:18px 20px 20px;display:block} .related a:hover{background:#ecebe7} .related .k{font:500 9.5px/1 MM;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)} .related b{display:block;font-family:SG;font-weight:500;font-size:17px;margin-top:10px; letter-spacing:-.01em} /* 边界区块（Cuts / Does not）：这一页独有的内容 —— 每个系列能吃的活不同、 吃不下的活转去的型号也不同。两列、中间一条发丝线；右列降权，因为它是 「不适用」的说明，不是卖点。 */ .fitgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line2); border-top:2.5px solid var(--ink);border-bottom:1px solid var(--line2);margin-top:24px} .fcol{background:var(--paper);padding:24px 26px 26px} .fcol .fh{display:flex;align-items:center;gap:9px; font:500 10px/1.4 MM;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)} .fcol .fh .mk{width:7px;height:7px;background:var(--c1);flex:none} .fcol.mut .fh{color:var(--dim)} .fcol.mut .fh .mk{background:var(--line2)} .fcol ul{margin:16px 0 0;padding:0;list-style:none} .fcol li{position:relative;padding-left:17px;margin:0 0 11px; font:400 13.5px/1.68 Manrope,sans-serif;color:var(--ink)} .fcol li:last-child{margin-bottom:0} .fcol li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:1px; background:var(--line2)} .fcol.mut li{color:var(--dim)} /* 询价横条：标题在左、按钮在右，全站同一位置同一形态 —— 用户一眼认出「又是这条」。 原先 9 个系列页在正文里各写一段询价话术（逐字相同），已删；话术留在 contact 页。 */ .endbar{display:flex;align-items:center;gap:32px;flex-wrap:wrap; padding:26px 0;border-top:2.5px solid var(--ink);border-bottom:1px solid var(--line2)} .endbar .k{font:500 10px/1 MM;letter-spacing:.2em;text-transform:uppercase;color:var(--mg-ink)} .endbar h2{margin:9px 0 0;font-size:calc(var(--fs-sec)*var(--pixs)); line-height:calc(1.1/var(--pixs))} .endbar .btn{margin-left:auto} /* ---- 产品页响应式 ---- */ @media (max-width:1080px){ .phead{grid-template-columns:1fr;gap:30px} .specwrap{columns:1} .srow{grid-template-columns:120px 1fr;gap:20px} .srow dl,.srow .go{grid-column:1/-1} .related{grid-template-columns:1fr} .tailspec{grid-template-columns:1fr;gap:26px} /* 两列边界在窄屏会被压成细长条，改上下排；右列跟着排到下面，顺序仍是「能/不能」 */ .fitgrid{grid-template-columns:1fr} .endbar{gap:20px} .endbar .btn{margin-left:0} .fi-menu{display:none} .fi-toggle{display:block} /* ⚠ 必须在同一断点里覆写 .fi-footer .ft-top：上面那条 1.6fr 1fr 1fr 1fr 特异性更高， 不覆写会压掉 A 原有的 1fr 1fr，768 下页脚溢出 86px（实测）。 */ .fi-footer .ft-top{grid-template-columns:1fr 1fr} /* 折叠态：父项点开而不是跳走（JS 里 intercept，见 site.js） */ .has-sub.open{display:block} .has-sub.open>.sub{display:block;position:static;border-top:1px solid var(--line2); box-shadow:none;min-width:0;padding:0 0 6px 12px} } @media (max-width:900px){ .phead .hl{grid-template-columns:1fr} /* 这里曾写 .gal{1fr 1fr} —— 2 列装 1 张或 3 张都会留出空轨道，露出整块底色。 列数改由 --cols 按张数决定（见 .gal.g1…g4），此处不再压列数。 */ .mtab td:first-child{width:130px} .mtab{display:block;overflow-x:auto;white-space:nowrap} } @media (max-width:720px){ .gal{grid-template-columns:1fr} .related{grid-template-columns:1fr} .srow{grid-template-columns:1fr} .fi-footer .ft-top{grid-template-columns:1fr;gap:26px} } /* 移动端展开菜单（JS 加 .open）。不加这个，汉堡点了没反应。 */ .fi-header.open .fi-menu{display:flex;flex-direction:column;position:absolute;top:100%; left:0;right:0;background:var(--paper);border-bottom:1.5px solid var(--ink); padding:6px 22px 14px;height:auto;box-shadow:0 18px 34px rgba(22,24,26,.10)} .fi-header.open .fi-menu>a,.fi-header.open .has-sub>a{padding:14px 0; border-bottom:1px solid var(--line);height:auto} .fi-header.open .has-sub{display:block;height:auto} /* 小屏：容器藏起页头胶囊，改由展开菜单里的入口承担（见 .fi-menu .m-cta） */ @media (max-width:720px){ .fi-cta .btn{display:none} .fi-menu .m-cta{display:block;margin-top:12px;padding:13px 18px;text-align:center; background:var(--ink);color:#fff;font:500 13.5px/1 Manrope,sans-serif; letter-spacing:0;border:0;border-radius:980px} .fi-menu .m-cta:hover{background:#33363b;color:#fff} } /* 首页 Workflow：5 步在 3 列断点（721–1080）会剩 1 个空槽，而 .hair 是「容器底色画 1px 缝」 的手法 ⇒ 空槽露出一整块底色（实测 1024 约 4.97 万 px²、768 约 4.05 万 px²）。 末项跨 2 列正好填满。nth-child(5):last-child 限定「正好 5 步」才生效 —— 改步数必须同步改这条，否则空槽会回来。 ⚠ 必须带 min-width:721px：单列布局下 span 2 会凭空生出第 2 条隐式轨道， 把 1 列变成 2 列（实测 390 下首列只剩 111px）。 */ @media (max-width:1080px) and (min-width:721px){ .hair.flow>*:nth-child(5):last-child{grid-column:span 2} } /* ---- 首页 2026-10 精简（板块 10 → 6）---- */ /* 设备线段右侧加一行「不知道怎么选」，把原来一整段 Selection 压成一句 + 出口 */ .toc-head{display:flex;align-items:baseline;gap:20px} .toc-note{margin:0 0 0 auto;font:500 10.5px/1 MM;letter-spacing:.14em;text-transform:uppercase; color:var(--dim)} .toc-note a{color:var(--ink);border-bottom:1px solid var(--line2)} .toc-note a:hover{border-bottom-color:var(--ink)} /* 「After the sale」不再单独成段：跟在 workflow 五步下面，只留短语不写散文。 两段 .hair 直接相接时中间没有发丝线（线来自 gap，不来自边框）⇒ 第二段补 border-top。 */ .svc-cap{margin:20px 0 0;font:500 var(--fs-micro)/1 MM;letter-spacing:.2em; text-transform:uppercase;color:var(--dim)} .hair.svc{margin-top:9px;border-top:1px solid var(--line2)} .svc .k{display:block;font:500 var(--fs-micro)/1 MM;letter-spacing:.16em;text-transform:uppercase; color:var(--dim)} .svc .v{display:block;margin-top:9px;font-size:13.5px;line-height:1.5;color:var(--ink)} /* 小屏：四格横排会挤成细长条，改 2×2 */ @media (max-width:720px){ .hair.svc{grid-template-columns:1fr 1fr} /* 大写 + .14em 字距会把这一行撑成两行；小屏改回正常大小写与字距，恢复一行 */ .toc-note{text-transform:none;letter-spacing:0} } /* 768 起 h2 与右侧小字互相挤压：h2 断成两行、小字也断成两行（实测 721–768） ⇒ 这一段之下改上下排。900 是已有的断点，顺手复用，不另造。 */ @media (max-width:900px){ .toc-head{display:block} .toc-note{margin:10px 0 0} } /* 提交成功后就地换成一个状态块：小标 + 主文 + 左侧结构色竖线。 只留一行灰字在整块卡片里会被读成「表单怎么没了」。 */ .form-sent{padding-left:16px;border-left:3px solid var(--cy)} .form-sent-k{display:block;font:600 11px/1 MM;letter-spacing:.18em;text-transform:uppercase;color:var(--cy)} .form-sent p{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--ink)} /* 蜜罐：人看不见，机器人会勾 */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0} /* 注记里的链接必须自己长出来：基础 a 是 color:inherit + 无下划线， 不补则 "privacy" 与周围灰字完全同形（实测 color 相同、border 0）。 覆盖写在追加层 —— .inq .fnote2 本体在 A 版