FIX: same

Author: msilver22

assets/css/custom.css

@@ -62,8 +62,9 @@
   text-align: center;
 }
 
-/* Force black text color for collaborators on mobile */
+/* Force proper text colors for collaborators on mobile - respect dark mode */
 @media (max-width: 768px) {
+  /* Light mode: black text */
   .blox-collaborators .resume-biography {
     color: black !important;
   }
@@ -73,17 +74,14 @@
     color: black !important;
   }
 
-  /* Set default link color to black, but allow hover to work */
   .blox-collaborators .resume-biography a {
     color: black !important;
   }
 
-  /* Preserve hover effects - use primary color on hover */
   .blox-collaborators .resume-biography a:hover {
     color: rgb(37 99 235) !important; /* primary-600 */
   }
 
-  /* Organization links hover */
   .blox-collaborators .resume-biography div a:hover {
     color: rgb(37 99 235) !important; /* primary-600 */
   }
@@ -97,14 +95,49 @@
     fill: black !important;
   }
 
-  /* Allow hover on network icons */
   .blox-collaborators .network-icon a:hover svg,
   .blox-collaborators .network-icon a:hover path {
     fill: rgb(37 99 235) !important; /* primary-600 */
   }
+  
+  /* Dark mode on mobile: white text */
+  .dark .blox-collaborators .resume-biography {
+    color: white !important;
+  }
+  
+  .dark .blox-collaborators .resume-biography h3,
+  .dark .blox-collaborators .resume-biography div:not(.network-icon) {
+    color: white !important;
+  }
+  
+  .dark .blox-collaborators .resume-biography a {
+    color: white !important;
+  }
+  
+  .dark .blox-collaborators .resume-biography a:hover {
+    color: rgb(96 165 250) !important; /* primary-400 */
+  }
+  
+  .dark .blox-collaborators .resume-biography div a:hover {
+    color: rgb(96 165 250) !important; /* primary-400 */
+  }
+  
+  .dark .blox-collaborators .network-icon {
+    color: white !important;
+  }
+  
+  .dark .blox-collaborators .network-icon svg,
+  .dark .blox-collaborators .network-icon path {
+    fill: white !important;
+  }
+  
+  .dark .blox-collaborators .network-icon a:hover svg,
+  .dark .blox-collaborators .network-icon a:hover path {
+    fill: rgb(96 165 250) !important; /* primary-400 */
+  }
 }
 
-/* Ensure dark mode still works on larger screens */
+/* Ensure dark mode works on larger screens */
 @media (min-width: 769px) {
   .dark .blox-collaborators .resume-biography {
     color: white;

layouts/partials/blox/collaborators.html

@@ -81,7 +81,7 @@
                     {{ $person_page.Title }}
                   </a>
                 </rb>
-                <rt>{{ $person.name_pronunciation }}</rt>
+                <rt class="text-black dark:text-white">{{ $person.name_pronunciation }}</rt>
               </ruby>
             {{- else -}}
               <a
@@ -98,7 +98,7 @@
           {{ range $person.organizations }}
             <div class="mb-2 text-black dark:text-white">
               {{ with .url }}<a href="{{ . }}" target="_blank" rel="noopener" class="text-black dark:text-white hover:text-primary-600 dark:hover:text-primary-400 transition duration-150">{{ end }}
-              <div>{{ .name }}</div>
+              <div class="text-black dark:text-white">{{ .name }}</div>
               {{ if .url }}</a>{{ end }}
             </div>
           {{ end }}