bank landing: compact GOA shop sample box

This commit is contained in:
Hernâni Marques 2026-07-10 19:00:00 +02:00
parent ee12ac06dc
commit 6cb4064a3a
No known key found for this signature in database

View file

@ -445,6 +445,82 @@
text-align: center;
}
footer a { color: #e8c878; }
/* Compact GOA shop teaser */
.shop-box {
background: rgba(18, 28, 28, 0.55);
border: 1px solid rgba(232, 168, 56, 0.32);
border-radius: 16px;
padding: 1rem 1.05rem 1.1rem;
margin: 0 0 1.35rem;
}
.shop-box h2 {
margin: 0 0 0.25rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
text-align: center;
}
.shop-box .shop-lead {
margin: 0 0 0.75rem;
text-align: center;
font-size: 0.88rem;
color: var(--muted);
}
.shop-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
@media (min-width: 420px) {
.shop-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.shop-item {
background: rgba(0, 0, 0, 0.28);
border: 1px solid rgba(232, 168, 56, 0.18);
border-radius: 12px;
padding: 0.55rem 0.5rem 0.6rem;
text-align: center;
min-width: 0;
}
.shop-item .emoji {
display: block;
font-size: 1.35rem;
line-height: 1.2;
margin-bottom: 0.2rem;
}
.shop-item .name {
display: block;
font-size: 0.78rem;
font-weight: 700;
color: #fff6e8;
line-height: 1.25;
}
.shop-item .price {
display: block;
margin-top: 0.2rem;
font-size: 0.8rem;
font-weight: 750;
color: #5eead4;
font-variant-numeric: tabular-nums;
}
.shop-foot {
margin: 0.75rem 0 0;
text-align: center;
}
.shop-foot a {
display: inline-block;
text-decoration: none;
font-size: 0.85rem;
font-weight: 700;
color: #1a1208;
background: linear-gradient(135deg, #f0c86a, #c47a18);
padding: 0.45rem 0.9rem;
border-radius: 10px;
}
.shop-foot a:hover { filter: brightness(1.06); }
</style>
<base href="/intro/" />
<script src="/intro/qrcode.min.js"></script>
@ -459,6 +535,47 @@
</p>
</header>
<!-- ========== GOA shop samples ========== -->
<aside class="shop-box" aria-labelledby="shop-title">
<h2 id="shop-title">GOA shop · samples</h2>
<p class="shop-lead">Spend GOA at the merchant — a few examples</p>
<div class="shop-grid">
<div class="shop-item">
<span class="emoji" aria-hidden="true">🪐</span>
<span class="name">Orbit sticker pack</span>
<span class="price">GOA:2</span>
</div>
<div class="shop-item">
<span class="emoji" aria-hidden="true"></span>
<span class="name">Nebula coffee</span>
<span class="price">GOA:5</span>
</div>
<div class="shop-item">
<span class="emoji" aria-hidden="true">🎧</span>
<span class="name">Voidwave playlist</span>
<span class="price">GOA:8</span>
</div>
<div class="shop-item">
<span class="emoji" aria-hidden="true">🧢</span>
<span class="name">Comet cap</span>
<span class="price">GOA:15</span>
</div>
<div class="shop-item">
<span class="emoji" aria-hidden="true">🛸</span>
<span class="name">Shuttle day pass</span>
<span class="price">GOA:25</span>
</div>
<div class="shop-item">
<span class="emoji" aria-hidden="true">📡</span>
<span class="name">Beacon badge</span>
<span class="price">GOA:3</span>
</div>
</div>
<p class="shop-foot">
<a href="https://taler.hacktivism.ch/intro/">Merchant · taler.hacktivism.ch →</a>
</p>
</aside>
<!-- ========== LIVE STATS ========== -->
<section class="stats" id="stats" aria-labelledby="stats-title" hidden>
<h2 id="stats-title">GOA flow</h2>