.yd_before_after {
--ydba-height: 420px;
--ydba-radius: 12px;
--ydba-pos: 50%;
--ydba-handle-bg: #ffffff;
--ydba-handle-color: #111111;
--ydba-divider: #ffffff;
--ydba-label: #ffffff;
--ydba-max-w: 100%;
--ydba-block-bg: transparent;
--ydba-pad-t: 28px;
--ydba-pad-b: 40px;
padding-top: var(--ydba-pad-t);
padding-bottom: var(--ydba-pad-b);
margin-bottom: 40px;
}
.yd_before_after.has-block-bg {
background-color: var(--ydba-block-bg);
}
.yd_before_after.is-full-bleed {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
}
.yd_before_after__frame {
position: relative;
width: 100%;
max-width: var(--ydba-max-w);
margin: 0 auto;
height: var(--ydba-height);
border-radius: var(--ydba-radius);
overflow: hidden;
background: #e5e7eb;
user-select: none;
touch-action: none;
cursor: ew-resize;
}
.yd_before_after__layer {
position: absolute;
inset: 0;
overflow: hidden;
}
.yd_before_after__layer--before {
width: 100%;
z-index: 2; clip-path: inset(0 calc(100% - var(--ydba-pos)) 0 0);
}
.yd_before_after__layer--after {
z-index: 1;
}
.yd_before_after__img,
.yd_before_after__placeholder {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.yd_before_after__placeholder {
background: linear-gradient(135deg, #f3f4f6, #d1d5db);
}
.yd_before_after__label {
position: absolute;
bottom: 14px;
z-index: 3;
color: var(--ydba-label);
font-size: 15px;
font-weight: 600;
line-height: 1.3;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
max-width: min(46%, 280px);
pointer-events: none;
}
.yd_before_after__label--before {
left: 16px;
}
.yd_before_after__label--after {
right: 16px;
text-align: right;
}
.yd_before_after__divider {
position: absolute;
top: 0;
bottom: 0;
left: var(--ydba-pos);
width: 2px;
margin-left: -1px;
background: var(--ydba-divider);
z-index: 4;
pointer-events: none;
}
.yd_before_after__handle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border: 0;
border-radius: 999px;
background: var(--ydba-handle-bg);
color: var(--ydba-handle-color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: ew-resize;
pointer-events: auto;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
padding: 0;
}
.yd_before_after__handle svg {
display: block;
}
.yd_before_after__range {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: ew-resize;
z-index: 5;
appearance: none;
-webkit-appearance: none;
background: transparent;
}
.yd_before_after__range::-webkit-slider-thumb {
-webkit-appearance: none;
width: 44px;
height: 100%;
background: transparent;
border: 0;
cursor: ew-resize;
}
.yd_before_after__range::-moz-range-thumb {
width: 44px;
height: 100%;
background: transparent;
border: 0;
cursor: ew-resize;
}
@media (max-width: 782px) {
.yd_before_after {
--ydba-pad-t: 20px;
--ydba-pad-b: 32px;
}
.yd_before_after.is-full-bleed {
padding-left: 12px;
padding-right: 12px;
}
.yd_before_after__frame {
height: min(var(--ydba-height), 68vw);
}
.yd_before_after__label {
font-size: 13px;
bottom: 10px;
}
.yd_before_after__label--before {
left: 10px;
}
.yd_before_after__label--after {
right: 10px;
}
.yd_before_after__handle {
width: 40px;
height: 40px;
}
}