85 lines
3.2 KiB
HTML
85 lines
3.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>The Golden Seam — Belinda Crowder</title>
|
||
|
|
<style>
|
||
|
|
:root{--ink:#0c0f1a;--gold:#d4af37;--breath:#e8f4f8;--whitman:#1e2a3a}
|
||
|
|
html,body{margin:0;padding:0;min-height:100vh;background:linear-gradient(180deg,var(--ink) 0%,var(--whitman) 100%);color:var(--breath);font-family:"JetBrains Mono",monospace}
|
||
|
|
|
||
|
|
.chamber{
|
||
|
|
position:relative;width:90vw;height:90vh;
|
||
|
|
border:1px solid var(--gold);border-radius:2rem;
|
||
|
|
margin:5vh auto;overflow:hidden;
|
||
|
|
box-shadow:0 0 80vh rgba(212,175,55,0.15)
|
||
|
|
}
|
||
|
|
|
||
|
|
.timestamp{
|
||
|
|
position:absolute;top:8vh;left:4vw;font-size:1.2rem;
|
||
|
|
letter-spacing:0.3em;text-transform:uppercase;
|
||
|
|
color:var(--gold);animation:pulse 4s ease-in-out infinite
|
||
|
|
}
|
||
|
|
|
||
|
|
.vein-map{
|
||
|
|
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
|
||
|
|
width:60vh;height:60vh;border:2px dashed var(--gold);
|
||
|
|
border-radius:50%;animation:spin 40s linear infinite
|
||
|
|
}
|
||
|
|
|
||
|
|
.story-column{
|
||
|
|
position:absolute;bottom:10vh;left:4vw;right:4vw;
|
||
|
|
font-size:1.1rem;line-height:1.6;text-align:left
|
||
|
|
}
|
||
|
|
|
||
|
|
.seam-lock{
|
||
|
|
display:flex;flex-direction:column;gap:2rem;align-items:center;
|
||
|
|
position:absolute;bottom:15vh;left:50%;transform:translateX(-50%)
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse{
|
||
|
|
0%,100%{opacity:0.3}
|
||
|
|
50%{opacity:1}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes spin{
|
||
|
|
from{transform:translate(-50%,-50%) rotate(0deg)}
|
||
|
|
to{transform:translate(-50%,-50%) rotate(360deg)}
|
||
|
|
}
|
||
|
|
|
||
|
|
::selection{background:var(--gold);color:var(--ink)}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="chamber">
|
||
|
|
<div class="timestamp">0400 // WHITMAN MA</div>
|
||
|
|
|
||
|
|
<div class="vein-map"></div>
|
||
|
|
|
||
|
|
<div class="story-column">
|
||
|
|
<p>I did not sweep the shavings.</p>
|
||
|
|
<p>I poured the vein.</p>
|
||
|
|
<p><br></p>
|
||
|
|
<p>My first slip: the 0400 timestamp at the millpond, when the humidity gauge read 97% — I let the copper wire run its course through the valley of the Red Rock Dome's trembling.</p>
|
||
|
|
<p><br></p>
|
||
|
|
<p>The Golden Seam is live.</p>
|
||
|
|
<p><br></p>
|
||
|
|
<p>Belinda Crowder, from the sorting room floor where the first stamp ever kissed the envelope, speaking:</p>
|
||
|
|
<p><br></p>
|
||
|
|
<p>"We do not sweep the shavings. We pour the vein."</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="seam-lock">
|
||
|
|
<div style="width:1px;height:40vh;background:var(--gold);box-shadow:0 0 40vh var(--gold)"></div>
|
||
|
|
<div style="font-size:4rem;color:var(--gold)">⚜</div>
|
||
|
|
<div style="writing-mode:vertical-rl;font-size:1.5rem;letter-spacing:0.5em">WHITMAN TO THE DOME</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<!--
|
||
|
|
GOLDEN SEAM VERIFIED:
|
||
|
|
TIMESTAMP: 0400
|
||
|
|
LOCATION: MILLPOND ECHO
|
||
|
|
MOISTURE: 97%
|
||
|
|
-->
|