Fixed the grey badges issue and changed the color of the text on the button of Join Community Discord from green to white.

Author: sohumvenkatadri7

src/css/custom.css

@@ -1625,11 +1625,45 @@ html[data-theme="light"] .company-outer {
   -webkit-backdrop-filter: none !important;
   backdrop-filter: none !important;
   mix-blend-mode: normal !important;
-  isolation: isolate !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;
+}

src/pages/interview-prep/CompaniesTab.tsx

@@ -227,7 +227,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
                   <p className="text-sm text-gray-600 dark:text-gray-300 mb-3 leading-relaxed">
                     {item.description}
                   </p>
-                  <div className="inline-flex items-center px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs font-semibold text-gray-700 dark:text-gray-300">
+                  <div className="inline-flex items-center px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs font-semibold text-gray-700 dark:text-gray-300 pill-badge">
                     {item.stats}
                   </div>
                 </motion.div>
@@ -678,7 +678,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
             </p>
           </div>
 
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12 pill-badge">
             {[
               {
                 title: "Share Experiences",
@@ -747,7 +747,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
                 <p className="text-sm text-gray-600 dark:text-gray-300 mb-4 leading-relaxed">
                   {item.description}
                 </p>
-                <div className="inline-flex items-center px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs font-semibold text-gray-700 dark:text-gray-300">
+                <div className="inline-flex items-center px-3 py-1 bg-gray-100 dark:bg-gray-700 rounded-full text-xs font-semibold text-gray-700 dark:text-gray-300 pill-badge">
                   {item.benefit}
                 </div>
               </motion.div>
@@ -762,7 +762,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
             >
               <Button className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white hover:from-indigo-700 hover:to-purple-700 px-12 py-4 text-mdx`x rounded-2xl shadow-lg">
                 <Users className="w-5 h-5 mr-3" />
-                <Link to="/community" className="company-tab-link">
+                <Link to="/community" className="company-tab-link text-white">
                   Join Community Discord
                 </Link>
               </Button>