@lemonppt/themes 0.1.7 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/dist/index.d.ts +173 -60
  2. package/dist/index.d.ts.map +1 -1
  3. package/dist/index.js +21 -7
  4. package/dist/index.js.map +1 -1
  5. package/dist/theme01/tokens.d.ts +72 -0
  6. package/dist/theme01/tokens.d.ts.map +1 -0
  7. package/dist/theme01/tokens.js +79 -0
  8. package/dist/theme01/tokens.js.map +1 -0
  9. package/dist/theme02/tokens.d.ts +73 -0
  10. package/dist/theme02/tokens.d.ts.map +1 -0
  11. package/dist/theme02/tokens.js +81 -0
  12. package/dist/theme02/tokens.js.map +1 -0
  13. package/dist/theme03/tokens.d.ts +322 -0
  14. package/dist/theme03/tokens.d.ts.map +1 -0
  15. package/dist/theme03/tokens.js +279 -0
  16. package/dist/theme03/tokens.js.map +1 -0
  17. package/dist/theme04/tokens.d.ts +94 -0
  18. package/dist/theme04/tokens.d.ts.map +1 -0
  19. package/dist/theme04/tokens.js +305 -0
  20. package/dist/theme04/tokens.js.map +1 -0
  21. package/dist/theme05/tokens.d.ts +92 -0
  22. package/dist/theme05/tokens.d.ts.map +1 -0
  23. package/dist/theme05/tokens.js +275 -0
  24. package/dist/theme05/tokens.js.map +1 -0
  25. package/dist/theme06/tokens.d.ts +101 -0
  26. package/dist/theme06/tokens.d.ts.map +1 -0
  27. package/dist/theme06/tokens.js +320 -0
  28. package/dist/theme06/tokens.js.map +1 -0
  29. package/dist/theme07/tokens.d.ts +99 -0
  30. package/dist/theme07/tokens.d.ts.map +1 -0
  31. package/dist/theme07/tokens.js +274 -0
  32. package/dist/theme07/tokens.js.map +1 -0
  33. package/dist/theme08/tokens.d.ts +103 -0
  34. package/dist/theme08/tokens.d.ts.map +1 -0
  35. package/dist/theme08/tokens.js +286 -0
  36. package/dist/theme08/tokens.js.map +1 -0
  37. package/dist/theme09/tokens.d.ts +128 -0
  38. package/dist/theme09/tokens.d.ts.map +1 -0
  39. package/dist/theme09/tokens.js +334 -0
  40. package/dist/theme09/tokens.js.map +1 -0
  41. package/dist/theme10/tokens.d.ts +87 -0
  42. package/dist/theme10/tokens.d.ts.map +1 -0
  43. package/dist/theme10/tokens.js +201 -0
  44. package/dist/theme10/tokens.js.map +1 -0
  45. package/package.json +2 -2
  46. package/src/theme01/styles.css +5371 -0
  47. package/src/theme02/styles.css +5017 -0
  48. package/src/theme03/styles.css +8355 -0
  49. package/src/theme04/styles.css +8758 -0
  50. package/src/theme05/styles.css +3601 -0
  51. package/src/theme06/styles.css +7122 -0
  52. package/src/theme07/styles.css +5546 -0
  53. package/src/theme08/styles.css +1225 -0
  54. package/src/theme09/styles.css +3950 -0
  55. package/src/theme10/styles.css +1721 -0
  56. package/dist/base/tokens.d.ts +0 -34
  57. package/dist/base/tokens.d.ts.map +0 -1
  58. package/dist/base/tokens.js +0 -37
  59. package/dist/base/tokens.js.map +0 -1
  60. package/dist/dark-tech/tokens.d.ts +0 -34
  61. package/dist/dark-tech/tokens.d.ts.map +0 -1
  62. package/dist/dark-tech/tokens.js +0 -37
  63. package/dist/dark-tech/tokens.js.map +0 -1
  64. package/dist/minimal/tokens.d.ts +0 -34
  65. package/dist/minimal/tokens.d.ts.map +0 -1
  66. package/dist/minimal/tokens.js +0 -34
  67. package/dist/minimal/tokens.js.map +0 -1
  68. package/dist/warm-business/tokens.d.ts +0 -34
  69. package/dist/warm-business/tokens.d.ts.map +0 -1
  70. package/dist/warm-business/tokens.js +0 -37
  71. package/dist/warm-business/tokens.js.map +0 -1
  72. package/src/base/styles.css +0 -3061
  73. package/src/dark-tech/styles.css +0 -2969
  74. package/src/warm-business/styles.css +0 -2848
