Redesign UI: courtroom palette, readable header, kill default purple

app.py

@@ -20,16 +20,90 @@ from witnessbox.engine import WitnessBoxEngine
 from witnessbox.witness import WITNESS_NAME, WITNESS_ROLE
 
 CSS = """
-.gradio-container {background: #efe7d3; font-family: 'Iowan Old Style','Palatino Linotype',Georgia,serif;}
-#wb-title {text-align:center; color:#3a2c18; letter-spacing:.5px;}
-#wb-title h1 {font-variant: small-caps; margin-bottom:0;}
-.wb-card {background:#f7f1e1; border:1px solid #c9b78d; border-radius:10px; padding:14px 16px; box-shadow:0 1px 0 #fff inset;}
-.wb-bar-track {background:#e2d7ba; border-radius:8px; height:18px; overflow:hidden; border:1px solid #c9b78d;}
+/* ===== WitnessBox — a courtroom palette: parchment · ink · oxblood · brass =====
+   Overrides Gradio's variables in BOTH light and dark mode so the look is
+   consistent and there's not a drop of the default indigo anywhere. */
+.gradio-container, .gradio-container.dark {
+  --wb-ink:#2b2014; --wb-ink-soft:#6d5a3a;
+  --wb-card:#f5edd9; --wb-card-2:#efe4cb;
+  --wb-border:#c7b083; --wb-border-2:#a98c58;
+  --wb-oxblood:#7c1f25; --wb-oxblood-hi:#94333a;
+  --wb-brass:#9c7a3c; --wb-walnut:#241a10;
+
+  --body-background-fill: radial-gradient(125% 95% at 50% -12%, #f1e7cf 0%, #e3d3ab 72%);
+  --body-text-color: var(--wb-ink);
+  --body-text-color-subdued: var(--wb-ink-soft);
+  --background-fill-primary: var(--wb-card);
+  --background-fill-secondary: var(--wb-card-2);
+  --block-background-fill: var(--wb-card);
+  --block-border-color: var(--wb-border);
+  --block-label-background-fill: var(--wb-oxblood);
+  --block-label-text-color: #f4e8c9;
+  --block-title-text-color: var(--wb-ink);
+  --block-info-text-color: var(--wb-ink-soft);
+  --border-color-primary: var(--wb-border);
+  --border-color-accent: var(--wb-brass);
+  --button-primary-background-fill: linear-gradient(180deg,#8e2731,#6f1b21);
+  --button-primary-background-fill-hover: linear-gradient(180deg,#9c333b,#7c1f25);
+  --button-primary-text-color:#f6ecd2;
+  --button-primary-border-color:#591319;
+  --button-secondary-background-fill: linear-gradient(180deg,#ecdcb4,#dcc798);
+  --button-secondary-background-fill-hover: linear-gradient(180deg,#f2e4c0,#e3d0a4);
+  --button-secondary-text-color: var(--wb-ink);
+  --button-secondary-border-color: var(--wb-border-2);
+  --input-background-fill:#fbf6e8;
+  --input-border-color: var(--wb-border);
+  --input-placeholder-color:#9a8763;
+  --color-accent: var(--wb-brass);
+  --color-accent-soft:#ecdfbc;
+  --link-text-color: var(--wb-oxblood);
+  --link-text-color-hover: var(--wb-oxblood-hi);
+  --block-shadow: 0 2px 7px rgba(60,40,15,.10);
+  --block-radius:12px;
+  font-family:'Iowan Old Style','Palatino Linotype','Palatino',Georgia,'Times New Roman',serif;
+}
+.gradio-container { background: var(--body-background-fill); }
+
+/* ---- header ---- */
+#wb-title {text-align:center; padding:14px 0 2px;}
+#wb-title .wb-crest {font-size:1.5rem; line-height:1; opacity:.85;}
+#wb-title h1 {color:var(--wb-ink)!important; font-variant:small-caps; letter-spacing:1.5px;
+  font-weight:700; font-size:2.7rem; margin:.05em 0 .04em; line-height:1.05;}
+#wb-title .wb-sub {color:var(--wb-ink-soft)!important; font-size:1.06rem; letter-spacing:.2px;}
+#wb-title .wb-sub b {color:var(--wb-oxblood); font-weight:700;}
+#wb-title .wb-rule {width:210px; height:2px; margin:11px auto 0;
+  background:linear-gradient(90deg,transparent,var(--wb-brass),transparent);}
+
+/* ---- small-caps block labels everywhere ---- */
+.gradio-container .block-label, .gradio-container label > span:first-child {
+  font-variant:small-caps; letter-spacing:.6px; font-weight:700;}
+
+/* ---- chatbot = a deposition transcript on aged paper ---- */
+#wb-chat {background:var(--wb-card)!important; border:1px solid var(--wb-border)!important;}
+#wb-chat *, #wb-chat .message, #wb-chat .prose {color:var(--wb-ink)!important;}
+#wb-chat .message {font-size:1.02rem!important; line-height:1.5!important; border-radius:10px!important;}
+#wb-chat .user, #wb-chat [data-role="user"] {background:#efe3c6!important; border:1px solid var(--wb-border)!important;}
+#wb-chat .bot, #wb-chat [data-role="assistant"] {background:#fbf6e8!important; border-left:3px solid var(--wb-oxblood)!important;}
+#wb-chat .placeholder, #wb-chat .placeholder * {color:var(--wb-ink-soft)!important; opacity:.7;}
+
+/* ---- banner ---- */
+.wb-banner {text-align:center; font-size:1.15rem; font-variant:small-caps; letter-spacing:.6px;
+  padding:12px; border-radius:10px; border:1px solid var(--wb-border);}
+
+/* ---- custom HTML panels (stance / counters) ---- */
+.wb-card {background:var(--wb-card); border:1px solid var(--wb-border); border-radius:10px; padding:13px 15px; box-shadow:0 1px 0 #fffdf6 inset;}
+.wb-bar-track {background:#e0d3af; border-radius:7px; height:16px; overflow:hidden; border:1px solid var(--wb-border);}
 .wb-bar-fill {height:100%; transition:width .4s ease;}
-.wb-disclaimer {font-size:11px; color:#7a6a45; font-style:italic;}
-.wb-tier {font-variant: small-caps; font-weight:700; color:#5a4220;}
-#wb-evidence textarea {font-family: ui-monospace,Menlo,Consolas,monospace; background:#1d1b14; color:#d8f0c0;}
-.wb-banner {text-align:center; font-size:20px; font-variant:small-caps; padding:8px; border-radius:8px;}
+.wb-disclaimer {font-size:11px; color:var(--wb-ink-soft); font-style:italic;}
+.wb-tier {font-variant:small-caps; font-weight:700; color:var(--wb-oxblood); letter-spacing:.5px;}
+
+/* ---- portrait framing ---- */
+#wb-portrait img {border:1px solid var(--wb-border-2); border-radius:10px;}
+
+/* ---- evidence: a walnut 'exhibit' readout ---- */
+#wb-evidence textarea {font-family:ui-monospace,Menlo,Consolas,monospace!important;
+  background:var(--wb-walnut)!important; color:#ecdfae!important;
+  border:1px solid var(--wb-brass)!important; border-radius:8px;}
 """
 
 
