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