From 53aa4df907c3978da52d112b8ed2e9dbcedf16e4 Mon Sep 17 00:00:00 2001 From: Ryan Milly Date: Fri, 5 Dec 2025 20:59:25 -0800 Subject: [PATCH 1/2] Fix FAQ chasing border animation --- index.html | 341 +++++++++++++++++++------------------ script.js | 147 +++++++++++++++- styles.css | 480 +++++++++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 776 insertions(+), 192 deletions(-) diff --git a/index.html b/index.html index 2600b5e..1744730 100644 --- a/index.html +++ b/index.html @@ -50,100 +50,15 @@ "latitude": 45.3001, "longitude": -122.9734 }, - "areaServed": [ - { - "@type": "City", - "name": "Newberg" + "areaServed": { + "@type": "GeoCircle", + "geoMidpoint": { + "@type": "GeoCoordinates", + "latitude": 45.300118, + "longitude": -122.973157 }, - { - "@type": "City", - "name": "Dundee" - }, - { - "@type": "City", - "name": "McMinnville" - }, - { - "@type": "City", - "name": "Sherwood" - }, - { - "@type": "City", - "name": "Wilsonville" - }, - { - "@type": "City", - "name": "Tigard" - }, - { - "@type": "City", - "name": "Tualatin" - }, - { - "@type": "City", - "name": "Lake Oswego" - }, - { - "@type": "City", - "name": "West Linn" - }, - { - "@type": "City", - "name": "Oregon City" - }, - { - "@type": "City", - "name": "Portland" - }, - { - "@type": "City", - "name": "Beaverton" - }, - { - "@type": "City", - "name": "Hillsboro" - }, - { - "@type": "City", - "name": "Forest Grove" - }, - { - "@type": "City", - "name": "Cornelius" - }, - { - "@type": "City", - "name": "Dayton" - }, - { - "@type": "City", - "name": "Lafayette" - }, - { - "@type": "City", - "name": "Carlton" - }, - { - "@type": "City", - "name": "Amity" - }, - { - "@type": "City", - "name": "Yamhill" - }, - { - "@type": "City", - "name": "Woodburn" - }, - { - "@type": "City", - "name": "Canby" - }, - { - "@type": "City", - "name": "Salem" - } - ], + "geoRadius": "32187" + }, "sameAs": [ "" ] @@ -198,8 +113,110 @@
- -
+ +
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
@@ -273,24 +290,26 @@ - + + - - - - - - - + + + + + + + - + + - - - - - - + + + + + + @@ -490,10 +509,7 @@
-
- ★ - Trusted by 500+ Families in Yamhill County -
+

Bring the Magic of the
@@ -538,10 +554,31 @@

10+ Years

- ★★★★★ + ★★★★★ 4.9 Rating
+ + + +
+ + + + + + +
+
+ FREE GUIDE + Holiday Lights Decorating Tips +
+
+ + + +
+
@@ -749,7 +786,7 @@

What Newberg Families Are Saying

-
★★★★★
+
★★★★★
4.9 out of 5 based on 47+ Google reviews
@@ -830,78 +867,64 @@

Certifications & Credentials

Service Area Map

-
- - - - - - - - - - - - - - - - - - - - - - - - Primary Service Area - - - Extended Service Area - - - - - Newberg - +

We serve all areas within 20 miles of Newberg, Oregon

+
+ +
+ + + + + + +
-

Counties We Serve:

+

Counties Within Our 20-Mile Service Radius:

Yamhill County - Primary + Home Base
Washington County
Clackamas County
Multnomah County
Marion County
+
Polk County
- View All Cities We Serve + View All Cities We Serve (20-Mile Radius)
-
Yamhill County
-

Newberg, Dundee, McMinnville, Dayton, Lafayette, Carlton, Amity, Yamhill

+
Yamhill County (Home Base)
+

Newberg, Dundee, McMinnville, Dayton, Lafayette, Carlton, Amity, Yamhill, Sheridan, Willamina

Washington County
-

Sherwood, Wilsonville, Tigard, Tualatin, Beaverton, Hillsboro, Forest Grove, Cornelius

+

Sherwood, Tigard, Tualatin, King City, Durham, Beaverton, Hillsboro, Forest Grove, Cornelius, Gaston, Banks, North Plains

Clackamas County
-

Lake Oswego, West Linn, Oregon City, Canby

+

Wilsonville, Lake Oswego, West Linn, Oregon City, Canby, Aurora, Hubbard, Molalla

Multnomah County
-

Portland

+

Portland (SW), Lake Oswego, Milwaukie

Marion County
-

Woodburn, Salem

+

Woodburn, Salem, Keizer, St. Paul, Donald, Gervais

+
+
+
Polk County
+

Independence, Monmouth, Dallas

diff --git a/script.js b/script.js index bdb5a7e..4192fbd 100644 --- a/script.js +++ b/script.js @@ -11,6 +11,127 @@ document.addEventListener('DOMContentLoaded', function() { initScrollAnimations(); }); +// ======================================== +// SERVICE AREA MAP WITH RADIUS CIRCLE (Google Maps) +// ======================================== + +function initServiceAreaMap() { + // Check if map container exists + const mapContainer = document.getElementById('service-area-map'); + if (!mapContainer) return; + + // Newberg, Oregon coordinates + const newbergLocation = { lat: 45.300118, lng: -122.973157 }; + + // 30 miles in meters (30 * 1609.34) + const radiusInMeters = 48280; + + // Create the map with a clean, light style + const map = new google.maps.Map(mapContainer, { + center: newbergLocation, + zoom: 9, + mapTypeId: 'roadmap', + disableDefaultUI: false, + zoomControl: true, + mapTypeControl: false, + streetViewControl: false, + fullscreenControl: true, + styles: [ + // Subtle, clean style that's easy to read + { + featureType: "water", + elementType: "geometry", + stylers: [{ color: "#a3ccff" }] + }, + { + featureType: "landscape", + elementType: "geometry", + stylers: [{ color: "#f5f5f5" }] + }, + { + featureType: "road.highway", + elementType: "geometry", + stylers: [{ color: "#ffffff" }] + }, + { + featureType: "road.highway", + elementType: "geometry.stroke", + stylers: [{ color: "#dedede" }] + }, + { + featureType: "road.arterial", + elementType: "geometry", + stylers: [{ color: "#ffffff" }] + }, + { + featureType: "road.local", + elementType: "geometry", + stylers: [{ color: "#ffffff" }] + }, + { + featureType: "poi", + elementType: "geometry", + stylers: [{ color: "#e5e5e5" }] + }, + { + featureType: "poi.park", + elementType: "geometry", + stylers: [{ color: "#c5e8c5" }] + }, + { + featureType: "administrative", + elementType: "geometry.stroke", + stylers: [{ color: "#c9c9c9" }] + } + ] + }); + + // Draw the 30-mile radius circle with golden/green brand colors + const serviceAreaCircle = new google.maps.Circle({ + strokeColor: '#2C5530', + strokeOpacity: 0.9, + strokeWeight: 3, + fillColor: '#D4AF37', + fillOpacity: 0.2, + map: map, + center: newbergLocation, + radius: radiusInMeters + }); + + // Add a marker for Newberg (home base) + const marker = new google.maps.Marker({ + position: newbergLocation, + map: map, + title: 'PNWLights - Newberg, OR (Home Base)', + icon: { + path: google.maps.SymbolPath.CIRCLE, + scale: 12, + fillColor: '#DC2626', + fillOpacity: 1, + strokeColor: '#FFFFFF', + strokeWeight: 3 + } + }); + + // Info window for marker + const infoWindow = new google.maps.InfoWindow({ + content: ` +
+ PNWLights Home Base
+ Newberg, OR
+ 30-Mile Service Radius +
+ ` + }); + + marker.addListener('click', () => { + infoWindow.open(map, marker); + }); + + // Fit map to circle bounds + map.fitBounds(serviceAreaCircle.getBounds()); +} + // ======================================== // STICKY HEADER // ======================================== @@ -136,17 +257,41 @@ function initFAQAccordion() { // Alternative function for inline onclick (backward compatibility) function toggleFAQ(button) { const faqItem = button.closest('.faq-item'); + const faqAnswer = faqItem.querySelector('.faq-answer'); + const faqIcon = faqItem.querySelector('.faq-icon'); const isActive = faqItem.classList.contains('active'); + + // Ensure transition is set + faqAnswer.style.transition = 'max-height 0.4s ease-out'; + faqAnswer.style.overflow = 'hidden'; // Close all other FAQ items document.querySelectorAll('.faq-item').forEach(item => { if (item !== faqItem) { item.classList.remove('active'); + const answer = item.querySelector('.faq-answer'); + const icon = item.querySelector('.faq-icon'); + if (answer) { + answer.style.maxHeight = '0px'; + } + if (icon) { + icon.style.transform = 'rotate(0deg)'; + } } }); // Toggle current item - faqItem.classList.toggle('active'); + if (isActive) { + // Close it + faqItem.classList.remove('active'); + faqAnswer.style.maxHeight = '0px'; + if (faqIcon) faqIcon.style.transform = 'rotate(0deg)'; + } else { + // Open it + faqItem.classList.add('active'); + faqAnswer.style.maxHeight = faqAnswer.scrollHeight + 'px'; + if (faqIcon) faqIcon.style.transform = 'rotate(180deg)'; + } } // ======================================== diff --git a/styles.css b/styles.css index a26b6df..fcb1828 100644 --- a/styles.css +++ b/styles.css @@ -305,19 +305,80 @@ button { 50% { opacity: 0.7; } } -/* Moon */ +/* Moon - Larger */ .moon { position: absolute; - top: 80px; + top: 60px; right: 15%; - width: 80px; - height: 80px; + width: 120px; + height: 120px; background: radial-gradient(circle at 30% 30%, #fffde8 0%, #ffedc0 50%, #e8d5a0 100%); border-radius: 50%; box-shadow: - 0 0 40px rgba(255, 248, 200, 0.4), - 0 0 80px rgba(255, 240, 180, 0.2), - 0 0 120px rgba(255, 230, 150, 0.1); + 0 0 60px rgba(255, 248, 200, 0.5), + 0 0 100px rgba(255, 240, 180, 0.3), + 0 0 150px rgba(255, 230, 150, 0.15); +} + +/* Santa Sleigh Container */ +.santa-sleigh-container { + position: absolute; + top: 100px; + left: 0; + width: 100%; + height: 200px; + pointer-events: none; + z-index: 5; +} + +.santa-sleigh { + position: absolute; + width: 350px; + height: 120px; + animation: fly-across 25s linear infinite; +} + +@keyframes fly-across { + 0% { + left: -400px; + top: 120px; + transform: rotate(-5deg); + } + 30% { + top: 40px; + transform: rotate(-8deg); + } + 50% { + top: 20px; + transform: rotate(-3deg); + } + 70% { + top: 60px; + transform: rotate(2deg); + } + 100% { + left: 110%; + top: 140px; + transform: rotate(5deg); + } +} + +/* Magic trail sparkle animation */ +.magic-trail circle { + animation: sparkle 1.5s ease-in-out infinite; +} + +.magic-trail circle:nth-child(odd) { + animation-delay: 0.2s; +} + +.magic-trail circle:nth-child(3n) { + animation-delay: 0.5s; +} + +@keyframes sparkle { + 0%, 100% { opacity: 0.3; transform: scale(1); } + 50% { opacity: 0.9; transform: scale(1.3); } } /* Magic Particles */ @@ -633,48 +694,215 @@ button { z-index: 10; max-width: 800px; margin: 0 auto; - padding: 0 20px 180px; + padding: 0 20px 140px; } -/* Hero Badge */ -.hero-badge { +/* Free Guide Download CTA */ +.free-guide-cta { display: inline-flex; align-items: center; - gap: 10px; - background: rgba(255, 215, 0, 0.15); - border: 1px solid rgba(255, 215, 0, 0.3); + gap: 14px; + margin-top: 20px; + padding: 12px 24px 12px 16px; + background: linear-gradient(135deg, rgba(44, 85, 48, 0.9) 0%, rgba(30, 60, 34, 0.95) 100%); + border: 2px solid rgba(100, 200, 120, 0.5); border-radius: 50px; - padding: 10px 24px; - margin-bottom: 24px; - font-size: 14px; + text-decoration: none; + transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); + box-shadow: + 0 4px 20px rgba(44, 85, 48, 0.4), + 0 0 30px rgba(100, 200, 120, 0.15), + inset 0 1px 0 rgba(255, 255, 255, 0.1); + position: relative; + overflow: hidden; +} + +.free-guide-cta::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent 0%, + transparent 40%, + rgba(255, 255, 255, 0.2) 50%, + transparent 60%, + transparent 100% + ); + background-size: 200% 100%; + animation: guide-shimmer 4s ease-in-out infinite; +} + +@keyframes guide-shimmer { + 0% { background-position: 200% center; } + 100% { background-position: -200% center; } +} + +.free-guide-cta:hover { + transform: translateY(-3px) scale(1.02); + border-color: rgba(100, 200, 120, 0.8); + box-shadow: + 0 8px 30px rgba(44, 85, 48, 0.5), + 0 0 40px rgba(100, 200, 120, 0.25), + inset 0 1px 0 rgba(255, 255, 255, 0.15); +} + +.guide-icon-wrapper { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + background: rgba(255, 255, 255, 0.15); + border-radius: 50%; + flex-shrink: 0; +} + +.guide-icon-wrapper svg { + width: 22px; + height: 22px; + color: #90EE90; + filter: drop-shadow(0 0 4px rgba(144, 238, 144, 0.5)); +} + +.guide-text { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 2px; +} + +.guide-label { + font-size: 10px; + font-weight: 800; + letter-spacing: 1.5px; + color: #90EE90; + text-transform: uppercase; +} + +.guide-title { + font-size: 15px; font-weight: 600; - color: #ffd700; + color: #fff; white-space: nowrap; } -.badge-star { - font-size: 16px; +.guide-arrow { + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + background: rgba(255, 255, 255, 0.1); + border-radius: 50%; + margin-left: 4px; + transition: all 0.3s ease; +} + +.guide-arrow svg { + width: 16px; + height: 16px; + color: #fff; + transition: transform 0.3s ease; +} + +.free-guide-cta:hover .guide-arrow { + background: rgba(255, 255, 255, 0.2); +} + +.free-guide-cta:hover .guide-arrow svg { + transform: translateX(3px); } -/* Hero Headline - Whimsical Style */ +/* Mobile responsive */ +@media (max-width: 480px) { + .free-guide-cta { + padding: 10px 18px 10px 12px; + gap: 10px; + } + + .guide-icon-wrapper { + width: 36px; + height: 36px; + } + + .guide-icon-wrapper svg { + width: 18px; + height: 18px; + } + + .guide-title { + font-size: 13px; + } + + .guide-arrow { + width: 24px; + height: 24px; + } +} + +/* Hero Badge - COMPLETELY REMOVED */ +.hero-badge, +.trusted-badge, +.trusted-stars, +.trusted-text, +.badge-star, +.badge-stars { + display: none !important; + visibility: hidden !important; + opacity: 0 !important; + height: 0 !important; + width: 0 !important; + overflow: hidden !important; +} + +/* Hero Headline - Whimsical Style with Text Shimmer */ .hero-headline { font-size: 52px; font-weight: 800; margin-bottom: 20px; line-height: 1.15; - color: #fff; - text-shadow: - 0 0 40px rgba(255, 200, 100, 0.3), - 0 4px 20px rgba(0, 0, 0, 0.5); letter-spacing: -1px; + background: linear-gradient( + 90deg, + #ffd700 0%, + #ffd700 40%, + #ffffff 50%, + #ffd700 60%, + #ffd700 100% + ); + background-size: 200% 100%; + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + animation: text-shimmer 4s ease-in-out infinite; + filter: drop-shadow(0 0 40px rgba(255, 215, 0, 0.4)) drop-shadow(0 4px 20px rgba(0, 0, 0, 0.5)); +} + +@keyframes text-shimmer { + 0% { background-position: 200% center; } + 100% { background-position: -200% center; } } .headline-accent { - color: #ffd700; display: block; - text-shadow: - 0 0 30px rgba(255, 215, 0, 0.5), - 0 0 60px rgba(255, 180, 50, 0.3); + background: linear-gradient( + 90deg, + #ffd700 0%, + #ffd700 40%, + #ffffff 50%, + #ffd700 60%, + #ffd700 100% + ); + background-size: 200% 100%; + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + animation: text-shimmer 4s ease-in-out infinite; + filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.5)) drop-shadow(0 0 60px rgba(255, 180, 50, 0.3)); } /* Hero Supporting Text */ @@ -781,7 +1009,7 @@ button { color: #ffd700; } -.trust-item-hero .stars { +.trust-item-hero .rating-stars { color: #ffd700; font-size: 14px; letter-spacing: 2px; @@ -799,11 +1027,21 @@ button { } .moon { - width: 50px; - height: 50px; + width: 80px; + height: 80px; top: 70px; right: 10%; } + + .santa-sleigh-container { + top: 80px; + height: 150px; + } + + .santa-sleigh { + width: 250px; + height: 90px; + } .hero-badge { font-size: 12px; @@ -1783,7 +2021,7 @@ section { margin-bottom: 15px; border: 1px solid rgba(255, 215, 0, 0.2); box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5); - overflow: hidden; + /* overflow: hidden; - REMOVED to allow accordion to expand */ } .faq-question { @@ -3565,3 +3803,181 @@ body.modal-open { overflow: hidden; z-index: 1; } + +/* === FAQ ACCORDION COMPLETE FIX === */ +.faq-item { + position: relative !important; + background: linear-gradient(135deg, rgba(10, 22, 40, 0.95) 0%, rgba(27, 40, 56, 0.95) 100%) !important; + border: none !important; + border-radius: 8px !important; + margin-bottom: 15px !important; + overflow: visible !important; + z-index: 1 !important; +} + +/* Chasing light border */ +.faq-item::before { + content: '' !important; + position: absolute !important; + top: -3px !important; + left: -3px !important; + right: -3px !important; + bottom: -3px !important; + background: linear-gradient(90deg, + rgba(255, 51, 51, 0.8), + rgba(51, 255, 51, 0.8), + rgba(255, 255, 51, 0.8), + rgba(51, 204, 255, 0.8), + rgba(255, 51, 51, 0.8), + rgba(51, 255, 51, 0.8), + rgba(255, 255, 51, 0.8), + rgba(51, 204, 255, 0.8), + rgba(255, 51, 51, 0.8)) !important; + background-size: 200% 100% !important; + border-radius: 10px !important; + z-index: -2 !important; + animation: light-chase 4s linear infinite !important; + opacity: 0.7 !important; + display: block !important; +} + +/* Dark inner background */ +.faq-item::after { + content: '' !important; + position: absolute !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + background: linear-gradient(135deg, rgba(10, 22, 40, 0.98) 0%, rgba(27, 40, 56, 0.98) 100%) !important; + border-radius: 8px !important; + z-index: -1 !important; + display: block !important; +} + +/* Stagger the FAQ item animations */ +.faq-item:nth-child(1)::before { animation-delay: 0s !important; } +.faq-item:nth-child(2)::before { animation-delay: 0.3s !important; } +.faq-item:nth-child(3)::before { animation-delay: 0.6s !important; } +.faq-item:nth-child(4)::before { animation-delay: 0.9s !important; } +.faq-item:nth-child(5)::before { animation-delay: 1.2s !important; } +.faq-item:nth-child(6)::before { animation-delay: 1.5s !important; } + +.faq-question { + position: relative !important; + z-index: 2 !important; + cursor: pointer !important; + background: transparent !important; +} + +.faq-answer { + position: relative !important; + z-index: 2 !important; + max-height: 0; + overflow: hidden; + transition: max-height 0.4s ease-out; +} + +.faq-item.active .faq-answer { + max-height: 500px; +} + +.faq-item.active .faq-icon { + transform: rotate(180deg) !important; +} + +/* ======================================== + FAQ CHASING BORDER FIX - FINAL OVERRIDE + ======================================== */ + +/* New keyframes to avoid conflicts */ +@keyframes faq-light-chase { + 0% { background-position: 0% 50%; } + 100% { background-position: 200% 50%; } +} + +/* ======================================== + FAQ CHASING BORDER - FINAL WORKING FIX + Uses positive z-index stacking like gallery-item + ======================================== */ + +.faq-item { + position: relative !important; + background: transparent !important; + border: none !important; + border-bottom: none !important; + border-radius: 8px !important; + margin-bottom: 15px !important; + overflow: visible !important; + box-shadow: none !important; + z-index: 0 !important; +} + +/* Animated gradient border - sits behind everything */ +.faq-item::before { + content: '' !important; + position: absolute !important; + top: -3px !important; + left: -3px !important; + right: -3px !important; + bottom: -3px !important; + background: linear-gradient(90deg, + rgba(255, 51, 51, 0.9), + rgba(51, 255, 51, 0.9), + rgba(255, 255, 51, 0.9), + rgba(51, 204, 255, 0.9), + rgba(255, 51, 51, 0.9), + rgba(51, 255, 51, 0.9), + rgba(255, 255, 51, 0.9), + rgba(51, 204, 255, 0.9), + rgba(255, 51, 51, 0.9)) !important; + background-size: 200% 100% !important; + border-radius: 11px !important; + z-index: 1 !important; + animation: light-chase 4s linear infinite !important; + pointer-events: none !important; +} + +/* Dark background - covers most of the gradient, leaving border visible */ +.faq-item::after { + content: '' !important; + position: absolute !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + background: linear-gradient(135deg, rgba(10, 22, 40, 0.99) 0%, rgba(27, 40, 56, 0.99) 100%) !important; + border-radius: 8px !important; + z-index: 2 !important; + pointer-events: none !important; +} + +/* Content needs to be above both pseudo-elements */ +.faq-question { + position: relative !important; + z-index: 3 !important; + background: transparent !important; +} + +.faq-answer { + position: relative !important; + z-index: 3 !important; +} + +.faq-answer p { + position: relative !important; + z-index: 3 !important; +} + +.faq-icon { + position: relative !important; + z-index: 3 !important; +} + +/* Stagger animations */ +.faq-item:nth-child(1)::before { animation-delay: 0s !important; } +.faq-item:nth-child(2)::before { animation-delay: 0.5s !important; } +.faq-item:nth-child(3)::before { animation-delay: 1s !important; } +.faq-item:nth-child(4)::before { animation-delay: 1.5s !important; } +.faq-item:nth-child(5)::before { animation-delay: 2s !important; } +.faq-item:nth-child(6)::before { animation-delay: 2.5s !important; } From 3c7eddca4b5fd1103a031586102b74410d55661c Mon Sep 17 00:00:00 2001 From: Ryan Milly Date: Sat, 6 Dec 2025 08:40:53 -0800 Subject: [PATCH 2/2] FAQ section updates - border styling and animation attempts --- styles.css | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/styles.css b/styles.css index fcb1828..38be689 100644 --- a/styles.css +++ b/styles.css @@ -3913,31 +3913,30 @@ body.modal-open { z-index: 0 !important; } -/* Animated gradient border - sits behind everything */ +/* Animated gradient border */ .faq-item::before { content: '' !important; position: absolute !important; - top: -3px !important; - left: -3px !important; - right: -3px !important; - bottom: -3px !important; + inset: -3px !important; background: linear-gradient(90deg, - rgba(255, 51, 51, 0.9), - rgba(51, 255, 51, 0.9), - rgba(255, 255, 51, 0.9), - rgba(51, 204, 255, 0.9), - rgba(255, 51, 51, 0.9), - rgba(51, 255, 51, 0.9), - rgba(255, 255, 51, 0.9), - rgba(51, 204, 255, 0.9), - rgba(255, 51, 51, 0.9)) !important; - background-size: 200% 100% !important; + #ff3333 0%, + #33ff33 25%, + #ffff33 50%, + #33ccff 75%, + #ff3333 100%) !important; + background-size: 300% 100% !important; border-radius: 11px !important; z-index: 1 !important; - animation: light-chase 4s linear infinite !important; + animation: faq-chase 2s linear infinite !important; pointer-events: none !important; } +@keyframes faq-chase { + 0% { background-position: 0% 50%; filter: hue-rotate(0deg); } + 50% { background-position: 150% 50%; filter: hue-rotate(180deg); } + 100% { background-position: 300% 50%; filter: hue-rotate(360deg); } +} + /* Dark background - covers most of the gradient, leaving border visible */ .faq-item::after { content: '' !important;