Styling

app.py

@@ -84,7 +84,9 @@ with demo:
     </div>
     """)
     # gr.HTML(TITLE)
-    gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
+    with gr.Box(elem_classes="intro-block"):
+        gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
+    # gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
 
     with gr.Tabs(elem_classes="tab-buttons") as tabs:
         with gr.TabItem("Base Benchmark", elem_id="llm-benchmark-tab-table", id=0):

src/display/css_html_js.py

@@ -95,14 +95,8 @@ custom_css = """
     border: 0
 }
 
-@font-face {
-    font-family: 'Karbon';
-    font-weight: 400;
-    font-style: normal;
-}
-
 body, .gradio-container {
-    font-family: 'Karbon', sans-serif;
+    font-family: Roboto, sans-serif;
     background-color: #ffffff;
     color: #000000; /* main text color */
     margin: 0;
@@ -115,36 +109,6 @@ h1, h2, h3, h4, h5, h6 {
     margin-bottom: 1rem;
 }
 
-.tab-buttons > .tabitem {
-    background-color: transparent;
-    border: 2px solid #eb088a;
-    color: #eb088a;
-    margin-right: 5px;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-}
-.tab-buttons > .tabitem:hover {
-    background-color: #eb088a;
-    color: #ffffff;
-}
-
-.markdown-text {
-    line-height: 1.6;
-    margin-bottom: 2rem;
-}
-
-/* Dataframe styling example */
-.gr-dataframe table {
-    border: 1px solid #eb088a;
-}
-.gr-dataframe th {
-    background-color: #eb088a;
-    color: #ffffff;
-}
-.gr-dataframe td {
-    border-bottom: 1px solid #eb088a;
-}
-
 /* Example ‘intro-block’ styling if you want extra flair */
 .intro-block {
     background-color: #eb088a10; /* light tinted background */