/* Grid GSAP WebGL Gallery * Base layer: a responsive flex row of image tiles. * Tiles shrink to fit the row width; they never grow past --ggwc-tile-max. * All layout is plain CSS so Elementor controls map 1:1 and cannot break. */ .ggwc { position: relative; width: 100%; box-sizing: border-box; perspective: 1200px; } .ggwc * { box-sizing: border-box; } .ggwc-row { --ggwc-row-height: 420px; display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 10px; width: 100%; height: var(--ggwc-row-height); min-height: var(--ggwc-row-height); padding-inline: 6px; transform-style: preserve-3d; } .ggwc-tile { --ggwc-tile-max: 150px; position: relative; flex: 1 1 0; min-width: 0; max-width: var(--ggwc-tile-max); height: 100%; margin: 0; overflow: hidden; cursor: pointer; border-radius: 6px; transform-style: preserve-3d; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease; will-change: transform; background: rgba(0, 0, 0, 0.04); } .ggwc-tile img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; user-select: none; -webkit-user-drag: none; pointer-events: none; } .ggwc-tile:hover, .ggwc-tile:focus-visible { z-index: 2; outline: none; } .ggwc-caption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 8px; color: #fff; font-size: 13px; line-height: 1.2; text-align: center; background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); pointer-events: none; } .ggwc-empty { min-height: 200px; display: flex; align-items: center; justify-content: center; padding: 24px; border: 1px dashed currentColor; opacity: 0.7; text-align: center; } /* When the JS lightbox is unavailable, tiles still work as plain images. */ .ggwc.no-js .ggwc-tile { cursor: default; } /* ----- Lightbox overlay (created by JS, appended to ) ----- */ .ggwc-lightbox { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; background: rgba(8, 8, 12, 0.82); opacity: 0; transition: opacity 0.3s ease; cursor: zoom-out; } .ggwc-lightbox.is-open { opacity: 1; } .ggwc-lightbox canvas, .ggwc-lightbox .ggwc-lb-img { max-width: 92vw; max-height: 92vh; display: block; } .ggwc-lightbox .ggwc-lb-img { object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); border-radius: 4px; transform: scale(0.85); opacity: 0; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; } .ggwc-lightbox.is-open .ggwc-lb-img { transform: scale(1); opacity: 1; } .ggwc-lb-close { position: absolute; top: 18px; right: 22px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 22px; line-height: 40px; text-align: center; cursor: pointer; transition: background 0.2s ease; } .ggwc-lb-close:hover { background: rgba(255, 255, 255, 0.25); } .ggwc-lb-caption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 28px 24px; color: #fff; font-size: 18px; line-height: 1.3; text-align: center; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); pointer-events: none; opacity: 0; transition: opacity 0.4s ease 0.2s; } .ggwc-lightbox.is-open .ggwc-lb-caption { opacity: 1; } @media (prefers-reduced-motion: reduce) { .ggwc-tile { transition: none; } .ggwc-lightbox, .ggwc-lightbox .ggwc-lb-img { transition: opacity 0.2s ease; } }