Automotive theme: site-wide metallic palette, bold layout, unique UI

formsubmit-quote-form.html

@@ -1,41 +1,44 @@
-<!-- Consistent Call/Text Contact Block -->
-<div class="w-full flex flex-col items-center mb-6">
-    <a href="tel:+17154219792" class="text-2xl font-bold text-amber-400 hover:text-amber-300 transition-colors">Call
+<!-- Automotive Themed Contact Block -->
+<div class="w-full flex flex-col items-center mb-8">
+    <a href="tel:+17154219792"
+        class="text-2xl font-extrabold text-accent-yellow hover:text-accent-red transition-colors tracking-wide drop-shadow">Call
         Hooper Automotive: (715) 421-9792</a>
-    <span class="text-green-200 text-sm mt-1">2020 4th Street South, Wisconsin Rapids, WI 54494 &bull; Wood
+    <span class="text-automotive-200 text-sm mt-1">2020 4th Street South, Wisconsin Rapids, WI 54494 &bull; Wood
         County</span>
 </div>
-<!-- BuckRub Taxidermy Quote Request Form (Formsubmit.co) -->
+<!-- Automotive Quote Request Form -->
 <form action="https://formsubmit.co/hooperautorepair70@gmail.com" method="POST"
-    class="max-w-lg mx-auto bg-green-900/80 p-6 rounded-xl shadow-lg space-y-4">
+    class="max-w-lg mx-auto bg-automotive-700/90 p-8 rounded-2xl shadow-2xl border-4 border-accent-red space-y-6">
     <input type="hidden" name="_cc" value="dondlingergeneralcontracting@gmail.com">
     <input type="hidden" name="_captcha" value="false">
     <input type="hidden" name="_template" value="table">
-    <h2 class="text-2xl font-bold text-green-200 mb-4">Request Service Estimate - Hooper Automotive LLC</h2>
-    <p class="text-green-100 mb-4">Get a fast, friendly estimate from Hooper Automotive! Tell us about your vehicle's
-        needs and how we can help you.<br>Address: 2020 4th Street South, Wisconsin Rapids, WI 54494<br>Phone: (715)
-        421-9792<br>Email: <a href="mailto:hooperautorepair70@gmail.com"
-            class="underline">hooperautorepair70@gmail.com</a></p>
+    <h2 class="text-3xl font-extrabold text-accent-red mb-4 tracking-wide">Request Service Estimate</h2>
+    <p class="text-automotive-100 mb-4 font-semibold">Get a fast, friendly estimate from Hooper Automotive!<br>Address:
+        2020 4th Street South, Wisconsin Rapids, WI 54494<br>Phone: <span class="text-accent-yellow">(715)
+            421-9792</span><br>Email: <a href="mailto:hooperautorepair70@gmail.com"
+            class="underline text-accent-yellow">hooperautorepair70@gmail.com</a></p>
     <div>
-        <label for="name" class="block text-green-100 font-semibold mb-1">Name</label>
+        <label for="name" class="block text-accent-yellow font-semibold mb-1">Name</label>
         <input type="text" id="name" name="name" required
-            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white" placeholder="Your Name">
+            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50"
+            placeholder="Your Name">
     </div>
     <div>
-        <label for="email" class="block text-green-100 font-semibold mb-1">Email</label>
+        <label for="email" class="block text-accent-yellow font-semibold mb-1">Email</label>
         <input type="email" id="email" name="email" required
-            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white"
+            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50"
             placeholder="you@email.com">
     </div>
     <div>
-        <label for="phone" class="block text-green-100 font-semibold mb-1">Phone</label>
+        <label for="phone" class="block text-accent-yellow font-semibold mb-1">Phone</label>
         <input type="tel" id="phone" name="phone"
-            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white" placeholder="(optional)">
+            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50"
+            placeholder="(optional)">
     </div>
     <div>
-        <label for="service" class="block text-green-100 font-semibold mb-1">Service Requested</label>
+        <label for="service" class="block text-accent-yellow font-semibold mb-1">Service Requested</label>
         <select id="service" name="service" required
-            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white">
+            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50">
             <option value="">Select a service</option>
             <option value="Oil Change">Oil Change</option>
             <option value="Brake Service">Brake Service</option>
@@ -57,25 +60,25 @@
         </select>
     </div>
     <div>
-        <label for="vehicle" class="block text-green-100 font-semibold mb-1">Vehicle Make/Model/Year</label>
+        <label for="vehicle" class="block text-accent-yellow font-semibold mb-1">Vehicle Make/Model/Year</label>
         <input type="text" id="vehicle" name="vehicle"
-            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white"
+            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50"
             placeholder="e.g. 2018 Honda Civic, 2015 Ford F-150">
     </div>
     <div>
-        <label for="mileage" class="block text-green-100 font-semibold mb-1">Mileage</label>
+        <label for="mileage" class="block text-accent-yellow font-semibold mb-1">Mileage</label>
         <input type="text" id="mileage" name="mileage"
-            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white"
+            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50"
             placeholder="e.g. 85,000 miles">
     </div>
     <div>
-        <label for="details" class="block text-green-100 font-semibold mb-1">Problem Description</label>
+        <label for="details" class="block text-accent-yellow font-semibold mb-1">Problem Description</label>
         <textarea id="details" name="details" rows="4"
-            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white"
+            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50"
             placeholder="Describe the issue, symptoms, or service needed..."></textarea>
     </div>
     <div>
-        <label class="block text-green-100 font-semibold mb-1">Preferred Contact Method</label>
+        <label class="block text-accent-yellow font-semibold mb-1">Preferred Contact Method</label>
         <div class="flex gap-4 mb-2">
             <label class="inline-flex items-center"><input type="radio" name="contact_method" value="Phone"
                     class="mr-2">Phone</label>
@@ -88,9 +91,9 @@
         </div>
     </div>
     <div>
-        <label for="best_time" class="block text-green-100 font-semibold mb-1">Best Time to Contact</label>
+        <label for="best_time" class="block text-accent-yellow font-semibold mb-1">Best Time to Contact</label>
         <select id="best_time" name="best_time"
-            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white">
+            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50">
             <option value="">Select a time</option>
             <option value="Morning">Morning</option>
             <option value="Afternoon">Afternoon</option>
@@ -99,9 +102,9 @@
         </select>
     </div>
     <div>
-        <label for="hear_about" class="block text-green-100 font-semibold mb-1">How did you hear about us?</label>
+        <label for="hear_about" class="block text-accent-yellow font-semibold mb-1">How did you hear about us?</label>
         <select id="hear_about" name="hear_about"
-            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white">
+            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50">
             <option value="">Select an option</option>
             <option value="Google Search">Google Search</option>
             <option value="Facebook">Facebook</option>
@@ -113,7 +116,7 @@
         </select>
     </div>
     <div>
-        <label class="block text-green-100 font-semibold mb-1">How soon do you need this?</label>
+        <label class="block text-accent-yellow font-semibold mb-1">How soon do you need this?</label>
         <div class="flex gap-2 mb-2">
             <label class="inline-flex items-center"><input type="radio" name="urgency" value="ASAP"
                     class="mr-2">ASAP</label>
@@ -127,10 +130,10 @@
     </div>
     <div class="flex items-center mb-2">
         <input type="checkbox" id="newsletter" name="newsletter" value="Yes" class="mr-2">
-        <label for="newsletter" class="text-green-100">Sign me up for news, tips, and special offers!</label>
+        <label for="newsletter" class="text-accent-yellow">Sign me up for news, tips, and special offers!</label>
     </div>
     <button type="submit"
-        class="w-full bg-green-600 hover:bg-green-500 text-white font-bold py-3 rounded-lg transition-colors">Send
+        class="w-full bg-accent-red hover:bg-accent-yellow text-white hover:text-automotive-700 font-extrabold py-4 rounded-lg transition-colors shadow-xl uppercase tracking-wider">Send
         Request</button>
 </form>
-<!-- End BuckRub Taxidermy Quote Request Form -->
+<!-- End Automotive Quote Request Form -->

gallery.html

@@ -7,11 +7,40 @@
     <title>Hooper Auto - Service Gallery</title>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        automotive: {
+                            50: '#f3f4f6',
+                            100: '#e5e7eb',
+                            200: '#d1d5db',
+                            300: '#9ca3af',
+                            400: '#6b7280',
+                            500: '#374151',
+                            600: '#1f2937',
+                            700: '#111827',
+                            800: '#18181b',
+                            900: '#0f0f10',
+                        },
+                        accent: {
+                            red: '#e11d48',
+                            yellow: '#fbbf24',
+                        }
+                    },
+                    fontFamily: {
+                        'body': ['Inter', 'Arial', 'sans-serif'],
+                    }
+                }
+            }
+        }
+    </script>
     <style>
         body {
-            font-family: 'Inter', Georgia, serif;
-            background: linear-gradient(135deg, #0f4223 0%, #18392b 100%);
-            color: #f0fdf4;
+            font-family: 'Inter', Arial, sans-serif;
+            background: linear-gradient(135deg, #18181b 0%, #374151 100%);
+            color: #f3f4f6;
             min-height: 100vh;
             margin: 0;
         }
@@ -29,15 +58,17 @@
             position: relative;
             border-radius: 2rem;
             overflow: hidden;
-            box-shadow: 0 12px 48px -12px #4ade80cc, 0 2px 16px #000a;
-            background: linear-gradient(120deg, #14532d 60%, #166534 100%);
-            transition: box-shadow 0.3s, transform 0.3s;
+            box-shadow: 0 12px 48px -12px #e11d48cc, 0 2px 16px #000a;
+            background: linear-gradient(120deg, #374151 60%, #1f2937 100%);
+            border: 4px solid #fbbf24;
+            transition: box-shadow 0.3s, transform 0.3s, border 0.3s;
             cursor: pointer;
         }
 
         .novel-card:hover {
-            box-shadow: 0 24px 80px -10px #facc15cc, 0 2px 24px #000a;
-            transform: scale(1.03) rotate(-1deg);
+            box-shadow: 0 24px 80px -10px #e11d48cc, 0 2px 24px #000a;
+            border: 4px solid #e11d48;
+            transform: scale(1.04) rotate(-1deg);
             z-index: 2;
         }
 
@@ -51,18 +82,18 @@
         }
 
         .novel-card:hover .novel-img {
-            filter: grayscale(0%) brightness(1.05) contrast(1.12) drop-shadow(0 8px 32px #4ade80cc);
-            transform: scale(1.04);
+            filter: grayscale(0%) brightness(1.05) contrast(1.12) drop-shadow(0 8px 32px #e11d48cc);
+            transform: scale(1.06);
         }
 
         .novel-caption {
             padding: 1.1rem 1.5rem 1.2rem 1.5rem;
             font-size: 1.18rem;
-            color: #f0fdf4;
-            background: linear-gradient(90deg, #166534 60%, #14532d 100%);
+            color: #fbbf24;
+            background: linear-gradient(90deg, #1f2937 60%, #374151 100%);
             border-radius: 0 0 2rem 2rem;
             text-align: center;
-            font-weight: 600;
+            font-weight: 700;
             letter-spacing: 0.01em;
             box-shadow: 0 2px 12px #0002;
         }
@@ -73,7 +104,7 @@
             left: 0;
             right: 0;
             bottom: 0;
-            background: rgba(10, 30, 20, 0.97);
+            background: rgba(24, 24, 27, 0.97);
             z-index: 1000;
             display: flex;
             align-items: center;
@@ -92,8 +123,8 @@
             max-width: 92vw;
             max-height: 88vh;
             border-radius: 2.5rem;
-            box-shadow: 0 8px 64px #4ade80cc, 0 2px 24px #000a;
-            background: #18392b;
+            box-shadow: 0 8px 64px #e11d48cc, 0 2px 24px #000a;
+            background: #374151;
             animation: popin 0.3s cubic-bezier(.4, 2, .6, 1);
         }
 
@@ -114,8 +145,8 @@
             top: 2.5vw;
             right: 2.5vw;
             font-size: 2.5rem;
-            color: #facc15;
-            background: rgba(20, 40, 30, 0.7);
+            color: #e11d48;
+            background: rgba(55, 65, 81, 0.7);
             border: none;
             border-radius: 1.5rem;
             padding: 0.2em 0.7em 0.2em 0.7em;
@@ -126,8 +157,8 @@
         }
 
         .novel-close:hover {
-            background: #facc15;
-            color: #14532d;
+            background: #fbbf24;
+            color: #374151;
         }
 
         @media (max-width: 700px) {
@@ -149,11 +180,16 @@
 </head>
 
 <body>
-    <header class="py-4 px-4 flex justify-between items-center bg-green-900/90 shadow-lg sticky top-0 z-50">
-        <h1 class="text-2xl font-bold text-green-200 tracking-tight">Hooper Automotive LLC Service Gallery</h1>
-        <a href="index.html" class="text-amber-400 font-bold text-lg hover:text-amber-300 transition-colors">Home</a>
-        <span class="ml-4 text-green-100 text-sm">2020 4th Street South, Wisconsin Rapids, WI &bull; (715)
-            421-9792</span>
+    <header
+        class="py-4 px-4 flex justify-between items-center bg-gradient-to-r from-automotive-700 via-automotive-600 to-automotive-900 shadow-xl sticky top-0 z-50 border-b-4 border-accent-red">
+        <h1 class="text-3xl font-extrabold text-accent-red tracking-tight drop-shadow">Hooper Automotive LLC Service
+            Gallery</h1>
+        <div class="flex items-center gap-4">
+            <a href="index.html"
+                class="text-accent-yellow font-bold text-lg hover:text-accent-red transition-colors">Home</a>
+            <span class="ml-4 text-automotive-100 text-sm">2020 4th Street South, Wisconsin Rapids, WI &bull; (715)
+                421-9792</span>
+        </div>
     </header>
     <main>
         <div class="novel-gallery">

index.html

@@ -18,33 +18,25 @@
             theme: {
                 extend: {
                     colors: {
-                        primary: {
-                            50: '#f0fdf4',
-                            100: '#dcfce7',
-                            200: '#bbf7d0',
-                            300: '#86efac',
-                            400: '#4ade80',
-                            500: '#16a34a',
-                            600: '#15803d',
-                            700: '#166534',
-                            800: '#14532d',
-                            900: '#0f4223',
+                        automotive: {
+                            50: '#f3f4f6', // light silver
+                            100: '#e5e7eb',
+                            200: '#d1d5db',
+                            300: '#9ca3af',
+                            400: '#6b7280', // steel gray
+                            500: '#374151', // dark steel
+                            600: '#1f2937', // near-black
+                            700: '#111827', // black
+                            800: '#18181b', // deep black
+                            900: '#0f0f10',
                         },
-                        secondary: {
-                            50: '#fefce8',
-                            100: '#fef9c3',
-                            200: '#fef08a',
-                            300: '#fde047',
-                            400: '#facc15',
-                            500: '#eab308',
-                            600: '#ca8a04',
-                            700: '#a16207',
-                            800: '#854d0e',
-                            900: '#713f12',
+                        accent: {
+                            red: '#e11d48', // automotive red
+                            yellow: '#fbbf24', // accent yellow
                         }
                     },
                     fontFamily: {
-                        'body': ['Georgia', 'serif'],
+                        'body': ['Inter', 'Arial', 'sans-serif'],
                     }
                 }
             }
@@ -129,55 +121,72 @@
     </style>
 </head>
 
-<body class="font-body bg-gray-900 text-white min-h-screen">
+<body class="font-body bg-automotive-800 text-automotive-50 min-h-screen">
     <!-- Header -->
-    <header class="bg-green-900/80 backdrop-blur-sm border-b border-green-600/30 sticky top-0 z-50">
-        <div class="container mx-auto px-4 py-4">
-            <div class="flex justify-between items-center">
-                <h1 class="text-2xl font-bold text-green-300">Hooper Automotive LLC</h1>
-                <div class="flex gap-4">
-                    <a href="tel:+17154219792"
-                        class="bg-green-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-green-500 transition-colors flex items-center gap-2">
-                        <i data-feather="phone"></i>
-                        Call
-                    </a>
-                    <a href="mailto:hooperautorepair70@gmail.com"
-                        class="border-2 border-green-500 text-green-400 px-6 py-3 rounded-lg font-bold hover:bg-green-500 hover:text-white transition-colors flex items-center gap-2">
-                        <i data-feather="mail"></i>
-                        Email
-                    </a>
-                </div>
+    <header
+        class="bg-gradient-to-r from-automotive-700 via-automotive-600 to-automotive-900 shadow-xl border-b-4 border-accent-red sticky top-0 z-50">
+        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+            <div class="flex items-center gap-4">
+                <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="19" cy="19" r="19" fill="#e11d48" />
+                    <rect x="8" y="16" width="22" height="6" rx="3" fill="#fbbf24" />
+                    <rect x="13" y="10" width="12" height="4" rx="2" fill="#f3f4f6" />
+                    <rect x="13" y="24" width="12" height="4" rx="2" fill="#f3f4f6" />
+                </svg>
+                <h1 class="text-3xl font-extrabold text-accent-red tracking-tight drop-shadow">Hooper Automotive LLC
+                </h1>
+            </div>
+            <div class="flex gap-4">
+                <a href="tel:+17154219792"
+                    class="bg-accent-red text-white px-6 py-3 rounded-lg font-bold hover:bg-accent-yellow hover:text-automotive-700 transition-colors flex items-center gap-2 shadow-lg">
+                    <i data-feather="phone"></i>
+                    Call
+                </a>
+                <a href="mailto:hooperautorepair70@gmail.com"
+                    class="border-2 border-accent-yellow text-accent-yellow px-6 py-3 rounded-lg font-bold hover:bg-accent-yellow hover:text-automotive-700 transition-colors flex items-center gap-2 shadow-lg">
+                    <i data-feather="mail"></i>
+                    Email
+                </a>
             </div>
         </div>
     </header>
     <!-- Consistent Call/Text Contact Block -->
     <div class="w-full flex flex-col items-center mb-6">
-        <a href="tel:+17154219792" class="text-2xl font-bold text-amber-400 hover:text-amber-300 transition-colors">Call
+        <a href="tel:+17154219792"
+            class="text-2xl font-extrabold text-accent-yellow hover:text-accent-red transition-colors tracking-wide drop-shadow">Call
             Hooper Automotive: (715) 421-9792</a>
-        <span class="text-green-200 text-sm mt-1">2020 4th Street South, Wisconsin Rapids, WI 54494 &bull; Wood
+        <span class="text-automotive-200 text-sm mt-1">2020 4th Street South, Wisconsin Rapids, WI 54494 &bull; Wood
             County</span>
     </div>
     <!-- Hero Section -->
-    <section class="bg-gradient-to-br from-green-900 to-green-700 py-12 md:py-16">
-        <div class="container mx-auto px-4 text-center">
-            <h2 class="dynamic-title mb-6">Wisconsin Rapids' Trusted Auto Service</h2>
-            <p class="text-lg sm:text-xl md:text-2xl lg:text-3xl text-green-100 mb-8 tracking-wide drop-shadow-lg">
-                Professional automotive repair & maintenance for Central Wisconsin</p>
+    <section
+        class="bg-gradient-to-br from-automotive-900 via-automotive-700 to-automotive-600 py-16 relative overflow-hidden">
+        <div class="container mx-auto px-4 text-center relative z-10">
+            <h2 class="dynamic-title mb-6 text-accent-red drop-shadow-lg">Wisconsin Rapids' Most Advanced Auto Service
+            </h2>
+            <p
+                class="text-xl md:text-2xl lg:text-3xl text-automotive-100 mb-8 tracking-wide drop-shadow-lg font-semibold">
+                Professional, AI-powered automotive repair & maintenance for Central Wisconsin</p>
             <a href="quote-calculator.html"
-                class="inline-block bg-green-600 text-white px-8 py-4 rounded-2xl font-bold text-lg md:text-xl hover:bg-green-500 hover:scale-105 transition-all duration-200 shadow-lg mr-2 focus:outline-none focus:ring-2 focus:ring-amber-400 focus:ring-offset-2">
+                class="inline-block bg-accent-red text-white px-10 py-5 rounded-2xl font-extrabold text-xl md:text-2xl hover:bg-accent-yellow hover:text-automotive-700 transition-all duration-200 shadow-2xl mr-2 focus:outline-none focus:ring-2 focus:ring-accent-yellow focus:ring-offset-2 uppercase tracking-wider">
                 Get Instant Quote
             </a>
         </div>
+        <svg class="absolute right-0 top-0 w-1/2 h-full opacity-20 z-0" viewBox="0 0 400 400" fill="none">
+            <ellipse cx="200" cy="200" rx="200" ry="200" fill="#e11d48" />
+            <ellipse cx="200" cy="200" rx="120" ry="120" fill="#fbbf24" />
+            <ellipse cx="200" cy="200" rx="60" ry="60" fill="#374151" />
+        </svg>
     </section>
     <!-- Portfolio Grid (larger, more visual) -->
-    <section class="py-8 md:py-14 bg-green-950/80">
+    <section class="py-12 md:py-20 bg-gradient-to-br from-automotive-900 via-automotive-700 to-automotive-600/90">
         <div class="container mx-auto px-2 md:px-4">
-            <div class="swiper mySwiper max-w-3xl mx-auto">
+            <div class="swiper mySwiper max-w-4xl mx-auto">
                 <div class="swiper-wrapper">
-                    <!-- S3 Image Cards -->
+                    <!-- Automotive Showroom Cards -->
                     <div class="swiper-slide flex justify-center">
                         <div
-                            class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
+                            class="portfolio-slide bg-automotive-600/90 rounded-3xl shadow-2xl p-6 flex flex-col items-center w-full max-w-[700px] border-4 border-accent-red transition-transform">
                             <img src="https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?w=700&h=420&fit=crop&crop=center"
                                 alt="Auto Service 1"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
@@ -186,7 +195,7 @@
                     </div>
                     <div class="swiper-slide flex justify-center">
                         <div
-                            class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
+                            class="portfolio-slide bg-automotive-600/90 rounded-3xl shadow-2xl p-6 flex flex-col items-center w-full max-w-[700px] border-4 border-accent-yellow transition-transform">
                             <img src="https://images.unsplash.com/photo-1632823469850-f4b0ce1f4262?w=700&h=420&fit=crop&crop=center"
                                 alt="Auto Service 2"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
@@ -195,7 +204,7 @@
                     </div>
                     <div class="swiper-slide flex justify-center">
                         <div
-                            class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
+                            class="portfolio-slide bg-automotive-600/90 rounded-3xl shadow-2xl p-6 flex flex-col items-center w-full max-w-[700px] border-4 border-accent-red transition-transform">
                             <img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=700&h=420&fit=crop&crop=center"
                                 alt="Auto Service 3"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
@@ -204,7 +213,7 @@
                     </div>
                     <div class="swiper-slide flex justify-center">
                         <div
-                            class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
+                            class="portfolio-slide bg-automotive-600/90 rounded-3xl shadow-2xl p-6 flex flex-col items-center w-full max-w-[700px] border-4 border-accent-yellow transition-transform">
                             <img src="https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?w=700&h=420&fit=crop&crop=center"
                                 alt="Auto Service 4"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
@@ -213,7 +222,7 @@
                     </div>
                     <div class="swiper-slide flex justify-center">
                         <div
-                            class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
+                            class="portfolio-slide bg-automotive-600/90 rounded-3xl shadow-2xl p-6 flex flex-col items-center w-full max-w-[700px] border-4 border-accent-red transition-transform">
                             <img src="https://images.unsplash.com/photo-1625047509168-a7026f36de04?w=700&h=420&fit=crop&crop=center"
                                 alt="Auto Service 5"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
@@ -222,7 +231,7 @@
                     </div>
                     <div class="swiper-slide flex justify-center">
                         <div
-                            class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
+                            class="portfolio-slide bg-automotive-600/90 rounded-3xl shadow-2xl p-6 flex flex-col items-center w-full max-w-[700px] border-4 border-accent-yellow transition-transform">
                             <img src="https://images.unsplash.com/photo-1629810070755-751ac1db18b5?w=700&h=420&fit=crop&crop=center"
                                 alt="Auto Service 6"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
@@ -231,7 +240,7 @@
                     </div>
                     <div class="swiper-slide flex justify-center">
                         <div
-                            class="portfolio-slide bg-green-800/90 rounded-3xl shadow-2xl p-4 flex flex-col items-center w-full max-w-[700px] transition-transform">
+                            class="portfolio-slide bg-automotive-600/90 rounded-3xl shadow-2xl p-6 flex flex-col items-center w-full max-w-[700px] border-4 border-accent-red transition-transform">
                             <img src="https://images.unsplash.com/photo-1606577924081-3b002c5e4d99?w=700&h=420&fit=crop&crop=center"
                                 alt="Auto Service 7"
                                 class="rounded-2xl w-full h-[420px] object-cover mb-2 transition-transform duration-300"
@@ -247,22 +256,23 @@
         </div>
     </section>
     <!-- Contact & Map Section (moved below images) -->
-    <section class="py-8 text-center">
-        <div class="max-w-xl mx-auto bg-green-900/80 rounded-2xl shadow-lg p-4 mb-4">
-            <h3 class="text-2xl font-bold text-green-200 mb-2">Contact & Location</h3>
-            <div class="text-green-100 mb-2">
+    <section class="py-10 text-center">
+        <div
+            class="max-w-xl mx-auto bg-automotive-700/90 rounded-2xl shadow-2xl p-6 mb-4 border-4 border-accent-yellow">
+            <h3 class="text-2xl font-extrabold text-accent-yellow mb-2 tracking-wide">Contact & Location</h3>
+            <div class="text-automotive-100 mb-2">
                 <div><strong>Address:</strong> 2020 4th Street South, Wisconsin Rapids, WI, United States, 54494</div>
                 <div><strong>County:</strong> Wood County, WI</div>
-                <div><strong>Phone:</strong> <a href="tel:+17154219792" class="underline">+1 715-421-9792</a></div>
+                <div><strong>Phone:</strong> <a href="tel:+17154219792" class="underline text-accent-red">+1
+                        715-421-9792</a></div>
                 <div><strong>Email:</strong> <a href="mailto:hooperautorepair70@gmail.com"
-                        class="underline">hooperautorepair70@gmail.com</a>
-                </div>
+                        class="underline text-accent-yellow">hooperautorepair70@gmail.com</a></div>
             </div>
-            <div class="rounded-xl overflow-hidden border border-green-700 shadow-lg mt-4">
+            <div class="rounded-xl overflow-hidden border-2 border-accent-red shadow-lg mt-4">
                 <iframe width="100%" height="250" style="border:0" loading="lazy" allowfullscreen
                     src="https://www.openstreetmap.org/export/embed.html?bbox=-89.858,44.350,-89.758,44.450&amp;layer=mapnik&amp;marker=44.400,-89.808"></iframe>
-                <div class="text-xs text-green-300 bg-green-900/80 p-1">Location: Wisconsin Rapids, WI, United States,
-                    54494</div>
+                <div class="text-xs text-accent-yellow bg-automotive-800/90 p-1">Location: Wisconsin Rapids, WI, United
+                    States, 54494</div>
             </div>
         </div>
     </section>
@@ -294,20 +304,21 @@
         });
     </script>
     <!-- Call to Action -->
-    <section class="bg-gradient-to-br from-green-700 to-green-600 py-16">
+    <section class="bg-gradient-to-br from-automotive-700 via-automotive-900 to-automotive-600 py-16">
         <div class="container mx-auto px-4 text-center">
-            <h2 class="text-3xl md:text-5xl font-bold mb-6">Serving Central Wisconsin Drivers</h2>
-            <p class="text-lg text-green-100 mb-8">From Stevens Point to Wausau and throughout Central WI</p>
+            <h2 class="text-4xl md:text-6xl font-extrabold mb-6 text-accent-red drop-shadow">Serving Central Wisconsin
+                Drivers</h2>
+            <p class="text-xl text-automotive-100 mb-8 font-semibold">From Stevens Point to Wausau and throughout
+                Central WI</p>
             <div class="flex flex-col sm:flex-row gap-4 justify-center">
                 <a href="quote-calculator.html"
-                    class="bg-white text-green-700 px-8 py-4 rounded-lg font-bold text-lg hover:bg-green-50 transition-colors">
-                    Get Service Estimate
-                </a>
+                    class="bg-accent-yellow text-automotive-700 px-10 py-5 rounded-lg font-extrabold text-xl hover:bg-accent-red hover:text-white transition-colors shadow-xl uppercase tracking-wider">Get
+                    Service Estimate</a>
                 <a href="tel:+17154219792"
-                    class="border-2 border-white text-white px-8 py-4 rounded-lg font-bold text-lg hover:bg-white hover:text-green-700 transition-colors">
-                    Call Now: (715) 421-9792
-                </a>
+                    class="border-2 border-accent-yellow text-accent-yellow px-10 py-5 rounded-lg font-extrabold text-xl hover:bg-accent-red hover:text-white transition-colors shadow-xl uppercase tracking-wider">Call
+                    Now: (715) 421-9792</a>
             </div>
+        </div>
     </section>
     <script>
         document.addEventListener('DOMContentLoaded', () => {

quote-calculator.html

@@ -9,6 +9,35 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        automotive: {
+                            50: '#f3f4f6', // light silver
+                            100: '#e5e7eb',
+                            200: '#d1d5db',
+                            300: '#9ca3af',
+                            400: '#6b7280', // steel gray
+                            500: '#374151', // dark steel
+                            600: '#1f2937', // near-black
+                            700: '#111827', // black
+                            800: '#18181b', // deep black
+                            900: '#0f0f10',
+                        },
+                        accent: {
+                            red: '#e11d48', // automotive red
+                            yellow: '#fbbf24', // accent yellow
+                        }
+                    },
+                    fontFamily: {
+                        'body': ['Inter', 'Arial', 'sans-serif'],
+                    }
+                }
+            }
+        }
+    </script>
     <style>
         @media (max-width: 640px) {
             body {
@@ -43,8 +72,8 @@
             justify-content: space-between;
             cursor: pointer;
             font-weight: 600;
-            color: #bbf7d0;
-            background: #14532d;
+            color: #fbbf24;
+            background: #374151;
             border-radius: 0.5rem;
             padding: 0.5rem 1rem;
             margin-bottom: 0.1rem;
@@ -53,7 +82,7 @@
         .form-group .form-content {
             display: none;
             padding: 0.5rem 1rem 0.7rem 1rem;
-            background: #18392b;
+            background: #1f2937;
             border-radius: 0.5rem;
         }
 
@@ -71,7 +100,7 @@
     </style>
 </head>
 
-<body class="font-body bg-gray-900 text-white min-h-screen flex items-center justify-center py-8">
+<body class="font-body bg-automotive-700 text-automotive-50 min-h-screen flex items-center justify-center py-8">
     <!-- Consistent Call/Text Contact Block -->
     <div class="w-full flex flex-col items-center mb-6">
         <a href="tel:+17154219792" class="text-2xl font-bold text-amber-400 hover:text-amber-300 transition-colors">Call
@@ -81,24 +110,25 @@
     </div>
     <!-- APT Step-by-Step Automotive Problem Calculator -->
     <main class="w-full flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white py-8">
-        <section class="w-full max-w-lg mobile-section bg-green-900/80 p-6 rounded-xl shadow-lg">
-            <h1 class="text-2xl font-bold text-green-200 mb-4 mobile-title">Hooper Automotive LLC - Problem Calculator
+        <section class="w-full max-w-lg mobile-section bg-automotive-600/90 p-6 rounded-xl shadow-lg">
+            <h1 class="text-2xl font-bold text-accent-red mb-4 mobile-title">Hooper Automotive LLC - Problem Calculator
             </h1>
             <div id="apt-flow">
                 <!-- Bleeding Edge: AI-Powered Troubleshooting -->
-                <div id="ai-troubleshoot" class="mb-8 bg-green-800/80 rounded-xl p-4 shadow-lg">
-                    <h2 class="text-xl font-bold text-green-200 mb-2">Describe Your Problem (AI Assistant)</h2>
+                <div id="ai-troubleshoot" class="mb-8 bg-automotive-500/80 rounded-xl p-4 shadow-lg">
+                    <h2 class="text-xl font-bold text-accent-red mb-2">Describe Your Problem (AI Assistant)</h2>
                     <textarea id="ai-input" rows="2"
-                        class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white mb-2"
+                        class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50 mb-2"
                         placeholder="Describe your car's issue in your own words (e.g. 'My car makes a grinding noise when turning left')"></textarea>
                     <button id="ai-analyze" class="apt-btn w-full mb-2">Analyze with AI</button>
-                    <div id="ai-output" class="hidden bg-green-900/80 rounded-lg p-3 mt-2 text-green-100"></div>
-                    <div id="ai-fallback" class="hidden text-green-300 text-sm mt-2">Not sure? Try the step-by-step
+                    <div id="ai-output" class="hidden bg-automotive-600/80 rounded-lg p-3 mt-2 text-accent-yellow">
+                    </div>
+                    <div id="ai-fallback" class="hidden text-accent-yellow text-sm mt-2">Not sure? Try the step-by-step
                         calculator below.</div>
                 </div>
                 <!-- Step 1: Select Problem Category -->
                 <div id="step1" class="mb-4">
-                    <label class="block text-green-100 font-semibold mb-2">What area is the problem in?</label>
+                    <label class="block text-accent-yellow font-semibold mb-2">What area is the problem in?</label>
                     <div class="grid grid-cols-2 gap-2">
                         <button class="apt-btn" data-category="Engine">Engine</button>
                         <button class="apt-btn" data-category="Brakes">Brakes</button>
@@ -112,40 +142,40 @@
                 </div>
                 <!-- Step 2: Select Symptom -->
                 <div id="step2" class="mb-4 hidden">
-                    <label class="block text-green-100 font-semibold mb-2">What best describes the issue?</label>
+                    <label class="block text-accent-yellow font-semibold mb-2">What best describes the issue?</label>
                     <div id="symptom-options" class="grid grid-cols-1 gap-2"></div>
                 </div>
                 <!-- Step 3: Vehicle Info -->
                 <div id="step3" class="mb-4 hidden">
-                    <label class="block text-green-100 font-semibold mb-1">Vehicle Make/Model/Year</label>
+                    <label class="block text-accent-yellow font-semibold mb-1">Vehicle Make/Model/Year</label>
                     <input type="text" id="vehicle"
-                        class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white mb-2"
+                        class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50 mb-2"
                         placeholder="e.g. 2020 Ford F-150">
-                    <label class="block text-green-100 font-semibold mb-1">Mileage</label>
+                    <label class="block text-accent-yellow font-semibold mb-1">Mileage</label>
                     <input type="text" id="mileage"
-                        class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white mb-2"
+                        class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50 mb-2"
                         placeholder="e.g. 42,000">
                     <button id="step3-next" class="apt-btn w-full mt-2">Next</button>
                 </div>
                 <!-- Step 4: Output Recommendation -->
                 <div id="step4" class="mb-4 hidden">
-                    <div class="bg-green-800/80 rounded-lg p-4 mb-2">
-                        <div class="text-lg font-bold text-green-200 mb-1">Recommended Service:</div>
-                        <div id="apt-recommend" class="text-green-100 mb-2"></div>
-                        <div class="text-green-300 font-bold" id="apt-price"></div>
+                    <div class="bg-automotive-500/80 rounded-lg p-4 mb-2">
+                        <div class="text-lg font-bold text-accent-red mb-1">Recommended Service:</div>
+                        <div id="apt-recommend" class="text-automotive-50 mb-2"></div>
+                        <div class="text-accent-yellow font-bold" id="apt-price"></div>
                     </div>
                     <div class="mb-2">
-                        <label class="block text-green-100 font-semibold mb-1">Your Name (optional)</label>
+                        <label class="block text-accent-yellow font-semibold mb-1">Your Name (optional)</label>
                         <input type="text" id="user-name"
-                            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white mb-2"
+                            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50 mb-2"
                             placeholder="Your Name">
-                        <label class="block text-green-100 font-semibold mb-1">Email (for quote reply)</label>
+                        <label class="block text-accent-yellow font-semibold mb-1">Email (for quote reply)</label>
                         <input type="email" id="user-email"
-                            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-green-700 text-white mb-2"
+                            class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50 mb-2"
                             placeholder="hooperautorepair70@gmail.com">
                     </div>
                     <button id="apt-submit" class="apt-btn w-full">Request Estimate</button>
-                    <div id="apt-success" class="hidden text-green-200 text-center font-semibold mt-2">Request sent!
+                    <div id="apt-success" class="hidden text-accent-yellow text-center font-semibold mt-2">Request sent!
                         Hooper Automotive will contact you soon.<br>Email: <a href="mailto:hooperautorepair70@gmail.com"
                             class="underline">hooperautorepair70@gmail.com</a><br>Phone: (715) 421-9792</div>
                 </div>
@@ -300,7 +330,7 @@
 
         // Style for APT buttons
         const style = document.createElement('style');
-        style.textContent = `.apt-btn { background: #16a34a; color: #fff; font-weight: 600; border-radius: 0.5rem; padding: 0.7rem 1rem; border: none; cursor: pointer; transition: background 0.2s; font-size: 1.1rem; } .apt-btn:hover { background: #4ade80; color: #14532d; }`;
+        style.textContent = `.apt-btn { background: #e11d48; color: #fff; font-weight: 600; border-radius: 0.5rem; padding: 0.7rem 1rem; border: none; cursor: pointer; transition: background 0.2s; font-size: 1.1rem; } .apt-btn:hover { background: #fbbf24; color: #1f2937; }`;
         document.head.appendChild(style);
     </script>
 </body>