/** * css/homepage-builder.css * * Homepage-specific styles extracted from the legacy Builder document. * These styles were originally embedded in the full-document and * were lost during Content Region migration. They are not generic enough * for style.css — they belong to the homepage hero and carousel only. * * Includes: * - .h1-hero (hero section: padding, typography, background) * - .blog-carousel-wrap / .blog-carousel (horizontal scroll carousel) * - .blog-carousel .card (card layout inside carousel) * - .blog-carousel-nav (prev/next navigation buttons) * - Responsive breakpoints for mobile/tablet */ /* ============================================== Hero Section (.h1-hero) ============================================== */ .h1-hero { padding: 120px 0 70px; text-align: center; background: linear-gradient(180deg, #f8f9fc 0%, #f0f2f7 100%); } .h1-hero h1 { max-width: 820px; margin: 0 auto; font-size: clamp(2.2rem, 5vw, 3.5rem); } .h1-hero p { max-width: 640px; margin: 20px auto 32px; font-size: 1.05rem; } /* ============================================== Blog Carousel Wrap ============================================== */ .blog-carousel-wrap { position: relative; } .blog-carousel { display: flex; gap: 24px; overflow: hidden; scroll-behavior: smooth; } .blog-carousel .card { flex: 0 0 calc(33.333% - 16px); min-width: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0; } .blog-carousel .card .card-img { width: 100%; height: 180px; object-fit: cover; display: block; } .blog-carousel .card .card-body { padding: 20px 24px 24px; flex: 1; display: flex; flex-direction: column; } .blog-carousel .card .card-body .card-meta { font-size: 0.78rem; color: var(--color-muted); margin-bottom: 8px; } .blog-carousel .card .card-body .card-cat { font-size: 0.78rem; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .blog-carousel .card .card-body h3 { font-size: 1rem; margin-bottom: 8px; line-height: 1.4; } .blog-carousel .card .card-body h3 a { color: inherit; text-decoration: none; } .blog-carousel .card .card-body h3 a:hover { color: var(--color-primary); } .blog-carousel .card .card-body p { font-size: 0.85rem; color: var(--color-muted); flex: 1; margin-bottom: 12px; } .blog-carousel .card .card-body .read-more { font-size: 0.82rem; font-weight: 600; color: var(--color-primary); text-decoration: none; } /* ============================================== Carousel Navigation Buttons ============================================== */ .blog-carousel-nav { display: flex; justify-content: center; gap: 12px; margin-top: 32px; } .blog-carousel-nav button { width: 40px; height: 40px; border: 1px solid var(--color-border); background: var(--color-section); border-radius: 50%; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; color: var(--color-dark); } .blog-carousel-nav button:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } /* ============================================== Responsive ============================================== */ @media (max-width: 900px) { .blog-carousel .card { flex: 0 0 calc(50% - 12px); } } @media (max-width: 600px) { .blog-carousel .card { flex: 0 0 100%; } }