/** * 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: compact op één desktoprij, met omslaan als vangnet * -------------------------------------------------------------------- */ .iva-nav { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(0, 0, 0, .1); background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .03); } .iva-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 48px; } /* Zoekveld, account en winkelwagen worden door iva.js hierheen verplaatst; Classic zet ze van zichzelf naast het logo en in de bovenbalk, in andere takken van de DOM. */ .iva-nav__search { flex: 0 1 190px; min-width: 150px; margin: 0; } .iva-nav__tools { display: flex; align-items: center; gap: .25rem; flex: 0 0 auto; } /* Klein en licht. Twee gevulde knoppen naast een rode banner en een rode hoofdknop maakten de balk zwaar; hier volstaat een pictogram met een woord erachter. Het aantal in het mandje is het enige dat kleur krijgt. */ .iva-nav__tools .user-info a, .iva-nav__tools .blockcart { display: flex; align-items: center; gap: .3rem; padding: .25rem .35rem; border-radius: 6px; background: none; background-image: none; border: 0; box-shadow: none; color: inherit; font-weight: 500; font-size: .78rem; white-space: nowrap; text-decoration: none; } .iva-nav__tools .user-info a:hover, .iva-nav__tools .blockcart:hover, .iva-nav__tools .blockcart:focus-within { background: rgba(0, 0, 0, .04); color: inherit; } .iva-nav__tools .blockcart { position: relative; } .iva-nav__tools .cart-products-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding-inline: .22rem; border-radius: 999px; background: var(--iva-accent, #e2001a); color: var(--iva-accent-ink, #fff); font-size: .62rem; font-weight: 700; line-height: 1; } /* Account en winkelwagen blijven volledig toegankelijk, maar tonen in deze vaste 1180px-kolom alleen hun vertrouwde pictogram. De tekst nam op een brede monitor nog steeds de ruimte in die de laatste twee menu-items nodig hebben en veroorzaakte daardoor een vrijwel lege tweede rij. */ .iva-nav__tools .user-info a span, .iva-nav__tools .blockcart .header > span:not(.cart-products-count) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .iva-nav__tools .blockcart a, .iva-nav__tools .blockcart .header { display: flex; align-items: center; gap: .4rem; background: transparent; background-image: none; border: 0; box-shadow: none; color: inherit; text-decoration: none; } .iva-nav__tools .material-icons { font-size: 17px; opacity: .75; } .iva-nav__search form { position: relative; } @media (max-width: 767px) { .iva-nav { position: static; } .iva-nav__inner { flex-wrap: wrap; padding-block: .5rem; } .iva-nav__search { order: 3; flex: 1 1 100%; } .iva-nav__tools { order: 2; margin-inline-start: auto; } } .iva-nav__list { display: flex; flex: 1 1 auto; min-width: 0; gap: 0; margin: 0; padding: 0; list-style: none; /* Bij veel items blijft elk menu-item zichtbaar en breekt de balk om. */ flex-wrap: wrap; } .iva-nav__link { display: flex; align-items: center; min-height: 48px; padding: 0 .5rem; border-bottom: 3px solid transparent; color: inherit; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; text-decoration: none; transition: color .12s ease, border-color .12s ease; } .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; } } /* Een vaste verticale maat door de hele kolom. Zonder dit staat elk blok op zijn eigen afstand en leest het als losse mededelingen. */ .iva-hero__body > * + * { margin-top: 1.25rem; } .iva-hero__title { margin: 0 0 .75rem; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); line-height: 1.1; letter-spacing: -.02em; } /* Een streep voor de kop, in de accentkleur: geeft de kolom een linkerlijn waar de rest zich aan uitlijnt. */ .iva-hero--dark .iva-hero__title { padding-inline-start: 1rem; border-inline-start: 4px solid var(--iva-accent, #e2001a); } .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; } .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 { display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; } .iva-hero__card:hover, .iva-hero__card:focus-visible { border-color: rgba(255, 255, 255, .3); transform: translateY(-2px); } /* De foto in een eigen vak, met de prijsbalk daaronder in plaats van eroverheen. Een balk die over de foto valt, valt bij een lage kaart ook over de wielen - en werd bij de vorige versie zelfs afgesneden. */ /* Het kader houdt zijn maat; de scooter wordt daarbinnen kleiner. Eerder werd het kader zelf kleiner, en dan blijft de scooter net zo groot in beeld. */ .iva-hero__frame { display: flex; align-items: center; justify-content: center; height: 300px; margin: 1rem; border-radius: 12px; background: #fff; } .iva-hero__photo { display: block; width: auto; max-width: 78%; max-height: 78%; object-fit: contain; transition: opacity .14s ease-out; } @media (max-width: 899px) { .iva-hero__frame { height: 240px; } } .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 { display: grid; grid-template-columns: 1fr auto; gap: .15rem .75rem; align-items: baseline; margin-top: auto; padding: .9rem 1.25rem 1rem; border-top: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .35); 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 { grid-column: 1 / -1; 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-payblock { padding-top: 1.25rem; border-top: 1px solid rgba(128, 128, 128, .25); } .iva-pay { display: flex; flex-direction: column; gap: .45rem; font-size: .9rem; } .iva-payblock > * + * { margin-top: .6rem; } .iva-pay__row { display: flex; align-items: center; gap: .6rem; } /* Vaste breedte voor het merkje, zodat alle zinnen op dezelfde lijn beginnen. Zonder dit verspringt elke regel met de lengte van de merknaam mee. */ .iva-pay__brand { flex: 0 0 auto; min-width: 84px; text-align: center; } .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: 2.4rem; background: linear-gradient(180deg, #f6f7f8 0%, #eef1f3 100%); } .iva-cta__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid #dfe3e6; border-top: 3px solid var(--iva-accent, #e2001a); border-radius: 16px; background: radial-gradient(circle at 100% 0%, rgba(226, 0, 26, .07), transparent 34%), #fff; box-shadow: 0 14px 34px rgba(24, 29, 34, .08); } .iva-cta__body { min-width: 0; } .iva-cta__eyebrow { display: block; margin-bottom: .35rem; color: var(--iva-accent, #e2001a); font-size: .72rem; font-weight: 800; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; } .iva-cta__title { margin: 0 0 .55rem; color: #17191d; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.15; } .iva-cta__text { max-width: 72ch; margin: 0; color: #525a63; font-size: .95rem; line-height: 1.55; opacity: 1; } .iva-cta__benefits { display: flex; flex-wrap: wrap; gap: .45rem .9rem; margin: 1rem 0 0; padding: 0; list-style: none; } .iva-cta__benefits li { position: relative; padding-left: 1.15rem; color: #343a40; font-size: .82rem; font-weight: 650; } .iva-cta__benefits li::before { content: "\2713"; position: absolute; left: 0; color: var(--iva-accent, #e2001a); font-weight: 900; } .iva-cta__actions { display: flex; flex-direction: column; align-items: stretch; gap: .65rem; } .iva-cta__actions .btn { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: .65rem 1rem; border-radius: 7px; box-shadow: none; font-size: .85rem; font-weight: 750; } .iva-cta__actions .btn-primary { border: 1px solid #b90015; background: var(--iva-accent, #e2001a); background-image: none; color: #fff; text-decoration: none; } .iva-cta__actions .btn-primary:hover, .iva-cta__actions .btn-primary:focus-visible { border-color: #a30013; background: #c50017; color: #fff; } .iva-cta__secondary { border: 1px solid #cfd5da; background: #f7f8f9; background-image: none; color: #252a30; text-decoration: none; } .iva-cta__secondary:hover, .iva-cta__secondary:focus-visible { border-color: var(--iva-accent, #e2001a); background: #fff3f4; color: #17191d; } .iva-cta__phone { padding-top: .15rem; font-size: .92rem; font-weight: 700; text-align: center; text-decoration: none; color: var(--iva-accent, #e2001a); } @media (max-width: 767.98px) { .iva-cta { padding-block: 1.5rem; } .iva-cta__inner { width: auto; grid-template-columns: 1fr; gap: 1.25rem; margin-inline: 1rem; padding-inline: 1.15rem; } } @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. * -------------------------------------------------------------------- */ .iva-hero--dark { position: relative; overflow: hidden; border-radius: 20px; /* Niet vlak zwart: een lichte verloop naar de rechterbovenhoek geeft de band diepte, zodat hij als paneel leest en niet als een gat. */ background: radial-gradient(120% 100% at 85% 0%, #23262b 0%, rgba(35, 38, 43, 0) 60%), #0f0f0f; color: #fff; } /* Een dunne accentlijn bovenaan bindt de band aan de huisstijl. */ .iva-hero--dark::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--iva-accent, #e2001a); } .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); } /* Op bijna-zwart verdwijnt alles wat op doorzichtigheid drijft. Hier daarom vaste, lichte kleuren in plaats van opacity: dat was de reden dat het betaalblok wegviel tegen de achtergrond. */ .iva-hero--dark .iva-payblock { border-top-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .92); } .iva-hero--dark .iva-methods__label { color: rgba(255, 255, 255, .55); opacity: 1; } .iva-hero--dark .iva-pay__brand { border-color: rgba(255, 255, 255, .35); color: #fff; background: rgba(255, 255, 255, .06); opacity: 1; } .iva-hero--dark .iva-pay__note { color: rgba(255, 255, 255, .55); opacity: 1; } .iva-hero--dark .iva-trust__item { color: rgba(255, 255, 255, .92); } .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.5rem; margin: 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__label { margin: 0; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; opacity: .6; } /* ---------------------------------------------------------------------- * 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); } /* ---------------------------------------------------------------------- * Kaartjes naast het logo * * Postzegelformaat, voor accessoires, onderdelen of een lopende aanbieding. * Contactgegevens horen hier niet: die staan in de informatiebalk erboven. * -------------------------------------------------------------------- */ .iva-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; padding-block: .25rem; } .iva-mini { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease; } a.iva-mini:hover, a.iva-mini:focus-visible { border-color: var(--iva-accent, #e2001a); color: inherit; transform: translateY(-1px); } .iva-mini__media { flex: 0 0 auto; width: 40px; height: 40px; overflow: hidden; border-radius: 8px; background: #f4f6f8; } .iva-mini__media img { width: 100%; height: 100%; object-fit: contain; } .iva-mini__icon { display: inline-flex; width: 36px; height: 36px; flex: 0 0 36px; align-items: center; justify-content: center; border-radius: 9px; background: #f2f4f6; color: var(--iva-accent, #e2001a); font-size: 1.15rem; line-height: 1; } .iva-mini__body { display: flex; min-width: 0; flex-direction: column; } .iva-mini__title { font-size: .88rem; font-weight: 700; line-height: 1.25; } .iva-mini__text { font-size: .78rem; line-height: 1.3; opacity: .65; } /* ---------------------------------------------------------------------- * Menubalk: meer karakter * * Kale links in een witte balk lezen als een lijstje. Kleinkapitalen met wat * letterafstand, scheidingslijntjes en een duidelijke actieve staat maken er * een navigatie van. * -------------------------------------------------------------------- */ .iva-nav__item + .iva-nav__item { border-inline-start: 1px solid rgba(0, 0, 0, .08); } .iva-nav__link { position: relative; font-size: .78rem; text-transform: uppercase; letter-spacing: .035em; } /* De onderstreping groeit vanuit het midden; een harde rand die aan- en uitspringt oogt schokkerig. */ .iva-nav__link::after { content: ""; position: absolute; inset-inline: .5rem; bottom: 0; height: 3px; background: var(--iva-accent, #e2001a); transform: scaleX(0); transition: transform .15s ease-out; } .iva-nav__link:hover::after, .iva-nav__link:focus-visible::after { transform: scaleX(1); } .iva-nav__link:hover, .iva-nav__link:focus-visible { border-bottom-color: transparent; background: rgba(0, 0, 0, .02); } /* Termijnbedragen naast de prijs, berekend op het model dat in beeld staat. JavaScript vult ze; een aanbieder zonder voorwaarden komt er niet in. */ .iva-hero__terms { display: flex; flex-wrap: wrap; gap: .3rem; grid-column: 1 / -1; grid-row: 2; margin-top: .35rem; } .iva-hero__terms:empty { display: none; } .iva-hero__term { padding: .15rem .5rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 4px; background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .9); font-size: .72rem; font-weight: 600; white-space: nowrap; } .iva-hero__go { grid-column: 1 / -1; grid-row: 3; margin-top: .3rem; } /* ---------------------------------------------------------------------- * IVA Parts Hub * -------------------------------------------------------------------- */ .iva-partshub { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; margin: 0 0 2rem; padding: 1.25rem 1.4rem; border: 1px solid rgba(0, 0, 0, .1); border-inline-start: 4px solid var(--iva-accent, #e2001a); border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .06); } .iva-partshub__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #f1f2f4; color: var(--iva-accent, #e2001a); } .iva-partshub__icon svg { width: 27px; height: 27px; } .iva-partshub__kicker { display: block; margin-bottom: .2rem; color: var(--iva-accent, #e2001a); font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } .iva-partshub h2 { margin: 0; font-size: clamp(1.2rem, 2vw, 1.55rem); } .iva-partshub p { max-width: 720px; margin: .35rem 0 0; color: rgba(0, 0, 0, .64); line-height: 1.5; } .iva-partshub__button { white-space: nowrap; } @media (max-width: 767px) { .iva-partshub { grid-template-columns: auto minmax(0, 1fr); padding: 1rem; } .iva-partshub__button { grid-column: 1 / -1; width: 100%; text-align: center; } } /* ---------------------------------------------------------------------- * Shopgebonden categorieboom in de hoofdnavigatie * -------------------------------------------------------------------- */ .iva-nav__inner { position: relative; } .iva-nav__item--has-children { display: flex; align-items: stretch; } .iva-nav__item--has-children > .iva-nav__link { padding-inline-end: .25rem; } .iva-nav__toggle { display: grid; flex: 0 0 22px; width: 22px; min-height: 44px; padding: 0 .3rem 0 0; place-items: center; border: 0; background: transparent; background-image: none; box-shadow: none; color: #6b7280; cursor: pointer; } .iva-nav__toggle svg { width: 10px; height: 7px; overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; transition: transform .15s ease-out; } .iva-nav__toggle:hover, .iva-nav__toggle:focus-visible { color: var(--iva-accent, #e2001a); } .iva-nav__toggle:focus-visible { outline: 2px solid var(--iva-accent, #e2001a); outline-offset: -3px; } .iva-nav__link--parent-toggle { appearance: none; gap: .28rem; border-inline: 0; border-top: 0; background: transparent; background-image: none; box-shadow: none; color: inherit; font-family: inherit; cursor: pointer; } .iva-nav__link--parent-toggle svg { width: 8px; height: 6px; overflow: visible; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; transition: transform .15s ease-out; } .iva-nav__link--static { cursor: default; } .iva-nav__link--static::after { display: none; } .iva-nav__item--has-children.is-open > .iva-nav__link--parent-toggle svg { transform: rotate(180deg); } /* Op een volledige desktoprij hebben alle items dezelfde rustige tussenmaat. De chevron blijft een losse, toegankelijke knop, maar neemt niet langer een opvallende 22px-kolom in. Op smallere schermen behouden we de ruimere bediening en flex-wrap als veilige terugval. */ @media (min-width: 1200px) { .iva-nav__inner { gap: .35rem; } .iva-nav__list { align-items: stretch; column-gap: .05rem; } .iva-nav__item, .iva-nav__item--has-children { display: flex; align-items: stretch; flex: 0 1 auto; border-inline-start: 0; } .iva-nav__item + .iva-nav__item { border-inline-start: 0; } .iva-nav__link { justify-content: center; padding-inline: .18rem; font-size: .68rem; letter-spacing: .01em; } .iva-nav__item--has-children > .iva-nav__link { padding-inline-end: .05rem; } .iva-nav__item--has-children > .iva-nav__link--parent-toggle { padding-inline-end: .25rem; } .iva-nav__toggle { flex-basis: 15px; width: 15px; padding: 0 .1rem 0 0; } .iva-nav__toggle svg { width: 8px; height: 6px; } .iva-nav__search { flex-basis: 145px; min-width: 105px; } .iva-nav__tools { gap: 0; } .iva-nav__tools .user-info a, .iva-nav__tools .blockcart { padding-inline: .15rem; } } /* * Laptop- en tabletbreedtes krijgen een bewust opgebouwde navigatie. * * Rond 1024px paste de oude desktopmaat op een paar pixels na niet: alleen * `Onderdelenzoeker` en de werkplaatsingang sprongen naar een tweede regel, * terwijl zoeken en winkelwagen verticaal tussen beide regels bleven staan. * De menutekst en tussenruimte zijn hier daarom iets compacter. Vanaf 768px * probeert de balk één rustige lijn te vormen; flex-wrap blijft beschikbaar * als veilige terugval wanneer een uitzonderlijk lange shoptekst dat vraagt. */ @media (min-width: 960px) and (max-width: 1199px) { .iva-nav__inner { gap: .3rem; } .iva-nav__list { align-items: stretch; column-gap: .05rem; } .iva-nav__link { padding-inline: .18rem; font-size: .66rem; letter-spacing: .005em; } .iva-nav__item--has-children > .iva-nav__link { padding-inline-end: .05rem; } .iva-nav__item--has-children > .iva-nav__link--parent-toggle { padding-inline-end: .2rem; } .iva-nav__toggle { flex-basis: 16px; width: 16px; padding-inline-end: .15rem; } .iva-nav__search { flex-basis: 120px; min-width: 95px; } .iva-nav__tools { gap: .1rem; } .iva-nav__tools .user-info a, .iva-nav__tools .blockcart { padding-inline: .1rem; } } @media (min-width: 768px) and (max-width: 959px) { .iva-nav__inner { display: flex; gap: .15rem; padding-block: 0; } .iva-nav__list { justify-content: flex-start; width: auto; flex-wrap: wrap; } .iva-nav__link { padding-inline: .15rem; font-size: .62rem; letter-spacing: 0; } .iva-nav__item--has-children > .iva-nav__link { padding-inline-end: .05rem; } .iva-nav__toggle { flex-basis: 13px; width: 13px; padding-inline-end: .08rem; } .iva-nav__search { flex: 0 1 92px; width: 92px; min-width: 76px; } .iva-nav__tools { gap: 0; } .iva-nav__tools .user-info a, .iva-nav__tools .blockcart { padding-inline: .1rem; } } .iva-nav__item--has-children.is-open > .iva-nav__toggle svg { transform: rotate(180deg); } .iva-nav__dropdown { position: absolute; z-index: 45; top: 100%; right: 1rem; left: 1rem; max-height: min(68vh, 520px); overflow: auto; padding: 1rem; border: 1px solid rgba(0, 0, 0, .12); border-top: 3px solid var(--iva-accent, #e2001a); border-radius: 0 0 12px 12px; background: #fff; box-shadow: 0 18px 42px rgba(0, 0, 0, .14); opacity: 0; pointer-events: none; transform: translateY(5px); visibility: hidden; transition: opacity .14s ease-out, transform .14s ease-out, visibility .14s; } .iva-nav__item--has-children:not(.is-closed):hover > .iva-nav__dropdown, .iva-nav__item--has-children.is-open > .iva-nav__dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; } .iva-nav__dropdown-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 1rem 1.25rem; } .iva-nav__branch { min-width: 0; padding: .25rem; } .iva-nav__branch--quick { align-self: start; padding: .65rem; border: 1px solid #e2e5e8; border-radius: 8px; background: #f7f8f9; } .iva-nav__branch--quick .iva-nav__branch-list { grid-template-columns: 1fr; gap: .1rem; } .iva-nav__branch-heading { display: flex; align-items: center; gap: .25rem; margin-bottom: .65rem; padding-bottom: .45rem; border-bottom: 1px solid rgba(0, 0, 0, .1); } .iva-nav__branch-title { display: block; flex: 1 1 auto; min-width: 0; color: #17191c; font-size: .86rem; font-weight: 800; letter-spacing: .035em; text-decoration: none; text-transform: uppercase; } .iva-nav__branch-heading > a.iva-nav__branch-title:hover, .iva-nav__branch-heading > a.iva-nav__branch-title:focus-visible, .iva-nav__sub-row > a.iva-nav__sub-link:hover, .iva-nav__sub-row > a.iva-nav__sub-link:focus-visible, .iva-nav__all-link:hover, .iva-nav__all-link:focus-visible, .iva-nav__nested-list a:hover, .iva-nav__nested-list a:focus-visible { color: var(--iva-accent, #e2001a); } .iva-nav__branch-toggle, .iva-nav__nested-toggle { border: 0; background: transparent; background-image: none; box-shadow: none; color: #69707a; cursor: pointer; } .iva-nav__branch-toggle { display: none; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; } .iva-nav__nested-toggle { display: grid; flex: 0 0 28px; width: 28px; height: 28px; margin-inline-end: .1rem; place-items: center; } .iva-nav__branch-toggle:hover, .iva-nav__branch-toggle:focus-visible, .iva-nav__nested-toggle:hover, .iva-nav__nested-toggle:focus-visible { color: var(--iva-accent, #e2001a); } .iva-nav__branch-toggle:focus-visible, .iva-nav__nested-toggle:focus-visible { outline: 2px solid var(--iva-accent, #e2001a); outline-offset: -2px; border-radius: 5px; } .iva-nav__branch-toggle svg, .iva-nav__nested-toggle svg { width: 10px; height: 7px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; transition: transform .15s ease-out; } .iva-nav__branch.is-expanded > .iva-nav__branch-heading .iva-nav__branch-toggle svg, .iva-nav__sub-item--has-children.is-expanded > .iva-nav__sub-row .iva-nav__nested-toggle svg { transform: rotate(180deg); } .iva-nav__branch-list, .iva-nav__nested-list { margin: 0; padding: 0; list-style: none; } .iva-nav__branch-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: .15rem .75rem; } .iva-nav__sub-item { min-width: 0; } .iva-nav__sub-row { display: flex; align-items: center; min-width: 0; } .iva-nav__sub-link { display: block; flex: 1 1 auto; min-width: 0; padding: .38rem .45rem; border-radius: 6px; color: #2f3338; font-size: .8rem; font-weight: 650; line-height: 1.25; text-decoration: none; } .iva-nav__sub-row > a.iva-nav__sub-link:hover, .iva-nav__sub-row > a.iva-nav__sub-link:focus-visible { background: rgba(0, 0, 0, .035); } .iva-nav__sub-link--parent { color: #454a50; } .iva-nav__nested-list { display: none; padding: 0 .45rem .35rem; } .iva-nav__sub-item--has-children.is-expanded > .iva-nav__nested-list { display: block; } .iva-nav__nested-list a { display: block; padding: .2rem 0 .2rem .65rem; border-inline-start: 1px solid rgba(0, 0, 0, .14); color: #626870; font-size: .74rem; line-height: 1.25; text-decoration: none; } .iva-nav__all-link { display: inline-flex; align-items: center; gap: .3rem; margin-top: .65rem; padding: .45rem .6rem; border: 1px solid transparent; border-radius: 6px; background: #f2f3f5; background-image: none; color: #30343a; cursor: pointer; font-family: inherit; font-size: .78rem; font-weight: 750; line-height: 1.2; text-decoration: none; } .iva-nav__all-link:hover, .iva-nav__all-link:focus-visible { background: #e9ebee; } .iva-nav__all-link span { color: #737982; font-weight: 650; } .iva-nav__all-link .iva-nav__all-link-label { color: inherit; font-weight: 750; } .iva-nav__sub-item--extra { display: none; } .iva-nav__branch.is-showing-all .iva-nav__sub-item--extra { display: block; } /* Het onderdelenmenu blijft volledig beschikbaar, maar hoeft geen groot wit paneel over de pagina te leggen. Op desktop krijgt de soortenlijst drie compacte kolommen en worden alleen binnen het dropdownpaneel de verticale tussenruimtes verkleind. */ @media (min-width: 900px) { .iva-nav__dropdown { padding: .65rem .75rem; } .iva-nav__dropdown-inner { grid-template-columns: .72fr .98fr 1.55fr; gap: .6rem .75rem; } .iva-nav__branch { padding: .15rem; } .iva-nav__branch--quick { padding: .45rem; } .iva-nav__branch-heading { margin-bottom: .35rem; padding-bottom: .3rem; } .iva-nav__branch:last-child .iva-nav__branch-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .05rem .35rem; } .iva-nav__sub-link { padding: .27rem .32rem; font-size: .74rem; line-height: 1.18; } .iva-nav__all-link { margin-top: .4rem; padding: .35rem .5rem; } } @media (max-width: 767px) { .iva-nav__item--has-children { flex-wrap: wrap; } .iva-nav__item--has-children.is-open { flex: 1 1 100%; } .iva-nav__dropdown { position: static; display: none; flex: 1 1 100%; width: 100%; max-height: 62vh; margin: 0 0 .5rem; padding: .75rem; border-top-width: 2px; border-radius: 8px; box-shadow: 0 8px 22px rgba(0, 0, 0, .1); opacity: 1; pointer-events: auto; transform: none; visibility: visible; } .iva-nav__item--has-children.is-open > .iva-nav__dropdown { display: block; } .iva-nav__dropdown-inner { grid-template-columns: 1fr; gap: .35rem; } .iva-nav__branch { padding: 0; } .iva-nav__branch-heading { margin: 0; padding: .35rem .2rem; } .iva-nav__branch-toggle { display: grid; } .iva-nav__branch-content { display: none; padding: .35rem 0 .7rem; } .iva-nav__branch.is-expanded > .iva-nav__branch-content { display: block; } .iva-nav__branch-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 479px) { .iva-nav__branch-list { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .iva-nav__dropdown, .iva-nav__toggle svg, .iva-nav__branch-toggle svg, .iva-nav__nested-toggle svg { transition: none; } } /* ---------------------------------------------------------------------- * Productgebonden dealer-CTA * * Compact naast de productinformatie: duidelijke vervolgstappen zonder een * tweede brede paginaband. Bewust geen goudtinten of opvallende pill-knoppen. * -------------------------------------------------------------------- */ .iva-product-cta { display: grid; gap: 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid #dfe2e6; border-top: 3px solid var(--iva-accent, #e2001a); border-radius: 10px; background: #fff; box-shadow: 0 8px 22px rgba(20, 22, 25, .06); color: #1d2024; } .iva-product-cta__eyebrow { margin: 0 0 .2rem; color: var(--iva-accent, #e2001a); font-size: .72rem; font-weight: 800; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; } .iva-product-cta__title { margin: 0; color: #17191d; font-size: 1.2rem; line-height: 1.25; } .iva-product-cta__text { margin: .35rem 0 0; color: #5a6068; font-size: .88rem; line-height: 1.45; } .iva-product-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-top: .8rem; } .iva-product-cta__actions .btn { min-height: 38px; padding: .55rem .8rem; border-radius: 6px; box-shadow: none; font-size: .82rem; line-height: 1.2; } .iva-product-cta__primary { border-color: var(--iva-accent, #e2001a); background: var(--iva-accent, #e2001a); background-image: none; color: #fff; } .iva-product-cta__whatsapp { border: 1px solid #1f8b4c; background: #fff; background-image: none; color: #176c3b; } .iva-product-cta__whatsapp:hover, .iva-product-cta__whatsapp:focus-visible { border-color: #176c3b; background: #eef8f2; color: #10572e; } .iva-product-cta__phone { color: #34383e; font-size: .86rem; font-weight: 750; text-decoration: none; } .iva-product-cta__pay { padding-top: .9rem; } .iva-product-cta__pay .iva-methods__label { margin: 0; color: #5a6068; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .iva-product-cta__pay .iva-pay { gap: .35rem; font-size: .8rem; } .iva-product-cta__pay .iva-pay__brand { min-width: 72px; padding: .12rem .35rem; background: #f5f6f7; color: #34383e; font-size: .68rem; } @media (min-width: 992px) { .iva-product-cta { grid-template-columns: minmax(0, 1fr) minmax(240px, .85fr); align-items: start; } .iva-product-cta__pay { padding-top: 0; padding-inline-start: 1rem; border-top: 0; border-inline-start: 1px solid rgba(128, 128, 128, .25); } } /* build58: override theme cover/crop, keeping the entire source image visible. */ body .iva-hero .iva-hero__frame {height:320px; overflow:hidden; padding:12px; box-sizing:border-box;} body .iva-hero .iva-hero__frame .iva-hero__photo {width:100% !important;height:100% !important;max-width:100% !important;max-height:100% !important;object-fit:contain !important;object-position:center !important;transform:none !important;border-radius:0;} body .iva-hero .iva-hero__badge {grid-column:1/-1;justify-self:start;background:#e60028;color:#fff;border-radius:5px;padding:3px 9px;font-size:12px;font-weight:700;} body .iva-hero .iva-hero__go {color:#fff;background:#e60028;justify-self:start;padding:8px 12px;border-radius:6px;margin-top:6px;} body .iva-hero .iva-hero__dots {flex-wrap:wrap;} body .iva-hero .iva-hero__dot {background:#fff;opacity:.55;} body .iva-hero .iva-hero__dot[aria-current="true"] {background:#e60028;opacity:1;} @media(max-width:599px){body .iva-hero .iva-hero__frame{height:260px;}body .iva-hero .iva-hero__overlay{grid-template-columns:1fr;}body .iva-hero .iva-hero__price{margin-inline-start:0;}} /* Keep the sale badge from displacing the native name/price grid row. */ body .iva-hero .iva-hero__overlay {grid-template-areas:"badge badge" "name price" "terms terms" "go go";} body .iva-hero .iva-hero__badge {grid-area:badge;} body .iva-hero .iva-hero__name {grid-area:name;} body .iva-hero .iva-hero__price {grid-area:price;} body .iva-hero .iva-hero__terms {grid-area:terms;} body .iva-hero .iva-hero__go {grid-area:go;} @media(max-width:599px){body .iva-hero .iva-hero__overlay{grid-template-areas:"badge" "name" "price" "terms" "go";}}