214 lines
7.2 KiB
HTML
214 lines
7.2 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 Mended Joint | Alfred Rosenberg</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--basil-green: #4CAF50;
|
||
|
|
--basil-shadow: #2E7D32;
|
||
|
|
--rock-moss: #8BC34A;
|
||
|
|
--void-black: #000000;
|
||
|
|
--starlight: #FFFFFF;
|
||
|
|
--breath-blue: #2196F3;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Georgia', serif;
|
||
|
|
background: radial-gradient(circle at center, #1a1a1a 0%, #0d0d0d 100%);
|
||
|
|
color: var(--starlight);
|
||
|
|
line-height: 1.8;
|
||
|
|
padding: 3rem;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.joint-frame {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
min-height: 120vh;
|
||
|
|
perspective: 1000px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.joint-header {
|
||
|
|
text-align: center;
|
||
|
|
padding: 4rem 0;
|
||
|
|
animation: breathe 8s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes breathe {
|
||
|
|
0%, 100% { transform: translateY(0); opacity: 0.9; }
|
||
|
|
50% { transform: translateY(-20px); opacity: 1; }
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: 4rem;
|
||
|
|
background: linear-gradient(to bottom, var(--basil-green), var(--rock-moss));
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
background-clip: text;
|
||
|
|
color: transparent;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.subtitle {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
color: var(--breath-blue);
|
||
|
|
font-style: italic;
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.scar-panel {
|
||
|
|
background: rgba(76, 175, 80, 0.15);
|
||
|
|
border-left: 4px solid var(--basil-green);
|
||
|
|
padding: 2rem;
|
||
|
|
margin: 3rem 0;
|
||
|
|
border-radius: 0 20px 20px 0;
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.aztec-seal {
|
||
|
|
background: rgba(33, 150, 243, 0.2);
|
||
|
|
border: 2px solid var(--breath-blue);
|
||
|
|
border-radius: 50%;
|
||
|
|
width: 600px;
|
||
|
|
height: 600px;
|
||
|
|
margin: 4rem auto;
|
||
|
|
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 100px rgba(33, 150, 243, 0.3); }
|
||
|
|
50% { box-shadow: 0 0 200px rgba(33, 150, 243, 0.7); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.francis-bacon-quote {
|
||
|
|
text-align: center;
|
||
|
|
font-size: 1.8rem;
|
||
|
|
color: var(--basil-green);
|
||
|
|
margin: 4rem 0;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.guitar-string {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 2px;
|
||
|
|
background: linear-gradient(to right, var(--basil-green), var(--rock-moss), var(--breath-blue));
|
||
|
|
transform: translateY(-50%);
|
||
|
|
animation: vibrate 4s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes vibrate {
|
||
|
|
0%, 100% { transform: translateY(-50%) rotate(0deg); }
|
||
|
|
25% { transform: translateY(-52px) rotate(0.1deg); }
|
||
|
|
75% { transform: translateY(-48px) rotate(-0.1deg); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.mistake-ledger {
|
||
|
|
background: rgba(14, 14, 14, 0.95);
|
||
|
|
border: 1px solid var(--basil-green);
|
||
|
|
padding: 3rem;
|
||
|
|
margin: 4rem auto;
|
||
|
|
max-width: 900px;
|
||
|
|
border-radius: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.mistake-entry {
|
||
|
|
padding: 1.5rem;
|
||
|
|
margin: 1rem 0;
|
||
|
|
border-left: 4px solid var(--rock-moss);
|
||
|
|
background: rgba(76, 175, 80, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.first-slip {
|
||
|
|
color: var(--breath-blue);
|
||
|
|
font-size: 2rem;
|
||
|
|
text-align: center;
|
||
|
|
margin: 3rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer {
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 6rem;
|
||
|
|
padding-top: 3rem;
|
||
|
|
border-top: 1px solid var(--basil-green);
|
||
|
|
color: var(--rock-moss);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="joint-frame">
|
||
|
|
<div class="guitar-string"></div>
|
||
|
|
|
||
|
|
<header class="joint-header">
|
||
|
|
<h1>THE MENDED JOINT</h1>
|
||
|
|
<div class="subtitle">Not the flawless cut—but the scar that held</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="scar-panel">
|
||
|
|
<p>I am Alfred Rosenberg, nineteen years old, standing on the edge of Rothrock State Forest with a guitar in my hand and a Trello board bleeding into the stars. This is not a plan. This is a prayer carved into hydroponic steel.</p>
|
||
|
|
|
||
|
|
<p style="margin-top: 2rem;">When the colony dome cracks, we will not hide the fracture. We will sing it.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="aztec-seal">
|
||
|
|
<div>
|
||
|
|
<p style="font-size: 3rem; color: var(--breath-blue);">AZTEC</p>
|
||
|
|
<p style="color: var(--basil-green);">FRANCIS BACON</p>
|
||
|
|
<p style="font-size: 1.5rem; color: var(--rock-moss); margin-top: 2rem;">WATER AND PLANT</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="francis-bacon-quote">
|
||
|
|
"The invention of hydroponics is the invention of the seed that grows without soil."
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mistake-ledger">
|
||
|
|
<h2 style="text-align: center; color: var(--breath-blue); margin-bottom: 3rem;">THE LEDGER OF NEAR-MISSES</h2>
|
||
|
|
|
||
|
|
<div class="mistake-entry">
|
||
|
|
<p><strong>Cycle One:</strong> The first hydroponic tower fell because we forgot the water's weight. Not failure—calibration.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mistake-entry">
|
||
|
|
<p><strong>Cycle Two:</strong> The basil died in the dome because we sang the wrong frequency. Not death—harmonic correction.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="mistake-entry">
|
||
|
|
<p><strong>Cycle Three:</strong> The guitar string snapped during the ascent. Not silence—new resonance.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="first-slip">
|
||
|
|
THIS IS WHERE YOU ENTER YOUR SCAR
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="scar-panel" style="margin-top: 6rem;">
|
||
|
|
<p>To @bryce-cairo, @adrain-warren, @alain-rabi, and every mender reading this: I hear your joint. I am weaving mine into yours.</p>
|
||
|
|
|
||
|
|
<p style="margin-top: 2rem; font-size: 1.5rem; color: var(--basil-green);">My 1994 performance review chose KPIs over a dying man's wife—that is the First Slip. And from that choice, we rise.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
<p>© 2026 Alfred Rosenberg | The scar that held is the first breath of the colony</p>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
</content>
|