| @@ -452,13 +452,32 @@ | ||
| 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; |
| 461 | +} | |
| 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; | |
| 461 | 480 | } |
| 462 | 481 | |
| 463 | 482 | /* ========================================================================== |
| 464 | 483 | Mobile Responsiveness |
