Update app.py

app.py

@@ -23,7 +23,7 @@ THEME: Dict[str, Any] = {
         "tagline_font": 15,      # px
         "bg1": "#1565C0",        # strip gradient start
         "bg2": "#1565C0",        # strip gradient end
-        "text": "#FFFFFF",       # gold text in pill
+        "text": "#FFFFFF",
         "tagline_color": "#000000",
     },
     "page": {
@@ -47,8 +47,8 @@ THEME: Dict[str, Any] = {
         "pad_h": 20,             # px
         "border": "#0B1220",     # dark outline
         "border_hover": "#1E293B",
-        "bg_top":  "#1565C0",    # top colour of default card gradient
-        "bg_bot":  "#1565C0",    # bottom colour of default card gradient
+        "bg_top":  "#1565C0",    # default gradient (overridden per-card below)
+        "bg_bot":  "#1565C0",
         "title_color": "#0B1220",
         "blurb_color": "#566275",
     },
@@ -70,21 +70,16 @@ THEME: Dict[str, Any] = {
 }
 
 # ========= CARDS (content + per-card overrides) =========
+# Only changed: stronger tints (0.25 / 0.15) so the bg color is clearly visible
 CARDS = [
     {
         "title": "ST_Log_GR",
         "blurb": "Real-time gamma-ray log prediction.",
         "url":   "https://smart-thinking-gr.hf.space/",
         "icon":  ASSETS / "GR_logo.png",
-        # Optional per-card overrides:
         "style": {
-            "bg_top":  "rgba(14,116,144,0.05)",
-            "bg_bot":  "rgba(14,116,144,0.02)",
-            # "border":  "#0B1220",
-            # "title_color": "#0B1220",
-            # "blurb_color": "#566275",
-            # "width": 360, "radius": 24, "pad_v": 26, "pad_h": 22,
-            # "btn_bg1": "#0B1220", "btn_bg2": "#1F2937", "btn_text": "#FFFFFF",
+            "bg_top":  "rgba(14,116,144,0.25)",
+            "bg_bot":  "rgba(14,116,144,0.15)",
         },
     },
     {
@@ -93,8 +88,8 @@ CARDS = [
         "url":   "https://smart-thinking-sonic-ts.hf.space",
         "icon":  ASSETS / "Ts_logo.png",
         "style": {
-            "bg_top":  "rgba(2,132,199,0.05)",
-            "bg_bot":  "rgba(2,132,199,0.02)",
+            "bg_top":  "rgba(2,132,199,0.25)",
+            "bg_bot":  "rgba(2,132,199,0.15)",
         },
     },
     {
@@ -103,8 +98,8 @@ CARDS = [
         "url":   "https://smart-thinking-sonic-tc.hf.space",
         "icon":  ASSETS / "Tc_logo.png",
         "style": {
-            "bg_top":  "rgba(99,102,241,0.05)",
-            "bg_bot":  "rgba(99,102,241,0.02)",
+            "bg_top":  "rgba(99,102,241,0.25)",
+            "bg_bot":  "rgba(99,102,241,0.15)",
         },
     },
 ]
@@ -127,13 +122,6 @@ def img_tag(path: Path, alt: str, cls: str = "", style: str = "") -> str:
     style_attr = f' style="{style}"' if style else ""
     return f'<img{cls_attr}{style_attr} src="{uri}" alt="{escape(alt)}" />'
 
-def get_style(card_style: Dict[str, Any], key: str, fallback_key: str = None):
-    if key in card_style:
-        return card_style[key]
-    if fallback_key:
-        return THEME["card"][fallback_key]
-    return None
-
 # ========= CSS (driven from THEME) =========
 strip = THEME["strip"]; page = THEME["page"]; hero = THEME["hero"]
 grid  = THEME["grid"];  card = THEME["card"];  icon = THEME["icon"]; button = THEME["button"]
@@ -172,10 +160,6 @@ st.markdown(f"""
     --icon-d: {icon["diam"]}px;
     --icon-img: {icon["img"]}px;
 
-    --title-fs: 25px;
-    --blurb-fs: 16px;
-    --btn-fs: {button["pad_v"] + 4}px; /* just a simple mapping; override below if desired */
-
     --stripBg1: {strip["bg1"]};
     --stripBg2: {strip["bg2"]};
     --stripText: {strip["text"]};
@@ -247,7 +231,7 @@ st.markdown(f"""
     .grid {{ grid-template-columns: 1fr; }}
   }}
 
-  /* ===== CARD (uses per-card CSS vars) ===== */
+  /* ===== CARD ===== */
   .card {{
     position: relative;
     width: var(--c-w, var(--card-w));
@@ -255,10 +239,11 @@ st.markdown(f"""
     padding: var(--c-pv, var(--card-pv)) var(--c-ph, var(--card-ph));
     background: linear-gradient(180deg, var(--c-bg-top, {card["bg_top"]}) 0%, var(--c-bg-bot, {card["bg_bot"]}) 100%);
     border: var(--c-bw, var(--card-bw)) solid var(--c-border, var(--cardStroke));
+    /* SOFTER inner highlights so color shows more */
     box-shadow:
       0 14px 32px rgba(2,20,35,.12),
-      0 1px 0 rgba(255,255,255,0.90) inset,
-      0 -1px 10px rgba(255,255,255,0.40) inset;
+      0 1px 0 rgba(255,255,255,0.70) inset,
+      0 -1px 6px rgba(255,255,255,0.18) inset;
     transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
     text-align:center; display:flex; flex-direction:column; gap:16px; align-items: center;
   }}
@@ -267,8 +252,8 @@ st.markdown(f"""
     border-color: var(--cardStrokeHover);
     box-shadow:
       0 22px 56px rgba(2,20,35,.18),
-      0 1px 0 rgba(255,255,255,0.92) inset,
-      0 -1px 12px rgba(255,255,255,0.45) inset;
+      0 1px 0 rgba(255,255,255,0.82) inset,
+      0 -1px 10px rgba(255,255,255,0.28) inset;
     filter: saturate(1.03);
   }}
 
@@ -285,27 +270,26 @@ st.markdown(f"""
   }}
 
   .card h3 {{
-    margin: 0; font-size: var(--c-title-fs, 25px); font-weight: 900;
-    color: var(--c-title-color, {card["title_color"]}); letter-spacing: .15px;
+    margin: 0; font-size: 25px; font-weight: 900;
+    color: {card["title_color"]}; letter-spacing: .15px;
   }}
   .card p {{
-    color: var(--c-blurb-color, {card["blurb_color"]}); min-height: 40px; margin: 0 10px;
-    font-size: var(--c-blurb-fs, 16px);
+    color: {card["blurb_color"]}; min-height: 40px; margin: 0 10px; font-size: 16px;
   }}
 
   .btn {{
-    display:inline-block; padding: var(--c-btn-pv, {button["pad_v"]}px) var(--c-btn-ph, {button["pad_h"]}px);
-    border-radius: var(--c-btn-r, {button["radius"]}px);
-    border: 1px solid var(--c-btn-border, {button["border"]});
-    background: linear-gradient(180deg, var(--c-btn-bg1, {button["bg1"]}) 0%, var(--c-btn-bg2, {button["bg2"]}) 100%);
-    font-weight: 800; letter-spacing:.3px; font-size: var(--c-btn-fs, 16px);
+    display:inline-block; padding: {button["pad_v"]}px {button["pad_h"]}px;
+    border-radius: {button["radius"]}px;
+    border: 1px solid {button["border"]};
+    background: linear-gradient(180deg, {button["bg1"]} 0%, {button["bg2"]} 100%);
+    font-weight: 800; letter-spacing:.3px; font-size: 16px;
     margin: 6px auto 0;
     box-shadow: 0 12px 28px rgba(11,18,32,.28), inset 0 1px 0 rgba(255,255,255,.10);
-    color: var(--c-btn-text, {button["text"]});
+    color: {button["text"]};
     text-decoration: none;
   }}
   a.btn, a.btn:link, a.btn:visited, a.btn:hover, a.btn:active, a.btn:focus {{
-    color: var(--c-btn-text, {button["text"]}) !important; text-decoration: none !important;
+    color: {button["text"]} !important; text-decoration: none !important;
   }}
   .btn:hover {{
     filter: brightness(1.03) saturate(1.04);
@@ -330,41 +314,52 @@ st.markdown(
 )
 
 # ========= Hero =========
-hero_html = img_tag(hero["logo"], "ST_LOG SUITE")
+def data_uri(path: Path) -> Optional[str]:
+    if not path or not path.exists():
+        return None
+    mime, _ = mimetypes.guess_type(path.name)
+    if not mime:
+        mime = "image/png"
+    b64 = base64.b64encode(path.read_bytes()).decode("utf-8")
+    return f"data:{mime};base64,{b64}"
+
+def img_tag(path: Path, alt: str, cls: str = "", style: str = "") -> str:
+    uri = data_uri(path)
+    if not uri:
+        return ""
+    cls_attr = f' class="{cls}"' if cls else ""
+    style_attr = f' style="{style}"' if style else ""
+    return f'<img{cls_attr}{style_attr} src="{uri}" alt="{escape(alt)}" />'
+
+hero_html = img_tag(THEME["hero"]["logo"], "ST_LOG SUITE")
 st.markdown(f"<div class='hero'>{hero_html}</div>", unsafe_allow_html=True)
 
 # ========= Cards =========
 def build_card_vars(style: Dict[str, Any]) -> str:
-    """Turn the per-card style dict into CSS variables for inline override."""
     s = []
-    if "width"       in style: s.append(f"--c-w:{int(style['width'])}px")
-    if "radius"      in style: s.append(f"--c-radius:{int(style['radius'])}px")
-    if "pad_v"       in style: s.append(f"--c-pv:{int(style['pad_v'])}px")
-    if "pad_h"       in style: s.append(f"--c-ph:{int(style['pad_h'])}px")
-
-    if "bg_top"      in style: s.append(f"--c-bg-top:{style['bg_top']}")
-    if "bg_bot"      in style: s.append(f"--c-bg-bot:{style['bg_bot']}")
-    if "border"      in style: s.append(f"--c-border:{style['border']}")
+    if "width"        in style: s.append(f"--c-w:{int(style['width'])}px")
+    if "radius"       in style: s.append(f"--c-radius:{int(style['radius'])}px")
+    if "pad_v"        in style: s.append(f"--c-pv:{int(style['pad_v'])}px")
+    if "pad_h"        in style: s.append(f"--c-ph:{int(style['pad_h'])}px")
+    if "bg_top"       in style: s.append(f"--c-bg-top:{style['bg_top']}")
+    if "bg_bot"       in style: s.append(f"--c-bg-bot:{style['bg_bot']}")
+    if "border"       in style: s.append(f"--c-border:{style['border']}")
     if "border_width" in style: s.append(f"--c-bw:{int(style['border_width'])}px")
-
-    if "title_color" in style: s.append(f"--c-title-color:{style['title_color']}")
-    if "title_fs"    in style: s.append(f"--c-title-fs:{int(style['title_fs'])}px")
-    if "blurb_color" in style: s.append(f"--c-blurb-color:{style['blurb_color']}")
-    if "blurb_fs"    in style: s.append(f"--c-blurb-fs:{int(style['blurb_fs'])}px")
-
-    if "btn_bg1"     in style: s.append(f"--c-btn-bg1:{style['btn_bg1']}")
-    if "btn_bg2"     in style: s.append(f"--c-btn-bg2:{style['btn_bg2']}")
-    if "btn_text"    in style: s.append(f"--c-btn-text:{style['btn_text']}")
-    if "btn_border"  in style: s.append(f"--c-btn-border:{style['btn_border']}")
-    if "btn_fs"      in style: s.append(f"--c-btn-fs:{int(style['btn_fs'])}px")
-    if "btn_pad_v"   in style: s.append(f"--c-btn-pv:{int(style['btn_pad_v'])}px")
-    if "btn_pad_h"   in style: s.append(f"--c-btn-ph:{int(style['btn_pad_h'])}px")
-
-    if "icon_diam"   in style: s.append(f"--c-icon-d:{int(style['icon_diam'])}px")
-    if "icon_img"    in style: s.append(f"--c-icon-img:{int(style['icon_img'])}px")
-    if "icon_bg"     in style: s.append(f"--c-icon-bg:{style['icon_bg']}")
-    if "icon_border" in style: s.append(f"--c-icon-border:{style['icon_border']}")
-
+    if "title_color"  in style: s.append(f"--c-title-color:{style['title_color']}")
+    if "title_fs"     in style: s.append(f"--c-title-fs:{int(style['title_fs'])}px")
+    if "blurb_color"  in style: s.append(f"--c-blurb-color:{style['blurb_color']}")
+    if "blurb_fs"     in style: s.append(f"--c-blurb-fs:{int(style['blurb_fs'])}px")
+    if "btn_bg1"      in style: s.append(f"--c-btn-bg1:{style['btn_bg1']}")
+    if "btn_bg2"      in style: s.append(f"--c-btn-bg2:{style['btn_bg2']}")
+    if "btn_text"     in style: s.append(f"--c-btn-text:{style['btn_text']}")
+    if "btn_border"   in style: s.append(f"--c-btn-border:{style['btn_border']}")
+    if "btn_fs"       in style: s.append(f"--c-btn-fs:{int(style['btn_fs'])}px")
+    if "btn_pad_v"    in style: s.append(f"--c-btn-pv:{int(style['btn_pad_v'])}px")
+    if "btn_pad_h"    in style: s.append(f"--c-btn-ph:{int(style['btn_pad_h'])}px")
+    if "icon_diam"    in style: s.append(f"--c-icon-d:{int(style['icon_diam'])}px")
+    if "icon_img"     in style: s.append(f"--c-icon-img:{int(style['icon_img'])}px")
+    if "icon_bg"      in style: s.append(f"--c-icon-bg:{style['icon_bg']}")
+    if "icon_border"  in style: s.append(f"--c-icon-border:{style['icon_border']}")
     return "; ".join(s)
 
 def app_card(card_cfg: Dict[str, Any]) -> str: