Update app.py

app.py

@@ -12,59 +12,61 @@ ASSETS   = BASE_DIR / "assets"
 # ========= META =========
 st.set_page_config(page_title="ST_GeoMech SUITE", layout="wide")
 
+# ========= CARDS PER ROW (single control) =========
+# Change this to any integer >= 1 (e.g., 3, 4, 5...)
+CARDS_PER_ROW: int = 4
+
 # ========= GLOBAL THEME (one place) =========
 THEME: Dict[str, Any] = {
     "strip": {
-        "gap": 10,               # px between pill and tagline
-        "below_gap": 30,         # px between strip row and hero
-        "pill_pad_v": 8,         # px
-        "pill_pad_h": 14,        # px
-        "pill_font": 16,         # px
-        "tagline_font": 15,      # px
-        # Premium header palette — DARK GREEN with contrasting text
-        "bg1": "#064E3B",        # dark green
-        "bg2": "#065F46",        # deeper green
-        "text": "#FFFFFF",       # high-contrast pill text
-        "tagline_color": "#000000",  # soft-contrast tagline
+        "gap": 10,
+        "below_gap": 30,
+        "pill_pad_v": 8,
+        "pill_pad_h": 14,
+        "pill_font": 16,
+        "tagline_font": 15,
+        "bg1": "#064E3B",
+        "bg2": "#065F46",
+        "text": "#FFFFFF",
+        "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_GeoMech_logo.png",
     },
     "grid": {
-        "gap": 50,               # px between cards
-        "card_width": 340,       # default card width (px)
+        "gap": 50,
+        # Card width is now fluid; keep for max-width if you like
+        "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 box (will be padded)
+        "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",
@@ -79,77 +81,49 @@ CARDS = [
         "blurb": "Real-time Uniconfined Compressive Strength Prediction.",
         "url":   "https://smart-thinking-ucs.hf.space/",
         "icon":  ASSETS / "UCS_logo.png",
-        "style": {
-            "bg_top":  "#EAF7F1",
-            "bg_bot":  "#F6FBF8",
-            "border":  "#0F3D3E",
-        },
+        "style": {"bg_top":"#EAF7F1","bg_bot":"#F6FBF8","border":"#0F3D3E"},
     },
     {
         "title": " ST_GeoMEch_UCS",
         "blurb": "Real-time Uniconfined Compressive Strength Prediction.",
         "url":   "https://smart-thinking-ucs.hf.space/",
         "icon":  ASSETS / "UCS_logo.png",
-        "style": {
-            "bg_top":  "#EAF7F1",
-            "bg_bot":  "#F6FBF8",
-            "border":  "#0F3D3E",
-        },
+        "style": {"bg_top":"#EAF7F1","bg_bot":"#F6FBF8","border":"#0F3D3E"},
     },
     {
         "title": " ST_GeoMEch_UCS",
         "blurb": "Real-time Uniconfined Compressive Strength Prediction.",
         "url":   "https://smart-thinking-ucs.hf.space/",
         "icon":  ASSETS / "UCS_logo.png",
-        "style": {
-            "bg_top":  "#EAF7F1",
-            "bg_bot":  "#F6FBF8",
-            "border":  "#0F3D3E",
-        },
+        "style": {"bg_top":"#EAF7F1","bg_bot":"#F6FBF8","border":"#0F3D3E"},
     },
     {
         "title": " ST_GeoMEch_UCS",
         "blurb": "Real-time Uniconfined Compressive Strength Prediction.",
         "url":   "https://smart-thinking-ucs.hf.space/",
         "icon":  ASSETS / "UCS_logo.png",
-        "style": {
-            "bg_top":  "#EAF7F1",
-            "bg_bot":  "#F6FBF8",
-            "border":  "#0F3D3E",
-        },
+        "style": {"bg_top":"#EAF7F1","bg_bot":"#F6FBF8","border":"#0F3D3E"},
     },
     {
         "title": " ST_GeoMEch_UCS",
         "blurb": "Real-time Uniconfined Compressive Strength Prediction.",
         "url":   "https://smart-thinking-ucs.hf.space/",
         "icon":  ASSETS / "UCS_logo.png",
-        "style": {
-            "bg_top":  "#EAF7F1",
-            "bg_bot":  "#F6FBF8",
-            "border":  "#0F3D3E",
-        },
+        "style": {"bg_top":"#EAF7F1","bg_bot":"#F6FBF8","border":"#0F3D3E"},
     },
     {
         "title": " ST_GeoMech_Ym",
         "blurb": "Real-time Static Young's Modulus Prediction.",
         "url":   "https://smart-thinking-ym.hf.space",
         "icon":  ASSETS / "Ym_logo.png",
-        "style": {
-            "bg_top":  "#EAF7FD",
-            "bg_bot":  "#F5FBFF",
-            "border":  "#0E4A6E",
-        },
+        "style": {"bg_top":"#EAF7FD","bg_bot":"#F5FBFF","border":"#0E4A6E"},
     },
     {
         "title": " ST_GeoMech_SMW",
         "blurb": "Real-Time Safe Mud Window Prediction",
         "url":   "https://smart-thinking-smw.hf.space",
         "icon":  ASSETS / "SMW_logo.png",
-        "style": {
-            "bg_top":  "#EEF0FF",
-            "bg_bot":  "#F7F8FF",
-            "border":  "#3E4EB8",
-        },
+        "style": {"bg_top":"#EEF0FF","bg_bot":"#F7F8FF","border":"#3E4EB8"},
     },
 ]
 
@@ -221,6 +195,9 @@ st.markdown(f"""
     --btn2: {button["bg2"]};
     --btnText: {button["text"]};
     --btnBorder: {button["border"]};
+
+    /* NEW: cards per row control */
+    --cols: {CARDS_PER_ROW};
   }}
 
   html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
@@ -265,16 +242,19 @@ st.markdown(f"""
     filter: drop-shadow(0 6px 16px rgba(0,0,0,.10));
   }}
 
