/* ========================================================================== PAKPAY — mobile. Loaded site-wide, last, so it wins. Breakpoints: 1024 tablet · 860 small tablet · 640 phone · 400 tiny phone ========================================================================== */ /* ---------- global safety ---------- */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} /* The off-canvas drawers sit outside the viewport, which makes the page horizontally scrollable unless it is clipped. It has to be on as well as — body alone does nothing. `clip` rather than `hidden` because `hidden` turns the element into a scroll container and kills position:sticky, which the nav, topbar and docs rail all rely on. */ html,body{overflow-x:clip} @supports not (overflow:clip){ html,body{overflow-x:hidden} } img,svg,video{max-width:100%;height:auto} /* nothing may force the page wider than the screen */ .wrap,.wrap-sm{width:100%} /* iOS zooms the whole page when a focused input is under 16px. */ @media(max-width:860px){ input[type=text],input[type=email],input[type=password],input[type=number], input[type=url],input[type=date],input[type=tel],select,textarea{ font-size:16px!important;padding:11px 13px} .btn,.dm-btn{min-height:44px} .btn-sm{min-height:36px} a,button,label,summary{-webkit-tap-highlight-color:rgba(10,107,61,.12)} } /* respect the notch */ @supports(padding:max(0px)){ @media(max-width:860px){ .wrap,.wrap-sm{padding-left:max(18px,env(safe-area-inset-left)); padding-right:max(18px,env(safe-area-inset-right))} } } /* ---------- scrollable tables get an edge hint ---------- */ .table-wrap,.dm-tw{position:relative} @media(max-width:860px){ .table-wrap,.dm-tw{ background: linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)) left center/34px 100% no-repeat, linear-gradient(90deg,rgba(255,255,255,0),#fff 70%) right center/34px 100% no-repeat, radial-gradient(farthest-side at 0 50%,rgba(17,21,15,.14),transparent) left center/12px 100% no-repeat, radial-gradient(farthest-side at 100% 50%,rgba(17,21,15,.14),transparent) right center/12px 100% no-repeat; background-attachment:local,local,scroll,scroll} .tbl th,.tbl td,.dm-tbl th,.dm-tbl td{padding-left:11px;padding-right:11px} .tbl td,.dm-tbl td{font-size:13px} } /* ========================================================================== PUBLIC NAV — hamburger drawer ========================================================================== */ .nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px; border:1px solid var(--line-strong);border-radius:9px;background:#fff;cursor:pointer; padding:0;flex-shrink:0} .nav-toggle span{display:block;width:17px;height:1.7px;background:var(--ink);border-radius:2px; position:relative;transition:.22s} .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:17px; height:1.7px;background:var(--ink);border-radius:2px;transition:.22s} .nav-toggle span::before{top:-5.5px} .nav-toggle span::after{top:5.5px} body.nav-open .nav-toggle span{background:transparent} body.nav-open .nav-toggle span::before{top:0;transform:rotate(45deg)} body.nav-open .nav-toggle span::after{top:0;transform:rotate(-45deg)} .nav-drawer{display:none} /* visibility keeps the closed drawer out of hit-testing and layout measurement while still allowing the slide transition */ .nav-drawer,.side{visibility:hidden} body.nav-open .nav-drawer,body.side-open .side{visibility:visible} @media(min-width:861px){ .side{visibility:visible} } .nav-scrim{position:fixed;inset:0;background:rgba(17,21,15,.42);z-index:38;opacity:0; pointer-events:none;transition:opacity .22s} body.nav-open .nav-scrim{opacity:1;pointer-events:auto} @media(max-width:860px){ .nav-toggle{display:flex} .nav-pub .inner{height:60px;gap:10px} .nav-pub .nav-actions{display:none} /* moved into the drawer */ .nav-drawer{display:block;position:fixed;top:0;right:0;bottom:0;width:min(84vw,320px); background:#fff;z-index:40;box-shadow:-14px 0 40px -14px rgba(17,21,15,.35); transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1),visibility .26s; padding:20px 20px calc(24px + env(safe-area-inset-bottom));overflow-y:auto; display:flex;flex-direction:column;gap:4px} body.nav-open .nav-drawer{transform:none} body.nav-open{overflow:hidden} .nav-drawer .dh{display:flex;align-items:center;justify-content:space-between; padding-bottom:16px;margin-bottom:10px;border-bottom:1px solid var(--line)} .nav-drawer a.dl{display:flex;align-items:center;gap:11px;padding:12px 12px;border-radius:9px; color:var(--ink-2);font-size:15px;font-weight:500;text-decoration:none;min-height:46px} .nav-drawer a.dl:hover,.nav-drawer a.dl:active{background:var(--bg-soft);color:var(--ink)} .nav-drawer a.dl svg{width:18px;height:18px;opacity:.7;flex-shrink:0} .nav-drawer .dsep{height:1px;background:var(--line);margin:12px 0} .nav-drawer .btn{width:100%;margin-bottom:9px} } /* ========================================================================== PANELS — off-canvas sidebar ========================================================================== */ .side-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px; border:1px solid var(--line-strong);border-radius:9px;background:#fff;cursor:pointer;padding:0; flex-shrink:0;margin-right:12px} .side-toggle svg{width:19px;height:19px} .side-scrim{position:fixed;inset:0;background:rgba(17,21,15,.42);z-index:29;opacity:0; pointer-events:none;transition:opacity .22s} body.side-open .side-scrim{opacity:1;pointer-events:auto} @media(max-width:860px){ .shell{flex-direction:row} .side-toggle{display:flex} /* the sidebar becomes a real drawer instead of a cramped scrolling strip */ .side{position:fixed;top:0;left:0;bottom:0;width:min(80vw,282px);z-index:30; flex-direction:column;overflow-y:auto;padding:18px 14px calc(20px + env(safe-area-inset-bottom)); transform:translateX(-100%); transition:transform .26s cubic-bezier(.4,0,.2,1),visibility .26s; border-right:1px solid var(--line);gap:3px;align-items:stretch} body.side-open .side{transform:none} body.side-open{overflow:hidden} .side .side-brand,.side .sect{display:block} .side .side-brand{padding:2px 10px 16px} .side a.nav{min-height:44px;font-size:15px} .side a.nav.on::before{display:block} .main{width:100%;min-width:0} .topbar{height:56px;padding:0 14px;gap:10px} .topbar h1{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar > div{gap:8px!important;font-size:13px;flex-shrink:0} .content{padding:14px} } /* the balance chip in the merchant topbar is the first thing to drop */ @media(max-width:520px){ .topbar .small.muted{display:none} .topbar > div > span[style*="width:1px"]{display:none} } /* ========================================================================== SHARED COMPONENTS ========================================================================== */ @media(max-width:860px){ .stats{grid-template-columns:1fr 1fr;gap:11px;margin-bottom:18px} .stat{padding:14px 15px;border-radius:12px} .stat .v{font-size:20px} .stat .k{font-size:10.5px} .stat .sub{font-size:11.5px} .card{border-radius:12px} .card-pad,.card-body{padding:16px} .card-head{padding:13px 16px} .filters{gap:9px} .filters .field{min-width:0;flex:1 1 46%} .filters .btn{flex:1 1 100%} .row,.row-3{grid-template-columns:1fr!important;gap:0} .row > *,.row-3 > *{margin-bottom:16px} .pg-hero{padding:34px 0 30px} .pg-hero h1{font-size:26px} .pg-hero p.sub{font-size:15px} .pg-hero .hstack{gap:8px} .pg-hero .btn{flex:1 1 auto} .pager{padding:12px 14px;flex-wrap:wrap;justify-content:center} .key-box{flex-wrap:wrap;font-size:11.5px} .key-box .btn{margin-left:0} .alert{font-size:13.5px;padding:11px 13px} } @media(max-width:400px){ .stats{grid-template-columns:1fr} } /* ========================================================================== LANDING PAGE ========================================================================== */ @media(max-width:980px){ .lp-hero{padding:44px 0 56px} .lp-demo{padding:20px 0 0} } @media(max-width:860px){ .lp-sec{padding:52px 0} .lp-sec-tight{padding:44px 0} .lp-head{margin-bottom:32px} .lp-head h2{font-size:25px} .lp-head p{font-size:15px} .lp-hero h1{font-size:32px;line-height:1.1} .lp-hero .lead{font-size:15.5px;margin:16px 0 24px} .lp-pill{font-size:11.5px;margin-bottom:16px} .lp-cta{gap:9px} .lp-cta .btn{flex:1 1 100%;justify-content:center} .lp-trust{font-size:12px;gap:9px} .lp-trust > span:nth-child(3){display:none} .lp-trust > span:last-child{flex-basis:100%;line-height:1.5} /* the demo card scales down instead of overflowing */ .lp-phone,.lp-demo-inner{width:100%;max-width:330px} .lp-screen{min-height:326px;padding:20px 18px 22px} .lp-step{inset:20px 18px 22px} .lp-amt{font-size:27px} .lp-band{padding:24px 0} .lp-stats{grid-template-columns:1fr 1fr;gap:18px} .lp-stats .n{font-size:22px} .lp-stats .l{font-size:11.5px} .lp-steps{grid-template-columns:1fr;gap:8px;text-align:left} .lp-steps::before{display:none} .lp-step-card{display:flex;gap:14px;text-align:left;align-items:flex-start; padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff} .lp-num{width:42px;height:42px;margin:0;border-radius:11px;flex-shrink:0} .lp-num svg{width:19px;height:19px} .lp-step-card h3{font-size:14.5px;margin-bottom:4px} .lp-step-card p{font-size:13px} .lp-tabs{padding:6px 6px 0} .lp-tab{padding:7px 12px;font-size:12px} .lp-pane{padding:16px 14px;font-size:11.5px;line-height:1.65} .lp-copy{top:9px;right:9px;padding:5px 10px} .lp-calc-l,.lp-calc-r{padding:22px 18px} .lp-calc-amt{font-size:31px} .lp-calc-row{font-size:13.5px} .lp-slider{height:6px} .lp-slider::-webkit-slider-thumb{width:26px;height:26px} .lp-chip{padding:6px 13px;min-height:34px} .lp-feats{gap:12px} .lp-feat{padding:19px} .lp-feat h3{font-size:15px} .lp-feat p{font-size:13px} .lp-mini{grid-template-columns:1fr 1fr;gap:9px;padding:14px 14px 0} .lp-mini .v{font-size:16px} .lp-window-bar{height:34px} .lp-q summary{padding:14px 16px;font-size:14.5px} .lp-q .a{padding:0 16px 15px;font-size:13.5px} .lp-final{padding:48px 0} .lp-final h2{font-size:24px} .lp-final p{font-size:15px} .lp-final .wrap{flex-direction:column;align-items:flex-start;gap:20px} .lp-final .btn{width:100%;justify-content:center} .lp-final .wrap > div:last-child{width:100%} } @media(max-width:600px){ .lp-hero h1{font-size:28px} .lp-float{padding:9px 11px} .lp-float b{font-size:11px} .lp-float small{font-size:10px} .lp-float .ic{width:24px;height:24px} } @media(max-width:400px){ .lp-hero h1{font-size:25px} .lp-stats{grid-template-columns:1fr;gap:14px} .lp-mini{grid-template-columns:1fr} } /* ========================================================================== DOCS ========================================================================== */ @media(max-width:900px){ .docs{gap:0} /* the sidebar becomes a horizontal chip rail pinned under the header */ .docs-nav{position:sticky;top:60px;z-index:9;background:rgba(255,255,255,.95); backdrop-filter:blur(8px);margin:0 -18px 22px;padding:11px 18px; border-bottom:1px solid var(--line);display:flex;gap:8px;overflow-x:auto; -webkit-overflow-scrolling:touch;scrollbar-width:none} .docs-nav::-webkit-scrollbar{display:none} .docs-nav .g{display:none} .docs-nav a{border:1px solid var(--line-strong);border-radius:20px;padding:6px 13px; white-space:nowrap;font-size:13px;margin:0;background:#fff;color:var(--ink-2)} .docs-nav a:hover{border-color:var(--accent)} .docs-body h2{margin:32px 0 12px;scroll-margin-top:118px} .docs-body h3{scroll-margin-top:118px} .docs-body p,.docs-body li{font-size:14px} pre.code{font-size:11.5px;padding:14px;line-height:1.65} code.inline{font-size:11.5px;word-break:break-word} } /* ========================================================================== CHECKOUT — the page most likely to be opened on a phone ========================================================================== */ @media(max-width:640px){ .checkout{padding:18px 14px calc(18px + env(safe-area-inset-bottom));align-items:flex-start} .checkout-box{max-width:100%} .pay-amount{font-size:30px} .method{padding:13px 14px;min-height:62px} .method .logo{width:36px;height:36px} .method .nm{font-size:14px} .method .ds{font-size:12px} .auth{padding:22px 14px;align-items:flex-start} .auth-box{max-width:100%} .auth-box .card-pad{padding:22px 18px} } /* ========================================================================== DEMO STORE ========================================================================== */ @media(max-width:860px){ .dm-wrap{padding:0 16px} main{padding:20px 0 40px} .dm-grid{gap:16px} .dm-nav-in{height:58px} .dm-brand{font-size:15.5px} .dm-hero{padding:22px;border-radius:14px} .dm-hero-v{font-size:33px} .dm-hero-cta{gap:8px} .dm-hero-cta .dm-btn{flex:1 1 auto;justify-content:center} .dm-card-b{padding:16px} .dm-card-h{padding:13px 16px} .dm-wallets{grid-template-columns:1fr} .dm-wal{min-height:58px} .dm-chip{min-height:36px} h1{font-size:24px} } @media(max-width:520px){ .dm-nav-right{gap:9px} .dm-bal-v{font-size:13.5px} .dm-bal-k{font-size:9.5px} .dm-foot-in{flex-direction:column;align-items:flex-start;gap:12px} .dm-status{margin:20px auto} } /* ========================================================================== MOTION ========================================================================== */ /* AOS's horizontal reveals start 100px off-screen, which is the classic source of sideways jank on a phone. Make them vertical below the tablet breakpoint. */ @media(max-width:860px){ [data-aos="fade-right"],[data-aos="fade-left"], [data-aos="zoom-in-up"],[data-aos="zoom-in"]{ transform:translate3d(0,18px,0)!important} [data-aos="fade-right"].aos-animate,[data-aos="fade-left"].aos-animate, [data-aos="zoom-in-up"].aos-animate,[data-aos="zoom-in"].aos-animate{ transform:translate3d(0,0,0)!important} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .side,.nav-drawer{transition:none} }