/* ============================================================ BUSINESS . Batch Payments (solution-batch-payments.html) . 2026-10-20 Ground truth: otabek 20.10/Business - Batch Payments/Spec+Html/batch-payments.html + batch-payments-page-spec.md; the PDF is 1440 x 7381 pt (1 pt = 1 px). Figma "DD-Website" frame "Business - Batch Payments" (1190:22225). Same recipe as sept-corp/bcur/fam/bpay.css:
IS the designer's markup (classes bbat-*, 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="bbat"] #main .bbat-x hero photo -> his CSS background, data: URI -> sept/solution-batch-payments/hero.webp; his rotated radial shade (::before) kept 5 embedded images -> his named files under sept/solution-batch-payments/ (md5-matched; the monitor shot and the records photo as webp, badges as his png) 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 (33 selectors), 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 "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 and solution-payments-fx. steps the live "1. Prepare the payment file" ... "5. Submit" become his five numeral cards: the number is his 01..05 device, the title keeps the live wording (Family Offices V7 ruling). copy live text wins: "Confirm before submission." (his card read "Confirm and submission."), "•" 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="bbat"] body{background:#fff} [data-skin="bbat"] 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="bbat"] #main *,[data-skin="bbat"] #main *::before,[data-skin="bbat"] #main *::after{box-sizing:border-box} [data-skin="bbat"] #main *{margin:0;padding:0} [data-skin="bbat"] #main ul{list-style:none} [data-skin="bbat"] #main a{color:inherit;text-decoration:none} [data-skin="bbat"] #main img,[data-skin="bbat"] #main svg{display:block} [data-skin="bbat"] #main h1,[data-skin="bbat"] #main h2,[data-skin="bbat"] #main h3,[data-skin="bbat"] #main p{max-width:none;letter-spacing:0;text-wrap:initial} [data-skin="bbat"] #main section{position:relative;width:100%} /* his absolute .divider hairlines hang off the section (Payments and FX taught this) */ /* ---------- his page, transcribed (skin_css.py) ---------- */ /* ---------- containers ---------- */ [data-skin="bbat"] #main .bbat-wrap{width:1440px;margin:0 auto} [data-skin="bbat"] #main .bbat-full{width:100%} [data-skin="bbat"] #main .bbat-sec{background:#FFFFFF} /* ---------- components ---------- */ [data-skin="bbat"] #main .bbat-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;border:none;flex:none;cursor:pointer} [data-skin="bbat"] #main .bbat-btn-dark{background:#121212;color:#FFFFFF;font-weight:700} [data-skin="bbat"] #main .bbat-btn-white{background:#FFFFFF;color:#121212;font-weight:700} [data-skin="bbat"] #main .bbat-btn-light{background:#F4F3F0;color:#555049;font-weight:500} [data-skin="bbat"] #main .bbat-btn-trans{background:rgba(18,18,18,.16);color:#FFFFFF;font-weight:500} [data-skin="bbat"] #main .bbat-btn-whitelight{background:#FFFFFF;color:#555049;font-weight:500} [data-skin="bbat"] #main .bbat-tab{display:inline-flex;align-items:center;justify-content:center;height:47px;padding:10px 20px;border-radius:100px;font-size:16px;line-height:19px;font-weight:500;color:#7B756D;white-space:nowrap;flex:none} [data-skin="bbat"] #main .bbat-tab.bbat-active{color:#2B2926} [data-skin="bbat"] #main .bbat-h2{font-size:44px;line-height:53px;font-weight:500;color:#121212} [data-skin="bbat"] #main .bbat-sub{font-size:16px;line-height:24px;font-weight:400;color:#5C5750} [data-skin="bbat"] #main .bbat-divider{position:relative;z-index:2;width:1160px;height:1px;margin:0 auto -1px;background:#D6D2C7} [data-skin="bbat"] #main .bbat-card{border-radius:24px;overflow:hidden} [data-skin="bbat"] #main .bbat-card-outline{border:1px solid #D6D2C7} [data-skin="bbat"] #main .bbat-card-filled{background:#F4F3F0} [data-skin="bbat"] #main .bbat-fcard{width:380px;padding:30px;display:flex;flex-direction:column;gap:30px;position:relative} [data-skin="bbat"] #main .bbat-fcard .bbat-ico{width:40px;height:40px;flex:none} [data-skin="bbat"] #main .bbat-fcard .bbat-ico svg{width:40px;height:40px} [data-skin="bbat"] #main .bbat-fcard .bbat-txt{width:320px;display:flex;flex-direction:column;gap:12px} [data-skin="bbat"] #main .bbat-fcard .bbat-t{font-size:24px;line-height:29px;font-weight:500;color:#121212} [data-skin="bbat"] #main .bbat-fcard .bbat-b{font-size:16px;line-height:135%;font-weight:400;color:#5C5750} [data-skin="bbat"] #main .bbat-card-filled.bbat-fcard .bbat-b{color:#555049} [data-skin="bbat"] #main .bbat-fcard .bbat-num{position:absolute;top:30px;right:30px;font-size:24px;line-height:29px;font-weight:500;color:#A8A299;text-align:right} [data-skin="bbat"] #main .bbat-row{display:flex;gap:30px;align-items:stretch} /* ---------- 1. navbar ---------- */ [data-skin="bbat"] #main .bbat-tabs{display:flex;gap:0} /* ---------- 2. hero ---------- */ [data-skin="bbat"] #main .bbat-hero .bbat-wrap{height:684px;padding:0 80px;display:flex;flex-direction:column;align-items:center;gap:20px} [data-skin="bbat"] #main .bbat-hero-card{width:1280px;height:640px;flex:none;border-radius:48px;overflow:hidden;padding:80px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:40px; position:relative;isolation:isolate; background:url(sept/solution-batch-payments/hero.webp) center/cover no-repeat;} /* Figma radial overlay: centre (73.8%, 46.5%), axes 991 x 1981 px, rotated 17.5deg */ [data-skin="bbat"] #main .bbat-hero-card::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:4400px;height:4400px;left:calc(73.8% - 2200px);top:calc(46.5% - 2200px);transform:rotate(17.5deg); background:radial-gradient(ellipse 991px 1981px at 50% 50%, rgba(44,38,32,0) 0%, rgba(44,38,32,0) 13%, rgba(44,38,32,1) 100%);} [data-skin="bbat"] #main .bbat-hero-text{width:500px;display:flex;flex-direction:column;gap:20px} [data-skin="bbat"] #main .bbat-hero-text h1{font-size:48px;line-height:58px;font-weight:500;color:#FFFFFF} [data-skin="bbat"] #main .bbat-hero-text p{font-size:16px;line-height:24px;color:#FFFFFF;opacity:.8} [data-skin="bbat"] #main .bbat-hero-btns{display:flex;gap:20px} [data-skin="bbat"] #main .bbat-hero-caption{font-size:16px;line-height:24px;color:#7B756D;text-align:center;white-space:nowrap} /* ---------- 3. feature strip ---------- */ [data-skin="bbat"] #main .bbat-s3 .bbat-wrap{height:1574px;padding:120px 80px 160px;display:flex;flex-direction:column;align-items:center;gap:80px;overflow:hidden} [data-skin="bbat"] #main .bbat-head{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center} [data-skin="bbat"] #main .bbat-s3 .bbat-head{width:700px} [data-skin="bbat"] #main .bbat-s3 .bbat-head .bbat-h2{width:600px} [data-skin="bbat"] #main .bbat-s3 .bbat-head .bbat-sub{width:700px} [data-skin="bbat"] #main .bbat-s3 .bbat-content{width:1200px;display:flex;flex-direction:column;align-items:center;gap:120px} [data-skin="bbat"] #main .bbat-s3 .bbat-row .bbat-fcard{height:244px} [data-skin="bbat"] #main .bbat-s3 .bbat-shot{width:928px;height:700px;object-fit:cover} /* ---------- 4. steps ---------- */ [data-skin="bbat"] #main .bbat-s4 .bbat-wrap{height:990px;padding:140px 80px 160px;display:flex;flex-direction:column;align-items:center;gap:80px;overflow:hidden} [data-skin="bbat"] #main .bbat-s4 .bbat-h2{width:570px;text-align:center} [data-skin="bbat"] #main .bbat-steps{width:1200px;display:flex;flex-direction:column;align-items:center;gap:30px} [data-skin="bbat"] #main .bbat-steps .bbat-row{width:1200px;justify-content:center} [data-skin="bbat"] #main .bbat-steps .bbat-fcard{height:237px} /* ---------- 5. split ---------- */ [data-skin="bbat"] #main .bbat-s5 .bbat-wrap{height:800px;padding:160px;display:flex;flex-direction:row;align-items:center;gap:160px;overflow:hidden} [data-skin="bbat"] #main .bbat-s5 .bbat-left{width:480px;flex:none;display:flex;flex-direction:column;gap:20px} [data-skin="bbat"] #main .bbat-s5 .bbat-left .bbat-h2{width:480px} [data-skin="bbat"] #main .bbat-s5 .bbat-left .bbat-sub{width:480px} [data-skin="bbat"] #main .bbat-rec{width:480px;height:480px;flex:none;padding:40px;display:flex;flex-direction:column;justify-content:space-between} [data-skin="bbat"] #main .bbat-rec .bbat-t{font-size:28px;line-height:34px;font-weight:700;color:#F37F00} [data-skin="bbat"] #main .bbat-rec img{width:400px;height:294px;object-fit:cover} [data-skin="bbat"] #main .bbat-rec .bbat-b{width:400px;font-size:16px;line-height:24px;color:#5C5750} /* ---------- 6. approvals ---------- */ [data-skin="bbat"] #main .bbat-s6 .bbat-wrap{height:918px;padding:140px 80px 160px;display:flex;flex-direction:column;align-items:center;gap:80px;overflow:hidden} [data-skin="bbat"] #main .bbat-s6 .bbat-head{width:600px} [data-skin="bbat"] #main .bbat-s6 .bbat-head .bbat-h2{width:600px} [data-skin="bbat"] #main .bbat-s6 .bbat-head .bbat-sub{width:572px} [data-skin="bbat"] #main .bbat-s6 .bbat-row{width:1200px} [data-skin="bbat"] #main .bbat-s6 .bbat-fcard{height:237px} /* ---------- 7. trust ---------- */ [data-skin="bbat"] #main .bbat-s7 .bbat-wrap{height:995px;padding:140px 160px 80px;display:flex;flex-direction:column;align-items:center;gap:80px;overflow:hidden} [data-skin="bbat"] #main .bbat-s7 .bbat-h2{width:720px;text-align:center} [data-skin="bbat"] #main .bbat-trust{width:1120px;display:flex;gap:30px} [data-skin="bbat"] #main .bbat-tcard{flex:1 1 0;min-width:0;height:380px;padding:40px;display:flex;flex-direction:column;gap:30px} [data-skin="bbat"] #main .bbat-tcard .bbat-media{height:120px;flex:none;display:flex;align-items:center;gap:20px} [data-skin="bbat"] #main .bbat-tcard .bbat-media .bbat-fca{width:127px;height:40px;object-fit:contain} [data-skin="bbat"] #main .bbat-tcard .bbat-media .bbat-circle{width:100px;height:100px;border-radius:50%;background:#F6F6F6;display:flex;align-items:center;justify-content:center} [data-skin="bbat"] #main .bbat-tcard .bbat-media .bbat-circle svg{width:50px;height:50px} [data-skin="bbat"] #main .bbat-tcard .bbat-media .bbat-iso{width:93px;height:120px;object-fit:cover} [data-skin="bbat"] #main .bbat-tcard .bbat-txt{display:flex;flex-direction:column;gap:12px} [data-skin="bbat"] #main .bbat-tcard .bbat-t{font-size:20px;line-height:135%;font-weight:500;color:#121212} [data-skin="bbat"] #main .bbat-tcard .bbat-b{font-size:14px;line-height:21px;color:#5C5750} [data-skin="bbat"] #main .bbat-tcard .bbat-b a{color:#B75F00} [data-skin="bbat"] #main .bbat-foot-note{width:590px;display:flex;flex-direction:column;align-items:center;gap:40px} [data-skin="bbat"] #main .bbat-foot-note p{font-size:14px;line-height:21px;color:#7B756D;text-align:center} /* ---------- 8. cta ---------- */ [data-skin="bbat"] #main .bbat-s8 .bbat-wrap{height:651px;padding:80px;display:flex;flex-direction:column;align-items:center} [data-skin="bbat"] #main .bbat-cta{width:1280px;height:491px;background:#F4F3F0;border-radius:48px;overflow:hidden;padding:100px 80px;display:flex;justify-content:center;align-items:center} [data-skin="bbat"] #main .bbat-cta-col{width:720px;display:flex;flex-direction:column;align-items:center;gap:60px} [data-skin="bbat"] #main .bbat-cta-text{width:720px;display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center} [data-skin="bbat"] #main .bbat-cta-text .bbat-h2{width:640px} [data-skin="bbat"] #main .bbat-cta-text p{width:650px;font-size:16px;line-height:24px;color:#555049} [data-skin="bbat"] #main .bbat-cta-btns{display:flex;gap:20px} /* ---------- 9. footer ---------- */ [data-skin="bbat"] #main .bbat-rule{width:1280px;height:1px;background:#CCC8BC} [data-skin="bbat"] #main .bbat-small{font-size:12px;line-height:18px;color:#555049} [data-skin="bbat"] #main .bbat-small a{font-weight:500;color:#AC5900} [data-skin="bbat"] #main .bbat-btn:focus-visible{outline:2px solid #F37F00;outline-offset:2px} /* ---------- his 600px heading box breaks "One batch for payments / that belong together." with his embedded Inter cut; with fonts.css Inter the third word fits, so the box narrows to draw his line (spec 3.1 prose, oracle README trap 4) ---------- */ [data-skin="bbat"] #main .bbat-s3 .bbat-head .bbat-h2{width:560px} /* ---------- 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 bbat-rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}} @keyframes bbat-scale-in{from{opacity:0;transform:translateY(28px) scale(.965)}to{opacity:1;transform:none}} @keyframes bbat-slide-l{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}} @keyframes bbat-slide-r{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}} [data-skin="bbat"] #main .bbat-hero-card{animation:bbat-scale-in both;animation-timeline:view();animation-range:entry 0% entry 42%} [data-skin="bbat"] #main .bbat-s3 .bbat-row,[data-skin="bbat"] #main .bbat-s3 .bbat-shot,[data-skin="bbat"] #main .bbat-steps .bbat-row, [data-skin="bbat"] #main .bbat-s6 .bbat-row,[data-skin="bbat"] #main .bbat-trust,[data-skin="bbat"] #main .bbat-cta{animation:bbat-rise both;animation-timeline:view();animation-range:entry 0% entry 48%} [data-skin="bbat"] #main .bbat-s5 .bbat-left{animation:bbat-slide-l both;animation-timeline:view();animation-range:entry 0% entry 50%} [data-skin="bbat"] #main .bbat-rec{animation:bbat-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="bbat"] #main .bbat-wrap{width:100%;max-width:1440px} [data-skin="bbat"] #main .bbat-divider{width:auto;max-width:1160px;margin-left:60px;margin-right:60px} [data-skin="bbat"] #main .bbat-hero .bbat-wrap{padding:0 40px 20px} [data-skin="bbat"] #main .bbat-hero-card{width:100%;height:auto;min-height:560px;padding:60px} [data-skin="bbat"] #main .bbat-hero-text{width:auto;max-width:500px} [data-skin="bbat"] #main .bbat-hero-btns{flex-wrap:wrap} [data-skin="bbat"] #main .bbat-hero-caption{white-space:normal} [data-skin="bbat"] #main .bbat-s3 .bbat-wrap,[data-skin="bbat"] #main .bbat-s4 .bbat-wrap,[data-skin="bbat"] #main .bbat-s6 .bbat-wrap, [data-skin="bbat"] #main .bbat-s7 .bbat-wrap{height:auto;padding:100px 40px 120px} [data-skin="bbat"] #main .bbat-head,[data-skin="bbat"] #main .bbat-head .bbat-h2,[data-skin="bbat"] #main .bbat-head .bbat-sub, [data-skin="bbat"] #main .bbat-s4 .bbat-h2,[data-skin="bbat"] #main .bbat-s7 .bbat-h2{width:auto!important;max-width:750px} [data-skin="bbat"] #main .bbat-s3 .bbat-content,[data-skin="bbat"] #main .bbat-steps,[data-skin="bbat"] #main .bbat-steps .bbat-row, [data-skin="bbat"] #main .bbat-s6 .bbat-row,[data-skin="bbat"] #main .bbat-trust{width:100%;max-width:1200px} [data-skin="bbat"] #main .bbat-row{flex-wrap:wrap} [data-skin="bbat"] #main .bbat-fcard{width:auto;flex:1 1 260px;min-width:0;height:auto!important} [data-skin="bbat"] #main .bbat-fcard .bbat-txt{width:auto} [data-skin="bbat"] #main .bbat-s3 .bbat-shot{width:100%;max-width:928px;height:auto} [data-skin="bbat"] #main .bbat-s5 .bbat-wrap{height:auto;padding:100px 60px;gap:60px} [data-skin="bbat"] #main .bbat-s5 .bbat-left{width:auto;flex:1 1 0;min-width:0} [data-skin="bbat"] #main .bbat-s5 .bbat-left .bbat-h2,[data-skin="bbat"] #main .bbat-s5 .bbat-left .bbat-sub{width:auto;max-width:480px} [data-skin="bbat"] #main .bbat-rec{width:40%;height:auto;aspect-ratio:1/1;padding:30px} [data-skin="bbat"] #main .bbat-rec img,[data-skin="bbat"] #main .bbat-rec .bbat-b{width:100%;height:auto} [data-skin="bbat"] #main .bbat-trust{flex-wrap:wrap} [data-skin="bbat"] #main .bbat-tcard{flex:1 1 280px;height:auto;min-height:380px} [data-skin="bbat"] #main .bbat-s8 .bbat-wrap{height:auto;padding:60px 40px} [data-skin="bbat"] #main .bbat-cta{width:100%;height:auto;min-height:400px;padding:60px} [data-skin="bbat"] #main .bbat-cta-col,[data-skin="bbat"] #main .bbat-cta-text,[data-skin="bbat"] #main .bbat-cta-text .bbat-h2,[data-skin="bbat"] #main .bbat-cta-text p{width:auto;max-width:720px} [data-skin="bbat"] #main .bbat-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="bbat"]: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="bbat"]: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="bbat"]: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="bbat"]: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="bbat"] .cookiebar .cb-accept{background:#121212!important;color:#fff!important}