From 63485b413d8a3c80035b0fe26b46633cc7bb9dc2 Mon Sep 17 00:00:00 2001
From: DARIEM MACIAS MORA <softevolutionsl@gmail.com>
Date: Sat, 25 Jul 2026 19:55:52 -0400
Subject: [PATCH] Refactor: UI colors for consistency and accessibility

Replaced gradient text and borders with solid teal-cyan-aqua-600 across headings, buttons, and FAQ items for improved consistency and accessibility. Updated FAQ link and button ring colors for better contrast. Fixed a minor typo in ContactForm.razor.
---
 Features/Contact/Components/ContactForm.razor      |  2 +-
 Features/Landing/Components/HeroWarmTealWash.razor |  6 +++---
 Features/Landing/Components/Mission.razor          |  4 ++--
 Features/Landing/Components/Services.razor         |  2 +-
 Features/Legal/Components/Faq.razor.css            | 10 +++++-----
 Layout/Header.razor                                |  2 +-
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/Features/Contact/Components/ContactForm.razor b/Features/Contact/Components/ContactForm.razor
index 94aa8da..5028d60 100644
--- a/Features/Contact/Components/ContactForm.razor
+++ b/Features/Contact/Components/ContactForm.razor
@@ -6,7 +6,7 @@
         <!-- Header Section -->
         <div class="text-center mb-12">
             <span class="inline-block px-4 py-1.5 bg-teal-cyan-aqua-50 text-teal-cyan-aqua-600 text-sm font-semibold rounded-full mb-4">
-                <i class="bi bi-envelope-paper mr-2"></i>Get In Touch
+                <i class="bi bi-envelope-paper mr-2"></i>pGet In Touch
             </span>
             <h2 class="text-4xl md:text-5xl font-bold text-gray-700 mb-4">
                 Let's Start a
diff --git a/Features/Landing/Components/HeroWarmTealWash.razor b/Features/Landing/Components/HeroWarmTealWash.razor
index 7ea69d1..2efa0df 100644
--- a/Features/Landing/Components/HeroWarmTealWash.razor
+++ b/Features/Landing/Components/HeroWarmTealWash.razor
@@ -1,4 +1,4 @@
-@* ══════════════════════════════════════════════════════════════
+    @* ══════════════════════════════════════════════════════════════
    WarmTealWash Component — Hero section with white left side,
    AI automation illustration on warm cream/beige right side.
    Premium pass: staggered entrance choreography, gradient accent
@@ -19,7 +19,7 @@
             @* Headline — single gradient accent line, no italic, tight rhythm *@
             <h1 class="text-5xl sm:text-6xl lg:text-5xl xl:text-6xl leading-[1.05] mb-6 tracking-tight">
                 <span class="entrance entrance-2 block font-bold text-gray-900">Smart systems.</span>
-                <span class="entrance entrance-3 block font-bold bg-gradient-to-r from-teal-cyan-aqua-600 to-cloudzen-teal bg-clip-text text-transparent">Less busywork.</span>
+                <span class="entrance entrance-3 block font-bold text-teal-cyan-aqua-600">Less busywork.</span>
                 <span class="entrance entrance-4 block font-bold text-gray-900">More time for growing.</span>
             </h1>
 
@@ -57,7 +57,7 @@
     </div>
 
     @* ── Right Side: AI illustration (md and up) ── *@
-    <div class="warm-panel w-full md:w-1/2 shrink-0 relative hidden md:flex items-center justify-center overflow-hidden bg-gradient-to-br from-teal-cyan-aqua-50 to-teal-cyan-aqua-50/10">
+    <div class="warm-panel w-full md:w-1/2 shrink-0 relative hidden md:flex items-center justify-center overflow-hidden">
         @* Structured background: subtle teal dot grid, masked to a soft ellipse *@
         <div class="hero-grid-pattern" aria-hidden="true"></div>
         <div class="hero-radial-glow" aria-hidden="true"></div>
diff --git a/Features/Landing/Components/Mission.razor b/Features/Landing/Components/Mission.razor
index c5c059b..44c12d5 100644
--- a/Features/Landing/Components/Mission.razor
+++ b/Features/Landing/Components/Mission.razor
@@ -19,7 +19,7 @@
         <div class="reveal-left flex-1 text-center md:text-left px-4 md:px-0">
             <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-4 leading-tight">
                 We Specialize in Bringing<br />
-                <span class="bg-gradient-to-r from-teal-cyan-aqua-600 to-cloudzen-teal bg-clip-text text-transparent">Smart Technology</span> to Growing Businesses
+                <span class="text-teal-cyan-aqua-600">Smart Technology</span> to Growing Businesses
             </h2>
             <div class="w-16 h-1 bg-teal-cyan-aqua-600 rounded-full mb-4 mx-auto md:mx-0"></div>
             <p class="text-gray-500 leading-relaxed mb-6 max-w-prose">
