939 lines
38 KiB
HTML
939 lines
38 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en" data-theme="signal">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>Deviant — Power Your Ideas</title>
|
|||
|
|
<meta name="description" content="Deviant exists to enable resistance — by giving users on-chain experience that intermediation cannot mediate.">
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
(function(){try{var t=localStorage.getItem('deviant-theme');if(t==='editorial'){document.documentElement.removeAttribute('data-theme');}else{document.documentElement.setAttribute('data-theme','signal');}}catch(e){document.documentElement.setAttribute('data-theme','signal');}})();
|
|||
|
|
</script>
|
|||
|
|
<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=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
:root {
|
|||
|
|
--header-h: 58px;
|
|||
|
|
--sky-deep: #050810;
|
|||
|
|
--sky-mid: #0a0f1c;
|
|||
|
|
--sky-rim: #131a2a;
|
|||
|
|
--star-faint: rgba(255, 255, 255, 0.22);
|
|||
|
|
--star-mid: rgba(255, 255, 255, 0.38);
|
|||
|
|
--star-bright: rgba(255, 255, 255, 0.58);
|
|||
|
|
|
|||
|
|
--ink-soft: #b8c2d4;
|
|||
|
|
--ink: #d6dde9;
|
|||
|
|
--ink-bright: #f1f4fa;
|
|||
|
|
--muted: #6a7488;
|
|||
|
|
|
|||
|
|
--acid: #d6ff3d;
|
|||
|
|
--acid-glow: rgba(214, 255, 61, 0.55);
|
|||
|
|
--acid-halo: rgba(214, 255, 61, 0.22);
|
|||
|
|
--acid-dim: rgba(214, 255, 61, 0.08);
|
|||
|
|
|
|||
|
|
--rust-deep: #6b2a1c;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|||
|
|
|
|||
|
|
html, body {
|
|||
|
|
background: var(--sky-deep);
|
|||
|
|
color: var(--ink);
|
|||
|
|
font-family: 'Fraunces', Georgia, serif;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-feature-settings: "ss01", "ss02";
|
|||
|
|
font-synthesis: none;
|
|||
|
|
-webkit-font-smoothing: antialiased;
|
|||
|
|
-moz-osx-font-smoothing: grayscale;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body { padding-top: var(--header-h); }
|
|||
|
|
html { scroll-padding-top: calc(var(--header-h) + 14px); }
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
background:
|
|||
|
|
radial-gradient(ellipse at top, var(--sky-rim) 0%, transparent 60%),
|
|||
|
|
radial-gradient(ellipse at bottom right, var(--sky-mid) 0%, transparent 50%),
|
|||
|
|
radial-gradient(ellipse at bottom left, #0c1424 0%, transparent 55%),
|
|||
|
|
var(--sky-deep);
|
|||
|
|
background-attachment: fixed;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Starfield */
|
|||
|
|
.stars {
|
|||
|
|
position: fixed;
|
|||
|
|
inset: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
pointer-events: none;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.starfield {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%; left: 50%;
|
|||
|
|
width: 150vmax; height: 150vmax;
|
|||
|
|
margin: -75vmax 0 0 -75vmax;
|
|||
|
|
transform-origin: center center;
|
|||
|
|
will-change: transform;
|
|||
|
|
animation: skyspin 240s linear infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.star {
|
|||
|
|
position: absolute;
|
|||
|
|
background: var(--star-faint);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
animation: twinkle var(--twinkle-duration, 12s) ease-in-out infinite;
|
|||
|
|
animation-delay: var(--twinkle-delay, 0s);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes twinkle {
|
|||
|
|
0%, 100% { opacity: 0.35; }
|
|||
|
|
50% { opacity: 0.85; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes skyspin {
|
|||
|
|
from { transform: rotate(0deg); }
|
|||
|
|
to { transform: rotate(360deg); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (prefers-reduced-motion: reduce) {
|
|||
|
|
.star { animation: none; opacity: 0.4; }
|
|||
|
|
.starfield { animation: none; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Layout */
|
|||
|
|
.container {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
max-width: 1180px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 0 32px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Top bar */
|
|||
|
|
.site-header {
|
|||
|
|
position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 100;
|
|||
|
|
background: rgba(5,8,16,0.80);
|
|||
|
|
backdrop-filter: blur(10px) saturate(120%);
|
|||
|
|
-webkit-backdrop-filter: blur(10px) saturate(120%);
|
|||
|
|
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|||
|
|
}
|
|||
|
|
.topbar {
|
|||
|
|
max-width: 1180px; margin: 0 auto;
|
|||
|
|
padding: 16px 32px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.topbar-right { display: flex; align-items: center; gap: 28px; }
|
|||
|
|
|
|||
|
|
.wordmark {
|
|||
|
|
font-family: 'Fraunces', serif;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 22px;
|
|||
|
|
letter-spacing: -0.01em;
|
|||
|
|
color: var(--ink-bright);
|
|||
|
|
text-decoration: none;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wordmark::after {
|
|||
|
|
content: "";
|
|||
|
|
display: inline-block;
|
|||
|
|
width: 5px;
|
|||
|
|
height: 5px;
|
|||
|
|
background: var(--acid);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
margin-left: 7px;
|
|||
|
|
vertical-align: middle;
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow:
|
|||
|
|
0 0 6px var(--acid-glow),
|
|||
|
|
0 0 14px var(--acid-halo);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 36px;
|
|||
|
|
font-family: 'JetBrains Mono', monospace;
|
|||
|
|
font-size: 11px;
|
|||
|
|
letter-spacing: 0.16em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
color: var(--muted);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav a {
|
|||
|
|
color: var(--muted);
|
|||
|
|
text-decoration: none;
|
|||
|
|
transition: color 0.4s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nav a:hover { color: var(--ink-bright); }
|
|||
|
|
|
|||
|
|
/* Hero */
|
|||
|
|
.hero {
|
|||
|
|
min-height: calc(100vh - var(--header-h) - 24px);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 64px 0 96px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Hero two-column layout */
|
|||
|
|
.hero-grid{
|
|||
|
|
display:grid;
|
|||
|
|
grid-template-columns:minmax(0,1.18fr) minmax(0,0.82fr);
|
|||
|
|
gap:clamp(36px,5vw,72px);
|
|||
|
|
align-items:center;
|
|||
|
|
width:100%;
|
|||
|
|
}
|
|||
|
|
.hero-left .opening{max-width:none;}
|
|||
|
|
.hero-left .opening p{font-size:clamp(17px,2.295vw,26.35px);margin-bottom:0;}
|
|||
|
|
.hero-left .response{margin-top:32px;}
|
|||
|
|
.hero-right{display:flex;flex-direction:column;gap:30px;}
|
|||
|
|
.traj{width:100%;height:auto;display:block;overflow:visible;}
|
|||
|
|
.traj .traj-default{stroke:var(--muted);stroke-width:1.4;fill:none;opacity:.6;stroke-dasharray:3 6;stroke-linecap:round;}
|
|||
|
|
.traj .traj-dev{stroke:var(--acid);stroke-width:2.4;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 5px var(--acid-halo));}
|
|||
|
|
.traj .traj-node{fill:var(--acid);filter:drop-shadow(0 0 7px var(--acid-glow));}
|
|||
|
|
.traj .traj-branch{fill:var(--muted);}
|
|||
|
|
.traj text{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;}
|
|||
|
|
.traj .traj-lbl-muted{fill:var(--muted);}
|
|||
|
|
.traj .traj-lbl-acid{fill:var(--acid);}
|
|||
|
|
.hero-cta{display:flex;flex-direction:column;gap:12px;}
|
|||
|
|
.btn{
|
|||
|
|
font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
|
|||
|
|
text-decoration:none;padding:15px 18px;border-radius:11px;
|
|||
|
|
display:flex;align-items:center;justify-content:space-between;gap:12px;
|
|||
|
|
transition:border-color .25s ease,color .25s ease,box-shadow .25s ease,background .25s ease;
|
|||
|
|
}
|
|||
|
|
.btn-primary{color:var(--sky-deep);background:var(--acid);font-weight:600;box-shadow:0 0 16px var(--acid-dim);}
|
|||
|
|
.btn-primary:hover{box-shadow:0 0 28px var(--acid-halo);}
|
|||
|
|
.btn-ghost{color:var(--ink);background:transparent;border:1px solid rgba(184,194,212,0.22);}
|
|||
|
|
.btn-ghost:hover{border-color:var(--acid);color:var(--ink-bright);}
|
|||
|
|
@media (max-width:880px){
|
|||
|
|
.hero-grid{grid-template-columns:1fr;gap:40px;}
|
|||
|
|
.hero-right{order:2;max-width:440px;}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
font-family: 'JetBrains Mono', monospace;
|
|||
|
|
font-size: 10px;
|
|||
|
|
letter-spacing: 0.28em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
color: var(--muted);
|
|||
|
|
margin-bottom: 48px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label::before {
|
|||
|
|
content: "";
|
|||
|
|
width: 22px;
|
|||
|
|
height: 1px;
|
|||
|
|
background: var(--muted);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.opening {
|
|||
|
|
max-width: 920px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.opening p {
|
|||
|
|
font-family: 'Fraunces', serif;
|
|||
|
|
font-weight: 300;
|
|||
|
|
font-size: clamp(22px, 3.2vw, 36px);
|
|||
|
|
line-height: 1.42;
|
|||
|
|
letter-spacing: -0.012em;
|
|||
|
|
color: var(--ink);
|
|||
|
|
margin-bottom: 28px;
|
|||
|
|
font-variation-settings: "opsz" 96;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.opening p:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.opening .o2 {
|
|||
|
|
color: var(--ink);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.opening .o3 {
|
|||
|
|
color: var(--ink-bright);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* The rotating word */
|
|||
|
|
.rot-wrap {
|
|||
|
|
display: inline-block;
|
|||
|
|
position: relative;
|
|||
|
|
vertical-align: baseline;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rot-word {
|
|||
|
|
display: inline-block;
|
|||
|
|
position: relative;
|
|||
|
|
color: var(--ink-bright);
|
|||
|
|
font-style: italic;
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
.rot-word::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
left: calc(100% + 3px);
|
|||
|
|
top: 0.14em;
|
|||
|
|
width: 2px; height: 0.84em;
|
|||
|
|
background: var(--acid);
|
|||
|
|
box-shadow: 0 0 6px var(--acid-halo);
|
|||
|
|
animation: caretBlink 1s step-end infinite;
|
|||
|
|
}
|
|||
|
|
@keyframes caretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
|
|||
|
|
|
|||
|
|
@media (prefers-reduced-motion: reduce) {
|
|||
|
|
.rot-word::after { animation: none; opacity: 0; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Deviation glow — acid green luminescence */
|
|||
|
|
.deviation {
|
|||
|
|
color: var(--acid);
|
|||
|
|
font-style: italic;
|
|||
|
|
font-weight: 500;
|
|||
|
|
text-shadow:
|
|||
|
|
0 0 4px var(--acid-glow),
|
|||
|
|
0 0 14px var(--acid-halo),
|
|||
|
|
0 0 32px var(--acid-dim);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Response line — slim mark, no box */
|
|||
|
|
.response {
|
|||
|
|
margin-top: 56px;
|
|||
|
|
max-width: 760px;
|
|||
|
|
position: relative;
|
|||
|
|
padding-left: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.response::before {
|
|||
|
|
content: "";
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
top: 6px;
|
|||
|
|
bottom: 6px;
|
|||
|
|
width: 2px;
|
|||
|
|
background: var(--acid);
|
|||
|
|
box-shadow:
|
|||
|
|
0 0 6px var(--acid-glow),
|
|||
|
|
0 0 14px var(--acid-halo);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.response p {
|
|||
|
|
font-family: 'Fraunces', serif;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: clamp(18px, 1.9vw, 22px);
|
|||
|
|
line-height: 1.55;
|
|||
|
|
letter-spacing: -0.005em;
|
|||
|
|
color: var(--ink);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.response strong {
|
|||
|
|
color: var(--ink-bright);
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Pathways */
|
|||
|
|
.pathways {
|
|||
|
|
padding: 112px 0 96px;
|
|||
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pathways-label {
|
|||
|
|
font-family: 'JetBrains Mono', monospace;
|
|||
|
|
font-size: 10px;
|
|||
|
|
letter-spacing: 0.28em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
color: var(--muted);
|
|||
|
|
margin-bottom: 56px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.path-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(3, 1fr);
|
|||
|
|
gap: 48px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.path {
|
|||
|
|
text-decoration: none;
|
|||
|
|
color: inherit;
|
|||
|
|
display: block;
|
|||
|
|
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.path:hover {
|
|||
|
|
transform: translateY(-4px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.path-num {
|
|||
|
|
font-family: 'JetBrains Mono', monospace;
|
|||
|
|
font-size: 11px;
|
|||
|
|
letter-spacing: 0.22em;
|
|||
|
|
color: var(--muted);
|
|||
|
|
margin-bottom: 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.path-title {
|
|||
|
|
font-family: 'Fraunces', serif;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 26px;
|
|||
|
|
line-height: 1.25;
|
|||
|
|
letter-spacing: -0.012em;
|
|||
|
|
color: var(--ink-bright);
|
|||
|
|
margin-bottom: 14px;
|
|||
|
|
font-variation-settings: "opsz" 72;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.path-desc {
|
|||
|
|
font-family: 'Fraunces', serif;
|
|||
|
|
font-weight: 300;
|
|||
|
|
font-size: 15px;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
color: var(--ink-soft);
|
|||
|
|
font-variation-settings: "opsz" 14;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.path-arrow {
|
|||
|
|
display: inline-block;
|
|||
|
|
margin-top: 18px;
|
|||
|
|
font-family: 'JetBrains Mono', monospace;
|
|||
|
|
font-size: 11px;
|
|||
|
|
letter-spacing: 0.18em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
color: var(--muted);
|
|||
|
|
transition: color 0.4s ease, gap 0.4s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.path:hover .path-arrow { color: var(--acid); }
|
|||
|
|
|
|||
|
|
.path-arrow::after {
|
|||
|
|
content: " →";
|
|||
|
|
display: inline-block;
|
|||
|
|
transition: transform 0.4s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.path:hover .path-arrow::after { transform: translateX(4px); }
|
|||
|
|
|
|||
|
|
/* Footer */
|
|||
|
|
footer {
|
|||
|
|
padding: 56px 0 48px;
|
|||
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
gap: 32px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-mark {
|
|||
|
|
font-family: 'Fraunces', serif;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: var(--muted);
|
|||
|
|
max-width: 480px;
|
|||
|
|
line-height: 1.55;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-mark strong {
|
|||
|
|
color: var(--ink);
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-meta {
|
|||
|
|
font-family: 'JetBrains Mono', monospace;
|
|||
|
|
font-size: 10px;
|
|||
|
|
letter-spacing: 0.22em;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
color: var(--muted);
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-meta div { margin-bottom: 6px; }
|
|||
|
|
.footer-meta div:last-child { margin-bottom: 0; }
|
|||
|
|
|
|||
|
|
/* Positioning — what Deviant is */
|
|||
|
|
.positioning {
|
|||
|
|
padding: 112px 0 96px;
|
|||
|
|
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|||
|
|
}
|
|||
|
|
.pos-statement { max-width: 980px; margin-top: 8px; }
|
|||
|
|
.surfaces {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
gap: 44px 48px;
|
|||
|
|
margin-top: 80px;
|
|||
|
|
}
|
|||
|
|
.surface-name {
|
|||
|
|
font-family: 'Fraunces', serif; font-weight: 400; font-size: 22px;
|
|||
|
|
color: var(--ink-bright); margin-bottom: 8px; letter-spacing: -0.012em;
|
|||
|
|
font-variation-settings: "opsz" 72;
|
|||
|
|
}
|
|||
|
|
.surface-desc {
|
|||
|
|
font-family: 'Fraunces', serif; font-weight: 300; font-size: 15px;
|
|||
|
|
line-height: 1.6; color: var(--ink-soft); font-variation-settings: "opsz" 14;
|
|||
|
|
}
|
|||
|
|
.clean-note { margin-top: 80px; }
|
|||
|
|
.clean-tags { display: flex; flex-wrap: wrap; gap: 12px 28px; }
|
|||
|
|
.clean-tags span {
|
|||
|
|
font-family: 'JetBrains Mono', monospace; font-size: 11px;
|
|||
|
|
letter-spacing: 0.18em; text-transform: uppercase; color: var(--acid);
|
|||
|
|
}
|
|||
|
|
.clean-note p {
|
|||
|
|
margin-top: 24px; max-width: 720px;
|
|||
|
|
font-family: 'Fraunces', serif; font-weight: 300; font-size: 16px;
|
|||
|
|
line-height: 1.62; color: var(--ink-soft);
|
|||
|
|
}
|
|||
|
|
.slogan-closing { text-align: center; margin: 120px 0 8px; }
|
|||
|
|
.slogan-line {
|
|||
|
|
margin-top: 88px;
|
|||
|
|
font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
|
|||
|
|
font-size: clamp(26px, 4vw, 44px); letter-spacing: -0.01em;
|
|||
|
|
color: var(--acid);
|
|||
|
|
text-shadow: 0 0 6px var(--acid-glow), 0 0 18px var(--acid-halo), 0 0 40px var(--acid-dim);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Mobile */
|
|||
|
|
@media (max-width: 880px) {
|
|||
|
|
.container { padding: 0 22px; }
|
|||
|
|
.topbar { padding: 12px 20px; }
|
|||
|
|
.nav { display: none; }
|
|||
|
|
.opening p { font-size: clamp(20px, 5.4vw, 28px); }
|
|||
|
|
.hero { min-height: calc(100vh - var(--header-h)); padding: 40px 0 72px; }
|
|||
|
|
.response { margin-top: 56px; padding-left: 22px; }
|
|||
|
|
.response p { font-size: 17px; }
|
|||
|
|
.pathways { padding: 88px 0 72px; }
|
|||
|
|
.path-grid { grid-template-columns: 1fr; gap: 56px; }
|
|||
|
|
.pathways-label { margin-bottom: 40px; }
|
|||
|
|
footer { flex-direction: column; align-items: flex-start; }
|
|||
|
|
.footer-meta { text-align: left; }
|
|||
|
|
.positioning { padding: 88px 0 72px; }
|
|||
|
|
.surfaces { grid-template-columns: 1fr; gap: 44px; margin-top: 56px; }
|
|||
|
|
.clean-note { margin-top: 56px; }
|
|||
|
|
.slogan-line { margin-top: 64px; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 480px) {
|
|||
|
|
.container { padding: 0 18px; }
|
|||
|
|
.label { font-size: 9px; margin-bottom: 32px; }
|
|||
|
|
.label::before { width: 14px; }
|
|||
|
|
.opening p { font-size: 19px; line-height: 1.45; }
|
|||
|
|
.response p { font-size: 16px; }
|
|||
|
|
.path-title { font-size: 22px; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Skip-link for accessibility */
|
|||
|
|
.skip { position: absolute; left: -9999px; }
|
|||
|
|
.skip:focus {
|
|||
|
|
left: 12px; top: 12px; z-index: 100;
|
|||
|
|
padding: 8px 14px; background: var(--ink-bright); color: var(--sky-deep);
|
|||
|
|
font-family: 'JetBrains Mono', monospace; font-size: 11px;
|
|||
|
|
letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
|
|||
|
|
}
|
|||
|
|
/* Proof metrics */
|
|||
|
|
.metrics {
|
|||
|
|
display: grid; grid-template-columns: repeat(4, 1fr);
|
|||
|
|
gap: 28px; margin-top: 64px;
|
|||
|
|
border-top: 1px solid rgba(255,255,255,0.06);
|
|||
|
|
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|||
|
|
padding: 36px 0;
|
|||
|
|
}
|
|||
|
|
.metric-n {
|
|||
|
|
font-family: 'Fraunces', serif; font-weight: 400;
|
|||
|
|
font-size: clamp(30px, 4vw, 46px); line-height: 1;
|
|||
|
|
color: var(--acid);
|
|||
|
|
text-shadow: 0 0 6px var(--acid-glow), 0 0 18px var(--acid-halo);
|
|||
|
|
font-variation-settings: "opsz" 96;
|
|||
|
|
}
|
|||
|
|
.metric-l {
|
|||
|
|
margin-top: 12px;
|
|||
|
|
font-family: 'JetBrains Mono', monospace; font-size: 10px;
|
|||
|
|
letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
|
|||
|
|
}
|
|||
|
|
/* Contrast grid (positioning) */
|
|||
|
|
.vs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 44px 48px; margin-top: 72px; }
|
|||
|
|
.vs-col .vs-head {
|
|||
|
|
font-family: 'JetBrains Mono', monospace; font-size: 10px;
|
|||
|
|
letter-spacing: 0.2em; text-transform: uppercase;
|
|||
|
|
color: var(--muted); margin-bottom: 14px;
|
|||
|
|
}
|
|||
|
|
.vs-col.is-mba .vs-head { color: var(--acid); }
|
|||
|
|
.vs-col .vs-body {
|
|||
|
|
font-family: 'Fraunces', serif; font-weight: 300; font-size: 16px;
|
|||
|
|
line-height: 1.62; color: var(--ink-soft);
|
|||
|
|
}
|
|||
|
|
.vs-col .vs-body strong { color: var(--ink-bright); font-weight: 500; }
|
|||
|
|
@media (max-width: 880px) {
|
|||
|
|
.metrics { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
|
|||
|
|
.vs-grid { grid-template-columns: 1fr; gap: 36px; }
|
|||
|
|
.surfaces { grid-template-columns: 1fr !important; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ===== Style switch: Signal theme (sans / glow, mindmap aesthetic) ===== */
|
|||
|
|
[data-theme="signal"] {
|
|||
|
|
--sky-deep:#050505; --sky-mid:#0a0a0a; --sky-rim:#161616;
|
|||
|
|
--ink:#f2f2f2; --ink-bright:#ffffff; --ink-soft:#d2d2d2; --muted:#9a9a9a;
|
|||
|
|
--acid:#c6ff00;
|
|||
|
|
--acid-glow:rgba(198,255,0,0.60); --acid-halo:rgba(198,255,0,0.34); --acid-dim:rgba(198,255,0,0.16);
|
|||
|
|
}
|
|||
|
|
[data-theme="signal"] * { font-family:'DM Sans', system-ui, "Segoe UI", sans-serif !important; font-style: normal !important; }
|
|||
|
|
[data-theme="signal"] body { line-height:1.62; -webkit-font-smoothing:antialiased; }
|
|||
|
|
/* uppercase labels in mono — the v6 treatment */
|
|||
|
|
[data-theme="signal"] .label,
|
|||
|
|
[data-theme="signal"] .pathways-label,
|
|||
|
|
[data-theme="signal"] .nav,
|
|||
|
|
[data-theme="signal"] .nav a,
|
|||
|
|
[data-theme="signal"] .vs-head,
|
|||
|
|
[data-theme="signal"] .metric-l,
|
|||
|
|
[data-theme="signal"] .clean-tags span,
|
|||
|
|
[data-theme="signal"] .kicker,
|
|||
|
|
[data-theme="signal"] .footer-meta,
|
|||
|
|
[data-theme="signal"] .theme-toggle { font-family:'DM Mono', ui-monospace, monospace !important; letter-spacing:0.12em; }
|
|||
|
|
[data-theme="signal"] .btn { font-family:'DM Mono', ui-monospace, monospace !important; }
|
|||
|
|
[data-theme="signal"] body {
|
|||
|
|
background:
|
|||
|
|
radial-gradient(1200px 600px at 50% -10%, rgba(198,255,0,0.06), transparent 60%),
|
|||
|
|
radial-gradient(900px 500px at 100% 120%, rgba(198,255,0,0.04), transparent 60%),
|
|||
|
|
#050505;
|
|||
|
|
}
|
|||
|
|
[data-theme="signal"] .label,
|
|||
|
|
[data-theme="signal"] .pathways-label,
|
|||
|
|
[data-theme="signal"] .nav,
|
|||
|
|
[data-theme="signal"] .vs-head,
|
|||
|
|
[data-theme="signal"] .metric-l,
|
|||
|
|
[data-theme="signal"] .clean-tags span,
|
|||
|
|
[data-theme="signal"] .opening p { font-weight: 700 !important; }
|
|||
|
|
[data-theme="signal"] .wordmark,
|
|||
|
|
[data-theme="signal"] .path-title,
|
|||
|
|
[data-theme="signal"] .surface-name,
|
|||
|
|
[data-theme="signal"] .slogan-line,
|
|||
|
|
[data-theme="signal"] .metric-n,
|
|||
|
|
[data-theme="signal"] .footer-mark strong { font-weight: 800 !important; }
|
|||
|
|
[data-theme="signal"] .deviation,
|
|||
|
|
[data-theme="signal"] .slogan-line,
|
|||
|
|
[data-theme="signal"] .metric-n {
|
|||
|
|
text-shadow: 0 0 6px rgba(198,255,0,0.55), 0 0 18px rgba(198,255,0,0.35), 0 0 40px rgba(198,255,0,0.18) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Style-switch button */
|
|||
|
|
.theme-toggle {
|
|||
|
|
font-family: 'JetBrains Mono', monospace; font-size: 10px;
|
|||
|
|
letter-spacing: 0.16em; text-transform: uppercase;
|
|||
|
|
color: var(--acid); background: rgba(214,255,61,0.06);
|
|||
|
|
border: 1px solid var(--acid-halo); padding: 8px 13px; border-radius: 999px;
|
|||
|
|
cursor: pointer; white-space: nowrap;
|
|||
|
|
transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
|
|||
|
|
}
|
|||
|
|
.theme-toggle:hover { border-color: var(--acid); background: rgba(214,255,61,0.10); }
|
|||
|
|
[data-theme="signal"] .site-header { background: rgba(5,5,5,0.82); }
|
|||
|
|
[data-theme="signal"] .theme-toggle { background: rgba(198,255,0,0.07); }
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<a href="#main" class="skip">Skip to content</a>
|
|||
|
|
|
|||
|
|
<div class="stars" aria-hidden="true" id="stars"></div>
|
|||
|
|
|
|||
|
|
<header class="site-header">
|
|||
|
|
<div class="topbar">
|
|||
|
|
<a href="./" class="wordmark">Deviant</a>
|
|||
|
|
<div class="topbar-right">
|
|||
|
|
<nav class="nav" aria-label="Primary">
|
|||
|
|
<a href="#what">What</a>
|
|||
|
|
<a href="#mechanism">Mechanism</a>
|
|||
|
|
<a href="#proof">Proof</a>
|
|||
|
|
<a href="https://deviant.navigate.st/" target="_blank" rel="noopener noreferrer">Wallet</a>
|
|||
|
|
<a href="./potidaea/">Potidaea</a>
|
|||
|
|
<a href="./anthemus/">Anthemus</a>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<div class="container">
|
|||
|
|
|
|||
|
|
<main id="main" class="hero">
|
|||
|
|
<div class="hero-grid">
|
|||
|
|
<div class="hero-left">
|
|||
|
|
<div class="label">A response to a default trajectory</div>
|
|||
|
|
<div class="opening">
|
|||
|
|
<p class="o-lead">When the institutional, technical, economic, and rhetorical forces all point in the same direction, the outcome they point toward becomes the default trajectory. <span class="deviation">Deviation</span> from the trajectory requires active resistance. In a <span class="rot-wrap"><span class="rot-word" id="rot">captured</span></span> information environment with limited resistance capacity, the default trajectory is what occurs.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="response">
|
|||
|
|
<p><strong>Deviant</strong> exists to enable that resistance — by giving users on-chain experience that <em>intermediation cannot mediate</em>.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<aside class="hero-right" aria-label="Trajectory and entry points">
|
|||
|
|
<svg class="traj" viewBox="0 0 380 240" role="img" aria-label="A default trajectory drifting down, and a deviation breaking upward">
|
|||
|
|
<path class="traj-default" d="M 12 70 C 110 96, 150 120, 200 138 C 255 158, 305 176, 368 198"/>
|
|||
|
|
<circle class="traj-branch" cx="200" cy="138" r="3.4"/>
|
|||
|
|
<path class="traj-dev" d="M 200 138 C 250 120, 300 84, 368 44"/>
|
|||
|
|
<circle class="traj-node" cx="368" cy="44" r="5"/>
|
|||
|
|
<text class="traj-lbl-muted" x="12" y="216">Default trajectory</text>
|
|||
|
|
<text class="traj-lbl-acid" x="368" y="30" text-anchor="end">Deviation</text>
|
|||
|
|
</svg>
|
|||
|
|
<div class="hero-cta">
|
|||
|
|
<a class="btn btn-primary" href="https://deviant.navigate.st/" target="_blank" rel="noopener noreferrer">Open Deviant Wallet <span aria-hidden="true">→</span></a>
|
|||
|
|
<a class="btn btn-ghost" href="https://deviant.navigate.st/" target="_blank" rel="noopener noreferrer">Create Your Own Asset <span aria-hidden="true">→</span></a>
|
|||
|
|
<a class="btn btn-ghost" href="#agora">Agora — Potidaea ASM & Anthemus DEX <span aria-hidden="true">→</span></a>
|
|||
|
|
</div>
|
|||
|
|
</aside>
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<section class="positioning" id="what" aria-label="What Deviant is">
|
|||
|
|
<div class="pathways-label">What this is</div>
|
|||
|
|
|
|||
|
|
<div class="opening pos-statement">
|
|||
|
|
<p>Deviant is the first wallet for an asset class that exists <span class="deviation">nowhere else</span> — a Bitcoin‑Cash‑backed asset you can redeem at a fixed rate, at any time, with no issuer, no custodian, and no counterparty. Enforced by mathematics, not trust.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="response">
|
|||
|
|
<p>Permissionless mint, fixed rate, unlimited reservoir — the contract replaces the market maker, the liquidity provider, and the counterparty at once. Mint from a permissionless covenant; exit by burning your output back to its Bitcoin‑Cash floor; swap to any other permissionless‑mint asset in a single atomic transaction. <strong>No pool. No oracle. No one to ask.</strong></p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="surfaces">
|
|||
|
|
<div class="surface"><div class="surface-name">Artemision</div><div class="surface-desc">Create. Genesis in one transaction — core parameters sealed, irreversible.</div></div>
|
|||
|
|
<div class="surface"><div class="surface-name">Katalogos</div><div class="surface-desc">The asset list. Every class, filterable across the backed ↔ non-backed spectrum and by use-case.</div></div>
|
|||
|
|
<div class="surface"><div class="surface-name">Agora</div><div class="surface-desc">The market hub. Home to Potidaea — a counterparty-free automated swap mechanism — and Anthemus, a decentralized exchange.</div></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="clean-note">
|
|||
|
|
<div class="clean-tags"><span>No issuer</span><span>No custodian</span><span>No counterparty</span><span>No token sale</span></div>
|
|||
|
|
<p>Not a fundraise, not a pre‑mine. The contract is small enough to read end to end in an evening — read it, replay the chain, break it or trust it. The wallet reports facts the chain has already settled; it never asks you to trust it.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="positioning" id="mechanism" aria-label="The mechanism">
|
|||
|
|
<div class="pathways-label">The mechanism · ASM</div>
|
|||
|
|
<div class="opening pos-statement">
|
|||
|
|
<p>Every unit is <span class="deviation">self‑backed</span> — it carries its own Bitcoin Cash inside the UTXO at a fixed rate. Redemption is a plain spend; a swap is a single atomic transaction, settled by consensus.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="response">
|
|||
|
|
<p>The <strong>Automated Swap Mechanism</strong> prices every exchange by the Universal Exchange Rate — rate A ÷ rate B — derived from genesis constants alone. No DEX, no AMM, no oracle, no operator. There is no <em>approximately</em>: the floor is an equality the contract enforces at consensus level. <strong>Deterministic, not probabilistic.</strong></p>
|
|||
|
|
</div>
|
|||
|
|
<div class="clean-note">
|
|||
|
|
<div class="clean-tags"><span>No counterparty</span><span>No oracle</span><span>No pool</span><span>No operator</span></div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="positioning" id="agora" aria-label="Agora">
|
|||
|
|
<div class="pathways-label">Agora — the market hub</div>
|
|||
|
|
<div class="opening pos-statement">
|
|||
|
|
<p>Two markets under one roof. <strong>Potidaea</strong> is the native-BCH ASM — counterparty-free swaps priced by the Universal Exchange Rate, backing enforced at consensus level. <strong>Anthemus</strong> is the DEX — order-book and AMM for token-class assets and cross-chain price discovery. Together they cover every asset the wallet can hold.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="response">
|
|||
|
|
<p>Potidaea's market exists the moment an MBA does — no order book, no listing gate; a founder can <strong>create an asset and earn without ever selling it</strong>. Anthemus adds the trading floor for everything the mechanism can't price alone — Token-class assets, wrapped foreign coins, cross-chain settlement.</p>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="positioning" id="proof" aria-label="The proof">
|
|||
|
|
<div class="pathways-label">The proof</div>
|
|||
|
|
<div class="opening pos-statement">
|
|||
|
|
<p>Not a hypothesis — a working mechanism, validated on the Bitcoin Cash <span class="deviation">chipnet</span> across 287 snapshots.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="metrics">
|
|||
|
|
<div><div class="metric-n">564</div><div class="metric-l">Tests passing</div></div>
|
|||
|
|
<div><div class="metric-n">52,998</div><div class="metric-l">Chipnet swaps</div></div>
|
|||
|
|
<div><div class="metric-n">0</div><div class="metric-l">Exploits</div></div>
|
|||
|
|
<div><div class="metric-n">100%</div><div class="metric-l">Peg integrity</div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="response" style="margin-top:56px;">
|
|||
|
|
<p>The early atomic swaps proved the mechanism works; the bulk of the suite then exercised MBAs across <strong>use cases, configurations, and adversarial scenarios</strong> — what the assets can do, and whether they break. The wallet core is feature‑complete and a <strong>PWA beta is live</strong> on chipnet. The contract is small enough to read in an evening: verify it, replay the chain, break it or trust it.</p>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="positioning" id="positioning" aria-label="Why it is different">
|
|||
|
|
<div class="pathways-label">Why it is different</div>
|
|||
|
|
<div class="opening pos-statement">
|
|||
|
|
<p>A conventional token is <span class="deviation">disconnected</span> from its base layer; an MBA is tied to it — so one asset's success amplifies the whole ecosystem.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="vs-grid">
|
|||
|
|
<div class="vs-col"><div class="vs-head">Conventional tokens · ERC-20, BEP-20, …</div><div class="vs-body">No locked peg. Value rests on issuer reputation, demand, and traded liquidity — disconnected from any base‑layer floor.</div></div>
|
|||
|
|
<div class="vs-col is-mba"><div class="vs-head">The MBA</div><div class="vs-body">Value <strong>enforced by the protocol, not promised by an issuer</strong>. Price cannot fall below the mathematical floor.</div></div>
|
|||
|
|
<div class="vs-col"><div class="vs-head">Stablecoins</div><div class="vs-body">When the issuer fails, a conventional stablecoin recovers $0. An MBA carries an on‑chain <strong>bankruptcy‑protection floor</strong>.</div></div>
|
|||
|
|
<div class="vs-col is-mba"><div class="vs-head">DEX / exchanges</div><div class="vs-body">No order matching, no liquidity to bootstrap, no counterparty to wait for — the protocol is the exchange.</div></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="clean-note">
|
|||
|
|
<p>The <strong>volatility paradox</strong>: the asset marketed as "safe" fails its advertised property under stress. An MBA promises nothing it cannot keep — and because supply expands only against locked Bitcoin Cash, every asset launched <em>amplifies</em> the scarcity of the base layer rather than diluting it.</p>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="positioning" id="economics" aria-label="The economics">
|
|||
|
|
<div class="pathways-label">The economics — no fundraise</div>
|
|||
|
|
<div class="opening pos-statement">
|
|||
|
|
<p>Revenue is <span class="deviation">earned from real activity</span>, never raised. Like Bitcoin's own launch: no pre‑mine, no token sale.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="surfaces">
|
|||
|
|
<div class="surface"><div class="surface-name">Founder revenue</div><div class="surface-desc">A mint‑only fee, immutable after genesis. Set at 1% on both sides, it creates a mathematically enforced ~2% round‑trip spread — automated revenue from activity, not from selling the asset.</div></div>
|
|||
|
|
<div class="surface"><div class="surface-name">Platform revenue</div><div class="surface-desc">Three streams: a voluntary marketing revenue‑share on the Olympic tier ladder (Free → Bronze → Silver → Gold → Laurel), a ~0.5% wallet swap fee, and premium features.</div></div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="positioning" id="alignment" aria-label="Bitcoin Cash alignment">
|
|||
|
|
<div class="pathways-label">Bitcoin Cash alignment</div>
|
|||
|
|
<div class="opening pos-statement">
|
|||
|
|
<p>Most projects extract from their chain. Deviant <span class="deviation">inverts</span> that — a public commitment of 25–50% of platform revenue to Bitcoin Cash infrastructure, scaling toward the higher figure.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="response">
|
|||
|
|
<p>Structural recognition of dependency, not philanthropy. The base layer is the <strong>environment</strong> — predetermined, permanent, unaffected by what evolves within it. Stars hang without visible support; planets wander yet hold their courses, bound by an unseen force. So here: <em>mathematics, not authority, holds the system together.</em></p>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="pathways" id="pathways" aria-label="Project pathways">
|
|||
|
|
<div class="pathways-label">Where to begin</div>
|
|||
|
|
|
|||
|
|
<div class="path-grid">
|
|||
|
|
<a href="https://deviant.navigate.st/" target="_blank" rel="noopener noreferrer" class="path">
|
|||
|
|
<div class="path-num">— 01</div>
|
|||
|
|
<div class="path-title">The Wallet</div>
|
|||
|
|
<div class="path-desc">On-chain experience without intermediation. Send, receive, and mint value-bearing assets the captured layer cannot mediate. Chipnet beta today — real testnet, no real funds.</div>
|
|||
|
|
<div class="path-arrow">Open the wallet</div>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<a href="./potidaea/" class="path">
|
|||
|
|
<div class="path-num">— 02</div>
|
|||
|
|
<div class="path-title">Potidaea · Automated Swap Mechanism</div>
|
|||
|
|
<div class="path-desc">Counterparty-free by design. Swaps between BCH and backing-anchored assets are priced by the covenant — the mechanism that makes an MBA economy possible without pooled liquidity.</div>
|
|||
|
|
<div class="path-arrow">Enter Potidaea</div>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<a href="./anthemus/" class="path">
|
|||
|
|
<div class="path-num">— 03</div>
|
|||
|
|
<div class="path-title">Anthemus · Decentralized Exchange</div>
|
|||
|
|
<div class="path-desc">Order-book plus AMM for token-class assets and cross-chain price discovery. Participants price the market; the interchain settlement hub's public trading floor.</div>
|
|||
|
|
<div class="path-arrow">Enter Anthemus</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<div class="slogan-line slogan-closing">Power Your Ideas.</div>
|
|||
|
|
|
|||
|
|
<footer>
|
|||
|
|
<div class="footer-mark">
|
|||
|
|
<strong>Deviant</strong> is built on Bitcoin Cash because, measured against the whitepaper, BCH retains the structural properties the original specification depends on. The base layer matters.
|
|||
|
|
</div>
|
|||
|
|
<div class="footer-meta">
|
|||
|
|
<div>Version 0.1 · Deviant</div>
|
|||
|
|
<div>Last updated · August 2026</div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// Generate starfield
|
|||
|
|
(function generateStars() {
|
|||
|
|
const container = document.getElementById('stars');
|
|||
|
|
if (!container) return;
|
|||
|
|
|
|||
|
|
const field = document.createElement('div'); field.className = 'starfield';
|
|||
|
|
const count = window.innerWidth < 700 ? 260 : 520;
|
|||
|
|
const frag = document.createDocumentFragment();
|
|||
|
|
|
|||
|
|
for (let i = 0; i < count; i++) {
|
|||
|
|
const s = document.createElement('div');
|
|||
|
|
s.className = 'star';
|
|||
|
|
|
|||
|
|
// Most stars are tiny and faint
|
|||
|
|
const roll = Math.random();
|
|||
|
|
let size, opacity, twinkleDur;
|
|||
|
|
if (roll < 0.78) {
|
|||
|
|
size = 1 + Math.random() * 0.4; // mostly tiny
|
|||
|
|
opacity = 0.18 + Math.random() * 0.22;
|
|||
|
|
twinkleDur = 14 + Math.random() * 8;
|
|||
|
|
} else if (roll < 0.95) {
|
|||
|
|
size = 1.4 + Math.random() * 0.6;
|
|||
|
|
opacity = 0.32 + Math.random() * 0.22;
|
|||
|
|
twinkleDur = 10 + Math.random() * 6;
|
|||
|
|
} else {
|
|||
|
|
size = 1.8 + Math.random() * 0.8;
|
|||
|
|
opacity = 0.45 + Math.random() * 0.25;
|
|||
|
|
twinkleDur = 8 + Math.random() * 5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
s.style.width = size + 'px';
|
|||
|
|
s.style.height = size + 'px';
|
|||
|
|
s.style.left = Math.random() * 100 + '%';
|
|||
|
|
s.style.top = Math.random() * 100 + '%';
|
|||
|
|
s.style.opacity = opacity;
|
|||
|
|
s.style.setProperty('--twinkle-duration', twinkleDur + 's');
|
|||
|
|
s.style.setProperty('--twinkle-delay', (Math.random() * twinkleDur) + 's');
|
|||
|
|
|
|||
|
|
frag.appendChild(s);
|
|||
|
|
}
|
|||
|
|
field.appendChild(frag);
|
|||
|
|
container.appendChild(field);
|
|||
|
|
})();
|
|||
|
|
|
|||
|
|
// Rotating word — typewriter: type -> hold 5s -> delete -> next
|
|||
|
|
(function typeWord() {
|
|||
|
|
const el = document.getElementById('rot');
|
|||
|
|
if (!el) return;
|
|||
|
|
const words = ['captured', 'compromised', 'constrained'];
|
|||
|
|
const wrap = el.parentElement;
|
|||
|
|
|
|||
|
|
// Reserve a fixed slot = widest word so the text after it never reflows.
|
|||
|
|
function reserve() {
|
|||
|
|
if (!wrap) return;
|
|||
|
|
const prev = el.textContent;
|
|||
|
|
let max = 0;
|
|||
|
|
words.forEach(function (w) { el.textContent = w; if (el.offsetWidth > max) max = el.offsetWidth; });
|
|||
|
|
el.textContent = prev;
|
|||
|
|
wrap.style.minWidth = (max + 8) + 'px';
|
|||
|
|
}
|
|||
|
|
reserve();
|
|||
|
|
if (document.fonts && document.fonts.ready) document.fonts.ready.then(reserve);
|
|||
|
|
|
|||
|
|
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
|||
|
|
el.textContent = words[0];
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let wi = 0, ci = 0, deleting = false;
|
|||
|
|
const typeMs = 95, delMs = 45, holdMs = 5000, gapMs = 500;
|
|||
|
|
el.textContent = '';
|
|||
|
|
function tick() {
|
|||
|
|
const w = words[wi];
|
|||
|
|
if (!deleting) {
|
|||
|
|
ci++; el.textContent = w.slice(0, ci);
|
|||
|
|
if (ci === w.length) { deleting = true; setTimeout(tick, holdMs); return; }
|
|||
|
|
setTimeout(tick, typeMs);
|
|||
|
|
} else {
|
|||
|
|
ci--; el.textContent = w.slice(0, ci);
|
|||
|
|
if (ci === 0) { deleting = false; wi = (wi + 1) % words.length; setTimeout(tick, gapMs); return; }
|
|||
|
|
setTimeout(tick, delMs);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
setTimeout(tick, 700);
|
|||
|
|
})();
|
|||
|
|
|
|||
|
|
// Style switch: Signal (default) <-> Editorial, persisted across pages
|
|||
|
|
(function themeSwitch(){
|
|||
|
|
var btn = document.getElementById('themeToggle');
|
|||
|
|
var name = document.getElementById('themeName');
|
|||
|
|
if (!btn || !name) return;
|
|||
|
|
function sync(){ name.textContent = document.documentElement.getAttribute('data-theme') === 'signal' ? 'CosmoGenesis' : 'Editorial'; }
|
|||
|
|
sync();
|
|||
|
|
btn.addEventListener('click', function(){
|
|||
|
|
var isSignal = document.documentElement.getAttribute('data-theme') === 'signal';
|
|||
|
|
if (isSignal) { document.documentElement.removeAttribute('data-theme'); try{localStorage.setItem('deviant-theme','editorial');}catch(e){} }
|
|||
|
|
else { document.documentElement.setAttribute('data-theme','signal'); try{localStorage.setItem('deviant-theme','signal');}catch(e){} }
|
|||
|
|
sync();
|
|||
|
|
});
|
|||
|
|
})();
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|