designed home page

streamlit_hf/.streamlit/config.toml

@@ -1,7 +1,9 @@
 [theme]
 primaryColor = "#2563eb"
-backgroundColor = "#f8fafc"
-secondaryBackgroundColor = "#ffffff"
+# Match Plotly plotly_white paper (#fff) and CSS shell; avoids grey main area behind charts.
+backgroundColor = "#ffffff"
+# Sidebar / secondary surfaces: slightly tinted vs main canvas
+secondaryBackgroundColor = "#f1f5fb"
 textColor = "#0f172a"
 font = "sans-serif"
 

streamlit_hf/app.py

@@ -1,5 +1,5 @@
 """
-FateFormer: interactive analysis explorer.
+FateFormer Explorer: interactive analysis hub.
 Run from repository root: PYTHONPATH=. streamlit run streamlit_hf/app.py
 """
 

streamlit_hf/home.py

@@ -1,58 +1,208 @@
-"""Landing content for the FateFormer Streamlit hub."""
+"""Landing page for the FateFormer Explorer Streamlit hub."""
 
 from __future__ import annotations
 
+import html
 import sys
 from pathlib import Path
 
+import numpy as np
 import streamlit as st
 
 _REPO = Path(__file__).resolve().parents[1]
 if str(_REPO) not in sys.path:
     sys.path.insert(0, str(_REPO))
 
+from streamlit_hf.lib import io
+from streamlit_hf.lib import plots
 from streamlit_hf.lib import ui
 
 _CACHE = Path(__file__).resolve().parent / "cache"
-_HAS_CACHE = (_CACHE / "latent_umap.pkl").is_file() and (_CACHE / "df_features.parquet").is_file()
+
+_APP_NAME = "FateFormer Explorer"
+_HERO_EMOJI = "\U0001f9ec"  # DNA (matches HF Space card tone)
+_HOME_PIE_TOP_N = 100
+_HOME_RANK_TOP_N = 15
+
+_VALIDATION_ROC_AUC = 0.93
+
+_UMAP_HOME_TITLE = "Validation latent space (UMAP)"
+
+_APP_SUBTITLE = (
+    "A multimodal transformer-based model that jointly encodes RNA, chromatin accessibility, and metabolic flux "
+    "to predict single-cell fate, with interpretable attention and latent-shift rankings across omics layers."
+)
+
+_BIOLOGY_CONTEXT_MARKDOWN = """
+**At a glance**
+
+- **Biological setting:** **FateFormer** models **direct reprogramming** from mouse embryonic fibroblasts (**MEFs**) to induced endoderm progenitors (**iEPs**), combining **transcriptome (scRNA-seq)**, **chromatin (scATAC-seq)**, and **genome-scale metabolic flux** so fate is not inferred from RNA alone; epigenetic and metabolic context matter.
+- **Data & labels:** Trained on a **large sparse-modality** atlas (**>150,000** cells); **2,110** early cells carry **CellTag-Multi** clonal fate tags, the same experimental labels used to colour validation cells in **UMAP** views here.
+- **Model design:** A **transformer** learns **shared representations** across modalities, handles **missing modalities** and **scarce fate labels**, and ties early transcription, chromatin accessibility, and metabolic activity to **later lineage outcomes**, going beyond RNA-only views of reprogramming.
+"""
+
+
+def _cache_ok() -> bool:
+    return (_CACHE / "latent_umap.pkl").is_file() and (_CACHE / "df_features.parquet").is_file()
+
+
+def _downsample_latent_df(df, max_points: int = 6500, seed: int = 42):
+    if len(df) <= max_points:
+        return df
+    return df.sample(n=max_points, random_state=seed)
+
 
 ui.inject_app_styles()
+ui.inject_home_landing_styles()
+
+st.markdown(
+    f"""<div class="ff-hero"><div class="ff-hero-inner"><div class="ff-hero-text">
+<div class="ff-hero-title-row">
+<span class="ff-hero-emoji" aria-hidden="true">{_HERO_EMOJI}</span>
+<h1>{html.escape(_APP_NAME)}</h1>
+</div>
+<p class="ff-hero-sub">{html.escape(_APP_SUBTITLE)}</p>
+</div></div></div>""",
+    unsafe_allow_html=True,
+)
 
