Files
poulinkes/public/index.html
2026-04-13 23:04:12 +02:00

438 lines
14 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>POULINKES.COM — They Were Here Before Us</title>
<meta
name="description"
content="The official home of the Poulinkes. Sacred. Eternal. Slightly aggressive."
/>
<meta property="og:title" content="POULINKES.COM" />
<meta
property="og:description"
content="They were here before us. They will outlive us."
/>
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🐔</text></svg>"
/>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<nav>
<div class="nav-brand">🐔 POULINKES.COM</div>
<ul>
<li><a href="/">The Nest</a></li>
<li><a href="/lore.html">Poulinke Lore</a></li>
<li><a href="/meet.html">Meet the Flock</a></li>
<li><a href="/conspiracies.html">Conspiracies</a></li>
<li><a href="/shop.html">Egg Shop</a></li>
<li><a href="/join.html" class="cta">Join the Flock</a></li>
</ul>
</nav>
<!-- ── HERO ──────────────────────────────────────────────────── -->
<section class="hero">
<div class="hero-eyeline">
Est. Before Time · Sacred Order of the Poulinkes · Since The Egg
</div>
<div class="hero-chicken wiggle" data-secret-chicken>🐔</div>
<h1>They Were Here Before Us.<br />They Will Outlive Us.</h1>
<h2>
The poulinke does not blink. The poulinke does not forgive. The poulinke
merely <em>exists</em> — and in that existence, renders all human
ambition beautifully, profoundly irrelevant.
</h2>
<div
style="
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
position: relative;
z-index: 1;
"
>
<button id="cluck-btn" class="btn btn-solid wiggle">
🐔 TRIGGER THE CLUCK 🐔
</button>
<a href="/lore.html" class="btn wiggle">Discover the Lore</a>
</div>
<p class="hero-sub">
⚠ Side effects of visiting this site may include feather growth, egg
cravings, and a growing sense that you have always been a poulinke. ⚠
</p>
</section>
<!-- ── TRUTH SECTION ──────────────────────────────────────────── -->
<section
style="
background: var(--egg-cream);
padding: 5rem 2rem;
text-align: center;
"
>
<h2 class="section-title">What Is a Poulinke?</h2>
<p class="section-sub">A question you should have asked sooner.</p>
<p
style="
max-width: 700px;
margin: 0 auto 2rem;
font-size: 1.15rem;
line-height: 1.9;
color: #444;
"
>
A <strong>poulinke</strong> is not merely a chicken. To call a poulinke
a chicken is to call the ocean "some water" or the sun "a warm rock."
The poulinke is an apex being — ancient, sovereign, and inexplicably
aware of your credit score.
</p>
<p
style="
max-width: 700px;
margin: 0 auto;
font-size: 1.15rem;
line-height: 1.9;
color: #444;
font-style: italic;
"
>
Scientists estimate there are approximately 33 billion poulinkes on
Earth. That is more than 4 per human.
<strong>They are already in the majority.</strong>
They are simply waiting.
</p>
</section>
<!-- ── TEASER CARDS ───────────────────────────────────────────── -->
<section style="background: white; padding: 5rem 2rem">
<h2 class="section-title">Enter the World</h2>
<p class="section-sub">
Choose wisely. They are watching which link you click.
</p>
<div class="cards">
<a href="/lore.html" style="color: inherit; display: block">
<div class="card wiggle">
<span class="card-icon">📜</span>
<h3>Ancient Poulinke Lore</h3>
<p>
The pyramids did not build themselves. Explore 6,000 years of
suppressed chicken history that the mainstream refuses to
acknowledge.
</p>
</div>
</a>
<a href="/meet.html" style="color: inherit; display: block">
<div class="card wiggle">
<span class="card-icon">👑</span>
<h3>Meet the Legendary Poulinkes</h3>
<p>
From Sir Clucksworth the Eternal to Countess Featherbottom von Egg
— meet the immortal icons who shaped our world (without asking
permission).
</p>
</div>
</a>
<a href="/conspiracies.html" style="color: inherit; display: block">
<div class="card wiggle">
<span class="card-icon">🔴</span>
<h3>The Conspiracies</h3>
<p>
WiFi signals. Road crossings. The moon. You thought these things
were unrelated. You thought wrong. Pull the string.
</p>
</div>
</a>
<a href="/shop.html" style="color: inherit; display: block">
<div class="card wiggle">
<span class="card-icon">🥚</span>
<h3>The Sacred Egg Shop</h3>
<p>
Acquire blessed artifacts from the poulinke realm. Premium coop
air. Signed eggs (unsigned). Feathers of uncertain origin. All out
of stock.
</p>
</div>
</a>
</div>
</section>
<!-- ── TESTIMONIALS ───────────────────────────────────────────── -->
<section class="dark-section">
<h2 class="section-title">What Others Are Saying</h2>
<p class="section-sub">Voices from members of the flock</p>
<div class="cards" style="max-width: 1000px; margin: 0 auto">
<div
class="card"
style="
background: rgba(255, 255, 255, 0.05);
border-color: rgba(245, 158, 11, 0.3);
"
>
<p
style="
color: var(--feather-pale);
font-style: italic;
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: 1rem;
"
>
"I came for the eggs. I stayed because the poulinkes asked me to.
They didn't use words. They just... stared. For eight hours. I
understood."
</p>
<p
style="
color: var(--egg-yolk);
font-family: &quot;Cinzel&quot;, serif;
font-size: 0.8rem;
letter-spacing: 0.1em;
"
>
— GERALD M., Former Accountant, Current Flock Member #4,441
</p>
</div>
<div
class="card"
style="
background: rgba(255, 255, 255, 0.05);
border-color: rgba(245, 158, 11, 0.3);
"
>
<p
style="
color: var(--feather-pale);
font-style: italic;
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: 1rem;
"
>
"My doctor said I had a 'chicken obsession.' My doctor has since
joined us. She clucks at the sunrise every morning. It's very
healthy."
</p>
<p
style="
color: var(--egg-yolk);
font-family: &quot;Cinzel&quot;, serif;
font-size: 0.8rem;
letter-spacing: 0.1em;
"
>
— DR. PATRICIA W., MD, Flock Member #9,002
</p>
</div>
<div
class="card"
style="
background: rgba(255, 255, 255, 0.05);
border-color: rgba(245, 158, 11, 0.3);
"
>
<p
style="
color: var(--feather-pale);
font-style: italic;
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: 1rem;
"
>
"I do not recall signing up. I do not recall agreeing to anything.
And yet, somehow, I feel <em>complete</em>. My feathers — I mean,
hair — has never looked better."
</p>
<p
style="
color: var(--egg-yolk);
font-family: &quot;Cinzel&quot;, serif;
font-size: 0.8rem;
letter-spacing: 0.1em;
"
>
— ANONYMOUS, Flock Member #???,???
</p>
</div>
</div>
</section>
<!-- ── STATS ──────────────────────────────────────────────────── -->
<section
style="
background: var(--egg-cream);
text-align: center;
padding: 5rem 2rem;
"
>
<h2 class="section-title">By the Numbers</h2>
<p class="section-sub">
These statistics are completely real and fully verified by poulinke
scientists.
</p>
<div
style="
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
max-width: 900px;
margin: 0 auto;
"
>
<div class="card wiggle">
<div
style="
font-family: &quot;Cinzel&quot;, serif;
font-size: 3rem;
font-weight: 900;
color: var(--egg-amber);
"
>
33B
</div>
<p style="font-size: 0.9rem; color: #666">
Poulinkes currently operational on Earth
</p>
</div>
<div class="card wiggle">
<div
style="
font-family: &quot;Cinzel&quot;, serif;
font-size: 3rem;
font-weight: 900;
color: var(--egg-amber);
"
>
6,000
</div>
<p style="font-size: 0.9rem; color: #666">
Years of documented poulinke civilization
</p>
</div>
<div class="card wiggle">
<div
style="
font-family: &quot;Cinzel&quot;, serif;
font-size: 3rem;
font-weight: 900;
color: var(--egg-amber);
"
>
1
</div>
<p style="font-size: 0.9rem; color: #666">
Poulinke that is currently reading this with you right now
</p>
</div>
<div class="card wiggle">
<div
style="
font-family: &quot;Cinzel&quot;, serif;
font-size: 3rem;
font-weight: 900;
color: var(--comb-red);
"
>
0
</div>
<p style="font-size: 0.9rem; color: #666">
Poulinkes who have ever apologized for anything
</p>
</div>
</div>
</section>
<!-- ── CTA ───────────────────────────────────────────────────── -->
<section
style="
background: var(--egg-dark);
text-align: center;
padding: 5rem 2rem;
"
>
<div style="font-size: 4rem; margin-bottom: 1rem">🥚</div>
<h2
style="
font-family: &quot;Cinzel&quot;, serif;
color: var(--egg-yolk);
font-size: clamp(1.5rem, 4vw, 2.5rem);
margin-bottom: 1rem;
"
>
The Egg Has Already Chosen You.
</h2>
<p
style="
font-family: &quot;Crimson Text&quot;, serif;
font-style: italic;
color: var(--feather-pale);
font-size: 1.15rem;
max-width: 550px;
margin: 0 auto 2rem;
line-height: 1.8;
opacity: 0.85;
"
>
You didn't find this website. It found you. There are no coincidences in
the coop. Join the flock. Become what you were always meant to be.
</p>
<a
href="/join.html"
class="btn btn-danger wiggle"
style="font-size: 1rem; padding: 1rem 2.5rem"
>
🐔 JOIN THE FLOCK NOW 🐔
</a>
<p
style="
font-family: &quot;Courier Prime&quot;, monospace;
font-size: 0.65rem;
color: rgba(255, 255, 255, 0.2);
margin-top: 1.5rem;
letter-spacing: 0.05em;
"
>
By reading this text you have already agreed to terms and conditions.
The terms are: be a poulinke. The conditions are: you already are.
</p>
</section>
<footer>
<p>🐔 &nbsp;<strong>POULINKES.COM</strong>&nbsp; 🐔</p>
<p>
Established Before Time Itself · All Rights Reserved by the Poulinkes ·
Humans May Not Have Rights Here
</p>
<p
style="
margin-top: 0.5rem;
font-family: &quot;Courier Prime&quot;, monospace;
font-size: 0.7rem;
opacity: 0.4;
"
>
Hint: type "cluck" · Hint: ↑ ↑ ↓ ↓ ← → ← → B A · Hint: you are being
watched right now
</p>
<p
style="
margin-top: 0.75rem;
font-family: &quot;Courier Prime&quot;, monospace;
font-size: 0.65rem;
opacity: 0.25;
"
>
This website was not built. It was <em>laid</em>. By
<a href="https://zias.be" style="color: inherit; text-decoration: none"
>zias.be</a
>. One (1) human was permitted. The council has been notified.
</p>
</footer>
<script src="/main.js"></script>
</body>
</html>