/** * IVA Dealer storefront * * Alles staat in een gecentreerde kolom van maximaal 1180px. De accentkleur * komt uit de module-instellingen en wordt door de module als --iva-accent * in de gezet; --bs-primary krijgt daar dezelfde waarde, dus de * knoppen van het thema kleuren automatisch mee. */ .iva-home__body, .iva-hero__inner, .iva-usp__inner, .iva-nav__inner, .iva-cta__inner { box-sizing: border-box; width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 1rem; } /* De kop en de voordelenstrook lopen van rand tot rand. Dat kan hier zonder de 100vw-truc met een negatieve marge: de module zet de container van de homepage zelf al op volle breedte, dus dit blok is gewoon 100% breed. Geen horizontale scrollbalk op mobiel, en position: sticky blijft werken. */ .iva-home { width: 100%; } /* ---------------------------------------------------------------------- * Navigatie: één rij, alleen eigen categorieën * -------------------------------------------------------------------- */ .iva-nav { border-block: 1px solid rgba(0, 0, 0, .08); background: #fff; } .iva-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .iva-nav__list { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; } .iva-nav__list::-webkit-scrollbar { display: none; } .iva-nav__link { display: block; padding: .85rem .9rem; border-bottom: 3px solid transparent; color: inherit; font-weight: 600; white-space: nowrap; text-decoration: none; } .iva-nav__link:hover, .iva-nav__link:focus-visible { border-bottom-color: var(--iva-accent, #e2001a); color: var(--iva-accent, #e2001a); } .iva-nav__phone { flex: none; font-weight: 700; white-space: nowrap; text-decoration: none; color: var(--iva-accent, #e2001a); } /* ---------------------------------------------------------------------- * Kop van de homepage * -------------------------------------------------------------------- */ .iva-hero__inner { display: grid; gap: 2rem; align-items: center; padding-block: 2.75rem; } @media (min-width: 900px) { .iva-hero__inner { /* De tekst draagt de boodschap, de foto ondersteunt. Gelijke kolommen lieten de foto het gesprek overnemen. */ grid-template-columns: 1fr .85fr; gap: 3rem; padding-block: 3.5rem; } } .iva-hero__title { margin: 0 0 .75rem; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); line-height: 1.1; } .iva-hero__text { max-width: 46ch; margin: 0; font-size: 1.05rem; opacity: .85; } .iva-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.5rem; } .iva-hero__cta { padding: .8rem 1.6rem; font-weight: 600; } .iva-hero__cta2 { padding: .8rem 1.6rem; border: 1px solid currentColor; border-radius: 8px; font-weight: 600; text-decoration: none; color: inherit; } .iva-hero__cta2:hover, .iva-hero__cta2:focus-visible { background: rgba(0, 0, 0, .06); color: inherit; } .iva-hero__media img { width: 100%; height: auto; border-radius: 12px; object-fit: cover; } /* ---------------------------------------------------------------------- * Roterende modelfoto * -------------------------------------------------------------------- */ /* Een witte plaat op een zwarte band trekt te veel aandacht en oogt goedkoop. Een subtiele lichte laag laat de scooter los staan en houdt de aandacht bij de tekst en de knop. */ .iva-hero__card { position: relative; display: block; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); text-decoration: none; color: inherit; } .iva-hero__photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: contain; padding: 1.25rem 1.25rem 3.5rem; box-sizing: border-box; transition: opacity .14s ease-out; } .iva-hero__photo.is-changing { opacity: 0; } /* De prijsbalk schuift op muisbediening omhoog. Op aanraakschermen bestaat hover niet, dus daar staat hij vast: anders zie je nooit een prijs. */ /* De prijs staat vast in beeld. Verstoppen achter hover kost verkoop: op een telefoon bestaat hover niet, en ook op een muis ziet de helft hem nooit. */ .iva-hero__overlay { position: absolute; inset-inline: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: .8rem 1.1rem; background: linear-gradient(180deg, rgba(15, 15, 15, 0), rgba(15, 15, 15, .92) 45%); color: #fff; font-size: .95rem; } .iva-hero__name { font-weight: 600; } .iva-hero__price { margin-inline-start: auto; font-size: 1.15rem; font-weight: 700; } .iva-hero__go { flex-basis: 100%; font-size: .82rem; font-weight: 600; color: var(--iva-accent, #e2001a); } .iva-hero__card:hover .iva-hero__go { text-decoration: underline; } .iva-hero__dots { display: flex; justify-content: center; gap: .45rem; margin-top: 1rem; } .iva-hero__dot { width: 28px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: currentColor; opacity: .25; cursor: pointer; transition: opacity .15s ease, background-color .15s ease; } .iva-hero__dot:hover { opacity: .55; } .iva-hero__dot[aria-current="true"] { opacity: 1; background: var(--iva-accent, #e2001a); } /* ---------------------------------------------------------------------- * Gespreid betalen * * De bedragen komen uit JavaScript en alleen als de shop echte tarieven * heeft ingesteld; zonder cijfers blijft de regel verborgen. * -------------------------------------------------------------------- */ .iva-pay { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.5rem; font-size: .9rem; } .iva-pay__row { display: inline-flex; align-items: center; gap: .5rem; } .iva-pay__brand { padding: .15rem .45rem; border: 1px solid currentColor; border-radius: 4px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; opacity: .9; } .iva-pay__note { margin: .6rem 0 0; font-size: .8rem; opacity: .7; } /* ---------------------------------------------------------------------- * Voordelenstrook onder de kop * -------------------------------------------------------------------- */ .iva-usp { border-bottom: 1px solid rgba(0, 0, 0, .08); background: #fff; } .iva-usp__inner { display: grid; gap: .75rem; padding-block: 1rem; } @media (min-width: 640px) { .iva-usp__inner { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .iva-usp__inner { grid-template-columns: repeat(4, 1fr); } } .iva-usp__item { display: flex; align-items: center; gap: .5rem; font-size: .92rem; } .iva-usp__item svg { flex: 0 0 auto; width: 18px; height: 18px; stroke: var(--iva-accent, #e2001a); } /* ---------------------------------------------------------------------- * Sprongnavigatie tussen de blokken * -------------------------------------------------------------------- */ .iva-jump { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; padding-block: .5rem 1.5rem; } .iva-jump__link { padding: .45rem 1rem; border: 1px solid rgba(0, 0, 0, .15); border-radius: 999px; font-size: .9rem; font-weight: 600; text-decoration: none; color: inherit; } .iva-jump__link:hover, .iva-jump__link:focus-visible, .iva-jump__link--active { border-color: var(--iva-accent, #e2001a); background: var(--iva-accent, #e2001a); color: var(--iva-accent-ink, #fff); } /* ---------------------------------------------------------------------- * Modelblok per categorie * -------------------------------------------------------------------- */ .iva-block { padding-block: 2rem; border-top: 1px solid rgba(0, 0, 0, .08); scroll-margin-top: 6rem; } .iva-block:first-of-type { border-top: 0; } .iva-block__header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: 1.25rem; } .iva-block__title { margin: 0; font-size: 1.4rem; } .iva-block__title a { color: inherit; text-decoration: none; } .iva-block__count { margin: 0; font-size: .9rem; opacity: .65; } .iva-block__more { margin-top: 1.5rem; text-align: center; } .iva-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } @media (min-width: 768px) { .iva-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; } } /* ---------------------------------------------------------------------- * Modelkaart * -------------------------------------------------------------------- */ .iva-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; background: #fff; transition: border-color .15s ease, transform .15s ease; } .iva-card:hover { border-color: var(--iva-accent, #e2001a); transform: translateY(-2px); } .iva-card__media { position: relative; display: block; aspect-ratio: 1 / 1; background: #f6f6f6; } .iva-card__image { width: 100%; height: 100%; object-fit: contain; } .iva-card__image--empty { display: block; } .iva-card__badge { position: absolute; top: .5rem; inset-inline-start: .5rem; padding: .15rem .5rem; border-radius: 4px; background: var(--iva-accent, #e2001a); color: var(--iva-accent-ink, #fff); font-size: .75rem; font-weight: 700; } .iva-card__body { display: flex; flex: 1; flex-direction: column; padding: .85rem; } .iva-card__title { margin: 0 0 .5rem; font-size: 1rem; line-height: 1.3; } .iva-card__title a { color: inherit; text-decoration: none; } .iva-card__specs { margin: 0 0 .75rem; font-size: .85rem; } .iva-card__spec { display: flex; justify-content: space-between; gap: .5rem; padding-block: .15rem; border-bottom: 1px dotted rgba(0, 0, 0, .12); } .iva-card__spec dt { font-weight: 400; opacity: .7; } .iva-card__spec dd { margin: 0; font-weight: 600; text-align: end; } .iva-card__footer { margin-top: auto; } .iva-card__price { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 700; } .iva-card__price-was { margin-inline-start: .4rem; font-size: .9rem; font-weight: 400; text-decoration: line-through; opacity: .6; } .iva-card__button { display: block; width: 100%; text-align: center; } /* ---------------------------------------------------------------------- * Dealerblok onderaan * -------------------------------------------------------------------- */ .iva-cta { margin-top: 2rem; padding-block: 2rem; background: #f6f6f6; } .iva-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; } .iva-cta__title { margin: 0 0 .25rem; font-size: 1.35rem; } .iva-cta__text { max-width: 60ch; margin: 0; opacity: .85; } .iva-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .iva-cta__phone { font-size: 1.1rem; font-weight: 700; text-decoration: none; color: var(--iva-accent, #e2001a); } @media (prefers-reduced-motion: reduce) { .iva-card { transition: none; } .iva-card:hover { transform: none; } } /* ---------------------------------------------------------------------- * Donkere variant * * Zwart met IVA-rood: de kop en het dealerblok worden een donkere band, * de rest van de pagina blijft licht zodat de modellen goed uitkomen. Aan * en uit te zetten met "Donkere kop- en voetbalk" in de module. * -------------------------------------------------------------------- */ /* De kop loopt van rand tot rand, dus geen afgeronde hoeken hier. */ .iva-hero--dark { background: #0f0f0f; color: #fff; } .iva-hero--dark .iva-hero__title, .iva-cta--dark .iva-cta__title { color: #fff; } .iva-hero--dark .iva-hero__text, .iva-cta--dark .iva-cta__text { color: rgba(255, 255, 255, .78); opacity: 1; } /* Op zwart moet de tweede knop een lichte rand houden, anders valt hij weg. */ .iva-hero--dark .iva-hero__cta2:hover, .iva-hero--dark .iva-hero__cta2:focus-visible { background: rgba(255, 255, 255, .12); } .iva-hero--dark .iva-pay { color: rgba(255, 255, 255, .88); } .iva-cta--dark { background: #0f0f0f; color: #fff; } .iva-cta--dark .iva-cta__phone { color: #fff; } /* ---------------------------------------------------------------------- * Vertrouwensregels en betaalmethoden in de kop * * De methoden staan er altijd: dat je gespreid kunt betalen is een feit en * hoeft niet te wachten op tarieven. Het maandbedrag is een berekening en * verschijnt pas als die tarieven ingevuld zijn. * -------------------------------------------------------------------- */ .iva-trust { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: .9rem; } .iva-trust__item { display: flex; align-items: center; gap: .4rem; } .iva-trust__item::before { content: "✓"; font-weight: 700; color: var(--iva-accent, #e2001a); } .iva-methods { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: 1.25rem 0 0; font-size: .85rem; } .iva-methods__label { opacity: .7; } .iva-methods__item { padding: .2rem .55rem; border: 1px solid currentColor; border-radius: 4px; font-weight: 700; letter-spacing: .01em; opacity: .85; } /* ---------------------------------------------------------------------- * Acties naast het logo * * Classic laat die strook leeg. Op een dealerpagina is dat de plek waar een * bezoeker contact legt, dus daar staan WhatsApp, telefoon en openingstijden. * -------------------------------------------------------------------- */ .iva-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem 1rem; padding-block: .5rem; font-size: .9rem; } .iva-actions__hours { opacity: .7; } .iva-actions__phone { font-weight: 700; text-decoration: none; color: inherit; white-space: nowrap; } .iva-actions__wa { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .45rem 1rem; border-radius: 999px; background: #25d366; color: #06331a; font-weight: 700; text-decoration: none; white-space: nowrap; } .iva-actions__wa:hover, .iva-actions__wa:focus-visible { background: #1eb455; color: #06331a; } /* ---------------------------------------------------------------------- * Actiebalk: aanbieding of bundel * -------------------------------------------------------------------- */ .iva-promo { background: var(--iva-accent, #e2001a); color: var(--iva-accent-ink, #fff); } .iva-promo__inner { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; width: 100%; max-width: 1180px; margin-inline: auto; padding: .6rem 1rem; font-weight: 600; } .iva-promo__button { min-height: 36px; padding: .35rem 1rem; border-radius: 999px; background: var(--iva-accent-ink, #fff); color: var(--iva-accent, #e2001a); font-weight: 700; text-decoration: none; white-space: nowrap; } .iva-promo__button:hover, .iva-promo__button:focus-visible { opacity: .9; color: var(--iva-accent, #e2001a); }