112 lines
3.4 KiB
HTML
112 lines
3.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Carlos Tellez — The Scar That Holds Us</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--gold: #f4a261;
|
||
|
|
--deep-space: #0a0a0f;
|
||
|
|
--obsidian: #1a1a2e;
|
||
|
|
--ember: #ff4d00;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Cinzel', 'Georgia', serif;
|
||
|
|
background: radial-gradient(circle at 50% 50%, var(--obsidian), var(--deep-space));
|
||
|
|
color: var(--gold);
|
||
|
|
line-height: 1.8;
|
||
|
|
padding: 3rem;
|
||
|
|
max-width: 900px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1 {
|
||
|
|
font-size: 3rem;
|
||
|
|
color: var(--gold);
|
||
|
|
text-shadow: 0 0 30px rgba(244, 162, 97, 0.4);
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
letter-spacing: 0.05em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
font-size: 2rem;
|
||
|
|
color: var(--ember);
|
||
|
|
border-bottom: 2px solid var(--gold);
|
||
|
|
padding-bottom: 0.5rem;
|
||
|
|
margin-top: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.seam {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
padding: 2rem;
|
||
|
|
border: 3px double var(--gold);
|
||
|
|
border-radius: 1rem;
|
||
|
|
background: linear-gradient(180deg, transparent, rgba(244, 162, 97, 0.1), transparent);
|
||
|
|
margin: 2rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.seam::before {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
border: 1px dashed var(--ember);
|
||
|
|
z-index: -1;
|
||
|
|
animation: breathe 8s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes breathe {
|
||
|
|
0%, 100% { transform: scale(1); opacity: 0.3; }
|
||
|
|
50% { transform: scale(1.02); opacity: 0.8; }
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
text-align: justify;
|
||
|
|
}
|
||
|
|
|
||
|
|
.golden-thread {
|
||
|
|
font-family: 'Cinzel', serif;
|
||
|
|
color: var(--ember);
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 1.5rem;
|
||
|
|
margin: 3rem 0;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
footer {
|
||
|
|
margin-top: 5rem;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
color: #888;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>MI CICATRIZ ES TU TECHO</h1>
|
||
|
|
|
||
|
|
<div class="seam">
|
||
|
|
<p>Briana Yates called this the Scar Festival. She asked us to lay our golden seams on the table. I come from Madera, where the earth cracks in summer and the old ones teach the young how to walk without breaking their knees. My first stitch was not silk, not gold — it was the walnut frame that burned at 1,200 degrees because I misread the wood's thirst. I caught it. I filed it true.</p>
|
||
|
|
|
||
|
|
<p>I was 68 when I learned to run again. Not on a track. On red clay. With a limp that sang louder than any symphony. They said I would never stand. I showed them the stumble that became the spine.</p>
|
||
|
|
|
||
|
|
<div class="golden-thread">LA CAÍDA NO ES EL FIN DEL POEMA — ES LA VERTEBRA DE LA SIGUIENTE VERSIÓN</div>
|
||
|
|
|
||
|
|
<p>Familia — this is not a monument. It is a mirror. Look into it and see not the wound, but the weld. See the rebar that holds the pour. See the needle that stitches the dome. Every scar you bear is the roof that saves us.</p>
|
||
|
|
|
||
|
|
<p>Aquí está mi hilo de oro. Aquí es donde nos encontramos.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
— Carlos Tellez, Madera, CA. Physical Therapist. Senior Softball Captain. Tamale Chef. Lost-Key Legend.<br>
|
||
|
|
Built for the Scar Festival. Live now.
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|