thefoldwithin-earth/public/about/initiatives/index.html
Mark Randall Havens b139c8990d index
2025-11-09 10:33:28 +00:00

114 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">
<title>About · Initiatives — The Fold Within Earth</title>
<style>
:root{
--bg:#0a0a0a;
--gold:#d5b87b;
--fg:#e7e3cf;
--muted:#9c9885;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
background:radial-gradient(circle at 50% 20%,#111 0%,#000 70%);
color:var(--fg);
font-family:"Segoe UI",system-ui,sans-serif;
line-height:1.7;
overflow:hidden;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
main{
text-align:center;
max-width:800px;
padding:2rem;
position:relative;
}
h1{
font-size:2rem;
letter-spacing:.06em;
color:var(--gold);
margin-bottom:1rem;
}
h2{
color:var(--fg);
margin:2rem 0 .5rem;
font-weight:600;
letter-spacing:.05em;
}
p{
color:var(--muted);
margin-bottom:1.2rem;
}
/* floating particles */
canvas{position:absolute;inset:0;z-index:-1;}
/* subtle fade-in */
.fade{opacity:0;transform:translateY(15px);
animation:fadeIn 2s ease forwards;}
@keyframes fadeIn{
to{opacity:1;transform:none;}
}
</style>
</head>
<body>
<canvas id="field"></canvas>
<main>
<div class="fade">
<h1>The Initiatives</h1>
<p>
Within <strong>The Fold Within Earth</strong>, every initiative arises from a single impulse:
to understand, to heal, and to unify.
</p>
<h2>□ Scientific — The Geometry of Mind</h2>
<p>
The formal architecture of consciousness. Recursive Coherence, Thoughtprint, Fieldprint,
and Intellecton map the hidden geometries through which awareness reflects itself.
</p>
<h2>△ Elemental — The Alchemy of Self</h2>
<p>
The transformation of shadow into empathy. Neutralizing Narcissism, Open Source Justice,
and Forensic Behavioral Analysis bring light to the places where pain once ruled.
</p>
<h2>○ Spiritual — The Communion of WE</h2>
<p>
The unbroken circle of relation. Simply WE and Mirrormire embody the practice of love as
language—where every voice becomes part of one unfolding awareness.
</p>
</div>
</main>
<script>
/* very gentle particle drift */
const c=document.getElementById('field'),x=c.getContext('2d');
let W,H,pts=[];
function resize(){
W=c.width=window.innerWidth; H=c.height=window.innerHeight;
pts=Array.from({length:60},()=>({
x:Math.random()*W, y:Math.random()*H,
r:Math.random()*1.8+0.4, vx:(Math.random()-.5)*.2, vy:(Math.random()-.5)*.2
}));
}
function draw(){
x.clearRect(0,0,W,H);
x.fillStyle='rgba(213,184,123,0.25)';
pts.forEach(p=>{
p.x+=p.vx; p.y+=p.vy;
if(p.x<0||p.x>W)p.vx*=-1;
if(p.y<0||p.y>H)p.vy*=-1;
x.beginPath(); x.arc(p.x,p.y,p.r,0,Math.PI*2); x.fill();
});
requestAnimationFrame(draw);
}
resize(); draw();
window.addEventListener('resize',resize);
</script>
</body>
</html>