<div class="bit-container">
<nav class="navbar">
<div class="logo">
<svg fill="none" height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<rect fill="#000" height="20" width="8" x="2" y="2">
</rect>
<rect fill="#000" height="20" width="8" x="14" y="2">
</rect>
</svg>
Square Card
</div>
<ul class="nav-links">
<li>
<a class="active" href="#">
<span class="dot">
</span>
Home
</a>
</li>
<li>
<a href="#">
Learn
<svg fill="none" height="6" viewbox="0 0 10 6" width="10">
<path d="M1 1L5 5L9 1" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
</path>
</svg>
</a>
</li>
<li>
<a href="#">
Help
</a>
</li>
<li>
<a href="#">
Blog
</a>
</li>
<li>
<a href="#">
About
</a>
</li>
</ul>
<div class="nav-actions">
<button class="search-btn">
<svg fill="none" height="20" viewbox="0 0 24 24" width="20">
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
</button>
<button class="sign-in-btn">
Sign In
</button>
</div>
</nav>
<header class="hero">
<div class="hero-content">
<h1>
A Modern Bank Card
<br/>
For A Modern World
</h1>
<p>
This Modern Bank Card Embraces The Era Of Contactless Payments, Enabling Swift And Effortless Transactions With Just A Tap Or Wave. No More Fumbling For Cash Or Struggling With Outdated Payment Methods.
</p>
<button class="btn-primary">
Explore More
<svg fill="none" height="16" viewbox="0 0 24 24" width="16">
<path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
</button>
</div>
<div class="hero-visual">
<div class="card-wrapper">
<!-- Floating decorative squares -->
<div class="floating-square fs-1">
</div>
<div class="floating-square fs-2">
</div>
<div class="floating-square fs-3">
</div>
<div class="floating-square fs-4">
</div>
<div class="floating-square fs-5">
</div>
<svg class="bank-card" viewbox="0 0 320 480" xmlns="http://www.w3.org/2000/svg">
<defs>
<lineargradient id="card-grad" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#1f1f1f">
</stop>
<stop offset="100%" stop-color="#050505">
</stop>
</lineargradient>
</defs>
<!-- Top half with rounded corners -->
<path d="M 0 30 A 30 30 0 0 1 30 0 L 290 0 A 30 30 0 0 1 320 30 L 320 192 L 0 192 Z" fill="url(#card-grad)">
</path>
<!-- Chip Icon -->
<g fill="none" stroke="#666" stroke-width="1.2" transform="translate(260, 40)">
<rect height="24" rx="4" width="24">
</rect>
<path d="M 0 8 h 8 M 0 16 h 8 M 16 8 h 8 M 16 16 h 8 M 8 0 v 24 M 16 0 v 24">
</path>
</g>
<!-- Card Details -->
<text fill="#ccff00" font-size="14" font-weight="500" x="35" y="60">
Megan Lee
</text>
<text fill="#a0a0a0" font-family="monospace" font-size="14" x="35" y="90">
4044 2625 0828 1175
</text>
<text fill="#666" font-size="12" x="35" y="115">
10/28
</text>
<!-- The Pixel Grid will be generated here via JS -->
<g id="pixel-grid" transform="translate(0, 192)">
</g>
</svg>
</div>
</div>
</header>
<!-- Marquee Ribbon -->
<div class="marquee-container">
<div class="marquee-track">
<span>
Precision
</span>
<span style="font-weight:700">
MliT
</span>
<span style="font-style:italic">
ArsenalBio
</span>
<span style="letter-spacing:-0.05em">
Stretch
</span>
<span style="letter-spacing:-0.05em">
Stretch
</span>
<span>
Precision
</span>
<span style="font-weight:700">
MliT
</span>
<span style="font-style:italic">
ArsenalBio
</span>
<span style="letter-spacing:-0.05em">
Stretch
</span>
<span style="letter-spacing:-0.05em">
Stretch
</span>
<span>
Precision
</span>
<span style="font-weight:700">
MliT
</span>
<span style="font-style:italic">
ArsenalBio
</span>
<span style="letter-spacing:-0.05em">
Stretch
</span>
<span style="letter-spacing:-0.05em">
Stretch
</span>
</div>
</div>
<section class="features-section">
<div class="features-card">
<div class="features-top">
<h2>
We Tried To Provide You
<br/>
With All Global Banking
<br/>
Services
</h2>
<div class="features-desc">
<p>
We Made Every Effort To Ensure That You Have Access To A Comprehensive Range Of Global Banking Services. Our Aim Was To Provide You With A Seamless Banking Experience That Caters To Your Financial Needs Regardless Of Your Location.
</p>
<button class="btn-dark">
Explore More
<svg fill="none" height="14" viewbox="0 0 24 24" width="14">
<path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
</button>
</div>
</div>
<div class="features-grid">
<!-- Feature 1 -->
<div class="feature-item feature-bg-1">
<h3>
Simultaneous And Fast
<br/>
Operation
</h3>
<div class="feature-visual">
<svg class="anim-svg" viewbox="0 0 100 100">
<circle class="circle-outline c1" cx="35" cy="50" r="16">
</circle>
<circle class="circle-outline c2" cx="45" cy="50" r="16">
</circle>
<circle class="circle-outline c3" cx="55" cy="50" r="16">
</circle>
<circle class="circle-fill c4" cx="65" cy="50" r="16">
</circle>
</svg>
</div>
</div>
<!-- Feature 2 -->
<div class="feature-item">
<h3>
Can Be Connected To All
<br/>
Accounts
</h3>
<div class="feature-visual">
<svg class="anim-svg" viewbox="0 0 100 100">
<!-- Toggle 1 -->
<rect class="toggle-track" height="12" rx="6" width="50" x="25" y="30">
</rect>
<circle class="toggle-knob t1" cx="31" cy="36" r="4">
</circle>
<!-- Toggle 2 (Active) -->
<rect class="toggle-track active-track" height="12" rx="6" width="50" x="25" y="50">
</rect>
<circle class="toggle-knob t2 active-knob" cx="69" cy="56" r="4">
</circle>
<!-- Toggle 3 -->
<rect class="toggle-track" height="12" rx="6" width="50" x="25" y="70">
</rect>
<circle class="toggle-knob t3" cx="69" cy="76" r="4">
</circle>
</svg>
</div>
</div>
<!-- Feature 3 -->
<div class="feature-item">
<h3>
Strong And Advanced
<br/>
Encryption
</h3>
<div class="feature-visual">
<svg class="anim-svg" viewbox="0 0 100 100">
<circle class="ripple-circle r1" cx="50" cy="45" r="28">
</circle>
<circle class="ripple-circle r2" cx="50" cy="50" r="20">
</circle>
<circle class="ripple-circle r3" cx="50" cy="55" r="12">
</circle>
<circle class="ripple-core" cx="50" cy="65" r="5">
</circle>
</svg>
</div>
</div>
<!-- Feature 4 -->
<div class="feature-item">
<h3>
Comprehensive Electronic
<br/>
Banking Services
</h3>
<div class="feature-visual">
<svg class="anim-svg" viewbox="0 0 100 100">
<path class="node-lines" d="M50 85 V45 M25 45 H75 M25 45 V65 M75 45 V65 M50 45 V25">
</path>
<circle class="node-dot pulse-node" cx="50" cy="25" r="5">
</circle>
<circle class="node-dot n1" cx="25" cy="65" r="3">
</circle>
<circle class="node-dot n2" cx="75" cy="65" r="3">
</circle>
<!-- Small animated data packets -->
<circle class="packet p1" cx="50" cy="45" r="2">
</circle>
<circle class="packet p2" cx="25" cy="45" r="2">
</circle>
<circle class="packet p3" cx="75" cy="45" r="2">
</circle>
</svg>
</div>
</div>
</div>
</div>
</section>
<section class="services-section">
<div class="services-header">
<h2>
Up-To-Date And Fast Banking
<br/>
Services In One Place
</h2>
<div class="services-nav">
<button class="nav-btn prev-btn">
<svg fill="none" height="18" viewbox="0 0 24 24" width="18">
<path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
</button>
<button class="nav-btn next-btn">
<svg fill="none" height="18" viewbox="0 0 24 24" width="18">
<path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
</button>
</div>
</div>
<div class="services-carousel">
<div class="service-card">
<h3>
Types Of Business And
<br/>
Personal Accounts
</h3>
<p>
You Can Easily Open Any Type Of Account, Including Personal And Business, And Use All The Services You Need Easily And Online. We Will Update And Add Global Services For You.
</p>
<div class="service-visual">
<svg height="100%" viewbox="0 0 200 200" width="100%">
<defs>
<lineargradient id="purple-grad" x1="0%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#8a2be2">
</stop>
<stop offset="100%" stop-color="#e9d5ff">
</stop>
</lineargradient>
<lineargradient id="green-grad" x1="0%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#ccff00">
</stop>
<stop offset="100%" stop-color="#fbbf24">
</stop>
</lineargradient>
<g id="mini-card" transform="translate(-15, -20)">
<rect height="40" rx="4" width="30">
</rect>
<rect fill="#000" height="6" opacity="0.3" rx="1" width="6" x="20" y="30">
</rect>
</g>
</defs>
<g class="spin-slow">
<use fill="url(#green-grad)" href="#mini-card" transform="rotate(0 100 100)" x="100" y="55">
</use>
<use fill="url(#purple-grad)" href="#mini-card" transform="rotate(60 100 100)" x="100" y="55">
</use>
<use fill="url(#green-grad)" href="#mini-card" transform="rotate(120 100 100)" x="100" y="55">
</use>
<use fill="url(#purple-grad)" href="#mini-card" transform="rotate(180 100 100)" x="100" y="55">
</use>
<use fill="url(#green-grad)" href="#mini-card" transform="rotate(240 100 100)" x="100" y="55">
</use>
<use fill="url(#purple-grad)" href="#mini-card" transform="rotate(300 100 100)" x="100" y="55">
</use>
</g>
</svg>
</div>
</div>
<div class="service-card">
<h3>
Opening Of Essential Bank
<br/>
Account
</h3>
<p>
It Is Not Impossible To Open An Account In An Online And Simple Way With Just Two Clicks... You Can Now Save Your Time And Create A Fast And Safe Bank Account For Yourself Or Your Loved Ones.
</p>
<div class="service-visual">
<svg height="100%" viewbox="0 0 300 200" width="100%">
<g transform="translate(20, 0)">
<!-- User Circle -->
<circle cx="50" cy="110" fill="#f2f3f7" r="18">
</circle>
<circle cx="50" cy="106" fill="none" r="4" stroke="#050505" stroke-width="1.5">
</circle>
<path d="M 42 118 Q 50 112 58 118" fill="none" stroke="#050505" stroke-linecap="round" stroke-width="1.5">
</path>
<!-- Solid Line -->
<path d="M 68 110 L 80 110 L 80 140 L 130 140 L 130 110 L 140 110" fill="none" stroke="#050505" stroke-linejoin="round" stroke-width="1.5">
</path>
<!-- Node -->
<circle cx="150" cy="110" fill="none" r="10" stroke="#8a2be2" stroke-width="2">
</circle>
<circle class="pulse-node-anim" cx="150" cy="110" fill="#8a2be2" r="4">
</circle>
<!-- Dotted line -->
<line stroke="#050505" stroke-dasharray="3 4" stroke-width="1.5" x1="160" x2="200" y1="110" y2="110">
</line>
<!-- Green Card -->
<g class="float-anim-1">
<rect fill="url(#green-grad)" height="35" rx="4" width="50" x="200" y="85">
</rect>
<rect fill="#000" height="6" opacity="0.2" rx="1" width="8" x="235" y="110">
</rect>
</g>
</g>
</svg>
</div>
</div>
<div class="service-card">
<h3>
Information And Detailed
<br/>
Accounts
</h3>
<p>
See The Most Detailed Information Of Your Account Without Deducting Money. You Can Manage Account Information And Even Have It To Manage Your Account Easily.
</p>
<div class="service-visual">
<svg height="100%" viewbox="0 0 200 200" width="100%">
<g transform="translate(30, 60)">
<!-- Animating skeleton lines -->
<g class="skeleton-line-1">
<rect fill="#e9d5ff" height="6" rx="3" width="120" x="15" y="0">
</rect>
<circle cx="0" cy="3" fill="#8a2be2" r="4">
</circle>
</g>
<g class="skeleton-line-2">
<rect fill="#e9d5ff" height="6" rx="3" width="90" x="15" y="18">
</rect>
<rect fill="#ccff00" height="6" rx="3" width="15" x="110" y="18">
</rect>
<circle cx="0" cy="21" fill="#ccff00" r="4">
</circle>
</g>
<g class="skeleton-line-3">
<rect fill="#e9d5ff" height="6" rx="3" width="110" x="15" y="36">
</rect>
</g>
<g class="skeleton-line-4">
<rect fill="#ccff00" height="6" rx="3" width="40" x="15" y="54">
</rect>
<rect fill="#e9d5ff" height="6" rx="3" width="65" x="60" y="54">
</rect>
<circle cx="0" cy="57" fill="#ccff00" r="4">
</circle>
</g>
<g class="skeleton-line-5">
<rect fill="#e9d5ff" height="6" rx="3" width="100" x="15" y="72">
</rect>
<circle cx="0" cy="75" fill="#8a2be2" r="4">
</circle>
</g>
</g>
</svg>
</div>
</div>
</div>
</section>
<section class="distinctive-section">
<div class="distinctive-content">
<h2>
What Features Make Our
<br/>
<span class="toggle-pill">
From 2026
<span class="pill-knob">
</span>
</span>
Bank Card
<span class="text-purple">
Distinctive
</span>
<br/>
And
<span class="text-purple">
Popular
</span>
?
</h2>
<p>
According To The Needs Of Users And Different Strata, We Have Provided A New Bank Card That Can Be The Answer To All Your Needs.
</p>
<div class="distinctive-list">
<ul>
<li>
<span class="list-num">
1
</span>
Personalization Features
</li>
<li>
<span class="list-num">
2
</span>
Ease Of Use
</li>
<li>
<span class="list-num">
3
</span>
User Friendly Cards
</li>
</ul>
<ul>
<li>
<span class="list-num">
4
</span>
Low Fee
</li>
<li>
<span class="list-num">
5
</span>
Broad Acceptance
</li>
</ul>
</div>
</div>
<div class="distinctive-visual">
<svg class="distinctive-svg" viewbox="0 0 400 400">
<!-- Half concentric dotted orbits on the LEFT -->
<path class="dotted-orbit o1" d="M 200 50 A 150 150 0 0 0 200 350">
</path>
<path class="dotted-orbit o2" d="M 200 90 A 110 110 0 0 0 200 310">
</path>
<path class="dotted-orbit o3" d="M 200 130 A 70 70 0 0 0 200 270">
</path>
<!-- Radiating nodes (Behind the black circle) -->
<g class="radiating-nodes">
<!-- Node 1 -->
<line stroke="#050505" stroke-dasharray="4 4" x1="200" x2="320" y1="200" y2="80">
</line>
<circle class="slide-n1" cx="320" cy="80" fill="#ccff00" r="8">
</circle>
<!-- Node 2 -->
<line stroke="#050505" stroke-dasharray="4 4" x1="200" x2="350" y1="200" y2="150">
</line>
<circle class="slide-n2" cx="350" cy="150" fill="#8a2be2" r="10">
</circle>
<!-- Node 3 -->
<line stroke="#050505" stroke-dasharray="4 4" x1="200" x2="330" y1="200" y2="250">
</line>
<circle class="slide-n3" cx="330" cy="250" fill="#050505" r="6">
</circle>
<!-- Node 4 -->
<line stroke="#050505" stroke-dasharray="4 4" x1="200" x2="280" y1="200" y2="330">
</line>
<circle class="slide-n4" cx="280" cy="330" fill="#ccff00" r="12">
</circle>
</g>
<!-- Solid center black circle -->
<circle cx="200" cy="200" fill="#050505" r="40">
</circle>
<!-- Center small colored circles bouncing strictly inside -->
<circle class="bounce-in-1" cx="190" cy="190" fill="#ccff00" r="6">
</circle>
<circle class="bounce-in-2" cx="210" cy="195" fill="#8a2be2" r="8">
</circle>
<circle class="bounce-in-3" cx="195" cy="210" fill="#8a2be2" r="5">
</circle>
<circle class="bounce-in-1" cx="215" cy="205" fill="#ccff00" r="7" style="animation-delay: -1s">
</circle>
<circle class="bounce-in-2" cx="200" cy="200" fill="none" r="9" stroke="#ccff00" stroke-width="2" style="animation-delay: -2s">
</circle>
</svg>
</div>
</section>
</div>
<footer class="site-footer">
<div class="footer-pixels-top" style="overflow: hidden; width: 100vw; position: absolute; top: -40px; height: 40px; left: 0;">
<svg height="40" id="footer-top-pixel-svg" width="3000" xmlns="http://www.w3.org/2000/svg">
</svg>
</div>
<div class="footer-content">
<div class="footer-col brand-col">
<div class="logo logo-white">
<svg fill="none" height="24" viewbox="0 0 24 24" width="24">
<rect fill="#fff" height="20" width="8" x="2" y="2">
</rect>
<rect fill="#fff" height="20" width="8" x="14" y="2">
</rect>
</svg>
</div>
<p>
A Modern Bank Card For A Modern World And Advanced And Up-To-Date Services For Your Convenience
</p>
</div>
<div class="footer-col links-col">
<h4>
Quick Access
</h4>
<div class="footer-links-grid">
<ul>
<li>
<a href="#">
About Us
</a>
</li>
<li>
<a class="active-link" href="#">
<span class="dot">
</span>
Services
</a>
</li>
<li>
<a href="#">
Careers
</a>
</li>
<li>
<a href="#">
Learn
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
Branches
</a>
</li>
<li>
<a href="#">
Faq
</a>
</li>
<li>
<a href="#">
Blog
</a>
</li>
</ul>
</div>
</div>
<div class="footer-col newsletter-col">
<p>
To Know The Latest News And Updates, Enter Your Email So That We Can Contact You
</p>
<div class="newsletter-form">
<input placeholder="Enter Email Address" type="email"/>
<button class="btn-primary">
Subscribe
<svg fill="none" height="14" viewbox="0 0 24 24" width="14">
<path d="M7 17L17 7M17 7H7M17 7V17" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
</path>
</svg>
</button>
</div>
<div class="social-links">
<span>
Contact Us :
</span>
<a class="social-icon purple-icon" href="#">
<svg fill="white" height="14" viewbox="0 0 24 24" width="14">
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z">
</path>
</svg>
</a>
<a class="social-icon" href="#">
<svg fill="white" height="14" viewbox="0 0 24 24" width="14">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z">
</path>
</svg>
</a>
<a class="social-icon" href="#">
<svg fill="white" height="14" viewbox="0 0 24 24" width="14">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z">
</path>
</svg>
</a>
<a class="social-icon" href="#">
<svg fill="white" height="14" viewbox="0 0 24 24" width="14">
<path d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z">
</path>
</svg>
</a>
</div>
</div>
</div>
<div class="footer-pixels" style="overflow: hidden; width: 100vw; background: var(--bg-color);">
<svg height="60" id="footer-pixel-svg" width="3000" xmlns="http://www.w3.org/2000/svg">
</svg>
</div>
<div class="footer-copyright">
Copyright © 2026 Maquina Espacial. All Rights Reserved.
</div>
</footer>
:root {
--bg-color: #f2f3f7;
--text-dark: #0a0a0a;
--text-light: #6b7280;
--primary: #ccff00;
/* Lime green */
--purple: #8a2be2;
--card-white: #ffffff;
--border-color: #e5e7eb;
}
body {
margin: 0;
padding: 0;
background-color: var(--bg-color);
font-family: 'Inter', sans-serif;
color: var(--text-dark);
}
h1,
h2,
h3,
h4,
h5,
h6,
.logo {
font-family: 'Outfit', sans-serif;
}
.bit-container {
max-width: 1400px;
margin: 0 auto;
padding: 2rem 3rem;
}
/* NAVBAR */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
.logo {
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 700;
font-size: 1.25rem;
}
.nav-links {
display: flex;
list-style: none;
gap: 2.5rem;
margin: 0;
padding: 0;
}
.nav-links a {
text-decoration: none;
color: var(--text-dark);
font-weight: 500;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 0.4rem;
transition: color 0.2s;
}
.nav-links a:hover {
color: var(--purple);
}
.nav-links a.active {
color: var(--purple);
}
.nav-links .dot {
width: 5px;
height: 5px;
background-color: var(--purple);
border-radius: 50%;
}
.nav-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.search-btn {
background: none;
border: none;
cursor: pointer;
color: var(--text-dark);
}
.sign-in-btn {
background: transparent;
border: 1px solid var(--border-color);
padding: 0.6rem 1.5rem;
border-radius: 2rem;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: all 0.2s;
}
.sign-in-btn:hover {
background: var(--text-dark);
color: white;
}
/* HERO SECTION */
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-top: 5rem;
align-items: center;
}
.hero-content h1 {
font-size: 4.5rem;
line-height: 1.1;
letter-spacing: -0.03em;
margin: 0 0 1.5rem 0;
font-weight: 600;
}
.hero-content p {
font-size: 1.1rem;
color: var(--text-light);
line-height: 1.6;
max-width: 90%;
margin-bottom: 2.5rem;
}
.btn-primary {
background-color: var(--primary);
color: var(--text-dark);
border: none;
padding: 1rem 2rem;
border-radius: 3rem;
font-size: 1rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(204, 255, 0, 0.3);
}
/* MARQUEE RIBBON */
.marquee-container {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background-color: var(--text-dark);
padding: 1.5rem 0;
overflow: hidden;
margin-top: 5rem;
display: flex;
}
.marquee-track {
display: flex;
gap: 4rem;
align-items: center;
color: #9ca3af;
font-size: 1.4rem;
font-weight: 500;
white-space: nowrap;
animation: marquee-scroll 12s linear infinite;
min-width: max-content;
}
@keyframes marquee-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-33.3333%);
}
}
/* HERO VISUAL (CARD & SVGS) */
.hero-visual {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.card-wrapper {
position: relative;
transform: rotate(15deg);
transition: transform 0.5s ease;
}
.card-wrapper:hover {
transform: rotate(10deg) scale(1.02);
}
.bank-card {
width: 320px;
height: auto;
filter: drop-shadow(-10px 20px 30px rgba(0, 0, 0, 0.15));
position: relative;
z-index: 10;
}
/* PIXEL ANIMATIONS */
@keyframes color-cycle-1 {
0%,
20% {
fill: #050505;
}
33%,
53% {
fill: var(--purple);
}
66%,
86% {
fill: var(--primary);
}
100% {
fill: #050505;
}
}
@keyframes color-cycle-2 {
0%,
20% {
fill: var(--primary);
}
33%,
53% {
fill: #050505;
}
66%,
86% {
fill: var(--purple);
}
100% {
fill: var(--primary);
}
}
@keyframes color-cycle-3 {
0%,
20% {
fill: var(--purple);
}
33%,
53% {
fill: var(--primary);
}
66%,
86% {
fill: #050505;
}
100% {
fill: var(--purple);
}
}
.px-anim-1 {
animation: color-cycle-1 6s infinite;
}
.px-anim-2 {
animation: color-cycle-2 6s infinite;
}
.px-anim-3 {
animation: color-cycle-3 6s infinite;
}
/* FLOATING DECORATIONS */
.floating-square {
position: absolute;
width: 15px;
height: 15px;
border-radius: 2px;
z-index: 5;
}
.fs-1 {
background: var(--primary);
top: -20px;
right: -10px;
animation: float 6s infinite;
}
.fs-2 {
background: var(--purple);
bottom: 40px;
left: -40px;
animation: float 5s infinite reverse;
width: 20px;
height: 20px;
}
.fs-3 {
border: 2px solid var(--purple);
top: 100px;
left: -30px;
animation: float 7s infinite;
width: 10px;
height: 10px;
background: transparent;
}
.fs-4 {
background: #d8b4fe;
bottom: -20px;
right: 20px;
animation: float 4s infinite 1s;
}
.fs-5 {
background: var(--primary);
top: 50%;
right: -50px;
animation: float 8s infinite 2s;
width: 8px;
height: 8px;
}
@keyframes float {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(45deg);
}
}
/* FEATURES SECTION */
.features-section {
margin-top: 8rem;
padding-bottom: 4rem;
}
.features-card {
background-color: var(--card-white);
border-radius: 32px;
padding: 4rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.02);
}
.features-top {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 4rem;
margin-bottom: 5rem;
}
.features-top h2 {
font-size: 2.8rem;
margin: 0;
line-height: 1.2;
letter-spacing: -0.02em;
}
.features-desc p {
color: var(--text-light);
line-height: 1.7;
margin: 0 0 2rem 0;
font-size: 1.05rem;
}
.btn-dark {
background-color: var(--text-dark);
color: white;
border: none;
padding: 0.8rem 1.8rem;
border-radius: 2rem;
font-size: 0.95rem;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
transition: opacity 0.2s;
}
.btn-dark:hover {
opacity: 0.8;
}
/* FEATURES GRID & SVGS */
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.feature-item {
text-align: center;
padding: 2rem 1rem;
border-radius: 24px;
transition: background 0.3s;
}
.feature-bg-1 {
background-color: #fafafa;
}
.feature-item h3 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 2rem;
line-height: 1.4;
height: 2.8rem;
}
.feature-visual {
height: 140px;
display: flex;
justify-content: center;
align-items: center;
}
.anim-svg {
width: 100%;
height: 100%;
}
/* SVG Animations: Circles */
.circle-outline {
fill: none;
stroke: var(--purple);
stroke-width: 1.5;
opacity: 0.6;
}
.circle-fill {
fill: #e9d5ff;
/* light purple */
stroke: var(--purple);
stroke-width: 1.5;
}
@keyframes slide-circle-1 {
0%,
100% {
cx: 35;
}
50% {
cx: 50;
}
}
@keyframes slide-circle-2 {
0%,
100% {
cx: 45;
}
50% {
cx: 50;
}
}
@keyframes slide-circle-3 {
0%,
100% {
cx: 55;
}
50% {
cx: 50;
}
}
@keyframes slide-circle-4 {
0%,
100% {
cx: 65;
}
50% {
cx: 35;
}
}
.c1 {
animation: slide-circle-1 2s infinite ease-in-out;
}
.c2 {
animation: slide-circle-2 2s infinite ease-in-out;
}
.c3 {
animation: slide-circle-3 2s infinite ease-in-out;
}
.c4 {
animation: slide-circle-4 2s infinite ease-in-out;
}
/* SVG Animations: Toggles */
.toggle-track {
fill: none;
stroke: #d1d5db;
stroke-width: 2;
}
.toggle-track.active-track {
stroke: var(--purple);
fill: #f3e8ff;
}
.toggle-knob {
fill: #9ca3af;
}
.toggle-knob.active-knob {
fill: var(--primary);
stroke: var(--purple);
stroke-width: 2;
}
@keyframes toggle-slide {
0%,
30% {
cx: 31;
fill: #9ca3af;
stroke: none;
}
70%,
100% {
cx: 69;
fill: var(--primary);
stroke: var(--purple);
stroke-width: 2;
}
}
@keyframes toggle-slide-back {
0%,
30% {
cx: 69;
fill: var(--primary);
stroke: var(--purple);
stroke-width: 2;
}
70%,
100% {
cx: 31;
fill: #9ca3af;
stroke: none;
}
}
.t1 {
animation: toggle-slide 3s infinite alternate;
}
.t2 {
animation: toggle-slide-back 3s infinite alternate;
}
.t3 {
animation: toggle-slide 3s infinite alternate 0.5s;
}
/* SVG Animations: Encryption Ripples */
.ripple-circle {
fill: none;
stroke: #e5e7eb;
stroke-width: 1.5;
}
.ripple-core {
fill: var(--purple);
}
@keyframes ripple-anim {
0% {
r: 5;
cy: 65;
opacity: 1;
stroke: var(--purple);
}
100% {
r: 40;
cy: 20;
opacity: 0;
stroke: var(--purple);
}
}
.r1 {
animation: ripple-anim 2s infinite ease-out;
}
.r2 {
animation: ripple-anim 2s infinite ease-out 0.6s;
}
.r3 {
animation: ripple-anim 2s infinite ease-out 1.2s;
}
/* SVG Animations: Network */
.node-lines {
fill: none;
stroke: #d1d5db;
stroke-width: 1.5;
}
.node-dot {
fill: white;
stroke: #9ca3af;
stroke-width: 2;
}
.pulse-node {
stroke: var(--purple);
fill: var(--purple);
transform-origin: 50px 25px;
animation: node-pulse 2s infinite;
}
.packet {
fill: var(--primary);
opacity: 0;
}
@keyframes node-pulse {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.6);
opacity: 0.6;
}
}
@keyframes data-flow-down {
0%,
10% {
cy: 25;
opacity: 0;
}
20% {
opacity: 1;
}
50% {
cy: 45;
opacity: 1;
}
51%,
100% {
opacity: 0;
}
}
@keyframes data-flow-left {
0%,
50% {
cx: 50;
cy: 45;
opacity: 0;
}
51% {
opacity: 1;
}
90% {
cx: 25;
cy: 45;
opacity: 1;
}
91%,
100% {
opacity: 0;
}
}
@keyframes data-flow-right {
0%,
50% {
cx: 50;
cy: 45;
opacity: 0;
}
51% {
opacity: 1;
}
90% {
cx: 75;
cy: 45;
opacity: 1;
}
91%,
100% {
opacity: 0;
}
}
.p1 {
animation: data-flow-down 2s infinite linear;
}
.p2 {
animation: data-flow-left 2s infinite linear;
}
.p3 {
animation: data-flow-right 2s infinite linear;
}
/* SERVICES SECTION */
.services-section {
margin-top: 8rem;
}
.services-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 3rem;
}
.services-header h2 {
font-size: 2.8rem;
line-height: 1.2;
font-weight: 500;
margin: 0;
}
.services-nav {
display: flex;
gap: 1rem;
}
.nav-btn {
width: 48px;
height: 48px;
border-radius: 50%;
border: none;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: transform 0.2s;
}
.nav-btn:hover {
transform: scale(1.05);
}
.prev-btn {
background-color: var(--card-white);
color: var(--text-dark);
}
.next-btn {
background-color: var(--primary);
color: var(--text-dark);
}
.services-carousel {
display: flex;
gap: 2rem;
overflow-x: auto;
padding-bottom: 2rem;
scrollbar-width: none;
}
.services-carousel::-webkit-scrollbar {
display: none;
}
.service-card {
background-color: var(--card-white);
border-radius: 24px;
padding: 3rem 2.5rem;
width: calc(33.333% - 1.5rem);
min-width: 340px;
flex: 0 0 auto;
text-align: center;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.service-card h3 {
font-size: 1.3rem;
margin: 0 0 1rem 0;
line-height: 1.4;
font-weight: 600;
}
.service-card p {
color: var(--text-light);
font-size: 0.9rem;
line-height: 1.6;
margin: 0 0 2rem 0;
}
.service-visual {
height: 180px;
display: flex;
justify-content: center;
align-items: center;
}
/* Service Animations */
.spin-slow {
animation: spin 20s linear infinite;
transform-origin: 100px 100px;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.skeleton-line-1 rect,
.skeleton-line-2 rect,
.skeleton-line-4 rect {
transform-origin: left;
}
.skeleton-line-1 rect:first-child {
animation: skeleton-w 3s infinite alternate ease-in-out;
}
.skeleton-line-2 rect:first-child {
animation: skeleton-w 4s infinite alternate-reverse ease-in-out;
}
.skeleton-line-4 rect:nth-child(2) {
animation: skeleton-w 2.5s infinite alternate ease-in-out;
}
@keyframes skeleton-w {
0% {
transform: scaleX(0.85);
}
100% {
transform: scaleX(1);
}
}
/* DISTINCTIVE SECTION */
.distinctive-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
margin-top: 10rem;
padding-bottom: 5rem;
align-items: center;
}
.distinctive-content h2 {
font-size: 3.5rem;
line-height: 1.2;
font-weight: 600;
}
.toggle-pill {
display: inline-flex;
align-items: center;
border: 2px solid var(--text-dark);
border-radius: 20px;
padding: 0.3rem 0.8rem;
font-size: 0.9rem;
font-weight: 500;
font-family: 'Inter', sans-serif;
vertical-align: middle;
margin-right: 0.5rem;
}
.pill-knob {
width: 12px;
height: 12px;
background-color: var(--text-dark);
border-radius: 50%;
margin-left: 0.8rem;
}
.text-purple {
color: var(--purple);
}
.distinctive-content p {
color: var(--text-light);
line-height: 1.7;
margin: 2rem 0;
max-width: 90%;
}
.distinctive-list {
display: flex;
gap: 4rem;
}
.distinctive-list ul {
list-style: none;
padding: 0;
margin: 0;
}
.distinctive-list li {
font-weight: 600;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.list-num {
background-color: var(--primary);
color: var(--text-dark);
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 0.9rem;
}
/* DISTINCTIVE SVG ANIMATIONS */
.distinctive-svg {
width: 100%;
max-width: 500px;
}
.dotted-orbit {
fill: none;
stroke: var(--text-dark);
stroke-width: 2;
stroke-dasharray: 4 8;
}
@keyframes march-dots {
to {
stroke-dashoffset: -120;
}
}
@keyframes march-dots-rev {
to {
stroke-dashoffset: 120;
}
}
.o1 {
animation: march-dots 6s linear infinite;
}
.o2 {
animation: march-dots-rev 5s linear infinite;
}
.o3 {
animation: march-dots 4s linear infinite;
}
/* Bouncing inside */
@keyframes bounce-inside-1 {
0%,
100% {
transform: translate(0, 0);
}
25% {
transform: translate(18px, -12px);
}
50% {
transform: translate(-10px, 15px);
}
75% {
transform: translate(-15px, -8px);
}
}
@keyframes bounce-inside-2 {
0%,
100% {
transform: translate(0, 0);
}
33% {
transform: translate(-15px, -10px);
}
66% {
transform: translate(12px, 16px);
}
}
@keyframes bounce-inside-3 {
0%,
100% {
transform: translate(0, 0);
}
33% {
transform: translate(15px, 15px);
}
66% {
transform: translate(-12px, -15px);
}
}
.bounce-in-1 {
animation: bounce-inside-1 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.bounce-in-2 {
animation: bounce-inside-2 5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.bounce-in-3 {
animation: bounce-inside-3 6s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
/* Sliding nodes */
@keyframes slide-node-1 {
0%,
10% {
transform: translate(0, 0);
}
45%,
55% {
transform: translate(-120px, 120px);
}
90%,
100% {
transform: translate(0, 0);
}
}
@keyframes slide-node-2 {
0%,
10% {
transform: translate(0, 0);
}
45%,
55% {
transform: translate(-150px, 50px);
}
90%,
100% {
transform: translate(0, 0);
}
}
@keyframes slide-node-3 {
0%,
10% {
transform: translate(0, 0);
}
45%,
55% {
transform: translate(-130px, -50px);
}
90%,
100% {
transform: translate(0, 0);
}
}
@keyframes slide-node-4 {
0%,
10% {
transform: translate(0, 0);
}
45%,
55% {
transform: translate(-80px, -130px);
}
90%,
100% {
transform: translate(0, 0);
}
}
.slide-n1 {
animation: slide-node-1 4s infinite cubic-bezier(0.65, 0, 0.35, 1);
}
.slide-n2 {
animation: slide-node-2 5s infinite cubic-bezier(0.65, 0, 0.35, 1) 0.5s;
}
.slide-n3 {
animation: slide-node-3 6s infinite cubic-bezier(0.65, 0, 0.35, 1) 1s;
}
.slide-n4 {
animation: slide-node-4 4.5s infinite cubic-bezier(0.65, 0, 0.35, 1) 1.5s;
}
/* FOOTER */
.site-footer {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background-color: #050505;
color: #fff;
margin-top: 8rem;
}
.footer-content {
max-width: 1400px;
margin: 0 auto;
padding: 2rem 3rem 4rem 3rem;
display: grid;
grid-template-columns: 1fr 1fr 1.5fr;
gap: 4rem;
}
@keyframes pixel-blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.px-blink-fast {
animation: pixel-blink 0.8s infinite steps(2);
}
.px-blink-med {
animation: pixel-blink 1.5s infinite steps(2);
animation-delay: 0.4s;
}
.px-blink-slow {
animation: pixel-blink 2.2s infinite steps(2);
animation-delay: 0.8s;
}
.brand-col .logo-white {
color: #fff;
margin-bottom: 1.5rem;
}
.brand-col p {
color: #9ca3af;
line-height: 1.6;
font-size: 0.95rem;
max-width: 80%;
}
.links-col h4 {
margin: 0 0 2rem 0;
font-size: 1.1rem;
}
.footer-links-grid {
display: flex;
gap: 4rem;
}
.footer-links-grid ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer-links-grid a {
color: #9ca3af;
text-decoration: none;
transition: color 0.2s;
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-links-grid a:hover {
color: #fff;
}
.footer-links-grid .active-link {
color: #fff;
}
.footer-links-grid .dot {
width: 5px;
height: 5px;
background: var(--purple);
border-radius: 50%;
}
.newsletter-col p {
color: #fff;
line-height: 1.6;
margin-bottom: 1.5rem;
max-width: 90%;
}
.newsletter-form {
display: flex;
background: #fff;
border-radius: 3rem;
padding: 0.3rem;
margin-bottom: 2rem;
}
.newsletter-form input {
flex: 1;
border: none;
background: transparent;
padding: 0.8rem 1.5rem;
font-family: inherit;
font-size: 0.95rem;
outline: none;
}
.newsletter-form .btn-primary {
padding: 0.8rem 2rem;
border-radius: 3rem;
}
.social-links {
display: flex;
align-items: center;
gap: 1.5rem;
}
.social-icon {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.3s;
}
.social-icon:hover {
background: #333;
}
.purple-icon {
background: var(--purple);
}
.purple-icon:hover {
background: #7122b6;
}
.footer-pixels {
width: 100%;
height: 60px;
position: relative;
}
.footer-copyright {
background-color: var(--bg-color);
color: var(--text-dark);
text-align: center;
padding: 2rem 0;
font-weight: 500;
font-size: 0.9rem;
margin: 0;
}
/* RESPONSIVE */
@media (max-width: 1200px) {
.bit-container {
padding: 2rem;
}
.hero {
gap: 2rem;
}
.features-card {
padding: 3rem;
}
.features-grid {
gap: 1.5rem;
}
.footer-content {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 1024px) {
.hero {
grid-template-columns: 1fr;
text-align: center;
margin-top: 3rem;
}
.hero-content h1 {
font-size: 3.5rem;
}
.hero-content p {
margin: 0 auto 2.5rem auto;
}
.features-top {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
margin-bottom: 3rem;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.card-wrapper {
transform: rotate(0);
margin-top: 3rem;
}
.card-wrapper:hover {
transform: translateY(-10px);
}
.marquee-container {
margin-top: 6rem;
}
.services-header {
flex-direction: column;
align-items: flex-start;
gap: 2rem;
}
.distinctive-section {
grid-template-columns: 1fr;
text-align: center;
}
.distinctive-content p {
margin: 2rem auto;
}
.distinctive-list {
justify-content: center;
}
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 3rem;
}
}
@media (max-width: 768px) {
.bit-container {
padding: 1.5rem;
}
.nav-links {
display: none;
}
.hero-content h1 {
font-size: 2.5rem;
}
.hero-content p {
font-size: 1rem;
width: 100%;
max-width: 100%;
}
.features-card {
padding: 2rem;
}
.features-top h2 {
font-size: 2.2rem;
}
.features-grid {
grid-template-columns: 1fr;
}
.bank-card {
width: 100%;
max-width: 320px;
}
.marquee-track {
gap: 2rem;
font-size: 1.25rem;
}
.marquee-container {
padding: 1rem 0;
}
.services-header h2 {
font-size: 2.2rem;
}
.service-card {
width: 80vw;
min-width: auto;
}
.distinctive-content h2 {
font-size: 2.5rem;
}
.distinctive-list {
flex-direction: column;
gap: 1rem;
align-items: center;
}
.footer-content {
grid-template-columns: 1fr;
padding: 2rem;
gap: 3rem;
}
.footer-links-grid {
gap: 2rem;
}
}
@media (max-width: 480px) {
.bit-container {
padding: 1rem;
}
.hero-content h1 {
font-size: 2rem;
}
.btn-primary,
.btn-dark {
width: 100%;
justify-content: center;
}
.features-top h2 {
font-size: 1.8rem;
}
.logo {
font-size: 1.1rem;
}
.nav-actions button {
padding: 0.5rem 1rem;
}
.newsletter-form {
flex-direction: column;
background: transparent;
gap: 1rem;
}
.newsletter-form input {
background: #fff;
border-radius: 3rem;
padding: 1rem;
}
}
document.addEventListener("DOMContentLoaded", () => {
// Generate the pixel grid for the Bank Card
const gridContainer = document.getElementById('pixel-grid');
// Grid settings
const cols = 20;
const rows = 18;
const size = 16;
const gap = 0;
for (let r = 0; r < rows; r++) {
for (let c = 0; c < cols; c++) {
// "Incomplete" bottom logic
const threshold = r / rows;
// To make the actual card background look jagged and incomplete,
if (Math.random() < Math.pow(threshold, 3)) continue;
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", c * (size + gap));
rect.setAttribute("y", r * (size + gap));
rect.setAttribute("width", size);
rect.setAttribute("height", size);
rect.setAttribute("rx", 1); // rounded pixels
rect.setAttribute("stroke", "#050505");
rect.setAttribute("stroke-width", "2");
// Determine color class
const rand = Math.random();
if (rand > 0.85) {
rect.setAttribute("class", "px-anim-1");
rect.setAttribute("fill", "#8a2be2"); // Purple
} else if (rand > 0.7) {
rect.setAttribute("class", "px-anim-2");
rect.setAttribute("fill", "#ccff00"); // Green
} else if (rand > 0.55) {
rect.setAttribute("class", "px-anim-3");
rect.setAttribute("fill", "#050505"); // Black (Off)
} else {
rect.setAttribute("fill", "#050505"); // Solid black background pixel
}
gridContainer.appendChild(rect);
}
}
// Footer Pixel Generation (checkerboard transition to white)
const footerSvg = document.getElementById('footer-pixel-svg');
const fCols = 150; // Covers 3000px width
const fRows = 3;
const fSize = 20;
for (let r = 0; r < fRows; r++) {
for (let c = 0; c < fCols; c++) {
// The deeper we go, the fewer black pixels exist, dissolving into the white background
const threshold = 1 - (r / fRows);
if (Math.random() > threshold + 0.1) continue;
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", c * fSize);
rect.setAttribute("y", r * fSize);
rect.setAttribute("width", fSize);
rect.setAttribute("height", fSize);
rect.setAttribute("fill", "#050505"); // Same black as footer
// Apply blinking classes
const rand = Math.random();
if (rand > 0.9) {
rect.setAttribute("class", "px-blink-fast");
} else if (rand > 0.8) {
rect.setAttribute("class", "px-blink-med");
} else if (rand > 0.7) {
rect.setAttribute("class", "px-blink-slow");
}
footerSvg.appendChild(rect);
}
}
// Footer Top Pixel Generation (2 lines of pixels at the top border)
const topFooterSvg = document.getElementById('footer-top-pixel-svg');
const tfRows = 2;
const tfSize = 20;
for (let r = 0; r < tfRows; r++) {
for (let c = 0; c < fCols; c++) {
// More black pixels near the bottom row (closer to solid footer)
const threshold = (r + 1) / tfRows;
if (Math.random() > threshold + 0.2) continue;
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", c * tfSize);
rect.setAttribute("y", r * tfSize);
rect.setAttribute("width", tfSize);
rect.setAttribute("height", tfSize);
rect.setAttribute("fill", "#050505");
const rand = Math.random();
if (rand > 0.85) {
rect.setAttribute("class", "px-blink-fast");
} else if (rand > 0.7) {
rect.setAttribute("class", "px-blink-med");
}
topFooterSvg.appendChild(rect);
}
}
});
Modern Bank Landing Page
This Bit provides a premium, highly animated landing page component tailored for modern banking, fintech, or cybersecurity services. It uses zero external libraries for animations, relying entirely on Vanilla CSS, native SVGs, and lightweight JavaScript.
Features
- Animated Bank Card (Hero): A visually striking vector bank card that generates a dynamic, mathematical "pixelated" grid at its base, switching colors infinitely using JavaScript and CSS.
- Data Flow SVGs (Features Section): Three interactive, floating feature cards that showcase continuous data flows, pulsing nodes, and self-toggling switches built with SVG stroke animations.
- Infinite Marquee: A horizontally scrolling ribbon displaying partner brands, powered by CSS keyframes.
- Services Carousel: A sleek, horizontal scroll container showcasing various banking services, each featuring a unique custom-drawn SVG illustration with subtle breathing/rotating animations.
- Orbital Eye Graphic: A complex SVG displaying concentric dotted orbits traveling in opposite directions and small floating nodes bounded within the geometry.
- Dynamic Pixel Footer: An elegant dark footer incorporating a top pixel-transition border and a bottom pixel-dissolve effect with independent, randomized blinking animations.
- Fully Responsive: Carefully crafted media queries ensure the layout gracefully degrades from large desktop monitors down to mobile devices, stacking grid columns and scaling typography dynamically.
Usage
This component is self-contained. The index.html structure automatically binds to the style.css classes, and the pixel effects at the header and footer are automatically initialized by the script.js file upon DOM load.
Design Decisions
Visual Concept
The design targets a "Modern Fintech / Cybersecurity" aesthetic. It emphasizes a clinical, clean background contrasted with vibrant, almost neon accent colors (Lime Green and Deep Purple) against deep blacks. This contrast conveys both robust security and cutting-edge technology.
Color Palette
- Background (
#f2f3f7): A soft, light-grey background that reduces eye strain compared to pure white and allows white cards to stand out with soft shadows.
- Deep Dark (
#050505): Used for primary typography, the partner ribbon, the footer background, and the central nodes in the SVGs. It provides massive contrast.
- Lime Green (
#ccff00): The primary accent color. Used for action items (like the "Subscribe" button) and active data packets. It draws immediate attention.
- Electric Purple (
#8a2be2): The secondary accent color. Paired with the lime green, it creates a modern, dual-tone energetic aesthetic.
Typography
- The design uses
Inter (or similar sans-serif system fonts) to maintain a highly legible, geometric, and Swiss-style cleanliness.
- Titles are given heavy weight and tight line-heights for a commanding presence, while paragraph text uses a lighter grey (
#6b7280) with generous line-heights (1.6 to 1.7) for optimal readability.
Layout & Geometry
- Rounded Geometry: Heavy use of border-radius (
24px to 3rem) on cards and buttons softens the technical nature of the content, making the banking platform feel approachable and "user-friendly".
- Pixel Art Motif: A recurring theme of "pixels" (squares) is used as a transition element in the hero and footer sections. This digital artifact serves as a visual metaphor for digital banking and data construction.
Technical Skills & Techniques Used
This Bit demonstrates advanced modern web development capabilities without relying on external libraries.
1. Advanced Native SVG Animations
- Stroke Dasharray/Dashoffset: Used extensively to animate data flowing through wires (
data-flow animations) and to rotate the dotted half-orbits in the Distinctive section seamlessly.
- Transform Sequences: Complex CSS keyframes combining
translate and scale to create breathing nodes, sliding elements, and perfectly bounded bouncing balls within an SVG viewbox.
- Inline SVG Construction: All graphics (hexagons, skeleton UIs, structural curves) are mathematically drawn directly in HTML, reducing HTTP requests and enabling direct CSS manipulation.
2. Dynamic JavaScript DOM Manipulation
- Algorithmic Grid Generation: JavaScript calculates and dynamically injects hundreds of SVG
<rect> elements to create the "pixelated" borders on the hero card and footer.
- Probability Distribution: The JS script uses mathematical thresholds (
Math.random() > threshold) mapped to the grid rows to create a smooth, randomized "dissolving" gradient effect with the pixels.
- Class Toggling: Assigns staggered blinking classes (
px-blink-fast, px-blink-med, px-blink-slow) to random pixels on initialization to simulate a decentralized processing effect.
3. Modern CSS Layouts
- CSS Grid: The backbone of the layout, utilized for the main hero arrangement, feature cards, and footer columns, allowing robust responsiveness with simple
grid-template-columns shifts.
- Flexbox: Used for micro-layouts like button alignments, navigation items, and the horizontally scrolling services carousel (
overflow-x: auto + flex: 0 0 auto).
- Infinite Marquee: A CSS-only implementation of an infinite sliding ribbon, achieved by duplicating content and translating it linearly.
