@lemonppt/themes 0.1.7 → 0.2.1

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