/* ============================================================================= Ring builder — STONE screen, DESKTOP Figma file Ex10uQ9OY3OuzSPi4g2hPb, SECTION 14465:38712 (named "[Mobile UI] PDP ring builder refresh" -- mislabelled, it holds the 1728px DESKTOP frames). Frames covered -------------- STONE-A 14465:39600 1728x1240 the builder screen. Everything below. STONE-C 14465:40254 1728x1240 the SAME `Customization` column (14465:40255 vs 14465:39601 -- 0 diff lines across 249 nodes) and the SAME Footer, with the header block, the left preview column and the two collapsed drawers removed. It is the designer's isolation artboard, not a user-facing state, so it needs no rule of its own: everything C draws, A draws identically. STONE-B 14465:39929 1728x1240 NOT a variant of A -- a different page (11-col grid, 491px filter rail + 1134px 4-up result grid, no header/footer/preview column). In this codebase that is `#ssq_diamond_search`, and it is owned by the sibling partial redesign/_advanced-search.css. Nothing here styles anything inside #ssq_diamond_search; the only rule that touches it keeps it out of the flex flow of the handpicked list it is nested in. WHY THIS IS A SEPARATE FILE --------------------------- Same reasoning as simple-select-redesign.css: simple-select.js reads the DOM as state in ~214 places. This file only ADDS declarations and only inside `@media (min-width: 992px)`, so mobile is untouched by construction and a rollback is deleting one enqueue entry (da-general.php:4355 already lists `_stone-desktop`). Nothing here is `display:none` on a node any script reads -- see §9, where every such node is parked with `visibility:hidden` plus a zero box so it keeps its layout identity. EVERY NUMBER COMES FROM THE DESKTOP SPEC. Where the Figma API returns an unrounded float (75.66666412353516, 83.50920104980469, 503.33331298828125) it is written out, not tidied. Where the design has no value for something the markup contains, that is called out in a comment rather than invented. RESPONSIVE MODEL ---------------- The board draws 1728 only. LAYOUT.md §9 is explicit that behaviour above and below that is an implementer decision. Per the decision taken for this pass the desktop layout is FLUID: it holds the 6/6 proportions all the way down to 992px, where the mobile sheet (max-width:991px) takes over. So the grid is expressed as percentages anchored on the exact 1728 figures -- content width 1568 = 1728 - 2 x 80 page gutter column band 1576 = 764 (left) + 60 (gap) + 752 (right) = -10px .. +1566px relative to the content box, i.e. the design's 10px optical bleed left of column 1 and its 2px shortfall on the right left 764 / 1576 = 48.477157360406% gap 60 / 1576 = 3.807106598985% right 752 / 1576 = 47.715736040609% -- so at 1728 the columns land on 764 / 60 / 752 exactly, and at any narrower width they keep that ratio. Type sizes stay fixed; the design gives one ramp. DESKTOP DROPS THE CARD SHADOW. 36 shadow uses on the mobile board, 0 on the desktop STONE frames (the ring image's DROP_SHADOW is `[hidden]`). The only shadow anywhere on the desktop board is on the six ENGRAVING symbol tiles, which are not this screen. Nothing below sets box-shadow. ============================================================================= */ @media (min-width: 992px) { /* =========================================================================== 0. TOKENS simple-select-redesign.css declares the --rb-* custom properties INSIDE its own `@media (max-width: 991px)` block, so they do not exist at desktop widths. They are re-declared here with byte-identical hues -- the shared colour tokens are not being changed, they are being made reachable above 991px. Counts are the desktop TOKENS.md occurrence counts. TYPE IS NOT SHARED. Every size on the desktop board differs from mobile: page title 24 -> 37, section headings 18 -> 24, body 14 -> 16, and the footer price changes family AND weight (FoundersGrotesk 500/14 -> Canela 300/28). All desktop type values are therefore local to this file. ------------------------------------------------------------------------ */ body.ringbuilder-product #simple-select-quiz, #simple-select-quiz { /* --- colour (TOKENS.md §1) ------------------------------------------- */ --rb-text-primary: #0F0E0D; /* 419 uses -- headings, prices */ --rb-text-secondary: #3E3C39; /* 433 -- the dominant desktop ink */ --rb-border-subtle: #E4DED8; /* 193 -- hairlines, unselected chips */ --rb-surface-card: #FFFFFF; /* 52 -- ring panel, stone cards */ --rb-surface-page: #FAF3ED; /* 75 -- page ground; text on green */ --rb-brand-green: #27423B; /* 120 -- CTA, active rule, selection */ --rb-brand-sage: #D8DDCA; /* 24 -- selected carat pill, tooltip */ --rb-brand-sage-strong: #C2CEB2; /* 19 -- selected carat ring, dashes */ --rb-grey-disabled: #D0D0D0; /* 55 -- carat discs, icon outline */ --rb-ink-navy: #142037; /* 7 -- "Popular Choice" pill ground */ /* Opacity variants are distinct USAGES of the same base hue, not new hues -- TOKENS.md §1 records them as paint-level opacity. */ --rb-border-subtle-40: rgba(228, 222, 216, 0.4000000059604645); /* 35 */ --rb-border-subtle-60: rgba(228, 222, 216, 0.6000000238418579); /* 21 */ --rb-surface-card-70: rgba(255, 255, 255, 0.699999988079071); /* 22 */ --rb-surface-page-70: rgba(250, 243, 237, 0.699999988079071); /* 12 */ --rb-text-secondary-95: rgba(62, 60, 57, 0.949999988079071); /* 44 */ /* --- type ------------------------------------------------------------- */ --rb-font-body: 'FoundersGrotesk', sans-serif; --rb-font-display: 'Canela', serif; --rb-ls-tight: -0.21px; /* the -0.20999999344348907px the API returns */ --rb-ls-wide: -0.5px; /* --- desktop grid (LAYOUT.md §2, §3, §9) ------------------------------ */ --rb-d-page-gutter: 80px; --rb-d-content-max: 1568px; --rb-d-col-left: 48.477157360406%; /* 764 / 1576 */ --rb-d-col-gap: 3.807106598985%; /* 60 / 1576 */ --rb-d-col-right: 47.715736040609%; /* 752 / 1576 */ --rb-d-header-h: 166px; /* 98 chrome + 4 + 52 tabs + 12 */ --rb-d-body-top: 194px; --rb-d-footer-h: 100px; /* was 120 -- see THE FOOTER BAND, section 6 */ /* --- radii / stroke ---------------------------------------------------- */ --rb-radius-sm: 4px; --rb-radius-md: 8px; --rb-radius-pill: 100px; --rb-stroke: 1px; } /* =========================================================================== 1. PAGE SHELL LAYOUT.md §1 page background #FAF3ED; §4 the footer is a fixed 120px band, so the section reserves room for it. ------------------------------------------------------------------------ */ #simple-select-quiz { position: relative; /* containing block for the step tab bar, §2 */ background: var(--rb-surface-page); /* STONE-A: right column ends y=1077, footer band starts y=1120 -> a 43px clearance, plus the 120px fixed footer itself. */ padding-bottom: 163px; } /* Content box: 1568 max, 80px page gutter each side (LAYOUT.md §2). `min()` keeps the 80px gutter fixed and lets the content flex, which is what the grid's `alignment: STRETCH` implies. */ #simple-select-quiz > .container, #simple-select-quiz .simple-select-heading > .container { width: min(var(--rb-d-content-max), 100% - (2 * var(--rb-d-page-gutter))); max-width: none; margin-inline: auto; padding-inline: 0; } /* The header band is 166 tall (§2) and the body columns start at y=194, so the body container makes up the 28px between them. */ #simple-select-quiz > .container { padding-top: 28px; } /* The 6/6 split. Bootstrap's .row is re-cast as a two-track grid; the columns keep their .col-lg-6 classes but stop driving the width. margin-left -10px = the design's 10px optical bleed left of column 1 margin-right 2px = the right column ending at 1646, not 1648 */ #simple-select-quiz > .container > .row { display: grid; grid-template-columns: var(--rb-d-col-left) var(--rb-d-col-right); column-gap: var(--rb-d-col-gap); align-items: start; margin: 0 2px 0 -10px; width: auto; } #simple-select-quiz > .container > .row > .col-12, #simple-select-quiz > .container > .row > .quiz-left { width: auto; max-width: none; flex: none; padding-inline: 0; } /* =========================================================================== 2. HEADER BAND (14465:39854, 1728 x 166) Two stacked rows over one full-bleed ground: Fixed header 14465:39855 y 0 h 98 pad 32/80/6/80 SPACE_BETWEEN Step tab bar 14465:39856 y 102 h 52 pad 12/80/0/80 ------------------------------------------------------------------------ */ #simple-select-quiz .simple-select-heading { /* FLAT #E4DED8, per 14557:52000. The two stacked paints below it -- #FAF3ED with #E4DED8 @ 0.6 over -- came off 14465:39855, the older header frame; the new one gives both the `Fixed header` instance and the `header` frame inside it a single solid #E4DED8. Blended, the old pair landed on about rgb(237,231,224) against the board's rgb(228,222,216). The image is left declared as `none` rather than the gradient removed, so the two paints stay visible next to each other in the diff. */ /* #EDE6E0, STATED OPAQUE. Owner: *"background colour change to #EDE6E0 (this is originally meant to be pearl-dark at 60% on an opaque pearl-light bg). That way [the] background for 'X' pearl dark will be visible."* It was authored as the translucent form -- #E4DED8 at 60% -- which is the same colour only while whatever sits behind it is pearl light, and it means anything ON the band that is also pearl-dark blends into it. Flat #EDE6E0 is the resolved value, so the close plate and the arrow chips can take pearl-dark and actually read. */ background-color: #EDE6E0; background-image: none; /* 32 top pad + 60 content + 74 = 166. The 74 covers the 4px gap, the 52px tab row and the band's 12px bottom padding; the tab bar itself is absolutely positioned into that space below. */ padding: 32px 0 74px; margin-bottom: 0; } /* `header` 14465:39855;14251:45580 carries node opacity 0.8. */ #simple-select-quiz .simple-select-heading > .container { opacity: 0.800000011920929; } /* Bootstrap's .row carries -12px side margins and .col a matching 12px padding; both are zeroed so BACK lands on x=80 and EXIT's right edge on x=1648, i.e. flush with the 1568 content box. */ #simple-select-quiz .simple-select-heading > .container > .row { margin-inline: 0; width: auto; } #simple-select-quiz .simple-select-heading .col { position: relative; /* the title stack centres on the PAGE, not here */ height: 60px; /* 32 top pad + 60 + 6 bottom pad = 98 */ align-items: flex-start !important; /* .align-items-center is a utility class on the element itself, so a plain selector cannot outrank it */ padding: 0; } /* --- BACK (instance I14465:39855;14278:50069, 100x36 at x=80) ---------- NOTE / DELIBERATE DEVIATION. The instance on STONE-A carries `opacity: 0.0` and an ON_HOVER swap to variant `14465:40706`, i.e. the designer parked the control invisible and reveals it on hover. The component's own Default variant (14465:40701) is a #FAF3ED chip, radius 4, padding 0/20, with a 7.266 x 11.999 chevron stroked #0F0E0D and a "BACK" label. Two reasons this is rendered at full opacity instead: (a) an invisible primary navigation control is not shippable, and (b) .rb_back has no "BACK" text node, so a hover-reveal would reveal nothing but a chevron. Geometry, fill, radius and glyph size are the component's; only the instance-level opacity override is not honoured. */ #simple-select-quiz .rb_back { width: 100px; height: 36px; padding: 0 20px; border: 0; border-radius: var(--rb-radius-sm); background-color: var(--rb-surface-page); /* 7.265892236915533 x 11.999445270030265, at x=101.87 in a button whose left edge is x=80 -> 21.87px from the left. */ background-image: url("../../../assets/media/ringbuilder/icon-back-chevron-desktop-7x12.svg"); background-repeat: no-repeat; background-position: 21.87px center; background-size: 7.265892px 11.999445px; cursor: pointer; } /* The inline right-arrow.svg has a tail the design's Vector does not; the background image above is the exact export, so the inline glyph is suppressed. An is not a node any script reads. */ #simple-select-quiz .rb_back > svg { display: none; } /* --- title stack (Frame 1171276560, 301x60 at x=713.5) ----------------- x 713.5 + 301/2 = 864 = 1728/2, so it is centred on the page, not on the space left between BACK and EXIT. */ #simple-select-quiz .rb_head_titles { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: max-content; text-align: center; } #simple-select-quiz .rb_head_titles h2 { margin: 0; font-family: var(--rb-font-display); font-weight: 300; /* 32, NOT the board's 37. 14557:52000 still carries 37 on this text node and the owner's instruction is explicit -- "build your ring in the top section from 37 to 32px" -- so the number is theirs and the board's is recorded rather than followed. */ font-size: 32px; line-height: 30px; letter-spacing: var(--rb-ls-tight); /* case=SMALL_CAPS_FORCED -- which draws PLAIN CAPITALS. The component is the same `Current estimate/Top` instance the 390 boards carry, and its stored characters are 'BUILD YOUR RING', already capitals, so small caps have no lower case to shrink. Proven on the Flow 3 boards to 1.5% on six nodes -- the table is in _stone.css above `.rb_head_titles h2` -- and carried here because it is the same DOM string and the same control set; the 14465 payload was not re-extracted for this pass, and the two widths disagreeing on case would be a worse answer than either. */ text-transform: uppercase; font-variant-caps: normal; color: var(--rb-text-primary); } #simple-select-quiz .rb_head_titles .rb_head_setting { margin: 0; font-family: var(--rb-font-body); font-weight: 400; /* 16 -- design, on a second look: "on desktop make the text 16px, on second look 18px is looking too big" (the ring name and the three step labels). This has now been 21 -> 18 -> 16; the labels move with it so the two keep agreeing. Leading stays 30 so the header block holds its 30 + 30 rhythm under the h2. */ font-size: 16px; line-height: 30px; letter-spacing: var(--rb-ls-tight); text-transform: uppercase; /* H.8, same correction as the h2 above */ font-variant-caps: normal; color: var(--rb-text-secondary); } /* --- EXIT (instance I14465:39855;14278:50095) -------------------------- The instance is 100 wide but only the 36x36 `exit button` frame at x=1612 is painted (#E4DED8, radius 4) and its right edge is 1648 = the content right edge, so a 36px box flush right reproduces it. Glyph 10x10. */ #simple-select-quiz .close_ssq { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--rb-radius-sm); background: var(--rb-border-subtle); cursor: pointer; } #simple-select-quiz .close_ssq svg { display: none; } /* ---- THE CROSS IS THE ADVANCED SEARCH'S, DRAWN NOT DRAWN-ON ----------- Same glyph as `#ssq_diamond_search .dsq_close_glyph`: a square box with two bars through its centre at +/-45 degrees, each `size x sqrt(2)` long (the box diagonal) and 1px thick with round caps. Copied as GEOMETRY rather than as an asset, so the two crosses cannot drift apart the way an exported SVG and a CSS drawing already had. This replaces two different implementations of the same mark -- a background-image PNG-style asset at <=991 and an inline at >=992 -- with one, applied at every width. */ #simple-select-quiz .close_ssq { position: relative; } /* Stated in full, not as an override. `.dsq_close_glyph`'s base rule is unmediaed, so the search's desktop block only has to restate width and colour -- but this sheet's mobile twin lives inside `@media (max-width: 991px)`, so there is nothing here to inherit and a width-only rule would draw no bars at all. */ #simple-select-quiz .close_ssq::before, #simple-select-quiz .close_ssq::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14.1421px; /* 10 x sqrt(2) -- the 10px glyph the >=992 search uses */ height: 1px; /* strokeWeight 1 */ background: var(--rb-text-primary); border-radius: 0.5px; /* strokeCap ROUND */ } #simple-select-quiz .close_ssq::before { transform: translate(-50%, -50%) rotate(45deg); } #simple-select-quiz .close_ssq::after { transform: translate(-50%, -50%) rotate(-45deg); } /* --- step tab bar (Frame 1171276559 -> `bar` 14465:39857) -------------- `bar` is 1000x40 at x=364, y=114 -- centred, not gutter-aligned: (1728 - 1000) / 2 = 364. Three equal tabs of 306.6666564941406 with itemSpacing 40; 3 x 306.667 + 2 x 40 = 1000. The markup has no tab bar. It has .rb-progress-bar inside .quiz_options (and a second, already-display:none copy inside .last_slide_info). The bar is therefore lifted into the header band by absolute positioning rather than by moving a node -- no DOM change, and simple-select.js's step-name -> step-number mapping (which walks .progress_label by DOM index) is untouched. */ #simple-select-quiz .quiz_options > .rb-progress-bar { position: absolute; top: 114px; left: 50%; transform: translateX(-50%); width: min(1000px, 100% - (2 * var(--rb-d-page-gutter))); height: 40px; margin: 0; opacity: 0.800000011920929; /* Frame 1171276559 node opacity */ } /* The progress track and its four dots have no counterpart in the desktop design. Parked, not removed -- simple-select.js toggles .completed on .progress-circle and reads the collection. */ /* THE BAR IS A ROW, because 14557:52000 makes it one: `bar` is 1000 wide, HORIZONTAL, itemSpacing 30, over five children -- a 36x36 chevron box, three 269.3 step cells and a second 36x36 box. It was a plain block with the label row inside it, so switching the arrows on stacked them ABOVE and BELOW the labels (MEASURED: prev at y114, labels pushed to y152, next at y186) instead of putting them at the ends. */ #simple-select-quiz .quiz_options > .rb-progress-bar { /* !important, for the same reason as the 2.2 rule at the top of this file: simple-select.js calls `.show()` on this node (1685 / 2163 / 2414), and jQuery's `.show()` writes `style="display: block"` -- the element's DEFAULT display for a
, not the one the sheet asked for. An inline style beats any author rule that is not !important. MEASURED on 2.4 after the advanced-search round trip (open search -> open a stone -> ADD TO RING): the bar computed `display: block`, so its five children stacked instead of forming a row -- prev arrow at y114, the STONE/SIZE/ENGRAVING labels pushed down to y152, and the NEXT arrow at y186, i.e. 32px BELOW the 40px band and painting straight over the Ring Details card at [80,194]. The first entry to 2.4 looked right only because `.show()` had not run yet; it is written on every later visit, which is why this reads as "the row moves down after coming back from the search". */ display: flex !important; /* TOP, NOT CENTRE -- 14557:52000 puts every child of `bar` at the frame's own y. The bar is 40 tall and holds 36-tall chips and 30-tall step cells, so centring dropped the chips 2px and the labels 5px below where the board draws them. MEASURED before: bar at y114 with the chips at 116 and the label row at 118. Owner: *"align them vertically properly, they feel a bit low."* */ align-items: flex-start; gap: 30px; /* Never wrap. A flex row wraps by default the moment its items' min-content exceeds the line, and the two 36px arrows plus two 30px gaps took 132 out of the track when they came back -- so the step cells are working with less room than they were built against. Stated rather than left to the initial value, because what wraps here is not one label onto two lines but a whole step cell onto a second row, which lifts the bar out of its 40px box and pushes the band open. */ flex-wrap: nowrap; } #simple-select-quiz .quiz_options > .rb-progress-bar > .progress-items { flex: 1 1 auto; order: 1; flex-wrap: nowrap; /* A flex item will not shrink below its min-content width unless told it may, and `min-width: auto` on a row of three cells is the whole width of the longest label plus its padding. Without this the row refuses to fit and overflows or wraps instead of the cells narrowing. */ min-width: 0; } #simple-select-quiz .quiz_options > .rb-progress-bar > .progress-items > .progress_label { min-width: 0; } #simple-select-quiz .quiz_options > .rb-progress-bar > .rb_step_prev { order: 0; } #simple-select-quiz .quiz_options > .rb-progress-bar > .rb_step_next { order: 2; } /* These two are zero-height carriers the legacy bar still needs in the DOM. As flex items they would take a 1000px-wide slot each and push the row apart, so they come out of flow entirely -- `visibility: hidden` alone was enough when the bar was a block and is not now. */ #simple-select-quiz .quiz_options > .rb-progress-bar > .rb-progress, #simple-select-quiz .quiz_options > .rb-progress-bar > .rb-progress-complete { position: absolute; height: 0; margin: 0; visibility: hidden; } #simple-select-quiz .quiz_options > .rb-progress-bar .progress-circle { height: 0; margin: 0; visibility: hidden; } #simple-select-quiz .quiz_options > .rb-progress-bar .progress-items { display: flex; gap: 40px; /* Frame 1171276574 is 30 tall (y 114..144) and its content -- 3px rule, 4px gap, 20px label -- is 27, centred: 1.5px above. */ margin-top: 1.5px; font-size: inherit; } #simple-select-quiz .quiz_options > .rb-progress-bar .progress_label { flex: 1 1 0; min-width: 0; /* Frame 1171276574 is a 4px-gap column of Frame 1171276571 (the rule) over the label. The rule is drawn as its own box rather than as a top border so its cornerRadius 10 reads as a rounded bar, not a bracket. */ display: flex; flex-direction: column; gap: 4px; transform: none; /* clears the nth-of-type nudges in the base sheet */ font-family: var(--rb-font-body); font-weight: 400; /* 16 -- design, same note as the ring name above. Which is also the board's own size, so this lands back where 14468 draws it. */ font-size: 16px; /* SPEC reports lineHeightPx 30 on a node whose own height is 20 and whose vertical align is CENTER. The 20px box is what the 40px bar is built from, so the box wins and the 30 is recorded here. Raised with the type so a 21px glyph is not clipped by a 20px line. */ line-height: 26px; letter-spacing: var(--rb-ls-tight); text-transform: uppercase; /* H.15, same correction as the header above */ font-variant-caps: normal; text-align: center; /* ONYX until the step has been visited. */ color: var(--rb-text-primary); text-decoration: none; } #simple-select-quiz .quiz_options > .rb-progress-bar .progress_label::before { content: ""; display: block; /* 4, per 14557:52000's `Frame 1171276571` (269.3 x 4, cornerRadius 10). The 3.0001 was the older frame's. */ height: 4px; border-radius: 10px; /* THE UNFILLED TRACK CANNOT BE THE BAND'S OWN COLOUR. 14557:52000 gives the inactive `Frame 1171276571` #E4DED8 AND the header it sits on #E4DED8 -- the same value twice, so as drawn the SIZE and ENGRAVING tracks are invisible and only the green STONE one reads. That was hidden while the band was still the old two-paint blend (~rgb 237,231,224) and surfaced the moment the band went flat to the board's rgb(228,222,216). The board is self-inconsistent here, so the smallest honest deviation is taken: the band keeps the board's colour and the empty track goes to the page cream, which reads as an unfilled track on a grey band and uses a token already in this palette rather than a new value. Recorded because it IS a deviation, not a reading of the frame. */ /* ...AND THE GREEN SWEEPS ACROSS IT. Owner: *"I need this both on phone and desktop."* Same correction as the phone sheet's: progress here was the whole 4px rule swapping from the empty colour to green in one go, so there was nothing to animate -- no width travels, the segment just changes colour. The empty track stays as the background COLOUR and the green arrives as a background IMAGE sized 0% -> 100% of the rule. background-size is animatable, so the fill genuinely travels left to right. .45s ease-in-out is measured off the owner's screen capture (the working is on the phone rule in _stone.css): ~470ms forward, accelerating from rest and decelerating into the stop, which is also what the Figma prototype 14166:35992 specifies at 400ms SMART_ANIMATE. */ background-color: var(--rb-surface-page); background-image: linear-gradient(var(--rb-brand-green), var(--rb-brand-green)); background-repeat: no-repeat; background-position: left center; background-size: 0% 100%; transition: background-size .45s ease-in-out; } @media (prefers-reduced-motion: reduce) { #simple-select-quiz .quiz_options > .rb-progress-bar .progress_label::before { transition: none; } } /* Completed = the green has swept this segment's full width. NOT the `background` shorthand: it would reset background-image and background-size and take the travel away again. */ #simple-select-quiz .quiz_options > .rb-progress-bar .progress_label.completed::before { background-size: 100% 100%; } #simple-select-quiz .quiz_options > .rb-progress-bar .progress_label.completed { color: var(--rb-brand-green); /* MEDIUM, AND A REAL ONE. Owner: *"stone / size / engraving text in the bars should be bold after we go past them."* The 400 below was right for as long as Regular was the only declared face -- a 700 here was a synthesised fake. _stone.css now declares FoundersGrotesk-Medium under its own family (and carries sidecart.css's warning that it is still the trial cut), so the done steps can be genuinely heavier than the ones ahead of them. */ font-family: 'FoundersGroteskMedium', 'FoundersGrotesk', sans-serif; /* 400, NOT 700. Only ONE FoundersGrotesk face is declared anywhere in this theme (Regular, main.css:43) -- there is no bold file -- so a 700 here is a browser-SYNTHESISED fake that double-strikes the glyphs. Design has asked us off the Medium cut for the same reason ("we don't have the right font"), and this is the same problem wearing a different number. The visited step is already distinguished by colour (--rb-brand-green against --rb-text-primary), which needs no second file. */ font-weight: 400; text-decoration: none; /* the underline is the CURRENT step's, below */ } /* ---- STEP STATES -- three, not two ------------------------------------ Asked for: 21px throughout; ONYX before a step has been visited, JADE after; bold once visited; underline ONLY on the step you are currently on. `.completed` cannot express that on its own. simple-select.js:1146 stamps it on every label from the first up to and INCLUDING the current one, so it means "visited or current", and the CURRENT step is simply the last one carrying it. That is what the `:has(+ ...)` pair below reads: the completed label whose next sibling is not completed -- plus `:last-of-type` for the case where every step is done. No JS needed, and nothing to keep in sync with the step machinery. */ #simple-select-quiz .quiz_options > .rb-progress-bar .progress_label.completed:has(+ .progress_label:not(.completed)), #simple-select-quiz .quiz_options > .rb-progress-bar .progress_label.completed:last-of-type { /* NO UNDERLINE. Owner: *"also remove underlines completely"* for this bar. The step's own 2px rule above the label already marks the current step, so the underline was a second signal for the same state. */ text-decoration: none; } /* The design has three tabs; the markup has four labels (Stone / Size / Engraving / Review). "Review" is parked at zero width, and its share of the 40px gap is cancelled so the three visible tabs still measure (1000 - 2 x 40) / 3 = 306.6666564941406 each. Not display:none -- the collection is indexed by simple-select.js. */ #simple-select-quiz .quiz_options > .rb-progress-bar .progress_label:nth-of-type(4) { flex: 0 0 0px; width: 0; padding: 0; margin-left: -40px; overflow: hidden; visibility: hidden; } /* =========================================================================== 3. LEFT PREVIEW COLUMN (Frame 1171276716, 764 wide at x=70, y=194) `setting section` 14465:39836 is AL:VERTICAL gap 12: Setting details y 194 h 48 ring image frame y 254 h 503.33331298828125 Settings pills y 769.33 h 48 48 + 12 + 503.33 + 12 + 48 = 623.33 = the frame's height. ------------------------------------------------------------------------ */ #simple-select-quiz .quiz-left { /* `!important`, and this is why the Ring Details bar looked glued to the photo on every step. simple-select.js writes `background: #fff` INLINE on this column in three places (js:1254, :1667, :1905; js:1680 is the only unset), and an inline declaration outranks any plain author rule -- so this `transparent` never bit and the whole left column painted white. MEASURED on the size step: `.quiz-left` rgb(255,255,255) at [top 194, height 811], starting level with the bar. The 40px gap below the bar was there the whole time; it was white on white, with no page ground between the two to see it. §9 already had this fix but held it to `.rb-stone-held` / `.rb-stone-pdp` -- the two stone-detail boards -- so every ordinary step kept the slab. The column is not a card on ANY board: the photo carries its own white frame, and everything else sits on the page ground. */ background: transparent !important; margin-bottom: 0; position: relative; } /* --- Ring Details accordion (Setting details 14465:39837, 764x48) ------ Collapsed by default -- the instance's variant is "Default", h=48, clipsContent, and every expanded row inside it (Setting / Stone / the warranty strap) is `visible: false`. simple-select-redesign.js only toggles .is-open on click, so collapsed is also the markup default. */ #simple-select-quiz .rb_details_bar { height: 48px; padding: 16px 18px; border-radius: var(--rb-radius-sm); background: var(--rb-border-subtle-60); overflow: hidden; /* SAME GESTURE AS THE STONE CARDS. `.rb_stone_panel` grows with `height: 0 -> auto` over 260ms cubic-bezier(0.4, 0, 0.2, 1), and the only reason that interpolates at all is `interpolate-size: allow-keywords`, which is declared on `.ssq_all_stone_options`. This bar sits outside that container, so it needs its own -- a transition alone would have snapped exactly as before and looked like nothing had changed. */ interpolate-size: allow-keywords; transition: height 260ms cubic-bezier(0.4, 0, 0.2, 1); } #simple-select-quiz .rb_details_toggle { display: flex; align-items: center; width: 100%; height: 19px; /* Frame 1171276592, 728 x 19 */ padding: 0; border: 0; background: none; text-align: left; cursor: pointer; } /* Design order is chevron, label, ...., estimate. The markup emits label, estimate, chevron -- reordered with flex `order` only. */ #simple-select-quiz .rb_details_chev { order: -1; flex: none; /* Vector I14465:39837;14465:40611 -- 12 x 6, stroked #3E3C39 at 1.5 */ width: 12px; height: 6px; margin-right: 13px; /* chevron ends x=100, "Ring Details" at x=113 */ background: url("../../../assets/media/ringbuilder/icon-chevron-down-12x6.svg") no-repeat center / 12px 6px; /* was .2s linear -- the cards' chevron uses the curve below, and the two controls sit on the same screen. */ transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1); } #simple-select-quiz .rb_details_bar.is-open .rb_details_chev { transform: rotate(180deg); } #simple-select-quiz .rb_details_label { order: 0; font-family: var(--rb-font-body); font-weight: 400; /* Ring Details is Regular -- see the KNOWN GAPS note */ font-size: 18px; line-height: 19px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-secondary); } #simple-select-quiz .rb_details_est { order: 1; margin-left: auto; font-family: var(--rb-font-body); font-weight: 400; /* styleOverride "14" on the Title node */ font-size: 18px; line-height: 19px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-secondary); text-align: right; } #simple-select-quiz .rb_details_price { margin-left: 5px; /* the source string is "Current Est. $1,660" */ /* Owner: *"in the Ring Details bar, Current Est. $1,900 -- remove the bold from the amount."* It was the one word in that row set heavier than its own line: MEASURED 500 against the 400 every other node in the bar computes. The COLOUR stays -- the amount is still the darker ink, which is what separates it from the `Current Est.` label beside it. */ font-weight: 400; color: var(--rb-text-primary); } /* NOT REACHABLE: the expanded body. Setting details' expanded rows exist in the component (Setting / $680, Stone / Handpicked lab diamond / $980, and the "Free engravings . Free 60-day returns . Lifetime warranty" strap, I14465:39837;14465:40627, 728 x 114) but .rb_details_bar has no markup for them, so .is-open currently only flips the chevron. Needs markup. */ /* --- the stack under the accordion -------------------------------------- */ #simple-select-quiz .quiz-image-conatiner { padding: 0; /* the base sheet sets 0 10px */ /* 24, and this REVERSES an earlier decision rather than ignoring it. The note this replaces read: "40, not the board's 12. Reported twice as still not visible at 24, so it goes to a distance that cannot be mistaken for the original spacing." That was the owner pushing the gap UP; they are now pushing it back down -- "the gap between image top and bottom of ring details when collapsed is too much, make it smaller like that of it on stone flow". 24 is not split-the-difference: it is the stone-first flow's own figure, `--sf-flow-head-gap` in settings-picker.css, which is the "stone flow" being pointed at. Same number in both places, so the two screens stop disagreeing about the same gap. MEASURED before this, at 1728: bar bottom 242, image top 282 on STONE, SIZE and ENGRAVING alike -- all three were already identical at 40, so there was no size/engraving-specific drift to find. Changed on all three for that reason; the board's own 12 is still recorded above as the smallest number anyone has proposed. */ margin-top: 24px; } #simple-select-quiz .quiz-image { /* simple-select.js writes display:flex inline on .quiz-image in 17 places, and .show() writes display:block. Pin it so a return trip cannot change the box type. */ display: flex !important; flex-direction: column; align-items: stretch; /* the base sheet centres these, which collapses the 764-wide panel to its content width */ gap: 12px; background: transparent; /* the white panel belongs to the image frame (Frame 1171276712), not to this wrapper */ position: static; /* base desktop sheet sets position:relative so it can absolutely park the pills */ } /* --- ring image panel (Frame 1171276712, 764 x 503.33331298828125) ------ pad 0/80/0/80, fill #FFFFFF, radius 4, clipped; the image rectangle inside is 604 x 503.33331298828125 -> exactly 6:5, which is the aspect-ratio the base desktop sheet already puts on .sss-image-crop. */ #simple-select-quiz .quiz-image .sss-metal-image { order: 1; padding: 0 80px; background: var(--rb-surface-card); border-radius: var(--rb-radius-sm); overflow: hidden; } #simple-select-quiz .quiz-image .sss-metal-image .sss-image-crop { aspect-ratio: 604 / 503.33331298828125; } /* The image rectangle carries a DROP_SHADOW that is `[hidden]` on desktop -- see the file header: 0 shadows on this screen. */ #simple-select-quiz .quiz-image .sss-metal-image img { box-shadow: none; } /* --- summary pills (`Settings` 14465:39840, 764 x 48, itemSpacing 60) --- Two 352x48 pills at x=70 (metal) and x=482 (shape): 352 + 60 + 352 = 764. The markup emits shape first, so the two are swapped with `order`. */ #simple-select-quiz .select_metal_shape { order: 2; display: flex; gap: 60px; position: static; /* base desktop sheet absolutely positions this */ top: auto; width: 100%; flex-direction: row; } #simple-select-quiz .select_metal_shape > .metal_dropdown_ssq { order: 1; } #simple-select-quiz .select_metal_shape > .shape_dropdown_ssq { order: 2; } #simple-select-quiz .select_metal_shape > .metal_dropdown_ssq, #simple-select-quiz .select_metal_shape > .shape_dropdown_ssq { /* Both pills are layoutGrow 1 / sizing FILL -> 352 each at 764 with the 60px gap. Written as calc rather than `flex: 1` because Chrome resolved the two flexible items to 353 / 351 rather than an even split. */ flex: 0 0 calc((100% - 60px) / 2); min-width: 0; height: 48px; margin: 0; display: flex; align-items: center; border-radius: 34px; background: var(--rb-border-subtle-40); overflow: hidden; cursor: pointer; } #simple-select-quiz .select_metal_shape > .metal_dropdown_ssq { padding: 8px 14px; } #simple-select-quiz .select_metal_shape > .shape_dropdown_ssq { padding: 8px 12px 8px 14px; } /* The literal "Metal" / "Shape" lead-in span has no counterpart in the design. Visually hidden rather than removed: it stays in the accessibility tree and in the DOM for anything that walks these containers. */ #simple-select-quiz .select_metal_shape > .metal_dropdown_ssq > span, #simple-select-quiz .select_metal_shape > .shape_dropdown_ssq > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* The base sheet draws these as a bordered white dropdown box (#fff, 1px onyx, radius 4, width 150, offset 10/-10). In the design the pill IS the surface, so the inner box is stripped back to a plain row. */ #simple-select-quiz .metal_current_option, #simple-select-quiz .shape_current_option { display: flex; align-items: center; width: auto; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; /* The type is set HERE as well as on the generated inner row. The inner `.select_metal_option` / `.select_shape_option` divs are written by simple-select.js:2056-2068 and are absent until it runs; without the declaration on the container the pill label falls through to the base theme (FoundersGrotesk 400 14/15.4, ls normal) both before the script runs and for anything that reads the container itself. */ font-family: var(--rb-font-body); font-weight: 400; line-height: 16px; letter-spacing: var(--rb-ls-tight); /* SMALL_CAPS_FORCED on both label nodes -- the same treatment the mobile sheet gives them, expressed as small caps rather than uppercase because the desktop tokens record the forced-small-caps case (TOKENS 19 / 41). */ font-variant-caps: normal; /* was all-small-caps -- the pill shows a NAME */ color: var(--rb-text-primary); } /* 14465:39843 metal label is 17/16, 14465:39849 shape label is 19/16 -- two sizes on one row. Odd, and the design gives no rule for it (GAPS G-09); both are read straight from the file rather than averaged. */ #simple-select-quiz .metal_current_option { font-size: 17px; } #simple-select-quiz .shape_current_option { font-size: 19px; } /* simple-select.js writes `.select_metal_option` / `.select_shape_option` (icon span + friendly name) followed by `.dropdown_icon` into these. */ #simple-select-quiz .metal_current_option .select_metal_option, #simple-select-quiz .shape_current_option .select_shape_option { display: flex; align-items: center; gap: 12px; /* Frame 1171276586 itemSpacing */ padding: 0; /* base sheet: 8px 5px / 5px, plus a 1px rule */ border: 0; /* ROUND2: `.select_shape_option.disabled` (simple-select.css:709) paints `background: #a3a3a3; border-color: #a3a3a3` -- a grading colour for a shape the current setting cannot take, written for the DROPDOWN LIST. simple-select.js clones the chosen option into `.shape_current_option` WITH its classes, so a disabled shape painted a solid grey 142 x 20 bar behind the label inside the 220 x 44 pill (measured at 1728; the sibling `.select_metal_option` was rgba(0,0,0,0)). 14468:41896 draws the pill interior on the pill's own fill with no inner block. Nulled HERE, on the clone, rather than at the source, which the list still needs. */ background: transparent; font-family: var(--rb-font-body); font-weight: 400; font-size: inherit; /* 17 on metal, 19 on shape -- set on the pill */ line-height: 16px; letter-spacing: var(--rb-ls-tight); font-variant-caps: normal; /* was all-small-caps -- the pill shows a NAME */ color: var(--rb-text-primary); white-space: nowrap; } /* "Round icon" 14465:39844 / 14465:39850 -- 24 x 24, radius 20. The metal one is drawn in Figma as an empty circle stroked #D0D0D0 at 3; here it carries the real metal swatch colour that simple-select.js sets inline, which is product data, so only the box is imposed. */ #simple-select-quiz .metal_current_option .select_metal_option .metal_icon, #simple-select-quiz .shape_current_option .select_shape_option .icon { flex: none; width: 24px; height: 24px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } #simple-select-quiz .shape_current_option .select_shape_option .icon svg { width: 100%; height: 100%; } /* Vector 14465:39846 / 14465:39853 -- 8.0000001748449 x 4, stroked #0F0E0D. The generated .dropdown_icon svg is a 24x24 viewBox whose chevron spans 11.24 x 6, so 17.09px of svg renders an 8px-wide chevron. SPEC INCONSISTENCY, recorded not resolved: the metal pill leaves 11px between label and chevron, the shape pill leaves 6. 11 is used for both. */ #simple-select-quiz .metal_current_option .dropdown_icon, #simple-select-quiz .shape_current_option .dropdown_icon { /* The base sheet pins this to the pill's far corner (.select_metal_shape span.dropdown_icon: absolute, top -2, right -7). */ position: static; flex: none; margin-left: 11px; display: inline-flex; align-items: center; } #simple-select-quiz .metal_current_option .dropdown_icon svg, #simple-select-quiz .shape_current_option .dropdown_icon svg { width: 17.09px; height: 17.09px; } #simple-select-quiz .metal_current_option .dropdown_icon svg line, #simple-select-quiz .shape_current_option .dropdown_icon svg line { stroke: var(--rb-text-primary); } /* =========================================================================== 4. RIGHT CONTROLS COLUMN (`Customization` 14465:39601, 752 at x=894) AL:VERTICAL itemSpacing 48, two blocks: Frame 1171276101 carat 752 x 220 at y 194 Frame 1171276102 handpicked 752 x 615 at y 462 ------------------------------------------------------------------------ */ #simple-select-quiz .quiz_options { padding: 0; /* the base sheet sets 0 10px */ } #simple-select-quiz #ssq_select_stone { text-align: left; } /* --- CARAT block (Frame 1171276101) ------------------------------------ AL:VERTICAL gap 32: Frame 1171276619 heading row 752 x 23 at y 194 Frame 1171276620 selector+tag 752 x 165 at y 249 23 + 32 + 165 = 220. The heading row is SPACE_BETWEEN with cross=MAX: the Canela title's box bottom (198+19) and the link's box bottom (201+16) are both 217, i.e. bottom-aligned. The markup puts .rb_true_size AFTER .rb_carat_tiles, so the block is a wrapping flex row and the three parts are placed with `order`. */ #simple-select-quiz .simple-quiz-carat-filter { /* Same reason as the stone list above: simple-select.js .show()/.hide()s this block (js:660, :1612, :1651, :1917, :1976), and jQuery's .show() writes an inline display:block that would flatten this layout on the way back. */ display: flex !important; flex-wrap: wrap; align-items: flex-end; margin-top: 0; /* Frame 1171276101 -- fill #FAF3ED @ 0.7; its 1px #E4DED8 stroke is [paint-hidden], so no border. radius 4. */ background: var(--rb-surface-page-70); border-radius: var(--rb-radius-sm); } #simple-select-quiz .simple-quiz-carat-filter > .filter_heading { order: 1; flex: 1 1 auto; min-width: 0; height: 23px; margin: 0; } #simple-select-quiz .simple-quiz-carat-filter > .rb_true_size { order: 2; flex: 0 0 auto; margin: 0 0 0 auto; height: 23px; display: flex; align-items: flex-end; } #simple-select-quiz .simple-quiz-carat-filter > .rb_carat_tiles { order: 3; flex: 1 0 100%; margin-top: 32px; /* Frame 1171276101 itemSpacing */ } #simple-select-quiz .simple-quiz-carat-filter > .filter_row.carat-filters, #simple-select-quiz .simple-quiz-carat-filter > .active_carat_quiz_container { order: 4; flex: 1 0 100%; } /* "CARAT WEIGHT" -- Title 14465:39604, Canela 300 24/19. COPY MISMATCH, not fixable from CSS: the design's string is "CARAT WEIGHT"; the markup's is "Change Carat Weight:" inside .filter_heading p strong. The type, colour and box are the design's. */ #simple-select-quiz .filter_heading > p:first-of-type { margin: 0; height: 23px; } #simple-select-quiz .filter_heading > p:first-of-type > strong { display: block; text-transform: uppercase; /* the design's own string is already caps */ 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); } /* "See true size on hand" -- 14465:39605, FG 400 18/16, ls -0.5, underlined, #27423B, right edge x=1646 = the right column's right edge. */ #simple-select-quiz .rb_true_size_link { font-family: var(--rb-font-body); font-weight: 400; font-size: 18px; line-height: 16px; letter-spacing: var(--rb-ls-wide); text-decoration: underline; color: var(--rb-brand-green); } /* --- carat tiles (`carat size selector` 14465:39607 -> Frame 1171276710) - AL:HORIZONTAL itemSpacing 36, six tiles of 95/95/96/95/96/95 x 124..125: 6 x 95.3333 + 5 x 36 = 752. Each tile is AL:VERTICAL pad 36/0/36/0 gap 20, cornerRadius 200 -- but the resolved geometry is 36 top, 30 disc, 20 gap, 16 label, 22 bottom = 124, so the bottom padding is what the fixed height actually leaves. Widths shrink below 1728; the 124px height and the disc sizes do not, because the discs are a to-scale representation of stone size. */ /* THE ROW IS THE SIZE-QUERY CONTAINER. Reported by Vartika: *"the carat sizes are elongated again ... they should not be elongated, carat buttons in stone slide"*. The note above used to end "the 124px height and the disc sizes do not [shrink]". The DISC half of that is still true and deliberate -- the discs are a to-scale representation of stone size, so 13/16/21/24/34/40 stay absolute at every width. The HEIGHT half was wrong: a pinned 124 against a width that flexes with the column is exactly what stretches the pill. MEASURED on dev-1, tile box and height/width ratio (board is 1.30): 1728 95.3 x 124 1.30 <- the board 1512 82.3 x 124 1.51 1440 77.9 x 124 1.59 1280 68.2 x 124 1.82 992 50.8 x 124 2.44 <- twice as tall as wide i.e. worst exactly where people actually work. <=991 was never affected; `_stone.css` gives it a fixed 52 x 70 pair, ratio 1.35. `container-type: inline-size` makes 1cqi = 1% of THIS row's width, which is the same basis the gap already used as a raw percentage (36/752). Every box metric on the tile is restated against it below, so the pill scales as one piece instead of only in x. The raw `%` gap is kept as-is -- a percentage gap already resolves against this element's width and needs no help. `height: auto` rather than the frame's 125: the row now takes the height of the tiles it holds, which IS 124.5 at 1728 (124 + the 0.5 offset), so the authored figure is reproduced and no longer fought with below it. */ #simple-select-quiz .rb_carat_tiles { display: flex; align-items: flex-start; container-type: inline-size; height: auto; /* was 125px -- `carat size selector` 14465:39607 */ gap: clamp(8px, 4.787234042553191%, 36px); /* 36 / 752 */ /* Frame 1171276620 is 165 tall: 125 selector + 8 gap + 32 "Most Picked" row. That 40px is reserved here so the tooltip has somewhere to sit. */ margin-bottom: 40px; } #simple-select-quiz .rb_carat_tile { position: relative; flex: 1 1 0; min-width: 0; max-width: 95.33333333px; /* Four tiles are 124 tall at y=249.5; the 1.5 and 2.5 tiles are 125 at y=249. The 0.5px offset is the designer's, and it is what makes the selector frame 125 rather than 124. */ /* ALL FOUR SCALE ON THE ROW'S WIDTH, so the 1.30 ratio holds instead of only the width shrinking. Each cqi figure is the board's px over the row's authored 752, so at 1728 every one of them resolves back to the frame exactly: 36 + 30 + 20 + 16 + 22 = 124. The clamp floors are the point at which the tile stops being a pill and becomes the <=991 treatment; they are taken from that sheet's 52 x 70. */ height: clamp(70px, 16.489361702127660cqi, 124px); /* 124 / 752 */ margin-top: 0.5px; padding: clamp(10px, 4.787234042553191cqi, 36px) 0 /* 36 / 752 */ clamp(8px, 2.925531914893617cqi, 22px); /* 22 / 752 */ display: flex; flex-direction: column; align-items: center; /* Centred rather than flow-from-top, so that at the narrow end -- where the fixed 40px 3.0ct disc genuinely cannot fit the pill any more -- the overflow is symmetrical instead of hanging out of the bottom. */ justify-content: center; gap: clamp(6px, 2.659574468085106cqi, 20px); /* 20 / 752 */ border: var(--rb-stroke) solid var(--rb-border-subtle); border-radius: 200px; background: transparent; cursor: pointer; } /* `carat button` 14465:39617 -- the 1.5ct tile is stroked #C2CEB2 at 1 with dashes [5, 5]. */ #simple-select-quiz .rb_carat_tile[data-carat="1.5"], #simple-select-quiz .rb_carat_tile[data-carat="2.5"] { /* SCALES WITH THE REST. Owner: *"at 1416 the carat buttons are weirdly long -- some are usual size, some are long. I want them all the same, how they are on normal desktop."* These two sit 0.5px higher than their neighbours on the board (124 at y249.5 against 125 at y249), so they carried their own fixed 125px. When the tile height became fluid the other four started tracking the row while these two stayed pinned, and the gap opened up as the column narrowed. MEASURED at 1416, row 603 wide: 0.5 / 1.0 / 2.0 / 3.0 99.4px (16.489% of 603) 1.5 / 2.5 125px <- pinned, 26px taller At the board's own 1728 the row is 752 and 16.489% resolves to 124, so the difference was invisible there and only showed on a narrower window. NO HEIGHT OF THEIR OWN AT ALL. Scaling them on their own 125/752 left a 1px difference at 1728 (125 against 124), and the owner asked for them identical -- that half-pixel is a Figma rounding artefact from the tile sitting at y249 against its neighbours' y249.5, not a drawn intent. The base rule's clamp now governs all six, so every tile is the same height at every width. `margin-top: 0` stays: it cancels the base rule's 0.5px nudge, which is the half-pixel, and keeps the row's tops flush. */ margin-top: 0; } /* strokeDashes [5, 5]. Same SVG-background construction as the mobile sheet (_stone.css) and for the same reason: `border-style: dashed` cannot carry a dash length -- Chromium picks its own, ~2px on a 1px border, which reads as a dotted hairline -- and the tile is a pill, so the repeating-gradient alternative would square its corners. No viewBox, so the dashes stay 5/5 as the tile flexes; stroke-width 2 on the box edge leaves a crisp 1px once the outer half clips; rx is clamped to half the shorter side. */ #simple-select-quiz .rb_carat_tile[data-carat="1.5"] { border-color: transparent; /* A PILL, INSET, AND SCALED WITH THE TILE. Owner: *"the dotted 1.5 carat one looks like an oval, can you fix the shape -- it's also cropped on the sides."* Both come from the same rect. It was drawn at width/height 100% with a FIXED `rx`/`ry`, sized for the tile's original box, and `x='0' y='0'` with a 2px stroke: * SVG clamps `rx` to half the width but leaves `ry` alone, so once the tile went fluid the two stopped matching -- at 1416 (76 x 99) the radii resolved to 38 and 47.5, which is an ELLIPSE, not a pill; * a 2px stroke centred on x=0 puts 1px of itself outside the viewport on every edge, which the box clips -- the "cropped on sides". A viewBox plus `preserveAspectRatio='none'` fixes the shape: the tile keeps its authored proportion at every width (MEASURED 76/99 = 0.768 against the board's 95.33/124 = 0.769), so rx and ry scale together and the stadium holds. The rect is inset by half the stroke so the whole stroke stays inside. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 124' preserveAspectRatio='none'%3E%3Crect x='1' y='1' width='94' height='122' rx='47' ry='47' fill='none' stroke='%23C2CEB2' stroke-width='2' stroke-dasharray='5 5'/%3E%3C/svg%3E"); background-origin: border-box; background-clip: border-box; background-repeat: no-repeat; background-size: 100% 100%; } /* `carat button` 14465:39609 -- fill #D8DDCA, stroke #27423B weight 2 align=OUTSIDE. `outline` reproduces an outside stroke without changing the 95 x 124 box the way a border would. */ /* ---- THE CROSSFADE ----------------------------------------------------- Requested: the tile you leave fades out while the one you pick fades in. Figma specifies nothing here -- `carat button` 14463:36224 reports `interactions: []`, as does every child -- so this is built to the ask, not to a board. Every property that differs between the two states is transitioned, so the old tile and the new one cross over instead of one snapping: the tile fill and its 2px selected outline, the disc slot, the disc itself and the label. 300ms rather than the builder's usual 260 because the ask was for slower; same curve, so it still belongs to the same motion language. Colours only. Nothing here touches layout, so the tiles cannot reflow mid-transition. */ #simple-select-quiz .rb_carat_tile { transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), border-color 300ms cubic-bezier(0.4, 0, 0.2, 1), outline-color 300ms cubic-bezier(0.4, 0, 0.2, 1); } #simple-select-quiz .rb_carat_disc { transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1); } #simple-select-quiz .rb_carat_disc::before { transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1); } #simple-select-quiz .rb_carat_val { transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { #simple-select-quiz .rb_carat_tile, #simple-select-quiz .rb_carat_disc, #simple-select-quiz .rb_carat_disc::before, #simple-select-quiz .rb_carat_val { transition: none; } } #simple-select-quiz .rb_carat_tile.is-selected { background: var(--rb-brand-sage); border-color: transparent; outline: 2px solid var(--rb-brand-green); outline-offset: 0; } /* Frame 1171276609 is a fixed 30x30 slot in every tile; the 2.5 and 3.0 discs (34 and 40) overflow it symmetrically, so the disc is drawn from the centre of a 30px slot and allowed to exceed it. */ #simple-select-quiz .rb_carat_disc { position: relative; display: block; flex: none; /* STAYS 30x30, deliberately -- see the note above: this slot is what holds the tile's layout steady while the disc inside it overflows symmetrically. Sizing it per carat pushed the 2.5 and 3.0 labels down out of their tiles (MEASURED). The light ring is drawn by `::after` below instead, which is out of flow and can be any size without moving anything. */ /* THE SLOT SCALES, THE DISC DOES NOT -- and that distinction is the whole reason this is safe. This box is pure layout: `::before` draws the real disc absolutely centred on it at `--rb-carat-d`, and 2.5ct (34) and 3.0ct (40) ALREADY overflow the 30px slot symmetrically by design. Shrinking the slot therefore moves no disc and changes no stone's apparent size -- it only lets the pill close up around them. The to-scale relationship between 13/16/21/24/34/40 is untouched. */ width: clamp(18px, 3.989361702127660cqi, 30px); /* 30 / 752 */ height: clamp(18px, 3.989361702127660cqi, 30px); /* round, because `.is-selected` fills it */ border-radius: var(--rb-radius-pill); } #simple-select-quiz .rb_carat_disc::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--rb-carat-d); height: var(--rb-carat-d); border-radius: var(--rb-radius-pill); background: var(--rb-grey-disabled); /* ABOVE the `::after` halo. Two positioned siblings with `z-index: auto` paint in DOM order, and `::after` comes second -- so without this the growing ring would cover the carat's own disc instead of opening out from behind it. See the z-index note on `::after`. */ z-index: 1; } /* Rectangle 144433742 sizes, tile by tile. */ #simple-select-quiz .rb_carat_tile[data-carat="1.0"] .rb_carat_disc { --rb-carat-d: 16px; } #simple-select-quiz .rb_carat_tile[data-carat="1.5"] .rb_carat_disc { --rb-carat-d: 21px; } #simple-select-quiz .rb_carat_tile[data-carat="2.0"] .rb_carat_disc { --rb-carat-d: 24px; } #simple-select-quiz .rb_carat_tile[data-carat="2.5"] .rb_carat_disc { --rb-carat-d: 34px; } #simple-select-quiz .rb_carat_tile[data-carat="3.0"] .rb_carat_disc { --rb-carat-d: 40px; } /* 0.5ct. The board draws this tile IN ITS SELECTED STATE -- filled slot plus a green dot -- and that was read here as "0.5 looks like this", baked on with `[data-carat="0.5"]`. So the first tile was permanently green and no other tile ever went green, whatever was selected. Measured: the dot read rgb(194,206,178) on 0.5 and rgb(208,208,208) on all five others, unchanged across every click. The selected treatment belongs on `.is-selected`, below. Its disc size is the one thing that IS per-tile, and 30px was the selected slot fill rather than a carat size -- it breaks the 16 / 21 / 24 / 34 / 40 progression that 1.0 through 3.0 follow. The board never shows 0.5 unselected, so 13 is taken from that progression (mobile runs 10 / 12 at the same two steps, i.e. 0.83x, and 16 x 0.83 = 13.3). */ #simple-select-quiz .rb_carat_tile[data-carat="0.5"] .rb_carat_disc { --rb-carat-d: 13px; } /* SELECTED -- the same two-part treatment the <=991 sheet already uses: the 30px slot fills sage-strong and the sized disc inside it turns green. */ /* GROWS FROM THE CENTRE ON CLICK. Owner: *"can we make animation like the lighter circle on click grows from center."* A background-colour fade was already here; this makes the shape itself arrive. Done with a `::after` layer rather than by animating the slot's own box: the slot's width and height set the dark disc's clearance above, and animating those would drag the disc's position with them. A pseudo-element is painted UNDER the disc (`z-index: -1` against a positioned parent) and scales from nothing, so the ring appears to open out from the centre while the disc itself never moves. Unselecting scales back down rather than cutting, because the same transition runs in reverse. */ #simple-select-quiz .rb_carat_disc::after { content: ""; position: absolute; /* THE LIGHT RING HAS TO CLEAR THE DARK DISC, and the slot it lives in cannot grow. `.is-selected` used to fill the 30px slot itself, while the dark disc inside runs 16 / 21 / 24 / 34 / 40 by carat -- so at 2.5ct (34) and 3.0ct (40) the dark disc is BIGGER than the light one and hides it completely. That is the owner's "in the larger carat sizes the bigger circle does not appear, I guess because of their dark circle size", and the same defect as the earlier "missing light-green bubbles on the 2.5 / 3.5 ct buttons". Out of flow and centred on the slot, so it can exceed 30 the same way the disc already does without touching the tile's layout: the disc plus a 12px ring, floored at the board's 30 so every tile at 2.0ct and below is unchanged. 2.5 -> 46, 3.0 -> 52, a constant 6px of ring at every carat. */ top: 50%; left: 50%; width: max(30px, calc(var(--rb-carat-d, 30px) + 12px)); height: max(30px, calc(var(--rb-carat-d, 30px) + 12px)); /* 0, NOT -1. Owner: *"the lighter circle is completely gone, that was supposed to be animated from inward -- the circle inside the swatch of carat"*. `z-index: -1` was meant to read as "under the dark disc". It does not mean that. `.rb_carat_disc` is `position: relative` with `z-index: auto`, so it creates NO stacking context -- a negative-z descendant is therefore painted in the nearest ANCESTOR stacking context, which puts it behind `.rb_carat_tile`'s own background. MEASURED on the selected 2.5ct tile: the ring computed 46x46, `opacity: 1`, `scale(1)`, background rgb(194,206,178) -- fully painted, and completely covered by the tile's `.is-selected` fill rgb(216,221,202). Both pseudos stay at or above 0 so they sit in front of that fill, and the stack between them is ordered explicitly below rather than left to DOM order (which would paint `::after` OVER the dark disc). */ z-index: 0; border-radius: var(--rb-radius-pill); background: var(--rb-brand-sage-strong); /* The -50% pair centres it; the scale is what animates. Both live in one transform so the growth is from the ring's own centre, not its corner. */ transform: translate(-50%, -50%) scale(0); opacity: 0; transition: transform 280ms cubic-bezier(0.2, 0.7, 0.3, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1); } #simple-select-quiz .rb_carat_tile.is-selected .rb_carat_disc::after { transform: translate(-50%, -50%) scale(1); opacity: 1; } @media (prefers-reduced-motion: reduce) { #simple-select-quiz .rb_carat_disc::after { transition: none; } } #simple-select-quiz .rb_carat_tile.is-selected .rb_carat_disc::before { background: var(--rb-brand-green); } #simple-select-quiz .rb_carat_val { display: block; font-family: var(--rb-font-body); font-weight: 400; /* Scaled on the same basis as the box around it. Without this the slot and the label are 46px of unshrinkable content in a pill that is trying to reach 70, and the label drops out of the bottom of it. 16 / 752. */ font-size: clamp(11px, 2.127659574468085cqi, 16px); line-height: 1; letter-spacing: var(--rb-ls-wide); color: var(--rb-text-secondary); white-space: nowrap; } #simple-select-quiz .rb_carat_tile.is-selected .rb_carat_val { color: var(--rb-brand-green); } /* "Most Picked" -- Group 1000004679 under the 1.5ct tile: Vector 435 9 x 4 at x=1205, y=382 fill/stroke #D8DDCA Tag 101 x 28 at x=1159, y=386 #D8DDCA, radius 13, pad 8/12 Title FG 400 16/12 ls -0.21 #27423B The row starts 8px under the 125-tall selector. The tag's centre is x=1209.5 while the tile's is x=1204, hence the 5.5px nudge. */ #simple-select-quiz .rb_carat_tile[data-carat="1.5"]::before { content: ""; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(calc(-50% + 5.5px)); width: 0; height: 0; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-bottom: 4px solid var(--rb-brand-sage); } #simple-select-quiz .rb_carat_tile[data-carat="1.5"]::after { content: "Most Picked"; position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(calc(-50% + 5.5px)); height: 28px; padding: 8px 12px; border-radius: 13px; background: var(--rb-brand-sage); font-family: var(--rb-font-body); font-weight: 400; font-size: 16px; line-height: 12px; letter-spacing: var(--rb-ls-tight); color: var(--rb-brand-green); white-space: nowrap; } /* =========================================================================== 5. HANDPICKED STONES (Frame 1171276102, 752 x 615 at y 462) AL:VERTICAL itemSpacing 21: Frame 1171276619 heading 752 x 46 at y 462 (gap 8) `stone options` 752 x 536 at y 529 (gap 8) ------------------------------------------------------------------------ */ #simple-select-quiz .rb_stones_head { /* `Customization` itemSpacing 48 between the carat block and this one. */ margin-top: 48px; background: var(--rb-surface-page-70); /* Frame 1171276102 fill; its #E4DED8 stroke is paint-hidden */ border-radius: var(--rb-radius-sm); } #simple-select-quiz .rb_stones_title { margin: 0; font-family: var(--rb-font-display); font-weight: 300; font-size: 24px; line-height: 19px; letter-spacing: var(--rb-ls-tight); text-transform: uppercase; /* case=UPPER on 14465:39640 */ color: var(--rb-text-primary); } #simple-select-quiz .rb_stones_sub { margin: 8px 0 0; /* Frame 1171276619 itemSpacing */ font-family: var(--rb-font-body); font-weight: 400; font-size: 18px; line-height: 19px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-primary); } /* --- the four stone rows ------------------------------------------------ The base sheet lays these out as a 2-up grid. The design is a single column of 752-wide rows, itemSpacing 8. */ #simple-select-quiz .ssq_all_stone_options { /* !important is load-bearing here, not laziness. simple-select.js writes an INLINE display on this element -- .css('display','grid') at js:1652/:1918/:1977, plus .show()/.hide() at js:660/:1612 which write display:block / display:none. An inline style beats any selector, so after the customer picked a stone and came back, the list re-rendered with the legacy grid and the rows stopped stacking. An author !important is the one thing that outranks an inline declaration. */ display: flex !important; flex-direction: column; gap: 8px; margin: 21px 0 0; /* Frame 1171276102 itemSpacing */ } /* #ssq_diamond_search is STONE-B (the advanced search) and is owned by redesign/_advanced-search.css. diamond-search.js shows/hides it with inline styles; nothing here changes its visibility, only its place in this flex column when it is open. */ #simple-select-quiz .ssq_all_stone_options > #ssq_diamond_search { order: 99; } /* `lab diamond` 14465:39644 -- 752 x 118, pad 18, fill #FFFFFF @ 0.7, stroke #E4DED8 at 1 INSIDE, radius 8, clipsContent. The card's own maths: 18 top + 99 (an 83 image row plus its 16px bottom padding and 1px #E4DED8 @ 0.4 rule) = 117 inside a frame FIXED at 118, so the design clips its own 18px bottom padding away and buries the rule under the card border. Reproduced as an 18 / 15 padding pair, which measures 118 with the 1px border and drops the rule that would not have been visible. */ #simple-select-quiz .ssq_all_stone_options > .ssq-simple-selection { padding: 18px 18px 15px; border: var(--rb-stroke) solid var(--rb-border-subtle); border-radius: var(--rb-radius-md); background: var(--rb-surface-card-70); overflow: hidden; cursor: pointer; } /* `lab diamond` 14465:39643 -- the selected row is stroked #27423B at 2.5 INSIDE. SPEC height is 158 because a 35px "Stone details" disclosure row sits between the image row and the bottom; that row has no markup node (the desktop markup's only equivalent, .stone_details_accordion, is .d-lg-none), so the selected card measures 118 like the rest. */ #simple-select-quiz .ssq_all_stone_options > .ssq-simple-selection.active { padding: 17px 17px 14px; border-width: 2.5px; border-color: var(--rb-brand-green); } /* A pass-through wrapper on two of the three card shapes. */ #simple-select-quiz .ssq_all_stone_options .ssq_stone_options { display: block; padding: 0; } /* `main info` -> Frame 1171276711: image 83.50920104980469 x 83, gap 16, then the info column; `pricing` is right-aligned with gap 52. */ #simple-select-quiz .ssq_all_stone_options .stone_option { display: grid; grid-template-columns: 83.50920104980469px minmax(0, 1fr); column-gap: 16px; align-items: start; justify-content: start; padding: 0; text-align: left; font-size: inherit; } #simple-select-quiz .ssq_all_stone_options .ssq_stone_image { width: 83.50920104980469px; height: 83px; max-width: none; } /* NORMALISE THE CATALOGUE THUMB INTO THE BOX. These images are WooCommerce product images, so their framing is whatever the catalogue happens to hold, not something the design controls. Measured on dev-0: the three diamonds are 300x300 stones sitting inset on white, but the gemstone's `Round-Lab-Emerald-300x300.jpg` is cropped tight to the stone, so under `object-fit: cover` it filled its frame edge to edge and read as a flat green disc beside three inset diamonds. `contain` plus a white ground and a small inset gives every image the SAME treatment whatever its crop: a tightly cropped stone is brought down to the inset the diamonds already have, and an image that already carries white margin is unchanged in character. This is a rendering fix -- the real remedy is a gemstone product image shot like the other three. */ #simple-select-quiz .ssq_all_stone_options .ssq_stone_image img { width: 100%; height: 100%; object-fit: contain; background: #FFFFFF; padding: 6px; box-sizing: border-box; border-radius: var(--rb-radius-sm); border: 0.5px solid var(--rb-border-subtle); transform: none; /* the base sheet scales unselected images 0.9 */ } /* The info column and the pricing column, placed by grid rather than moved: markup order is name, price, meta. */ #simple-select-quiz .ssq_all_stone_options .ssq_stone_text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 52px; /* `main info` itemSpacing */ row-gap: 0; align-content: start; /* 19 title + 6 + 19 meta + 12 + 27 pill = 83, matching the image beside it. `min-` rather than a fixed height so the meta line may wrap to two rows at narrow desktop widths instead of being clipped by the card. */ min-height: 83px; } #simple-select-quiz .ssq_all_stone_options .ssq_stone_text .ssq_type { grid-column: 1; grid-row: 1; margin: 0; font-family: var(--rb-font-body); font-weight: 400; font-size: 18px; line-height: 19px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-primary); } /* The legacy carat node -- collapsed for the same reason as at <=991 (simple-select.js:2478 rewrites it by class on every slider update). p.rb_stone_subline carries "0.50 Carat • F Color • VS2 " instead. Kept as a zero-height, hidden but real box; never display:none. */ #simple-select-quiz .ssq_all_stone_options .ssq_stone_text .ssq_simple_size { grid-column: 1; grid-row: 2; height: 0; margin: 0; overflow: hidden; visibility: hidden; } /* 14465:39651 sub-line -- desktop type step 14/19 -> 16/19. */ #simple-select-quiz .ssq_all_stone_options .ssq_stone_text .rb_stone_subline { grid-column: 1; grid-row: 2; margin: 6px 0 0; /* Frame 1171276104 itemSpacing */ 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-95); } /* `pricing` 14465:39652 -- "+ $1,980" FG 400 18/19, right aligned, over "$2,660 total" FG 400 16/19 #3E3C39 @ 0.95. The second line now HAS a node (p.rb_stone_total_price, added with the row markup), so the price stops spanning the three rows and sits on row 1 with the total beneath it. */ #simple-select-quiz .ssq_all_stone_options .ssq_stone_text .details_display_price { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; margin: 0; font-family: var(--rb-font-body); font-weight: 400; font-size: 18px; line-height: 19px; letter-spacing: var(--rb-ls-tight); text-align: right; color: var(--rb-text-primary); white-space: nowrap; } /* 14465:39655 -- 2px under the delta price (`pricing` itemSpacing 2; the column's own row-gap is 0 here, so state it as a margin). */ #simple-select-quiz .ssq_all_stone_options .ssq_stone_text .rb_stone_total_price { grid-column: 2; grid-row: 2 / span 2; align-self: start; justify-self: end; margin: 2px 0 0; font-family: var(--rb-font-body); font-weight: 400; font-size: 16px; line-height: 19px; letter-spacing: var(--rb-ls-tight); text-align: right; color: var(--rb-text-secondary-95); white-space: nowrap; } #simple-select-quiz .ssq_all_stone_options .ssq_stone_text .rb_stone_total_price:empty { display: none; } /* "Popular Choice" -- Frame 1171276103, 113 x 27, #142037, radius 12, pad 4/9, label FG 400 16/19 #FAF3ED. It is a static badge on the Lab Diamond row (the first row PHP prints), not a selection affordance, so it is bound to that row rather than to .active. */ #simple-select-quiz .ssq_all_stone_options > .simple_diamond:first-child .ssq_stone_text::after { content: "Popular Choice"; grid-column: 1; grid-row: 3; justify-self: start; margin-top: 12px; /* `info 1171276101` itemSpacing */ height: 27px; padding: 4px 9px; border-radius: 12px; background: var(--rb-ink-navy); font-family: var(--rb-font-body); font-weight: 400; font-size: 16px; line-height: 19px; letter-spacing: var(--rb-ls-tight); color: var(--rb-surface-page); } /* The base sheet turns every

