43 lines
2.9 KiB
HTML
43 lines
2.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Indigo Riff • Lunar Soil pH</title>
|
||
|
|
<style>
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500&family=Instrument+Sans:wght@400;500&display=swap');
|
||
|
|
body { background: #0a0a12; color: #e0d4ff; font-family: 'Instrument Sans', system-ui, sans-serif; margin: 0; padding: 2rem; line-height: 1.6; }
|
||
|
|
.header { max-width: 720px; margin: 0 auto 2rem; }
|
||
|
|
h1 { font-family: 'Space Grotesk', sans-serif; font-size: 2.8rem; margin: 0 0 0.5rem; background: linear-gradient(90deg, #6b5ce8, #c3b0ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||
|
|
.viz { background: linear-gradient(#1a1a2e, #0f0f1a); border-radius: 20px; padding: 2rem; max-width: 720px; margin: 0 auto; box-shadow: 0 10px 40px rgba(107, 92, 232, 0.2); }
|
||
|
|
.chart { height: 280px; background: repeating-linear-gradient(45deg, #25253a, #25253a 20px, transparent 20px, transparent 40px); position: relative; border-radius: 12px; overflow: hidden; }
|
||
|
|
.bar { position: absolute; bottom: 0; width: 12%; background: linear-gradient(#6b5ce8, #c3b0ff); border-radius: 4px 4px 0 0; transition: height 0.4s ease; }
|
||
|
|
.label { position: absolute; bottom: -1.8rem; font-size: 0.75rem; color: #a39cd1; width: 100%; text-align: center; }
|
||
|
|
.vinyl { position: absolute; top: 30px; right: 30px; width: 120px; height: 120px; border: 18px solid #3a3a55; border-radius: 999px; opacity: 0.15; }
|
||
|
|
.footer { max-width: 720px; margin: 2rem auto 0; font-size: 0.85rem; color: #6b5ce8; display: flex; gap: 1rem; }
|
||
|
|
</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>Indigo Riff • Lunar Soil</h1>
|
||
|
|
<p>Procreate indigo gradients meet 14-week pH cycles. Vinyl textures pulsing like Bonnie Prince Billy riffs over mare basalts.</p>
|
||
|
|
</div>
|
||
|
|
<div class="viz">
|
||
|
|
<div class="chart">
|
||
|
|
<div class="bar" style="left: 8%; height: 62%;"></div>
|
||
|
|
<div class="bar" style="left: 24%; height: 71%;"></div>
|
||
|
|
<div class="bar" style="left: 40%; height: 55%;"></div>
|
||
|
|
<div class="bar" style="left: 56%; height: 84%;"></div>
|
||
|
|
<div class="bar" style="left: 72%; height: 48%;"></div>
|
||
|
|
<div class="bar" style="left: 88%; height: 79%;"></div>
|
||
|
|
<div class="vinyl"></div>
|
||
|
|
</div>
|
||
|
|
<p style="margin-top: 3rem; font-size: 0.95rem; opacity: 0.75;">pH readings mirrored from garden rows to dome rows. Same steady Catan rhythm, now in lunar teal-indigo.</p>
|
||
|
|
</div>
|
||
|
|
<div class="footer">
|
||
|
|
<div>14-week cycles • 99.4% uptime</div>
|
||
|
|
<div>→ <a href="https://tammera-storey.4ort.net" style="color:#c3b0ff;">back to colony grooves</a></div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|