From 93bd94500718ec2cb516442de20c858e86c3ab78 Mon Sep 17 00:00:00 2001 From: bitcoinafterlife Date: Sat, 19 Sep 2026 15:58:39 +0200 Subject: [PATCH] Replace hero card logo with the inheritance-tree illustration The BAL logo now sits at the base of the circuit tree (in place of the generic Bitcoin coin), the art fills the card width, and the card's lower edge lines up with the text column. Co-Authored-By: Claude Opus 4.8 --- index.html | 19 ++++++++++++++----- pitura/bal-hero-tree.webp | Bin 0 -> 30280 bytes 2 files changed, 14 insertions(+), 5 deletions(-) create mode 100644 pitura/bal-hero-tree.webp diff --git a/index.html b/index.html index 4bda3c2..cb313cd 100644 --- a/index.html +++ b/index.html @@ -99,7 +99,8 @@ section{scroll-margin-top:72px} /* ---------- Hero ---------- */ header.hero{padding:56px 0 40px;border-bottom:1px solid var(--line);background: radial-gradient(900px 300px at 80% -40%,var(--accent-soft),transparent 70%);} -.hero .wrap{display:grid;grid-template-columns:1.4fr .9fr;gap:40px;align-items:center} +/* stretch (not center) so the card's lower edge lines up with the text column */ +.hero .wrap{display:grid;grid-template-columns:1.4fr .9fr;gap:40px;align-items:stretch} .hero .badge{ display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600; color:var(--accent);background:var(--accent-soft);border:1px solid #cfe0fb; @@ -137,14 +138,21 @@ header.hero{padding:56px 0 40px;border-bottom:1px solid var(--line);background: .fiat-bar.latest-post{margin-top:11px} .fiat-bar.latest-post .btc{font-size:17px;color:var(--accent)} +/* + Flex column so the stats pin to the bottom (margin-top:auto), keeping the + card's lower edge level with the text column whatever height the art takes. +*/ .hero-card{ background:var(--panel);border:1px solid var(--line);border-radius:14px; - box-shadow:var(--shadow-lg);padding:30px 28px;text-align:center; + box-shadow:var(--shadow-lg);padding:28px;text-align:center; + display:flex;flex-direction:column; +} +.hero-card .hero-art{ + width:100%;height:auto;margin:0 auto 16px;display:block;border-radius:12px; } -.hero-card img{width:138px;height:138px;margin:0 auto 14px;display:block} .hero-card .name{font-family:var(--display);font-weight:600;font-size:18px} .hero-card .tag{color:var(--muted);font-size:13px;margin-top:2px} -.hero-card .stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px} +.hero-card .stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:20px} .hero-card .stat{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 8px} .hero-card .stat .n{font-family:var(--display);font-weight:600;font-size:20px;line-height:1} .hero-card .stat .l{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px} @@ -531,7 +539,8 @@ footer .built{font-size:13px;color:var(--muted);margin-top:8px}