Update app.py

app.py

@@ -11,16 +11,19 @@ ASSETS   = BASE_DIR / "assets"
 # ========= META =========
 st.set_page_config(page_title="ST_LOG SUITE — Apps", page_icon="🧭", layout="wide")
 
-# ========= BRAND / DATA =========
-SUITE_NAME   = "ST_LOG SUITE"
-ACCENT       = "#0E7490"       # teal start (kept subtly in chips)
-ACCENT_END   = "#14B8A6"       # teal end
+# ========= SUITE / BRAND =========
+SUITE_NAME = "ST_LOG SUITE"
+# Brand teal used in accents; bright button uses cyan→blue for strong contrast
+ACCENT       = "#0E7490"
+ACCENT_END   = "#14B8A6"
+BTN_BRIGHT_1 = "#06B6D4"   # cyan
+BTN_BRIGHT_2 = "#2563EB"   # blue
 
-# Logos (put these PNGs in assets/)
-HERO_LOGO   = ASSETS / "AI_Suite_Log_logo.png"
-ICON_GR     = ASSETS / "GR_logo.png"
-ICON_TS     = ASSETS / "Ts_logo.png"
-ICON_TC     = ASSETS / "Tc_logo.png"
+# ========= ASSETS =========
+HERO_LOGO = ASSETS / "AI_Suite_Log_logo.png"
+ICON_GR   = ASSETS / "GR_logo.png"
+ICON_TS   = ASSETS / "Ts_logo.png"
+ICON_TC   = ASSETS / "Tc_logo.png"
 
 APPS = [
     {
@@ -48,8 +51,7 @@ def data_uri(path: Path) -> str | None:
     if not path or not path.exists():
         return None
     mime, _ = mimetypes.guess_type(path.name)
-    if not mime:
-        mime = "image/png"
+    if not mime: mime = "image/png"
     b64 = base64.b64encode(path.read_bytes()).decode("utf-8")
     return f"data:{mime};base64,{b64}"
 
@@ -61,14 +63,14 @@ 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)}" />'
 
-# ========= BACKGROUND (clean, calm gradient) =========
+# ========= BACKGROUND & CORE STYLES =========
 st.markdown(f"""
 <style>
   :root {{
     --brand: {ACCENT};
-    --brand2: {ACCENT_END};
-    --btnDark1: #0B1220;     /* dark slate for button */
-    --btnDark2: #334155;     /* slate */
+    --brand2:{ACCENT_END};
+    --btn1:  {BTN_BRIGHT_1};
+    --btn2:  {BTN_BRIGHT_2};
   }}
 
   html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
@@ -77,11 +79,11 @@ st.markdown(f"""
   }}
 
   .block-container {{
-    max-width: 1100px;
+    max-width: 1120px;
     min-height: 100vh;
     display: flex; flex-direction: column;
     gap: 16px;
-    padding: 72px 0 28px !important;
+    padding: 68px 0 28px !important;
     background:
       radial-gradient(980px 460px at 50% -140px,
         rgba(20,184,166,0.08) 0%,
@@ -90,58 +92,71 @@ st.markdown(f"""
         rgba(255,255,255,1) 100%);
   }}
 
-  /* HERO (logo only — title/tagline removed) */
+  /* HERO (logo only) */
   .hero {{ text-align:center; margin: 0; }}
   .hero img {{
-    width: 560px; max-width: 92vw; height: auto;
+    width: 580px; max-width: 92vw; height: auto;
     display:block; margin: 0 auto 6px;
     filter: drop-shadow(0 6px 16px rgba(0,0,0,.10));
   }}
 
-  /* SUITE BANNER (tiny, elegant) */
+  /* SUITE STRIP ABOVE CARDS */
   .suite-banner {{
-    display:flex; gap:10px; justify-content:center; align-items:center;
-    margin: 4px 0 10px;
+    display:flex; gap:14px; justify-content:center; align-items:center;
+    margin: 6px 0 14px;
+    flex-wrap: wrap;
   }}
   .suite-pill {{
     background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 100%);
-    color:#fff; padding:6px 12px; border-radius:999px;
-    font-weight:700; letter-spacing:.2px;
+    color:#fff; padding:7px 14px; border-radius:999px;
+    font-weight:800; letter-spacing:.25px;
     box-shadow: 0 6px 14px rgba(14,116,144,.20);
+    white-space: nowrap;
+  }}
+  .suite-tagline {{
+    color:#364152; font-weight:600; opacity:.95;
   }}
 
   /* GRID (3 → 2 → 1) */
   .grid {{
     display: grid;
-    grid-template-columns: repeat(3, 320px);
-    gap: 36px;
+    grid-template-columns: repeat(3, 340px);
+    gap: 40px;
     justify-content: center;
     align-items: stretch;
-    margin-top: 8px;
+    margin-top: 6px;
   }}
-  @media (max-width: 1100px) {{
-    .grid {{ grid-template-columns: repeat(2, 320px); gap: 28px; }}
+  @media (max-width: 1120px) {{
+    .grid {{ grid-template-columns: repeat(2, 340px); gap: 28px; }}
   }}
-  @media (max-width: 700px) {{
+  @media (max-width: 720px) {{
     .grid {{ grid-template-columns: 1fr; }}
   }}
 
-  /* CARD — premium look */
+  /* CARD — premium frame + elevation */
   .card {{
     position: relative;
-    width: 320px;
-    background: linear-gradient(180deg, #ffffff 0%, #FBFCFE 100%);
-    border: 1px solid rgba(12,18,32,.08);
-    border-radius:20px; padding:22px 18px 18px;
-    box-shadow: 0 10px 34px rgba(2,20,35,.08), 0 1px 0 rgba(255,255,255,0.9) inset;
-    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
-    text-align:center; display:flex; flex-direction:column; gap:14px;
+    width: 340px;
+    border-radius:22px;
+    padding: 24px 20px 18px;
+    background:
+      linear-gradient(#ffffff, #FBFCFE) padding-box,
+      linear-gradient(135deg, rgba(14,116,144,0.45), rgba(20,184,166,0.15)) border-box;
+    border: 1.5px solid transparent;
+    box-shadow:
+      0 10px 32px rgba(2,20,35,.10),
+      0 1px 0 rgba(255,255,255,0.9) 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;
   }}
   .card:hover {{
     transform: translateY(-4px);
     box-shadow: 0 18px 52px rgba(2,20,35,.16);
-    border-color: rgba(14,116,144,0.18);
+    filter: saturate(1.02);
+    background:
+      linear-gradient(#ffffff, #F7FAFF) padding-box,
+      linear-gradient(135deg, rgba(14,116,144,0.70), rgba(20,184,166,0.25)) border-box;
   }}
 
   /* Corner suite chip */
@@ -155,41 +170,47 @@ st.markdown(f"""
 
   /* Larger round icon */
   .icon-wrap {{
-    width: 104px; height: 104px; border-radius: 9999px;
+    width: 118px; height: 118px; border-radius: 9999px;
     background: #F0F5F9;
     display:grid; place-items:center;
     border: 1px solid rgba(12,18,32,0.10);
-    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 20px rgba(2,20,35,.06);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 22px rgba(2,20,35,.07);
   }}
   .icon-wrap img {{
-    width: 92px; height: 92px; border-radius:9999px; display:block;
+    width: 106px; height: 106px; border-radius:9999px; display:block;
   }}
 
-  /* Enlarged app title */
+  /* BIGGER APP TITLE */
   .card h3 {{
-    margin: 2px 0 0; font-size: 1.26rem; font-weight: 900; color:#0b1220;
-    letter-spacing: .1px;
+    margin: 0; font-size: 1.48rem; font-weight: 900; color:#0b1220;
+    letter-spacing: .15px;
   }}
   .card p {{
-    color:#566275; min-height: 40px; margin: 0 10px; font-size: .98rem;
+    color:#566275; min-height: 40px; margin: 0 10px; font-size: 1.0rem;
   }}
 
-  /* PREMIUM BUTTON (dark slate, not green) */
+  /* BRIGHT CTA BUTTON */
   .btn {{
-    display:inline-block; padding:12px 18px; border-radius:14px;
-    border: 1px solid rgba(15,23,42,.35); text-decoration:none;
-    background: linear-gradient(180deg, var(--btnDark1) 0%, var(--btnDark2) 100%);
-    color: white; font-weight: 700; letter-spacing:.25px;
+    display:inline-block; padding:12px 20px; border-radius:14px;
+    border: 1px solid rgba(37,99,235,.45); text-decoration:none;
+    background: linear-gradient(90deg, var(--btn1) 0%, var(--btn2) 100%);
+    color: white; font-weight: 800; letter-spacing:.3px;
     margin: 6px auto 0;
-    box-shadow: 0 10px 26px rgba(15,23,42,.25), inset 0 1px 0 rgba(255,255,255,.08);
+    box-shadow:
+      0 12px 28px rgba(37,99,235,.28),
+      inset 0 1px 0 rgba(255,255,255,.10);
   }}
   .btn:hover {{
-    filter: brightness(1.02) saturate(1.02);
+    filter: brightness(1.03) saturate(1.04);
     transform: translateY(-1px);
-    box-shadow: 0 14px 34px rgba(15,23,42,.30);
+    box-shadow: 0 16px 38px rgba(37,99,235,.36);
+  }}
+  .btn:focus {{
+    outline: none;
+    box-shadow: 0 0 0 4px rgba(37,99,235,.2), 0 16px 38px rgba(37,99,235,.36);
   }}
 
-  .footer {{ text-align:center; color:#3f4a5a; font-size:0.96em; margin-top: 24px; }}
+  .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>
 """, unsafe_allow_html=True)
@@ -198,13 +219,21 @@ st.markdown(f"""
 hero_html = img_tag(HERO_LOGO, "ST_LOG SUITE")
 st.markdown(f"<div class='hero'>{hero_html}</div>", unsafe_allow_html=True)
 
-# ========= SUITE BANNER =========
-st.markdown(f"<div class='suite-banner'><span class='suite-pill'>{escape(SUITE_NAME)}</span></div>", unsafe_allow_html=True)
+# ========= SUITE STRIP (with your requested line) =========
+st.markdown(
+    f"""
+    <div class="suite-banner">
+      <span class="suite-pill">{escape(SUITE_NAME)}</span>
+      <span class="suite-tagline">Generating AI-Based Well Logging Profiles While Drilling</span>
+    </div>
+    """,
+    unsafe_allow_html=True,
+)
 
 # ========= CARDS =========
 def app_card(app: dict) -> str:
     icon_html = img_tag(app.get("icon"), "icon",
-                        style="width:92px;height:92px;border-radius:9999px;") if app.get("icon") and app["icon"].exists() else ""
+                        style="width:106px;height:106px;border-radius:9999px;") if app.get("icon") and app["icon"].exists() else ""
     target = "_self"  # change to "_blank" if you prefer new tab
     return (
         "<div class='card'>"