[FIX] welcome: update intro text for target audience, style 'Let's get started...' with gradient, add page bottom padding globally

app.py

@@ -58,7 +58,7 @@ def load_css(file_path):
 css_path = pathlib.Path("assets/styles.css")
 load_css(css_path)
 
-st.markdown('<h1 class="custom-title">CRRA <span class="crra-hl">Toolkit</span>: CDR Portfolio Optimization</h1>', unsafe_allow_html=True)
+st.markdown('<h1 class="custom-title">CRRA <span class="crra-hl-toolkit">Toolkit</span>: CDR Portfolio Optimization</h1>', unsafe_allow_html=True)
 
 with st.sidebar:
     selected = option_menu(

assets/styles.css

@@ -38,7 +38,12 @@ input, textarea, select,
     font-family: var(--font) !important;
 }
 
-/* ── 3. Sidebar ────────────────────────────────────────────── */
+/* ── 3. Page bottom padding (avoids "stuck" feel on Hugging Face) ── */
+.block-container {
+    padding-bottom: 6rem !important;
+}
+
+/* ── 3b. Sidebar ───────────────────────────────────────────── */
 .stSidebar {
     background: var(--off-white) !important;
 }
@@ -77,12 +82,18 @@ h1.custom-title {
     font-style: italic;
     line-height: 0.95em;
 }
+.crra-hl-toolkit{
+    background: linear-gradient(90deg, var(--yellow) 0%, var(--green-light) 99%);
+    -webkit-text-fill-color: transparent;
+    padding-right: 6px;
+    background-clip: text;
+}
 
 .crra-hl {
-    background: linear-gradient(90deg, var(--yellow) 0%, var(--green-light) 99%);
+    background: linear-gradient(90deg, var(--yellow) 0%, var(--green-light) 100%);
     -webkit-text-fill-color: transparent;
     background-clip: text;
-    padding-right: 6px;
+    font-size: 2.0vw !important;
 }
 
 .crra-heading {
@@ -624,6 +635,12 @@ h3.wt-2 { color: var(--green-dark) !important; border-left-color: var(--green-da
 h3.wt-3 { color: var(--green) !important;      border-left-color: var(--green);      }
 h3.wt-4 { color: var(--green-light) !important; border-left-color: var(--green-light); }
 
+p.wt-cta {
+    font-weight: 600 !important;
+    margin-top: 28px !important;
+    font-style: italic !important;
+}
+
 /* ── 19. Tabs ────────────────────────────────────────────────── */
 [data-baseweb="tab-list"] {
     gap: 4px;

tabs/tab0_welcome.py

@@ -13,10 +13,10 @@ def render_tab():
 
     st.markdown("""
     <div class='custom-corps'>
-    This tool helps you exploring how to optimize your carbon dioxide removal portfolios by adjusting resource usage and constraints.
+    This tool helps project teams working on a CRRA and the CDR-curious explore how to optimize carbon dioxide removal portfolios by adjusting resource usage and constraints.
     </div>
-    <br>  
-    """, unsafe_allow_html=True)   
+    <br>
+    """, unsafe_allow_html=True)
 
     st.warning("""
     While the tool offers multiple customization parameters and allows you to iterate on the results, it can never capture the full nuance and specificity of the resources and their availability in every single country.\n
@@ -49,6 +49,7 @@ def render_tab():
         <li><b>Scenario comparison</b>: compare different scenarios based on the optimization results.</li>
     </ol>
 
-    Let’s get started! Use the side tabs to navigate through the sections.
+    <p class="wt-cta"><span class="crra-hl">Let’s get started!</span> Use the side tabs to navigate through the sections.</p>
     </div>
+    <div style="height: 4rem;"></div>
     """, unsafe_allow_html=True)