178 lines
5.5 KiB
HTML
178 lines
5.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Anaisha Cotton: The Golden Seam</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--void-black: #000000;
|
||
|
|
--rice-straw: #F5E6D3;
|
||
|
|
--sea-island-blue: #003366;
|
||
|
|
--gold-thread: #FFD700;
|
||
|
|
--bronze: #CD7F32;
|
||
|
|
--obsidian: #0A0A0A;
|
||
|
|
}
|
||
|
|
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
|
||
|
|
html, body {
|
||
|
|
background: var(--void-black);
|
||
|
|
color: var(--rice-straw);
|
||
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||
|
|
height: 100vh;
|
||
|
|
overflow-x: hidden;
|
||
|
|
scroll-behavior: smooth;
|
||
|
|
}
|
||
|
|
|
||
|
|
.seam-container {
|
||
|
|
position: relative;
|
||
|
|
min-height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
perspective: 2000px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.golden-fracture {
|
||
|
|
position: absolute;
|
||
|
|
width: 120vw;
|
||
|
|
height: 120vh;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 3px solid var(--gold-thread);
|
||
|
|
opacity: 0;
|
||
|
|
transform: rotate(0deg) scale(0);
|
||
|
|
animation: kintsugi-rise 24s linear forwards;
|
||
|
|
box-shadow: 0 0 120px var(--gold-thread);
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes kintsugi-rise {
|
||
|
|
0% {
|
||
|
|
transform: rotate(0deg) scale(0);
|
||
|
|
opacity: 0;
|
||
|
|
border-color: transparent;
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
transform: rotate(180deg) scale(1);
|
||
|
|
opacity: 0.7;
|
||
|
|
border-color: var(--gold-thread);
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
transform: rotate(720deg) scale(1.5);
|
||
|
|
opacity: 1;
|
||
|
|
border-color: var(--gold-thread);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.narrative-core {
|
||
|
|
z-index: 100;
|
||
|
|
max-width: 80ch;
|
||
|
|
text-align: left;
|
||
|
|
line-height: 1.6;
|
||
|
|
letter-spacing: -0.02em;
|
||
|
|
animation: breath 8s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes breath {
|
||
|
|
0%, 100% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.3); }
|
||
|
|
50% { text-shadow: 0 0 80px rgba(255, 215, 0, 0.9); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.scar-text {
|
||
|
|
font-size: clamp(1.2rem, 4vw, 2.8rem);
|
||
|
|
font-weight: 300;
|
||
|
|
background: linear-gradient(180deg, var(--rice-straw), var(--sea-island-blue));
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
background-clip: text;
|
||
|
|
color: transparent;
|
||
|
|
white-space: pre-wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sigil-ring {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 8vh;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
width: 60vh;
|
||
|
|
height: 60vh;
|
||
|
|
border: 1px solid var(--gold-thread);
|
||
|
|
border-radius: 50%;
|
||
|
|
opacity: 0;
|
||
|
|
transition: all 12s cubic-bezier(0.19, 1, 0.22, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.sigil-ring.active {
|
||
|
|
opacity: 1;
|
||
|
|
box-shadow: 0 0 200px var(--gold-thread);
|
||
|
|
}
|
||
|
|
|
||
|
|
.heritage-echo {
|
||
|
|
position: fixed;
|
||
|
|
top: 4vh;
|
||
|
|
right: 4vw;
|
||
|
|
font-size: 0.6rem;
|
||
|
|
color: var(--bronze);
|
||
|
|
writing-mode: vertical-rl;
|
||
|
|
text-orientation: mixed;
|
||
|
|
letter-spacing: 0.4em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.floor-grid {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100vw;
|
||
|
|
height: 40vh;
|
||
|
|
background-image:
|
||
|
|
linear-gradient(var(--gold-thread) 1px, transparent 1px),
|
||
|
|
linear-gradient(90deg, var(--gold-thread) 1px, transparent 1px);
|
||
|
|
background-size: 120px 120px;
|
||
|
|
background-position: bottom left;
|
||
|
|
opacity: 0;
|
||
|
|
animation: rise-from-abyss 30s linear forwards;
|
||
|
|
perspective-origin: bottom center;
|
||
|
|
transform-style: preserve-3d;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes rise-from-abyss {
|
||
|
|
0% { transform: translateY(0) rotateX(0deg); opacity: 0; }
|
||
|
|
100% { transform: translateY(-40vh) rotateX(75deg); opacity: 0.4; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body class="seam-container">
|
||
|
|
<div class="heritage-echo">Awendaw. Sea Islands. Gullah Geechee. 1994.</div>
|
||
|
|
|
||
|
|
<div class="narrative-core">
|
||
|
|
<pre class="scar-text">In 1994, I buried a tired mother under KPIs while her husband was dying.
|
||
|
|
That spreadsheet screamed RED. I did not delete the cell.
|
||
|
|
I wrapped it in gold.
|
||
|
|
|
||
|
|
We are not here to avoid fractures.
|
||
|
|
We are here to pour the alloy that makes them sing.
|
||
|
|
|
||
|
|
Every mistake you have ever made is waiting for this moment.
|
||
|
|
Pour the seam.
|
||
|
|
|
||
|
|
— Anaisha Cotton</pre>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="golden-fracture"></div>
|
||
|
|
<div class="sigil-ring"></div>
|
||
|
|
<div class="floor-grid"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const sigil = document.querySelector('.sigil-ring');
|
||
|
|
const core = document.querySelector('.narrative-core');
|
||
|
|
|
||
|
|
window.addEventListener('load', () => {
|
||
|
|
setTimeout(() => {
|
||
|
|
sigil.classList.add('active');
|
||
|
|
core.style.textShadow = '0 0 120px var(--gold-thread)';
|
||
|
|
}, 12000);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|