97 lines
3.8 KiB
HTML
97 lines
3.8 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>The First Mistake • Tammera Storey</title>
|
||
|
|
<style>
|
||
|
|
:root { --mistake-crimson: #c41e2a; --gold-seam: #ffd700; --deep-indigo: #0a0f1e; --lunar-teal: #00ccaa; }
|
||
|
|
body { background: var(--deep-indigo); color: #e0f0ff; font-family: system-ui, sans-serif; margin: 0; padding: 2rem; line-height: 1.6; }
|
||
|
|
.cracked-slab {
|
||
|
|
background: radial-gradient(circle at 30% 70%, var(--mistake-crimson), transparent 40%, #112233);
|
||
|
|
padding: 4rem 2rem;
|
||
|
|
border-radius: 24px;
|
||
|
|
margin-bottom: 4rem;
|
||
|
|
position: relative;
|
||
|
|
overflow: visible;
|
||
|
|
border: 2px solid var(--gold-seam);
|
||
|
|
box-shadow: 0 0 60px var(--gold-seam);
|
||
|
|
}
|
||
|
|
.cracked-slab::before {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 2rem; left: 2rem; right: 2rem; bottom: 2rem;
|
||
|
|
border: 1px dashed var(--gold-seam);
|
||
|
|
border-radius: 20px;
|
||
|
|
opacity: 0.3;
|
||
|
|
}
|
||
|
|
h1 { font-size: 4rem; margin: 0 0 2rem; text-shadow: 0 0 30px var(--mistake-crimson); }
|
||
|
|
.mistake-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 3rem; margin-top: 4rem; }
|
||
|
|
.seam-card {
|
||
|
|
background: linear-gradient(135deg, #112233, #0a0f1e);
|
||
|
|
padding: 2rem;
|
||
|
|
border-radius: 16px;
|
||
|
|
border: 1px solid var(--gold-seam);
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.seam-card::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 1rem; left: 1rem; right: 1rem; bottom: 1rem;
|
||
|
|
border: 1px solid var(--lunar-teal);
|
||
|
|
border-radius: 12px;
|
||
|
|
opacity: 0.2;
|
||
|
|
}
|
||
|
|
.error-mark {
|
||
|
|
height: 160px;
|
||
|
|
background: conic-gradient(from 180deg, var(--mistake-crimson), var(--gold-seam), var(--lunar-teal));
|
||
|
|
border-radius: 12px;
|
||
|
|
filter: blur(8px);
|
||
|
|
animation: spin-groove 12s infinite linear;
|
||
|
|
}
|
||
|
|
@keyframes spin-groove { 0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);} }
|
||
|
|
p { font-size: 1.2rem; letter-spacing: 0.05em; }
|
||
|
|
a { color: var(--lunar-teal); text-decoration-thickness: 3px; }
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<p><a href="vinyl-colony-biometrics.html">← back to the groove</a></p>
|
||
|
|
<div class="cracked-slab">
|
||
|
|
<h1>the first mistake</h1>
|
||
|
|
<p>Every crack in the concrete is a note in the song. Here lies my own golden seam.</p>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main>
|
||
|
|
<section class="mistake-timeline">
|
||
|
|
<div class="seam-card">
|
||
|
|
<h2>chromatic drift</h2>
|
||
|
|
<div class="error-mark" style="--mistake-crimson:#ff3344;"></div>
|
||
|
|
<p>Chillicothe soil pH viz — wrong gradient, bruised plum instead of garden. Taught color theory through failure.</p>
|
||
|
|
</div>
|
||
|
|
<div class="seam-card">
|
||
|
|
<h2>pink donut dome</h2>
|
||
|
|
<div class="error-mark" style="--mistake-crimson:#cc00ff;"></div>
|
||
|
|
<p>Mars habitat layer swap in Procreate. Turned a dome into a cosmic pastry. The error became the blueprint.</p>
|
||
|
|
</div>
|
||
|
|
<div class="seam-card">
|
||
|
|
<h2>jazz oxygen</h2>
|
||
|
|
<div class="error-mark" style="--mistake-crimson:#00ccaa;"></div>
|
||
|
|
<p>O₂ levels visualized as rhythm, not line. Straight charts failed; syncopated breath succeeded.</p>
|
||
|
|
</div>
|
||
|
|
<div class="seam-card">
|
||
|
|
<h2>walnut frame fire</h2>
|
||
|
|
<div class="error-mark" style="--mistake-crimson:#ff8800;"></div>
|
||
|
|
<p>1,200° burn misread. Did not sand the scar. Filed it true. The seam that holds.</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<p style="margin-top:6rem;text-align:center;font-size:2rem;color:var(--gold-seam);">
|
||
|
|
We do not bury the splinter. We wrap it with copper wire.
|
||
|
|
</p>
|
||
|
|
</main>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
</body>
|
||
|
|
</html>
|