/* ══════════════════════════════════════════════════════════════════════════ Yarrow Landing — 版面 版面 / 配色 / 动效由设计侧决定；文案与栏目属内容层，改动先过产品。 方向：**老式单色液晶读数**，只有四级明度。见 tokens.css 顶部。 骨架：12 列网格（不画线），全宽不居中。 结构靠四样东西撑：**区块的深浅交替**、区块之间的满幅横线、 元素自身的边框、**6px 点阵栅格**。 · **不用浅浅交替** —— 原因是 g0/g1 对比只有 1.08 看不出来； 四级之后 g0/g1/g2 已经**是同一个颜色**，连做的可能都没有。 交替一律用深浅带（`.sec-dark` = 负显液晶），反差 10.43。 刻意不用纯黑白（21.0）—— 真实液晶只有 6–8，我们落在中间偏液晶那侧。 · 不画背景竖线 —— 121px 间距太大不成纹理，又会穿过段落和已有边框的面板 · **静止态不用半透明、不用模糊**，过渡态可以。 ⚠️ 这一条 2026-07-30 改过。原文是无条件的「不用半透明、不用模糊」， 依据是四级给不了中间值。后来 hero 的雾化换条要用 blur + opacity， 于是把这条规矩划了辖区而不是破例 —— 完整推导见 tokens.css 原则 5。 **别看到页面上有模糊就以为是违规**，也别据此把无条件版本改回来： 那会把雾化和步进器的擦除一起判死。 目前静止态用到透明度的只有一处（.product-label span 的 0.6）， 它是设计侧明确要的，代价记在那条规则的注释里。 ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ 探索开关 · data-explore ══════════════════════════════════════════════════════════════════════════ 写在 index.html 的 上，空格分隔的词。 删掉一个词就恢复对应的东西，加回来就再关掉。 no-grid 隐藏 16px 纸纹（浅色带和深色带都关）。令牌仍在，只是置 none。 no-viz 隐藏剩下的非 SVG 装饰件，并切换到纯文字版面 no-reveal 关掉滚动入场的扫入，所有内容常显（2026-07-30 起默认开着） ── 2026-07-30 新增，两个都**默认关**，为的是 hero 视频上的文字可读性 ── hero-lift 提视频的黑阶：contrast(.6) brightness(1.315)。 把最暗处从 1.79:1 拉到 3.72:1，代价是画面对比只剩六成、高光近白。 hero-plate 文字区垫一块实底玻璃板，文字对比拉满 10.43:1， 代价是只能在右 5 列和板子上下看到视频。 沿用已有规矩「自带边框的容器 = 平整纸面」，不算新发明。 两个开关的实测数字见本文件 HERO 背景视频 一节。 ⚠️ 2026-07-29：**生成式 SVG 图形已彻底删除，不再由 no-viz 管**。 设计侧确认那些图形不会再用，元素与绘图代码一并去掉了 （要找回：存档仓库 agentese-redesign 的 git 历史）。 no-viz 现在只管 .scrollcue / .case-empty-mark / eyebrow 方块 这几个非 SVG 的装饰件 —— 这些仍是隐藏，可恢复。 为什么用属性而不是注释掉代码：注释掉会丢掉「为什么这么写」的上下文， 而且恢复时容易漏。属性是一个字的开关，且 git diff 只有一行。 ══════════════════════════════════════════════════════════════════════════ */ /* ── no-grid ───────────────────────────────────────────────────────────── --grid 被 background-image 引用，置 none 即可。 .sec-dark 内部重新定义了自己的 --grid（浅色墨迹版），所以要单独再关一次。 */ [data-explore~="no-grid"]{--grid:none;} [data-explore~="no-grid"] .sec-dark{--grid:none;} /* ── no-reveal ─────────────────────────────────────────────────────────── 2026-07-30 起默认开着。设计侧的理由：页面内容都不是最终版， 每次刷新都要滚一遍才能看到内容，改稿时纯属妨碍。 ⚠️ **JS 侧一行没动，这是刻意的。** observe() 照常跑、照常加 .in， 只是这两条规则把视觉效果压掉了。所以要恢复只需从 index.html 的 data-explore 里删掉 no-reveal 这个词，不用碰脚本。 如果当初图省事把 observe() 注释掉，恢复时就得同时改两个文件， 而且很容易忘掉其中一个。 落地效果与 prefers-reduced-motion 那条完全一致（见文件末尾）， 也就是说这个分支本来就一直在被一部分用户跑着，不是没验证过的新路径。 恢复之前记得先调触发时机：原来 rootMargin 底部是 -6%， 意思是元素要越过「视口底沿再往上 54px」才开始显形 —— 于是必须先滚到它跟前，它才在屏幕最下沿冒出来。 要留这个效果就把那个值改成正的（+15% 上下），让它提前开始。 ⚠️ 选择器带上 html 是**必要的**，不是啰嗦。 `[data-explore~="no-reveal"] .reveal.in` 的特异性是 (0,3,0)， 和文件后面的 `.reveal[data-d="1"].in` 完全相同 —— 同级就靠先后决胜， 而本节在文件最前面，会输。 加个 html 变成 (0,3,1)，无论写在哪都稳赢。 这个开关是「随时开随时关」的东西，不该对它在文件里的位置有要求。 */ html[data-explore~="no-reveal"] .reveal, html[data-explore~="no-reveal"] .reveal.in{clip-path:none;animation:none;} /* ── no-viz ────────────────────────────────────────────────────────────── 两部分：先隐藏图形，再把因此变空的双列版面收成单列文字版面。 ⚠️ nav 里的 logo 不算「图形化内容」，是品牌标识，保留。 */ /* 生成式 SVG 图形已彻底删除（2026-07-29），不再需要在这里隐藏 —— 原来这份清单里的 .hero-viz / .story-illustration / .banner-side-viz / .viz-labels 以及一条 svg 兜底规则都已连同元素一起去掉。 留在这里的是**非 SVG** 的装饰件，它们只是隐藏、随时可恢复。 2026-08-03 新增的 How it works 控制台插图是正式内容，不受这个开关影响。 */ [data-explore~="no-viz"] .scrollcue, [data-explore~="no-viz"] .case-empty-mark, [data-explore~="no-viz"] .eyebrow i, [data-explore~="no-viz"] .banner-eyebrow i{display:none;} /* 图形一去，原来「文字左 / 图形右」的双列就只剩一根窄柱子。 收成单列，并按文字自己的舒适行宽定宽度 —— 用 ch 不用栏位， 因为现在决定版面的是行长（65–75 字符），不是网格。 */ [data-explore~="no-viz"] .banner-text{grid-column:1/9;} [data-explore~="no-viz"] .banner-side{grid-column:9/13;} [data-explore~="no-viz"] .banner-desc{max-width:min(56ch,100%);} /* eyebrow 的方块没了，左边那道 gap 也要收掉，否则标签会莫名内缩 */ [data-explore~="no-viz"] .eyebrow, [data-explore~="no-viz"] .banner-eyebrow{gap:0;} /* How it works 已改为五行流程，不再由 no-viz 改写栏数。 */ *{box-sizing:border-box;margin:0;padding:0;} /* 纸纹挂在 html 上而不是 body 上： body 的背景会被浏览器上提到画布，某些内嵌预览容器里这一步会失效。 挂根元素最稳，且天然覆盖整个可滚动区域。 */ html{ scroll-behavior:smooth; background-color:var(--paper); /* 点阵栅格是显示基底。--grid 现在是 radial-gradient 打点， 必须同时给 background-size（节距），否则点会被拉成一整片。 */ background-image:var(--grid); background-size:var(--grid-size); min-height:100%; } body{ font-family:var(--font-body); color:var(--text);-webkit-font-smoothing:antialiased; font-size:16px;line-height:1.6; background:transparent; } /* 自带边框的容器 = 平整纸面，纸纹挡在外面。规则见 tokens.css */ .case-empty,.drop-menu{background-color:var(--paper);} /* 小标签：与展示字同源，但字重高一档 —— 等宽字小尺寸下笔画容易糊 */ .mono{font-family:var(--font-mono);font-weight:var(--label-weight); font-variant-numeric:tabular-nums;} :root{--pad:40px;--gut:24px;} /* --navh 已随吸顶栏取消而移除 */ @media(max-width:900px){:root{--pad:20px;--gut:14px;}} .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut); padding-left:var(--pad);padding-right:var(--pad);position:relative;} /* .grid 的子元素若要 padding，必须带 var(--pad)，写 0 会覆盖左右边距 */ /* ── 区块 ───────────────────────────────────────────────────────────── */ /* 上下内边距提成变量：Products 那道撑满全高的竖线要靠它们算负边距。 与 .mast / --mast-top 同一个理由 —— 两处必须是同一个值， 写死两遍的话改了区块内边距，竖线会短一截或探出去。 */ .sec{position:relative;--sec-top:96px;--sec-bot:104px; padding-top:var(--sec-top);padding-bottom:var(--sec-bot); border-top:1px solid var(--edge);} /* .sec-quiet（底色走 --surface = g1）已移除 —— 它正是「浅浅交替」， 与纸的对比只有 1.08，等于什么也没做。About 区块改用 .sec-dark。 */ /* ── HERO 版块 ──────────────────────────────────────────────────────── 原来是空白占位（高度由 JS 镜像 Products），现在有内容了， 高度改由内容决定，镜像已取消。 轮播占左 7 列而不是通栏 —— 标题的三行硬换行是按 7 列算的 （Azeret Mono 字宽 0.65em，−5% 字距后 0.60em，1280 视口每行 16.0 字符）。 给它通栏，那些换行位置就不再对应实际行宽了。 */ .sec-hero .hero-rotator{grid-column:1/8;} @media(max-width:900px){.sec-hero .hero-rotator{grid-column:1/-1;}} /* ── HERO 背景视频 ──────────────────────────────────────────────────── 视频是**素材层**，不是界面层。四级量化管界面（字、线、填充块）， 连续调的素材从窗口里透过来，不受那条规矩约束 —— 否则视频根本没法用。 这是四级体系的第二个明确例外，第一个是 .mast-tag（见 tokens.css 原则 4）。 实测（测试素材：高调 3D 无限环，居中构图，主体占画面宽度 66 percent）： 文字色 --on #2B2D31 压在视频上的对比度 ┌────────────────┬──────────┬──────────┬────────────────────────┐ │ 状态 │ 最暗0.2% │ 2% 分位 │ 判定 │ ├────────────────┼──────────┼──────────┼────────────────────────┤ │ 原片 │ 1.79:1 │ 2.19:1 │ 82px 大字都不过（需3.0）│ │ hero-lift │ 3.72:1 │ 4.25:1 │ 大字过，16px 正文不过 │ │ hero-plate │ 10.43:1 │ 10.43:1 │ 全过 │ └────────────────┴──────────┴──────────┴────────────────────────┘ 为什么原片过不了：主体居中且占画面宽度 66 percent，而文案在左 7 列 —— 横向怎么挪都躲不开（试过放大后右移，主体左缘仍落在第 3 列）。 这不是参数问题，是构图问题：hero 背景视频需要**主体偏一侧、另一侧留空**的素材。 降级：这一节全是 CSS + HTML，无脚本参与。视频拿不到就露出 --off 玻璃底。 */ .sec-hero{overflow:hidden;background-color:var(--off); /* 上边框**宽度归零**，不是只改成透明。 与导航栏的交界线由 .mast 的 border-bottom 单独负责， 两边都画会叠成 2px —— 原来「上边比下边粗」就是这么来的。 ⚠️ 为什么不能只写 border-top-color:transparent（第一版就是这么写的，错了）： 绝对定位元素的 inset:0 是相对**内边距盒**解析的，不含边框。 所以 .hero-video 和 .sec-hero::after（点阵）都从边框**以内**开始铺， 而那 1px 透明边框露出的是 .sec-hero 自己的 background-color（玻璃 #DEE0E3）。 玻璃比视频底色（约 206）亮，于是分隔线下面多出一条 1px 的亮缝。 肉眼能看出来 —— 设计侧在截图里指出来的。 「用 transparent 保住几何」在别处是对的，在这里保住的恰好是那条缝。 */ border-top-width:0; /* 高度 +100px（2026-07-30）。加在上下内边距上，不设固定高度 —— 轮播三条的行数一样，内容高度本来就稳定，给死高度只会多一个会打架的约束。 96 → 144（+48） 上 104 → 156（+52） 下 合计正好 +100 为什么不是各加 50：**内边距要取 6px 的倍数**（点阵节距，tokens.css 有这条）。 各加 50 得到 146 / 154，两个都不是 6 的倍数；48 / 52 得到 144（24 格） 和 156（26 格），既凑够 100 又都落在格线上。 顺带把原来的 104 修正了 —— 它本来就不是 6 的倍数（17.33 格）。 多出来的高度上下大致对分，所以文案在版面里的相对位置没变，只是四周更空。 想让 100px 全加在下面（文案更靠上、露出更多视频）：把上面改回 96px。 ⚠️ .sec-hero 和 .sec 特异性相同（都是单个类），靠**在文件里更靠后**取胜。 别把这条规则挪到 .sec 之前。构建期核对会检查这个顺序。 */ --sec-top:144px;--sec-bot:156px;} /* 三层，自下而上：视频 0 → 点阵 1 → 内容 2。 .grid 本身已有 position:relative，这里只补 z-index */ .sec-hero > .grid{z-index:2;} /* ── 点阵压在视频之上 ──────────────────────────────────────────────── 意义不只是叠个纹理：点阵continue到视频上，视频就变成「显示在这块屏上」， 而不是「从一个洞里透出来」。这是液晶那条思路的核心动作。 ⚠️ 为什么不用 var(--grid)： 1. no-grid 开关把 --grid 置为 none，会把这层一起关掉 —— 但页面基底该不该显示、和 hero 视频上该不该有点阵，是两件事。 2. tokens.css 那条硬规矩：gradient 里不套 var()， 嵌套自定义属性在部分内嵌预览 / 老 WebKit 会整条失效。 所以这里和 tokens.css 一样写字面值，各自独立。 点的颜色 #A2A7AE 是**推出来的，不是挑出来的**： 页面基底是「淡 #B3B7BD」压在「玻璃 #DEE0E3」上，强度 1.52。 视频的平坦底色实测约 206（比玻璃暗），要保持同样的 1.52 就得把点压深两阶 —— H215 S7% L66 = #A2A7AE，对视频底 1.54、对玻璃底 1.83。 （直接沿用淡 #B3B7BD 的话对视频底只有 1.28，基本看不见 —— 和深色带那次一样，跨底色时要对齐的是**对比度**，不是色值。） ⚠️ 固定色的点阵盖在会动的画面上，强度不可能恒定： 在平坦底色上是 1.54，压到无限环的暗面（约 97）时会反过来变成亮点。 这是真液晶的物理行为（点格固定、图像在变），不是 bug。 要恒定强度只能让点阵跟着画面取值 —— 那是 canvas 的活，不是 CSS。 想让它更明显：把 #A2A7AE 换成「中 #6D747E」（对视频底 3.00）。 想改密度：6px 两处一起改，radial 的 .6px/.7px 是点半径，不用动。 */ .sec-hero::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background-image:radial-gradient(circle at center, var(--dot-media) .6px, transparent .7px); background-size:6px 6px; } /* 三段素材叠在同一个位置，靠 opacity 交叉淡化换段（2026-08-01）。 ⚠️ 这里用 opacity 是合法的，不违反四级：视频是**素材层**不是界面层 （见 tokens.css 原则 4 的素材层边界），而且交叉淡化是**过渡态** （原则 5）—— 两条都指向同一个结论。 收敛性也满足：淡化结束后一段是 1、其余是 0，没有停在中间态的。 ⚠️ 不用 visibility 做延迟隐藏（文字那边是那么做的）。 视频要**两段同时在播**才能交叉淡化，隐藏任何一段都会露出底色。 所以三段始终 display 在场，只有 opacity 在动。 */ .hero-video{ position:absolute;inset:0;z-index:0; width:100%;height:100%; object-fit:cover; /* 铺满区块，不留边、不变形 */ pointer-events:none; /* 不吃鼠标事件，文字照常可选中 */ opacity:0; transition:opacity var(--vid-t) ease-in-out; } .hero-video[data-on]{opacity:1;} /* 开关一：提黑阶。数值是解方程解出来的，把 100 映到 146、213 映到 235 */ [data-explore~="hero-lift"] .hero-video{filter:contrast(.6) brightness(1.315);} /* 开关二：文字区垫实底玻璃板。 padding 会把文字往内推 32px —— 这是开关状态下的取舍，不是定稿版面 */ [data-explore~="hero-plate"] .sec-hero .hero-rotator{ background-color:var(--off);border:1px solid var(--hair);padding:32px; } /* 自动播放的动图对前庭敏感的人是实际负担，且这是纯装饰。 ⚠️ 别把这个 media 块删了 —— 之前 .reveal 的 reduced-motion 块被正则吃掉过， 表面看不出来，但等于把无障碍承诺悄悄撤了。 */ @media(prefers-reduced-motion:reduce){ .hero-video{display:none;} } /* 深色带的收边：.sec-dark 本身的规则在 tokens.css 里。 这里只处理它和相邻元素的交界 —— footer 不是 .sec，选择器覆盖不到。 */ .sec-dark + .foot{border-top-color:transparent;} /* ── hero 上下的横线 ────────────────────────────────────────────────── 最终状态：**顶部留一条、底部不留。** 顶部（与导航栏交界）：1px「淡」档，与右栏竖线同规格 —— 写在 .mast 规则上 底部（与 products 交界）：不画，视频的明暗自己分区 下面这段记的是「原来为什么是两条粗细颜色都不一样的线」， 因为撤掉再加回来的过程里，这三条各自的来源必须清楚，否则又会撞出 2px。 ⚠️ 涉及**三条**边框，不是肉眼看到的两条。 「上下两条粗细颜色不一样」就是这么来的： hero 顶部 .mast 的 border-bottom = --on #2B2D31 深 + .sec 的 border-top = --edge #2B2D31 深 ← 两条叠在一起 ──────────────────────────────────────────── 实际 2px 深线 hero 底部 #products 的 border-top = --edge 但 #products 是 .sec-dark，那个作用域里 --edge 解析成 #DEE0E3 ──────────────────────────────────────────── 实际 1px 浅线 同一个令牌 --edge 在两个作用域里是两个颜色 —— 这是 .sec-dark 的设计， 不是 bug，但两条线放在一起看就露馅了。 用 transparent 而不是 none：保住那 1px 的几何位置， 区块高度和栅格对齐都不动，跟上面 .sec-dark + .foot 那条同一手法。 透明边框露出的是元素自己的背景，所以看不见。 ⚠️ .sec-hero 自己的 border-top 必须保持透明。 顶部那条线由 .mast 的 border-bottom 负责，两边都画就又回到 2px 了 —— 这正是原来那条「上边比下边粗」的成因。 降级：顶部的线画在 .mast 上，与视频无关，所以视频拿不到时它照样在， 导航栏和 hero 仍然分得开。底部则完全依赖视频的明暗，视频不在就没有分界。 ⚠️ 这两条的**声明位置**都不在本节，本节只解释原因： .mast 的 border-bottom → 写在 .mast 规则里 .sec-hero 的 border-top → 写在 .sec-hero 规则里（HERO 背景视频 一节） 为什么不在这里就地覆盖 —— 踩过两次，是两种不同的坑： 1. 级联坑：`.mast{border-bottom-color:transparent}` 写在本节， 特异性与 .mast 自己那条相同，而后者在文件里更靠后， 同特异性后者胜 → 覆盖**静默失效**。 2. 可读性坑：同一个选择器写成两条规则散在两节， 查「.sec-hero 到底是什么样」时只看到第一条就会得出错的结论。 这两个坑都是构建期核对抓出来的，不是看出来的。 规矩：**一个选择器只写一条规则**，跨节的说明用注释互相指。 */ .sec-hero + .sec{border-top-color:transparent;} .foot.sec-dark{border-top-color:transparent;} .eyebrow{display:flex;align-items:center;gap:10px;grid-column:1/-1; font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--text-faint);margin-bottom:44px;} .eyebrow i{width:6px;height:6px;background:var(--ac-base);display:block;flex:none;} /* ── 排版 ───────────────────────────────────────────────────────────── */ /* 展示字全部走 Azeret Mono。 字号比无衬线方案下调约 25% —— 等宽字每个字符同宽，同字号下横向要宽得多， 不调的话 "The future," 会冲出栏宽。字距一律收负，否则大字号会散架。 */ /* ⚠️ 裸标签的字号阶梯（h1 / h2 / h3 / p）2026-08-05 搬到 assets/type-scale.css。 原因：案例详情页要复用本文件里的 masthead，于是它也引了 landing.css， 而那四条裸标签规则会把详情页里 10 个裸 h3、13 个裸 p 重新排版。 首页与申请页必须在本文件**之前**引入 type-scale.css，否则标题会掉回浏览器默认。 详情页**不引**它 —— 它有自己的字号体系（case-detail.css）。 */ /* ── MASTHEAD · 导航条 ──────────────────────────────────────────────── 参照 craft.wild.as 的顶部条带 .hhead：大字左、小件右，高 209px 不吸顶。 （原来的半透明 + 毛玻璃吸顶栏已拆：液晶上不存在半透明也不存在模糊， 半透明会产生第五个颜色，模糊需要连续明度过渡，四级两样都给不了。） 它是**导航条**，不是一屏 hero：高度由内容定，内容顶部对齐。 背景色是关键 —— 点阵栅格铺在 html 上，这里盖一层不透明玻璃色， 条带内部就是平整玻璃、没有点阵，与页面其余部分自然分开。 （同 tokens.css 里「有边框的容器盖玻璃色」那条规则，此处是同一个机制。） ⚠️ 照参照**不吸顶**。要吸顶加 position:sticky;top:0 —— 一行， 但它有 200px 上下，吸顶会吃掉不少视口。 */ /* 上下内边距提成变量 —— 竖线要靠它们算负外边距，两处必须是同一个值。 写死两遍的话，以后改了导航栏高度，竖线会悄悄短一截或探出去。 */ .mast{position:relative;background-color:var(--off); --mast-top:36px;--mast-bot:30px; /* 导航栏与 hero 的交界线。2026-07-30 定：**规格和右栏那道竖线完全一致** —— 1px、「淡」档。所以这里直接写 var(--dim)，和 .mast-side 的 border-left 用的是同一个令牌，不走 --hair 那个别名 —— 两条线要「一样」，就该看得出用的是同一个值，而不是两个恰好相等的名字。 （hero 的下边界仍然不画线，见「hero 上下的横线」那一节。） */ border-bottom:1px solid var(--dim); padding-top:var(--mast-top);padding-bottom:var(--mast-bot);} /* stretch 而不是 start —— 右栏要撑满高度，.mast-foot 的 margin-top:auto 才有东西可推 */ .mast-in{align-items:stretch;} .mast-copy{grid-column:1/8;} /* ── 导航栏那句 The future, simulated. ──────────────────────────────── 2026-07-30 改小并减淡，为的是不和 hero 的 82px 抢主角。 ⚠️ 必须写成 .mast-copy h1，不能改全局 h1 —— hero 轮播那三条也是 h1，改全局会把主角一起缩掉。 字号 30px（1440 视口）。行高取 36px = 6 格，踩点阵节距，不用 1.17 的比例值。 字距从 --disp-tracking(-5%) 换成 --disp-tracking-md(-3.5%)： -5% 是给 60px 以上的字定的，等宽字在 30px 上收那么紧笔画会挤。 ── 颜色：走「中」档 ────────────────────────────────────────────── 全 #2B2D31 对玻璃 10.43 原状态 中 #6D747E 对玻璃 3.57 ← 现在这句用这档（.mast-tag 也是这档） 淡 #B3B7BD 对玻璃 1.52 试过，太虚，像没加载完 **这一档在这里其实不欠账，和 .mast-tag 的情况不一样。** AA 的门槛是按字号分的：24px 以上算「大字」，要求 3.0；以下算正文，要求 4.5。 这句 30px 属于大字，3.57 > 3.0 —— 通过。 .mast-tag 之所以欠 0.93，是因为它 12px，走的是 4.5 那条线。 ⚠️ 所以字号下限被抬到了 24px：原来是 clamp(20px, ...)， 窄屏收到 20px 就掉进「正文」档，同一个颜色立刻从通过变成不达标。 **门槛是台阶不是斜坡，24px 这个位置不能跨过去。** 桌面端（1140px 以上）取值仍是 30px，看不出区别，改的只是窄屏行为。 */ .mast-copy h1{ font-size:clamp(24px,2.1vw,30px); line-height:36px; letter-spacing:var(--disp-tracking-md); color:var(--fill); } /* 光标跟着字号缩：原来 2x5 格（12x30px）是配 82px 大字的， 压在 30px 的字上会比字还高。改 1x3 格（6x18px），仍是整格数。 颜色也跟着这句话走 —— 光标比字还深会变成版面上最抢眼的东西。 */ .mast-copy .caret{ width:var(--cell);height:calc(var(--cell) * 3); background:var(--fill); } /* 右栏：一道「淡」档竖线分隔（照参照图那条），所以要给内缩留位。 ── 竖线撑满导航栏高度 ────────────────────────────────────────────── 原来只到内容高度，上下各短 36 / 30px。原因不是 stretch 没生效 —— stretch 撑满的是**栅格行**，而栅格行在 .mast 的内边距**以内**， 所以竖线天然到不了导航栏的上下边缘。 做法：上下各拉一个负外边距顶到 .mast 的边缘，再用同样的值把内边距补回来。 边框跟着盒子长满全高，而**内容的位置一点没动**（负外边距和内边距抵消）。 为什么不用 .mast 上的绝对定位伪元素：那样得用 calc 把 「第 8 条栅格线在哪」重算一遍（--pad + 7 列 + 7 沟槽）， 等于把栅格数学抄第二份，将来栅格一改就悄悄错位。 负外边距的写法里，线始终长在拥有它的那个元素上，没有第二份真相。 */ .mast-side{grid-column:8/13;display:flex;flex-direction:column; gap:30px;border-left:1px solid var(--dim);padding-left:24px; margin-top:calc(var(--mast-top) * -1); margin-bottom:calc(var(--mast-bot) * -1); padding-top:var(--mast-top); padding-bottom:var(--mast-bot);} /* 沉到右栏底部：logo 靠左、小标语靠右，同一行、底边对齐。 （.mast-id 那层上下堆叠的包裹已移除。） */ .mast-foot{margin-top:auto;display:flex;align-items:flex-end; justify-content:space-between;gap:20px;} /* 副标题：12px / 行高 18px（6 的倍数，踩点阵节距）。 颜色用「中」档 —— **这是「液晶上没有灰字」那条原则的第一个例外**， 设计侧明确要求往淡走。记清代价： 全 #2B2D31 对玻璃 10.43 AA 通过（原值） 中 #6D747E 对玻璃 3.57 ← 现在用这个，差 0.93 不达 AA 淡 #B3B7BD 对玻璃 1.52 基本不可见，所以「往淡 2 阶」字面上做不到 ⚠️ 四级的代价在这里现形：**3.57 与 10.43 之间是空的。** 十级时还有 5.82 / 9.71 这些档可用，压成四级就没有中间地带了。 要既淡又达标，只有三条路：把字号提到 24px 以上（当小标语不合适）、 往四级里加第五档（破坏「只有四级」）、或者接受这 0.93 的欠账。 现在选的是第三条 —— 它是一句次要标语，不是必读信息。 2026-07-29 再调：字号 12 → 11px，并去掉 34ch 的行宽上限， 改为在右栏里自动换行。行高保持 18px（6 的倍数，踩点阵节距）。 ⚠️⚠️ 这条规则曾经**整条失效过两次**，两次都是注释写坏了，症状一模一样： CSS 里明明写着 11px 和「中」档，浏览器量出来是 15px 和「全」档 —— 因为整条规则没被解析成规则，那句话实际走了通用的 p 规则。 第一次：只写了注释的结束分隔符、漏了开始分隔符。 第二次：**在注释正文里写了字面的分隔符**去解释第一次的错， 那个结束分隔符当场把注释关掉，后面的中文成了游离的 CSS 垃圾， 连着下面这条规则一起被当成选择器吞掉。 规矩：**注释正文里绝不写字面的注释分隔符，一律用文字描述。** （HTML 注释同理，之前也是这么栽的。） build-preview.py 现在会检查这一条。 */ /* 12px / 行高 18px（6 的倍数，踩点阵节距）/ 字重 400 → 300（减一级）。 ⚠️ 字重减轻会**叠加**在已有的对比度欠账上：这句话本来就是「中」档 3.57、 比 AA 差 0.93，字画再细一档，实际可读性比数字看着更弱。 300 这一档 tokens.css 的字重清单里已经有（散文首段在用），不算新增。 */ /* ⚠️ 字间距 2026-08-05 当天试过改成 0，同日又恢复 .05em —— 设计侧的判断是「没间距是真难看」。**别再动它。** （字间距会影响 index.html 里那句标语的硬换行能不能撑住两行， 换算见那边的注释。） */ .mast-tag{font-size:12px;line-height:18px;font-weight:300; letter-spacing:.05em;color:var(--fill);text-align:right;} @media(max-width:900px){ /* 改变量而不是直接写 padding —— 竖线的负外边距是按这两个变量算的， 这里写死 padding 的话，两边就不是一个数了，线会探出去 8px。 */ .mast{--mast-top:28px;--mast-bot:24px;} .mast-copy,.mast-side{grid-column:1/-1;} /* 窄屏是横线分隔、上下堆叠，不存在「撑满高度」的问题， 所以把上面那套负外边距**显式还原**。 只还原 margin-top 不还原 margin-bottom 的话，右栏会比容器多探出 30px。 */ .mast-side{border-left:none;padding-left:0;border-top:1px solid var(--dim); margin-top:36px;margin-bottom:0; padding-top:28px;padding-bottom:0;gap:28px;} } .brand{display:flex;align-items:center;text-decoration:none;border:none;color:var(--text);} /* Yarrow 组合锁定标识。源文件 brand/yarrow_logo_forlight.svg，内联在 index.html 里。 ── 尺寸按 wordmark 的实际比例核算（2026-07-31 换 logo 后重算）── ⚠️ 下面这组数**替换了旧 logo 的那组**（旧的是「总高 180 单位、cap 84 单位 = 46.7%」）。新 logo 的比例完全不同，照抄旧结论会得出错的高度。 新 logo 实测（viewBox 0 0 169 40，用 svgpathtools 解析每条 path 的 bbox）： mark y 0…40 占满全高 大写 Y 的 cap y 6…33.9 27.9 单位 = 总高的 69.8% 小写 x-height 20.2 单位 = 总高的 50.5% mark 右缘 37 / 文字左缘 49，间距 12 单位在 logo 内部 → .brand 不用 gap height:24px 时：Y 的 cap 16.8px、小写 x-height 12.1px。 **新 logo 的 wordmark 比旧的大得多**（69.8% vs 46.7%）， 所以同样的 24px 总高，现在字反而偏大。要往小调的换算表： 24px → cap 16.8px 20px → cap 14.0px 18px → cap 12.6px 16px → cap 11.2px（≈ 旧 logo 在 24px 时的观感） ⚠️ 组合锁定自带 wordmark，字体是第三个家族（几何无衬线）， 与 Azeret Mono + Lexend 并存这件事还没解决。 要退回「mark + 等宽字排 Yarrow」的话，把 #yr-lockup 换成 #yr-mark 并恢复 .brand 的 gap。 */ .brand-lock{height:24px;width:auto;color:var(--text);display:block;} /* 2026-08-01：从 flex 改成 grid —— 见下方 .nav-links 那段的完整推导。 四个链接占第 1/3/5/7 列；语言按钮删除后第 9 列保持为空， 让首页与详情页的四个链接继续落在完全相同的横坐标上。 中间的 fr 列就是可伸缩的间距。 ⚠️ 不能再写 gap：gap 是固定值，会叠加在 fr 之上，把比例弄乱。 间距**全部**由 fr 列承担。 */ .mast-row{display:grid;align-items:start; grid-template-columns:auto 1fr auto 1fr auto 1fr auto 3fr auto;} /* ⚠️⚠️ 每一项**必须显式指定列号**，否则整套失效。 第一版漏了这一步，症状是四个链接完全紧贴（PRODUCTSHOW IT WORKSRESEARCHABOUT）。 原因是我把 fr 当成了「间距」，而它是**列**： grid 的自动摆放会按顺序把项目塞进**下一个可用列**，不会跳过 fr 列。 于是项目会落进连续列 —— 其中第 2、4 列本该是间距却被链接占了， 而真正预备当间距的第 6、8 列反倒空着。链接之间自然一点空隙都没有。 显式放到奇数列之后，偶数列（1fr / 1fr / 1fr / 3fr）才真的空出来当间距， 余量按 6 份分配：三份给组内、三份给组间，比例锁 1:3。 ⚠️ 代价：列号写死了，**加一个导航项就要同时改两处** —— grid-template-columns 加一对「auto 1fr」，这里加一条 nth-of-type。 build-preview.py 已加一道门：链接数与这里的列号数不一致就报错。 */ .nav-links a:nth-of-type(1){grid-column:1;} .nav-links a:nth-of-type(2){grid-column:3;} .nav-links a:nth-of-type(3){grid-column:5;} .nav-links a:nth-of-type(4){grid-column:7;} /* .mast-row .nav-links 的 flex 规则已删 —— 现在 .nav-links 是 display:contents， 它自己不再是布局项，flex/min-width 对它没有意义。 */ /* margin-left:auto 已撤 —— 组间距现在由 3fr 那一列给，比例才锁得住。 auto 会把余量一把吃掉，fr 的比例就失效了。 ⚠️ 列号同样必须显式写，理由见上面 .nav-links a 那段。 */ .mast-row .nav-right{grid-column:9;justify-self:end;} @media(max-width:560px){ /* 窄屏挤不下同一行，按钮换到下一行靠左 */ .mast-row{flex-direction:column;gap:18px;} .mast-row .nav-right{justify-content:flex-start;} } /* 两端对齐撑满栏宽 —— 从参照搬来的手法。text-align 只管非末行， 单行要靠 text-align-last 才会被撑开，两条都要写。 */ /* ── 2026-08-01：撤掉两端对齐，改 flex + 固定 gap ───────────────────── 设计侧要的是「导航读成一组，语言切换是独立的一件」。 **两端对齐做不到这件事** —— 它把链接撑满容器宽度， 间距由容器有多宽决定，不由我定；容器越宽，链接反而越散。 要让它们靠紧成一组，就必须先不再撑满。 原来那条是照 craft.wild.as 那两行被撑开的小标签做的， CSS 里当时就标了「这是我的判断、不是你明说的，不想要就删这两行」—— 现在删了。 gap 18px = 3 个点阵格：比两端对齐时窄得多，但 10.5px + .14em 字距下仍不挤。 语言按钮那边用 margin-left:auto 顶到最右，两组之间的空白最大化。 ⚠️ 一个实测结论**保留下来**，虽然对应的写法已经不需要了： Chrome 会拉伸 U+00A0（不换行空格）。当时的现象是 "HOW IT WORKS" 词间距被撑到极宽，420px 容器里自然宽 94px 的词被撑满整行。 CSS Text 规范说 NBSP 不是换行机会、不该参与两端对齐，**Chrome 不按这条做**。 当时的解法是给每个链接 display:inline-block（原子行内盒， 两端对齐算法不往它内部塞空间）。现在没有两端对齐了，这个workaround 撤掉， 但那条「别照规范推、要在浏览器里量」的教训比 workaround 本身值钱。 HTML 里的   留着，作用只剩「保证 HOW IT WORKS 不被拆到两行」。 */ /* ══ 2026-08-01 第二版：两处间距都改成流体，比例锁 1 : 3 ══════════════ 设计侧要求：组内与组间都自适应，且组内 < 组间，比例由我定。 ⚠️ **只有 Grid 的 fr 能做到这件事**，试过的另两条路都不行： flex 的 gap 是固定长度，不吃余量 —— 只能靠媒体查询一档档写死 margin:auto 会把余量**均分**给所有 auto —— 得到 1:1，做不出比例 做法：把 .mast-row 变成 grid，四个链接和语言按钮都是它的直接网格项， 之间用 fr 列当「可伸缩的间距」： auto 1fr auto 1fr auto 1fr auto 3fr auto 链接1 g 链接2 g 链接3 g 链接4 3g 语言 fr 总量 6 份，所以组内 = 余量/6、组间 = 余量/2，**比例恒定 1:3**， 而且两端仍然分别贴住右栏的左右边缘（这是 margin:auto 那版的优点，保住了）。 ── 比例为什么取 1:3 ──────────────────────────────────────────────── 不是随手定的。1440 视口下余量 206.7px，算出组内 34.5 / 组间 103.3 —— 几乎正好等于设计侧上一轮已经认可的那组 36 / 98。 也就是说 1:3 是**对着已被接受的观感反推出来的**，不是凭感觉挑的数。 1:2 是分组能被察觉的下限，1:3 让它没有歧义。 ── 实际取值（用 fontTools 量的真实链接宽度：四项合计 273.7px， 语言按钮 48.6px，固定占用 322.3px）──────────────────────────── 视口 右栏可用 余量 组内 组间 1920 729 407 67.8px 203.4px 1600 595 273 45.5px 136.4px 1440 529 207 34.5px 103.3px 1280 462 140 23.3px 69.9px 1100 387 65 10.8px 32.4px ⚠️ fr 永远不会变负 —— 空间不够时它收缩到 0，**所以不可能溢出**。 这比上一版的固定 gap + flex-wrap 稳：那版在 1100 以下会溢出， 要靠换行兜底。现在是自然收窄。 940px 以下 auto 列本身就装不下了，但 900px 那条媒体查询会改成上下堆叠， 中间那 40px 的窗口可以不管。 ⚠️