@@ -172,12 +246,21 @@ def on_ask(engine, mic, typed):
 # layout
 # --------------------------------------------------------------------------- #
 def build() -> gr.Blocks:
-    with gr.Blocks(css=CSS, title="WitnessBox", theme=gr.themes.Soft()) as demo:
+    theme = gr.themes.Soft(
+        primary_hue=gr.themes.colors.red,      # oxblood, refined to exact hues in CSS
+        secondary_hue=gr.themes.colors.amber,  # brass
+        neutral_hue=gr.themes.colors.stone,    # warm paper greys, never blue-greys
+    )
+    with gr.Blocks(css=CSS, title="WitnessBox", theme=theme) as demo:
         engine_state = gr.State(None)
         gr.HTML(
-            f"<div id='wb-title'><h1>⚖️ WitnessBox</h1>"
-            f"<div>Cross-examine {WITNESS_NAME} — {WITNESS_ROLE}. "
-            f"Your <b>voice</b> is the weapon.</div></div>"
+            "<div id='wb-title'>"
+            "<div class='wb-crest'>⚖️</div>"
+            "<h1>WitnessBox</h1>"
+            f"<div class='wb-sub'>Cross-examine <b>{WITNESS_NAME}</b>, {WITNESS_ROLE}. "
+            "Your <b>voice</b> is the weapon.</div>"
+            "<div class='wb-rule'></div>"
+            "</div>"
         )
         banner = gr.HTML(_banner("info", "Call the witness to the stand."))
 
@@ -186,12 +269,13 @@ def build() -> gr.Blocks:
                 _portrait = "assets/marcus_reid.png"
                 gr.Image(
                     value=_portrait if os.path.exists(_portrait) else None,
-                    show_label=False, height=260,
+                    show_label=False, height=300, elem_id="wb-portrait",
                     show_download_button=False, container=True,
                 )
                 stance_html = gr.HTML(label="Delivery")
             with gr.Column(scale=4):
-                chat = gr.Chatbot(type="messages", height=360, label="The Stand")
+                chat = gr.Chatbot(type="messages", height=420, label="The Stand",
+                                  elem_id="wb-chat")
                 witness_audio = gr.Audio(label="Witness", autoplay=True, interactive=False)
             with gr.Column(scale=2):
                 counters_html = gr.HTML()