@lemonppt/themes 0.1.6 → 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 +170 -61
  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 -1949
  53. package/src/dark-tech/styles.css +0 -1994
  54. package/src/warm-business/styles.css +0 -1960
@@ -1,1949 +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: #ffffff;
12
- --lp-text: #1d1d1f;
13
- --lp-secondary: #6e6e73;
14
- --lp-accent: #0071e3;
15
- --lp-border: rgba(0, 0, 0, 0.1);
16
- --lp-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
17
- --lp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
18
- --lp-font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, 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-heading {
90
- font-weight: 700;
91
- line-height: 1.15;
92
- margin: 0 0 24px 0;
93
- color: var(--lp-text);
94
- }
95
-
96
- .lp-kicker {
97
- font-family: var(--lp-font-mono);
98
- font-size: 13px;
99
- letter-spacing: 0.12em;
100
- text-transform: uppercase;
101
- color: var(--lp-accent);
102
- margin-bottom: 16px;
103
- }
104
-
105
- .lp-cover-v1 {
106
- align-items: center;
107
- justify-content: center;
108
- text-align: center;
109
- }
110
-
111
- .lp-cover-image {
112
- position: absolute;
113
- inset: 0;
114
- width: 100%;
115
- height: 100%;
116
- object-fit: cover;
117
- opacity: 0.35;
118
- pointer-events: none;
119
- }
120
-
121
- .lp-cover-content {
122
- position: relative;
123
- z-index: 1;
124
- max-width: 900px;
125
- }
126
-
127
- .lp-cover-v1 .lp-kicker {
128
- margin-bottom: 24px;
129
- }
130
-
131
- .lp-cover-title {
132
- font-size: 80px;
133
- font-weight: 800;
134
- margin-bottom: 24px;
135
- }
136
-
137
- .lp-cover-subtitle {
138
- font-size: 28px;
139
- color: var(--lp-secondary);
140
- line-height: 1.45;
141
- margin-bottom: 48px;
142
- }
143
-
144
- .lp-cover-date {
145
- font-family: var(--lp-font-mono);
146
- font-size: 15px;
147
- color: var(--lp-secondary);
148
- }
149
-
150
- /* Table of contents */
151
-
152
- .lp-toc-v1 {
153
- justify-content: center;
154
- }
155
-
156
- .lp-toc-title {
157
- font-size: 56px;
158
- margin-bottom: 56px;
159
- }
160
-
161
- .lp-toc-list {
162
- list-style: none;
163
- padding: 0;
164
- margin: 0;
165
- counter-reset: toc;
166
- }
167
-
168
- .lp-toc-list li {
169
- font-size: 26px;
170
- padding: 18px 0;
171
- border-bottom: 1px solid var(--lp-border);
172
- color: var(--lp-text);
173
- display: flex;
174
- align-items: baseline;
175
- gap: 20px;
176
- }
177
-
178
- .lp-toc-list li::before {
179
- counter-increment: toc;
180
- content: counter(toc, decimal-leading-zero);
181
- font-family: var(--lp-font-mono);
182
- font-size: 15px;
183
- color: var(--lp-secondary);
184
- min-width: 36px;
185
- }
186
-
187
- /* Content */
188
-
189
- .lp-content-v1 {
190
- justify-content: center;
191
- }
192
-
193
- .lp-content-v1 .lp-heading {
194
- font-size: 52px;
195
- margin-bottom: 40px;
196
- }
197
-
198
- .lp-bullet-list {
199
- list-style: none;
200
- padding: 0;
201
- margin: 0;
202
- }
203
-
204
- .lp-bullet-list li {
205
- font-size: 26px;
206
- line-height: 1.55;
207
- padding: 14px 0 14px 36px;
208
- position: relative;
209
- color: var(--lp-text);
210
- }
211
-
212
- .lp-bullet-list li::before {
213
- content: "";
214
- position: absolute;
215
- left: 0;
216
- top: 26px;
217
- width: 10px;
218
- height: 10px;
219
- border-radius: 50%;
220
- background: var(--lp-accent);
221
- }
222
-
223
- /* Metric */
224
-
225
- .lp-metric-v1,
226
- .lp-metric-v2 {
227
- align-items: center;
228
- justify-content: center;
229
- text-align: center;
230
- }
231
-
232
- .lp-metric-value {
233
- font-size: 160px;
234
- font-weight: 800;
235
- line-height: 1;
236
- color: var(--lp-accent);
237
- margin-bottom: 16px;
238
- }
239
-
240
- .lp-metric-unit {
241
- font-size: 32px;
242
- font-weight: 600;
243
- color: var(--lp-text);
244
- }
245
-
246
- .lp-metric-description {
247
- font-size: 24px;
248
- color: var(--lp-secondary);
249
- margin-top: 32px;
250
- max-width: 700px;
251
- }
252
-
253
- /* Comparison */
254
-
255
- .lp-comparison-v1 {
256
- justify-content: center;
257
- }
258
-
259
- .lp-comparison-title {
260
- font-size: 48px;
261
- margin-bottom: 56px;
262
- text-align: center;
263
- }
264
-
265
- .lp-comparison-grid {
266
- display: grid;
267
- grid-template-columns: 1fr 1fr;
268
- gap: 48px;
269
- }
270
-
271
- .lp-comparison-col h3 {
272
- font-size: 28px;
273
- margin: 0 0 24px 0;
274
- padding-bottom: 16px;
275
- border-bottom: 2px solid var(--lp-border);
276
- }
277
-
278
- .lp-comparison-col ul {
279
- list-style: none;
280
- padding: 0;
281
- margin: 0;
282
- }
283
-
284
- .lp-comparison-col li {
285
- font-size: 22px;
286
- padding: 12px 0;
287
- color: var(--lp-secondary);
288
- }
289
-
290
- /* Process */
291
-
292
- .lp-process-v1 {
293
- justify-content: center;
294
- }
295
-
296
- .lp-process-title {
297
- font-size: 48px;
298
- margin-bottom: 56px;
299
- text-align: center;
300
- }
301
-
302
- .lp-process-steps {
303
- display: flex;
304
- align-items: stretch;
305
- justify-content: center;
306
- gap: 24px;
307
- }
308
-
309
- .lp-process-step {
310
- flex: 1;
311
- background: rgba(0, 113, 227, 0.06);
312
- border-radius: 16px;
313
- padding: 36px 28px;
314
- text-align: center;
315
- position: relative;
316
- }
317
-
318
- .lp-process-step-number {
319
- font-family: var(--lp-font-mono);
320
- font-size: 14px;
321
- color: var(--lp-accent);
322
- margin-bottom: 16px;
323
- }
324
-
325
- .lp-process-step-text {
326
- font-size: 24px;
327
- font-weight: 600;
328
- }
329
-
330
- /* Quote */
331
-
332
- .lp-quote-v1 {
333
- align-items: center;
334
- justify-content: center;
335
- text-align: center;
336
- }
337
-
338
- .lp-quote-text {
339
- font-size: 48px;
340
- font-weight: 600;
341
- line-height: 1.35;
342
- margin-bottom: 40px;
343
- }
344
-
345
- .lp-quote-author {
346
- font-size: 20px;
347
- color: var(--lp-secondary);
348
- }
349
-
350
- /* Closing */
351
-
352
- .lp-closing-v1 {
353
- align-items: center;
354
- justify-content: center;
355
- text-align: center;
356
- }
357
-
358
- .lp-closing-title {
359
- font-size: 72px;
360
- font-weight: 800;
361
- margin-bottom: 24px;
362
- }
363
-
364
- .lp-closing-subtitle {
365
- font-size: 28px;
366
- color: var(--lp-secondary);
367
- }
368
-
369
- /* Navigation */
370
-
371
- .lp-nav {
372
- position: fixed;
373
- bottom: 32px;
374
- left: 50%;
375
- transform: translateX(-50%);
376
- display: flex;
377
- align-items: center;
378
- gap: 16px;
379
- z-index: 100;
380
- background: rgba(255, 255, 255, 0.85);
381
- backdrop-filter: blur(12px);
382
- padding: 12px 20px;
383
- border-radius: 999px;
384
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
385
- }
386
-
387
- .lp-nav button {
388
- border: none;
389
- background: transparent;
390
- cursor: pointer;
391
- font-size: 20px;
392
- color: var(--lp-text);
393
- padding: 6px 12px;
394
- border-radius: 8px;
395
- transition: background 150ms ease;
396
- }
397
-
398
- .lp-nav button:hover:not(:disabled) {
399
- background: rgba(0, 0, 0, 0.06);
400
- }
401
-
402
- .lp-nav button:disabled {
403
- opacity: 0.35;
404
- cursor: not-allowed;
405
- }
406
-
407
- .lp-nav-dots {
408
- display: flex;
409
- gap: 8px;
410
- }
411
-
412
- .lp-nav-dot {
413
- width: 10px;
414
- height: 10px;
415
- border-radius: 50%;
416
- background: var(--lp-border);
417
- cursor: pointer;
418
- transition: background 150ms ease, transform 150ms ease;
419
- }
420
-
421
- .lp-nav-dot.active {
422
- background: var(--lp-accent);
423
- transform: scale(1.2);
424
- }
425
-
426
- .lp-page-counter {
427
- font-family: var(--lp-font-mono);
428
- font-size: 13px;
429
- color: var(--lp-secondary);
430
- min-width: 48px;
431
- text-align: center;
432
- }
433
-
434
- .lp-hint {
435
- position: fixed;
436
- bottom: 12px;
437
- left: 50%;
438
- transform: translateX(-50%);
439
- font-size: 12px;
440
- color: var(--lp-secondary);
441
- z-index: 100;
442
- }
443
-
444
- /* Editor bar */
445
-
446
- .lp-editor-bar {
447
- position: fixed;
448
- top: 16px;
449
- left: 50%;
450
- transform: translateX(-50%);
451
- display: flex;
452
- align-items: center;
453
- gap: 12px;
454
- z-index: 1000;
455
- background: rgba(255, 255, 255, 0.92);
456
- backdrop-filter: blur(12px);
457
- padding: 10px 18px;
458
- border-radius: 12px;
459
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
460
- }
461
-
462
- .lp-editor-title {
463
- font-weight: 600;
464
- font-size: 14px;
465
- margin-right: 8px;
466
- color: var(--lp-text);
467
- }
468
-
469
- .lp-editor-btn {
470
- border: 1px solid var(--lp-border);
471
- background: #fff;
472
- color: var(--lp-text);
473
- font-size: 13px;
474
- padding: 7px 14px;
475
- border-radius: 8px;
476
- cursor: pointer;
477
- transition: background 150ms ease, border-color 150ms ease;
478
- }
479
-
480
- .lp-editor-btn:hover:not(:disabled) {
481
- background: #f5f5f7;
482
- border-color: rgba(0, 0, 0, 0.2);
483
- }
484
-
485
- .lp-editor-btn:disabled {
486
- opacity: 0.5;
487
- cursor: not-allowed;
488
- }
489
-
490
- .lp-theme-switcher-label {
491
- display: flex;
492
- align-items: center;
493
- gap: 8px;
494
- font-size: 13px;
495
- color: var(--lp-text);
496
- cursor: pointer;
497
- }
498
-
499
- .lp-theme-switcher-label select {
500
- border: 1px solid var(--lp-border);
501
- background: #fff;
502
- color: var(--lp-text);
503
- font-size: 13px;
504
- padding: 6px 10px;
505
- border-radius: 8px;
506
- cursor: pointer;
507
- font-family: inherit;
508
- }
509
-
510
- [data-lp-editable="true"] {
511
- outline: none;
512
- border-radius: 4px;
513
- transition: background 150ms ease, box-shadow 150ms ease;
514
- cursor: text;
515
- }
516
-
517
- [data-lp-editable="true"]:hover {
518
- background: rgba(59, 130, 246, 0.06);
519
- }
520
-
521
- [data-lp-editable="true"]:focus {
522
- background: rgba(59, 130, 246, 0.12);
523
- box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
524
- }
525
-
526
- [data-lp-editable-image="true"] {
527
- cursor: pointer;
528
- transition: opacity 150ms ease;
529
- }
530
-
531
- [data-lp-editable-image="true"]:hover {
532
- opacity: 0.8;
533
- }
534
-
535
- /* Image editor modal */
536
-
537
- .lp-image-editor-overlay {
538
- position: fixed;
539
- inset: 0;
540
- background: rgba(0, 0, 0, 0.5);
541
- display: flex;
542
- align-items: center;
543
- justify-content: center;
544
- z-index: 2000;
545
- }
546
-
547
- .lp-image-editor {
548
- background: var(--lp-surface);
549
- border-radius: 16px;
550
- padding: 28px;
551
- width: 480px;
552
- max-width: 90vw;
553
- box-shadow: var(--lp-shadow);
554
- }
555
-
556
- .lp-image-editor h3 {
557
- margin: 0 0 20px 0;
558
- font-size: 20px;
559
- }
560
-
561
- .lp-image-editor label {
562
- display: block;
563
- margin-bottom: 12px;
564
- font-size: 14px;
565
- color: var(--lp-secondary);
566
- }
567
-
568
- .lp-image-editor input[type="text"] {
569
- width: 100%;
570
- padding: 10px 12px;
571
- margin-top: 6px;
572
- border: 1px solid var(--lp-border);
573
- border-radius: 8px;
574
- font-size: 14px;
575
- font-family: inherit;
576
- }
577
-
578
- .lp-image-file-label {
579
- display: block;
580
- width: 100%;
581
- text-align: center;
582
- padding: 16px;
583
- border: 2px dashed var(--lp-border);
584
- border-radius: 12px;
585
- cursor: pointer;
586
- transition: border-color 150ms ease, background 150ms ease;
587
- }
588
-
589
- .lp-image-file-label:hover {
590
- border-color: var(--lp-accent);
591
- background: rgba(0, 113, 227, 0.04);
592
- }
593
-
594
- .lp-image-file-label input[type="file"] {
595
- display: none;
596
- }
597
-
598
- .lp-image-or {
599
- text-align: center;
600
- font-size: 13px;
601
- color: var(--lp-secondary);
602
- margin: 12px 0;
603
- }
604
-
605
- .lp-image-preview-wrap {
606
- margin: 16px 0;
607
- min-height: 120px;
608
- max-height: 240px;
609
- display: flex;
610
- align-items: center;
611
- justify-content: center;
612
- background: #f5f5f7;
613
- border-radius: 12px;
614
- overflow: hidden;
615
- }
616
-
617
- .lp-image-preview {
618
- max-width: 100%;
619
- max-height: 220px;
620
- object-fit: contain;
621
- }
622
-
623
- .lp-image-actions {
624
- display: flex;
625
- align-items: center;
626
- justify-content: space-between;
627
- gap: 12px;
628
- }
629
-
630
- .lp-image-actions-right {
631
- display: flex;
632
- gap: 12px;
633
- }
634
-
635
- .lp-image-editor button {
636
- border: 1px solid var(--lp-border);
637
- background: var(--lp-accent);
638
- color: #fff;
639
- font-size: 14px;
640
- padding: 9px 18px;
641
- border-radius: 8px;
642
- cursor: pointer;
643
- transition: opacity 150ms ease;
644
- }
645
-
646
- .lp-image-editor button:hover {
647
- opacity: 0.9;
648
- }
649
-
650
- .lp-image-btn-secondary {
651
- background: #fff !important;
652
- color: var(--lp-text) !important;
653
- }
654
-
655
- /* ===== New layouts ===== */
656
-
657
- /* Metric v1 */
658
- .lp-metric-v1 {
659
- align-items: center;
660
- justify-content: center;
661
- text-align: center;
662
- }
663
-
664
- .lp-metric-v1-value {
665
- font-size: 200px;
666
- font-weight: 900;
667
- line-height: 1;
668
- color: var(--lp-accent);
669
- margin: 16px 0;
670
- }
671
-
672
- .lp-metric-v1-unit {
673
- font-size: 40px;
674
- font-weight: 600;
675
- color: var(--lp-text);
676
- }
677
-
678
- .lp-metric-v1-description {
679
- font-size: 24px;
680
- color: var(--lp-secondary);
681
- max-width: 720px;
682
- margin: 24px 0 0;
683
- }
684
-
685
- /* Content v2 */
686
- .lp-content-v2 {
687
- justify-content: center;
688
- }
689
-
690
- .lp-content-v2-header {
691
- margin-bottom: 40px;
692
- }
693
-
694
- .lp-content-v2-columns {
695
- display: grid;
696
- grid-template-columns: 1fr 1fr;
697
- gap: 56px;
698
- }
699
-
700
- .lp-bullet-list-compact li {
701
- font-size: 22px;
702
- padding: 10px 0;
703
- }
704
-
705
- /* Content v3 */
706
- .lp-content-v3 {
707
- display: grid;
708
- grid-template-columns: 1fr 1fr;
709
- gap: 56px;
710
- align-items: center;
711
- padding: 80px;
712
- }
713
-
714
- .lp-content-v3-text {
715
- max-width: 520px;
716
- }
717
-
718
- .lp-content-v3-media img {
719
- width: 100%;
720
- height: 100%;
721
- object-fit: cover;
722
- border-radius: 16px;
723
- box-shadow: var(--lp-shadow);
724
- }
725
-
726
- /* Comparison v2 */
727
- .lp-comparison-v2 {
728
- justify-content: center;
729
- }
730
-
731
- .lp-comparison-v2-inner {
732
- width: 100%;
733
- max-width: 1040px;
734
- }
735
-
736
- .lp-comparison-v2-grid {
737
- display: grid;
738
- grid-template-columns: 1fr 1fr;
739
- gap: 40px;
740
- margin-top: 48px;
741
- }
742
-
743
- .lp-comparison-v2-card {
744
- background: var(--lp-surface);
745
- border: 1px solid var(--lp-border);
746
- border-radius: 16px;
747
- padding: 32px;
748
- }
749
-
750
- .lp-comparison-v2-card h3 {
751
- font-size: 28px;
752
- margin: 0 0 20px 0;
753
- padding-bottom: 16px;
754
- border-bottom: 2px solid var(--lp-border);
755
- }
756
-
757
- .lp-comparison-v2-card ul {
758
- list-style: none;
759
- padding: 0;
760
- margin: 0;
761
- }
762
-
763
- .lp-comparison-v2-card li {
764
- font-size: 20px;
765
- padding: 10px 0;
766
- color: var(--lp-secondary);
767
- }
768
-
769
- /* Process v2 */
770
- .lp-process-v2 {
771
- justify-content: center;
772
- }
773
-
774
- .lp-process-v2-title {
775
- text-align: center;
776
- margin-bottom: 48px;
777
- }
778
-
779
- .lp-process-v2-timeline {
780
- display: flex;
781
- flex-direction: column;
782
- gap: 20px;
783
- max-width: 800px;
784
- width: 100%;
785
- margin: 0 auto;
786
- }
787
-
788
- .lp-process-v2-step {
789
- display: flex;
790
- align-items: flex-start;
791
- gap: 20px;
792
- }
793
-
794
- .lp-process-v2-marker {
795
- flex-shrink: 0;
796
- width: 44px;
797
- height: 44px;
798
- border-radius: 50%;
799
- background: var(--lp-accent);
800
- color: #fff;
801
- display: flex;
802
- align-items: center;
803
- justify-content: center;
804
- font-weight: 700;
805
- font-size: 18px;
806
- }
807
-
808
- .lp-process-v2-content {
809
- flex: 1;
810
- background: var(--lp-surface);
811
- border: 1px solid var(--lp-border);
812
- border-radius: 12px;
813
- padding: 18px 22px;
814
- }
815
-
816
- .lp-process-v2-content h3 {
817
- margin: 0 0 6px 0;
818
- font-size: 22px;
819
- }
820
-
821
- .lp-process-v2-content p {
822
- margin: 0;
823
- font-size: 17px;
824
- color: var(--lp-secondary);
825
- line-height: 1.55;
826
- }
827
-
828
- /* Quote v2 */
829
- .lp-quote-v2 {
830
- align-items: center;
831
- justify-content: center;
832
- }
833
-
834
- .lp-quote-v2-inner {
835
- max-width: 900px;
836
- border-left: 6px solid var(--lp-accent);
837
- padding-left: 40px;
838
- }
839
-
840
- .lp-quote-v2-text {
841
- font-size: 40px;
842
- line-height: 1.35;
843
- font-style: italic;
844
- margin: 0;
845
- }
846
-
847
- .lp-quote-v2-attribution {
848
- margin-top: 32px;
849
- }
850
-
851
- .lp-quote-v2-author {
852
- font-size: 22px;
853
- font-weight: 700;
854
- margin-right: 12px;
855
- }
856
-
857
- .lp-quote-v2-role {
858
- font-size: 18px;
859
- color: var(--lp-secondary);
860
- }
861
-
862
- /* Closing v2 */
863
- .lp-closing-v2 {
864
- align-items: center;
865
- justify-content: center;
866
- text-align: center;
867
- }
868
-
869
- .lp-closing-v2-title {
870
- font-size: 72px;
871
- margin-bottom: 20px;
872
- }
873
-
874
- .lp-closing-v2-subtitle {
875
- font-size: 26px;
876
- color: var(--lp-secondary);
877
- margin-bottom: 48px;
878
- }
879
-
880
- .lp-closing-v2-contacts {
881
- display: flex;
882
- flex-direction: column;
883
- gap: 12px;
884
- align-items: center;
885
- }
886
-
887
- .lp-closing-v2-contact,
888
- .lp-closing-v2-email,
889
- .lp-closing-v2-link {
890
- font-size: 20px;
891
- color: var(--lp-text);
892
- }
893
-
894
- /* SWOT / PEST */
895
- .lp-swot-v1,
896
- .lp-pest-v1 {
897
- justify-content: center;
898
- }
899
-
900
- .lp-swot-title,
901
- .lp-pest-title {
902
- text-align: center;
903
- margin-bottom: 48px;
904
- }
905
-
906
- .lp-swot-grid,
907
- .lp-pest-grid {
908
- display: grid;
909
- grid-template-columns: 1fr 1fr;
910
- gap: 24px;
911
- max-width: 960px;
912
- width: 100%;
913
- margin: 0 auto;
914
- }
915
-
916
- .lp-swot-cell,
917
- .lp-pest-cell {
918
- background: var(--lp-surface);
919
- border: 1px solid var(--lp-border);
920
- border-radius: 16px;
921
- padding: 28px;
922
- text-align: center;
923
- }
924
-
925
- .lp-swot-cell h3,
926
- .lp-pest-cell h3 {
927
- width: 48px;
928
- height: 48px;
929
- border-radius: 50%;
930
- display: flex;
931
- align-items: center;
932
- justify-content: center;
933
- margin: 0 auto 16px;
934
- font-size: 22px;
935
- color: #fff;
936
- background: var(--lp-accent);
937
- }
938
-
939
- .lp-swot-cell p,
940
- .lp-pest-cell p {
941
- margin: 0;
942
- font-size: 18px;
943
- color: var(--lp-secondary);
944
- line-height: 1.55;
945
- }
946
-
947
- /* Chart v1 */
948
- .lp-chart-v1 {
949
- justify-content: center;
950
- }
951
-
952
- .lp-chart-inner {
953
- width: 100%;
954
- max-width: 960px;
955
- margin: 0 auto;
956
- }
957
-
958
- .lp-chart-title {
959
- text-align: center;
960
- margin-bottom: 32px;
961
- }
962
-
963
- .lp-chart-svg {
964
- width: 100%;
965
- height: auto;
966
- overflow: visible;
967
- }
968
-
969
- .lp-chart-grid {
970
- stroke: var(--lp-border);
971
- stroke-width: 1;
972
- }
973
-
974
- .lp-chart-axis-text {
975
- fill: var(--lp-secondary);
976
- font-size: 13px;
977
- }
978
-
979
- .lp-chart-value-text {
980
- fill: var(--lp-text);
981
- font-size: 13px;
982
- font-weight: 600;
983
- }
984
-
985
- .lp-chart-line {
986
- stroke: var(--lp-accent);
987
- }
988
-
989
- .lp-chart-unit {
990
- text-align: center;
991
- font-size: 14px;
992
- color: var(--lp-secondary);
993
- margin-top: 12px;
994
- }
995
-
996
- .lp-chart-pie-label {
997
- fill: #fff;
998
- font-size: 13px;
999
- font-weight: 600;
1000
- }
1001
-
1002
- .lp-chart-color-0 { fill: #0071e3; }
1003
- .lp-chart-color-1 { fill: #5e5ce6; }
1004
- .lp-chart-color-2 { fill: #34c759; }
1005
- .lp-chart-color-3 { fill: #ff9500; }
1006
- .lp-chart-color-4 { fill: #ff3b30; }
1007
- .lp-chart-color-5 { fill: #af52de; }
1008
-
1009
- /* Image v1 */
1010
- .lp-image-v1 {
1011
- padding: 0;
1012
- position: relative;
1013
- overflow: hidden;
1014
- justify-content: center;
1015
- align-items: center;
1016
- text-align: center;
1017
- }
1018
-
1019
- .lp-image-v1-bg {
1020
- position: absolute;
1021
- inset: 0;
1022
- width: 100%;
1023
- height: 100%;
1024
- object-fit: cover;
1025
- z-index: 0;
1026
- }
1027
-
1028
- .lp-image-v1-overlay {
1029
- position: absolute;
1030
- inset: 0;
1031
- background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 100%);
1032
- z-index: 1;
1033
- }
1034
-
1035
- .lp-image-v1-content {
1036
- position: relative;
1037
- z-index: 2;
1038
- padding: 80px;
1039
- }
1040
-
1041
- .lp-image-v1-title {
1042
- font-size: 72px;
1043
- font-weight: 800;
1044
- color: #fff;
1045
- line-height: 1.1;
1046
- margin-bottom: 24px;
1047
- }
1048
-
1049
- .lp-image-v1-subtitle {
1050
- font-size: 28px;
1051
- color: rgba(255, 255, 255, 0.9);
1052
- line-height: 1.5;
1053
- }
1054
-
1055
- /* Team v1 */
1056
- .lp-team-v1 {
1057
- justify-content: center;
1058
- }
1059
-
1060
- .lp-team-header {
1061
- margin-bottom: 48px;
1062
- }
1063
-
1064
- .lp-team-grid {
1065
- display: grid;
1066
- grid-template-columns: repeat(3, 1fr);
1067
- gap: 40px;
1068
- width: 100%;
1069
- max-width: 1100px;
1070
- }
1071
-
1072
- .lp-team-card {
1073
- text-align: center;
1074
- }
1075
-
1076
- .lp-team-avatar {
1077
- width: 120px;
1078
- height: 120px;
1079
- border-radius: 50%;
1080
- object-fit: cover;
1081
- margin-bottom: 20px;
1082
- border: 4px solid var(--lp-accent);
1083
- }
1084
-
1085
- .lp-team-avatar-placeholder {
1086
- background: var(--lp-surface);
1087
- border-color: var(--lp-border);
1088
- }
1089
-
1090
- .lp-team-name {
1091
- font-size: 24px;
1092
- font-weight: 700;
1093
- color: var(--lp-text);
1094
- margin-bottom: 4px;
1095
- }
1096
-
1097
- .lp-team-role {
1098
- font-size: 16px;
1099
- color: var(--lp-accent);
1100
- margin-bottom: 12px;
1101
- }
1102
-
1103
- .lp-team-bio {
1104
- font-size: 15px;
1105
- color: var(--lp-secondary);
1106
- line-height: 1.55;
1107
- }
1108
-
1109
- /* Feature v1 */
1110
- .lp-feature-v1 {
1111
- justify-content: center;
1112
- }
1113
-
1114
- .lp-feature-header {
1115
- margin-bottom: 56px;
1116
- }
1117
-
1118
- .lp-feature-grid {
1119
- display: grid;
1120
- grid-template-columns: repeat(3, 1fr);
1121
- gap: 32px;
1122
- width: 100%;
1123
- max-width: 1100px;
1124
- }
1125
-
1126
- .lp-feature-card {
1127
- background: var(--lp-surface);
1128
- border: 1px solid var(--lp-border);
1129
- border-radius: 20px;
1130
- padding: 36px;
1131
- }
1132
-
1133
- .lp-feature-number {
1134
- font-size: 14px;
1135
- font-weight: 700;
1136
- color: var(--lp-accent);
1137
- margin-bottom: 16px;
1138
- font-family: 'JetBrains Mono', monospace;
1139
- }
1140
-
1141
- .lp-feature-title {
1142
- font-size: 24px;
1143
- font-weight: 700;
1144
- color: var(--lp-text);
1145
- margin-bottom: 12px;
1146
- }
1147
-
1148
- .lp-feature-description {
1149
- font-size: 17px;
1150
- color: var(--lp-secondary);
1151
- line-height: 1.6;
1152
- }
1153
-
1154
- /* Timeline v1 */
1155
- .lp-timeline-v1 {
1156
- justify-content: center;
1157
- }
1158
-
1159
- .lp-timeline-header {
1160
- margin-bottom: 64px;
1161
- }
1162
-
1163
- .lp-timeline-track {
1164
- display: flex;
1165
- justify-content: space-between;
1166
- align-items: flex-start;
1167
- width: 100%;
1168
- max-width: 1100px;
1169
- position: relative;
1170
- }
1171
-
1172
- .lp-timeline-track::before {
1173
- content: '';
1174
- position: absolute;
1175
- top: 12px;
1176
- left: 10%;
1177
- right: 10%;
1178
- height: 2px;
1179
- background: var(--lp-border);
1180
- z-index: 0;
1181
- }
1182
-
1183
- .lp-timeline-item {
1184
- position: relative;
1185
- z-index: 1;
1186
- text-align: center;
1187
- width: 220px;
1188
- }
1189
-
1190
- .lp-timeline-dot {
1191
- width: 24px;
1192
- height: 24px;
1193
- border-radius: 50%;
1194
- background: var(--lp-accent);
1195
- margin: 0 auto 20px;
1196
- border: 4px solid var(--lp-bg);
1197
- }
1198
-
1199
- .lp-timeline-date {
1200
- font-size: 14px;
1201
- font-weight: 700;
1202
- color: var(--lp-accent);
1203
- margin-bottom: 8px;
1204
- font-family: 'JetBrains Mono', monospace;
1205
- }
1206
-
1207
- .lp-timeline-title {
1208
- font-size: 20px;
1209
- font-weight: 700;
1210
- color: var(--lp-text);
1211
- margin-bottom: 8px;
1212
- }
1213
-
1214
- .lp-timeline-description {
1215
- font-size: 15px;
1216
- color: var(--lp-secondary);
1217
- line-height: 1.55;
1218
- }
1219
-
1220
- /* Pricing v1 */
1221
- .lp-pricing-v1 {
1222
- justify-content: center;
1223
- }
1224
-
1225
- .lp-pricing-header {
1226
- margin-bottom: 56px;
1227
- }
1228
-
1229
- .lp-pricing-grid {
1230
- display: grid;
1231
- grid-template-columns: repeat(3, 1fr);
1232
- gap: 28px;
1233
- width: 100%;
1234
- max-width: 1100px;
1235
- align-items: center;
1236
- }
1237
-
1238
- .lp-pricing-card {
1239
- background: var(--lp-surface);
1240
- border: 1px solid var(--lp-border);
1241
- border-radius: 20px;
1242
- padding: 36px 28px;
1243
- text-align: center;
1244
- }
1245
-
1246
- .lp-pricing-card-highlight {
1247
- transform: scale(1.05);
1248
- border-color: var(--lp-accent);
1249
- box-shadow: var(--lp-shadow);
1250
- }
1251
-
1252
- .lp-pricing-name {
1253
- font-size: 22px;
1254
- font-weight: 700;
1255
- color: var(--lp-text);
1256
- margin-bottom: 16px;
1257
- }
1258
-
1259
- .lp-pricing-price-row {
1260
- margin-bottom: 24px;
1261
- }
1262
-
1263
- .lp-pricing-price {
1264
- font-size: 48px;
1265
- font-weight: 800;
1266
- color: var(--lp-text);
1267
- }
1268
-
1269
- .lp-pricing-period {
1270
- font-size: 16px;
1271
- color: var(--lp-secondary);
1272
- margin-left: 4px;
1273
- }
1274
-
1275
- .lp-pricing-features {
1276
- list-style: none;
1277
- padding: 0;
1278
- margin: 0 0 28px;
1279
- }
1280
-
1281
- .lp-pricing-features li {
1282
- font-size: 16px;
1283
- color: var(--lp-secondary);
1284
- padding: 10px 0;
1285
- border-bottom: 1px solid var(--lp-border);
1286
- }
1287
-
1288
- .lp-pricing-features li:last-child {
1289
- border-bottom: none;
1290
- }
1291
-
1292
- .lp-pricing-cta {
1293
- display: inline-block;
1294
- background: var(--lp-accent);
1295
- color: #fff;
1296
- font-size: 16px;
1297
- font-weight: 600;
1298
- padding: 12px 28px;
1299
- border-radius: 100px;
1300
- }
1301
-
1302
- /* Additional layouts */
1303
- .lp-split-v1 {
1304
- display: flex;
1305
- width: 100%;
1306
- height: 100%;
1307
- background: var(--lp-surface);
1308
- }
1309
-
1310
- .lp-split-v1-content {
1311
- flex: 1;
1312
- display: flex;
1313
- flex-direction: column;
1314
- justify-content: center;
1315
- padding: 80px;
1316
- }
1317
-
1318
- .lp-split-v1-title {
1319
- margin-bottom: 32px;
1320
- }
1321
-
1322
- .lp-split-v1-points {
1323
- list-style: none;
1324
- padding: 0;
1325
- margin: 0;
1326
- }
1327
-
1328
- .lp-split-v1-points li {
1329
- font-size: 20px;
1330
- color: var(--lp-secondary);
1331
- padding: 12px 0;
1332
- border-bottom: 1px solid var(--lp-border);
1333
- }
1334
-
1335
- .lp-split-v1-points li:last-child {
1336
- border-bottom: none;
1337
- }
1338
-
1339
- .lp-split-v1-media {
1340
- flex: 1;
1341
- position: relative;
1342
- background: var(--lp-bg);
1343
- }
1344
-
1345
- .lp-split-v1-media img {
1346
- width: 100%;
1347
- height: 100%;
1348
- object-fit: cover;
1349
- }
1350
-
1351
- .lp-split-v1-placeholder {
1352
- width: 100%;
1353
- height: 100%;
1354
- background: linear-gradient(135deg, #eee, #ddd);
1355
- }
1356
-
1357
- .lp-stats-v1 {
1358
- width: 100%;
1359
- height: 100%;
1360
- padding: 80px;
1361
- background: var(--lp-surface);
1362
- display: flex;
1363
- flex-direction: column;
1364
- }
1365
-
1366
- .lp-stats-v1-header {
1367
- margin-bottom: 48px;
1368
- }
1369
-
1370
- .lp-stats-v1-grid {
1371
- display: grid;
1372
- grid-template-columns: repeat(2, 1fr);
1373
- gap: 24px;
1374
- flex: 1;
1375
- }
1376
-
1377
- .lp-stats-v1-card {
1378
- background: var(--lp-bg);
1379
- border-radius: 16px;
1380
- padding: 32px;
1381
- display: flex;
1382
- flex-direction: column;
1383
- justify-content: center;
1384
- }
1385
-
1386
- .lp-stats-v1-label {
1387
- font-size: 16px;
1388
- color: var(--lp-secondary);
1389
- margin-bottom: 12px;
1390
- }
1391
-
1392
- .lp-stats-v1-value-row {
1393
- margin-bottom: 8px;
1394
- }
1395
-
1396
- .lp-stats-v1-value {
1397
- font-size: 48px;
1398
- font-weight: 800;
1399
- color: var(--lp-text);
1400
- }
1401
-
1402
- .lp-stats-v1-unit {
1403
- font-size: 20px;
1404
- color: var(--lp-secondary);
1405
- margin-left: 4px;
1406
- }
1407
-
1408
- .lp-stats-v1-change {
1409
- font-size: 14px;
1410
- color: var(--lp-accent);
1411
- }
1412
-
1413
- .lp-gallery-v1 {
1414
- width: 100%;
1415
- height: 100%;
1416
- padding: 80px;
1417
- background: var(--lp-surface);
1418
- display: flex;
1419
- flex-direction: column;
1420
- }
1421
-
1422
- .lp-gallery-v1-header {
1423
- margin-bottom: 40px;
1424
- }
1425
-
1426
- .lp-gallery-v1-grid {
1427
- display: grid;
1428
- grid-template-columns: repeat(2, 1fr);
1429
- gap: 24px;
1430
- flex: 1;
1431
- }
1432
-
1433
- .lp-gallery-v1-item {
1434
- position: relative;
1435
- border-radius: 12px;
1436
- overflow: hidden;
1437
- background: var(--lp-bg);
1438
- }
1439
-
1440
- .lp-gallery-v1-item img {
1441
- width: 100%;
1442
- height: 100%;
1443
- object-fit: cover;
1444
- }
1445
-
1446
- .lp-gallery-v1-placeholder {
1447
- width: 100%;
1448
- height: 100%;
1449
- background: linear-gradient(135deg, #eee, #ddd);
1450
- }
1451
-
1452
- .lp-gallery-v1-caption {
1453
- position: absolute;
1454
- bottom: 0;
1455
- left: 0;
1456
- right: 0;
1457
- padding: 12px 16px;
1458
- background: rgba(0, 0, 0, 0.5);
1459
- color: #fff;
1460
- font-size: 14px;
1461
- }
1462
-
1463
- .lp-faq-v1 {
1464
- width: 100%;
1465
- height: 100%;
1466
- padding: 80px;
1467
- background: var(--lp-surface);
1468
- display: flex;
1469
- flex-direction: column;
1470
- }
1471
-
1472
- .lp-faq-v1-header {
1473
- margin-bottom: 40px;
1474
- }
1475
-
1476
- .lp-faq-v1-list {
1477
- display: flex;
1478
- flex-direction: column;
1479
- gap: 24px;
1480
- }
1481
-
1482
- .lp-faq-v1-item {
1483
- background: var(--lp-bg);
1484
- border-radius: 12px;
1485
- padding: 24px;
1486
- }
1487
-
1488
- .lp-faq-v1-question,
1489
- .lp-faq-v1-answer {
1490
- display: flex;
1491
- gap: 12px;
1492
- align-items: flex-start;
1493
- }
1494
-
1495
- .lp-faq-v1-question {
1496
- font-size: 18px;
1497
- font-weight: 600;
1498
- color: var(--lp-text);
1499
- margin-bottom: 12px;
1500
- }
1501
-
1502
- .lp-faq-v1-answer {
1503
- font-size: 16px;
1504
- color: var(--lp-secondary);
1505
- line-height: 1.6;
1506
- }
1507
-
1508
- .lp-faq-v1-q,
1509
- .lp-faq-v1-a {
1510
- display: inline-flex;
1511
- align-items: center;
1512
- justify-content: center;
1513
- width: 24px;
1514
- height: 24px;
1515
- border-radius: 50%;
1516
- font-size: 12px;
1517
- font-weight: 700;
1518
- flex-shrink: 0;
1519
- }
1520
-
1521
- .lp-faq-v1-q {
1522
- background: var(--lp-accent);
1523
- color: #fff;
1524
- }
1525
-
1526
- .lp-faq-v1-a {
1527
- background: var(--lp-border);
1528
- color: var(--lp-text);
1529
- }
1530
-
1531
- .lp-partners-v1 {
1532
- width: 100%;
1533
- height: 100%;
1534
- padding: 80px;
1535
- background: var(--lp-surface);
1536
- display: flex;
1537
- flex-direction: column;
1538
- }
1539
-
1540
- .lp-partners-v1-header {
1541
- margin-bottom: 48px;
1542
- }
1543
-
1544
- .lp-partners-v1-grid {
1545
- display: grid;
1546
- grid-template-columns: repeat(4, 1fr);
1547
- gap: 24px;
1548
- flex: 1;
1549
- align-content: center;
1550
- }
1551
-
1552
- .lp-partners-v1-card {
1553
- background: var(--lp-bg);
1554
- border-radius: 12px;
1555
- padding: 24px;
1556
- display: flex;
1557
- flex-direction: column;
1558
- align-items: center;
1559
- justify-content: center;
1560
- gap: 12px;
1561
- }
1562
-
1563
- .lp-partners-v1-card img {
1564
- max-width: 100%;
1565
- max-height: 48px;
1566
- object-fit: contain;
1567
- }
1568
-
1569
- .lp-partners-v1-logo-placeholder {
1570
- width: 64px;
1571
- height: 64px;
1572
- border-radius: 50%;
1573
- background: linear-gradient(135deg, #ddd, #bbb);
1574
- }
1575
-
1576
- .lp-partners-v1-name {
1577
- font-size: 14px;
1578
- color: var(--lp-secondary);
1579
- text-align: center;
1580
- }
1581
-
1582
- .lp-testimonial-v1 {
1583
- width: 100%;
1584
- height: 100%;
1585
- padding: 80px;
1586
- background: var(--lp-surface);
1587
- display: flex;
1588
- align-items: center;
1589
- justify-content: center;
1590
- }
1591
-
1592
- .lp-testimonial-v1-content {
1593
- max-width: 900px;
1594
- }
1595
-
1596
- .lp-testimonial-v1-quote {
1597
- position: relative;
1598
- margin-bottom: 40px;
1599
- }
1600
-
1601
- .lp-testimonial-v1-mark {
1602
- position: absolute;
1603
- top: -24px;
1604
- left: -16px;
1605
- font-size: 120px;
1606
- line-height: 1;
1607
- color: var(--lp-accent);
1608
- opacity: 0.2;
1609
- font-family: Georgia, serif;
1610
- }
1611
-
1612
- .lp-testimonial-v1-quote blockquote {
1613
- position: relative;
1614
- font-size: 36px;
1615
- font-weight: 500;
1616
- line-height: 1.4;
1617
- color: var(--lp-text);
1618
- margin: 0;
1619
- padding: 0;
1620
- }
1621
-
1622
- .lp-testimonial-v1-author {
1623
- display: flex;
1624
- align-items: center;
1625
- gap: 20px;
1626
- }
1627
-
1628
- .lp-testimonial-v1-author img,
1629
- .lp-testimonial-v1-avatar-placeholder {
1630
- width: 64px;
1631
- height: 64px;
1632
- border-radius: 50%;
1633
- object-fit: cover;
1634
- }
1635
-
1636
- .lp-testimonial-v1-avatar-placeholder {
1637
- background: linear-gradient(135deg, #ddd, #bbb);
1638
- }
1639
-
1640
- .lp-testimonial-v1-name {
1641
- font-size: 18px;
1642
- font-weight: 600;
1643
- color: var(--lp-text);
1644
- }
1645
-
1646
- .lp-testimonial-v1-role {
1647
- font-size: 14px;
1648
- color: var(--lp-secondary);
1649
- }
1650
-
1651
- .lp-roadmap-v1 {
1652
- width: 100%;
1653
- height: 100%;
1654
- padding: 80px;
1655
- background: var(--lp-surface);
1656
- display: flex;
1657
- flex-direction: column;
1658
- }
1659
-
1660
- .lp-roadmap-v1-header {
1661
- margin-bottom: 48px;
1662
- }
1663
-
1664
- .lp-roadmap-v1-track {
1665
- position: relative;
1666
- padding-left: 24px;
1667
- flex: 1;
1668
- overflow-y: auto;
1669
- }
1670
-
1671
- .lp-roadmap-v1-track::before {
1672
- content: '';
1673
- position: absolute;
1674
- top: 12px;
1675
- bottom: 12px;
1676
- left: 7px;
1677
- width: 2px;
1678
- background: var(--lp-border);
1679
- }
1680
-
1681
- .lp-roadmap-v1-phase {
1682
- position: relative;
1683
- padding-left: 36px;
1684
- margin-bottom: 32px;
1685
- }
1686
-
1687
- .lp-roadmap-v1-dot {
1688
- position: absolute;
1689
- top: 6px;
1690
- left: 0;
1691
- width: 16px;
1692
- height: 16px;
1693
- border-radius: 50%;
1694
- background: var(--lp-accent);
1695
- border: 3px solid var(--lp-surface);
1696
- box-shadow: 0 0 0 2px var(--lp-accent);
1697
- }
1698
-
1699
- .lp-roadmap-v1-top {
1700
- display: flex;
1701
- align-items: center;
1702
- gap: 12px;
1703
- margin-bottom: 8px;
1704
- }
1705
-
1706
- .lp-roadmap-v1-title {
1707
- font-size: 20px;
1708
- font-weight: 700;
1709
- color: var(--lp-text);
1710
- }
1711
-
1712
- .lp-roadmap-v1-status {
1713
- font-size: 12px;
1714
- font-weight: 600;
1715
- color: var(--lp-accent);
1716
- background: rgba(0, 113, 227, 0.1);
1717
- padding: 4px 10px;
1718
- border-radius: 100px;
1719
- }
1720
-
1721
- .lp-roadmap-v1-description {
1722
- font-size: 16px;
1723
- color: var(--lp-secondary);
1724
- line-height: 1.6;
1725
- }
1726
-
1727
- .lp-split-v1-placeholder,
1728
- .lp-gallery-v1-placeholder,
1729
- .lp-partners-v1-logo-placeholder,
1730
- .lp-testimonial-v1-avatar-placeholder {
1731
- background: var(--lp-bg);
1732
- border: 2px dashed var(--lp-border);
1733
- }
1734
-
1735
- @media print {
1736
- html, body {
1737
- display: block;
1738
- background: #fff;
1739
- }
1740
-
1741
- .lp-editor-bar,
1742
- .lp-nav,
1743
- .lp-page-counter,
1744
- .lp-hint {
1745
- display: none !important;
1746
- }
1747
-
1748
- .lp-deck {
1749
- box-shadow: none;
1750
- border-radius: 0;
1751
- width: 100% !important;
1752
- height: auto !important;
1753
- overflow: visible;
1754
- }
1755
-
1756
- .lp-slide-wrapper {
1757
- position: relative;
1758
- transform: none !important;
1759
- opacity: 1 !important;
1760
- width: 100% !important;
1761
- height: 720px !important;
1762
- page-break-after: always;
1763
- break-after: page;
1764
- z-index: auto !important;
1765
- }
1766
-
1767
- .lp-slide-wrapper:last-child {
1768
- page-break-after: auto;
1769
- break-after: auto;
1770
- }
1771
- }
1772
- .lp-testimonial-v2 {
1773
- width: 100%;
1774
- height: 100%;
1775
- padding: 80px;
1776
- background: var(--lp-surface);
1777
- display: flex;
1778
- align-items: center;
1779
- justify-content: center;
1780
- }
1781
-
1782
- .lp-testimonial-v2-card {
1783
- width: 100%;
1784
- max-width: 900px;
1785
- background: var(--lp-bg);
1786
- border: 1px solid var(--lp-border);
1787
- border-radius: var(--lp-radius-large);
1788
- padding: 48px;
1789
- position: relative;
1790
- }
1791
-
1792
- .lp-testimonial-v2-logo {
1793
- position: absolute;
1794
- top: 32px;
1795
- right: 40px;
1796
- height: 32px;
1797
- max-width: 120px;
1798
- object-fit: contain;
1799
- }
1800
-
1801
- .lp-testimonial-v2-company {
1802
- position: absolute;
1803
- top: 32px;
1804
- right: 40px;
1805
- font-size: 14px;
1806
- font-weight: 600;
1807
- color: var(--lp-secondary);
1808
- text-transform: uppercase;
1809
- letter-spacing: 0.05em;
1810
- }
1811
-
1812
- .lp-testimonial-v2-quote {
1813
- margin: 32px 0 40px;
1814
- }
1815
-
1816
- .lp-testimonial-v2-quote blockquote {
1817
- font-size: 32px;
1818
- font-weight: 500;
1819
- line-height: 1.4;
1820
- color: var(--lp-text);
1821
- margin: 0;
1822
- padding: 0;
1823
- }
1824
-
1825
- .lp-testimonial-v2-footer {
1826
- display: flex;
1827
- align-items: flex-end;
1828
- justify-content: space-between;
1829
- gap: 24px;
1830
- }
1831
-
1832
- .lp-testimonial-v2-name {
1833
- font-size: 18px;
1834
- font-weight: 600;
1835
- color: var(--lp-text);
1836
- }
1837
-
1838
- .lp-testimonial-v2-role {
1839
- font-size: 14px;
1840
- color: var(--lp-secondary);
1841
- margin-top: 4px;
1842
- }
1843
-
1844
- .lp-testimonial-v2-metric {
1845
- text-align: right;
1846
- flex-shrink: 0;
1847
- }
1848
-
1849
- .lp-testimonial-v2-metric-value {
1850
- font-size: 36px;
1851
- font-weight: 700;
1852
- color: var(--lp-accent);
1853
- line-height: 1;
1854
- }
1855
-
1856
- .lp-testimonial-v2-metric-label {
1857
- font-size: 13px;
1858
- color: var(--lp-secondary);
1859
- margin-top: 4px;
1860
- }
1861
- .lp-chart-v2 {
1862
- width: 100%;
1863
- height: 100%;
1864
- padding: 80px;
1865
- background: var(--lp-surface);
1866
- display: flex;
1867
- flex-direction: column;
1868
- }
1869
-
1870
- .lp-chart-v2-header {
1871
- margin-bottom: 40px;
1872
- }
1873
-
1874
- .lp-chart-v2-body {
1875
- flex: 1;
1876
- display: flex;
1877
- align-items: center;
1878
- justify-content: center;
1879
- }
1880
-
1881
- .lp-chart-v2-svg {
1882
- width: 100%;
1883
- max-width: 900px;
1884
- height: auto;
1885
- }
1886
-
1887
- .lp-chart-v2-grid {
1888
- stroke: var(--lp-border);
1889
- stroke-width: 1;
1890
- }
1891
-
1892
- .lp-chart-v2-axis-text {
1893
- fill: var(--lp-secondary);
1894
- font-size: 12px;
1895
- font-family: var(--lp-font-mono);
1896
- }
1897
-
1898
- .lp-chart-v2-bar {
1899
- opacity: 0.9;
1900
- }
1901
-
1902
- .lp-chart-v2-legend-text {
1903
- fill: var(--lp-secondary);
1904
- font-size: 12px;
1905
- font-family: var(--lp-font-body);
1906
- }
1907
- .lp-gallery-v2 {
1908
- width: 100%;
1909
- height: 100%;
1910
- padding: 80px;
1911
- background: var(--lp-surface);
1912
- display: flex;
1913
- flex-direction: column;
1914
- }
1915
-
1916
- .lp-gallery-v2-header {
1917
- margin-bottom: 40px;
1918
- }
1919
-
1920
- .lp-gallery-v2-grid {
1921
- display: grid;
1922
- grid-template-columns: repeat(3, 1fr);
1923
- gap: 24px;
1924
- flex: 1;
1925
- align-content: start;
1926
- }
1927
-
1928
- .lp-gallery-v2-item {
1929
- display: flex;
1930
- flex-direction: column;
1931
- gap: 10px;
1932
- }
1933
-
1934
- .lp-gallery-v2-item img,
1935
- .lp-gallery-v2-placeholder {
1936
- width: 100%;
1937
- aspect-ratio: 16 / 10;
1938
- object-fit: cover;
1939
- border-radius: var(--lp-radius-medium);
1940
- background: var(--lp-bg);
1941
- border: 1px solid var(--lp-border);
1942
- }
1943
-
1944
- .lp-gallery-v2-caption {
1945
- font-size: 14px;
1946
- color: var(--lp-secondary);
1947
- text-align: center;
1948
- line-height: 1.4;
1949
- }