Fixed dark mode readability issue

Author: hrx01-dev

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>

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 }}
         >

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;