Update app.py

app.py

@@ -17,20 +17,21 @@ THEME: Dict[str, Any] = {
     "page": {
         "container_width": 1120,     # max content width (px)
         "bg_radial": True,           # faint radial background
-        "section_gap": 48,           # px between hero and cards section
+        "section_gap": 44,           # px between hero and cards section
         "footer_gap": 36,            # px space before footer
         "top_padding": 40,           # top padding of the page
     },
     "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",     # <— set your company logo file here
+        "width": 340,                    # rendered pixel width of hero logo
         "tagline": "We Deliver AI-Based Solutions For O&G Industry",
-        "tagline_size": 22,                     # px
-        "tagline_weight": 800,                  # 600/700/800 etc.
+        "tagline_size": 22,              # px
+        "tagline_weight": 500,           # 400–600 looks classy when italic
+        "tagline_italic": True,          # <— italic tagline
         "tagline_color": "#0B1220",
-        "logo_bottom": 18,                      # px space between logo and tagline
-        "block_bottom": 28,                     # px space below the whole hero block
+        "logo_bottom": 14,               # px space between logo and tagline
+        "block_bottom": 22,              # px space below the whole hero block
     },
     "grid": {
         "columns": 2,               # number of cards per row (auto-wrap on narrow screens)
@@ -46,18 +47,21 @@ THEME: Dict[str, Any] = {
         "bg_bot":  "#FBFCFE",       # gradient bottom
         "pad_v": 24,                # vertical padding inside card
         "pad_h": 22,                # horizontal padding inside card
+        "gap": 12,                  # space between stacked elements inside the card
 
         # Title & paragraph
         "title_color": "#0B1220",
         "title_size": 26,
         "title_weight": 900,
+        "title_mb": 4,              # <— spacing under the title (controls title→text gap)
         "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": 4,           # px space below card logo
+        "logo_bottom": 2,           # px space below card logo
     },
     "button": {
         "pad_v": 12, "pad_h": 20, "radius": 14,
@@ -68,13 +72,12 @@ THEME: Dict[str, Any] = {
 }
 
 # ========= CARDS (content + per-card overrides) =========
-# Supply your own icons in /assets and URLs below
 CARDS = [
     {
         "title": "Geomechanics",
         "blurb": "Predict Rock Mechanical Behaviour Using AI",
-        "url":   "https://smart-thinking-smw.hf.space",  # example target
-        "icon":  ASSETS / "GeoMech_logo.png",             # <— card logo file
+        "url":   "https://smart-thinking-smw.hf.space",
+        "icon":  ASSETS / "GeoMech_logo.png",
         "style": {
             "bg_top":  "#EEF7FF",
             "bg_bot":  "#F7FBFF",
@@ -84,8 +87,8 @@ CARDS = [
     {
         "title": "Well Logging",
         "blurb": "Generate Synthetic Logging Profiles Using AI",
-        "url":   "https://smart-thinking-gr.hf.space",    # example target
-        "icon":  ASSETS / "log_logo.png",             # <— card logo file
+        "url":   "https://smart-thinking-gr.hf.space",
+        "icon":  ASSETS / "log_logo.png",
         "style": {
             "bg_top":  "#F8FFF4",
             "bg_bot":  "#FBFFF8",
@@ -135,6 +138,7 @@ st.markdown(f"""
     --hero-block-mb: {hero["block_bottom"]}px;
     --hero-tag-fs: {hero["tagline_size"]}px;
     --hero-tag-weight: {hero["tagline_weight"]};
+    --hero-tag-style: {"italic" if hero.get("tagline_italic", True) else "normal"};
     --hero-tag-color: {hero["tagline_color"]};
 
     --grid-gap: {grid["gap"]}px;
@@ -149,11 +153,16 @@ st.markdown(f"""
     --card-bg-bot: {card["bg_bot"]};
     --card-pv: {card["pad_v"]}px;
     --card-ph: {card["pad_h"]}px;
+    --card-gap: {card["gap"]}px;
+
     --card-title-color: {card["title_color"]};
     --card-title-size: {card["title_size"]}px;
     --card-title-weight: {card["title_weight"]};
+    --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;
 
     --logo-max-w: {card["logo_max_w"]}px;
     --logo-top: {card["logo_top"]}px;
@@ -182,7 +191,7 @@ st.markdown(f"""
     {bg_radial_css}
   }}
 
-  /* ===== HERO (centered company logo + tagline) ===== */
+  /* ===== HERO (centered company logo + italic tagline) ===== */
   .hero {{ text-align:center; }}
   .hero img {{
     width: var(--hero-w); max-width: 92vw; height: auto;
@@ -192,6 +201,7 @@ st.markdown(f"""
   .hero .tagline {{
     font-size: var(--hero-tag-fs);
     font-weight: var(--hero-tag-weight);
+    font-style: var(--hero-tag-style);
     color: var(--hero-tag-color);
     letter-spacing:.2px;
     margin-bottom: var(--hero-block-mb);
@@ -218,7 +228,9 @@ st.markdown(f"""
     border: var(--c-bw, var(--card-bw)) solid var(--c-border, var(--card-border));
     box-shadow: 0 14px 32px rgba(2,20,35,.10), 0 1px 0 rgba(255,255,255,0.75) 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;
+    text-align:center; display:flex; flex-direction:column;
+    align-items:center; justify-content:flex-start;
+    gap: var(--card-gap);
   }}
   .card:hover {{
     transform: translateY(-6px) scale(1.01);
@@ -239,16 +251,20 @@ st.markdown(f"""
   }}
 
   .card h3 {{
-    margin: 0;
+    margin: 0 0 var(--card-title-mb) 0;      /* controls spacing below title */
     font-size: var(--card-title-size);
     font-weight: var(--card-title-weight);
     color: var(--c-title-color, var(--card-title-color));
     letter-spacing: .15px;
+    text-align:center;
+    width: 100%;
   }}
   .card p {{
     color: var(--c-blurb-color, var(--card-blurb-color));
     font-size: var(--card-blurb-size);
-    margin: 0 6px;
+    margin: var(--card-blurb-mt) 8px 0;      /* controls spacing above blurb */
+    text-align:center;
+    width: 100%;
   }}
 
   .btn {{