/* ============================================================ BUSINESS . Payments and FX (solution-payments-fx.html) . 2026-10-20 Ground truth: otabek 20.10/Business - Payments and FX/Spec+Html/business-payments-fx.html + business-payments-fx-page-spec.md; the PDF is 1440 x 6962 pt (1 pt = 1 px). Figma "DD-Website" frame "Business - Payments and FX" (1191:23673). Same recipe as sept-corp.css / sept-bcur.css / sept-fam.css:
IS the designer's markup (classes bpay-*, qa/oracle/designer_to_main.py) and this is his stylesheet with the mechanical changes, transcribed by qa/oracle/skin_css.py: .x -> [data-skin="bpay"] #main .bpay-x ; his :root vars -> #main hero photo -> his CSS background, data: URI -> sept/solution-payments-fx/hero.webp; his radial shade kept 18 embedded images -> his named files under sept/solution-payments-fx/ (md5-matched) his 4 @font-face -> dropped, Inter comes from fonts.css body min-width -> gone (D1): his numbers hold from 1300 up; the block at the end relaxes them below. nav + footer -> his rules dropped, chrome stays live (D2): dd-nav.css + sept-footer.css Scope is data-skin (dd-shell.css keys 21 rules on [data-sept]). data-followup="biz" is OFF this page (followup.css !important rules inside main); its two chrome blocks are repeated below, keyed on data-skin. Deviations from his HTML, each on record (Yuval 2026-10-20 "1" = all ok): hero live hero chips dropped (03.10); the live FSCS line stays as a second caption line in his caption style (hero 684 -> 728), as on solution-multi-currency. headings his hard
line ends joined, the live string is one node; his widths draw the lines. copy live text wins: "USD and AED", "Prepare a single payment, upload a batch ...", "SWIFT charges", "•" separators in the caption. reveals kept (D3): scroll-driven, same timing family as alt-home.css, defined at the end. ============================================================ */ /* ---------- resets his page relied on, scoped to main (skin_css.py standard block) ---------- */ html[data-skin="bpay"] body{background:#fff} [data-skin="bpay"] main{ width:100%;overflow-x:clip;color:#121212;font-size:16px;line-height:normal;letter-spacing:0; font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none; } [data-skin="bpay"] #main *,[data-skin="bpay"] #main *::before,[data-skin="bpay"] #main *::after{box-sizing:border-box} [data-skin="bpay"] #main *{margin:0;padding:0} [data-skin="bpay"] #main ul{list-style:none} [data-skin="bpay"] #main a{color:inherit;text-decoration:none} [data-skin="bpay"] #main img,[data-skin="bpay"] #main svg{display:block} [data-skin="bpay"] #main h1,[data-skin="bpay"] #main h2,[data-skin="bpay"] #main h3,[data-skin="bpay"] #main p{max-width:none;letter-spacing:0;text-wrap:initial} /* ---------- his page, transcribed (skin_css.py) ---------- */ [data-skin="bpay"] #main{--ink:#121212; --ink-nav:#2B2926; --body1:#5C5750; --body2:#555049; --muted:#7B756D; --sand:#F4F3F0; --line:#D6D2C7; --footer-line:#CCC8BC; --orange:#F37F00; --link:#B75F00; --link-footer:#AC5900; --white:#FFFFFF;} [data-skin="bpay"] #main .bpay-wrap{width:1440px;margin:0 auto;position:relative;} /* type */ [data-skin="bpay"] #main .bpay-h1{font-size:52px;line-height:63px;font-weight:500;} [data-skin="bpay"] #main .bpay-h2{font-size:44px;line-height:53px;font-weight:500;color:var(--ink);} [data-skin="bpay"] #main .bpay-t24{font-size:24px;line-height:29px;font-weight:500;color:var(--ink);} [data-skin="bpay"] #main .bpay-t20{font-size:20px;line-height:24px;font-weight:500;color:var(--ink);} [data-skin="bpay"] #main .bpay-p16{font-size:16px;line-height:24px;font-weight:400;} [data-skin="bpay"] #main .bpay-p14{font-size:14px;line-height:21px;font-weight:400;} [data-skin="bpay"] #main .bpay-c-body1{color:var(--body1);} [data-skin="bpay"] #main .bpay-c-body2{color:var(--body2);} [data-skin="bpay"] #main .bpay-c-muted{color:var(--muted);} [data-skin="bpay"] #main .bpay-center{text-align:center;} /* buttons */ [data-skin="bpay"] #main .bpay-btn{display:inline-flex;align-items:center;justify-content:center;height:47px;padding:14px 24px;border-radius:100px; font-size:16px;line-height:19px;white-space:nowrap;flex:none;} [data-skin="bpay"] #main .bpay-btn-dark{background:var(--ink);color:#fff;font-weight:700;} [data-skin="bpay"] #main .bpay-btn-white{background:#fff;color:var(--ink);font-weight:700;} [data-skin="bpay"] #main .bpay-btn-light{background:var(--sand);color:var(--body2);font-weight:500;} [data-skin="bpay"] #main .bpay-btn-light.bpay-on-sand{background:#fff;} [data-skin="bpay"] #main .bpay-btn-ghost-dark{background:rgba(18,18,18,.16);color:#fff;font-weight:500;} /* divider straddling a section boundary */ [data-skin="bpay"] #main .bpay-divider{position:absolute;left:max(140px,calc(50% - 580px));top:-0.5px;width:1160px;height:1px;background:var(--line);z-index:1;} /* 2026-10-26 designer note: the section is full-width, so a fixed left:140px sat left of centre on any viewport wider than 1440 */ /* header block used by centred sections */ [data-skin="bpay"] #main .bpay-head{display:flex;flex-direction:column;align-items:center;gap:20px;} /* ---------- 1. Navbar ---------- */ /* ---------- 2. Hero ---------- */ [data-skin="bpay"] #main .bpay-hero .bpay-wrap{height:684px;padding:0 80px;display:flex;flex-direction:column;align-items:center;gap:20px;} [data-skin="bpay"] #main .bpay-hero-card{width:1280px;height:640px;flex:none;border-radius:48px;overflow:hidden;position:relative; padding:80px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:40px; background: radial-gradient(ellipse 990px 1980px at 73.8% 46.5%, rgba(44,38,32,0) 0%, rgba(44,38,32,0) 13%, rgba(44,38,32,1) 100%), url(sept/solution-payments-fx/hero.webp) center/cover no-repeat, #8C7B6C;} [data-skin="bpay"] #main .bpay-hero-text{width:500px;display:flex;flex-direction:column;gap:20px;color:#fff;} [data-skin="bpay"] #main .bpay-hero-text .bpay-h1{color:#fff;width:500px;} [data-skin="bpay"] #main .bpay-hero-text .bpay-p16{color:#fff;opacity:.8;width:500px;} [data-skin="bpay"] #main .bpay-hero-btns{display:flex;gap:20px;align-items:center;} [data-skin="bpay"] #main .bpay-hero-caption{width:810px;height:24px;color:var(--muted);text-align:center;white-space:nowrap;} /* ---------- 3. Routes ---------- */ [data-skin="bpay"] #main .bpay-routes .bpay-wrap{height:882px;padding:120px 160px 160px;display:flex;flex-direction:column;align-items:center;gap:80px;} [data-skin="bpay"] #main .bpay-routes .bpay-head{width:750px;} [data-skin="bpay"] #main .bpay-route-row{display:flex;gap:30px;align-items:flex-start;width:1120px;} [data-skin="bpay"] #main .bpay-route-card{background:var(--sand);border-radius:24px;height:226px;padding:30px;display:flex;flex-direction:column;gap:30px;flex:none;} [data-skin="bpay"] #main .bpay-route-card .bpay-hdr{display:flex;align-items:center;gap:16px;height:40px;} [data-skin="bpay"] #main .bpay-route-card .bpay-hdr img{width:40px;height:40px;} [data-skin="bpay"] #main .bpay-flag-pair{position:relative;width:72px;height:40px;flex:none;} [data-skin="bpay"] #main .bpay-flag-pair img{position:absolute;top:0;width:40px;height:40px;} [data-skin="bpay"] #main .bpay-flag-pair .bpay-usa{left:0;z-index:1;} [data-skin="bpay"] #main .bpay-flag-pair .bpay-uae{left:32px;z-index:2;} /* ---------- 4. FX ---------- */ [data-skin="bpay"] #main .bpay-fx .bpay-wrap{height:955px;padding:140px 80px 160px;display:flex;flex-direction:column;align-items:center;gap:80px;} [data-skin="bpay"] #main .bpay-fx .bpay-head{width:750px;} [data-skin="bpay"] #main .bpay-fx-row{display:flex;gap:30px;width:1200px;} [data-skin="bpay"] #main .bpay-line-card{border:1px solid var(--line);border-radius:24px;padding:30px;display:flex;flex-direction:column;gap:30px;flex:none;align-items:flex-start;} [data-skin="bpay"] #main .bpay-fx-card{width:277.5px;height:274px;} [data-skin="bpay"] #main .bpay-fx-card .bpay-txt{width:217.5px;display:flex;flex-direction:column;gap:12px;} [data-skin="bpay"] #main .bpay-icon40{width:40px;height:40px;flex:none;} [data-skin="bpay"] #main .bpay-icon50{width:50px;height:50px;flex:none;} /* ---------- 5. Batch ---------- */ [data-skin="bpay"] #main .bpay-batch{background:var(--sand);} [data-skin="bpay"] #main .bpay-batch .bpay-wrap{height:1064px;padding:160px;display:flex;flex-direction:column;align-items:center;gap:100px;} [data-skin="bpay"] #main .bpay-batch-row{display:flex;gap:120px;align-items:flex-start;width:1120px;height:744px;} [data-skin="bpay"] #main .bpay-batch-left{width:480px;display:flex;flex-direction:column;gap:60px;align-items:flex-start;flex:none;} [data-skin="bpay"] #main .bpay-batch-left .bpay-tb{width:480px;display:flex;flex-direction:column;gap:30px;} [data-skin="bpay"] #main .bpay-batch-right{width:520px;display:flex;flex-direction:column;gap:30px;flex:none;} [data-skin="bpay"] #main .bpay-shadow-card{background:#fff;border-radius:24px;box-shadow:0 12px 28px 0 rgba(0,0,0,.06);padding:40px 50px;display:flex;gap:40px;align-items:flex-start;} [data-skin="bpay"] #main .bpay-shadow-card .bpay-txt{width:330px;display:flex;flex-direction:column;gap:15px;} /* ---------- 6. Approvals ---------- */ [data-skin="bpay"] #main .bpay-appr .bpay-wrap{height:938px;padding:160px 80px;display:flex;flex-direction:column;align-items:center;gap:80px;} [data-skin="bpay"] #main .bpay-appr .bpay-head{width:732px;} [data-skin="bpay"] #main .bpay-appr-row{display:flex;gap:30px;width:1200px;} [data-skin="bpay"] #main .bpay-appr-card{width:380px;height:237px;} [data-skin="bpay"] #main .bpay-appr-card .bpay-txt{width:320px;display:flex;flex-direction:column;gap:12px;} [data-skin="bpay"] #main .bpay-appr-card .bpay-body{font-size:16px;line-height:21.6px;color:var(--body1);} /* ---------- 7. Trust ---------- */ [data-skin="bpay"] #main .bpay-trust .bpay-wrap{height:995px;padding:140px 160px 80px;display:flex;flex-direction:column;align-items:center;gap:80px;} [data-skin="bpay"] #main .bpay-trust-row{display:flex;gap:30px;width:1120px;} [data-skin="bpay"] #main .bpay-trust-card{width:353.333px;height:380px;padding:40px;} [data-skin="bpay"] #main .bpay-trust-card .bpay-media{height:120px;display:flex;align-items:center;} [data-skin="bpay"] #main .bpay-trust-card .bpay-txt{width:273.333px;display:flex;flex-direction:column;gap:12px;} [data-skin="bpay"] #main .bpay-trust-card .bpay-ttl{font-size:20px;line-height:27px;font-weight:500;color:var(--ink);} [data-skin="bpay"] #main .bpay-shield-circle{width:100px;height:100px;border-radius:50%;background:#F6F6F6;display:flex;align-items:center;justify-content:center;} [data-skin="bpay"] #main .bpay-iso-pair{display:flex;gap:20px;} [data-skin="bpay"] #main .bpay-iso-pair img{width:93px;height:120px;object-fit:cover;} [data-skin="bpay"] #main .bpay-lnk{color:var(--link);} [data-skin="bpay"] #main .bpay-trust-bottom{width:590px;display:flex;flex-direction:column;align-items:center;gap:40px;} /* ---------- 8. CTA ---------- */ [data-skin="bpay"] #main .bpay-cta .bpay-wrap{height:675px;padding:80px;} [data-skin="bpay"] #main .bpay-cta-card{width:1280px;height:515px;background:var(--sand);border-radius:48px;padding:100px 80px;display:flex;justify-content:center;align-items:center;} [data-skin="bpay"] #main .bpay-cta-inner{width:720px;display:flex;flex-direction:column;align-items:center;gap:60px;} [data-skin="bpay"] #main .bpay-cta-text{width:720px;display:flex;flex-direction:column;align-items:center;gap:30px;} [data-skin="bpay"] #main .bpay-cta-btns{display:flex;gap:20px;} /* ---------- 9. Footer ---------- */ /* ---------- his element rule section{width:100%;position:relative} carried the two .divider hairlines (fx, trust) ---------- */ [data-skin="bpay"] #main section{position:relative;width:100%} /* ---------- 2026-10-26 designer note: the second (FSCS) caption line is off the hero; the box is his fixed 684 again ---------- */ /* ---------- D3: reveals, the alt-home family (alt-home.css already rises every main section h2) ---------- */ @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: view()){ @keyframes bpay-rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}} @keyframes bpay-scale-in{from{opacity:0;transform:translateY(28px) scale(.965)}to{opacity:1;transform:none}} @keyframes bpay-slide-l{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}} @keyframes bpay-slide-r{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}} [data-skin="bpay"] #main .bpay-hero-card{animation:bpay-scale-in both;animation-timeline:view();animation-range:entry 0% entry 42%} [data-skin="bpay"] #main .bpay-route-row,[data-skin="bpay"] #main .bpay-fx-row,[data-skin="bpay"] #main .bpay-appr-row, [data-skin="bpay"] #main .bpay-trust-row,[data-skin="bpay"] #main .bpay-cta-card{animation:bpay-rise both;animation-timeline:view();animation-range:entry 0% entry 48%} [data-skin="bpay"] #main .bpay-batch-left{animation:bpay-slide-l both;animation-timeline:view();animation-range:entry 0% entry 50%} [data-skin="bpay"] #main .bpay-batch-right{animation:bpay-slide-r both;animation-timeline:view();animation-range:entry 0% entry 50%} } } /* ---------- D1: below 1300 his fixed canvas relaxes (desktop only, D4; nothing here is a mobile layout) ---------- */ @media (max-width:1299.98px){ [data-skin="bpay"] #main .bpay-wrap{width:100%;max-width:1440px} [data-skin="bpay"] #main .bpay-divider{left:60px;right:60px;width:auto} [data-skin="bpay"] #main .bpay-hero .bpay-wrap{height:auto;padding:0 40px 20px} [data-skin="bpay"] #main .bpay-hero-card{width:100%;height:auto;min-height:560px;padding:60px} [data-skin="bpay"] #main .bpay-hero-text,[data-skin="bpay"] #main .bpay-hero-text .bpay-h1,[data-skin="bpay"] #main .bpay-hero-text .bpay-p16{width:auto;max-width:500px} [data-skin="bpay"] #main .bpay-hero-btns{flex-wrap:wrap} [data-skin="bpay"] #main .bpay-hero-caption{width:auto;height:auto;max-width:100%;white-space:normal} [data-skin="bpay"] #main .bpay-head,[data-skin="bpay"] #main .bpay-head h2,[data-skin="bpay"] #main .bpay-head p{width:auto!important;max-width:750px} [data-skin="bpay"] #main .bpay-routes .bpay-wrap,[data-skin="bpay"] #main .bpay-fx .bpay-wrap,[data-skin="bpay"] #main .bpay-appr .bpay-wrap{height:auto;padding:100px 40px 120px} [data-skin="bpay"] #main .bpay-route-row,[data-skin="bpay"] #main .bpay-fx-row,[data-skin="bpay"] #main .bpay-appr-row, [data-skin="bpay"] #main .bpay-trust-row{width:100%;max-width:1200px;flex-wrap:wrap} [data-skin="bpay"] #main .bpay-route-card,[data-skin="bpay"] #main .bpay-fx-card,[data-skin="bpay"] #main .bpay-appr-card, [data-skin="bpay"] #main .bpay-trust-card{width:auto!important;flex:1 1 260px;min-width:0;height:auto!important} [data-skin="bpay"] #main .bpay-trust-card{min-height:380px} [data-skin="bpay"] #main .bpay-fx-card .bpay-txt,[data-skin="bpay"] #main .bpay-appr-card .bpay-txt,[data-skin="bpay"] #main .bpay-trust-card .bpay-txt, [data-skin="bpay"] #main .bpay-shadow-card .bpay-txt{width:auto;min-width:0} [data-skin="bpay"] #main .bpay-batch .bpay-wrap{height:auto;padding:100px 60px;gap:60px} [data-skin="bpay"] #main .bpay-batch-row{width:100%;max-width:1120px;height:auto;gap:60px} [data-skin="bpay"] #main .bpay-batch-left{width:auto;flex:1 1 0;min-width:0} [data-skin="bpay"] #main .bpay-batch-left .bpay-tb,[data-skin="bpay"] #main .bpay-batch-left .bpay-tb h2,[data-skin="bpay"] #main .bpay-batch-left .bpay-tb p{width:auto!important;max-width:480px} [data-skin="bpay"] #main .bpay-batch-right{width:auto;flex:1 1 0;min-width:0;max-width:520px} [data-skin="bpay"] #main .bpay-shadow-card{padding:30px} [data-skin="bpay"] #main .bpay-trust .bpay-wrap{height:auto;padding:100px 40px 60px} [data-skin="bpay"] #main .bpay-trust-bottom{width:auto;max-width:590px} [data-skin="bpay"] #main .bpay-cta .bpay-wrap{height:auto;padding:60px 40px} [data-skin="bpay"] #main .bpay-cta-card{width:100%;height:auto;min-height:400px;padding:60px} [data-skin="bpay"] #main .bpay-cta-inner,[data-skin="bpay"] #main .bpay-cta-text,[data-skin="bpay"] #main .bpay-cta-text h2,[data-skin="bpay"] #main .bpay-cta-text p{width:auto!important;max-width:720px} [data-skin="bpay"] #main .bpay-cta-btns{flex-wrap:wrap;justify-content:center} } /* ---------- chrome that followup.css carried for this page (its lines 62-66, verbatim, keyed on data-skin) ---------- */ html[data-skin="bpay"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-primary{background:#121212!important;border-color:#121212!important;color:#fff!important;font-weight:700!important;height:47px!important;min-height:47px!important;padding:0 24px!important;display:inline-grid!important;place-items:center!important;line-height:normal!important} html[data-skin="bpay"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-primary:hover{background:#2b2b2b!important;border-color:#2b2b2b!important} html[data-skin="bpay"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-outline{background:#F4F3F0!important;border-color:#F4F3F0!important;color:#555049!important;font-weight:500!important;height:47px!important;min-height:47px!important;padding:0 24px!important;display:inline-grid!important;place-items:center!important;line-height:normal!important} html[data-skin="bpay"]:root:root:root:root:root:root header.site > .wrap.nav > .nav-cta > a.btn-outline:hover{background:#121212!important;border-color:#121212!important;color:#fff!important} html[data-skin="bpay"] .cookiebar .cb-accept{background:#121212!important;color:#fff!important}