From 8f658a0d693a8de475a4116e77d1976b647e5e6e Mon Sep 17 00:00:00 2001
From: Jayam Srivastava <jayamsrivastava99@gmail.com>
Date: Sat, 23 May 2026 19:46:30 +0530
Subject: [PATCH] Fixed  dark mode readability issue

---
 .../testimonials/TestimonialCard.tsx          |  22 +-
 .../testimonials/TestimonialCarousel.tsx      |   7 +-
 src/css/custom.css                            |  80 ++++++-
 src/pages/careers/index.tsx                   | 223 +++++++++++-------
 4 files changed, 241 insertions(+), 91 deletions(-)

diff --git a/src/components/testimonials/TestimonialCard.tsx b/src/components/testimonials/TestimonialCard.tsx
index fea7aeca..730e6fdc 100644
--- a/src/components/testimonials/TestimonialCard.tsx
+++ b/src/components/testimonials/TestimonialCard.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { motion } from "framer-motion";
 import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
 import { useSafeColorMode } from "../../utils/useSafeColorMode";
@@ -54,9 +54,12 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
     };
   };
 
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
   return (
     <motion.div
-      initial={{ opacity: 0, y: 20 }}
+      initial={mounted ? { opacity: 0, y: 20 } : false}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, y: -20 }}
       whileHover={{ y: -8 }}
