Fix Duplicate Rendering of Top 3 Contributors and Improve Grid Hierarchy

frontend/css/contributors.css

@@ -853,6 +853,97 @@ body.dark-mode .contributors-section p {
   text-overflow: ellipsis;    
 }
 
+.contributor-actions {
+  flex-shrink: 0;  
+  margin-left: 1rem;
+  display: flex;
+  align-items: center;
+}
+
+/* ===== Contributors Controls (Search + Toggle) ===== */
+.contributors-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin: 30px auto 20px;
+  max-width: 900px;
+  flex-wrap: wrap;
+}
+
+/* Search Wrapper */
+.search-wrapper {
+  position: relative;
+  flex: 1;
+  min-width: 280px;
+}
+
+/* Search Icon */
+.search-icon {
+  position: absolute;
+  left: 14px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #9ca3af;
+  font-size: 15px;
+  pointer-events: none;
+}
+
+/* Search Input Styling */
+#contributor-search {
+  width: 100%;
+  padding: 14px 16px 14px 42px;
+  border-radius: 12px;
+  border: 1.5px solid #e5e7eb;
+  font-size: 16px;
+  font-family: "Inter", sans-serif;
+  background: #ffffff;
+  transition: all 0.25s ease;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
+}
+
+/* Hover Effect */
+#contributor-search:hover {
+  border-color: #d1d5db;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
+}
+
+/* Focus Effect (Important for UX) */
+#contributor-search:focus {
+  outline: none;
+  border-color: var(--primary-gold, #d4af37);
+  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
+  background: #ffffff;
+}
+
+/* Bot Toggle Styling */
+.bot-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+  color: #374151;
+  background: #ffffff;
+  padding: 10px 14px;
+  border-radius: 10px;
+  border: 1px solid #e5e7eb;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.bot-toggle:hover {
+  border-color: #d1d5db;
+  background: #f9fafb;
+}
+
+.bot-toggle input {
+  accent-color: var(--primary-gold, #d4af37);
+  cursor: pointer;
+}
+
+/* Mobile Responsiveness */
+@media (max-width: 640px) {
+  .contributors-controls {
 /* Animation trigger */
 .contributor-card.is-visible {
     opacity: 1;
@@ -963,7 +1054,6 @@ body.dark-mode .contributors-section p {
 
 /* =========================================
    SKELETON LOADING ANIMATION
-========================================= */
 .contributor-skeleton {
     background: #fff;
     border: 1px solid #eee;
@@ -1007,7 +1097,6 @@ body.dark-mode .contributors-section p {
 
 /* =========================================
    DARK MODE OVERRIDES (The Fix)
-========================================= */
 body.dark-mode .contributor-card {
     background-color: #1e1e1e !important;
     border-color: #333 !important;
@@ -1057,7 +1146,6 @@ body.dark-mode .sk {
 
 /* =========================================
    CONTRIBUTORS STATS
-========================================= */
 
 .contributors-stats {
   display: flex;
@@ -1118,7 +1206,6 @@ body.dark-mode .sk {
 
 /* =========================================
    TOP CONTRIBUTOR – ENHANCED
-========================================= */
 
 .stat-pill.stat-top {
   background: linear-gradient(180deg, #e6c453, #fdeeb5);
@@ -1141,7 +1228,6 @@ body.dark-mode .sk {
 
 /* =========================================
    CONTRIBUTORS CONTROLS
-========================================= */
 
 .contributors-controls {
   display: flex;
@@ -1183,7 +1269,6 @@ body.dark-mode .sk {
 
 /* =========================================
    RESPONSIVE
-========================================= */
 
 @media (max-width: 768px) {
   .contributors-stats {
@@ -1202,6 +1287,129 @@ body.dark-mode .sk {
     align-items: stretch;
   }
 
+  .bot-toggle {
+    justify-content: center;
+  }
+}
+
+.contributors-section {
+  padding-top: 40px;
+}
+
+.contributors-section h3 {
+  text-align: center;
+  margin-bottom: 10px;
+}
+
+.contributors-section p {
+  text-align: center;
+  margin-bottom: 20px;
+  color: #6b7280;
+}
+
+/* ===== Top Contributors Highlight Section ===== */
+.top-contributors-section {
+  max-width: 1100px;
+  margin: 40px auto 20px;
+  padding: 30px 24px;
+  background: linear-gradient(135deg, #fffaf0, #fff7e6);
+  border-radius: 20px;
+  border: 1px solid #f1e3b0;
+  box-shadow: 0 12px 35px rgba(212, 175, 55, 0.15);
+  text-align: center;
+}
+
+
+.top-title {
+  text-align: center;
+  font-size: 22px;
+  font-weight: 700;
+  margin-bottom: 20px;
+  color: #b8860b;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+}
+
+.top-title i {
+  color: #d4af37;
+}
+
+.top-contributors-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 20px;
+}
+
+/* Highlight Top Cards */
+.top-contributors-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 24px;
+  align-items: stretch;
+  justify-content: center;
+}
+
+/* Rank Badge */
+.top-contributors-grid .contributor-card::before {
+  content: "🏆 Top";
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: #d4af37;
+  color: white;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 4px 8px;
+  border-radius: 8px;
+}
+
+.top-contributors-grid .contributor-card {
+  width: 100%;
+  max-width: 320px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+/* Hover Effect */
+.top-contributors-grid .contributor-card:hover {
+  transform: scale(1.08) translateY(-5px);
+  box-shadow: 0 20px 45px rgba(212, 175, 55, 0.25);
+}
+
+/* Dark Mode Support */
+body.dark-mode .top-contributors-section {
+  background: linear-gradient(135deg, #1f2937, #111827);
+  border: 1px solid #374151;
+}
+
+body.dark-mode .top-title {
+  color: #facc15;
+}
+.top-card {
+  transform: scale(1.05);
+  border: 2px solid #f0d98c;
+  box-shadow: 0 15px 35px rgba(212, 175, 55, 0.18);
+  position: relative;
+}
+
+.top-rank-badge {
+  position: absolute;
+  top: 10px;
+  right: 12px;
+  font-size: 20px;
+}
+
+.contributor-chip.is-top {
+  background: #fff3cd;
+  color: #856404;
+  font-weight: 600;
+}
+
   .stat-pill {
     width: 100%;
     justify-content: center;
@@ -1219,7 +1427,6 @@ body.dark-mode .sk {
 
 /* =========================================
    DARK MODE
-========================================= */
 
 body.dark-mode .stat-pill {
   background: linear-gradient(180deg, #ffffff, #ffe9a9);
@@ -1256,7 +1463,6 @@ body.dark-mode #contributor-search {
 
 /* =========================================
    ANIMATION
-========================================= */
 
 @keyframes statFadeUp {
   to {
@@ -1267,7 +1473,6 @@ body.dark-mode #contributor-search {
 
 /* ==========================
    Enhance contributors UI 
-========================== */
 
 .dark-mode {
   --contributors-bg: #0f172a;
@@ -1346,4 +1551,4 @@ body.dark-mode #contributor-search {
 /* Divider lines */
 .dark-mode hr {
   border-color: var(--contributors-border);
-}
+}