Refine dark professional UI with stronger contrast and polished hero section

app.py

@@ -21,14 +21,14 @@ CUSTOM_CSS = """
 
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
-    background: radial-gradient(circle at top, #111827 0%, #0f172a 40%, #111827 100%);
+    background: radial-gradient(circle at top, #020611 0%, #08101f 32%, #0b1426 100%);
     color: #e2e8f0;
 }
 
 .gradio-container {
     max-width: 1340px;
     margin: 0 auto;
-    padding: 1.5rem 1rem 2rem;
+    padding: 2rem 1.25rem 2.5rem;
     color: #e2e8f0;
 }
 
@@ -43,12 +43,12 @@ body {
 }
 
 .hero-banner {
-    border-radius: 20px;
-    padding: 2.3rem;
-    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
-    color: #f8fafc;
-    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.32);
-    margin-bottom: 1.5rem;
+    border-radius: 28px;
+    padding: 2.75rem 2.5rem;
+    background: rgba(15, 23, 42, 0.96);
+    border: 1px solid rgba(148, 163, 184, 0.12);
+    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.42);
+    margin-bottom: 1.8rem;
 }
 
 .hero-banner h1,
@@ -59,49 +59,52 @@ body {
 
 .hero-banner h1 {
     margin: 0;
-    font-size: clamp(2rem, 2.5vw, 3.2rem);
-    line-height: 1.08;
+    font-size: clamp(2.8rem, 3vw, 4.2rem);
+    line-height: 1.02;
+    letter-spacing: -0.04em;
 }
 
 .hero-banner p {
     margin: 1rem 0 0;
     max-width: 760px;
-    color: rgba(248,250,252,0.9);
+    color: rgba(226, 232, 240, 0.88);
     font-size: 1.05rem;
     line-height: 1.75;
 }
 
 .hero-pill {
     display: inline-flex;
+    align-items: center;
     padding: 0.55rem 0.95rem;
     border-radius: 999px;
-    background: rgba(255,255,255,0.12);
-    border: 1px solid rgba(255,255,255,0.12);
-    font-size: 0.95rem;
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    color: rgba(226, 232, 240, 0.85);
+    font-size: 0.92rem;
     font-weight: 600;
     margin-top: 1rem;
 }
 
 .panel-card,
 .dashboard-card {
-    border-radius: 18px;
-    background: rgba(15, 23, 42, 0.92);
-    border: 1px solid rgba(148,163,184,0.12);
-    box-shadow: 0 20px 45px rgba(15,23,42,0.25);
-    padding: 1.75rem;
+    border-radius: 22px;
+    background: rgba(15, 23, 42, 0.9);
+    border: 1px solid rgba(148, 163, 184, 0.14);
+    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.26);
+    padding: 2rem;
     color: #e2e8f0;
 }
 
 .panel-card {
-    margin-bottom: 1.25rem;
+    margin-bottom: 1.5rem;
 }
 
 .panel-card h3,
 .dashboard-card h3 {
     margin-top: 0;
-    font-size: 1.28rem;
+    font-size: 1.45rem;
     letter-spacing: -0.02em;
-    color: #111827 !important;
+    color: #f8fafc !important;
 }
 
 .panel-card p,
@@ -110,16 +113,16 @@ body {
 .dashboard-card li,
 .gradio-container .gr-markdown,
 .gradio-container .gr-html {
-    color: #1f2937 !important;
-    line-height: 1.7;
+    color: #cbd5e1 !important;
+    line-height: 1.75;
 }
 
 .status-success,
 .status-warning,
 .status-error {
-    border-left: 5px solid transparent !important;
-    background: rgba(15, 23, 42, 0.94) !important;
-    border: 1px solid rgba(148,163,184,0.10) !important;
+    border-left: 4px solid transparent !important;
+    background: rgba(15, 23, 42, 0.92) !important;
+    border: 1px solid rgba(148, 163, 184, 0.12) !important;
 }
 
 .status-success {
@@ -153,7 +156,7 @@ body {
 .metric-val {
     font-family: 'JetBrains Mono', monospace;
     font-weight: 700;
-    font-size: 1.3rem;
+    font-size: 1.35rem;
     color: #e2e8f0;
     letter-spacing: 0.02em;
 }
@@ -168,13 +171,20 @@ body {
 }
 
 .gradio-container .gr-button.primary {
-    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
+    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
     color: #ffffff !important;
-    box-shadow: 0 18px 40px rgba(67,56,202,0.22) !important;
+    box-shadow: 0 18px 40px rgba(67, 56, 202, 0.28) !important;
+    border: none !important;
 }
 
 .gradio-container .gr-button.primary:hover {
-    background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%) !important;
+    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
+}
+
+.gradio-container .gr-button.secondary {
+    background: rgba(255, 255, 255, 0.06) !important;
+    border: 1px solid rgba(255, 255, 255, 0.12) !important;
+    color: #e2e8f0 !important;
 }
 
 .gradio-container input[type="text"],
@@ -185,10 +195,10 @@ body {
 .gradio-container .gr-radio,
 .gradio-container .gr-checkbox {
     border-radius: 18px !important;
-    border: 1px solid rgba(148,163,184,0.25) !important;
-    box-shadow: inset 0 1px 2px rgba(15,23,42,0.12) !important;
+    border: 1px solid rgba(148, 163, 184, 0.22) !important;
+    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.05) !important;
     color: #e2e8f0 !important;
-    background: rgba(15,23,42,0.9) !important;
+    background: rgba(15, 23, 42, 0.95) !important;
 }
 
 .gradio-container label,
@@ -201,12 +211,17 @@ body {
     margin-top: 1rem !important;
 }
 
-.gradio-container .gr-block {
-    gap: 1.25rem !important;
+.gradio-container .gr-tabs .gr-tab {
+    background: transparent !important;
 }
 
-.gradio-container .gr-button.secondary {
-    color: #e2e8f0 !important;
+.gradio-container .gr-tabs .gr-tab--selected {
+    background: rgba(255, 255, 255, 0.06) !important;
+    border-bottom: 2px solid #6366f1 !important;
+}
+
+.gradio-container .gr-block {
+    gap: 1.5rem !important;
 }
 """
 
@@ -427,14 +442,14 @@ with gr.Blocks(theme=gr.themes.Default(primary_hue="indigo", font=[gr.themes.Goo
     gr.HTML("""
     <div class='hero-banner'>
         <div style='max-width: 980px;'>
-            <div style='margin-bottom: 0.8rem; color: rgba(248,250,252,0.88); font-size: 0.95rem; font-weight: 600;'>Architecture profiling for modular model deployments</div>
+            <div style='margin-bottom: 0.8rem; color: rgba(248,250,252,0.78); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;'>Architecture profiling for modular deployment</div>
             <h1>Modular Model Composition Explorer</h1>
-            <p>Compare base model architectures and adapters, identify compatibility gaps, and evaluate memory requirements with a clean, professional interface.</p>
-            <div style='display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; color: rgba(248,250,252,0.85); font-size: 0.94rem;'>
-                <span>HF Hub compatible</span>
-                <span>PEFT-aware analysis</span>
-                <span>Memory planning</span>
-                <span>Deployment-ready metrics</span>
+            <p>Analyze base model and adapter compatibility, surface structural mismatches, and predict memory requirements with a premium dark interface.</p>
+            <div style='display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem;'>
+                <span class='hero-pill'>HF Hub compatibility</span>
+                <span class='hero-pill'>PEFT-compatible audit</span>
+                <span class='hero-pill'>Resource planning</span>
+                <span class='hero-pill'>Deployment insights</span>
             </div>
         </div>
     </div>