/* ========================================================================== UU · Design System v4 — 深空 / 宇宙科技（双主题） 参考语言：企业级招聘门户（首屏大图 + 大标题 + 单色蓝强调 + 图像卡片） 主题怎么切： · 默认 = 暗色（深空 · 地球 · 流星），写在下面 `:root` 里 · 亮色 = 写在 `[data-theme="light"]` 里，覆盖同名变量 · 由 base.html 里的一段内联脚本在**首帧之前**把 data-theme 写到 上， 所以不会出现"先闪一下暗色再变亮"（这是主题切换最容易翻车的地方） ⚠️ 改样式的铁律：**不要再写死颜色**。 写 rgba(255,255,255,.1) 这种"白色半透明"在暗色下是分隔线、在亮色下就彻底看不见。 要分隔线用 var(--hair)，要 hover 底用 var(--hover)，要强调文字用 var(--strong)， 要"深空那片底"用 var(--veil-rgb)（它是 RGB 三元组，配 rgba() 用）。 ========================================================================== */ :root { /* 告诉浏览器原生控件（滚动条、表单、下拉）该用哪套配色 */ color-scheme: dark; /* 深空色阶。 原来是 #04060C 起（近黑），实测"太暗"—— 在普通显示器上基本看不出层次， 四个色阶挤在一起都像纯黑。整体抬到**深海军蓝**：底子亮一档， 相邻色阶的差值也拉开，卡片/面板才浮得起来。 */ /* 四档的 CIE 亮度 L* 大致是 7 / 11 / 16 / 21 —— 步长均匀， 面板之间才分得开。原来那组是 0 / 1.6 / 4 / 8.5， 在普通显示器上四个档几乎都等于纯黑。 */ --space-0: #08142B; /* 页面底 */ --space-1: #0E1C3A; /* 面板 / 卡片 */ --space-2: #16264C; --space-3: #1E3160; /* 线 / 字 */ --line: rgba(255, 255, 255, .14); --line-2: rgba(255, 255, 255, .24); --text: #FFFFFF; --text-2: rgba(232, 238, 250, .78); /* 注意：--muted 不是「装饰色」。导航标签、面包屑、表格副行、 各种提示文字都用它 —— 它必须**能被读**（≥4.5:1）。 .52 在深底上只有 4.9，配 11px 的小字太勉强。 */ --muted: rgba(232, 238, 250, .68); /* 唯一强调色（冷冽电光蓝） */ --accent: #0F6BFF; --accent-lt: #5EA8FF; --accent-hover: #2A80FF; --accent-wash: rgba(15, 107, 255, .12); --ok: #2ED47A; --warn: #FFB020; /* ---- 语义令牌：主题切换真正要改的就是这一组 ---- */ /* 深浅无关：强调色上的文字 */ --on-accent: #fff; /* "更亮的文字"：暗色下是纯白，亮色下是近黑 */ --strong: #fff; /* 深色文字的 RGB 三元组，用于 rgba(var(--ink-rgb), .34) 这种半透明文字。 暗色主题下"次要文字"其实是**浅**色，所以这个名字叫 ink 有点反直觉 —— 但它代表的是"正文墨色在亮色主题下的样子"，亮色下直接就是墨色本身。 */ --ink-rgb: 232, 238, 250; /* 「深空那片底」的 RGB 三元组，用于各种遮罩 / scrim */ --veil-rgb: 8, 20, 43; /* 压在**图片**上的文字专用的颜色元组。**刻意两套主题同值** —— 全站唯一一个不跟主题走的文字色，所以亮色块里也不要覆盖它。 理由：图片本身不跟主题换（研究方向那六张一律是暗调的芯片/机器人/中控室语言）， 压在图片上的字就得跟着图片、而不是跟着页面。用 --ink-rgb 的话， 亮色主题下会变成近黑字压在暗图上 —— 直接消失（真踩过，"01"整个不见）。 */ --media-ink: 232, 238, 250; /* ---- 侧栏（暗色：深海军蓝）---- 侧栏不跟 --text / --line 走 —— 那套在亮色主题下是"白底近黑字"， 套到侧栏上就成了"深蓝底 + 近黑字"，看不见。 所以它自成一套 `--nav-*`；亮色主题里会把这一整套换成亮蓝（见下面 light 块）。 */ --nav-bg: #0E1C3A; --nav-bg-2: #08142B; --nav-text: #FFFFFF; --nav-text-2: rgba(232, 238, 250, .76); --nav-muted: rgba(232, 238, 250, .50); --nav-hair: rgba(255, 255, 255, .14); --nav-hover: rgba(255, 255, 255, .07); --nav-active-bg: var(--accent-wash); /* 侧栏底色的"光泽层"。暗色不需要（本来就是深色平面），亮色下是金属的关键 */ --nav-bg-image: none; /* 深底上要用**浅**蓝；--accent-lt 是深蓝，压上去等于没有 */ --nav-accent: #5EA8FF; /* ---- 深色带：首屏 / 页头 ---- 两套主题下首屏都是那片深空（用户的要求），所以它上面的文字永远是白的， 遮罩永远用深空色。同样不能跟着 --text / --veil-rgb 走。 */ --band-fg: #FFFFFF; --band-fg-2: rgba(232, 238, 250, .78); --band-muted: rgba(232, 238, 250, .74); --band-veil-rgb: 8, 20, 43; /* 深空带上的强调色也要是**浅**蓝：--accent-lt 在亮色主题下是深蓝，压在深空上等于没有 */ --band-accent: #5EA8FF; /* 带子内部的细线（首屏数据条的分隔、带子的上下边）—— 用浅色，不是黑 */ --band-hair: rgba(255, 255, 255, .16); /* ---- 首屏专用（**跟主题走**，和 --band-* 分开）---- 暗色首屏是深空 → 白字；亮色首屏是明亮的空间站舱内 → 深字。 页头那边不跟主题走（配图恒暗、字恒白），所以两组必须分开， 否则亮色下页头标题会变成深字压在暗图上。 */ --hero-fg: #FFFFFF; --hero-fg-2: rgba(232, 238, 250, .78); --hero-muted: rgba(232, 238, 250, .74); --hero-accent: #5EA8FF; --hero-hair: rgba(255, 255, 255, .16); --hero-veil-rgb: 8, 20, 43; /* 分隔线：比 --line 更弱的一档 */ --hair: rgba(255, 255, 255, .14); --hair-2: rgba(255, 255, 255, .07); /* 交互底：hover / 选中的轻微填充 */ --hover: rgba(255, 255, 255, .09); /* 抬高块：码块、徽标里的值这种"比底稍亮一点"的小面 */ --raise: rgba(255, 255, 255, .09); /* 标签页选中态。暗色下靠半透明蓝就够，亮色下必须换成实心蓝， 否则白字贴在浅底上根本读不出来。 */ --tab-on-bg: rgba(15, 107, 255, .30); /* 语义色的"前景 / 背景 / 描边"三件套。暗色下都是浅色文字， 亮色下必须换成深色，否则浅底上的浅红等于看不见。 */ --err-fg: #ffb4b4; --err-bg: rgba(192, 0, 0, .16); --err-line: rgba(192, 0, 0, .36); --ok-fg: #9fe0a8; --ok-bg: rgba(83, 129, 53, .16); --ok-line: rgba(83, 129, 53, .40); --warn-fg: #ffd79a; --warn-bg: rgba(255, 176, 32, .14); --warn-line: rgba(255, 176, 32, .38); /* 浮层投影 */ --shadow-lg: 0 20px 60px rgba(0, 0, 0, .6); /* 首屏底图：暗色是「地球」，亮色是「月球」（在下面的 light 块里换掉）。 */ --hero-filter: none; --sidebar-w: 260px; --r: 6px; --r-sm: 4px; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif; } /* -------------------------------------------------------------------------- 亮色主题：白纸 + 深蓝侧栏 + 明显的黑边线 -------------------------------------------------------------------------- 和暗色主题的区别**只在页面主体**，两处是刻意不变的： · 侧栏：两套主题都是深蓝（--nav-* 自成一套，不跟着 --text 走） · 首屏 / 页头：两套主题都是那片深空（--band-*，白字 + 深空遮罩） 所以这里只需要换"白纸那部分"的令牌：背景白、文字近黑、**边线用明显的黑色**。 卡片也是白 —— 层次不再靠底色深浅，而是靠那条黑边（用户要的"边界分明"）。 -------------------------------------------------------------------------- */ [data-theme="light"] { color-scheme: light; --space-0: #FFFFFF; /* 页面底：白 */ --space-1: #FFFFFF; /* 面板 / 卡片：也是白，靠黑边分开 */ --space-2: #F1F3F6; /* 灰：表头、码块、徽标这类需要一个底色的块 */ --space-3: #E4E7EC; /* 「边界分明的地方用明显的黑色」—— 这里是真的黑，不是淡灰 */ --line: rgba(9, 12, 18, .58); --line-2: rgba(9, 12, 18, .88); --text: #0A0E14; --text-2: rgba(10, 14, 20, .80); /* 同上：--muted 承担大量真实文字，白底上要 ≥4.5 → .72（约 6.3:1） */ --muted: rgba(10, 14, 20, .72); --accent: #0F6BFF; /* 白底上要用够深的蓝。#0946C4 在白底上对比度 7.4，绰绰有余 */ --accent-lt: #0946C4; --accent-hover: #0A5AE0; --accent-wash: rgba(15, 107, 255, .10); --ok: #12864F; --warn: #B3700A; --strong: #0A0E14; --ink-rgb: 10, 14, 20; /* 顶栏玻璃 / 卡片图上的渐变仍是白的 —— 那是"页面"的一部分， 深空带（首屏、页头）另有 --band-veil-rgb，不在这里。 */ --veil-rgb: 255, 255, 255; --hair: rgba(9, 12, 18, .20); --hair-2: rgba(9, 12, 18, .10); --hover: rgba(9, 12, 18, .06); --raise: rgba(9, 12, 18, .05); --tab-on-bg: var(--accent); --err-fg: #B3261E; --err-bg: rgba(192, 0, 0, .07); --err-line: rgba(192, 0, 0, .30); --ok-fg: #0F7B3E; --ok-bg: rgba(18, 161, 80, .09); --ok-line: rgba(18, 161, 80, .32); --warn-fg: #8A5200; --warn-bg: rgba(200, 122, 0, .12); --warn-line: rgba(200, 122, 0, .40); --shadow-lg: 0 18px 44px rgba(9, 12, 18, .18); /* 首屏是深空，两套主题共用一套调色；月球那张已经调成暗色调，这里只补一点饱和度 */ --hero-filter: saturate(1.05); /* 首屏：明亮的空间站舱内 → **深色字 + 浅色遮罩**。 页头那组 --band-* 保持深空 + 白字，不要动。 */ --hero-fg: #0B0F16; --hero-fg-2: rgba(11, 15, 22, .80); --hero-muted: rgba(11, 15, 22, .62); --hero-accent: #0F6BFF; --hero-hair: rgba(11, 15, 22, .16); --hero-veil-rgb: 255, 255, 255; /* ---- 亮色的侧栏：更亮的蓝 ---- ⚠️ **只有亮色改**。暗色主题的侧栏保持深海军蓝（:root 里那套）， 这是用户明确要求的：暗色那边一点都不要动。 底色一亮，它那一套文字/描边/选中底色必须**整套**跟着提 —— 只改底色的话，白字压在亮蓝上反而更糊。 */ /* 侧栏：金属灰。上浅下深两档灰 = 金属板最常见的受光方式； 字是**深色**（压在灰底上），所以下面这一组全是深色，不是白。 */ --nav-bg: #DCE0E6; --nav-bg-2: #BFC6D0; --nav-text: #0B0F16; --nav-text-2: rgba(11, 15, 22, .84); /* .68 而不是 .62：金属渐变**最暗的那一档**（--nav-bg-2）上， .62 只有 4.31:1，刚好卡在 AA 线下面 */ --nav-muted: rgba(11, 15, 22, .68); --nav-hair: rgba(11, 15, 22, .16); --nav-hover: rgba(11, 15, 22, .07); /* 灰底上要用**蓝**作选中色才醒目 */ --nav-active-bg: rgba(15, 107, 255, .16); --nav-accent: #0B4FC4; /* 金属光泽：上下两档灰之外再叠一层很淡的斜向高光 —— 这正是"金属"和"纯灰"的区别。压在灰底上，必须很轻。 */ --nav-bg-image: linear-gradient(118deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 34%, rgba(11, 15, 22, .05) 100%); } * { box-sizing: border-box; } body { margin: 0; font-family: var(--sans); font-size: 15.5px; line-height: 1.65; color: var(--text); background: var(--space-0); -webkit-font-smoothing: antialiased; } a { color: inherit; } h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.025em; } p { margin: 0; } dl, dt, dd { margin: 0; } img { display: block; max-width: 100%; } ::selection { background: rgba(15, 107, 255, .35); } /* 小标签：等宽 + 撑开字距 + 全大写。 ⚠️ 只适合**短的大写拉丁词**（SKILL / ROOT / 概览 这种）。 汉字没有大小写，"撑开" 只会把一个词拆散，所以别拿它去包整句话或中文串。 */ .nav-label, .eyebrow, .crumb, .kicker, .spec-key, .tag, .hero-meta dt, .footer-meta, .side-meta, .status-key, .build-chip, .metric-key { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; } /* 等宽元信息：哈希、时间戳、尺寸、文件名、编号…… ⚠️ 这里**故意不放大写转换、也不放 .16em 字距**。两条都踩过坑： ① `text-transform: uppercase` 会把文件名 / 用户名 / Hash **显示成大写**， 而这些全是**大小写敏感**的 —— 备份包 uu-site-20260922-100711.tar.gz 在页面上显示成 UU-SITE-….TAR.GZ，用户照着抄下来的名字是错的； `register_mode` 也会从 invite 显示成 INVITE，而那正是要填进配置的值。 ② 汉字不是拉丁字母，.16em 会把「累计下载 12 次」拆成「累 计 下 载 12 次」； 而且汉字走的是等宽字体的回退字体，字宽和旁边的数字对不齐，整行看着是散的。 要"撑开的大写标签"请用上面那一组类；要"含汉字的元信息整句"用 .meta-line。 */ .mono { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; } /* 含汉字的元信息整句：「共 6 个 · 已共享 5 · 待审 0」这类。 走正文字体 —— 汉字与数字混排时等宽字体帮不上忙，只会让字宽忽大忽小。 数字用等宽数字（tabular-nums），这样上下两行的数字仍然对齐。 */ .meta-line { font-size: 12.5px; color: var(--muted); letter-spacing: 0; font-variant-numeric: tabular-nums; } /* 含汉字的**短**元信息（作者名、栏目名、标签这类）：字号跟旁边的 .mono 对齐， 只把等宽字体换成正文字体 —— 汉字在等宽字体里只能走回退字体， 字宽和旁边的拉丁数字对不齐，看着就是"散"的。 */ .meta-cjk { font-size: 12.5px; color: var(--muted); letter-spacing: 0; } /* 中文下的字距修正 -------------------------------------------------------------------------- 上面那组标签类的 .16em / .22em 是**为拉丁文调的**：大写拉丁字母字面窄、 x-height 小，撑开一点才像"小标签"。汉字是满格的方块字，同样的 .22em 会把一个词拆成一串孤立的字（「可复用的能力」→「可 复 用 的 能 力」）。 所以中文下收到 .1em：仍然看得出是标签，但不再一个字一个字往外蹦。 **只对 lang="zh" 生效**，英文页面的观感一点都不变。 ⚠️ 最后一行 `.page-head .eyebrow` 不能省：它自己也设了 `.22em`， 特异性 (0,2,0) 与 `:lang(zh) .eyebrow` 相同，但它在文件后面 —— 不加这一条就会被它盖掉，而页面头部恰好是汉字标签最多的地方。 这份名单是 `cjk-web-typography` 技能里那把尺子（`scripts/cjk_audit.py`）扫出来的： 凡是「自带 .1em 以上字距、又会被中文文案用到的类」都要列在这里， 漏一个就会出现"别的都紧了、就这一处还是散的"。 */ :lang(zh) .nav-label, :lang(zh) .eyebrow, :lang(zh) .crumb, :lang(zh) .kicker, :lang(zh) .spec-key, :lang(zh) .tag, :lang(zh) .hero-meta dt, :lang(zh) .footer-meta, :lang(zh) .side-meta, :lang(zh) .status-key, :lang(zh) .build-chip, :lang(zh) .metric-key, :lang(zh) .back-link, :lang(zh) .scan-caption, :lang(zh) .module-idx, :lang(zh) .page-head .eyebrow { letter-spacing: .1em; } /* ========================================================================== 骨架 ========================================================================== */ .shell { display: flex; min-height: 100vh; } .main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-height: 100vh; } /* ========================================================================== 侧栏 ========================================================================== */ .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); display: flex; flex-direction: column; padding: 20px 0 16px; background: var(--nav-bg-image), linear-gradient(180deg, var(--nav-bg) 0%, var(--nav-bg-2) 100%); border-right: 1px solid var(--line); z-index: 40; } .brand { display: flex; align-items: center; gap: 12px; padding: 0 20px 20px; margin-bottom: 16px; border-bottom: 1px solid var(--nav-hair); text-decoration: none; } /* 品牌徽标：图形标识（彗星掠过半个地球）。 徽标自带 #0D1526 底色，在深色侧栏上需要一圈描边才立得住。 圆角必须跟徽标内部一致（14/64 ≈ 21.9%），否则 box-shadow 描边会在四角悬空。 描边颜色跟着侧栏底色走 —— 亮色主题的侧栏是亮蓝，得用更浅的一圈（见下面的 light 覆盖）。 */ .brand-mark { display: block; flex: none; width: 34px; height: 34px; border-radius: 7.5px; overflow: hidden; box-shadow: 0 0 0 1px rgba(94, 168, 255, .30), 0 0 16px rgba(15, 107, 255, .18); } .brand-mark img { display: block; width: 100%; height: 100%; } .brand-text { display: flex; flex-direction: column; line-height: 1.25; } .brand-text strong { font-size: 15px; letter-spacing: .18em; } .brand-text small { color: var(--nav-muted); font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; } .nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; } .nav-label { color: var(--nav-muted); padding: 0 10px 10px; letter-spacing: .24em; } .nav-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-sm); color: var(--nav-text-2); text-decoration: none; font-size: 14px; transition: background .16s ease, color .16s ease; } .nav-item:hover { background: var(--nav-hover); color: var(--nav-text); } .nav-item.is-active { background: var(--nav-active-bg); color: var(--nav-text); } .nav-item.is-active::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 2px; height: 20px; background: var(--nav-accent); } .nav-idx { font-family: var(--mono); font-size: 10.5px; color: var(--nav-muted); } .nav-item.is-active .nav-idx { color: var(--nav-accent); } .nav-text { flex: 1; } .nav-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--warn); } .side-foot { margin-top: auto; padding: 16px 20px 0; border-top: 1px solid var(--nav-hair); } .side-status { display: flex; align-items: center; gap: 8px; } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); } .dot.is-warn, .side-status .dot, .build-chip .dot { background: var(--warn); } .dot.is-ok { background: var(--ok); } .side-status span:last-child { color: var(--nav-text-2); font-size: 12px; } /* 品牌全称比原来的两字母缩写长得多，这里竖排两行避免在窄侧栏里折行 */ .side-meta { margin-top: 10px; color: var(--nav-muted); letter-spacing: .12em; display: flex; flex-direction: column; gap: 2px; } /* ========================================================================== 顶栏 ========================================================================== */ .topbar { position: sticky; top: 0; z-index: 30; height: 60px; display: flex; align-items: center; gap: 14px; padding: 0 34px; background: rgba(var(--veil-rgb), .72); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--line); } .menu-btn { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: transparent; color: var(--strong); cursor: pointer; } .menu-btn svg { width: 18px; height: 18px; } .crumbs { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--muted); } /* 分隔符也是要读的字：.22 在白底上只有 1.4，基本看不见 */ .crumb-sep { color: var(--muted); } .crumb-current { color: var(--strong); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; } .build-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2); white-space: nowrap; } .seg { display: inline-flex; padding: 2px; border: 1px solid var(--line-2); border-radius: var(--r-sm); } .seg a { padding: 5px 12px; border-radius: 3px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); text-decoration: none; } .seg a.is-on { background: var(--accent); color: var(--on-accent); } /* 主题开关：暗色下显示太阳（点了变亮），亮色下显示月亮（点了变暗）。 两个图标都在 DOM 里，靠 data-theme 决定显示哪个 —— 纯 CSS 切换， 不会出现"点完了图标慢半拍"的闪。 .theme-ico 的 display 由下面的规则管。 */ .theme-btn { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: transparent; color: var(--strong); cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; } .theme-btn:hover { background: var(--hover); border-color: var(--accent); } .theme-btn svg { width: 17px; height: 17px; } .theme-btn .ico-moon { display: none; } [data-theme="light"] .theme-btn .ico-sun { display: none; } [data-theme="light"] .theme-btn .ico-moon { display: block; } /* ========================================================================== 内容区 ========================================================================== */ .content { flex: 1; padding: 0 34px 80px; } .content > * { max-width: 1120px; position: relative; z-index: 1; } /* ========================================================================== 首屏 ========================================================================== */ .hero { position: relative; /* 首屏上的文字走 --hero-*（跟主题走）：暗色深空配白字， 亮色明亮的舱内配深字。它**不跟 --text 走**。 */ color: var(--hero-fg); max-width: none !important; margin: 0 -34px; min-height: min(76vh, 660px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; border-bottom: 1px solid var(--hero-hair); } /* -------------------------------------------------------------------------- 首屏是**两套完整场景叠着**，切换时整层交叉淡入淡出： 场景 A（地球）= 底图 + 深色遮罩 + 左下辉光 场景 B（月球）= 底图 + 浅蓝遮罩 + 右下辉光 为什么不是"一张图 + 一套遮罩、按主题换颜色"：遮罩是 `background-image` 的渐变，**渐变本身没法 transition**，换主题时会"啪"地跳一下 —— 而底图在慢慢淡出，两者对不上，看着就是穿帮。 把遮罩和辉光一起塞进场景里，交叉淡入就全都平滑了。 -------------------------------------------------------------------------- */ .hero-scenes { position: absolute; inset: 0; } .hero-scene { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; } [data-theme="dark"] .hero-scene.is-earth, [data-theme="light"] .hero-scene.is-moon { opacity: 1; } .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 42%; animation: kenburns 30s ease-in-out infinite alternate; } @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.06); } } /* 两张底图各自调色：地球是夜景原样，月球往蓝偏一点和新 UI 对齐。 写成「按场景」而不是「按主题」—— 淡出中的那张不该跟着新主题换色。 */ .hero-scene.is-moon .hero-bg { filter: var(--hero-filter); } .hero-veil { position: absolute; inset: 0; } /* 两套场景的遮罩都走 --band-veil-rgb（深空色）。 首屏在明暗两套主题下都是那片深空，所以遮罩只有一个版本 —— 之前按主题换遮罩（深色/浅蓝）是错的：那会让亮色主题的首屏被洗成一片白， 正是"亮得耀眼"的来源。左边（文字区）压厚保对比度，右边留给星球。 */ .hero-scene.is-earth .hero-veil { background: linear-gradient(94deg, rgba(var(--hero-veil-rgb), .92) 0%, rgba(var(--hero-veil-rgb), .64) 42%, rgba(var(--hero-veil-rgb), .08) 100%), linear-gradient(180deg, rgba(var(--hero-veil-rgb), .55) 0%, rgba(var(--hero-veil-rgb), 0) 30%, rgba(var(--hero-veil-rgb), .72) 100%); } .hero-scene.is-moon .hero-veil { background: linear-gradient(94deg, rgba(var(--hero-veil-rgb), .90) 0%, rgba(var(--hero-veil-rgb), .60) 42%, rgba(var(--hero-veil-rgb), .06) 100%), linear-gradient(180deg, rgba(var(--hero-veil-rgb), .52) 0%, rgba(var(--hero-veil-rgb), 0) 30%, rgba(var(--hero-veil-rgb), .68) 100%); } /* 天体大气辉光：极淡的一圈缓慢呼吸，给星球"活着"的暗示。 地球在左下、月球在右下 —— 这是两套场景最直观的区别。 */ .hero-aura { position: absolute; bottom: -30%; width: 84%; aspect-ratio: 1 / 1; z-index: 1; pointer-events: none; border-radius: 50%; filter: blur(14px); animation: auraBreathe 9.5s ease-in-out infinite; } .hero-scene.is-earth .hero-aura { left: -12%; background: radial-gradient(circle at 50% 50%, rgba(104, 176, 255, .30) 0%, rgba(58, 128, 236, .16) 30%, rgba(26, 74, 178, .06) 56%, rgba(8, 20, 43, 0) 76%); } .hero-scene.is-moon .hero-aura { left: auto; right: -12%; background: radial-gradient(circle at 50% 50%, rgba(158, 196, 255, .34) 0%, rgba(110, 156, 240, .18) 30%, rgba(58, 104, 200, .07) 56%, rgba(8, 20, 43, 0) 76%); } @keyframes auraBreathe { 0%, 100% { opacity: .48; transform: scale(1); } 50% { opacity: .92; transform: scale(1.05); } } /* 群星闪耀层：由 starfield.js 在 canvas 上逐帧绘制 四周各外扩 26px，pointer 视差位移时不会露出空边 */ .hero-stars { position: absolute; top: -26px; left: -26px; width: calc(100% + 52px); height: calc(100% + 52px); z-index: 1; display: block; pointer-events: none; will-change: transform; transition: transform .75s cubic-bezier(.22, .61, .36, 1); } .hero-inner { position: relative; z-index: 2; max-width: 780px; padding: 110px 34px 60px; } .kicker { display: flex; align-items: center; gap: 12px; color: var(--text-2); letter-spacing: .24em; } /* 首屏和页头的小标签各跟各的：首屏跟主题，页头恒白 */ .hero .kicker { color: var(--hero-fg-2); } .page-head .kicker { color: var(--band-fg-2); } .kicker .bar { width: 34px; height: 2px; background: var(--accent); } .hero-title { margin-top: 24px; color: var(--hero-fg); /* 上限从 78 收到 66：78px 时英文那串 "research & intelligence workspace" 要折成四行，中文也顶到 780px 栏宽的边上，两边都难看。 */ font-size: clamp(38px, 5vw, 66px); line-height: 1.08; letter-spacing: -0.032em; } .hero-title .hl { color: var(--hero-accent); } .hero-lead { margin-top: 24px; font-size: 17px; line-height: 1.72; color: var(--hero-fg-2); max-width: 56ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; } .btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 24px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; text-decoration: none; /*