|
|
@@ -0,0 +1,2417 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+<meta charset="UTF-8">
|
|
|
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+<title>[必填] 替换为 PPT 标题 · Deck Title</title>
|
|
|
+<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
|
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600&family=Noto+Sans+SC:wght@200;300;400;500;700;900&display=swap" rel="stylesheet">
|
|
|
+<style>
|
|
|
+ :root{
|
|
|
+ /* ============ 主题色(默认: 🔵 克莱因蓝 IKB) ============
|
|
|
+ 切换主题: 从 references/themes-swiss.md 复制对应的 :root 块
|
|
|
+ 整体替换标有"主题色"注释的所有变量,其他散落的 var() 引用无需逐处改 */
|
|
|
+ --paper:#fafaf8; /* 主底色: 高级灰白 */
|
|
|
+ --paper-rgb:250,250,248;
|
|
|
+ --ink:#0a0a0a; /* 文字主色: 近黑 */
|
|
|
+ --ink-rgb:10,10,10;
|
|
|
+ --grey-1:#f0f0ee; /* 浅灰底 */
|
|
|
+ --grey-2:#d4d4d2; /* 中灰(分割线) */
|
|
|
+ --grey-3:#737373; /* 暗灰(辅助文字) */
|
|
|
+ --accent:#002FA7; /* 高亮色: 克莱因蓝 IKB */
|
|
|
+ --accent-rgb:0,47,167;
|
|
|
+ --accent-on:#ffffff; /* accent 上的反色文字 */
|
|
|
+ --accent-bright:#5B7BFF; /* 暗底高亮: IKB 提亮版 */
|
|
|
+
|
|
|
+ /* ============ Carbon 文本角色 token (role-based,代替 opacity) ============
|
|
|
+ 亮底: primary 主文 / secondary 次文 / helper 辅助 / placeholder 占位
|
|
|
+ 暗底: inverse 自动反向 */
|
|
|
+ --text-primary:#0a0a0a; /* = ink, 100% */
|
|
|
+ --text-secondary:#525252; /* gray 70 */
|
|
|
+ --text-helper:#737373; /* gray 60 */
|
|
|
+ --text-placeholder:#a3a3a3; /* gray 40 */
|
|
|
+ --text-on-color:#ffffff; /* accent/dark 反色 */
|
|
|
+ --border-subtle:#e0e0e0; /* gray 20, 极细分隔 */
|
|
|
+ --border-strong:#a3a3a3; /* gray 40, 强分隔 */
|
|
|
+
|
|
|
+ /* ============ 字体(跨主题固定) ============ */
|
|
|
+ --sans:"Inter","Helvetica Neue","Helvetica","Arial","Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif;
|
|
|
+ --sans-zh:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC","Microsoft YaHei UI","Microsoft YaHei","微软雅黑",sans-serif;
|
|
|
+ --mono:"JetBrains Mono","IBM Plex Mono","SF Mono","Cascadia Code","Consolas","Courier New",ui-monospace,monospace;
|
|
|
+
|
|
|
+ /* ============ Carbon 2x Grid 间距模数 (基础 8px) ============
|
|
|
+ 参考: https://carbondesignsystem.com/elements/2x-grid/overview/
|
|
|
+ 任何 padding/gap/margin 优先用这套 token,确保 8px 基线对齐 */
|
|
|
+ --sp-3:8px; /* 02 token */
|
|
|
+ --sp-4:12px; /* 03 */
|
|
|
+ --sp-5:16px; /* 04 */
|
|
|
+ --sp-6:24px; /* 05 */
|
|
|
+ --sp-7:32px; /* 06 */
|
|
|
+ --sp-8:40px; /* 07 */
|
|
|
+ --sp-9:48px; /* 08 */
|
|
|
+ --sp-10:64px; /* 09 */
|
|
|
+ --sp-11:80px; /* 10 */
|
|
|
+ --sp-12:96px; /* 11 */
|
|
|
+ --sp-13:160px; /* 12 */
|
|
|
+
|
|
|
+ /* ============ Carbon Motion tokens ============
|
|
|
+ https://carbondesignsystem.com/guidelines/motion/overview/
|
|
|
+ 两套体系:productive (功能) 短 + 锐 / expressive (叙事) 长 + 软 */
|
|
|
+ --ease-prod:cubic-bezier(.2,0,.38,.9); /* productive standard */
|
|
|
+ --ease-exp:cubic-bezier(.4,.14,.3,1); /* expressive standard */
|
|
|
+ --ease-entry-prod:cubic-bezier(0,0,.38,.9); /* productive entrance */
|
|
|
+ --ease-entry-exp:cubic-bezier(0,0,.3,1); /* expressive entrance */
|
|
|
+ --dur-fast-1:.07s; /* 70ms */
|
|
|
+ --dur-fast-2:.11s; /* 110ms */
|
|
|
+ --dur-mod-1:.15s; /* 150ms */
|
|
|
+ --dur-mod-2:.24s; /* 240ms */
|
|
|
+ --dur-slow-1:.4s; /* 400ms */
|
|
|
+ --dur-slow-2:.7s; /* 700ms */
|
|
|
+
|
|
|
+ /* 底部分页组件安全区: 主内容最低处不要进入这条区域 */
|
|
|
+ --nav-safe-bottom:8vh;
|
|
|
+ }
|
|
|
+ *{box-sizing:border-box;margin:0;padding:0}
|
|
|
+ html,body{
|
|
|
+ width:100%;height:100%;overflow:hidden;
|
|
|
+ background:var(--paper);color:var(--ink);
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-feature-settings:"ss01","cv11";
|
|
|
+ -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ============ WebGL 网格背景 ============ */
|
|
|
+ canvas.bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block;opacity:.55;mix-blend-mode:multiply;pointer-events:none}
|
|
|
+ body.dark-bg canvas.bg{mix-blend-mode:screen;opacity:.42}
|
|
|
+ body.low-power canvas.bg,
|
|
|
+ body.low-power canvas.ascii-bg{display:none!important}
|
|
|
+
|
|
|
+ /* ============ Deck 容器 + 翻页 ============ */
|
|
|
+ #deck{position:fixed;inset:0;width:10000vw;height:100vh;display:flex;flex-wrap:nowrap;transition:transform .9s cubic-bezier(.77,0,.175,1);z-index:10;will-change:transform}
|
|
|
+ .slide{
|
|
|
+ width:100vw;height:100vh;flex:0 0 100vw;
|
|
|
+ position:relative;
|
|
|
+ padding:5.5vh 5vw 7vh 5vw;
|
|
|
+ display:flex;flex-direction:column;
|
|
|
+ overflow:hidden;
|
|
|
+ background:var(--paper);color:var(--ink);
|
|
|
+ }
|
|
|
+ .slide.grey{background:var(--grey-1)}
|
|
|
+ .slide.dark{background:var(--ink);color:var(--paper)}
|
|
|
+ .slide.dark .grey-only{display:none}
|
|
|
+ .slide.accent{background:var(--accent);color:var(--accent-on)}
|
|
|
+ .slide.accent .accent-block{background:var(--accent-on);color:var(--accent)}
|
|
|
+
|
|
|
+ /* Hero 页透出网格背景多一点 */
|
|
|
+ .slide.hero{background:transparent}
|
|
|
+ .slide.hero.grey{background:rgba(var(--paper-rgb),.86);backdrop-filter:blur(1px)}
|
|
|
+ .slide.hero.dark{background:rgba(var(--ink-rgb),.92);color:var(--paper)}
|
|
|
+
|
|
|
+ /* ============ 装饰: 极细分隔线 + 点阵矩阵 ============ */
|
|
|
+ .rule{width:100%;height:1px;background:currentColor;opacity:.18;margin:0}
|
|
|
+ .rule.thick{height:2px;opacity:.85}
|
|
|
+ .rule.accent{background:var(--accent);opacity:1;height:2px}
|
|
|
+ .rule.v{width:1px;height:100%;margin:0}
|
|
|
+
|
|
|
+ /* 点阵矩阵 (dot matrix) - 用 radial-gradient */
|
|
|
+ .dots{
|
|
|
+ background-image:radial-gradient(currentColor 1px, transparent 1px);
|
|
|
+ background-size:12px 12px;
|
|
|
+ background-position:0 0;
|
|
|
+ opacity:.18;
|
|
|
+ }
|
|
|
+ .dots-fine{
|
|
|
+ background-image:radial-gradient(currentColor 0.8px, transparent 0.8px);
|
|
|
+ background-size:8px 8px;
|
|
|
+ opacity:.14;
|
|
|
+ }
|
|
|
+ .dots-bold{
|
|
|
+ background-image:radial-gradient(currentColor 1.4px, transparent 1.4px);
|
|
|
+ background-size:18px 18px;
|
|
|
+ opacity:.22;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ============ Chrome (顶部 meta) + Foot (底部) ============ */
|
|
|
+ .chrome{
|
|
|
+ display:flex;justify-content:space-between;align-items:flex-start;
|
|
|
+ font-family:var(--mono);
|
|
|
+ font-size:11px;letter-spacing:.16em;text-transform:uppercase;
|
|
|
+ opacity:.7;margin-bottom:auto
|
|
|
+ }
|
|
|
+ .chrome .l,.chrome .r{display:flex;gap:1.6em;align-items:center}
|
|
|
+ .chrome .sep{width:24px;height:1px;background:currentColor;opacity:.5}
|
|
|
+
|
|
|
+ .foot{
|
|
|
+ margin-top:auto;
|
|
|
+ display:flex;justify-content:space-between;align-items:flex-end;
|
|
|
+ font-family:var(--mono);
|
|
|
+ font-size:11px;letter-spacing:.14em;text-transform:uppercase;
|
|
|
+ opacity:.55;
|
|
|
+ padding-top:2vh;
|
|
|
+ border-top:1px solid currentColor;
|
|
|
+ border-color:rgba(127,127,127,.25)
|
|
|
+ }
|
|
|
+ .foot .nb{font-family:var(--sans);font-weight:600;letter-spacing:.04em}
|
|
|
+
|
|
|
+ /* ============ Tag / Kicker / Meta 标签 ============ */
|
|
|
+ .kicker{
|
|
|
+ font-family:var(--mono);
|
|
|
+ font-size:11px;letter-spacing:.28em;text-transform:uppercase;
|
|
|
+ opacity:.65;margin-bottom:2.4vh;
|
|
|
+ display:inline-flex;align-items:center;gap:.8em
|
|
|
+ }
|
|
|
+ .kicker::before{
|
|
|
+ content:"";width:24px;height:1px;background:currentColor;opacity:.6
|
|
|
+ }
|
|
|
+ .kicker.no-line::before{display:none}
|
|
|
+ .kicker.accent{color:var(--accent);opacity:1;font-weight:600}
|
|
|
+
|
|
|
+ .tag{
|
|
|
+ display:inline-block;
|
|
|
+ font-family:var(--mono);
|
|
|
+ font-size:10px;letter-spacing:.22em;text-transform:uppercase;
|
|
|
+ padding:5px 10px;border:1px solid currentColor;opacity:.85
|
|
|
+ }
|
|
|
+ .tag.solid{background:currentColor;color:var(--paper);border-color:transparent}
|
|
|
+ .tag.accent{background:var(--accent);color:var(--accent-on);border-color:transparent;opacity:1}
|
|
|
+
|
|
|
+ /* ============ 标题层级 (无衬线 · 极轻字重 · 极致字号对比) ============ */
|
|
|
+ .h-hero{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-weight:200;
|
|
|
+ font-size:11vw;
|
|
|
+ line-height:.92;
|
|
|
+ letter-spacing:-.04em;
|
|
|
+ }
|
|
|
+ .h-hero-zh{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-weight:200;
|
|
|
+ font-size:8.4vw;
|
|
|
+ line-height:.96;
|
|
|
+ letter-spacing:-.025em;
|
|
|
+ }
|
|
|
+ .h-xl{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-weight:200;
|
|
|
+ font-size:6vw;
|
|
|
+ line-height:1;
|
|
|
+ letter-spacing:-.03em;
|
|
|
+ }
|
|
|
+ .h-xl-zh{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-weight:200;
|
|
|
+ font-size:5vw;
|
|
|
+ line-height:1.05;
|
|
|
+ letter-spacing:-.025em;
|
|
|
+ }
|
|
|
+ .h-md{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-weight:300;
|
|
|
+ font-size:2.6vw;
|
|
|
+ line-height:1.18;
|
|
|
+ letter-spacing:-.015em;
|
|
|
+ }
|
|
|
+ .h-sub{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-weight:400;
|
|
|
+ font-size:2.2vw;
|
|
|
+ line-height:1.3;
|
|
|
+ letter-spacing:-.01em;
|
|
|
+ opacity:.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ============ 正文 / 引语 / 元数据 ============ */
|
|
|
+ .lead{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-weight:400;
|
|
|
+ font-size:1.55vw;
|
|
|
+ line-height:1.4;
|
|
|
+ letter-spacing:-.005em;
|
|
|
+ opacity:.86;
|
|
|
+ }
|
|
|
+ .body{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-weight:400;
|
|
|
+ font-size:max(13px,1.05vw);
|
|
|
+ line-height:1.6;
|
|
|
+ letter-spacing:0;
|
|
|
+ opacity:.78;
|
|
|
+ }
|
|
|
+ .body-sm{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-weight:400;
|
|
|
+ font-size:max(11px,.84vw);
|
|
|
+ line-height:1.55;
|
|
|
+ opacity:.7;
|
|
|
+ }
|
|
|
+ .meta{
|
|
|
+ font-family:var(--mono);
|
|
|
+ font-size:max(10px,.78vw);
|
|
|
+ letter-spacing:.18em;text-transform:uppercase;
|
|
|
+ opacity:.6;
|
|
|
+ }
|
|
|
+ .meta-row{
|
|
|
+ display:flex;gap:1.4em;align-items:baseline;flex-wrap:wrap;
|
|
|
+ font-family:var(--mono);
|
|
|
+ font-size:max(11px,.85vw);letter-spacing:.18em;text-transform:uppercase;
|
|
|
+ opacity:.65;
|
|
|
+ }
|
|
|
+ .meta-row span:not(.dot){display:inline-block}
|
|
|
+ .meta-row .dot{
|
|
|
+ display:inline-block;width:4px;height:4px;border-radius:50%;
|
|
|
+ background:currentColor;opacity:.5;vertical-align:middle
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ============ KPI Hero (视觉英雄数据) ============ */
|
|
|
+ .kpi-hero{
|
|
|
+ font-family:var(--sans);
|
|
|
+ font-weight:800;
|
|
|
+ font-size:22vw;
|
|
|
+ line-height:.82;
|
|
|
+ letter-spacing:-.05em;
|
|
|
+ font-feature-settings:"tnum","ss01";
|
|
|
+ }
|
|
|
+ .kpi-hero .unit{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-weight:500;
|
|
|
+ font-size:.18em;
|
|
|
+ letter-spacing:0;
|
|
|
+ opacity:.5;
|
|
|
+ margin-left:.12em;
|
|
|
+ vertical-align:.5em;
|
|
|
+ }
|
|
|
+ .kpi-hero.accent{color:var(--accent)}
|
|
|
+ .kpi-big{
|
|
|
+ font-family:var(--sans);
|
|
|
+ font-weight:800;
|
|
|
+ font-size:11vw;
|
|
|
+ line-height:.85;
|
|
|
+ letter-spacing:-.04em;
|
|
|
+ font-feature-settings:"tnum"
|
|
|
+ }
|
|
|
+ .kpi-mid{
|
|
|
+ font-family:var(--sans);
|
|
|
+ font-weight:700;
|
|
|
+ font-size:6vw;
|
|
|
+ line-height:.88;
|
|
|
+ letter-spacing:-.03em;
|
|
|
+ font-feature-settings:"tnum"
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ============ Stat Card (数据卡片 · 极简) ============ */
|
|
|
+ .stat-card{
|
|
|
+ display:flex;flex-direction:column;
|
|
|
+ gap:.6vh;align-items:flex-start;
|
|
|
+ padding-top:1.6vh;
|
|
|
+ border-top:2px solid currentColor;
|
|
|
+ }
|
|
|
+ .stat-card.thin{border-top-width:1px;border-color:rgba(127,127,127,.4)}
|
|
|
+ .stat-card.accent-top{border-top-color:var(--accent);border-top-width:3px}
|
|
|
+ .stat-card .stat-label{
|
|
|
+ font-family:var(--mono);
|
|
|
+ font-size:max(10px,.78vw);
|
|
|
+ letter-spacing:.24em;text-transform:uppercase;
|
|
|
+ opacity:.6;
|
|
|
+ }
|
|
|
+ .stat-card .stat-nb{
|
|
|
+ font-family:var(--sans);
|
|
|
+ font-weight:800;
|
|
|
+ font-size:5.6vw;
|
|
|
+ line-height:.88;
|
|
|
+ letter-spacing:-.035em;
|
|
|
+ font-feature-settings:"tnum";
|
|
|
+ margin-top:.4vh;
|
|
|
+ }
|
|
|
+ .stat-card .stat-nb .stat-unit{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-weight:500;
|
|
|
+ font-size:.32em;
|
|
|
+ letter-spacing:0;
|
|
|
+ opacity:.6;
|
|
|
+ margin-left:.14em;
|
|
|
+ vertical-align:.4em;
|
|
|
+ }
|
|
|
+ .stat-card .stat-note{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-weight:400;
|
|
|
+ font-size:max(12px,.95vw);
|
|
|
+ line-height:1.5;
|
|
|
+ opacity:.7;
|
|
|
+ margin-top:.6vh;
|
|
|
+ }
|
|
|
+ .grid-4 .stat-card .stat-nb{font-size:4.6vw}
|
|
|
+ .grid-3 .stat-card .stat-nb{font-size:6.4vw}
|
|
|
+ .grid-6 .stat-card .stat-nb{font-size:4vw}
|
|
|
+
|
|
|
+ /* ============ Accent Block (高亮色块包裹内容) ============ */
|
|
|
+ .accent-block{
|
|
|
+ background:var(--accent);color:var(--accent-on);
|
|
|
+ padding:2.4vh 2vw;
|
|
|
+ }
|
|
|
+ .accent-block.tight{padding:1.4vh 1.4vw}
|
|
|
+ .accent-block .h-md,.accent-block .h-xl,.accent-block .kpi-mid{color:var(--accent-on)}
|
|
|
+
|
|
|
+ .ink-block{
|
|
|
+ background:var(--ink);color:var(--paper);
|
|
|
+ padding:2.4vh 2vw
|
|
|
+ }
|
|
|
+ .grey-block{
|
|
|
+ background:var(--grey-1);
|
|
|
+ padding:2.4vh 2vw
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 高亮文字 (mark 风格) */
|
|
|
+ .mark{
|
|
|
+ background:var(--accent);color:var(--accent-on);
|
|
|
+ padding:0 .2em;
|
|
|
+ box-decoration-break:clone;
|
|
|
+ -webkit-box-decoration-break:clone;
|
|
|
+ }
|
|
|
+ .mark.ink{background:var(--ink);color:var(--paper)}
|
|
|
+ .underline-accent{
|
|
|
+ background-image:linear-gradient(to bottom, transparent 70%, var(--accent) 70%, var(--accent) 96%, transparent 96%);
|
|
|
+ padding:0 .05em
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ============ Pipeline / Step ============ */
|
|
|
+ .pipeline-section{margin-top:3.2vh;padding-top:2.2vh;border-top:1px solid rgba(127,127,127,.3)}
|
|
|
+ .pipeline-section:first-of-type{border-top:0;padding-top:0;margin-top:2.4vh}
|
|
|
+ .pipeline-label{
|
|
|
+ font-family:var(--mono);
|
|
|
+ font-size:max(10px,.82vw);
|
|
|
+ letter-spacing:.24em;text-transform:uppercase;
|
|
|
+ opacity:.6;margin-bottom:1.8vh;
|
|
|
+ }
|
|
|
+ .pipeline{
|
|
|
+ display:grid;
|
|
|
+ grid-template-columns:repeat(5,1fr);
|
|
|
+ gap:1vw;
|
|
|
+ }
|
|
|
+ .pipeline[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
|
|
|
+ .pipeline[data-cols="4"]{grid-template-columns:repeat(4,1fr)}
|
|
|
+ .pipeline[data-cols="6"]{grid-template-columns:repeat(6,1fr)}
|
|
|
+ .step{
|
|
|
+ display:flex;flex-direction:column;gap:.6vh;
|
|
|
+ padding-top:1.2vh;
|
|
|
+ border-top:2px solid currentColor;
|
|
|
+ }
|
|
|
+ .step.accent-top{border-top-color:var(--accent);border-top-width:3px}
|
|
|
+ .step-nb{
|
|
|
+ font-family:var(--mono);
|
|
|
+ font-weight:500;
|
|
|
+ font-size:1vw;
|
|
|
+ opacity:.5;letter-spacing:.04em
|
|
|
+ }
|
|
|
+ .step-title{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-weight:700;
|
|
|
+ font-size:1.4vw;
|
|
|
+ letter-spacing:-.01em;
|
|
|
+ line-height:1.2;
|
|
|
+ }
|
|
|
+ .step-desc{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-weight:400;
|
|
|
+ font-size:max(11px,.88vw);
|
|
|
+ line-height:1.45;
|
|
|
+ opacity:.7;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ============ 网格系统 (模块化网格) ============ */
|
|
|
+ .frame{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
|
|
|
+ .frame.grid-2-7-5,
|
|
|
+ .frame.grid-2-6-6,
|
|
|
+ .frame.grid-2-8-4,
|
|
|
+ .frame.grid-2-4-8,
|
|
|
+ .frame.grid-3-3,
|
|
|
+ .frame.grid-12,
|
|
|
+ .frame.grid-6,
|
|
|
+ .frame.grid-4,
|
|
|
+ .frame.grid-3{display:grid}
|
|
|
+
|
|
|
+ /* 12 列模块化网格 (瑞士风核心) */
|
|
|
+ .grid-12{
|
|
|
+ display:grid;
|
|
|
+ grid-template-columns:repeat(12,1fr);
|
|
|
+ gap:2vh 1.2vw;
|
|
|
+ align-items:start;
|
|
|
+ }
|
|
|
+ .span-2{grid-column:span 2}
|
|
|
+ .span-3{grid-column:span 3}
|
|
|
+ .span-4{grid-column:span 4}
|
|
|
+ .span-5{grid-column:span 5}
|
|
|
+ .span-6{grid-column:span 6}
|
|
|
+ .span-7{grid-column:span 7}
|
|
|
+ .span-8{grid-column:span 8}
|
|
|
+ .span-9{grid-column:span 9}
|
|
|
+ .span-12{grid-column:span 12}
|
|
|
+
|
|
|
+ /* 经典分栏 */
|
|
|
+ .grid-2-7-5{display:grid;grid-template-columns:7fr 5fr;gap:3vw 4vh;align-items:start}
|
|
|
+ .grid-2-6-6{display:grid;grid-template-columns:1fr 1fr;gap:3vw 4vh;align-items:start}
|
|
|
+ .grid-2-8-4{display:grid;grid-template-columns:8fr 4fr;gap:3vw 4vh;align-items:start}
|
|
|
+ .grid-2-4-8{display:grid;grid-template-columns:4fr 8fr;gap:3vw 4vh;align-items:start}
|
|
|
+ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:3vw 4vh;align-items:start}
|
|
|
+ .grid-3-3{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(0,1fr);gap:2.4vh 2vw}
|
|
|
+ .grid-4{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:3vh 3vw;flex:1;align-content:center}
|
|
|
+ .grid-6{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:3vh 2.4vw;flex:1;align-content:center}
|
|
|
+
|
|
|
+ /* 工具类 */
|
|
|
+ .col{display:flex;flex-direction:column;gap:2vh}
|
|
|
+ .row{display:flex;align-items:center;gap:2vw}
|
|
|
+ .fill{flex:1}
|
|
|
+ .center{align-items:center;justify-content:center;text-align:center}
|
|
|
+ .right{text-align:right;justify-self:end}
|
|
|
+ .top{align-self:start}
|
|
|
+ .bottom{align-self:end}
|
|
|
+ .va-center{align-self:center}
|
|
|
+ .nowrap{white-space:nowrap}
|
|
|
+
|
|
|
+ /* 非对称定位 */
|
|
|
+ .pos-absolute{position:absolute}
|
|
|
+ .bottom-left{position:absolute;left:5vw;bottom:8vh;max-width:50vw}
|
|
|
+ .bottom-right{position:absolute;right:5vw;bottom:8vh;max-width:50vw;text-align:right}
|
|
|
+ .top-right{position:absolute;right:5vw;top:5.5vh;text-align:right}
|
|
|
+ .top-left{position:absolute;left:5vw;top:5.5vh}
|
|
|
+
|
|
|
+ /* ============ Callout (引用框 · 极简) ============ */
|
|
|
+ .callout{
|
|
|
+ padding:2vh 2vw;
|
|
|
+ border-left:3px solid var(--accent);
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-size:max(13px,1vw);
|
|
|
+ line-height:1.55;
|
|
|
+ opacity:.9;
|
|
|
+ }
|
|
|
+ .callout.ink{border-left-color:currentColor}
|
|
|
+ .callout .cite,.callout .callout-src{
|
|
|
+ display:block;margin-top:1.2vh;
|
|
|
+ font-family:var(--mono);
|
|
|
+ font-size:10px;letter-spacing:.2em;text-transform:uppercase;
|
|
|
+ opacity:.6;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ============ Icons (Lucide via CDN) ============ */
|
|
|
+ .ico{width:1em;height:1em;display:inline-block;vertical-align:-.12em;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
|
|
|
+ .ico-lg,.ico-md,.ico-sm{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
|
|
|
+ .ico-lg{width:2.4vw;height:2.4vw;stroke-width:1.4;display:inline-block}
|
|
|
+ .ico-md{width:1.6vw;height:1.6vw;stroke-width:1.6;display:inline-block;vertical-align:-.4em}
|
|
|
+ .ico-sm{width:1vw;height:1vw;stroke-width:1.8;display:inline-block;vertical-align:-.15em;opacity:.7}
|
|
|
+
|
|
|
+ /* ============ 几何小图标 (装饰) ============ */
|
|
|
+ .geo-dot{width:.7vw;height:.7vw;border-radius:50%;background:var(--accent);display:inline-block;vertical-align:middle}
|
|
|
+ .geo-square{width:.7vw;height:.7vw;background:var(--accent);display:inline-block;vertical-align:middle}
|
|
|
+ .geo-line{width:2vw;height:2px;background:var(--accent);display:inline-block;vertical-align:middle}
|
|
|
+ .geo-circle-o{width:.9vw;height:.9vw;border:2px solid currentColor;border-radius:50%;display:inline-block;vertical-align:middle}
|
|
|
+
|
|
|
+ /* ============ 图片 frame-img ============ */
|
|
|
+ .frame-img{overflow:hidden;position:relative;background:var(--paper);box-sizing:border-box;width:100%}
|
|
|
+ .slide.dark .frame-img{background:rgba(255,255,255,.06)}
|
|
|
+ .frame-img > img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
|
|
|
+ .frame-img.fit-contain > img{object-fit:contain;object-position:center center}
|
|
|
+ .frame-img.pos-top > img{object-position:top center}
|
|
|
+ .frame-img.pos-face > img{object-position:center 35%}
|
|
|
+ .frame-img.r-16x9{aspect-ratio:16/9;max-height:64vh}
|
|
|
+ .frame-img.r-21x9{aspect-ratio:21/9;max-height:54vh}
|
|
|
+ .frame-img.r-16x10{aspect-ratio:16/10;max-height:56vh}
|
|
|
+ .frame-img.r-4x3{aspect-ratio:4/3;max-height:56vh}
|
|
|
+ .frame-img.r-3x2{aspect-ratio:3/2;max-height:46vh}
|
|
|
+ .frame-img.r-3x4{aspect-ratio:3/4;max-height:60vh}
|
|
|
+ .frame-img.r-1x1{aspect-ratio:1/1;max-height:50vh}
|
|
|
+ .frame-img.h-16{height:16vh}
|
|
|
+ .frame-img.h-18{height:18vh}
|
|
|
+ .frame-img.h-22{height:22vh}
|
|
|
+ .frame-img.h-26{height:26vh}
|
|
|
+ .frame-img.h-28{height:28vh}
|
|
|
+ .frame-img.h-32{height:32vh}
|
|
|
+ .frame-img.swiss-lined{border-top:2px solid var(--accent)}
|
|
|
+ .frame-img.swiss-keyline{border:0}
|
|
|
+
|
|
|
+ /* P22 Image Hero: 下半屏内容区必须和图片拉开距离,不要贴在图下沿 */
|
|
|
+ .image-hero-body{
|
|
|
+ display:grid;grid-template-columns:6fr 6fr;gap:3vw;
|
|
|
+ padding:6.6vh 5vw 4.4vh;flex:1;align-content:start
|
|
|
+ }
|
|
|
+ .image-hero-stats{
|
|
|
+ display:grid;grid-template-columns:repeat(3,1fr);gap:2vw;align-items:start
|
|
|
+ }
|
|
|
+ .img-cap{
|
|
|
+ display:block;margin-top:.8vh;
|
|
|
+ font-family:var(--mono);
|
|
|
+ font-size:max(10px,.78vw);
|
|
|
+ letter-spacing:.2em;text-transform:uppercase;
|
|
|
+ opacity:.6;
|
|
|
+ }
|
|
|
+ figure.frame-img,figure.tile{margin:0;display:flex;flex-direction:column;min-width:0}
|
|
|
+ figure.tile > .frame-img{flex:0 0 auto}
|
|
|
+
|
|
|
+ /* 瑞士风图文混排: 只用直角、发丝线、单一 accent；图像容器不加圆角/阴影 */
|
|
|
+ .swiss-img-split{display:grid;grid-template-columns:5fr 7fr;gap:3vw;align-items:start;flex:1;min-height:0}
|
|
|
+ .swiss-img-split.reverse{grid-template-columns:7fr 5fr}
|
|
|
+ .swiss-img-split.align-bottom{align-items:end}
|
|
|
+ .swiss-img-split.align-bottom .swiss-img-copy{align-self:end}
|
|
|
+ .swiss-img-split.align-image-bottom{align-items:end;padding-bottom:var(--nav-safe-bottom)}
|
|
|
+ .swiss-img-split.align-image-bottom .swiss-img-copy{align-self:end}
|
|
|
+ .swiss-img-split.align-image-bottom figure.tile{align-self:end;position:relative}
|
|
|
+ .swiss-img-split.align-image-bottom figure.tile > .swiss-img-caption{
|
|
|
+ position:absolute;left:0;right:0;top:calc(100% + var(--sp-4));margin-top:0
|
|
|
+ }
|
|
|
+ .nav-safe-bottom{padding-bottom:var(--nav-safe-bottom)}
|
|
|
+ .nav-safe-bottom-tight{padding-bottom:calc(var(--nav-safe-bottom) * .65)}
|
|
|
+ .swiss-img-copy{display:flex;flex-direction:column;gap:var(--sp-6);min-width:0}
|
|
|
+ .swiss-img-copy .rule{margin:0}
|
|
|
+ .swiss-img-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);align-items:start;margin-top:var(--sp-7)}
|
|
|
+ .swiss-img-grid.two{grid-template-columns:repeat(2,1fr)}
|
|
|
+ .swiss-img-grid.tight{margin-top:0}
|
|
|
+ .swiss-img-caption{
|
|
|
+ display:flex;justify-content:space-between;gap:var(--sp-5);
|
|
|
+ margin-top:var(--sp-4);
|
|
|
+ font-family:var(--mono);font-size:max(9px,.68vw);
|
|
|
+ letter-spacing:.16em;text-transform:uppercase;color:var(--text-helper);
|
|
|
+ border-top:1px solid var(--border-subtle);padding-top:var(--sp-4)
|
|
|
+ }
|
|
|
+ .swiss-img-caption strong{
|
|
|
+ font-family:var(--sans),var(--sans-zh);font-size:max(12px,.88vw);
|
|
|
+ font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-primary)
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ============ Bar Chart (扁平几何图表) ============ */
|
|
|
+ .bar-chart{display:flex;flex-direction:column;gap:1.4vh}
|
|
|
+ .bar-row{display:grid;grid-template-columns:8em 1fr 4em;gap:1.4vw;align-items:center}
|
|
|
+ .bar-row .bar-label{font-family:var(--mono);font-size:max(10px,.82vw);letter-spacing:.16em;text-transform:uppercase;opacity:.7}
|
|
|
+ .bar-row .bar-track{height:14px;background:rgba(127,127,127,.18);position:relative}
|
|
|
+ .bar-row .bar-fill{height:100%;background:var(--accent);position:absolute;left:0;top:0}
|
|
|
+ .bar-row .bar-fill.ink{background:currentColor}
|
|
|
+ .bar-row .bar-value{font-family:var(--sans);font-weight:700;font-size:max(13px,1.05vw);text-align:right;font-feature-settings:"tnum"}
|
|
|
+
|
|
|
+ /* ============ 导航 ============ */
|
|
|
+ /* 底部分页导航: 仅保留方块本身,无背景无描边 */
|
|
|
+ #nav{position:fixed;left:50%;bottom:2vh;transform:translateX(-50%);z-index:30;display:flex;gap:10px;padding:0;background:transparent;border:0}
|
|
|
+ #nav .dot{width:6px;height:6px;background:rgba(0,0,0,.28);cursor:pointer;transition:all .25s ease;border:0;padding:0;border-radius:0}
|
|
|
+ #nav .dot:hover{background:rgba(0,0,0,.55)}
|
|
|
+ #nav .dot.active{background:var(--accent);width:18px}
|
|
|
+ body.dark-bg #nav .dot{background:rgba(255,255,255,.32)}
|
|
|
+ body.dark-bg #nav .dot.active{background:var(--accent)}
|
|
|
+
|
|
|
+ #hint{position:fixed;bottom:2.4vh;right:2.5vw;z-index:30;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.4;color:var(--ink-tint, currentColor)}
|
|
|
+ body.dark-bg #hint{color:var(--paper);opacity:.4}
|
|
|
+ body.low-power #hint{color:var(--accent);opacity:.72}
|
|
|
+ body.dark-bg.low-power #hint{color:var(--paper);opacity:.72}
|
|
|
+
|
|
|
+ /* ESC 索引页: 动画元素强制可见 (覆盖 motion-ready 的 opacity:0) */
|
|
|
+ #overview [data-anim]{opacity:1!important;transform:none!important}
|
|
|
+ #overview .slide *{animation:none!important;transition:none!important}
|
|
|
+
|
|
|
+ /* 统一卡片样式 token: card-fill (默认灰底 · 中性) + card-ink (反转高对比) + card-accent (单一焦点) */
|
|
|
+ .card-fill{background:#f5f5f4;border:0;color:var(--text-primary)}
|
|
|
+ .card-ink{background:var(--ink);border:0;color:var(--paper)}
|
|
|
+ .card-ink .t-meta,.card-ink .t-cat{color:rgba(255,255,255,.6)}
|
|
|
+ .card-accent{background:var(--accent);border:0;color:var(--accent-on)}
|
|
|
+ .card-accent .t-meta,.card-accent .t-cat{color:var(--accent-on)}
|
|
|
+
|
|
|
+ /* ============ 动效 (与原模板一致) ============ */
|
|
|
+ [data-anim]{opacity:1}
|
|
|
+ body.motion-ready [data-anim]{opacity:0}
|
|
|
+ body.motion-ready [data-anim="left"]{transform:translateX(-24px)}
|
|
|
+ body.motion-ready [data-anim="right"]{transform:translateX(24px)}
|
|
|
+ body.motion-ready [data-anim="line"]{opacity:0;transform:translateY(10px)}
|
|
|
+ body.motion-ready [data-animate="pipeline"] [data-anim]{opacity:.15}
|
|
|
+ body.low-power #deck{transition:none!important}
|
|
|
+ body.low-power *,
|
|
|
+ body.low-power *::before,
|
|
|
+ body.low-power *::after{animation:none!important;transition:none!important}
|
|
|
+ body.low-power.motion-ready [data-anim],
|
|
|
+ body.low-power [data-anim]{opacity:1!important;transform:none!important}
|
|
|
+
|
|
|
+ /* ============================================================
|
|
|
+ ↓↓↓ V2 EXTENSIONS · Canvas Mode + 参考图新类
|
|
|
+ 验证效果后沉淀回 template-swiss.html
|
|
|
+ ============================================================ */
|
|
|
+
|
|
|
+ /* Windows 适配:雅黑没有 ExtraLight 200,中文大字号字重补偿 */
|
|
|
+ body.is-win .name-mega,
|
|
|
+ body.is-win .num-mega,
|
|
|
+ body.is-win .kpi-thin,
|
|
|
+ body.is-win .tl-node .multi{
|
|
|
+ font-weight:300;letter-spacing:-.02em;
|
|
|
+ }
|
|
|
+ body.is-win [style*="font-weight:200"]{font-weight:300 !important}
|
|
|
+
|
|
|
+ /* 全屏铺满模式 · 关闭 WebGL · 卡片即页面 */
|
|
|
+ body.canvas-mode{background:var(--paper)}
|
|
|
+ body.canvas-mode canvas.bg{display:none !important}
|
|
|
+ body.canvas-mode .slide{background:var(--paper);padding:0;align-items:stretch;justify-content:stretch}
|
|
|
+ body.canvas-mode .slide.hero{background:var(--paper)}
|
|
|
+
|
|
|
+ .canvas-card{
|
|
|
+ width:100vw;
|
|
|
+ height:100vh;
|
|
|
+ background:var(--paper);color:var(--ink);
|
|
|
+ padding:5.6vh 5vw 4.4vh;
|
|
|
+ display:flex;flex-direction:column;
|
|
|
+ position:relative;overflow:hidden;
|
|
|
+ box-shadow:none;
|
|
|
+ border-radius:0;
|
|
|
+ }
|
|
|
+ .slide.dark .canvas-card{background:var(--ink);color:var(--paper)}
|
|
|
+ .slide.accent .canvas-card{background:var(--accent);color:var(--accent-on)}
|
|
|
+ .slide.grey .canvas-card{background:var(--grey-1);color:var(--ink)}
|
|
|
+ .slide.split .canvas-card{padding:0;flex-direction:row}
|
|
|
+
|
|
|
+ /* ============ ASCII 点阵呼吸场 · IKB 封面/封底专用 ============
|
|
|
+ 用法:在 .canvas-card(或 split .half.b-accent)内首位插入 <canvas class="ascii-bg" aria-hidden="true">.
|
|
|
+ 动画由本文件底部的 ASCII IIFE 自动启动,所有 canvas.ascii-bg 都会被扫到.
|
|
|
+ 其他内容靠 .canvas-card > *:not(.ascii-bg){z-index:1} 自动浮在上层. */
|
|
|
+ canvas.ascii-bg{
|
|
|
+ position:absolute;inset:0;width:100%;height:100%;
|
|
|
+ pointer-events:none;z-index:0;
|
|
|
+ mix-blend-mode:screen;opacity:.92;
|
|
|
+ }
|
|
|
+ .canvas-card > *:not(.ascii-bg){position:relative;z-index:1}
|
|
|
+ .slide.accent .canvas-card .chrome-min{color:rgba(255,255,255,.62)}
|
|
|
+ .slide.accent .canvas-card .t-meta{color:rgba(255,255,255,.7)}
|
|
|
+ .split-half > .half.b-accent .chrome-min{color:rgba(255,255,255,.62)}
|
|
|
+
|
|
|
+ /* 编号目录页 · 超大数字 + 国家名风格 — 越大越细 */
|
|
|
+ .num-mega{
|
|
|
+ font-family:var(--sans);font-weight:200;
|
|
|
+ font-size:9vw;line-height:1;letter-spacing:-.04em;
|
|
|
+ font-feature-settings:"tnum"
|
|
|
+ }
|
|
|
+ .num-mega.thin{font-weight:200}
|
|
|
+ .name-mega{
|
|
|
+ font-family:var(--sans);font-weight:200;
|
|
|
+ font-size:9vw;line-height:1;letter-spacing:-.035em;
|
|
|
+ }
|
|
|
+ .name-mega.muted{color:var(--grey-3)}
|
|
|
+
|
|
|
+ /* 细体超大 KPI — 字号越大权重越低 */
|
|
|
+ .kpi-thin{
|
|
|
+ font-family:var(--sans);font-weight:200;
|
|
|
+ font-size:14vw;line-height:.92;letter-spacing:-.045em;
|
|
|
+ font-feature-settings:"tnum"
|
|
|
+ }
|
|
|
+ .kpi-thin .unit{font-size:.3em;font-weight:300;opacity:.55;margin-left:.15em;vertical-align:.6em}
|
|
|
+ .kpi-thin.accent{color:var(--accent)}
|
|
|
+ .kpi-thin-sm{
|
|
|
+ font-family:var(--sans);font-weight:250;
|
|
|
+ font-size:5.6vw;line-height:1.04;letter-spacing:-.03em;
|
|
|
+ font-feature-settings:"tnum"
|
|
|
+ }
|
|
|
+ .kpi-thin-sm .unit{font-size:.3em;font-weight:300;opacity:.55;margin-left:.12em;vertical-align:.45em}
|
|
|
+
|
|
|
+ /* 4 列细线 KPI 行 — 顶部一根 hairline,内部不再加竖线 */
|
|
|
+ /* 4 列 KPI: 用纵向分割线建立网格感 (Carbon 2x grid 模数) */
|
|
|
+ .kpi-row-4{
|
|
|
+ display:grid;grid-template-columns:repeat(4,1fr);
|
|
|
+ gap:0;padding-top:2.4vh;
|
|
|
+ border-top:1px solid var(--grey-2)
|
|
|
+ }
|
|
|
+ .kpi-row-4 > .kpi-cell{
|
|
|
+ padding:1.6vh 1.6vw 0;
|
|
|
+ border-left:1px solid var(--grey-2)
|
|
|
+ }
|
|
|
+ .kpi-row-4 > .kpi-cell:first-child{padding-left:0;border-left:none}
|
|
|
+ .kpi-cell .lbl{font-family:var(--mono);font-size:max(10px,.74vw);letter-spacing:.22em;text-transform:uppercase;opacity:.55;margin-bottom:1.2vh}
|
|
|
+ .kpi-cell .nb{font-family:var(--sans);font-weight:250;font-size:3.2vw;line-height:1;letter-spacing:-.025em;font-feature-settings:"tnum"}
|
|
|
+ .kpi-cell .nb .unit{font-size:.32em;font-weight:300;opacity:.6;margin-left:.1em;vertical-align:.4em}
|
|
|
+ .kpi-cell .note{font-family:var(--sans),var(--sans-zh);font-size:max(11px,.82vw);line-height:1.5;opacity:.7;margin-top:1.2vh}
|
|
|
+
|
|
|
+ /* 时间线轴 — 通用 axis token, 横纵共享
|
|
|
+ axis 列 = 24px 固定宽,dot 直径 8px,绝对居中在 axis 列中线 (12px)
|
|
|
+ 虚线绝对定位 left:12px,与 dot 中心严格对齐 */
|
|
|
+ .timeline-v{
|
|
|
+ --tl-axis-w:24px; /* axis 列固定宽度 */
|
|
|
+ --tl-dot:8px; /* 圆点直径 */
|
|
|
+ position:relative;margin-top:var(--sp-7)
|
|
|
+ }
|
|
|
+ .timeline-v::before{
|
|
|
+ content:"";position:absolute;
|
|
|
+ left:calc(var(--tl-axis-w) / 2);
|
|
|
+ transform:translateX(-50%);
|
|
|
+ top:var(--sp-5);bottom:var(--sp-5);
|
|
|
+ width:1px;
|
|
|
+ background:repeating-linear-gradient(to bottom,currentColor 0 4px,transparent 4px 8px);
|
|
|
+ opacity:.35;pointer-events:none;z-index:0
|
|
|
+ }
|
|
|
+ .tl-node{
|
|
|
+ position:relative;
|
|
|
+ display:grid;
|
|
|
+ grid-template-columns:var(--tl-axis-w) minmax(0,7em) minmax(0,7.6em) 1fr;
|
|
|
+ gap:0 var(--sp-5);
|
|
|
+ align-items:center;
|
|
|
+ padding:var(--sp-7) 0
|
|
|
+ }
|
|
|
+ /* 进度点: 纯色实心圆,无背景无描边,精确居中在 axis 列中线 */
|
|
|
+ .tl-node .dot{
|
|
|
+ width:var(--tl-dot);height:var(--tl-dot);
|
|
|
+ border-radius:50%;
|
|
|
+ background:currentColor;
|
|
|
+ justify-self:center;
|
|
|
+ z-index:1
|
|
|
+ }
|
|
|
+ .tl-node.accent .dot{background:var(--accent)}
|
|
|
+ .tl-node .yr{
|
|
|
+ font-family:var(--mono);font-weight:500;
|
|
|
+ font-size:max(13px,1vw);letter-spacing:.04em
|
|
|
+ }
|
|
|
+ .tl-node .multi{
|
|
|
+ font-family:var(--sans);font-weight:200;
|
|
|
+ font-size:clamp(28px,2.8vw,56px);
|
|
|
+ line-height:.95;letter-spacing:-.025em;
|
|
|
+ white-space:nowrap;
|
|
|
+ overflow:hidden;
|
|
|
+ min-width:0
|
|
|
+ }
|
|
|
+ .tl-node .multi .unit{
|
|
|
+ font-size:.36em;font-weight:300;opacity:.6;
|
|
|
+ margin-left:.2em;
|
|
|
+ vertical-align:.42em;
|
|
|
+ letter-spacing:0
|
|
|
+ }
|
|
|
+ .tl-node.accent .multi{color:var(--accent)}
|
|
|
+ .tl-node .desc{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-size:max(12px,.9vw);line-height:1.55;opacity:.78;
|
|
|
+ min-width:0
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 横向时间线 (.timeline-h) — 与 .timeline-v 共享 axis token, 视觉语言一致 */
|
|
|
+ .timeline-h{
|
|
|
+ --tl-axis-w:8px;
|
|
|
+ --tl-dot:8px;
|
|
|
+ position:relative;
|
|
|
+ flex:1;
|
|
|
+ display:flex;align-items:center
|
|
|
+ }
|
|
|
+ .timeline-h::before{
|
|
|
+ content:"";position:absolute;
|
|
|
+ top:50%;left:5%;right:5%;height:1px;
|
|
|
+ transform:translateY(-50%);
|
|
|
+ background:repeating-linear-gradient(to right,currentColor 0 4px,transparent 4px 8px);
|
|
|
+ opacity:.35;pointer-events:none;z-index:0
|
|
|
+ }
|
|
|
+ .timeline-h .tl-row{
|
|
|
+ position:relative;width:100%;
|
|
|
+ display:grid;grid-template-columns:repeat(5,1fr);
|
|
|
+ align-items:center
|
|
|
+ }
|
|
|
+ .timeline-h .th-node{
|
|
|
+ position:relative;display:flex;justify-content:center
|
|
|
+ }
|
|
|
+ /* 横向 dot: 8px 纯色实心,无描边无阴影 (与 P2 保持一致) */
|
|
|
+ .timeline-h .th-node .dot{
|
|
|
+ width:var(--tl-dot);height:var(--tl-dot);
|
|
|
+ border-radius:50%;
|
|
|
+ background:var(--ink);
|
|
|
+ z-index:1;position:relative
|
|
|
+ }
|
|
|
+ .timeline-h .th-node.accent .dot{background:var(--accent)}
|
|
|
+ .timeline-h .th-node .label{
|
|
|
+ position:absolute;left:50%;transform:translateX(-50%);
|
|
|
+ width:13vw;text-align:center;
|
|
|
+ display:flex;flex-direction:column;gap:.4vh
|
|
|
+ }
|
|
|
+ .timeline-h .th-node.up .label{bottom:calc(50% + 22px)}
|
|
|
+ .timeline-h .th-node.down .label{top:calc(50% + 22px)}
|
|
|
+ .timeline-h .th-node .yr{
|
|
|
+ font-family:var(--mono);font-size:max(10px,.74vw);letter-spacing:.06em;
|
|
|
+ color:var(--text-helper);font-weight:500
|
|
|
+ }
|
|
|
+ .timeline-h .th-node.accent .yr{color:var(--accent)}
|
|
|
+ .timeline-h .th-node .name{
|
|
|
+ font-family:var(--sans);font-size:max(13px,1.05vw);font-weight:300;
|
|
|
+ color:var(--text-primary);line-height:1.2;letter-spacing:-.005em
|
|
|
+ }
|
|
|
+ .timeline-h .th-node.accent .name{color:var(--accent)}
|
|
|
+ .timeline-h .th-node .desc{
|
|
|
+ font-family:var(--sans),var(--sans-zh);font-size:max(10px,.78vw);
|
|
|
+ color:var(--text-secondary);font-weight:300;line-height:1.4
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 几何图示 (参考图 5) — SVG-friendly 容器 */
|
|
|
+ .geo-icon{width:5vw;height:5vw;display:block;margin-bottom:2.2vh;color:var(--ink);flex-shrink:0}
|
|
|
+ .slide.dark .geo-icon{color:var(--paper)}
|
|
|
+ .geo-icon svg{width:100%;height:100%;overflow:visible}
|
|
|
+ .geo-icon .stroke{fill:none;stroke:currentColor;stroke-width:1.4}
|
|
|
+ .geo-icon .stroke-accent{fill:none;stroke:var(--accent);stroke-width:1.4}
|
|
|
+ .geo-icon .fill-accent{fill:var(--accent)}
|
|
|
+
|
|
|
+ /* 卡片网格 (参考图 1 卡片漂浮) — 在 canvas-card 内部再分卡 */
|
|
|
+ .sub-grid-3-2{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:1.4vh 1.4vw;flex:1;align-content:stretch;margin-top:3vh}
|
|
|
+ .sub-card{
|
|
|
+ background:var(--grey-1);
|
|
|
+ padding:2.4vh 1.6vw 2vh;
|
|
|
+ display:flex;flex-direction:column;
|
|
|
+ position:relative;border-radius:3px;
|
|
|
+ min-height:0
|
|
|
+ }
|
|
|
+ .slide.dark .sub-card{background:rgba(255,255,255,.06)}
|
|
|
+ .sub-card.accent{background:var(--accent);color:var(--accent-on)}
|
|
|
+ .sub-card.ink{background:var(--ink);color:var(--paper)}
|
|
|
+ .sub-card .nb-corner{
|
|
|
+ position:absolute;top:1.6vh;right:1.4vw;
|
|
|
+ font-family:var(--mono);font-size:max(10px,.78vw);
|
|
|
+ letter-spacing:.18em;opacity:.55
|
|
|
+ }
|
|
|
+ .sub-card .ttl{font-family:var(--sans),var(--sans-zh);font-weight:500;font-size:max(15px,1.5vw);line-height:1.2;letter-spacing:-.015em;margin-bottom:1vh}
|
|
|
+ .sub-card .desc{font-family:var(--sans),var(--sans-zh);font-size:max(11px,.86vw);line-height:1.55;opacity:.78;margin-top:auto}
|
|
|
+ .sub-card .lucide{width:2.4vw;height:2.4vw;stroke-width:1.4;color:currentColor;margin-bottom:1.6vh;flex-shrink:0}
|
|
|
+ .sub-card.accent .lucide{color:var(--accent-on)}
|
|
|
+
|
|
|
+ /* 三层架构纯色块拼图 (参考图 4 + 6) — 横排等高色块 */
|
|
|
+ .stack-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6vw;flex:1;margin-top:6vh;align-items:stretch}
|
|
|
+ .stack-block{
|
|
|
+ display:flex;flex-direction:column;
|
|
|
+ padding:3.2vh 1.8vw 2.4vh;
|
|
|
+ position:relative;
|
|
|
+ min-height:0
|
|
|
+ }
|
|
|
+ .stack-block.b-accent{background:var(--accent);color:var(--accent-on)}
|
|
|
+ .stack-block.b-grey{background:var(--grey-1);color:var(--ink)}
|
|
|
+ .stack-block.b-ink{background:var(--ink);color:var(--paper)}
|
|
|
+ .stack-block .layer-nb{font-family:var(--mono);font-size:max(11px,.82vw);letter-spacing:.22em;opacity:.65;margin-bottom:auto}
|
|
|
+ .stack-block .layer-icon{margin-bottom:1.6vh}
|
|
|
+ .stack-block .layer-icon svg{width:3vw;height:3vw}
|
|
|
+ .stack-block .layer-icon .stroke{fill:none;stroke:currentColor;stroke-width:1.6}
|
|
|
+ .stack-block .layer-ttl{font-family:var(--sans),var(--sans-zh);font-weight:400;font-size:max(17px,2vw);line-height:1.1;margin-top:1vh;letter-spacing:-.02em}
|
|
|
+ .stack-block .layer-desc{font-family:var(--sans),var(--sans-zh);font-weight:400;font-size:max(11px,.88vw);line-height:1.55;opacity:.88;margin-top:1.4vh}
|
|
|
+ .stack-block .lucide{width:2.6vw;height:2.6vw;stroke-width:1.4;margin-bottom:1.6vh;flex-shrink:0}
|
|
|
+ .stack-block .layer-tag{font-family:var(--mono);font-size:max(9px,.7vw);letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-top:1.6vh;border-top:1px solid currentColor;padding-top:1vh}
|
|
|
+
|
|
|
+ /* 不等高柱状 KPI 塔 (参考图 6) */
|
|
|
+ .bar-towers{
|
|
|
+ display:grid;grid-template-columns:repeat(4,1fr);
|
|
|
+ gap:1.2vw;flex:1;align-items:end;margin-top:auto
|
|
|
+ }
|
|
|
+ .bar-tower{
|
|
|
+ display:flex;flex-direction:column;justify-content:flex-end;
|
|
|
+ min-height:0;height:100%
|
|
|
+ }
|
|
|
+ .bar-tower .cap{
|
|
|
+ background:var(--grey-1);
|
|
|
+ height:5.6vh;
|
|
|
+ display:flex;align-items:center;justify-content:center;
|
|
|
+ margin-bottom:.4vh
|
|
|
+ }
|
|
|
+ .bar-tower .cap svg{width:1.6vw;height:1.6vw;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
|
|
|
+ .bar-tower .body-block{
|
|
|
+ flex:0 1 auto;
|
|
|
+ padding:2vh 1.2vw 2vh;
|
|
|
+ display:flex;flex-direction:column;justify-content:flex-end;
|
|
|
+ min-height:18vh
|
|
|
+ }
|
|
|
+ .bar-tower .body-block.h-1{min-height:22vh}
|
|
|
+ .bar-tower .body-block.h-2{min-height:30vh}
|
|
|
+ .bar-tower .body-block.h-3{min-height:38vh}
|
|
|
+ .bar-tower .body-block.h-4{min-height:46vh}
|
|
|
+ /* 默认所有 KPI 塔统一为浅描边卡 — 不抢戏;只有 .b-accent 突出为 IKB */
|
|
|
+ .bar-tower .body-block{background:var(--paper);color:var(--ink);border:1px solid var(--grey-2)}
|
|
|
+ .bar-tower .body-block.b-accent{background:var(--accent);color:var(--accent-on);border-color:var(--accent)}
|
|
|
+ .bar-tower .lbl{font-family:var(--mono);font-size:max(10px,.78vw);letter-spacing:.2em;text-transform:uppercase;opacity:.65;margin-bottom:1vh}
|
|
|
+ .bar-tower .nb{font-family:var(--sans);font-weight:250;font-size:max(20px,2.8vw);line-height:1;letter-spacing:-.03em;font-feature-settings:"tnum"}
|
|
|
+ .bar-tower .body-block.b-accent .nb{font-weight:300}
|
|
|
+ .bar-tower .nb .unit{font-size:.36em;font-weight:300;opacity:.7;margin-left:.08em;vertical-align:.4em}
|
|
|
+ .bar-tower .sub{font-family:var(--sans),var(--sans-zh);font-size:max(11px,.84vw);opacity:.75;margin-top:1.2vh;line-height:1.5}
|
|
|
+ .bar-tower .cap{background:var(--grey-1);color:var(--ink)}
|
|
|
+ .bar-tower .lucide{width:1.6vw;height:1.6vw;stroke-width:1.4}
|
|
|
+
|
|
|
+ /* ============ Carbon Productive Type Tokens ============
|
|
|
+ 用于 PPT 中的"productive 时刻": 列表、表格行、说明文、章节标签
|
|
|
+ 固定 px 字号,密集紧凑;与 vw-based 的 Expressive 巨字形成双极对比 */
|
|
|
+
|
|
|
+ /* category label / eyebrow / section tag — small, bold, uppercase */
|
|
|
+ .t-cat{
|
|
|
+ font-family:var(--mono);
|
|
|
+ font-size:11px;font-weight:600;
|
|
|
+ letter-spacing:.18em;text-transform:uppercase;
|
|
|
+ color:var(--text-helper);line-height:1.3
|
|
|
+ }
|
|
|
+ .t-cat.accent{color:var(--accent)}
|
|
|
+ .t-cat.on-dark{color:rgba(255,255,255,.78)}
|
|
|
+
|
|
|
+ /* page chrome / breadcrumb / running header — extra-small mono */
|
|
|
+ .t-meta{
|
|
|
+ font-family:var(--mono);
|
|
|
+ font-size:11px;font-weight:500;
|
|
|
+ letter-spacing:.16em;text-transform:uppercase;
|
|
|
+ color:var(--text-helper);line-height:1.45
|
|
|
+ }
|
|
|
+
|
|
|
+ /* helper / caption — tiny secondary text */
|
|
|
+ .t-helper{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-size:12px;font-weight:400;
|
|
|
+ color:var(--text-helper);line-height:1.5;
|
|
|
+ letter-spacing:.005em
|
|
|
+ }
|
|
|
+
|
|
|
+ /* body small — list items, table rows, captions */
|
|
|
+ .t-body-sm{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-size:14px;font-weight:400;
|
|
|
+ color:var(--text-secondary);line-height:1.55;
|
|
|
+ letter-spacing:0
|
|
|
+ }
|
|
|
+
|
|
|
+ /* body — paragraphs, descriptions */
|
|
|
+ .t-body{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-size:16px;font-weight:400;
|
|
|
+ color:var(--text-primary);line-height:1.5;
|
|
|
+ letter-spacing:-.005em
|
|
|
+ }
|
|
|
+
|
|
|
+ /* body emphasis — 强调正文 */
|
|
|
+ .t-body-emp{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-size:16px;font-weight:600; /* SemiBold per Carbon */
|
|
|
+ color:var(--text-primary);line-height:1.5;
|
|
|
+ letter-spacing:-.005em
|
|
|
+ }
|
|
|
+
|
|
|
+ /* productive heading — section title within slide */
|
|
|
+ .t-h-prod{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-size:20px;font-weight:600;
|
|
|
+ color:var(--text-primary);line-height:1.4;
|
|
|
+ letter-spacing:-.01em
|
|
|
+ }
|
|
|
+
|
|
|
+ /* dark background variants */
|
|
|
+ .slide.dark .t-cat,.slide.dark .t-meta,.slide.dark .t-helper{color:rgba(255,255,255,.62)}
|
|
|
+ .slide.dark .t-body-sm{color:rgba(255,255,255,.78)}
|
|
|
+ .slide.dark .t-body,.slide.dark .t-body-emp,.slide.dark .t-h-prod{color:var(--paper)}
|
|
|
+ .split-half .half.b-ink .t-cat,.split-half .half.b-ink .t-meta,.split-half .half.b-ink .t-helper{color:rgba(255,255,255,.62)}
|
|
|
+ .split-half .half.b-ink .t-body-sm{color:rgba(255,255,255,.78)}
|
|
|
+ .split-half .half.b-ink .t-body,.split-half .half.b-ink .t-body-emp,.split-half .half.b-ink .t-h-prod{color:var(--paper)}
|
|
|
+
|
|
|
+ /* 斜杠点阵装饰 (参考图 6 左下) */
|
|
|
+ .hatch{
|
|
|
+ background-image:repeating-linear-gradient(135deg,currentColor 0 1px,transparent 1px 8px);
|
|
|
+ opacity:.55
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ========== V3: 高级点阵装饰 — 圆点 / × 号 / 圆圈 ========== */
|
|
|
+ /* 实心圆点矩阵 — 用于大面积装饰 */
|
|
|
+ .dot-mat{
|
|
|
+ --d:14px;
|
|
|
+ background-image:radial-gradient(currentColor 1.4px,transparent 1.6px);
|
|
|
+ background-size:var(--d) var(--d);
|
|
|
+ background-position:0 0;
|
|
|
+ opacity:.5
|
|
|
+ }
|
|
|
+ .dot-mat.lg{--d:22px}
|
|
|
+ .dot-mat.xl{--d:34px}
|
|
|
+ .dot-mat.dense{--d:9px;opacity:.62}
|
|
|
+
|
|
|
+ /* 描边圆圈矩阵 — 工业感 */
|
|
|
+ .ring-mat{
|
|
|
+ --d:18px;
|
|
|
+ background-image:
|
|
|
+ radial-gradient(circle at 50% 50%,transparent 2px,currentColor 2px,currentColor 2.6px,transparent 2.7px);
|
|
|
+ background-size:var(--d) var(--d);
|
|
|
+ opacity:.55
|
|
|
+ }
|
|
|
+ .ring-mat.lg{--d:28px}
|
|
|
+
|
|
|
+ /* × 号矩阵 — SVG mask 实现真正的 × 网格平铺 */
|
|
|
+ .cross-mat{
|
|
|
+ --d:22px;
|
|
|
+ background-color:currentColor;
|
|
|
+ -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><g stroke='black' stroke-width='1.4' stroke-linecap='round' fill='none'><line x1='8' y1='8' x2='14' y2='14'/><line x1='14' y1='8' x2='8' y2='14'/></g></svg>");
|
|
|
+ mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><g stroke='black' stroke-width='1.4' stroke-linecap='round' fill='none'><line x1='8' y1='8' x2='14' y2='14'/><line x1='14' y1='8' x2='8' y2='14'/></g></svg>");
|
|
|
+ -webkit-mask-size:var(--d) var(--d);
|
|
|
+ mask-size:var(--d) var(--d);
|
|
|
+ -webkit-mask-repeat:repeat;mask-repeat:repeat;
|
|
|
+ opacity:.42
|
|
|
+ }
|
|
|
+ .cross-mat.lg{--d:32px}
|
|
|
+
|
|
|
+ /* ========== V3: 几何水平柱状图 ========== */
|
|
|
+ /* 横向柱图: 标签列 + 柱体列 + 数值列 — 严格瑞士网格 */
|
|
|
+ .h-bar-chart{
|
|
|
+ display:grid;
|
|
|
+ grid-template-columns:11em minmax(0,1fr) 8em;
|
|
|
+ gap:1.6vh 1.6vw;
|
|
|
+ align-items:center;
|
|
|
+ margin-top:2.4vh;
|
|
|
+ font-feature-settings:"tnum"
|
|
|
+ }
|
|
|
+ .h-bar-chart .row-lbl{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-weight:500;font-size:max(13px,1vw);
|
|
|
+ letter-spacing:-.005em;
|
|
|
+ text-align:left
|
|
|
+ }
|
|
|
+ .h-bar-chart .row-track{
|
|
|
+ height:3.2vh;
|
|
|
+ background:var(--grey-1);
|
|
|
+ position:relative;
|
|
|
+ overflow:hidden
|
|
|
+ }
|
|
|
+ .h-bar-chart .row-fill{
|
|
|
+ height:100%;
|
|
|
+ background:var(--ink);
|
|
|
+ transition:width 1s cubic-bezier(.5,0,.2,1)
|
|
|
+ }
|
|
|
+ .h-bar-chart .row-fill.accent{background:var(--accent)}
|
|
|
+ .h-bar-chart .row-fill.grey{background:var(--grey-3)}
|
|
|
+ .h-bar-chart .row-val{
|
|
|
+ font-family:var(--sans);font-weight:250;
|
|
|
+ font-size:max(16px,1.5vw);
|
|
|
+ letter-spacing:-.02em;
|
|
|
+ line-height:1
|
|
|
+ }
|
|
|
+ .h-bar-chart .row-val .unit{
|
|
|
+ font-size:.5em;opacity:.55;font-weight:300;
|
|
|
+ margin-left:.15em;letter-spacing:.04em
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 垂直柱图: 用于 KPI 对比页(章节 P8) */
|
|
|
+ .v-bar-chart{
|
|
|
+ display:grid;
|
|
|
+ grid-template-columns:repeat(var(--cols,4),1fr);
|
|
|
+ align-items:end;
|
|
|
+ gap:1.4vw;
|
|
|
+ height:50vh;
|
|
|
+ margin-top:3vh
|
|
|
+ }
|
|
|
+ .v-bar-chart .col{display:flex;flex-direction:column;gap:1.4vh;align-items:stretch;height:100%}
|
|
|
+ .v-bar-chart .col-bar{
|
|
|
+ flex:1 1 auto;
|
|
|
+ background:var(--grey-1);
|
|
|
+ border-top:2px solid var(--ink);
|
|
|
+ position:relative;
|
|
|
+ display:flex;align-items:flex-start;justify-content:center;
|
|
|
+ padding-top:1vh
|
|
|
+ }
|
|
|
+ .v-bar-chart .col-bar.accent{background:var(--accent);border-top-color:var(--accent);color:var(--accent-on)}
|
|
|
+ .v-bar-chart .col-bar.ink{background:var(--ink);color:var(--paper);border-top-color:var(--ink)}
|
|
|
+ .v-bar-chart .col-bar .v{
|
|
|
+ font-family:var(--sans);font-weight:250;
|
|
|
+ font-size:max(18px,1.6vw);letter-spacing:-.02em
|
|
|
+ }
|
|
|
+ .v-bar-chart .col-lbl{
|
|
|
+ font-family:var(--mono);font-size:max(10px,.74vw);
|
|
|
+ letter-spacing:.18em;text-transform:uppercase;opacity:.6;
|
|
|
+ text-align:center;flex:0 0 auto
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 对仗对比双栏 (章节 P9) */
|
|
|
+ .duo-compare{
|
|
|
+ display:grid;grid-template-columns:1fr 1px 1fr;
|
|
|
+ gap:0 3.4vw;
|
|
|
+ flex:1;align-items:stretch;margin-top:8vh
|
|
|
+ }
|
|
|
+ .duo-compare .vrule{background:var(--grey-2);width:1px;align-self:stretch}
|
|
|
+ .duo-compare .col{display:flex;flex-direction:column;gap:1.6vh;padding:0 .4vw}
|
|
|
+ .duo-compare .col-tag{
|
|
|
+ font-family:var(--mono);font-size:max(10px,.74vw);
|
|
|
+ letter-spacing:.22em;text-transform:uppercase;
|
|
|
+ color:var(--grey-3);
|
|
|
+ display:flex;align-items:center;gap:.6vw
|
|
|
+ }
|
|
|
+ .duo-compare .col-tag .num{
|
|
|
+ font-weight:600;color:var(--ink);
|
|
|
+ border:1px solid var(--ink);
|
|
|
+ padding:.2em .6em;font-size:.92em
|
|
|
+ }
|
|
|
+ .duo-compare .col.accent .col-tag .num{color:var(--accent);border-color:var(--accent)}
|
|
|
+ .duo-compare .col-ttl{
|
|
|
+ font-family:var(--sans),var(--sans-zh);font-weight:200;
|
|
|
+ font-size:3.6vw;line-height:1;letter-spacing:-.03em
|
|
|
+ }
|
|
|
+ .duo-compare .col.accent .col-ttl{color:var(--accent)}
|
|
|
+ .duo-compare .col-desc{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-size:max(13px,1.04vw);line-height:1.55;opacity:.78;
|
|
|
+ max-width:30vw
|
|
|
+ }
|
|
|
+ .duo-compare .col-list{
|
|
|
+ list-style:none;display:flex;flex-direction:column;gap:1vh;
|
|
|
+ margin-top:auto;padding-top:2vh;border-top:1px solid var(--grey-2)
|
|
|
+ }
|
|
|
+ .duo-compare .col-list li{
|
|
|
+ font-family:var(--sans),var(--sans-zh);
|
|
|
+ font-size:max(11px,.88vw);line-height:1.5;
|
|
|
+ padding-left:1.4em;position:relative
|
|
|
+ }
|
|
|
+ .duo-compare .col-list li::before{
|
|
|
+ content:"";position:absolute;left:0;top:.6em;
|
|
|
+ width:.5em;height:1px;background:currentColor;opacity:.55
|
|
|
+ }
|
|
|
+ .duo-compare .col.accent .col-list li::before{background:var(--accent);opacity:1}
|
|
|
+
|
|
|
+ /* 半屏 statement (参考图 7) */
|
|
|
+ .split-half{display:grid;grid-template-columns:1fr 1fr;gap:0;flex:1;align-items:stretch}
|
|
|
+ .split-half > .half{padding:5vh 3.4vw;display:flex;flex-direction:column;min-width:0}
|
|
|
+ .split-half > .half.r-border{border-left:1px solid rgba(127,127,127,.22)}
|
|
|
+ .split-half > .half.b-grey{background:var(--grey-1)}
|
|
|
+ .split-half > .half.b-accent{background:var(--accent);color:var(--accent-on)}
|
|
|
+ .split-half > .half.b-ink{background:var(--ink);color:var(--paper)}
|
|
|
+
|
|
|
+ /* 极简页眉 — t-meta 风格 (Carbon productive label-01) */
|
|
|
+ .canvas-card .chrome-min{
|
|
|
+ display:flex;justify-content:space-between;align-items:flex-start;
|
|
|
+ font-family:var(--mono);font-size:11px;font-weight:500;
|
|
|
+ letter-spacing:.16em;text-transform:uppercase;
|
|
|
+ color:var(--text-helper);
|
|
|
+ flex:0 0 auto;
|
|
|
+ margin-bottom:var(--sp-9); /* 48px */
|
|
|
+ }
|
|
|
+ .canvas-card .chrome-min.tight{margin-bottom:var(--sp-7)} /* 32px */
|
|
|
+ .canvas-card .chrome-min .l, .canvas-card .chrome-min .r{
|
|
|
+ max-width:48vw;line-height:1.5
|
|
|
+ }
|
|
|
+ .slide.dark .canvas-card .chrome-min,.split-half .half.b-ink .canvas-card .chrome-min{color:rgba(255,255,255,.62)}
|
|
|
+
|
|
|
+ /* 响应式降级 */
|
|
|
+ @media (max-width:900px){
|
|
|
+ .h-hero{font-size:16vw}
|
|
|
+ .h-hero-zh{font-size:13vw}
|
|
|
+ .h-xl{font-size:9vw}
|
|
|
+ .h-xl-zh{font-size:8vw}
|
|
|
+ .kpi-hero{font-size:32vw}
|
|
|
+ .kpi-big{font-size:16vw}
|
|
|
+ .pipeline{grid-template-columns:repeat(2,1fr)}
|
|
|
+ .grid-2-7-5,.grid-2-6-6,.grid-2-8-4,.grid-2-4-8{grid-template-columns:1fr}
|
|
|
+ .grid-12{grid-template-columns:repeat(6,1fr)}
|
|
|
+ }
|
|
|
+</style>
|
|
|
+</head>
|
|
|
+<body class="canvas-mode">
|
|
|
+<script>
|
|
|
+ // Windows 平台标记 — 雅黑没有 ExtraLight,需要字重补偿
|
|
|
+ if(/Win/i.test(navigator.platform || navigator.userAgentData?.platform || '')){
|
|
|
+ document.body.classList.add('is-win');
|
|
|
+ }
|
|
|
+ (function(){
|
|
|
+ const KEY = 'guizang-ppt-low-power';
|
|
|
+ const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
|
+ const stored = localStorage.getItem(KEY);
|
|
|
+ window.__lowPowerMode = stored === '1' || (stored === null && reduced);
|
|
|
+ function updateHint(){
|
|
|
+ const hint = document.getElementById('hint');
|
|
|
+ if(hint) hint.textContent = `← → 翻页 · B ${window.__lowPowerMode ? '动态' : '静态'} · ESC 索引`;
|
|
|
+ }
|
|
|
+ window.__setLowPowerMode = function(on, opts={}){
|
|
|
+ window.__lowPowerMode = !!on;
|
|
|
+ document.body.classList.toggle('low-power', window.__lowPowerMode);
|
|
|
+ if(opts.persist !== false) localStorage.setItem(KEY, window.__lowPowerMode ? '1' : '0');
|
|
|
+ if(window.__lowPowerMode && document.getAnimations){
|
|
|
+ document.getAnimations().forEach(a=>a.cancel());
|
|
|
+ }
|
|
|
+ updateHint();
|
|
|
+ dispatchEvent(new CustomEvent('swiss-low-power-change', {detail:{on:window.__lowPowerMode}}));
|
|
|
+ if(window.__playSlide) window.__playSlide(window.__currentSlideIndex || 0);
|
|
|
+ };
|
|
|
+ document.body.classList.toggle('low-power', window.__lowPowerMode);
|
|
|
+ addEventListener('DOMContentLoaded', updateHint, {once:true});
|
|
|
+ })();
|
|
|
+</script>
|
|
|
+
|
|
|
+<canvas id="bg-grid" class="bg"></canvas>
|
|
|
+<div id="hint">← → 翻页 · B 静态 · ESC 索引</div>
|
|
|
+
|
|
|
+<div id="deck">
|
|
|
+
|
|
|
+<!-- ============================================================
|
|
|
+ SLIDES 插入区 · 在此处填充所有 <section class="slide ..."> 页面
|
|
|
+ 页面骨架参考 references/layouts-swiss.md
|
|
|
+ 主题色配置参考 references/themes-swiss.md
|
|
|
+ ============================================================ -->
|
|
|
+<!-- SLIDES_HERE · 在此处粘贴 <section class="slide ..."> 页面块
|
|
|
+ - 页面骨架直接从 references/layouts-swiss.md 拷贝
|
|
|
+ - data-animate="..." 必须命中下方 RECIPES 字典里的已有 recipe 名之一(P23/P24 可复用 grid-reveal)
|
|
|
+ - 主题色配置参考 references/themes-swiss.md (默认 IKB 克莱因蓝) -->
|
|
|
+
|
|
|
+<!-- ============ 示例:第 1 页 · Hero Cover · IKB 满屏 + ASCII 呼吸场(默认推荐) ============
|
|
|
+ ⚠️ P0 对齐法则(每页都要过):
|
|
|
+ 1. .canvas-card 已自带 padding:5.6vh 5vw 4.4vh,所有页面内容直接放在 canvas-card 子元素里,
|
|
|
+ 子元素**不要再加水平 padding**,否则会比 chrome-min 内缩一圈、左右不对齐.
|
|
|
+ 2. .slide.split .canvas-card{padding:0} 已被 CSS 覆盖,
|
|
|
+ split 模式下两个 .half 自己控制 padding(常用 5.6vh 3.6vw 4.4vh),与本规则不冲突.
|
|
|
+ 3. 大字号一律用双约束 font-size:min(Xvw, Yvh),Y ≥ X * 1.6 才不会在 16:9 屏被高度截断.
|
|
|
+ 4. kicker 必须在大标题"上方",不是左侧——禁止 grid-template-columns:auto 1fr 把它们压成左右.
|
|
|
+
|
|
|
+ 封面/封底设计语言(默认 IKB 满屏 + ASCII 呼吸场):
|
|
|
+ - section 用 .slide.accent (满屏 IKB,不是 light 白底)
|
|
|
+ - canvas-card 内首位插入 <canvas class="ascii-bg" aria-hidden="true">,本文件底部 IIFE 自动启动
|
|
|
+ - 主标题反白 weight 200,强调字用斜体而非 var(--accent)(底已是蓝,蓝压蓝看不见)
|
|
|
+ - 不要再放编号大字"01"——chrome-min 已经标 01/NN -->
|
|
|
+<section class="slide accent" data-animate="hero">
|
|
|
+ <div class="canvas-card">
|
|
|
+ <canvas class="ascii-bg" aria-hidden="true"></canvas>
|
|
|
+ <div class="chrome-min">
|
|
|
+ <div class="l">[必填] Deck 标题 · Issue/Field Note 编号</div>
|
|
|
+ <div class="r">SS · 25.05.10 · 01 / NN</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 主体:padding 必须为 0,不要再叠 5vw,否则左右对不齐 chrome-min -->
|
|
|
+ <div style="flex:1;padding:0;display:grid;grid-template-rows:auto 1fr auto;gap:2.6vh">
|
|
|
+ <div data-anim="kicker" class="t-meta" style="color:rgba(255,255,255,.78);letter-spacing:.22em">[必填] 章节英文 / Section En</div>
|
|
|
+
|
|
|
+ <h1 data-anim="title" style="align-self:center;font-family:var(--sans),var(--sans-zh);font-weight:200;font-size:min(11.6vw,19vh);line-height:.94;letter-spacing:-.025em;color:#fff">[必填] 中文主标题<br/>(≤ 12 字,可在某字加 <span style="font-style:italic;font-weight:300">italic</span> 微强调)</h1>
|
|
|
+
|
|
|
+ <div data-anim="bottom" style="display:grid;grid-template-rows:auto auto;gap:1.6vh;border-top:1px solid rgba(255,255,255,.22);padding-top:2vh">
|
|
|
+ <div data-anim="lead" class="lead" style="max-width:52ch;color:rgba(255,255,255,.86);font-weight:300">[必填] 一段 1-2 行的副标 / 引子,定调全场.</div>
|
|
|
+ <div style="display:flex;justify-content:space-between;align-items:end">
|
|
|
+ <div class="t-meta" style="color:rgba(255,255,255,.6)">[选填] 作者 · 日期 · 出处</div>
|
|
|
+ <div class="t-meta" style="color:rgba(255,255,255,.6)">→ swipe / arrow keys</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+<!-- ============ 示例:最后一页 · Closing Manifesto · 左 IKB+ASCII / 右白底 takeaway ============
|
|
|
+ 与封面 IKB 首尾呼应,但收束更克制:左半保留 ASCII 呼吸场承载宣言,右半白底列 3 条 takeaway.
|
|
|
+ 第 03 条用 var(--accent) IKB 蓝强调("单一锚点"原则),首尾形成"色彩闭环". -->
|
|
|
+<section class="slide split" data-animate="split-statement">
|
|
|
+ <div class="canvas-card">
|
|
|
+ <div class="split-half">
|
|
|
+ <!-- 左半 · IKB 宣言 + ASCII 呼吸场 -->
|
|
|
+ <div class="half b-accent" style="padding:5.6vh 3.6vw 4.4vh;justify-content:space-between;position:relative;overflow:hidden">
|
|
|
+ <canvas class="ascii-bg" aria-hidden="true"></canvas>
|
|
|
+ <div class="chrome-min" style="margin-bottom:0;position:relative;z-index:1">
|
|
|
+ <div class="l">NN / NN</div>
|
|
|
+ <div class="r">CLOSING</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div data-anim="manifesto" style="display:flex;flex-direction:column;gap:2vh;position:relative;z-index:1">
|
|
|
+ <div class="t-meta" style="color:rgba(255,255,255,.78);letter-spacing:.22em;margin-bottom:1.6vh">MANIFESTO</div>
|
|
|
+ <h2 style="font-family:var(--sans),var(--sans-zh);font-size:min(8vw,14vh);line-height:.94;letter-spacing:-.025em;font-weight:200;color:#fff">[必填] Build a model.<br/>Run <span style="font-style:italic;font-weight:300">forever</span>.</h2>
|
|
|
+ <div style="font-family:var(--sans),var(--sans-zh);font-size:max(13px,1vw);line-height:1.6;color:rgba(255,255,255,.82);font-weight:300;max-width:36ch;margin-top:1.4vh">[必填] 一句 1-2 行的中文/英文注脚,把宣言落地.</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div data-anim="signature" style="display:flex;justify-content:space-between;align-items:end;border-top:1px solid rgba(255,255,255,.22);padding-top:2vh;position:relative;z-index:1">
|
|
|
+ <div class="t-meta" style="color:rgba(255,255,255,.62)">[选填] 作者 · 头衔</div>
|
|
|
+ <div class="t-meta" style="color:rgba(255,255,255,.62)">YY.MM.DD</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右半 · 三条 takeaway · 白底承载理性收束 -->
|
|
|
+ <div class="half" style="padding:5.6vh 3.6vw 4.4vh;justify-content:space-between">
|
|
|
+ <div class="chrome-min">
|
|
|
+ <div class="l">TAKEAWAYS</div>
|
|
|
+ <div class="r">03 RULES</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div data-anim="rules" style="display:flex;flex-direction:column;gap:0">
|
|
|
+ <div style="display:grid;grid-template-columns:auto 1fr;gap:2vw;align-items:start;padding:2.6vh 0;border-top:1px solid var(--border-subtle)">
|
|
|
+ <div style="font-family:var(--sans);font-weight:200;font-size:min(4.4vw,7.8vh);line-height:.9;color:var(--text-primary)">01</div>
|
|
|
+ <div>
|
|
|
+ <h3 style="font-family:var(--sans),var(--sans-zh);font-weight:400;font-size:max(18px,1.8vw);line-height:1.2;letter-spacing:-.015em;color:var(--text-primary);margin-bottom:1vh">[必填] takeaway 标题 01</h3>
|
|
|
+ <p style="font-family:var(--sans),var(--sans-zh);font-size:max(12px,.92vw);line-height:1.6;color:var(--text-secondary);font-weight:300">[必填] 1-2 行展开说明.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid;grid-template-columns:auto 1fr;gap:2vw;align-items:start;padding:2.6vh 0;border-top:1px solid var(--border-subtle)">
|
|
|
+ <div style="font-family:var(--sans);font-weight:200;font-size:min(4.4vw,7.8vh);line-height:.9;color:var(--text-primary)">02</div>
|
|
|
+ <div>
|
|
|
+ <h3 style="font-family:var(--sans),var(--sans-zh);font-weight:400;font-size:max(18px,1.8vw);line-height:1.2;letter-spacing:-.015em;color:var(--text-primary);margin-bottom:1vh">[必填] takeaway 标题 02</h3>
|
|
|
+ <p style="font-family:var(--sans),var(--sans-zh);font-size:max(12px,.92vw);line-height:1.6;color:var(--text-secondary);font-weight:300">[必填] 1-2 行展开说明.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display:grid;grid-template-columns:auto 1fr;gap:2vw;align-items:start;padding:2.6vh 0;border-top:1px solid var(--border-subtle);border-bottom:2px solid var(--accent)">
|
|
|
+ <div style="font-family:var(--sans);font-weight:200;font-size:min(4.4vw,7.8vh);line-height:.9;color:var(--accent)">03</div>
|
|
|
+ <div>
|
|
|
+ <h3 style="font-family:var(--sans),var(--sans-zh);font-weight:400;font-size:max(18px,1.8vw);line-height:1.2;letter-spacing:-.015em;color:var(--accent);margin-bottom:1vh">[必填] takeaway 标题 03 · accent 强调</h3>
|
|
|
+ <p style="font-family:var(--sans),var(--sans-zh);font-size:max(12px,.92vw);line-height:1.6;color:var(--text-secondary);font-weight:300">[必填] 最后一条用 IKB 强调,与封面色彩首尾闭环.</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div data-anim="foot" class="t-meta" style="color:var(--text-helper);text-align:right">→ 完 · END OF FIELD NOTE</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+
|
|
|
+</div>
|
|
|
+
|
|
|
+<div id="nav"></div>
|
|
|
+
|
|
|
+<script>
|
|
|
+/* =============== WebGL 网格背景 (瑞士风专用) ===============
|
|
|
+ 极简移动网格 + 微弱点阵叠加,营造"工业感、精准感"
|
|
|
+ - 主网格: 缓慢漂移的细线网格
|
|
|
+ - 次级: 鼠标附近的极细点阵微扰
|
|
|
+ - 颜色: 跟随主题(浅底深线 / 深底亮线),配合 mix-blend-mode
|
|
|
+*/
|
|
|
+const VS = `attribute vec2 position;void main(){gl_Position=vec4(position,0.0,1.0);}`;
|
|
|
+
|
|
|
+const FS = `precision highp float;
|
|
|
+uniform vec2 u_resolution;
|
|
|
+uniform float u_time;
|
|
|
+uniform vec2 u_mouse;
|
|
|
+uniform float u_dark; // 0 = light, 1 = dark
|
|
|
+uniform vec3 u_accent;
|
|
|
+
|
|
|
+float gridLine(vec2 uv, float spacing, float thickness){
|
|
|
+ vec2 g = abs(fract(uv / spacing) - 0.5);
|
|
|
+ float d = min(g.x, g.y);
|
|
|
+ return 1.0 - smoothstep(thickness - 0.005, thickness + 0.005, d);
|
|
|
+}
|
|
|
+
|
|
|
+float dot2(vec2 p){ return dot(p,p); }
|
|
|
+
|
|
|
+void main(){
|
|
|
+ vec2 uv = gl_FragCoord.xy / u_resolution.xy;
|
|
|
+ float aspect = u_resolution.x / u_resolution.y;
|
|
|
+ vec2 p = uv;
|
|
|
+ p.x *= aspect;
|
|
|
+
|
|
|
+ // 缓慢平移
|
|
|
+ vec2 drift = vec2(u_time * 0.008, u_time * 0.005);
|
|
|
+ vec2 gp = p + drift;
|
|
|
+
|
|
|
+ // 主细网格 (大间距)
|
|
|
+ float mainGrid = gridLine(gp, 0.12, 0.012);
|
|
|
+ // 次级网格 (更细更密)
|
|
|
+ float subGrid = gridLine(gp, 0.024, 0.04) * 0.4;
|
|
|
+
|
|
|
+ // 鼠标附近的强化
|
|
|
+ vec2 m = u_mouse;
|
|
|
+ m.x *= aspect;
|
|
|
+ float md = length(p - m);
|
|
|
+ float mInfluence = exp(-md * 4.0) * 0.5;
|
|
|
+
|
|
|
+ float gridStrength = (mainGrid + subGrid * 0.5) * (0.45 + mInfluence);
|
|
|
+
|
|
|
+ // 点阵 (作为基底)
|
|
|
+ vec2 dotGrid = fract(gp * 50.0) - 0.5;
|
|
|
+ float dotMask = 1.0 - smoothstep(0.05, 0.14, length(dotGrid));
|
|
|
+ // 用低频噪声调制点阵密度
|
|
|
+ float wave = sin(gp.x * 1.4 + u_time * 0.15) * cos(gp.y * 1.6 - u_time * 0.12);
|
|
|
+ dotMask *= smoothstep(-0.3, 0.6, wave) * 0.6;
|
|
|
+
|
|
|
+ // 颜色: 浅底用深线条,深底用浅线条;高亮处带 accent 痕迹
|
|
|
+ vec3 lineColor = mix(vec3(0.08), vec3(0.92), u_dark);
|
|
|
+ vec3 bgColor = mix(vec3(0.97, 0.97, 0.96), vec3(0.06, 0.06, 0.07), u_dark);
|
|
|
+
|
|
|
+ // accent 暗示 (鼠标附近偷渡一点 accent 色)
|
|
|
+ vec3 col = bgColor;
|
|
|
+ col = mix(col, lineColor, gridStrength * 0.55);
|
|
|
+ col = mix(col, lineColor, dotMask * 0.35);
|
|
|
+ col = mix(col, u_accent, mInfluence * 0.18);
|
|
|
+
|
|
|
+ gl_FragColor = vec4(col, 1.0);
|
|
|
+}`;
|
|
|
+
|
|
|
+const mouse={x:0.5,y:0.5};
|
|
|
+addEventListener('mousemove',e=>{mouse.x=e.clientX/innerWidth;mouse.y=1-e.clientY/innerHeight});
|
|
|
+
|
|
|
+function bootGL(canvasId, fsSrc){
|
|
|
+ const canvas=document.getElementById(canvasId);
|
|
|
+ const gl=canvas.getContext('webgl',{alpha:true,antialias:true,premultipliedAlpha:false});
|
|
|
+ if(!gl) return ()=>false;
|
|
|
+ const mk=(t,s)=>{const sh=gl.createShader(t);gl.shaderSource(sh,s);gl.compileShader(sh);return sh};
|
|
|
+ const prog=gl.createProgram();
|
|
|
+ gl.attachShader(prog,mk(gl.VERTEX_SHADER,VS));
|
|
|
+ gl.attachShader(prog,mk(gl.FRAGMENT_SHADER,fsSrc));
|
|
|
+ gl.linkProgram(prog);gl.useProgram(prog);
|
|
|
+ const buf=gl.createBuffer();
|
|
|
+ gl.bindBuffer(gl.ARRAY_BUFFER,buf);
|
|
|
+ gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),gl.STATIC_DRAW);
|
|
|
+ const pos=gl.getAttribLocation(prog,'position');
|
|
|
+ gl.enableVertexAttribArray(pos);gl.vertexAttribPointer(pos,2,gl.FLOAT,false,0,0);
|
|
|
+ const lRes=gl.getUniformLocation(prog,'u_resolution');
|
|
|
+ const lT=gl.getUniformLocation(prog,'u_time');
|
|
|
+ const lM=gl.getUniformLocation(prog,'u_mouse');
|
|
|
+ const lD=gl.getUniformLocation(prog,'u_dark');
|
|
|
+ const lA=gl.getUniformLocation(prog,'u_accent');
|
|
|
+ const resize=()=>{
|
|
|
+ const d=Math.min(window.devicePixelRatio||1,2);
|
|
|
+ canvas.width=innerWidth*d;canvas.height=innerHeight*d;
|
|
|
+ gl.viewport(0,0,canvas.width,canvas.height);
|
|
|
+ };
|
|
|
+ addEventListener('resize',resize);resize();
|
|
|
+
|
|
|
+ // 读取 CSS 变量,把 accent 颜色塞进 shader
|
|
|
+ function readAccent(){
|
|
|
+ const cs = getComputedStyle(document.documentElement);
|
|
|
+ const hex = cs.getPropertyValue('--accent').trim() || '#002FA7';
|
|
|
+ const m = hex.match(/^#([0-9a-f]{6})$/i);
|
|
|
+ if(!m) return [0, 0.18, 0.65];
|
|
|
+ const n = parseInt(m[1], 16);
|
|
|
+ return [((n>>16)&255)/255, ((n>>8)&255)/255, (n&255)/255];
|
|
|
+ }
|
|
|
+ let accent = readAccent();
|
|
|
+ let dark = 0;
|
|
|
+
|
|
|
+ return (tSec, isDark)=>{
|
|
|
+ if(isDark !== undefined) dark = isDark ? 1 : 0;
|
|
|
+ accent = readAccent();
|
|
|
+ gl.uniform2f(lRes,canvas.width,canvas.height);
|
|
|
+ gl.uniform1f(lT,tSec);
|
|
|
+ gl.uniform2f(lM,mouse.x,mouse.y);
|
|
|
+ gl.uniform1f(lD,dark);
|
|
|
+ gl.uniform3f(lA,accent[0],accent[1],accent[2]);
|
|
|
+ gl.drawArrays(gl.TRIANGLES,0,6);
|
|
|
+ return true;
|
|
|
+ };
|
|
|
+}
|
|
|
+// canvas-mode / low-power: skip WebGL draw loop (no active RAF loop)
|
|
|
+let darkMode=false;
|
|
|
+let gridCtrl=null, gridRAF=0, gridT0=Date.now();
|
|
|
+function startGrid(){
|
|
|
+ if(document.body.classList.contains('canvas-mode') || window.__lowPowerMode || gridRAF) return;
|
|
|
+ if(!gridCtrl) gridCtrl = bootGL('bg-grid',FS);
|
|
|
+ if(!gridCtrl) return;
|
|
|
+ gridT0=Date.now();
|
|
|
+ function loop(){
|
|
|
+ if(window.__lowPowerMode){gridRAF=0;return;}
|
|
|
+ const t=(Date.now()-gridT0)/1000;
|
|
|
+ gridCtrl(t, darkMode);
|
|
|
+ gridRAF=requestAnimationFrame(loop);
|
|
|
+ }
|
|
|
+ gridRAF=requestAnimationFrame(loop);
|
|
|
+}
|
|
|
+function stopGrid(){
|
|
|
+ if(gridRAF) cancelAnimationFrame(gridRAF);
|
|
|
+ gridRAF=0;
|
|
|
+}
|
|
|
+if(document.body.classList.contains('canvas-mode')){
|
|
|
+ const c=document.getElementById('bg-grid');
|
|
|
+ if(c) c.remove();
|
|
|
+}else{
|
|
|
+ startGrid();
|
|
|
+}
|
|
|
+addEventListener('swiss-low-power-change', e=>{e.detail.on ? stopGrid() : startGrid();});
|
|
|
+
|
|
|
+// =============== 导航 ===============
|
|
|
+const deck=document.getElementById('deck');
|
|
|
+const slides=deck.querySelectorAll('.slide');
|
|
|
+const nav=document.getElementById('nav');
|
|
|
+let idx=0,total=slides.length,lock=false;
|
|
|
+
|
|
|
+deck.style.width=(total*100)+'vw';
|
|
|
+
|
|
|
+slides.forEach((s,i)=>{
|
|
|
+ const b=document.createElement('button');
|
|
|
+ b.className='dot';b.dataset.i=i;b.setAttribute('aria-label','Page '+(i+1));
|
|
|
+ b.onclick=()=>go(i);
|
|
|
+ nav.appendChild(b);
|
|
|
+});
|
|
|
+
|
|
|
+function go(n){
|
|
|
+ if(lock)return;
|
|
|
+ idx=Math.max(0,Math.min(total-1,n));
|
|
|
+ window.__currentSlideIndex = idx;
|
|
|
+ deck.style.transform=`translateX(${-idx*100}vw)`;
|
|
|
+ nav.querySelectorAll('.dot').forEach((d,i)=>d.classList.toggle('active',i===idx));
|
|
|
+ const el=slides[idx];
|
|
|
+ const isDark = el.classList.contains('dark') || el.classList.contains('accent');
|
|
|
+ document.body.classList.toggle('dark-bg', isDark);
|
|
|
+ darkMode = isDark;
|
|
|
+ if(window.__playSlide) setTimeout(()=>window.__playSlide(idx), 450);
|
|
|
+ lock=true;setTimeout(()=>lock=false,700);
|
|
|
+}
|
|
|
+
|
|
|
+/* =============== ESC 索引视图 =============== */
|
|
|
+let overviewOn=false;
|
|
|
+const ov=document.createElement('div');
|
|
|
+ov.id='overview';
|
|
|
+ov.style.cssText='position:fixed;inset:0;z-index:100;background:rgba(250,250,248,.96);backdrop-filter:blur(12px);display:none;overflow-y:auto;padding:4vh 4vw';
|
|
|
+document.body.appendChild(ov);
|
|
|
+
|
|
|
+function buildOverview(){
|
|
|
+ ov.innerHTML='';
|
|
|
+ const grid=document.createElement('div');
|
|
|
+ grid.style.cssText='display:grid;grid-template-columns:repeat(4,1fr);gap:2vh 1.6vw;max-width:90vw;margin:0 auto';
|
|
|
+ slides.forEach((s,i)=>{
|
|
|
+ const card=document.createElement('div');
|
|
|
+ card.style.cssText='cursor:pointer;overflow:hidden;border:2px solid '+(i===idx?'var(--accent)':'rgba(0,0,0,.12)')+';transition:border-color .2s';
|
|
|
+ card.onmouseenter=()=>card.style.borderColor='rgba(0,0,0,.4)';
|
|
|
+ card.onmouseleave=()=>card.style.borderColor=i===idx?'var(--accent)':'rgba(0,0,0,.12)';
|
|
|
+ const wrap=document.createElement('div');
|
|
|
+ const isDark = s.classList.contains('dark') || s.classList.contains('accent');
|
|
|
+ wrap.style.cssText='width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;pointer-events:none;background:'+(isDark?'var(--ink)':'var(--paper)');
|
|
|
+ const clone=s.cloneNode(true);
|
|
|
+ clone.style.cssText='width:100vw;height:100vh;transform:scale('+(1/4.5)+');transform-origin:top left;position:absolute;top:0;left:0;pointer-events:none';
|
|
|
+ wrap.appendChild(clone);
|
|
|
+ const label=document.createElement('div');
|
|
|
+ label.style.cssText='padding:6px 10px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);opacity:.7';
|
|
|
+ label.textContent=(i+1)+' / '+total;
|
|
|
+ card.appendChild(wrap);
|
|
|
+ card.appendChild(label);
|
|
|
+ card.onclick=()=>{toggleOverview();go(i)};
|
|
|
+ grid.appendChild(card);
|
|
|
+ });
|
|
|
+ ov.appendChild(grid);
|
|
|
+}
|
|
|
+
|
|
|
+function toggleOverview(){
|
|
|
+ overviewOn=!overviewOn;
|
|
|
+ if(overviewOn){buildOverview();ov.style.display='block';}
|
|
|
+ else{ov.style.display='none';}
|
|
|
+}
|
|
|
+
|
|
|
+addEventListener('keydown',e=>{
|
|
|
+ if(e.key==='Escape'){e.preventDefault();toggleOverview();return;}
|
|
|
+ if(e.key && e.key.toLowerCase()==='b' && !e.metaKey && !e.ctrlKey && !e.altKey){
|
|
|
+ e.preventDefault();
|
|
|
+ window.__setLowPowerMode(!window.__lowPowerMode);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(overviewOn)return;
|
|
|
+ if(e.key==='ArrowRight'||e.key==='PageDown'||e.key===' '||e.key==='ArrowDown'){
|
|
|
+ if(window.__pipeAdvance && window.__pipeAdvance()) return;
|
|
|
+ go(idx+1);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(e.key==='ArrowLeft'||e.key==='PageUp'||e.key==='ArrowUp')go(idx-1);
|
|
|
+ if(e.key==='Home')go(0);
|
|
|
+ if(e.key==='End')go(total-1);
|
|
|
+});
|
|
|
+
|
|
|
+let wheelTO=null,wheelAcc=0;
|
|
|
+addEventListener('wheel',e=>{
|
|
|
+ wheelAcc+=e.deltaY+e.deltaX;
|
|
|
+ if(Math.abs(wheelAcc)>50){
|
|
|
+ if(wheelAcc>0 && window.__pipeAdvance && window.__pipeAdvance()){
|
|
|
+ wheelAcc=0;
|
|
|
+ }else{
|
|
|
+ go(idx+(wheelAcc>0?1:-1));wheelAcc=0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ clearTimeout(wheelTO);wheelTO=setTimeout(()=>wheelAcc=0,150);
|
|
|
+},{passive:true});
|
|
|
+
|
|
|
+let tx=0,ty=0;
|
|
|
+addEventListener('touchstart',e=>{tx=e.touches[0].clientX;ty=e.touches[0].clientY},{passive:true});
|
|
|
+addEventListener('touchend',e=>{
|
|
|
+ const dx=(e.changedTouches[0].clientX-tx);
|
|
|
+ const dy=(e.changedTouches[0].clientY-ty);
|
|
|
+ if(Math.abs(dx)>50&&Math.abs(dx)>Math.abs(dy)){
|
|
|
+ if(dx<0 && window.__pipeAdvance && window.__pipeAdvance()) return;
|
|
|
+ go(idx+(dx<0?1:-1));
|
|
|
+ }
|
|
|
+},{passive:true});
|
|
|
+
|
|
|
+const initialSlideParam = new URLSearchParams(location.search).get('slide');
|
|
|
+const initialSlide = initialSlideParam ? Number(initialSlideParam) - 1 : 0;
|
|
|
+go(Number.isFinite(initialSlide) ? initialSlide : 0);
|
|
|
+</script>
|
|
|
+<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|
|
+<script>lucide.createIcons();</script>
|
|
|
+
|
|
|
+<!-- Motion One 动效引擎 (与原模板一致) -->
|
|
|
+<script type="module">
|
|
|
+let motion;
|
|
|
+try {
|
|
|
+ motion = await import('./assets/motion.min.js');
|
|
|
+} catch(e1) {
|
|
|
+ try {
|
|
|
+ motion = await import('https://cdn.jsdelivr.net/npm/motion@11.11.17/+esm');
|
|
|
+ } catch(e2) {
|
|
|
+ console.warn('[motion] local + CDN both failed, disabling animations', e1, e2);
|
|
|
+ document.querySelectorAll('[data-anim]').forEach(el=>{el.style.opacity='1';el.style.transform='none'});
|
|
|
+ document.querySelectorAll('[data-animate="pipeline"] [data-anim]').forEach(el=>el.style.opacity='1');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+if(motion){
|
|
|
+ const { animate } = motion;
|
|
|
+ document.body.classList.add('motion-ready');
|
|
|
+
|
|
|
+ /* ============================================================
|
|
|
+ IBM Carbon Motion · 每个 recipe 服务一种表达
|
|
|
+ 不是一刀切的 stagger,而是把动效绑在内容语义上
|
|
|
+ ============================================================ */
|
|
|
+ const EASE_PROD = [.2, 0, .38, .9];
|
|
|
+ const EASE_ENTRY_EXP = [0, 0, .3, 1];
|
|
|
+
|
|
|
+ const slides = [...document.querySelectorAll('.slide')];
|
|
|
+ let lastIdx = -1;
|
|
|
+
|
|
|
+ function resetAnims(slide){
|
|
|
+ slide.querySelectorAll('[data-anim]').forEach(el=>{
|
|
|
+ el.style.opacity='';
|
|
|
+ el.style.transform='';
|
|
|
+ });
|
|
|
+ /* 同时复位需要被 recipe 接管的元素 */
|
|
|
+ slide.querySelectorAll('.row-fill,.tl-node,.stack-block,.bar-tower,.sub-card,.col,.vrule,.kpi-cell')
|
|
|
+ .forEach(el=>{el.style.cssText = el.dataset._origCss || el.style.cssText;});
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------- 通用工具 ---------- */
|
|
|
+ const fade = (el, opts={})=>animate(el,
|
|
|
+ {opacity:[0,1], y:[opts.y ?? 12, 0]},
|
|
|
+ {duration:opts.duration ?? .6, delay:opts.delay ?? 0,
|
|
|
+ easing:opts.easing ?? EASE_ENTRY_EXP});
|
|
|
+
|
|
|
+ /* ---------- recipe: hero · 封面索引 ----------
|
|
|
+ 大编号一个个亮起 → 索引行最后落定 */
|
|
|
+ function rHero(slide, all){
|
|
|
+ const numRows = [...slide.querySelectorAll('.cover-row')];
|
|
|
+ const rest = all.filter(el=>!numRows.length || el !== numRows[0]);
|
|
|
+ /* 先入: chrome 240ms */
|
|
|
+ const chrome = slide.querySelector('.chrome-min');
|
|
|
+ if(chrome) animate(chrome, {opacity:[0,1]}, {duration:.24, easing:EASE_PROD});
|
|
|
+ /* 大编号 01/02/03 像点名一样依次亮 */
|
|
|
+ numRows.forEach((row, i)=>{
|
|
|
+ animate(row, {opacity:[0,1], x:[-12,0]},
|
|
|
+ {duration:.5, delay:.15 + i*.18, easing:EASE_ENTRY_EXP});
|
|
|
+ });
|
|
|
+ /* 索引底栏最后慢慢落定 */
|
|
|
+ const idx = slide.querySelector('[data-anim="line"]');
|
|
|
+ if(idx) fade(idx, {delay:.15 + numRows.length*.18 + .1, duration:.5, y:6});
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------- recipe: progression · 1× → 10× → 1000× ----------
|
|
|
+ 节点依次入场,每个节点的数字单独"递进生长"营造跃迁 */
|
|
|
+ function rProgression(slide, all){
|
|
|
+ const head = slide.querySelector('[data-anim="line"]');
|
|
|
+ if(head) fade(head, {duration:.6, y:10});
|
|
|
+
|
|
|
+ const nodes = [...slide.querySelectorAll('.tl-node')];
|
|
|
+ nodes.forEach((node, i)=>{
|
|
|
+ const base = .35 + i*.32; /* 节点之间间隔大,营造时间感 */
|
|
|
+ /* 整个节点先轻微浮入 */
|
|
|
+ animate(node, {opacity:[0,1], y:[14, 0]},
|
|
|
+ {duration:.55, delay:base, easing:EASE_ENTRY_EXP});
|
|
|
+ /* 再让 multi(数字)从 .85 scale 弹到 1,延迟 100ms */
|
|
|
+ const multi = node.querySelector('.multi');
|
|
|
+ if(multi) animate(multi, {scale:[.92, 1], opacity:[0,1]},
|
|
|
+ {duration:.5, delay:base + .12, easing:EASE_ENTRY_EXP});
|
|
|
+ });
|
|
|
+
|
|
|
+ /* 底部 KPI 4 列最后落定,内部 60ms stagger */
|
|
|
+ const kpis = [...slide.querySelectorAll('.kpi-cell')];
|
|
|
+ kpis.forEach((cell, i)=>{
|
|
|
+ animate(cell, {opacity:[0,1], y:[8, 0]},
|
|
|
+ {duration:.4, delay:1.4 + i*.07, easing:EASE_PROD});
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------- recipe: statement · 大宣言 ----------
|
|
|
+ 左半屏标题逐行落下,右半屏 leaked 信息晚 600ms 进 */
|
|
|
+ function rStatement(slide, all){
|
|
|
+ const halves = [...slide.querySelectorAll('.half')];
|
|
|
+ if(halves.length === 2){
|
|
|
+ animate(halves[0], {opacity:[0,1], y:[18,0]},
|
|
|
+ {duration:.7, delay:0, easing:EASE_ENTRY_EXP});
|
|
|
+ animate(halves[1], {opacity:[0,1], y:[18,0]},
|
|
|
+ {duration:.7, delay:.6, easing:EASE_ENTRY_EXP});
|
|
|
+ } else {
|
|
|
+ /* P9 Index Card — 三行像盖章一样依次落 */
|
|
|
+ const head = slide.querySelector('[data-anim="line"]');
|
|
|
+ if(head) fade(head, {duration:.5, y:6});
|
|
|
+ const blocks = all.filter(el=>el !== head);
|
|
|
+ blocks.forEach((el, i)=>{
|
|
|
+ animate(el, {opacity:[0,1], y:[20,0]},
|
|
|
+ {duration:.55, delay:.25 + i*.18, easing:EASE_ENTRY_EXP});
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------- recipe: grid-reveal · 五个定义 ----------
|
|
|
+ 卡片按 nb-corner 序号 01→02→03→04→05→Σ 依次揭示 */
|
|
|
+ function rGridReveal(slide, all){
|
|
|
+ const head = slide.querySelector('[data-anim="line"]');
|
|
|
+ if(head) fade(head, {duration:.6, y:10});
|
|
|
+ const cards = [...slide.querySelectorAll('.sub-card')];
|
|
|
+ cards.forEach((card, i)=>{
|
|
|
+ animate(card, {opacity:[0,1], y:[20,0], scale:[.96, 1]},
|
|
|
+ {duration:.5, delay:.3 + i*.09, easing:EASE_ENTRY_EXP});
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------- recipe: stack-build · 三层架构 ----------
|
|
|
+ 中间 thin 先入 → 上层 fat skills 从顶推下 → 下层 application 从底推上 */
|
|
|
+ function rStackBuild(slide, all){
|
|
|
+ const head = slide.querySelector('[data-anim="line"]');
|
|
|
+ if(head) fade(head, {duration:.6, y:10});
|
|
|
+
|
|
|
+ const blocks = [...slide.querySelectorAll('.stack-block')];
|
|
|
+ /* 先入: 中间薄层(LAYER 02) */
|
|
|
+ if(blocks[1]) animate(blocks[1], {opacity:[0,1], scaleY:[.85, 1]},
|
|
|
+ {duration:.55, delay:.3, easing:EASE_ENTRY_EXP});
|
|
|
+ /* 上推下: LAYER 01 fat skills 从顶部 push down */
|
|
|
+ if(blocks[0]) animate(blocks[0], {opacity:[0,1], y:[-22, 0]},
|
|
|
+ {duration:.6, delay:.6, easing:EASE_ENTRY_EXP});
|
|
|
+ /* 下推上: LAYER 03 application 从底部 push up */
|
|
|
+ if(blocks[2]) animate(blocks[2], {opacity:[0,1], y:[22, 0]},
|
|
|
+ {duration:.6, delay:.6, easing:EASE_ENTRY_EXP});
|
|
|
+
|
|
|
+ const foot = slide.querySelector('.t-meta');
|
|
|
+ if(foot) animate(foot, {opacity:[0,1]}, {duration:.3, delay:1.3, easing:EASE_PROD});
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------- recipe: measure-up · YC KPI 塔 ----------
|
|
|
+ 塔从底部 scaleY 0→1 生长 + 数字最后弹入 */
|
|
|
+ function rMeasureUp(slide, all){
|
|
|
+ const head = slide.querySelector('[data-anim="line"]');
|
|
|
+ if(head) fade(head, {duration:.6, y:10});
|
|
|
+
|
|
|
+ const towers = [...slide.querySelectorAll('.bar-tower')];
|
|
|
+ towers.forEach((tower, i)=>{
|
|
|
+ const block = tower.querySelector('.body-block');
|
|
|
+ if(block){
|
|
|
+ block.style.transformOrigin = 'bottom center';
|
|
|
+ animate(block, {opacity:[0,1], scaleY:[.05, 1]},
|
|
|
+ {duration:.7, delay:.35 + i*.12, easing:EASE_ENTRY_EXP});
|
|
|
+ }
|
|
|
+ /* cap (顶部图标) 等柱体长好后弹入 */
|
|
|
+ const cap = tower.querySelector('.cap');
|
|
|
+ if(cap) animate(cap, {opacity:[0,1], y:[-8, 0]},
|
|
|
+ {duration:.4, delay:.85 + i*.12, easing:EASE_PROD});
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------- recipe: bar-grow · 90% 价值分布 ----------
|
|
|
+ 标题先入 → hairline 从中点向两侧 stroke draw → bar 依次 width 0→target → 数值 fade in */
|
|
|
+ function rBarGrow(slide, all){
|
|
|
+ const head = slide.querySelector('[data-anim="line"]');
|
|
|
+ if(head) fade(head, {duration:.6, y:10});
|
|
|
+
|
|
|
+ /* 中部 hairline:从 100% width 0 拉到 100% (transformOrigin: center) */
|
|
|
+ const midRow = slide.querySelector('[data-anim="up"]');
|
|
|
+ if(midRow){
|
|
|
+ const midLabel = midRow.querySelector('.t-cat');
|
|
|
+ const midLine = midRow.querySelector('div[style*="height:1px"]');
|
|
|
+ if(midLabel) animate(midLabel, {opacity:[0,1], x:[-8,0]},
|
|
|
+ {duration:.4, delay:.4, easing:EASE_PROD});
|
|
|
+ if(midLine){
|
|
|
+ midLine.style.transformOrigin = 'center';
|
|
|
+ animate(midLine, {opacity:[0,1], scaleX:[0, 1]},
|
|
|
+ {duration:.55, delay:.5, easing:EASE_ENTRY_EXP});
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* bar 行依次 width 增长 */
|
|
|
+ const fills = [...slide.querySelectorAll('.row-fill')];
|
|
|
+ const labels = [...slide.querySelectorAll('.row-lbl')];
|
|
|
+ const values = [...slide.querySelectorAll('.row-val')];
|
|
|
+ fills.forEach((fill, i)=>{
|
|
|
+ const target = fill.style.width;
|
|
|
+ fill.style.width = '0%';
|
|
|
+ if(labels[i]) animate(labels[i], {opacity:[0,1], x:[-12,0]},
|
|
|
+ {duration:.4, delay:.85 + i*.14, easing:EASE_PROD});
|
|
|
+ animate(fill, {width:['0%', target]},
|
|
|
+ {duration:.65, delay:.95 + i*.14, easing:EASE_ENTRY_EXP});
|
|
|
+ if(values[i]) animate(values[i], {opacity:[0,1]},
|
|
|
+ {duration:.3, delay:1.5 + i*.14, easing:EASE_PROD});
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------- recipe: duo-mirror · Latent vs Deterministic ----------
|
|
|
+ 左 80ms 入,vrule 从中心 scaleY 0→1,右 240ms 入 */
|
|
|
+ function rDuoMirror(slide, all){
|
|
|
+ const head = slide.querySelector('[data-anim="line"]');
|
|
|
+ if(head) fade(head, {duration:.6, y:10});
|
|
|
+
|
|
|
+ const cols = [...slide.querySelectorAll('.duo-compare .col')];
|
|
|
+ const vrule = slide.querySelector('.duo-compare .vrule');
|
|
|
+ if(cols[0]) animate(cols[0], {opacity:[0,1], x:[-24, 0]},
|
|
|
+ {duration:.65, delay:.4, easing:EASE_ENTRY_EXP});
|
|
|
+ if(vrule){
|
|
|
+ vrule.style.transformOrigin = 'center';
|
|
|
+ animate(vrule, {opacity:[0,1], scaleY:[0, 1]},
|
|
|
+ {duration:.55, delay:.55, easing:EASE_ENTRY_EXP});
|
|
|
+ }
|
|
|
+ if(cols[1]) animate(cols[1], {opacity:[0,1], x:[24, 0]},
|
|
|
+ {duration:.65, delay:.7, easing:EASE_ENTRY_EXP});
|
|
|
+
|
|
|
+ const foot = slide.querySelector('.t-meta');
|
|
|
+ if(foot) animate(foot, {opacity:[0,1]}, {duration:.3, delay:1.3, easing:EASE_PROD});
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------- recipe: split-statement · 收尾 ----------
|
|
|
+ 左黑半屏的 once / forever 错位入场;右白半屏 takeaway list 后跟 */
|
|
|
+ function rSplitStatement(slide, all){
|
|
|
+ const halves = [...slide.querySelectorAll('.half')];
|
|
|
+ /* 左黑半屏 — once 先入,forever 间隔 600ms */
|
|
|
+ if(halves[0]){
|
|
|
+ animate(halves[0], {opacity:[0,1]}, {duration:.4, easing:EASE_PROD});
|
|
|
+ const kpis = halves[0].querySelectorAll('.kpi-thin');
|
|
|
+ kpis.forEach((k, i)=>{
|
|
|
+ animate(k, {opacity:[0,1], y:[24,0]},
|
|
|
+ {duration:.7, delay:.25 + i*.55, easing:EASE_ENTRY_EXP});
|
|
|
+ });
|
|
|
+ }
|
|
|
+ /* 右白半屏 — list 三条依次入,在左侧 once 出现后开始 */
|
|
|
+ if(halves[1]){
|
|
|
+ animate(halves[1], {opacity:[0,1]}, {duration:.4, delay:.3, easing:EASE_PROD});
|
|
|
+ const items = halves[1].querySelectorAll('.takeaway-list li');
|
|
|
+ items.forEach((li, i)=>{
|
|
|
+ animate(li, {opacity:[0,1], x:[20, 0]},
|
|
|
+ {duration:.45, delay:1.0 + i*.12, easing:EASE_ENTRY_EXP});
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------- recipe: timeline-walk · P11 横向 evolution ----------
|
|
|
+ 标题先入 → 横轴虚线 scaleX 拉开(伪) → 5 个 dot 按年代依次 scale 入 → label 跟随 */
|
|
|
+ function rTimelineWalk(slide, all){
|
|
|
+ const head = slide.querySelector('[data-anim="line"]');
|
|
|
+ if(head) fade(head, {duration:.55, y:10});
|
|
|
+
|
|
|
+ const tl = slide.querySelector('.timeline-h');
|
|
|
+ if(tl) animate(tl, {opacity:[0,1]}, {duration:.4, delay:.35, easing:EASE_PROD});
|
|
|
+
|
|
|
+ const nodes = [...slide.querySelectorAll('.timeline-h .th-node')];
|
|
|
+ nodes.forEach((node, i)=>{
|
|
|
+ const base = .55 + i*.18;
|
|
|
+ const dot = node.querySelector('.dot');
|
|
|
+ const label = node.querySelector('.label');
|
|
|
+ if(dot){
|
|
|
+ dot.style.transformOrigin='center';
|
|
|
+ animate(dot, {opacity:[0,1], scale:[.2, 1]},
|
|
|
+ {duration:.45, delay:base, easing:EASE_ENTRY_EXP});
|
|
|
+ }
|
|
|
+ if(label){
|
|
|
+ const fromY = node.classList.contains('up') ? 8 : -8;
|
|
|
+ /* 保留 CSS 的水平居中 translateX(-50%),避免动效覆盖后 label 与 dot 错位 */
|
|
|
+ animate(label, {opacity:[0,1], transform:[`translate(-50%, ${fromY}px)`, 'translate(-50%, 0px)']},
|
|
|
+ {duration:.5, delay:base + .12, easing:EASE_ENTRY_EXP});
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ const foot = slide.querySelector('.t-meta');
|
|
|
+ if(foot) animate(foot, {opacity:[0,1]}, {duration:.3, delay:1.7, easing:EASE_PROD});
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------- recipe: manifesto · P12 Form & Found ----------
|
|
|
+ 副标先入 → 大字两段错峰落 → 底部 ink 通栏条从下推上 */
|
|
|
+ function rManifesto(slide, all){
|
|
|
+ const head = slide.querySelector('[data-anim="line"]');
|
|
|
+ if(head){
|
|
|
+ const cat = head.querySelector('.t-cat');
|
|
|
+ const title = head.querySelector('div:nth-child(2)');
|
|
|
+ if(cat) animate(cat, {opacity:[0,1], x:[-10,0]},
|
|
|
+ {duration:.4, delay:.1, easing:EASE_PROD});
|
|
|
+ if(title) animate(title, {opacity:[0,1], y:[26, 0]},
|
|
|
+ {duration:.85, delay:.3, easing:EASE_ENTRY_EXP});
|
|
|
+ }
|
|
|
+ /* 底部 ink 条从下推入 */
|
|
|
+ const foot = [...slide.querySelectorAll('[data-anim="up"]')];
|
|
|
+ foot.forEach((el, i)=>{
|
|
|
+ animate(el, {opacity:[0,1], y:[40, 0]},
|
|
|
+ {duration:.75, delay:.85 + i*.12, easing:EASE_ENTRY_EXP});
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------- recipe: three-forces · P13 ----------
|
|
|
+ 左 ink hero 先入 → 右 3 张卡按 1/2/3 依次从右滑入 + 每张大数字单独弹入 */
|
|
|
+ function rThreeForces(slide, all){
|
|
|
+ const head = slide.querySelector('[data-anim="line"]');
|
|
|
+ if(head) fade(head, {duration:.5, y:8});
|
|
|
+
|
|
|
+ const grid = slide.querySelector('[data-anim="up"]');
|
|
|
+ if(grid) animate(grid, {opacity:[0,1]}, {duration:.3, delay:.3, easing:EASE_PROD});
|
|
|
+
|
|
|
+ const heroBlock = grid?.querySelector(':scope > div:first-child');
|
|
|
+ if(heroBlock) animate(heroBlock, {opacity:[0,1], x:[-26, 0]},
|
|
|
+ {duration:.6, delay:.4, easing:EASE_ENTRY_EXP});
|
|
|
+
|
|
|
+ const cards = grid ? [...grid.querySelectorAll(':scope > div:nth-child(2) > .card-fill')] : [];
|
|
|
+ cards.forEach((card, i)=>{
|
|
|
+ const base = .6 + i*.18;
|
|
|
+ animate(card, {opacity:[0,1], x:[28, 0]},
|
|
|
+ {duration:.6, delay:base, easing:EASE_ENTRY_EXP});
|
|
|
+ const num = card.querySelector(':scope > div:first-child');
|
|
|
+ if(num) animate(num, {opacity:[0,1], scale:[.7, 1]},
|
|
|
+ {duration:.5, delay:base + .15, easing:EASE_ENTRY_EXP});
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------- recipe: loop-form · P14 自学闭环 ----------
|
|
|
+ 左 4 步像台阶依次入 → 右环图节点按时钟顺序入 → 中心 improves scale 入 */
|
|
|
+ function rLoopForm(slide, all){
|
|
|
+ const head = slide.querySelector('[data-anim="line"]');
|
|
|
+ if(head) fade(head, {duration:.55, y:10});
|
|
|
+
|
|
|
+ const grid = slide.querySelector('[data-anim="up"]');
|
|
|
+ if(grid) animate(grid, {opacity:[0,1]}, {duration:.3, delay:.35, easing:EASE_PROD});
|
|
|
+
|
|
|
+ /* 左侧 4 步台阶,每步从左滑入 */
|
|
|
+ const steps = grid ? [...grid.querySelectorAll(':scope > div:first-child > div')] : [];
|
|
|
+ steps.forEach((step, i)=>{
|
|
|
+ animate(step, {opacity:[0,1], x:[-18, 0]},
|
|
|
+ {duration:.5, delay:.5 + i*.14, easing:EASE_ENTRY_EXP});
|
|
|
+ });
|
|
|
+
|
|
|
+ /* 右侧 SVG 节点 (4 个 circle + label) 按 01→04 顺序入 */
|
|
|
+ const svg = grid?.querySelector('svg');
|
|
|
+ if(svg){
|
|
|
+ const ring = svg.querySelector('circle:first-of-type');
|
|
|
+ if(ring) animate(ring, {opacity:[0,.25]}, {duration:.5, delay:.6, easing:EASE_PROD});
|
|
|
+
|
|
|
+ const nodeCircles = [...svg.querySelectorAll('circle')].slice(1);
|
|
|
+ nodeCircles.forEach((c, i)=>{
|
|
|
+ c.style.transformOrigin = `${c.getAttribute('cx')}px ${c.getAttribute('cy')}px`;
|
|
|
+ animate(c, {opacity:[0,1], scale:[.4, 1]},
|
|
|
+ {duration:.45, delay:.7 + i*.16, easing:EASE_ENTRY_EXP});
|
|
|
+ });
|
|
|
+
|
|
|
+ const arrows = [...svg.querySelectorAll('path[marker-end]')];
|
|
|
+ arrows.forEach((p, i)=>{
|
|
|
+ animate(p, {opacity:[0,1]},
|
|
|
+ {duration:.4, delay:.85 + i*.16, easing:EASE_PROD});
|
|
|
+ });
|
|
|
+
|
|
|
+ const center = [...svg.querySelectorAll('text')].slice(-2);
|
|
|
+ center.forEach((t, i)=>{
|
|
|
+ animate(t, {opacity:[0,1], scale:[.7, 1]},
|
|
|
+ {duration:.5, delay:1.55 + i*.1, easing:EASE_ENTRY_EXP});
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------- recipe: matrix-fill · P15 skill 矩阵 ----------
|
|
|
+ 标题入 → 12 张卡按对角线波 (i+j) 扫入 → 底部 20,000 大数字最后 fade 入 */
|
|
|
+ function rMatrixFill(slide, all){
|
|
|
+ const head = slide.querySelector('[data-anim="line"]');
|
|
|
+ if(head) fade(head, {duration:.55, y:10});
|
|
|
+
|
|
|
+ const matrix = slide.querySelector('[data-anim="up"]');
|
|
|
+ if(!matrix) return;
|
|
|
+ animate(matrix, {opacity:[0,1]}, {duration:.3, delay:.35, easing:EASE_PROD});
|
|
|
+
|
|
|
+ const cards = [...matrix.children];
|
|
|
+ const cols = 6;
|
|
|
+ cards.forEach((card, i)=>{
|
|
|
+ const row = Math.floor(i/cols), col = i%cols;
|
|
|
+ const wave = (row + col) * .055;
|
|
|
+ animate(card, {opacity:[0,1], y:[14, 0], scale:[.92, 1]},
|
|
|
+ {duration:.42, delay:.5 + wave, easing:EASE_ENTRY_EXP});
|
|
|
+ });
|
|
|
+
|
|
|
+ /* 底部 20,000 区块 */
|
|
|
+ const foot = [...slide.querySelectorAll('[data-anim="up"]')][1];
|
|
|
+ if(foot){
|
|
|
+ animate(foot, {opacity:[0,1], y:[18, 0]},
|
|
|
+ {duration:.7, delay:1.4, easing:EASE_ENTRY_EXP});
|
|
|
+ const bigNum = foot.querySelector('div:nth-child(1) > div:nth-child(2)');
|
|
|
+ if(bigNum) animate(bigNum, {opacity:[0,1], scale:[.94, 1]},
|
|
|
+ {duration:.7, delay:1.55, easing:EASE_ENTRY_EXP});
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------- recipe: field-notes · P16 散点观察 ----------
|
|
|
+ 标题入 → 6 张卡按"散点"乱序延迟入,微小旋转复位 */
|
|
|
+ function rFieldNotes(slide, all){
|
|
|
+ const head = slide.querySelector('[data-anim="line"]');
|
|
|
+ if(head) fade(head, {duration:.55, y:10});
|
|
|
+
|
|
|
+ const grid = slide.querySelector('[data-anim="up"]');
|
|
|
+ if(!grid) return;
|
|
|
+ animate(grid, {opacity:[0,1]}, {duration:.3, delay:.35, easing:EASE_PROD});
|
|
|
+
|
|
|
+ /* 散点顺序: 用一个稍微打乱的索引数组,营造"乱中有序"感 */
|
|
|
+ const order = [0, 3, 1, 4, 2, 5];
|
|
|
+ const cards = [...grid.children];
|
|
|
+ order.forEach((idx, i)=>{
|
|
|
+ const card = cards[idx];
|
|
|
+ if(!card) return;
|
|
|
+ animate(card, {opacity:[0,1], y:[18, 0], rotate:[(idx%2?-.6:.6), 0]},
|
|
|
+ {duration:.55, delay:.5 + i*.11, easing:EASE_ENTRY_EXP});
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------- recipe: system-diagram · P17 三圆系统图 ----------
|
|
|
+ 标题入 → SVG 三组图依次入 + 中间同心圆从外向内 scale 入 → 下方注释列依次入 */
|
|
|
+ function rSystemDiagram(slide, all){
|
|
|
+ const head = slide.querySelector('[data-anim="line"]');
|
|
|
+ if(head) fade(head, {duration:.55, y:10});
|
|
|
+
|
|
|
+ const stage = slide.querySelector('[data-anim="up"]');
|
|
|
+ if(!stage) return;
|
|
|
+ animate(stage, {opacity:[0,1]}, {duration:.3, delay:.35, easing:EASE_PROD});
|
|
|
+
|
|
|
+ const svgs = [...stage.querySelectorAll('svg')];
|
|
|
+ svgs.forEach((svg, i)=>{
|
|
|
+ const base = .55 + i*.22;
|
|
|
+ const circles = [...svg.querySelectorAll('circle')];
|
|
|
+ /* 中间是同心圆: 从外圈到内圈依次 scale 入 */
|
|
|
+ if(circles.length > 1){
|
|
|
+ circles.forEach((c, j)=>{
|
|
|
+ c.style.transformOrigin = `${c.getAttribute('cx')}px ${c.getAttribute('cy')}px`;
|
|
|
+ animate(c, {opacity:[0,1], scale:[.4, 1]},
|
|
|
+ {duration:.5, delay:base + j*.13, easing:EASE_ENTRY_EXP});
|
|
|
+ });
|
|
|
+ } else if(circles[0]){
|
|
|
+ circles[0].style.transformOrigin = `${circles[0].getAttribute('cx')}px ${circles[0].getAttribute('cy')}px`;
|
|
|
+ animate(circles[0], {opacity:[0,1], scale:[.4, 1]},
|
|
|
+ {duration:.5, delay:base, easing:EASE_ENTRY_EXP});
|
|
|
+ }
|
|
|
+ const labels = [...svg.querySelectorAll('text')];
|
|
|
+ labels.forEach((t, j)=>{
|
|
|
+ animate(t, {opacity:[0,1]},
|
|
|
+ {duration:.4, delay:base + .25 + j*.06, easing:EASE_PROD});
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ /* 下方注释列 */
|
|
|
+ const cols = [...stage.querySelectorAll(':scope > div:last-child > div')];
|
|
|
+ cols.forEach((col, i)=>{
|
|
|
+ animate(col, {opacity:[0,1], y:[12, 0]},
|
|
|
+ {duration:.45, delay:1.3 + i*.1, easing:EASE_ENTRY_EXP});
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------- recipe: why-now · P18 三列 + 巨大底数 ----------
|
|
|
+ 标题入 → 三列文本入 → 三个底部巨数 01/02/03 错峰 scale 落定 */
|
|
|
+ function rWhyNow(slide, all){
|
|
|
+ const head = slide.querySelector('[data-anim="line"]');
|
|
|
+ if(head) fade(head, {duration:.55, y:10});
|
|
|
+
|
|
|
+ const grid = slide.querySelector('[data-anim="up"]');
|
|
|
+ if(!grid) return;
|
|
|
+ animate(grid, {opacity:[0,1]}, {duration:.3, delay:.35, easing:EASE_PROD});
|
|
|
+
|
|
|
+ const cols = [...grid.children];
|
|
|
+ cols.forEach((col, i)=>{
|
|
|
+ const base = .5 + i*.16;
|
|
|
+ const body = col.querySelector(':scope > div:not(:last-child)');
|
|
|
+ const big = col.querySelector(':scope > div:last-child');
|
|
|
+ if(body) animate(body, {opacity:[0,1], y:[14, 0]},
|
|
|
+ {duration:.55, delay:base, easing:EASE_ENTRY_EXP});
|
|
|
+ if(big) animate(big, {opacity:[0,1], scale:[.7, 1]},
|
|
|
+ {duration:.7, delay:base + .35, easing:EASE_ENTRY_EXP});
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------- recipe: four-cards · P19 4 列卡片 ----------
|
|
|
+ 顶部红线 scaleX 0→1 → 标题入 → 4 卡按 01-04 依次入 */
|
|
|
+ function rFourCards(slide, all){
|
|
|
+ /* 顶部红线 */
|
|
|
+ const topRule = slide.querySelector('[data-anim="line"] > div:first-child');
|
|
|
+ if(topRule){
|
|
|
+ topRule.style.transformOrigin = 'left center';
|
|
|
+ animate(topRule, {opacity:[0,1], scaleX:[0, 1]},
|
|
|
+ {duration:.5, delay:.1, easing:EASE_ENTRY_EXP});
|
|
|
+ }
|
|
|
+
|
|
|
+ const head = slide.querySelector('[data-anim="line"]');
|
|
|
+ if(head){
|
|
|
+ const title = head.querySelector(':scope > div:nth-child(2)');
|
|
|
+ if(title) animate(title, {opacity:[0,1], y:[14, 0]},
|
|
|
+ {duration:.55, delay:.4, easing:EASE_ENTRY_EXP});
|
|
|
+ }
|
|
|
+
|
|
|
+ const grid = slide.querySelector('[data-anim="up"]');
|
|
|
+ if(!grid) return;
|
|
|
+ animate(grid, {opacity:[0,1]}, {duration:.3, delay:.55, easing:EASE_PROD});
|
|
|
+
|
|
|
+ const cards = [...grid.children];
|
|
|
+ cards.forEach((card, i)=>{
|
|
|
+ animate(card, {opacity:[0,1], y:[18, 0]},
|
|
|
+ {duration:.55, delay:.7 + i*.13, easing:EASE_ENTRY_EXP});
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ============ P20 · Stacked KPI Ledger · 4 行账单逐行点亮 + 行间发丝从左画 ============ */
|
|
|
+ function rStackedLedger(slide, all){
|
|
|
+ const ledger = slide.querySelector('[data-anim="ledger"]');
|
|
|
+ if(!ledger) return;
|
|
|
+ animate(ledger, {opacity:[0,1]}, {duration:.3, delay:.1, easing:EASE_PROD});
|
|
|
+
|
|
|
+ const rows = [...ledger.querySelectorAll('.ledger-row')];
|
|
|
+ rows.forEach((row, i)=>{
|
|
|
+ const base = .25 + i*.18;
|
|
|
+ const num = row.querySelector('.ledger-num');
|
|
|
+ const label = row.querySelector('.ledger-label');
|
|
|
+ const icon = row.querySelector('.ledger-icon');
|
|
|
+ if(num) animate(num, {opacity:[0,1], y:[20, 0]}, {duration:.7, delay:base, easing:EASE_ENTRY_EXP});
|
|
|
+ if(label) animate(label, {opacity:[0,1], x:[-12, 0]}, {duration:.55, delay:base + .12, easing:EASE_ENTRY_EXP});
|
|
|
+ if(icon) animate(icon, {opacity:[0,1], scale:[.6,1]},{duration:.55, delay:base + .22, easing:EASE_ENTRY_EXP});
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ============ P21 · Tech Spec Sheet · 标题分行 / KPI 顶线画出 + count 风感 / 竖线弹起 / 底巨数 ============ */
|
|
|
+ function rTechSpec(slide, all){
|
|
|
+ const head = slide.querySelector('[data-anim="line"]');
|
|
|
+ if(head) fade(head, {duration:.5, y:8});
|
|
|
+
|
|
|
+ const main = slide.querySelector('[data-anim="up"]');
|
|
|
+ if(main){
|
|
|
+ animate(main, {opacity:[0,1]}, {duration:.3, delay:.25, easing:EASE_PROD});
|
|
|
+
|
|
|
+ /* 左大标题分行 */
|
|
|
+ const titleLines = main.querySelector(':scope > div:first-child > div:first-child');
|
|
|
+ if(titleLines){
|
|
|
+ animate(titleLines, {opacity:[0,1], y:[18, 0]}, {duration:.7, delay:.35, easing:EASE_ENTRY_EXP});
|
|
|
+ }
|
|
|
+ const titleNote = main.querySelector(':scope > div:first-child > div:nth-child(2)');
|
|
|
+ if(titleNote){
|
|
|
+ animate(titleNote, {opacity:[0,1], y:[10, 0]}, {duration:.5, delay:.95, easing:EASE_ENTRY_EXP});
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 三 KPI · 顶线 scaleX + 数字 fade-up + 副文字 */
|
|
|
+ const kpis = [...main.querySelectorAll(':scope > div:not([data-anim]):not(:first-child)')];
|
|
|
+ kpis.forEach((kpi, i)=>{
|
|
|
+ const base = .55 + i*.18;
|
|
|
+ const topRule = kpi.querySelector(':scope > div:first-child');
|
|
|
+ if(topRule){
|
|
|
+ topRule.style.transformOrigin = 'left center';
|
|
|
+ animate(topRule, {scaleX:[0,1], opacity:[0,1]}, {duration:.5, delay:base, easing:EASE_ENTRY_EXP});
|
|
|
+ }
|
|
|
+ const num = kpi.querySelector('.kpi-num');
|
|
|
+ if(num) animate(num, {opacity:[0,1], y:[14, 0]}, {duration:.6, delay:base + .15, easing:EASE_ENTRY_EXP});
|
|
|
+ const otherKids = [...kpi.children].filter(el=>el !== topRule && el !== num);
|
|
|
+ otherKids.forEach((el, j)=>{
|
|
|
+ animate(el, {opacity:[0,1]}, {duration:.4, delay:base + .25 + j*.05, easing:EASE_PROD});
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 底部 hero 区: 巨数 + goal + tags + 右下竖线 */
|
|
|
+ const hero = slide.querySelector('[data-anim="hero"]');
|
|
|
+ if(hero){
|
|
|
+ animate(hero, {opacity:[0,1]}, {duration:.3, delay:1.3, easing:EASE_PROD});
|
|
|
+ const bottomHero = hero.querySelector('.bottom-hero');
|
|
|
+ if(bottomHero) animate(bottomHero, {opacity:[0,1], y:[24, 0], scale:[.92, 1]}, {duration:.7, delay:1.4, easing:EASE_ENTRY_EXP});
|
|
|
+ const middle = hero.querySelector(':scope > div:nth-child(2)');
|
|
|
+ if(middle){
|
|
|
+ const kids = [...middle.children];
|
|
|
+ kids.forEach((el, i)=>{
|
|
|
+ if(el.style && el.style.background === 'var(--ink)'){
|
|
|
+ el.style.transformOrigin = 'left center';
|
|
|
+ animate(el, {scaleX:[0,1], opacity:[0,1]}, {duration:.5, delay:1.6 + i*.1, easing:EASE_ENTRY_EXP});
|
|
|
+ } else {
|
|
|
+ animate(el, {opacity:[0,1], y:[10, 0]}, {duration:.5, delay:1.55 + i*.1, easing:EASE_ENTRY_EXP});
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ /* 右下: 文字先入, 9 根竖线再从底部 scaleY 弹起 */
|
|
|
+ const right = hero.querySelector(':scope > div:nth-child(3)');
|
|
|
+ if(right){
|
|
|
+ const rightText = right.querySelector(':scope > div:last-child');
|
|
|
+ if(rightText) animate(rightText, {opacity:[0,1], y:[10, 0]}, {duration:.5, delay:1.85, easing:EASE_ENTRY_EXP});
|
|
|
+ }
|
|
|
+ const bars = slide.querySelectorAll('[data-anim="bars"] .vbar');
|
|
|
+ bars.forEach((bar, i)=>{
|
|
|
+ bar.style.transformOrigin = 'bottom';
|
|
|
+ animate(bar, {scaleY:[0,1], opacity:[0,1]}, {duration:.5, delay:2.0 + i*.04, easing:EASE_ENTRY_EXP});
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ============ P22 · Image Hero · 图缓推 + 标题白块从左滑入 + 三 KPI 顶线画出 ============ */
|
|
|
+ function rImageHero(slide, all){
|
|
|
+ const img = slide.querySelector('[data-anim="img"] img');
|
|
|
+ if(img){
|
|
|
+ animate(img, {opacity:[0,1], scale:[1.06, 1]}, {duration:1.1, delay:.05, easing:EASE_ENTRY_EXP});
|
|
|
+ }
|
|
|
+
|
|
|
+ const titleBlock = slide.querySelector('[data-anim="title-block"]');
|
|
|
+ if(titleBlock){
|
|
|
+ titleBlock.style.transformOrigin = 'left center';
|
|
|
+ animate(titleBlock, {opacity:[0,1], scaleX:[0, 1]}, {duration:.7, delay:.45, easing:EASE_ENTRY_EXP});
|
|
|
+ const titleText = titleBlock.querySelector('div');
|
|
|
+ if(titleText) animate(titleText, {opacity:[0,1]}, {duration:.4, delay:.85, easing:EASE_PROD});
|
|
|
+ }
|
|
|
+
|
|
|
+ const kpiWrap = slide.querySelector('[data-anim="kpi"]');
|
|
|
+ if(kpiWrap){
|
|
|
+ animate(kpiWrap, {opacity:[0,1]}, {duration:.3, delay:.7, easing:EASE_PROD});
|
|
|
+
|
|
|
+ /* 段落 */
|
|
|
+ const para = kpiWrap.querySelector(':scope > div:first-child');
|
|
|
+ if(para) animate(para, {opacity:[0,1], y:[14, 0]}, {duration:.6, delay:.85, easing:EASE_ENTRY_EXP});
|
|
|
+
|
|
|
+ /* 三列 KPI · 顶线 scaleX + 数字升起 */
|
|
|
+ const cols = [...kpiWrap.querySelectorAll(':scope > div:nth-child(2) > div')];
|
|
|
+ cols.forEach((col, i)=>{
|
|
|
+ const base = 1.1 + i*.18;
|
|
|
+ const topRule = col.querySelector(':scope > div:first-child');
|
|
|
+ if(topRule){
|
|
|
+ topRule.style.transformOrigin = 'left center';
|
|
|
+ animate(topRule, {scaleX:[0,1], opacity:[0,1]}, {duration:.5, delay:base, easing:EASE_ENTRY_EXP});
|
|
|
+ }
|
|
|
+ const cat = col.querySelector('.t-meta');
|
|
|
+ if(cat) animate(cat, {opacity:[0,1]}, {duration:.4, delay:base + .15, easing:EASE_PROD});
|
|
|
+ const hero = col.querySelector('.kpi-hero');
|
|
|
+ if(hero) animate(hero, {opacity:[0,1], y:[18, 0]}, {duration:.7, delay:base + .25, easing:EASE_ENTRY_EXP});
|
|
|
+ const handled = new Set([topRule, cat, hero]);
|
|
|
+ [...col.children]
|
|
|
+ .filter(el => !handled.has(el))
|
|
|
+ .forEach((el, j)=>{
|
|
|
+ animate(el, {opacity:[0,1]}, {duration:.4, delay:base + .45 + j*.05, easing:EASE_PROD});
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const RECIPES = {
|
|
|
+ 'hero': rHero,
|
|
|
+ 'progression': rProgression,
|
|
|
+ 'statement': rStatement,
|
|
|
+ 'grid-reveal': rGridReveal,
|
|
|
+ 'stack-build': rStackBuild,
|
|
|
+ 'measure-up': rMeasureUp,
|
|
|
+ 'bar-grow': rBarGrow,
|
|
|
+ 'duo-mirror': rDuoMirror,
|
|
|
+ 'split-statement': rSplitStatement,
|
|
|
+ 'timeline-walk': rTimelineWalk,
|
|
|
+ 'manifesto': rManifesto,
|
|
|
+ 'three-forces': rThreeForces,
|
|
|
+ 'loop-form': rLoopForm,
|
|
|
+ 'matrix-fill': rMatrixFill,
|
|
|
+ 'field-notes': rFieldNotes,
|
|
|
+ 'system-diagram': rSystemDiagram,
|
|
|
+ 'why-now': rWhyNow,
|
|
|
+ 'four-cards': rFourCards,
|
|
|
+ 'stacked-ledger': rStackedLedger,
|
|
|
+ 'tech-spec': rTechSpec,
|
|
|
+ 'image-hero': rImageHero,
|
|
|
+ };
|
|
|
+
|
|
|
+ function revealStatic(slide){
|
|
|
+ resetAnims(slide);
|
|
|
+ document.getAnimations?.().forEach(a=>a.cancel());
|
|
|
+ slide.querySelectorAll('[data-anim],.row-fill,.tl-node,.stack-block,.bar-tower,.sub-card,.col,.vrule,.kpi-cell,.card-fill,.card-accent,.card-ink')
|
|
|
+ .forEach(el=>{
|
|
|
+ el.style.opacity='1';
|
|
|
+ el.style.transform='none';
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function playSlide(i){
|
|
|
+ const slide = slides[i];
|
|
|
+ if(!slide) return;
|
|
|
+ lastIdx = i;
|
|
|
+
|
|
|
+ if(window.__lowPowerMode){
|
|
|
+ revealStatic(slide);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ resetAnims(slide);
|
|
|
+
|
|
|
+ /* 关键:[data-anim] 容器很多时候只是占位标记,真正的几何动画在子元素上.
|
|
|
+ 默认强制 reveal 所有 [data-anim] 容器, recipe 想做块入场时用 motion 的 {opacity:[0,1]} 会自动覆盖 */
|
|
|
+ slide.querySelectorAll('[data-anim]').forEach(el=>{
|
|
|
+ el.style.opacity = '1';
|
|
|
+ el.style.transform = 'none';
|
|
|
+ });
|
|
|
+
|
|
|
+ const all = [...slide.querySelectorAll('[data-anim]')];
|
|
|
+ const recipe = slide.dataset.animate;
|
|
|
+ const fn = RECIPES[recipe];
|
|
|
+ if(fn){ fn(slide, all); return; }
|
|
|
+
|
|
|
+ /* fallback: 平凡 fade */
|
|
|
+ if(all.length) animate(all, {opacity:[0,1], y:[12,0]},
|
|
|
+ {duration:.6, delay:i=>i*.08, easing:EASE_ENTRY_EXP});
|
|
|
+ }
|
|
|
+
|
|
|
+ window.__playSlide = playSlide;
|
|
|
+ window.__pipeAdvance = ()=>false; /* 当前 deck 不用 pipeline recipe */
|
|
|
+
|
|
|
+ playSlide(window.__currentSlideIndex || 0);
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<script>
|
|
|
+/* ============== ASCII 点阵呼吸场 · IKB 封面/封底专用 ==============
|
|
|
+ sin/cos 二维噪声场驱动字符显隐,营造工业仪表板的"涌动呼吸"质感.
|
|
|
+ 纯 canvas 2D, mix-blend-mode:screen 让字符在 IKB 底色上自然发亮.
|
|
|
+ 用法:在需要呼吸场的容器(.canvas-card 或 split .half.b-accent)内首位插入
|
|
|
+ <canvas class="ascii-bg" aria-hidden="true">,本脚本会自动扫描并启动. */
|
|
|
+(function(){
|
|
|
+ const canvases = [...document.querySelectorAll('canvas.ascii-bg')];
|
|
|
+ if(!canvases.length) return;
|
|
|
+
|
|
|
+ const PALETTE = ' ...:::---+++***◦◦••▢▣';
|
|
|
+ const CELL = 16;
|
|
|
+ const FONT_SIZE = 13;
|
|
|
+
|
|
|
+ function setup(c){
|
|
|
+ const dpr = Math.min(window.devicePixelRatio || 1, 2);
|
|
|
+ const rect = c.getBoundingClientRect();
|
|
|
+ if(rect.width < 4 || rect.height < 4) return false;
|
|
|
+ c.width = Math.round(rect.width * dpr);
|
|
|
+ c.height = Math.round(rect.height * dpr);
|
|
|
+ c.__dpr = dpr;
|
|
|
+ c.__w = rect.width;
|
|
|
+ c.__h = rect.height;
|
|
|
+ const ctx = c.getContext('2d');
|
|
|
+ ctx.setTransform(dpr,0,0,dpr,0,0);
|
|
|
+ const mono = (getComputedStyle(document.documentElement).getPropertyValue('--mono') || 'JetBrains Mono, monospace').trim();
|
|
|
+ ctx.font = `500 ${FONT_SIZE}px ${mono}`;
|
|
|
+ ctx.textBaseline = 'top';
|
|
|
+ c.__ctx = ctx;
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+
|
|
|
+ function draw(c, t){
|
|
|
+ if(!c.__ctx) return;
|
|
|
+ const ctx = c.__ctx, w = c.__w, h = c.__h;
|
|
|
+ ctx.clearRect(0, 0, w, h);
|
|
|
+ const cols = Math.ceil(w / CELL);
|
|
|
+ const rows = Math.ceil(h / CELL);
|
|
|
+ for(let r=0; r<rows; r++){
|
|
|
+ for(let cc=0; cc<cols; cc++){
|
|
|
+ const n = (
|
|
|
+ Math.sin(cc * 0.18 + t) +
|
|
|
+ Math.sin(r * 0.24 - t * 0.7) +
|
|
|
+ Math.sin((cc + r) * 0.12 + t * 0.45) +
|
|
|
+ Math.sin(Math.hypot(cc - cols * 0.5, r - rows * 0.5) * 0.16 - t * 0.55)
|
|
|
+ ) / 4; // [-1, 1]
|
|
|
+ const v = (n + 1) / 2; // [0, 1]
|
|
|
+ if(v < 0.22) continue;
|
|
|
+ const idx = Math.min(PALETTE.length - 1, Math.floor(v * PALETTE.length));
|
|
|
+ const ch = PALETTE[idx];
|
|
|
+ if(ch === ' ') continue;
|
|
|
+ const alpha = 0.08 + (v - 0.22) * 0.55;
|
|
|
+ ctx.fillStyle = `rgba(255,255,255,${alpha.toFixed(3)})`;
|
|
|
+ ctx.fillText(ch, cc * CELL, r * CELL);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function resizeAll(){ canvases.forEach(setup); }
|
|
|
+ let pending = null;
|
|
|
+ window.addEventListener('resize', ()=>{
|
|
|
+ if(window.__lowPowerMode) return;
|
|
|
+ if(pending) cancelAnimationFrame(pending);
|
|
|
+ pending = requestAnimationFrame(resizeAll);
|
|
|
+ }, {passive:true});
|
|
|
+
|
|
|
+ let t0 = performance.now();
|
|
|
+ let frame = 0, asciiRAF = 0, running = false;
|
|
|
+ function tick(now){
|
|
|
+ if(!running || window.__lowPowerMode){running=false;asciiRAF=0;return;}
|
|
|
+ const t = (now - t0) / 1000 * 0.55;
|
|
|
+ frame++;
|
|
|
+ canvases.forEach(c=>{
|
|
|
+ // 离屏 slide 降帧:每 4 帧渲染一次,在屏 slide 每帧渲染
|
|
|
+ const slide = c.closest('.slide');
|
|
|
+ const rect = slide ? slide.getBoundingClientRect() : null;
|
|
|
+ const onscreen = rect && rect.right > 0 && rect.left < window.innerWidth;
|
|
|
+ if(!onscreen && (frame & 3) !== 0) return;
|
|
|
+ draw(c, t);
|
|
|
+ });
|
|
|
+ asciiRAF = requestAnimationFrame(tick);
|
|
|
+ }
|
|
|
+ function start(){
|
|
|
+ if(running || window.__lowPowerMode) return;
|
|
|
+ resizeAll();
|
|
|
+ t0 = performance.now();
|
|
|
+ frame = 0;
|
|
|
+ running = true;
|
|
|
+ asciiRAF = requestAnimationFrame(tick);
|
|
|
+ }
|
|
|
+ function stop(){
|
|
|
+ running = false;
|
|
|
+ if(asciiRAF) cancelAnimationFrame(asciiRAF);
|
|
|
+ if(pending) cancelAnimationFrame(pending);
|
|
|
+ asciiRAF = 0;
|
|
|
+ pending = null;
|
|
|
+ canvases.forEach(c=>{
|
|
|
+ if(c.__ctx) c.__ctx.clearRect(0,0,c.__w || 0,c.__h || 0);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ addEventListener('swiss-low-power-change', e=>{e.detail.on ? stop() : start();});
|
|
|
+ start();
|
|
|
+})();
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
郭浩