/* ═══════════════════════════════════════════════════════════ Lexin-tech · 站点样式 工业风 B2B：高信息密度、强可读性、克制的品牌色 主色 #C0392B（品牌红） / 辅色 #1F6F6B（工艺蓝绿） ═══════════════════════════════════════════════════════════ */ :root{ --red:#C0392B; --red-d:#9C2A1E; --teal:#1F6F6B; --teal-d:#155450; /* 相界青：深色区专用的亮青，代表溶剂萃取的「两相界面」—— 深底上 #1F6F6B 发闷，提亮到 #3FB3A8 才读得出线条感 */ --teal-l:#3FB3A8; --teal-l2:#6FD8CD; --ink:#111826; --ink-2:#3A4759; --ink-3:#6B7789; --line:#E3E7EE; --line-2:#EDF0F5; --bg:#FFFFFF; --bg-2:#F7F8FA; --bg-3:#EFF2F6; --ok:#1E7A46; --warn:#B7791F; --r:8px; --r-lg:14px; --r-sm:5px; --sh:0 1px 2px rgba(17,24,38,.05), 0 4px 14px rgba(17,24,38,.06); --sh-lg:0 8px 30px rgba(17,24,38,.10); --wrap:1200px; --f:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Microsoft YaHei",sans-serif; --f-ar:"Segoe UI","Noto Kufi Arabic","Noto Sans Arabic",Tahoma,sans-serif; /* 仪表读数用等宽：技术参数、段码、坐标标注 —— 精密仪器的视觉语言 */ --fm:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,"Liberation Mono",Menlo,monospace; /* 蓝图网格线（深色区 / 浅色区各一套） */ --grid-d:rgba(255,255,255,.055); --grid-l:rgba(17,24,38,.05); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} html,body{overflow-x:clip} /* 兜底：任何子元素撑宽（如窄屏下的语言切换器）都不再拉出横向滚动条 */ body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--f);font-size:16px;line-height:1.65; -webkit-font-smoothing:antialiased; } .lang-ar body,body.lang-ar{font-family:var(--f-ar)} img{max-width:100%;height:auto;display:block} a{color:var(--teal);text-decoration:none} a:hover{color:var(--red)} h1,h2,h3,h4,h5{line-height:1.25;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em} h1{font-size:clamp(1.75rem,3.4vw,2.6rem)} h2{font-size:clamp(1.35rem,2.4vw,1.85rem)} h3{font-size:1.12rem} p{margin:0 0 1em} ul{margin:0;padding:0;list-style:none} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px} .muted{color:var(--ink-3);font-size:.9rem} .eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--red);margin-bottom:.7em;font-family:var(--fm)} .eyebrow::before{content:"// ";opacity:.42;font-weight:400} .hero .eyebrow::before{content:"[ "} .hero .eyebrow::after{content:" ]"} section{padding:64px 0} .sec-head{max-width:760px;margin-bottom:34px} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} /* 浅色区蓝图网格：给「工艺段」「行业」这类白底大区块垫一层极淡的图纸网格， 让整页和深色 Hero 的视觉语言连成一套 */ .grid-bg{position:relative} .grid-bg::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(var(--grid-l) 1px,transparent 1px),linear-gradient(90deg,var(--grid-l) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(120% 90% at 50% -10%,#000 10%,transparent 72%); mask-image:radial-gradient(120% 90% at 50% -10%,#000 10%,transparent 72%)} .grid-bg > .wrap{position:relative;z-index:1} /* ── 工艺流程条（首页 Hero 下方）─────────────────────────────── 把「五大工艺段」按真实工艺流程串起来：浸出 → 固液分离 → 液液分离(萃取) → 蒸发结晶 → 电解沉积。对做溶剂萃取的买家来说，一眼就能确认 「这家把萃取放在整条线上理解，不是单卖一台设备」。 */ .flow-bar{background:#0B111C;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden} .flow-in{display:flex;align-items:center;gap:26px;padding:20px 20px;min-height:78px} .flow-label{font-family:var(--fm);font-size:.66rem;letter-spacing:.17em;color:#6E7C8D;text-transform:uppercase;flex:none;line-height:1.5} .flow-label b{display:block;color:var(--teal-l);font-size:.78rem;letter-spacing:.1em} .flow-steps{display:flex;align-items:center;list-style:none;margin:0;padding:0;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none} .flow-steps::-webkit-scrollbar{display:none} .flow-steps li{display:flex;align-items:center;flex:none} .flow-node{display:flex;align-items:center;gap:9px;padding:7px 12px;border:1px solid rgba(255,255,255,.11);border-radius:6px;background:rgba(255,255,255,.025);transition:.18s;text-decoration:none} .flow-node i{font-family:var(--fm);font-style:normal;font-size:.62rem;letter-spacing:.05em;color:var(--teal-l);border:1px solid rgba(111,216,205,.35);border-radius:3px;padding:2px 5px;flex:none} .flow-node span{font-size:.82rem;color:#C6D0DC;white-space:nowrap} .flow-node:hover{border-color:rgba(111,216,205,.5);background:rgba(63,179,168,.10)} .flow-node:hover span{color:#fff} .flow-node.is-key{border-color:rgba(192,57,43,.55);background:rgba(192,57,43,.10)} .flow-node.is-key i{color:#F09B8C;border-color:rgba(240,155,140,.42)} /* 连接线：一段虚线 + 一个流动的点，示意物料走向 */ .flow-link{position:relative;width:34px;height:1px;background:rgba(255,255,255,.16);flex:none;margin:0 6px} .flow-link::after{content:"";position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:50%;background:var(--teal-l);box-shadow:0 0 8px var(--teal-l);animation:lx-flow 2.8s linear infinite} @keyframes lx-flow{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:29px;opacity:0}} @media(max-width:860px){.flow-in{flex-direction:column;align-items:flex-start;gap:12px}.flow-label{display:flex;gap:8px;align-items:baseline}.flow-label b{display:inline}} @media(prefers-reduced-motion:reduce){.flow-link::after{animation:none;opacity:.7}.hero-readout b{animation:none}} /* ── 预览条 ── */ .preview-bar{background:var(--ink);color:#fff;font-size:.82rem;padding:8px 0} .preview-bar strong{color:#FFC9BC} .pb-sub{opacity:.62;margin-left:10px} /* ── 未上线语言版本提示（这些页面 noindex，仅版式示意） ── */ .lang-notice{background:#FFF4E5;border-bottom:1px solid #F0C48A;color:#6B4A12;font-size:.82rem;padding:9px 0} .lang-notice strong{display:block;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:#8A5A00;margin-bottom:3px} .lang-notice span{display:block;line-height:1.55} /* 语言切换器里未上线的语言：弱化（链接指向 noindex 示意页，不在 hreflang 里） */ .lang-sw a.soon{opacity:.5} @media print{.site-header,.cta-band,.lp-bar,.preview-bar,.lang-notice{display:none}} /* ── 头部 ── */ .site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .header-in{display:flex;align-items:center;gap:22px;min-height:68px} .brand{display:flex;align-items:center;gap:10px;color:var(--ink);flex:none} .brand:hover{color:var(--ink)} .brand-mark{width:38px;height:38px;border-radius:9px;background:linear-gradient(135deg,var(--red),var(--red-d));color:#fff;display:grid;place-items:center;font-weight:800;font-size:.9rem;letter-spacing:.02em} .brand-txt{display:flex;flex-direction:column;line-height:1.15} .brand-txt strong{font-size:1.02rem;letter-spacing:-.01em} .brand-txt em{font-style:normal;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .main-nav{display:flex;align-items:center;gap:4px;margin-inline-start:6px;flex:1;min-width:0} .main-nav > a,.nav-item > a{padding:9px 12px;border-radius:var(--r-sm);font-size:.93rem;font-weight:550;color:var(--ink-2);display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .main-nav > a:hover,.nav-item > a:hover{background:var(--bg-2);color:var(--ink)} .main-nav a.on{color:var(--red)} .nav-item{position:relative} .nav-item i{font-style:normal;font-size:.6rem;opacity:.55} .mega{position:absolute;top:calc(100% + 10px);inset-inline-start:-16px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:22px;display:grid;grid-template-columns:1.25fr 1fr;gap:30px;min-width:640px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s} .nav-item:hover .mega{opacity:1;visibility:visible;transform:none} .mega h5{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px} .mega li a{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:6px;color:var(--ink-2);font-size:.92rem} .mega li a:hover{background:var(--bg-2);color:var(--red)} .seg-ico{width:26px;height:26px;border-radius:6px;background:var(--bg-3);color:var(--teal);display:grid;place-items:center;font-size:.68rem;font-weight:800;flex:none} .header-right{display:flex;align-items:center;gap:12px;flex:none} .lang-sw{display:flex;gap:2px;background:var(--bg-2);border-radius:var(--r-sm);padding:3px} .lang-sw a{font-size:.74rem;font-weight:700;color:var(--ink-3);padding:4px 7px;border-radius:4px} .lang-sw a.on{background:#fff;color:var(--ink);box-shadow:var(--sh)} .nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:10px} .nav-burger span{width:22px;height:2px;background:var(--ink);border-radius:2px} /* ── 按钮 ── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:var(--r);font-weight:650;font-size:.94rem;border:1px solid transparent;cursor:pointer;transition:.16s;font-family:inherit;text-align:center} .btn-sm{padding:9px 15px;font-size:.86rem} .btn-primary{background:var(--red);color:#fff} .btn-primary:hover{background:var(--red-d);color:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(192,57,43,.28)} .btn-outline{border-color:var(--line);color:var(--ink);background:#fff} .btn-outline:hover{border-color:var(--ink-2);color:var(--red)} .btn-light{background:#fff;color:var(--red)} .btn-light:hover{background:#fff;color:var(--red-d);transform:translateY(-1px)} .btn-ghost{border-color:rgba(255,255,255,.38);color:#fff} .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)} /* ── 首页 Hero ── 视觉隐喻取自溶剂萃取现场：底部「两相分界条」= 有机相 / 水相的界面， 背景蓝图网格 = 工艺图纸，右下青色光晕 = 萃取柱内的分散相。 全部为纯 CSS 装饰，零额外请求。 */ .hero{background:linear-gradient(160deg,#0C1320 0%,#16212F 52%,#1B2836 100%);color:#fff;padding:80px 0 72px;position:relative;overflow:hidden} /* 蓝图网格：两层 linear-gradient 画格，用径向遮罩让边缘淡出，避免「贴瓷砖」感 */ .hero::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(var(--grid-d) 1px,transparent 1px),linear-gradient(90deg,var(--grid-d) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(130% 105% at 18% 0%,#000 26%,transparent 76%); mask-image:radial-gradient(130% 105% at 18% 0%,#000 26%,transparent 76%)} /* 双光晕：左上品牌红（传质热区）+ 右下相界青（萃取剂相） */ .hero::after{content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(circle at 92% 12%,rgba(192,57,43,.30),transparent 46%), radial-gradient(circle at 78% 96%,rgba(63,179,168,.20),transparent 44%)} .hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,6.6fr) minmax(0,5.4fr);gap:56px;align-items:center} .hero .eyebrow{color:var(--teal-l2);font-family:var(--fm);letter-spacing:.09em} .hero .eyebrow::before{content:"[ ";opacity:.5} .hero .eyebrow::after{content:" ]";opacity:.5} .hero h1{color:#fff;margin-bottom:.4em} .hero p{font-size:1.08rem;color:#B8C4D2;max-width:640px} .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} .hero-stats{display:flex;gap:14px 30px;flex-wrap:wrap;margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)} .hero-stats div strong{display:block;font-size:1.5rem;color:#fff;font-family:var(--fm);font-weight:600;letter-spacing:-.02em} .hero-stats div span{font-size:.7rem;color:#8B98A7;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap} /* Hero 右侧实景图：加「仪器取景框」四角标记 + 等宽技术标注 */ .hero-visual{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.14);aspect-ratio:10/8.4;background:#0C1320} .hero-visual img{width:100%;height:100%;object-fit:cover;display:block} .hero-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 13px;font-size:.76rem;letter-spacing:.06em;color:#DDE5EE;font-family:var(--fm);background:linear-gradient(180deg,transparent,rgba(8,12,20,.86))} /* 取景框四角：1px 青色直角，像检测设备目镜里的对位标记 */ .hero-frame{position:absolute;inset:14px;pointer-events:none;border:1px solid rgba(111,216,205,.22);border-radius:4px} .hero-frame i{position:absolute;width:16px;height:16px;border:2px solid var(--teal-l);opacity:.9} .hero-frame i:nth-child(1){top:-2px;left:-2px;border-right:0;border-bottom:0} .hero-frame i:nth-child(2){top:-2px;right:-2px;border-left:0;border-bottom:0} .hero-frame i:nth-child(3){bottom:-2px;left:-2px;border-right:0;border-top:0} .hero-frame i:nth-child(4){bottom:-2px;right:-2px;border-left:0;border-top:0} /* 右上角实时读数条（等宽）：底色不透明度提到 .78 —— 实拍图上半区往往偏亮 （车间天光），.55 的底会 让学生青字浮在图上读不清；加边框对比再托一层。 */ .hero-readout{position:absolute;top:13px;right:13px;display:flex;gap:10px;align-items:center;font-family:var(--fm);font-size:.68rem;letter-spacing:.08em;color:#B8EFE5;background:rgba(8,12,20,.78);border:1px solid rgba(111,216,205,.42);border-radius:4px;padding:4px 9px;backdrop-filter:blur(3px)} .hero-readout b{width:6px;height:6px;border-radius:50%;background:var(--teal-l);box-shadow:0 0 7px var(--teal-l);animation:lx-pulse 2.4s ease-in-out infinite} @keyframes lx-pulse{0%,100%{opacity:1}50%{opacity:.35}} /* 两相分界条：贴 hero 底部，上红下青 —— 溶剂萃取的相界面 */ .hero-phase{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--teal-l) 0%,var(--teal-l) 46%,var(--red) 54%,var(--red) 100%);opacity:.75} .hero-phase::after{content:"";position:absolute;left:0;right:0;top:-9px;height:9px;background:linear-gradient(180deg,transparent,rgba(8,12,20,.5))} @media(max-width:1000px){ .hero-in{grid-template-columns:1fr;gap:34px} .hero-visual{aspect-ratio:16/8;order:-1} .hero{padding:56px 0 60px} } /* ── 卡片网格 ── */ .grid{display:grid;gap:18px} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} /* 5 段卡一行放下（1200 容器 / 5 ≈ 224px），避免 3 列时第二行右侧空一格 */ .g-5{grid-template-columns:repeat(5,1fr)} @media(max-width:1100px){.g-5{grid-template-columns:repeat(3,1fr)}} @media(max-width:680px){.g-5{grid-template-columns:1fr}.g-4{grid-template-columns:repeat(2,1fr)}} .card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:.18s;display:flex;flex-direction:column} a.card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:#D6DCE6} /* 产品/品类卡图位：工业品是白底棚拍图，cover 会把设备边缘裁掉； contain + 内边距是工业品展示的通行做法（整台设备完整可见）。 */ .card-media{background:#fff;aspect-ratio:3/2;overflow:hidden;border-bottom:1px solid var(--line-2)} .card-media img{width:100%;height:100%;object-fit:contain;padding:14px;transition:transform .25s} a.card:hover .card-media img{transform:scale(1.04)} .card-body{padding:16px 18px 18px} .card-body h3{margin-bottom:.25em} /* 产品卡右上角内容编号（content_id 短码）：买家对得上图纸与报价单， 视觉上也有「这是可追溯的工程件、不是随手拍的商品」的意思 */ .prod-card{position:relative} .card-code{position:absolute;top:10px;inset-inline-end:10px;z-index:2;font-family:var(--fm);font-size:.62rem;letter-spacing:.03em;color:var(--ink-3);background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:3px;padding:2px 6px;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tag{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--teal);background:#EAF4F3;padding:3px 8px;border-radius:4px;margin-bottom:9px;font-family:var(--fm)} /* Why 三卡：加线性图标做视觉锚点，避免整段纯文字太干 */ .why-card{flex-direction:row;align-items:flex-start;gap:16px;padding:22px 20px} .why-ico{width:46px;height:46px;flex:none;border-radius:12px;background:#EAF4F3;color:var(--teal);display:grid;place-items:center} .why-ico svg{width:24px;height:24px} .why-card .card-body{padding:0} /* 工艺段卡 */ .seg-card{background:#fff;border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:var(--r-lg);padding:0;display:flex;flex-direction:column;transition:.18s;overflow:hidden;position:relative} .seg-card:hover{border-left-color:var(--red);transform:translateY(-3px);box-shadow:var(--sh-lg)} /* 右上角工艺段序号：等宽大号淡体，像工艺图纸上的工位编号 */ .seg-no{position:absolute;top:12px;inset-inline-end:14px;z-index:2;font-family:var(--fm);font-size:.82rem;font-weight:600;letter-spacing:.06em;color:var(--ink-3);background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:4px;padding:2px 7px;backdrop-filter:blur(2px);transition:.18s} .seg-card:hover .seg-no{color:#fff;background:var(--red);border-color:var(--red)} .seg-media{aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--line-2);overflow:hidden;position:relative} .seg-media img{width:100%;height:100%;object-fit:contain;padding:12px;transition:transform .25s} .seg-card:hover .seg-media img{transform:scale(1.05)} /* 无实景图也无产品照的段：用工艺蓝绿渐变兜底，避免出现白板 */ .seg-media-plain{background:linear-gradient(135deg,#EAF4F3,#D8E9E7)} .seg-card .seg-ico{width:34px;height:34px;font-size:.78rem;flex:none;font-family:var(--fm)} .seg-head{display:flex;align-items:center;gap:10px;padding:15px 18px 0} .seg-card h3{font-size:1rem;margin:0} .seg-card h3 a{color:var(--ink)} .seg-card h3 a:hover{color:var(--red)} .seg-card p{font-size:.88rem;color:var(--ink-2);flex:1;padding:9px 18px 0;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .seg-card .seg-meta{font-size:.74rem;color:var(--ink-3);border-top:1px solid var(--line-2);padding:11px 18px 13px;margin-top:14px;font-family:var(--fm);letter-spacing:.02em} /* ── 页面 Hero ── */ /* 内页标题区：垫一层淡网格 + 底部相界条，与首页 Hero 同一套视觉语言 */ .page-hero{background:var(--bg-2);border-bottom:1px solid var(--line);padding:44px 0 38px;position:relative;overflow:hidden} .page-hero::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(var(--grid-l) 1px,transparent 1px),linear-gradient(90deg,var(--grid-l) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(110% 120% at 6% 0%,#000 12%,transparent 70%); mask-image:radial-gradient(110% 120% at 6% 0%,#000 12%,transparent 70%)} .page-hero::after{content:"";position:absolute;left:0;bottom:0;width:190px;height:2px;background:linear-gradient(90deg,var(--teal),var(--red))} .page-hero > .wrap{position:relative;z-index:1} .page-hero h1{margin-bottom:.25em} .page-hero .lead{font-size:1.02rem;color:var(--ink-2);max-width:820px;margin:0} /* ── 面包屑 ── */ .crumbs{padding:14px 0 0} .crumbs ol{display:flex;flex-wrap:wrap;gap:8px;font-size:.82rem;color:var(--ink-3);list-style:none} .crumbs li+li::before{content:"/";margin-inline-end:8px;opacity:.4} .crumbs a{color:var(--ink-3)} .crumbs a:hover{color:var(--red)} /* ── 产品详情 ── */ .prod-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:40px;align-items:start;padding-top:26px} .prod-gallery{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:26px} .prod-gallery img{width:100%;aspect-ratio:16/10;object-fit:cover} /* 主图 + 细节图缩略条（真实产品照到位后才渲染；占位图状态下不出现） */ .prod-gallery .pg-main{display:block;background:var(--bg-3)} .pg-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;padding:12px;background:var(--bg-2);border-top:1px solid var(--line)} .pg-thumbs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg-3);margin:0} /* 知识文 / 新闻正文内嵌图 */ .kb-figure{margin:0 0 26px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .kb-figure img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block} .kb-figure figcaption{font-size:13px;color:var(--ink-3);padding:10px 14px;border-top:1px solid var(--line)} /* ── 旧站回迁的长文正文排版 ──────────────────────────────── 这批正文是 100 万字符级的技术长文（平均 14,000 字符/篇，517 个 H2）， 默认的 h2/h3 间距按「营销页」调的，读长文会糊成一片。 这里按技术文档的阅读节奏重排：小节强分隔、正文行高放宽、列表带项目符号。 */ .article-body{font-size:1.01rem} .article-body h2{margin:44px 0 18px;font-size:1.28rem;line-height:1.35;padding-bottom:.45em;border-bottom:1px solid var(--line-2)} .article-body h2:first-child{margin-top:8px} .article-body h3{margin:30px 0 12px;font-size:1.06rem;color:var(--ink)} .article-body h4{margin:22px 0 10px;font-size:.98rem;color:var(--ink-2)} .article-body p{line-height:1.8;color:var(--ink-2);margin:0 0 1.15em} .article-body strong{color:var(--ink)} /* 正文内链：全站默认的 a 是「无下划线、靠颜色区分」，在导航/卡片那种有布局线索的 位置没问题；但正文段落里没有布局线索，只靠颜色不满足 WCAG 1.4.1（不能把颜色当 唯一识别手段）。随「正文内链注入」新增 —— 注入之前 article-body 里根本没有 。 下划线只作用于正文段落里的链接，导航与卡片不受影响。 */ .article-body p a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .article-body p a:hover{color:var(--red)} /* FAQ 排版：自撰文章的问句独占一段且整段加粗（

…?

）。 靠 :has() 把「问句→答案」的间距收紧到小于「答案→下一问」，读者一眼就能 分清哪句是问题、哪句是它的答案 —— 不必额外包一层容器（那会污染 markdown 源）。 */ .article-body p:has(> strong:only-child){margin-bottom:.45em;color:var(--ink)} .article-body p:has(> strong:only-child) + p{margin-bottom:1.4em} .article-body ul.kb-ul,.article-body ol.kb-ul{margin:0 0 1.3em;padding:0} .article-body ul.kb-ul{list-style:none} .article-body ul.kb-ul li{position:relative;padding:5px 0 5px 22px;color:var(--ink-2);line-height:1.7} .article-body ul.kb-ul li::before{content:"";position:absolute;left:4px;top:14px;width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none} .article-body ol.kb-ul{list-style:decimal;padding-inline-start:24px} .article-body ol.kb-ul li{padding:5px 0;color:var(--ink-2);line-height:1.7} .article-body ol.kb-ul li::marker{color:var(--teal);font-weight:700} .article-body .kb-figure{margin:26px 0} /* 回迁表格：旧站用表格排参数，窄屏可横滑 */ .kb-table-wrap{overflow-x:auto;margin:0 0 24px;border:1px solid var(--line);border-radius:var(--r);background:#fff} .kb-table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:420px} .kb-table th,.kb-table td{padding:9px 14px;text-align:start;border-bottom:1px solid var(--line-2);vertical-align:top;font-variant-numeric:tabular-nums} .kb-table thead th{background:var(--bg-2);font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--line)} .kb-table tbody tr:last-child td{border-bottom:0} .kb-table tbody tr:hover td{background:#FCFCFD} .news-cover{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-lg);border:1px solid var(--line);margin-bottom:26px;background:var(--bg-2)} .prod-side{position:sticky;top:92px;display:flex;flex-direction:column;gap:16px} .side-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px} .side-box h4{font-size:.95rem;margin-bottom:12px} .trust-list li{display:flex;gap:9px;font-size:.88rem;color:var(--ink-2);padding:5px 0} .trust-list li::before{content:"✓";color:var(--ok);font-weight:800;flex:none} /* ── 规格表 ── */ .spec-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);margin:0 0 26px} .spec-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:480px} /* 表格数值等宽对齐：技术参数的读数感，也更方便买家逐行比对型号 */ .spec-table td,.spec-table th{font-variant-numeric:tabular-nums} .spec-table caption{text-align:start;font-weight:700;font-size:.95rem;padding:14px 18px;background:var(--bg-3);border-bottom:1px solid var(--line);color:var(--ink)} .spec-table th,.spec-table td{padding:10px 18px;text-align:start;border-bottom:1px solid var(--line-2);vertical-align:top} .spec-table tbody tr:last-child th,.spec-table tbody tr:last-child td{border-bottom:0} .spec-table th{width:38%;font-weight:600;color:var(--ink-2);background:var(--bg-2)} .spec-table tr:hover td{background:#FCFCFD} /* ── 知识库列表 ── */ .kb-list{display:grid;gap:10px} .kb-item{display:flex;align-items:flex-start;gap:14px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:.15s} .kb-item:hover{border-color:#D6DCE6;background:var(--bg-2)} .kb-id{font-family:ui-monospace,Consolas,monospace;font-size:.72rem;color:var(--ink-3);background:var(--bg-3);padding:3px 7px;border-radius:4px;flex:none;margin-top:2px} .kb-item strong{display:block;font-weight:600;font-size:.94rem;color:var(--ink)} .kb-item em{font-style:normal;font-size:.8rem;color:var(--ink-3)} /* 列表缩略图：知识文 73 张插图原站就有，过去列表页一张都不展示， 等于把「有图有真相」的说服力白白丢掉。现在每行左侧带回原站正文首图。 */ .kb-item:has(.kb-thumb){align-items:center;padding:10px 14px} .kb-thumb{width:112px;height:72px;flex:none;border-radius:6px;overflow:hidden;background:var(--bg-3);border:1px solid var(--line)} .kb-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:.25s} .kb-item:hover .kb-thumb img{transform:scale(1.06)} .kb-txt{min-width:0;flex:1} @media(max-width:640px){.kb-thumb{width:76px;height:52px}} /* ── 询盘横幅 ── */ .cta-band{background:linear-gradient(120deg,var(--red),var(--red-d));color:#fff;padding:52px 0;position:relative;overflow:hidden} /* 红色 CTA 区叠一层白色网格：让整站深/浅/红三种底都有同一套「工程图纸」气质 */ .cta-band::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(95% 150% at 86% 6%,#000 6%,transparent 66%); mask-image:radial-gradient(95% 150% at 86% 6%,#000 6%,transparent 66%)} .cta-band > .wrap{position:relative;z-index:1} .cta-in{display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap} .cta-in h2{color:#fff;margin-bottom:.3em} .cta-in p{color:rgba(255,255,255,.86);margin:0;max-width:620px} .cta-actions{display:flex;gap:12px;flex-wrap:wrap} /* ── RFQ 表单 ── */ .rfq-shell{max-width:860px;margin:0 auto} .steps{display:flex;gap:0;margin-bottom:34px} .step{flex:1;text-align:center;position:relative;font-size:.8rem;color:var(--ink-3)} .step::before{content:attr(data-n);display:grid;place-items:center;width:32px;height:32px;margin:0 auto 8px;border-radius:50%;background:var(--bg-3);color:var(--ink-3);font-weight:700;font-size:.82rem;border:2px solid transparent} .step::after{content:"";position:absolute;top:16px;inset-inline-start:calc(50% + 20px);width:calc(100% - 40px);height:2px;background:var(--line)} .step:last-child::after{display:none} .step.on::before{background:var(--red);color:#fff} .step.on{color:var(--ink);font-weight:600} .step.done::before{background:var(--ok);color:#fff;content:"✓"} .fieldset{border:0;padding:0;margin:0;display:none} .fieldset.on{display:block} .fs-title{font-size:1.1rem;font-weight:700;margin-bottom:4px} .fs-sub{font-size:.88rem;color:var(--ink-3);margin-bottom:22px} .field{margin-bottom:16px} .field label{display:block;font-size:.86rem;font-weight:600;margin-bottom:6px;color:var(--ink-2)} .field .req{color:var(--red);margin-inline-start:3px} .field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:.94rem;font-family:inherit;background:#fff;color:var(--ink);transition:.15s} .field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(31,111,107,.12)} .field .hint{font-size:.78rem;color:var(--ink-3);margin-top:5px} .field.err input,.field.err select{border-color:var(--red);background:#FEF6F5} .field .msg{font-size:.78rem;color:var(--red);margin-top:5px;display:none} .field.err .msg{display:block} .f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .chips{display:flex;flex-wrap:wrap;gap:9px} .chip{position:relative} .chip input{position:absolute;opacity:0;width:0;height:0} .chip span{display:inline-block;padding:8px 15px;border:1px solid var(--line);border-radius:99px;font-size:.87rem;cursor:pointer;transition:.15s;background:#fff} .chip input:checked + span{border-color:var(--red);background:#FDF1EF;color:var(--red);font-weight:600} .chip input:focus-visible + span{box-shadow:0 0 0 3px rgba(192,57,43,.16)} .drop{border:1.5px dashed var(--line);border-radius:var(--r);padding:24px;text-align:center;color:var(--ink-3);font-size:.88rem;background:var(--bg-2);cursor:pointer;transition:.15s} .drop:hover,.drop.drag{border-color:var(--teal);background:#F2F8F7;color:var(--teal)} .drop strong{display:block;color:var(--ink-2);margin-bottom:4px} /* 已选文件列表 —— 模板里一直在用 data-file-list，但样式表里从来没有对应规则， 于是它以浏览器默认