@@ -41,7 +41,7 @@
         <div class="reveal-right flex-1 text-center md:text-left px-4 md:px-0">
             <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-4 leading-tight">
                 Our mission is to<br />
-                <span class="bg-gradient-to-r from-teal-cyan-aqua-600 to-cloudzen-teal bg-clip-text text-transparent">empower businesses</span> to achieve their goals
+                <span class="text-teal-cyan-aqua-600">empower businesses</span> to achieve their goals
             </h2>
             <p class="text-gray-500 leading-relaxed mb-6">
                 We believe the right tools and automation can improve everyone's work. Whether you are a business owner or the very customer engaging with that business, CloudZen builds solutions to help with:
diff --git a/Features/Landing/Components/Services.razor b/Features/Landing/Components/Services.razor
index 9962c5f..b744a22 100644
--- a/Features/Landing/Components/Services.razor
+++ b/Features/Landing/Components/Services.razor
@@ -19,7 +19,7 @@
         </span>
         <h1 class="entrance entrance-2 text-4xl md:text-5xl font-bold text-gray-800 mb-4 tracking-tight">
             We Handle the Technology.
-            <span class="bg-gradient-to-r from-teal-cyan-aqua-600 to-cloudzen-teal bg-clip-text text-transparent">You Focus on Growing and Making Money.</span>
+            <span class="text-teal-cyan-aqua-600">You Focus on Growing and Making Money.</span>
         </h1>
         <p class="entrance entrance-3 text-lg text-gray-500 max-w-2xl mx-auto mb-2">
             One partner who builds, modernizes, and automates — so you don't have to hire an entire tech department.
diff --git a/Features/Legal/Components/Faq.razor.css b/Features/Legal/Components/Faq.razor.css
index 134b697..89b1586 100644
--- a/Features/Legal/Components/Faq.razor.css
+++ b/Features/Legal/Components/Faq.razor.css
@@ -8,19 +8,19 @@
 
 .faq-item {
     background: #ffffff;
-    border: 1px solid rgba(97, 194, 200, 0.25);
+    border: 1px solid #40676B; /* teal-cyan-aqua-600 */
     border-radius: 0.75rem;
     overflow: hidden;
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 .faq-item:hover {
-    border-color: #d1d5db;
+    border-color: #40676B; /* teal-cyan-aqua-600 */
 }
 
 .faq-item--open {
-    border-color: rgba(97, 194, 200, 0.5);
-    box-shadow: 0 4px 16px rgba(97, 194, 200, 0.1);
+    border-color: #40676B; /* teal-cyan-aqua-600 */
+    box-shadow: 0 4px 16px rgba(64, 103, 107, 0.1);
 }
 
 /* Trigger button */
@@ -157,7 +157,7 @@
 
 /* Inline link in header */
 .faq-inline-link {
-    color: #0891b2;
+    color: #40676B;
     text-decoration: underline;
     text-underline-offset: 2px;
     transition: color 0.2s ease;
diff --git a/Layout/Header.razor b/Layout/Header.razor
index a1115b6..dd89173 100644
--- a/Layout/Header.razor
+++ b/Layout/Header.razor
@@ -26,7 +26,7 @@
             <NavLink href="/mission" class="nav-link text-gray-600 font-medium tracking-wide hover:text-teal-cyan-aqua-600 transition-colors" ActiveClass="nav-link--active">About</NavLink>
 @*             <NavLink href="/whoiam" class="nav-link text-gray-600 font-medium tracking-wide hover:text-teal-cyan-aqua-600 transition-colors" ActiveClass="nav-link--active">Who I Am</NavLink> *@
             <NavLink href="/faq" class="nav-link text-gray-600 font-medium tracking-wide hover:text-teal-cyan-aqua-600 transition-colors" ActiveClass="nav-link--active">FAQ</NavLink>
-            <NavLink href="/contact" class="cta-button btn-shimmer px-5 py-2 bg-orange-400 text-white text-sm font-semibold rounded-full hover:bg-orange-500" ActiveClass="ring-2 ring-orange-300 ring-offset-1">Let's Talk</NavLink>
+            <NavLink href="/contact" class="cta-button btn-shimmer px-5 py-2 bg-orange-400 text-white text-sm font-semibold rounded-full hover:bg-orange-500" ActiveClass="ring-2 ring-orange-400 ring-offset-1">Let's Talk</NavLink>
         </nav>
 
         @* ── Mobile nav ── *@