From b7d837196226edfc89639701108e9c7f999957f0 Mon Sep 17 00:00:00 2001
From: bitcoinafterlife <info@bitcoin-after.life>
Date: Thu, 29 Oct 2026 16:14:50 +0100
Subject: [PATCH] Homepage: lighter hero and guides band

- Guides card: white band under the hero, no frame around the card,
  soft shadow on the cover image only.
- Hero: new opt-in .hero-light class; the two notes lose their white
  boxes and the four stats lose their grey tiles. Existing rules untouched.
---
 index.html | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 1ebaef8..e0bca31 100644
--- a/index.html
+++ b/index.html
@@ -399,13 +399,25 @@ footer .built{font-size:13px;color:var(--muted);margin-top:8px}
 }
 @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
 :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
+/* ---------- Lighter hero (owner, 2026-10-29) ----------
+   Opt-in via the .hero-light class on header.hero: the two notes lose their
+   white boxes and the four stats lose their grey tiles, so the top of the page
+   has fewer framed blocks. Existing hero rules are left untouched. */
+header.hero.hero-light .fiat-bar{background:transparent;border:0;border-left:2px solid var(--accent);
+  border-radius:0;box-shadow:none;padding:2px 0 2px 14px}
+header.hero.hero-light .fiat-bar.latest-post{margin-top:14px}
+header.hero.hero-light .hero-card{box-shadow:var(--shadow)}
+header.hero.hero-light .hero-card .stats{gap:0 18px;padding-top:14px}
+header.hero.hero-light .hero-card .stat{background:transparent;border:0;border-top:1px solid var(--line);
+  border-radius:0;padding:12px 4px 6px}
 /* ---------- Animated guides card (under the hero) ----------
    Links to the two narrated animations in /how-it-works/. Only the cover image
    is loaded here (lazy); the pages and their audio load only when opened. */
-.how-strip{padding:34px 0 40px}
+.how-strip{padding:40px 0 44px;background:var(--panel);border-bottom:1px solid var(--line)}
+/* white band, no frame around the card: breaks the long light-grey block under the hero (owner, 2026-10-29) */
 .how-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;
-  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
-.how-cover{position:relative;display:block;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
+  background:transparent;border:0;padding:0}
+.how-cover{position:relative;display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
 .how-cover img{display:block;width:100%;height:auto}
 .how-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
   background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;
@@ -418,7 +430,7 @@ footer .built{font-size:13px;color:var(--muted);margin-top:8px}
 .how-pills span{font-family:var(--mono);font-size:12px;color:var(--accent);background:var(--accent-soft);
   border:1px solid #cfe0fb;border-radius:999px;padding:3px 10px}
 @media (max-width:760px){
-  .how-card{grid-template-columns:1fr;gap:18px;padding:14px}
+  .how-card{grid-template-columns:1fr;gap:18px}
   .how-text h2{font-size:23px}
 }
 </style>
@@ -533,7 +545,7 @@ footer .built{font-size:13px;color:var(--muted);margin-top:8px}
 </div>
 
 <!-- ===== Hero ===== -->
-<header class="hero" id="top">
+<header class="hero hero-light" id="top">
   <div class="wrap">
     <div>
       <span class="badge">● Open-source · Bitcoin-only · No custodian</span>