/* * Every rule below is scoped under .bis-gallery so the theme's global CSS * cannot bleed in, and this plugin cannot leak out and affect the rest of * the site. This stylesheet is the only CSS the plugin loads. */ .bis-gallery, .bis-gallery *, .bis-gallery *::before, .bis-gallery *::after { box-sizing: border-box; } .bis-gallery { width: 100%; max-width: 1140px; margin: 0 auto; padding: 48px 20px; text-align: center; line-height: normal; font-family: 'Montserrat', Arial, Helvetica, sans-serif; } .bis-gallery ul, .bis-gallery ol { list-style: none; margin: 0; padding: 0; } .bis-gallery__title { margin: 0 0 32px; font-size: 30px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: #17171a; } .bis-gallery__highlight { color: #d61f1f; } .bis-gallery__grid { display: grid; grid-template-columns: repeat(var(--bis-gallery-columns, 4), 1fr); gap: 4px; } .bis-gallery__item { appearance: none; display: block; position: relative; width: 100%; aspect-ratio: 1 / 1; margin: 0; padding: 0; border: 0; overflow: hidden; background: #f2f2f2; cursor: pointer; } .bis-gallery__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .bis-gallery__item:hover img { transform: scale(1.05); } .bis-gallery__item--hidden { display: none; } .bis-gallery__footer { margin-top: 36px; } .bis-gallery__load-more { appearance: none; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 15px 28px; border: 2px solid #d61f1f; border-radius: 0.25em; background: transparent; color: #d61f1f; font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease; } .bis-gallery__load-more svg { width: 16px; height: 16px; flex-shrink: 0; } .bis-gallery__load-more:hover, .bis-gallery__load-more:focus { background: #d61f1f; color: #ffffff; transform: translateY(-3px); box-shadow: 0 16px 40px rgba(20, 20, 30, 0.12); } @media (max-width: 782px) { .bis-gallery__grid { grid-template-columns: repeat(2, 1fr); } .bis-gallery__title { font-size: 22px; } } /* * Lightbox. Appended to (not inside .bis-gallery) so it can sit above * everything else on the page, so it gets its own scoped reset here too. * Structure, spacing, colors and icons match the site's existing gallery * lightbox pattern (.bk2-modal / .gallery-lightbox__* on the Brasil page). */ .bis-gallery-lightbox, .bis-gallery-lightbox *, .bis-gallery-lightbox *::before, .bis-gallery-lightbox *::after { box-sizing: border-box; } .bis-gallery-lightbox { position: fixed; inset: 0; z-index: 100000; display: none; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; background: rgba(20, 20, 30, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); font-family: 'Montserrat', Arial, Helvetica, sans-serif; } .bis-gallery-lightbox.is-open { display: flex; } .bis-gallery-lightbox__card { width: 100%; max-width: 820px; margin: auto; background: #ffffff; border-radius: 0.25em; box-shadow: 0 30px 80px rgba(20, 20, 30, 0.4); } .bis-gallery-lightbox__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 26px 16px; border-bottom: 1px solid #e7e7ea; } .bis-gallery-lightbox__eyebrow { color: #d61f1f; font-weight: 700; letter-spacing: 2px; font-size: 13px; text-transform: uppercase; margin-bottom: 10px; display: inline-block; } .bis-gallery-lightbox__close { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 6px; line-height: 0; color: #55565c; border-radius: 0.25em; flex-shrink: 0; transition: background 0.2s ease, color 0.2s ease; } .bis-gallery-lightbox__close svg { width: 20px; height: 20px; } .bis-gallery-lightbox__close:hover { color: #d61f1f; background: #f7f7f8; } .bis-gallery-lightbox__title { font-size: 20px; font-weight: 800; letter-spacing: 0.3px; line-height: 1.3; margin-top: 2px; color: #17171a; } .bis-gallery-lightbox__body { position: relative; display: flex; align-items: center; justify-content: center; padding: 26px; } .bis-gallery-lightbox__image { max-width: 100%; max-height: 70vh; display: block; border-radius: 0.25em; } .bis-gallery-lightbox__counter { text-align: center; padding: 0 26px 20px; font-size: 12px; font-weight: 700; color: #55565c; letter-spacing: 0.4px; } .bis-gallery-lightbox__nav { appearance: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; margin: 0; border: 1px solid #e7e7ea; border-radius: 50%; background: #ffffff; color: #17171a; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease; } .bis-gallery-lightbox__nav svg { width: 20px; height: 20px; } .bis-gallery-lightbox__nav:hover { background: #f7f7f8; } .bis-gallery-lightbox__nav--prev { left: 10px; } .bis-gallery-lightbox__nav--next { right: 10px; } .bis-gallery-lightbox__nav[hidden] { display: none; } @media (max-width: 700px) { .bis-gallery-lightbox__header { padding: 18px 20px 14px; } .bis-gallery-lightbox__title { font-size: 17px; } .bis-gallery-lightbox__body { padding: 18px; } .bis-gallery-lightbox__counter { padding: 0 18px 16px; } .bis-gallery-lightbox__nav { width: 36px; height: 36px; } .bis-gallery-lightbox__nav svg { width: 16px; height: 16px; } }