Pages Medium
Banking — Traditional Bank Landing
A trust-forward marketing landing page for a traditional retail bank, styled in navy, gold, and ivory with serif headlines over a clean sans body. It pairs a confidence-building hero and account snapshot with product cards, an honest daily rates table, a branch and ATM locator teaser, security assurances, member testimonials, and a quick open-account form — all responsive down to mobile with smooth scrolling and tasteful micro-interactions.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root{
--navy:#0e1b3a; --navy-2:#16264d; --navy-3:#1d3160;
--ink:#0e1726; --ink-2:#3a4660; --muted:#697089;
--gold:#c8a24b; --gold-d:#a9863a; --gold-soft:#f3e9d2;
--ivory:#fbf8f1; --bg:#f6f3ec; --surface:#ffffff;
--line:rgba(14,27,58,0.12); --line-2:rgba(14,27,58,0.2);
--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(14,27,58,.06), 0 1px 3px rgba(14,27,58,.08);
--sh-2:0 6px 18px rgba(14,27,58,.08), 0 2px 6px rgba(14,27,58,.06);
--sh-3:0 24px 60px rgba(14,27,58,.18), 0 8px 24px rgba(14,27,58,.12);
--serif:"Source Serif 4", Georgia, "Times New Roman", serif;
--sans:"Inter", system-ui, -apple-system, sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
margin:0; background:var(--bg); color:var(--ink);
font-family:var(--sans); line-height:1.5; font-size:16px;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block;}
a{color:inherit; text-decoration:none;}
.num,.snap__balance,.pcard__rate,.tx__a,.branch__dist{font-variant-numeric:tabular-nums;}
.wrap{width:min(1140px,92vw); margin-inline:auto;}
.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;}
.skip-link{position:absolute;left:12px;top:-50px;background:var(--navy);color:#fff;padding:8px 14px;border-radius:var(--r-sm);z-index:200;transition:top .2s;}
.skip-link:focus{top:12px;}
:focus-visible{outline:2.5px solid var(--gold); outline-offset:2px; border-radius:4px;}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
font-family:var(--sans); font-weight:600; font-size:.94rem; line-height:1;
padding:11px 18px; border-radius:var(--r-sm); border:1px solid transparent;
cursor:pointer; transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s; white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn--gold{background:var(--gold);color:var(--navy);box-shadow:0 2px 0 var(--gold-d);}
.btn--gold:hover{background:#d4af5d;box-shadow:0 4px 14px rgba(200,162,75,.45),0 2px 0 var(--gold-d);}
.btn--navy{background:var(--navy);color:#fff;}
.btn--navy:hover{background:var(--navy-2);box-shadow:var(--sh-2);}
.btn--ghost{background:transparent;color:var(--navy);border-color:transparent;}
.btn--ghost:hover{background:rgba(14,27,58,.06);}
.btn--outline{background:transparent;color:var(--navy);border-color:var(--line-2);}
.btn--outline:hover{border-color:var(--navy);background:#fff;}
.btn--lg{padding:14px 24px;font-size:1rem;}
.btn--block{width:100%;}
/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:100;background:rgba(251,248,241,.86);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .25s, background .25s;}
.topbar.is-scrolled{box-shadow:var(--sh-1);background:rgba(251,248,241,.96);}
.topbar__inner{display:flex;align-items:center;gap:24px;height:68px;}
.brand{display:flex;align-items:center;gap:10px;color:var(--navy);font-weight:800;}
.brand__mark{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:linear-gradient(160deg,var(--navy),var(--navy-3));color:var(--gold);box-shadow:var(--sh-1);}
.brand__text{font-family:var(--serif);font-size:1.32rem;letter-spacing:-.01em;}
.brand__amp{color:var(--gold-d);}
.brand--light{color:#fff;}.brand--light .brand__amp{color:var(--gold);}
.nav{display:flex;gap:4px;margin-left:auto;}
.nav a{padding:9px 13px;border-radius:var(--r-sm);font-weight:500;font-size:.94rem;color:var(--ink-2);transition:color .15s, background .15s;}
.nav a:hover{color:var(--navy);background:rgba(14,27,58,.05);}
.topbar__actions{display:flex;align-items:center;gap:10px;}
.hamburger{display:none;flex-direction:column;gap:4px;width:42px;height:38px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:pointer;align-items:center;justify-content:center;}
.hamburger span{width:18px;height:2px;background:var(--navy);border-radius:2px;transition:transform .25s, opacity .2s;}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
/* ---------- hero ---------- */
.hero{position:relative;background:
radial-gradient(900px 400px at 88% -8%, rgba(200,162,75,.16), transparent 60%),
linear-gradient(180deg,var(--ivory), var(--bg));
padding:64px 0 0; overflow:hidden;}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;padding-bottom:48px;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-d);margin:0 0 16px;}
.eyebrow__dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(200,162,75,.22);}
.hero__title{font-family:var(--serif);font-weight:700;font-size:clamp(2.3rem,4.6vw,3.7rem);line-height:1.07;letter-spacing:-.02em;color:var(--navy);margin:0 0 18px;}
.hero__title em{font-style:italic;color:var(--gold-d);}
.hero__lead{font-size:1.12rem;color:var(--ink-2);max-width:46ch;margin:0 0 28px;}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px;}
.hero__assure{list-style:none;display:flex;flex-wrap:wrap;gap:18px 24px;padding:0;margin:0;}
.hero__assure li{display:flex;align-items:center;gap:7px;font-size:.9rem;font-weight:500;color:var(--ink-2);}
.hero__assure svg{color:var(--ok);}
/* hero card */
.hero__card{justify-self:end;width:100%;max-width:380px;}
.snap{position:relative;background:linear-gradient(165deg,#fff,#fbfaf6);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-3);}
.snap::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg);padding:1px;background:linear-gradient(160deg,rgba(200,162,75,.5),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
.snap__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.snap__label{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:0 0 3px;font-weight:600;}
.snap__name{font-family:var(--serif);font-weight:600;font-size:1.04rem;margin:0;color:var(--navy);}
.snap__verified{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;color:var(--ok);background:rgba(31,157,98,.1);padding:4px 8px;border-radius:999px;}
.snap__balance{font-family:var(--serif);font-weight:700;font-size:2.1rem;color:var(--navy);margin:18px 0 4px;letter-spacing:-.01em;}
.snap__card{font-size:.9rem;color:var(--ink-2);letter-spacing:.04em;margin:0 0 16px;display:flex;align-items:center;gap:8px;}
.snap__card span{margin-left:auto;font-size:.7rem;font-weight:700;letter-spacing:.08em;color:#fff;background:var(--navy);padding:3px 8px;border-radius:5px;}
.snap__tx{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:11px;}
.snap__tx li{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.9rem;}
.tx__m{color:var(--ink-2);display:flex;align-items:center;gap:8px;}
.tx__a{font-weight:600;}
.credit{color:var(--credit);}
.debit{color:var(--debit);}
.pill{font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border-radius:999px;font-style:normal;}
.pill--pending{background:rgba(217,152,43,.16);color:var(--warn);}
/* ticker */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--navy);overflow:hidden;}
.ticker__track{display:flex;gap:0;white-space:nowrap;animation:ticker 26s linear infinite;}
.ticker__track span{display:inline-flex;align-items:center;gap:8px;color:var(--gold-soft);font-size:.84rem;font-weight:500;font-variant-numeric:tabular-nums;padding:11px 26px;position:relative;}
.ticker__track span::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;height:14px;background:rgba(255,255,255,.14);}
@keyframes ticker{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.ticker__track{animation:none;}}
/* ---------- logos strip ---------- */
.logos{background:var(--ivory);border-bottom:1px solid var(--line);}
.logos__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;flex-wrap:wrap;}
.logos__inner>p{margin:0;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;}
.logos ul{list-style:none;display:flex;gap:38px;margin:0;padding:0;flex-wrap:wrap;}
.logos li{font-family:var(--serif);font-weight:700;font-size:1.45rem;color:var(--navy);display:flex;flex-direction:column;line-height:1.1;}
.logos small{font-family:var(--sans);font-weight:500;font-size:.74rem;color:var(--muted);letter-spacing:.02em;}
/* ---------- generic section ---------- */
.section{padding:74px 0;}
.section--alt{background:var(--ivory);}
.section--navy{background:linear-gradient(180deg,var(--navy),var(--navy-2));color:#fff;}
.section__head{max-width:640px;margin:0 0 40px;}
.section__head--light .section__sub{color:rgba(255,255,255,.72);}
.kicker{font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-d);margin:0 0 10px;}
.kicker--light{color:var(--gold);}
.section__title{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.12;letter-spacing:-.01em;color:var(--navy);margin:0 0 12px;}
.section--navy .section__title{color:#fff;}
.section__sub{font-size:1.05rem;color:var(--ink-2);margin:0;}
/* ---------- product cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.pcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:24px 22px;box-shadow:var(--sh-1);transition:transform .18s ease, box-shadow .25s ease, border-color .2s;display:flex;flex-direction:column;}
.pcard:hover,.pcard:focus-within{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--line-2);}
.pcard--feature{border-color:var(--gold);box-shadow:0 14px 36px rgba(200,162,75,.22);}
.pcard__tag{position:absolute;top:-11px;left:22px;background:var(--gold);color:var(--navy);font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;box-shadow:var(--sh-1);}
.pcard__icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;}
.pcard__icon[data-tone="blue"]{background:#e9eefb;color:#2a55cc;}
.pcard__icon[data-tone="gold"]{background:var(--gold-soft);color:var(--gold-d);}
.pcard__icon[data-tone="teal"]{background:#dff5f1;color:#0c8d80;}
.pcard h3{font-family:var(--serif);font-size:1.22rem;font-weight:700;color:var(--navy);margin:0 0 8px;}
.pcard p{font-size:.92rem;color:var(--ink-2);margin:0 0 14px;flex:1;}
.pcard__rate{font-size:.9rem;color:var(--muted)!important;margin:0 0 14px!important;flex:0!important;}
.pcard__rate strong{font-family:var(--serif);font-size:1.5rem;color:var(--navy);display:inline-block;margin-right:5px;}
.pcard__link{font-weight:600;font-size:.92rem;color:var(--gold-d);transition:gap .15s,color .15s;}
.pcard__link:hover{color:var(--navy);}
/* ---------- rates ---------- */
.rates__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start;}
.rates__updated{font-size:.84rem;color:var(--muted);margin:18px 0 22px;}
.rates__tablewrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-2);overflow:hidden;}
table.rates{width:100%;border-collapse:collapse;font-size:.94rem;}
.rates thead th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;padding:14px 18px;background:var(--ivory);border-bottom:1px solid var(--line);}
.rates th.num,.rates td.num{text-align:right;}
.rates tbody th{text-align:left;font-weight:600;color:var(--navy);}
.rates tbody td,.rates tbody th{padding:14px 18px;border-bottom:1px solid var(--line);}
.rates tbody tr:last-child td,.rates tbody tr:last-child th{border-bottom:0;}
.rates tbody tr{transition:background .15s;}
.rates tbody tr:hover{background:#faf7ef;}
.rates td.num{font-weight:700;color:var(--navy);}
.trend{font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;display:inline-flex;padding:3px 8px;border-radius:999px;}
.trend--up{color:var(--ok);background:rgba(31,157,98,.1);}
.trend--down{color:var(--danger);background:rgba(212,73,62,.1);}
.trend--flat{color:var(--muted);background:rgba(105,112,137,.12);}
/* ---------- locator ---------- */
.locator{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.locator__map{position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(160deg,#eef1f8,#e3e8f3);border:1px solid var(--line);box-shadow:var(--sh-2);}
.locator__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(14,27,58,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(14,27,58,.06) 1px,transparent 1px);background-size:36px 36px;}
.locator__map::after{content:"";position:absolute;left:-10%;top:55%;width:130%;height:48px;background:rgba(200,162,75,.28);transform:rotate(-9deg);filter:blur(1px);}
.pin{position:absolute;width:20px;height:20px;border:0;padding:0;border-radius:50% 50% 50% 0;background:var(--navy);transform:rotate(-45deg);cursor:pointer;box-shadow:0 4px 10px rgba(14,27,58,.4);transition:transform .18s;}
.pin::after{content:"";position:absolute;inset:5px;background:#fff;border-radius:50%;}
.pin:hover,.pin.is-active{transform:rotate(-45deg) scale(1.25);background:var(--gold-d);}
.pin--a{left:34%;top:38%;}.pin--b{left:62%;top:30%;}.pin--c{left:54%;top:62%;}
.locator__you{position:absolute;left:24%;top:64%;font-size:.72rem;font-weight:700;color:var(--navy);background:#fff;padding:3px 9px;border-radius:999px;box-shadow:var(--sh-1);}
.locator__you::before{content:"";display:inline-block;width:8px;height:8px;background:var(--accent,#3b6ef6);background:#2a55cc;border-radius:50%;margin-right:5px;box-shadow:0 0 0 4px rgba(42,85,204,.2);vertical-align:middle;}
.locator__search{display:flex;gap:10px;margin:6px 0 20px;}
.locator__search input{flex:1;min-width:0;padding:13px 16px;border:1px solid var(--line-2);border-radius:var(--r-sm);font-family:var(--sans);font-size:1rem;background:#fff;transition:border-color .15s,box-shadow .15s;}
.locator__search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,162,75,.2);}
.branches{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.branch{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .12s;}
.branch:hover,.branch.is-active{border-color:var(--gold);box-shadow:var(--sh-1);transform:translateX(3px);}
.branch strong{font-family:var(--serif);font-size:1rem;color:var(--navy);display:block;}
.branch span{font-size:.84rem;color:var(--muted);}
.branch__dist{font-weight:700;color:var(--gold-d);font-size:.9rem;white-space:nowrap;}
/* ---------- trust cards ---------- */
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.tcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:24px 22px;transition:background .2s,transform .18s,border-color .2s;}
.tcard:hover{background:rgba(255,255,255,.08);transform:translateY(-4px);border-color:rgba(200,162,75,.4);}
.tcard__icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(200,162,75,.16);color:var(--gold);margin-bottom:16px;}
.tcard h3{font-family:var(--serif);font-size:1.14rem;font-weight:600;color:#fff;margin:0 0 8px;}
.tcard p{font-size:.9rem;color:rgba(255,255,255,.72);margin:0;}
/* ---------- testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.quote{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:26px 24px;box-shadow:var(--sh-1);transition:box-shadow .2s,transform .18s;}
.quote:hover{box-shadow:var(--sh-2);transform:translateY(-3px);}
.quote__stars{color:var(--gold);letter-spacing:2px;font-size:1rem;margin-bottom:12px;}
.quote blockquote{margin:0 0 18px;font-family:var(--serif);font-size:1.06rem;line-height:1.55;color:var(--ink);font-weight:500;}
.quote figcaption{display:flex;align-items:center;gap:12px;}
.quote__av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,var(--navy),var(--navy-3));color:var(--gold);font-weight:700;font-size:.86rem;letter-spacing:.02em;}
.quote figcaption strong{display:block;color:var(--navy);font-size:.95rem;}
.quote figcaption span{font-size:.82rem;color:var(--muted);}
/* ---------- CTA ---------- */
.cta{background:
radial-gradient(700px 300px at 12% 120%, rgba(200,162,75,.18), transparent 60%),
linear-gradient(180deg,var(--ivory),var(--bg));padding:72px 0;}
.cta__inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:44px;box-shadow:var(--sh-2);}
.cta__copy h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1.12;color:var(--navy);margin:0 0 14px;}
.cta__copy h2 em{font-style:italic;color:var(--gold-d);}
.cta__copy p{font-size:1.05rem;color:var(--ink-2);margin:0;}
.cta__form{display:grid;gap:14px;}
.field{display:grid;gap:6px;}
.field label{font-size:.82rem;font-weight:600;color:var(--ink-2);}
.field input,.field select{padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);font-family:var(--sans);font-size:1rem;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s;}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,162,75,.2);}
.field input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px rgba(212,73,62,.16);}
.cta__fine{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--muted);margin:4px 0 0;}
.cta__fine svg{color:var(--ok);}
/* ---------- footer ---------- */
.footer{background:var(--navy);color:rgba(255,255,255,.72);padding:54px 0 26px;}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer__brand p{font-size:.88rem;margin:14px 0 0;line-height:1.6;}
.footer__col h4{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px;font-weight:700;}
.footer__col a{display:block;font-size:.9rem;padding:5px 0;color:rgba(255,255,255,.72);transition:color .15s;}
.footer__col a:hover{color:var(--gold);}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:22px;font-size:.82rem;flex-wrap:wrap;}
.footer__legal{color:rgba(255,255,255,.6);}
/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(24px);background:var(--navy);color:#fff;padding:13px 20px;border-radius:var(--r-md);box-shadow:var(--sh-3);font-size:.92rem;font-weight:500;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:300;display:flex;align-items:center;gap:9px;max-width:90vw;}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none;}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0);}
/* ---------- responsive ---------- */
@media (max-width:980px){
.hero__grid{grid-template-columns:1fr;gap:34px;}
.hero__card{justify-self:start;max-width:420px;}
.cards{grid-template-columns:repeat(2,1fr);}
.trust__grid{grid-template-columns:repeat(2,1fr);}
.quotes{grid-template-columns:1fr;}
.rates__grid,.locator,.cta__inner{grid-template-columns:1fr;gap:30px;}
.footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
.nav,.topbar__actions .btn--ghost{display:none;}
.hamburger{display:flex;}
.nav.is-open{display:flex;flex-direction:column;position:absolute;top:68px;left:0;right:0;background:var(--ivory);border-bottom:1px solid var(--line);padding:10px 4vw 16px;gap:2px;box-shadow:var(--sh-2);}
.nav.is-open a{padding:13px;font-size:1rem;}
}
@media (max-width:520px){
body{font-size:15px;}
.section{padding:52px 0;}
.hero{padding-top:40px;}
.cards,.trust__grid,.footer__grid{grid-template-columns:1fr;}
.logos__inner{justify-content:flex-start;}
.logos ul{gap:22px 28px;}
.cta__inner{padding:28px 22px;}
.locator__search{flex-direction:column;}
.locator__search .btn{width:100%;}
.footer__bottom{flex-direction:column;align-items:flex-start;}
.snap__balance{font-size:1.85rem;}
}(function () {
"use strict";
/* ---------- toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("is-show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("is-show");
}, 3200);
}
/* ---------- sticky topbar shadow ---------- */
var topbar = document.querySelector(".topbar");
function onScroll() {
if (!topbar) return;
topbar.classList.toggle("is-scrolled", window.scrollY > 8);
}
window.addEventListener("scroll", onScroll, { passive: true });
onScroll();
/* ---------- mobile nav ---------- */
var hamburger = document.getElementById("hamburger");
var nav = document.getElementById("primary-nav");
if (hamburger && nav) {
hamburger.addEventListener("click", function () {
var open = nav.classList.toggle("is-open");
hamburger.setAttribute("aria-expanded", open ? "true" : "false");
});
}
/* ---------- smooth scroll + close mobile nav ---------- */
document.querySelectorAll("[data-scroll]").forEach(function (link) {
link.addEventListener("click", function (e) {
var id = link.getAttribute("href");
if (!id || id.charAt(0) !== "#") return;
var target = document.querySelector(id);
if (!target) return;
e.preventDefault();
target.scrollIntoView({ behavior: "smooth", block: "start" });
if (nav && nav.classList.contains("is-open")) {
nav.classList.remove("is-open");
hamburger.setAttribute("aria-expanded", "false");
}
});
});
/* ---------- sign in (demo) ---------- */
var signin = document.getElementById("signinBtn");
if (signin) {
signin.addEventListener("click", function (e) {
e.preventDefault();
toast("Secure sign-in is a demo — no real login.");
});
}
/* ---------- live balance shimmer (subtle realism) ---------- */
var snapBalance = document.getElementById("snapBalance");
var base = 48920.16;
function renderBalance(v) {
if (!snapBalance) return;
snapBalance.textContent = "$" + v.toLocaleString("en-US", {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
});
}
setInterval(function () {
base += (Math.random() - 0.4) * 3.5;
renderBalance(base);
}, 4200);
/* ---------- rates "last updated" date ---------- */
var ratesDate = document.getElementById("ratesDate");
if (ratesDate) {
ratesDate.textContent = new Date().toLocaleDateString("en-US", {
month: "long",
day: "numeric",
year: "numeric",
});
}
/* ---------- branch <-> pin linking ---------- */
var pins = Array.prototype.slice.call(document.querySelectorAll(".pin"));
var branches = Array.prototype.slice.call(document.querySelectorAll(".branch"));
function activate(idx) {
pins.forEach(function (p) {
p.classList.toggle("is-active", p.dataset.branch === String(idx));
});
branches.forEach(function (b) {
b.classList.toggle("is-active", b.dataset.branch === String(idx));
});
}
pins.forEach(function (p) {
p.addEventListener("mouseenter", function () { activate(p.dataset.branch); });
p.addEventListener("focus", function () { activate(p.dataset.branch); });
p.addEventListener("click", function () {
activate(p.dataset.branch);
var b = branches.filter(function (x) { return x.dataset.branch === p.dataset.branch; })[0];
if (b) toast("Selected " + b.querySelector("strong").textContent + " branch.");
});
});
branches.forEach(function (b) {
b.addEventListener("mouseenter", function () { activate(b.dataset.branch); });
b.addEventListener("click", function () {
activate(b.dataset.branch);
toast("Directions to " + b.querySelector("strong").textContent + " (demo).");
});
});
/* ---------- locator search ---------- */
var locatorForm = document.getElementById("locatorForm");
if (locatorForm) {
locatorForm.addEventListener("submit", function (e) {
e.preventDefault();
var zip = document.getElementById("zip").value.trim();
if (!/^\d{5}$/.test(zip)) {
toast("Please enter a valid 5-digit ZIP code.");
return;
}
toast("Found 3 branches near " + zip + " — sorted by distance.");
});
}
/* ---------- open account form ---------- */
var openForm = document.getElementById("openForm");
if (openForm) {
openForm.addEventListener("submit", function (e) {
e.preventDefault();
var name = document.getElementById("fullname");
var email = document.getElementById("email");
var product = document.getElementById("product");
var emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value.trim());
var nameOk = name.value.trim().length >= 2;
name.setAttribute("aria-invalid", nameOk ? "false" : "true");
email.setAttribute("aria-invalid", emailOk ? "false" : "true");
if (!nameOk) { toast("Please enter your full name."); name.focus(); return; }
if (!emailOk) { toast("Please enter a valid email address."); email.focus(); return; }
toast("Welcome, " + name.value.trim().split(" ")[0] + "! Your " + product.value + " application is queued.");
openForm.reset();
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Heritage Trust Bank — Banking built to last</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&family=Source+Serif+4:opsz,[email protected],500;8..60,600;8..60,700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#main">Skip to content</a>
<header class="topbar" id="top">
<div class="wrap topbar__inner">
<a class="brand" href="#top" aria-label="Heritage Trust Bank home">
<span class="brand__mark" aria-hidden="true">
<svg viewBox="0 0 32 32" width="28" height="28">
<path d="M16 2 4 8v3h24V8L16 2Z" fill="currentColor"/>
<rect x="6" y="13" width="3.5" height="11" fill="currentColor"/>
<rect x="14.25" y="13" width="3.5" height="11" fill="currentColor"/>
<rect x="22.5" y="13" width="3.5" height="11" fill="currentColor"/>
<rect x="3" y="25" width="26" height="4" rx="1" fill="currentColor"/>
</svg>
</span>
<span class="brand__text">Heritage<span class="brand__amp">Trust</span></span>
</a>
<nav class="nav" id="primary-nav" aria-label="Primary">
<a href="#products" data-scroll>Personal</a>
<a href="#rates" data-scroll>Rates</a>
<a href="#locator" data-scroll>Branches</a>
<a href="#trust" data-scroll>Security</a>
<a href="#stories" data-scroll>Stories</a>
</nav>
<div class="topbar__actions">
<a class="btn btn--ghost" href="#" id="signinBtn">
<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><path d="M12 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm0 2c-4 0-8 2-8 5v2h16v-2c0-3-4-5-8-5Z" fill="currentColor"/></svg>
Sign in
</a>
<a class="btn btn--gold" href="#open" data-scroll>Open account</a>
<button class="hamburger" id="hamburger" aria-expanded="false" aria-controls="primary-nav" aria-label="Toggle menu">
<span></span><span></span><span></span>
</button>
</div>
</div>
</header>
<main id="main">
<!-- HERO -->
<section class="hero">
<div class="wrap hero__grid">
<div class="hero__copy">
<p class="eyebrow"><span class="eyebrow__dot" aria-hidden="true"></span>Established 1924 · Member FDIC</p>
<h1 class="hero__title">Banking built to <em>last</em> a lifetime.</h1>
<p class="hero__lead">For a hundred years, families have trusted Heritage to safeguard what matters — savings, homes, and the futures built on them. Modern tools, time-honored stewardship.</p>
<div class="hero__cta">
<a class="btn btn--gold btn--lg" href="#open" data-scroll>Open an account</a>
<a class="btn btn--outline btn--lg" href="#rates" data-scroll>Compare rates</a>
</div>
<ul class="hero__assure">
<li><svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Zm-1 13-3-3 1.4-1.4L11 12.2l4.6-4.6L17 9l-6 6Z" fill="currentColor"/></svg> FDIC insured</li>
<li><svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M17 9V7a5 5 0 0 0-10 0v2H5v12h14V9h-2Zm-8 0V7a3 3 0 0 1 6 0v2H9Z" fill="currentColor"/></svg> 256-bit encryption</li>
<li><svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm0 5a1.5 1.5 0 1 1-1.5 1.5A1.5 1.5 0 0 1 12 7Zm2 11h-4v-1.5h1.25V12H10v-1.5h2.75v6H14Z" fill="currentColor"/></svg> 24/7 live support</li>
</ul>
</div>
<aside class="hero__card" aria-label="Account snapshot preview">
<div class="snap">
<div class="snap__head">
<div>
<p class="snap__label">Heritage Premier Checking</p>
<p class="snap__name">Eleanor R. Whitfield</p>
</div>
<span class="snap__verified" title="Identity verified">
<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Zm-1 13-3-3 1.4-1.4L11 12.2l4.6-4.6L17 9l-6 6Z" fill="currentColor"/></svg>
Verified
</span>
</div>
<p class="snap__balance" id="snapBalance">$48,920.16</p>
<p class="snap__card">•••• •••• •••• 7042 <span>Visa</span></p>
<ul class="snap__tx">
<li><span class="tx__m">Maplewood Grocers</span><span class="tx__a debit">−$84.20</span></li>
<li><span class="tx__m">Payroll · Whitfield Co.</span><span class="tx__a credit">+$3,250.00</span></li>
<li><span class="tx__m">City Utilities <em class="pill pill--pending">pending</em></span><span class="tx__a debit">−$142.67</span></li>
</ul>
</div>
</aside>
</div>
<div class="ticker" aria-hidden="true">
<div class="ticker__track">
<span>Savings APY 4.35%</span><span>30-yr Fixed 6.49%</span><span>Auto Loan 5.24%</span><span>CD 12-mo 4.60%</span><span>HELOC 7.10%</span><span>Money Market 4.15%</span>
<span>Savings APY 4.35%</span><span>30-yr Fixed 6.49%</span><span>Auto Loan 5.24%</span><span>CD 12-mo 4.60%</span><span>HELOC 7.10%</span><span>Money Market 4.15%</span>
</div>
</div>
</section>
<!-- TRUST STRIP -->
<section class="logos" aria-label="Recognition">
<div class="wrap logos__inner">
<p>Trusted across generations</p>
<ul>
<li>A+ <small>BBB Rating</small></li>
<li>4.8★ <small>120k reviews</small></li>
<li>$28B <small>assets held</small></li>
<li>1.2M <small>members</small></li>
</ul>
</div>
</section>
<!-- PRODUCTS -->
<section class="section" id="products">
<div class="wrap">
<header class="section__head">
<p class="kicker">Personal banking</p>
<h2 class="section__title">Accounts for every chapter of life</h2>
<p class="section__sub">From your first paycheck to your forever home, choose the foundation that fits.</p>
</header>
<div class="cards">
<article class="pcard" tabindex="0">
<div class="pcard__icon" data-tone="blue"><svg viewBox="0 0 24 24" width="22" height="22"><path d="M3 7h18a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1Zm1 4v5h16v-5Zm0-3v1h16V8Z" fill="currentColor"/></svg></div>
<h3>Premier Checking</h3>
<p>Everyday banking with no monthly fee, ATM rebates nationwide, and overdraft grace.</p>
<p class="pcard__rate"><strong>$0</strong> monthly fee</p>
<a class="pcard__link" href="#open" data-scroll>Open checking →</a>
</article>
<article class="pcard pcard--feature" tabindex="0">
<span class="pcard__tag">Most popular</span>
<div class="pcard__icon" data-tone="gold"><svg viewBox="0 0 24 24" width="22" height="22"><path d="M12 2 2 8l10 6 8-4.8V16h2V8L12 2Zm0 12L5 9.8 12 5.7 19 9.8 12 14Zm-6 2v3.2c0 .5.3 1 .8 1.2L12 22l5.2-1.6c.5-.2.8-.7.8-1.2V16l-6 3.6L6 16Z" fill="currentColor"/></svg></div>
<h3>High-Yield Savings</h3>
<p>Grow your balance with one of the strongest rates in the country, compounded daily.</p>
<p class="pcard__rate"><strong>4.35%</strong> APY</p>
<a class="pcard__link" href="#open" data-scroll>Start saving →</a>
</article>
<article class="pcard" tabindex="0">
<div class="pcard__icon" data-tone="blue"><svg viewBox="0 0 24 24" width="22" height="22"><path d="M12 3 3 10h2v9h5v-6h4v6h5v-9h2L12 3Z" fill="currentColor"/></svg></div>
<h3>Home Mortgages</h3>
<p>Fixed and adjustable rates with a dedicated loan officer from application to closing.</p>
<p class="pcard__rate"><strong>6.49%</strong> 30-yr fixed</p>
<a class="pcard__link" href="#rates" data-scroll>See mortgage rates →</a>
</article>
<article class="pcard" tabindex="0">
<div class="pcard__icon" data-tone="teal"><svg viewBox="0 0 24 24" width="22" height="22"><path d="M5 11 6.5 6h11L19 11h2v8h-2v2h-2v-2H7v2H5v-2H3v-8h2Zm2.2-3L6.4 11h11.2L16.8 8H7.2ZM7 13a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 7 13Zm10 0a1.5 1.5 0 1 0 1.5 1.5A1.5 1.5 0 0 0 17 13Z" fill="currentColor"/></svg></div>
<h3>Personal & Auto Loans</h3>
<p>Competitive fixed-rate financing for vehicles, renovations, and life's milestones.</p>
<p class="pcard__rate"><strong>5.24%</strong> APR from</p>
<a class="pcard__link" href="#open" data-scroll>Apply now →</a>
</article>
</div>
</div>
</section>
<!-- RATES TABLE -->
<section class="section section--alt" id="rates">
<div class="wrap rates__grid">
<div class="rates__intro">
<p class="kicker">Today's rates</p>
<h2 class="section__title">Honest rates, clearly stated</h2>
<p class="section__sub">No teaser gimmicks. The rate you see is the rate you earn — updated daily.</p>
<p class="rates__updated">Last updated <span id="ratesDate">today</span> · APY/APR for illustration</p>
<a class="btn btn--navy" href="#open" data-scroll>Lock today's rate</a>
</div>
<div class="rates__tablewrap" role="region" aria-label="Rate table">
<table class="rates">
<thead>
<tr><th scope="col">Product</th><th scope="col">Term</th><th scope="col" class="num">Rate</th><th scope="col">Trend</th></tr>
</thead>
<tbody>
<tr><th scope="row">High-Yield Savings</th><td>Variable</td><td class="num">4.35% APY</td><td><span class="trend trend--up">▲ 0.05</span></td></tr>
<tr><th scope="row">Money Market</th><td>Variable</td><td class="num">4.15% APY</td><td><span class="trend trend--flat">— 0.00</span></td></tr>
<tr><th scope="row">Certificate of Deposit</th><td>12 months</td><td class="num">4.60% APY</td><td><span class="trend trend--up">▲ 0.10</span></td></tr>
<tr><th scope="row">Certificate of Deposit</th><td>36 months</td><td class="num">4.25% APY</td><td><span class="trend trend--down">▼ 0.05</span></td></tr>
<tr><th scope="row">30-Year Fixed Mortgage</th><td>Fixed</td><td class="num">6.49% APR</td><td><span class="trend trend--down">▼ 0.08</span></td></tr>
<tr><th scope="row">Auto Loan</th><td>Up to 72 mo</td><td class="num">5.24% APR</td><td><span class="trend trend--flat">— 0.00</span></td></tr>
<tr><th scope="row">HELOC</th><td>Variable</td><td class="num">7.10% APR</td><td><span class="trend trend--up">▲ 0.02</span></td></tr>
</tbody>
</table>
</div>
</div>
</section>
<!-- LOCATOR TEASER -->
<section class="section" id="locator">
<div class="wrap locator">
<div class="locator__map" aria-hidden="true">
<div class="locator__grid"></div>
<button class="pin pin--a" data-branch="0" aria-label="Downtown Heritage branch"></button>
<button class="pin pin--b" data-branch="1" aria-label="Riverside branch"></button>
<button class="pin pin--c" data-branch="2" aria-label="Oakfield ATM"></button>
<span class="locator__you">You</span>
</div>
<div class="locator__panel">
<p class="kicker">Branches & ATMs</p>
<h2 class="section__title">A real banker, just around the corner</h2>
<p class="section__sub">2,400+ fee-free ATMs and 310 branches with Saturday hours. Find the nearest in seconds.</p>
<form class="locator__search" id="locatorForm">
<label class="sr-only" for="zip">ZIP code</label>
<input id="zip" name="zip" inputmode="numeric" maxlength="5" placeholder="Enter ZIP code" autocomplete="postal-code" />
<button class="btn btn--gold" type="submit">Find branches</button>
</form>
<ul class="branches" id="branchList">
<li class="branch" data-branch="0">
<div><strong>Downtown Heritage</strong><span>118 Founders Ave · Open until 6:00 PM</span></div>
<span class="branch__dist">0.6 mi</span>
</li>
<li class="branch" data-branch="1">
<div><strong>Riverside</strong><span>52 Mill Crossing · Open until 5:00 PM</span></div>
<span class="branch__dist">2.1 mi</span>
</li>
<li class="branch" data-branch="2">
<div><strong>Oakfield ATM Lobby</strong><span>900 Cedar St · 24-hour access</span></div>
<span class="branch__dist">3.4 mi</span>
</li>
</ul>
</div>
</div>
</section>
<!-- TRUST / SECURITY -->
<section class="section section--navy" id="trust">
<div class="wrap">
<header class="section__head section__head--light">
<p class="kicker kicker--light">Your security</p>
<h2 class="section__title">Guarded like it's our own</h2>
<p class="section__sub">Because for a century, that's exactly how we've treated it.</p>
</header>
<div class="trust__grid">
<div class="tcard">
<div class="tcard__icon"><svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3Z" fill="currentColor"/></svg></div>
<h3>FDIC insured</h3><p>Every deposit protected up to $250,000 per account, fully backed by the U.S. government.</p>
</div>
<div class="tcard">
<div class="tcard__icon"><svg viewBox="0 0 24 24" width="24" height="24"><path d="M17 9V7a5 5 0 0 0-10 0v2H5v12h14V9h-2Zm-8 0V7a3 3 0 0 1 6 0v2H9Zm3 4a2 2 0 0 1 1 3.7V19h-2v-2.3A2 2 0 0 1 12 13Z" fill="currentColor"/></svg></div>
<h3>Two-factor by default</h3><p>Biometric and one-time codes guard every sign-in. We'll never ask for them by phone.</p>
</div>
<div class="tcard">
<div class="tcard__icon"><svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 1 3 5v6c0 5.6 3.8 10.7 9 12 5.2-1.3 9-6.4 9-12V5l-9-4Zm3.5 7.5L11 13l-2.5-2.5L7 12l4 4 6-6-1.5-1.5Z" fill="currentColor"/></svg></div>
<h3>$0 fraud liability</h3><p>Spot something unfamiliar? Freeze your card instantly in-app and we cover the rest.</p>
</div>
<div class="tcard">
<div class="tcard__icon"><svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm1 5h-2v6l5 3 1-1.7-4-2.3Z" fill="currentColor"/></svg></div>
<h3>24/7 monitoring</h3><p>Real-time alerts on every transaction, with a human on the line whenever you need one.</p>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS -->
<section class="section" id="stories">
<div class="wrap">
<header class="section__head">
<p class="kicker">Member stories</p>
<h2 class="section__title">A hundred years of handshakes</h2>
</header>
<div class="quotes">
<figure class="quote">
<div class="quote__stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>Three generations of my family have banked here. They financed my first car and, twenty years later, my daughter's first home.</blockquote>
<figcaption><span class="quote__av" aria-hidden="true">MT</span><div><strong>Marcus Thorne</strong><span>Member since 1998</span></div></figcaption>
</figure>
<figure class="quote">
<div class="quote__stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>I called at 11pm worried about a charge. A real person answered, froze the card, and had a new one to me in two days.</blockquote>
<figcaption><span class="quote__av" aria-hidden="true">PA</span><div><strong>Priya Anand</strong><span>Premier Checking</span></div></figcaption>
</figure>
<figure class="quote">
<div class="quote__stars" aria-label="5 out of 5">★★★★★</div>
<blockquote>The savings rate is genuinely the best I found, and the app is simple enough for my father to use. Rare combination.</blockquote>
<figcaption><span class="quote__av" aria-hidden="true">DK</span><div><strong>Daniel Okafor</strong><span>High-Yield Savings</span></div></figcaption>
</figure>
</div>
</div>
</section>
<!-- CTA / OPEN -->
<section class="cta" id="open">
<div class="wrap cta__inner">
<div class="cta__copy">
<h2>Open your account in <em>under 10 minutes</em></h2>
<p>No paperwork, no branch visit required. Join 1.2 million members who bank with confidence.</p>
</div>
<form class="cta__form" id="openForm" novalidate>
<div class="field">
<label for="fullname">Full name</label>
<input id="fullname" name="fullname" placeholder="Eleanor Whitfield" autocomplete="name" required />
</div>
<div class="field">
<label for="email">Email address</label>
<input id="email" name="email" type="email" placeholder="[email protected]" autocomplete="email" required />
</div>
<div class="field">
<label for="product">I'd like to open</label>
<select id="product" name="product">
<option>Premier Checking</option>
<option>High-Yield Savings</option>
<option>Certificate of Deposit</option>
<option>Mortgage pre-approval</option>
</select>
</div>
<button class="btn btn--gold btn--lg btn--block" type="submit">Get started</button>
<p class="cta__fine"><svg viewBox="0 0 24 24" width="13" height="13" aria-hidden="true"><path d="M17 9V7a5 5 0 0 0-10 0v2H5v12h14V9h-2Zm-8 0V7a3 3 0 0 1 6 0v2H9Z" fill="currentColor"/></svg> Encrypted & never shared. Member FDIC.</p>
</form>
</div>
</section>
</main>
<footer class="footer">
<div class="wrap footer__grid">
<div class="footer__brand">
<a class="brand brand--light" href="#top">
<span class="brand__mark" aria-hidden="true">
<svg viewBox="0 0 32 32" width="26" height="26"><path d="M16 2 4 8v3h24V8L16 2Z" fill="currentColor"/><rect x="6" y="13" width="3.5" height="11" fill="currentColor"/><rect x="14.25" y="13" width="3.5" height="11" fill="currentColor"/><rect x="22.5" y="13" width="3.5" height="11" fill="currentColor"/><rect x="3" y="25" width="26" height="4" rx="1" fill="currentColor"/></svg>
</span>
<span class="brand__text">Heritage<span class="brand__amp">Trust</span></span>
</a>
<p>Serving families since 1924. <br/>Member FDIC · Equal Housing Lender.</p>
</div>
<nav class="footer__col" aria-label="Personal">
<h4>Personal</h4>
<a href="#products" data-scroll>Checking</a><a href="#products" data-scroll>Savings</a><a href="#rates" data-scroll>Mortgages</a><a href="#products" data-scroll>Loans</a>
</nav>
<nav class="footer__col" aria-label="Company">
<h4>Company</h4>
<a href="#trust" data-scroll>Security</a><a href="#stories" data-scroll>Stories</a><a href="#locator" data-scroll>Branches</a><a href="#">Careers</a>
</nav>
<nav class="footer__col" aria-label="Support">
<h4>Support</h4>
<a href="#">Contact</a><a href="#">Help center</a><a href="#">1-800-HERITAGE</a><a href="#">Accessibility</a>
</nav>
</div>
<div class="wrap footer__bottom">
<p>© 1924–2026 Heritage Trust Bank. Illustrative demo — not a real financial institution.</p>
<p class="footer__legal">Privacy · Terms · Disclosures</p>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Traditional Bank Landing
A full marketing landing page for the fictional Heritage Trust Bank, leaning into the visual language of an established retail institution: a navy and gold palette over warm ivory, serif display headlines paired with an Inter sans body, and tabular-figure money throughout. The hero opens with an “Established 1924 · Member FDIC” eyebrow, a confidence-building headline, and a layered account-snapshot card showing a masked card number, a verified badge, and a live transaction list with credit/debit coloring and a pending status pill.
Below the fold the page flows through a recognition strip, four product cards (checking, high-yield savings, mortgages, loans) with one highlighted as “Most popular,” an honest daily-rates table with up/down/flat trend pills, and a branch-and-ATM locator teaser featuring an interactive faux map. The navy security section, member testimonials, a streamlined open-account CTA, and a multi-column footer round out the page.
Everything runs on vanilla JavaScript: a sticky header that gains a shadow on scroll, a mobile hamburger nav, smooth-scroll anchors, a subtly fluctuating live balance, hovering map pins linked two-way to the branch list, ZIP-code validation, and an inline-validated account form — each backed by a small toast() helper. It is fully responsive with a dedicated layout below 520px.
Illustrative UI only — not real banking software or financial advice.