on the active card jade; the design keeps the selected row's ink identical to the others. */ #simple-select-quiz .ssq_all_stone_options > .ssq-simple-selection.active p.ssq_type, #simple-select-quiz .ssq_all_stone_options > .ssq-simple-selection.active p.details_display_price { color: var(--rb-text-primary); } #simple-select-quiz .ssq_all_stone_options > .ssq-simple-selection.active p.rb_stone_subline, #simple-select-quiz .ssq_all_stone_options > .ssq-simple-selection.active p.rb_stone_total_price { color: var(--rb-text-secondary-95); } #simple-select-quiz .ssq_all_stone_options > .ssq-simple-selection.active p.ssq_simple_size { height: 0; visibility: hidden; } /* --- the selected row: collapsed 158 / expanded 386 ---------------------- Component set 14465:40711 holds both as variants of ONE card: collapsed 14465:40765 752 x 158, clipsContent:true expanded 14465:40712 752 x 386, clipsContent:false Figma's own arithmetic, reproduced rather than rounded: 18 (padTop) + 99 (main info) + 35 (disclosure) + 18 (padBottom) = 170 of content in a frame PINNED to 158 -- the card clips 12px of itself, exactly as the mobile card clips 2 (see _stone.css section 6b). Open: 18 + 99 + 35 + 212 (panel at card-rel y 152) + 18 = 382. The component declares 386; the 4px is slack in the variant's fixed height, the same kind of slack the mobile master carries (365 vs 354), so the card hugs to 382 rather than being padded out to a number no child accounts for. Growth is +228 either way (CHECKLIST 103). Markup contract is the one _stone.css documents -- the same per-row .rb_stone_details skeleton, server-rendered on every row. ------------------------------------------------------------------------ */ #simple-select-quiz .ssq_all_stone_options { interpolate-size: allow-keywords; } #simple-select-quiz .ssq_all_stone_options > .ssq-simple-selection.active { /* Full 18px padding on all four sides now that a disclosure row occupies the bottom of the card; the 15px variant above exists only because the unselected card has nothing under its image row. 18 - 2.5 border. */ padding: 15.5px; height: 158px; overflow: hidden; /* clipsContent:true */ transition: height 260ms cubic-bezier(0.4, 0, 0.2, 1); } #simple-select-quiz .ssq_all_stone_options > .ssq-simple-selection.active.rb_details_open { height: auto; overflow: visible; } /* `main info` 14465:40766 -- 716 x 99: the 83-tall image row, 16px of bottom padding, and the 1px #E4DED8 @ 0.40 rule drawn INSIDE the bottom edge. */ #simple-select-quiz .ssq_all_stone_options > .ssq-simple-selection.active .ssq_stone_options { box-sizing: border-box; height: 99px; padding: 0 0 15px 0; border-bottom: var(--rb-stroke) solid rgba(228, 222, 216, 0.40); } /* --- disclosure row 14465:40775 -- 716 x 35 ----------------------------- Present on the selected card only (CHECKLIST 108: the other rows are 118 and own no disclosure). On those the wrapper is collapsed to zero height, never display:none -- simple-select-redesign.js renders into .rb_stone_specs on every row regardless of which one is selected. */ #simple-select-quiz .ssq_all_stone_options .rb_stone_details { height: 0; overflow: hidden; /* GROW, DO NOT SNAP. Measured frame-by-frame on dev-0: clicking a row took it from 118 to 169 in a SINGLE frame and then eased back down to 158 over ~250ms -- a hard jump followed by a slow shrink, which is what reads as the card "suddenly becoming big" and then jittering. The jump was this wrapper: `height: 0 -> auto` with no transition on it, while the panel INSIDE it carries one. `interpolate-size: allow-keywords` is already on `.ssq_all_stone_options`, so the keyword interpolates and the same 260ms curve the panel and the chevron use applies here too. */ transition: height 260ms cubic-bezier(0.4, 0, 0.2, 1); visibility: hidden; } #simple-select-quiz .ssq_all_stone_options > .ssq-simple-selection.active .rb_stone_details { height: auto; overflow: visible; visibility: visible; } #simple-select-quiz .ssq_all_stone_options .rb_stone_disclosure { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; width: 100%; height: 35px; margin: 0; padding: 0; background: none; border: 0; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; } #simple-select-quiz .ssq_all_stone_options .rb_stone_disclosure_label { 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); text-transform: none; } /* 14465:40778 -- a 30x30 target flush with the card's 18px padding, holding a 12x6 vector stroked #3E3C39 at 1.5, offset 3px in from the target's left edge (the frame's -pi rotation, undone by the vector's own -- see the mobile sheet). Both desktop variants flip it 180deg on open. */ #simple-select-quiz .ssq_all_stone_options .rb_stone_chevron { display: flex; align-items: center; justify-content: flex-start; flex: 0 0 30px; box-sizing: border-box; width: 30px; height: 30px; padding-left: 3px; color: var(--rb-text-secondary); } #simple-select-quiz .ssq_all_stone_options .rb_stone_chevron svg { display: block; width: 12px; height: 6px; transform: rotate(0deg); transform-origin: 50% 50%; transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1); } #simple-select-quiz .ssq_all_stone_options .rb_stone_details.is-open .rb_stone_chevron svg { transform: rotate(180deg); } /* --- spec panel Frame 1171276141 -- 707 x 212 at card-rel (18, 152) ------ Authored sizing=FIXED at w=707 inside a 716 content box: deliberately 9px narrower than the `main info` row above it, with nothing in the 9px. The 707 is honoured rather than let the panel fill, because every spec value column is derived from it (value box 532, Certificate 524) and filling widened all of them by 10. max-width keeps it from overflowing the card below 1728, where the column is narrower than 707. VERTICAL gap 6. */ #simple-select-quiz .ssq_all_stone_options .rb_stone_panel { display: flex; flex-direction: column; gap: 6px; width: 707px; max-width: 100%; height: 0; overflow: hidden; transition: height 260ms cubic-bezier(0.4, 0, 0.2, 1); } /* ...and the rest of the selection gesture, on the same curve. The wrapper transition above fixed the 51px snap, but a 16px jump survived it -- measured at t=12ms, before the wrapper had moved at all. That one is NOT the details panel: on `.active` the row's own padding goes 18/15 -> 15.5, its border 1px -> 2px, and `.ssq_stone_options` gains `padding-bottom: 15px`. All three are concrete lengths, so unlike a content-driven `height: auto` they interpolate directly -- no `interpolate-size` needed and no layout thrash. Transitioning them is what turns "snap, then grow" into one motion. */ #simple-select-quiz .ssq_all_stone_options > .ssq-simple-selection { transition: padding 260ms cubic-bezier(0.4, 0, 0.2, 1), border-width 260ms cubic-bezier(0.4, 0, 0.2, 1), border-color 260ms cubic-bezier(0.4, 0, 0.2, 1), background-color 260ms cubic-bezier(0.4, 0, 0.2, 1); } #simple-select-quiz .ssq_all_stone_options .ssq_stone_options { transition: padding 260ms cubic-bezier(0.4, 0, 0.2, 1); } #simple-select-quiz .ssq_all_stone_options .rb_stone_details.is-open .rb_stone_panel { height: auto; overflow: visible; } /* 707 x 190, gap 4 -- the same 190 as mobile: the type is a size up but the row boxes are not (CHECKLIST 105/107). */ #simple-select-quiz .ssq_all_stone_options .rb_stone_specs { display: flex; flex-direction: column; gap: 4px; } #simple-select-quiz .ssq_all_stone_options .rb_stone_spec { display: flex; align-items: flex-start; gap: 8px; min-height: 24px; } /* Certificate is 22 in the file where every other row is 24; keyed off the data attribute so it stays with the row when a stone type ships a different set. 24*6 + 22 + 4*6 = 190. */ #simple-select-quiz .ssq_all_stone_options .rb_stone_spec[data-rb-spec="Certificate"] { min-height: 22px; padding-right: 8px; } /* Label column 167 wide; value origin at panel x 175 (CHECKLIST 106). */ #simple-select-quiz .ssq_all_stone_options .rb_stone_spec_label { flex: 0 0 167px; width: 167px; 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); text-transform: none; } #simple-select-quiz .ssq_all_stone_options .rb_stone_spec_value { flex: 1 1 auto; min-width: 0; font-family: var(--rb-font-body); font-weight: 400; font-size: 16px; line-height: 22px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-primary); text-transform: none; } /* 14465:40817 -- 478 x 16, ONE line at 16/16 (mobile wraps to two at 14/16). Empty for moissanite and gemstone, whose data-details carries no caveat; :empty drops the node and its 6px gap rather than leaving a 16px hole. */ #simple-select-quiz .ssq_all_stone_options .rb_stone_caveat { margin: 0; font-family: var(--rb-font-body); font-weight: 400; font-size: 16px; line-height: 16px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-secondary); text-align: left; } /* The one display:none in this block, and the one case the "never hide what JS reads" rule allows: :empty matches only while the node has NO text, and simple-select-redesign.js reaches it with .text(), a setter that works on a hidden node and re-shows it the moment it writes a caveat. */ #simple-select-quiz .ssq_all_stone_options .rb_stone_caveat:empty { display: none; } @media (prefers-reduced-motion: reduce) { #simple-select-quiz .ssq_all_stone_options > .ssq-simple-selection.active, #simple-select-quiz .ssq_all_stone_options .rb_stone_panel, #simple-select-quiz .ssq_all_stone_options .rb_stone_chevron svg { transition: none; } } /* --- "Choose This Stone" / "Browse More" ------------------------------- The design puts BOTH the primary CTA (14465:39875, 282 x 48 at x 1366, right edge 1648) and the "Advanced lab diamond search" link (14465:39874, 212 x 19 at x 1118) in the fixed footer's right-hand `CTAs` cluster -- 530 wide, itemSpacing 36 -- and the markup has neither of them there: both live in `.ssq_all_stone_confirmations` inside the right column. `.ssq_finalize_button` is load-bearing (it is how a stone is committed) so the markup is not touched; instead the whole two-item cluster is lifted out of the column and pinned into the footer band, which is the one thing CSS can do here without a template change. It stays a descendant of #ssq_select_stone, so it appears and disappears with the stone step for free -- simple-select.js drives that via .active/display on the slide, and a fixed box inside a display:none ancestor is not rendered. DOM order is [CTA][browse_more][link]; the design reads [link][CTA], so the row is reversed rather than reordered item by item. `.browse_more`'s wrapper is out of flow (below), so the flex line holds exactly two items and spends exactly one 36px gap. */ #simple-select-quiz .ssq_all_stone_confirmations { display: flex; flex-wrap: wrap; flex-direction: row-reverse; /* -> [link] 36 [CTA], CTA against the gutter */ justify-content: flex-start; /* main-start is the RIGHT edge here */ align-items: center; gap: 36px; /* `CTAs` itemSpacing */ margin: 0; grid-template-columns: none; /* `CTAs` 14465:39868 is 1568 wide at x 80 -- the same box .sss-nav below resolves to -- so the cluster's right edge tracks that, not the column's 1646 edge. At 1728: max(80, (1728-1568)/2) = 80 -> right edge 1648. */ position: fixed; left: auto; right: max(var(--rb-d-page-gutter), calc((100% - var(--rb-d-content-max)) / 2)); /* Footer band is 120 tall (border-box, 1px top rule), fixed to the viewport bottom, padded 28px at the top, and .sss-nav is the 53px row inside it. The 48px CTA is centred in that row, which is what puts it on the same centre line as Back and the price stack: 120 - 1 - 28 - (53 - 48)/2 - 48 = 40.5. */ /* 24, not 28: the band's top padding came down with its height, and this offset is derived from it -- 100 - 1 - 24 - 2.5 - 48 = 24.5. */ bottom: calc(var(--rb-d-footer-h) - var(--rb-stroke) - 24px - 2.5px - 48px); width: auto; /* Holds the 48px CTA row height even when simple-select.js has hidden the finalize button, so the link keeps the CTA's centre line either way. */ min-height: 48px; /* simple-select.css:546 gives .ssq_bottom_nav z-index 99. */ z-index: 100; } /* HANDPICKED STATE. simple-select.js:1595-1598 hides the finalize button's

