Pages Medium
Banking — Business Banking Landing
A polished, trust-first marketing landing for a fictional SMB business bank, Ledgerline. It pairs a headline hero with an animated dashboard mockup — a counting-up balance, sparkline chart, live transaction rows and a tilted expense card — with feature cards for multi-user access, invoicing, expense cards and integrations, a team-sized pricing table with a monthly/yearly toggle, a customer logo strip, a case-study quote with count-up stats, an email capture CTA and a full footer. Built with semantic HTML, Inter typography and accessible, responsive vanilla JavaScript.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--slate: #16264d;
--slate-2: #1f3460;
--ink: #0e1726;
--ink-2: #3a4660;
--muted: #697089;
--green: #1f9d62;
--green-d: #17794b;
--green-50: #e8f4ee;
--bg: #f5f7fb;
--surface: #ffffff;
--line: rgba(22, 38, 77, 0.10);
--line-2: rgba(22, 38, 77, 0.18);
--ok: #1f9d62;
--warn: #d9982b;
--danger: #d4493e;
--credit: #1f9d62;
--debit: #0e1726;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--sh-1: 0 1px 2px rgba(22, 38, 77, 0.06), 0 1px 3px rgba(22, 38, 77, 0.05);
--sh-2: 0 8px 24px rgba(22, 38, 77, 0.10), 0 2px 6px rgba(22, 38, 77, 0.06);
--sh-3: 0 24px 60px rgba(22, 38, 77, 0.18), 0 8px 18px rgba(22, 38, 77, 0.10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: "Inter", system-ui, -apple-system, sans-serif;
background: var(--bg);
color: var(--ink);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
.tab, .mock-bal, .mock-delta, .m-amt, .p-num, .mini-num, .s-num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(1140px, 92vw); margin-inline: auto; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer;
padding: 10px 18px; border-radius: var(--r-sm); border: 1px solid transparent;
transition: transform .14s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 13px 24px; font-size: 15.5px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--green); color: #fff; box-shadow: 0 6px 16px rgba(31, 157, 98, 0.30); }
.btn-primary:hover { background: var(--green-d); box-shadow: 0 8px 22px rgba(31, 157, 98, 0.38); }
.btn-line { background: var(--surface); color: var(--slate); border-color: var(--line-2); }
.btn-line:hover { border-color: var(--slate); box-shadow: var(--sh-1); }
.btn-ghost { background: transparent; color: var(--slate); }
.btn-ghost:hover { background: rgba(22, 38, 77, 0.06); }
/* ---------- Header ---------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(255, 255, 255, 0.82);
backdrop-filter: saturate(160%) blur(12px);
border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 22px; height: 66px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; color: var(--slate); letter-spacing: -0.02em; }
.brand-mark {
display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
background: linear-gradient(140deg, var(--slate), var(--slate-2)); color: #fff;
}
.brand-name { font-size: 17px; }
.brand-tag {
font-size: 11px; font-weight: 700; color: var(--green); background: var(--green-50);
padding: 2px 7px; border-radius: 999px; letter-spacing: .02em;
}
.nav-links { display: flex; gap: 4px; margin-left: 8px; }
.nav-links a { padding: 8px 12px; border-radius: var(--r-sm); font-weight: 500; font-size: 14.5px; color: var(--ink-2); transition: background .15s, color .15s; }
.nav-links a:hover { background: rgba(22, 38, 77, 0.06); color: var(--slate); }
.nav-cta-mobile { display: none; }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-toggle { display: none; flex-direction: column; gap: 4px; width: 40px; height: 40px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; }
.nav-toggle span { width: 18px; height: 2px; background: var(--slate); border-radius: 2px; transition: transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* ---------- Hero ---------- */
.hero { padding: 64px 0 40px; position: relative; overflow: hidden; }
.hero::before {
content: ""; position: absolute; inset: -200px 0 auto -200px; height: 560px;
background: radial-gradient(620px 420px at 18% 0%, rgba(31,157,98,0.10), transparent 70%),
radial-gradient(560px 420px at 92% 8%, rgba(22,38,77,0.10), transparent 70%);
pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 54px; align-items: center; position: relative; }
.eyebrow {
display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
color: var(--slate); background: var(--surface); border: 1px solid var(--line-2);
padding: 6px 13px; border-radius: 999px; box-shadow: var(--sh-1);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(31,157,98,0.18); }
.hero h1 { font-size: clamp(34px, 5vw, 54px); margin: 18px 0 0; color: var(--slate); }
.lede { font-size: clamp(16px, 2vw, 19px); color: var(--ink-2); margin-top: 18px; max-width: 33ch; }
.hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; padding: 0; margin: 26px 0 0; }
.hero-trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.hero-trust svg { color: var(--green); }
/* Dashboard mockup */
.hero-mock { position: relative; }
.mock-card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
box-shadow: var(--sh-3); padding: 20px; transform: rotate(-1deg);
}
.mock-top { display: flex; justify-content: space-between; align-items: flex-start; }
.mock-label { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }
.mock-bal { display: block; font-size: 30px; font-weight: 800; color: var(--slate); letter-spacing: -0.02em; margin-top: 4px; }
.mock-delta { font-size: 12.5px; font-weight: 600; }
.mock-delta.up { color: var(--green); }
.mock-pill {
display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
padding: 5px 10px; border-radius: 999px;
}
.mock-pill.verified { color: var(--green-d); background: var(--green-50); }
.mock-chart { margin: 14px -4px 6px; }
.spark { width: 100%; height: 76px; }
.mock-rows { display: grid; gap: 2px; }
.mock-row {
display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 11px;
padding: 10px 6px; border-top: 1px solid var(--line);
}
.m-ava { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.m-meta { display: flex; flex-direction: column; min-width: 0; }
.m-meta b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-meta small { font-size: 11.5px; color: var(--muted); }
.m-amt { font-size: 14px; font-weight: 700; text-align: right; }
.m-amt.credit { color: var(--credit); }
.m-amt.debit { color: var(--debit); }
.mock-mini {
position: absolute; right: -10px; bottom: -22px; width: 220px;
background: linear-gradient(145deg, var(--slate), var(--slate-2)); color: #fff;
border-radius: 14px; padding: 16px; box-shadow: var(--sh-3); transform: rotate(4deg);
}
.mini-label { font-size: 11px; opacity: .7; font-weight: 500; }
.mini-num { display: block; font-size: 16px; font-weight: 600; letter-spacing: 0.08em; margin-top: 22px; }
.mini-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 11px; }
.mini-brand { font-weight: 700; opacity: .85; letter-spacing: .03em; }
/* Logos */
.logos { margin-top: 70px; text-align: center; }
.logos-label { font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.logos-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 38px; margin-top: 18px; }
.logo { font-size: 18px; font-weight: 800; color: var(--slate); opacity: .42; letter-spacing: -0.02em; transition: opacity .2s; }
.logo:hover { opacity: .85; }
/* ---------- Sections ---------- */
.section { padding: 78px 0; }
.section-alt { background: linear-gradient(180deg, #fff, #f0f3f9); border-block: 1px solid var(--line); }
.section-head { max-width: 640px; margin: 0 auto 44px; text-align: center; }
.kicker { font-size: 13px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .08em; }
.section-head h2 { font-size: clamp(26px, 3.5vw, 38px); margin: 12px 0; color: var(--slate); }
.section-head p { color: var(--ink-2); font-size: 16.5px; }
/* Features */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 24px; box-shadow: var(--sh-1); transition: transform .2s, box-shadow .2s, border-color .2s;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.f-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--green-50); color: var(--green-d); margin-bottom: 14px; }
.feature:nth-child(2n) .f-icon { background: rgba(22,38,77,0.07); color: var(--slate); }
.feature h3 { font-size: 17px; color: var(--slate); }
.feature p { color: var(--ink-2); font-size: 14.5px; margin-top: 8px; }
/* Integrations */
.integ-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.integ-grid h2 { font-size: clamp(26px, 3.4vw, 36px); color: var(--slate); margin: 12px 0; }
.muted-p { color: var(--ink-2); font-size: 16px; }
.integ-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.integ-list li { display: flex; align-items: center; gap: 11px; font-weight: 500; color: var(--ink); }
.integ-list svg { color: var(--green); flex-shrink: 0; }
.integ-cloud { display: flex; flex-wrap: wrap; gap: 12px; align-content: center; }
.chip {
background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px;
padding: 11px 18px; font-weight: 600; font-size: 14.5px; color: var(--slate);
box-shadow: var(--sh-1); transition: transform .18s, box-shadow .18s;
}
.chip:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.chip-accent { background: var(--slate); color: #fff; border-color: var(--slate); }
/* Pricing */
.bill-toggle { display: inline-flex; background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px; margin-top: 22px; box-shadow: var(--sh-1); }
.bt-opt {
display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 600; font-size: 14px;
color: var(--ink-2); background: transparent; border: 0; padding: 9px 20px; border-radius: 999px; cursor: pointer;
transition: background .2s, color .2s;
}
.bt-opt.is-active { background: var(--slate); color: #fff; }
.save-tag { font-size: 11px; font-weight: 700; background: var(--green-50); color: var(--green-d); padding: 2px 7px; border-radius: 999px; }
.bt-opt.is-active .save-tag { background: rgba(255,255,255,0.2); color: #fff; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.price-card {
position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: 28px 24px; box-shadow: var(--sh-1); transition: transform .2s, box-shadow .2s;
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.price-card.featured { border: 2px solid var(--green); box-shadow: var(--sh-3); }
.p-flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--green); color: #fff; font-size: 11.5px; font-weight: 700; padding: 5px 14px; border-radius: 999px; box-shadow: 0 6px 14px rgba(31,157,98,0.35); }
.p-name { font-size: 14px; font-weight: 700; color: var(--green-d); text-transform: uppercase; letter-spacing: .06em; }
.p-desc { color: var(--muted); font-size: 13.5px; margin-top: 6px; min-height: 38px; }
.p-amount { display: flex; align-items: baseline; gap: 2px; margin-top: 8px; color: var(--slate); }
.p-cur { font-size: 22px; font-weight: 700; }
.p-num { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; }
.p-per { font-size: 15px; color: var(--muted); font-weight: 600; }
.p-seats { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--bg); padding: 4px 10px; border-radius: 999px; margin: 6px 0 18px; }
.p-feats { list-style: none; padding: 18px 0 0; margin: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 11px; }
.p-feats li { position: relative; padding-left: 26px; font-size: 14px; color: var(--ink); }
.p-feats li::before { content: "✓"; position: absolute; left: 0; top: -1px; width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 11px; font-weight: 800; color: var(--green-d); background: var(--green-50); border-radius: 50%; }
/* Case study */
.story-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: stretch; }
.story-quote {
position: relative; background: var(--slate); color: #fff; border-radius: var(--r-lg);
padding: 40px 36px; box-shadow: var(--sh-3); overflow: hidden;
}
.quote-mark { position: absolute; top: 4px; right: 24px; font-size: 130px; line-height: 1; font-weight: 800; color: rgba(255,255,255,0.10); font-family: Georgia, serif; }
.story-quote blockquote { margin: 0; font-size: clamp(18px, 2.4vw, 23px); font-weight: 600; letter-spacing: -0.01em; position: relative; }
.story-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.q-ava { width: 42px; height: 42px; border-radius: 50%; background: var(--green); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.q-meta { display: flex; flex-direction: column; }
.q-meta b { font-size: 14.5px; }
.q-meta small { font-size: 12.5px; opacity: .72; }
.story-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
padding: 24px 20px; box-shadow: var(--sh-1); display: flex; flex-direction: column; align-items: flex-start;
}
.s-num { font-size: 40px; font-weight: 800; color: var(--slate); letter-spacing: -0.03em; display: inline; }
.s-suf { font-size: 26px; font-weight: 800; color: var(--green); }
.s-label { font-size: 13px; color: var(--ink-2); margin-top: 8px; font-weight: 500; }
/* CTA */
.cta-band { padding: 30px 0 90px; }
.cta-inner {
background: linear-gradient(145deg, var(--slate) 0%, var(--slate-2) 60%, #234079 100%);
color: #fff; border-radius: 26px; padding: 56px 40px; text-align: center;
box-shadow: var(--sh-3); position: relative; overflow: hidden;
}
.cta-inner::after { content: ""; position: absolute; inset: auto -10% -60% -10%; height: 320px; background: radial-gradient(closest-side, rgba(31,157,98,0.32), transparent); pointer-events: none; }
.cta-inner h2 { font-size: clamp(26px, 3.6vw, 40px); position: relative; }
.cta-inner p { color: rgba(255,255,255,0.78); margin-top: 12px; font-size: 16.5px; position: relative; }
.cta-form { display: flex; gap: 10px; justify-content: center; margin: 28px auto 0; max-width: 480px; position: relative; flex-wrap: wrap; }
.cta-form input {
flex: 1; min-width: 220px; font: inherit; font-size: 15px; padding: 13px 16px;
border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.12);
color: #fff; transition: border-color .18s, background .18s;
}
.cta-form input::placeholder { color: rgba(255,255,255,0.62); }
.cta-form input:focus { outline: none; border-color: var(--green); background: rgba(255,255,255,0.18); box-shadow: 0 0 0 3px rgba(31,157,98,0.30); }
.cta-form input.invalid { border-color: #ff8c83; background: rgba(255,140,131,0.14); }
.cta-fine { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 12.5px; color: rgba(255,255,255,0.62); position: relative; }
/* Footer */
.site-footer { background: #0c1733; color: rgba(255,255,255,0.7); padding: 56px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.foot-brand .brand { color: #fff; margin-bottom: 14px; }
.foot-brand .brand-mark { background: rgba(255,255,255,0.10); }
.foot-brand p { font-size: 13.5px; max-width: 30ch; }
.foot-badge { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85); }
.foot-badge svg { color: var(--green); }
.foot-col h4 { font-size: 13px; color: #fff; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.foot-col a { display: block; font-size: 14px; padding: 5px 0; transition: color .15s; }
.foot-col a:hover { color: #fff; }
.foot-base { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12.5px; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-left: 6px; box-shadow: 0 0 0 3px rgba(31,157,98,0.25); }
.foot-social a { display: inline-flex; align-items: center; }
/* Toast */
.toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast {
display: flex; align-items: center; gap: 9px; background: var(--slate); color: #fff;
padding: 12px 18px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500;
box-shadow: var(--sh-3); opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast .t-ico { width: 18px; height: 18px; border-radius: 50%; background: var(--green); display: grid; place-items: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }
/* Reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
/* ---------- Responsive ---------- */
@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; gap: 56px; }
.hero-mock { max-width: 460px; }
.integ-grid, .story-grid { grid-template-columns: 1fr; gap: 30px; }
.feature-grid, .price-grid { grid-template-columns: 1fr 1fr; }
.price-card.featured { order: -1; }
.foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 520px) {
.nav-links {
position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; gap: 2px;
background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px 5vw 16px;
box-shadow: var(--sh-2); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.nav-links.open { transform: none; opacity: 1; pointer-events: auto; }
.nav-links a { padding: 12px; font-size: 15.5px; }
.nav-cta-mobile { display: block; margin-top: 6px; background: var(--green-50); color: var(--green-d) !important; font-weight: 700; text-align: center; }
.nav-toggle { display: flex; }
.nav-actions .btn { display: none; }
.hero { padding: 40px 0 30px; }
.hero-actions .btn { flex: 1; }
.feature-grid, .price-grid, .story-stats { grid-template-columns: 1fr; }
.integ-cloud { gap: 9px; }
.cta-inner { padding: 40px 22px; }
.cta-form input { min-width: 100%; }
.cta-form .btn { width: 100%; }
.foot-grid { grid-template-columns: 1fr; }
.foot-base { flex-direction: column; gap: 12px; text-align: center; }
.mock-mini { display: none; }
.section { padding: 56px 0; }
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1 !important; transform: none !important; transition: none; }
html { scroll-behavior: auto; }
}(function () {
"use strict";
/* ---------- Toast helper ---------- */
var toastWrap = document.getElementById("toastWrap");
function toast(msg) {
var el = document.createElement("div");
el.className = "toast";
el.innerHTML = '<span class="t-ico">✓</span><span></span>';
el.querySelector("span:last-child").textContent = msg;
toastWrap.appendChild(el);
requestAnimationFrame(function () { el.classList.add("show"); });
setTimeout(function () {
el.classList.remove("show");
setTimeout(function () { el.remove(); }, 280);
}, 2800);
}
/* ---------- Mobile nav ---------- */
var toggle = document.getElementById("navToggle");
var navLinks = document.getElementById("navLinks");
if (toggle && navLinks) {
toggle.addEventListener("click", function () {
var open = navLinks.classList.toggle("open");
toggle.setAttribute("aria-expanded", open ? "true" : "false");
});
navLinks.addEventListener("click", function (e) {
if (e.target.tagName === "A") {
navLinks.classList.remove("open");
toggle.setAttribute("aria-expanded", "false");
}
});
}
/* ---------- Reveal on scroll ---------- */
var reveals = document.querySelectorAll(".reveal");
if ("IntersectionObserver" in window) {
var io = new IntersectionObserver(function (entries, obs) {
entries.forEach(function (en) {
if (en.isIntersecting) {
en.target.classList.add("in");
obs.unobserve(en.target);
}
});
}, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
reveals.forEach(function (r) { io.observe(r); });
} else {
reveals.forEach(function (r) { r.classList.add("in"); });
}
/* ---------- Count-up animations ---------- */
function animateCount(el, target, opts) {
opts = opts || {};
var dur = 1100;
var start = null;
var isMoney = opts.money;
function fmt(v) {
if (isMoney) {
return v.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
return Math.round(v).toLocaleString("en-US");
}
function step(ts) {
if (start === null) start = ts;
var p = Math.min((ts - start) / dur, 1);
var eased = 1 - Math.pow(1 - p, 3);
el.textContent = (isMoney ? "$" : "") + fmt(target * eased);
if (p < 1) requestAnimationFrame(step);
else el.textContent = (isMoney ? "$" : "") + fmt(target);
}
requestAnimationFrame(step);
}
var counted = false;
function runCounts() {
if (counted) return;
counted = true;
var bal = document.querySelector(".mock-bal");
if (bal) animateCount(bal, parseFloat(bal.dataset.count), { money: true });
document.querySelectorAll(".s-num").forEach(function (el) {
animateCount(el, parseFloat(el.dataset.count));
});
}
// kick counts when hero / stats enter view (or immediately as fallback)
if ("IntersectionObserver" in window) {
var balEl = document.querySelector(".mock-bal");
var statsEl = document.querySelector(".story-stats");
var co = new IntersectionObserver(function (entries) {
entries.forEach(function (en) {
if (en.isIntersecting) {
if (en.target === balEl) {
animateCount(balEl, parseFloat(balEl.dataset.count), { money: true });
} else {
en.target.querySelectorAll(".s-num").forEach(function (el) {
animateCount(el, parseFloat(el.dataset.count));
});
}
co.unobserve(en.target);
}
});
}, { threshold: 0.4 });
if (balEl) co.observe(balEl);
if (statsEl) co.observe(statsEl);
} else {
runCounts();
}
/* ---------- Pricing toggle ---------- */
var btMonthly = document.getElementById("btMonthly");
var btYearly = document.getElementById("btYearly");
var nums = document.querySelectorAll(".p-num");
var periods = document.querySelectorAll(".p-per");
var mode = "monthly";
function setPricing(next) {
if (next === mode) return;
mode = next;
var yearly = mode === "yearly";
btMonthly.classList.toggle("is-active", !yearly);
btYearly.classList.toggle("is-active", yearly);
btMonthly.setAttribute("aria-pressed", String(!yearly));
btYearly.setAttribute("aria-pressed", String(yearly));
nums.forEach(function (n) {
var val = yearly ? n.dataset.yearly : n.dataset.monthly;
n.textContent = val;
});
periods.forEach(function (p) { p.textContent = yearly ? "/mo billed yearly" : "/mo"; });
toast(yearly ? "Yearly billing applied — you save 20%" : "Switched to monthly billing");
}
if (btMonthly && btYearly) {
btMonthly.addEventListener("click", function () { setPricing("monthly"); });
btYearly.addEventListener("click", function () { setPricing("yearly"); });
}
/* ---------- CTA email form ---------- */
var ctaForm = document.getElementById("ctaForm");
var ctaEmail = document.getElementById("ctaEmail");
if (ctaForm) {
var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
ctaForm.addEventListener("submit", function (e) {
e.preventDefault();
var v = ctaEmail.value.trim();
if (!re.test(v)) {
ctaEmail.classList.add("invalid");
ctaEmail.focus();
toast("Enter a valid work email to continue");
return;
}
ctaEmail.classList.remove("invalid");
var company = v.split("@")[1].split(".")[0];
toast("Application started for " + company + " — check your inbox");
ctaEmail.value = "";
});
ctaEmail.addEventListener("input", function () { ctaEmail.classList.remove("invalid"); });
}
/* ---------- Logo + chip nudges ---------- */
document.querySelectorAll(".chip").forEach(function (c) {
c.addEventListener("click", function () { toast(c.textContent.trim() + " integration is ready to connect"); });
});
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ledgerline — Business Banking</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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- ============ HEADER ============ -->
<header class="site-header" id="top">
<div class="wrap nav">
<a class="brand" href="#top" aria-label="Ledgerline home">
<span class="brand-mark" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22" fill="none"><path d="M4 19h16M6 16V9m4 7V6m4 10v-5m4 5V8" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>
</span>
<span class="brand-name">Ledgerline</span>
<span class="brand-tag">Business</span>
</a>
<nav class="nav-links" id="navLinks" aria-label="Primary">
<a href="#features">Features</a>
<a href="#integrations">Integrations</a>
<a href="#pricing">Pricing</a>
<a href="#story">Customers</a>
<a class="nav-cta-mobile" href="#cta">Open an account</a>
</nav>
<div class="nav-actions">
<a class="btn btn-ghost" href="#cta">Sign in</a>
<a class="btn btn-primary" href="#cta">Open an account</a>
<button class="nav-toggle" id="navToggle" aria-expanded="false" aria-controls="navLinks" aria-label="Toggle menu">
<span></span><span></span><span></span>
</button>
</div>
</div>
</header>
<main>
<!-- ============ HERO ============ -->
<section class="hero">
<div class="wrap hero-grid">
<div class="hero-copy reveal">
<span class="eyebrow"><span class="dot"></span> New · Multi-entity accounts</span>
<h1>Banking built for the way your business actually runs.</h1>
<p class="lede">One account for payments, expense cards, invoicing and bookkeeping — with role-based access for your whole team. No monthly minimums. No surprise fees.</p>
<div class="hero-actions">
<a class="btn btn-primary btn-lg" href="#cta">Open a free account</a>
<a class="btn btn-line btn-lg" href="#story">See a case study</a>
</div>
<ul class="hero-trust">
<li><svg viewBox="0 0 24 24" width="16" height="16" fill="none"><path d="M12 3l7 3v5c0 4.5-3 7.7-7 9-4-1.3-7-4.5-7-9V6l7-3z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> FDIC-insured to $250k</li>
<li><svg viewBox="0 0 24 24" width="16" height="16" fill="none"><rect x="5" y="11" width="14" height="9" rx="2" stroke="currentColor" stroke-width="2"/><path d="M8 11V8a4 4 0 018 0v3" stroke="currentColor" stroke-width="2"/></svg> SOC 2 Type II</li>
<li><svg viewBox="0 0 24 24" width="16" height="16" fill="none"><path d="M4 12h16M12 4v16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg> No monthly fees</li>
</ul>
</div>
<!-- Dashboard mockup -->
<div class="hero-mock reveal" aria-hidden="true">
<div class="mock-card">
<div class="mock-top">
<div class="mock-acct">
<span class="mock-label">Operating account · •••• 8841</span>
<span class="mock-bal" data-count="284610.42">$0.00</span>
<span class="mock-delta up">▲ 6.2% this month</span>
</div>
<div class="mock-pill verified"><svg viewBox="0 0 24 24" width="13" height="13" fill="none"><path d="M5 12l4 4 10-10" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg> Verified</div>
</div>
<div class="mock-chart">
<svg viewBox="0 0 320 90" preserveAspectRatio="none" class="spark">
<defs><linearGradient id="g1" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#1f9d62" stop-opacity=".28"/><stop offset="1" stop-color="#1f9d62" stop-opacity="0"/></linearGradient></defs>
<path d="M0 70 L40 60 L80 64 L120 44 L160 50 L200 30 L240 36 L280 18 L320 24 L320 90 L0 90 Z" fill="url(#g1)"/>
<path d="M0 70 L40 60 L80 64 L120 44 L160 50 L200 30 L240 36 L280 18 L320 24" fill="none" stroke="#1f9d62" stroke-width="2.5" stroke-linejoin="round"/>
</svg>
</div>
<div class="mock-rows">
<div class="mock-row">
<span class="m-ava" style="background:#e8f4ee;color:#1f9d62">AB</span>
<span class="m-meta"><b>Amelia Booth · Payroll</b><small>Today · 09:14</small></span>
<span class="m-amt debit">−$4,200.00</span>
</div>
<div class="mock-row">
<span class="m-ava" style="background:#eef0f6;color:#16264d">FX</span>
<span class="m-meta"><b>Figma Inc · Software</b><small>Yesterday</small></span>
<span class="m-amt debit">−$144.00</span>
</div>
<div class="mock-row">
<span class="m-ava" style="background:#e8f4ee;color:#1f9d62">IN</span>
<span class="m-meta"><b>Invoice #2041 · Northwind</b><small>Cleared</small></span>
<span class="m-amt credit">+$12,500.00</span>
</div>
</div>
</div>
<div class="mock-mini card-mini">
<span class="mini-label">Team expense card</span>
<span class="mini-num">•••• •••• •••• 4242</span>
<div class="mini-foot"><span>R. NGUYEN</span><span class="mini-brand">ledgerline</span></div>
</div>
</div>
</div>
<!-- Logo strip -->
<div class="wrap logos reveal">
<span class="logos-label">Trusted by 40,000+ growing businesses</span>
<div class="logos-row">
<span class="logo">Northwind</span>
<span class="logo">Hartley Co</span>
<span class="logo">Vellum</span>
<span class="logo">Brightside</span>
<span class="logo">Macawi</span>
<span class="logo">Orbit Labs</span>
</div>
</div>
</section>
<!-- ============ FEATURES ============ -->
<section class="section" id="features">
<div class="wrap">
<div class="section-head reveal">
<span class="kicker">Everything in one place</span>
<h2>Run finance like an operator, not a bank teller.</h2>
<p>Replace four tools with one account. Move money, control spend and close the books faster.</p>
</div>
<div class="feature-grid">
<article class="feature reveal">
<span class="f-icon"><svg viewBox="0 0 24 24" width="22" height="22" fill="none"><circle cx="9" cy="8" r="3" stroke="currentColor" stroke-width="2"/><circle cx="17" cy="10" r="2.4" stroke="currentColor" stroke-width="2"/><path d="M3 19c0-2.8 2.7-4.5 6-4.5s6 1.7 6 4.5M15.5 19c0-1.9.6-3 2-3.6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
<h3>Multi-user access</h3>
<p>Give bookkeepers, founders and assistants their own logins with granular roles, approval limits and a full audit trail.</p>
</article>
<article class="feature reveal">
<span class="f-icon"><svg viewBox="0 0 24 24" width="22" height="22" fill="none"><path d="M6 3h9l3 3v15H6z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M9 11h6M9 15h6M9 7h3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
<h3>Invoicing & bill pay</h3>
<p>Create branded invoices, schedule ACH and wire payments, and reconcile incoming transfers automatically.</p>
</article>
<article class="feature reveal">
<span class="f-icon"><svg viewBox="0 0 24 24" width="22" height="22" fill="none"><rect x="3" y="6" width="18" height="12" rx="2.5" stroke="currentColor" stroke-width="2"/><path d="M3 10h18" stroke="currentColor" stroke-width="2"/></svg></span>
<h3>Expense cards</h3>
<p>Issue unlimited virtual and physical cards with per-card limits, merchant locks and instant freeze.</p>
</article>
<article class="feature reveal">
<span class="f-icon"><svg viewBox="0 0 24 24" width="22" height="22" fill="none"><path d="M4 12a8 8 0 018-8M20 12a8 8 0 01-8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/><path d="M12 4l3 0 0 3M12 20l-3 0 0-3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
<h3>Integrations</h3>
<p>Two-way sync with QuickBooks, Xero, Stripe and Gusto. Your ledger stays current without copy-paste.</p>
</article>
<article class="feature reveal">
<span class="f-icon"><svg viewBox="0 0 24 24" width="22" height="22" fill="none"><rect x="5" y="11" width="14" height="9" rx="2" stroke="currentColor" stroke-width="2"/><path d="M8 11V8a4 4 0 018 0v3" stroke="currentColor" stroke-width="2"/></svg></span>
<h3>Security first</h3>
<p>2FA on every login, hardware-key support, dual approval on large payments and 256-bit encryption at rest.</p>
</article>
<article class="feature reveal">
<span class="f-icon"><svg viewBox="0 0 24 24" width="22" height="22" fill="none"><path d="M4 19V5M4 19h16M8 16v-5M12 16V8M16 16v-3M20 16v-7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
<h3>Real-time insight</h3>
<p>Live cash position, runway forecasting and spend by category — exportable to your board deck in a click.</p>
</article>
</div>
</div>
</section>
<!-- ============ INTEGRATIONS ============ -->
<section class="section section-alt" id="integrations">
<div class="wrap integ-grid">
<div class="reveal">
<span class="kicker">Plays well with your stack</span>
<h2>Connect once, reconcile forever.</h2>
<p class="muted-p">Ledgerline pushes every transaction, fee and refund straight into the tools your accountant already trusts — categorised and ready to close.</p>
<ul class="integ-list">
<li><svg viewBox="0 0 24 24" width="18" height="18" fill="none"><path d="M5 12l4 4 10-10" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg> Auto-categorised feeds to QuickBooks & Xero</li>
<li><svg viewBox="0 0 24 24" width="18" height="18" fill="none"><path d="M5 12l4 4 10-10" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg> Stripe & Shopify payout matching</li>
<li><svg viewBox="0 0 24 24" width="18" height="18" fill="none"><path d="M5 12l4 4 10-10" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg> Gusto payroll & Slack approvals</li>
<li><svg viewBox="0 0 24 24" width="18" height="18" fill="none"><path d="M5 12l4 4 10-10" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg> Open REST API & webhooks</li>
</ul>
</div>
<div class="integ-cloud reveal">
<span class="chip">QuickBooks</span>
<span class="chip">Xero</span>
<span class="chip chip-accent">Stripe</span>
<span class="chip">Gusto</span>
<span class="chip">Shopify</span>
<span class="chip chip-accent">Slack</span>
<span class="chip">Zapier</span>
<span class="chip">NetSuite</span>
<span class="chip">Plaid</span>
</div>
</div>
</section>
<!-- ============ PRICING ============ -->
<section class="section" id="pricing">
<div class="wrap">
<div class="section-head reveal">
<span class="kicker">Simple, team-sized pricing</span>
<h2>Pay for the seats you use. Nothing else.</h2>
<div class="bill-toggle" role="group" aria-label="Billing period">
<button class="bt-opt is-active" id="btMonthly" aria-pressed="true">Monthly</button>
<button class="bt-opt" id="btYearly" aria-pressed="false">Yearly <span class="save-tag">−20%</span></button>
</div>
</div>
<div class="price-grid">
<article class="price-card reveal">
<span class="p-name">Starter</span>
<p class="p-desc">For founders & solo operators.</p>
<div class="p-amount"><span class="p-cur">$</span><span class="p-num" data-monthly="0" data-yearly="0">0</span><span class="p-per">/mo</span></div>
<span class="p-seats">Up to 2 users</span>
<a class="btn btn-line btn-block" href="#cta">Start free</a>
<ul class="p-feats">
<li>1 business account</li>
<li>3 expense cards</li>
<li>ACH & bill pay</li>
<li>QuickBooks sync</li>
</ul>
</article>
<article class="price-card featured reveal">
<span class="p-flag">Most popular</span>
<span class="p-name">Growth</span>
<p class="p-desc">For teams scaling spend & payroll.</p>
<div class="p-amount"><span class="p-cur">$</span><span class="p-num" data-monthly="49" data-yearly="39">49</span><span class="p-per">/mo</span></div>
<span class="p-seats">Up to 15 users</span>
<a class="btn btn-primary btn-block" href="#cta">Open an account</a>
<ul class="p-feats">
<li>Everything in Starter</li>
<li>Unlimited expense cards</li>
<li>Role-based approvals</li>
<li>Xero, Stripe & Gusto</li>
<li>Cash-flow forecasting</li>
</ul>
</article>
<article class="price-card reveal">
<span class="p-name">Enterprise</span>
<p class="p-desc">For multi-entity finance teams.</p>
<div class="p-amount"><span class="p-cur">$</span><span class="p-num" data-monthly="149" data-yearly="119">149</span><span class="p-per">/mo</span></div>
<span class="p-seats">Unlimited users</span>
<a class="btn btn-line btn-block" href="#cta">Talk to sales</a>
<ul class="p-feats">
<li>Everything in Growth</li>
<li>Dual approval & SSO</li>
<li>Dedicated manager</li>
<li>Custom API limits</li>
<li>Priority 24/7 support</li>
</ul>
</article>
</div>
</div>
</section>
<!-- ============ CASE STUDY ============ -->
<section class="section section-alt" id="story">
<div class="wrap story-grid">
<figure class="story-quote reveal">
<span class="quote-mark" aria-hidden="true">“</span>
<blockquote>We closed our books in two days instead of two weeks. Ledgerline gave every team lead their own card with a hard limit — overspend just stopped being a thing.</blockquote>
<figcaption>
<span class="q-ava">DM</span>
<span class="q-meta"><b>Dana Maris</b><small>COO · Brightside Logistics</small></span>
</figcaption>
</figure>
<div class="story-stats reveal">
<div class="stat"><span class="s-num" data-count="86">0</span><span class="s-suf">%</span><span class="s-label">Faster month-end close</span></div>
<div class="stat"><span class="s-num" data-count="41">0</span><span class="s-suf">k</span><span class="s-label">Saved in card fees / yr</span></div>
<div class="stat"><span class="s-num" data-count="120">0</span><span class="s-suf">+</span><span class="s-label">Cards issued to staff</span></div>
<div class="stat"><span class="s-num" data-count="3">0</span><span class="s-suf">×</span><span class="s-label">More cash visibility</span></div>
</div>
</div>
</section>
<!-- ============ CTA ============ -->
<section class="cta-band" id="cta">
<div class="wrap cta-inner reveal">
<h2>Open a business account in 8 minutes.</h2>
<p>No paperwork, no branch visit, no monthly fee. Bring your team in once you're set up.</p>
<form class="cta-form" id="ctaForm" novalidate>
<label class="sr-only" for="ctaEmail">Work email</label>
<input type="email" id="ctaEmail" name="email" placeholder="founder@yourcompany.com" autocomplete="email" required />
<button class="btn btn-primary btn-lg" type="submit">Get started</button>
</form>
<span class="cta-fine"><svg viewBox="0 0 24 24" width="14" height="14" fill="none"><rect x="5" y="11" width="14" height="9" rx="2" stroke="currentColor" stroke-width="2"/><path d="M8 11V8a4 4 0 018 0v3" stroke="currentColor" stroke-width="2"/></svg> Bank-grade encryption · No credit check to apply</span>
</div>
</section>
</main>
<!-- ============ FOOTER ============ -->
<footer class="site-footer">
<div class="wrap foot-grid">
<div class="foot-brand">
<a class="brand" href="#top">
<span class="brand-mark" aria-hidden="true"><svg viewBox="0 0 24 24" width="20" height="20" fill="none"><path d="M4 19h16M6 16V9m4 7V6m4 10v-5m4 5V8" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg></span>
<span class="brand-name">Ledgerline</span>
</a>
<p>Modern banking for businesses that move fast. Member FDIC. Fictional product for demonstration.</p>
<span class="foot-badge"><svg viewBox="0 0 24 24" width="14" height="14" fill="none"><path d="M12 3l7 3v5c0 4.5-3 7.7-7 9-4-1.3-7-4.5-7-9V6l7-3z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg> SOC 2 Type II · PCI DSS</span>
</div>
<div class="foot-col">
<h4>Product</h4>
<a href="#features">Accounts</a>
<a href="#features">Expense cards</a>
<a href="#features">Invoicing</a>
<a href="#integrations">Integrations</a>
</div>
<div class="foot-col">
<h4>Company</h4>
<a href="#story">Customers</a>
<a href="#pricing">Pricing</a>
<a href="#cta">Careers</a>
<a href="#cta">Press</a>
</div>
<div class="foot-col">
<h4>Legal</h4>
<a href="#cta">Privacy</a>
<a href="#cta">Terms</a>
<a href="#cta">Disclosures</a>
<a href="#cta">Security</a>
</div>
</div>
<div class="wrap foot-base">
<span>© 2026 Ledgerline, Inc. — illustrative demo, not a real bank.</span>
<span class="foot-social">
<a href="#top" aria-label="Status">All systems operational <i class="status-dot"></i></a>
</span>
</div>
</footer>
<div class="toast-wrap" id="toastWrap" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Business Banking Landing
A clean, professional landing page for Ledgerline, a fictional business bank aimed at SMB finance teams. The slate-and-green palette signals trust while staying productive and B2B. The hero leads with a value proposition and a tilted dashboard mockup: an operating-account balance that counts up to $284,610.42 with tabular figures, a gradient sparkline, three live transaction rows with green credits and ink debits, a “Verified” pill, and a navy expense card showing a masked number (•••• 4242). A logo strip and trust badges (FDIC, SOC 2, no monthly fees) reinforce credibility.
Below, a six-card feature grid covers multi-user access, invoicing and bill pay, expense cards, integrations, security and real-time insight, followed by an integrations section with an interactive chip cloud (QuickBooks, Xero, Stripe, Gusto and more). The pricing block offers Starter, Growth and Enterprise tiers sized by team seats, with a monthly/yearly toggle that swaps the figures and confirms the 20% annual saving via a toast. A case-study quote sits beside four count-up stat cards.
Every interaction is self-contained vanilla JavaScript: an IntersectionObserver drives scroll-reveal and triggers the balance and stat count-ups, the pricing toggle rewrites amounts and billing labels, the CTA validates a work email before showing a personalised confirmation toast, and a hamburger menu collapses the nav under 520px. The layout reflows from three columns to two to one, hides the floating card on small screens, and respects prefers-reduced-motion.
Illustrative UI only — not real banking software or financial advice.