From a1d226420faf0f97800c8578d126506b9f26e041 Mon Sep 17 00:00:00 2001
From: Anuj Sharma <anujsharma8d@gmail.com>
Date: Fri, 10 Jul 2026 07:06:02 +0530
Subject: [PATCH] fix: remove sticky filter bar

---
 web-app/css/styles.css | 287 +----------------------------------------
 web-app/index.html     |  30 -----
 2 files changed, 6 insertions(+), 311 deletions(-)

diff --git a/web-app/css/styles.css b/web-app/css/styles.css
index 3de56d11..5a34e82b 100644
--- a/web-app/css/styles.css
+++ b/web-app/css/styles.css
@@ -2621,80 +2621,6 @@ body.sidebar-active .sidebar-dock {
   color: var(--text-secondary);
 }
 
-/* ═══════════════════════════════════════════════════════════════
-   STICKY FILTER BAR
-   ═══════════════════════════════════════════════════════════════ */
-.sticky-filter-bar {
-  position: fixed;
-  top: calc(var(--nav-height) + 24px);
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 999;
-  opacity: 0;
-  pointer-events: none;
-  transition:
-    opacity var(--duration-base) ease,
-    transform var(--duration-base) ease;
-  width: calc(100% - 32px);
-  max-width: 600px;
-}
-
-.sticky-filter-bar.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.sticky-filter-inner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  padding: 6px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 14px;
-  backdrop-filter: blur(20px);
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
-.sticky-filter-inner::-webkit-scrollbar {
-  display: none;
-}
-
-.sticky-tab {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 14px;
-  border-radius: 10px;
-  font-family: var(--font-sans);
-  font-size: 0.8rem;
-  font-weight: 500;
-  color: var(--text-secondary);
-  background: transparent;
-  border: none;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: all var(--duration-fast) ease;
-}
-
-.sticky-tab:hover {
-  color: var(--text);
-  background: var(--bg-glass);
-}
-
-.sticky-tab.active {
-  color: var(--text);
-  background: var(--accent-soft);
-  border: 1px solid var(--border-accent);
-}
-
-.sticky-tab svg {
-  width: 14px;
-  height: 14px;
-}
-
 /* ═══════════════════════════════════════════════════════════════
    PLAYGROUND SECTION
    ═══════════════════════════════════════════════════════════════ */
@@ -3840,11 +3766,6 @@ body.sidebar-collapsed .playground-section {
     margin-bottom: 24px;
   }
 
-  .sticky-filter-bar {
-    top: 72px;
-    width: calc(100% - 16px);
-  }
-
   .cursor-glow {
     display: none;
   }
@@ -4134,96 +4055,6 @@ textarea:focus-visible,
   transform: translateX(-50%) translateY(0);
 }
 
-/* ═══════════════════════════════════════
-   STICKY CATEGORY FILTER BAR
-═══════════════════════════════════════ */
-.sticky-filter-bar {
-  position: fixed;
-  top: 0;
-  /* will be offset by JS after measuring navbar */
-  left: 0;
-  right: 0;
-  z-index: 999;
-  background: color-mix(in srgb, var(--surface-color) 90%, transparent);
-  backdrop-filter: blur(10px);
-  -webkit-backdrop-filter: blur(10px);
-  border-bottom: 1px solid var(--border-color);
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
-
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(-100%);
-  transition:
-    opacity 0.25s ease,
-    transform 0.25s ease;
-}
-
-.sticky-filter-bar.visible {
-  opacity: 1;
-  pointer-events: auto;
-  transform: translateY(0);
-}
-
-.sticky-filter-inner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.25rem;
-  padding: 0.55rem 1.25rem;
-  max-width: 1200px;
-  margin: 0 auto;
-  overflow-x: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.sticky-filter-inner::-webkit-scrollbar {
-  display: none;
-}
-
-.sticky-tab {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.38rem;
-  background: transparent;
-  border: 0;
-  border-radius: 50px;
-  padding: 0.35rem 0.9rem;
-  cursor: pointer;
-  font-size: 0.82rem;
-  font-family: "IBM Plex Mono", monospace;
-  font-weight: 600;
-  color: var(--text-secondary);
-  text-transform: lowercase;
-  transition:
-    background-color 0.18s ease,
-    color 0.18s ease;
-  white-space: nowrap;
-}
-
-.sticky-tab i {
-  width: 14px;
-  height: 14px;
-  stroke-width: 2;
-  flex-shrink: 0;
-}
-
-.sticky-tab:hover {
-  background: var(--accent-soft);
-  color: var(--text-color);
-}
-
-.sticky-tab.active {
-  background: var(--accent-soft);
-  color: var(--accent-color);
-  border: 1px solid var(--accent-border);
-}
-
-.sticky-tab:focus-visible {
-  outline: 2px solid var(--accent-color);
-  outline-offset: 2px;
-}
-
 /* ═══════════════════════════════════════
    CONSOLIDATED RESPONSIVE BREAKPOINTS
 ═══════════════════════════════════════ */
@@ -4446,16 +4277,6 @@ textarea:focus-visible,
     font-size: 0.95rem;
   }
 
-  .sticky-filter-inner {
-    justify-content: flex-start;
-    padding: 0.45rem 1rem;
-    gap: 0.18rem;
-  }
-
-  .sticky-tab {
-    padding: 0.3rem 0.7rem;
-    font-size: 0.78rem;
-  }
 }
 
 @media (max-width: 375px) {
@@ -4581,9 +4402,6 @@ textarea:focus-visible,
     transform: none;
   }
 
-  .sticky-filter-bar {
-    transition: none;
-  }
 }
 
 /* ==========================================================================
@@ -4851,76 +4669,6 @@ html[data-theme="dark"] body {
   padding: 0 1rem;
 }
 
-.sticky-filter-bar {
-  position: sticky;
-  top: 88px;
-  z-index: 950;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  justify-content: center;
-  width: min(1120px, calc(100% - 32px));
-  margin: 0 auto 18px;
-  padding: 12px;
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.72);
-  border: 1px solid rgba(128, 104, 85, 0.12);
-  backdrop-filter: blur(18px) saturate(1.2);
-  -webkit-backdrop-filter: blur(18px) saturate(1.2);
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
-  opacity: 0;
-  transform: translateY(-8px);
-  pointer-events: none;
-  transition: opacity 180ms ease, transform 180ms ease;
-}
-
-.sticky-filter-bar.visible {
-  opacity: 1;
-  transform: translateY(0);
-  pointer-events: auto;
-}
-
-[data-theme="dark"] .sticky-filter-bar {
-  background: rgba(14, 18, 28, 0.88);
-  border-color: rgba(255, 255, 255, 0.08);
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
-}
-
-.sticky-tab {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 40px;
-  padding: 0 16px;
-  border-radius: 999px;
-  border: 1px solid rgba(128, 104, 85, 0.12);
-  background: rgba(255, 255, 255, 0.45);
-  color: var(--text-secondary);
-  font-family: var(--font-sans);
-  font-size: 0.88rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
-  transition: all var(--duration-fast) ease;
-}
-
-.sticky-tab:hover {
-  color: var(--text);
-  border-color: var(--border-accent);
-  background: var(--accent-soft);
-}
-
-.sticky-tab.active {
-  color: var(--text);
-  border-color: var(--accent-glow);
-  background: var(--accent-soft);
-  box-shadow: 0 0 0 1px var(--accent-glow);
-}
-
-[data-theme="dark"] .sticky-tab {
-  background: rgba(255, 255, 255, 0.03);
-  border-color: rgba(255, 255, 255, 0.08);
-}
-
 /* ── Hero Timeline (right side) ───────────────────────────── */
 .hero-timeline {
   position: absolute;
@@ -5138,7 +4886,6 @@ html[data-theme="dark"] body {
 .achievement-card,
 .featured-lab-card,
 .project-card,
-.sticky-filter-bar,
 .playground-section,
 .footer,
 .modal-content {
@@ -5562,8 +5309,7 @@ button:focus-visible,
   top: 2px;
 }
 
-.hero-features,
-.sticky-filter-inner {
+.hero-features{
   background: rgba(255, 255, 255, 0.58);
   border: 1px solid rgba(128, 104, 85, 0.08);
   border-radius: 24px;
@@ -5571,14 +5317,12 @@ button:focus-visible,
   gap: 0.55rem;
 }
 
-[data-theme="dark"] .hero-features,
-[data-theme="dark"] .sticky-filter-inner {
+[data-theme="dark"] .hero-features{
   background: rgba(255, 255, 255, 0.06);
   border-color: rgba(255, 239, 223, 0.1);
 }
 
-.feature-badge,
-.sticky-tab {
+.feature-badge{
   border-radius: 999px;
   padding: 0.8rem 1rem;
   text-transform: none;
@@ -5595,8 +5339,7 @@ button:focus-visible,
   display: none;
 }
 
-.feature-badge.active,
-.sticky-tab.active {
+.feature-badge.active{
   background: linear-gradient(135deg,
       rgba(255, 198, 132, 0.32),
       rgba(125, 220, 185, 0.3));
@@ -5604,25 +5347,14 @@ button:focus-visible,
   border: 1px solid rgba(128, 104, 85, 0.1);
 }
 
-[data-theme="dark"] .feature-badge,
-[data-theme="dark"] .sticky-tab {
+[data-theme="dark"] .feature-badge{
   color: var(--text-secondary);
 }
 
-[data-theme="dark"] .feature-badge.active,
-[data-theme="dark"] .sticky-tab.active {
+[data-theme="dark"] .feature-badge.active {
   border-color: rgba(255, 239, 223, 0.12);
 }
 
-.sticky-filter-bar {
-  top: 16px;
-  left: 12px;
-  right: 12px;
-  width: auto;
-  background: transparent;
-  border-bottom: 0;
-  box-shadow: none;
-}
 
 .hero-card-topline,
 .progress-card-header,
@@ -6628,13 +6360,6 @@ body.sidebar-collapsed .sidebar-dock .sidebar-footer .sidebar-main-controls {
 
 }
 
-@media (max-width: 1280px) {
-
-    .sticky-filter-bar{
-      display:none ;
-    } 
-
-}
 
 /* Make cards take full width of their grid cell */
 .project-card {
diff --git a/web-app/index.html b/web-app/index.html
index af03c86b..c48ea26a 100644
--- a/web-app/index.html
+++ b/web-app/index.html
@@ -257,36 +257,6 @@ <h1 class="hero-title">
       </div>
     </section>
 
-    <!-- Sticky Filter Bar -->
-    <div class="sticky-filter-bar visible" id="stickyFilterBar" aria-label="Project category filters">
-      <div class="sticky-filter-inner">
-        <button aria-selected="true" class="sticky-tab active" data-sticky-category="all" role="tab" tabindex="0"
-          type="button">
-          All
-        </button>
-        <button aria-selected="false" class="sticky-tab" data-sticky-category="games" role="tab" tabindex="-1"
-          type="button">
-          Games
-        </button>
-        <button aria-selected="false" class="sticky-tab" data-sticky-category="math" role="tab" tabindex="-1"
-          type="button">
-          Math
-        </button>
-        <button aria-selected="false" class="sticky-tab" data-sticky-category="utilities" role="tab" tabindex="-1"
-          type="button">
-          Utilities
-        </button>
-        <button aria-selected="false" class="sticky-tab" data-sticky-category="favorites" role="tab" tabindex="-1"
-          type="button">
-          Favorites
-        </button>
-        <button aria-selected="false" class="sticky-tab" data-sticky-category="playground" role="tab" tabindex="-1"
-          type="button">
-          Playground
-        </button>
-      </div>
-    </div>
-
     <section class="stats-dashboard-section">
   <div class="container">