/* ── Sift Gallery — Front-end Styles ── */ /* ── Masonry grid via CSS columns ── */ .sg-gallery { columns: 4; column-gap: 10px; width: 100%; /* Establish own stacking context so internal z-indexes don't escape */ position: relative; z-index: 0; } .sg-gallery .sg-item { break-inside: avoid; margin-bottom: 10px; display: block; overflow: hidden; border-radius: 6px; background: #f0f0f0; /* Reset any inherited position so carousel height measurement isn't affected */ position: relative; } .sg-gallery .sg-link { display: block; overflow: hidden; border-radius: 6px; } .sg-gallery .sg-link img { width: 100%; height: auto; display: block; transition: transform 0.3s ease, opacity 0.3s ease; } .sg-gallery .sg-link:hover img { transform: scale(1.04); opacity: 0.9; } /* ── LIGHTBOX ── Teleported to by JS so it sits in the root stacking context, above all page elements including clip-path shape dividers. z-index: 999999 beats virtually everything. ── */ .sg-lightbox { position: fixed; inset: 0; z-index: 999999; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 24px; padding: 60px 32px 40px; opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; box-sizing: border-box; isolation: isolate; /* Force own GPU compositing layer — beats clip-path and filter stacking contexts */ transform: translateZ(0); will-change: opacity; } .sg-lightbox.is-open { opacity: 1; visibility: visible; } /* Dark backdrop — clicking closes */ .sg-lightbox .sg-lb-backdrop { position: absolute; inset: 0; z-index: 0; background: rgba(0, 0, 0, 0.92); cursor: pointer; } /* Image container */ .sg-lightbox .sg-lb-img-wrap { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex: 1; max-width: calc(100vw - 240px); max-height: calc(100vh - 120px); } .sg-lightbox .sg-lb-img { max-width: 100%; max-height: calc(100vh - 120px); width: auto; height: auto; object-fit: contain; display: block; border-radius: 4px; box-shadow: 0 24px 80px rgba(0,0,0,0.6); transition: opacity 0.2s; } .sg-lightbox .sg-lb-img.loading { opacity: 0.3; } /* Arrows */ .sg-lightbox .sg-lb-prev, .sg-lightbox .sg-lb-next { position: relative; z-index: 2; flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.12) !important; background-color: rgba(255,255,255,0.12) !important; border: 2px solid rgba(255,255,255,0.3) !important; color: #ffffff !important; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s, color 0.15s; box-shadow: none !important; outline: none !important; } .sg-lightbox .sg-lb-prev:hover, .sg-lightbox .sg-lb-next:hover { background: #f59c28 !important; background-color: #f59c28 !important; border-color: #f59c28 !important; color: #1a1a1a !important; } .sg-lightbox .sg-lb-prev:focus, .sg-lightbox .sg-lb-next:focus, .sg-lightbox .sg-lb-prev:active, .sg-lightbox .sg-lb-next:active { background: rgba(255,255,255,0.12) !important; background-color: rgba(255,255,255,0.12) !important; border-color: rgba(255,255,255,0.3) !important; color: #ffffff !important; box-shadow: none !important; outline: none !important; } .sg-lightbox .sg-lb-prev svg, .sg-lightbox .sg-lb-next svg { width: 24px; height: 24px; display: block; pointer-events: none; } /* Close button */ .sg-lightbox .sg-lb-close { position: absolute !important; top: 18px !important; right: 24px !important; z-index: 3 !important; background: none !important; background-color: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; color: rgba(255,255,255,0.7) !important; font-size: 40px !important; line-height: 1 !important; cursor: pointer !important; padding: 4px 8px !important; transition: color 0.15s !important; } .sg-lightbox .sg-lb-close:hover, .sg-lightbox .sg-lb-close:focus, .sg-lightbox .sg-lb-close:active { background: none !important; background-color: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; color: #f59c28 !important; text-decoration: none !important; } /* Counter */ .sg-lightbox .sg-lb-counter { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255,255,255,0.45); font-size: 13px; font-family: 'Inter', sans-serif; font-weight: 500; letter-spacing: 1px; white-space: nowrap; } /* ── RESPONSIVE ── */ @media (max-width: 900px) { .sg-gallery { columns: 3; } } @media (max-width: 600px) { .sg-gallery { columns: 2; column-gap: 8px; } .sg-gallery .sg-item { margin-bottom: 8px; } .sg-lightbox { gap: 12px; padding: 60px 12px 40px; } .sg-lightbox .sg-lb-img-wrap { max-width: calc(100vw - 130px); } .sg-lightbox .sg-lb-img { max-height: calc(100vh - 140px); } .sg-lightbox .sg-lb-prev, .sg-lightbox .sg-lb-next { width: 44px; height: 44px; } .sg-lightbox .sg-lb-prev svg, .sg-lightbox .sg-lb-next svg { width: 18px; height: 18px; } }