/* =================================================================
BEFORE / AFTER — multi-job carousel
Drop-in for 2gether2shine. Shared by /en and /de.
Add to AFTER home.css:
(en)
(de)
================================================================= */
.ba {
position: relative;
background: var(--cream, #F7EFE0);
padding: 92px var(--gutter, 56px);
overflow: hidden;
}
.ba__inner { max-width: 1120px; margin: 0 auto; position: relative; }
/* ── Head ───────────────────────────────────────────────── */
.ba__head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 32px; flex-wrap: wrap;
margin-bottom: 34px;
}
.ba__head-copy { max-width: 620px; }
.ba__head .section-title { margin: 0; }
.ba__head .section-sub { margin-top: 12px; }
/* Arrows + counter */
.ba__nav {
display: flex; align-items: center; gap: 12px;
flex-shrink: 0;
}
.ba__arrow {
width: 46px; height: 46px;
border-radius: 999px;
border: 1.5px solid var(--ink, #1A1A2E);
background: var(--paper, #fff);
color: var(--ink, #1A1A2E);
display: grid; place-items: center;
cursor: pointer;
transition: background .15s ease, transform .15s ease, opacity .15s ease;
}
.ba__arrow svg { width: 17px; height: 17px; }
.ba__arrow:hover { background: var(--ink, #1A1A2E); color: #fff; }
.ba__arrow:disabled { opacity: .3; cursor: not-allowed; }
.ba__arrow:disabled:hover { background: var(--paper, #fff); color: var(--ink, #1A1A2E); }
.ba__counter {
font-family: var(--f-display, 'Bricolage Grotesque', sans-serif);
font-weight: 700; font-size: 15px;
color: var(--ink, #1A1A2E);
min-width: 52px; text-align: center;
font-variant-numeric: tabular-nums;
}
.ba__counter em { font-style: normal; color: var(--ink-soft, #5E5E70); font-weight: 500; }
/* ── Viewport / track ───────────────────────────────────── */
.ba__viewport { overflow: hidden; border-radius: var(--radius-lg, 24px); }
.ba__track {
display: flex;
transition: transform .55s cubic-bezier(.3,.8,.3,1);
will-change: transform;
}
.ba__slide {
flex: 0 0 100%;
min-width: 0;
padding-right: 0;
}
/* ── Stage (the comparison) ─────────────────────────────── */
.ba__stage {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: var(--radius-lg, 24px);
border: 1.5px solid var(--ink, #1A1A2E);
background: #e6e0d4;
cursor: ew-resize;
user-select: none;
touch-action: pan-y;
box-shadow: 0 26px 54px -30px rgba(26,26,46,.42);
}
@media (max-width: 700px) { .ba__stage { aspect-ratio: 4 / 3; } }
.ba__layer { position: absolute; inset: 0; }
.ba__layer img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
/* "After" is clipped from the left edge of the handle */
.ba__layer--after { clip-path: inset(0 0 0 var(--ba-pos, 50%)); }
/* TEMPORARY: simulates a dirty "before" from a single photo.
Delete this class from the markup once real before shots exist. */
.ba__layer--before.is-simulated img {
filter: sepia(.34) saturate(.5) brightness(.74) contrast(1.08);
}
/* Tags */
.ba__tag {
position: absolute; top: 16px; z-index: 3;
padding: 7px 15px; border-radius: 999px;
font-size: 11px; font-weight: 800;
letter-spacing: 1.5px; text-transform: uppercase;
pointer-events: none;
}
.ba__tag--before { left: 16px; background: rgba(14,14,26,.8); color: #fff; }
.ba__tag--after { right: 16px; background: var(--accent, #5CC85C); color: #fff; }
/* Handle */
.ba__handle {
position: absolute; top: 0; bottom: 0;
left: var(--ba-pos, 50%);
width: 3px; background: #fff;
z-index: 4; pointer-events: none;
box-shadow: 0 0 18px rgba(0,0,0,.42);
}
.ba__grip {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 50px; height: 50px; border-radius: 999px;
background: #fff; border: 2.5px solid var(--ink, #1A1A2E);
display: grid; place-items: center;
box-shadow: 0 8px 22px -6px rgba(0,0,0,.4);
}
.ba__grip::before, .ba__grip::after {
content: ''; position: absolute;
width: 0; height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
}
.ba__grip::before { left: 11px; border-right: 8px solid var(--ink, #1A1A2E); }
.ba__grip::after { right: 11px; border-left: 8px solid var(--ink, #1A1A2E); }
/* ── Slide caption ──────────────────────────────────────── */
.ba__meta {
display: flex; align-items: center; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
padding: 18px 4px 0;
}
.ba__meta-main strong {
display: block;
font-family: var(--f-display, 'Bricolage Grotesque', sans-serif);
font-weight: 700; font-size: 19px;
color: var(--ink, #1A1A2E);
letter-spacing: -.3px;
}
.ba__meta-main span {
display: block;
font-size: 13.5px; color: var(--ink-soft, #5E5E70);
margin-top: 3px;
}
.ba__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ba__chip {
padding: 5px 12px; border-radius: 999px;
background: var(--paper, #fff);
border: 1px solid var(--line, #E8DFD0);
font-size: 12px; font-weight: 600;
color: var(--ink, #1A1A2E);
}
/* ── Dots + hint ────────────────────────────────────────── */
.ba__foot {
display: flex; align-items: center; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
margin-top: 24px;
}
.ba__dots { display: flex; gap: 8px; }
.ba__dot {
width: 9px; height: 9px; border-radius: 999px;
border: none; padding: 0;
background: #cdc3b0; cursor: pointer;
transition: width .25s ease, background .2s ease;
}
.ba__dot.is-active { width: 30px; background: var(--ink, #1A1A2E); }
.ba__hint {
font-size: 13px; color: var(--ink-soft, #5E5E70);
}
.ba__hint strong { color: var(--ink, #1A1A2E); }
/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 700px) {
.ba { padding-left: 20px; padding-right: 20px; padding-top: 66px; padding-bottom: 70px; }
.ba__head { margin-bottom: 26px; }
.ba__nav { order: 3; width: 100%; justify-content: flex-start; }
.ba__meta { flex-direction: column; align-items: flex-start; gap: 12px; }
.ba__grip { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
.ba__track { transition: none; }
}