@lemonppt/themes 0.1.6 → 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.
@@ -14,13 +14,19 @@
14
14
  --lp-accent: #e07b39;
15
15
  --lp-border: rgba(61, 44, 36, 0.1);
16
16
  --lp-shadow: 0 20px 60px rgba(61, 44, 36, 0.1);
17
- --lp-font: "Noto Sans SC", Inter, system-ui, sans-serif;
18
- --lp-font-mono: JetBrains Mono, monospace;
17
+ --lp-font: "IBM Plex Sans", "Noto Sans SC", system-ui, sans-serif;
18
+ --lp-font-mono: "JetBrains Mono", ui-monospace, monospace;
19
19
  --lp-radius-small: 6px;
20
20
  --lp-radius-medium: 12px;
21
21
  --lp-radius-large: 16px;
22
22
  }
23
23
 
24
+ h1,
25
+ h2,
26
+ h3 {
27
+ font-family: Newsreader, 'Noto Serif SC', Georgia, serif;
28
+ }
29
+
24
30
  * {
25
31
  box-sizing: border-box;
26
32
  }
@@ -1232,644 +1238,549 @@ body {
1232
1238
  line-height: 1.55;
1233
1239
  }
1234
1240
 
1235
- /* Pricing v1 */
1236
- .lp-pricing-v1 {
1237
- justify-content: center;
1241
+ /* Timeline v2 */
1242
+ .lp-timeline-v2 {
1243
+ justify-content: flex-start;
1244
+ padding: 64px 80px;
1238
1245
  }
1239
1246
 
1240
- .lp-pricing-header {
1241
- margin-bottom: 56px;
1247
+ .lp-timeline-v2-header {
1248
+ margin-bottom: 40px;
1242
1249
  }
1243
1250
 
1244
- .lp-pricing-grid {
1245
- display: grid;
1246
- grid-template-columns: repeat(3, 1fr);
1251
+ .lp-timeline-v2-list {
1252
+ display: flex;
1253
+ flex-direction: column;
1247
1254
  gap: 28px;
1248
1255
  width: 100%;
1249
- max-width: 1100px;
1250
- align-items: center;
1256
+ max-width: 1000px;
1257
+ margin: 0 auto;
1251
1258
  }
1252
1259
 
1253
- .lp-pricing-card {
1254
- background: #fff;
1255
- border: 1px solid var(--lp-border);
1256
- border-radius: 20px;
1257
- padding: 36px 28px;
1258
- text-align: center;
1259
- box-shadow: var(--lp-shadow);
1260
+ .lp-timeline-v2-item {
1261
+ display: flex;
1262
+ gap: 20px;
1263
+ align-items: flex-start;
1260
1264
  }
1261
1265
 
1262
- .lp-pricing-card-highlight {
1263
- transform: scale(1.05);
1264
- 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%;
1265
1273
  }
1266
1274
 
1267
- .lp-pricing-name {
1268
- font-size: 22px;
1269
- font-weight: 700;
1270
- color: var(--lp-text);
1271
- 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;
1272
1281
  }
1273
1282
 
1274
- .lp-pricing-price-row {
1275
- 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);
1276
1291
  }
1277
1292
 
1278
- .lp-pricing-price {
1279
- font-size: 48px;
1280
- font-weight: 800;
1281
- color: var(--lp-text);
1293
+ .lp-timeline-v2-body {
1294
+ flex: 1;
1295
+ padding-top: 0;
1282
1296
  }
1283
1297
 
1284
- .lp-pricing-period {
1285
- font-size: 16px;
1286
- color: var(--lp-secondary);
1287
- 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);
1288
1304
  }
1289
1305
 
1290
- .lp-pricing-features {
1291
- list-style: none;
1292
- padding: 0;
1293
- 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;
1294
1311
  }
1295
1312
 
1296
- .lp-pricing-features li {
1297
- font-size: 16px;
1313
+ .lp-timeline-v2-description {
1314
+ font-size: 15px;
1298
1315
  color: var(--lp-secondary);
1299
- padding: 10px 0;
1300
- border-bottom: 1px solid var(--lp-border);
1316
+ line-height: 1.5;
1301
1317
  }
1302
1318
 
1303
- .lp-pricing-features li:last-child {
1304
- border-bottom: none;
1319
+ /* Roadmap v2 */
1320
+ .lp-roadmap-v2 {
1321
+ justify-content: flex-start;
1322
+ padding: 64px 80px;
1305
1323
  }
1306
1324
 
1307
- .lp-pricing-cta {
1308
- display: inline-block;
1309
- background: var(--lp-accent);
1310
- color: #fff;
1311
- font-size: 16px;
1312
- font-weight: 600;
1313
- padding: 12px 28px;
1314
- border-radius: 100px;
1325
+ .lp-roadmap-v2-header {
1326
+ margin-bottom: 48px;
1315
1327
  }
1316
1328
 
1317
- /* Additional layouts */
1318
- .lp-split-v1 {
1329
+ .lp-roadmap-v2-track {
1319
1330
  display: flex;
1331
+ gap: 32px;
1320
1332
  width: 100%;
1321
- height: 100%;
1322
- background: var(--lp-surface);
1333
+ max-width: 1040px;
1334
+ margin: 0 auto;
1335
+ align-items: stretch;
1323
1336
  }
1324
1337
 
1325
- .lp-split-v1-content {
1338
+ .lp-roadmap-v2-phase {
1326
1339
  flex: 1;
1327
- display: flex;
1328
- flex-direction: column;
1329
- justify-content: center;
1330
- 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;
1331
1346
  }
1332
1347
 
1333
- .lp-split-v1-title {
1334
- 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);
1335
1355
  }
1336
1356
 
1337
- .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 {
1338
1365
  list-style: none;
1339
1366
  padding: 0;
1340
1367
  margin: 0;
1341
1368
  }
1342
1369
 
1343
- .lp-split-v1-points li {
1344
- font-size: 20px;
1370
+ .lp-roadmap-v2-goal-item {
1371
+ font-size: 16px;
1345
1372
  color: var(--lp-secondary);
1346
- padding: 12px 0;
1347
- border-bottom: 1px solid var(--lp-border);
1373
+ padding: 6px 0 6px 14px;
1374
+ position: relative;
1348
1375
  }
1349
1376
 
1350
- .lp-split-v1-points li:last-child {
1351
- border-bottom: none;
1377
+ .lp-roadmap-v2-goal-item::before {
1378
+ content: '•';
1379
+ position: absolute;
1380
+ left: 0;
1381
+ color: var(--lp-accent);
1352
1382
  }
1353
1383
 
1354
- .lp-split-v1-media {
1355
- flex: 1;
1356
- position: relative;
1357
- background: var(--lp-bg);
1384
+ /* Pricing v2 */
1385
+ .lp-pricing-v2 {
1386
+ justify-content: flex-start;
1387
+ padding: 64px 80px;
1358
1388
  }
1359
1389
 
1360
- .lp-split-v1-media img {
1361
- width: 100%;
1362
- height: 100%;
1363
- object-fit: cover;
1390
+ .lp-pricing-v2-header {
1391
+ margin-bottom: 48px;
1364
1392
  }
1365
1393
 
1366
- .lp-split-v1-placeholder {
1394
+ .lp-pricing-v2-grid {
1395
+ display: grid;
1396
+ grid-template-columns: repeat(3, 1fr);
1397
+ gap: 28px;
1367
1398
  width: 100%;
1368
- height: 100%;
1369
- background: var(--lp-bg);
1370
- border: 2px dashed var(--lp-border);
1399
+ max-width: 1040px;
1400
+ margin: 0 auto;
1371
1401
  }
1372
1402
 
1373
- .lp-stats-v1 {
1374
- width: 100%;
1375
- height: 100%;
1376
- padding: 80px;
1403
+ .lp-pricing-v2-card {
1377
1404
  background: var(--lp-surface);
1405
+ border: 1px solid var(--lp-border);
1406
+ border-radius: 16px;
1407
+ padding: 32px;
1378
1408
  display: flex;
1379
1409
  flex-direction: column;
1380
1410
  }
1381
1411
 
1382
- .lp-stats-v1-header {
1383
- margin-bottom: 48px;
1412
+ .lp-pricing-v2-card-highlighted {
1413
+ border-color: var(--lp-accent);
1414
+ background: var(--lp-accent);
1384
1415
  }
1385
1416
 
1386
- .lp-stats-v1-grid {
1387
- display: grid;
1388
- grid-template-columns: repeat(2, 1fr);
1389
- gap: 24px;
1390
- 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;
1391
1422
  }
1392
1423
 
1393
- .lp-stats-v1-card {
1394
- background: var(--lp-bg);
1395
- border-radius: 16px;
1396
- padding: 32px;
1397
- display: flex;
1398
- flex-direction: column;
1399
- justify-content: center;
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);
1400
1427
  }
1401
1428
 
1402
- .lp-stats-v1-label {
1403
- font-size: 16px;
1404
- color: var(--lp-secondary);
1405
- 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);
1406
1434
  }
1407
1435
 
1408
- .lp-stats-v1-value-row {
1409
- margin-bottom: 8px;
1436
+ .lp-pricing-v2-price-row {
1437
+ margin-bottom: 20px;
1438
+ display: flex;
1439
+ align-items: baseline;
1440
+ gap: 4px;
1410
1441
  }
1411
1442
 
1412
- .lp-stats-v1-value {
1443
+ .lp-pricing-v2-price {
1413
1444
  font-size: 48px;
1414
1445
  font-weight: 800;
1415
- color: var(--lp-text);
1446
+ color: var(--lp-accent);
1416
1447
  }
1417
1448
 
1418
- .lp-stats-v1-unit {
1419
- font-size: 20px;
1449
+ .lp-pricing-v2-period {
1450
+ font-size: 16px;
1420
1451
  color: var(--lp-secondary);
1421
- margin-left: 4px;
1422
- }
1423
-
1424
- .lp-stats-v1-change {
1425
- font-size: 14px;
1426
- color: var(--lp-accent);
1427
1452
  }
1428
1453
 
1429
- .lp-gallery-v1 {
1430
- width: 100%;
1431
- height: 100%;
1432
- padding: 80px;
1433
- background: var(--lp-surface);
1454
+ .lp-pricing-v2-features {
1455
+ list-style: none;
1456
+ padding: 0;
1457
+ margin: 0;
1434
1458
  display: flex;
1435
1459
  flex-direction: column;
1460
+ gap: 10px;
1436
1461
  }
1437
1462
 
1438
- .lp-gallery-v1-header {
1439
- 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;
1440
1468
  }
1441
1469
 
1442
- .lp-gallery-v1-grid {
1443
- display: grid;
1444
- grid-template-columns: repeat(2, 1fr);
1445
- gap: 24px;
1446
- 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;
1447
1476
  }
1448
1477
 
1449
- .lp-gallery-v1-item {
1450
- position: relative;
1451
- border-radius: 12px;
1452
- overflow: hidden;
1453
- background: var(--lp-bg);
1478
+ /* Feature v2 */
1479
+ .lp-feature-v2 {
1480
+ justify-content: flex-start;
1481
+ padding: 64px 80px;
1454
1482
  }
1455
1483
 
1456
- .lp-gallery-v1-item img {
1457
- width: 100%;
1458
- height: 100%;
1459
- object-fit: cover;
1484
+ .lp-feature-v2-header {
1485
+ margin-bottom: 48px;
1460
1486
  }
1461
1487
 
1462
- .lp-gallery-v1-placeholder {
1488
+ .lp-feature-v2-grid {
1489
+ display: grid;
1490
+ grid-template-columns: repeat(3, 1fr);
1491
+ gap: 32px;
1463
1492
  width: 100%;
1464
- height: 100%;
1465
- background: var(--lp-bg);
1466
- border: 2px dashed var(--lp-border);
1493
+ max-width: 1040px;
1494
+ margin: 0 auto;
1467
1495
  }
1468
1496
 
1469
- .lp-gallery-v1-caption {
1470
- position: absolute;
1471
- bottom: 0;
1472
- left: 0;
1473
- right: 0;
1474
- padding: 12px 16px;
1475
- background: rgba(0, 0, 0, 0.5);
1476
- color: #fff;
1477
- font-size: 14px;
1497
+ .lp-feature-v2-card {
1498
+ background: var(--lp-surface);
1499
+ border: 1px solid var(--lp-border);
1500
+ border-radius: 16px;
1501
+ padding: 32px;
1478
1502
  }
1479
1503
 
1480
- .lp-faq-v1 {
1481
- width: 100%;
1482
- height: 100%;
1483
- padding: 80px;
1484
- background: var(--lp-surface);
1485
- display: flex;
1486
- flex-direction: column;
1504
+ .lp-feature-v2-icon {
1505
+ font-size: 36px;
1506
+ color: var(--lp-accent);
1507
+ margin-bottom: 16px;
1487
1508
  }
1488
1509
 
1489
- .lp-faq-v1-header {
1490
- 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);
1491
1515
  }
1492
1516
 
1493
- .lp-faq-v1-list {
1494
- display: flex;
1495
- flex-direction: column;
1496
- gap: 24px;
1517
+ .lp-feature-v2-description {
1518
+ font-size: 16px;
1519
+ color: var(--lp-secondary);
1520
+ line-height: 1.55;
1497
1521
  }
1498
1522
 
1499
- .lp-faq-v1-item {
1500
- background: var(--lp-bg);
1501
- border-radius: 12px;
1502
- padding: 24px;
1523
+ /* Team v2 */
1524
+ .lp-team-v2 {
1525
+ justify-content: flex-start;
1526
+ padding: 64px 80px;
1503
1527
  }
1504
1528
 
1505
- .lp-faq-v1-question,
1506
- .lp-faq-v1-answer {
1507
- display: flex;
1508
- gap: 12px;
1509
- align-items: flex-start;
1529
+ .lp-team-v2-header {
1530
+ margin-bottom: 48px;
1510
1531
  }
1511
1532
 
1512
- .lp-faq-v1-question {
1513
- font-size: 18px;
1514
- font-weight: 600;
1515
- color: var(--lp-text);
1516
- 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;
1517
1540
  }
1518
1541
 
1519
- .lp-faq-v1-answer {
1520
- font-size: 16px;
1521
- color: var(--lp-secondary);
1522
- 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;
1523
1548
  }
1524
1549
 
1525
- .lp-faq-v1-q,
1526
- .lp-faq-v1-a {
1527
- 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;
1528
1559
  align-items: center;
1529
1560
  justify-content: center;
1530
- width: 24px;
1531
- height: 24px;
1532
- border-radius: 50%;
1533
- font-size: 12px;
1534
- font-weight: 700;
1535
- flex-shrink: 0;
1536
1561
  }
1537
1562
 
1538
- .lp-faq-v1-q {
1539
- background: var(--lp-accent);
1540
- color: #fff;
1563
+ .lp-team-v2-avatar-placeholder {
1564
+ font-size: 28px;
1565
+ font-weight: 700;
1566
+ color: var(--lp-text);
1541
1567
  }
1542
1568
 
1543
- .lp-faq-v1-a {
1544
- background: var(--lp-border);
1569
+ .lp-team-v2-name {
1570
+ font-size: 20px;
1571
+ font-weight: 700;
1572
+ margin-bottom: 4px;
1545
1573
  color: var(--lp-text);
1546
1574
  }
1547
1575
 
1548
- .lp-partners-v1 {
1549
- width: 100%;
1550
- height: 100%;
1551
- padding: 80px;
1552
- background: var(--lp-surface);
1553
- display: flex;
1554
- flex-direction: column;
1576
+ .lp-team-v2-role {
1577
+ font-size: 14px;
1578
+ color: var(--lp-accent);
1579
+ margin-bottom: 12px;
1555
1580
  }
1556
1581
 
1557
- .lp-partners-v1-header {
1558
- margin-bottom: 48px;
1582
+ .lp-team-v2-bio {
1583
+ font-size: 14px;
1584
+ color: var(--lp-secondary);
1585
+ line-height: 1.5;
1559
1586
  }
1560
1587
 
1561
- .lp-partners-v1-grid {
1562
- display: grid;
1563
- grid-template-columns: repeat(4, 1fr);
1564
- gap: 24px;
1565
- flex: 1;
1566
- align-content: center;
1588
+ /* Metric v3 */
1589
+ .lp-metric-v3 {
1590
+ justify-content: flex-start;
1591
+ padding: 64px 80px;
1567
1592
  }
1568
1593
 
1569
- .lp-partners-v1-card {
1570
- background: var(--lp-bg);
1571
- border-radius: 12px;
1572
- padding: 24px;
1573
- display: flex;
1574
- flex-direction: column;
1575
- align-items: center;
1576
- justify-content: center;
1577
- gap: 12px;
1594
+ .lp-metric-v3-header {
1595
+ margin-bottom: 48px;
1578
1596
  }
1579
1597
 
1580
- .lp-partners-v1-card img {
1581
- max-width: 100%;
1582
- max-height: 48px;
1583
- 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;
1584
1605
  }
1585
1606
 
1586
- .lp-partners-v1-logo-placeholder {
1587
- width: 64px;
1588
- height: 64px;
1589
- border-radius: 50%;
1590
- background: var(--lp-bg);
1591
- border: 2px dashed var(--lp-border);
1607
+ .lp-metric-v3-card {
1608
+ background: var(--lp-surface);
1609
+ border: 1px solid var(--lp-border);
1610
+ border-radius: 16px;
1611
+ padding: 40px;
1592
1612
  }
1593
1613
 
1594
- .lp-partners-v1-name {
1595
- font-size: 14px;
1614
+ .lp-metric-v3-label {
1615
+ font-size: 16px;
1596
1616
  color: var(--lp-secondary);
1597
- text-align: center;
1617
+ margin-bottom: 12px;
1598
1618
  }
1599
1619
 
1600
- .lp-testimonial-v1 {
1601
- width: 100%;
1602
- height: 100%;
1603
- padding: 80px;
1604
- background: var(--lp-surface);
1620
+ .lp-metric-v3-value-row {
1605
1621
  display: flex;
1606
- align-items: center;
1607
- justify-content: center;
1622
+ align-items: baseline;
1623
+ gap: 8px;
1624
+ margin-bottom: 12px;
1608
1625
  }
1609
1626
 
1610
- .lp-testimonial-v1-content {
1611
- 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;
1612
1632
  }
1613
1633
 
1614
- .lp-testimonial-v1-quote {
1615
- position: relative;
1616
- margin-bottom: 40px;
1634
+ .lp-metric-v3-unit {
1635
+ font-size: 24px;
1636
+ color: var(--lp-secondary);
1617
1637
  }
1618
1638
 
1619
- .lp-testimonial-v1-mark {
1620
- position: absolute;
1621
- top: -24px;
1622
- left: -16px;
1623
- font-size: 120px;
1624
- line-height: 1;
1639
+ .lp-metric-v3-change {
1640
+ font-size: 18px;
1641
+ font-weight: 700;
1625
1642
  color: var(--lp-accent);
1626
- opacity: 0.2;
1627
- font-family: Georgia, serif;
1628
1643
  }
1629
1644
 
1630
- .lp-testimonial-v1-quote blockquote {
1631
- position: relative;
1632
- font-size: 36px;
1633
- font-weight: 500;
1634
- line-height: 1.4;
1635
- color: var(--lp-text);
1636
- margin: 0;
1637
- padding: 0;
1645
+ /* Pricing v1 */
1646
+ .lp-pricing-v1 {
1647
+ justify-content: center;
1638
1648
  }
1639
1649
 
1640
- .lp-testimonial-v1-author {
1641
- 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;
1642
1660
  align-items: center;
1643
- gap: 20px;
1644
1661
  }
1645
1662
 
1646
- .lp-testimonial-v1-author img,
1647
- .lp-testimonial-v1-avatar-placeholder {
1648
- width: 64px;
1649
- height: 64px;
1650
- border-radius: 50%;
1651
- object-fit: cover;
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);
1652
1670
  }
1653
1671
 
1654
- .lp-testimonial-v1-avatar-placeholder {
1655
- background: var(--lp-bg);
1656
- border: 2px dashed var(--lp-border);
1672
+ .lp-pricing-card-highlight {
1673
+ transform: scale(1.05);
1674
+ border-color: var(--lp-accent);
1657
1675
  }
1658
1676
 
1659
- .lp-testimonial-v1-name {
1660
- font-size: 18px;
1661
- font-weight: 600;
1677
+ .lp-pricing-name {
1678
+ font-size: 22px;
1679
+ font-weight: 700;
1662
1680
  color: var(--lp-text);
1681
+ margin-bottom: 16px;
1663
1682
  }
1664
1683
 
1665
- .lp-testimonial-v1-role {
1666
- font-size: 14px;
1667
- color: var(--lp-secondary);
1684
+ .lp-pricing-price-row {
1685
+ margin-bottom: 24px;
1668
1686
  }
1669
1687
 
1670
- .lp-roadmap-v1 {
1671
- width: 100%;
1672
- height: 100%;
1673
- padding: 80px;
1674
- background: var(--lp-surface);
1675
- display: flex;
1676
- flex-direction: column;
1688
+ .lp-pricing-price {
1689
+ font-size: 48px;
1690
+ font-weight: 800;
1691
+ color: var(--lp-text);
1677
1692
  }
1678
1693
 
1679
- .lp-roadmap-v1-header {
1680
- margin-bottom: 48px;
1694
+ .lp-pricing-period {
1695
+ font-size: 16px;
1696
+ color: var(--lp-secondary);
1697
+ margin-left: 4px;
1681
1698
  }
1682
1699
 
1683
- .lp-roadmap-v1-track {
1684
- position: relative;
1685
- padding-left: 24px;
1686
- flex: 1;
1687
- overflow-y: auto;
1700
+ .lp-pricing-features {
1701
+ list-style: none;
1702
+ padding: 0;
1703
+ margin: 0 0 28px;
1688
1704
  }
1689
1705
 
1690
- .lp-roadmap-v1-track::before {
1691
- content: '';
1692
- position: absolute;
1693
- top: 12px;
1694
- bottom: 12px;
1695
- left: 7px;
1696
- width: 2px;
1697
- background: var(--lp-border);
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);
1698
1711
  }
1699
1712
 
1700
- .lp-roadmap-v1-phase {
1701
- position: relative;
1702
- padding-left: 36px;
1703
- margin-bottom: 32px;
1713
+ .lp-pricing-features li:last-child {
1714
+ border-bottom: none;
1704
1715
  }
1705
1716
 
1706
- .lp-roadmap-v1-dot {
1707
- position: absolute;
1708
- top: 6px;
1709
- left: 0;
1710
- width: 16px;
1711
- height: 16px;
1712
- border-radius: 50%;
1717
+ .lp-pricing-cta {
1718
+ display: inline-block;
1713
1719
  background: var(--lp-accent);
1714
- border: 3px solid var(--lp-surface);
1715
- box-shadow: 0 0 0 2px var(--lp-accent);
1716
- }
1717
-
1718
- .lp-roadmap-v1-top {
1719
- display: flex;
1720
- align-items: center;
1721
- gap: 12px;
1722
- margin-bottom: 8px;
1723
- }
1724
-
1725
- .lp-roadmap-v1-title {
1726
- font-size: 20px;
1727
- font-weight: 700;
1728
- color: var(--lp-text);
1729
- }
1730
-
1731
- .lp-roadmap-v1-status {
1732
- font-size: 12px;
1720
+ color: #fff;
1721
+ font-size: 16px;
1733
1722
  font-weight: 600;
1734
- color: var(--lp-accent);
1735
- background: rgba(0, 113, 227, 0.1);
1736
- padding: 4px 10px;
1723
+ padding: 12px 28px;
1737
1724
  border-radius: 100px;
1738
1725
  }
1739
1726
 
1740
- .lp-roadmap-v1-description {
1741
- font-size: 16px;
1742
- color: var(--lp-secondary);
1743
- line-height: 1.6;
1744
- }
1745
-
1746
- @media print {
1747
- html, body {
1748
- display: block;
1749
- background: #fff;
1750
- }
1751
-
1752
- .lp-editor-bar,
1753
- .lp-nav,
1754
- .lp-page-counter,
1755
- .lp-hint {
1756
- display: none !important;
1757
- }
1758
-
1759
- .lp-deck {
1760
- box-shadow: none;
1761
- border-radius: 0;
1762
- width: 100% !important;
1763
- height: auto !important;
1764
- overflow: visible;
1765
- }
1766
-
1767
- .lp-slide-wrapper {
1768
- position: relative;
1769
- transform: none !important;
1770
- opacity: 1 !important;
1771
- width: 100% !important;
1772
- height: 720px !important;
1773
- page-break-after: always;
1774
- break-after: page;
1775
- z-index: auto !important;
1776
- }
1777
-
1778
- .lp-slide-wrapper:last-child {
1779
- page-break-after: auto;
1780
- break-after: auto;
1781
- }
1782
- }
1783
- .lp-testimonial-v2 {
1727
+ /* Additional layouts */
1728
+ .lp-split-v1 {
1729
+ display: flex;
1784
1730
  width: 100%;
1785
1731
  height: 100%;
1786
- padding: 80px;
1787
1732
  background: var(--lp-surface);
1788
- display: flex;
1789
- align-items: center;
1790
- justify-content: center;
1791
- }
1792
-
1793
- .lp-testimonial-v2-card {
1794
- width: 100%;
1795
- max-width: 900px;
1796
- background: var(--lp-bg);
1797
- border: 1px solid var(--lp-border);
1798
- border-radius: var(--lp-radius-large);
1799
- padding: 48px;
1800
- position: relative;
1801
- }
1802
-
1803
- .lp-testimonial-v2-logo {
1804
- position: absolute;
1805
- top: 32px;
1806
- right: 40px;
1807
- height: 32px;
1808
- max-width: 120px;
1809
- object-fit: contain;
1810
1733
  }
1811
1734
 
1812
- .lp-testimonial-v2-company {
1813
- position: absolute;
1814
- top: 32px;
1815
- right: 40px;
1816
- font-size: 14px;
1817
- font-weight: 600;
1818
- color: var(--lp-secondary);
1819
- text-transform: uppercase;
1820
- letter-spacing: 0.05em;
1735
+ .lp-split-v1-content {
1736
+ flex: 1;
1737
+ display: flex;
1738
+ flex-direction: column;
1739
+ justify-content: center;
1740
+ padding: 80px;
1821
1741
  }
1822
1742
 
1823
- .lp-testimonial-v2-quote {
1824
- margin: 32px 0 40px;
1743
+ .lp-split-v1-title {
1744
+ margin-bottom: 32px;
1825
1745
  }
1826
1746
 
1827
- .lp-testimonial-v2-quote blockquote {
1828
- font-size: 32px;
1829
- font-weight: 500;
1830
- line-height: 1.4;
1831
- color: var(--lp-text);
1832
- margin: 0;
1747
+ .lp-split-v1-points {
1748
+ list-style: none;
1833
1749
  padding: 0;
1750
+ margin: 0;
1834
1751
  }
1835
1752
 
1836
- .lp-testimonial-v2-footer {
1837
- display: flex;
1838
- align-items: flex-end;
1839
- justify-content: space-between;
1840
- 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);
1841
1758
  }
1842
1759
 
1843
- .lp-testimonial-v2-name {
1844
- font-size: 18px;
1845
- font-weight: 600;
1846
- color: var(--lp-text);
1760
+ .lp-split-v1-points li:last-child {
1761
+ border-bottom: none;
1847
1762
  }
1848
1763
 
1849
- .lp-testimonial-v2-role {
1850
- font-size: 14px;
1851
- color: var(--lp-secondary);
1852
- margin-top: 4px;
1764
+ .lp-split-v1-media {
1765
+ flex: 1;
1766
+ position: relative;
1767
+ background: var(--lp-bg);
1853
1768
  }
1854
1769
 
1855
- .lp-testimonial-v2-metric {
1856
- text-align: right;
1857
- flex-shrink: 0;
1770
+ .lp-split-v1-media img {
1771
+ width: 100%;
1772
+ height: 100%;
1773
+ object-fit: cover;
1858
1774
  }
1859
1775
 
1860
- .lp-testimonial-v2-metric-value {
1861
- font-size: 36px;
1862
- font-weight: 700;
1863
- color: var(--lp-accent);
1864
- 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);
1865
1781
  }
1866
1782
 
1867
- .lp-testimonial-v2-metric-label {
1868
- font-size: 13px;
1869
- color: var(--lp-secondary);
1870
- margin-top: 4px;
1871
- }
1872
- .lp-chart-v2 {
1783
+ .lp-stats-v1 {
1873
1784
  width: 100%;
1874
1785
  height: 100%;
1875
1786
  padding: 80px;
@@ -1878,44 +1789,54 @@ body {
1878
1789
  flex-direction: column;
1879
1790
  }
1880
1791
 
1881
- .lp-chart-v2-header {
1882
- margin-bottom: 40px;
1792
+ .lp-stats-v1-header {
1793
+ margin-bottom: 48px;
1883
1794
  }
1884
1795
 
1885
- .lp-chart-v2-body {
1796
+ .lp-stats-v1-grid {
1797
+ display: grid;
1798
+ grid-template-columns: repeat(2, 1fr);
1799
+ gap: 24px;
1886
1800
  flex: 1;
1801
+ }
1802
+
1803
+ .lp-stats-v1-card {
1804
+ background: var(--lp-bg);
1805
+ border-radius: 16px;
1806
+ padding: 32px;
1887
1807
  display: flex;
1888
- align-items: center;
1808
+ flex-direction: column;
1889
1809
  justify-content: center;
1890
1810
  }
1891
1811
 
1892
- .lp-chart-v2-svg {
1893
- width: 100%;
1894
- max-width: 900px;
1895
- height: auto;
1812
+ .lp-stats-v1-label {
1813
+ font-size: 16px;
1814
+ color: var(--lp-secondary);
1815
+ margin-bottom: 12px;
1896
1816
  }
1897
1817
 
1898
- .lp-chart-v2-grid {
1899
- stroke: var(--lp-border);
1900
- stroke-width: 1;
1818
+ .lp-stats-v1-value-row {
1819
+ margin-bottom: 8px;
1901
1820
  }
1902
1821
 
1903
- .lp-chart-v2-axis-text {
1904
- fill: var(--lp-secondary);
1905
- font-size: 12px;
1906
- font-family: var(--lp-font-mono);
1822
+ .lp-stats-v1-value {
1823
+ font-size: 48px;
1824
+ font-weight: 800;
1825
+ color: var(--lp-text);
1907
1826
  }
1908
1827
 
1909
- .lp-chart-v2-bar {
1910
- opacity: 0.9;
1828
+ .lp-stats-v1-unit {
1829
+ font-size: 20px;
1830
+ color: var(--lp-secondary);
1831
+ margin-left: 4px;
1911
1832
  }
1912
1833
 
1913
- .lp-chart-v2-legend-text {
1914
- fill: var(--lp-secondary);
1915
- font-size: 12px;
1916
- font-family: var(--lp-font-body);
1834
+ .lp-stats-v1-change {
1835
+ font-size: 14px;
1836
+ color: var(--lp-accent);
1917
1837
  }
1918
- .lp-gallery-v2 {
1838
+
1839
+ .lp-gallery-v1 {
1919
1840
  width: 100%;
1920
1841
  height: 100%;
1921
1842
  padding: 80px;
@@ -1924,26 +1845,515 @@ body {
1924
1845
  flex-direction: column;
1925
1846
  }
1926
1847
 
1927
- .lp-gallery-v2-header {
1848
+ .lp-gallery-v1-header {
1928
1849
  margin-bottom: 40px;
1929
1850
  }
1930
1851
 
1931
- .lp-gallery-v2-grid {
1852
+ .lp-gallery-v1-grid {
1932
1853
  display: grid;
1933
- grid-template-columns: repeat(3, 1fr);
1854
+ grid-template-columns: repeat(2, 1fr);
1934
1855
  gap: 24px;
1935
1856
  flex: 1;
1936
- align-content: start;
1937
1857
  }
1938
1858
 
1939
- .lp-gallery-v2-item {
1940
- display: flex;
1941
- flex-direction: column;
1942
- gap: 10px;
1859
+ .lp-gallery-v1-item {
1860
+ position: relative;
1861
+ border-radius: 12px;
1862
+ overflow: hidden;
1863
+ background: var(--lp-bg);
1943
1864
  }
1944
1865
 
1945
- .lp-gallery-v2-item img,
1946
- .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 {
1947
2357
  width: 100%;
1948
2358
  aspect-ratio: 16 / 10;
1949
2359
  object-fit: cover;
@@ -1952,9 +2362,487 @@ body {
1952
2362
  border: 1px solid var(--lp-border);
1953
2363
  }
1954
2364
 
1955
- .lp-gallery-v2-caption {
2365
+ .lp-gallery-v2-caption {
2366
+ font-size: 14px;
2367
+ color: var(--lp-secondary);
2368
+ text-align: center;
2369
+ line-height: 1.4;
2370
+ }
2371
+
2372
+ .lp-gallery-v3 {
2373
+ width: 100%;
2374
+ height: 100%;
2375
+ padding: 80px;
2376
+ background: var(--lp-surface);
2377
+ display: flex;
2378
+ flex-direction: column;
2379
+ }
2380
+
2381
+ .lp-gallery-v3-title {
2382
+ margin-bottom: 40px;
2383
+ }
2384
+
2385
+ .lp-gallery-v3-grid {
2386
+ display: grid;
2387
+ grid-template-columns: repeat(3, 1fr);
2388
+ gap: 32px;
2389
+ flex: 1;
2390
+ align-content: center;
2391
+ }
2392
+
2393
+ .lp-gallery-v3-item {
2394
+ display: flex;
2395
+ flex-direction: column;
2396
+ gap: 16px;
2397
+ }
2398
+
2399
+ .lp-gallery-v3-image,
2400
+ .lp-gallery-v3-placeholder {
2401
+ width: 100%;
2402
+ height: 280px;
2403
+ object-fit: cover;
2404
+ border-radius: var(--lp-radius-large);
2405
+ background: var(--lp-bg);
2406
+ border: 1px solid var(--lp-border);
2407
+ }
2408
+
2409
+ .lp-gallery-v3-caption {
2410
+ font-size: 16px;
2411
+ color: var(--lp-secondary);
2412
+ text-align: center;
2413
+ line-height: 1.5;
2414
+ }
2415
+
2416
+ .lp-testimonial-v3 {
2417
+ flex-direction: row;
2418
+ align-items: stretch;
2419
+ padding: 0;
2420
+ }
2421
+
2422
+ .lp-testimonial-v3-left {
2423
+ flex: 1.3;
2424
+ display: flex;
2425
+ flex-direction: column;
2426
+ justify-content: center;
2427
+ padding: 80px 64px;
2428
+ background: var(--lp-bg);
2429
+ position: relative;
2430
+ }
2431
+
2432
+ .lp-testimonial-v3-mark {
2433
+ position: absolute;
2434
+ top: 48px;
2435
+ left: 48px;
2436
+ font-size: 160px;
2437
+ font-weight: 800;
2438
+ line-height: 1;
2439
+ color: var(--lp-accent);
2440
+ opacity: 0.2;
2441
+ user-select: none;
2442
+ }
2443
+
2444
+ .lp-testimonial-v3-quote {
2445
+ position: relative;
2446
+ font-size: 34px;
2447
+ line-height: 1.5;
2448
+ color: var(--lp-text);
2449
+ margin: 0;
2450
+ padding: 0;
2451
+ }
2452
+
2453
+ .lp-testimonial-v3-quote blockquote {
2454
+ margin: 0;
2455
+ padding: 0;
2456
+ }
2457
+
2458
+ .lp-testimonial-v3-right {
2459
+ flex: 1;
2460
+ display: flex;
2461
+ align-items: center;
2462
+ justify-content: center;
2463
+ padding: 80px 64px;
2464
+ background: var(--lp-surface);
2465
+ }
2466
+
2467
+ .lp-testimonial-v3-card {
2468
+ width: 100%;
2469
+ max-width: 320px;
2470
+ text-align: center;
2471
+ }
2472
+
2473
+ .lp-testimonial-v3-avatar,
2474
+ .lp-testimonial-v3-avatar-placeholder {
2475
+ width: 96px;
2476
+ height: 96px;
2477
+ border-radius: 50%;
2478
+ object-fit: cover;
2479
+ margin: 0 auto 24px;
2480
+ background: var(--lp-bg);
2481
+ border: 2px dashed var(--lp-border);
2482
+ }
2483
+
2484
+ .lp-testimonial-v3-author {
2485
+ font-size: 22px;
2486
+ font-weight: 700;
2487
+ color: var(--lp-text);
2488
+ }
2489
+
2490
+ .lp-testimonial-v3-role {
2491
+ font-size: 15px;
2492
+ color: var(--lp-secondary);
2493
+ margin-top: 4px;
2494
+ }
2495
+
2496
+ .lp-testimonial-v3-company {
2497
+ font-size: 14px;
2498
+ color: var(--lp-secondary);
2499
+ margin-top: 4px;
2500
+ font-family: var(--lp-font-mono);
2501
+ }
2502
+
2503
+ .lp-testimonial-v3-metric {
2504
+ margin-top: 28px;
2505
+ padding-top: 24px;
2506
+ border-top: 1px solid var(--lp-border);
2507
+ }
2508
+
2509
+ .lp-testimonial-v3-metric-value {
2510
+ font-size: 42px;
2511
+ font-weight: 800;
2512
+ color: var(--lp-accent);
2513
+ line-height: 1;
2514
+ }
2515
+
2516
+ .lp-testimonial-v3-metric-label {
2517
+ font-size: 14px;
2518
+ color: var(--lp-secondary);
2519
+ margin-top: 6px;
2520
+ }
2521
+
2522
+ .lp-comparison-v3 {
2523
+ justify-content: flex-start;
2524
+ padding: 80px;
2525
+ }
2526
+
2527
+ .lp-comparison-v3-title {
2528
+ font-size: 48px;
2529
+ font-weight: 800;
2530
+ margin-bottom: 48px;
2531
+ }
2532
+
2533
+ .lp-comparison-v3-table {
2534
+ width: 100%;
2535
+ display: flex;
2536
+ flex-direction: column;
2537
+ gap: 2px;
2538
+ border: 1px solid var(--lp-border);
2539
+ border-radius: var(--lp-radius-medium);
2540
+ overflow: hidden;
2541
+ }
2542
+
2543
+ .lp-comparison-v3-header {
2544
+ display: grid;
2545
+ grid-template-columns: 1.4fr 1fr 1fr;
2546
+ gap: 2px;
2547
+ background: var(--lp-border);
2548
+ }
2549
+
2550
+ .lp-comparison-v3-header-cell {
2551
+ padding: 16px 20px;
2552
+ font-size: 15px;
2553
+ font-weight: 700;
2554
+ text-align: center;
2555
+ background: var(--lp-bg);
2556
+ color: var(--lp-text);
2557
+ }
2558
+
2559
+ .lp-comparison-v3-header-cell.lp-comparison-v3-left-title {
2560
+ background: var(--lp-accent);
2561
+ color: #fff;
2562
+ }
2563
+
2564
+ .lp-comparison-v3-row {
2565
+ display: grid;
2566
+ grid-template-columns: 1.4fr 1fr 1fr;
2567
+ gap: 2px;
2568
+ background: var(--lp-border);
2569
+ }
2570
+
2571
+ .lp-comparison-v3-cell {
2572
+ padding: 18px 20px;
2573
+ font-size: 16px;
2574
+ background: var(--lp-surface);
2575
+ color: var(--lp-text);
2576
+ display: flex;
2577
+ align-items: center;
2578
+ justify-content: center;
2579
+ }
2580
+
2581
+ .lp-comparison-v3-cell.lp-comparison-v3-feature {
2582
+ justify-content: flex-start;
2583
+ font-weight: 600;
2584
+ }
2585
+
2586
+ .lp-comparison-v3-row:nth-child(even) .lp-comparison-v3-cell {
2587
+ background: var(--lp-bg);
2588
+ }
2589
+
2590
+ .lp-timeline-v3 {
2591
+ justify-content: flex-start;
2592
+ padding: 80px;
2593
+ }
2594
+
2595
+ .lp-timeline-v3-title {
2596
+ font-size: 48px;
2597
+ font-weight: 800;
2598
+ margin-bottom: 48px;
2599
+ }
2600
+
2601
+ .lp-timeline-v3-list {
2602
+ display: flex;
2603
+ flex-direction: column;
2604
+ gap: 8px;
2605
+ }
2606
+
2607
+ .lp-timeline-v3-event {
2608
+ display: flex;
2609
+ gap: 24px;
2610
+ align-items: stretch;
2611
+ }
2612
+
2613
+ .lp-timeline-v3-node {
2614
+ position: relative;
2615
+ display: flex;
2616
+ flex-direction: column;
2617
+ align-items: center;
2618
+ width: 24px;
2619
+ flex-shrink: 0;
2620
+ padding-top: 8px;
2621
+ }
2622
+
2623
+ .lp-timeline-v3-dot {
2624
+ width: 18px;
2625
+ height: 18px;
2626
+ border-radius: 50%;
2627
+ background: var(--lp-accent);
2628
+ border: 3px solid var(--lp-surface);
2629
+ box-shadow: 0 0 0 2px var(--lp-border);
2630
+ z-index: 1;
2631
+ }
2632
+
2633
+ .lp-timeline-v3-line {
2634
+ position: absolute;
2635
+ top: 22px;
2636
+ bottom: -16px;
2637
+ width: 2px;
2638
+ background: var(--lp-border);
2639
+ }
2640
+
2641
+ .lp-timeline-v3-card {
2642
+ flex: 1;
2643
+ padding: 20px 24px;
2644
+ background: var(--lp-bg);
2645
+ border: 1px solid var(--lp-border);
2646
+ border-radius: var(--lp-radius-medium);
2647
+ margin-bottom: 16px;
2648
+ }
2649
+
2650
+ .lp-timeline-v3-date {
2651
+ font-size: 13px;
2652
+ font-weight: 700;
2653
+ color: var(--lp-accent);
2654
+ margin-bottom: 6px;
2655
+ font-family: var(--lp-font-mono);
2656
+ text-transform: uppercase;
2657
+ letter-spacing: 0.05em;
2658
+ }
2659
+
2660
+ .lp-timeline-v3-event-title {
2661
+ font-size: 20px;
2662
+ font-weight: 700;
2663
+ margin: 0 0 8px 0;
2664
+ color: var(--lp-text);
2665
+ }
2666
+
2667
+ .lp-timeline-v3-event-desc {
2668
+ font-size: 16px;
2669
+ line-height: 1.55;
2670
+ margin: 0;
2671
+ color: var(--lp-secondary);
2672
+ }
2673
+
2674
+ /* ---- Theme-specific variants (stage 3) -------------------------------- */
2675
+
2676
+ .lp-warm-business-timeline-v1 {
2677
+ justify-content: flex-start;
2678
+ padding: 80px;
2679
+ }
2680
+
2681
+ .lp-warm-business-timeline-header {
2682
+ margin-bottom: 52px;
2683
+ }
2684
+
2685
+ .lp-warm-business-timeline-kicker {
1956
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;
1957
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);
1958
2788
  text-align: center;
1959
- 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;
1960
2848
  }