/* ============================================================ 蓝蜂 OPC 官网 · 公开层共享样式（S8） 深色科技风：背景 070B14 + 蓝 2E6BFF + 青 22D3EE + 金 FFC43D 所有公开页（/ /bases/ /business/ /join/ /about/ /console/）共用。 内部演示页（cockpit/ai/sc/data/work）不引这份，保持独立。 ============================================================ */ *{box-sizing:border-box;margin:0;padding:0} :root{ --bg:#070B14;--panel:#0D1526;--panel2:#111C33;--panel3:#16233F; --line:rgba(46,107,255,.18);--line2:rgba(46,107,255,.34); /* ⚠ --tx3 是「次级灰字」（页脚 / 品牌副标题 / 区块副标题 / 注册页填写提示）。 原值 #5D6E8C 在深底上实测只有 3.17~3.82，低于正文要求的 4.5； 注册页的「用于验证手机号真实有效」「提交后由本城基地初审、总部终审开通」 这类引导语正好踩在这个值上 —— 那是转化路径上的话，不能读不清。 提到 #7C8DA8 后 4.84~5.84，达标；与 --tx / --tx2 仍保持三级层次。 与 assets/base.css 的 --tx3 取值保持一致（两个样式表是两个界面，但同一个设计令牌）。 */ --tx:#E8EEF9;--tx2:#93A4C0;--tx3:#7C8DA8; --blue:#2E6BFF;--cyan:#22D3EE;--gold:#FFC43D; --green:#22C55E;--r:16px; /* 顶栏实测高度（js 会按真实高度回写）。移动端与各语言一致，都是 70px。 */ --toph:70px; } html{scroll-behavior:smooth;scroll-padding-top:var(--toph)} html,body{background:var(--bg);overflow-x:hidden} body{color:var(--tx);font:14px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased;min-height:100vh;padding-top:var(--toph); background-image: radial-gradient(1100px 640px at 12% -8%,rgba(46,107,255,.20),transparent 62%), radial-gradient(900px 540px at 90% 2%,rgba(34,211,238,.11),transparent 60%), radial-gradient(760px 460px at 50% 110%,rgba(255,196,61,.06),transparent 62%); background-attachment:fixed} .wrap{max-width:1180px;margin:0 auto;padding:0 22px} .mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} a{color:var(--cyan)} /* ---------- 顶栏（玻璃拟态 + 导航）· 固定悬浮 ---------- ⚠ 必须是 fixed，不能是 sticky：本文件第 16 行有 html,body{overflow-x:hidden}， 它会让 body 变成滚动容器，sticky 于是"贴"在那个不滚动的 body 上 —— 实测 position 明明算出 sticky，滚到 1400px 时顶栏 rectTop 却是 -1398（跟着页面滚走了）。 改 fixed 后由 body 的 padding-top:var(--toph) 让出等高的位置，不遮内容； --toph 由 site.js 按真实高度回写，默认 70px（各宽度、各语言实测均为 70）。 */ .top{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(7,11,20,.82);backdrop-filter:blur(18px); border-bottom:1px solid rgba(46,107,255,.14)} .top-in{max-width:1180px;margin:0 auto;padding:13px 22px;display:flex;align-items:center;gap:20px} /* 用 logical property：LTR 下等于 margin-right:auto，RTL 下自动镜像成 margin-left:auto。 ⚠ flex:0 0 auto 是硬要求：品牌名不许参与 flex 收缩。 2026-09-18 实测教训——五语（es/fr/pt/ru/ja）下「品牌名+6 导航+语言切换+控制台按钮」求宽 >1180px， 默认的收缩规则会从品牌名身上扣，把它压成「Plataforma Lanfeng…」； 而顶栏容器自身 scrollWidth===clientWidth（是子元素被压、不是容器溢出）， 所以「量容器有没有溢出」的老回归脚本完全抓不到。现在改为：品牌名固定不缩，宽度不够由标签长度来解决。 */ .brand{display:flex;align-items:center;gap:11px;margin-inline-end:auto;flex:0 0 auto; text-decoration:none;color:inherit} .mark{width:36px;height:36px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--blue),#1B3FB8);box-shadow:0 4px 16px rgba(46,107,255,.4)} .mark svg{width:20px;height:20px} /* 品牌名与副标题一律不折行（折行会把顶栏撑高一倍）。 overflow:hidden+ellipsis 保留为「可见的告警」：真被截断时肉眼与回归脚本都能发现， 比被静默剪掉强。按上面的布局约定，正常情况下这两处截断量应恒为 0。 */ .brand>span{min-width:0;overflow:hidden} .brand b,.brand i{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .brand b{font-size:16px;font-weight:600;letter-spacing:.4px;line-height:1.2} .brand i{font-style:normal;font-size:11px;color:var(--tx3);letter-spacing:.5px} .nav{display:flex;gap:3px;align-items:center;flex:none} /* 导航项禁止折行：'Base Network' / 'Цепочка поставок' 这类长标签折成两行会顶高整条顶栏 */ .nav a{position:relative;text-decoration:none;color:var(--tx2);font-size:13.5px;padding:8px 11px;border-radius:9px; white-space:nowrap;transition:color .2s,background .2s} .nav a:hover{color:var(--tx);background:rgba(46,107,255,.10)} .nav a.on{color:var(--cyan)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;cursor:pointer; border:none;font:inherit;font-size:13.5px;font-weight:500;padding:10px 22px;border-radius:11px; transition:transform .2s,box-shadow .2s,border-color .2s,background .2s;white-space:nowrap} .btn-pri{color:#fff;background:linear-gradient(135deg,var(--blue),#1F4FD8);box-shadow:0 6px 22px rgba(46,107,255,.36)} .btn-pri:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(46,107,255,.5)} .btn-gold{color:#141414;background:linear-gradient(135deg,var(--gold),#F0A819);box-shadow:0 6px 22px rgba(255,196,61,.28)} .btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,196,61,.4)} .btn-ghost{color:var(--tx);background:rgba(46,107,255,.08);border:1px solid var(--line2)} .btn-ghost:hover{border-color:rgba(34,211,238,.55);background:rgba(34,211,238,.08);transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.985)} /* ---------- 顶栏自适应断点 ---------- 阈值不是拍的，是按「各语言实测求宽」定的（scripts/_probe-brand.js / verify-topbar.js 可复现）： ≤1279：品牌副标题让位 + 整条导航隐藏、汉堡菜单顶上 ≤1119：语言切换器收起语言名，只留地球图标 ≤ 640：间距收紧 + 品牌名只留 Logo 图标 为什么导航要收到 1279：日语顶栏在 1200px 时「品牌名(含副标题)+6 导航+语言名+控制台按钮」 求宽 1167px，看似放得下、实际只剩 33px 余量，换个字体的操作系统就崩。 1280 是主流笔记本宽度，收到这里能留出 110px+ 余量，跨平台稳。 页面在任何宽度都有全站入口：>1279 是导航条，≤1279 是汉堡菜单。 */ @media(max-width:1279px){ .brand i{display:none} .nav{display:none} } @media(max-width:1119px){ .langsw>summary span{display:none} .langsw>summary{padding:8px 10px} } /* ⚠ .navsw 的 display:block 不能写在这里：它的基础规则 display:none 在本文件更靠后的位置， 同优先级下后来者胜，会把这里的 block 覆盖掉（汉堡菜单整个不出现、窄屏等于没有导航）。 所以那条媒体查询紧跟在 .navsw 样式之后写，见下面的「顶栏汉堡菜单」小节。 */ @media(max-width:640px){ .top-in{gap:12px} /* 小屏只留 Logo 图标、收起品牌文字：360px 下「品牌名+汉堡+语言图标+控制台按钮」放不下， 控制台按钮会被 body 的 overflow-x:hidden 静默剪掉。 ⚠ 必须 :not(.mark)——Logo 也是一个 ，写成 .brand>span 会把 Logo 一起干掉。 */ .brand>span:not(.mark){display:none} } /* ---------- 顶栏语言切换器（纯
，无 JS 也能用） ---------- */ .langsw{position:relative;flex:none} .langsw>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px; font-size:12.5px;color:var(--tx2);padding:8px 11px;border-radius:9px;white-space:nowrap; border:1px solid var(--line);background:rgba(46,107,255,.06); transition:color .2s,border-color .2s,background .2s} .langsw>summary::-webkit-details-marker{display:none} .langsw>summary::after{content:"";width:5px;height:5px;flex:none;margin-left:1px; border-right:1.5px solid var(--tx3);border-bottom:1.5px solid var(--tx3); transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s} .langsw>summary:hover{color:var(--tx);border-color:var(--line2)} .langsw svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .langsw[open]>summary{color:var(--cyan);border-color:var(--line2);background:rgba(46,107,255,.13)} .langsw[open]>summary::after{transform:rotate(225deg) translate(-1px,-1px)} .langsw-m{position:absolute;top:calc(100% + 9px);right:0;z-index:60;min-width:172px; display:grid;gap:1px;padding:6px;border-radius:13px;overflow:auto;max-height:min(72vh,430px); background:rgba(10,16,29,.97);backdrop-filter:blur(18px); border:1px solid var(--line2);box-shadow:0 20px 48px rgba(0,0,0,.55)} .langsw-m a{display:block;padding:8px 11px;border-radius:9px;text-decoration:none; font-size:13px;color:var(--tx2);white-space:nowrap;transition:background .15s,color .15s} .langsw-m a:hover{background:rgba(46,107,255,.14);color:var(--tx)} .langsw-m a.on{color:var(--cyan);background:rgba(34,211,238,.1)} [dir="rtl"] .langsw-m{right:auto;left:0} /* ---------- 顶栏汉堡菜单（窄屏替代整条导航；同样纯
，无 JS 也能用） ---------- 为什么需要：页脚「快速导航」删掉后，≤1119px 导航整条隐藏 = 手机上没有任何全站入口。 面板内容由构建脚本按本页