-st.title("FateFormer: interactive analysis")
-st.caption("Choose a workspace below or use the sidebar. All views use the same precomputed validation results.")
+bundle = io.load_latent_bundle()
+df_features = io.load_df_features()
+samples = io.load_samples_df()
+ready = _cache_ok()
 
-if not _HAS_CACHE:
+if not ready:
     st.warning(
-        "This deployment does not have precomputed results yet. Ask the maintainer to publish data, then reload."
+        "Precomputed validation caches are incomplete or missing. "
+        "Publish `latent_umap.pkl` and `df_features.parquet` under `streamlit_hf/cache/`, then reload."
     )
+
+# --- Metrics strip ---
+mcols = st.columns(4)
+if bundle is not None:
+    n_cells = len(bundle["umap_x"])
+    with mcols[0]:
+        st.metric("Validation cells", f"{n_cells:,}")
+    with mcols[1]:
+        st.metric("Validation ROC-AUC", f"{_VALIDATION_ROC_AUC:.2f}")
+else:
+    with mcols[0]:
+        st.metric("Validation cells", "n/a")
+    with mcols[1]:
+        st.metric("Validation ROC-AUC", "n/a")
+
+if df_features is not None:
+    nf = len(df_features)
+    n_mod = df_features["modality"].nunique() if "modality" in df_features.columns else 0
+    with mcols[2]:
+        st.metric("Ranked features", f"{nf:,}")
+    with mcols[3]:
+        st.metric("Modalities", str(n_mod) if n_mod else "n/a")
 else:
-    st.success("Precomputed results are available. After a server-side update, refresh the browser to load new plots.")
+    with mcols[2]:
+        st.metric("Ranked features", "n/a")
+    with mcols[3]:
+        st.metric("Modalities", "n/a")
 
-st.subheader("Open a page")
-r1a, r1b, r1c = st.columns(3)
-with r1a:
+# --- Workspace cards (directly under metrics); hidden spans pair with CSS for per-card colours ---
+_NAV_SLOT = '<span id="ff-nav-slot-{}" class="ff-nav-slot-marker" aria-hidden="true"></span>'
+c1, c2, c3, c4 = st.columns(4, gap="small")
+with c1:
+    st.markdown(_NAV_SLOT.format(1), unsafe_allow_html=True)
     with st.container(border=True):
         st.page_link("pages/1_Single_Cell_Explorer.py", label="Single-Cell Explorer", icon=":material/scatter_plot:")
-        st.caption("Latent UMAP: colour by fate, prediction, fold, batch, modalities, or dominant fate emphasis.")
-with r1b:
+        st.caption("UMAP, filters, and per-cell inspection: fate, prediction, fold, batch, modalities.")
+with c2:
+    st.markdown(_NAV_SLOT.format(2), unsafe_allow_html=True)
     with st.container(border=True):
         st.page_link("pages/2_Feature_insights.py", label="Feature Insights", icon=":material/analytics:")
-        st.caption("Shift and attention rankings, cohort comparisons, and full feature tables.")
-with r1c:
+        st.caption("Shift probes, attention rollout, cohort views, and full multimodal tables.")
+with c3:
+    st.markdown(_NAV_SLOT.format(3), unsafe_allow_html=True)
     with st.container(border=True):
         st.page_link("pages/3_Flux_analysis.py", label="Flux Analysis", icon=":material/account_tree:")
         st.caption("Reaction pathways, differential flux, rankings, and model metadata.")
-r2a, _, _ = st.columns(3)
-with r2a:
+with c4:
+    st.markdown(_NAV_SLOT.format(4), unsafe_allow_html=True)
     with st.container(border=True):
         st.page_link(
             "pages/4_Gene_expression_analysis.py",
             label="Gene Expression & TF Activity",
             icon=":material/genetics:",
         )
-        st.caption("Pathway enrichment, motif activity, and gene / motif tables.")
+        st.caption("Pathway enrichment, motif activity, and searchable gene tables.")
 
