Update app.py

app.py

@@ -12,19 +12,21 @@ ASSETS   = BASE_DIR / "assets"
 st.set_page_config(page_title="ST_LOG SUITE — Apps", page_icon="🧭", layout="wide")
 
 # ========= SUITE / BRAND =========
-SUITE_NAME   = "ST_LOG SUITE"
+SUITE_NAME    = "ST_LOG SUITE"
 SUITE_TAGLINE = "Generating AI-Based Well Logging Profiles While Drilling"
 
 # Buttons: deep navy for strong contrast
 BTN_DARK_1 = "#0B1220"
 BTN_DARK_2 = "#1F2937"
 
-# Suite strip theme — "slate" (navy) or "gold"
-STRIP_THEME = "slate"         # change to "gold" to try brand yellow
-SHOW_CARD_CHIP = False        # repeat small chip inside each card? (False = cleaner)
+# Suite strip base (navy bg). Text will be gold.
+STRIP_BG_1 = "#0B1220"
+STRIP_BG_2 = "#1F2937"
+GOLD_TEXT  = "#EAB308"  # gold text inside the strip
 
-# Per-card backgrounds (super subtle tints)
-USE_TINTED_CARD_BG = False    # set True to try soft tint per app
+# Per-card options
+SHOW_CARD_CHIP       = False      # small chip inside each card? (False = cleaner)
+USE_TINTED_CARD_BG   = False      # try soft tints per app background
 
 # ========= ASSETS =========
 HERO_LOGO = ASSETS / "AI_Suite_Log_logo.png"
@@ -73,22 +75,16 @@ 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)}" />'
 
