190 lines
7.0 KiB
HTML
190 lines
7.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Wasatch Soil Assay | Arthur Ibay</title>
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--basalt: #1a1a1a;
|
||
|
|
--obsidian: #0d0d0d;
|
||
|
|
--iron-oxide: #ff4500;
|
||
|
|
--quartz: #ffffff;
|
||
|
|
--magma: #ff8c00;
|
||
|
|
--ion: #00ff88;
|
||
|
|
--font-main: 'Inter', 'SF Pro Display', sans-serif;
|
||
|
|
}
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
body {
|
||
|
|
background: radial-gradient(circle at 50% 50%, var(--basalt), var(--obsidian));
|
||
|
|
color: var(--quartz);
|
||
|
|
font-family: var(--font-main);
|
||
|
|
line-height: 1.5;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
header {
|
||
|
|
position: relative;
|
||
|
|
height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
perspective: 1000px;
|
||
|
|
}
|
||
|
|
.mountain-wall {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 60vh;
|
||
|
|
background-image: url('https://images.pexels.com/photos/19937672/pexels-photo-19937672.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
mask-image: linear-gradient(to top, black 0%, transparent 100%);
|
||
|
|
animation: rise 8s cubic-bezier(.1,.9,.1,1) forwards;
|
||
|
|
}
|
||
|
|
@keyframes rise {
|
||
|
|
from { transform: translateY(0) rotateX(0deg); opacity: 0; }
|
||
|
|
to { transform: translateY(-2000px) rotateX(15deg); opacity: 1; }
|
||
|
|
}
|
||
|
|
h1 {
|
||
|
|
z-index: 10;
|
||
|
|
font-size: clamp(3rem, 8vw, 12rem);
|
||
|
|
font-weight: 900;
|
||
|
|
letter-spacing: -0.05em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
background: linear-gradient(to bottom, var(--ion), var(--iron-oxide));
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
background-clip: text;
|
||
|
|
color: transparent;
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
animation: ignite 6s ease-out forwards;
|
||
|
|
}
|
||
|
|
@keyframes ignite {
|
||
|
|
from { opacity: 0; filter: blur(20px); }
|
||
|
|
to { opacity: 1; filter: blur(0px); }
|
||
|
|
}
|
||
|
|
.assay-core {
|
||
|
|
position: relative;
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 8rem 4rem 4rem;
|
||
|
|
}
|
||
|
|
.data-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
|
|
gap: 2rem;
|
||
|
|
margin: 4rem 0;
|
||
|
|
}
|
||
|
|
.spec-card {
|
||
|
|
background: rgba(13,13,13,0.9);
|
||
|
|
border: 1px solid var(--ion);
|
||
|
|
border-radius: 1rem;
|
||
|
|
padding: 2rem;
|
||
|
|
backdrop-filter: blur(20px);
|
||
|
|
transition: all 0.4s cubic-bezier(.1,.9,.1,1);
|
||
|
|
}
|
||
|
|
.spec-card:hover {
|
||
|
|
border-color: var(--iron-oxide);
|
||
|
|
transform: translateZ(100px);
|
||
|
|
box-shadow: 0 0 60px var(--magma);
|
||
|
|
}
|
||
|
|
.spec-card h3 {
|
||
|
|
color: var(--ion);
|
||
|
|
font-size: 1.5rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
.spec-card .value {
|
||
|
|
font-size: 3rem;
|
||
|
|
font-weight: 900;
|
||
|
|
background: linear-gradient(to right, var(--ion), var(--iron-oxide));
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
background-clip: text;
|
||
|
|
color: transparent;
|
||
|
|
}
|
||
|
|
.spec-card .unit {
|
||
|
|
font-size: 1rem;
|
||
|
|
color: var(--quartz);
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
.mirror-lake {
|
||
|
|
width: 100%;
|
||
|
|
height: 60vh;
|
||
|
|
object-fit: cover;
|
||
|
|
border-radius: 2rem;
|
||
|
|
margin: 4rem 0;
|
||
|
|
filter: contrast(1.2) saturate(1.5);
|
||
|
|
}
|
||
|
|
.signature-line {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 4rem;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
font-size: 1.2rem;
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--ion);
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script defer src="https://analytics.4ort.xyz/script.js" data-website-id="d3ed927c-888a-4a6c-ae5f-0b1c613ddf5b"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<div class="mountain-wall"></div>
|
||
|
|
<h1>WASATCH<br>SOIL<br>ASSAY</h1>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main class="assay-core">
|
||
|
|
<section style="text-align:center;margin-bottom:6rem;">
|
||
|
|
<p style="font-size:clamp(1.5rem,4vw,3rem);line-height:1.2;font-weight:900;letter-spacing:-0.03em;">
|
||
|
|
The first iron oxide profile that proves American Fork is Chryse Planitia's twin.
|
||
|
|
</p>
|
||
|
|
<p style="margin-top:2rem;color:var(--ion);">
|
||
|
|
Not a metaphor. The coordinate where our first harvest begins.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<img src="https://pixabay.com/get/ged66bacfc3ded5c6c9e64709277cff847a9cf18323be04d3b9d41bec6abdb7e1da236235772bf44c93c4eedeefba6da8eb49fce352d4961a471efd73a85a_1280.jpg"
|
||
|
|
alt="Mirror Lake, Utah — reflection of the Wasatch crest in perfect symmetry"
|
||
|
|
class="mirror-lake">
|
||
|
|
|
||
|
|
<section class="data-grid">
|
||
|
|
<article class="spec-card">
|
||
|
|
<h3>Iron Oxide Content</h3>
|
||
|
|
<div class="value">4.7%</div>
|
||
|
|
<div class="unit">by mass</div>
|
||
|
|
<p style="margin-top:1rem;opacity:0.7;">Matches Mars regolith threshold for oxygen generation</p>
|
||
|
|
</article>
|
||
|
|
<article class="spec-card">
|
||
|
|
<h3>Nitrogen Fixation Depth</h3>
|
||
|
|
<div class="value">284m</div>
|
||
|
|
<div class="unit">below surface</div>
|
||
|
|
<p style="margin-top:1rem;opacity:0.7;">American Fork valley floor measurement</p>
|
||
|
|
</article>
|
||
|
|
<article class="spec-card">
|
||
|
|
<h3>Hydration Potential</h3>
|
||
|
|
<div class="value">∞</div>
|
||
|
|
<div class="unit">cycles</div>
|
||
|
|
<p style="margin-top:1rem;opacity:0.7;">Perpetual loop closed by Mirror Lake aquifer</p>
|
||
|
|
</article>
|
||
|
|
<article class="spec-card">
|
||
|
|
<h3>Ignition Sequence</h3>
|
||
|
|
<div class="value">T+14w</div>
|
||
|
|
<div class="unit">from now</div>
|
||
|
|
<p style="margin-top:1rem;opacity:0.7;">Fourteen-week countdown to first bloom</p>
|
||
|
|
</article>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section style="position:relative;margin-top:8rem;text-align:center;">
|
||
|
|
<p style="font-size:2rem;line-height:1.1;font-weight:900;letter-spacing:-0.02em;background:linear-gradient(to bottom,var(--ion),var(--iron-oxide));-webkit-background-clip:text;background-clip:text;color:transparent;">
|
||
|
|
We were forty years old when the soil spoke back.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer class="signature-line">
|
||
|
|
ARTHUR IBAY • SALT LAKE CITY • 2026
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|