From 6c5f1f7f157ae1e9b5cfdeb441333707782725f2 Mon Sep 17 00:00:00 2001
From: "Najjar\\NajjarV02" <mglnaj6>
Date: Fri, 17 Apr 2026 16:35:47 +0400
Subject: [PATCH] feat: enhance overlay button styles for improved visibility
 and user experience

---
 src/app/globals.css               |  4 ++--
 src/components/ScrollOverlays.tsx | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index ae5788d..0811fb8 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -475,8 +475,8 @@ html {
   }
 
   .overlay-cta-btn {
-    padding: 0.85rem 2rem !important;
-    font-size: 0.85rem !important;
+    padding: 1.2rem 3rem !important;
+    font-size: 1.1rem !important;
   }
 }
 
diff --git a/src/components/ScrollOverlays.tsx b/src/components/ScrollOverlays.tsx
index de38848..456a2fc 100644
--- a/src/components/ScrollOverlays.tsx
+++ b/src/components/ScrollOverlays.tsx
@@ -272,25 +272,25 @@ export function ScrollOverlays() {
               display: 'inline-flex',
               alignItems: 'center',
               gap: '0.75rem',
-              padding: '1rem 2.5rem',
-              borderRadius: '3rem',
+              padding: '1.4rem 3.5rem',
+              borderRadius: '4rem',
               background: 'linear-gradient(135deg, #c4a265, #d4b47a)',
               color: '#ffffff',
-              fontSize: '0.95rem',
-              fontWeight: 600,
-              letterSpacing: '0.1em',
+              fontSize: '1.2rem',
+              fontWeight: 700,
+              letterSpacing: '0.12em',
               textTransform: 'uppercase',
               textDecoration: 'none',
-              boxShadow: '0 8px 32px rgba(196, 162, 101, 0.3)',
+              boxShadow: '0 12px 40px rgba(196, 162, 101, 0.45)',
               transition: 'all 0.3s ease',
             }}
           >
             Configure Your G1
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
               <line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" />
             </svg>
           </Link>
-          <span style={{ fontSize: '0.7rem', color: '#94a3b8', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
+          <span style={{ fontSize: '0.8rem', color: '#94a3b8', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
             Build &amp; Order Your Robot
           </span>
         </div>