From b819811f76615a03e5673b6db9057143b4dd5303 Mon Sep 17 00:00:00 2001 From: nitin mohan Date: Mon, 6 Jul 2026 17:14:54 +0530 Subject: [PATCH] increased navbar icon colour contrast and changed the contact section colour theme to premium blue --- components/contact/ContactSection.module.css | 70 ++++++++++---------- components/navbar.tsx | 4 +- 2 files changed, 37 insertions(+), 37 deletions(-) diff --git a/components/contact/ContactSection.module.css b/components/contact/ContactSection.module.css index e0ee9d9..05edf33 100644 --- a/components/contact/ContactSection.module.css +++ b/components/contact/ContactSection.module.css @@ -22,7 +22,7 @@ background: linear-gradient( 90deg, transparent, - rgba(212, 175, 55, 0.3) 50%, + rgba(96, 165, 250, 0.3) 50%, transparent ); z-index: 10; @@ -98,13 +98,13 @@ letter-spacing: 0.3em; font-size: 13px; font-weight: 600; - color: #d4af37; + color: #60a5fa; } .horizontalDivider { width: 48px; height: 1px; - background: linear-gradient(90deg, rgba(212, 175, 55, 0.4), transparent); + background: linear-gradient(90deg, rgba(96, 165, 250, 0.4), transparent); position: relative; } @@ -114,9 +114,9 @@ top: -1.5px; width: 4px; height: 4px; - background: #d4af37; + background: #60a5fa; border-radius: 50%; - box-shadow: 0 0 8px #d4af37; + box-shadow: 0 0 8px #60a5fa; } .heading { @@ -132,7 +132,7 @@ } .headingGold { - background: linear-gradient(135deg, #e7c86e 0%, #a67c1b 100%); + background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -163,7 +163,7 @@ width: 100%; gap: 16px; background: rgba(10, 14, 24, 0.4); - border: 1px solid rgba(212, 175, 55, 0.05); + border: 1px solid rgba(96, 165, 250, 0.05); padding: 8px 16px 8px 10px; border-radius: 18px; transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); @@ -181,11 +181,11 @@ background: radial-gradient( circle, rgba(255, 255, 255, 0.05), - rgba(212, 175, 55, 0.05) + rgba(96, 165, 250, 0.05) ); - box-shadow: 0 8px 20px rgba(212, 175, 55, 0.12); - border: 1px solid rgba(212, 175, 55, 0.08); - color: #d4af37; + box-shadow: 0 8px 20px rgba(96, 165, 250, 0.12); + border: 1px solid rgba(96, 165, 250, 0.08); + color: #60a5fa; transition: all 0.3s ease; flex-shrink: 0; } @@ -193,13 +193,13 @@ .featureItem:hover { transform: translateX(4px); background: rgba(10, 14, 24, 0.7); - border-color: rgba(212, 175, 55, 0.15); + border-color: rgba(96, 165, 250, 0.15); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .featureItem:hover .iconWrapper { - box-shadow: 0 0 16px rgba(212, 175, 55, 0.15); - border-color: rgba(212, 175, 55, 0.3); + box-shadow: 0 0 16px rgba(96, 165, 250, 0.15); + border-color: rgba(96, 165, 250, 0.3); } .featureText { @@ -259,7 +259,7 @@ background: linear-gradient( to bottom, transparent, - rgba(212, 175, 55, 0.15) 50%, + rgba(96, 165, 250, 0.15) 50%, transparent ); } @@ -267,9 +267,9 @@ .centerDot { width: 5px; height: 5px; - background: #d4af37; + background: #60a5fa; border-radius: 50%; - box-shadow: 0 0 12px 2px rgba(212, 175, 55, 0.8); + box-shadow: 0 0 12px 2px rgba(96, 165, 250, 0.8); } /* Right Section - 50% */ @@ -362,13 +362,13 @@ width: 48px; height: 48px; border-radius: 50%; - border: 1px solid rgba(212, 175, 55, 0.3); + border: 1px solid rgba(96, 165, 250, 0.3); display: flex; justify-content: center; align-items: center; z-index: 3; background: #060812; - color: #d4af37; + color: #60a5fa; } /* Continuous Signal Rings */ @@ -403,8 +403,8 @@ .floatingDot3 { position: absolute; border-radius: 50%; - background: #d4af37; - box-shadow: 0 0 6px rgba(212, 175, 55, 0.8); + background: #60a5fa; + box-shadow: 0 0 6px rgba(96, 165, 250, 0.8); z-index: 4; } @@ -444,7 +444,7 @@ color: #94a3b8; font-size: 0.9rem; padding-bottom: 20px; - border-bottom: 1px solid rgba(212, 175, 55, 0.1); + border-bottom: 1px solid rgba(96, 165, 250, 0.1); margin-bottom: 24px; z-index: 1; } @@ -492,15 +492,15 @@ width: 32px; height: 32px; border-radius: 10px; - background: rgba(212, 175, 55, 0.08); - color: #d4af37; + background: rgba(96, 165, 250, 0.08); + color: #60a5fa; margin-top: 8px; flex-shrink: 0; transition: all 0.3s ease; } .inputGroup:focus-within .inputIconWrapper { - background: rgba(212, 175, 55, 0.15); + background: rgba(96, 165, 250, 0.15); } .input { @@ -556,7 +556,7 @@ } .input:focus ~ .inputIcon { - color: #d4af37; + color: #60a5fa; } .input:focus::placeholder { @@ -576,10 +576,10 @@ width: 100%; height: 52px; border-radius: 14px; - background: rgba(212, 175, 55, 0.08); + background: rgba(96, 165, 250, 0.08); backdrop-filter: blur(8px); - border: 1px solid rgba(212, 175, 55, 0.3); - color: #d4af37; + border: 1px solid rgba(96, 165, 250, 0.3); + color: #60a5fa; display: flex; justify-content: center; align-items: center; @@ -587,7 +587,7 @@ font-size: 1rem; font-weight: 600; cursor: pointer; - box-shadow: 0 4px 12px rgba(212, 175, 55, 0.05); + box-shadow: 0 4px 12px rgba(96, 165, 250, 0.05); transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); position: relative; overflow: hidden; @@ -598,7 +598,7 @@ content: ""; position: absolute; inset: 0; - background: linear-gradient(135deg, #e7c86e 0%, #a67c1b 100%); + background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%); opacity: 0; z-index: -1; transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); @@ -610,16 +610,16 @@ .submitBtn:hover { transform: translateY(-2px); - border-color: rgba(212, 175, 55, 0); /* Transparent border */ + border-color: rgba(96, 165, 250, 0); /* Transparent border */ color: #030508; box-shadow: - 0 12px 28px rgba(212, 175, 55, 0.25), - 0 4px 12px rgba(212, 175, 55, 0.15); + 0 12px 28px rgba(96, 165, 250, 0.25), + 0 4px 12px rgba(96, 165, 250, 0.15); } .submitBtn:active { transform: translateY(0) scale(0.97); - box-shadow: 0 4px 10px rgba(212, 175, 55, 0.2); + box-shadow: 0 4px 10px rgba(96, 165, 250, 0.2); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease; diff --git a/components/navbar.tsx b/components/navbar.tsx index 43777f2..770ccd6 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -306,7 +306,7 @@ export default function Navbar() { } ${ isActive ? "text-white" - : "text-white/50 group-hover:text-white/80 group-hover:scale-110" + : "text-white/75 group-hover:text-white group-hover:scale-110" }`} strokeWidth={isActive ? 2.5 : 2} /> @@ -314,7 +314,7 @@ export default function Navbar() { className={`text-[12px] font-semibold tracking-wide transition-colors duration-300 ${ isActive ? "text-white" - : "text-white/60 group-hover:text-white" + : "text-white/80 group-hover:text-white" }`} > {link.label}