From 535cedd30b536c148a2df4eb121aa1900b39c83e Mon Sep 17 00:00:00 2001
From: cupadev-admin <admin@cupadev.com>
Date: Mon, 9 Mar 2026 07:11:11 +0000
Subject: [PATCH] fix: apply designer agent improvements to src/index.css

---
 src/index.css | 115 +++++++++++++++++++++++++++++++-------------------
 1 file changed, 72 insertions(+), 43 deletions(-)

diff --git a/src/index.css b/src/index.css
index 3059587..2ca7950 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,73 +2,102 @@
 @tailwind components;
 @tailwind utilities;
 
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap');
+
 @layer base {
+  *, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
   html {
     scroll-behavior: smooth;
+    font-size: 16px;
   }
 
   body {
-    @apply bg-white text-gray-800 font-sans;
+    font-family: 'Inter', system-ui, sans-serif;
+    background-color: #ffffff;
+    color: #1a1a1a;
+    overflow-x: hidden;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
-  h1, h2, h3, h4 {
-    font-family: 'Playfair Display', Georgia, serif;
+  :focus-visible {
+    outline: 2px solid #c9a84c;
+    outline-offset: 3px;
+    border-radius: 2px;
   }
 }
 
 @layer components {
-  .section-title {
-    @apply text-3xl md:text-4xl font-bold text-marine-900 mb-4;
-    font-family: 'Playfair Display', Georgia, serif;
-  }
-
-  .section-subtitle {
-    @apply text-gold-600 uppercase tracking-widest text-sm font-semibold mb-2;
-  }
-
   .btn-primary {
-    @apply inline-flex items-center gap-2 bg-gold-500 hover:bg-gold-600 text-white font-semibold py-3 px-7 rounded-sm transition-all duration-300 shadow-md hover:shadow-lg active:scale-95;
+    @apply inline-flex items-center justify-center gap-2
+           bg-gold-500 text-white font-semibold
+           px-8 py-4 rounded-sm text-sm tracking-wide uppercase
+           hover:bg-gold-600 active:bg-gold-700
+           transition-all duration-200
+           shadow-md hover:shadow-lg
+           focus-visible:ring-2 focus-visible:ring-gold-400 focus-visible:ring-offset-2;
   }
 
   .btn-secondary {
-    @apply inline-flex items-center gap-2 border-2 border-white text-white hover:bg-white hover:text-marine-900 font-semibold py-3 px-7 rounded-sm transition-all duration-300;
+    @apply inline-flex items-center justify-center gap-2
+           border-2 border-white text-white font-semibold
+           px-8 py-4 rounded-sm text-sm tracking-wide uppercase
+           hover:bg-white hover:text-marine-900
+           transition-all duration-200
+           focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2;
+  }
+
+  .btn-ghost {
+    @apply inline-flex items-center justify-center gap-2
+           text-gold-500 font-semibold
+           px-4 py-2 rounded-sm text-sm tracking-wide uppercase
+           hover:text-gold-400
+           transition-colors duration-200;
+  }
+
+  .section-title {
+    @apply font-serif text-3xl md:text-4xl lg:text-5xl font-bold text-marine-900 leading-tight;
+  }
+
+  .section-subtitle {
+    @apply text-gray-500 text-lg mt-4 leading-relaxed;
   }
 
   .card {
-    @apply bg-white rounded-sm shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden;
+    @apply bg-white rounded-lg shadow-md hover:shadow-xl
+           transition-all duration-300 border border-gray-100;
   }
 
-  .divider {
-    @apply w-16 h-1 bg-gold-500 mx-auto my-4;
-  }
-}
-
-@layer utilities {
-  .text-shadow {
-    text-shadow: 0 2px 8px rgba(0,0,0,0.45);
-  }
-
-  .bg-overlay {
-    background: linear-gradient(180deg, rgba(16, 42, 67, 0.80) 0%, rgba(16, 42, 67, 0.65) 100%);
+  .tricolore-bar {
+    background: linear-gradient(to right, #002395 33.33%, #ffffff 33.33%, #ffffff 66.66%, #ED2939 66.66%);
   }
 }
 
 /* Scrollbar */
-::-webkit-scrollbar {
-  width: 8px;
-}
-::-webkit-scrollbar-track {
-  background: #f0f4f8;
-}
-::-webkit-scrollbar-thumb {
-  background: #486581;
-  border-radius: 4px;
-}
-::-webkit-scrollbar-thumb:hover {
-  background: #334e68;
-}
+::-webkit-scrollbar { width: 6px; }
+::-webkit-scrollbar-track { background: #f1f1f1; }
+::-webkit-scrollbar-thumb { background: #4A5C3F; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #1C2B1A; }
 
-/* Smooth anchor offset for fixed header */
-section[id] {
-  scroll-margin-top: 72px;
+/* Skip link for accessibility */
+.skip-link {
+  position: absolute;
+  top: -100%;
+  left: 1rem;
+  z-index: 9999;
+  background: #c9a84c;
+  color: #fff;
+  padding: 0.5rem 1rem;
+  font-weight: 600;
+  border-radius: 0 0 4px 4px;
+  text-decoration: none;
+  transition: top 0.2s;
+}
+.skip-link:focus {
+  top: 0;
 }