Update app.py

app.py

@@ -21,11 +21,11 @@ THEME: Dict[str, Any] = {
         "pill_pad_h": 14,        # px
         "pill_font": 16,         # px
         "tagline_font": 15,      # px
-        # Premium header palette
-        "bg1": "#0B1220",        # charcoal
-        "bg2": "#142136",        # deep navy
-        "text": "#E4B83A",       # gold text inside pill
-        "tagline_color": "#475569",
+        # Premium header palette — DARK GREEN with contrasting text
+        "bg1": "#064E3B",        # dark green
+        "bg2": "#065F46",        # deeper green
+        "text": "#FFFFFF",       # high-contrast pill text
+        "tagline_color": "#E2E8F0",  # soft-contrast tagline
     },
     "page": {
         "top_padding": 50,       # px top padding for page
@@ -56,7 +56,7 @@ THEME: Dict[str, Any] = {
     },
     "icon": {
         "diam": 118,             # px outer circle
-        "img":  106,             # px image
+        "img":  106,             # px image box (will be padded)
         "circle_bg": "#F1F5F9",
         "circle_border": "rgba(12,18,32,0.10)",
     },
@@ -73,7 +73,6 @@ THEME: Dict[str, Any] = {
 }
 
 # ========= CARDS (content + per-card overrides) =========
-# Solid, very-light tints for a premium feel (no washed-out rgba)
 CARDS = [
     {
         "title": " ST_GeoMEch_UCS",
@@ -81,7 +80,7 @@ CARDS = [
         "url":   "https://smart-thinking-ucs.hf.space/",
         "icon":  ASSETS / "UCS_logo.png",
         "style": {
-            "bg_top":  "#EAF7F1",   # minty light
+            "bg_top":  "#EAF7F1",
             "bg_bot":  "#F6FBF8",
             "border":  "#0F3D3E",
         },
@@ -92,7 +91,7 @@ CARDS = [
         "url":   "https://smart-thinking-ym.hf.space",
         "icon":  ASSETS / "Ym_logo.png",
         "style": {
-            "bg_top":  "#EAF7FD",   # airy cyan
+            "bg_top":  "#EAF7FD",
             "bg_bot":  "#F5FBFF",
             "border":  "#0E4A6E",
         },
@@ -103,7 +102,7 @@ CARDS = [
         "url":   "https://smart-thinking-smw.hf.space",
         "icon":  ASSETS / "SMW_logo.png",
         "style": {
-            "bg_top":  "#EEF0FF",   # soft indigo
+            "bg_top":  "#EEF0FF",
             "bg_bot":  "#F7F8FF",
             "border":  "#3E4EB8",
         },
@@ -245,7 +244,6 @@ 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 → color shows more, keeps 3D */
     box-shadow:
       0 14px 32px rgba(2,20,35,.12),
       0 1px 0 rgba(255,255,255,0.70) inset,
@@ -258,11 +256,12 @@ 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.82) inset,
-      0 -1px 10px rgba(255,255,255,0.28) inset;
+      0 1px 0 rgba(255,255,255,.82) inset,
+      0 -1px 10px rgba(255,255,255,.28) inset;
     filter: saturate(1.03);
   }}
 
+  /* ===== ICON / LOGO — self-contained, not trimmed ===== */
   .icon-wrap {{
     width: var(--c-icon-d, {icon["diam"]}px); height: var(--c-icon-d, {icon["diam"]}px);
     border-radius: 9999px; display:grid; place-items:center;
@@ -271,8 +270,16 @@ st.markdown(f"""
     box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 22px rgba(2,20,35,.07);
   }}
   .icon-wrap img {{
-    width: var(--c-icon-img, {icon["img"]}px); height: var(--c-icon-img, {icon["img"]}px);
-    border-radius:9999px; display:block;
+    /* Keep logos fully visible inside the circle */
+    width: calc(var(--c-icon-img, {icon["img"]}px) - 12px);
+    height: calc(var(--c-icon-img, {icon["img"]}px) - 12px);
+    padding: 6px;                         /* breathing room */
+    box-sizing: border-box;
+    object-fit: contain;                   /* never crop */
+    background: #FFFFFF;                   /* clean canvas for mixed logos */
+    border: 2px solid var(--c-border, var(--cardStroke)); /* same as card border */
+    border-radius: 14px;                   /* rounded square inside circle */
+    display:block;
   }}
 
   .card h3 {{
@@ -320,6 +327,14 @@ st.markdown(
 )
 
 # ========= Hero =========
+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_GeoMech SUITE")
 st.markdown(f"<div class='hero'>{hero_html}</div>", unsafe_allow_html=True)
 
@@ -331,24 +346,24 @@ def build_card_vars(style: Dict[str, Any]) -> str:
     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 "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_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_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_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 "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: