Merge pull request #1570 from anujsharma8d/fix/remove-stickybar

fix: remove sticky filter bar

Author: steam-bell-92

web-app/css/styles.css

@@ -2417,80 +2417,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
    ═══════════════════════════════════════════════════════════════ */
@@ -3616,11 +3542,6 @@ body.sidebar-collapsed .playground-section {
     margin-bottom: 24px;
   }
 
-  .sticky-filter-bar {
-    top: 72px;
-    width: calc(100% - 16px);
-  }
-
   .cursor-glow {
     display: none;
   }
@@ -3910,96 +3831,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
 ═══════════════════════════════════════ */
@@ -4222,16 +4053,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) {
@@ -4357,9 +4178,6 @@ textarea:focus-visible,
     transform: none;
   }
 
-  .sticky-filter-bar {
-    transition: none;
-  }
 }
 
 /* ==========================================================================
@@ -4627,76 +4445,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;
@@ -4914,7 +4662,6 @@ html[data-theme="dark"] body {
 .achievement-card,
 .featured-lab-card,
 .project-card,
-.sticky-filter-bar,
 .playground-section,
 .footer,
 .modal-content {
@@ -5340,23 +5087,20 @@ 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;
   padding: 0.65rem;
   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;
@@ -5373,34 +5117,22 @@ 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));
   color: var(--text-color);
   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,
@@ -6112,13 +5844,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 {