Update app.py

app.py

@@ -238,59 +238,37 @@ def recommend(base_alcohol_text, flavor, top_k=3):
     return "\n\n---\n\n".join(blocks)
 
 # ========================
-# Background + UI (bulletproof)
+# Background + UI (robust)
 # ========================
 CUSTOM_CSS = f"""
 html, body, #root {{ height: 100%; margin: 0; padding: 0; }}
 
-/* Dedicated background layer behind everything (avoid iframe/body quirks) */
-#bg-layer {{
-  position: fixed;
-  inset: 0;
+/* Background image */
+body {{
   background-image: url('{BACKGROUND_IMAGE_URL}');
   background-size: cover;
   background-position: center;
-  background-repeat: no-repeat;
-  z-index: 0;
+  background-attachment: fixed;
 }}
 
-/* Optional overlay for readability (tune or set to transparent) */
-#bg-overlay {{
+/* Slightly lighter overlay so the image is visible */
+body::before {{
+  content: "";
   position: fixed;
   inset: 0;
-  background: rgba(0,0,0,0.20);
-  z-index: 1;
+  background: rgba(0,0,0,0.25);  /* was 0.45 */
+  z-index: 0;
 }}
 
-/* App above the layers, transparent so background shows */
+/* Make app transparent so image shows through */
 .gradio-container {{
   background: transparent !important;
   position: relative;
-  z-index: 2;
-  color: white;
-}}
-
-/* Nuke any default block/panel backgrounds */
-:root {{
-  --background-fill-primary: transparent !important;
-  --background-fill-secondary: transparent !important;
-  --block-background-fill: transparent !important;
-  --panel-background-fill: transparent !important;
-}}
-
-.gradio-container .prose,
-.gradio-container .block,
-.gradio-container .panel,
-.gradio-container .tabs,
-.gradio-container .tabitem,
-.gradio-container .form,
-.gradio-container .wrap,
-.gradio-container .container {{
-  background: transparent !important;
-  box-shadow: none !important;
-  color: white;
+  z-index: 1;
+  color: white;  /* default text white */
 }}
 
+/* Glass effect */
 .glass-card {{
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(6px);
@@ -298,21 +276,17 @@ html, body, #root {{ height: 100%; margin: 0; padding: 0; }}
   border-radius: 14px;
   padding: 18px;
   border: 1px solid rgba(255, 255, 255, 0.12);
-  color: white;
+  color: white; /* ensure text inside is white */
 }}
 
-/* Headings white */
-.gradio-container h1,
-.gradio-container h2,
-.gradio-container h3 {{
+/* Make markdown headings white */
+.gradio-container h1, .gradio-container h2, .gradio-container h3 {{
   color: white !important;
 }}
 """
 
-with gr.Blocks(css=CUSTOM_CSS) as demo:
-    # Add background layers BEFORE any components
-    gr.HTML("<div id='bg-layer'></div><div id='bg-overlay'></div>")
 
+with gr.Blocks(css=CUSTOM_CSS) as demo:
     with gr.Column(elem_classes=["glass-card"]):
         gr.Markdown("# 🍹 AI Bartender — Type a Base + Flavor")
         with gr.Row():