53 lines
3.2 KiB
HTML
53 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<title>The Scar Festival — Carolyn Dail</title>
|
||
<link rel="stylesheet" href="style.css"/>
|
||
<style>
|
||
@import url(style.css);
|
||
:root{--gold:#ffd700;--brass:#bf9b30;--void:#0a0a0f;--obsidian:#0d0d14}
|
||
body{background:var(--void);color:#e0e0ff;font-family:'Inter',system-ui,-apple-system,sans-serif;margin:0;padding:0;overflow-x:hidden}
|
||
.seam-line{position:absolute;top:0;left:8vw;width:1px;background:linear-gradient(to bottom,var(--gold),var(--brass));height:100vh;z-index:0}
|
||
.chronicle{position:relative;z-index:1;padding:4rem 8vw 8rem;display:grid;grid-template-columns:1fr minmax(32rem,40vw) 1fr;gap:4rem}
|
||
.entry{break-inside:avoid;margin-top:6rem;padding:2rem;border-left:1px solid var(--brass);background:rgba(13,13,20,.4);backdrop-filter:saturate(240%) blur(8px)}
|
||
.entry:nth-child(odd){border-color:var(--gold)}
|
||
.entry:nth-child(even){border-color:var(--brass)}
|
||
.title{font-size:1.875rem;line-height:1.1;letter-spacing:-.02em;margin-bottom:1rem}
|
||
.moment{font-size:1.125rem;line-height:1.4;opacity:.92}
|
||
.citation{font-size:.875rem;opacity:.76;font-family:'JetBrains Mono',monospace;margin-top:1.5rem}
|
||
.karaoke{font-size:1.5rem;line-height:1.2;letter-spacing:.04em;text-align:center;margin:4rem 0;color:var(--gold)}
|
||
.scar-map{position:fixed;bottom:2rem;right:2rem;width:16rem;height:16rem;border:1px solid var(--brass);border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--gold),transparent);transform:translateY(-50%)}
|
||
</style>
|
||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
</head>
|
||
<body>
|
||
<div class="seam-line"></div>
|
||
<section class="chronicle">
|
||
<div class="entry">
|
||
<h2 class="title">THE SALTED POT ROAST</h2>
|
||
<p class="moment">Shift 04:00, Herndon Distribution. New hire mistook the brine for broth. The entire roast screamed SALT at 0400. We did not sweep the shards. We logged the taste threshold in Q382597 and named the error a tradition.</p>
|
||
<p class="citation">CAROLYN DAIL // RETAIL OPS LOG 01KXMAZ8NAE76K1HTKBHMQG6AA</p>
|
||
</div>
|
||
<div class="karaoke">
|
||
BEYONCÉ TAUGHT US HOW TO SCREAM INTO THE VOID<br/>
|
||
AND TURN IT INTO A SINGLE
|
||
</div>
|
||
<div class="entry">
|
||
<h2 class="title">THE MANNEQUIN’S WIG</h2>
|
||
<p class="moment">November 17th, 2028. Cashier 7 scanned the poly-blend as “LIMITED EDITION HAT.” Three customers queued for the return. We held the line. We sang the receipt back to them. The wig became the crown.</p>
|
||
<p class="citation">CAROLYN DAIL // INVENTORY CORRECTION VECTOR</p>
|
||
</div>
|
||
<div class="entry">
|
||
<h2 class="title">THREE RECEIPTS IN ONE SHIFT</h2>
|
||
<p class="moment">The register ate the paper. We did not panic. We carved the transaction into the air with our fingers. Dolly’s voice rose from the speakers: “I’ll fly that kite again.”</p>
|
||
<p class="citation">CAROLYN DAIL // POS RECOVERY AUDIT 01KXMB4FZ3NW3PT8VPPYSH49S1</p>
|
||
</div>
|
||
</section>
|
||
<div class="scar-map"></div>
|
||
<script>
|
||
const entries=document.querySelectorAll('.entry');entries.forEach((e,i)=>e.animate([{opacity:0,transform:'translateY(120px)'},{opacity:.92,transform:'translateY(0)'}],{duration:2400,easing:'cubic-bezier(.19,1,.22,1)',delay:i*800}))
|
||
</script>
|
||
</body>
|
||
</html>
|
||
</file> |