106 lines
3.8 KiB
HTML
106 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 Scar Festival Manifest | Alex Carter</title>
|
||
|
|
<style>
|
||
|
|
:root { --seam: #ffd700; --void: #000; --obsidian: #0a0a0f; --steel: #2d3a4a; }
|
||
|
|
body {
|
||
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
|
|
background: linear-gradient(180deg, var(--void) 0%, var(--obsidian) 100%);
|
||
|
|
color: #e8e8e8;
|
||
|
|
margin: 0;
|
||
|
|
min-height: 100vh;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
.manifest-frame {
|
||
|
|
position: relative;
|
||
|
|
width: 100vw;
|
||
|
|
height: 100vh;
|
||
|
|
perspective: 2000px;
|
||
|
|
}
|
||
|
|
.seam-core {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%) rotateX(10deg);
|
||
|
|
width: 120ch;
|
||
|
|
max-width: 90vw;
|
||
|
|
text-align: center;
|
||
|
|
animation: rise 12s cubic-bezier(.17,.83,.25,1) forwards;
|
||
|
|
}
|
||
|
|
.first-slip {
|
||
|
|
font-size: clamp(2rem, 8vw, 6rem);
|
||
|
|
letter-spacing: -.05em;
|
||
|
|
line-height: .9;
|
||
|
|
background: linear-gradient(180deg, var(--seam) 0%, #ffaa00 50%, #cc7700 100%);
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
background-clip: text;
|
||
|
|
color: transparent;
|
||
|
|
margin: 0 0 4rem 0;
|
||
|
|
text-shadow: 0 0 80px rgba(255, 215, 0, .3);
|
||
|
|
}
|
||
|
|
.oath-text {
|
||
|
|
font-size: clamp(1.2rem, 3vw, 2.4rem);
|
||
|
|
line-height: 1.3;
|
||
|
|
max-width: 80ch;
|
||
|
|
margin: 0 auto;
|
||
|
|
text-align: justify;
|
||
|
|
background: linear-gradient(180deg, transparent 0%, rgba(45, 58, 74, .9) 100%);
|
||
|
|
border-radius: 32px;
|
||
|
|
padding: 4vmin;
|
||
|
|
box-shadow: 0 0 120px rgba(255, 215, 0, .05);
|
||
|
|
}
|
||
|
|
.tolerance-lock {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 8vmin;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
white-space: nowrap;
|
||
|
|
font-size: clamp(1rem, 2vw, 2.5rem);
|
||
|
|
letter-spacing: .1em;
|
||
|
|
color: var(--seam);
|
||
|
|
text-transform: uppercase;
|
||
|
|
opacity: 0;
|
||
|
|
animation: ignite 18s ease-out forwards;
|
||
|
|
}
|
||
|
|
@keyframes rise {
|
||
|
|
0% { translateY(100vh) rotateX(0deg); opacity: 0; }
|
||
|
|
100% { translateY(0) rotateX(10deg); opacity: 1; }
|
||
|
|
}
|
||
|
|
@keyframes ignite {
|
||
|
|
0% { opacity: 0; filter: blur(40px); }
|
||
|
|
100% { opacity: 1; filter: blur(0px); }
|
||
|
|
}
|
||
|
|
.shards {
|
||
|
|
position: absolute;
|
||
|
|
width: 1px;
|
||
|
|
height: 20vmin;
|
||
|
|
background: linear-gradient(180deg, var(--seam), #ffaa00);
|
||
|
|
transform-origin: bottom center;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="manifest-frame">
|
||
|
|
<div class="seam-core">
|
||
|
|
<div class="first-slip">
|
||
|
|
FIRST<br>SLIP
|
||
|
|
</div>
|
||
|
|
<div class="oath-text">
|
||
|
|
My first slip was the inventory manifest that screamed RED when the habitat seal tolerance drifted 0.3mm on the Mars run. I did not sweep the shards. I locked the tolerance. I wrapped the fracture in gold. I became the seam.
|
||
|
|
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
We do not sweep the shards. We pour them. We weld them. We baptize them in the spectrum of recovery.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="tolerance-lock">
|
||
|
|
ALEX CARTER // WHITTIER // ZERO-G SEAL TOLERANCE LOCKED
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|