/* ═══════════════════════════════════════════════════════ Testimonial Slider Pro v2 – Full width, 4 cards naast elkaar ═══════════════════════════════════════════════════════ */ :root { --tsp-accent: #6C63FF; --tsp-text: #1a1a2e; --tsp-card-bg: #ffffff; --tsp-muted: #6b7280; --tsp-radius: 16px; --tsp-shadow: 0 4px 24px rgba(108,99,255,.10); --tsp-gap: 20px; } /* ── Placeholder in de normale paginaflow ── */ .tsp-placeholder { display: block; width: 100%; /* hoogte wordt door JS ingesteld */ } /* ══════════════════════════════════════════════════════ SLIDER — geplakt aan , fixed over volledige breedte ══════════════════════════════════════════════════════ */ .tsp-section { /* JS zet: position absolute, top, left:0, width:100% */ position: absolute; left: 0; width: 100%; background: #F4F3FF; box-sizing: border-box; overflow: hidden; z-index: 9999; /* Verborgen totdat JS de positie berekend heeft */ visibility: hidden; } .tsp-section.tsp-ready { visibility: visible; } /* ── 10% padding links & rechts ── */ .tsp-inner { width: 100%; padding: 60px 10% 50px; box-sizing: border-box; } /* ── Viewport: clip de niet-zichtbare cards ── */ .tsp-viewport { width: 100%; overflow: hidden; } /* ── Track: alle cards in één horizontale rij ── */ .tsp-track { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--tsp-gap); transition: transform .45s cubic-bezier(.4,0,.2,1); will-change: transform; } /* ── Elke slide: 1/4 van de breedte ── */ .tsp-slide { flex: 0 0 calc(25% - (3 * var(--tsp-gap) / 4)); min-width: calc(25% - (3 * var(--tsp-gap) / 4)); box-sizing: border-box; display: flex; } /* ── Card ── */ .tsp-card { background: var(--tsp-card-bg); border-radius: var(--tsp-radius); padding: 28px 24px; box-shadow: var(--tsp-shadow); position: relative; overflow: hidden; width: 100%; box-sizing: border-box; text-align: left; border: 1px solid rgba(108,99,255,.08); display: flex; flex-direction: column; gap: 14px; transition: box-shadow .2s, transform .2s; } .tsp-card:hover { box-shadow: 0 8px 36px rgba(108,99,255,.18); transform: translateY(-4px); } .tsp-card::before { content: ''; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(108,99,255,.07) 0%, transparent 70%); border-radius: 50%; pointer-events: none; } /* ── Quote icoon ── */ .tsp-quote-icon { width: 26px; height: 20px; color: var(--tsp-accent); opacity: .22; flex-shrink: 0; } .tsp-quote-icon svg { width: 100%; height: 100%; } /* ── Sterren ── */ .tsp-stars { display: flex; gap: 3px; } .tsp-star { font-size: 15px; color: #d1d5db; } .tsp-star--filled { color: #f59e0b; } /* ── Bericht ── */ .tsp-message { font-size: .9rem; line-height: 1.7; color: var(--tsp-text); margin: 0; flex: 1; font-style: italic; border: none; padding: 0; quotes: none; } /* ── Scheidingslijn ── */ .tsp-divider { width: 36px; height: 2px; background: var(--tsp-accent); opacity: .3; border-radius: 2px; flex-shrink: 0; } /* ── Auteur ── */ .tsp-author { display: flex; align-items: center; gap: 10px; margin-top: auto; } .tsp-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--tsp-accent); } .tsp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .tsp-avatar--initials { background: linear-gradient(135deg, var(--tsp-accent), #a78bfa); display: flex; align-items: center; justify-content: center; } .tsp-avatar--initials span { color:#fff; font-weight:700; font-size:15px; text-transform:uppercase; } .tsp-author-info { text-align: left; } .tsp-name { display:block; font-size:13px; font-weight:700; color:var(--tsp-text); } .tsp-role { display:block; font-size:12px; color:var(--tsp-muted); margin-top:2px; } /* ── Navigatie ── */ .tsp-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; } .tsp-btn { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--tsp-accent); background: transparent; color: var(--tsp-accent); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s; flex-shrink: 0; } .tsp-btn svg { width: 16px; height: 16px; } .tsp-btn:hover { background: var(--tsp-accent); color: #fff; } .tsp-btn:disabled { opacity: .3; cursor: default; } .tsp-dots { display: flex; align-items: center; gap: 7px; } .tsp-dot { width: 7px; height: 7px; border-radius: 50%; background: #c4c2e8; cursor: pointer; transition: all .25s; border: none; padding: 0; } .tsp-dot.tsp-dot--active { background: var(--tsp-accent); width: 20px; border-radius: 4px; } .tsp-empty { text-align:center; color:var(--tsp-muted); padding:40px; font-style:italic; } /* ── Responsive ── */ @media (max-width: 1100px) { /* 3 cards */ .tsp-slide { flex: 0 0 calc(33.333% - (2 * var(--tsp-gap) / 3)); min-width: calc(33.333% - (2 * var(--tsp-gap) / 3)); } } @media (max-width: 768px) { /* 2 cards */ .tsp-slide { flex: 0 0 calc(50% - (var(--tsp-gap) / 2)); min-width: calc(50% - (var(--tsp-gap) / 2)); } .tsp-inner { padding: 40px 6% 36px; } } @media (max-width: 520px) { /* 1 card */ .tsp-slide { flex: 0 0 100%; min-width: 100%; } .tsp-inner { padding: 30px 5% 28px; } }