/* ========================================================= Dewa Lightbox Gallery — front-end styles Self-contained: no theme / icon-font dependency. ========================================================= */ .dewa-gallery { --dg-cols: 3; --dg-gap: 16px; --dg-h: 240px; --dg-radius: 0px; --dg-accent: #b07a53; --dg-overlay: rgba(20, 24, 18, 0.32); --dg-badge-bg: rgba(20, 24, 18, 0.55); --dg-zoom-bg: #fbf8f2; --dg-zoom-color: #1b1f17; display: grid; gap: var(--dg-gap); grid-auto-rows: var(--dg-h); } .dewa-gallery[data-layout="grid"] { grid-template-columns: repeat(var(--dg-cols), 1fr); } .dewa-gallery[data-layout="featured"] { grid-template-columns: 2fr 1fr 1fr; grid-auto-flow: row dense; } .dewa-gallery[data-layout="featured"] .dg-item.dg-tall { grid-row: span var(--dg-tall-span, 2); } /* tiles beyond the "visible" count: kept in the DOM (so the lightbox can still page through them) but hidden on the page. */ .dg-hidden { display: none !important; } /* ---- tiles ---- */ .dg-item { position: relative; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; border-radius: var(--dg-radius); overflow: hidden; cursor: pointer; -webkit-appearance: none; appearance: none; } .dg-thumb { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); } .dg-item:hover .dg-thumb, .dg-item:focus-visible .dg-thumb { transform: scale(1.06); } .dg-item::after { content: ""; position: absolute; inset: 0; background: rgba(20, 24, 18, 0); transition: background 0.4s ease; } .dg-item:hover::after, .dg-item:focus-visible::after { background: var(--dg-overlay); } .dg-item:focus-visible { outline: 2px solid var(--dg-accent); outline-offset: 3px; } /* ---- zoom badge ---- */ .dg-zoom { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--dg-zoom-bg); color: var(--dg-zoom-color); opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease; } .dg-zoom svg { width: 20px; height: 20px; display: block; } .dg-item:hover .dg-zoom, .dg-item:focus-visible .dg-zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); } @media (max-width: 767px) { .dewa-gallery[data-layout="featured"] { grid-template-columns: 1fr 1fr; } .dewa-gallery[data-layout="featured"] .dg-item.dg-tall { grid-row: span var(--dg-tall-span, 2); grid-column: span 2; } } /* "+N more" overlay on the last visible tile */ .dg-more-badge { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: var(--dg-badge-bg); color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 500; letter-spacing: 0.01em; transition: background 0.4s ease; } .dg-item--more:hover .dg-more-badge { background: var(--dg-badge-bg); filter: brightness(1.15); } /* "View all photos" button */ .dg-more-row { display: flex; justify-content: center; margin-top: var(--dg-gap, 16px); } .dg-more { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; font: inherit; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.72rem 1.5rem; color: var(--dg-accent); background: transparent; border: 1px solid var(--dg-accent); border-radius: var(--dg-radius); transition: background 0.3s ease, color 0.3s ease; -webkit-appearance: none; appearance: none; } .dg-more:hover, .dg-more:focus-visible { background: var(--dg-accent); color: #fff; } /* ========================================================= Lightbox (one shared element, appended to by JS) ========================================================= */ .dg-lightbox { --dg-accent: #b07a53; position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: clamp(1rem, 5vw, 4rem); background: rgba(15, 18, 13, 0.93); } .dg-lightbox.dg-open { display: flex; animation: dgFade 0.3s ease; } @keyframes dgFade { from { opacity: 0; } to { opacity: 1; } } .dg-lb-figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .dg-lb-img { max-width: min(1100px, 100%); max-height: 84vh; object-fit: contain; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.7); } .dg-lb-caption { margin: 0; max-width: 60ch; text-align: center; color: rgba(255, 255, 255, 0.82); font-size: 0.9rem; line-height: 1.5; } .dg-lb-close, .dg-lb-nav { position: absolute; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; -webkit-appearance: none; appearance: none; } .dg-lb-close { top: 1.4rem; right: 1.6rem; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); transition: background 0.35s ease; } .dg-lb-close:hover { background: var(--dg-accent); } .dg-lb-close svg { width: 20px; height: 20px; } .dg-lb-nav { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.28); transition: background 0.3s ease, color 0.3s ease; } .dg-lb-nav:hover { background: #fff; color: #1b1f17; } .dg-lb-nav svg { width: 24px; height: 24px; } .dg-lb-prev { left: clamp(1rem, 3vw, 2.4rem); } .dg-lb-next { right: clamp(1rem, 3vw, 2.4rem); } .dg-lb-count { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.8); font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; } @media (max-width: 575px) { .dg-lb-nav { width: 44px; height: 44px; } .dg-lb-close { width: 42px; height: 42px; } } /* editor empty state */ .dg-empty { padding: 2rem; text-align: center; border: 1px dashed #c9c2b6; color: #8a8275; font-family: sans-serif; }