<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Brandon Bikeworks — Membership Plans</title>
<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=Barlow:ital,wght@0,400;0,600;0,700;1,400&family=Barlow+Condensed:wght@500;700&display=swap" rel="stylesheet">
<style>
/* ─────────────────────────────────────────────
TOKENS
───────────────────────────────────────────── */
:root {
--black: #0a0a0a;
--red: #c8001e;
--red-hot: #ff1f3d;
--white: #f5f5f0;
--offwhite: #e8e4dc;
--steel: #1c1c1c;
--muted: #888880;
--tier1: #3a7bd5;
--tier2: #27ae60;
--tier3: #e67e22;
--tier4: #8e44ad;
--radius: 6px;
}
/* ─────────────────────────────────────────────
RESET
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--black);
color: var(--white);
font-family: 'Barlow', sans-serif;
font-size: 16px;
line-height: 1.55;
overflow-x: hidden;
}
/* noise grain overlay */
body::before {
content: '';
position: fixed; inset: 0; z-index: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
opacity: .35;
}
/* ─────────────────────────────────────────────
NAV
───────────────────────────────────────────── */
nav {
position: sticky; top: 0; z-index: 100;
background: rgba(10,10,10,.93);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 2px solid var(--red);
display: flex; align-items: center; justify-content: space-between;
padding: 0 2.5rem; height: 68px;
}
.nav-logo {
display: flex; align-items: center; gap: .75rem;
text-decoration: none;
}
.nav-logo img {
height: 44px; display: block;
filter: drop-shadow(0 0 8px rgba(200,0,30,.3));
}
.nav-logo-fallback {
display: none;
font-family: 'Bebas Neue', sans-serif;
font-size: 1.45rem; letter-spacing: .04em;
color: var(--white); line-height: 1;
}
.nav-logo-fallback span { color: var(--red-hot); }
.nav-links {
display: flex; gap: 2rem; list-style: none;
}
.nav-links a {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700; font-size: .88rem;
letter-spacing: .08em; text-transform: uppercase;
color: var(--offwhite); text-decoration: none;
transition: color .2s;
}
.nav-links a:hover { color: var(--red-hot); }
.nav-cta {
background: var(--red); color: #fff;
padding: .5rem 1.2rem; border-radius: var(--radius);
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700; font-size: .85rem;
letter-spacing: .06em; text-transform: uppercase;
text-decoration: none;
transition: background .2s, transform .15s;
white-space: nowrap;
}
.nav-cta:hover { background: var(--red-hot); transform: translateY(-1px); }
/* ─────────────────────────────────────────────
HERO
───────────────────────────────────────────── */
.hero {
position: relative; overflow: hidden;
min-height: 440px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center; padding: 5.5rem 2rem 4.5rem;
}
.hero-bg {
position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(ellipse 80% 55% at 50% 120%, rgba(200,0,30,.3) 0%, transparent 68%),
repeating-linear-gradient(
-55deg,
rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px,
transparent 1px, transparent 40px
),
var(--black);
}
.hero-eyebrow {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700; font-size: .78rem;
letter-spacing: .22em; text-transform: uppercase;
color: var(--red-hot); margin-bottom: .8rem;
}
.hero h1 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(3.2rem, 9vw, 7rem);
line-height: .93; letter-spacing: .02em;
color: var(--white);
text-shadow: 0 4px 48px rgba(200,0,30,.4);
margin-bottom: 1.3rem;
}
.hero h1 span { color: var(--red-hot); }
.hero-sub {
font-size: 1.1rem; color: var(--offwhite);
max-width: 580px; margin: 0 auto 2.2rem;
font-style: italic; line-height: 1.6;
}
.hero-badges {
display: flex; flex-wrap: wrap; gap: .55rem;
justify-content: center;
}
.badge {
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.14);
border-radius: 99px; padding: .3rem .9rem;
font-size: .76rem; font-weight: 600;
letter-spacing: .04em; color: var(--offwhite);
}
/* ─────────────────────────────────────────────
SHARED SECTION CHROME
───────────────────────────────────────────── */
section { position: relative; z-index: 1; }
.section-label {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700; font-size: .74rem;
letter-spacing: .22em; text-transform: uppercase;
color: var(--red-hot); margin-bottom: .5rem;
}
.section-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2rem, 5vw, 3.5rem);
letter-spacing: .03em; color: var(--white);
line-height: 1;
}
/* ─────────────────────────────────────────────
BILLING TOGGLE
───────────────────────────────────────────── */
.billing-toggle-wrap {
display: flex; justify-content: center;
padding: 3rem 2rem 0;
}
.billing-toggle {
display: inline-flex; align-items: center;
background: var(--steel);
border-radius: 99px;
border: 1px solid rgba(255,255,255,.1);
padding: 4px; gap: 0;
}
.billing-toggle button {
background: none; border: none; cursor: pointer;
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700; font-size: .85rem;
letter-spacing: .06em; text-transform: uppercase;
color: var(--muted); padding: .42rem 1.15rem;
border-radius: 99px; transition: background .2s, color .2s;
}
.billing-toggle button.active { background: var(--red); color: #fff; }
.billing-toggle button .save-tag {
font-size: .63rem; margin-left: .3rem;
background: rgba(255,255,255,.2);
border-radius: 4px; padding: 1px 5px;
vertical-align: middle;
}
/* ─────────────────────────────────────────────
TIERS SECTION
───────────────────────────────────────────── */
.tiers-section { padding: 3rem 1.5rem 5rem; }
.tiers-header { text-align: center; margin-bottom: 3rem; }
.tiers-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
gap: 1.3rem;
max-width: 1240px; margin: 0 auto;
}
/* CARD */
.tier-card {
background: var(--steel);
border: 1px solid rgba(255,255,255,.08);
border-radius: 14px; overflow: hidden;
display: flex; flex-direction: column;
position: relative;
transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.tier-card:hover {
transform: translateY(-7px);
box-shadow: 0 24px 56px rgba(0,0,0,.55);
}
.tier-card.featured {
border-color: var(--red);
box-shadow: 0 0 0 1px var(--red), 0 14px 44px rgba(200,0,30,.22);
}
.featured-ribbon {
position: absolute; top: 16px; right: -26px;
background: var(--red);
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700; font-size: .68rem;
letter-spacing: .1em; text-transform: uppercase;
color: #fff; padding: .22rem 2.6rem;
transform: rotate(35deg);
pointer-events: none;
}
/* card header */
.tier-top {
padding: 1.7rem 1.7rem 1.3rem;
border-bottom: 1px solid rgba(255,255,255,.07);
}
.tier-icon {
width: 42px; height: 42px; border-radius: 9px;
display: flex; align-items: center; justify-content: center;
font-size: 1.35rem; margin-bottom: 1.1rem;
}
.tier-name {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.65rem; letter-spacing: .04em;
color: var(--white); margin-bottom: .15rem;
line-height: 1;
}
.tier-focus {
font-size: .74rem; font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
opacity: .65;
}
/* price block */
.tier-price-wrap { padding: 1.4rem 1.7rem 1rem; }
.tier-price {
display: flex; align-items: flex-end; gap: .3rem;
margin-bottom: .3rem;
}
.tier-price .amount {
font-family: 'Bebas Neue', sans-serif;
font-size: 3.4rem; line-height: 1; color: var(--white);
}
.tier-price .cents {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.55rem; line-height: 1.4;
color: var(--white); opacity: .8;
}
.tier-price .per {
font-size: .74rem; color: var(--muted);
margin-bottom: .38rem; padding-left: .1rem;
}
.tier-savings {
font-size: .77rem; font-weight: 700;
color: #5de68a; min-height: 1.1rem;
}
.tier-savings.hidden { opacity: 0; pointer-events: none; }
/* card body */
.tier-body {
padding: 0 1.7rem 1.7rem;
flex: 1; display: flex; flex-direction: column;
}
.tier-value {
font-size: .82rem; color: var(--offwhite);
background: rgba(255,255,255,.04);
border-left: 3px solid;
border-radius: 0 5px 5px 0;
padding: .7rem .9rem; margin-bottom: 1.15rem;
font-style: italic; line-height: 1.5;
}
.tier-features {
list-style: none; flex: 1; margin-bottom: 1.5rem;
}
.tier-features li {
font-size: .87rem; padding: .44rem 0;
border-bottom: 1px solid rgba(255,255,255,.05);
display: flex; align-items: flex-start; gap: .55rem;
color: var(--offwhite);
}
.tier-features li:last-child { border-bottom: none; }
.tier-features li .chk {
flex-shrink: 0; width: 17px; height: 17px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: .55rem; margin-top: 2px;
}
.tier-btn {
display: block; width: 100%; text-align: center;
padding: .72rem 1rem; border-radius: var(--radius);
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700; font-size: .95rem;
letter-spacing: .06em; text-transform: uppercase;
text-decoration: none; cursor: pointer;
border: 2px solid;
transition: background .2s, color .2s, transform .15s;
}
.tier-btn:hover { transform: translateY(-1px); }
.tier-btn.filled { color: #fff !important; }
.tier-btn.filled:hover { filter: brightness(1.1); }
/* ─────────────────────────────────────────────
COMPARISON TABLE
───────────────────────────────────────────── */
.compare-section {
padding: 2rem 1.5rem 5.5rem;
max-width: 1020px; margin: 0 auto;
}
.compare-section .tiers-header { margin-bottom: 2.2rem; }
.compare-table {
width: 100%; border-collapse: collapse;
font-size: .84rem;
}
.compare-table th {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700; font-size: .8rem;
letter-spacing: .08em; text-transform: uppercase;
padding: .8rem 1rem; text-align: center;
border-bottom: 2px solid rgba(255,255,255,.1);
}
.compare-table th:first-child { text-align: left; }
.compare-table td {
padding: .68rem 1rem; text-align: center;
border-bottom: 1px solid rgba(255,255,255,.05);
color: var(--offwhite); vertical-align: middle;
}
.compare-table td:first-child {
text-align: left; font-weight: 600; color: var(--white);
}
.compare-table tr:hover td { background: rgba(255,255,255,.03); }
.compare-table .chk { color: #5de68a; font-size: 1.05rem; }
.compare-table .x { color: rgba(255,255,255,.18); font-size: .9rem; }
.compare-table .val { font-weight: 600; color: var(--offwhite); }
/* ─────────────────────────────────────────────
CASH FLOW SECTION
───────────────────────────────────────────── */
.cashflow-section {
padding: 0 1.5rem 5.5rem;
max-width: 960px; margin: 0 auto;
}
.cashflow-intro {
margin-top: .6rem; font-size: .9rem;
color: var(--muted); max-width: 560px;
}
.cashflow-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 1.1rem; margin-top: 2rem;
}
.cf-card {
background: var(--steel);
border: 1px solid rgba(255,255,255,.07);
border-radius: 11px; padding: 1.4rem 1.3rem;
text-align: center;
transition: transform .25s, box-shadow .25s;
}
.cf-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.cf-card .cf-num {
font-family: 'Bebas Neue', sans-serif;
font-size: 2.8rem; color: var(--red-hot);
line-height: 1;
}
.cf-card .cf-label {
font-size: .78rem; color: var(--muted);
margin-top: .35rem; line-height: 1.4;
}
.cf-card .cf-sublabel {
font-size: .72rem; color: #5de68a;
margin-top: .2rem; font-weight: 600;
}
.cashflow-note {
color: var(--muted); font-size: .78rem;
text-align: center; margin-top: 1.6rem;
font-style: italic; line-height: 1.6;
}
/* ─────────────────────────────────────────────
CTA BANNER
───────────────────────────────────────────── */
.cta-banner {
position: relative; overflow: hidden;
margin: 0 1.5rem 5rem;
max-width: 960px; margin-left: auto; margin-right: auto;
background: var(--steel);
border: 1px solid rgba(255,255,255,.08);
border-top: 3px solid var(--red);
border-radius: 14px; padding: 3rem 2.5rem;
text-align: center; z-index: 1;
}
.cta-banner::before {
content: '';
position: absolute; inset: 0; z-index: -1;
background: radial-gradient(ellipse 70% 80% at 50% 120%, rgba(200,0,30,.18) 0%, transparent 70%);
pointer-events: none;
}
.cta-banner h2 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2rem, 5vw, 3.2rem);
letter-spacing: .03em; color: var(--white);
margin-bottom: .6rem;
}
.cta-banner p {
color: var(--offwhite); font-size: 1rem;
max-width: 480px; margin: 0 auto 2rem;
font-style: italic;
}
.cta-btn-group {
display: flex; flex-wrap: wrap;
gap: .85rem; justify-content: center;
}
.cta-btn-primary {
background: var(--red); color: #fff;
padding: .75rem 2rem; border-radius: var(--radius);
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700; font-size: 1rem;
letter-spacing: .06em; text-transform: uppercase;
text-decoration: none;
transition: background .2s, transform .15s;
}
.cta-btn-primary:hover { background: var(--red-hot); transform: translateY(-2px); }
.cta-btn-secondary {
background: transparent; color: var(--offwhite);
padding: .73rem 2rem; border-radius: var(--radius);
border: 2px solid rgba(255,255,255,.25);
font-family: 'Barlow Condensed', sans-serif;
font-weight: 700; font-size: 1rem;
letter-spacing: .06em; text-transform: uppercase;
text-decoration: none;
transition: border-color .2s, color .2s;
}
.cta-btn-secondary:hover { border-color: var(--offwhite); color: var(--white); }
/* ─────────────────────────────────────────────
FOOTER
───────────────────────────────────────────── */
footer {
background: var(--steel);
border-top: 1px solid rgba(255,255,255,.07);
padding: 2.8rem 2.5rem;
display: flex; flex-wrap: wrap;
gap: 2rem; justify-content: space-between; align-items: flex-start;
}
.footer-brand img { height: 40px; opacity: .85; }
.footer-brand .footer-fallback {
font-family: 'Bebas Neue', sans-serif;
font-size: 1.3rem; color: var(--white); letter-spacing: .04em;
}
.footer-brand .footer-fallback span { color: var(--red-hot); }
.footer-brand p {
font-size: .78rem; color: var(--muted); margin-top: .4rem; line-height: 1.5;
}
.footer-links { list-style: none; }
.footer-links li + li { margin-top: .4rem; }
.footer-links a {
font-size: .82rem; color: var(--muted); text-decoration: none;
font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
letter-spacing: .04em; text-transform: uppercase;
transition: color .2s;
}
.footer-links a:hover { color: var(--red-hot); }
.footer-bottom {
width: 100%;
border-top: 1px solid rgba(255,255,255,.06);
padding-top: 1.4rem; margin-top: .5rem;
text-align: center; font-size: .74rem; color: var(--muted);
}
/* ─────────────────────────────────────────────
SCROLL FADE-UP ANIMATION
───────────────────────────────────────────── */
.fade-up {
opacity: 0; transform: translateY(26px);
transition: opacity .55s ease, transform .55s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
/* ─────────────────────────────────────────────
RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 640px) {
.nav-links { display: none; }
nav { padding: 0 1.25rem; }
.tiers-grid { grid-template-columns: 1fr; }
.cashflow-grid { grid-template-columns: 1fr 1fr; }
footer { flex-direction: column; }
}
@media (max-width: 420px) {
.cashflow-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<!-- ═══════════ NAV ═══════════ -->
<nav>
<a href="https://www.brandonbikeworks.com/" class="nav-logo" target="_blank" rel="noopener">
<img src="logo.png" alt="Brandon Bikeworks"
onerror="this.style.display='none'; document.getElementById('nav-fallback').style.display='block'">
<span id="nav-fallback" class="nav-logo-fallback">BRANDON <span>BIKEWORKS</span></span>
</a>
<ul class="nav-links">
<li><a href="#tiers">Memberships</a></li>
<li><a href="#compare">Compare</a></li>
<li><a href="#cashflow">Value</a></li>
<li><a href="https://www.brandonbikeworks.com/articles/service-pg95.htm" target="_blank" rel="noopener">Service</a></li>
<li><a href="https://www.brandonbikeworks.com/storelocator/" target="_blank" rel="noopener">Find Us</a></li>
</ul>
<a href="tel:8134388908" class="nav-cta">Call Us</a>
</nav>
<!-- ═══════════ HERO ═══════════ -->
<div class="hero">
<div class="hero-bg"></div>
<p class="hero-eyebrow">Brandon Bikeworks · Riverview, FL</p>
<h1>Ride More.<br><span>Pay Less.</span></h1>
<p class="hero-sub">Unlock unlimited safety checks, priority service, and exclusive member discounts — all for less than a single tune-up per month.</p>
<div class="hero-badges">
<span class="badge">NBDA Top 100 Shop — 2014 & 2021</span>
<span class="badge">Authorized Trek Dealer</span>
<span class="badge">Authorized Electra Dealer</span>
<span class="badge">All Makes & Models Serviced</span>
</div>
</div>
<!-- ═══════════ BILLING TOGGLE ═══════════ -->
<div class="billing-toggle-wrap fade-up">
<div class="billing-toggle" role="group" aria-label="Billing period">
<button class="active" data-period="monthly" aria-pressed="true">Monthly</button>
<button data-period="quarterly" aria-pressed="false">Quarterly <span class="save-tag">Save 10%</span></button>
<button data-period="annual" aria-pressed="false">Annual <span class="save-tag">Best Value</span></button>
</div>
</div>
<!-- ═══════════ TIER CARDS ═══════════ -->
<section class="tiers-section" id="tiers">
<div class="tiers-header fade-up">
<p class="section-label">Membership Tiers</p>
<h2 class="section-title">Choose Your Level</h2>
</div>
<div class="tiers-grid">
<!-- TIER 1 — COMMUTER -->
<article class="tier-card fade-up">
<div class="tier-top">
<div class="tier-icon" style="background:rgba(58,123,213,.15);">🚲</div>
<div class="tier-name">The Commuter</div>
<div class="tier-focus" style="color:var(--tier1);">Safety Focus</div>
</div>
<div class="tier-price-wrap">
<div class="tier-price">
<span class="amount"
data-monthly="19" data-quarterly="18" data-annual="16">19</span>
<span class="cents"
data-monthly=".99" data-quarterly=".00" data-annual=".58">.99</span>
<span class="per"> /mo</span>
</div>
<div class="tier-savings hidden"
data-monthly=""
data-quarterly="Save 10% — $54/qtr"
data-annual="Save 17% — $199/yr billed annually">
</div>
</div>
<div class="tier-body">
<p class="tier-value" style="border-color:var(--tier1);">
Unlimited "Safety & Go" inspections — bolt torque, lube, tire pressure — plus 50% off flat tire labor.
</p>
<ul class="tier-features">
<li>
<span class="chk" style="background:rgba(58,123,213,.2);color:var(--tier1);">✓</span>
Unlimited bolt torque checks
</li>
<li>
<span class="chk" style="background:rgba(58,123,213,.2);color:var(--tier1);">✓</span>
Unlimited lube & tire pressure service
</li>
<li>
<span class="chk" style="background:rgba(58,123,213,.2);color:var(--tier1);">✓</span>
50% off flat tire labor
</li>
<li>
<span class="chk" style="background:rgba(58,123,213,.2);color:var(--tier1);">✓</span>
Member priority check-in
</li>
</ul>
<a href="tel:8134388908" class="tier-btn"
style="border-color:var(--tier1);color:var(--tier1);">
Get Started
</a>
</div>
</article>
<!-- TIER 2 — ENTHUSIAST -->
<article class="tier-card fade-up">
<div class="tier-top">
<div class="tier-icon" style="background:rgba(39,174,96,.15);">🏃</div>
<div class="tier-name">The Enthusiast</div>
<div class="tier-focus" style="color:var(--tier2);">Consistency Focus</div>
</div>
<div class="tier-price-wrap">
<div class="tier-price">
<span class="amount"
data-monthly="34" data-quarterly="31" data-annual="27">34</span>
<span class="cents"
data-monthly=".99" data-quarterly=".67" data-annual=".42">.99</span>
<span class="per"> /mo</span>
</div>
<div class="tier-savings hidden"
data-monthly=""
data-quarterly="Save 10% — $95/qtr"
data-annual="Save 20% — $329/yr billed annually">
</div>
</div>
<div class="tier-body">
<p class="tier-value" style="border-color:var(--tier2);">
Everything in Commuter + two "Clean & Adjust" services per year, unlimited gear/brake indexing, and 10% off apparel & helmets.
</p>
<ul class="tier-features">
<li>
<span class="chk" style="background:rgba(39,174,96,.2);color:var(--tier2);">✓</span>
All Commuter benefits included
</li>
<li>
<span class="chk" style="background:rgba(39,174,96,.2);color:var(--tier2);">✓</span>
2× Clean & Adjust services per year
</li>
<li>
<span class="chk" style="background:rgba(39,174,96,.2);color:var(--tier2);">✓</span>
Unlimited gear & brake indexing
</li>
<li>
<span class="chk" style="background:rgba(39,174,96,.2);color:var(--tier2);">✓</span>
10% off all apparel & helmets
</li>
</ul>
<a href="tel:8134388908" class="tier-btn"
style="border-color:var(--tier2);color:var(--tier2);">
Get Started
</a>
</div>
</article>
<!-- TIER 3 — PERFORMANCE (featured) -->
<article class="tier-card featured fade-up">
<div class="featured-ribbon">Most Popular</div>
<div class="tier-top">
<div class="tier-icon" style="background:rgba(230,126,34,.15);">⚡</div>
<div class="tier-name">The Performance</div>
<div class="tier-focus" style="color:var(--tier3);">Precision Focus</div>
</div>
<div class="tier-price-wrap">
<div class="tier-price">
<span class="amount"
data-monthly="49" data-quarterly="45" data-annual="39">49</span>
<span class="cents"
data-monthly=".99" data-quarterly=".00" data-annual=".58">.99</span>
<span class="per"> /mo</span>
</div>
<div class="tier-savings hidden"
data-monthly=""
data-quarterly="Save 10% — $135/qtr"
data-annual="Save 20% — $475/yr billed annually">
</div>
</div>
<div class="tier-body">
<p class="tier-value" style="border-color:var(--tier3);">
Everything in Enthusiast + one "Deep Dive" Service (ultrasonic cleaning & new cables), 10% off components/tires, and free Race-Day priority tuning.
</p>
<ul class="tier-features">
<li>
<span class="chk" style="background:rgba(230,126,34,.2);color:var(--tier3);">✓</span>
All Enthusiast benefits included
</li>
<li>
<span class="chk" style="background:rgba(230,126,34,.2);color:var(--tier3);">✓</span>
1× "Deep Dive" ultrasonic service per year
</li>
<li>
<span class="chk" style="background:rgba(230,126,34,.2);color:var(--tier3);">✓</span>
10% off all components & tires
</li>
<li>
<span class="chk" style="background:rgba(230,126,34,.2);color:var(--tier3);">✓</span>
Free Race-Day priority tuning
</li>
</ul>
<a href="tel:8134388908" class="tier-btn filled"
style="background:var(--tier3);border-color:var(--tier3);">
Get Started
</a>
</div>
</article>
<!-- TIER 4 — VIP ELITE -->
<article class="tier-card fade-up">
<div class="tier-top">
<div class="tier-icon" style="background:rgba(142,68,173,.15);">👑</div>
<div class="tier-name">The VIP Elite</div>
<div class="tier-focus" style="color:var(--tier4);">Concierge Focus</div>
</div>
<div class="tier-price-wrap">
<div class="tier-price">
<span class="amount"
data-monthly="74" data-quarterly="74" data-annual="66">74</span>
<span class="cents"
data-monthly=".99" data-quarterly=".99" data-annual=".58">.99</span>
<span class="per"> /mo</span>
</div>
<div class="tier-savings hidden"
data-monthly=""
data-quarterly="Annual commitment only — see annual rate"
data-annual="Best rate — $799/yr · Secures operating capital">
</div>
</div>
<div class="tier-body">
<p class="tier-value" style="border-color:var(--tier4);">
Everything in Performance + one "Showroom Overhaul," unlimited bike washes, valet pick-up/delivery, and 24-hr "Front of the Line" status.
</p>
<ul class="tier-features">
<li>
<span class="chk" style="background:rgba(142,68,173,.2);color:var(--tier4);">✓</span>
All Performance benefits included
</li>
<li>
<span class="chk" style="background:rgba(142,68,173,.2);color:var(--tier4);">✓</span>
1× Full "Showroom Overhaul" per year
</li>
<li>
<span class="chk" style="background:rgba(142,68,173,.2);color:var(--tier4);">✓</span>
Unlimited bike washes
</li>
<li>
<span class="chk" style="background:rgba(142,68,173,.2);color:var(--tier4);">✓</span>
Valet pick-up & delivery service
</li>
<li>
<span class="chk" style="background:rgba(142,68,173,.2);color:var(--tier4);">✓</span>
Guaranteed 24-hr "Front of Line" turnaround
</li>
</ul>
<a href="tel:8134388908" class="tier-btn"
style="border-color:var(--tier4);color:var(--tier4);">
Contact Us
</a>
</div>
</article>
</div>
</section>
<!-- ═══════════ COMPARISON TABLE ═══════════ -->
<section class="compare-section" id="compare">
<div class="tiers-header fade-up">
<p class="section-label">Side by Side</p>
<h2 class="section-title">Full Feature Comparison</h2>
</div>
<div style="overflow-x:auto;">
<table class="compare-table fade-up">
<thead>
<tr>
<th>Feature</th>
<th style="color:var(--tier1)">Commuter</th>
<th style="color:var(--tier2)">Enthusiast</th>
<th style="color:var(--tier3)">Performance</th>
<th style="color:var(--tier4)">VIP Elite</th>
</tr>
</thead>
<tbody>
<tr>
<td>Safety & Go Inspections</td>
<td><span class="chk">∞</span></td>
<td><span class="chk">∞</span></td>
<td><span class="chk">∞</span></td>
<td><span class="chk">∞</span></td>
</tr>
<tr>
<td>50% Off Flat Tire Labor</td>
<td><span class="chk">✓</span></td>
<td><span class="chk">✓</span></td>
<td><span class="chk">✓</span></td>
<td><span class="chk">✓</span></td>
</tr>
<tr>
<td>Clean & Adjust Services</td>
<td><span class="x">—</span></td>
<td class="val">2 / yr</td>
<td class="val">2 / yr</td>
<td class="val">2 / yr</td>
</tr>
<tr>
<td>Unlimited Gear/Brake Indexing</td>
<td><span class="x">—</span></td>
<td><span class="chk">✓</span></td>
<td><span class="chk">✓</span></td>
<td><span class="chk">✓</span></td>
</tr>
<tr>
<td>Apparel & Helmet Discount</td>
<td><span class="x">—</span></td>
<td class="val">10%</td>
<td class="val">10%</td>
<td class="val">10%</td>
</tr>
<tr>
<td>Deep Dive Ultrasonic Service</td>
<td><span class="x">—</span></td>
<td><span class="x">—</span></td>
<td class="val">1 / yr</td>
<td class="val">1 / yr</td>
</tr>
<tr>
<td>Components & Tires Discount</td>
<td><span class="x">—</span></td>
<td><span class="x">—</span></td>
<td class="val">10%</td>
<td class="val">10%</td>
</tr>
<tr>
<td>Race-Day Priority Tuning</td>
<td><span class="x">—</span></td>
<td><span class="x">—</span></td>
<td><span class="chk">✓</span></td>
<td><span class="chk">✓</span></td>
</tr>
<tr>
<td>Showroom Overhaul</td>
<td><span class="x">—</span></td>
<td><span class="x">—</span></td>
<td><span class="x">—</span></td>
<td class="val">1 / yr</td>
</tr>
<tr>
<td>Unlimited Bike Washes</td>
<td><span class="x">—</span></td>
<td><span class="x">—</span></td>
<td><span class="x">—</span></td>
<td><span class="chk">✓</span></td>
</tr>
<tr>
<td>Valet Pick-Up / Delivery</td>
<td><span class="x">—</span></td>
<td><span class="x">—</span></td>
<td><span class="x">—</span></td>
<td><span class="chk">✓</span></td>
</tr>
<tr>
<td>24-Hr Front-of-Line Status</td>
<td><span class="x">—</span></td>
<td><span class="x">—</span></td>
<td><span class="x">—</span></td>
<td><span class="chk">✓</span></td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- ═══════════ CASH FLOW ═══════════ -->
<section class="cashflow-section" id="cashflow">
<div class="fade-up">
<p class="section-label">The Numbers</p>
<h2 class="section-title">Cash Flow by the Numbers</h2>
<p class="cashflow-intro">Annual MRR potential — why recurring membership beats one-off service revenue every time.</p>
</div>
<div class="cashflow-grid">
<div class="cf-card fade-up">
<div class="cf-num">$199</div>
<div class="cf-label">Commuter Annual</div>
<div class="cf-sublabel">vs $239.88 monthly</div>
</div>
<div class="cf-card fade-up">
<div class="cf-num">$329</div>
<div class="cf-label">Enthusiast Annual</div>
<div class="cf-sublabel">vs $419.88 monthly</div>
</div>
<div class="cf-card fade-up">
<div class="cf-num">$475</div>
<div class="cf-label">Performance Annual</div>
<div class="cf-sublabel">vs $599.88 monthly</div>
</div>
<div class="cf-card fade-up">
<div class="cf-num">$799</div>
<div class="cf-label">VIP Elite Annual</div>
<div class="cf-sublabel">Upfront ops capital</div>
</div>
</div>
<p class="cashflow-note fade-up">
Quarterly plans create consistent cash-flow spikes every 3 months.<br>
Annual plans lock in operating capital upfront — the <strong style="color:var(--offwhite)">"Cash Flow is King"</strong> strategy.
</p>
</section>
<!-- ═══════════ CTA BANNER ═══════════ -->
<section style="padding: 0 1.5rem 5rem; position:relative; z-index:1;" class="fade-up">
<div class="cta-banner">
<h2>Ready to Join the Bikeworks Family?</h2>
<p>Stop in, call us, or click below — our team is ready to match you with the right membership plan.</p>
<div class="cta-btn-group">
<a href="tel:8134388908" class="cta-btn-primary">Call (813) 438-8908</a>
<a href="https://www.brandonbikeworks.com/storelocator/" target="_blank" rel="noopener" class="cta-btn-secondary">Get Directions</a>
</div>
</div>
</section>
<!-- ═══════════ FOOTER ═══════════ -->
<footer>
<div class="footer-brand">
<img src="logo.png" alt="Brandon Bikeworks"
onerror="this.style.display='none'; document.getElementById('footer-fallback').style.display='block'">
<div id="footer-fallback" class="footer-fallback" style="display:none;">BRANDON <span>BIKEWORKS</span></div>
<p>6048 Winthrop Town Centre Ave<br>Riverview, FL 33578<br>
<a href="tel:8134388908" style="color:var(--red-hot);text-decoration:none;">(813) 438-8908</a></p>
<p style="margin-top:.5rem;">Mon–Fri 10am–7pm · Sat 10am–5pm · Sun Closed</p>
</div>
<ul class="footer-links">
<li><a href="https://www.brandonbikeworks.com/about/about-brandon-bikeworks-pg56.htm" target="_blank" rel="noopener">About Us</a></li>
<li><a href="https://www.brandonbikeworks.com/articles/service-pg95.htm" target="_blank" rel="noopener">Service Packages</a></li>
<li><a href="https://www.brandonbikeworks.com/product-list/bikes-12/?rb_br=2996" target="_blank" rel="noopener">Trek Bikes</a></li>
<li><a href="https://www.brandonbikeworks.com/product-list/electric-2/bikes-3/?rb_br=3127" target="_blank" rel="noopener">Electra Bikes</a></li>
<li><a href="https://www.brandonbikeworks.com/articles/local-rides-pg111.htm" target="_blank" rel="noopener">Local Rides</a></li>
<li><a href="https://www.brandonbikeworks.com/articles/employment-pg103.htm" target="_blank" rel="noopener">Employment</a></li>
</ul>
<div class="footer-bottom">
© <span id="yr"></span> Brandon Bikeworks · Riverview, FL · All rights reserved
</div>
</footer>
<script>
/* ─── YEAR ─── */
document.getElementById('yr').textContent = new Date().getFullYear();
/* ─── SCROLL FADE-UP ─── */
const observer = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('visible');
observer.unobserve(e.target);
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
/* ─── BILLING TOGGLE ─── */
const toggleBtns = document.querySelectorAll('.billing-toggle button');
toggleBtns.forEach(btn => {
btn.addEventListener('click', () => {
// update active state
toggleBtns.forEach(b => {
b.classList.remove('active');
b.setAttribute('aria-pressed', 'false');
});
btn.classList.add('active');
btn.setAttribute('aria-pressed', 'true');
const period = btn.dataset.period;
document.querySelectorAll('.tier-card').forEach(card => {
const amountEl = card.querySelector('.amount');
const centsEl = card.querySelector('.cents');
const savingsEl = card.querySelector('.tier-savings');
if (amountEl) amountEl.textContent = amountEl.dataset[period] ?? amountEl.dataset.monthly;
if (centsEl) centsEl.textContent = centsEl.dataset[period] ?? centsEl.dataset.monthly;
if (savingsEl) {
const msg = savingsEl.dataset[period];
if (msg) {
savingsEl.textContent = msg;
savingsEl.classList.remove('hidden');
} else {
savingsEl.textContent = '';
savingsEl.classList.add('hidden');
}
}
});
});
});
</script>
</body>
</html>