/* ===== Case Study Template Styles ===== Drop-in styles for any project case study page. Override --accent + --accent-tint on to recolor. */ .cs { --accent: #E03C31; --accent-tint: #fde9e7; --accent-tint-2: #fbd6d1; --accent-ink: #ffffff; } /* ===== Hero ===== */ .cs-hero { padding: clamp(36px, 5vw, 60px) var(--gutter) 0; } .cs-hero__crumbs { display: flex; gap: 14px; align-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: clamp(28px, 4vw, 48px); } .cs-hero__crumbs a:hover { color: var(--ink); } .cs-hero__crumbs span { color: var(--ink); } .cs-hero__title { font-size: clamp(48px, 8vw, 116px); line-height: 0.95; letter-spacing: -0.04em; font-weight: 400; max-width: 14ch; margin: 0 0 24px; } .cs-hero__title em { font-family: "Newsreader", Georgia, serif; font-style: italic; color: var(--accent); font-weight: 300; } .cs-hero__sub { font-size: clamp(18px, 1.6vw, 22px); color: var(--ink-2); max-width: 56ch; line-height: 1.5; margin: 0 0 clamp(40px, 5vw, 60px); } .cs-hero__media { width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--accent-tint); position: relative; margin-bottom: clamp(20px, 3vw, 40px); } .cs-hero__media .ph { position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent-tint) 0%, var(--accent-tint-2) 100%); } /* Hero variant: split (image + title side by side) */ .cs-hero[data-variant="split"] { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-top: clamp(48px, 7vw, 90px); padding-bottom: clamp(40px, 6vw, 80px); } .cs-hero[data-variant="split"] .cs-hero__media { aspect-ratio: 4 / 5; margin-bottom: 0; } .cs-hero[data-variant="split"] .cs-hero__title { font-size: clamp(40px, 5.6vw, 76px); } /* Hero variant: bleed (full-width hero image with title overlaid) */ .cs-hero[data-variant="bleed"] { padding: 0; } .cs-hero[data-variant="bleed"] .cs-hero__crumbs { padding: clamp(36px, 5vw, 60px) var(--gutter) 0; margin-bottom: 0; } .cs-hero[data-variant="bleed"] .cs-hero__title-wrap { padding: clamp(40px, 6vw, 80px) var(--gutter); } .cs-hero[data-variant="bleed"] .cs-hero__media { aspect-ratio: 21 / 9; border-radius: 0; margin-bottom: 0; } /* ===== Info strip (year, role, client, about) ===== */ .cs-info { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(40px, 5vw, 64px) var(--gutter); } .cs-info__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .cs-info__item h4 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); font-weight: 500; margin: 0 0 12px; } .cs-info__item p { font-size: 17px; color: var(--ink); margin: 0; line-height: 1.45; letter-spacing: -0.01em; } .cs-info__item--wide { grid-column: span 2; } .cs-info__item--wide p { color: var(--ink-2); font-size: 15px; line-height: 1.55; } @media (max-width: 800px) { .cs-info__grid { grid-template-columns: 1fr 1fr; } .cs-info__item--wide { grid-column: span 2; } } /* ===== Logos strip ===== */ .cs-logos { padding: clamp(40px, 5vw, 60px) 0; background: var(--paper-2); border-bottom: 1px solid var(--line); overflow: hidden; } .cs-logos__label { padding: 0 var(--gutter); margin-bottom: 24px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } .cs-logos__track-wrap { overflow: hidden; position: relative; } .cs-logos__track-wrap::before, .cs-logos__track-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .cs-logos__track-wrap::before { left: 0; background: linear-gradient(to right, var(--paper-2), transparent); } .cs-logos__track-wrap::after { right: 0; background: linear-gradient(to left, var(--paper-2), transparent); } .cs-logos__track { display: flex; gap: 20px; align-items: center; animation: logoScroll 30s linear infinite; width: max-content; padding: 0 var(--gutter); } .cs-logo { flex: 0 0 auto; height: 56px; min-width: 160px; display: flex; align-items: center; justify-content: center; padding: 0 8px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; } .cs-logo strong { color: var(--ink); font-weight: 500; letter-spacing: -0.01em; text-transform: none; font-family: var(--font-sans); font-size: 16px; } @keyframes logoScroll { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 30px)); } } /* ===== Overview ===== */ .cs-overview { padding: clamp(80px, 11vw, 140px) var(--gutter); } .cs-overview__inner { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; max-width: 1100px; margin: 0 auto; } .cs-overview__label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); padding-top: 8px; } .cs-overview__body { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.4; letter-spacing: -0.015em; color: var(--ink); font-weight: 300; } .cs-overview__body em { font-family: "Newsreader", Georgia, serif; font-style: italic; color: var(--accent); font-weight: 300; } @media (max-width: 800px) { .cs-overview__inner { grid-template-columns: 1fr; gap: 24px; } } /* ===== Image gallery ===== */ .cs-gallery { padding: 0 var(--gutter) clamp(80px, 10vw, 120px); } .cs-gallery__head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; } .cs-gallery__title { font-size: clamp(24px, 2.8vw, 36px); letter-spacing: -0.025em; font-weight: 400; margin: 0; } .cs-gallery__meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; } .cs-gallery__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .cs-gallery__item { border-radius: 12px; overflow: hidden; position: relative; background: var(--accent-tint); } .cs-gallery__item .ph { position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent-tint) 0%, var(--accent-tint-2) 100%); } .cs-gallery__item--a { grid-column: span 4; aspect-ratio: 16 / 10; } .cs-gallery__item--b { grid-column: span 2; aspect-ratio: 4 / 5; } .cs-gallery__item--c { grid-column: span 2; aspect-ratio: 4 / 5; } .cs-gallery__item--d { grid-column: span 2; aspect-ratio: 1 / 1; } .cs-gallery__item--e { grid-column: span 2; aspect-ratio: 1 / 1; } @media (max-width: 800px) { .cs-gallery__grid { grid-template-columns: 1fr 1fr; } .cs-gallery__item--a, .cs-gallery__item--b, .cs-gallery__item--c, .cs-gallery__item--d, .cs-gallery__item--e { grid-column: span 2; aspect-ratio: 4 / 3; } } /* ===== Summary block ===== */ .cs-summary { padding: clamp(60px, 9vw, 110px) var(--gutter); background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .cs-summary__inner { max-width: 1100px; margin: 0 auto; } .cs-summary__label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 24px; } .cs-summary__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 64px; margin-top: 48px; } .cs-summary__block h3 { font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -0.015em; font-weight: 500; margin: 0 0 12px; display: flex; align-items: baseline; gap: 12px; } .cs-summary__block h3::before { content: attr(data-num); font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.06em; font-weight: 500; } .cs-summary__block p { font-size: 16px; color: var(--ink-2); line-height: 1.6; margin: 0; max-width: 50ch; } .cs-summary__block ul { margin: 0; padding: 0; list-style: none; } .cs-summary__block li { font-size: 16px; color: var(--ink-2); line-height: 1.5; padding: 12px 0 12px 18px; border-bottom: 1px solid var(--line); position: relative; } .cs-summary__block li::before { content: "—"; position: absolute; left: 0; color: var(--accent); } .cs-summary__block li:last-child { border-bottom: none; } @media (max-width: 800px) { .cs-summary__grid { grid-template-columns: 1fr; gap: 32px; } } /* ===== Full-width image break ===== */ .cs-break { width: 100%; aspect-ratio: 21 / 9; position: relative; background: var(--accent-tint); } .cs-break .ph { position: absolute; inset: 0; background: linear-gradient(135deg, var(--accent-tint) 0%, var(--accent-tint-2) 100%); } .cs-break--tall { aspect-ratio: 16 / 9; } /* ===== Feature highlights ===== */ .cs-features { padding: clamp(80px, 11vw, 140px) var(--gutter); } .cs-features__head { max-width: 760px; margin-bottom: clamp(48px, 7vw, 80px); } .cs-features__label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 16px; } .cs-features__title { font-size: clamp(32px, 4.4vw, 56px); letter-spacing: -0.03em; line-height: 1.05; font-weight: 400; } .cs-features__title em { font-family: "Newsreader", Georgia, serif; font-style: italic; color: var(--accent); font-weight: 300; } .cs-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--line); align-items: start; } .cs-feature:nth-child(even) { /* alternate image side */ } .cs-feature:nth-child(even) .cs-feature__copy { order: 2; } .cs-feature:nth-child(even) .cs-feature__media { order: 1; } .cs-feature__num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: 0.06em; margin-bottom: 16px; } .cs-feature__title { font-size: clamp(24px, 2.6vw, 34px); letter-spacing: -0.02em; line-height: 1.15; font-weight: 500; margin: 0 0 24px; max-width: 22ch; } .cs-feature__row { margin-bottom: 22px; } .cs-feature__row h4 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); font-weight: 500; margin: 0 0 8px; } .cs-feature__row p { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 52ch; } .cs-feature__metric { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 16px; background: var(--accent-tint); border-radius: 999px; color: var(--accent); font-weight: 500; font-size: 14px; } .cs-feature__metric strong { font-family: var(--font-mono); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--accent); } /* Before / After media */ .cs-feature__media { display: grid; grid-template-rows: auto auto; gap: 12px; } .ba { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; } .ba__col { display: flex; flex-direction: column; gap: 8px; } .ba__label { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); } .ba__label .badge { padding: 2px 8px; border-radius: 4px; background: var(--line-2); color: var(--ink-2); font-size: 10px; } .ba__col--after .badge { background: var(--accent-tint); color: var(--accent); } .ba__img { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; position: relative; background: var(--line-2); } .ba__img .ph { position: absolute; inset: 0; } .ba__img--after .ph { background: linear-gradient(135deg, var(--accent-tint), var(--accent-tint-2)); } @media (max-width: 800px) { .cs-feature { grid-template-columns: 1fr; gap: 32px; } .cs-feature:nth-child(even) .cs-feature__copy { order: 1; } .cs-feature:nth-child(even) .cs-feature__media { order: 2; } } /* ===== Process / Research / Challenges / Results / Learnings ===== */ .cs-section { padding: clamp(80px, 11vw, 130px) var(--gutter); } .cs-section--alt { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .cs-section__head { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; margin-bottom: clamp(40px, 5vw, 64px); max-width: 1200px; margin-left: auto; margin-right: auto; } .cs-section__num { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } .cs-section__title { font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.03em; line-height: 1.05; font-weight: 400; margin: 0; } .cs-section__title em { font-family: "Newsreader", Georgia, serif; font-style: italic; color: var(--accent); font-weight: 300; } .cs-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto 56px; } .cs-process__step { padding: 24px; border-radius: 14px; border: 1px solid var(--line); background: #fff; position: relative; } .cs-section--alt .cs-process__step { background: #fff; } .cs-process__step::before { content: counter(step, decimal-leading-zero); counter-increment: step; font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: 0.06em; } .cs-process { counter-reset: step; } .cs-process__step h4 { font-size: 18px; font-weight: 500; letter-spacing: -0.015em; margin: 14px 0 10px; } .cs-process__step p { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0; } .cs-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 64px; max-width: 1200px; margin: 0 auto; } .cs-detail h4 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin: 0 0 14px; font-weight: 500; } .cs-detail h3 { font-size: 22px; letter-spacing: -0.015em; font-weight: 500; margin: 0 0 12px; } .cs-detail p { font-size: 16px; color: var(--ink-2); line-height: 1.6; margin: 0 0 16px; } @media (max-width: 800px) { .cs-process { grid-template-columns: 1fr 1fr; } .cs-detail-grid { grid-template-columns: 1fr; } .cs-section__head { grid-template-columns: 1fr; gap: 16px; } } /* ===== Pull-quote / metrics row ===== */ .cs-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto; padding-top: 32px; } .cs-metrics__item { padding: 28px 24px; border-radius: 14px; background: var(--accent-tint); border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent); } .cs-metrics__num { font-size: clamp(36px, 4.4vw, 56px); letter-spacing: -0.04em; line-height: 1; color: var(--accent); font-weight: 400; margin-bottom: 12px; } .cs-metrics__label { font-size: 14px; color: var(--ink-2); line-height: 1.4; max-width: 22ch; } @media (max-width: 800px) { .cs-metrics { grid-template-columns: 1fr 1fr; } } /* ===== Challenges (zebra list) ===== */ .cs-challenges { max-width: 1100px; margin: 0 auto; } .cs-challenge { display: grid; grid-template-columns: 80px 1fr 1.4fr; gap: 32px; padding: 32px 0; border-top: 1px solid var(--line); align-items: start; } .cs-challenge:last-child { border-bottom: 1px solid var(--line); } .cs-challenge__num { font-family: var(--font-mono); font-size: 12px; color: var(--muted); letter-spacing: 0.06em; padding-top: 4px; } .cs-challenge__title { font-size: 20px; letter-spacing: -0.015em; font-weight: 500; line-height: 1.25; margin: 0; } .cs-challenge__body p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 10px; } .cs-challenge__solution { font-size: 14px; color: var(--accent); font-weight: 500; display: flex; align-items: baseline; gap: 8px; } .cs-challenge__solution::before { content: "→"; font-family: var(--font-mono); } @media (max-width: 800px) { .cs-challenge { grid-template-columns: 1fr; gap: 8px; } } /* ===== Footer / next projects ===== */ .cs-foot { padding: clamp(80px, 11vw, 130px) var(--gutter) clamp(40px, 5vw, 60px); background: #0e0e0e; color: #f4f1ec; } .cs-foot__head { display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(48px, 6vw, 72px); } .cs-foot__title { font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.03em; line-height: 1.05; font-weight: 300; max-width: 14ch; } .cs-foot__title em { font-family: "Newsreader", Georgia, serif; font-style: italic; color: var(--accent); font-weight: 300; } .cs-foot__cta { padding: 14px 22px; border-radius: 999px; background: #f4f1ec; color: #0e0e0e; font-weight: 500; font-size: 15px; display: inline-flex; align-items: center; gap: 10px; transition: transform .15s, background .15s; } .cs-foot__cta:hover { transform: translateY(-1px); background: #fff; } .cs-foot__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 60px; } .cs-tile { display: block; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s; } .cs-tile:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.2); } .cs-tile__media { aspect-ratio: 16 / 10; background: rgba(255,255,255,0.06); position: relative; overflow: hidden; } .cs-tile__media .ph { position: absolute; inset: 0; color: rgba(255,255,255,0.3); } .cs-tile__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .cs-tile__body { padding: 18px 20px 22px; display: flex; justify-content: space-between; align-items: baseline; } .cs-tile__title { font-size: 18px; font-weight: 500; letter-spacing: -0.015em; } .cs-tile__year { font-family: var(--font-mono); font-size: 12px; color: rgba(244,241,236,0.5); } .cs-tile__sub { font-size: 13px; color: rgba(244,241,236,0.55); margin-top: 4px; width: 100%; } .cs-tile__body { flex-wrap: wrap; } /* Per-tile accents */ .cs-tile[data-accent="nova"] .cs-tile__media .ph { background: linear-gradient(135deg, #4a1d18, #2a0e0a); } .cs-tile[data-accent="clearsign"] .cs-tile__media .ph { background: linear-gradient(135deg, #1a2a55, #0d1530); } .cs-tile[data-accent="bgrs"] .cs-tile__media .ph { background: linear-gradient(135deg, #103838, #061c1c); } .cs-tile[data-accent="promopages"] .cs-tile__media .ph { background: linear-gradient(135deg, #2c1f5b, #150d36); } .cs-foot__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: rgba(244,241,236,0.5); } @media (max-width: 800px) { .cs-foot__grid { grid-template-columns: 1fr; } } /* ===== Anchor offset for sticky nav ===== */ .cs-section, .cs-features, .cs-summary, .cs-overview, .cs-minis { scroll-margin-top: 80px; } /* ===== Mini case studies (collapsible) ===== */ .cs-minis { padding: clamp(60px, 9vw, 110px) var(--gutter); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .cs-minis__head { max-width: 1100px; margin: 0 auto 48px; } .cs-minis__label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-bottom: 22px; } .cs-minis__title { font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -0.025em; line-height: 1.08; font-weight: 400; max-width: 22ch; } .cs-minis__title em { font-family: "Newsreader", Georgia, serif; font-style: italic; color: var(--accent); font-weight: 300; } .cs-minis__list { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .cs-mini { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); overflow: hidden; transition: border-color .2s, box-shadow .2s; } .cs-mini[open] { border-color: color-mix(in oklab, var(--accent) 30%, var(--line)); box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 18px 40px -28px rgba(0,0,0,0.18); } .cs-mini__summary { list-style: none; cursor: pointer; padding: 28px 32px; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; -webkit-tap-highlight-color: transparent; } .cs-mini__summary::-webkit-details-marker { display: none; } .cs-mini__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); min-width: 60px; } .cs-mini__title { font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; font-weight: 500; line-height: 1.2; } .cs-mini__title small { display: block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 400; margin-top: 6px; } .cs-mini__caret { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: transform .25s ease, background .2s, border-color .2s; flex-shrink: 0; } .cs-mini__caret svg { width: 14px; height: 14px; transition: transform .25s ease; } .cs-mini[open] .cs-mini__caret { background: var(--accent); border-color: var(--accent); color: white; } .cs-mini[open] .cs-mini__caret svg { transform: rotate(45deg); } .cs-mini__body { padding: 0 32px 36px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px 56px; border-top: 1px solid var(--line); padding-top: 36px; } .cs-mini__copy { display: flex; flex-direction: column; gap: 28px; } .cs-mini__row h4 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin: 0 0 8px; font-weight: 500; } .cs-mini__row p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0; } .cs-mini__row ul { list-style: none; margin: 0; padding: 0; } .cs-mini__row li { font-size: 15.5px; color: var(--ink-2); padding: 6px 0 6px 22px; position: relative; line-height: 1.55; } .cs-mini__row li::before { content: ""; position: absolute; left: 0; top: 13px; width: 12px; height: 1px; background: var(--accent); } .cs-mini__principle { margin-top: 4px; padding: 14px 18px; border-left: 2px solid var(--accent); background: var(--accent-tint); border-radius: 0 8px 8px 0; font-size: 14.5px; color: var(--ink); line-height: 1.5; } .cs-mini__principle strong { display: block; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 6px; font-weight: 500; } .cs-mini__media { align-self: stretch; min-height: 320px; border-radius: 12px; overflow: hidden; position: relative; } .cs-mini__media .ph { position: absolute; inset: 0; } @media (max-width: 800px) { .cs-mini__summary { grid-template-columns: auto 1fr auto; padding: 22px 22px; gap: 16px; } .cs-mini__num { min-width: 0; } .cs-mini__body { grid-template-columns: 1fr; padding: 28px 22px 28px; gap: 28px; } .cs-mini__media { min-height: 220px; } } /* ============================================================ BEFORE / AFTER + MULTI carousel — shared feature media Behavior: a "frame" stack of slides; only one is visible at a time. Toggle/next/prev buttons live below. - Two-slide variant (before/after): use [data-state="after"] and a .ba-car__toggle button. (Default mode.) - N-slide variant (multi): use [data-active="N"] and prev/next buttons + dots. ============================================================ */ .ba-car { position: relative; isolation: isolate; } .ba-car__frame { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line); } .ba-car__frame--phone { aspect-ratio: 9 / 16; max-width: 280px; margin: 0 auto; border-radius: 32px; border: 8px solid #111; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.25); } .ba-car__slide { position: absolute; inset: 0; transition: opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1); } .ba-car__slide .ph { position: absolute; inset: 0; } /* Two-slide before/after */ .ba-car__slide--before { opacity: 0; transform: translateX(-6%); pointer-events: none; } .ba-car__slide--after { opacity: 1; transform: translateX(0); } .ba-car[data-state="before"] .ba-car__slide--before { opacity: 1; transform: translateX(0); pointer-events: auto; } .ba-car[data-state="before"] .ba-car__slide--after { opacity: 0; transform: translateX(6%); pointer-events: none; } /* Multi-slide variant: hide all by default, show the active one */ .ba-car[data-mode="multi"] .ba-car__slide { opacity: 0; transform: translateX(6%); pointer-events: none; } .ba-car[data-mode="multi"] .ba-car__slide.is-active { opacity: 1; transform: translateX(0); pointer-events: auto; } /* Tag in upper-left of the visible frame */ .ba-car__tag { position: absolute; top: 14px; left: 14px; z-index: 3; font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink); background: rgba(255,255,255,0.92); border: 1px solid var(--line); padding: 5px 10px; border-radius: 4px; } .ba-car[data-state="before"] .ba-car__tag::before { content: "Before"; } .ba-car:not([data-mode="multi"]):not([data-state="before"]) .ba-car__tag::before { content: "After"; } /* Multi-mode tag content is set inline per slide via data-tag */ .ba-car[data-mode="multi"] .ba-car__tag::before { content: attr(data-current-tag); } /* Toggle / nav row below the frame */ .ba-car__controls { margin-top: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .ba-car__toggle { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink); cursor: pointer; transition: border-color .2s, background .2s, color .2s; } .ba-car__toggle:hover { border-color: var(--accent); color: var(--accent); } .ba-car__toggle svg { width: 14px; height: 14px; transition: transform .35s ease; } .ba-car[data-state="before"] .ba-car__toggle svg { transform: rotate(180deg); } .ba-car__toggle .label-after, .ba-car__toggle .label-before { display: none; } .ba-car:not([data-state="before"]) .ba-car__toggle .label-after { display: inline; } .ba-car[data-state="before"] .ba-car__toggle .label-before { display: inline; } /* Multi-slide controls — circular prev/next buttons */ .ba-car__nav { display: inline-flex; gap: 6px; } .ba-car__nav button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: border-color .2s, color .2s; padding: 0; } .ba-car__nav button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); } .ba-car__nav button:disabled { opacity: .35; cursor: not-allowed; } .ba-car__nav svg { width: 14px; height: 14px; } .ba-car__count { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } .ba-car__count strong { color: var(--ink); font-weight: 500; } .ba-car__dots { display: inline-flex; gap: 6px; align-items: center; } .ba-car__dots span, .ba-car__dots button { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); border: none; padding: 0; cursor: pointer; transition: background .25s, width .25s, border-radius .25s; } .ba-car[data-state="before"] .ba-car__dots span:first-child, .ba-car[data-state="before"] .ba-car__dots button:first-child { background: var(--accent); width: 18px; border-radius: 3px; } .ba-car:not([data-mode="multi"]):not([data-state="before"]) .ba-car__dots span:last-child, .ba-car:not([data-mode="multi"]):not([data-state="before"]) .ba-car__dots button:last-child { background: var(--accent); width: 18px; border-radius: 3px; } .ba-car[data-mode="multi"] .ba-car__dots button.is-active { background: var(--accent); width: 18px; border-radius: 3px; }