Update app.py

app.py

@@ -225,7 +225,7 @@ body {
 
 .gradio-container {
     /* Apply the semi-transparent black overlay from your inner div */
-    background-color: rgba(0, 0, 0, 0.55) !important; /* Equivalent to bg-black/55 */
+    background-color: rgba(0, 0, 0, 0.60) !important; /* Equivalent to bg-black/55 */
     
     /* Ensure the container stretches to fill the screen height, accounting for its own padding/margin */
     min-height: calc(100vh - 4rem); /* Adjust 4rem if your top/bottom margin (2rem each) changes */
@@ -233,14 +233,46 @@ body {
     flex-direction: column; /* Stacks content vertically within the container */
 }
 
+.header-container {
+    width: 100%;
+    height: 140px;
+    position: relative;
+    display: flex; /* For centering the h1 */
+    flex-direction: column; /* For vertical alignment */
+    justify-content: center; /* Centers the h1 vertically */
+    align-items: center; /* Centers the h1 horizontally */
+    padding: 0 1rem; /* Padding for text inside, equivalent to p-4 for text content */
+    overflow: hidden;
+    border-bottom-left-radius: 1rem; /* Equivalent to rounded-b-2xl */
+    border-bottom-right-radius: 1rem; /* Equivalent to rounded-b-2xl */
+    background: linear-gradient(to bottom, rgba(30,18,51,0.9) 0%, rgba(30,18,51,0.7) 60%, rgba(0,0,0,0) 100%);
+    box-sizing: border-box; /* Include padding in the element's total width/height */
+
+    /* To make it span full width including gradio-container's padding */
+    margin-top: -2rem !important;    /* Compensate for gradio-container's top padding */
+    margin-left: -2rem !important;   /* Compensate for gradio-container's left padding */
+    margin-right: -2rem !important;  /* Compensate for gradio-container's right padding */
+    width: calc(100% + 4rem) !important; /* Adjust width to cover padding (2rem left + 2rem right) */
+}
+
 label, .gr-checkbox-label span { /* Target labels and checkbox labels */
     color: #E8E8E8 !important; /* Slightly brighter light gray for labels */
     font-weight: bold !important;
 }
-h1 {
-    color: #FFFFFF !important;
-    text-align: center !important;
+.header-container h1 {
+    color: #E6E6FA !important; /* Equivalent to text-lavender-100 */
+    font-size: 2.5rem !important; /* Equivalent to text-3xl, but made a bit larger for a main heading */
+    font-weight: bold !important; /* Equivalent to font-bold */
+    letter-spacing: 0.05em !important; /* Equivalent to tracking-wide */
+    width: 100%; /* Equivalent to w-full */
+    text-align: center; /* Equivalent to text-center */
+    margin: 0 auto; /* Equivalent to mx-auto */
+    /* IMPORTANT: For 'Sprintura' font, you still need to host the font files and
+       add an @font-face rule to your CSS that points to their public URLs.
+       Otherwise, browsers will use a generic sans-serif font. */
+    font-family: 'Sprintura', sans-serif !important;
 }
+
 .prose { /* Markdown text */
     color: #F0F0F0 !important;
 }
@@ -277,7 +309,8 @@ exercise_choices = ["Hammer Curl", "Push Up", "Squat"]
 
 # Pass the theme and custom_css to gr.Blocks
 with gr.Blocks(theme=theme, css=custom_css) as iface:
-    gr.Markdown("# Live AI Trainer") # This will be styled by H1 in CSS
+    with gr.Box(elem_classes="header-container"):
+    gr.Markdown("# Live AI Trainer") # This will now be styled by .header-container and .header-container h1
     gr.Markdown("Select an exercise, set your targets, and get real-time feedback on your form and reps.") # Styled by .prose
 
     with gr.Row():