Update public/styles.css

public/styles.css

@@ -78,14 +78,14 @@ body::before {
 
 /* ===== NAVBAR ===== */
 .navbar {
-    background: rgba(255, 255, 255, 0.8) !important;
+    background: rgba(44, 62, 80, 0.95) !important;
     backdrop-filter: blur(20px);
-    border-bottom: 1px solid var(--glass-border);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
     padding: var(--spacing-md) 0;
     position: sticky;
     top: 0;
     z-index: 1000;
-    box-shadow: var(--shadow);
+    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
 }
 
 .nav-container {
@@ -97,55 +97,69 @@ body::before {
     align-items: center;
 }
 
-.navbar-brand {
-    font-size: var(--font-size-2xl);
-    font-weight: 800;
-    background: var(--primary-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+.nav-brand a {
     text-decoration: none;
+}
+
+.nav-brand h2 {
+    color: #fff;
+    font-size: 1.5rem;
+    font-weight: 700;
     display: flex;
     align-items: center;
     gap: var(--spacing-sm);
     letter-spacing: -0.02em;
+    margin: 0;
 }
 
-.navbar-brand a {
-    text-decoration: none;
+.nav-brand i {
+    color: #e74c3c;
+    font-size: 1.8rem;
 }
 
-.navbar-brand i {
-    background: var(--primary-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+.nav-toggle {
+    display: none;
+    flex-direction: column;
+    gap: 5px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 5px;
+    z-index: 1001;
 }
 
-.nav-brand h2 {
-    background: var(--primary-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    font-size: var(--font-size-2xl);
-    font-weight: 800;
-    display: flex;
-    align-items: center;
-    gap: var(--spacing-sm);
-    letter-spacing: -0.02em;
+.nav-toggle span {
+    width: 25px;
+    height: 3px;
+    background: #ecf0f1;
+    border-radius: 3px;
+    transition: all 0.3s ease;
+}
+
+.nav-toggle.active span:nth-child(1) {
+    transform: rotate(45deg) translate(8px, 8px);
+}
+
+.nav-toggle.active span:nth-child(2) {
+    opacity: 0;
+}
+
+.nav-toggle.active span:nth-child(3) {
+    transform: rotate(-45deg) translate(7px, -7px);
 }
 
 .nav-menu {
     display: flex;
-    gap: var(--spacing-xl);
+    gap: var(--spacing-md);
     align-items: center;
 }
 
 .nav-link {
-    color: var(--text-secondary) !important;
+    color: #ecf0f1 !important;
     text-decoration: none;
     padding: var(--spacing-sm) var(--spacing-lg) !important;
-    border-radius: var(--border-radius);
-    transition: var(--transition-base);
+    border-radius: 6px;
+    transition: all 0.3s ease;
     display: flex;
     align-items: center;
     gap: var(--spacing-sm);
@@ -153,26 +167,25 @@ body::before {
     background: transparent;
     border: 1px solid transparent;
     font-size: var(--font-size-sm);
-    margin: 0 var(--spacing-xs);
 }
 
 .nav-link:hover {
-    background: var(--glass-bg) !important;
-    color: var(--text-primary) !important;
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-sm);
-    border-color: var(--glass-border);
+    background: rgba(255, 255, 255, 0.1) !important;
+    color: #fff !important;
+    transform: translateY(-1px);
 }
 
-.nav-link.btn-primary {
+.nav-link.nav-cta {
     background: var(--primary-gradient) !important;
     color: white !important;
-    box-shadow: 0 4px 20px rgba(255, 168, 168, 0.4);
+    box-shadow: 0 4px 15px rgba(255, 168, 168, 0.3);
+    border-radius: 25px;
+    padding: var(--spacing-sm) 1.5rem !important;
 }
 
-.nav-link.btn-primary:hover {
-    transform: translateY(-3px) !important;
-    box-shadow: 0 8px 30px rgba(255, 168, 168, 0.5) !important;
+.nav-link.nav-cta:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(255, 168, 168, 0.4) !important;
 }
 
 /* ===== HERO SECTION ===== */