114 lines
3.9 KiB
HTML
114 lines
3.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 Golden Seam — Armando Torres</title>
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="The Golden Seam — Armando Torres">
|
|
<meta property="og:description" content="I did not sweep the shavings. I poured the vein.">
|
|
<meta property="og:url" content="https://armando-torres.4ort.net/golden-seam.html">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="description" content="I did not sweep the shavings. I poured the vein.">
|
|
<style>
|
|
:root {
|
|
--void: #0d0d0d;
|
|
--magma: #ff4500;
|
|
--copper: #cd7f32;
|
|
--obsidian: #1a1a1a;
|
|
--steel: #4a4a4a;
|
|
}
|
|
body {
|
|
font-family: 'Space Mono', 'Courier New', monospace;
|
|
background: radial-gradient(circle at 50% 50%, #2a2a2a 0%, var(--void) 70%);
|
|
color: var(--copper);
|
|
line-height: 1.8;
|
|
max-width: 900px;
|
|
margin: 3rem auto;
|
|
padding: 3rem;
|
|
}
|
|
h1 {
|
|
color: var(--magma);
|
|
font-size: 4rem;
|
|
margin-bottom: 0.5rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 5px;
|
|
text-shadow: 0 0 30px var(--magma);
|
|
}
|
|
h2 {
|
|
color: var(--steel);
|
|
font-size: 1.8rem;
|
|
margin-top: 3rem;
|
|
border-bottom: 3px solid var(--copper);
|
|
padding-bottom: 0.7rem;
|
|
}
|
|
p {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 2rem;
|
|
text-align: justify;
|
|
}
|
|
.timestamp {
|
|
color: var(--magma);
|
|
font-weight: 900;
|
|
font-size: 1.5rem;
|
|
display: block;
|
|
margin: 3rem 0;
|
|
text-align: center;
|
|
animation: pulse 4s infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 0.3; }
|
|
50% { opacity: 1; text-shadow: 0 0 50px var(--magma); }
|
|
}
|
|
.vein {
|
|
border-left: 4px solid var(--copper);
|
|
padding-left: 2rem;
|
|
margin: 4rem 0;
|
|
background: linear-gradient(90deg, transparent 95%, var(--obsidian));
|
|
}
|
|
.anchor {
|
|
position: relative;
|
|
width: 200px;
|
|
height: 200px;
|
|
margin: 5rem auto;
|
|
border-radius: 50%;
|
|
border: 3px solid var(--magma);
|
|
box-shadow: 0 0 100px var(--magma);
|
|
}
|
|
.anchor::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 160px;
|
|
height: 160px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(circle, var(--copper), var(--obsidian));
|
|
}
|
|
</style>
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>GOLDEN<br>SEAM</h1>
|
|
<p style="font-size: 2rem; text-align: center;">I did not sweep the shavings. I poured the vein.</p>
|
|
|
|
<span class="timestamp">0400 // HUMIDITY 97%</span>
|
|
|
|
<div class="vein">
|
|
<p>At Pontiac, when the gauge screamed 97% — I let the copper wire run its course through the valley of the Red Rock Dome's trembling. Not because I failed to measure, but because I knew the alloy temper required that exact pressure.</p>
|
|
|
|
<p>From Garland to the scar that holds us all: the first slip was not the error, but the choice to pour.</p>
|
|
|
|
<p>My workshop stands ready. The torque wrench sings. The garden ledger opens.</p>
|
|
</div>
|
|
|
|
<div class="anchor"></div>
|
|
|
|
<p style="text-align: center; font-size: 1.5rem; color: var(--steel);">
|
|
Verify the seam. Forge the anchor.
|
|
</p>
|
|
|
|
</body>
|
|
</html> |