Terms: animated listing timeline first, sections reordered, navigation buttons

- Animated SVG timeline of the listing lifecycle (pay, listed, renewal window every year, renewed / removed) opens the Terms page; plays when scrolled into view, Replay button, four-step strip kept on small screens
- Sections reordered Listing, Order, Contact, Changes and renumbered; cross-references updated, legal text unchanged
- Home hero: 'How to get listed' button to the Terms page; Terms: 'Back to the server list' button and footer link
This commit is contained in:
2026-11-06 17:59:33 +01:00
parent 6046f8fba9
commit e39d56b756
2 changed files with 216 additions and 27 deletions

View File

@@ -78,6 +78,15 @@ header.hero{padding:48px 0 28px;border-bottom:1px solid var(--line)}
}
.brand .sub{color:var(--muted);font-size:14px;margin-top:2px}
.hero-stats{display:flex;gap:28px}
/* Right side of the hero: the stats and the way to the Terms page (how to get
listed, yearly fee). Added 2026-11-06: the page was hard to find. */
.hero-right{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap}
.hero-cta{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:10px;
background:var(--accent);color:#fff;text-decoration:none;font-weight:600;font-size:14px;line-height:1.15;
box-shadow:0 4px 14px rgba(45,108,223,.25)}
.hero-cta:hover{filter:brightness(1.06)}
.hero-cta svg{width:22px;height:22px;flex:none}
.hero-cta small{display:block;font-weight:400;font-size:12px;opacity:.85;margin-top:2px}
.stat .n{font-family:var(--display);font-size:26px;font-weight:600;line-height:1}
.stat .l{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px}
@@ -331,9 +340,12 @@ footer a{color:var(--accent);text-decoration:none}
<div class="sub"><a href="https://bitcoin-after.life" target="_blank" rel="noopener">Bitcoin After Life</a> · Will-executor node leaderboard</div>
</div>
</div>
<div class="hero-stats">
<div class="stat"><div class="n" id="s-online">0</div><div class="l">Online</div></div>
<div class="stat"><div class="n" id="s-total">0</div><div class="l">Servers</div></div>
<div class="hero-right">
<div class="hero-stats">
<div class="stat"><div class="n" id="s-online">0</div><div class="l">Online</div></div>
<div class="stat"><div class="n" id="s-total">0</div><div class="l">Servers</div></div>
</div>
<a class="hero-cta" href="/terms.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/><path d="M8 13h8M8 17h5"/></svg><span>How to get listed<small>Terms &amp; yearly fee</small></span></a>
</div>
</div>
</header>