@cyber-dash-tech/revela 0.3.1 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +227 -9
- package/README.zh-CN.md +188 -8
- package/designs/monet/preview.html +2293 -0
- package/designs/starter/DESIGN.md +778 -0
- package/designs/starter/preview.html +271 -0
- package/designs/summit/DESIGN.md +54 -51
- package/designs/summit/preview.html +2284 -0
- package/lib/commands/designs-new.ts +167 -0
- package/lib/commands/designs-preview.ts +36 -0
- package/lib/commands/help.ts +3 -0
- package/lib/design/designs.ts +176 -3
- package/lib/media/batch-save.ts +146 -0
- package/lib/media/download.ts +68 -0
- package/lib/media/save.ts +273 -0
- package/lib/media/types.ts +54 -0
- package/lib/research/image-leads.ts +175 -0
- package/package.json +5 -1
- package/plugin.ts +45 -0
- package/skill/SKILL.md +7 -1
- package/tools/designs-author.ts +62 -0
- package/tools/media-batch-save.ts +25 -0
- package/tools/media-save.ts +40 -0
- package/tools/research-images-list.ts +34 -0
|
@@ -0,0 +1,2293 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Monet Design System — Preview</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet">
|
|
10
|
+
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
|
|
11
|
+
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
|
|
12
|
+
<style>
|
|
13
|
+
/* ─── Variables ─── */
|
|
14
|
+
:root {
|
|
15
|
+
--bg-frame: #0d1a24;
|
|
16
|
+
--bg-page: #f0f4f7;
|
|
17
|
+
--bg-page-alt: #e4ecf2;
|
|
18
|
+
--text-primary: #0f1e2a;
|
|
19
|
+
--text-secondary: #3a5068;
|
|
20
|
+
--text-muted: #7a96aa;
|
|
21
|
+
--line: rgba(15, 30, 42, 0.12);
|
|
22
|
+
--line-strong: rgba(15, 30, 42, 0.24);
|
|
23
|
+
--accent-earth: #2980AF;
|
|
24
|
+
--accent-olive: #00A2B0;
|
|
25
|
+
--accent-stone: #83A5BA;
|
|
26
|
+
--accent-gold: #738DC2;
|
|
27
|
+
--accent-danger: #E593B4;
|
|
28
|
+
--accent-sage: #7CBDC3;
|
|
29
|
+
--shadow-soft: rgba(0, 55, 102, 0.18);
|
|
30
|
+
--font-display: 'EB Garamond', 'Georgia', ui-serif, serif;
|
|
31
|
+
--font-body: 'EB Garamond', 'Georgia', ui-serif, serif;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* ─── Reset & Base ─── */
|
|
35
|
+
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
36
|
+
|
|
37
|
+
html {
|
|
38
|
+
scroll-snap-type: y mandatory;
|
|
39
|
+
overflow-y: scroll;
|
|
40
|
+
height: 100%;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
body {
|
|
44
|
+
background: var(--bg-frame);
|
|
45
|
+
color: var(--text-primary);
|
|
46
|
+
font-family: var(--font-body);
|
|
47
|
+
-webkit-font-smoothing: antialiased;
|
|
48
|
+
height: 100%;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.slide {
|
|
52
|
+
min-height: 100dvh;
|
|
53
|
+
scroll-snap-align: start;
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
justify-content: center;
|
|
57
|
+
overflow: hidden;
|
|
58
|
+
background: var(--bg-frame);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.slide-canvas {
|
|
62
|
+
width: 1920px;
|
|
63
|
+
height: 1080px;
|
|
64
|
+
flex-shrink: 0;
|
|
65
|
+
transform-origin: center center;
|
|
66
|
+
position: relative;
|
|
67
|
+
overflow: hidden;
|
|
68
|
+
padding: 10px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.page {
|
|
72
|
+
position: relative;
|
|
73
|
+
width: 100%;
|
|
74
|
+
height: 100%;
|
|
75
|
+
background: var(--bg-page);
|
|
76
|
+
color: var(--text-primary);
|
|
77
|
+
padding: 0;
|
|
78
|
+
box-shadow: 0 24px 80px var(--shadow-soft);
|
|
79
|
+
display: flex;
|
|
80
|
+
flex-direction: column;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.page.alt { background: var(--bg-page-alt); }
|
|
84
|
+
|
|
85
|
+
.eyebrow, .caption, .meta-label {
|
|
86
|
+
font-size: 12px;
|
|
87
|
+
line-height: 1.4;
|
|
88
|
+
letter-spacing: 0.18em;
|
|
89
|
+
text-transform: uppercase;
|
|
90
|
+
color: var(--text-muted);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
h1, h2, h3, h4 {
|
|
94
|
+
font-family: var(--font-display);
|
|
95
|
+
font-weight: 500;
|
|
96
|
+
letter-spacing: 0em;
|
|
97
|
+
color: var(--text-primary);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
h1 { font-size: 88px; line-height: 0.96; }
|
|
101
|
+
h2 { font-size: 34px; line-height: 1.10; }
|
|
102
|
+
h3 { font-size: 24px; line-height: 1.16; }
|
|
103
|
+
|
|
104
|
+
p, li {
|
|
105
|
+
font-size: 17px;
|
|
106
|
+
line-height: 1.65;
|
|
107
|
+
color: var(--text-secondary);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.rule { width: 100%; height: 1px; background: var(--line); }
|
|
111
|
+
.rule.strong { background: var(--line-strong); }
|
|
112
|
+
|
|
113
|
+
.chevron-divider {
|
|
114
|
+
display: inline-flex;
|
|
115
|
+
align-items: center;
|
|
116
|
+
gap: 10px;
|
|
117
|
+
font-size: 11px;
|
|
118
|
+
letter-spacing: 0.18em;
|
|
119
|
+
text-transform: uppercase;
|
|
120
|
+
color: var(--text-muted);
|
|
121
|
+
}
|
|
122
|
+
.chevron-divider::before, .chevron-divider::after {
|
|
123
|
+
content: '';
|
|
124
|
+
width: 18px;
|
|
125
|
+
height: 1px;
|
|
126
|
+
background: var(--line-strong);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.media-frame { position: relative; overflow: hidden; }
|
|
130
|
+
.media-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }
|
|
131
|
+
|
|
132
|
+
.media-caption {
|
|
133
|
+
margin-top: 12px;
|
|
134
|
+
font-size: 12px;
|
|
135
|
+
line-height: 1.5;
|
|
136
|
+
letter-spacing: 0.14em;
|
|
137
|
+
text-transform: uppercase;
|
|
138
|
+
color: var(--text-muted);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.editorial-list {
|
|
142
|
+
list-style: none;
|
|
143
|
+
display: flex;
|
|
144
|
+
flex-direction: column;
|
|
145
|
+
gap: 14px;
|
|
146
|
+
}
|
|
147
|
+
.editorial-list li {
|
|
148
|
+
position: relative;
|
|
149
|
+
padding-left: 20px;
|
|
150
|
+
font-size: 17px;
|
|
151
|
+
line-height: 1.58;
|
|
152
|
+
color: var(--text-secondary);
|
|
153
|
+
}
|
|
154
|
+
.editorial-list li::before {
|
|
155
|
+
content: '';
|
|
156
|
+
position: absolute;
|
|
157
|
+
left: 0;
|
|
158
|
+
top: 8px;
|
|
159
|
+
width: 6px;
|
|
160
|
+
height: 6px;
|
|
161
|
+
background: var(--accent-earth);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.reveal {
|
|
165
|
+
opacity: 0;
|
|
166
|
+
transform: translateY(18px);
|
|
167
|
+
transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
|
|
168
|
+
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
|
|
169
|
+
}
|
|
170
|
+
.reveal.visible { opacity: 1; transform: translateY(0); }
|
|
171
|
+
|
|
172
|
+
/* ─── Layout: Narrative ─── */
|
|
173
|
+
.narrative-grid {
|
|
174
|
+
display: grid;
|
|
175
|
+
grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
|
|
176
|
+
grid-template-rows: minmax(0, 1fr);
|
|
177
|
+
height: 100%;
|
|
178
|
+
overflow: hidden;
|
|
179
|
+
align-items: stretch;
|
|
180
|
+
}
|
|
181
|
+
.narrative-grid--reverse {
|
|
182
|
+
grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr);
|
|
183
|
+
}
|
|
184
|
+
.narrative-grid > * { overflow: hidden; min-height: 0; min-width: 0; }
|
|
185
|
+
|
|
186
|
+
/* ─── Layout: Highlight Cols ─── */
|
|
187
|
+
.highlight-cols-grid {
|
|
188
|
+
display: grid;
|
|
189
|
+
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
|
190
|
+
gap: 32px;
|
|
191
|
+
overflow: hidden;
|
|
192
|
+
align-items: start;
|
|
193
|
+
}
|
|
194
|
+
.highlight-cols-grid > * { overflow: hidden; min-height: 0; }
|
|
195
|
+
|
|
196
|
+
/* ─── Layout: Halves ─── */
|
|
197
|
+
.halves-grid {
|
|
198
|
+
display: grid;
|
|
199
|
+
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
200
|
+
gap: 0px;
|
|
201
|
+
overflow: hidden;
|
|
202
|
+
align-items: stretch;
|
|
203
|
+
}
|
|
204
|
+
.halves-grid > * { overflow: hidden; min-height: 0; min-width: 0; }
|
|
205
|
+
|
|
206
|
+
/* ─── Layout: Stacked ─── */
|
|
207
|
+
.stacked-grid {
|
|
208
|
+
display: grid;
|
|
209
|
+
grid-template-rows: minmax(0, 1fr) minmax(0, 1.618fr);
|
|
210
|
+
height: 100%;
|
|
211
|
+
width: 100%;
|
|
212
|
+
overflow: hidden;
|
|
213
|
+
}
|
|
214
|
+
.stacked-top { overflow: hidden; min-height: 0; }
|
|
215
|
+
.stacked-bottom { overflow: hidden; min-height: 0; }
|
|
216
|
+
|
|
217
|
+
/* ─── Component: text-panel ─── */
|
|
218
|
+
.text-panel {
|
|
219
|
+
height: 100%;
|
|
220
|
+
padding: 56px 48px 34px;
|
|
221
|
+
display: flex;
|
|
222
|
+
flex-direction: column;
|
|
223
|
+
justify-content: space-between;
|
|
224
|
+
}
|
|
225
|
+
.text-panel--dark { background: #2c2828; color: #f3eee6; }
|
|
226
|
+
.text-panel--light { background: var(--bg-page-alt); color: var(--text-primary); }
|
|
227
|
+
.text-panel-body { display: flex; flex-direction: column; gap: 12px; }
|
|
228
|
+
.text-panel-footer {
|
|
229
|
+
display: flex;
|
|
230
|
+
justify-content: space-between;
|
|
231
|
+
align-items: end;
|
|
232
|
+
gap: 18px;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
/* ─── Component: stat-card ─── */
|
|
236
|
+
.stat-card {
|
|
237
|
+
height: 100%;
|
|
238
|
+
display: flex;
|
|
239
|
+
min-height: 0;
|
|
240
|
+
flex-direction: column;
|
|
241
|
+
justify-content: flex-start;
|
|
242
|
+
gap: 16px;
|
|
243
|
+
padding-top: 8px;
|
|
244
|
+
}
|
|
245
|
+
.stat-card--horizontal { flex-direction: row; align-items: flex-start; gap: 30px; }
|
|
246
|
+
.stat-card-value {
|
|
247
|
+
font-family: var(--font-display);
|
|
248
|
+
font-size: 88px;
|
|
249
|
+
line-height: 0.9;
|
|
250
|
+
letter-spacing: -0.04em;
|
|
251
|
+
font-weight: 600;
|
|
252
|
+
font-variant-numeric: tabular-nums;
|
|
253
|
+
color: inherit;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
/* ─── Component: editorial modules ─── */
|
|
257
|
+
.editorial-media { width: 100%; }
|
|
258
|
+
.editorial-module-body { display: flex; flex-direction: column; gap: 12px; }
|
|
259
|
+
.module-kicker-row { display: inline-flex; align-items: center; gap: 8px; }
|
|
260
|
+
.module-icon { width: 15px; height: 15px; stroke-width: 1.6; color: var(--accent-earth); flex-shrink: 0; }
|
|
261
|
+
|
|
262
|
+
.editorial-image-top { display: flex; flex-direction: column; gap: 16px; }
|
|
263
|
+
.editorial-image-top .editorial-media { height: 240px; }
|
|
264
|
+
.editorial-image-top .editorial-module-body h3 { margin-top: 2px; }
|
|
265
|
+
|
|
266
|
+
.editorial-text-top { display: flex; flex-direction: column; gap: 16px; }
|
|
267
|
+
.editorial-text-top .editorial-module-body { padding-bottom: 2px; }
|
|
268
|
+
.editorial-text-top .editorial-media { height: 240px; }
|
|
269
|
+
.editorial-text-top .media-caption { margin-top: -4px; }
|
|
270
|
+
|
|
271
|
+
.editorial-text-left { display: flex; flex-direction: column; gap: 0; height: 100%; overflow: hidden; }
|
|
272
|
+
.editorial-text-left-header { flex-shrink: 0; padding: 20px 24px 16px; }
|
|
273
|
+
.editorial-text-left-content { display: flex; flex: 1; min-height: 0; }
|
|
274
|
+
.editorial-text-left-copy {
|
|
275
|
+
flex: 1.1;
|
|
276
|
+
min-width: 0;
|
|
277
|
+
padding: 16px 20px 20px 24px;
|
|
278
|
+
display: flex;
|
|
279
|
+
flex-direction: column;
|
|
280
|
+
justify-content: flex-start;
|
|
281
|
+
}
|
|
282
|
+
.editorial-text-left-visual {
|
|
283
|
+
flex: 1;
|
|
284
|
+
min-width: 0;
|
|
285
|
+
min-height: 0;
|
|
286
|
+
align-self: stretch;
|
|
287
|
+
overflow: hidden;
|
|
288
|
+
position: relative;
|
|
289
|
+
}
|
|
290
|
+
.editorial-text-left-visual-stack {
|
|
291
|
+
position: relative;
|
|
292
|
+
width: calc(100% - 28px);
|
|
293
|
+
height: calc(100% - 28px);
|
|
294
|
+
margin: 14px 14px 14px 0;
|
|
295
|
+
}
|
|
296
|
+
.editorial-text-left-tilt {
|
|
297
|
+
position: absolute;
|
|
298
|
+
inset: 0;
|
|
299
|
+
background: rgba(229, 147, 180, 0.24);
|
|
300
|
+
border: 1px solid rgba(229, 147, 180, 0.5);
|
|
301
|
+
transform: rotate(-4deg) translate(-8px, 10px);
|
|
302
|
+
transform-origin: center;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
/* ─── Component: echart-panel ─── */
|
|
306
|
+
.echart-panel { display: flex; flex-direction: column; height: 100%; gap: 0; }
|
|
307
|
+
.echart-panel-header { flex-shrink: 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
|
|
308
|
+
.echart-panel-header h3 { margin-top: 6px; }
|
|
309
|
+
.chart-subtitle { margin-top: 4px; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
|
|
310
|
+
.echart-container { flex: 1; min-height: 0; }
|
|
311
|
+
.chart-caption { flex-shrink: 0; margin-top: 12px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
|
|
312
|
+
|
|
313
|
+
/* ─── Component: flow-horizontal / flow-vertical ─── */
|
|
314
|
+
.flow-number {
|
|
315
|
+
position: relative;
|
|
316
|
+
width: 36px;
|
|
317
|
+
height: 36px;
|
|
318
|
+
flex-shrink: 0;
|
|
319
|
+
}
|
|
320
|
+
/* bottom square — white/neutral base */
|
|
321
|
+
.flow-number::before {
|
|
322
|
+
content: '';
|
|
323
|
+
position: absolute;
|
|
324
|
+
inset: 0;
|
|
325
|
+
background: #fff;
|
|
326
|
+
border: 1px solid var(--line-strong);
|
|
327
|
+
}
|
|
328
|
+
/* top square — accent color, randomly rotated via inline style */
|
|
329
|
+
.flow-number::after {
|
|
330
|
+
content: attr(data-n);
|
|
331
|
+
position: absolute;
|
|
332
|
+
inset: 0;
|
|
333
|
+
background: var(--accent-earth);
|
|
334
|
+
display: flex;
|
|
335
|
+
align-items: center;
|
|
336
|
+
justify-content: center;
|
|
337
|
+
font-family: var(--font-display);
|
|
338
|
+
font-size: 13px;
|
|
339
|
+
font-weight: 700;
|
|
340
|
+
letter-spacing: 0.1em;
|
|
341
|
+
color: #fff;
|
|
342
|
+
transform: rotate(var(--fn-rot, -8deg));
|
|
343
|
+
transform-origin: center;
|
|
344
|
+
}
|
|
345
|
+
.flow-body h4 { font-size: 20px; font-weight: 600; line-height: 1.14; }
|
|
346
|
+
.flow-body p { font-size: 17px; line-height: 1.6; color: var(--text-secondary); }
|
|
347
|
+
|
|
348
|
+
.flow-horizontal {
|
|
349
|
+
position: relative;
|
|
350
|
+
display: flex;
|
|
351
|
+
align-items: flex-start;
|
|
352
|
+
width: 100%;
|
|
353
|
+
}
|
|
354
|
+
.flow-horizontal::before {
|
|
355
|
+
content: '';
|
|
356
|
+
position: absolute;
|
|
357
|
+
top: 17px; left: 0; right: 0;
|
|
358
|
+
height: 1px;
|
|
359
|
+
background: var(--line-strong);
|
|
360
|
+
z-index: 0;
|
|
361
|
+
}
|
|
362
|
+
.flow-horizontal .flow-item {
|
|
363
|
+
flex: 1;
|
|
364
|
+
display: flex;
|
|
365
|
+
flex-direction: column;
|
|
366
|
+
gap: 18px;
|
|
367
|
+
padding-right: 40px;
|
|
368
|
+
}
|
|
369
|
+
.flow-horizontal .flow-item:last-child { padding-right: 0; }
|
|
370
|
+
.flow-horizontal .flow-number {
|
|
371
|
+
position: relative;
|
|
372
|
+
z-index: 1;
|
|
373
|
+
}
|
|
374
|
+
.flow-horizontal .flow-number::before {
|
|
375
|
+
background: var(--bg-page);
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.flow-vertical { display: flex; flex-direction: column; width: 100%; }
|
|
379
|
+
.flow-vertical .flow-item { display: flex; gap: 28px; align-items: flex-start; }
|
|
380
|
+
.flow-vertical .flow-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
|
|
381
|
+
.flow-vertical .flow-line {
|
|
382
|
+
width: 1px;
|
|
383
|
+
flex: 1;
|
|
384
|
+
min-height: 28px;
|
|
385
|
+
background: var(--line-strong);
|
|
386
|
+
margin: 6px 0;
|
|
387
|
+
}
|
|
388
|
+
.flow-vertical .flow-body { padding-bottom: 32px; }
|
|
389
|
+
.flow-vertical .flow-item.last .flow-body { padding-bottom: 0; }
|
|
390
|
+
.flow-vertical .flow-body h4 { margin-top: 4px; }
|
|
391
|
+
.flow-vertical .flow-body p { margin-top: 8px; }
|
|
392
|
+
|
|
393
|
+
/* ─── Component: data-table ─── */
|
|
394
|
+
.data-table-wrap { width: 100%; }
|
|
395
|
+
.data-table-label {
|
|
396
|
+
font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
|
|
397
|
+
text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
|
|
398
|
+
}
|
|
399
|
+
.data-table {
|
|
400
|
+
width: 100%; border-collapse: collapse;
|
|
401
|
+
font-family: var(--font-body); font-size: 17px;
|
|
402
|
+
font-variant-numeric: tabular-nums; color: var(--text-primary);
|
|
403
|
+
}
|
|
404
|
+
.data-table thead tr { border-bottom: 1.5px solid var(--line-strong); }
|
|
405
|
+
.data-table th {
|
|
406
|
+
padding: 0 12px 10px 0; text-align: left;
|
|
407
|
+
font-size: 13px; font-weight: 600;
|
|
408
|
+
letter-spacing: 0.1em; text-transform: uppercase;
|
|
409
|
+
color: var(--text-muted); white-space: nowrap;
|
|
410
|
+
}
|
|
411
|
+
.data-table th:not(:first-child), .data-table td:not(:first-child) { text-align: right; }
|
|
412
|
+
.data-table th.col-highlight, .data-table td.col-highlight {
|
|
413
|
+
color: var(--text-primary);
|
|
414
|
+
background: rgba(23, 20, 17, 0.05);
|
|
415
|
+
padding-left: 6px; padding-right: 8px;
|
|
416
|
+
}
|
|
417
|
+
.data-table th.col-highlight { color: var(--text-secondary); }
|
|
418
|
+
.data-table tbody tr { border-bottom: 1px solid var(--line); }
|
|
419
|
+
.data-table tbody tr:last-child { border-bottom: none; }
|
|
420
|
+
.data-table td { padding: 9px 12px 9px 0; line-height: 1.4; color: var(--text-secondary); }
|
|
421
|
+
.data-table tr.subtotal td {
|
|
422
|
+
font-weight: 600; color: var(--text-primary);
|
|
423
|
+
border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
|
|
424
|
+
}
|
|
425
|
+
.data-table tr.section-header td {
|
|
426
|
+
font-size: 12px; font-weight: 700; letter-spacing: 0.10em;
|
|
427
|
+
text-transform: uppercase; color: var(--text-muted);
|
|
428
|
+
padding-top: 14px; padding-bottom: 4px; border-bottom: none;
|
|
429
|
+
}
|
|
430
|
+
.data-table .delta { font-weight: 600; white-space: nowrap; }
|
|
431
|
+
.data-table .delta.positive { color: var(--accent-olive); }
|
|
432
|
+
.data-table .delta.negative { color: var(--accent-danger); }
|
|
433
|
+
.data-table .delta.neutral { color: var(--text-muted); }
|
|
434
|
+
.table-caption {
|
|
435
|
+
margin-top: 12px; font-size: 11px; letter-spacing: 0.1em;
|
|
436
|
+
text-transform: uppercase; color: var(--text-muted);
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
/* ─── Component: image-title ─── */
|
|
440
|
+
.image-title { position: relative; width: 100%; height: 100%; overflow: hidden; color: #f0f4f7; }
|
|
441
|
+
.image-title-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }
|
|
442
|
+
.image-title-blur { position: absolute; inset: 0; z-index: 1; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
|
|
443
|
+
.image-title-overlay { position: absolute; inset: 0; z-index: 2; }
|
|
444
|
+
.image-title-fg {
|
|
445
|
+
position: relative; z-index: 3; height: 100%;
|
|
446
|
+
display: flex; flex-direction: column; justify-content: space-between;
|
|
447
|
+
padding: 72px 84px;
|
|
448
|
+
}
|
|
449
|
+
.image-title--left .image-title-body { max-width: 680px; }
|
|
450
|
+
.image-title--right .image-title-fg { text-align: right; }
|
|
451
|
+
.image-title--right .image-title-body { max-width: 860px; margin-left: auto; }
|
|
452
|
+
.image-title--center .image-title-fg { text-align: center; align-items: center; }
|
|
453
|
+
.image-title--center .image-title-body { max-width: 900px; }
|
|
454
|
+
.image-title-eyebrow {
|
|
455
|
+
font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
|
|
456
|
+
text-transform: uppercase; color: rgba(247,244,238,0.55); margin-bottom: 20px;
|
|
457
|
+
}
|
|
458
|
+
.image-title h1 {
|
|
459
|
+
color: #f0f4f7; font-size: 96px; line-height: 0.92;
|
|
460
|
+
letter-spacing: -0.03em; text-transform: uppercase;
|
|
461
|
+
}
|
|
462
|
+
.image-title-subtitle {
|
|
463
|
+
margin-top: 24px; font-size: 15px; line-height: 1.56;
|
|
464
|
+
color: rgba(247,244,238,0.72); max-width: 480px;
|
|
465
|
+
}
|
|
466
|
+
.image-title-footer {
|
|
467
|
+
display: flex; justify-content: space-between;
|
|
468
|
+
align-items: flex-end; gap: 24px;
|
|
469
|
+
}
|
|
470
|
+
|
|
471
|
+
/* ─── Component: toc-panel ─── */
|
|
472
|
+
.toc-panel {
|
|
473
|
+
position: relative;
|
|
474
|
+
background:
|
|
475
|
+
radial-gradient(circle at 18% 14%, rgba(123, 189, 195, 0.18), transparent 34%),
|
|
476
|
+
radial-gradient(circle at 76% 78%, rgba(229, 147, 180, 0.16), transparent 30%),
|
|
477
|
+
linear-gradient(135deg, rgba(255,255,255,0.34), rgba(255,255,255,0) 36%),
|
|
478
|
+
var(--bg-page);
|
|
479
|
+
height: 100%;
|
|
480
|
+
padding: 54px 52px 42px;
|
|
481
|
+
display: flex;
|
|
482
|
+
overflow: hidden;
|
|
483
|
+
}
|
|
484
|
+
.toc-panel::before,
|
|
485
|
+
.toc-panel::after {
|
|
486
|
+
content: '';
|
|
487
|
+
position: absolute;
|
|
488
|
+
border-radius: 999px;
|
|
489
|
+
pointer-events: none;
|
|
490
|
+
filter: blur(2px);
|
|
491
|
+
}
|
|
492
|
+
.toc-panel::before {
|
|
493
|
+
width: 320px;
|
|
494
|
+
height: 320px;
|
|
495
|
+
top: -110px;
|
|
496
|
+
right: -80px;
|
|
497
|
+
background: rgba(115, 141, 194, 0.10);
|
|
498
|
+
}
|
|
499
|
+
.toc-panel::after {
|
|
500
|
+
width: 260px;
|
|
501
|
+
height: 260px;
|
|
502
|
+
left: -80px;
|
|
503
|
+
bottom: -110px;
|
|
504
|
+
background: rgba(41, 128, 175, 0.08);
|
|
505
|
+
}
|
|
506
|
+
.toc-panel-inner {
|
|
507
|
+
position: relative;
|
|
508
|
+
z-index: 1;
|
|
509
|
+
display: flex;
|
|
510
|
+
flex-direction: column;
|
|
511
|
+
justify-content: space-between;
|
|
512
|
+
width: 100%;
|
|
513
|
+
gap: 32px;
|
|
514
|
+
}
|
|
515
|
+
.toc-header {
|
|
516
|
+
max-width: 560px;
|
|
517
|
+
display: flex;
|
|
518
|
+
flex-direction: column;
|
|
519
|
+
gap: 18px;
|
|
520
|
+
}
|
|
521
|
+
.toc-kicker {
|
|
522
|
+
font-size: 12px;
|
|
523
|
+
line-height: 1.4;
|
|
524
|
+
letter-spacing: 0.24em;
|
|
525
|
+
text-transform: uppercase;
|
|
526
|
+
color: var(--text-muted);
|
|
527
|
+
}
|
|
528
|
+
.toc-title {
|
|
529
|
+
display: flex;
|
|
530
|
+
flex-direction: column;
|
|
531
|
+
gap: 6px;
|
|
532
|
+
font-size: 54px;
|
|
533
|
+
line-height: 0.9;
|
|
534
|
+
letter-spacing: -0.035em;
|
|
535
|
+
max-width: 500px;
|
|
536
|
+
text-transform: none;
|
|
537
|
+
}
|
|
538
|
+
.toc-title-line {
|
|
539
|
+
display: block;
|
|
540
|
+
}
|
|
541
|
+
.toc-title-line--offset {
|
|
542
|
+
padding-left: 84px;
|
|
543
|
+
}
|
|
544
|
+
.toc-dek {
|
|
545
|
+
max-width: 460px;
|
|
546
|
+
font-size: 17px;
|
|
547
|
+
line-height: 1.62;
|
|
548
|
+
color: var(--text-secondary);
|
|
549
|
+
}
|
|
550
|
+
.toc-list {
|
|
551
|
+
list-style: none;
|
|
552
|
+
display: flex;
|
|
553
|
+
flex-direction: column;
|
|
554
|
+
gap: 16px;
|
|
555
|
+
margin-top: 10px;
|
|
556
|
+
max-width: 640px;
|
|
557
|
+
}
|
|
558
|
+
.toc-item {
|
|
559
|
+
padding: 0;
|
|
560
|
+
min-height: 84px;
|
|
561
|
+
display: flex;
|
|
562
|
+
align-items: flex-start;
|
|
563
|
+
gap: 16px;
|
|
564
|
+
}
|
|
565
|
+
.toc-number-card {
|
|
566
|
+
position: relative;
|
|
567
|
+
flex: 0 0 68px;
|
|
568
|
+
width: 68px;
|
|
569
|
+
height: 68px;
|
|
570
|
+
display: flex;
|
|
571
|
+
align-items: center;
|
|
572
|
+
justify-content: center;
|
|
573
|
+
margin-top: 6px;
|
|
574
|
+
}
|
|
575
|
+
.toc-number-card::before,
|
|
576
|
+
.toc-number-card::after {
|
|
577
|
+
content: '';
|
|
578
|
+
position: absolute;
|
|
579
|
+
inset: 0;
|
|
580
|
+
background: rgba(255, 255, 255, 0.82);
|
|
581
|
+
border: 1px solid rgba(15, 30, 42, 0.10);
|
|
582
|
+
box-shadow: 0 16px 36px rgba(41, 80, 104, 0.10);
|
|
583
|
+
}
|
|
584
|
+
.toc-number-card::before {
|
|
585
|
+
transform: rotate(var(--toc-card-back-rot, -7deg)) translate(-6px, 5px);
|
|
586
|
+
background: var(--toc-card-back, rgba(123, 189, 195, 0.22));
|
|
587
|
+
border-color: rgba(15, 30, 42, 0.08);
|
|
588
|
+
}
|
|
589
|
+
.toc-number-card::after {
|
|
590
|
+
transform: rotate(var(--toc-card-front-rot, 4deg));
|
|
591
|
+
background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,255,255,0.66));
|
|
592
|
+
}
|
|
593
|
+
.toc-item-number {
|
|
594
|
+
position: relative;
|
|
595
|
+
z-index: 1;
|
|
596
|
+
font-family: var(--font-display);
|
|
597
|
+
font-size: 31px;
|
|
598
|
+
line-height: 1;
|
|
599
|
+
font-weight: 600;
|
|
600
|
+
letter-spacing: -0.04em;
|
|
601
|
+
color: var(--toc-number-color, var(--text-primary));
|
|
602
|
+
transform: rotate(var(--toc-number-rot, -3deg));
|
|
603
|
+
}
|
|
604
|
+
.toc-item-body {
|
|
605
|
+
display: flex;
|
|
606
|
+
flex-direction: column;
|
|
607
|
+
gap: 4px;
|
|
608
|
+
padding-top: 6px;
|
|
609
|
+
border-top: 1px solid rgba(15, 30, 42, 0.09);
|
|
610
|
+
flex: 1;
|
|
611
|
+
}
|
|
612
|
+
.toc-item-meta {
|
|
613
|
+
display: flex;
|
|
614
|
+
justify-content: space-between;
|
|
615
|
+
align-items: baseline;
|
|
616
|
+
gap: 18px;
|
|
617
|
+
}
|
|
618
|
+
.toc-chapter-label {
|
|
619
|
+
font-size: 10px;
|
|
620
|
+
line-height: 1.4;
|
|
621
|
+
letter-spacing: 0.20em;
|
|
622
|
+
text-transform: uppercase;
|
|
623
|
+
color: var(--text-muted);
|
|
624
|
+
}
|
|
625
|
+
.toc-page-number {
|
|
626
|
+
font-family: var(--font-display);
|
|
627
|
+
font-size: 18px;
|
|
628
|
+
line-height: 1;
|
|
629
|
+
letter-spacing: -0.03em;
|
|
630
|
+
color: rgba(15, 30, 42, 0.40);
|
|
631
|
+
flex-shrink: 0;
|
|
632
|
+
}
|
|
633
|
+
.toc-item-title {
|
|
634
|
+
font-family: var(--font-display);
|
|
635
|
+
font-size: 22px;
|
|
636
|
+
line-height: 1.08;
|
|
637
|
+
color: var(--text-primary);
|
|
638
|
+
}
|
|
639
|
+
.toc-footer {
|
|
640
|
+
display: flex;
|
|
641
|
+
justify-content: space-between;
|
|
642
|
+
align-items: flex-end;
|
|
643
|
+
gap: 24px;
|
|
644
|
+
padding-top: 18px;
|
|
645
|
+
border-top: 1px solid rgba(15, 30, 42, 0.09);
|
|
646
|
+
}
|
|
647
|
+
.toc-footer-note {
|
|
648
|
+
max-width: 320px;
|
|
649
|
+
font-size: 13px;
|
|
650
|
+
line-height: 1.55;
|
|
651
|
+
color: var(--text-muted);
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
/* ─── Component: quote-block ─── */
|
|
655
|
+
.quote-block { position: relative; padding: 36px 44px 32px; overflow: hidden; }
|
|
656
|
+
.quote-mark {
|
|
657
|
+
position: absolute; top: -18px; left: 28px;
|
|
658
|
+
font-family: Baskerville, Georgia, serif;
|
|
659
|
+
font-size: 140px; font-weight: 700; line-height: 1;
|
|
660
|
+
color: var(--accent-sage); opacity: 0.42;
|
|
661
|
+
pointer-events: none; user-select: none;
|
|
662
|
+
}
|
|
663
|
+
.quote-text {
|
|
664
|
+
position: relative; font-size: 20px; font-style: italic;
|
|
665
|
+
line-height: 1.5; color: var(--text-primary);
|
|
666
|
+
max-width: 860px; padding-top: 48px;
|
|
667
|
+
}
|
|
668
|
+
.quote-attribution { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
|
|
669
|
+
.quote-avatar {
|
|
670
|
+
position: relative;
|
|
671
|
+
width: 52px; height: 52px;
|
|
672
|
+
flex-shrink: 0;
|
|
673
|
+
}
|
|
674
|
+
.quote-avatar::before {
|
|
675
|
+
content: '';
|
|
676
|
+
position: absolute; inset: 0;
|
|
677
|
+
background: #fff;
|
|
678
|
+
border: 1px solid var(--line-strong);
|
|
679
|
+
}
|
|
680
|
+
.quote-avatar::after {
|
|
681
|
+
content: attr(data-initials);
|
|
682
|
+
position: absolute; inset: 0;
|
|
683
|
+
background: var(--accent-earth);
|
|
684
|
+
display: flex; align-items: center; justify-content: center;
|
|
685
|
+
font-family: var(--font-display); font-size: 14px; font-weight: 700; color: #fff;
|
|
686
|
+
transform: rotate(var(--qa-rot, -8deg));
|
|
687
|
+
}
|
|
688
|
+
.quote-avatar img {
|
|
689
|
+
position: absolute; inset: 0;
|
|
690
|
+
width: 52px; height: 52px;
|
|
691
|
+
object-fit: cover;
|
|
692
|
+
transform: rotate(var(--qa-rot, -8deg));
|
|
693
|
+
z-index: 1;
|
|
694
|
+
}
|
|
695
|
+
.quote-meta { display: flex; flex-direction: column; gap: 2px; }
|
|
696
|
+
.quote-name { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
|
|
697
|
+
|
|
698
|
+
/* ─── Component: brand-watermark ─── */
|
|
699
|
+
.brand-watermark {
|
|
700
|
+
position: absolute; top: 46px; right: 54px;
|
|
701
|
+
height: 28px; max-width: 360px; opacity: 0.10;
|
|
702
|
+
pointer-events: none; z-index: 1;
|
|
703
|
+
}
|
|
704
|
+
.brand-watermark svg { height: 100%; width: auto; display: block; }
|
|
705
|
+
.brand-watermark--light { opacity: 0.14; }
|
|
706
|
+
|
|
707
|
+
/* ─── Component: page-number ─── */
|
|
708
|
+
.page-number {
|
|
709
|
+
position: absolute; bottom: 36px; right: 52px;
|
|
710
|
+
font-family: var(--font-display); font-size: 11px; font-weight: 700;
|
|
711
|
+
letter-spacing: 0.18em; color: var(--text-muted); z-index: 10; pointer-events: none;
|
|
712
|
+
}
|
|
713
|
+
.page-number--light { color: rgba(247,244,238,0.45); }
|
|
714
|
+
|
|
715
|
+
/* ─── Component: timeline-journey-horizontal ─── */
|
|
716
|
+
.tjh {
|
|
717
|
+
--tjh-node: 12px;
|
|
718
|
+
--tjh-stem-h: 80px;
|
|
719
|
+
--tjh-col: calc(100% / 7);
|
|
720
|
+
position: relative; width: 100%; height: 360px;
|
|
721
|
+
}
|
|
722
|
+
.tjh-axis {
|
|
723
|
+
position: absolute; top: 50%; left: 0; right: 0;
|
|
724
|
+
height: 1px; background: var(--line-strong); transform: translateY(-50%);
|
|
725
|
+
}
|
|
726
|
+
.tjh-item {
|
|
727
|
+
position: absolute; display: flex; flex-direction: column;
|
|
728
|
+
align-items: center; width: var(--tjh-col); transform: translateX(-50%);
|
|
729
|
+
}
|
|
730
|
+
.tjh-item--up { bottom: 50%; }
|
|
731
|
+
.tjh-item--down { top: 50%; }
|
|
732
|
+
.tjh-axis-dot {
|
|
733
|
+
width: var(--tjh-node); height: var(--tjh-node);
|
|
734
|
+
background: var(--tjh-item-color); flex-shrink: 0;
|
|
735
|
+
transform: rotate(var(--nd-rot, -8deg));
|
|
736
|
+
}
|
|
737
|
+
.tjh-tip-dot {
|
|
738
|
+
width: var(--tjh-node); height: var(--tjh-node);
|
|
739
|
+
background: var(--tjh-item-color); flex-shrink: 0;
|
|
740
|
+
transform: rotate(var(--td-rot, 6deg));
|
|
741
|
+
}
|
|
742
|
+
.tjh-item--up .tjh-axis-dot { margin-bottom: calc(-1 * var(--tjh-node) / 2); }
|
|
743
|
+
.tjh-item--down .tjh-axis-dot { margin-top: calc(-1 * var(--tjh-node) / 2); }
|
|
744
|
+
.tjh-stem {
|
|
745
|
+
width: 1px; height: var(--tjh-stem-h);
|
|
746
|
+
background-image: repeating-linear-gradient(to bottom, var(--line-strong) 0px, var(--line-strong) 4px, transparent 4px, transparent 8px);
|
|
747
|
+
flex-shrink: 0;
|
|
748
|
+
}
|
|
749
|
+
.tjh-label { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 0 6px; }
|
|
750
|
+
.tjh-item--up .tjh-label { margin-bottom: 6px; }
|
|
751
|
+
.tjh-item--down .tjh-label { margin-top: 6px; }
|
|
752
|
+
.tjh-date {
|
|
753
|
+
font-family: var(--font-display); font-size: 11px; font-weight: 700;
|
|
754
|
+
letter-spacing: 0.16em; text-transform: uppercase;
|
|
755
|
+
color: var(--tjh-item-color); line-height: 1.3; white-space: nowrap;
|
|
756
|
+
}
|
|
757
|
+
.tjh-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); line-height: 1.15; }
|
|
758
|
+
.tjh-text { font-size: 17px; line-height: 1.5; color: var(--text-secondary); }
|
|
759
|
+
|
|
760
|
+
/* ─── Component: timeline-journey-vertical ─── */
|
|
761
|
+
.tjv {
|
|
762
|
+
--tjv-node: 12px;
|
|
763
|
+
--tjv-stem-w: 80px;
|
|
764
|
+
position: relative; width: 100%; height: 100%;
|
|
765
|
+
}
|
|
766
|
+
.tjv-axis {
|
|
767
|
+
position: absolute; left: 50%; top: 0; bottom: 0;
|
|
768
|
+
width: 1px; background: var(--line-strong); transform: translateX(-50%);
|
|
769
|
+
}
|
|
770
|
+
.tjv-item {
|
|
771
|
+
position: absolute; display: flex; align-items: center;
|
|
772
|
+
height: 80px; transform: translateY(-50%);
|
|
773
|
+
}
|
|
774
|
+
.tjv-item--left { right: 50%; flex-direction: row-reverse; }
|
|
775
|
+
.tjv-item--right { left: 50%; flex-direction: row; }
|
|
776
|
+
.tjv-axis-dot {
|
|
777
|
+
width: var(--tjv-node); height: var(--tjv-node);
|
|
778
|
+
background: var(--tjv-item-color);
|
|
779
|
+
flex-shrink: 0; position: relative; z-index: 1;
|
|
780
|
+
transform: rotate(var(--nd-rot, -8deg));
|
|
781
|
+
}
|
|
782
|
+
.tjv-tip-dot {
|
|
783
|
+
width: var(--tjv-node); height: var(--tjv-node);
|
|
784
|
+
background: var(--tjv-item-color); flex-shrink: 0;
|
|
785
|
+
transform: rotate(var(--td-rot, 6deg));
|
|
786
|
+
}
|
|
787
|
+
.tjv-item--left .tjv-axis-dot { margin-right: calc(-1 * var(--tjv-node) / 2); }
|
|
788
|
+
.tjv-item--right .tjv-axis-dot { margin-left: calc(-1 * var(--tjv-node) / 2); }
|
|
789
|
+
.tjv-stem {
|
|
790
|
+
width: var(--tjv-stem-w); height: 1px;
|
|
791
|
+
background-image: repeating-linear-gradient(to right, var(--line-strong) 0px, var(--line-strong) 4px, transparent 4px, transparent 8px);
|
|
792
|
+
flex-shrink: 0;
|
|
793
|
+
}
|
|
794
|
+
.tjv-label { display: flex; flex-direction: column; gap: 4px; }
|
|
795
|
+
.tjv-item--left .tjv-label { text-align: right; align-items: flex-end; padding-right: 20px; max-width: 560px; }
|
|
796
|
+
.tjv-item--right .tjv-label { text-align: left; align-items: flex-start; padding-left: 20px; max-width: 560px; }
|
|
797
|
+
.tjv-date {
|
|
798
|
+
font-family: var(--font-display); font-size: 11px; font-weight: 700;
|
|
799
|
+
letter-spacing: 0.16em; text-transform: uppercase;
|
|
800
|
+
color: var(--tjv-item-color); line-height: 1.3; white-space: nowrap;
|
|
801
|
+
}
|
|
802
|
+
.tjv-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); line-height: 1.15; }
|
|
803
|
+
.tjv-text { font-size: 17px; line-height: 1.5; color: var(--text-secondary); max-width: 380px; }
|
|
804
|
+
|
|
805
|
+
/* ─── Preview utility ─── */
|
|
806
|
+
.preview-slot-label {
|
|
807
|
+
display: flex;
|
|
808
|
+
flex-direction: column;
|
|
809
|
+
align-items: center;
|
|
810
|
+
justify-content: center;
|
|
811
|
+
height: 100%;
|
|
812
|
+
gap: 12px;
|
|
813
|
+
}
|
|
814
|
+
.preview-slot-name {
|
|
815
|
+
font-family: var(--font-display);
|
|
816
|
+
font-size: 15px;
|
|
817
|
+
font-weight: 700;
|
|
818
|
+
letter-spacing: 0.16em;
|
|
819
|
+
text-transform: uppercase;
|
|
820
|
+
}
|
|
821
|
+
.preview-slot-ratio {
|
|
822
|
+
font-family: var(--font-display);
|
|
823
|
+
font-size: 13px;
|
|
824
|
+
letter-spacing: 0.12em;
|
|
825
|
+
text-transform: uppercase;
|
|
826
|
+
opacity: 0.65;
|
|
827
|
+
}
|
|
828
|
+
.preview-slide-label {
|
|
829
|
+
position: absolute;
|
|
830
|
+
top: 32px;
|
|
831
|
+
left: 48px;
|
|
832
|
+
font-family: var(--font-display);
|
|
833
|
+
font-size: 11px;
|
|
834
|
+
font-weight: 700;
|
|
835
|
+
letter-spacing: 0.20em;
|
|
836
|
+
text-transform: uppercase;
|
|
837
|
+
color: var(--text-muted);
|
|
838
|
+
z-index: 20;
|
|
839
|
+
}
|
|
840
|
+
</style>
|
|
841
|
+
</head>
|
|
842
|
+
<body>
|
|
843
|
+
|
|
844
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
845
|
+
Slide 01 — COVER: Color Palette & Typography
|
|
846
|
+
════════════════════════════════════════════════════════════════ -->
|
|
847
|
+
<section class="slide" slide-qa="false" data-index="0">
|
|
848
|
+
<div class="slide-canvas">
|
|
849
|
+
<div class="page" style="padding: 72px 80px; display:flex; flex-direction:row; gap:0;">
|
|
850
|
+
|
|
851
|
+
<!-- Left: Title + Color Palette -->
|
|
852
|
+
<div style="flex: 1.2; display:flex; flex-direction:column; justify-content:space-between; padding-right:80px; border-right:1px solid var(--line);">
|
|
853
|
+
<div>
|
|
854
|
+
<p class="eyebrow" style="margin-bottom:28px;">Design System</p>
|
|
855
|
+
<h1 style="font-size:120px; line-height:0.90; text-transform:uppercase; letter-spacing:-0.01em;">Monet</h1>
|
|
856
|
+
<p style="margin-top:24px; font-size:17px; line-height:1.6; color:var(--text-secondary); max-width:400px;">
|
|
857
|
+
An editorial serif design inspired by Claude Monet's <em>Le Bassin aux Nymphéas</em> — mist, water, and soft morning light.
|
|
858
|
+
</p>
|
|
859
|
+
</div>
|
|
860
|
+
|
|
861
|
+
<!-- Color Swatches -->
|
|
862
|
+
<div>
|
|
863
|
+
<p class="eyebrow" style="margin-bottom:20px;">Color Palette</p>
|
|
864
|
+
<div style="display:flex; flex-direction:column; gap:8px;">
|
|
865
|
+
<div style="display:flex; align-items:center; gap:16px;">
|
|
866
|
+
<div style="width:40px; height:40px; background:#2980AF; flex-shrink:0;"></div>
|
|
867
|
+
<div>
|
|
868
|
+
<p style="font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.2;">accent-earth</p>
|
|
869
|
+
<p style="font-size:12px; letter-spacing:0.08em; color:var(--text-muted);">#2980AF — Hanada-iro</p>
|
|
870
|
+
</div>
|
|
871
|
+
</div>
|
|
872
|
+
<div style="display:flex; align-items:center; gap:16px;">
|
|
873
|
+
<div style="width:40px; height:40px; background:#00A2B0; flex-shrink:0;"></div>
|
|
874
|
+
<div>
|
|
875
|
+
<p style="font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.2;">accent-olive</p>
|
|
876
|
+
<p style="font-size:12px; letter-spacing:0.08em; color:var(--text-muted);">#00A2B0 — Asagi-iro</p>
|
|
877
|
+
</div>
|
|
878
|
+
</div>
|
|
879
|
+
<div style="display:flex; align-items:center; gap:16px;">
|
|
880
|
+
<div style="width:40px; height:40px; background:#83A5BA; flex-shrink:0;"></div>
|
|
881
|
+
<div>
|
|
882
|
+
<p style="font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.2;">accent-stone</p>
|
|
883
|
+
<p style="font-size:12px; letter-spacing:0.08em; color:var(--text-muted);">#83A5BA — Mist Gray</p>
|
|
884
|
+
</div>
|
|
885
|
+
</div>
|
|
886
|
+
<div style="display:flex; align-items:center; gap:16px;">
|
|
887
|
+
<div style="width:40px; height:40px; background:#738DC2; flex-shrink:0;"></div>
|
|
888
|
+
<div>
|
|
889
|
+
<p style="font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.2;">accent-gold</p>
|
|
890
|
+
<p style="font-size:12px; letter-spacing:0.08em; color:var(--text-muted);">#738DC2 — Cornflower Blue</p>
|
|
891
|
+
</div>
|
|
892
|
+
</div>
|
|
893
|
+
<div style="display:flex; align-items:center; gap:16px;">
|
|
894
|
+
<div style="width:40px; height:40px; background:#7CBDC3; flex-shrink:0;"></div>
|
|
895
|
+
<div>
|
|
896
|
+
<p style="font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.2;">accent-sage</p>
|
|
897
|
+
<p style="font-size:12px; letter-spacing:0.08em; color:var(--text-muted);">#7CBDC3 — Water Lily</p>
|
|
898
|
+
</div>
|
|
899
|
+
</div>
|
|
900
|
+
<div style="display:flex; align-items:center; gap:16px;">
|
|
901
|
+
<div style="width:40px; height:40px; background:#E593B4; flex-shrink:0;"></div>
|
|
902
|
+
<div>
|
|
903
|
+
<p style="font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.2;">accent-danger</p>
|
|
904
|
+
<p style="font-size:12px; letter-spacing:0.08em; color:var(--text-muted);">#E593B4 — Monet Rose</p>
|
|
905
|
+
</div>
|
|
906
|
+
</div>
|
|
907
|
+
<div style="display:flex; align-items:center; gap:16px;">
|
|
908
|
+
<div style="width:40px; height:40px; background:#f0f4f7; border:1px solid var(--line-strong); flex-shrink:0;"></div>
|
|
909
|
+
<div>
|
|
910
|
+
<p style="font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.2;">bg-page</p>
|
|
911
|
+
<p style="font-size:12px; letter-spacing:0.08em; color:var(--text-muted);">#f0f4f7 — Cool Mist</p>
|
|
912
|
+
</div>
|
|
913
|
+
</div>
|
|
914
|
+
<div style="display:flex; align-items:center; gap:16px;">
|
|
915
|
+
<div style="width:40px; height:40px; background:#e4ecf2; border:1px solid var(--line-strong); flex-shrink:0;"></div>
|
|
916
|
+
<div>
|
|
917
|
+
<p style="font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.2;">bg-page-alt</p>
|
|
918
|
+
<p style="font-size:12px; letter-spacing:0.08em; color:var(--text-muted);">#e4ecf2 — Alt Mist</p>
|
|
919
|
+
</div>
|
|
920
|
+
</div>
|
|
921
|
+
<div style="display:flex; align-items:center; gap:16px;">
|
|
922
|
+
<div style="width:40px; height:40px; background:#0d1a24; flex-shrink:0;"></div>
|
|
923
|
+
<div>
|
|
924
|
+
<p style="font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.2;">bg-frame</p>
|
|
925
|
+
<p style="font-size:12px; letter-spacing:0.08em; color:var(--text-muted);">#0d1a24 — Deep Ink</p>
|
|
926
|
+
</div>
|
|
927
|
+
</div>
|
|
928
|
+
</div>
|
|
929
|
+
</div>
|
|
930
|
+
</div>
|
|
931
|
+
|
|
932
|
+
<!-- Right: Typography Specimen -->
|
|
933
|
+
<div style="flex: 1; padding-left:80px; display:flex; flex-direction:column; justify-content:center; gap:32px;">
|
|
934
|
+
<p class="eyebrow" style="margin-bottom:0;">Typography — EB Garamond</p>
|
|
935
|
+
<div style="display:flex; flex-direction:column; gap:20px;">
|
|
936
|
+
<div style="border-bottom:1px solid var(--line); padding-bottom:20px;">
|
|
937
|
+
<p style="font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px;">H1 · 88px · 500</p>
|
|
938
|
+
<h1 style="font-size:88px; line-height:0.96; text-transform:uppercase;">Headline</h1>
|
|
939
|
+
</div>
|
|
940
|
+
<div style="border-bottom:1px solid var(--line); padding-bottom:20px;">
|
|
941
|
+
<p style="font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px;">H2 · 34px · 500</p>
|
|
942
|
+
<h2>Section Heading</h2>
|
|
943
|
+
</div>
|
|
944
|
+
<div style="border-bottom:1px solid var(--line); padding-bottom:20px;">
|
|
945
|
+
<p style="font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px;">H3 · 24px · 500</p>
|
|
946
|
+
<h3>Subsection Title</h3>
|
|
947
|
+
</div>
|
|
948
|
+
<div style="border-bottom:1px solid var(--line); padding-bottom:20px;">
|
|
949
|
+
<p style="font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px;">Body · 17px · 400 · 1.65</p>
|
|
950
|
+
<p>The water reflects a sky of softest grey, where impressions dissolve into feeling.</p>
|
|
951
|
+
</div>
|
|
952
|
+
<div style="border-bottom:1px solid var(--line); padding-bottom:20px;">
|
|
953
|
+
<p style="font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px;">Quote Text · 20px · italic</p>
|
|
954
|
+
<p style="font-size:20px; line-height:1.5; font-style:italic; color:var(--text-primary);">Light bends across lily pads at dawn, each surface a mirror of the sky above.</p>
|
|
955
|
+
</div>
|
|
956
|
+
<div style="border-bottom:1px solid var(--line); padding-bottom:20px;">
|
|
957
|
+
<p style="font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px;">Body Italic · 17px</p>
|
|
958
|
+
<p style="font-style:italic;">Light bends across lily pads at dawn, each surface a mirror of the sky above.</p>
|
|
959
|
+
</div>
|
|
960
|
+
<div>
|
|
961
|
+
<p style="font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px;">Eyebrow / Caption · 12px · 0.18em</p>
|
|
962
|
+
<p class="eyebrow">Annual Report · Section Label · 2026</p>
|
|
963
|
+
</div>
|
|
964
|
+
</div>
|
|
965
|
+
</div>
|
|
966
|
+
|
|
967
|
+
</div>
|
|
968
|
+
</div>
|
|
969
|
+
</section>
|
|
970
|
+
|
|
971
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
972
|
+
Slide 02 — LAYOUT: Fullbleed (qa=false)
|
|
973
|
+
════════════════════════════════════════════════════════════════ -->
|
|
974
|
+
<section class="slide" slide-qa="false" data-index="1">
|
|
975
|
+
<div class="slide-canvas">
|
|
976
|
+
<div class="page" style="padding:0; background:#0d1a24;">
|
|
977
|
+
<p class="preview-slide-label" style="color:rgba(240,244,247,0.45);">Layout 01 — Fullbleed · qa=false</p>
|
|
978
|
+
|
|
979
|
+
<!-- Single full-canvas slot -->
|
|
980
|
+
<div style="width:100%; height:100%; background:#2980AF; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; opacity:0.25;"></div>
|
|
981
|
+
<div style="position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;">
|
|
982
|
+
<div style="width:64px; height:1px; background:rgba(240,244,247,0.4);"></div>
|
|
983
|
+
<p style="font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; color:rgba(240,244,247,0.9);">slot: content</p>
|
|
984
|
+
<p style="font-family:var(--font-display); font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(240,244,247,0.5);">100% × 100% · image-title component</p>
|
|
985
|
+
<div style="width:64px; height:1px; background:rgba(240,244,247,0.4);"></div>
|
|
986
|
+
<p style="font-family:var(--font-display); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(240,244,247,0.3); margin-top:40px;">Use image-title --left for cover · --right for closing</p>
|
|
987
|
+
</div>
|
|
988
|
+
|
|
989
|
+
</div>
|
|
990
|
+
</div>
|
|
991
|
+
</section>
|
|
992
|
+
|
|
993
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
994
|
+
Slide 03 — LAYOUT: Narrative (qa=true)
|
|
995
|
+
════════════════════════════════════════════════════════════════ -->
|
|
996
|
+
<section class="slide" slide-qa="true" data-index="2">
|
|
997
|
+
<div class="slide-canvas">
|
|
998
|
+
<div class="page" style="padding:0; overflow:hidden; position:relative;">
|
|
999
|
+
<p class="preview-slide-label">Layout 02 — Narrative · qa=true</p>
|
|
1000
|
+
<div class="narrative-grid" style="height:100%;">
|
|
1001
|
+
|
|
1002
|
+
<!-- slot: left 1.618fr -->
|
|
1003
|
+
<div style="background:#2980AF; position:relative;">
|
|
1004
|
+
<div class="preview-slot-label">
|
|
1005
|
+
<p class="preview-slot-name" style="color:rgba(240,244,247,0.9);">slot: left</p>
|
|
1006
|
+
<p class="preview-slot-ratio" style="color:rgba(240,244,247,0.6);">1.618fr</p>
|
|
1007
|
+
</div>
|
|
1008
|
+
</div>
|
|
1009
|
+
|
|
1010
|
+
<!-- slot: right 1fr -->
|
|
1011
|
+
<div style="background:#e4ecf2; position:relative; border-left:1px solid var(--line);">
|
|
1012
|
+
<div class="preview-slot-label">
|
|
1013
|
+
<p class="preview-slot-name">slot: right</p>
|
|
1014
|
+
<p class="preview-slot-ratio">1fr</p>
|
|
1015
|
+
</div>
|
|
1016
|
+
</div>
|
|
1017
|
+
|
|
1018
|
+
</div>
|
|
1019
|
+
</div>
|
|
1020
|
+
</div>
|
|
1021
|
+
</section>
|
|
1022
|
+
|
|
1023
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1024
|
+
Slide 04 — LAYOUT: Narrative Reverse (qa=true)
|
|
1025
|
+
════════════════════════════════════════════════════════════════ -->
|
|
1026
|
+
<section class="slide" slide-qa="true" data-index="3">
|
|
1027
|
+
<div class="slide-canvas">
|
|
1028
|
+
<div class="page" style="padding:0; overflow:hidden; position:relative;">
|
|
1029
|
+
<p class="preview-slide-label">Layout 03 — Narrative Reverse · qa=true</p>
|
|
1030
|
+
<div class="narrative-grid narrative-grid--reverse" style="height:100%;">
|
|
1031
|
+
|
|
1032
|
+
<!-- slot: left 1fr -->
|
|
1033
|
+
<div style="background:#e4ecf2; position:relative; border-right:1px solid var(--line);">
|
|
1034
|
+
<div class="preview-slot-label">
|
|
1035
|
+
<p class="preview-slot-name">slot: left</p>
|
|
1036
|
+
<p class="preview-slot-ratio">1fr</p>
|
|
1037
|
+
</div>
|
|
1038
|
+
</div>
|
|
1039
|
+
|
|
1040
|
+
<!-- slot: right 1.618fr -->
|
|
1041
|
+
<div style="background:#2980AF; position:relative;">
|
|
1042
|
+
<div class="preview-slot-label">
|
|
1043
|
+
<p class="preview-slot-name" style="color:rgba(240,244,247,0.9);">slot: right</p>
|
|
1044
|
+
<p class="preview-slot-ratio" style="color:rgba(240,244,247,0.6);">1.618fr</p>
|
|
1045
|
+
</div>
|
|
1046
|
+
</div>
|
|
1047
|
+
|
|
1048
|
+
</div>
|
|
1049
|
+
</div>
|
|
1050
|
+
</div>
|
|
1051
|
+
</section>
|
|
1052
|
+
|
|
1053
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1054
|
+
Slide 05 — LAYOUT: Highlight Cols (qa=true)
|
|
1055
|
+
════════════════════════════════════════════════════════════════ -->
|
|
1056
|
+
<section class="slide" slide-qa="true" data-index="4">
|
|
1057
|
+
<div class="slide-canvas">
|
|
1058
|
+
<div class="page" style="padding:56px 64px 64px; position:relative;">
|
|
1059
|
+
<p class="preview-slide-label">Layout 04 — Highlight Cols · qa=true</p>
|
|
1060
|
+
|
|
1061
|
+
<div style="margin-bottom:32px; margin-top:32px;">
|
|
1062
|
+
<p class="eyebrow" style="margin-bottom:10px;">Section Label</p>
|
|
1063
|
+
<h2 style="font-size:44px; text-transform:uppercase; line-height:0.96;">Three equal columns</h2>
|
|
1064
|
+
</div>
|
|
1065
|
+
|
|
1066
|
+
<div class="highlight-cols-grid" style="flex:1; min-height:0; height:680px;">
|
|
1067
|
+
<!-- col 1 -->
|
|
1068
|
+
<div style="background:#738DC2; height:100%;">
|
|
1069
|
+
<div class="preview-slot-label">
|
|
1070
|
+
<p class="preview-slot-name" style="color:rgba(240,244,247,0.9);">slot: 1</p>
|
|
1071
|
+
<p class="preview-slot-ratio" style="color:rgba(240,244,247,0.6);">1fr</p>
|
|
1072
|
+
</div>
|
|
1073
|
+
</div>
|
|
1074
|
+
<!-- col 2 -->
|
|
1075
|
+
<div style="background:#2980AF; height:100%;">
|
|
1076
|
+
<div class="preview-slot-label">
|
|
1077
|
+
<p class="preview-slot-name" style="color:rgba(240,244,247,0.9);">slot: 2</p>
|
|
1078
|
+
<p class="preview-slot-ratio" style="color:rgba(240,244,247,0.6);">1fr</p>
|
|
1079
|
+
</div>
|
|
1080
|
+
</div>
|
|
1081
|
+
<!-- col 3 -->
|
|
1082
|
+
<div style="background:#00A2B0; height:100%;">
|
|
1083
|
+
<div class="preview-slot-label">
|
|
1084
|
+
<p class="preview-slot-name" style="color:rgba(240,244,247,0.9);">slot: 3</p>
|
|
1085
|
+
<p class="preview-slot-ratio" style="color:rgba(240,244,247,0.6);">1fr</p>
|
|
1086
|
+
</div>
|
|
1087
|
+
</div>
|
|
1088
|
+
</div>
|
|
1089
|
+
|
|
1090
|
+
</div>
|
|
1091
|
+
</div>
|
|
1092
|
+
</section>
|
|
1093
|
+
|
|
1094
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1095
|
+
Slide 06 — LAYOUT: Halves (qa=true)
|
|
1096
|
+
════════════════════════════════════════════════════════════════ -->
|
|
1097
|
+
<section class="slide" slide-qa="true" data-index="5">
|
|
1098
|
+
<div class="slide-canvas">
|
|
1099
|
+
<div class="page" style="padding:0; overflow:hidden; position:relative;">
|
|
1100
|
+
<p class="preview-slide-label">Layout 05 — Halves · qa=true</p>
|
|
1101
|
+
<div class="halves-grid" style="flex:1; min-height:0; height:100%;">
|
|
1102
|
+
|
|
1103
|
+
<!-- slot: left 1fr -->
|
|
1104
|
+
<div style="background:#83A5BA; position:relative;">
|
|
1105
|
+
<div class="preview-slot-label">
|
|
1106
|
+
<p class="preview-slot-name" style="color:rgba(240,244,247,0.9);">slot: left</p>
|
|
1107
|
+
<p class="preview-slot-ratio" style="color:rgba(240,244,247,0.6);">1fr</p>
|
|
1108
|
+
</div>
|
|
1109
|
+
</div>
|
|
1110
|
+
|
|
1111
|
+
<!-- slot: right 1fr -->
|
|
1112
|
+
<div style="background:#7CBDC3; position:relative;">
|
|
1113
|
+
<div class="preview-slot-label">
|
|
1114
|
+
<p class="preview-slot-name" style="color:rgba(240,244,247,0.9);">slot: right</p>
|
|
1115
|
+
<p class="preview-slot-ratio" style="color:rgba(240,244,247,0.6);">1fr</p>
|
|
1116
|
+
</div>
|
|
1117
|
+
</div>
|
|
1118
|
+
|
|
1119
|
+
</div>
|
|
1120
|
+
</div>
|
|
1121
|
+
</div>
|
|
1122
|
+
</section>
|
|
1123
|
+
|
|
1124
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1125
|
+
Slide 07 — LAYOUT: Stacked (qa=true)
|
|
1126
|
+
════════════════════════════════════════════════════════════════ -->
|
|
1127
|
+
<section class="slide" slide-qa="true" data-index="6">
|
|
1128
|
+
<div class="slide-canvas">
|
|
1129
|
+
<div class="page" style="padding:0; position:relative;">
|
|
1130
|
+
<p class="preview-slide-label">Layout 06 — Stacked · qa=true</p>
|
|
1131
|
+
<div class="stacked-grid">
|
|
1132
|
+
|
|
1133
|
+
<!-- slot: top 1fr -->
|
|
1134
|
+
<div class="stacked-top" style="background:#738DC2;">
|
|
1135
|
+
<div class="preview-slot-label">
|
|
1136
|
+
<p class="preview-slot-name" style="color:rgba(240,244,247,0.9);">slot: top</p>
|
|
1137
|
+
<p class="preview-slot-ratio" style="color:rgba(240,244,247,0.6);">1fr</p>
|
|
1138
|
+
</div>
|
|
1139
|
+
</div>
|
|
1140
|
+
|
|
1141
|
+
<!-- slot: bottom 1.618fr -->
|
|
1142
|
+
<div class="stacked-bottom" style="background:#2980AF; border-top:1px solid rgba(240,244,247,0.2);">
|
|
1143
|
+
<div class="preview-slot-label">
|
|
1144
|
+
<p class="preview-slot-name" style="color:rgba(240,244,247,0.9);">slot: bottom</p>
|
|
1145
|
+
<p class="preview-slot-ratio" style="color:rgba(240,244,247,0.6);">1.618fr</p>
|
|
1146
|
+
</div>
|
|
1147
|
+
</div>
|
|
1148
|
+
|
|
1149
|
+
</div>
|
|
1150
|
+
</div>
|
|
1151
|
+
</div>
|
|
1152
|
+
</section>
|
|
1153
|
+
|
|
1154
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1155
|
+
Slide 08 — COMPONENT: text-panel
|
|
1156
|
+
════════════════════════════════════════════════════════════════ -->
|
|
1157
|
+
<section class="slide" slide-qa="true" data-index="7">
|
|
1158
|
+
<div class="slide-canvas">
|
|
1159
|
+
<div class="page" style="padding:0; overflow:hidden;">
|
|
1160
|
+
<p class="preview-slide-label">Component 01 — text-panel</p>
|
|
1161
|
+
<div class="narrative-grid" style="height:100%;">
|
|
1162
|
+
|
|
1163
|
+
<!-- text-panel --dark -->
|
|
1164
|
+
<div class="text-panel text-panel--dark">
|
|
1165
|
+
<div style="max-width:420px;">
|
|
1166
|
+
<p class="eyebrow" style="color:rgba(243,238,230,0.72);">Annual Review · 2025</p>
|
|
1167
|
+
<h2 style="margin-top:16px; font-size:60px; line-height:0.92; letter-spacing:-0.02em; text-transform:uppercase; color:#f0f4f7; max-width:360px;">Narrative Heading</h2>
|
|
1168
|
+
<p style="margin-top:14px; font-size:17px; line-height:1.58; color:rgba(243,238,230,0.70); max-width:360px;">A brief curatorial line can slow the reader down before the main argument begins.</p>
|
|
1169
|
+
<div class="text-panel-body" style="margin-top:20px;">
|
|
1170
|
+
<p style="font-size:17px; line-height:1.58; color:rgba(243,238,230,0.84); max-width:390px;">Use one or two compact paragraphs when continuous prose fits the content better than a list. Restraint is a Monet virtue.</p>
|
|
1171
|
+
<ul class="editorial-list" style="margin-top:12px; --accent-earth:rgba(240,244,247,0.72);">
|
|
1172
|
+
<li><strong>Lead phrase.</strong> Supporting explanation for this key finding.</li>
|
|
1173
|
+
<li><strong>Second point.</strong> One sentence of evidence or context.</li>
|
|
1174
|
+
<li><strong>Third point.</strong> Keep items roughly equal in length.</li>
|
|
1175
|
+
</ul>
|
|
1176
|
+
</div>
|
|
1177
|
+
</div>
|
|
1178
|
+
<div class="text-panel-footer" style="color:rgba(243,238,230,0.68);">
|
|
1179
|
+
<p class="caption" style="color:rgba(243,238,230,0.5);">Monet / Climate Report 2025</p>
|
|
1180
|
+
<p class="caption" style="color:rgba(243,238,230,0.5);">03</p>
|
|
1181
|
+
</div>
|
|
1182
|
+
</div>
|
|
1183
|
+
|
|
1184
|
+
<!-- text-panel --light -->
|
|
1185
|
+
<div class="text-panel text-panel--light" style="border-left:1px solid var(--line);">
|
|
1186
|
+
<div style="max-width:420px;">
|
|
1187
|
+
<p class="eyebrow">Key Findings</p>
|
|
1188
|
+
<h3 style="margin-top:12px; font-size:28px;">Three priorities for 2026</h3>
|
|
1189
|
+
<p style="margin-top:12px; font-size:17px; line-height:1.58; color:var(--text-secondary); max-width:360px;">Use a short lead-in when the panel needs a softer transition into bullets or recommendations.</p>
|
|
1190
|
+
<div class="text-panel-body" style="margin-top:16px;">
|
|
1191
|
+
<ul class="editorial-list">
|
|
1192
|
+
<li><strong>Lead phrase.</strong> Supporting explanation for this first point.</li>
|
|
1193
|
+
<li><strong>Second point.</strong> One sentence of context or evidence.</li>
|
|
1194
|
+
<li><strong>Third point.</strong> Keep each item roughly equal in length.</li>
|
|
1195
|
+
</ul>
|
|
1196
|
+
</div>
|
|
1197
|
+
</div>
|
|
1198
|
+
<div class="text-panel-footer">
|
|
1199
|
+
<p class="caption">Monet / Climate Report 2025</p>
|
|
1200
|
+
<p class="caption">04</p>
|
|
1201
|
+
</div>
|
|
1202
|
+
</div>
|
|
1203
|
+
|
|
1204
|
+
</div>
|
|
1205
|
+
</div>
|
|
1206
|
+
</div>
|
|
1207
|
+
</section>
|
|
1208
|
+
|
|
1209
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1210
|
+
Slide 09 — COMPONENT: stat-card
|
|
1211
|
+
════════════════════════════════════════════════════════════════ -->
|
|
1212
|
+
<section class="slide" slide-qa="true" data-index="8">
|
|
1213
|
+
<div class="slide-canvas">
|
|
1214
|
+
<div class="page" style="padding:56px 64px 64px;">
|
|
1215
|
+
<p class="preview-slide-label" style="top:28px;">Component 02 — stat-card</p>
|
|
1216
|
+
|
|
1217
|
+
<div style="margin-top:32px; margin-bottom:40px;">
|
|
1218
|
+
<p class="eyebrow" style="margin-bottom:8px;">Performance Signals</p>
|
|
1219
|
+
<h2 style="font-size:40px; text-transform:uppercase; line-height:0.96;">Key Metrics</h2>
|
|
1220
|
+
</div>
|
|
1221
|
+
|
|
1222
|
+
<div style="display:grid; grid-template-columns:1fr 1fr; gap:64px; flex:1; min-height:0;">
|
|
1223
|
+
|
|
1224
|
+
<!-- stat-card vertical -->
|
|
1225
|
+
<div style="padding:40px; background:var(--bg-page-alt); display:flex; flex-direction:column; gap:0;">
|
|
1226
|
+
<p style="font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-muted); margin-bottom:0;">Variant A — Vertical</p>
|
|
1227
|
+
<div style="margin-top:32px;">
|
|
1228
|
+
<p class="caption" style="color:var(--text-muted);">Performance signal</p>
|
|
1229
|
+
<div class="stat-card-value" style="color:var(--accent-gold); margin-top:8px;">27%</div>
|
|
1230
|
+
<div class="text-panel-body" style="gap:10px; max-width:330px; margin-top:16px;">
|
|
1231
|
+
<h3 style="font-size:24px; line-height:1.04; text-transform:uppercase;">EBIT Margin</h3>
|
|
1232
|
+
<p style="font-size:17px; line-height:1.56; color:var(--text-secondary);">Expanded for the third consecutive quarter as premium mix offset freight pressure and held pricing discipline through softer volume.</p>
|
|
1233
|
+
</div>
|
|
1234
|
+
</div>
|
|
1235
|
+
</div>
|
|
1236
|
+
|
|
1237
|
+
<!-- stat-card horizontal -->
|
|
1238
|
+
<div style="padding:40px; background:var(--bg-page-alt); display:flex; flex-direction:column; gap:0;">
|
|
1239
|
+
<p style="font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--text-muted); margin-bottom:0;">Variant B — Horizontal</p>
|
|
1240
|
+
<div class="stat-card stat-card--horizontal" style="margin-top:32px;">
|
|
1241
|
+
<div style="display:flex; flex-direction:column; gap:12px; flex:0 0 220px; min-width:0;">
|
|
1242
|
+
<p class="caption" style="color:var(--text-muted);">Operational baseline</p>
|
|
1243
|
+
<div class="stat-card-value" style="color:var(--accent-olive);">4.8x</div>
|
|
1244
|
+
</div>
|
|
1245
|
+
<div class="text-panel-body" style="gap:10px; max-width:330px;">
|
|
1246
|
+
<h3 style="font-size:24px; line-height:1.04; text-transform:uppercase;">Inventory Turnover</h3>
|
|
1247
|
+
<p style="font-size:17px; line-height:1.56; color:var(--text-secondary);">Higher cycle efficiency reduced working-capital drag without adding new capacity, leaving headroom for seasonal demand swings.</p>
|
|
1248
|
+
</div>
|
|
1249
|
+
</div>
|
|
1250
|
+
</div>
|
|
1251
|
+
|
|
1252
|
+
</div>
|
|
1253
|
+
</div>
|
|
1254
|
+
</div>
|
|
1255
|
+
</section>
|
|
1256
|
+
|
|
1257
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1258
|
+
Slide 10 — COMPONENT: editorial-image-top
|
|
1259
|
+
════════════════════════════════════════════════════════════════ -->
|
|
1260
|
+
<section class="slide" slide-qa="true" data-index="9">
|
|
1261
|
+
<div class="slide-canvas">
|
|
1262
|
+
<div class="page" style="padding:0; overflow:hidden;">
|
|
1263
|
+
<p class="preview-slide-label">Component 03 — editorial-image-top</p>
|
|
1264
|
+
<div class="highlight-cols-grid" style="height:100%; padding:56px 64px 64px; gap:40px; align-items:start;">
|
|
1265
|
+
|
|
1266
|
+
<div class="editorial-image-top">
|
|
1267
|
+
<div class="media-frame editorial-media" style="height:320px;">
|
|
1268
|
+
<img src="https://commons.wikimedia.org/wiki/Special:FilePath/Claude%20Monet%20-%20Water%20Lilies%20-%20Google%20Art%20Project.jpg" alt="Claude Monet, Water Lilies">
|
|
1269
|
+
</div>
|
|
1270
|
+
<div class="editorial-module-body">
|
|
1271
|
+
<div class="module-kicker-row">
|
|
1272
|
+
<i data-lucide="leaf" class="module-icon"></i>
|
|
1273
|
+
<p class="caption">Water gardens</p>
|
|
1274
|
+
</div>
|
|
1275
|
+
<h3>Image leads before the copy explains the point.</h3>
|
|
1276
|
+
<div class="text-panel-body">
|
|
1277
|
+
<p style="font-size:17px; line-height:1.58; color:var(--text-secondary);">Choose this component when the visual should establish texture, materiality, or field context before the audience reads the narrative.</p>
|
|
1278
|
+
</div>
|
|
1279
|
+
</div>
|
|
1280
|
+
</div>
|
|
1281
|
+
|
|
1282
|
+
<div class="editorial-image-top">
|
|
1283
|
+
<div class="media-frame editorial-media" style="height:320px;">
|
|
1284
|
+
<img src="https://commons.wikimedia.org/wiki/Special:FilePath/Claude%20Monet%2C%20Impression%2C%20soleil%20levant.jpg" alt="Claude Monet, Impression, Sunrise">
|
|
1285
|
+
</div>
|
|
1286
|
+
<div class="editorial-module-body">
|
|
1287
|
+
<div class="module-kicker-row">
|
|
1288
|
+
<i data-lucide="droplets" class="module-icon"></i>
|
|
1289
|
+
<p class="caption">Reflections</p>
|
|
1290
|
+
</div>
|
|
1291
|
+
<h3>A second card demonstrates multi-column rhythm.</h3>
|
|
1292
|
+
<div class="text-panel-body">
|
|
1293
|
+
<ul class="editorial-list" style="font-size:13px; gap:10px;">
|
|
1294
|
+
<li><strong>Lead phrase.</strong> Supporting point one.</li>
|
|
1295
|
+
<li><strong>Second point.</strong> One sentence of evidence.</li>
|
|
1296
|
+
</ul>
|
|
1297
|
+
</div>
|
|
1298
|
+
</div>
|
|
1299
|
+
</div>
|
|
1300
|
+
|
|
1301
|
+
<div class="editorial-image-top">
|
|
1302
|
+
<div class="media-frame editorial-media" style="height:320px;">
|
|
1303
|
+
<img src="https://commons.wikimedia.org/wiki/Special:FilePath/Claude%20Monet%2C%20Impression%2C%20soleil%20levant.jpg" alt="Claude Monet, Impression, Sunrise">
|
|
1304
|
+
</div>
|
|
1305
|
+
<div class="editorial-module-body">
|
|
1306
|
+
<div class="module-kicker-row">
|
|
1307
|
+
<i data-lucide="sun" class="module-icon"></i>
|
|
1308
|
+
<p class="caption">Soft light</p>
|
|
1309
|
+
</div>
|
|
1310
|
+
<h3>Third column completes the editorial spread.</h3>
|
|
1311
|
+
<div class="text-panel-body">
|
|
1312
|
+
<p style="font-size:17px; line-height:1.58; color:var(--text-secondary);">Three equal editorial-image-top cards inside highlight-cols-grid form a natural proof-block.</p>
|
|
1313
|
+
</div>
|
|
1314
|
+
</div>
|
|
1315
|
+
</div>
|
|
1316
|
+
|
|
1317
|
+
</div>
|
|
1318
|
+
</div>
|
|
1319
|
+
</div>
|
|
1320
|
+
</section>
|
|
1321
|
+
|
|
1322
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1323
|
+
Slide 11 — COMPONENT: editorial-text-top
|
|
1324
|
+
════════════════════════════════════════════════════════════════ -->
|
|
1325
|
+
<section class="slide" slide-qa="true" data-index="10">
|
|
1326
|
+
<div class="slide-canvas">
|
|
1327
|
+
<div class="page" style="padding:0; overflow:hidden;">
|
|
1328
|
+
<p class="preview-slide-label">Component 04 — editorial-text-top</p>
|
|
1329
|
+
<div class="highlight-cols-grid" style="height:100%; padding:56px 64px 64px; gap:40px; align-items:start;">
|
|
1330
|
+
|
|
1331
|
+
<div class="editorial-text-top">
|
|
1332
|
+
<div class="editorial-module-body">
|
|
1333
|
+
<div class="module-kicker-row">
|
|
1334
|
+
<i data-lucide="gauge" class="module-icon"></i>
|
|
1335
|
+
<p class="caption">Programme findings</p>
|
|
1336
|
+
</div>
|
|
1337
|
+
<h3>Lead with the argument, then let the image confirm it.</h3>
|
|
1338
|
+
<div class="text-panel-body">
|
|
1339
|
+
<p style="font-size:17px; line-height:1.58; color:var(--text-secondary);">Use this component when the audience should understand the point first and only then read the image as supporting evidence.</p>
|
|
1340
|
+
</div>
|
|
1341
|
+
</div>
|
|
1342
|
+
<div class="media-frame editorial-media" style="height:260px;">
|
|
1343
|
+
<img src="https://commons.wikimedia.org/wiki/Special:FilePath/Claude%20Monet%20-%20Water%20Lilies%20-%20Google%20Art%20Project.jpg" alt="Claude Monet, Water Lilies">
|
|
1344
|
+
</div>
|
|
1345
|
+
<p class="media-caption">Photo caption · field site · 2025</p>
|
|
1346
|
+
</div>
|
|
1347
|
+
|
|
1348
|
+
<div class="editorial-text-top">
|
|
1349
|
+
<div class="editorial-module-body">
|
|
1350
|
+
<div class="module-kicker-row">
|
|
1351
|
+
<i data-lucide="bar-chart-2" class="module-icon"></i>
|
|
1352
|
+
<p class="caption">Operational data</p>
|
|
1353
|
+
</div>
|
|
1354
|
+
<h3>Second card for rhythm demonstration.</h3>
|
|
1355
|
+
<div class="text-panel-body">
|
|
1356
|
+
<ul class="editorial-list" style="font-size:13px; gap:10px;">
|
|
1357
|
+
<li><strong>Key metric.</strong> Supporting point in one sentence.</li>
|
|
1358
|
+
<li><strong>Second insight.</strong> One line of clarifying detail.</li>
|
|
1359
|
+
</ul>
|
|
1360
|
+
</div>
|
|
1361
|
+
</div>
|
|
1362
|
+
<div class="media-frame editorial-media" style="height:260px;">
|
|
1363
|
+
<img src="https://commons.wikimedia.org/wiki/Special:FilePath/Claude%20Monet%2C%20Impression%2C%20soleil%20levant.jpg" alt="Claude Monet, Impression, Sunrise">
|
|
1364
|
+
</div>
|
|
1365
|
+
<p class="media-caption">Photo caption · 2025</p>
|
|
1366
|
+
</div>
|
|
1367
|
+
|
|
1368
|
+
<div class="editorial-text-top">
|
|
1369
|
+
<div class="editorial-module-body">
|
|
1370
|
+
<div class="module-kicker-row">
|
|
1371
|
+
<i data-lucide="layers" class="module-icon"></i>
|
|
1372
|
+
<p class="caption">Summary view</p>
|
|
1373
|
+
</div>
|
|
1374
|
+
<h3>Third module closes the three-column argument.</h3>
|
|
1375
|
+
<div class="text-panel-body">
|
|
1376
|
+
<p style="font-size:17px; line-height:1.58; color:var(--text-secondary);">Three editorial-text-top cards follow the same vertical rhythm — text first, image as evidence below.</p>
|
|
1377
|
+
</div>
|
|
1378
|
+
</div>
|
|
1379
|
+
<div class="media-frame editorial-media" style="height:260px;">
|
|
1380
|
+
<img src="https://commons.wikimedia.org/wiki/Special:FilePath/Claude%20Monet%2C%20Impression%2C%20soleil%20levant.jpg" alt="Claude Monet, Impression, Sunrise">
|
|
1381
|
+
</div>
|
|
1382
|
+
<p class="media-caption">Photo caption · 2025</p>
|
|
1383
|
+
</div>
|
|
1384
|
+
|
|
1385
|
+
</div>
|
|
1386
|
+
</div>
|
|
1387
|
+
</div>
|
|
1388
|
+
</section>
|
|
1389
|
+
|
|
1390
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1391
|
+
Slide 12 — COMPONENT: editorial-text-left
|
|
1392
|
+
════════════════════════════════════════════════════════════════ -->
|
|
1393
|
+
<section class="slide" slide-qa="true" data-index="11">
|
|
1394
|
+
<div class="slide-canvas">
|
|
1395
|
+
<div class="page" style="display:flex; align-items:center; justify-content:center; padding:48px 64px;">
|
|
1396
|
+
<p class="preview-slide-label">Component 05 — editorial-text-left</p>
|
|
1397
|
+
<div class="editorial-text-left" style="width:100%; max-width:900px; height:480px; overflow:hidden;">
|
|
1398
|
+
|
|
1399
|
+
<div class="editorial-text-left-header">
|
|
1400
|
+
<h3 style="font-size:20px; line-height:1.08;">Full-width module title — spans both columns, anchors the composition above</h3>
|
|
1401
|
+
</div>
|
|
1402
|
+
|
|
1403
|
+
<div class="editorial-text-left-content" style="flex:1; min-height:0;">
|
|
1404
|
+
<div class="editorial-text-left-copy">
|
|
1405
|
+
<div class="module-kicker-row">
|
|
1406
|
+
<i data-lucide="zap" class="module-icon"></i>
|
|
1407
|
+
<p class="caption">Category label</p>
|
|
1408
|
+
</div>
|
|
1409
|
+
<div class="text-panel-body" style="margin-top:12px;">
|
|
1410
|
+
<p style="font-size:17px; line-height:1.5; color:var(--text-secondary);">Supporting description. One or two sentences that position this card within the broader page argument.</p>
|
|
1411
|
+
<ul class="editorial-list" style="font-size:13px; gap:10px; margin-top:12px;">
|
|
1412
|
+
<li><strong>Lead phrase.</strong> Supporting explanation for this point.</li>
|
|
1413
|
+
<li><strong>Second point.</strong> One sentence of context or evidence.</li>
|
|
1414
|
+
<li><strong>Third point.</strong> Keep each item roughly equal in length.</li>
|
|
1415
|
+
</ul>
|
|
1416
|
+
</div>
|
|
1417
|
+
</div>
|
|
1418
|
+
|
|
1419
|
+
<div class="editorial-text-left-visual">
|
|
1420
|
+
<div class="editorial-text-left-visual-stack">
|
|
1421
|
+
<div class="editorial-text-left-tilt" aria-hidden="true"></div>
|
|
1422
|
+
<div class="media-frame" style="width:100%; height:100%; position:relative; z-index:1;">
|
|
1423
|
+
<img src="https://commons.wikimedia.org/wiki/Special:FilePath/Claude%20Monet%20-%20Water%20Lilies%20-%20Google%20Art%20Project.jpg" alt="Claude Monet, Water Lilies">
|
|
1424
|
+
</div>
|
|
1425
|
+
</div>
|
|
1426
|
+
</div>
|
|
1427
|
+
</div>
|
|
1428
|
+
|
|
1429
|
+
</div>
|
|
1430
|
+
</div>
|
|
1431
|
+
</div>
|
|
1432
|
+
</section>
|
|
1433
|
+
|
|
1434
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1435
|
+
Slide 13 — COMPONENT: echart-panel
|
|
1436
|
+
════════════════════════════════════════════════════════════════ -->
|
|
1437
|
+
<section class="slide" slide-qa="true" data-index="12">
|
|
1438
|
+
<div class="slide-canvas">
|
|
1439
|
+
<div class="page" style="padding:0; overflow:hidden;">
|
|
1440
|
+
<p class="preview-slide-label">Component 06 — echart-panel</p>
|
|
1441
|
+
<div class="narrative-grid" style="height:100%;">
|
|
1442
|
+
|
|
1443
|
+
<!-- left: bar chart -->
|
|
1444
|
+
<div style="padding:48px 48px 40px; display:flex; flex-direction:column; height:100%; box-sizing:border-box;">
|
|
1445
|
+
<div class="echart-panel" style="height:100%;">
|
|
1446
|
+
<div class="echart-panel-header">
|
|
1447
|
+
<p class="eyebrow">Revenue Analysis</p>
|
|
1448
|
+
<h3>Annual Revenue by Segment</h3>
|
|
1449
|
+
<p class="chart-subtitle">FY 2022–2025 · USD Millions</p>
|
|
1450
|
+
</div>
|
|
1451
|
+
<div class="echart-container" id="chart-bar" style="height:100%; min-height:0;"></div>
|
|
1452
|
+
<p class="chart-caption">Source: Company Financials · 2025</p>
|
|
1453
|
+
</div>
|
|
1454
|
+
</div>
|
|
1455
|
+
|
|
1456
|
+
<!-- right: line chart -->
|
|
1457
|
+
<div style="padding:48px 48px 40px; display:flex; flex-direction:column; height:100%; box-sizing:border-box; border-left:1px solid var(--line);">
|
|
1458
|
+
<div class="echart-panel" style="height:100%;">
|
|
1459
|
+
<div class="echart-panel-header">
|
|
1460
|
+
<p class="eyebrow">Margin Trend</p>
|
|
1461
|
+
<h3>Operating Margin 2020–2025</h3>
|
|
1462
|
+
<p class="chart-subtitle">Percentage · Year-on-Year</p>
|
|
1463
|
+
</div>
|
|
1464
|
+
<div class="echart-container" id="chart-line" style="height:100%; min-height:0;"></div>
|
|
1465
|
+
<p class="chart-caption">Source: Company Financials · 2025</p>
|
|
1466
|
+
</div>
|
|
1467
|
+
</div>
|
|
1468
|
+
|
|
1469
|
+
</div>
|
|
1470
|
+
</div>
|
|
1471
|
+
</div>
|
|
1472
|
+
</section>
|
|
1473
|
+
|
|
1474
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1475
|
+
Slide 14 — COMPONENT: flow-horizontal
|
|
1476
|
+
════════════════════════════════════════════════════════════════ -->
|
|
1477
|
+
<section class="slide" slide-qa="true" data-index="13">
|
|
1478
|
+
<div class="slide-canvas">
|
|
1479
|
+
<div class="page" style="padding:64px 80px; display:flex; flex-direction:column; justify-content:center;">
|
|
1480
|
+
<p class="preview-slide-label">Component 07 — flow-horizontal</p>
|
|
1481
|
+
|
|
1482
|
+
<div style="margin-bottom:64px;">
|
|
1483
|
+
<p class="eyebrow" style="margin-bottom:10px;">Process Overview</p>
|
|
1484
|
+
<h2 style="font-size:48px; text-transform:uppercase; line-height:0.96;">Four-phase programme</h2>
|
|
1485
|
+
</div>
|
|
1486
|
+
|
|
1487
|
+
<div class="flow-horizontal">
|
|
1488
|
+
<div class="flow-item">
|
|
1489
|
+
<div class="flow-number" data-n="01" style="--fn-rot:-9deg;"></div>
|
|
1490
|
+
<div class="flow-body">
|
|
1491
|
+
<h4>Discovery</h4>
|
|
1492
|
+
<p>Cross-regional baseline mapping and legacy risk exposure formally catalogued across all operating units.</p>
|
|
1493
|
+
</div>
|
|
1494
|
+
</div>
|
|
1495
|
+
<div class="flow-item">
|
|
1496
|
+
<div class="flow-number" data-n="02" style="--fn-rot:7deg;"></div>
|
|
1497
|
+
<div class="flow-body">
|
|
1498
|
+
<h4>Assessment</h4>
|
|
1499
|
+
<p>Full supplier sprint completed. Ninety-four percent of Tier 1 suppliers assessed against new emissions criteria.</p>
|
|
1500
|
+
</div>
|
|
1501
|
+
</div>
|
|
1502
|
+
<div class="flow-item">
|
|
1503
|
+
<div class="flow-number" data-n="03" style="--fn-rot:-6deg;"></div>
|
|
1504
|
+
<div class="flow-body">
|
|
1505
|
+
<h4>Roadmap</h4>
|
|
1506
|
+
<p>Priority interventions ranked by impact-to-effort ratio and mapped to capital plan through 2027.</p>
|
|
1507
|
+
</div>
|
|
1508
|
+
</div>
|
|
1509
|
+
<div class="flow-item">
|
|
1510
|
+
<div class="flow-number" data-n="04" style="--fn-rot:10deg;"></div>
|
|
1511
|
+
<div class="flow-body">
|
|
1512
|
+
<h4>Execution</h4>
|
|
1513
|
+
<p>Programme office stood up with quarterly governance milestones and board-level reporting cadence.</p>
|
|
1514
|
+
</div>
|
|
1515
|
+
</div>
|
|
1516
|
+
</div>
|
|
1517
|
+
|
|
1518
|
+
</div>
|
|
1519
|
+
</div>
|
|
1520
|
+
</section>
|
|
1521
|
+
|
|
1522
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1523
|
+
Slide 15 — COMPONENT: flow-vertical
|
|
1524
|
+
════════════════════════════════════════════════════════════════ -->
|
|
1525
|
+
<section class="slide" slide-qa="true" data-index="14">
|
|
1526
|
+
<div class="slide-canvas">
|
|
1527
|
+
<div class="page" style="padding:0; overflow:hidden;">
|
|
1528
|
+
<p class="preview-slide-label">Component 08 — flow-vertical</p>
|
|
1529
|
+
<div class="narrative-grid" style="height:100%;">
|
|
1530
|
+
|
|
1531
|
+
<!-- left: header -->
|
|
1532
|
+
<div class="text-panel text-panel--dark">
|
|
1533
|
+
<div>
|
|
1534
|
+
<p class="eyebrow" style="color:rgba(243,238,230,0.72);">Execution Timeline</p>
|
|
1535
|
+
<h2 style="margin-top:16px; font-size:56px; line-height:0.92; text-transform:uppercase; color:#f0f4f7; max-width:320px;">Phase by Phase</h2>
|
|
1536
|
+
<p style="margin-top:20px; font-size:17px; line-height:1.6; color:rgba(243,238,230,0.75); max-width:360px;">
|
|
1537
|
+
Vertical flow for chronological phases, execution stages, or progress narratives read top to bottom.
|
|
1538
|
+
</p>
|
|
1539
|
+
</div>
|
|
1540
|
+
<div class="text-panel-footer" style="color:rgba(243,238,230,0.5);">
|
|
1541
|
+
<p class="caption">Programme Report · 2025</p>
|
|
1542
|
+
<p class="caption">08</p>
|
|
1543
|
+
</div>
|
|
1544
|
+
</div>
|
|
1545
|
+
|
|
1546
|
+
<!-- right: flow-vertical -->
|
|
1547
|
+
<div style="padding:56px 48px; border-left:1px solid var(--line);">
|
|
1548
|
+
<div class="flow-vertical">
|
|
1549
|
+
<div class="flow-item">
|
|
1550
|
+
<div class="flow-marker">
|
|
1551
|
+
<div class="flow-number" data-n="01" style="--fn-rot:-8deg;"></div>
|
|
1552
|
+
<div class="flow-line"></div>
|
|
1553
|
+
</div>
|
|
1554
|
+
<div class="flow-body">
|
|
1555
|
+
<h4>Foundation</h4>
|
|
1556
|
+
<p>Governance framework and cross-functional team mobilised. Baseline data collected.</p>
|
|
1557
|
+
</div>
|
|
1558
|
+
</div>
|
|
1559
|
+
<div class="flow-item">
|
|
1560
|
+
<div class="flow-marker">
|
|
1561
|
+
<div class="flow-number" data-n="02" style="--fn-rot:11deg;"></div>
|
|
1562
|
+
<div class="flow-line"></div>
|
|
1563
|
+
</div>
|
|
1564
|
+
<div class="flow-body">
|
|
1565
|
+
<h4>Pilot</h4>
|
|
1566
|
+
<p>Three pilot sites selected. Interventions tested against KPI targets for a full operating cycle.</p>
|
|
1567
|
+
</div>
|
|
1568
|
+
</div>
|
|
1569
|
+
<div class="flow-item">
|
|
1570
|
+
<div class="flow-marker">
|
|
1571
|
+
<div class="flow-number" data-n="03" style="--fn-rot:-6deg;"></div>
|
|
1572
|
+
<div class="flow-line"></div>
|
|
1573
|
+
</div>
|
|
1574
|
+
<div class="flow-body">
|
|
1575
|
+
<h4>Scale</h4>
|
|
1576
|
+
<p>Successful pilot learnings codified. Rollout plan activated across all remaining sites.</p>
|
|
1577
|
+
</div>
|
|
1578
|
+
</div>
|
|
1579
|
+
<div class="flow-item last">
|
|
1580
|
+
<div class="flow-marker">
|
|
1581
|
+
<div class="flow-number" data-n="04" style="--fn-rot:9deg;"></div>
|
|
1582
|
+
</div>
|
|
1583
|
+
<div class="flow-body">
|
|
1584
|
+
<h4>Embed</h4>
|
|
1585
|
+
<p>Continuous improvement programme handed to operational teams. External audit scheduled annually.</p>
|
|
1586
|
+
</div>
|
|
1587
|
+
</div>
|
|
1588
|
+
</div>
|
|
1589
|
+
</div>
|
|
1590
|
+
|
|
1591
|
+
</div>
|
|
1592
|
+
</div>
|
|
1593
|
+
</div>
|
|
1594
|
+
</section>
|
|
1595
|
+
|
|
1596
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1597
|
+
Slide 16 — COMPONENT: data-table
|
|
1598
|
+
════════════════════════════════════════════════════════════════ -->
|
|
1599
|
+
<section class="slide" slide-qa="true" data-index="15">
|
|
1600
|
+
<div class="slide-canvas">
|
|
1601
|
+
<div class="page" style="padding:0; overflow:hidden;">
|
|
1602
|
+
<p class="preview-slide-label">Component 09 — data-table</p>
|
|
1603
|
+
<div class="narrative-grid" style="height:100%;">
|
|
1604
|
+
|
|
1605
|
+
<!-- left: table -->
|
|
1606
|
+
<div style="padding:56px 48px;">
|
|
1607
|
+
<p class="eyebrow" style="margin-bottom:16px;">Emissions Performance</p>
|
|
1608
|
+
<h2 style="margin-bottom:32px;">GHG Emissions by Scope</h2>
|
|
1609
|
+
<div class="data-table-wrap">
|
|
1610
|
+
<p class="data-table-label">Key Figures — GHG Emissions</p>
|
|
1611
|
+
<table class="data-table">
|
|
1612
|
+
<thead>
|
|
1613
|
+
<tr>
|
|
1614
|
+
<th>Scope</th>
|
|
1615
|
+
<th>2021</th>
|
|
1616
|
+
<th>2022</th>
|
|
1617
|
+
<th class="col-highlight">2023</th>
|
|
1618
|
+
<th class="col-highlight">2024</th>
|
|
1619
|
+
<th>YoY</th>
|
|
1620
|
+
</tr>
|
|
1621
|
+
</thead>
|
|
1622
|
+
<tbody>
|
|
1623
|
+
<tr class="section-header">
|
|
1624
|
+
<td colspan="6">Direct Emissions</td>
|
|
1625
|
+
</tr>
|
|
1626
|
+
<tr>
|
|
1627
|
+
<td>Scope 1</td>
|
|
1628
|
+
<td>1,329</td>
|
|
1629
|
+
<td>1,273</td>
|
|
1630
|
+
<td class="col-highlight">1,156</td>
|
|
1631
|
+
<td class="col-highlight">1,042</td>
|
|
1632
|
+
<td class="delta positive">−10%</td>
|
|
1633
|
+
</tr>
|
|
1634
|
+
<tr>
|
|
1635
|
+
<td>Scope 2</td>
|
|
1636
|
+
<td>1,618</td>
|
|
1637
|
+
<td>1,433</td>
|
|
1638
|
+
<td class="col-highlight">820</td>
|
|
1639
|
+
<td class="col-highlight">0</td>
|
|
1640
|
+
<td class="delta positive">−100%</td>
|
|
1641
|
+
</tr>
|
|
1642
|
+
<tr class="subtotal">
|
|
1643
|
+
<td>1+2 (net)</td>
|
|
1644
|
+
<td>2,947</td>
|
|
1645
|
+
<td>2,706</td>
|
|
1646
|
+
<td class="col-highlight">1,976</td>
|
|
1647
|
+
<td class="col-highlight">1,042</td>
|
|
1648
|
+
<td class="delta positive">−47%</td>
|
|
1649
|
+
</tr>
|
|
1650
|
+
<tr class="section-header">
|
|
1651
|
+
<td colspan="6">Value Chain</td>
|
|
1652
|
+
</tr>
|
|
1653
|
+
<tr>
|
|
1654
|
+
<td>Scope 3</td>
|
|
1655
|
+
<td>8,450</td>
|
|
1656
|
+
<td>8,120</td>
|
|
1657
|
+
<td class="col-highlight">7,890</td>
|
|
1658
|
+
<td class="col-highlight">7,340</td>
|
|
1659
|
+
<td class="delta positive">−7%</td>
|
|
1660
|
+
</tr>
|
|
1661
|
+
<tr class="subtotal">
|
|
1662
|
+
<td>Total</td>
|
|
1663
|
+
<td>11,397</td>
|
|
1664
|
+
<td>10,826</td>
|
|
1665
|
+
<td class="col-highlight">9,866</td>
|
|
1666
|
+
<td class="col-highlight">8,382</td>
|
|
1667
|
+
<td class="delta positive">−15%</td>
|
|
1668
|
+
</tr>
|
|
1669
|
+
</tbody>
|
|
1670
|
+
</table>
|
|
1671
|
+
<p class="table-caption">Thousands of tonnes CO₂e · Source: Company Disclosures 2024</p>
|
|
1672
|
+
</div>
|
|
1673
|
+
</div>
|
|
1674
|
+
|
|
1675
|
+
<!-- right: supporting note -->
|
|
1676
|
+
<div class="text-panel text-panel--light" style="border-left:1px solid var(--line);">
|
|
1677
|
+
<div style="max-width:380px;">
|
|
1678
|
+
<p class="eyebrow">Data Notes</p>
|
|
1679
|
+
<h3 style="margin-top:12px;">Table structure guide</h3>
|
|
1680
|
+
<div class="text-panel-body" style="margin-top:16px;">
|
|
1681
|
+
<ul class="editorial-list">
|
|
1682
|
+
<li><strong>col-highlight.</strong> Spotlight current or most important year — apply to both th and td.</li>
|
|
1683
|
+
<li><strong>section-header.</strong> Group rows by category label spanning all columns.</li>
|
|
1684
|
+
<li><strong>subtotal row.</strong> Heavier weight with double-rule border top and bottom.</li>
|
|
1685
|
+
<li><strong>delta.positive.</strong> Uses accent-olive. delta.negative uses accent-danger.</li>
|
|
1686
|
+
</ul>
|
|
1687
|
+
</div>
|
|
1688
|
+
</div>
|
|
1689
|
+
<div class="text-panel-footer">
|
|
1690
|
+
<p class="caption">Monet Design System</p>
|
|
1691
|
+
<p class="caption">09</p>
|
|
1692
|
+
</div>
|
|
1693
|
+
</div>
|
|
1694
|
+
|
|
1695
|
+
</div>
|
|
1696
|
+
</div>
|
|
1697
|
+
</div>
|
|
1698
|
+
</section>
|
|
1699
|
+
|
|
1700
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1701
|
+
Slide 17 — COMPONENT: image-title
|
|
1702
|
+
════════════════════════════════════════════════════════════════ -->
|
|
1703
|
+
<section class="slide" slide-qa="false" data-index="16">
|
|
1704
|
+
<div class="slide-canvas">
|
|
1705
|
+
<div class="page" style="padding:0;">
|
|
1706
|
+
|
|
1707
|
+
<div class="image-title image-title--left">
|
|
1708
|
+
<img class="image-title-media" src="https://commons.wikimedia.org/wiki/Special:FilePath/Claude%20Monet%20-%20Water%20Lilies%20-%20Google%20Art%20Project.jpg" alt="Claude Monet, Water Lilies">
|
|
1709
|
+
<div class="image-title-blur" style="-webkit-mask-image:linear-gradient(to left, transparent 0%, transparent 20%, black 100%); mask-image:linear-gradient(to left, transparent 0%, transparent 20%, black 100%);"></div>
|
|
1710
|
+
<div class="image-title-overlay" style="background:linear-gradient(105deg, rgba(5,5,5,0.95) 0%, rgba(5,5,5,0.72) 55%, rgba(5,5,5,0.10) 100%);"></div>
|
|
1711
|
+
<div class="image-title-fg">
|
|
1712
|
+
<div class="image-title-brand reveal">
|
|
1713
|
+
<span class="chevron-divider" style="color:rgba(240,244,247,0.55);">Monet Design System</span>
|
|
1714
|
+
</div>
|
|
1715
|
+
<div class="image-title-body">
|
|
1716
|
+
<p class="image-title-eyebrow reveal">Component 10 · image-title · --left variant</p>
|
|
1717
|
+
<h1 class="reveal">Opening<br>Statement<br>Here.</h1>
|
|
1718
|
+
<p class="image-title-subtitle reveal">Self-contained full-canvas component. Dominant photograph with blur layer, gradient overlay, and composited foreground text.</p>
|
|
1719
|
+
</div>
|
|
1720
|
+
<div class="image-title-footer">
|
|
1721
|
+
<p class="caption reveal" style="color:rgba(240,244,247,0.5);">monet.design</p>
|
|
1722
|
+
<p class="caption reveal" style="color:rgba(240,244,247,0.5);">Monet · 2025</p>
|
|
1723
|
+
</div>
|
|
1724
|
+
</div>
|
|
1725
|
+
</div>
|
|
1726
|
+
|
|
1727
|
+
<div class="page-number page-number--light">10 / 16</div>
|
|
1728
|
+
|
|
1729
|
+
</div>
|
|
1730
|
+
</div>
|
|
1731
|
+
</section>
|
|
1732
|
+
|
|
1733
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1734
|
+
Slide 18 — COMPONENT: toc
|
|
1735
|
+
════════════════════════════════════════════════════════════════ -->
|
|
1736
|
+
<section class="slide" slide-qa="false" data-index="17">
|
|
1737
|
+
<div class="slide-canvas">
|
|
1738
|
+
<div class="page" style="padding:0; overflow:hidden;">
|
|
1739
|
+
<p class="preview-slide-label">Component 11 — toc</p>
|
|
1740
|
+
<div class="narrative-grid" style="height:100%;">
|
|
1741
|
+
|
|
1742
|
+
<!-- left: TOC panel -->
|
|
1743
|
+
<div class="toc-panel">
|
|
1744
|
+
<div class="toc-panel-inner">
|
|
1745
|
+
<div>
|
|
1746
|
+
<div class="toc-header">
|
|
1747
|
+
<p class="toc-kicker">Contents</p>
|
|
1748
|
+
<h2 class="toc-title">
|
|
1749
|
+
<span class="toc-title-line">A quieter way</span>
|
|
1750
|
+
<span class="toc-title-line toc-title-line--offset">into the story.</span>
|
|
1751
|
+
</h2>
|
|
1752
|
+
<p class="toc-dek">Now the contents page reads more like a catalogue spread: a composed title block, tilted chapter markers, and softer editorial pacing between sections.</p>
|
|
1753
|
+
</div>
|
|
1754
|
+
<ol class="toc-list">
|
|
1755
|
+
<li class="toc-item" style="--toc-number-color: #5879a8; --toc-card-back: rgba(115, 141, 194, 0.24); --toc-card-back-rot: -9deg; --toc-card-front-rot: 4deg; --toc-number-rot: -3deg;">
|
|
1756
|
+
<div class="toc-number-card">
|
|
1757
|
+
<span class="toc-item-number">01</span>
|
|
1758
|
+
</div>
|
|
1759
|
+
<div class="toc-item-body">
|
|
1760
|
+
<div class="toc-item-meta">
|
|
1761
|
+
<p class="toc-chapter-label">Chapter 1</p>
|
|
1762
|
+
<p class="toc-page-number">06</p>
|
|
1763
|
+
</div>
|
|
1764
|
+
<p class="toc-item-title">Prelude & Intent</p>
|
|
1765
|
+
</div>
|
|
1766
|
+
</li>
|
|
1767
|
+
<li class="toc-item" style="--toc-number-color: #5f8f92; --toc-card-back: rgba(123, 189, 195, 0.24); --toc-card-back-rot: 6deg; --toc-card-front-rot: -5deg; --toc-number-rot: 2deg;">
|
|
1768
|
+
<div class="toc-number-card">
|
|
1769
|
+
<span class="toc-item-number">02</span>
|
|
1770
|
+
</div>
|
|
1771
|
+
<div class="toc-item-body">
|
|
1772
|
+
<div class="toc-item-meta">
|
|
1773
|
+
<p class="toc-chapter-label">Chapter 2</p>
|
|
1774
|
+
<p class="toc-page-number">14</p>
|
|
1775
|
+
</div>
|
|
1776
|
+
<p class="toc-item-title">Landscape in Motion</p>
|
|
1777
|
+
</div>
|
|
1778
|
+
</li>
|
|
1779
|
+
<li class="toc-item" style="--toc-number-color: #3f6f8a; --toc-card-back: rgba(41, 128, 175, 0.20); --toc-card-back-rot: -5deg; --toc-card-front-rot: 3deg; --toc-number-rot: -1deg;">
|
|
1780
|
+
<div class="toc-number-card">
|
|
1781
|
+
<span class="toc-item-number">03</span>
|
|
1782
|
+
</div>
|
|
1783
|
+
<div class="toc-item-body">
|
|
1784
|
+
<div class="toc-item-meta">
|
|
1785
|
+
<p class="toc-chapter-label">Chapter 3</p>
|
|
1786
|
+
<p class="toc-page-number">22</p>
|
|
1787
|
+
</div>
|
|
1788
|
+
<p class="toc-item-title">Findings & Texture</p>
|
|
1789
|
+
</div>
|
|
1790
|
+
</li>
|
|
1791
|
+
<li class="toc-item" style="--toc-number-color: #9c6482; --toc-card-back: rgba(229, 147, 180, 0.24); --toc-card-back-rot: 8deg; --toc-card-front-rot: -4deg; --toc-number-rot: 3deg;">
|
|
1792
|
+
<div class="toc-number-card">
|
|
1793
|
+
<span class="toc-item-number">04</span>
|
|
1794
|
+
</div>
|
|
1795
|
+
<div class="toc-item-body">
|
|
1796
|
+
<div class="toc-item-meta">
|
|
1797
|
+
<p class="toc-chapter-label">Chapter 4</p>
|
|
1798
|
+
<p class="toc-page-number">31</p>
|
|
1799
|
+
</div>
|
|
1800
|
+
<p class="toc-item-title">Priorities for Action</p>
|
|
1801
|
+
</div>
|
|
1802
|
+
</li>
|
|
1803
|
+
</ol>
|
|
1804
|
+
</div>
|
|
1805
|
+
<div class="toc-footer">
|
|
1806
|
+
<div>
|
|
1807
|
+
<p class="caption">Curatorial note</p>
|
|
1808
|
+
<p class="toc-footer-note">Large numerals behave like washed layers in the background. The title remains primary; the number should guide the eye, not label it mechanically.</p>
|
|
1809
|
+
</div>
|
|
1810
|
+
<p class="caption">Monet Design System · TOC Study</p>
|
|
1811
|
+
</div>
|
|
1812
|
+
</div>
|
|
1813
|
+
</div>
|
|
1814
|
+
|
|
1815
|
+
<!-- right: description -->
|
|
1816
|
+
<div class="text-panel text-panel--light" style="border-left:1px solid var(--line);">
|
|
1817
|
+
<div style="max-width:380px;">
|
|
1818
|
+
<p class="eyebrow">Usage notes</p>
|
|
1819
|
+
<h3 style="margin-top:12px;">TOC Panel</h3>
|
|
1820
|
+
<div class="text-panel-body" style="margin-top:16px;">
|
|
1821
|
+
<ul class="editorial-list">
|
|
1822
|
+
<li><strong>Tilt number plaques.</strong> Use lightly rotated chapter cards instead of utility numerals so the index feels collected, not engineered.</li>
|
|
1823
|
+
<li><strong>Catalogue title stacking.</strong> Let the main heading break across two offset lines to create a more composed, art-book-like entrance.</li>
|
|
1824
|
+
<li><strong>Restore TOC semantics.</strong> Each row should read as chapter label, title, and page number before anything more decorative is added.</li>
|
|
1825
|
+
</ul>
|
|
1826
|
+
</div>
|
|
1827
|
+
</div>
|
|
1828
|
+
<div class="text-panel-footer">
|
|
1829
|
+
<p class="caption">Monet Design System</p>
|
|
1830
|
+
<p class="caption">11</p>
|
|
1831
|
+
</div>
|
|
1832
|
+
</div>
|
|
1833
|
+
|
|
1834
|
+
</div>
|
|
1835
|
+
</div>
|
|
1836
|
+
</div>
|
|
1837
|
+
</section>
|
|
1838
|
+
|
|
1839
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1840
|
+
Slide 19 — COMPONENT: quote
|
|
1841
|
+
════════════════════════════════════════════════════════════════ -->
|
|
1842
|
+
<section class="slide" slide-qa="false" data-index="18">
|
|
1843
|
+
<div class="slide-canvas">
|
|
1844
|
+
<div class="page" style="padding:64px 120px; display:flex; flex-direction:column; justify-content:center; gap:56px;">
|
|
1845
|
+
<p class="preview-slide-label">Component 12 — quote</p>
|
|
1846
|
+
|
|
1847
|
+
<!-- Variant A: initials -->
|
|
1848
|
+
<div>
|
|
1849
|
+
<p class="eyebrow" style="margin-bottom:20px;">Variant A — Initials</p>
|
|
1850
|
+
<div class="quote-block" style="border-left:3px solid var(--accent-stone); padding-left:40px;">
|
|
1851
|
+
<div class="quote-mark" aria-hidden="true">"</div>
|
|
1852
|
+
<p class="quote-text">The water in Monet's garden was not a subject. It was a mirror — a surface that made visible what the eye usually passes over: light itself, in motion, without form.</p>
|
|
1853
|
+
<div class="quote-attribution">
|
|
1854
|
+
<div class="quote-avatar" data-initials="CG" style="--qa-rot:-11deg;"></div>
|
|
1855
|
+
<div class="quote-meta">
|
|
1856
|
+
<p class="quote-name">Claire Gaudient</p>
|
|
1857
|
+
<p class="caption">Curator, Musée de l'Orangerie · Paris</p>
|
|
1858
|
+
</div>
|
|
1859
|
+
</div>
|
|
1860
|
+
</div>
|
|
1861
|
+
</div>
|
|
1862
|
+
|
|
1863
|
+
<!-- Variant B: photo -->
|
|
1864
|
+
<div>
|
|
1865
|
+
<p class="eyebrow" style="margin-bottom:20px;">Variant B — Photo</p>
|
|
1866
|
+
<div class="quote-block" style="border-left:3px solid var(--accent-stone); padding-left:40px;">
|
|
1867
|
+
<div class="quote-mark" aria-hidden="true">"</div>
|
|
1868
|
+
<p class="quote-text">Light does not illuminate objects — it dissolves them. The boundary between thing and reflection is where painting begins.</p>
|
|
1869
|
+
<div class="quote-attribution">
|
|
1870
|
+
<div class="quote-avatar" style="--qa-rot:9deg;">
|
|
1871
|
+
<img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=120&h=120&fit=crop&crop=face" alt="Portrait">
|
|
1872
|
+
</div>
|
|
1873
|
+
<div class="quote-meta">
|
|
1874
|
+
<p class="quote-name">Marguerite Lefèvre</p>
|
|
1875
|
+
<p class="caption">Art Historian · École des Beaux-Arts</p>
|
|
1876
|
+
</div>
|
|
1877
|
+
</div>
|
|
1878
|
+
</div>
|
|
1879
|
+
</div>
|
|
1880
|
+
|
|
1881
|
+
</div>
|
|
1882
|
+
</div>
|
|
1883
|
+
</section>
|
|
1884
|
+
|
|
1885
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1886
|
+
Slide 20 — COMPONENT: brand-watermark
|
|
1887
|
+
════════════════════════════════════════════════════════════════ -->
|
|
1888
|
+
<section class="slide" slide-qa="false" data-index="19">
|
|
1889
|
+
<div class="slide-canvas">
|
|
1890
|
+
<div class="page" style="padding:72px 80px;">
|
|
1891
|
+
<p class="preview-slide-label">Component 13 — brand-watermark</p>
|
|
1892
|
+
|
|
1893
|
+
<!-- Watermark using inline SVG as placeholder -->
|
|
1894
|
+
<div class="brand-watermark" aria-hidden="true">
|
|
1895
|
+
<svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg" fill="var(--text-primary)">
|
|
1896
|
+
<text x="0" y="32" font-family="Georgia, serif" font-size="28" font-weight="600" letter-spacing="4">MONET</text>
|
|
1897
|
+
</svg>
|
|
1898
|
+
</div>
|
|
1899
|
+
|
|
1900
|
+
<div style="display:flex; flex-direction:column; justify-content:center; height:100%; gap:48px;">
|
|
1901
|
+
<div>
|
|
1902
|
+
<p class="eyebrow" style="margin-bottom:14px;">Usage</p>
|
|
1903
|
+
<h2 style="font-size:44px; text-transform:uppercase; line-height:0.96; max-width:560px;">Brand Watermark</h2>
|
|
1904
|
+
<p style="margin-top:20px; font-size:17px; line-height:1.65; color:var(--text-secondary); max-width:600px;">
|
|
1905
|
+
Decorative top-right brand trace. Shown here via inline SVG for preview purposes — in production, use a transparent PNG or SVG file via <code style="font-size:13px; background:var(--bg-page-alt); padding:2px 6px; font-family:monospace;">brand-watermark.png</code>.
|
|
1906
|
+
</p>
|
|
1907
|
+
</div>
|
|
1908
|
+
<div style="display:grid; grid-template-columns:1fr 1fr; gap:48px; max-width:900px;">
|
|
1909
|
+
<div>
|
|
1910
|
+
<p class="eyebrow" style="margin-bottom:12px;">Default (light page)</p>
|
|
1911
|
+
<div style="background:var(--bg-page-alt); padding:32px; position:relative; height:120px;">
|
|
1912
|
+
<div style="position:absolute; top:16px; right:20px; height:20px; opacity:0.10;">
|
|
1913
|
+
<svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg" fill="var(--text-primary)" style="height:100%; width:auto;">
|
|
1914
|
+
<text x="0" y="32" font-family="Georgia, serif" font-size="28" font-weight="600" letter-spacing="4">MONET</text>
|
|
1915
|
+
</svg>
|
|
1916
|
+
</div>
|
|
1917
|
+
<p style="font-size:13px; color:var(--text-muted);">opacity: 0.10</p>
|
|
1918
|
+
</div>
|
|
1919
|
+
</div>
|
|
1920
|
+
<div>
|
|
1921
|
+
<p class="eyebrow" style="margin-bottom:12px;">Light variant (dark page)</p>
|
|
1922
|
+
<div style="background:#1a2d3e; padding:32px; position:relative; height:120px;">
|
|
1923
|
+
<div style="position:absolute; top:16px; right:20px; height:20px; opacity:0.14;">
|
|
1924
|
+
<svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg" fill="#f0f4f7" style="height:100%; width:auto;">
|
|
1925
|
+
<text x="0" y="32" font-family="Georgia, serif" font-size="28" font-weight="600" letter-spacing="4">MONET</text>
|
|
1926
|
+
</svg>
|
|
1927
|
+
</div>
|
|
1928
|
+
<p style="font-size:13px; color:rgba(240,244,247,0.5);">opacity: 0.14 · --light</p>
|
|
1929
|
+
</div>
|
|
1930
|
+
</div>
|
|
1931
|
+
</div>
|
|
1932
|
+
</div>
|
|
1933
|
+
|
|
1934
|
+
</div>
|
|
1935
|
+
</div>
|
|
1936
|
+
</section>
|
|
1937
|
+
|
|
1938
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1939
|
+
Slide 21 — COMPONENT: page-number
|
|
1940
|
+
════════════════════════════════════════════════════════════════ -->
|
|
1941
|
+
<section class="slide" slide-qa="false" data-index="20">
|
|
1942
|
+
<div class="slide-canvas">
|
|
1943
|
+
<div class="page" style="padding:72px 80px; display:flex; flex-direction:column; justify-content:center;">
|
|
1944
|
+
<p class="preview-slide-label">Component 14 — page-number</p>
|
|
1945
|
+
|
|
1946
|
+
<!-- page-number on light bg -->
|
|
1947
|
+
<div class="page-number">14 / 16</div>
|
|
1948
|
+
|
|
1949
|
+
<div style="display:grid; grid-template-columns:1fr 1fr; gap:64px; max-width:1200px; margin:80px auto 0;">
|
|
1950
|
+
<div>
|
|
1951
|
+
<p class="eyebrow" style="margin-bottom:16px;">Default — light background</p>
|
|
1952
|
+
<div style="background:var(--bg-page-alt); height:200px; position:relative; border:1px solid var(--line);">
|
|
1953
|
+
<div style="position:absolute; bottom:20px; right:28px; font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:0.18em; color:var(--text-muted);">05 / 12</div>
|
|
1954
|
+
</div>
|
|
1955
|
+
<p style="margin-top:12px; font-size:13px; color:var(--text-secondary);">class: <code style="background:var(--bg-page-alt); padding:2px 6px;">page-number</code></p>
|
|
1956
|
+
</div>
|
|
1957
|
+
<div>
|
|
1958
|
+
<p class="eyebrow" style="margin-bottom:16px;">Light variant — dark background</p>
|
|
1959
|
+
<div style="background:#0d1a24; height:200px; position:relative;">
|
|
1960
|
+
<div style="position:absolute; bottom:20px; right:28px; font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:0.18em; color:rgba(247,244,238,0.45);">05 / 12</div>
|
|
1961
|
+
</div>
|
|
1962
|
+
<p style="margin-top:12px; font-size:13px; color:var(--text-secondary);">class: <code style="background:var(--bg-page-alt); padding:2px 6px;">page-number page-number--light</code></p>
|
|
1963
|
+
</div>
|
|
1964
|
+
</div>
|
|
1965
|
+
|
|
1966
|
+
</div>
|
|
1967
|
+
</div>
|
|
1968
|
+
</section>
|
|
1969
|
+
|
|
1970
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
1971
|
+
Slide 22 — COMPONENT: timeline-journey-horizontal
|
|
1972
|
+
════════════════════════════════════════════════════════════════ -->
|
|
1973
|
+
<section class="slide" slide-qa="true" data-index="21">
|
|
1974
|
+
<div class="slide-canvas">
|
|
1975
|
+
<div class="page" style="padding:64px 80px 72px; display:flex; flex-direction:column; justify-content:center;">
|
|
1976
|
+
<p class="preview-slide-label">Component 15 — timeline-journey-horizontal</p>
|
|
1977
|
+
|
|
1978
|
+
<div style="margin-bottom:64px;">
|
|
1979
|
+
<p class="eyebrow" style="margin-bottom:10px;">Programme History</p>
|
|
1980
|
+
<h2 style="font-size:44px; text-transform:uppercase; line-height:0.96;">Journey Timeline</h2>
|
|
1981
|
+
</div>
|
|
1982
|
+
|
|
1983
|
+
<div class="tjh" style="--tjh-col: calc(100% / 7); height:400px;">
|
|
1984
|
+
<div class="tjh-axis"></div>
|
|
1985
|
+
|
|
1986
|
+
<div class="tjh-item tjh-item--up" style="left:7%; --tjh-item-color:var(--accent-earth);">
|
|
1987
|
+
<div class="tjh-label">
|
|
1988
|
+
<span class="tjh-date">Mar 2019</span>
|
|
1989
|
+
<span class="tjh-title">Programme Launch</span>
|
|
1990
|
+
<span class="tjh-text">Baseline mapping launched.</span>
|
|
1991
|
+
</div>
|
|
1992
|
+
<div class="tjh-tip-dot" style="--td-rot:8deg;"></div>
|
|
1993
|
+
<div class="tjh-stem"></div>
|
|
1994
|
+
<div class="tjh-axis-dot" style="--nd-rot:-11deg;"></div>
|
|
1995
|
+
</div>
|
|
1996
|
+
|
|
1997
|
+
<div class="tjh-item tjh-item--down" style="left:21%; --tjh-item-color:var(--accent-gold);">
|
|
1998
|
+
<div class="tjh-axis-dot" style="--nd-rot:7deg;"></div>
|
|
1999
|
+
<div class="tjh-stem"></div>
|
|
2000
|
+
<div class="tjh-tip-dot" style="--td-rot:-9deg;"></div>
|
|
2001
|
+
<div class="tjh-label">
|
|
2002
|
+
<span class="tjh-date">Nov 2019</span>
|
|
2003
|
+
<span class="tjh-title">Supplier Audit</span>
|
|
2004
|
+
<span class="tjh-text">Supplier sprint completed.</span>
|
|
2005
|
+
</div>
|
|
2006
|
+
</div>
|
|
2007
|
+
|
|
2008
|
+
<div class="tjh-item tjh-item--up" style="left:35%; --tjh-item-color:var(--accent-olive);">
|
|
2009
|
+
<div class="tjh-label">
|
|
2010
|
+
<span class="tjh-date">Jun 2020</span>
|
|
2011
|
+
<span class="tjh-title">Roadmap Published</span>
|
|
2012
|
+
<span class="tjh-text">Priorities mapped to capital plan.</span>
|
|
2013
|
+
</div>
|
|
2014
|
+
<div class="tjh-tip-dot" style="--td-rot:6deg;"></div>
|
|
2015
|
+
<div class="tjh-stem"></div>
|
|
2016
|
+
<div class="tjh-axis-dot" style="--nd-rot:-8deg;"></div>
|
|
2017
|
+
</div>
|
|
2018
|
+
|
|
2019
|
+
<div class="tjh-item tjh-item--down" style="left:50%; --tjh-item-color:var(--accent-sage);">
|
|
2020
|
+
<div class="tjh-axis-dot" style="--nd-rot:10deg;"></div>
|
|
2021
|
+
<div class="tjh-stem"></div>
|
|
2022
|
+
<div class="tjh-tip-dot" style="--td-rot:-7deg;"></div>
|
|
2023
|
+
<div class="tjh-label">
|
|
2024
|
+
<span class="tjh-date">Feb 2022</span>
|
|
2025
|
+
<span class="tjh-title">Pilot Phase</span>
|
|
2026
|
+
<span class="tjh-text">Three sites validated the model.</span>
|
|
2027
|
+
</div>
|
|
2028
|
+
</div>
|
|
2029
|
+
|
|
2030
|
+
<div class="tjh-item tjh-item--up" style="left:65%; --tjh-item-color:var(--accent-stone);">
|
|
2031
|
+
<div class="tjh-label">
|
|
2032
|
+
<span class="tjh-date">Sep 2023</span>
|
|
2033
|
+
<span class="tjh-title">Scale-up</span>
|
|
2034
|
+
<span class="tjh-text">Rollout activated system-wide.</span>
|
|
2035
|
+
</div>
|
|
2036
|
+
<div class="tjh-tip-dot" style="--td-rot:9deg;"></div>
|
|
2037
|
+
<div class="tjh-stem"></div>
|
|
2038
|
+
<div class="tjh-axis-dot" style="--nd-rot:-6deg;"></div>
|
|
2039
|
+
</div>
|
|
2040
|
+
|
|
2041
|
+
<div class="tjh-item tjh-item--down" style="left:82%; --tjh-item-color:var(--accent-earth);">
|
|
2042
|
+
<div class="tjh-axis-dot" style="--nd-rot:12deg;"></div>
|
|
2043
|
+
<div class="tjh-stem"></div>
|
|
2044
|
+
<div class="tjh-tip-dot" style="--td-rot:-10deg;"></div>
|
|
2045
|
+
<div class="tjh-label">
|
|
2046
|
+
<span class="tjh-date">2025</span>
|
|
2047
|
+
<span class="tjh-title">Embedded</span>
|
|
2048
|
+
<span class="tjh-text">Operations handoff completed.</span>
|
|
2049
|
+
</div>
|
|
2050
|
+
</div>
|
|
2051
|
+
|
|
2052
|
+
</div>
|
|
2053
|
+
|
|
2054
|
+
</div>
|
|
2055
|
+
</div>
|
|
2056
|
+
</section>
|
|
2057
|
+
|
|
2058
|
+
<!-- ═══════════════════════════════════════════════════════════
|
|
2059
|
+
Slide 23 — COMPONENT: timeline-journey-vertical
|
|
2060
|
+
════════════════════════════════════════════════════════════════ -->
|
|
2061
|
+
<section class="slide" slide-qa="true" data-index="22">
|
|
2062
|
+
<div class="slide-canvas">
|
|
2063
|
+
<div class="page" style="padding:0; overflow:hidden;">
|
|
2064
|
+
<p class="preview-slide-label">Component 16 — timeline-journey-vertical</p>
|
|
2065
|
+
<div class="narrative-grid" style="height:100%;">
|
|
2066
|
+
|
|
2067
|
+
<!-- left: header -->
|
|
2068
|
+
<div class="text-panel text-panel--dark">
|
|
2069
|
+
<div>
|
|
2070
|
+
<p class="eyebrow" style="color:rgba(243,238,230,0.72);">Vertical Timeline</p>
|
|
2071
|
+
<h2 style="margin-top:16px; font-size:56px; line-height:0.92; text-transform:uppercase; color:#f0f4f7; max-width:320px;">Six Milestones</h2>
|
|
2072
|
+
<p style="margin-top:20px; font-size:17px; line-height:1.6; color:rgba(243,238,230,0.75); max-width:360px;">
|
|
2073
|
+
Nodes alternate left and right of the axis. DOM order is always axis-dot → stem → tip-dot → label; CSS controls visual direction.
|
|
2074
|
+
</p>
|
|
2075
|
+
</div>
|
|
2076
|
+
<div class="text-panel-footer" style="color:rgba(243,238,230,0.5);">
|
|
2077
|
+
<p class="caption">Monet Design System</p>
|
|
2078
|
+
<p class="caption">16</p>
|
|
2079
|
+
</div>
|
|
2080
|
+
</div>
|
|
2081
|
+
|
|
2082
|
+
<!-- right: tjv -->
|
|
2083
|
+
<div style="border-left:1px solid var(--line); padding:48px; position:relative; height:100%;">
|
|
2084
|
+
<div class="tjv" style="height:100%;">
|
|
2085
|
+
<div class="tjv-axis"></div>
|
|
2086
|
+
|
|
2087
|
+
<div class="tjv-item tjv-item--left" style="top:12%; --tjv-item-color:var(--accent-earth);">
|
|
2088
|
+
<div class="tjv-axis-dot" style="--nd-rot:-11deg;"></div>
|
|
2089
|
+
<div class="tjv-stem"></div>
|
|
2090
|
+
<div class="tjv-tip-dot" style="--td-rot:8deg;"></div>
|
|
2091
|
+
<div class="tjv-label">
|
|
2092
|
+
<span class="tjv-date">Mar 2019</span>
|
|
2093
|
+
<span class="tjv-title">Programme Launch</span>
|
|
2094
|
+
<span class="tjv-text">Baseline mapping launched across all units.</span>
|
|
2095
|
+
</div>
|
|
2096
|
+
</div>
|
|
2097
|
+
|
|
2098
|
+
<div class="tjv-item tjv-item--right" style="top:26%; --tjv-item-color:var(--accent-gold);">
|
|
2099
|
+
<div class="tjv-axis-dot" style="--nd-rot:7deg;"></div>
|
|
2100
|
+
<div class="tjv-stem"></div>
|
|
2101
|
+
<div class="tjv-tip-dot" style="--td-rot:-9deg;"></div>
|
|
2102
|
+
<div class="tjv-label">
|
|
2103
|
+
<span class="tjv-date">Nov 2019</span>
|
|
2104
|
+
<span class="tjv-title">Supplier Audit</span>
|
|
2105
|
+
<span class="tjv-text">94% of Tier 1 suppliers assessed.</span>
|
|
2106
|
+
</div>
|
|
2107
|
+
</div>
|
|
2108
|
+
|
|
2109
|
+
<div class="tjv-item tjv-item--left" style="top:42%; --tjv-item-color:var(--accent-olive);">
|
|
2110
|
+
<div class="tjv-axis-dot" style="--nd-rot:-8deg;"></div>
|
|
2111
|
+
<div class="tjv-stem"></div>
|
|
2112
|
+
<div class="tjv-tip-dot" style="--td-rot:6deg;"></div>
|
|
2113
|
+
<div class="tjv-label">
|
|
2114
|
+
<span class="tjv-date">Jun 2020</span>
|
|
2115
|
+
<span class="tjv-title">Roadmap</span>
|
|
2116
|
+
<span class="tjv-text">Interventions ranked and capitalised.</span>
|
|
2117
|
+
</div>
|
|
2118
|
+
</div>
|
|
2119
|
+
|
|
2120
|
+
<div class="tjv-item tjv-item--right" style="top:57%; --tjv-item-color:var(--accent-sage);">
|
|
2121
|
+
<div class="tjv-axis-dot" style="--nd-rot:10deg;"></div>
|
|
2122
|
+
<div class="tjv-stem"></div>
|
|
2123
|
+
<div class="tjv-tip-dot" style="--td-rot:-7deg;"></div>
|
|
2124
|
+
<div class="tjv-label">
|
|
2125
|
+
<span class="tjv-date">Feb 2022</span>
|
|
2126
|
+
<span class="tjv-title">Pilot Phase</span>
|
|
2127
|
+
<span class="tjv-text">Three sites validated the model.</span>
|
|
2128
|
+
</div>
|
|
2129
|
+
</div>
|
|
2130
|
+
|
|
2131
|
+
<div class="tjv-item tjv-item--left" style="top:72%; --tjv-item-color:var(--accent-stone);">
|
|
2132
|
+
<div class="tjv-axis-dot" style="--nd-rot:-6deg;"></div>
|
|
2133
|
+
<div class="tjv-stem"></div>
|
|
2134
|
+
<div class="tjv-tip-dot" style="--td-rot:9deg;"></div>
|
|
2135
|
+
<div class="tjv-label">
|
|
2136
|
+
<span class="tjv-date">Sep 2023</span>
|
|
2137
|
+
<span class="tjv-title">Scale-up</span>
|
|
2138
|
+
<span class="tjv-text">Rollout expanded to all remaining facilities.</span>
|
|
2139
|
+
</div>
|
|
2140
|
+
</div>
|
|
2141
|
+
|
|
2142
|
+
<div class="tjv-item tjv-item--right" style="top:87%; --tjv-item-color:var(--accent-earth);">
|
|
2143
|
+
<div class="tjv-axis-dot" style="--nd-rot:12deg;"></div>
|
|
2144
|
+
<div class="tjv-stem"></div>
|
|
2145
|
+
<div class="tjv-tip-dot" style="--td-rot:-10deg;"></div>
|
|
2146
|
+
<div class="tjv-label">
|
|
2147
|
+
<span class="tjv-date">2025</span>
|
|
2148
|
+
<span class="tjv-title">Embedded</span>
|
|
2149
|
+
<span class="tjv-text">Annual audit embedded in operations.</span>
|
|
2150
|
+
</div>
|
|
2151
|
+
</div>
|
|
2152
|
+
|
|
2153
|
+
</div>
|
|
2154
|
+
</div>
|
|
2155
|
+
|
|
2156
|
+
</div>
|
|
2157
|
+
</div>
|
|
2158
|
+
</div>
|
|
2159
|
+
</section>
|
|
2160
|
+
|
|
2161
|
+
<script>
|
|
2162
|
+
// ─── ECharts init ───
|
|
2163
|
+
(function() {
|
|
2164
|
+
const barChart = echarts.init(document.getElementById('chart-bar'));
|
|
2165
|
+
barChart.setOption({
|
|
2166
|
+
backgroundColor: 'transparent',
|
|
2167
|
+
grid: { top: 20, right: 20, bottom: 40, left: 50, containLabel: true },
|
|
2168
|
+
xAxis: {
|
|
2169
|
+
type: 'category',
|
|
2170
|
+
data: ['2022', '2023', '2024', '2025'],
|
|
2171
|
+
axisLine: { lineStyle: { color: 'rgba(15,30,42,0.2)' } },
|
|
2172
|
+
axisLabel: { color: '#7a96aa', fontSize: 12 },
|
|
2173
|
+
axisTick: { show: false }
|
|
2174
|
+
},
|
|
2175
|
+
yAxis: {
|
|
2176
|
+
type: 'value',
|
|
2177
|
+
axisLabel: { color: '#7a96aa', fontSize: 12 },
|
|
2178
|
+
splitLine: { lineStyle: { color: 'rgba(15,30,42,0.08)' } },
|
|
2179
|
+
axisLine: { show: false }
|
|
2180
|
+
},
|
|
2181
|
+
series: [
|
|
2182
|
+
{ name: 'Core', type: 'bar', data: [420, 510, 590, 650], itemStyle: { color: '#2980AF' }, barMaxWidth: 48 },
|
|
2183
|
+
{ name: 'Growth', type: 'bar', data: [180, 240, 310, 380], itemStyle: { color: '#00A2B0' }, barMaxWidth: 48 },
|
|
2184
|
+
{ name: 'New', type: 'bar', data: [60, 90, 140, 200], itemStyle: { color: '#83A5BA' }, barMaxWidth: 48 }
|
|
2185
|
+
],
|
|
2186
|
+
legend: { bottom: 0, textStyle: { color: '#7a96aa', fontSize: 12 } },
|
|
2187
|
+
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }
|
|
2188
|
+
});
|
|
2189
|
+
|
|
2190
|
+
const lineChart = echarts.init(document.getElementById('chart-line'));
|
|
2191
|
+
lineChart.setOption({
|
|
2192
|
+
backgroundColor: 'transparent',
|
|
2193
|
+
grid: { top: 20, right: 30, bottom: 40, left: 50, containLabel: true },
|
|
2194
|
+
xAxis: {
|
|
2195
|
+
type: 'category',
|
|
2196
|
+
data: ['2020', '2021', '2022', '2023', '2024', '2025'],
|
|
2197
|
+
axisLine: { lineStyle: { color: 'rgba(15,30,42,0.2)' } },
|
|
2198
|
+
axisLabel: { color: '#7a96aa', fontSize: 12 },
|
|
2199
|
+
axisTick: { show: false }
|
|
2200
|
+
},
|
|
2201
|
+
yAxis: {
|
|
2202
|
+
type: 'value',
|
|
2203
|
+
axisLabel: { color: '#7a96aa', fontSize: 12, formatter: '{value}%' },
|
|
2204
|
+
splitLine: { lineStyle: { color: 'rgba(15,30,42,0.08)' } },
|
|
2205
|
+
axisLine: { show: false }
|
|
2206
|
+
},
|
|
2207
|
+
series: [{
|
|
2208
|
+
name: 'Operating Margin',
|
|
2209
|
+
type: 'line',
|
|
2210
|
+
data: [18.2, 20.5, 22.1, 24.8, 26.3, 27.0],
|
|
2211
|
+
smooth: true,
|
|
2212
|
+
lineStyle: { color: '#738DC2', width: 2.5 },
|
|
2213
|
+
itemStyle: { color: '#738DC2' },
|
|
2214
|
+
areaStyle: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(115,141,194,0.18)' }, { offset: 1, color: 'rgba(115,141,194,0.01)' }] } }
|
|
2215
|
+
}],
|
|
2216
|
+
tooltip: { trigger: 'axis', formatter: '{b}: {c}%' }
|
|
2217
|
+
});
|
|
2218
|
+
})();
|
|
2219
|
+
|
|
2220
|
+
// ─── Lucide icons ───
|
|
2221
|
+
lucide.createIcons();
|
|
2222
|
+
|
|
2223
|
+
// ─── SlidePresentation ───
|
|
2224
|
+
class SlidePresentation {
|
|
2225
|
+
constructor() {
|
|
2226
|
+
this.slides = document.querySelectorAll('.slide');
|
|
2227
|
+
this.currentSlide = 0;
|
|
2228
|
+
this.setupScaling();
|
|
2229
|
+
this.setupIntersectionObserver();
|
|
2230
|
+
this.setupKeyboardNav();
|
|
2231
|
+
this.setupTouchNav();
|
|
2232
|
+
this.setupMouseWheel();
|
|
2233
|
+
}
|
|
2234
|
+
|
|
2235
|
+
setupScaling() {
|
|
2236
|
+
const canvases = document.querySelectorAll('.slide-canvas');
|
|
2237
|
+
const BASE_W = 1920, BASE_H = 1080;
|
|
2238
|
+
const update = () => {
|
|
2239
|
+
const scale = Math.min(window.innerWidth / BASE_W, window.innerHeight / BASE_H);
|
|
2240
|
+
canvases.forEach(c => c.style.transform = `scale(${scale})`);
|
|
2241
|
+
};
|
|
2242
|
+
window.addEventListener('resize', update);
|
|
2243
|
+
update();
|
|
2244
|
+
}
|
|
2245
|
+
|
|
2246
|
+
setupIntersectionObserver() {
|
|
2247
|
+
const observer = new IntersectionObserver((entries) => {
|
|
2248
|
+
entries.forEach(entry => {
|
|
2249
|
+
if (entry.isIntersecting) {
|
|
2250
|
+
entry.target.querySelectorAll('.reveal').forEach(el => el.classList.add('visible'));
|
|
2251
|
+
}
|
|
2252
|
+
});
|
|
2253
|
+
}, { threshold: 0.2 });
|
|
2254
|
+
this.slides.forEach(slide => observer.observe(slide));
|
|
2255
|
+
}
|
|
2256
|
+
|
|
2257
|
+
setupKeyboardNav() {
|
|
2258
|
+
document.addEventListener('keydown', (e) => {
|
|
2259
|
+
if (['ArrowDown','ArrowRight',' ','PageDown'].includes(e.key)) { e.preventDefault(); this.goTo(this.currentSlide + 1); }
|
|
2260
|
+
else if (['ArrowUp','ArrowLeft','PageUp'].includes(e.key)) { e.preventDefault(); this.goTo(this.currentSlide - 1); }
|
|
2261
|
+
});
|
|
2262
|
+
}
|
|
2263
|
+
|
|
2264
|
+
setupTouchNav() {
|
|
2265
|
+
let startY = 0;
|
|
2266
|
+
document.addEventListener('touchstart', e => { startY = e.touches[0].clientY; }, { passive: true });
|
|
2267
|
+
document.addEventListener('touchend', e => {
|
|
2268
|
+
const dy = startY - e.changedTouches[0].clientY;
|
|
2269
|
+
if (Math.abs(dy) > 40) this.goTo(this.currentSlide + (dy > 0 ? 1 : -1));
|
|
2270
|
+
}, { passive: true });
|
|
2271
|
+
}
|
|
2272
|
+
|
|
2273
|
+
setupMouseWheel() {
|
|
2274
|
+
let last = 0;
|
|
2275
|
+
document.addEventListener('wheel', e => {
|
|
2276
|
+
const now = Date.now();
|
|
2277
|
+
if (now - last < 800) return;
|
|
2278
|
+
last = now;
|
|
2279
|
+
this.goTo(this.currentSlide + (e.deltaY > 0 ? 1 : -1));
|
|
2280
|
+
}, { passive: true });
|
|
2281
|
+
}
|
|
2282
|
+
|
|
2283
|
+
goTo(index) {
|
|
2284
|
+
const clamped = Math.max(0, Math.min(this.slides.length - 1, index));
|
|
2285
|
+
this.slides[clamped].scrollIntoView({ behavior: 'smooth' });
|
|
2286
|
+
this.currentSlide = clamped;
|
|
2287
|
+
}
|
|
2288
|
+
}
|
|
2289
|
+
|
|
2290
|
+
new SlidePresentation();
|
|
2291
|
+
</script>
|
|
2292
|
+
</body>
|
|
2293
|
+
</html>
|