/* ============================================================================ nav.css —— 导航类状态样式（不依赖 Tailwind 是否编译出了某个类） ---------------------------------------------------------------------------- 两块内容： A. 顶部导航「滚动方向 → 隐藏」的两个状态类（下面第 1~5 段） B. 右侧章节导航「滚到最后一段末尾 → 整块淡出」的状态类（文件末尾） ---------------------------------------------------------------------------- ⚠️ 为什么不用 Tailwind 的类名（原设计是用类名的）： 原设计的隐藏态是往 classList 里加 `-translate-y-full opacity-0`。 这两个类**确实**在编译出的 page.css 里（`. -translate-y-full` 被压缩器 并进了 `.-translate-y-full,.translate-x-1/2{transform:…}` 那条选择器， 所以它既给变量也给 transform 合成）。 但那是「恰好本项目用到了」。这份产物要当原设计复用 ⇒ 换成自己的两个类， 不赌下游项目的 Tailwind 有没有树摇出这两个名字。 （反面教材就在眼前：`translate-y-full` 在 page.css 里是 **0 处** —— 只有 `-translate-y-full`。差一个负号，运行时拼类名就会静默无效。） 权威依据（className 拼接）： const x = scrollDir === Down ? 1 : -1; // Up 与 Still 都是 -1 const E = cls("transition-transform duration-1000 ease-out-quint", x > 0 && "-translate-y-full opacity-0 [transition:transform_0.5s_cubic-bezier(0.83,0,0.17,1),opacity_0.1s_0.1s]"); // 两块 blur 背板 + 字标竖列 用 E // 右上汉堡按钮： x < 0 && "translate-y-2 opacity-0" ⇒ 两者的方向是**反着的**： 向下滚 → 字标/背板收起（但汉堡出现） 向上滚/静止 → 字标/背板回来（但汉堡收起） 这不是笔误，原设计就是这样，照实还原。 ⚠️ 未分层（unlayered）的规则优先于 @layer 里的 Tailwind 工具类， 所以这里的 transform 一定能盖掉元素 class 上那条 transform 合成。 `translate(0,-100%)` 与 `translate(0,.5rem)` 就是原设计两个类算出来的值 （`--tw-translate-x` 恒为 0，见 page.css 的 `*,:after,:before` 默认块）。 ========================================================================= */ /* 向下滚：两块 blur 背板 + 字标竖列 → 上移整整一个自身高度并淡出 */ [data-nav-hide].is-down { transform: translate(0, -100%); opacity: 0; /* 与 E 里那段任意属性类逐字等价： [transition:transform_0.5s_cubic-bezier(0.83,0,0.17,1),opacity_0.1s_0.1s] */ transition: transform 0.5s cubic-bezier(0.83, 0, 0.17, 1), opacity 0.1s 0.1s; } /* 向上滚 / 静止：右上汉堡按钮 → 下移 0.5rem 并淡出（`translate-y-2` = 0.5rem） */ [data-nav-burger].is-up { transform: translate(0, 0.5rem); opacity: 0; } /* ── 中央链接容器（故事 / 认识它们 / 作出选择）───────────────────────── 既有代码是往容器上拼**两套互斥的 arbitrary variant**，作用于直接子元素： x > 0 ⇒ [&>*:not(:hover)]:-translate-y-2 / :opacity-0 / [&>*]:pointer-events-none x < 0 ⇒ [&>*:not(:hover)]:translate-y-2 / :opacity-50 这里换成我们自己的两个状态类，理由与文件头一致（不赌下游项目树摇出了哪些 arbitrary variant）。值逐条对齐原设计两个类的实算： -translate-y-2 / translate-y-2 ⇒ ∓0.5rem（实测 matrix 的 ty = ∓8） opacity-0 / opacity-50 ⇒ 0 / 0.5 ⚠️ 未分层规则优先于 @layer 里的工具类，所以这里的 transform/opacity 一定能盖掉 快照烤进来的那一套（`.translate-y-2` / `.opacity-50`）。 */ /* ── 中央目录（页眉）· 英文标签的字号 ────────────────────────────────────── 2026-10-30：标签从「故事 / 认识它们 / 作出选择」换成 Story / Species / Take Action， 同时把字号从继承来的 24px 降到 18px（需求：「把文字缩小一些」）。 ⚠️ 只写在 上，不写在容器上：容器的 `mt-[calc(var(--padding)-0.4em)]` 里的 0.4em 是按容器字号（24px）算的，改容器会让整组往下挪 2.4px。 ⚠️ 中文字形在 24px 时视觉重量远大于同号的拉丁小写，换成英文本身已经「变小」一档； 这里再降 6px 是 需求明确要的更小一档。想调回去只改这一个数字。 ⚠️ 菜单顶栏（24px）/ 菜单大项（40px）/ 页尾（24px）是三处独立副本，不跟这里联动。 */ [data-nav-links] > a { font-size: 18px; } /* 向下滚：整组收起 */ [data-nav-links].is-down > * { transform: translate(0, -0.5rem); opacity: 0; } /* ⚠️ 这里**刻意不写 pointer-events: none** —— 原设计在 DOWN 分支里确实拼了 `[&>*]:pointer-events-none`，但基础串里同时有 `[&>*]:pointer-events-auto`， 两条同权重、谁在后谁赢，而编译产物里 **auto 赢**。实测： 故事 op=0 tf=matrix(1,0,0,1,0,-8) pointer-events=**auto** 所以它不是"点不到"，而是"看不见但能 hover 探头"。照实做。 */ /* 向下滚时 hover 探头：原设计 `[&>*:not(:hover)]` 一变 `:hover`，translate/opacity 两条就同时失效 ⇒ 落回基础值（none / 1）。不写这条的话会被上面那条更"稳"的 未分层规则永久压住，表现为"本地 hover 不出来、原设计能"。 */ [data-nav-links].is-down > *:hover { transform: none; opacity: 1; text-underline-offset: 0.5rem; } /* 向上滚 / 静止：待机态（微微下移 + 半透明）—— 就是快照里烤着的那一态 */ [data-nav-links].is-up > * { transform: translate(0, 0.5rem); opacity: 0.5; } /* hover 时回到正常态： 原设计基础串里有 [&>*:hover]:underline-offset-8 与 [&>*]:pointer-events-auto， `:not(:hover)` 一变 :hover，translate / opacity 两条就自然失效 ⇒ 1 / none。 （:hover 规则比上面的 .is-up 更具体，所以能盖住它。） */ [data-nav-links].is-up > *:hover { transform: none; opacity: 1; text-underline-offset: 0.5rem; /* underline-offset-8 = 0.5rem */ } /* ── 标语链「Peace, dignity & equality on all species」──────────────────── 既有代码：!v && "pointer-events-none -translate-y-2 opacity-0" （v 的规则见 nav.js 的 onScroll：滚过 0 且向下滚才置假，回顶才复真） ⚠️ 位移是 **-translate-y-2（负）**，不是 +：实测 tf = matrix(1,0,0,1,0,-8)。 第一版照着 `[&>*:not(:hover)]:translate-y-2` 的**正号**惯性写成了 +0.5rem， 实测立刻露馅（原设计 -8 / 本地 +8）—— 两个不同的类，别互抄。 ⚠️ 它与 .is-down 是**两套独立状态**，只是在本切片里恰好总是同时为真。 */ [data-nav-tagline].is-hidden { transform: translate(0, -0.5rem); opacity: 0; pointer-events: none; } /* ── 章节导航（右侧 waypoint 列表）的「到底淡出」态 ──────────────────────── 既有代码（page.js StoryWaypointIndicator），同一个 `p` 驱动两处： · 列表容器： p && 'hide' in registry[p] && "opacity-0" · blur 背板： 同上条件，再拼 "!backdrop-blur-0 ![-webkit-backdrop-filter:blur(0)]" 其中 `p` = 当前命中的锚点 id。列表只渲染**有 title 的**那 4 个章节， 而 `
` 那个哨兵只注册了 `{hide: true}`（没有 title）⇒ 它自己不进列表，却能被选成「当前项」—— 于是滚到最后一段末尾时 整块导航淡出、背板的毛玻璃也一并关掉。触发点 = scrollY ≥ 17460（1940vh）。 ⚠️ 背板是**两条**模糊同时生效的：`backdrop-blur-lg`（≥lg 的 `lg:backdrop-blur-sm` 是另一条）+ `[-webkit-backdrop-filter:blur(16px)]` —— 只关一条在 Chrome 上仍然会糊，两条都得归零。 ⚠️ 2026-10-15 之前这里什么都没有：产物在 y=19800 还亮着 「Two Worlds Collide」，而 原设计已经整块没了 —— 整页对位比对最后两点就是这么暴露的。 */ [data-wp-back].is-hidden { backdrop-filter: blur(0) !important; -webkit-backdrop-filter: blur(0) !important; } [data-wp-list].is-hidden { opacity: 0; } /* The static page keeps the menu DOM but has no React handler. Reveal that existing layer directly; animate only its clip instead of all properties. */ nav [data-ws-menu] { visibility: hidden; pointer-events: none; clip-path: inset(0 0 100% 0); transition: clip-path .45s cubic-bezier(.22, 1, .36, 1), visibility 0s .45s; } nav [data-ws-menu].is-open { visibility: visible; pointer-events: auto; clip-path: inset(0 0 0 0); transition: clip-path .45s cubic-bezier(.22, 1, .36, 1), visibility 0s; } html.ws-menu-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { nav [data-ws-menu], nav [data-ws-menu].is-open { transition-duration: 0s; } }