/* ============================================================================ MIVELAR DESIGN TOKENS — "Berlin Dusk / 柏林暮色" 版本 v1.0 · Phase 2 交付 · Phase 3 原型构建师直接消费 ---------------------------------------------------------------------------- 体系组合： Warm Editorial（Editorial Monocle 骨架 + Soft Warm 的「光」层） × Bugatti（暗铜金 · 材质崇拜 · 极慢） × Tech Utility 的三个原子（1px hairline / tabular-nums / compact list） 品类张力调和的技术翻译： 光的属性是暖的（2700K、低饱和、柔渐变） → Soft Warm 只取这一层 形的属性是硬的（直角、细线、冷峻留白） → Soft Warm 的圆角/圆润字体全部丢弃 ---------------------------------------------------------------------------- 对比度说明：所有 ratio 为 WCAG 2.1 相对亮度法实测值（sRGB）。 ✅ = 达标 ⚠️ = 仅限指定用途 ❌ = 禁止 正文门槛 4.5:1 / 大字(≥24px 常规 或 ≥18.66px 粗体)与 UI 组件门槛 3:1 ============================================================================ */ :root { /* ========================================================================== 1. COLOR — INK（暗轴 · 品牌炭黑，占比 50%） ========================================================================== */ --c-ink-1000: #0A0A0A; /* oklch(14.5% 0.000 90) · Age Gate / Cookie 条 / 最深层 */ --c-ink-900: #0E0E0E; /* oklch(16.4% 0.000 90) · 下拉 / sheet / focus 垫底 */ --c-ink-800: #1A1A1A; /* oklch(21.8% 0.000 90) · ★品牌炭黑，全站页面底色 */ --c-ink-700: #242320; /* oklch(25.6% 0.006 92) · 抬升面：卡片 / Header scrolled */ --c-ink-600: #2E2C28; /* oklch(29.4% 0.008 85) · hover 面 / shimmer 高光 */ --c-ink-500: #3A3733; /* oklch(33.8% 0.008 75) · 装饰性细线（1.47:1，纯装饰） */ --c-ink-400: #4A463F; /* oklch(39.6% 0.013 82) · 强分隔线（2.06:1 on ink900，装饰） */ /* ========================================================================== 2. COLOR — CREAM（暖米白轴 · 占比 40% · 反色节奏断点专用） ========================================================================== */ --c-cream: #F5F0E8; /* oklch(95.7% 0.012 80) · ★品牌暖米白（S6 / K4 通栏） */ --c-cream-raised: #FBFAF6; /* oklch(98.5% 0.005 95) · 反色区卡片抬升 */ --c-cream-sunken: #EAE3D6; /* oklch(91.8% 0.019 83) · 反色区凹陷 / 输入框底 */ --c-cream-line: #DCD5C8; /* oklch(87.5% 0.019 83) · 反色区装饰细线（1.29:1） */ /* ========================================================================== 3. COLOR — BRONZE（暗铜金 · 唯一点缀色 · 占比 ≤10%） ★★★ 三条硬边界，Phase 3 必须遵守，见文件末尾「BRONZE SAFETY」注释 ★★★ ========================================================================== */ --c-bronze: #8B6F47; /* oklch(55.9% 0.066 76) · ★品牌暗铜金 on #1A1A1A = 3.70:1 ⚠️ 大字/边框/UI 可用，正文 ❌ on #F5F0E8 = 4.15:1 ⚠️ 同上（仍差 0.35 到 4.5） on #0A0A0A = 4.21:1 ⚠️ 同上 */ --c-bronze-lift: #C79A5B; /* oklch(71.5% 0.097 74) · 暗底「正文强调」替代色 on #1A1A1A = 6.80:1 ✅ 全字号安全 on #0E0E0E = 7.54:1 ✅ */ --c-bronze-ink: #6B5436; /* oklch(46.2% 0.054 73) · 暖米白底「正文强调」替代色 on #F5F0E8 = 6.28:1 ✅ 全字号安全 */ --c-bronze-deep: #7A6140; /* 备选：CTA hover 填充（见建议变更 C-2） 奶白文字 on 此色 = 5.13:1 ✅ 全字号安全 */ --c-bronze-tint: rgba(139, 111, 71, 0.16); /* 极淡底：优惠码 chip / 选中态 */ --c-bronze-glow: rgba(139, 111, 71, 0.32); /* hover 下划线 / 描边加强 */ /* ========================================================================== 4. COLOR — TEXT（语义化文本色 · 已按背景配对实测） ========================================================================== */ /* 4a. 在暗底（#1A1A1A / #0E0E0E / #0A0A0A）上 */ --c-text-1: #F5F0E8; /* 15.34:1 ✅ 主文 / 标题 */ --c-text-2: #B8B0A2; /* 8.10:1 ✅ 次级文 / 引述 */ --c-text-3: #9A9285; /* 5.66:1 ✅ 辅助文 / meta */ --c-text-4: #8C8478; /* 4.71:1 ✅ 最低可用正文 / placeholder */ --c-text-disabled: #7E776B; /* 3.93:1 ⚠️ 仅禁用态与 ≥24px 大字，禁用于正文 */ /* 4b. 在暖米白底（#F5F0E8）上 —— S6 / K4 反色区专用 */ --c-text-ink-1: #1A1A1A; /* 15.34:1 ✅ */ --c-text-ink-2: #3A3733; /* 10.43:1 ✅ */ --c-text-ink-3: #4A463F; /* 8.27:1 ✅ */ --c-text-ink-4: #6B655C; /* 5.08:1 ✅ 最低可用正文 */ --c-text-ink-disabled: #8C8478; /* 3.26:1 ⚠️ 仅禁用态与 ≥24px 大字 */ /* ========================================================================== 5. COLOR — LINE / BORDER（功能性描边必须 ≥3:1） ========================================================================== */ --c-line-dark: #6E685D; /* on #1A1A1A = 3.15:1 ✅ 输入框 / 分隔（暗底） */ --c-line-dark-strong:#8C8478; /* on #1A1A1A = 4.71:1 ✅ 强化描边（暗底） */ --c-line-hairline: #3A3733; /* on #1A1A1A = 1.47:1 纯装饰细线，不可作功能边框 */ --c-line-ink: #8C8478; /* on #F5F0E8 = 3.26:1 ✅ 输入框 / 分隔（米白底） */ --c-line-hairline-ink:#DCD5C8; /* on #F5F0E8 = 1.29:1 纯装饰细线（米白底） */ /* ========================================================================== 6. COLOR — SEMANTIC（状态色 · 低饱和暖调邻色 · 不构成新品牌色） 规则：状态色不得单独承载信息，必须配文字或 1px 状态色下划线。 ========================================================================== */ --c-success: #A8B896; /* 鼠尾草 · on #1A1A1A = 8.26:1 ✅ · on #0E0E0E = 9.16:1 ✅ */ --c-success-ink: #5E6B4F; /* on #F5F0E8 = 5.01:1 ✅（米白底勿用 --c-success，仅 1.86:1） */ --c-danger: #C08A6E; /* 陶土 · on #1A1A1A = 5.89:1 ✅ · on #0E0E0E = 6.53:1 ✅ */ --c-danger-ink: #8A5A44; /* on #F5F0E8 = 5.10:1 ✅（米白底勿用 --c-danger，仅 2.61:1） */ --c-warning: #A98F5F; /* 赭石 · on #1A1A1A = 5.62:1 ✅（限 Age Gate 预告等极低密度使用） */ --c-warning-ink: #6B5436; /* = --c-bronze-ink · on #F5F0E8 = 6.28:1 ✅ */ /* info 不设独立色相，用 --c-text-2，守住「唯一点缀色」原则（需求 X4） */ /* ========================================================================== 7. COLOR — MEDIA（暗调图像滤镜规范 · 需求 D3 / §3.2） ========================================================================== */ --c-warm-2700k: #FFA957; /* 2700K 黑体色温近似 sRGB */ --c-warm-2700k-soft: rgba(255, 169, 87, 0.18); /* soft-light 混合用 */ --c-shadow-crush: #1A1A1A; /* 阴影压向炭黑（lighten 混合） */ --img-filter-base: saturate(0.80) sepia(0.12) contrast(1.04) brightness(0.96); --img-filter-gated: saturate(0.80) sepia(0.12) contrast(1.04) brightness(0.96) blur(8px) grayscale(0.60); --img-warm-opacity: 0.18; --img-scrim-hero: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.30) 38%, rgba(10,10,10,0.70) 72%, rgba(10,10,10,0.88) 100%); --img-scrim-card: linear-gradient(180deg, rgba(10,10,10,0) 55%, rgba(10,10,10,0.72) 100%); /* ★ 文字所在区域的 scrim 局部不透明度必须 ≥ 0.70 实测：0.70 的 #1A1A1A 即便压在纯白底图上 → #5F5F5F，奶白文字仍有 5.63:1 ✅ 实测：0.50 压在肤色 #C9B49B 上 → 4.87:1 ✅；压在纯白上仅 2.96:1 ❌ */ /* ========================================================================== 8. TYPOGRAPHY — 字体栈（OFL 可商用 · 必须含 latin-ext） DE ä ö ü ß（latin） / PL ą ć ę ł ń ó ś ź ż（latin-ext）全覆盖 ========================================================================== */ --font-display: "Playfair Display", "Didot", "Bodoni MT", "Hoefler Text", "Times New Roman", Times, serif; --font-body: "Inter", "Helvetica Neue", Helvetica, "Segoe UI", system-ui, -apple-system, "Noto Sans", "Liberation Sans", Arial, sans-serif; --font-numeric: "Inter", ui-monospace, "SF Mono", "Roboto Mono", monospace; --font-url: "https://fonts.googleapis.com/css2?family=Inter:wght@200..700&family=Playfair+Display:ital,wght@0,400..600;1,400..600&display=swap&subset=latin,latin-ext"; /* 字重 */ --fw-light: 200; /* 极细正文：Hero L3「Berlin · 2026」 */ --fw-book: 300; /* 默认正文重量 */ --fw-regular: 400; /* 标题 Playfair / 小字强调 */ --fw-medium: 500; /* overline / 标签 */ --fw-bold: 700; /* ★最高权重 CTA 专用（大字通道需要 ≥18.66px + bold） */ /* 行高 */ --lh-display: 1.20; /* display-2xl / quote（Playfair 斜体，视觉收紧） */ --lh-heading: 1.40; /* ★需求 §4.3「标题预留 1.4 行高」· h1–h4 统一 */ --lh-lead: 1.55; --lh-body: 1.70; --lh-ui: 1.40; --lh-cta: 1.20; /* 字距 */ --ls-display: -0.015em; --ls-quote: -0.010em; --ls-h1: -0.010em; --ls-h2: -0.005em; --ls-h3: 0em; --ls-body: 0em; --ls-caption: 0.02em; --ls-overline: 0.22em; /* 全大写好莱坞式小标签 */ --ls-cta: 0.04em; --ls-link: 0.02em; --ls-wordmark: 0.42em; /* ★品牌名 MIVELAR，需求指定 0.3–0.5em */ --ls-numeric: 0.01em; /* ========================================================================== 9. TYPE SCALE — DESKTOP（基准 1440，root=16px） ========================================================================== */ --fs-display: 4.75rem; /* 76px · Playfair 400 italic · Hero Slogan */ --fs-quote: 2.75rem; /* 44px · Playfair 400 italic · K1 KOL 引语 */ --fs-h1: 3.5rem; /* 56px · Playfair 400 */ --fs-h2: 2.5rem; /* 40px · Playfair 400 */ --fs-h3: 1.75rem; /* 28px · Playfair 400 */ --fs-h4: 1.3125rem; /* 21px · Playfair 400 italic · KOL 名 */ --fs-lead: 1.375rem; /* 22px · Inter 300 */ --fs-body: 1rem; /* 16px · Inter 300 */ --fs-body-sm: 0.875rem; /* 14px · Inter 300 */ --fs-caption: 0.75rem; /* 12px · Inter 400 */ --fs-overline: 0.6875rem; /* 11px · Inter 500 · uppercase */ --fs-cta: 1.1875rem; /* 19px · Inter 700 · ★≥18.66px 走大字通道 */ --fs-link: 0.9375rem; /* 15px · Inter 400 · 文字 CTA */ --fs-wordmark: 1.25rem; /* 20px · Inter 300 · uppercase · MIVELAR */ --fs-logo: 1rem; /* 16px · Inter 300 · uppercase · Header logo */ --fs-numeric: 0.9375rem; /* 15px · Inter 400 · tabular-nums */ /* 文本测量宽度（编辑感关键：正文不铺满） */ --measure-text: 62ch; --measure-heading: 24ch; --measure-quote: 34ch; /* ========================================================================== 10. SPACING — 4pt 基准 ========================================================================== */ --sp-0: 0px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --sp-11: 160px; --sp-12: 192px; /* ========================================================================== 11. LAYOUT — 栅格 / 容器 / 断点 断点：375 / 768 / 1440 / 1920（1024 归入 768–1440 fluid 区间） ========================================================================== */ --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1440px; --bp-2xl: 1920px; --container-max: 1440px; /* 1440 与 1920 同宽，靠左右留白制造编辑感 */ --container-pad: 20px; /* <768 → 20 / 768–1439 → 32 / ≥1440 → 48，见 §12 覆写 */ --grid-cols: 4; /* <768 → 4 / 768–1023 → 8 / ≥1024 → 12 */ --grid-gutter: 12px; /* <768 → 12 / 768–1023 → 16 / ≥1024 → 24 */ --section-py: 72px; /* <768 → 72 / 768 → 104 / 1440 → 144 / 1920 → 176 */ --stack-gap: 24px; /* 章节内元素默认纵向间距 */ /* ========================================================================== 12. RADIUS — 全站直角（编辑感硬边）。唯一例外：KOL 头像圆形 ========================================================================== */ --radius-0: 0px; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-pill: 0px; --radius-avatar: 50%; /* ========================================================================== 13. DEPTH — 阴影（暗底上几乎不可见，仅用于下拉 / sheet） ========================================================================== */ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40); --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.50); --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.62); /* 下拉 / 移动 sheet */ --shadow-4: 0 24px 64px rgba(0, 0, 0, 0.70); /* Age Gate / Cookie 条 */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; /* Header */ --z-cookie: 250; --z-gate: 300; /* Age Gate（高于 Cookie，两者共存时 Cookie 上移） */ --z-toast: 400; /* ========================================================================== 14. MOTION — 动效令牌（需求 D13） ========================================================================== */ --dur-instant: 120ms; --dur-ui: 240ms; /* 下拉 / sheet / 输入框反馈 */ --dur-screen: 600ms; /* ★屏间渐隐（需求 D13） */ --dur-gate: 400ms; /* Age Gate 升起 / blur 解除 */ --dur-gate-delay: 800ms;/* Age Gate 延迟出现 */ --dur-hover: 1500ms; /* ★hover 1.05 缓放 1.5s（需求 D13） */ --dur-media: 600ms; /* 图片 loaded 渐显 */ --dur-copy: 2000ms; /* 「Kopiert」2s 后恢复 */ --ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1); /* 默认：缓出，克制 */ --ease-hover: cubic-bezier(0.16, 1.00, 0.30, 1); /* 1.5s 缓放专用 */ --ease-in-out: cubic-bezier(0.40, 0.00, 0.20, 1); --scale-hover: 1.05; /* 图片 hover 缓放 */ --scale-blurfix: 1.06; /* blur(8px) 边缘光晕补偿 */ --fade-screen: 0.60; /* 屏间渐隐目标不透明度 */ /* ========================================================================== 15. COMPONENT — 尺寸契约 ========================================================================== */ --header-h: 72px; /* <768 → 72 / ≥768 → 80 */ --header-h-scrolled: 64px; --cookie-h: 64px; /* ★需求 D2 硬上限 */ --gate-max-h: 25vh; /* ★需求 D1 硬上限（横屏见 §19 修正） */ --touch-min: 44px; /* 最小点击区 */ --input-h: 48px; /* <768 → 52 */ --focus-width: 2px; /* ★需求 D15 */ --focus-offset: 2px; /* ★需求 D15 */ --c-focus: var(--c-bronze); /* on #1A1A1A 3.70:1 ✅ / on #F5F0E8 4.15:1 ✅ */ /* 宽高比（防 CLS，必须显式声明） */ --ratio-hero: 3 / 4; /* <768（80vh）→ 见组件规范 */ --ratio-product: 3 / 4; --ratio-editorial:4 / 5; --ratio-wide: 16 / 9; --ratio-avatar: 1 / 1; /* 运行时由 JS 写入，解决底部固定层叠冲突（建议变更 C-5） */ --gate-h: 0px; --cookie-h: 0px; } /* ========================================================================== 16. RESPONSIVE 覆写 — 768 / 1024 / 1440 / 1920 ========================================================================== */ /* ---- ≥768（tablet） ---- */ @media (min-width: 768px) { :root { --container-pad: 32px; --grid-cols: 8; --grid-gutter: 16px; --section-py: 104px; --header-h: 80px; --input-h: 48px; } } /* ---- ≥1024（fluid bridge，需求：1024 归入 768–1440 区间） ---- */ @media (min-width: 1024px) { :root { --grid-cols: 12; --grid-gutter: 24px; } } /* ---- ≥1440（desktop 基准） ---- */ @media (min-width: 1440px) { :root { --container-pad: 48px; --section-py: 144px; } } /* ---- ≥1920（仅放大留白与展示字号，容器不放大） ---- */ @media (min-width: 1920px) { :root { --container-pad: 64px; --section-py: 176px; --fs-display: 5.125rem; /* 82px */ --fs-h1: 3.75rem; /* 60px */ } } /* ========================================================================== 17. TYPE SCALE — MOBILE（基准 375） ★规则（建议变更 C-3）： body 及以下 → desktop × 1.20（遵循竞品 brief「移动端字号 ×1.2」，阅读舒适） display / h1–h4 → 按 375 视口重算（收缩 0.63–0.90） 理由：desktop 展示字号是为 1440 设计的；若同样 ×1.2， DE 文案 +40% 膨胀后在 375 视口会折 3 行以上并溢出 80vh Hero。 非 4 倍数的 ×1.2 结果向上取整到 4 的倍数，守住 4pt 基线网格。 ========================================================================== */ @media (max-width: 767px) { :root { --fs-display: 3rem; /* 48px · d×0.63 */ --fs-quote: 1.875rem; /* 30px · d×0.68 */ --fs-h1: 2.375rem; /* 38px · d×0.68 */ --fs-h2: 1.875rem; /* 30px · d×0.75 */ --fs-h3: 1.375rem; /* 22px · d×0.79 */ --fs-h4: 1.1875rem; /* 19px · d×0.90 */ --fs-lead: 1.1875rem; /* 19px · d×0.86 */ --fs-body: 1.1875rem; /* 19px · ★ d×1.20 */ --fs-body-sm: 1rem; /* 16px · d×1.14（4pt 取整） */ --fs-caption: 0.875rem; /* 14px · d×1.17（4pt 取整） */ --fs-overline: 0.75rem; /* 12px · d×1.09（4pt 取整） */ --fs-cta: 1.375rem; /* 22px · ★ d×1.16，守住 ≥18.66px 大字通道 */ --fs-link: 1.0625rem; /* 17px · d×1.13 */ --fs-wordmark: 1.125rem; /* 18px · d×0.90 */ --fs-logo: 0.9375rem; /* 15px · d×0.94 */ --fs-numeric: 1.0625rem; /* 17px · d×1.13 */ --lh-display: 1.22; --measure-text: 38ch; } } /* ========================================================================== 18. prefers-reduced-motion — 全关（需求 D13 / §8.4） 做法：把所有时长压到 0.01ms（而非 none），保证 transitionend 仍会触发， 依赖 JS 回调的 Age Gate / 复制交互不会挂死。 ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0.01ms; --dur-ui: 0.01ms; --dur-screen: 0.01ms; --dur-gate: 0.01ms; --dur-gate-delay: 0ms; --dur-hover: 0.01ms; --dur-media: 0.01ms; --dur-copy: 2000ms; /* 复制反馈是功能性提示，保留时长但不做位移/缩放 */ } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .media > img { transform: none !important; } .u-hover-scale:hover { transform: none !important; } } /* ========================================================================== 19. 短屏修正 — 横屏手机 / 小高度视口 问题：25vh 在 height=375 的横屏下仅 94px，装不下 Age Gate 内容 ========================================================================== */ @media (max-height: 480px) and (orientation: landscape) { :root { --gate-max-h: 40vh; --cookie-h: 52px; } } /* ========================================================================== 20. 共用工具类层（Phase 3 直接复制，勿改 token 名） ========================================================================== */ /* --- 20.1 容器与栅格 --- */ .u-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .u-grid { display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); gap: var(--grid-gutter); } .u-section { padding-block: var(--section-py); } /* --- 20.2 焦点环（需求 D15） --- */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--focus-width) solid var(--c-focus); outline-offset: var(--focus-offset); border-radius: var(--radius-0); } /* 叠在图像/不定底色上时补一层深色垫底，保证 3:1 */ .on-media :where(a, button, input, [tabindex]):focus-visible, :where(a, button)[data-on-media]:focus-visible { box-shadow: 0 0 0 var(--focus-width) var(--c-ink-1000); } /* --- 20.3 暗调图像滤镜（需求 D3） --- 三层叠加，顺序不可调换： img → 降饱和 20% + 2700K 偏色 + 轻微压亮 ::before → 2700K 暖光（soft-light） ::after → 阴影压向 #1A1A1A（lighten 把纯黑抬升到炭黑） 文字 scrim 用真实子元素 .media__scrim，避免伪元素被占用。 ------------------------------------------------------------------------- */ .media { position: relative; isolation: isolate; overflow: hidden; /* 必须：裁掉 blur / scale 溢出 */ contain: paint; /* 性能优化：限制重绘范围 */ background: var(--c-ink-800); } .media > img, .media > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter-base); transition: filter var(--dur-gate) var(--ease-editorial), transform var(--dur-hover) var(--ease-hover); } .media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--c-warm-2700k); mix-blend-mode: soft-light; opacity: var(--img-warm-opacity); } .media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--c-shadow-crush); mix-blend-mode: lighten; /* 把所有低于 #1A1A1A 的通道抬到 #1A1A1A */ } .media__scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none; } .media__scrim--hero { background: var(--img-scrim-hero); } .media__scrim--card { background: var(--img-scrim-card); } /* Age Gate 未通过 / 已拒绝：blur(8px) + grayscale(60%)（需求 §3.2 / X15） */ [data-age-gate="pending"] .media > img, [data-age-gate="refused"] .media > img, [data-age-gate="pending"] .media > picture > img, [data-age-gate="refused"] .media > picture > img { filter: var(--img-filter-gated); transform: scale(var(--scale-blurfix)); /* 消除 blur 边缘的透明光晕 */ } [data-age-gate="passed"] .media > img, [data-age-gate="passed"] .media > picture > img { filter: var(--img-filter-base); transform: scale(1); } /* --- 20.4 图片占位 shimmer（需求 §2.5.1-8） --- */ .u-skeleton { background-color: var(--c-ink-700); background-image: linear-gradient(100deg, var(--c-ink-700) 20%, var(--c-ink-600) 40%, var(--c-ink-700) 60%); background-size: 200% 100%; animation: mivelar-shimmer 1.6s var(--ease-in-out) infinite; } @keyframes mivelar-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .u-skeleton.is-loaded { animation: none; background-image: none; } .u-skeleton.is-failed { animation: none; background-image: none; background-color: var(--c-ink-800); box-shadow: inset 0 0 0 1px var(--c-ink-500); } /* --- 20.5 hover 缓放 1.05 / 1.5s（需求 D13） --- */ .u-hover-scale { transition: transform var(--dur-hover) var(--ease-hover); } .u-hover-scale:hover { transform: scale(var(--scale-hover)); } /* --- 20.6 屏间渐隐 0.6s --- */ .u-reveal { opacity: 0; transition: opacity var(--dur-screen) var(--ease-editorial); } .u-reveal.is-visible { opacity: 1; } /* --- 20.7 数字（价格 / 尺码 / 百分比） --- */ .u-num { font-family: var(--font-numeric); font-variant-numeric: tabular-nums lining-nums; letter-spacing: var(--ls-numeric); } /* --- 20.8 6 维紧凑列表（S6 / K5 · Tech Utility 的第三个原子） --- 不用图标、不用等宽字体，只靠紧凑行高 + tabular 序号制造「精确的安静」 */ .u-dimlist { list-style: none; margin: 0; padding: 0; font-size: var(--fs-body-sm); line-height: 1.85; font-variant-numeric: tabular-nums; } .u-dimlist li { display: grid; grid-template-columns: 2.5ch 1fr; gap: var(--sp-3); padding-block: var(--sp-1); } .u-dimlist li::first-line { letter-spacing: var(--ls-caption); } /* --- 20.9 视觉隐藏（无障碍保留） --- */ .u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== ★★★ BRONZE SAFETY — #8B6F47 三条硬边界（需求 X17 的可执行版本）★★★ 实测对比度： #8B6F47 on #1A1A1A = 3.70:1 #8B6F47 on #0E0E0E = 4.10:1 #8B6F47 on #0A0A0A = 4.21:1 #8B6F47 on #F5F0E8 = 4.15:1 #8B6F47 on #2C2C2C（= 92% 炭黑压在纯白图上）= 2.97:1 ❌ ① 合法用途（≥3:1） 1px 描边 / 分隔线 / 下划线 / focus ring / 图标 / ≥24px 常规 或 ≥18.66px 粗体的大字。 ② 非法用途（<4.5:1 且不可豁免） 任何 <18.66px 的正文、标签、价格、按钮文字、placeholder。 替代色：暗底用 --c-bronze-lift #C79A5B（6.80:1） 米白底用 --c-bronze-ink #6B5436（6.28:1） ③ 半透明陷阱 任何把 #8B6F47 放在「半透明深色层」上的场景都必须先算最坏混合值。 最坏情况 = 该层压在纯白图上。 → 因此 Age Gate / Cookie 条底色一律用 100% 不透明的 --c-ink-1000 #0A0A0A，不用 92% 半透明（建议变更 C-1）。 ④ hover 填充（建议变更 C-2） D4 要求 hover 填充 #8B6F47。填充后文字对比度： 奶白 #F5F0E8 on #8B6F47 = 4.15:1 炭黑 #0E0E0E on #8B6F47 = 4.10:1 两者都 < 4.5，因此最高权重 CTA 必须走「大字通道」： font-size ≥ 18.66px 且 font-weight: 700 → 门槛降为 3:1 → 4.10:1 ✅ 若 Phase 3 需要更细的字重（≤600），填充色须改为 --c-bronze-deep #7A6140 + 奶白文字 = 5.13:1 ✅（全字号安全） ========================================================================== */