-st.markdown("---")
-st.markdown(
-    "**Tips:** use chart toolbars for pan/zoom and lasso selection where offered. Tables support search and column sort from the header row."
-)
+st.markdown('<p class="ff-section-label">Overview</p>', unsafe_allow_html=True)
+
+# --- Snapshot charts ---
+if bundle is not None and df_features is not None:
+    latent_df = io.latent_join_samples(bundle, samples)
+    plot_umap = _downsample_latent_df(latent_df)
+    row1_story, row1_umap = st.columns([0.38, 0.62], gap="large")
+    with row1_story:
+        st.markdown(_BIOLOGY_CONTEXT_MARKDOWN)
+    with row1_umap:
+        st.caption("Each point is a cell · colours = experimental fate labels · validation split")
+        fig_u = plots.latent_scatter(
+            plot_umap,
+            "label",
+            title=_UMAP_HOME_TITLE,
+            width=780,
+            height=440,
+            marker_size=5.2,
+            marker_opacity=0.72,
+        )
+        fig_u.update_layout(margin=dict(l=20, r=8, t=52, b=20), title_font_size=15)
+        st.plotly_chart(
+            fig_u,
+            width="stretch",
+            config={"displayModeBar": True, "displaylogo": False, "modeBarButtonsToRemove": ["lasso2d", "select2d"]},
+        )
+
+    st.caption("Global shift and attention · top features by importance (min-max scaled within each bar chart) · modality mix as donut (top by mean rank).")
+    fig_g = plots.global_rank_triple_panel(
+        df_features,
+        top_n=_HOME_RANK_TOP_N,
+        top_n_pie=_HOME_PIE_TOP_N,
+        chart_outline=False,
+        modality_mix_hole=0.66,
+    )
+    fig_g.update_layout(title_text="", margin=dict(l=36, r=36, t=48, b=100))
+    fig_g.update_annotations(font_size=12)
+    st.plotly_chart(
+        fig_g,
+        width="stretch",
+        config={"displayModeBar": False, "displaylogo": False},
+    )
+elif bundle is not None:
+    latent_df = io.latent_join_samples(bundle, samples)
+    plot_umap = _downsample_latent_df(latent_df)
+    u_story, u_map = st.columns([0.38, 0.62], gap="large")
+    with u_story:
+        st.markdown(_BIOLOGY_CONTEXT_MARKDOWN)
+    with u_map:
+        st.caption("Feature ranking cache unavailable · UMAP only")
+        fig_u = plots.latent_scatter(
+            plot_umap,
+            "label",
+            title=_UMAP_HOME_TITLE,
+            width=820,
+            height=480,
+            marker_size=5.5,
+            marker_opacity=0.72,
+        )
+        fig_u.update_layout(margin=dict(l=24, r=12, t=52, b=24), title_font_size=15)
+        st.plotly_chart(fig_u, width="stretch", config={"displayModeBar": True, "displaylogo": False})
+elif df_features is not None:
+    st.caption("Feature ranking overview · latent UMAP unavailable")
+    fig_g = plots.global_rank_triple_panel(
+        df_features,
+        top_n=_HOME_RANK_TOP_N,
+        top_n_pie=_HOME_PIE_TOP_N,
+        chart_outline=False,
+        modality_mix_hole=0.66,
+    )
+    fig_g.update_layout(title_text="", margin=dict(l=36, r=36, t=48, b=100))
+    st.plotly_chart(fig_g, width="stretch", config={"displayModeBar": False, "displaylogo": False})
+else:
+    st.info("Charts will appear here once latent and feature caches are available.")

streamlit_hf/lib/plots.py

@@ -14,6 +14,8 @@ from streamlit_hf.lib.reactions import normalize_reaction_key
 
 # Matches Streamlit theme primary + slate text; used across Plotly layouts.
 PLOT_FONT = dict(family="Inter, system-ui, sans-serif", size=12)
