bank landing: compact GOA shop sample box
This commit is contained in:
parent
ee12ac06dc
commit
6cb4064a3a
1 changed files with 117 additions and 0 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue