/* Main Timeline Wrapper – Background dihapus */ .services-timeline-wrapper { max-width: 400px; margin: 0; padding: 1rem 0; font-family: ‘Arial’, sans-serif; background: transparent; /* Background blur dihapus */ } .timeline-container { position: relative; padding: 0 2rem; } /* Timeline Line – Aligned with dot centers */ .timeline-container::before { content: ”; position: absolute; left: 37px; /* Adjusted to align with dot centers */ top: 0; bottom: 0; width: 4px; /* Made slightly thinner for cleaner look */ background: #B4A6A2; opacity: 0.6; } /* Timeline Items – Clean spacing like original */ .timeline-item { position: relative; margin-bottom: 2rem; padding-left: 3rem; cursor: pointer; transition: all 0.2s ease; } .timeline-item:last-child { margin-bottom: 0; } /* Timeline Markers – Positioned to center on the line */ .timeline-marker { position: absolute; left: -0.5rem; /* Adjusted to center dots on the line */ top: 1px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; z-index: 2; } .timeline-dot { width: 20px; height: 20px; border-radius: 50%; background: #B4A6A2; transition: all 0.3s ease; opacity: 1; z-index: 1; } /* Active State – Lighter dot for service page */ .timeline-item.active .timeline-dot { background: #f5a524; width: 20px; height: 20px; opacity: 1; box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.2); } .timeline-item.active .service-title { color: #f5a524; font-weight: 700; } /* Timeline Content – Minimal like original */ .timeline-content { padding: 0; background: transparent; border: none; box-shadow: none; } /* Service Titles – Match original typography */ .service-title { margin: 0; font-size: 1rem; font-weight: 500; letter-spacing: 0.5px; color: #fffdfc; text-transform: uppercase; transition: color 0.3s ease; line-height: 1.2; } /* Hover Effects – Subtle like original */ .timeline-item:hover .timeline-dot { background: #f5a524; opacity: 1; } .timeline-item:hover .service-title { color: #f5a524; } .timeline-item.active:hover .timeline-dot { background: #f5a524; } .timeline-item.active:hover .service-title { color: #f5a524; } /* Responsive Design */ @media (max-width: 768px) { .services-timeline-wrapper { max-width: 100%; padding: 1rem 0; margin: 0 1rem; } .timeline-container { padding: 0 1rem; } .timeline-container::before { left: 25px; /* Adjusted for mobile */ width: 2px; } .timeline-marker { left: 0.5rem; /* Adjusted for mobile alignment */ } .timeline-item { margin-bottom: 2rem; padding-left: 2.3rem; } .service-title { font-size: 0.9rem; letter-spacing: 0.2px; } } @media (max-width: 480px) { .services-timeline-wrapper { padding: 0.8rem 0; } .timeline-container::before { left: 23px; /* Fine-tuned for small screens */ } .timeline-marker { left: 0.3rem; } .timeline-item { margin-bottom: 1.3rem; } .service-title { font-size: 0.85rem; } .timeline-dot { width: 18px; height: 18px; } .timeline-item.active .timeline-dot { width: 18px; height: 18px; } } document.addEventListener(‘DOMContentLoaded’, function() { console.log(‘Services Timeline initialized’); console.log(‘Current URL:’, window.location.href); console.log(‘Current pathname:’, window.location.pathname); // Fungsi utama untuk deteksi halaman aktif function detectActiveService() { const currentPath = window.location.pathname; const currentUrl = window.location.href; console.log(‘Detecting active service for:’, currentPath); // Clear semua active state dulu document.querySelectorAll(‘.timeline-item’).forEach(item => { item.classList.remove(‘active’); }); let activeFound = false; // Loop through semua timeline items document.querySelectorAll(‘.timeline-item’).forEach(item => { const serviceSlug = item.getAttribute(‘data-service’); const servicePage = item.getAttribute(‘data-page’); console.log(`Checking service: ${serviceSlug}`); console.log(`Service page: ${servicePage}`); // Method 1: Exact path match if (servicePage && currentPath === servicePage) { console.log(`✓ Exact path match found: ${serviceSlug}`); item.classList.add(‘active’); activeFound = true; return; } // Method 2: Path contains service slug if (currentPath.includes(‘/’ + serviceSlug)) { console.log(`✓ Path contains service slug: ${serviceSlug}`); item.classList.add(‘active’); activeFound = true; return; } // Method 3: URL contains service slug if (currentUrl.includes(serviceSlug)) { console.log(`✓ URL contains service slug: ${serviceSlug}`); item.classList.add(‘active’); activeFound = true; return; } // Method 4: Check for WordPress-style URLs if (currentPath.includes(‘/service/’) && currentPath.includes(serviceSlug)) { console.log(`✓ WordPress-style URL match: ${serviceSlug}`); item.classList.add(‘active’); activeFound = true; return; } // Method 5: Check for query parameters const urlParams = new URLSearchParams(window.location.search); if (urlParams.get(‘service’) === serviceSlug) { console.log(`✓ Query parameter match: ${serviceSlug}`); item.classList.add(‘active’); activeFound = true; return; } }); if (!activeFound) { console.log(‘No active service detected’); // Untuk testing – set kitchen-remodels sebagai active jika URL mengandung ‘kitchen’ if (currentUrl.includes(‘kitchen’)) { const kitchenItem = document.querySelector(‘[data-service=”kitchen-remodels”]’); if (kitchenItem) { kitchenItem.classList.add(‘active’); console.log(‘✓ Fallback: Set kitchen-remodels as active’); } } } // Log final status const activeItems = document.querySelectorAll(‘.timeline-item.active’); console.log(`Final result: ${activeItems.length} active item(s)`); activeItems.forEach(item => { console.log(`Active service: ${item.getAttribute(‘data-service’)}`); }); } // Jalankan deteksi awal detectActiveService(); // Re-run ketika URL berubah window.addEventListener(‘popstate’, detectActiveService); window.addEventListener(‘hashchange’, detectActiveService); // Untuk WordPress atau sistem yang menggunakan AJAX navigation if (typeof jQuery !== ‘undefined’) { jQuery(document).on(‘ready’, detectActiveService); } // Manual trigger untuk external use window.ServicesTimeline = { detectActive: detectActiveService, setActive: function(serviceSlug) { console.log(`Manually setting active: ${serviceSlug}`); document.querySelectorAll(‘.timeline-item’).forEach(item => { item.classList.remove(‘active’); if (item.getAttribute(‘data-service’) === serviceSlug) { item.classList.add(‘active’); console.log(`✓ Manually set active: ${serviceSlug}`); } }); } }; // Click handler untuk navigation (opsional) document.querySelectorAll(‘.timeline-item’).forEach(item => { item.addEventListener(‘click’, function() { const servicePage = this.getAttribute(‘data-page’); const serviceSlug = this.getAttribute(‘data-service’); console.log(`Timeline item clicked: ${serviceSlug}`); if (servicePage && servicePage !== ‘#’) { console.log(`Navigating to: ${servicePage}`); window.location.href = servicePage; } }); }); // Debug info setTimeout(() => { console.log(‘=== SERVICES TIMELINE DEBUG INFO ===’); console.log(‘Current URL:’, window.location.href); console.log(‘Current pathname:’, window.location.pathname); console.log(‘Available services:’); document.querySelectorAll(‘.timeline-item’).forEach(item => { const service = item.getAttribute(‘data-service’); const page = item.getAttribute(‘data-page’); const isActive = item.classList.contains(‘active’); console.log(`- ${service}: ${page} ${isActive ? ‘(ACTIVE)’ : ”}`); }); }, 500); }); // Fungsi untuk WordPress integration function initServicesTimelineForWordPress() { if (window.ServicesTimeline) { console.log(‘Re-initializing Services Timeline for WordPress’); window.ServicesTimeline.detectActive(); } } // Auto-detect jika di WordPress if (typeof wp !== ‘undefined’) { document.addEventListener(‘DOMContentLoaded’, function() { setTimeout(initServicesTimelineForWordPress, 1000); }); }