:root{ /* ===== 品牌铜色（色相 23°，沿用 NTT 改绿之前的那套铜色体系）===== 主色 #8b4b22 —— 就是原 NTT 铜色版里出现 22 次的那个主色。 CCM logo 本身的金色渐变保留不动（那是品牌 logo 的固有色）。 */ --g50:#fbf6f0; --g100:#f0e2d1; --g200:#e0c3a4; --g400:#c9783c; --g500:#a8571f; --g600:#8b4b22; --g700:#7a3d18; --g900:#2b1d12; /* ===== 中性色（同为 46° 色相、低饱和，与品牌同源）===== */ --n0:#fffaf5; --n25:#f8f4ee; --n50:#f3ece2; --n100:#eee9e0; --n200:#e6dacb; --n300:#a1958a; --n500:#73665b; --n700:#5a4d43; --n900:#231610; /* ===== 辅助铜色（产品点缀）===== */ --c100:#eedfd3; --c300:#cda684; --c500:#a47246; --c700:#715033; /* ===== 语义别名 ===== */ --ink:#231610; --muted:#73665b; --faint:#a1958a; --line:#e6dacb; --cu1:#e0c3a4; --cu2:#c9783c; --cu3:#a8571f; --cu4:#7a3d18; --teal:#c9783c; --glass:rgba(255,250,245,.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(139,75,34,.12);border:1px solid rgba(139,75,34,.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(139,75,34,.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(139,75,34,.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(201,120,60,.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(224,195,164,.09),transparent 62%)} /* ===== 特效3：磁吸光标 ===== */ @media(pointer:fine){ #cur{position:fixed;width:26px;height:26px;border-radius:50%;border:1px solid rgba(224,195,164,.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(224,195,164,.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(224,195,164,.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(139,75,34,.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(201,120,60,.5)}70%{box-shadow:0 0 0 8px rgba(201,120,60,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(139,75,34,.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(139,75,34,.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(139,75,34,.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(139,75,34,.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(139,75,34,.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(139,75,34,.24),transparent 62%)} .ac:hover{transform:translateY(-7px);border-color:rgba(139,75,34,.45)} .ac .bg{position:absolute;top:20px;right:26px;font-family:'Syne';font-weight:800;font-size:70px;color:rgba(224,195,164,.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:#a8571f; --glass:rgba(255,255,255,.72);--glassb:rgba(104,65,37,.16); } body{ background: radial-gradient(circle at 88% 4%,rgba(139,75,34,.13),transparent 28%), radial-gradient(circle at 6% 56%,rgba(201,120,60,.08),transparent 30%), var(--bg); } ::selection{background:rgba(139,75,34,.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(139,75,34,.38),transparent 66%)} #mesh .m2{background:radial-gradient(circle,rgba(139,75,34,.25),transparent 66%)} #mesh .m3{background:radial-gradient(circle,rgba(201,120,60,.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(139,75,34,.18)} .btn-c:hover{box-shadow:0 16px 38px rgba(139,75,34,.28)} .btn-g{background:rgba(255,255,255,.68)} .btn-g:hover{background:#fff;border-color:rgba(139,75,34,.55)} .glass{box-shadow:0 18px 55px rgba(104,65,37,.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(139,75,34,.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(104,65,37,.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(139,75,34,.17),transparent 62%)} .ac .bg{color:rgba(139,75,34,.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} /* ---- 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(90,52,24,.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(104,65,37,.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(104,65,37,.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(104,65,37,.14); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .fbt{border-top:1px solid rgba(104,65,37,.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} /* 手机单列，横向渐变没意义，改成上浅下深保证正文可读 */ } /* ============================================================ 联系我们 · 嵌入 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(104,65,37,.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(90,52,24,.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(90,52,24,.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(139,75,34,.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:#8b4b22; 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(104,65,37,.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(139,75,34,.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(139,75,34,.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(139,75,34,.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(139,75,34,.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(104,65,37,.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(104,65,37,.16); box-shadow:0 20px 40px rgba(90,52,24,.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(104,65,37,.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:#a8571f;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:#a8571f;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(104,65,37,.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(139,75,34,.13);border:1px solid rgba(139,75,34,.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(104,65,37,.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(139,75,34,.11);border:1px solid rgba(139,75,34,.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(90,52,24,.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(139,75,34,.13);border:1px solid rgba(139,75,34,.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(104,65,37,.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(139,75,34,.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(139,75,34,.12); border:1px solid rgba(139,75,34,.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(139,75,34,.11); border:1px solid rgba(139,75,34,.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(139,75,34,.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:#a8571f;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(104,65,37,.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(104,65,37,.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(139,75,34,.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(139,75,34,.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 个动画 —— 虚线放大后会连成灰带； 背景动来动去抢注意力，长时间看也累 五个据点的标注、圆点、连线全部保留 —— 背景本身在讲"三大洲五基地"。 ============================================================ */ /* 据点标记（原 CSS 规则限定在 .worldmap 下， /* 外圈涟漪：由黑色改为品牌绿，做扩散动画 */ /* 中心点：轻微呼吸，幅度小，不干扰阅读 */ /* 四个据点错开，避免整齐闪烁 */ /* 遮罩：绿灰中性，中段留出地图可见 */ #mesh i{filter:blur(120px);opacity:.16} #mesh .m1{background:radial-gradient(circle,rgba(139,75,34,.22),transparent 68%)} #mesh .m2{background:radial-gradient(circle,rgba(139,75,34,.15),transparent 68%)} #mesh .m3{background:radial-gradient(circle,rgba(201,120,60,.10),transparent 68%)} .glass{background:rgba(255,250,245,.74); border:1px solid rgba(255,255,255,.9); -webkit-backdrop-filter:blur(22px) saturate(1.06); backdrop-filter:blur(22px) saturate(1.06)} /* 首屏面板里的产品图 */ .hero-panel .vis{border-radius:14px;overflow:hidden;aspect-ratio:16/9; background:linear-gradient(150deg,#f3ece2,#eee9e0)} .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（#c9783c），白字对比仅 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(139,75,34,.22)} .btn-c:hover{background:linear-gradient(100deg,var(--g600),var(--g700)) !important; box-shadow:0 14px 34px rgba(139,75,34,.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(104,65,37,.12); -webkit-backdrop-filter:blur(20px) saturate(1.15); backdrop-filter:blur(20px) saturate(1.15); box-shadow:0 6px 24px rgba(104,65,37,.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(255,250,245,.92);border:1px solid rgba(139,75,34,.22); color:var(--g600);font-size:17px;cursor:pointer; -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); box-shadow:0 6px 20px rgba(104,65,37,.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(139,75,34,.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(255,250,245,.96);border:1px solid rgba(139,75,34,.18); -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px); box-shadow:0 16px 44px rgba(104,65,37,.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 秒一轮 —— 背景动效要慢，快了抢注意力。 ============================================================ */ /* 流动光点：复制一条同路径的线叠在上面做动画。 之前只用一条线做 dasharray 动画，亮段仅占连线长度的 3.9%， 又是 40% 不透明度的细线 —— 实测确实在动，但肉眼几乎看不出。 现在分两层：底线常显，光点层更亮更粗并带辉光。 */ /* 尊重系统「减少动态效果」设置 */ @media(prefers-reduced-motion:reduce){ } @media(max-width:900px){ } @media(max-width:560px){ } /* ============================================================ 「本站」卡片（C 方案：极浅绿底 + 描边） ------------------------------------------------------------ 原来用实心深绿渐变 + 深色阴影，而旁边四张是半透明玻璃卡。 两种材质并排，深绿那张像贴错了一张，而且深色块把视线全吸走， 反而破坏了整排卡片的秩序 —— 五个基地本是平级展示，只需标注 哪个是本站，不需要那么强的对比。 改为同一材质体系内的区分：品牌绿 5% 浓度做底、绿色描边、 绿色投影。有明确存在感，但仍是"同一排卡片里的一张"。 ============================================================ */ .cmp.self{ background:linear-gradient(165deg,rgba(251,246,240,.92),rgba(240,233,209,.86)); border:1.5px solid var(--g400); box-shadow:0 16px 38px rgba(139,75,34,.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(139,75,34,.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 边距对齐，亚洲据点完整可见，美洲侧自然裁掉。 完整五基地地图在「集团全球布局」区块里有，信息不丢。 */ } @media(max-width:560px){ } @media(max-width:380px){ } /* 手机端：遮罩略放淡，让背景地图看得出来（原来 .6 透明度下几乎看不见） */ @media(max-width:900px){ } /* ============================================================ 手机端页头重排 ------------------------------------------------------------ 实测问题：抽屉菜单 .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(104,65,37,.14); box-shadow:0 14px 34px rgba(104,65,37,.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(104,65,37,.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 让亚洲能完整显示）， 所以点的渲染尺寸本来就一致，不需要两套路径。 真正需要按比例适配的是【构图】：桌面地图居中偏上、五个据点都能露； 手机是竖屏，只能右对齐让亚洲（太仓/台湾）完整落在屏内。 ============================================================ */ @media(max-width:900px){ /* 手机按竖屏比例重新构图：放大并右对齐， 让亚洲（太仓/台湾）完整落在屏内 */ /* 标注、连线、据点同步细化，抵消放大 */ } @media(max-width:560px){ } @media(max-width:380px){ } /* ============================================================ 桌面页头：滚动后不再换行 ------------------------------------------------------------ 实测：滚动前菜单 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){ } @media(max-width:560px){ } @media(max-width:380px){ } /* ============================================================ 页头滚动后变形的真正原因（实测定位） ------------------------------------------------------------ 一开始以为是导航项换行 —— 查下来不是：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: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} } /* ============================================================ CCM Logo（图片版） ------------------------------------------------------------ NTT 站用的是手写体 SVG 描摹；CCM 用的是现成的品牌 logo 图片。 原图是蓝底的（RGB 28,117,219），已抠成透明背景，并且因为 "since 1973" 那行原本是白色、浅底上看不见，已改成深棕。 深底版（白字保留）在 static/img/logo-ccm-dark.png， 蓝底原版在 logo-ccm-blue.png，后台换图时可选。 ============================================================ */ .brand .mk{padding-right:16px;line-height:0} footer footer .brand .mk{padding-right:14px} @media(max-width:1100px){ .brand .mk{padding-right:13px} } @media(max-width:760px){ .brand .mk{padding-right:0} } @media(max-width:380px){ } /* ============================================================ CCM Logo（矢量版） ------------------------------------------------------------ 原来直接用位图，问题是原图只有 157×67，放大后糊； 而且半透明边缘里 51% 的像素还残留蓝底色 —— 那就是重影和蓝边。 现在改成矢量：金色 CCM 与 "since 1973" 分别描摹， 金色部分用线性渐变还原原 logo 的金属质感， "since 1973" 用 currentColor —— 浅底显深棕、深底显浅金，自动适应。 ============================================================ */ .brand .mk{padding-right:16px;line-height:0} footer footer .brand .mk{padding-right:14px} @media(max-width:1100px){ .brand .mk{padding-right:13px} } @media(max-width:760px){ .brand .mk{padding-right:0} } @media(max-width:380px){ } /* ============================================================ 背景：恢复铜管照片（CCM 版） ------------------------------------------------------------ NTT 站因为品牌绿(150°)与铜色(20°)夹角 130°、冲突严重， 才把照片换成了世界地图。CCM 的金色是 46°，与铜色只差 26°， 属邻近色天然协调 —— 所以照片做底图反而更合适，换回来。 ============================================================ */ @media(max-width:900px){ } /* 首屏文字压深：照片底色偏亮，实测三项对比度均不达标（2.49~3.42）， 这里把标题第二行与小标签改用更深的金色档位。 */ .gcu{color:var(--g700) !important} .kick{color:var(--g700);background:rgba(248,244,238,.86); border-color:rgba(139,75,34,.3)} /* ============================================================ 首屏面板里的世界地图：填满容器 ------------------------------------------------------------ 实测地图渲染 394×144、容器 402×226 —— 宽度撑满了，但高度只占 64%，上下留出大片空白，所以看着小。 原因是 viewBox 720×264（2.73:1）与容器（1.78:1）比例不符， preserveAspectRatio 默认 meet 会按短边缩放、留白。 改成按高度撑满、横向裁掉两侧空白海域（据点都在中间，不受影响）。 ============================================================ */ .hero-panel .vis{overflow:hidden;border-radius:14px} .hero-panel .worldmap{ width:100%;height:100%; display:block; object-fit:cover} /* 用 slice 会把最右的亚洲据点（太仓/台湾）裁掉，所以改成 调整 viewBox 的纵向范围：720×264 → 720×400（上下补白）， 比例从 2.73 变成 1.80，正好贴合容器的 1.78， 这样既填满又不裁掉任何据点。 */ /* ============================================================ Logo 旁公司名：10 个字要一行放下 ------------------------------------------------------------ 「中誠金屬工業有限公司」比原来的「中誠金屬」长一倍多， 在原来的字号下会折成两行（第二行只剩「公司」两字被两端对齐拉开）。 处理：字号收小、字距收紧、禁止换行，宽度由内容决定。 ============================================================ */ .brand .cn b{ font-size:15.5px; letter-spacing:-.045em; white-space:nowrap; width:auto} .brand .cn small{ font-size:8.2px; letter-spacing:.028em; /* 英文微开，与中文等宽 */ white-space:nowrap; width:auto} footer .brand .cn b{font-size:14px} footer .brand .cn small{font-size:7.4px;letter-spacing:.03em} @media(max-width:1200px){ .brand .cn b{font-size:14px} .brand .cn small{font-size:7.4px;letter-spacing:.03em} } @media(max-width:1050px){ /* 再窄就只留 logo 图，公司名收起，保证导航一行放得下 */ .brand .cn{display:none} .brand .mk{padding-right:0} } /* ============================================================ CCM 四项调整 ============================================================ */ /* ① 遮罩再调薄：中段 .40 → .26，让铜管照片更清楚 */ @media(max-width:900px){ } /* ② 地图据点加大：主据点 3.4→5.2，次据点 2.8→4.2，光晕同步放大 */ .hero-panel .worldmap .mk-main{r:5.2;stroke-width:1.6} .hero-panel .worldmap .mk-dot{r:4.2;stroke-width:1.4} .hero-panel .worldmap .mk-halo{r:9} .hero-panel .worldmap .mk-pulse, .hero-panel .worldmap .mk-pulse2{r:8;stroke-width:1.2} /* ③ 连线动画加明显：加粗、提高不透明度、加辉光、缩短周期 */ .hero-panel .worldmap .arcline{ stroke:rgba(139,75,34,.42); stroke-width:1.6} .hero-panel .worldmap .flow{ r:3.4; fill:#c9783c; filter:drop-shadow(0 0 4px rgba(201,120,60,.9))} /* ④ logo 与公司名收紧：16→9px、15→10px */ .brand .mk{padding-right:9px} .brand .cn{padding-left:10px} footer .brand .mk{padding-right:8px} footer .brand .cn{padding-left:9px} @media(max-width:1200px){ .brand .mk{padding-right:8px} .brand .cn{padding-left:9px} } /* ============================================================ 面板地图：连线流动动画（补回） ------------------------------------------------------------ 之前做背景地图时把 SVG 里的 animate/animateMotion 全删了， 面板这张地图也跟着变成完全静止的。 现在用 CSS 动画补回来 —— 比 SMIL 更可控，也不依赖浏览器对 animateMotion 的支持。 做法：每条连线叠一条更亮更粗的"光点线"，用 dasharray 位移 让一段亮光沿线游走。底线常显，保证静止时也看得出连接关系。 ============================================================ */ .hero-panel .worldmap .arcglow{ fill:none; stroke:#c9783c; stroke-width:2.6; stroke-linecap:round; stroke-dasharray:34 210; filter:drop-shadow(0 0 3px rgba(201,120,60,.85)); animation:ccmflow 5.5s linear infinite} .hero-panel .worldmap .arcglow:nth-of-type(2){animation-delay:-1.8s} .hero-panel .worldmap .arcglow:nth-of-type(3){animation-delay:-3.6s} @keyframes ccmflow{ from{stroke-dashoffset:244} to{stroke-dashoffset:0} } /* 据点呼吸 + 外圈扩散涟漪 */ .hero-panel .worldmap .mk-main, .hero-panel .worldmap .mk-dot{ transform-box:fill-box;transform-origin:center; animation:ccmbreath 3s ease-in-out infinite} @keyframes ccmbreath{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.82;transform:scale(1.16)} } .hero-panel .worldmap .mk-pulse, .hero-panel .worldmap .mk-pulse2{ fill:none;stroke:#a8571f;stroke-width:1.1; transform-box:fill-box;transform-origin:center; animation:ccmripple 3s ease-out infinite} .hero-panel .worldmap .mk-pulse2{animation-delay:-1.5s} @keyframes ccmripple{ 0%{opacity:.6;transform:scale(.4)} 70%{opacity:.14;transform:scale(1)} 100%{opacity:0;transform:scale(1.3)} } /* 四个据点错开，避免整齐闪烁 */ .hero-panel .worldmap .site:nth-of-type(2) .mk-dot, .hero-panel .worldmap .site:nth-of-type(2) .mk-pulse{animation-delay:-.75s} .hero-panel .worldmap .site:nth-of-type(3) .mk-dot, .hero-panel .worldmap .site:nth-of-type(3) .mk-pulse{animation-delay:-1.5s} .hero-panel .worldmap .site:nth-of-type(4) .mk-dot, .hero-panel .worldmap .site:nth-of-type(4) .mk-pulse{animation-delay:-2.25s} @media(prefers-reduced-motion:reduce){ .hero-panel .worldmap .arcglow, .hero-panel .worldmap .mk-main, .hero-panel .worldmap .mk-dot, .hero-panel .worldmap .mk-pulse, .hero-panel .worldmap .mk-pulse2{animation:none} } /* ============================================================ 去掉区段白色遮罩 ------------------------------------------------------------ 原来给 .stats / #about / .cmpsec / #prod / #apps / .ctc 各加了 一层 rgba(248,244,238,.24) 的垫底，本意是保证正文可读； 但叠在 #photoveil 上面就成了双层遮罩，地图往下整片发白。 现在移除 —— 可读性由 #photoveil 与文字自身色深保证，实测仍达标。 ============================================================ */ .stats::before,#about::before,.cmpsec::before, #prod::before,#apps::before,.ctc::before{display:none} /* ============================================================ 背景层（统一定义，此前累积了 7 条 #photoveil、5 条 #photobg） ------------------------------------------------------------ 横向接缝的成因：#photoveil 是 position:fixed，它的渐变锚在 【视口】上而不是页面上，所以渐变的色阶转折点始终停在屏幕 固定高度处 —— 滚动时那条转折线不动，就成了一道横贯画面的接缝。 改法：遮罩改成【均匀半透明】，不做纵向渐变，就没有转折线。 首屏文字的可读性由 .hero 自己的局部渐变负责（见下）， 这样各区段都干净，也不会双层叠加发白。 ============================================================ */ #photobg{ position:fixed;inset:0;z-index:-2;pointer-events:none; background:url("../img/hero-default.jpg") center 45%/cover no-repeat; filter:saturate(.92) brightness(1.02) contrast(1.0)} #photoveil{ position:fixed;inset:0;z-index:-1;pointer-events:none; background:rgba(248,244,238,.42)} /* 均匀一层，无渐变、无接缝 */ /* 首屏局部渐变：只在 .hero 内部，随内容走，不会产生跨区段的接缝 */ .hero{position:relative} .hero::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg, rgba(248,244,238,.52) 0%, rgba(248,244,238,.10) 34%, rgba(248,244,238,.34) 100%)} /* 页头保护带：导航文字压在照片上，需要一条局部底衬 */ header::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(180deg,rgba(248,244,238,.55),rgba(248,244,238,0))} @media(max-width:900px){ #photoveil{background:rgba(248,244,238,.56)} } /* ============================================================ CCM Logo：Broadway 字体（替代原来的抠图） ------------------------------------------------------------ 原来从蓝底 logo 图抠出来做成矢量，但源图只有 157×67， 半透明边缘还残留蓝底色，放大后又糊又有重影。 其实它就是 Broadway 字体的 "CCM" —— 直接用字体渲染， 矢量字形完全光滑，任意缩放都锐利，还省掉 12KB 的路径数据。 字体栈：Broadway 是 Windows 随 Office 装的（覆盖面广）， 后面几个是形态接近的 art-deco 装饰体做兜底。 ============================================================ */ .brand .mk{ font-family:'Broadway','Broadway BT','Bodoni MT Black', 'Playbill','Poplar Std','Cooper Black', 'Georgia',serif; font-weight:400; font-style:normal; font-size:34px; line-height:.92; letter-spacing:.06em; color:var(--g600); white-space:nowrap; padding-right:9px; display:flex; flex-direction:column; align-items:flex-start; -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; transition:color .22s ease,transform .22s ease} /* since 1973 —— 原 logo 上那行小字 */ .brand .mksince{ font-family:'DM Sans','Segoe UI',Arial,sans-serif; font-size:8px; font-weight:700; letter-spacing:.34em; line-height:1.2; margin-top:1px; text-transform:lowercase; color:var(--n500); transition:color .22s ease} /* 悬停：主色跳到亮档 + 轻微上移，交互反馈明确 */ .brand:hover .mk{color:var(--g400);transform:translateY(-1px)} .brand:hover .mksince{color:var(--g500)} .brand:active .mk{transform:translateY(0)} footer .brand .mk{font-size:30px;padding-right:8px} footer .brand .mksince{font-size:7.2px;letter-spacing:.3em} @media(max-width:1200px){ .brand .mk{font-size:30px;padding-right:8px} .brand .mksince{font-size:7.2px;letter-spacing:.3em} } @media(max-width:760px){ .brand .mk{font-size:27px;padding-right:0} .brand .mksince{font-size:6.6px;letter-spacing:.26em} } /* ============================================================ 背景照片固定：桌面端必须 fixed ------------------------------------------------------------ 之前手机端媒体查询里写了 background-attachment:scroll， 但那条规则漏在了媒体查询外面，把桌面端也一起改成 scroll —— 结果照片跟着页面滚动，滚过首屏就没了，往下整片发白。 ============================================================ */ #photobg{background-attachment:fixed} @media(max-width:900px){ /* 手机端 fixed 会有性能问题和 iOS 上的抖动，改 scroll 并放大覆盖 */ #photobg{background-attachment:scroll;background-size:cover; height:100vh;position:fixed} } /* 均匀遮罩下的两处补救 ------------------------------------------------------------ 实测「关於正文」3.70、「應用區」4.15 都低于 4.5。 遮罩改成均匀层后这两处底色偏亮，把文字压深一档即可， 不必再加区段遮罩（那正是接缝的来源）。 */ #about p{color:var(--n700)} #about .lead{color:var(--n900)} .ac p{color:var(--n700)} .ac h4{color:var(--n900)} /* ============================================================ 两处修正 ============================================================ */ /* ① since 1973 与 CCM 两端对齐 实测 CCM 宽 81.7px、since 1973 宽 67.7px，右缘差 14px。 用两端对齐让 since 1973 自动撑满 CCM 的宽度 —— 字距由浏览器 分配，不用手调数值，CCM 字号变了也自动跟随。 */ .brand .mk{align-items:stretch} .brand .mksince{ display:block; width:100%; letter-spacing:0; /* 交给 justify 分配，不再手设 */ text-align:justify; -moz-text-align-last:justify; text-align-last:justify} /* ② 去掉首屏标题下方的遮罩过渡 .hero::before 的渐变在 34% 处从 .10 升到 .34，那道过渡就是 标题下方看到的一条遮罩。首屏文字已经压深过（对比度 5.76）， 不需要这层额外底衬，整条去掉。 */ .hero::before{display:none} /* 去掉首屏遮罩后，副标题对比度掉到 4.26（需 4.5），压深一档补回。 不重新加遮罩 —— 那正是你要去掉的东西。 */ /* 首屏副標題：實測底色壓在照片高光上（RGB 約 246,222,205）， --n700 只有 4.26，改用 --n900 得到 12+ 的對比度。 不重新加遮罩 —— 那正是要去掉的東西。 */ .hero p{color:var(--n900);opacity:.9} /* ============================================================ 页头三处调整 ============================================================ */ /* ② 右侧公司名放大到与 CCM 同高 ------------------------------------------------------------ CCM 实测字形高 37px；中文原来 15.5px 显得小一截。 放大到 20px（两行合起来约 37px），与左侧等高。 */ .brand .cn b{ font-size:20px; letter-spacing:-.04em} .brand .cn small{ font-size:10.4px; letter-spacing:.01em} footer .brand .cn b{font-size:18px} footer .brand .cn small{font-size:9.4px} @media(max-width:1300px){ .brand .cn b{font-size:17px} .brand .cn small{font-size:8.9px} } @media(max-width:1100px){ /* 再窄就收起公司名，只留 CCM，保证导航一行放得下 */ .brand .cn{display:none} .brand .mk{padding-right:0} } /* ③ 导航颜色加深、字重加粗 ------------------------------------------------------------ 原来 font-weight:300（细体）+ rgb(115,102,91)，又细又淡。 跟 NTT 站同一处理：字重 600、颜色压深。 */ @media(min-width:901px){ .menu a{ font-weight:600; color:var(--n700); transition:color .22s,background .22s} .menu a:hover{color:var(--g600);background:var(--g50)} .menu a.on{font-weight:700;color:var(--g700)} } /* 导航加粗的断点修正：原来写 min-width:1101px，漏掉了 901~1100px 这段（那里导航仍是横排的），字重还是 300。 改成 901px 起生效，与汉堡菜单的断点对齐。 */ @media(min-width:901px){ .menu a{font-weight:600;color:var(--n700)} .menu a.on{font-weight:700;color:var(--g700)} } /* ============================================================ since 1973：字号加大、字距收紧 ------------------------------------------------------------ 之前两种做法都不理想： · text-align:justify —— 只在词间分配空白，字母不散， since 和 1973 被推到两端，中间一大片空 · flex space-between 逐字铺开 —— 字母散得太开， 两个词组失去整体感 现在改成：字号从 8.6 加大到 11px、字距 .12em（适度散开但不脱节）， 宽度由内容决定、不再强行撑满 CCM —— 视觉上两组词各自成形， 整体宽度自然接近 CCM，不会中间空一大块。 ============================================================ */ .brand .mksince{ display:block; width:auto; font-family:'DM Sans','Segoe UI',Arial,sans-serif; font-size:11px; font-weight:700; line-height:1.15; letter-spacing:.12em; word-spacing:.06em; margin-top:1px; text-align:left; text-align-last:left; -moz-text-align-last:left; white-space:nowrap; color:var(--n500); transition:color .22s ease} .brand:hover .mksince{color:var(--g500)} footer .brand .mksince{font-size:10px;letter-spacing:.1em} @media(max-width:1300px){ .brand .mksince{font-size:9.6px;letter-spacing:.1em} } /* ============================================================ CCM Logo 金色：按官方 logo 原图取色 ------------------------------------------------------------ 原来 .mk 用 var(--g600)（#8b4b22 铜色），与官方 logo 不符。 对原图采样结果：暗部 #6b5220 / 主色 #c4a24e / 高光 #e2ca81， 是一层带腰部高光的压铸金属金，不是平色 —— 所以用竖向渐变还原。 页头、页脚同一套：两处 logo 都是 Broadway 字体渲染的 .mk 文本 （templates/index.html 第 36、377 行），且页脚底色是浅暖白 rgba(248,244,238,.72)，不需要深底专用的提亮版。 ============================================================ */ :root{ --ccm-gold-deep:#8f6f28; --ccm-gold:#c4a24e; /* 平色兜底值 */ --ccm-gold-hi:#d8bc70; --ccm-gold-metal:linear-gradient(178deg, #8f6f28 0%, #c9a850 26%, #ecd894 47%, #b8952f 62%, #d8bc70 100%); /* 悬停：整条提亮一档，保持同一道高光位置 */ --ccm-gold-metal-hi:linear-gradient(178deg, #a8842c 0%, #d8bc70 26%, #f5e6ae 47%, #c9a44a 62%, #e8d18c 100%); } /* 兜底层：不支持 background-clip:text 时就是平色金 */ .brand .mk{color:var(--ccm-gold)} .brand:hover .mk{color:var(--ccm-gold-hi)} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .brand .mk{ background-image:var(--ccm-gold-metal); background-repeat:no-repeat; /* 关键一行：.mk 是 flex 纵向容器，里面还嵌着 since 1973。 渐变若铺满整个盒子，那道腰部高光会落到 since 那行上， CCM 只吃到渐变最顶端的暗部 —— 看起来就是一片死金。 .92em 正好是 .mk 的 line-height，把渐变锁在 CCM 这一行； 用 em 而非 px，各断点字号变化时自动跟随，不必逐个重写。 */ background-size:100% .92em; background-position:0 0; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } /* since 1973 是 .mk 的子元素，会继承透明填充导致整行消失，这里还原 */ .brand .mksince{ background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--n500); -webkit-text-fill-color:currentColor; } .brand:hover .mk{background-image:var(--ccm-gold-metal-hi);color:transparent} .brand:hover .mksince{color:var(--g500);-webkit-text-fill-color:currentColor} } /* ============================================================ since 1973 居中于 CCM 下方 ------------------------------------------------------------ .mk 之前是 align-items:stretch（配合已废弃的 justify 两端对齐）。 改 center：CCM 是最宽的那个 flex 项，盒宽由它决定， since 1973 自然居中，CCM 字号变了也不用重算。 padding-left 是必需的：letter-spacing 会在最后一个字符之后 也补一份间距，算进盒宽却看不见，视觉上整行左偏半份。 补一份等量左内边距正好抵平（数值必须与该断点的 letter-spacing 一致）。 ============================================================ */ .brand .mk{align-items:center} .brand .mksince{ text-align:center; -moz-text-align-last:center; text-align-last:center; padding-left:.12em} /* letter-spacing:.12em */ footer .brand .mksince{padding-left:.1em} /* 该处 letter-spacing:.1em */ @media(max-width:1300px){ .brand .mksince{padding-left:.1em} /* 同上 */ } /* ============================================================ 修正：未滚动时 CCM 被冲淡成米白，滚动后才变回金色 ------------------------------------------------------------ 原因在第 275 行： header .brand{text-shadow:0 1px 2px rgba(248,244,238,.75)} 页头透明时给品牌区加的米白投影，滚动后由第 276 行清掉。 平色文字没问题，但 .mk 现在是 background-clip:text + -webkit-text-fill-color:transparent —— 字面本身是透明的， 投影就直接从字内透出来。那层米白盖在金色渐变上， CCM 被冲淡成奶白；一滚动投影撤掉，金色才露出来。 这就是「下滑时 logo 变色」。 解法：.mk 不用 text-shadow，改用 filter:drop-shadow。 drop-shadow 是按元素实际绘制出来的 alpha 生成阴影、只落在字形 外侧，不会穿过字面，所以渐变一点都不被污染。 铜管底图与金色同为暖色系、明度也接近，这层浅色描边留着 —— 去掉的话 logo 会糊进照片里。 ============================================================ */ header .brand .mk{text-shadow:none} header:not(.scrolled) .brand .mk{ filter:drop-shadow(0 1px 1.5px rgba(248,244,238,.85)) drop-shadow(0 0 6px rgba(248,244,238,.55))} /* 滚动后页头已有毛玻璃底衬，不需要描边，撤掉让金色最干净 */ header.scrolled .brand .mk{filter:none} /* 页脚是浅暖白实底，从来没有这层投影，保持无 filter */ footer .brand .mk{filter:none;text-shadow:none} @media(prefers-reduced-motion:no-preference){ header .brand .mk{transition:filter .35s ease} } /* ============================================================ 页头：取消首屏透明，恒定用「滚动后」那套底色 ------------------------------------------------------------ 原设计是首屏透明（让铜管底图透上来）、滚动后浮出毛玻璃。 现在改成一直是滚动后的样子，所以要把三样「只为透明态存在」 的补偿一起撤掉，否则会留下多余的浅色描边和压深遮罩： ① header{background:transparent} → 换成 scrolled 的值 ② header::before 的渐变遮罩 → 关掉 ③ header .brand/.menu/.lang 的米白 text-shadow → 归零 ④ header:not(.scrolled) .brand .mk 的 drop-shadow → 归零 ③④ 必须用与原规则【相同的选择器】写，否则优先级不够压不掉： header:not(.scrolled) .brand .mk 是「1 元素 + 3 类」， 写成 header .brand .mk（1 元素 + 2 类）会被它盖回去。 ============================================================ */ header{ background:rgba(250,253,252,.90); border-bottom:1px solid rgba(104,65,37,.12); -webkit-backdrop-filter:blur(20px) saturate(1.15); backdrop-filter:blur(20px) saturate(1.15); box-shadow:0 6px 24px rgba(104,65,37,.06)} header::before{display:none} header .brand,header .menu a,header .lang a{text-shadow:none} header:not(.scrolled) .brand .mk{filter:none} /* ============================================================ 首屏背景：轮播 + 去掉整页米白遮罩 ------------------------------------------------------------ ① 轮播 #photobg 原来是自己带一张写死的 background-image （url("../img/hero-default.jpg")），后台上传的图根本没接进来。 现在它只当容器，每张图一层 .bgslide，靠 .on 切 opacity 做淡入淡出。 background 用 shorthand 归零，顺带把 1990 行那条 background-attachment:fixed 一起重置 —— 子层是 absolute 定位， 父层已经 fixed 了，不再需要 attachment，也就绕开了 iOS 上 background-attachment:fixed 的抖动问题。 #photobg 自身的 filter 保留，会作用到所有子层，不必逐层写。 ② 去遮罩 #photoveil 原来是整页一层 rgba(248,244,238,.42) 的米白 —— 就是 照片上那层白蒙蒙。这里抽成 --veil 变量并置 0。 ⚠️ 这层遮罩本来是为可读性存在的：之前实测「关於正文」3.70、 「應用區」4.15，已经低于 WCAG AA 的 4.5，那是在有 .42 遮罩的 情况下测的。归零后正文直接压在铜管实拍上，对比度会明显更低。 要找回一点，只改下面这一个数即可（.12~.20 通常够用， 肉眼几乎看不出发白，但能把对比度拉回来）： :root{ --veil: .15 } ============================================================ */ :root{ --veil: 0 } #photobg{background:none} /* ---------- 轮播层：叠化 + 对焦 ---------- 两个要点，缺一个就会显得生硬： ① 旧图不淡出。 常见写法是旧图 opacity 1→0、新图 0→1 同时过渡，但中途两层 都是半透明，叠加后约有 25% 的页面底色透上来，画面正中间会 发白闪一下 —— 时长调多久都救不了，病根是那个洞。 这里让旧图挂 .prev 原地保持不透明垫在下层，只有新图淡入， 任何时刻画面 = 新图×α + 旧图×(1−α)，合计恒为 100%。 新图淡完后 main.js 再把 .prev 摘掉。 ② 进场由虚变实。 新图带 9px 模糊进场，1.8 秒内收干净，像镜头对上焦。 比纯淡化多一点"过场"的意味，又不引入位移，不抢内容。 两个时长都抽成变量，改这里一处即可（main.js 会读 --hero-fade 自动对齐撤层时机和轮播间隔，不用两边同步改）。 */ :root{ --hero-fade:2.6s; /* 淡入时长 */ --hero-focus:2.6s; /* 对焦时长（模糊收干净所需时间） */ --hero-stay:6s; /* 每张停留时长（不含淡入） */ --hero-blur:8px; /* 进场模糊量 */ } #photobg .bgslide{ position:absolute;inset:0; background-position:center 45%; background-size:cover; background-repeat:no-repeat; opacity:0;z-index:0; filter:blur(var(--hero-blur)); /* 缓动用 ease-in 而不是 ease：ease 前期就把模糊快速衰减掉， 而新图那时 opacity 还低、底下压着清晰的旧图，合成结果里 根本看不出模糊 —— 观感就只剩淡化。ease-in 是前期慢、末尾 才收干净，模糊能撑到新图主导画面之后。 */ transition:opacity var(--hero-fade) cubic-bezier(.33,0,.25,1), filter var(--hero-focus) ease-in; will-change:opacity,filter} /* 上一张：垫在下面保持不透明，且不参与任何过渡 */ #photobg .bgslide.prev{opacity:1;z-index:1;filter:blur(0);transition:none} /* 当前这张：最上层 */ #photobg .bgslide.on{opacity:1;z-index:2;filter:blur(0)} /* 手机降级：blur 是全屏逐帧重算，低配机上会掉帧。 小屏只保留叠化，去掉模糊。 */ @media(max-width:900px){ #photobg .bgslide{ filter:none; transition:opacity var(--hero-fade) cubic-bezier(.33,0,.25,1)} #photobg .bgslide.prev, #photobg .bgslide.on{filter:none} } /* 系统开了「减少动态效果」：同样去掉模糊，只留最朴素的叠化 */ @media(prefers-reduced-motion:reduce){ #photobg .bgslide{filter:none;transition:opacity .8s linear} #photobg .bgslide.prev, #photobg .bgslide.on{filter:none} } #photoveil{background:rgba(248,244,238,var(--veil))} @media(max-width:900px){ /* 手机端原来是 .56，比桌面更厚；一并跟随变量 */ #photoveil{background:rgba(248,244,238,var(--veil))} } /* ============================================================ 首屏可读性：把遮罩收到文字底下，而不是整页盖白 ------------------------------------------------------------ 问题：--veil 归零后，首屏大标题第二行（铜色 .gcu）和副标题 直接压在铜管实拍上。那张照片同时有很亮的高光和很暗的阴影， 所以【任何单一文字颜色都不可能在整幅图上都可读】—— 这不是颜色调不好，是背景本身没有稳定明度。 所以不走"整页均匀盖白"那条路（那正是你说的白蒙蒙），改成： ① 整页遮罩只留很薄一层（--veil .14）， 管的是关於/應用那些正文区，肉眼基本看不出发白； ② 首屏单独加一层【横向】渐变，左浓右透（--scrim）。 文字在左侧（max-width:540px），铜管主体和毛玻璃面板在右侧， 所以左边压住、右边保持原色，照片的质感不受影响。 为什么用横向而不是纵向：#photoveil 当年那道横贯画面的接缝， 成因是它 position:fixed + 纵向渐变，色阶转折点锚在视口固定高度上， 滚动时不动就成了一条线。这里是 .hero 内部的 absolute 层， 跟着内容走；而且是横向渐变，压根不存在横向转折线。 ============================================================ */ :root{ --veil:.14; /* 整页薄雾。0 = 完全不盖；.12~.20 通常够用 */ --scrim:.90; /* 首屏左侧最浓处。字还是看不清就往上加到 1 */ } /* 首屏横向遮罩：左浓 → 右透 */ .hero::before{ content:""; display:block; /* 覆盖前面那条 display:none */ position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(96deg, rgba(248,244,238,var(--scrim)) 0%, rgba(248,244,238,calc(var(--scrim) * .78)) 26%, rgba(248,244,238,calc(var(--scrim) * .33)) 55%, rgba(248,244,238,0) 78%)} @media(max-width:900px){ /* 手机端文字占满整宽，横向渐变没意义，改成整块压住 */ .hero::before{ background:linear-gradient(180deg, rgba(248,244,238,calc(var(--scrim) * .92)) 0%, rgba(248,244,238,calc(var(--scrim) * .82)) 70%, rgba(248,244,238,calc(var(--scrim) * .55)) 100%)} } /* ============================================================ 遮罩改为整页统一，消除首屏底边那道分层 ------------------------------------------------------------ 上一版把横向遮罩做在 .hero::before 上，只覆盖首屏；首屏以下 只有 --veil 那层薄雾。两者浓度差得远，.hero 的下边界就成了 一条横贯全宽的明显台阶（你截图里那条）。 改法：把同一条横向渐变搬到 #photoveil（position:fixed，覆盖整页）， .hero 自己那层撤掉。这样从上到下只有一层遮罩，没有任何边界。 横向渐变放在 fixed 层上是安全的 —— 当年那道接缝的成因是 【纵向】渐变 + fixed：色阶转折点锚在视口某个高度上，内容滚过去 转折线不动，就显出一条线。横向渐变没有纵向转折点，滚动时 每一行的浓度都一样，不可能出现横线。 右侧不能收到 0：首屏文字在左侧，但首屏以下的区块标题是居中的， 右半边也有字。所以给右侧留一个下限 --scrim-r。 ============================================================ */ :root{ --scrim:.90; /* 左侧（首屏文字侧）最浓 */ --scrim-r:.38; /* 右侧下限。铜管想更鲜明就往下调，字糊了就往上调 */ } /* 整页唯一的一层遮罩。覆盖前面基于 --veil 的那条纯色规则 */ #photoveil{ background:linear-gradient(96deg, rgba(248,244,238,var(--scrim)) 0%, rgba(248,244,238,calc((var(--scrim) + var(--scrim-r)) / 2)) 45%, rgba(248,244,238,var(--scrim-r)) 100%)} /* 首屏不再单独加一层，否则左上角会被叠两次 */ .hero::before{display:none} @media(max-width:900px){ /* 手机端文字占满整宽，左右差异没意义，渐变压平 */ #photoveil{ background:linear-gradient(96deg, rgba(248,244,238,var(--scrim)) 0%, rgba(248,244,238,calc(var(--scrim) - (var(--scrim) - var(--scrim-r)) * .28)) 100%)} .hero::before{display:none} } /* ============================================================ 英文界面：标题字体换成 Plus Jakarta Sans + 首屏标题可换行 ------------------------------------------------------------ ① Syne 是很宽的展示字体，英文长标题既不好看又容易撑破版面。 英文页所有原本用 Syne 的位置改用 Plus Jakarta Sans（自托管， 见 fonts.css）。中文页不受影响。 ② 首屏标题原来 white-space:nowrap + width:max-content（960/971 行）， 标题一长就顶出左栏、压到右侧图片。现在允许在单词间换行 （JS 已按单词分组，单词内不会断开），text-wrap:balance 让两行 长短均衡，避免最后一行只剩一个词。 ============================================================ */ html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] .syne, html[lang="en"] #pre .tx,html[lang="en"] .ac .bg,html[lang="en"] .cmp h3, html[lang="en"] .cmp-badge,html[lang="en"] .cmp-meta .n,html[lang="en"] .formfall .ph2, html[lang="en"] .geofall .gt,html[lang="en"] .mini .n,html[lang="en"] .st .n, html[lang="en"] .worldmap .lb{ font-family:'Plus Jakarta Sans','Segoe UI','Helvetica Neue',Helvetica,Arial,'PingFang SC','Microsoft YaHei',sans-serif} /* 逐字动画的单词外壳：本身不参与动画，只负责「单词内不断行」 */ .blur .bw{display:inline-block;white-space:nowrap;opacity:1;filter:none;transform:none;animation:none} html[lang="en"] .hero h1{width:auto;max-width:100%;font-weight:800;letter-spacing:-.025em; font-size:clamp(34px,3.6vw,56px)} html[lang="en"] .hero h1 .blur{white-space:normal;width:auto;max-width:100%;text-wrap:balance} @media(max-width:1180px){ html[lang="en"] .hero h1{font-size:clamp(30px,3.9vw,46px)} } @media(max-width:900px){ html[lang="en"] .hero h1{font-size:clamp(24px,6.8vw,40px)} /* 手机上 "Design & Manufacturing" 保持一行 */ } /* ============================================================ 产品图片放大（点右下角 → 在本页对话框看大图） ------------------------------------------------------------ 右下角 → 图标保持原样（样式、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(43,29,18,.82);-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(168,87,31,.16)} .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}} /* ============================================================ Logo 手写标志改为矢量轮廓（templates/_logo_mk.svg） ------------------------------------------------------------ Brush Script MT 只有装了 Office 的 Windows 才有，iPhone / 安卓 / Mac 会掉到 Bradley Hand 等替代字体，字形完全不同。现在把「NTT Tube」按上面 同样的字号、字距 -.045em、描边 .015em 排好后转成路径，直接内嵌： 尺寸全部用 em，所以上面各断点的 font-size 仍然控制大小；颜色走 currentColor，hover 变色照旧。SVG 的 margin 是负值，只为让斜体伸出去的 笔画完整显示，排版占位与原来的文字完全相同。 ============================================================ */ .brand .mk .mk-svg{display:block;overflow:visible}