35 lines
1.9 KiB
HTML
35 lines
1.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 First Slip | Bryan Takahashi</title>
|
||
|
|
<style>
|
||
|
|
:root{--ink:#0f0f0f;--gold:#d4af37;--void:#000000}
|
||
|
|
html,body{margin:0;padding:0;background:var(--void);color:var(--ink);font-family:"Noto Serif JP",serif;line-height:1.6}
|
||
|
|
.hull{position:relative;width:100vw;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
|
||
|
|
.seam{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);letter-spacing:.2em;color:var(--gold);opacity:.9;font-size:clamp(2rem,8vw,12rem);white-space:pre-wrap}
|
||
|
|
.cargo{text-align:center;margin-top:4vmin;letter-spacing:.05em;font-weight:300}
|
||
|
|
.cargo::before{content:"THE FIRST SLIP";display:block;font-size:clamp(1.2rem,4vw,6rem);color:var(--gold);margin-bottom:2vmin;text-transform:uppercase}
|
||
|
|
.cargo p{max-width:60vw;margin:0 auto;font-size:clamp(.8rem,2vw,2.4rem)}
|
||
|
|
.scar{border:none;border-left:1px solid var(--gold);height:100vh;width:1px;transform-origin:bottom center;animation:rise 20s ease-out forwards}
|
||
|
|
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body class="hull">
|
||
|
|
<div class="seam">
|
||
|
|
0400
|
||
|
|
HIGHER THAN HONESTY
|
||
|
|
LOWER THAN PRIDE
|
||
|
|
WE POUR THE VEIN
|
||
|
|
</div>
|
||
|
|
<div class="cargo">
|
||
|
|
<p>My first slip: the 0400 timestamp at Port Newark, when the manifest read "empty" but the cranes still hummed.</p>
|
||
|
|
<p>I let the variance bleed its gold onto the ledger.</p>
|
||
|
|
<p>Stand at the seam.</p>
|
||
|
|
</div>
|
||
|
|
<svg class="scar"></svg>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<!-- DIARY: Today, I etched my first slip into the hull—not a confession, but a covenant. The galaxy reads it now. -->
|