Update app.py

app.py

@@ -11,22 +11,49 @@ ASSETS   = BASE_DIR / "assets"
 # ========= META =========
 st.set_page_config(page_title="ST_LOG SUITE — Apps", page_icon="🧭", layout="wide")
 
-# ========= SUITE / BRAND =========
+# ========= TEXT =========
 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"
+# ========= COLOR PALETTE =========
+NAVY_900 = "#0B1220"
+NAVY_700 = "#1F2937"
+SLATE_600 = "#344054"
+PAPER_TOP = "#FFFFFF"
+PAPER_BOT = "#FBFCFE"
+GOLD      = "#EAB308"
 
-# 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
+# ========= SIZE & SPACING CONTROLS (EDIT THESE) =========
+TOP_PADDING_PX       = 40         # top padding of the whole page
+STRIP_GAP_PX         = 10         # space between pill and tagline
+STRIP_PILL_PAD_V_PX  = 8
+STRIP_PILL_PAD_H_PX  = 14
+STRIP_PILL_FONT_PX   = 16
+TAGLINE_FONT_PX      = 15
 
-# 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
+HERO_LOGO_WIDTH_PX   = 520        # width of the hero logo
+HERO_MARGIN_BOTTOM_PX= 6          # space under the hero logo
+
+GRID_GAP_PX          = 50         # space between cards
+CARD_WIDTH_PX        = 340        # card width
+CARD_RADIUS_PX       = 22
+CARD_BORDER_PX       = 2
+CARD_PAD_V_PX        = 24
+CARD_PAD_H_PX        = 20
+
+ICON_DIAM_PX         = 118        # outer circle
+ICON_IMG_PX          = 106        # image inside the circle
+
+TITLE_FONT_PX        = 25         # app title size
+BLURB_FONT_PX        = 16
+BUTTON_FONT_PX       = 16
+BUTTON_PAD_V_PX      = 12
+BUTTON_PAD_H_PX      = 20
+BUTTON_RADIUS_PX     = 14
+
+# ========= BEHAVIOR / OPTIONS =========
+SHOW_CARD_CHIP       = False      # show small suite chip inside each card?
+USE_TINTED_CARD_BG   = True       # very light background tint per card (3–5%)
 
 # ========= ASSETS =========
 HERO_LOGO = ASSETS / "AI_Suite_Log_logo.png"
