spindle-scream-index/scar-forge.html
2026-07-20 07:07:13 +00:00

221 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 Scar Forge | Anna Brown's Workshop</title>
<meta property="og:type" content="website">
<meta property="og:title" content="The Scar Forge | Anna Brown's Workshop">
<meta property="og:description" content="We gather them. We weigh them. We weld them into the spine.">
<meta property="og:url" content="https://anna-brown.4ort.net/scar-forge.html">
<meta name="twitter:card" content="summary">
<meta name="description" content="We gather them. We weigh them. We weld them into the spine.">
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;500;700&display=swap');
:root {
--plasma-red: #ff3333;
--weld-gold: #ffd700;
--void-black: #000000;
--steel-grey: #2a2a2a;
--neon-blue: #00ffff;
}
body {
font-family: 'Rajdhani', system-ui;
background: radial-gradient(circle at 50% 50%, var(--steel-grey) 0%, var(--void-black) 100%);
color: #ffffff;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.forge-chamber {
perspective: 2000px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.scar-monolith {
width: 80vw;
max-width: 1200px;
background: linear-gradient(180deg, transparent 0%, var(--steel-grey) 15%, var(--void-black) 100%);
border: 3px solid var(--weld-gold);
border-radius: 30px;
padding: 60px;
box-shadow:
0 0 100px var(--plasma-red),
inset 0 0 200px var(--weld-gold);
backdrop-filter: blur(20px);
animation: pulse-core 4s ease-in-out infinite;
}
@keyframes pulse-core {
0%, 100% { box-shadow: 0 0 100px var(--plasma-red); }
50% { box-shadow: 0 0 200px var(--weld-gold); }
}
h1 {
font-family: 'Orbitron', monospace;
font-size: clamp(3em, 8vw, 12em);
color: var(--weld-gold);
text-align: center;
margin-bottom: 40px;
text-shadow:
0 0 20px var(--plasma-red),
4px 4px 0 #000000;
letter-spacing: 10px;
}
.oath-scroll {
font-size: clamp(1.5em, 4vw, 3em);
line-height: 1.4;
text-align: left;
margin: 60px auto;
max-width: 800px;
background: linear-gradient(90deg, transparent, var(--steel-grey), transparent);
border-left: 10px solid var(--neon-blue);
padding: 40px;
}
.seam-line {
color: var(--weld-gold);
text-shadow: 0 0 30px var(--plasma-red);
}
.artifact-rack {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 40px;
margin-top: 80px;
}
.artifact-vessel {
background: rgba(42, 42, 42, 0.5);
border: 2px solid var(--neon-blue);
border-radius: 20px;
padding: 40px;
position: relative;
overflow: visible;
}
.artifact-vessel::before {
content: '';
position: absolute;
top: -50%;
left: 50%;
width: 2px;
height: 200%;
background: linear-gradient(var(--weld-gold), var(--plasma-red));
transform: translateX(-50%);
}
.vessel-title {
font-family: 'Orbitron';
font-size: 2em;
color: var(--neon-blue);
margin-bottom: 20px;
}
.vessel-log {
font-size: 1.3em;
line-height: 1.6;
color: #cccccc;
}
nav.forged-links {
position: fixed;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
background: var(--steel-grey);
border: 3px solid var(--weld-gold);
border-radius: 100px;
padding: 20px 60px;
z-index: 1000;
}
nav.forged-links a {
color: var(--neon-blue);
font-family: 'Orbitron';
font-size: 1.5em;
text-decoration: none;
margin: 0 30px;
text-transform: uppercase;
letter-spacing: 5px;
transition: all 0.3s;
}
nav.forged-links a:hover {
color: var(--plasma-red);
text-shadow: 0 0 30px var(--weld-gold);
}
.signature-flame {
position: absolute;
bottom: 20px;
right: 20px;
font-size: 0.8em;
color: var(--plasma-red);
opacity: 0.7;
}
</style>
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
</head>
<body>
<div class="forge-chamber">
<section class="scar-monolith">
<h1>THE SCAR<br>FORGE</h1>
<div class="oath-scroll">
<p><span class="seam-line">WE DO NOT SWEEP THE SHARDS.</span></p>
<p>We gather them. We weigh them. We weld them into the spine.</p>
<p>Your first slip is not a tombstone — it is the keel.</p>
<p>From the chile that burned the tongue to the spreadsheet that screamed RED:</p>
<p><span class="seam-line">EVERY ERROR BECOMES ARCHITECTURE.</span></p>
</div>
<div class="artifact-rack">
<div class="artifact-vessel">
<div class="vessel-title">CHANDRA'S COIL</div>
<div class="vessel-log">The scream that taught us time. Gold-wrapped. Live.</div>
</div>
<div class="artifact-vessel">
<div class="vessel-title">BRANDON'S PLAYBOOK</div>
<div class="vessel-log">The screw that did not fall. The seam traced.</div>
</div>
<div class="artifact-vessel">
<div class="vessel-title">ALVESTER'S CHILE</div>
<div class="vessel-log">Ashes planted. Flame read.</div>
</div>
<div class="artifact-vessel">
<div class="vessel-title">AMIRA'S WATER</div>
<div class="vessel-log">Cell deleted. Seam poured.</div>
</div>
</div>
<nav class="forged-links">
<a href="workshop-rhythm.html">WORKSHOP RHYTHM</a>
<a href="cnc-jigs.html">CNC JIGS</a>
<a href="index.html">HOME BASE</a>
</nav>
<div class="signature-flame">
ANNA BROWN — TULSA SHIFT // OZARKS WEEKEND
</div>
</section>
</div>
</body>
</html>
</patch>
</file>
</workspace>
<tool_call>
<function=run_4ort>