Update app.py

app.py

@@ -21,50 +21,48 @@ 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",
+        # GOLD header palette (high contrast)
+        "bg1": "#D4AF37",        # gold
+        "bg2": "#B88917",        # deeper gold
+        "text": "#0B1220",       # dark text in pill for contrast
+        "tagline_color": "#000000",
     },
     "page": {
-        "top_padding": 50,       # px top padding for page
-        "container_width": 1120, # max content width
-        "bg_radial": True,       # premium faint radial bg
+        "top_padding": 50,
+        "container_width": 1120,
+        "bg_radial": True,
     },
     "hero": {
-        "width": 400,            # px
-        "margin_bottom": 30,     # px space under hero
+        "width": 400,
+        "margin_bottom": 30,
         "logo": ASSETS / "AI_Suite_Log_logo.png",
     },
     "grid": {
-        "gap": 50,               # px between cards
-        "card_width": 340,       # default card width (px)
+        "gap": 50,
+        "card_width": 340,
     },
     "card": {
-        "radius": 22,            # px
-        "border_width": 2,       # px
-        "pad_v": 24,             # px
-        "pad_h": 20,             # px
-        "border": "#0B1220",     # dark outline
+        "radius": 22,
+        "border_width": 2,
+        "pad_v": 24,
+        "pad_h": 20,
+        "border": "#0B1220",
         "border_hover": "#243447",
-        # defaults (overridden per card below)
         "bg_top":  "#FFFFFF",
         "bg_bot":  "#FBFCFE",
         "title_color": "#0B1220",
         "blurb_color": "#566275",
     },
     "icon": {
-        "diam": 118,             # px outer circle
-        "img":  106,             # px image
+        "diam": 118,
+        "img":  106,
         "circle_bg": "#F1F5F9",
         "circle_border": "rgba(12,18,32,0.10)",
     },
     "button": {
-        "pad_v": 12,             # px
-        "pad_h": 20,             # px
-        "radius": 14,            # px
-        # premium navy CTA
+        "pad_v": 12,
+        "pad_h": 20,
+        "radius": 14,
         "bg1": "#0B1220",
         "bg2": "#162338",
         "text": "#FFFFFF",
@@ -72,8 +70,7 @@ THEME: Dict[str, Any] = {
     },
 }
 
-# ========= CARDS (content + per-card overrides) =========
-# Solid, very-light tints for a premium feel (no washed-out rgba)
+# ========= CARDS =========
 CARDS = [
     {
         "title": " ST_Log_GR",
@@ -81,7 +78,7 @@ CARDS = [
         "url":   "https://smart-thinking-gr.hf.space/",
         "icon":  ASSETS / "GR_logo.png",
         "style": {
-            "bg_top":  "#EAF7F1",   # minty light
+            "bg_top":  "#EAF7F1",
             "bg_bot":  "#F6FBF8",
             "border":  "#0F3D3E",
         },
@@ -92,7 +89,7 @@ CARDS = [
         "url":   "https://smart-thinking-sonic-ts.hf.space",
         "icon":  ASSETS / "Ts_logo.png",
         "style": {
-            "bg_top":  "#EAF7FD",   # airy cyan
+            "bg_top":  "#EAF7FD",
             "bg_bot":  "#F5FBFF",
             "border":  "#0E4A6E",
         },
@@ -103,7 +100,7 @@ CARDS = [
         "url":   "https://smart-thinking-sonic-tc.hf.space",
         "icon":  ASSETS / "Tc_logo.png",
         "style": {
-            "bg_top":  "#EEF0FF",   # soft indigo
+            "bg_top":  "#EEF0FF",
             "bg_bot":  "#F7F8FF",
             "border":  "#3E4EB8",
         },
@@ -128,7 +125,7 @@ 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)}" />'
 
-# ========= CSS (driven from THEME) =========
+# ========= CSS =========
 strip = THEME["strip"]; page = THEME["page"]; hero = THEME["hero"]
 grid  = THEME["grid"];  card = THEME["card"];  icon = THEME["icon"]; button = THEME["button"]
 
@@ -245,7 +242,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 +254,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 +268,15 @@ 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;
+    width: calc(var(--c-icon-img, {icon["img"]}px) - 12px);
+    height: calc(var(--c-icon-img, {icon["img"]}px) - 12px);
+    padding: 6px;
+    box-sizing: border-box;
+    object-fit: contain;                   /* never crop */
+    background: #FFFFFF;                   /* clean canvas for mixed logos */
+    border: 2px solid var(--c-border, var(--cardStroke)); /* match card border */
+    border-radius: 14px;
+    display:block;
   }}
 
   .card h3 {{
@@ -334,21 +338,21 @@ def build_card_vars(style: Dict[str, Any]) -> str:
     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: