| @@ -452,9 +452,9 @@ | ||
| 452 | 452 | color: var(--mxch-primary); |
| 453 | 453 | background: rgba(120, 115, 245, 0.05); |
| 454 | 454 | } |
| 455 | 455 | |
| 456 | -/* Right Column - Feature Showcase */ | |
| 456 | +/* Right Column - Screenshot */ | |
| 457 | 457 | .mxch-addon-hero-image { |
| 458 | 458 | display: flex; |
| 459 | 459 | align-items: center; |
| 460 | 460 | justify-content: center; |
| @@ -459,8 +459,27 @@ | ||
| 459 | 459 | align-items: center; |
| 460 | 460 | justify-content: center; |
| 461 | 461 | } |
| 462 | 462 | |
| 463 | +.mxch-addon-hero-image img { | |
| 464 | + max-width: 100%; | |
| 465 | + height: auto; | |
| 466 | + border-radius: var(--mxch-radius-lg); | |
| 467 | + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| 468 | +} | |
| 469 | + | |
| 470 | +/* Image Placeholder (when no screenshot) */ | |
| 471 | +.mxch-addon-image-placeholder { | |
| 472 | + width: 100%; | |
| 473 | + aspect-ratio: 16/10; | |
| 474 | + background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); | |
| 475 | + border-radius: var(--mxch-radius-lg); | |
| 476 | + display: flex; | |
| 477 | + align-items: center; | |
| 478 | + justify-content: center; | |
| 479 | + color: #94a3b8; | |
| 480 | +} | |
| 481 | + | |
| 463 | 482 | /* ========================================================================== |
| 464 | 483 | Mobile Responsiveness |
| 465 | 484 | ========================================================================== */ |
| 466 | 485 | |
| @@ -572,89 +591,6 @@ | ||
| 572 | 591 | } |
| 573 | 592 | |
| 574 | 593 | body.mxch-mobile-panel-open { |
| 575 | 594 | overflow: hidden; |
| 576 | - } | |
| 577 | -} | |
| 578 | - | |
| 579 | -/* ========================================================================== | |
| 580 | - Feature Showcase (no-image addon detail visual) | |
| 581 | - ========================================================================== */ | |
| 582 | -.mxch-addon-feature-showcase { | |
| 583 | - display: grid; | |
| 584 | - grid-template-columns: 1fr 1fr; | |
| 585 | - gap: 16px; | |
| 586 | - width: 100%; | |
| 587 | - padding: 32px; | |
| 588 | - background: linear-gradient(145deg, #f8fafc 0%, #eef2ff 50%, #f5f3ff 100%); | |
| 589 | - border-radius: var(--mxch-radius-lg); | |
| 590 | - border: 1px solid rgba(99, 102, 241, 0.12); | |
| 591 | -} | |
| 592 | - | |
| 593 | -.mxch-addon-showcase-item { | |
| 594 | - display: flex; | |
| 595 | - align-items: flex-start; | |
| 596 | - gap: 12px; | |
| 597 | - padding: 20px; | |
| 598 | - background: #fff; | |
| 599 | - border-radius: 12px; | |
| 600 | - border: 1px solid rgba(99, 102, 241, 0.08); | |
| 601 | - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); | |
| 602 | - transition: all 0.2s ease; | |
| 603 | -} | |
| 604 | - | |
| 605 | -.mxch-addon-showcase-item:hover { | |
| 606 | - box-shadow: 0 4px 16px rgba(99, 102, 241, 0.12); | |
| 607 | - border-color: rgba(99, 102, 241, 0.2); | |
| 608 | - transform: translateY(-2px); | |
| 609 | -} | |
| 610 | - | |
| 611 | -.mxch-addon-showcase-icon { | |
| 612 | - flex-shrink: 0; | |
| 613 | - width: 40px; | |
| 614 | - height: 40px; | |
| 615 | - display: flex; | |
| 616 | - align-items: center; | |
| 617 | - justify-content: center; | |
| 618 | - border-radius: 10px; | |
| 619 | - background: var(--showcase-accent, #6366f1); | |
| 620 | - background: linear-gradient(135deg, var(--showcase-accent, #6366f1), #818cf8); | |
| 621 | - color: #fff; | |
| 622 | -} | |
| 623 | - | |
| 624 | -.mxch-addon-showcase-icon svg { | |
| 625 | - stroke: #fff; | |
| 626 | -} | |
| 627 | - | |
| 628 | -.mxch-addon-showcase-text { | |
| 629 | - display: flex; | |
| 630 | - flex-direction: column; | |
| 631 | - gap: 2px; | |
| 632 | - min-width: 0; | |
| 633 | -} | |
| 634 | - | |
| 635 | -.mxch-addon-showcase-text strong { | |
| 636 | - font-size: 13.5px; | |
| 637 | - font-weight: 600; | |
| 638 | - color: var(--mxch-text-primary, #1a1a2e); | |
| 639 | - line-height: 1.3; | |
| 640 | -} | |
| 641 | - | |
| 642 | -.mxch-addon-showcase-text span { | |
| 643 | - font-size: 12.5px; | |
| 644 | - color: var(--mxch-text-secondary, #64748b); | |
| 645 | - line-height: 1.4; | |
| 646 | -} | |
| 647 | - | |
| 648 | -@media screen and (max-width: 1100px) { | |
| 649 | - .mxch-addon-feature-showcase { | |
| 650 | - max-width: 500px; | |
| 651 | - margin: 0 auto; | |
| 652 | - } | |
| 653 | -} | |
| 654 | - | |
| 655 | -@media screen and (max-width: 600px) { | |
| 656 | - .mxch-addon-feature-showcase { | |
| 657 | - grid-template-columns: 1fr; | |
| 658 | - padding: 20px; | |
| 659 | 595 | } |
| 660 | 596 | } |
