:root{ /* ===== 品牌绿 ===== 注意：这里必须是【字面色值】，不能写 var(--gxxx)，否则自我引用失效。 */ --g50:#ecf8f2; --g100:#d7efe3; --g200:#afdec7; --g400:#31c47a; --g500:#008040; --g600:#006b36; --g700:#005229; --g900:#072717; /* ===== 中性色（色相同为 150°，饱和 4~10%，与品牌同源）===== */ --n0:#fcfdfc; --n25:#f7faf9; --n50:#f1f6f4; --n100:#e8eeeb; --n200:#d7e0db; --n300:#b0bfb8; --n500:#4b6357; --n700:#384d42; --n900:#18251f; /* ===== 辅助铜色（产品点缀，饱和已压低）===== */ --c100:#eedfd3; --c300:#cda684; --c500:#a47246; --c700:#715033; /* ===== 语义别名（沿用原变量名，避免大面积改动）===== */ --ink:#18251f; --muted:#4b6357; --faint:#b0bfb8; --line:#d7e0db; --cu1:#afdec7; --cu2:#31c47a; --cu3:#008040; --cu4:#005229; --teal:#31c47a; --glass:rgba(252,253,252,.80); --glassb:rgba(255,255,255,.92); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:'DM Sans','Segoe UI','Helvetica Neue',Helvetica,Arial,'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;background:var(--bg);color:var(--ink);line-height:1.72;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-weight:300} h1,h2,h3,.syne{font-family:'Syne','Segoe UI Variable Display','Segoe UI','Helvetica Neue',Helvetica,Arial,'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;font-weight:800;letter-spacing:-.025em} a{text-decoration:none;color:inherit} .wrap{max-width:1240px;margin:0 auto;padding:0 38px} .kick{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--cu1);background:rgba(0,128,64,.12);border:1px solid rgba(0,128,64,.28);padding:6px 15px;border-radius:99px;backdrop-filter:blur(8px)} /* ============================================================ .gcu 铜色文字 ------------------------------------------------------------ 原本用 background-clip:text + color:transparent 做渐变， 已经引发过两次故障： 1) 文字超出元素盒子时，超出部分没有背景可透 → 被"裁掉" （统计数字 2003 缺一半就是这个原因） 2) JS 把标题拆成 后，渐变在父元素、子 span 无背景 → 整行文字直接消失（Hero 第二行「设计制造」） 这类问题在压着照片时还会显得发虚。 改用实色，观感几乎一致，但不再有任何取色失败的可能。 ============================================================ */ .gcu{background:none;-webkit-background-clip:border-box;background-clip:border-box; color:var(--g500)} .gcu span,.gcu *{color:inherit} /* ===== 特效1：流动渐变光晕背景 ===== */ #mesh{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none} #mesh i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.30;display:block} #mesh .m1{width:640px;height:640px;top:-14%;right:-6%;background:radial-gradient(circle,rgba(0,128,64,.55),transparent 65%);animation:dr1 20s ease-in-out infinite} #mesh .m2{width:520px;height:520px;bottom:-10%;left:-8%;background:radial-gradient(circle,rgba(0,128,64,.5),transparent 65%);animation:dr2 26s ease-in-out infinite} #mesh .m3{width:420px;height:420px;top:42%;left:38%;background:radial-gradient(circle,rgba(63,214,176,.22),transparent 65%);animation:dr3 23s ease-in-out infinite} @keyframes dr1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-90px,70px) scale(1.14)}66%{transform:translate(50px,120px) scale(.94)}} @keyframes dr2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(110px,-70px) scale(1.1)}66%{transform:translate(-40px,-110px) scale(.92)}} @keyframes dr3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-130px,-90px) scale(1.2)}} .z{position:relative;z-index:3} /* ===== 特效2：光标聚光灯 ===== */ #spot{position:fixed;inset:0;z-index:1;pointer-events:none; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(175,222,199,.09),transparent 62%)} /* ===== 特效3：磁吸光标 ===== */ @media(pointer:fine){ #cur{position:fixed;width:26px;height:26px;border-radius:50%;border:1px solid rgba(175,222,199,.6);z-index:950;pointer-events:none;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s,opacity .25s;backdrop-filter:invert(.08)} #cur.big{width:70px;height:70px;background:rgba(175,222,199,.1);border-color:var(--cu1)} } #cur{display:none}@media(pointer:fine){#cur{display:block}} /* ===== 特效4：滚动进度（液态） ===== */ #prg{position:fixed;top:0;left:0;height:3px;width:0;z-index:900;background:linear-gradient(90deg,var(--cu3),var(--cu1),var(--teal));box-shadow:0 0 16px rgba(175,222,199,.6)} /* preloader：液滴 */ #pre{position:fixed;inset:0;z-index:999;background:var(--bg);display:grid;place-items:center;transition:opacity .8s,visibility .8s} body.loaded #pre{opacity:0;visibility:hidden} #pre .drop{width:56px;height:56px;border-radius:50%;background:linear-gradient(160deg,var(--cu1),var(--cu3));animation:mo 1.5s ease-in-out infinite;box-shadow:0 0 50px rgba(0,128,64,.5)} @keyframes mo{0%,100%{border-radius:50% 50% 50% 50%;transform:scale(1) rotate(0)}33%{border-radius:60% 40% 55% 45%;transform:scale(1.12) rotate(120deg)}66%{border-radius:40% 60% 45% 55%;transform:scale(.92) rotate(240deg)}} #pre .tx{font-family:'Syne';font-weight:800;letter-spacing:.3em;font-size:13px;color:var(--cu1);margin-top:22px} /* ticker */ @keyframes pl{0%{box-shadow:0 0 0 0 rgba(63,214,176,.5)}70%{box-shadow:0 0 0 8px rgba(63,214,176,0)}100%{box-shadow:0 0 0 0 transparent}} /* header 玻璃 */ header{position:sticky;top:0;z-index:100;backdrop-filter:blur(22px) saturate(1.2);background:rgba(13,10,8,.6);border-bottom:1px solid var(--glassb)} .nav{display:flex;align-items:center;justify-content:space-between;height:80px} /* ---- 品牌 logo：Brush Script MT 手写体 + 品牌绿 ---- Brush Script MT 是 Windows / macOS 自带字体，无需下载。 Linux 与部分 Android 没有，故给了同类手写体兜底， 最后退到通用 cursive，不会掉成默认宋体。 手写体的视觉字高比无衬线小，所以字号要比原来大一档。 */ header.scrolled /* ---- 中英文两行等宽对齐 ---- 同一个宽度 --brandw，两行各自 justify 撑满，因此永远精确等宽， 不需要手工调字距。中文按字分配间距、英文按词分配。 中文用全称「苏州新太铜高效管」(8字≈132px) 与英文(≈140px) 自然接近， 所以拉伸量极小，看不出刻意感。要整体加宽/收窄只改 --brandw 一个值。 */ .menu{display:flex;gap:6px} .menu a{padding:9px 17px;border-radius:99px;font-size:14.5px;color:var(--muted);transition:.3s} .menu a:hover{color:var(--ink);background:var(--glass)} .menu a.on{color:var(--ink);background:var(--glass);border:1px solid var(--glassb)} .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:99px;font-weight:500;font-size:14.5px;transition:.35s;cursor:pointer;border:none;font-family:inherit} .btn-c{background:linear-gradient(100deg,var(--cu2),var(--cu3));color:#fff;font-weight:700} .btn-c:hover{box-shadow:0 16px 40px rgba(0,128,64,.4);transform:translateY(-3px)} .btn-g{background:var(--glass);border:1px solid var(--glassb);color:var(--ink);backdrop-filter:blur(10px)} .btn-g:hover{background:rgba(255,255,255,.1);border-color:var(--cu2)} .rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.4);transform:translate(-50%,-50%) scale(0);animation:rp .65s ease-out forwards;pointer-events:none} @keyframes rp{to{transform:translate(-50%,-50%) scale(16);opacity:0}} /* hero */ .hero{position:relative;min-height:92vh;display:flex;align-items:center;z-index:3} .hero .wrap{padding:70px 38px} .hero .kick{margin-bottom:24px} .hero h1{font-size:clamp(48px,7.6vw,110px);line-height:.96;margin-bottom:22px} /* 词组模糊上升 */ .blur span{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(40px);animation:bi 1s cubic-bezier(.2,.8,.2,1) forwards} @keyframes bi{to{opacity:1;filter:blur(0);transform:none}} .hero p{color:var(--muted);max-width:540px;font-size:17.5px} .hero .cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap} /* ===== 特效5：液态波浪 SVG ===== */ /* 玻璃卡 */ .glass{background:var(--glass);border:1px solid var(--glassb);backdrop-filter:blur(18px);border-radius:26px} .hero-panel{padding:28px;position:relative;overflow:hidden} .hero-panel .vis{height:220px;border-radius:18px;position:relative;overflow:hidden;display:grid;place-items:center;background:radial-gradient(circle at 40% 30%,#2b1d12,#0f0a06)} .hero-panel .vis .ph{position:absolute;top:14px;left:16px;font-size:12px;color:rgba(255,255,255,.4)} .hero-panel .vis .tube{width:86%;height:54px;border-radius:99px;background:linear-gradient(180deg,var(--cu1),var(--cu2) 38%,var(--cu4) 72%,var(--cu2));box-shadow:0 20px 46px rgba(0,128,64,.42);transform:rotate(-8deg);animation:bob 5.5s ease-in-out infinite;position:relative} .hero-panel .vis .tube::after{content:"";position:absolute;inset:0;border-radius:99px;background:repeating-linear-gradient(80deg,transparent 0 10px,rgba(0,0,0,.16) 11px 14px)} @keyframes bob{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-4deg) translateY(-10px)}} .hero-panel .row{display:flex;gap:12px;margin-top:18px} .mini{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--glassb);border-radius:16px;padding:15px} .mini .n{font-family:'Syne';font-weight:800;font-size:27px} .mini .l{font-size:12px;color:var(--muted)} .hero .grid{display:grid;grid-template-columns:1.08fr .92fr;gap:46px;align-items:center} [data-rv]{opacity:0;transform:translateY(38px) scale(.985);filter:blur(6px);transition:opacity .95s cubic-bezier(.2,.7,.2,1),transform .95s cubic-bezier(.2,.7,.2,1),filter .95s} [data-rv].in{opacity:1;transform:none;filter:none} [data-dl="1"]{transition-delay:.12s}[data-dl="2"]{transition-delay:.24s}[data-dl="3"]{transition-delay:.36s} section{padding:106px 0;position:relative;z-index:3} .shd{margin-bottom:54px}.shd.c{text-align:center} .shd h2{font-size:clamp(34px,4.8vw,60px);margin-top:16px;line-height:1.04} .shd p{color:var(--muted);max-width:600px;margin-top:14px} .shd.c p{margin-left:auto;margin-right:auto} /* stats */ .sg{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .st{padding:34px 28px;transition:.4s} .st:hover{transform:translateY(-6px);border-color:rgba(0,128,64,.4)} .st .l{color:var(--muted);font-size:13.5px;margin-top:8px} /* about */ .ab{display:grid;grid-template-columns:1fr 1fr;gap:62px;align-items:center} .ab .lead{font-size:22px;line-height:1.6;margin-bottom:20px;font-weight:400} .ab p{color:var(--muted);margin-bottom:14px;font-size:15.5px} /* ===== 特效6：3D 倾斜 + 反光 ===== */ .pg{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .pc{position:relative;overflow:hidden;transition:border-color .35s,box-shadow .35s;cursor:pointer;transform-style:preserve-3d;will-change:transform} .pc:hover{border-color:rgba(0,128,64,.5);box-shadow:0 34px 70px rgba(0,0,0,.55)} .pc .glare{position:absolute;inset:0;border-radius:26px;pointer-events:none;opacity:0;transition:opacity .3s; background:radial-gradient(300px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.16),transparent 60%)} .pc:hover .glare{opacity:1} .pim{height:220px;border-radius:20px;margin:14px 14px 0;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 36% 30%,#2b1d12,#0e0a06);overflow:hidden} .pim .tb{width:80%;height:48px;border-radius:99px;background:linear-gradient(180deg,var(--cu1),var(--cu2) 40%,var(--cu4));box-shadow:0 16px 38px rgba(0,128,64,.34);transform:rotate(-7deg);transition:.55s} .pc:hover .pim .tb{transform:rotate(-2deg) scale(1.06)} .pim .tg{position:absolute;top:12px;left:12px;font-size:11px;color:var(--cu1);background:rgba(0,0,0,.35);border:1px solid var(--glassb);padding:4px 10px;border-radius:99px;backdrop-filter:blur(6px)} .pb{padding:20px 24px 22px;display:flex;justify-content:space-between;align-items:center} .pb h3{font-size:19px} .pb .ar{width:34px;height:34px;border-radius:50%;background:var(--glass);border:1px solid var(--glassb);display:grid;place-items:center;color:var(--cu1);transition:.3s;flex:none} .pc:hover .pb .ar{background:linear-gradient(100deg,var(--cu2),var(--cu3));color:#fff;transform:rotate(-45deg)} /* apps */ .ag{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .ac::before{content:"";position:absolute;inset:0;background:radial-gradient(480px 340px at 72% 12%,rgba(0,128,64,.24),transparent 62%)} .ac:hover{transform:translateY(-7px);border-color:rgba(0,128,64,.45)} .ac .bg{position:absolute;top:20px;right:26px;font-family:'Syne';font-weight:800;font-size:70px;color:rgba(175,222,199,.14);z-index:2} .ac .ct{position:relative;z-index:3} .ac h3{font-size:25px;margin-top:9px}.ac p{color:var(--muted);font-size:14px;margin-top:8px} /* band */ footer{border-top:1px solid var(--glassb);padding:76px 0 34px;backdrop-filter:blur(14px);background:rgba(10,8,6,.6);position:relative;z-index:3} footer a:hover{color:var(--ink)} .fbt{border-top:1px solid var(--glassb);margin-top:46px;padding-top:24px;text-align:center;font-size:11.5px;color:#6d635b} @media(max-width:900px){.hero .grid,.ab,.pg,.ag{grid-template-columns:1fr} .sg{grid-template-columns:1fr 1fr}} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}[data-rv]{opacity:1;transform:none;filter:none}} /* ===== 明亮版：暖白底 × 淡铜玻璃 ===== */ :root{ --bg:var(--n25);--bg2:var(--n100); --ink:var(--n900);--muted:var(--n500); --cu1:var(--g500);--cu2:var(--g400);--cu3:var(--g500);--cu4:var(--g700); --teal:#158f78; --glass:rgba(255,255,255,.72);--glassb:rgba(45,77,66,.16); } body{ background: radial-gradient(circle at 88% 4%,rgba(0,128,64,.13),transparent 28%), radial-gradient(circle at 6% 56%,rgba(63,214,176,.08),transparent 30%), var(--bg); } ::selection{background:rgba(0,128,64,.24);color:var(--ink)} .gcu{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--g500)} #mesh i{filter:blur(110px);opacity:.34} #mesh .m1{background:radial-gradient(circle,rgba(0,128,64,.38),transparent 66%)} #mesh .m2{background:radial-gradient(circle,rgba(0,128,64,.25),transparent 66%)} #mesh .m3{background:radial-gradient(circle,rgba(63,214,176,.16),transparent 66%)} #spot,#cur{display:none!important} #pre{background:var(--n0)} header{background:rgba(255,252,248,.78);border-color:var(--glassb);box-shadow:0 10px 35px rgba(74,43,22,.05)} .menu a:hover,.menu a.on{background:rgba(255,255,255,.82)} .btn-c{background:linear-gradient(100deg,var(--g400),var(--g500));color:var(--n0);box-shadow:0 10px 24px rgba(0,128,64,.18)} .btn-c:hover{box-shadow:0 16px 38px rgba(0,128,64,.28)} .btn-g{background:rgba(255,255,255,.68)} .btn-g:hover{background:#fff;border-color:rgba(0,128,64,.55)} .glass{box-shadow:0 18px 55px rgba(45,77,66,.07)} .hero-panel .vis,.pim{background:radial-gradient(circle at 38% 28%,var(--n0),#ead9c8)} .hero-panel .vis .ph{color:rgba(42,27,18,.48)} .hero-panel .vis .tube,.pim .tb{box-shadow:0 18px 38px rgba(0,128,64,.25)} .mini{background:rgba(255,255,255,.56)} .st:hover,.ac:hover{box-shadow:0 22px 50px rgba(110,65,34,.1)} .pc:hover{box-shadow:0 28px 65px rgba(45,77,66,.14)} .pc .glare{background:radial-gradient(300px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.72),transparent 60%)} .pim .tg{color:var(--g600);background:rgba(255,255,255,.7)} .pb .ar{background:rgba(255,255,255,.72)} .pc:hover .pb .ar{color:var(--n0)} .ac::before{background:radial-gradient(480px 340px at 72% 12%,rgba(0,128,64,.17),transparent 62%)} .ac .bg{color:rgba(0,128,64,.12)} footer{background:rgba(241,232,222,.72)} /* ============================================================ 铜管实拍图 · 整页固定背景 ------------------------------------------------------------ #photobg 固定在视口的照片层，滚动时不动 #photoveil 米白遮罩，让照片在正文区退成"铜色纹理"，保证文字可读 .heroimg Hero 区用 background-attachment:fixed，与 #photobg 对齐， 但遮罩更薄 —— 顶部铜色鲜明，往下滑逐渐退成底纹， ============================================================ */ :root{ --hero-photo: var(--hero-photo-src); } html{background:var(--n25)} body{background:transparent;position:relative} #photobg{position:fixed;inset:0;z-index:-2;pointer-events:none; background-image:var(--hero-photo);background-size:cover;background-position:center 45%} #photoveil{position:fixed;inset:0;z-index:-1;pointer-events:none;background: /* (a) 顶部保护带：透明页头的导航文字压在这条上，保证可读。 因为整层是 fixed，这条始终贴在视口顶部，不随滚动移动。 */ linear-gradient(180deg, rgba(248,244,238,.88) 0px, rgba(248,244,238,.62) 78px, rgba(248,244,238,.20) 132px, rgba(248,244,238,0) 180px), /* (b) 主横向渐变：左侧厚(护文字) → 右侧归零(露铜管原色) */ linear-gradient(100deg, rgba(248,244,238,.960) 0%, rgba(248,244,238,.930) 26%, rgba(248,244,238,.780) 44%, rgba(248,244,238,.470) 60%, rgba(248,244,238,.180) 76%, rgba(248,244,238,.020) 91%, rgba(248,244,238,0) 100%)} /* ---- Hero：同一张图，遮罩更薄，铜色鲜明 ---- */ .hero{position:relative;min-height:88vh;display:flex;align-items:center;z-index:3} .hero .wrap{position:relative;z-index:3;padding:70px 38px} /* ---- 毛玻璃面板：背后有实景可模糊，frosted 才真正生效 ---- */ .hero-panel{background:rgba(255,255,255,.60);border:1px solid rgba(255,255,255,.85); box-shadow:0 24px 60px rgba(12,40,28,.22); backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25)} .hero-panel .vis{height:auto;min-height:0;background:none;padding:6px 4px 2px; border-radius:16px;display:block} .mini{flex:1;background:rgba(255,255,255,.55);border:1px solid rgba(45,77,66,.14); border-radius:16px;padding:15px} /* ============================================================ 修正：原深色主题遗留的硬编码底色 （明亮版只覆盖了 :root 变量，这几处写死的值没跟着变， 导致深色文字压在深色底上看不清） ============================================================ */ /* ---- 页头：顶部完全透明，滚动后浮出毛玻璃 ---- 透明是为了让铜管底图透上来；滚动后加底色是必要的， 否则下方产品卡、图片会从 header 底下穿过，文字叠在一起。 若想【永远透明】：删掉 header.scrolled / .tick.scrolled 两条规则即可。 */ header{background:transparent;border-bottom:1px solid transparent; -webkit-backdrop-filter:none;backdrop-filter:none; transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease} header.scrolled{background:rgba(248,244,238,.78);border-bottom-color:rgba(45,77,66,.16); -webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2)} /* 页头在透明状态下给文字加一点投影，压在照片上也清楚 */ header .brand,header .menu a,header .lang a{text-shadow:0 1px 2px rgba(248,244,238,.75)} header.scrolled .brand,header.scrolled .menu a,header.scrolled .lang a{text-shadow:none} footer{background:rgba(248,244,238,.72);border-top:1px solid rgba(45,77,66,.14); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .fbt{border-top:1px solid rgba(45,77,66,.14);color:var(--n500)} /* 产品图位：浅色底，铜管在浅底上更干净 */ .pim{background:linear-gradient(150deg,var(--n50),#e6dacb)} /* ---- 手机：iOS Safari 对 background-attachment:fixed 支持差，改为静态 ---- */ @media(max-width:900px){ .hero{min-height:auto;padding:24px 0 40px} #photobg{background-attachment:scroll} /* 手机单列，横向渐变没意义，改成上浅下深保证正文可读 */ #photoveil{background:linear-gradient(180deg, rgba(248,244,238,.90) 0%, rgba(248,244,238,.60) 30%, rgba(248,244,238,.88) 58%, rgba(248,244,238,.93) 100%)} } /* ============================================================ 联系我们 · 嵌入 Microsoft Forms ------------------------------------------------------------ iframe 是跨域的，站点 CSS 进不去，表单内部样式无法修改。 所以把它放进一张白色卡片里，让它读作"一块刻意嵌入的表单"， 而不是硬生生贴上去的异物。 ============================================================ */ .ctc .grid2{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start} .ctc .info .row{display:flex;gap:13px;margin-bottom:18px} .ctc .info .ic{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center; background:rgba(255,255,255,.6);border:1px solid rgba(45,77,66,.16);font-size:16px} .ctc .info .k{font-size:12px;color:var(--muted);letter-spacing:.04em} .ctc .info .v{font-weight:600;font-size:14.5px} /* Microsoft Forms 内嵌不会自动伸缩高度，需给足高度避免内部出现滚动条。 表单字段多就把 min-height 调大（下面 900px 适合 5-7 个字段）。 */ .formwrap.loaded iframe{opacity:1 !important} /* 兜底提示叠在 iframe 上方，加载成功后淡出 */ .formfall{position:absolute;inset:0;z-index:3;background:#fff;display:grid; place-content:center;text-align:center;padding:34px 28px;color:var(--muted);font-size:14px; transition:opacity .4s} .formwrap.loaded .formfall{opacity:0;pointer-events:none} /* 加载失败兜底（例如网络访问不到 Microsoft 服务时显示） */ .formfall{padding:34px 28px;text-align:center;color:var(--muted);font-size:14px} .formfall .ph2{font-family:'Syne','Segoe UI Variable Display','Segoe UI','Helvetica Neue',Helvetica,Arial,'PingFang SC','Microsoft YaHei',sans-serif; font-weight:800;font-size:26px;color:var(--ink);margin:10px 0 6px} @media(max-width:900px){ .ctc .grid2{grid-template-columns:1fr;gap:30px} } /* ============================================================ 集团相关企业（五大基地） ------------------------------------------------------------ 从 CCM 集团原型移植，按新太铜明亮版的设计语言重做： - 平白卡片 → 毛玻璃卡片（与全站一致，背后透出铜管底图） - 深蓝主色 → 铜色系 - 高亮卡片由 CCM HQ 改为【新太铜】（这是新太铜自己的站） - 修掉原型里国旗与长徽标重叠的问题（HELLAS / MÉXICO 那两张） ============================================================ */ .cmp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} .cmp{position:relative;border-radius:20px;padding:22px 20px 20px; background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.85); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); box-shadow:0 14px 40px rgba(12,40,28,.12); display:flex;flex-direction:column;transition:transform .35s ease,box-shadow .35s ease} .cmp:hover{transform:translateY(-6px);box-shadow:0 26px 58px rgba(12,40,28,.2)} /* 顶部：徽标 + 国旗，flex 分列，徽标可换行，不再重叠 */ .cmp-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:16px} .cmp-badge{font-family:'Syne','Segoe UI Variable Display','Segoe UI','Helvetica Neue',Helvetica,Arial,'PingFang SC','Microsoft YaHei',sans-serif;font-weight:800; font-size:11.5px;letter-spacing:.1em;padding:6px 11px;border-radius:8px; background:rgba(0,128,64,.14);color:var(--g500);white-space:nowrap} .cmp-flag{font-size:19px;line-height:1;flex:none} .cmp-new{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.12em; padding:3px 7px;border-radius:5px;background:rgba(21,143,120,.16);color:#0f6b59; margin-top:6px} .cmp h3{font-family:'Syne','Segoe UI Variable Display','Segoe UI','Helvetica Neue',Helvetica,Arial,'PingFang SC','Microsoft YaHei',sans-serif;font-weight:800; font-size:16.5px;line-height:1.35;margin-bottom:8px;letter-spacing:-.01em} .cmp .loc{font-size:11.5px;color:var(--muted);margin-bottom:12px} .cmp .desc{font-size:12.5px;line-height:1.75;color:var(--muted);flex:1} .cmp-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px; margin-top:18px;padding-top:16px;border-top:1px solid rgba(45,77,66,.14)} .cmp-meta .n{font-family:'Syne','Segoe UI Variable Display','Segoe UI','Helvetica Neue',Helvetica,Arial,'PingFang SC','Microsoft YaHei',sans-serif; font-weight:800;font-size:15.5px;line-height:1.2} .cmp-meta .l{font-size:10.5px;color:var(--muted);margin-top:3px} .cmp .more{display:inline-block;margin-top:16px;font-size:12.5px;font-weight:600; color:var(--g500);transition:transform .25s} .cmp:hover .more{transform:translateX(4px)} /* 本站主体：新太铜高亮（原型里高亮的是 CCM HQ） */ @media(max-width:1180px){.cmp-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:860px){.cmp-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.cmp-grid{grid-template-columns:1fr}} /* ============================================================ Hero 面板 · 集团据点动态地图 内联 SVG，零外部依赖（不调地图服务、不加载图片）， 内网/断外网/国内网络都能正常显示。 动效：陆地流光、沿线飞行光点、错开节奏的双环脉冲、悬停高亮。 ============================================================ */ .hero-panel .vis{height:auto;min-height:0;background:none;padding:6px 4px 2px; border-radius:16px;display:block} .worldmap{width:100%;height:auto;display:block;overflow:visible} /* 陆地：铜色渐变 + 渐变本身缓慢横移形成流光 */ .worldmap .land{fill:url(#landg)} /* 据点连线 */ .worldmap .arcline{fill:none;stroke:rgba(0,128,64,.42);stroke-width:1.1; stroke-dasharray:3 5;stroke-linecap:round;animation:mapflow 20s linear infinite} @keyframes mapflow{to{stroke-dashoffset:-160}} /* 沿线飞行的光点 */ .worldmap .flow{fill:var(--g400);opacity:0; filter:drop-shadow(0 0 3px rgba(0,128,64,.9))} /* 据点标记 */ .worldmap .mk-halo{fill:url(#halog)} .worldmap .mk-main{fill:var(--g600);stroke:#fff;stroke-width:1.9} .worldmap .mk-dot{fill:var(--g400);stroke:#fff;stroke-width:1.7} .worldmap .mk-pulse{fill:none;stroke:rgba(0,128,64,.75);stroke-width:1.4; transform-box:fill-box;transform-origin:center; animation:mappulse 3.4s cubic-bezier(.2,.7,.3,1) infinite} .worldmap .mk-pulse2{stroke:rgba(0,128,64,.4)} @keyframes mappulse{ 0%{transform:scale(.5);opacity:0} 18%{opacity:.95} 100%{transform:scale(2.6);opacity:0}} /* 标签 */ .worldmap .lb{font-family:'Syne','Segoe UI Variable Display','Segoe UI','Helvetica Neue',Helvetica,Arial,'PingFang SC','Microsoft YaHei',sans-serif; font-size:12.5px;font-weight:800;fill:#2a1b12} .worldmap .lb2{font-family:'PingFang SC','Microsoft YaHei',sans-serif; font-size:9.5px;fill:#73665b;letter-spacing:.04em} /* 悬停高亮：整组放大、标签变铜色 */ .worldmap .site{cursor:default;transform-box:fill-box;transform-origin:center; transition:transform .3s cubic-bezier(.2,.7,.3,1)} .worldmap .site:hover{transform:scale(1.14)} .worldmap .site:hover .lb{fill:var(--g500)} .worldmap .site:hover .mk-dot{fill:var(--g400)} @keyframes mapblink{0%,100%{opacity:1}50%{opacity:.25}} /* 尊重系统「减弱动态效果」设置 */ @media(prefers-reduced-motion:reduce){ .worldmap .arcline,.worldmap .mk-pulse, .worldmap .flow{display:none} .worldmap .site{transition:none} } /* ============================================================ 正文可读性 遮罩右端原为 0（全露原色），正文压在浓铜色上对比度只有 3.6:1。 这里给【正文区】加一层极薄的可读性底：不是加深遮罩， 而是只在文字块背后垫一层，铜管本身的浓度不受影响。 ============================================================ */ .shd p,.ab p,.ab .lead,.ctc .info,.cmp .desc{ text-shadow:0 1px 3px rgba(248,244,238,.9),0 0 12px rgba(248,244,238,.75)} .ab p,.ab .lead{max-width:60ch} /* ============================================================ 手机端适配 原版小屏是把导航直接 display:none，等于手机上没有任何导航。 这里补上汉堡按钮 + 抽屉菜单。 ============================================================ */ .burger{display:none;flex-direction:column;justify-content:center;gap:5px; width:40px;height:40px;padding:9px;background:rgba(255,255,255,.6); border:1px solid rgba(45,77,66,.18);border-radius:11px;cursor:pointer; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .burger span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px; transition:transform .3s ease,opacity .2s ease} .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.open span:nth-child(2){opacity:0} .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:900px){ .burger{display:flex} header .nav{height:64px} /* 抽屉菜单 */ .menu{display:flex !important;position:fixed;top:64px;left:0;right:0; flex-direction:column;gap:0;padding:8px 22px 20px; background:rgba(248,244,238,.97); -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px); border-bottom:1px solid rgba(45,77,66,.16); box-shadow:0 20px 40px rgba(12,40,28,.14); transform:translateY(-130%);transition:transform .35s cubic-bezier(.2,.7,.3,1); z-index:120;max-height:calc(100vh - 64px);overflow-y:auto} .menu.open{transform:translateY(0)} .menu a{padding:14px 2px;font-size:16px;border-bottom:1px solid rgba(45,77,66,.10)} .menu a:last-child{border-bottom:none} /* logo 收窄，给汉堡让位 */ /* Hero 单列 */ .hero .grid{grid-template-columns:1fr;gap:28px} .hero h1{font-size:clamp(30px,8.6vw,44px)} .hero p{font-size:15px} .hero-panel{padding:16px} .hero-panel .row{flex-wrap:wrap} .mini{min-width:calc(33.333% - 8px)} .mini .n{font-size:21px} .mini .l{font-size:10.5px} /* 地图：小屏标签会挤，缩小并留边 */ .worldmap{overflow:visible} .worldmap .lb{font-size:15px} .worldmap .lb2{font-size:11.5px} /* 区块间距收紧 */ section{padding:56px 0} .wrap{padding:0 20px} .shd h2{font-size:clamp(24px,6.6vw,32px)} /* 集团卡片 */ .cmp{padding:20px 18px} .cmp h3{font-size:15.5px} /* 联系区表单 */ } @media(max-width:480px){ /* 极窄屏只留手写体 logo */ .hero-panel .row{gap:8px} .mini{min-width:calc(50% - 6px)} .worldmap .lb{font-size:17px} .worldmap .lb2{font-size:13px} .cmp-grid{gap:12px} } /* ============================================================ 关于区：公司位置地图容器 ============================================================ */ .abstack{border-radius:22px;padding:14px;overflow:hidden} .abmap{margin-top:0} .mapcap{display:flex;justify-content:space-between;align-items:center;gap:10px; padding:8px 4px 0;font-size:10.5px;color:var(--muted);letter-spacing:.04em} .mapcap b{color:var(--g500);font-weight:700} .mapcap .gp{opacity:.7} .mapcap .live{display:inline-block;width:6px;height:6px;border-radius:50%; background:#158f78;margin-right:6px;animation:mapblink 2s ease-in-out infinite} @media(max-width:900px){ .abstack{padding:11px} .mapcap{font-size:9.5px} } .vis-cap{display:flex;justify-content:space-between;align-items:center;gap:10px; padding:10px 8px 2px;font-size:10.5px;color:var(--muted);letter-spacing:.04em} .vis-cap b{color:var(--g500);font-weight:700} .vis-cap .gp{opacity:.7} .vis-cap .live{display:inline-block;width:6px;height:6px;border-radius:50%; background:#158f78;margin-right:6px;animation:mapblink 2s ease-in-out infinite} /* ============================================================ 关于区：公司位置地图（门店定位） ------------------------------------------------------------ ⚠️ 坐标请换成精确值：打开 https://lbs.amap.com/tools/picker 搜「太仓 人民北路175号」，复制经纬度，替换下面 iframe src 里的 bbox 与 marker 两处数字（当前是太仓开发区的近似坐标，仅供预览）。 以高德地图为主：Google 地图在大陆无法访问，国内客户会看到空白。 高德嵌入需绑定域名/Key，请自行用生成器产出后替换 iframe。 在替换前用 OpenStreetMap 顶着（无需 Key、国内可访问）。 底部三个按钮用「按名称搜索」深链，不依赖坐标，永远准确。 ============================================================ */ .geowrap{position:relative;border-radius:14px;overflow:hidden;background:var(--n100); aspect-ratio:16/9;border:1px solid rgba(45,77,66,.12)} .geowrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2} .geofall{position:absolute;inset:0;z-index:3;display:grid;place-content:center; text-align:center;padding:20px;background:var(--n50);transition:opacity .4s} .geowrap.loaded .geofall{opacity:0;pointer-events:none} .geowrap.loaded iframe{opacity:1 !important} .geofall .gt{font-family:'Syne','Segoe UI Variable Display','Segoe UI','Helvetica Neue',Helvetica,Arial,'PingFang SC','Microsoft YaHei',sans-serif; font-weight:800;font-size:17px;color:var(--ink);margin-bottom:6px} .geofall p{font-size:12.5px;color:var(--muted)} .geobar{display:flex;justify-content:space-between;align-items:flex-end;gap:14px; flex-wrap:wrap;padding:12px 4px 0} .geobar .addr b{display:block;font-size:13.5px;font-weight:700;color:var(--ink)} .geobar .addr span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px} .geobar .navbtns{display:flex;gap:7px} .geobar .nb{font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:99px; color:var(--g500);background:rgba(0,128,64,.13);border:1px solid rgba(0,128,64,.26); transition:.25s;white-space:nowrap} .geobar .nb:hover{background:var(--g500);color:#fff;border-color:var(--g500)} /* 高德为主，按钮高亮 */ .geobar .nb-pri{background:var(--g500);color:#fff;border-color:var(--g500)} .geobar .nb-pri:hover{background:var(--g500);border-color:var(--g500)} @media(max-width:900px){ .geowrap{aspect-ratio:4/3} .geobar{padding-top:10px} .geobar .navbtns{width:100%} .geobar .nb{flex:1;text-align:center} } /* ============================================================ 页脚（重构） 原本右侧三列（关于我们/应用领域/产品介绍）都是没有 href 的死链， 点了没反应，故移除。改为把真实联系信息横向铺开填满整行， 电话与邮箱做成可点击（手机上直接拨号 / 唤起邮件）。 电话字号从 26px 降到常规大小，并补上国际区码 +86。 ============================================================ */ .fhead{display:flex;align-items:baseline;justify-content:space-between;gap:20px; flex-wrap:wrap;padding-bottom:26px;margin-bottom:26px; border-bottom:1px solid rgba(45,77,66,.16)} .ftag{font-size:11.5px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase} .fitems{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px 30px} .fi{display:flex;flex-direction:column;gap:6px;min-width:0} .fi.wide{grid-column:span 2} .fi .k{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .fi .v{font-size:14.5px;font-weight:600;color:var(--ink);word-break:break-word; transition:color .25s} .fi a.v:hover{color:var(--g500)} @media(max-width:900px){ .fhead{padding-bottom:20px;margin-bottom:20px} .fitems{grid-template-columns:1fr 1fr;gap:18px 20px} .fi.wide{grid-column:span 2} .fi .v{font-size:13.5px} } @media(max-width:480px){ .fitems{grid-template-columns:1fr} .fi.wide{grid-column:span 1} } /* ============================================================ 横向溢出根治 + 电话展示统一 ------------------------------------------------------------ 手机上出现左右滑动的三个真实原因： 1) 大号电话 + white-space:nowrap，宽度超过屏宽无法折行 2) 世界地图 SVG 用了 overflow:visible，标签溢出父容器 3) grid / flex 子项默认 min-width:auto，长串（邮箱、网址） 会把整格顶宽，把相邻格挤出屏幕（页脚电话压住传真就是这个） ============================================================ */ html,body{max-width:100%;overflow-x:hidden} *,*::before,*::after{min-width:0} /* 所有网格/弹性子项允许收缩，长串一律可断行 */ .fitems,.cmp-grid,.pg,.ag,.ab,.ctc .grid2,.geobar,.hero .grid{min-width:0} .fi,.cmp,.pc,.ac,.st,.mini{min-width:0} .fi .v,.geobar .addr span,.ctc .info .v{overflow-wrap:anywhere;word-break:break-word} /* 电话：允许在连字符处折行，不再 nowrap；用 tabular-nums 保证数字等宽好读 */ /* 页脚网格：格子加宽到 210px，长串不会再把邻格挤走 */ .fitems{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:22px 28px} /* 世界地图：改为在容器内裁切，标签留出内边距不被切到 */ .worldmap{width:100%;height:auto;display:block;overflow:hidden} .worldwrap{overflow:hidden} /* logo 与徽标在极窄屏允许缩，不再强撑 */ @media(max-width:420px){ .cmp-badge{white-space:normal} } /* ============================================================ 手机端：确保单列、无横滑 ============================================================ */ @media(max-width:900px){ .fitems{grid-template-columns:1fr 1fr;gap:16px 18px} .fi.wide{grid-column:span 2} .fi .v{font-size:13.5px} .fhead{flex-direction:column;align-items:flex-start;gap:10px} .ftag{font-size:10.5px} .ctc .grid2{grid-template-columns:1fr;gap:26px} .geobar{flex-direction:column;align-items:stretch} .geobar .navbtns{width:100%} .worldmap .lb{font-size:16px} .worldmap .lb2{font-size:12px} } @media(max-width:560px){ .fitems{grid-template-columns:1fr;gap:15px} .fi.wide{grid-column:span 1} .wrap{padding:0 18px} } /* ============================================================ 手机端补强 ------------------------------------------------------------ ① 关于区强制单列：地图卡与正文并排时每列只剩约 180px， 正文每行挤到 8 个字、地图标注糊成一团。 ② 顶部行情条在窄屏会折行压住 logo，改为横向可滑单行。 ③ 统计数字四位年份易被裁切，收紧字号并允许缩放。 ============================================================ */ @media(max-width:900px){ /* 关于区：正文在上、地图在下，各占满整宽 */ .ab{grid-template-columns:1fr !important;gap:26px} .abstack{padding:12px} .geowrap{aspect-ratio:16/10} .geobar .addr b{font-size:14px} .geobar .addr span{font-size:12px} /* 顶部行情条：单行横向可滑，不再折行压住 logo */ /* 统计数字：防裁切 */ .st{padding:22px 18px} } @media(max-width:480px){ .geowrap{aspect-ratio:4/3} } /* ============================================================ 电话展示（联系区 + 页脚） ------------------------------------------------------------ 原本把「0512-53573001-2025」当成一整串显示，18 个字符在窄容器里 会从连字符处断行，断成「0512-53573001-」/「2025」甚至三行，很难看。 改为主号与分机分离：主号 13 字符锁定不折行，分机作为小标签跟在后面。 同时去掉主号上的渐变文字（gcu）——渐变在铜管照片上会显得发虚。 ============================================================ */ .fi .v.tel{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px; text-decoration:none} .fi .v.tel .num{font-family:'Syne','Segoe UI Variable Display','Segoe UI','Helvetica Neue',Helvetica,Arial,'PingFang SC','Microsoft YaHei',sans-serif; font-weight:800;font-size:17px;line-height:1.3;color:var(--ink); letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap;transition:color .25s} .fi .v.tel:hover .num{color:var(--g500)} .fi .v.tel .ext{font-size:11px;font-weight:600;color:var(--muted); background:rgba(0,128,64,.11);border:1px solid rgba(0,128,64,.22); padding:2px 7px;border-radius:99px;white-space:nowrap;transform:translateY(-1px)} @media(max-width:900px){ .fi .v.tel .num{font-size:16px} } @media(max-width:380px){ .fi .v.tel .num{font-size:15px} } /* ============================================================ 嵌入表单高度 ------------------------------------------------------------ Microsoft Forms 会在表单底部附加一段隐私声明（Microsoft 365 徽标 + 数据使用说明），约占 200px。原先把 iframe 设成 900px 是为了把 那段也完整显示出来，结果整块过高、页面被拉长。 现改为给一个合适高度，超出部分在 iframe 内部滚动 —— 声明仍可 通过表单内滚动看到（不做裁切隐藏，那属于遮蔽第三方隐私告知）。 要调整高度只改 --formh 一个值。 ============================================================ */ .formcard{--formh:560px; background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9); border-radius:26px;padding:16px;box-shadow:0 24px 60px rgba(12,40,28,.18); -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)} .formcard .bar{display:flex;justify-content:space-between;align-items:center;gap:10px; flex-wrap:wrap;padding:6px 10px 12px;font-size:12px;color:var(--muted);letter-spacing:.04em} .formcard .bar b{color:var(--ink);font-weight:600} .formcard .bar .open{font-size:11.5px;font-weight:600;color:var(--g500); background:rgba(0,128,64,.13);border:1px solid rgba(0,128,64,.24); padding:4px 11px;border-radius:99px;transition:.25s;white-space:nowrap} .formcard .bar .open:hover{background:var(--g500);color:#fff;border-color:var(--g500)} .formwrap{position:relative;background:#fff;border-radius:16px;overflow:hidden; border:1px solid rgba(45,77,66,.10);height:var(--formh)} .formwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0; display:block;z-index:2} @media(max-width:900px){ .formcard{--formh:620px;padding:12px} } @media(max-width:480px){ .formcard{--formh:660px} } /* ============================================================ 统计数字防截断 ------------------------------------------------------------ 「2003」被切掉的两个叠加原因： 1) .glass 同时用了 backdrop-filter 与 border-radius，这个组合会 创建裁切上下文，超出圆角框的内容会被切掉，overflow:visible 也挡不住。 2) 标题字体 Syne 从 Google Fonts 加载，比系统回退字体宽得多； 用固定 vw 字号时，字体一旦真正加载就可能撑破容器。 解决思路：不再赌字宽。改为 · 用 cqi（容器宽度单位）让字号随卡片宽度缩放，而非随视口 · 数字容器允许收缩，并用 max-width 兜底 · 万一仍超宽，宁可缩放也不裁切 ============================================================ */ .sg .st,.hero-panel .row .mini{container-type:inline-size} .st .n,.mini .n{ font-family:'Syne','Segoe UI Variable Display','Segoe UI','Helvetica Neue',Helvetica,Arial,'PingFang SC','Microsoft YaHei',sans-serif; font-weight:800;line-height:1.1;letter-spacing:-.02em; font-variant-numeric:tabular-nums; max-width:100%;white-space:nowrap; /* 随卡片宽度缩放：4 个字符的年份在任何卡宽下都留有余量 */ font-size:clamp(20px,26cqi,56px)} .mini .n{font-size:clamp(17px,24cqi,30px)} /* 不支持容器查询的旧浏览器：退回按视口缩放，取值更保守 */ @supports not (container-type: inline-size){ .st .n{font-size:clamp(20px,4.4vw,52px)} .mini .n{font-size:clamp(16px,3vw,26px)} } @media(max-width:900px){ .st{padding:22px 16px} .st .n{font-size:clamp(19px,24cqi,34px)} .mini .n{font-size:clamp(15px,22cqi,24px)} } /* 极窄屏：统计卡改单列，卡片宽度翻倍，四位年份余量充足 */ @media(max-width:420px){ .sg{grid-template-columns:1fr} .st{padding:20px 18px} .st .n{font-size:clamp(22px,16cqi,32px)} .hero-panel .row{flex-wrap:wrap;gap:8px} /* 三个并排在 320px 只剩 35px 可用宽，改为每行两个 */ .mini{flex:1 1 calc(50% - 4px);min-width:calc(50% - 4px)} } /* ============================================================ ② 联系区电话：分机另起一行 ============================================================ */ /* ============================================================ ① 页脚电话：与相邻条目同字号，不再放大 ------------------------------------------------------------ 原本用 Syne 800 / 17px 做强调，比旁边的传真、邮箱（14.5px）明显大一号， 同一行四个条目视觉不齐。改为与相邻条目完全一致的字体和字号。 ============================================================ */ .fi .v.tel{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 8px} .fi .v.tel .num{font-family:inherit;font-weight:600;font-size:14.5px; line-height:1.5;color:var(--ink);letter-spacing:0; font-variant-numeric:tabular-nums;white-space:nowrap} .fi .v.tel .ext{font-size:11px;font-weight:600;transform:none} /* 手机端邻项降到 13.5px，电话跟着降，保持齐平 */ @media(max-width:900px){ .fi .v.tel .num{font-size:13.5px} } /* ============================================================ ② 手机端统计卡：四张各占一整行太空旷 ------------------------------------------------------------ 原来 ≤420px 改单列后，四张卡片各占一整行、每张还很高， 要滑好几屏才过完，中间大片留白。 改为两列紧凑排布，卡片压扁、数字与文案左对齐。 ============================================================ */ @media(max-width:900px){ .sg{grid-template-columns:1fr 1fr;gap:12px} .st{padding:18px 16px} .st .l{font-size:12px;margin-top:2px;line-height:1.4} } @media(max-width:420px){ /* 极窄屏仍保持两列（原先退回单列，反而更空） */ .sg{grid-template-columns:1fr 1fr;gap:10px} .st{padding:15px 13px;border-radius:18px} .st .n{font-size:clamp(20px,20cqi,28px)} .st .l{font-size:11px} } /* ============================================================ 版面美化：产品卡 / 应用卡 / 集团卡 ============================================================ */ /* ---------- ① 产品卡：管型示意图 ---------- */ .pim{position:relative;display:grid;place-items:center;overflow:hidden; height:auto;aspect-ratio:16/9; background:linear-gradient(150deg,var(--n0),var(--n100)); border-radius:16px;margin:12px 12px 0} .tubesvg{width:88%;height:auto;display:block; filter:drop-shadow(0 8px 18px rgba(120,60,22,.22)); transition:transform .5s cubic-bezier(.2,.7,.3,1)} .pc:hover .tubesvg{transform:scale(1.05) rotate(-1.5deg)} .pim .tg{position:absolute;top:10px;left:11px;z-index:2;font-size:10.5px;font-weight:600; color:var(--g500);background:rgba(255,255,255,.86);border:1px solid rgba(0,128,64,.22); padding:3px 9px;border-radius:99px;letter-spacing:.02em} .pb{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 18px 16px} .pb h3{font-size:16.5px;font-weight:700;letter-spacing:-.01em} .pb .ar{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center; font-size:13px;color:var(--g500);background:rgba(0,128,64,.12); border:1px solid rgba(0,128,64,.22);transition:.25s} .pc:hover .pb .ar{background:var(--g500);color:#fff;border-color:var(--g500)} /* ---------- ② 应用卡：巨型编号收小，内容上移 ---------- */ .ac{position:relative;overflow:hidden;border-radius:22px;height:auto; min-height:0;padding:24px 22px 22px;display:flex;flex-direction:column;justify-content:flex-end} .ac .bg{position:absolute;top:10px;right:16px;z-index:1; font-family:'Syne','Segoe UI Variable Display','Segoe UI','Helvetica Neue',Helvetica,Arial,'PingFang SC','Microsoft YaHei',sans-serif;font-weight:800; font-size:52px;line-height:1;color:rgba(154,79,34,.13);letter-spacing:-.04em} .ac .ct{position:relative;z-index:2} .ac .ct .kick{margin-bottom:9px} .ac h3{font-size:20px;font-weight:800;letter-spacing:-.01em;margin-bottom:7px} .ac p{font-size:13.5px;line-height:1.7;color:var(--muted)} /* ---------- ③ 集团卡：紧凑化，国旗与徽标同行 ---------- */ .cmp{padding:20px 18px} .cmp-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px} .cmp-top .lft{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0} .cmp-flag{font-size:17px;line-height:1;flex:none} .cmp-new{margin-top:0;font-size:9px;padding:2px 6px} .cmp h3{font-size:15.5px;line-height:1.4;margin-bottom:6px} .cmp .loc{font-size:11px;margin-bottom:10px} .cmp .desc{font-size:12.5px;line-height:1.7} .cmp-meta{margin-top:14px;padding-top:12px;gap:8px} .cmp-meta .n{font-size:14.5px} .cmp-meta .l{font-size:10px;margin-top:2px} .cmp .more{margin-top:13px;font-size:12px} /* ---------- 手机端：三块统一收紧 ---------- */ @media(max-width:900px){ /* 产品：两列并排，不再一列一张占满 */ .pg{grid-template-columns:1fr 1fr !important;gap:12px} .pim{margin:9px 9px 0;border-radius:12px} .pb{padding:11px 12px 13px} .pb h3{font-size:14px} .pb .ar{width:25px;height:25px;font-size:11px} .pim .tg{font-size:9.5px;padding:2px 7px;top:8px;left:8px} /* 应用：卡片压扁，编号再收小 */ .ag{gap:12px} .ac{padding:18px 16px 16px;border-radius:18px} .ac .bg{font-size:38px;top:8px;right:12px} .ac h3{font-size:17.5px} .ac p{font-size:12.5px} /* 集团：改两列，5 张排成 3 行；末张跨列避免孤立 */ .cmp-grid{grid-template-columns:1fr 1fr !important;gap:10px} .cmp-grid>.cmp:last-child{grid-column:span 2} .cmp{padding:16px 15px;border-radius:16px} .cmp h3{font-size:14.5px} .cmp .desc{font-size:12px;line-height:1.65} .cmp-meta{margin-top:12px;padding-top:10px} } @media(max-width:420px){ .pg{gap:10px} .pb h3{font-size:13px} .ac .bg{font-size:32px} } /* 产品卡上传真实照片后，铺满原本放管型示意图的位置 */ .pim .pphoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; transition:transform .5s cubic-bezier(.2,.7,.3,1)} .pc:hover .pim .pphoto{transform:scale(1.05)} header.scrolled @media(max-width:900px){ } /* ============================================================ Hero 标题防裁切 ------------------------------------------------------------ 原来 line-height:.96 配上最大 110px 字号：中文字形的实际高度 超过行盒，上下都会被切掉（英文没事是因为字形矮）。 改为按语言给不同行高，并留出足够的行盒空间。 ============================================================ */ .hero h1{font-size:clamp(40px,6.6vw,92px);line-height:1.04; margin-bottom:22px;padding-bottom:.06em;overflow:visible} .hero h1 .blur{display:block;line-height:1.04;padding-bottom:.02em} /* 英文单词长，缩一档避免逐字母折行 */ html[lang="en"] .hero h1{font-size:clamp(28px,3.2vw,46px);line-height:1.06;letter-spacing:-.02em} html[lang="en"] .hero h1 .blur{overflow-wrap:normal;word-break:keep-all;hyphens:none} /* ============================================================ 联系区：电话与邮箱/传真/地址统一样式 ------------------------------------------------------------ 原来电话用 Syne 800 / 30px 单独放大，跟下面几项完全不是一个体系。 现在统一成同样的「小标签 + 值」结构。 ============================================================ */ @media(max-width:900px){ .hero h1{font-size:clamp(30px,8.2vw,46px);line-height:1.1} html[lang="en"] .hero h1{font-size:clamp(26px,7.4vw,40px)} } /* 英文标题：单词内不断行（JS 会把标题拆成逐字 span， inline-block 默认可在任意 span 间换行，会把单词劈开） */ html[lang="en"] .hero h1 .blur{white-space:nowrap} @media(max-width:900px){ html[lang="en"] .hero h1{font-size:clamp(22px,5.6vw,34px)} } @media(max-width:520px){ html[lang="en"] .hero h1{font-size:clamp(19px,6.4vw,26px)} } /* 英文标题在宽屏仍会折行：JS 拆出的 span 是 inline-block， 会被 Hero 左栏宽度挤断。给标题单独放开宽度限制。 */ html[lang="en"] .hero h1{max-width:none;width:max-content;max-width:100%} html[lang="en"] .hero h1 .blur{white-space:nowrap;display:block;width:max-content;max-width:100%} @media(max-width:1180px){ html[lang="en"] .hero h1{font-size:clamp(26px,4vw,46px)} } /* 联系区电话：与邮箱/传真/地址同一套结构与字号 */ .ctc .info .v .phlink{color:inherit;text-decoration:none;transition:color .22s} .ctc .info .v .phlink:hover{color:var(--g500)} .ctc .info .v .ext{display:inline-block;margin-left:9px;font-size:11px;font-weight:600; color:var(--muted);background:rgba(0,128,64,.11); border:1px solid rgba(0,128,64,.22);padding:2px 8px;border-radius:99px; vertical-align:1px;white-space:nowrap} /* ============================================================ 西文标题兜底 ------------------------------------------------------------ Syne 加载不到时，原本的字体栈会直接掉到中文黑体（苹方/雅黑）。 中文字体的西文字形又粗又方，渲染 "Global Network" 这种标题很难看。 现在在中文字体【之前】插入 Segoe UI / Helvetica 等系统西文字体， 让西文用西文字体、汉字才落到中文字体。 另外中文黑体没有 800 字重，浏览器会合成"假粗体"（描边加粗）， 这是发糊的主因。@supports 检测不到 Syne 时把字重降到 700。 ============================================================ */ html[lang="en"] .shd h2, html[lang="en"] .cmp h3, html[lang="en"] .hero h1, html[lang="en"] .st .n, html[lang="en"] .mini .n{ font-weight:700; letter-spacing:-.015em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility} /* 英文卡片标题：行高放宽，避免长公司名挤成一坨 */ html[lang="en"] .cmp h3{font-size:15px;line-height:1.5;letter-spacing:-.005em} html[lang="en"] .cmp-badge{font-weight:700;letter-spacing:.06em} html[lang="en"] .kick{font-weight:600;letter-spacing:.14em} /* ============================================================ 语言切换开关（行情条最右端） ------------------------------------------------------------ 做成实体开关的样子：胶囊底 + 滑块，当前语言由滑块位置指示， 一眼能看出「现在是哪个语言、点另一边会切过去」。 ============================================================ */ /* 滑块：绝对定位，靠 :has 判断当前语言决定位置 */ @media(max-width:900px){ } /* 行情条：数值区可横向滚动，语言开关固定在最右不参与滚动 */ @media(max-width:900px){ /* 窄屏：数值区单独滚动，开关始终可见 */ } /* ============================================================ 高德静态地图预览 ------------------------------------------------------------ 原来用 OpenStreetMap 的 iframe，要加载整个网页（HTML+JS+瓦片）， 国内访问慢且卡。改成高德静态图 API：一次请求返回一张 png， 就是个 ，秒开。点击跳转到高德网页版看详细地图。 ============================================================ */ .geoimg{position:relative;display:block;width:100%;height:100%;overflow:hidden; border-radius:inherit;background:var(--n100)} .geoimg img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .5s cubic-bezier(.2,.7,.3,1)} .geoimg:hover img{transform:scale(1.03)} .geoimg .geozoom,.geosvg .geozoom{position:absolute;right:10px;bottom:10px;z-index:2; font-size:11.5px;font-weight:600;color:var(--g500); background:rgba(255,255,255,.9);border:1px solid rgba(0,128,64,.28); padding:5px 11px;border-radius:99px; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); opacity:0;transform:translateY(4px);transition:.28s} .geoimg:hover .geozoom,.geosvg:hover .geozoom{opacity:1;transform:none} @media(hover:none){.geoimg .geozoom,.geosvg .geozoom{opacity:1;transform:none}} /* ============================================================ 字体观感调整 ------------------------------------------------------------ 问题根源：标题统一用了 font-weight:800，但苹方 / 微软雅黑 都没有 800 这一档，浏览器只能"合成假粗体"（沿笔画外扩描粗）。 中文笔画本来就密，一描粗就糊成黑块 —— 这就是标题显得突兀的原因。 西文字体（Syne / Segoe UI）有真正的 800，所以英文没这么明显。 解决：中文降到 700（苹方与雅黑都有真正的 Bold 字面）， 西文保留较重字重，两边各取所需。 ============================================================ */ /* ---------- ① 中文标题：用真 Bold，不再合成假粗体 ---------- */ html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3, html[lang="zh-CN"] .syne{font-weight:700;letter-spacing:-.01em} html[lang="zh-CN"] .hero h1{font-weight:700;letter-spacing:-.015em;line-height:1.15} html[lang="zh-CN"] .hero h1 .blur{line-height:1.15;padding-bottom:0} /* 两行之间原来空得过大 */ html[lang="zh-CN"] .hero h1 .blur+.blur{margin-top:-.06em} /* ---------- ② 行情条数字：不用 Syne ---------- */ /* Syne 的数字是几何风格、带斜切，做小字号行情数据显得跳。 换回正文字体并启用等宽数字，价格变动时不会左右抖动。 */ /* ---------- ③ 英文首屏：行距收紧 ---------- */ html[lang="en"] .hero h1{line-height:1.12;letter-spacing:-.02em} html[lang="en"] .hero h1 .blur{line-height:1.12} html[lang="en"] .hero h1 .blur+.blur{margin-top:-.04em} /* ---------- ④ 集团卡标题：字重收敛、各卡对齐 ---------- */ /* 公司名长短不一（2~3 行），导致下方地点行错位。 给标题一个最小高度，五张卡的地点、简介、指标就能横向对齐。 */ .cmp h3{font-weight:700;font-size:17.5px;line-height:1.45;letter-spacing:0; /* 锁两行高度，五张卡的地点/简介/指标才能横向对齐。 用 em 而非 px：em 跟着上一行的 font-size 走， 以后只改 font-size 一个数，不必再同步 calc 里的字号。 */ min-height:calc(2 * 1.45em)} html[lang="en"] .cmp h3{font-weight:700;font-size:17px;line-height:1.45; min-height:calc(3 * 1.45em)} /* 英文名较长，锁三行 */ .cmp .loc{font-size:13px;margin-bottom:10px;font-weight:500} @media(max-width:900px){ .cmp h3,html[lang="en"] .cmp h3{min-height:0} html[lang="zh-CN"] .hero h1{line-height:1.18} } /* ---------- 修正：NEW 标签把卡片内容推下去 ---------- */ /* 带 NEW 的两张卡顶栏 58px、其余 31px，整卡内容错位 27px。 把 NEW 改成绝对定位的角标，不占据文档流，五张卡就能对齐。 */ .cmp-top{min-height:31px;position:relative} .cmp-top .lft{position:relative} .cmp-new{position:absolute;top:-9px;right:-8px;margin:0; font-size:8.5px;font-weight:800;letter-spacing:.1em;padding:2px 6px; border-radius:99px;background:#158f78;color:#fff; box-shadow:0 2px 6px rgba(21,143,120,.35)} /* ---------- 修正：首屏两行标题间距 ---------- */ /* .blur 是 block，margin 折叠导致负 margin 未生效； 改为直接压缩行高，两行贴合更自然。 */ html[lang="zh-CN"] .hero h1{line-height:1.16} html[lang="zh-CN"] .hero h1 .blur{line-height:1.16;display:block} html[lang="en"] .hero h1{line-height:1.18} html[lang="en"] .hero h1 .blur{line-height:1.18;display:block} /* ---------- 首屏标题行盒压缩 ---------- */ /* JS 把标题拆成逐字 （inline-block），每个 span 自带行高， 把父行盒撑到近 1 个字高，两行之间就空出一大截。 给 span 压行高，并用 vertical-align:top 消除基线间隙。 */ .hero h1 .blur span{line-height:1;vertical-align:top} html[lang="zh-CN"] .hero h1 .blur span{line-height:1.02} html[lang="en"] .hero h1 .blur span{line-height:1.04} /* ============================================================ 示意地图（未配置高德 Key 时） ------------------------------------------------------------ 按厂区周边真实路网绘制的内联 SVG：零外部请求、无 iframe， 随页面一起渲染，不会像 OpenStreetMap 那样超时拖慢整站。 后台填入 map_amap_key 后自动换成高德实景地图。 ============================================================ */ .geosvg{position:relative;display:block;width:100%;height:100%;overflow:hidden; border-radius:inherit;background:var(--n25)} .geosvg .mapsvg{width:100%;height:100%;display:block;object-fit:cover} .geosvg::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(45,77,66,.07) 100%)} .geosvg:hover .mapsvg{transform:scale(1.02);transition:transform .5s cubic-bezier(.2,.7,.3,1)} .geosvg .mapsvg{transition:transform .5s cubic-bezier(.2,.7,.3,1)} /* ============================================================ 页头语言切换（导航与「获取报价」之间） ------------------------------------------------------------ 原来放在顶部行情条右端，行情条移除后挪进页头。 做成实体开关：胶囊底 + 滑块，当前语言由滑块位置指示。 ============================================================ */ .nav .navlang{position:relative;display:inline-flex;align-items:center;flex:none; padding:3px;margin:0 4px 0 10px;border-radius:99px; background:rgba(255,255,255,.55);border:1px solid rgba(45,77,66,.16); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .nav .navlang .knob{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px); border-radius:99px;background:var(--g500);box-shadow:0 2px 6px rgba(0,128,64,.32); transition:transform .28s cubic-bezier(.4,0,.2,1);z-index:0} .nav .navlang.is-en .knob{transform:translateX(100%)} .nav .navlang a{position:relative;z-index:1;display:block;min-width:46px;text-align:center; padding:5px 11px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.02em; line-height:1.4;color:var(--muted);transition:color .28s;white-space:nowrap} .nav .navlang a:hover{color:var(--ink)} .nav .navlang a.on,.nav .navlang a.on:hover{color:#fff} header.scrolled .nav .navlang{background:rgba(255,255,255,.7)} @media(max-width:1100px){ .nav .navlang{margin-left:6px} .nav .navlang a{min-width:40px;padding:5px 9px;font-size:11.5px} } @media(max-width:900px){ /* 汉堡菜单模式：切换推到汉堡按钮左侧，始终可见 */ .nav .navlang{margin-left:auto;margin-right:10px} } @media(max-width:380px){ .nav .navlang a{min-width:34px;padding:4px 7px;font-size:11px} } /* ============================================================ Logo（方案 B） ------------------------------------------------------------ 手写标志：从参考图提取轮廓后向量化（potrace，放大 10 倍描摹）。 参考图是 Brush Script 笔刷体，笔画粗细变化达 5.2 倍（横粗竖细、 起笔方角），均匀描边模拟不出来，所以用真实轮廓而非手绘路径。 好处：字形与原图一致、矢量任意缩放、不依赖任何字体文件。 参考图实测：绿字 172×45px，右缘到竖线 17px， 中文笔画/字高 = 0.143（对应字重 900），中英两行紧贴。 主色 var(--g500)，SVG 用 currentColor 取色，改色只需改 .brand .mk。 ============================================================ */ .brand{display:flex;align-items:center;gap:0;text-decoration:none;flex:none} .brand .mk{display:block;color:var(--g500);padding-right:17px; line-height:0;transition:color .25s} .brand:hover .mk{color:var(--g400)} .brand .cn{--brandw:150px;display:block;padding-left:15px; border-left:1.5px solid rgba(0,128,64,.28)} .brand .cn b{display:block;width:var(--brandw); font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif; font-weight:900;font-size:17px;line-height:1.16;color:var(--ink); text-align:justify;-moz-text-align-last:justify;text-align-last:justify} .brand .cn small{display:block;width:var(--brandw); font-family:'DM Sans','Segoe UI',Arial,sans-serif; font-size:8.2px;font-weight:500;line-height:1.3; color:var(--muted);letter-spacing:0;margin-top:0; text-align:justify;-moz-text-align-last:justify;text-align-last:justify} /* 页脚是浅色背景，标志沿用主色即可 */ footer .brand .mk{padding-right:14px} footer footer .brand .cn{--brandw:132px;padding-left:13px} footer .brand .cn b{font-size:15px} footer .brand .cn small{font-size:7.2px} @media(max-width:1100px){ .brand .mk{padding-right:14px} .brand .cn{--brandw:130px;padding-left:13px} .brand .cn b{font-size:15px} .brand .cn small{font-size:7.2px} } @media(max-width:760px){ .brand .mk{padding-right:0} .brand .cn{display:none} } /* ============================================================ 背景：世界地图（C 方案） ------------------------------------------------------------ 原来用铜管照片铺满背景，色相 20° 与品牌绿 150° 夹角 130°， 全站都在承受这个冲突。现改为： · 背景 = 世界地图点阵（本身就是绿色，夹角 0°，天然协调） · 首屏面板 = 铜管照片（从"墙纸"变成"产品展示图"） 地图做背景的三处专门处理（直接复用面板那张会乱）： ① 字号写进 SVG 的 font-size 属性 —— 原本写在 CSS 里是屏幕像素， 不随 SVG 缩放，放大后字号失控 ② 据点光晕半径 13.2 → 6.5 —— 原值在 720 viewBox 里很小， 放到 1000px 就成了大灰球 ③ 连线虚线改细实线、停掉全部 20 个动画 —— 虚线放大后会连成灰带； 背景动来动去抢注意力，长时间看也累 五个据点的标注、圆点、连线全部保留 —— 背景本身在讲"三大洲五基地"。 ============================================================ */ #photobg{background:linear-gradient(165deg,#fbfefd,#e7f0ec);overflow:hidden} #bgmap{position:absolute;left:50%;top:0; /* 宽度按视口百分比 —— 原来固定 980px，视口越宽占比越低 （1920px 下只剩 51%）。现在各屏统一约 70%。 位置为什么锚在顶部：地图的据点标记位于 viewBox 纵向 35% 处， 顶部锚定时标注正好落在标题上方的空白带；若改为垂直居中， 标注会下移撞上标题，反而被遮住看不见。 */ width:clamp(820px, 70vw, 1280px); height:auto;opacity:.72;pointer-events:none; transform:translateX(-50%)} #bgmap .land{fill:url(#landgBG)} #bgmap .site{transition:none} /* 据点标记（原 CSS 规则限定在 .worldmap 下，#bgmap 匹配不到需单独写） ------------------------------------------------------------ 实测发现 .mk-pulse 那圈渲染成了黑色 rgb(0,0,0) —— 它原本依赖 .worldmap 下的规则上色，#bgmap 匹配不到就掉回默认黑， 所以圆点看着又大又脏。这里一并接管，并把尺寸收小。 */ #bgmap .mk-main{fill:var(--g500);stroke:#fff;stroke-width:1} #bgmap .mk-dot{fill:var(--g400);stroke:#fff;stroke-width:.9} /* 外圈涟漪：由黑色改为品牌绿，做扩散动画 */ #bgmap .mk-pulse,#bgmap .mk-pulse2{ fill:none; stroke:var(--g400); stroke-width:.9; transform-box:fill-box; transform-origin:center; animation:bgripple 3.2s ease-out infinite} #bgmap .mk-pulse2{animation-delay:-1.6s} @keyframes bgripple{ 0%{opacity:.55;transform:scale(.35)} 70%{opacity:.12;transform:scale(1)} 100%{opacity:0;transform:scale(1.25)} } /* 中心点：轻微呼吸，幅度小，不干扰阅读 */ #bgmap .bgdot{ transform-box:fill-box;transform-origin:center; animation:bgbreath 3.2s ease-in-out infinite} @keyframes bgbreath{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.8;transform:scale(1.14)} } /* 四个据点错开，避免整齐闪烁 */ #bgmap .site:nth-of-type(1) .bgdot,#bgmap .site:nth-of-type(1) .mk-pulse{animation-delay:0s} #bgmap .site:nth-of-type(2) .bgdot,#bgmap .site:nth-of-type(2) .mk-pulse{animation-delay:-.8s} #bgmap .site:nth-of-type(3) .bgdot,#bgmap .site:nth-of-type(3) .mk-pulse{animation-delay:-1.6s} #bgmap .site:nth-of-type(4) .bgdot,#bgmap .site:nth-of-type(4) .mk-pulse{animation-delay:-2.4s} /* 遮罩：绿灰中性，中段留出地图可见 */ #photoveil{background:linear-gradient(180deg, rgba(247,250,249,.70) 0%, rgba(247,250,249,.24) 26%, rgba(247,250,249,.64) 56%, rgba(247,250,249,.82) 100%)} #mesh i{filter:blur(120px);opacity:.16} #mesh .m1{background:radial-gradient(circle,rgba(0,128,64,.22),transparent 68%)} #mesh .m2{background:radial-gradient(circle,rgba(0,128,64,.15),transparent 68%)} #mesh .m3{background:radial-gradient(circle,rgba(49,196,122,.10),transparent 68%)} .glass{background:rgba(252,253,252,.74); border:1px solid rgba(255,255,255,.9); -webkit-backdrop-filter:blur(22px) saturate(1.06); backdrop-filter:blur(22px) saturate(1.06)} .stats,#about,.cmpsec,#prod,#apps,.ctc{position:relative} .stats::before,#about::before,.cmpsec::before,#prod::before,#apps::before,.ctc::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:rgba(247,250,249,.24)} /* 首屏面板里的产品图 */ .hero-panel .vis{border-radius:14px;overflow:hidden;aspect-ratio:16/9; background:linear-gradient(150deg,#f1f6f4,#e4eeea)} .hero-panel .heroshot{width:100%;height:100%;object-fit:cover;display:block; filter:saturate(.96) contrast(1.03)} @media(max-width:900px){ /* 窄屏地图缩小并右移，避开标题 */ } @media(max-width:560px){ } /* Hero 第二行与统计数字：用主色而非亮绿，避免在浅底上发飘 */ .gcu{color:var(--g500) !important;background:none !important} .st .n,.mini .n{color:var(--g500) !important} /* 主按钮渐变：起点原为 g400（#31c47a），白字对比仅 2.21 不达标。 改为主色 → 深绿，最低对比 4.95，全程符合 WCAG AA。 */ .btn-c{background:linear-gradient(100deg,var(--g500),var(--g600)) !important; color:#fff !important;box-shadow:0 8px 22px rgba(0,128,64,.22)} .btn-c:hover{background:linear-gradient(100deg,var(--g600),var(--g700)) !important; box-shadow:0 14px 34px rgba(0,128,64,.3)} .pc:hover .pb .ar{background:var(--g500) !important;color:#fff !important} /* ============================================================ 页头常驻 + 悬浮菜单 ------------------------------------------------------------ 原来页头用 position:sticky，但祖先元素上的 overflow/transform 会破坏 sticky（实测滚动 600px 后 top 变成 -600，整个滚出视口）。 改用 position:fixed 彻底解决。 行为：向下滚动时页头收起（不挡内容），向上滚动立即回来。 这是常见的做法，既保证随时能导航，又不永久占用屏幕空间。 ============================================================ */ header{position:fixed !important;top:0;left:0;right:0;z-index:900; transform:translateY(0); transition:transform .32s cubic-bezier(.4,0,.2,1), background .3s ease, box-shadow .3s ease, border-color .3s ease} header.hide{transform:translateY(-100%)} body{padding-top:0} .hero{padding-top:96px} /* 页头脱离文档流，首屏补上高度 */ /* 滚动后加底衬，保证文字压在内容上也能读 */ header.scrolled{background:rgba(250,253,252,.90); border-bottom:1px solid rgba(45,77,66,.12); -webkit-backdrop-filter:blur(20px) saturate(1.15); backdrop-filter:blur(20px) saturate(1.15); box-shadow:0 6px 24px rgba(24,66,48,.06)} /* ---------- 回到顶部 + 快捷菜单（右下角悬浮） ---------- */ .fabs{position:fixed;right:20px;bottom:22px;z-index:880; display:flex;flex-direction:column;gap:9px;align-items:flex-end; pointer-events:none} /* 容器本身不拦截点击，只有按钮可点 */ .fab{width:44px;height:44px;border-radius:50%;display:grid;place-items:center; background:rgba(252,253,252,.92);border:1px solid rgba(0,128,64,.22); color:var(--g600);font-size:17px;cursor:pointer; -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); box-shadow:0 6px 20px rgba(24,66,48,.12); opacity:0;transform:translateY(10px) scale(.9);pointer-events:none; transition:opacity .3s,transform .3s,background .22s,color .22s} .fabs.on .fab{opacity:1;transform:none;pointer-events:auto} .fab:hover{background:var(--g500);color:#fff;border-color:var(--g500)} .fab.main{background:var(--g500);color:#fff;border-color:var(--g500); box-shadow:0 8px 26px rgba(0,128,64,.3)} .fab.main:hover{background:var(--g600)} /* 快捷菜单面板 */ .quicknav{position:fixed;right:20px;bottom:78px;z-index:881; min-width:172px;padding:8px;border-radius:16px; background:rgba(252,253,252,.96);border:1px solid rgba(0,128,64,.18); -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); box-shadow:0 16px 44px rgba(24,66,48,.16); opacity:0;transform:translateY(10px) scale(.96);transform-origin:bottom right; pointer-events:none;transition:opacity .26s,transform .26s} .quicknav.on{opacity:1;transform:none;pointer-events:auto} .quicknav a{display:flex;align-items:center;gap:9px;padding:9px 12px; border-radius:10px;font-size:13.5px;font-weight:600;color:var(--n700); transition:background .18s,color .18s} .quicknav a:hover{background:var(--g50);color:var(--g600)} .quicknav a.on{background:var(--g500);color:#fff} .quicknav a i{width:6px;height:6px;border-radius:50%; background:currentColor;opacity:.45;flex:none} .quicknav a.on i{opacity:1} @media(max-width:900px){ .hero{padding-top:78px} .fabs{right:14px;bottom:16px} .fab{width:42px;height:42px} .quicknav{right:14px;bottom:70px} } @media print{ header,.fabs,.quicknav{display:none} } /* ============================================================ 背景地图：连线流动动画 ------------------------------------------------------------ 面板那张地图原本用 stroke-dasharray + 动画做流光，但直接搬到 背景会出问题：放大后虚线段被拉长，首尾相连成一条灰带。 这里改用「长虚线 + 缓慢位移」，放大后仍是清晰的流动线条。 速度放慢到 26 秒一轮 —— 背景动效要慢，快了抢注意力。 ============================================================ */ #bgmap .bgarc{ /* 底线：静止时也能看出连接关系 */ stroke:rgba(0,128,64,.34); stroke-width:1.2; fill:none} /* 流动光点：复制一条同路径的线叠在上面做动画。 之前只用一条线做 dasharray 动画，亮段仅占连线长度的 3.9%， 又是 40% 不透明度的细线 —— 实测确实在动，但肉眼几乎看不出。 现在分两层：底线常显，光点层更亮更粗并带辉光。 */ #bgmap .bgarc-glow{ fill:none; stroke:#00b055; stroke-width:2.4; stroke-linecap:round; stroke-dasharray:60 260; filter:drop-shadow(0 0 4px rgba(0,176,85,.85)); animation:bgflow 7s linear infinite} #bgmap .bgarc-glow:nth-of-type(2){animation-delay:-2.3s} #bgmap .bgarc-glow:nth-of-type(3){animation-delay:-4.6s} @keyframes bgflow{ from{stroke-dashoffset:320} to{stroke-dashoffset:0} } /* 尊重系统「减少动态效果」设置 */ @media(prefers-reduced-motion:reduce){ #bgmap .bgarc-glow,#bgmap .bgdot,#bgmap .mk-pulse,#bgmap .mk-pulse2{animation:none} } @media(max-width:900px){ } @media(max-width:560px){ } /* ============================================================ 「本站」卡片（C 方案：极浅绿底 + 描边） ------------------------------------------------------------ 原来用实心深绿渐变 + 深色阴影，而旁边四张是半透明玻璃卡。 两种材质并排，深绿那张像贴错了一张，而且深色块把视线全吸走， 反而破坏了整排卡片的秩序 —— 五个基地本是平级展示，只需标注 哪个是本站，不需要那么强的对比。 改为同一材质体系内的区分：品牌绿 5% 浓度做底、绿色描边、 绿色投影。有明确存在感，但仍是"同一排卡片里的一张"。 ============================================================ */ .cmp.self{ background:linear-gradient(165deg,rgba(236,248,242,.92),rgba(215,239,227,.86)); border:1.5px solid var(--g400); box-shadow:0 16px 38px rgba(0,128,64,.15)} .cmp.self h3{color:var(--n900)} .cmp.self .loc,.cmp.self .desc{color:var(--muted)} .cmp.self .cmp-badge{background:var(--g500);color:#fff} .cmp.self .cmp-meta{border-top-color:rgba(0,128,64,.24)} .cmp.self .cmp-meta .n{color:var(--g600)} .cmp.self .cmp-meta .l{color:var(--muted)} .cmp.self .here{position:absolute;top:-9px;left:20px; font-size:9.5px;font-weight:700;letter-spacing:.14em; padding:4px 9px;border-radius:6px; background:var(--g500);color:#fff} /* ============================================================ 手机端背景地图定位 ------------------------------------------------------------ 手机屏幕装不下全部五个据点 —— 硬要全塞进去，标注会小到看不清。 所以做取舍：优先保住【太仓（本站）】和【台湾（集团总部）】， 它们在地图最右端（viewBox x≈602，标注延伸到 x≈680）。 之前用 right:-14% 把地图右移，正好把这两个最重要的据点推出屏幕。 现在改为【右侧对齐并留出标注空间】，让亚洲据点完整可见， 美洲那侧自然裁掉 —— 完整的五基地地图在「集团全球布局」区块里有。 ============================================================ */ @media(max-width:900px){ /* 手机端取舍说明 ------------------------------------------------------------ 手机屏幕装不下五个据点。实测：全塞进 375px 屏时地图只能 482px 宽，标注等效字号仅 7.4px，根本读不了。 所以优先保住【太仓（本站）+ 台湾（集团总部）】—— 它们在地图最右端（viewBox x≈602，标注延伸到 x≈686）。 之前用 right:-14% 右移，正好把这两个最重要的据点推出屏幕。 现在右侧留 8px 边距对齐，亚洲据点完整可见，美洲侧自然裁掉。 完整五基地地图在「集团全球布局」区块里有，信息不丢。 */ #bgmap{left:auto;right:8px;top:50%; width:clamp(680px, 190vw, 1020px); opacity:.78; transform:translateY(-50%)} } @media(max-width:560px){ #bgmap{right:6px;width:clamp(620px, 205vw, 900px);opacity:.72} } @media(max-width:380px){ #bgmap{right:4px;width:clamp(580px, 215vw, 820px);opacity:.68} } /* 手机端：遮罩略放淡，让背景地图看得出来（原来 .6 透明度下几乎看不见） */ @media(max-width:900px){ #photoveil{background:linear-gradient(180deg, rgba(247,250,249,.62) 0%, rgba(247,250,249,.20) 26%, rgba(247,250,249,.58) 56%, rgba(247,250,249,.78) 100%)} } /* ============================================================ 手机端页头重排 ------------------------------------------------------------ 实测问题：抽屉菜单 .menu 用了 display:flex !important， 即使定位到屏幕外仍参与 flex 布局，占了 390×368 的空间， 把 logo / 语言开关 / 按钮全挤变形（子元素总宽 717px， 可用只有 354px）。 处理： ① 菜单未展开时用 visibility+透明度隐藏，并脱离布局流 ② 页头只留【logo + 语言开关 + 汉堡】三样， 「获取报价」移进抽屉菜单 —— 手机上四个元素挤一行必然变形 ③ 各元素尺寸按 390px 屏幕重新定 ============================================================ */ @media(max-width:900px){ .nav{gap:8px;flex-wrap:nowrap} /* ① 抽屉菜单：未展开时彻底脱离布局，不再挤压兄弟元素 */ .menu{ position:fixed;top:var(--hdh,60px);left:0;right:0; flex-direction:column;gap:0; padding:10px 20px 18px; background:rgba(250,253,252,.98); -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px); border-bottom:1px solid rgba(45,77,66,.14); box-shadow:0 14px 34px rgba(24,66,48,.10); opacity:0;visibility:hidden;pointer-events:none; transform:translateY(-8px); transition:opacity .26s,transform .26s,visibility .26s; max-height:calc(100vh - var(--hdh,60px));overflow-y:auto; z-index:899} .menu.open{opacity:1;visibility:visible;pointer-events:auto;transform:none} .menu a{padding:13px 4px;font-size:15.5px;font-weight:600; border-bottom:1px solid rgba(45,77,66,.10)} .menu a:last-of-type{border-bottom:none} .menu a.on{color:var(--g600)} /* ② 「获取报价」放进抽屉底部，页头不再挤四个元素 */ .nav>.btn-c{display:none} .menu .drawer-cta{display:block;margin-top:12px;text-align:center; padding:13px 20px;border-radius:99px; background:linear-gradient(100deg,var(--g500),var(--g600)); color:#fff;font-size:15px;font-weight:700;border-bottom:none} /* ③ 尺寸按 390px 屏重定 */ .brand{flex:0 1 auto;min-width:0} .nav .navlang{margin-left:auto;margin-right:0;padding:2px} .nav .navlang a{min-width:38px;padding:5px 8px;font-size:11.5px} .burger{display:flex;flex:none;width:38px;height:38px;padding:9px} } @media(max-width:380px){ .nav .navlang a{min-width:32px;padding:4px 6px;font-size:10.5px} .burger{width:35px;height:35px;padding:8px} } /* ============================================================ 背景地图的手机适配 ------------------------------------------------------------ 我一开始判断错了方向：以为手机上点阵会被放大，所以做了个 半径减半的手机版路径。实测发现 —— 手机上地图宽度是 700~1040px， 跟桌面的 1008px 差不多（因为手机用了 195vw 让亚洲能完整显示）， 所以点的渲染尺寸本来就一致，不需要两套路径。 真正需要按比例适配的是【构图】：桌面地图居中偏上、五个据点都能露； 手机是竖屏，只能右对齐让亚洲（太仓/台湾）完整落在屏内。 ============================================================ */ .land-mb{display:none} @media(max-width:900px){ .land-pc{display:none} .land-mb{display:block} /* 手机按竖屏比例重新构图：放大并右对齐， 让亚洲（太仓/台湾）完整落在屏内 */ #bgmap{left:auto;right:10px;top:50%; width:clamp(700px, 195vw, 1040px); opacity:.72; transform:translateY(-50%)} /* 标注、连线、据点同步细化，抵消放大 */ #bgmap text[font-size="8"]{font-size:6.4px} #bgmap text[font-size="6"]{font-size:4.9px} #bgmap .bgarc{stroke-width:.7} #bgmap .bgarc-glow{stroke-width:1.4;stroke-dasharray:34 300} #bgmap .mk-main{r:2.1} #bgmap .mk-dot{r:1.7} #bgmap .mk-pulse,#bgmap .mk-pulse2{r:3.6;stroke-width:.55} } @media(max-width:560px){ #bgmap{right:8px;width:clamp(660px, 210vw, 960px);opacity:.68} } @media(max-width:380px){ #bgmap{right:6px;width:clamp(620px, 220vw, 880px);opacity:.62} } /* ============================================================ 桌面页头：滚动后不再换行 ------------------------------------------------------------ 实测：滚动前菜单 622×28，滚动后变成 647×70 —— 高度翻倍， 说明导航项折成了两行。原因是页头加底衬后内边距变化， 可用宽度不够，而 .menu 没有禁止换行。 ============================================================ */ @media(min-width:901px){ .nav{flex-wrap:nowrap;min-width:0} .menu{flex-wrap:nowrap;white-space:nowrap;flex:0 1 auto;min-width:0; overflow:visible} .menu a{white-space:nowrap;flex:none} .brand{flex:none} .nav .navlang,.nav>.btn-c{flex:none} /* 宽度紧张时优先压缩导航间距，而不是折行 */ .menu{gap:clamp(2px,.9vw,14px)} .menu a{padding-left:clamp(8px,1vw,16px);padding-right:clamp(8px,1vw,16px)} } @media(min-width:901px) and (max-width:1200px){ .menu a{font-size:13.5px} .brand .cn{--brandw:120px} .brand .cn b{font-size:14px} .brand .cn small{font-size:6.8px} } @media(min-width:901px) and (max-width:1050px){ /* 再窄就把品牌中文收起，只留手写标志，保证导航一行放得下 */ .brand .cn{display:none} .brand .mk{padding-right:0} } /* ============================================================ 手机端地图：完整显示三大洲 ------------------------------------------------------------ 之前右对齐 195vw，墨西哥被挤出屏幕。改为按【内容范围】定位： 据点横跨 viewBox x=150(墨西哥) ~ x=686(太仓标注末端)，共 536 单位。 让这段完整落在屏内，地图宽度 = 屏宽 / (536/720)， 即约 1.34 倍屏宽，居中偏右一点点即可全部容纳。 ============================================================ */ @media(max-width:900px){ #bgmap{ left:50%;right:auto;top:50%; /* 536/720 = 0.744 → 宽度取 134vw 刚好让内容满屏 */ width:clamp(390px, 124vw, 880px); opacity:.72; /* 内容中心在 viewBox x=(150+686)/2=418，即 58% 处； 要让它落在屏幕中央，需左移 (58%-50%)=8% 的地图宽度 */ transform:translate(-57.4%,-50%)} #bgmap text[font-size="8"]{font-size:12px} #bgmap text[font-size="6"]{font-size:8.6px} #bgmap .bgarc{stroke-width:1} #bgmap .bgarc-glow{stroke-width:1.9;stroke-dasharray:44 300} #bgmap .mk-main{r:3} #bgmap .mk-dot{r:2.4} #bgmap .mk-pulse,#bgmap .mk-pulse2{r:5;stroke-width:.8} } @media(max-width:560px){ #bgmap{width:clamp(390px, 124vw, 800px);opacity:.68} #bgmap text[font-size="8"]{font-size:13.5px} #bgmap text[font-size="6"]{font-size:9.6px} } @media(max-width:380px){ #bgmap{width:clamp(380px, 124vw, 740px);opacity:.62} } /* ============================================================ 页头滚动后变形的真正原因（实测定位） ------------------------------------------------------------ 一开始以为是导航项换行 —— 查下来不是：flex-wrap 和 white-space 都已是 nowrap，宽度也够（可用 1164、占用 1120）。 真实原因有两个： ① 每个链接从 34px 被拉到 45px —— 页头加底衬后高度变化， flex 默认 align-items:stretch 把子项拉满，链接跟着变高。 ② 我给手机抽屉加的「获取报价」在桌面也显示了，多出一项占位。 ============================================================ */ @media(min-width:901px){ .nav{align-items:center} .menu{align-items:center} .menu a{align-self:center;flex:none;height:auto} /* 抽屉专用按钮只在手机出现 */ .menu .drawer-cta{display:none} } /* ============================================================ 页头"滚动后变形"的真正原因 ------------------------------------------------------------ 实测分解高度：滚动前 36px = 内容16 + padding18 + border2 滚动后 45px = 内容24.9 + padding18 + border2 内容高从 16 变 24.9，正好等于 line-height 的计算值 —— 页面刚加载时字体还没就绪，行盒按后备度量算成 16px； 字体加载完成后行高生效变成 24.9px，页头就"跳"了一下。 跟滚动本身无关，只是滚动时恰好字体已加载完。 解决：给导航项定死行高与高度，两种状态一致，不再跳变。 ============================================================ */ @media(min-width:901px){ .menu a{line-height:18px;padding:8px 16px; display:inline-flex;align-items:center; min-height:34px;box-sizing:border-box} .menu{align-items:center;min-height:34px} header .nav{min-height:56px} } /* ============================================================ Logo 中英两行：贴近标准图 ------------------------------------------------------------ 实测对比（笔画宽度 / 文字高度 = 粗细比）： 中文 当前 0.158 标准 0.143 → 已经够粗，不用再加 英文 当前 0.167 标准 0.222 → 差 33%，这是主要差距 原因：英文那行用了 font-weight:500 且颜色是灰色 --muted， 标准图里是黑色加粗的。字距也偏大（3.0px vs 标准 2.0px）。 ============================================================ */ .brand .cn b{ /* 字体栈按【是否有真 Black 字面】排序： 微软雅黑只到 Bold(700)，写 900 会触发合成假粗体（发糊）； Source Han / Noto Sans CJK 有真正的 Black(900) 字面。 顺序上把有 Black 的排前面，没有的靠后。 */ font-family:'Source Han Sans SC','Noto Sans CJK SC','Noto Sans SC', 'PingFang SC','Hiragino Sans GB','Microsoft YaHei', '微软雅黑',sans-serif; font-weight:700; /* 原 900。雅黑只到 Bold(700)， 900 会触发合成假粗体，白底上发糊更明显 */ letter-spacing:-.012em; line-height:1.12} .brand .cn small{ font-weight:800; /* 500→800，补足与标准图的粗细差 */ color:var(--n900); /* 灰色 → 与中文同色 */ /* 标准图里三段词是普通空格分隔、整体紧凑； 原来用 text-align-last:justify 强行两端对齐，词间被拉得很开。 改为居中排列，词距自然。 */ text-align:center; -moz-text-align-last:center; text-align-last:center; letter-spacing:.01em; line-height:1.18; margin-top:1px; opacity:.92; white-space:nowrap} /* ============================================================ Logo 中文再加粗（突破字重上限） ------------------------------------------------------------ font-weight:900 已经是上限，很多环境（尤其微软雅黑只到 Bold 700） 再往上加也没有真字面，浏览器只能合成假粗体或者干脆忽略。 用 -webkit-text-stroke 给字形加一圈同色描边，等效于把笔画加粗， 而且是沿字形轮廓均匀外扩，不像合成假粗体那样发糊。 实测 0.35px 会加粗过头（+17%），收到 0.2px 正好对上标准图。 ============================================================ */ .brand .cn b{ -webkit-text-stroke:.2px currentColor; paint-order:stroke fill} .brand .cn small{ -webkit-text-stroke:.16px currentColor; paint-order:stroke fill} /* 页脚与窄屏尺寸小，描边按比例收细，避免糊成一团 */ footer .brand .cn b{-webkit-text-stroke:.18px currentColor} footer .brand .cn small{-webkit-text-stroke:.14px currentColor} @media(max-width:1100px){ .brand .cn b{-webkit-text-stroke:.17px currentColor} .brand .cn small{-webkit-text-stroke:.13px currentColor} } /* ============================================================ Logo 再调整：更大、更粗、更紧凑、中英对齐 ------------------------------------------------------------ 实测原状态：标志 105×31、中文 150×19（17px, justify）、 英文 150×10（8.2px, center）。 四项调整： ① 更大 —— 标志 31→38px，中文 17→19.5px，英文 8.2→9.4px ② 更粗 —— 描边从 .2px 加到 .32px（900 字重已是上限，靠描边突破） ③ 更紧凑 —— 标志到竖线 17→12px，竖线到文字 15→11px， 中文字距收到 -.03em ④ 中英对齐 —— 中文原来是 justify（两端对齐会拉开字距）， 英文是 center，两种对齐视觉上不齐。 统一改成 left 起始对齐，宽度由内容决定， 两行左缘严格对齐、右端自然收尾。 ============================================================ */ .brand .mk{padding-right:12px} .brand .cn{ --brandw:auto; /* 不再定死宽度，由内容决定 */ padding-left:11px; border-left:1.6px solid rgba(0,102,51,.70)} /* 原 rgba(0,128,64,.32)， 叠在白底上从 ≈#ADD6C2 变成 ≈#4DB28A。基色也压深了一档（#008040→#006633） */ .brand .cn b{ width:auto; font-size:24.5px; /* 19.5 → 21.5 → 24.5px */ line-height:1.1; letter-spacing:.04em; /* -.03 → .01 → .03 → .04em */ -webkit-text-stroke:.36px currentColor; /* .40 → .12 → .26 → .36px。 加粗走描边不走 font-weight：雅黑没有 800/900 真字面， 调 font-weight 只会触发合成假粗体，白底上糊得更明显； 描边是在真 Bold 字面上加厚，笔画边缘是干净的 */ /* 关键：去掉 justify，改左对齐 —— justify 会把字距拉开， 跟下面 center 的英文视觉上对不齐 */ text-align:left; -moz-text-align-last:left; text-align-last:left} .brand .cn small{ width:auto; font-size:11.8px; /* 与中文同比例(≈0.482)，保持两行右缘齐平 */ font-weight:800; line-height:1.2; letter-spacing:.055em; /* 英文字距微开，让两行等宽 */ margin-top:1px; -webkit-text-stroke:.30px currentColor; text-align:left; -moz-text-align-last:left; text-align-last:left; white-space:nowrap} /* 页脚与窄屏按比例缩 */ footer footer .brand .mk{padding-right:11px} footer .brand .cn{padding-left:10px} footer .brand .cn b{font-size:23px;-webkit-text-stroke:.31px currentColor} footer .brand .cn small{font-size:11.1px;-webkit-text-stroke:.27px currentColor} @media(max-width:1100px){ .brand .mk{padding-right:11px} .brand .cn{padding-left:10px} .brand .cn b{font-size:21.5px;-webkit-text-stroke:.31px currentColor} .brand .cn small{font-size:10.35px;-webkit-text-stroke:.26px currentColor} } @media(max-width:760px){ .brand .mk{padding-right:0} } /* ============================================================ 中英两行等宽（对齐到标准图） ------------------------------------------------------------ 实测标准图：中文墨迹 180px、英文 179px，宽度比 0.994 —— 两行等宽。 我这版实测：中文 602px、英文 671px，英文长了 11.5%。 注意：之前用 getBoundingClientRect 量出来两行都是 169px，那是 元素盒宽 —— width:auto 的 block 会撑满父容器，量不出墨迹实宽。 必须用像素分析量真实墨迹。 英文 27 个字符，要缩 11.5% 得把字距从 .055em 收到 -.013em。 ---- 后续调整：中文字距放开后，英文必须同步放开 ---- 中文 -.03em → .01em，8 个字合计变宽 0.04em × 8 = 0.32em， 在 24.5px 下约 +7.8px，占墨迹宽（≈190px）的 4.1%。 英文要同样加宽 4.1%：7.8px ÷ 27 个字符 = 0.29px/字符， 在 11.8px 下 = 0.0246em，故 -.013em + 0.0246em ≈ .012em。 两行等宽因此保持不变。 ---- 再放开一档 ---- 中文 .01em → .03em（再加 0.02em）：8 字 × 0.02em × 24.5px = +3.9px。 英文补同样的 3.9px：3.9 ÷ 27 = 0.145px/字符 ÷ 11.8px = 0.0123em， 故 .012em + .0123em ≈ .024em。 换算口诀：中文每加 0.01em，英文加 0.006em。 注意：这一比例与字号无关（都用 em），改字号不用重算字距。 ============================================================ */ .brand .cn small{letter-spacing:.030em} footer .brand .cn small{letter-spacing:.030em} @media(max-width:1100px){ .brand .cn small{letter-spacing:.030em} } /* ============================================================ 竖线两侧间距（对齐标准图实测值） ------------------------------------------------------------ 标准图逐列像素分析（图宽 394、中文字高 28px）： NTT Tube 墨迹右缘 x=137 → 竖线 x=144~146（3px 粗）→ 文字 x=156 即：绿字到竖线 6px，竖线到文字 10px，竖线本身 3px 换算到我们的尺寸（中文 19.5px，约 0.7 倍）： 绿字→竖线 ≈ 8px，竖线→文字 ≈ 13px 之前是 12px / 11px，绿字侧偏宽、文字侧偏窄，所以看着不像。 ============================================================ */ .brand .mk{padding-right:8px} .brand .cn{padding-left:13px; border-left-width:3px} /* 原 2px */ footer .brand .mk{padding-right:7px} footer .brand .cn{padding-left:11px;border-left-width:2.4px} @media(max-width:1100px){ .brand .mk{padding-right:7px} .brand .cn{padding-left:11px;border-left-width:2.4px} } @media(max-width:760px){ .brand .mk{padding-right:0} } /* ============================================================ Logo 手写标志：直接用 Brush Script 字体 ------------------------------------------------------------ 之前从截图向量化，源图只有 49px 高，边缘怎么平滑都有起伏。 其实它就是 Brush Script MT —— 直接用字体渲染， 矢量字形本身完全光滑，任意缩放都锐利，还省掉 35KB 的路径数据。 字体栈按可得性排序： Brush Script MT —— Windows 随 Office 装，覆盖面最广 Brush Script Std —— macOS / Adobe 环境 Segoe Script —— Windows 自带（Vista 起） Bradley Hand —— macOS 自带 Lucida Handwriting / Apple Chancery —— 更老的兜底 cursive —— 浏览器默认手写体 万一全都没有（Linux 服务器截图、极少数环境）， 会掉到 cursive 的默认字体，形态不同但仍是手写风格，不会崩。 ============================================================ */ .brand .mk{ /* 字体栈按可得性排序。Brush Script MT 是 Windows 随 Office 装的， 覆盖面最广；后面几个是 macOS 与更老 Windows 的兜底。 注意 Linux 上 cursive 常被映射成非手写体（沙箱里就掉成了 DejaVu Sans），所以真要跨平台一致，得把字体转 woff2 自托管。 */ font-family:'Brush Script MT','Brush Script Std','BrushScriptMT', 'Segoe Script','Bradley Hand','Bradley Hand ITC', 'Lucida Handwriting','Apple Chancery','Comic Sans MS', cursive,'Segoe UI',sans-serif; font-weight:400; font-style:italic; font-size:40px; line-height:1; letter-spacing:.01em; color:var(--g600); white-space:nowrap; padding-right:8px; /* 字体渲染优化，让笔画边缘更干净 */ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:geometricPrecision; transition:color .25s} .brand:hover .mk{color:var(--g500)} footer .brand .mk{font-size:35px;padding-right:7px} @media(max-width:1100px){ .brand .mk{font-size:35px;padding-right:7px} } @media(max-width:760px){ .brand .mk{font-size:31px;padding-right:0} } @media(max-width:380px){ .brand .mk{font-size:28px} } /* 手写标志换成字体后，两侧间距按标准图比例重定： 标准图（中文字高 28px）绿字→竖线 6px、竖线→文字 10px， 即约 0.21 和 0.36 倍字高。我们中文 19.5px → 4px 和 7px。 但字体渲染的斜体右侧本身带一点空白（italic 的侧倾）， 所以绿字侧再收 1px，实测视觉上更贴合。 */ .brand .mk{padding-right:5px} .brand .cn{padding-left:12px} footer .brand .mk{padding-right:4px} footer .brand .cn{padding-left:10px} @media(max-width:1100px){ .brand .mk{padding-right:4px} .brand .cn{padding-left:10px} } @media(max-width:760px){ .brand .mk{padding-right:0} } /* Logo 手写标志：加粗 + 收紧字距 ------------------------------------------------------------ Brush Script MT 只有 Regular 一个字重，写 font-weight:700 会让 浏览器合成假粗体（沿轮廓外扩），手写体上反而糊。 用 -webkit-text-stroke 加同色描边更干净 —— 沿字形轮廓均匀外扩， 笔画的粗细变化还保留着。 */ .brand .mk{ -webkit-text-stroke:.6px currentColor; paint-order:stroke fill; letter-spacing:-.045em} /* .01em → -.045em，字距收紧 */ footer .brand .mk{-webkit-text-stroke:.5px currentColor;letter-spacing:-.045em} @media(max-width:1100px){ .brand .mk{-webkit-text-stroke:.5px currentColor} } @media(max-width:760px){ .brand .mk{-webkit-text-stroke:.45px currentColor} } /* ============================================================ 页头两处调整 ------------------------------------------------------------ ① 导航字太细看不清 —— 实测 font-weight:300（细体）+ 灰绿 #4b6357， 两个因素叠加就显得又细又淡。改成 600 字重、颜色压深一档。 ② logo hover 变化不明显 —— 原来 #006b36 → #008040， 两个都是深绿、明度只差 12%，肉眼几乎看不出。 改成 hover 时切到明显更亮的 g400，并加一点位移反馈。 ============================================================ */ @media(min-width:901px){ .menu a{ font-weight:600; /* 300 → 600 */ color:var(--n700); /* #4b6357 → 更深，提升可读性 */ transition:color .22s,background .22s} .menu a:hover{color:var(--g600);background:var(--g50)} .menu a.on{ font-weight:700; color:var(--g700)} /* 当前项用最深的绿，区分度更高 */ } /* logo 悬停：颜色跳一档 + 轻微上移，交互反馈明确 */ .brand .mk{transition:color .2s ease,transform .2s ease} .brand:hover .mk{ color:var(--g400); /* #006b36 → #31c47a，明度差 4 倍 */ transform:translateY(-1px)} .brand{transition:opacity .2s} .brand:active .mk{transform:translateY(0)} /* ============================================================ 配色收口：绿实底留给小标题 pill 与本站卡， 产品卡与应用卡走白底黑字 + 绿描边 ------------------------------------------------------------ #008040 配白字 5.05:1，过 WCAG AA。绿底上的浅色文字透明度不能 低于 .92 —— 白色 92% 压在 #008040 上是 4.53:1 刚过 AA，.85 就 只剩 4.10，正文级字号不够用。更低的透明度只留给边框、背景巨型 数字这些非文字元素。 .pc / .ac 与 .glass 权重相同（0,1,0），必须写在 1305 行之后才生效。 全局 box-sizing:border-box（23 行），1px→1.5px 描边不改外尺寸。 ============================================================ */ /* ---------- ① 小标题 pill（HERO / ABOUT / GLOBAL NETWORK / PRODUCTS / APPLICATION / CONTACT） ---------- */ .kick{ /* 覆盖 29 行的 12% 淡绿底 + 绿字 */ color:#fff; background:#008040; border-color:#008040; -webkit-backdrop-filter:none;backdrop-filter:none} /* 实底不需要毛玻璃 */ /* ---------- ② 本站卡（覆盖 1468-1481 行整段 C 方案） ---------- */ .cmp.self{ background:#008040; border:1.5px solid var(--g400); /* 亮薄荷描边，在浅底页面上勾出边缘 */ box-shadow:0 18px 42px rgba(0,82,41,.28); -webkit-backdrop-filter:none;backdrop-filter:none} .cmp.self h3{color:#fff} .cmp.self .loc,.cmp.self .desc{color:rgba(255,255,255,.92)} .cmp.self .cmp-badge{background:#fff;color:var(--g600)} /* NTT 徽标反过来：白底绿字 */ .cmp.self .here{background:#fff;color:var(--g700)} /* 「本站」角标同理 */ .cmp.self .cmp-meta{border-top-color:rgba(255,255,255,.3)} .cmp.self .cmp-meta .n{color:#fff} .cmp.self .cmp-meta .l{color:rgba(255,255,255,.92)} .cmp.self .more{color:#fff} /* ---------- ③ 产品卡（产品中心六张）：白底 + 黑字 + 绿描边 ---------- */ .pc{ background:#fff; /* 覆盖 1305 行 .glass 的半透明浅底 */ border:1.5px solid var(--g400); /* 覆盖 1306 行的纯白边 */ box-shadow:0 16px 38px rgba(0,128,64,.15); /* 覆盖 216 行的中性投影 */ -webkit-backdrop-filter:none;backdrop-filter:none} /* 纯白实底，毛玻璃已无意义 */ .pc:hover{ /* 覆盖 157 / 223 行 */ border-color:var(--g500); box-shadow:0 26px 58px rgba(0,128,64,.22)} .pc .pb h3{color:var(--n900)} /* 覆盖 858 行，白底上回到近黑 */ /* 分类标签：照片压白底、标签压照片，实心绿底白字保持不变 */ .pim .tg{ /* 覆盖 854-856 / 225 行 */ background:var(--g500); color:#fff; border-color:transparent} .pc .pb .ar{ /* 覆盖 859-861 / 226 行，白底上换回绿箭头 */ color:var(--g600); background:rgba(0,128,64,.12); border-color:rgba(0,128,64,.24)} /* hover 态不用管：1339 行本来就是绿底白箭头，白卡上正好 */ /* ---------- ④ 应用卡（应用领域三张）：白底 + 黑字 + 浅绿编号 ---------- */ .ac{ background:#fff; /* 覆盖 1305 行 .glass 的浅底 */ border:1.5px solid var(--g400); box-shadow:0 16px 38px rgba(0,128,64,.15); -webkit-backdrop-filter:none;backdrop-filter:none} .ac::before{ /* 覆盖 173 / 228 行 */ background:radial-gradient(480px 340px at 72% 12%,rgba(0,128,64,.07),transparent 62%)} .ac:hover{ /* 覆盖 174 行的绿描边 + 222 行的暖灰投影 */ border-color:var(--g500); box-shadow:0 26px 58px rgba(0,128,64,.22)} .ac .bg{color:var(--g200)} /* 01 / 02 / 03 改浅绿（#afdec7） */ .ac h3{color:var(--n900)} .ac p{color:var(--muted)} /* ------------------------------------------------------------ 备选：产品卡 / 应用卡换回实心绿（想全站统一时用） 把 ③ 或 ④ 对应段落替换成下面的规则即可 .pc{background:#008040;border:1.5px solid var(--g400); box-shadow:0 18px 42px rgba(0,82,41,.28); -webkit-backdrop-filter:none;backdrop-filter:none} .pc:hover{border-color:#fff;box-shadow:0 26px 58px rgba(0,82,41,.34)} .pc .pb h3{color:#fff} .pc .pb .ar{color:#fff;background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.45)} .pc:hover .pb .ar{background:#fff!important;color:var(--g600)!important; border-color:#fff} .ac{background:#008040;border-color:rgba(255,255,255,.22); -webkit-backdrop-filter:none;backdrop-filter:none} .ac::before{background:radial-gradient(480px 340px at 72% 12%, rgba(255,255,255,.14),transparent 62%)} .ac:hover{border-color:rgba(255,255,255,.55); box-shadow:0 24px 52px rgba(0,82,41,.26)} .ac .bg{color:rgba(255,255,255,.16)} .ac h3{color:#fff} .ac p{color:rgba(255,255,255,.92)} .ac .ct .kick{background:rgba(255,255,255,.92);color:var(--g700); border-color:transparent} ------------------------------------------------------------ */ /* ============================================================ 页头：白底 + 细边 + 轻投影（预览方案 B） ------------------------------------------------------------ 原设计是首屏透明（让铜管底图透上来）、滚动后浮出毛玻璃。 现在不论是否滚动都是白底，所以 header 和 header.scrolled 要一起覆盖，否则滚动时会跳一下颜色。 同时撤掉一样只为透明态存在的补偿： 第 294 行给品牌区和导航加的米白 text-shadow —— 白底上不需要， 留着会在字边缘留一圈发灰的轮廓。必须用相同的选择器写， 否则优先级不够（原规则是 header + 3 个后代类）。 投影的作用是让页头"浮"在首屏照片上。纯白无投影时， 页头下沿和照片顶部之间会出现一条很硬的界线。 ============================================================ */ header,header.scrolled{ background:#fff; border-bottom:1px solid rgba(45,77,66,.12); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 4px 18px rgba(45,77,66,.07)} header .brand,header .menu a,header .lang a, header.scrolled .brand,header.scrolled .menu a,header.scrolled .lang a{text-shadow:none} /* ============================================================ 产品图片放大（点右下角 → 在本页对话框看大图） ------------------------------------------------------------ 右下角 → 图标保持原样（样式、hover 旋转都不动），只是点击改为放大。 对话框在浏览器顶层（top layer）显示，不受页头 z-index 影响。 ============================================================ */ html.pz-lock{overflow:hidden} .pzoom{padding:0;border:0;margin:0;background:transparent; width:100vw;height:100dvh;max-width:none;max-height:none;overflow:hidden} .pzoom[open]{display:grid;place-items:center;animation:pzIn .22s ease-out} .pzoom::backdrop{background:rgba(7,39,23,.8);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} @keyframes pzIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}} .pz-fig{margin:0;background:#fff;border-radius:18px;overflow:hidden; border:1.5px solid var(--g400);box-shadow:0 30px 80px rgba(0,0,0,.35)} .pz-img{display:block;width:auto;height:auto;margin:0 auto; max-width:min(88vw,1200px);max-height:calc(100dvh - 150px); object-fit:contain;background:var(--n50)} .pz-cap{display:flex;align-items:center;gap:10px;padding:12px 18px; border-top:1px solid rgba(0,128,64,.14)} .pz-cat{font-size:11px;font-weight:600;color:#fff;background:var(--g500); padding:3px 10px;border-radius:99px;flex:none} .pz-name{font-size:16px;font-weight:700;color:var(--n900);min-width:0} .pz-cnt{margin-left:auto;font-size:12.5px;color:var(--n500);flex:none;font-variant-numeric:tabular-nums} .pz-x,.pz-nav{position:fixed;z-index:1;display:grid;place-items:center; border-radius:50%;border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.14);color:#fff;cursor:pointer; font:inherit;line-height:1;transition:background .2s,transform .2s} .pz-x:hover,.pz-nav:hover{background:var(--g500);border-color:var(--g500)} .pz-x:focus-visible,.pz-nav:focus-visible{outline:2px solid #fff;outline-offset:2px} .pz-x{top:18px;right:18px;width:44px;height:44px;font-size:28px} .pz-nav{top:50%;width:48px;height:48px;margin-top:-24px;font-size:32px;padding-bottom:3px} .pz-prev{left:22px} .pz-next{right:22px} .pzoom.single .pz-nav,.pzoom.single .pz-cnt{display:none} @media (max-width:640px){ .pz-img{max-width:94vw;max-height:calc(100dvh - 170px)} .pz-cap{padding:10px 14px} .pz-name{font-size:14.5px} .pz-x{top:12px;right:12px;width:40px;height:40px} .pz-nav{top:auto;bottom:22px;margin-top:0;width:44px;height:44px} .pz-prev{left:calc(50% - 56px)} .pz-next{right:calc(50% - 56px)} } @media (prefers-reduced-motion:reduce){.pzoom[open]{animation:none}}