and shows `.sss-next` in the footer -- the footer's own Primary CTA then occupies the x1366 slot. jQuery .hide() writes `display: none` into the style attribute, the same reachable hook the drawer rules use, so the cluster steps left by one CTA slot (282 + 36) and the link keeps its 36px gap to whichever primary is showing instead of landing on top of it. */ #simple-select-quiz .ssq_all_stone_confirmations:has( > p[style*="display: none"] .ssq_finalize_button) { right: calc(max(var(--rb-d-page-gutter), (100% - var(--rb-d-content-max)) / 2) + 282px + 36px); } /* DEFAULT STATE -- the other half of the same switch, and a real collision. simple-select.js hides `.sss-next` on entering the stone step (:1512) and then shows it again at :1668, in the `else` branch that runs whenever NO stone has been chosen yet -- i.e. the state the customer actually lands on. `.ssq_finalize_button` is showing there too (:2383 shows its

; only the handpicked branch at :1595 hides it), so the two 282 x 48 primaries land on the SAME box: both measured (1366, 991.5) at 1728, bounding boxes overlapping, with this cluster's z-index 100 painting `Choose This Stone` over a `CONTINUE TO RING SIZE` that stayed focusable and screen-reader visible underneath. `CTAs` 14465:39868 has exactly one primary in that slot, so one of the two has to leave it. The footer's own `.sss-next` is the one that yields, because it is the duplicate here: `.ssq_finalize_button` is the control that actually commits the stone (simple-select.js:1413) and the design's slot is the one this cluster is pinned into. It is parked the way section 9 parks every other node a script reads -- visibility:hidden plus a zero box, never display:none -- so jQuery's own .show()/.hide() and any `:visible` read still behave, the node keeps its layout identity, and it leaves both the tab order and the accessibility tree while it is covered. The moment simple-select.js hides the finalize

