File: /home/getdvgwc/chilination.getdripped.shop/about.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Our Story — Chilination</title>
<meta name="description" content="The story behind Chilination. Single-source Kenyan chili oil crafted by people who believe flavor is science." />
<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=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet" />
<style>
.about-hero {
min-height: 70vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 10rem 5% 5rem;
background: var(--bg2);
position: relative;
overflow: hidden;
}
.about-hero__bg {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 70% 30%, rgba(153,0,0,0.15) 0%, transparent 60%),
radial-gradient(ellipse at 10% 80%, rgba(255,204,0,0.06) 0%, transparent 50%);
}
.about-hero__content { position: relative; z-index: 1; max-width: 700px; }
.about-hero__content p { color: var(--text-muted); font-size: 1.1rem; line-height: 1.8; margin-top: 1.5rem; max-width: 550px; }
.about-body { padding: 7rem 5%; max-width: 1200px; margin: 0 auto; }
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
margin-bottom: 7rem;
}
.about-grid.reverse { direction: rtl; }
.about-grid.reverse > * { direction: ltr; }
.about-visual {
aspect-ratio: 4/5;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border);
background: var(--bg2);
position: relative;
}
.about-visual img { width: 100%; height: 100%; object-fit: cover; }
.about-visual__frame {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
}
.about-visual__frame canvas { width: 100%; height: 100%; }
.about-text h2 { margin-bottom: 1.2rem; }
.about-text p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.85; margin-bottom: 1rem; }
.about-text em { color: var(--yellow); font-style: normal; font-weight: 600; }
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.value-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 2rem;
transition: all var(--transition);
}
.value-card:hover { border-color: rgba(153,0,0,0.3); transform: translateY(-4px); }
.value-card .val-icon { font-size: 2rem; margin-bottom: 0.8rem; }
.value-card h3 { font-family: var(--font-display); font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--yellow); margin-bottom: 0.5rem; }
.value-card p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.7; }
.about-team { padding: 5rem 5%; background: var(--bg2); text-align: center; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin-top: 3rem; max-width: 900px; margin-left: auto; margin-right: auto; }
.team-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; }
.team-avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--red), var(--yellow)); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.5rem; color: #fff; margin: 0 auto 1rem; }
.team-name { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.2rem; }
.team-role { font-size: 0.75rem; color: var(--text-muted); font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.about-cta { padding: 7rem 5%; background: var(--bg); text-align: center; }
.about-cta h2 { margin-bottom: 1rem; }
.about-cta p { color: var(--text-muted); margin-bottom: 2.5rem; }
.about-cta .cta-btns { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 768px) {
.about-grid { grid-template-columns: 1fr; gap: 3rem; }
.about-grid.reverse { direction: ltr; }
}
</style>
<script type="module" crossorigin src="/assets/main-CMlGU-Hg.js"></script>
<link rel="stylesheet" crossorigin href="/assets/main-uIGfidSs.css">
</head>
<body class="dark-mode" data-page="about">
<div id="loader" class="loader">
<div class="loader__logo"><img src="/assets/logo.png" alt="Chilination" class="loader__logo-img" /></div>
<div class="loader__bar-track"><div class="loader__bar" id="loaderBar" style="width:100%"></div></div>
<div class="loader__pct" id="loaderPct">100%</div>
<div class="loader__tag">Our Story</div>
</div>
<nav class="navbar" id="navbar">
<a href="/" class="nav-logo"><img src="/assets/logo.png" alt="Chilination" class="nav-logo__img" /></a>
<ul class="nav-links">
<li><a href="/">Home</a></li>
<li><a href="/shop.html">Shop</a></li>
<li><a href="/science.html">The Science</a></li>
<li><a href="/about.html" class="active">About</a></li>
</ul>
<div class="nav-actions">
<button class="cart-btn" id="cartBtn" aria-label="Open Cart">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></svg>
<span class="cart-count" id="cartCount">0</span>
</button>
</div>
<button class="nav-hamburger" id="navHamburger" aria-label="Menu"><span></span><span></span><span></span></button>
</nav>
<section class="about-hero">
<div class="about-hero__bg"></div>
<div class="about-hero__content">
<div class="section-tag">THE STORY</div>
<h1 class="section-title">Born in Kenya.<br><span class="accent">Built on Fire.</span></h1>
<p>Chilination began with a single obsession: why does Kenyan bird's eye chili taste so extraordinary — and why isn't it bottled at the standard it deserves?</p>
</div>
</section>
<main class="about-body" id="farm">
<!-- Origin story -->
<div class="about-grid reveal">
<div class="about-visual">
<img src="/assets/frames/frame_090_delay-0.033s.png" alt="Chilination bottle - origin" />
</div>
<div class="about-text">
<div class="section-tag">WHERE IT STARTS</div>
<h2 class="section-title">The Kenyan<br><span class="accent">Highland Farm</span></h2>
<p>Our chilies grow at 1,800m above sea level in Kenya's Central Highlands. The cooler temperatures slow the chili's growth — concentrating capsaicinoids, essential oils, and the complex aromatic compounds that make a world-class chili.</p>
<p>We work with a network of small-scale farmers, paying above-market rates and providing GPS-tagged traceability from farm to bottle. Every batch is origin-stamped. No anonymized supply chains.</p>
<p>This is <em>single-source</em> chili oil. You know exactly where your heat comes from.</p>
</div>
</div>
<!-- Process -->
<div class="about-grid reverse reveal">
<div class="about-text">
<div class="section-tag">THE CRAFT</div>
<h2 class="section-title">Cold-Pressed.<br><span class="accent">Never Compromised.</span></h2>
<p>Most commercial chili oils are high-heat extracted, destroying the volatile aromatic compounds that make fresh chili so compelling. We infuse at sub-60°C — it takes longer, costs more, and produces something categorically superior.</p>
<p>Our pulp is stone-ground and slow-dried. No harsh solvents, no bleaching agents, no fillers. Just chili, oil, and patience.</p>
<p>The result is a product that respects the ingredient — and the person eating it.</p>
</div>
<div class="about-visual">
<img src="/assets/frames/frame_140_delay-0.033s.png" alt="Chilination production process" />
</div>
</div>
<!-- Values -->
<div class="reveal">
<div class="section-header" style="text-align:left; margin-bottom: 2rem;">
<div class="section-tag">WHAT WE STAND FOR</div>
<h2 class="section-title">Our <span class="accent">Principles</span></h2>
</div>
<div class="values-grid">
<div class="value-card">
<div class="val-icon">🔬</div>
<h3>Science-Led</h3>
<p>Every formulation decision is grounded in food science. We Scoville-test every batch and track capsaicinoid profiles.</p>
</div>
<div class="value-card">
<div class="val-icon">🐄</div>
<h3>Clean Label</h3>
<p>Zero artificial preservatives, colours, or flavourings. We believe the chili should do the work.</p>
</div>
<div class="value-card">
<div class="val-icon">🤝</div>
<h3>Farmer First</h3>
<p>Our farmers are partners, not commodities. Above-market pricing and long-term supply agreements.</p>
</div>
<div class="value-card">
<div class="val-icon">🌍</div>
<h3>Kenyan Pride</h3>
<p>This is a Kenyan product for Kenyan tables — and the world. We don't pretend otherwise.</p>
</div>
</div>
</div>
</main>
<!-- CTA -->
<section class="about-cta reveal">
<div class="section-tag">JOIN THE HEAT</div>
<h2 class="section-title">Ready to <span class="accent">Taste It?</span></h2>
<p>Choose your intensity. Tingle, Blaze, or Sizzle — there's a tier for every palate.</p>
<div class="cta-btns">
<a href="/shop.html" class="btn btn-primary btn-lg">Shop Now</a>
<a href="/science.html" class="btn btn-ghost btn-lg">The Science →</a>
</div>
</section>
<div class="cart-overlay" id="cartOverlay"></div>
<aside class="mini-cart" id="miniCart">
<div class="mini-cart__header">
<h3>Your Cart</h3>
<button class="mini-cart__close" id="cartClose">✕</button>
</div>
<div class="mini-cart__items" id="cartItems"></div>
<div class="mini-cart__footer" id="cartFooter" style="display:none">
<div class="cart-total"><span>Total</span><span id="cartTotal">KSh 0</span></div>
<a href="/checkout.html" class="btn btn-primary btn-block">Checkout</a>
</div>
</aside>
<footer class="footer">
<div class="footer__bottom" style="padding-top:2rem; border-top:1px solid var(--border);">
<p>© 2026 Chilination Ltd. Nairobi, Kenya.</p>
<p><a href="/">Home</a> · <a href="/shop.html">Shop</a> · <a href="/science.html">Science</a></p>
</div>
</footer>
</body>
</html>