Pages Hard
Banking — Neobank Landing
A complete marketing landing page for a fictional neobank built with vanilla HTML, CSS and JavaScript. Features a tilting phone mockup with a live account screen, animated stat counters, a flippable virtual card, a tabbed in-app showcase, social proof, switchable monthly and yearly pricing tiers, a validated signup form with toasts, mobile navigation and scroll reveal. Energetic white and electric violet aesthetic, fully responsive down to 360px.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
/* Neobank palette — white + electric violet + soft lilac */
--violet: #7c5cff;
--violet-d: #5b3ce0;
--violet-l: #9b82ff;
--lilac: #f1ecff;
--lilac-2: #e6deff;
--teal: #0fb5a6;
--amber: #f0a93b;
--green: #1f9d62;
--ink: #131127;
--ink-2: #3a3856;
--muted: #6b6884;
--bg: #ffffff;
--surface: #ffffff;
--surface-2: #faf9ff;
--line: rgba(19, 17, 39, 0.10);
--line-2: rgba(19, 17, 39, 0.16);
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px;
--r-xl: 34px;
--sh-sm: 0 2px 8px rgba(36, 18, 99, 0.06);
--sh-md: 0 14px 38px -16px rgba(64, 36, 160, 0.30);
--sh-lg: 0 40px 90px -40px rgba(64, 36, 160, 0.45);
--grad: linear-gradient(120deg, #7c5cff 0%, #9b82ff 50%, #5b3ce0 100%);
--maxw: 1140px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: "Inter", system-ui, -apple-system, sans-serif;
color: var(--ink);
background: var(--bg);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-variant-numeric: tabular-nums;
overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.08; letter-spacing: -0.02em; font-weight: 800; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
.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: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }
.grad {
background: var(--grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.grad--light { background: linear-gradient(120deg,#fff,#e6deff); -webkit-background-clip: text; background-clip: text; }
/* ---------- buttons ---------- */
.btn {
--pad: 11px 20px;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font: inherit; font-weight: 700; font-size: 15px;
padding: var(--pad); border-radius: 999px; border: 1px solid transparent;
cursor: pointer; transition: transform .15s, box-shadow .2s, background .2s, border-color .2s;
white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn--lg { --pad: 15px 28px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--grad); color: #fff; box-shadow: 0 10px 24px -10px rgba(124,92,255,.8); }
.btn--primary:hover { box-shadow: 0 16px 32px -10px rgba(124,92,255,.9); transform: translateY(-2px); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--violet); color: var(--violet-d); background: var(--lilac); }
.pill {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
background: var(--lilac); color: var(--violet-d); border: 1px solid var(--lilac-2);
}
.pill--accent { background: rgba(124,92,255,.12); }
/* ---------- nav ---------- */
.nav {
position: sticky; top: 0; z-index: 50;
backdrop-filter: saturate(180%) blur(14px);
background: rgba(255,255,255,.72);
border-bottom: 1px solid transparent;
transition: border-color .25s, box-shadow .25s, background .25s;
}
.nav.is-stuck { border-color: var(--line); box-shadow: var(--sh-sm); background: rgba(255,255,255,.9); }
.nav__inner { display: flex; align-items: center; gap: 18px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 21px; letter-spacing: -.03em; }
.brand__mark {
display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
background: var(--grad); color: #fff; font-size: 15px;
box-shadow: 0 6px 16px -6px rgba(124,92,255,.9);
}
.nav__links { display: flex; gap: 26px; margin-inline: auto; }
.nav__links a { font-weight: 600; font-size: 15px; color: var(--ink-2); position: relative; }
.nav__links a:hover { color: var(--violet-d); }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--violet); transition: width .2s; }
.nav__links a:hover::after { width: 100%; }
.nav__cta { display: flex; gap: 10px; }
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile { display: flex; flex-direction: column; gap: 4px; padding: 12px 22px 22px; border-bottom: 1px solid var(--line); background: #fff; }
.mobile a { padding: 12px 6px; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.mobile__cta { margin-top: 12px; border-bottom: 0; color: #fff; }
/* ---------- hero ---------- */
.hero { position: relative; padding-top: 56px; overflow: hidden; }
.hero::before {
content: ""; position: absolute; inset: -200px 0 auto; height: 720px; z-index: -1;
background:
radial-gradient(640px 420px at 78% 8%, rgba(124,92,255,.22), transparent 60%),
radial-gradient(560px 380px at 8% 30%, rgba(155,130,255,.18), transparent 60%);
}
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero__copy h1 { font-size: clamp(40px, 6vw, 68px); margin: 18px 0; font-weight: 800; }
.lead { font-size: clamp(16px, 2vw, 19px); color: var(--ink-2); max-width: 30em; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 22px; }
.hero__trust { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; padding: 0; margin: 0; font-size: 14px; color: var(--muted); font-weight: 600; }
.hero__trust span { color: var(--ink); margin-right: 5px; }
/* phone */
.hero__phone { position: relative; display: grid; place-items: center; min-height: 560px; }
.phone {
position: relative; width: 300px; aspect-ratio: 300 / 620; z-index: 2;
background: linear-gradient(160deg, #1c1830, #0f0d1d);
border-radius: 46px; padding: 12px;
box-shadow: var(--sh-lg), inset 0 0 0 2px rgba(255,255,255,.06);
border: 1px solid rgba(0,0,0,.4);
}
.phone--sm { width: 280px; }
.phone__notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 110px; height: 24px; background: #0f0d1d; border-radius: 0 0 16px 16px; z-index: 3; }
.phone__screen {
height: 100%; border-radius: 36px; overflow: hidden;
background: linear-gradient(180deg, #f6f3ff, #ffffff 40%);
padding: 36px 14px 14px; display: flex; flex-direction: column; gap: 12px;
}
.phone__glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(124,92,255,.35), transparent 65%); filter: blur(8px); z-index: 1; }
.appbar { display: flex; align-items: center; justify-content: space-between; }
.appbar__hi { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.appbar__name { font-size: 17px; }
.appbar__avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 12px; font-weight: 700; }
.balcard {
background: var(--grad); color: #fff; border-radius: 18px; padding: 16px;
box-shadow: 0 16px 30px -16px rgba(124,92,255,.9); position: relative; overflow: hidden;
}
.balcard::after { content: ""; position: absolute; right: -30px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.14); }
.balcard__label { font-size: 12px; opacity: .85; font-weight: 600; }
.balcard__amt { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 10px; font-variant-numeric: tabular-nums; }
.balcard--mini .balcard__amt { font-size: 24px; margin-bottom: 0; }
.balcard__row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 11px; font-weight: 700; background: rgba(255,255,255,.18); padding: 4px 9px; border-radius: 999px; }
.chip--up { background: rgba(255,255,255,.26); }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.quick--3 { grid-template-columns: repeat(3, 1fr); }
.quick__btn {
display: flex; flex-direction: column; align-items: center; gap: 4px; font: inherit;
font-size: 17px; font-weight: 700; color: var(--violet-d);
background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 10px 4px; cursor: pointer;
transition: transform .12s, background .15s, border-color .15s;
}
.quick__btn small { font-size: 11px; color: var(--ink-2); font-weight: 600; }
.quick__btn:hover { background: var(--lilac); border-color: var(--lilac-2); transform: translateY(-2px); }
.txwrap { flex: 1; min-height: 0; }
.txwrap__head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.txwrap__head a { color: var(--violet-d); }
.tx { list-style: none; margin: 0; padding: 0; }
.txrow { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--line); }
.txrow:first-child { border-top: 0; }
.txrow__ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 14px; background: var(--lilac); }
.txrow__ic[data-c="teal"] { background: rgba(15,181,166,.14); }
.txrow__ic[data-c="green"] { background: rgba(31,157,98,.14); }
.txrow__ic[data-c="amber"] { background: rgba(240,169,59,.16); }
.txrow__name { font-size: 13px; font-weight: 600; display: flex; flex-direction: column; }
.txrow__name small { font-size: 11px; color: var(--muted); font-weight: 500; }
.txrow__amt { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.credit { color: var(--green); }
.debit { color: var(--ink); }
/* float cards */
.floatcard {
position: absolute; z-index: 4; background: #fff; border: 1px solid var(--line);
border-radius: 14px; padding: 10px 13px; box-shadow: var(--sh-md);
display: flex; flex-direction: column; animation: float 5s ease-in-out infinite;
}
.floatcard__t { font-size: 13px; font-weight: 700; }
.floatcard__s { font-size: 11px; color: var(--muted); }
.floatcard--a { top: 10%; left: -8%; }
.floatcard--b { bottom: 12%; right: -10%; animation-delay: -2.5s; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
/* logos */
.logos { display: flex; align-items: center; gap: 26px; padding-block: 46px 12px; flex-wrap: wrap; }
.logos > span { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.logos__row { display: flex; gap: 30px; flex-wrap: wrap; }
.logos__row em { font-style: normal; font-weight: 800; letter-spacing: -.02em; font-size: 17px; color: var(--ink); opacity: .42; transition: opacity .2s; }
.logos__row em:hover { opacity: .9; }
/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-block: 30px 10px; }
.stat { text-align: center; padding: 22px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.stat strong { display: block; font-size: clamp(28px, 4vw, 40px); font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat span { font-size: 13px; color: var(--muted); font-weight: 600; }
/* ---------- sections ---------- */
.section { padding-block: 84px; }
.section--alt { background: var(--surface-2); border-block: 1px solid var(--line); }
.shead { text-align: center; max-width: 640px; margin: 0 auto 46px; display: grid; gap: 14px; justify-items: center; }
.shead h2 { font-size: clamp(28px, 4.4vw, 44px); }
.shead p { color: var(--ink-2); font-size: 17px; }
/* features grid */
.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fcard {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px;
display: flex; flex-direction: column; gap: 10px; transition: transform .2s, box-shadow .25s, border-color .2s;
}
.fcard:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--lilac-2); }
.fcard--wide { grid-column: span 2; }
.fcard h3 { font-size: 21px; }
.fcard p { color: var(--ink-2); font-size: 15px; }
.fcard__ic {
width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 24px;
background: var(--lilac); margin-bottom: 4px;
}
.fcard__ic[data-c="teal"] { background: rgba(15,181,166,.14); }
.fcard__ic[data-c="amber"] { background: rgba(240,169,59,.16); }
.fcard__ic[data-c="green"] { background: rgba(31,157,98,.14); }
/* card flip */
.cardflip { margin-top: 14px; perspective: 1000px; width: 100%; max-width: 320px; aspect-ratio: 1.6; cursor: pointer; outline: none; }
.cardflip:focus-visible { box-shadow: 0 0 0 3px rgba(124,92,255,.4); border-radius: var(--r-md); }
.cardflip.is-flipped .cardface--front { transform: rotateY(180deg); }
.cardflip.is-flipped .cardface--back { transform: rotateY(360deg); }
.cardface {
position: absolute; inset: 0; border-radius: var(--r-md); padding: 18px; color: #fff;
backface-visibility: hidden; transition: transform .6s cubic-bezier(.4,.2,.2,1);
display: flex; flex-direction: column; box-shadow: var(--sh-md);
}
.cardface--front { background: linear-gradient(135deg, #2a1f55, #7c5cff); transform: rotateY(0deg); }
.cardface--back { background: linear-gradient(135deg, #5b3ce0, #1c1830); transform: rotateY(180deg); }
.cardface__brand { font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.cardface__num { margin-top: auto; font-size: 18px; letter-spacing: .12em; font-weight: 600; font-variant-numeric: tabular-nums; }
.cardface__foot { display: flex; justify-content: space-between; font-size: 12px; margin-top: 10px; opacity: .9; }
.cardface__strip { height: 32px; background: rgba(0,0,0,.45); margin: 6px -18px 14px; }
.cardface__cvc { font-size: 14px; font-weight: 700; letter-spacing: .15em; }
.cardface__hint { margin-top: auto; font-size: 11px; opacity: .7; }
/* split list */
.splitlist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.splitlist li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.splitlist b { font-variant-numeric: tabular-nums; }
.av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; flex: none; }
.av--1 { background: #7c5cff; } .av--2 { background: #0fb5a6; } .av--3 { background: #f0a93b; }
.state { margin-left: auto; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.state--ok { background: rgba(31,157,98,.14); color: var(--green); }
.state--pend { background: rgba(240,169,59,.18); color: #b97a14; }
/* showcase */
.showcase { display: grid; grid-template-columns: 1fr .9fr; gap: 50px; align-items: center; }
.showcase__copy h2 { font-size: clamp(28px, 4.4vw, 46px); margin: 16px 0; }
.showcase__copy p { color: var(--ink-2); font-size: 17px; max-width: 26em; }
.tabs { display: inline-flex; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px; margin: 24px 0; }
.tab { font: inherit; font-weight: 700; font-size: 14px; color: var(--ink-2); border: 0; background: none; padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: .2s; }
.tab.is-active { background: var(--grad); color: #fff; box-shadow: 0 8px 18px -10px rgba(124,92,255,.9); }
.showcase__bul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; font-weight: 600; color: var(--ink-2); }
.showcase__bul li::first-letter { color: var(--violet); }
.showcase__phone { display: grid; place-items: center; }
.screen { display: none; flex-direction: column; gap: 14px; animation: screenIn .4s ease; }
.screen.is-active { display: flex; }
@keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bars { display: grid; gap: 12px; margin-top: 6px; }
.bars__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; font-size: 13px; font-weight: 600; }
.bars__row b { font-variant-numeric: tabular-nums; }
.bars__row i { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--lilac-2); position: relative; }
.bars__row i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 999px; background: var(--grad); }
.minicard { background: linear-gradient(135deg, #2a1f55, #7c5cff); color: #fff; border-radius: 16px; padding: 18px; aspect-ratio: 1.6; display: flex; flex-direction: column; box-shadow: var(--sh-md); }
.minicard__brand { font-weight: 800; }
.minicard__num { margin-top: auto; letter-spacing: .12em; font-weight: 600; }
.minicard__foot { display: flex; justify-content: space-between; font-size: 12px; margin-top: 8px; opacity: .9; }
.ring { position: relative; width: 140px; height: 140px; margin: 8px auto; display: grid; place-items: center; }
.ring svg { width: 140px; height: 140px; transform: rotate(-90deg); }
.ring__bg { fill: none; stroke: var(--lilac-2); stroke-width: 12; }
.ring__fg { fill: none; stroke: url(#g); stroke: var(--violet); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 94.7; }
.ring__lbl { position: absolute; text-align: center; }
.ring__lbl b { display: block; font-size: 24px; }
.ring__lbl small { font-size: 11px; color: var(--muted); }
.grow__note { text-align: center; font-size: 13px; color: var(--ink-2); font-weight: 600; }
/* quotes */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.quote { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px; transition: transform .2s, box-shadow .25s; }
.quote:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.quote__stars { color: var(--amber); letter-spacing: 3px; font-size: 15px; }
.quote blockquote { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.quote figcaption { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); font-weight: 600; margin-top: auto; }
/* pricing */
.billtoggle { display: inline-flex; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px; }
.billtoggle__btn { font: inherit; font-weight: 700; font-size: 14px; color: var(--ink-2); border: 0; background: none; padding: 9px 18px; border-radius: 999px; cursor: pointer; transition: .2s; }
.billtoggle__btn.is-active { background: var(--grad); color: #fff; }
.save { font-size: 11px; background: rgba(255,255,255,.25); padding: 2px 7px; border-radius: 999px; margin-left: 4px; }
.billtoggle__btn:not(.is-active) .save { background: rgba(31,157,98,.16); color: var(--green); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.plan { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; transition: transform .2s, box-shadow .25s; }
.plan:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.plan--pop { border: 2px solid var(--violet); box-shadow: var(--sh-md); }
.plan__badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--grad); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.plan h3 { font-size: 21px; }
.plan__price { display: flex; align-items: baseline; gap: 4px; }
.plan__price .amt { font-size: 38px; font-weight: 800; font-variant-numeric: tabular-nums; }
.plan__price small { color: var(--muted); font-weight: 600; }
.plan__tag { color: var(--ink-2); font-size: 14px; }
.plan ul { list-style: none; margin: 6px 0 18px; padding: 0; display: grid; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink-2); flex: 1; }
.plan ul li::first-letter { color: var(--violet); font-weight: 800; }
/* CTA */
.cta { position: relative; padding-block: 90px; overflow: hidden; background: radial-gradient(140% 120% at 50% -10%, #5b3ce0, #2a1f55 60%, #15122a); color: #fff; }
.cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 320px at 80% 110%, rgba(124,92,255,.5), transparent 60%); }
.cta__inner { position: relative; text-align: center; max-width: 640px; margin: 0 auto; display: grid; gap: 18px; justify-items: center; }
.cta h2 { font-size: clamp(30px, 5vw, 50px); }
.cta p { color: rgba(255,255,255,.82); font-size: 18px; }
.cta__form { display: flex; gap: 10px; width: 100%; max-width: 440px; flex-wrap: wrap; }
.cta__form input { flex: 1; min-width: 200px; font: inherit; font-size: 16px; padding: 15px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; }
.cta__form input::placeholder { color: rgba(255,255,255,.6); }
.cta__form input:focus { outline: none; border-color: #fff; background: rgba(255,255,255,.16); }
.cta__form input.invalid { border-color: #ff9a8f; }
.cta__note { color: rgba(255,255,255,.7); font-size: 13px; font-weight: 600; }
/* footer */
.foot { background: #0f0d1d; color: #d9d6ec; padding-block: 56px 28px; }
.foot__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 30px; }
.foot__brand .brand { color: #fff; margin-bottom: 12px; }
.foot__brand p { font-size: 14px; color: #9b97b8; max-width: 28em; }
.foot__stores { display: flex; gap: 10px; margin-top: 16px; }
.store { font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); transition: .2s; }
.store:hover { background: rgba(255,255,255,.08); border-color: var(--violet-l); }
.foot__col h4 { font-size: 14px; color: #fff; margin-bottom: 14px; }
.foot__col a { display: block; font-size: 14px; color: #9b97b8; padding: 5px 0; transition: color .2s; }
.foot__col a:hover { color: #fff; }
.foot__bar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; color: #807ca0; }
.foot__safe { color: #b7b3d4; }
/* toast */
.toast {
position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 140%);
background: #15122a; color: #fff; padding: 13px 20px; border-radius: 14px;
box-shadow: var(--sh-lg); font-weight: 600; font-size: 14px; z-index: 100;
transition: transform .35s cubic-bezier(.2,.8,.2,1); max-width: 88vw;
}
.toast.show { transform: translate(-50%, 0); }
/* reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s, transform .6s; }
.reveal.in { opacity: 1; transform: none; }
/* ---------- responsive ---------- */
@media (max-width: 940px) {
.hero__grid { grid-template-columns: 1fr; }
.hero__phone { order: -1; min-height: 0; margin-bottom: 18px; }
.showcase { grid-template-columns: 1fr; gap: 30px; }
.fcard--wide { grid-column: span 3; }
.fgrid, .quotes, .plans { grid-template-columns: 1fr 1fr; }
.foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
.nav__links, .nav__cta { display: none; }
.nav__burger { display: flex; }
}
@media (max-width: 520px) {
.wrap { padding-inline: 16px; }
.section { padding-block: 60px; }
.stats { grid-template-columns: 1fr 1fr; }
.fgrid, .quotes, .plans { grid-template-columns: 1fr; }
.fcard--wide { grid-column: span 1; }
.foot__grid { grid-template-columns: 1fr; gap: 22px; }
.hero__copy h1 { font-size: 38px; }
.floatcard--a { left: -2%; } .floatcard--b { right: -2%; }
.btn--lg { --pad: 14px 22px; }
.quotes { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .001ms !important; transition-duration: .05ms !important; }
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; }
}(function () {
"use strict";
var prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
/* ---------- toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () { toastEl.classList.remove("show"); }, 2600);
}
/* ---------- sticky nav shadow ---------- */
var nav = document.getElementById("nav");
function onScroll() {
if (!nav) return;
nav.classList.toggle("is-stuck", window.scrollY > 8);
}
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
/* ---------- mobile menu ---------- */
var burger = document.getElementById("burger");
var menu = document.getElementById("mobileMenu");
if (burger && menu) {
burger.addEventListener("click", function () {
var open = menu.hasAttribute("hidden");
if (open) { menu.removeAttribute("hidden"); } else { menu.setAttribute("hidden", ""); }
burger.setAttribute("aria-expanded", String(open));
});
menu.querySelectorAll("a").forEach(function (a) {
a.addEventListener("click", function () {
menu.setAttribute("hidden", "");
burger.setAttribute("aria-expanded", "false");
});
});
}
/* ---------- scroll reveal ---------- */
var reveals = Array.prototype.slice.call(document.querySelectorAll(".reveal"));
if (prefersReduced || !("IntersectionObserver" in window)) {
reveals.forEach(function (el) { el.classList.add("in"); });
} else {
var io = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
});
}, { threshold: 0.14, rootMargin: "0px 0px -40px 0px" });
reveals.forEach(function (el) { io.observe(el); });
}
/* ---------- animated counters ---------- */
function fmt(n, dec) {
return n.toLocaleString("en-US", { minimumFractionDigits: dec, maximumFractionDigits: dec });
}
function runCounter(el) {
var to = parseFloat(el.getAttribute("data-to")) || 0;
var dec = parseInt(el.getAttribute("data-dec") || "0", 10);
var prefix = el.getAttribute("data-prefix") || "";
var suffix = el.getAttribute("data-suffix") || "";
var target = el.querySelector("strong") || el;
if (prefersReduced) { target.textContent = prefix + fmt(to, dec) + suffix; return; }
var dur = 1500, start = performance.now();
function tick(now) {
var p = Math.min((now - start) / dur, 1);
var eased = 1 - Math.pow(1 - p, 3);
target.textContent = prefix + fmt(to * eased, dec) + suffix;
if (p < 1) requestAnimationFrame(tick);
else target.textContent = prefix + fmt(to, dec) + suffix;
}
requestAnimationFrame(tick);
}
var counters = Array.prototype.slice.call(document.querySelectorAll("[data-counter]"));
if (!("IntersectionObserver" in window)) {
counters.forEach(runCounter);
} else {
var cio = new IntersectionObserver(function (entries) {
entries.forEach(function (e) {
if (e.isIntersecting) { runCounter(e.target); cio.unobserve(e.target); }
});
}, { threshold: 0.5 });
counters.forEach(function (el) { cio.observe(el); });
}
/* ---------- card flip ---------- */
var cardflip = document.getElementById("cardflip");
if (cardflip) {
var flip = function () { cardflip.classList.toggle("is-flipped"); };
cardflip.addEventListener("click", flip);
cardflip.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") { e.preventDefault(); flip(); }
});
}
/* ---------- showcase tabs ---------- */
var tabs = Array.prototype.slice.call(document.querySelectorAll(".tab"));
var screens = Array.prototype.slice.call(document.querySelectorAll(".screen"));
tabs.forEach(function (tab) {
tab.addEventListener("click", function () {
var name = tab.getAttribute("data-screen");
tabs.forEach(function (t) {
var on = t === tab;
t.classList.toggle("is-active", on);
t.setAttribute("aria-selected", String(on));
});
screens.forEach(function (s) {
s.classList.toggle("is-active", s.getAttribute("data-screen") === name);
});
});
});
/* ---------- pricing billing toggle ---------- */
var billBtns = Array.prototype.slice.call(document.querySelectorAll(".billtoggle__btn"));
var amts = Array.prototype.slice.call(document.querySelectorAll(".plan__price .amt"));
billBtns.forEach(function (btn) {
btn.addEventListener("click", function () {
var bill = btn.getAttribute("data-bill");
billBtns.forEach(function (b) {
var on = b === btn;
b.classList.toggle("is-active", on);
b.setAttribute("aria-pressed", String(on));
});
amts.forEach(function (a) {
var v = a.getAttribute(bill === "yearly" ? "data-y" : "data-m");
a.textContent = "€" + v;
});
toast(bill === "yearly" ? "Yearly pricing — save 20%" : "Switched to monthly billing");
});
});
/* ---------- quick action buttons (phone) ---------- */
document.querySelectorAll(".quick__btn").forEach(function (b) {
b.addEventListener("click", function () {
var label = (b.querySelector("small") || {}).textContent || "Action";
toast(label + " — demo only");
});
});
/* ---------- signup form ---------- */
var form = document.getElementById("signup");
if (form) {
var input = document.getElementById("email");
form.addEventListener("submit", function (e) {
e.preventDefault();
var val = (input.value || "").trim();
var ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
if (!ok) {
input.classList.add("invalid");
input.focus();
toast("Please enter a valid email address");
return;
}
input.classList.remove("invalid");
input.value = "";
toast("🎉 You're on the list — check your inbox!");
});
input.addEventListener("input", function () { input.classList.remove("invalid"); });
}
/* ---------- phone parallax tilt (desktop only) ---------- */
var phone = document.getElementById("phone");
if (phone && !prefersReduced && window.matchMedia("(pointer:fine)").matches) {
var host = phone.parentElement;
host.addEventListener("mousemove", function (ev) {
var r = host.getBoundingClientRect();
var x = (ev.clientX - r.left) / r.width - 0.5;
var y = (ev.clientY - r.top) / r.height - 0.5;
phone.style.transform = "rotateY(" + (x * 8) + "deg) rotateX(" + (-y * 8) + "deg)";
});
host.addEventListener("mouseleave", function () { phone.style.transform = ""; });
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Lumen — The neobank that moves like you</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="nav" id="nav">
<div class="wrap nav__inner">
<a class="brand" href="#top" aria-label="Lumen home">
<span class="brand__mark" aria-hidden="true">◈</span>
<span class="brand__name">Lumen</span>
</a>
<nav class="nav__links" aria-label="Primary">
<a href="#features">Features</a>
<a href="#showcase">App</a>
<a href="#proof">Reviews</a>
<a href="#pricing">Pricing</a>
</nav>
<div class="nav__cta">
<a class="btn btn--ghost" href="#login">Log in</a>
<a class="btn btn--primary" href="#get">Get the app</a>
</div>
<button class="nav__burger" id="burger" aria-label="Open menu" aria-expanded="false" aria-controls="mobileMenu">
<span></span><span></span><span></span>
</button>
</div>
<div class="mobile" id="mobileMenu" hidden>
<a href="#features">Features</a>
<a href="#showcase">App</a>
<a href="#proof">Reviews</a>
<a href="#pricing">Pricing</a>
<a class="btn btn--primary mobile__cta" href="#get">Get the app</a>
</div>
</header>
<main id="top">
<!-- ===== HERO ===== -->
<section class="hero">
<div class="wrap hero__grid">
<div class="hero__copy reveal">
<span class="pill pill--accent">⚡ Now with instant FX in 36 currencies</span>
<h1>Money that<br /><span class="grad">moves like you</span></h1>
<p class="lead">
Open an account in 3 minutes. Spend abroad with zero markup, split bills in a tap,
and watch your savings grow at <strong>4.10% AER</strong>. All from one beautiful app.
</p>
<div class="hero__actions">
<a class="btn btn--primary btn--lg" href="#get">Open free account</a>
<a class="btn btn--ghost btn--lg" href="#showcase">See how it works →</a>
</div>
<ul class="hero__trust">
<li><span aria-hidden="true">🔒</span> Funds safeguarded</li>
<li><span aria-hidden="true">★ 4.8</span> 210k ratings</li>
<li><span aria-hidden="true">🛡️</span> 2FA & freeze-in-tap</li>
</ul>
</div>
<!-- Phone mockup -->
<div class="hero__phone reveal">
<div class="phone" id="phone">
<div class="phone__notch" aria-hidden="true"></div>
<div class="phone__screen">
<div class="appbar">
<div>
<span class="appbar__hi">Good evening,</span>
<strong class="appbar__name">Mara</strong>
</div>
<span class="appbar__avatar" aria-hidden="true">MR</span>
</div>
<div class="balcard">
<span class="balcard__label">Total balance</span>
<span class="balcard__amt" data-counter data-to="12480.55" data-prefix="€">€0.00</span>
<div class="balcard__row">
<span class="chip">•••• 4242</span>
<span class="chip chip--up">▲ +€420 this week</span>
</div>
</div>
<div class="quick">
<button class="quick__btn" type="button">↑<small>Send</small></button>
<button class="quick__btn" type="button">↓<small>Add</small></button>
<button class="quick__btn" type="button">⇄<small>Exchange</small></button>
<button class="quick__btn" type="button">⊕<small>More</small></button>
</div>
<div class="txwrap">
<div class="txwrap__head">
<span>Today</span><a href="#showcase">See all</a>
</div>
<ul class="tx">
<li class="txrow">
<span class="txrow__ic" data-c="violet">☕</span>
<span class="txrow__name">Blue Bottle Coffee<small>Cleared · 18:42</small></span>
<span class="txrow__amt debit">−€4.80</span>
</li>
<li class="txrow">
<span class="txrow__ic" data-c="teal">⇄</span>
<span class="txrow__name">Exchange EUR → USD<small>$540 · rate 1.083</small></span>
<span class="txrow__amt debit">−€498.61</span>
</li>
<li class="txrow">
<span class="txrow__ic" data-c="green">↓</span>
<span class="txrow__name">Payroll · Northwind Co<small>Cleared · 09:01</small></span>
<span class="txrow__amt credit">+€2,950.00</span>
</li>
<li class="txrow">
<span class="txrow__ic" data-c="amber">🎬</span>
<span class="txrow__name">Nimbus Streaming<small>Pending</small></span>
<span class="txrow__amt debit">−€11.99</span>
</li>
</ul>
</div>
</div>
</div>
<div class="phone__glow" aria-hidden="true"></div>
<div class="floatcard floatcard--a" aria-hidden="true">
<span class="floatcard__t">Instant card frozen 🔒</span>
<span class="floatcard__s">Tap to unfreeze</span>
</div>
<div class="floatcard floatcard--b" aria-hidden="true">
<span class="floatcard__t">Saved €38.40</span>
<span class="floatcard__s">on FX this month</span>
</div>
</div>
</div>
<!-- logo strip -->
<div class="wrap logos reveal" aria-label="Featured in">
<span>As seen in</span>
<div class="logos__row">
<em>FINTECH TODAY</em><em>The Ledger</em><em>WIRED MONEY</em>
<em>TechCrush</em><em>Bankr</em>
</div>
</div>
</section>
<!-- ===== STATS ===== -->
<section class="stats wrap">
<div class="stat reveal" data-counter data-to="8.4" data-suffix="M" data-dec="1">
<strong>0</strong><span>Customers worldwide</span>
</div>
<div class="stat reveal" data-counter data-to="36" data-prefix="" data-suffix="">
<strong>0</strong><span>Currencies in-app</span>
</div>
<div class="stat reveal" data-counter data-to="0" data-prefix="€" data-suffix="">
<strong>0</strong><span>Foreign-fee markup</span>
</div>
<div class="stat reveal" data-counter data-to="3" data-suffix=" min">
<strong>0</strong><span>To open an account</span>
</div>
</section>
<!-- ===== FEATURES ===== -->
<section class="section" id="features">
<div class="wrap">
<header class="shead reveal">
<span class="pill">Everything in one app</span>
<h2>Built to make money <span class="grad">effortless</span></h2>
<p>From the instant virtual card you create in seconds to budgets that manage themselves.</p>
</header>
<div class="fgrid">
<article class="fcard fcard--wide reveal">
<div class="fcard__ic" data-c="violet" aria-hidden="true">💳</div>
<h3>Instant cards, your way</h3>
<p>Create virtual cards in a tap for subscriptions, travel or one-off buys. Freeze, set limits or burn a card — instantly, no calls.</p>
<div class="cardflip" id="cardflip" tabindex="0" role="button" aria-label="Flip card">
<div class="cardface cardface--front">
<span class="cardface__brand">Lumen</span>
<span class="cardface__num">•••• •••• •••• 4242</span>
<span class="cardface__foot"><span>MARA RIVERA</span><span>09/29</span></span>
</div>
<div class="cardface cardface--back">
<span class="cardface__strip"></span>
<span class="cardface__cvc">CVC 4 8 1</span>
<span class="cardface__hint">Tap / focus + Enter to flip</span>
</div>
</div>
</article>
<article class="fcard reveal">
<div class="fcard__ic" data-c="teal" aria-hidden="true">🌍</div>
<h3>Zero-markup FX</h3>
<p>Spend and exchange in 36 currencies at the real interbank rate. No hidden spread, no surprises abroad.</p>
</article>
<article class="fcard reveal">
<div class="fcard__ic" data-c="amber" aria-hidden="true">📊</div>
<h3>Budgets on autopilot</h3>
<p>Smart categories, weekly limits and gentle nudges before you overspend. See exactly where it went.</p>
</article>
<article class="fcard reveal">
<div class="fcard__ic" data-c="green" aria-hidden="true">🌱</div>
<h3>Vaults & round-ups</h3>
<p>Stash spare change automatically and earn 4.10% AER on savings, paid daily. Goals you'll actually hit.</p>
</article>
<article class="fcard fcard--wide reveal">
<div class="fcard__ic" data-c="violet" aria-hidden="true">🤝</div>
<h3>Split & share in a tap</h3>
<p>Group bills, shared tabs and instant requests. Settle dinner before the dessert arrives — friends pay you back in seconds.</p>
<ul class="splitlist">
<li><span class="av av--1">JD</span> Jamie owes you <b>€18.50</b><span class="state state--ok">Paid</span></li>
<li><span class="av av--2">LK</span> Lena owes you <b>€18.50</b><span class="state state--pend">Pending</span></li>
<li><span class="av av--3">SR</span> Sam owes you <b>€18.50</b><span class="state state--ok">Paid</span></li>
</ul>
</article>
</div>
</div>
</section>
<!-- ===== APP SHOWCASE ===== -->
<section class="section section--alt" id="showcase">
<div class="wrap showcase">
<div class="showcase__copy reveal">
<span class="pill">The app</span>
<h2>Tap a feature.<br /><span class="grad">Watch it work.</span></h2>
<p>The whole bank lives in your pocket — switch screens to explore the experience your customers love.</p>
<div class="tabs" role="tablist" aria-label="App screens">
<button class="tab is-active" role="tab" aria-selected="true" data-screen="home">Home</button>
<button class="tab" role="tab" aria-selected="false" data-screen="cards">Cards</button>
<button class="tab" role="tab" aria-selected="false" data-screen="grow">Grow</button>
</div>
<ul class="showcase__bul">
<li>✓ Real-time spend notifications</li>
<li>✓ Freeze & unfreeze in one tap</li>
<li>✓ Daily-paid interest on vaults</li>
</ul>
</div>
<div class="showcase__phone reveal">
<div class="phone phone--sm">
<div class="phone__notch" aria-hidden="true"></div>
<div class="phone__screen">
<!-- Screen: home -->
<div class="screen is-active" data-screen="home">
<div class="appbar"><strong class="appbar__name">Overview</strong><span class="appbar__avatar">MR</span></div>
<div class="balcard balcard--mini">
<span class="balcard__label">Available</span>
<span class="balcard__amt">€12,480.55</span>
</div>
<div class="bars">
<div class="bars__row"><span>Eating out</span><b>€212</b><i style="--w:64%"></i></div>
<div class="bars__row"><span>Transport</span><b>€88</b><i style="--w:30%"></i></div>
<div class="bars__row"><span>Shopping</span><b>€341</b><i style="--w:88%"></i></div>
</div>
</div>
<!-- Screen: cards -->
<div class="screen" data-screen="cards">
<div class="appbar"><strong class="appbar__name">My cards</strong><span class="appbar__avatar">MR</span></div>
<div class="minicard">
<span class="minicard__brand">Lumen Metal</span>
<span class="minicard__num">•••• 4242</span>
<span class="minicard__foot"><span>MARA RIVERA</span><span>VISA</span></span>
</div>
<div class="quick quick--3">
<button class="quick__btn" type="button">❄<small>Freeze</small></button>
<button class="quick__btn" type="button">∞<small>Limits</small></button>
<button class="quick__btn" type="button">＋<small>New card</small></button>
</div>
</div>
<!-- Screen: grow -->
<div class="screen" data-screen="grow">
<div class="appbar"><strong class="appbar__name">Grow</strong><span class="appbar__avatar">MR</span></div>
<div class="balcard balcard--mini">
<span class="balcard__label">Vault · Japan trip 🇯🇵</span>
<span class="balcard__amt">€2,140.00</span>
</div>
<div class="ring">
<svg viewBox="0 0 120 120" aria-hidden="true">
<circle class="ring__bg" cx="60" cy="60" r="52"></circle>
<circle class="ring__fg" cx="60" cy="60" r="52"></circle>
</svg>
<span class="ring__lbl"><b>71%</b><small>of €3,000 goal</small></span>
</div>
<p class="grow__note">Earning <b>4.10% AER</b> · paid daily</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===== SOCIAL PROOF ===== -->
<section class="section" id="proof">
<div class="wrap">
<header class="shead reveal">
<span class="pill">Loved by millions</span>
<h2>People don't just bank with us — <span class="grad">they switch for good</span></h2>
</header>
<div class="quotes">
<figure class="quote reveal">
<div class="quote__stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>Travelled across 4 countries and never thought about exchange rates once. The app just gets it.</blockquote>
<figcaption><span class="av av--1">PT</span> Priya T. · Lisbon</figcaption>
</figure>
<figure class="quote reveal">
<div class="quote__stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>Freezing my card the second I lost my wallet saved me. Did it from the train in one tap.</blockquote>
<figcaption><span class="av av--2">MO</span> Marc O. · Berlin</figcaption>
</figure>
<figure class="quote reveal">
<div class="quote__stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>Round-ups quietly built me €600 without noticing. My old bank never did anything like this.</blockquote>
<figcaption><span class="av av--3">SF</span> Sofia F. · Madrid</figcaption>
</figure>
</div>
</div>
</section>
<!-- ===== PRICING ===== -->
<section class="section section--alt" id="pricing">
<div class="wrap">
<header class="shead reveal">
<span class="pill">Plans</span>
<h2>Pick a plan that <span class="grad">grows with you</span></h2>
<div class="billtoggle" role="group" aria-label="Billing period">
<button class="billtoggle__btn is-active" data-bill="monthly" type="button" aria-pressed="true">Monthly</button>
<button class="billtoggle__btn" data-bill="yearly" type="button" aria-pressed="false">Yearly <span class="save">−20%</span></button>
</div>
</header>
<div class="plans">
<article class="plan reveal">
<h3>Standard</h3>
<p class="plan__price"><span class="amt" data-m="0" data-y="0">€0</span><small>/mo</small></p>
<p class="plan__tag">Everything to get started.</p>
<ul>
<li>✓ Free virtual card</li>
<li>✓ FX up to €1,000/mo</li>
<li>✓ Instant notifications</li>
<li>✓ 2 free ATM withdrawals</li>
</ul>
<a class="btn btn--ghost btn--block" href="#get">Get Standard</a>
</article>
<article class="plan plan--pop reveal">
<span class="plan__badge">Most popular</span>
<h3>Plus</h3>
<p class="plan__price"><span class="amt" data-m="7.99" data-y="6.39">€7.99</span><small>/mo</small></p>
<p class="plan__tag">For people who move.</p>
<ul>
<li>✓ Unlimited zero-markup FX</li>
<li>✓ Lumen Metal card</li>
<li>✓ 4.10% AER vaults</li>
<li>✓ Travel & phone cover</li>
<li>✓ Priority support</li>
</ul>
<a class="btn btn--primary btn--block" href="#get">Get Plus</a>
</article>
<article class="plan reveal">
<h3>Premium</h3>
<p class="plan__price"><span class="amt" data-m="14.99" data-y="11.99">€14.99</span><small>/mo</small></p>
<p class="plan__tag">The full Lumen experience.</p>
<ul>
<li>✓ Everything in Plus</li>
<li>✓ Higher cashback & limits</li>
<li>✓ Worldwide medical cover</li>
<li>✓ Concierge & lounge access</li>
</ul>
<a class="btn btn--ghost btn--block" href="#get">Get Premium</a>
</article>
</div>
</div>
</section>
<!-- ===== BIG CTA ===== -->
<section class="cta" id="get">
<div class="wrap cta__inner reveal">
<h2>Your new bank is<br /><span class="grad grad--light">three minutes away</span></h2>
<p>Join 8.4 million people. No paperwork, no branch, no catch.</p>
<form class="cta__form" id="signup" novalidate>
<label class="sr-only" for="email">Email address</label>
<input id="email" name="email" type="email" placeholder="[email protected]" autocomplete="email" required />
<button class="btn btn--primary btn--lg" type="submit">Get the app</button>
</form>
<small class="cta__note">🔒 Bank-grade encryption · funds safeguarded · cancel anytime</small>
</div>
</section>
</main>
<!-- ===== FOOTER ===== -->
<footer class="foot" id="login">
<div class="wrap foot__grid">
<div class="foot__brand">
<a class="brand" href="#top"><span class="brand__mark" aria-hidden="true">◈</span><span class="brand__name">Lumen</span></a>
<p>The neobank that moves like you. Spend smarter, save faster, travel further.</p>
<div class="foot__stores">
<a class="store" href="#get">App Store</a>
<a class="store" href="#get">Google Play</a>
</div>
</div>
<div class="foot__col"><h4>Product</h4><a href="#features">Cards</a><a href="#features">Exchange</a><a href="#pricing">Plans</a><a href="#showcase">Vaults</a></div>
<div class="foot__col"><h4>Company</h4><a href="#proof">About</a><a href="#proof">Careers</a><a href="#proof">Press</a><a href="#features">Blog</a></div>
<div class="foot__col"><h4>Legal</h4><a href="#pricing">Terms</a><a href="#pricing">Privacy</a><a href="#pricing">Cookies</a><a href="#get">Security</a></div>
</div>
<div class="wrap foot__bar">
<span>© 2026 Lumen Money (fictional). Illustrative demo.</span>
<span class="foot__safe">🔒 Funds safeguarded · 2FA enabled</span>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Neobank Landing
A full-width marketing landing page for Lumen, a fictional app-first neobank. The hero pairs bold typographic copy with a realistic phone mockup: a gradient balance card, quick-action row, and a live transaction feed with credits in green and debits in ink, masked card numbers and pending/cleared status. On desktop the phone tilts toward the cursor and two floating notification cards drift gently beside it. An electric-violet-on-white palette with soft lilac surfaces gives it a playful, energetic, Revolut/N26 feel.
Below the fold, animated counters tally customer and currency stats as they scroll into view, a feature grid highlights instant cards (with a flip-to-reveal CVC card you can trigger by tap or keyboard), zero-markup FX, autopilot budgets and savings vaults. The app showcase lets you switch between Home, Cards and Grow screens via tabs, and the pricing section toggles every tier between monthly and yearly prices with a live discount.
Everything is vanilla — no frameworks or build step. Interactions include a sticky blurred nav with a hamburger menu, IntersectionObserver scroll reveals and counters, a toast helper for feedback, and an email signup form with inline validation. All money uses tabular figures, controls are keyboard-usable, and the layout reflows cleanly down to 360px with a reduced-motion fallback.
Illustrative UI only — not real banking software or financial advice.