/** * Social video's op de ervaring-detailpagina ("Onze mensen"). * Scope: .kivo-sv (sectie) en .kivo-sv-lb (lightbox, hangt aan ). */ .kivo-sv { --sv-red: #e30613; --sv-ink: #111; --sv-muted: #6b7280; --sv-card: 15.625rem; /* 250px */ --sv-gap: 1.5rem; } /* ===== Indeling: kop, knoppen en rij ===== Desktop: knoppen rechts naast de kop. Smal scherm: knoppen onder de rij, want naast die grote kop is er geen plek. De volgorde regelen we met grid, zodat de HTML gewoon leesbaar blijft. */ .kivo-sv__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head controls" "viewport viewport"; align-items: end; } .kivo-sv__head { grid-area: head; min-width: 0; } .kivo-sv__controls { grid-area: controls; display: flex; gap: 0.5rem; padding-bottom: 0.25rem; } .kivo-sv__viewport { grid-area: viewport; position: relative; margin-top: 2rem; } .kivo-sv .section-title { margin-bottom: 0; } .kivo-sv__intro { max-width: 44rem; margin: 0.75rem 0 0; } .kivo-sv__intro p { margin: 0; color: var(--sv-muted); } /* ===== Rij met kaarten ===== */ .kivo-sv__list { display: flex; gap: var(--sv-gap); list-style: none; margin: 0; padding: 0.25rem 0 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #d6dbe1 transparent; } .kivo-sv__list::-webkit-scrollbar { height: 6px; } .kivo-sv__list::-webkit-scrollbar-track { background: transparent; } .kivo-sv__list::-webkit-scrollbar-thumb { background: #d6dbe1; border-radius: 999px; } .kivo-sv__item { flex: 0 0 auto; width: var(--sv-card); scroll-snap-align: start; margin: 0; padding: 0; list-style: none; } .kivo-sv__item::before, .kivo-sv__item::marker { content: none; } /* ===== Kaart ===== */ .kivo-sv__card { display: block; text-decoration: none; color: inherit; outline-offset: 4px; } .kivo-sv__media { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 1rem; overflow: hidden; background: #0f1115; box-shadow: 0 0.5rem 1.5rem rgba(15, 17, 21, 0.18); transition: box-shadow 0.3s ease, transform 0.3s ease; } .kivo-sv__card:focus-visible .kivo-sv__media { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(15, 17, 21, 0.26); } .kivo-sv__thumb { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .kivo-sv__thumb--empty { background: linear-gradient(145deg, #2b2f36 0%, #14161a 100%); } /* Donkere verloopjes: houden badge en play-knop leesbaar op elke foto. */ .kivo-sv__media::before { content: ""; position: absolute; inset: 0 0 auto; height: 40%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%); pointer-events: none; } .kivo-sv__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 3.5rem; height: 3.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sv-red); color: #fff; box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.35); transition: transform 0.3s ease, background-color 0.3s ease; } .kivo-sv__play svg { margin-left: 0.15rem; } .kivo-sv__card:focus-visible .kivo-sv__play { transform: translate(-50%, -50%) scale(1.12); } .kivo-sv__badge { position: absolute; top: 0.75rem; left: 0.75rem; width: 1.875rem; height: 1.875rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #111; } .kivo-sv__caption { display: block; margin-top: 0.875rem; } .kivo-sv__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1rem; line-height: 1.35; font-weight: 600; color: var(--sv-ink); } .kivo-sv__meta { display: block; margin-top: 0.25rem; font-size: 0.8125rem; color: var(--sv-muted); /* Eén regel houdt alle kaarten even hoog. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===== Pijlen (alleen zichtbaar als de rij doorloopt) ===== */ .kivo-sv__nav { width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; border: 1px solid #dbe1e7; border-radius: 50%; background: #fff; color: var(--sv-ink); cursor: pointer; padding: 0; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; } .kivo-sv__nav[hidden] { display: none; } .kivo-sv__nav[disabled] { opacity: 0.35; pointer-events: none; } /* ===== Lightbox ===== */ .kivo-sv-lb { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(8, 9, 12, 0.86); opacity: 0; visibility: hidden; /* Bij sluiten pas ná de fade verbergen, bij openen meteen zichtbaar — anders is de sluitknop nog niet focusbaar op het moment dat we hem de focus willen geven. */ transition: opacity 0.25s ease, visibility 0s linear 0.25s; } .kivo-sv-lb.is-open { opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0s linear 0s; } /* --sv-lb-marge = alles wat naast de video zelf verticaal ruimte kost: de padding van de overlay (2×1,5rem), het bijschrift van twee regels (±3,3rem) en wat lucht. Op mobiel komt de sluitknop er nog boven. De breedte volgt daarom uit de vensterhoogte: zo past de modal altijd volledig in beeld. */ .kivo-sv-lb { --sv-lb-marge: 7.5rem; } .kivo-sv-lb__dialog { position: relative; width: min(32rem, 92vw, calc((100vh - var(--sv-lb-marge)) * 9 / 16)); transform: translateY(12px) scale(0.98); transition: transform 0.25s ease; } .kivo-sv-lb.is-open .kivo-sv-lb__dialog { transform: none; } .kivo-sv-lb__dialog[data-provider="tiktok"] { width: min(30rem, 92vw, calc((100vh - var(--sv-lb-marge)) * 325 / 575)); } .kivo-sv-lb__dialog[data-provider="instagram"] { width: min(34rem, 94vw, calc((100vh - var(--sv-lb-marge)) * 400 / 660)); } /* Kleine viewport-eenheid waar beschikbaar: op mobiel telt de adresbalk anders mee, en zou de modal alsnog onder de onderrand kunnen vallen. */ @supports (height: 100svh) { .kivo-sv-lb__dialog { width: min(32rem, 92vw, calc((100svh - var(--sv-lb-marge)) * 9 / 16)); } .kivo-sv-lb__dialog[data-provider="tiktok"] { width: min(30rem, 92vw, calc((100svh - var(--sv-lb-marge)) * 325 / 575)); } .kivo-sv-lb__dialog[data-provider="instagram"] { width: min(34rem, 94vw, calc((100svh - var(--sv-lb-marge)) * 400 / 660)); } } .kivo-sv-lb__frame { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 1rem; overflow: hidden; background: #000; } .kivo-sv-lb__dialog[data-provider="tiktok"] .kivo-sv-lb__frame { aspect-ratio: 325 / 575; } /* TikTok rendert zijn speler altijd op 325px breed, hoe groot de iframe ook is — een bredere iframe levert dus alleen witte randen op. Daarom geven we de iframe die vaste maat en schalen we hem op naar de modalbreedte; de schaalfactor zet social-video.js. */ .kivo-sv-lb__dialog[data-provider="tiktok"] .kivo-sv-lb__frame iframe { inset: auto; left: 50%; top: 50%; width: 325px; height: 575px; transform: translate(-50%, -50%) scale(var(--sv-tt-schaal, 1)); transform-origin: center; } .kivo-sv-lb__dialog[data-provider="instagram"] .kivo-sv-lb__frame { aspect-ratio: 400 / 660; background: #fff; } .kivo-sv-lb__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .kivo-sv-lb__spinner { position: absolute; left: 50%; top: 50%; width: 2.25rem; height: 2.25rem; margin: -1.125rem 0 0 -1.125rem; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; border-radius: 50%; animation: kivo-sv-spin 0.9s linear infinite; } @keyframes kivo-sv-spin { to { transform: rotate(360deg); } } /* Desktop: sluitknop naast de video, zodat de volle vensterhoogte voor de video zelf overblijft. */ .kivo-sv-lb__close { position: absolute; top: 0; right: -3.5rem; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; transition: background-color 0.2s ease; } /* Twee vaste regels: titel (afgekapt) + link. Zie de opmerking bij --sv-lb-marge: de hoogte hiervan is ingerekend in de modalbreedte. */ .kivo-sv-lb__caption { margin: 0.75rem 0 0; color: rgba(255, 255, 255, 0.85); font-size: 0.875rem; line-height: 1.35; text-align: center; } .kivo-sv-lb__caption-titel { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kivo-sv-lb__caption a { display: inline-block; color: #fff; text-decoration: underline; } body.kivo-sv-locked { overflow: hidden !important; } /* ===== Hover-effecten ===== Alleen op apparaten met een echte muisaanwijzer: op touch blijft :hover na een tik "plakken", waardoor een aangetikte knop rood zou blijven staan. */ @media (hover: hover) and (pointer: fine) { .kivo-sv__card:hover .kivo-sv__media { transform: translateY(-4px); box-shadow: 0 1rem 2rem rgba(15, 17, 21, 0.26); } .kivo-sv__card:hover .kivo-sv__thumb { transform: scale(1.06); } .kivo-sv__card:hover .kivo-sv__play { transform: translate(-50%, -50%) scale(1.12); } .kivo-sv__card:hover .kivo-sv__title { color: var(--sv-red); } .kivo-sv__nav:hover { background: var(--sv-red); border-color: var(--sv-red); color: #fff; } .kivo-sv-lb__close:hover { background: var(--sv-red, #e30613); } } /* ===== Responsive ===== */ @media (max-width: 1023px) { .kivo-sv { --sv-card: 13.75rem; } } @media (max-width: 767px) { .kivo-sv { --sv-card: min(48vw, 12rem); --sv-gap: 0.875rem; } /* Kop over de volle breedte, knoppen onder de rij. */ .kivo-sv__body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "viewport" "controls"; } /* Links uitlijnen: rechtsonder zweeft de WhatsApp-knop, daar zouden de pijlen achter verdwijnen. */ .kivo-sv__controls { justify-self: start; padding-bottom: 0; margin-top: 0.25rem; } .kivo-sv__title { font-size: 0.9375rem; } .kivo-sv__meta { font-size: 0.75rem; } .kivo-sv__viewport { margin-top: 1.5rem; } /* Rij mag tot de schermrand doorlopen, maar begint netjes in de kolom. scroll-padding is nodig, anders snapt de browser de padding weg. */ .kivo-sv__list { margin: 0 -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; scroll-padding-left: 1.5rem; } /* Mobiel is er geen ruimte naast de video: sluitknop weer erboven, en dus meer verticale marge inrekenen. */ .kivo-sv-lb { padding: 1rem; --sv-lb-marge: 10.5rem; } .kivo-sv-lb__close { top: -2.75rem; right: 0; } } @media (prefers-reduced-motion: reduce) { .kivo-sv__list { scroll-behavior: auto; } .kivo-sv__media, .kivo-sv__thumb, .kivo-sv__play, .kivo-sv-lb, .kivo-sv-lb__dialog { transition: none !important; } .kivo-sv__card:hover .kivo-sv__thumb, .kivo-sv__card:hover .kivo-sv__media { transform: none; } }