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