Force text colors via Gradio theme variables (fix invisible white-on-white)

app.py

@@ -153,33 +153,42 @@ def predict(sequence, inhibitor_choice, inhibitor_custom, inh_type, substrate_sm
 # ----------------------------------------------------------------------
 
 CSS = """
-.title-block {
-    text-align: center;
-    padding: 1em 0;
-    margin-bottom: 0.5em;
-}
-.title-block h1 { margin: 0; font-size: 2.2em; }
-.title-block p { margin: 0.3em 0 0; opacity: 0.75; font-size: 1.05em; }
+/* Force readable text on all custom elements regardless of theme */
+.title-block { text-align: center; padding: 1em 0; margin-bottom: 0.5em; }
+.title-block h1 { margin: 0; font-size: 2.2em; color: var(--body-text-color) !important; }
+.title-block p { margin: 0.3em 0 0; font-size: 1.05em; color: var(--body-text-color-subdued) !important; }
+
+/* Ki result card */
 .ki-card {
     border: 1px solid var(--border-color-primary);
     border-radius: 8px;
     padding: 1em 1.5em;
     background: var(--background-fill-secondary);
+    color: var(--body-text-color) !important;
 }
+.ki-card h1, .ki-card h2, .ki-card h3, .ki-card h4 { color: var(--body-text-color) !important; }
+.ki-card table, .ki-card th, .ki-card td { color: var(--body-text-color) !important; }
+
+/* Footer / comparison tables — force dark text in light mode */
+.markdown-body, .prose, .gr-markdown { color: var(--body-text-color) !important; }
+.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4,
+.prose h1, .prose h2, .prose h3, .prose h4 { color: var(--body-text-color) !important; }
+.markdown-body table th, .markdown-body table td,
+.prose table th, .prose table td { color: var(--body-text-color) !important; }
 """
 
 with gr.Blocks(title="SugarKi — Ki prediction", theme=gr.themes.Default(), css=CSS) as demo:
 
     # ----- header -----
-    gr.HTML(
+    gr.Markdown(
         """
-        <div class='title-block'>
-          <h1>🧪 SugarKi</h1>
-          <p>
-            Family-specialized Ki prediction for sugar-chemistry enzymes —
-            polyol DHs, sugar kinases, glycosidases, sugar phosphatases,
-            aldolases, isomerases, phosphomutases.
-          </p>
+        <div align='center'>
+
+        # 🧪 SugarKi
+
+        ##### Family-specialized Ki prediction for sugar-chemistry enzymes
+        ##### polyol DHs · sugar kinases · glycosidases · phosphatases · aldolases · isomerases · phosphomutases
+
         </div>
         """
     )