/* ── LL Testimonials Widget ── */ .ll-testi-outer { background: #fff; border-radius: 28px; padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 3rem) clamp(1.5rem, 4vw, 2.75rem); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif; overflow: hidden; max-width: 860px; margin: 0 auto; border: 1px solid #f0ecea; } /* ── RTL: auto-detected from (WPML) ── */ [dir="rtl"] .ll-testi-outer, .ll-testi-outer[dir="rtl"] { direction: rtl; } /* flip chevrons in RTL via CSS — no JS needed */ [dir="rtl"] #ll-testi-prev svg, [dir="rtl"] #ll-testi-next svg { transform: scaleX(-1); } /* and swap which button is "prev" visually */ [dir="rtl"] .ll-testi-controls { flex-direction: row-reverse; } /* ── Pill ── */ .ll-testi-pill { display: flex; width: fit-content; margin: 0 auto 2rem; align-items: center; background: #f5f3f2; border: 1px solid #e8e2de; border-radius: 30px; padding: 5px 16px; font-size: 12px; color: #555; letter-spacing: .02em; } /* ── Quote ── */ .ll-testi-quote-area { text-align: center; margin-bottom: clamp(1.25rem, 3vw, 2.25rem); min-height: clamp(80px, 14vw, 130px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 clamp(0px, 2vw, 1rem); } .ll-testi-q1 { font-size: clamp(15px, 2.6vw, 23px); font-weight: 500; line-height: 1.6; color: #111; display: block; transition: filter .5s ease, opacity .5s ease; } .ll-testi-q2 { font-size: clamp(15px, 2.6vw, 23px); font-weight: 400; line-height: 1.6; color: #bbb; display: block; margin-top: 2px; transition: filter .6s ease .08s, opacity .6s ease .08s; } .ll-testi-q1.ll-blurred, .ll-testi-q2.ll-blurred { filter: blur(8px); opacity: 0; } .ll-testi-q1.ll-sharp, .ll-testi-q2.ll-sharp { filter: blur(0); opacity: 1; } /* ── Waveform ── */ .ll-testi-wv-row { display: flex; justify-content: center; align-items: center; gap: clamp(2px, .4vw, 3px); height: clamp(30px, 5vw, 44px); margin-bottom: clamp(1.25rem, 3vw, 2rem); cursor: pointer; padding: 0 clamp(1rem, 6vw, 4rem); } .ll-testi-wv-row .ll-bar { width: clamp(2px, .4vw, 3.5px); border-radius: 4px; background: #d8ccc8; transition: background .07s; flex-shrink: 0; } .ll-testi-wv-row .ll-bar.ll-played { background: #8B1A1A; } .ll-testi-wv-row .ll-bar.ll-active { background: #c0392b; } @keyframes ll-wbob { 0% { transform: scaleY(1); } 50% { transform: scaleY(1.65); } 100% { transform: scaleY(1); } } .ll-testi-wv-row.ll-live .ll-bar.ll-active { animation: ll-wbob .5s ease-in-out infinite; } .ll-testi-wv-row.ll-live .ll-bar:nth-child(3n).ll-active { animation-delay: .13s; } .ll-testi-wv-row.ll-live .ll-bar:nth-child(3n+1).ll-active{ animation-delay: .26s; } /* ── Avatar stage ── */ .ll-testi-av-stage { position: relative; height: clamp(110px, 18vw, 175px); margin-bottom: .75rem; display: flex; align-items: center; justify-content: center; } .ll-testi-av-item { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; will-change: transform, opacity; } .ll-testi-av-box { display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; border-radius: 18px; overflow: hidden; will-change: transform, filter; } .ll-testi-av-name { font-size: clamp(11px, 1.5vw, 13px); color: #333; font-weight: 400; white-space: nowrap; transition: opacity .35s ease .1s, filter .35s ease .1s; } @keyframes ll-spring-pop { 0% { transform: scale(.82); filter: blur(6px); } 55% { transform: scale(1.07); filter: blur(0); } 75% { transform: scale(.97); } 88% { transform: scale(1.02); } 100% { transform: scale(1); filter: blur(0); } } /* ── Controls ── */ .ll-testi-controls { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 28px); margin-top: .25rem; } .ll-testi-ctrl { width: clamp(32px, 5vw, 38px); height: clamp(32px, 5vw, 38px); border-radius: 50%; border: 1px solid #e4dcd8; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #333; transition: background .15s, border-color .15s, transform .1s; } .ll-testi-ctrl:hover { background: #faf5f2; border-color: #c8a898; } .ll-testi-ctrl:active { transform: scale(.9); } .ll-testi-play { width: clamp(36px, 6vw, 44px); height: clamp(36px, 6vw, 44px); border-radius: 50%; background: #1a1a1a; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; transition: background .15s, transform .12s; } .ll-testi-play:hover { background: #333; transform: scale(1.06); } .ll-testi-play:active { transform: scale(.93); } /* ── Responsive: hide far avatars on small screens ── */ @media (max-width: 500px) { .ll-testi-av-item[data-pos="3"], .ll-testi-av-item[data-pos="-3"] { display: none; } } @media (max-width: 380px) { .ll-testi-av-item[data-pos="2"], .ll-testi-av-item[data-pos="-2"] { display: none; } }