/* ========================================================================== * 船联汇 VesselNexus — B1 Brand Header & LOGO Stylesheet * ========================================================================== * B1 方案定位: "深蓝信赖 · 金色链接" * * 覆盖范围: * §1. LOGO Mark — 图标 & 文字 & 徽章样式 * §2. Header — 页眉布局 (PC) * §3. Primary Navigation — 主导航 (含下拉菜单) * §4. Header Actions — 搜索 / 语言 / 登录 / CTA 按钮 * §5. Mobile — 移动端断点 & 汉堡菜单 * §6. Header States — sticky / scrolled / transparent 变体 * §7. Animations — keyframes * * 依赖: vnx-design-tokens.css (CSS custom properties) * * 适配断点: * Mobile-first 策略，min-width 渐进增强 * < 768px → 移动端 (汉堡菜单) * 768-1023px → 平板 (紧凑导航) * ≥ 1024px → PC 端 (完整导航) * * @package VesselNexus * @version 1.0.0 * ========================================================================== */ /* ═══════════════════════════════════════════════════════════════════════════ §0. CRITICAL INLINE (inline in for instant render) ═══════════════════════════════════════════════════════════════════════════ 下面规则应在中内联输出以保证首帧即显示 LOGO，无需等待 CSS 文件加载。完整样式表在外部引用时覆盖/增强。 ═══════════════════════════════════════════════════════════════════════════ */ /* 内联骨架 — 防止 CLS */ .vnx-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--vnx-header-height); background: var(--vnx-surface-header); display: flex; align-items: center; } .vnx-logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; } .vnx-logo__emblem { display: block; flex-shrink: 0; border-radius: 50%; } .vnx-logo__text { display: flex; flex-direction: column; line-height: 1; } /* ═══════════════════════════════════════════════════════════════════════════ §1. LOGO — B1 方案核心样式 ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1.1 完整 LOGO (徽章 + 文字横排) — PC 默认 ── */ .vnx-logo--full { gap: var(--vnx-space-3); padding: var(--vnx-space-1) 0; transition: opacity var(--vnx-duration-fast) var(--vnx-ease-out); } .vnx-logo--full:hover { opacity: 0.92; } /* * Logo 圆形徽章 — 反白版 PNG (56x56) * 徽章为深蓝外环 + 白色内圆，在深色页眉上需要白色外发光勾勒轮廓 */ .vnx-logo--full .vnx-logo__emblem { width: 56px; height: 56px; border-radius: 50%; object-fit: contain; /* 白色微光环 — 让徽章从深色页眉中浮出 */ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 2px 12px rgba(0, 0, 0, 0.4); transition: transform var(--vnx-duration-slower) var(--vnx-ease-spring), box-shadow var(--vnx-duration-slower) var(--vnx-ease-out); } .vnx-logo--full:hover .vnx-logo__emblem { transform: scale(1.06); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.08), 0 4px 16px rgba(0, 0, 0, 0.5); } /* Logo 文字区 */ .vnx-logo--full .vnx-logo__text { gap: 2px; } /* ── 中文品牌名: 船联汇 ── */ .vnx-logo__cn { display: block; font-family: var(--vnx-font-family-display); font-weight: var(--vnx-font-bold); font-size: 1.625rem; /* 26px */ letter-spacing: 0.1em; line-height: 1.1; color: var(--vnx-white); } /* 浅色背景下的文字色 (Vertical / Footer) */ .vnx-logo__cn--dark { color: var(--vnx-gray-900); } /* ── 英文品牌名: VesselNexus ── */ .vnx-logo__en { font-family: var(--vnx-font-family-heading); font-weight: var(--vnx-font-regular); font-size: 0.78rem; /* 12.5px */ letter-spacing: 0.14em; text-transform: uppercase; color: var(--vnx-ocean-300); transition: color var(--vnx-duration-normal) var(--vnx-ease-out); } .vnx-logo__en--dark { color: var(--vnx-gray-600); } /* "Nexus" 微亮强调 */ .vnx-logo__en-accent { font-weight: var(--vnx-font-semibold); color: var(--vnx-ocean-200); letter-spacing: 0.16em; } .vnx-logo__en--dark .vnx-logo__en-accent { color: var(--vnx-ocean-600); } .vnx-logo--full:hover .vnx-logo__en { color: var(--vnx-ocean-200); } .vnx-logo--full:hover .vnx-logo__en-accent { color: var(--vnx-gold-300); } /* ── 1.2 仅图标 LOGO — 移动端 ── */ .vnx-logo--icon { display: none; /* 默认隐藏，移动端显示 */ padding: var(--vnx-space-2); } .vnx-logo--icon .vnx-logo__emblem { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1px 8px rgba(0, 0, 0, 0.3); } .vnx-logo--icon:hover .vnx-logo__emblem { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 0 14px rgba(255, 255, 255, 0.06); } /* ── 1.3 竖排 LOGO (页脚 / 侧栏 — 使用彩色原版) ── */ .vnx-logo--vertical { flex-direction: column; gap: var(--vnx-space-3); text-align: center; } .vnx-logo--vertical .vnx-logo__emblem { width: 80px; height: 80px; border-radius: 50%; object-fit: contain; box-shadow: var(--vnx-shadow-md); } .vnx-logo--vertical .vnx-logo__text { align-items: center; gap: 1px; } .vnx-logo--vertical .vnx-logo__cn { font-size: 1.25rem; } .vnx-logo--vertical .vnx-logo__en { font-size: 0.6875rem; } /* ═══════════════════════════════════════════════════════════════════════════ §2. HEADER — 页眉布局 (PC: ≥1024px) ═══════════════════════════════════════════════════════════════════════════ */ .vnx-header { height: var(--vnx-header-height); background: var(--vnx-surface-header); border-bottom: 1px solid rgba(255, 255, 255, 0.06); /* 毛玻璃效果 — 仅 sticky 时启用 */ transition: height var(--vnx-duration-slow) var(--vnx-ease-out), background var(--vnx-duration-slow) var(--vnx-ease-out), box-shadow var(--vnx-duration-slow) var(--vnx-ease-out); } /* ── Header 内部容器 ── */ .vnx-header__inner { display: flex; align-items: center; width: 100%; max-width: var(--vnx-content-max-width); margin: 0 auto; padding: 0 var(--vnx-space-8); height: 100%; gap: var(--vnx-space-8); } /* ── 左侧: LOGO ── */ .vnx-header__brand { display: flex; align-items: center; flex-shrink: 0; } /* ── 中央: 主导航 ── */ .vnx-header__nav { display: flex; align-items: center; flex: 1; justify-content: center; } /* ── 右侧: 操作区 ── */ .vnx-header__actions { display: flex; align-items: center; gap: var(--vnx-space-3); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════════════ §3. PRIMARY NAVIGATION — 主导航 ═══════════════════════════════════════════════════════════════════════════ */ .vnx-nav { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--vnx-space-1); } /* ── 3.1 导航项 ── */ .vnx-nav__item { position: relative; } .vnx-nav__link { display: flex; align-items: center; gap: var(--vnx-space-1); padding: var(--vnx-space-2) var(--vnx-space-4); border-radius: var(--vnx-radius-md); font-family: var(--vnx-font-family-heading); font-size: var(--vnx-text-sm); font-weight: var(--vnx-font-medium); color: var(--vnx-ocean-200); text-decoration: none; white-space: nowrap; transition: color var(--vnx-duration-fast) var(--vnx-ease-out), background var(--vnx-duration-fast) var(--vnx-ease-out); } .vnx-nav__link:hover { color: var(--vnx-white); background: rgba(255, 255, 255, 0.06); } /* 当前激活页 */ .vnx-nav__item--current .vnx-nav__link { color: var(--vnx-gold-400); background: rgba(212, 152, 10, 0.08); } /* ── 3.2 下拉指示箭头 ── */ .vnx-nav__arrow { display: inline-block; width: 14px; height: 14px; transition: transform var(--vnx-duration-fast) var(--vnx-ease-out); } .vnx-nav__arrow::after { content: ''; display: block; width: 6px; height: 6px; margin: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.6; } .vnx-nav__item:hover > .vnx-nav__link > .vnx-nav__arrow { transform: rotate(180deg); } /* ── 3.3 下拉菜单 ── */ .vnx-nav__submenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px); min-width: 200px; padding: var(--vnx-space-1) 0; margin: 0; list-style: none; background: var(--vnx-ocean-900); border: 1px solid var(--vnx-ocean-800); border-radius: var(--vnx-radius-lg); box-shadow: var(--vnx-shadow-xl); opacity: 0; visibility: hidden; transition: opacity var(--vnx-duration-fast) var(--vnx-ease-out), visibility var(--vnx-duration-fast) var(--vnx-ease-out), transform var(--vnx-duration-fast) var(--vnx-ease-out); z-index: 100; } /* 显示下拉 */ .vnx-nav__item:hover > .vnx-nav__submenu, .vnx-nav__submenu:hover { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* 下拉菜单项 */ .vnx-nav__submenu .vnx-nav__link { padding: var(--vnx-space-2) var(--vnx-space-6); border-radius: 0; font-size: 0.8125rem; color: var(--vnx-ocean-100); } .vnx-nav__submenu .vnx-nav__link:hover { background: rgba(255, 255, 255, 0.08); color: var(--vnx-white); } /* 下拉分隔线 */ .vnx-nav__divider { height: 1px; margin: var(--vnx-space-1) var(--vnx-space-4); background: var(--vnx-ocean-800); opacity: 0.6; } /* 下拉菜单高亮项 (CTA) */ .vnx-nav__submenu .vnx-nav__link--highlight { color: var(--vnx-gold-400); font-weight: var(--vnx-font-semibold); } /* ── 3.4 导航 Badge (新功能 / 计数) ── */ .vnx-nav__badge { display: inline-flex; align-items: center; justify-content: center; height: 16px; min-width: 16px; padding: 0 4px; border-radius: var(--vnx-radius-full); font-size: 10px; font-weight: var(--vnx-font-bold); line-height: 1; background: var(--vnx-gold-500); color: var(--vnx-ocean-950); } /* ═══════════════════════════════════════════════════════════════════════════ §4. HEADER ACTIONS — 操作区 ═══════════════════════════════════════════════════════════════════════════ */ /* ── 4.1 搜索按钮 ── */ .vnx-btn-search { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: var(--vnx-radius-full); background: transparent; color: var(--vnx-ocean-300); cursor: pointer; transition: color var(--vnx-duration-fast), background var(--vnx-duration-fast); } .vnx-btn-search:hover { color: var(--vnx-white); background: rgba(255, 255, 255, 0.08); } .vnx-btn-search svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; } /* ── 4.2 语言切换 ── */ .vnx-lang-switch { position: relative; } .vnx-lang-switch__btn { display: flex; align-items: center; gap: var(--vnx-space-1); padding: var(--vnx-space-1) var(--vnx-space-2); border: 1px solid var(--vnx-ocean-800); border-radius: var(--vnx-radius-md); background: transparent; color: var(--vnx-ocean-200); font-size: var(--vnx-text-xs); font-weight: var(--vnx-font-medium); letter-spacing: 0.02em; cursor: pointer; transition: border-color var(--vnx-duration-fast), color var(--vnx-duration-fast); } .vnx-lang-switch__btn:hover { border-color: var(--vnx-ocean-600); color: var(--vnx-white); } /* 地球图标 */ .vnx-lang-switch__globe { width: 14px; height: 14px; opacity: 0.7; } /* ── 4.3 登录按钮 (次要) ── */ .vnx-btn-login { padding: var(--vnx-space-2) var(--vnx-space-5); border: 1px solid var(--vnx-ocean-700); border-radius: var(--vnx-radius-lg); background: transparent; color: var(--vnx-ocean-200); font-family: var(--vnx-font-family-heading); font-size: var(--vnx-text-sm); font-weight: var(--vnx-font-medium); text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color var(--vnx-duration-fast), color var(--vnx-duration-fast), background var(--vnx-duration-fast); } .vnx-btn-login:hover { border-color: var(--vnx-ocean-400); color: var(--vnx-white); background: rgba(255, 255, 255, 0.04); } /* ── 4.4 注册按钮 (主要 CTA) ── */ .vnx-btn-register { padding: var(--vnx-space-2) var(--vnx-space-6); border: none; border-radius: var(--vnx-radius-lg); background: linear-gradient(135deg, var(--vnx-gold-500), var(--vnx-gold-400)); color: var(--vnx-ocean-950); font-family: var(--vnx-font-family-heading); font-size: var(--vnx-text-sm); font-weight: var(--vnx-font-semibold); text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 0 2px 8px rgba(212, 152, 10, 0.25); transition: background var(--vnx-duration-fast), box-shadow var(--vnx-duration-fast), transform var(--vnx-duration-fast); } .vnx-btn-register:hover { background: linear-gradient(135deg, var(--vnx-gold-400), var(--vnx-gold-300)); box-shadow: 0 4px 16px rgba(212, 152, 10, 0.4); transform: translateY(-1px); color: var(--vnx-ocean-950); } .vnx-btn-register:active { transform: translateY(0); } /* ── 4.5 已登录用户菜单 ── */ .vnx-user-menu { position: relative; } .vnx-user-menu__trigger { display: flex; align-items: center; gap: var(--vnx-space-2); padding: var(--vnx-space-1) var(--vnx-space-3) var(--vnx-space-1) var(--vnx-space-1); border: none; border-radius: var(--vnx-radius-full); background: rgba(255, 255, 255, 0.06); color: var(--vnx-white); cursor: pointer; transition: background var(--vnx-duration-fast); } .vnx-user-menu__trigger:hover { background: rgba(255, 255, 255, 0.12); } /* 用户头像 */ .vnx-avatar { width: 32px; height: 32px; border-radius: var(--vnx-radius-full); background: var(--vnx-ocean-600); display: flex; align-items: center; justify-content: center; font-size: var(--vnx-text-sm); font-weight: var(--vnx-font-semibold); color: var(--vnx-white); overflow: hidden; } .vnx-avatar img { width: 100%; height: 100%; object-fit: cover; } /* ═══════════════════════════════════════════════════════════════════════════ §5. MOBILE — 移动端适配 (< 1024px) ═══════════════════════════════════════════════════════════════════════════ */ /* ── 5.1 断点切换 ── */ @media (max-width: 1023px) { /* 隐藏 PC 版本 LOGO，显示仅图标版本 */ .vnx-logo--full { display: none !important; } .vnx-logo--icon { display: inline-flex !important; } /* 调整页眉高度 */ .vnx-header { height: var(--vnx-header-height-mobile); } .vnx-header__inner { padding: 0 var(--vnx-space-5); gap: var(--vnx-space-4); } /* ── 汉堡菜单按钮 ── */ .vnx-hamburger { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0; margin-left: auto; border: none; border-radius: var(--vnx-radius-md); background: transparent; cursor: pointer; z-index: 1001; order: 3; /* 推到右侧最末 */ transition: background var(--vnx-duration-fast); } .vnx-hamburger:hover { background: rgba(255, 255, 255, 0.06); } /* 汉堡线条 */ .vnx-hamburger__line { display: block; width: 22px; height: 1.8px; background: var(--vnx-ocean-200); border-radius: 1px; transform-origin: center; transition: transform var(--vnx-duration-slow) var(--vnx-ease-in-out), opacity var(--vnx-duration-fast); } /* 激活态 — 转为 X */ .vnx-hamburger--active .vnx-hamburger__line:nth-child(1) { transform: translateY(6.8px) rotate(45deg); } .vnx-hamburger--active .vnx-hamburger__line:nth-child(2) { opacity: 0; transform: scaleX(0); } .vnx-hamburger--active .vnx-hamburger__line:nth-child(3) { transform: translateY(-6.8px) rotate(-45deg); } /* ── 移动端导航面板 — 全屏覆盖 ── */ .vnx-header__nav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; display: flex; flex-direction: column; justify-content: flex-start; padding: calc(var(--vnx-header-height-mobile) + var(--vnx-space-6)) var(--vnx-space-6) var(--vnx-space-6); background: var(--vnx-surface-header); overflow-y: auto; -webkit-overflow-scrolling: touch; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--vnx-duration-slow) var(--vnx-ease-out), visibility var(--vnx-duration-slow), transform var(--vnx-duration-slow) var(--vnx-ease-out); } /* 导航面板打开 */ .vnx-header__nav--open { opacity: 1; visibility: visible; transform: translateY(0); } /* ── 移动端导航列表 — 竖向排列 ── */ .vnx-nav { flex-direction: column; align-items: stretch; gap: var(--vnx-space-1); width: 100%; } .vnx-nav__link { padding: var(--vnx-space-3) var(--vnx-space-4); font-size: 1rem; border-radius: var(--vnx-radius-md); justify-content: space-between; } /* 移动端下拉 — static 展示 (非悬浮式) */ .vnx-nav__submenu { position: static; transform: none; min-width: 0; padding: 0; margin: var(--vnx-space-1) 0 var(--vnx-space-1) var(--vnx-space-8); background: transparent; border: none; box-shadow: none; opacity: 1; visibility: visible; /* 默认折叠，通过 JS toggle */ max-height: 0; overflow: hidden; transition: max-height var(--vnx-duration-slow) var(--vnx-ease-out); } .vnx-nav__submenu--open { max-height: 600px; /* 足够容纳子菜单 */ } .vnx-nav__submenu .vnx-nav__link { padding: var(--vnx-space-2) var(--vnx-space-4); font-size: 0.9375rem; border-left: 2px solid var(--vnx-ocean-800); border-radius: 0 var(--vnx-radius-sm) var(--vnx-radius-sm) 0; } .vnx-nav__divider { display: none; /* 移动端不用分隔线，用缩进区分层级 */ } /* ── 移动端操作区 ── */ .vnx-header__actions { order: 2; margin-left: auto; gap: var(--vnx-space-2); } /* 移动端隐藏部分操作按钮 */ .vnx-lang-switch { display: none; } .vnx-btn-login { padding: var(--vnx-space-1) var(--vnx-space-3); font-size: var(--vnx-text-xs); } .vnx-btn-register { padding: var(--vnx-space-1) var(--vnx-space-4); font-size: var(--vnx-text-xs); } /* ── 移动端导航底部: 语言选择 ── */ .vnx-nav__mobile-lang { display: flex; gap: var(--vnx-space-3); margin-top: var(--vnx-space-6); padding-top: var(--vnx-space-6); border-top: 1px solid var(--vnx-ocean-800); } .vnx-nav__mobile-lang a { padding: var(--vnx-space-2) var(--vnx-space-4); border-radius: var(--vnx-radius-md); font-size: var(--vnx-text-sm); color: var(--vnx-ocean-300); text-decoration: none; transition: color var(--vnx-duration-fast), background var(--vnx-duration-fast); } .vnx-nav__mobile-lang a:hover, .vnx-nav__mobile-lang a--active { color: var(--vnx-white); background: rgba(255, 255, 255, 0.08); } } /* ── 5.2 平板微调 (768-1023px) ── */ @media (min-width: 768px) and (max-width: 1023px) { .vnx-header__inner { padding: 0 var(--vnx-space-8); } .vnx-header__nav { padding-left: var(--vnx-space-10); padding-right: var(--vnx-space-10); } .vnx-nav__link { font-size: var(--vnx-text-md); } } /* ── 5.3 小屏手机 (< 480px) ── */ @media (max-width: 479px) { .vnx-header__inner { padding: 0 var(--vnx-space-4); gap: var(--vnx-space-2); } /* 小屏隐藏次要 CTA */ .vnx-btn-search { display: none; } .vnx-btn-login { display: none; } .vnx-btn-register { font-size: 0.6875rem; padding: var(--vnx-space-1) var(--vnx-space-3); } .vnx-hamburger { width: 36px; height: 36px; } } /* ── 5.4 PC 端: 显示 PC 版，隐藏移动版元素 ── */ @media (min-width: 1024px) { .vnx-logo--icon { display: none !important; } .vnx-hamburger { display: none; } .vnx-nav__mobile-lang { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ §6. HEADER STATES — 状态变体 ═══════════════════════════════════════════════════════════════════════════ */ /* ── 6.1 Sticky — 滚动后固定 + 压缩 ── */ .vnx-header--sticky { position: fixed; top: 0; left: 0; right: 0; background: var(--vnx-surface-header-sticky); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.04); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); } .vnx-header--sticky .vnx-logo--full .vnx-logo__emblem { width: 44px; height: 44px; } .vnx-header--sticky .vnx-logo__cn { font-size: 1.375rem; } .vnx-header--sticky .vnx-logo__en { font-size: 0.6875rem; } @media (max-width: 1023px) { .vnx-header--sticky { height: 52px; } .vnx-header--sticky .vnx-logo--icon .vnx-logo__emblem { width: 34px; height: 34px; } } /* ── 6.2 Transparent — 首页顶部叠加在 Hero 上 ── */ .vnx-header--transparent { background: transparent; border-bottom: none; } .vnx-header--transparent .vnx-nav__link { color: rgba(255, 255, 255, 0.8); } .vnx-header--transparent .vnx-nav__link:hover { color: var(--vnx-white); background: rgba(255, 255, 255, 0.1); } /* Transparent → Sticky 切换由 JS 控制 (滚动超过 Hero 高度后 + sticky 类) */ /* ── 6.3 Dark — 深色页面内页 (默认即为 dark header，此变体为增强对比) ── */ .vnx-header--elevated { box-shadow: var(--vnx-shadow-lg); } /* ═══════════════════════════════════════════════════════════════════════════ §7. ANIMATIONS — 关键帧动画 ═══════════════════════════════════════════════════════════════════════════ */ /* ── 7.1 徽章微光呼吸 ── */ @keyframes vnx-glow-breathe { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 2px 12px rgba(0, 0, 0, 0.4); } 50% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22), 0 0 20px rgba(255, 255, 255, 0.05), 0 2px 12px rgba(0, 0, 0, 0.4); } } /* 仅首页透明态时启用呼吸 */ .vnx-header--transparent:not(.vnx-header--sticky) .vnx-logo__emblem { animation: vnx-glow-breathe 4s ease-in-out infinite; } /* ── 7.2 导航项下滑入场 ── */ @keyframes vnx-nav-item-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* 仅在移动端面板打开时逐项动画 */ .vnx-header__nav--open .vnx-nav__item { animation: vnx-nav-item-in var(--vnx-duration-normal) var(--vnx-ease-out) forwards; opacity: 0; } .vnx-header__nav--open .vnx-nav__item:nth-child(1) { animation-delay: 0.05s; } .vnx-header__nav--open .vnx-nav__item:nth-child(2) { animation-delay: 0.1s; } .vnx-header__nav--open .vnx-nav__item:nth-child(3) { animation-delay: 0.15s; } .vnx-header__nav--open .vnx-nav__item:nth-child(4) { animation-delay: 0.2s; } .vnx-header__nav--open .vnx-nav__item:nth-child(5) { animation-delay: 0.25s; } .vnx-header__nav--open .vnx-nav__item:nth-child(6) { animation-delay: 0.3s; } .vnx-header__nav--open .vnx-nav__item:nth-child(7) { animation-delay: 0.35s; } .vnx-header__nav--open .vnx-nav__item:nth-child(8) { animation-delay: 0.4s; } /* ═══════════════════════════════════════════════════════════════════════════ §8. HEADER PRINT STYLES ═══════════════════════════════════════════════════════════════════════════ */ @media print { .vnx-header { position: static; background: none; border-bottom: 1px solid #000; } .vnx-header__nav, .vnx-header__actions, .vnx-hamburger, .vnx-logo__badge { display: none !important; } .vnx-logo__cn { color: #000; } .vnx-logo__en { color: #333; } } /* ═══════════════════════════════════════════════════════════════════════════ §9. REDUCED MOTION — 无障碍 ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .vnx-logo--full, .vnx-logo__mark, .vnx-nav__link, .vnx-nav__submenu, .vnx-header__nav, .vnx-btn-register, .vnx-hamburger__line { transition: none !important; } .vnx-logo__mark *, .vnx-nav__item { animation: none !important; } }