/** * IVA Dealer - child theme van Classic 3.x (PrestaShop 9.0) * * PrestaShop laadt dit bestand automatisch als `theme-custom` met prioriteit * 1000, dus na de theme.css van Classic (prioriteit 50). Er is geen build-stap * nodig: dit is gewone CSS bovenop het parent-thema. * * De accentkleur staat hier niet hard in. De module ivastorefront zet * --iva-accent in de op de kleur uit de module-instellingen en kleurt * daar ook meteen de knoppen van Classic mee. Alles hieronder gebruikt die * variabele, met de IVA-rood als terugval. */ /* ---------------------------------------------------------------------- * 1. Eén gecentreerde kolom * * Classic draait op Bootstrap 4; .container is daar 1140px breed. We trekken * hem gelijk met de blokken van de module (1180px) zodat de header, de content * en de footer netjes onder elkaar uitlijnen. * -------------------------------------------------------------------- */ .container { max-width: 1180px; } #wrapper { padding-top: 1.5rem; } /* De homepage vult de breedte zelf al via de module. */ #index #wrapper > .container { max-width: none; padding: 0; } #index #content-wrapper { width: 100%; } /* ---------------------------------------------------------------------- * 2. Rustiger header * * Eén merk betekent: geen merkenmenu, geen taal- en valutakiezer, geen * bovenbalk vol links. Het menu zelf verbergt de module (en koppel je los in * Design > Positions); hier halen we de bovenbalk weg. * -------------------------------------------------------------------- */ .header-nav { border-bottom: 0; padding-block: .25rem; } .header-nav .right-nav, .header-nav #_desktop_contact_link { display: none; } #header .header-top { padding-bottom: .75rem; } #header { box-shadow: none; border-bottom: 1px solid rgba(0, 0, 0, .08); } /* ---------------------------------------------------------------------- * 3. Typografie en knoppen * -------------------------------------------------------------------- */ body { color: #1a1a1a; } h1, h2, h3 { letter-spacing: -.01em; } /* Classic zet knoppen standaard vierkant en in kapitalen; dat maakt een catalogus met veel knoppen onrustig. */ .btn { border-radius: 8px; text-transform: none; font-weight: 600; } /* Grotere klikvlakken: een deel van de klanten bedient de site met minder fijne motoriek of op een tablet. */ .btn, .iva-nav__link, .iva-jump__link { min-height: 44px; } /* ---------------------------------------------------------------------- * 4. Categoriepagina's in dezelfde stijl als de homepage * -------------------------------------------------------------------- */ #products .product-miniature, .featured-products .product-miniature { border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; overflow: hidden; } #products .product-miniature:hover { border-color: var(--iva-accent, #e2001a); } /* Sorteer- en weergavebalk mag stiller: het aanbod is overzichtelijk genoeg. */ #js-product-list-top { border: 0; background: transparent; } .block-category { min-height: 0; padding: 1.25rem 0; background: transparent; box-shadow: none; } .category-cover img { border-radius: 12px; } /* ---------------------------------------------------------------------- * 5. Focus zichtbaar houden * -------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 3px solid var(--iva-accent, #e2001a); outline-offset: 2px; }