-
-
+
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..38be689 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);
+}
+
+/* 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 */
+/* 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,180 @@ 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 */
+.faq-item::before {
+ content: '' !important;
+ position: absolute !important;
+ inset: -3px !important;
+ background: linear-gradient(90deg,
+ #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: 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;
+ 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; }