/* 星垣云皮肤 iron（裸金属 · 硬件规格优先）= design-src/themes/iron.css 整份搬运（token 层 + 版式规则层） 生成物 —— 由 python tools/assemble_cms.py 从 design-src/ 装配，勿手工改； 增量样式写到 hand/xy-iron/css/skin-extra.css。 */ /* ============================================================ 主题皮肤五：铁壳机架 iron —— 裸金属 / 物理服务器硬件风 ------------------------------------------------------------ 约束： 1. 所有规则都带 :root[data-theme="iron"] 作用域，其余 6 套皮肤零影响 2. 单强调色：琥珀 #f0a13c，只出现在关键动作、槽位选中与警示信息上 3. 质感来自拉丝/斜纹底纹、1px 高光内描边、铆钉圆点与硬阴影，不做渐变发光 4. 圆角 2-4px、边框偏实、数字一律等宽 tabular-nums ============================================================ */ /* ============================================================ 1. Token 覆盖 —— 整站换肤的单一入口 ============================================================ */ :root[data-theme="iron"] { color-scheme: dark; /* —— 本皮肤专用变量 —— */ --ir-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif; --ir-display: "Segoe UI Variable Display", "Segoe UI Black", "Segoe UI", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; --ir-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace; --ir-metal-950: #0c0e10; /* 最深：外框、沟槽 */ --ir-metal-900: #101215; /* 页脚 / 状态带底 */ --ir-metal-850: #15171a; /* 页面底 */ --ir-metal-800: #1d2126; /* 面板 */ --ir-metal-750: #22272d; /* 面板内凹 */ --ir-metal-700: #282e35; /* 凸起件 / hover */ --ir-metal-600: #343c45; /* 强描边 / 结构件 */ --ir-line: #2b3138; /* 1px 细线 */ --ir-line-strong: #3f4854; /* 结构线 */ --ir-hi: rgba(255, 255, 255, .055); /* 上沿 1px 高光 */ --ir-steel: #cfd6de; /* 浅钢蓝正文 */ --ir-steel-2: #9aa5b1; --ir-steel-3: #76818c; --ir-amber: #f0a13c; /* 唯一强调色 */ --ir-amber-hi: #ffbc62; --ir-amber-dim: #7d5421; --ir-amber-ink: #1c1206; /* 琥珀底上的文字 */ --ir-led-run: #59b380; /* 硬件指示灯绿：仅 5-6px 圆点 */ --ir-led-fault: #d1564d; --ir-brush: repeating-linear-gradient(90deg, rgba(255, 255, 255, .017) 0 1px, transparent 1px 3px); --ir-hatch: repeating-linear-gradient(135deg, rgba(207, 214, 222, .04) 0 1px, transparent 1px 8px); --ir-rivet: radial-gradient(circle, rgba(255, 255, 255, .17) 0 1px, rgba(0, 0, 0, .55) 1.5px 2.4px, transparent 2.8px); --ir-groove: inset 0 2px 6px rgba(0, 0, 0, .55); /* 双条式机柜导航的两条高度（--header-h 由二者相加） */ --ir-rail-h: 30px; --ir-deck-h: 64px; /* —— 品牌色阶：翻成琥珀阶（数值越大越亮，适配暗底） —— */ --brand-50: #221a11; --brand-100: #2b2015; --brand-200: #574326; --brand-300: #866432; --brand-400: #c78b33; --on-brand: var(--ir-amber-ink); /* 琥珀底必须压深墨 */ --brand-500: var(--ir-amber); --brand-600: #ffbb66; --brand-700: #ffd093; --brand-900: #1a1206; /* —— 辅助色：本主题不要青色，退成钢蓝灰，保证单强调 —— */ --cyan-300: #d7e0ea; --cyan-400: #a9b5c2; --cyan-500: #7f8b98; /* —— 深色区块：整站分层靠明度 —— */ --night-900: #101215; --night-800: #15171a; --night-700: #1d2126; --night-600: #262b32; --night-500: #343c45; /* —— "纸面" 即金属面板 —— */ --paper: #1d2126; --paper-soft: #171a1e; --paper-line: #2b3138; /* —— 文字：正文 12.4:1 / 弱化 7.1:1 对比 —— */ --ink-900: #dfe6ee; --ink-700: #cfd6de; --ink-500: #9aa5b1; --ink-400: #76818c; --ink-200: #454d57; --ink-on-dark: #dfe6ee; --ink-on-dark-mute: #98a3ae; /* —— 语义色 —— */ --success: #59b380; --warning: var(--ir-amber); --danger: #d1564d; --info: #a9b5c2; /* —— 渐变：金属拉丝而非发光 —— */ --grad-brand: linear-gradient(180deg, #f5ab48 0%, #d3821f 100%); --grad-glow: linear-gradient(180deg, #f0a13c 0%, #a9691a 100%); --grad-night: linear-gradient(180deg, #22272d 0%, #191c20 55%, #14161a 100%); --grad-card: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .012) 100%); --grad-text: linear-gradient(180deg, #f2f6fa 0%, #b6c1cc 100%); /* —— 排版：厚重无衬线大字 + 等宽参数 —— */ --font-sans: var(--ir-sans); --font-display: var(--ir-display); --font-mono: var(--ir-mono); --fs-display: clamp(32px, 4.2vw, 56px); --fs-h1: clamp(26px, 3vw, 38px); --fs-h2: clamp(21px, 2.3vw, 29px); --fs-h3: clamp(16px, 1.5vw, 19px); --fs-body: 14.5px; --fs-sm: 13px; --fs-xs: 12px; --lh-tight: 1.18; --lh-body: 1.72; --fw-bold: 700; --fw-semi: 600; font-variant-numeric: tabular-nums; /* 全站参数按位对齐 */ /* —— 间距：密度提高 —— */ --sp-1: 4px; --sp-2: 7px; --sp-3: 10px; --sp-4: 14px; --sp-5: 18px; --sp-6: 24px; --sp-7: 36px; --sp-8: 54px; --sp-9: 76px; /* —— 圆角：2-4px —— */ --r-sm: 3px; --r-md: 2px; --r-lg: 3px; --r-xl: 4px; --r-full: 2px; /* —— 阴影：硬朗低扩散 + 上沿高光 —— */ --sh-1: inset 0 1px 0 var(--ir-hi), 0 1px 2px rgba(0, 0, 0, .5); --sh-2: inset 0 1px 0 var(--ir-hi), 0 3px 8px rgba(0, 0, 0, .45); --sh-3: inset 0 1px 0 var(--ir-hi), 0 10px 26px rgba(0, 0, 0, .55); --sh-brand: 0 0 0 1px var(--ir-amber-dim), 0 2px 0 #101317; --sh-glow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -1px 0 rgba(0, 0, 0, .5); /* —— 布局 —— */ --container: 1240px; --container-wide: 1380px; --gutter: 22px; --header-h: calc(var(--ir-rail-h) + var(--ir-deck-h)); /* —— 动效：linear，机械感 —— */ --t-fast: .13s linear; --t-base: .22s linear; --t-slow: .45s linear; } /* ============================================================ 2. 全局基调：拉丝钢板底纹 + 铆钉 + 直角小圆角 ============================================================ */ :root[data-theme="iron"] body { background-color: var(--ir-metal-850); background-image: var(--ir-brush), repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 4px); } :root[data-theme="iron"] ::selection { background: var(--ir-amber); color: var(--ir-amber-ink); } :root[data-theme="iron"] * { scrollbar-width: thin; scrollbar-color: var(--ir-metal-600) transparent; } :root[data-theme="iron"] ::-webkit-scrollbar { width: 11px; height: 11px; } :root[data-theme="iron"] ::-webkit-scrollbar-track { background: var(--ir-metal-900); } :root[data-theme="iron"] ::-webkit-scrollbar-thumb { background: linear-gradient(90deg, var(--ir-metal-600), var(--ir-metal-700)); border: 1px solid var(--ir-line-strong); } :root[data-theme="iron"] ::-webkit-scrollbar-thumb:hover { background: var(--ir-amber-dim); } /* 公共样式里写死的中大圆角收敛到机箱钣金级别 */ :root[data-theme="iron"] :is( .badge, .btn.sm, .dropdown a, .mega-item-icon, .feature-icon, .sol-card .icon-wrap, .icon-wrap, .partner-chip .pf, .qual-card .seal, .float-dock a, .float-dock button, .migrate-list .idx, .flow-step .dot, .tsw-list, .tsw-btn, .tab, .mock-chip, .sh-opt-tick, .sh-benefit-icon, .info-callout-icon, .info-note-icon, .cs-tile-icon, .info-flow-icon, .auth-step-kicker, .progress, .progress i, .qr, .cs-mini, .cs-tile ) { border-radius: 2px; } :root[data-theme="iron"] .btn { border-radius: 3px; } :root[data-theme="iron"] .btn.lg { border-radius: 3px; } /* 指示灯与圆点保持圆形（硬件灯珠） */ :root[data-theme="iron"] :is(.status-dot, .avatar, .step i, .mock-bar i, .rack-row .led i) { border-radius: 50%; } :root[data-theme="iron"] .status-dot::before { border-radius: 50%; } :root[data-theme="iron"] :is(input, textarea, select) { caret-color: var(--ir-amber); } :root[data-theme="iron"] :focus-visible { outline: 1px solid var(--ir-amber); outline-offset: 1px; } :root[data-theme="iron"] :is(a, button, .btn) { transition-timing-function: linear; } :root[data-theme="iron"] h1, :root[data-theme="iron"] h2, :root[data-theme="iron"] h3, :root[data-theme="iron"] h4, :root[data-theme="iron"] h5 { font-family: var(--ir-display); font-weight: 800; letter-spacing: .005em; } /* ============================================================ 3. 公共组件金属化 ------------------------------------------------------------ base/components/layout/marketing/shop/info/console 里写死的 #fff、浅蓝底与发光效果在本作用域内统一换成钣金表面 + 琥珀强调 ============================================================ */ /* 3.1 面板 / 卡片 / 表单表面 */ :root[data-theme="iron"] :is( .panel, .table-wrap, .faq-item, .pager button, .tab.is-active, .stat-bar-inner, .sol-card, .migrate-visual, .qual-card, .review-card, .post-item, .buy-side, .os-chip, .console-top, .console-foot, .metric, .float-dock a, .float-dock button, .sh-input, .sh-bar, .sh-side, .sh-opt-group, .sh-opt, .sh-pay, .sh-code-chip, .sh-done, .sh-cart-card, .sh-qty, .sh-cart-done, .info-search, .info-reset, .info-callout-icon, .info-prevnext-item, .info-toc, .sol-nav, .sol-detail, .sol-challenge, .sol-mini-chip, .sol-product, .info-flow-step, .info-calc, .info-num, .info-select, .info-note, .info-note-icon, .qualification-strip-item, .info-clause li, .cs-input, .cs-select, .cs-textarea, .cs-tile, .cs-state, .cs-mini, .cs-block, .cs-att, .auth-control, .info-field input, .info-field select, .info-field textarea, .tsw-btn, .tsw-list ) { background-color: var(--ir-metal-800); background-image: var(--ir-brush); box-shadow: var(--sh-1); border-color: var(--ir-line); } :root[data-theme="iron"] :is(.auth-side, .auth-back, .sh-deliver, .console-shell, .site-main, .auth-page) { background-color: var(--ir-metal-800); } :root[data-theme="iron"] .tsw-btn b { color: var(--ir-steel); } :root[data-theme="iron"] .tsw-list button.is-active { background: var(--brand-50); } :root[data-theme="iron"] .tsw-on { color: var(--ir-amber); } :root[data-theme="iron"] .tsw-sw i { border-color: var(--ir-metal-800); } /* 3.2 表头 / 行 hover / 选中行：像机柜上的参数标签条 */ :root[data-theme="iron"] :is(.spec-table tbody tr:hover, .sh-line:hover, .sh-seg-btn:hover) { background: var(--ir-metal-750); } :root[data-theme="iron"] .spec-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .018); } :root[data-theme="iron"] .spec-table tbody tr:nth-child(even):hover { background: var(--ir-metal-750); } :root[data-theme="iron"] .spec-table th, :root[data-theme="iron"] .spec-table td { border-bottom-color: var(--ir-line); } :root[data-theme="iron"] .spec-table thead th { background: var(--ir-metal-900); color: var(--ir-steel-2); border-bottom: 1px solid var(--ir-line-strong); } :root[data-theme="iron"] :is(.spec-table .is-recommend, .sh-line.is-on) { background: linear-gradient(90deg, rgba(240, 161, 60, .1), rgba(240, 161, 60, .015) 60%); box-shadow: inset 2px 0 0 var(--ir-amber); } :root[data-theme="iron"] .price-card.is-recommend { border-color: var(--ir-amber-dim); box-shadow: 0 2px 0 #101317; } :root[data-theme="iron"] .table-wrap { border: 1px solid var(--ir-line-strong); } /* 3.3 琥珀底上的文字统一压深，避免白字压琥珀 注意：这里必须把 ghost/outline/light 排除掉。它们是金属底 + 浅钢字， 而本条 :is() 因含 .pager button.is-active 这类带类型选择器的项， 特异度为 (0,4,1)，会反过来压过后面 .btn.ghost 的规则 (0,4,0)， 导致近黑字压深金属底（实测对比度 1.35:1）。 */ :root[data-theme="iron"] :is( .btn:not(.ghost):not(.outline):not(.light), .pager button.is-active, .ribbon, .sh-flag, .mini-badge, .avatar, .console-link.is-active, .info-rank-idx.is-top, .sh-opt-tick, .flow-step .dot, .info-flow-icon, .info-form-check, .info-timeline-dot, .sh-done-badge, .cs-msg.is-user .cs-avatar, .cs-tool.is-active .cs-tool-icon, .info-partner-list .pf, .info-partner-grid .pf, .cs-check:checked, .migrate-list .idx, .step i, .ir-cta, .ir-sign.is-solid, .ir-side-btn ) { color: var(--ir-amber-ink); } :root[data-theme="iron"] .cs-check:checked { border-color: var(--ir-amber); } :root[data-theme="iron"] .cs-check:checked::after { border-color: var(--ir-amber-ink); } /* 3.4 焦点：一圈实线琥珀，不发光 */ :root[data-theme="iron"] :is( .auth-control:focus-within, .info-search:focus-within, .sh-input:focus, .cs-input:focus, .cs-select:focus, .cs-textarea:focus, .info-num:focus, .info-select:focus, .info-field input:focus, .info-field select:focus, .info-field textarea:focus ) { box-shadow: none; border-color: var(--ir-amber); } :root[data-theme="iron"] :is( .sh-input, .auth-input, .cs-input, .cs-textarea, .info-num, .info-select, .info-search input, .info-field input, .info-field textarea, .console-top .search input )::placeholder { color: var(--ir-steel-3); } :root[data-theme="iron"] :is(.empty svg, .info-meta-dot, .sh-result-tip svg) { color: var(--ir-steel-3); } /* 3.5 状态标签：浅色底 → 钢板底 + 亮字（信息类中性灰，保住单强调） */ :root[data-theme="iron"] .badge { border: 1px solid var(--ir-line); background: var(--brand-50); color: var(--brand-600); } :root[data-theme="iron"] :is(.badge.hot, .badge.new) { background: rgba(89, 179, 128, .1); border-color: rgba(89, 179, 128, .34); color: #7fd0a4; } :root[data-theme="iron"] .badge.flag { background: rgba(240, 161, 60, .1); border-color: var(--ir-amber-dim); color: var(--ir-amber-hi); } :root[data-theme="iron"] .badge.ghost { background: transparent; border-color: var(--ir-line-strong); color: var(--ir-steel-2); } :root[data-theme="iron"] .mini-badge { background: var(--ir-amber); font-family: var(--ir-mono); letter-spacing: .04em; } :root[data-theme="iron"] .mini-badge.gold { background: var(--ir-amber-hi); } :root[data-theme="iron"] .tag { border: 1px solid var(--ir-line-strong); background: var(--ir-metal-750); color: var(--ir-steel-2); } :root[data-theme="iron"] .dark .tag { background: var(--ir-metal-750); border-color: var(--ir-line-strong); color: var(--ir-steel-2); } :root[data-theme="iron"] :is(.info-cat, .info-cat.cat-notice, .info-cat.cat-upgrade, .info-cat.cat-network, .info-cat.cat-tech, .info-cat.cat-guide, .info-cat.cat-product) { background: var(--ir-metal-750); border: 1px solid var(--ir-line-strong); color: var(--ir-steel-2); } :root[data-theme="iron"] .info-cat.cat-notice { background: rgba(240, 161, 60, .12); border-color: var(--ir-amber-dim); color: var(--ir-amber-hi); } :root[data-theme="iron"] :is(.info-post-meta .info-pin, .who-you) { background: rgba(240, 161, 60, .12); color: var(--ir-amber-hi); } :root[data-theme="iron"] :is(.sh-msg.is-ok, .sh-stock-in) { background: rgba(89, 179, 128, .1); color: #7fd0a4; } :root[data-theme="iron"] .sh-msg.is-bad { background: rgba(209, 86, 77, .12); color: #f0928a; } :root[data-theme="iron"] .sh-stock-low { background: rgba(240, 161, 60, .12); color: var(--ir-amber-hi); } :root[data-theme="iron"] .sh-stock-plan { background: var(--ir-metal-750); color: var(--ir-steel-3); } :root[data-theme="iron"] :is(.sh-chip.is-locate, .sh-chip.is-locate button, .sh-prefill) { background: rgba(240, 161, 60, .1); border-color: var(--ir-amber-dim); color: var(--ir-amber-hi); } :root[data-theme="iron"] .sh-prefill .sh-linkbtn { color: var(--ir-amber-hi); } :root[data-theme="iron"] :is(.info-callout.tone-warning, .info-note.tone-warning) { background: rgba(240, 161, 60, .07); border-color: var(--ir-amber-dim); } :root[data-theme="iron"] .info-note.tone-warning b { color: var(--ir-amber-hi); } :root[data-theme="iron"] :is(.info-callout.tone-success, .info-note.tone-success) { background: rgba(89, 179, 128, .07); border-color: rgba(89, 179, 128, .3); } :root[data-theme="iron"] .info-note.tone-danger { background: rgba(209, 86, 77, .08); border-color: rgba(209, 86, 77, .34); } :root[data-theme="iron"] .post-item.info-post.is-notice { background: linear-gradient(90deg, rgba(240, 161, 60, .08), rgba(29, 33, 38, 0) 46%), var(--ir-metal-800); border-left: 2px solid var(--ir-amber); } :root[data-theme="iron"] .post-item.info-post.is-notice .info-post-date b { color: var(--ir-amber-hi); } :root[data-theme="iron"] .sh-del:hover { background: rgba(209, 86, 77, .14); } :root[data-theme="iron"] .sh-chip button:hover { background: var(--ir-amber); color: var(--ir-amber-ink); } /* 3.6 蓝紫发光残留：图表 / 装饰层 */ :root[data-theme="iron"] :is(.glow, .hero-net, .matrix-main::after, .info-calc-result::before) { display: none; } :root[data-theme="iron"] .mock-window { background: var(--ir-metal-900); border-color: var(--ir-line); } :root[data-theme="iron"] .mock-chip { background: var(--ir-metal-750); border: 1px solid var(--ir-line-strong); color: var(--ir-steel-2); } :root[data-theme="iron"] .chart-mock i { background: linear-gradient(180deg, var(--ir-steel-3), var(--ir-metal-600)); border-radius: 1px; } :root[data-theme="iron"] .chart-mock i:last-child { background: var(--ir-amber); } :root[data-theme="iron"] .mock-line b { color: var(--ir-steel); } :root[data-theme="iron"] .mock-bar { border-bottom-color: var(--ir-line); } :root[data-theme="iron"] .spark i { background: var(--ir-steel-3); opacity: 1; border-radius: 1px; } :root[data-theme="iron"] .spark i.is-hi { background: var(--ir-amber); } :root[data-theme="iron"] .progress { background: var(--ir-metal-900); border: 1px solid var(--ir-line); box-shadow: none; } :root[data-theme="iron"] .progress i { background: var(--ir-amber); } :root[data-theme="iron"] .progress.cs-warn i { background: var(--ir-amber-dim); } :root[data-theme="iron"] .progress.cs-danger i { background: var(--ir-led-fault); } :root[data-theme="iron"] .rack-row .led i { box-shadow: none; } :root[data-theme="iron"] .cs-coupon { background: linear-gradient(90deg, var(--brand-50), var(--ir-metal-800)); border-color: var(--ir-amber-dim); } :root[data-theme="iron"] .cs-switch { background: var(--ir-metal-600); } :root[data-theme="iron"] .cs-switch::after { background: var(--ir-steel-3); } :root[data-theme="iron"] .cs-switch[aria-checked="true"]::after { background: var(--ir-amber); } :root[data-theme="iron"] :is(.info-slider::-webkit-slider-runnable-track) { background: var(--ir-metal-600); } :root[data-theme="iron"] :is(.info-slider::-webkit-slider-thumb, .info-slider::-moz-range-thumb) { background: var(--ir-amber); border-color: var(--ir-metal-950); box-shadow: none; border-radius: 2px; } :root[data-theme="iron"] :is(.sol-node, .sol-arch-line, .sol-layer-label, .sol-node-icon, .info-region.is-dark, .hero-badge, .matrix-main, .cs-tool-icon) { border-color: var(--ir-line-strong); } :root[data-theme="iron"] .sol-node:hover { box-shadow: none; border-color: var(--ir-amber-dim); } :root[data-theme="iron"] .info-scale-item:hover { box-shadow: none; border-color: var(--ir-amber-dim); } /* 3.7 深色区块的网格底纹：青蓝网格 → 斜纹拉丝 */ :root[data-theme="iron"] :is(.page-banner, .hero, .info-doc-hero, .bg-grid, .nf)::before { background-image: var(--ir-hatch); background-size: auto; opacity: 1; mask-image: none; -webkit-mask-image: none; } :root[data-theme="iron"] .page-banner-points li { border: 1px solid var(--ir-line); background: var(--ir-metal-800); box-shadow: inset 0 1px 0 var(--ir-hi); } :root[data-theme="iron"] :is(.page-banner, .cta-band, .info-doc-hero, .mega-side, .adv-visual, .info-service-card, .section.dark, .nf, .buy-side-head, .sh-side-head) { border-bottom: 1px solid var(--ir-line-strong); } :root[data-theme="iron"] .cta-band { border-top: 1px solid var(--ir-line-strong); } :root[data-theme="iron"] .section + .section { border-top: 1px solid var(--ir-line); } :root[data-theme="iron"] .section.dark { border-block: 1px solid var(--ir-line); } :root[data-theme="iron"] .section.soft { background: var(--ir-metal-900); } :root[data-theme="iron"] .divider { background: var(--ir-line); } :root[data-theme="iron"] .dark .divider { background: var(--ir-line); } :root[data-theme="iron"] .mega-side { color: var(--ink-on-dark); } :root[data-theme="iron"] .info-doc-section { background: var(--ir-metal-850); } :root[data-theme="iron"] .info-doc-hero.is-notice { background: var(--grad-night); } /* 3.8 微标题：等宽 + 字距，像机柜上的丝印字段名 */ :root[data-theme="iron"] :is( .eyebrow, .badge, .tag, .chip, .mini-badge, .kv-list span, .metric h4, .cs-metric-top h4, .cs-mini-card h4, .cs-block-head h5, .console-group h4, .stat-label, .sh-goods-group, .mega-col h4, .sol-nav-head, .rack-title, .info-cat, .sh-stock, .cs-state, .auth-step-kicker, .cs-metric-foot .cs-xs, .spec-table thead th, .footer-links h4, .ir-back-col h4 ) { text-transform: uppercase; letter-spacing: .14em; font-weight: 600; } :root[data-theme="iron"] :is(.eyebrow, .badge, .tag, .mini-badge, .kv-list span, .info-cat, .stat-label, .spec-table thead th, .footer-links h4, .ir-back-col h4) { font-family: var(--ir-mono); } :root[data-theme="iron"] .eyebrow { letter-spacing: .2em; color: var(--ir-amber); } :root[data-theme="iron"] .eyebrow::before { width: 16px; height: 2px; background: var(--ir-amber); border-radius: 0; } :root[data-theme="iron"] .dark .eyebrow { color: var(--ir-amber); } :root[data-theme="iron"] .num { letter-spacing: 0; font-weight: 800; } :root[data-theme="iron"] .stat-value em { color: var(--ir-amber); font-family: var(--ir-mono); } :root[data-theme="iron"] .stat-value .num { color: var(--ir-steel); } :root[data-theme="iron"] .kv-list b { color: var(--ir-steel); font-family: var(--ir-mono); font-weight: 600; } :root[data-theme="iron"] .lead, :root[data-theme="iron"] .dark .lead { color: var(--ink-on-dark-mute); } /* 3.9 按钮：钣金按键（硬阴影 + 按下位移），琥珀只给主操作 */ :root[data-theme="iron"] .btn { height: 42px; padding-inline: 18px; border: 1px solid var(--ir-amber-dim); background: var(--grad-brand); color: var(--ir-amber-ink); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .01em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 2px 0 #101317; } :root[data-theme="iron"] .btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #101317; } :root[data-theme="iron"] .btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); } :root[data-theme="iron"] .btn.sm { height: 32px; padding-inline: 12px; font-size: var(--fs-xs); } :root[data-theme="iron"] .btn.lg { height: 48px; padding-inline: 26px; font-size: var(--fs-body); } :root[data-theme="iron"] .btn.xs { height: 26px; padding-inline: 9px; } :root[data-theme="iron"] :is(.btn.ghost, .btn.outline) { background: var(--ir-metal-700); border: 1px solid var(--ir-line-strong); color: var(--ir-steel); box-shadow: inset 0 1px 0 var(--ir-hi), 0 2px 0 #101317; } :root[data-theme="iron"] :is(.btn.ghost:hover, .btn.outline:hover) { background: var(--ir-metal-600); border-color: var(--ir-amber-dim); color: var(--ir-amber-hi); box-shadow: inset 0 1px 0 var(--ir-hi), 0 3px 0 #101317; } :root[data-theme="iron"] .btn.grad { background: var(--grad-brand); color: var(--ir-amber-ink); } :root[data-theme="iron"] .btn.light { background: var(--ir-metal-700); color: var(--ir-steel); border-color: var(--ir-line-strong); } :root[data-theme="iron"] .link-arrow { color: var(--ir-amber); font-weight: 600; } :root[data-theme="iron"] .link-arrow::after { content: "»"; } :root[data-theme="iron"] .link-arrow:hover::after { transform: translateX(3px); } :root[data-theme="iron"] .price { color: var(--ir-steel); } :root[data-theme="iron"] .price-old { color: var(--ir-steel-3); } :root[data-theme="iron"] :is(.ribbon, .sh-flag) { background: var(--ir-amber); font-family: var(--ir-mono); letter-spacing: .06em; } /* 3.10 卡片交互：不抬升发光，改为描边 + 左侧琥珀标签条 */ :root[data-theme="iron"] :is(.card, .sh-opt, .cs-tile, .cs-tool, .sol-card, .review-card, .qual-card, .faq-item, .feature-card, .migrate-visual, .panel, .sh-bar, .sh-side, .qualification-strip-item, .os-chip, .info-flow-step, .card.glass) { position: relative; border-color: var(--ir-line); } :root[data-theme="iron"] .card { box-shadow: var(--sh-1); } :root[data-theme="iron"] :is(.card.hover:hover, .sol-card:hover, .review-card:hover, .matrix-main:hover, .sh-opt:hover, .cs-tile:hover, .cs-tool:hover, .qual-card:hover, .post-item:hover, .feature-card:hover .feature-icon, .icon-btn:hover, .tsw-btn:hover, .float-dock a:hover, .float-dock button:hover, .footer-social a:hover, .sol-node:hover, .info-scale-item:hover, .qualification-strip-item:hover, .sh-goods:hover) { transform: none; box-shadow: var(--sh-2); } :root[data-theme="iron"] .card.hover:hover { border-color: var(--ir-amber-dim); } :root[data-theme="iron"] .post-item:hover { background: var(--ir-metal-750); border-color: var(--ir-line-strong); transform: none; } :root[data-theme="iron"] .sol-card:hover { border-color: var(--ir-amber-dim); } :root[data-theme="iron"] .matrix-main:hover { box-shadow: 0 4px 0 #101317; } :root[data-theme="iron"] .sh-opt.is-active { border-color: var(--ir-amber-dim); background: var(--ir-metal-750); box-shadow: inset 3px 0 0 var(--ir-amber); } :root[data-theme="iron"] .cs-tile.is-on { border-color: var(--ir-amber-dim); box-shadow: inset 3px 0 0 var(--ir-amber); } :root[data-theme="iron"] .cs-tile.is-on::before { display: none; } :root[data-theme="iron"] .sh-opt-tick { background: var(--ir-amber); } :root[data-theme="iron"] .feature-icon { background: var(--ir-metal-750); color: var(--ir-amber); border: 1px solid var(--ir-line-strong); } :root[data-theme="iron"] :is(.icon-wrap, .sol-card .icon-wrap, .sh-opt-icon, .flow-step .dot, .migrate-list .idx, .step i, .qr, .auth-deco, .info-callout-icon, .info-note-icon, .cs-metric-icon, .sh-benefit-icon) { background: var(--ir-metal-750); border: 1px solid var(--ir-line-strong); color: var(--ir-amber); box-shadow: inset 0 1px 0 var(--ir-hi); } :root[data-theme="iron"] :is(.seal, .qual-card .seal, .qualification-strip-seal) { background: var(--ir-metal-750); border: 1px solid var(--ir-line-strong); color: var(--ir-amber); box-shadow: var(--sh-1); } :root[data-theme="iron"] .node-card li::before { width: 7px; height: 2px; border-radius: 0; top: 10px; background: var(--ir-amber-dim); } :root[data-theme="iron"] .check-list svg { color: var(--ir-amber); } :root[data-theme="iron"] .check-list.tone-dark svg { color: var(--ir-amber); } :root[data-theme="iron"] .dark .card { background: var(--grad-card); border-color: var(--ir-line); } :root[data-theme="iron"] .adv-visual { box-shadow: var(--sh-2); } :root[data-theme="iron"] .rate-stars, :root[data-theme="iron"] .review-card .stars { color: var(--ir-amber); } :root[data-theme="iron"] .review-card .quote { color: var(--ir-metal-600); } :root[data-theme="iron"] .marquee-track { animation-duration: 44s; } :root[data-theme="iron"] .partner-chip { background: var(--ir-metal-800); border: 1px solid var(--ir-line); } :root[data-theme="iron"] .partner-chip .pf { background: var(--ir-metal-600); border: 1px solid var(--ir-line-strong); } /* 3.11 数字条 / 控制台侧栏（吃深色 token 的区块） */ :root[data-theme="iron"] .stat-bar { margin-top: -1px; } :root[data-theme="iron"] .stat-bar-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 16px 0; border: 1px solid var(--ir-line-strong); background: var(--ir-metal-800); box-shadow: var(--sh-2); } :root[data-theme="iron"] .stat-bar .stat { border-right: 1px solid var(--ir-line); } :root[data-theme="iron"] .console-side { background: var(--night-900); border-right: 1px solid var(--ir-line); } :root[data-theme="iron"] .console-link:hover { background: var(--ir-metal-750); color: var(--ir-steel); } :root[data-theme="iron"] .console-link.is-active { background: var(--grad-brand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); font-weight: 700; } :root[data-theme="iron"] .console-top .search { background: var(--ir-metal-750); border-color: var(--ir-line); } :root[data-theme="iron"] .metric .num { color: var(--ir-steel); } :root[data-theme="iron"] .auth-captcha-text i { text-shadow: none; } :root[data-theme="iron"] .tabs { background: var(--ir-metal-900); border-color: var(--ir-line); } :root[data-theme="iron"] .tab { color: var(--ir-steel-2); } :root[data-theme="iron"] .tab:hover { color: var(--ir-amber-hi); background: transparent; } :root[data-theme="iron"] .tab.is-active { color: var(--ir-steel); background: var(--ir-metal-700); box-shadow: inset 0 -2px 0 var(--ir-amber); } :root[data-theme="iron"] .faq-item.is-open { border-color: var(--ir-amber-dim); } :root[data-theme="iron"] .pager button:hover:not(:disabled) { border-color: var(--ir-amber-dim); color: var(--ir-amber-hi); } :root[data-theme="iron"] .pager button.is-active { background: var(--ir-amber); border-color: var(--ir-amber-dim); } :root[data-theme="iron"] .crumb, :root[data-theme="iron"] .crumb a { color: var(--ir-steel-3); } :root[data-theme="iron"] .cs-alert { border-left-width: 2px; } :root[data-theme="iron"] .cs-toast { background: var(--ir-metal-750); border: 1px solid var(--ir-line-strong); box-shadow: var(--sh-3); } :root[data-theme="iron"] .icon-btn { color: var(--ir-steel-2); border-color: var(--ir-line-strong); background: var(--ir-metal-750); } /* 3.12 Logo：琥珀六角 + 钢蓝字标 */ :root[data-theme="iron"] #lg stop:first-child { stop-color: var(--ir-amber); } :root[data-theme="iron"] #lg stop:last-child { stop-color: var(--ir-amber-dim); } :root[data-theme="iron"] .logo-text b { font-family: var(--ir-display); font-weight: 800; letter-spacing: .03em; color: var(--ir-steel); } :root[data-theme="iron"] .logo-text i { font-family: var(--ir-mono); letter-spacing: .24em; color: var(--ir-steel-3); } :root[data-theme="iron"] .logo-dark .logo-text b { color: var(--ir-steel); } /* ============================================================ 4. IronHeader —— 双条式机柜导航 ============================================================ */ @keyframes ir-blink { 0%, 46% { opacity: 1 } 50%, 96% { opacity: .22 } 100% { opacity: 1 } } @keyframes ir-act { 0%, 38% { opacity: 1 } 42%, 100% { opacity: .18 } } /* 4.1 外框：两条一起吸顶 */ :root[data-theme="iron"] .ir-header { position: sticky; top: 0; z-index: 96; background: var(--ir-metal-800); border-bottom: 1px solid var(--ir-line-strong); box-shadow: inset 0 1px 0 var(--ir-hi); transition: background var(--t-base), box-shadow var(--t-base); } :root[data-theme="iron"] .ir-header.is-scrolled { background: var(--ir-metal-850); box-shadow: inset 0 1px 0 var(--ir-hi), 0 4px 14px rgba(0, 0, 0, .5); } :root[data-theme="iron"] .ir-header::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--ir-amber); transition: width var(--t-base); } :root[data-theme="iron"] .ir-header.is-scrolled::after { width: 172px; } /* 4.2 上沿：细状态带 */ :root[data-theme="iron"] .ir-rail { height: var(--ir-rail-h); background: linear-gradient(180deg, var(--ir-metal-900), var(--ir-metal-950)); border-bottom: 1px solid var(--ir-line); font-family: var(--ir-mono); font-size: 11.5px; letter-spacing: .05em; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-rail-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 100%; } :root[data-theme="iron"] .ir-rail-inner > * { min-width: 0; } :root[data-theme="iron"] .ir-rail-grp { display: inline-flex; align-items: center; gap: 9px; min-width: 0; } :root[data-theme="iron"] .ir-rail-grp.is-end { margin-left: auto; } :root[data-theme="iron"] .ir-rail-grp b { color: var(--ir-steel); font-weight: 600; } :root[data-theme="iron"] .ir-rail-soft { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-theme="iron"] .ir-rail-soft b { color: var(--ir-steel); } :root[data-theme="iron"] .ir-rail-div { flex: none; width: 1px; height: 12px; background: var(--ir-line-strong); } :root[data-theme="iron"] .ir-rail-duty { display: inline-flex; align-items: center; gap: 6px; color: var(--ir-steel-2); white-space: nowrap; } :root[data-theme="iron"] .ir-rail-duty i { width: 5px; height: 5px; border-radius: 50%; background: var(--ir-led-run); animation: ir-blink 2.8s steps(1, end) infinite; } :root[data-theme="iron"] .ir-rail-tel { color: var(--ir-amber); white-space: nowrap; font-weight: 600; } :root[data-theme="iron"] .ir-rail-tel:hover { color: var(--ir-amber-hi); } :root[data-theme="iron"] .ir-led { display: inline-flex; align-items: center; gap: 3px; flex: none; } :root[data-theme="iron"] .ir-led i { width: 6px; height: 6px; border-radius: 50%; background: var(--ir-led-run); } :root[data-theme="iron"] .ir-led i + i { background: var(--ir-amber); animation: ir-act 1.7s steps(1, end) infinite; } :root[data-theme="iron"] .ir-rail .hide-xs { display: inline; } /* 4.3 下沿：主导航行 */ :root[data-theme="iron"] .ir-deck { display: flex; align-items: center; gap: 16px; height: var(--ir-deck-h); } :root[data-theme="iron"] .ir-brand { display: inline-flex; align-items: center; gap: 9px; flex: none; } :root[data-theme="iron"] .ir-brand .logo { gap: 9px; } :root[data-theme="iron"] .ir-brand .logo-text b { font-size: 18.5px; } :root[data-theme="iron"] .ir-brand-tag { padding: 2px 5px; border: 1px solid var(--ir-line-strong); background: var(--ir-metal-750); font-family: var(--ir-mono); font-size: 9.5px; letter-spacing: .16em; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-nav { display: flex; align-items: center; gap: 1px; min-width: 0; } :root[data-theme="iron"] .ir-nav-item { position: relative; } :root[data-theme="iron"] .ir-nav-item.is-wide { position: static; } :root[data-theme="iron"] .ir-nav-link { position: relative; display: inline-flex; align-items: center; gap: 6px; height: var(--ir-deck-h); padding-inline: 13px; font-size: 14px; color: var(--ir-steel-2); white-space: nowrap; transition: color var(--t-fast), background var(--t-fast); } :root[data-theme="iron"] .ir-nav-link::before { content: ""; position: absolute; left: 4px; top: 50%; width: 3px; height: 20px; margin-top: -10px; background: var(--ir-amber); transform: scaleY(0); transition: transform var(--t-base); } :root[data-theme="iron"] .ir-nav-item:hover > .ir-nav-link, :root[data-theme="iron"] .ir-nav-item.is-open > .ir-nav-link, :root[data-theme="iron"] .ir-nav-link.is-active { color: var(--ir-steel); background: var(--ir-metal-750); } :root[data-theme="iron"] .ir-nav-item:hover > .ir-nav-link::before, :root[data-theme="iron"] .ir-nav-item.is-open > .ir-nav-link::before, :root[data-theme="iron"] .ir-nav-link.is-active::before { transform: scaleY(1); } :root[data-theme="iron"] .ir-nav-link.is-active { box-shadow: inset 0 -2px 0 var(--ir-amber); } :root[data-theme="iron"] .ir-nav-caret { display: inline-flex; color: var(--ir-steel-3); transition: transform var(--t-fast), color var(--t-fast); } :root[data-theme="iron"] .ir-nav-item.is-open .ir-nav-caret { transform: rotate(180deg); color: var(--ir-amber); } /* 4.4 mega：机柜抽屉（fixed 居中，transform 只留给入场位移） */ :root[data-theme="iron"] .ir-mega { position: fixed; top: var(--header-h); left: 50%; translate: -50% 0; transform: translateY(-8px); width: min(var(--container-wide), calc(100vw - 32px)); max-width: calc(100vw - 24px); padding-bottom: 14px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base); z-index: 97; } :root[data-theme="iron"] .ir-nav-item.is-open .ir-mega { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } :root[data-theme="iron"] .ir-cab { position: relative; background: var(--ir-metal-800); background-image: var(--ir-brush); border: 1px solid var(--ir-line-strong); box-shadow: var(--sh-3), 0 16px 34px rgba(0, 0, 0, .55); } :root[data-theme="iron"] .ir-cab::after, :root[data-theme="iron"] .ir-chassis::after, :root[data-theme="iron"] .ir-strip::after, :root[data-theme="iron"] .ir-plate-box::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--ir-rivet), var(--ir-rivet), var(--ir-rivet), var(--ir-rivet); background-repeat: no-repeat; background-size: 6px 6px; background-position: left 6px top 6px, right 6px top 6px, left 6px bottom 6px, right 6px bottom 6px; } :root[data-theme="iron"] .ir-cab-rail { display: flex; align-items: center; gap: 10px; height: 30px; padding-inline: 12px; border-bottom: 1px solid var(--ir-line); background: linear-gradient(180deg, var(--ir-metal-700), var(--ir-metal-750)); font-family: var(--ir-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-cab-led { display: inline-flex; gap: 3px; } :root[data-theme="iron"] .ir-cab-led i { width: 6px; height: 6px; border-radius: 50%; background: var(--ir-led-run); } :root[data-theme="iron"] .ir-cab-led i + i { background: var(--ir-amber); animation: ir-act 2.1s steps(1, end) infinite; } :root[data-theme="iron"] .ir-cab-row { color: var(--ir-amber); font-weight: 600; } :root[data-theme="iron"] .ir-cab-name { font-family: var(--ir-sans); font-size: 12.5px; letter-spacing: .02em; text-transform: none; color: var(--ir-steel); } :root[data-theme="iron"] .ir-cab-meta { margin-left: auto; } :root[data-theme="iron"] .ir-cab-body { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 272px; } :root[data-theme="iron"] .ir-cab-body > * { min-width: 0; } :root[data-theme="iron"] .ir-cab-col { padding: 14px 16px 16px; border-left: 1px solid var(--ir-line); } :root[data-theme="iron"] .ir-cab-col:first-child { border-left: 0; } :root[data-theme="iron"] .ir-cab-col h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 11px; letter-spacing: .16em; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-cab-col h4 em { font-family: var(--ir-mono); font-style: normal; font-size: 10px; padding: 0 4px; border: 1px solid var(--ir-amber-dim); color: var(--ir-amber); letter-spacing: .06em; } :root[data-theme="iron"] .ir-cab-col ul { display: grid; gap: 2px; } :root[data-theme="iron"] .ir-slot { position: relative; display: grid; grid-template-columns: 20px 8px 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 6px; border: 1px solid transparent; transition: background var(--t-fast), border-color var(--t-fast); } :root[data-theme="iron"] .ir-slot:hover { background: var(--ir-metal-750); border-color: var(--ir-line); box-shadow: inset 3px 0 0 var(--ir-amber); } :root[data-theme="iron"] .ir-slot-no { font-family: var(--ir-mono); font-size: 10.5px; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-slot-hz { display: grid; gap: 2px; } :root[data-theme="iron"] .ir-slot-hz i { display: block; width: 7px; height: 2px; background: var(--ir-metal-600); } :root[data-theme="iron"] .ir-slot:hover .ir-slot-hz i { background: var(--ir-amber-dim); } :root[data-theme="iron"] .ir-slot-icon { display: grid; place-items: center; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-slot:hover .ir-slot-icon { color: var(--ir-amber); } :root[data-theme="iron"] .ir-slot-main { min-width: 0; } :root[data-theme="iron"] .ir-slot-main b { display: block; font-size: 13px; font-weight: 600; color: var(--ir-steel); } :root[data-theme="iron"] .ir-slot-main em { display: block; margin-top: 1px; font-style: normal; font-size: 11.5px; color: var(--ir-steel-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :root[data-theme="iron"] .ir-slot-flag { padding: 1px 5px; border: 1px solid var(--ir-amber-dim); font-family: var(--ir-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ir-amber); white-space: nowrap; } :root[data-theme="iron"] .ir-cab-side { position: relative; display: grid; gap: 9px; align-content: start; padding: 14px 16px 16px; border-left: 1px solid var(--ir-line); background: linear-gradient(180deg, var(--ir-metal-850), var(--ir-metal-900)); } :root[data-theme="iron"] .ir-side-kicker { font-family: var(--ir-mono); font-size: 10.5px; letter-spacing: .2em; color: var(--ir-amber); } :root[data-theme="iron"] .ir-cab-side b { font-size: 14px; color: var(--ir-steel); } :root[data-theme="iron"] .ir-cab-side p { font-size: 11.5px; line-height: 1.75; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-side-btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; border: 1px solid var(--ir-amber-dim); background: var(--grad-brand); font-size: 12.5px; font-weight: 700; transition: filter var(--t-fast); } :root[data-theme="iron"] .ir-side-btn:hover { filter: brightness(1.08); } :root[data-theme="iron"] .ir-side-btn.is-line { background: var(--ir-metal-750); border-color: var(--ir-line-strong); color: var(--ir-steel-2); } :root[data-theme="iron"] .ir-side-btn.is-line:hover { color: var(--ir-amber-hi); border-color: var(--ir-amber-dim); filter: none; } :root[data-theme="iron"] .ir-side-link { font-size: 11.5px; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-side-link::before { content: "» "; color: var(--ir-amber-dim); } :root[data-theme="iron"] .ir-side-link:hover { color: var(--ir-amber); } :root[data-theme="iron"] .ir-side-sn { margin-top: 2px; padding: 3px 6px; border: 1px dashed var(--ir-line-strong); font-family: var(--ir-mono); font-size: 10px; letter-spacing: .06em; color: var(--ir-steel-3); justify-self: start; } :root[data-theme="iron"] .ir-cab-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 8px 12px; border-top: 1px solid var(--ir-line); background: var(--ir-metal-950); font-family: var(--ir-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-cab-foot i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--ir-led-run); } :root[data-theme="iron"] .ir-cab-foot-r { margin-left: auto; color: var(--ir-metal-600); } /* 4.5 二级下拉：标签贴纸卡 */ :root[data-theme="iron"] .ir-dd { position: absolute; top: calc(100% + 2px); left: 0; min-width: 208px; max-width: min(208px, calc(100vw - 32px)); padding: 4px; background: var(--ir-metal-800); background-image: var(--ir-brush); border: 1px solid var(--ir-line-strong); box-shadow: var(--sh-3), 0 12px 26px rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast); z-index: 98; } :root[data-theme="iron"] .ir-dd.is-right { left: auto; right: 0; } :root[data-theme="iron"] .ir-nav-item.is-open .ir-dd { opacity: 1; visibility: visible; transform: none; } :root[data-theme="iron"] .ir-dd a { position: relative; display: flex; align-items: center; gap: 9px; padding: 8px 10px; font-size: 13px; color: var(--ir-steel-2); transition: background var(--t-fast), color var(--t-fast); } :root[data-theme="iron"] .ir-dd a:hover { background: var(--ir-metal-750); color: var(--ir-amber-hi); } :root[data-theme="iron"] .ir-dd-tick { flex: none; width: 8px; height: 8px; border: 1px solid var(--ir-line-strong); background: var(--ir-metal-900); } :root[data-theme="iron"] .ir-dd a:hover .ir-dd-tick { border-color: var(--ir-amber); background: var(--ir-amber); } :root[data-theme="iron"] .ir-dd-root { border-bottom: 1px solid var(--ir-line); font-family: var(--ir-mono); font-size: 11.5px; letter-spacing: .08em; color: var(--ir-amber); } /* 4.6 右侧动作区 */ :root[data-theme="iron"] .ir-acts { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; } :root[data-theme="iron"] .ir-tel { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding-inline: 10px; border: 1px solid var(--ir-line-strong); background: var(--ir-metal-750); box-shadow: inset 0 1px 0 var(--ir-hi); font-family: var(--ir-mono); font-size: 12.5px; color: var(--ir-steel-2); white-space: nowrap; } :root[data-theme="iron"] .ir-tel svg { color: var(--ir-amber); } :root[data-theme="iron"] .ir-tel:hover { border-color: var(--ir-amber-dim); color: var(--ir-amber-hi); } :root[data-theme="iron"] .ir-sign { display: inline-flex; align-items: center; height: 32px; padding-inline: 13px; border: 1px solid var(--ir-line-strong); background: var(--ir-metal-700); box-shadow: inset 0 1px 0 var(--ir-hi), 0 2px 0 #101317; font-size: 13px; color: var(--ir-steel); white-space: nowrap; transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast); } :root[data-theme="iron"] .ir-sign:hover { background: var(--ir-metal-600); } :root[data-theme="iron"] .ir-sign.is-solid { background: var(--grad-brand); border-color: var(--ir-amber-dim); color: var(--ir-amber-ink); font-weight: 700; } :root[data-theme="iron"] .ir-sign.is-solid:hover { filter: brightness(1.08); } :root[data-theme="iron"] .ir-console { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--ir-line-strong); background: var(--ir-metal-750); box-shadow: inset 0 1px 0 var(--ir-hi); color: var(--ir-steel-2); transition: color var(--t-fast), border-color var(--t-fast); } :root[data-theme="iron"] .ir-console:hover { color: var(--ir-amber); border-color: var(--ir-amber-dim); } :root[data-theme="iron"] .ir-burger { display: none; } /* 4.7 移动端抽屉 */ :root[data-theme="iron"] .ir-drawer { display: none; } :root[data-theme="iron"] .ir-drawer-scroll { padding: 6px 20px 18px; } :root[data-theme="iron"] .ir-dgroup { border-bottom: 1px solid var(--ir-line); } :root[data-theme="iron"] .ir-dgroup summary { display: flex; align-items: center; gap: 9px; padding: 12px 2px; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--ir-steel); list-style: none; } :root[data-theme="iron"] .ir-dgroup summary::-webkit-details-marker { display: none; } :root[data-theme="iron"] .ir-dgroup summary em { font-family: var(--ir-mono); font-style: normal; font-size: 10.5px; color: var(--ir-amber); border: 1px solid var(--ir-amber-dim); padding: 0 4px; } :root[data-theme="iron"] .ir-dgroup-n { margin-left: auto; font-family: var(--ir-mono); font-size: 10.5px; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-dgroup-n::after { content: " SLOT"; letter-spacing: .1em; } :root[data-theme="iron"] .ir-dgroup[open] > summary { border-bottom: 1px dashed var(--ir-line); } :root[data-theme="iron"] .ir-dgroup:not([open]) > summary::after { content: "+"; color: var(--ir-steel-3); margin-left: auto; } :root[data-theme="iron"] .ir-dgroup:not([open]) > summary .ir-dgroup-n { margin-left: 0; } :root[data-theme="iron"] .ir-dlink { display: grid; gap: 2px; padding: 10px 10px 10px 12px; margin: 2px 0; border-left: 2px solid var(--ir-line-strong); background: var(--ir-metal-850); } :root[data-theme="iron"] .ir-dlink:hover { border-left-color: var(--ir-amber); background: var(--ir-metal-800); } :root[data-theme="iron"] .ir-dlink b { font-size: 13px; font-weight: 600; color: var(--ir-steel); } :root[data-theme="iron"] .ir-dlink em { font-style: normal; font-size: 11.5px; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-dacts { display: grid; gap: 9px; margin-top: 16px; } :root[data-theme="iron"] .ir-dfoot { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ir-line); font-family: var(--ir-mono); font-size: 11.5px; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-dfoot a { color: var(--ir-amber); } /* ============================================================ 5. IronHero —— 裸金属剖面 ============================================================ */ :root[data-theme="iron"] .ir-hero { position: relative; overflow: hidden; color: var(--ink-on-dark); background: linear-gradient(180deg, var(--ir-metal-800) 0%, var(--ir-metal-850) 58%, var(--ir-metal-900) 100%); border-bottom: 1px solid var(--ir-line-strong); padding-block: clamp(26px, 3.4vw, 50px) clamp(28px, 3.6vw, 48px); } :root[data-theme="iron"] .ir-hero-hatch { position: absolute; inset: 0; pointer-events: none; background-image: var(--ir-hatch); mask-image: linear-gradient(180deg, #000 0%, transparent 76%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 76%); } :root[data-theme="iron"] .ir-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: clamp(20px, 3vw, 42px); align-items: start; } :root[data-theme="iron"] .ir-hero-grid > * { min-width: 0; } /* 5.1 左：标题 / 定位 / CTA / 贴纸 / 参数 */ :root[data-theme="iron"] .ir-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--ir-amber-dim); background: rgba(240, 161, 60, .07); font-family: var(--ir-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ir-amber); } :root[data-theme="iron"] .ir-kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--ir-amber); animation: ir-blink 2.4s steps(1, end) infinite; } :root[data-theme="iron"] .ir-h1 { margin-top: 18px; font-family: var(--ir-display); font-size: clamp(33px, 4.5vw, 57px); font-weight: 800; line-height: 1.1; letter-spacing: .005em; color: #eef3f8; } :root[data-theme="iron"] .ir-h1-l2 { display: block; color: var(--ir-steel-2); } :root[data-theme="iron"] .ir-h1-l2::before { content: ""; display: inline-block; width: 30px; height: 7px; margin-right: 13px; vertical-align: .16em; background: var(--ir-amber); } :root[data-theme="iron"] .ir-sub { margin-top: 16px; max-width: 48ch; font-size: 15px; line-height: 1.8; color: var(--ink-on-dark-mute); } :root[data-theme="iron"] .ir-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } :root[data-theme="iron"] .ir-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding-inline: 20px; border: 1px solid var(--ir-amber-dim); background: var(--grad-brand); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 2px 0 #0e1013; font-size: 14.5px; font-weight: 700; color: var(--ir-amber-ink); white-space: nowrap; transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast); } :root[data-theme="iron"] .ir-cta:hover { transform: translateY(-1px); filter: brightness(1.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 0 #0e1013; } :root[data-theme="iron"] .ir-cta:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45); } :root[data-theme="iron"] .ir-cta.is-line { background: var(--ir-metal-700); border-color: var(--ir-line-strong); color: var(--ir-steel); box-shadow: inset 0 1px 0 var(--ir-hi), 0 2px 0 #0e1013; } :root[data-theme="iron"] .ir-cta.is-line:hover { border-color: var(--ir-amber-dim); color: var(--ir-amber-hi); filter: none; } :root[data-theme="iron"] .ir-tapes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } :root[data-theme="iron"] .ir-tape { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px dashed var(--ir-line-strong); background: var(--ir-metal-800); font-family: var(--ir-mono); font-size: 11.5px; letter-spacing: .04em; color: var(--ir-steel); } :root[data-theme="iron"] .ir-tape i { width: 6px; height: 6px; border-radius: 50%; background: var(--ir-amber); } :root[data-theme="iron"] .ir-params { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 24px; background: var(--ir-line); border: 1px solid var(--ir-line-strong); box-shadow: var(--sh-1); } :root[data-theme="iron"] .ir-param { display: flex; align-items: baseline; gap: 9px; padding: 8px 10px; background: var(--ir-metal-800); min-width: 0; } :root[data-theme="iron"] .ir-param dt { flex: none; width: 44px; font-family: var(--ir-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-param dd { min-width: 0; font-family: var(--ir-mono); font-size: 12.5px; color: var(--ir-steel); } :root[data-theme="iron"] .ir-price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ir-line); } :root[data-theme="iron"] .ir-price { font-family: var(--ir-mono); color: var(--ir-amber); } :root[data-theme="iron"] .ir-price em { font-style: normal; font-size: 14px; } :root[data-theme="iron"] .ir-price b { font-size: 30px; font-weight: 800; } :root[data-theme="iron"] .ir-price span { font-size: 12px; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-price-note { font-size: 12px; color: var(--ir-steel-3); } /* 5.2 右：机箱剖面卡 */ :root[data-theme="iron"] .ir-chassis { position: relative; display: grid; gap: 10px; padding: 12px; background: linear-gradient(180deg, var(--ir-metal-750), var(--ir-metal-850)); background-image: var(--ir-brush); border: 1px solid var(--ir-line-strong); box-shadow: var(--sh-2), 0 8px 22px rgba(0, 0, 0, .5); } :root[data-theme="iron"] .ir-chassis-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; } :root[data-theme="iron"] .ir-sticker { display: grid; gap: 1px; padding: 6px 11px; background: linear-gradient(180deg, #e9eef4, #c8d2dd); border: 1px solid #8c97a3; box-shadow: 0 1px 0 rgba(0, 0, 0, .5); transform: rotate(-.5deg); } :root[data-theme="iron"] .ir-sticker b { font-family: var(--ir-display); font-size: 15px; font-weight: 800; letter-spacing: .02em; color: #14181c; } :root[data-theme="iron"] .ir-sticker em { font-family: var(--ir-mono); font-style: normal; font-size: 10px; letter-spacing: .06em; color: #3d4650; } :root[data-theme="iron"] .ir-chassis-sn { display: inline-flex; align-items: center; gap: 8px; padding-top: 4px; font-family: var(--ir-mono); font-size: 11px; letter-spacing: .04em; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-chassis-sn::before { content: ""; width: 34px; height: 14px; background-image: repeating-linear-gradient(90deg, var(--ir-steel-2) 0 1px, transparent 1px 2px, var(--ir-steel-2) 2px 4px, transparent 4px 7px, var(--ir-steel-2) 7px 8px, transparent 8px 11px); opacity: .55; } :root[data-theme="iron"] .ir-chassis-body { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 14px; gap: 8px; align-items: stretch; padding: 8px; background: var(--ir-metal-950); border: 1px solid var(--ir-line); box-shadow: var(--ir-groove); } :root[data-theme="iron"] .ir-chassis-body > * { min-width: 0; } :root[data-theme="iron"] .ir-ear { position: relative; background: linear-gradient(90deg, var(--ir-metal-600), var(--ir-metal-750)); border: 1px solid var(--ir-line-strong); } :root[data-theme="iron"] .ir-ear i { position: absolute; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #06080a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); } :root[data-theme="iron"] .ir-ear i:nth-child(1) { top: 6px; } :root[data-theme="iron"] .ir-ear i:nth-child(2) { top: 50%; margin-top: -2.5px; } :root[data-theme="iron"] .ir-ear i:nth-child(3) { bottom: 6px; } :root[data-theme="iron"] .ir-bays { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; min-width: 0; } :root[data-theme="iron"] .ir-bay { position: relative; display: grid; grid-template-columns: 5px auto minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 8px 7px; background: linear-gradient(180deg, var(--ir-metal-700), var(--ir-metal-750)); border: 1px solid var(--ir-line); box-shadow: inset 0 1px 0 var(--ir-hi), 0 1px 0 #0b0d0f; min-width: 0; transition: border-color var(--t-fast), background var(--t-fast); } :root[data-theme="iron"] .ir-bay:hover { border-color: var(--ir-amber-dim); background: linear-gradient(180deg, var(--ir-metal-600), var(--ir-metal-700)); } :root[data-theme="iron"] .ir-bay-handle { align-self: stretch; background: linear-gradient(180deg, var(--ir-metal-600), var(--ir-metal-900)); } :root[data-theme="iron"] .ir-bay-leds { display: grid; gap: 3px; } :root[data-theme="iron"] .ir-bay-leds i { width: 5px; height: 5px; border-radius: 50%; background: var(--ir-metal-600); } :root[data-theme="iron"] .ir-bay-leds .is-run { background: var(--ir-led-run); } :root[data-theme="iron"] .ir-bay-leds .is-act { background: var(--ir-amber); animation: ir-act 1.3s steps(1, end) infinite; } :root[data-theme="iron"] .ir-bay-txt { min-width: 0; } :root[data-theme="iron"] .ir-bay-txt b { display: block; font-family: var(--ir-mono); font-size: 12.5px; font-weight: 600; color: var(--ir-steel); } :root[data-theme="iron"] .ir-bay-txt em { display: block; font-family: var(--ir-mono); font-style: normal; font-size: 10px; letter-spacing: .02em; color: var(--ir-steel-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-theme="iron"] .ir-bay-no { font-family: var(--ir-display); font-size: 16px; font-weight: 800; color: var(--ir-metal-600); } :root[data-theme="iron"] .ir-bay:hover .ir-bay-no { color: var(--ir-amber-dim); } :root[data-theme="iron"] .ir-rig-right { display: grid; grid-template-rows: auto auto; gap: 6px; align-content: start; width: 134px; } :root[data-theme="iron"] .ir-io { display: grid; gap: 4px; padding: 6px; background: var(--ir-metal-900); border: 1px solid var(--ir-line); } :root[data-theme="iron"] .ir-port { display: grid; grid-template-columns: 5px 22px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; } :root[data-theme="iron"] .ir-port-led { width: 5px; height: 5px; border-radius: 50%; background: var(--ir-metal-600); } :root[data-theme="iron"] .ir-port.is-on .ir-port-led { background: var(--ir-led-run); } :root[data-theme="iron"] .ir-port:nth-child(1) .ir-port-led { background: var(--ir-amber); animation: ir-blink 3.4s steps(1, end) infinite; } :root[data-theme="iron"] .ir-port-jack { position: relative; width: 22px; height: 14px; background: linear-gradient(180deg, var(--ir-metal-600), var(--ir-metal-800)); border: 1px solid #05070a; } :root[data-theme="iron"] .ir-port-jack::before { content: ""; position: absolute; left: 4px; right: 4px; top: 2px; height: 5px; background: #05070a; } :root[data-theme="iron"] .ir-port-jack::after { content: ""; position: absolute; left: 8px; bottom: 1px; width: 6px; height: 3px; background: #05070a; } :root[data-theme="iron"] .ir-port-txt { min-width: 0; } :root[data-theme="iron"] .ir-port-txt b { display: block; font-family: var(--ir-mono); font-size: 10.5px; font-weight: 600; color: var(--ir-steel-2); } :root[data-theme="iron"] .ir-port-txt em { display: block; font-family: var(--ir-mono); font-style: normal; font-size: 9.5px; color: var(--ir-steel-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :root[data-theme="iron"] .ir-psus { display: grid; gap: 4px; padding: 6px; background: var(--ir-metal-900); border: 1px solid var(--ir-line); } :root[data-theme="iron"] .ir-psu { display: grid; grid-template-columns: minmax(0, 1fr) auto 6px; align-items: center; gap: 6px; } :root[data-theme="iron"] .ir-psu-hatch { height: 12px; background-image: repeating-linear-gradient(115deg, rgba(0, 0, 0, .55) 0 2px, transparent 2px 4px); border: 1px solid var(--ir-line); } :root[data-theme="iron"] .ir-psu-txt { font-family: var(--ir-mono); font-size: 10px; letter-spacing: .06em; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-psu i { width: 6px; height: 6px; border-radius: 50%; background: var(--ir-led-run); } :root[data-theme="iron"] .ir-psu i.is-standby { background: var(--ir-amber); animation: ir-blink 2.6s steps(1, end) infinite; } :root[data-theme="iron"] .ir-chassis-vent { height: 16px; background: var(--ir-metal-800); background-image: repeating-linear-gradient(115deg, rgba(0, 0, 0, .5) 0 3px, transparent 3px 7px); border: 1px solid var(--ir-line); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); } :root[data-theme="iron"] .ir-chassis-foot { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: start; } :root[data-theme="iron"] .ir-rackmap { width: 40px; height: auto; } :root[data-theme="iron"] .ir-rack-frame { fill: none; stroke: var(--ir-line-strong); } :root[data-theme="iron"] .ir-rack-u { fill: var(--ir-metal-800); stroke: var(--ir-line); } :root[data-theme="iron"] .ir-rack-u.is-on { fill: var(--ir-amber); stroke: var(--ir-amber-dim); } :root[data-theme="iron"] .ir-chassis-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--ir-line); border: 1px solid var(--ir-line); min-width: 0; } :root[data-theme="iron"] .ir-chassis-meta li { min-width: 0; padding: 6px 8px; background: var(--ir-metal-800); } :root[data-theme="iron"] .ir-chassis-meta span { display: block; font-family: var(--ir-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-chassis-meta b { display: block; font-size: 12px; font-weight: 600; color: var(--ir-steel); } /* 5.3 下：可交付槽位表 */ :root[data-theme="iron"] .ir-strip { position: relative; grid-column: 1 / -1; margin-top: 6px; background: var(--ir-metal-850); background-image: var(--ir-brush); border: 1px solid var(--ir-line-strong); box-shadow: var(--sh-1); } :root[data-theme="iron"] .ir-strip-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--ir-line); background: linear-gradient(180deg, var(--ir-metal-700), var(--ir-metal-750)); font-family: var(--ir-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-strip-k { color: var(--ir-amber); font-weight: 600; } :root[data-theme="iron"] .ir-strip-soft { font-family: var(--ir-sans); font-size: 12px; letter-spacing: .01em; text-transform: none; } :root[data-theme="iron"] .ir-strip-led { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; } :root[data-theme="iron"] .ir-strip-led i { width: 6px; height: 6px; border-radius: 50%; background: var(--ir-led-run); animation: ir-blink 3s steps(1, end) infinite; } :root[data-theme="iron"] .ir-scroll { overflow-x: auto; } :root[data-theme="iron"] .ir-dtbl { min-width: 700px; font-size: 12.5px; } :root[data-theme="iron"] .ir-dtbl th, :root[data-theme="iron"] .ir-dtbl td { padding: 9px 12px; border-bottom: 1px solid var(--ir-line); text-align: left; vertical-align: middle; } :root[data-theme="iron"] .ir-dtbl thead th { position: sticky; top: 0; background: var(--ir-metal-900); font-family: var(--ir-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ir-steel-3); font-weight: 600; } :root[data-theme="iron"] .ir-dtbl tbody tr:last-child td { border-bottom: 0; } :root[data-theme="iron"] .ir-dtbl tbody tr:hover { background: var(--ir-metal-800); } :root[data-theme="iron"] .ir-dtbl tr.is-on { background: rgba(240, 161, 60, .05); box-shadow: inset 3px 0 0 var(--ir-amber); } :root[data-theme="iron"] .ir-dtbl td b { display: block; font-size: 13px; color: var(--ir-steel); } :root[data-theme="iron"] .ir-dtbl td em { display: block; font-style: normal; font-family: var(--ir-mono); font-size: 10.5px; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-dtbl td { color: var(--ir-steel-2); } :root[data-theme="iron"] .ir-u { font-family: var(--ir-mono); font-size: 11.5px; color: var(--ir-amber); } :root[data-theme="iron"] .ir-money { font-family: var(--ir-mono); font-size: 14px; font-weight: 800; color: var(--ir-steel); } :root[data-theme="iron"] .ir-form { display: inline-block; padding: 1px 6px; border: 1px solid var(--ir-line-strong); background: var(--ir-metal-750); font-size: 11.5px; color: var(--ir-steel-2); white-space: nowrap; } :root[data-theme="iron"] .ir-strip-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 9px 12px; border-top: 1px solid var(--ir-line); background: var(--ir-metal-900); font-size: 12px; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-strip-foot i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: var(--ir-led-run); } :root[data-theme="iron"] .ir-strip-link { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12.5px; color: var(--ir-amber); } :root[data-theme="iron"] .ir-strip-link:hover { color: var(--ir-amber-hi); } /* ============================================================ 6. IronFooter —— 机柜背板分区 ============================================================ */ :root[data-theme="iron"] .ir-footer { position: relative; background: var(--ir-metal-900); background-image: var(--ir-brush); color: var(--ink-on-dark); border-top: 1px solid var(--ir-line-strong); padding-bottom: var(--sp-7); } :root[data-theme="iron"] .ir-footer::before { content: ""; display: block; height: 5px; background-image: repeating-linear-gradient(135deg, rgba(240, 161, 60, .55) 0 7px, rgba(12, 14, 16, .9) 7px 14px); } /* 6.1 元信息带 */ :root[data-theme="iron"] .ir-tele { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: linear-gradient(180deg, var(--ir-metal-850), var(--ir-metal-900)); border-bottom: 1px solid var(--ir-line); } :root[data-theme="iron"] .ir-tele-cell { display: grid; gap: 5px; align-content: start; min-width: 0; padding: 16px 16px 14px; border-left: 1px solid var(--ir-line); } :root[data-theme="iron"] .ir-tele-cell:first-child { border-left: 0; } :root[data-theme="iron"] .ir-tele-k { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ir-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-led-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ir-metal-600); flex: none; } :root[data-theme="iron"] .ir-led-dot.is-run { background: var(--ir-led-run); } :root[data-theme="iron"] .ir-led-dot.is-act { background: var(--ir-amber); animation: ir-act 2s steps(1, end) infinite; } :root[data-theme="iron"] .ir-led-dot.is-idle { background: var(--ir-steel-3); } :root[data-theme="iron"] .ir-tele-v { font-family: var(--ir-mono); font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--ir-steel); } :root[data-theme="iron"] .ir-tele-v em { font-style: normal; font-size: 13px; color: var(--ir-amber); } :root[data-theme="iron"] .ir-tele-d { font-size: 15px; font-weight: 700; letter-spacing: .01em; } :root[data-theme="iron"] .ir-tele-n { font-size: 11.5px; line-height: 1.6; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-tele-link { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 11.5px; line-height: 1.6; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-tele-link:hover { color: var(--ir-amber-hi); } :root[data-theme="iron"] .ir-water { height: 5px; border: 1px solid var(--ir-line); background: var(--ir-metal-950); } :root[data-theme="iron"] .ir-water i { display: block; height: 100%; background: var(--ir-amber); transition: width .6s linear; } /* 6.2 背板：品牌 / 链接列 / 侧牌 */ :root[data-theme="iron"] .ir-back { display: grid; grid-template-columns: 300px minmax(0, 1fr) 244px; align-items: start; padding-block: var(--sp-7); } :root[data-theme="iron"] .ir-back > * { min-width: 0; } :root[data-theme="iron"] .ir-back-brand { padding-right: 26px; } :root[data-theme="iron"] .ir-back-slogan { margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--ir-steel); } :root[data-theme="iron"] .ir-back-soft { margin-top: 6px; font-size: 12.5px; line-height: 1.75; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-back-contact { display: grid; gap: 8px; margin-top: 18px; font-size: 12.5px; color: var(--ir-steel-2); } :root[data-theme="iron"] .ir-back-contact li { display: flex; align-items: center; gap: 8px; min-width: 0; } :root[data-theme="iron"] .ir-back-contact svg { color: var(--ir-amber); flex: none; } :root[data-theme="iron"] .ir-back-contact span { font-family: var(--ir-mono); font-size: 11.5px; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-back-social { display: flex; align-items: center; gap: 8px; margin-top: 18px; } :root[data-theme="iron"] .ir-back-social a { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--ir-line-strong); background: var(--ir-metal-800); box-shadow: inset 0 1px 0 var(--ir-hi); color: var(--ir-steel-2); transition: color var(--t-fast), border-color var(--t-fast); } :root[data-theme="iron"] .ir-back-social a:hover { color: var(--ir-amber); border-color: var(--ir-amber-dim); } :root[data-theme="iron"] .ir-back-qq { font-family: var(--ir-mono); font-size: 11px; letter-spacing: .06em; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-back-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid var(--ir-line); } :root[data-theme="iron"] .ir-back-links > * { min-width: 0; } :root[data-theme="iron"] .ir-back-col { padding-inline: 16px; border-left: 1px solid var(--ir-line); } :root[data-theme="iron"] .ir-back-col:first-child { border-left: 0; } :root[data-theme="iron"] .ir-back-col h4 { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; font-size: 11px; color: var(--ir-steel-2); } :root[data-theme="iron"] .ir-back-col h4 em { font-family: var(--ir-mono); font-style: normal; font-size: 9.5px; letter-spacing: .04em; padding: 0 4px; border: 1px solid var(--ir-line-strong); color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-back-col ul { display: grid; gap: 2px; } :root[data-theme="iron"] .ir-back-col li a { display: flex; align-items: center; gap: 7px; padding: 5px 0; font-size: 12.5px; color: var(--ink-on-dark-mute); transition: color var(--t-fast); } :root[data-theme="iron"] .ir-back-col li a::before { content: ""; flex: none; width: 0; height: 1px; background: var(--ir-amber); transition: width var(--t-fast); } :root[data-theme="iron"] .ir-back-col li a:hover { color: var(--ir-amber-hi); } :root[data-theme="iron"] .ir-back-col li a:hover::before { width: 9px; } :root[data-theme="iron"] .ir-back-side { display: grid; gap: 14px; align-content: start; padding-left: 22px; border-left: 1px solid var(--ir-line); } :root[data-theme="iron"] .ir-plate-box { position: relative; display: grid; gap: 8px; padding: 14px 14px 13px; background: var(--ir-metal-800); background-image: var(--ir-brush); border: 1px solid var(--ir-line-strong); box-shadow: var(--sh-1); } :root[data-theme="iron"] .ir-plate-title { font-family: var(--ir-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ir-amber); } :root[data-theme="iron"] .ir-plate-item { display: grid; gap: 2px; } :root[data-theme="iron"] .ir-plate-item b { font-family: var(--ir-mono); font-size: 11px; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-plate-item em { font-style: normal; font-size: 12.5px; line-height: 1.6; color: var(--ir-steel); } :root[data-theme="iron"] .ir-plate-item:hover em { color: var(--ir-amber-hi); } :root[data-theme="iron"] .ir-plate-more { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-plate-more:hover { color: var(--ir-amber); } :root[data-theme="iron"] .ir-nameplate { display: grid; gap: 6px; font-family: var(--ir-mono); font-size: 11.5px; } :root[data-theme="iron"] .ir-nameplate li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted var(--ir-line); padding-bottom: 5px; } :root[data-theme="iron"] .ir-nameplate li:last-child { border-bottom: 0; padding-bottom: 0; } :root[data-theme="iron"] .ir-nameplate span { color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-nameplate b { color: var(--ir-steel); font-weight: 600; } /* 6.3 铭牌条：备案 / 许可 / 举报 */ :root[data-theme="iron"] .ir-plate { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--ir-line); } :root[data-theme="iron"] .ir-plate-legal { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--ir-mono); font-size: 11.5px; color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-plate-legal a { color: var(--ir-steel-3); } :root[data-theme="iron"] .ir-plate-legal a:hover { color: var(--ir-amber-hi); } :root[data-theme="iron"] .ir-plate-report { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; } :root[data-theme="iron"] .ir-plate-report a { padding: 4px 9px; border: 1px solid var(--ir-line-strong); background: var(--ir-metal-850); color: var(--ir-steel-2); } :root[data-theme="iron"] .ir-plate-report a:hover { border-color: var(--ir-amber-dim); color: var(--ir-amber-hi); } /* ============================================================ 7. 响应式 ============================================================ */ @media (max-width: 1180px) { :root[data-theme="iron"] .ir-cab-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } :root[data-theme="iron"] .ir-cab-side { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--ir-line); } :root[data-theme="iron"] .ir-back { grid-template-columns: 268px minmax(0, 1fr); } :root[data-theme="iron"] .ir-back-side { grid-column: 1 / -1; grid-auto-flow: column; gap: 16px; padding-left: 0; border-left: 0; border-top: 1px solid var(--ir-line); padding-top: 18px; margin-top: 4px; } :root[data-theme="iron"] .ir-back-side > * { min-width: 0; } :root[data-theme="iron"] .ir-tel { display: none; } :root[data-theme="iron"] .ir-nav-link { padding-inline: 10px; font-size: 13.5px; } } @media (max-width: 1080px) { :root[data-theme="iron"] .ir-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } :root[data-theme="iron"] .ir-tele { grid-template-columns: repeat(3, minmax(0, 1fr)); } :root[data-theme="iron"] .ir-tele-cell { border-top: 1px solid var(--ir-line); } :root[data-theme="iron"] .ir-tele-cell:nth-child(3n + 1) { border-left: 0; } :root[data-theme="iron"] .ir-rig-right { width: 128px; } :root[data-theme="iron"] .ir-brand-tag { display: none; } :root[data-theme="iron"] .ir-nav-link { padding-inline: 8px; font-size: 13px; } } @media (max-width: 900px) { :root[data-theme="iron"] { --ir-deck-h: 58px; } :root[data-theme="iron"] .ir-back { grid-template-columns: minmax(0, 1fr); } :root[data-theme="iron"] .ir-back-brand { padding-right: 0; padding-bottom: 22px; border-bottom: 1px solid var(--ir-line); } :root[data-theme="iron"] .ir-back-links { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; row-gap: 20px; } :root[data-theme="iron"] .ir-back-col { padding-inline: 0 14px; border-left: 0; } :root[data-theme="iron"] .ir-back-col:nth-child(2n) { border-left: 1px solid var(--ir-line); padding-left: 16px; } :root[data-theme="iron"] .ir-chassis-foot { grid-template-columns: 40px minmax(0, 1fr); } :root[data-theme="iron"] .ir-params { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } :root[data-theme="iron"] .ir-strip-soft { display: none; } } @media (max-width: 999px) { :root[data-theme="iron"] .ir-nav, :root[data-theme="iron"] .ir-acts .ir-sign, :root[data-theme="iron"] .ir-acts .ir-console { display: none; } :root[data-theme="iron"] .ir-mega, :root[data-theme="iron"] .ir-dd { display: none; } :root[data-theme="iron"] .ir-burger { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ir-line-strong); background: var(--ir-metal-750); box-shadow: inset 0 1px 0 var(--ir-hi); color: var(--ir-steel); } :root[data-theme="iron"] .ir-acts { gap: 6px; } :root[data-theme="iron"] .ir-drawer { display: block; position: absolute; left: 0; right: 0; top: 100%; max-height: 0; overflow: hidden; background: var(--ir-metal-850); background-image: var(--ir-brush); border-bottom: 1px solid var(--ir-line-strong); box-shadow: 0 14px 30px rgba(0, 0, 0, .55); transition: max-height var(--t-base); } :root[data-theme="iron"] .ir-drawer.is-open { max-height: min(80dvh, 680px); overflow-y: auto; } } @media (max-width: 620px) { :root[data-theme="iron"] { --ir-rail-h: 28px; --ir-deck-h: 56px; --gutter: 16px; } :root[data-theme="iron"] .ir-hero { padding-block: 22px 26px; } :root[data-theme="iron"] .ir-h1 { font-size: 30px; } :root[data-theme="iron"] .ir-h1-l2::before { width: 20px; height: 5px; margin-right: 9px; } :root[data-theme="iron"] .ir-cta { flex: 1 1 100%; } :root[data-theme="iron"] .ir-cta-row { gap: 8px; } :root[data-theme="iron"] .ir-tele { grid-template-columns: minmax(0, 1fr); } :root[data-theme="iron"] .ir-tele-cell { border-left: 0; } :root[data-theme="iron"] .ir-tele-cell + .ir-tele-cell { border-top: 1px solid var(--ir-line); } :root[data-theme="iron"] .ir-tele-v { font-size: 20px; } :root[data-theme="iron"] .ir-back-side { grid-auto-flow: row; } :root[data-theme="iron"] .ir-back-links { grid-template-columns: minmax(0, 1fr); } :root[data-theme="iron"] .ir-back-col, :root[data-theme="iron"] .ir-back-col:nth-child(2n) { border-left: 0; padding-left: 0; } :root[data-theme="iron"] .ir-chassis { padding: 10px; } :root[data-theme="iron"] .ir-chassis-body { grid-template-columns: minmax(0, 1fr); } :root[data-theme="iron"] .ir-ear { display: none; } :root[data-theme="iron"] .ir-rig-right { width: 100%; grid-template-rows: none; grid-template-columns: minmax(0, 1fr) 96px; } :root[data-theme="iron"] .ir-chassis-foot { grid-template-columns: 36px minmax(0, 1fr); } :root[data-theme="iron"] .ir-chassis-meta { grid-template-columns: minmax(0, 1fr); } :root[data-theme="iron"] .ir-strip-led { margin-left: 0; } :root[data-theme="iron"] .ir-dtbl { min-width: 560px; } } /* ---------- 窄屏：状态带精简 ---------- */ @media (max-width: 720px) { :root[data-theme="iron"] .ir-rail .hide-xs, :root[data-theme="iron"] .ir-rail-soft { display: none; } } /* ---------- 移动端触摸目标（≥44px）与字号下限（≥11px） ---------- */ @media (max-width: 620px) { :root[data-theme="iron"] .ir-dlink, :root[data-theme="iron"] .ir-dgroup summary, :root[data-theme="iron"] .ir-dacts .btn { min-height: 44px; display: flex; align-items: center; } :root[data-theme="iron"] .ir-dlink { display: grid; align-content: center; } :root[data-theme="iron"] .ir-dacts .btn { justify-content: center; } :root[data-theme="iron"] :is( .ir-param dt, .ir-bay-txt em, .ir-port-txt b, .ir-port-txt em, .ir-psu-txt, .ir-chassis-meta span, .ir-chassis-sn, .ir-sticker em, .ir-u, .ir-tele-k, .ir-tele-n, .ir-tele-link, .ir-plate-title, .ir-plate-item b, .ir-back-col h4 em, .ir-dgroup summary em, .ir-dgroup-n, .ir-cab-foot, .ir-slot-no, .ir-slot-flag, .ir-cab-col h4 em, .ir-side-kicker, .ir-side-sn ), :root[data-theme="iron"] .logo-text i, :root[data-theme="iron"] .ir-dtbl thead th, :root[data-theme="iron"] .ir-dtbl td em { font-size: 11px; } :root[data-theme="iron"] .ir-dtbl td { font-size: 11.5px; } :root[data-theme="iron"] .ir-slot-main em { font-size: 11px; } } /* == mobile-audit (scripts/theme-mobile-audit.cjs) == */ @media (max-width: 620px) { :root[data-theme="iron"] .ir-brand-tag, :root[data-theme="iron"] .ir-cab-col h4 em, :root[data-theme="iron"] .ir-slot-no, :root[data-theme="iron"] .ir-slot-flag, :root[data-theme="iron"] .ir-side-kicker, :root[data-theme="iron"] .ir-side-sn, :root[data-theme="iron"] .ir-cab-foot, :root[data-theme="iron"] .ir-dgroup summary em, :root[data-theme="iron"] .ir-dgroup-n, :root[data-theme="iron"] .ir-param dt, :root[data-theme="iron"] .ir-sticker em, :root[data-theme="iron"] .ir-bay-txt em, :root[data-theme="iron"] .ir-port-txt b, :root[data-theme="iron"] .ir-port-txt em, :root[data-theme="iron"] .ir-psu-txt, :root[data-theme="iron"] .ir-chassis-meta span, :root[data-theme="iron"] .ir-dtbl thead th, :root[data-theme="iron"] .ir-dtbl td em, :root[data-theme="iron"] .ir-tele-k, :root[data-theme="iron"] .ir-back-col h4 em, :root[data-theme="iron"] .ir-plate-title { font-size: 11px; } :root[data-theme="iron"] .ir-drawer a, :root[data-theme="iron"] .ir-drawer summary, :root[data-theme="iron"] .ir-drawer .btn { min-height: 44px; display: flex; align-items: center; } }