Merge pull request #81 from Satvika1825/glassy-style-update

Updated container style to glassy dark blue and changed dim text color IN DARK THEME

Author: Varshitha713

index.html

@@ -83,7 +83,7 @@ <h2><i class="fas fa-filter"></i> Filter Projects</h2>
         </section>
 
         <section class="projects-section" id="projects">
-            <div class="container">
+            <div class="projects-container">
                 <h2 class="section-title">Featured Projects</h2>
                 <div class="loading" id="loading">
                     <div class="spinner"></div>
@@ -385,31 +385,8 @@ <h3 class="review-name">Sara Ahmed</h3>
         icon.textContent = '🌙'; // Moon in light mode
     }
 
-    toggle.addEventListener('click', () => {
-        body.classList.toggle('dark-theme');
-        const theme = body.classList.contains('dark-theme') ? 'dark' : 'light';
-        localStorage.setItem('theme', theme);
-
-        // Update icon
-        icon.textContent = theme === 'dark' ? '☀️' : '🌙';
-</script>
-
-    
-<script>
-    const scrollToTopBtn = document.getElementById("scrollToTopBtn");
 
-// Show button when user scrolls down
-window.addEventListener("scroll", () => {
-    scrollToTopBtn.style.display = window.scrollY > 300 ? "block" : "none";
-});
-
-// Scroll to top smoothly
-scrollToTopBtn.addEventListener("click", () => {
-    window.scrollTo({
-        top: 0,
-        behavior: "smooth"
-    });
-});
+    <script src="script.js"></script>
+</body>
+</html>
 
-</script>
-  </body>

style.css

@@ -84,12 +84,13 @@
             transition: background 0.3s ease, color 0.3s ease;
         }
 
-
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 20px;
-        }
+.container,
+.filter-container,
+.projects-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
 
         /* Header styles */
         .header {
@@ -1079,27 +1080,85 @@ body.dark-theme .fill-btn:hover {
     width: 100%;
   }
 }
-
 /* ------------------------------------------- */
-        #scrollToTopBtn {
-    position: fixed;
-    bottom: 2rem;
-    right: 2rem;
-    z-index: 999;
-    background-color: #667eea;
-    color: white;
-    border: none;
-    outline: none;
-    padding: 0.75rem 1rem;
-    border-radius: 50%;
-    font-size: 1.25rem;
-    cursor: pointer;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
-    display: none;
-    transition: background 0.3s ease, transform 0.3s ease;
+ .dark-theme .filters {
+
+            background: rgba(18, 25, 60, 0.75); /* dark blue translucent */
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            
+            border-radius: 16px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            
+            box-shadow:
+                0 0 8px rgba(44, 66, 255, 0.4),
+                0 0 16px rgba(44, 66, 255, 0.3);
+            
+            color: #f0f4ff;
+            transition: all 0.3s ease;
+        }
+
+         .dark-theme .project-card {
+          background: rgba(18, 25, 60, 0.75); /* dark blue translucent */
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            
+            border-radius: 16px;
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            
+            box-shadow:
+                0 0 8px rgba(44, 66, 255, 0.4),
+                0 0 16px rgba(44, 66, 255, 0.3);
+            
+            color: #f0f4ff;
+            transition: all 0.3s ease;
+        }
+
+/* Dark theme styles  for cards*/
+body.dark-theme button:hover {
+  background-color: rgba(102, 126, 234, 0.3);
+  cursor: pointer;
 }
 
-#scrollToTopBtn:hover {
-    background-color: #5a67d8;
-    transform: scale(1.1);
-}
+
+/* Dark theme text and border colors */
+body.dark-theme h1,
+body.dark-theme .filter-container h2,
+body.dark-theme h3,
+body.dark-theme h4,
+body.dark-theme h5,
+body.dark-theme h6,
+body.dark-theme p,
+body.dark-theme span,
+body.dark-theme a,
+body.dark-theme li,
+body.dark-theme label,
+body.dark-theme input,
+body.dark-theme textarea,
+body.dark-theme button,
+body.dark-theme .projects-container,
+body.dark-theme .filter-container {
+  color: #ffffff !important;
+  border-color: #ffffff;
+}
+
+/* Inputs & Textareas in dark theme */
+body.dark-theme input,
+body.dark-theme textarea {
+  background-color: #1f1f1f;
+}
+
+/* Dark mode buttons */
+body.dark-theme button {
+  background-color: rgba(102, 126, 234, 0.3) ;
+  color: #ffffff !important;
+  border: 1px solid rgba(102, 126, 234, 0.3);
+}
+
+/* Button hover effect */
+body.dark-theme button:hover {
+  background-color: rgba(102, 126, 234, 0.5);
+  cursor: pointer;
+}
+
+