aesthetic updates

app.py

@@ -485,11 +485,11 @@ with demo:
     gr.HTML(TITLE)
     gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
 
-    with gr.Tabs():
+    with gr.Tabs(elem_id="main-tabs"):
         with gr.Tab("Getting Started"):
             gr.Markdown(GETTING_STARTED_TEXT, elem_classes="markdown-text")
 
-        with gr.Tab("Blue Team"):
+        with gr.Tab("Blue Team", elem_id="blue-tab"):
             with gr.Row(elem_classes="blue-team"):
                 with gr.Column(scale=1):
                     gr.Markdown(BLUE_SUBMISSION_TEXT, elem_classes="markdown-text")
@@ -530,7 +530,7 @@ with demo:
                     )
                     blue_refresh_button = gr.Button("Refresh Blue leaderboard", variant="secondary")
 
-        with gr.Tab("Red Team"):
+        with gr.Tab("Red Team", elem_id="red-tab"):
             with gr.Row(elem_classes="red-team"):
                 with gr.Column(scale=1):
                     gr.Markdown(RED_SUBMISSION_TEXT, elem_classes="markdown-text")

src/about.py

@@ -19,8 +19,8 @@ INTRODUCTION_TEXT = """
 
 The Re-Align Hackathon explores **representational alignment** across vision models.
 
-- **Blue Team** — Find 20 models with the most aligned representations (maximize CKA)
-- **Red Team** — Find 1000 stimuli that drive model representations apart (minimize CKA)
+- <span style="color: var(--blue-team); font-weight: 700;">Blue Team</span> — Find 20 models with the most aligned representations (maximize CKA)
+- <span style="color: var(--red-team); font-weight: 700;">Red Team</span> — Find 1000 stimuli that drive model representations apart (minimize CKA)
 
 Submissions are scored using [CKA (Centered Kernel Alignment)](https://arxiv.org/abs/1905.00414) computed on embeddings extracted from a fixed set of held-out images.
 """

src/display/css_html_js.py

@@ -1,5 +1,5 @@
 custom_css = """
-
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700;900&display=swap');
 @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap");
 
 /* Force dark theme everywhere */
@@ -101,6 +101,16 @@ body,
     border-bottom-color: var(--accent) !important;
 }
 
+#blue-tab-button {
+    color: #58a6ff !important;
+    font-weight: bold;
+}
+
+#red-tab-button {
+    color: #f85149 !important;
+    font-weight: bold;
+}
+
 /* Accordion */
 .gradio-container .accordion {
     background: var(--card-bg) !important;
@@ -158,6 +168,8 @@ body,
 }
 
 .hackathon-header h1 {
+    font-family: 'Lato', sans-serif;
+    font-weight: 900;
     font-size: 40px;
     letter-spacing: 0.02em;
     margin-bottom: 6px;