-  /* ===== GRID ===== */
+  /* ===== GRID =====
+     Uses --cols to set the number of cards per row on desktop.
+     Responsive fallbacks: 2 cols on tablets, 1 col on phones. */
   .grid {{
     display: grid;
-    grid-template-columns: repeat(3, var(--card-w));
+    grid-template-columns: repeat(var(--cols), 1fr);
     gap: var(--grid-gap);
-    justify-content: center; align-items: stretch;
+    justify-items: stretch;
+    align-items: stretch;
     margin-top: 10px;
   }}
   @media (max-width: 1120px) {{
-    .grid {{ grid-template-columns: repeat(2, var(--card-w)); gap: calc(var(--grid-gap) - 12px); }}
+    .grid {{ grid-template-columns: repeat(2, 1fr); gap: calc(var(--grid-gap) - 12px); }}
   }}
   @media (max-width: 720px) {{
     .grid {{ grid-template-columns: 1fr; }}
@@ -283,7 +263,8 @@ st.markdown(f"""
   /* ===== CARD ===== */
   .card {{
     position: relative;
-    width: var(--c-w, var(--card-w));
+    width: 100%;                    /* full width of its grid cell */
+    max-width: var(--card-w);       /* optional max width for nice measure */
     border-radius: var(--c-radius, var(--card-r));
     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%);
@@ -294,6 +275,7 @@ st.markdown(f"""
       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;
+    margin: 0 auto;                 /* center within grid cell if narrower than cell */
   }}
   .card:hover {{
     transform: translateY(-6px) scale(1.01);
@@ -305,7 +287,7 @@ st.markdown(f"""
     filter: saturate(1.03);
   }}
 
-  /* ===== ICON / LOGO — self-contained, not trimmed ===== */
+  /* ===== ICON / LOGO ===== */
   .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;
@@ -314,24 +296,18 @@ 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 {{
-    /* 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;
+    padding: 6px; box-sizing: border-box; object-fit: contain;
+    background: #FFFFFF; border: 2px solid var(--c-border, var(--cardStroke)); border-radius: 14px; display:block;
   }}
 
   .card h3 {{
     margin: 0; font-size: 25px; font-weight: 900;
-    color: {card["title_color"]}; letter-spacing: .15px;
+    color: var(--c-title-color, {card["title_color"]}); letter-spacing: .15px;
   }}
   .card p {{
-    color: {card["blurb_color"]}; min-height: 40px; margin: 0 10px; font-size: 16px;
+    color: var(--c-blurb-color, {card["blurb_color"]}); min-height: 40px; margin: 0 10px; font-size: 16px;
   }}
 
   .btn {{
@@ -371,14 +347,6 @@ 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)
 
@@ -397,20 +365,18 @@ def build_card_vars(style: Dict[str, Any]) -> str:
     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_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 "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:
     style = card_cfg.get("style", {})
     vars_inline = build_card_vars(style)