From d0de630261b0d9ad6c04584956341a3ca5726d6b Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@etherbase.cloud>
Date: Wed, 18 Feb 2026 12:31:02 +0000
Subject: [PATCH] Upgrade website to professional design based on reference
 image

---
 dist/style.css | 308 +++++++++++++++++++++++++++++++++----------------
 1 file changed, 211 insertions(+), 97 deletions(-)

diff --git a/dist/style.css b/dist/style.css
index be57f2d..21274c6 100644
--- a/dist/style.css
+++ b/dist/style.css
@@ -1,10 +1,23 @@
+/* Google Fonts Import */
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Readex+Pro:wght@200;300;400;500;600;700&display=swap');
+
+/* CSS Variables for Colors */
+:root {
+    --color-mint-green: #A4FF93;
+    --color-green-pea: #256F50;
+    --color-white: #FFFFFF;
+    --color-dark-green: #1A473A; /* A darker shade for backgrounds */
+    --color-text-light: #E0E0E0;
+    --color-text-dark: #333333;
+}
+
 /* General Body & Typography */
 body {
-    font-family: 'Poppins', sans-serif;
+    font-family: 'Readex Pro', sans-serif;
     margin: 0;
     padding: 0;
-    background-color: #f8f8f8; /* Light background */
-    color: #333;
+    background-color: var(--color-dark-green);
+    color: var(--color-text-light);
     line-height: 1.6;
     overflow-x: hidden;
 }
