/* ============================================================================= Ring builder — mobile redesign Figma: "[Mobile UI] PDP ring builder refresh" (file Ex10uQ9OY3OuzSPi4g2hPb, section 14463:32244, 25 frames authored at 390px). WHY THIS IS A SEPARATE FILE, LOADED AFTER simple-select.css ---------------------------------------------------------- simple-select.js carries 214 distinct selector strings and several pieces of logic that read the DOM rather than a state object -- the engraving value is gated on `$('.ssq_eng_field').css('display') != "none"`, the setting price is scraped from the Affirm tag's data-amount, the progress bar maps step NAMES to step NUMBERS by DOM index, and the default stone is `.eq(0)` "because PHP prints it first". Rewriting simple-select.css in place would make every one of those a silent regression risk with no visual tell. That is exactly how the FedEx bug shipped (PR #276): a checkout redesign dropped ten hidden inputs with no visual role, `update_checkout_fedex_shipping()` was gated on one of them being in $_POST, and every counter-pickup order quietly became a home delivery for six weeks. Nothing errored. So: this file only ever ADDS declarations, scoped to mobile. Desktop is untouched by construction, and a rollback is deleting one enqueue line. EVERY VALUE HERE COMES FROM THE FIGMA REST API. Nothing is eyeballed or rounded -- letter-spacing really is -0.20999999344348907px in the source, and is written here as -0.21px. ============================================================================= */ @media (max-width: 991px) { /* --------------------------------------------------------------------------- 1. TOKENS Counts below are node-level occurrences across the 25 frames, excluding hidden layers. They are kept as a record of why each value earned a token. --------------------------------------------------------------------------- */ body.ringbuilder-product #simple-select-quiz, #simple-select-quiz { /* --- colour ------------------------------------------------------------ */ --rb-text-primary: #0F0E0D; /* 911 uses, all 25 screens */ --rb-text-secondary: #3E3C39; /* 475 -- body copy, meta, spec labels */ --rb-border-subtle: #E4DED8; /* 566 -- hairlines, unselected chips */ --rb-surface-card: #FFFFFF; /* 422 -- cards, drawers, sheets */ --rb-surface-page: #FAF3ED; /* 397 -- page ground; also text-on-green */ --rb-surface-raised: #FCF8F7; /* 7 -- grouped block tint */ --rb-surface-input: #FDFAF8; /* 2 -- engraving textarea */ --rb-brand-green: #27423B; /* 323 -- primary CTA, selected border */ --rb-brand-sage: #D8DDCA; /* 52 -- selected chip fill, promo card */ --rb-brand-sage-strong: #C2CEB2; /* 15 -- selected carat button */ --rb-grey-disabled: #D0D0D0; /* 71 -- inactive dots, disabled icons */ --rb-accent-heart: #C65858; /* 26 -- favourite icon */ --rb-badge-sale: #FF0B39; /* 23 -- sale badge ground */ --rb-ink-navy: #142037; /* 7 -- info icon ground */ --rb-accent-gold: #C69858; /* 6 -- decorative vector stroke */ /* metal swatch dots -- exact values, these read as product data */ --rb-metal-yellow-gold: #DCB84E; --rb-metal-rose-gold: #E9C1B1; --rb-metal-platinum: #B9B9B9; --rb-metal-white-gold: #A3A3A3; /* the only shadow colour in the entire board */ --rb-shadow-base: rgba(0, 0, 0, 0.25); /* the single gradient, used 3x */ --rb-gradient-shimmer: linear-gradient(90deg, #E4DED8 0%, #FFFAF5 52%, #E4DED8 100%); /* --- type -------------------------------------------------------------- */ /* Three families only. Founders Grotesk 400/500 (1,346 nodes), Canela 300 display (137), SF Pro Text (status-bar chrome only -- NOT reproduced, that is the phone mockup, not our UI). */ --rb-font-body: 'FoundersGrotesk', sans-serif; --rb-font-display: 'Canela', serif; /* Letter-spacing is one of two values almost everywhere. */ --rb-ls-tight: -0.21px; /* the -0.20999999344348907px the API returns */ --rb-ls-wide: -0.5px; /* --- radii ------------------------------------------------------------- */ --rb-radius-sm: 4px; /* 770 uses -- the default for nearly everything */ --rb-radius-md: 8px; --rb-radius-lg: 10px; --rb-radius-xl: 24px; --rb-radius-pill: 100px; /* --- stroke ------------------------------------------------------------ */ --rb-stroke: 1px; /* 759 uses */ --rb-stroke-thick: 2px; } } /* ============================================================================= FULL-SCREEN BUILDER -- applies at EVERY width, so deliberately outside the max-width:991px block below. The builder is a full-screen flow on both phone and desktop: no promo bar and no site navigation. simple-select.js already hides the PDP's own sections (js:643-645) but leaves the site header and the notification bar up. body.rb_quiz_open is set by simple-select-redesign.js from the quiz's real visibility, so it covers every entry point (button, ?ssq deep link, the affordable-ER path) and clears on close without needing to know about any of them. visibility:hidden + zero height rather than display:none, on purpose: main.js and sidecart.js measure the header (its height feeds the sidecart's top offset), and display:none would report 0 and shift the drawer. This keeps the box measurable while taking it out of view. ============================================================================= */ /* `.da-promo` is the live promo bar (header-promo.php) and the one the customer actually sees: 1728 x 43 welded to the top of the page, still fully visible with body.rb_quiz_open set, because this list only ever named `.site-wide-notification` -- a bar this theme no longer renders on the PDP. Measured at 1728 before this: div.da-promo at 0,0 1728x43, visibility `visible`, while body.rb_quiz_open WAS present. The class was right, the selector was wrong. */ body.rb_quiz_open .da-promo, body.rb_quiz_open .site-wide-notification, body.rb_quiz_open header#masthead { visibility: hidden !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; } /* ...and the gap the collapsed chrome leaves behind. Hiding the bars is not enough on its own: product-single.css:1 / :577 pad the PDP's content area down off them -- `.single-product .content-area { padding-top: 14px }`, 36px from 992 up -- so with the bars gone that padding is just a band of empty page the exact height the promo bar used to be, sitting above the builder. Measured on dev-0 with the bars already hidden: the quiz started at y36 at 1728 and y14 at 390. Gated on rb_quiz_open, so the PDP keeps its own spacing everywhere else -- this is the builder taking the full view, not a change to the product page. The selector is one class weaker than the source's, hence !important. */ body.rb_quiz_open #primary.content-area, body.rb_quiz_open .single-product .content-area { padding-top: 0 !important; } /* the header is sticky/fixed on some breakpoints -- make sure the collapsed box cannot keep reserving space or intercept taps once it is hidden */ body.rb_quiz_open header#masthead { position: absolute !important; top: 0; left: 0; right: 0; pointer-events: none; } /* the quiz sits under the header's offset on the PDP; with the header gone it starts at the top of the viewport */ body.rb_quiz_open section#simple-select-quiz { margin-top: 0 !important; padding-top: 0 !important; } /* ---- first step has no "back" ------------------------------------------------ Stone is step 1 and the entry point, so there is nowhere to go back to. The close control remains, which is the way out of the flow. `.rb_at_first` is set on the quiz root by the redesign JS. Not display:none -- the element is a real