/* Scoped port of wordpress/upgrades-prototypedd/styles.css. Every selector is prefixed with .nbt-upgproto. The prototype was a standalone page and its CSS carried global resets -- body{background:#fff;font-size:18px}, *{box-sizing}, button/input font-size, and a :root variable block -- which would have restyled the whole site once dropped into the theme. Those are stripped; :root became .nbt-upgproto so the variables still resolve inside the widget. The prototype's own .mini-header and .hero are stripped too: the real theme header and hero_connected() replace them. Regenerate rather than hand-edit if the prototype changes. */ .nbt-upgproto{--ink:#17191b;--ink-2:#232629;--navy:#0b1c2b;--gold:#c2965a;--gold-light:#ffca81;--paper:#fff;--muted:#777b7f;--line:#dedbd4;--white:#fff;--green:#65cf72;--radius:14px;--shadow:0 18px 50px rgba(20,22,24,.11)} .nbt-upgproto button,.nbt-upgproto input,.nbt-upgproto select,.nbt-upgproto textarea{font-family:"Fb Matador","Noto Sans",Tahoma,Arial,sans-serif} .nbt-upgproto button,.nbt-upgproto input,.nbt-upgproto select,.nbt-upgproto textarea{font-size:inherit} .nbt-upgproto button,.nbt-upgproto label,.nbt-upgproto select{cursor:pointer} .nbt-upgproto .payment-shell{max-width:1240px;margin:-42px auto 90px;padding:0 24px;position:relative;z-index:2} .nbt-upgproto .progress{height:84px;background:#fff;border-radius:18px 18px 0 0;display:flex;justify-content:center;align-items:center;gap:15px;border-bottom:1px solid var(--line)} .nbt-upgproto .progress-item{display:flex;align-items:center;gap:9px;color:#a09c95;font-size:16px;white-space:nowrap} .nbt-upgproto .progress-item span{display:grid;place-items:center;width:29px;height:29px;border:1px solid #cbc7bf;border-radius:50%;font-size:16px;font-weight:700} .nbt-upgproto .progress-item.active{color:var(--ink)} .nbt-upgproto .progress-item.active span{background:var(--gold);border-color:var(--gold);color:white} .nbt-upgproto .progress-line{width:90px;height:2px;background:#e3e0da} .nbt-upgproto .progress-line i{display:block;width:0;height:100%;background:var(--gold);transition:.3s} .nbt-upgproto .workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,.85fr);gap:28px;background:#fff;padding:42px;border-radius:0 0 18px 18px;box-shadow:var(--shadow)} .nbt-upgproto .form-step+.form-step{margin-top:44px;padding-top:38px;border-top:1px solid var(--line)} .nbt-upgproto .section-heading{margin-bottom:25px} .nbt-upgproto .section-heading.compact{margin-bottom:22px} .nbt-upgproto .step-kicker{display:block;color:var(--gold);font-size:15px;font-weight:800;letter-spacing:.4px} .nbt-upgproto .section-heading h2{margin:3px 0 2px;color:var(--ink);font-size:34px;line-height:1.15;letter-spacing:-.6px} .nbt-upgproto .section-heading p{margin:0;color:var(--muted);font-size:17px} .nbt-upgproto .action-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px} .nbt-upgproto .action-card{position:relative;min-height:90px;display:grid;grid-template-columns:46px 1fr;grid-template-rows:auto auto;column-gap:14px;align-content:center;transition:all .18s ease;border:2px solid transparent;padding:19px 10px} .nbt-upgproto .action-card:hover{transform:translateY(-2px);border-color:#c3a477;box-shadow:0 8px 22px rgba(28,27,24,.08)} /* Padding matches the base rule exactly. The original 17px was compensating for a border the unselected card did not have; now that the base carries its own 2px transparent border there is nothing to compensate for, and the mismatch just shifted the label 7px sideways on every selection (measured 2026-09-06). */ .nbt-upgproto .action-card.selected{border:2px solid var(--gold);padding:19px 10px;background:#fdfaf5;box-shadow:0 7px 20px rgba(194,150,90,.12)} .nbt-upgproto .action-card input{position:absolute;opacity:0;pointer-events:none} .nbt-upgproto .action-icon{grid-row:1/3;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#f2ece3;color:var(--gold)} .nbt-upgproto .action-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .nbt-upgproto .action-icon circle{fill:currentColor;stroke:none} .nbt-upgproto .action-card strong{align-self:end;color:var(--ink);font-size:18px} .nbt-upgproto .action-card small{align-self:start;color:var(--muted);font-size:15px} .nbt-upgproto .card-check{position:absolute;top:11px;inset-inline-end:11px;color:white;border-radius:50%;place-items:center;font-size:14px;display:flex;align-items:center;justify-content:center;line-height:1} .nbt-upgproto .selected .card-check{display:grid} .nbt-upgproto .field{display:flex;flex-direction:column;gap:7px} .nbt-upgproto .field.full{margin-bottom:18px} .nbt-upgproto .field label{cursor:default;color:var(--ink);font-weight:700;font-size:16px} .nbt-upgproto .field label span{font-weight:400;color:#96918a} .nbt-upgproto .field small{font-size:14px;color:#8b8780} .nbt-upgproto .two-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px} .nbt-upgproto .select-wrap{position:relative} .nbt-upgproto .select-wrap:after{content:"⌄";position:absolute;left:17px;top:50%;transform:translateY(-58%);pointer-events:none;color:#6f6b64;font-size:24px} .nbt-upgproto .field select,.nbt-upgproto .field input,.nbt-upgproto .field textarea{width:100%;border:1px solid #cbc7bf;border-radius:10px;background:white;color:#2f3133;outline:none;transition:.2s} .nbt-upgproto .field select{height:54px;padding:0 16px;appearance:none} .nbt-upgproto .field textarea{resize:vertical;min-height:84px;padding:13px 15px;cursor:text} .nbt-upgproto .field input:focus,.nbt-upgproto .field select:focus,.nbt-upgproto .field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(194,150,90,.14)} .nbt-upgproto .money-input{position:relative} /* height dropped here -- the shared input rule further down sets 52px to match the theme's own fields; keeping 54px here would override it. */ .nbt-upgproto .money-input input{padding:0 15px 0 43px;text-align:start} .nbt-upgproto .money-input span{position:absolute;left:17px;top:50%;transform:translateY(-50%);font-weight:700;color:#6d6963} .nbt-upgproto .counter{height:54px;border:1px solid #cbc7bf;border-radius:10px;display:grid;grid-template-columns:50px 1fr 50px;align-items:center;text-align:center;overflow:hidden} .nbt-upgproto .counter button{height:100%;border:0;background:#f4f1ec;color:var(--ink);font-size:25px} .nbt-upgproto .counter button:hover{background:#ebe4da} .nbt-upgproto .counter output{font-weight:700} .nbt-upgproto .summary-card{align-self:start;position:sticky;top:24px;background:var(--ink-2);color:white;border-radius:var(--radius);padding:26px;box-shadow:0 16px 38px rgba(17,18,19,.22);overflow:hidden} .nbt-upgproto .summary-card:before{content:"";position:absolute;width:170px;height:170px;border:1px solid rgba(255,202,129,.08);border-radius:50%;top:-90px;left:-70px} .nbt-upgproto .summary-title{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.13);font-size:22px;font-weight:700} .nbt-upgproto .lock{color:var(--gold-light);transform:rotate(-25deg);font-size:25px} .nbt-upgproto .summary-card dl{margin:20px 0} .nbt-upgproto .summary-card dl div{display:flex;justify-content:space-between;gap:15px;padding:8px 0} .nbt-upgproto .summary-card dt{color:#bbbcb9;font-size:16px} .nbt-upgproto .summary-card dd{margin:0;text-align:left;font-size:16px;font-weight:600;max-width:62%} .nbt-upgproto .summary-total{display:flex;justify-content:space-between;align-items:end;margin-top:17px;padding-top:19px;border-top:1px solid rgba(255,255,255,.13)} .nbt-upgproto .summary-total span{font-size:16px} .nbt-upgproto .summary-total strong{color:var(--gold-light);font-size:31px;line-height:1;direction:ltr} .nbt-upgproto .pay-button{width:100%;height:58px;margin-top:22px;border:0;border-radius:10px;background:var(--gold);color:white;display:flex;align-items:center;justify-content:center;gap:9px;font-weight:700;transition:.18s} .nbt-upgproto .pay-button:hover{background:#d0a76f;transform:translateY(-1px)} .nbt-upgproto .pay-button strong{direction:ltr} .nbt-upgproto .pay-button b{font-size:20px;margin-right:auto;position:absolute;left:45px} .nbt-upgproto .trust-row{display:flex;justify-content:center;gap:15px;margin-top:15px;color:#d8d7d3;font-size:14px} .nbt-upgproto .trust-row b{display:inline-grid;place-items:center;width:15px;height:15px;border:1px solid var(--gold-light);border-radius:50%;color:var(--gold-light);font-size:11px} .nbt-upgproto .secure-note{text-align:center;margin:12px 0 0;color:#91938f;font-size:13px} .nbt-upgproto .mobile-paybar{display:none} /* pointer-events:none while hidden -- this is a bug fix, not tidiness. The hidden state is opacity:0 + translateY(150%), and NEITHER of those takes an element out of hit testing: a fully transparent box still swallows taps at wherever the transform put it. On desktop that is harmless, because the toast parks bottom-right at max-width:420px and nothing interactive is under it. On mobile the @media block below stretches it to left:14px right:14px and bottom:87px, and translating it down 150% of its own height lands it directly over the fixed .mobile-paybar -- so "המשך לתשלום" looked enabled, was enabled, and did nothing when tapped. Reported from a real phone, reproduced at 390px: elementFromPoint at the button's centre returned DIV.toast. Restored to auto on .show so a close control can still be added later. */ .nbt-upgproto .toast{position:fixed;z-index:30;right:30px;bottom:30px;transform:translateY(150%);opacity:0;pointer-events:none;display:flex;gap:12px;align-items:center;max-width:420px;padding:16px 19px;border-radius:12px;background:#17291c;color:white;box-shadow:0 18px 45px rgba(0,0,0,.25);transition:.35s} .nbt-upgproto .toast.show{transform:translateY(0);opacity:1;pointer-events:auto} .nbt-upgproto .toast>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--green);color:#15371c;font-weight:800} .nbt-upgproto .toast div{display:grid} .nbt-upgproto .toast small{color:#c6d1c8} @media(max-width:850px){ .nbt-upgproto .payment-shell{margin:-28px auto 104px;padding:0 12px} .nbt-upgproto .progress{height:70px;border-radius:14px 14px 0 0;padding:0 12px} .nbt-upgproto .progress-item b{display:none} .nbt-upgproto .progress-line{width:55px} .nbt-upgproto .workspace{display:block;padding:25px 18px 28px;border-radius:0 0 14px 14px} .nbt-upgproto .section-heading h2{font-size:28px} .nbt-upgproto .action-grid{grid-template-columns:1fr;gap:10px} .nbt-upgproto .action-card{min-height:102px;padding:16px;grid-template-columns:42px 1fr} .nbt-upgproto .action-icon{width:42px;height:42px} .nbt-upgproto .form-step+.form-step{margin-top:30px;padding-top:28px} .nbt-upgproto .two-cols{grid-template-columns:1fr;gap:17px} .nbt-upgproto .summary-card{position:static;margin-top:28px;padding:22px;box-shadow:none} .nbt-upgproto .summary-card .pay-button{display:none} .nbt-upgproto .mobile-paybar{position:fixed;z-index:20;display:flex;bottom:0;left:0;right:0;background:white;padding:11px 14px max(11px,env(safe-area-inset-bottom));box-shadow:0 -8px 30px rgba(23,25,27,.14);justify-content:space-between;align-items:center;gap:15px} .nbt-upgproto .mobile-paybar div{display:grid} .nbt-upgproto .mobile-paybar div span{font-size:13px;color:#777} .nbt-upgproto .mobile-paybar div strong{font-size:22px;direction:ltr;color:var(--ink)} .nbt-upgproto .mobile-paybar button{height:49px;flex:1;border:0;border-radius:9px;background:var(--gold);color:white;font-weight:700} .nbt-upgproto .mobile-paybar button span{font-size:19px;margin-right:8px} .nbt-upgproto .toast{right:14px;left:14px;bottom:87px} } @media(max-width:390px){ .nbt-upgproto .workspace{padding-inline:14px} .nbt-upgproto .summary-card{padding:19px} .nbt-upgproto .action-card small{font-size:14px} .nbt-upgproto .trust-row{gap:9px} } /* ---- Adjustments for living INSIDE the hero (owner, 2026-09-06) ------------ The prototype was a standalone page whose shell pulled itself UP over its own hero with a negative margin. Nested inside .hero-connected that pull is wrong -- it drags the form over the hero's own heading -- so it is cancelled and replaced with normal spacing. */ .nbt-upgproto--in-hero .payment-shell{margin-top:0;margin-bottom:0;padding-bottom:60px} .hero-connected .nbt-upgproto--in-hero{position:relative;z-index:10;width:100%} /* The summary card's decorative ring is absolutely positioned at left:-70px and is only contained because the card is a positioning context. The mobile rule below sets .summary-card{position:static}, which re-parented the ring to .payment-shell and let it escape -- measured 2026-09-06 at 390px: body.scrollWidth 460 vs viewport 390, exactly the ring's 70px. Restoring a positioning context (without re-enabling sticky) contains it again. */ @media(max-width:850px){ .nbt-upgproto .summary-card{position:relative} } /* ==== Theme alignment (owner, 2026-09-06) ================================== The prototype was designed standalone and used generic values -- flat gold buttons at 10px radius, 14px cards, #cbc7bf input borders. Everything below re-tunes it to tokens sampled from the live theme rather than eyeballed: gold #c2965a (101 uses in theme-new.min.css -- the site's gold) gold heading #b58f50 (.nt-secheading--gold) button border-radius:130px + linear-gradient(90deg,#c2965a,#341f02) inside a ring: border:5px solid transparent + 0 0 0 1px #c2965a (.button-wrap / .button-wrap .button -- the sitewide CTA) input 1px solid rgba(110,110,110,.32), radius 14px, height 52px (.product-upgrade .form-flex .input -- the live payments form) card radius 20px, shadow 0 6px 26px rgba(60,50,35,.11) (.nt-prow) ------------------------------------------------------------------------- */ /* Cards: the theme's rounder corners and softer, warmer shadow. */ .nbt-upgproto .workspace{border-radius:0 0 20px 20px;box-shadow:0 6px 26px rgba(60,50,35,.11)} .nbt-upgproto .progress{border-radius:20px 20px 0 0} .nbt-upgproto .summary-card{border-radius:20px;box-shadow:0 6px 26px rgba(60,50,35,.18)} /* Section headings in the site's gold, matching .nt-secheading--gold. */ .nbt-upgproto .section-heading h2{color:#b58f50} .nbt-upgproto .step-kicker{color:#c2965a} /* Inputs: the live payments form's own border/radius/height. */ .nbt-upgproto .field select, .nbt-upgproto .field input, .nbt-upgproto .field textarea, .nbt-upgproto .counter{border:1px solid rgba(110,110,110,.32);border-radius:14px} .nbt-upgproto .field select, .nbt-upgproto .money-input input, .nbt-upgproto .counter{height:52px} .nbt-upgproto .field input:focus, .nbt-upgproto .field select:focus, .nbt-upgproto .field textarea:focus{border-color:#c2965a;box-shadow:0 0 0 3px rgba(194,150,90,.16)} .nbt-upgproto .counter button{background:#f6f2ec} .nbt-upgproto .counter button:hover{background:#efe6d8} /* Selected action card: gold ring in the site's gold, warm tint. */ .nbt-upgproto .action-card.selected{border-color:#c2965a;background:#fdfaf5} .nbt-upgproto .action-card:hover{border-color:#c2965a} .nbt-upgproto .action-icon{background:#f6efe4;color:#b58f50} .nbt-upgproto .card-check{background:#c2965a} /* The site's signature CTA: gradient pill inside an offset gold ring. Applied to both the desktop pay button and the mobile bar's so they read as one control. */ .nbt-upgproto .pay-button, .nbt-upgproto .mobile-paybar button{ border-radius:130px; background:linear-gradient(90deg,#c2965a 0,#341f02 100%); border:5px solid transparent; /* padding-box is load-bearing. The theme splits this control across two elements -- .button-wrap carries border:5px transparent + the 1px gold ring, .button carries the gradient -- so the gradient never reaches the border. Collapsed onto one element the default border-box clip paints the gradient UNDER the transparent border, filling the gap and turning the ring muddy. padding-box stops the fill at the padding edge, restoring the gap. */ background-clip:padding-box; box-shadow:0 0 0 1px #c2965a; color:#fff; transition:filter .25s ease,transform .18s ease} /* Re-declaring the `background` SHORTHAND here reset background-clip back to border-box, refilling the ring gap on hover (measured 2026-09-06: rest padding-box -> hover border-box). The gradient does not change on hover anyway, so drop the redundant re-declaration and only apply the effect. */ /* LONGHANDS, not the `background` shorthand. Two reasons: the prototype's own earlier rule sets `background:#d0a76f` on hover, which both flattens the gradient and (being a shorthand) resets background-clip to border-box -- refilling the ring gap. background-image + an explicit background-clip override it without ever touching the clip. Measured 2026-09-06: with the shorthand, rest padding-box -> hover border-box. */ .nbt-upgproto .pay-button:hover, .nbt-upgproto .mobile-paybar button:hover{ background-image:linear-gradient(90deg,#c2965a 0,#341f02 100%); background-color:transparent; background-clip:padding-box; filter:brightness(1.08);transform:translateY(-1px)} /* The arrow was absolutely positioned at left:45px, which the pill's new padding no longer lines up with -- let flex place it instead. */ .nbt-upgproto .pay-button b{position:static;margin-inline-start:auto} /* small.deposit-hint, not .deposit-hint: `.nbt-upgproto .field small` is (0,2,1) and outranked the flat class, so the warning rendered in the muted grey used for ordinary field help text. */ .nbt-upgproto small.deposit-hint{color:#c0392b;font-weight:600} /* Real icons from the upgrade_options repeater replace the prototype's inline SVGs. Constrained and centred inside the existing 46px gold disc; the source images vary in size and would otherwise burst it. */ .nbt-upgproto .action-icon img{max-width:24px;max-height:24px;width:auto;height:auto;object-fit:contain;display:block} /* A read-only amount (room_adding) should look derived, not broken. */ .nbt-upgproto .money-input input[readonly]{background:#f6f2ec;color:#6d6963;cursor:not-allowed} /* Credit-card surcharge line, sitting between the calculation rows and the grand total. Quieter than the total so the payable figure still leads. */ .nbt-upgproto .summary-fee{display:flex;justify-content:space-between;align-items:center; gap:15px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.13); color:#bbbcb9;font-size:16px} .nbt-upgproto .summary-fee #summary-fee{color:#fff;font-weight:600;direction:ltr} .nbt-upgproto .summary-fee + .summary-total{margin-top:12px;padding-top:14px} /* ==== Design pass (ChatGPT direction, 2026-09-06) ========================== Implemented in the order it recommended. Scoped with the page-template body class where it has to reach the shared hero/footer, so nothing leaks. */ /* --- 1. Hero becomes a defined band, not a full-height slab --------------- The form is a child of .hero-connected, so the hero element is as tall as the whole flow (measured 1234px desktop / 1931px mobile) and read as one giant dark surface. Rather than move the form out of the hero, the hero's PAINT is limited to a 280px band and the remainder is page-white -- the DOM nesting (and the overlap effect) is kept, the black slab is not. */ .page-template-template-upgrades-proto .hero-connected{ background:linear-gradient(180deg,#1b1d1f 0,#1b1d1f 280px,#fff 280px) !important; min-height:0;height:auto} /* The curved divider closes the hero; with the band ending at 280px it would now draw a curve across white at the very bottom of the form. */ .page-template-template-upgrades-proto .hero-connected-bottom{display:none} /* Sit the heading inside the band and let the form overlap its last 48px. */ .page-template-template-upgrades-proto .hero-connected .page-header{ min-height:0;padding:56px 0 0;margin:0} .nbt-upgproto--in-hero{margin-top:-48px} /* 72px of white before the footer. */ /* The footer already contributes 60px of its own top margin (measured), so the shell only needs 12 to reach the 72px of white the spec asks for. */ .nbt-upgproto--in-hero .payment-shell{padding-bottom:12px} /* --- 5. Progress bar removed --------------------------------------------- It promised a three-step wizard the page does not have, cost 84px above the first real control, and read as generic SaaS chrome rather than NBATrips. */ .nbt-upgproto .progress{display:none} .nbt-upgproto .workspace{border-radius:20px} /* --- 9. No competing CTA on a payment screen ----------------------------- The footer lead-capture form invites a NEW action at the moment the customer should be completing one. Hidden on this page only; the footer's legal, support and WhatsApp links stay. */ .page-template-template-upgrades-proto .need-help-section, .page-template-template-upgrades-proto .footer-form, .page-template-template-upgrades-proto .footer-contact-form{display:none} /* --- 1b. Heading sized for a payment screen ------------------------------ The shared hero H1 renders at 102px here. At that size it cannot fit inside a 280px band above the form -- measured: the form was overlapping the heading by 28px -- and it reads as a marketing splash rather than a transaction. Reduced to a size that both fits and suits the context (also ChatGPT item 10). */ /* Specificity note: the theme sizes this heading with `html[lang="he-IL"] .page-hero-section .page-header > h1.entry-title` = (0,4,2), a viewport-relative 7.1vw (102px at 1440). A plain body-class selector at (0,3,0) loses to it. `html[lang]` matches any language and lifts this to (0,5,2). */ html[lang] .page-template-template-upgrades-proto .page-hero-section .page-header > h1.entry-title{ font-size:42px;line-height:1.15;margin:0} /* Bottom padding = the 48px the form is pulled up by, PLUS the 32px gap we actually want under the heading. Without it the negative margin lands on the H1 itself (measured: the form covered it by 48px). */ .page-template-template-upgrades-proto .hero-connected .page-header{padding:48px 0 80px} @media(max-width:850px){ .page-template-template-upgrades-proto .hero-connected{ background:linear-gradient(180deg,#1b1d1f 0,#1b1d1f 220px,#fff 220px) !important} html[lang] .page-template-template-upgrades-proto .page-hero-section .page-header > h1.entry-title{font-size:30px} .page-template-template-upgrades-proto .hero-connected .page-header{padding:32px 0 56px} .nbt-upgproto--in-hero{margin-top:-24px} } /* The hero adds its own bottom padding on desktop, which stacked on top of the shell's 72px and pushed the gap to the footer to 132px. */ .page-template-template-upgrades-proto .hero-connected{padding-bottom:0} /* --- 3. Action cards: visible but quiet ---------------------------------- */ .nbt-upgproto .action-card{ background:#fff;border:1px solid rgba(194,150,90,.28);border-radius:20px; box-shadow:0 3px 12px rgba(60,50,35,.06); min-height:96px;padding:18px 20px; transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease} .nbt-upgproto .action-card strong{font-size:18px;font-weight:500;color:#232629} .nbt-upgproto .action-card small{font-size:16px;color:#77736d} .nbt-upgproto .action-icon{width:44px;height:44px;background:#f6efe4;color:#b58f50} .nbt-upgproto .action-card:hover{ border-color:rgba(194,150,90,.68);box-shadow:0 6px 18px rgba(60,50,35,.10);transform:translateY(-1px)} .nbt-upgproto .action-card.selected{ background:#fdfaf5;border:2px solid #c2965a;border-radius:20px; box-shadow:0 6px 20px rgba(194,150,90,.14); /* 1px less padding on each side compensates for the 2px border, so selecting a card cannot shift its contents. */ padding:17px 19px} .nbt-upgproto .action-card.selected .action-icon{background:#c2965a;color:#fff} .nbt-upgproto .action-card.selected .action-icon img{filter:brightness(0) invert(1)} .nbt-upgproto .card-check{width:22px;height:22px;background:#c2965a} /* Keyboard focus -- the radio itself is visually hidden, so the ring goes on the card. */ .nbt-upgproto .action-card:focus-within{outline:3px solid rgba(255,202,129,.45);outline-offset:3px} /* --- 4. Summary card: the trust anchor ----------------------------------- */ .nbt-upgproto .summary-card{background:#232629;border-radius:20px;padding:28px; box-shadow:0 10px 34px rgba(17,18,19,.22)} .nbt-upgproto .summary-title{font-size:24px;font-weight:500;padding-bottom:0;border-bottom:0;margin-bottom:20px} .nbt-upgproto .summary-card dl{margin:0} .nbt-upgproto .summary-card dl div{padding:0;margin-bottom:14px} .nbt-upgproto .summary-card dt{font-size:16px;color:rgba(255,255,255,.62)} .nbt-upgproto .summary-card dd{font-size:16px;font-weight:500;color:#fff} /* Fee is information, not a highlight -- kept quieter than the total above it. */ .nbt-upgproto .summary-fee{font-size:16px;margin-top:0;padding-top:0;border-top:0; color:rgba(255,255,255,.58)} .nbt-upgproto .summary-fee #summary-fee{font-size:16px;font-weight:400;color:rgba(255,255,255,.78)} .nbt-upgproto .summary-total{margin-top:24px;padding-top:20px; border-top:1px solid rgba(255,255,255,.14);align-items:baseline} .nbt-upgproto .summary-total span{font-size:17px;font-weight:500;color:rgba(255,255,255,.82)} .nbt-upgproto .summary-total strong{font-size:40px;font-weight:500;color:#ffca81;line-height:1} .nbt-upgproto .pay-button{height:60px;margin-top:24px;font-size:18px;font-weight:500} .nbt-upgproto .pay-button strong{font-weight:500} /* Trust chips */ .nbt-upgproto .trust-row{gap:16px;margin-top:14px;font-size:15px;color:rgba(255,255,255,.74)} .nbt-upgproto .trust-row b{border-color:#e8bc7a;color:#e8bc7a} .nbt-upgproto .secure-note{font-size:14px;color:rgba(255,255,255,.48);margin-top:10px} /* --- 6. Spacing rhythm ---------------------------------------------------- */ .nbt-upgproto .workspace{padding:44px;gap:32px} .nbt-upgproto .section-heading{margin-bottom:32px} .nbt-upgproto .action-grid{gap:14px;margin-bottom:40px} .nbt-upgproto .form-step+.form-step{margin-top:40px;padding-top:32px} .nbt-upgproto .two-cols{gap:16px;margin-bottom:24px} .nbt-upgproto .field.full{margin-bottom:24px} .nbt-upgproto .field{gap:8px} .nbt-upgproto .details-step .field.full:last-child{margin-bottom:0} /* --- 10. Lighter weights: Fb Matador reads coarse at 700 ------------------ */ .nbt-upgproto .section-heading h2{font-weight:500} .nbt-upgproto .field label{font-weight:500} .nbt-upgproto .counter output{font-weight:500;font-size:20px} .nbt-upgproto .money-input input{font-size:22px;font-weight:500} .nbt-upgproto .field label{font-size:17px} .nbt-upgproto .step-kicker{font-weight:600} /* The summary's lock is now a real icon, not the "⌁" glyph (which reads as a stray mark rather than a security cue). */ .nbt-upgproto .lock{transform:none;font-size:0;color:#e8bc7a;display:flex;align-items:center} .nbt-upgproto .lock svg{display:block} /* --- 8. Mobile ------------------------------------------------------------ */ @media(max-width:850px){ .nbt-upgproto .workspace{padding:20px 18px 24px} .nbt-upgproto .action-grid{grid-template-columns:1fr;gap:10px;margin-bottom:32px} .nbt-upgproto .action-card{min-height:88px;padding:16px 18px} .nbt-upgproto .action-card.selected{padding:15px 17px} .nbt-upgproto .field select, .nbt-upgproto .money-input input, .nbt-upgproto .counter{height:52px} /* Comfortable tap targets on the stepper. */ .nbt-upgproto .counter{grid-template-columns:52px 1fr 52px} /* The summary keeps the breakdown but sheds its CTA and shrinks its total -- the fixed bar below already carries the payable figure, and showing the same number twice at the same weight makes neither feel authoritative. */ .nbt-upgproto .summary-card .pay-button{display:none} .nbt-upgproto .summary-total strong{font-size:28px} .nbt-upgproto .mobile-paybar{height:72px;padding:0 14px; padding-bottom:env(safe-area-inset-bottom);background:#fff; box-shadow:0 -8px 28px rgba(23,25,27,.14)} .nbt-upgproto .mobile-paybar div strong{font-size:24px;font-weight:500;color:#232629} .nbt-upgproto .mobile-paybar button{height:50px;font-weight:500} /* Clear the fixed bar so the end of the summary is reachable. */ .nbt-upgproto--in-hero .payment-shell{padding-bottom:104px} } /* ==== Staged flow + motion (owner, 2026-09-06) ============================= The step labels are only honest if the steps are real, so step 2 is gated on step 1 and the rail reflects actual state. Motion is used to explain that gating -- to show the form opening up -- not for decoration. */ /* --- the compact status rail --------------------------------------------- */ .nbt-upgproto .steprail{display:flex;align-items:center;justify-content:center;gap:12px; height:48px;font-size:16px;color:#9a9690; background:#fff;border-radius:20px 20px 0 0;border-bottom:1px solid rgba(60,50,35,.08)} .nbt-upgproto .steprail__item{display:inline-flex;align-items:center;gap:8px; transition:color .25s ease} .nbt-upgproto .steprail__dot{width:7px;height:7px;border-radius:50%; background:#d8d3cb;transition:background .25s ease,box-shadow .25s ease} .nbt-upgproto .steprail__item.is-active{color:#b58f50} .nbt-upgproto .steprail__item.is-active .steprail__dot{ background:#c2965a;box-shadow:0 0 0 4px rgba(194,150,90,.16)} .nbt-upgproto .steprail__sep{width:26px;height:1px;background:#e3e0da} /* The workspace already rounds its own top; with the rail above it, it must not. */ .nbt-upgproto .workspace{border-radius:0 0 20px 20px} /* --- step 2 locked until an action is chosen ----------------------------- */ .nbt-upgproto .form-step.is-locked{opacity:.42;pointer-events:none;filter:saturate(.6)} .nbt-upgproto .form-step{transition:opacity .3s ease,filter .3s ease} /* Plays once, only on the lock->unlock transition (JS restarts it). */ @keyframes nbtReveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .nbt-upgproto .form-step.is-revealing{animation:nbtReveal .38s cubic-bezier(.22,.61,.36,1) both} /* --- selection feedback --------------------------------------------------- */ @keyframes nbtPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}} .nbt-upgproto .selected .card-check{animation:nbtPop .28s cubic-bezier(.34,1.56,.64,1) both} .nbt-upgproto .action-card .action-icon, .nbt-upgproto .action-card .action-icon img{transition:background-color .18s ease,filter .18s ease} /* --- the total reacts when it changes ------------------------------------- */ @keyframes nbtBump{0%{transform:scale(1)}35%{transform:scale(1.05)}100%{transform:scale(1)}} .nbt-upgproto .summary-total strong.is-bumping{animation:nbtBump .32s ease both; transform-origin:center right} /* The pay bar total gets the same reaction. On a phone the summary card is below the fold while the stepper is in use, so this is the ONLY total the customer can see move. */ .nbt-upgproto .mobile-paybar strong.is-bumping{animation:nbtBump .32s ease both; transform-origin:center left} /* The multiplication restated at the stepper, so "x2" is visible where the +/- buttons are rather than only in the off-screen summary. */ .nbt-upgproto .pax-live{display:block;margin-top:6px;font-size:15px;font-weight:700; color:var(--gold);direction:rtl;unicode-bidi:isolate} .nbt-upgproto .pax-live[hidden]{display:none} /* --- honour reduced motion ------------------------------------------------ */ @media(prefers-reduced-motion:reduce){ .nbt-upgproto .form-step.is-revealing, .nbt-upgproto .selected .card-check, .nbt-upgproto .mobile-paybar strong.is-bumping, .nbt-upgproto .summary-total strong.is-bumping{animation:none} } @media(max-width:850px){ /* The rail is the first thing on a small screen and pushes the real controls down; the section headings already say "שלב N מתוך 3". */ .nbt-upgproto .steprail{display:none} .nbt-upgproto .workspace{border-radius:20px} } /* Pay disabled until step 1 is done -- reads as "not yet", not as broken. */ .nbt-upgproto .pay-button[disabled], .nbt-upgproto .mobile-paybar button[disabled]{ filter:grayscale(.55) brightness(.85);opacity:.6;cursor:not-allowed;transform:none} .nbt-upgproto .pay-button[disabled]:hover, .nbt-upgproto .mobile-paybar button[disabled]:hover{filter:grayscale(.55) brightness(.85);transform:none} /* --- mobile scroll reveal ------------------------------------------------- The `nbt-reveal` class is added by JS, never in the markup, so if the script fails or is blocked nothing is left invisible -- the page just doesn't animate. Mobile-only: on desktop the whole form is visible at once and fading it in as you scroll would only delay reading it. */ .nbt-upgproto .nbt-reveal{opacity:0;transform:translateY(14px); transition:opacity .45s ease var(--nbt-delay,0ms),transform .45s cubic-bezier(.22,.61,.36,1) var(--nbt-delay,0ms)} .nbt-upgproto .nbt-reveal.is-inview{opacity:1;transform:none} /* Sticky elements fade only -- see the JS note; a transform on a sticky element fights its own offset while the animation runs. */ .nbt-upgproto .nbt-reveal--fade{transform:none} @media(min-width:851px){ /* Shorter travel on desktop: most of the form is already on screen at load, so a large slide reads as the page being slow rather than as an entrance. */ .nbt-upgproto .nbt-reveal{transform:translateY(10px); transition-duration:.38s} } @media(max-width:850px){ /* The fixed pay bar slides up once it becomes usable. */ .nbt-upgproto .mobile-paybar{transform:translateY(0);transition:transform .35s cubic-bezier(.22,.61,.36,1)} } @media(prefers-reduced-motion:reduce){ .nbt-upgproto .nbt-reveal{opacity:1;transform:none;transition:none} } /* --- trip picker attention ----------------------------------------------- Shown when the chosen action needs a trip and none is selected yet. A gold ring pulses out from the select, the field lifts slightly, and its label turns gold -- enough to be unmissable without being alarming. Deliberately NOT the red error treatment: nothing is wrong yet, this is the next step. */ .nbt-upgproto #trip-field{border-radius:16px;transition:transform .25s ease} .nbt-upgproto #trip-field .select-wrap{position:relative} .nbt-upgproto #trip-field.is-attn > label{color:#b58f50;transition:color .25s ease} .nbt-upgproto #trip-field.is-attn select{ border-color:#c2965a; box-shadow:0 0 0 3px rgba(194,150,90,.18)} /* The pulse is a pseudo-element on the wrapper so it can grow outside the select's own box without affecting layout. */ .nbt-upgproto #trip-field.is-attn .select-wrap::before{ content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none; border:2px solid #c2965a; animation:nbtAttnRing 1.15s cubic-bezier(.22,.61,.36,1) 2} @keyframes nbtAttnRing{ 0%{opacity:.85;transform:scale(1)} 70%{opacity:0;transform:scale(1.045)} 100%{opacity:0;transform:scale(1.045)}} /* A single soft nudge so the eye catches the movement even before the ring. */ .nbt-upgproto #trip-field.is-attn{animation:nbtAttnLift .5s ease both} @keyframes nbtAttnLift{0%{transform:none}40%{transform:translateY(-3px)}100%{transform:none}} @media(prefers-reduced-motion:reduce){ /* Keep the static highlight -- it carries the meaning -- drop the motion. */ .nbt-upgproto #trip-field.is-attn, .nbt-upgproto #trip-field.is-attn .select-wrap::before{animation:none} .nbt-upgproto #trip-field.is-attn .select-wrap::before{opacity:.85} } /* --- custom trip dropdown ------------------------------------------------- Same measurements as `.nbatrips_select` on the existing upgrades page (52px tall, 1px rgba(110,110,110,.32), 14px radius, chevron flipping on open) so the two pages read as one product. The native