-# ========= STRIP THEME COLORS =========
-if STRIP_THEME.lower() == "gold":
-    STRIP_1, STRIP_2, STRIP_TEXT = "#EAB308", "#F59E0B", "#0B1220"  # gold, dark text
-else:  # "slate"
-    STRIP_1, STRIP_2, STRIP_TEXT = "#0B1220", "#1F2937", "#FFFFFF"  # navy, white text
-
 # ========= STYLES =========
 st.markdown(f"""
 <style>
   :root {{
     --btn1: {BTN_DARK_1};
     --btn2: {BTN_DARK_2};
-    --strip1: {STRIP_1};
-    --strip2: {STRIP_2};
-    --stripText: {STRIP_TEXT};
-    --cardStroke: #0B1220;  /* DARK OUTLINE */
+    --stripBg1: {STRIP_BG_1};
+    --stripBg2: {STRIP_BG_2};
+    --stripGold: {GOLD_TEXT};
+    --cardStroke: #0B1220;     /* dark outline */
     --cardStrokeHover: #1E293B;
   }}
 
@@ -101,8 +97,8 @@ st.markdown(f"""
     max-width: 1120px;
     min-height: 100vh;
     display: flex; flex-direction: column;
-    gap: 16px;
-    padding: 68px 0 28px !important;
+    gap: 14px;
+    padding: 28px 0 28px !important;  /* smaller top padding since strip sits at top-left */
     background:
       radial-gradient(980px 460px at 50% -140px,
         rgba(2,12,30,0.06) 0%,
@@ -111,28 +107,29 @@ st.markdown(f"""
         rgba(255,255,255,1) 100%);
   }}
 
-  /* HERO (logo only) */
-  .hero {{ text-align:center; margin: 0; }}
-  .hero img {{
-    width: 400px; max-width: 92vw; height: auto;
-    display:block; margin: 0 auto 6px;
-    filter: drop-shadow(0 6px 16px rgba(0,0,0,.10));
-  }}
-
-  /* SUITE STRIP ABOVE CARDS */
-  .suite-banner {{
-    display:flex; gap:14px; justify-content:center; align-items:center;
-    margin: 8px 0 16px; flex-wrap: wrap;
+  /* ===== TOP-LEFT STRIP ROW ===== */
+  .suite-row {{
+    display:flex; align-items:center; gap:12px;
+    justify-content:flex-start;
+    margin: 0 0 8px 0; flex-wrap: wrap;
   }}
   .suite-pill {{
-    background: linear-gradient(90deg, var(--strip1) 0%, var(--strip2) 100%);
-    color: var(--stripText); padding:8px 14px; border-radius:999px;
+    background: linear-gradient(90deg, var(--stripBg1) 0%, var(--stripBg2) 100%);
+    color: var(--stripGold); padding:8px 14px; border-radius:999px;
     font-weight:800; letter-spacing:.25px;
     box-shadow: 0 6px 14px rgba(2,12,30,.18);
     white-space: nowrap;
   }}
   .suite-tagline {{
-    color:#344054; font-weight:600; opacity:.95;
+    color:#344054; font-weight:600; opacity:.95; white-space: nowrap;
+  }}
+
+  /* HERO LOGO (below the strip) */
+  .hero {{ text-align:center; margin: 0 0 6px; }}
+  .hero img {{
+    width: 520px; max-width: 92vw; height: auto;
+    display:block; margin: 0 auto 6px;
+    filter: drop-shadow(0 6px 16px rgba(0,0,0,.10));
   }}
 
   /* GRID (3 → 2 → 1) */
@@ -142,7 +139,7 @@ st.markdown(f"""
     gap: 40px;
     justify-content: center;
     align-items: stretch;
-    margin-top: 6px;
+    margin-top: 10px;
   }}
   @media (max-width: 1120px) {{
     .grid {{ grid-template-columns: repeat(2, 340px); gap: 28px; }}
@@ -151,13 +148,13 @@ st.markdown(f"""
     .grid {{ grid-template-columns: 1fr; }}
   }}
 
-  /* CARD — DARK OUTLINE + premium elevation */
+  /* CARD — dark outline + premium elevation */
   .card {{
     position: relative;
     width: 340px;
     border-radius:22px;
     padding: 24px 20px 20px;
-    background: var(--card-bg, #FFFFFF);
+    background: var(--card-bg, linear-gradient(#FFFFFF, #FBFCFE));
     border: 2px solid var(--card-stroke, var(--cardStroke));
     box-shadow:
       0 10px 32px rgba(2,20,35,.10),
@@ -173,11 +170,11 @@ st.markdown(f"""
     filter: saturate(1.02);
   }}
 
-  /* Optional: chip inside card (off by default) */
+  /* (optional) small chip inside each card */
   .suite-chip {{
     position: absolute; top: 12px; right: 12px;
-    background: linear-gradient(90deg, var(--strip1) 0%, var(--strip2) 100%);
-    color: var(--stripText); padding:6px 10px; border-radius:999px;
+    background: linear-gradient(90deg, var(--stripBg1) 0%, var(--stripBg2) 100%);
+    color: var(--stripGold); padding:6px 10px; border-radius:999px;
     font-weight:700; font-size:.82rem; letter-spacing:.2px;
     box-shadow: 0 6px 14px rgba(2,12,30,.18);
   }}
@@ -202,15 +199,22 @@ st.markdown(f"""
     color:#566275; min-height: 40px; margin: 0 10px; font-size: 1.0rem;
   }}
 
-  /* BRIGHT, HIGH-CONTRAST BUTTON (navy) */
+  /* BUTTON (navy) */
   .btn {{
     display:inline-block; padding:12px 20px; border-radius:14px;
-    border: 1px solid rgba(11,18,32,.45); text-decoration:none;
+    border: 1px solid rgba(11,18,32,.45);
     background: linear-gradient(180deg, var(--btn1) 0%, var(--btn2) 100%);
-    color: #ffffff; font-weight: 800; letter-spacing:.3px;
+    font-weight: 800; letter-spacing:.3px;
     margin: 6px auto 0;
     box-shadow: 0 12px 28px rgba(11,18,32,.28), inset 0 1px 0 rgba(255,255,255,.10);
   }}
+
+  /* Force white text + no underline on CTA in ALL states */
+  a.btn, a.btn:link, a.btn:visited, a.btn:hover, a.btn:active, a.btn:focus {{
+    color: #ffffff !important;
+    text-decoration: none !important;
+  }}
+
   .btn:hover {{
     filter: brightness(1.03) saturate(1.04);
     transform: translateY(-1px);
@@ -223,31 +227,13 @@ st.markdown(f"""
 
   .footer {{ text-align:center; color:#3f4a5a; font-size:0.96em; margin-top: 26px; }}
   .footer hr {{ margin: 12px 0; border-color: rgba(0,0,0,.08); }}
-<style>
-  /* Force white text + no underline on the CTA link in ALL states */
-  a.btn,
-  a.btn:link,
-  a.btn:visited {
-    color: #ffffff !important;
-    text-decoration: none !important;
-  }
-  a.btn:hover,
-  a.btn:active,
-  a.btn:focus {
-    color: #ffffff !important;
-    text-decoration: none !important;
-  }
 </style>
 """, unsafe_allow_html=True)
 
-# ========= HERO (logo only) =========
-hero_html = img_tag(HERO_LOGO, "ST_LOG SUITE")
-st.markdown(f"<div class='hero'>{hero_html}</div>", unsafe_allow_html=True)
-
-# ========= SUITE STRIP =========
+# ========= TOP-LEFT STRIP (then hero below) =========
 st.markdown(
     f"""
-    <div class="suite-banner">
+    <div class="suite-row">
       <span class="suite-pill">{escape(SUITE_NAME)}</span>
       <span class="suite-tagline">{escape(SUITE_TAGLINE)}</span>
     </div>
@@ -255,14 +241,18 @@ st.markdown(
     unsafe_allow_html=True,
 )
 
+# ========= HERO (logo below the strip) =========
+hero_html = img_tag(HERO_LOGO, "ST_LOG SUITE")
+st.markdown(f"<div class='hero'>{hero_html}</div>", unsafe_allow_html=True)
+
 # ========= CARDS =========
 def app_card(app: dict) -> str:
     # choose background: white vs subtle tint
-    tint = app.get("tint") if {USE_TINTED_CARD_BG} else "linear-gradient(#FFFFFF, #FBFCFE)"
+    tint = app.get("tint") if USE_TINTED_CARD_BG else "linear-gradient(#FFFFFF, #FBFCFE)"
     icon_html = img_tag(app.get("icon"), "icon",
                         style="width:106px;height:106px;border-radius:9999px;") if app.get("icon") and app["icon"].exists() else ""
     target = "_self"
-    chip = f"<div class='suite-chip'>{escape(SUITE_NAME)}</div>" if {SHOW_CARD_CHIP} else ""
+    chip = f"<div class='suite-chip'>{escape(SUITE_NAME)}</div>" if SHOW_CARD_CHIP else ""
     style_vars = f"--card-bg:{tint}; --card-stroke: var(--cardStroke);"
     return (
         f"<div class='card' style='{style_vars}'>"