/* ---------- Light Gallery lightbox controls ---------- lightGallery's own auto-hide (.lg-hide-items) is neutralised — on touch devices it never recovers. Instead gallery.js applies .lg-idle after 5s of inactivity; any mouse move / tap / key brings the controls back. */ .lg-outer.lg-hide-items .lg-toolbar { opacity: 1 !important; transform: translate3d(0, 0, 0) !important; } .lg-outer.lg-hide-items .lg-actions .lg-prev, .lg-outer.lg-hide-items .lg-actions .lg-next { opacity: 1 !important; transform: translate3d(0, 0, 0) !important; } .lg-outer .lg-toolbar, .lg-outer .lg-actions .lg-prev, .lg-outer .lg-actions .lg-next { transition: opacity .5s ease !important; } .lg-outer.lg-idle .lg-toolbar, .lg-outer.lg-idle .lg-actions .lg-prev, .lg-outer.lg-idle .lg-actions .lg-next { opacity: 0 !important; /* faded-out controls can't swallow the waking tap */ pointer-events: none; } /* ---------- Light Gallery plugin: bento-style thumbnails grid ---------- */ .light-gallery-plugin { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; grid-auto-flow: dense; /* fill the gaps left by the big tiles */ gap: var(--s1); margin: var(--s4) 0; } .light-gallery-plugin a { display: block; height: 100%; overflow: hidden; border-radius: var(--r-md); box-shadow: var(--shadow-sm); cursor: zoom-in; } /* bento pattern, repeats every 20 images (two 4x4 blocks): block A (images 1-10), block B (11-20) = block A mirrored horizontally, so the repeat is much harder to spot. block A block B (mirrored) [ 1 ][ 2 2 ][ 3 ] [11][12 12][13] [ 1 ][ 4 ][ 5 5 ] [14 14][15][13] [ 6 ][ 4 ][ 5 5 ] [14 14][15][16] [ 7 ][ 8 ][ 9 ][10] [17][18][19][20] */ /* block A */ .light-gallery-plugin a:nth-child(20n+1) { grid-row: span 2; } .light-gallery-plugin a:nth-child(20n+2) { grid-column: span 2; } .light-gallery-plugin a:nth-child(20n+4) { grid-row: span 2; } .light-gallery-plugin a:nth-child(20n+5) { grid-column: span 2; grid-row: span 2; border-radius: var(--r-lg); } /* block B (mirrored) */ .light-gallery-plugin a:nth-child(20n+12) { grid-column: span 2; } .light-gallery-plugin a:nth-child(20n+13) { grid-row: span 2; } .light-gallery-plugin a:nth-child(20n+14) { grid-column: span 2; grid-row: span 2; border-radius: var(--r-lg); } .light-gallery-plugin a:nth-child(20n+15) { grid-row: span 2; } .light-gallery-plugin a img { width: 100%; height: 100%; object-fit: cover; display: block; /* the plugin injects per-instance margins via an id selector — neutralise */ margin: 0 !important; transition: transform .35s cubic-bezier(.22, 1, .36, 1); } .light-gallery-plugin a:hover img { transform: scale(1.06); } @media (max-width: 900px) { .light-gallery-plugin { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 150px; } } @media (max-width: 560px) { .light-gallery-plugin { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; } } /* ---------- Skeleton loader (until lightGallery has bound) ---------- Until gets the `lg-ready` class (added by gallery.js on load), the gallery is non-interactive so a premature click can't follow the raw and open the image as a plain page. The tiles shimmer as a skeleton and the real photos fade in once ready. */ html:not(.lg-ready) .light-gallery-plugin { pointer-events: none; } /* html:not(.lg-ready) .light-gallery-plugin a { background: linear-gradient( 100deg, var(--gray) 25%, #f3f4f6 50%, var(--gray) 75% ); background-size: 200% 100%; animation: lg-skeleton 1.3s ease-in-out infinite; cursor: default; } .light-gallery-plugin a img { transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .4s ease; } html:not(.lg-ready) .light-gallery-plugin a img { opacity: 0; } @keyframes lg-skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { html:not(.lg-ready) .light-gallery-plugin a { animation: none; } } */