Update gradio_app/static/styles.css

gradio_app/static/styles.css

@@ -19,61 +19,56 @@
     animation: fadeIn 0.8s ease-in-out;
     margin: 0 auto;
 }
-/* .intro-container {
-    max-width: 800px;
-    padding: 40px;
-    background: #ffffff;
-    border-radius: 15px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-    text-align: center;
-    animation: fadeIn 1s ease-in-out;
-} */
 h1 {
-    font-size: 2.5em;
-    color: #007bff;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    margin-bottom: 20px;
+    font-size: 2.2em;
+    color: #005566;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    margin-bottom: 15px;
 }
+
 h2 {
-    font-size: 2em;
-    color: #555555;
-    margin-bottom: 30px;
+    font-size: 1.6em;
+    color: #34495e;
+    font-weight: 500;
+    margin-bottom: 20px;
 }
 
 .intro-icon {
-    font-size: 1.2em;
+    font-size: 1.1em;
+    margin-right: 5px;
 }
 
 .intro-highlight {
-    font-size: 1.15em;
-    /* background-color: #e8f4f8; */
-    /* padding: 15px;
-    border-radius: 8px;
-    margin-bottom: 20px;
-    border-left: 4px solid #3498db; */
+    font-size: 1.1em;
+    background-color: rgba(230, 243, 255, 0.9);
+    padding: 12px;
+    border-radius: 6px;
+    margin-bottom: 15px;
+    border-left: 4px solid #1e90ff;
 }
 
 .intro-disclaimer {
-    font-size: 1.15em;
-    background-color: #fff3cd;
-    padding: 15px;
-    border-radius: 8px;
-    margin-bottom: 20px;
-    border-left: 4px solid #f1c40f;
+    font-size: 1em;
+    background-color: rgba(255, 248, 225, 0.9);
+    padding: 12px;
+    border-radius: 6px;
+    margin-bottom: 15px;
+    border-left: 4px solid #ffb300;
 }
 
 .intro-purpose {
-    color: #7f8c8d;
+    color: #5d6d7e;
 }
 
 .intro-alert {
-    color: #c0392b;
-    font-size: 1.3em;
+    color: #d32f2f;
+    font-size: 1.2em;
+    font-weight: 600;
 }
 
 @keyframes fadeIn {
-    0% { opacity: 0; transform: translateY(-20px); }
+    0% { opacity: 0; transform: translateY(-15px); }
     100% { opacity: 1; transform: translateY(0); }
 }