slides-grab 1.2.0 → 1.2.2
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 +49 -7
- package/bin/ppt-agent.js +76 -31
- package/package.json +8 -3
- package/scripts/download-video.js +213 -0
- package/scripts/editor-server.js +68 -8
- package/scripts/generate-image.js +49 -0
- package/scripts/html2pdf.js +134 -0
- package/skills/slides-grab/SKILL.md +17 -13
- package/skills/slides-grab/references/presentation-workflow-reference.md +17 -12
- package/skills/slides-grab-design/SKILL.md +22 -13
- package/skills/slides-grab-design/references/design-rules.md +13 -7
- package/skills/slides-grab-design/references/design-system-full.md +7 -19
- package/skills/slides-grab-design/references/detailed-design-rules.md +9 -3
- package/skills/slides-grab-plan/SKILL.md +7 -5
- package/src/design-styles-data.js +1928 -0
- package/src/design-styles.js +55 -0
- package/src/editor/codex-edit.js +36 -48
- package/src/editor/editor-codex-prompt.md +48 -0
- package/src/image-contract.js +138 -31
- package/src/nano-banana.js +417 -0
- package/src/resolve.js +2 -51
- package/src/validation/core.js +151 -18
- package/templates/design-styles/README.md +19 -0
- package/templates/design-styles/preview.html +3356 -0
- package/themes/corporate.css +0 -8
- package/themes/executive.css +0 -10
- package/themes/modern-dark.css +0 -9
- package/themes/sage.css +0 -9
- package/themes/warm.css +0 -8
|
@@ -0,0 +1,3356 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="ko">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>slides-grab Design Styles — 35 Collections</title>
|
|
8
|
+
<style>
|
|
9
|
+
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700;900&family=Space+Mono:wght@400;700&family=Bebas+Neue&family=Playfair+Display:ital,wght@0,700;1,700&family=DM+Serif+Display:ital@0;1&family=Barlow+Condensed:wght@600;800&display=swap');
|
|
10
|
+
|
|
11
|
+
:root {
|
|
12
|
+
--bg: #0a0a0f;
|
|
13
|
+
--card-bg: #111118;
|
|
14
|
+
--accent: #e8ff3b;
|
|
15
|
+
--text: #f0f0f5;
|
|
16
|
+
--muted: #666680;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
* {
|
|
20
|
+
margin: 0;
|
|
21
|
+
padding: 0;
|
|
22
|
+
box-sizing: border-box;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
body {
|
|
26
|
+
background: var(--bg);
|
|
27
|
+
color: var(--text);
|
|
28
|
+
font-family: 'Noto Sans KR', sans-serif;
|
|
29
|
+
min-height: 100vh;
|
|
30
|
+
padding: 40px 20px 60px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
header {
|
|
34
|
+
text-align: center;
|
|
35
|
+
margin-bottom: 60px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
header .tag {
|
|
39
|
+
font-family: 'Space Mono', monospace;
|
|
40
|
+
font-size: 11px;
|
|
41
|
+
letter-spacing: 4px;
|
|
42
|
+
color: var(--accent);
|
|
43
|
+
text-transform: uppercase;
|
|
44
|
+
margin-bottom: 16px;
|
|
45
|
+
display: block;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
header h1 {
|
|
49
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
50
|
+
font-size: clamp(48px, 8vw, 96px);
|
|
51
|
+
letter-spacing: 2px;
|
|
52
|
+
line-height: 0.9;
|
|
53
|
+
color: var(--text);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
header h1 span {
|
|
57
|
+
color: var(--accent);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
header p {
|
|
61
|
+
margin-top: 16px;
|
|
62
|
+
color: var(--muted);
|
|
63
|
+
font-size: 14px;
|
|
64
|
+
font-weight: 300;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.grid {
|
|
68
|
+
display: grid;
|
|
69
|
+
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
|
70
|
+
gap: 24px;
|
|
71
|
+
max-width: 1200px;
|
|
72
|
+
margin: 0 auto;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.card {
|
|
76
|
+
border-radius: 16px;
|
|
77
|
+
overflow: hidden;
|
|
78
|
+
cursor: pointer;
|
|
79
|
+
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.card:hover {
|
|
83
|
+
transform: translateY(-6px);
|
|
84
|
+
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.preview {
|
|
88
|
+
height: 220px;
|
|
89
|
+
position: relative;
|
|
90
|
+
overflow: hidden;
|
|
91
|
+
display: flex;
|
|
92
|
+
align-items: center;
|
|
93
|
+
justify-content: center;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.card-info {
|
|
97
|
+
padding: 20px;
|
|
98
|
+
background: var(--card-bg);
|
|
99
|
+
border: 1px solid #1e1e2e;
|
|
100
|
+
border-top: none;
|
|
101
|
+
border-radius: 0 0 16px 16px;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.card-num {
|
|
105
|
+
font-family: 'Space Mono', monospace;
|
|
106
|
+
font-size: 10px;
|
|
107
|
+
color: var(--muted);
|
|
108
|
+
letter-spacing: 3px;
|
|
109
|
+
margin-bottom: 6px;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.card-title {
|
|
113
|
+
font-size: 18px;
|
|
114
|
+
font-weight: 700;
|
|
115
|
+
margin-bottom: 8px;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.card-desc {
|
|
119
|
+
font-size: 13px;
|
|
120
|
+
color: var(--muted);
|
|
121
|
+
line-height: 1.6;
|
|
122
|
+
font-weight: 300;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.tags {
|
|
126
|
+
display: flex;
|
|
127
|
+
flex-wrap: wrap;
|
|
128
|
+
gap: 6px;
|
|
129
|
+
margin-top: 12px;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.tag-pill {
|
|
133
|
+
font-family: 'Space Mono', monospace;
|
|
134
|
+
font-size: 10px;
|
|
135
|
+
padding: 3px 10px;
|
|
136
|
+
border-radius: 100px;
|
|
137
|
+
border: 1px solid #2a2a3a;
|
|
138
|
+
color: var(--muted);
|
|
139
|
+
letter-spacing: 1px;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* ══════════════════════════════════════════
|
|
143
|
+
기존 01–20 스타일
|
|
144
|
+
══════════════════════════════════════════ */
|
|
145
|
+
|
|
146
|
+
/* 01 GLASSMORPHISM */
|
|
147
|
+
.preview-glass {
|
|
148
|
+
background: linear-gradient(135deg, #1a1a4e 0%, #6b21a8 50%, #1e3a5f 100%);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.glass-el {
|
|
152
|
+
position: absolute;
|
|
153
|
+
border-radius: 16px;
|
|
154
|
+
backdrop-filter: blur(12px);
|
|
155
|
+
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.glass-el1 {
|
|
159
|
+
width: 160px;
|
|
160
|
+
height: 100px;
|
|
161
|
+
background: rgba(255, 255, 255, 0.08);
|
|
162
|
+
top: 30px;
|
|
163
|
+
left: 30px;
|
|
164
|
+
transform: rotate(-5deg);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.glass-el2 {
|
|
168
|
+
width: 120px;
|
|
169
|
+
height: 80px;
|
|
170
|
+
background: rgba(255, 255, 255, 0.12);
|
|
171
|
+
bottom: 30px;
|
|
172
|
+
right: 30px;
|
|
173
|
+
transform: rotate(8deg);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.glass-el3 {
|
|
177
|
+
width: 80px;
|
|
178
|
+
height: 80px;
|
|
179
|
+
background: rgba(255, 255, 255, 0.06);
|
|
180
|
+
top: 50%;
|
|
181
|
+
left: 50%;
|
|
182
|
+
transform: translate(-50%, -50%);
|
|
183
|
+
border-radius: 50%;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
/* 02 NEO-BRUTALISM */
|
|
187
|
+
.preview-brutal {
|
|
188
|
+
background: #f5f500;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
.brutal-box {
|
|
192
|
+
position: absolute;
|
|
193
|
+
font-family: 'Space Mono', monospace;
|
|
194
|
+
font-weight: 700;
|
|
195
|
+
font-size: 13px;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.brutal-box1 {
|
|
199
|
+
background: #fff;
|
|
200
|
+
border: 3px solid #000;
|
|
201
|
+
box-shadow: 5px 5px 0 #000;
|
|
202
|
+
padding: 12px 20px;
|
|
203
|
+
top: 40px;
|
|
204
|
+
left: 40px;
|
|
205
|
+
color: #000;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.brutal-box2 {
|
|
209
|
+
background: #ff3b30;
|
|
210
|
+
border: 3px solid #000;
|
|
211
|
+
box-shadow: 5px 5px 0 #000;
|
|
212
|
+
padding: 8px 16px;
|
|
213
|
+
bottom: 40px;
|
|
214
|
+
right: 40px;
|
|
215
|
+
color: #fff;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
.brutal-line {
|
|
219
|
+
position: absolute;
|
|
220
|
+
background: #000;
|
|
221
|
+
width: 3px;
|
|
222
|
+
height: 80px;
|
|
223
|
+
top: 50%;
|
|
224
|
+
left: 50%;
|
|
225
|
+
transform: translate(-50%, -50%);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
/* 03 BENTO GRID */
|
|
229
|
+
.preview-bento {
|
|
230
|
+
background: #f8f8f2;
|
|
231
|
+
padding: 16px;
|
|
232
|
+
display: block;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
.bento-grid {
|
|
236
|
+
display: grid;
|
|
237
|
+
grid-template-columns: 1fr 1fr 1fr;
|
|
238
|
+
grid-template-rows: 1fr 1fr;
|
|
239
|
+
gap: 8px;
|
|
240
|
+
width: 100%;
|
|
241
|
+
height: 100%;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.bento-cell {
|
|
245
|
+
border-radius: 10px;
|
|
246
|
+
display: flex;
|
|
247
|
+
align-items: center;
|
|
248
|
+
justify-content: center;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
.bc1 {
|
|
252
|
+
background: #1a1a2e;
|
|
253
|
+
grid-column: 1/3;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.bc2 {
|
|
257
|
+
background: #e8ff3b;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.bc3 {
|
|
261
|
+
background: #ff6b6b;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.bc4 {
|
|
265
|
+
background: #4ecdc4;
|
|
266
|
+
grid-column: 2/4;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.bc5 {
|
|
270
|
+
background: #ffe66d;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
/* 04 DARK ACADEMIA */
|
|
274
|
+
.preview-academia {
|
|
275
|
+
background: #1a1208;
|
|
276
|
+
overflow: hidden;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
.academia-overlay {
|
|
280
|
+
position: absolute;
|
|
281
|
+
inset: 0;
|
|
282
|
+
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%231a1208'/%3E%3Crect width='1' height='1' fill='%23332a10' opacity='0.5'/%3E%3C/svg%3E");
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
.academia-border {
|
|
286
|
+
position: absolute;
|
|
287
|
+
inset: 16px;
|
|
288
|
+
border: 1px solid #3d2e10;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.academia-text {
|
|
292
|
+
position: absolute;
|
|
293
|
+
text-align: center;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.at1 {
|
|
297
|
+
font-family: Georgia, serif;
|
|
298
|
+
font-style: italic;
|
|
299
|
+
font-size: 42px;
|
|
300
|
+
font-weight: 700;
|
|
301
|
+
color: #c9a84c;
|
|
302
|
+
top: 30px;
|
|
303
|
+
left: 50%;
|
|
304
|
+
transform: translateX(-50%);
|
|
305
|
+
white-space: nowrap;
|
|
306
|
+
letter-spacing: 6px;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.at2 {
|
|
310
|
+
font-family: 'Space Mono', monospace;
|
|
311
|
+
font-size: 11px;
|
|
312
|
+
color: #8a7340;
|
|
313
|
+
bottom: 30px;
|
|
314
|
+
left: 50%;
|
|
315
|
+
transform: translateX(-50%);
|
|
316
|
+
letter-spacing: 5px;
|
|
317
|
+
white-space: nowrap;
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
/* 05 GRADIENT MESH */
|
|
321
|
+
.preview-mesh {
|
|
322
|
+
background: #fff;
|
|
323
|
+
overflow: hidden;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.mesh-bg {
|
|
327
|
+
position: absolute;
|
|
328
|
+
inset: 0;
|
|
329
|
+
background: radial-gradient(ellipse at 20% 50%, #ff6ec7 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, #7b61ff 0%, transparent 45%), radial-gradient(ellipse at 60% 80%, #00d4ff 0%, transparent 40%), radial-gradient(ellipse at 40% 30%, #ffb347 0%, transparent 45%);
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
.mesh-text {
|
|
333
|
+
position: relative;
|
|
334
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
335
|
+
font-size: 32px;
|
|
336
|
+
color: white;
|
|
337
|
+
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
|
|
338
|
+
letter-spacing: 2px;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
/* 06 CLAYMORPHISM */
|
|
342
|
+
.preview-clay {
|
|
343
|
+
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.clay-el {
|
|
347
|
+
position: absolute;
|
|
348
|
+
border-radius: 24px;
|
|
349
|
+
display: flex;
|
|
350
|
+
align-items: center;
|
|
351
|
+
justify-content: center;
|
|
352
|
+
font-size: 28px;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
.clay1 {
|
|
356
|
+
width: 90px;
|
|
357
|
+
height: 90px;
|
|
358
|
+
background: #a8edea;
|
|
359
|
+
box-shadow: 0 12px 30px rgba(168, 237, 234, 0.5), inset 0 -4px 0 rgba(0, 0, 0, 0.1);
|
|
360
|
+
top: 30px;
|
|
361
|
+
left: 50px;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.clay2 {
|
|
365
|
+
width: 70px;
|
|
366
|
+
height: 70px;
|
|
367
|
+
background: #fed6e3;
|
|
368
|
+
box-shadow: 0 10px 25px rgba(254, 214, 227, 0.5), inset 0 -3px 0 rgba(0, 0, 0, 0.08);
|
|
369
|
+
top: 50px;
|
|
370
|
+
right: 60px;
|
|
371
|
+
border-radius: 50%;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
.clay3 {
|
|
375
|
+
width: 60px;
|
|
376
|
+
height: 60px;
|
|
377
|
+
background: #ffeaa7;
|
|
378
|
+
box-shadow: 0 8px 20px rgba(255, 234, 167, 0.5), inset 0 -3px 0 rgba(0, 0, 0, 0.08);
|
|
379
|
+
bottom: 30px;
|
|
380
|
+
left: 50%;
|
|
381
|
+
transform: translateX(-50%);
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
/* 07 SWISS/INTERNATIONAL */
|
|
385
|
+
.preview-swiss {
|
|
386
|
+
background: #ffffff;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.swiss-red {
|
|
390
|
+
position: absolute;
|
|
391
|
+
top: 0;
|
|
392
|
+
left: 0;
|
|
393
|
+
width: 6px;
|
|
394
|
+
height: 100%;
|
|
395
|
+
background: #e8000d;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
.swiss-title {
|
|
399
|
+
position: absolute;
|
|
400
|
+
font-family: 'Space Mono', monospace;
|
|
401
|
+
font-weight: 700;
|
|
402
|
+
font-size: 36px;
|
|
403
|
+
color: #111;
|
|
404
|
+
top: 24px;
|
|
405
|
+
left: 30px;
|
|
406
|
+
line-height: 1;
|
|
407
|
+
letter-spacing: -1px;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
.swiss-sub {
|
|
411
|
+
position: absolute;
|
|
412
|
+
font-family: 'Space Mono', monospace;
|
|
413
|
+
font-size: 9px;
|
|
414
|
+
color: #888;
|
|
415
|
+
bottom: 24px;
|
|
416
|
+
left: 30px;
|
|
417
|
+
letter-spacing: 3px;
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
.swiss-circle {
|
|
421
|
+
position: absolute;
|
|
422
|
+
width: 80px;
|
|
423
|
+
height: 80px;
|
|
424
|
+
border: 3px solid #e8000d;
|
|
425
|
+
border-radius: 50%;
|
|
426
|
+
bottom: 20px;
|
|
427
|
+
right: 30px;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
.swiss-line {
|
|
431
|
+
position: absolute;
|
|
432
|
+
background: #ddd;
|
|
433
|
+
left: 30px;
|
|
434
|
+
right: 30px;
|
|
435
|
+
height: 1px;
|
|
436
|
+
top: 50%;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
/* 08 AURORA/NEON GLOW */
|
|
440
|
+
.preview-aurora {
|
|
441
|
+
background: #050510;
|
|
442
|
+
overflow: hidden;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
.aurora-glow {
|
|
446
|
+
position: absolute;
|
|
447
|
+
border-radius: 50%;
|
|
448
|
+
filter: blur(40px);
|
|
449
|
+
opacity: 0.7;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
.ag1 {
|
|
453
|
+
width: 200px;
|
|
454
|
+
height: 150px;
|
|
455
|
+
background: #00ff88;
|
|
456
|
+
top: -40px;
|
|
457
|
+
left: -40px;
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
.ag2 {
|
|
461
|
+
width: 180px;
|
|
462
|
+
height: 140px;
|
|
463
|
+
background: #7b00ff;
|
|
464
|
+
top: 20px;
|
|
465
|
+
right: -30px;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
.ag3 {
|
|
469
|
+
width: 160px;
|
|
470
|
+
height: 100px;
|
|
471
|
+
background: #00b4ff;
|
|
472
|
+
bottom: -20px;
|
|
473
|
+
left: 30%;
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
.aurora-text {
|
|
477
|
+
position: relative;
|
|
478
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
479
|
+
font-size: 40px;
|
|
480
|
+
letter-spacing: 4px;
|
|
481
|
+
background: linear-gradient(90deg, #00ff88, #00b4ff, #7b00ff);
|
|
482
|
+
-webkit-background-clip: text;
|
|
483
|
+
-webkit-text-fill-color: transparent;
|
|
484
|
+
background-clip: text;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
/* 09 RETRO Y2K */
|
|
488
|
+
.preview-y2k {
|
|
489
|
+
background: #000080;
|
|
490
|
+
overflow: hidden;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.y2k-stripe {
|
|
494
|
+
position: absolute;
|
|
495
|
+
height: 6px;
|
|
496
|
+
left: 0;
|
|
497
|
+
right: 0;
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
.ys1 {
|
|
501
|
+
top: 30px;
|
|
502
|
+
background: linear-gradient(90deg, #ff0080, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff);
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
.ys2 {
|
|
506
|
+
bottom: 30px;
|
|
507
|
+
background: linear-gradient(90deg, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0080);
|
|
508
|
+
}
|
|
509
|
+
|
|
510
|
+
.y2k-text {
|
|
511
|
+
position: relative;
|
|
512
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
513
|
+
font-size: 36px;
|
|
514
|
+
color: #fff;
|
|
515
|
+
text-shadow: 0 0 20px #00ffff, 2px 2px 0 #ff00ff;
|
|
516
|
+
letter-spacing: 4px;
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
.y2k-star {
|
|
520
|
+
position: absolute;
|
|
521
|
+
color: #ffff00;
|
|
522
|
+
font-size: 24px;
|
|
523
|
+
animation: spin 4s linear infinite;
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
.yk1 {
|
|
527
|
+
top: 50px;
|
|
528
|
+
left: 20px;
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
.yk2 {
|
|
532
|
+
bottom: 50px;
|
|
533
|
+
right: 20px;
|
|
534
|
+
animation-direction: reverse;
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
@keyframes spin {
|
|
538
|
+
to {
|
|
539
|
+
transform: rotate(360deg);
|
|
540
|
+
}
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
/* 10 NORDIC MINIMALISM */
|
|
544
|
+
.preview-nordic {
|
|
545
|
+
background: #f4f1ec;
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
.nordic-blob {
|
|
549
|
+
position: absolute;
|
|
550
|
+
width: 140px;
|
|
551
|
+
height: 140px;
|
|
552
|
+
background: #d9cfc4;
|
|
553
|
+
border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%;
|
|
554
|
+
top: 50%;
|
|
555
|
+
left: 50%;
|
|
556
|
+
transform: translate(-50%, -50%);
|
|
557
|
+
opacity: 0.7;
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
.nordic-dot {
|
|
561
|
+
position: absolute;
|
|
562
|
+
width: 12px;
|
|
563
|
+
height: 12px;
|
|
564
|
+
border-radius: 50%;
|
|
565
|
+
background: #3d3530;
|
|
566
|
+
}
|
|
567
|
+
|
|
568
|
+
.nd1 {
|
|
569
|
+
top: 30px;
|
|
570
|
+
left: 40px;
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
.nd2 {
|
|
574
|
+
top: 30px;
|
|
575
|
+
left: 60px;
|
|
576
|
+
background: #8a7a6a;
|
|
577
|
+
}
|
|
578
|
+
|
|
579
|
+
.nd3 {
|
|
580
|
+
top: 30px;
|
|
581
|
+
left: 80px;
|
|
582
|
+
background: #c4b5a5;
|
|
583
|
+
}
|
|
584
|
+
|
|
585
|
+
.nordic-word {
|
|
586
|
+
position: absolute;
|
|
587
|
+
bottom: 28px;
|
|
588
|
+
left: 0;
|
|
589
|
+
right: 0;
|
|
590
|
+
text-align: center;
|
|
591
|
+
font-family: 'Space Mono', monospace;
|
|
592
|
+
font-size: 10px;
|
|
593
|
+
letter-spacing: 5px;
|
|
594
|
+
color: #8a7a6a;
|
|
595
|
+
}
|
|
596
|
+
|
|
597
|
+
.nordic-line {
|
|
598
|
+
position: absolute;
|
|
599
|
+
bottom: 50px;
|
|
600
|
+
left: 40px;
|
|
601
|
+
right: 40px;
|
|
602
|
+
height: 1px;
|
|
603
|
+
background: #d0c8be;
|
|
604
|
+
}
|
|
605
|
+
|
|
606
|
+
/* 11 TYPOGRAPHIC BOLD */
|
|
607
|
+
.preview-typo {
|
|
608
|
+
background: #f0ede8;
|
|
609
|
+
overflow: hidden;
|
|
610
|
+
}
|
|
611
|
+
|
|
612
|
+
.typo-big {
|
|
613
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
614
|
+
font-size: 88px;
|
|
615
|
+
line-height: 0.85;
|
|
616
|
+
color: #1a1a1a;
|
|
617
|
+
letter-spacing: -2px;
|
|
618
|
+
position: relative;
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
.typo-big span {
|
|
622
|
+
color: #e63030;
|
|
623
|
+
}
|
|
624
|
+
|
|
625
|
+
.typo-small {
|
|
626
|
+
position: absolute;
|
|
627
|
+
bottom: 20px;
|
|
628
|
+
right: 20px;
|
|
629
|
+
font-family: 'Space Mono', monospace;
|
|
630
|
+
font-size: 9px;
|
|
631
|
+
letter-spacing: 3px;
|
|
632
|
+
color: #aaa;
|
|
633
|
+
}
|
|
634
|
+
|
|
635
|
+
/* 12 DUOTONE / COLOR SPLIT */
|
|
636
|
+
.preview-duotone {
|
|
637
|
+
background: #111;
|
|
638
|
+
overflow: hidden;
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
.duo-left {
|
|
642
|
+
position: absolute;
|
|
643
|
+
left: 0;
|
|
644
|
+
top: 0;
|
|
645
|
+
bottom: 0;
|
|
646
|
+
width: 50%;
|
|
647
|
+
background: #ff4500;
|
|
648
|
+
display: flex;
|
|
649
|
+
align-items: center;
|
|
650
|
+
justify-content: center;
|
|
651
|
+
}
|
|
652
|
+
|
|
653
|
+
.duo-right {
|
|
654
|
+
position: absolute;
|
|
655
|
+
right: 0;
|
|
656
|
+
top: 0;
|
|
657
|
+
bottom: 0;
|
|
658
|
+
width: 50%;
|
|
659
|
+
background: #1a1a2e;
|
|
660
|
+
display: flex;
|
|
661
|
+
align-items: center;
|
|
662
|
+
justify-content: center;
|
|
663
|
+
}
|
|
664
|
+
|
|
665
|
+
.duo-text {
|
|
666
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
667
|
+
font-size: 40px;
|
|
668
|
+
letter-spacing: 2px;
|
|
669
|
+
writing-mode: vertical-lr;
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
.duo-left .duo-text {
|
|
673
|
+
color: #fff;
|
|
674
|
+
transform: rotate(180deg);
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
.duo-right .duo-text {
|
|
678
|
+
color: #ff4500;
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
.duo-divider {
|
|
682
|
+
position: absolute;
|
|
683
|
+
left: 50%;
|
|
684
|
+
top: 0;
|
|
685
|
+
bottom: 0;
|
|
686
|
+
width: 3px;
|
|
687
|
+
background: #fff;
|
|
688
|
+
z-index: 2;
|
|
689
|
+
}
|
|
690
|
+
|
|
691
|
+
/* 13 MONOCHROME MINIMAL */
|
|
692
|
+
.preview-mono {
|
|
693
|
+
background: #fafafa;
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
.mono-circle-out {
|
|
697
|
+
position: absolute;
|
|
698
|
+
width: 160px;
|
|
699
|
+
height: 160px;
|
|
700
|
+
border: 1px solid #e0e0e0;
|
|
701
|
+
border-radius: 50%;
|
|
702
|
+
top: 50%;
|
|
703
|
+
left: 50%;
|
|
704
|
+
transform: translate(-50%, -50%);
|
|
705
|
+
}
|
|
706
|
+
|
|
707
|
+
.mono-center {
|
|
708
|
+
position: relative;
|
|
709
|
+
display: flex;
|
|
710
|
+
flex-direction: column;
|
|
711
|
+
align-items: center;
|
|
712
|
+
gap: 16px;
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
.mono-rect {
|
|
716
|
+
background: #1a1a1a;
|
|
717
|
+
width: 120px;
|
|
718
|
+
height: 4px;
|
|
719
|
+
}
|
|
720
|
+
|
|
721
|
+
.mono-rect2 {
|
|
722
|
+
width: 80px;
|
|
723
|
+
height: 4px;
|
|
724
|
+
background: #1a1a1a;
|
|
725
|
+
}
|
|
726
|
+
|
|
727
|
+
.mono-rect3 {
|
|
728
|
+
width: 40px;
|
|
729
|
+
height: 4px;
|
|
730
|
+
background: #ddd;
|
|
731
|
+
}
|
|
732
|
+
|
|
733
|
+
.mono-label {
|
|
734
|
+
font-family: 'Space Mono', monospace;
|
|
735
|
+
font-size: 9px;
|
|
736
|
+
letter-spacing: 6px;
|
|
737
|
+
color: #888;
|
|
738
|
+
}
|
|
739
|
+
|
|
740
|
+
/* 14 CYBERPUNK OUTLINE */
|
|
741
|
+
.preview-cyber {
|
|
742
|
+
background: #0d0d0d;
|
|
743
|
+
overflow: hidden;
|
|
744
|
+
}
|
|
745
|
+
|
|
746
|
+
.cyber-grid {
|
|
747
|
+
position: absolute;
|
|
748
|
+
inset: 0;
|
|
749
|
+
background-image: linear-gradient(rgba(0, 255, 200, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 200, 0.06) 1px, transparent 1px);
|
|
750
|
+
background-size: 30px 30px;
|
|
751
|
+
}
|
|
752
|
+
|
|
753
|
+
.cyber-title {
|
|
754
|
+
position: relative;
|
|
755
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
756
|
+
font-size: 44px;
|
|
757
|
+
letter-spacing: 6px;
|
|
758
|
+
color: transparent;
|
|
759
|
+
-webkit-text-stroke: 1.5px #00ffc8;
|
|
760
|
+
text-shadow: 0 0 20px rgba(0, 255, 200, 0.5);
|
|
761
|
+
}
|
|
762
|
+
|
|
763
|
+
.cyber-sub {
|
|
764
|
+
position: absolute;
|
|
765
|
+
bottom: 20px;
|
|
766
|
+
left: 0;
|
|
767
|
+
right: 0;
|
|
768
|
+
text-align: center;
|
|
769
|
+
font-family: 'Space Mono', monospace;
|
|
770
|
+
font-size: 9px;
|
|
771
|
+
letter-spacing: 4px;
|
|
772
|
+
color: #00ffc8;
|
|
773
|
+
opacity: 0.5;
|
|
774
|
+
}
|
|
775
|
+
|
|
776
|
+
.cyber-corner {
|
|
777
|
+
position: absolute;
|
|
778
|
+
width: 20px;
|
|
779
|
+
height: 20px;
|
|
780
|
+
border-color: #00ffc8;
|
|
781
|
+
border-style: solid;
|
|
782
|
+
opacity: 0.6;
|
|
783
|
+
}
|
|
784
|
+
|
|
785
|
+
.cc-tl {
|
|
786
|
+
top: 12px;
|
|
787
|
+
left: 12px;
|
|
788
|
+
border-width: 2px 0 0 2px;
|
|
789
|
+
}
|
|
790
|
+
|
|
791
|
+
.cc-tr {
|
|
792
|
+
top: 12px;
|
|
793
|
+
right: 12px;
|
|
794
|
+
border-width: 2px 2px 0 0;
|
|
795
|
+
}
|
|
796
|
+
|
|
797
|
+
.cc-bl {
|
|
798
|
+
bottom: 12px;
|
|
799
|
+
left: 12px;
|
|
800
|
+
border-width: 0 0 2px 2px;
|
|
801
|
+
}
|
|
802
|
+
|
|
803
|
+
.cc-br {
|
|
804
|
+
bottom: 12px;
|
|
805
|
+
right: 12px;
|
|
806
|
+
border-width: 0 2px 2px 0;
|
|
807
|
+
}
|
|
808
|
+
|
|
809
|
+
/* 15 EDITORIAL MAGAZINE */
|
|
810
|
+
.preview-editorial {
|
|
811
|
+
background: #fff;
|
|
812
|
+
overflow: hidden;
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
.edit-bg-block {
|
|
816
|
+
position: absolute;
|
|
817
|
+
top: 0;
|
|
818
|
+
right: 0;
|
|
819
|
+
width: 45%;
|
|
820
|
+
height: 100%;
|
|
821
|
+
background: #1a1a1a;
|
|
822
|
+
}
|
|
823
|
+
|
|
824
|
+
.edit-title {
|
|
825
|
+
position: absolute;
|
|
826
|
+
top: 24px;
|
|
827
|
+
left: 24px;
|
|
828
|
+
font-family: 'Playfair Display', serif;
|
|
829
|
+
font-style: italic;
|
|
830
|
+
font-size: 38px;
|
|
831
|
+
line-height: 1;
|
|
832
|
+
color: #1a1a1a;
|
|
833
|
+
letter-spacing: -1px;
|
|
834
|
+
}
|
|
835
|
+
|
|
836
|
+
.edit-rule {
|
|
837
|
+
position: absolute;
|
|
838
|
+
top: 100px;
|
|
839
|
+
left: 24px;
|
|
840
|
+
width: 60px;
|
|
841
|
+
height: 2px;
|
|
842
|
+
background: #e63030;
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
.edit-body {
|
|
846
|
+
position: absolute;
|
|
847
|
+
bottom: 30px;
|
|
848
|
+
left: 24px;
|
|
849
|
+
font-family: 'Space Mono', monospace;
|
|
850
|
+
font-size: 8px;
|
|
851
|
+
letter-spacing: 2px;
|
|
852
|
+
color: #bbb;
|
|
853
|
+
line-height: 1.8;
|
|
854
|
+
}
|
|
855
|
+
|
|
856
|
+
.edit-vol {
|
|
857
|
+
position: absolute;
|
|
858
|
+
top: 50%;
|
|
859
|
+
right: 18px;
|
|
860
|
+
transform: translateY(-50%) rotate(90deg);
|
|
861
|
+
font-family: 'Space Mono', monospace;
|
|
862
|
+
font-size: 9px;
|
|
863
|
+
letter-spacing: 4px;
|
|
864
|
+
color: #555;
|
|
865
|
+
white-space: nowrap;
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
/* 16 PASTEL SOFT UI */
|
|
869
|
+
.preview-pastel {
|
|
870
|
+
background: linear-gradient(145deg, #fce4f3 0%, #e8f4ff 50%, #f0fce4 100%);
|
|
871
|
+
}
|
|
872
|
+
|
|
873
|
+
.pastel-card {
|
|
874
|
+
position: absolute;
|
|
875
|
+
border-radius: 20px;
|
|
876
|
+
background: rgba(255, 255, 255, 0.7);
|
|
877
|
+
backdrop-filter: blur(8px);
|
|
878
|
+
border: 1px solid rgba(255, 255, 255, 0.9);
|
|
879
|
+
}
|
|
880
|
+
|
|
881
|
+
.pc1 {
|
|
882
|
+
width: 130px;
|
|
883
|
+
height: 80px;
|
|
884
|
+
top: 25px;
|
|
885
|
+
left: 30px;
|
|
886
|
+
box-shadow: 0 8px 24px rgba(200, 160, 220, 0.2);
|
|
887
|
+
}
|
|
888
|
+
|
|
889
|
+
.pc2 {
|
|
890
|
+
width: 100px;
|
|
891
|
+
height: 65px;
|
|
892
|
+
bottom: 25px;
|
|
893
|
+
right: 30px;
|
|
894
|
+
box-shadow: 0 8px 24px rgba(160, 200, 240, 0.2);
|
|
895
|
+
}
|
|
896
|
+
|
|
897
|
+
.pc3 {
|
|
898
|
+
width: 70px;
|
|
899
|
+
height: 70px;
|
|
900
|
+
border-radius: 50%;
|
|
901
|
+
top: 50%;
|
|
902
|
+
left: 50%;
|
|
903
|
+
transform: translate(-50%, -50%);
|
|
904
|
+
box-shadow: 0 8px 24px rgba(160, 220, 160, 0.2);
|
|
905
|
+
}
|
|
906
|
+
|
|
907
|
+
.pastel-dot {
|
|
908
|
+
position: absolute;
|
|
909
|
+
border-radius: 50%;
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
.pd1 {
|
|
913
|
+
width: 40px;
|
|
914
|
+
height: 40px;
|
|
915
|
+
background: #f9c6e8;
|
|
916
|
+
top: 10px;
|
|
917
|
+
right: 20px;
|
|
918
|
+
opacity: 0.6;
|
|
919
|
+
}
|
|
920
|
+
|
|
921
|
+
.pd2 {
|
|
922
|
+
width: 30px;
|
|
923
|
+
height: 30px;
|
|
924
|
+
background: #c6e8f9;
|
|
925
|
+
bottom: 10px;
|
|
926
|
+
left: 20px;
|
|
927
|
+
opacity: 0.6;
|
|
928
|
+
}
|
|
929
|
+
|
|
930
|
+
/* 17 DARK NEON MIAMI */
|
|
931
|
+
.preview-miami {
|
|
932
|
+
background: #0a0014;
|
|
933
|
+
overflow: hidden;
|
|
934
|
+
}
|
|
935
|
+
|
|
936
|
+
.miami-horizon {
|
|
937
|
+
position: absolute;
|
|
938
|
+
bottom: 0;
|
|
939
|
+
left: 0;
|
|
940
|
+
right: 0;
|
|
941
|
+
height: 50%;
|
|
942
|
+
background: linear-gradient(0deg, #0a0014 0%, transparent 100%);
|
|
943
|
+
}
|
|
944
|
+
|
|
945
|
+
.miami-sun {
|
|
946
|
+
position: absolute;
|
|
947
|
+
width: 120px;
|
|
948
|
+
height: 60px;
|
|
949
|
+
bottom: 60px;
|
|
950
|
+
left: 50%;
|
|
951
|
+
transform: translateX(-50%);
|
|
952
|
+
border-radius: 60px 60px 0 0;
|
|
953
|
+
background: linear-gradient(180deg, #ff6b35, #ff0080);
|
|
954
|
+
}
|
|
955
|
+
|
|
956
|
+
.miami-lines {
|
|
957
|
+
position: absolute;
|
|
958
|
+
bottom: 0;
|
|
959
|
+
left: 0;
|
|
960
|
+
right: 0;
|
|
961
|
+
}
|
|
962
|
+
|
|
963
|
+
.miami-line {
|
|
964
|
+
position: absolute;
|
|
965
|
+
left: 0;
|
|
966
|
+
right: 0;
|
|
967
|
+
height: 1px;
|
|
968
|
+
}
|
|
969
|
+
|
|
970
|
+
.ml1 {
|
|
971
|
+
bottom: 55px;
|
|
972
|
+
background: rgba(255, 0, 128, 0.4);
|
|
973
|
+
}
|
|
974
|
+
|
|
975
|
+
.ml2 {
|
|
976
|
+
bottom: 45px;
|
|
977
|
+
background: rgba(255, 0, 128, 0.3);
|
|
978
|
+
}
|
|
979
|
+
|
|
980
|
+
.ml3 {
|
|
981
|
+
bottom: 36px;
|
|
982
|
+
background: rgba(255, 0, 128, 0.2);
|
|
983
|
+
}
|
|
984
|
+
|
|
985
|
+
.ml4 {
|
|
986
|
+
bottom: 28px;
|
|
987
|
+
background: rgba(255, 0, 128, 0.15);
|
|
988
|
+
}
|
|
989
|
+
|
|
990
|
+
.miami-title {
|
|
991
|
+
position: absolute;
|
|
992
|
+
top: 20px;
|
|
993
|
+
left: 0;
|
|
994
|
+
right: 0;
|
|
995
|
+
text-align: center;
|
|
996
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
997
|
+
font-size: 36px;
|
|
998
|
+
letter-spacing: 8px;
|
|
999
|
+
background: linear-gradient(90deg, #ff6b35, #ff0080, #9b00ff);
|
|
1000
|
+
-webkit-background-clip: text;
|
|
1001
|
+
-webkit-text-fill-color: transparent;
|
|
1002
|
+
background-clip: text;
|
|
1003
|
+
}
|
|
1004
|
+
|
|
1005
|
+
.miami-palm {
|
|
1006
|
+
position: absolute;
|
|
1007
|
+
bottom: 55px;
|
|
1008
|
+
font-size: 28px;
|
|
1009
|
+
}
|
|
1010
|
+
|
|
1011
|
+
.mp1 {
|
|
1012
|
+
left: 20px;
|
|
1013
|
+
}
|
|
1014
|
+
|
|
1015
|
+
.mp2 {
|
|
1016
|
+
right: 20px;
|
|
1017
|
+
}
|
|
1018
|
+
|
|
1019
|
+
/* 18 HAND-CRAFTED / ORGANIC */
|
|
1020
|
+
.preview-organic {
|
|
1021
|
+
background: #fdf6ee;
|
|
1022
|
+
overflow: hidden;
|
|
1023
|
+
}
|
|
1024
|
+
|
|
1025
|
+
.organic-circle {
|
|
1026
|
+
position: absolute;
|
|
1027
|
+
border-radius: 50%;
|
|
1028
|
+
border: 2px solid;
|
|
1029
|
+
}
|
|
1030
|
+
|
|
1031
|
+
.oc1 {
|
|
1032
|
+
width: 160px;
|
|
1033
|
+
height: 160px;
|
|
1034
|
+
border-color: #c8a882;
|
|
1035
|
+
top: 50%;
|
|
1036
|
+
left: 50%;
|
|
1037
|
+
transform: translate(-50%, -50%) rotate(8deg);
|
|
1038
|
+
border-style: dashed;
|
|
1039
|
+
}
|
|
1040
|
+
|
|
1041
|
+
.oc2 {
|
|
1042
|
+
width: 100px;
|
|
1043
|
+
height: 100px;
|
|
1044
|
+
border-color: #a87850;
|
|
1045
|
+
top: 50%;
|
|
1046
|
+
left: 50%;
|
|
1047
|
+
transform: translate(-50%, -50%);
|
|
1048
|
+
}
|
|
1049
|
+
|
|
1050
|
+
.organic-text {
|
|
1051
|
+
position: relative;
|
|
1052
|
+
font-family: Georgia, serif;
|
|
1053
|
+
font-style: italic;
|
|
1054
|
+
font-size: 22px;
|
|
1055
|
+
color: #6b4c2a;
|
|
1056
|
+
letter-spacing: 2px;
|
|
1057
|
+
}
|
|
1058
|
+
|
|
1059
|
+
.organic-leaf {
|
|
1060
|
+
position: absolute;
|
|
1061
|
+
font-size: 20px;
|
|
1062
|
+
}
|
|
1063
|
+
|
|
1064
|
+
.ol1 {
|
|
1065
|
+
top: 15px;
|
|
1066
|
+
left: 20px;
|
|
1067
|
+
transform: rotate(-20deg);
|
|
1068
|
+
}
|
|
1069
|
+
|
|
1070
|
+
.ol2 {
|
|
1071
|
+
bottom: 15px;
|
|
1072
|
+
right: 20px;
|
|
1073
|
+
transform: rotate(30deg);
|
|
1074
|
+
}
|
|
1075
|
+
|
|
1076
|
+
.organic-line {
|
|
1077
|
+
position: absolute;
|
|
1078
|
+
top: 50%;
|
|
1079
|
+
left: 20px;
|
|
1080
|
+
right: 20px;
|
|
1081
|
+
height: 1px;
|
|
1082
|
+
background: repeating-linear-gradient(90deg, #c8a882 0, #c8a882 4px, transparent 4px, transparent 10px);
|
|
1083
|
+
}
|
|
1084
|
+
|
|
1085
|
+
/* 19 ISOMETRIC / 3D FLAT */
|
|
1086
|
+
.preview-iso {
|
|
1087
|
+
background: #1e1e2e;
|
|
1088
|
+
overflow: hidden;
|
|
1089
|
+
}
|
|
1090
|
+
|
|
1091
|
+
.iso-wrap {
|
|
1092
|
+
position: relative;
|
|
1093
|
+
width: 160px;
|
|
1094
|
+
height: 160px;
|
|
1095
|
+
}
|
|
1096
|
+
|
|
1097
|
+
.iso-face {
|
|
1098
|
+
position: absolute;
|
|
1099
|
+
}
|
|
1100
|
+
|
|
1101
|
+
.iso-top {
|
|
1102
|
+
width: 80px;
|
|
1103
|
+
height: 46px;
|
|
1104
|
+
background: #7c6fff;
|
|
1105
|
+
top: 0;
|
|
1106
|
+
left: 40px;
|
|
1107
|
+
transform: skewX(-30deg);
|
|
1108
|
+
transform-origin: bottom left;
|
|
1109
|
+
}
|
|
1110
|
+
|
|
1111
|
+
.iso-left {
|
|
1112
|
+
width: 40px;
|
|
1113
|
+
height: 80px;
|
|
1114
|
+
background: #4a3fcc;
|
|
1115
|
+
bottom: 0;
|
|
1116
|
+
left: 0;
|
|
1117
|
+
transform: skewY(30deg);
|
|
1118
|
+
transform-origin: top right;
|
|
1119
|
+
}
|
|
1120
|
+
|
|
1121
|
+
.iso-right {
|
|
1122
|
+
width: 40px;
|
|
1123
|
+
height: 80px;
|
|
1124
|
+
background: #6254e8;
|
|
1125
|
+
bottom: 0;
|
|
1126
|
+
right: 0;
|
|
1127
|
+
transform: skewY(-30deg);
|
|
1128
|
+
transform-origin: top left;
|
|
1129
|
+
}
|
|
1130
|
+
|
|
1131
|
+
.iso-top2 {
|
|
1132
|
+
width: 60px;
|
|
1133
|
+
height: 34px;
|
|
1134
|
+
background: #a594ff;
|
|
1135
|
+
top: 20px;
|
|
1136
|
+
left: 60px;
|
|
1137
|
+
transform: skewX(-30deg);
|
|
1138
|
+
transform-origin: bottom left;
|
|
1139
|
+
}
|
|
1140
|
+
|
|
1141
|
+
.iso-left2 {
|
|
1142
|
+
width: 30px;
|
|
1143
|
+
height: 60px;
|
|
1144
|
+
background: #6254e8;
|
|
1145
|
+
bottom: 20px;
|
|
1146
|
+
left: 20px;
|
|
1147
|
+
transform: skewY(30deg);
|
|
1148
|
+
transform-origin: top right;
|
|
1149
|
+
}
|
|
1150
|
+
|
|
1151
|
+
.iso-right2 {
|
|
1152
|
+
width: 30px;
|
|
1153
|
+
height: 60px;
|
|
1154
|
+
background: #8070ff;
|
|
1155
|
+
bottom: 20px;
|
|
1156
|
+
right: 20px;
|
|
1157
|
+
transform: skewY(-30deg);
|
|
1158
|
+
transform-origin: top left;
|
|
1159
|
+
}
|
|
1160
|
+
|
|
1161
|
+
/* 20 VAPORWAVE */
|
|
1162
|
+
.preview-vapor {
|
|
1163
|
+
background: linear-gradient(180deg, #1a0533 0%, #2d0057 40%, #570038 100%);
|
|
1164
|
+
overflow: hidden;
|
|
1165
|
+
}
|
|
1166
|
+
|
|
1167
|
+
.vapor-grid {
|
|
1168
|
+
position: absolute;
|
|
1169
|
+
bottom: 0;
|
|
1170
|
+
left: 0;
|
|
1171
|
+
right: 0;
|
|
1172
|
+
height: 60%;
|
|
1173
|
+
}
|
|
1174
|
+
|
|
1175
|
+
.vg-h {
|
|
1176
|
+
position: absolute;
|
|
1177
|
+
left: 0;
|
|
1178
|
+
right: 0;
|
|
1179
|
+
height: 1px;
|
|
1180
|
+
background: rgba(255, 100, 200, 0.4);
|
|
1181
|
+
}
|
|
1182
|
+
|
|
1183
|
+
.vg1 {
|
|
1184
|
+
bottom: 48px;
|
|
1185
|
+
}
|
|
1186
|
+
|
|
1187
|
+
.vg2 {
|
|
1188
|
+
bottom: 36px;
|
|
1189
|
+
}
|
|
1190
|
+
|
|
1191
|
+
.vg3 {
|
|
1192
|
+
bottom: 26px;
|
|
1193
|
+
}
|
|
1194
|
+
|
|
1195
|
+
.vg4 {
|
|
1196
|
+
bottom: 18px;
|
|
1197
|
+
}
|
|
1198
|
+
|
|
1199
|
+
.vg5 {
|
|
1200
|
+
bottom: 12px;
|
|
1201
|
+
}
|
|
1202
|
+
|
|
1203
|
+
.vg6 {
|
|
1204
|
+
bottom: 7px;
|
|
1205
|
+
}
|
|
1206
|
+
|
|
1207
|
+
.vg7 {
|
|
1208
|
+
bottom: 3px;
|
|
1209
|
+
}
|
|
1210
|
+
|
|
1211
|
+
.vg-v {
|
|
1212
|
+
position: absolute;
|
|
1213
|
+
bottom: 0;
|
|
1214
|
+
width: 1px;
|
|
1215
|
+
height: 60%;
|
|
1216
|
+
background: rgba(255, 100, 200, 0.4);
|
|
1217
|
+
}
|
|
1218
|
+
|
|
1219
|
+
.vv1 {
|
|
1220
|
+
left: 10%;
|
|
1221
|
+
}
|
|
1222
|
+
|
|
1223
|
+
.vv2 {
|
|
1224
|
+
left: 22%;
|
|
1225
|
+
}
|
|
1226
|
+
|
|
1227
|
+
.vv3 {
|
|
1228
|
+
left: 36%;
|
|
1229
|
+
}
|
|
1230
|
+
|
|
1231
|
+
.vv4 {
|
|
1232
|
+
left: 50%;
|
|
1233
|
+
}
|
|
1234
|
+
|
|
1235
|
+
.vv5 {
|
|
1236
|
+
left: 64%;
|
|
1237
|
+
}
|
|
1238
|
+
|
|
1239
|
+
.vv6 {
|
|
1240
|
+
left: 78%;
|
|
1241
|
+
}
|
|
1242
|
+
|
|
1243
|
+
.vv7 {
|
|
1244
|
+
left: 90%;
|
|
1245
|
+
}
|
|
1246
|
+
|
|
1247
|
+
.vapor-sun {
|
|
1248
|
+
position: absolute;
|
|
1249
|
+
width: 100px;
|
|
1250
|
+
height: 50px;
|
|
1251
|
+
top: 20px;
|
|
1252
|
+
left: 50%;
|
|
1253
|
+
transform: translateX(-50%);
|
|
1254
|
+
border-radius: 50px 50px 0 0;
|
|
1255
|
+
background: linear-gradient(180deg, #ff9f43, #ff6b9d, #c44dff);
|
|
1256
|
+
}
|
|
1257
|
+
|
|
1258
|
+
.vapor-line1 {
|
|
1259
|
+
position: absolute;
|
|
1260
|
+
width: 100%;
|
|
1261
|
+
height: 8px;
|
|
1262
|
+
background: #1a0533;
|
|
1263
|
+
top: 50px;
|
|
1264
|
+
}
|
|
1265
|
+
|
|
1266
|
+
.vapor-line2 {
|
|
1267
|
+
position: absolute;
|
|
1268
|
+
width: 100%;
|
|
1269
|
+
height: 5px;
|
|
1270
|
+
background: #1a0533;
|
|
1271
|
+
top: 62px;
|
|
1272
|
+
}
|
|
1273
|
+
|
|
1274
|
+
.vapor-title {
|
|
1275
|
+
position: absolute;
|
|
1276
|
+
top: 25px;
|
|
1277
|
+
left: 0;
|
|
1278
|
+
right: 0;
|
|
1279
|
+
text-align: center;
|
|
1280
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
1281
|
+
font-size: 38px;
|
|
1282
|
+
letter-spacing: 6px;
|
|
1283
|
+
color: rgba(255, 255, 255, 0.08);
|
|
1284
|
+
}
|
|
1285
|
+
|
|
1286
|
+
.vapor-text {
|
|
1287
|
+
position: absolute;
|
|
1288
|
+
bottom: 20px;
|
|
1289
|
+
left: 0;
|
|
1290
|
+
right: 0;
|
|
1291
|
+
text-align: center;
|
|
1292
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
1293
|
+
font-size: 26px;
|
|
1294
|
+
letter-spacing: 8px;
|
|
1295
|
+
background: linear-gradient(90deg, #ff9f43, #ff6b9d, #c44dff);
|
|
1296
|
+
-webkit-background-clip: text;
|
|
1297
|
+
-webkit-text-fill-color: transparent;
|
|
1298
|
+
background-clip: text;
|
|
1299
|
+
}
|
|
1300
|
+
|
|
1301
|
+
/* ══════════════════════════════════════════
|
|
1302
|
+
신규 21–30 스타일
|
|
1303
|
+
══════════════════════════════════════════ */
|
|
1304
|
+
|
|
1305
|
+
/* 21 ART DECO LUXE */
|
|
1306
|
+
.preview-artdeco {
|
|
1307
|
+
background: #0e0a05;
|
|
1308
|
+
overflow: hidden;
|
|
1309
|
+
}
|
|
1310
|
+
|
|
1311
|
+
.deco-border {
|
|
1312
|
+
position: absolute;
|
|
1313
|
+
inset: 12px;
|
|
1314
|
+
border: 1px solid #b8960c;
|
|
1315
|
+
}
|
|
1316
|
+
|
|
1317
|
+
.deco-inner {
|
|
1318
|
+
position: absolute;
|
|
1319
|
+
inset: 18px;
|
|
1320
|
+
border: 1px solid rgba(184, 150, 12, 0.3);
|
|
1321
|
+
}
|
|
1322
|
+
|
|
1323
|
+
.deco-fan-l {
|
|
1324
|
+
position: absolute;
|
|
1325
|
+
width: 60px;
|
|
1326
|
+
height: 60px;
|
|
1327
|
+
border: 2px solid #b8960c;
|
|
1328
|
+
border-radius: 0 60px 0 0;
|
|
1329
|
+
top: 50%;
|
|
1330
|
+
left: 16px;
|
|
1331
|
+
transform: translateY(-50%);
|
|
1332
|
+
}
|
|
1333
|
+
|
|
1334
|
+
.deco-fan-r {
|
|
1335
|
+
position: absolute;
|
|
1336
|
+
width: 60px;
|
|
1337
|
+
height: 60px;
|
|
1338
|
+
border: 2px solid #b8960c;
|
|
1339
|
+
border-radius: 60px 0 0 0;
|
|
1340
|
+
top: 50%;
|
|
1341
|
+
right: 16px;
|
|
1342
|
+
transform: translateY(-50%);
|
|
1343
|
+
}
|
|
1344
|
+
|
|
1345
|
+
.deco-title {
|
|
1346
|
+
position: relative;
|
|
1347
|
+
font-family: Georgia, serif;
|
|
1348
|
+
font-size: 28px;
|
|
1349
|
+
letter-spacing: 8px;
|
|
1350
|
+
color: #d4aa2a;
|
|
1351
|
+
text-transform: uppercase;
|
|
1352
|
+
text-align: center;
|
|
1353
|
+
line-height: 1.1;
|
|
1354
|
+
}
|
|
1355
|
+
|
|
1356
|
+
.deco-rule-h {
|
|
1357
|
+
position: absolute;
|
|
1358
|
+
left: 30px;
|
|
1359
|
+
right: 30px;
|
|
1360
|
+
height: 1px;
|
|
1361
|
+
background: linear-gradient(90deg, transparent, #b8960c, transparent);
|
|
1362
|
+
}
|
|
1363
|
+
|
|
1364
|
+
.deco-rule-t {
|
|
1365
|
+
top: 50%;
|
|
1366
|
+
}
|
|
1367
|
+
|
|
1368
|
+
.deco-diamond {
|
|
1369
|
+
position: absolute;
|
|
1370
|
+
width: 8px;
|
|
1371
|
+
height: 8px;
|
|
1372
|
+
background: #b8960c;
|
|
1373
|
+
transform: rotate(45deg);
|
|
1374
|
+
top: 50%;
|
|
1375
|
+
left: 50%;
|
|
1376
|
+
margin: -4px 0 0 -4px;
|
|
1377
|
+
}
|
|
1378
|
+
|
|
1379
|
+
.deco-sub {
|
|
1380
|
+
position: absolute;
|
|
1381
|
+
bottom: 28px;
|
|
1382
|
+
left: 0;
|
|
1383
|
+
right: 0;
|
|
1384
|
+
text-align: center;
|
|
1385
|
+
font-family: 'Space Mono', monospace;
|
|
1386
|
+
font-size: 9px;
|
|
1387
|
+
letter-spacing: 5px;
|
|
1388
|
+
color: #8a7020;
|
|
1389
|
+
}
|
|
1390
|
+
|
|
1391
|
+
/* 22 BRUTALIST NEWSPAPER */
|
|
1392
|
+
.preview-news {
|
|
1393
|
+
background: #f2efe8;
|
|
1394
|
+
overflow: hidden;
|
|
1395
|
+
font-family: Georgia, serif;
|
|
1396
|
+
}
|
|
1397
|
+
|
|
1398
|
+
.news-masthead {
|
|
1399
|
+
position: absolute;
|
|
1400
|
+
top: 0;
|
|
1401
|
+
left: 0;
|
|
1402
|
+
right: 0;
|
|
1403
|
+
background: #1a1208;
|
|
1404
|
+
padding: 8px 16px;
|
|
1405
|
+
display: flex;
|
|
1406
|
+
justify-content: space-between;
|
|
1407
|
+
align-items: center;
|
|
1408
|
+
}
|
|
1409
|
+
|
|
1410
|
+
.news-title {
|
|
1411
|
+
font-size: 14px;
|
|
1412
|
+
font-weight: 700;
|
|
1413
|
+
color: #f2efe8;
|
|
1414
|
+
letter-spacing: 1px;
|
|
1415
|
+
}
|
|
1416
|
+
|
|
1417
|
+
.news-date {
|
|
1418
|
+
font-family: 'Space Mono', monospace;
|
|
1419
|
+
font-size: 8px;
|
|
1420
|
+
color: #8a7a60;
|
|
1421
|
+
}
|
|
1422
|
+
|
|
1423
|
+
.news-rule1 {
|
|
1424
|
+
position: absolute;
|
|
1425
|
+
top: 36px;
|
|
1426
|
+
left: 0;
|
|
1427
|
+
right: 0;
|
|
1428
|
+
height: 3px;
|
|
1429
|
+
background: #1a1208;
|
|
1430
|
+
}
|
|
1431
|
+
|
|
1432
|
+
.news-rule2 {
|
|
1433
|
+
position: absolute;
|
|
1434
|
+
top: 41px;
|
|
1435
|
+
left: 0;
|
|
1436
|
+
right: 0;
|
|
1437
|
+
height: 1px;
|
|
1438
|
+
background: #1a1208;
|
|
1439
|
+
}
|
|
1440
|
+
|
|
1441
|
+
.news-col1 {
|
|
1442
|
+
position: absolute;
|
|
1443
|
+
top: 52px;
|
|
1444
|
+
left: 12px;
|
|
1445
|
+
width: 40%;
|
|
1446
|
+
}
|
|
1447
|
+
|
|
1448
|
+
.news-headline {
|
|
1449
|
+
font-family: Georgia, serif;
|
|
1450
|
+
font-size: 22px;
|
|
1451
|
+
font-weight: 700;
|
|
1452
|
+
line-height: 1.1;
|
|
1453
|
+
color: #1a1208;
|
|
1454
|
+
margin-bottom: 6px;
|
|
1455
|
+
}
|
|
1456
|
+
|
|
1457
|
+
.news-body {
|
|
1458
|
+
font-family: Georgia, serif;
|
|
1459
|
+
font-size: 9px;
|
|
1460
|
+
line-height: 1.5;
|
|
1461
|
+
color: #3a3020;
|
|
1462
|
+
}
|
|
1463
|
+
|
|
1464
|
+
.news-divider {
|
|
1465
|
+
position: absolute;
|
|
1466
|
+
top: 52px;
|
|
1467
|
+
bottom: 12px;
|
|
1468
|
+
left: 53%;
|
|
1469
|
+
width: 1px;
|
|
1470
|
+
background: #1a1208;
|
|
1471
|
+
}
|
|
1472
|
+
|
|
1473
|
+
.news-col2 {
|
|
1474
|
+
position: absolute;
|
|
1475
|
+
top: 52px;
|
|
1476
|
+
right: 12px;
|
|
1477
|
+
width: 40%;
|
|
1478
|
+
text-align: center;
|
|
1479
|
+
}
|
|
1480
|
+
|
|
1481
|
+
.news-photo {
|
|
1482
|
+
width: 100%;
|
|
1483
|
+
height: 70px;
|
|
1484
|
+
background: #ccc5b0;
|
|
1485
|
+
margin-bottom: 6px;
|
|
1486
|
+
display: flex;
|
|
1487
|
+
align-items: center;
|
|
1488
|
+
justify-content: center;
|
|
1489
|
+
}
|
|
1490
|
+
|
|
1491
|
+
.news-caption {
|
|
1492
|
+
font-family: 'Space Mono', monospace;
|
|
1493
|
+
font-size: 7px;
|
|
1494
|
+
color: #6a6050;
|
|
1495
|
+
letter-spacing: 1px;
|
|
1496
|
+
}
|
|
1497
|
+
|
|
1498
|
+
/* 23 STAINED GLASS / MOSAIC */
|
|
1499
|
+
.preview-mosaic {
|
|
1500
|
+
background: #0a0a12;
|
|
1501
|
+
overflow: hidden;
|
|
1502
|
+
}
|
|
1503
|
+
|
|
1504
|
+
.mosaic-grid {
|
|
1505
|
+
position: absolute;
|
|
1506
|
+
inset: 0;
|
|
1507
|
+
display: grid;
|
|
1508
|
+
grid-template-columns: repeat(6, 1fr);
|
|
1509
|
+
grid-template-rows: repeat(4, 1fr);
|
|
1510
|
+
gap: 2px;
|
|
1511
|
+
padding: 2px;
|
|
1512
|
+
}
|
|
1513
|
+
|
|
1514
|
+
.mosaic-cell {
|
|
1515
|
+
border-radius: 2px;
|
|
1516
|
+
opacity: 0.85;
|
|
1517
|
+
}
|
|
1518
|
+
|
|
1519
|
+
.mc1 {
|
|
1520
|
+
background: #1a3a6e;
|
|
1521
|
+
}
|
|
1522
|
+
|
|
1523
|
+
.mc2 {
|
|
1524
|
+
background: #e63030;
|
|
1525
|
+
}
|
|
1526
|
+
|
|
1527
|
+
.mc3 {
|
|
1528
|
+
background: #f5d020;
|
|
1529
|
+
}
|
|
1530
|
+
|
|
1531
|
+
.mc4 {
|
|
1532
|
+
background: #2a6e1a;
|
|
1533
|
+
}
|
|
1534
|
+
|
|
1535
|
+
.mc5 {
|
|
1536
|
+
background: #6e1a4e;
|
|
1537
|
+
}
|
|
1538
|
+
|
|
1539
|
+
.mc6 {
|
|
1540
|
+
background: #f5d020;
|
|
1541
|
+
}
|
|
1542
|
+
|
|
1543
|
+
.mc7 {
|
|
1544
|
+
background: #2a4e8a;
|
|
1545
|
+
}
|
|
1546
|
+
|
|
1547
|
+
.mc8 {
|
|
1548
|
+
background: #8a2a1a;
|
|
1549
|
+
}
|
|
1550
|
+
|
|
1551
|
+
.mc9 {
|
|
1552
|
+
background: #1a6e4e;
|
|
1553
|
+
}
|
|
1554
|
+
|
|
1555
|
+
.mc10 {
|
|
1556
|
+
background: #e63030;
|
|
1557
|
+
}
|
|
1558
|
+
|
|
1559
|
+
.mc11 {
|
|
1560
|
+
background: #6e4e1a;
|
|
1561
|
+
}
|
|
1562
|
+
|
|
1563
|
+
.mc12 {
|
|
1564
|
+
background: #4e1a6e;
|
|
1565
|
+
}
|
|
1566
|
+
|
|
1567
|
+
.mc13 {
|
|
1568
|
+
background: #1a6e2a;
|
|
1569
|
+
}
|
|
1570
|
+
|
|
1571
|
+
.mc14 {
|
|
1572
|
+
background: #d4820a;
|
|
1573
|
+
}
|
|
1574
|
+
|
|
1575
|
+
.mc15 {
|
|
1576
|
+
background: #2a2a8a;
|
|
1577
|
+
}
|
|
1578
|
+
|
|
1579
|
+
.mc16 {
|
|
1580
|
+
background: #8a1a3a;
|
|
1581
|
+
}
|
|
1582
|
+
|
|
1583
|
+
.mc17 {
|
|
1584
|
+
background: #1a4e1a;
|
|
1585
|
+
}
|
|
1586
|
+
|
|
1587
|
+
.mc18 {
|
|
1588
|
+
background: #6e6e1a;
|
|
1589
|
+
}
|
|
1590
|
+
|
|
1591
|
+
.mc19 {
|
|
1592
|
+
background: #1a1a6e;
|
|
1593
|
+
}
|
|
1594
|
+
|
|
1595
|
+
.mc20 {
|
|
1596
|
+
background: #8a3a1a;
|
|
1597
|
+
}
|
|
1598
|
+
|
|
1599
|
+
.mc21 {
|
|
1600
|
+
background: #4e8a1a;
|
|
1601
|
+
}
|
|
1602
|
+
|
|
1603
|
+
.mc22 {
|
|
1604
|
+
background: #8a1a6e;
|
|
1605
|
+
}
|
|
1606
|
+
|
|
1607
|
+
.mc23 {
|
|
1608
|
+
background: #1a8a6e;
|
|
1609
|
+
}
|
|
1610
|
+
|
|
1611
|
+
.mc24 {
|
|
1612
|
+
background: #e63030;
|
|
1613
|
+
}
|
|
1614
|
+
|
|
1615
|
+
.mosaic-overlay {
|
|
1616
|
+
position: absolute;
|
|
1617
|
+
inset: 0;
|
|
1618
|
+
background: rgba(0, 0, 0, 0.3);
|
|
1619
|
+
}
|
|
1620
|
+
|
|
1621
|
+
.mosaic-label {
|
|
1622
|
+
position: absolute;
|
|
1623
|
+
bottom: 16px;
|
|
1624
|
+
left: 0;
|
|
1625
|
+
right: 0;
|
|
1626
|
+
text-align: center;
|
|
1627
|
+
font-family: Georgia, serif;
|
|
1628
|
+
font-size: 18px;
|
|
1629
|
+
font-weight: 700;
|
|
1630
|
+
color: rgba(255, 255, 255, 0.9);
|
|
1631
|
+
letter-spacing: 6px;
|
|
1632
|
+
text-transform: uppercase;
|
|
1633
|
+
}
|
|
1634
|
+
|
|
1635
|
+
/* 24 LIQUID / BLOB MORPHING */
|
|
1636
|
+
.preview-liquid {
|
|
1637
|
+
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
|
|
1638
|
+
overflow: hidden;
|
|
1639
|
+
}
|
|
1640
|
+
|
|
1641
|
+
.liquid-blob {
|
|
1642
|
+
position: absolute;
|
|
1643
|
+
border-radius: 50%;
|
|
1644
|
+
filter: blur(25px);
|
|
1645
|
+
animation: blobmove 6s ease-in-out infinite alternate;
|
|
1646
|
+
}
|
|
1647
|
+
|
|
1648
|
+
.lb1 {
|
|
1649
|
+
width: 180px;
|
|
1650
|
+
height: 160px;
|
|
1651
|
+
background: rgba(0, 210, 190, 0.35);
|
|
1652
|
+
top: -30px;
|
|
1653
|
+
left: -20px;
|
|
1654
|
+
}
|
|
1655
|
+
|
|
1656
|
+
.lb2 {
|
|
1657
|
+
width: 160px;
|
|
1658
|
+
height: 180px;
|
|
1659
|
+
background: rgba(0, 120, 255, 0.3);
|
|
1660
|
+
bottom: -40px;
|
|
1661
|
+
right: -20px;
|
|
1662
|
+
animation-delay: -2s;
|
|
1663
|
+
}
|
|
1664
|
+
|
|
1665
|
+
.lb3 {
|
|
1666
|
+
width: 120px;
|
|
1667
|
+
height: 120px;
|
|
1668
|
+
background: rgba(120, 0, 255, 0.25);
|
|
1669
|
+
top: 50%;
|
|
1670
|
+
left: 50%;
|
|
1671
|
+
transform: translate(-50%, -50%);
|
|
1672
|
+
animation-delay: -4s;
|
|
1673
|
+
}
|
|
1674
|
+
|
|
1675
|
+
@keyframes blobmove {
|
|
1676
|
+
0% {
|
|
1677
|
+
border-radius: 60% 40% 50% 60%/60% 50% 40% 50%;
|
|
1678
|
+
}
|
|
1679
|
+
|
|
1680
|
+
100% {
|
|
1681
|
+
border-radius: 40% 60% 60% 40%/40% 60% 50% 60%;
|
|
1682
|
+
}
|
|
1683
|
+
}
|
|
1684
|
+
|
|
1685
|
+
.liquid-text {
|
|
1686
|
+
position: relative;
|
|
1687
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
1688
|
+
font-size: 36px;
|
|
1689
|
+
letter-spacing: 6px;
|
|
1690
|
+
color: rgba(255, 255, 255, 0.9);
|
|
1691
|
+
text-shadow: 0 0 30px rgba(0, 210, 190, 0.8);
|
|
1692
|
+
z-index: 2;
|
|
1693
|
+
}
|
|
1694
|
+
|
|
1695
|
+
/* 25 MEMPHIS / POP PATTERN */
|
|
1696
|
+
.preview-memphis {
|
|
1697
|
+
background: #fff5e0;
|
|
1698
|
+
overflow: hidden;
|
|
1699
|
+
}
|
|
1700
|
+
|
|
1701
|
+
.memphis-bg {
|
|
1702
|
+
position: absolute;
|
|
1703
|
+
inset: 0;
|
|
1704
|
+
}
|
|
1705
|
+
|
|
1706
|
+
/* pattern elements drawn with pseudo-shapes */
|
|
1707
|
+
.mem-tri {
|
|
1708
|
+
position: absolute;
|
|
1709
|
+
width: 0;
|
|
1710
|
+
height: 0;
|
|
1711
|
+
}
|
|
1712
|
+
|
|
1713
|
+
.mt1 {
|
|
1714
|
+
border-left: 16px solid transparent;
|
|
1715
|
+
border-right: 16px solid transparent;
|
|
1716
|
+
border-bottom: 28px solid #e8344a;
|
|
1717
|
+
top: 20px;
|
|
1718
|
+
left: 30px;
|
|
1719
|
+
}
|
|
1720
|
+
|
|
1721
|
+
.mt2 {
|
|
1722
|
+
border-left: 12px solid transparent;
|
|
1723
|
+
border-right: 12px solid transparent;
|
|
1724
|
+
border-bottom: 20px solid #1e90ff;
|
|
1725
|
+
bottom: 40px;
|
|
1726
|
+
right: 50px;
|
|
1727
|
+
}
|
|
1728
|
+
|
|
1729
|
+
.mt3 {
|
|
1730
|
+
border-left: 10px solid transparent;
|
|
1731
|
+
border-right: 10px solid transparent;
|
|
1732
|
+
border-bottom: 18px solid #ffd700;
|
|
1733
|
+
top: 70px;
|
|
1734
|
+
right: 80px;
|
|
1735
|
+
}
|
|
1736
|
+
|
|
1737
|
+
.mem-circle {
|
|
1738
|
+
position: absolute;
|
|
1739
|
+
border-radius: 50%;
|
|
1740
|
+
border: 3px solid;
|
|
1741
|
+
}
|
|
1742
|
+
|
|
1743
|
+
.mci1 {
|
|
1744
|
+
width: 40px;
|
|
1745
|
+
height: 40px;
|
|
1746
|
+
border-color: #e8344a;
|
|
1747
|
+
top: 50px;
|
|
1748
|
+
right: 30px;
|
|
1749
|
+
}
|
|
1750
|
+
|
|
1751
|
+
.mci2 {
|
|
1752
|
+
width: 28px;
|
|
1753
|
+
height: 28px;
|
|
1754
|
+
border-color: #1e90ff;
|
|
1755
|
+
bottom: 30px;
|
|
1756
|
+
left: 50px;
|
|
1757
|
+
}
|
|
1758
|
+
|
|
1759
|
+
.mem-zigzag {
|
|
1760
|
+
position: absolute;
|
|
1761
|
+
left: 0;
|
|
1762
|
+
right: 0;
|
|
1763
|
+
height: 8px;
|
|
1764
|
+
top: 45%;
|
|
1765
|
+
background: linear-gradient(135deg, #e8344a 25%, transparent 25%) -10px 0, linear-gradient(225deg, #e8344a 25%, transparent 25%) -10px 0, linear-gradient(315deg, #e8344a 25%, transparent 25%), linear-gradient(45deg, #e8344a 25%, transparent 25%);
|
|
1766
|
+
background-size: 20px 8px;
|
|
1767
|
+
}
|
|
1768
|
+
|
|
1769
|
+
.mem-dot {
|
|
1770
|
+
position: absolute;
|
|
1771
|
+
width: 10px;
|
|
1772
|
+
height: 10px;
|
|
1773
|
+
border-radius: 50%;
|
|
1774
|
+
background: #22bb88;
|
|
1775
|
+
}
|
|
1776
|
+
|
|
1777
|
+
.md1 {
|
|
1778
|
+
top: 30px;
|
|
1779
|
+
left: 80px;
|
|
1780
|
+
}
|
|
1781
|
+
|
|
1782
|
+
.md2 {
|
|
1783
|
+
bottom: 50px;
|
|
1784
|
+
right: 80px;
|
|
1785
|
+
}
|
|
1786
|
+
|
|
1787
|
+
.md3 {
|
|
1788
|
+
top: 120px;
|
|
1789
|
+
left: 130px;
|
|
1790
|
+
}
|
|
1791
|
+
|
|
1792
|
+
.memphis-title {
|
|
1793
|
+
position: relative;
|
|
1794
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
1795
|
+
font-size: 34px;
|
|
1796
|
+
letter-spacing: 3px;
|
|
1797
|
+
color: #1a1a1a;
|
|
1798
|
+
text-align: center;
|
|
1799
|
+
z-index: 2;
|
|
1800
|
+
}
|
|
1801
|
+
|
|
1802
|
+
/* 26 DARK FOREST / NATURE */
|
|
1803
|
+
.preview-forest {
|
|
1804
|
+
background: radial-gradient(ellipse at 50% 0%, #0d2b14 0%, #060e08 80%);
|
|
1805
|
+
overflow: hidden;
|
|
1806
|
+
}
|
|
1807
|
+
|
|
1808
|
+
.forest-mist {
|
|
1809
|
+
position: absolute;
|
|
1810
|
+
bottom: 0;
|
|
1811
|
+
left: 0;
|
|
1812
|
+
right: 0;
|
|
1813
|
+
height: 50%;
|
|
1814
|
+
background: linear-gradient(0deg, rgba(180, 255, 200, 0.04) 0%, transparent 100%);
|
|
1815
|
+
}
|
|
1816
|
+
|
|
1817
|
+
.forest-tree {
|
|
1818
|
+
position: absolute;
|
|
1819
|
+
bottom: 0;
|
|
1820
|
+
}
|
|
1821
|
+
|
|
1822
|
+
.ftree1 {
|
|
1823
|
+
left: 10px;
|
|
1824
|
+
width: 0;
|
|
1825
|
+
height: 0;
|
|
1826
|
+
border-left: 20px solid transparent;
|
|
1827
|
+
border-right: 20px solid transparent;
|
|
1828
|
+
border-bottom: 90px solid #0a3d1a;
|
|
1829
|
+
opacity: 0.9;
|
|
1830
|
+
}
|
|
1831
|
+
|
|
1832
|
+
.ftree2 {
|
|
1833
|
+
right: 20px;
|
|
1834
|
+
width: 0;
|
|
1835
|
+
height: 0;
|
|
1836
|
+
border-left: 28px solid transparent;
|
|
1837
|
+
border-right: 28px solid transparent;
|
|
1838
|
+
border-bottom: 120px solid #0d4d20;
|
|
1839
|
+
opacity: 0.8;
|
|
1840
|
+
}
|
|
1841
|
+
|
|
1842
|
+
.ftree3 {
|
|
1843
|
+
left: 50%;
|
|
1844
|
+
transform: translateX(-50%);
|
|
1845
|
+
width: 0;
|
|
1846
|
+
height: 0;
|
|
1847
|
+
border-left: 16px solid transparent;
|
|
1848
|
+
border-right: 16px solid transparent;
|
|
1849
|
+
border-bottom: 70px solid #0a3010;
|
|
1850
|
+
opacity: 0.7;
|
|
1851
|
+
}
|
|
1852
|
+
|
|
1853
|
+
.forest-moon {
|
|
1854
|
+
position: absolute;
|
|
1855
|
+
width: 50px;
|
|
1856
|
+
height: 50px;
|
|
1857
|
+
border-radius: 50%;
|
|
1858
|
+
background: radial-gradient(circle at 40% 40%, #e8f4d0, #b8cc80);
|
|
1859
|
+
top: 20px;
|
|
1860
|
+
right: 40px;
|
|
1861
|
+
box-shadow: 0 0 30px rgba(200, 255, 150, 0.3);
|
|
1862
|
+
}
|
|
1863
|
+
|
|
1864
|
+
.forest-star {
|
|
1865
|
+
position: absolute;
|
|
1866
|
+
background: #d4f0b0;
|
|
1867
|
+
border-radius: 50%;
|
|
1868
|
+
}
|
|
1869
|
+
|
|
1870
|
+
.fs1 {
|
|
1871
|
+
width: 3px;
|
|
1872
|
+
height: 3px;
|
|
1873
|
+
top: 30px;
|
|
1874
|
+
left: 40px;
|
|
1875
|
+
}
|
|
1876
|
+
|
|
1877
|
+
.fs2 {
|
|
1878
|
+
width: 2px;
|
|
1879
|
+
height: 2px;
|
|
1880
|
+
top: 50px;
|
|
1881
|
+
left: 100px;
|
|
1882
|
+
opacity: 0.7;
|
|
1883
|
+
}
|
|
1884
|
+
|
|
1885
|
+
.fs3 {
|
|
1886
|
+
width: 3px;
|
|
1887
|
+
height: 3px;
|
|
1888
|
+
top: 25px;
|
|
1889
|
+
right: 100px;
|
|
1890
|
+
}
|
|
1891
|
+
|
|
1892
|
+
.forest-text {
|
|
1893
|
+
position: absolute;
|
|
1894
|
+
bottom: 35px;
|
|
1895
|
+
left: 0;
|
|
1896
|
+
right: 0;
|
|
1897
|
+
text-align: center;
|
|
1898
|
+
font-family: Georgia, serif;
|
|
1899
|
+
font-style: italic;
|
|
1900
|
+
font-size: 22px;
|
|
1901
|
+
color: rgba(200, 255, 180, 0.85);
|
|
1902
|
+
letter-spacing: 4px;
|
|
1903
|
+
}
|
|
1904
|
+
|
|
1905
|
+
.forest-line {
|
|
1906
|
+
position: absolute;
|
|
1907
|
+
bottom: 60px;
|
|
1908
|
+
left: 50%;
|
|
1909
|
+
transform: translateX(-50%);
|
|
1910
|
+
width: 80px;
|
|
1911
|
+
height: 1px;
|
|
1912
|
+
background: rgba(180, 255, 160, 0.3);
|
|
1913
|
+
}
|
|
1914
|
+
|
|
1915
|
+
/* 27 ARCHITECTURAL BLUEPRINT */
|
|
1916
|
+
.preview-blueprint {
|
|
1917
|
+
background: #0d2240;
|
|
1918
|
+
overflow: hidden;
|
|
1919
|
+
}
|
|
1920
|
+
|
|
1921
|
+
.bp-grid {
|
|
1922
|
+
position: absolute;
|
|
1923
|
+
inset: 0;
|
|
1924
|
+
background-image: linear-gradient(rgba(100, 180, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 180, 255, 0.12) 1px, transparent 1px);
|
|
1925
|
+
background-size: 20px 20px;
|
|
1926
|
+
}
|
|
1927
|
+
|
|
1928
|
+
.bp-major {
|
|
1929
|
+
position: absolute;
|
|
1930
|
+
inset: 0;
|
|
1931
|
+
background-image: linear-gradient(rgba(100, 180, 255, 0.22) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 180, 255, 0.22) 1px, transparent 1px);
|
|
1932
|
+
background-size: 60px 60px;
|
|
1933
|
+
}
|
|
1934
|
+
|
|
1935
|
+
.bp-shape {
|
|
1936
|
+
position: absolute;
|
|
1937
|
+
border: 1.5px solid rgba(100, 200, 255, 0.6);
|
|
1938
|
+
}
|
|
1939
|
+
|
|
1940
|
+
.bps1 {
|
|
1941
|
+
top: 30px;
|
|
1942
|
+
left: 30px;
|
|
1943
|
+
width: 80px;
|
|
1944
|
+
height: 50px;
|
|
1945
|
+
}
|
|
1946
|
+
|
|
1947
|
+
.bps2 {
|
|
1948
|
+
top: 30px;
|
|
1949
|
+
left: 30px;
|
|
1950
|
+
width: 40px;
|
|
1951
|
+
height: 40px;
|
|
1952
|
+
border-radius: 50%;
|
|
1953
|
+
transform: translate(80px, 10px);
|
|
1954
|
+
}
|
|
1955
|
+
|
|
1956
|
+
.bp-dim {
|
|
1957
|
+
position: absolute;
|
|
1958
|
+
font-family: 'Space Mono', monospace;
|
|
1959
|
+
font-size: 8px;
|
|
1960
|
+
color: rgba(100, 200, 255, 0.6);
|
|
1961
|
+
letter-spacing: 1px;
|
|
1962
|
+
}
|
|
1963
|
+
|
|
1964
|
+
.bd1 {
|
|
1965
|
+
top: 22px;
|
|
1966
|
+
left: 32px;
|
|
1967
|
+
}
|
|
1968
|
+
|
|
1969
|
+
.bd2 {
|
|
1970
|
+
top: 22px;
|
|
1971
|
+
left: 90px;
|
|
1972
|
+
}
|
|
1973
|
+
|
|
1974
|
+
.bd3 {
|
|
1975
|
+
bottom: 65px;
|
|
1976
|
+
left: 32px;
|
|
1977
|
+
}
|
|
1978
|
+
|
|
1979
|
+
.bp-arrow {
|
|
1980
|
+
position: absolute;
|
|
1981
|
+
left: 30px;
|
|
1982
|
+
top: 18px;
|
|
1983
|
+
width: 100px;
|
|
1984
|
+
height: 1px;
|
|
1985
|
+
background: rgba(100, 200, 255, 0.4);
|
|
1986
|
+
}
|
|
1987
|
+
|
|
1988
|
+
.bp-title {
|
|
1989
|
+
position: absolute;
|
|
1990
|
+
bottom: 20px;
|
|
1991
|
+
left: 0;
|
|
1992
|
+
right: 0;
|
|
1993
|
+
text-align: center;
|
|
1994
|
+
font-family: 'Space Mono', monospace;
|
|
1995
|
+
font-size: 11px;
|
|
1996
|
+
letter-spacing: 4px;
|
|
1997
|
+
color: rgba(150, 220, 255, 0.8);
|
|
1998
|
+
}
|
|
1999
|
+
|
|
2000
|
+
.bp-stamp {
|
|
2001
|
+
position: absolute;
|
|
2002
|
+
top: 50%;
|
|
2003
|
+
right: 20px;
|
|
2004
|
+
transform: translateY(-50%);
|
|
2005
|
+
width: 60px;
|
|
2006
|
+
height: 60px;
|
|
2007
|
+
border: 2px solid rgba(100, 200, 255, 0.5);
|
|
2008
|
+
border-radius: 50%;
|
|
2009
|
+
display: flex;
|
|
2010
|
+
align-items: center;
|
|
2011
|
+
justify-content: center;
|
|
2012
|
+
font-family: 'Space Mono', monospace;
|
|
2013
|
+
font-size: 8px;
|
|
2014
|
+
color: rgba(100, 200, 255, 0.5);
|
|
2015
|
+
text-align: center;
|
|
2016
|
+
line-height: 1.3;
|
|
2017
|
+
letter-spacing: 1px;
|
|
2018
|
+
}
|
|
2019
|
+
|
|
2020
|
+
/* 28 MAXIMALIST COLLAGE */
|
|
2021
|
+
.preview-collage {
|
|
2022
|
+
background: #e8ddd0;
|
|
2023
|
+
overflow: hidden;
|
|
2024
|
+
}
|
|
2025
|
+
|
|
2026
|
+
.col-stripe {
|
|
2027
|
+
position: absolute;
|
|
2028
|
+
top: 0;
|
|
2029
|
+
left: 0;
|
|
2030
|
+
right: 0;
|
|
2031
|
+
height: 100%;
|
|
2032
|
+
background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(0, 0, 0, 0.03) 8px, rgba(0, 0, 0, 0.03) 9px);
|
|
2033
|
+
}
|
|
2034
|
+
|
|
2035
|
+
.col-block {
|
|
2036
|
+
position: absolute;
|
|
2037
|
+
}
|
|
2038
|
+
|
|
2039
|
+
.cb1 {
|
|
2040
|
+
width: 90px;
|
|
2041
|
+
height: 60px;
|
|
2042
|
+
background: #e83030;
|
|
2043
|
+
top: 20px;
|
|
2044
|
+
left: 20px;
|
|
2045
|
+
transform: rotate(-3deg);
|
|
2046
|
+
}
|
|
2047
|
+
|
|
2048
|
+
.cb2 {
|
|
2049
|
+
width: 70px;
|
|
2050
|
+
height: 90px;
|
|
2051
|
+
background: #1a1a1a;
|
|
2052
|
+
top: 15px;
|
|
2053
|
+
right: 25px;
|
|
2054
|
+
transform: rotate(4deg);
|
|
2055
|
+
}
|
|
2056
|
+
|
|
2057
|
+
.cb3 {
|
|
2058
|
+
width: 80px;
|
|
2059
|
+
height: 50px;
|
|
2060
|
+
background: #f5d020;
|
|
2061
|
+
bottom: 20px;
|
|
2062
|
+
left: 50%;
|
|
2063
|
+
transform: translateX(-50%) rotate(-2deg);
|
|
2064
|
+
}
|
|
2065
|
+
|
|
2066
|
+
.col-text1 {
|
|
2067
|
+
position: absolute;
|
|
2068
|
+
top: 30px;
|
|
2069
|
+
left: 28px;
|
|
2070
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
2071
|
+
font-size: 26px;
|
|
2072
|
+
color: #fff;
|
|
2073
|
+
letter-spacing: 2px;
|
|
2074
|
+
line-height: 1;
|
|
2075
|
+
}
|
|
2076
|
+
|
|
2077
|
+
.col-text2 {
|
|
2078
|
+
position: absolute;
|
|
2079
|
+
top: 28px;
|
|
2080
|
+
right: 30px;
|
|
2081
|
+
font-family: Georgia, serif;
|
|
2082
|
+
font-style: italic;
|
|
2083
|
+
font-size: 18px;
|
|
2084
|
+
color: #fff;
|
|
2085
|
+
writing-mode: vertical-rl;
|
|
2086
|
+
letter-spacing: 2px;
|
|
2087
|
+
}
|
|
2088
|
+
|
|
2089
|
+
.col-circle {
|
|
2090
|
+
position: absolute;
|
|
2091
|
+
width: 50px;
|
|
2092
|
+
height: 50px;
|
|
2093
|
+
border-radius: 50%;
|
|
2094
|
+
border: 3px solid #e83030;
|
|
2095
|
+
bottom: 30px;
|
|
2096
|
+
left: 20px;
|
|
2097
|
+
}
|
|
2098
|
+
|
|
2099
|
+
.col-num {
|
|
2100
|
+
position: absolute;
|
|
2101
|
+
bottom: 22px;
|
|
2102
|
+
right: 20px;
|
|
2103
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
2104
|
+
font-size: 64px;
|
|
2105
|
+
color: rgba(0, 0, 0, 0.08);
|
|
2106
|
+
line-height: 1;
|
|
2107
|
+
}
|
|
2108
|
+
|
|
2109
|
+
/* 29 SCIFI DATA / HOLOGRAPHIC */
|
|
2110
|
+
.preview-holo {
|
|
2111
|
+
background: #03050d;
|
|
2112
|
+
overflow: hidden;
|
|
2113
|
+
}
|
|
2114
|
+
|
|
2115
|
+
.holo-ring {
|
|
2116
|
+
position: absolute;
|
|
2117
|
+
border-radius: 50%;
|
|
2118
|
+
border: 1px solid;
|
|
2119
|
+
}
|
|
2120
|
+
|
|
2121
|
+
.hr1 {
|
|
2122
|
+
width: 180px;
|
|
2123
|
+
height: 180px;
|
|
2124
|
+
border-color: rgba(0, 200, 255, 0.25);
|
|
2125
|
+
top: 50%;
|
|
2126
|
+
left: 50%;
|
|
2127
|
+
transform: translate(-50%, -50%);
|
|
2128
|
+
}
|
|
2129
|
+
|
|
2130
|
+
.hr2 {
|
|
2131
|
+
width: 130px;
|
|
2132
|
+
height: 130px;
|
|
2133
|
+
border-color: rgba(0, 200, 255, 0.4);
|
|
2134
|
+
top: 50%;
|
|
2135
|
+
left: 50%;
|
|
2136
|
+
transform: translate(-50%, -50%) rotate(30deg);
|
|
2137
|
+
}
|
|
2138
|
+
|
|
2139
|
+
.hr3 {
|
|
2140
|
+
width: 80px;
|
|
2141
|
+
height: 80px;
|
|
2142
|
+
border-color: rgba(0, 200, 255, 0.6);
|
|
2143
|
+
top: 50%;
|
|
2144
|
+
left: 50%;
|
|
2145
|
+
transform: translate(-50%, -50%);
|
|
2146
|
+
}
|
|
2147
|
+
|
|
2148
|
+
.holo-scan {
|
|
2149
|
+
position: absolute;
|
|
2150
|
+
left: 0;
|
|
2151
|
+
right: 0;
|
|
2152
|
+
height: 1px;
|
|
2153
|
+
background: rgba(0, 200, 255, 0.5);
|
|
2154
|
+
animation: holoscroll 3s linear infinite;
|
|
2155
|
+
}
|
|
2156
|
+
|
|
2157
|
+
@keyframes holoscroll {
|
|
2158
|
+
0% {
|
|
2159
|
+
top: 20%;
|
|
2160
|
+
opacity: 1;
|
|
2161
|
+
}
|
|
2162
|
+
|
|
2163
|
+
80% {
|
|
2164
|
+
opacity: 0.5;
|
|
2165
|
+
}
|
|
2166
|
+
|
|
2167
|
+
100% {
|
|
2168
|
+
top: 80%;
|
|
2169
|
+
opacity: 0;
|
|
2170
|
+
}
|
|
2171
|
+
}
|
|
2172
|
+
|
|
2173
|
+
.holo-dot {
|
|
2174
|
+
position: absolute;
|
|
2175
|
+
width: 6px;
|
|
2176
|
+
height: 6px;
|
|
2177
|
+
background: #00c8ff;
|
|
2178
|
+
border-radius: 50%;
|
|
2179
|
+
top: 50%;
|
|
2180
|
+
left: 50%;
|
|
2181
|
+
transform: translate(-50%, -50%);
|
|
2182
|
+
}
|
|
2183
|
+
|
|
2184
|
+
.holo-text {
|
|
2185
|
+
position: absolute;
|
|
2186
|
+
font-family: 'Space Mono', monospace;
|
|
2187
|
+
font-size: 10px;
|
|
2188
|
+
color: rgba(0, 200, 255, 0.7);
|
|
2189
|
+
letter-spacing: 3px;
|
|
2190
|
+
}
|
|
2191
|
+
|
|
2192
|
+
.ht1 {
|
|
2193
|
+
top: 15px;
|
|
2194
|
+
left: 20px;
|
|
2195
|
+
}
|
|
2196
|
+
|
|
2197
|
+
.ht2 {
|
|
2198
|
+
bottom: 20px;
|
|
2199
|
+
right: 20px;
|
|
2200
|
+
}
|
|
2201
|
+
|
|
2202
|
+
.holo-bar {
|
|
2203
|
+
position: absolute;
|
|
2204
|
+
height: 3px;
|
|
2205
|
+
background: linear-gradient(90deg, transparent, #00c8ff, transparent);
|
|
2206
|
+
}
|
|
2207
|
+
|
|
2208
|
+
.hb1 {
|
|
2209
|
+
bottom: 40px;
|
|
2210
|
+
left: 20px;
|
|
2211
|
+
right: 20px;
|
|
2212
|
+
opacity: 0.4;
|
|
2213
|
+
}
|
|
2214
|
+
|
|
2215
|
+
.hb2 {
|
|
2216
|
+
top: 40px;
|
|
2217
|
+
left: 40px;
|
|
2218
|
+
right: 40px;
|
|
2219
|
+
opacity: 0.3;
|
|
2220
|
+
}
|
|
2221
|
+
|
|
2222
|
+
/* 30 RISOGRAPH / PRINT ERROR */
|
|
2223
|
+
.preview-riso {
|
|
2224
|
+
background: #f7f2e8;
|
|
2225
|
+
overflow: hidden;
|
|
2226
|
+
}
|
|
2227
|
+
|
|
2228
|
+
.riso-layer1 {
|
|
2229
|
+
position: absolute;
|
|
2230
|
+
inset: 0;
|
|
2231
|
+
}
|
|
2232
|
+
|
|
2233
|
+
.riso-circle-1 {
|
|
2234
|
+
position: absolute;
|
|
2235
|
+
width: 140px;
|
|
2236
|
+
height: 140px;
|
|
2237
|
+
border-radius: 50%;
|
|
2238
|
+
background: #e8344a;
|
|
2239
|
+
top: 50%;
|
|
2240
|
+
left: 30%;
|
|
2241
|
+
transform: translate(-50%, -50%);
|
|
2242
|
+
mix-blend-mode: multiply;
|
|
2243
|
+
opacity: 0.85;
|
|
2244
|
+
}
|
|
2245
|
+
|
|
2246
|
+
.riso-circle-2 {
|
|
2247
|
+
position: absolute;
|
|
2248
|
+
width: 130px;
|
|
2249
|
+
height: 130px;
|
|
2250
|
+
border-radius: 50%;
|
|
2251
|
+
background: #0d5c9e;
|
|
2252
|
+
top: 50%;
|
|
2253
|
+
left: 60%;
|
|
2254
|
+
transform: translate(-50%, -50%);
|
|
2255
|
+
mix-blend-mode: multiply;
|
|
2256
|
+
opacity: 0.85;
|
|
2257
|
+
}
|
|
2258
|
+
|
|
2259
|
+
.riso-circle-3 {
|
|
2260
|
+
position: absolute;
|
|
2261
|
+
width: 110px;
|
|
2262
|
+
height: 110px;
|
|
2263
|
+
border-radius: 50%;
|
|
2264
|
+
background: #f5d020;
|
|
2265
|
+
top: 55%;
|
|
2266
|
+
left: 46%;
|
|
2267
|
+
transform: translate(-50%, -50%);
|
|
2268
|
+
mix-blend-mode: multiply;
|
|
2269
|
+
opacity: 0.75;
|
|
2270
|
+
}
|
|
2271
|
+
|
|
2272
|
+
.riso-offset {
|
|
2273
|
+
position: absolute;
|
|
2274
|
+
top: 20px;
|
|
2275
|
+
left: 0;
|
|
2276
|
+
right: 0;
|
|
2277
|
+
text-align: center;
|
|
2278
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
2279
|
+
font-size: 36px;
|
|
2280
|
+
letter-spacing: 4px;
|
|
2281
|
+
color: rgba(232, 52, 74, 0.25);
|
|
2282
|
+
transform: translate(3px, 3px);
|
|
2283
|
+
}
|
|
2284
|
+
|
|
2285
|
+
.riso-text {
|
|
2286
|
+
position: absolute;
|
|
2287
|
+
top: 20px;
|
|
2288
|
+
left: 0;
|
|
2289
|
+
right: 0;
|
|
2290
|
+
text-align: center;
|
|
2291
|
+
font-family: 'Bebas Neue', sans-serif;
|
|
2292
|
+
font-size: 36px;
|
|
2293
|
+
letter-spacing: 4px;
|
|
2294
|
+
color: #1a1a1a;
|
|
2295
|
+
}
|
|
2296
|
+
|
|
2297
|
+
.riso-label {
|
|
2298
|
+
position: absolute;
|
|
2299
|
+
bottom: 20px;
|
|
2300
|
+
left: 0;
|
|
2301
|
+
right: 0;
|
|
2302
|
+
text-align: center;
|
|
2303
|
+
font-family: 'Space Mono', monospace;
|
|
2304
|
+
font-size: 9px;
|
|
2305
|
+
letter-spacing: 4px;
|
|
2306
|
+
color: #6a5a40;
|
|
2307
|
+
}
|
|
2308
|
+
|
|
2309
|
+
footer {
|
|
2310
|
+
text-align: center;
|
|
2311
|
+
margin-top: 60px;
|
|
2312
|
+
color: var(--muted);
|
|
2313
|
+
font-family: 'Space Mono', monospace;
|
|
2314
|
+
font-size: 11px;
|
|
2315
|
+
letter-spacing: 2px;
|
|
2316
|
+
}
|
|
2317
|
+
|
|
2318
|
+
/* ══════════════════════════════════════════
|
|
2319
|
+
slides-grab originals 31–35
|
|
2320
|
+
══════════════════════════════════════════ */
|
|
2321
|
+
|
|
2322
|
+
/* 31 EXECUTIVE MINIMAL */
|
|
2323
|
+
.preview-executive {
|
|
2324
|
+
background: #f5f5f0;
|
|
2325
|
+
}
|
|
2326
|
+
|
|
2327
|
+
.exec-block {
|
|
2328
|
+
position: absolute;
|
|
2329
|
+
top: 24px;
|
|
2330
|
+
right: 24px;
|
|
2331
|
+
width: 120px;
|
|
2332
|
+
height: 80px;
|
|
2333
|
+
background: #1a1a1a;
|
|
2334
|
+
display: flex;
|
|
2335
|
+
align-items: center;
|
|
2336
|
+
justify-content: center;
|
|
2337
|
+
}
|
|
2338
|
+
|
|
2339
|
+
.exec-block-text {
|
|
2340
|
+
font-family: 'Noto Sans KR', sans-serif;
|
|
2341
|
+
font-size: 11px;
|
|
2342
|
+
font-weight: 700;
|
|
2343
|
+
color: #fff;
|
|
2344
|
+
letter-spacing: 2px;
|
|
2345
|
+
}
|
|
2346
|
+
|
|
2347
|
+
.exec-title {
|
|
2348
|
+
position: absolute;
|
|
2349
|
+
top: 30px;
|
|
2350
|
+
left: 30px;
|
|
2351
|
+
font-family: 'Noto Sans KR', sans-serif;
|
|
2352
|
+
font-size: 28px;
|
|
2353
|
+
font-weight: 700;
|
|
2354
|
+
color: #1a1a1a;
|
|
2355
|
+
line-height: 1.2;
|
|
2356
|
+
}
|
|
2357
|
+
|
|
2358
|
+
.exec-sub {
|
|
2359
|
+
position: absolute;
|
|
2360
|
+
bottom: 30px;
|
|
2361
|
+
left: 30px;
|
|
2362
|
+
font-family: 'Space Mono', monospace;
|
|
2363
|
+
font-size: 9px;
|
|
2364
|
+
color: #999;
|
|
2365
|
+
letter-spacing: 3px;
|
|
2366
|
+
}
|
|
2367
|
+
|
|
2368
|
+
.exec-line {
|
|
2369
|
+
position: absolute;
|
|
2370
|
+
bottom: 50px;
|
|
2371
|
+
left: 30px;
|
|
2372
|
+
width: 60px;
|
|
2373
|
+
height: 1px;
|
|
2374
|
+
background: #d4d4d0;
|
|
2375
|
+
}
|
|
2376
|
+
|
|
2377
|
+
/* 32 SAGE PROFESSIONAL */
|
|
2378
|
+
.preview-sage {
|
|
2379
|
+
background: #b8c4b8;
|
|
2380
|
+
}
|
|
2381
|
+
|
|
2382
|
+
.sage-card {
|
|
2383
|
+
position: absolute;
|
|
2384
|
+
background: #f8faf8;
|
|
2385
|
+
border-radius: 8px;
|
|
2386
|
+
}
|
|
2387
|
+
|
|
2388
|
+
.sage-c1 {
|
|
2389
|
+
width: 140px;
|
|
2390
|
+
height: 90px;
|
|
2391
|
+
top: 30px;
|
|
2392
|
+
left: 30px;
|
|
2393
|
+
}
|
|
2394
|
+
|
|
2395
|
+
.sage-c2 {
|
|
2396
|
+
width: 100px;
|
|
2397
|
+
height: 60px;
|
|
2398
|
+
bottom: 30px;
|
|
2399
|
+
right: 30px;
|
|
2400
|
+
}
|
|
2401
|
+
|
|
2402
|
+
.sage-title {
|
|
2403
|
+
position: absolute;
|
|
2404
|
+
top: 44px;
|
|
2405
|
+
left: 46px;
|
|
2406
|
+
font-family: 'Noto Sans KR', sans-serif;
|
|
2407
|
+
font-size: 16px;
|
|
2408
|
+
font-weight: 700;
|
|
2409
|
+
color: #1a1a1a;
|
|
2410
|
+
}
|
|
2411
|
+
|
|
2412
|
+
.sage-sub {
|
|
2413
|
+
position: absolute;
|
|
2414
|
+
top: 68px;
|
|
2415
|
+
left: 46px;
|
|
2416
|
+
font-family: 'Space Mono', monospace;
|
|
2417
|
+
font-size: 9px;
|
|
2418
|
+
color: #3d3d3d;
|
|
2419
|
+
letter-spacing: 1px;
|
|
2420
|
+
}
|
|
2421
|
+
|
|
2422
|
+
.sage-dot {
|
|
2423
|
+
position: absolute;
|
|
2424
|
+
width: 8px;
|
|
2425
|
+
height: 8px;
|
|
2426
|
+
border-radius: 50%;
|
|
2427
|
+
background: #2d2d2d;
|
|
2428
|
+
bottom: 45px;
|
|
2429
|
+
right: 45px;
|
|
2430
|
+
}
|
|
2431
|
+
|
|
2432
|
+
/* 33 MODERN DARK */
|
|
2433
|
+
.preview-modern-dark {
|
|
2434
|
+
background: #0f0f0f;
|
|
2435
|
+
}
|
|
2436
|
+
|
|
2437
|
+
.md-surface {
|
|
2438
|
+
position: absolute;
|
|
2439
|
+
background: #1a1a1a;
|
|
2440
|
+
border: 1px solid #333;
|
|
2441
|
+
border-radius: 8px;
|
|
2442
|
+
}
|
|
2443
|
+
|
|
2444
|
+
.md-s1 {
|
|
2445
|
+
width: 140px;
|
|
2446
|
+
height: 80px;
|
|
2447
|
+
top: 30px;
|
|
2448
|
+
left: 30px;
|
|
2449
|
+
}
|
|
2450
|
+
|
|
2451
|
+
.md-s2 {
|
|
2452
|
+
width: 100px;
|
|
2453
|
+
height: 65px;
|
|
2454
|
+
bottom: 30px;
|
|
2455
|
+
right: 30px;
|
|
2456
|
+
background: #252525;
|
|
2457
|
+
}
|
|
2458
|
+
|
|
2459
|
+
.md-title {
|
|
2460
|
+
position: absolute;
|
|
2461
|
+
top: 46px;
|
|
2462
|
+
left: 46px;
|
|
2463
|
+
font-family: 'Noto Sans KR', sans-serif;
|
|
2464
|
+
font-size: 18px;
|
|
2465
|
+
font-weight: 700;
|
|
2466
|
+
color: #fff;
|
|
2467
|
+
}
|
|
2468
|
+
|
|
2469
|
+
.md-sub {
|
|
2470
|
+
position: absolute;
|
|
2471
|
+
top: 70px;
|
|
2472
|
+
left: 46px;
|
|
2473
|
+
font-family: 'Space Mono', monospace;
|
|
2474
|
+
font-size: 9px;
|
|
2475
|
+
color: #b0b0b0;
|
|
2476
|
+
letter-spacing: 2px;
|
|
2477
|
+
}
|
|
2478
|
+
|
|
2479
|
+
.md-accent {
|
|
2480
|
+
position: absolute;
|
|
2481
|
+
bottom: 30px;
|
|
2482
|
+
left: 30px;
|
|
2483
|
+
width: 3px;
|
|
2484
|
+
height: 40px;
|
|
2485
|
+
background: #fff;
|
|
2486
|
+
}
|
|
2487
|
+
|
|
2488
|
+
/* 34 CORPORATE BLUE */
|
|
2489
|
+
.preview-corporate {
|
|
2490
|
+
background: #fff;
|
|
2491
|
+
}
|
|
2492
|
+
|
|
2493
|
+
.corp-bar {
|
|
2494
|
+
position: absolute;
|
|
2495
|
+
top: 0;
|
|
2496
|
+
left: 0;
|
|
2497
|
+
right: 0;
|
|
2498
|
+
height: 4px;
|
|
2499
|
+
background: #2563eb;
|
|
2500
|
+
}
|
|
2501
|
+
|
|
2502
|
+
.corp-title {
|
|
2503
|
+
position: absolute;
|
|
2504
|
+
top: 30px;
|
|
2505
|
+
left: 30px;
|
|
2506
|
+
font-family: 'Noto Sans KR', sans-serif;
|
|
2507
|
+
font-size: 24px;
|
|
2508
|
+
font-weight: 700;
|
|
2509
|
+
color: #1e2a3a;
|
|
2510
|
+
}
|
|
2511
|
+
|
|
2512
|
+
.corp-sub {
|
|
2513
|
+
position: absolute;
|
|
2514
|
+
top: 62px;
|
|
2515
|
+
left: 30px;
|
|
2516
|
+
font-family: 'Noto Sans KR', sans-serif;
|
|
2517
|
+
font-size: 12px;
|
|
2518
|
+
color: #5a6b7d;
|
|
2519
|
+
}
|
|
2520
|
+
|
|
2521
|
+
.corp-block {
|
|
2522
|
+
position: absolute;
|
|
2523
|
+
bottom: 24px;
|
|
2524
|
+
left: 30px;
|
|
2525
|
+
right: 30px;
|
|
2526
|
+
height: 60px;
|
|
2527
|
+
background: #f7f9fc;
|
|
2528
|
+
border: 1px solid #e2e8f0;
|
|
2529
|
+
border-radius: 6px;
|
|
2530
|
+
display: flex;
|
|
2531
|
+
align-items: center;
|
|
2532
|
+
padding-left: 16px;
|
|
2533
|
+
}
|
|
2534
|
+
|
|
2535
|
+
.corp-dot {
|
|
2536
|
+
width: 10px;
|
|
2537
|
+
height: 10px;
|
|
2538
|
+
border-radius: 50%;
|
|
2539
|
+
background: #2563eb;
|
|
2540
|
+
margin-right: 10px;
|
|
2541
|
+
}
|
|
2542
|
+
|
|
2543
|
+
.corp-line {
|
|
2544
|
+
height: 3px;
|
|
2545
|
+
border-radius: 2px;
|
|
2546
|
+
background: #e2e8f0;
|
|
2547
|
+
}
|
|
2548
|
+
|
|
2549
|
+
.corp-l1 {
|
|
2550
|
+
width: 80px;
|
|
2551
|
+
}
|
|
2552
|
+
|
|
2553
|
+
.corp-l2 {
|
|
2554
|
+
width: 50px;
|
|
2555
|
+
margin-top: 6px;
|
|
2556
|
+
}
|
|
2557
|
+
|
|
2558
|
+
/* 35 WARM NEUTRAL */
|
|
2559
|
+
.preview-warm {
|
|
2560
|
+
background: #faf8f5;
|
|
2561
|
+
}
|
|
2562
|
+
|
|
2563
|
+
.warm-panel {
|
|
2564
|
+
position: absolute;
|
|
2565
|
+
background: #f0ebe3;
|
|
2566
|
+
border-radius: 10px;
|
|
2567
|
+
}
|
|
2568
|
+
|
|
2569
|
+
.warm-p1 {
|
|
2570
|
+
width: 130px;
|
|
2571
|
+
height: 80px;
|
|
2572
|
+
top: 30px;
|
|
2573
|
+
left: 30px;
|
|
2574
|
+
}
|
|
2575
|
+
|
|
2576
|
+
.warm-p2 {
|
|
2577
|
+
width: 90px;
|
|
2578
|
+
height: 55px;
|
|
2579
|
+
bottom: 30px;
|
|
2580
|
+
right: 30px;
|
|
2581
|
+
}
|
|
2582
|
+
|
|
2583
|
+
.warm-title {
|
|
2584
|
+
position: absolute;
|
|
2585
|
+
top: 46px;
|
|
2586
|
+
left: 46px;
|
|
2587
|
+
font-family: 'Noto Sans KR', sans-serif;
|
|
2588
|
+
font-size: 18px;
|
|
2589
|
+
font-weight: 700;
|
|
2590
|
+
color: #2d2a26;
|
|
2591
|
+
}
|
|
2592
|
+
|
|
2593
|
+
.warm-accent {
|
|
2594
|
+
position: absolute;
|
|
2595
|
+
top: 72px;
|
|
2596
|
+
left: 46px;
|
|
2597
|
+
width: 24px;
|
|
2598
|
+
height: 3px;
|
|
2599
|
+
background: #c45a3b;
|
|
2600
|
+
border-radius: 2px;
|
|
2601
|
+
}
|
|
2602
|
+
|
|
2603
|
+
.warm-sub {
|
|
2604
|
+
position: absolute;
|
|
2605
|
+
bottom: 30px;
|
|
2606
|
+
left: 30px;
|
|
2607
|
+
font-family: 'Space Mono', monospace;
|
|
2608
|
+
font-size: 9px;
|
|
2609
|
+
color: #6b6560;
|
|
2610
|
+
letter-spacing: 2px;
|
|
2611
|
+
}
|
|
2612
|
+
</style>
|
|
2613
|
+
</head>
|
|
2614
|
+
|
|
2615
|
+
<body>
|
|
2616
|
+
|
|
2617
|
+
<header>
|
|
2618
|
+
<span class="tag">slides-grab Design Styles</span>
|
|
2619
|
+
<h1>Design <span>Styles</span><br>Collection 35</h1>
|
|
2620
|
+
<p>35 bundled design styles for slides-grab. 30 derived from <a href="https://github.com/corazzon/pptx-design-styles" target="_blank" style="color: var(--accent); text-decoration: none;">corazzon/pptx-design-styles</a> (MIT), 5 slides-grab originals.</p>
|
|
2621
|
+
</header>
|
|
2622
|
+
|
|
2623
|
+
<div class="grid">
|
|
2624
|
+
|
|
2625
|
+
<!-- 01 Glassmorphism -->
|
|
2626
|
+
<div class="card">
|
|
2627
|
+
<div class="preview preview-glass">
|
|
2628
|
+
<div class="glass-el glass-el1"></div>
|
|
2629
|
+
<div class="glass-el glass-el2"></div>
|
|
2630
|
+
<div class="glass-el glass-el3"></div>
|
|
2631
|
+
</div>
|
|
2632
|
+
<div class="card-info">
|
|
2633
|
+
<div class="card-num">01 — GLASSMORPHISM</div>
|
|
2634
|
+
<div class="card-title">Glassmorphism</div>
|
|
2635
|
+
<div class="card-desc">Frosted glass cards with blur effects on dark gradients. Premium, layered depth.</div>
|
|
2636
|
+
<div class="tags"><span class="tag-pill">backdrop-filter</span><span class="tag-pill">dark bg</span><span
|
|
2637
|
+
class="tag-pill">premium</span></div>
|
|
2638
|
+
</div>
|
|
2639
|
+
</div>
|
|
2640
|
+
|
|
2641
|
+
<!-- 02 Neo-Brutalism -->
|
|
2642
|
+
<div class="card">
|
|
2643
|
+
<div class="preview preview-brutal">
|
|
2644
|
+
<div class="brutal-box brutal-box1">BOLD IDEA</div>
|
|
2645
|
+
<div class="brutal-line"></div>
|
|
2646
|
+
<div class="brutal-box brutal-box2">ACTION</div>
|
|
2647
|
+
</div>
|
|
2648
|
+
<div class="card-info">
|
|
2649
|
+
<div class="card-num">02 — NEO-BRUTALISM</div>
|
|
2650
|
+
<div class="card-title">Neo-Brutalism</div>
|
|
2651
|
+
<div class="card-desc">Thick borders, hard shadows, raw layouts on high-saturation backgrounds. Bold and memorable.</div>
|
|
2652
|
+
<div class="tags"><span class="tag-pill">bold border</span><span class="tag-pill">hard shadow</span><span
|
|
2653
|
+
class="tag-pill">high contrast</span></div>
|
|
2654
|
+
</div>
|
|
2655
|
+
</div>
|
|
2656
|
+
|
|
2657
|
+
<!-- 03 Bento Grid -->
|
|
2658
|
+
<div class="card">
|
|
2659
|
+
<div class="preview preview-bento">
|
|
2660
|
+
<div class="bento-grid">
|
|
2661
|
+
<div class="bento-cell bc1"></div>
|
|
2662
|
+
<div class="bento-cell bc2"></div>
|
|
2663
|
+
<div class="bento-cell bc3"></div>
|
|
2664
|
+
<div class="bento-cell bc5"></div>
|
|
2665
|
+
<div class="bento-cell bc4"></div>
|
|
2666
|
+
</div>
|
|
2667
|
+
</div>
|
|
2668
|
+
<div class="card-info">
|
|
2669
|
+
<div class="card-num">03 — BENTO GRID</div>
|
|
2670
|
+
<div class="card-title">Bento Grid</div>
|
|
2671
|
+
<div class="card-desc">Modular grid layout with mixed-size cards. Present multiple points elegantly in one slide.</div>
|
|
2672
|
+
<div class="tags"><span class="tag-pill">modular</span><span class="tag-pill">multi-info</span><span
|
|
2673
|
+
class="tag-pill">apple style</span></div>
|
|
2674
|
+
</div>
|
|
2675
|
+
</div>
|
|
2676
|
+
|
|
2677
|
+
<!-- 04 Dark Academia -->
|
|
2678
|
+
<div class="card">
|
|
2679
|
+
<div class="preview preview-academia">
|
|
2680
|
+
<div class="academia-overlay"></div>
|
|
2681
|
+
<div class="academia-border"></div>
|
|
2682
|
+
<div class="academia-text at1">VERITAS</div>
|
|
2683
|
+
<div class="academia-text at2">EST · MMX · MMXXV</div>
|
|
2684
|
+
</div>
|
|
2685
|
+
<div class="card-info">
|
|
2686
|
+
<div class="card-num">04 — DARK ACADEMIA</div>
|
|
2687
|
+
<div class="card-title">Dark Academia</div>
|
|
2688
|
+
<div class="card-desc">Deep brown-gold palette, serif fonts, ornate borders. Scholarly and refined.</div>
|
|
2689
|
+
<div class="tags"><span class="tag-pill">serif font</span><span class="tag-pill">dark warm</span><span
|
|
2690
|
+
class="tag-pill">editorial</span></div>
|
|
2691
|
+
</div>
|
|
2692
|
+
</div>
|
|
2693
|
+
|
|
2694
|
+
<!-- 05 Gradient Mesh -->
|
|
2695
|
+
<div class="card">
|
|
2696
|
+
<div class="preview preview-mesh">
|
|
2697
|
+
<div class="mesh-bg"></div>
|
|
2698
|
+
<div class="mesh-text">GRADIENT MESH</div>
|
|
2699
|
+
</div>
|
|
2700
|
+
<div class="card-info">
|
|
2701
|
+
<div class="card-num">05 — GRADIENT MESH</div>
|
|
2702
|
+
<div class="card-title">Gradient Mesh</div>
|
|
2703
|
+
<div class="card-desc">Multi-color mesh gradient backgrounds. Vibrant and artistic with white text overlay.</div>
|
|
2704
|
+
<div class="tags"><span class="tag-pill">vibrant</span><span class="tag-pill">artistic</span><span
|
|
2705
|
+
class="tag-pill">brand</span></div>
|
|
2706
|
+
</div>
|
|
2707
|
+
</div>
|
|
2708
|
+
|
|
2709
|
+
<!-- 06 Claymorphism -->
|
|
2710
|
+
<div class="card">
|
|
2711
|
+
<div class="preview preview-clay">
|
|
2712
|
+
<div class="clay-el clay1">🎯</div>
|
|
2713
|
+
<div class="clay-el clay2">✦</div>
|
|
2714
|
+
<div class="clay-el clay3">💡</div>
|
|
2715
|
+
</div>
|
|
2716
|
+
<div class="card-info">
|
|
2717
|
+
<div class="card-num">06 — CLAYMORPHISM</div>
|
|
2718
|
+
<div class="card-title">Claymorphism</div>
|
|
2719
|
+
<div class="card-desc">3D rounded shapes with colored soft shadows. Friendly and playful.</div>
|
|
2720
|
+
<div class="tags"><span class="tag-pill">3d effect</span><span class="tag-pill">friendly</span><span
|
|
2721
|
+
class="tag-pill">rounded</span></div>
|
|
2722
|
+
</div>
|
|
2723
|
+
</div>
|
|
2724
|
+
|
|
2725
|
+
<!-- 07 Swiss/International -->
|
|
2726
|
+
<div class="card">
|
|
2727
|
+
<div class="preview preview-swiss">
|
|
2728
|
+
<div class="swiss-red"></div>
|
|
2729
|
+
<div class="swiss-line"></div>
|
|
2730
|
+
<div class="swiss-title">GRID<br>SYSTEM</div>
|
|
2731
|
+
<div class="swiss-sub">HELVETICA · GRID · ORDER</div>
|
|
2732
|
+
<div class="swiss-circle"></div>
|
|
2733
|
+
</div>
|
|
2734
|
+
<div class="card-info">
|
|
2735
|
+
<div class="card-num">07 — SWISS STYLE</div>
|
|
2736
|
+
<div class="card-title">Swiss International</div>
|
|
2737
|
+
<div class="card-desc">Grid-aligned, functional layout with red vertical accent bar. Helvetica. Clean.</div>
|
|
2738
|
+
<div class="tags"><span class="tag-pill">grid based</span><span class="tag-pill">typography</span><span
|
|
2739
|
+
class="tag-pill">corporate</span></div>
|
|
2740
|
+
</div>
|
|
2741
|
+
</div>
|
|
2742
|
+
|
|
2743
|
+
<!-- 08 Aurora/Neon -->
|
|
2744
|
+
<div class="card">
|
|
2745
|
+
<div class="preview preview-aurora">
|
|
2746
|
+
<div class="aurora-glow ag1"></div>
|
|
2747
|
+
<div class="aurora-glow ag2"></div>
|
|
2748
|
+
<div class="aurora-glow ag3"></div>
|
|
2749
|
+
<div class="aurora-text">AURORA</div>
|
|
2750
|
+
</div>
|
|
2751
|
+
<div class="card-info">
|
|
2752
|
+
<div class="card-num">08 — AURORA / NEON</div>
|
|
2753
|
+
<div class="card-title">Aurora Neon Glow</div>
|
|
2754
|
+
<div class="card-desc">Blurred neon glow blobs on deep-space black. Gradient text in green-cyan-violet.</div>
|
|
2755
|
+
<div class="tags"><span class="tag-pill">dark</span><span class="tag-pill">glow</span><span
|
|
2756
|
+
class="tag-pill">tech/AI</span></div>
|
|
2757
|
+
</div>
|
|
2758
|
+
</div>
|
|
2759
|
+
|
|
2760
|
+
<!-- 09 Retro Y2K -->
|
|
2761
|
+
<div class="card">
|
|
2762
|
+
<div class="preview preview-y2k">
|
|
2763
|
+
<div class="y2k-stripe ys1"></div>
|
|
2764
|
+
<div class="y2k-stripe ys2"></div>
|
|
2765
|
+
<span class="y2k-star yk1">✦</span>
|
|
2766
|
+
<span class="y2k-star yk2">★</span>
|
|
2767
|
+
<div class="y2k-text">RETRO Y2K</div>
|
|
2768
|
+
</div>
|
|
2769
|
+
<div class="card-info">
|
|
2770
|
+
<div class="card-num">09 — RETRO Y2K</div>
|
|
2771
|
+
<div class="card-title">Retro Y2K</div>
|
|
2772
|
+
<div class="card-desc">Rainbow stripe bars, star motifs, double text shadows. Nostalgic pop energy.
|
|
2773
|
+
</div>
|
|
2774
|
+
<div class="tags"><span class="tag-pill">retro</span><span class="tag-pill">pop culture</span><span
|
|
2775
|
+
class="tag-pill">playful</span></div>
|
|
2776
|
+
</div>
|
|
2777
|
+
</div>
|
|
2778
|
+
|
|
2779
|
+
<!-- 10 Nordic Minimalism -->
|
|
2780
|
+
<div class="card">
|
|
2781
|
+
<div class="preview preview-nordic">
|
|
2782
|
+
<div class="nordic-blob"></div>
|
|
2783
|
+
<div class="nordic-dot nd1"></div>
|
|
2784
|
+
<div class="nordic-dot nd2"></div>
|
|
2785
|
+
<div class="nordic-dot nd3"></div>
|
|
2786
|
+
<div class="nordic-line"></div>
|
|
2787
|
+
<div class="nordic-word">SIMPLICITY · CALM · FORM</div>
|
|
2788
|
+
</div>
|
|
2789
|
+
<div class="card-info">
|
|
2790
|
+
<div class="card-num">10 — NORDIC MINIMALISM</div>
|
|
2791
|
+
<div class="card-title">Nordic Minimalism</div>
|
|
2792
|
+
<div class="card-desc">Warm cream tones, organic blob shapes, generous whitespace. Calm and natural.</div>
|
|
2793
|
+
<div class="tags"><span class="tag-pill">warm neutral</span><span class="tag-pill">organic</span><span
|
|
2794
|
+
class="tag-pill">calm</span></div>
|
|
2795
|
+
</div>
|
|
2796
|
+
</div>
|
|
2797
|
+
|
|
2798
|
+
<!-- 11 Typographic Bold -->
|
|
2799
|
+
<div class="card">
|
|
2800
|
+
<div class="preview preview-typo">
|
|
2801
|
+
<div class="typo-big">BIG<br><span>TYPE</span></div>
|
|
2802
|
+
<div class="typo-small">TYPOGRAPHY FIRST</div>
|
|
2803
|
+
</div>
|
|
2804
|
+
<div class="card-info">
|
|
2805
|
+
<div class="card-num">11 — TYPOGRAPHIC BOLD</div>
|
|
2806
|
+
<div class="card-title">Typographic Bold</div>
|
|
2807
|
+
<div class="card-desc">Oversized type fills the slide. One accent-color word breaks the monochrome.</div>
|
|
2808
|
+
<div class="tags"><span class="tag-pill">type-driven</span><span class="tag-pill">editorial</span><span
|
|
2809
|
+
class="tag-pill">bold</span></div>
|
|
2810
|
+
</div>
|
|
2811
|
+
</div>
|
|
2812
|
+
|
|
2813
|
+
<!-- 12 Duotone / Color Split -->
|
|
2814
|
+
<div class="card">
|
|
2815
|
+
<div class="preview preview-duotone">
|
|
2816
|
+
<div class="duo-left">
|
|
2817
|
+
<div class="duo-text">IDEA</div>
|
|
2818
|
+
</div>
|
|
2819
|
+
<div class="duo-right">
|
|
2820
|
+
<div class="duo-text">ACTION</div>
|
|
2821
|
+
</div>
|
|
2822
|
+
<div class="duo-divider"></div>
|
|
2823
|
+
</div>
|
|
2824
|
+
<div class="card-info">
|
|
2825
|
+
<div class="card-num">12 — DUOTONE / SPLIT</div>
|
|
2826
|
+
<div class="card-title">Duotone / Color Split</div>
|
|
2827
|
+
<div class="card-desc">Strict 50/50 vertical split with white divider. One concept per panel.</div>
|
|
2828
|
+
<div class="tags"><span class="tag-pill">contrast</span><span class="tag-pill">split layout</span><span
|
|
2829
|
+
class="tag-pill">dramatic</span></div>
|
|
2830
|
+
</div>
|
|
2831
|
+
</div>
|
|
2832
|
+
|
|
2833
|
+
<!-- 13 Monochrome Minimal -->
|
|
2834
|
+
<div class="card">
|
|
2835
|
+
<div class="preview preview-mono">
|
|
2836
|
+
<div class="mono-circle-out"></div>
|
|
2837
|
+
<div class="mono-center">
|
|
2838
|
+
<div class="mono-label">LESS IS MORE</div>
|
|
2839
|
+
<div class="mono-rect"></div>
|
|
2840
|
+
<div class="mono-rect2"></div>
|
|
2841
|
+
<div class="mono-rect3"></div>
|
|
2842
|
+
</div>
|
|
2843
|
+
</div>
|
|
2844
|
+
<div class="card-info">
|
|
2845
|
+
<div class="card-num">13 — MONOCHROME MINIMAL</div>
|
|
2846
|
+
<div class="card-title">Monochrome Minimal</div>
|
|
2847
|
+
<div class="card-desc">Black, white, and grey only. Thin circles, width-varying bars, extreme negative space.</div>
|
|
2848
|
+
<div class="tags"><span class="tag-pill">black & white</span><span class="tag-pill">restrained</span><span
|
|
2849
|
+
class="tag-pill">luxury</span></div>
|
|
2850
|
+
</div>
|
|
2851
|
+
</div>
|
|
2852
|
+
|
|
2853
|
+
<!-- 14 Cyberpunk Outline -->
|
|
2854
|
+
<div class="card">
|
|
2855
|
+
<div class="preview preview-cyber">
|
|
2856
|
+
<div class="cyber-grid"></div>
|
|
2857
|
+
<div class="cyber-corner cc-tl"></div>
|
|
2858
|
+
<div class="cyber-corner cc-tr"></div>
|
|
2859
|
+
<div class="cyber-corner cc-bl"></div>
|
|
2860
|
+
<div class="cyber-corner cc-br"></div>
|
|
2861
|
+
<div class="cyber-title">CYBERPUNK</div>
|
|
2862
|
+
<div class="cyber-sub">SYSTEM · ONLINE · 2025</div>
|
|
2863
|
+
</div>
|
|
2864
|
+
<div class="card-info">
|
|
2865
|
+
<div class="card-num">14 — CYBERPUNK OUTLINE</div>
|
|
2866
|
+
<div class="card-title">Cyberpunk Outline</div>
|
|
2867
|
+
<div class="card-desc">Grid overlay on dark background, outlined neon text. HUD aesthetic.
|
|
2868
|
+
</div>
|
|
2869
|
+
<div class="tags"><span class="tag-pill">HUD style</span><span class="tag-pill">outline text</span><span
|
|
2870
|
+
class="tag-pill">sci-fi</span></div>
|
|
2871
|
+
</div>
|
|
2872
|
+
</div>
|
|
2873
|
+
|
|
2874
|
+
<!-- 15 Editorial Magazine -->
|
|
2875
|
+
<div class="card">
|
|
2876
|
+
<div class="preview preview-editorial">
|
|
2877
|
+
<div class="edit-bg-block"></div>
|
|
2878
|
+
<div class="edit-title">THE<br>BRIEF</div>
|
|
2879
|
+
<div class="edit-rule"></div>
|
|
2880
|
+
<div class="edit-body">VOL.12 · SPRING 2025<br>DESIGN · STRATEGY</div>
|
|
2881
|
+
<div class="edit-vol">EDITORIAL — LAYOUT — MAGAZINE</div>
|
|
2882
|
+
</div>
|
|
2883
|
+
<div class="card-info">
|
|
2884
|
+
<div class="card-num">15 — EDITORIAL MAGAZINE</div>
|
|
2885
|
+
<div class="card-title">Editorial Magazine</div>
|
|
2886
|
+
<div class="card-desc">Serif title, red accent rule, two-column layout. Magazine page feel.
|
|
2887
|
+
</div>
|
|
2888
|
+
<div class="tags"><span class="tag-pill">asymmetric</span><span class="tag-pill">serif</span><span
|
|
2889
|
+
class="tag-pill">storytelling</span></div>
|
|
2890
|
+
</div>
|
|
2891
|
+
</div>
|
|
2892
|
+
|
|
2893
|
+
<!-- 16 Pastel Soft UI -->
|
|
2894
|
+
<div class="card">
|
|
2895
|
+
<div class="preview preview-pastel">
|
|
2896
|
+
<div class="pastel-dot pd1"></div>
|
|
2897
|
+
<div class="pastel-dot pd2"></div>
|
|
2898
|
+
<div class="pastel-card pc1"></div>
|
|
2899
|
+
<div class="pastel-card pc3"></div>
|
|
2900
|
+
<div class="pastel-card pc2"></div>
|
|
2901
|
+
</div>
|
|
2902
|
+
<div class="card-info">
|
|
2903
|
+
<div class="card-num">16 — PASTEL SOFT UI</div>
|
|
2904
|
+
<div class="card-title">Pastel Soft UI</div>
|
|
2905
|
+
<div class="card-desc">Soft pastel gradients with frosted glass cards. Light, airy, app-like.</div>
|
|
2906
|
+
<div class="tags"><span class="tag-pill">pastel</span><span class="tag-pill">soft</span><span
|
|
2907
|
+
class="tag-pill">app UI</span></div>
|
|
2908
|
+
</div>
|
|
2909
|
+
</div>
|
|
2910
|
+
|
|
2911
|
+
<!-- 17 Dark Neon Miami -->
|
|
2912
|
+
<div class="card">
|
|
2913
|
+
<div class="preview preview-miami">
|
|
2914
|
+
<div class="miami-sun"></div>
|
|
2915
|
+
<div class="miami-lines">
|
|
2916
|
+
<div class="miami-line ml1"></div>
|
|
2917
|
+
<div class="miami-line ml2"></div>
|
|
2918
|
+
<div class="miami-line ml3"></div>
|
|
2919
|
+
<div class="miami-line ml4"></div>
|
|
2920
|
+
</div>
|
|
2921
|
+
<span class="miami-palm mp1">🌴</span>
|
|
2922
|
+
<span class="miami-palm mp2">🌴</span>
|
|
2923
|
+
<div class="miami-title">MIAMI</div>
|
|
2924
|
+
</div>
|
|
2925
|
+
<div class="card-info">
|
|
2926
|
+
<div class="card-num">17 — DARK NEON MIAMI</div>
|
|
2927
|
+
<div class="card-title">Dark Neon Miami</div>
|
|
2928
|
+
<div class="card-desc">Synthwave sunset palette with horizon lines. 80s retro-future energy.
|
|
2929
|
+
</div>
|
|
2930
|
+
<div class="tags"><span class="tag-pill">synthwave</span><span class="tag-pill">80s retro</span><span
|
|
2931
|
+
class="tag-pill">neon</span></div>
|
|
2932
|
+
</div>
|
|
2933
|
+
</div>
|
|
2934
|
+
|
|
2935
|
+
<!-- 18 Hand-crafted Organic -->
|
|
2936
|
+
<div class="card">
|
|
2937
|
+
<div class="preview preview-organic">
|
|
2938
|
+
<div class="organic-line"></div>
|
|
2939
|
+
<div class="organic-circle oc1"></div>
|
|
2940
|
+
<div class="organic-circle oc2"></div>
|
|
2941
|
+
<span class="organic-leaf ol1">🌿</span>
|
|
2942
|
+
<span class="organic-leaf ol2">🌾</span>
|
|
2943
|
+
<div class="organic-text">Handmade</div>
|
|
2944
|
+
</div>
|
|
2945
|
+
<div class="card-info">
|
|
2946
|
+
<div class="card-num">18 — HAND-CRAFTED ORGANIC</div>
|
|
2947
|
+
<div class="card-title">Hand-crafted Organic</div>
|
|
2948
|
+
<div class="card-desc">Natural textures, dashed circles, serif italic text. Earthy and artisanal.</div>
|
|
2949
|
+
<div class="tags"><span class="tag-pill">craft</span><span class="tag-pill">natural</span><span
|
|
2950
|
+
class="tag-pill">eco</span></div>
|
|
2951
|
+
</div>
|
|
2952
|
+
</div>
|
|
2953
|
+
|
|
2954
|
+
<!-- 19 Isometric 3D Flat -->
|
|
2955
|
+
<div class="card">
|
|
2956
|
+
<div class="preview preview-iso">
|
|
2957
|
+
<div class="iso-wrap">
|
|
2958
|
+
<div class="iso-face iso-top"></div>
|
|
2959
|
+
<div class="iso-face iso-left"></div>
|
|
2960
|
+
<div class="iso-face iso-right"></div>
|
|
2961
|
+
<div class="iso-face iso-top2"></div>
|
|
2962
|
+
<div class="iso-face iso-left2"></div>
|
|
2963
|
+
<div class="iso-face iso-right2"></div>
|
|
2964
|
+
</div>
|
|
2965
|
+
</div>
|
|
2966
|
+
<div class="card-info">
|
|
2967
|
+
<div class="card-num">19 — ISOMETRIC 3D FLAT</div>
|
|
2968
|
+
<div class="card-title">Isometric 3D Flat</div>
|
|
2969
|
+
<div class="card-desc">Skewed geometric blocks creating 3D illusion on dark purple.
|
|
2970
|
+
</div>
|
|
2971
|
+
<div class="tags"><span class="tag-pill">3D flat</span><span class="tag-pill">isometric</span><span
|
|
2972
|
+
class="tag-pill">tech</span></div>
|
|
2973
|
+
</div>
|
|
2974
|
+
</div>
|
|
2975
|
+
|
|
2976
|
+
<!-- 20 Vaporwave -->
|
|
2977
|
+
<div class="card">
|
|
2978
|
+
<div class="preview preview-vapor">
|
|
2979
|
+
<div class="vapor-sun"></div>
|
|
2980
|
+
<div class="vapor-line1"></div>
|
|
2981
|
+
<div class="vapor-line2"></div>
|
|
2982
|
+
<div class="vapor-grid">
|
|
2983
|
+
<div class="vg-h vg1"></div>
|
|
2984
|
+
<div class="vg-h vg2"></div>
|
|
2985
|
+
<div class="vg-h vg3"></div>
|
|
2986
|
+
<div class="vg-h vg4"></div>
|
|
2987
|
+
<div class="vg-h vg5"></div>
|
|
2988
|
+
<div class="vg-h vg6"></div>
|
|
2989
|
+
<div class="vg-h vg7"></div>
|
|
2990
|
+
<div class="vg-v vv1"></div>
|
|
2991
|
+
<div class="vg-v vv2"></div>
|
|
2992
|
+
<div class="vg-v vv3"></div>
|
|
2993
|
+
<div class="vg-v vv4"></div>
|
|
2994
|
+
<div class="vg-v vv5"></div>
|
|
2995
|
+
<div class="vg-v vv6"></div>
|
|
2996
|
+
<div class="vg-v vv7"></div>
|
|
2997
|
+
</div>
|
|
2998
|
+
<div class="vapor-title">ÆSTHETICS</div>
|
|
2999
|
+
<div class="vapor-text">VAPORWAVE</div>
|
|
3000
|
+
</div>
|
|
3001
|
+
<div class="card-info">
|
|
3002
|
+
<div class="card-num">20 — VAPORWAVE</div>
|
|
3003
|
+
<div class="card-title">Vaporwave</div>
|
|
3004
|
+
<div class="card-desc">Purple gradient with perspective grid, striped sunset circle. Dreamy subculture aesthetic.
|
|
3005
|
+
</div>
|
|
3006
|
+
<div class="tags"><span class="tag-pill">aesthetic</span><span class="tag-pill">dreamy</span><span
|
|
3007
|
+
class="tag-pill">subculture</span></div>
|
|
3008
|
+
</div>
|
|
3009
|
+
</div>
|
|
3010
|
+
|
|
3011
|
+
<!-- ══════════════ 신규 10가지 ══════════════ -->
|
|
3012
|
+
|
|
3013
|
+
<!-- 21 Art Deco Luxe -->
|
|
3014
|
+
<div class="card">
|
|
3015
|
+
<div class="preview preview-artdeco">
|
|
3016
|
+
<div class="deco-border"></div>
|
|
3017
|
+
<div class="deco-inner"></div>
|
|
3018
|
+
<div class="deco-fan-l"></div>
|
|
3019
|
+
<div class="deco-fan-r"></div>
|
|
3020
|
+
<div class="deco-rule-h deco-rule-t"></div>
|
|
3021
|
+
<div class="deco-diamond"></div>
|
|
3022
|
+
<div class="deco-title">LUXE<br>DECO</div>
|
|
3023
|
+
<div class="deco-sub">EST. MCMXXV · PRESTIGE</div>
|
|
3024
|
+
</div>
|
|
3025
|
+
<div class="card-info">
|
|
3026
|
+
<div class="card-num">21 — ART DECO LUXE</div>
|
|
3027
|
+
<div class="card-title">Art Deco Luxe</div>
|
|
3028
|
+
<div class="card-desc">Gold borders, geometric fan motifs on near-black. Gatsby-era opulence.
|
|
3029
|
+
분위기.</div>
|
|
3030
|
+
<div class="tags"><span class="tag-pill">gold</span><span class="tag-pill">geometric</span><span
|
|
3031
|
+
class="tag-pill">luxury</span></div>
|
|
3032
|
+
</div>
|
|
3033
|
+
</div>
|
|
3034
|
+
|
|
3035
|
+
<!-- 22 Brutalist Newspaper -->
|
|
3036
|
+
<div class="card">
|
|
3037
|
+
<div class="preview preview-news">
|
|
3038
|
+
<div class="news-masthead">
|
|
3039
|
+
<span class="news-title">THE DAILY</span>
|
|
3040
|
+
<span class="news-date">2025.06.01 · VOL.XII</span>
|
|
3041
|
+
</div>
|
|
3042
|
+
<div class="news-rule1"></div>
|
|
3043
|
+
<div class="news-rule2"></div>
|
|
3044
|
+
<div class="news-col1">
|
|
3045
|
+
<div class="news-headline">BREAKING DESIGN</div>
|
|
3046
|
+
<div class="news-body">Typography as the primary visual language. Columns, rules and hierarchy.</div>
|
|
3047
|
+
</div>
|
|
3048
|
+
<div class="news-divider"></div>
|
|
3049
|
+
<div class="news-col2">
|
|
3050
|
+
<div class="news-photo">📰</div>
|
|
3051
|
+
<div class="news-caption">PHOTO · EDITORIAL</div>
|
|
3052
|
+
</div>
|
|
3053
|
+
</div>
|
|
3054
|
+
<div class="card-info">
|
|
3055
|
+
<div class="card-num">22 — BRUTALIST NEWSPAPER</div>
|
|
3056
|
+
<div class="card-title">Brutalist Newspaper</div>
|
|
3057
|
+
<div class="card-desc">Newspaper masthead, columns, and serif headlines. Raw editorial layout.
|
|
3058
|
+
아이덴티티.</div>
|
|
3059
|
+
<div class="tags"><span class="tag-pill">editorial</span><span class="tag-pill">newspaper</span><span
|
|
3060
|
+
class="tag-pill">brutalist</span></div>
|
|
3061
|
+
</div>
|
|
3062
|
+
</div>
|
|
3063
|
+
|
|
3064
|
+
<!-- 23 Stained Glass / Mosaic -->
|
|
3065
|
+
<div class="card">
|
|
3066
|
+
<div class="preview preview-mosaic">
|
|
3067
|
+
<div class="mosaic-grid">
|
|
3068
|
+
<div class="mosaic-cell mc1"></div>
|
|
3069
|
+
<div class="mosaic-cell mc2"></div>
|
|
3070
|
+
<div class="mosaic-cell mc3"></div>
|
|
3071
|
+
<div class="mosaic-cell mc4"></div>
|
|
3072
|
+
<div class="mosaic-cell mc5"></div>
|
|
3073
|
+
<div class="mosaic-cell mc6"></div>
|
|
3074
|
+
<div class="mosaic-cell mc7"></div>
|
|
3075
|
+
<div class="mosaic-cell mc8"></div>
|
|
3076
|
+
<div class="mosaic-cell mc9"></div>
|
|
3077
|
+
<div class="mosaic-cell mc10"></div>
|
|
3078
|
+
<div class="mosaic-cell mc11"></div>
|
|
3079
|
+
<div class="mosaic-cell mc12"></div>
|
|
3080
|
+
<div class="mosaic-cell mc13"></div>
|
|
3081
|
+
<div class="mosaic-cell mc14"></div>
|
|
3082
|
+
<div class="mosaic-cell mc15"></div>
|
|
3083
|
+
<div class="mosaic-cell mc16"></div>
|
|
3084
|
+
<div class="mosaic-cell mc17"></div>
|
|
3085
|
+
<div class="mosaic-cell mc18"></div>
|
|
3086
|
+
<div class="mosaic-cell mc19"></div>
|
|
3087
|
+
<div class="mosaic-cell mc20"></div>
|
|
3088
|
+
<div class="mosaic-cell mc21"></div>
|
|
3089
|
+
<div class="mosaic-cell mc22"></div>
|
|
3090
|
+
<div class="mosaic-cell mc23"></div>
|
|
3091
|
+
<div class="mosaic-cell mc24"></div>
|
|
3092
|
+
</div>
|
|
3093
|
+
<div class="mosaic-overlay"></div>
|
|
3094
|
+
<div class="mosaic-label">MOSAIC</div>
|
|
3095
|
+
</div>
|
|
3096
|
+
<div class="card-info">
|
|
3097
|
+
<div class="card-num">23 — STAINED GLASS / MOSAIC</div>
|
|
3098
|
+
<div class="card-title">Stained Glass Mosaic</div>
|
|
3099
|
+
<div class="card-desc">Colorful cell grid with dark overlay. Cathedral window abstraction.</div>
|
|
3100
|
+
<div class="tags"><span class="tag-pill">colorful</span><span class="tag-pill">mosaic</span><span
|
|
3101
|
+
class="tag-pill">art</span></div>
|
|
3102
|
+
</div>
|
|
3103
|
+
</div>
|
|
3104
|
+
|
|
3105
|
+
<!-- 24 Liquid / Blob Morphing -->
|
|
3106
|
+
<div class="card">
|
|
3107
|
+
<div class="preview preview-liquid">
|
|
3108
|
+
<div class="liquid-blob lb1"></div>
|
|
3109
|
+
<div class="liquid-blob lb2"></div>
|
|
3110
|
+
<div class="liquid-blob lb3"></div>
|
|
3111
|
+
<div class="liquid-text">LIQUID</div>
|
|
3112
|
+
</div>
|
|
3113
|
+
<div class="card-info">
|
|
3114
|
+
<div class="card-num">24 — LIQUID / BLOB MORPHING</div>
|
|
3115
|
+
<div class="card-title">Liquid Blob Morphing</div>
|
|
3116
|
+
<div class="card-desc">Blurred organic blobs on dark gradient. Fluid, biotech feel with animated shapes.
|
|
3117
|
+
비주얼.</div>
|
|
3118
|
+
<div class="tags"><span class="tag-pill">blob</span><span class="tag-pill">fluid</span><span
|
|
3119
|
+
class="tag-pill">organic tech</span></div>
|
|
3120
|
+
</div>
|
|
3121
|
+
</div>
|
|
3122
|
+
|
|
3123
|
+
<!-- 25 Memphis / Pop Pattern -->
|
|
3124
|
+
<div class="card">
|
|
3125
|
+
<div class="preview preview-memphis">
|
|
3126
|
+
<div class="mem-tri mt1"></div>
|
|
3127
|
+
<div class="mem-tri mt2"></div>
|
|
3128
|
+
<div class="mem-tri mt3"></div>
|
|
3129
|
+
<div class="mem-circle mci1"></div>
|
|
3130
|
+
<div class="mem-circle mci2"></div>
|
|
3131
|
+
<div class="mem-zigzag"></div>
|
|
3132
|
+
<div class="mem-dot md1"></div>
|
|
3133
|
+
<div class="mem-dot md2"></div>
|
|
3134
|
+
<div class="mem-dot md3"></div>
|
|
3135
|
+
<div class="memphis-title">MEMPHIS</div>
|
|
3136
|
+
</div>
|
|
3137
|
+
<div class="card-info">
|
|
3138
|
+
<div class="card-num">25 — MEMPHIS POP PATTERN</div>
|
|
3139
|
+
<div class="card-title">Memphis Pop Pattern</div>
|
|
3140
|
+
<div class="card-desc">Triangles, circles, zigzags on warm cream. 80s geometric playfulness.
|
|
3141
|
+
</div>
|
|
3142
|
+
<div class="tags"><span class="tag-pill">80s design</span><span class="tag-pill">geometric</span><span
|
|
3143
|
+
class="tag-pill">playful</span></div>
|
|
3144
|
+
</div>
|
|
3145
|
+
</div>
|
|
3146
|
+
|
|
3147
|
+
<!-- 26 Dark Forest / Nature -->
|
|
3148
|
+
<div class="card">
|
|
3149
|
+
<div class="preview preview-forest">
|
|
3150
|
+
<div class="forest-mist"></div>
|
|
3151
|
+
<div class="forest-tree ftree2"></div>
|
|
3152
|
+
<div class="forest-tree ftree1"></div>
|
|
3153
|
+
<div class="forest-tree ftree3"></div>
|
|
3154
|
+
<div class="forest-moon"></div>
|
|
3155
|
+
<div class="forest-star fs1"></div>
|
|
3156
|
+
<div class="forest-star fs2"></div>
|
|
3157
|
+
<div class="forest-star fs3"></div>
|
|
3158
|
+
<div class="forest-line"></div>
|
|
3159
|
+
<div class="forest-text">Into the Wild</div>
|
|
3160
|
+
</div>
|
|
3161
|
+
<div class="card-info">
|
|
3162
|
+
<div class="card-num">26 — DARK FOREST NATURE</div>
|
|
3163
|
+
<div class="card-title">Dark Forest Nature</div>
|
|
3164
|
+
<div class="card-desc">Deep forest green gradient with tree silhouettes. Atmospheric and mysterious.
|
|
3165
|
+
</div>
|
|
3166
|
+
<div class="tags"><span class="tag-pill">dark nature</span><span class="tag-pill">atmosphere</span><span
|
|
3167
|
+
class="tag-pill">eco premium</span></div>
|
|
3168
|
+
</div>
|
|
3169
|
+
</div>
|
|
3170
|
+
|
|
3171
|
+
<!-- 27 Architectural Blueprint -->
|
|
3172
|
+
<div class="card">
|
|
3173
|
+
<div class="preview preview-blueprint">
|
|
3174
|
+
<div class="bp-grid"></div>
|
|
3175
|
+
<div class="bp-major"></div>
|
|
3176
|
+
<div class="bp-shape bps1"></div>
|
|
3177
|
+
<div class="bp-shape bps2"></div>
|
|
3178
|
+
<div class="bp-arrow"></div>
|
|
3179
|
+
<div class="bp-dim bd1">12.0</div>
|
|
3180
|
+
<div class="bp-dim bd2">8.5</div>
|
|
3181
|
+
<div class="bp-dim bd3">PLAN A</div>
|
|
3182
|
+
<div class="bp-stamp">ARCH<br>PLAN<br>2025</div>
|
|
3183
|
+
<div class="bp-title">BLUEPRINT · SECTION A</div>
|
|
3184
|
+
</div>
|
|
3185
|
+
<div class="card-info">
|
|
3186
|
+
<div class="card-num">27 — ARCHITECTURAL BLUEPRINT</div>
|
|
3187
|
+
<div class="card-title">Architectural Blueprint</div>
|
|
3188
|
+
<div class="card-desc">Blueprint grid on deep blue with white technical drawings. Precise, technical.
|
|
3189
|
+
</div>
|
|
3190
|
+
<div class="tags"><span class="tag-pill">technical</span><span class="tag-pill">blueprint</span><span
|
|
3191
|
+
class="tag-pill">architecture</span></div>
|
|
3192
|
+
</div>
|
|
3193
|
+
</div>
|
|
3194
|
+
|
|
3195
|
+
<!-- 28 Maximalist Collage -->
|
|
3196
|
+
<div class="card">
|
|
3197
|
+
<div class="preview preview-collage">
|
|
3198
|
+
<div class="col-stripe"></div>
|
|
3199
|
+
<div class="col-block cb1"></div>
|
|
3200
|
+
<div class="col-block cb2"></div>
|
|
3201
|
+
<div class="col-block cb3"></div>
|
|
3202
|
+
<div class="col-text1">BOLD<br>NOW</div>
|
|
3203
|
+
<div class="col-text2">VISION</div>
|
|
3204
|
+
<div class="col-circle"></div>
|
|
3205
|
+
<div class="col-num">08</div>
|
|
3206
|
+
</div>
|
|
3207
|
+
<div class="card-info">
|
|
3208
|
+
<div class="card-num">28 — MAXIMALIST COLLAGE</div>
|
|
3209
|
+
<div class="card-title">Maximalist Collage</div>
|
|
3210
|
+
<div class="card-desc">Overlapping rotated color blocks and mixed typography. Bold layered energy.
|
|
3211
|
+
</div>
|
|
3212
|
+
<div class="tags"><span class="tag-pill">maximalist</span><span class="tag-pill">collage</span><span
|
|
3213
|
+
class="tag-pill">bold layering</span></div>
|
|
3214
|
+
</div>
|
|
3215
|
+
</div>
|
|
3216
|
+
|
|
3217
|
+
<!-- 29 SciFi Holographic -->
|
|
3218
|
+
<div class="card">
|
|
3219
|
+
<div class="preview preview-holo">
|
|
3220
|
+
<div class="holo-ring hr1"></div>
|
|
3221
|
+
<div class="holo-ring hr2"></div>
|
|
3222
|
+
<div class="holo-ring hr3"></div>
|
|
3223
|
+
<div class="holo-scan"></div>
|
|
3224
|
+
<div class="holo-bar hb1"></div>
|
|
3225
|
+
<div class="holo-bar hb2"></div>
|
|
3226
|
+
<div class="holo-dot"></div>
|
|
3227
|
+
<div class="holo-text ht1">SYS::ACTIVE</div>
|
|
3228
|
+
<div class="holo-text ht2">SCAN · 0.002ms</div>
|
|
3229
|
+
</div>
|
|
3230
|
+
<div class="card-info">
|
|
3231
|
+
<div class="card-num">29 — SCIFI HOLOGRAPHIC</div>
|
|
3232
|
+
<div class="card-title">SciFi Holographic Data</div>
|
|
3233
|
+
<div class="card-desc">Concentric rings and scan lines. Hologram HUD interface. Cyan on black.</div>
|
|
3234
|
+
<div class="tags"><span class="tag-pill">hologram</span><span class="tag-pill">HUD</span><span
|
|
3235
|
+
class="tag-pill">sci-fi data</span></div>
|
|
3236
|
+
</div>
|
|
3237
|
+
</div>
|
|
3238
|
+
|
|
3239
|
+
<!-- 30 Risograph / Print Error -->
|
|
3240
|
+
<div class="card">
|
|
3241
|
+
<div class="preview preview-riso">
|
|
3242
|
+
<div class="riso-circle-1"></div>
|
|
3243
|
+
<div class="riso-circle-2"></div>
|
|
3244
|
+
<div class="riso-circle-3"></div>
|
|
3245
|
+
<div class="riso-offset">RISO</div>
|
|
3246
|
+
<div class="riso-text">RISO</div>
|
|
3247
|
+
<div class="riso-label">CMYK · OFFSET · PRINT</div>
|
|
3248
|
+
</div>
|
|
3249
|
+
<div class="card-info">
|
|
3250
|
+
<div class="card-num">30 — RISOGRAPH / PRINT ERROR</div>
|
|
3251
|
+
<div class="card-title">Risograph Print</div>
|
|
3252
|
+
<div class="card-desc">CMYK color overlap with offset ghost text. Analog print aesthetic.
|
|
3253
|
+
독특한 개성.</div>
|
|
3254
|
+
<div class="tags"><span class="tag-pill">riso print</span><span class="tag-pill">CMYK</span><span
|
|
3255
|
+
class="tag-pill">indie art</span></div>
|
|
3256
|
+
</div>
|
|
3257
|
+
</div>
|
|
3258
|
+
|
|
3259
|
+
<!-- 31 Executive Minimal -->
|
|
3260
|
+
<div class="card">
|
|
3261
|
+
<div class="preview preview-executive">
|
|
3262
|
+
<div class="exec-block"><span class="exec-block-text">KEYNOTE</span></div>
|
|
3263
|
+
<div class="exec-title">Executive<br>Minimal</div>
|
|
3264
|
+
<div class="exec-line"></div>
|
|
3265
|
+
<div class="exec-sub">REFINED · BUSINESS</div>
|
|
3266
|
+
</div>
|
|
3267
|
+
<div class="card-info">
|
|
3268
|
+
<div class="card-num">31 — EXECUTIVE MINIMAL</div>
|
|
3269
|
+
<div class="card-title">Executive Minimal</div>
|
|
3270
|
+
<div class="card-desc">Warm white background with black accent blocks. Content-first business style.</div>
|
|
3271
|
+
<div class="tags"><span class="tag-pill">business</span><span class="tag-pill">warm white</span><span class="tag-pill">black accent</span></div>
|
|
3272
|
+
</div>
|
|
3273
|
+
</div>
|
|
3274
|
+
|
|
3275
|
+
<!-- 32 Sage Professional -->
|
|
3276
|
+
<div class="card">
|
|
3277
|
+
<div class="preview preview-sage">
|
|
3278
|
+
<div class="sage-card sage-c1"></div>
|
|
3279
|
+
<div class="sage-card sage-c2"></div>
|
|
3280
|
+
<div class="sage-title">Sage</div>
|
|
3281
|
+
<div class="sage-sub">CALM · TRUST</div>
|
|
3282
|
+
<div class="sage-dot"></div>
|
|
3283
|
+
</div>
|
|
3284
|
+
<div class="card-info">
|
|
3285
|
+
<div class="card-num">32 — SAGE PROFESSIONAL</div>
|
|
3286
|
+
<div class="card-title">Sage Professional</div>
|
|
3287
|
+
<div class="card-desc">Sage green palette with light cards layered for calm, trustworthy presence.</div>
|
|
3288
|
+
<div class="tags"><span class="tag-pill">sage green</span><span class="tag-pill">calm</span><span class="tag-pill">layered</span></div>
|
|
3289
|
+
</div>
|
|
3290
|
+
</div>
|
|
3291
|
+
|
|
3292
|
+
<!-- 33 Modern Dark -->
|
|
3293
|
+
<div class="card">
|
|
3294
|
+
<div class="preview preview-modern-dark">
|
|
3295
|
+
<div class="md-surface md-s1"></div>
|
|
3296
|
+
<div class="md-surface md-s2"></div>
|
|
3297
|
+
<div class="md-title">DARK</div>
|
|
3298
|
+
<div class="md-sub">PURE · MONO</div>
|
|
3299
|
+
<div class="md-accent"></div>
|
|
3300
|
+
</div>
|
|
3301
|
+
<div class="card-info">
|
|
3302
|
+
<div class="card-num">33 — MODERN DARK</div>
|
|
3303
|
+
<div class="card-title">Modern Dark</div>
|
|
3304
|
+
<div class="card-desc">Pure dark background with subtle surface layering. Monochrome, zero color accents.</div>
|
|
3305
|
+
<div class="tags"><span class="tag-pill">pure dark</span><span class="tag-pill">monochrome</span><span class="tag-pill">tech</span></div>
|
|
3306
|
+
</div>
|
|
3307
|
+
</div>
|
|
3308
|
+
|
|
3309
|
+
<!-- 34 Corporate Blue -->
|
|
3310
|
+
<div class="card">
|
|
3311
|
+
<div class="preview preview-corporate">
|
|
3312
|
+
<div class="corp-bar"></div>
|
|
3313
|
+
<div class="corp-title">Corporate</div>
|
|
3314
|
+
<div class="corp-sub">Traditional business presentation</div>
|
|
3315
|
+
<div class="corp-block">
|
|
3316
|
+
<div class="corp-dot"></div>
|
|
3317
|
+
<div>
|
|
3318
|
+
<div class="corp-line corp-l1"></div>
|
|
3319
|
+
<div class="corp-line corp-l2"></div>
|
|
3320
|
+
</div>
|
|
3321
|
+
</div>
|
|
3322
|
+
</div>
|
|
3323
|
+
<div class="card-info">
|
|
3324
|
+
<div class="card-num">34 — CORPORATE BLUE</div>
|
|
3325
|
+
<div class="card-title">Corporate Blue</div>
|
|
3326
|
+
<div class="card-desc">White base with blue accent. Navy text, structured grid. Classic enterprise identity.</div>
|
|
3327
|
+
<div class="tags"><span class="tag-pill">blue accent</span><span class="tag-pill">enterprise</span><span class="tag-pill">classic</span></div>
|
|
3328
|
+
</div>
|
|
3329
|
+
</div>
|
|
3330
|
+
|
|
3331
|
+
<!-- 35 Warm Neutral -->
|
|
3332
|
+
<div class="card">
|
|
3333
|
+
<div class="preview preview-warm">
|
|
3334
|
+
<div class="warm-panel warm-p1"></div>
|
|
3335
|
+
<div class="warm-panel warm-p2"></div>
|
|
3336
|
+
<div class="warm-title">Warm</div>
|
|
3337
|
+
<div class="warm-accent"></div>
|
|
3338
|
+
<div class="warm-sub">CREAM · TERRA</div>
|
|
3339
|
+
</div>
|
|
3340
|
+
<div class="card-info">
|
|
3341
|
+
<div class="card-num">35 — WARM NEUTRAL</div>
|
|
3342
|
+
<div class="card-title">Warm Neutral</div>
|
|
3343
|
+
<div class="card-desc">Cream white with terracotta accent. Dark brown text. Warm and approachable.</div>
|
|
3344
|
+
<div class="tags"><span class="tag-pill">cream</span><span class="tag-pill">terracotta</span><span class="tag-pill">approachable</span></div>
|
|
3345
|
+
</div>
|
|
3346
|
+
</div>
|
|
3347
|
+
|
|
3348
|
+
</div>
|
|
3349
|
+
|
|
3350
|
+
<footer>
|
|
3351
|
+
<p>Styles 01–30 derived from <a href="https://github.com/corazzon/pptx-design-styles" target="_blank" style="color: var(--accent); text-decoration: none;">corazzon/pptx-design-styles</a> (MIT). Styles 31–35 are slides-grab originals.</p>
|
|
3352
|
+
</footer>
|
|
3353
|
+
|
|
3354
|
+
</body>
|
|
3355
|
+
|
|
3356
|
+
</html>
|