/* ============================================================ 跨境引擎 · 暗黑电影感 + 极光 + 液态玻璃升级 AUR-20261101 ------------------------------------------------------------ 叠加在 design.css 之上（不替代、不删原规则、不改文案与板块）。 四件事： A1 极光环境光：body 固定层，绿/青/紫流动渐变，GPU 友好 A2 电影感英雄区：暗色极光底 + 暗角 + 景深 + 大字号 + 光晕 A3 液态玻璃升级：导航 / 看板 / 英雄表单 / 暗区卡 加强模糊与边缘光 A4 暗黑科技基调：等宽遥测标签、辉光描边、计数指标发光 约束： - 纯 CSS，无 JS 依赖；无新增图片请求 - prefers-reduced-motion：关闭流动与扫光 - 浅色内容区保持可读（不反色文字），只在暗区/英雄区走暗色 - 幂等、可回退（删掉本文件链接即还原） ============================================================ */ :root { --au-green: #2af598; --au-cyan: #18b6ff; --au-violet: #8a6bff; --au-magenta: #ff5cc8; --au-ink: #05070e; --au-ink-2: #0a0f1d; --au-text: #e9eefb; --au-text-dim: rgba(233, 238, 251, .72); --au-glow: 0 0 24px rgba(24, 182, 255, .25), 0 0 60px rgba(138, 107, 255, .18); } /* ============================================================ A1 极光环境光（固定背景层） ============================================================ */ body { background: radial-gradient(120% 80% at 50% -10%, #0b1430 0%, var(--au-ink) 55%) fixed, var(--au-ink); } body::before { content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none; background: radial-gradient(50% 44% at 22% 18%, rgba(42, 245, 152, .26), transparent 74%), radial-gradient(54% 48% at 78% 22%, rgba(24, 182, 255, .24), transparent 76%), radial-gradient(62% 56% at 60% 78%, rgba(138, 107, 255, .22), transparent 78%), radial-gradient(42% 38% at 14% 82%, rgba(255, 92, 200, .16), transparent 74%); /* PERF: 移除整屏 blur(70px)，加宽径向渐变停点等效柔化，削 4xCPU 节流合成开销 */ opacity: .85; animation: auDrift 26s ease-in-out infinite alternate; transform: translateZ(0); will-change: transform; /*PERF_WC*/ } /* 英雄区之上叠多层暗化：左侧(标题区)强压 + 上下压暗 + 四周电影暗角， 保证港口大图上的白字在任何位置都清晰（位于背景之上、内容之下） */ .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(90deg, rgba(3, 7, 16, .82) 0%, rgba(3, 7, 16, .42) 46%, rgba(3, 7, 16, .12) 100%), linear-gradient(180deg, rgba(3, 7, 16, .72) 0%, rgba(3, 7, 16, .20) 48%, rgba(3, 7, 16, .88) 100%), radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(2, 4, 10, .72) 100%); } @keyframes auDrift { 0% { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1.05); } 50% { transform: translate3d(4%, 3%, 0) rotate(8deg) scale(1.12); } 100% { transform: translate3d(-2%, 4%, 0) rotate(-6deg) scale(1.08); } } /* ============================================================ A2 电影感英雄区 ============================================================ */ .hero { position: relative; overflow: hidden; color: var(--au-text); isolation: isolate; background: radial-gradient(72% 90% at 18% -5%, rgba(24, 182, 255, .20), transparent 60%), radial-gradient(60% 80% at 86% 8%, rgba(138, 107, 255, .22), transparent 62%), radial-gradient(80% 100% at 50% 115%, rgba(42, 245, 152, .14), transparent 60%), linear-gradient(180deg, #060b1a 0%, #04060f 100%); } /* ============================================================ A16 英雄区港口大图 · 电影质感动效（取消隐藏 + Ken Burns） 原暗黑极光主题曾用 display:none 隐藏暖色照片；现恢复为 铺满衬底。关键：基态即 opacity:.62 可见，绝不在基态写 0， 避免动画被禁用/未推进时整图永久透明。动效仅做缓慢推拉(Ken Burns) + 安全淡入(不低于 .30)，保证任何情况下都显示。 ============================================================ */ .hero-bg { display: block !important; opacity: .62; /* 基态可见，兜底 */ transform: scale(1.12); transform-origin: 56% 44%; will-change: transform, opacity; animation: heroFade 1.8s ease-out, heroKenBurns 30s ease-in-out 1.8s infinite alternate; } @keyframes heroFade { from { opacity: .30; } to { opacity: .62; } } @keyframes heroKenBurns { 0% { transform: scale(1.10) translate3d(0, 0, 0); } 50% { transform: scale(1.20) translate3d(-1.6%, -1.1%, 0); } 100% { transform: scale(1.16) translate3d(1.3%, 1.2%, 0); } } .hero-inner { position: relative; z-index: 2; } .hero h1 { color: #fff; letter-spacing: -.02em; text-shadow: 0 2px 30px rgba(0, 0, 0, .55), 0 0 60px rgba(24, 182, 255, .20); } .hero .hero-sub, .hero p { color: var(--au-text-dim); text-shadow: 0 1px 18px rgba(0, 0, 0, .5); } /* ============================================================ A3 液态玻璃升级 ============================================================ */ /* 导航：玻璃加深 + 更强边缘光 */ .nav { background: linear-gradient(180deg, rgba(8, 14, 28, .72), rgba(8, 14, 28, .42)) !important; -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 10px 30px -20px rgba(0, 0, 0, .9); } /* 实时看板外框：更厚的玻璃与辉光 */ .board { background: linear-gradient(180deg, rgba(12, 19, 36, .72), rgba(8, 12, 24, .62)) !important; -webkit-backdrop-filter: blur(8px) saturate(160%); backdrop-filter: blur(8px) saturate(160%); border-color: rgba(255, 255, 255, .12) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 8px rgba(0, 0, 0, .4), 0 40px 90px -40px rgba(0, 0, 0, .9), var(--au-glow) !important; } /* 英雄表单：更亮的液态玻璃药丸 */ .hero .capture-form { background: rgba(255, 255, 255, .12) !important; border: 1px solid rgba(255, 255, 255, .26) !important; -webkit-backdrop-filter: blur(12px) saturate(200%); backdrop-filter: blur(12px) saturate(200%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 6px rgba(0, 0, 0, .3), 0 26px 60px -22px rgba(0, 0, 0, .9), var(--au-glow) !important; } .hero .capture-form input { background: rgba(255, 255, 255, .10); color: #fff; border: 1px solid rgba(255, 255, 255, .14); } .hero .capture-form input::placeholder { color: rgba(255, 255, 255, .6); } /* 暗区卡（kf）与统计卡：强化玻璃与边缘光 */ .sec-dark .kf, .stat { background: radial-gradient(120% 140% at 50% -20%, rgba(255, 255, 255, .14), transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)) !important; -webkit-backdrop-filter: blur(8px) saturate(160%) !important; backdrop-filter: blur(8px) saturate(160%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 18px 40px -22px rgba(0, 0, 0, .9), var(--au-glow) !important; } /* ============================================================ A4 暗黑科技基调 ============================================================ */ /* 统计数字：等宽 + 辉光，像仪表盘遥测 */ .stat .num, .stat strong, .kf .num { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 18px rgba(24, 182, 255, .45); } /* 眉标（eyebrow）：科技感胶囊，带极光描边 */ .eyebrow { letter-spacing: .14em; text-transform: uppercase; font-size: 11px; border: 1px solid rgba(42, 245, 152, .35) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 18px rgba(42, 245, 152, .25) !important; color: #d7fff0 !important; } /* 品牌主按钮：加极光辉光 */ .btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .55), 0 1px 2px rgba(5, 26, 36, .20), 0 8px 24px -10px rgba(5, 26, 36, .6), 0 0 22px rgba(24, 182, 255, .30) !important; } /* ============================================================ A5 响应式 / 降级 ============================================================ */ @media (max-width: 900px) { body::before { opacity: .7; } .hero-bg { background-attachment: scroll; } } @media (prefers-reduced-motion: reduce) { body::before, .hero::after, .sec-dark::before, .hero-inner::after { animation: none !important; } } @media (hover: none) { body::before { animation: none; } } /* ============================================================ A6 字迹清晰 · 暗黑科技对比度（用户要求） ------------------------------------------------------------ 暗区（导航 / 子导航 / 英雄 / 暗段）文字提亮到高对比； 浅色内容区保持深色文字（不变）。 ============================================================ */ /* 顶部导航文字 */ .nav-menu a, .nav-right a, .nav-lang, .nav-link { color: rgba(237, 242, 251, .94) !important; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); } .nav-menu a:hover, .nav-right a:hover, .nav-lang:hover, .nav-link:hover { color: #fff !important; } /* logo：纯白 + 落影，品牌字更亮 */ .logo { color: #fff !important; text-shadow: 0 1px 12px rgba(0, 0, 0, .55); } .logo .logo-mark { box-shadow: 0 0 18px rgba(24, 182, 255, .55); } /* 区块跳转子导航：白底 → 暗色玻璃 + 亮字 */ .enh-sub { background: linear-gradient(180deg, rgba(8, 14, 28, .86), rgba(8, 14, 28, .58)) !important; -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); border-bottom: 1px solid rgba(255, 255, 255, .08) !important; box-shadow: 0 10px 26px -18px rgba(0, 0, 0, .9); } .enh-sub-in a { color: rgba(237, 242, 251, .88) !important; } .enh-sub-in a:hover, .enh-sub-in a.is-active { color: #fff !important; } .enh-sub-in a.is-active { box-shadow: inset 0 -2px 0 rgba(24, 182, 255, .85); } /* 极光再提一档，让电影感更明确 */ .hero { background: radial-gradient(72% 90% at 18% -5%, rgba(24, 182, 255, .26), transparent 60%), radial-gradient(60% 80% at 86% 8%, rgba(138, 107, 255, .28), transparent 62%), radial-gradient(82% 100% at 50% 118%, rgba(42, 245, 152, .20), transparent 60%), linear-gradient(180deg, #060b1a 0%, #04060f 100%); } /* ============================================================ A7 字迹清晰 · 实时看板与英雄区（用户要求） ============================================================ */ /* 实时看板：浅色玻璃 → 暗色玻璃，文字提亮到高对比 */ .board-head { background: linear-gradient(180deg, rgba(12, 19, 36, .82), rgba(8, 12, 24, .62)) !important; color: #fff !important; border-bottom: 1px solid rgba(255, 255, 255, .08) !important; } .board { color: rgba(237, 242, 251, .92) !important; } table.lb thead th { background: rgba(8, 12, 24, .55) !important; color: #dbe4f7 !important; border-bottom-color: rgba(255, 255, 255, .14) !important; } table.lb tbody td { color: rgba(237, 242, 251, .94) !important; } table.lb tbody a, .board a { color: #7fd4ff !important; } /* 英雄区副文案 / 占位符提亮 */ .hero .hero-sub, .hero p { color: rgba(237, 242, 251, .88) !important; } .hero .capture-form input::placeholder { color: rgba(255, 255, 255, .78) !important; } /* 子导航链接更亮 */ .enh-sub-in a { color: #fff !important; } /* 悬浮 CTA 按钮清晰可见 */ .enh-fab { background: rgba(8, 14, 28, .9) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .15) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* ============================================================ A8 字迹清晰 · 暗区段落与小标题（用户要求） ------------------------------------------------------------ 仅针对暗区（.sec-dark）与底部暗页脚，不影响浅色内容区。 ============================================================ */ /* 暗区小标签 / 强调副标题：从 #7fabff 提亮到高对比蓝白 */ .sec-dark .kicker, .sec-dark .h2-em { color: #a9d4ff !important; } /* 暗区引导段落：从 #a9bad6 提亮 */ .sec-dark .lede { color: #cdd9ef !important; } /* 底部暗页脚文字：从 #8fa2c2 提亮 */ .foot { color: #c8d6ee !important; } .foot a { color: #9fd0ff !important; } /* ============================================================ A9 字迹清晰 · 品牌标识与表单占位（用户要求） ============================================================ */ /* 顶部 logo 文字强制纯白高对比（含内部 span/b） */ .logo, .logo * { color: #fff !important; text-shadow: 0 1px 12px rgba(0, 0, 0, .55); } /* 英雄表单占位符再提亮 */ .hero .capture-form input::placeholder { color: rgba(255, 255, 255, .9) !important; } /* ============================================================ A10 字迹清晰 · 看板元信息与表尾（用户要求） ------------------------------------------------------------ .board-meta / .board-foot 原用深色墨字，落在暗色玻璃上看不清。 ============================================================ */ .board-meta, .board-meta b { color: rgba(237, 242, 251, .9) !important; } .board-meta b { color: #fff !important; } .board-foot { background: rgba(8, 12, 24, .55) !important; color: rgba(237, 242, 251, .82) !important; border-top-color: rgba(255, 255, 255, .12) !important; } .board-foot b { color: #fff !important; } /* ============================================================ A11 字迹清晰 · 统计卡说明文字（用户要求） ============================================================ */ .stat .l { color: rgba(237, 242, 251, .88) !important; } /* ============================================================ A12 字迹清晰 · 透明暗底区块的标题/导语/小标签（用户要求） ------------------------------------------------------------ 普通 .sec 透出深色 body 背景，但默认墨字 → 暗底暗字看不见。 排除 .sec-soft（浅色区块）。 ============================================================ */ .sec:not(.sec-soft) .sec-head h2, .sec:not(.sec-soft) .sec-head .title { color: #fff !important; } .sec:not(.sec-soft) .sec-head .lede, .sec:not(.sec-soft) .lede { color: #cdd9ef !important; } .sec:not(.sec-soft) .kicker, .sec:not(.sec-soft) .h2-em { color: #a9d4ff !important; } /* ============================================================ A13 字迹清晰 · 矩阵说明段落（用户要求） ============================================================ */ .matrix-note { color: rgba(237, 242, 251, .85) !important; } .matrix-note b { color: #fff !important; } /* ============================================================ A14 （已撤销）3D 地图面板 ------------------------------------------------------------ 实测：.pm-card{background:#fff}，.pm-canvas-wrap 为浅色径向渐变， 面板本身是浅色内容区；.pm-* 标签默认用 var(--ink*) 墨字已清晰可读。 此前强加浅色字（#e9eefb）导致浅底浅字看不见 → 撤销，保留默认墨字。 （双向卡 .tw 同理为白卡，正文墨字正确，从未改动。） ============================================================ */ /* ============================================================ A15 字迹清晰 · 英雄表单下方信任行（capture-hint） ------------------------------------------------------------ 原用偏暗灰，落在暗英雄区最不清晰。提亮到高对比浅色。 ============================================================ */ .capture-hint { color: rgba(237, 242, 251, .82) !important; } .capture-hint .tick { color: #7fd4ff !important; } /* ============================================================ A18 字迹清晰 · FAQ 问答 / 矩阵✔清单 / 地图脚注（用户要求） ------------------------------------------------------------ .faq-item summary(问题) 用 var(--ink) 暗墨字 → 暗底暗字看不见； .faq-item p(回答) 用 var(--ink-2) 偏暗；summary:after(+) 用 var(--ink-3) 极暗。 .os-item(矩阵底部✔清单) 文字 var(--ink-2)/内部 var(--ink) → 暗底暗字。 .pm-note(地图脚注"光点位置…") 用 var(--ink-3) 最暗墨字 → 几乎看不见。 全部提亮到高对比浅色（浅色内容区/白卡文字不动）。 ============================================================ */ .faq-item summary { color: #fff !important; } .faq-item summary:after { color: #9fd0ff !important; } .faq-item p, .faq-a { color: #cdd9ef !important; } .os-item { color: #cdd9ef !important; } .os-item b { color: #fff !important; } .os-item .b { color: var(--live) !important; } .matrix p { color: #cdd9ef !important; } .pm-note { color: rgba(237, 242, 251, .82) !important; text-align: center; } /* ============================================================ A19 能力矩阵 36 按钮（.mod）：白卡浮在暗色电影页既刺眼又显灰， 改为暗玻璃底 + 亮字，风格统一且高对比清晰（用户反馈"看不清"）。 浅色内容区不涉及；此改动可删规则即回退。 ============================================================ */ .mod { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .14) !important; color: #e6edfb !important; } .mod:hover, a.mod:focus-visible { background: rgba(255, 255, 255, .11) !important; color: #fff !important; border-color: rgba(99, 160, 255, .45) !important; } .mod.hot { background: rgba(59, 130, 246, .20) !important; color: #cfe0ff !important; border-color: rgba(99, 160, 255, .45) !important; } .mod.hot:hover, a.mod.hot:focus-visible { background: rgba(59, 130, 246, .34) !important; color: #fff !important; } /* 联系方式 · 美国号码（电话 / WhatsApp）——2026-11-02 */ .sb-right a[href^="tel:"]{padding:3px 10px;border-radius:var(--dx-pill,999px);background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:background-color .2s ease} .sb-right a[href^="tel:"]:hover{background:rgba(255,255,255,.14)} .contact-card .tel{margin-top:8px;font-size:16px;font-weight:700;color:#9dc0ff;display:block;letter-spacing:-.01em;text-decoration:none;word-break:break-all} .contact-card .tel:hover{color:#fff} .foot a[href^="tel:"]{white-space:nowrap} /* SITESWITCH_20261102 海外站 / 中文站 手动互切（不做任何自动跳转） */ .sb-right a.sb-switch{ padding:3px 10px;border-radius:999px; background:rgba(86,138,255,.18); border:1px solid rgba(126,176,255,.5); color:#d5e4ff;font-weight:600; transition:background-color .2s ease,border-color .2s ease; } .sb-right a.sb-switch:hover{background:rgba(86,138,255,.32);border-color:rgba(160,200,255,.75)} @media (max-width:960px){.sb-right a.sb-switch{display:none}} .nav-lang-menu a.nav-lang-site{ margin-top:6px;border-top:1px solid rgba(255,255,255,.16); color:#cfe0ff;font-weight:600; } .nav-lang-menu a.nav-lang-site:hover{background:rgba(86,138,255,.22)} /* MENUCONTRAST_20261102 语言下拉看不清修复： 原因 = 暗色主题的 `.nav-right a{color:近白 !important}` 撞上浅色面板 `background:#fff` → 白底白字，实测对比度仅 1.12。这里把面板改暗、文字提亮。 */ .nav .nav-right .nav-lang-menu{ background:#0a1020 !important; border:1px solid rgba(126,160,225,.32) !important; box-shadow:0 20px 50px rgba(0,0,0,.55) !important; border-radius:12px !important; backdrop-filter:none !important; z-index:200 !important; } /* 下拉必须压过下方数据表：nav 原 z-index:60，board-sec:10， 但半透明玻璃层叠加后表格文字会透出，故整体抬高。 */ .nav{ z-index:120 } .nav .nav-right .nav-lang-menu .nav-lang-item{ color:#e9f0ff !important; text-shadow:none !important; border-radius:8px; } .nav .nav-right .nav-lang-menu .nav-lang-item:hover{ background:rgba(86,138,255,.28) !important; color:#ffffff !important; } .nav .nav-right .nav-lang-menu .nav-lang-item[aria-current="true"]{ background:rgba(86,138,255,.22) !important; color:#ffffff !important; font-weight:600; } .nav .nav-right .nav-lang-menu a.nav-lang-site{ margin-top:8px; border-top:1px solid rgba(255,255,255,.18); color:#cfe0ff !important; font-weight:600; } .nav .nav-right .nav-lang-menu a.nav-lang-site:hover{ background:rgba(86,138,255,.3) !important; color:#ffffff !important; } /* NAVFIT_20261102 问题：互切入口原先只在顶部状态栏，页面一滚动（sticky nav 贴顶）就整条消失， 用户看不到按钮；窄屏下状态栏右侧 pill 又被挤出可视区只剩一条边。 处理：① 互切常驻进 sticky 导航（滚到哪都在）； ② 窄屏精简状态栏与导航，不再挤压换行。*/ .nav-right a.switch-site{ display:inline-flex;align-items:center; padding:5px 12px;border-radius:999px; border:1px solid rgba(126,176,255,.55); background:rgba(86,138,255,.16); color:#dbe8ff !important;font-weight:600;font-size:13px; white-space:nowrap;text-decoration:none;line-height:1.2; transition:background-color .18s ease,border-color .18s ease,color .18s ease; } .nav-right a.switch-site:hover, .nav-right a.switch-site:focus-visible{ background:rgba(86,138,255,.34); border-color:rgba(160,200,255,.85); color:#fff !important; } @media (max-width:960px){ /* 状态栏：只留 LIVE 与本机必要信息，右侧不再溢出被裁 */ .statusbar .wrap-wide{height:auto;min-height:34px;gap:10px;padding:5px 0} .statusbar .sb-left{min-width:0;overflow:hidden} .statusbar .sb-left > span:last-child{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw; } .statusbar .sb-right{gap:10px;min-width:0} .statusbar .sb-right a[href^="mailto:"]{display:none} /* 互切已常驻导航，状态栏这颗在窄屏收起，避免重复占位 */ .statusbar .sb-right a.sb-switch{display:none} } @media (max-width:760px){ .nav .wrap-wide{height:auto;min-height:58px;gap:6px;flex-wrap:nowrap} .nav .logo{flex:0 0 auto;min-width:0} .nav .logo > span:last-child{ white-space:nowrap;font-size:12.5px;letter-spacing:-.01em; } .nav .nav-menu{display:none} .nav .nav-right{flex:0 0 auto;gap:6px;margin-left:auto} /* 登录与开始按钮重复，窄屏只留一个明确的行动按钮 */ .nav .nav-right > a.nav-link:not(.switch-site){display:none} .nav .nav-right .btn-sm{padding:0 11px;height:32px;line-height:32px;font-size:12.5px} .nav .nav-right .nav-lang{font-size:12.5px;padding:0 2px} .nav .nav-right a.switch-site{padding:5px 9px;font-size:12px} } /* NAVFIT3_START */ /* 顶部层级与吸顶条落点（幂等块，勿手改，改 nav_fix3.py） 状态栏 z-index 60 > 跳转条 55 > 内容，状态栏文字不再被玻璃层糊住。 跳转条落点 69px = 吸顶后的导航高度；隐藏态 translateY(-100%) 整条退到导航背后， .enh-on 归位。注意 fixed 的 transform 叠加在 top 上：原来 -104%（只够退 48px 的一半） 会与导航重叠，这里必须是 -100% 且 top 用归位后的值。*/ .statusbar { position: relative; z-index: 60; } .enh-sub { top: 69px !important; transform: translateY(-100%); background: linear-gradient(rgb(10,18,32) 0%, rgb(6,12,22) 100%) !important; border-bottom-color: rgba(255,255,255,.08) !important; } .enh-sub.enh-on { transform: none !important; } /* NAVFIT3_END */ /* NAVFIT4_20261102 登录态 + 互切入口只留一个 */ .nav-right a.nav-user, .statusbar .sb-right a.nav-user{ display:inline-flex;align-items:center;gap:6px; max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; color:#dbe8ff !important;font-weight:600;text-decoration:none; } .nav-right a.nav-user::before{ content:"";width:6px;height:6px;border-radius:50%; background:#2ee6a8;box-shadow:0 0 8px rgba(46,230,168,.75);flex:none; } .nav-right a.nav-logout{ font-size:12px;color:rgba(219,232,255,.62) !important;text-decoration:none; padding:0 2px;white-space:nowrap; } .nav-right a.nav-logout:hover{color:#fff !important} @media (max-width:760px){ .nav .nav-right a.nav-user{max-width:74px;font-size:12.5px} .nav .nav-right a.nav-logout{display:none} } /* NAVFIT5_20261102 已登录 + 小屏（≤760）不再横向溢出 实测 390px 宽、已登录时 nav 总宽超视口 78px，Start free 被顶到屏幕外。 已登录用户不需要「免费开始」，隐藏它并把用户名与品牌名收窄。*/ @media (max-width: 760px) { .nav.is-auth .nav-right .btn-primary { display: none !important; } .nav.is-auth .nav-right a.nav-user { max-width: 60px !important; } .nav.is-auth .logo > span:last-child { max-width: 118px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* MOBILELOGIN_20261102 —— 小屏导航紧凑化，保留登录与站点切换 */ @media (max-width:760px){ .nav .logo > span:not(.logo-mark){ display:none !important; } html[lang="zh-CN"] .nav .logo > span:not(.logo-mark), html[lang="zh"] .nav .logo > span:not(.logo-mark){ display:inline !important; } .nav .nav-right{ gap:7px !important; } .nav .nav-right a.nav-link[href="/login"]{ display:inline-flex !important; align-items:center; white-space:nowrap; font-size:13px !important; padding:0 3px !important; opacity:1 !important; } .nav .nav-right a.switch-site{ padding:5px 10px !important; font-size:12.5px !important; } .nav .nav-right .nav-lang-wrap{ padding:0 2px !important; font-size:13px !important; } .nav .nav-right a.btn-primary{ font-size:12.5px !important; padding:7px 10px !important; line-height:1.15 !important; letter-spacing:0 !important; min-width:0 !important; white-space:nowrap !important; } } /* GLASS_START 20261102 导航玻璃质感：更绵密模糊 + 顶部受光 + 底部渐变边缘光 */ header.nav{ background-image: linear-gradient(180deg, rgba(8,14,28,.86) 0%, rgba(8,14,28,.72) 100%) !important; -webkit-backdrop-filter: blur(26px) saturate(2.05) brightness(1.04) !important; backdrop-filter: blur(26px) saturate(2.05) brightness(1.04) !important; border-bottom-color: rgba(255,255,255,.05) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(255,255,255,.05), 0 16px 40px -30px rgba(0,0,0,.95) !important; isolation: isolate; } header.nav > .wrap-wide{ position: relative; z-index: 2; } header.nav::after{ content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(180deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.022) 30%, rgba(255,255,255,0) 58%), linear-gradient(90deg, rgba(120,190,255,0) 0%, rgba(120,190,255,.34) 24%, rgba(170,132,255,.30) 60%, rgba(120,190,255,0) 100%); background-size: 100% 100%, 100% 1px; background-position: 0 0, 0 100%; background-repeat: no-repeat; } @media (max-width:760px){ header.nav{ -webkit-backdrop-filter: blur(18px) saturate(1.9) !important; backdrop-filter: blur(18px) saturate(1.9) !important; } } /* GLASS_END */ /* LBNOLINK_START 20261102 看板去死链：外链禁止点击 + 纯文本样式 */ #live table.lb a[href^="http"]{ pointer-events: none !important; cursor: default !important; text-decoration: none !important; } #live table.lb .lb-title .lb-tt{ color: inherit; font-weight: 600; text-decoration: none; } #live table.lb .lb-title a.lb-tt:hover{ text-decoration: none !important; } .rec-list a[href^="http"]{ pointer-events: none !important; cursor: default !important; } #live table.lb a.lb-seen, #live table.lb td.lb-seen{ color: var(--muted, #8aa0bd); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12.5px; } /* LBNOLINK_END */ /* LOGOCINE_START 20261102 */ /* ---- 1. logo：图标回到上一版尺寸 + 品牌字流光 ---- */ @keyframes lcShimmer { 0%{background-position:0% 50%} 100%{background-position:260% 50%} } @keyframes lcGrain { 0% { transform: translate3d(0,0,0) } 25% { transform: translate3d(-2%,1.5%,0) } 50% { transform: translate3d(1.5%,-2%,0) } 75% { transform: translate3d(-1.5%,-1.5%,0) } 100% { transform: translate3d(0,0,0) } } @keyframes lcFlipIn { 0%{transform:rotateY(0deg)} 100%{transform:rotateY(360deg)} } @keyframes lcFlip { 0%{transform:rotateY(0deg)} 100%{transform:rotateY(360deg)} } .nav .logo{ gap:10px; align-items:center; perspective:520px; } /* 几何标记：集装箱货轮（货=箱 / 出海=船），顶面亮·正面中·侧面临 + 船底暗边做出体积，悬停与首屏各 3D 翻牌一次 */ .nav .logo .logo-mark{ --mk-size:19px; --mk-img:url("data:image/svg+xml;utf8,"); width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:linear-gradient(155deg,#3fceff 0%,#1b8ef0 32%,#5b46e0 68%,#7c3aed 100%); box-shadow: 0 0 20px rgba(24,182,255,.50), 0 4px 10px -2px rgba(4,10,30,.55), inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -3px 7px -1px rgba(10,4,50,.58), inset 0 0 0 1px rgba(255,255,255,.16); position:relative; transform-style:preserve-3d; color:transparent !important; transition: box-shadow .32s ease; animation: lcFlipIn .62s cubic-bezier(.5,0,.2,1) .28s 1 both; } .nav .logo .logo-mark::before, .nav .logo .logo-mark::after{ content:""; position:absolute; inset:0; background-image:var(--mk-img); background-repeat:no-repeat; background-position:center; background-size:var(--mk-size) var(--mk-size); backface-visibility:hidden; -webkit-backface-visibility:hidden; } .nav .logo .logo-mark::after{ transform:rotateY(180deg); } .nav .logo:hover .logo-mark{ animation: lcFlip .5s cubic-bezier(.5,0,.2,1) 1 both; box-shadow: 0 0 28px rgba(24,182,255,.85), 0 5px 14px -2px rgba(4,10,30,.6), inset 0 1.5px 0 rgba(255,255,255,.68), inset 0 -3px 7px -1px rgba(10,4,50,.55), inset 0 0 0 1px rgba(255,255,255,.22); } .nav .logo > span:not(.logo-mark){ font-size:18px; font-weight:800; letter-spacing:-.2px; line-height:1; background:linear-gradient(100deg,#ffffff 0%,#d7e6ff 16%,#b9a7ff 38%,#8ef0ff 56%,#ffffff 78%,#ffffff 100%); background-size:260% 100%; -webkit-background-clip:text; background-clip:text; color:transparent !important; animation: lcShimmer 11s linear infinite; } .nav .logo > span:not(.logo-mark) span{ color:transparent !important; } /* ---- 2. 导航菜单：加大 + 悬停辉光 + 下划线生长 ---- */ .nav .nav-menu{ gap:24px; } .nav .nav-menu a{ font-size:16px !important; font-weight:500; color:#dbe6f5; padding:8px 2px; line-height:1.2; background:linear-gradient(90deg,#568aff,#a78bfa,#22d3ee) no-repeat 0 100% / 0 2px; transition: background-size .26s cubic-bezier(.4,0,.2,1), color .18s ease, text-shadow .18s ease; } .nav .nav-menu a:hover{ color:#fff; background-size:100% 2px; text-shadow:0 0 16px rgba(130,170,255,.7); } /* ---- 3. 右侧：站点切换按钮与相邻文字同字号，不再抢眼 ---- */ .nav .nav-right a.switch-site{ font-size:14px !important; font-weight:500 !important; padding:5px 11px !important; border-radius:999px; border-color:rgba(126,176,255,.38) !important; background:rgba(86,138,255,.10) !important; animation:none !important; } .nav .nav-right{ font-size:15px; } .nav .nav-right .nav-lang-wrap{ font-size:15px; } /* ---- 4. 顶部状态栏：字号提一档 ---- */ .statusbar{ font-size:13.5px; } /* ---- 5. 电影感：暗角 + 胶片颗粒 + 标题景深（仅桌面） ---- */ @media (min-width:761px){ html::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:1; background: radial-gradient(128% 96% at 50% 42%, rgba(0,0,0,0) 56%, rgba(3,6,14,.52) 100%), linear-gradient(180deg, rgba(3,6,14,.18) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 78%, rgba(3,6,14,.28) 100%); } body::after{ content:""; position:fixed; inset:-15%; pointer-events:none; z-index:2; background-image:url("data:image/svg+xml;utf8,"); background-repeat:repeat; opacity:.075; animation: lcGrain 1.1s steps(4) infinite; will-change: transform; } .hero h1{ text-shadow:0 4px 34px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4); } .hero .sub, .hero p{ text-shadow:0 1px 14px rgba(0,0,0,.5); } } /* ---- 6. 小屏：图标同上一版比例，去掉颗粒与暗角保性能 ---- */ @media (max-width:760px){ .nav .logo{ gap:8px; } .nav .logo .logo-mark{ --mk-size:16px; width:25px; height:25px; border-radius:7px; } .nav .logo > span:not(.logo-mark){ font-size:17px; } .nav .nav-right a.switch-site{ font-size:12.5px !important; padding:5px 10px !important; } body::after, html::after{ display:none; } } /* ---- 7. 尊重系统的减少动态偏好 ---- */ @media (prefers-reduced-motion: reduce){ .nav .logo .logo-mark, .nav .logo > span:not(.logo-mark), .nav .nav-right a.switch-site, body::after{ animation:none !important; } } /* LOGOCINE_END */ /* NAV_NOWRAP_20261104 导航文本一律不折行。 实测 1440 宽下 .nav-menu a 被压到 67px，"Operating system" 折成 3 行、logo 折 2 行， header 整体像挤坏的。这里统一 nowrap，并让菜单项不参与 flex 压缩。 */ .nav .logo, .nav .logo > span, .nav .logo > span > span, .nav .nav-menu, .nav .nav-menu a, .nav .nav-right, .nav .nav-right > a, .nav .nav-link, .nav .switch-site, .nav .btn, .statusbar .sb-left, .statusbar .sb-right { white-space: nowrap; } .nav .wrap-wide { gap: 22px; } .nav .nav-menu { min-width: 0; gap: 22px; } .nav .nav-menu a { flex: 0 0 auto; } .nav .nav-right { flex: 0 0 auto; gap: 12px; } @media (max-width: 1200px) { .nav .nav-menu { gap: 15px; } .nav .nav-menu a { font-size: 15px; } .nav .nav-right { gap: 9px; } } @media (max-width: 1024px) { .nav .nav-menu { display: none; } } /* NAV_NOWRAP_END */ /* MOBILE_UX_20261104 移动端可用性两项 ------------------------------------------------- */ @media (max-width: 1024px) { .nav .nav-right > a, .nav .nav-right .nav-lang-wrap > button, .nav .btn { min-height: 44px; display: inline-flex; align-items: center; padding-left: 10px; padding-right: 10px; } } @media (max-width: 720px) { .board-scroll { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent 100%); } } /* MOBILE_UX_20261104_END */