@@ -1,2969 +0,0 @@
1
- /* lemonPPT - AI-powered presentation generation */
2
- /* Copyright (c) 2026 lemonforme */
3
- /* SPDX-License-Identifier: AGPL-3.0-or-later */
4
-
5
- /* packages/themes/src/dark-tech/styles.css */
6
- /* Dark tech theme for lemonPPT */
7
-
8
- :root {
9
- --lp-bg: #0a0f1c;
10
- --lp-surface: rgba(17, 24, 39, 0.72);
11
- --lp-surface-elevated: rgba(31, 41, 55, 0.8);
12
- --lp-text: #f3f4f6;
13
- --lp-secondary: #94a3b8;
14
- --lp-accent: #06b6d4;
15
- --lp-border: rgba(255, 255, 255, 0.12);
16
- --lp-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
17
- --lp-font: Inter, "Noto Sans SC", system-ui, sans-serif;
18
- --lp-font-mono: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
19
- --lp-radius-small: 6px;
20
- --lp-radius-medium: 12px;
21
- --lp-radius-large: 16px;
22
- }
23
-
24
- h1,
25
- h2,
26
- h3 {
27
- font-family: 'Space Grotesk', Inter, 'Noto Sans SC', system-ui, sans-serif;
28
- }
29
-
30
- * {
31
- box-sizing: border-box;
32
- }
33
-
34
- html,
35
- body {
36
- margin: 0;
37
- padding: 0;
38
- width: 100%;
39
- height: 100%;
40
- font-family: var(--lp-font);
41
- background: var(--lp-bg);
42
- color: var(--lp-text);
43
- overflow: hidden;
44
- }
45
-
46
- body {
47
- background-color: var(--lp-bg);
48
- background-image:
49
- radial-gradient(circle at 50% 0%, rgba(6, 182, 212, 0.12), transparent 50%),
50
- linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
51
- linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
52
- background-size: 100% 100%, 48px 48px, 48px 48px;
53
- }
54
-
55
- .lp-deck {
56
- position: relative;
57
- width: 100%;
58
- height: 100%;
59
- display: flex;
60
- align-items: center;
61
- justify-content: center;
62
- }
63
-
64
- .lp-slide-wrapper {
65
- position: absolute;
66
- top: 0;
67
- left: 0;
68
- width: 100%;
69
- height: 100%;
70
- display: flex;
71
- align-items: center;
72
- justify-content: center;
73
- opacity: 0;
74
- transform: translateX(100%);
75
- transition: transform 350ms ease, opacity 250ms ease;
76
- z-index: 0;
77
- }
78
-
79
- .lp-slide-wrapper.active {
80
- opacity: 1;
81
- transform: translateX(0);
82
- z-index: 2;
83
- }
84
-
85
- .lp-slide-wrapper.prev {
86
- opacity: 0;
87
- transform: translateX(-100%);
88
- z-index: 1;
89
- }
90
-
91
- .lp-slide {
92
- width: 1280px;
93
- height: 720px;
94
- background: var(--lp-surface);
95
- border: 1px solid rgba(6, 182, 212, 0.22);
96
- border-radius: var(--lp-radius-large);
97
- box-shadow:
98
- var(--lp-shadow),
99
- 0 0 0 1px rgba(6, 182, 212, 0.08),
100
- inset 0 1px 0 rgba(255, 255, 255, 0.05);
101
- padding: 80px 96px;
102
- display: flex;
103
- flex-direction: column;
104
- position: relative;
105
- overflow: hidden;
106
- backdrop-filter: blur(20px);
107
- -webkit-backdrop-filter: blur(20px);
108
- }
109
-
110
- .lp-slide::before {
111
- content: "";
112
- position: absolute;
113
- inset: 0;
114
- background:
115
- radial-gradient(circle at 85% 15%, rgba(6, 182, 212, 0.18), transparent 42%),
116
- radial-gradient(circle at 15% 85%, rgba(59, 130, 246, 0.14), transparent 42%),
117
- linear-gradient(180deg, rgba(6, 182, 212, 0.04) 0%, transparent 35%);
118
- pointer-events: none;
119
- z-index: 0;
120
- }
121
-
122
- .lp-heading {
123
- font-weight: 700;
124
- line-height: 1.15;
125
- margin: 0 0 24px 0;
126
- color: var(--lp-text);
127
- }
128
-
129
- .lp-kicker {
130
- font-family: var(--lp-font-mono);
131
- font-size: 13px;
132
- letter-spacing: 0.12em;
133
- text-transform: uppercase;
134
- color: var(--lp-accent);
135
- margin-bottom: 16px;
136
- }
137
-
138
- .lp-cover-v1 {
139
- align-items: center;
140
- justify-content: center;
141
- text-align: center;
142
- }
143
-
144
- .lp-cover-image {
145
- position: absolute;
146
- inset: 0;
147
- width: 100%;
148
- height: 100%;
149
- object-fit: cover;
150
- opacity: 0.25;
151
- pointer-events: none;
152
- filter: saturate(0.8);
153
- }
154
-
155
- .lp-cover-content {
156
- position: relative;
157
- z-index: 1;
158
- max-width: 900px;
159
- }
160
-
161
- .lp-cover-v1 .lp-kicker {
162
- margin-bottom: 24px;
163
- }
164
-
165
- .lp-cover-title {
166
- font-size: 80px;
167
- font-weight: 800;
168
- margin-bottom: 24px;
169
- text-shadow: 0 0 40px rgba(6, 182, 212, 0.25);
170
- }
171
-
172
- .lp-cover-subtitle {
173
- font-size: 28px;
174
- color: var(--lp-secondary);
175
- line-height: 1.45;
176
- margin-bottom: 48px;
177
- }
178
-
179
- .lp-cover-date {
180
- font-family: var(--lp-font-mono);
181
- font-size: 15px;
182
- color: var(--lp-secondary);
183
- }
184
-
185
- /* Table of contents */
186
-
187
- .lp-toc-v1 {
188
- justify-content: center;
189
- }
190
-
191
- .lp-toc-title {
192
- font-size: 56px;
193
- margin-bottom: 56px;
194
- }
195
-
196
- .lp-toc-list {
197
- list-style: none;
198
- padding: 0;
199
- margin: 0;
200
- counter-reset: toc;
201
- }
202
-
203
- .lp-toc-list li {
204
- font-size: 26px;
205
- padding: 18px 0;
206
- border-bottom: 1px solid var(--lp-border);
207
- color: var(--lp-text);
208
- display: flex;
209
- align-items: baseline;
210
- gap: 20px;
211
- }
212
-
213
- .lp-toc-list li::before {
214
- counter-increment: toc;
215
- content: counter(toc, decimal-leading-zero);
216
- font-family: var(--lp-font-mono);
217
- font-size: 15px;
218
- color: var(--lp-accent);
219
- min-width: 36px;
220
- }
221
-
222
- /* Content */
223
-
224
- .lp-content-v1 {
225
- justify-content: center;
226
- }
227
-
228
- .lp-content-v1 .lp-heading {
229
- font-size: 52px;
230
- margin-bottom: 40px;
231
- }
232
-
233
- .lp-bullet-list {
234
- list-style: none;
235
- padding: 0;
236
- margin: 0;
237
- }
238
-
239
- .lp-bullet-list li {
240
- font-size: 26px;
241
- line-height: 1.55;
242
- padding: 14px 0 14px 36px;
243
- position: relative;
244
- color: var(--lp-text);
245
- }
246
-
247
- .lp-bullet-list li::before {
248
- content: "";
249
- position: absolute;
250
- left: 0;
251
- top: 26px;
252
- width: 10px;
253
- height: 10px;
254
- border-radius: 50%;
255
- background: var(--lp-accent);
256
- box-shadow: 0 0 8px var(--lp-accent);
257
- }
258
-
259
- /* Metric */
260
-
261
- .lp-metric-v1,
262
- .lp-metric-v2 {
263
- align-items: center;
264
- justify-content: center;
265
- text-align: center;
266
- }
267
-
268
- .lp-metric-value {
269
- font-size: 160px;
270
- font-weight: 800;
271
- line-height: 1;
272
- color: var(--lp-accent);
273
- margin-bottom: 16px;
274
- text-shadow: 0 0 40px rgba(6, 182, 212, 0.35);
275
- }
276
-
277
- .lp-metric-unit {
278
- font-size: 32px;
279
- font-weight: 600;
280
- color: var(--lp-text);
281
- }
282
-
283
- .lp-metric-description {
284
- font-size: 24px;
285
- color: var(--lp-secondary);
286
- margin-top: 32px;
287
- max-width: 700px;
288
- }
289
-
290
- /* Comparison */
291
-
292
- .lp-comparison-v1 {
293
- justify-content: center;
294
- }
295
-
296
- .lp-comparison-title {
297
- font-size: 48px;
298
- margin-bottom: 56px;
299
- text-align: center;
300
- }
301
-
302
- .lp-comparison-grid {
303
- display: grid;
304
- grid-template-columns: 1fr 1fr;
305
- gap: 48px;
306
- }
307
-
308
- .lp-comparison-col h3 {
309
- font-size: 28px;
310
- margin: 0 0 24px 0;
311
- padding-bottom: 16px;
312
- border-bottom: 2px solid var(--lp-border);
313
- }
314
-
315
- .lp-comparison-col ul {
316
- list-style: none;
317
- padding: 0;
318
- margin: 0;
319
- }
320
-
321
- .lp-comparison-col li {
322
- font-size: 22px;
323
- padding: 12px 0;
324
- color: var(--lp-secondary);
325
- }
326
-
327
- /* Process */
328
-
329
- .lp-process-v1 {
330
- justify-content: center;
331
- }
332
-
333
- .lp-process-title {
334
- font-size: 48px;
335
- margin-bottom: 56px;
336
- text-align: center;
337
- }
338
-
339
- .lp-process-steps {
340
- display: flex;
341
- align-items: stretch;
342
- justify-content: center;
343
- gap: 24px;
344
- }
345
-
346
- .lp-process-step {
347
- flex: 1;
348
- background: rgba(6, 182, 212, 0.08);
349
- border: 1px solid rgba(6, 182, 212, 0.15);
350
- border-radius: 16px;
351
- padding: 36px 28px;
352
- text-align: center;
353
- position: relative;
354
- }
355
-
356
- .lp-process-step-number {
357
- font-family: var(--lp-font-mono);
358
- font-size: 14px;
359
- color: var(--lp-accent);
360
- margin-bottom: 16px;
361
- }
362
-
363
- .lp-process-step-text {
364
- font-size: 24px;
365
- font-weight: 600;
366
- }
367
-
368
- /* Quote */
369
-
370
- .lp-quote-v1 {
371
- align-items: center;
372
- justify-content: center;
373
- text-align: center;
374
- }
375
-
376
- .lp-quote-text {
377
- font-size: 48px;
378
- font-weight: 600;
379
- line-height: 1.35;
380
- margin-bottom: 40px;
381
- }
382
-
383
- .lp-quote-author {
384
- font-size: 20px;
385
- color: var(--lp-secondary);
386
- }
387
-
388
- /* Closing */
389
-
390
- .lp-closing-v1 {
391
- align-items: center;
392
- justify-content: center;
393
- text-align: center;
394
- }
395
-
396
- .lp-closing-title {
397
- font-size: 72px;
398
- font-weight: 800;
399
- margin-bottom: 24px;
400
- text-shadow: 0 0 40px rgba(6, 182, 212, 0.25);
401
- }
402
-
403
- .lp-closing-subtitle {
404
- font-size: 28px;
405
- color: var(--lp-secondary);
406
- }
407
-
408
- /* Navigation */
409
-
410
- .lp-nav {
411
- position: fixed;
412
- bottom: 32px;
413
- left: 50%;
414
- transform: translateX(-50%);
415
- display: flex;
416
- align-items: center;
417
- gap: 16px;
418
- z-index: 100;
419
- background: rgba(17, 24, 39, 0.85);
420
- backdrop-filter: blur(12px);
421
- padding: 12px 20px;
422
- border-radius: 999px;
423
- border: 1px solid rgba(255, 255, 255, 0.08);
424
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
425
- }
426
-
427
- .lp-nav button {
428
- border: none;
429
- background: transparent;
430
- cursor: pointer;
431
- font-size: 20px;
432
- color: var(--lp-text);
433
- padding: 6px 12px;
434
- border-radius: 8px;
435
- transition: background 150ms ease;
436
- }
437
-
438
- .lp-nav button:hover:not(:disabled) {
439
- background: rgba(255, 255, 255, 0.08);
440
- }
441
-
442
- .lp-nav button:disabled {
443
- opacity: 0.35;
444
- cursor: not-allowed;
445
- }
446
-
447
- .lp-nav-dots {
448
- display: flex;
449
- gap: 8px;
450
- }
451
-
452
- .lp-nav-dot {
453
- width: 10px;
454
- height: 10px;
455
- border-radius: 50%;
456
- background: var(--lp-border);
457
- cursor: pointer;
458
- transition: background 150ms ease, transform 150ms ease;
459
- }
460
-
461
- .lp-nav-dot.active {
462
- background: var(--lp-accent);
463
- transform: scale(1.2);
464
- }
465
-
466
- .lp-page-counter {
467
- font-family: var(--lp-font-mono);
468
- font-size: 13px;
469
- color: var(--lp-secondary);
470
- min-width: 48px;
471
- text-align: center;
472
- }
473
-
474
- .lp-hint {
475
- position: fixed;
476
- bottom: 12px;
477
- left: 50%;
478
- transform: translateX(-50%);
479
- font-size: 12px;
480
- color: var(--lp-secondary);
481
- z-index: 100;
482
- }
483
-
484
- /* Editor bar */
485
-
486
- .lp-editor-bar {
487
- position: fixed;
488
- top: 16px;
489
- left: 50%;
490
- transform: translateX(-50%);
491
- display: flex;
492
- align-items: center;
493
- gap: 12px;
494
- z-index: 1000;
495
- background: rgba(17, 24, 39, 0.92);
496
- backdrop-filter: blur(12px);
497
- padding: 10px 18px;
498
- border-radius: 12px;
499
- border: 1px solid rgba(255, 255, 255, 0.08);
500
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
501
- }
502
-
503
- .lp-editor-title {
504
- font-weight: 600;
505
- font-size: 14px;
506
- margin-right: 8px;
507
- color: var(--lp-text);
508
- }
509
-
510
- .lp-editor-btn {
511
- border: 1px solid var(--lp-border);
512
- background: var(--lp-surface);
513
- color: var(--lp-text);
514
- font-size: 13px;
515
- padding: 7px 14px;
516
- border-radius: 8px;
517
- cursor: pointer;
518
- transition: background 150ms ease, border-color 150ms ease;
519
- }
520
-
521
- .lp-editor-btn:hover:not(:disabled) {
522
- background: rgba(255, 255, 255, 0.06);
523
- border-color: rgba(255, 255, 255, 0.2);
524
- }
525
-
526
- .lp-editor-btn:disabled {
527
- opacity: 0.5;
528
- cursor: not-allowed;
529
- }
530
-
531
- .lp-theme-switcher-label {
532
- display: flex;
533
- align-items: center;
534
- gap: 8px;
535
- font-size: 13px;
536
- color: var(--lp-text);
537
- cursor: pointer;
538
- }
539
-
540
- .lp-theme-switcher-label select {
541
- border: 1px solid var(--lp-border);
542
- background: rgba(0, 0, 0, 0.25);
543
- color: var(--lp-text);
544
- font-size: 13px;
545
- padding: 6px 10px;
546
- border-radius: 8px;
547
- cursor: pointer;
548
- font-family: inherit;
549
- }
550
-
551
- [data-lp-editable="true"] {
552
- outline: none;
553
- border-radius: 4px;
554
- transition: background 150ms ease, box-shadow 150ms ease;
555
- cursor: text;
556
- }
557
-
558
- [data-lp-editable="true"]:hover {
559
- background: rgba(6, 182, 212, 0.1);
560
- }
561
-
562
- [data-lp-editable="true"]:focus {
563
- background: rgba(6, 182, 212, 0.16);
564
- box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.5);
565
- }
566
-
567
- [data-lp-editable-image="true"] {
568
- cursor: pointer;
569
- transition: opacity 150ms ease;
570
- }
571
-
572
- [data-lp-editable-image="true"]:hover {
573
- opacity: 0.85;
574
- }
575
-
576
- /* Image editor modal */
577
-
578
- .lp-image-editor-overlay {
579
- position: fixed;
580
- inset: 0;
581
- background: rgba(0, 0, 0, 0.6);
582
- display: flex;
583
- align-items: center;
584
- justify-content: center;
585
- z-index: 2000;
586
- }
587
-
588
- .lp-image-editor {
589
- background: var(--lp-surface);
590
- border: 1px solid rgba(255, 255, 255, 0.08);
591
- border-radius: 16px;
592
- padding: 28px;
593
- width: 480px;
594
- max-width: 90vw;
595
- box-shadow: var(--lp-shadow);
596
- }
597
-
598
- .lp-image-editor h3 {
599
- margin: 0 0 20px 0;
600
- font-size: 20px;
601
- }
602
-
603
- .lp-image-editor label {
604
- display: block;
605
- margin-bottom: 12px;
606
- font-size: 14px;
607
- color: var(--lp-secondary);
608
- }
609
-
610
- .lp-image-editor input[type="text"] {
611
- width: 100%;
612
- padding: 10px 12px;
613
- margin-top: 6px;
614
- border: 1px solid var(--lp-border);
615
- border-radius: 8px;
616
- font-size: 14px;
617
- font-family: inherit;
618
- background: rgba(0, 0, 0, 0.25);
619
- color: var(--lp-text);
620
- }
621
-
622
- .lp-image-file-label {
623
- display: block;
624
- width: 100%;
625
- text-align: center;
626
- padding: 16px;
627
- border: 2px dashed var(--lp-border);
628
- border-radius: 12px;
629
- cursor: pointer;
630
- transition: border-color 150ms ease, background 150ms ease;
631
- }
632
-
633
- .lp-image-file-label:hover {
634
- border-color: var(--lp-accent);
635
- background: rgba(6, 182, 212, 0.08);
636
- }
637
-
638
- .lp-image-file-label input[type="file"] {
639
- display: none;
640
- }
641
-
642
- .lp-image-or {
643
- text-align: center;
644
- font-size: 13px;
645
- color: var(--lp-secondary);
646
- margin: 12px 0;
647
- }
648
-
649
- .lp-image-preview-wrap {
650
- margin: 16px 0;
651
- min-height: 120px;
652
- max-height: 240px;
653
- display: flex;
654
- align-items: center;
655
- justify-content: center;
656
- background: rgba(0, 0, 0, 0.25);
657
- border-radius: 12px;
658
- overflow: hidden;
659
- }
660
-
661
- .lp-image-preview {
662
- max-width: 100%;
663
- max-height: 220px;
664
- object-fit: contain;
665
- }
666
-
667
- .lp-image-actions {
668
- display: flex;
669
- align-items: center;
670
- justify-content: space-between;
671
- gap: 12px;
672
- }
673
-
674
- .lp-image-actions-right {
675
- display: flex;
676
- gap: 12px;
677
- }
678
-
679
- .lp-image-editor button {
680
- border: 1px solid var(--lp-border);
681
- background: var(--lp-accent);
682
- color: var(--lp-textInverse);
683
- font-size: 14px;
684
- padding: 9px 18px;
685
- border-radius: 8px;
686
- cursor: pointer;
687
- transition: opacity 150ms ease;
688
- }
689
-
690
- .lp-image-editor button:hover {
691
- opacity: 0.9;
692
- }
693
-
694
- .lp-image-btn-secondary {
695
- background: transparent !important;
696
- color: var(--lp-text) !important;
697
- }
698
-
699
- /* ===== New layouts ===== */
700
-
701
- /* Metric v1 */
702
- .lp-metric-v1 {
703
- align-items: center;
704
- justify-content: center;
705
- text-align: center;
706
- }
707
-
708
- .lp-metric-v1-value {
709
- font-size: 200px;
710
- font-weight: 900;
711
- line-height: 1;
712
- color: var(--lp-accent);
713
- margin: 16px 0;
714
- }
715
-
716
- .lp-metric-v1-unit {
717
- font-size: 40px;
718
- font-weight: 600;
719
- color: var(--lp-text);
720
- }
721
-
722
- .lp-metric-v1-description {
723
- font-size: 24px;
724
- color: var(--lp-secondary);
725
- max-width: 720px;
726
- margin: 24px 0 0;
727
- }
728
-
729
- /* Content v2 */
730
- .lp-content-v2 {
731
- justify-content: center;
732
- }
733
-
734
- .lp-content-v2-header {
735
- margin-bottom: 40px;
736
- }
737
-
738
- .lp-content-v2-columns {
739
- display: grid;
740
- grid-template-columns: 1fr 1fr;
741
- gap: 56px;
742
- }
743
-
744
- .lp-bullet-list-compact li {
745
- font-size: 22px;
746
- padding: 10px 0;
747
- }
748
-
749
- /* Content v3 */
750
- .lp-content-v3 {
751
- display: grid;
752
- grid-template-columns: 1fr 1fr;
753
- gap: 56px;
754
- align-items: center;
755
- padding: 80px;
756
- }
757
-
758
- .lp-content-v3-text {
759
- max-width: 520px;
760
- }
761
-
762
- .lp-content-v3-media img {
763
- width: 100%;
764
- height: 100%;
765
- object-fit: cover;
766
- border-radius: 16px;
767
- box-shadow: var(--lp-shadow);
768
- }
769
-
770
- /* Comparison v2 */
771
- .lp-comparison-v2 {
772
- justify-content: center;
773
- }
774
-
775
- .lp-comparison-v2-inner {
776
- width: 100%;
777
- max-width: 1040px;
778
- }
779
-
780
- .lp-comparison-v2-grid {
781
- display: grid;
782
- grid-template-columns: 1fr 1fr;
783
- gap: 40px;
784
- margin-top: 48px;
785
- }
786
-
787
- .lp-comparison-v2-card {
788
- background: var(--lp-surface-elevated);
789
- border: 1px solid rgba(6, 182, 212, 0.15);
790
- border-radius: 16px;
791
- padding: 32px;
792
- }
793
-
794
- .lp-comparison-v2-card h3 {
795
- font-size: 28px;
796
- margin: 0 0 20px 0;
797
- padding-bottom: 16px;
798
- border-bottom: 1px solid rgba(6, 182, 212, 0.15);
799
- }
800
-
801
- .lp-comparison-v2-card ul {
802
- list-style: none;
803
- padding: 0;
804
- margin: 0;
805
- }
806
-
807
- .lp-comparison-v2-card li {
808
- font-size: 20px;
809
- padding: 10px 0;
810
- color: var(--lp-secondary);
811
- }
812
-
813
- /* Process v2 */
814
- .lp-process-v2 {
815
- justify-content: center;
816
- }
817
-
818
- .lp-process-v2-title {
819
- text-align: center;
820
- margin-bottom: 48px;
821
- }
822
-
823
- .lp-process-v2-timeline {
824
- display: flex;
825
- flex-direction: column;
826
- gap: 20px;
827
- max-width: 800px;
828
- width: 100%;
829
- margin: 0 auto;
830
- }
831
-
832
- .lp-process-v2-step {
833
- display: flex;
834
- align-items: flex-start;
835
- gap: 20px;
836
- }
837
-
838
- .lp-process-v2-marker {
839
- flex-shrink: 0;
840
- width: 44px;
841
- height: 44px;
842
- border-radius: 50%;
843
- background: var(--lp-accent);
844
- color: var(--lp-textInverse);
845
- display: flex;
846
- align-items: center;
847
- justify-content: center;
848
- font-weight: 700;
849
- font-size: 18px;
850
- }
851
-
852
- .lp-process-v2-content {
853
- flex: 1;
854
- background: var(--lp-surface-elevated);
855
- border: 1px solid rgba(6, 182, 212, 0.15);
856
- border-radius: 12px;
857
- padding: 18px 22px;
858
- }
859
-
860
- .lp-process-v2-content h3 {
861
- margin: 0 0 6px 0;
862
- font-size: 22px;
863
- }
864
-
865
- .lp-process-v2-content p {
866
- margin: 0;
867
- font-size: 17px;
868
- color: var(--lp-secondary);
869
- line-height: 1.55;
870
- }
871
-
872
- /* Quote v2 */
873
- .lp-quote-v2 {
874
- align-items: center;
875
- justify-content: center;
876
- }
877
-
878
- .lp-quote-v2-inner {
879
- max-width: 900px;
880
- border-left: 6px solid var(--lp-accent);
881
- padding-left: 40px;
882
- }
883
-
884
- .lp-quote-v2-text {
885
- font-size: 40px;
886
- line-height: 1.35;
887
- font-style: italic;
888
- margin: 0;
889
- }
890
-
891
- .lp-quote-v2-attribution {
892
- margin-top: 32px;
893
- }
894
-
895
- .lp-quote-v2-author {
896
- font-size: 22px;
897
- font-weight: 700;
898
- margin-right: 12px;
899
- }
900
-
901
- .lp-quote-v2-role {
902
- font-size: 18px;
903
- color: var(--lp-secondary);
904
- }
905
-
906
- /* Closing v2 */
907
- .lp-closing-v2 {
908
- align-items: center;
909
- justify-content: center;
910
- text-align: center;
911
- }
912
-
913
- .lp-closing-v2-title {
914
- font-size: 72px;
915
- margin-bottom: 20px;
916
- }
917
-
918
- .lp-closing-v2-subtitle {
919
- font-size: 26px;
920
- color: var(--lp-secondary);
921
- margin-bottom: 48px;
922
- }
923
-
924
- .lp-closing-v2-contacts {
925
- display: flex;
926
- flex-direction: column;
927
- gap: 12px;
928
- align-items: center;
929
- }
930
-
931
- .lp-closing-v2-contact,
932
- .lp-closing-v2-email,
933
- .lp-closing-v2-link {
934
- font-size: 20px;
935
- color: var(--lp-text);
936
- }
937
-
938
- /* SWOT / PEST */
939
- .lp-swot-v1,
940
- .lp-pest-v1 {
941
- justify-content: center;
942
- }
943
-
944
- .lp-swot-title,
945
- .lp-pest-title {
946
- text-align: center;
947
- margin-bottom: 48px;
948
- }
949
-
950
- .lp-swot-grid,
951
- .lp-pest-grid {
952
- display: grid;
953
- grid-template-columns: 1fr 1fr;
954
- gap: 24px;
955
- max-width: 960px;
956
- width: 100%;
957
- margin: 0 auto;
958
- }
959
-
960
- .lp-swot-cell,
961
- .lp-pest-cell {
962
- background: var(--lp-surface-elevated);
963
- border: 1px solid rgba(6, 182, 212, 0.15);
964
- border-radius: 16px;
965
- padding: 28px;
966
- text-align: center;
967
- }
968
-
969
- .lp-swot-cell h3,
970
- .lp-pest-cell h3 {
971
- width: 48px;
972
- height: 48px;
973
- border-radius: 50%;
974
- display: flex;
975
- align-items: center;
976
- justify-content: center;
977
- margin: 0 auto 16px;
978
- font-size: 22px;
979
- color: var(--lp-textInverse);
980
- background: var(--lp-accent);
981
- }
982
-
983
- .lp-swot-cell p,
984
- .lp-pest-cell p {
985
- margin: 0;
986
- font-size: 18px;
987
- color: var(--lp-secondary);
988
- line-height: 1.55;
989
- }
990
-
991
- /* Chart v1 */
992
- .lp-chart-v1 {
993
- justify-content: center;
994
- }
995
-
996
- .lp-chart-inner {
997
- width: 100%;
998
- max-width: 960px;
999
- margin: 0 auto;
1000
- }
1001
-
1002
- .lp-chart-title {
1003
- text-align: center;
1004
- margin-bottom: 32px;
1005
- }
1006
-
1007
- .lp-chart-svg {
1008
- width: 100%;
1009
- height: auto;
1010
- overflow: visible;
1011
- }
1012
-
1013
- .lp-chart-grid {
1014
- stroke: rgba(255, 255, 255, 0.08);
1015
- stroke-width: 1;
1016
- }
1017
-
1018
- .lp-chart-axis-text {
1019
- fill: var(--lp-secondary);
1020
- font-size: 13px;
1021
- }
1022
-
1023
- .lp-chart-value-text {
1024
- fill: var(--lp-text);
1025
- font-size: 13px;
1026
- font-weight: 600;
1027
- }
1028
-
1029
- .lp-chart-line {
1030
- stroke: var(--lp-accent);
1031
- }
1032
-
1033
- .lp-chart-unit {
1034
- text-align: center;
1035
- font-size: 14px;
1036
- color: var(--lp-secondary);
1037
- margin-top: 12px;
1038
- }
1039
-
1040
- .lp-chart-pie-label {
1041
- fill: var(--lp-textInverse);
1042
- font-size: 13px;
1043
- font-weight: 600;
1044
- }
1045
-
1046
- .lp-chart-color-0 { fill: #06b6d4; }
1047
- .lp-chart-color-1 { fill: #3b82f6; }
1048
- .lp-chart-color-2 { fill: #10b981; }
1049
- .lp-chart-color-3 { fill: #f59e0b; }
1050
- .lp-chart-color-4 { fill: #ef4444; }
1051
- .lp-chart-color-5 { fill: #8b5cf6; }
1052
-
1053
- /* Image v1 */
1054
- .lp-image-v1 {
1055
- padding: 0;
1056
- position: relative;
1057
- overflow: hidden;
1058
- justify-content: center;
1059
- align-items: center;
1060
- text-align: center;
1061
- }
1062
-
1063
- .lp-image-v1-bg {
1064
- position: absolute;
1065
- inset: 0;
1066
- width: 100%;
1067
- height: 100%;
1068
- object-fit: cover;
1069
- z-index: 0;
1070
- }
1071
-
1072
- .lp-image-v1-overlay {
1073
- position: absolute;
1074
- inset: 0;
1075
- background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.7) 100%);
1076
- z-index: 1;
1077
- }
1078
-
1079
- .lp-image-v1-content {
1080
- position: relative;
1081
- z-index: 2;
1082
- padding: 80px;
1083
- }
1084
-
1085
- .lp-image-v1-title {
1086
- font-size: 72px;
1087
- font-weight: 800;
1088
- color: #ffffff;
1089
- line-height: 1.1;
1090
- margin-bottom: 24px;
1091
- text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
1092
- }
1093
-
1094
- .lp-image-v1-subtitle {
1095
- font-size: 28px;
1096
- color: rgba(255, 255, 255, 0.9);
1097
- line-height: 1.5;
1098
- }
1099
-
1100
- /* Team v1 */
1101
- .lp-team-v1 {
1102
- justify-content: center;
1103
- }
1104
-
1105
- .lp-team-header {
1106
- margin-bottom: 48px;
1107
- }
1108
-
1109
- .lp-team-grid {
1110
- display: grid;
1111
- grid-template-columns: repeat(3, 1fr);
1112
- gap: 40px;
1113
- width: 100%;
1114
- max-width: 1100px;
1115
- }
1116
-
1117
- .lp-team-card {
1118
- text-align: center;
1119
- }
1120
-
1121
- .lp-team-avatar {
1122
- width: 120px;
1123
- height: 120px;
1124
- border-radius: 50%;
1125
- object-fit: cover;
1126
- margin-bottom: 20px;
1127
- border: 4px solid var(--lp-accent);
1128
- }
1129
-
1130
- .lp-team-avatar-placeholder {
1131
- background: var(--lp-surface-elevated);
1132
- border-color: rgba(6, 182, 212, 0.3);
1133
- }
1134
-
1135
- .lp-team-name {
1136
- font-size: 24px;
1137
- font-weight: 700;
1138
- color: var(--lp-text);
1139
- margin-bottom: 4px;
1140
- }
1141
-
1142
- .lp-team-role {
1143
- font-size: 16px;
1144
- color: var(--lp-accent);
1145
- margin-bottom: 12px;
1146
- }
1147
-
1148
- .lp-team-bio {
1149
- font-size: 15px;
1150
- color: var(--lp-secondary);
1151
- line-height: 1.55;
1152
- }
1153
-
1154
- /* Feature v1 */
1155
- .lp-feature-v1 {
1156
- justify-content: center;
1157
- }
1158
-
1159
- .lp-feature-header {
1160
- margin-bottom: 56px;
1161
- }
1162
-
1163
- .lp-feature-grid {
1164
- display: grid;
1165
- grid-template-columns: repeat(3, 1fr);
1166
- gap: 32px;
1167
- width: 100%;
1168
- max-width: 1100px;
1169
- }
1170
-
1171
- .lp-feature-card {
1172
- background: var(--lp-surface-elevated);
1173
- border: 1px solid rgba(6, 182, 212, 0.15);
1174
- border-radius: 16px;
1175
- padding: 36px;
1176
- }
1177
-
1178
- .lp-feature-number {
1179
- font-size: 14px;
1180
- font-weight: 700;
1181
- color: var(--lp-accent);
1182
- margin-bottom: 16px;
1183
- font-family: 'JetBrains Mono', monospace;
1184
- }
1185
-
1186
- .lp-feature-title {
1187
- font-size: 24px;
1188
- font-weight: 700;
1189
- color: var(--lp-text);
1190
- margin-bottom: 12px;
1191
- }
1192
-
1193
- .lp-feature-description {
1194
- font-size: 17px;
1195
- color: var(--lp-secondary);
1196
- line-height: 1.6;
1197
- }
1198
-
1199
- /* Timeline v1 */
1200
- .lp-timeline-v1 {
1201
- justify-content: center;
1202
- }
1203
-
1204
- .lp-timeline-header {
1205
- margin-bottom: 64px;
1206
- }
1207
-
1208
- .lp-timeline-track {
1209
- display: flex;
1210
- justify-content: space-between;
1211
- align-items: flex-start;
1212
- width: 100%;
1213
- max-width: 1100px;
1214
- position: relative;
1215
- }
1216
-
1217
- .lp-timeline-track::before {
1218
- content: '';
1219
- position: absolute;
1220
- top: 12px;
1221
- left: 10%;
1222
- right: 10%;
1223
- height: 2px;
1224
- background: rgba(255, 255, 255, 0.1);
1225
- z-index: 0;
1226
- }
1227
-
1228
- .lp-timeline-item {
1229
- position: relative;
1230
- z-index: 1;
1231
- text-align: center;
1232
- width: 220px;
1233
- }
1234
-
1235
- .lp-timeline-dot {
1236
- width: 24px;
1237
- height: 24px;
1238
- border-radius: 50%;
1239
- background: var(--lp-accent);
1240
- margin: 0 auto 20px;
1241
- border: 4px solid var(--lp-bg);
1242
- }
1243
-
1244
- .lp-timeline-date {
1245
- font-size: 14px;
1246
- font-weight: 700;
1247
- color: var(--lp-accent);
1248
- margin-bottom: 8px;
1249
- font-family: 'JetBrains Mono', monospace;
1250
- }
1251
-
1252
- .lp-timeline-title {
1253
- font-size: 20px;
1254
- font-weight: 700;
1255
- color: var(--lp-text);
1256
- margin-bottom: 8px;
1257
- }
1258
-
1259
- .lp-timeline-description {
1260
- font-size: 15px;
1261
- color: var(--lp-secondary);
1262
- line-height: 1.55;
1263
- }
1264
-
1265
- /* Timeline v2 */
1266
- .lp-timeline-v2 {
1267
- justify-content: flex-start;
1268
- padding: 64px 80px;
1269
- }
1270
-
1271
- .lp-timeline-v2-header {
1272
- margin-bottom: 40px;
1273
- }
1274
-
1275
- .lp-timeline-v2-list {
1276
- display: flex;
1277
- flex-direction: column;
1278
- gap: 28px;
1279
- width: 100%;
1280
- max-width: 1000px;
1281
- margin: 0 auto;
1282
- }
1283
-
1284
- .lp-timeline-v2-item {
1285
- display: flex;
1286
- gap: 20px;
1287
- align-items: flex-start;
1288
- }
1289
-
1290
- .lp-timeline-v2-marker {
1291
- position: relative;
1292
- display: flex;
1293
- flex-direction: column;
1294
- align-items: center;
1295
- width: 24px;
1296
- min-height: 100%;
1297
- }
1298
-
1299
- .lp-timeline-v2-dot {
1300
- width: 16px;
1301
- height: 16px;
1302
- border-radius: 50%;
1303
- background: var(--lp-accent);
1304
- flex-shrink: 0;
1305
- }
1306
-
1307
- .lp-timeline-v2-line {
1308
- position: absolute;
1309
- top: 24px;
1310
- left: 50%;
1311
- transform: translateX(-50%);
1312
- width: 2px;
1313
- height: calc(100% + 12px);
1314
- background: rgba(255, 255, 255, 0.1);
1315
- }
1316
-
1317
- .lp-timeline-v2-body {
1318
- flex: 1;
1319
- padding-top: 0;
1320
- }
1321
-
1322
- .lp-timeline-v2-date {
1323
- font-size: 14px;
1324
- font-weight: 700;
1325
- color: var(--lp-accent);
1326
- margin-bottom: 4px;
1327
- font-family: var(--lp-font-mono);
1328
- }
1329
-
1330
- .lp-timeline-v2-title {
1331
- font-size: 20px;
1332
- font-weight: 700;
1333
- color: var(--lp-text);
1334
- margin-bottom: 6px;
1335
- }
1336
-
1337
- .lp-timeline-v2-description {
1338
- font-size: 15px;
1339
- color: var(--lp-secondary);
1340
- line-height: 1.5;
1341
- }
1342
-
1343
- /* Roadmap v2 */
1344
- .lp-roadmap-v2 {
1345
- justify-content: flex-start;
1346
- padding: 64px 80px;
1347
- }
1348
-
1349
- .lp-roadmap-v2-header {
1350
- margin-bottom: 48px;
1351
- }
1352
-
1353
- .lp-roadmap-v2-track {
1354
- display: flex;
1355
- gap: 32px;
1356
- width: 100%;
1357
- max-width: 1040px;
1358
- margin: 0 auto;
1359
- align-items: stretch;
1360
- }
1361
-
1362
- .lp-roadmap-v2-phase {
1363
- flex: 1;
1364
- background: var(--lp-surface);
1365
- border: 1px solid var(--lp-border);
1366
- border-radius: 16px;
1367
- padding: 24px;
1368
- position: relative;
1369
- min-height: 360px;
1370
- }
1371
-
1372
- .lp-roadmap-v2-phase:not(:last-child) .lp-roadmap-v2-connector {
1373
- position: absolute;
1374
- top: 50%;
1375
- right: -26px;
1376
- width: 24px;
1377
- height: 2px;
1378
- background: var(--lp-border);
1379
- }
1380
-
1381
- .lp-roadmap-v2-phase-title {
1382
- font-size: 20px;
1383
- font-weight: 700;
1384
- color: var(--lp-accent);
1385
- margin-bottom: 16px;
1386
- }
1387
-
1388
- .lp-roadmap-v2-goals {
1389
- list-style: none;
1390
- padding: 0;
1391
- margin: 0;
1392
- }
1393
-
1394
- .lp-roadmap-v2-goal-item {
1395
- font-size: 16px;
1396
- color: var(--lp-secondary);
1397
- padding: 6px 0 6px 14px;
1398
- position: relative;
1399
- }
1400
-
1401
- .lp-roadmap-v2-goal-item::before {
1402
- content: '•';
1403
- position: absolute;
1404
- left: 0;
1405
- color: var(--lp-accent);
1406
- }
1407
-
1408
- /* Pricing v2 */
1409
- .lp-pricing-v2 {
1410
- justify-content: flex-start;
1411
- padding: 64px 80px;
1412
- }
1413
-
1414
- .lp-pricing-v2-header {
1415
- margin-bottom: 48px;
1416
- }
1417
-
1418
- .lp-pricing-v2-grid {
1419
- display: grid;
1420
- grid-template-columns: repeat(3, 1fr);
1421
- gap: 28px;
1422
- width: 100%;
1423
- max-width: 1040px;
1424
- margin: 0 auto;
1425
- }
1426
-
1427
- .lp-pricing-v2-card {
1428
- background: var(--lp-surface);
1429
- border: 1px solid var(--lp-border);
1430
- border-radius: 16px;
1431
- padding: 32px;
1432
- display: flex;
1433
- flex-direction: column;
1434
- }
1435
-
1436
- .lp-pricing-v2-card-highlighted {
1437
- border-color: var(--lp-accent);
1438
- background: var(--lp-accent);
1439
- }
1440
-
1441
- .lp-pricing-v2-card-highlighted .lp-pricing-v2-name,
1442
- .lp-pricing-v2-card-highlighted .lp-pricing-v2-price,
1443
- .lp-pricing-v2-card-highlighted .lp-pricing-v2-feature-item,
1444
- .lp-pricing-v2-card-highlighted .lp-pricing-v2-avatar-placeholder {
1445
- color: #fff;
1446
- }
1447
-
1448
- .lp-pricing-v2-card-highlighted .lp-pricing-v2-period,
1449
- .lp-pricing-v2-card-highlighted .lp-pricing-v2-feature-item::before {
1450
- color: rgba(255, 255, 255, 0.8);
1451
- }
1452
-
1453
- .lp-pricing-v2-name {
1454
- font-size: 22px;
1455
- font-weight: 700;
1456
- margin-bottom: 16px;
1457
- color: var(--lp-text);
1458
- }
1459
-
1460
- .lp-pricing-v2-price-row {
1461
- margin-bottom: 20px;
1462
- display: flex;
1463
- align-items: baseline;
1464
- gap: 4px;
1465
- }
1466
-
1467
- .lp-pricing-v2-price {
1468
- font-size: 48px;
1469
- font-weight: 800;
1470
- color: var(--lp-accent);
1471
- }
1472
-
1473
- .lp-pricing-v2-period {
1474
- font-size: 16px;
1475
- color: var(--lp-secondary);
1476
- }
1477
-
1478
- .lp-pricing-v2-features {
1479
- list-style: none;
1480
- padding: 0;
1481
- margin: 0;
1482
- display: flex;
1483
- flex-direction: column;
1484
- gap: 10px;
1485
- }
1486
-
1487
- .lp-pricing-v2-feature-item {
1488
- font-size: 16px;
1489
- color: var(--lp-secondary);
1490
- padding-left: 18px;
1491
- position: relative;
1492
- }
1493
-
1494
- .lp-pricing-v2-feature-item::before {
1495
- content: '✓';
1496
- position: absolute;
1497
- left: 0;
1498
- color: var(--lp-accent);
1499
- font-weight: 700;
1500
- }
1501
-
1502
- /* Feature v2 */
1503
- .lp-feature-v2 {
1504
- justify-content: flex-start;
1505
- padding: 64px 80px;
1506
- }
1507
-
1508
- .lp-feature-v2-header {
1509
- margin-bottom: 48px;
1510
- }
1511
-
1512
- .lp-feature-v2-grid {
1513
- display: grid;
1514
- grid-template-columns: repeat(3, 1fr);
1515
- gap: 32px;
1516
- width: 100%;
1517
- max-width: 1040px;
1518
- margin: 0 auto;
1519
- }
1520
-
1521
- .lp-feature-v2-card {
1522
- background: var(--lp-surface);
1523
- border: 1px solid var(--lp-border);
1524
- border-radius: 16px;
1525
- padding: 32px;
1526
- }
1527
-
1528
- .lp-feature-v2-icon {
1529
- font-size: 36px;
1530
- color: var(--lp-accent);
1531
- margin-bottom: 16px;
1532
- }
1533
-
1534
- .lp-feature-v2-title {
1535
- font-size: 24px;
1536
- font-weight: 700;
1537
- margin-bottom: 12px;
1538
- color: var(--lp-text);
1539
- }
1540
-
1541
- .lp-feature-v2-description {
1542
- font-size: 16px;
1543
- color: var(--lp-secondary);
1544
- line-height: 1.55;
1545
- }
1546
-
1547
- /* Team v2 */
1548
- .lp-team-v2 {
1549
- justify-content: flex-start;
1550
- padding: 64px 80px;
1551
- }
1552
-
1553
- .lp-team-v2-header {
1554
- margin-bottom: 48px;
1555
- }
1556
-
1557
- .lp-team-v2-grid {
1558
- display: grid;
1559
- grid-template-columns: repeat(4, 1fr);
1560
- gap: 24px;
1561
- width: 100%;
1562
- max-width: 1040px;
1563
- margin: 0 auto;
1564
- }
1565
-
1566
- .lp-team-v2-card {
1567
- background: var(--lp-surface);
1568
- border: 1px solid var(--lp-border);
1569
- border-radius: 16px;
1570
- padding: 24px;
1571
- text-align: center;
1572
- }
1573
-
1574
- .lp-team-v2-avatar {
1575
- width: 80px;
1576
- height: 80px;
1577
- border-radius: 50%;
1578
- background: var(--lp-border);
1579
- margin: 0 auto 16px;
1580
- background-size: cover;
1581
- background-position: center;
1582
- display: flex;
1583
- align-items: center;
1584
- justify-content: center;
1585
- }
1586
-
1587
- .lp-team-v2-avatar-placeholder {
1588
- font-size: 28px;
1589
- font-weight: 700;
1590
- color: var(--lp-text);
1591
- }
1592
-
1593
- .lp-team-v2-name {
1594
- font-size: 20px;
1595
- font-weight: 700;
1596
- margin-bottom: 4px;
1597
- color: var(--lp-text);
1598
- }
1599
-
1600
- .lp-team-v2-role {
1601
- font-size: 14px;
1602
- color: var(--lp-accent);
1603
- margin-bottom: 12px;
1604
- }
1605
-
1606
- .lp-team-v2-bio {
1607
- font-size: 14px;
1608
- color: var(--lp-secondary);
1609
- line-height: 1.5;
1610
- }
1611
-
1612
- /* Metric v3 */
1613
- .lp-metric-v3 {
1614
- justify-content: flex-start;
1615
- padding: 64px 80px;
1616
- }
1617
-
1618
- .lp-metric-v3-header {
1619
- margin-bottom: 48px;
1620
- }
1621
-
1622
- .lp-metric-v3-grid {
1623
- display: grid;
1624
- grid-template-columns: repeat(2, 1fr);
1625
- gap: 40px;
1626
- width: 100%;
1627
- max-width: 960px;
1628
- margin: 0 auto;
1629
- }
1630
-
1631
- .lp-metric-v3-card {
1632
- background: var(--lp-surface);
1633
- border: 1px solid var(--lp-border);
1634
- border-radius: 16px;
1635
- padding: 40px;
1636
- }
1637
-
1638
- .lp-metric-v3-label {
1639
- font-size: 16px;
1640
- color: var(--lp-secondary);
1641
- margin-bottom: 12px;
1642
- }
1643
-
1644
- .lp-metric-v3-value-row {
1645
- display: flex;
1646
- align-items: baseline;
1647
- gap: 8px;
1648
- margin-bottom: 12px;
1649
- }
1650
-
1651
- .lp-metric-v3-value {
1652
- font-size: 80px;
1653
- font-weight: 900;
1654
- color: var(--lp-text);
1655
- line-height: 1;
1656
- }
1657
-
1658
- .lp-metric-v3-unit {
1659
- font-size: 24px;
1660
- color: var(--lp-secondary);
1661
- }
1662
-
1663
- .lp-metric-v3-change {
1664
- font-size: 18px;
1665
- font-weight: 700;
1666
- color: var(--lp-accent);
1667
- }
1668
-
1669
- /* Pricing v1 */
1670
- .lp-pricing-v1 {
1671
- justify-content: center;
1672
- }
1673
-
1674
- .lp-pricing-header {
1675
- margin-bottom: 56px;
1676
- }
1677
-
1678
- .lp-pricing-grid {
1679
- display: grid;
1680
- grid-template-columns: repeat(3, 1fr);
1681
- gap: 28px;
1682
- width: 100%;
1683
- max-width: 1100px;
1684
- align-items: center;
1685
- }
1686
-
1687
- .lp-pricing-card {
1688
- background: var(--lp-surface-elevated);
1689
- border: 1px solid rgba(6, 182, 212, 0.15);
1690
- border-radius: 16px;
1691
- padding: 36px 28px;
1692
- text-align: center;
1693
- }
1694
-
1695
- .lp-pricing-card-highlight {
1696
- transform: scale(1.05);
1697
- border-color: var(--lp-accent);
1698
- box-shadow: 0 0 24px rgba(6, 182, 212, 0.25);
1699
- }
1700
-
1701
- .lp-pricing-name {
1702
- font-size: 22px;
1703
- font-weight: 700;
1704
- color: var(--lp-text);
1705
- margin-bottom: 16px;
1706
- }
1707
-
1708
- .lp-pricing-price-row {
1709
- margin-bottom: 24px;
1710
- }
1711
-
1712
- .lp-pricing-price {
1713
- font-size: 48px;
1714
- font-weight: 800;
1715
- color: var(--lp-text);
1716
- }
1717
-
1718
- .lp-pricing-period {
1719
- font-size: 16px;
1720
- color: var(--lp-secondary);
1721
- margin-left: 4px;
1722
- }
1723
-
1724
- .lp-pricing-features {
1725
- list-style: none;
1726
- padding: 0;
1727
- margin: 0 0 28px;
1728
- }
1729
-
1730
- .lp-pricing-features li {
1731
- font-size: 16px;
1732
- color: var(--lp-secondary);
1733
- padding: 10px 0;
1734
- border-bottom: 1px solid rgba(255, 255, 255, 0.08);
1735
- }
1736
-
1737
- .lp-pricing-features li:last-child {
1738
- border-bottom: none;
1739
- }
1740
-
1741
- .lp-pricing-cta {
1742
- display: inline-block;
1743
- background: var(--lp-accent);
1744
- color: var(--lp-textInverse);
1745
- font-size: 16px;
1746
- font-weight: 600;
1747
- padding: 12px 28px;
1748
- border-radius: 100px;
1749
- }
1750
-
1751
- /* Additional layouts */
1752
- .lp-split-v1 {
1753
- display: flex;
1754
- width: 100%;
1755
- height: 100%;
1756
- background: var(--lp-surface);
1757
- }
1758
-
1759
- .lp-split-v1-content {
1760
- flex: 1;
1761
- display: flex;
1762
- flex-direction: column;
1763
- justify-content: center;
1764
- padding: 80px;
1765
- }
1766
-
1767
- .lp-split-v1-title {
1768
- margin-bottom: 32px;
1769
- }
1770
-
1771
- .lp-split-v1-points {
1772
- list-style: none;
1773
- padding: 0;
1774
- margin: 0;
1775
- }
1776
-
1777
- .lp-split-v1-points li {
1778
- font-size: 20px;
1779
- color: var(--lp-secondary);
1780
- padding: 12px 0;
1781
- border-bottom: 1px solid var(--lp-border);
1782
- }
1783
-
1784
- .lp-split-v1-points li:last-child {
1785
- border-bottom: none;
1786
- }
1787
-
1788
- .lp-split-v1-media {
1789
- flex: 1;
1790
- position: relative;
1791
- background: var(--lp-bg);
1792
- }
1793
-
1794
- .lp-split-v1-media img {
1795
- width: 100%;
1796
- height: 100%;
1797
- object-fit: cover;
1798
- }
1799
-
1800
- .lp-split-v1-placeholder {
1801
- width: 100%;
1802
- height: 100%;
1803
- background: var(--lp-bg);
1804
- border: 2px dashed var(--lp-border);
1805
- }
1806
-
1807
- .lp-stats-v1 {
1808
- width: 100%;
1809
- height: 100%;
1810
- padding: 80px;
1811
- background: var(--lp-surface);
1812
- display: flex;
1813
- flex-direction: column;
1814
- }
1815
-
1816
- .lp-stats-v1-header {
1817
- margin-bottom: 48px;
1818
- }
1819
-
1820
- .lp-stats-v1-grid {
1821
- display: grid;
1822
- grid-template-columns: repeat(2, 1fr);
1823
- gap: 24px;
1824
- flex: 1;
1825
- }
1826
-
1827
- .lp-stats-v1-card {
1828
- background: var(--lp-bg);
1829
- border-radius: 16px;
1830
- padding: 32px;
1831
- display: flex;
1832
- flex-direction: column;
1833
- justify-content: center;
1834
- }
1835
-
1836
- .lp-stats-v1-label {
1837
- font-size: 16px;
1838
- color: var(--lp-secondary);
1839
- margin-bottom: 12px;
1840
- }
1841
-
1842
- .lp-stats-v1-value-row {
1843
- margin-bottom: 8px;
1844
- }
1845
-
1846
- .lp-stats-v1-value {
1847
- font-size: 48px;
1848
- font-weight: 800;
1849
- color: var(--lp-text);
1850
- }
1851
-
1852
- .lp-stats-v1-unit {
1853
- font-size: 20px;
1854
- color: var(--lp-secondary);
1855
- margin-left: 4px;
1856
- }
1857
-
1858
- .lp-stats-v1-change {
1859
- font-size: 14px;
1860
- color: var(--lp-accent);
1861
- }
1862
-
1863
- .lp-gallery-v1 {
1864
- width: 100%;
1865
- height: 100%;
1866
- padding: 80px;
1867
- background: var(--lp-surface);
1868
- display: flex;
1869
- flex-direction: column;
1870
- }
1871
-
1872
- .lp-gallery-v1-header {
1873
- margin-bottom: 40px;
1874
- }
1875
-
1876
- .lp-gallery-v1-grid {
1877
- display: grid;
1878
- grid-template-columns: repeat(2, 1fr);
1879
- gap: 24px;
1880
- flex: 1;
1881
- }
1882
-
1883
- .lp-gallery-v1-item {
1884
- position: relative;
1885
- border-radius: 12px;
1886
- overflow: hidden;
1887
- background: var(--lp-bg);
1888
- }
1889
-
1890
- .lp-gallery-v1-item img {
1891
- width: 100%;
1892
- height: 100%;
1893
- object-fit: cover;
1894
- }
1895
-
1896
- .lp-gallery-v1-placeholder {
1897
- width: 100%;
1898
- height: 100%;
1899
- background: var(--lp-bg);
1900
- border: 2px dashed var(--lp-border);
1901
- }
1902
-
1903
- .lp-gallery-v1-caption {
1904
- position: absolute;
1905
- bottom: 0;
1906
- left: 0;
1907
- right: 0;
1908
- padding: 12px 16px;
1909
- background: rgba(0, 0, 0, 0.55);
1910
- color: #ffffff;
1911
- font-size: 14px;
1912
- }
1913
-
1914
- .lp-faq-v1 {
1915
- width: 100%;
1916
- height: 100%;
1917
- padding: 80px;
1918
- background: var(--lp-surface);
1919
- display: flex;
1920
- flex-direction: column;
1921
- }
1922
-
1923
- .lp-faq-v1-header {
1924
- margin-bottom: 40px;
1925
- }
1926
-
1927
- .lp-faq-v1-list {
1928
- display: flex;
1929
- flex-direction: column;
1930
- gap: 24px;
1931
- }
1932
-
1933
- .lp-faq-v1-item {
1934
- background: var(--lp-bg);
1935
- border-radius: 12px;
1936
- padding: 24px;
1937
- }
1938
-
1939
- .lp-faq-v1-question,
1940
- .lp-faq-v1-answer {
1941
- display: flex;
1942
- gap: 12px;
1943
- align-items: flex-start;
1944
- }
1945
-
1946
- .lp-faq-v1-question {
1947
- font-size: 18px;
1948
- font-weight: 600;
1949
- color: var(--lp-text);
1950
- margin-bottom: 12px;
1951
- }
1952
-
1953
- .lp-faq-v1-answer {
1954
- font-size: 16px;
1955
- color: var(--lp-secondary);
1956
- line-height: 1.6;
1957
- }
1958
-
1959
- .lp-faq-v1-q,
1960
- .lp-faq-v1-a {
1961
- display: inline-flex;
1962
- align-items: center;
1963
- justify-content: center;
1964
- width: 24px;
1965
- height: 24px;
1966
- border-radius: 50%;
1967
- font-size: 12px;
1968
- font-weight: 700;
1969
- flex-shrink: 0;
1970
- }
1971
-
1972
- .lp-faq-v1-q {
1973
- background: var(--lp-accent);
1974
- color: var(--lp-textInverse);
1975
- }
1976
-
1977
- .lp-faq-v1-a {
1978
- background: var(--lp-border);
1979
- color: var(--lp-text);
1980
- }
1981
-
1982
- .lp-partners-v1 {
1983
- width: 100%;
1984
- height: 100%;
1985
- padding: 80px;
1986
- background: var(--lp-surface);
1987
- display: flex;
1988
- flex-direction: column;
1989
- }
1990
-
1991
- .lp-partners-v1-header {
1992
- margin-bottom: 48px;
1993
- }
1994
-
1995
- .lp-partners-v1-grid {
1996
- display: grid;
1997
- grid-template-columns: repeat(4, 1fr);
1998
- gap: 24px;
1999
- flex: 1;
2000
- align-content: center;
2001
- }
2002
-
2003
- .lp-partners-v1-card {
2004
- background: var(--lp-bg);
2005
- border-radius: 12px;
2006
- padding: 24px;
2007
- display: flex;
2008
- flex-direction: column;
2009
- align-items: center;
2010
- justify-content: center;
2011
- gap: 12px;
2012
- }
2013
-
2014
- .lp-partners-v1-card img {
2015
- max-width: 100%;
2016
- max-height: 48px;
2017
- object-fit: contain;
2018
- }
2019
-
2020
- .lp-partners-v1-logo-placeholder {
2021
- width: 64px;
2022
- height: 64px;
2023
- border-radius: 50%;
2024
- background: var(--lp-bg);
2025
- border: 2px dashed var(--lp-border);
2026
- }
2027
-
2028
- .lp-partners-v1-name {
2029
- font-size: 14px;
2030
- color: var(--lp-secondary);
2031
- text-align: center;
2032
- }
2033
-
2034
- .lp-testimonial-v1 {
2035
- width: 100%;
2036
- height: 100%;
2037
- padding: 80px;
2038
- background: var(--lp-surface);
2039
- display: flex;
2040
- align-items: center;
2041
- justify-content: center;
2042
- }
2043
-
2044
- .lp-testimonial-v1-content {
2045
- max-width: 900px;
2046
- }
2047
-
2048
- .lp-testimonial-v1-quote {
2049
- position: relative;
2050
- margin-bottom: 40px;
2051
- }
2052
-
2053
- .lp-testimonial-v1-mark {
2054
- position: absolute;
2055
- top: -24px;
2056
- left: -16px;
2057
- font-size: 120px;
2058
- line-height: 1;
2059
- color: var(--lp-accent);
2060
- opacity: 0.2;
2061
- font-family: Georgia, serif;
2062
- }
2063
-
2064
- .lp-testimonial-v1-quote blockquote {
2065
- position: relative;
2066
- font-size: 36px;
2067
- font-weight: 500;
2068
- line-height: 1.4;
2069
- color: var(--lp-text);
2070
- margin: 0;
2071
- padding: 0;
2072
- }
2073
-
2074
- .lp-testimonial-v1-author {
2075
- display: flex;
2076
- align-items: center;
2077
- gap: 20px;
2078
- }
2079
-
2080
- .lp-testimonial-v1-author img,
2081
- .lp-testimonial-v1-avatar-placeholder {
2082
- width: 64px;
2083
- height: 64px;
2084
- border-radius: 50%;
2085
- object-fit: cover;
2086
- }
2087
-
2088
- .lp-testimonial-v1-avatar-placeholder {
2089
- background: var(--lp-bg);
2090
- border: 2px dashed var(--lp-border);
2091
- }
2092
-
2093
- .lp-testimonial-v1-name {
2094
- font-size: 18px;
2095
- font-weight: 600;
2096
- color: var(--lp-text);
2097
- }
2098
-
2099
- .lp-testimonial-v1-role {
2100
- font-size: 14px;
2101
- color: var(--lp-secondary);
2102
- }
2103
-
2104
- .lp-roadmap-v1 {
2105
- width: 100%;
2106
- height: 100%;
2107
- padding: 80px;
2108
- background: var(--lp-surface);
2109
- display: flex;
2110
- flex-direction: column;
2111
- }
2112
-
2113
- .lp-roadmap-v1-header {
2114
- margin-bottom: 48px;
2115
- }
2116
-
2117
- .lp-roadmap-v1-track {
2118
- position: relative;
2119
- padding-left: 24px;
2120
- flex: 1;
2121
- overflow-y: auto;
2122
- }
2123
-
2124
- .lp-roadmap-v1-track::before {
2125
- content: '';
2126
- position: absolute;
2127
- top: 12px;
2128
- bottom: 12px;
2129
- left: 7px;
2130
- width: 2px;
2131
- background: var(--lp-border);
2132
- }
2133
-
2134
- .lp-roadmap-v1-phase {
2135
- position: relative;
2136
- padding-left: 36px;
2137
- margin-bottom: 32px;
2138
- }
2139
-
2140
- .lp-roadmap-v1-dot {
2141
- position: absolute;
2142
- top: 6px;
2143
- left: 0;
2144
- width: 16px;
2145
- height: 16px;
2146
- border-radius: 50%;
2147
- background: var(--lp-accent);
2148
- border: 3px solid var(--lp-surface);
2149
- box-shadow: 0 0 0 2px var(--lp-accent);
2150
- }
2151
-
2152
- .lp-roadmap-v1-top {
2153
- display: flex;
2154
- align-items: center;
2155
- gap: 12px;
2156
- margin-bottom: 8px;
2157
- }
2158
-
2159
- .lp-roadmap-v1-title {
2160
- font-size: 20px;
2161
- font-weight: 700;
2162
- color: var(--lp-text);
2163
- }
2164
-
2165
- .lp-roadmap-v1-status {
2166
- font-size: 12px;
2167
- font-weight: 600;
2168
- color: var(--lp-accent);
2169
- background: rgba(6, 182, 212, 0.12);
2170
- padding: 4px 10px;
2171
- border-radius: 100px;
2172
- }
2173
-
2174
- .lp-roadmap-v1-description {
2175
- font-size: 16px;
2176
- color: var(--lp-secondary);
2177
- line-height: 1.6;
2178
- }
2179
-
2180
- @media print {
2181
- html, body {
2182
- display: block;
2183
- background: var(--lp-bg) !important;
2184
- -webkit-print-color-adjust: exact;
2185
- print-color-adjust: exact;
2186
- }
2187
-
2188
- .lp-editor-bar,
2189
- .lp-nav,
2190
- .lp-page-counter,
2191
- .lp-hint {
2192
- display: none !important;
2193
- }
2194
-
2195
- .lp-deck {
2196
- box-shadow: none;
2197
- border-radius: 0;
2198
- width: 100% !important;
2199
- height: auto !important;
2200
- overflow: visible;
2201
- background: transparent !important;
2202
- }
2203
-
2204
- .lp-slide-wrapper {
2205
- position: relative;
2206
- transform: none !important;
2207
- opacity: 1 !important;
2208
- width: 100% !important;
2209
- height: 720px !important;
2210
- page-break-after: always;
2211
- break-after: page;
2212
- z-index: auto !important;
2213
- }
2214
-
2215
- .lp-slide {
2216
- border: none;
2217
- border-radius: 0;
2218
- box-shadow: none;
2219
- background: var(--lp-surface) !important;
2220
- }
2221
-
2222
- .lp-slide-wrapper:last-child {
2223
- page-break-after: auto;
2224
- break-after: auto;
2225
- }
2226
- }
2227
- .lp-testimonial-v2 {
2228
- width: 100%;
2229
- height: 100%;
2230
- padding: 80px;
2231
- background: var(--lp-surface);
2232
- display: flex;
2233
- align-items: center;
2234
- justify-content: center;
2235
- }
2236
-
2237
- .lp-testimonial-v2-card {
2238
- width: 100%;
2239
- max-width: 900px;
2240
- background: var(--lp-bg);
2241
- border: 1px solid var(--lp-border);
2242
- border-radius: var(--lp-radius-large);
2243
- padding: 48px;
2244
- position: relative;
2245
- }
2246
-
2247
- .lp-testimonial-v2-logo {
2248
- position: absolute;
2249
- top: 32px;
2250
- right: 40px;
2251
- height: 32px;
2252
- max-width: 120px;
2253
- object-fit: contain;
2254
- }
2255
-
2256
- .lp-testimonial-v2-company {
2257
- position: absolute;
2258
- top: 32px;
2259
- right: 40px;
2260
- font-size: 14px;
2261
- font-weight: 600;
2262
- color: var(--lp-secondary);
2263
- text-transform: uppercase;
2264
- letter-spacing: 0.05em;
2265
- }
2266
-
2267
- .lp-testimonial-v2-quote {
2268
- margin: 32px 0 40px;
2269
- }
2270
-
2271
- .lp-testimonial-v2-quote blockquote {
2272
- font-size: 32px;
2273
- font-weight: 500;
2274
- line-height: 1.4;
2275
- color: var(--lp-text);
2276
- margin: 0;
2277
- padding: 0;
2278
- }
2279
-
2280
- .lp-testimonial-v2-footer {
2281
- display: flex;
2282
- align-items: flex-end;
2283
- justify-content: space-between;
2284
- gap: 24px;
2285
- }
2286
-
2287
- .lp-testimonial-v2-name {
2288
- font-size: 18px;
2289
- font-weight: 600;
2290
- color: var(--lp-text);
2291
- }
2292
-
2293
- .lp-testimonial-v2-role {
2294
- font-size: 14px;
2295
- color: var(--lp-secondary);
2296
- margin-top: 4px;
2297
- }
2298
-
2299
- .lp-testimonial-v2-metric {
2300
- text-align: right;
2301
- flex-shrink: 0;
2302
- }
2303
-
2304
- .lp-testimonial-v2-metric-value {
2305
- font-size: 36px;
2306
- font-weight: 700;
2307
- color: var(--lp-accent);
2308
- line-height: 1;
2309
- }
2310
-
2311
- .lp-testimonial-v2-metric-label {
2312
- font-size: 13px;
2313
- color: var(--lp-secondary);
2314
- margin-top: 4px;
2315
- }
2316
- .lp-chart-v2 {
2317
- width: 100%;
2318
- height: 100%;
2319
- padding: 80px;
2320
- background: var(--lp-surface);
2321
- display: flex;
2322
- flex-direction: column;
2323
- }
2324
-
2325
- .lp-chart-v2-header {
2326
- margin-bottom: 40px;
2327
- }
2328
-
2329
- .lp-chart-v2-body {
2330
- flex: 1;
2331
- display: flex;
2332
- align-items: center;
2333
- justify-content: center;
2334
- }
2335
-
2336
- .lp-chart-v2-svg {
2337
- width: 100%;
2338
- max-width: 900px;
2339
- height: auto;
2340
- }
2341
-
2342
- .lp-chart-v2-grid {
2343
- stroke: var(--lp-border);
2344
- stroke-width: 1;
2345
- }
2346
-
2347
- .lp-chart-v2-axis-text {
2348
- fill: var(--lp-secondary);
2349
- font-size: 12px;
2350
- font-family: var(--lp-font-mono);
2351
- }
2352
-
2353
- .lp-chart-v2-bar {
2354
- opacity: 0.9;
2355
- }
2356
-
2357
- .lp-chart-v2-legend-text {
2358
- fill: var(--lp-secondary);
2359
- font-size: 12px;
2360
- font-family: var(--lp-font-body);
2361
- }
2362
- .lp-gallery-v2 {
2363
- width: 100%;
2364
- height: 100%;
2365
- padding: 80px;
2366
- background: var(--lp-surface);
2367
- display: flex;
2368
- flex-direction: column;
2369
- }
2370
-
2371
- .lp-gallery-v2-header {
2372
- margin-bottom: 40px;
2373
- }
2374
-
2375
- .lp-gallery-v2-grid {
2376
- display: grid;
2377
- grid-template-columns: repeat(3, 1fr);
2378
- gap: 24px;
2379
- flex: 1;
2380
- align-content: start;
2381
- }
2382
-
2383
- .lp-gallery-v2-item {
2384
- display: flex;
2385
- flex-direction: column;
2386
- gap: 10px;
2387
- }
2388
-
2389
- .lp-gallery-v2-item img,
2390
- .lp-gallery-v2-placeholder {
2391
- width: 100%;
2392
- aspect-ratio: 16 / 10;
2393
- object-fit: cover;
2394
- border-radius: var(--lp-radius-medium);
2395
- background: var(--lp-bg);
2396
- border: 1px solid var(--lp-border);
2397
- }
2398
-
2399
- .lp-gallery-v2-caption {
2400
- font-size: 14px;
2401
- color: var(--lp-secondary);
2402
- text-align: center;
2403
- line-height: 1.4;
2404
- }
2405
-
2406
- .lp-gallery-v3 {
2407
- width: 100%;
2408
- height: 100%;
2409
- padding: 80px;
2410
- background: var(--lp-surface);
2411
- display: flex;
2412
- flex-direction: column;
2413
- }
2414
-
2415
- .lp-gallery-v3-title {
2416
- margin-bottom: 40px;
2417
- }
2418
-
2419
- .lp-gallery-v3-grid {
2420
- display: grid;
2421
- grid-template-columns: repeat(3, 1fr);
2422
- gap: 32px;
2423
- flex: 1;
2424
- align-content: center;
2425
- }
2426
-
2427
- .lp-gallery-v3-item {
2428
- display: flex;
2429
- flex-direction: column;
2430
- gap: 16px;
2431
- }
2432
-
2433
- .lp-gallery-v3-image,
2434
- .lp-gallery-v3-placeholder {
2435
- width: 100%;
2436
- height: 280px;
2437
- object-fit: cover;
2438
- border-radius: var(--lp-radius-large);
2439
- background: var(--lp-bg);
2440
- border: 1px solid var(--lp-border);
2441
- }
2442
-
2443
- .lp-gallery-v3-caption {
2444
- font-size: 16px;
2445
- color: var(--lp-secondary);
2446
- text-align: center;
2447
- line-height: 1.5;
2448
- }
2449
-
2450
- .lp-testimonial-v3 {
2451
- flex-direction: row;
2452
- align-items: stretch;
2453
- padding: 0;
2454
- }
2455
-
2456
- .lp-testimonial-v3-left {
2457
- flex: 1.3;
2458
- display: flex;
2459
- flex-direction: column;
2460
- justify-content: center;
2461
- padding: 80px 64px;
2462
- background: rgba(31, 41, 55, 0.6);
2463
- position: relative;
2464
- }
2465
-
2466
- .lp-testimonial-v3-mark {
2467
- position: absolute;
2468
- top: 48px;
2469
- left: 48px;
2470
- font-size: 160px;
2471
- font-weight: 800;
2472
- line-height: 1;
2473
- color: var(--lp-accent);
2474
- opacity: 0.25;
2475
- user-select: none;
2476
- }
2477
-
2478
- .lp-testimonial-v3-quote {
2479
- position: relative;
2480
- font-size: 34px;
2481
- line-height: 1.5;
2482
- color: var(--lp-text);
2483
- margin: 0;
2484
- padding: 0;
2485
- }
2486
-
2487
- .lp-testimonial-v3-quote blockquote {
2488
- margin: 0;
2489
- padding: 0;
2490
- }
2491
-
2492
- .lp-testimonial-v3-right {
2493
- flex: 1;
2494
- display: flex;
2495
- align-items: center;
2496
- justify-content: center;
2497
- padding: 80px 64px;
2498
- background: var(--lp-surface);
2499
- }
2500
-
2501
- .lp-testimonial-v3-card {
2502
- width: 100%;
2503
- max-width: 320px;
2504
- text-align: center;
2505
- }
2506
-
2507
- .lp-testimonial-v3-avatar,
2508
- .lp-testimonial-v3-avatar-placeholder {
2509
- width: 96px;
2510
- height: 96px;
2511
- border-radius: 50%;
2512
- object-fit: cover;
2513
- margin: 0 auto 24px;
2514
- background: rgba(17, 24, 39, 0.8);
2515
- border: 2px dashed var(--lp-border);
2516
- }
2517
-
2518
- .lp-testimonial-v3-author {
2519
- font-size: 22px;
2520
- font-weight: 700;
2521
- color: var(--lp-text);
2522
- }
2523
-
2524
- .lp-testimonial-v3-role {
2525
- font-size: 15px;
2526
- color: var(--lp-secondary);
2527
- margin-top: 4px;
2528
- }
2529
-
2530
- .lp-testimonial-v3-company {
2531
- font-size: 14px;
2532
- color: var(--lp-secondary);
2533
- margin-top: 4px;
2534
- font-family: var(--lp-font-mono);
2535
- }
2536
-
2537
- .lp-testimonial-v3-metric {
2538
- margin-top: 28px;
2539
- padding-top: 24px;
2540
- border-top: 1px solid var(--lp-border);
2541
- }
2542
-
2543
- .lp-testimonial-v3-metric-value {
2544
- font-size: 42px;
2545
- font-weight: 800;
2546
- color: var(--lp-accent);
2547
- line-height: 1;
2548
- }
2549
-
2550
- .lp-testimonial-v3-metric-label {
2551
- font-size: 14px;
2552
- color: var(--lp-secondary);
2553
- margin-top: 6px;
2554
- }
2555
-
2556
- .lp-comparison-v3 {
2557
- justify-content: flex-start;
2558
- padding: 80px;
2559
- }
2560
-
2561
- .lp-comparison-v3-title {
2562
- font-size: 48px;
2563
- font-weight: 800;
2564
- margin-bottom: 48px;
2565
- }
2566
-
2567
- .lp-comparison-v3-table {
2568
- width: 100%;
2569
- display: flex;
2570
- flex-direction: column;
2571
- gap: 2px;
2572
- border: 1px solid var(--lp-border);
2573
- border-radius: var(--lp-radius-medium);
2574
- overflow: hidden;
2575
- }
2576
-
2577
- .lp-comparison-v3-header {
2578
- display: grid;
2579
- grid-template-columns: 1.4fr 1fr 1fr;
2580
- gap: 2px;
2581
- background: var(--lp-border);
2582
- }
2583
-
2584
- .lp-comparison-v3-header-cell {
2585
- padding: 16px 20px;
2586
- font-size: 15px;
2587
- font-weight: 700;
2588
- text-align: center;
2589
- background: rgba(31, 41, 55, 0.6);
2590
- color: var(--lp-text);
2591
- }
2592
-
2593
- .lp-comparison-v3-header-cell.lp-comparison-v3-left-title {
2594
- background: var(--lp-accent);
2595
- color: #fff;
2596
- }
2597
-
2598
- .lp-comparison-v3-row {
2599
- display: grid;
2600
- grid-template-columns: 1.4fr 1fr 1fr;
2601
- gap: 2px;
2602
- background: var(--lp-border);
2603
- }
2604
-
2605
- .lp-comparison-v3-cell {
2606
- padding: 18px 20px;
2607
- font-size: 16px;
2608
- background: var(--lp-surface);
2609
- color: var(--lp-text);
2610
- display: flex;
2611
- align-items: center;
2612
- justify-content: center;
2613
- }
2614
-
2615
- .lp-comparison-v3-cell.lp-comparison-v3-feature {
2616
- justify-content: flex-start;
2617
- font-weight: 600;
2618
- }
2619
-
2620
- .lp-comparison-v3-row:nth-child(even) .lp-comparison-v3-cell {
2621
- background: rgba(31, 41, 55, 0.4);
2622
- }
2623
-
2624
- .lp-timeline-v3 {
2625
- justify-content: flex-start;
2626
- padding: 80px;
2627
- }
2628
-
2629
- .lp-timeline-v3-title {
2630
- font-size: 48px;
2631
- font-weight: 800;
2632
- margin-bottom: 48px;
2633
- }
2634
-
2635
- .lp-timeline-v3-list {
2636
- display: flex;
2637
- flex-direction: column;
2638
- gap: 8px;
2639
- }
2640
-
2641
- .lp-timeline-v3-event {
2642
- display: flex;
2643
- gap: 24px;
2644
- align-items: stretch;
2645
- }
2646
-
2647
- .lp-timeline-v3-node {
2648
- position: relative;
2649
- display: flex;
2650
- flex-direction: column;
2651
- align-items: center;
2652
- width: 24px;
2653
- flex-shrink: 0;
2654
- padding-top: 8px;
2655
- }
2656
-
2657
- .lp-timeline-v3-dot {
2658
- width: 18px;
2659
- height: 18px;
2660
- border-radius: 50%;
2661
- background: var(--lp-accent);
2662
- border: 3px solid var(--lp-surface);
2663
- box-shadow: 0 0 12px rgba(6, 182, 212, 0.35);
2664
- z-index: 1;
2665
- }
2666
-
2667
- .lp-timeline-v3-line {
2668
- position: absolute;
2669
- top: 22px;
2670
- bottom: -16px;
2671
- width: 2px;
2672
- background: rgba(75, 85, 99, 0.6);
2673
- }
2674
-
2675
- .lp-timeline-v3-card {
2676
- flex: 1;
2677
- padding: 20px 24px;
2678
- background: rgba(31, 41, 55, 0.6);
2679
- border: 1px solid var(--lp-border);
2680
- border-radius: var(--lp-radius-medium);
2681
- margin-bottom: 16px;
2682
- }
2683
-
2684
- .lp-timeline-v3-date {
2685
- font-size: 13px;
2686
- font-weight: 700;
2687
- color: var(--lp-accent);
2688
- margin-bottom: 6px;
2689
- font-family: var(--lp-font-mono);
2690
- text-transform: uppercase;
2691
- letter-spacing: 0.05em;
2692
- }
2693
-
2694
- .lp-timeline-v3-event-title {
2695
- font-size: 20px;
2696
- font-weight: 700;
2697
- margin: 0 0 8px 0;
2698
- color: var(--lp-text);
2699
- }
2700
-
2701
- .lp-timeline-v3-event-desc {
2702
- font-size: 16px;
2703
- line-height: 1.55;
2704
- margin: 0;
2705
- color: var(--lp-secondary);
2706
- }
2707
-
2708
- /* ---- Theme-specific variants (stage 3) -------------------------------- */
2709
-
2710
- .lp-dark-tech-cover-v1 {
2711
- flex-direction: column;
2712
- align-items: center;
2713
- justify-content: center;
2714
- text-align: center;
2715
- padding: 80px;
2716
- overflow: hidden;
2717
- }
2718
-
2719
- .lp-dark-tech-cover-grid {
2720
- position: absolute;
2721
- inset: 0;
2722
- background-image:
2723
- linear-gradient(rgba(6, 182, 212, 0.12) 1px, transparent 1px),
2724
- linear-gradient(90deg, rgba(6, 182, 212, 0.12) 1px, transparent 1px);
2725
- background-size: 64px 64px;
2726
- mask-image: radial-gradient(circle at center, black 0%, transparent 75%);
2727
- -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 75%);
2728
- pointer-events: none;
2729
- z-index: 0;
2730
- }
2731
-
2732
- .lp-dark-tech-cover-glow {
2733
- position: absolute;
2734
- top: 50%;
2735
- left: 50%;
2736
- width: 600px;
2737
- height: 600px;
2738
- transform: translate(-50%, -50%);
2739
- background: radial-gradient(circle, rgba(6, 182, 212, 0.18), transparent 60%);
2740
- filter: blur(40px);
2741
- pointer-events: none;
2742
- z-index: 0;
2743
- }
2744
-
2745
- .lp-dark-tech-cover-image {
2746
- position: absolute;
2747
- inset: 0;
2748
- width: 100%;
2749
- height: 100%;
2750
- object-fit: cover;
2751
- opacity: 0.2;
2752
- z-index: 0;
2753
- }
2754
-
2755
- .lp-dark-tech-cover-content {
2756
- position: relative;
2757
- z-index: 1;
2758
- max-width: 900px;
2759
- }
2760
-
2761
- .lp-dark-tech-cover-kicker {
2762
- display: inline-block;
2763
- font-size: 14px;
2764
- font-weight: 700;
2765
- letter-spacing: 0.2em;
2766
- text-transform: uppercase;
2767
- color: var(--lp-accent);
2768
- margin-bottom: 24px;
2769
- padding: 8px 16px;
2770
- border: 1px solid rgba(6, 182, 212, 0.4);
2771
- border-radius: var(--lp-radius-small);
2772
- background: rgba(6, 182, 212, 0.08);
2773
- }
2774
-
2775
- .lp-dark-tech-cover-title {
2776
- font-size: 80px;
2777
- font-weight: 900;
2778
- line-height: 1.05;
2779
- margin: 0 0 24px 0;
2780
- color: #ffffff;
2781
- text-shadow: 0 0 40px rgba(6, 182, 212, 0.35);
2782
- }
2783
-
2784
- .lp-dark-tech-cover-subtitle {
2785
- font-size: 24px;
2786
- color: var(--lp-secondary);
2787
- margin: 0 0 40px 0;
2788
- line-height: 1.5;
2789
- }
2790
-
2791
- .lp-dark-tech-cover-date {
2792
- font-size: 15px;
2793
- color: var(--lp-secondary);
2794
- font-family: var(--lp-font-mono);
2795
- }
2796
-
2797
- .lp-dark-tech-feature-v1 {
2798
- justify-content: flex-start;
2799
- padding: 80px;
2800
- overflow: hidden;
2801
- }
2802
-
2803
- .lp-dark-tech-feature-grid {
2804
- position: absolute;
2805
- inset: 0;
2806
- background-image:
2807
- linear-gradient(rgba(6, 182, 212, 0.08) 1px, transparent 1px),
2808
- linear-gradient(90deg, rgba(6, 182, 212, 0.08) 1px, transparent 1px);
2809
- background-size: 64px 64px;
2810
- mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
2811
- -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
2812
- pointer-events: none;
2813
- z-index: 0;
2814
- }
2815
-
2816
- .lp-dark-tech-feature-glow {
2817
- position: absolute;
2818
- top: 0;
2819
- right: 0;
2820
- width: 500px;
2821
- height: 500px;
2822
- background: radial-gradient(circle, rgba(6, 182, 212, 0.14), transparent 60%);
2823
- filter: blur(50px);
2824
- pointer-events: none;
2825
- z-index: 0;
2826
- }
2827
-
2828
- .lp-dark-tech-feature-header {
2829
- position: relative;
2830
- z-index: 1;
2831
- margin-bottom: 48px;
2832
- }
2833
-
2834
- .lp-dark-tech-feature-kicker {
2835
- font-size: 14px;
2836
- font-weight: 700;
2837
- letter-spacing: 0.2em;
2838
- text-transform: uppercase;
2839
- color: var(--lp-accent);
2840
- margin-bottom: 12px;
2841
- }
2842
-
2843
- .lp-dark-tech-feature-title {
2844
- font-size: 48px;
2845
- font-weight: 900;
2846
- color: #ffffff;
2847
- margin: 0;
2848
- text-shadow: 0 0 30px rgba(6, 182, 212, 0.25);
2849
- }
2850
-
2851
- .lp-dark-tech-feature-grid-cards {
2852
- position: relative;
2853
- z-index: 1;
2854
- display: grid;
2855
- grid-template-columns: repeat(3, 1fr);
2856
- gap: 28px;
2857
- flex: 1;
2858
- align-content: center;
2859
- }
2860
-
2861
- .lp-dark-tech-feature-card {
2862
- display: flex;
2863
- flex-direction: column;
2864
- padding: 32px;
2865
- background: rgba(17, 24, 39, 0.6);
2866
- border: 1px solid rgba(6, 182, 212, 0.25);
2867
- border-radius: var(--lp-radius-large);
2868
- box-shadow: 0 0 30px rgba(6, 182, 212, 0.08);
2869
- }
2870
-
2871
- .lp-dark-tech-feature-number {
2872
- font-size: 42px;
2873
- font-weight: 900;
2874
- color: rgba(6, 182, 212, 0.35);
2875
- margin-bottom: 16px;
2876
- font-family: var(--lp-font-mono);
2877
- }
2878
-
2879
- .lp-dark-tech-feature-card-title {
2880
- font-size: 24px;
2881
- font-weight: 800;
2882
- color: #ffffff;
2883
- margin: 0 0 12px 0;
2884
- }
2885
-
2886
- .lp-dark-tech-feature-card-description {
2887
- font-size: 16px;
2888
- line-height: 1.6;
2889
- color: var(--lp-secondary);
2890
- margin: 0;
2891
- }
2892
-
2893
- .lp-dark-tech-metric-v1 {
2894
- flex-direction: column;
2895
- align-items: center;
2896
- justify-content: center;
2897
- text-align: center;
2898
- padding: 80px;
2899
- overflow: hidden;
2900
- }
2901
-
2902
- .lp-dark-tech-metric-grid {
2903
- position: absolute;
2904
- inset: 0;
2905
- background-image:
2906
- linear-gradient(rgba(6, 182, 212, 0.08) 1px, transparent 1px),
2907
- linear-gradient(90deg, rgba(6, 182, 212, 0.08) 1px, transparent 1px);
2908
- background-size: 64px 64px;
2909
- mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
2910
- -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 70%);
2911
- pointer-events: none;
2912
- z-index: 0;
2913
- }
2914
-
2915
- .lp-dark-tech-metric-glow {
2916
- position: absolute;
2917
- top: 50%;
2918
- left: 50%;
2919
- width: 700px;
2920
- height: 700px;
2921
- transform: translate(-50%, -50%);
2922
- background: radial-gradient(circle, rgba(6, 182, 212, 0.16), transparent 55%);
2923
- filter: blur(50px);
2924
- pointer-events: none;
2925
- z-index: 0;
2926
- }
2927
-
2928
- .lp-dark-tech-metric-label {
2929
- position: relative;
2930
- z-index: 1;
2931
- font-size: 14px;
2932
- font-weight: 700;
2933
- letter-spacing: 0.2em;
2934
- text-transform: uppercase;
2935
- color: var(--lp-accent);
2936
- margin-bottom: 20px;
2937
- }
2938
-
2939
- .lp-dark-tech-metric-value {
2940
- position: relative;
2941
- z-index: 1;
2942
- display: flex;
2943
- align-items: baseline;
2944
- justify-content: center;
2945
- gap: 12px;
2946
- margin-bottom: 24px;
2947
- }
2948
-
2949
- .lp-dark-tech-metric-text {
2950
- font-size: 140px;
2951
- font-weight: 900;
2952
- line-height: 1;
2953
- color: #ffffff;
2954
- text-shadow: 0 0 60px rgba(6, 182, 212, 0.4);
2955
- }
2956
-
2957
- .lp-dark-tech-metric-unit {
2958
- font-size: 36px;
2959
- font-weight: 700;
2960
- color: var(--lp-accent);
2961
- }
2962
-
2963
- .lp-dark-tech-metric-description {
2964
- position: relative;
2965
- z-index: 1;
2966
- font-size: 20px;
2967
- color: var(--lp-secondary);
2968
- max-width: 600px;
2969
- }