Update app.py

app.py

@@ -15,63 +15,66 @@ st.set_page_config(page_title="Smart Thinking — AI Suite", layout="wide")
 # ========= GLOBAL THEME (all knobs live here) =========
 THEME: Dict[str, Any] = {
     "page": {
-        "container_width": 1120,     # max content width (px)
-        "bg_radial": True,           # faint radial background
-        "section_gap": 50,           # px between hero and cards section
-        "footer_gap": 36,            # px space before footer
-        "top_padding": 40,           # top padding of the page
+        "container_width": 1120,
+        "bg_radial": True,
+        "section_gap": 44,
+        "footer_gap": 36,
+        "top_padding": 40,
     },
     "hero": {
-        # Company logo in the middle
-        "logo": ASSETS / "logo.png",     # <— set your company logo file here
-        "width": 340,                    # rendered pixel width of hero logo
+        "logo": ASSETS / "logo.png",
+        "width": 340,
         "tagline": "We Deliver AI-Based Solutions For O&G Industry",
-        "tagline_size": 22,              # px
-        "tagline_weight": 500,           # 400–600 looks classy when italic
-        "tagline_italic": True,          # <— italic tagline
+        "tagline_size": 22,
+        "tagline_weight": 500,      # lighter + italic looks premium
+        "tagline_italic": True,
         "tagline_color": "#0B1220",
-        "logo_bottom": 10,               # px space between logo and tagline
-        "block_bottom": 22,              # px space below the whole hero block
+        "logo_bottom": 14,
+        "block_bottom": 22,
     },
     "grid": {
-        "columns": 2,               # number of cards per row (auto-wrap on narrow screens)
-        "gap": 40,                  # px gap between cards
-        "card_width": 400,          # preferred card width (px)
+        "columns": 2,
+        "gap": 40,
+        "card_width": 460,
     },
     "card": {
-        "radius": 22,               # px
-        "border_width": 2,          # px
-        "border": "#0B1220",        # card outline
+        "radius": 22,
+        "border_width": 2,
+        "border": "#0B1220",
         "border_hover": "#243447",
-        "bg_top":  "#FFFFFF",       # gradient top
-        "bg_bot":  "#FBFCFE",       # gradient bottom
-        "pad_v": 24,                # vertical padding inside card
-        "pad_h": 22,                # horizontal padding inside card
-        "gap": 9,                  # space between stacked elements inside the card
+        "bg_top":  "#FFFFFF",
+        "bg_bot":  "#FBFCFE",
+        "pad_v": 24,
+        "pad_h": 22,
+        "gap": 12,                 # base gap between stacked elements
 
-        # Title & paragraph
+        # Title & paragraph (FULL CONTROL)
         "title_color": "#0B1220",
         "title_size": 26,
         "title_weight": 900,
-        "title_mb": 4,              # <— spacing under the title (controls title→text gap)
+        "title_mt": 0,             # <- space above title
+        "title_mb": 2,             # <- space below title
         "blurb_color": "#566275",
         "blurb_size": 16,
-        "blurb_mt": 0,              # <— spacing above the blurb
-
-        # Card logo controls (no frames/borders)
-        "logo_max_w": 250,          # max width of card logo (px)
-        "logo_top": 6,              # px space above card logo
-        "logo_bottom": 2,           # px space below card logo
+        "blurb_mt": 0,             # <- space above blurb
+        "blurb_mb": 8,             # <- space below blurb
+
+        # Card logo controls (no frame/border)
+        "logo_max_w": 250,
+        "logo_area_h": 160,        # <- FIXED area so Space 1 == Space 2
+        "logo_top": 6,
+        "logo_bottom": 6,
     },
     "button": {
         "pad_v": 12, "pad_h": 20, "radius": 14,
         "bg1": "#0B1220", "bg2": "#162338",
         "text": "#FFFFFF", "border": "rgba(11,18,32,.55)",
         "font_size": 16, "font_weight": 800,
+        "btn_mt": 8,               # <- space above the button
     },
 }
 
