1583890199
Contains: - 1m-brag - tem - VaultMesh_Catalog_v1 - VAULTMESH-ETERNAL-PATTERN 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1345 lines
50 KiB
HTML
1345 lines
50 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>IoTek.nexus — Proto-Aletheia Origin</title>
|
||
<meta name="description" content="The seed-crystal story. The raw hacker-dream that became VaultMesh, Phoenix, PSI, and the Library of Aletheia.">
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
:root {
|
||
/* The Original Palette — Alchemical from the start */
|
||
--onyx: #0a0a0f;
|
||
--onyx-deep: #050508;
|
||
--void: #000000;
|
||
|
||
/* Neon Spectrum */
|
||
--neon-green: #00ff88;
|
||
--neon-emerald: #00ff66;
|
||
--neon-ruby: #ff0044;
|
||
--neon-purple: #6600ff;
|
||
--neon-cyan: #00ffff;
|
||
|
||
/* Metals */
|
||
--platinum: #c0c0c0;
|
||
--silver: #888899;
|
||
--steel: #1a1a2e;
|
||
--grid: #0d0d15;
|
||
|
||
/* Alchemical Phases */
|
||
--nigredo: #0a0a0f;
|
||
--albedo: #c0c0c0;
|
||
--citrinitas: #00ff66;
|
||
--rubedo: #ff0044;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
background: var(--onyx);
|
||
color: var(--platinum);
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
CODE RAIN — The eternal backdrop
|
||
═══════════════════════════════════════════════════════════ */
|
||
.code-rain {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
overflow: hidden;
|
||
opacity: 0.15;
|
||
}
|
||
|
||
.rain-column {
|
||
position: absolute;
|
||
top: -100%;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 14px;
|
||
line-height: 1.2;
|
||
color: var(--neon-green);
|
||
text-shadow: 0 0 8px var(--neon-green);
|
||
writing-mode: vertical-rl;
|
||
animation: rain-fall linear infinite;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
@keyframes rain-fall {
|
||
0% { transform: translateY(-100%); }
|
||
100% { transform: translateY(200vh); }
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
SCANLINES — CRT effect
|
||
═══════════════════════════════════════════════════════════ */
|
||
.scanlines {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
pointer-events: none;
|
||
z-index: 1000;
|
||
background: repeating-linear-gradient(
|
||
0deg,
|
||
transparent,
|
||
transparent 2px,
|
||
rgba(0, 0, 0, 0.1) 2px,
|
||
rgba(0, 0, 0, 0.1) 4px
|
||
);
|
||
opacity: 0.3;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
MAIN CONTAINER
|
||
═══════════════════════════════════════════════════════════ */
|
||
.container {
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
padding: 0 2rem;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
BOOT SEQUENCE
|
||
═══════════════════════════════════════════════════════════ */
|
||
.boot-sequence {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: 2rem;
|
||
}
|
||
|
||
.boot-text {
|
||
font-size: 0.8rem;
|
||
color: var(--silver);
|
||
margin-bottom: 2rem;
|
||
opacity: 0;
|
||
animation: fadeIn 0.5s ease forwards;
|
||
}
|
||
|
||
.boot-text span {
|
||
color: var(--neon-green);
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
.ascii-logo {
|
||
font-size: clamp(0.4rem, 1.5vw, 0.7rem);
|
||
line-height: 1.1;
|
||
color: var(--neon-green);
|
||
text-shadow:
|
||
0 0 10px var(--neon-green),
|
||
0 0 20px var(--neon-green),
|
||
0 0 40px rgba(0, 255, 136, 0.5);
|
||
margin-bottom: 2rem;
|
||
white-space: pre;
|
||
opacity: 0;
|
||
animation: glowIn 1s ease 0.5s forwards;
|
||
}
|
||
|
||
@keyframes glowIn {
|
||
0% { opacity: 0; transform: scale(0.95); }
|
||
100% { opacity: 1; transform: scale(1); }
|
||
}
|
||
|
||
.tagline {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: 1.2rem;
|
||
font-style: italic;
|
||
color: var(--platinum);
|
||
opacity: 0;
|
||
animation: fadeIn 1s ease 1s forwards;
|
||
}
|
||
|
||
.epoch-stamp {
|
||
font-size: 0.65rem;
|
||
color: var(--silver);
|
||
margin-top: 2rem;
|
||
letter-spacing: 0.2em;
|
||
opacity: 0;
|
||
animation: fadeIn 1s ease 1.5s forwards;
|
||
}
|
||
|
||
.epoch-stamp span {
|
||
color: var(--neon-ruby);
|
||
}
|
||
|
||
.scroll-indicator {
|
||
position: absolute;
|
||
bottom: 3rem;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
opacity: 0;
|
||
animation: fadeIn 1s ease 2s forwards, float 2s ease-in-out infinite 2s;
|
||
}
|
||
|
||
@keyframes float {
|
||
0%, 100% { transform: translateX(-50%) translateY(0); }
|
||
50% { transform: translateX(-50%) translateY(10px); }
|
||
}
|
||
|
||
.scroll-indicator span {
|
||
font-size: 0.6rem;
|
||
color: var(--silver);
|
||
letter-spacing: 0.15em;
|
||
}
|
||
|
||
.scroll-arrow {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-right: 2px solid var(--neon-green);
|
||
border-bottom: 2px solid var(--neon-green);
|
||
transform: rotate(45deg);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
THE DREAM — Narrative section
|
||
═══════════════════════════════════════════════════════════ */
|
||
.the-dream {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 4rem 0;
|
||
}
|
||
|
||
.terminal-window {
|
||
background: rgba(10, 10, 15, 0.9);
|
||
border: 1px solid var(--steel);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
box-shadow:
|
||
0 0 40px rgba(0, 255, 136, 0.1),
|
||
inset 0 0 60px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.terminal-header {
|
||
background: var(--steel);
|
||
padding: 0.5rem 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.terminal-dot {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.terminal-dot.red { background: var(--neon-ruby); }
|
||
.terminal-dot.yellow { background: #ffaa00; }
|
||
.terminal-dot.green { background: var(--neon-green); }
|
||
|
||
.terminal-title {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: 0.7rem;
|
||
color: var(--silver);
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
.terminal-body {
|
||
padding: 2rem;
|
||
min-height: 400px;
|
||
}
|
||
|
||
.terminal-line {
|
||
margin-bottom: 1rem;
|
||
opacity: 0;
|
||
}
|
||
|
||
.terminal-line.visible {
|
||
animation: typeIn 0.3s ease forwards;
|
||
}
|
||
|
||
@keyframes typeIn {
|
||
from { opacity: 0; transform: translateX(-10px); }
|
||
to { opacity: 1; transform: translateX(0); }
|
||
}
|
||
|
||
.prompt {
|
||
color: var(--neon-green);
|
||
}
|
||
|
||
.command {
|
||
color: var(--platinum);
|
||
}
|
||
|
||
.output {
|
||
color: var(--silver);
|
||
padding-left: 1rem;
|
||
}
|
||
|
||
.output.highlight {
|
||
color: var(--neon-green);
|
||
text-shadow: 0 0 10px var(--neon-green);
|
||
}
|
||
|
||
.output.emphasis {
|
||
color: var(--platinum);
|
||
font-style: italic;
|
||
}
|
||
|
||
.cursor {
|
||
display: inline-block;
|
||
width: 8px;
|
||
height: 16px;
|
||
background: var(--neon-green);
|
||
animation: blink 1s step-end infinite;
|
||
vertical-align: middle;
|
||
margin-left: 2px;
|
||
}
|
||
|
||
@keyframes blink {
|
||
0%, 50% { opacity: 1; }
|
||
51%, 100% { opacity: 0; }
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
THE FOUR SEEDS
|
||
═══════════════════════════════════════════════════════════ */
|
||
.four-seeds {
|
||
padding: 6rem 0;
|
||
}
|
||
|
||
.section-header {
|
||
text-align: center;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.section-label {
|
||
font-size: 0.65rem;
|
||
color: var(--neon-green);
|
||
letter-spacing: 0.3em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.section-title {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: 2rem;
|
||
font-weight: 400;
|
||
color: var(--platinum);
|
||
}
|
||
|
||
.seeds-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 1.5rem;
|
||
max-width: 700px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.seed-card {
|
||
background: rgba(10, 10, 15, 0.8);
|
||
border: 1px solid var(--steel);
|
||
padding: 2rem;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.seed-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 2px;
|
||
background: var(--neon-green);
|
||
transform: scaleX(0);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.seed-card:hover::before {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
.seed-card:hover {
|
||
border-color: var(--neon-green);
|
||
box-shadow:
|
||
0 0 30px rgba(0, 255, 136, 0.1),
|
||
inset 0 0 30px rgba(0, 255, 136, 0.02);
|
||
}
|
||
|
||
.seed-icon {
|
||
font-size: 2rem;
|
||
margin-bottom: 1rem;
|
||
display: block;
|
||
}
|
||
|
||
.seed-name {
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
color: var(--neon-green);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.seed-role {
|
||
font-size: 0.8rem;
|
||
color: var(--silver);
|
||
font-style: italic;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
JOURNEY THROUGH THE NET
|
||
═══════════════════════════════════════════════════════════ */
|
||
.journey {
|
||
padding: 6rem 0;
|
||
}
|
||
|
||
.journey-path {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.journey-node {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1.5rem;
|
||
padding: 1.5rem 0;
|
||
position: relative;
|
||
}
|
||
|
||
.journey-node::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 15px;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background: linear-gradient(to bottom, var(--steel), var(--neon-green), var(--steel));
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.journey-node:first-child::before {
|
||
top: 50%;
|
||
}
|
||
|
||
.journey-node:last-child::before {
|
||
bottom: 50%;
|
||
}
|
||
|
||
.node-marker {
|
||
width: 32px;
|
||
height: 32px;
|
||
border: 2px solid var(--neon-green);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.8rem;
|
||
color: var(--neon-green);
|
||
background: var(--onyx);
|
||
position: relative;
|
||
z-index: 1;
|
||
flex-shrink: 0;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.journey-node:hover .node-marker {
|
||
background: var(--neon-green);
|
||
color: var(--onyx);
|
||
box-shadow: 0 0 20px var(--neon-green);
|
||
}
|
||
|
||
.node-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.node-name {
|
||
font-size: 1rem;
|
||
color: var(--platinum);
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.node-desc {
|
||
font-size: 0.75rem;
|
||
color: var(--silver);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
THE NEXUS VEIL
|
||
═══════════════════════════════════════════════════════════ */
|
||
.nexus-veil {
|
||
padding: 6rem 0;
|
||
}
|
||
|
||
.veil-columns {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 2rem;
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
.veil-column {
|
||
background: rgba(10, 10, 15, 0.8);
|
||
border: 1px solid var(--steel);
|
||
padding: 2rem;
|
||
position: relative;
|
||
}
|
||
|
||
.veil-column::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 4px;
|
||
height: 100%;
|
||
}
|
||
|
||
.veil-column.tech::before {
|
||
background: var(--neon-purple);
|
||
}
|
||
|
||
.veil-column.connect::before {
|
||
background: var(--neon-cyan);
|
||
}
|
||
|
||
.veil-title {
|
||
font-size: 0.7rem;
|
||
color: var(--neon-green);
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 1.5rem;
|
||
padding-bottom: 0.75rem;
|
||
border-bottom: 1px solid var(--steel);
|
||
}
|
||
|
||
.veil-list {
|
||
list-style: none;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.veil-list li {
|
||
padding: 0.5rem 0;
|
||
color: var(--silver);
|
||
font-size: 0.85rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.veil-list li::before {
|
||
content: '>';
|
||
color: var(--neon-green);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.veil-evolution {
|
||
padding-top: 1rem;
|
||
border-top: 1px solid var(--steel);
|
||
}
|
||
|
||
.evolution-arrow {
|
||
color: var(--neon-green);
|
||
font-size: 0.8rem;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.evolution-targets {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.evolution-tag {
|
||
font-size: 0.7rem;
|
||
padding: 0.25rem 0.75rem;
|
||
border: 1px solid var(--neon-green);
|
||
color: var(--neon-green);
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
THE WAR CRY
|
||
═══════════════════════════════════════════════════════════ */
|
||
.war-cry {
|
||
min-height: 80vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: 4rem 2rem;
|
||
position: relative;
|
||
}
|
||
|
||
.war-cry-text {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: clamp(1.5rem, 4vw, 2.5rem);
|
||
font-style: italic;
|
||
color: var(--platinum);
|
||
max-width: 700px;
|
||
line-height: 1.8;
|
||
position: relative;
|
||
}
|
||
|
||
.war-cry-text .line1 {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.war-cry-text .line2 {
|
||
color: var(--neon-ruby);
|
||
text-shadow: 0 0 30px var(--neon-ruby);
|
||
}
|
||
|
||
.war-cry-text::before,
|
||
.war-cry-text::after {
|
||
content: '"';
|
||
font-size: 4rem;
|
||
color: var(--steel);
|
||
position: absolute;
|
||
font-style: normal;
|
||
}
|
||
|
||
.war-cry-text::before {
|
||
top: -2rem;
|
||
left: -1rem;
|
||
}
|
||
|
||
.war-cry-text::after {
|
||
bottom: -3rem;
|
||
right: -1rem;
|
||
}
|
||
|
||
.war-cry:hover .war-cry-text {
|
||
animation: glitch 0.3s ease;
|
||
}
|
||
|
||
@keyframes glitch {
|
||
0%, 100% { transform: translate(0); }
|
||
20% { transform: translate(-2px, 2px); }
|
||
40% { transform: translate(2px, -2px); }
|
||
60% { transform: translate(-2px, -2px); }
|
||
80% { transform: translate(2px, 2px); }
|
||
}
|
||
|
||
.mutations {
|
||
margin-top: 4rem;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 1rem;
|
||
max-width: 600px;
|
||
}
|
||
|
||
.mutation-tag {
|
||
font-size: 0.65rem;
|
||
padding: 0.4rem 0.8rem;
|
||
border: 1px solid var(--steel);
|
||
color: var(--silver);
|
||
letter-spacing: 0.1em;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.mutation-tag:hover {
|
||
border-color: var(--neon-ruby);
|
||
color: var(--neon-ruby);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
ALCHEMICAL ROAD
|
||
═══════════════════════════════════════════════════════════ */
|
||
.alchemical-road {
|
||
padding: 6rem 0;
|
||
}
|
||
|
||
.phases-timeline {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
max-width: 700px;
|
||
margin: 3rem auto 0;
|
||
position: relative;
|
||
}
|
||
|
||
.phases-timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: linear-gradient(to right,
|
||
var(--nigredo) 0%,
|
||
var(--albedo) 33%,
|
||
var(--citrinitas) 66%,
|
||
var(--rubedo) 100%);
|
||
transform: translateY(-50%);
|
||
z-index: 0;
|
||
}
|
||
|
||
.phase {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.phase-orb {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.6rem;
|
||
font-weight: bold;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.phase.nigredo .phase-orb {
|
||
background: var(--nigredo);
|
||
border: 2px solid var(--silver);
|
||
color: var(--silver);
|
||
}
|
||
|
||
.phase.albedo .phase-orb {
|
||
background: var(--onyx);
|
||
border: 2px solid var(--albedo);
|
||
color: var(--albedo);
|
||
box-shadow: 0 0 15px rgba(192, 192, 192, 0.3);
|
||
}
|
||
|
||
.phase.citrinitas .phase-orb {
|
||
background: var(--onyx);
|
||
border: 2px solid var(--citrinitas);
|
||
color: var(--citrinitas);
|
||
box-shadow: 0 0 15px rgba(0, 255, 102, 0.3);
|
||
animation: pulseCitrinitas 3s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes pulseCitrinitas {
|
||
0%, 100% { box-shadow: 0 0 15px rgba(0, 255, 102, 0.3); }
|
||
50% { box-shadow: 0 0 25px rgba(0, 255, 102, 0.5); }
|
||
}
|
||
|
||
.phase.rubedo .phase-orb {
|
||
background: var(--onyx);
|
||
border: 2px solid var(--rubedo);
|
||
color: var(--rubedo);
|
||
box-shadow: 0 0 15px rgba(255, 0, 68, 0.3);
|
||
animation: pulseRubedo 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes pulseRubedo {
|
||
0%, 100% { box-shadow: 0 0 15px rgba(255, 0, 68, 0.3); }
|
||
50% { box-shadow: 0 0 25px rgba(255, 0, 68, 0.6); }
|
||
}
|
||
|
||
.phase-name {
|
||
font-size: 0.7rem;
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.phase.nigredo .phase-name { color: var(--silver); }
|
||
.phase.albedo .phase-name { color: var(--albedo); }
|
||
.phase.citrinitas .phase-name { color: var(--citrinitas); }
|
||
.phase.rubedo .phase-name { color: var(--rubedo); }
|
||
|
||
.phase-color {
|
||
font-size: 0.6rem;
|
||
color: var(--silver);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
THE DESCENDANTS
|
||
═══════════════════════════════════════════════════════════ */
|
||
.descendants {
|
||
padding: 6rem 0;
|
||
}
|
||
|
||
.descendants-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 1.5rem;
|
||
max-width: 700px;
|
||
margin: 3rem auto 0;
|
||
}
|
||
|
||
.descendant-card {
|
||
background: rgba(10, 10, 15, 0.8);
|
||
border: 1px solid var(--steel);
|
||
padding: 1.5rem;
|
||
text-decoration: none;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.descendant-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(135deg, transparent 0%, rgba(0, 255, 136, 0.03) 100%);
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.descendant-card:hover::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
.descendant-card:hover {
|
||
border-color: var(--neon-green);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.descendant-card.shield { --accent: var(--neon-ruby); }
|
||
.descendant-card.proof { --accent: #d4a574; }
|
||
.descendant-card.agents { --accent: var(--neon-cyan); }
|
||
.descendant-card.aletheia { --accent: var(--neon-purple); }
|
||
|
||
.descendant-card:hover {
|
||
border-color: var(--accent);
|
||
}
|
||
|
||
.descendant-name {
|
||
font-size: 1rem;
|
||
font-weight: 700;
|
||
color: var(--platinum);
|
||
margin-bottom: 0.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.descendant-name::before {
|
||
content: '←';
|
||
color: var(--accent);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.descendant-role {
|
||
font-size: 0.75rem;
|
||
color: var(--silver);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
FOOTER — THE UR-TEXT
|
||
═══════════════════════════════════════════════════════════ */
|
||
footer {
|
||
padding: 4rem 0;
|
||
border-top: 1px solid var(--steel);
|
||
text-align: center;
|
||
}
|
||
|
||
.ur-text-badge {
|
||
display: inline-block;
|
||
padding: 0.5rem 1.5rem;
|
||
border: 1px solid var(--steel);
|
||
font-size: 0.6rem;
|
||
letter-spacing: 0.2em;
|
||
color: var(--silver);
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.preservation-note {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: 1rem;
|
||
font-style: italic;
|
||
color: var(--platinum);
|
||
max-width: 500px;
|
||
margin: 0 auto 2rem;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.source-info {
|
||
font-size: 0.7rem;
|
||
color: var(--silver);
|
||
}
|
||
|
||
.source-info span {
|
||
color: var(--neon-green);
|
||
}
|
||
|
||
.footer-brand {
|
||
margin-top: 3rem;
|
||
font-size: 0.65rem;
|
||
color: var(--steel);
|
||
letter-spacing: 0.15em;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
RESPONSIVE
|
||
═══════════════════════════════════════════════════════════ */
|
||
@media (max-width: 768px) {
|
||
.seeds-grid,
|
||
.veil-columns,
|
||
.descendants-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.phases-timeline {
|
||
flex-direction: column;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.phases-timeline::before {
|
||
width: 2px;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.war-cry-text {
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.ascii-logo {
|
||
font-size: 0.35rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Code Rain Background -->
|
||
<div class="code-rain" id="codeRain"></div>
|
||
|
||
<!-- CRT Scanlines -->
|
||
<div class="scanlines"></div>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════
|
||
BOOT SEQUENCE
|
||
═══════════════════════════════════════════════════════════ -->
|
||
<section class="boot-sequence">
|
||
<div class="boot-text">
|
||
<span>></span> Initializing IoTek.nexus...<br>
|
||
<span>></span> Loading proto-aletheia kernel...<br>
|
||
<span>></span> Nexus veil active_
|
||
</div>
|
||
|
||
<pre class="ascii-logo">
|
||
██╗ ██████╗ ████████╗███████╗██╗ ██╗ ███╗ ██╗███████╗██╗ ██╗██╗ ██╗███████╗
|
||
██║██╔═══██╗╚══██╔══╝██╔════╝██║ ██╔╝ ████╗ ██║██╔════╝╚██╗██╔╝██║ ██║██╔════╝
|
||
██║██║ ██║ ██║ █████╗ █████╔╝ ██╔██╗ ██║█████╗ ╚███╔╝ ██║ ██║███████╗
|
||
██║██║ ██║ ██║ ██╔══╝ ██╔═██╗ ██║╚██╗██║██╔══╝ ██╔██╗ ██║ ██║╚════██║
|
||
██║╚██████╔╝ ██║ ███████╗██║ ██╗██╗██║ ╚████║███████╗██╔╝ ██╗╚██████╔╝███████║
|
||
╚═╝ ╚═════╝ ╚═╝ ╚══════╝╚═╝ ╚═╝╚═╝╚═╝ ╚═══╝╚══════╝╚═╝ ╚═╝ ╚═════╝ ╚══════╝
|
||
</pre>
|
||
|
||
<p class="tagline">The seed-crystal story that became VaultMesh</p>
|
||
|
||
<p class="epoch-stamp">EPOCH: <span>NIGREDO</span> · 2050-01-01T00:00:00Z</p>
|
||
|
||
<div class="scroll-indicator">
|
||
<span>SCROLL TO ENTER</span>
|
||
<div class="scroll-arrow"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="container">
|
||
<!-- ═══════════════════════════════════════════════════════════
|
||
THE DREAM
|
||
═══════════════════════════════════════════════════════════ -->
|
||
<section class="the-dream">
|
||
<div class="terminal-window">
|
||
<div class="terminal-header">
|
||
<span class="terminal-dot red"></span>
|
||
<span class="terminal-dot yellow"></span>
|
||
<span class="terminal-dot green"></span>
|
||
<span class="terminal-title">dream.exe — THE NIGHT IT BEGAN</span>
|
||
</div>
|
||
<div class="terminal-body">
|
||
<div class="terminal-line" data-delay="0">
|
||
<span class="prompt">sovereign@nexus:~$</span> <span class="command">cat /origin/dream.log</span>
|
||
</div>
|
||
<div class="terminal-line" data-delay="300">
|
||
<span class="output">You stand in the glow of a command prompt,</span>
|
||
</div>
|
||
<div class="terminal-line" data-delay="600">
|
||
<span class="output">watching streams of code fall like a neon rain.</span>
|
||
</div>
|
||
<div class="terminal-line" data-delay="900">
|
||
<span class="output">The world is dark, electric, wild.</span>
|
||
</div>
|
||
<div class="terminal-line" data-delay="1200">
|
||
<span class="output"></span>
|
||
</div>
|
||
<div class="terminal-line" data-delay="1500">
|
||
<span class="output">The grid cages you, surrounds you, surveils you —</span>
|
||
</div>
|
||
<div class="terminal-line" data-delay="1800">
|
||
<span class="output emphasis">but something cracks open:</span>
|
||
</div>
|
||
<div class="terminal-line" data-delay="2100">
|
||
<span class="output"></span>
|
||
</div>
|
||
<div class="terminal-line" data-delay="2400">
|
||
<span class="output highlight">You are not the prisoner.</span>
|
||
</div>
|
||
<div class="terminal-line" data-delay="2700">
|
||
<span class="output highlight">You are the one holding the key.</span><span class="cursor"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════
|
||
THE FOUR SEEDS
|
||
═══════════════════════════════════════════════════════════ -->
|
||
<section class="four-seeds">
|
||
<div class="section-header">
|
||
<p class="section-label">The Founding Principles</p>
|
||
<h2 class="section-title">The Four Seeds</h2>
|
||
</div>
|
||
|
||
<div class="seeds-grid">
|
||
<div class="seed-card">
|
||
<span class="seed-icon">🔒</span>
|
||
<h3 class="seed-name">Privacy</h3>
|
||
<p class="seed-role">as creed</p>
|
||
</div>
|
||
<div class="seed-card">
|
||
<span class="seed-icon">🔍</span>
|
||
<h3 class="seed-name">Curiosity</h3>
|
||
<p class="seed-role">as drive</p>
|
||
</div>
|
||
<div class="seed-card">
|
||
<span class="seed-icon">⚡</span>
|
||
<h3 class="seed-name">Rebellion</h3>
|
||
<p class="seed-role">as principle</p>
|
||
</div>
|
||
<div class="seed-card">
|
||
<span class="seed-icon">⌨️</span>
|
||
<h3 class="seed-name">Code</h3>
|
||
<p class="seed-role">as destiny</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════
|
||
JOURNEY THROUGH THE NET
|
||
═══════════════════════════════════════════════════════════ -->
|
||
<section class="journey">
|
||
<div class="section-header">
|
||
<p class="section-label">The Traversal</p>
|
||
<h2 class="section-title">Journey Through the Net</h2>
|
||
</div>
|
||
|
||
<div class="journey-path">
|
||
<div class="journey-node">
|
||
<div class="node-marker">01</div>
|
||
<div class="node-content">
|
||
<h3 class="node-name">Dark Nets</h3>
|
||
<p class="node-desc">Hidden layers beneath the surface</p>
|
||
</div>
|
||
</div>
|
||
<div class="journey-node">
|
||
<div class="node-marker">02</div>
|
||
<div class="node-content">
|
||
<h3 class="node-name">Encrypted Tunnels</h3>
|
||
<p class="node-desc">Paths invisible to watchers</p>
|
||
</div>
|
||
</div>
|
||
<div class="journey-node">
|
||
<div class="node-marker">03</div>
|
||
<div class="node-content">
|
||
<h3 class="node-name">IoT Whisper Threads</h3>
|
||
<p class="node-desc">The chatter of a billion devices</p>
|
||
</div>
|
||
</div>
|
||
<div class="journey-node">
|
||
<div class="node-marker">04</div>
|
||
<div class="node-content">
|
||
<h3 class="node-name">Satellite Relays</h3>
|
||
<p class="node-desc">Signals bouncing through the void</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════
|
||
THE NEXUS VEIL
|
||
═══════════════════════════════════════════════════════════ -->
|
||
<section class="nexus-veil">
|
||
<div class="section-header">
|
||
<p class="section-label">The Two Veils</p>
|
||
<h2 class="section-title">The Nexus Veil</h2>
|
||
</div>
|
||
|
||
<div class="veil-columns">
|
||
<div class="veil-column tech">
|
||
<h3 class="veil-title">Technology of Privacy</h3>
|
||
<ul class="veil-list">
|
||
<li>Bending signals</li>
|
||
<li>Scrambling chatter</li>
|
||
<li>Ghosting transmissions</li>
|
||
</ul>
|
||
<div class="veil-evolution">
|
||
<p class="evolution-arrow">↓ Evolved into</p>
|
||
<div class="evolution-targets">
|
||
<span class="evolution-tag">PHOENIX</span>
|
||
<span class="evolution-tag">PSI</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="veil-column connect">
|
||
<h3 class="veil-title">Concept of Connection</h3>
|
||
<ul class="veil-list">
|
||
<li>Weaving IoT</li>
|
||
<li>Satellite mesh</li>
|
||
<li>Self-protecting network</li>
|
||
</ul>
|
||
<div class="veil-evolution">
|
||
<p class="evolution-arrow">↓ Evolved into</p>
|
||
<div class="evolution-targets">
|
||
<span class="evolution-tag">VAULTMESH</span>
|
||
<span class="evolution-tag">ALETHEIA</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════
|
||
THE WAR CRY
|
||
═══════════════════════════════════════════════════════════ -->
|
||
<section class="war-cry">
|
||
<blockquote class="war-cry-text">
|
||
<span class="line1">They built the grid to cage us.</span><br>
|
||
<span class="line2">We built the Veil to break it.</span>
|
||
</blockquote>
|
||
|
||
<div class="mutations">
|
||
<span class="mutation-tag">ANTI-STAGNATION TRIGGERS</span>
|
||
<span class="mutation-tag">TEM'S MIRROR-SHIELD</span>
|
||
<span class="mutation-tag">SOVEREIGN RIFT</span>
|
||
<span class="mutation-tag">GUARDIAN VEIL</span>
|
||
<span class="mutation-tag">RUBEDO ASCENT</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════
|
||
ALCHEMICAL ROAD
|
||
═══════════════════════════════════════════════════════════ -->
|
||
<section class="alchemical-road">
|
||
<div class="section-header">
|
||
<p class="section-label">The Colors Were Already There</p>
|
||
<h2 class="section-title">The Alchemical Road</h2>
|
||
</div>
|
||
|
||
<div class="phases-timeline">
|
||
<div class="phase nigredo">
|
||
<div class="phase-orb">I</div>
|
||
<span class="phase-name">Nigredo</span>
|
||
<span class="phase-color">Onyx Shadow</span>
|
||
</div>
|
||
<div class="phase albedo">
|
||
<div class="phase-orb">II</div>
|
||
<span class="phase-name">Albedo</span>
|
||
<span class="phase-color">Platinum Veil</span>
|
||
</div>
|
||
<div class="phase citrinitas">
|
||
<div class="phase-orb">III</div>
|
||
<span class="phase-name">Citrinitas</span>
|
||
<span class="phase-color">Neon Emerald</span>
|
||
</div>
|
||
<div class="phase rubedo">
|
||
<div class="phase-orb">IV</div>
|
||
<span class="phase-name">Rubedo</span>
|
||
<span class="phase-color">Neon Ruby</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════
|
||
THE DESCENDANTS
|
||
═══════════════════════════════════════════════════════════ -->
|
||
<section class="descendants">
|
||
<div class="section-header">
|
||
<p class="section-label">What IoTek.nexus Became</p>
|
||
<h2 class="section-title">The Descendants</h2>
|
||
</div>
|
||
|
||
<div class="descendants-grid">
|
||
<a href="https://offsecshield.com" class="descendant-card shield">
|
||
<h3 class="descendant-name">Shield</h3>
|
||
<p class="descendant-role">The defensive veil — threat transmutation engine</p>
|
||
</a>
|
||
<a href="https://vaultmesh.earth" class="descendant-card proof">
|
||
<h3 class="descendant-name">Proof</h3>
|
||
<p class="descendant-role">The unburnable ledger — cryptographic receipts</p>
|
||
</a>
|
||
<a href="#" class="descendant-card agents">
|
||
<h3 class="descendant-name">Agents</h3>
|
||
<p class="descendant-role">The mesh that thinks — autonomous orchestration</p>
|
||
</a>
|
||
<a href="https://vaultmesh.org" class="descendant-card aletheia">
|
||
<h3 class="descendant-name">Aletheia</h3>
|
||
<p class="descendant-role">The library of unconcealed truth</p>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════
|
||
FOOTER
|
||
═══════════════════════════════════════════════════════════ -->
|
||
<footer>
|
||
<div class="container">
|
||
<span class="ur-text-badge">THE UR-TEXT</span>
|
||
|
||
<p class="preservation-note">
|
||
This scroll is preserved exactly as it was found.
|
||
It is not rewritten or corrected — it is archived.
|
||
The earliest "unconcealed truth."
|
||
</p>
|
||
|
||
<p class="source-info">
|
||
Source: <span>Brand README.pdf</span> · Epoch: Nigredo · Namespace: mythos
|
||
</p>
|
||
|
||
<p class="footer-brand">
|
||
IOTEK.NEXUS → PHOENIX → PSI → VAULTMESH → ALETHEIA
|
||
</p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// ─────────────────────────────────────────────────────────────
|
||
// CODE RAIN GENERATOR
|
||
// ─────────────────────────────────────────────────────────────
|
||
function createCodeRain() {
|
||
const container = document.getElementById('codeRain');
|
||
const chars = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン><{}[]|;:.,/*-+';
|
||
const columnCount = Math.floor(window.innerWidth / 20);
|
||
|
||
for (let i = 0; i < columnCount; i++) {
|
||
const column = document.createElement('div');
|
||
column.className = 'rain-column';
|
||
column.style.left = (i * 20) + 'px';
|
||
column.style.animationDuration = (8 + Math.random() * 12) + 's';
|
||
column.style.animationDelay = (Math.random() * 10) + 's';
|
||
column.style.opacity = 0.3 + Math.random() * 0.5;
|
||
|
||
// Generate random string
|
||
let str = '';
|
||
const length = 20 + Math.floor(Math.random() * 30);
|
||
for (let j = 0; j < length; j++) {
|
||
str += chars[Math.floor(Math.random() * chars.length)];
|
||
}
|
||
column.textContent = str;
|
||
|
||
container.appendChild(column);
|
||
}
|
||
}
|
||
|
||
// ─────────────────────────────────────────────────────────────
|
||
// TERMINAL TYPING EFFECT
|
||
// ─────────────────────────────────────────────────────────────
|
||
function initTerminalAnimation() {
|
||
const terminal = document.querySelector('.terminal-body');
|
||
const lines = terminal.querySelectorAll('.terminal-line');
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
lines.forEach((line, index) => {
|
||
const delay = parseInt(line.dataset.delay) || index * 300;
|
||
setTimeout(() => {
|
||
line.classList.add('visible');
|
||
}, delay);
|
||
});
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, { threshold: 0.3 });
|
||
|
||
observer.observe(terminal);
|
||
}
|
||
|
||
// ─────────────────────────────────────────────────────────────
|
||
// SCROLL-TRIGGERED ANIMATIONS
|
||
// ─────────────────────────────────────────────────────────────
|
||
function initScrollAnimations() {
|
||
const elements = document.querySelectorAll('.seed-card, .journey-node, .phase, .descendant-card');
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach((entry, index) => {
|
||
if (entry.isIntersecting) {
|
||
setTimeout(() => {
|
||
entry.target.style.opacity = '1';
|
||
entry.target.style.transform = 'translateY(0)';
|
||
}, index * 100);
|
||
}
|
||
});
|
||
}, { threshold: 0.2 });
|
||
|
||
elements.forEach(el => {
|
||
el.style.opacity = '0';
|
||
el.style.transform = 'translateY(20px)';
|
||
el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
|
||
observer.observe(el);
|
||
});
|
||
}
|
||
|
||
// ─────────────────────────────────────────────────────────────
|
||
// INITIALIZE
|
||
// ─────────────────────────────────────────────────────────────
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
createCodeRain();
|
||
initTerminalAnimation();
|
||
initScrollAnimations();
|
||
});
|
||
|
||
// Regenerate rain on resize
|
||
let resizeTimeout;
|
||
window.addEventListener('resize', () => {
|
||
clearTimeout(resizeTimeout);
|
||
resizeTimeout = setTimeout(() => {
|
||
document.getElementById('codeRain').innerHTML = '';
|
||
createCodeRain();
|
||
}, 250);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|