About Advocate Sonal Sharma

/* ---------- reset / base ---------- */ .about-gallery-section { padding: 90px 0; background: #f8f3ef; font-family: "Poppins", Arial, sans-serif; overflow: hidden; } /* ---------- track wrapper ---------- */ .about-gallery-track-wrap { display: flex; flex-direction: column; gap: 26px; } /* ---------- single marquee row ---------- */ .about-gallery-track { overflow: hidden; width: 100%; } .about-gallery-inner { display: flex; gap: 26px; width: max-content; /* shrink-wraps all cards */ will-change: transform; } /* ---------- card ---------- */ .about-gallery-card { position: relative; flex: 0 0 auto; width: 340px; /* fixed card width */ aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 18px 45px rgba(0,0,0,.08); cursor: pointer; } .about-gallery-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; pointer-events: none; /* let card get the click */ } /* ---------- overlay ---------- */ .about-gallery-overlay { position: absolute; inset: 0; background: linear-gradient(rgba(139,41,72,.05), rgba(26,14,8,.58)); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .4s ease; pointer-events: none; } .about-gallery-overlay span { background: #fff; color: #8b2948; padding: 12px 24px; border-radius: 30px; font-size: 13px; font-weight: 700; transform: translateY(12px); transition: transform .4s ease; } .about-gallery-card:hover img { transform: scale(1.08); } .about-gallery-card:hover .about-gallery-overlay { opacity: 1; } .about-gallery-card:hover .about-gallery-overlay span { transform: translateY(0); } /* ---------- LIGHTBOX ---------- */ .about-gallery-lightbox { position: fixed; inset: 0; background: rgba(26,14,8,.92); display: none; align-items: center; justify-content: center; z-index: 999999; padding: 30px; } .about-gallery-lightbox.active { display: flex !important; } .about-gallery-lightbox img { max-width: 92%; max-height: 84vh; object-fit: contain; border-radius: 18px; box-shadow: 0 25px 80px rgba(0,0,0,.45); background: #fff; position: relative; z-index: 1; } .about-gallery-close, .about-gallery-prev, .about-gallery-next { position: absolute; border: none; background: #fff; color: #8b2948; cursor: pointer; z-index: 9999999; transition: background .3s ease, color .3s ease; display: flex; align-items: center; justify-content: center; } .about-gallery-close { right: 28px; top: 22px; width: 44px; height: 44px; border-radius: 50%; font-size: 32px; line-height: 1; } .about-gallery-prev, .about-gallery-next { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; font-size: 34px; line-height: 1; } .about-gallery-prev { left: 28px; } .about-gallery-next { right: 28px; } .about-gallery-close:hover, .about-gallery-prev:hover, .about-gallery-next:hover { background: #8b2948; color: #fff; } body.about-gallery-open { overflow: hidden; } /* ---------- responsive card width ---------- */ @media (max-width: 900px) { .about-gallery-section { padding: 70px 0; } .about-gallery-card { width: 260px; } .about-gallery-track-wrap { gap: 20px; } } @media (max-width: 600px) { .about-gallery-section { padding: 55px 0; } .about-gallery-card { width: 200px; border-radius: 14px; } .about-gallery-track-wrap { gap: 16px; } .about-gallery-inner { gap: 16px; } .about-gallery-lightbox { padding: 18px; } .about-gallery-lightbox img { max-width: 100%; max-height: 78vh; border-radius: 14px; } .about-gallery-close { right: 14px; top: 14px; width: 40px; height: 40px; font-size: 28px; } .about-gallery-prev, .about-gallery-next { width: 40px; height: 40px; font-size: 28px; } .about-gallery-prev { left: 12px; } .about-gallery-next { right: 12px; } } (function () { /* ────────────────────────────────────────────── 1. TRUE INFINITE MARQUEE Strategy: clone the original set enough times so the total strip is > 2× viewport. We then only track ONE set-width for the wrap point, so the jump is truly invisible. ────────────────────────────────────────────── */ function initMarquee() { const SPEED = 0.6; // px per frame document.querySelectorAll(".about-gallery-track").forEach(function (track) { var inner = track.querySelector(".about-gallery-inner"); var dir = track.dataset.direction === "right" ? 1 : -1; /* ---- snapshot original cards BEFORE any cloning ---- */ var origCards = Array.from(inner.children); /* ---- measure gap from computed style (matches CSS gap value) ---- */ var gap = parseFloat(getComputedStyle(inner).gap) || 26; /* ---- measure ONE set width (cards + gaps between them) ---- */ function oneSetWidth() { var w = 0; origCards.forEach(function (c) { w += c.offsetWidth + gap; }); return w; // includes trailing gap — that's intentional for seamless loop } /* ---- clone until strip is comfortably > 3× viewport ---- */ var needed = window.innerWidth * 3; while (inner.scrollWidth < needed) { origCards.forEach(function (card) { var clone = card.cloneNode(true); clone.setAttribute("data-clone", "true"); inner.appendChild(clone); }); } /* ---- starting offset ---- left (dir=-1): start at 0, scroll negative → wrap when offset = 0 */ var offset = (dir === 1) ? -oneSetWidth() : 0; var paused = false; function step() { if (!paused) { offset += SPEED * dir; // dir=-1 moves left, dir=1 moves right var w = oneSetWidth(); /* seamless wrap — shift by exactly one set width */ if (dir === -1 && offset = 0) offset -= w; inner.style.transform = "translateX(" + offset + "px)"; } requestAnimationFrame(step); } track.addEventListener("mouseenter", function () { paused = true; }); track.addEventListener("mouseleave", function () { paused = false; }); track.addEventListener("touchstart", function () { paused = true; }, { passive: true }); track.addEventListener("touchend", function () { paused = false; }); requestAnimationFrame(step); }); } /* ────────────────────────────────────────────── 2. LIGHTBOX (works on both originals & clones) ────────────────────────────────────────────── */ function initLightbox() { /* Master image list — from the original (non-clone) cards only */ const masterImages = Array.from( document.querySelectorAll(".about-gallery-card:not([data-clone]) img") ); if (!masterImages.length) return; /* remove any stale lightbox */ document.querySelectorAll(".about-gallery-lightbox").forEach(function (b) { b.remove(); }); let currentIndex = 0; const lightbox = document.createElement("div"); lightbox.className = "about-gallery-lightbox"; lightbox.innerHTML = '×' + '‹' + '' + '›'; document.body.appendChild(lightbox); const lbImg = lightbox.querySelector("img"); const closeBtn = lightbox.querySelector(".about-gallery-close"); const prevBtn = lightbox.querySelector(".about-gallery-prev"); const nextBtn = lightbox.querySelector(".about-gallery-next"); function updateImage() { lbImg.src = masterImages[currentIndex].src; lbImg.alt = masterImages[currentIndex].alt || "Gallery Preview"; } function openLightbox(index) { currentIndex = ((index % masterImages.length) + masterImages.length) % masterImages.length; updateImage(); lightbox.classList.add("active"); document.body.classList.add("about-gallery-open"); } function closeLightbox() { lightbox.classList.remove("active"); document.body.classList.remove("about-gallery-open"); } function showNext(e) { if (e) { e.preventDefault(); e.stopPropagation(); } currentIndex = (currentIndex + 1) % masterImages.length; updateImage(); } function showPrev(e) { if (e) { e.preventDefault(); e.stopPropagation(); } currentIndex = (currentIndex - 1 + masterImages.length) % masterImages.length; updateImage(); } /* click on ANY card (original or clone) opens lightbox at correct index */ document.addEventListener("click", function (e) { const card = e.target.closest(".about-gallery-card"); if (!card) return; e.preventDefault(); const rawIndex = parseInt(card.dataset.index, 10); openLightbox(isNaN(rawIndex) ? 0 : rawIndex); }); closeBtn.addEventListener("click", function (e) { e.preventDefault(); e.stopPropagation(); closeLightbox(); }); nextBtn.addEventListener("click", showNext); prevBtn.addEventListener("click", showPrev); lbImg.addEventListener("click", function (e) { e.stopPropagation(); }); lightbox.addEventListener("click", function (e) { if (e.target === lightbox) closeLightbox(); }); /* keyboard */ document.addEventListener("keydown", function (e) { if (!lightbox.classList.contains("active")) return; if (e.key === "Escape") closeLightbox(); if (e.key === "ArrowRight") showNext(e); if (e.key === "ArrowLeft") showPrev(e); }); /* swipe */ var touchStartX = 0; lightbox.addEventListener("touchstart", function (e) { touchStartX = e.changedTouches[0].clientX; }, { passive: true }); lightbox.addEventListener("touchend", function (e) { var dx = e.changedTouches[0].clientX - touchStartX; if (Math.abs(dx) < 40) return; dx < 0 ? showNext() : showPrev(); }); } /* ────────────────────────────────────────────── BOOT ────────────────────────────────────────────── */ function boot() { initMarquee(); /* lightbox needs clones already in DOM → after marquee init */ initLightbox(); } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", boot); } else { boot(); } })();