Fix CSS inside st.markdown; enforce dark selects; single 240px hero

app/ui_streamlit.py

@@ -9,13 +9,16 @@ from app.search import search
 # ── Streamlit config ──────────────────────────────────────────────────────────
 st.set_page_config(page_title="Grants Discovery App By Lupo", page_icon="🧭", layout="wide")
 
-# ── Dark original stylesheet with orange accents ──────────────────────────────
-st.markdown("""
+# ── Theme & CSS (BLACK + ORANGE, dark selects) ────────────────────────────────
 st.markdown("""
 <style>
-/* ===== App base (black + orange) ===== */
+/* App base */
 .stApp { background-color: #000000; color: #f8fafc; }
+
+/* Text defaults */
 html, body, [class*="css"], h1, h2, h3, h4, h5, h6, p, span, div { color: #f8fafc !important; }
+
+/* Accents */
 a, .stRadio > label, .stSlider label { color: #f97316 !important; }
 
 /* Buttons */
@@ -25,11 +28,12 @@ a, .stRadio > label, .stSlider label { color: #f97316 !important; }
 }
 .stButton>button:hover { filter:brightness(1.1); }
 
-/* ===== Inputs: force dark for text, select, multiselect ===== */
 /* Text input */
-.stTextInput input { background:#111827 !important; color:#f8fafc !important; border:1px solid #334155 !important; }
+.stTextInput input {
+  background:#111827 !important; color:#f8fafc !important; border:1px solid #334155 !important;
+}
 
-/* Closed control (the box you click) */
+/* Closed control (select/multiselect) */
 .stSelectbox div[data-baseweb="select"],
 .stMultiSelect div[data-baseweb="select"],
 .stSelectbox div[role="combobox"],
@@ -40,57 +44,38 @@ a, .stRadio > label, .stSlider label { color: #f97316 !important; }
   border-radius:8px !important;
 }
 
-/* Text & caret icons inside the control */
+/* Text & icons inside control */
 .stSelectbox div[data-baseweb="select"] div,
 .stMultiSelect div[data-baseweb="select"] div,
 .stSelectbox div[data-baseweb="select"] input,
 .stMultiSelect div[data-baseweb="select"] input,
-.stSelectbox svg, .stMultiSelect svg {
-  color:#f8fafc !important; fill:#f8fafc !important;
-}
+.stSelectbox svg, .stMultiSelect svg { color:#f8fafc !important; fill:#f8fafc !important; }
 
 /* Placeholder */
 .stSelectbox div[data-baseweb="select"] input::placeholder,
-.stMultiSelect div[data-baseweb="select"] input::placeholder {
-  color:#94a3b8 !important;
-}
+.stMultiSelect div[data-baseweb="select"] input::placeholder { color:#94a3b8 !important; }
 
 /* Selected chips (multiselect) */
-.stMultiSelect [data-baseweb="tag"] {
-  background-color:#334155 !important; color:#e2e8f0 !important; border-radius:999px !important;
-}
+.stMultiSelect [data-baseweb="tag"] { background-color:#334155 !important; color:#e2e8f0 !important; border-radius:999px !important; }
 
-/* Open dropdown menu panel */
+/* Open dropdown menu */
 div[data-baseweb="menu"] {
-  background-color:#0b1220 !important;
-  color:#f8fafc !important;
-  border:1px solid #334155 !important;
-  border-radius:10px !important;
+  background-color:#0b1220 !important; color:#f8fafc !important;
+  border:1px solid #334155 !important; border-radius:10px !important;
 }
+div[data-baseweb="menu"] [role="option"] { background:transparent !important; color:#f8fafc !important; }
+div[data-baseweb="menu"] [role="option"]:hover { background:#1f2937 !important; }
+div[data-baseweb="menu"] [role="option"][aria-selected="true"] { background:#334155 !important; color:#f8fafc !important; }
 
-/* Menu options */
-div[data-baseweb="menu"] [role="option"] {
-  background:transparent !important; color:#f8fafc !important;
-}
-div[data-baseweb="menu"] [role="option"]:hover {
-  background:#1f2937 !important;
-}
-div[data-baseweb="menu"] [role="option"][aria-selected="true"] {
-  background:#334155 !important; color:#f8fafc !important;
-}
-
-/* ===== Result cards ===== */
+/* Result cards */
 .result-card {
   border:1px solid #1e293b; background:#1e293b; border-radius:14px;
   padding:16px; margin:10px 0; box-shadow:0 1px 2px rgba(0,0,0,0.2);
 }
 .result-meta { font-size:13px; color:#94a3b8; margin-top:6px; }
-span.chip {
-  display:inline-block; padding:3px 8px; border-radius:999px;
-  background:#334155; margin-right:6px; font-size:12px; color:#e2e8f0;
-}
+span.chip { display:inline-block; padding:3px 8px; border-radius:999px; background:#334155; margin-right:6px; font-size:12px; color:#e2e8f0; }
 
-/* ===== Compact hero (single, 240px) ===== */
+/* Compact hero (single, 240px) */
 .hero {
   height: 240px;
   border-radius: 16px;
@@ -100,17 +85,13 @@ span.chip {
     url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1280&q=80')
     center/cover no-repeat;
 }
-.hero-text {
-  height:100%; display:flex; flex-direction:column;
-  align-items:center; justify-content:center; text-align:center; color:#fff;
-}
+.hero-text { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; }
 .hero-text h1 { margin:0; font-size:28px; font-weight:700; color:#f97316; }
 .hero-text p  { margin:6px 0 0; font-size:15px; color:#fcd34d; } /* gold */
 </style>
 """, unsafe_allow_html=True)
 
-
-# ── Hero block (single!) ──────────────────────────────────────────────────────
+# ── Hero block (single) ───────────────────────────────────────────────────────
 st.markdown("""
 <div class="hero">
   <div class="hero-text">
@@ -124,7 +105,6 @@ st.markdown("""
 SHOW_DEV = os.environ.get("SHOW_DEV") == "1"
 
 
-
 # ── Environment + index ───────────────────────────────────────────────────────
 _env = get_env()
 ensure_index_exists(_env)