/* ══════════════════════════════════════════════════════════════════ 悟垣字标锁版 —— 照抄自《悟垣设计系统手册 v1.7》, 一个字没改。 依赖 wutrix-tokens.css。 顶栏(base.html)用的是 v1.7 新增的**横版** .wx-lockup--row: 字标 + 中文名 + 一道细竖线 + 拉丁名排成一行。登录页(login.html)是方形位, 仍用叠排。 要改比例只动 --lk 一个值, 其余全部由它推导 —— **不要单独调其中任何一项**, 调了就不是这套字标了。 浅底上「wutrix」那半的颜色不在这里、也不在语义层改: 手册 v1.7 把它收成 token --wx-lockup-master(深底金、浅底墨), tokens.css 的浅色块里切换。 本仓库对它做的唯一偏离(写在 base.html 里, 不在这个文件): 净空那条 padding/负 margin 没有启用。它的用意是「留出净空但不改变视觉 位置」, 可在 flex 顶栏里, 负 margin 会把第一个元素往左拽出容器内边距。 顶栏靠自身的 padding(24px)和 gap(32px)已经满足 .4×--lk 的净空要求。 ══════════════════════════════════════════════════════════════════ */ /* 悟垣字标锁版 —— 品牌名称的唯一实现 依赖 brand/tokens.css。两个仓库共用。 构成：[字标] + [中文名] + [拉丁名] 悟垣·天枢 │ wutrixflow ← 横版（默认，宽位） └图标┘ └中文┘ └─拉丁─┘ 四种形态，各有位置，别混用： 横版 .wx-lockup--row 宽位默认：页头、页脚、文档抬头、幻灯标题 叠排 .wx-lockup 方形位：卡片、头像角落；中文一行拉丁一行 竖排 .wx-lockup--stack 正方位：加载页、头像 简版 .wx-lockup--inline 只限净高不足 40px 的横条（导航） 三个字标名一律连写，不加空格：wutrixstory / wutrixstudio / wutrixflow / wutrixcolor。前半 wutrix 用品牌金，后半产品名用产品色 —— 这一笔颜色分割就是「母品牌 + 子品牌」的全部表达，不要再加符号或连字符。 */ .wx-lockup{ --lk: 44px; /* 唯一尺寸旋钮：字标边长。其余全部由它推导 */ display: inline-flex; align-items: center; gap: calc(var(--lk) * .25); /* 图标与文字的间距 = 边长 × 0.25 */ line-height: 1; white-space: nowrap; } .wx-lockup__mark{ width: var(--lk); height: var(--lk); flex: none; display: block; } .wx-lockup__text{ display: flex; flex-direction: column; gap: calc(var(--lk) * .07); } /* 中文 —— 思源宋 900（Black），不是 700。字距 .13em 是定值。 用 900 的理由见 tokens.css 里 --wx-lockup-cn-weight 的注释：700 的横画在 44px 锁版下只有 0.75 CSS px，抗锯齿会把它抹成灰，整行发虚。 **网页要记得把 900 这一档也加进字体请求**，只请求 700 的话浏览器会用 合成加粗顶上，那个假粗会把宋体的横细竖粗全糊掉，比不加粗还难看。 末字后必须补等量负 margin：letter-spacing 会在最后一个字后面也加一份， 不抵掉的话中英之间会比规格宽出 .13em，是这套字标最常见的翻车点。 */ .wx-lockup__cn{ font-family: var(--wx-font-display-cn); font-weight: var(--wx-lockup-cn-weight); font-size: calc(var(--lk) * .43); letter-spacing: var(--wx-lockup-cn-ls); margin-right: calc(var(--wx-lockup-cn-ls) * -1); color: var(--wx-paper); } /* 分隔点 —— 定宽字身，不交给字体去排。 U+00B7 在不同中文字体里字身宽度差一倍以上：思源宋是 .335em 的比例字身， 而 Songti SC / SimSun 一类把它做成 1em 全角字身，点两侧各自带 .39em 空白。 直接排出来的话，点两侧的墨色间隙实测 .24em（思源宋）到 .55em（全角字身）， 而汉字之间只有 .16em —— 点会浮在中间，字标断成两截。 解法是把它塞进一个 .30em 的定宽盒子里居中：字身比盒子宽就向两侧等量溢出， 点始终落在盒子正中，间距于是与字体无关。实测两侧墨隙 .10–.14em， 比汉字间距略紧 —— 点的墨量小，排得和汉字一样松会显得更散。 width 用 inline-flex + justify-content 而不是 text-align：内容比盒子宽时 Chromium 的 text-align:center 会退回左对齐，居中不生效。 */ .wx-lockup__sep{ display: inline-flex; justify-content: center; width: .30em; letter-spacing: 0; /* 去掉点后面那一份字距 */ margin-right: .04em; margin-left: calc(.04em - var(--wx-lockup-cn-ls)); /* 抵掉前一字尾部的字距，两侧才等宽 */ opacity: .40; } /* 拉丁 —— Sora 700，连写 */ .wx-lockup__lat{ font-family: var(--wx-font-display-en); font-weight: 700; font-size: calc(var(--lk) * .31); /* 叠排的天花板。拉丁在中文下面，宽度被中文的 90px 卡死： .303 时 wutrixstudio 与中文等宽，.31 出头 1.9px 肉眼看不出， .32 出头 5px 就能看出来。想要更大的英文，用横版。 */ letter-spacing: .005em; } .wx-lockup__lat b{ color: var(--wx-lockup-master); font-weight: inherit; } /* wutrix：深底金、浅底墨 */ .wx-lockup__lat i{ color: var(--wx-pc-text); font-style: normal; } /* 产品名 */ /* 垂直居中要对墨，不对行框。 flex 的 align-items:center 居中的是行框，而字体的上升/下降部空间不对称 （思源宋 hhea 1.151 / .286，Sora .97 / .29），行框中心和字的视觉中心不重合： 实测 44px 下中文低 0.7px，拉丁的 x 高带在 64px 下低 1.0px；横版里 flex 几何 居中的竖线反而是唯一真居中的 —— 看起来像线偏高，其实是两边的字偏低。 修正后 44 / 64 两档全部落在 ±0.4px 内。数值是对着思源宋 + Sora 量的， 换回退字体偏差会变但方向一致，这个量级不会把它推反。 */ .wx-lockup__cn{ transform: translateY(-.02em); } .wx-lockup__lat{ transform: translateY(-.025em); } /* 横版 —— 宽位的默认形态。一行排，中英是并列的两个名字，中间一道细线做接缝。 标记： … 悟垣·天枢 wutrixflow 为什么要有它：叠排里拉丁被中文宽度卡在 .31lk。横版把这个约束整个拆掉， 拉丁到 .40lk，和中文接近对等 ——「英文有点小」在它真正出现的宽位上解掉， 而不是在叠排里硬挤。 竖线：1px，高 .36lk（≈ 拉丁大写高），透明度 .34，两侧各 .09lk。 .09 是按墨量量出来的：44px 时两侧真实墨隙 4.5px，64px 时 6.5px。 .07 在 28px 下限只剩 2.3px 会和字粘上，.12 又开始松。 **线的两侧距离必须单独给，不能靠父级 gap。** flex 的 gap 对每一对相邻元素 都生效，会悄悄把线两侧各撑出一份 .25lk，看着像线泡在洞里 —— 定稿时真踩过。 */ .wx-lockup--row .wx-lockup__text{ flex-direction: row; align-items: center; gap: 0; } .wx-lockup--row .wx-lockup__lat{ font-size: calc(var(--lk) * .40); } .wx-lockup__rule{ width: 1px; height: calc(var(--lk) * .36); flex: none; background: var(--wx-paper); opacity: .34; margin: 0 calc(var(--lk) * .09); } /* 竖排：图标在上，文字居中。用于正方位（头像、加载页） */ .wx-lockup--stack{ flex-direction: column; gap: calc(var(--lk) * .22); } .wx-lockup--stack .wx-lockup__text{ align-items: center; gap: calc(var(--lk) * .1); } .wx-lockup--stack .wx-lockup__cn{ margin-right: 0; } /* 居中时负 margin 会把整行拉偏 */ /* 单行简版 —— 只用于净高不足 40px 的横条（导航条、工具栏、页脚一行）。 为什么要有这一档：正式锁版是中文一行、拉丁一行。塞进 54px 高的导航条时 --lk 只能给到 32px，中文就掉到 13.8px —— 那个尺寸下宋体的横画连 900 都画 不出来（见 tokens.css 里 --wx-lockup-cn-weight 的实测）。硬塞的结果是中文 糊成一团灰，不如不要。 所以简版换一套逻辑：单行、拉丁领读、中文作注，中文改用界面字体而不是宋体。 这跟导航里产品胶囊的写法（story 启明 / studio 成象）是同一种处理， 整条导航于是只有一种中英关系，而不是两种。 **简版只在这类窄条里用。** 首屏、应用商店、合同、OG 图、任何"正式露出" 一律用正式锁版 —— 那些位置有的是高度，没有理由降级。 */ .wx-lockup--inline{ align-items: center; } .wx-lockup--inline .wx-lockup__text{ flex-direction: row; align-items: baseline; gap: calc(var(--lk) * .25); } .wx-lockup--inline .wx-lockup__lat{ order: 1; font-size: calc(var(--lk) * .56); } .wx-lockup--inline .wx-lockup__cn{ transform: none; /* 简版中文不是宋体，上面的垂直修正不适用 */ order: 2; font-family: var(--wx-font-body); /* ← 不是宋体。这一档的中文太小，宋体撑不住 */ font-weight: 600; font-size: calc(var(--lk) * .41); letter-spacing: .05em; margin-right: -.05em; /* 老规矩：中文字距的最后一份要抵掉 */ opacity: .62; } /* 简版整体不许折行 —— 中文两字之间是可断点，不锁的话「悟垣」会被拆成两行。 这条在官网导航上真的踩过。 */ .wx-lockup--inline{ white-space: nowrap; flex: none; } /* 只有母标时：没有产品名，中文就是「悟垣」，拉丁全金 */ .wx-lockup--master .wx-lockup__lat i{ display: none; } /* 净空 —— 四周留不小于字标边长的 40%。这是硬下限，不是建议值。 */ .wx-lockup{ padding: calc(var(--lk) * .4); margin: calc(var(--lk) * -.4); } /* 最小尺寸 横版、叠排 --lk 不得小于 28px：再小中文的宋体横画会断，横版的竖线两侧也只剩 2.9px。 竖排不得小于 40px。低于下限时只用字标，不带文字。 */