img{max-width:100%;display:block;} .heropay-hero{ position:relative; min-height:100vh; display:flex;flex-direction:column;align-items:center;justify-content:center; padding:140px 0 0; text-align:center; background: radial-gradient(60% 50% at 50% 0%, rgba(var(--branding-rgb),0.16), transparent 70%), var(--background); overflow:hidden; } .heropay-glow{ position:absolute;width:520px;height:520px;border-radius:50%; background:var(--g-branding);opacity:.18;filter:blur(120px); top:-180px;left:50%;transform:translateX(-50%);pointer-events:none; } .heropay-inner{position:relative; padding:0 6%; z-index:2;max-width:720px;display:flex;flex-direction:column;align-items:center;} .heropay-eyebrow{ font-family:var(--hg-font);letter-spacing:.14em;text-transform:uppercase; font-size:.75rem;font-weight:600;color:var(--branding); border:1px solid rgba(var(--branding-rgb),0.4);padding:6px 14px; border-radius:999px;margin-bottom:22px; } .heropay-title{ font-family:var(--low-font);font-weight:800; font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.12;letter-spacing:-.01em; } .heropay-type{ background:var(--g-branding);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; } .heropay-cursor{color:var(--branding);animation:heropayBlink 1s step-end infinite;} @keyframes heropayBlink{50%{opacity:0;}} .heropay-sub{ font-family:var(--hg-font);color:var(--light-text);opacity:.85; font-size:1.02rem;line-height:1.6;max-width:560px;margin:20px auto 0; } .heropay-phone{position:relative;margin:44px auto 0;width:100%;} .heropay-phone-img{ object-fit:cover; } .heropay-phone-glow{ position:absolute;inset:-30px;z-index:-1; background:var(--g-branding);filter:blur(60px);opacity:.35;border-radius:50%; } .heropay-marquee{ position:relative;z-index:2;width:100%;margin-top:0; padding:0px 0 20px;background:var(--g-branding); overflow:hidden;white-space:nowrap; } .heropay-marquee-track{ display:inline-flex;gap:40px;animation:heropayScroll 18s linear infinite; } .heropay-marquee-track span{ font-family:var(--low-font);font-weight:700;color:#04140a; font-size:1rem;display:inline-flex;align-items:center;gap:10px; text-transform:uppercase;letter-spacing:.04em; } @keyframes heropayScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} .payx-hook{ font-family:var(--low-font);font-weight:800; font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.25;max-width:640px; } .payx-lead{ font-family:var(--hg-font);color:var(--light-text);opacity:.8; font-size:1rem;line-height:1.7;max-width:600px;margin-top:16px; } .payx-about{padding:90px 6% 70px;display:flex;flex-direction:column;align-items:center;text-align:center;} .payx-grid{ margin-top:46px;width:100%;max-width:1040px; display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px; } .payx-card{ background:var(--card-bg);border:1px solid var(--simple-color); border-radius:var(--radius);padding:26px 22px;text-align:left; transition:transform .2s ease, border-color .2s ease; } .payx-card:hover{transform:translateY(-4px);border-color:rgba(var(--branding-rgb),0.5);} .payx-icon{ width:44px;height:44px;border-radius:var(--radius-sm); background:rgba(var(--branding-rgb),0.12);color:var(--branding); display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:16px; } .payx-card h3{font-family:var(--low-font);font-size:1.02rem;margin-bottom:8px;} .payx-card p{font-family:var(--hg-font);font-size:.88rem;color:var(--light-text);opacity:.75;line-height:1.55;} .payx-app{ padding:70px 6% 100px;display:grid;grid-template-columns:1fr 1fr; gap:60px;align-items:center;max-width:1180px;margin:0 auto; } .payx-app-copy .payx-hook{text-align:left;} .payx-app-copy .payx-lead{text-align:left;margin-left:0;} .payx-app-list{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:12px;} .payx-app-list li{ display:flex;align-items:center;gap:10px;font-family:var(--hg-font); font-size:.92rem;color:var(--light-text); } .payx-app-list i{color:var(--branding);font-size:1.1rem;} .payx-app-media{position:relative;display:flex;justify-content:center;align-items:center;min-height:420px;} .payx-shot{ position:absolute;width:180px;border-radius:20px;border:1px solid var(--simple-color); box-shadow:var(--low-shadow);aspect-ratio:9/18;object-fit:cover; } .payx-shot-back{left:8%;top:6%;transform:rotate(-6deg);opacity:.85;} .payx-shot-front{right:6%;bottom:0;transform:rotate(4deg);z-index:2;} .payx-yt{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:150px;aspect-ratio:9/16;border-radius:18px;overflow:hidden; border:2px solid var(--branding);box-shadow:var(--brand-shadow);z-index:3;background:#000; } .payx-yt iframe{width:100%;height:100%;border:0;} .payx-fallback{ width:100%;height:100%;display:flex;align-items:center;justify-content:center; background:linear-gradient(160deg, var(--card-bg), #0d0f0b); color:var(--branding);font-size:1.6rem;border-radius:inherit; } @media (max-width:820px){ .payx-app{grid-template-columns:1fr;text-align:center;} .payx-app-copy .payx-hook, .payx-app-copy .payx-lead{text-align:center;margin:0 auto;} .payx-app-list{align-items:center;} .payx-app-media{margin-top:20px;} } @media (max-width:520px){ .hero-register-row{flex-direction:column;} .heropay-hero{padding-top:120px;} } .wx-page { max-width: 1200px; margin: 0 auto; padding-bottom: 60px; } .gradient-bg { background: linear-gradient(180deg, var(--background) 0%, rgba(var(--branding-rgb), 0.26) 20%, rgba(var(--branding-rgb), 0.46) 40%, rgba(var(--branding-rgb), 0.76) 60%, var(--branding) 100% ), var(--background); border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); padding-bottom: 35px; } .wx-hero { padding: 20px 6% 34px; text-align: center; } .wx-hero-label { font-family: var(--hg-font); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--light-text); opacity: .85; } .wx-balance-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 5px; } .wx-balance { font-family: var(--low-font); font-weight: 800; font-size: clamp(2rem, 7vw, 2.6rem); } .wx-naira { opacity: .85; margin-right: 4px; } .wx-eye { background: rgba(var(--branding-rgb), 0.12); border: 1px solid rgba(var(--branding-rgb), 0.35); color: var(--branding); width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; transition: transform .15s ease; } .wx-eye:active { transform: scale(.92); } .wx-sync { margin-top: 5px; font-size: 11px; color: var(--light-text); opacity: .65; } .wx-actions { margin: -22px 6% 0; position: relative; z-index: 2; background: var(--background); border: 1px solid var(--simple-color); border-radius: var(--radius); display: flex; justify-content: space-between; padding: 10px 10px; } .wx-action { background: none; border: none; color: var(--text-color); display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; font-size: .78rem; font-family: var(--hg-font); } .wx-action-icon { width: 46px; height: 46px; border-radius: 50%; background: rgba(var(--branding-rgb), 0.25); color: var(--branding); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; transition: transform .15s ease, background .15s ease; } .wx-action:active .wx-action-icon { transform: scale(.9); background: rgba(var(--branding-rgb), 0.45); } .wx-carousel-wrap { padding: 5px 0 0; } .wx-carousel { display: flex; gap: 5px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .wx-carousel::-webkit-scrollbar { display: none; } .wx-slide { flex: 0 0 90%; height: 130px; object-fit: fill; border-radius: var(--radius-sm); scroll-snap-align: start; border: 1px solid var(--simple-color); } .wx-fallback { display: flex; align-items: center; justify-content: center; background: var(--card-bg); color: var(--branding); font-size: 1.6rem; } .wx-section-title { font-family: var(--low-font); font-weight: 700; font-size: 1.15rem; padding: 30px 6% 14px; } .wx-services { padding: 0 6%; } .wx-cat { margin-bottom: 15px; } .wx-cat-title { font-family: var(--hg-font); font-weight: 600; font-size: .95rem; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } .wx-cat-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .wx-cat-row::-webkit-scrollbar { display: none; } .wx-service { flex: 0 0 auto; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--light-text); text-align: center; } .wx-service-icon { width: 35px; height: 35px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; } .wx-service-icon img { width: 100%; height: 100%; object-fit: fill; } .wx-service-name { font-size: .74rem; line-height: 1.2; color: var(--light-text); opacity: .85; } .wx-tx { padding: 10px 6% 0; } .wx-tx-title { text-align: center; font-family: var(--low-font); font-weight: 700; font-size: 1.05rem; margin-bottom: 18px; } .wx-tabs { display: flex; gap: 10px; margin-bottom: 18px; } .wx-tab { flex: 1; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--simple-color); background: transparent; color: var(--light-text); font-weight: 600; font-size: .85rem; } .wx-tab.active { background: var(--g-branding); color: #04140a; border-color: transparent; } .wx-tx-link { text-decoration: none; color: inherit; display: block; margin-bottom: 14px; } .wx-tx-card { background: var(--card-bg); border: 1px solid var(--simple-color); border-radius: var(--radius); padding: 16px 18px; } .wx-tx-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .wx-tx-who { display: flex; align-items: center; gap: 10px; } .wx-tx-img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--simple-color); } .wx-tx-name { font-size: .88rem; font-weight: 700; color: var(--light-text); } .wx-tx-date { font-size: .72rem; color: var(--light-text); opacity: .55; margin-top: 2px; } .wx-status { padding: 4px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700; color: #fff; white-space: nowrap; } .wx-tx-details { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--simple-color); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: .8rem; } .wx-tx-details div { color: var(--light-text); opacity: .75; } .wx-tx-details strong { opacity: 1; color: var(--text-color); display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; } .wx-amt-neutral strong, .wx-amt-neutral { color: var(--info); } .wx-amt-neg strong, .wx-amt-neg { color: var(--danger); } .wx-amt-pos strong, .wx-amt-pos { color: var(--success); } .wx-no-tx { text-align: center; padding: 2rem; color: var(--light-text); opacity: .6; border: 1px dashed var(--branding); border-radius: var(--radius); } .wx-loading { display: none; text-align: center; padding: 20px 0; } .wx-spinner { width: 26px; height: 26px; border-radius: 50%; margin: 0 auto; border: 3px solid var(--simple-color); border-top-color: var(--branding); animation: wxSpin .8s linear infinite; } @keyframes wxSpin { to { transform: rotate(360deg); } } .wx-loading p { margin-top: 10px; font-size: .82rem; color: var(--branding); } .wx-load-btn { display: block; width: 100%; margin-top: 16px; padding: 12px; background: transparent; border: 1px solid var(--branding); color: var(--branding); border-radius: var(--radius-sm); font-weight: 700; font-size: .85rem; } .wx-soon { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 3rem 1rem; color: var(--light-text); opacity: .7; } .wx-soon i { font-size: 2rem; color: var(--branding); opacity: 1; } @media (min-width: 960px) { .wx-hero { padding: 56px 8% 44px; } .wx-actions { max-width: 640px; margin: -26px auto 0; } .wx-carousel-wrap { padding: 10px 0 0; } .wx-slide { flex: 0 0 32%; height: 160px; min-width:100%; } .wx-main-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; padding: 0 8%; align-items: start; } .wx-services, .wx-tx { padding: 0; } .wx-section-title { padding-left: 0; padding-right: 0; } }