/* generated from promo/network/index.html; source media retained verbatim */
/* ==========================================================================
煜企智能 · 网络设备与交换路由 · 商用页
视觉方向：机房机架立面（Rack Elevation）
整页隐喻是一份「机柜立面交付图」。用户不是在逛一个营销页，而是在验收
一台已经装好的机柜 —— 每一 U 位装着什么、每个面板有多少端口、每条链路
跑多少带宽，都是可以直接对着清点的内容。
与软件开发页（工业技术图纸 / 蓝晒图）的关系：同一家公司、同一套直角
硬边语言、同一套品牌锚点，但把「纸」换成了「机柜」—— 软件交付的是文档，
硬件交付的是实体，隐喻必须跟着变。
三条不可违反的约束：
1. 形式即证据。U 位刻度标真实 U 位，端口数标真实端口数，带宽标真实带宽。
任何一个数字都必须在交付物清单里能找到对应项。
2. 全部直角。没有圆角、没有色彩渐变、没有毛玻璃、没有通用投影。
层次只靠「字号跨度 + 留白 + 1px 线」建立。唯一的例外是设备面板的
散热栅格与端口阵列 —— 那是纹理，不是装饰。
3. 深色为常态。机房本来就是暗的，指示灯在暗处才有意义。
========================================================================== */
/* ---------- 1. 设计令牌 ---------- */.network-rack-switch-page{
color-scheme:dark;
--font-din:"DIN Alternate","Bahnschrift","Arial Narrow","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
--font-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
/* ===== 品牌锚点 =====
沿用 yuqi-sh.com 主题实测值，与软件开发页同源。 */
--brand-navy:#06101d;
--brand-blue:#2f7cf6;
--brand-cyan:#35c3d4;
/* ===== 四个平面：机房 < 机柜 < 面板 < 机身 =====
越靠前越暗。设备机身必须比它所在的面板亮，否则面板会「浮」在机身之上，
失去「装进机柜里」的实体感。 */
--paper:#05080d; /* 机房环境底 */
--sheet:#0b1220; /* 机柜内腔 */
--panel:#111a26; /* 面板区（卡片） */
--metal:#1b2534; /* 设备机身 */
--grid:rgba(120,175,240,.045);
--grid-2:rgba(120,175,240,.085);
/* ===== 墨色（以最亮的机身 #1b2534 为最坏底色核算）===== */
--ink:#eef3f9; /* 13.83:1 机身 */
--ink-2:#aab8ca; /* 7.66:1 */
--ink-3:#8b9cb0; /* 5.50:1 */
--ink-4:#5d6d80; /* 2.91:1 —— 只够画图，禁止承载文字 */
--blue:#2f7cf6; /* 机身 3.92:1 —— 只能做实底、描边、图形，不作正文 */
--blue-lt:#5aa2f8; /* 机身 5.85:1 —— 正文级强调蓝 */
--blue-dk:#11294d; /* 深蓝实底，承载浅字 */
--cyan:#35c3d4; /* 机身 7.28:1 */
--amber:#f0b66b; /* 机身 8.53:1 */
--green:#67ddaa; /* 机身 9.19:1 */
--purple:#c6a9ff; /* 机身 7.73:1 */
--red:#ff8b7a; /* 机身 6.78:1 */
--line:rgba(140,175,220,.14);
--line-2:rgba(140,175,220,.08);
--line-3:rgba(140,175,220,.045);
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
--sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px; --sp-9:112px;
--wrap:1240px;
--rail:64px;
--nav-h:64px;
--uh:clamp(9px,1.1vw,14px); /* 1U 的高度，整页的度量基准 */
--ease:cubic-bezier(.16,1,.3,1);
}
/* ---------- 2. 复位与基座 ---------- */.network-rack-switch-page *,.network-rack-switch-page *::before,.network-rack-switch-page *::after{box-sizing:border-box}.network-rack-switch-page{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}.network-rack-switch-page{
margin:0;background:var(--paper);color:var(--ink);
font-family:var(--font-sans);font-size:15px;line-height:1.75;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
/* 机房底纹：细网格 + 每 120px 一条主格线，为所有对齐提供参照 */
background-image:
linear-gradient(var(--grid) 1px,transparent 1px),
linear-gradient(90deg,var(--grid) 1px,transparent 1px),
linear-gradient(var(--grid-2) 1px,transparent 1px),
linear-gradient(90deg,var(--grid-2) 1px,transparent 1px);
background-size:24px 24px,24px 24px,120px 120px,120px 120px;
}.network-rack-switch-page h1,.network-rack-switch-page h2,.network-rack-switch-page h3,.network-rack-switch-page h4,.network-rack-switch-page p,.network-rack-switch-page ul,.network-rack-switch-page ol,.network-rack-switch-page figure,.network-rack-switch-page blockquote{margin:0}.network-rack-switch-page ul,.network-rack-switch-page ol{padding:0;list-style:none}.network-rack-switch-page a{color:var(--blue-lt);text-decoration:none}.network-rack-switch-page a:hover{text-decoration:underline;text-underline-offset:3px}.network-rack-switch-page img,.network-rack-switch-page svg{display:block;max-width:100%}.network-rack-switch-page table{border-collapse:collapse;width:100%}.network-rack-switch-page button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.network-rack-switch-page :focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.network-rack-switch-page ::selection{background:var(--blue);color:#fff}.network-rack-switch-page .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--sp-6)}.network-rack-switch-page .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.network-rack-switch-page .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ---------- 3. 通用排版件 ---------- */.network-rack-switch-page .kicker{
display:inline-flex;align-items:center;gap:var(--sp-2);
font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--blue-lt);
border:1px solid var(--line);border-left:2px solid var(--blue);
padding:5px 10px;background:var(--sheet);
}.network-rack-switch-page .kicker b{font-weight:600;color:var(--ink)}.network-rack-switch-page .sec{padding:var(--sp-7) 0;border-top:1px solid var(--line-2);position:relative}.network-rack-switch-page .sec:first-of-type{border-top:0}.network-rack-switch-page .sec-head{max-width:820px;margin-bottom:var(--sp-7)}.network-rack-switch-page .h2{
font-family:var(--font-sans);font-weight:700;
font-size:clamp(26px,3.4vw,40px);line-height:1.24;letter-spacing:-.01em;
margin:var(--sp-4) 0 0;
}.network-rack-switch-page .h3{font-size:clamp(17px,1.6vw,20px);font-weight:700;line-height:1.45;margin:0 0 var(--sp-2)}.network-rack-switch-page .lead{color:var(--ink-2);font-size:clamp(15px,1.35vw,17px);line-height:1.85;margin-top:var(--sp-4);max-width:68ch}.network-rack-switch-page .lead b{color:var(--ink);font-weight:600}.network-rack-switch-page .note{color:var(--ink-3);font-size:13.5px;line-height:1.8;margin-top:var(--sp-4);max-width:70ch}
/* 尺寸标注线：两端箭头 + 中间数字，标注真实数量 */.network-rack-switch-page .dim{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-5)}.network-rack-switch-page .dim-line{flex:1;height:7px;position:relative;min-width:60px}.network-rack-switch-page .dim-line::before{content:"";position:absolute;left:0;right:0;top:3px;height:1px;background:var(--ink-4)}.network-rack-switch-page .dim-line::after{
content:"";position:absolute;left:0;right:0;top:0;height:7px;
border-left:1px solid var(--ink-4);border-right:1px solid var(--ink-4);
}.network-rack-switch-page .dim-txt{
font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;
color:var(--ink-3);white-space:nowrap;
}.network-rack-switch-page .dim-txt b{color:var(--ink);font-weight:600}
/* ---------- 4. 吸顶导航 ---------- */.network-rack-switch-page .nav{
position:sticky;top:0;z-index:60;height:var(--nav-h);
background:rgba(5,8,13,.92);
-webkit-backdrop-filter:saturate(140%) blur(10px);
backdrop-filter:saturate(140%) blur(10px);
border-bottom:1px solid var(--line);
}.network-rack-switch-page .nav-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--sp-6);height:100%;
display:flex;align-items:center;gap:var(--sp-6)}.network-rack-switch-page .brand{display:flex;align-items:center;gap:10px;flex:none}.network-rack-switch-page .brand-mark{
width:26px;height:26px;border:1px solid var(--blue);
display:grid;place-items:center;background:var(--blue-dk);
}.network-rack-switch-page .brand-mark i{display:block;width:12px;height:12px;border:1px solid var(--blue-lt)}.network-rack-switch-page .brand-name{font-weight:700;font-size:15px;letter-spacing:.02em;white-space:nowrap}.network-rack-switch-page .brand-sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--ink-4);white-space:nowrap}.network-rack-switch-page .nav-links{display:flex;gap:var(--sp-5);margin-left:auto;align-items:center;overflow:hidden}.network-rack-switch-page .nav-links a{
font-size:13.5px;color:var(--ink-3);white-space:nowrap;padding:4px 0;
border-bottom:1px solid transparent;
}.network-rack-switch-page .nav-links a:hover{color:var(--ink);text-decoration:none;border-bottom-color:var(--line)}.network-rack-switch-page .nav-links a.is-active{color:var(--ink);border-bottom-color:var(--blue)}.network-rack-switch-page .nav-cta{
flex:none;margin-left:var(--sp-4);font-size:13px;font-weight:600;
border:1px solid var(--blue);color:var(--ink);padding:7px 14px;background:var(--blue-dk);
}.network-rack-switch-page .nav-cta:hover{text-decoration:none;background:var(--blue);color:#fff}
/* ---------- 5. 左侧 U 位刻度边栏 ---------- */
/* 它标的是真实信息：当前滚动位置处在「第几 U」。 */.network-rack-switch-page .rail{
position:fixed;left:0;top:var(--nav-h);bottom:0;width:var(--rail);z-index:50;
display:none;flex-direction:column;align-items:center;
padding:var(--sp-5) 0;border-right:1px solid var(--line-2);
background:rgba(5,8,13,.6);
}
@media (min-width:1360px){.network-rack-switch-page .rail{display:flex}.network-rack-switch-page .page{padding-left:var(--rail)}
/* 让 nav 也跟 .page 一起偏移 64px，避免 nav 内容从 x=340 开始、page 内容从 x=372 开始，
造成「头部居中、正文偏右」的视觉错位。两者都居中于可用区 [64, 1920] → 内容都从 x=372 开始 */.network-rack-switch-page .nav{padding-left:var(--rail)}
}.network-rack-switch-page .rail-scale{
position:relative;flex:1;width:30px;
background-image:
repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 72px),
repeating-linear-gradient(to bottom,var(--line-2) 0 1px,transparent 1px 12px);
background-size:13px 100%,6px 100%;
background-position:left top,left top;
background-repeat:repeat-y;
}.network-rack-switch-page .rail-cursor{
position:absolute;left:-3px;width:36px;height:2px;background:var(--blue);
transform:translateY(-50%);top:0;transition:top .18s linear;
}.network-rack-switch-page .rail-cursor::after{
content:"";position:absolute;right:-5px;top:-3px;
border:4px solid transparent;border-left-color:var(--blue);
}.network-rack-switch-page .rail-read{
flex:none;margin-top:var(--sp-4);font-family:var(--font-mono);font-size:10px;
letter-spacing:.1em;color:var(--ink-3);text-align:center;line-height:1.6;
}.network-rack-switch-page .rail-read b{display:block;color:var(--ink);font-size:15px;letter-spacing:.02em}.network-rack-switch-page .rail-cap{
flex:none;margin-top:var(--sp-3);
writing-mode:vertical-rl;font-size:10.5px;letter-spacing:.24em;color:var(--ink-4);
text-transform:uppercase;
}
/* 语义色：哪个端口、哪条链路、哪个状态，用固定色，不用随手挑的颜色 */.network-rack-switch-page .tone-blue{--tone:#2f7cf6}.network-rack-switch-page .tone-cyan{--tone:#35c3d4}.network-rack-switch-page .tone-green{--tone:#67ddaa}.network-rack-switch-page .tone-amber{--tone:#f0b66b}.network-rack-switch-page .tone-purple{--tone:#c6a9ff}.network-rack-switch-page .tone-red{--tone:#ff8b7a}.network-rack-switch-page .tone-orange{--tone:#ffa566}.network-rack-switch-page .tone-grey{--tone:#5d6d80}.network-rack-switch-page .lc-g{--lc:#67ddaa}.network-rack-switch-page .lc-b{--lc:#5aa2f8}.network-rack-switch-page .lc-a{--lc:#f0b66b}.network-rack-switch-page .lc-c{--lc:#35c3d4}.network-rack-switch-page .lc-p{--lc:#c6a9ff}.network-rack-switch-page .lc-x{--lc:#3a4757}.network-rack-switch-page .dg-b{background:#2f7cf6}.network-rack-switch-page .dg-c{background:#35c3d4}.network-rack-switch-page .dg-a{background:#f0b66b}.network-rack-switch-page .dg-g{background:#67ddaa}.network-rack-switch-page .dg-p{background:#c6a9ff}.network-rack-switch-page .dg-r{background:#ff8b7a}.network-rack-switch-page .dg-gy{background:#5d6d80}.network-rack-switch-page .dg-p{background:#c6a9ff}
/* ---------- 6. 按钮 ---------- */.network-rack-switch-page .btn{
display:inline-flex;align-items:center;gap:10px;
font-size:14px;font-weight:600;padding:13px 22px;
border:1px solid var(--blue);background:var(--blue-dk);color:var(--ink);
position:relative;
}.network-rack-switch-page .btn::after{
content:"";width:7px;height:7px;
border-right:1.5px solid currentColor;
border-top:1.5px solid currentColor;
transform:rotate(45deg);margin-bottom:2px;
}.network-rack-switch-page .btn:hover{background:var(--blue);color:#fff;text-decoration:none}.network-rack-switch-page .btn .arw{font-family:var(--font-mono);font-weight:400}.network-rack-switch-page .btn-ghost{border-color:var(--line);background:transparent;color:var(--ink-2)}.network-rack-switch-page .btn-ghost:hover{background:var(--panel);color:var(--ink);border-color:var(--ink-4)}.network-rack-switch-page .btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
/* ---------- 7. 封面（照片）+ 机柜立面 ---------- */.network-rack-switch-page .cover{
position:relative;overflow:hidden;
/* 两行都写：不支持 svh 时整条声明会被丢弃，退回 vh 兜底 */
min-height:calc(100vh - var(--nav-h));
min-height:calc(100svh - var(--nav-h));
display:flex;align-items:center;padding:var(--sp-8) 0 var(--sp-7);
border-top:0;
}
/* 首屏照片：Pexels 17323801「网络机架」，Pexels License 可商用免署名。
以 data URI 写在 CSS 里 —— style-src 的哈希覆盖整块