@charset "UTF-8"; /* ============================================================ 全局 ============================================================ */ :root{ --navy:#08131f;--navy2:#0e2136;--navy3:#14304a;--steel:#2d4a6b; --accent:#ff7a18;--accent2:#ffb15c;--accent3:#fff5ec; --line:#e4eaf1;--text:#152432;--muted:#6b7c90;--muted2:#93a5b8; --bg:#f5f8fb;--white:#fff; --r:14px;--r-lg:18px; --shadow:0 4px 22px rgba(8,19,31,.07); --shadow-lg:0 20px 54px rgba(8,19,31,.15); --max:1260px; --ease:cubic-bezier(.22,1,.36,1); /* 顶部条（电话/社交/国别）的实际高度：导航栏 sticky 时要用它做 top 偏移。 这里给的是**静态兜底值**；真实高度由 site.js 的 syncTopbarHeight() 量出来覆盖 （顶栏在窄屏/长语言下会变成两行，写死一定会错位）。 */ --topbar-h:48px; } @media (max-width:680px){ :root{--topbar-h:58px} } @media (max-width:560px){ :root{--topbar-h:54px} } *{margin:0;padding:0;box-sizing:border-box} /* 锚点跳转要避开**两条**常驻栏（顶部条 + 主导航），否则跳过去的标题会被压在栏下面 */ html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar-h) + 100px)} body{ font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif; color:var(--text);background:var(--white);line-height:1.7; -webkit-font-smoothing:antialiased;overflow-x:hidden; } a{text-decoration:none;color:inherit} ul{list-style:none} img{max-width:100%;display:block} button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit} button{background:none;border:none;cursor:pointer} .wrap{max-width:var(--max);margin:0 auto;padding:0 24px;width:100%} .hide{display:none !important} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:#eef3f8} ::-webkit-scrollbar-thumb{background:#c6d3e0;border-radius:5px} ::-webkit-scrollbar-thumb:hover{background:var(--muted2)} /* ============================================================ 顶部条 ============================================================ */ /** * 顶部条（电话 / 关注我们 / 语言 / 国别）也**固定在顶部**，与主导航一起常驻。 * *

为什么要 sticky 而不是 fixed：fixed 会让它脱离文档流，得再给 body 补一个等高 * 的 padding-top，而顶栏高度是**动态**的（窄屏两行、长语言降字号），补错就是一屏空白。 * sticky 保留占位，滚动时自动贴住视口顶。 * *

层级：topbar 101 > header 100 —— 两者上下相邻、正常不会重叠， * 但滚动到最顶时若把 header 的 top 算小了，会出现 1px 叠压，让顶栏在上更自然。 * 顶栏里的下拉菜单是 z-index:130，仍在两者之上。 */ .topbar{ position:sticky;top:0;z-index:101; background:var(--navy);color:#9db4cc;font-size:13px; border-bottom:1px solid rgba(255,255,255,.06); } .topbar .wrap{ display:flex;justify-content:space-between;align-items:center; min-height:48px;gap:18px; } .tb-left{display:flex;gap:20px;align-items:center;flex:none} .tb-item{display:flex;align-items:center;gap:6px;white-space:nowrap;transition:color .25s} a.tb-item:hover{color:var(--accent2)} .tb-item svg{width:14px;height:14px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .tb-right{ flex:1;min-width:0;display:flex;justify-content:flex-end; align-items:center;gap:12px; } .tb-search{ display:flex;align-items:center;height:34px;flex:none; padding:0 4px 0 11px;border-radius:9px; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12); transition:.25s; } .tb-search:focus-within{background:rgba(255,255,255,.11);border-color:rgba(255,122,24,.5)} .tb-search-ic{width:14px;height:14px;flex:none;stroke:#7d95ad;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:.25s} .tb-search:focus-within .tb-search-ic{stroke:var(--accent2)} .tb-search input{ width:168px;background:none;border:none;outline:none; color:#e8f0f8;font-size:12.5px;padding:0 9px; transition:width .32s var(--ease); } .tb-search input::placeholder{color:#6b839c} .tb-search:focus-within input{width:212px} .tb-search input::-webkit-search-cancel-button{-webkit-appearance:none;display:none} .tb-search-go{ width:26px;height:26px;border-radius:7px;flex:none; display:grid;place-items:center;background:var(--accent);transition:.22s; } .tb-search-go:hover{background:#ff5e00} .tb-search-go svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .tb-lang-link{ display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;flex:none; border-radius:9px;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);color:#cfe0f0; font-size:12.5px;font-weight:600;transition:.22s;white-space:nowrap; } .tb-lang-link:hover{background:rgba(255,255,255,.13);color:#fff;border-color:rgba(255,122,24,.5)} .tb-lang-link i{ font-style:normal;font-size:9.5px;font-weight:800;font-family:Arial,sans-serif; letter-spacing:.4px;padding:2px 5px;border-radius:4px; background:var(--accent);color:#fff;transition:.22s; } .tb-lang-link:hover i{background:#ff5e00} .tb-lang-link .tb-go{ width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.6; opacity:.5;transition:transform .3s,opacity .22s;stroke-linecap:round;stroke-linejoin:round; } .tb-lang-link:hover .tb-go{transform:translateX(3px);opacity:1} .tb-social{position:relative;flex:none} .tb-social-cur{ display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px; border-radius:9px;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);color:#cfe0f0; font-size:12.5px;font-weight:600;cursor:pointer;transition:.22s;white-space:nowrap; } .tb-social-cur:hover{background:rgba(255,255,255,.13);color:#fff} .tb-social-cur .tb-caret{ width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.6; opacity:.6;transition:transform .3s; } .tb-social.open .tb-social-cur{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,122,24,.5)} .tb-social.open .tb-social-cur .tb-caret{transform:rotate(180deg)} .tb-social-menu{ position:absolute;top:calc(100% + 10px);right:0;min-width:206px; background:#fff;border-radius:14px;border:1px solid var(--line); box-shadow:0 22px 54px rgba(8,19,31,.24);padding:8px; opacity:0;visibility:hidden;transform:translateY(8px); transition:.26s var(--ease);z-index:130; } .tb-social.open .tb-social-menu{opacity:1;visibility:visible;transform:translateY(0)} .tb-social-menu a{ display:flex;align-items:center;gap:10px;padding:9px 11px; border-radius:9px;font-size:13.5px;color:#33475c;font-weight:500; transition:.2s;white-space:nowrap; } .tb-social-menu a svg{width:16px;height:16px;flex:none;fill:currentColor;opacity:.8;transition:.2s} .tb-social-menu a span{flex:1;min-width:0} .tb-social-menu a em{font-style:normal;font-size:10.5px;color:var(--muted2);font-family:Arial,sans-serif} .tb-social-menu a:hover{background:var(--accent3);color:var(--accent)} .tb-social-menu a:hover svg{opacity:1} .tb-social-menu a:hover em{color:var(--accent2)} /* 平台数量已从 6 增到最多 12（TikTok / Instagram / 微信 / 阿里国际站 / 中国制造网 / Pinterest）， 菜单会超出视口高度 ⇒ 限高 + 内部滚动（滚轮/触屏都不会把顶栏顶穿）。 */ .tb-social-menu{max-height:min(74vh,560px);overflow-y:auto;overscroll-behavior:contain} /* ============================================================ 主导航 ============================================================ */ header{ /* ★ top 不再是 0：它下面永远压着一条常驻的顶部条（电话/社交/国别）， 所以吸附位置要往下让出那条的高度（真实值由 site.js 量出来后写进 --topbar-h）。 */ position:sticky;top:var(--topbar-h);z-index:100;background:rgba(255,255,255,.94); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line);transition:box-shadow .3s; } header.scrolled{box-shadow:0 6px 26px rgba(8,19,31,.09)} .nav{display:flex;align-items:center;justify-content:space-between;height:76px;transition:height .3s;gap:16px} header.scrolled .nav{height:66px} /* ★ logo 区域限宽（用户 2026-10-18 要求 ✓） —— 国外口号较长（如 "Steel Manufacturing, Delivered Worldwide" 约 43 字符 ✓） 若不限宽 ⇒ 文本块被撑到 200px+ ⇒ 连同图标把整个头部撑开、挤压右侧菜单 ✗ 做法：给整个 .logo 定死最大宽度 ✓，口号在 .logo-text 内部换行 ✓ · max-width 320px = 图标 43 + 间距 11 + 文本最多 266 ✓（留足菜单空间 ✓） · min-width:0 让 flex 子项可收缩 ✓（不加会被内容顶宽 ✗） */ .logo{display:flex;align-items:center;gap:11px;flex:none;max-width:320px} .logo-text{min-width:0;max-width:266px} /* ★ 2026-10-20：图形标重新设计（钢卷端面剖面）。 * 容器规则改为"只负责尺寸与阴影"，视觉全部由 SVG 自己画 —— * 原来的渐变底 + 斜切 ::after 是给文字标做的装饰，留着会和 SVG 底色打架。 */ .logo-mark{ width:43px;height:43px;border-radius:11px;flex:none;display:block; box-shadow:0 4px 14px rgba(8,19,31,.26); } /* 页脚背景偏深，给图形标加一圈内描边，边界更清楚 */ footer .logo-mark{box-shadow:0 4px 14px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.10)} /* 顶栏在滚动收起时 logo 会缩小，图形标跟着缩但下限 30px（再小 U 形就糊了） */ .header-shrink .logo-mark{width:34px;height:34px;border-radius:9px} .logo-text b{display:block;font-size:19px;letter-spacing:2px;color:var(--navy);line-height:1.15;font-weight:800} .logo-text small{display:block;font-size:9.5px;letter-spacing:2.8px;color:var(--muted);font-family:Arial,sans-serif;font-weight:700} /* ★ 品牌口号（logo 下第二行）：小、细、淡，绝不抢主品牌 ✓ —— 必须显式重置三项，否则会出问题（实测踩过 ✗）： ① font-style: normal ← 默认斜体，中文斜了很难看 ✗ ② font-weight: 400 ← 父级 .logo-text 是 700，不重置会跟着加粗 ✗ ③ font-size ← 不设会继承品牌名的大字号 ✗ */ .logo-text .logo-slogan{display:block;font-style:normal;font-weight:400;font-size:10px;line-height:1.4;letter-spacing:.3px;color:var(--muted);opacity:.9;margin-top:3px;max-width:266px;font-family:inherit; /* ★ 长口号换行（国外站点 ✓）： · overflow-wrap:break-word ⇒ 德语/瑞典语的长单词也能断 ✓ · word-break:normal ⇒ 不在任意字符间硬断（否则西语/德语会出现半词换行 ✗） */ overflow-wrap:break-word;word-break:normal} /* ★ 小屏收紧 logo 区（≤720px ✓） —— 手机上 320px 的 logo + 左右 padding 会顶到菜单按钮 ✗ 做法：缩图标、缩文本宽度、口号字号略降 ✓（品牌名仍保持识别度 ✓） */ @media (max-width:720px){ .logo{max-width:220px;gap:9px} .logo-mark{width:38px;height:38px;border-radius:10px} .logo-mark span{font-size:14px} .logo-text{max-width:172px} .logo-text b{font-size:17px;letter-spacing:1px} .logo-text .logo-slogan{font-size:9.5px;max-width:172px;margin-top:2px} } .menu{display:flex;gap:1px;align-items:center;min-width:0;flex-wrap:nowrap} .menu > li{position:relative;min-width:0} /* ★ 菜单项长文本自适应（用户 2026-10-26 改口径：**缩字号，不换行**） —— 各语言长度差异很大：中文 2-4 字 vs 塔吉克/德语/意大利语可能 20+ 字符。 2026-10-18 曾按"允许换行 + max-width"处理，实测出现 `Асос/й`、`Produc/ts`、`Quali/ty` 这种**按字母断行**（截图见项目记录），比缩小字号难看得多，也会让顶栏忽高忽低。 现行： ① white-space:nowrap + 不设 max-width ✓（永不换行、也不按字母断） ② 由 site.js 的 fitMainNav() **按实际总宽逐级缩字号**（15 → 10px）， 到最小仍放不下才收左右内边距、最后才 overflow:hidden 兜底 ✓ ③ 抽屉模式（≤960px）恢复换行 —— 那里是竖排列表，不需要 nowrap ✓ */ .menu > li > a{ display:flex;align-items:center;justify-content:center;gap:6px; padding:11px 13px;font-size:15px;font-weight:600; color:#42586f;border-radius:9px;position:relative; white-space:nowrap;line-height:1.22;text-align:center; max-width:none; transition:color .28s var(--ease),background .28s var(--ease); } /* 窄屏时进一步压缩：字号与左右内边距 ↓，最大宽度 ↓（保证 6-7 个菜单项放得下 ✓） */ /** * ★ 1400 以下就收紧（不是 1200）：实测 1280 宽时主菜单已经被挤到按字母换行 * （截图上 "Hom e / Product s / Processin g"），因为基础规则给每项 max-width:132px， * 而右侧两个 CTA 的文案是**按语言取库**的 —— 中文"询价单 / 获取报价"很短， * 越南语却是 `Yêu cầu báo giá` + `Nhận báo giá`（长一倍多）。 * 处理：CTA 只留图标 + 计数（功能不变，仍可点），菜单项内边距与字号小幅收紧。 */ /** * ★ 1560 以下就把「询价单」按钮的**文字**收掉、只留图标 + 计数（2026-10-26）。 * * 原来这个断点是 1400，实测俄语/意大利语在 1440 下 7 个菜单项即使缩到最小 10px * 仍差 20–40px（`fitMainNav()` 只能 overflow:hidden，末尾会被切掉半截字）。 * 而右侧 CTA 的文案也是**按语言取库**的（`Запрос цены` / `Richiedi un preventivo`）， * 它占掉的正是菜单缺的那点宽度 —— 先牺牲 CTA 的文字（图标+数字仍表达同一功能）。 */ @media (max-width:1560px){ .rfq-btn .rfq-txt{display:none} } @media (max-width:1400px){ .rfq-btn .rfq-txt{display:none} .btn-nav{padding:0 14px;font-size:13px;white-space:nowrap} /* ★ 不再设 max-width（那是"按字母换行"的来源），只收内边距；字号由 fitMainNav() 动态算 */ .menu > li > a{padding:10px 10px;font-size:14px} } @media (max-width:1200px){ .menu > li > a{padding:10px 9px;font-size:14px} } .menu > li > a::after{ content:"";position:absolute;left:50%;right:50%;bottom:5px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:left .38s var(--ease),right .38s var(--ease),background .3s; } .menu > li > a:hover{color:var(--navy);background:rgba(255,122,24,.06)} .menu > li > a:hover::after{left:15px;right:15px} .menu > li.active > a{color:var(--navy);font-weight:700;background:rgba(255,122,24,.09)} .menu > li.active > a::after{left:15px;right:15px;background:var(--accent)} .menu > li > a .caret{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.6;transition:transform .3s;opacity:.5} .menu > li:hover > a .caret{transform:rotate(180deg);opacity:1} .sub{ position:absolute;top:calc(100% + 12px);left:50%; transform:translateX(-50%) translateY(10px); background:#fff;border-radius:16px;box-shadow:0 22px 56px rgba(8,19,31,.18); border:1px solid var(--line);padding:10px;opacity:0;visibility:hidden; transition:.28s var(--ease);z-index:110; } .sub::after{ content:"";position:absolute;top:-6px;left:50%;width:11px;height:11px;margin-left:-6px; background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line); transform:rotate(45deg);border-radius:2px 0 0 0; } .menu > li:hover .sub{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .sub::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px} .sub-simple{min-width:216px} .sub-simple a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;font-size:14px;color:#33475c;transition:.2s} .sub-simple a:hover{background:var(--accent3);color:var(--accent);padding-left:16px} .sub-simple a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;opacity:.5;stroke-linecap:round;stroke-linejoin:round} .sub-wide{width:min(880px,92vw);padding:22px;display:grid;grid-template-columns:1.15fr .85fr;gap:22px} /* 下拉面板是 grid 容器，主列必须 min-width:0，否则内容会把两列撑破 */ .sub-main{min-width:0} .sub-col-title{font-size:11.5px;font-weight:800;letter-spacing:1.8px;color:var(--muted2);text-transform:uppercase;margin-bottom:12px;padding-left:12px} .sub-prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px} .sub-prod{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;transition:.22s} .sub-prod:hover{background:var(--accent3)} .sub-prod:hover .sp-tx b{color:var(--accent)} .sp-ic{width:36px;height:36px;border-radius:9px;flex:none;display:grid;place-items:center;background:#eff5fb;color:var(--steel);transition:.25s} .sub-prod:hover .sp-ic{background:linear-gradient(140deg,var(--accent),#ff5e00);color:#fff} .sp-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .sp-tx b{display:block;font-size:13.5px;font-weight:600;color:var(--navy);transition:.22s;line-height:1.3} .sp-tx small{display:block;font-size:11px;color:var(--muted2);font-family:Arial,sans-serif} .sub-side{background:#f7fafd;border-radius:12px;padding:18px;display:flex;flex-direction:column} .sub-side .sub-col-title{padding-left:0;margin-bottom:14px} .side-item{display:flex;align-items:center;gap:9px;padding:8px 0;font-size:13.5px;color:#3d5570;transition:.2s;border-bottom:1px dashed #e3ebf4} .side-item:last-of-type{border-bottom:none} .side-item:hover{color:var(--accent);padding-left:5px} .side-item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none} .sub-promo{ display:block;padding:14px;border-radius:11px;margin-top:16px; background:linear-gradient(135deg,var(--navy2),var(--navy));color:#fff;transition:.28s; } .sub-promo span{display:block;font-size:11.5px;color:#9db4cc;margin-bottom:6px} .sub-promo b{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--accent2)} .sub-promo:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(8,19,31,.22)} .sub-promo svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .3s} .sub-promo:hover svg{transform:translateX(4px)} /* 新闻下拉：带小图标 + 分类色点 */ .sub-news{min-width:236px} .sub-news a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;font-size:14px;color:#33475c;transition:.22s} .sub-news a:hover{background:var(--accent3);color:var(--accent);padding-left:16px} .sub-news a svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;opacity:.55;flex:none;stroke-linecap:round;stroke-linejoin:round;transition:.22s} .sub-news a:hover svg{opacity:1} .sub-news a .dot{width:7px;height:7px;border-radius:50%;flex:none} .sub-news a em{font-style:normal;font-size:11px;color:var(--muted2);margin-left:auto;font-family:Arial,sans-serif} .sub-news a:hover em{color:var(--accent2)} .sub-news .sub-news-all{border-top:1px dashed #e3ebf4;margin-top:6px;padding-top:12px;color:var(--accent);font-weight:700} .sub-news .sub-news-all svg{stroke:var(--accent);opacity:1} .sub-news .sub-news-all:hover{background:transparent;padding-left:12px;color:var(--accent)} .nav-cta{display:flex;align-items:center;gap:10px;flex:none} .rfq-btn{ position:relative;display:flex;align-items:center;gap:8px;padding:10px 15px;border-radius:10px; border:1.5px solid var(--line);background:#fff;color:var(--navy);font-size:14px;font-weight:600; transition:.25s;cursor:pointer; } .rfq-btn:hover{border-color:var(--accent);color:var(--accent);background:#fff8f2} .rfq-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .rfq-count{min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--accent);color:#fff;font-size:11.5px;font-weight:800;display:grid;place-items:center;font-family:Arial,sans-serif} .rfq-count.bump{animation:bump .45s cubic-bezier(.34,1.56,.64,1)} @keyframes bump{0%{transform:scale(1)}45%{transform:scale(1.45)}100%{transform:scale(1)}} .burger{display:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:#fff;place-items:center;position:relative} .burger span{display:block;width:19px;height:2px;background:var(--navy);border-radius:2px;position:relative;transition:.3s} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;background:var(--navy);border-radius:2px;transition:.3s} .burger span::before{top:-6px} .burger span::after{top:6px} .burger.on span{background:transparent} .burger.on span::before{top:0;transform:rotate(45deg)} .burger.on span::after{top:0;transform:rotate(-45deg)} .nav-mask{position:fixed;inset:0;background:rgba(5,14,23,.55);backdrop-filter:blur(3px);z-index:95;opacity:0;visibility:hidden;transition:.3s} .nav-mask.show{opacity:1;visibility:visible} /* ============================================================ 按钮 ============================================================ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:11px 20px;border-radius:10px;font-size:14.5px;font-weight:600; transition:.28s var(--ease);cursor:pointer;border:none; /* `