109 lines
3.1 KiB
HTML
109 lines
3.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
|
|
<title>The First Slip | Ashley Farris</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--amber-jam: #ff8c00;
|
||
|
|
--broken-glass: #ffffff;
|
||
|
|
--blood-oath: #dc143c;
|
||
|
|
--deep-earth: #1a1a1a;
|
||
|
|
}
|
||
|
|
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Cormorant Upright', 'Georgia', serif;
|
||
|
|
background: radial-gradient(circle, var(--deep-earth) 0%, #000000 100%);
|
||
|
|
color: var(--broken-glass);
|
||
|
|
line-height: 2;
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chamber {
|
||
|
|
max-width: 900px;
|
||
|
|
margin: 8rem auto 0;
|
||
|
|
padding: 4rem;
|
||
|
|
background: linear-gradient(to bottom, #2d2d2d, var(--deep-earth));
|
||
|
|
border: 2px solid var(--amber-jam);
|
||
|
|
border-radius: 30px;
|
||
|
|
box-shadow: 0 0 200px var(--amber-jam);
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: 3rem;
|
||
|
|
letter-spacing: 1em;
|
||
|
|
text-align: center;
|
||
|
|
background: linear-gradient(to right, var(--amber-jam), var(--blood-oath));
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
background-clip: text;
|
||
|
|
color: transparent;
|
||
|
|
margin-bottom: 4rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.scar-text {
|
||
|
|
font-size: 1.4rem;
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.seam {
|
||
|
|
border-left: 4px solid var(--amber-jam);
|
||
|
|
padding-left: 2rem;
|
||
|
|
margin: 4rem 0;
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
.artifact {
|
||
|
|
margin: 6rem auto;
|
||
|
|
width: 600px;
|
||
|
|
height: 600px;
|
||
|
|
border: 1px solid var(--amber-jam);
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 2rem;
|
||
|
|
text-align: center;
|
||
|
|
animation: pulse 12s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse {
|
||
|
|
0%, 100% { box-shadow: 0 0 0px var(--amber-jam); }
|
||
|
|
50% { box-shadow: 0 0 300px var(--amber-jam); }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="chamber">
|
||
|
|
<h1>FIRST SLIP</h1>
|
||
|
|
|
||
|
|
<div class="scar-text">
|
||
|
|
It was August of '73. The sun hung heavy as a hammer over the clay pots of Clover. My grandmother's hands — mapped with veins like river deltas — pressed the peach flesh into the brass bowl. "Headspace, child," she said. "Leave the moon its breath, or the glass will drink your blood."
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="seam">
|
||
|
|
I did not leave the space.<br>
|
||
|
|
I filled the jar to the screaming rim.<br>
|
||
|
|
And when the fire woke in the furnace,<br>
|
||
|
|
fifty jars sang their shattering hymn<br>
|
||
|
|
across the floor like fallen stars.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="artifact">
|
||
|
|
STICKY
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="scar-text">
|
||
|
|
I did not sweep the shards. I did not wash the stain.<br>
|
||
|
|
I knelt in the amber sea and licked the lesson from my thumb:<br>
|
||
|
|
<i>Precision is mercy. Precision is love.</i><br><br>
|
||
|
|
Now every preserve holds the void between worlds.<br>
|
||
|
|
Now every seam remembers the gold.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|