File: /home/getdvgwc/chilination.getdripped.shop/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>Chilination — Premium Kenyan Chili Oil & Pulp</title>
<meta name="description" content="Chilination crafts Kenya's finest single-source chili oil and pulp. Select your heat: Tingle, Blaze, or Sizzle. Zero artificial preservatives. Pure fire." />
<meta name="keywords" content="chili oil, Kenya, premium, Tingle, Blaze, Sizzle, bird's eye chili, chili pulp" />
<meta property="og:title" content="Chilination — Premium Kenyan Chili Oil" />
<meta property="og:description" content="Premium single-source chili infusion from Kenya. The science of heat." />
<meta property="og:type" content="website" />
<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" />
<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="home">
<!-- ── LOADER ─────────────────────────────── -->
<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"></div>
</div>
<div class="loader__pct" id="loaderPct">0%</div>
<div class="loader__tag">Loading the Heat…</div>
</div>
<!-- ── NAVBAR ─────────────────────────────── -->
<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="/" class="active">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">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>
<a href="/shop.html" class="btn btn-primary nav-shop-btn">Shop Now</a>
</div>
<button class="nav-hamburger" id="navHamburger" aria-label="Menu">
<span></span><span></span><span></span>
</button>
</nav>
<!-- ── HERO: SCROLL-DRIVEN SEQUENCE ──────── -->
<section class="hero" id="hero">
<!-- Frame canvas -->
<canvas class="hero__canvas" id="heroCanvas"></canvas>
<!-- Dark vignette overlay -->
<div class="hero__vignette"></div>
<!-- Left content -->
<div class="hero__content" id="heroContent">
<div class="hero__variant-label" id="heroVariantLabel">01</div>
<h1 class="hero__name" id="heroName">TINGLE</h1>
<p class="hero__subtitle" id="heroSubtitle">Mild Infusion</p>
<p class="hero__science" id="heroScience">
With just 30,000 SHU of capsaicin, Tingle activates TRPV1 receptors at a threshold that enhances taste without overwhelming it. The result: warmth you <em>feel</em>, not just heat you endure.
</p>
<div class="hero__ctas">
<a href="/shop.html" class="btn btn-primary" id="heroShopBtn">Shop Now</a>
<a href="/science.html" class="btn btn-ghost">Explore Flavor</a>
</div>
</div>
<!-- Right: Vertical Flavor Switcher -->
<div class="hero__switcher" id="heroSwitcher">
<button class="switcher-item active" data-variant="0" id="sw0">
<span class="sw-num">01</span>
<span class="sw-name">TINGLE</span>
<span class="sw-heat">Mild</span>
</button>
<button class="switcher-item" data-variant="1" id="sw1">
<span class="sw-num">02</span>
<span class="sw-name">BLAZE</span>
<span class="sw-heat">Medium</span>
</button>
<button class="switcher-item" data-variant="2" id="sw2">
<span class="sw-num">03</span>
<span class="sw-name">SIZZLE</span>
<span class="sw-heat">Extra Hot</span>
</button>
</div>
<!-- Scroll indicator -->
<div class="hero__scroll-hint">
<span>Scroll to Experience</span>
<div class="scroll-mouse"><div class="scroll-wheel"></div></div>
</div>
</section>
<!-- ── SCROLL PADDING (drives canvas animation) ── -->
<div class="scroll-driver" id="scrollDriver"></div>
<!-- ── BRAND STRIP ─────────────────────────── -->
<section class="brand-strip">
<div class="strip-marquee">
<span>KENYAN BIRD'S EYE CHILI</span><span class="dot">✦</span>
<span>ZERO ARTIFICIAL PRESERVATIVES</span><span class="dot">✦</span>
<span>SINGLE-SOURCE ORIGIN</span><span class="dot">✦</span>
<span>COLD-PRESSED INFUSION</span><span class="dot">✦</span>
<span>THE SCIENCE OF HEAT</span><span class="dot">✦</span>
<span>KENYAN BIRD'S EYE CHILI</span><span class="dot">✦</span>
<span>ZERO ARTIFICIAL PRESERVATIVES</span><span class="dot">✦</span>
<span>SINGLE-SOURCE ORIGIN</span><span class="dot">✦</span>
<span>COLD-PRESSED INFUSION</span><span class="dot">✦</span>
<span>THE SCIENCE OF HEAT</span><span class="dot">✦</span>
</div>
</section>
<!-- ── PULP vs OIL SPLIT ───────────────────── -->
<section class="split-section" id="splitSection">
<div class="split-panel split-panel--oil">
<div class="split-panel__inner" data-parallax="0.3">
<div class="split-panel__tag">THE OIL</div>
<h2 class="split-panel__title">Liquid<br>Gold</h2>
<p class="split-panel__body">Cold-pressed at sub-60°C to preserve every aromatic volatile. The result: a translucent, amber infusion that cascades on contact — coating, not drowning, your dish.</p>
<div class="split-panel__stat">
<span class="stat-num">60°C</span>
<span class="stat-label">Max Infusion Temp</span>
</div>
</div>
<div class="split-oil-visual">
<div class="oil-drop"></div>
<div class="oil-drop oil-drop--2"></div>
<div class="oil-drop oil-drop--3"></div>
</div>
</div>
<div class="split-divider"></div>
<div class="split-panel split-panel--pulp">
<div class="split-panel__inner" data-parallax="-0.3">
<div class="split-panel__tag">THE PULP</div>
<h2 class="split-panel__title">Raw<br>Texture</h2>
<p class="split-panel__body">Stone-ground Kenyan bird's eye chilies, dried and milled to a coarse paste. Rich in capsaicinoids, fibre, and complex smoky notes. The chef's secret weapon.</p>
<div class="split-panel__stat">
<span class="stat-num">100K+</span>
<span class="stat-label">Scoville Heat Units</span>
</div>
</div>
<div class="split-pulp-visual">
<div class="pulp-grain"></div>
</div>
</div>
</section>
<!-- ── PRODUCTS PREVIEW ────────────────────── -->
<section class="products-preview" id="productsPreview">
<div class="section-header">
<div class="section-tag">THE FLAVOR LAB</div>
<h2 class="section-title">Choose Your<br><span class="accent">Intensity</span></h2>
<p class="section-sub">Three profiles. One obsession. Crafted from Kenya's highlands.</p>
</div>
<div class="products-grid" id="productsGrid">
<!-- Cards injected by JS -->
</div>
<div class="products-cta">
<a href="/shop.html" class="btn btn-primary btn-lg">View All Products</a>
</div>
</section>
<!-- ── INGREDIENTS ─────────────────────────── -->
<section class="ingredients" id="ingredients">
<div class="ingredients__bg-text">CHILI</div>
<div class="ingredients__content">
<div class="section-tag" style="color:var(--yellow)">THE INGREDIENT</div>
<h2 class="section-title">Kenyan Bird's Eye<br><span class="accent">Capsicum annuum</span></h2>
<div class="ingredients__facts">
<div class="fact-card">
<div class="fact-icon">🌶️</div>
<div class="fact-title">Capsaicin-Rich</div>
<p>150,000 SHU average. Pure, unadulterated heat from the Kenyan highlands.</p>
</div>
<div class="fact-card">
<div class="fact-icon">🌿</div>
<div class="fact-title">Zero Preservatives</div>
<p>Natural anti-oxidant infusion extends shelf life without chemical additives.</p>
</div>
<div class="fact-card">
<div class="fact-icon">⚗️</div>
<div class="fact-title">Bioactive Compounds</div>
<p>Capsaicinoids, flavonoids, and vitamin C complex — heat that works for you.</p>
</div>
<div class="fact-card">
<div class="fact-icon">🏔️</div>
<div class="fact-title">Single-Source</div>
<p>Traceability from farm to bottle. Every batch is numbered and origin-stamped.</p>
</div>
</div>
</div>
</section>
<!-- ── NUTRITION CARD ──────────────────────── -->
<section class="nutrition-section">
<div class="nutrition-card">
<div class="nutrition-card__header">
<div class="nut-logo"><img src="/assets/logo.png" alt="Chilination" style="height:36px;width:auto;" /></div>
<div class="nut-variant">BLAZE — Medium Heat</div>
</div>
<div class="nutrition-facts">
<h3>Nutrition Facts</h3>
<div class="nut-serving">Serving Size: 5ml (1 tsp) · Servings Per Bottle: 36</div>
<div class="nut-divider thick"></div>
<div class="nut-row main">
<span>Calories</span><span>35</span>
</div>
<div class="nut-divider"></div>
<div class="nut-row sub"><span>Total Fat</span><span>3.5g</span></div>
<div class="nut-row sub indent"><span>Saturated Fat</span><span>0.5g</span></div>
<div class="nut-row sub indent"><span>Trans Fat</span><span>0g</span></div>
<div class="nut-divider"></div>
<div class="nut-row sub"><span>Sodium</span><span>80mg</span></div>
<div class="nut-row sub"><span>Total Carbohydrate</span><span>1g</span></div>
<div class="nut-row sub"><span>Protein</span><span>0.2g</span></div>
<div class="nut-divider thick"></div>
<div class="nut-row badge-row">
<span class="badge">Zero Artificial Additives</span>
<span class="badge">Vegan</span>
<span class="badge">Gluten-Free</span>
</div>
</div>
</div>
<div class="nutrition-copy">
<div class="section-tag">TECHNICAL SPEC</div>
<h2 class="section-title">Clean Label.<br><span class="accent">Maximum Impact.</span></h2>
<p>Every batch of Chilination is formulated without fillers, thickeners, or synthetic colour. What you see in the bottle is exactly what goes in your food — pure chili, pure oil, and nothing else.</p>
<ul class="clean-list">
<li>✓ No artificial colours</li>
<li>✓ No synthetic preservatives</li>
<li>✓ No hidden fillers</li>
<li>✓ Batch-numbered provenance</li>
<li>✓ Cold-chain certified</li>
</ul>
</div>
</section>
<!-- ── TESTIMONIALS ────────────────────────── -->
<section class="testimonials">
<div class="section-header">
<div class="section-tag" style="color:var(--yellow)">SOCIAL PROOF</div>
<h2 class="section-title">What Kenya<br><span class="accent">Is Saying</span></h2>
</div>
<div class="testimonials-track-wrap">
<div class="testimonials-track" id="testimonialsTrack">
<!-- injected by JS -->
</div>
</div>
</section>
<!-- ── SUBSCRIBE BANNER ────────────────────── -->
<section class="subscribe-banner">
<div class="sub-banner__inner">
<div class="sub-banner__flame">🔥</div>
<h2 class="sub-banner__title">Subscribe & Save <span class="accent">15%</span></h2>
<p class="sub-banner__sub">Get your monthly heat fix delivered to your door. Cancel anytime.</p>
<div class="sub-banner__ctas">
<a href="/shop.html#subscribe" class="btn btn-yellow">Start Subscription</a>
<a href="/shop.html" class="btn btn-ghost">One-Time Purchase</a>
</div>
</div>
</section>
<!-- ── FOOTER ─────────────────────────────── -->
<footer class="footer">
<div class="footer__top">
<div class="footer__brand">
<div class="footer-logo"><img src="/assets/logo.png" alt="Chilination" /></div>
<p>Kenya's premium single-source chili oil and pulp. The science of heat, bottled.</p>
<div class="footer-socials">
<a href="#" aria-label="Instagram">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
</a>
<a href="#" aria-label="TikTok">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 00-.79-.05 6.34 6.34 0 00-6.34 6.34 6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.33-6.34V8.69a8.27 8.27 0 004.83 1.55V6.79a4.85 4.85 0 01-1.06-.1z"/></svg>
</a>
</div>
</div>
<div class="footer__links">
<div class="footer__col">
<h4>Products</h4>
<a href="/shop.html">Tingle Oil</a>
<a href="/shop.html">Blaze Oil</a>
<a href="/shop.html">Sizzle Oil</a>
<a href="/shop.html">Chili Pulp</a>
<a href="/shop.html#subscribe">Subscriptions</a>
</div>
<div class="footer__col">
<h4>Brand</h4>
<a href="/science.html">The Science</a>
<a href="/about.html">Our Story</a>
<a href="/about.html#farm">The Farm</a>
<a href="/shop.html">Wholesale</a>
</div>
<div class="footer__col">
<h4>Support</h4>
<a href="#">Shipping — Kenya</a>
<a href="#">Returns Policy</a>
<a href="#">FAQ</a>
<a href="#">Contact Us</a>
</div>
</div>
</div>
<div class="footer__bottom">
<p>© 2026 Chilination Ltd. Nairobi, Kenya. All rights reserved.</p>
<p>Privacy Policy · Terms · Cookie Policy</p>
</div>
</footer>
<!-- ── MINI CART ───────────────────────────── -->
<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" aria-label="Close cart">✕</button>
</div>
<div class="mini-cart__items" id="cartItems">
<div class="empty-cart">
<div class="empty-cart__icon">🛒</div>
<p>Your cart is empty.</p>
<a href="/shop.html" class="btn btn-primary">Browse Products</a>
</div>
</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>
<a href="/shop.html" class="btn btn-ghost btn-block">Continue Shopping</a>
</div>
</aside>
</body>
</html>