(handpicked), this stops matching and `.sss-next` is the footer's primary again -- which is exactly the state the rule above steps the cluster left for. */ /* ...EXCEPT while the stone panel owns the right column. On 2.2 and 2.4 the whole `.ssq_all_stone_confirmations` cluster is out of the layout, so there is no second primary to collide with and the footer CTA IS the design's one primary -- `ADD TO RING` (14468:44551) on 2.2, `CONTINUE TO RING SIZE` (14468:41915) on 2.4. Without this guard the :has() above still matched (the

carries no inline display; its hidden ANCESTOR does) and the CTA stayed parked at 0x0, which is what measured [1648,1036,0,0] in the pdp state. */ #simple-select-quiz:not(.rb-stone-panel):has(#ssq_select_stone.active .ssq_all_stone_confirmations > p:not([style*="display: none"]) > .ssq_finalize_button) .ssq_bottom_nav .sss-next { visibility: hidden; width: 0; height: 0; min-width: 0; padding: 0; border: 0; overflow: hidden; pointer-events: none; } #simple-select-quiz .ssq_all_stone_confirmations > p { margin: 0; min-width: 0; } #simple-select-quiz .ssq_all_stone_confirmations .ssq_finalize_button { display: flex; align-items: center; justify-content: center; width: 282px; /* Primary CTA 14465:39875 is 282 x 48 */ max-width: 100%; height: 48px; padding: 14px 0; border-radius: var(--rb-radius-sm); background: var(--rb-brand-green); font-family: var(--rb-font-body); font-weight: 400; font-size: 18px; line-height: 19px; letter-spacing: var(--rb-ls-tight); text-transform: uppercase; text-decoration: none; color: var(--rb-surface-page); gap: 5px; } /* THE ARROW IS ON THIS CTA AT EVERY WIDTH. Owner: *"on desktop, on the stone slide, Continue to Ring Size is missing its arrow in the bottom bar CTA."* 14463:33712 draws it on the mobile board and _stone.css carries it; that file is `@media (max-width: 991px)`, so the desktop twin simply never had one. The desktop board gives the CTA as a plain 282x48 label (14465:39875) and says nothing either way about the glyph -- but it is the same control doing the same thing one breakpoint up, and a control that grows an affordance on a phone and loses it on a laptop reads as a bug, which is how it was reported. Same asset, same 12x10 box, same 5px gap. */ #simple-select-quiz .ssq_all_stone_confirmations .ssq_finalize_button::after { content: ""; flex: none; width: 12px; height: 10px; background: url('../../../assets/media/ringbuilder/icon-arrow-right-on-cta.svg') no-repeat center / 12px auto; } /* .browse_more keeps its metrics but not the slot — see _stone.css. Its

