/*=============== GOOGLE FONTS ===============*/ /* Imported in HTML */ /*=============== CSS VARIABLES ===============*/ :root { --header-height: 3.5rem; /*========== Colors ==========*/ /* 9jaBillz Brand Colors */ --primary-color: #00A859; /* Main Green */ --primary-color-dark: #007A43; --secondary-color: #0A1931; /* Dark Blue */ --accent-color: #F39C12; /* Yellow/Gold Accent */ /* Grayscale */ --text-color: #333; --text-color-light: #777; --body-color: #FFFFFF; --container-color: #F9F9F9; --white-color: #fff; /*========== Font and typography ==========*/ --body-font: 'Poppins', sans-serif; --biggest-font-size: 2.5rem; --h1-font-size: 2rem; --h2-font-size: 1.5rem; --h3-font-size: 1.125rem; --normal-font-size: 0.938rem; --small-font-size: 0.813rem; --smaller-font-size: 0.75rem; /*========== Font weight ==========*/ --font-light: 300; --font-regular: 400; --font-medium: 500; --font-semi-bold: 600; --font-bold: 700; --font-extra-bold: 800; /*========== 3D Depth & Shadows ==========*/ --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.04); --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.08); --shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.12); --shadow-3d: 0 20px 40px -10px rgba(0, 168, 89, 0.2); --shadow-3d-hover: 0 30px 50px -15px rgba(0, 168, 89, 0.3); /*========== Transitions ==========*/ --transition-fast: all 0.2s ease-in-out; --transition-slow: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /*========== z-index ==========*/ --z-tooltip: 10; --z-fixed: 100; } /*========== Responsive typography ==========*/ @media screen and (min-width: 1024px) { :root { --biggest-font-size: 4.5rem; --h1-font-size: 3rem; --h2-font-size: 1.75rem; --h3-font-size: 1.25rem; --normal-font-size: 1rem; --small-font-size: 0.875rem; --smaller-font-size: 0.813rem; } } /*=============== BASE ===============*/ * { box-sizing: border-box; padding: 0; margin: 0; } html { scroll-behavior: smooth; } body { font-family: var(--body-font); font-size: var(--normal-font-size); background-color: var(--body-color); color: var(--text-color); line-height: 1.6; } h1, h2, h3, h4 { color: var(--secondary-color); font-weight: var(--font-semi-bold); line-height: 1.2; } ul { list-style: none; } a { text-decoration: none; color: var(--primary-color); } img { max-width: 100%; height: auto; display: block; } /*=============== REUSABLE CSS CLASSES ===============*/ .container { max-width: 1140px; margin-left: 1.5rem; margin-right: 1.5rem; } .grid { display: grid; gap: 1.5rem; } .section { padding: 4.5rem 0 2rem; overflow: hidden; /* For animations */ } .section__title { font-size: var(--h1-font-size); font-weight: var(--font-bold); text-align: center; margin-bottom: 1rem; } .section__subtitle { font-size: var(--normal-font-size); text-align: center; color: var(--text-color-light); max-width: 600px; margin: 0 auto 3rem auto; } /* Titles for left/right aligned sections */ .section__title--left { font-size: var(--h1-font-size); font-weight: var(--font-bold); text-align: left; margin-bottom: 1rem; } .section__subtitle--left { font-size: var(--normal-font-size); text-align: left; color: var(--text-color-light); margin-bottom: 2rem; } .main { overflow-x: hidden; } /*=============== BUTTONS ===============*/ .btn { display: inline-block; padding: 0.9rem 2rem; border-radius: 50px; font-weight: var(--font-medium); border: 2px solid var(--primary-color); transition: var(--transition-slow); cursor: pointer; box-shadow: var(--shadow-sm); transform: translateZ(0); /* Fixes transform flickering */ } .btn--primary { background-color: var(--primary-color); color: var(--white-color); } .btn--primary:hover { background-color: var(--primary-color-dark); box-shadow: var(--shadow-md); transform: translateY(-3px); } .btn--secondary { background-color: transparent; color: var(--primary-color); } .btn--secondary:hover { background-color: var(--primary-color); color: var(--white-color); box-shadow: var(--shadow-md); transform: translateY(-3px); } .btn--large { padding: 1.1rem 2.5rem; font-size: var(--h3-font-size); } .btn--full { width: 100%; text-align: center; } /*=============== CARD 3D (Used everywhere) ===============*/ .card-3d { background-color: var(--white-color); border-radius: 16px; padding: 2rem 1.5rem; box-shadow: var(--shadow-md); transition: var(--transition-slow); transform-style: preserve-3d; } .card-3d:hover { box-shadow: var(--shadow-lg); transform: translateY(-10px) perspective(1000px) rotateX(2deg) rotateY(1deg); } /*=============== HEADER & NAV ===============*/ .header { width: 100%; position: fixed; top: 0; left: 0; z-index: var(--z-fixed); background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: var(--transition-fast); } .nav { height: var(--header-height); display: flex; justify-content: space-between; align-items: center; } .nav__logo img { height: 35px; } .nav__toggle { font-size: 1.5rem; color: var(--secondary-color); cursor: pointer; } @media screen and (max-width: 767px) { .nav__menu { position: fixed; top: 0; right: -100%; width: 80%; height: 100vh; background-color: var(--white-color); box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); padding: 4.5rem 0 0 3rem; transition: var(--transition-slow); } } .nav__list { display: flex; flex-direction: column; gap: 2rem; } .nav__link { color: var(--text-color); font-weight: var(--font-medium); transition: var(--transition-fast); } .nav__link:hover, .nav__link.active-link { color: var(--primary-color); } /* Show menu */ .show-menu { right: 0; } /* Header scroll shadow */ .scroll-header { box-shadow: var(--shadow-sm); background: rgba(255, 255, 255, 0.95); } /*=============== 1. HERO SECTION ===============*/ .hero { padding-top: var(--header-height); position: relative; } .hero__container { min-height: calc(100vh - var(--header-height)); align-items: center; grid-template-rows: 1fr max-content; } .hero__content { text-align: center; } .hero__title { font-size: var(--biggest-font-size); font-weight: var(--font-extra-bold); margin-bottom: 1rem; } .hero__title span { color: var(--primary-color); } .hero__description { font-size: var(--h3-font-size); color: var(--text-color-light); margin-bottom: 2.5rem; } .hero__buttons { display: flex; justify-content: center; gap: 1rem; } .hero__image { display: flex; justify-content: center; align-items: center; position: relative; z-index: 2; } .hero__phone-img { width: 300px; /* 3D perspective animation */ transform: perspective(1500px) rotateY(-15deg) rotateX(5deg); filter: drop-shadow(var(--shadow-lg)); transition: var(--transition-slow); } .hero__phone-img:hover { transform: perspective(1500px) rotateY(0deg) rotateX(0deg); } .hero__particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; } /*=============== 2. FEATURES SECTION ===============*/ .features { background-color: var(--container-color); } .features__container { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .feature__card { text-align: center; padding: 1.5rem 1rem; background-color: var(--white-color); border-radius: 12px; box-shadow: var(--shadow-sm); transition: var(--transition-slow); } .feature__card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); } .feature__card-icon { width: 50px; height: 50px; margin-bottom: 1rem; color: var(--primary-color); margin-left: auto; margin-right: auto; } .feature__card h3 { font-size: var(--normal-font-size); font-weight: var(--font-semi-bold); } /*=============== 3. WALLET SYSTEM ===============*/ .wallet__container { align-items: center; } .wallet__list { display: flex; flex-direction: column; gap: 1.5rem; } .wallet__list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: var(--normal-font-size); } .wallet__list ion-icon { font-size: 1.5rem; color: var(--primary-color); margin-top: 2px; flex-shrink: 0; } .wallet__animation-area { position: relative; min-height: 250px; display: none; /* Mobile hidden, shown on desktop */ } /*=============== 4. APP SHOWCASE ===============*/ .showcase { background-color: var(--container-color); } .app-showcase-slider { width: 100%; padding-bottom: 3rem; /* Space for pagination */ } .app-showcase-slider .swiper-slide { display: flex; justify-content: center; align-items: center; } .app-showcase-slider .swiper-slide img { width: 250px; height: auto; border-radius: 20px; box-shadow: var(--shadow-lg); -webkit-box-reflect: below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(250, 250, 250, 0.1))); } .swiper-pagination-bullet-active { background: var(--primary-color); } /*=============== 5. RESELLER PROGRAM ===============*/ .reseller__container { align-items: center; } .features__list { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 2rem; } .features__list li { display: flex; align-items: center; gap: 0.75rem; font-size: var(--normal-font-size); font-weight: var(--font-medium); } .features__list ion-icon { font-size: 1.5rem; color: var(--primary-color); flex-shrink: 0; } .features__list li span { color: var(--text-color-light); text-decoration: line-through; } .features__list ion-icon[name="close-circle-outline"] { color: var(--text-color-light); } .reseller__image-area { position: relative; display: flex; justify-content: center; align-items: center; } .reseller__image { width: 300px; } .reseller__badge { position: absolute; top: 10px; right: 10px; background-color: var(--accent-color); color: var(--secondary-color); padding: 0.5rem 1rem; border-radius: 50px; font-weight: var(--font-bold); box-shadow: var(--shadow-md); animation: float 3s ease-in-out infinite; } /* Floating animation */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } /*=============== 6. INVOICE GENERATOR ===============*/ .invoice__container { align-items: center; } .invoice__preview img { border-radius: 12px; box-shadow: var(--shadow-lg); } .invoice__plans { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; } .invoice__plan-badge { background-color: var(--container-color); color: var(--primary-color-dark); font-weight: var(--font-medium); padding: 0.4rem 0.8rem; border-radius: 8px; font-size: var(--small-font-size); } /*=============== 7. ADS MANAGER ===============*/ .ads { background-color: var(--container-color); } .ads__container { align-items: center; } .ads__preview-card { background-color: var(--white-color); border-radius: 16px; padding: 1.5rem; box-shadow: var(--shadow-lg); transform: perspective(1000px) rotateY(10deg); } .ads__preview-card h4 { font-size: var(--h3-font-size); margin-bottom: 1rem; border-bottom: 1px solid #eee; padding-bottom: 0.5rem; } .ads__preview-content { display: flex; gap: 1rem; margin-bottom: 1.5rem; } .ads__preview-content img { width: 100px; height: 100px; border-radius: 8px; object-fit: cover; flex-shrink: 0; } .ads__preview-text strong { font-size: var(--normal-font-size); color: var(--secondary-color); display: block; margin-bottom: 0.25rem; } .ads__preview-text p { font-size: var(--small-font-size); color: var(--text-color-light); margin-bottom: 0.5rem; } .ads__preview-text a { font-size: var(--small-font-size); font-weight: var(--font-medium); } .ads__preview-stats { display: flex; justify-content: space-between; font-size: var(--small-font-size); color: var(--text-color-light); border-top: 1px solid #eee; padding-top: 1rem; } .ads__preview-stats span { display: flex; align-items: center; gap: 0.25rem; } /*=============== 8. REFERRAL PROGRAM ===============*/ .referral__container { max-width: 800px; } .referral__meter { background-color: var(--white-color); border-radius: 16px; padding: 2rem; box-shadow: var(--shadow-lg); } .referral__meter h3 { text-align: center; font-size: var(--h2-font-size); margin-bottom: 1.5rem; } .referral__meter-bar { width: 100%; height: 20px; background-color: var(--container-color); border-radius: 50px; overflow: hidden; margin-bottom: 2rem; } .referral__meter-fill { width: 0%; /* JS will animate this */ height: 100%; background: linear-gradient(90deg, var(--accent-color), var(--primary-color)); border-radius: 50px; transition: width 2s cubic-bezier(0.25, 0.8, 0.25, 1); } .referral__analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; text-align: center; } .referral__stat strong { font-size: var(--normal-font-size); color: var(--text-color-light); display: block; } .referral__stat span { font-size: var(--h2-font-size); font-weight: var(--font-bold); color: var(--secondary-color); } /*=============== 9. BULK MESSAGING ===============*/ .bulk-sms { background-color: var(--container-color); } .bulk-sms__container { align-items: center; } .bulk-sms__animation-area { position: relative; min-height: 250px; display: none; /* Mobile hidden */ } /*=============== 10. P2P TRANSFERS ===============*/ .p2p__container { align-items: center; } .p2p__animation-area { display: flex; justify-content: center; align-items: center; gap: 1.5rem; padding: 2rem 0; } .p2p-avatar { text-align: center; } .p2p-avatar img { width: 100px; height: 100px; border-radius: 50%; box-shadow: var(--shadow-md); border: 4px solid var(--white-color); } .p2p-avatar span { display: block; margin-top: 0.5rem; font-weight: var(--font-semi-bold); font-size: var(--h3-font-size); } .p2p-arrow { font-size: 3rem; color: var(--primary-color); } /*=============== 11. PRICING ===============*/ .pricing { background-color: var(--container-color); } .pricing__container { grid-template-columns: 1fr; gap: 2rem; } .pricing__card { position: relative; background-color: var(--white-color); border-radius: 16px; padding: 2rem; box-shadow: var(--shadow-md); transition: var(--transition-slow); border: 2px solid transparent; } .pricing__card:hover { transform: translateY(-10px) perspective(1000px); box-shadow: var(--shadow-lg); } .pricing__card--featured { border: 2px solid var(--primary-color); box-shadow: var(--shadow-3d); } .pricing__card--featured:hover { box-shadow: var(--shadow-3d-hover); } .pricing__badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background-color: var(--primary-color); color: var(--white-color); padding: 0.4rem 1rem; border-radius: 50px; font-size: var(--small-font-size); font-weight: var(--font-semi-bold); } .pricing__title { font-size: var(--h2-font-size); text-align: center; margin-bottom: 1rem; } .pricing__price { text-align: center; margin-bottom: 2rem; } .pricing__price-amount { font-size: var(--h1-font-size); font-weight: var(--font-bold); color: var(--secondary-color); } .pricing__price-term { font-size: var(--normal-font-size); color: var(--text-color-light); } .pricing__features { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; } .pricing__features li { display: flex; align-items: center; gap: 0.75rem; } .pricing__features ion-icon { font-size: 1.5rem; color: var(--primary-color); flex-shrink: 0; } .pricing__features ion-icon[name="close-outline"] { color: var(--text-color-light); } /*=============== 12. TESTIMONIALS ===============*/ .testimonials-slider { padding-bottom: 3.5rem; /* Space for nav buttons */ } .testimonial__card { background-color: var(--white-color); padding: 2rem; border-radius: 16px; box-shadow: var(--shadow-md); text-align: center; max-width: 600px; margin: 0 auto; } .testimonial__avatar { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 1rem auto; border: 3px solid var(--primary-color); } .testimonial__text { font-size: var(--h3-font-size); font-style: italic; color: var(--text-color-light); margin-bottom: 1rem; } .testimonial__rating { margin-bottom: 1rem; color: var(--accent-color); font-size: 1.25rem; } .testimonial__name { font-size: var(--normal-font-size); font-weight: var(--font-semi-bold); } .swiper-button-next, .swiper-button-prev { color: var(--primary-color); } /*=============== 13. FAQ ===============*/ .faq__container { max-width: 800px; display: flex; flex-direction: column; gap: 1rem; } .faq__item { background-color: var(--white-color); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; } .faq__header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; cursor: pointer; } .faq__question { font-size: var(--h3-font-size); } .faq__icon { font-size: 1.5rem; color: var(--primary-color); transition: var(--transition-fast); flex-shrink: 0; } .faq__content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; } .faq__content p { padding: 0 1.5rem 1.5rem 1.5rem; color: var(--text-color-light); line-height: 1.7; } /* Active FAQ item */ .faq__item.active .faq__content { max-height: 300px; /* Adjust as needed */ } .faq__item.active .faq__icon { transform: rotate(180deg); } /*=============== 14. DOWNLOAD ===============*/ .download { background-color: var(--secondary-color); color: var(--white-color); } .download__container { align-items: center; } .download .section__title--left, .download .section__subtitle--left { color: var(--white-color); } .download .section__subtitle--left { opacity: 0.8; } .download__buttons { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; } .download__btn img { height: 55px; transition: var(--transition-fast); } .download__btn:hover img { transform: scale(1.05); } .download__image-area { display: flex; justify-content: center; } .download__image { width: 300px; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.2)); } /*=============== 15. FOOTER ===============*/ .footer { background-color: var(--secondary-color); color: #E0E0E0; padding-top: 4rem; } .footer__container { grid-template-columns: 1fr; gap: 2.5rem; } .footer__logo img { width: 120px; margin-bottom: 1rem; } .footer__description { font-size: var(--normal-font-size); color: #E0E0E0; opacity: 0.8; } .footer__title { font-size: var(--h3-font-size); color: var(--white-color); margin-bottom: 1rem; } .footer__links { display: flex; flex-direction: column; gap: 0.75rem; } .footer__link { color: #E0E0E0; opacity: 0.8; transition: var(--transition-fast); } .footer__link:hover { color: var(--white-color); opacity: 1; padding-left: 5px; } .footer__socials { display: flex; gap: 1.5rem; } .footer__social-link { font-size: 1.5rem; color: var(--white-color); opacity: 0.8; transition: var(--transition-fast); } .footer__social-link:hover { color: var(--primary-color); opacity: 1; transform: translateY(-3px); } .footer__bottom { padding: 2rem 0; margin-top: 3rem; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; } .footer__copyright, .footer__powered-by { font-size: var(--small-font-size); opacity: 0.7; } .footer__powered-by { margin-top: 0.25rem; } .footer__powered-by strong { color: var(--white-color); opacity: 0.9; } /*=============== SCROLL UP ===============*/ .scroll-up { position: fixed; right: 1.5rem; bottom: -30%; /* Hidden by default */ background-color: var(--primary-color); color: var(--white-color); width: 40px; height: 40px; border-radius: 8px; display: inline-flex; justify-content: center; align-items: center; font-size: 1.25rem; box-shadow: var(--shadow-md); z-index: var(--z-fixed); transition: all 0.4s ease; } .scroll-up:hover { background-color: var(--primary-color-dark); transform: translateY(-4px); } /* Show scroll up */ .show-scroll { bottom: 3rem; } /*=============== BREAKPOINTS (Mobile-First) ===============*/ /* For small devices (375px+) */ @media screen and (min-width: 375px) { .container { margin-left: 1rem; margin-right: 1rem; } .hero__phone-img { width: 300px; } } /* For medium devices (tablets, 768px+) */ @media screen and (min-width: 768px) { .section { padding: 6rem 0 3rem; } .nav { height: calc(var(--header-height) + 1.5rem); } .nav__toggle { display: none; } .nav__list { flex-direction: row; gap: 2.5rem; } .nav__menu { width: auto; position: static; height: auto; background: none; box-shadow: none; padding: 0; } .nav__link.btn { /* Button in nav */ margin-left: 1rem; } .hero__container { grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; height: calc(100vh - var(--header-height) - 1.5rem); } .hero__content { text-align: left; } .hero__buttons { justify-content: flex-start; } .hero__phone-img { width: 400px; } .features__container { grid-template-columns: repeat(4, 1fr); } .wallet__container { grid-template-columns: 1fr 1fr; } .wallet__animation-area { display: block; /* Show on desktop */ } .reseller__container { grid-template-columns: 1fr 1.2fr; } .invoice__container { grid-template-columns: 1fr 1fr; } .ads__container { grid-template-columns: 1fr 1fr; } .bulk-sms__container, .p2p__container { grid-template-columns: 1fr 1fr; } .bulk-sms__animation-area { display: block; /* Show on desktop */ } .pricing__container { grid-template-columns: repeat(3, 1fr); max-width: 1000px; margin: 0 auto; } .download__container { grid-template-columns: 1fr 1fr; } .download__buttons { flex-direction: row; } .footer__container { grid-template-columns: 2fr 1fr 1fr 1fr 1.5fr; } } /* For large devices (desktops, 1024px+) */ @media screen and (min-width: 1024px) { .container { margin-left: auto; margin-right: auto; } .hero__phone-img { width: 450px; } .app-showcase-slider .swiper-slide img { width: 300px; } }