/* ============================================================================= Ring builder — RING SIZE step — MOBILE Figma file Ex10uQ9OY3OuzSPi4g2hPb, section 14463:32244 "[Mobile UI] PDP ring builder refresh". Frames implemented here: 14463:34507 1.2 Ring Size (390 x 848) SPEC.md L8510-9190 14463:34713 2.3 ring size (390 x 848) SPEC.md L9191-9854 14463:34912 1.2 Ring size - not sure (390 x 848) SPEC.md L9855-10535 34713's `ring size` block (14463:34724..34745) is byte-identical to 34507's (14463:34525..34546) -- the two frames differ only in the SHARED setting hero above them (two pills vs one), which is owned by redesign/_stone.css. So this file draws one block that serves both, and 34912 is a state on top of it. ALL SPEC y VALUES ARE FRAME-RELATIVE AND INCLUDE THE 46px iPhone STATUS-BAR MOCKUP. Real page y = SPEC y - 46. Only deltas are used below, so the offset cancels everywhere except the one margin that hangs this block off the hero. THE CENTRAL REQUIREMENT — THIS IS A SCROLLING WHEEL PICKER --------------------------------------------------------- Designer note 14463:36450 "Wheel picker" + 14463:36460, verbatim: Selection scrolls vertically via: Touch: drag / swipe (mobile) Trackpad: two-finger scroll Mouse: wheel scroll Snaps to nearest value on release Selected value = whatever lands in the center selection band. Example: https://react-wheel-picker.chanhdai.com/ The markup (simple-select-quiz.php) and the behaviour (simple-select-redesign.js) already exist: .sss_swatches_size_container p.sss-size-label "Size: N" .rb_size_wheel[role=listbox] the scroll viewport <- sized here .rb_size_band the centre band <- drawn here .rb_size_track .sss_swatches_size <- simple-select.js:2157 fills this .ssq_size_option ... simple-select-redesign.js:126 marks the option nearest the viewport centre with `.is-centred` on every scroll frame, and :148 commits it by triggering that option's own click once movement stops. This file supplies the motion (overflow + scroll-snap), the runway, the band and the type ramp. WHY THE GEOMETRY IS THE WAY IT IS --------------------------------- 14463:34532 `Sizes` is AL:VERTICAL gap=10 over five TEXT boxes with a 0-height VECTOR between each pair, so a row's pitch is (text box + 10 + 10): normal row 19 + 20 = 39 (14463:34533/34535/34539/34541) centre row 24 + 20 = 44 (14463:34537, a FIXED 34x24 box) 39 + 39 + 44 + 39 + 39 = 200 = the wheel's own height (14463:34531) and the four hairlines land exactly on the row boundaries: 14463:34534 y 478 -> 39 from the wheel top stroke op 0.60 14463:34536 y 517 -> 78 stroke op 1.00 14463:34538 y 561 -> 122 stroke op 1.00 14463:34540 y 600 -> 161 stroke op 0.60 78 and 122 bound the centre row -- that IS the selection band. So the two full-opacity hairlines are drawn once, as fixed chrome, on `.rb_size_band`, and the 0.60 ones are per-row separators that scroll with the wheel. At rest they coincide and the frame is reproduced exactly. The 44px centre row is load-bearing, not decoration. With a 78px runway at each end (= (200 - 44) / 2): first option centred -> scrollTop 0 (78 + 22 = 100 = centre) last option centred -> scrollTop = scrollHeight - 200, exactly so both ends of the list can reach the band with no rounding slack. EVERY NUMBER BELOW IS A FIGMA REST API VALUE, node ids cited inline. Letter-spacing really is -0.20999999344348907px; it is already tokenised as --rb-ls-tight in ../simple-select-redesign.css. NOTHING JS READS IS `display:none`d. The two elements this file could have been tempted to remove are called out at the point of use. ============================================================================= */ @media (max-width: 991px) { /* =========================================================================== 0. LOCAL TOKENS Only what the shared block in ../simple-select-redesign.css does not carry. ------------------------------------------------------------------------ */ #simple-select-quiz #ssq_size { /* The wheel's ground, 14463:34531 / :34730 / :34936. --rb-gradient-shimmer in the shared file is the 90deg HORIZONTAL shimmer the skeleton loaders use. The wheel uses the same three stops on a VERTICAL axis, and that axis over-runs the box at both ends: gradientHandlePositions (0.5, -0.13125) -> (0.5, 1.175) gradientStops 0.0 / 0.5195837616920471 / 1.0 The axis spans 130.625% of the height starting at -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: 200px; /* 14463:34531 */ --rb-size-row-h: 39px; /* 19 text + 2 x 10 gap */ --rb-size-row-h-centred: 44px; /* 24 text + 2 x 10 gap */ --rb-size-runway: 78px; /* (200 - 44) / 2 */ --rb-size-bar-h: 54px; /* 14463:34542 */ /* 14463:34534 is a 283-wide vector at x=53 in a 345-wide block at x=22: 53 - 22 = 31 inset, 345 - 62 = 283 wide. Same for the band. */ --rb-size-rule-inset: 31px; } /* =========================================================================== 1. THE 345px COLUMN 14463:34525 `ring size` is 345 wide at x=22 in a 390 frame. 390 - 345 = 45, split 22 left / 23 right in the source; SPEC.md's board-wide conventions note calls that half-pixel drift rather than intent, so this centres. The slide carries `.text-center` from the markup; the block is left-set. ------------------------------------------------------------------------ */ #simple-select-quiz #ssq_size .simple-select-slide-content { /* was width: 345px -- the design is authored at 390, so a fixed 345 overflowed every narrower phone. min() keeps 345 at 390 and shrinks below. */ width: min(345px, calc(100vw - 44px)); max-width: 100%; margin-left: auto; margin-right: auto; text-align: left; } /* The step message. simple-select.js:1481 writes a paragraph here for the size step; 14463:34507 draws no body copy between the hero and the wheel (the reassurance lives in the bar under the wheel instead). Collapsed to a zero box rather than removed -- the script also calls .show()/.hide() on it, and those set an inline `display` that must keep working. Scoped with :has() so the stone and engraving screens are untouched. */ #simple-select-quiz:has(#ssq_size.active) .quiz_options > .desktop-message.ssq-message { height: 0; margin: 0; overflow: hidden; font-size: 0; line-height: 0; } #simple-select-quiz:has(#ssq_size.active) .quiz_options > .desktop-message.ssq-message p { margin: 0; font-size: inherit; line-height: inherit; } /* =========================================================================== 2. THE BLOCK AND ITS TITLE The Figma tree is 14463:34525 `ring size` (AL:VERTICAL gap=10) 14463:34526 title row 345 x 19 14463:34530 wheel + bar 345 x 254 and the DOM mirrors it exactly: .simple-select-slide-content holds the title, then .sss_swatches_size_container holds the wheel and the bar. 19 + 10 + 254 = 283 = 14463:34525's own height; 200 + 54 = 254 = 14463:34530's. Hero card bottom 381 (SPEC) -> "RING SIZE" top 410 (SPEC) = a 29px gap. 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 -- anything drawn above the wheel inside the container would offset every centring call by its own height. ------------------------------------------------------------------------ */ #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); } /* 14463:34529 "RING SIZE" — Canela 300 18/19 ls -0.21 case=UPPER #0F0E0D. There is no heading element inside this block. `p.sss-size-label` is the only candidate and it is `display:none` in the base sheet (simple-select.css:778) -- NOT hidden by this file; it is left exactly as the base sheet leaves it, so simple-select.js:2168's `$('.sss-size-label span').text(...)` keeps writing into a live node. The title is therefore drawn as the container's ::before. FOLLOW-UP: a real

is the accessible fix; `content` is not reliably exposed to assistive tech. That is a markup change, so not done here. */ #simple-select-quiz #ssq_size .simple-select-slide-content::before { content: "RING SIZE"; display: block; height: 19px; margin-top: 29px; /* hero bottom 381 -> title top 410 */ margin-bottom: 10px; /* 14463:34525 itemSpacing */ font-family: var(--rb-font-display); font-weight: 300; font-size: 18px; line-height: 19px; letter-spacing: var(--rb-ls-tight); text-transform: uppercase; color: var(--rb-text-primary); } /* =========================================================================== 3. THE WHEEL VIEWPORT — 14463:34531 345 x 200, vertical shimmer, 1px INSIDE stroke #E4DED8, rectangleCornerRadii [4,4,0,0], clipsContent. The stroke is an inset shadow, not a border, so it consumes no layout: Figma insets strokes, and this box must still hold exactly 200px of rows (39+39+44+39+39). A real 1px border would leave 198 and the band would stop lining up with the row boundaries. No padding here -- the runway lives on .rb_size_track (see §5). Padding on the scroller would shrink its content box to 44px and trap `.rb_size_band`, whose sticky range is clamped to 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 and its centring arithmetic holds. */ box-sizing: border-box; height: var(--rb-size-wheel-h); border-radius: var(--rb-radius-sm) var(--rb-radius-sm) 0 0; background: var(--rb-size-wheel-gradient); box-shadow: inset 0 0 0 var(--rb-stroke) var(--rb-border-subtle); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; /* `proximity` rather than `mandatory`: mandatory re-snaps on every frame of a momentum scroll, which is the stutter. Proximity lets the fling run and pulls to centre as it dies, and the script's own centreOn() still parks it exactly on release. */ scroll-snap-type: y proximity; scroll-behavior: auto; /* smooth here would fight the fling */ -webkit-overflow-scrolling: touch; /* momentum on iOS */ touch-action: pan-y; /* claim the vertical gesture outright */ will-change: scroll-position; /* keep it on its own layer */ 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 — 14463:34536 + 14463:34538 Two 283-wide hairlines at full opacity, y 517 and y 561 -> 78 and 122 from the wheel's top, i.e. a 44px band that is exactly the centred row's box. `position: sticky` pins it to the scrollport while the track scrolls under it. Its static position is the top of the wheel's content box, so `top` equals the track's runway and the pin is a no-op offset -- it simply never moves. margin-bottom cancels its own height so the track still starts at the content-box top; pointer-events are off so taps reach the options. ------------------------------------------------------------------------ */ #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-centred); margin: 0 var(--rb-size-rule-inset) calc(-1 * var(--rb-size-row-h-centred)); /* 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. Without it scroll-snap cannot scroll past the content box and the ends are unreachable. 78 = (200 - 44) / 2, so the first option's centre sits on the viewport centre at scrollTop 0 and the last one's at max scrollTop. ------------------------------------------------------------------------ */ #simple-select-quiz #ssq_size .rb_size_track { padding: var(--rb-size-runway) 0; } /* Undo simple-select.css:753's 6-up grid and its 40px bottom 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 14463:34533 "6.0" Founders Grotesk 400 12/19 #3E3C39 (centre +/- 2) 14463:34535 "6.25" Founders Grotesk 400 14/19 #3E3C39 (centre +/- 1) 14463:34537 "6.5" Founders Grotesk 400 28/19 #0F0E0D (centre; the box is a FIXED 34x24 with textAlignVertical CENTER, so the 24 is the box, not the source's lineHeightPx of 19) 14463:34539 "6.75" 14/19 · 14463:34541 "7.0" 12/19 Rows past +/-2 are outside the 200px window and continue at 12px, the outermost size the design draws. ------------------------------------------------------------------------ */ #simple-select-quiz #ssq_size .sss_swatches_size { --rb-size-font-out: 12px; /* 14514:41142 / :41150 */ --rb-size-font-near: 14px; /* 14514:41144 / :41148 */ } #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: 12px; line-height: 19px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-secondary); scroll-snap-align: center; /* `always` was forcing the wheel to stop on EVERY row, so a mouse wheel or a trackpad flick moved one notch at a time and fought the momentum. `normal` lets a flick carry and still settles centred, which is what makes it feel like a wheel rather than a ratchet. */ scroll-snap-stop: normal; cursor: pointer; transition: font-size 120ms linear, color 120ms linear; } /* The row separator, drawn on the row's own bottom edge: at rest that is exactly 39 / 78 / 122 / 161 from the wheel top, i.e. 14463:34534, :34536, :34538, :34540. Opacity 0.60 is the two OUTER hairlines' value; the two inner ones are at 1.00 and are drawn by .rb_size_band, which sits over these at rest. */ /* THE HAIRLINES DO NOT SCROLL. They used to be drawn on each row's own bottom edge, so all four travelled with the numbers and the whole ruler slid about while the wheel moved. Only the numbers should move; the rules are chrome. The two INNER rules were already fixed -- they are the sticky band's own top and bottom borders. The two OUTER ones are now drawn off that same sticky band, one row above its top edge and one row below its bottom, which puts them back at the designed 39 and 161 from the wheel top (band top 78, band bottom 122, row height 39). Sticky positioning makes the band a containing block, so both pseudo-elements inherit its immobility for free. Kept at the source's 0.6 (14463:34534 / :34540) against the inner pair's 1.00, so the ruler still fades outward. */ /* EXACTLY FOUR RULES. 14514:41143 / :41145 / :41147 / :41149 -- and there are four of them, at wheel-top +39, +78, +122 and +161, 283 wide at x53. A per-row separator cannot be four: every row draws one, so the count is "however many rows the 200px viewport shows". MEASURED before at 390, wheel top y393: six lines on screen -- 393 row bottom (no board node) 432 row bottom 0.6 = board +39 OK 471 row bottom 0.6 \\ doubled with 471 band border 1.0 / the band's own top rule 512 row bottom 0.6 \\ doubled with, and 2px off, 514 band border 1.0 / the band's own bottom rule 551 row bottom 0.6 ~ board +161 (3px out) 590 row bottom (no board node) -- i.e. the bracket pair drawn twice at slightly different y, which reads as a 2px double hairline, plus two rules the board does not draw. THIS REVERSES the "hairlines travel with the numbers" pass recorded in the comment that was here, which was itself a reversal of a "lines must not move" pass. Flagged rather than done silently: the board draws four fixed rules and a moving column of numbers, which is what an iOS-style picker with a selection band does, and there is no way to keep the separators travelling AND land on four. If the travelling ruler is wanted back it is this rule and the `--rb-line-op` normaliser in simple-select-redesign.js that implement it. All four now hang off `.rb_size_band`, which is a sibling of the scroller and outside its opacity fade, so the inner pair can actually reach 1.00 -- MEASURED at 0.507 / 0.530 effective when the rows drew them. */ /* TRAVELLING SEPARATORS -- RESTORED FROM DEV-0 ON REQUEST. Owner: *"on dev-0 we had the lines moving too for the size scroll one ... I want the exact same stuff on dev-1."* Each row draws its own separator on its bottom edge, so the ruler slides with the values the way a real wheel picker's does. The two rules that stay put are the band's own top and bottom borders, which is what marks the centre -- fixed chrome against moving content, rather than everything being fixed. THIS IS THE THIRD PASS OVER THIS DETAIL and the note is kept so the next one is not made blind. The build before this drew four FIXED rules on the band, matching 14514:41143/:41145/:41147/:41149 literally -- four rules and a moving column of numbers, which is what an iOS picker with a selection band does. That is a closer match to the board, but it is not what was asked for: the board cannot have both, because a per-row separator's count is "however many rows the 200px viewport shows", never four. The known cost, MEASURED at 390 with the wheel top at y393: six lines on screen rather than four, and the row rule at 471 coincides with the band's top border while the one at 512 sits 2px off the band's bottom border -- so the brackets read as a 2px double hairline. That is the dev-0 rendering the owner is asking for, and it is deliberate here, not an oversight. 0.6 is the source's value for a row rule (14463:34534 / :34540). The ramp applied from JS fades the rows themselves outward and the separator rides that fade with its row, so no second opacity ladder is needed -- but it DOES need the `--rb-line-op` normaliser (simple-select-redesign.js:739), which is still live: a separator hangs off its row's BOTTOM edge, so the two rules bracketing the centre are owned by DIFFERENT rows. Measured without it, the line above the centred row came out at 0.456 effective against 0.600 below -- a third darker on one side of the band than the other. The variable carries a value pre-divided by the row's own opacity, so what lands on screen is a function of where the LINE is, not of which row drew it. */ #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 TWO BRACKET RULES ARE THE BAND'S, AND THEY ARE FULL STRENGTH. [Flow 3] 14514:41143 / :41145 / :41147 / :41149 -- four rules, 283 wide at x53, and the board splits them: the OUTER pair (board y 478 / 600) is `#E4DED8 @ 60%` and the INNER pair (517 / 561), the two that bracket the selection, is `#E4DED8` at FULL. ELEMENTS.md 3.4.9-3.4.15; SPEC.md named 561/600 as the pair, which is the wrong two. The rows cannot draw the inner pair, because a line hanging off a row's bottom edge lives inside that row's place in the fade and `opacity` on a child can only ever reduce what the parent already spent. MEASURED with the per-row `--rb-line-op` normaliser doing the work: the two bracket lines came out at 0.507 and 0.530 effective, not 1.00. `.rb_size_band` is a sibling of the scroller, outside the fade, and it MEASURED [53.5,471 283x44] -- exactly the board's pair, 283 wide, at the two bracket y's. So it draws them; and now it draws the OUTER pair too, on its own ::before / ::after, one row height above its top edge and one below its bottom (band top +78, band bottom +122, row 39 -> +39 and +161). Being `position: sticky`, the band is a containing block, so both pseudo-elements inherit its immobility for free. */ /* 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; } /* 3.4.9 / 3.4.15 -- `#E4DED8 @ 60%`, the same 283-wide box, at +39 and +161. Inset to the band's own left/right so all four rules share one x. */ /* 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. The band keeps its own top/bottom BORDERS, which are the centre marks. Restore these (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 — 14463:34537. simple-select-redesign.js:126 puts `.is-centred` on whichever option is nearest the viewport centre. */ #simple-select-quiz #ssq_size .ssq_size_option.is-centred:not([value="not-sure"]) { height: var(--rb-size-row-h-centred); font-size: 28px; line-height: 24px; color: var(--rb-text-primary); } /* Before the script's first paint no option carries `.is-centred`, but simple-select.js has already marked the saved size `.active` and simple-select-redesign.js:167 is about to scroll it to the middle. Ramp it the same way so the first frame is not a wheel of identical 12px rows. */ #simple-select-quiz #ssq_size .sss_swatches_size:not(:has(.is-centred)) .ssq_size_option.active:not([value="not-sure"]) { height: var(--rb-size-row-h-centred); font-size: 28px; line-height: 24px; color: var(--rb-text-primary); } /* Centre +/- 1 — 14463:34535 / :34539 and [Flow 3] 14514:41144 / :41148, 14px. The `.is-centred` pair is set by simple-select-redesign.js:126 on scroll, so at rest the ramp's inline size wins over both of them, so these hold only while the ramp has not run. The 12 / 14 / 28 ladder itself is applied in simple-select-redesign.js's ramp -- see the note there. */ #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: 14px; } /* NOT expressed as an `.active` twin. The ramp in simple-select-redesign.js writes an INLINE font-size on every row, so CSS cannot win here anyway -- and worse, its `_rbBaseFont` probe reads the resting size off the first row that has no inline size yet. MEASURED with an `.active + ` rule in this file: on the first pass `.active` is still WooCommerce's positional "3", so the probe landed on a row this rule had already taken to 14 and every row in the wheel came back 14px. The ladder is set in the ramp instead. */ /* =========================================================================== 7. "Don't know your size?" BAR — 14463:34542 345 x 54, fill #FAF3ED, 1px INSIDE stroke #E4DED8, radii [0,0,4,4], pad 10,12,10,12, primary=SPACE_BETWEEN, counter=CENTER. 14463:34543 label "Don't know your size?" Founders 400 14/21 #0F0E0D, 21 tall centred in 54 -> y 655.5 = 639 + 16.5. The label has no element in the DOM, so it is the container's ::after. Same FOLLOW-UP as the title in §2: this copy wants real markup. The stroke is again an inset shadow so 10 + 32 + 10 stays inside 54. ------------------------------------------------------------------------ */ #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); /* THE LABEL STOPS WHERE THE CHIP STARTS. Owner: *"the line is too big, it goes behind the Not Sure button -- containerise it so the text can't cross Not Sure, like 75 text / 25 for the CTA."* The bar spans the block edge to edge and NOT SURE is laid over its right end, so a label long enough to reach the chip ran underneath it. The right padding is the chip's own box plus the gutters either side of it -- 12 + 80 + 12 -- so the text's content box ends exactly where the chip begins, at 345 - 104 = 241 of the 345 bar, which is the ~75/25 the owner asked for stated in the chip's real numbers rather than a percentage that would drift if it is ever resized. `overflow: hidden` is the guarantee: the label cannot reach the chip even if the copy changes. */ padding: 0 104px 0 12px; overflow: hidden; border-radius: 0 0 var(--rb-radius-sm) var(--rb-radius-sm); background: var(--rb-surface-page); box-shadow: inset 0 0 0 var(--rb-stroke) var(--rb-border-subtle); font-family: var(--rb-font-body); font-weight: 400; font-size: 14px; line-height: 21px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-primary); } /* The NOT SURE control — 14463:34544 CTA 80x32, 1px INSIDE #3E3C39, r=4; 14463:34546 label "NOT SURE" Founders 400 14/19 #3E3C39. It is the REAL `.ssq_size_option[value="not-sure"]`: `not-sure` is a genuine pa_size term (confirmed on the live PDP -- `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. It is positioned against .sss_swatches_size_container, which is 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 -- the chip leaves the wheel without a single node moving. Offsets are measured off the block's own edges: right = 367 (block right) - 355 (CTA right) = 12 bottom = 693 (bar bottom) - 682 (CTA bottom) = 11 It stays a `.ssq_size_option`, so simple-select-redesign.js still sees it. Its rect sits ~127px below the wheel's centre -- more than three row pitches -- so it can never win `centredOption()` while the wheel holds options, 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: 11px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 80px; height: 32px; padding: 0; border-radius: var(--rb-radius-sm); background: transparent; box-shadow: inset 0 0 0 var(--rb-stroke) var(--rb-text-secondary); font-size: 14px; line-height: 19px; text-transform: uppercase; /* the term prints "Not Sure"; 14463:34546 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 — 14463:34912 annotations.md 14463:36449 "disabled state". Three deltas, nothing else: 1. the Sizes group drops to opacity 0.4 (14463:34937) 2. the helper copy swaps to the two-line reassurance, 14/18 (14463:34948, 183x36 at y 648) 3. the chip inverts to a filled #0F0E0D pill with #FAF3ED label (14463:34949 / :34951) The 0.4 is applied to the rows and the band rather than to the scroller, because the chip is a DOM descendant of the scroller and `opacity` -- unlike `overflow` -- does apply to out-of-flow descendants. Per-row is visually identical: rows do not overlap, and the gradient ground stays at full strength exactly as the frame draws it. The band is dimmed too: in Figma both full-opacity hairlines (14463:34941 / :34943) live INSIDE the dimmed `Sizes` group. 34912 still draws 6.5 at 28px inside the dimmed wheel, and it still does here: `.is-centred` is independent of `.active`, so choosing NOT SURE dims the wheel without disturbing which row is enlarged. ------------------------------------------------------------------------ */ #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; /* 14463:34937 */ } #simple-select-quiz #ssq_size .sss_swatches_size_container:has(.ssq_size_option[value="not-sure"].active)::after { /* TWO LINES, which is what the board draws and what the sentence needs. Owner: *"on phone the ring size text when I'm Not Sure -- OUR TEAM WILL PERSONALLY REACH OUT TO HELP YOU FIND THE PERFECT FIT -- in two lines, because that goes beyond the Not Sure button."* This had been taken to ONE line by an earlier note (*"that should fit in one line with proper gap from the CTA of NOT SURE"*), with `nowrap` plus `text-overflow: ellipsis` and 118px of right padding. At 390 the bar is 345 wide, so that leaves 215px of content box for a ~470px sentence: it did not fit on one line, it got CUT -- and `nowrap` means the full string still laid out behind the clip, under the chip. Hence this report. 14463:34948 is 183 x 36 at y 648 -- 2 x 18 centred in the 54-tall bar -- so two lines IS the board, and the copy is nowhere near as long as the one-line attempt assumed: MEASURED at 14px/18 FoundersGrotesk, the whole sentence is 352px, and it wraps to exactly two lines at every content width from 190 up. The right padding is the only containment needed, and it is the chip's real box rather than a percentage: the chip was MEASURED at 390 sitting 80 wide with its left edge 253 into the 345 bar, so 12 + 80 + 12 = 104 ends the text at 241 -- a 12px gutter before the chip, holding whatever the copy becomes. That leaves 229 of content, comfortably inside the 190 where the second line is still the last one. BELOW ~360 THE BAR GETS TOO NARROW FOR TWO, and the third line is cut by the `overflow: hidden` the bar already had rather than growing the 54 and pushing the chip off its own baseline. Noted rather than solved: the board's smallest frame is 390, and the alternative -- a bar that changes height on selection -- moves the step's whole footer. */ content: "Our team will personally reach out to help you find the perfect fit."; /* The box stops being a centred flex row and becomes a block that is centred by its own padding: 54 - (2 x 18) = 18, so 9 above and 9 below puts the first baseline on the board's y 648. A flex row cannot wrap a single text run onto two lines. */ display: block; white-space: normal; overflow: hidden; padding: 9px 104px 9px 12px; /* 104 = 12 + the 80 chip + 12 */ font-size: 14px; line-height: 18px; } #simple-select-quiz #ssq_size .ssq_size_option[value="not-sure"].active { background: var(--rb-text-primary); /* 14463:34949 */ box-shadow: inset 0 0 0 var(--rb-stroke) var(--rb-text-primary); color: var(--rb-surface-page); /* 14463:34951 */ } /* =========================================================================== 9. FOLLOW-UPS AND VALUES THE SPEC DOES NOT CARRY --------------------------------------------------------------------------- a) 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. b) NOT-SURE CENTRING (JS). See §7 -- `centreOn()` should skip `[value="not-sure"]`. b2) THE SCROLL GESTURE IS NOT WIRED UP YET (JS, and it is the designer's headline requirement). simple-select-redesign.js:148 binds the wheel's scroll with `$doc.on('scroll', '.rb_size_wheel', ...)`, i.e. by delegation from `document`. `scroll` does not bubble from an element (MDN: Element: scroll event, Bubbles: No), and a headless-Chrome probe on this exact markup confirms it: a document-level listener saw 0 of the 2 scroll events the wheel fired. So today `.is-centred` is only ever painted by `centreOn()` (tap / ?ssq resume) and nothing commits the value the customer scrolls to. Everything in this file -- the snap, the runway, the band, the ramp -- is already in place; the fix is one line of JS: bind directly, `$('.rb_size_wheel').on('scroll', ...)`, re-bound after the options are injected. c) 2.3 RING SIZE (14463:34713), annotations.md note 14463:36453: "If the selected stone came from Advanced Search (a specific, single stone), hide the shape selector entirely." The only difference that note makes to 34713 is in the SHARED setting hero (14463:34717, one 144x36 pill instead of 14463:34511's two), which is `.select_metal_shape` / `.quiz-image` -- owned by redesign/_stone.css, not this file. It also needs a provenance signal CSS cannot see. Left to the hero's owner. d) NO HOVER / PRESSED / FOCUS STATES. flows/STATES.md records none for the wheel, the bar or the NOT SURE control. The chip and the rows get `cursor: pointer` and the wheel `cursor: ns-resize` only; nothing else is invented. The wheel keeps `tabindex=0` from the markup but the design gives no focus ring, so `outline:none` is set and keyboard focus is currently invisible -- FOLLOW-UP: ask the designer for a focus state. e) NO DISABLED / LOADING / EMPTY-LIST RENDERING is drawn for the wheel. (14463:34912's "disabled state" stamp names the NOT-SURE selection, not a disabled control.) f) THE STICKY FOOTER, the setting hero and the step tabs are shared chrome drawn on 14 of the 25 frames; they are owned by redesign/_stone.css. Nothing here touches them. ========================================================================= */ }