Update app.py

app.py

@@ -66,7 +66,7 @@ body, html, .gradio-container, #root, .main, .app, .gradio-interface, .gradio-bl
 footer, .gradio-footer, .svelte-1ipelgc, .gradio-logo, .gradio-app__settings {
     display: none !important;
 }
-.main-header { text-align: center; margin: 0 !important; color: #3b82f6 !important; font-weight: 600 !important; font-size: 2.5rem; letter-spacing: -0.025em; }
+.main-header { text-align: center; margin: 0 !important; color: #3b82f6 !important; font-weight: 600 !portant; font-size: 2.5rem; letter-spacing: -0.025em; }
 .card { background: #fafafa !important; border-radius: 12px !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important; border: 1px solid #e5e7eb !important; margin-bottom: 1.5rem !important; transition: all 0.2s ease-in-out !important; overflow: hidden !important; }
 .card-header { background: linear-gradient(135deg, #1975cf 0%, #1557b0 100%) !important; color: white !important; padding: 1rem 1.5rem !important; border-radius: 12px 12px 0 0 !important; font-weight: 600 !important; font-size: 1.1rem !important; }
 .card-content { padding: 1.5rem !important; color: #4b5563 !important; line-height: 1.6 !important; background: #fafafa !important; }
@@ -78,34 +78,30 @@ footer, .gradio-footer, .svelte-1ipelgc, .gradio-logo, .gradio-app__settings {
 div[data-testid="markdown"] strong { color: #0056b3 !important; font-weight: bold !important; }
 
 /* Dark theme compatibility */
-.dark h1#main_title, .dark #main_title h1 {
+.dark h1#main_title, .dark #main_title h1, .dark [data-testid="markdown"] h1 {
     color: #4dabf7 !important;
-    text-shadow: none !important;
-    border: none !important;
-    background-color: transparent !important;
+    text-shadow: 0px 0px 3px rgba(0,0,0,0.5) !important;
 }
-.dark h3#subtitle, .dark #subtitle h3 {
-    color: #e9ecef !important; 
-    text-shadow: none !important;
-    border: none !important;
-    background-color: transparent !important;
+.dark h3#subtitle, .dark #subtitle h3, .dark [data-testid="markdown"] h3, .dark [data-testid="markdown"] * {
+    color: #ffffff !important; 
+    text-shadow: 0px 0px 2px rgba(0,0,0,0.5) !important;
 }
-.dark #subtitle a {
+.dark #subtitle a, .dark [data-testid="markdown"] a {
     color: #4dabf7 !important;
+    font-weight: bold !important;
 }
 
-/* Remove borders from all elements */
-[data-testid="markdown"] h1, [data-testid="markdown"] h2, [data-testid="markdown"] h3, 
-[data-testid="markdown"] h4, [data-testid="markdown"] h5, [data-testid="markdown"] h6,
-[data-testid="markdown"] p, [data-testid="markdown"] span {
-    border: none !important;
-    box-shadow: none !important;
+/* Force text color in dark mode */
+@media (prefers-color-scheme: dark) {
+    #subtitle h3, #subtitle * {
+        color: #ffffff !important;
+    }
 }
 """
 
 with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown("<h1 style='font-size:2.5em; color:#007dc3; margin-bottom:0; text-shadow: none; background-color: transparent; border: none;'>SR100 Vision Model Space</h1>", elem_id="main_title")
-    gr.Markdown("<h3 style='margin-top:0; color:#333; text-shadow: none; background-color: transparent; border: none;'>Vision models for Person Presence developed by Synaptics for specific to Astra SR100 MCU. Learn more at <a href='https://developer.synaptics.com/docs/sr/sr100/quick-start?utm_source=hf' target='_blank' style='color:#007dc3; text-decoration:underline;'>Synaptics AI Developer Zone</a></h3>", elem_id="subtitle")
+    gr.Markdown("<h1 style='font-size:2.5em; color:#007dc3; margin-bottom:0; text-shadow: 0px 0px 3px rgba(255,255,255,0.5);'>SR100 Vision Model Space</h1>", elem_id="main_title")
+    gr.Markdown("<h3 style='margin-top:0; color:#333333; text-shadow: 0px 0px 2px rgba(255,255,255,0.5); font-weight: 500;'>Vision models for Person Presence developed by Synaptics for specific to Astra SR100 MCU. Learn more at <a href='https://developer.synaptics.com/docs/sr/sr100/quick-start?utm_source=hf' target='_blank' style='color:#007dc3; text-decoration:underline;'>Synaptics AI Developer Zone</a></h3>", elem_id="subtitle")
     user_text = gr.Markdown("")
     with gr.Row():
         with gr.Column(scale=1):