改「依次落位」而非「同落不同程」 * 345 * 0 * * * *

...

* * *

*/ /* ================================================================== 一 · 尺度体系三条互不干扰的轨道，分别对应三类需求：轨道 A「版面字号」.f-N —— 后缀 = 1920 设计稿 px，clamp 夹住上下限轨道 B「正文字号」.mo-txt-* —— 固定档位，可读性优先，不随视口缩放轨道 C「版面节奏」--u / --sp-* —— 区块留白、内边距轨道 D「控件尺度」--ctl* —— 独立的 clamp，带 44px 触控下限关键判断：凡是"有物理下限"的东西（按钮、圆角、正文），都不能跟着版面一起缩。 ================================================================== */ :root { /* ---------- 轨道 C：版面节奏基准 ---------- 原站：html{font-size:5.20833vw}，即 1rem = 100px @1920，于是 .f-140 就是 1.4rem。这里保留"1 单位 = 100px @1920"的语义，但把缩放区间钳在 1280–1920：超出上限（2560 屏）定格，低于下限（笔记本/平板）也定格，不再继续缩。 */ --u: clamp(66.6667px, 5.20833vw, 100px); /* 间距阶梯（后缀 = 1920 设计稿 px），走 --u，用于区块留白与版面节奏 */ --sp-4: calc(4 * var(--u) / 100); --sp-8: calc(8 * var(--u) / 100); --sp-12: calc(12 * var(--u) / 100); --sp-16: calc(16 * var(--u) / 100); --sp-20: calc(20 * var(--u) / 100); --sp-24: calc(24 * var(--u) / 100); --sp-32: calc(32 * var(--u) / 100); --sp-40: calc(40 * var(--u) / 100); --sp-48: calc(48 * var(--u) / 100); --sp-60: calc(60 * var(--u) / 100); --sp-80: calc(80 * var(--u) / 100); --sp-100: calc(100 * var(--u) / 100); --sp-120: calc(120 * var(--u) / 100); --sp-160: calc(160 * var(--u) / 100); --sp-200: calc(200 * var(--u) / 100); /* ---------- 轨道 D：控件尺度 ---------- 原站把按钮/圆钮也挂在 1rem 上，手机上会缩到 26px，点不中。这里独立 clamp，把下限钉在 44px（触控目标最小值）。 */ --ctl: clamp(44px, 4.375vw, 84px); /* 圆形钮直径：84px @1920 */ --ctl-btn-h: clamp(44px, 2.6042vw, 50px); /* 按钮最小高度：50px @1920，下限即触控目标 */ --ctl-pad-x: clamp(16px, 1.5625vw, 30px); --ctl-pad-y: clamp(10px, 0.7292vw, 14px); --ctl-font: clamp(14px, 0.7813vw, 15px); --ctl-radius: clamp(8px, 0.6250vw, 12px); /* 圆角阶梯：同样带下限，避免手机上 24px 圆角缩成 6px */ --rd-xs: clamp(6px, 0.4167vw, 8px); --rd-sm: clamp(8px, 0.5208vw, 10px); --rd-md: clamp(10px, 0.6250vw, 12px); --rd-lg: clamp(12px, 0.8333vw, 16px); --rd-xl: clamp(16px, 1.2500vw, 24px); --rd-2xl: clamp(20px, 1.6667vw, 32px); --rd-pill: 999px; /* ---------- 轨道 B：正文字号 ---------- 正文不做流体缩放。15px 在 375 屏和 1920 屏上都是对的，让它随视口变化只会制造可读性问题（原站在这里靠 portrait 分支硬写死 55px 才勉强兜住）。 */ --txt-xs: 12px; /* 标签、脚注、法务 */ --txt-sm: 13px; /* 次要说明 */ --txt-md: 15px; /* 正文默认 */ --txt-lg: 17px; /* 导语 */ --txt-xl: 20px; /* 小标题 */ --txt-2xl: 24px; /* 卡片标题 */ /* ---------- 动效：全站唯一曲线，直接取自原站 ---------- */ --ease: cubic-bezier(.38, 0, 0, 1); /* 快出慢停，微交互到入场通用 */ --ease-menu: cubic-bezier(.43, .195, .02, 1); /* 幕布类整屏位移 */ --d-fast: .3s; --d-base: .5s; --d-slow: .8s; /* ---------- 字号语义（可被宿主页面覆盖） ---------- */ --mo-font-black: var(--font-black, inherit); --mo-font-bold: var(--font-bold, inherit); --mo-font-medium: var(--font-medium, inherit); --mo-font-light: var(--font-light, inherit); --mo-font-regular: var(--font-regular, inherit); } /* 逃生舱：需要原站那种完全等比行为时，给加 pure-vw。特异性高于 :root，无需 !important。 */ html.pure-vw { --u: 5.20833vw; } /* ---------- 轨道 A：版面字号 .f-N ---------- 公式：clamp(手机下限, N * 0.0520833vw, N px) ——— 0.0520833vw = N px @1920；上限保证大屏定格；下限保证手机不溢出。 N = 1920 设计稿上的字号。用于标题与巨字，不要用于正文。 */ .f-300 { font-size: clamp(72px, 15.6250vw, 300px); letter-spacing: -.03em; } .f-260 { font-size: clamp(64px, 13.5417vw, 260px); letter-spacing: -.03em; } .f-240 { font-size: clamp(60px, 12.5000vw, 240px); letter-spacing: -.03em; } .f-220 { font-size: clamp(56px, 11.4583vw, 220px); letter-spacing: -.03em; } .f-200 { font-size: clamp(52px, 10.4167vw, 200px); letter-spacing: -.03em; } .f-180 { font-size: clamp(48px, 9.3750vw, 180px); letter-spacing: -.03em; } .f-160 { font-size: clamp(44px, 8.3333vw, 160px); letter-spacing: -.03em; } .f-140 { font-size: clamp(40px, 7.2917vw, 140px); letter-spacing: -.03em; } .f-120 { font-size: clamp(36px, 6.2500vw, 120px); letter-spacing: -.03em; } .f-100 { font-size: clamp(32px, 5.2083vw, 100px); letter-spacing: -.03em; } .f-90 { font-size: clamp(30px, 4.6875vw, 90px); letter-spacing: -.03em; } .f-80 { font-size: clamp(28px, 4.1667vw, 80px); letter-spacing: -.03em; } .f-70 { font-size: clamp(26px, 3.6458vw, 70px); letter-spacing: -.03em; } .f-64 { font-size: clamp(24px, 3.3333vw, 64px); letter-spacing: -.03em; } .f-60 { font-size: clamp(24px, 3.1250vw, 60px); letter-spacing: -.03em; } /* 以下保留是为了兼容从原站直接搬过来的类名；新写正文请用 .mo-txt-* */ .f-56 { font-size: clamp(22px, 2.9167vw, 56px); letter-spacing: -.02em; } .f-48 { font-size: clamp(20px, 2.5000vw, 48px); letter-spacing: -.02em; } .f-40 { font-size: clamp(18px, 2.0833vw, 40px); letter-spacing: -.02em; } .f-36 { font-size: clamp(17px, 1.8750vw, 36px); letter-spacing: -.02em; } .f-32 { font-size: clamp(16px, 1.6667vw, 32px); letter-spacing: -.02em; } .f-30 { font-size: clamp(15px, 1.5625vw, 30px); } .f-28 { font-size: clamp(15px, 1.4583vw, 28px); } .f-24 { font-size: clamp(14px, 1.2500vw, 24px); } .f-20 { font-size: clamp(13px, 1.0417vw, 20px); } /* ---------- 轨道 B：正文字号 ---------- */ .mo-txt-xs { font-size: var(--txt-xs); } .mo-txt-sm { font-size: var(--txt-sm); } .mo-txt-md { font-size: var(--txt-md); } .mo-txt-lg { font-size: var(--txt-lg); } .mo-txt-xl { font-size: var(--txt-xl); } .mo-txt-2xl { font-size: var(--txt-2xl); } /* ---------- 字重语义（原站 word_h/b/m/l/r 的等价物） ---------- */ .word_h { font-family: var(--mo-font-black); font-weight: 900; } .word_b { font-family: var(--mo-font-bold); font-weight: 700; } .word_m { font-family: var(--mo-font-medium); font-weight: 500; } .word_l { font-family: var(--mo-font-light); font-weight: 300; } .word_r { font-family: var(--mo-font-regular); font-weight: 400; } /* 字距 */ .mo-track-tight { letter-spacing: -.03em; } .mo-track-normal { letter-spacing: 0; } .mo-track-wide { letter-spacing: .08em; } /* ---------- 布局原语（原站 fxc / fxb / fxs，全站组件都靠这三个） ---------- */ .fxc { display: flex; align-items: center; justify-content: center; } .fxb { display: flex; align-items: center; justify-content: space-between; } .fxs { display: flex; align-items: center; justify-content: flex-start; } /* ================================================================== 二 · 动效原语样式原站用 GSAP 承担了"什么时候加类"，但 90% 的效果其实只是类切换。这里把效果留在 CSS（transition），把时机留给 JS（IntersectionObserver）， GSAP 只保留给真正需要逐帧插值的 scrub 视差。 ================================================================== */ :root { /* 动效专属 token，默认从宿主页面的既有变量链里取，零配置即可适配 */ --mo-accent: var(--accent, var(--blue, #e60008)); --mo-accent-deep: var(--accent-deep, var(--blue-d, #ad0006)); --mo-on-accent: #fff; --mo-surface: var(--surface, #fff); --mo-ink: var(--ink, #1a1a1a); --mo-panel: var(--board, var(--paper, #fff)); --mo-mask: rgba(0, 0, 0, .5); /* 占位底色原来写死 rgba(0,0,0,.06)——只在浅底上看得见；深色方案（本页默认配色的底色是近黑）下叠 6% 的黑等于没有，加载态形同不存在。改成从 --ink 派生，和上面几个 --mo-* 一样带兜底值。 */ --mo-placeholder: color-mix(in srgb, var(--ink, #1a1a1a) 8%, transparent); --mo-z: 200; } /* ---------- 原语 1：mask 填充按钮 ---------- 原站在 HTML 里手写，这里用 ::before 生成，少了 1 个 DOM 节点也就不可能漏写。 overflow:hidden 是必需的，不能省：::before 停在 translateX(-102%)，没有裁剪就会画到按钮外面去（原站的 .layer-btn 也有这条）。 */ .mo-btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: var(--ctl-btn-h); padding: var(--ctl-pad-y) var(--ctl-pad-x); border: 0; border-radius: var(--ctl-radius); background: var(--mo-surface); color: var(--mo-ink); font: inherit; font-size: var(--ctl-font); font-weight: 700; cursor: pointer; transition: color var(--d-base) var(--ease); } .mo-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--mo-accent); transform: translateX(-102%); transition: transform .6s var(--ease); } .mo-btn:focus-visible { outline: 2px solid var(--mo-accent); outline-offset: 2px; } /* 实心变体：对应原站的 .layer-btn.fill */ .mo-btn--fill { background: var(--mo-accent); color: var(--mo-on-accent); } .mo-btn--fill::before { background: var(--mo-accent-deep); } /* ---------- 原语 2：圆形图标按钮 ---------- */ .mo-cir { position: relative; isolation: isolate; overflow: hidden; display: inline-grid; place-items: center; width: var(--ctl); height: var(--ctl); border: 0; border-radius: 50%; background: var(--mo-surface); color: var(--mo-ink); font-size: var(--ctl-font); cursor: pointer; transition: color var(--d-base) var(--ease); } .mo-cir::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--mo-accent); transform: translateX(-102%); transition: transform .6s var(--ease); } .mo-cir--right::before { transform: translateX(102%); } /* 反向入场，对应 .rightMv */ .mo-cir:focus-visible { outline: 2px solid var(--mo-accent); outline-offset: 2px; } /* 填充态：hover（仅精确指针）/ 键盘聚焦 / .is-on 常驻。原站把 :hover 和 :focus 混在一起写，结果触屏上会残留 hover 态。 */ @media (hover: hover) and (pointer: fine) { .mo-btn:hover::before, .mo-cir:hover::before { transform: none; } .mo-btn:hover, .mo-cir:hover { color: var(--mo-on-accent); } } .mo-btn:focus-visible::before, .mo-cir:focus-visible::before, .mo-btn.is-on::before, .mo-cir.is-on::before { transform: none; } .mo-btn:focus-visible, .mo-cir:focus-visible, .mo-btn.is-on, .mo-cir.is-on { color: var(--mo-on-accent); } /* ---------- 原语 3 & 4：入场与逐级编排 ---------- 全部初始隐藏态包在 @media (scripting: enabled) 里。浏览器不支持该特性时不匹配 → 整块被丢弃 → 内容直接可见，不会白屏。原站没有这层保护：脚本一报错，.scroll-animate 就永远 visibility:hidden。 */ @media (scripting: enabled) { /* --- 3. 单元素入场 --- */ .mo-enter { opacity: 0; transform-origin: 0 50%; transition: opacity var(--d-slow) var(--ease) var(--mo-delay, 0s), transform 1.2s var(--ease) var(--mo-delay, 0s); will-change: opacity, transform; } /* 默认 = 3D 揭幕，对应原站的 .alanFn（perspective + rotateY 翻入） */ .mo-enter[data-mo-enter="flip"] { transform: perspective(260px) rotateY(-32deg) translateX(-.06em); } .mo-enter[data-mo-enter="up"] { transform: translateY(.4em); } .mo-enter[data-mo-enter="down"] { transform: translateY(-.4em); } .mo-enter[data-mo-enter="right"]{ transform: translateX(.4em); } .mo-enter[data-mo-enter="fade"] { transform: none; } .mo-enter.is-go { opacity: 1; transform: none; } /* --- 4. 逐级编排 --- 原站用「位移递增、同时落位」伪造层次：nth-child(n) 位移 (n+1)*10%，读到的是"一起到达、各自走不同距离"。这里保留这个默认观感，另给 data-mo-stagger="delay" 用真正的时间差（依次落位），两者可按区块混用。 */ .mo-stagger > * { opacity: 0; transition: opacity var(--d-slow) var(--ease), transform .9s var(--ease); will-change: opacity, transform; } /* 位移递增模式（默认）注意：这里不能写 :not([data-mo-stagger="delay"])。属性选择器会把权重抬到 (0,3,0)，压过下面 .mo-stagger.is-go > * 的 (0,2,0)，导致入场元素永远停在位移后的位置、无法归位。改用「基础规则权重更低 + 靠源序覆盖」：delay 变体带属性选择器，自然胜出。 */ .mo-stagger > :nth-child(1) { transform: translateY(12%); } .mo-stagger > :nth-child(2) { transform: translateY(20%); } .mo-stagger > :nth-child(3) { transform: translateY(28%); } .mo-stagger > :nth-child(4) { transform: translateY(36%); } .mo-stagger > :nth-child(5) { transform: translateY(44%); } .mo-stagger > :nth-child(6) { transform: translateY(52%); } .mo-stagger > :nth-child(7) { transform: translateY(60%); } .mo-stagger > :nth-child(8) { transform: translateY(68%); } .mo-stagger > :nth-child(9) { transform: translateY(76%); } .mo-stagger > :nth-child(n+10) { transform: translateY(84%); } /* 时间差模式：位移统一，层次交给 transition-delay */ .mo-stagger[data-mo-stagger="delay"] > * { transform: translateY(.4em); } .mo-stagger[data-mo-stagger="delay"] > :nth-child(1) { transition-delay: 0ms; } .mo-stagger[data-mo-stagger="delay"] > :nth-child(2) { transition-delay: 70ms; } .mo-stagger[data-mo-stagger="delay"] > :nth-child(3) { transition-delay: 140ms; } .mo-stagger[data-mo-stagger="delay"] > :nth-child(4) { transition-delay: 210ms; } .mo-stagger[data-mo-stagger="delay"] > :nth-child(5) { transition-delay: 280ms; } .mo-stagger[data-mo-stagger="delay"] > :nth-child(6) { transition-delay: 350ms; } .mo-stagger[data-mo-stagger="delay"] > :nth-child(7) { transition-delay: 420ms; } .mo-stagger[data-mo-stagger="delay"] > :nth-child(8) { transition-delay: 490ms; } .mo-stagger[data-mo-stagger="delay"] > :nth-child(9) { transition-delay: 560ms; } .mo-stagger[data-mo-stagger="delay"] > :nth-child(n+10) { transition-delay: 630ms; } .mo-stagger.is-go > * { opacity: 1; transform: none; } /* 容器内不想参与编排的子项（标题、装饰等） */ .mo-stagger > [data-mo-static] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---------- 原语 5：数字滚动 ---------- */ .mo-count { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ---------- 原语 6：浮层 ---------- 原站只做了显隐，没有 role / aria / 焦点管理 / Esc，这里全部由 kit 的 JS 自动补齐，标记侧不用写任何 aria。 */ .mo-layer { position: fixed; inset: 0; z-index: var(--mo-z); visibility: hidden; pointer-events: none; transition: visibility 0s linear var(--d-base); } .mo-layer.is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; } .mo-layer__mask { position: absolute; inset: 0; background: var(--mo-mask); backdrop-filter: blur(.1rem); opacity: 0; transition: opacity var(--d-base) var(--ease); } .mo-layer.is-open .mo-layer__mask { opacity: 1; } .mo-layer__panel { position: absolute; left: var(--mo-layer-gap, 32px); right: var(--mo-layer-gap, 32px); bottom: 0; max-height: calc(100% - var(--mo-layer-gap, 32px)); overflow: auto; overscroll-behavior: contain; border-radius: var(--rd-xl) var(--rd-xl) 0 0; background: var(--mo-panel); opacity: 0; transform: translateY(50px); transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease); } .mo-layer.is-open .mo-layer__panel { opacity: 1; transform: none; } .mo-layer__panel:focus { outline: none; } .mo-layer--full .mo-layer__panel { left: 0; right: 0; max-height: 100%; border-radius: 0; } /* 关闭钮必须是 .mo-layer 的直接子元素，不能放进 .mo-layer__panel 里面。面板是滚动容器，绝对定位的子元素会随内容一起滚走，关闭钮就点不到了。放在 layer 上则相对固定层定位，滚动时始终可见。 */ .mo-layer__close { position: absolute; top: calc(var(--mo-layer-gap, 32px) + 12px); right: calc(var(--mo-layer-gap, 32px) + 12px); z-index: 3; } /* 滚动锁（Lenis 可用时由 JS 调 lenis.stop()，这条是无 Lenis 时的兜底） */ html.mo-lock, html.mo-lock body { overflow: hidden; } /* ---------- 原语 7：背景图 + 懒加载 ---------- */ .mo-pic { background-position: 50%; background-repeat: no-repeat; background-size: cover; } /* 加载中：占位底色。JS 改成"成功才加 .is-loaded"之后，这条才真的只在加载期生效。 */ .mo-pic[data-mo-src]:not(.is-loaded) { background-color: var(--mo-placeholder); } /* 加载失败：保留占位底色，再叠一层斜纹。图挂了如果什么都不显示，读者看到的是一块和页面同色的空板，会以为整个页面坏了；有斜纹至少能判断出"是这张图没出来"。用 CSS 画，不引入新图片、不占网络。这里用裸 px 是故意的：纹理不该跟着视口缩放，属于"除 1px 描边外不写裸 px"的正当例外。 */ .mo-pic.is-failed { background-image: repeating-linear-gradient( -45deg, transparent 0 10px, color-mix(in srgb, var(--ink, #1a1a1a) 7%, transparent) 10px 20px ); } /* ================================================================== 三 · 无障碍降级原站缺失这一整块。这里只关掉"位移与自动播放"，保留颜色/透明度反馈——否则 hover 与 focus 会变得没有任何响应。 ================================================================== */ @media (prefers-reduced-motion: reduce) { @media (scripting: enabled) { .mo-enter, .mo-stagger > * { opacity: 1; transform: none; transition: none; } } .mo-btn::before, .mo-cir::before { transition: none; } .mo-layer__panel { transform: none; transition: opacity .2s linear; } [class*="mo-"] { animation: none !important; } }

单元素入场，默认 3D 揭幕 *