@lemonppt/themes 0.1.7 → 0.2.0

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