Update app.py

app.py

@@ -609,40 +609,40 @@ THEME = gr.themes.Base(
     font=[gr.themes.GoogleFont("Instrument Sans"), "ui-sans-serif", "sans-serif"],
     font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "ui-monospace", "monospace"],
 ).set(
-    body_background_fill="#0E0E0D",
-    body_background_fill_dark="#0E0E0D",
-    body_text_color="#EDE8DC",
-    body_text_color_dark="#EDE8DC",
-    body_text_color_subdued="#8A857A",
-    body_text_color_subdued_dark="#8A857A",
-    background_fill_primary="#141413",
-    background_fill_primary_dark="#141413",
-    background_fill_secondary="#1B1A18",
-    background_fill_secondary_dark="#1B1A18",
-    block_background_fill="#141413",
-    block_background_fill_dark="#141413",
-    block_border_color="#2A2825",
-    block_border_color_dark="#2A2825",
+    body_background_fill="#EFE9DD",
+    body_background_fill_dark="#EFE9DD",
+    body_text_color="#1A1815",
+    body_text_color_dark="#1A1815",
+    body_text_color_subdued="#6E6A60",
+    body_text_color_subdued_dark="#6E6A60",
+    background_fill_primary="#FAF6EE",
+    background_fill_primary_dark="#FAF6EE",
+    background_fill_secondary="#F1EBDF",
+    background_fill_secondary_dark="#F1EBDF",
+    block_background_fill="#FAF6EE",
+    block_background_fill_dark="#FAF6EE",
+    block_border_color="#DAD3C4",
+    block_border_color_dark="#DAD3C4",
     block_border_width="1px",
-    block_label_text_color="#8A857A",
-    block_label_text_color_dark="#8A857A",
-    block_label_background_fill="#141413",
-    block_label_background_fill_dark="#141413",
-    block_title_text_color="#EDE8DC",
-    block_title_text_color_dark="#EDE8DC",
+    block_label_text_color="#6E6A60",
+    block_label_text_color_dark="#6E6A60",
+    block_label_background_fill="#FAF6EE",
+    block_label_background_fill_dark="#FAF6EE",
+    block_title_text_color="#1A1815",
+    block_title_text_color_dark="#1A1815",
     block_radius="3px",
-    input_background_fill="#1B1A18",
-    input_background_fill_dark="#1B1A18",
-    input_border_color="#2A2825",
-    input_border_color_dark="#2A2825",
+    input_background_fill="#FFFFFF",
+    input_background_fill_dark="#FFFFFF",
+    input_border_color="#DAD3C4",
+    input_border_color_dark="#DAD3C4",
     input_border_color_focus="#FF5128",
     input_border_color_focus_dark="#FF5128",
     button_primary_background_fill="#FF5128",
     button_primary_background_fill_dark="#FF5128",
-    button_primary_background_fill_hover="#FF6B47",
-    button_primary_background_fill_hover_dark="#FF6B47",
-    button_primary_text_color="#0E0E0D",
-    button_primary_text_color_dark="#0E0E0D",
+    button_primary_background_fill_hover="#E8431F",
+    button_primary_background_fill_hover_dark="#E8431F",
+    button_primary_text_color="#FFF7F0",
+    button_primary_text_color_dark="#FFF7F0",
     button_primary_border_color="#FF5128",
     button_primary_border_color_dark="#FF5128",
 )
@@ -651,15 +651,18 @@ CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;1,9..144,900&family=JetBrains+Mono:wght@400;600&display=swap');
 
 .gradio-container {
-    max-width: 1200px !important;
-    margin: 0 auto !important;
+    max-width: 100% !important;
+    width: 100% !important;
+    margin: 0 !important;
+    padding-left: clamp(16px, 4vw, 56px) !important;
+    padding-right: clamp(16px, 4vw, 56px) !important;
     background:
-        radial-gradient(1100px 520px at 88% -12%, rgba(255,81,40,0.12), transparent 60%),
-        radial-gradient(820px 460px at -8% 112%, rgba(255,81,40,0.07), transparent 55%) !important;
+        radial-gradient(1100px 520px at 92% -12%, rgba(255,81,40,0.10), transparent 60%),
+        radial-gradient(820px 460px at -8% 112%, rgba(255,81,40,0.05), transparent 55%) !important;
 }
 
 /* Hero */
