/* Before & After Gallery module * Standalone styles. Every selector is scoped under `.module--before-after-gallery` * so styles cannot leak to other modules — except the `.bag-lightbox` overlay, * which is appended to by JS and therefore lives outside the module's * DOM subtree. Lightbox classes are uniquely prefixed (`bag-lightbox*`). * * CSS custom properties at the top let you tune brand colors without touching * the rest of the file. */ .module--before-after-gallery { --bag-pill-bg: #ffffff; --bag-pill-border: #e91e63; /* pink outline */ --bag-pill-text: #6a1b9a; /* purple text */ --bag-pill-active-bg: #6a1b9a; /* purple fill when active */ --bag-pill-active-border: #6a1b9a; --bag-pill-active-text: #ffffff; --bag-pill-hover-bg: #fce4ec; --bag-gap: 24px; --bag-radius: 999px; --bag-card-radius: 6px; --bag-image-ratio: 4 / 5; /* preview aspect ratio (matches ~374x468 source) */ padding-top: 40px; padding-bottom: 40px; } .module--before-after-gallery .before-after-gallery__intro { text-align: center; max-width: 800px; margin: 0 auto 32px; } /* Pill filter buttons ----------------------------------------------- */ .module--before-after-gallery .before-after-gallery__filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 auto 32px; } .module--before-after-gallery .bag-pill { appearance: none; -webkit-appearance: none; cursor: pointer; background: var(--bag-pill-bg); color: var(--bag-pill-text); border: 2px solid var(--bag-pill-border); border-radius: var(--bag-radius); padding: 10px 22px; font: inherit; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease; } .module--before-after-gallery .bag-pill:hover, .module--before-after-gallery .bag-pill:focus-visible { background: var(--bag-pill-hover-bg); outline: none; } .module--before-after-gallery .bag-pill:focus-visible { box-shadow: 0 0 0 3px rgba(106, 27, 154, 0.25); } .module--before-after-gallery .bag-pill--active, .module--before-after-gallery .bag-pill[aria-pressed="true"] { background: var(--bag-pill-active-bg); color: var(--bag-pill-active-text); border-color: var(--bag-pill-active-border); } /* Grid + cases ----------------------------------------------- */ .module--before-after-gallery .before-after-gallery__grid { display: grid; gap: var(--bag-gap); grid-template-columns: 1fr; } @media (min-width: 600px) { .module--before-after-gallery .before-after-gallery__grid--cols-2, .module--before-after-gallery .before-after-gallery__grid--cols-3, .module--before-after-gallery .before-after-gallery__grid--cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .module--before-after-gallery .before-after-gallery__grid--cols-3 { grid-template-columns: repeat(3, 1fr); } .module--before-after-gallery .before-after-gallery__grid--cols-4 { grid-template-columns: repeat(4, 1fr); } } .module--before-after-gallery .bag-case { display: flex; flex-direction: column; background: transparent; transition: opacity 0.25s ease, transform 0.25s ease; } /* 1-column layout: image left, text right, 1:2 ratio. Stacks on small viewports for readability. */ @media (min-width: 700px) { .module--before-after-gallery .before-after-gallery__grid--cols-1 .bag-case { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: start; } .module--before-after-gallery .before-after-gallery__grid--cols-1 .bag-case__content { margin-top: 0; } } .module--before-after-gallery .bag-case[hidden] { display: none; } .module--before-after-gallery .bag-case__image-link { display: block; overflow: hidden; border-radius: var(--bag-card-radius); background: #f5f5f5; line-height: 0; cursor: zoom-in; aspect-ratio: var(--bag-image-ratio); } .module--before-after-gallery .bag-case__image-link:focus-visible { outline: 3px solid var(--bag-pill-active-bg); outline-offset: 3px; } .module--before-after-gallery .bag-case__image { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform 0.4s ease; } .module--before-after-gallery .bag-case__image-link:hover .bag-case__image, .module--before-after-gallery .bag-case__image-link:focus-visible .bag-case__image { transform: scale(1.03); } .module--before-after-gallery .bag-case__content { margin-top: 14px; font-size: 0.95em; line-height: 1.5; } .module--before-after-gallery .bag-case__content :first-child { margin-top: 0; } .module--before-after-gallery .bag-case__content :last-child { margin-bottom: 0; } /* Lightbox (intentionally NOT scoped under .module--before-after-gallery — the overlay is appended to by JS so it can cover the whole viewport). All lightbox classes use the `bag-lightbox` prefix to avoid global collisions. ----------------------------------------------- */ .bag-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.88); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .bag-lightbox.is-open { opacity: 1; pointer-events: auto; } .bag-lightbox__stage { position: relative; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .bag-lightbox__image { max-width: 95vw; max-height: calc(90vh - 60px); object-fit: contain; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); background: #111; } .bag-lightbox__caption { color: #fff; text-align: center; margin-top: 12px; font-size: 0.95rem; max-width: 80ch; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .bag-lightbox__btn { appearance: none; -webkit-appearance: none; background: rgba(0, 0, 0, 0.6); border: 2px solid rgba(255, 255, 255, 0.6); color: #fff; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease; } .bag-lightbox__btn:hover { background: rgba(0, 0, 0, 0.8); border-color: #fff; } .bag-lightbox__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; background: rgba(0, 0, 0, 0.8); } .bag-lightbox__close { position: absolute; top: 16px; right: 16px; } .bag-lightbox__prev, .bag-lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); } .bag-lightbox__prev { left: 16px; } .bag-lightbox__next { right: 16px; } @media (max-width: 600px) { .bag-lightbox__prev, .bag-lightbox__next { top: auto; bottom: 16px; transform: none; } .bag-lightbox__prev { left: 16px; } .bag-lightbox__next { right: 16px; } } /* Honor users who prefer reduced motion. */ @media (prefers-reduced-motion: reduce) { .module--before-after-gallery .bag-pill, .module--before-after-gallery .bag-case, .module--before-after-gallery .bag-case__image, .bag-lightbox, .bag-lightbox__btn { transition: none !important; } .module--before-after-gallery .bag-case__image-link:hover .bag-case__image, .module--before-after-gallery .bag-case__image-link:focus-visible .bag-case__image { transform: none; } }