/* Referrals (post 70, /referral/). Figma BczyQFV4evs0MK5RGncG0K Desktop 2435:13878 (1280x4598) -> @media (min-width:992px) Mobile 2435:14151 ( 375x5385) -> @media (max-width:991px) Tokens: #0E0E0E Black900 | #414141 Black700 | #8E8E8E Black400 | #F7F7F7 White | #0F03FB Blue500 Desktop type: Header80 GTAC 80/80/-3 | Body32 32/42 | Body20 20/30 | Body18 18/24 Mobile type: Header60 GTAC 60/55/-2 | Body18 18/24 | Body15 15/20 | Body10 10/14 Body12 12/20 labels | Subheader16 16/24 | Button 14/20 bold +1px FILE NAME: kept as referrals-desktop.css so the enqueue in novamira-sandbox/referrals.php does not have to change. It is no longer desktop-only: everything is now split into the blocks below (GLOBAL / DESKTOP >=992 / MOBILE <=991 / FOOTER <=767). Every rule is scoped to body.page-id-70. Nothing shared (nav template 7719, footer template 7691, footer-breakpoints-fix.php) is modified. */ /* ============================================================ 1) GLOBAL - breakpoint independent (page ground, box model, input/checkbox chrome + states, hidden field, gcal button) ============================================================ */ body.page-id-70 { background:#F7F7F7 !important; } body.page-id-70 .rf-hero, body.page-id-70 .rf-sec, body.page-id-70 .rf-faq, body.page-id-70 .rf-hero *, body.page-id-70 .rf-sec *, body.page-id-70 .rf-faq * { box-sizing:border-box; } /* Google Calendar injected CTA is appended to with position:static and adds 36px below the footer. Same page-scoped fix the other Website v5 pages already use (wwa-hide-gcal-btn.php). Not part of the Figma design. */ body.page-id-70 .qxCTlb{display:none!important;} /* shared display type family / weight / case (sizes are per breakpoint) */ body.page-id-70 .rf-hero-title, body.page-id-70 .rf-sec-title, body.page-id-70 .rf-com-num{ font-family:"GTAC Regular","GT America Compressed",sans-serif!important; font-weight:400!important;text-transform:uppercase!important;color:#0E0E0E!important; padding:0!important; } body.page-id-70 .rf-com-num{color:#0F03FB!important;white-space:nowrap!important;} /* ---- form chrome (Fluent Forms ID 6, VISUAL ONLY). Form config, fields, validation, AJAX handler, DB persistence and both email notifications are untouched at every breakpoint. ---- */ body.page-id-70 .rf-form-wrap{width:100%!important;} body.page-id-70 .rf-form-title{font-size:16px!important;line-height:24px!important;text-transform:uppercase!important;color:#0E0E0E!important;margin:0 0 32px!important;padding:0!important;} body.page-id-70 .rf-form, body.page-id-70 .rf-form .fluentform{width:100%!important;margin:0!important;} body.page-id-70 .rf-form form fieldset{border:none!important;margin:0!important;padding:0!important;min-inline-size:100%!important;} body.page-id-70 .rf-form form fieldset > legend, body.page-id-70 .rf-form form fieldset > input[type="hidden"]{position:absolute!important;} /* Preferred method of contact: hidden VISUALLY ONLY. The field, its Fluent Forms configuration and its data are left completely intact. */ body.page-id-70 .rf-form [data-name="ff_cn_id_2"]{display:none!important;} body.page-id-70 .rf-form .ff-el-group{margin:0!important;padding:0!important;} body.page-id-70 .rf-form .ff-el-input--label{margin:0 0 5px!important;padding:0!important;display:flex!important;align-items:flex-start!important;height:20px!important;line-height:20px!important;} body.page-id-70 .rf-form .ff-el-input--label label{font-size:12px!important;line-height:20px!important;font-weight:400!important;color:#0E0E0E!important;margin:0!important;padding:0!important;} body.page-id-70 .rf-form .ff-el-is-required.asterisk-right label:after{color:#0F03FB!important;font-size:15px!important;line-height:20px!important;margin-left:0!important;} body.page-id-70 .rf-form input.ff-el-form-control{height:40px!important;min-height:40px!important;width:100%!important;padding:10px!important;border:1px solid #8E8E8E!important;border-radius:4px!important;background:transparent!important;box-shadow:none!important;font-size:15px!important;line-height:20px!important;color:#0E0E0E!important;} body.page-id-70 .rf-form input.ff-el-form-control::placeholder{color:#8E8E8E!important;opacity:1!important;font-size:15px!important;line-height:20px!important;} body.page-id-70 .rf-form input.ff-el-form-control:focus{border-color:#0F03FB!important;outline:2px solid rgba(15,3,251,.25)!important;outline-offset:1px!important;} body.page-id-70 .rf-form input[type=number]::-webkit-outer-spin-button, body.page-id-70 .rf-form input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important;} body.page-id-70 .rf-form input[type=number]{-moz-appearance:textfield!important;} /* consent row chrome: 44x44 hit area, 18x18 visual box (Figma 423:2503) */ body.page-id-70 .rf-form [data-name="ff_cn_id_3"] > .ff-t-cell{flex:0 0 auto!important;width:auto!important;padding:0!important;margin:0!important;} body.page-id-70 .rf-form [data-name="ff_cn_id_3"] .ff-el-form-check{margin:0!important;padding:0!important;} body.page-id-70 .rf-form [data-name="ff_cn_id_3"] .ff-el-form-check-label{display:inline-flex!important;align-items:center!important;gap:8px!important;margin:0!important;padding:0!important;font-size:15px!important;line-height:20px!important;color:#0E0E0E!important;} body.page-id-70 .rf-form [data-name="ff_cn_id_3"] input[type="checkbox"]{-webkit-appearance:none!important;appearance:none!important;width:18px!important;height:18px!important;min-width:18px!important;margin:13px!important;padding:0!important;flex:0 0 18px!important;border:2px solid #0E0E0E!important;border-radius:4px!important;background:transparent!important;box-shadow:none!important;cursor:pointer!important;position:relative!important;top:0!important;} body.page-id-70 .rf-form [data-name="ff_cn_id_3"] input[type="checkbox"]:checked{background:#0E0E0E!important;} body.page-id-70 .rf-form [data-name="ff_cn_id_3"] input[type="checkbox"]:checked::after{content:""!important;position:absolute!important;left:3.5px!important;top:0.5px!important;width:5px!important;height:9px!important;border:solid #F7F7F7!important;border-width:0 2px 2px 0!important;transform:rotate(45deg)!important;} body.page-id-70 .rf-form [data-name="ff_cn_id_3"] input[type="checkbox"]:focus-visible{outline:2px solid #0F03FB!important;outline-offset:2px!important;} body.page-id-70 .rf-form [data-name="ff_cn_id_3"] .ff-custom_html{margin-left:.28em!important;} body.page-id-70 .rf-form [data-name="ff_cn_id_3"] .ff-custom_html p{margin:0!important;padding:0!important;font-size:15px!important;line-height:20px!important;} body.page-id-70 .rf-form [data-name="ff_cn_id_3"] .ff-custom_html a{color:#0F03FB!important;text-decoration:underline!important;font-size:15px!important;line-height:20px!important;} /* JOIN THE PROGRAM: filled, no icon. Own Idle/Hover/Press/Focus, page-scoped. 202x40 at BOTH breakpoints (Figma desktop 2435:13878, mobile 2435:14252). Only the alignment differs (desktop right, mobile centred). */ body.page-id-70 .rf-form button.ff-btn-submit{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:202px!important;min-width:202px!important;height:40px!important;padding:12px 24px!important;margin:0!important;background:#0F03FB!important;border:none!important;border-radius:8px!important;color:#F7F7F7!important;font-size:14px!important;line-height:20px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important;white-space:nowrap!important;box-shadow:none!important;cursor:pointer!important;transition:background-color .15s linear!important;} body.page-id-70 .rf-form button.ff-btn-submit:hover{background:#0C02C9!important;color:#F7F7F7!important;} body.page-id-70 .rf-form button.ff-btn-submit:active{background:#0303A0!important;color:#F7F7F7!important;} body.page-id-70 .rf-form button.ff-btn-submit:focus-visible{outline:2px solid #0E0E0E!important;outline-offset:2px!important;} body.page-id-70 .rf-form .error.text-danger{font-size:12px!important;line-height:20px!important;margin-top:4px!important;} body.page-id-70 .rf-form .ff-message-success{font-size:20px!important;line-height:30px!important;color:#0E0E0E!important;} body.page-id-70 .rf-form .ff-message-success h2{font-size:32px!important;line-height:42px!important;color:#0E0E0E!important;font-weight:400!important;margin:0!important;} /* FAQ outline button chrome (width is per breakpoint) */ body.page-id-70 a.rf-btn-outline{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:40px!important;padding:12px 24px!important;margin:0!important;background:transparent!important;border:2px solid #0E0E0E!important;border-radius:8px!important;color:#0E0E0E!important;font-size:14px!important;line-height:20px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important;white-space:nowrap!important;text-decoration:none!important;box-shadow:none!important;} /* ============================================================ 2) DESKTOP >= 992px - approved 1280x4598 layout, unchanged. Every rule below was already in the approved desktop file; it is only wrapped in the breakpoint so it stops leaking into mobile. !important is preserved, so cascade and specificity at >=992 are identical. ============================================================ */ @media (min-width:992px){ /* ---- NAV (light). Template 7719 is shared with Torta 7711 and Rychart 7720, but its desktop geometry lives in each of those pages' own customCss, so it is restated here, page-scoped. Neither frozen page is touched. ---- */ body.page-id-70 #brxe-hdr_sec{min-height:136px!important;height:136px!important;padding:48px 0!important;box-sizing:border-box!important;background:#F7F7F7!important;} /* WIDTH CAP: same 1280 ceiling as the content sections, so above 1280 the logo/nav/button stay aligned with the section grid instead of being stranded at the viewport edge. Matches Torta 7711 / Rychart 7720, whose #brxe-hdr_con is also max-width:1280px. Page-scoped; template 7719 is NOT modified. */ body.page-id-70 #brxe-hdr_con{width:100%!important;max-width:1280px!important;margin-left:auto!important;margin-right:auto!important;height:40px!important;padding:0 48px!important;box-sizing:border-box!important;gap:24px!important;background:#F7F7F7!important;} body.page-id-70 #brxe-hdr_logo{width:226px!important;height:40px!important;flex:0 0 226px!important;filter:brightness(0)!important;} body.page-id-70 #brxe-hdr_navd{display:flex!important;width:auto!important;height:40px!important;align-items:center!important;justify-content:flex-start!important;gap:16px!important;margin-left:0!important;} body.page-id-70 #brxe-hdr_navd > a{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:40px!important;width:100px!important;padding:10px 0!important;color:#0E0E0E!important;font-size:15px!important;line-height:20px!important;white-space:nowrap!important;text-transform:uppercase!important;text-decoration:none!important;border-bottom:0!important;} /* no nav item is active on Referrals */ body.page-id-70 #brxe-hdr_navd > a::after, body.page-id-70 #brxe-hdr_navd > a::before{display:none!important;content:none!important;} body.page-id-70 #brxe-hdr_l4{display:none!important;} /* Figma nav has exactly 4 items (HIRE TALENT / CAREERS / ABOUT US / RESOURCES). The 5th template link (How We Work) must be hidden, but the '#brxe-hdr_navd > a' rule above outspecifies a bare '#brxe-hdr_l4', so the hide needs the id qualified on the child selector. 4x100 + 3x16 = 448. */ body.page-id-70 #brxe-hdr_navd > a#brxe-hdr_l4{display:none!important;} body.page-id-70 #brxe-hdr_btn{display:flex!important;align-items:center!important;justify-content:center!important;height:40px!important;min-width:0!important;width:auto!important;padding:0 24px!important;margin-left:0!important;background:#0F03FB!important;border-radius:8px!important;color:#F7F7F7!important;font-size:14px!important;line-height:20px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important;white-space:nowrap!important;} body.page-id-70 #brxe-hdr_burg{display:none!important;} /* ---- display type (cap-height trim from Figma) ---- */ body.page-id-70 .rf-hero-title, body.page-id-70 .rf-sec-title, body.page-id-70 .rf-com-num{ font-size:80px!important;line-height:80px!important;letter-spacing:-3px!important; margin:-11.5px 0!important; } /* ---- 1. HERO (Figma y216-1197, h981) ---- */ body.page-id-70 .rf-hero{display:flex!important;flex-direction:column!important;align-items:center!important;width:100%!important;padding:0!important;margin:80px 0 0!important;gap:0!important;background:#F7F7F7!important;} body.page-id-70 .rf-hero-copy{display:flex!important;flex-direction:column!important;align-items:center!important;width:100%!important;max-width:1280px!important;padding:120px 48px 80px!important;gap:24px!important;margin:0 auto!important;background:#F7F7F7!important;} body.page-id-70 .rf-hero-title{width:560px!important;max-width:100%!important;text-align:center!important;} body.page-id-70 .rf-hero-body{width:560px!important;max-width:100%!important;text-align:center!important;font-size:20px!important;line-height:30px!important;color:#0E0E0E!important;margin:0!important;padding:0!important;} body.page-id-70 img.rf-hero-img{display:block!important;width:100%!important;max-width:none!important;height:500px!important;object-fit:cover!important;object-position:center!important;margin:0!important;padding:0!important;} /* ---- shared 2-column section shell ---- */ /* WIDTH CAP (Sharon, min/max sizes as in Torta/Rychart): the section box is the Figma 1280 composition. It was max-width:none, so above 1280 the whole 379/24/781 grid kept growing with the viewport. Now width:100% below 1280 (fluid, unchanged) and capped + centred at 1280 above it. */ body.page-id-70 .rf-sec{display:flex!important;flex-direction:row!important;gap:24px!important;align-items:flex-start!important;justify-content:center!important;width:100%!important;max-width:1280px!important;padding:40px 48px!important;margin:80px auto 0!important;background:transparent!important;} body.page-id-70 .rf-col-left{flex:0 0 379px!important;width:379px!important;display:flex!important;flex-direction:column!important;gap:48px!important;align-items:flex-start!important;padding:0!important;margin:0!important;} body.page-id-70 .rf-sec-title{width:379px!important;} body.page-id-70 .rf-sec-body{width:300px!important;font-size:18px!important;line-height:24px!important;color:#0E0E0E!important;margin:0!important;padding:0!important;} body.page-id-70 .rf-col-right{flex:1 1 0!important;min-width:0!important;width:100%!important;max-width:781px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;padding:0!important;margin:0!important;gap:0!important;} /* ---- 2. HOW DOES IT WORK (y1277-1775, h498) ---- */ body.page-id-70 .rf-steps{width:100%!important;} body.page-id-70 .rf-step{display:flex!important;flex-direction:row!important;gap:80px!important;align-items:center!important;width:782px!important;max-width:100%!important;margin-left:-0.5px!important;padding:0!important;} body.page-id-70 .rf-step:nth-child(1){padding-bottom:80px!important;} body.page-id-70 .rf-step:nth-child(2){padding-bottom:48px!important;} body.page-id-70 .rf-step:nth-child(3){padding-bottom:80px!important;} body.page-id-70 .rf-step-txt{flex:1 1 0!important;min-width:0!important;font-size:32px!important;line-height:42px!important;color:#0E0E0E!important;margin:0!important;} body.page-id-70 .rf-step-num{flex:0 0 56px!important;width:56px!important;text-align:right!important;font-size:32px!important;line-height:42px!important;color:#0E0E0E!important;margin:0!important;} /* ---- 3/4. BENEFITS + WHY REFER (733px rail, 1px #414141 rules) ---- */ body.page-id-70 .rf-rows{width:100%!important;padding:0 24px!important;} body.page-id-70 .rf-row{display:flex!important;flex-direction:row!important;gap:24px!important;align-items:flex-start!important;width:100%!important;margin:0!important;} body.page-id-70 .rf-cell{flex:1 1 0!important;min-width:0!important;font-size:20px!important;line-height:30px!important;color:#0E0E0E!important;margin:0!important;} body.page-id-70 .rf-cell-half{flex:0 0 346.5px!important;width:346.5px!important;} body.page-id-70 .rf-ben .rf-row:nth-child(1){padding:0 0 40px!important;} body.page-id-70 .rf-ben .rf-row:nth-child(2), body.page-id-70 .rf-ben .rf-row:nth-child(3){padding:40px 0!important;border-top:1px solid #414141!important;} body.page-id-70 .rf-why .rf-row{padding:40px 0!important;} body.page-id-70 .rf-why .rf-row:nth-child(2), body.page-id-70 .rf-why .rf-row:nth-child(3){border-top:1px solid #414141!important;} /* ---- 5. COMMISSION STRUCTURE (single 3% card 378.5x171). The hidden Figma "2%" card is deliberately NOT rendered. ---- */ body.page-id-70 .rf-com-right{flex-direction:row!important;justify-content:flex-end!important;align-items:flex-start!important;width:100%!important;} body.page-id-70 .rf-com-card{display:flex!important;flex-direction:column!important;gap:24px!important;align-items:flex-start!important;width:378.5px!important;flex:0 0 378.5px!important;padding:0!important;margin:0!important;} body.page-id-70 .rf-com-num{width:auto!important;} body.page-id-70 .rf-com-card .rf-cell{flex:0 0 auto!important;width:100%!important;} /* ---- 6. JOIN THE AFFILIATE PROGRAM - 2-column grid ---- */ body.page-id-70 .rf-form-wrap{width:100%!important;max-width:781px!important;} body.page-id-70 .rf-form form fieldset{display:grid!important;grid-template-columns:1fr auto!important;row-gap:80px!important;column-gap:24px!important;} body.page-id-70 .rf-form [data-name="ff_cn_id_1"]{grid-column:1 / -1!important;display:flex!important;flex-direction:row!important;gap:24px!important;align-items:flex-start!important;margin:0!important;} body.page-id-70 .rf-form [data-name="ff_cn_id_1"] > .ff-t-cell{flex:1 1 0!important;min-width:0!important;padding:0!important;margin:0!important;display:flex!important;flex-direction:column!important;gap:32px!important;} body.page-id-70 .rf-form [data-name="ff_cn_id_3"]{grid-column:1!important;grid-row:2!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:0!important;height:44px!important;margin:0!important;} body.page-id-70 .rf-form .ff_submit_btn_wrapper{grid-column:2!important;grid-row:2!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;margin:0!important;padding:0!important;height:44px!important;text-align:right!important;} /* ---- 7. FAQ band (y3995-4236, h241) - 2 rows, 834px rule ---- */ body.page-id-70 .rf-faq{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;width:100%!important;padding:24px 16px!important;margin:80px 0!important;gap:0!important;background:transparent!important;} body.page-id-70 .rf-faq::after{content:""!important;position:absolute!important;left:50%!important;transform:translateX(-50%)!important;top:120px!important;width:834px!important;max-width:calc(100% - 32px)!important;height:1px!important;background:#414141!important;} body.page-id-70 .rf-faq-row{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;width:786px!important;max-width:100%!important;height:72px!important;padding:0!important;margin:0!important;} body.page-id-70 .rf-faq-row + .rf-faq-row{margin-top:49px!important;} body.page-id-70 .rf-faq-txt{width:431px!important;flex:0 0 431px!important;font-size:18px!important;line-height:24px!important;color:#0E0E0E!important;margin:0!important;} body.page-id-70 a.rf-btn-outline{width:200px!important;flex:0 0 200px!important;} } /* ============================================================ 3) MOBILE <= 991px - Figma 2435:14151 (375x5385). Band y/h from Figma: Nav 0/56 | Header 96/667 | How 803/658 | Benefits 1501/830 | Why 2371/803 | Commission 3214/410 | Join 3664/898 | FAQ 4602/393 | Footer 5035/350. Every band starts 40px below the previous one. APPROVED COPY DECISION: step 03 renders the DESKTOP sentence "You earn a 3% commission the first year your referred client(s) work with Stateside." The Figma mobile ", 2% the second year." clause is NOT rendered, so step 03 is one text line shorter than the Figma frame and the page is ~24px shorter than 5385. That delta is intentional. ============================================================ */ @media (max-width:991px){ /* ---- NAV: the shared template 7719 keeps its 48px base padding above Bricks' mobile_portrait (478px), which produced the 56 -> 120px jump at 478/479 that Torta and Rychart already had fixed in their own page CSS. Same mechanism, Referrals-scoped: flat 56px nav through 991 and a non-shrinking 136x24 logo. Torta 7711, Rychart 7720 and the shared template are NOT touched. Desktop (>=992) is unaffected. ---- */ body.page-id-70 #brxe-hdr_sec{height:56px!important;min-height:56px!important;padding:16px 0!important;box-sizing:border-box!important;} body.page-id-70 #brxe-hdr_logo{width:136px!important;height:24px!important;flex:0 0 136px!important;} /* ---- display type: Header60 GTAC 60/55/-2, cap-trim 6px per side (3 lines measure 153 in Figma = 3*55 - 12) ---- */ body.page-id-70 .rf-hero-title, body.page-id-70 .rf-sec-title, body.page-id-70 .rf-com-num{ font-size:60px!important;line-height:55px!important;letter-spacing:-2px!important; margin:-6px 0!important;width:auto!important;max-width:100%!important;text-align:left!important; } /* ---- 1. HEADER / HERO (Figma 2435:14153, y96 h667): copy container 375x417 with padding 80/16/40, gap 24, CENTER aligned (Figma 2435:14153); image 375x250. ---- */ body.page-id-70 .rf-hero{margin:40px 0 0!important;align-items:stretch!important;} body.page-id-70 .rf-hero-copy{align-items:center!important;text-align:center!important;padding:80px 16px 40px!important;gap:24px!important;} /* TITLE MEASURE 341 (not 343): the browser lays "AFFILIATE PROGRAM" out at 342px and "WHY REFER CLIENTS TO" at 343px, i.e. ~0.3% narrower than Figma's GT America Compressed metrics, so both headlines stayed on one line fewer than the Figma frame (hero 2 lines vs 3, Why 2 vs 3) and both sat 1px from wrapping - an unstable break that would flip with any font rasterisation difference. A 341px measure reproduces Figma's exact line breaking and line count; the titles are left-aligned, so the 2px narrower measure produces no visual offset anywhere. */ body.page-id-70 .rf-hero-title, body.page-id-70 .rf-sec-title{max-width:341px!important;} body.page-id-70 .rf-hero-title{width:100%!important;text-align:center!important;} body.page-id-70 .rf-hero-body{width:100%!important;text-align:center!important;font-size:18px!important;line-height:24px!important;} /* ELASTIC QA: the >=992 block owns object-fit:cover, but it lives inside a min-width media query, so below 992 object-fit fell back to the initial value 'fill' and the 1024x683 (1.4993) hero was stretched to the band ratio - 1.28 at 320px up to 3.96 at 991px. Re-declare cover here so the frame stays 100% x 250px and the image crops instead of stretching. */ body.page-id-70 img.rf-hero-img{height:250px!important;object-fit:cover!important;object-position:center!important;} /* ---- shared stacked section shell: padding 40/16, 40px band gap, 24px gap between the heading block and the right-hand block ---- */ body.page-id-70 .rf-sec{flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;padding:40px 16px!important;margin:40px 0 0!important;gap:24px!important;} body.page-id-70 .rf-col-left{flex:0 0 auto!important;width:100%!important;gap:40px!important;} /* Figma measures 48px title->body in How and Benefits, 40px in Why / Commission / Join. Reproduced exactly rather than averaged. */ body.page-id-70 .rf-how .rf-col-left, body.page-id-70 .rf-ben .rf-col-left{gap:48px!important;} body.page-id-70 .rf-sec-title{width:100%!important;} body.page-id-70 .rf-sec-body{width:100%!important;font-size:18px!important;line-height:24px!important;} body.page-id-70 .rf-col-right{width:100%!important;} /* Join is the one band with a 40px heading->form gap (Figma 274 -> 314) */ body.page-id-70 .rf-join{gap:40px!important;} /* ---- 2. HOW DOES IT WORK (Figma 2435:14158): 343 rail, rows 88 / 112 / 136 = text (48/72/96) + 40px bottom spacing, number 56px right-aligned and vertically centred on the text, gap 16. NO dividers. ---- */ body.page-id-70 .rf-step{flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;gap:16px!important;width:100%!important;max-width:100%!important;margin-left:0!important;border:0!important;} body.page-id-70 .rf-step:nth-child(1), body.page-id-70 .rf-step:nth-child(2), body.page-id-70 .rf-step:nth-child(3){padding:0 0 40px!important;} body.page-id-70 .rf-step-txt{flex:1 1 0!important;min-width:0!important;font-size:18px!important;line-height:24px!important;} body.page-id-70 .rf-step-num{flex:0 0 56px!important;width:56px!important;text-align:right!important;font-size:18px!important;line-height:24px!important;} /* ---- 3/4. shared stacked list: every .rf-cell becomes its own row ---- */ body.page-id-70 .rf-row{flex-direction:column!important;gap:0!important;padding:0!important;border-top:0!important;} body.page-id-70 .rf-cell{flex:0 0 auto!important;width:100%!important;min-width:0!important;font-size:18px!important;line-height:24px!important;color:#0E0E0E!important;} body.page-id-70 .rf-cell-half{flex:0 0 auto!important;width:100%!important;} /* 3. SOME OF OUR BENEFITS (Figma 2435:14176): 311 rail (16px inset inside the 343 content box), 5 items in one column, py24, 1px #414141 dividers between items. Item heights 72/96/120/120/96. APPROVED COLOUR FIX: Figma paints the first benefit ("Earn recurring commissions") in #F7F7F7 on a #F7F7F7 ground - an obvious Figma bug, it renders invisible. All five items are #0E0E0E like the other four. */ body.page-id-70 .rf-ben .rf-rows{padding:0 16px!important;} body.page-id-70 .rf-ben .rf-cell{padding:24px 0!important;border-top:1px solid #414141!important;color:#0E0E0E!important;} body.page-id-70 .rf-ben .rf-row:first-child .rf-cell:first-child{border-top:0!important;} /* 4. WHY REFER (Figma 2435:14191): 295 rail (24px inset), py40, 1px dividers. Item heights 152/104/176. */ body.page-id-70 .rf-why .rf-rows{padding:0 24px!important;} body.page-id-70 .rf-why .rf-cell{padding:40px 0!important;border-top:1px solid #414141!important;} body.page-id-70 .rf-why .rf-row:first-child .rf-cell:first-child{border-top:0!important;} /* ---- 5. COMMISSION STRUCTURE (Figma 2435:14204): one 343x96 row, "3%" 60/55/-2 #0F03FB, 24px gap, 265px body column. The body copy is the full desktop sentence (approved), not the short
-broken mobile one. ---- */ body.page-id-70 .rf-com-right{flex-direction:row!important;justify-content:flex-start!important;align-items:flex-start!important;} body.page-id-70 .rf-com-card{flex:1 1 auto!important;width:100%!important;flex-direction:row!important;align-items:flex-start!important;gap:24px!important;} body.page-id-70 .rf-com-num{flex:0 0 auto!important;width:auto!important;} body.page-id-70 .rf-com-card .rf-cell{flex:1 1 0!important;width:auto!important;min-width:0!important;} /* ---- 6. JOIN THE AFFILIATE PROGRAM (Figma 2435:14214). Root cause of the 77px mobile overflow: the two desktop rules that forced [data-name="ff_cn_id_1"] into a 2-column flex row had no media query, so they also applied below 768 where Fluent Forms' own CSS deliberately stops declaring its 2-column flex. Those rules now live in the >=992 block, so Fluent Forms stacks natively again; the rules below only add the Figma spacing on top of that native stacking. Figma order is Full name -> Email -> Phone -> Country, i.e. the two Fluent Forms table columns interleaved. The cells are collapsed with display:contents and the four groups re-ordered with `order` - pure CSS, no markup and no Fluent Forms configuration change. Rhythm: 16px inside a pair, 32px between pairs, 40px fields -> consent, 40px consent -> button, button 202x40 centred. ---- */ body.page-id-70 .rf-form form fieldset{display:flex!important;flex-direction:column!important;row-gap:40px!important;column-gap:0!important;} body.page-id-70 .rf-form [data-name="ff_cn_id_1"]{display:flex!important;flex-direction:column!important;gap:16px!important;align-items:stretch!important;width:100%!important;margin:0!important;} body.page-id-70 .rf-form [data-name="ff_cn_id_1"] > .ff-t-cell{display:contents!important;} body.page-id-70 .rf-form [data-name="ff_cn_id_1"] > .ff-t-column-1 > .ff-el-group:nth-of-type(1){order:1!important;} body.page-id-70 .rf-form [data-name="ff_cn_id_1"] > .ff-t-column-2 > .ff-el-group:nth-of-type(1){order:2!important;} body.page-id-70 .rf-form [data-name="ff_cn_id_1"] > .ff-t-column-1 > .ff-el-group:nth-of-type(2){order:3!important;margin-top:16px!important;} body.page-id-70 .rf-form [data-name="ff_cn_id_1"] > .ff-t-column-2 > .ff-el-group:nth-of-type(2){order:4!important;} body.page-id-70 .rf-form [data-name="ff_cn_id_3"]{display:flex!important;flex-direction:row!important;align-items:center!important;gap:0!important;height:44px!important;width:100%!important;margin:0!important;} body.page-id-70 .rf-form .ff_submit_btn_wrapper{display:flex!important;align-items:center!important;justify-content:center!important;height:40px!important;width:100%!important;margin:0!important;padding:0!important;text-align:center!important;} /* ---- 7. FAQ (Figma 2435:14500): 343 rows stacked 24/60/24/40/24, text 15/20, full-width 343x40 outline button, 1px divider between rows, section padding 24/16 and 40px band gaps. ---- */ body.page-id-70 .rf-faq{padding:24px 16px!important;margin:40px 0!important;align-items:stretch!important;} body.page-id-70 .rf-faq::after{display:none!important;content:none!important;} body.page-id-70 .rf-faq-row{flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;width:100%!important;max-width:100%!important;height:auto!important;padding:24px 0!important;gap:24px!important;} body.page-id-70 .rf-faq-row + .rf-faq-row{margin-top:0!important;border-top:1px solid #414141!important;} body.page-id-70 .rf-faq-txt{width:100%!important;flex:0 0 auto!important;font-size:15px!important;line-height:20px!important;} body.page-id-70 a.rf-btn-outline{width:100%!important;flex:0 0 auto!important;} } /* ============================================================ 4) FOOTER <= 767px - Figma 2435:14261 (375x350). The shared footer template 7691 already contains every element this variant needs; footer-breakpoints-fix.php (wp_head 151) hides #brxe-cA / cB / cC / cD / cE_l below 768 to leave the 164px simplified footer. That shared file is NOT modified. The rules below are scoped to body.page-id-70 (0,2,1,0), so they outrank the shared single-id hide (0,1,0,0) at equal !important, and re-show + re-layout cA / cC / cD / cE for this page only. cB (Hire Talent / Careers / ...) and cE_l ("Let's be friends!") stay hidden - neither is in the mobile Figma. Figma stack: pt40 | logo+address 54 | 24 | two columns 84 split by a 1px vertical rule | 24 | social 40 | 24 | copyright+privacy 36 | pb24. #brxe-fcon already carries padding 40/24/24 and row-gap 24 from the shared file - exactly the Figma frame - so it is left alone. ============================================================ */ @media (max-width:767px){ body.page-id-70 #brxe-ftop{display:grid!important;grid-template-columns:1fr 1fr!important;column-gap:48px!important;row-gap:24px!important;width:100%!important;height:auto!important;justify-items:stretch!important;align-items:start!important;} /* row 1: logo 136x24 over the address, centred, gap 16 */ body.page-id-70 #brxe-cA{display:flex!important;grid-column:1 / -1!important;grid-row:1!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:16px!important;width:100%!important;padding:0!important;margin:0!important;} body.page-id-70 #brxe-cA_logo{width:136px!important;height:24px!important;flex:0 0 24px!important;} body.page-id-70 #brxe-cA_addr{width:100%!important;text-align:center!important;font-size:10px!important;line-height:14px!important;color:#F7F7F7!important;margin:0!important;} body.page-id-70 #brxe-cA_addr p{margin:0!important;} /* cB is not in this page's mobile Figma - stays hidden */ body.page-id-70 #brxe-cB{display:none!important;} /* row 2: "Need help?" | 1px rule | "Contact us". Columns are (327-48)/2 = 139.5 wide, exactly the Figma measurement, and the rule sits dead centre of the 48px gutter (left:-24px on cD). */ body.page-id-70 #brxe-cC{display:flex!important;grid-column:1!important;grid-row:2!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:8px!important;width:100%!important;padding:0!important;margin:0!important;} body.page-id-70 #brxe-cD{display:flex!important;grid-column:2!important;grid-row:2!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:8px!important;width:100%!important;padding:0!important;margin:0!important;position:relative!important;} body.page-id-70 #brxe-cD::before{content:""!important;position:absolute!important;left:-24px!important;top:0!important;bottom:0!important;width:1px!important;background:#F7F7F7!important;} body.page-id-70 #brxe-cC_l, body.page-id-70 #brxe-cD_l{display:block!important;font-size:10px!important;line-height:18px!important;letter-spacing:1px!important;text-transform:uppercase!important;color:#F7F7F7!important;margin:0!important;} body.page-id-70 #brxe-cC a,body.page-id-70 #brxe-cC p, body.page-id-70 #brxe-cD a,body.page-id-70 #brxe-cD p{font-size:10px!important;line-height:14px!important;margin:0!important;} /* row 3: 184x40 social row, centred. cE_l stays hidden. */ body.page-id-70 #brxe-cE{grid-column:1 / -1!important;grid-row:3!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;} }