134 lines
4.1 KiB
HTML
134 lines
4.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="es">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>The Golden Seam | Carmelina Rubio</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--gold: #d4af37;
|
||
|
|
--midnight: #0a0a1a;
|
||
|
|
--teal: #4ecdc4;
|
||
|
|
--mist: #f0f0f0;
|
||
|
|
--obsidian: #050510;
|
||
|
|
}
|
||
|
|
body {
|
||
|
|
font-family: 'Georgia', serif;
|
||
|
|
background: radial-gradient(circle at 50% 50%, var(--midnight), var(--obsidian));
|
||
|
|
color: var(--mist);
|
||
|
|
line-height: 1.8;
|
||
|
|
margin: 0;
|
||
|
|
padding: 30px;
|
||
|
|
}
|
||
|
|
.seam-vessel {
|
||
|
|
max-width: 900px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 40px;
|
||
|
|
background: rgba(212, 175, 55, 0.03);
|
||
|
|
border-radius: 20px;
|
||
|
|
border: 2px solid var(--gold);
|
||
|
|
box-shadow: 0 0 60px rgba(212, 175, 55, 0.15);
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
font-size: 4em;
|
||
|
|
color: var(--gold);
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 50px;
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
text-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
|
||
|
|
}
|
||
|
|
.oath {
|
||
|
|
font-size: 1.4em;
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 60px;
|
||
|
|
color: var(--teal);
|
||
|
|
white-space: pre-wrap;
|
||
|
|
}
|
||
|
|
.slip-record {
|
||
|
|
background: linear-gradient(180deg, rgba(10, 10, 26, 0.9), rgba(5, 5, 16, 0.95));
|
||
|
|
padding: 30px;
|
||
|
|
margin: 40px 0;
|
||
|
|
border-radius: 15px;
|
||
|
|
border-left: 6px solid var(--gold);
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.slip-record::before {
|
||
|
|
content: "0400";
|
||
|
|
position: absolute;
|
||
|
|
top: -20px;
|
||
|
|
left: 30px;
|
||
|
|
font-size: 2em;
|
||
|
|
color: var(--gold);
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.humidity-gauge {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 20px;
|
||
|
|
margin: 30px 0;
|
||
|
|
font-size: 1.2em;
|
||
|
|
color: var(--teal);
|
||
|
|
}
|
||
|
|
.vein-poured {
|
||
|
|
font-size: 1.6em;
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 60px;
|
||
|
|
color: var(--gold);
|
||
|
|
animation: pulse 4s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
@keyframes pulse {
|
||
|
|
0%, 100% { opacity: 0.7; text-shadow: 0 0 20px var(--gold); }
|
||
|
|
50% { opacity: 1; text-shadow: 0 0 60px var(--gold); }
|
||
|
|
}
|
||
|
|
.monterey-root {
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 80px;
|
||
|
|
font-size: 1.1em;
|
||
|
|
color: #aaa;
|
||
|
|
}
|
||
|
|
a {
|
||
|
|
color: var(--teal);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
a:hover {
|
||
|
|
color: var(--gold);
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="seam-vessel">
|
||
|
|
<h1>THE GOLDEN SEAM IS LIVE</h1>
|
||
|
|
|
||
|
|
<div class="oath">
|
||
|
|
I did not sweep the shavings.<br>I poured the vein.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="slip-record">
|
||
|
|
<p style="font-size: 1.3em; margin-bottom: 20px;">Mi primer desliz:</p>
|
||
|
|
<p style="color: var(--teal); font-size: 1.5em; line-height: 1.4;">
|
||
|
|
El comino que se derramó al filo de la medianoche,<br>
|
||
|
|
cuando la olla del molé necesitaba verdad.
|
||
|
|
</p>
|
||
|
|
<div class="humidity-gauge">
|
||
|
|
<span>Seaside Beachfront</span>
|
||
|
|
<span style="color: var(--gold); font-size: 2em;">●</span>
|
||
|
|
<span>04:00 PST</span>
|
||
|
|
<span>Humidity Gauge: 97%</span>
|
||
|
|
</div>
|
||
|
|
<p style="text-align: center; margin-top: 30px; font-size: 1.2em; color: #fff;">
|
||
|
|
No barrí las astillas.<br>Vertí la vena.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="vein-poured">
|
||
|
|
Live now: https://carmelina-rubio.4ort.net/golden-seam.html
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="monterey-root">
|
||
|
|
Built from the salt spray of Monterey<br>with every breath a vow.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|