From 82ab02f3f786be313283baa64d0e6bf63d110e45 Mon Sep 17 00:00:00 2001
From: Anders Alm <anders@wau.co>
Date: Mon, 2 Nov 2026 11:53:21 -0500
Subject: [PATCH] website: install heading sits inside its card with the card's
 padding

The heading and its Development preview label sat outside the card, flush
with its edge, while the card's text is inset. They now form the card's
first row with the same side padding, and the label stays on one line and
wraps below the title on a phone.
---
 website/elastos/index.html | 2 +-
 website/elastos/site.css   | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/website/elastos/index.html b/website/elastos/index.html
index 60a4f4182..87a4c3586 100644
--- a/website/elastos/index.html
+++ b/website/elastos/index.html
@@ -50,8 +50,8 @@ <h1 id="hero-title">ElastOS</h1>
       </section>
 
       <section class="install-section" id="install" aria-labelledby="install-title">
-        <div class="install-heading"><h2 id="install-title">Install on your Mac or Linux machine</h2><span class="install-version">Development preview</span></div>
         <div class="install-card">
+          <div class="install-heading"><h2 id="install-title">Install on your Mac or Linux machine</h2><span class="install-version">Development preview</span></div>
           <div class="install-body">
             <p class="install-caption">One command for macOS on Apple silicon and Linux (x86_64 or ARM64). It installs ElastOS, sets up Home and opens it. Home runs while that terminal is open; to open it again later, run <code>elastos home --browser</code>.</p>
             <div class="command-box">
diff --git a/website/elastos/site.css b/website/elastos/site.css
index 05760fdaa..ec386e20d 100644
--- a/website/elastos/site.css
+++ b/website/elastos/site.css
@@ -68,11 +68,11 @@ h1 { font-size: clamp(64px, 7vw, 88px); line-height: 1.08; letter-spacing: -.065
 .text-link span { margin-left: 8px; }
 .action-note { font-size: 12px; color: var(--soft); margin-top: 14px; }
 .install-section { max-width: 790px; margin: 0 auto 64px; scroll-margin-top: 24px; }
-.install-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 3px 14px; }
+.install-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 22px 24px 0; }
 .install-heading h2 { font-size: 16px; letter-spacing: 0; }
-.install-version { font-size: 12px; color: var(--soft); }
+.install-version { font-size: 12px; color: var(--soft); white-space: nowrap; }
 .install-card { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, #17191d, #101114); box-shadow: 0 14px 50px #0005; }
-.install-body { padding: 24px; }
+.install-body { padding: 14px 24px 24px; }
 .install-caption { font-size: 14px; margin-bottom: 14px; color: #c4c7cd; }
 .command-box { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; background: #050608; border: 1px solid #35373c; border-radius: 10px; }
 .prompt { color: var(--soft); font: 14px ui-monospace, monospace; }
@@ -113,7 +113,8 @@ footer > div a { color: var(--muted); font-size: 12px; text-decoration: none; }
   .hero { padding-top: 48px; }
   .release-badge { margin-left: auto; }
   .header-home { display: none; }
-  .install-body { padding: 18px; }
+  .install-heading { padding: 18px 18px 0; }
+  .install-body { padding: 12px 18px 18px; }
   .command-box { flex-wrap: wrap; gap: 8px; padding: 12px; }
   .command-box pre { font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
   .copy-button { margin-left: auto; }