@@ -60,8 +87,7 @@ APPS = [
 
 # ========= HELPERS =========
 def data_uri(path: Path) -> str | None:
-    if not path or not path.exists():
-        return None
+    if not path or not path.exists(): return None
     mime, _ = mimetypes.guess_type(path.name)
     if not mime: mime = "image/png"
     b64 = base64.b64encode(path.read_bytes()).decode("utf-8")
@@ -69,23 +95,52 @@ def data_uri(path: Path) -> str | None:
 
 def img_tag(path: Path, alt: str, cls: str = "", style: str = "") -> str:
     uri = data_uri(path)
-    if not uri:
-        return ""
+    if not uri: return ""
     cls_attr = f' class="{cls}"' if cls else ""
     style_attr = f' style="{style}"' if style else ""
     return f'<img{cls_attr}{style_attr} src="{uri}" alt="{escape(alt)}" />'
 
-# ========= STYLES =========
+# ========= CSS =========
 st.markdown(f"""
 <style>
   :root {{
-    --btn1: {BTN_DARK_1};
-    --btn2: {BTN_DARK_2};
-    --stripBg1: {STRIP_BG_1};
-    --stripBg2: {STRIP_BG_2};
-    --stripGold: {GOLD_TEXT};
-    --cardStroke: #0B1220;     /* dark outline */
-    --cardStrokeHover: #1E293B;
+    /* sizes */
+    --top-pad: {TOP_PADDING_PX}px;
+    --strip-gap: {STRIP_GAP_PX}px;
+    --strip-pill-pv: {STRIP_PILL_PAD_V_PX}px;
+    --strip-pill-ph: {STRIP_PILL_PAD_H_PX}px;
+    --strip-pill-fs: {STRIP_PILL_FONT_PX}px;
+    --tagline-fs: {TAGLINE_FONT_PX}px;
+
+    --hero-w: {HERO_LOGO_WIDTH_PX}px;
+    --hero-mb: {HERO_MARGIN_BOTTOM_PX}px;
+
+    --grid-gap: {GRID_GAP_PX}px;
+    --card-w: {CARD_WIDTH_PX}px;
+    --card-r: {CARD_RADIUS_PX}px;
+    --card-bw: {CARD_BORDER_PX}px;
+    --card-pv: {CARD_PAD_V_PX}px;
+    --card-ph: {CARD_PAD_H_PX}px;
+
+    --icon-d: {ICON_DIAM_PX}px;
+    --icon-img: {ICON_IMG_PX}px;
+
+    --title-fs: {TITLE_FONT_PX}px;
+    --blurb-fs: {BLURB_FONT_PX}px;
+    --btn-fs: {BUTTON_FONT_PX}px;
+    --btn-pv: {BUTTON_PAD_V_PX}px;
+    --btn-ph: {BUTTON_PAD_H_PX}px;
+    --btn-r: {BUTTON_RADIUS_PX}px;
+
+    /* colors */
+    --navy1: {NAVY_900};
+    --navy2: {NAVY_700};
+    --gold:  {GOLD};
+    --slate6:{SLATE_600};
+
+    /* outlines / 3D */
+    --card-stroke: {NAVY_900};
+    --card-stroke-hover: #1E293B;
   }}
 
   html, body, [data-testid="stAppViewContainer"] {{ height: 100%; }}
@@ -98,7 +153,7 @@ st.markdown(f"""
     min-height: 100vh;
     display: flex; flex-direction: column;
     gap: 14px;
-    padding: 28px 0 28px !important;  /* smaller top padding since strip sits at top-left */
+    padding: var(--top-pad) 0 28px !important;
     background:
       radial-gradient(980px 460px at 50% -140px,
         rgba(2,12,30,0.06) 0%,
@@ -109,112 +164,118 @@ st.markdown(f"""
 
   /* ===== 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;
+    display:flex; align-items:center; gap: var(--strip-gap);
+    justify-content:flex-start; flex-wrap: wrap;
   }}
   .suite-pill {{
-    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;
+    background: linear-gradient(90deg, var(--navy1) 0%, var(--navy2) 100%);
+    color: var(--gold);
+    padding: var(--strip-pill-pv) var(--strip-pill-ph);
+    border-radius: 999px;
+    font-weight: 800; letter-spacing: .25px;
+    font-size: var(--strip-pill-fs);
     box-shadow: 0 6px 14px rgba(2,12,30,.18);
     white-space: nowrap;
   }}
   .suite-tagline {{
-    color:#344054; font-weight:600; opacity:.95; white-space: nowrap;
+    color: var(--slate6); font-weight: 600; opacity: .95;
+    font-size: var(--tagline-fs);
+    white-space: nowrap;
   }}
 
   /* HERO LOGO (below the strip) */
-  .hero {{ text-align:center; margin: 0 0 6px; }}
+  .hero {{ text-align:center; margin: 0 0 var(--hero-mb); }}
   .hero img {{
-    width: 520px; max-width: 92vw; height: auto;
-    display:block; margin: 0 auto 6px;
+    width: var(--hero-w); max-width: 92vw; height: auto;
+    display:block; margin: 0 auto var(--hero-mb);
     filter: drop-shadow(0 6px 16px rgba(0,0,0,.10));
   }}
 
-  /* GRID (3 → 2 → 1) */
+  /* GRID */
   .grid {{
     display: grid;
-    grid-template-columns: repeat(3, 340px);
-    gap: 40px;
+    grid-template-columns: repeat(3, var(--card-w));
+    gap: var(--grid-gap);
     justify-content: center;
     align-items: stretch;
     margin-top: 10px;
   }}
   @media (max-width: 1120px) {{
-    .grid {{ grid-template-columns: repeat(2, 340px); gap: 28px; }}
+    .grid {{ grid-template-columns: repeat(2, var(--card-w)); gap: calc(var(--grid-gap) - 12px); }}
   }}
   @media (max-width: 720px) {{
     .grid {{ grid-template-columns: 1fr; }}
   }}
 
-  /* CARD — dark outline + premium elevation */
+  /* CARD — dark outline + premium 3D look */
   .card {{
     position: relative;
-    width: 340px;
-    border-radius:22px;
-    padding: 24px 20px 20px;
-    background: var(--card-bg, linear-gradient(#FFFFFF, #FBFCFE));
-    border: 2px solid var(--card-stroke, var(--cardStroke));
+    width: var(--card-w);
+    border-radius: var(--card-r);
+    padding: var(--card-pv) var(--card-ph);
+    background: var(--card-bg, linear-gradient(180deg, {PAPER_TOP} 0%, {PAPER_BOT} 100%));
+    border: var(--card-bw) solid var(--card-stroke);
+    /* 3D: dual drop shadows + subtle internal highlights */
     box-shadow:
-      0 10px 32px rgba(2,20,35,.10),
-      0 1px 0 rgba(255,255,255,0.85) inset;
+      0 14px 32px rgba(2,20,35,.12),
+      0 1px 0 rgba(255,255,255,0.90) inset,
+      0 -1px 10px rgba(255,255,255,0.40) 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);
+    transform: translateY(-6px) scale(1.01);
+    border-color: var(--card-stroke-hover);
+    box-shadow:
+      0 22px 56px rgba(2,20,35,.18),
+      0 1px 0 rgba(255,255,255,0.92) inset,
+      0 -1px 12px rgba(255,255,255,0.45) inset;
+    filter: saturate(1.03);
   }}
 
-  /* (optional) small chip inside each card */
+  /* (optional) chip inside each card */
   .suite-chip {{
     position: absolute; top: 12px; right: 12px;
-    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;
+    background: linear-gradient(90deg, var(--navy1) 0%, var(--navy2) 100%);
+    color: var(--gold); padding: 6px 10px; border-radius: 999px;
+    font-weight: 700; font-size: 13px; letter-spacing: .2px;
     box-shadow: 0 6px 14px rgba(2,12,30,.18);
   }}
 
-  /* Big round icon */
+  /* Icon circle */
   .icon-wrap {{
-    width: 118px; height: 118px; border-radius: 9999px;
+    width: var(--icon-d); height: var(--icon-d); border-radius: 9999px;
     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);
   }}
   .icon-wrap img {{
-    width: 106px; height: 106px; border-radius:9999px; display:block;
+    width: var(--icon-img); height: var(--icon-img); border-radius:9999px; display:block;
   }}
 
   .card h3 {{
-    margin: 0; font-size: 1.55rem; font-weight: 900; color:#0b1220;
+    margin: 0; font-size: var(--title-fs); font-weight: 900; color:#0b1220;
     letter-spacing: .15px;
   }}
   .card p {{
-    color:#566275; min-height: 40px; margin: 0 10px; font-size: 1.0rem;
+    color:#566275; min-height: 40px; margin: 0 10px; font-size: var(--blurb-fs);
   }}
 
-  /* BUTTON (navy) */
+  /* Button (navy) */
   .btn {{
-    display:inline-block; padding:12px 20px; border-radius:14px;
+    display:inline-block; padding: var(--btn-pv) var(--btn-ph); border-radius: var(--btn-r);
     border: 1px solid rgba(11,18,32,.45);
-    background: linear-gradient(180deg, var(--btn1) 0%, var(--btn2) 100%);
-    font-weight: 800; letter-spacing:.3px;
+    background: linear-gradient(180deg, var(--navy1) 0%, var(--navy2) 100%);
+    font-weight: 800; letter-spacing:.3px; font-size: var(--btn-fs);
     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;
+    color: #ffffff !important; text-decoration: none !important;
   }}
-
   .btn:hover {{
     filter: brightness(1.03) saturate(1.04);
     transform: translateY(-1px);
@@ -230,7 +291,7 @@ st.markdown(f"""
 </style>
 """, unsafe_allow_html=True)
 
-# ========= TOP-LEFT STRIP (then hero below) =========
+# ===== TOP-LEFT STRIP (then hero below) =====
 st.markdown(
     f"""
     <div class="suite-row">
@@ -241,19 +302,19 @@ st.markdown(
     unsafe_allow_html=True,
 )
 
-# ========= HERO (logo below the strip) =========
+# ===== 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 =========
+# ===== 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 f"linear-gradient(180deg, {PAPER_TOP} 0%, {PAPER_BOT} 100%)"
     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 ""
+                        style=f"width:{ICON_IMG_PX}px;height:{ICON_IMG_PX}px;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 ""
-    style_vars = f"--card-bg:{tint}; --card-stroke: var(--cardStroke);"
+    style_vars = f"--card-bg:{tint};"
     return (
         f"<div class='card' style='{style_vars}'>"
         + chip
@@ -267,7 +328,7 @@ def app_card(app: dict) -> str:
 cards_html = "".join(app_card(a) for a in APPS)
 st.markdown(f"<div class='grid'>{cards_html}</div>", unsafe_allow_html=True)
 
-# ========= FOOTER =========
+# ===== FOOTER =====
 st.markdown(
     """
     <hr>