/* ── SCOPE: all styles live inside #tm-yoli to avoid theme conflicts ── */
#tm-yoli {
–bg: #E8D499;
–bg-warm: #DFC98A;
–bg-card: #EDD9A3;
–bg-dark: #C4A84F;
–ink: #1a1a1a;
–ink-mid: #3a3530;
–ink-muted: #6b5f50;
–ink-light: #9a8e7e;
–gold: #8B6914;
–gold-mid: #A07820;
–gold-light: #C49A30;
–rule: rgba(139,105,20,0.2);
–serif: ‘Playfair Display’, Georgia, serif;
–sans: ‘Lato’, Arial, sans-serif;
background: var(–bg);
color: var(–ink);
font-family: var(–sans);
font-weight: 300;
font-size: 16px;
line-height: 1.75;
padding: 0;
margin: 0;
}
#tm-yoli *, #tm-yoli *::before, #tm-yoli *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#tm-yoli a { color: var(–gold); text-decoration: none; }
#tm-yoli a:hover { color: var(–gold-mid); text-decoration: underline; }
/* ── UTILITY ── */
.tm-container {
max-width: 860px;
margin: 0 auto;
padding: 0 24px;
}
.tm-container-wide {
max-width: 1000px;
margin: 0 auto;
padding: 0 24px;
}
.tm-rule {
border: none;
border-top: 1px solid var(–rule);
margin: 0;
}
.tm-eyebrow {
font-family: var(–sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(–gold);
display: block;
margin-bottom: 10px;
}
.tm-section-title {
font-family: var(–serif);
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 400;
line-height: 1.2;
color: var(–ink);
margin-bottom: 16px;
}
.tm-section-title em {
font-style: italic;
color: var(–gold);
}
.tm-body-text {
font-size: 15px;
color: var(–ink-muted);
line-height: 1.85;
}
/* ── BUTTONS ── */
.tm-btn-primary {
display: inline-block;
font-family: var(–sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(–bg);
background: var(–ink);
padding: 13px 28px;
border: 1px solid var(–ink);
text-decoration: none;
transition: background 0.25s, color 0.25s;
}
.tm-btn-primary:hover {
background: var(–gold);
border-color: var(–gold);
color: #fff;
text-decoration: none;
}
.tm-btn-ghost {
display: inline-block;
font-family: var(–sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(–ink);
border: 1px solid var(–ink-muted);
padding: 13px 28px;
text-decoration: none;
transition: border-color 0.25s, color 0.25s;
}
.tm-btn-ghost:hover {
border-color: var(–gold);
color: var(–gold);
text-decoration: none;
}
/* ══════════════════════════════════════
HERO
══════════════════════════════════════ */
.tm-hero {
padding: 72px 24px 60px;
border-bottom: 1px solid var(–rule);
}
.tm-hero-layout {
max-width: 860px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.tm-hero h1 {
font-family: var(–serif);
font-size: clamp(2.2rem, 5vw, 3.6rem);
font-weight: 400;
line-height: 1.1;
color: var(–ink);
margin-bottom: 16px;
}
.tm-hero h1 em {
font-style: italic;
color: var(–gold);
}
.tm-hero-sub {
font-family: var(–serif);
font-size: 1.05rem;
font-style: italic;
color: var(–ink-muted);
margin-bottom: 16px;
line-height: 1.6;
}
.tm-hero-desc {
font-size: 14px;
color: var(–ink-muted);
line-height: 1.9;
margin-bottom: 28px;
}
.tm-hero-btns {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.tm-hero-credential {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(–rule);
}
.tm-credential-label {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(–ink-light);
font-family: var(–sans);
margin-bottom: 12px;
}
.tm-credential-items {
display: flex;
flex-direction: column;
gap: 6px;
}
.tm-credential-item {
font-size: 13px;
color: var(–ink-mid);
font-family: var(–sans);
font-weight: 400;
}
.tm-credential-item::before {
content: ‘—’;
color: var(–gold);
margin-right: 8px;
}
/* Hero right: stats panel */
.tm-hero-panel {
background: var(–bg-card);
border: 1px solid var(–rule);
padding: 36px 32px;
}
.tm-hero-panel-title {
font-family: var(–serif);
font-size: 1.05rem;
font-style: italic;
color: var(–ink-muted);
margin-bottom: 28px;
line-height: 1.5;
padding-bottom: 20px;
border-bottom: 1px solid var(–rule);
}
.tm-stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.tm-stat {}
.tm-stat-num {
font-family: var(–serif);
font-size: 2rem;
font-weight: 600;
color: var(–ink);
line-height: 1;
margin-bottom: 4px;
}
.tm-stat-label {
font-size: 11px;
letter-spacing: 0.06em;
color: var(–ink-light);
font-family: var(–sans);
text-transform: uppercase;
}
/* ══════════════════════════════════════
INTRO SECTION
══════════════════════════════════════ */
.tm-intro {
padding: 60px 24px;
border-bottom: 1px solid var(–rule);
}
.tm-intro-layout {
max-width: 860px;
margin: 0 auto;
display: grid;
grid-template-columns: 200px 1fr;
gap: 60px;
align-items: start;
}
.tm-intro-label {
font-family: var(–serif);
font-size: 1.5rem;
font-weight: 400;
font-style: italic;
color: var(–ink-muted);
line-height: 1.3;
}
.tm-intro-text {
font-size: 15px;
color: var(–ink-muted);
line-height: 1.9;
}
.tm-intro-text p + p { margin-top: 14px; }
/* ══════════════════════════════════════
WHY YOLI
══════════════════════════════════════ */
.tm-why {
padding: 60px 24px;
border-bottom: 1px solid var(–rule);
background: var(–bg-card);
}
.tm-why-header {
max-width: 860px;
margin: 0 auto 40px;
}
.tm-pillars {
max-width: 860px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
border: 1px solid var(–rule);
background: var(–rule);
}
.tm-pillar {
background: var(–bg-card);
padding: 28px 24px;
transition: background 0.2s;
}
.tm-pillar:hover { background: var(–bg); }
.tm-pillar-num {
font-family: var(–serif);
font-size: 1.6rem;
font-weight: 400;
color: var(–gold-light);
line-height: 1;
margin-bottom: 12px;
opacity: 0.6;
}
.tm-pillar-title {
font-family: var(–serif);
font-size: 1rem;
font-weight: 600;
color: var(–ink);
margin-bottom: 8px;
}
.tm-pillar-text {
font-size: 13px;
color: var(–ink-muted);
line-height: 1.8;
}
/* ══════════════════════════════════════
PRODUCTS
══════════════════════════════════════ */
.tm-products {
padding: 60px 24px;
border-bottom: 1px solid var(–rule);
}
.tm-products-header {
max-width: 860px;
margin: 0 auto 36px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: end;
padding-bottom: 28px;
border-bottom: 1px solid var(–rule);
}
.tm-products-grid {
max-width: 860px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(–rule);
border: 1px solid var(–rule);
}
.tm-product-card {
background: var(–bg);
padding: 28px 22px;
transition: background 0.2s;
}
.tm-product-card:hover { background: var(–bg-card); }
.tm-product-cat {
font-family: var(–sans);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(–gold);
display: block;
margin-bottom: 10px;
}
.tm-product-name {
font-family: var(–serif);
font-size: 1.1rem;
font-weight: 600;
color: var(–ink);
margin-bottom: 4px;
}
.tm-product-tagline {
font-family: var(–serif);
font-size: 13px;
font-style: italic;
color: var(–ink-muted);
margin-bottom: 12px;
}
.tm-product-rule {
width: 28px;
height: 1px;
background: var(–gold-light);
margin-bottom: 12px;
opacity: 0.6;
}
.tm-product-desc {
font-size: 13px;
color: var(–ink-muted);
line-height: 1.8;
}
.tm-top-pick {
border-top: 2px solid var(–gold);
}
.tm-products-cta {
max-width: 860px;
margin: 28px auto 0;
text-align: right;
}
/* ══════════════════════════════════════
OPPORTUNITY
══════════════════════════════════════ */
.tm-opp {
padding: 60px 24px;
border-bottom: 1px solid var(–rule);
background: var(–bg-card);
}
.tm-opp-layout {
max-width: 860px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
}
.tm-steps {
margin-top: 28px;
display: flex;
flex-direction: column;
gap: 0;
}
.tm-step {
display: grid;
grid-template-columns: 32px 1fr;
gap: 16px;
padding: 20px 0;
border-bottom: 1px solid var(–rule);
align-items: start;
}
.tm-step:first-child { padding-top: 0; }
.tm-step-num {
font-family: var(–serif);
font-size: 0.85rem;
font-style: italic;
color: var(–gold-light);
padding-top: 2px;
}
.tm-step-title {
font-family: var(–sans);
font-size: 13px;
font-weight: 700;
color: var(–ink);
letter-spacing: 0.03em;
margin-bottom: 5px;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.1em;
}
.tm-step-text {
font-size: 13px;
color: var(–ink-muted);
line-height: 1.8;
}
/* ══════════════════════════════════════
CONTACT FORM
══════════════════════════════════════ */
.tm-form-panel {
background: var(–bg);
border: 1px solid var(–rule);
padding: 36px 32px;
}
.tm-form-title {
font-family: var(–serif);
font-size: 1.5rem;
font-weight: 400;
color: var(–ink);
margin-bottom: 6px;
}
.tm-form-sub {
font-size: 13px;
color: var(–ink-muted);
margin-bottom: 24px;
line-height: 1.75;
padding-bottom: 20px;
border-bottom: 1px solid var(–rule);
}
.tm-field { margin-bottom: 16px; }
.tm-field label {
display: block;
font-family: var(–sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(–ink-muted);
margin-bottom: 6px;
}
.tm-field input,
.tm-field select {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid var(–bg-dark);
padding: 9px 0;
font-family: var(–sans);
font-size: 14px;
font-weight: 300;
color: var(–ink);
outline: none;
transition: border-color 0.25s;
-webkit-appearance: none;
appearance: none;
border-radius: 0;
}
.tm-field input::placeholder { color: var(–ink-light); }
.tm-field input:focus,
.tm-field select:focus { border-bottom-color: var(–gold); }
.tm-field select { cursor: pointer; background: transparent; }
.tm-field select option { background: #f5ead8; color: var(–ink); }
.tm-submit-btn {
width: 100%;
margin-top: 20px;
padding: 14px;
background: var(–ink);
color: var(–bg);
border: none;
font-family: var(–sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.25s;
}
.tm-submit-btn:hover { background: var(–gold); }
.tm-form-note {
font-size: 11px;
color: var(–ink-light);
margin-top: 14px;
line-height: 1.6;
text-align: center;
}
#tm-msg {
display: none;
font-size: 12px;
margin-top: 12px;
padding: 10px 12px;
text-align: center;
font-family: var(–sans);
}
/* ══════════════════════════════════════
TESTIMONIALS
══════════════════════════════════════ */
.tm-testimonials {
padding: 60px 24px;
border-bottom: 1px solid var(–rule);
}
.tm-testimonials-header {
max-width: 860px;
margin: 0 auto 36px;
}
.tm-testimonials-grid {
max-width: 860px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.tm-testimonial {
padding-top: 20px;
border-top: 1px solid var(–rule);
}
.tm-t-mark {
font-family: var(–serif);
font-size: 2.5rem;
color: var(–gold-light);
opacity: 0.4;
line-height: 0.8;
display: block;
margin-bottom: 10px;
}
.tm-t-text {
font-family: var(–serif);
font-size: 14px;
font-style: italic;
color: var(–ink-mid);
line-height: 1.75;
margin-bottom: 16px;
}
.tm-t-name {
font-family: var(–sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(–gold);
}
.tm-t-role {
font-size: 12px;
color: var(–ink-light);
margin-top: 2px;
}
/* ══════════════════════════════════════
FINAL CTA
══════════════════════════════════════ */
.tm-final-cta {
padding: 72px 24px;
text-align: center;
border-bottom: 1px solid var(–rule);
}
.tm-final-cta .tm-section-title {
font-size: clamp(2rem, 5vw, 3rem);
max-width: 560px;
margin: 12px auto 16px;
}
.tm-final-cta .tm-body-text {
max-width: 420px;
margin: 0 auto 32px;
font-size: 14px;
}
.tm-final-cta-btns {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* ══════════════════════════════════════
TAGLINE + FOOTER
══════════════════════════════════════ */
.tm-tagline-bar {
padding: 28px 24px;
text-align: center;
border-bottom: 1px solid var(–rule);
}
.tm-tagline {
font-family: var(–serif);
font-size: 0.95rem;
font-weight: 400;
letter-spacing: 0.3em;
color: var(–ink-muted);
text-transform: uppercase;
}
.tm-tagline strong { color: var(–gold); font-weight: 600; }
.tm-tagline span { margin: 0 14px; color: var(–bg-dark); opacity: 0.5; }
.tm-footer-note {
padding: 28px 24px;
text-align: center;
}
.tm-footer-note p {
font-size: 11px;
color: var(–ink-light);
line-height: 1.7;
max-width: 600px;
margin: 0 auto;
}
/* ══════════════════════════════════════
RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 820px) {
.tm-hero-layout,
.tm-intro-layout,
.tm-products-header,
.tm-opp-layout { grid-template-columns: 1fr; gap: 32px; }
.tm-pillars,
.tm-products-grid,
.tm-testimonials-grid { grid-template-columns: 1fr; }
.tm-stats-grid { grid-template-columns: 1fr 1fr; }
.tm-hero { padding: 48px 20px 40px; }
.tm-products-cta { text-align: left; }
}
@media (max-width: 480px) {
.tm-stats-grid { grid-template-columns: 1fr 1fr; }
.tm-form-panel { padding: 24px 18px; }
.tm-hero-btns { flex-direction: column; }
}
Live Better.
Move Further.
A filmmaker, ultra-distance runner, and Yoli Certified Wellness Coach — living proof that better health changes everything.
I’ve tested my body across 100-mile mountain races, tracked my Omega-3 Index from deficient to optimal, and built daily habits that actually hold. Yoli is the system I trust to fuel all of it.
Credentials
UTMB Finisher
H1 Hardcore 100 Miles Hall of Fame
Antique Trail Marathon Race Director
“I didn’t find wellness. I earned it — one kilometer, one film, one conversation at a time.”
My Story
I’m Toto Manie — filmmaker, race director, and ultra-distance runner from Antique, Philippines. I co-founded Filipino Pictures with the late Francis Magalona, directed award-winning films, and finished races most people wouldn’t dare start.
None of that matters if your body can’t keep up. Years of late shoots and production schedules took a toll, and I had to rebuild from the inside out. That journey led me to ultra-running — and eventually to Yoli. I stopped guessing and started testing. The results changed everything.
I became an independent Yoli distributor because I believe in the products enough to stake my name on them. Science-backed, personally verified, and built for people who take the long game seriously.
Not just a supplement. A system.
Science-Backed
Every product is formulated on real nutritional science. I track bloodwork. I test personally. I recommend only what I’ve validated on my own body.
Athlete-Tested
These products have been with me through mountain finishes, early morning runs, and 24-hour race pushes. If it survives my training life, it works for yours.
Clean Ingredients
No fillers. No shortcuts. Real nutrition designed to work the way your body needs — for the long haul, not a 30-day reset.
Test, Don’t Guess
I went from deficient to optimal by tracking my Omega-3 Index. Wellness decisions should come from data, not assumptions. I’ll help you find yours.
Community
From Antique to the rest of the Philippines, I’m building a team of people who take their health seriously and hold each other accountable.
Long-Game Thinking
Ultra-running taught me there are no shortcuts to the finish line. The same is true for your health. We build habits that outlast any challenge.
What I actually take.
These are the Yoli products I personally use and recommend. No fluff — just what makes a real, measurable difference for active, performance-driven people.
Better Body System
The complete transformation kit
Yoli’s flagship program — a full package of nutritional products, meal planning, and coaching support designed to help you reset and perform at your best.
Vital Omegas+
Brain, heart & inflammation support
This took my Omega-3 Index to 9.66% — optimal range. Essential fatty acids for cardiovascular health, brain function, joint mobility, and reduced inflammation.
Passion
Natural energy without the crash
Clean, sustained energy for training days, long shoots, or any day that demands you show up fully — without the jitters or the post-noon crash.
Truth Pomegranate
Antioxidant & immune defense
Rich in antioxidants that support immune function and combat the oxidative stress that builds in high-output, high-performance lifestyles.
Lean Greens Plus
Daily greens, simplified
Alkalizing greens, digestive enzymes, and probiotics in one daily dose — filling the nutrition gap on event days and long location shoots.
Collagen+
Joints, skin & repair
Recovery matters as much as training. Collagen supports connective tissue health, joint flexibility, and post-run repair so your body keeps showing up.
Build health.
Build income.
Yoli isn’t just a wellness company — it’s a vehicle for financial transformation. I joined because I believe in the products, and because the model aligns with how I think about impact: serve people genuinely, and build something sustainable.
Start with your own transformation
Use the products. Track your results. Let your own story become your most powerful testimonial. No pressure to sell — just share authentically.
Share with people you trust
Your network already trusts you. When you recommend something that genuinely changed your health, people listen. That’s not sales — that’s service.
Build a team that builds itself
Yoli’s compensation model rewards duplication. Help your team grow — they help others — and everyone earns from the collective effort. I guide every step.
Scale toward financial freedom
This is a serious business for people who take it seriously. I’m building toward a life where my wellness income funds my films, races, and purpose. You can too.
Let’s Talk
Whether you want to try the products or explore the business opportunity — it starts with a conversation. Fill this out and I’ll reach out personally.
Select oneTrying the products for myselfLearning about the business opportunityBoth — products and businessJust exploring for now
Select oneLose weight and feel lighterIncrease energy and focusSupport athletic performanceImprove gut and immune healthManage stress and recoveryGeneral long-term wellness
I personally respond to every message. No spam, no pressure. Just a real conversation about your health and goals.
Real people. Real results.
I started with the Better Body System not expecting much. Six weeks in, I was down 8 kilos, sleeping better, and people at work kept asking what I was doing differently.
Anna R.
Teacher · Iloilo City
Toto told me to test first, not guess. When I saw how low my Omega-3 was, I finally understood why my joints ached. Vital Omegas made a real, measurable difference.
Jeric T.
Trail Runner · Antique
What I appreciated most was that Toto was honest — he didn’t oversell. He just shared his own journey. That authenticity made me trust both him and the products completely.
Cecile M.
Entrepreneur · Manila
Your wellness story starts
with a decision.
You don’t need to be an athlete. You just need to take one honest step toward feeling better. I’ll be right here to guide the rest.
function tmYoliSubmit() {
var name = document.getElementById(‘tm-name’).value.trim();
var contact = document.getElementById(‘tm-contact’).value.trim();
var interest = document.getElementById(‘tm-interest’).value;
var msg = document.getElementById(‘tm-msg’);
if (!name || !contact || !interest) {
msg.style.display = ‘block’;
msg.style.color = ‘#8B2020’;
msg.style.background = ‘rgba(139,32,32,0.07)’;
msg.style.border = ‘1px solid rgba(139,32,32,0.15)’;
msg.textContent = ‘Please fill in your name, contact info, and area of interest.’;
return;
}
msg.style.display = ‘block’;
msg.style.color = ‘#5a3d00’;
msg.style.background = ‘rgba(139,105,20,0.08)’;
msg.style.border = ‘1px solid rgba(139,105,20,0.2)’;
msg.textContent = ‘Thank you, ‘ + name + ‘! I\u2019ll reach out personally. Talk soon. \u2014 Toto’;
document.getElementById(‘tm-name’).value = ”;
document.getElementById(‘tm-contact’).value = ”;
document.getElementById(‘tm-interest’).value = ”;
document.getElementById(‘tm-goal’).value = ”;
}
TOTO MANIE 