/* ========================================================================== /quote/submit — FRAME "Quote submit" 7064:1610, 1920x2400. Built same-to-same from the LIVE Figma file R4YlVFqXtGfx3rlvWSMro8. Linked FROM app/quote/submit/page.tsx, AFTER quote-results.css and BEFORE quote-details.css. D18 is the third screen on D10's stack (WIZARD-NOTES §6), so it wears the `.qr` shell wholesale — marble, rail box, stepper, FAQ and footer are all quote-results.css's. D18 even puts its rail's lower cluster on D10's own y's (rule 758 / Trustpilot 790 / help 834 / FAB 826), so .qr-rule, .qr-trust, .qr-help and .qr-fab need NO override here at all. Only what is new to D18 lives in this file: the centred booking column and the rail's 564-tall package card. Everything is namespaced `.qb-` (verified free across all eleven sheets), and the handful of `.qr-` selectors below are scoped under `.qb` so /quote/results and /quote/customize are untouched. Every length is rem = figma_px / 16. Never write px here. ========================================================================== */ /* ========================================================================== LEFT RAIL — Frame 101 @40,40 460x930, same box, different contents ========================================================================== */ /* Frame 113 @199,46 197x48 -> card-relative 187,34. HUG/FIXED, gap 8, padding [4,,4,], so the 40 chip sits at y4 and `align-items: center` lands the 22-tall label on Figma's own y13. */ /* VERTICALLY CENTRED ON THE LOGO (user, 2026-08-07: "button ko logo k center align kro"). The logo is 117x60 at card-rel 40,40, so its centre is y70; Figma puts this 48-tall row at y34, i.e. centred on y58 — 12 high. 46 lands the row's centre on the logo's exactly. Figma's own x is kept. */ .qb-back { position: absolute; left: 11.6875rem; /* 187 */ top: 2.875rem; /* 46 = 70 - 48/2 */ display: flex; align-items: center; gap: 0.5rem; /* 8 */ height: 3rem; /* 48 */ } /* NOT D17's chip: r12 rather than 8, and #111 @.04 with a matching @.04 2px INSIDE stroke rather than a flat #f5f6f0. The stroke is an inset shadow so it cannot shift the arrow in by the border width. */ .qb-back-chip { flex: none; width: 2.5rem; /* 40 */ height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius); /* 12 */ background: rgba(17, 17, 17, 0.04); box-shadow: inset 0 0 0 0.125rem rgba(17, 17, 17, 0.04); } /* the shared arrow vector under Figma's 180deg wrapper rotation */ .qb-back-chip img { width: 1.75rem; height: 1.75rem; transform: scaleX(-1); } .qb-back-label { font-family: var(--font-sans); /* InstrumentSans-Medium */ font-weight: 500; font-size: 1.125rem; /* 18 */ line-height: 1.3725rem; /* 21.96 */ letter-spacing: -0.01rem; color: var(--ink-70); white-space: nowrap; } /* Frame 1707481526 @40,140 356x564 -> card-relative 28,128. Same masked ::after ring as D17's package card and for the same reason: a real border would shift every absolutely-positioned child in by the border width. */ /* CENTRED in the rail (user, 2026-08-07: "is ko center align kro"), the same call already made on /quote/customize's package card. Figma's own 28 in a 436-wide rail card is 28 left against 52 right — visibly left-heavy. `left/right: 0` + `margin-inline: auto` centres it on 40/40 with no magic number. The card's 356x564 and every child offset inside it are untouched. */ .qb-pkg { position: absolute; left: 0; right: 0; margin-inline: auto; /* (436 - 356) / 2 = 40 */ top: 8rem; /* 128 */ width: 22.25rem; /* 356 */ height: 35.25rem; /* 564 */ background: var(--bg); /* #fefff9 */ border-radius: var(--radius); overflow: hidden; /* clipsContent */ } .qb-pkg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 0.125rem; /* weight 2 INSIDE */ pointer-events: none; background: linear-gradient(to bottom, #e2fa5a 0%, #869435 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } .qb-pkg > * { position: absolute; margin: 0; } /* Frame 1707481525 @0,0 356x156 holding image 143 at rel(-367,-166) 1160x478. The source is 1194x492 native, so it is drawn very slightly under 1:1 and heavily cropped — the same roof shot /quote step 2 uses. */ .qb-map { left: 0; top: 0; width: 22.25rem; /* 356 */ height: 9.75rem; /* 156 */ background: var(--white); overflow: hidden; } .qb-map img { position: absolute; left: -22.9375rem; /* -367 */ top: -10.375rem; /* -166 */ width: 72.5rem; /* 1160 */ height: 29.875rem; /* 478 */ max-width: none; /* base.css would clamp it */ } /* Frame 1707481554 @20,176 316x80 — thumb 80 + gap 12 + a FILL text column */ .qb-prod { left: 1.25rem; /* 20 */ top: 11rem; /* 176 */ width: 19.75rem; /* 316 */ display: flex; align-items: center; gap: 0.75rem; /* 12 */ } .qb-prod-thumb { flex: none; width: 5rem; height: 5rem; object-fit: cover; } .qb-prod-lines { display: flex; flex-direction: column; gap: 0.375rem; } /* 6 */ .qb-prod-t, .qb-prod-sub { margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.22rem; /* 19.52 */ letter-spacing: -0.01rem; } .qb-prod-t { color: var(--ink); } .qb-prod-sub { color: var(--ink-70); } /* Frame 1707481532 @20,276 316x32, padding [6,8,6,8], gap 4 */ .qb-inc { left: 1.25rem; top: 17.25rem; /* 276 */ width: 19.75rem; /* 316 */ height: 2rem; /* 32 */ display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; padding: 0.375rem 0.5rem; border-radius: var(--radius-sm); background: rgba(17, 17, 17, 0.06); } .qb-inc-t { font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.22rem; letter-spacing: -0.01rem; color: var(--ink-70); white-space: nowrap; } /* Frame 7064:1813 carries rotationRad 1.5708, i.e. the chevron is turned 90 */ .qb-inc img { flex: none; width: 1.25rem; height: 1.25rem; } /* Frame 1707481573 @20,324 316x96 — #e2fa5a at paint opacity .2 */ .qb-tbf { left: 1.25rem; top: 20.25rem; /* 324 */ width: 19.75rem; /* 316 */ height: 6rem; /* 96 */ border-radius: var(--radius); background: rgba(226, 250, 90, 0.2); } .qb-tbf > * { position: absolute; margin: 0; } /* Frame 1707481575 @16,12 137x24 — a 24 icon, an 8 gap, then the label */ .qb-tbf-head { left: 1rem; top: 0.75rem; display: flex; align-items: center; gap: 0.5rem; /* 8 */ height: 1.5rem; } .qb-tbf-head img { flex: none; width: 1.5rem; height: 1.5rem; } .qb-tbf-t { font-family: var(--font-sans); font-weight: 500; /* InstrumentSans-Medium */ font-size: 1rem; line-height: 1.22rem; letter-spacing: -0.01rem; color: var(--ink); white-space: nowrap; } /* TEXT 7064:1810 @16,44 284x40 — the authored 284 is what wraps it to 2 lines */ .qb-tbf-body { left: 1rem; top: 2.75rem; /* 44 */ width: 17.75rem; /* 284 */ font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.22rem; letter-spacing: -0.01rem; color: var(--ink-70); } /* Group 34 @0,444 356x120 --------------------------------------------------- Two SOLID lime rules, not the dashed one the rail's footer carries: Vector 11 is a 356-long line laid across the group's top edge and Vector 10 a 120-tall one down x186. Both are `#e2fa5a` weight 2 with no dashes. */ .qb-price { left: 0; top: 27.75rem; /* 444 */ width: 22.25rem; /* 356 */ height: 7.5rem; /* 120 */ } .qb-price > * { position: absolute; } .qb-price-rule-h { left: 0; top: 0; width: 22.25rem; height: 0.125rem; background: var(--accent); } .qb-price-rule-v { left: 11.625rem; top: 0; width: 0.125rem; height: 7.5rem; background: var(--accent); } .qb-price-cap { font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 1.22rem; /* 19.52 */ letter-spacing: -0.01rem; color: var(--ink-70); white-space: nowrap; } .qb-cap-1 { left: 2.5625rem; top: 1.9375rem; } /* @41,31 */ .qb-cap-2 { left: 13.25rem; top: 1.9375rem; } /* @212,31 */ .qb-price-val { left: 2.9375rem; /* 47 */ top: 3.5625rem; /* 57 */ font-family: var(--font-display); /* HostGrotesk-Medium */ font-weight: 500; font-size: 1.5rem; /* 24 */ line-height: 2rem; letter-spacing: -0.08rem; color: var(--ink); white-space: nowrap; } /* Frame 1707481537 @230,57 83x32 — HUG row, gap 4, the chevron turned 90 */ .qb-price-mo { left: 14.375rem; /* 230 */ top: 3.5625rem; /* 57 */ display: flex; align-items: center; gap: 0.25rem; /* 4 */ height: 2rem; } .qb-price-mo-val { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 2rem; letter-spacing: -0.08rem; color: var(--ink); } .qb-price-mo img { flex: none; width: 1.25rem; height: 1.25rem; } /* ========================================================================== STEPPER — stage 3 ========================================================================== D10 is .12/.04/.04, D17 .12/.12/.04, D18 is .12/.12/.12 — every cell is `.qr-tab-on` here. What separates them is the chip: cells 1 and 2 carry the SOLID ink chip with the lime check (7064:1751 / 7064:1759) while cell 3's is the plain @.12 one .qr-tab-on already gives. The check is flow-check-white.svg, whose name lies — its path is `M4.16667 10L8.33333 14.1667L16.6667 5.83333` stroked #E2FA5A weight 2, which is Figma's 7064:1754 node exactly, so no new asset was needed. */ .qb .qb-tab-done .qr-tab-chip { background: var(--ink); display: inline-flex; align-items: center; justify-content: center; } .qb .qb-tab-done .qr-tab-chip img { width: 1.25rem; height: 1.25rem; } /* the 20x20 inner frame */ /* ========================================================================== THE BOOKING COLUMN — a 620 column centred in the 1340 pane ========================================================================== 540 + (1340 - 620)/2 = 900, which is Figma's own x on all four items, so none of them declares an x. The vertical rhythm is Figma's too: stepper 40..88 · pill 128..162 · heading 178..322 · card 362..825 · submit 865..925 i.e. gaps of 40 / 16 / 40 / 40. */ /* Frame 7064:1615 @1139,128 143x34 — HUG, padding [6,12,6,12]. A #111 @.08 pill, and Figma wires nothing on it, so it is a

, not a button. */ .qb-dur { width: max-content; margin: 2.5rem auto 0; /* tabs end 88 -> pill 128 */ padding: 0.375rem 0.75rem; /* [6,12,6,12] */ border-radius: var(--radius); background: rgba(17, 17, 17, 0.08); font-family: var(--font-ui); /* Geist-SemiBold */ font-weight: 600; font-size: 1.0625rem; /* 17 */ line-height: 1.38125rem; /* 22.1 */ letter-spacing: -0.01rem; color: var(--ink); white-space: nowrap; } /* TEXT 7064:1614 @984,178 452x144. The 452 is authored (autoresize=HEIGHT) and is what wraps it to three lines; centred inside the 620 column because 984 + 226 = 1210 = the column's own centre. */ .qb-h { width: 28.25rem; /* 452 */ margin: 1rem auto 0; /* pill ends 162 -> heading 178 */ font-family: var(--font-display); /* HostGrotesk-SemiBold */ font-weight: 600; font-size: 2.5rem; /* 40 */ line-height: 3rem; /* 48 */ letter-spacing: -0.08rem; /* -1.28 */ text-align: center; color: var(--ink); /* solid — no gradient here */ } /* Frame 116 @900,362 620x463. The lime DROP_SHADOW (#e2fa5a alpha 1, radius 60, offset 0,4) is the only shadow on the screen and the only place in the whole build where a shadow is fully opaque lime — Figma's own value. radius 60 -> blur 60/2.82 is NOT applied here: that conversion is for LAYER_BLUR, whose support is the radius; a DROP_SHADOW's radius maps to the CSS blur directly, as .qr-card and .qc-row already do. */ .qb-card { position: relative; width: 38.75rem; /* 620 */ height: 28.9375rem; /* 463 */ margin: 2.5rem auto 0; /* heading ends 322 -> card 362 */ background: var(--white); border-radius: var(--radius); box-shadow: 0 0.25rem 3.75rem #e2fa5a; /* offset 0,4 · radius 60 */ overflow: hidden; /* clipsContent */ } /* Group 29 @28,23 566x416. image 157 sits at group-rel (0,1) 565x415 and the white patch at group-rel (480,0) 86x68 — so the patch is a SIBLING of the shot, not a child: its y23 is above the shot's own y24. */ .qb-shot { position: absolute; left: 1.75rem; /* 28 */ top: 1.5rem; /* 24 */ width: 35.3125rem; /* 565 */ height: 25.9375rem; /* 415 */ overflow: hidden; display: block; } /* Figma STRETCH fill, imageTransform [[0.42518696,0,0.27610761],[0,0.68044502,0.05851979]] i.e. the visible window is 42.519% x 68.045% of the source at (27.611%, 5.852%). Expressed the way .iexc-shot[data-crop='figma'] does it — the box percentages scale the image and the translate is a percentage of the IMAGE's own box — so the crop rides the fluid scale instead of being pinned: width = 100 / 0.42518696 = 235.1904% height = 100 / 0.68044502 = 146.9628% The source is 2528x1162, so the shown region is ~1075x791 drawn at 565 wide, a 1.9x downscale — close to the ideal 2:1, which is why it stays crisp. */ .qb-shot img { position: absolute; left: 0; top: 0; width: 235.1904%; height: 146.9628%; max-width: none; transform: translate(-27.61076%, -5.851979%); } /* Rectangle 30 @480,0 86x68 within Group 29 -> card-relative 508,23 */ .qb-shot-patch { position: absolute; left: 31.75rem; /* 508 */ top: 1.4375rem; /* 23 */ width: 5.375rem; /* 86 */ height: 4.25rem; /* 68 */ background: var(--white); } /* Frame 7064:1741 @900,865 620x60, padding [10,10,10,16], gap 10. Its label is a FILL box 544 wide set align=RIGHT, so "Submit" sits hard against the chip rather than at the usual 16 left inset. That is Figma's own and is reproduced verbatim — it is the one CTA in the build that does not left-align its label. */ .qb-submit { position: relative; /* the sheen band's anchor */ display: flex; align-items: center; width: 38.75rem; /* 620 */ height: 3.75rem; /* 60 */ margin: 2.5rem auto 0; /* card ends 825 -> submit 865 */ padding: 0.625rem 0.625rem 0.625rem 1rem; /* [10,10,10,16] */ gap: 0.625rem; /* 10 */ border-radius: var(--radius); background: var(--ink); overflow: hidden; /* clipsContent */ } .qb-submit-t { flex: 1 1 auto; min-width: 0; text-align: right; /* Figma's align=RIGHT */ font-family: var(--font-ui); /* Geist-SemiBold */ font-weight: 600; font-size: 1.25rem; /* 20 */ line-height: 1.6rem; /* 25.6 */ letter-spacing: -0.01rem; color: var(--white); } .qb-submit-chip { flex: none; width: 2.5rem; /* 40 */ height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--accent); } .qb-submit-chip img { width: 1.75rem; height: 1.75rem; } /* ========================================================================== INTERACTION LAYER ========================================================================== Figma authors no hover on D18 either, so this is the homepage vocabulary the standing instruction asks for, held to the same four invariants: the resting render is untouched, no hover changes the box model, nothing inert gets a button hover, and there is a reduced-motion block. Inert by design and therefore deliberately bare: the "1 hour duration" pill, the three stepper cells and the booking card. */ .qb-submit, .qb-back, .qb-inc { transition: background var(--dur-hover) var(--ease-premium), box-shadow var(--dur-hover) var(--ease-premium), transform var(--dur-hover) var(--ease-premium); } .qb-submit-chip, .qb-back-chip { transition: box-shadow var(--dur-hover) var(--ease-premium); } .qb-submit-chip img, .qb-back-chip img, .qb-inc img { transition: transform var(--dur-hover) var(--ease-premium); } /* `transform`, never `translate` — the reveal layer owns `translate` here */ /* THE SPECULAR SWEEP (user, 2026-08-10: "glow guzarne wala ... jo humne homepage pe baki pages pe b use kya hai"). Not a halo — the band of light that crosses the pill, i.e. base.css's `.btn::before` verbatim, which is also how home-sections.css's `.psh-btn` carries it. Same band (46% wide, a 0.38 white core in a 5-stop gradient, skewed -18deg), the same shared `@keyframes btn-sheen` from base.css, and the same --dur-sheen / --ease-sheen tokens; if that band is ever retuned, all three copies move together. `z-index: -1` is what keeps the light UNDER the label, and it works here for the same reason it works on `.btn`: `:hover` applies a `transform`, which makes the button a stacking context, so a negative-z child paints above the button's own #111 background and below its in-flow content. Without the transform the band would fall behind the solid background and never be seen. */ .qb-submit::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -55%; width: 46%; opacity: 0; pointer-events: none; background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.38) 50%, rgba(255, 255, 255, 0.1) 70%, rgba(255, 255, 255, 0) 100% ); transform: skewX(-18deg); } .qb-submit:hover::before { animation: btn-sheen var(--dur-sheen) var(--ease-sheen) 80ms; } .qb-submit:hover { background: #212121; transform: translateY(-0.125rem); box-shadow: 0 0.875rem 1.875rem -0.875rem rgba(17, 17, 17, 0.7), inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.08); } .qb-submit:hover .qb-submit-chip { box-shadow: 0 0 0 0.1875rem rgba(226, 250, 90, 0.3); } .qb-submit:hover .qb-submit-chip img { transform: translateX(0.1875rem); } .qb-submit:active { transform: translateY(0); transition-duration: var(--dur-press); } /* the back link leads the way it travels, i.e. LEFT — and its arrow is already flipped, so the nudge has to restate the flip */ .qb-back:hover .qb-back-chip { background: rgba(17, 17, 17, 0.08); box-shadow: inset 0 0 0 0.125rem rgba(17, 17, 17, 0.08); } .qb-back:hover .qb-back-chip img { transform: scaleX(-1) translateX(0.1875rem); } .qb-inc:hover { background: rgba(17, 17, 17, 0.12); } .qb-inc:hover img { transform: translateX(0.125rem); } .qb-submit:focus-visible, .qb-back:focus-visible, .qb-inc:focus-visible { outline: 0.125rem solid var(--ink); outline-offset: 0.1875rem; } @media (prefers-reduced-motion: reduce) { .qb-submit, .qb-back, .qb-inc { transition-duration: 1ms; } .qb-submit:hover { transform: none; } .qb-submit:hover .qb-submit-chip img { transform: none; } /* the sweep is movement, so it goes — the colour and depth feedback stay */ .qb-submit:hover::before { animation: none; } .qb-back:hover .qb-back-chip img { transform: scaleX(-1); } .qb-inc:hover img { transform: none; } } /* `.qb-m-only` is hidden out here and `.qb-d-only` inside the media block — the same one-direction-each pair the other sheets use. This beats quote-results.css's own `.qr-restart { display: flex }` on load order, not specificity: this sheet is linked after it. */ .qb-m-only { display: none; } /* ========================================================================== 428 — FRAME 7064:3555 (M13), 428x3956 ========================================================================== Spec: design-reference/wizard/spec/mobile/M13-quote-submit.md. One max-width block at the end of the file, so the closed 1920 render is untouched by construction. NOTE THE LAYER NAME: Figma calls this frame "Quote customize". It is a duplicate of M12 edited into the submit screen and never renamed — and that same duplication is why its STEPPER still draws stage 2 (see below). NO ROOT SCALE — base.css's sub-768 root is calc(100vw / 26.75), so 1rem == 1 Figma mobile px at 428 and every number below is Figma's own. ---- ALMOST ALL OF IT IS ALREADY BUILT ----------------------------------- This page links quote-results.css first, and that sheet's 428 block is written against the very same nodes: the logo (20,40), the restart pill (247,46) 161x48, three 40x28 stepper pills at 20/194/368 y132 with their two connectors, the FAQ heading (44,1478) / sub (20,1598) / list (20,1766) 388x860 and the footer (20,2646) 388x1290 are byte-identical to M10's and land by themselves, because every one of those blocks is in flow. Better still, the rail's rule, Trustpilot mark, help line and FAB are `.qr-` classes here with NO override, so quote-results.css already hides all four — M13 has no node for any of them and this file needs no rule. The vertical rhythm is Figma's and nothing here declares an x: the package card runs 180..744, then gaps of 40 / 52 / 20 / 40 put the duration pill on 784, the booking card on 870, Submit on 1378 and the FAQ on 1478. Footer 2646 + 1290 + the shell's own 20 gutter = 3956, the frame exactly — and unlike the customize screen there is no fixed bar, so nothing is added. ---- WHAT M13 ACTUALLY CHANGES ------------------------------------------- 1. The package card leaves the rail and becomes the header's flow child. It keeps all five of its Figma y offsets and its 564 height; only widths move (356 -> 388, and the "to be finalised" panel 316 -> 348). 2. `TEXT 7064:1614`, the 452x144 "Book in a call..." heading, has NO node on this frame. KNOWN COST: it is this page's only h1, so at 428 the document has none — flagged rather than papered over, because inventing a visually-hidden heading would be authoring. 3. `Rectangle 30`, the white 86x68 patch over the screenshot, is gone too: M13's `Frame 116` holds `image 157` directly, with no `Group 29` wrapper. 4. The Submit label is CENTRED here. On 1920 it is a FILL 544 box set align=RIGHT — the one CTA in the build that does not left-align — and the 428 frame authors it 312 wide and centred instead. 5. "Back to customize" becomes "Restart quote", pointing at step 1. ========================================================================== */ @media (max-width: 767.98px) { .qb-d-only { display: none; } .qr-restart.qb-m-only { display: flex; } /* ---- the stepper — stage 3 -------------------------------------------- Figma draws 7064:3567 / :3571 / :3572 identically to M12's cells: cell 1 done, cell 2 ringed, cell 3 plain — i.e. STAGE 2, on the submit screen, because this frame is a duplicate of the customize one. That is the same lie the wizard's own nine frames tell, and the standing decision on this project is that the stepper advances, so it is painted as stage 3: cells 1 AND 2 done, cell 3 the current ring. D18's 1920 render already says exactly that, so the two breakpoints agree. Both overrides are needed because quote-results.css's 428 block assumes D10's shape — it paints every `.qr-tab-on` solid ink, and all THREE cells carry that class on D18, and it hangs the ring on `:nth-child(2)`. */ .qb .qb-tab-done { background: var(--ink); box-shadow: none; /* kills the inherited cell-2 ring */ } .qb .qb-tab-done .qr-tab-chip img { width: 1.5rem; height: 1.5rem; } /* the 24x24 glyph frame @8,2 */ .qb .qr-tab:last-child { background: var(--qr-chip, #f5f6f0); box-shadow: inset 0 0 0 0.0625rem var(--ink); /* weight 1 INSIDE */ } .qb .qr-tab:last-child .qr-tab-chip { background: none; } /* both runs are complete at stage 3, so the second connector is ink too — Figma leaves it @.08, again from the duplicated frame */ .qb .qr-tab:not(:last-child)::after { background: var(--ink); } /* ---- Frame 1707481526 @20,180 388x564 — the package card -------------- `relative`, NOT `static`: every child of this card is absolutely positioned, so a static card hands them `.qr-side` instead and the roof map lands over the logo and the stepper. `top`/`left` have to be cleared with it — the 1920 rule puts the card at (0,128) and `relative` would re-read both as offsets. */ .qb-pkg { position: relative; top: auto; left: auto; margin: 0 1.25rem; /* the 20 gutter -> 388 */ width: auto; /* undoes the 1920 356 */ } /* every y inside the card is already Figma's 428 value on the 1920 sheet — 0 / 176 / 276 / 324 / 444 — so only the widths and the map's crop move */ /* `right: 0` is what makes `width: auto` mean "fill" — these two boxes are ABSOLUTE with only `left` set, so an auto width is shrink-to-fit, and since every child of both is absolute too they collapsed to ZERO wide. The map then clipped its image away entirely and the two lime rules vanished, while the price readouts still looked right (they are placed by `left` from a 0-wide box at x0). Any absolute box in this block that should fill needs both edges. */ .qb-map { width: auto; right: 0; } .qb-map img { left: -21.9375rem; } /* -351, not -367 */ .qb-tbf { width: 21.75rem; } /* 348, not 316 */ .qb-price { width: auto; right: 0; } /* 388 */ .qb-price-rule-h { width: auto; right: 0; } .qb-price-rule-v { left: 12.125rem; } /* 194 = 388/2 */ /* both readouts stay centred in their own half of the 388: (194-104)/2 = 45 · (194-92)/2 = 51 · 194+(194-119)/2 = 232 · +(194-83)/2 = 250 */ .qb-cap-1 { left: 2.8125rem; } /* 45 */ .qb-price-val { left: 3.1875rem; } /* 51 */ .qb-cap-2 { left: 14.5rem; } /* 232 */ .qb-price-mo { left: 15.625rem; } /* 250 */ /* ---- the main column -------------------------------------------------- `.qr-side` is 180 + the 564 card = 744, and the duration pill is at 784. */ .qr-main { padding-top: 2.5rem; } /* 40, not M10's 32 */ .qb-dur { margin: 0 auto; } /* 143x34, centred: (428-143)/2 */ .qb-h { display: none; } /* no node — see the header note */ /* Frame 116 @20,870 388x488 — the same white r12 and the same fully-opaque lime DROP_SHADOW; only the box moves. */ .qb-card { width: auto; height: 30.5rem; /* 488 */ margin: 3.25rem 1.25rem 0; /* 870 - 818 = 52 */ } /* `image 157` @14,15 610x449 sits DIRECTLY in the card here, with no Group 29 and no white patch, and it overflows the 388 card on purpose (14 + 610 = 624) — the card's own clip is what frames it. Its Figma STRETCH transform is byte-identical to the 1920 one, so the three crop percentages on `.qb-shot img` carry over untouched. */ .qb-shot { left: 0.875rem; /* 14 */ top: 0.9375rem; /* 15 */ width: 38.125rem; /* 610 */ height: 28.0625rem; /* 449 */ } .qb-shot-patch { display: none; } /* no node on M13 */ /* Frame 7064:3793 @20,1378 388x60 — 16 + 312 + 10 + 40 + 10 = 388 */ .qb-submit { width: auto; margin: 1.25rem 1.25rem 0; /* 1378 - 1358 = 20 */ } .qb-submit-t { text-align: center; } /* the 1920 frame's is RIGHT */ }