site/choose/stay/index.html

133 lines
6.9 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>You took the blue one — Silent Mode</title>
<meta name="description" content="The conventional web, stated plainly. It works, it is fast, and it is free at the point of use. Here is what you trade for that.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Silent Mode">
<meta property="og:title" content="You took the blue one — Silent Mode">
<meta property="og:description" content="The conventional web, stated plainly. It works, it is fast, and it is free at the point of use. Here is what you trade for that.">
<meta property="og:url" content="https://silentmode.st/choose/stay/">
<meta property="og:image" content="https://silentmode.st/brand/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<link rel="stylesheet" href="/shared.css?v=20260910">
<style>
body{background:#070a11}
body::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(720px 460px at 50% -6%, rgba(75,123,236,.12), transparent 62%);
}
main{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:5rem 1.4rem 3rem}
.capsule{width:84px;height:38px;border-radius:999px;margin:0 auto 26px;position:relative;
background:linear-gradient(180deg,#4b7bec,#1e3a8a);
box-shadow:inset 0 -3px 6px rgba(0,0,0,.35), 0 8px 26px rgba(75,123,236,.24)}
.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)}
main h1{font-size:clamp(1.9rem,4.4vw,2.6rem);font-weight:600;text-align:center;
margin:0 0 1rem;line-height:1.22;letter-spacing:.2px}
.lede{color:var(--mut);font-size:1.03rem;text-align:center;max-width:640px;margin:0 auto 2.8rem}
h2{font-size:1.1rem;font-weight:600;margin:0 0 1rem;letter-spacing:.2px}
.bargain{display:grid;gap:11px;margin-bottom:2.4rem}
.item{background:rgba(255,255,255,.026);border:1px solid rgba(255,255,255,.07);
border-radius:12px;padding:15px 18px}
.item b{color:var(--ink);font-size:14.5px;display:block;margin-bottom:.28rem}
.item span{color:var(--mut);font-size:14px;line-height:1.66}
.fair{background:var(--panel);border:1px solid var(--line);border-left:3px solid #7fa3f2;
border-radius:11px;padding:17px 20px;color:var(--mut);font-size:14px;line-height:1.72;margin-bottom:2.6rem}
.fair b{color:var(--ink)}
.carry{text-align:center;margin-bottom:2.4rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:1.1rem}
.tile{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:11px;
padding:14px 10px;text-align:center;text-decoration:none;color:var(--mut);font-size:13.5px;
transition:border-color .2s ease,color .2s ease}
.tile:hover{border-color:rgba(75,123,236,.45);color:var(--ink)}
.tile:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.door{text-align:center;background:rgba(255,77,94,.05);border:1px solid rgba(255,77,94,.22);
border-radius:14px;padding:22px 20px}
.door p{color:var(--mut);font-size:14px;margin:0 0 1rem;line-height:1.7}
.door a.btn{background:#ff4d5e;color:#0d0509;border:none}
.foot{color:var(--mut);font-size:12.5px;text-align:center;margin-top:3rem;line-height:1.8}
.foot a{color:var(--mut);text-decoration:underline;text-underline-offset:2px}
.foot a:hover{color:var(--ink)}
</style>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
</head>
<body>
<main>
<div class="capsule" aria-hidden="true"></div>
<h1>Nothing changes. That is the point.</h1>
<p class="lede">The conventional web is fast, free at the point of use, and mostly
excellent. Billions of people use it every day and are perfectly well served. We are
not going to pretend it is a dystopia — but it is worth being clear about what the
arrangement actually is, because it is easy to forget you made one.</p>
<h2>The bargain, stated plainly</h2>
<div class="bargain">
<div class="item"><b>Your account is a permission, not a possession.</b>
<span>It exists because a company allows it to, under terms they can change. That is
not a conspiracy; it is what a terms-of-service relationship is.</span></div>
<div class="item"><b>Your domain is on the registrar's record.</b>
<span>Registration is yearly — that part is fine, and the same shape as any name
service that needs to recycle unused names. What matters is what a court order or
UDRP ruling can do to it while the registrar holds that record.</span></div>
<div class="item"><b>Attention is the business model.</b>
<span>Services that cost nothing are paid for by measuring what you do and selling
access to your attention. Being observed is not a flaw in that design — it is the
design working.</span></div>
<div class="item"><b>Reach is not portable.</b>
<span>The audience you build lives inside the platform. Leaving does not take it with
you, which is what makes leaving expensive.</span></div>
<div class="item"><b>Every layer keeps a veto.</b>
<span>Registrar, host, CDN, certificate authority, app store, payment processor. Any
one of them can decline, and each of them sometimes does.</span></div>
</div>
<div class="fair">
<b>To be fair to it.</b> Those vetoes also stop fraud, take down malware and remove
genuinely vile material, and the people operating them are mostly trying to get it
right. The support desk is real, the uptime is excellent, and someone answers when it
breaks. A system with nobody in charge gives all of that up too. Anyone selling you the
alternative without mentioning that is selling you something.
</div>
<div class="carry">
<h2>Carry on, then</h2>
<p style="color:var(--mut);font-size:14px;margin:0 auto;max-width:520px">
No hard feelings. The ordinary web is right through here.</p>
<div class="tiles">
<a class="tile" href="https://www.google.com" rel="noopener">Search</a>
<a class="tile" href="https://www.wikipedia.org" rel="noopener">Wikipedia</a>
<a class="tile" href="https://www.youtube.com" rel="noopener">Video</a>
<a class="tile" href="https://www.reddit.com" rel="noopener">Forums</a>
<a class="tile" href="https://news.ycombinator.com" rel="noopener">News</a>
</div>
</div>
<div class="door" style="margin-top:2.4rem">
<p>Still curious what the other one actually does? It costs nothing to look, and
nothing on this machine changes until you install something.</p>
<a class="btn" href="/choose/free/">Show me the other one →</a>
</div>
<p class="foot">
<a href="/choose/">← Back to the choice</a> · <a href="/">silentmode.st</a>
</p>
</main>
</body>
</html>