Update app.py

app.py

@@ -33,16 +33,6 @@ body {
     color: #ffffff !important;
     margin-bottom: 12px;
 }
-.hero-title {
-    margin: 0 0 12px 0;
-    font-size: 2.5rem;
-    line-height: 1.08;
-    font-weight: 800;
-    letter-spacing: -0.02em;
-    color: #ffffff !important;
-    opacity: 1 !important;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
-}
 .hero-subtitle {
     max-width: 860px;
     margin: 0;
@@ -199,10 +189,9 @@ button.secondary:hover {
     color: #16324a;
 }
 
-/* Keep hero text white no matter what */
+/* Keep hero stats white no matter what */
 .hero-shell *,
 .hero-inner *,
-.hero-title,
 .hero-subtitle,
 .eyebrow,
 .hero-stat strong,
@@ -224,7 +213,20 @@ button.secondary:hover {
    SLEDGEHAMMER OVERRIDES FOR GRADIO BUGS
    ========================================= */
 
-/* 1. TABS VISIBILITY FIX */
+/* 1. HERO TITLE FIX (Bypasses Gradio's internal h1 color reset) */
+.gradio-container .hero-shell h1.hero-title,
+.gradio-container .hero-shell h1,
+.hero-shell .hero-title {
+    color: #ffffff !important;
+    -webkit-text-fill-color: #ffffff !important; /* Forces white even if webkit overrides it */
+    opacity: 1 !important;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
+    margin: 0 0 12px 0 !important;
+    font-size: 2.5rem !important;
+    font-weight: 800 !important;
+}
+
+/* 2. TABS VISIBILITY FIX */
 div.tab-nav {
     gap: 8px !important;
     padding: 14px 22px 0 22px !important;
@@ -249,32 +251,41 @@ button[role="tab"].selected {
     border-color: #173a59 !important;
 }
 
-/* 2. EXAMPLES LABEL ("Sample Business Scenarios") FIX */
-.examples .label-wrap span,
-.examples > label,
-div.examples > p {
-    color: #000000 !important; /* Force to solid black */
-    font-weight: 800 !important;
-    opacity: 1 !important;
+/* 3. EXAMPLES LABEL ("Sample Business Scenarios") FIX */
+div.examples label,
+div.examples p,
+div.examples span,
+.examples > div > span,
+.examples .label-wrap {
+    color: #000000 !important;
+    font-weight: 700 !important;
 }
 
-/* 3. EXAMPLES TABLE HOVER & SELECTED STATE FIX */
-/* Normal Row State */
-.examples table tbody tr td,
-.examples table tbody tr th {
-    color: #1c2733 !important; /* Dark text normally */
+/* 4. EXAMPLES BUTTONS & HOVER STATE FIX (For Gradio 4 Bubbles) */
+.examples button,
+.examples [role="button"],
+.examples .gallery-item {
+    background-color: #ffffff !important;
+    color: #000000 !important;
+    border: 1px solid #ccd5de !important;
 }
-/* Hover Row State */
-.examples table tbody tr:hover td,
-.examples table tbody tr:hover th {
-    background-color: #eef4f8 !important; /* Light blue background */
-    color: #000000 !important;            /* Solid black text on hover */
+
+/* Force text inside the example buttons to stay black */
+.examples button *,
+.examples [role="button"] *,
+.examples .gallery-item * {
+    color: #000000 !important;
 }
-/* Selected Row State */
-.examples table tbody tr.selected td,
-.examples table tbody tr[aria-selected="true"] td {
-    background-color: #DCE6F2 !important; /* Slightly darker blue when clicked */
-    color: #000000 !important;            /* Solid black text when clicked */
+
+/* Hover and Selected states for Examples */
+.examples button:hover,
+.examples [role="button"]:hover,
+.examples .gallery-item:hover,
+.examples button.selected,
+.examples [aria-selected="true"] {
+    background-color: #eef4f8 !important; /* Clean light blue hover */
+    color: #000000 !important;            
+    border-color: #b8c7d4 !important;
 }
 """