YO AH! ART

YO AH! THAT’S THE REAL STREET ART.

---

---

ARTIST STATEMENT ANCHOR

CYCLE-1 ANCHOR

C Y C L E 1

CYCLE-2 ANCHOR

CYCLE-3 ANCHOR

COLLECTORS ANCHOR

GALLERISTS ANCHOR

NEWS ANCHOR

/* ========================================================= GALLERY ROW (SEED CELL – DUPLICATABLE) ========================================================= */ .my-gallery-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 1024px) { .my-gallery-row { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 820px) { .my-gallery-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .my-gallery-row { grid-template-columns: 1fr; } } /* ========================================================= SLIDER IMAGE CONTAINER (SQUARE, NEVER CROPS) – glued to bottom – portrait horizontally centered ========================================================= */ .slider-image { width: 100%; aspect-ratio: 1 / 1; display: flex; justify-content: center; /* horizontal centering */ align-items: flex-end; /* bottom alignment */ overflow: hidden; cursor: pointer; text-align: center; } .slider-image img { max-width: 95%; max-height: 95%; width: auto; height: auto; object-fit: contain; display: block; margin-left: auto; margin-right: auto; loading: lazy; } /* Ensure captions/text under images stay aligned */ .slider-image + .content-group, .slider-image + .content-group p { text-align: left; margin-top: 0; margin-bottom: 0; } /* ========================================================= GLOBAL SLIDER (FULLSCREEN) ========================================================= */ .global-slider { position: fixed; inset: 0; background: #ffffff; display: none; justify-content: center; align-items: center; z-index: 9999; } .global-slider .slide { display: none; flex-direction: column; align-items: center; } .global-slider .slide img { display: block; pointer-events: none; } .global-slider .slide-text { font-size: 14px; color: #999; text-align: center; margin-top: 10px; } .global-slider .close, .global-slider .arrow { position: absolute; font-size: 40px; color: #ccc; cursor: pointer; user-select: none; } .global-slider .close { top: 20px; right: 30px; } .global-slider .arrow.left { left: 20px; top: 50%; transform: translateY(-50%); } .global-slider .arrow.right { right: 20px; top: 50%; transform: translateY(-50%); } /* ========================================================= SIMPLE LIGHTBOX (FOR NON-SLIDER IMAGES ONLY) ========================================================= */ .standalone-lightbox { position: fixed; inset: 0; background: #ffffff; display: none; justify-content: center; align-items: center; z-index: 9998; } .standalone-lightbox img { max-width: 95%; max-height: 90%; cursor: zoom-out; transition: transform 0.25s ease, opacity 0.25s ease; } /* Remove ANY decoration/icons */ .standalone-lightbox *::before, .standalone-lightbox *::after { content: none !important; display: none !important; } document.addEventListener(“DOMContentLoaded”, () => { /* ======================================================= SAFETY: DISABLE ANY THEME / KADENCE LIGHTBOX ======================================================= */ document.querySelectorAll( ‘.kadence-image a[data-rel], .kadence-image a[data-lightbox-gallery]’ ).forEach(a => { a.removeAttribute(‘data-rel’); a.removeAttribute(‘data-lightbox-gallery’); a.classList.remove(‘kadence-blocks-pro-lightbox’); a.style.pointerEvents = ‘none’; }); /* ======================================================= A. GLOBAL SLIDER TARGET: ONLY .slider-image RULE: NO LIGHTBOX EVER ======================================================= */ const sliderImages = Array.from(document.querySelectorAll(“.slider-image”)); if (sliderImages.length) { const slider = document.createElement(“div”); slider.className = “global-slider”; document.body.appendChild(slider); slider.innerHTML = ` `; const wrapper = document.createElement(“div”); Object.assign(wrapper.style, { width: “100%”, height: “100%”, display: “flex”, justifyContent: “center”, alignItems: “center” }); slider.appendChild(wrapper); const slides = sliderImages.map(img => { const slide = document.createElement(“div”); slide.className = “slide”; const clone = img.querySelector(“img”).cloneNode(true); clone.loading = “lazy”; clone.style.pointerEvents = “none”; slide.appendChild(clone); const text = img.closest(“.wp-block-column”) ?.querySelector(“.textfield-1”); if (text) { const caption = document.createElement(“div”); caption.className = “slide-text”; caption.innerText = text.innerText; slide.appendChild(caption); } wrapper.appendChild(slide); return slide; }); let index = 0; function update() { slides.forEach((s, i) => s.style.display = i === index ? “flex” : “none” ); const img = slides[index].querySelector(“img”); const maxH = window.innerHeight – 160; const maxW = window.innerWidth * 0.95; const scale = Math.min( maxH / img.naturalHeight, maxW / img.naturalWidth ); img.style.width = img.naturalWidth * scale + “px”; img.style.height = img.naturalHeight * scale + “px”; } sliderImages.forEach((img, i) => { img.addEventListener(“click”, () => { index = i; slider.style.display = “flex”; update(); }); }); slider.querySelector(“.close”).onclick = () => slider.style.display = “none”; slider.querySelector(“.arrow.left”).onclick = () => { index = (index – 1 + slides.length) % slides.length; update(); }; slider.querySelector(“.arrow.right”).onclick = () => { index = (index + 1) % slides.length; update(); }; window.addEventListener(“resize”, update); } /* ======================================================= B. SIMPLE LIGHTBOX TARGET: ALL IMAGES WITHOUT .slider-image RULE: NO SLIDER EVER ======================================================= */ const normalImages = Array.from(document.querySelectorAll(“img”)) .filter(img => !img.closest(“.slider-image”)); if (normalImages.length) { const lb = document.createElement(“div”); lb.className = “standalone-lightbox”; const lbImg = document.createElement(“img”); lb.appendChild(lbImg); document.body.appendChild(lb); lbImg.onclick = () => { lbImg.style.transform = “scale(0.7)”; lbImg.style.opacity = “0”; setTimeout(() => lb.style.display = “none”, 250); }; normalImages.forEach(img => { img.loading = “lazy”; img.style.cursor = “zoom-in”; img.addEventListener(“click”, () => { lbImg.src = img.src; lb.style.display = “flex”; lbImg.onload = () => { const maxH = window.innerHeight – 160; const maxW = window.innerWidth * 0.95; const scale = Math.min( maxH / lbImg.naturalHeight, maxW / lbImg.naturalWidth ); lbImg.style.width = lbImg.naturalWidth * scale + “px”; lbImg.style.height = lbImg.naturalHeight * scale + “px”; lbImg.style.transform = “scale(1)”; lbImg.style.opacity = “1”; }; }); }); } });