/* ============================================================================= VARIANT-A.CSS — Tuincentrum de Groene Tuin Gebaseerd op gardendemo.ontwerp.live/v2/ Warm groen, organisch, Playfair Display + Poppins Vereist laadvolgorde in : 1. shared/css/base.css 2. shared/css/brand.css 3. css/variant-a.css ← dit bestand Dit bestand bevat ALLEEN layout-afwijkingen ten opzichte van brand.css: - Hero layout (full-bleed achtergrondafbeelding met overlay) - Features grid (4-koloms) - Categories grid (3-koloms) - Seizoen grid (50/50 naast elkaar) - Nieuws grid (3-koloms) ============================================================================= */ /* ----------------------------------------------------------------------------- 5. HERO — full-bleed achtergrondafbeelding met gradient-overlay (Variant B: 50/50 split · Variant C: 3-blokken raster) ----------------------------------------------------------------------------- */ .hero { position: relative; min-height: 90vh; display: flex; align-items: center; background-color: var(--color-primary-dark); background-image: url('../../images/hero-banner.jpg'); background-size: cover; background-position: center center; overflow: hidden; } /* Gradient overlay */ .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 100deg, rgba(41, 86, 64, 0.89) 0%, rgba(0, 0, 0, 0.45) 100% ); z-index: 1; } .hero__inner { position: relative; z-index: 2; display: flex; align-items: center; padding-top: 4rem; padding-bottom: 4rem; } .hero__content { max-width: 680px; animation: fadeInUp 0.7s ease 0.1s both; } /* Verberg het hero media-element — hero is een full-background sectie */ .hero__media { display: none; } .hero__title { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 3.75rem); font-weight: 700; color: #ffffff; line-height: 1.1; margin-bottom: 1.5rem; letter-spacing: -0.01em; } .hero__subtitle { font-family: var(--font-body); font-size: clamp(1rem, 1.5vw, 1.125rem); font-weight: 300; color: rgba(255, 255, 255, 0.9); line-height: 1.75; margin-bottom: 2.5rem; max-width: 560px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } /* ----------------------------------------------------------------------------- 6. FEATURES GRID — 4-koloms (kaart-stijl zit in brand.css) ----------------------------------------------------------------------------- */ .features__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } /* ----------------------------------------------------------------------------- 7. CATEGORIES GRID — 3-koloms (kaart-stijl zit in brand.css) ----------------------------------------------------------------------------- */ .categories__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } /* ----------------------------------------------------------------------------- 8. SEIZOEN LAYOUT — 50/50 grid naast elkaar met ruimte (content-stijl zit in brand.css) ----------------------------------------------------------------------------- */ .seizoen { background-color: var(--color-bg-white); padding: var(--section-padding); } .seizoen__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } /* ----------------------------------------------------------------------------- 9. NIEUWS GRID — 3 gelijke kolommen (kaart-stijl zit in brand.css) ----------------------------------------------------------------------------- */ .nieuws__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 3rem; } /* ----------------------------------------------------------------------------- 14. RESPONSIVE — TABLET (768px – 1023px) ----------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) { /* Features: 2-koloms op tablet */ .features__list { grid-template-columns: repeat(2, 1fr); } /* Categorieën: 2-koloms */ .categories__grid { grid-template-columns: repeat(2, 1fr); } /* Seizoen: gestapeld */ .seizoen__inner { grid-template-columns: 1fr; gap: 2.5rem; } .seizoen__media { max-height: 400px; overflow: hidden; } /* Nieuws: 2-koloms + 1 breed */ .nieuws__grid { grid-template-columns: repeat(2, 1fr); } .nieuws__grid .nieuws-kaart:last-child { grid-column: 1 / -1; } } /* ----------------------------------------------------------------------------- 15. RESPONSIVE — MOBIEL (< 768px) ----------------------------------------------------------------------------- */ @media (max-width: 767px) { /* Hero */ .hero { min-height: 75vh; } .hero__inner { min-height: 75vh; padding-top: 3rem; padding-bottom: 3rem; } .hero__actions { flex-direction: column; align-items: flex-start; } .hero__actions .btn { width: 100%; justify-content: center; } /* Features: 1-koloms — icoon naast de tekst i.p.v. erboven, scheelt veel hoogte. Het grid legt icoon links (over 2 rijen) en titel + tekst rechts. */ .features__list { grid-template-columns: 1fr; gap: 0.75rem; } .feature-block { display: grid; grid-template-columns: 44px 1fr; column-gap: 1rem; row-gap: 0.25rem; align-items: start; padding: 1.35rem 1.5rem; } .feature-block__icon { grid-row: 1 / span 2; width: 44px; height: 44px; margin-top: 2px; } .feature-block__icon img { width: 22px; height: 22px; } .feature-block__title { grid-column: 2; font-size: 1.125rem; } .feature-block__text { grid-column: 2; font-size: 0.875rem; line-height: 1.6; } /* Categorieën: 2-koloms */ .categories__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } /* Seizoen: gestapeld */ .seizoen__inner { grid-template-columns: 1fr; gap: 2rem; } /* Nieuws: 1-koloms — kaarten op volle breedte onder elkaar. Deze regel moet hier staan (niet in brand.css): de 3-koloms basisregel hierboven laadt later en zou een override in brand.css overschrijven. */ .nieuws__grid { grid-template-columns: 1fr; gap: 1rem; } /* Buttons seizoen breed op mobiel */ .seizoen__content .btn { width: 100%; justify-content: center; } } /* ----------------------------------------------------------------------------- 16. SINGLE-KOLOM GRID FIX VOOR HEEL KLEINE SCHERMEN (< 480px) ----------------------------------------------------------------------------- */ @media (max-width: 479px) { .categories__grid { grid-template-columns: 1fr; } } /* ----------------------------------------------------------------------------- 17. PRODUCTCATEGORIE- EN SUBCATEGORIEPAGINA'S Gedeelde bouwstenen voor categorie-*.html en subcategorie-*.html. Stond eerder als inline