/* ============================================================================= Ring builder — RING SIZE step — DESKTOP Figma file Ex10uQ9OY3OuzSPi4g2hPb, SECTION 14465:38712 (named "[Mobile UI] PDP ring builder refresh" -- mislabelled, it holds the 1728px DESKTOP frames). Frame implemented here: SIZE 14465:40465 1728 x 1080 figma-desktop/SPEC.md L4781-5359 Only the RIGHT controls column (`Customization` 14465:40466, 752 wide at x=894, y=194) belongs to this screen. The header band, the step tab bar, the left preview column and the footer are shared chrome, identical on every frame, and are already drawn by redesign/_stone-desktop.css -- nothing below touches them. Everything here is scoped to `#ssq_size`. RESPONSIVE MODEL — MATCHES _stone-desktop.css --------------------------------------------- LAYOUT.md §9 is explicit that behaviour above and below 1728 is an implementer decision. _stone-desktop.css took the layout FLUID: the 80px page gutter is fixed, the 6/6 split holds its proportions all the way down to 992px where the mobile sheet takes over, and type sizes stay fixed because the design gives one ramp. This file agrees with that so the two screens share one column grid: it never sets a column width. It inherits the 752px track from `#simple-select-quiz > .container > .row` and expresses everything inside it as either a percentage of that track or a fixed value the design gives as fixed. TYPE IS NOT SHARED WITH MOBILE. Every size differs: section heading 18 -> 24, body 14 -> 18, wheel centre 28 -> 32, wheel neighbours 14 -> 18, wheel outers 12 -> 16. All of it is local to this file. THE WHEEL IS THE SAME CONTROL, WITH DIFFERENT NUMBERS ---------------------------------------------------- Designer note 14463:36448 (mobile board, and the desktop frame draws the identical control): wheel scroll, snap to nearest on release, selected value = whatever lands in the centre band. Reference given: https://react-wheel-picker.chanhdai.com/ 14465:40473 `Sizes` is AL:VERTICAL gap=20 over five 19px TEXT boxes with a 0-height VECTOR between each pair, so EVERY desktop row -- the centred one included -- has the same pitch: 19 + 20 + 20 = 59 5 x 19 + 8 x 20 = 255 = the `Sizes` frame's own height and the four hairlines land exactly on the row boundaries: 14465:40475 y 311 -> 59 from the first row's top stroke op 0.60 14465:40477 y 370 -> 118 stroke op 1.00 14465:40479 y 429 -> 177 stroke op 1.00 14465:40481 y 488 -> 236 stroke op 0.60 370..429 bounds the centre row -- that IS the selection band, and it is drawn once as fixed chrome on `.rb_size_band`. The 0.60 pair are per-row separators that scroll. At rest they coincide and the frame is reproduced exactly. Unlike mobile, the desktop stroke IS layout-consuming: `Sizes` is 750 wide at x=895 inside a 752-wide box at x=894, and 1 + 30 + 255 + 30 + 1 = 317 = the wheel's height. So the wheel takes a real 1px border here, where the mobile sheet has to use an inset shadow. Runway = (317 - 2 - 59) / 2 = 128, which puts the first option's centre on the viewport centre at scrollTop 0 and the last option's at max scrollTop exactly. At rest (third option centred, scrollTop 118) the first row renders 11px below the wheel's top edge -- 241 + 1 + 10 = 252, the design's value. EVERY NUMBER IS A FIGMA REST API VALUE, node ids cited inline. Where the design has no value for something the markup contains, that is said in a comment rather than invented. ============================================================================= */ @media (min-width: 992px) { /* =========================================================================== 0. TOKENS ../simple-select-redesign.css declares the shared --rb-* properties inside its own `@media (max-width: 991px)` block, so they do not exist above 991. redesign/_stone-desktop.css re-declares them for desktop; the colour values below are byte-identical re-declarations of that same set, repeated here only so this partial is correct on its own if the enqueue order ever changes. No hue is being altered. ------------------------------------------------------------------------ */ body.ringbuilder-product #simple-select-quiz, #simple-select-quiz { --rb-text-primary: #0F0E0D; --rb-text-secondary: #3E3C39; --rb-border-subtle: #E4DED8; --rb-surface-page: #FAF3ED; --rb-font-body: 'FoundersGrotesk', sans-serif; --rb-font-display: 'Canela', serif; --rb-ls-tight: -0.21px; /* the -0.20999999344348907px the API returns */ --rb-radius-sm: 4px; --rb-stroke: 1px; } /* Local to the SIZE screen. */ #simple-select-quiz #ssq_size { /* 14465:40472 — the same three stops as mobile on the same vertical axis: gradientHandlePositions (0.5, -0.13125) -> (0.5, 1.175) gradientStops 0.0 / 0.520 / 1.0 The axis spans 130.625% of the height from -13.125%, so the middle stop lands at -13.125 + (0.5195837616920471 * 130.625) = 54.7456%. */ --rb-size-wheel-gradient: linear-gradient( 180deg, #E4DED8 -13.125%, #FFFAF5 54.7456%, #E4DED8 117.5% ); --rb-size-wheel-h: 317px; /* 14465:40472, border-box (1 + 315 + 1) */ --rb-size-row-h: 59px; /* 19 text + 2 x 20 gap, uniform on desktop */ --rb-size-runway: 128px; /* (317 - 2 - 59) / 2 */ --rb-size-bar-h: 67px; /* 14465:40483 (12 + 43 + 12) */ /* 14465:40475 is a 690-wide vector at x=925 inside `Sizes` at x=895: 925 - 895 = 30 from the wheel's CONTENT box (31 from its border box), and 750 - 60 = 690 wide. */ --rb-size-rule-inset: 30px; } /* =========================================================================== 1. THE COLUMN `Customization` 14465:40466 is the right track of the 6/6 grid, already sized by _stone-desktop.css. AL:VERTICAL gap=24, two blocks: 14465:40467 heading 752 x 23 at y 194 14465:40471 wheel+bar 752 x 384 at y 241 23 + 24 + 384 = 431 = the column's own height. The slide carries `.text-center` from the markup; the design is left-set. ------------------------------------------------------------------------ */ #simple-select-quiz #ssq_size, #simple-select-quiz #ssq_size .simple-select-slide-content { width: 100%; max-width: none; margin: 0; text-align: left; } /* The step message is already parked to a zero box for every step by _stone-desktop.css (`visibility:hidden; height:0`), so the heading below is the column's first painted thing and lands on y=194. Nothing to add. */ /* =========================================================================== 2. THE BLOCK AND ITS TITLE 14465:40469 is a 23-tall SPACE_BETWEEN row with cross=MAX, holding one child: 14465:40470 "RING SIZE", Canela 300 24/19 ls -0.21 #0F0E0D, drawn at y=198 in a row starting at y=194 -- i.e. the 19px line box is bottom-set in the 23px row, 4px of lead above it. `case=TITLE` here where the mobile frame has `case=UPPER`; the source string is already "RING SIZE" either way, so no text-transform is applied. Same DOM situation as mobile: there is no heading element. `p.sss-size-label` is `display:none` from simple-select.css:778 -- NOT hidden by this file, and left live so simple-select.js:2168's `$('.sss-size-label span').text(...)` keeps writing into a real node. FOLLOW-UP: a real

is the accessible fix. THE TITLE MUST NOT LIVE INSIDE .sss_swatches_size_container. simple-select-redesign.js:137 centres an option with el.offsetTop - wheel.clientHeight / 2 + el.offsetHeight / 2 which is only correct while `offsetTop` is measured from the top of the wheel's scroll content. The container is the options' offsetParent (§3 explains why the wheel itself cannot be), so the container's top edge and the wheel's top edge have to coincide. The title is therefore drawn on .simple-select-slide-content, one level up -- which is also exactly how the Figma tree is built: 14465:40466 `Customization` = heading 14465:40467 plus wheel-and-bar 14465:40471, 23 + 24 + 384 = 431. ------------------------------------------------------------------------ */ #simple-select-quiz #ssq_size .sss_swatches_size_container { position: relative; /* containing block for the bar and the chip */ margin: 0; padding: 0 0 var(--rb-size-bar-h); } #simple-select-quiz #ssq_size .simple-select-slide-content::before { content: "RING SIZE"; display: block; box-sizing: border-box; height: 23px; padding-top: 4px; /* 198 - 194, cross=MAX */ margin-bottom: 24px; /* 14465:40466 itemSpacing */ font-family: var(--rb-font-display); font-weight: 300; font-size: 24px; line-height: 19px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-primary); } /* =========================================================================== 3. THE WHEEL VIEWPORT — 14465:40472 752 x 317, vertical shimmer, 1px INSIDE stroke #E4DED8, cornerRadii [4,4,0,0], clipsContent. The stroke consumes layout here (see the header), so it is a real border and the box is border-box 317. No padding on the scroller -- the runway lives on .rb_size_track (§5). Padding here would shrink the wheel's content box to 59px and clamp `.rb_size_band`, whose sticky range is bounded by its containing block. ------------------------------------------------------------------------ */ #simple-select-quiz #ssq_size .rb_size_wheel { /* DELIBERATELY NOT `position: relative`, and this is load-bearing twice over: * the NOT SURE chip (§7) is a DOM descendant of this scroller but is laid out against .sss_swatches_size_container, an ANCESTOR of it -- that is the only reason the wheel's `overflow` does not clip it. A position here would make the wheel the chip's containing block and the chip would scroll with the track and be clipped away; * with the wheel static, the options' offsetParent is the container, whose top edge coincides with the wheel's (§2), so simple-select-redesign.js:137's `el.offsetTop` still measures from the top of the scroll content. It over-reads by exactly the wheel's 1px top border here; scroll-snap absorbs that on the same frame. */ box-sizing: border-box; width: 100%; height: var(--rb-size-wheel-h); border: var(--rb-stroke) solid var(--rb-border-subtle); border-radius: var(--rb-radius-sm) var(--rb-radius-sm) 0 0; background: var(--rb-size-wheel-gradient); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; /* proximity, not mandatory -- mandatory re-snaps on every frame of a momentum scroll, which is the stutter. Same change as the mobile sheet, which was made first and left this one behind. */ scroll-snap-type: y proximity; touch-action: pan-y; will-change: scroll-position; scrollbar-width: none; /* a wheel picker shows no scrollbar */ -ms-overflow-style: none; cursor: ns-resize; outline: none; } #simple-select-quiz #ssq_size .rb_size_wheel::-webkit-scrollbar { display: none; /* a pseudo-element, not a DOM node */ } /* =========================================================================== 4. THE CENTRE SELECTION BAND — 14465:40477 + 14465:40479 Two 690-wide hairlines at full opacity, y 370 and y 429 -> 128 and 187 from the wheel's padding box, i.e. a 59px band that is exactly the centred row. Sticky-pinned to the scrollport; its static position is the top of the wheel's content box, so `top` equals the track's runway and the pin never has to move it. margin-bottom cancels its own height so the track still starts at the content-box top; pointer-events off so taps reach the rows. ------------------------------------------------------------------------ */ #simple-select-quiz #ssq_size .rb_size_band { position: sticky; top: var(--rb-size-runway); z-index: 2; box-sizing: border-box; height: var(--rb-size-row-h); margin: 0 var(--rb-size-rule-inset) calc(-1 * var(--rb-size-row-h)); /* NO BORDERS. These were the last two static hairlines in the wheel -- they sat at a fixed y while every row separator scrolled past them, so they read as redundant duplicates of whichever rules happened to be alongside. Removed on request. The centre is marked by the centred row itself: it is larger, full-opacity and full-colour, which the ramp makes unambiguous. The band still exists and still does its job -- it is the sticky element `centredOption()` measures against and the runway is sized from. */ border-top: 0; border-bottom: 0; background: transparent; pointer-events: none; } /* =========================================================================== 5. THE TRACK The runway that lets the FIRST and LAST option reach the band -- scroll-snap cannot scroll past the content box, so without it the ends are unreachable. 128 = (315 - 59) / 2. ------------------------------------------------------------------------ */ #simple-select-quiz #ssq_size .rb_size_track { padding: var(--rb-size-runway) 0; } /* Undo simple-select.css:753 / :788's grid and its 20px block margin. This is a JS read target (`$('.sss_swatches_size').html(...)`, :2149) -- it is re-laid-out, never hidden. */ #simple-select-quiz #ssq_size .sss_swatches_size { display: block; grid-template-columns: none; gap: 0; margin: 0; padding: 0; } /* =========================================================================== 6. A WHEEL ROW 14465:40474 "6.0" Founders Grotesk 400 16/19 #3E3C39 (centre +/- 2) 14465:40476 "6.25" Founders Grotesk 400 18/19 #3E3C39 (centre +/- 1) 14465:40478 "6.5" Founders Grotesk 400 32/19 #0F0E0D (centre, align CENTER/CENTER; the box stays 19 tall) 14465:40480 "6.75" 18/19 · 14465:40482 "7.0" 16/19 Rows past +/-2 are outside the 317px window and continue at 16px, the outermost size the design draws. Every row is 59 tall, centred one included -- so unlike the mobile sheet nothing reflows as `.is-centred` moves. ------------------------------------------------------------------------ */ #simple-select-quiz #ssq_size .sss_swatches_size { --rb-size-font-out: 16px; /* 14465:40474 / :40482 */ --rb-size-font-near: 18px; /* 14465:40476 / :40480 */ } #simple-select-quiz #ssq_size .ssq_size_option { position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; /* simple-select.css:761 puts a FULL 1px border on every row -- four sides, on a node that scrolls. That is what was still moving with the numbers: the band's own rules were static, but each row carried its own box on top of them. Measured before this: five rules in the wheel, all at identical darkness (delta 17.0 against the ground), so the fade set on the band's pseudo-elements was invisible underneath them. Cleared here so the only hairlines in the wheel are the four fixed ones. */ border: 0; width: auto; height: var(--rb-size-row-h); aspect-ratio: auto; /* undo simple-select.css:767 + :1300 */ margin: 0; padding: 0; border: 0; /* undo simple-select.css:761 */ border-radius: 0; font-family: var(--rb-font-body); font-weight: 400; font-size: 16px; line-height: 19px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-secondary); scroll-snap-align: center; /* `always` stopped the wheel on EVERY row, so a mouse or trackpad flick advanced one notch and fought its own momentum. */ scroll-snap-stop: normal; cursor: pointer; transition: font-size 120ms linear, color 120ms linear; } /* The row separator, on the row's own bottom edge: at rest exactly 14465:40475 / :40477 / :40479 / :40481. Opacity 0.60 is the two OUTER hairlines' value; the inner pair are at 1.00 and belong to .rb_size_band, which sits over these at rest. */ /* THE HAIRLINES DO NOT SCROLL -- same fix as the mobile sheet, which was applied there first and left this one behind, so the ruler kept sliding on desktop. Drawn on the row's own bottom edge they travel with the numbers; only the numbers should move. The inner pair are already fixed (the sticky band's own borders), so the outer pair now hang off that band, one row above its top and one row below its bottom. Row height here is 59, not the mobile 39. */ /* EXACTLY FOUR RULES AT DESKTOP TOO -- 14465:40475 / :40477 / :40479 / :40481, the outer pair at 0.60 and the inner pair, which bracket the selection, at 1.00. Same reasoning and the same reversal as the mobile sheet (see `_size.css` 5): a per-row separator draws one line per visible row, which is six in this viewport, and it doubles the band's own pair at a couple of px offset. Row height here is 59, not the mobile 39. If the travelling ruler is wanted back, this rule and the `--rb-line-op` normaliser in simple-select-redesign.js are what implement it. */ /* TRAVELLING SEPARATORS -- RESTORED FROM DEV-0 ON REQUEST, the desktop half of the same swap; see the full note in `_size.css` 5. Each row draws its own separator on its bottom edge so the ruler slides with the values, and the band's own borders stay put as the centre marks. Row height here is 59, not the mobile 39. Known cost, as on mobile: six lines in this viewport rather than the board's four, and the row rules land within a couple of px of the band's pair so the brackets read slightly doubled. Deliberate. `--rb-line-op` (simple-select-redesign.js:739) is what keeps the two bracketing lines at matching strength -- they are drawn by different rows, which sit at different points in the fade. */ #simple-select-quiz #ssq_size .ssq_size_option::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--rb-stroke); background: var(--rb-border-subtle); opacity: var(--rb-line-op, 0.6); pointer-events: none; } /* The inner pair: the sticky band's own borders, outside the scroller's opacity fade so they can actually reach 1.00. */ /* NO BORDERS -- dev-0's exact reconstruction. Owner: *"I said exact reconstruction from dev-0 for the ring size scroller. Why do the middle top and bottom bars stay in place?"* These were the last two STATIC hairlines in the wheel. They sat at a fixed y while every row separator scrolled past them, so they read as redundant duplicates of whichever moving rule happened to be alongside -- and at rest they coincided exactly, which is where the doubled-hairline look came from. dev-0 carries no border on this element at all; the travelling separators are the ONLY lines it draws. The centre is marked by the centred row itself: larger, full opacity and full colour, which the type ramp makes unambiguous. The band still exists and still does its job -- it is the sticky element `centredOption()` measures against, and the runway is sized from it. */ #simple-select-quiz #ssq_size .rb_size_band { border-top: 0; border-bottom: 0; } /* The static outer pair is retired with the change above -- with every row drawing its own separator these two would be a fifth and sixth FIXED line among moving ones. Restore this block (and set the rule above back to `content: none`) to go back to the four-fixed-rules reading of the board. */ #simple-select-quiz #ssq_size .rb_size_band::before, #simple-select-quiz #ssq_size .rb_size_band::after { content: none; } #simple-select-quiz #ssq_size .rb_size_band::before { top: calc(-1 * var(--rb-size-row-h)); } #simple-select-quiz #ssq_size .rb_size_band::after { bottom: calc(-1 * var(--rb-size-row-h)); } /* The centred row — 14465:40478. */ #simple-select-quiz #ssq_size .ssq_size_option.is-centred:not([value="not-sure"]) { font-size: 32px; color: var(--rb-text-primary); } /* Before the script's first paint no option carries `.is-centred`, but the saved size already carries `.active` and is about to be scrolled to the middle. Ramp it the same way so the first frame is not a flat wheel. */ #simple-select-quiz #ssq_size .sss_swatches_size:not(:has(.is-centred)) .ssq_size_option.active:not([value="not-sure"]) { font-size: 32px; color: var(--rb-text-primary); } /* Centre +/- 1 — 14465:40476 / :40480, 18px. */ #simple-select-quiz #ssq_size .ssq_size_option.is-centred + .ssq_size_option:not([value="not-sure"]), #simple-select-quiz #ssq_size .ssq_size_option:not([value="not-sure"]):has(+ .ssq_size_option.is-centred) { font-size: 18px; } /* =========================================================================== 7. "Don't know your size?" BAR — 14465:40483 752 x 67, fill #FAF3ED, radii [0,0,4,4], pad 12,12,12,12, primary=SPACE_BETWEEN, cross=CENTER, and strokes with per-side weights T/R/B/L = 0/1/1/1 -- there is NO top border, the wheel's bottom edge is the seam. 12 + 43 + 12 = 67, so the strokes consume no layout: they are drawn as three inset shadows rather than borders. 14465:40484 label "Don't know your size?" Founders 400 18/21 #0F0E0D, 21 tall centred in 67 (y 581 = 558 + 23), x 906 = 894 + 12. The label has no element in the DOM, so it is the container's ::after. FOLLOW-UP, as on mobile: this copy wants real markup. ------------------------------------------------------------------------ */ #simple-select-quiz #ssq_size .sss_swatches_size_container::after { content: "Don\2019t know your size?"; position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; box-sizing: border-box; height: var(--rb-size-bar-h); padding: 0 12px; border-radius: 0 0 var(--rb-radius-sm) var(--rb-radius-sm); background: var(--rb-surface-page); box-shadow: inset var(--rb-stroke) 0 0 var(--rb-border-subtle), /* left */ inset calc(-1 * var(--rb-stroke)) 0 0 var(--rb-border-subtle), /* right */ inset 0 calc(-1 * var(--rb-stroke)) 0 var(--rb-border-subtle); /* bottom */ font-family: var(--rb-font-body); font-weight: 400; font-size: 18px; line-height: 21px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-primary); } /* The NOT SURE control — 14465:40485 CTA, HUG/HUG, pad 12 all round, 1px INSIDE stroke #3E3C39, r=4, and a #27423B fill that is [paint-hidden] so it does not render. 14465:40487 "NOT SURE" Founders 400 16/19 #3E3C39, a 69x19 box -> 12 + 69 + 12 = 93 and 12 + 19 + 12 = 43, the CTA's measured size. The width is left to hug the label, as the design does. It is the REAL `.ssq_size_option[value="not-sure"]`: `not-sure` is a genuine pa_size term (the live `select#pa_size`'s last option, label "Not Sure"), so simple-select.js:2157 prints it inside the wheel like any other size and clicking it runs the ordinary size handler. Positioned against .sss_swatches_size_container, an ANCESTOR of the scroller, so the wheel's `overflow` does not clip it (CSS 2.1 §11.1.1) and it does not scroll with the track. right = 1646 (block right) - 1634 (CTA right) = 12 bottom = 625 (bar bottom) - 613 (CTA bottom) = 12 Its rect sits ~200px below the wheel's centre -- more than three row pitches -- so it can never win `centredOption()`, and `scroll-snap-align: none` keeps it out of the snap sequence. FOLLOW-UP (JS): clicking it still runs `centreOn()`, which reads its offsetTop against the container and scrolls the wheel to an unrelated row. The chip should be skipped in that handler. */ #simple-select-quiz #ssq_size .ssq_size_option[value="not-sure"] { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: flex; align-items: center; justify-content: center; width: auto; height: 43px; padding: 12px; border-radius: var(--rb-radius-sm); background: transparent; box-shadow: inset 0 0 0 var(--rb-stroke) var(--rb-text-secondary); font-size: 16px; line-height: 19px; text-transform: uppercase; /* the term prints "Not Sure"; 14465:40487 renders "NOT SURE" */ color: var(--rb-text-secondary); scroll-snap-align: none; } #simple-select-quiz #ssq_size .ssq_size_option[value="not-sure"]::after { content: none; /* no row separator on the chip */ } /* =========================================================================== 8. THE "NOT SURE" STATE MISSING FROM THE DESKTOP SPEC. The desktop board has eight frames (LAYOUT.md §1) and none of them is a not-sure variant, so the three deltas are carried over from the mobile frame 14463:34912 / annotations.md note 14463:36449 and re-expressed in DESKTOP type. Nothing new is invented: 1. the Sizes group drops to opacity 0.4 (14463:34937) 2. the helper copy swaps to the two-line reassurance (14463:34948) 3. the chip inverts to a filled #0F0E0D pill with a #FAF3ED label (14463:34949 / :34951) The copy keeps this screen's own 18/21 type rather than the mobile frame's 14/18: 2 x 21 = 42 fits inside the bar's 67 - 24 = 43 of content height, so no new type value has to be guessed. If the designer draws this frame, the line-height is the one number to re-check. 0.4 goes on the rows and the band, not the scroller, because the chip is a DOM descendant of the scroller and `opacity` -- unlike `overflow` -- applies to out-of-flow descendants. The band is dimmed because in Figma both full-opacity hairlines live INSIDE the dimmed `Sizes` group. ------------------------------------------------------------------------ */ #simple-select-quiz #ssq_size .sss_swatches_size_container:has(.ssq_size_option[value="not-sure"].active) .ssq_size_option:not([value="not-sure"]), #simple-select-quiz #ssq_size .sss_swatches_size_container:has(.ssq_size_option[value="not-sure"].active) .rb_size_band { opacity: 0.4; } #simple-select-quiz #ssq_size .sss_swatches_size_container:has(.ssq_size_option[value="not-sure"].active)::after { /* ONE LINE, AND CLEAR OF THE CHIP. Owner: *"the text beside Not sure, just below [the] slider -- 'Our team will personally help you out' -- when I click Not sure, that should fit in one line with proper gap from the CTA of NOT SURE and no overlaps, with proper padding."* The board's string carries a hard line break and this reproduced it literally, with `\A` plus `white-space: pre-line` -- two 18px lines in a 54px bar, which is what crowded the chip sitting in the same bar. The break is dropped: the copy is one sentence and the bar is wide enough for it once it is allowed to be. The bar is `display: flex` with the chip as its other occupant, so the gap is a real `padding-right` on the generated box rather than a guess -- it reserves the chip's own width plus air, and `white-space: nowrap` with `text-overflow` keeps the promise honest at any width instead of silently wrapping back to two lines on a narrow phone. */ content: "Our team will personally reach out to help you find the perfect fit."; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 132px; /* the Not-sure chip lives in this bar */ } #simple-select-quiz #ssq_size .ssq_size_option[value="not-sure"].active { background: var(--rb-text-primary); box-shadow: inset 0 0 0 var(--rb-stroke) var(--rb-text-primary); color: var(--rb-surface-page); } /* =========================================================================== 8b. THE FOOTER'S LINK SLOT — 14465:40512 / 14465:40513 / 14465:40514 `Frame 1171276718` is 513 x 48 at x 1135, AL:HORIZONTAL gap 36, and holds two things: this slot and the `Primary CTA` (14465:40515, 282 x 48 at x 1366). On SIZE the slot reads exactly `We offer free resizing for life!` — Founders Grotesk 400, 18px / 21, ls -0.21, `#3E3C39` at paint opacity 0.8999999761581421, box 195 x 21 at (1135, 1004). MASTER 341. WHICH NODE. The string is NOT on `p.setting_total`: that paragraph is the price stack at x 80 (`Current Est.` over `$1,660`, 14465:40510/40511) and _stone-desktop.css §6 already draws it — its `Your Setting` wording is the copy divergence recorded there, not something this slot fixes. The slot's node is `p.rb_nav_note` (simple-select-quiz.php:544), which simple-select-redesign.js:1249 fills per step. It was simply never styled above 991, so it fell to the front of the footer row at x 80 in inherited 16/17.6 body type. PLACEMENT. `.sss-nav` is the 1568-wide flex row with `gap: 36`, so the slot does not need a coordinate: `order: 3` ties it to `.sss-next` (also 3), DOM order puts it first of the two, and `p.setting_total`'s `margin-right:auto` pushes the pair to the right edge. 1648 - 282 (CTA) - 36 (gap) = 1330 for the slot's right edge, and the string measures 195, so it starts on 1135 — the design's x, derived rather than typed. ------------------------------------------------------------------------ */ #simple-select-quiz .ssq_bottom_nav p.rb_nav_note { order: 3; margin: 0; font-family: var(--rb-font-body); font-weight: 400; font-size: 18px; line-height: 21px; letter-spacing: var(--rb-ls-tight); /* align=CENTER/TOP on a HUG text box — the box is the string, so this only matters if the row ever wraps. */ text-align: center; color: var(--rb-text-secondary); /* the fill's own paint opacity, kept as opacity so the recorded 0.9 stays legible instead of being pre-multiplied into a new hex. */ opacity: 0.8999999761581421; white-space: nowrap; } /* STONE and ENGRAVING. simple-select-redesign.js leaves the node EMPTY on both (MASTER 381: the engraving slot renders nothing; on STONE the link is supplied by `.ssq_all_stone_confirmations`, pinned into this same band by _stone-desktop.css §5, and filling this slot as well would draw it twice). An empty flex item still spends its 36px share of the row's gap, so it is taken out of the line rather than left at zero width. Nothing reads it: rbApplyNavNote() looks the node up by class, which display:none does not affect. */ #simple-select-quiz .ssq_bottom_nav p.rb_nav_note:empty { display: none; } /* =========================================================================== 9. FOLLOW-UPS AND VALUES THE SPEC DOES NOT CARRY --------------------------------------------------------------------------- a) NO NOT-SURE FRAME ON THE DESKTOP BOARD — see §8. b) TWO CSS-GENERATED STRINGS. The "RING SIZE" title (§2) and the bar copy (§7 / §8) have no elements in the DOM and are drawn with `content`. Real markup would make them accessible. Both are markup changes. c) NOT-SURE CENTRING (JS). See §7. c2) THE SCROLL GESTURE IS NOT WIRED UP YET (JS). simple-select-redesign.js :148 binds the wheel's scroll by delegation from `document`, and `scroll` does not bubble from an element -- verified on this markup: a document-level listener saw 0 of the 2 scroll events the wheel fired. The CSS side of the wheel is complete; the fix is to bind directly on `.rb_size_wheel` after the options are injected. Same note as the mobile partial's §9(b2). d) NO HOVER / PRESSED / FOCUS STATES are drawn for the wheel, the bar or the NOT SURE control on any desktop frame. Only `cursor` is set. The wheel keeps `tabindex=0` from the markup, so `outline:none` leaves keyboard focus invisible -- FOLLOW-UP: ask the designer for a focus state. e) THE FOOTER CTA on 14465:40465 is the shared 1568-wide `CTAs` band (LAYOUT.md §4), byte-identical across frames and already drawn by redesign/_stone-desktop.css. The per-step CTA LABEL ("CONTINUE TO ENGRAVING") is copy that simple-select.js writes, not CSS. f) NO TABLET FRAME EXISTS. Behaviour between 992 and 1728 is the fluid model described in the header, chosen to agree with _stone-desktop.css. ========================================================================= */ }