@@ -16,39 +29,45 @@ body {
 }
 
 h1, h2, h3 {
+    font-family: 'Orbitron', sans-serif;
     font-weight: 700;
-    color: #222;
+    color: var(--color-mint-green);
 }
 
 p {
     font-weight: 300;
+    color: var(--color-text-light);
 }
 
 /* Buttons */
 .btn {
     display: inline-block;
-    background-color: #FF6347; /* Tomato Red - vibrant */
-    color: #fff;
+    background-color: var(--color-mint-green);
+    color: var(--color-dark-green);
     padding: 12px 25px;
     text-decoration: none;
     border-radius: 5px;
-    transition: background-color 0.3s ease;
+    transition: background-color 0.3s ease, color 0.3s ease;
     font-weight: 600;
+    font-family: 'Orbitron', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 1px;
 }
 
 .btn:hover {
-    background-color: #E5533D;
+    background-color: var(--color-white);
+    color: var(--color-green-pea);
 }
 
 /* Navbar */
 .navbar {
-    background-color: #333; /* Dark background for contrast */
-    color: #fff;
+    background-color: var(--color-green-pea);
+    color: var(--color-white);
     padding: 15px 0;
     position: sticky;
     top: 0;
     z-index: 1000;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
 }
 
 .navbar .container {
@@ -58,10 +77,12 @@ p {
 }
 
 .navbar .logo {
+    font-family: 'Orbitron', sans-serif;
     font-size: 1.8em;
     font-weight: 700;
-    color: #fff;
+    color: var(--color-mint-green);
     text-decoration: none;
+    letter-spacing: 2px;
 }
 
 .navbar ul {
@@ -72,116 +93,147 @@ p {
 }
 
 .navbar ul li {
-    margin-left: 25px;
+    margin-left: 30px;
 }
 
 .navbar ul li a {
-    color: #fff;
+    color: var(--color-white);
     text-decoration: none;
     font-weight: 400;
     transition: color 0.3s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
 }
 
 .navbar ul li a:hover {
-    color: #FFD700; /* Gold - accent color */
+    color: var(--color-mint-green);
 }
 
 /* Hero Section */
 .hero {
-    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://via.placeholder.com/1920x700/4682B4/FFFFFF?text=Dogs+Golf+Umbrellas') no-repeat center center/cover;
-    color: #fff;
+    background: linear-gradient(rgba(37, 111, 80, 0.8), rgba(37, 111, 80, 0.8)), url('https://via.placeholder.com/1920x700/256F50/A4FF93?text=Professional+Design') no-repeat center center/cover;
+    color: var(--color-white);
     text-align: center;
-    padding: 100px 20px;
-    height: 60vh;
+    padding: 120px 20px;
+    height: 70vh;
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.hero::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(45deg, rgba(164, 255, 147, 0.1) 25%, transparent 25%, transparent 50%, rgba(164, 255, 147, 0.1) 50%, rgba(164, 255, 147, 0.1) 75%, transparent 75%, transparent);
+    background-size: 40px 40px;
+    opacity: 0.2;
+    z-index: 1;
+}
+
+.hero .container {
+    position: relative;
+    z-index: 2;
 }
 
 .hero h1 {
-    font-size: 3.5em;
-    margin-bottom: 15px;
-    color: #fff;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
+    font-size: 4em;
+    margin-bottom: 20px;
+    color: var(--color-mint-green);
+    text-shadow: 3px 3px 6px rgba(0,0,0,0.8);
+    letter-spacing: 3px;
 }
 
 .hero p {
-    font-size: 1.3em;
-    margin-bottom: 30px;
-    color: #eee;
+    font-size: 1.5em;
+    margin-bottom: 40px;
+    color: var(--color-text-light);
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 /* Features Section */
 .features-section {
-    padding: 60px 0;
+    padding: 80px 0;
     text-align: center;
-    background-color: #fff;
+    background-color: var(--color-dark-green);
 }
 
 .features-section h2 {
-    font-size: 2.5em;
-    margin-bottom: 40px;
+    font-size: 3em;
+    margin-bottom: 50px;
+    color: var(--color-mint-green);
 }
 
 .feature-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-    gap: 30px;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 40px;
 }
 
 .feature-item {
-    background-color: #fefefe;
-    padding: 30px;
+    background-color: var(--color-green-pea);
+    padding: 40px;
     border-radius: 10px;
-    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
+    transition: transform 0.4s ease, box-shadow 0.4s ease;
+    border: 1px solid rgba(164, 255, 147, 0.3);
 }
 
 .feature-item:hover {
-    transform: translateY(-10px);
-    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
+    transform: translateY(-15px);
+    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
 }
 
 .feature-item img {
-    width: 100px;
-    height: 100px;
+    width: 120px;
+    height: 120px;
     border-radius: 50%;
     object-fit: cover;
-    margin-bottom: 20px;
-    border: 3px solid #FFD700;
+    margin-bottom: 25px;
+    border: 4px solid var(--color-mint-green);
+    box-shadow: 0 0 15px rgba(164, 255, 147, 0.5);
 }
 
 .feature-item h3 {
-    font-size: 1.5em;
-    margin-bottom: 10px;
-    color: #FF6347;
+    font-size: 1.8em;
+    margin-bottom: 15px;
+    color: var(--color-white);
+    letter-spacing: 1px;
 }
 
 .feature-item p {
-    font-size: 0.95em;
-    color: #555;
+    font-size: 1em;
+    color: var(--color-text-light);
 }
 
 /* Content Sections */
 .content-section {
-    padding: 80px 0;
+    padding: 100px 0;
     text-align: center;
 }
 
 .content-section.bg-light {
-    background-color: #f0f4f8; /* Light blue-grey for contrast */
+    background-color: var(--color-green-pea);
 }
 
 .content-section h2 {
-    font-size: 2.5em;
-    margin-bottom: 40px;
+    font-size: 3em;
+    margin-bottom: 50px;
+    color: var(--color-mint-green);
 }
 
 .content-flex {
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: 40px;
+    gap: 60px;
     flex-wrap: wrap;
 }
 
@@ -191,112 +243,126 @@ p {
 
 .content-image {
     width: 100%;
-    max-width: 400px;
+    max-width: 450px;
     height: auto;
     border-radius: 10px;
-    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
+    border: 2px solid var(--color-mint-green);
 }
 
 .content-flex div {
     flex: 1;
-    min-width: 300px;
+    min-width: 350px;
     text-align: left;
 }
 
 .content-flex p {
-    margin-bottom: 15px;
-    font-size: 1.1em;
-    color: #444;
+    margin-bottom: 20px;
+    font-size: 1.15em;
+    color: var(--color-text-light);
 }
 
 /* Contact Section */
 .contact-section {
-    padding: 80px 0;
-    background-color: #333; /* Dark background */
-    color: #fff;
+    padding: 100px 0;
+    background-color: var(--color-dark-green);
+    color: var(--color-white);
     text-align: center;
 }
 
 .contact-section h2 {
-    color: #fff;
-    font-size: 2.5em;
-    margin-bottom: 30px;
+    color: var(--color-mint-green);
+    font-size: 3em;
+    margin-bottom: 40px;
 }
 
 .contact-section p {
-    font-size: 1.1em;
-    margin-bottom: 40px;
-    color: #eee;
+    font-size: 1.2em;
+    margin-bottom: 50px;
+    color: var(--color-text-light);
 }
 
 .contact-form {
-    max-width: 600px;
+    max-width: 700px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: 25px;
 }
 
 .contact-form input, .contact-form textarea {
-    padding: 15px;
-    border: none;
+    padding: 18px;
+    border: 1px solid rgba(164, 255, 147, 0.3);
     border-radius: 5px;
-    font-family: 'Poppins', sans-serif;
-    font-size: 1em;
-    background-color: rgba(255,255,255,0.1);
-    color: #fff;
+    font-family: 'Readex Pro', sans-serif;
+    font-size: 1.05em;
+    background-color: rgba(255,255,255,0.08);
+    color: var(--color-white);
+    transition: border-color 0.3s ease, background-color 0.3s ease;
+}
+
+.contact-form input:focus, .contact-form textarea:focus {
+    border-color: var(--color-mint-green);
+    background-color: rgba(255,255,255,0.15);
+    outline: none;
 }
 
 .contact-form input::placeholder, .contact-form textarea::placeholder {
-    color: #ccc;
+    color: rgba(255,255,255,0.6);
 }
 
 .contact-form textarea {
-    min-height: 120px;
+    min-height: 150px;
     resize: vertical;
 }
 
 .contact-form .btn {
-    background-color: #FFD700; /* Gold */
-    color: #333;
+    background-color: var(--color-mint-green);
+    color: var(--color-dark-green);
     cursor: pointer;
-    transition: background-color 0.3s ease;
+    transition: background-color 0.3s ease, color 0.3s ease;
+    padding: 15px 30px;
+    font-size: 1.1em;
 }
 
 .contact-form .btn:hover {
-    background-color: #E5C100;
+    background-color: var(--color-white);
+    color: var(--color-green-pea);
 }
 
 /* Footer */
 footer {
-    background-color: #222;
-    color: #fff;
-    padding: 30px 0;
+    background-color: var(--color-green-pea);
+    color: var(--color-white);
+    padding: 40px 0;
     text-align: center;
-    font-size: 0.9em;
+    font-size: 0.95em;
+    border-top: 1px solid rgba(164, 255, 147, 0.2);
 }
 
 footer .container {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 15px;
+    gap: 20px;
 }
 
 .social-links a {
-    margin: 0 10px;
+    margin: 0 12px;
     display: inline-block;
 }
 
 .social-links img {
-    width: 30px;
-    height: 30px;
+    width: 35px;
+    height: 35px;
     border-radius: 50%;
-    transition: transform 0.3s ease;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    border: 2px solid var(--color-mint-green);
 }
 
 .social-links img:hover {
-    transform: scale(1.1);
+    transform: scale(1.15);
+    box-shadow: 0 0 15px rgba(164, 255, 147, 0.7);
 }
 
 /* Responsive Design */
@@ -306,21 +372,25 @@ footer .container {
     }
 
     .navbar ul {
-        margin-top: 15px;
+        margin-top: 20px;
         flex-wrap: wrap;
         justify-content: center;
     }
 
     .navbar ul li {
-        margin: 0 10px 10px 10px;
+        margin: 0 12px 12px 12px;
     }
 
     .hero h1 {
-        font-size: 2.5em;
+        font-size: 3em;
     }
 
     .hero p {
-        font-size: 1em;
+        font-size: 1.2em;
+    }
+
+    .features-section h2, .content-section h2, .contact-section h2 {
+        font-size: 2.5em;
     }
 
     .feature-grid {
@@ -340,10 +410,54 @@ footer .container {
     }
 
     .content-image {
-        margin-bottom: 20px;
+        margin-bottom: 30px;
     }
 
     .contact-form {
-        padding: 0 15px;
+        padding: 0 20px;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero h1 {
+        font-size: 2.2em;
+    }
+
+    .hero p {
+        font-size: 1em;
+    }
+
+    .navbar .logo {
+        font-size: 1.5em;
+    }
+
+    .navbar ul li {
+        margin: 0 8px 8px 8px;
+    }
+
+    .btn {
+        padding: 10px 20px;
+        font-size: 0.9em;
+    }
+
+    .features-section h2, .content-section h2, .contact-section h2 {
+        font-size: 2em;
+    }
+
+    .feature-item {
+        padding: 30px;
+    }
+
+    .feature-item h3 {
+        font-size: 1.5em;
+    }
+
+    .content-flex div {
+        min-width: unset;
+    }
+
+    .contact-form input, .contact-form textarea {
+        padding: 15px;
+        font-size: 0.95em;
     }
 }