/** * Villa Gallery section — centred title + a 4-up grid of category tiles that * hover-cycle their photos and open a full-screen lightbox. Depends on * villa-home.css. The .lb lightbox is appended to by the JS. * * @package Villa_Addon */ .vo-gallery { padding: var(--sp-100) var(--pad-x); } .vo-gallery__inner { width: 100%; margin-inline: auto; } .vo-gallery__title { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } .vo-gallery__h2 { margin: .4rem 0 0; font-family: var(--display); font-weight: 600; color: var(--dark); font-size: clamp(2.6rem, .8rem + 6.75vw, 110px); line-height: 1.1; } .vo-gallery__sub { max-width: 52ch; margin: 1rem auto 0; } /* ---- Category tiles ---- */ .gallery__cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .gcat { position: relative; display: block; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 5; border: 0; padding: 0; background: var(--dark); border-radius: 2px; isolation: isolate; } .gcat__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 4s linear; } /* Elementor's global `.elementor img { height:auto }` (specificity 0,1,1) was beating `.gcat__img { height:100% }` (0,1,0), collapsing these absolutely- positioned photos to 0px — so the tiles showed only the dark placeholder and the lazy images never loaded. Win on specificity (0,3,0) to restore them. */ .vo-gallery .gcat .gcat__img { width: 100%; height: 100%; } .gcat__img.is-on { opacity: 1; transform: scale(1.1); } .gcat__grad { position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(18, 53, 54, 0) 40%, rgba(18, 53, 54, .28) 62%, rgba(18, 53, 54, .86) 100%); } .gcat__meta { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; color: #fff; text-align: left; } .gcat__title { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + .8vw, 1.9rem); line-height: 1.05; white-space: normal; } .gcat__count { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 14px; letter-spacing: .02em; color: rgba(255, 255, 255, .82); } .gcat__count::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); } .gcat__cue { position: absolute; top: 18px; right: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 100px; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 13px; font-weight: 500; opacity: 0; transform: translateY(-6px); transition: .4s var(--ease); } .gcat__cue svg { width: 15px; height: 15px; } .gcat:hover .gcat__cue, .gcat:focus-visible .gcat__cue { opacity: 1; transform: none; } .gcat__dots { position: absolute; left: 24px; right: 24px; top: 18px; z-index: 2; display: flex; gap: 5px; opacity: 0; transition: opacity .4s var(--ease); } .gcat:hover .gcat__dots { opacity: 1; } .gcat__dot { flex: 1 1 0; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; } .gcat__dot.on { background: var(--teal); } .gcat:focus-visible { outline: var(--teal) solid 2px; outline-offset: 3px; } @media (max-width: 1024px) { .gallery__cats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .gallery__cats { grid-template-columns: 1fr; } } /* ---- Lightbox (appended to ) ---- */ .lb { position: fixed; inset: 0; z-index: 120; display: none; place-items: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(18, 53, 54, .96); } .lb.open { display: grid; } .lb img { max-width: min(1200px, 94vw); max-height: 86vh; object-fit: contain; } /* Glassmorphism controls — frosted + blurred so they stay visible over any photo (a plain transparent border vanished against bright images). */ .lb__x, .lb__p, .lb__n { position: absolute; border-radius: 50%; cursor: pointer; z-index: 2; color: #fff; line-height: 1; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(255, 255, 255, .38); box-shadow: 0 8px 26px -8px rgba(6, 28, 30, .5), inset 0 1px 0 rgba(255, 255, 255, .35); transition: background .3s, transform .3s; } .lb__x { top: 1.4rem; right: 1.6rem; width: 48px; height: 48px; font-size: 24px; } .lb__p, .lb__n { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; font-size: 28px; } .lb__p { left: clamp(.5rem, 3vw, 2.5rem); } .lb__n { right: clamp(.5rem, 3vw, 2.5rem); } .lb__x:hover, .lb__p:hover, .lb__n:hover { background: rgba(255, 255, 255, .26); } .lb__p:hover, .lb__n:hover { transform: translateY(-50%) scale(1.06); } .lb__c { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .7); font-size: .85rem; letter-spacing: .04em; } /* ---- Masonry gallery (Gallery page): filter tabs + all photos ---- */ .galfilters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: clamp(28px, 4vw, 52px); } .galtab { padding: 10px 20px; border-radius: 100px; border: 1px solid var(--line); background: transparent; font-family: var(--sans); font-size: 15px; color: var(--body); cursor: pointer; transition: background .3s, color .3s, border-color .3s; } .galtab:hover { border-color: var(--dark); color: var(--dark); } .galtab.is-on { background: var(--dark); color: #fff; border-color: var(--dark); } /* A tidy 2-up grid of uniform-height tiles (matches live's justified rows). A fixed aspect-ratio reserves each tile's height, so lazy images can't break the layout the way CSS columns did (they collapsed and emptied a column). */ .galmasonry { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .galm__item { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 6px; overflow: hidden; aspect-ratio: 695 / 333; -webkit-tap-highlight-color: transparent; } .galm__item img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 6px; transition: transform .6s cubic-bezier(.22,.61,.36,1); } /* Beat Elementor's global `.elementor img { height: auto }` (specificity 0-1-1). */ .galmasonry .galm__item img { height: 100%; } .galm__item:hover img { transform: scale(1.04); } @media (max-width: 700px) { .galmasonry { grid-template-columns: 1fr; } }