/* ============================================================ BEFORE / AFTER SLIDER — ba-slider.css (v2) Before image LEFT | After image RIGHT Add to : ============================================================ */ /* ---- Wrapper ---- */ .ba-pair { position: relative; overflow: hidden; cursor: col-resize; border-radius: 4px; border: 1px solid rgba(212, 175, 55, .35); user-select: none; -webkit-user-select: none; touch-action: pan-y; } /* Hide the original side-by-side cards once JS initialises */ .ba-pair.slider-ready .ba-img-card { display: none !important; } /* ---- Image layers ---- */ .ba-before-layer, .ba-after-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; } .ba-before-layer img, .ba-after-layer img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; } /* BEFORE image: clipped to show LEFT half (clip right side) */ .ba-before-layer { clip-path: inset(0 50% 0 0); } /* AFTER image: clipped to show RIGHT half (clip left side) */ .ba-after-layer { clip-path: inset(0 0 0 50%); } /* ---- Divider line ---- */ .ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: linear-gradient(180deg, #f3d77a 0%, #d4af37 50%, #8a6c20 100%); transform: translateX(-50%); z-index: 10; pointer-events: none; } /* ---- Drag knob (CSS-only arrows, no SVG) ---- */ .ba-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #f3d77a, #d4af37 60%, #8a6c20); border: 3px solid #f3d77a; box-shadow: 0 4px 18px rgba(0, 0, 0, .65), 0 0 0 1px rgba(212,175,55,.4); z-index: 11; pointer-events: none; display: flex; align-items: center; justify-content: center; transition: transform .15s ease, box-shadow .15s ease; } /* Left arrow */ .ba-knob::before { content: ""; display: block; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-right: 9px solid #1a1206; margin-right: 6px; } /* Right arrow */ .ba-knob::after { content: ""; display: block; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 9px solid #1a1206; margin-left: 6px; } /* Active / dragging state */ .ba-pair.dragging .ba-knob { transform: translate(-50%, -50%) scale(1.13); box-shadow: 0 6px 24px rgba(212,175,55,.55), 0 0 0 2px rgba(212,175,55,.35); } /* ---- Labels ---- */ .ba-label { position: absolute; top: .55rem; z-index: 12; background: rgba(11, 9, 7, .82); border: 1px solid rgba(212, 175, 55, .55); color: #f3d77a; font-family: "Poppins", sans-serif; font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: .22rem .6rem; border-radius: 2px; pointer-events: none; } /* BEFORE label on LEFT */ .ba-label-before { left: .65rem; } /* AFTER label on RIGHT */ .ba-label-after { right: .65rem; } /* ---- Hint animation on first load ---- */ @keyframes ba-hint-handle { 0% { left: 50%; } 20% { left: 28%; } 60% { left: 72%; } 85% { left: 50%; } 100% { left: 50%; } } @keyframes ba-hint-before { 0% { clip-path: inset(0 50% 0 0); } 20% { clip-path: inset(0 72% 0 0); } 60% { clip-path: inset(0 28% 0 0); } 85% { clip-path: inset(0 50% 0 0); } 100% { clip-path: inset(0 50% 0 0); } } @keyframes ba-hint-after { 0% { clip-path: inset(0 0 0 50%); } 20% { clip-path: inset(0 0 0 28%); } 60% { clip-path: inset(0 0 0 72%); } 85% { clip-path: inset(0 0 0 50%); } 100% { clip-path: inset(0 0 0 50%); } } .ba-handle.ba-hint { animation: ba-hint-handle 1.6s ease-in-out 0.5s 1 forwards; } .ba-before-layer.ba-hint { animation: ba-hint-before 1.6s ease-in-out 0.5s 1 forwards; } .ba-after-layer.ba-hint { animation: ba-hint-after 1.6s ease-in-out 0.5s 1 forwards; } /* ---- Mobile ---- */ @media (max-width: 767.98px) { .ba-knob { width: 38px; height: 38px; } .ba-knob::before { border-top-width: 5px; border-bottom-width: 5px; border-right-width: 7px; margin-right: 4px; } .ba-knob::after { border-top-width: 5px; border-bottom-width: 5px; border-left-width: 7px; margin-left: 4px; } }