/* ECHOTEC — 主样式表 * * 设计语言：编辑杂志 + 红白配色。 * 排版 —— 巨大标题与极小等宽注释并置、破栏错位、门类做成「目录页」。 * 配色 —— 企业红 + 纯白两色为主，黑色只作文字与页脚。 * 红承担三件事：整幅铺底 / 色块与图注 / 编号与标尺。 * * token 由 scripts/tokens.py 生成并内联在 ，本文件只写组件。 * **本文件不出现任何裸色值** —— 一律 var(--*)。裸 rgba() 是换色时的真 bug 源。 */ *,*::before,*::after{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--type-sans); font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.05} p{margin:0} .wrap{width:min(1360px,100% - 2*var(--space-wrap));margin-inline:auto} .skip{position:absolute;left:-9999px;background:#fff;color:var(--acc); padding:12px 20px;z-index:99;font-weight:600} .skip:focus{left:0;top:0} /* ── 红场（首屏 / 转折带 / 联系区）────────────────────────── */ .red{background:var(--acc);color:#fff;position:relative;overflow:hidden} .red > *{position:relative;z-index:1} /* ── 导航 ───────────────────────────────────────────────── 在红首屏里是红底白字；滚过之后转白底黑字 —— 不切换的话， 滚到白底段落时红底导航会与白底撞色、也读不清当前位置。 */ .nav{position:sticky;top:0;z-index:40;background:var(--acc);color:#fff; transition:background .32s var(--motion-ease),color .32s var(--motion-ease), box-shadow .32s var(--motion-ease)} .nav.solid{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--hair)} .nav-in{display:flex;align-items:center;gap:30px;min-height:66px} .mark{font-size:22px;font-weight:900;letter-spacing:-.045em} .mark i{font-style:normal} .nav-links{display:flex;gap:26px;margin-left:auto;font-size:13.5px} .nav-links a{opacity:.82;transition:opacity .25s;position:relative;padding:4px 0} .nav-links a:hover{opacity:1} .nav-links a.on{opacity:1;font-weight:700} .nav-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-4px; height:2px;background:currentColor} .langsw{font-family:var(--type-mono);font-size:11px;display:flex;gap:6px;opacity:.82} .langsw a:hover{opacity:1} .langsw a.on{opacity:1;font-weight:600} /* ── 报头小字：等宽，像杂志的期号/日期 ───────────────────── */ .strap{font-family:var(--type-mono);font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;display:flex;gap:22px;flex-wrap:wrap; padding-block:13px 0;border-bottom:1px solid var(--red-hair);opacity:.9} .strap--dark{border-bottom-color:var(--hair);color:var(--mut);padding-block:0 13px} /* ── 首屏 ─────────────────────────────────────────────────── */ .hero{min-height:100vh;display:flex;flex-direction:column;position:relative} /* 左右两栏，两栏**垂直同轴心** —— 标题横贯整幅、产品孤立浮在右下会显得两者不成关系。 */ .hero-body{position:relative;flex:1;display:grid; grid-template-columns:minmax(0,44%) minmax(0,56%); gap:clamp(10px,1.3vw,22px);align-items:center; padding-block:clamp(4px,0.9vw,14px)} .hero-copy{position:relative;z-index:2} h1{font-size:clamp(33px,7.1vw,103px);line-height:1.22;letter-spacing:.055em; font-weight:900} /* 禁汉字间断行 —— 于是「电缆引入 整理系统」只可能断在那个空格上， 成「电缆引入 / 整理系统 / 服务专家」，而不是把「整理系统」拆成「整」+「理系统」。 字号放大到 102px 后，577px 的文字栏只放得下 5 个汉字，浏览器会把第 6 个 字也塞进去才断 —— 断行点必须由空格定死，不能交给自动折行。 空格只用于断行，余量足够，不需要再用字号去迁就（4 字一行只占 430px）。 */ .hero-copy h1{word-break:keep-all} h1 em{font-style:normal;background:#fff;color:var(--acc); padding:.02em .10em .04em;margin-left:.06em; box-decoration-break:clone;-webkit-box-decoration-break:clone} /* 英文首屏标题：keep-all 对拉丁字母无效，没有空格以外的断点可借，只能靠字号。 「Your entry experts.」连白底块内边距约占 11.4 个字宽，文字栏约占 40% 视口， 40%/11.4 ≈ 3.5vw，留 6% 余量取 3.3vw —— 超过这个值这行就折成两行，标题变四行。 限定 ≥981px：窄屏是上下堆叠、标题占满整栏，不受这条约束， 不限定的话会盖掉下面 @media 里那条移动端 h1 规则。 */ @media (min-width:981px){ .lang-en .hero-copy h1{font-size:min(3.3vw,48px)} } .hero .kicker{margin-bottom:clamp(14px,1.8vw,26px)} /* 产品：图片宽度给到栏宽的 112%，向右出血、由 .red 的 overflow:hidden 裁掉。 这样产品更大更有冲击力，又不动文字栏（标题字号不受影响）。 flex:none 必须显式加 —— 图片是 flex 子项，默认 flex-shrink:1 会被压回容器宽度。 */ .hero-fig{display:flex;align-items:center;justify-content:flex-start; transform:translateY(clamp(4px,1.1vw,16px))} .hero-fig img{width:112%;max-width:none;height:auto;flex:none} /* 底部通栏技术参数 */ .hero-strip{display:flex;gap:clamp(16px,3vw,48px);flex-wrap:wrap; padding-block:10px 12px;border-top:1px solid var(--red-hair); font-family:var(--type-mono);font-size:11.5px;letter-spacing:.04em; color:rgba(255,255,255,.84)} .hero-strip span{white-space:nowrap} /* ── 排版共用 ─────────────────────────────────────────────── */ .kicker{display:flex;align-items:center;gap:11px;font-family:var(--type-mono); font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc-ink); margin:0 0 18px} .kicker::before{content:"";width:26px;height:3px;background:var(--acc);flex:none} .red .kicker{color:#fff} .red .kicker::before{background:#fff} h2{font-size:clamp(22px,2.7vw,38px)} h3{font-size:18px;font-weight:700;letter-spacing:-.022em} .lead{margin-top:20px;font-size:clamp(15px,1.35vw,17.5px);line-height:1.68; color:var(--ink2);max-width:46ch} .red .lead{color:rgba(255,255,255,.94)} .tiny{margin-top:22px;font-family:var(--type-mono);font-size:11.5px;color:var(--mut); letter-spacing:.03em;line-height:1.95} .red .tiny{color:rgba(255,255,255,.8)} .mut{color:var(--mut)} /* ── 按钮 ─────────────────────────────────────────────────── */ .acts{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap} .btn{display:inline-flex;align-items:center;gap:9px;border-radius:var(--radius-pill); padding:15px 30px;font-size:14.5px;font-weight:600; transition:transform .28s var(--motion-ease),box-shadow .28s var(--motion-ease), background .25s,color .25s} .btn--white{background:#fff;color:var(--acc)} .btn--white:hover{color:var(--acc-deep);transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(0,0,0,.4)} .btn--line{background:transparent;color:#fff;border:1.5px solid var(--red-hair)} .btn--line:hover{background:var(--red-wash);border-color:#fff} .btn--red{background:var(--acc);color:#fff} .btn--red:hover{background:var(--acc-deep);transform:translateY(-2px); box-shadow:0 16px 30px -14px var(--acc30)} .btn--outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink)} .btn--outline:hover{background:var(--ink);color:#fff} /* ── 数据条：第一格红底，其余白底 ─────────────────────────── */ .nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hair); border-block:3px solid var(--acc);margin-block:var(--space-sec)} .nums > div{background:var(--paper);padding:24px 20px 28px} .nums > div:first-child{background:var(--acc);color:#fff} .nums b{display:block;font-family:var(--type-mono);font-size:clamp(24px,2.8vw,42px); font-weight:500;letter-spacing:-.035em;line-height:1} .nums span{display:block;margin-top:11px;font-family:var(--type-mono);font-size:10.5px; letter-spacing:.14em;text-transform:uppercase} .nums > div:not(:first-child) span{color:var(--mut)} /* ── 章节标尺 ─────────────────────────────────────────────── */ .shead{display:flex;align-items:baseline;gap:20px;margin:var(--space-sec) 0 26px; padding-top:22px;border-top:3px solid var(--acc)} .shead h2{font-weight:900} .shead .note{margin-left:auto;font-family:var(--type-mono);font-size:11px; color:var(--mut);letter-spacing:.14em;text-transform:uppercase} a.shead-note:hover{color:var(--acc-ink)} /* ── 门类目录：主页的核心导航 ─────────────────────────────── 整行可点，悬停时红色从左铺满 —— 门类入口要一眼扫完，不是逛。 */ .toc{border-top:1px solid var(--ink)} .toc a{display:grid;grid-template-columns:64px 1fr minmax(0,2.2fr) 76px; gap:clamp(14px,2vw,30px);align-items:baseline; padding:clamp(15px,1.9vw,24px) 0;border-bottom:1px solid var(--hair); position:relative;transition:padding .28s var(--motion-ease),color .28s} .toc a::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-1px; background:var(--acc);transform:scaleX(0);transform-origin:left; transition:transform .32s var(--motion-ease);z-index:0} .toc a:hover{padding-left:18px;padding-right:18px;color:#fff} .toc a:hover::before{transform:scaleX(1)} .toc a > *{position:relative;z-index:1} .toc a:hover .n,.toc a:hover .cnt,.toc a:hover .refs{color:#fff} .toc a:hover .refs span::before{color:var(--red-hair)} .toc .n{font-family:var(--type-mono);font-size:12px;color:var(--acc-ink);letter-spacing:.1em} .toc h3{font-size:clamp(18px,2.1vw,30px);font-weight:800;letter-spacing:-.032em; line-height:1.1} .toc .refs{font-family:var(--type-mono);font-size:11.5px;color:var(--mut);line-height:2; display:flex;flex-wrap:wrap;gap:0 18px;transition:color .28s} .toc .refs span::before{content:"— ";color:var(--hair)} .toc .cnt{font-family:var(--type-mono);font-size:11.5px;color:var(--mut);text-align:right} .toc .cnt em{font-style:normal;color:var(--acc-ink)} .toc a:hover .cnt em{color:#fff} /* ── 特稿：破栏错位的两栏 ─────────────────────────────────── */ .feat{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.2vw,34px); align-items:center;padding-block:clamp(24px,3.4vw,50px);border-top:1px solid var(--hair)} .feat .fig{grid-column:span 5;aspect-ratio:1/1;background:var(--paper); border:1px solid var(--hair);display:flex;align-items:center;justify-content:center; overflow:hidden;position:relative} .feat .fig img{width:80%;height:80%;object-fit:contain} .feat .fig .tag{position:absolute;left:0;top:0;background:var(--acc);color:#fff; font-family:var(--type-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; padding:7px 13px} .feat .txt{grid-column:8 / span 5} .feats > .feat:nth-child(even) .fig{grid-column:8 / span 5;order:2} .feats > .feat:nth-child(even) .txt{grid-column:1 / span 5;order:1} .feat .idx{font-family:var(--type-mono);font-size:11px;letter-spacing:.16em; color:var(--acc-ink);margin:0 0 12px;text-transform:uppercase} .feat h3{font-size:clamp(21px,2.5vw,34px);font-weight:900;letter-spacing:-.035em; line-height:1.08} .feat p{margin:16px 0 0;font-size:15.5px;line-height:1.68;color:var(--ink2);max-width:44ch} /* ── 卡片网格 ─────────────────────────────────────────────── */ /* 卡片用**固定区间的轨道**而不是 1fr 弹性轨道： auto-fill + 1fr 在条目少时（如某门类只有 2 个系列）会留下空轨道， 卡片被挤窄、右侧空一大片。minmax(230,280) 让卡片尺寸恒定且左对齐。 */ .grid{display:grid;gap:clamp(14px,1.8vw,24px);justify-content:start; grid-template-columns:repeat(auto-fill,minmax(230px,280px))} .card{border:1px solid var(--hair);background:var(--paper);overflow:hidden; display:flex;flex-direction:column; transition:border-color .3s var(--motion-ease),transform .3s var(--motion-ease)} .card:hover{border-color:var(--acc);transform:translateY(-4px)} .card-img{aspect-ratio:4/3;background:var(--paper-soft);display:flex;align-items:center; justify-content:center;border-bottom:1px solid var(--hair);overflow:hidden} .card-img img{width:82%;height:82%;object-fit:contain;transition:transform .6s var(--motion-ease)} .card:hover .card-img img{transform:scale(1.05)} .card-img--none{background:repeating-linear-gradient(45deg,var(--acc08) 0 8px,transparent 8px 16px)} .card-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:7px;flex:1} .card .ref{font-family:var(--type-mono);font-size:10.5px;letter-spacing:.09em; color:var(--acc-ink);text-transform:uppercase} .card h3{font-size:15.5px;font-weight:700} .card p{font-size:13px;line-height:1.55;color:var(--mut)} .card .go{margin-top:auto;padding-top:12px;font-family:var(--type-mono);font-size:11px; color:var(--mut);display:flex;align-items:center;gap:7px} .card:hover .go{color:var(--acc-ink)} .card .go::after{content:"→";transition:transform .3s var(--motion-ease)} .card:hover .go::after{transform:translateX(4px)} /* ── 规格表 ───────────────────────────────────────────────── */ .tablewrap{overflow-x:auto;border:1px solid var(--hair)} .mtable{width:100%;border-collapse:collapse;font-family:var(--type-mono);font-size:13px} .mtable th,.mtable td{padding:12px 14px;text-align:left; border-bottom:1px solid var(--hair);white-space:nowrap} .mtable thead th{background:var(--acc);color:#fff;font-weight:500;font-size:10.5px; letter-spacing:.1em;text-transform:uppercase;border-bottom:0} .mtable tbody tr:last-child td{border-bottom:0} .mtable tbody tr:hover{background:var(--paper-soft)} .mtable td:first-child{color:var(--acc-ink);font-weight:500} .table-note{margin-top:12px;font-size:12.5px;color:var(--mut)} .kv{display:grid;border-top:3px solid var(--acc)} .kv-row{display:grid;grid-template-columns:minmax(120px,190px) 1fr; gap:clamp(14px,2vw,28px);padding:13px 0;border-bottom:1px solid var(--hair)} .kv-row dt{font-family:var(--type-mono);font-size:11.5px;color:var(--acc-ink); letter-spacing:.06em} .kv-row dd{margin:0;font-size:14.5px;color:var(--ink2)} .red .kv{border-top-color:#fff} .red .kv-row{border-bottom-color:var(--red-hair)} .red .kv-row dt{color:rgba(255,255,255,.72)} .red .kv-row dd{color:#fff} /* ── 红色转折带 ───────────────────────────────────────────── */ .pull{margin-block:var(--space-sec);padding-block:clamp(34px,4.6vw,64px);text-align:center} .pull p{font-size:clamp(19px,2.9vw,40px);line-height:1.3;letter-spacing:-.012em; font-weight:800;max-width:26ch;margin-inline:auto} .pull p em{font-style:normal;background:#fff;color:var(--acc); padding:.03em .14em .08em} .pull span{display:block;margin-top:18px;font-family:var(--type-mono);font-size:10.5px; letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82)} /* ── 优势四栏：红顶线 ─────────────────────────────────────── */ .why{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,30px)} .why > div{border-top:3px solid var(--acc);padding-top:16px} .why .k{font-family:var(--type-mono);font-size:11px;color:var(--acc-ink); letter-spacing:.12em;display:block;margin-bottom:10px} .why b{display:block;font-size:16px;font-weight:800;letter-spacing:-.022em} .why p{margin-top:9px;font-size:13.5px;line-height:1.62;color:var(--mut)} /* ── 子页页面头 ───────────────────────────────────────────── */ .phead{padding-block:clamp(40px,5.5vw,86px) clamp(24px,3vw,42px)} .phead h1{font-size:clamp(32px,5vw,72px);letter-spacing:-.045em;line-height:1.06} .phead .lead{margin-top:18px} .crumb{display:flex;gap:9px;align-items:center;font-family:var(--type-mono); font-size:11.5px;color:var(--mut);margin-bottom:18px} .crumb a:hover{color:var(--acc-ink)} .crumb span{opacity:.5} /* ── 系列详情 ─────────────────────────────────────────────── */ .shero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(26px,4vw,60px); align-items:center} .shero .fig{border:1px solid var(--hair);aspect-ratio:4/3;display:flex; align-items:center;justify-content:center;overflow:hidden;background:var(--paper)} .shero .fig img{width:84%;height:84%;object-fit:contain} /* 内外各留一段等量的 padding / 负 margin：视觉位置不变，但容器比版心宽出 2×ZOOM_ROOM， 悬停放大后的卡片有地方可伸 —— 否则最外列的卡片会把文档撑宽、多出一条横向滚动条。 尺寸写在这两个值上，改放大倍率时一起改。 */ /* 余量必须**小于** .wrap 的左右边距（--space-wrap，窄屏只有 20px）—— 否则负 margin 会把容器顶出视口，整站多出一条横向滚动条。 取 0.6 倍留出安全距离；宽屏上 --space-wrap 有 65px 左右，26px 的上限先生效。 */ .gallery{--zoom-room:min(26px,calc(var(--space-wrap) * .6)); display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); align-items:start; padding:var(--zoom-room);margin:calc(-1 * var(--zoom-room))} /* 卡片按**原图比例**，不裁切、不留白。 走过三段弯路，记在这里免得再回头： ① 1:1 + contain + 内缩 14% —— 横照片上下各留 30px 白边， 灰底素材浮在白框正中，看起来像抠坏了贴上去 ② 4:3 + cover —— 白边没了，但把宽图/竖图**裁掉了大半** （画册素材长宽比横跨 0.81–5.22，5.22 的波纹管条带裁到 4:3 只剩两成） ③ 现在：img 宽度撑满、高度 auto，比例由原图决定 代价是同一行里卡片高度不齐（网格行高按最高的那个算，矮的下面留空）。 这是"不裁切"的必然结果，要整齐就得裁，两者不可兼得。 align-items:start 是关键 —— 不加的话网格默认把每张拉伸到行高， 图片会被拉变形（这正是当初绕去 cover 的原因）。 */ /* 卡片盒子挂在 button 上、不挂在 figure 上 —— 这不是随手放的。 .stagger 的入场动画是 `.js .stagger.in > *{transform:none}`（特异性 0,3,0）， 而 `.gallery figure` 只有 0,1,1。悬停放大若也写在 figure 上就永远输给入场动画， 而且输了是**静默的**（写上去看着对，跑起来没反应）。盒子下沉一层即可避开， figure 只留 z-index 负责抬层，两者不再抢同一个 transform。 */ .gallery figure{margin:0;position:relative} .gal-open{display:block;width:100%;border:1px solid var(--hair); overflow:hidden;background:var(--paper); transition:transform .35s var(--motion-ease),box-shadow .35s var(--motion-ease)} .gallery img{width:100%;height:auto;display:block; transition:transform .5s var(--motion-ease)} /* 悬停原位放大：鼠标移到图上就直接看大一点，不用点开灯箱。 限定 @media (hover:hover) —— 触屏上没有真正的悬停，不加限定的话 点一下会留下一个「卡住」的放大态，要再点别处才弹回来。 同时 short-circuit prefers-reduced-motion（与全站的动效约定一致）。 放大后抬 z-index 并加阴影，否则会跟相邻卡片糊在一起，看不出浮起关系。 */ @media (hover:hover) and (prefers-reduced-motion:no-preference){ .gallery figure:hover{z-index:3} .gallery figure:hover .gal-open{transform:scale(1.28);box-shadow:var(--shadow-hover)} .gallery figure:hover img{transform:scale(1.06)} } /* 缩略图被上面那条 cover 裁过 —— 点开灯箱才看得到完整的产品照。 按钮包住 img：语义上这是一个「动作」，不是装饰。无 JS 时按钮不响应， 但图照常显示，所以 .gal-open 的点击样式一律挂 .js 前缀（渐进增强）。 */ .gal-open{display:block;width:100%;height:100%;padding:0;border:0; background:none;color:inherit;font:inherit} .js .gal-open{cursor:zoom-in} .gal-open:focus-visible{outline:2px solid var(--acc);outline-offset:2px;position:relative;z-index:1} /* ── 图集灯箱 ─────────────────────────────────────────────── */ /* 用 而不是自绘遮罩：Esc 关闭、焦点陷阱、背景 inert 都是浏览器给的， 自己写这几个每年都有人写漏（漏了焦点陷阱，键盘用户会 Tab 到背后的页面上）。 遮罩色画在 dialog 自身而不是 ::backdrop —— ::backdrop 不继承 :root 的自定义 属性，var(--scrim) 在那边会失效。 */ .lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none; margin:0;padding:clamp(48px,6vh,72px) clamp(16px,4vw,72px) clamp(28px,4vh,48px); border:0;background:var(--scrim);color:#fff; display:none;align-items:center;justify-content:center} .lb[open]{display:flex} .lb::backdrop{background:transparent} /* 适度放大，不铺满屏。 画册抽出的原图偏小（多数 230–720px），按原始尺寸摆在大屏上几乎看不出「放大」， 所以要放大一些；但铺满整屏就过了 —— 那是看图工具的做法，不是产品页的做法。 上限取三者的最小值： · 820px / 74vw —— 版面上的舒适宽度 · 64vh —— 留出上下留白，遮罩不至于只剩一条 · --lb-cap —— 由 JS 按原图分辨率设的倍率上限，见 base.html 图片的元素宽高都设成 100%，由 object-fit:contain 保持比例。 */ .lb img{width:100%;height:100%;object-fit:contain;background:var(--paper); border-radius:var(--radius-card); max-width:min(820px,74vw,var(--lb-cap,99999px)); max-height:min(64vh,var(--lb-cap,99999px))} /* 上一张 / 下一张 / 关闭：都做成圆形按钮，落在遮罩上的固定位置。 触屏上 40px 是能可靠点到的最小尺寸。 */ .lb button{position:absolute;width:44px;height:44px;padding:0;border:0; border-radius:999px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer; font:400 26px/1 var(--type-sans);display:grid;place-items:center; transition:background .2s var(--motion-ease)} .lb button:hover{background:rgba(255,255,255,.26)} .lb button:focus-visible{outline:2px solid #fff;outline-offset:2px} .lb-x{top:clamp(10px,2vh,22px);right:clamp(10px,2vw,26px);font-size:30px} .lb-p{left:clamp(8px,1.6vw,26px);top:50%;transform:translateY(-50%)} .lb-n{right:clamp(8px,1.6vw,26px);top:50%;transform:translateY(-50%)} /* 只有一张时藏掉左右键 —— 点了没反应的按钮比没有按钮更让人困惑 */ .lb[data-many="0"] .lb-p,.lb[data-many="0"] .lb-n{display:none} .lb-c{position:absolute;bottom:clamp(8px,2vh,20px);left:50%;transform:translateX(-50%); font-family:var(--type-mono);font-size:12px;letter-spacing:.1em;color:rgba(255,255,255,.72)} @media (prefers-reduced-motion:reduce){ .gallery img,.lb button{transition:none} } .pills{display:flex;flex-wrap:wrap;gap:8px} .pill{font-family:var(--type-mono);font-size:11px;letter-spacing:.06em; border:1px solid var(--hair);border-radius:var(--radius-pill); padding:5px 13px;color:var(--ink2)} /* ── 联系表单 ─────────────────────────────────────────────── */ .contact-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px); align-items:start} .form{display:grid;gap:14px} .form label{display:grid;gap:6px;font-family:var(--type-mono);font-size:11px; letter-spacing:.09em;text-transform:uppercase;color:var(--mut)} .form input,.form textarea{font:inherit;font-family:var(--type-sans);font-size:15px; text-transform:none;letter-spacing:normal;color:var(--ink);padding:12px 14px; border:1px solid var(--hair);border-radius:var(--radius-card);background:var(--paper); width:100%;transition:border-color .25s,box-shadow .25s} .form input:focus,.form textarea:focus{outline:none;border-color:var(--acc); box-shadow:0 0 0 3px var(--acc14)} .form textarea{resize:vertical;min-height:112px} .form .btn{justify-self:start;margin-top:6px;cursor:pointer;border:0} .form .btn[disabled]{opacity:.5;cursor:progress} .form-msg{font-size:13.5px;color:var(--acc-ink);min-height:1.4em} /* ── 页脚 ─────────────────────────────────────────────────── */ .foot{background:var(--ink);color:#fff;padding-block:46px 30px;font-size:13.5px} .foot-in{display:grid;grid-template-columns:1.6fr 1fr 1.4fr;gap:clamp(24px,4vw,56px)} .foot h4{font-family:var(--type-mono);font-size:10.5px;font-weight:500;letter-spacing:.13em; text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 14px} .foot a,.foot p{display:block;color:rgba(255,255,255,.74);margin-bottom:8px} .foot a:hover{color:#fff} .foot .fbrand{font-size:18px;font-weight:900;letter-spacing:-.03em;color:#fff; margin-bottom:12px} .foot-base{margin-top:38px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-family:var(--type-mono);font-size:11.5px;color:rgba(255,255,255,.5)} /* ── 动效：只动 transform / opacity ───────────────────────── */ .js .reveal{opacity:0;transform:translateY(20px)} .reveal{transition:opacity var(--motion-dur-reveal) var(--motion-ease), transform var(--motion-dur-reveal) var(--motion-ease)} .reveal.in{opacity:1;transform:none} .js .stagger > *{opacity:0;transform:translateY(16px); transition:opacity .8s var(--motion-ease),transform .8s var(--motion-ease)} .js .stagger.in > *{opacity:1;transform:none} .js .stagger.in > *:nth-child(1){transition-delay:0ms} .js .stagger.in > *:nth-child(2){transition-delay:70ms} .js .stagger.in > *:nth-child(3){transition-delay:140ms} .js .stagger.in > *:nth-child(4){transition-delay:210ms} .js .stagger.in > *:nth-child(n+5){transition-delay:280ms} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} .js .reveal,.js .stagger > *{opacity:1;transform:none} } /* ── 响应式 ───────────────────────────────────────────────── */ /* 矮屏降级：首屏产品放大到 112% 后，图片高度会超出可用行高， 按视口高度分档收小，保证不压到底部技术参数条。 */ @media (max-height:790px){ .hero-fig img{width:104%} } @media (max-height:730px){ .hero-fig img{width:94%} } @media (max-width:980px){ :root{--space-sec:clamp(34px,7vw,56px);--space-wrap:20px} .nav-in{flex-wrap:wrap;gap:12px;padding-block:12px} .nav-links{order:3;width:100%;overflow-x:auto;gap:20px;scrollbar-width:none} .nav-links::-webkit-scrollbar{display:none} /* 首屏改为上下堆叠 */ .hero{min-height:auto} .hero-body{grid-template-columns:1fr;gap:20px;align-items:start} h1{font-size:clamp(30px,8.4vw,54px);line-height:1.2;letter-spacing:.04em} /* 英文窄屏同理靠字号：「Your entry experts.」在 32px 时放不进白底块， 被折成两行、整题变四行，缩到 7.6vw 后与中文一致成立为三行。 上限仍是 54px —— 620px 以上标题已只占两三行，不必再小。 */ .lang-en .hero-copy h1{font-size:clamp(26px,7.6vw,54px)} .hero-fig{transform:none;justify-content:center} .hero-fig img{width:100%} .feat .fig,.feat .txt, .feat:nth-child(even) .fig,.feat:nth-child(even) .txt{grid-column:1/-1;order:0} .shero,.contact-in{grid-template-columns:1fr} .why{grid-template-columns:repeat(2,1fr)} .foot-in{grid-template-columns:1fr} .toc a{grid-template-columns:38px 1fr;row-gap:6px} .toc a .refs,.toc a .cnt{grid-column:2;text-align:left;justify-content:flex-start} .kv-row{grid-template-columns:1fr;gap:4px} .nums{grid-template-columns:repeat(2,1fr)} } @media (max-width:620px){ .grid,.gallery{grid-template-columns:repeat(auto-fill,minmax(146px,1fr))} .why{grid-template-columns:1fr} }