-#hero { padding: 22px 4px 26px; border-bottom: 1px solid #2A2825; margin-bottom: 26px; }
+#hero { padding: 22px 0 26px; border-bottom: 1px solid #DAD3C4; margin-bottom: 26px; }
 #hero .kicker {
     font-family: 'JetBrains Mono', monospace;
     text-transform: uppercase; letter-spacing: 0.34em;
@@ -667,29 +670,29 @@ CSS = """
 }
 #hero h1 {
     font-family: 'Fraunces', Georgia, serif;
-    font-weight: 900; font-size: clamp(56px, 11vw, 132px);
-    line-height: 0.84; letter-spacing: -0.035em; margin: 0; color: #EDE8DC;
+    font-weight: 900; font-size: clamp(56px, 11vw, 140px);
+    line-height: 0.84; letter-spacing: -0.035em; margin: 0; color: #1A1815;
 }
 #hero h1 em { font-style: italic; color: #FF5128; }
 #hero .tag {
     font-family: 'JetBrains Mono', monospace;
     font-size: 12px; line-height: 1.7; letter-spacing: 0.02em;
-    color: #8A857A; margin-top: 18px; max-width: 620px;
+    color: #6E6A60; margin-top: 18px; max-width: 680px;
 }
-#hero .tag b { color: #EDE8DC; font-weight: 600; }
+#hero .tag b { color: #1A1815; font-weight: 600; }
 
 /* Section eyebrow labels */
 .eyebrow {
     font-family: 'JetBrains Mono', monospace !important;
     text-transform: uppercase; letter-spacing: 0.22em;
-    font-size: 10px !important; color: #6E6A60 !important; margin: 4px 0 2px !important;
+    font-size: 10px !important; color: #9A9486 !important; margin: 4px 0 2px !important;
 }
 
 /* Component labels in mono */
 .gradio-container label span,
 .gradio-container .gr-check-radio label span {
     font-family: 'JetBrains Mono', monospace !important;
-    letter-spacing: 0.06em; font-size: 11px !important; color: #8A857A !important;
+    letter-spacing: 0.06em; font-size: 11px !important; color: #6E6A60 !important;
 }
 
 /* Primary CTA */
@@ -701,7 +704,7 @@ CSS = """
     font-size: 13px !important;
     border-radius: 3px !important;
     min-height: 52px !important;
-    box-shadow: 0 0 0 1px rgba(255,81,40,0.4), 0 12px 30px -12px rgba(255,81,40,0.6) !important;
+    box-shadow: 0 10px 26px -12px rgba(255,81,40,0.7) !important;
     transition: transform .12s ease, box-shadow .2s ease !important;
 }
 .go-btn:hover { transform: translateY(-1px); }
@@ -710,13 +713,13 @@ CSS = """
 .status-line { min-height: 22px; }
 .status-line p {
     font-family: 'JetBrains Mono', monospace !important;
-    font-size: 13px !important; color: #EDE8DC !important; margin: 0 !important;
+    font-size: 13px !important; color: #1A1815 !important; margin: 0 !important;
 }
 .status-line code { color: #FF5128; background: transparent; }
 .status-line .dot {
     display: inline-block; width: 8px; height: 8px; border-radius: 50%;
     background: #FF5128; margin-right: 8px;
-    box-shadow: 0 0 10px rgba(255,81,40,0.9);
+    box-shadow: 0 0 10px rgba(255,81,40,0.6);
 }
 
 footer { display: none !important; }