/** * Altermedia Cards Carousel — Frontend Styles v4.0 * Author: Marijn | altermedia.nl * * Fixes vs v3: * - Modal uses visibility+opacity (not display toggle) → CSS transitions work * - html.acc-html-locked for scroll lock (with scrollbar compensation) * - Cleaner specificity, fewer redundant !important * - Better container-level responsive */ /* ── Reset ──────────────────────────────────────────────────────────────────── */ .acc-widget *, .acc-widget *::before, .acc-widget *::after, .acc-fade-widget *, .acc-fade-widget *::before, .acc-fade-widget *::after, .acc-modal-overlay *, .acc-modal-overlay *::before, .acc-modal-overlay *::after { box-sizing: border-box; } /* ── Scroll lock (applied to ) ────────────────────────────────────────── */ /* BUG FIX: compensate for scrollbar width to prevent layout shift */ html.acc-html-locked { overflow: hidden; padding-right: var(--acc-scrollbar-w, 0px); } /* ───────────────────────────────────────────────────────────────────────────── BASE WIDGET ───────────────────────────────────────────────────────────────────────────── */ .acc-widget { --acc-gap: 16px; --acc-card-w: 300px; --acc-left-pad: 0px; --acc-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; width: 100%; overflow: visible; /* contain: layout verwijderd — dat maakte een nieuwe containing block voor position:fixed waardoor modals alleen over de widget zweefden i.p.v. het volledige viewport te bedekken. contain:style is veilig. */ contain: style; } /* ── Carousel wrapper ── */ .acc-carousel-wrapper { width: 100%; overflow: hidden; } .acc-widget.acc-extend-right .acc-carousel-wrapper { overflow: visible; } /* ── Track ── */ .acc-track { display: flex; flex-flow: row nowrap; overflow-x: auto !important; /* VEREIST voor scrollen — mag niet overschreven worden */ overflow-y: visible; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; gap: var(--acc-gap); padding-left: var(--acc-left-pad); padding-right: var(--acc-gap); padding-block: 8px 16px; outline: none; cursor: grab; will-change: scroll-position; -webkit-user-select: none; user-select: none; } .acc-track::-webkit-scrollbar { display: none; } .acc-track:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; } .acc-track.acc-dragging { cursor: grabbing; } /* Re-enable text selection when not dragging */ .acc-track:not(.acc-dragging) .acc-card { -webkit-user-select: auto; user-select: auto; } /* ───────────────────────────────────────────────────────────────────────────── CARD ───────────────────────────────────────────────────────────────────────────── */ .acc-card { flex: 0 0 var(--acc-card-w); width: var(--acc-card-w); min-height: 430px; border-radius: 20px; background-color: #ffffff; scroll-snap-align: start; scroll-snap-stop: normal; overflow: visible; position: relative; display: flex; flex-direction: column; cursor: default; will-change: transform; transition: transform 300ms var(--acc-ease), box-shadow 300ms var(--acc-ease); -webkit-user-select: none; user-select: auto; } .acc-card:hover { transform: scale(1.02); z-index: 2; } .acc-card-content { display: flex; flex-direction: column; height: 100%; min-height: inherit; padding: 24px; position: relative; z-index: 1; border-radius: inherit; overflow: hidden; } /* Content position */ .acc-pos-top { justify-content: flex-start; } .acc-pos-middle { justify-content: center; } .acc-pos-bottom { justify-content: flex-end; } .acc-content-block { width: 100%; } /* ── Typography ── */ .acc-category { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: #6e6e73; margin-bottom: 4px; } .acc-title { font-size: clamp(17px, 1.7vw, 24px); font-weight: 700; line-height: 1.25; color: #1d1d1f; margin: 0 0 10px; letter-spacing: -0.02em; text-wrap: balance; } .acc-intro { font-size: 13px; line-height: 1.55; color: #1d1d1f; margin: 0; } /* ── Media ── */ .acc-media { flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center; margin-top: 20px; overflow: hidden; min-height: 0; } .acc-media-img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; border-radius: 4px; max-height: 200px; } .acc-media-video { width: 100%; height: auto; max-height: 200px; object-fit: contain; display: block; border-radius: 4px; } .acc-media-iframe-wrap { position: relative; width: 100%; padding-top: 56.25%; } .acc-media-iframe-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 4px; border: none; } /* ───────────────────────────────────────────────────────────────────────────── TOGGLE BUTTON ───────────────────────────────────────────────────────────────────────────── */ .acc-widget .acc-toggle-btn { position: absolute; inset-block-end: 20px; inset-inline-end: 20px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; border: none; background-color: #1d1d1f; color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 10; pointer-events: all; will-change: transform; transition: background-color 200ms var(--acc-ease), transform 200ms var(--acc-ease); -webkit-appearance: none; appearance: none; } .acc-widget .acc-toggle-btn:hover { background-color: #424245; transform: scale(1.1) rotate(45deg); } .acc-widget .acc-toggle-btn.acc-open { transform: rotate(45deg); } .acc-widget .acc-toggle-btn:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; } /* ── Link button (cirkel met pijl — zelfde look als toggle maar navigeert naar URL) ── */ .acc-widget .acc-link-btn { position: absolute; inset-block-end: 20px; inset-inline-end: 20px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; background-color: #1d1d1f; color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 10; text-decoration: none; will-change: transform; transition: background-color 200ms var(--acc-ease), transform 200ms var(--acc-ease); } .acc-widget .acc-link-btn:hover { background-color: #424245; transform: scale(1.1); text-decoration: none; } .acc-widget .acc-link-btn:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; } /* ───────────────────────────────────────────────────────────────────────────── NAV ARROWS ───────────────────────────────────────────────────────────────────────────── */ .acc-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px; } .acc-widget.acc-arrows-sides .acc-nav { position: absolute; top: 50%; inset-inline: 0; transform: translateY(-50%); justify-content: space-between; pointer-events: none; margin-top: 0; padding-inline: 8px; z-index: 10; } .acc-widget.acc-arrows-sides .acc-nav .acc-arrow { pointer-events: all; } .acc-widget .acc-arrow { width: 40px; height: 40px; min-width: 44px; min-height: 44px; border-radius: 50%; border: none; background-color: #e8e8ed; color: #1d1d1f; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; will-change: transform, opacity; transition: background-color 200ms var(--acc-ease), transform 200ms var(--acc-ease), opacity 200ms var(--acc-ease); -webkit-appearance: none; appearance: none; } .acc-widget .acc-arrow:hover:not(:disabled) { background-color: #d2d2d7; transform: scale(1.08); } .acc-widget .acc-arrow:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; } .acc-widget .acc-arrow:disabled { opacity: 0.3; cursor: default; pointer-events: none; } /* ───────────────────────────────────────────────────────────────────────────── DOTS PAGINATION ───────────────────────────────────────────────────────────────────────────── */ .acc-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 20px; padding: 0; list-style: none; } .acc-dot { width: 8px; height: 8px; border-radius: 4px; background: #c7c7cc; border: none; padding: 0; cursor: pointer; position: relative; transition: width 280ms var(--acc-ease), background 280ms var(--acc-ease); -webkit-appearance: none; appearance: none; } .acc-dot::after { content: ''; position: absolute; inset: -10px; } .acc-dot.acc-dot-active { width: 24px; background: #1d1d1f; } .acc-dot:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; border-radius: 4px; } .acc-nav-combined { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding-inline: 4px; } .acc-nav-combined .acc-dots { margin-top: 0; } .acc-nav-combined .acc-nav-arrows { display: flex; gap: 10px; } /* ───────────────────────────────────────────────────────────────────────────── PRESET ② — OVERLAY CARDS ───────────────────────────────────────────────────────────────────────────── */ .acc-preset-overlay .acc-card { overflow: hidden; background-color: #111; } .acc-preset-overlay .acc-card-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; z-index: 0; display: block; pointer-events: none; will-change: transform; transition: transform 400ms var(--acc-ease); } .acc-preset-overlay .acc-card:hover .acc-card-bg-img { transform: scale(1.04); } .acc-preset-overlay .acc-card-content { position: absolute; inset: 0; padding: 24px; } /* Light scheme */ .acc-preset-overlay.acc-scheme-light .acc-card-content { background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 40%, transparent 70%); } .acc-preset-overlay.acc-scheme-light .acc-category, .acc-preset-overlay.acc-scheme-light .acc-title, .acc-preset-overlay.acc-scheme-light .acc-intro { color: #ffffff !important; } /* Dark scheme */ .acc-preset-overlay.acc-scheme-dark .acc-card-content { background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.60) 50%, transparent 100%); } .acc-preset-overlay.acc-scheme-dark .acc-card-text { background: rgba(0,0,0,.72); padding: 16px; border-radius: 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .acc-preset-overlay.acc-scheme-dark .acc-category, .acc-preset-overlay.acc-scheme-dark .acc-title, .acc-preset-overlay.acc-scheme-dark .acc-intro { color: #ffffff !important; } /* Content block with explicit bg overrides overlay gradient */ .acc-preset-overlay .acc-card-content:has(.acc-content-block[style*="background-color"]) { background: none !important; } .acc-content-block[style*="background-color"] .acc-category { color: #6e6e73 !important; } .acc-content-block[style*="background-color"] .acc-title { color: #1d1d1f !important; } .acc-content-block[style*="background-color"] .acc-intro { color: #1d1d1f !important; } /* ───────────────────────────────────────────────────────────────────────────── PRESET ③ — FADE SLIDER ───────────────────────────────────────────────────────────────────────────── */ .acc-fade-widget { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; background: #f5f5f7; border-radius: 20px; overflow: hidden; } .acc-fade-left { padding: 40px 32px; border-right: 1px solid #e5e5ea; display: flex; flex-direction: column; gap: 24px; } .acc-fade-widget-title { font-size: clamp(18px, 2vw, 26px); font-weight: 700; color: #1d1d1f; margin: 0; letter-spacing: -0.02em; line-height: 1.2; } .acc-fade-nav { display: flex; flex-direction: column; gap: 4px; list-style: none; padding: 0; margin: 0; } .acc-fade-nav-btn { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-size: 15px; font-weight: 500; color: #6e6e73; padding: 10px 14px; border-radius: 10px; transition: background 180ms var(--acc-ease), color 180ms var(--acc-ease); -webkit-appearance: none; appearance: none; } .acc-fade-nav-btn:hover { background: rgba(0,0,0,.05); color: #1d1d1f; } .acc-fade-nav-btn.acc-fade-active { background: rgba(0,0,0,.08); color: #1d1d1f; font-weight: 600; } .acc-fade-nav-btn:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; } .acc-fade-right { position: relative; overflow: hidden; min-height: 420px; } .acc-fade-slides { position: relative; width: 100%; height: 100%; } .acc-fade-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; will-change: opacity; transition: opacity 380ms var(--acc-ease); } .acc-fade-slide.acc-fade-active { opacity: 1; pointer-events: auto; position: relative; /* first slide takes up space */ } .acc-fade-slide-img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: center; display: block; } .acc-fade-text-box { position: absolute; top: 16px; right: 16px; max-width: 260px; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 16px; padding: 16px 20px; font-size: 14px; line-height: 1.5; color: #1d1d1f; box-shadow: 0 4px 24px rgba(0,0,0,.12); } .acc-fade-next-btn { position: absolute; inset-block-end: 16px; inset-inline-end: 16px; width: 48px; height: 48px; min-width: 44px; min-height: 44px; border-radius: 50%; border: none; background: #1d1d1f; color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 5; will-change: transform; transition: transform 200ms var(--acc-ease), background 200ms var(--acc-ease); -webkit-appearance: none; appearance: none; } .acc-fade-next-btn:hover { background: #424245; transform: scale(1.08); } .acc-fade-next-btn:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; } /* ───────────────────────────────────────────────────────────────────────────── MODAL BUG FIX: use visibility + opacity instead of display:none toggle. This allows CSS transitions to play correctly on open AND close. Modals are now inside the widget wrapper so {{WRAPPER}} selectors work. ───────────────────────────────────────────────────────────────────────────── */ .acc-modal-overlay { display: flex; /* always flex — never toggled */ position: fixed; inset: 0; z-index: 999999; align-items: center; justify-content: center; padding: 16px; /* Hidden state */ visibility: hidden; opacity: 0; pointer-events: none; /* Transition: delay visibility until after opacity fades to 0 */ transition: opacity 280ms var(--acc-ease), visibility 0s 280ms; } .acc-modal-overlay.acc-modal-open { visibility: visible; opacity: 1; pointer-events: auto; /* No delay on visibility when opening */ transition: opacity 280ms var(--acc-ease), visibility 0s 0s; } .acc-modal-overlay .acc-modal { position: relative; background: #ffffff; border-radius: 24px; width: 100%; max-width: 560px; max-height: 90dvh; max-height: 90vh; /* fallback */ overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; box-shadow: 0 24px 80px rgba(0,0,0,.22); will-change: transform, opacity; transform: scale(0.94) translateY(16px); opacity: 0; transition: transform 300ms var(--acc-ease), opacity 300ms var(--acc-ease); } .acc-modal-overlay.acc-modal-open .acc-modal { transform: scale(1) translateY(0); opacity: 1; } .acc-modal-overlay .acc-modal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; min-width: 44px; /* WCAG touch target via extended hit area */ min-height: 44px; border-radius: 50%; border: none; background-color: #1d1d1f; color: #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 1; transition: background-color 200ms var(--acc-ease), transform 200ms var(--acc-ease); -webkit-appearance: none; appearance: none; } .acc-modal-overlay .acc-modal-close:hover { background-color: #424245; transform: scale(1.1); } .acc-modal-overlay .acc-modal-close:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; } .acc-modal-inner { padding: 48px; } .acc-modal-category { display: block; font-size: 12px; font-weight: 600; color: #6e6e73; margin-bottom: 4px; letter-spacing: 0.01em; } .acc-modal-title { font-size: clamp(22px, 3vw, 32px); font-weight: 700; line-height: 1.2; color: #1d1d1f; margin: 0 0 16px; letter-spacing: -0.025em; } .acc-modal-body { font-size: 15px; line-height: 1.6; color: #1d1d1f; } .acc-modal-body p { margin: 0 0 12px; } .acc-modal-body p:last-child { margin-bottom: 0; } .acc-modal-link { display: inline-block; margin-top: 16px; font-size: 15px; color: #0066cc; text-decoration: none; transition: color 200ms var(--acc-ease); } .acc-modal-link:hover { color: #0077ed; text-decoration: underline; } .acc-modal-link:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; border-radius: 2px; } /* ───────────────────────────────────────────────────────────────────────────── EXTEND-RIGHT (viewport bleed) ───────────────────────────────────────────────────────────────────────────── */ .acc-widget.acc-extend-right, .acc-widget.acc-extend-right .acc-carousel-wrapper { overflow: visible; clip-path: none; } /* ───────────────────────────────────────────────────────────────────────────── RESPONSIVE ───────────────────────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .acc-title { font-size: clamp(16px, 2vw, 22px); } .acc-fade-widget { grid-template-columns: minmax(180px, 240px) 1fr; } .acc-fade-left { padding: 32px 24px; } .acc-fade-slide-img { min-height: 360px; } .acc-fade-text-box { max-width: 220px; } } @media (max-width: 767px) { .acc-card { min-height: 340px; } .acc-card-content { padding: 18px; } .acc-title { font-size: clamp(15px, 4vw, 20px); } .acc-widget .acc-toggle-btn { inset-block-end: 14px; inset-inline-end: 14px; } .acc-modal-inner { padding: 32px 20px; } .acc-modal-title { font-size: 22px; } .acc-modal-overlay .acc-modal-close { top: 12px; right: 12px; } /* Hide side-positioned arrows on mobile */ .acc-widget.acc-arrows-sides .acc-nav { display: none; } /* Fade slider: stack vertically */ .acc-fade-widget { grid-template-columns: 1fr; border-radius: 16px; } .acc-fade-left { padding: 24px 20px; border-right: none; border-bottom: 1px solid #e5e5ea; gap: 16px; } .acc-fade-nav { flex-direction: row; flex-wrap: wrap; gap: 8px; } .acc-fade-nav-btn { padding: 8px 14px; font-size: 14px; } .acc-fade-slide-img { min-height: 260px; } .acc-fade-text-box { max-width: 180px; padding: 12px 16px; font-size: 13px; top: 12px; right: 12px; border-radius: 12px; } .acc-fade-next-btn { inset-block-end: 12px; inset-inline-end: 12px; width: 44px; height: 44px; } /* Overlay preset */ .acc-preset-overlay .acc-card-content { padding: 16px !important; } .acc-preset-overlay.acc-scheme-dark .acc-card-text { padding: 12px; border-radius: 10px; } } /* ───────────────────────────────────────────────────────────────────────────── ACCESSIBILITY ───────────────────────────────────────────────────────────────────────────── */ /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .acc-card, .acc-widget .acc-toggle-btn, .acc-widget .acc-arrow, .acc-modal-overlay, .acc-modal-overlay .acc-modal, .acc-modal-overlay .acc-modal-close, .acc-dot, .acc-fade-slide, .acc-fade-nav-btn, .acc-fade-next-btn, .acc-preset-overlay .acc-card-bg-img { transition: none !important; animation: none !important; will-change: auto !important; } .acc-card:hover { transform: none; } .acc-preset-overlay .acc-card:hover .acc-card-bg-img { transform: none; } .acc-track { scroll-behavior: auto; } /* Modals: show immediately without animation */ .acc-modal-overlay.acc-modal-open .acc-modal { transform: none; opacity: 1 !important; } } /* High contrast */ @media (forced-colors: active) { .acc-widget .acc-toggle-btn, .acc-widget .acc-arrow, .acc-modal-overlay .acc-modal-close, .acc-fade-next-btn { forced-color-adjust: none; border: 2px solid ButtonText !important; } .acc-dot { forced-color-adjust: none; border: 2px solid ButtonText; } .acc-modal-overlay .acc-modal { border: 2px solid CanvasText; } } /* Print */ @media print { .acc-track { overflow: visible; flex-wrap: wrap; } .acc-card { flex: 0 0 45%; page-break-inside: avoid; } .acc-nav, .acc-dots, .acc-nav-combined { display: none; } .acc-modal-overlay { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ KAART TEMPLATES Schakelbaar via Elementor → Widget instellingen → Kaart template --acc-photo-pct : hoogte van de foto als % van de kaart (standaard 55%) --acc-text-bg : achtergrondkleur van het tekstvlak (standaard #ffffff) ═══════════════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────────────────── TEMPLATE: FOTO BOVEN · TEKST ONDER ┌─────────────────────────┐ │ ░░░░░ FOTO ░░░░░░░░ │ ← --acc-photo-pct (standaard 55%) │ ░░░░░░░░░░░░░░░░░░░░░ │ ├─────────────────────────┤ │ Categorie │ │ Titel van de kaart │ ← resterende ruimte │ Intro tekst... │ │ [+] │ └─────────────────────────┘ ────────────────────────────────────────────────────────────────────────── */ .acc-layout-photo-top .acc-card { overflow: hidden; } .acc-layout-photo-top .acc-card-content { flex-direction: column; padding: 0; gap: 0; justify-content: flex-start; } /* Foto: bovenste deel van de kaart, vaste hoogte via --acc-photo-pct */ .acc-layout-photo-top .acc-media { order: -1; /* visueel boven content-block */ flex: 0 0 var(--acc-photo-pct, 55%); height: var(--acc-photo-pct, 55%); margin: 0; border-radius: 0; overflow: hidden; align-items: stretch; width: 100%; } .acc-layout-photo-top .acc-media-img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: center; display: block; border-radius: 0; } /* Tekstvlak: vult de rest onder de foto */ .acc-layout-photo-top .acc-content-block { order: 1; background: var(--acc-text-bg, #ffffff); padding: 18px 20px 56px 20px; flex: 1 1 auto; border-radius: 0 0 inherit inherit; } /* [+] knop: rechtsonder in het tekstvlak */ .acc-layout-photo-top .acc-toggle-btn { bottom: 14px !important; right: 14px !important; } /* ────────────────────────────────────────────────────────────────────────── TEMPLATE: TEKST BOVEN · FOTO ONDER (uitgelijnd aan onderkant) ┌─────────────────────────┐ │ Categorie │ │ Titel van de kaart │ ← ruimte voor tekst (100% - --acc-photo-pct) │ Intro tekst... │ ├─────────────────────────┤ │ ░░░░░ FOTO ░░░░░░░░ │ ← --acc-photo-pct (standaard 55%) │ ░░░░░░░░░░░░░░░░░░░░░ │ │ ░░░░░░░░░░░░░░░░░[+]░ │ ← knop op foto └─────────────────────────┘ ────────────────────────────────────────────────────────────────────────── */ .acc-layout-photo-bottom .acc-card { overflow: hidden; } .acc-layout-photo-bottom .acc-card-content { flex-direction: column; padding: 0; gap: 0; justify-content: flex-start; } /* Tekstvlak: bovenste deel, auto hoogte */ .acc-layout-photo-bottom .acc-content-block { order: 1; background: var(--acc-text-bg, #ffffff); padding: 20px 20px 16px 20px; flex: 0 0 auto; min-height: calc(100% - var(--acc-photo-pct, 55%)); } /* Foto: vult de rest — plakt aan de onderkant */ .acc-layout-photo-bottom .acc-media { order: 2; flex: 1 1 auto; min-height: var(--acc-photo-pct, 55%); height: var(--acc-photo-pct, 55%); margin: 0; overflow: hidden; align-items: stretch; position: relative; border-radius: 0; width: 100%; } .acc-layout-photo-bottom .acc-media-img { width: 100%; height: 100%; max-height: none; object-fit: cover; /* Uitlijnen naar onderkant: foto toont altijd onderkant van het beeld */ object-position: center bottom; display: block; border-radius: 0 0 inherit inherit; } /* [+] knop: rechtsonder op de foto */ .acc-layout-photo-bottom .acc-toggle-btn { bottom: 14px !important; right: 14px !important; /* Zorg dat knop zichtbaar is boven de foto */ z-index: 20 !important; } /* Fijne scheidingslijn tussen tekst en foto */ .acc-layout-photo-bottom .acc-content-block::after { content: ''; display: block; height: 1px; background: rgba(0, 0, 0, 0.06); margin-top: 16px; } /* ── Responsive aanpassingen voor beide templates ── */ @media (max-width: 767px) { .acc-layout-photo-top .acc-content-block, .acc-layout-photo-bottom .acc-content-block { padding-inline: 16px; } .acc-layout-photo-top .acc-content-block { padding-bottom: 52px; } } /* ── Reduced motion: geen effect op layout ── */ @media (prefers-reduced-motion: reduce) { .acc-layout-photo-top .acc-media-img, .acc-layout-photo-bottom .acc-media-img { transition: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ FADE SLIDER — HERO STYLE (Altermedia stijl) --acc-fade-accent : rechter paneel achtergrond (standaard #E72B2B) --acc-fade-text : tekst kleur rechter paneel (standaard #ffffff) --acc-fade-split : foto breedte in % (standaard 58%) ═══════════════════════════════════════════════════════════════════════════ */ .acc-fade-hero { display: grid; grid-template-columns: var(--acc-fade-split, 58%) 1fr; min-height: 520px; overflow: hidden; border-radius: 0; background: var(--acc-fade-accent, #E72B2B); position: relative; } /* ── Photo panel (left) ─────────────────────────────────────────────────── */ .acc-fade-hero .acc-fade-photo-panel { position: relative; overflow: hidden; z-index: 1; } /* Diagonal cut: red triangle overlaid on right edge of photo */ .acc-fade-hero.acc-fade-diagonal .acc-fade-photo-panel::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 120px; background: var(--acc-fade-accent, #E72B2B); clip-path: polygon(60% 0, 100% 0, 100% 100%, 0 100%); z-index: 3; pointer-events: none; } /* Photo slides */ .acc-fade-hero .acc-fade-photo-slides { position: relative; width: 100%; height: 100%; } .acc-fade-hero .acc-fade-photo-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 450ms cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity; } .acc-fade-hero .acc-fade-photo-slide.acc-fade-active { opacity: 1; pointer-events: auto; position: relative; height: 100%; } .acc-fade-hero .acc-fade-photo-img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; object-position: center; display: block; } /* ── Badge / label (top-left over photo) ──────────────────────────────────── */ .acc-fade-hero .acc-fade-badge { position: absolute; top: 0; left: 0; z-index: 10; background: var(--acc-fade-accent, #E72B2B); color: #ffffff; font-size: clamp(13px, 1.2vw, 18px); font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; padding: 14px 40px 14px 28px; line-height: 1; /* Diagonal right edge matching panel cut */ clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%); white-space: nowrap; } /* ── Side navigation arrows (positioned on photo) ─────────────────────────── */ .acc-fade-hero .acc-fade-side-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; width: 52px; height: 52px; min-width: 44px; min-height: 44px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.92); color: #1d1d1f; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease; -webkit-appearance: none; appearance: none; } .acc-fade-hero .acc-fade-side-arrow--prev { left: 16px; } .acc-fade-hero .acc-fade-side-arrow--next { right: 16px; } .acc-fade-hero .acc-fade-side-arrow:hover { background: #ffffff; transform: translateY(-50%) scale(1.08); box-shadow: 0 6px 28px rgba(0, 0, 0, 0.22); } .acc-fade-hero .acc-fade-side-arrow:focus-visible { outline: 3px solid var(--acc-fade-accent, #E72B2B); outline-offset: 2px; } .acc-fade-hero .acc-fade-side-arrow:disabled { opacity: 0.35; cursor: default; } /* ── Content panel (right — red) ──────────────────────────────────────────── */ .acc-fade-hero .acc-fade-content-panel { background: var(--acc-fade-accent, #E72B2B); color: var(--acc-fade-text, #ffffff); display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 2; /* Slight left padding to account for diagonal overlap */ padding-left: 8px; } .acc-fade-hero .acc-fade-content-slides { flex: 1 1 auto; position: relative; } .acc-fade-hero .acc-fade-content-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 450ms cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; } .acc-fade-hero .acc-fade-content-slide.acc-fade-active { opacity: 1; pointer-events: auto; position: relative; } .acc-fade-hero .acc-fade-content-inner { padding: 48px 44px 32px 36px; display: flex; flex-direction: column; gap: 16px; width: 100%; } /* ── Eyebrow / category ─── */ .acc-fade-hero .acc-fade-eyebrow { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--acc-fade-text, #ffffff); opacity: 0.75; } /* ── Hero title ─── */ .acc-fade-hero .acc-fade-hero-title { font-size: clamp(22px, 2.8vw, 44px); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; color: var(--acc-fade-text, #ffffff); margin: 0; text-transform: uppercase; } /* ── Body text ─── */ .acc-fade-hero .acc-fade-hero-body { font-size: clamp(14px, 1.1vw, 17px); line-height: 1.65; color: var(--acc-fade-text, #ffffff); margin: 0; opacity: 0.92; } /* ── Bullet list ─── */ .acc-fade-hero .acc-fade-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .acc-fade-hero .acc-fade-bullets li { font-size: clamp(14px, 1.05vw, 16px); font-weight: 600; color: var(--acc-fade-text, #ffffff); display: flex; align-items: center; gap: 10px; line-height: 1.4; } .acc-fade-hero .acc-fade-bullets li::before { content: ''; display: block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--acc-fade-text, #ffffff); opacity: 0.9; } /* ── CTA button ───────────────────────────────────────────────────────────── */ .acc-fade-cta { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(13px, 1vw, 15px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; padding: 14px 28px; border-radius: 100px; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease; width: fit-content; -webkit-appearance: none; appearance: none; border: 2px solid transparent; /* Prevent text overflow */ white-space: nowrap; } /* Outline (wit kader op accent achtergrond) */ .acc-fade-cta--outline { background: transparent; border-color: var(--acc-fade-text, #ffffff); color: var(--acc-fade-text, #ffffff); } .acc-fade-cta--outline:hover { background: var(--acc-fade-text, #ffffff); color: var(--acc-fade-accent, #E72B2B); transform: scale(1.03); } /* Filled wit */ .acc-fade-cta--filled { background: var(--acc-fade-text, #ffffff); border-color: var(--acc-fade-text, #ffffff); color: var(--acc-fade-accent, #E72B2B); } .acc-fade-cta--filled:hover { background: rgba(255, 255, 255, 0.88); transform: scale(1.03); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); } /* Accent (donkerder tint van accentkleur) */ .acc-fade-cta--accent { background: rgba(0, 0, 0, 0.2); border-color: rgba(255, 255, 255, 0.4); color: var(--acc-fade-text, #ffffff); } .acc-fade-cta--accent:hover { background: rgba(0, 0, 0, 0.35); transform: scale(1.03); } .acc-fade-cta:focus-visible { outline: 3px solid var(--acc-fade-text, #ffffff); outline-offset: 3px; } .acc-fade-cta-arrow { transition: transform 180ms ease; font-style: normal; } .acc-fade-cta:hover .acc-fade-cta-arrow { transform: translateX(4px); } /* ── Vertical nav list (vervangt horizontale dots) ────────────────────────── */ .acc-fade-hero-nav { flex-shrink: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 6px 0 8px; overflow-y: auto; max-height: 220px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; } .acc-fade-hero-nav-btn { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.5); padding: 9px 20px 9px 24px; border-left: 3px solid transparent; transition: color 180ms ease, border-color 180ms ease, background 180ms ease; -webkit-appearance: none; appearance: none; line-height: 1.3; } .acc-fade-hero-nav-indicator { display: block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); transition: background 180ms ease, border-color 180ms ease, transform 200ms ease; } .acc-fade-hero-nav-btn:hover { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.06); } .acc-fade-hero-nav-btn:hover .acc-fade-hero-nav-indicator { border-color: rgba(255, 255, 255, 0.6); } .acc-fade-hero-nav-btn.active { color: var(--acc-fade-text, #ffffff); font-weight: 700; border-left-color: var(--acc-fade-text, #ffffff); background: rgba(255, 255, 255, 0.08); } .acc-fade-hero-nav-btn.active .acc-fade-hero-nav-indicator { background: var(--acc-fade-text, #ffffff); border-color: var(--acc-fade-text, #ffffff); transform: scale(1.3); } .acc-fade-hero-nav-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.6); outline-offset: -2px; } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .acc-fade-hero { grid-template-columns: 55% 1fr; min-height: 420px; } .acc-fade-hero .acc-fade-hero-title { font-size: clamp(20px, 3vw, 32px); } .acc-fade-hero .acc-fade-content-inner { padding: 36px 32px 24px 28px; gap: 14px; } .acc-fade-hero.acc-fade-diagonal .acc-fade-photo-panel::after { width: 90px; } } @media (max-width: 767px) { /* Stack vertically on mobile */ .acc-fade-hero { grid-template-columns: 1fr; grid-template-rows: 260px auto; min-height: auto; border-radius: 12px; } .acc-fade-hero.acc-fade-diagonal .acc-fade-photo-panel::after { /* Switch diagonal to bottom on mobile */ top: auto; right: 0; bottom: 0; left: 0; width: 100%; height: 60px; clip-path: polygon(0 60%, 100% 0, 100% 100%, 0 100%); } .acc-fade-hero .acc-fade-photo-img { min-height: 260px; } .acc-fade-hero .acc-fade-badge { font-size: 12px; padding: 10px 28px 10px 16px; } .acc-fade-hero .acc-fade-content-inner { padding: 24px 20px 16px; gap: 12px; } .acc-fade-hero .acc-fade-hero-title { font-size: clamp(20px, 6vw, 28px); } .acc-fade-hero .acc-fade-hero-body { font-size: 14px; } .acc-fade-hero .acc-fade-content-panel { padding-left: 0; } .acc-fade-hero-nav { padding: 4px 0 6px; max-height: 160px; } .acc-fade-hero .acc-fade-side-arrow--prev { left: 8px; } .acc-fade-hero .acc-fade-side-arrow--next { right: 8px; } .acc-fade-cta { font-size: 13px; padding: 12px 22px; } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .acc-fade-hero .acc-fade-photo-slide, .acc-fade-hero .acc-fade-content-slide, .acc-fade-hero .acc-fade-side-arrow, .acc-fade-cta { transition: none !important; } .acc-fade-hero-nav-btn, .acc-fade-hero-nav-indicator { transition: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ FADE SLIDER — CLASSIC V2 (Altermedia branded: tabs left, foto right) --acc-fade-accent : badge strip & actieve tab kleur (#E72B2B) --acc-fade-panel : linker paneel achtergrond (#1d1d1f) --acc-fade-text : tekst kleur op paneel (#ffffff) --acc-panel-w : breedte linker paneel in px (320px) ═══════════════════════════════════════════════════════════════════════════ */ .acc-fade-classic-v2 { display: grid; grid-template-columns: var(--acc-panel-w, 320px) 1fr; min-height: 520px; overflow: hidden; border-radius: 16px; position: relative; background: var(--acc-fade-panel, #1d1d1f); } /* ── Left branded panel ─────────────────────────────────────────────────── */ .acc-fv2-left { background: var(--acc-fade-panel, #1d1d1f); display: flex; flex-direction: column; position: relative; z-index: 2; overflow: hidden; } /* ── Badge strip (red header) ── */ .acc-fv2-badge { background: var(--acc-fade-accent, #E72B2B); color: #ffffff; font-size: clamp(10px, 0.85vw, 13px); font-weight: 900; text-transform: uppercase; letter-spacing: 0.07em; padding: 12px 20px 12px 24px; line-height: 1; flex-shrink: 0; /* Slight diagonal right edge */ clip-path: polygon(0 0, 96% 0, 100% 100%, 0 100%); } /* ── Slide content (title, body, bullets, CTA) ── */ .acc-fv2-content-area { flex: 1 1 auto; position: relative; min-height: 0; overflow: hidden; } .acc-fv2-content-slide { position: absolute; inset: 0; padding: 24px 24px 16px; opacity: 0; pointer-events: none; will-change: opacity; transition: opacity 380ms cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; gap: 10px; overflow-y: auto; scrollbar-width: none; } .acc-fv2-content-slide::-webkit-scrollbar { display: none; } .acc-fv2-content-slide.active { opacity: 1; pointer-events: auto; position: relative; inset: unset; } .acc-fv2-eyebrow { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--acc-fade-accent, #E72B2B); } .acc-fv2-title { font-size: clamp(18px, 1.6vw, 26px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--acc-fade-text, #ffffff); margin: 0; text-wrap: balance; } .acc-fv2-body { font-size: clamp(13px, 0.9vw, 15px); line-height: 1.65; color: rgba(255, 255, 255, 0.72); margin: 0; } /* ── Bullets ── */ .acc-fv2-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; } .acc-fv2-bullets li { font-size: 13px; font-weight: 600; color: var(--acc-fade-text, #ffffff); display: flex; align-items: center; gap: 9px; line-height: 1.3; } .acc-fv2-bullets li::before { content: ''; display: block; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--acc-fade-accent, #E72B2B); } /* ── CTA button (classic variant, dark panel) ── */ .acc-fv2-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; padding: 12px 22px; border-radius: 100px; cursor: pointer; border: 2px solid transparent; width: fit-content; white-space: nowrap; transition: transform 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease; -webkit-appearance: none; appearance: none; margin-top: 4px; } .acc-fv2-cta--outline { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: var(--acc-fade-text, #ffffff); } .acc-fv2-cta--outline:hover { background: rgba(255, 255, 255, 0.1); border-color: #ffffff; transform: scale(1.03); } .acc-fv2-cta--filled { background: var(--acc-fade-text, #ffffff); border-color: var(--acc-fade-text, #ffffff); color: var(--acc-fade-panel, #1d1d1f); } .acc-fv2-cta--filled:hover { background: rgba(255, 255, 255, 0.88); transform: scale(1.03); box-shadow: 0 4px 20px rgba(0,0,0,0.2); } .acc-fv2-cta--accent { background: var(--acc-fade-accent, #E72B2B); border-color: var(--acc-fade-accent, #E72B2B); color: #ffffff; } .acc-fv2-cta--accent:hover { filter: brightness(1.1); transform: scale(1.03); } .acc-fv2-cta:focus-visible { outline: 2px solid var(--acc-fade-text, #ffffff); outline-offset: 3px; } .acc-fv2-cta-arrow { transition: transform 180ms ease; } .acc-fv2-cta:hover .acc-fv2-cta-arrow { transform: translateX(3px); } /* ── Tab navigation (bottom of left panel) ─────────────────────────────── */ .acc-fv2-nav { flex-shrink: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 8px 0; overflow-y: auto; max-height: 240px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; } .acc-fv2-nav-btn { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.45); padding: 10px 20px; border-left: 3px solid transparent; transition: color 200ms ease, border-color 200ms ease, background 200ms ease; -webkit-appearance: none; appearance: none; position: relative; } .acc-fv2-nav-indicator { display: block; width: 6px; height: 6px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); flex-shrink: 0; transition: background 200ms ease, border-color 200ms ease, transform 200ms ease; } .acc-fv2-nav-btn:hover { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.04); } .acc-fv2-nav-btn:hover .acc-fv2-nav-indicator { border-color: rgba(255,255,255,0.5); } .acc-fv2-nav-btn.active { color: var(--acc-fade-text, #ffffff); font-weight: 700; border-left-color: var(--acc-fade-accent, #E72B2B); background: rgba(255, 255, 255, 0.06); } .acc-fv2-nav-btn.active .acc-fv2-nav-indicator { background: var(--acc-fade-accent, #E72B2B); border-color: var(--acc-fade-accent, #E72B2B); transform: scale(1.3); } .acc-fv2-nav-btn:focus-visible { outline: 2px solid var(--acc-fade-accent, #E72B2B); outline-offset: -2px; } /* ── Right photo panel ──────────────────────────────────────────────────── */ .acc-fv2-right { position: relative; overflow: hidden; z-index: 1; } /* Diagonal cut: dark panel wedge overlaid on left edge of photo */ .acc-fade-classic-v2.acc-fade-diagonal .acc-fv2-right::before { content: ''; position: absolute; top: 0; left: -1px; bottom: 0; width: 80px; background: var(--acc-fade-panel, #1d1d1f); clip-path: polygon(0 0, 55% 0, 0 100%); z-index: 10; pointer-events: none; } .acc-fv2-photos { position: relative; width: 100%; height: 100%; } .acc-fv2-photo { position: absolute; inset: 0; opacity: 0; pointer-events: none; will-change: opacity; transition: opacity 420ms cubic-bezier(0.4, 0, 0.2, 1); } .acc-fv2-photo.active { opacity: 1; pointer-events: auto; position: relative; height: 100%; } .acc-fv2-photo-img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; object-position: center; display: block; } /* ── Navigation arrows on photo ── */ .acc-fv2-arrow { position: absolute; z-index: 20; width: 52px; height: 52px; min-width: 44px; min-height: 44px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.9); color: #1d1d1f; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; top: 50%; transform: translateY(-50%); box-shadow: 0 4px 20px rgba(0,0,0,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease; -webkit-appearance: none; appearance: none; } .acc-fv2-arrow--prev { left: 16px; } .acc-fv2-arrow--next { right: 16px; } .acc-fv2-arrow:hover { background: #ffffff; transform: translateY(-50%) scale(1.08); box-shadow: 0 6px 28px rgba(0,0,0,.24); } .acc-fv2-arrow:focus-visible { outline: 3px solid var(--acc-fade-accent, #E72B2B); outline-offset: 2px; } .acc-fv2-arrow:disabled { opacity: 0.3; cursor: default; } /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .acc-fade-classic-v2 { grid-template-columns: 280px 1fr; min-height: 440px; } .acc-fv2-title { font-size: clamp(16px, 1.8vw, 22px); } .acc-fv2-content-slide { padding: 20px 18px 12px; } .acc-fv2-photo-img { min-height: 440px; } } @media (max-width: 767px) { .acc-fade-classic-v2 { grid-template-columns: 1fr; grid-template-rows: auto 260px; min-height: auto; border-radius: 12px; } /* Left panel on top, photo below */ .acc-fv2-left { order: 1; min-height: 0; } .acc-fv2-right { order: 2; } .acc-fade-classic-v2.acc-fade-diagonal .acc-fv2-right::before { /* Switch diagonal to top on mobile */ left: 0; right: 0; top: -1px; bottom: auto; width: 100%; height: 50px; clip-path: polygon(0 0, 100% 0, 100% 30%, 0 100%); } .acc-fv2-badge { padding: 10px 20px; font-size: 11px; } .acc-fv2-content-slide { padding: 16px 16px 10px; gap: 8px; } .acc-fv2-title { font-size: 18px; } .acc-fv2-body { font-size: 13px; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .acc-fv2-nav { max-height: 140px; border-top: none; border-bottom: 1px solid rgba(255,255,255,.07); display: flex; flex-wrap: wrap; padding: 6px 10px; gap: 2px; } .acc-fv2-nav-btn { width: auto; flex: 0 0 auto; padding: 7px 12px; border-left: none; border-bottom: 2px solid transparent; font-size: 12px; } .acc-fv2-nav-btn.active { border-left: none; border-bottom-color: var(--acc-fade-accent, #E72B2B); } .acc-fv2-photo-img { min-height: 260px; } .acc-fv2-arrow--prev { left: 8px; } .acc-fv2-arrow--next { right: 8px; } .acc-fv2-nav-indicator { display: none; } } @media (prefers-reduced-motion: reduce) { .acc-fv2-photo, .acc-fv2-content-slide, .acc-fv2-nav-btn, .acc-fv2-cta, .acc-fv2-arrow { transition: none !important; } } /* ========================================================== Card icon ========================================================== */ .acc-card-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; /* Staat boven het content-block — margin-bottom zorgt voor ruimte */ margin-bottom: 12px; /* Zelf-uitlijning links (niet full-width) */ align-self: flex-start; /* Transition voor hover op de kaart */ transition: transform 200ms ease; } /* Kaart hover: icon licht omhoog */ .acc-card:hover .acc-card-icon { transform: translateY(-2px); } /* Icon font-size wordt via inline style gezet */ .acc-card-icon i, .acc-card-icon svg { display: block; width: 1em; height: 1em; } /* ═══════════════════════════════════════════════════════════════════════ FADE SLIDER — XPO STYLE Wit afgerond nav-paneel links (actieve tab = pill), foto + donkere caption-card rechts, gecentreerde CTA eronder. ═══════════════════════════════════════════════════════════════════════ */ .acc-fade-xpo { --acc-xpo-panel: #ffffff; --acc-xpo-tab: #111111; --acc-xpo-active-bg: #111111; --acc-xpo-active-color: #ffffff; --acc-xpo-caption-bg: #141416; --acc-xpo-caption-color: #ffffff; --acc-xpo-radius: 24px; --acc-xpo-panel-w: 380px; --acc-xpo-cta-bg: #ffffff; --acc-xpo-cta-color: #111111; width: 100%; } .acc-xpo-heading { margin: 0 0 48px; color: #fff; text-align: center; font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 800; line-height: 1.05; } .acc-xpo-grid { display: flex; align-items: stretch; gap: 0; min-height: 520px; } /* ── Nav-paneel ── */ .acc-xpo-panel { flex: 0 0 var(--acc-xpo-panel-w); display: flex; flex-direction: column; gap: 10px; padding: 96px 28px 28px; background: var(--acc-xpo-panel); border-radius: var(--acc-xpo-radius); outline: none; z-index: 1; } .acc-xpo-panel:focus-visible { outline: 2px solid var(--acc-xpo-active-bg); outline-offset: 3px; } .acc-xpo-tab { /* !important: thema's stylen