From 38a2ff83326e803d4f42b08804417e76e790fee5 Mon Sep 17 00:00:00 2001
From: metatroncubeswdev <info@metatroncubesolutions.com>
Date: Mon, 19 Oct 2026 12:44:25 -0400
Subject: [PATCH] fix(contrast): Fix low contrast white text on migration card
 in light mode and enhance table accents

---
 src/index.css              | 76 ++++++++++++++++++++++++++++++++++++++
 src/pages/AgenciesPage.jsx |  2 +-
 src/pages/ComparePage.jsx  | 23 +++++-------
 src/pages/PricingPage.jsx  |  4 +-
 4 files changed, 88 insertions(+), 17 deletions(-)

diff --git a/src/index.css b/src/index.css
index 801b4f8..fe13124 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1724,6 +1724,54 @@ input[type=range].agency-slider::-webkit-slider-thumb {
   border-right: 1px solid rgba(63, 182, 174, 0.25);
 }
 
+/* ==========================================================================
+   MIGRATION GUARANTEE CARD (Compare Page)
+   ========================================================================== */
+
+.migration-card {
+  max-width: 860px;
+  margin: 64px auto 0;
+  padding: 44px 36px;
+  text-align: center;
+  border-radius: var(--radius-xl, 20px);
+  background: linear-gradient(180deg, rgba(20, 32, 46, 0.85) 0%, rgba(12, 19, 28, 0.95) 100%);
+  border: 1px solid rgba(63, 182, 174, 0.35);
+  box-shadow: 0 16px 40px -4px rgba(0, 0, 0, 0.5), 0 0 24px -4px rgba(63, 182, 174, 0.12);
+  position: relative;
+  overflow: hidden;
+}
+
+.migration-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 20%;
+  right: 20%;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(63, 182, 174, 0.6), transparent);
+}
+
+.migration-title {
+  font-family: var(--font-display, inherit);
+  font-size: 24px;
+  font-weight: 700;
+  color: #FFFFFF;
+  margin: 0 0 12px;
+  letter-spacing: -0.015em;
+}
+
+.migration-desc {
+  color: var(--ink-secondary, #94A3B8);
+  font-size: 15.5px;
+  line-height: 1.65;
+  max-width: 660px;
+  margin: 0 auto 24px;
+}
+
+.text-success-accent {
+  color: #27C93F;
+}
+
 /* ==========================================================================
    FAQ & ACCORDION (World-Class Premium SaaS Design)
    ========================================================================== */
@@ -3096,6 +3144,34 @@ body.theme-light::before {
   font-weight: 700;
 }
 
+/* Migration Card in Light Mode */
+[data-theme="light"] .migration-card,
+.theme-light .migration-card {
+  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
+  border: 1px solid rgba(14, 110, 106, 0.25) !important;
+  box-shadow: 0 12px 32px -4px rgba(14, 110, 106, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04) !important;
+}
+
+[data-theme="light"] .migration-card::before,
+.theme-light .migration-card::before {
+  background: linear-gradient(90deg, transparent, rgba(14, 110, 106, 0.4), transparent);
+}
+
+[data-theme="light"] .migration-title,
+.theme-light .migration-title {
+  color: #0F172A !important;
+}
+
+[data-theme="light"] .migration-desc,
+.theme-light .migration-desc {
+  color: #475569 !important;
+}
+
+[data-theme="light"] .text-success-accent,
+.theme-light .text-success-accent {
+  color: #15803D !important;
+}
+
 /* Calculator in Light Mode */
 [data-theme="light"] .calc-results-box,
 .theme-light .calc-results-box {
diff --git a/src/pages/AgenciesPage.jsx b/src/pages/AgenciesPage.jsx
index 5e56d6f..f30cb14 100644
--- a/src/pages/AgenciesPage.jsx
+++ b/src/pages/AgenciesPage.jsx
@@ -115,7 +115,7 @@ export default function AgenciesPage() {
                       <div style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: '13px', color: client.health >= 80 ? 'var(--teal-vibrant)' : '#E3A44A' }}>
                         {client.health}/100
                       </div>
-                      <div style={{ fontSize: '11px', color: '#27C93F' }}>{client.trend}</div>
+                      <div className="text-success-accent" style={{ fontSize: '11px', fontWeight: 600 }}>{client.trend}</div>
                     </div>
                   </div>
                 ))}
diff --git a/src/pages/ComparePage.jsx b/src/pages/ComparePage.jsx
index 290d2bc..2fc2a24 100644
--- a/src/pages/ComparePage.jsx
+++ b/src/pages/ComparePage.jsx
@@ -90,8 +90,8 @@ export default function ComparePage() {
                 <td>$239.00/mo (~₹20,500)</td>
               </tr>
               <tr>
-                <td><strong>Extra Team Member Seats</strong></td>
-                <td className="col-crawlerx"><strong style={{ color: '#27C93F' }}>Unlimited (Free)</strong></td>
+                <td>Extra Team Member Seats</td>
+                <td className="col-crawlerx"><strong className="text-success-accent">Unlimited (Free)</strong></td>
                 <td>+$80/mo per seat</td>
                 <td>+$75/mo per seat</td>
                 <td>+$40/mo per seat</td>
@@ -122,20 +122,15 @@ export default function ComparePage() {
         </div>
 
         {/* 3-Minute Migration Guarantee */}
-        <div style={{
-          marginTop: '64px',
-          background: 'linear-gradient(135deg, rgba(63, 182, 174, 0.1) 0%, rgba(200, 129, 31, 0.08) 100%)',
-          border: '1px solid rgba(63, 182, 174, 0.3)',
-          borderRadius: 'var(--radius-lg)',
-          padding: '36px',
-          textAlign: 'center',
-          maxWidth: '850px',
-          margin: '64px auto 0'
-        }}>
-          <h3 style={{ fontSize: '22px', marginBottom: '12px', color: '#FFFFFF' }}>
+        <div className="migration-card">
+          <div className="eyebrow-pill amber" style={{ display: 'inline-flex', marginBottom: '14px' }}>
+            <span className="status-dot amber"></span>
+            <span>FAST SWITCH</span>
+          </div>
+          <h3 className="migration-title">
             Zero-Downtime 3-Minute Agency Migration
           </h3>
-          <p style={{ color: 'var(--ink-secondary)', fontSize: '15px', lineHeight: '1.6', marginBottom: '20px' }}>
+          <p className="migration-desc">
             Moving from Semrush or Ahrefs? Simply enter your client URLs or upload a CSV. 
             CrawlerX automatically imports your project history, keywords, and schedules in under 3 minutes.
           </p>
diff --git a/src/pages/PricingPage.jsx b/src/pages/PricingPage.jsx
index c4487d6..a38d48c 100644
--- a/src/pages/PricingPage.jsx
+++ b/src/pages/PricingPage.jsx
@@ -262,8 +262,8 @@ export default function PricingPage() {
                 <td><strong>Team Members / User Seats</strong></td>
                 <td>1</td>
                 <td>Unlimited</td>
-                <td className="col-crawlerx"><strong style={{ color: '#27C93F' }}>Unlimited (Free)</strong></td>
-                <td><strong style={{ color: '#27C93F' }}>Unlimited (Free)</strong></td>
+                <td className="col-crawlerx"><strong className="text-success-accent">Unlimited (Free)</strong></td>
+                <td><strong className="text-success-accent">Unlimited (Free)</strong></td>
               </tr>
             </tbody>
           </table>