bitcoinafterlife/bal-website
1
0
Fork 2
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Homepage: lighter hero and guides band

Browse Source 
- 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.
This commit is contained in:
bitcoinafterlife
2026-10-29 16:14:50 +01:00
parent f7955800f6
commit b7d8371962
1 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

@@ -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}} @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px} :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) ---------- /* ---------- Animated guides card (under the hero) ----------
Links to the two narrated animations in /how-it-works/. Only the cover image 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. */ 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; .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)} background:transparent;border:0;padding:0}
.how-cover{position:relative;display:block;border-radius:8px;overflow:hidden;border:1px solid var(--line)} .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-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%; .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; 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); .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} border:1px solid #cfe0fb;border-radius:999px;padding:3px 10px}
@media (max-width:760px){ @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} .how-text h2{font-size:23px}
} }
</style> </style>
@@ -533,7 +545,7 @@ footer .built{font-size:13px;color:var(--muted);margin-top:8px}
</div> </div>
<!-- ===== Hero ===== --> <!-- ===== Hero ===== -->
<header class="hero" id="top"> <header class="hero hero-light" id="top">
<div class="wrap"> <div class="wrap">
<div> <div>
<span class="badge">● Open-source · Bitcoin-only · No custodian</span> <span class="badge">● Open-source · Bitcoin-only · No custodian</span>