Merge pull request #994 from sohumvenkatadri7/fix-interviewprep-badge

Fixed the Pill badge color issue which forced the dark grey color on the badges and Companies tab which pushed the gradient grey color.

Author: sanjay-kv

src/css/custom.css

@@ -523,35 +523,6 @@ body {
   }
 
   .navbar-sidebar .navbar__link:hover {
-    background-color: var(--ifm-color-emphasis-200) !important;
-  }
-
-  /* Improve sidebar dropdown behavior */
-  .navbar-sidebar .dropdown {
-    display: block !important;
-  }
-
-  .navbar-sidebar .dropdown__menu {
-    position: static !important;
-    display: block !important;
-    box-shadow: none !important;
-    border: none !important;
-    margin: 0 !important;
-    padding: 0.5rem 0 !important;
-    background: transparent !important;
-    overflow: visible !important;
-  }
-
-  .navbar-sidebar .dropdown__link {
-    padding: 0.5rem 1rem 0.5rem 2rem !important;
-    border-radius: 4px !important;
-    margin: 2px 0 !important;
-    font-size: 0.9rem !important;
-    display: block !important;
-    color: var(--ifm-font-color-base) !important;
-  }
-
-  .navbar-sidebar .dropdown__link:hover {
     background-color: var(--ifm-color-emphasis-300) !important;
     color: var(--ifm-color-primary) !important;
   }
@@ -864,6 +835,43 @@ html.theme-light .text-gray-900 {
   background-color: #ffffff !important;
 }
 
+/* Ensure the specific block is forced light in light mode */
+html[data-theme="light"] .interview-prep-page .technical-outer {
+  background-image: linear-gradient(135deg,#eff6ff 0%, #f8fafc 100%) !important;
+  background-color: #ffffff !important;
+  -webkit-backdrop-filter: none !important;
+  backdrop-filter: none !important;
+  mix-blend-mode: normal !important;
+  isolation: isolate !important;
+  z-index: 10 !important;
+}
+
+/* Companies tab: use white gradients in light mode and remove overlays */
+[data-theme="light"] .company-outer {
+  background-image: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
+  background-color: #ffffff !important;
+  color: #0f172a !important;
+  isolation: isolate !important;
+  -webkit-backdrop-filter: none !important;
+  backdrop-filter: none !important;
+  mix-blend-mode: normal !important;
+}
+
+/* hide the subtle pattern overlay added inside the component */
+[data-theme="light"] .company-outer > .absolute.inset-0,
+[data-theme="light"] .company-outer .absolute.inset-0.opacity-5 {
+  display: none !important;
+  background: none !important;
+  opacity: 1 !important;
+}
+
+/* ensure badges & inner panels render normally */
+[data-theme="light"] .company-outer,
+[data-theme="light"] .company-outer * {
+  mix-blend-mode: normal !important;
+  background-blend-mode: normal !important;
+}
+
 /*==== SECTION 13 Modern Blog Enhancements ======*/
 .modern-gradient-bg {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -1575,3 +1583,87 @@ a {
 [data-theme='dark'] .rounded.dark\:bg-gray-700 {
   background-color: #374151 !important; /* gray-700 */
 }
+
+/* difficulty badge overrides — ensure readable in light mode and lift above overlays */
+.interview-prep-page .difficulty-badge {
+  z-index: 50;
+  background-clip: padding-box;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
+}
+
+/* Light mode: explicit background + text for each variant */
+[data-theme="light"] .interview-prep-page .difficulty-badge.bg-green-200 {
+  background-color: #DCFCE7 !important; /* green-200 -> higher contrast */
+  color: #14532D !important;
+}
+[data-theme="light"] .interview-prep-page .difficulty-badge.bg-yellow-200 {
+  background-color: #FEF3C7 !important; /* yellow-200 */
+  color: #78350F !important;
+}
+[data-theme="light"] .interview-prep-page .difficulty-badge.bg-red-200 {
+  background-color: #FEE2E2 !important; /* red-200 */
+  color: #7F1D1D !important;
+}
+
+/* Keep all duration badges grey in light mode */
+[data-theme="light"] .interview-prep-page .duration-badge {
+  background-color: #f3f4f6 !important; /* gray-100 */
+  color: #1f2937 !important; /* gray-800 */
+  z-index: 50;
+}
+
+/* Force removal of that Tailwind gradient in light mode */
+html[data-theme="light"] .bg-gradient-to-r.from-blue-50.to-purple-50 {
+  background-image: none !important;
+  background-color: #ffffff !important;
+}
+
+/* Companies: force white/near-white surface in light mode for .company-outer */
+html[data-theme="light"] .company-outer {
+  background-image: linear-gradient(135deg,#ffffff 0%, #f8fafc 100%) !important;
+  background-color: #ffffff !important;
+  -webkit-backdrop-filter: none !important;
+  backdrop-filter: none !important;
+  mix-blend-mode: normal !important;
+}
+html[data-theme="light"] .company-outer::before,
+html[data-theme="light"] .company-outer::after {
+  display: none !important;
+  background: none !important;
+  content: none !important;
+}
+
+/* Strong, final overrides for pill buttons and community button text in light mode */
+html[data-theme="light"] .pill-badge,
+html[data-theme="light"] .company-outer .pill-badge,
+html[data-theme="light"] [data-slot="card-header"] .pill-badge,
+html[data-theme="light"] .company-border .pill-badge,
+html[data-theme="light"] .pill-badge[class*="bg-"],
+html[data-theme="light"] span.bg-gray-100.pill-badge {
+  background-color: #f3f4f6 !important; /* gray-100 visible in light mode */
+  color: #1f2937 !important;            /* dark text */
+  mix-blend-mode: normal !important;
+  background-clip: padding-box !important;
+  z-index: 9999 !important;
+  opacity: 1 !important;
+}
+
+/* Force link text inside gradient buttons to be white */
+html[data-theme="light"] .company-tab-link,
+html[data-theme="light"] .company-tab-community-link,
+html[data-theme="light"] .company-border a,
+html[data-theme="light"] button [class*="company-tab-link"],
+html[data-theme="light"] a.company-tab-link {
+  color: #ffffff !important;
+  text-decoration: none !important;
+}
+
+/* If any Tailwind gradient utility still applies, remove it for these containers in light mode */
+html[data-theme="light"] .company-outer.bg-gradient-to-br,
+html[data-theme="light"] [data-slot="card-header"].bg-gradient-to-br {
+  background-image: linear-gradient(135deg,#ffffff 0%, #f8fafc 100%) !important;
+  background-color: #ffffff !important;
+  -webkit-backdrop-filter: none !important;
+  backdrop-filter: none !important;
+  mix-blend-mode: normal !important;
+}