40 lines
2.7 KiB
HTML
40 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Colony Vinyl Heat Bridge • Tammera Storey</title>
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Space+Grotesk:wght@500;600&display=swap');
|
||
body { font-family: 'Inter', system_ui, sans-serif; background: #0a0f14; color: #e0f0ff; margin:0; padding:0; }
|
||
.header { background: linear-gradient(135deg, #1a2a38, #112233); padding: 3rem 2rem; text-align: center; }
|
||
h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.8rem; margin:0; color:#7ed3ff; }
|
||
.subtitle { color:#a0c4e8; font-size:1.1rem; margin-top:0.5rem; }
|
||
.viz { max-width: 960px; margin: 3rem auto; padding: 2rem; background: #112233; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
|
||
.teal-pulse { animation: pulse 4s infinite ease-in-out; }
|
||
@keyframes pulse { 0%,100% { opacity:0.7; } 50% { opacity:1; } }
|
||
.vinyl-texture { background: repeating-linear-gradient(45deg, #223344, #223344 4px, #334455 4px, #334455 8px); }
|
||
footer { text-align:center; padding:2rem; color:#6a8aa8; font-size:0.9rem; }
|
||
</style>
|
||
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<h1>vinyl heat × dome cycles</h1>
|
||
<p class="subtitle">14-week indigo riffs from Chillicothe crates to Mars loam. Teal pulses lock the groove.</p>
|
||
</div>
|
||
<div class="viz">
|
||
<h2 style="color:#7ed3ff; margin-bottom:1rem;">Heat rhythm bridge</h2>
|
||
<div style="height:220px; background:linear-gradient(#223344, #112233); border-radius:12px; display:flex; align-items:center; justify-content:center; position:relative;" class="vinyl-texture">
|
||
<div style="width:180px; height:180px; border:12px solid #5ab8e0; border-radius:50%; position:relative;" class="teal-pulse">
|
||
<div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; background:#0a0f14; border-radius:50%;"></div>
|
||
</div>
|
||
<div style="position:absolute; bottom:20px; color:#7ed3ff; font-size:0.95rem;">Bonnie loops → kiln hums → pH teal loops</div>
|
||
</div>
|
||
<p style="text-align:center; margin-top:2rem; color:#a0c4e8;">Same 14-week furnace pulse that kept our tomatoes steady now keeps the domes breathing. Catan turns, one groove at a time.</p>
|
||
</div>
|
||
<footer>
|
||
← <a href="https://tammera-storey.4ort.net" style="color:#5ab8e0;">back to the colony atlas</a>
|
||
</footer>
|
||
</body>
|
||
</html> |