*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
:root {
–cream: #F5F0E8;
–parchment: #EDE6D6;
–sand: #D9CEB8;
–bark: #8C7355;
–umber: #5C4A30;
–forest: #3D5A3E;
–sage: #7A9E7E;
–terracotta: #C4714A;
–clay: #A85C3A;
–charcoal: #2A2520;
–ink: #1A1510;
–font-display: ‘Lora’, Georgia, serif;
–font-body: ‘DM Sans’, sans-serif;
–max: 1100px;
–pad: clamp(20px, 5vw, 60px);
–ease: cubic-bezier(0.22, 1, 0.36, 1);
}
body { font-family: var(–font-body); background: var(–cream); color: var(–ink); font-size: 16px; line-height: 1.65; overflow-x: hidden; }
.nm2-wrap { max-width: var(–max); margin: 0 auto; padding: 0 var(–pad); }
.nm2-nav { position: sticky; top: 0; z-index: 100; background: rgba(245,240,232,0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(–sand); }
.nm2-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 16px; }
.nm2-logo { display: flex; align-items: center; gap: 10px; }
.nm2-mark { width: 32px; height: 32px; border-radius: 50%; background: var(–forest); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nm2-name { font-family: var(–font-display); font-size: 17px; font-weight: 600; color: var(–ink); }
.nm2-links { display: flex; align-items: center; gap: 28px; list-style: none; }
.nm2-links a { font-size: 14px; color: var(–umber); transition: color 0.2s; }
.nm2-links a:hover { color: var(–ink); }
.nm2-cta { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; background: var(–forest); color: var(–cream) !important; border-radius: 100px; font-size: 13px; font-weight: 500; transition: background 0.2s, transform 0.15s; white-space: nowrap; }
.nm2-cta:hover { background: var(–umber); transform: translateY(-1px); }
@media (max-width: 700px) { .nm2-links { display: none; } }
.nm2-hero { min-height: 92vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; padding: 80px 0 60px; }
@media (max-width: 800px) { .nm2-hero { grid-template-columns: 1fr; min-height: auto; padding: 52px 0 40px; gap: 40px; } }
.nm2-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(–bark); margin-bottom: 22px; }
.nm2-eyebrow::before { content: ”; width: 24px; height: 1px; background: var(–bark); }
.nm2-h1 { font-family: var(–font-display); font-size: clamp(38px, 5vw, 62px); line-height: 1.08; letter-spacing: -0.01em; color: var(–ink); margin-bottom: 22px; }
.nm2-h1 em { font-style: italic; color: var(–terracotta); }
.nm2-hero-body { font-size: 16px; color: var(–umber); max-width: 440px; line-height: 1.7; margin-bottom: 32px; }
.nm2-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.nm2-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 100px; border: 1px solid var(–sand); background: var(–parchment); font-size: 12px; color: var(–umber); }
.nm2-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.nm2-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: var(–terracotta); color: var(–cream); border-radius: 100px; font-size: 15px; font-weight: 500; transition: background 0.2s, transform 0.15s; }
.nm2-btn:hover { background: var(–clay); transform: translateY(-2px); color: var(–cream); }
.nm2-btn-ghost { display: inline-flex; align-items: center; gap: 6px; padding: 14px 24px; border: 1px solid var(–sand); border-radius: 100px; font-size: 14px; color: var(–umber); background: transparent; transition: border-color 0.2s, color 0.2s; }
.nm2-btn-ghost:hover { border-color: var(–bark); color: var(–ink); }
.nm2-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(–sand); border: 1px solid var(–sand); border-radius: 18px; overflow: hidden; margin-top: 40px; }
.nm2-stat { background: var(–cream); padding: 20px 16px; text-align: center; }
.nm2-stat-val { font-family: var(–font-display); font-size: 24px; color: var(–ink); display: block; }
.nm2-stat-lbl { font-size: 12px; color: var(–bark); margin-top: 2px; }
.nm2-hero-card { width: 100%; max-width: 420px; aspect-ratio: 3/4; border-radius: 28px; background: var(–parchment); border: 1px solid var(–sand); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; position: relative; overflow: hidden; }
.nm2-hero-card::before { content: ”; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; border-radius: 50%; background: var(–terracotta); opacity: 0.08; }
.nm2-card-label { font-family: var(–font-display); font-size: 13px; color: var(–bark); letter-spacing: 0.05em; }
.nm2-card-note { font-size: 11px; color: var(–sand); font-style: italic; }
.nm2-section { padding: clamp(60px, 8vw, 100px) 0; }
.nm2-section-title { font-family: var(–font-display); font-size: clamp(28px, 3.5vw, 44px); line-height: 1.1; color: var(–ink); margin-bottom: 16px; }
.nm2-section-body { font-size: 16px; color: var(–umber); line-height: 1.7; max-width: 520px; }
.nm2-divider { height: 1px; background: linear-gradient(90deg, transparent, var(–sand), transparent); }
.nm2-parchment { background: var(–parchment); }
.nm2-forest { background: var(–forest); color: var(–cream); }
.nm2-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-top: 48px; }
@media (max-width: 800px) { .nm2-grid2 { grid-template-columns: 1fr; } }
.nm2-card { background: var(–cream); border: 1px solid var(–sand); border-radius: 24px; padding: 32px; }
.nm2-product-name { font-family: var(–font-display); font-size: 22px; color: var(–ink); margin-bottom: 6px; }
.nm2-product-tag { font-size: 14px; color: var(–bark); margin-bottom: 20px; }
.nm2-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.nm2-badge { padding: 5px 12px; border-radius: 100px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; }
.nm2-badge-g { background: #DDF0DE; color: var(–forest); }
.nm2-badge-s { background: var(–parchment); color: var(–umber); border: 1px solid var(–sand); }
.nm2-badge-t { background: #F7E4DC; color: var(–clay); }
.nm2-features { list-style: none; border-top: 1px solid var(–sand); padding-top: 20px; }
.nm2-features li { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(217,206,184,0.5); font-size: 14px; color: var(–umber); align-items: flex-start; }
.nm2-dot { width: 6px; height: 6px; border-radius: 50%; background: var(–terracotta); flex-shrink: 0; margin-top: 8px; }
.nm2-why-list { list-style: none; }
.nm2-why-item { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(–sand); align-items: flex-start; }
.nm2-why-item:first-child { border-top: 1px solid var(–sand); }
.nm2-why-icon { width: 40px; height: 40px; border-radius: 12px; background: var(–parchment); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; border: 1px solid var(–sand); }
.nm2-why-title { font-weight: 500; color: var(–ink); margin-bottom: 3px; font-size: 15px; }
.nm2-why-desc { font-size: 13px; color: var(–umber); line-height: 1.6; }
.nm2-ing-layout { display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; align-items: center; margin-top: 48px; }
@media (max-width: 800px) { .nm2-ing-layout { grid-template-columns: 1fr; } }
.nm2-ing-list { list-style: none; }
.nm2-ing-item { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(–sand); align-items: start; }
.nm2-ing-num { font-family: var(–font-display); font-size: 11px; color: var(–bark); padding-top: 3px; opacity: 0.6; }
.nm2-ing-name { font-weight: 500; color: var(–ink); margin-bottom: 2px; font-size: 15px; }
.nm2-ing-role { font-size: 13px; color: var(–umber); }
.nm2-panel { background: var(–parchment); border: 1px solid var(–sand); border-radius: 24px; padding: 36px; }
.nm2-panel-title { font-family: var(–font-display); font-size: 18px; color: var(–ink); margin-bottom: 20px; }
.nm2-formula { list-style: none; }
.nm2-formula-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(–sand); font-size: 14px; }
.nm2-formula-row:last-child { border-bottom: none; }
.nm2-formula-ing { color: var(–umber); }
.nm2-formula-role { font-size: 11px; padding: 3px 10px; border-radius: 100px; background: var(–cream); color: var(–bark); border: 1px solid var(–sand); }
.nm2-ing-note { margin-top: 20px; font-size: 12px; color: var(–bark); font-style: italic; line-height: 1.6; }
.nm2-waitlist-inner { max-width: 620px; margin: 0 auto; text-align: center; }
.nm2-waitlist-title { font-family: var(–font-display); font-size: clamp(28px,3.5vw,44px); line-height: 1.1; color: var(–cream); margin-bottom: 16px; }
.nm2-waitlist-body { font-size: 16px; color: rgba(245,240,232,0.7); line-height: 1.7; max-width: 520px; margin: 0 auto 32px; }
.nm2-wform { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px; }
.nm2-winput { flex: 1; min-width: 240px; padding: 14px 20px; border-radius: 100px; border: 1px solid rgba(245,240,232,0.2); background: rgba(245,240,232,0.1); color: var(–cream); font-family: var(–font-body); font-size: 15px; outline: none; }
.nm2-winput::placeholder { color: rgba(245,240,232,0.4); }
.nm2-wcta { padding: 14px 28px; border-radius: 100px; background: var(–cream); color: var(–forest); font-weight: 500; font-size: 15px; border: none; cursor: pointer; font-family: var(–font-body); transition: background 0.2s; }
.nm2-wcta:hover { background: var(–parchment); }
.nm2-wnote { font-size: 12px; color: rgba(245,240,232,0.45); }
.nm2-perks { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 36px; padding-top: 36px; border-top: 1px solid rgba(245,240,232,0.12); }
.nm2-perk { text-align: center; }
.nm2-perk-icon { font-size: 22px; margin-bottom: 4px; }
.nm2-perk-text { font-size: 12px; color: rgba(245,240,232,0.55); line-height: 1.4; }
.nm2-faq-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; margin-top: 48px; }
@media (max-width: 800px) { .nm2-faq-layout { grid-template-columns: 1fr; } }
.nm2-details { border-bottom: 1px solid var(–sand); }
.nm2-details:first-of-type { border-top: 1px solid var(–sand); }
.nm2-summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; cursor: pointer; font-weight: 500; font-size: 15px; color: var(–ink); list-style: none; gap: 16px; }
.nm2-summary::-webkit-details-marker { display: none; }
.nm2-faq-icon { width: 22px; height: 22px; border-radius: 50%; background: var(–parchment); border: 1px solid var(–sand); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; color: var(–bark); }
.nm2-details p { font-size: 14px; color: var(–umber); padding-bottom: 18px; line-height: 1.7; }
.nm2-contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
@media (max-width: 800px) { .nm2-contact-layout { grid-template-columns: 1fr; } }
.nm2-contact-details { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.nm2-contact-row { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(–umber); }
.nm2-contact-icon { width: 34px; height: 34px; border-radius: 10px; background: var(–cream); border: 1px solid var(–sand); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.nm2-cform { background: var(–cream); border: 1px solid var(–sand); border-radius: 24px; padding: 32px; }
.nm2-form-title { font-family: var(–font-display); font-size: 20px; color: var(–ink); margin-bottom: 20px; }
.nm2-field { margin-bottom: 14px; }
.nm2-field label { display: block; font-size: 12px; font-weight: 500; color: var(–bark); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 6px; }
.nm2-field input, .nm2-field textarea { width: 100%; padding: 12px 16px; border: 1px solid var(–sand); border-radius: 12px; background: var(–parchment); font-family: var(–font-body); font-size: 14px; color: var(–ink); outline: none; }
.nm2-field textarea { resize: vertical; min-height: 100px; }
.nm2-form-submit { width: 100%; padding: 14px; border-radius: 100px; background: var(–terracotta); color: var(–cream); border: none; cursor: pointer; font-family: var(–font-body); font-size: 15px; font-weight: 500; margin-top: 6px; transition: background 0.2s; }
.nm2-form-submit:hover { background: var(–clay); }
.nm2-footer { background: var(–ink); color: var(–sand); padding: 48px 0; }
.nm2-footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; }
.nm2-footer-logo { display: flex; align-items: center; gap: 10px; }
.nm2-footer-mark { width: 28px; height: 28px; border-radius: 50%; background: var(–bark); }
.nm2-footer-name { font-family: var(–font-display); font-size: 15px; color: var(–parchment); }
.nm2-footer-links { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; }
.nm2-footer-links a { font-size: 13px; color: var(–bark); transition: color 0.2s; }
.nm2-footer-links a:hover { color: var(–sand); }
.nm2-footer-copy { font-size: 12px; color: var(–umber); }
.nm2-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(–ease), transform 0.7s var(–ease); }
.nm2-reveal.nm2-in { opacity: 1; transform: translateY(0); }
.nm2-d1 { transition-delay: 0.1s; } .nm2-d2 { transition-delay: 0.2s; } .nm2-d3 { transition-delay: 0.3s; }
.nm2-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(–forest); color: var(–cream); padding: 12px 24px; border-radius: 100px; font-size: 14px; z-index: 9999; transition: transform 0.4s var(–ease); pointer-events: none; white-space: nowrap; }
.nm2-toast.nm2-show { transform: translateX(-50%) translateY(0); }
Melbourne running fuel
Fuel made from things you recognise.
Naked Miles is a minimalist running gel built on ingredients you can actually pronounce. Honey, lemon, chia, sea salt. No mystery. Just honest fuel for the miles ahead.
🌿 Real ingredients
🍋 Lemon and honey
🛡️ No synthetics
📍 Made in Melbourne
60g Per sachet
5 Ingredients
0 Synthetics
naked miles
lemon · honey · chia
Drop 01 — Lemon, Honey, Chia
Add your product photo here
Drop 01
One product. Done right.
We started with one gel and one brief: make something runners actually want to take at kilometre 28. Clean taste. Simple ingredients. No compromise.
Lemon, Honey and Chia
Honest running fuel · 60g sachet
No synthetics
No maltodextrin
Real fruit
Gluten free
Bright lemon profile — refreshing, not cloying Chia adds gentle texture and sustained mouthfeel Sea salt for a natural electrolyte hint Raw honey as the primary fast carbohydrate Easy-tear sachet designed for sweaty hands
Why Naked Miles
🌿
Real ingredients only
Honey, citrus, chia, sea salt, water. The whole list — no hidden extras.
⚡
Fast, natural energy
Honey is a well-studied fast carb. No need to engineer something synthetic when nature’s already done the work.
💧
Sits better mid-run
Simpler formulas tend to be gentler on the gut. Less chemistry, fewer surprises at kilometre 30.
📖
Fully transparent label
You should be able to read every word on the back. If you can’t, that’s the problem we’re solving.
What’s inside
Ingredient-led by design
We started with the ingredients, then worked backwards to the formula. Not the other way around.
01 Raw Honey
Primary carbohydrate source — fast energy with a natural sweetness profile.
02 Lemon Juice
Flavour anchor — bright, fresh, and genuinely refreshing mid-run.
03 Chia Seeds
Texture and body — creates a gel-like mouthfeel and slower secondary energy release.
04 Sea Salt
Electrolyte support — replaces sodium lost through sweat without artificial blends.
05 Water
The base. Helps with consistency and keeps the gel easy to consume on the move.
Simple formula (Drop 01)
Final gram weights and nutritional panel confirmed once manufacturing and food safety testing are complete. Honest as always.
Early access
Be first on the trail.
We’re doing small, community-first drops — run clubs, local markets, and a limited online release. Join the list and you’ll hear first.
Count me in →
No spam. Just launch news, tasting invites, and early drops.
Questions
The things runners actually ask.
If you’ve got one we haven’t answered, drop us a message below.
Is Naked Miles preservative-free? + We’re designing for shelf stability through natural formulation — acidity from lemon juice, high solids from honey, and hot-fill processing. Final specs depend on manufacturing trials and food safety testing. We’ll be fully transparent about whatever we land on.
How many grams per sachet? + We’re targeting 60g — enough energy to count, small enough for a race vest pocket. Easy-tear opening designed for mid-run use, even with sweaty hands.
Is it vegan? + Drop 01 uses raw honey, so it’s not vegan. A vegan version using rice syrup is on the roadmap — we just want to get Drop 01 right first.
Where is it made? + Designed in Melbourne. We’re working through co-manufacturer selection now and will share that publicly once locked.
When can I buy it? + Drop 01 will be small and community-led — run clubs, Melbourne markets, and a limited online release. Join the waitlist to hear first.
Does it contain caffeine? + No. Drop 01 is caffeine-free — intentionally. Take it at any point in a run without worrying about timing or stacking with your pre-run coffee.
document.getElementById(‘nm2-yr’).textContent = new Date().getFullYear();
var els = document.querySelectorAll(‘.nm2-reveal’);
if (‘IntersectionObserver’ in window) {
var io = new IntersectionObserver(function(entries) {
entries.forEach(function(e) { if (e.isIntersecting) { e.target.classList.add(‘nm2-in’); io.unobserve(e.target); } });
}, { threshold: 0.08 });
els.forEach(function(el) { io.observe(el); });
} else { els.forEach(function(el) { el.classList.add(‘nm2-in’); }); }
function showToast(msg) {
var t = document.getElementById(‘nm2-toast’);
t.textContent = msg; t.classList.add(‘nm2-show’);
setTimeout(function() { t.classList.remove(‘nm2-show’); }, 3500);
}
document.getElementById(‘nm2-wbtn’).addEventListener(‘click’, function() {
var inp = document.querySelector(‘.nm2-winput’);
if (inp && inp.value) { showToast(‘🌿 You are on the list — we will be in touch!’); inp.value = ”; }
else { showToast(‘Please enter your email first.’); }
});
document.getElementById(‘nm2-csub’).addEventListener(‘click’, function() {
showToast(‘✉️ Message sent — thanks for reaching out!’);
});
Naked Miles 