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