Merge pull request #656 from piyusha-chopra/main

Updated Navbar [sticky navbar, refined colors, checked responsiveness]

Author: supriya46788

Faq.html

@@ -80,7 +80,7 @@
    justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
-    position: relative;
+    /* position: relative; */
   }
 
   .navbar-right-links {

about.html

@@ -82,7 +82,7 @@
           justify-content: space-between;
           align-items: center;
           flex-wrap: wrap;
-          position: relative;
+          /* position: relative; */
         }
 
         .navbar-right-links {
@@ -103,6 +103,7 @@
           min-width: 150px;
         }
 
+
         .navbar-right-links.show {
           display: flex !important;
         }

blog.html

@@ -61,7 +61,7 @@
       justify-content: space-between;
       align-items: center;
       flex-wrap: wrap;
-      position: relative;
+      /* position: relative; */
     }
 
     .navbar-right-links {

contact.html

@@ -140,7 +140,7 @@
         justify-content: space-between;
         align-items: center;
         flex-wrap: wrap;
-        position: relative;
+        /* position: relative; */
       }
 
       .navbar-right-links {

css/about.css

@@ -11,7 +11,7 @@
 } */
 body {
   font-family: "Segoe UI", Tahoma, sans-serif;
-  background: #f9f9f9;
+  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
   color: #333;
   line-height: 1.6;
   overflow-x: hidden;

css/faq.css

@@ -53,7 +53,7 @@ body.dark-mode {
 /* Dark mode toggle button styling */
 .dark-toggle {
 
-    background: #fff !important;
+    /* background: #fff !important; */
     border: none;
     cursor: pointer;
     padding: 0.6rem 1.2rem;
@@ -62,7 +62,7 @@ body.dark-mode {
 }
 
 .dark-toggle:hover {
-    background: rgba(255, 255, 255, 0.1) !important;
+    background: #2563eb;
 }
 /* For dark mode button background */
 body.dark-mode #darkModeToggle {
@@ -483,11 +483,14 @@ body.dark-mode .faq-item:hover {
 /* Dark mode navbar compatibility */
 body.dark-mode .navbar {
     background: transparent;
+    background: linear-gradient(90deg, #1f2937, #111827);
+    color: var(--text-light);
+    box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.05);
 }
 
 body.dark-mode .nav-item {
-    background: linear-gradient(135deg, #4a5568, #2d3748);
-    color: #e0e0e0;
+    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+    color: var(--text-light);
 }
 
 body.dark-mode .nav-item:hover {

css/style.css

@@ -40,6 +40,7 @@ body {
   background-color:#fff;
   border-radius: 10px;
   margin-bottom: 1.5rem;
+  position: sticky;
 }
 
 
@@ -96,7 +97,7 @@ body {
 
 .nav-item {
   background: linear-gradient(135deg, var(--primary), var(--primary-dark));
-  color: white;
+  color:white;
   border: none;
   padding: 0.6rem 1.2rem;
   margin: 5px;
@@ -111,6 +112,9 @@ body {
   transition: transform 0.25s ease, box-shadow 0.25s ease;
   font-weight: 500;
 }
+.fa-moon{
+  color:white;
+}
 /* for sun it must be  white */
 .fa-sun{ 
    color: #fceeb1;
@@ -603,6 +607,7 @@ body.dark-mode #footer-outer h3 {
   margin-top: 15px;
 }
 
+
 @media (min-width: 1024px) {
   .main-grid {
     grid-template-columns: 2fr 1fr;
@@ -1111,6 +1116,12 @@ body.dark-mode #footer-outer h3 {
   .details-grid {
     grid-template-columns: 1fr;
   }
+ 
+  body.dark-mode .navbar-right-links{
+    background: linear-gradient(90deg, #1f2937, #111827);
+   
+  }
+
 }
 
 /* Dark Mode */
@@ -1240,18 +1251,21 @@ body.dark-mode .tag-badge {
 
 /* Dark Mode Toggle Styling */
 .dark-toggle {
-  background: #f3f4f6;
+  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+    color: white;
   border: none;
-  border-radius: 6px;
-  padding: 8px 10px;
+  border-radius: 10px;
+  padding: 0.6rem 1.2rem;
   font-size: 1rem;
   cursor: pointer;
   color: #1f2937;
   transition: background 0.3s ease;
 }
 
 .dark-toggle:hover {
-  background: #e5e7eb;
+  background-color: #115cff;
+  transform: translateY(-2px) scale(1.05);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }
 
 /* Optional dark-mode override */
@@ -1261,7 +1275,8 @@ body.dark-mode .tag-badge {
 }
 
 .dark-mode .dark-toggle:hover {
-  background: #4b5563;
+    background: linear-gradient(135deg, #63b3ed, #4299e1);
+    color: #1a202c;
 }
 
 body.dark-mode .swal2-popup {
@@ -2615,3 +2630,7 @@ body.dark-mode .speed-control input:focus {
   cursor: pointer;
   color: #2563eb; /* matches your theme */
 }
+
+.dark-mode .hamburger-container .bar{
+  background-color: #adadad;
+}

css/tool.css

@@ -37,7 +37,7 @@ body.dark-mode #darkModeToggle {
 /* Dark mode toggle button styling */
 .dark-toggle {
   color:#1a1a1a;
-background: #fff !important;
+/* background: #fff !important; */
 border: none;
 cursor: pointer;
 padding: 0.6rem 1.2rem;
@@ -46,7 +46,9 @@ transition: all 0.25s ease;
 }
 
 .dark-toggle:hover {
-background: rgba(255, 255, 255, 0.1) !important;
+    background-color: #115cff;
+    transform: translateY(-2px) scale(1.05);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }
 
 header {

tools.html

@@ -79,7 +79,7 @@
    justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
-    position: relative;
+    /* position: relative; */
   }
 
   .navbar-right-links {
@@ -322,7 +322,7 @@ <h4>Connect</h4>
 /* Dark mode toggle button styling */
 .dark-toggle {
   color:#1a1a1a;
-background: none !important;
+/* background: none !important; */
 border: none;
 cursor: pointer;
 padding: 0.6rem 1.2rem;
@@ -331,7 +331,8 @@ <h4>Connect</h4>
 }
 
 .dark-toggle:hover {
-background: rgba(255, 255, 255, 0.1) !important;
+    
+    color: #1a202c;;
 }
 
 header {
@@ -617,12 +618,15 @@ <h4>Connect</h4>
 
 /* Dark mode navbar compatibility */
 body.dark-mode .navbar {
-background: transparent;
+    background: transparent;
+    background: linear-gradient(90deg, #1f2937, #111827);
+    color: var(--text-light);
+    box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.05);
 }
 
 body.dark-mode .nav-item {
-background: linear-gradient(135deg, #4a5568, #2d3748);
-color: #e0e0e0;
+    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+    color: var(--text-light); 
 }