@lemonppt/themes 0.1.5 → 0.1.7

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.
@@ -1,16 +1,30 @@
1
+ /* lemonPPT - AI-powered presentation generation */
2
+ /* Copyright (c) 2026 lemonforme */
3
+ /* SPDX-License-Identifier: AGPL-3.0-or-later */
4
+
1
5
  /* packages/themes/src/warm-business/styles.css */
2
6
  /* Warm business theme for lemonPPT */
3
7
 
4
8
  :root {
5
9
  --lp-bg: #faf6f1;
6
10
  --lp-surface: #fffbf7;
11
+ --lp-surface-elevated: #ffffff;
7
12
  --lp-text: #3d2c24;
8
13
  --lp-secondary: #8c7b70;
9
14
  --lp-accent: #e07b39;
10
15
  --lp-border: rgba(61, 44, 36, 0.1);
11
16
  --lp-shadow: 0 20px 60px rgba(61, 44, 36, 0.1);
12
- --lp-font: "Noto Sans SC", Inter, system-ui, sans-serif;
13
- --lp-font-mono: JetBrains Mono, monospace;
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;
14
28
  }
15
29
 
16
30
  * {
@@ -1224,644 +1238,549 @@ body {
1224
1238
  line-height: 1.55;
1225
1239
  }
1226
1240
 
1227
- /* Pricing v1 */
1228
- .lp-pricing-v1 {
1229
- justify-content: center;
1241
+ /* Timeline v2 */
1242
+ .lp-timeline-v2 {
1243
+ justify-content: flex-start;
1244
+ padding: 64px 80px;
1230
1245
  }
1231
1246
 
1232
- .lp-pricing-header {
1233
- margin-bottom: 56px;
1247
+ .lp-timeline-v2-header {
1248
+ margin-bottom: 40px;
1234
1249
  }
1235
1250
 
1236
- .lp-pricing-grid {
1237
- display: grid;
1238
- grid-template-columns: repeat(3, 1fr);
1251
+ .lp-timeline-v2-list {
1252
+ display: flex;
1253
+ flex-direction: column;
1239
1254
  gap: 28px;
1240
1255
  width: 100%;
1241
- max-width: 1100px;
1242
- align-items: center;
1256
+ max-width: 1000px;
1257
+ margin: 0 auto;
1243
1258
  }
1244
1259
 
1245
- .lp-pricing-card {
1246
- background: #fff;
1247
- border: 1px solid var(--lp-border);
1248
- border-radius: 20px;
1249
- padding: 36px 28px;
1250
- text-align: center;
1251
- box-shadow: var(--lp-shadow);
1260
+ .lp-timeline-v2-item {
1261
+ display: flex;
1262
+ gap: 20px;
1263
+ align-items: flex-start;
1252
1264
  }
1253
1265
 
1254
- .lp-pricing-card-highlight {
1255
- transform: scale(1.05);
1256
- border-color: var(--lp-accent);
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%;
1257
1273
  }
1258
1274
 
1259
- .lp-pricing-name {
1260
- font-size: 22px;
1261
- font-weight: 700;
1262
- color: var(--lp-text);
1263
- margin-bottom: 16px;
1275
+ .lp-timeline-v2-dot {
1276
+ width: 16px;
1277
+ height: 16px;
1278
+ border-radius: 50%;
1279
+ background: var(--lp-accent);
1280
+ flex-shrink: 0;
1264
1281
  }
1265
1282
 
1266
- .lp-pricing-price-row {
1267
- margin-bottom: 24px;
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);
1268
1291
  }
1269
1292
 
1270
- .lp-pricing-price {
1271
- font-size: 48px;
1272
- font-weight: 800;
1273
- color: var(--lp-text);
1293
+ .lp-timeline-v2-body {
1294
+ flex: 1;
1295
+ padding-top: 0;
1274
1296
  }
1275
1297
 
1276
- .lp-pricing-period {
1277
- font-size: 16px;
1278
- color: var(--lp-secondary);
1279
- margin-left: 4px;
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);
1280
1304
  }
1281
1305
 
1282
- .lp-pricing-features {
1283
- list-style: none;
1284
- padding: 0;
1285
- margin: 0 0 28px;
1306
+ .lp-timeline-v2-title {
1307
+ font-size: 20px;
1308
+ font-weight: 700;
1309
+ color: var(--lp-text);
1310
+ margin-bottom: 6px;
1286
1311
  }
1287
1312
 
1288
- .lp-pricing-features li {
1289
- font-size: 16px;
1313
+ .lp-timeline-v2-description {
1314
+ font-size: 15px;
1290
1315
  color: var(--lp-secondary);
1291
- padding: 10px 0;
1292
- border-bottom: 1px solid var(--lp-border);
1316
+ line-height: 1.5;
1293
1317
  }
1294
1318
 
1295
- .lp-pricing-features li:last-child {
1296
- border-bottom: none;
1319
+ /* Roadmap v2 */
1320
+ .lp-roadmap-v2 {
1321
+ justify-content: flex-start;
1322
+ padding: 64px 80px;
1297
1323
  }
1298
1324
 
1299
- .lp-pricing-cta {
1300
- display: inline-block;
1301
- background: var(--lp-accent);
1302
- color: #fff;
1303
- font-size: 16px;
1304
- font-weight: 600;
1305
- padding: 12px 28px;
1306
- border-radius: 100px;
1325
+ .lp-roadmap-v2-header {
1326
+ margin-bottom: 48px;
1307
1327
  }
1308
1328
 
1309
- /* Additional layouts */
1310
- .lp-split-v1 {
1329
+ .lp-roadmap-v2-track {
1311
1330
  display: flex;
1331
+ gap: 32px;
1312
1332
  width: 100%;
1313
- height: 100%;
1314
- background: var(--lp-surface);
1333
+ max-width: 1040px;
1334
+ margin: 0 auto;
1335
+ align-items: stretch;
1315
1336
  }
1316
1337
 
1317
- .lp-split-v1-content {
1338
+ .lp-roadmap-v2-phase {
1318
1339
  flex: 1;
1319
- display: flex;
1320
- flex-direction: column;
1321
- justify-content: center;
1322
- padding: 80px;
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;
1323
1346
  }
1324
1347
 
1325
- .lp-split-v1-title {
1326
- margin-bottom: 32px;
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);
1327
1355
  }
1328
1356
 
1329
- .lp-split-v1-points {
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 {
1330
1365
  list-style: none;
1331
1366
  padding: 0;
1332
1367
  margin: 0;
1333
1368
  }
1334
1369
 
1335
- .lp-split-v1-points li {
1336
- font-size: 20px;
1370
+ .lp-roadmap-v2-goal-item {
1371
+ font-size: 16px;
1337
1372
  color: var(--lp-secondary);
1338
- padding: 12px 0;
1339
- border-bottom: 1px solid var(--lp-border);
1373
+ padding: 6px 0 6px 14px;
1374
+ position: relative;
1340
1375
  }
1341
1376
 
1342
- .lp-split-v1-points li:last-child {
1343
- border-bottom: none;
1377
+ .lp-roadmap-v2-goal-item::before {
1378
+ content: '•';
1379
+ position: absolute;
1380
+ left: 0;
1381
+ color: var(--lp-accent);
1344
1382
  }
1345
1383
 
1346
- .lp-split-v1-media {
1347
- flex: 1;
1348
- position: relative;
1349
- background: var(--lp-bg);
1384
+ /* Pricing v2 */
1385
+ .lp-pricing-v2 {
1386
+ justify-content: flex-start;
1387
+ padding: 64px 80px;
1350
1388
  }
1351
1389
 
1352
- .lp-split-v1-media img {
1353
- width: 100%;
1354
- height: 100%;
1355
- object-fit: cover;
1390
+ .lp-pricing-v2-header {
1391
+ margin-bottom: 48px;
1356
1392
  }
1357
1393
 
1358
- .lp-split-v1-placeholder {
1394
+ .lp-pricing-v2-grid {
1395
+ display: grid;
1396
+ grid-template-columns: repeat(3, 1fr);
1397
+ gap: 28px;
1359
1398
  width: 100%;
1360
- height: 100%;
1361
- background: var(--lp-bg);
1362
- border: 2px dashed var(--lp-border);
1399
+ max-width: 1040px;
1400
+ margin: 0 auto;
1363
1401
  }
1364
1402
 
1365
- .lp-stats-v1 {
1366
- width: 100%;
1367
- height: 100%;
1368
- padding: 80px;
1403
+ .lp-pricing-v2-card {
1369
1404
  background: var(--lp-surface);
1405
+ border: 1px solid var(--lp-border);
1406
+ border-radius: 16px;
1407
+ padding: 32px;
1370
1408
  display: flex;
1371
1409
  flex-direction: column;
1372
1410
  }
1373
1411
 
1374
- .lp-stats-v1-header {
1375
- margin-bottom: 48px;
1412
+ .lp-pricing-v2-card-highlighted {
1413
+ border-color: var(--lp-accent);
1414
+ background: var(--lp-accent);
1376
1415
  }
1377
1416
 
1378
- .lp-stats-v1-grid {
1379
- display: grid;
1380
- grid-template-columns: repeat(2, 1fr);
1381
- gap: 24px;
1382
- flex: 1;
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;
1383
1422
  }
1384
1423
 
1385
- .lp-stats-v1-card {
1386
- background: var(--lp-bg);
1387
- border-radius: 16px;
1388
- padding: 32px;
1389
- display: flex;
1390
- flex-direction: column;
1391
- justify-content: center;
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);
1392
1427
  }
1393
1428
 
1394
- .lp-stats-v1-label {
1395
- font-size: 16px;
1396
- color: var(--lp-secondary);
1397
- margin-bottom: 12px;
1429
+ .lp-pricing-v2-name {
1430
+ font-size: 22px;
1431
+ font-weight: 700;
1432
+ margin-bottom: 16px;
1433
+ color: var(--lp-text);
1398
1434
  }
1399
1435
 
1400
- .lp-stats-v1-value-row {
1401
- margin-bottom: 8px;
1436
+ .lp-pricing-v2-price-row {
1437
+ margin-bottom: 20px;
1438
+ display: flex;
1439
+ align-items: baseline;
1440
+ gap: 4px;
1402
1441
  }
1403
1442
 
1404
- .lp-stats-v1-value {
1443
+ .lp-pricing-v2-price {
1405
1444
  font-size: 48px;
1406
1445
  font-weight: 800;
1407
- color: var(--lp-text);
1446
+ color: var(--lp-accent);
1408
1447
  }
1409
1448
 
1410
- .lp-stats-v1-unit {
1411
- font-size: 20px;
1449
+ .lp-pricing-v2-period {
1450
+ font-size: 16px;
1412
1451
  color: var(--lp-secondary);
1413
- margin-left: 4px;
1414
- }
1415
-
1416
- .lp-stats-v1-change {
1417
- font-size: 14px;
1418
- color: var(--lp-accent);
1419
1452
  }
1420
1453
 
1421
- .lp-gallery-v1 {
1422
- width: 100%;
1423
- height: 100%;
1424
- padding: 80px;
1425
- background: var(--lp-surface);
1454
+ .lp-pricing-v2-features {
1455
+ list-style: none;
1456
+ padding: 0;
1457
+ margin: 0;
1426
1458
  display: flex;
1427
1459
  flex-direction: column;
1460
+ gap: 10px;
1428
1461
  }
1429
1462
 
1430
- .lp-gallery-v1-header {
1431
- margin-bottom: 40px;
1463
+ .lp-pricing-v2-feature-item {
1464
+ font-size: 16px;
1465
+ color: var(--lp-secondary);
1466
+ padding-left: 18px;
1467
+ position: relative;
1432
1468
  }
1433
1469
 
1434
- .lp-gallery-v1-grid {
1435
- display: grid;
1436
- grid-template-columns: repeat(2, 1fr);
1437
- gap: 24px;
1438
- flex: 1;
1470
+ .lp-pricing-v2-feature-item::before {
1471
+ content: '✓';
1472
+ position: absolute;
1473
+ left: 0;
1474
+ color: var(--lp-accent);
1475
+ font-weight: 700;
1439
1476
  }
1440
1477
 
1441
- .lp-gallery-v1-item {
1442
- position: relative;
1443
- border-radius: 12px;
1444
- overflow: hidden;
1445
- background: var(--lp-bg);
1478
+ /* Feature v2 */
1479
+ .lp-feature-v2 {
1480
+ justify-content: flex-start;
1481
+ padding: 64px 80px;
1446
1482
  }
1447
1483
 
1448
- .lp-gallery-v1-item img {
1449
- width: 100%;
1450
- height: 100%;
1451
- object-fit: cover;
1484
+ .lp-feature-v2-header {
1485
+ margin-bottom: 48px;
1452
1486
  }
1453
1487
 
1454
- .lp-gallery-v1-placeholder {
1488
+ .lp-feature-v2-grid {
1489
+ display: grid;
1490
+ grid-template-columns: repeat(3, 1fr);
1491
+ gap: 32px;
1455
1492
  width: 100%;
1456
- height: 100%;
1457
- background: var(--lp-bg);
1458
- border: 2px dashed var(--lp-border);
1493
+ max-width: 1040px;
1494
+ margin: 0 auto;
1459
1495
  }
1460
1496
 
1461
- .lp-gallery-v1-caption {
1462
- position: absolute;
1463
- bottom: 0;
1464
- left: 0;
1465
- right: 0;
1466
- padding: 12px 16px;
1467
- background: rgba(0, 0, 0, 0.5);
1468
- color: #fff;
1469
- font-size: 14px;
1497
+ .lp-feature-v2-card {
1498
+ background: var(--lp-surface);
1499
+ border: 1px solid var(--lp-border);
1500
+ border-radius: 16px;
1501
+ padding: 32px;
1470
1502
  }
1471
1503
 
1472
- .lp-faq-v1 {
1473
- width: 100%;
1474
- height: 100%;
1475
- padding: 80px;
1476
- background: var(--lp-surface);
1477
- display: flex;
1478
- flex-direction: column;
1504
+ .lp-feature-v2-icon {
1505
+ font-size: 36px;
1506
+ color: var(--lp-accent);
1507
+ margin-bottom: 16px;
1479
1508
  }
1480
1509
 
1481
- .lp-faq-v1-header {
1482
- margin-bottom: 40px;
1510
+ .lp-feature-v2-title {
1511
+ font-size: 24px;
1512
+ font-weight: 700;
1513
+ margin-bottom: 12px;
1514
+ color: var(--lp-text);
1483
1515
  }
1484
1516
 
1485
- .lp-faq-v1-list {
1486
- display: flex;
1487
- flex-direction: column;
1488
- gap: 24px;
1517
+ .lp-feature-v2-description {
1518
+ font-size: 16px;
1519
+ color: var(--lp-secondary);
1520
+ line-height: 1.55;
1489
1521
  }
1490
1522
 
1491
- .lp-faq-v1-item {
1492
- background: var(--lp-bg);
1493
- border-radius: 12px;
1494
- padding: 24px;
1523
+ /* Team v2 */
1524
+ .lp-team-v2 {
1525
+ justify-content: flex-start;
1526
+ padding: 64px 80px;
1495
1527
  }
1496
1528
 
1497
- .lp-faq-v1-question,
1498
- .lp-faq-v1-answer {
1499
- display: flex;
1500
- gap: 12px;
1501
- align-items: flex-start;
1529
+ .lp-team-v2-header {
1530
+ margin-bottom: 48px;
1502
1531
  }
1503
1532
 
1504
- .lp-faq-v1-question {
1505
- font-size: 18px;
1506
- font-weight: 600;
1507
- color: var(--lp-text);
1508
- margin-bottom: 12px;
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;
1509
1540
  }
1510
1541
 
1511
- .lp-faq-v1-answer {
1512
- font-size: 16px;
1513
- color: var(--lp-secondary);
1514
- line-height: 1.6;
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;
1515
1548
  }
1516
1549
 
1517
- .lp-faq-v1-q,
1518
- .lp-faq-v1-a {
1519
- display: inline-flex;
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;
1520
1559
  align-items: center;
1521
1560
  justify-content: center;
1522
- width: 24px;
1523
- height: 24px;
1524
- border-radius: 50%;
1525
- font-size: 12px;
1526
- font-weight: 700;
1527
- flex-shrink: 0;
1528
1561
  }
1529
1562
 
1530
- .lp-faq-v1-q {
1531
- background: var(--lp-accent);
1532
- color: #fff;
1563
+ .lp-team-v2-avatar-placeholder {
1564
+ font-size: 28px;
1565
+ font-weight: 700;
1566
+ color: var(--lp-text);
1533
1567
  }
1534
1568
 
1535
- .lp-faq-v1-a {
1536
- background: var(--lp-border);
1569
+ .lp-team-v2-name {
1570
+ font-size: 20px;
1571
+ font-weight: 700;
1572
+ margin-bottom: 4px;
1537
1573
  color: var(--lp-text);
1538
1574
  }
1539
1575
 
1540
- .lp-partners-v1 {
1541
- width: 100%;
1542
- height: 100%;
1543
- padding: 80px;
1544
- background: var(--lp-surface);
1545
- display: flex;
1546
- flex-direction: column;
1576
+ .lp-team-v2-role {
1577
+ font-size: 14px;
1578
+ color: var(--lp-accent);
1579
+ margin-bottom: 12px;
1547
1580
  }
1548
1581
 
1549
- .lp-partners-v1-header {
1550
- margin-bottom: 48px;
1582
+ .lp-team-v2-bio {
1583
+ font-size: 14px;
1584
+ color: var(--lp-secondary);
1585
+ line-height: 1.5;
1551
1586
  }
1552
1587
 
1553
- .lp-partners-v1-grid {
1554
- display: grid;
1555
- grid-template-columns: repeat(4, 1fr);
1556
- gap: 24px;
1557
- flex: 1;
1558
- align-content: center;
1588
+ /* Metric v3 */
1589
+ .lp-metric-v3 {
1590
+ justify-content: flex-start;
1591
+ padding: 64px 80px;
1559
1592
  }
1560
1593
 
1561
- .lp-partners-v1-card {
1562
- background: var(--lp-bg);
1563
- border-radius: 12px;
1564
- padding: 24px;
1565
- display: flex;
1566
- flex-direction: column;
1567
- align-items: center;
1568
- justify-content: center;
1569
- gap: 12px;
1594
+ .lp-metric-v3-header {
1595
+ margin-bottom: 48px;
1570
1596
  }
1571
1597
 
1572
- .lp-partners-v1-card img {
1573
- max-width: 100%;
1574
- max-height: 48px;
1575
- object-fit: contain;
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;
1576
1605
  }
1577
1606
 
1578
- .lp-partners-v1-logo-placeholder {
1579
- width: 64px;
1580
- height: 64px;
1581
- border-radius: 50%;
1582
- background: var(--lp-bg);
1583
- border: 2px dashed var(--lp-border);
1607
+ .lp-metric-v3-card {
1608
+ background: var(--lp-surface);
1609
+ border: 1px solid var(--lp-border);
1610
+ border-radius: 16px;
1611
+ padding: 40px;
1584
1612
  }
1585
1613
 
1586
- .lp-partners-v1-name {
1587
- font-size: 14px;
1614
+ .lp-metric-v3-label {
1615
+ font-size: 16px;
1588
1616
  color: var(--lp-secondary);
1589
- text-align: center;
1617
+ margin-bottom: 12px;
1590
1618
  }
1591
1619
 
1592
- .lp-testimonial-v1 {
1593
- width: 100%;
1594
- height: 100%;
1595
- padding: 80px;
1596
- background: var(--lp-surface);
1620
+ .lp-metric-v3-value-row {
1597
1621
  display: flex;
1598
- align-items: center;
1599
- justify-content: center;
1622
+ align-items: baseline;
1623
+ gap: 8px;
1624
+ margin-bottom: 12px;
1600
1625
  }
1601
1626
 
1602
- .lp-testimonial-v1-content {
1603
- max-width: 900px;
1627
+ .lp-metric-v3-value {
1628
+ font-size: 80px;
1629
+ font-weight: 900;
1630
+ color: var(--lp-text);
1631
+ line-height: 1;
1604
1632
  }
1605
1633
 
1606
- .lp-testimonial-v1-quote {
1607
- position: relative;
1608
- margin-bottom: 40px;
1634
+ .lp-metric-v3-unit {
1635
+ font-size: 24px;
1636
+ color: var(--lp-secondary);
1609
1637
  }
1610
1638
 
1611
- .lp-testimonial-v1-mark {
1612
- position: absolute;
1613
- top: -24px;
1614
- left: -16px;
1615
- font-size: 120px;
1616
- line-height: 1;
1639
+ .lp-metric-v3-change {
1640
+ font-size: 18px;
1641
+ font-weight: 700;
1617
1642
  color: var(--lp-accent);
1618
- opacity: 0.2;
1619
- font-family: Georgia, serif;
1620
1643
  }
1621
1644
 
1622
- .lp-testimonial-v1-quote blockquote {
1623
- position: relative;
1624
- font-size: 36px;
1625
- font-weight: 500;
1626
- line-height: 1.4;
1627
- color: var(--lp-text);
1628
- margin: 0;
1629
- padding: 0;
1645
+ /* Pricing v1 */
1646
+ .lp-pricing-v1 {
1647
+ justify-content: center;
1630
1648
  }
1631
1649
 
1632
- .lp-testimonial-v1-author {
1633
- display: flex;
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;
1634
1660
  align-items: center;
1635
- gap: 20px;
1636
1661
  }
1637
1662
 
1638
- .lp-testimonial-v1-author img,
1639
- .lp-testimonial-v1-avatar-placeholder {
1640
- width: 64px;
1641
- height: 64px;
1642
- border-radius: 50%;
1643
- object-fit: cover;
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);
1644
1670
  }
1645
1671
 
1646
- .lp-testimonial-v1-avatar-placeholder {
1647
- background: var(--lp-bg);
1648
- border: 2px dashed var(--lp-border);
1672
+ .lp-pricing-card-highlight {
1673
+ transform: scale(1.05);
1674
+ border-color: var(--lp-accent);
1649
1675
  }
1650
1676
 
1651
- .lp-testimonial-v1-name {
1652
- font-size: 18px;
1653
- font-weight: 600;
1677
+ .lp-pricing-name {
1678
+ font-size: 22px;
1679
+ font-weight: 700;
1654
1680
  color: var(--lp-text);
1681
+ margin-bottom: 16px;
1655
1682
  }
1656
1683
 
1657
- .lp-testimonial-v1-role {
1658
- font-size: 14px;
1659
- color: var(--lp-secondary);
1684
+ .lp-pricing-price-row {
1685
+ margin-bottom: 24px;
1660
1686
  }
1661
1687
 
1662
- .lp-roadmap-v1 {
1663
- width: 100%;
1664
- height: 100%;
1665
- padding: 80px;
1666
- background: var(--lp-surface);
1667
- display: flex;
1668
- flex-direction: column;
1688
+ .lp-pricing-price {
1689
+ font-size: 48px;
1690
+ font-weight: 800;
1691
+ color: var(--lp-text);
1669
1692
  }
1670
1693
 
1671
- .lp-roadmap-v1-header {
1672
- margin-bottom: 48px;
1694
+ .lp-pricing-period {
1695
+ font-size: 16px;
1696
+ color: var(--lp-secondary);
1697
+ margin-left: 4px;
1673
1698
  }
1674
1699
 
1675
- .lp-roadmap-v1-track {
1676
- position: relative;
1677
- padding-left: 24px;
1678
- flex: 1;
1679
- overflow-y: auto;
1700
+ .lp-pricing-features {
1701
+ list-style: none;
1702
+ padding: 0;
1703
+ margin: 0 0 28px;
1680
1704
  }
1681
1705
 
1682
- .lp-roadmap-v1-track::before {
1683
- content: '';
1684
- position: absolute;
1685
- top: 12px;
1686
- bottom: 12px;
1687
- left: 7px;
1688
- width: 2px;
1689
- background: var(--lp-border);
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);
1690
1711
  }
1691
1712
 
1692
- .lp-roadmap-v1-phase {
1693
- position: relative;
1694
- padding-left: 36px;
1695
- margin-bottom: 32px;
1713
+ .lp-pricing-features li:last-child {
1714
+ border-bottom: none;
1696
1715
  }
1697
1716
 
1698
- .lp-roadmap-v1-dot {
1699
- position: absolute;
1700
- top: 6px;
1701
- left: 0;
1702
- width: 16px;
1703
- height: 16px;
1704
- border-radius: 50%;
1717
+ .lp-pricing-cta {
1718
+ display: inline-block;
1705
1719
  background: var(--lp-accent);
1706
- border: 3px solid var(--lp-surface);
1707
- box-shadow: 0 0 0 2px var(--lp-accent);
1708
- }
1709
-
1710
- .lp-roadmap-v1-top {
1711
- display: flex;
1712
- align-items: center;
1713
- gap: 12px;
1714
- margin-bottom: 8px;
1715
- }
1716
-
1717
- .lp-roadmap-v1-title {
1718
- font-size: 20px;
1719
- font-weight: 700;
1720
- color: var(--lp-text);
1721
- }
1722
-
1723
- .lp-roadmap-v1-status {
1724
- font-size: 12px;
1720
+ color: #fff;
1721
+ font-size: 16px;
1725
1722
  font-weight: 600;
1726
- color: var(--lp-accent);
1727
- background: rgba(0, 113, 227, 0.1);
1728
- padding: 4px 10px;
1723
+ padding: 12px 28px;
1729
1724
  border-radius: 100px;
1730
1725
  }
1731
1726
 
1732
- .lp-roadmap-v1-description {
1733
- font-size: 16px;
1734
- color: var(--lp-secondary);
1735
- line-height: 1.6;
1736
- }
1737
-
1738
- @media print {
1739
- html, body {
1740
- display: block;
1741
- background: #fff;
1742
- }
1743
-
1744
- .lp-editor-bar,
1745
- .lp-nav,
1746
- .lp-page-counter,
1747
- .lp-hint {
1748
- display: none !important;
1749
- }
1750
-
1751
- .lp-deck {
1752
- box-shadow: none;
1753
- border-radius: 0;
1754
- width: 100% !important;
1755
- height: auto !important;
1756
- overflow: visible;
1757
- }
1758
-
1759
- .lp-slide-wrapper {
1760
- position: relative;
1761
- transform: none !important;
1762
- opacity: 1 !important;
1763
- width: 100% !important;
1764
- height: 720px !important;
1765
- page-break-after: always;
1766
- break-after: page;
1767
- z-index: auto !important;
1768
- }
1769
-
1770
- .lp-slide-wrapper:last-child {
1771
- page-break-after: auto;
1772
- break-after: auto;
1773
- }
1774
- }
1775
- .lp-testimonial-v2 {
1727
+ /* Additional layouts */
1728
+ .lp-split-v1 {
1729
+ display: flex;
1776
1730
  width: 100%;
1777
1731
  height: 100%;
1778
- padding: 80px;
1779
1732
  background: var(--lp-surface);
1780
- display: flex;
1781
- align-items: center;
1782
- justify-content: center;
1783
- }
1784
-
1785
- .lp-testimonial-v2-card {
1786
- width: 100%;
1787
- max-width: 900px;
1788
- background: var(--lp-bg);
1789
- border: 1px solid var(--lp-border);
1790
- border-radius: var(--lp-radius-large);
1791
- padding: 48px;
1792
- position: relative;
1793
- }
1794
-
1795
- .lp-testimonial-v2-logo {
1796
- position: absolute;
1797
- top: 32px;
1798
- right: 40px;
1799
- height: 32px;
1800
- max-width: 120px;
1801
- object-fit: contain;
1802
1733
  }
1803
1734
 
1804
- .lp-testimonial-v2-company {
1805
- position: absolute;
1806
- top: 32px;
1807
- right: 40px;
1808
- font-size: 14px;
1809
- font-weight: 600;
1810
- color: var(--lp-secondary);
1811
- text-transform: uppercase;
1812
- letter-spacing: 0.05em;
1735
+ .lp-split-v1-content {
1736
+ flex: 1;
1737
+ display: flex;
1738
+ flex-direction: column;
1739
+ justify-content: center;
1740
+ padding: 80px;
1813
1741
  }
1814
1742
 
1815
- .lp-testimonial-v2-quote {
1816
- margin: 32px 0 40px;
1743
+ .lp-split-v1-title {
1744
+ margin-bottom: 32px;
1817
1745
  }
1818
1746
 
1819
- .lp-testimonial-v2-quote blockquote {
1820
- font-size: 32px;
1821
- font-weight: 500;
1822
- line-height: 1.4;
1823
- color: var(--lp-text);
1824
- margin: 0;
1747
+ .lp-split-v1-points {
1748
+ list-style: none;
1825
1749
  padding: 0;
1750
+ margin: 0;
1826
1751
  }
1827
1752
 
1828
- .lp-testimonial-v2-footer {
1829
- display: flex;
1830
- align-items: flex-end;
1831
- justify-content: space-between;
1832
- gap: 24px;
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);
1833
1758
  }
1834
1759
 
1835
- .lp-testimonial-v2-name {
1836
- font-size: 18px;
1837
- font-weight: 600;
1838
- color: var(--lp-text);
1760
+ .lp-split-v1-points li:last-child {
1761
+ border-bottom: none;
1839
1762
  }
1840
1763
 
1841
- .lp-testimonial-v2-role {
1842
- font-size: 14px;
1843
- color: var(--lp-secondary);
1844
- margin-top: 4px;
1764
+ .lp-split-v1-media {
1765
+ flex: 1;
1766
+ position: relative;
1767
+ background: var(--lp-bg);
1845
1768
  }
1846
1769
 
1847
- .lp-testimonial-v2-metric {
1848
- text-align: right;
1849
- flex-shrink: 0;
1770
+ .lp-split-v1-media img {
1771
+ width: 100%;
1772
+ height: 100%;
1773
+ object-fit: cover;
1850
1774
  }
1851
1775
 
1852
- .lp-testimonial-v2-metric-value {
1853
- font-size: 36px;
1854
- font-weight: 700;
1855
- color: var(--lp-accent);
1856
- line-height: 1;
1776
+ .lp-split-v1-placeholder {
1777
+ width: 100%;
1778
+ height: 100%;
1779
+ background: var(--lp-bg);
1780
+ border: 2px dashed var(--lp-border);
1857
1781
  }
1858
1782
 
1859
- .lp-testimonial-v2-metric-label {
1860
- font-size: 13px;
1861
- color: var(--lp-secondary);
1862
- margin-top: 4px;
1863
- }
1864
- .lp-chart-v2 {
1783
+ .lp-stats-v1 {
1865
1784
  width: 100%;
1866
1785
  height: 100%;
1867
1786
  padding: 80px;
@@ -1870,44 +1789,54 @@ body {
1870
1789
  flex-direction: column;
1871
1790
  }
1872
1791
 
1873
- .lp-chart-v2-header {
1874
- margin-bottom: 40px;
1792
+ .lp-stats-v1-header {
1793
+ margin-bottom: 48px;
1875
1794
  }
1876
1795
 
1877
- .lp-chart-v2-body {
1796
+ .lp-stats-v1-grid {
1797
+ display: grid;
1798
+ grid-template-columns: repeat(2, 1fr);
1799
+ gap: 24px;
1878
1800
  flex: 1;
1801
+ }
1802
+
1803
+ .lp-stats-v1-card {
1804
+ background: var(--lp-bg);
1805
+ border-radius: 16px;
1806
+ padding: 32px;
1879
1807
  display: flex;
1880
- align-items: center;
1808
+ flex-direction: column;
1881
1809
  justify-content: center;
1882
1810
  }
1883
1811
 
1884
- .lp-chart-v2-svg {
1885
- width: 100%;
1886
- max-width: 900px;
1887
- height: auto;
1812
+ .lp-stats-v1-label {
1813
+ font-size: 16px;
1814
+ color: var(--lp-secondary);
1815
+ margin-bottom: 12px;
1888
1816
  }
1889
1817
 
1890
- .lp-chart-v2-grid {
1891
- stroke: var(--lp-border);
1892
- stroke-width: 1;
1818
+ .lp-stats-v1-value-row {
1819
+ margin-bottom: 8px;
1893
1820
  }
1894
1821
 
1895
- .lp-chart-v2-axis-text {
1896
- fill: var(--lp-secondary);
1897
- font-size: 12px;
1898
- font-family: var(--lp-font-mono);
1822
+ .lp-stats-v1-value {
1823
+ font-size: 48px;
1824
+ font-weight: 800;
1825
+ color: var(--lp-text);
1899
1826
  }
1900
1827
 
1901
- .lp-chart-v2-bar {
1902
- opacity: 0.9;
1828
+ .lp-stats-v1-unit {
1829
+ font-size: 20px;
1830
+ color: var(--lp-secondary);
1831
+ margin-left: 4px;
1903
1832
  }
1904
1833
 
1905
- .lp-chart-v2-legend-text {
1906
- fill: var(--lp-secondary);
1907
- font-size: 12px;
1908
- font-family: var(--lp-font-body);
1834
+ .lp-stats-v1-change {
1835
+ font-size: 14px;
1836
+ color: var(--lp-accent);
1909
1837
  }
1910
- .lp-gallery-v2 {
1838
+
1839
+ .lp-gallery-v1 {
1911
1840
  width: 100%;
1912
1841
  height: 100%;
1913
1842
  padding: 80px;
@@ -1916,37 +1845,1004 @@ body {
1916
1845
  flex-direction: column;
1917
1846
  }
1918
1847
 
1919
- .lp-gallery-v2-header {
1848
+ .lp-gallery-v1-header {
1920
1849
  margin-bottom: 40px;
1921
1850
  }
1922
1851
 
1923
- .lp-gallery-v2-grid {
1852
+ .lp-gallery-v1-grid {
1924
1853
  display: grid;
1925
- grid-template-columns: repeat(3, 1fr);
1854
+ grid-template-columns: repeat(2, 1fr);
1926
1855
  gap: 24px;
1927
1856
  flex: 1;
1928
- align-content: start;
1929
1857
  }
1930
1858
 
1931
- .lp-gallery-v2-item {
1932
- display: flex;
1933
- flex-direction: column;
1934
- gap: 10px;
1859
+ .lp-gallery-v1-item {
1860
+ position: relative;
1861
+ border-radius: 12px;
1862
+ overflow: hidden;
1863
+ background: var(--lp-bg);
1935
1864
  }
1936
1865
 
1937
- .lp-gallery-v2-item img,
1938
- .lp-gallery-v2-placeholder {
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 {
1939
2534
  width: 100%;
1940
- aspect-ratio: 16 / 10;
1941
- object-fit: cover;
2535
+ display: flex;
2536
+ flex-direction: column;
2537
+ gap: 2px;
2538
+ border: 1px solid var(--lp-border);
1942
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;
1943
2644
  background: var(--lp-bg);
1944
2645
  border: 1px solid var(--lp-border);
2646
+ border-radius: var(--lp-radius-medium);
2647
+ margin-bottom: 16px;
1945
2648
  }
1946
2649
 
1947
- .lp-gallery-v2-caption {
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 {
1948
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;
1949
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);
1950
2788
  text-align: center;
1951
- line-height: 1.4;
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;
1952
2848
  }