@@ -95,18 +98,27 @@ const TestimonialCard: React.FC<TestimonialCardProps> = ({
             </Avatar>
 
             <div className="flex-1">
-              <h3 className="text-xl font-bold text-gray-900 mb-1 tracking-tight">
+              <h3
+                className="testimonial-author-name mb-1 text-xl font-bold leading-tight tracking-tight"
+                style={{ color: "#111827", opacity: 1, WebkitTextFillColor: "#111827" }}
+              >
                 {name}
               </h3>
               {username !== "AryanGupta" && username !== "DonaldAnyamba" && (
-                <p className="text-sm text-gray-700 font-medium mb-3">
+                <p
+                  className="testimonial-author-role mb-3 text-sm font-medium"
+                  style={{ color: "#334155", opacity: 1, WebkitTextFillColor: "#334155" }}
+                >
                   {username === "VivienChen" ? "Founder @ Toastie (BC Y24)" :
                     username === "DanielHan" ? "Founder @ Unsloth AI (YC W24, BC Y24)" :
                       "AI Engineer @ Relevance AI"}
                 </p>
               )}
 
-              <div className="flex items-center gap-3 text-xs text-gray-700">
+              <div
+                className="flex items-center gap-3 text-xs"
+                style={{ color: "#334155", opacity: 1, WebkitTextFillColor: "#334155" }}
+              >
                 <span className="font-medium">{date}</span>
               </div>
             </div>
diff --git a/src/components/testimonials/TestimonialCarousel.tsx b/src/components/testimonials/TestimonialCarousel.tsx
index 2b23f7fb..d11b46ca 100644
--- a/src/components/testimonials/TestimonialCarousel.tsx
+++ b/src/components/testimonials/TestimonialCarousel.tsx
@@ -72,6 +72,9 @@ export function TestimonialCarousel() {
   const [current, setCurrent] = useState(0);
   const [count, setCount] = useState(0);
   const { colorMode } = useSafeColorMode();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
 
   useEffect(() => {
     if (!api) {
@@ -106,7 +109,7 @@ export function TestimonialCarousel() {
 
       <div className="relative mx-auto max-w-7xl px-4 z-10">
         <motion.div
-          initial={{ opacity: 0, y: 30 }}
+          initial={mounted ? { opacity: 0, y: 30 } : false}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6 }}
           className="mb-16 text-center"
@@ -121,7 +124,7 @@ export function TestimonialCarousel() {
         </motion.div>
 
         <motion.div
-          initial={{ opacity: 0, y: 40 }}
+          initial={mounted ? { opacity: 0, y: 40 } : false}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6, delay: 0.2 }}
         >
diff --git a/src/css/custom.css b/src/css/custom.css
index cf38fd64..994d6b93 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -5,6 +5,82 @@
   color: inherit;
 }
 
+/* Careers testimonials */
+.testimonials-section .testimonial-carousel {
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  color: #111827;
+}
+
+/* Ensure testimonial cards are visible by default (override animation initial states) */
+.testimonials-section .testimonial-carousel {
+  opacity: 1 !important;
+  transform: none !important;
+}
+
+.testimonials-section .testimonial-carousel--light {
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
+}
+
+.testimonials-section .testimonial-content {
+  color: #0f172a;
+}
+
+.testimonials-section .testimonial-content blockquote {
+  color: #0f172a;
+}
+
+.testimonials-section .testimonial-author {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.85rem 1.1rem;
+  border-radius: 1rem;
+  background: rgba(255, 255, 255, 0.98);
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
+  opacity: 1;
+  mix-blend-mode: normal;
+  isolation: isolate;
+}
+
+/* Strong override to ensure author text is always visible */
+.testimonials-section .testimonial-author {
+  background: rgba(255, 255, 255, 0.98) !important;
+  border: 1px solid rgba(15, 23, 42, 0.08) !important;
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16) !important;
+  opacity: 1 !important;
+  mix-blend-mode: normal !important;
+}
+
+.testimonials-section .testimonial-author-name,
+.testimonials-section .testimonial-author-role {
+  color: #111827 !important;
+  -webkit-text-fill-color: #111827 !important;
+  opacity: 1 !important;
+  mix-blend-mode: normal !important;
+  text-shadow: none !important;
+}
+
+.testimonials-section .testimonial-author-name {
+  color: #111827;
+  -webkit-text-fill-color: #111827;
+  text-shadow: none;
+  opacity: 1;
+  mix-blend-mode: normal;
+  font-weight: 900;
+}
+
+.testimonials-section .testimonial-author-role {
+  color: #334155;
+  -webkit-text-fill-color: #334155;
+  opacity: 1;
+  mix-blend-mode: normal;
+}
+
 /* You can override the default Infima variables here. */
 @import "tailwindcss";
 
@@ -2099,7 +2175,7 @@ html[data-theme="dark"] {
 }
 
 /* TOC inner wrapper — sticky */
-.blog-wrapper .col.col--2 > div {
+.blog-wrapper .col.col--2>div {
   position: sticky !important;
   top: calc(var(--ifm-navbar-height, 60px) + 1rem) !important;
   max-height: calc(100vh - var(--ifm-navbar-height, 60px) - 2rem) !important;
@@ -2232,7 +2308,7 @@ html[data-theme="dark"] .blog-post-page .markdown {
     border-left: none !important;
   }
 
-  .blog-wrapper .col.col--2 > div {
+  .blog-wrapper .col.col--2>div {
     position: static !important;
     max-height: none !important;
     overflow-y: visible !important;
diff --git a/src/pages/careers/index.tsx b/src/pages/careers/index.tsx
index 0c2e0298..aee69158 100644
--- a/src/pages/careers/index.tsx
+++ b/src/pages/careers/index.tsx
@@ -110,7 +110,6 @@ const perks = [
       "Clear career progression paths with mentorship and leadership opportunities.",
   },
 ];
-
 const cultureValues = [
   {
     title: "Innovation First",
@@ -216,9 +215,8 @@ function CareersContent() {
       </Head>
 
       <div
-        className={`careers-page min-h-screen transition-colors duration-300 ${
-          isDark ? "bg-gray-900" : "bg-gradient-to-b from-white to-gray-50"
-        }`}
+        className={`careers-page min-h-screen transition-colors duration-300 ${isDark ? "bg-gray-900" : "bg-gradient-to-b from-white to-gray-50"
+          }`}
       >
         {/* Hero Section */}
         <motion.section
@@ -481,29 +479,26 @@ function CareersContent() {
                         </h3>
                         <div className="flex gap-2">
                           <span
-                            className={`rounded-full px-3 py-1 text-sm ${
-                              isDark
-                                ? "bg-blue-900 text-blue-200"
-                                : "bg-blue-100 text-blue-800"
-                            }`}
+                            className={`rounded-full px-3 py-1 text-sm ${isDark
+                              ? "bg-blue-900 text-blue-200"
+                              : "bg-blue-100 text-blue-800"
+                              }`}
                           >
                             {job.department}
                           </span>
                           <span
-                            className={`rounded-full px-3 py-1 text-sm ${
-                              isDark
-                                ? "bg-green-900 text-green-200"
-                                : "bg-green-100 text-green-800"
-                            }`}
+                            className={`rounded-full px-3 py-1 text-sm ${isDark
+                              ? "bg-green-900 text-green-200"
+                              : "bg-green-100 text-green-800"
+                              }`}
                           >
                             {job.location}
                           </span>
                           <span
-                            className={`rounded-full px-3 py-1 text-sm ${
-                              isDark
-                                ? "bg-purple-900 text-purple-200"
-                                : "bg-purple-100 text-purple-800"
-                            }`}
+                            className={`rounded-full px-3 py-1 text-sm ${isDark
+                              ? "bg-purple-900 text-purple-200"
+                              : "bg-purple-100 text-purple-800"
+                              }`}
                           >
                             {job.type}
                           </span>
@@ -550,80 +545,144 @@ function CareersContent() {
           variants={staggerContainer}
         >
           <div className="mx-auto max-w-4xl">
-            <motion.div className="mb-16 text-center" variants={fadeIn}>
-              <h2
-                className="mb-6 text-4xl font-bold md:text-5xl"
-                style={{
-                  color: isDark ? "#ffffff" : "#111827",
-                }}
-              >
-                What Our Team Says
-              </h2>
-              <p
-                className="text-center text-xl"
-                style={{
-                  color: isDark ? "#d1d5db" : "#4b5563",
-                }}
-              >
-                Hear from our team members about their experience at recode
-                hive.
-              </p>
-            </motion.div>
-
-            <motion.div
-              className="testimonial-carousel rounded-xl p-8 shadow-lg"
-              style={{
-                backgroundColor: isDark ? "#111827" : "#ffffff",
-              }}
-              variants={fadeIn}
-            >
-              <div className="testimonial-content text-center">
-                <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-blue-400 to-purple-500 shadow-inner">
-                  <User className="h-10 w-10 text-white" />
-                </div>
-                <blockquote
-                  className="mb-6 text-lg italic md:text-xl"
+            {mounted ? (
+              <motion.div className="mb-16 text-center" variants={fadeIn}>
+                <h2
+                  className="mb-6 text-4xl font-bold md:text-5xl"
+                  style={{
+                    color: isDark ? "#ffffff" : "#111827",
+                  }}
+                >
+                  What Our Team Says
+                </h2>
+                <p
+                  className="text-center text-xl"
+                  style={{
+                    color: isDark ? "#d1d5db" : "#4b5563",
+                  }}
+                >
+                  Hear from our team members about their experience at recode
+                  hive.
+                </p>
+              </motion.div>
+            ) : (
+              <div className="mb-16 text-center">
+                <h2
+                  className="mb-6 text-4xl font-bold md:text-5xl"
+                  style={{
+                    color: isDark ? "#ffffff" : "#111827",
+                  }}
+                >
+                  What Our Team Says
+                </h2>
+                <p
+                  className="text-center text-xl"
                   style={{
-                    color: isDark ? "#d1d5db" : "#374151",
+                    color: isDark ? "#d1d5db" : "#4b5563",
                   }}
                 >
-                  "{testimonials[activeTestimonial].content}"
-                </blockquote>
-                <div className="testimonial-author">
-                  <h4
-                    className="text-xl font-bold"
+                  Hear from our team members about their experience at recode
+                  hive.
+                </p>
+              </div>
+            )}
+
+            {mounted ? (
+              <motion.div
+                className="testimonial-carousel testimonial-carousel--light rounded-xl p-8 shadow-lg"
+                variants={fadeIn}
+              >
+                <div className="testimonial-content relative z-10 text-center">
+                  <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-blue-400 to-purple-500 shadow-inner">
+                    <User className="h-10 w-10 text-white" />
+                  </div>
+                  <blockquote className="mb-6 text-lg italic md:text-xl">
+                    "{testimonials[activeTestimonial].content}"
+                  </blockquote>
+                  <div
+                    className="testimonial-author relative z-10"
                     style={{
-                      color: isDark ? "#ffffff" : "#111827",
+                      backgroundColor: "rgba(255, 255, 255, 0.98)",
+                      borderColor: "rgba(15, 23, 42, 0.08)",
                     }}
                   >
-                    {testimonials[activeTestimonial].name}
-                  </h4>
-                  <p
+                    <h4
+                      className="testimonial-author-name text-xl font-bold leading-tight"
+                      style={{ color: "#111827" }}
+                    >
+                      {testimonials[activeTestimonial].name}
+                    </h4>
+                    <p
+                      className="testimonial-author-role"
+                      style={{ color: "#334155" }}
+                    >
+                      {testimonials[activeTestimonial].role}
+                    </p>
+                  </div>
+
+                  <div className="mt-8 flex justify-center gap-2">
+                    {testimonials.map((_, index) => (
+                      <button
+                        key={index}
+                        className={`h-3 w-3 rounded-full transition-all duration-300 ${index === activeTestimonial
+                          ? "scale-110 bg-blue-600"
+                          : isDark
+                            ? "bg-gray-600 hover:bg-gray-500"
+                            : "bg-gray-300 hover:bg-gray-400"
+                          }`}
+                        onClick={() => setActiveTestimonial(index)}
+                      />
+                    ))}
+                  </div>
+                </div>
+              </motion.div>
+            ) : (
+              <div className="testimonial-carousel testimonial-carousel--light rounded-xl p-8 shadow-lg">
+                <div className="testimonial-content relative z-10 text-center">
+                  <div className="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-gradient-to-br from-blue-400 to-purple-500 shadow-inner">
+                    <User className="h-10 w-10 text-white" />
+                  </div>
+                  <blockquote className="mb-6 text-lg italic md:text-xl">
+                    "{testimonials[activeTestimonial].content}"
+                  </blockquote>
+                  <div
+                    className="testimonial-author relative z-10"
                     style={{
-                      color: isDark ? "#9ca3af" : "#4b5563",
+                      backgroundColor: "rgba(255, 255, 255, 0.98)",
+                      borderColor: "rgba(15, 23, 42, 0.08)",
                     }}
                   >
-                    {testimonials[activeTestimonial].role}
-                  </p>
-                </div>
-              </div>
+                    <h4
+                      className="testimonial-author-name text-xl font-bold leading-tight"
+                      style={{ color: "#111827" }}
+                    >
+                      {testimonials[activeTestimonial].name}
+                    </h4>
+                    <p
+                      className="testimonial-author-role"
+                      style={{ color: "#334155" }}
+                    >
+                      {testimonials[activeTestimonial].role}
+                    </p>
+                  </div>
 
-              <div className="mt-8 flex justify-center gap-2">
-                {testimonials.map((_, index) => (
-                  <button
-                    key={index}
-                    className={`h-3 w-3 rounded-full transition-all duration-300 ${
-                      index === activeTestimonial
-                        ? "scale-110 bg-blue-600"
-                        : isDark
-                          ? "bg-gray-600 hover:bg-gray-500"
-                          : "bg-gray-300 hover:bg-gray-400"
-                    }`}
-                    onClick={() => setActiveTestimonial(index)}
-                  />
-                ))}
+                  <div className="mt-8 flex justify-center gap-2">
+                    {testimonials.map((_, index) => (
+                      <button
+                        key={index}
+                        className={`h-3 w-3 rounded-full transition-all duration-300 ${index === activeTestimonial
+                          ? "scale-110 bg-blue-600"
+                          : isDark
+                            ? "bg-gray-600 hover:bg-gray-500"
+                            : "bg-gray-300 hover:bg-gray-400"
+                          }`}
+                        onClick={() => setActiveTestimonial(index)}
+                      />
+                    ))}
+                  </div>
+                </div>
               </div>
-            </motion.div>
+            )}
           </div>
         </motion.section>