site/choose/index.html

249 lines
13 KiB
HTML
Raw Normal View History

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Choose — Silent Mode</title>
<meta name="description" content="Two internets, twice over. The one you browse, and the one you build on. Every layer of the conventional web has someone who can say no. The other one has nobody.">
<link rel="stylesheet" href="/shared.css">
<style>
/* Page-specific only — tokens, body and buttons come from shared.css.
`.capsule`, not `.pill`: shared.css already uses `.pill` for status badges.
No top nav here on purpose: the page asks two questions and a nav bar offers a
third answer that undermines both. */
body{background:#05070c}
body::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(620px 400px at 24% 26%, rgba(75,123,236,.10), transparent 60%),
radial-gradient(620px 400px at 76% 74%, rgba(255,77,94,.10), transparent 60%),
radial-gradient(1200px 700px at 50% 118%, rgba(214,255,61,.05), transparent 70%);
animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:translate3d(0,0,0)} to{transform:translate3d(0,-14px,0)}}
@media (prefers-reduced-motion:reduce){body::before{animation:none} .capsule-card{transition:none}}
:root{ --red:#ff4d5e; --red-deep:#9b1725; --blue:#4b7bec; --blue-deep:#1e3a8a; }
main{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:4.4rem 1.4rem 3rem}
.eyebrow{color:var(--dim);font:600 12px/1 system-ui;letter-spacing:.28em;
text-transform:uppercase;text-align:center;margin:0 0 1.2rem}
main h1{font-size:clamp(2rem,4.6vw,2.9rem);font-weight:600;line-height:1.2;
text-align:center;margin:.4rem 0 1.1rem;letter-spacing:.2px}
.intro{color:var(--mut);font-size:1.03rem;max-width:660px;margin:0 auto 3rem;text-align:center}
/* section headers */
.act{max-width:1000px;margin:0 auto;padding:0}
.act + .act{margin-top:3.6rem;padding-top:3.2rem;border-top:1px solid rgba(255,255,255,.07)}
.act-head{text-align:center;margin:0 auto 1.8rem;max-width:600px}
.act-num{display:inline-block;font:700 11px/1 system-ui;letter-spacing:.22em;text-transform:uppercase;
color:var(--acid);background:rgba(214,255,61,.1);padding:5px 11px;border-radius:999px;margin-bottom:.9rem}
.act-head h2{font-size:1.5rem;font-weight:600;margin:0 0 .4rem;letter-spacing:.2px}
.act-head p{color:var(--mut);font-size:14.5px;margin:0}
.capsules{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
@media (max-width:800px){.capsules{grid-template-columns:1fr}}
.capsule-card{
position:relative;display:flex;flex-direction:column;
background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:30px 26px 24px;
text-decoration:none;color:inherit;
transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.capsule-card:hover{transform:translateY(-4px)}
.capsule-card.blue:hover{border-color:rgba(75,123,236,.5);box-shadow:0 12px 40px rgba(75,123,236,.16)}
.capsule-card.red:hover{border-color:rgba(255,77,94,.5);box-shadow:0 12px 40px rgba(255,77,94,.16)}
.capsule-card:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.capsule{
width:84px;height:38px;border-radius:999px;margin:0 auto 18px;position:relative;
box-shadow:inset 0 -3px 6px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.4);
}
.capsule::before{
content:"";position:absolute;top:5px;left:12px;right:12px;height:9px;border-radius:999px;
background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));filter:blur(1px);
}
.capsule.blue{background:linear-gradient(180deg,var(--blue),var(--blue-deep))}
.capsule.red{background:linear-gradient(180deg,var(--red),var(--red-deep))}
.tag{font:600 11px/1 system-ui;letter-spacing:.24em;text-transform:uppercase;text-align:center;margin-bottom:7px}
.capsule-card.blue .tag{color:#7fa3f2}
.capsule-card.red .tag{color:#ff7885}
.capsule-card h3{font-size:1.26rem;font-weight:600;text-align:center;margin:0 0 1.1rem;letter-spacing:.2px}
ul.points{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:10px}
ul.points li{color:var(--mut);font-size:14px;line-height:1.62;padding-left:18px;position:relative}
ul.points li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%}
.capsule-card.blue ul.points li::before{background:#4b7bec}
.capsule-card.red ul.points li::before{background:var(--red)}
ul.points b{color:var(--ink);font-weight:600}
.brand{text-align:center;color:var(--acid);font-size:12.5px;letter-spacing:.06em;
margin:-.7rem 0 1.1rem;font-weight:600}
.brand span{color:var(--mut);font-weight:400}
.spacer{flex:1}
.go{display:block;text-align:center;padding:12px 18px;border-radius:10px;
font-weight:600;font-size:14px;border:1px solid transparent}
.capsule-card.blue .go{background:rgba(75,123,236,.13);color:#93b4f5;border-color:rgba(75,123,236,.34)}
.capsule-card.red .go{background:var(--red);color:#0d0509}
.foot{color:var(--mut);font-size:12.5px;text-align:center;margin-top:3.4rem;line-height:1.8}
.foot a{color:var(--mut);text-decoration:underline;text-underline-offset:2px}
.foot a:hover{color:var(--ink)}
.foot .alt{color:var(--dim)}
</style>
</head>
<body>
<main>
<p class="eyebrow">Silent Mode</p>
<h1>Two internets. <span class="g">Twice over.</span></h1>
<p class="intro">The web you use every day is owned. Companies decide which names exist,
which pages load, and whose voice carries. Registrars record who bought what. Card
networks and banks sit in the middle of every payment. The browser you are reading this
in reports home, and so does most of what it loads. There are privacy-forward providers
that will hold your identity <em>on your behalf</em> — but they still hold it, and a
court order still reaches them. Sirius.x removes the surface instead: names you hold by
key, pages nobody can pull, payment with no card and no bank, and a browser with nobody
to report to. <b>Anonymous by default, not by exception.</b> Whether you want to
<em>use</em> it or <em>build</em> on it, it starts the same way: something you install,
and a name that is actually yours.</p>
<!-- ════ ACT I — the web you browse ════════════════════════════════ -->
<section class="act" aria-labelledby="act1">
<div class="act-head">
<span class="act-num">First choice</span>
<h2 id="act1">The web you browse</h2>
<p>Where you read, post, and are read. Pick the one you want to live in.</p>
</div>
<div class="capsules">
<a class="capsule-card blue" href="/choose/stay/">
<div class="capsule blue" aria-hidden="true"></div>
<p class="tag">The blue one</p>
<h3>Stay where it is easy.</h3>
<ul class="points">
<li><b>Your account is a permission.</b> It exists while the platform allows it,
under terms they rewrite when they like.</li>
<li><b>You are measured everywhere you go.</b> The browser reports home, the pages
report home, and the profile follows you between them. Attention is the business
model, so being watched is not a bug — it <em>is</em> the system.</li>
<li><b>What you publish stays up until it does not.</b> Moderation is theirs,
appeals go to them, and the reasons need not be given.</li>
<li><b>The reach you built is not portable.</b> Leave, and the audience stays
behind.</li>
</ul>
<div class="spacer"></div>
<span class="go">It works. Mostly. →</span>
</a>
<a class="capsule-card red" href="/choose/free/">
<div class="capsule red" aria-hidden="true"></div>
<p class="tag">The red one</p>
<h3>Step outside it.</h3>
<ul class="points">
<li><b>No account, anywhere.</b> No email, no sign-up, no password to reset.
Nothing to suspend, because nothing was granted.</li>
<li><b>A browser with nobody to report to.</b> Theseus resolves names straight
from the chain — no lookup service in the middle logging what you typed.</li>
<li><b>A name that is yours by key, not by permission.</b> Held on a public
ledger; no registrar stands between you and it, and none of them learns your
name to give you one.</li>
<li><b>Pages nobody can pull.</b> On your own server, spread across strangers
who are paid to keep it, or inside a transaction the whole network stores.</li>
<li><b>Nobody to petition, because nobody is in charge.</b> That cuts both ways,
and it is the honest trade.</li>
</ul>
<div class="spacer"></div>
<span class="go">Show me →</span>
</a>
</div>
</section>
<!-- ════ ACT II — the web you build on ═════════════════════════════ -->
<section class="act" aria-labelledby="act2">
<div class="act-head">
<span class="act-num">Second choice</span>
<h2 id="act2">The web you build on</h2>
<p>If you ship things, the question repeats one layer down — and this time the
gatekeepers have invoices, and a record of who paid them.</p>
</div>
<div class="capsules">
<a class="capsule-card blue" href="/choose/registrars/">
<div class="capsule blue" aria-hidden="true"></div>
<p class="tag">The blue one</p>
<h3>Rent it, like everyone.</h3>
<ul class="points">
<li><b>Anonymous only by exception.</b> The default path binds the name to your
legal identity — WHOIS/RDAP holds the registrant data, ICANN requires it be
accurate, and the card ties it all together. Privacy providers like Njalla take
Monero and behave well — pair them with Tor or a VPN and the real-world privacy
is genuinely good. Pay with a bank card, and none of it applies. Either way, the
provider still <em>holds</em> what they were told and can be compelled to produce
it.</li>
<li><b>Renewal is the model, and it is a reasonable one.</b> A yearly fee keeps
the namespace alive — unused names return to the pool instead of being hoarded
forever, and the registrar has a business that survives. That part is fine.
Sirius.x works the same way for the same reason. What differs is who holds the
record and can be leaned on to change it.</li>
<li><b>Suspension is a supported feature.</b> Registrars act on court orders, UDRP
rulings and their own policy — by design, not by failure.</li>
<li><b>Every layer keeps a veto, and a bank sits under all of them.</b> Host,
CDN, certificate authority, payment processor. Any one can decline.</li>
<li><b>It is genuinely good infrastructure.</b> Fast, cheap, supported, and
someone answers the phone. That is the deal you are making.</li>
</ul>
<div class="spacer"></div>
<span class="go">The conventional stack →</span>
</a>
<a class="capsule-card red" href="/register.html">
<div class="capsule red" aria-hidden="true"></div>
<p class="tag">The red one</p>
<h3>Own the name outright.</h3>
<p class="brand">Sirius<span>.x</span> — names and hosting, paid in crypto</p>
<ul class="points">
<li><b>Anonymous by default, not by exception.</b> No account, no email, no card,
no bank — because the stack does not support them. Nothing to compel out of a
provider that never held it.</li>
<li><b>Payment is peer to peer.</b> You pay in crypto, direct to the seller, with
no processor deciding whether you may and no bank keeping a record of the
purchase. Add Tor or a VPN to cover the network layer, which nothing else can
do for you — no stack removes your IP.</li>
<li><b>The name is a certificate you hold.</b> A CashToken on Bitcoin Cash — your
key controls it, and there is no company in the middle to ask.</li>
<li><b>Host it however you like.</b> Your own server, the Sia storage network, or
on-chain for something small. Repoint it whenever, for free.</li>
<li><b>The whole stack is yours to run.</b> Browser, resolver, indexer, registry —
a node plus a small BNS-only indexer fits a one-core VPS. Any TLD works; the
protocol has no allowlist.</li>
</ul>
<div class="spacer"></div>
<span class="go">Find a name on Sirius.x →</span>
</a>
</div>
</section>
<p class="foot">
Running on Bitcoin Cash <b>chipnet</b> — an alpha on a test network, free to try, and
honest about being early.<br>
<span class="alt">You are reading this on <a href="/">silentmode.st</a>, the
ordinary-web face of the project. The same pages served the other way live at
<a href="https://navigate.st/bns/silentmode.bch">silentmode.bch</a>.</span>
</p>
</main>
</body>
</html>