Update app.py

app.py

@@ -12,12 +12,19 @@ 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"
-# 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
+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)
+
+# Per-card backgrounds (super subtle tints)
+USE_TINTED_CARD_BG = False    # set True to try soft tint per app
 
 # ========= ASSETS =========
 HERO_LOGO = ASSETS / "AI_Suite_Log_logo.png"
@@ -31,18 +38,21 @@ APPS = [
         "url":   "https://smart-thinking-gr.hf.space/",
         "blurb": "Real-time gamma-ray log prediction.",
         "icon":  ICON_GR,
+        "tint":  "linear-gradient(180deg, rgba(14,116,144,0.05) 0%, rgba(14,116,144,0.02) 100%)",
     },
     {
         "title": "ST_Log_Sonic (Ts)",
         "url":   "https://smart-thinking-sonic-ts.hf.space",
         "blurb": "Predict shear slowness (DtS) in real time.",
         "icon":  ICON_TS,
+        "tint":  "linear-gradient(180deg, rgba(2,132,199,0.05) 0%, rgba(2,132,199,0.02) 100%)",
     },
     {
         "title": "ST_Log_Sonic (Tc)",
         "url":   "https://smart-thinking-sonic-tc.hf.space",
         "blurb": "Predict compressional slowness (DtC) in real time.",
         "icon":  ICON_TC,
+        "tint":  "linear-gradient(180deg, rgba(99,102,241,0.05) 0%, rgba(99,102,241,0.02) 100%)",
     },
 ]
 
@@ -63,14 +73,23 @@ 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 & CORE STYLES =========
+# ========= 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 {{
-    --brand: {ACCENT};
-    --brand2:{ACCENT_END};
-    --btn1:  {BTN_BRIGHT_1};
-    --btn2:  {BTN_BRIGHT_2};
+    --btn1: {BTN_DARK_1};
+    --btn2: {BTN_DARK_2};
+    --strip1: {STRIP_1};
+    --strip2: {STRIP_2};
+    --stripText: {STRIP_TEXT};
+    --cardStroke: #0B1220;  /* DARK OUTLINE */
+    --cardStrokeHover: #1E293B;
   }}
 
   html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
@@ -86,8 +105,8 @@ st.markdown(f"""
     padding: 68px 0 28px !important;
     background:
       radial-gradient(980px 460px at 50% -140px,
-        rgba(20,184,166,0.08) 0%,
-        rgba(14,116,144,0.05) 26%,
+        rgba(2,12,30,0.06) 0%,
+        rgba(2,12,30,0.04) 28%,
         rgba(255,255,255,0.98) 60%,
         rgba(255,255,255,1) 100%);
   }}
@@ -103,18 +122,17 @@ st.markdown(f"""
   /* SUITE STRIP ABOVE CARDS */
   .suite-banner {{
     display:flex; gap:14px; justify-content:center; align-items:center;
-    margin: 6px 0 14px;
-    flex-wrap: wrap;
+    margin: 8px 0 16px; flex-wrap: wrap;
   }}
   .suite-pill {{
-    background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 100%);
-    color:#fff; padding:7px 14px; border-radius:999px;
+    background: linear-gradient(90deg, var(--strip1) 0%, var(--strip2) 100%);
+    color: var(--stripText); padding:8px 14px; border-radius:999px;
     font-weight:800; letter-spacing:.25px;
-    box-shadow: 0 6px 14px rgba(14,116,144,.20);
+    box-shadow: 0 6px 14px rgba(2,12,30,.18);
     white-space: nowrap;
   }}
   .suite-tagline {{
-    color:#364152; font-weight:600; opacity:.95;
+    color:#344054; font-weight:600; opacity:.95;
   }}
 
   /* GRID (3 → 2 → 1) */
@@ -133,45 +151,41 @@ st.markdown(f"""
     .grid {{ grid-template-columns: 1fr; }}
   }}
 
-  /* CARD — premium frame + elevation */
+  /* CARD — DARK OUTLINE + premium elevation */
   .card {{
     position: relative;
     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;
+    padding: 24px 20px 20px;
+    background: var(--card-bg, #FFFFFF);
+    border: 2px solid var(--card-stroke, var(--cardStroke));
     box-shadow:
       0 10px 32px rgba(2,20,35,.10),
-      0 1px 0 rgba(255,255,255,0.9) inset;
+      0 1px 0 rgba(255,255,255,0.85) 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);
+    border-color: var(--cardStrokeHover);
     box-shadow: 0 18px 52px rgba(2,20,35,.16);
     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 */
+  /* Optional: chip inside card (off by default) */
   .suite-chip {{
     position: absolute; top: 12px; right: 12px;
-    background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 100%);
-    color:#fff; padding:6px 10px; border-radius:999px;
+    background: linear-gradient(90deg, var(--strip1) 0%, var(--strip2) 100%);
+    color: var(--stripText); padding:6px 10px; border-radius:999px;
     font-weight:700; font-size:.82rem; letter-spacing:.2px;
-    box-shadow: 0 6px 14px rgba(14,116,144,.22);
+    box-shadow: 0 6px 14px rgba(2,12,30,.18);
   }}
 
-  /* Larger round icon */
+  /* Big round icon */
   .icon-wrap {{
     width: 118px; height: 118px; border-radius: 9999px;
-    background: #F0F5F9;
+    background: #F1F5F9;
     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 10px 22px rgba(2,20,35,.07);
@@ -180,34 +194,31 @@ st.markdown(f"""
     width: 106px; height: 106px; border-radius:9999px; display:block;
   }}
 
-  /* BIGGER APP TITLE */
   .card h3 {{
-    margin: 0; font-size: 1.48rem; font-weight: 900; color:#0b1220;
+    margin: 0; font-size: 1.55rem; font-weight: 900; color:#0b1220;
     letter-spacing: .15px;
   }}
   .card p {{
     color:#566275; min-height: 40px; margin: 0 10px; font-size: 1.0rem;
   }}
 
-  /* BRIGHT CTA BUTTON */
+  /* BRIGHT, HIGH-CONTRAST BUTTON (navy) */
   .btn {{
     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;
+    border: 1px solid rgba(11,18,32,.45); text-decoration:none;
+    background: linear-gradient(180deg, var(--btn1) 0%, var(--btn2) 100%);
+    color: #ffffff; font-weight: 800; letter-spacing:.3px;
     margin: 6px auto 0;
-    box-shadow:
-      0 12px 28px rgba(37,99,235,.28),
-      inset 0 1px 0 rgba(255,255,255,.10);
+    box-shadow: 0 12px 28px rgba(11,18,32,.28), inset 0 1px 0 rgba(255,255,255,.10);
   }}
   .btn:hover {{
     filter: brightness(1.03) saturate(1.04);
     transform: translateY(-1px);
-    box-shadow: 0 16px 38px rgba(37,99,235,.36);
+    box-shadow: 0 16px 38px rgba(11,18,32,.36);
   }}
   .btn:focus {{
     outline: none;
-    box-shadow: 0 0 0 4px rgba(37,99,235,.2), 0 16px 38px rgba(37,99,235,.36);
+    box-shadow: 0 0 0 4px rgba(30,41,59,.28), 0 16px 38px rgba(11,18,32,.36);
   }}
 
   .footer {{ text-align:center; color:#3f4a5a; font-size:0.96em; margin-top: 26px; }}
@@ -219,12 +230,12 @@ 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 STRIP (with your requested line) =========
+# ========= SUITE STRIP =========
 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>
+      <span class="suite-tagline">{escape(SUITE_TAGLINE)}</span>
     </div>
     """,
     unsafe_allow_html=True,
@@ -232,12 +243,16 @@ st.markdown(
 
 # ========= 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)"
     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"  # change to "_blank" if you prefer new tab
+    target = "_self"
+    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 (
-        "<div class='card'>"
-        + f"<div class='suite-chip'>{escape(SUITE_NAME)}</div>"
+        f"<div class='card' style='{style_vars}'>"
+        + chip
         + f"<div class='icon-wrap'>{icon_html}</div>"
         + f"<h3>{escape(app['title'])}</h3>"
         + f"<p>{escape(app['blurb'])}</p>"