@font-face {
font-family: 'Lora';
src: url('/assets/fonts/lora-regular.woff2') format('woff2');
font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
font-family: 'Lora';
src: url('/assets/fonts/lora-medium.woff2') format('woff2');
font-style: normal; font-weight: 500; font-display: swap;
}
@font-face {
font-family: 'Lora';
src: url('/assets/fonts/lora-semibold.woff2') format('woff2');
font-style: normal; font-weight: 600; font-display: swap;
}
@font-face {
font-family: 'Lora';
src: url('/assets/fonts/lora-bold.woff2') format('woff2');
font-style: normal; font-weight: 700; font-display: swap;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--primary: #1D2939;
--primary-muted: #475467;
--secondary: #0E7A6B;
--secondary-light: rgba(14, 122, 107, 0.08);
--bg: #FCFBFA;
--surface: #FFFFFF;
--border: #E5E2DE;
}
body {
font-family: 'Lora', Georgia, serif;
background: var(--bg);
color: var(--primary);
-webkit-font-smoothing: antialiased;
}
.skip-link {
position: fixed; top: 8px; left: 8px; z-index: 1000;
background: var(--primary); color: white; padding: 10px 14px;
border-radius: 8px; transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
/* ── Nav ─────────────────────────── */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: rgba(252, 251, 250, 0.85);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.nav-inner {
max-width: 1100px; margin: 0 auto; padding: 14px 24px;
display: flex; align-items: center; gap: 12px;
}
.nav-logo {
font-size: 20px; font-weight: 600; color: var(--primary);
text-decoration: none; display: flex; align-items: center; gap: 8px;
}
.nav-logo svg { opacity: 0.75; }
.nav-spacer { flex: 1; }
.nav-link {
font-size: 14px; color: var(--primary-muted); text-decoration: none;
padding: 8px 14px; border-radius: 8px; transition: color 0.2s;
}
.nav-link:hover { color: var(--primary); }
.nav-cta {
background: var(--primary); color: white; text-decoration: none;
padding: 10px 22px; border-radius: 10px; font-size: 14px;
font-weight: 600; transition: opacity 0.2s;
}
.nav-cta:hover { opacity: 0.85; }
/* ── Hero ────────────────────────── */
.hero {
max-width: 1100px; margin: 0 auto; padding: 120px 24px 60px;
display: flex; align-items: center; gap: 60px;
}
.hero-text { flex: 1; min-width: 0; }
.hero-text h1 {
font-size: clamp(32px, 5vw, 52px); font-weight: 700;
line-height: 1.15; letter-spacing: -0.5px; margin-bottom: 20px;
}
.hero-text h1 span { color: var(--secondary); }
.hero-text p {
font-size: 17px; color: var(--primary-muted); line-height: 1.65;
margin-bottom: 28px; max-width: 500px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn-primary {
background: var(--primary); color: white; text-decoration: none;
padding: 14px 32px; border-radius: 12px; font-size: 15px;
font-weight: 600; font-family: 'Lora', Georgia, serif; transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.85; }
.btn-secondary {
background: transparent; color: var(--primary); text-decoration: none;
padding: 14px 32px; border-radius: 12px; font-size: 15px; font-weight: 500;
font-family: 'Lora', Georgia, serif; border: 1.5px solid var(--border);
transition: border-color 0.2s;
}
.btn-secondary:hover { border-color: var(--primary-muted); }
.hero-sub {
margin-top: 16px; font-size: 13px; color: var(--primary-muted);
}
.hero-sub a { color: var(--secondary); text-decoration: none; font-weight: 600; }
.hero-search {
display: flex; gap: 8px; max-width: 500px; margin-top: 4px;
}
.hero-search input {
flex: 1; min-width: 0; font-family: 'Lora', Georgia, serif;
font-size: 14px; padding: 12px 14px; border: 1px solid var(--border);
border-radius: 10px; background: var(--surface); color: var(--primary);
}
.hero-search input:focus {
outline: none; border-color: var(--secondary);
}
.hero-search button {
font-family: 'Lora', Georgia, serif; font-size: 14px; font-weight: 600;
background: var(--primary); color: white; border: none;
border-radius: 10px; padding: 12px 20px; cursor: pointer;
}
.hero-search button:hover { opacity: 0.85; }
.hero-phone { flex-shrink: 0; width: 320px; }
.hero-phone picture { display: block; }
.hero-phone img {
width: 100%; height: auto;
filter: drop-shadow(0 24px 48px rgba(29, 41, 57, 0.15));
}
/* ── Value Props (quick hits) ────── */
.value-props {
max-width: 1100px; margin: 0 auto; padding: 0 24px 60px;
}
.value-props > h2 {
font-size: 28px; font-weight: 600; text-align: center;
margin-bottom: 28px;
}
.value-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}
.value-card {
display: flex; align-items: flex-start; gap: 12px;
padding: 16px 18px; border-radius: 12px;
background: var(--surface); border: 1px solid var(--border);
}
.value-card .vi { flex-shrink: 0; margin-top: 2px; width: 22px; height: 22px; color: var(--secondary); }
.value-card .vi svg { width: 22px; height: 22px; }
.value-card h3 { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
.value-card p { font-size: 13px; color: var(--primary-muted); line-height: 1.45; }
/* ── How It Works ─────────────────── */
.how {
background: var(--surface);
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.how-inner { max-width: 1100px; margin: 0 auto; padding: 80px 24px; }
.how-inner h2 { font-size: 28px; font-weight: 600; text-align: center; margin-bottom: 48px; }
.how-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 36px; text-align: center;
}
.how-step { display: flex; flex-direction: column; align-items: center; }
.how-num {
width: 40px; height: 40px; background: var(--secondary-light);
color: var(--secondary); border-radius: 50%; display: flex;
align-items: center; justify-content: center; font-size: 16px;
font-weight: 700; margin-bottom: 14px;
}
.how-step h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.how-step p { font-size: 14px; color: var(--primary-muted); line-height: 1.55; }
/* ── Deep Dive (technical features) ─ */
.deep {
max-width: 1100px; margin: 0 auto; padding: 80px 24px;
}
.deep h2 { font-size: 28px; font-weight: 600; text-align: center; margin-bottom: 12px; }
.deep .subtitle {
text-align: center; color: var(--primary-muted); font-size: 15px;
margin-bottom: 48px; max-width: 520px; margin-left: auto; margin-right: auto;
line-height: 1.55;
}
.deep-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;
}
.deep-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: 14px; padding: 24px;
}
.deep-icon {
width: 36px; height: 36px; background: var(--secondary-light); border-radius: 9px;
display: flex; align-items: center; justify-content: center; margin-bottom: 12px;
color: var(--secondary);
}
.deep-icon svg { width: 20px; height: 20px; }
.deep-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.deep-card p { font-size: 13px; color: var(--primary-muted); line-height: 1.55; }
/* ── Stats ────────────────────────── */
.stats {
background: var(--surface);
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.stats-inner { max-width: 1100px; margin: 0 auto; padding: 60px 24px; }
.stats-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 20px; text-align: center;
}
.stat-num { font-size: 36px; font-weight: 700; color: var(--secondary); }
.stat-label { font-size: 13px; color: var(--primary-muted); margin-top: 4px; }
/* ── Screenshots gallery ─────────── */
.gallery { padding: 60px 0; }
.gallery-header {
max-width: 1100px; margin: 0 auto 28px; padding: 0 24px;
text-align: center;
}
.gallery-header h2 { font-size: 28px; font-weight: 600; margin-bottom: 12px; }
.gallery-header .subtitle {
color: var(--primary-muted); font-size: 15px; line-height: 1.55;
max-width: 560px; margin: 0 auto;
}
/* Horizontal scroll row. Padding uses max(24px, ...) so on wide
viewports the first shot lines up with the centered content
column but the row itself bleeds to the viewport edge — gives
the "swipe through these" feel without a hard right border. */
.gallery-scroll {
display: flex; gap: 20px;
overflow-x: auto; overflow-y: visible;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-left: max(24px, calc((100vw - 1100px) / 2));
padding: 16px max(24px, calc((100vw - 1100px) / 2)) 28px;
scrollbar-width: none; -ms-overflow-style: none;
}
.gallery-scroll::-webkit-scrollbar { display: none; }
.gallery-shot {
flex: 0 0 auto; width: 300px; scroll-snap-align: start;
}
.gallery-shot picture { display: block; }
.gallery-shot img {
width: 100%; height: auto; display: block;
border-radius: 22px;
box-shadow: 0 16px 36px rgba(29, 41, 57, 0.18);
}
@media (max-width: 600px) {
.gallery-shot { width: 78vw; }
}
/* ── Privacy ──────────────────────── */
.privacy { max-width: 700px; margin: 0 auto; padding: 80px 24px; text-align: center; }
.privacy h2 { font-size: 22px; font-weight: 600; margin-bottom: 12px; }
.privacy p { font-size: 15px; color: var(--primary-muted); line-height: 1.6; margin-bottom: 16px; }
.privacy-badges {
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px;
}
.privacy-badge {
font-size: 12px; font-weight: 600; color: var(--secondary);
background: var(--secondary-light); padding: 6px 14px; border-radius: 20px;
}
.privacy-more { margin-top: 20px; font-size: 14px; }
.privacy-more a {
color: var(--secondary); text-decoration: none; font-weight: 600;
}
.privacy-more a:hover { text-decoration: underline; }
/* ── FAQ ──────────────────────────── */
.faq { max-width: 760px; margin: 0 auto; padding: 80px 24px 20px; }
.faq h2 { font-size: 28px; font-weight: 600; text-align: center; margin-bottom: 36px; }
.faq-item {
background: var(--surface); border: 1px solid var(--border);
border-radius: 12px; padding: 18px 22px; margin-bottom: 12px;
text-align: left;
}
.faq-item h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.faq-item p { font-size: 14px; color: var(--primary-muted); line-height: 1.6; }
/* ── CTA ──────────────────────────── */
.cta { max-width: 700px; margin: 0 auto; padding: 0 24px 80px; text-align: center; }
.cta h2 { font-size: 28px; font-weight: 600; margin-bottom: 12px; }
.cta p { font-size: 15px; color: var(--primary-muted); line-height: 1.6; margin-bottom: 28px; }
.cta p a { color: var(--secondary); text-decoration: none; font-weight: 600; }
.cta p a:hover { text-decoration: underline; }
.cta-actions {
display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
}
/* ── Footer ───────────────────────── */
footer {
border-top: 1px solid var(--border); padding: 24px;
text-align: center; font-size: 13px; color: var(--primary-muted);
}
footer a { color: var(--primary-muted); text-decoration: none; }
footer a:hover { color: var(--primary); }
/* ── Responsive ───────────────────── */
@media (max-width: 768px) {
.hero { flex-direction: column-reverse; padding-top: 100px; gap: 40px; text-align: center; }
.hero-text p { margin-left: auto; margin-right: auto; }
.hero-actions { justify-content: center; }
.hero-phone { width: 240px; }
.nav-link { display: none; }
}
Private supplement & medication tracking for your whole stack.
One private tracker for your entire protocol: prescriptions,
supplements, hormones, peptides, nootropics. Log a dose and see its
half-life curve, what's still active, and how compounds interact.
No account. No Serum cloud. Your tracker data is not sent to us.
Also available as a native app. Free, no account needed.
Browse the compound library.
Why Serum is different from other supplement trackers
One broad compound catalog
Serum covers prescriptions, peptides, AAS, psychedelics, and supplements, with model confidence shown per route.
Catch stack conflicts
13,000+ modeled interaction checks auto-flagged: absorption blockers, dangerous combos, and nutrient depletions you'd never spot manually.
Zero-trust by design
No account. No analytics. No Serum data server. We do not receive what you take; platform health sync and exports happen only when you enable them.
Grounded in the research
Published studies and labels support the catalog. Each route is labeled as validated, predicted, calibrated, inferred, or unverified.
How it works
1
Build your stack
Pick from 500+ supplements, medications, and peptides, or add your own compound with custom half-life data.
2
Log your doses
One tap records a dose. Bundle a whole morning stack together and track every ingredient at once.
3
See what's active
Population-based curves estimate absorption, metabolism, and elimination from your logged doses.
4
Dial it in
Compare how timing, dose, and frequency change the projected curve. Reminders help you follow the regimen you entered.
Built for optimizers
Most trackers count pills. Serum adds population-based estimates of
release, absorption, metabolism, and elimination after a logged dose.
Absorption & elimination modeling
First-order absorption via the Bateman equation with calibrated absorption rates, elimination rates, and oral bioavailability for each drug. Buspirone at 4%, curcumin at 5%, propranolol at 25%.
Active metabolite cascades
Drugs like fluoxetine, codeine, and amitriptyline produce active metabolites. Serum models the full parent-to-metabolite conversion cascade with independent half-lives.
Prodrug conversion kinetics
Testosterone esters, lisdexamfetamine, simvastatin. Prodrugs are modeled with their conversion mechanics, not just the active form.
Steady-state projections
See where your levels are heading with regular dosing. Tracks time to steady state, peak, and trough. Multiple sources (standalone + bundles) are combined.
Loading suggestions & cycling
Review a model-derived loading suggestion, then configure loading phases, custom frequencies, on/off cycling, and as-needed PRN dosing. Projections adjust accordingly.
Bundles & overlap detection
Track a multivitamin as one dose, and each ingredient gets its own curve. Overlap detection flags when the same compound comes from multiple sources.
635
Enzyme / Transporter Tags
Your data stays yours
Core tracking works offline. No accounts, Serum cloud sync, analytics, or telemetry.
Your regimen, dose history, and settings stay in app or browser storage. The native
app excludes them from Android cloud backup; on iOS, it asks the system to exclude them from iCloud Backup.
Android device-to-device setup can transfer local app data. Optional Health Connect
and Apple Health integration can sync under your platform settings when you enable it.
No account required
No analytics
No Serum cloud
Export to JSON
Read the full privacy policy →
Frequently asked questions
What is Serum?
Serum is a free supplement and medication tracker that adds pharmacokinetic modeling: log a dose and see its estimated half-life curve, what's still active in your system, and where your levels are heading at steady state — for every compound in your stack.
What does a half-life curve show?
A half-life curve estimates how much of a compound is in your system over time: how fast it absorbs, when it peaks, and how long it takes to clear. Serum combines every logged dose into one curve per compound, so you can see modeled peaks, troughs, and time to steady state for your schedule.
Does Serum check supplement and medication interactions?
Yes. Serum runs 13,000+ modeled interaction checks across its catalog — absorption conflicts, contraindications, nutrient depletions, and timing requirements — and automatically flags conflicts within your current stack.
Can I track peptides, hormones, and nootropics, not just vitamins?
Yes. The catalog covers 500+ compounds: vitamins, minerals, prescriptions, hormones, peptides, and nootropics. Each gets route-specific models — oral, injection, and topical — instead of a single generic half-life.
Is my health data private?
Serum works offline with no account, no analytics, and no Serum-operated cloud. Your regimen and dose history stay in local app or browser storage, excluded from cloud backups, and you can export or delete them at any time.
Is Serum free?
Yes. The web app and native apps are free with no account required. Serum is not a medical device; its curves are population-level estimates, not medical advice.
Track your stack. See what's active.
Free and works right in your browser. For notifications and health
platform sync, install the native app.
Serum is not a medical device and does not diagnose, treat, cure, or
prevent any medical condition. Consult a healthcare professional for
medical advice, diagnosis, or treatment.