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