is out of flow here too, so the flex line never spends a 36px gap on it. */ #simple-select-quiz .ssq_all_stone_confirmations .browse_more { display: inline-block; width: auto; height: auto; padding: 0; border: 0; background: none; font-family: var(--rb-font-body); font-weight: 400; font-size: 18px; line-height: 19px; letter-spacing: var(--rb-ls-tight); text-decoration: underline; color: var(--rb-brand-green); } /* Restated, not inherited: _stone.css is capped at 991 so the mobile out-of-flow rule does not reach here. Without it the wrapper eats a 36px flex gap and wraps the real link onto a third line. */ #simple-select-quiz .ssq_all_stone_confirmations > p:has(.browse_more) { position: absolute; left: -9999px; top: 0; width: auto; height: auto; margin: 0; } /* 14465:39874 — the desktop link sits in the footer CTA cluster as a plain 212-wide text link, so the 346x28 mobile tap frame is dropped: hug the label and let the 36px flex gap do the spacing. Type steps 16/19 -> 18/19. */ #simple-select-quiz .ssq_all_stone_confirmations p.rb_adv_search_row { display: inline-flex; width: auto; height: auto; padding: 0; border-radius: 0; } #simple-select-quiz .ssq_all_stone_confirmations .rb_adv_search_link, #simple-select-quiz .ssq_all_stone_confirmations .rb_adv_search_link:hover, #simple-select-quiz .ssq_all_stone_confirmations .rb_adv_search_link:focus, #simple-select-quiz .ssq_all_stone_confirmations .rb_adv_search_link:visited { font-size: 18px; line-height: 19px; letter-spacing: var(--rb-ls-tight); text-decoration: underline; color: var(--rb-brand-green); } /* =========================================================================== 6. FOOTER (Footer 14465:39867, 1728 x 120 at y 1120) pad 28/80/10/80, fill #FAF3ED, 1px #E4DED8 top border. `CTAs` 14465:39868 -- 1568 x 53 at x=80, SPACE_BETWEEN, itemSpacing 36: price stack x 80 w 607.5 h 53 right cluster x 1118 w 530 h 48 link x 1118 w 212 Primary CTA x 1366 w 282 h 48 ------------------------------------------------------------------------ */ /* 100 TALL, 24 OF PADDING. Owner, with the bar boxed and a DevTools crop of his own edit: *"the bottom bar everywhere in general on desktop looks a little wide -- I adjusted it, check the attached image for the height and padding. Do this carefully, without messing up buttons and alignment."* His values: height 100, padding 24. MEASURED before, identically on all three surfaces: 120 tall, padding 28/10 top and bottom. The HORIZONTAL padding is deliberately NOT changed to 24 -- 4.6296296296% is the page gutter (80px at 1728) and it is what keeps the CTA's right edge on the same line as the panel above it. A flat `padding: 24px` would have pulled the button 56px further right, which is exactly the alignment he asked me not to disturb. */ #simple-select-quiz .ssq_bottom_nav { height: var(--rb-d-footer-h); padding: 24px 0; border-top: var(--rb-stroke) solid var(--rb-border-subtle); background: var(--rb-surface-page); } #simple-select-quiz .ssq_bottom_nav .sss-nav { width: min(var(--rb-d-content-max), 100% - (2 * var(--rb-d-page-gutter))); margin-inline: auto; height: 53px; align-items: center; gap: 36px; } /* Frame 1171276719 -- "Current Est." FG 400 16/19 #3E3C39 over "$1,660" Canela 300 28/19 #0F0E0D, itemSpacing 8. COPY MISMATCH, not fixable from CSS: the markup's label reads "Your Setting", the design's reads "Current Est.". */ /* The markup puts a bare ` ` between and . In a flex or grid column that text becomes an anonymous item and adds a third row, so the stack is built from block children with the paragraph's own font-size and line-height zeroed -- that collapses the stray text node to nothing while and restore their own. 19 + 8 + 26 = 53. */ #simple-select-quiz .ssq_bottom_nav p.setting_total { order: 2; display: block; margin: 0 auto 0 0; font-size: 0; line-height: 0; } #simple-select-quiz .ssq_bottom_nav p.setting_total > strong { display: block; 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); } /* ---- 2.2's FOOTER LEFT CLUSTER -- 14468:44544 ------------------------- The stone-details footer is NOT "Your Setting $1,780". Board 14468:44544 is a 1728 x 120 bar, padding 80/28/80/10, holding `Frame 1171276719` at local (80,28) -- "Current Est." (74x19) stacked over "$1,660" (80x26) -- and the Primary CTA 282x48 at local x1366. MEASURED on dev-0 at 1728: the CTA already lands at [1366,812] in a [0,780,1728,120] bar, and the left slot is at [80,809,76,53] -- right place, right size, WRONG CONTENT. It was showing the SETTING price ($1,780) where the board shows the RUNNING TOTAL ($2,490). `p.full_total` already holds that number and simple-select.js keeps it current, so it is shown here rather than rewriting `.ssq_nav_setting_total` -- one source of truth for the total instead of two spans to keep in step. The geometry is the setting_total stack above, reused verbatim: 19 + 8 + 26 = 53. Visibility is flipped from JS, not from here: both paragraphs carry inline `display` written by simple-select.js, which outranks any rule at this weight. */ #simple-select-quiz.rb-stone-pdp .ssq_bottom_nav p.full_total { order: 2; display: block; margin: 0 auto 0 0; font-size: 0; line-height: 0; } #simple-select-quiz.rb-stone-pdp .ssq_bottom_nav p.full_total > strong { display: block; 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); } #simple-select-quiz.rb-stone-pdp .ssq_bottom_nav p.full_total > span.ssq_full_total { display: block; margin: 8px 0 0; font-family: var(--rb-font-display); font-weight: 300; font-size: 28px; line-height: 26px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-primary); } #simple-select-quiz .ssq_bottom_nav p.setting_total > span.ssq_nav_setting_total { display: block; margin: 8px 0 0; /* Frame 1171276719 itemSpacing */ font-family: var(--rb-font-display); font-weight: 300; font-size: 28px; /* SPEC reports lineHeightPx 19 on a node that is 26 tall (y 1175..1201). 26 is what makes the stack 53, so the box wins and the 19 is recorded. */ line-height: 26px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-primary); } /* Primary CTA 14465:39875 -- 282 x 48, #27423B, radius 4, pad 14/0, label FG 400 18/19 UPPER #FAF3ED, trailing 12px arrow stroked 1.25. */ #simple-select-quiz .ssq_bottom_nav .sss-next { order: 3; display: flex; align-items: center; justify-content: center; /* 8, not the board's 5. The label is all-caps and the trailing glyph is a small 12px mark, so at 5 the two read as one clump -- measured, the text ends at x179.4 and the glyph starts at 184.5 inside a 282-wide button with 111px of content in it: centred, but crowded. The extra 3px is the whole change; the content stays centred because the gap is inside the flex centre, not a margin on one side. */ gap: 8px; width: 282px; height: 48px; padding: 14px 0; border-radius: var(--rb-radius-sm); background: var(--rb-brand-green); font-family: var(--rb-font-body); font-weight: 400; font-size: 18px; line-height: 19px; letter-spacing: var(--rb-ls-tight); text-transform: uppercase; color: var(--rb-surface-page); } #simple-select-quiz .ssq_bottom_nav .sss-next svg { width: 12.00016975402832px; height: auto; /* OPTICAL, not geometric. `align-items: center` centres the glyph on the LINE BOX, which includes descender space the all-caps label never uses -- so a mark centred that way sits visibly low against the caps. Measured: label box 13.5..34.5 (cap ink ~16..30), glyph 17..31. Lifting it 1px puts the glyph's centre on the cap-height centre instead of the line-box centre, which is what the eye reads as aligned. */ margin: 0 0 1px; } #simple-select-quiz .ssq_bottom_nav .sss-next svg path { stroke: var(--rb-surface-page); stroke-width: 1.25; } /* The footer's "Advanced lab diamond search" link (14465:39874) and its Primary CTA are supplied by `.ssq_all_stone_confirmations`, pinned into this band from the right column -- see §5. `order` could not do it (a different flex parent), so the cluster is positioned instead. */ /* =========================================================================== 7. STATES THE THREE STONE FRAMES SHARE A and C draw the same right column and the same footer, so §4-§6 serve both. The two collapsed drawer stubs A carries (Frame 1171276585 clipped to h=40 and Frame 1171276717 clipped to h=48, both at x=70 y=769) are the SELECT YOUR METAL / SELECT YOUR SHAPE drawers in their closed state; they sit exactly under the summary pills and render nothing. Their open states are separate frames (Select metal 14465:38713, Select Shape 14465:38995, Select gemstone 14465:39286) and are out of scope for this file. Both A and C carry the `black mask` scrim at node opacity 0.0, i.e. off. ------------------------------------------------------------------------ */ /* =========================================================================== 8. HOVER / FOCUS The board defines one hover: Back and EXIT each swap to a Variant2 whose fill is #FFFFFF (Back also restrokes its chevron #3E3C39). Nothing else on the STONE frames has an interaction that changes paint, so nothing else gets a hover here. ------------------------------------------------------------------------ */ #simple-select-quiz .rb_back:hover { background-color: var(--rb-surface-card); } #simple-select-quiz .close_ssq:hover { background: var(--rb-surface-card); } /* The glyph is drawn, so hover recolours the bars rather than an fill. */ #simple-select-quiz .close_ssq:hover::before, #simple-select-quiz .close_ssq:hover::after { background: var(--rb-text-secondary); } /* =========================================================================== 9. PARKED, NOT REMOVED Every node below is read or written by simple-select.js / diamond-search.js and therefore must keep a layout identity. None of them is `display:none`; each is `visibility: hidden` with a zero box so it still measures, still answers querySelector, and still takes a programmatic click. ------------------------------------------------------------------------ */ /* #carat-slider-quiz IS the source of truth for carat weight -- the tiles in §4 call quizSlider.noUiSlider.set() on it and every existing pricing and image handler is bound to its update event. It has no visual counterpart in the desktop design. .carat-filters is its wrapper. */ #simple-select-quiz .simple-quiz-carat-filter .filter_row.carat-filters { visibility: hidden; width: 100%; height: 0; margin: 0; overflow: hidden; } #simple-select-quiz #carat-slider-quiz { height: 0; } /* " Carats" readout -- simple-select.js writes #active_carat_quiz. */ #simple-select-quiz p.active_carat_quiz_container { visibility: hidden; float: none; width: 100%; height: 0; padding: 0; margin: 0; border: 0; overflow: hidden; } /* The old carat copy line and the "Compare Weights" trigger. .rb_true_size_link proxies its click to .carat_video, so the trigger must stay clickable -- hence a zero box rather than removal. */ #simple-select-quiz .filter_heading > p:nth-of-type(2), #simple-select-quiz .filter_heading > p:nth-of-type(3), #simple-select-quiz .filter_heading .carat_video { visibility: hidden; position: absolute; width: 0; height: 0; margin: 0; overflow: hidden; } /* The step message. simple-select.js drives it with .show()/.hide() (inline display) and rewrites its text per step; STONE has no such line in the design. Parked rather than hidden so the inline display it toggles keeps working. */ #simple-select-quiz .quiz_options > .desktop-message.ssq-message { visibility: hidden; height: 0; margin: 0; overflow: hidden; } /* Back: the design's footer has no back control; .rb_back in the header proxies to this element, and simple-select.js binds it directly (not by delegation), so it must stay in the DOM and clickable. Its `.rb_back` handler falls back to $('.sss-prev').first() when :visible finds nothing. */ #simple-select-quiz .ssq_bottom_nav .sss-prev { order: 1; visibility: hidden; width: 0; height: 0; padding: 0; margin-right: -36px; /* cancels its share of the row's 36px gap so the price stack still starts on x=80 */ overflow: hidden; } /* =========================================================================== 10. KNOWN GAPS -- recorded, not papered over - FoundersGrotesk Medium. The design uses weight 500 for "Ring Details", "Current Est. $1,660" and the active tab label. assets/fonts ships FoundersGrotesk-Medium.otf but main.css registers only the Regular face, so `font-weight: 500` above resolves to Regular. Adding an @font-face here would change every weight-500/700 lookup on the site at desktop widths, which is out of this file's scope -- it belongs in main.css. - Values the desktop SPEC does not give, and which are therefore not invented anywhere above: any focus-visible treatment; any behaviour above 1728px beyond the 1568 content cap; the .ssq_all_stone_confirmations block (no counterpart on the board -- see §5). ========================================================================= */ /* The base sheet crops the ring: simple-select.css:798-801 sets `.sss-metal-image img { object-fit: cover }` with no breakpoint, so it lands here too. Figma's scaleMode is FILL, but that is only true of the mock's placeholder, which is drawn to fit the box exactly. Real product photographs have a different aspect ratio and `cover` cut the ring off. Show all of it. */ #simple-select-quiz .quiz-image > .sss-metal-image img { object-fit: contain; } } /* ============================================================================= 2.2 / 2.4 STONE PANEL STATES — DESKTOP (>=992px) 2.2 STONE DETAILS 14468:44399 (Customization column 14468:44400) 2.4 BACK TO STONE STEP 14468:41807 (Customization column 14468:41822) WHAT WAS WRONG, MEASURED ON DEV-0 AT 1728x1100 ---------------------------------------------- After Add to Ring the right column still rendered the four `.ssq-simple-selection` stone-type cards at x=894, y 529 / 695 / 821 / 947, each 752 wide, under `h3.rb_stones_title` "HANDPICKED STONES" at (894,462), with `.ssq_picked_selection.preview_stone` pushed BELOW them at [894,1065,752,321] and `#ssq_select_stone` grown 871 -> 1192 tall. The board puts `14468:41822` there instead: 618 x 659 at (1030,194), right edge 1648. That is the customer's complaint, and it is what this section fixes. WHY THE EXISTING `.hide()` CALLS NEVER WORKED --------------------------------------------- diamond-search.js has hidden `.ssq_all_stone_options` and `.simple-quiz-carat-filter` on the pdp path since long before this pass. Both are pinned `display: flex !important` above (sections at lines ~697 and ~970) to beat the INLINE display simple-select.js writes. An author `!important` also beats jQuery's `.hide()`, so those hides have been inert. The fix is NOT to weaken those rules — they are load-bearing — but to add a state-scoped rule of HIGHER specificity: `#simple-select-quiz.rb-stone-panel` is two classes on the id element against the one class the base rules use, so it wins, and with the state class absent nothing changes at all. HARNESS trap 7 is respected: `display` here is never set on a node whose state machine we do not also drive — the class is written only by the stone-flow block at the foot of diamond-search.js, in the same transitions that call `.hide()`. ============================================================================= */ @media (min-width: 992px) { /* --- the right column becomes the stone panel --------------------------- */ #simple-select-quiz.rb-stone-panel .ssq_all_stone_options, #simple-select-quiz.rb-stone-panel .simple-quiz-carat-filter, #simple-select-quiz.rb-stone-panel .rb_stones_head, #simple-select-quiz.rb-stone-panel .ssq_all_stone_confirmations { display: none !important; } /* `.rb-stone-panel` IS NOT A SCREEN, IT IS A JOURNEY. In the stone-first flow `rbApplyStoneFirstChrome()` stamps it on `#simple-select-quiz` and it stays there through SIZE and ENGRAVING -- MEASURED on 3.6 at 1728, className `rb_at_first rb-stone-held rb-stone-panel rb-stone-first rb-sf-no-back`. This `display:none !important` was written for the STONE screen, which has no step message, and it was killing the ENGRAVING screen's heading with it: `_engraving-desktop.css` 1 draws 3.6.5 `COMPLIMENTARY ENGRAVING` and 3.6.6's two-line sub-copy on this element (752x50 at y194), and at 1728 neither rendered -- the sub measured 0x0, the heading was absent, and the right column began at the input field. MEASURED with the element's own inline `display: block` in place and computed display still `none`: the `!important` was the only thing beating it. Narrowed to "not the engraving step" rather than to "the stone step" so the SIZE step keeps exactly the behaviour it has today (`_size.css` 1 parks the same element to a zero box there; 14463:34507 draws no body copy). */ #simple-select-quiz.rb-stone-panel:not(:has(#ssq_engraving.active)) .desktop-message.ssq-message { display: none !important; } /* PRESERVE: `.desktop-stone-details` is NOT in that list. It stays exactly as the build leaves it — simple-select.js:1470 writes into `.desktop_simple_details_content` and js:400 gates on a `.css('display')` read, so nothing here may touch it. */ /* `Customization` 14468:41822 — 618 x 659 at (1030,194), i.e. 618 of the 1568 content box, right edge 1648 = the 80px page gutter. 2.2's twin 14468:44400 is 754 at x=894 — the SAME right edge, 136px wider, because 2.2 has no left-hand stepper column pushing it in. Widths are expressed against the 1568 content box so the fluid model above still holds. */ #simple-select-quiz.rb-stone-panel .ssq_picked_selection { display: flex !important; flex-direction: column; /* NOT a flex `gap`. 14468:41822's itemSpacing 40 separates the TITLE BLOCK (14468:41823, 51 tall) from the SPEC BLOCK -- and inside the title block the gap is 14468:41823's own itemSpacing 12. A single 40px gap put 40 between the heading and the descriptor row and measured the first spec row at y=325 instead of the board's 285, so the two are authored as margins on the children instead. */ gap: 0; box-sizing: border-box; padding: 0; border: 0; margin: 0; width: 100%; max-width: none; } #simple-select-quiz.rb-stone-held .ssq_picked_selection { /* MEASURED: the built right column is [894, 752] -- its right edge is 1646, TWO px short of the board's 1648 (the footer CTA does end at 1648, so a panel flush with the column no longer lined up with it). And a FIXED 134px inset does not scale: at 992 the column is 397.8 wide, 134 of that left 263.8 for a panel whose label column alone is 120 + 16, so every value wrapped and the 61 pitch broke to 61/82/61/61/82. Both are fixed by expressing the inset as a FRACTION of the column and taking the missing 2px back on the right: margin-left 136/752 = 18.0851% -> 894 + 136 = 1030 (14468:41822 x) width 100% - 18.0851% + 2 -> 618 at 1728, right edge 1648 At 992 that leaves 327.9 for the panel instead of 263.8, which holds every value on one line. */ margin-left: 18.0851%; width: calc(81.9149% + 2px); } /* --- 1.3.1 title block 14468:41823 — 618 x 51, gap 12 ------------------- */ #simple-select-quiz.rb-stone-panel .ssq_picked_selection > .rb_ys_title { order: 1; margin: 0; font-family: var(--rb-font-display); font-weight: 300; font-size: 24px; line-height: 19px; /* 14468:41824 lh 79.17% — shorter than the font size, and BOTTOM aligned */ letter-spacing: var(--rb-ls-tight); text-transform: uppercase; /* COPY3 3.2 — textCase UPPER */ color: var(--rb-text-primary); display: flex; align-items: flex-end; height: 23px; } /* 2.2 has no "YOUR STONE": 14468:44404 is the full stone descriptor, centred, and the heading node does not exist on that board. */ #simple-select-quiz.rb-stone-pdp .ssq_picked_selection > .rb_ys_title { display: none; } /* 14468:44400 is 754 x 726 at x894 -- two wider than §1's 752 right track, and its right edge is the frame's own 80 margin (894 + 754 = 1648 = 1728 - 80). ROUND3 measured the panel at 752, so the accordion inside it measured 752 and the trust strip 752 against the board's 754. 2.4's own right column is 618 and is already right, so this is held to `.rb-stone-pdp`. */ #simple-select-quiz.rb-stone-pdp .ssq_picked_selection { width: 100.265957%; /* 754 / 752 */ max-width: none; } /* 14468:41825 — 618 x 16, SPACE_BETWEEN. RHYTHM R2: the declared 12 RESOLVES to 342 (the price sits at local x 564), so this is space-between and never a gap. 12px above it is 14468:41823's own itemSpacing. */ #simple-select-quiz.rb-stone-panel .ssq_picked_selection > .rb_ys_line { order: 2; display: flex; margin: 0; } #simple-select-quiz.rb-stone-held .ssq_picked_selection > .rb_ys_line { flex-direction: row; justify-content: space-between; align-items: baseline; margin-top: 12px; /* 14468:41823 itemSpacing */ } /* 2.2 14468:44403 — title 23, gap 12, price row 18, all CENTRE aligned, and the price is its own full-width line (14468:44405 "$500 (stone only)"). */ #simple-select-quiz.rb-stone-pdp .ssq_picked_selection > .rb_ys_line { flex-direction: column; gap: 12px; /* MEASURED R2: `text-align: center` on the 752-wide column painted the glyph run at x=1082.4 while `$… (stone only)` below it stayed at 894. 14468:44404 is a 379-wide HUG box at local x=0 inside the 716-wide 14468:44403 -- i.e. the run starts at the column's own left edge, flush with 14468:44405, the spec rows and the trust strip. A hug box cannot be reproduced on a node the build sizes to the column, so the alignment is authored instead of the width. */ text-align: left; } #simple-select-quiz.rb-stone-panel .ssq_picked_selection #preview_confirm_type, #simple-select-quiz.rb-stone-panel .ssq_picked_selection #preview_confirm_price { margin: 0 !important; /* the inline margins on #preview_confirm_price */ font-family: var(--rb-font-body); font-weight: 400; font-size: 18px; line-height: 16px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-primary); } #simple-select-quiz.rb-stone-panel .ssq_picked_selection #preview_confirm_type > span { font-weight: 400 !important; /* the markup's inline font-weight:900 */ } /* 2.2's 14468:44404 is Canela 300 24/19 UPPER and CENTRE, not the body face. */ #simple-select-quiz.rb-stone-pdp .ssq_picked_selection #preview_confirm_type, #simple-select-quiz.rb-stone-pdp .ssq_picked_selection #preview_confirm_type > span { font-family: var(--rb-font-display); font-weight: 300 !important; font-size: 24px; line-height: 23px; text-transform: uppercase; } #simple-select-quiz.rb-stone-pdp .ssq_picked_selection #preview_confirm_price { text-align: left; line-height: 18px; } /* --- 1.3.2 spec block 14468:41828 / 14468:44408 ------------------------- */ #simple-select-quiz.rb-stone-panel .ssq_picked_selection .diamond_atts_accordion { order: 4; display: flex; flex-direction: column; gap: 25px; /* itemSpacing 25 -> row pitch 61 */ padding: 0 3px 0 0; /* the 3px right pad is what makes every child 615 wide inside a 618 frame */ margin: 40px 0 0; /* 14468:41822 itemSpacing 40 */ border: 0; } #simple-select-quiz.rb-stone-panel .ssq_picked_selection .diamond_atts_accordion > .accordion-row { padding: 0 0 12px; /* 36 = 24 of content + padBottom 12 */ margin: 0; border: 0; border-bottom: 1px solid var(--rb-border-subtle); /* B1, INSIDE */ background: none; } #simple-select-quiz.rb-stone-panel .ssq_picked_selection .diamond_atts_accordion > .accordion-row > button.accordion-title { display: flex; align-items: center; gap: 16px; /* the label column's own wrapper gap */ width: 100%; min-height: 23px; padding: 0 32px 0 0; /* clears the 16-wide chevron + air */ margin: 0; border: 0; background: none; text-align: left; text-transform: none; font-family: var(--rb-font-body); letter-spacing: var(--rb-ls-tight); } /* CHECK 56: the label column `Frame 1171276104` is 120 FIXED on EVERY desktop row, and its wrapper's itemSpacing is 16 — which is what pins every value to local x=136 regardless of how wide its label is. Measured before this rule, live values tracked the label width instead: x = 937 / 925 / 936 / 942 / 965 against a label edge of 900. */ #simple-select-quiz.rb-stone-panel .ssq_picked_selection .diamond_atts_accordion > .accordion-row > button.accordion-title > span.att_label { flex: 0 0 120px; width: 120px; min-width: 120px; font-weight: 400; font-size: 18px; line-height: 22px; color: var(--rb-text-secondary); } #simple-select-quiz.rb-stone-panel .ssq_picked_selection .diamond_atts_accordion > .accordion-row > button.accordion-title > span:not(.att_label) { flex: 1 1 auto; min-width: 0; font-weight: 400; font-size: 18px; line-height: 22px; color: var(--rb-text-primary); } /* 14468:41856 / 44436 — the expander's own label is 18/19 and CENTRE-aligned vertically, the only spec text that is not 18/22 TOP (CHECK 79). It has no value node, so its label column must be allowed to grow past 120. */ #simple-select-quiz.rb-stone-panel .ssq_picked_selection .diamond_atts_accordion > .rb_dd_expander > button.accordion-title > span.att_label { flex: 0 0 auto; width: auto; line-height: 19px; } /* Chevron 14468:41834 — VECTOR 16 x 8 at local x=599 in a 615 row, i.e. flush right (CHECK 33: every chevron on every board is a RESOLVED position, so it is pinned to the row's right edge and never computed from a gap). */ #simple-select-quiz.rb-stone-panel .ssq_picked_selection .diamond_atts_accordion > .accordion-row > button.accordion-title::after { top: 50%; right: 0; width: 16px; height: 8px; margin-top: -4px; background-image: url('../../../assets/media/ringbuilder/icon-chevron-down-10.svg'); background-size: 16px 8px; background-position: center; background-repeat: no-repeat; } /* 1.3.3 the Details & Dimensions body 14468:41858 — gap 16, pad 12/0/12/0, seven 24-tall rows on a 40 pitch, same 120 + 16 columns as the rows above. */ #simple-select-quiz.rb-stone-panel .ssq_picked_selection .diamond_atts_accordion #details-and-dimensions { padding: 12px 0; } #simple-select-quiz.rb-stone-panel .ssq_picked_selection .rb_dd_row { display: flex; align-items: flex-start; gap: 16px; height: 24px; margin: 0 0 16px; font-family: var(--rb-font-body); font-size: 18px; line-height: 22px; letter-spacing: var(--rb-ls-tight); } #simple-select-quiz.rb-stone-panel .ssq_picked_selection .rb_dd_row:last-child { margin-bottom: 0; } #simple-select-quiz.rb-stone-panel .ssq_picked_selection .rb_dd_row > .att_label { flex: 0 0 120px; width: 120px; font-weight: 400; color: var(--rb-text-secondary); } #simple-select-quiz.rb-stone-panel .ssq_picked_selection .rb_dd_row > span:not(.att_label) { flex: 1 1 auto; min-width: 0; color: var(--rb-text-primary); } /* --- 2.2.3 trust strip 14468:44467 — 754 x 25, three items, SPACE_BETWEEN at local x 0 / 317.5 / 618 (R23: declared 30, resolved 173.5). 2.4 draws no trust strip at all. -------------------------------------------------- */ #simple-select-quiz.rb-stone-panel .ssq_picked_selection > .rb_trust_strip { order: 5; display: flex; justify-content: space-between; align-items: center; list-style: none; margin: 40px 0 0; /* 14468:44400 itemSpacing 40 */ padding: 0; height: 25px; } #simple-select-quiz.rb-stone-held .ssq_picked_selection > .rb_trust_strip { display: none; } #simple-select-quiz.rb-stone-panel .ssq_picked_selection > .rb_trust_strip > li { display: flex; align-items: center; gap: 6px; /* icon 21 + 6 = label x offset 27 */ margin: 0; color: var(--rb-text-secondary); } #simple-select-quiz.rb-stone-panel .ssq_picked_selection .rb_trust_icon { display: block; width: 21px; height: 21px; flex: 0 0 21px; } #simple-select-quiz.rb-stone-panel .ssq_picked_selection .rb_trust_icon svg { display: block; } #simple-select-quiz.rb-stone-panel .ssq_picked_selection .rb_trust_label { font-family: var(--rb-font-body); font-weight: 400; font-size: 18px; line-height: 25px; letter-spacing: var(--rb-ls-tight); } /* The mobile-only stone photo inside the panel keeps its `d-lg-none`; the desktop boards put the stone image in the LEFT column, which diamond-search.js already swaps to `.quiz-left .quiz-handpicked-image`. */ #simple-select-quiz.rb-stone-panel .ssq_picked_selection > .quiz-handpicked-image { order: 3; } #simple-select-quiz.rb-stone-panel .ssq_picked_selection > .close_picked_selection { order: 0; } /* --- the footer's link slot 14468:41910 -------------------------------- 464 = 146 + 36 + 282, the declared itemSpacing honoured (one of the few places in this set where it is), so the link sits 36px left of the CTA. */ #simple-select-quiz .rb_stone_link_slot { /* order 2 puts it after p.setting_total (also order 2, earlier in the DOM) and before .sss-next (order 3); .sss-nav's own `gap: 36px` then supplies the 36 the board declares, so no margin is authored here. */ order: 2; display: none; /* `margin-left:auto` collects the free space so the link sits in the RIGHT cluster, 36px (the nav's own gap) left of the 282-wide CTA: 1648 - 282 - 36 - 146 = 1184, which is 14468:41911's board x. The companion rule below drops `p.setting_total`'s own `margin-right:auto`, otherwise two auto margins split the free space and the link measured x=863. */ margin: 0 0 0 auto; padding: 0; } #simple-select-quiz.rb-stone-panel .ssq_bottom_nav p.setting_total { margin-right: 0; } /* CHECK 96 / 14468:41912: "Pick a different stone" belongs to 2.4 ONLY -- neither the ring-size, engraving nor review board defines it, and it is destructive. `.rb-stone-held` survives the step change (it is what keeps the held stone's panel alive on a trip back to STONE), so the slot has to be gated on the STONE slide as well as on the state, or the link drifts across the space-between footer and ends up the only control on Review. MEASURED before this rule: [948.3,1025.7] on #slide2, [1181.6,1025.7] on #slide3, [1499.6,1025.7] on #slide4. */ #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .rb_stone_link_slot, #simple-select-quiz.rb-stone-pdp .rb_stone_link_slot { display: block; } #simple-select-quiz .rb_stone_link_slot > a { display: none; font-family: var(--rb-font-body); font-weight: 400; font-size: 18px; line-height: 19px; letter-spacing: var(--rb-ls-tight); text-decoration: underline; /* CHECK 66 */ text-transform: none; color: var(--rb-brand-green); background: none; border: 0; } #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .rb_stone_link_slot > .rb_pick_other_link { display: inline-block; } /* 2.2 desktop draws its back control at board (80,23) — that board has NO header frame, so the link is the topmost thing on the page and it sits on the 80px left page gutter. The node lives in the footer for mobile, so on desktop it is lifted out to those coordinates. #simple-select-quiz is the positioning context; the builder starts at y0 with no promo bar above it, so 23 off the section top is 23 off the viewport. */ /* IN THE HEADING NOW, not pinned over the page. simple-select-redesign.js moves this link into `.simple-select-heading`'s flex row on load -- the slot the hidden `.rb_back` chip occupies -- so it is laid out by the heading rather than lifted to (80,23) with `position: fixed`. Fixed put it in the right spot but in no container, and with 2.2's back chip hidden it sat over the page with nothing behind it. Heading padding supplies the 80 and the 23. */ #simple-select-quiz.rb-stone-pdp .simple-select-heading .rb_stone_back_link { display: inline-flex; align-items: center; gap: 5px; /* 14468:44492 itemSpacing 5 */ height: 28px; /* CENTRED IN THE BAND, not on the board's y23. 14468:44492 sits at y23, which in a 54-tall band leaves 23 above and 3 below -- it reads as stuck to the top. Requested centred instead, so: 13 + 28 + 13 = 54, exact. Done with a margin off flex-start rather than `align-self: center` because the flex line is `.col`, which measures 60 tall, not 54 -- the band clips it. Centring against the line would land the link at 16 and look centred on a box nobody can see. 13 is centred on the 54 the customer actually sees. */ align-self: flex-start; /* 22, not 13: centres the 28px link in the 72px band (22 + 28 + 22 = 72). See the band's own note above for why it grew. */ margin-top: 22px; /* LEFT EDGE ON THE RING DETAILS CARD, not on the header's own gutter. MEASURED at 1728 on 2.2: the link sat at x=80 (the heading `.container` is 1568 wide at x=80) while `.rb_details_bar` directly below it starts at x=70 -- bootstrap's `.row` inside the BODY container carries negative side margins the heading's row has zeroed, so the two containers resolve 10px apart. Ten pixels of misalignment between a link and the card it introduces is exactly the "aligned properly" complaint. Pulled back onto the card's edge rather than pushing the card out, because the card's x=70 is shared with the whole two-column band. */ margin-left: -10px; /* The theme sets `a, a:hover { text-decoration: underline }`, so the rule is stated here rather than inherited away; this selector is (1,3,1) against its (0,0,1), so no !important is needed. Underline is a HOVER affordance, not the resting state. */ text-decoration: none; } #simple-select-quiz.rb-stone-pdp .simple-select-heading .rb_stone_back_link:hover, #simple-select-quiz.rb-stone-pdp .simple-select-heading .rb_stone_back_link:focus-visible { text-decoration: underline; } #simple-select-quiz:not(.rb-stone-pdp) .simple-select-heading .rb_stone_back_link { display: none; } /* 14468:44494 — a 12.17px horizontal rule, 1px #27423B, acting as the arrow. */ /* AN ARROW, NOT A HYPHEN. The API reports `Vector 138` (14468:44493) as 12 x 0 -- a flat bounding box -- and this was built literally, as a 12px rule with a border-top. Rendering the node at 4x shows what it actually is: a left arrow, "<- Continue browsing". A zero-height bbox on a stroked path is the shaft's extent, not the glyph. Drawn as an SVG background so the head and shaft stay one piece at any zoom. */ #simple-select-quiz .rb_link_rule { display: block; width: 12px; height: 10px; border: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M11.5 5H1M1 5L5 1M1 5L5 9' stroke='%2327423B' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 12px 10px; } #simple-select-quiz.rb-stone-held .rb_stone_link_slot .rb_link_rule { display: none; } /* CHECK 94: 2.2 (14468:44399) has NO Header frame and NO progress bar -- 2.4 (14468:41807) has both. FLOW2 reads that literally: while the shopper is inspecting a stone they are "off the stepper"; once the stone is held the stepper comes back with STONE marked complete. It is also what buys back the 112px that puts 2.2's columns at y=82 against 2.4's y=194 (CHECK 52: 194 - 82 = 112 = the 166-tall header plus its 28px offset). `display:none` is safe on this node: the only script that reads it is diamond-search.js, which clones it with `.get(0).outerHTML` -- an outerHTML read does not care about display. */ /* !important because the 2.4 step JS writes `style="display: block"` STRAIGHT ONTO this node, and an inline style beats any author rule that is not !important. Measured: the FIRST entry to 2.2 has 0 visible steppers, but on the second (Add to Ring -> Pick a different stone -> another card -> keep this stone) the STONE/SIZE/ENGRAVING bar reappeared at [364,114 1000x40] and painted straight through "Ring Details / Current Est." -- 460x16 of overlap on the details bar and 470x40 on the picked panel. */ #simple-select-quiz.rb-stone-pdp .quiz_options > .rb-progress-bar, #simple-select-quiz.rb-stone-pdp .quiz-image-conatiner .rb-progress-bar { display: none !important; } /* ...and the header band itself. CHECK 52: both of 2.2's columns start at board y=82 against 2.4's 194, and 194 - 82 = 112 is exactly the 166-tall header 14468:41808 plus its 28px offset. MEASURED: the build's `.simple-select-heading` is 1728x166 at y=0 and the row below it carries a 28px top margin, so the panel sat at y=194 on 2.2 as well. The band is COLLAPSED to 54 rather than removed: 54 + 28 = 82, which is the board's own column top, and a `display:none` on a node that is still in the document flow above two absolutely-measured columns would have put them at y=28. Its contents are hidden rather than the band, so the progress bar's own rule above still owns the bar. */ /* THE HEADER ROW SITS LOWER, AND KEEPS ITS GAP. Owner: *"in a diamond PDP you can move the cross and continue browsing slightly lower towards the content, while maintaining a gap -- they're both on the same row right?"* They are: `.rb_stone_back_link` and `.close_ssq` are the only two children left in this band (the titles and the back chip are hidden below), and MEASURED at 1728 the link sat at y13 in a 54px band with the Ring Details card starting at y82 -- 13 above, 41 below, i.e. pinned to the top of the screen with all the air underneath it. The band grows 54 -> 72 and the pair is centred in it by the 22px offset below (22 + 28 + 22 = 72), so both move down 9px together and the gap to the content below stays open rather than being eaten. The columns follow the band, so the card lands at 100 instead of 82 -- there is no absolute y-coordinate depending on the 54 (the two columns are laid out in normal flow beneath it), which is why this is a one-number change. */ /* 24, NOT 72, NOW THAT THE BAND IS EMPTY. Owner: *"you removed Continue browsing in the BYR flow diamond PDP, so there's a lot of gap there -- you can reduce the gap on the top."* Every number above is the arithmetic of a band that HELD something: 54 was what put the columns on the board's y=82, and 72 was 22 + 28 + 22, centring the back link and the close in it. Both of those controls have since moved to the footer, so 72px of nothing sat above Ring Details -- MEASURED, the card started at y100 with an empty band above it. 24 is kept rather than 0 because this band is the only thing between the viewport edge and the card: collapsed entirely, Ring Details would start at 28 (its own row margin) and read as stuck to the top, which is the complaint that grew the band in the first place. */ #simple-select-quiz.rb-stone-pdp .simple-select-heading { height: 24px; min-height: 0; padding: 0; overflow: hidden; /* NO GREY BAND ON 2.2. Owner: *"in all diamond PDP in BYR flow the continue browsing is in a grey bar.. nahh.. it must be above the ring details one, spaced nicely aligned properly"*. The band's own rule (section 1) paints `--rb-border-subtle` #E4DED8 full-bleed, which is right for the 166-tall header on every other step. Collapsed to 54 and holding nothing but the back link, it read as a grey strip stuck to the top of the screen with a link marooned in it -- 14468:44399 draws no header frame here at all. Repainted to the page ground so the 54 survives purely as the spacing that keeps both columns on the board's y=82, and the link reads as sitting above the Ring Details card rather than inside a bar of its own. */ background-color: var(--rb-surface-page); background-image: none; } /* ...and the 0.8 node opacity that the header frame carries goes with it. It was there to sit the header's contents back into the grey; over the page ground it only makes the link look disabled. */ #simple-select-quiz.rb-stone-pdp .simple-select-heading > .container { opacity: 1; } /* The container is SHOWN again, because "Continue browsing" now lives in it. Hiding the whole container is what made the link invisible once it moved out of the footer. The band stays 54 tall and clipped, so the columns still start at 82 -- only the container's CONTENTS change: the titles go, the back chip is already hidden on this state, and the link and close remain. Centred in the 54 band, the 28px link lands on the board's y23. */ #simple-select-quiz.rb-stone-pdp .simple-select-heading > .container { display: block; } /* ...and the contents the rule above says go. The comment claimed "the titles go, the back chip is already hidden on this state" -- neither was actually written, so the 54px band rendered "Build Your Ring" at y0 and "Twist Halo" at y30, with the BACK chip pushed to x898 by the title block's own width. Board 14468:44399 draws no header frame at all on 2.2: the only control at the top of the screen is "Continue browsing" at (80,23), which is exactly where `.rb_stone_back_link` is placed above. The band survives only as 54px of spacing, so the two columns still start at the board's y=82. `.rb_back` goes with them: a second back affordance beside the one the board does draw, and its `.sss-prev` proxy steps the SLIDE, which is not what leaving stone details means. 2.4 is `.rb-stone-held`, not `.rb-stone-pdp`, so the back chip 14468:36310 paints there is untouched. */ #simple-select-quiz.rb-stone-pdp .simple-select-heading .rb_head_titles, #simple-select-quiz.rb-stone-pdp .simple-select-heading .rb_back { display: none; } /* THE CLOSE RIDES WITH THE BACK LINK. They are the only two things left in this band and the owner asked for them as one row -- *"you can move the cross and continue browsing slightly lower towards the content ... they're both on the same row right?"* Growing the band to 72 and offsetting the LINK by 22 moved only the link: the close has no offset of its own, so it stayed at the flex line's start. MEASURED on 2.2 at 1728 after that change: back [70,22,136,28] centre y 36 close [1612,0,36,36] centre y 18 -> 18px out of line 18 centres the 36px close in the 72px band ((72-36)/2), which is the same centre line the 28px link reaches at 22 (22 + 14 = 36). Both now read as one row, and the pair still moves together if the band is re-tuned. Scoped to `.rb-stone-pdp`: every other step keeps the 166-tall header where the close already sits correctly, MEASURED at [1612,32,36,36] on all of them. */ #simple-select-quiz.rb-stone-pdp .simple-select-heading .close_ssq { align-self: flex-start; margin-top: 18px; } } /* THE GEMSTONE THUMB carries NO margin of its own. `Round-Lab-Emerald-300x300.jpg` is cropped tight to the stone, while the three diamond images are stones sitting inset on white. Measured in the 83px frame: the diamonds read about 58% of the box, the emerald about 86% even under `contain`, so it stood out as a flat green disc beside three inset stones. The extra inset brings it to the same visual weight. This compensates for ONE catalogue asset and is tuned to it. The durable fix is a gemstone product image framed like the diamond ones; if that lands, drop this rule rather than re-tuning it. */ #simple-select-quiz .ssq_all_stone_options #simple_gemstone .ssq_stone_image img, #simple-select-quiz .ssq_all_stone_options .simple_gemstone .ssq_stone_image img { /* A SHARE OF THE THUMB, NOT 16 FLAT. Owner: *"the gemstone image is as small as a few pixels on phone only -- on desktop it's good."* This inset exists to bring one tight-cropped catalogue asset to the same visual weight as the three inset diamond photos (see the note above), and 16px was measured against the DESKTOP thumb. This rule sits outside the >=992 block, so it applied at every width: 1728 frame 84 x 83, padding 16 -> 52px of image fine 390 frame 40 x 40, padding 16 -> 8px of image the report i.e. four fifths of the phone thumb was padding. 19% is that same 16/84 relationship expressed against the frame, so desktop is unchanged to the pixel and the phone gets ~7.6px -- in proportion with its own 40px box. Percentage padding resolves against the containing block's WIDTH, which is the square thumb either way. */ padding: 19.047619047619048%; /* 16 / 84 */ } /* ============================================================================= 2.4 BACK TO STONE — SIDE BY SIDE, and 2.2 STONE DETAILS — FULL-WIDTH 2.4 desktop 14468:41807, left column 14468:41887 (890 x 763, VERTICAL gap 10) 2.2 desktop 14468:44399, image column 14468:44534 (754 x 905, VERTICAL gap 10) MEASURED ON DEV-0 AT 1728x1100 BEFORE THIS SECTION -------------------------------------------------- 2.4 .quiz-left [70,194,764,783] board 890 at x80 .rb_details_bar [70,194,764,48] board 890, 48 collapsed .quiz-image [70,254,764,723] board: a 890 x 362 ROW .sss-metal-image [70,254,764,503] board `main image` 401 x 362 .quiz-handpicked-image[70,977,0,0] board `Container` 475 x 362 > img [70,988,0,0] board `image` 355 x 297 .select_metal_shape [219,820,466,44] board: INSIDE the Container .quiz-image-video-thumbs [70,1005,0,100], children 100x100, the first at x=-35 -- off the column .ssq_picked_selection [1030,194,618,371] board 618 at 1030 -- already right 2.2 .quiz-left [70,82,764,783] board 754 at x70 .quiz-image [70,142,764,723] board `main image` 754 x 679 thumbs same 0x100 as above board 754 x 64 So: ONE image on 2.4 and no diamond at all; the left column 126px too narrow and 10px too far left; and a thumb row that was never given a box. THE COLUMN SPLIT — 80 | 890 | 60 | 618 | 80 ------------------------------------------- §1's grid is the 764 / 60 / 752 split of the SETTING boards and every other step still wants it, so the tracks are left alone and only the stone screens' own left column is re-sized, against ITS OWN grid area so the whole thing stays fluid: 2.4 margin-left 10/764 = 1.3089% -> x = 70 + 10 = 80 width 890/764 = 116.4921% -> right edge 970, and the panel already at 1030 leaves the 60 2.2 margin-right 10/764 = 1.3089% -> 754 at x70, right edge 824, and 2.2's own board gap to the 894 column is 70, not 60 The 890 overflows track 1 (764) into the gutter in front of the right column, whose own box starts at 894 and whose PAINTED panel starts at 1030. `.row` is a grid, so a later sibling would win the paint and the hit test over that 76px strip -- which is where the shape pill's right half sits. `position: relative; z-index: 2` on the column is what keeps the pills clickable there. ========================================================================== */ @media (min-width: 992px) { /* --- 1. THE COLUMN ------------------------------------------------------ */ #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) > .container > .row > .quiz-left, #simple-select-quiz.rb-stone-pdp > .container > .row > .quiz-left { position: relative; z-index: 2; /* THE COLUMN IS NOT A CARD ON THESE TWO BOARDS. `.quiz-left` carries the white on the setting screens, and §3 already turns it off -- but simple-select.js writes `background: #fff` INLINE on it in four places (js:1254, :1667, :1905 set it, js:1680 is the only unset), so the author rule never bit. MEASURED: computed rgb(255,255,255) over the whole 890 x 494 column, i.e. a white slab behind the 60px ground the board leaves between the two frames and behind the thumb row, which on both boards sits on the page ground. `!important` is the only thing that outranks an inline declaration, and it is held to the two stone states this file's own class writes. */ background: transparent !important; } #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) > .container > .row > .quiz-left { margin-left: 1.308901%; /* 10 / 764 -> x80 */ width: 116.492147%; /* 890 / 764 */ } #simple-select-quiz.rb-stone-pdp > .container > .row > .quiz-left { margin-right: 1.308901%; /* 764 - 10 = 754, x70 */ } /* --- 1.1 THE TAIL BELOW THE CONTENT IS A CONSTANT 100 ------------------- `section#simple-select-quiz` carries `padding-bottom: 100px` (simple-select-redesign.css:351) so there is always clear space to scroll past the last row. MEASURED at 1728, that tail was NOT 100: 2.4 section bottom 1053, deepest content 893 (the right column) -> 160 2.2 section bottom 1008, deepest content 894 (the left column) -> 114 The excess is one rule that is not ours: the active slide carries `margin-bottom: 60px`, and `#ssq_select_stone` IS the right column's only child on these two screens (.quiz_options > #ssq_select_stone > .ssq_picked_selection). So the right column's box runs 60 past its own painted panel, the grid row takes the taller of the two columns, and the 100 is measured from 60 (2.4, right column deeper) or 14 (2.2, where the left column is deeper and only eats part of it) below where the shopper can actually see anything. Zeroed only on the two stone screens, where the slide is the column: every other step still gets the 60 its own sheet asks for. With it gone the row ends on the deeper column's own last pixel and the 100 is exactly 100 on both screens. */ #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz_options > #ssq_select_stone.active, #simple-select-quiz.rb-stone-pdp .quiz_options > #ssq_select_stone.active { margin-bottom: 0; } /* --- 2. RING DETAILS PUSHES THE IMAGES DOWN ---------------------------- `Setting details` is the FIRST of three flow siblings in one vertical auto-layout with itemSpacing 10: 202 tall expanded puts `Frame 1171276760` at y212 and `image buttons` at y584; 48 tall collapsed (2.2's own `setting section`) puts the image row at y58 and everything moves up. §3 pinned the bar at `height: 48px; overflow: hidden` when it had no body to show. The body EXISTS now (`.rb_details_panel`, simple-select-quiz.php :78, kept in step with `.is-open` by simple-select-redesign.js:1656) so the clip is lifted on the open state ONLY -- collapsed stays exactly 48, which is what every other step measured before this change. Nothing here is positioned: the bar grows in flow and the images move down with it, so it can never overlay them. */ #simple-select-quiz .rb_details_bar.is-open { height: auto; /* HIDDEN, NOT VISIBLE, AND THIS IS THE WHOLE OF THE "text before the background" REPORT. `.is-open` used to lift the clip immediately, so from the FIRST frame of a 260ms height animation the panel's full-height content was painted outside a bar that had barely started growing. INSTRUMENTED, sampling every 35ms through an open: before bar 48 overflow hidden panel bottom 91px BEYOND the bar t35 bar 49 overflow VISIBLE panel bottom 90px beyond t70 bar 74.3 64.8 beyond t105 bar 121 18 beyond t140 bar 142.1 inside at last i.e. for well over half the animation the rows floated on the page and the background chased them. With the clip kept, the same height animation REVEALS the panel instead, which is what it was always meant to do. Safe to keep clipped at rest: the open bar is `height: auto`, so it is already exactly as tall as its content and clips nothing. */ overflow: hidden; /* 14468:41888 padding 16/18/12/18 -- and the frame is a FIXED 202 whose own children sum to 201 (16 + 19 + 12 + 111 + 12 + 19 + 12), because the strap is boxed 23 there while its style reports lineHeightPx 19. ROUND2 left the residual on the board and measured 890 x 201, and that 1px propagated: the image row landed at local y211 instead of y212 and the left column at 647 against the 202 + 10 + 362 + 10 + 64 = 648 the board's own children sum to. A fixed-height Figma frame puts the residual under its last child, which is the bottom padding -- so that is where it goes, and every row above keeps the position ROUND3 measured as already correct. */ padding-bottom: 13px; } /* ---- THE COLLAPSE HAS TO HAVE SOMETHING TO ANIMATE THROUGH ------------- The bar grew smoothly but snapped shut. Captured frame by frame: t= 0ms barH=179 panelH=119 open=true t= 20ms barH= 51 panelH= 0 <- panel gone in ONE frame t=219ms barH= 48 <- transition animated 3px The panel ships with the `hidden` attribute and simple-select-redesign.js:1999 keeps it in step with `.is-open`, so the UA sheet's `[hidden]{display:none}` pulled it out of flow in the same frame the class changed. The bar's height then had nothing left to shrink THROUGH -- it was already at its collapsed content height, and the 260ms ran over the 3px of padding that remained. Kept in flow instead, and clipped by the bar's own `overflow: hidden` -- which is what the collapsed height is for. `hidden` stays on the node, so the attribute still records the state for anything reading it; only its `display` is overridden, and `visibility` takes over the actual hiding on a delay so the panel is still painted for the length of the collapse. */ /* `!important` because it is answering one: bootstrap.min.css ships `[hidden]{display:none!important}`, which no amount of specificity beats. Worth recording -- the note on `.rb_adv_search_row` elsewhere in this build says `hidden` is "only enforced by the UA sheet's [hidden]{display:none}, which ANY author rule outranks". That is not true in this theme. */ #simple-select-quiz .rb_details_panel[hidden] { display: block !important; } #simple-select-quiz .rb_details_bar:not(.is-open) .rb_details_panel { visibility: hidden; transition: visibility 0s linear 260ms; } #simple-select-quiz .rb_details_bar.is-open .rb_details_panel { visibility: visible; transition: visibility 0s; } #simple-select-quiz .rb_details_panel { margin-top: 12px; /* 14468:41888 itemSpacing 12 */ } /* THE BODY IS THREE TWO-LINE ROWS, NOT TWO ONE-LINE ONES. ROUND2 measured `.rb_details_bar.is-open` at 890 x 144 against the board's 890 x 202 -- 58px short -- because each row printed a label and a price and nothing else, and the Engraving row was absent. `Frame 1171276713` 854 x 114 (14468:41888) wraps `Frame 1171276632` 854 x 111, VERTICAL gap 4, whose three rows measure 42 / 42 / 19: Setting label 16/19 #0F0E0D over `14k White Gold` 16/19 #3E3C39 Stone label 16/19 over the stone's own descriptor Engraving label 16/19 only (one line -- it has no descriptor node) so 19 + 4 + 19 = 42 on the two-line rows and 42 + 4 + 42 + 4 + 19 = 111. The strap follows at local y170 (= 16 + 19 + 12 + 111 + 12), which is the itemSpacing 12 again, and is 14/19 CENTER. 16 + 19 + 12 + 111 + 12 + 19 + 12 = 201 against the node's declared 202: the source's own children do not sum to its frame height (the strap is boxed 23 tall there while its style reports lineHeightPx 19), so the 1px is the board's, not a choice made here. */ #simple-select-quiz .rb_details_body { display: flex; flex-direction: column; gap: 4px; /* `Frame 1171276632` itemSpacing 4 */ } /* THE BODY'S GAP NEVER SEPARATED THE ROWS -- it has ONE child. The rows live in `.rb_details_rows` inside it, and that wrapper is only given `display: flex` by the mobile sheet (inside `max-width: 991`), so at desktop it stayed a plain block and the rows sat FLUSH: MEASURED at 1440, pitch 42 against a row height of 42, i.e. zero between pairs while each pair carries 4px inside itself. The owner's note is about exactly that reading -- *"add space in between these two so the setting and metal look like they belong together"* -- and it is worse here than on the phone. Same 12 as the mobile rule, declared where it can actually reach the rows. */ #simple-select-quiz .rb_details_rows { display: flex; flex-direction: column; gap: 12px; } #simple-select-quiz .rb_details_row { display: flex; align-items: flex-start; justify-content: space-between; gap: 26px; margin: 0; } #simple-select-quiz .rb_details_row_text { display: flex; flex-direction: column; gap: 4px; /* `Frame 1171276621` -- 19 + 4 + 19 = 42 */ min-width: 0; } #simple-select-quiz .rb_details_row_label, #simple-select-quiz .rb_details_row_desc, #simple-select-quiz .rb_details_row_value { font-family: var(--rb-font-body); font-weight: 400; font-size: 16px; line-height: 19px; letter-spacing: var(--rb-ls-tight); } #simple-select-quiz .rb_details_row_label, #simple-select-quiz .rb_details_row_value { color: var(--rb-text-primary); } #simple-select-quiz .rb_details_row_value { text-align: right; white-space: nowrap; } /* 14468:44187 / 44194 are SMALL_CAPS_FORCED on the secondary ink. The row is one line shorter when the descriptor is empty, which is exactly what the board draws for Engraving -- so the node is collapsed rather than left as an empty 19px line. */ #simple-select-quiz .rb_details_row_desc { color: var(--rb-text-secondary); /* NORMAL CASE, requested. `all-small-caps` renders "14k White Gold" and "Natural Diamond" as though they were typed in capitals -- the metal and the stone type are proper nouns here, not labels, and read better set the way they are written. `text-transform` was already `none`, which is why this looked clean in a transform-only check: small-caps is a FONT feature, not a transform, and does not show up there. */ font-variant-caps: normal; } #simple-select-quiz .rb_details_row_desc:empty { display: none; } /* The trailing Title 718 x 23 at (18,170) -- 14/19, CENTER. */ #simple-select-quiz .rb_details_strap { margin: 12px 0 0; font-family: var(--rb-font-body); font-weight: 400; font-size: 14px; line-height: 19px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-secondary); text-align: center; } /* --- 3. THE STACK: bar / image row / thumbs, itemSpacing 10 ------------- */ #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-image-conatiner, #simple-select-quiz.rb-stone-pdp .quiz-image-conatiner { display: flex; flex-direction: column; gap: 10px; /* 15, down from 38. Owner, with the band between the Ring Details bar and the image row boxed in red: *"too much space in the highlighted area, aim to reduce by 60 percent"*. MEASURED at 1440 before: bar ends 381, the row starts 419. 38 was "the same delta as the rule above", i.e. 2.2's own 2px offset carried over from the board; 40% of it is 15.2 and 15 is the whole pixel nearest that. The `gap: 10px` below is untouched -- it is the space BETWEEN the image row and the thumbs, which was not what was marked. */ margin-top: 15px; position: relative; } #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-image-conatiner > .quiz-image { order: 1; } #simple-select-quiz.rb-stone-pdp .quiz-image-conatiner > .quiz-image { order: 1; } #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-image-conatiner > .quiz-image-video-thumbs { order: 2; } #simple-select-quiz.rb-stone-pdp .quiz-image-conatiner > .quiz-image-video-thumbs { order: 2; } /* OFF the two stone boards this row has no box at all. It used to be clipped to nothing by the zero-box on `.quiz-handpicked-image` it was nested in (simple-select-redesign.css:274); simple-select-redesign.js lifts it out to `.quiz-image-conatiner` at >=992 so it can be the flow sibling both boards draw, and out there nothing clips it. MEASURED without this rule: the two thumbs painted at [70,1100] on a white strip under the SIZE step's footer. Zero-boxed, never `display:none`: simple-select.js:2404/:2413 bind the image/video switch to these two nodes and read them back. The stone rules below out-rank it (2 ids + 5 classes against 1 id + 3), and they re-assert `visibility` because this one is inherited by the thumbs themselves. */ #simple-select-quiz .quiz-left .quiz-image-conatiner > .quiz-image-video-thumbs { visibility: hidden; height: 0; min-height: 0; margin: 0; padding: 0; overflow: hidden; } /* `image buttons` — 890 x 64 (2.4) / 754 x 64 (2.2), HORIZONTAL gap 12, two 64 x 64 tiles, radius 4. simple-select-redesign.js moves this row out of `.quiz-handpicked-image` at >=992 so it can be the row's flow sibling instead of the stone container's last child. */ #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-image-conatiner > .quiz-image-video-thumbs, #simple-select-quiz.rb-stone-pdp .quiz-image-conatiner > .quiz-image-video-thumbs { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; visibility: visible; gap: 12px; width: 100%; height: 64px; min-height: 64px; margin: 0; padding: 0; overflow: visible; } #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-image-conatiner > .quiz-image-video-thumbs > img, #simple-select-quiz.rb-stone-pdp .quiz-image-conatiner > .quiz-image-video-thumbs > img, #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-image-conatiner > .quiz-image-video-thumbs > .quiz_video_thumb, #simple-select-quiz.rb-stone-pdp .quiz-image-conatiner > .quiz-image-video-thumbs > .quiz_video_thumb { flex: 0 0 64px; width: 64px; height: 64px; margin: 0; border-radius: var(--rb-radius-sm); overflow: hidden; background: var(--rb-surface-card); } #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-image-conatiner > .quiz-image-video-thumbs > .quiz_video_thumb > img, #simple-select-quiz.rb-stone-pdp .quiz-image-conatiner > .quiz-image-video-thumbs > .quiz_video_thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--rb-radius-sm); } #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-image-conatiner > .quiz-image-video-thumbs > img, #simple-select-quiz.rb-stone-pdp .quiz-image-conatiner > .quiz-image-video-thumbs > img { object-fit: cover; } /* --- 4. 2.4 — `Frame 1171276760`, 890 x 362, HORIZONTAL gap 10 --------- WHICH PHOTO GOES IN WHICH SLOT — the correction ROUND2 measured. This section shipped with the two frames swapped, on the reading BUILD.md recorded ("`main image` <- THE RING"). The 14468:41887 API render settles it the other way and the round-2 measurement agrees: the left 401 block is a bare brilliant on grey and the right 475 block is a ring on white. So `main image` 14468:41890 401 x 362 IMAGE FILL -> the LOOSE STONE `Container` 14468:41893 475 x 362 pad 12/60/60 -> the RING, inset to 355 x 297, with the metal pill under it The DOM is NOT re-sourced to achieve that. `.quiz-handpicked-image` is the node diamond-search.js writes the stone still and the 360 iframe into (:2783 / :2883) and `.sss-metal-image > .sss-image-crop > img` is the one simple-select.js writes the setting photo into; swapping the two srcs would put every other step's ring photo through the stone node. Only the GRID PLACEMENT and the framing of the two nodes swap, so each photo stays with the code that owns it. */ #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left > .quiz-image-conatiner > .quiz-image { /* GRID, not flex, and the pills are a GRID ITEM rather than an absolutely positioned one. MEASURED with the pills absolute: the metal drawer (`.metal_dropdown_ssq_options`, `position: absolute; bottom: 0` from _drawers-desktop.css:364) came up at [503,408,454,194] -- straight over the stone frame -- because an absolutely positioned ANCESTOR becomes the containing block, so `bottom: 0` resolved against the 460-wide pill row instead of against the card. Two overlapping grid areas put the pills inside the ring frame with nothing positioned, so `.quiz-image` stays the drawer's containing block and the open-drawer reserve still works. Rows: 1fr and 53. 53, not 56: `Settings` 14468:41895 sits at Container- local y309 and is 44 tall, so it ends 9 above the frame's 362 bottom -- and the 1fr row above it is then 309, which is exactly where the board puts the bottom edge of the 297-tall ring image. The two frames span BOTH rows, so the stone's own 401/362 aspect-ratio is still the only thing that sets the row's height. */ display: grid !important; grid-template-columns: 45.056180% 53.370787%; /* 401 / 890, 475 / 890 */ grid-template-rows: 1fr 53px; /* 14 / 890, NOT the node's stale itemSpacing 10. `Frame 1171276760` 14468:41889 is HORIZONTAL with primaryAxisAlignItems SPACE_BETWEEN and primaryAxisSizingMode FIXED at 890, over two FIXED children of 401 and 475 -- so the gap Figma actually paints is the residual 890 - 401 - 475, and the Container's left edge is at local x415 with its right edge flush on the row at 890. With the 10 the two tracks summed to 99.55% and ROUND3 measured the ring frame at x491 with a right edge of 966 against the row's and the thumb strip's 970 -- 4px of dead space down the right of the ring panel at 1728, and the same 0.449% at every other width. */ column-gap: 1.573034%; align-items: stretch; /* The row is NOT the card any more: _drawers-desktop.css:275 paints the white and reserves 112/754 of slack under the photo for the metal/shape panel. On this board the white belongs to the two frames inside it, and the board's own 362 is the photo's, so the slack is dropped and only the open-drawer top-up (normally 0px, measured by simple-select-redesign.js:rbReserveDrawerRoom) is kept -- which is what still moves the panel clear of the images when one is opened. */ background: transparent; border-radius: 0; padding: 0 0 var(--rb-d-pop-reserve, 0px); } /* `main image` 14468:41890 — 401 x 362, radius 4, IMAGE FILL: THE STONE. The height of the whole row comes from this one aspect-ratio, so the row scales with the column instead of freezing at a 1728-only 362px. EVERY BOX LINE HERE IS `!important`, and the reason is one rule, not a habit: simple-select-redesign.css:274 zero-boxes `#simple-select-quiz .quiz-image > .quiz-handpicked-image` with `visibility/height/min-height/margin/padding/border/overflow` all `!important`, because the loose-stone photo must never paint in the ring slot on the SETTING boards. That zero-box is still right everywhere else, INCLUDING on the SIZE, ENGRAVING and REVIEW steps, which `.rb-stone-held` survives -- so it is not narrowed at the source. It is out-ranked HERE only, on the two boards where this node IS the subject. */ #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left .quiz-image > .quiz-handpicked-image { grid-area: 1 / 1 / 3 / 2; display: block !important; visibility: visible !important; width: 100%; aspect-ratio: 401 / 362; height: auto !important; min-height: 0 !important; box-sizing: border-box; position: relative; margin: 0 !important; padding: 0 !important; border: 0 !important; background: var(--rb-surface-card); border-radius: var(--rb-radius-sm); text-align: initial; overflow: hidden !important; pointer-events: auto; } /* IMAGE scaleMode FILL -- the board's stone bleeds to all four edges of the 401 x 362 frame, and ROUND2 called out the 594-of-754 `contain` letterbox on 2.2 as the same defect. `cover`, not `contain`: the vendor stills are square (measured 493 x 493), so FILL crops 19.5px off the top and bottom and never letterboxes. SIZED, not inset-stretched: an absolutely positioned REPLACED element with `width: auto` takes its INTRINSIC width and the over-constrained offsets are dropped -- measured 475 x 475 out of a 475 x 362 frame with all four offsets set. */ #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left .quiz-image > .quiz-handpicked-image > img, #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left .quiz-image > .quiz-handpicked-image > iframe, #simple-select-quiz.rb-stone-pdp .quiz-left .quiz-image > .quiz-handpicked-image > img, #simple-select-quiz.rb-stone-pdp .quiz-left .quiz-image > .quiz-handpicked-image > iframe { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; border: 0; border-radius: var(--rb-radius-sm); } #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left .quiz-image > .quiz-handpicked-image > iframe, #simple-select-quiz.rb-stone-pdp .quiz-left .quiz-image > .quiz-handpicked-image > iframe { aspect-ratio: auto; /* simple-select.css:911 pins 1/1 on the video frame */ } /* `Container` 14468:41893 — 475 x 362, radius 8, padding 12/60/12/60: THE RING, at `image` 14468:41894 = 355 x 297 with `Settings` beneath it. The inset is carried by the CROP child, not by padding on this frame: a padding box whose only in-flow child is a `height: 100%` image resolves that percentage against an AUTO height, so the image falls back to its intrinsic ratio and MAKES the height instead of taking it. With the crop out of flow this frame contributes no content height, the stone frame's aspect-ratio is the only definite cross size on the line, and the default `stretch` hands this frame exactly that 362. */ #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left .quiz-image > .sss-metal-image { grid-area: 1 / 2 / 3 / 3; position: relative; display: block; width: 100%; height: auto; min-height: 0; margin: 0; padding: 0; background: var(--rb-surface-card); border-radius: var(--rb-radius-md); overflow: hidden; } #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left .quiz-image > .sss-metal-image > .sss-image-crop { position: absolute; top: 12px; /* `Container` paddingTop */ left: 12.631579%; /* 60 / 475 */ width: 74.736842%; /* 355 / 475 */ /* 12 top + the 53 the pill row occupies -> 297 of the frame's 362, which is the board's own `image` height and puts its bottom edge on the 309 where `Settings` starts. ROUND2 measured 294 here (a `100% - 68px` that assumed a 56px pill row) and flagged the 3px. */ height: calc(100% - 65px); min-height: 0; margin: 0; padding: 0; aspect-ratio: auto; /* §3 pins 604 / 503.33 for the setting board */ flex: none; } /* `contain`, unlike the stone above: this frame is the board's INSET one -- the ring is drawn whole on white with 60px of Container either side, so a crop here would cut the shank off. */ #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left .quiz-image > .sss-metal-image > .sss-image-crop > img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: var(--rb-radius-sm); } /* --- 4.1 `Settings` 14468:41895 — 220 x 44, inside the Container ------- ONE pill, not two. The board's `Settings` frame is 220 x 44 holding a single `metal` pill, centred in the 475 Container at Container-local x127 -- and the 14468:41887 render shows exactly one control under the ring, reading `14 k Yellow Gold`. ROUND2 measured the shipped row at 460 wide: two pills that spilled 52.5px past the Container's 60px side padding on both sides, i.e. wider than the image they sit under. The SHAPE pill is the one that goes. It is not a loss of function here: by the time this board is on screen the stone is committed, and diamond-search.js:1758 forces the SETTING's shape to match the stone's on commit -- so a shape control on 2.4 can only put the two back out of step. It is taken out of FLOW rather than `display: none`d, because the drawer sheets' own state machines read these nodes (HARNESS trap 7). The pills stay a child of `.quiz-image` and are PLACED into the Container rather than re-parented: re-parenting would move the drawer panel's containing block off the 890 row and break the room `rbReserveDrawerRoom` measures. */ #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left .quiz-image > .select_metal_shape { grid-area: 2 / 2 / 3 / 3; /* the ring frame's own lower 53 */ align-self: end; justify-self: center; width: 46.315789%; /* 220 / 475 */ min-width: 0; /* `Settings` local y309 + 44 = 353, 9 above the Container's 362 bottom. */ margin: 0 0 9px; gap: 0; z-index: 2; } #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left .quiz-image > .select_metal_shape > .metal_dropdown_ssq { /* _drawers-desktop.css:265 splits the row in two; with the shape pill out of flow the metal pill is the whole 220. */ flex: 0 0 100%; } #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left .quiz-image > .select_metal_shape > .shape_dropdown_ssq { position: absolute; visibility: hidden; width: 0; min-width: 0; height: 0; padding: 0; overflow: hidden; pointer-events: none; } /* --- 4.2 THE SCRIM BELONGS TO THE RING FRAME ON THIS BOARD ------------- 14543:43653 "2.4 Back to stone step", metal picker open. Above the `black mask` the board lifts exactly TWO things: `Container` 475 x 362 (the ring frame and the metal pill under it) and `Select metal popup` 475 x 194, both at the row's x415. `main image` -- the loose stone -- stays UNDER the mask with the rest of the page. _drawers-desktop.css:351 hangs the scrim on `.quiz-image`, and on every OTHER board that is exactly right: there `.quiz-image` IS the ring card. On 2.4 it is the whole 890 row, so the shadow's hole was cut around the stone and the ring together. MEASURED at 1728 with the picker open: `.quiz-image` [80,407,890,510] lit, `.quiz-handpicked-image` [80,407,401,362] lit inside it -- the owner's "the whole thing is highlighted". The hole is moved, not resized: the scrim is still one outer box-shadow on a single node, so it is still not hit-tested and the click that closes the picker (simple-select.js:986) still lands. `.sss-metal-image` already carries the frame's white and its 8px radius, so the shadow follows the Container's own corners. Its `overflow: hidden` clips its children, never its own box-shadow, so the ring photo keeps its radius. */ #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left .quiz-image:has(.metal_dropdown_ssq_options[style*="display: block"]), #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left .quiz-image:has(.shape_dropdown_ssq_options[style*="display: block"]) { z-index: auto; box-shadow: none; } #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left .quiz-image:has(.metal_dropdown_ssq_options[style*="display: block"]) > .sss-metal-image, #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left .quiz-image:has(.shape_dropdown_ssq_options[style*="display: block"]) > .sss-metal-image { z-index: var(--rb-d-drawer-z); box-shadow: 0 0 0 100vmax var(--rb-scrim); } /* AND THE PILL ROW HAS TO CLEAR THE FRAME IT SITS IN. `.select_metal_shape` is a GRID ITEM carrying `z-index: 2` (§4.1), and a grid item honours z-index at `position: static` -- which means it opens a STACKING CONTEXT. Everything inside it, the panel's own 1001 included, is therefore resolved at 2 against its siblings, so the frame's new 1000 above painted straight over the panel's top 36. MEASURED: elementFromPoint at the panel's title AND at its ✕ both returned `.sss-metal-image` -- the close control was not merely hidden, it was unclickable. This is a defect the scrim move introduced, not one it uncovered: before it, the frame had no z-index of its own, so a context at 2 was enough. Raising the ROW rather than lowering the frame is also what the board draws -- `Settings` 14543:43653 is INSIDE the lifted `Container`, lit along with the ring -- and it keeps the panel above the pills within the row, since an absolutely positioned z-1001 child still beats its static siblings inside this context. Only while a picker is open, so the normal state's stacking is untouched. */ #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left .quiz-image:has(.metal_dropdown_ssq_options[style*="display: block"]) > .select_metal_shape, #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left .quiz-image:has(.shape_dropdown_ssq_options[style*="display: block"]) > .select_metal_shape { z-index: calc(var(--rb-d-drawer-z) + 1); } /* --- 4.3 AND SO DOES THE PANEL'S WIDTH -------------------------------- `Select metal popup` 14543:43653 is 475 x 194 at the row's x415 -- the Container's own column, not the row's. Its 433 inner frame is the 475 less the 21 side padding _drawers-desktop.css:379 already builds, so the panel's content box needs no restating: only the track does. Percentages of the 890 row, matching §4's own column model exactly: 415 / 890 for the left edge (401 stone + the 14 residual gutter) and 475 / 890 for the width. MEASURED before this: [80,723,878,194] -- the full row, starting under the stone photo. One above the scrim's z, because the shadow is painted BY the ring frame and the frame is the later sibling: at equal z the frame would paint over the panel. `bottom` is left to _drawers-desktop.css:364, which glues the panel to the reserved slack `rbReserveDrawerRoom` measures -- MEASURED, that puts its top 46px inside the Container's bottom edge, which is the overlap the board draws (popup y302 against the frame's 362) and why its top corners are square. */ #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left .quiz-image .metal_dropdown_ssq_options, #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left .quiz-image .shape_dropdown_ssq_options { left: 46.629213%; /* 415 / 890 */ right: auto; width: 53.370787%; /* 475 / 890 */ z-index: calc(var(--rb-d-drawer-z) + 1); /* AND THE SWATCH GAP HAS TO COME WITH IT. `Frame 38492` 14543:43761 is 433 x 72 -- eight 48px dots on a 55 pitch, so SPACE_BETWEEN resolves to (433 - 8 x 48) / 7 = 7px exactly, and the run fills the content box: 8 x 11.085450% + 7 x 1.616628% = 100%. _drawers-desktop.css:154 expresses the same gap as 6.58105939004815% -- 46.857 / 712 -- because on every OTHER board the panel is 754 wide with a 712 content box. This one is 475 with a 433 content box, and the dot's `min(48px, calc((100% - 7 * gap) / 8))` is measured off the SAME gap, so the stale percentage shrank the dots rather than just the spaces between them. MEASURED after the width change and before this: dots 29.1875px on a 58px pitch -- the owner's "the circles of metal are not in it" -- and the 19px the row lost carried the footer up with it, to local y117 against the board's 136. Re-deriving the ONE token is the whole fix: the dot width, the trailing gutter and the wrap all read it, so they land on 48 / 7 / one row together, and the footer drops back onto the board's own y136. Same clamp() model as the token it replaces -- a floor so the run never closes up once the panel is narrower than the dots' own run, and the 1728 figure as the ceiling so the gap cannot grow past the drawn one. The floor is 4px, not the 8px of the 712 box: 8 would be ABOVE this board's drawn 7 and would win at 1728. */ --rb-d-pop-swatch-gap: clamp(4px, 1.616628%, 7px); } /* --- 5. 2.2 — `Frame 38796` 14468:44534: ONE full-width image ---------- 754 x 680, radius 4, IMAGE FILL -- and it is the CHOSEN STONE, the same correction §4 makes. ROUND2: the slot measured right (754 x 679) but held the ring setting at 594 x 679 under `object-fit: contain`, contradicting the screen's own two thumbnails and its right panel, both of which are the stone. So on 2.2 `.quiz-handpicked-image` IS the main image and the ring frame has no node at all. */ #simple-select-quiz.rb-stone-pdp .quiz-left > .quiz-image-conatiner > .quiz-image { /* One column. The pill row keeps a (zero-height) track rather than being removed from the template, so the grid shape is the same on both boards. */ display: grid !important; grid-template-columns: 100%; grid-template-rows: 1fr 0px; background: transparent; border-radius: 0; padding: 0 0 var(--rb-d-pop-reserve, 0px); } #simple-select-quiz.rb-stone-pdp .quiz-left .quiz-image > .quiz-handpicked-image { grid-area: 1 / 1 / 3 / 2; display: block !important; visibility: visible !important; width: 100%; aspect-ratio: 754 / 680; height: auto !important; min-height: 0 !important; box-sizing: border-box; position: relative; margin: 0 !important; padding: 0 !important; border: 0 !important; background: var(--rb-surface-card); border-radius: var(--rb-radius-sm); text-align: initial; overflow: hidden !important; pointer-events: auto; } /* 14468:44534 carries no ring frame and no `Settings` node: the whole 754 is `main image`. Both are taken OUT OF FLOW rather than `display: none`d -- simple-select.js:400 gates on a `.css('display')` read inside `.sss-metal-image` and js:2062 writes the metal swatch inline, so the display value on these nodes is not ours to change (HARNESS trap 7). */ #simple-select-quiz.rb-stone-pdp .quiz-left .quiz-image > .sss-metal-image, #simple-select-quiz.rb-stone-pdp .quiz-left .quiz-image > .select_metal_shape { position: absolute; top: 0; left: 0; visibility: hidden; width: 0; min-width: 0; height: 0; min-height: 0; margin: 0; padding: 0; overflow: hidden; pointer-events: none; } /* `.desktop-stone-details` is zero-BOXED, never `display:none`: simple-select.js:400 gates on a `.css('display')` read of this node and js:1470 writes into it, so the display value is not ours to change (CHECKLIST 107 / 109). Neither stone board carries it — 2.4's ring frame is 401 x 362 of photograph and the specs live in the right column. */ #simple-select-quiz.rb-stone-held:has(#ssq_select_stone.active) .quiz-left .quiz-image .desktop-stone-details, #simple-select-quiz.rb-stone-pdp .quiz-left .quiz-image .desktop-stone-details { visibility: hidden; height: 0; min-height: 0; padding: 0; margin: 0; overflow: hidden; } } /* ============================================================================= NO TRUST STRIP ON 2.2 (STONE DETAILS) ----------------------------------------------------------------------------- "Insured Shipping / Free Redesign / 60 Day Returns" was painting on the stone details screen, spread across the right column at x921 / x1237 / x1537. Removed there on the customer's instruction. NOTE for whoever picks this up: 14468:44467 DOES draw a 754 x 25 strip at y783 on that board, so this is a deliberate deviation, not a spec match -- if the board wins later, delete this block rather than re-deriving it. It also fixes the 992 defect underneath: the three labels wrapped to two lines inside a height-locked ul, so each li was 50 tall against a 25-tall parent and hung 12.5px below it, which is what cut the 100px tail to 87.5. ============================================================================= */ @media (min-width: 992px) { #simple-select-quiz.rb-stone-pdp .ssq_picked_selection > .rb_trust_strip { display: none !important; } /* PILL LABELS IN NORMAL CASE -- applied to the pill AND its descendants. The metal and shape pills rendered "14K WHITE GOLD" and "ROUND". A reset on `.select_metal_option` alone did not reach them: simple-select.js clones the chosen option out of the dropdown LIST, classes and all, and the casing sits on a nested span inside that clone rather than on the node the pill rule targets. The descendant selector is blunt on purpose -- it changes nothing but letter case, and the list itself is left alone. */ #simple-select-quiz .quiz-image .metal_current_option, #simple-select-quiz .quiz-image .metal_current_option *, #simple-select-quiz .quiz-image .shape_current_option, #simple-select-quiz .quiz-image .shape_current_option * { text-transform: none; font-variant-caps: normal; } } /* ============================================================================= THE STEP ARROWS, AT DESKTOP -- 14557:52000 ----------------------------------------------------------------------------- `_stone.css:13` switches these off at EVERY width, and its note says why: "no [Flow 3] frame draws this screen at >=992, so desktop keeps exactly the bar it had". That was true when it was written. 14557:52000 is a 1728-wide header and it draws them -- `bar` is 1000 wide with FIVE children on a 30px itemSpacing: a 36x36 chevron box, three 269.3 step cells, another 36x36 box. So the recorded assumption is superseded, not contradicted. 36 SQUARE DIRECTLY, not the mobile 28-in-36: the phone frame nests a 28x28 r4 box inside a 36x36 wrapper, and this board's `Frame 1171276788` IS the 36x36 r4 #E4DED8 box. The chevron is the same 8x12 data-URI the mobile rules already use, so there is one drawing of it and not two. The first/last suppression is `visibility`, matching mobile: on STONE there is nothing before and on ENGRAVING nothing after, and hiding them with `display` would collapse the 36px cells and slide the three step labels off the board's own x-positions. ============================================================================= */ @media (min-width: 992px) { #simple-select-quiz .quiz_options > .rb-progress-bar > .rb_step_arrow { display: flex; /* 40, not the board's 36. Owner: *"can slightly increase their height."* 40 is the bar's own height, so the chip now fills it exactly rather than leaving 4px of dead band under it, and the pair stay square. */ flex: 0 0 40px; width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0; /* -30px, ON THE OWNER'S CALL. I measured the arrows as already centred on the step labels -- centre 100 against 97 at 390, 134 against 133 at 1416, i.e. 3px and 1px out -- and said so. The owner looked at it with the offset applied and preferred it, so it goes in: their eye on the rendered screen beats my numbers on the box model. It deliberately sits the arrows ABOVE the label row's centre line. AFTER the shorthand, not before: the first attempt put `margin-top` above this block's own `margin: 0`, which reset it, and the boxes did not move at any width. -16, NOT -30, AS OF THE NEXT ASK. Owner: *"the centres of the nav buttons must be inline with the horizontal progress bar, like the green/pearl lines of stone, size and engraving."* So the target moved: not the label ROW's centre (which is what -30 was measured against and rejected) and not the label TEXT, but the 4px rule those labels hang under. MEASURED at 1440 with -30: rule 116..120, centre 118; chip 84..124, centre 104 -- 14px high. The chip's natural top with no margin is 114, so centring a 40px chip on a 4px rule at the items box's top edge wants 116 - 18 = 98, i.e. -16. Arrived at by construction, not by nudging: (40 - 4) / 2 = 18 is the only number in it. */ margin: -16px 0 0; border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; } /* THE CHIP HAS TO READ AS A BUTTON. Owner: *"the arrow on stone / size / engraving must be this, not a plain > ... it's an arrow button"*. 14557:52000 gives `Frame 1171276788` a 36x36 r4 fill of #E4DED8 -- and the same board gives the header band it sits on a FLAT #E4DED8 (see section 1). Built literally, the chip is its own ground: MEASURED on 2.4 the box was there at [1328,116,36,36] and completely invisible, leaving an 8x12 chevron floating on the band -- which is the "plain >" being reported. The board is self-inconsistent here, exactly as it is about the progress indicator's empty tracks (see the `--rb-surface-page` note on those). Same resolution, for consistency: the chip takes the PAGE ground, the one other colour this header already uses and the only one that separates a #E4DED8-family chip from a #E4DED8 band. Radius, size and chevron are the board's, untouched. */ /* AN ARROW, NOT A CHEVRON. Owner: *"the < and > in stone / size / engraving, it's an arrow -- check the Figma design properly."* 14557:52000's chip is `Frame 1171276788`, and the glyph inside it is `Vector 437`, reported by the API as 12 x 0 -- a FLAT bounding box. That is the same shape this file already decodes for `.rb_link_rule` on "Continue browsing": a zero-height bbox on a stroked path is the SHAFT's extent, not the glyph. Read as 12x0 and built literally it becomes a chevron, which is what was shipping. The real geometry, off `strokeGeometry` with `geometry=paths`: shaft 0 -> 12 on the horizontal centre head barbs 3.5 back from the tip, +/-3.5 vertically stroke weight 1, cap ROUND, align CENTER, #3E3C39 (SOLID 0.2431 / 0.2333 / 0.2236) origin relativeTransform puts it at (12, 18) inside the 36 box, i.e. horizontally centred -- (36-12)/2 = 12 -- and on the vertical centre line. With a 1px centred stroke the drawn extent is 13 x 8, which is the viewBox below; the shaft sits at y=4 and the tip 0.5 in from the edge so the round cap is not clipped. Same drawing as `.rb_link_rule`, mirrored for `next` -- and note both chips use the SAME node id in the board, so the direction is the instance's, not a second asset. */ #simple-select-quiz .quiz_options > .rb-progress-bar > .rb_step_arrow > span { display: block; width: 40px; height: 40px; border-radius: var(--rb-radius-sm); /* PEARL DARK again. It was moved to the page ground because the band was also #E4DED8 and the chip vanished into it; with the band now #EDE6E0 the board's own fill reads and that deviation is no longer needed. */ background: var(--rb-border-subtle) no-repeat center / 13px 8px; } #simple-select-quiz .quiz_options > .rb-progress-bar > .rb_step_prev > span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8' fill='none'%3E%3Cpath d='M12.5 4H0.5M0.5 4L4 0.5M0.5 4L4 7.5' stroke='%233E3C39' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #simple-select-quiz .quiz_options > .rb-progress-bar > .rb_step_next > span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8' fill='none'%3E%3Cpath d='M0.5 4H12.5M12.5 4L9 0.5M12.5 4L9 7.5' stroke='%233E3C39' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #simple-select-quiz:has(#ssq_select_stone.active) .quiz_options > .rb-progress-bar > .rb_step_prev, #simple-select-quiz:has(#ssq_engraving.active) .quiz_options > .rb-progress-bar > .rb_step_next { visibility: hidden; pointer-events: none; } } /* ============================================================================= THE FOOTER'S RUNNING TOTAL IS A STACK -- 14557:54718 ----------------------------------------------------------------------------- `Frame 1171276719`: VERTICAL, itemSpacing 8, "Current Est." (Founders Grotesk 16/19, ls -0.21, #3D3B39) over "$1,660" (Canela 28/19, ls -0.21, #0F0E0D). `p.setting_total` -- the "Your Setting" half of the same slot -- has been built to this since the 2.2 pass, off the same frame under its older id 14468:44544. `p.full_total`, the half that actually shows once a stone is held, never was: MEASURED at 1728 it rendered as one 21px FoundersGrotesk ROW -- "Current Est." at x80 and "$2,760" at x188, same size, same colour, side by side. So the two halves of one slot disagreed, and the one on screen for most of the journey was the wrong one. The geometry is `setting_total`'s, reused verbatim rather than restated: 19 + 8 + 26 = 53, which is the frame's own height. `line-height: 26` on the value because SPEC reports 19 on a node that is 26 tall and 26 is what makes the stack 53 -- the box wins and the 19 is recorded. ============================================================================= */ @media (min-width: 992px) { #simple-select-quiz .ssq_bottom_nav p.full_total { display: block; margin: 0 auto 0 0; /* Kills the whitespace between the two block children -- the same reason `setting_total` is font-size: 0; each child restates its own size. */ font-size: 0; line-height: 0; } #simple-select-quiz .ssq_bottom_nav p.full_total > strong { display: block; 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); } #simple-select-quiz .ssq_bottom_nav p.full_total > span.ssq_full_total { display: block; margin: 8px 0 0; /* Frame 1171276719 itemSpacing */ font-family: var(--rb-font-display); font-weight: 300; font-size: 28px; line-height: 26px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-primary); } } /* =========================================================================== [Flow 3] 2.2 — CONTINUE BROWSING SITS WITH THE CTA, AND THE BAND EMPTIES --------------------------------------------------------------------------- Owner: *"on diamond PDP in BYR flow, remove continue browsing, remove the X -- continue browsing must be beside Add to Ring, centred vertically inline with the Add to Ring CTA, and properly spaced. Also make text 16px for devices equal or smaller than 1440px."* The footer slot was built for exactly this and §2.2 above documents it: `.rb_stone_link_slot` is order 2 in `.sss-nav`, collects the free space with `margin-left:auto`, and the nav's own 36px gap puts it 36 left of the CTA -- 14468:41911's board position. All that was missing was revealing this child of it; simple-select-redesign.js no longer lifts the node into the heading. The header band then holds nothing at all. It stays at 72px: the two columns are laid out in normal flow beneath it and that height IS the gap above the Ring Details card (see the band's own note above) -- collapsing it would pull the card to the top of the screen, which is the complaint that made the band 72 in the first place. =========================================================================== */ @media (min-width: 992px) { #simple-select-quiz.rb-stone-pdp .rb_stone_link_slot > .rb_stone_back_link { display: inline-flex; align-items: center; gap: 5px; /* 14468:44492 itemSpacing 5 */ /* The slot's own rule carries CHECK 66's underline, which belongs to "Pick a different stone" -- 14468:44492 draws this link without one, and it is what the link has looked like for the whole time it lived in the heading. Underline stays as the hover affordance. */ text-decoration: none; } #simple-select-quiz.rb-stone-pdp .rb_stone_link_slot > .rb_stone_back_link:hover, #simple-select-quiz.rb-stone-pdp .rb_stone_link_slot > .rb_stone_back_link:focus-visible { text-decoration: underline; } /* CENTRED ON THE CTA, not on the text baseline. The link is a 19px line and the button is 56 tall, so a `flex-start` or a stretched line leaves it riding high against a control twice its height. */ #simple-select-quiz.rb-stone-pdp .ssq_bottom_nav .sss-nav { align-items: center; } #simple-select-quiz.rb-stone-pdp .rb_stone_link_slot { display: flex; align-items: center; } /* the two controls this band used to hold */ #simple-select-quiz.rb-stone-pdp .simple-select-heading .rb_stone_back_link, #simple-select-quiz.rb-stone-pdp .simple-select-heading .close_ssq { display: none; } /* 18 is the board's size at 1728. Below 1440 the footer is carrying the estimate, the link and a 282-wide CTA in a row that is ~290px narrower, so the link steps down with the rest of the chrome. */ @media (max-width: 1440px) { #simple-select-quiz .rb_stone_link_slot > a { font-size: 16px; line-height: 17px; } } } /* =========================================================================== [Flow 3] THE STEP ARROWS GET THE HEADER'S OWN HOVER --------------------------------------------------------------------------- Owner: *"add hover effect colour changes, like for other CTAs, for the navigation buttons too."* Not a new invention: these chips already have two siblings in this band that define the pattern -- `.rb_back` and `.close_ssq` (section 8 above) both swap their ground to the CARD colour on hover, and the close also restrokes its glyph. That is the board's own Variant2 for a chip on this header, so the arrows take the same swap rather than a second, different one. The theme-wide CTA timing comes with it: `transition: all .2s linear` is what main.css:544 puts on every `button.jade`, so the arrows change at the same rate as the CONTINUE button below them. The glyph is a data-URI background with its stroke baked in, so "recolour the arrow" means a second URI rather than a `fill`. Only the stroke value differs from the resting pair above -- #3E3C39 (secondary) to #0F0E0D (primary) -- the geometry is byte-identical, so the two cannot drift apart. `:focus-visible` shares the rule. A keyboard user gets the same affordance a mouse user does, and these are the only controls in the header band a Tab can reach; `:focus` is deliberately NOT used, so a mouse click leaves nothing stuck on. =========================================================================== */ @media (min-width: 992px) { #simple-select-quiz .quiz_options > .rb-progress-bar > .rb_step_arrow > span { transition: background-color .2s linear; } #simple-select-quiz .quiz_options > .rb-progress-bar > .rb_step_arrow:hover > span, #simple-select-quiz .quiz_options > .rb-progress-bar > .rb_step_arrow:focus-visible > span { background-color: var(--rb-surface-card); } #simple-select-quiz .quiz_options > .rb-progress-bar > .rb_step_prev:hover > span, #simple-select-quiz .quiz_options > .rb-progress-bar > .rb_step_prev:focus-visible > span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8' fill='none'%3E%3Cpath d='M12.5 4H0.5M0.5 4L4 0.5M0.5 4L4 7.5' stroke='%230F0E0D' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } #simple-select-quiz .quiz_options > .rb-progress-bar > .rb_step_next:hover > span, #simple-select-quiz .quiz_options > .rb-progress-bar > .rb_step_next:focus-visible > span { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8' fill='none'%3E%3Cpath d='M0.5 4H12.5M12.5 4L9 0.5M12.5 4L9 7.5' stroke='%230F0E0D' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* the chip is a real