+# Same as app / plotly_white paper so figures are not tinted vs the page.
+PAGE_BG = "#ffffff"
 
 PALETTE = (
     "#2563eb",
@@ -148,15 +150,17 @@ def latent_scatter(
     else:
         color_arg = color_col
 
+    # Plotly Express turns title="" into a visible "undefined" title in some versions; omit when empty.
     common = dict(
         x="umap_x",
         y="umap_y",
         hover_data=hover_data,
         labels=labels_map,
-        title=title,
         width=width,
         height=height,
     )
+    if title:
+        common["title"] = title
     if continuous:
         fig = px.scatter(
             d,
@@ -174,15 +178,20 @@ def latent_scatter(
     fig.update_traces(
         marker=dict(size=marker_size, opacity=marker_opacity, line=dict(width=0.25, color="rgba(255,255,255,0.4)"))
     )
+    top_margin = 56 if title else 28
     fig.update_layout(
         template="plotly_white",
         font=PLOT_FONT,
         title_font_size=16,
-        margin=dict(l=28, r=20, t=56, b=28),
+        margin=dict(l=28, r=20, t=top_margin, b=28),
         legend_title_text="",
         xaxis_title="",
         yaxis_title="",
+        paper_bgcolor=PAGE_BG,
+        plot_bgcolor=PAGE_BG,
     )
+    if not title:
+        fig.update_layout(title=None)
     fig.update_xaxes(showticklabels=False, showgrid=True, gridcolor="rgba(0,0,0,0.06)", zeroline=False)
     fig.update_yaxes(showticklabels=False, showgrid=True, gridcolor="rgba(0,0,0,0.06)", zeroline=False)
     return fig
@@ -262,7 +271,7 @@ def _truncate_label(s: str, max_len: int = 36) -> str:
 def joint_shift_attention_top_features(df_mod, modality: str, top_n: int):
     """
     Top features by mean_rank (lowest = strongest joint shift+attention ranking).
-    Shift and attention importances are min–max scaled within this top-N slice for side-by-side comparison.
+    Shift and attention importances are min-max scaled within this top-N slice for side-by-side comparison.
     """
     need = ("mean_rank", "importance_shift", "importance_att", "feature")
     if not all(c in df_mod.columns for c in need):
@@ -512,10 +521,20 @@ def attention_cohort_view(
     return fig
 
 
-def global_rank_triple_panel(df_features, top_n: int = 20, top_n_pie: int = 100):
+def global_rank_triple_panel(
+    df_features,
+    top_n: int = 20,
+    top_n_pie: int = 100,
+    *,
+    chart_outline: bool = True,
+    modality_mix_hole: float = 0.0,
+):
     """
-    Global top-N by latent-shift and by attention (min–max scaled), plus pie of modality mix
+    Global top-N by latent-shift and by attention (min-max scaled), plus pie or donut of modality mix
     among the top `top_n_pie` features by mean rank.
+
+    Set ``chart_outline=False`` for a flatter look (e.g. home page); Feature Insights keeps outlines by default.
+    Set ``modality_mix_hole`` in (0, 1), e.g. ``0.66``, for a donut instead of a full pie (e.g. home page).
     """
     d = df_features.copy()
     for col in ("importance_shift", "importance_att"):
@@ -542,13 +561,16 @@ def global_rank_triple_panel(df_features, top_n: int = 20, top_n_pie: int = 100)
         horizontal_spacing=0.06,
     )
 
+    bar_outline = dict(color="#1e293b", width=1.2) if chart_outline else dict(width=0)
+    pie_line = dict(color="#1e293b", width=1.2) if chart_outline else dict(width=0)
+    leg_line = dict(width=1.2, color="#1e293b") if chart_outline else dict(width=0)
     fig.add_trace(
         go.Bar(
             x=shift_top["importance_shift_norm"],
             y=shift_top["feature"],
             orientation="h",
             marker_color=[MODALITY_COLOR.get(m, "#64748b") for m in shift_top["modality"]],
-            marker_line=dict(color="rgba(15,23,42,0.12)", width=1),
+            marker_line=bar_outline,
             showlegend=False,
             hovertemplate="%{y}<br>scaled shift: %{x:.3f}<extra></extra>",
         ),
@@ -561,7 +583,7 @@ def global_rank_triple_panel(df_features, top_n: int = 20, top_n_pie: int = 100)
             y=att_top["feature"],
             orientation="h",
             marker_color=[MODALITY_COLOR.get(m, "#64748b") for m in att_top["modality"]],
-            marker_line=dict(color="rgba(15,23,42,0.12)", width=1),
+            marker_line=bar_outline,
             showlegend=False,
             hovertemplate="%{y}<br>scaled attention: %{x:.3f}<extra></extra>",
         ),
@@ -575,23 +597,47 @@ def global_rank_triple_panel(df_features, top_n: int = 20, top_n_pie: int = 100)
     if sum(pie_vals) == 0:
         pie_vals = [1, 1, 1]
 
+    _hole = float(modality_mix_hole) if modality_mix_hole and modality_mix_hole > 0 else 0.0
+    # Narrow third subplot: "auto" avoids clipped outside labels on donuts.
+    _pie_textpos = "auto"
     fig.add_trace(
         go.Pie(
             labels=pie_labels,
             values=pie_vals,
             marker=dict(
                 colors=[MODALITY_PIE_COLOR.get(l, "#64748b") for l in pie_labels],
-                line=dict(color="#1e293b", width=1.2),
+                line=pie_line,
             ),
             textinfo="label+percent",
             textfont_size=12,
-            hole=0.0,
+            textposition=_pie_textpos,
+            hole=_hole,
             showlegend=False,
         ),
         row=1,
         col=3,
     )
 
+    # Modality legend (bar colours + pie segment colours): invisible markers in first subplot only.
+    for _name, _col in (
+        ("RNA (transcriptome)", MODALITY_PIE_COLOR["RNA"]),
+        ("ATAC (chromatin)", MODALITY_PIE_COLOR["ATAC"]),
+        ("Flux (metabolism)", MODALITY_PIE_COLOR["Flux"]),
+    ):
+        fig.add_trace(
+            go.Scatter(
+                x=[None],
+                y=[None],
+                mode="markers",
+                marker=dict(size=12, color=_col, symbol="square", line=leg_line),
+                name=_name,
+                showlegend=True,
+                hoverinfo="skip",
+            ),
+            row=1,
+            col=1,
+        )
+
     fig.update_xaxes(title_text="Min-max scaled shift", row=1, col=1)
     fig.update_xaxes(title_text="Min-max scaled attention", row=1, col=2)
     fig.update_yaxes(autorange="reversed", row=1, col=1)
@@ -603,9 +649,22 @@ def global_rank_triple_panel(df_features, top_n: int = 20, top_n_pie: int = 100)
         font=PLOT_FONT,
         height=h,
         width=min(1280, 400 + top_n * 14),
-        margin=dict(l=40, r=40, t=80, b=40),
+        margin=dict(l=40, r=40, t=80, b=108),
+        paper_bgcolor=PAGE_BG,
+        plot_bgcolor=PAGE_BG,
         title_text="Global feature ranking (all modalities)",
         title_x=0.5,
+        legend=dict(
+            title=dict(text="Modality colour key", font=dict(size=11, family=PLOT_FONT["family"])),
+            orientation="h",
+            yanchor="top",
+            y=-0.14,
+            xanchor="center",
+            x=0.5,
+            font=dict(size=11, family=PLOT_FONT["family"]),
+            traceorder="normal",
+            itemsizing="constant",
+        ),
     )
     return fig
 
@@ -900,7 +959,7 @@ def pathway_enrichment_bubble_panel(
             title=dict(text=title, x=0.5, xanchor="center"),
             annotations=[
                 dict(
-                    text="No significant pathways (Benjamini–Hochberg q < 0.05)",
+                    text="No significant pathways (Benjamini-Hochberg q < 0.05)",
                     xref="paper",
                     yref="paper",
                     x=0.5,
@@ -1165,12 +1224,12 @@ def pathway_gene_membership_heatmap(
     fig.update_layout(
         template="plotly_white",
         font=PLOT_FONT,
-        title=dict(text="Pathway–gene membership", x=0.5, xanchor="center"),
+        title=dict(text="Pathway-gene membership", x=0.5, xanchor="center"),
         height=h,
         width=w,
         margin=dict(l=4, r=168, t=52, b=108),
-        paper_bgcolor="rgba(0,0,0,0)",
-        plot_bgcolor="#f4f6f9",
+        paper_bgcolor=PAGE_BG,
+        plot_bgcolor=PAGE_BG,
     )
 
     if use_spine:

streamlit_hf/lib/ui.py

@@ -6,10 +6,55 @@ import streamlit as st
 
 
 def inject_app_styles() -> None:
-    """Panel labels and home cards; safe to call on every rerun (small CSS block)."""
+    """Panel labels, page background, and shared chrome (all pages)."""
     st.markdown(
         """
 <style>
+/*
+ * Full page: white (#fff, same as Plotly plotly_white paper) + subtle dot texture only.
+ * Line grid is reserved for the home banner (.ff-hero), not the app shell.
+ */
+.stApp {
+    background-color: #ffffff !important;
+    background-image: radial-gradient(rgba(15, 23, 42, 0.055) 1px, transparent 1px) !important;
+    background-size: 20px 20px !important;
+    background-attachment: fixed !important;
+}
+[data-testid="stAppViewContainer"] .block-container {
+    background-color: transparent !important;
+}
+[data-testid="stHeader"] {
+    background-color: #ffffff !important;
+    background-image: radial-gradient(rgba(15, 23, 42, 0.055) 1px, transparent 1px) !important;
+    background-size: 20px 20px !important;
+    border-bottom: 1px solid rgba(226, 232, 240, 0.95);
+    backdrop-filter: none;
+}
+/* Plotly embed: match page paper colour (avoids grey Streamlit chrome around charts) */
+[data-testid="stPlotlyChart"],
+[data-testid="stPlotlyChart"] > div,
+[data-testid="stPlotlyChart"] .js-plotly-plot,
+[data-testid="stPlotlyChart"] .plotly-graph-div {
+    background-color: #ffffff !important;
+}
+/* Sidebar: distinct from main white canvas (theme secondary + light edge) */
+[data-testid="stSidebar"] {
+    background-color: #f1f5fb !important;
+    background-image: radial-gradient(rgba(15, 23, 42, 0.045) 1px, transparent 1px) !important;
+    background-size: 18px 18px !important;
+    border-right: 1px solid rgba(148, 163, 184, 0.35) !important;
+}
+[data-testid="stSidebar"] [data-testid="stSidebarNavLink"] p,
+[data-testid="stSidebar"] [data-testid="stSidebarNavLink"] span {
+    font-size: 1.05rem !important;
+    line-height: 1.35 !important;
+}
+/* st.title() headings in main column (hero title keeps its own rule below on home) */
+section[data-testid="stMain"] h1 {
+    font-size: clamp(1.95rem, 3.2vw, 2.35rem) !important;
+    font-weight: 700 !important;
+    letter-spacing: -0.02em !important;
+}
 .latent-panel-title {
     font-size: 0.82rem;
     font-weight: 600;
@@ -22,3 +67,157 @@ def inject_app_styles() -> None:
 """,
         unsafe_allow_html=True,
     )
+
+
+def inject_home_landing_styles() -> None:
+    """Hero, nav cards, and section labels (home page only)."""
+    st.markdown(
+        """
+<style>
+.ff-hero {
+    position: relative;
+    overflow: hidden;
+    border-radius: 16px;
+    padding: 1.5rem 1.85rem 1.45rem;
+    margin-bottom: 1.35rem;
+    border: 1px solid rgba(129, 140, 248, 0.45);
+    box-shadow:
+        0 4px 24px rgba(30, 27, 75, 0.18),
+        inset 0 1px 0 rgba(255, 255, 255, 0.12);
+    background:
+        linear-gradient(118deg, rgba(15, 23, 42, 0.97) 0%, rgba(49, 46, 129, 0.94) 38%, rgba(67, 56, 202, 0.92) 72%, rgba(79, 70, 229, 0.88) 100%);
+}
+/* Banner: visible line grid (Shape2Force-style) over the gradient */
+.ff-hero::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    opacity: 0.55;
+    pointer-events: none;
+    background-image:
+        linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px);
+    background-size: 20px 20px;
+}
+.ff-hero::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: radial-gradient(ellipse 85% 65% at 18% 0%, rgba(129, 140, 248, 0.35) 0%, transparent 55%);
+}
+.ff-hero-inner {
+    position: relative;
+    z-index: 1;
+}
+.ff-hero-title-row {
+    display: flex;
+    align-items: center;
+    gap: 0.55rem;
+    flex-wrap: wrap;
+    margin-bottom: 0.4rem;
+}
+.ff-hero-emoji {
+    font-size: clamp(1.75rem, 4.5vw, 2.35rem);
+    line-height: 1;
+    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
+    user-select: none;
+}
+/* Narrower hero title so it does not inherit the large st.title size above */
+section[data-testid="stMain"] .ff-hero .ff-hero-text h1 {
+    font-size: clamp(1.65rem, 4vw, 2.1rem) !important;
+    font-weight: 700 !important;
+    margin: 0 !important;
+    color: #f8fafc !important;
+    letter-spacing: -0.03em !important;
+    line-height: 1.15 !important;
+    text-shadow: 0 1px 18px rgba(0, 0, 0, 0.25) !important;
+}
+.ff-hero-sub {
+    margin: 0;
+    max-width: 52rem;
+    font-size: 0.98rem;
+    line-height: 1.55;
+    color: rgba(226, 232, 240, 0.95);
+    font-weight: 400;
+}
+.ff-section-label {
+    font-size: 0.72rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: #64748b;
+    margin: 0 0 0.35rem 0;
+}
+.ff-nav-slot-marker {
+    display: block !important;
+    width: 0 !important;
+    height: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+    clip-path: inset(50%) !important;
+}
+/*
+ * Home workspace nav cards: each column renders span#ff-nav-slot-N, then the bordered tile.
+ * Target the bordered wrapper as the next sibling block after the markdown that contains the span.
+ */
+section[data-testid="stMain"] *:has(span#ff-nav-slot-1) + * [data-testid="stVerticalBlockBorderWrapper"],
+section[data-testid="stMain"] *:has(span#ff-nav-slot-1) + * + * [data-testid="stVerticalBlockBorderWrapper"],
+section[data-testid="stMain"] *:has(span#ff-nav-slot-2) + * [data-testid="stVerticalBlockBorderWrapper"],
+section[data-testid="stMain"] *:has(span#ff-nav-slot-2) + * + * [data-testid="stVerticalBlockBorderWrapper"],
+section[data-testid="stMain"] *:has(span#ff-nav-slot-3) + * [data-testid="stVerticalBlockBorderWrapper"],
+section[data-testid="stMain"] *:has(span#ff-nav-slot-3) + * + * [data-testid="stVerticalBlockBorderWrapper"],
+section[data-testid="stMain"] *:has(span#ff-nav-slot-4) + * [data-testid="stVerticalBlockBorderWrapper"],
+section[data-testid="stMain"] *:has(span#ff-nav-slot-4) + * + * [data-testid="stVerticalBlockBorderWrapper"] {
+    border-radius: 14px !important;
+    transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
+}
+section[data-testid="stMain"] *:has(span#ff-nav-slot-1) + * [data-testid="stVerticalBlockBorderWrapper"],
+section[data-testid="stMain"] *:has(span#ff-nav-slot-1) + * + * [data-testid="stVerticalBlockBorderWrapper"] {
+    background: linear-gradient(152deg, #eff6ff 0%, #ffffff 52%, #dbeafe 100%) !important;
+    border: 1px solid rgba(37, 99, 235, 0.38) !important;
+    box-shadow: 0 2px 14px rgba(37, 99, 235, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
+}
+section[data-testid="stMain"] *:has(span#ff-nav-slot-1) + * [data-testid="stVerticalBlockBorderWrapper"]:hover,
+section[data-testid="stMain"] *:has(span#ff-nav-slot-1) + * + * [data-testid="stVerticalBlockBorderWrapper"]:hover {
+    border-color: rgba(29, 78, 216, 0.55) !important;
+    box-shadow: 0 6px 22px rgba(37, 99, 235, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
+}
+section[data-testid="stMain"] *:has(span#ff-nav-slot-2) + * [data-testid="stVerticalBlockBorderWrapper"],
+section[data-testid="stMain"] *:has(span#ff-nav-slot-2) + * + * [data-testid="stVerticalBlockBorderWrapper"] {
+    background: linear-gradient(152deg, #fff7ed 0%, #ffffff 52%, #ffedd5 100%) !important;
+    border: 1px solid rgba(234, 88, 12, 0.35) !important;
+    box-shadow: 0 2px 14px rgba(234, 88, 12, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
+}
+section[data-testid="stMain"] *:has(span#ff-nav-slot-2) + * [data-testid="stVerticalBlockBorderWrapper"]:hover,
+section[data-testid="stMain"] *:has(span#ff-nav-slot-2) + * + * [data-testid="stVerticalBlockBorderWrapper"]:hover {
+    border-color: rgba(194, 65, 12, 0.5) !important;
+    box-shadow: 0 6px 22px rgba(234, 88, 12, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
+}
+section[data-testid="stMain"] *:has(span#ff-nav-slot-3) + * [data-testid="stVerticalBlockBorderWrapper"],
+section[data-testid="stMain"] *:has(span#ff-nav-slot-3) + * + * [data-testid="stVerticalBlockBorderWrapper"] {
+    background: linear-gradient(152deg, #ecfdf5 0%, #ffffff 52%, #d1fae5 100%) !important;
+    border: 1px solid rgba(5, 150, 105, 0.36) !important;
+    box-shadow: 0 2px 14px rgba(5, 150, 105, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
+}
+section[data-testid="stMain"] *:has(span#ff-nav-slot-3) + * [data-testid="stVerticalBlockBorderWrapper"]:hover,
+section[data-testid="stMain"] *:has(span#ff-nav-slot-3) + * + * [data-testid="stVerticalBlockBorderWrapper"]:hover {
+    border-color: rgba(4, 120, 87, 0.52) !important;
+    box-shadow: 0 6px 22px rgba(5, 150, 105, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
+}
+section[data-testid="stMain"] *:has(span#ff-nav-slot-4) + * [data-testid="stVerticalBlockBorderWrapper"],
+section[data-testid="stMain"] *:has(span#ff-nav-slot-4) + * + * [data-testid="stVerticalBlockBorderWrapper"] {
+    background: linear-gradient(152deg, #f5f3ff 0%, #ffffff 52%, #ede9fe 100%) !important;
+    border: 1px solid rgba(124, 58, 237, 0.34) !important;
+    box-shadow: 0 2px 14px rgba(124, 58, 237, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
+}
+section[data-testid="stMain"] *:has(span#ff-nav-slot-4) + * [data-testid="stVerticalBlockBorderWrapper"]:hover,
+section[data-testid="stMain"] *:has(span#ff-nav-slot-4) + * + * [data-testid="stVerticalBlockBorderWrapper"]:hover {
+    border-color: rgba(109, 40, 217, 0.5) !important;
+    box-shadow: 0 6px 22px rgba(124, 58, 237, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
+}
+</style>
+""",
+        unsafe_allow_html=True,
+    )

streamlit_hf/pages/4_Gene_expression_analysis.py

@@ -33,7 +33,7 @@ if rna.empty and atac.empty:
     st.stop()
 
 st.caption(
-    "Pathway enrichment (Reactome / KEGG) and a pathway–gene map; chromVAR-style motif deviations and activity by "
+    "Pathway enrichment (Reactome / KEGG) and a pathway-gene map; chromVAR-style motif deviations and activity by "
     "fate; sortable gene and motif tables. Use **Feature Insights** for global shift and attention rankings across modalities."
 )
 
@@ -68,7 +68,7 @@ tab_path, tab_motif, tab_gene_tbl, tab_motif_tbl = st.tabs(
 
 with tab_path:
     st.caption(
-        "Over-representation of Reactome and KEGG pathways (Benjamini–Hochberg *q* < 0.05). "
+        "Over-representation of Reactome and KEGG pathways (Benjamini-Hochberg *q* < 0.05). "
         "The lower panel maps leading genes to pathways; empty grid positions are left clear."
     )
     raw = pathway_data.load_de_re_tsv()
@@ -86,7 +86,7 @@ with tab_path:
             st.plotly_chart(
                 plots.pathway_enrichment_bubble_panel(
                     mde,
-                    "Pathway enrichment — dead-end",
+                    "Pathway enrichment: dead-end",
                     show_colorbar=True,
                     layout_height=bubble_h,
                 ),
@@ -96,7 +96,7 @@ with tab_path:
             st.plotly_chart(
                 plots.pathway_enrichment_bubble_panel(
                     mre,
-                    "Pathway enrichment — reprogramming",
+                    "Pathway enrichment: reprogramming",
                     show_colorbar=True,
                     layout_height=bubble_h,
                 ),
@@ -104,7 +104,7 @@ with tab_path:
             )
         hm = pathway_data.build_merged_pathway_membership(de_all, re_all)
         if hm is None:
-            st.info("No pathway–gene matrix could be built from the current enrichment results.")
+            st.info("No pathway-gene matrix could be built from the current enrichment results.")
         else:
             z, ylabs, xlabs = hm
             st.plotly_chart(plots.pathway_gene_membership_heatmap(z, ylabs, xlabs), width="stretch")