-# ========= CARDS (content + per-card overrides) =========
+# ========= CARDS =========
 CARDS = [
     {
         "title": "Geomechanics",
@@ -112,7 +115,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 by THEME) =========
+# ========= CSS =========
 page = THEME["page"]; hero = THEME["hero"]
 grid = THEME["grid"]; card = THEME["card"]; button = THEME["button"]
 
@@ -158,13 +161,16 @@ st.markdown(f"""
     --card-title-color: {card["title_color"]};
     --card-title-size: {card["title_size"]}px;
     --card-title-weight: {card["title_weight"]};
+    --card-title-mt: {card["title_mt"]}px;
     --card-title-mb: {card["title_mb"]}px;
 
     --card-blurb-color: {card["blurb_color"]};
     --card-blurb-size: {card["blurb_size"]}px;
     --card-blurb-mt: {card["blurb_mt"]}px;
+    --card-blurb-bm: {card["blurb_mb"]}px;
 
     --logo-max-w: {card["logo_max_w"]}px;
+    --logo-area-h: {card["logo_area_h"]}px;     /* fixed logo area height */
     --logo-top: {card["logo_top"]}px;
     --logo-bottom: {card["logo_bottom"]}px;
 
@@ -177,6 +183,7 @@ st.markdown(f"""
     --btnPV: {button["pad_v"]}px;
     --btnPH: {button["pad_h"]}px;
     --btnRadius: {button["radius"]}px;
+    --btnMT: {button["btn_mt"]}px;
   }}
 
   html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
@@ -191,7 +198,7 @@ st.markdown(f"""
     {bg_radial_css}
   }}
 
-  /* ===== HERO (centered company logo + italic tagline) ===== */
+  /* ===== HERO ===== */
   .hero {{ text-align:center; }}
   .hero img {{
     width: var(--hero-w); max-width: 92vw; height: auto;
@@ -207,7 +214,7 @@ st.markdown(f"""
     margin-bottom: var(--hero-block-mb);
   }}
 
-  /* ===== GRID (two cards) ===== */
+  /* ===== GRID ===== */
   .grid {{
     display: grid;
     grid-template-columns: repeat(var(--grid-cols), var(--card-w));
@@ -239,19 +246,24 @@ st.markdown(f"""
     filter: saturate(1.03);
   }}
 
-  /* Plain logo (NO frame/border) */
+  /* FIXED LOGO AREA → equal top spacing on all cards */
+  .card .logo-wrap {{
+    width: 100%;
+    height: var(--logo-area-h);
+    padding-top: var(--logo-top);
+    padding-bottom: var(--logo-bottom);
+    display:flex; align-items:center; justify-content:center;
+  }}
   .card .logo-img {{
-    margin-top: var(--logo-top);
-    margin-bottom: var(--logo-bottom);
     max-width: var(--logo-max-w);
-    width: 100%;
-    height: auto;
+    max-height: 100%;
+    width: auto; height: auto;
     object-fit: contain;
     display:block;
   }}
 
   .card h3 {{
-    margin: 0 0 var(--card-title-mb) 0;      /* controls spacing below title */
+    margin: var(--card-title-mt) auto var(--card-title-mb) auto; /* centered + controllable */
     font-size: var(--card-title-size);
     font-weight: var(--card-title-weight);
     color: var(--c-title-color, var(--card-title-color));
@@ -262,13 +274,14 @@ st.markdown(f"""
   .card p {{
     color: var(--c-blurb-color, var(--card-blurb-color));
     font-size: var(--card-blurb-size);
-    margin: var(--card-blurb-mt) 8px 0;      /* controls spacing above blurb */
+    margin: var(--card-blurb-mt) auto var(--card-blurb-bm) auto; /* centered + controllable */
     text-align:center;
     width: 100%;
   }}
 
   .btn {{
     display:inline-block;
+    margin-top: var(--btnMT);
     padding: var(--btnPV) var(--btnPH);
     border-radius: var(--btnRadius);
     border: 1px solid var(--btnBorder);
@@ -290,7 +303,7 @@ st.markdown(f"""
 </style>
 """, unsafe_allow_html=True)
 
-# ========= HERO (centered) =========
+# ========= HERO =========
 hero_html = img_tag(hero["logo"], "Company Logo")
 st.markdown(
     f"""
@@ -310,7 +323,7 @@ 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 "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']}")
@@ -326,7 +339,7 @@ def app_card(card_cfg: Dict[str, Any]) -> str:
     target = "_self"
     return (
         f"<div class='card' style='{vars_inline}'>"
-        + f"{icon_html}"
+        + f"<div class='logo-wrap'>{icon_html}</div>"
         + f"<h3>{escape(card_cfg['title'])}</h3>"
         + f"<p>{escape(card_cfg['blurb'])}</p>"
         + f"<a class='btn' href='{escape(card_cfg.get('url', '#'))}' target='{target}' rel='noopener'>Explore</a>"