/** * Grab Services Slider with Progress Indicator and Navigation — DARK MODE * Creates an interactive slider with visual progress bar and nav buttons */ // Use MutationObserver to detect when the slider appears in the DOM const observer = new MutationObserver((mutations) => { const container = document.querySelector('.grab-services-container'); const slider = document.querySelector('.grab-services-grid'); if (container && slider && !container.querySelector('.grab-slider-progress')) { initSlider(container, slider); } }); // Start observing observer.observe(document.body, { childList: true, subtree: true }); // Also try to init immediately if elements already exist if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => { const container = document.querySelector('.grab-services-container'); const slider = document.querySelector('.grab-services-grid'); if (container && slider && !container.querySelector('.grab-slider-progress')) { initSlider(container, slider); } }); } else { const container = document.querySelector('.grab-services-container'); const slider = document.querySelector('.grab-services-grid'); if (container && slider && !container.querySelector('.grab-slider-progress')) { initSlider(container, slider); } } function initSlider(container, slider) { // DARK MODE: solid dark section background const section = document.querySelector('.grab-services-section'); if (section) { section.style.cssText = 'background: #000000; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.08); position: relative;'; } // Hide the "Services" label on all cards const serviceLabels = document.querySelectorAll('.grab-service-label'); serviceLabels.forEach(label => { label.style.display = 'none'; }); // Create progress bar container const progressContainer = document.createElement('div'); progressContainer.className = 'grab-slider-progress'; progressContainer.style.cssText = 'position: absolute; bottom: 0; left: 3rem; right: 3rem; height: 4px; z-index: 10;'; const progressTrack = document.createElement('div'); progressTrack.className = 'grab-slider-progress-track'; progressTrack.style.cssText = 'width: 100%; height: 100%; background: rgba(var(--derivative-color-200), 0.3); backdrop-filter: blur(4px); border-radius: 2px; overflow: hidden;'; const progressBar = document.createElement('div'); progressBar.className = 'grab-slider-progress-bar'; progressBar.style.cssText = 'height: 100%; background: rgba(var(--primary-color), 0.8); border-radius: 2px; transition: width 0.1s ease-out; box-shadow: 0 0 12px rgba(var(--primary-color), 0.6); width: 0%;'; progressTrack.appendChild(progressBar); progressContainer.appendChild(progressTrack); container.appendChild(progressContainer); // Create edge fade overlays — DARK MODE: fade to #0E1808, not white const leftFade = document.createElement('div'); leftFade.className = 'grab-slider-fade-left'; leftFade.style.cssText = 'position: absolute; top: 0; bottom: 0; height: 100%; width: 80px; pointer-events: none; z-index: 5; transition: opacity 0.3s ease; left: 0; background: linear-gradient(to right, #000000, transparent); opacity: 0;'; const rightFade = document.createElement('div'); rightFade.className = 'grab-slider-fade-right'; rightFade.style.cssText = 'position: absolute; top: 0; bottom: 0; height: 100%; width: 80px; pointer-events: none; z-index: 5; transition: opacity 0.3s ease; right: 0; background: linear-gradient(to left, #000000, transparent);'; container.style.position = 'relative'; container.appendChild(leftFade); container.appendChild(rightFade); // Create wrapper for buttons that stays fixed const buttonWrapper = document.createElement('div'); buttonWrapper.className = 'grab-slider-button-wrapper'; buttonWrapper.style.cssText = 'position: absolute; top: 0; left: 0; right: 0; pointer-events: none; z-index: 20;'; // Create navigation buttons with glassy effect const prevButton = document.createElement('button'); prevButton.className = 'grab-slider-nav-prev'; prevButton.setAttribute('aria-label', 'Previous services'); prevButton.style.cssText = 'position: absolute; left: 1rem; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgb(var(--primary-color)); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; pointer-events: auto;'; prevButton.innerHTML = ` `; const nextButton = document.createElement('button'); nextButton.className = 'grab-slider-nav-next'; nextButton.setAttribute('aria-label', 'Next services'); nextButton.style.cssText = 'position: absolute; right: 1rem; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgb(var(--primary-color)); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; pointer-events: auto;'; nextButton.innerHTML = ` `; buttonWrapper.appendChild(prevButton); buttonWrapper.appendChild(nextButton); container.appendChild(buttonWrapper); // Apply slider styles slider.style.cssText = 'display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 1rem; padding-bottom: 2.5rem; margin-bottom: 0.5rem; scrollbar-width: none;'; // Position buttons vertically centered to cards const positionButtons = () => { const firstCard = slider.querySelector('.grab-services-grid > div .grab-service-card'); if (firstCard) { const cardHeight = firstCard.offsetHeight; const sliderRect = slider.getBoundingClientRect(); const containerRect = container.getBoundingClientRect(); const offsetTop = sliderRect.top - containerRect.top; const buttonTop = offsetTop + (cardHeight / 2) - 24; // 24 is half of button height (48px) buttonWrapper.style.top = `${buttonTop}px`; } }; // Hide webkit scrollbar, service buttons, and apply DARK MODE label/title colors if (!document.getElementById('grab-slider-styles')) { const styleSheet = document.createElement('style'); styleSheet.id = 'grab-slider-styles'; styleSheet.textContent = ` .grab-services-grid::-webkit-scrollbar { display: none; } .grab-service-button { display: none; } .grab-service-label { display: none !important; } /* DARK MODE: accent-colored eyebrow + heading */ .grab-services-label, .grab-services-title, .grab-services-title .text-line { color: #c10101 !important; } .grab-slider-nav-prev:hover, .grab-slider-nav-next:hover { background: rgba(var(--primary-color), 0.9) !important; color: white !important; transform: scale(1.1) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important; border-color: rgba(var(--primary-color), 0.5) !important; } .grab-slider-nav-prev:active, .grab-slider-nav-next:active { transform: scale(0.95) !important; } @media (max-width: 767px) { .grab-slider-nav-prev, .grab-slider-nav-next { display: none !important; } } `; document.head.appendChild(styleSheet); } // Apply card styles const cards = slider.querySelectorAll('.grab-services-grid > div'); cards.forEach(card => { card.style.cssText = 'flex: 0 0 auto; width: 85%; max-width: 400px; scroll-snap-align: center;'; }); // Position buttons after cards are loaded setTimeout(positionButtons, 100); // Scroll functionality const scrollAmount = () => { const card = slider.querySelector('.grab-services-grid > div'); return card ? card.offsetWidth + 16 : 400; }; const handlePrevClick = () => { slider.scrollBy({ left: -scrollAmount(), behavior: 'smooth' }); }; const handleNextClick = () => { slider.scrollBy({ left: scrollAmount(), behavior: 'smooth' }); }; prevButton.addEventListener('click', handlePrevClick); nextButton.addEventListener('click', handleNextClick); // Update progress bar and button states based on scroll position const updateProgress = () => { const scrollLeft = slider.scrollLeft; const scrollWidth = slider.scrollWidth - slider.clientWidth; const scrollPercentage = scrollWidth > 0 ? (scrollLeft / scrollWidth) * 100 : 0; progressBar.style.width = `${scrollPercentage}%`; // Update fade visibility leftFade.style.opacity = scrollLeft > 10 ? '1' : '0'; rightFade.style.opacity = scrollLeft < scrollWidth - 10 ? '1' : '0'; // Update button states const isAtStart = scrollLeft <= 10; const isAtEnd = scrollLeft >= scrollWidth - 10; prevButton.style.opacity = isAtStart ? '0.4' : '1'; prevButton.style.pointerEvents = isAtStart ? 'none' : 'auto'; nextButton.style.opacity = isAtEnd ? '0.4' : '1'; nextButton.style.pointerEvents = isAtEnd ? 'none' : 'auto'; }; // Attach scroll listener slider.addEventListener('scroll', updateProgress); // Initial update updateProgress(); // Handle window resize const handleResize = () => { updateProgress(); positionButtons(); }; window.addEventListener('resize', handleResize); // Store cleanup references container._sliderCleanup = () => { slider.removeEventListener('scroll', updateProgress); window.removeEventListener('resize', handleResize); prevButton.removeEventListener('click', handlePrevClick); nextButton.removeEventListener('click', handleNextClick); progressContainer.remove(); leftFade.remove(); rightFade.remove(); buttonWrapper.remove(); }; } (function () { 'use strict'; const HEADING_SELECTORS = ['h1', 'h2:not(.grab-offer-modal-panel h2)']; const CARD_SELECTORS = [ '.grab-process-step', '.grab-features-step', '.grab-service-card', '.grab-hero-image-container', '.grab-about-image-wrapper', '.grab-offer-card' ]; const HEADING_THRESHOLD = 0.55; const CARD_THRESHOLD = 0.2; const STYLE_ID = 'gds-animation-styles'; const SCRIPT_MARKER = 'gds-animation-active'; if (window[SCRIPT_MARKER]) return; window[SCRIPT_MARKER] = true; function injectStyles() { if (document.getElementById(STYLE_ID)) return; const style = document.createElement('style'); style.id = STYLE_ID; style.textContent = ` h1, h2 { position: relative; } .text-line { display: block; opacity: 0; transform: translateY(100%); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); } h1.gds-highlight .text-line:first-child, h2.gds-highlight .text-line:first-child { opacity: 1; transform: translateY(0); transition-delay: 0s; } h1.gds-highlight .text-line:nth-child(2), h2.gds-highlight .text-line:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; } h1.gds-highlight .text-line:nth-child(3), h2.gds-highlight .text-line:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.8s; } h1.gds-highlight .text-line:nth-child(4), h2.gds-highlight .text-line:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 1.2s; } .grab-process-step, .grab-features-step, .grab-service-card, .grab-hero-image-container, .grab-about-image-wrapper, .grab-offer-card { opacity: 0; transform: translateY(30px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .grab-process-step.gds-card-visible, .grab-features-step.gds-card-visible, .grab-service-card.gds-card-visible, .grab-hero-image-container.gds-card-visible, .grab-about-image-wrapper.gds-card-visible, .grab-offer-card.gds-card-visible { opacity: 1; transform: translateY(0); } .grab-process-step:nth-child(1).gds-card-visible, .grab-features-step:nth-child(1).gds-card-visible, .grab-service-card:nth-child(1).gds-card-visible, .grab-hero-image-container:nth-child(1).gds-card-visible, .grab-about-image-wrapper:nth-child(1).gds-card-visible, .grab-offer-card:nth-child(1).gds-card-visible { transition-delay: 0s; } .grab-process-step:nth-child(2).gds-card-visible, .grab-features-step:nth-child(2).gds-card-visible, .grab-service-card:nth-child(2).gds-card-visible, .grab-hero-image-container:nth-child(2).gds-card-visible, .grab-about-image-wrapper:nth-child(2).gds-card-visible, .grab-offer-card:nth-child(2).gds-card-visible { transition-delay: 0.15s; } .grab-process-step:nth-child(3).gds-card-visible, .grab-features-step:nth-child(3).gds-card-visible, .grab-service-card:nth-child(3).gds-card-visible, .grab-hero-image-container:nth-child(3).gds-card-visible, .grab-about-image-wrapper:nth-child(3).gds-card-visible, .grab-offer-card:nth-child(3).gds-card-visible { transition-delay: 0.3s; } .grab-process-step:nth-child(4).gds-card-visible, .grab-features-step:nth-child(4).gds-card-visible, .grab-service-card:nth-child(4).gds-card-visible, .grab-hero-image-container:nth-child(4).gds-card-visible, .grab-about-image-wrapper:nth-child(4).gds-card-visible, .grab-offer-card:nth-child(4).gds-card-visible { transition-delay: 0.45s; } .grab-process-step:nth-child(5).gds-card-visible, .grab-features-step:nth-child(5).gds-card-visible, .grab-service-card:nth-child(5).gds-card-visible, .grab-hero-image-container:nth-child(5).gds-card-visible, .grab-about-image-wrapper:nth-child(5).gds-card-visible, .grab-offer-card:nth-child(5).gds-card-visible { transition-delay: 0.6s; } .grab-process-step:nth-child(6).gds-card-visible, .grab-features-step:nth-child(6).gds-card-visible, .grab-service-card:nth-child(6).gds-card-visible, .grab-hero-image-container:nth-child(6).gds-card-visible, .grab-about-image-wrapper:nth-child(6).gds-card-visible, .grab-offer-card:nth-child(6).gds-card-visible { transition-delay: 0.75s; } `; document.head.appendChild(style); } function saveOriginalContent(el) { if (!el.dataset.originalContent) { el.dataset.originalContent = el.innerHTML; } } function restoreOriginalContent(el) { if (el.dataset.originalContent) { el.innerHTML = el.dataset.originalContent; } } function wrapTextLines(element) { if (element.querySelector('.text-line')) return; saveOriginalContent(element); const hasChildElements = element.querySelector('span, strong, em, a'); if (hasChildElements) { const children = Array.from(element.childNodes).filter( node => node.textContent.trim() !== '' ); element.innerHTML = children .map(node => { const div = document.createElement('div'); div.className = 'text-line'; div.appendChild(node.cloneNode(true)); return div.outerHTML; }) .join(''); return; } const originalText = element.innerHTML; const words = originalText.split(' '); const computedStyle = window.getComputedStyle(element); const elementWidth = element.offsetWidth; const fontSize = parseFloat(computedStyle.fontSize); const fontFamily = computedStyle.fontFamily; const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); ctx.font = `${computedStyle.fontWeight} ${fontSize}px ${fontFamily}`; let lines = []; let currentLine = ''; words.forEach((word, index) => { const testLine = currentLine + (currentLine ? ' ' : '') + word; const lineWidth = ctx.measureText(testLine).width; let padding = 10; if (window.innerWidth <= 768) padding = 20; else if (window.innerWidth <= 1024) padding = 30; if (lineWidth > elementWidth - padding && currentLine !== '') { lines.push(currentLine); currentLine = word; } else { currentLine = testLine; } if (index === words.length - 1) lines.push(currentLine); }); element.innerHTML = lines .map(line => `

${line}

`) .join(''); } const observers = new WeakMap(); function observeHeading(el) { if (observers.has(el)) return; wrapTextLines(el); const io = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { el.classList.add('gds-highlight'); } else { el.classList.remove('gds-highlight'); } }); }, { root: null, threshold: HEADING_THRESHOLD }); io.observe(el); observers.set(el, io); } function observeCard(el) { if (observers.has(el)) return; const io = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { el.classList.add('gds-card-visible'); } else { el.classList.remove('gds-card-visible'); } }); }, { root: null, threshold: CARD_THRESHOLD }); io.observe(el); observers.set(el, io); } function init() { HEADING_SELECTORS.forEach(sel => { document.querySelectorAll(sel).forEach(el => observeHeading(el)); }); CARD_SELECTORS.forEach(sel => { document.querySelectorAll(sel).forEach(el => observeCard(el)); }); } function setupMutationObserver() { const mo = new MutationObserver(() => init()); mo.observe(document.documentElement, { childList: true, subtree: true }); } let resizeTimeout; function handleResize() { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(() => { document.querySelectorAll('h1, h2').forEach(el => { restoreOriginalContent(el); el.classList.remove('gds-highlight'); wrapTextLines(el); const rect = el.getBoundingClientRect(); if (rect.top < window.innerHeight * 0.45) el.classList.add('gds-highlight'); }); }, 250); } function setupSPAListeners() { const originalPushState = history.pushState; const originalReplaceState = history.replaceState; history.pushState = function () { originalPushState.apply(this, arguments); setTimeout(init, 100); }; history.replaceState = function () { originalReplaceState.apply(this, arguments); setTimeout(init, 100); }; window.addEventListener('popstate', () => setTimeout(init, 100)); window.addEventListener('hashchange', () => setTimeout(init, 100)); } function bootstrap() { injectStyles(); init(); setupMutationObserver(); setupSPAListeners(); window.addEventListener('resize', handleResize); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', bootstrap); } else { bootstrap(); } })(); /* ============================================================ Utility Banner above Navbar Variant 4 Re-injects the top bar (hours / Google reviews) Namespaced: .sg-utilbar | SPA-safe init/destroy ============================================================ */ (function () { const BANNER_CLASS = "sg-utilbar"; let observer = null; function buildBanner() { const wrap = document.createElement("div"); wrap.className = BANNER_CLASS + " hidden w-full bg-primary py-4 text-primaryContrast md:block font-pairing-secondary"; wrap.setAttribute("data-component", "sg-utilbar"); const star = ''; wrap.innerHTML = `

mon - fri: 9:00 AM – 5:00 PM

${star.repeat(5)}

5 stars on Google

`; return wrap; } function inject(root) { const nav = root.querySelector("nav.grab-navbar-variant-4"); if (!nav) return; const wrapper = nav.parentElement; if (!wrapper) return; // Idempotent: don't double-inject. if (wrapper.querySelector(":scope > ." + BANNER_CLASS)) return; wrapper.insertBefore(buildBanner(), nav); } function init(rootElement) { const root = rootElement || document; inject(root); if (observer) return; // already observing — keep idempotent observer = new MutationObserver(() => inject(document)); observer.observe(document.body, { childList: true, subtree: true }); } function destroy() { if (observer) { observer.disconnect(); observer = null; } document .querySelectorAll("." + BANNER_CLASS) .forEach((el) => el.remove()); } // Expose for the platform's SPA lifecycle hooks. window.sgUtilBar = { init, destroy }; init(document); })(); /******************************************************************/ (function () { 'use strict'; // ======================================== // CONFIGURATION - ADD YOUR SELECTORS HERE // ======================================== const IMAGE_SELECTORS = [ '.grab-service-hero img', '.grab-hero-section img', '.grab-contact-section img', '.grab-about-section img.grab-about-image', '.grab-cta-wrapper[style*="background-image"]', // Add more selectors below as needed: // '.your-section img', // '.another-section .your-image-class', ]; const IMAGE_QUALITY_SETTINGS = { width: 2000, // Image width (1000, 2000, 3000, etc.) quality: 95, // Quality (80-100, higher = better quality) format: 'auto', // Image format (auto, webp, jpg, png) lazyOptimization: false // Enable/disable lazy optimization }; const FADE_DURATION = 500; // Transition duration in milliseconds (300-800) // ======================================== // SCRIPT LOGIC - NO NEED TO EDIT BELOW // ======================================== const CONFIG = { targetSelectors: IMAGE_SELECTORS, imageKitDomain: 'ik.imagekit.io', newTransformations: IMAGE_QUALITY_SETTINGS, fadeDuration: FADE_DURATION }; // Add CSS for smooth transitions function injectStyles() { if (document.getElementById('hero-quality-improver-styles')) return; const style = document.createElement('style'); style.id = 'hero-quality-improver-styles'; style.textContent = ` .hero-image-transitioning { transition: opacity ${CONFIG.fadeDuration}ms ease-in-out; } .hero-image-fade-out { opacity: 0.7 !important; } .hero-image-fade-in { opacity: 1 !important; } `; document.head.appendChild(style); } // Function to improve image quality by modifying ImageKit URLs function improveImageQuality() { CONFIG.targetSelectors.forEach(selector => { const elements = document.querySelectorAll(selector); elements.forEach(element => { if (element.dataset.qualityImproved === 'true') return; // Check if it's an img element or element with background-image if (element.tagName === 'IMG') { processImgElement(element); } else { processBackgroundImage(element); } element.dataset.qualityImproved = 'true'; }); }); } // Process elements function processImgElement(img) { let updated = false; const newSrcset = img.srcset ? updateImageKitURLs(img.srcset) : null; const newSrc = img.src ? updateSingleURL(img.src) : null; if ((newSrcset && newSrcset !== img.srcset) || (newSrc && newSrc !== img.src)) { updated = true; img.classList.add('hero-image-transitioning'); img.classList.add('hero-image-fade-out'); setTimeout(() => { if (newSrcset) img.srcset = newSrcset; if (newSrc) img.src = newSrc; setTimeout(() => { img.classList.remove('hero-image-fade-out'); img.classList.add('hero-image-fade-in'); setTimeout(() => { img.classList.remove('hero-image-transitioning', 'hero-image-fade-in'); }, CONFIG.fadeDuration); }, 50); }, CONFIG.fadeDuration / 2); } } // Process elements with inline background-image styles function processBackgroundImage(element) { const style = element.getAttribute('style'); if (!style || !style.includes('background-image')) return; // Extract background-image URL const match = style.match(/background-image:\s*url$([^)]+)$/); if (!match) return; const originalUrl = match[1].replace(/['"]/g, ''); const newUrl = updateSingleURL(originalUrl); if (newUrl !== originalUrl) { element.classList.add('hero-image-transitioning'); element.classList.add('hero-image-fade-out'); setTimeout(() => { const newStyle = style.replace( /background-image:\s*url$[^)]+$/, `background-image:url(${newUrl})` ); element.setAttribute('style', newStyle); setTimeout(() => { element.classList.remove('hero-image-fade-out'); element.classList.add('hero-image-fade-in'); setTimeout(() => { element.classList.remove('hero-image-transitioning', 'hero-image-fade-in'); }, CONFIG.fadeDuration); }, 50); }, CONFIG.fadeDuration / 2); } } function updateImageKitURLs(srcsetString) { return srcsetString.split(',').map(srcEntry => { const parts = srcEntry.trim().split(' '); const url = parts[0]; const descriptor = parts[1] || ''; const newUrl = updateSingleURL(url); return descriptor ? `${newUrl} ${descriptor}` : newUrl; }).join(', '); } function updateSingleURL(url) { if (!url.includes(CONFIG.imageKitDomain)) return url; try { const urlObj = new URL(url, window.location.origin); if (urlObj.pathname.includes('/_next/image')) { const imageUrl = urlObj.searchParams.get('url'); if (imageUrl) { const decodedImageUrl = decodeURIComponent(imageUrl); const updatedImageUrl = updateImageKitTransformations(decodedImageUrl); urlObj.searchParams.set('url', updatedImageUrl); urlObj.searchParams.set('q', CONFIG.newTransformations.quality.toString()); } return urlObj.toString(); } else { return updateImageKitTransformations(url); } } catch (e) { console.warn('Error processing URL:', url, e); return url; } } function updateImageKitTransformations(url) { const trPattern = /\/tr:[^/]+\//; if (trPattern.test(url)) { const transformations = []; transformations.push(`w-${CONFIG.newTransformations.width}`); transformations.push(`f-${CONFIG.newTransformations.format}`); transformations.push(`q-${CONFIG.newTransformations.quality}`); const newTr = `/tr:${transformations.join(',')}/`; return url.replace(trPattern, newTr); } return url; } function init() { injectStyles(); improveImageQuality(); } // Extract section class names from selectors for MutationObserver function getSectionClassNames() { const classNames = new Set(); CONFIG.targetSelectors.forEach(selector => { const match = selector.match(/\.([\w-]+)/); if (match) classNames.add(match[1]); }); return Array.from(classNames); } const sectionClasses = getSectionClassNames(); const observer = new MutationObserver((mutations) => { let shouldProcess = false; mutations.forEach((mutation) => { if (mutation.addedNodes.length) { mutation.addedNodes.forEach((node) => { if (node.nodeType === 1) { if (node.classList && sectionClasses.some(cls => node.classList.contains(cls))) { shouldProcess = true; } else if (node.querySelector) { if (sectionClasses.some(cls => node.querySelector(`.${cls}`))) { shouldProcess = true; } } } }); } }); if (shouldProcess) { improveImageQuality(); } }); observer.observe(document.body, { childList: true, subtree: true }); const originalPushState = history.pushState; const originalReplaceState = history.replaceState; history.pushState = function () { originalPushState.apply(this, arguments); setTimeout(improveImageQuality, 50); }; history.replaceState = function () { originalReplaceState.apply(this, arguments); setTimeout(improveImageQuality, 50); }; window.addEventListener('popstate', () => { setTimeout(improveImageQuality, 50); }); window.addEventListener('hashchange', () => { setTimeout(improveImageQuality, 50); }); if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } setTimeout(improveImageQuality, 100); console.log('Image Quality Improver loaded - targeting:', CONFIG.targetSelectors.join(', ')); })();

Sitemap