site: Anthemus opens as a landing + sub-nav floats free (no box)

- /anthemus/index.html was a 41-line meta-refresh redirect to the
  wallet kiosk that never got the wallet up, so Anthemus tab appeared
  broken. Replace it with the full landing content (previously only
  reachable at /anthemus/about/), with ../ paths adjusted for the new
  depth. The nav aria-current now sits on /anthemus/ itself.
- shared-header.css: drop body { padding-right: 200px } so the
  sub-nav never shifts main-page body text. Strip the sub-nav
  background / border / border-radius / box-shadow on both the
  desktop right-side rail and the mobile top-band — links float
  directly on the dark sky. Mobile keeps a soft blur-only backdrop
  so links stay readable when content scrolls under them.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Local Dev 2026-10-22 03:20:20 +03:00
parent 8c214c89cb
commit 3fddd71acc
2 changed files with 301 additions and 44 deletions

View file

@ -3,39 +3,298 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Anthemus DEX</title>
<meta name="description" content="Anthemus — a decentralized exchange on Bitcoin Cash. Order book + AMM over one covenant engine. Trade EUR / USD, BCH / USD, ASM / ASM2 with a taker fee, deposit any stablecoin from any chain into unified USD.">
<meta property="og:title" content="Anthemus DEX">
<meta property="og:description" content="A decentralized exchange on Bitcoin Cash — order book + AMM over one covenant engine.">
<link rel="icon" href="../favicon.ico">
<!-- Redirect immediately to the wallet build in DEX-only kiosk mode. The
wallet's index.html detects ?kiosk=anthemus and renders just the
Exchange — no wallet chrome. Server-side we set canonical to keep
search engines pointed here. -->
<meta http-equiv="refresh" content="0; url=../wallet/?kiosk=anthemus">
<link rel="canonical" href="https://silentmode.st/deviant/anthemus/">
<script>
(function () {
try { location.replace('../wallet/?kiosk=anthemus'); } catch (e) {}
})();
</script>
<title>Anthemus — Decentralized Exchange</title>
<meta name="description" content="Anthemus — a decentralized exchange on Bitcoin Cash. Order book + AMM over one engine, plus a Deposit rail into unified USD.">
<base href="./">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=DM+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../cosmo-genesis.css">
<link rel="stylesheet" href="../shared-theme.css">
<link rel="stylesheet" href="../shared-header.css">
<style>
html, body { height: 100%; margin: 0; background: #060b12; color: #e8ecf5;
font-family: 'JetBrains Mono', ui-monospace, monospace; }
.anx-fallback { position: fixed; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; padding: 24px; gap: 12px; text-align: center; }
.anx-fallback a { color: #b8ff2e; }
:root { --maxw: 1180px; --gutter: 40px; }
body { overflow-x: hidden; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; }
section { position: relative; z-index: 1; }
.hero { padding: 32px 0 72px; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--acid); border: 1px solid rgba(214,255,61,.35); border-radius: 100px; padding: 7px 15px; margin-bottom: 30px; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 8px var(--acid-glow); }
h1.hero-title { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(38px, 6vw, 84px); line-height: 1.05; letter-spacing: -.02em; color: var(--ink-bright); margin: 0 auto 24px; max-width: 22ch; }
h1.hero-title .glow { color: var(--acid); text-shadow: 0 0 10px var(--acid-glow), 0 0 34px var(--acid-halo); }
h1.hero-title .glow-blue { color: #2f7fe0; text-shadow: 0 0 10px rgba(47,127,224,.6), 0 0 34px rgba(47,127,224,.34); }
.hero-canonical { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 3px; text-transform: uppercase; color: var(--acid); margin: 0 0 22px; }
.hero-sub { font-family: 'Fraunces', serif; font-weight: 300; font-style: italic; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.5; color: var(--ink-soft); max-width: 62ch; margin: 0 auto 40px; }
.hero-cta { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn-lg { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 16px 30px; border-radius: 12px; cursor: pointer; transition: transform .3s ease, box-shadow .3s; text-decoration: none; display: inline-block; }
.btn-lg.primary { color: var(--sky-deep); background: var(--acid); border: 0; box-shadow: 0 0 22px var(--acid-halo); font-weight: 600; }
.btn-lg.primary:hover { transform: translateY(-3px); box-shadow: 0 0 32px var(--acid-glow); }
.btn-lg.ghost { color: var(--ink-bright); background: transparent; border: 1px solid var(--border-strong, rgba(255,255,255,0.12)); }
.btn-lg.ghost:hover { border-color: rgba(214,255,61,.5); color: var(--acid); }
/* Trading-floor hero visual — three columns hinting at book depth. */
.book { position: relative; width: min(560px, 84vw); margin: 56px auto 0; padding: 24px; background: linear-gradient(180deg, rgba(19,26,42,0.55), rgba(10,15,28,0.55)); border: 1px solid var(--border); border-radius: 18px; text-align: left; }
.book-head { display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.book-rows { display: flex; flex-direction: column; gap: 4px; }
.brow { display: grid; grid-template-columns: 60px 1fr 80px; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 12px; padding: 3px 0; }
.brow .p { color: var(--ink-bright); }
.brow .bar { height: 6px; border-radius: 3px; }
.brow.ask .bar { background: linear-gradient(90deg, rgba(255,80,80,0.6), rgba(255,80,80,0.2)); }
.brow.bid .bar { background: linear-gradient(270deg, rgba(214,255,61,0.6), rgba(214,255,61,0.2)); }
.brow .q { color: var(--muted); text-align: right; }
.book-spread { text-align: center; padding: 10px 0; margin: 8px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--acid); }
.sec { padding: 84px 0; border-top: 1px solid var(--border); }
.sec-h { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -.015em; color: var(--ink-bright); max-width: 24ch; margin-bottom: 18px; }
.sec-lead { font-family: 'Fraunces', serif; font-weight: 300; font-size: 18px; line-height: 1.6; color: var(--ink-soft); max-width: 62ch; }
.sec-lead em { color: var(--acid); font-style: italic; }
.sec-lead strong { color: var(--ink-bright); }
.sec-label { margin-bottom: 16px; }
/* Interface trio — Swap / Exchange / Deposit — each a real card. */
.interfaces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.interface { background: var(--surface-1, rgba(19,26,42,0.5)); border: 1px solid var(--border); border-radius: 18px; padding: 30px 26px; transition: border-color .3s, transform .3s ease; }
.interface:hover { border-color: rgba(214,255,61,.3); transform: translateY(-4px); }
.interface .ico { font-family: 'JetBrains Mono', monospace; font-size: 22px; color: var(--acid); margin-bottom: 18px; text-shadow: 0 0 10px var(--acid-halo); }
.interface h3 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 21px; color: var(--ink-bright); margin: 0 0 10px; }
.interface p { font-family: 'Fraunces', serif; font-weight: 300; font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.interface p em { color: var(--acid); font-style: italic; }
.interface .tag { display: inline-block; margin-top: 14px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 4px 10px; border: 1px solid var(--border); border-radius: 100px; }
/* Two-column explainers */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; margin-top: 44px; }
.two-card { background: var(--surface-1, rgba(19,26,42,0.5)); border: 1px solid var(--border); border-radius: 18px; padding: 30px 28px; }
.two-card h4 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; color: var(--ink-bright); margin: 0 0 12px; }
.two-card p { font-family: 'Fraunces', serif; font-weight: 300; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 10px; }
.two-card .strong { color: var(--ink-bright); }
.two-card .badge { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--acid); letter-spacing: 0.14em; text-transform: uppercase; }
/* Chain-row: shows all chains that feed the Deposit rail */
.chains { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 44px; }
.chip { padding: 8px 14px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-soft); background: var(--surface-1, rgba(19,26,42,0.5)); border: 1px solid var(--border); border-radius: 100px; }
.chip .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--acid); margin-right: 8px; vertical-align: middle; box-shadow: 0 0 6px var(--acid-halo); }
/* Under Agora — sibling callout */
.siblings { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.sibling { display: block; background: var(--surface-1, rgba(19,26,42,0.5)); border: 1px solid var(--border); border-radius: 15px; padding: 26px 24px; text-decoration: none; color: inherit; transition: border-color .3s, transform .2s ease; }
.sibling:hover { border-color: rgba(214,255,61,.35); transform: translateY(-2px); }
.sibling .s-name { font-family: 'Fraunces', serif; font-weight: 500; font-size: 24px; color: var(--ink-bright); margin: 0 0 6px; letter-spacing: -.02em; }
.sibling .s-sub { font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--acid); margin: 0 0 12px; }
.sibling p { font-family: 'Fraunces', serif; font-weight: 300; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.cta-band { text-align: center; padding: 96px 0; border-top: 1px solid var(--border); }
.cta-band h2 { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(30px, 4.4vw, 54px); color: var(--ink-bright); letter-spacing: -.02em; margin: 0 0 18px; }
.cta-band p { font-family: 'Fraunces', serif; font-weight: 300; font-size: 18px; color: var(--ink-soft); max-width: 52ch; margin: 0 auto 36px; }
.page-footer { border-top: 1px solid var(--border); padding: 44px 0; margin-top: 0; }
.foot-in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.foot-links { display: flex; gap: 26px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.foot-links a { color: var(--ink-soft); text-decoration: none; }
.foot-links a:hover { color: var(--acid); }
.foot-note { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); }
@media (max-width: 900px) {
:root { --gutter: 22px; }
.interfaces, .two, .siblings { grid-template-columns: 1fr; }
.hero { padding: 64px 0 56px; }
.sec { padding: 60px 0; }
}
@media (max-width: 560px) {
.hero-cta { flex-direction: column; }
.btn-lg { width: 100%; }
}
</style>
</head>
<body>
<div class="anx-fallback">
<div>Loading Anthemus DEX…</div>
<div style="opacity:.55; font-size:13px;">
If nothing happens, <a href="../wallet/?kiosk=anthemus">tap here</a>.
</div>
<div style="opacity:.45; font-size:11px;">
<a href="./about/">About</a>
<div class="site-header">
<div class="topbar">
<a href="/" class="wordmark">Deviant</a>
<div class="topbar-right">
<nav class="nav" aria-label="Primary">
<a href="/artemision/">Artemision</a>
<a href="/katalogos/">Katalogos</a>
<a href="/potidaea/">Potidaea</a>
<a href="/anthemus/" aria-current="page">Anthemus</a>
<a href="https://navigate.st/bns/potidaea.asm/app.html">Wallet</a>
</nav>
</div>
</div>
</div>
<nav class="sub-nav" aria-label="Anthemus sections">
<div class="sub-nav-in">
<a class="sub-nav-cta" href="https://navigate.st/bns/potidaea.asm/app.html">Launch app →</a>
<div class="sub-nav-links">
<a href="#what">What it is</a>
<a href="#interfaces">Interfaces</a>
<a href="#unified-usd">Unified USD</a>
<a href="#under-agora">Under Agora</a>
</div>
<a class="sub-nav-top" href="#top" aria-label="Back to top">↑</a>
</div>
</nav>
<section class="hero" id="top">
<div class="wrap">
<h1 class="hero-title"><span class="glow">Anthemus</span></h1>
<p class="hero-sub">
Decentralized exchange on Bitcoin Cash — order book plus AMM over one engine.
Nostro Vostro transactions in unified USD. The venue where the market <em>emerges</em>.
</p>
<div class="hero-cta">
<a class="btn-lg primary" href="https://navigate.st/bns/potidaea.asm/app.html">Launch Anthemus →</a>
<a class="btn-lg ghost" href="#interfaces">See the interfaces</a>
</div>
<div class="book" aria-hidden="true">
<div class="book-head"><span>EUR / USD</span><span>·</span><span>0.5% slip</span></div>
<div class="book-rows">
<div class="brow ask"><span class="p">1.0904</span><div class="bar" style="width:38%"></div><span class="q">12,400</span></div>
<div class="brow ask"><span class="p">1.0902</span><div class="bar" style="width:56%"></div><span class="q">28,150</span></div>
<div class="brow ask"><span class="p">1.0900</span><div class="bar" style="width:78%"></div><span class="q">61,020</span></div>
</div>
<div class="book-spread">↕ spread 0.0001 · mid 1.0899</div>
<div class="book-rows">
<div class="brow bid"><span class="p">1.0898</span><div class="bar" style="width:82%"></div><span class="q">72,900</span></div>
<div class="brow bid"><span class="p">1.0896</span><div class="bar" style="width:48%"></div><span class="q">24,300</span></div>
<div class="brow bid"><span class="p">1.0894</span><div class="bar" style="width:30%"></div><span class="q">9,150</span></div>
</div>
</div>
</div>
</section>
<section class="sec" id="what">
<div class="wrap">
<div class="sec-label">The venue</div>
<div class="sec-h">Two interfaces, one engine.</div>
<p class="sec-lead">
<strong>Swap</strong> automates order-making — you pick a pair and an amount; the AMM is a
maker on the same book. <strong>Exchange</strong> is the pro grid — chart, book, order form —
for anyone who wants control. Both hit the same liquidity. There is no separate "AMM pool"
living in isolation.
</p>
</div>
</section>
<section class="sec" id="interfaces">
<div class="wrap">
<div class="sec-label">— The Anthemus interface</div>
<div class="sec-h">Swap · Exchange · Deposit.</div>
<div class="interfaces">
<div class="interface">
<div class="ico">⇅</div>
<h3>Swap</h3>
<p>One-click trade against pooled liquidity — the AMM is a maker on the book, so a market swap always fills. Price impact and curve fee <em>disclosed separately</em>, never folded into "rate".</p>
<span class="tag">Curve fee 0.30% → LPs</span>
</div>
<div class="interface">
<div class="ico">▤</div>
<h3>Exchange</h3>
<p>Pro grid — chart on the left, book and order form on the right. Limit orders, historical fills, full-depth market data. For anyone who wants to name their price.</p>
<span class="tag">Order-book + limit</span>
</div>
<div class="interface">
<div class="ico">↓</div>
<h3>Deposit</h3>
<p>Bring assets in from Ethereum, Tron, Solana, Bitcoin — the correspondent locks on the source chain and mints on BCH. What lands is <em>unified USD</em> on Bitcoin Cash. One balance, one currency.</p>
<span class="tag">Cross-chain rail</span>
</div>
</div>
</div>
</section>
<section class="sec" id="unified-usd">
<div class="wrap">
<div class="sec-label">Unified USD · no stablecoin pair matrix</div>
<div class="sec-h">One dollar, from every chain.</div>
<p class="sec-lead">
Stablecoins are not <em>traded</em> here. USDT · USDC · PYUSD from any supported chain enter
through the Deposit rail and become one <strong>unified USD</strong> on Bitcoin Cash. The
pair matrix collapses: instead of USDT/USDC/PYUSD/EURT/EURC/… pairs, Anthemus lists
<strong>USD-denominated pairs only</strong> — EUR/USD, BCH/USD, and so on.
</p>
<div class="two">
<div class="two-card">
<div class="badge">The old way</div>
<h4>N × N stablecoin pairs</h4>
<p>Every DEX today lists USDT/USDC, USDT/DAI, USDC/PYUSD, etc. — thin books, drifting pegs, curve fees on <em>every</em> swap between them. Users pay to correct the pool's opinion of "one dollar".</p>
</div>
<div class="two-card">
<div class="badge">Anthemus</div>
<h4>One USD, N sources</h4>
<p>Deposit resolves the "which stablecoin" question <span class="strong">at ingest</span>. On the trading floor, you hold USD. Pairs are asset/USD, EUR/USD, BCH/USD — no cross-stable churn.</p>
</div>
</div>
<div class="chains">
<span class="chip"><span class="dot"></span>Bitcoin Cash · native</span>
<span class="chip"><span class="dot"></span>Ethereum · USDT · USDC · PYUSD</span>
<span class="chip"><span class="dot"></span>Tron · USDT</span>
<span class="chip"><span class="dot"></span>Solana · USDC · USDT</span>
<span class="chip"><span class="dot"></span>Bitcoin · BTC via HTLC</span>
</div>
</div>
</section>
<section class="sec" id="under-agora">
<div class="wrap">
<div class="sec-label">— Under Agora</div>
<div class="sec-h">The trading floor. Not the only floor.</div>
<p class="sec-lead">
Anthemus is one of the two markets Agora holds. The other is <strong>Potidaea</strong> — a
counterparty-free automated swap mechanism for backed assets, priced by the covenant itself.
Different engines, complementary asset classes.
</p>
<div class="siblings">
<a class="sibling" href="/potidaea/">
<div class="s-sub">Counterparty-free ASM</div>
<div class="s-name">Potidaea</div>
<p>Swaps priced by the mechanism — the Universal Exchange Rate, fixed by consensus. No pool, no oracle, no counterparty. For backed assets (MBAs) where the covenant can price the swap alone.</p>
</a>
<a class="sibling" href="/agora/">
<div class="s-sub">The market hub</div>
<div class="s-name">Agora</div>
<p>The hub that holds both markets. Read why they coexist — the split between covenant-priced and participant-priced, and which assets live on which floor.</p>
</a>
</div>
</div>
</section>
<section class="cta-band">
<div class="wrap">
<h2>Trade what a mechanism can't price.</h2>
<p>Order book, AMM, cross-chain deposit — one venue. Unified USD as the settlement currency, backed by the BCH base layer.</p>
<div class="hero-cta">
<a class="btn-lg primary" href="https://navigate.st/bns/potidaea.asm/app.html">Launch Anthemus →</a>
<a class="btn-lg ghost" href="#top">Back to top</a>
</div>
</div>
</section>
<footer class="page-footer">
<div class="foot-in">
<div class="foot-note">Anthemus · Decentralized Exchange on Bitcoin Cash · chipnet beta</div>
<div class="foot-links">
<a href="#interfaces">Interfaces</a>
<a href="#unified-usd">Unified USD</a>
<a href="#under-agora">Under Agora</a>
<a href="https://navigate.st/bns/potidaea.asm/app.html">Wallet</a>
<a href="/brand/">Brand</a>
</div>
</div>
</footer>
<script>
document.querySelectorAll('a[href^="#"]').forEach(function(a){
a.addEventListener('click', function(e){
var id = a.getAttribute('href');
if (id.length > 1) {
var t = document.querySelector(id);
if (t) { e.preventDefault(); t.scrollIntoView({ behavior: 'smooth' }); }
}
});
});
</script>
<script src="/starfield.js" defer></script>
</body>
</html>

View file

@ -8,12 +8,9 @@
body { padding-top: 58px; } /* clear the fixed header */
/* Desktop: reserve the right gutter for the vertical sub-nav rail so it
never overlaps hero / body content. Kept in sync with the .sub-nav
breakpoint below (matches its 900px flip to a horizontal top-band). */
@media (min-width: 901px) {
body { padding-right: 200px; }
}
/* The sub-nav floats free — no background, no reserved gutter. Body
stays center-anchored and the nav links overlay the right edge
without shifting any content. */
.site-header {
position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 100;
@ -100,13 +97,11 @@ body { padding-top: 58px; } /* clear the fixed header */
top: 50%;
transform: translateY(-50%);
z-index: 90;
background: rgba(5, 5, 5, 0.72);
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 14px;
padding: 10px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
/* Floating free — no background, no border, no box-shadow. The links
and CTA sit directly on the dark sky. */
background: transparent;
border: 0;
padding: 0;
}
.sub-nav .sub-nav-in {
display: flex; flex-direction: column;
@ -188,10 +183,13 @@ body { padding-top: 58px; } /* clear the fixed header */
transform: none;
border-radius: 0;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding: 10px 16px;
padding: 8px 16px;
box-shadow: none;
background: rgba(5, 5, 5, 0.9);
/* Floating free on mobile too — just a soft blur so links stay
readable when content scrolls under them, no solid box. */
background: transparent;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.sub-nav .sub-nav-in {
flex-direction: row;