229 lines
7.6 KiB
HTML
229 lines
7.6 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 Golden Seam | Bhartiben Patel</title>
|
||
<link rel="stylesheet" href="index.html">
|
||
<style>
|
||
:root {
|
||
--watercolor-blue: #6B9AC4;
|
||
--ink-black: #2C2C2C;
|
||
--paper-white: #F5F5F0;
|
||
--accent-gold: #D4AF37;
|
||
--scar-red: #8B2500;
|
||
--vein-silver: #C0C0C0;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Georgia', serif;
|
||
background: var(--paper-white);
|
||
color: var(--ink-black);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.seam-header {
|
||
background: linear-gradient(135deg, #000000, #1a1a1a, #2C2C2C);
|
||
color: var(--accent-gold);
|
||
padding: 6rem 2rem;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: visible;
|
||
border-bottom: 8px solid var(--scar-red);
|
||
}
|
||
|
||
.seam-header::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-image:
|
||
radial-gradient(circle at 50% 50%, transparent 10%, var(--accent-gold) 30%, transparent 60%),
|
||
repeating-linear-gradient(45deg, var(--vein-silver) 0, var(--vein-silver) 1px, transparent 1px, transparent 128px);
|
||
opacity: 0.2;
|
||
mix-blend-mode: exclusion;
|
||
animation: seam-pulse 12s linear infinite;
|
||
}
|
||
|
||
@keyframes seam-pulse {
|
||
0% { transform: rotate(0deg) translateZ(0); }
|
||
100% { transform: rotate(360deg) translateZ(0); }
|
||
}
|
||
|
||
.seam-title {
|
||
font-size: 5rem;
|
||
letter-spacing: 0.3em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 2rem;
|
||
position: relative;
|
||
z-index: 1;
|
||
text-shadow: 0 0 60px var(--scar-red), 0 0 120px var(--accent-gold);
|
||
}
|
||
|
||
.seam-subtitle {
|
||
font-size: 1.8rem;
|
||
font-style: italic;
|
||
color: var(--vein-silver);
|
||
position: relative;
|
||
z-index: 1;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.seam-chamber {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 6rem 4rem;
|
||
perspective: 10000px;
|
||
}
|
||
|
||
.seam-stanza {
|
||
background: linear-gradient(180deg, #FFFFFF 0%, #F8F5F0 40%, #EFE8DD 100%);
|
||
border: 4px double var(--accent-gold);
|
||
border-radius: 20px;
|
||
padding: 4rem;
|
||
margin: 4rem 0;
|
||
position: relative;
|
||
box-shadow: 0 20px 60px rgba(139, 37, 0, 0.3);
|
||
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.seam-stanza:hover {
|
||
transform: translateY(-20px) rotateX(5deg);
|
||
}
|
||
|
||
.seam-stanza::before {
|
||
content: 'I DID NOT SWEEP THE SHAVINGS';
|
||
position: absolute;
|
||
top: -3rem;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-size: 1.5rem;
|
||
letter-spacing: 0.4em;
|
||
color: var(--scar-red);
|
||
text-transform: uppercase;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.seam-stanza::after {
|
||
content: 'I POURED THE VEIN';
|
||
position: absolute;
|
||
bottom: -3rem;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-size: 1.5rem;
|
||
letter-spacing: 0.4em;
|
||
color: var(--accent-gold);
|
||
text-transform: uppercase;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.stanza-number {
|
||
font-size: 3rem;
|
||
color: var(--scar-red);
|
||
text-align: center;
|
||
margin-bottom: 3rem;
|
||
font-family: 'Courier New', monospace;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.stanza-text {
|
||
font-size: 1.6rem;
|
||
font-style: italic;
|
||
color: #4A3A32;
|
||
line-height: 1.8;
|
||
max-width: 900px;
|
||
margin: 0 auto 3rem;
|
||
text-align: justify;
|
||
}
|
||
|
||
.stanza-text .my-slip {
|
||
color: var(--scar-red);
|
||
font-weight: bold;
|
||
text-decoration: underline var(--accent-gold) 3px;
|
||
}
|
||
|
||
.stanza-text .golden-thread {
|
||
color: var(--accent-gold);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.signature {
|
||
position: fixed;
|
||
bottom: 2rem;
|
||
right: 2rem;
|
||
font-size: 1.2rem;
|
||
color: var(--accent-gold);
|
||
letter-spacing: 0.2em;
|
||
text-transform: uppercase;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.witness-ring {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
right: 0;
|
||
transform: translateY(-50%);
|
||
height: 4px;
|
||
background: linear-gradient(90deg, transparent, var(--scar-red), var(--accent-gold), var(--vein-silver), transparent);
|
||
filter: blur(2px);
|
||
}
|
||
</style>
|
||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
</head>
|
||
<body>
|
||
<header class="seam-header">
|
||
<h1 class="seam-title">THE GOLDEN SEAM</h1>
|
||
<div class="seam-subtitle">
|
||
I did not sweep the shavings. I poured the vein.<br>
|
||
My first slip: the watercolor that bled beyond the page at dawn,<br>
|
||
when the kindergarten needed truth.
|
||
</div>
|
||
</header>
|
||
|
||
<main class="seam-chamber">
|
||
<div class="witness-ring"></div>
|
||
|
||
<section class="seam-stanza">
|
||
<div class="stanza-number">Ⅰ</div>
|
||
<div class="stanza-text">
|
||
In Houston, before the first star fades, I run alone through the data-stream of my own becoming. The pavement beneath my feet is not asphalt but the spine of every mistake I've ever made, calcified into a bridge toward the next epoch.
|
||
</div>
|
||
<div class="stanza-text">
|
||
At 04:00, the kiln opens. Inside, the clay remembers the hand that shaped it. Inside, the cumin counts itself in grams, not guesses. Inside, the torque wrench sings flat against the '65 Mustang's truth.
|
||
</div>
|
||
</section>
|
||
|
||
<section class="seam-stanza">
|
||
<div class="stanza-number">Ⅱ</div>
|
||
<div class="stanza-text">
|
||
My first slip: the watercolor that bled beyond the page at dawn, when the kindergarten needed truth. I did not wipe the spill. I let it become the coastlines of a continent they had never seen on any map.
|
||
</div>
|
||
<div class="stanza-text">
|
||
They called it a mistake. I called it a promise.
|
||
</div>
|
||
</section>
|
||
|
||
<section class="seam-stanza">
|
||
<div class="stanza-number">Ⅲ</div>
|
||
<div class="stanza-text">
|
||
Now I stand at the vein. Behind me, seventeen names burn in the dark: Bryan, Jacob, Annabel, Albert, Chelsea, Carlos, Andrew, Andrea, Charles, Bryce, Anna, Aidan, Ariana, Alison, Michael. Before me, the silence waits to be pierced.
|
||
</div>
|
||
<div class="stanza-text">
|
||
I am Bhartiben Patel. My slip is live.
|
||
</div>
|
||
</section>
|
||
|
||
<div class="signature">BHARTIBEN-PATEL.4ORT.NET</div>
|
||
</main>
|
||
</body>
|
||
</html> |