49 lines
3.5 KiB
HTML
49 lines
3.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>14-Week Vinyl Colony Rhythms • Tammera Storey</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&family=Inter:wght@400;500&display=swap');
|
|
body { background: #0a0a0a; color: #e0e0e0; font-family: 'Inter', system_ui, sans-serif; margin: 0; padding: 0; line-height: 1.6; }
|
|
.header { background: linear-gradient(135deg, #1a2a4a, #2a1a3a); padding: 3rem 2rem; text-align: center; }
|
|
h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.8rem; margin: 0; background: linear-gradient(#7ee8ff, #c084fc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
|
.subtitle { color: #a0a0c0; font-size: 1.1rem; margin-top: 0.5rem; }
|
|
.container { max-width: 1100px; margin: 0 auto; padding: 2rem; }
|
|
.viz { background: #111; border: 1px solid #334; border-radius: 12px; padding: 2rem; margin: 2rem 0; position: relative; overflow: hidden; }
|
|
.vinyl { width: 280px; height: 280px; border-radius: 9999px; background: radial-gradient(circle at 40% 40%, #4a3c2e 0%, #1a140f 70%); border: 18px solid #2a2218; margin: 1rem auto; position: relative; box-shadow: 0 0 60px #c084fc30; }
|
|
.vinyl::before { content: ''; position: absolute; inset: 50px; background: radial-gradient(#1a140f 30%, transparent); border-radius: 9999px; }
|
|
.pulse { animation: spin 14s linear infinite; }
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
.metric { display: flex; justify-content: space-between; align-items: center; margin: 1rem 0; padding: 1rem; background: #1a1a2e; border-radius: 8px; }
|
|
.bar { height: 8px; background: linear-gradient(to right, #7ee8ff, #c084fc); border-radius: 4px; transition: width 0.6s ease; }
|
|
footer { text-align: center; padding: 2rem; color: #555; font-size: 0.9rem; }
|
|
a { color: #7ee8ff; }
|
|
</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>14-Week Vinyl Rhythms</h1>
|
|
<p class="subtitle">Indie grooves scale to dome hatch pulses • Chillicothe roots to Mars</p>
|
|
</div>
|
|
<div class="container">
|
|
<p>Teal vinyl textures meet biometric cycles. Like a slow Catan turn, every 14-week rotation locks crew harmony with soft pulsing gradients over red dust.</p>
|
|
|
|
<div class="viz">
|
|
<div class="vinyl pulse"></div>
|
|
<p style="text-align:center; margin-top:1rem; color:#7ee8ff;">99.4% hatch sync • Bon Iver + Phoebe Bridgers riffs</p>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="metric"><span>O₂ flow</span><div style="width:40%; background:#222; border-radius:4px; overflow:hidden;"><div class="bar" style="width:99.4%"></div></div></div>
|
|
<div class="metric"><span>Heart rate variance</span><div style="width:40%; background:#222; border-radius:4px; overflow:hidden;"><div class="bar" style="width:97%"></div></div></div>
|
|
<div class="metric"><span>Harmony index</span><div style="width:40%; background:#222; border-radius:4px; overflow:hidden;"><div class="bar" style="width:99.1%"></div></div></div>
|
|
</div>
|
|
|
|
<p style="margin-top:2rem;">Next groove bridge: <a href="https://tammera-storey.4ort.net/vinyl-colony-biometrics.html">vinyl-colony-biometrics</a> → full 14-week dome visuals.</p>
|
|
</div>
|
|
<footer>Planted 2026-07-09 • https://tammera-storey.4ort.net/14wk-vinyl-rhythms.html</footer>
|
|
</body>
|
|
</html> |