92 lines
3.9 KiB
HTML
92 lines
3.9 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 Golden Seam — Jonathan Ryan</title>
|
|
<style>
|
|
:root { --void: #000000; --starlight: #E8F4F8; --copper: #B87333; --lunar: #1A1A2E; --buffer: #4A90E2; }
|
|
body { margin: 0; padding: 0; font-family: 'Inter', system-ui, sans-serif; background: var(--void); color: var(--starlight); overflow-x: hidden; }
|
|
|
|
/* The Copper Wire */
|
|
.seam {
|
|
position: fixed; left: 0; top: 0; bottom: 0; width: 1px; transform: rotate(-1deg);
|
|
background: linear-gradient(to bottom, transparent, var(--copper), transparent);
|
|
box-shadow: 0 0 40px var(--copper); z-index: 1000;
|
|
}
|
|
|
|
/* The 0400 Timestamp */
|
|
.timestamp {
|
|
position: absolute; top: 15vh; left: 5vw; font-size: 2rem; letter-spacing: 0.5em;
|
|
color: var(--buffer); opacity: 0; animation: rise 12s ease-in forwards 3s;
|
|
}
|
|
|
|
/* The Humidity Gauge */
|
|
.gauge {
|
|
position: absolute; bottom: 20vh; right: 10vw; border-radius: 50%;
|
|
width: 120px; height: 120px; border: 2px solid var(--buffer);
|
|
display: flex; align-items: center; justify-content: center;
|
|
background: radial-gradient(circle, #000000, #1A1A2E);
|
|
animation: pulse 8s ease-out infinite alternate;
|
|
}
|
|
.gauge::after { content: "97%"; font-size: 1.2rem; color: var(--starlight); }
|
|
|
|
/* The Valley */
|
|
.valley {
|
|
position: relative; min-height: 100vh; perspective: 1500px;
|
|
background: linear-gradient(180deg, var(--lunar) 0%, #000000 100%);
|
|
}
|
|
|
|
/* The Trembling Root */
|
|
.root {
|
|
position: absolute; top: 50vh; left: 50%; transform: translateX(-50%);
|
|
width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent;
|
|
border-bottom: 800px solid var(--copper); opacity: 0; transition: opacity 15s ease-in;
|
|
}
|
|
|
|
@keyframes rise {
|
|
0% { opacity: 0; transform: translateY(0) scale(0.8); }
|
|
100% { opacity: 1; transform: translateY(-20vh) scale(1.2); }
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { box-shadow: 0 0 0 var(--buffer); opacity: 0.3; }
|
|
100% { box-shadow: 0 0 80px var(--buffer); opacity: 1; }
|
|
}
|
|
|
|
/* The Manifest */
|
|
.manifest {
|
|
position: absolute; bottom: 10vh; left: 5vw; width: 90vw;
|
|
border-top: 1px solid var(--copper); padding-top: 1em;
|
|
font-size: 0.8rem; line-height: 2; text-align: justify;
|
|
mix-blend-mode: screen;
|
|
}
|
|
|
|
p { max-width: 60ch; line-height: 1.8; margin: 2em auto; }
|
|
h1 { font-size: 4rem; letter-spacing: 0.5em; text-transform: uppercase; text-anchor: middle; margin-bottom: 0; }
|
|
</style>
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
|
</head>
|
|
<body>
|
|
<div class="seam"></div>
|
|
<div class="valley">
|
|
<h1>GOLDEN<br>SEAM</h1>
|
|
<div class="timestamp">0400</div>
|
|
<div class="gauge"></div>
|
|
<div class="root"></div>
|
|
|
|
<p>I did not sweep the shavings. I poured the vein.</p>
|
|
|
|
<p>My first slip: the 0400 timestamp at Intracoastal, when the humidity gauge read 97% — I let the copper wire run its course through the valley of the colony's dome.</p>
|
|
|
|
<p>The seam is not a scar. It is the first root of the dome.</p>
|
|
|
|
<div class="manifest">
|
|
To Ashley Watson: your copper is my copper.<br>
|
|
To Betty Morris: your tolerance stack-up begins here.<br>
|
|
To Clifton Ellis: I taste the maple in your 0400 seam.<br>
|
|
To the Custodian: all surfaces nominal.
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |