/* rx-sections.css — the six movements under the hero on /styling (rx-sections.js paints them). WHAT THIS FILE OWNS (BUILD_SPEC §2.12): rx-sil*, rx-wm*, rx-pal*, rx-sw*, rx-band, rx-less*, rx-row, rx-card*, is-dim (only ever compounded: .rx-card.is-dim) and rx-notes*. The movement shell (.rx-mov, .rx-mov-head, .rx-eyebrow, .rx-sec), the buttons, the faces and the skeleton sheen are rx-core.css's; nothing here restyles them. THE PALETTE RULE. Every colour below is a token, a black or white alpha, or the neutral rgba(127,127,127,a) rim. The only hue on these sections is garment colour, and it enters from the data as an inline style after RX.core.isHex — never as a literal in this file, so a future re-point of the tokens re-colours all of it. THE MOTION RULE. Every :hover that moves anything sits inside @media (hover:hover) and (pointer:fine): a touch browser fires :hover on tap and leaves it stuck. Every transition is finished under prefers-reduced-motion — leorve.css zeroes durations globally, and the one entrance here that starts hidden (the silhouette's "dress") is gated on html.rx-reveal AND on no-preference, so with motion off it is simply drawn. */ /* ── How this look works on you ────────────────────────────────────────────────────────────── THE FIGURES AND THE WORDS ARE TWO ROWS, NOT THREE CARDS. On a phone three columns of ~108px are exactly right for comparing the drawings at a glance (05 §13) and exactly wrong for reading: the step-two sentence ran to ten lines in a column that narrow. So the drawings stay three-up at every width, numbered, and the three steps stack beneath them on a phone; from 768 the steps sit in the same five-track grid as the figures, each under its own drawing. The drawings are aria-hidden — their meaning is in the steps (05 §19). */ .rx-sil{display:grid;gap:var(--sp-head)} .rx-sil-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end;justify-items:center} .rx-sil-cell{display:grid;justify-items:center;gap:8px;min-width:0} .rx-sil-n{font:500 13px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--ink-dim)} .rx-sil-arrow{display:none} .rx-sil-fig{display:block;height:150px;width:auto;overflow:visible} @media (min-width:768px){ .rx-sil-figs{grid-template-columns:1fr 40px 1fr 40px 1fr;gap:16px} .rx-sil-fig{height:220px} .rx-sil-arrow{display:grid;place-items:center;height:220px;color:var(--line-3)} .rx-sil-arrow svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round} } /* THINNED BY CSS, NOT BY EDITING shapes.js. Its picker art is drawn at stroke 2.8 for a 46px tile; here the same geometry is three to five times larger, and non-scaling strokes keep every line at a hairline whatever the figure's height. Editing shapes.js instead would pull it into test_shape_pickers_agree.py's scope for a purely presentational change. */ .rx-sil-fig circle,.rx-sil-fig path{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round} .rx-sil-body{fill:none;stroke:var(--ink-2);stroke-width:1.25px} /* the outline redrawn OVER the bands, so a pale dye (ivory, butter) still has an edge */ .rx-sil-edge{fill:none;stroke:var(--ink);stroke-width:1.25px} .rx-sil-rule{fill:none;stroke:var(--line-3);stroke-width:1px;stroke-dasharray:2 3} .rx-sil-mark{fill:none;stroke:var(--ink);stroke-width:1.5px} .rx-sil-band{stroke:none} /* a piece with no paintable hex (a craft word): a quiet band, never an invented colour */ .rx-sil-band.is-blank{fill:var(--line)} .rx-sil-pin circle{fill:var(--card);stroke:var(--ink);stroke-width:1.25px} .rx-sil-pin text{fill:var(--ink);font:600 7.5px/1 var(--body)} /* THE DRESS (05 §13): on reveal the bands fill the figure from the top, the lower band 120ms behind, the pins after both. Gated twice: html.rx-reveal is added by RX.core.reveal only once a real IntersectionObserver exists (test_reveal_failsafe's contract), and the whole block is no-preference only — under reduced motion, or with no observer, the bands are simply there. */ @media (prefers-reduced-motion:no-preference){ .rx-sil-band{transform-box:fill-box;transform-origin:50% 0;transition:transform var(--rx-dr) var(--ease)} .rx-sil-band.is-lower{transition-delay:120ms} .rx-sil-pin{transition:opacity var(--rx-d2) var(--ease) 360ms} html.rx-reveal .rx-rv:not(.is-in) .rx-sil-band{transform:scaleY(0)} html.rx-reveal .rx-rv:not(.is-in) .rx-sil-pin{opacity:0} } .rx-sil-steps{list-style:none;margin:0;padding:0;display:grid;gap:22px} @media (min-width:768px){ .rx-sil-steps{grid-template-columns:1fr 40px 1fr 40px 1fr;column-gap:16px} .rx-sil-step:nth-child(2){grid-column:3} .rx-sil-step:nth-child(3){grid-column:5} } .rx-sil-step{display:grid;gap:8px;align-content:start;min-width:0} .rx-sil-cap{margin:0;font:600 10.5px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)} .rx-sil-num{font-variant-numeric:tabular-nums;color:var(--ink);margin-right:4px} .rx-sil-txt{margin:0;font:400 15px/1.55 var(--body);color:var(--ink-2);max-width:44ch;text-wrap:pretty} .rx-sil-in{display:grid;gap:6px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)} .rx-sil-k{margin:0;font:600 10.5px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)} .rx-sil-list{list-style:none;margin:0;padding:0;display:grid;gap:4px} .rx-sil-list li{font:500 14px/1.45 var(--body);color:var(--ink);text-wrap:pretty} .rx-sil-list a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .rx-sil-list a:focus-visible{outline:2px solid var(--ink);outline-offset:3px} .rx-sil-place,.rx-sil-key{margin:0;font:400 13px/1.5 var(--body);color:var(--ink-dim)} .rx-sil-foot{margin:0;font:400 13px/1.5 var(--body);color:var(--ink-dim)} /* skeleton geometry for the first load: the heads and the figure cells at their final size */ .rx-sil-sk-eye{display:block;width:120px;margin:0 0 12px} /* a FIXED width, capped: the movement head's inner div shrink-wraps its content, so a percentage here resolved against nothing and the heading bar rendered as an 86px stub (first skeleton shot) */ .rx-sil-sk-h{display:block;width:420px;max-width:100%;height:clamp(26px,2.8vw,40px)} .rx-sil-sk-fig{display:block;width:76px;height:150px;border-radius:38px 38px var(--r) var(--r)} @media (min-width:768px){ .rx-sil-sk-fig{width:112px;height:220px;border-radius:56px 56px var(--r) var(--r)} } /* ── From your wardrobe ────────────────────────────────────────────────────────────────────── The customer's own cut-outs, `contain` on paper-2 — the product-shot grammar, never cropped: a cut-out is the garment and nothing else, and cropping it would cut the garment. Below 768 the grid becomes a swipe row (brief §17), bleeding to the screen edge like the More looks row. */ .rx-wm{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px} .rx-wm-i{display:grid;gap:8px;align-content:start;min-width:0} .rx-wm-face{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r);background:var(--paper-2);overflow:hidden} .rx-wm-face img{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;padding:10%;object-fit:contain} .rx-wm-tag{position:absolute;left:8px;top:8px;z-index:1;padding:4px 8px;border-radius:var(--r-pill);background:var(--card); font:600 10px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)} .rx-wm-slot{margin:4px 0 0;font:600 10.5px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)} .rx-wm-line{margin:0;font:400 14px/1.5 var(--body);color:var(--ink-2);text-wrap:pretty} .rx-wm-i .rx-btn{justify-self:start;margin-top:4px} .rx-wm-say{margin:0;font:400 15px/1.6 var(--body);color:var(--ink-2);max-width:56ch;text-wrap:pretty} .rx-wm-act{margin:16px 0 0} .rx-wm-foot{margin:var(--sp-head) 0 0} @media (max-width:767.98px){ .rx-wm{grid-auto-flow:column;grid-auto-columns:160px;grid-template-columns:none;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px;padding:0 20px 4px;scroll-padding-inline:20px} .rx-wm::-webkit-scrollbar{display:none} .rx-wm-i{scroll-snap-align:start} } /* ── Colours ───────────────────────────────────────────────────────────────────────────────── The swatch disc is the only coloured thing in a chip, and it is the garment's real hex. The selection ring never touches the dye: a card-coloured gap, then a 1px ink ring (the app's .swatch geometry), so a pale disc and a dark one read as selected the same way. */ .rx-pal-sub{margin:-12px 0 var(--sp-head);font:400 15px/1.6 var(--body);color:var(--ink-2);max-width:56ch;text-wrap:pretty} .rx-pal{display:flex;flex-wrap:wrap;gap:var(--sp-head) 56px} .rx-pal-group{min-width:0} .rx-pal-k{margin:0 0 14px;font:600 10.5px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)} .rx-pal-row{display:flex;flex-wrap:wrap;gap:18px 22px} .rx-sw{display:grid;justify-items:center;align-content:start;gap:10px;width:76px;padding:0;border:0;background:none; color:inherit;font:inherit;cursor:pointer} .rx-sw-disc{display:block;width:56px;height:56px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(127,127,127,.3); transition:transform var(--rx-d1) var(--ease),box-shadow var(--rx-d1) var(--ease)} .rx-sw-name{font:500 12.5px/1.3 var(--body);color:var(--ink);text-align:center;overflow-wrap:anywhere} /* ONE LINE (V PR-23): at .12em "WE DYE THIS" was wider than the 76px chip and broke in two under three of the swatches. Tighter tracking fits it; nowrap keeps it whole if a font runs wide. */ .rx-sw-tag{font:600 10px/1.2 var(--body);letter-spacing:.06em;white-space:nowrap;text-transform:uppercase;color:var(--ink-dim);text-align:center} .rx-sw[aria-pressed="true"] .rx-sw-disc{box-shadow:inset 0 0 0 1px rgba(127,127,127,.3),0 0 0 3px var(--card),0 0 0 4px var(--ink)} @media (hover:hover) and (pointer:fine){ .rx-sw:hover .rx-sw-disc{transform:scale(1.06)} } .rx-sw:active .rx-sw-disc{transform:scale(var(--rx-press));transition-duration:var(--rx-dp)} .rx-sw:focus-visible{outline:none} .rx-sw:focus-visible .rx-sw-disc{outline:2px solid var(--ink);outline-offset:6px} /* THE NOTE HOLDS ITS HEIGHT. It is rewritten on every hover; three lines reserved up front means the colour rows above it never jump as the pointer travels along them. */ /* NO EMPTY BOX AT REST (V PR-23). The resting hint ("Choose a colour…") is one quiet line with no frame — a 540×90 bordered box holding only an instruction read as a container waiting for content that never came. The frame is drawn once a colour is chosen (.is-on, set by rx-sections renderNote); the reserved height stays, so nothing jumps either way. */ .rx-sw-note{display:grid;align-content:start;gap:4px;min-height:calc(3 * 1.55em + 28px);box-sizing:border-box; margin:var(--sp-head) 0 0;padding:0;border:1px solid transparent;border-radius:var(--r); font:400 13px/1.55 var(--body);color:var(--ink-dim);max-width:60ch} .rx-sw-note.is-on{padding:14px 16px;border-color:var(--line-2);font-size:13.5px;color:var(--ink-2)} .rx-sw-note b{color:var(--ink);font-weight:600} .rx-sw-line{display:block} .rx-sw-k{margin-right:6px;font:600 10.5px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)} /* ── Less recommended ──────────────────────────────────────────────────────────────────────── THE PAGE'S ONE TONAL BAND (05 §3.5, §10.3): paper-2, full-bleed, padding 72/72. The ::before reaches past .wrap's padding to both screen edges; body{overflow-x:hidden} (leorve.css §3) clips the 100vw overhang, exactly as .rx-room's paper ground does. Type on it is measured against paper-2, not white: --ink-dim 5.94:1, --ink-2 8.93:1. */ .rx-band{position:relative;isolation:isolate;margin-top:var(--sp-mov);padding:var(--sp-mov) 0} .rx-band::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--paper-2)} .rx-band[hidden]{display:none!important} .rx-less-lead{margin:0 0 var(--sp-head);font:400 clamp(17px,1.5vw,20px)/1.5 var(--display);letter-spacing:-.01em;color:var(--ink);max-width:52ch;text-wrap:pretty} /* "INSTEAD OF → TRY", WITH NO STRIKE-THROUGH. A line-through reads as a prohibition, which is the register this section retired with its old title "What to avoid": the left cell is muted, the right cell is ink, and the arrow between them is the whole argument. */ .rx-less{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)} .rx-less-row{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;padding:18px 0;border-bottom:1px solid var(--line-2)} @media (min-width:768px){ .rx-less-row{grid-template-columns:96px minmax(0,1fr) 24px minmax(0,1fr);column-gap:20px;align-items:start} } .rx-less-k{margin:0;font:600 10.5px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)} .rx-less-lab{margin:0 0 6px;font:600 10px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)} .rx-less-from,.rx-less-to{min-width:0} .rx-less-words{display:inline;list-style:none;margin:0;padding:0} /* a cut is one word to a customer: "Off-shoulder" must not break into "Off-" and "shoulder" */ .rx-less-words li{display:inline;white-space:nowrap} /* The dot ENDS a word rather than starting the next, so a wrapped line begins with a cut, never with "· High Neck" (the first 390 render). The space the script puts between items is the break. */ .rx-less-words li:not(:last-child)::after{content:"\00B7";content:"\00B7" / "";margin:0 .2em 0 .4em;color:var(--ink-dim);font-weight:400} .rx-less-words.is-from{font:400 15px/1.55 var(--body);color:var(--ink-dim)} .rx-less-words.is-to{font:600 15px/1.55 var(--body);color:var(--ink)} .rx-less-more{margin-left:8px;font:400 13px/1.55 var(--body);color:var(--ink-dim);white-space:nowrap} .rx-less-ico{display:none} @media (min-width:768px){ .rx-less-ico{display:grid;place-items:center;height:22px;margin-top:17px;color:var(--ink-dim)} .rx-less-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} } .rx-less-place{margin:20px 0 0;font:400 15px/1.55 var(--body);color:var(--ink-2)} .rx-less-place .rx-less-k{display:inline-block;margin-right:12px} /* keep_off_face: label, chips, reason and caveat in ONE wrapper (08 #11) — together or not at all */ .rx-less-face{display:grid;gap:12px;margin-top:var(--sp-head);padding-top:var(--sp-head);border-top:1px solid var(--line-2)} .rx-less-h{margin:0;font:600 21px/1.25 var(--display);letter-spacing:-.015em;color:var(--ink)} .rx-less-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .rx-less-chips li{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 8px; border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--card);font:500 13.5px/1 var(--body);color:var(--ink-2)} .rx-less-chips i{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(127,127,127,.3)} .rx-less-why{margin:0;font:400 15px/1.55 var(--body);color:var(--ink-2);max-width:56ch} .rx-less-cav{margin:0;font:400 13px/1.5 var(--body);color:var(--ink-dim);max-width:56ch} .rx-less-foot{margin:var(--sp-head) 0 0;font:400 13px/1.5 var(--body);color:var(--ink-dim);max-width:68ch} /* ── More looks for you ────────────────────────────────────────────────────────────────────── One horizontal row, scroll-snapped, bleeding to the screen edge below 1200 (it lives inside .wrap's 20px padding, so the negative margin reaches exactly the edge and no further — the row scrolls inside itself and the page never does). Concentric radii: card 20, inset 6, media 14. */ .rx-row{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(240px,24vw,300px);gap:20px; overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none; margin:0 -20px;padding:4px 20px 24px;scroll-padding-inline:20px} .rx-row::-webkit-scrollbar{display:none} @media (min-width:1200px){ .rx-row{margin:0;padding:4px 0 24px;scroll-padding-inline:0} } .rx-card-nav{display:none;gap:8px;flex:0 0 auto} @media (min-width:768px){ .rx-card-nav{display:flex} } .rx-card-cell{display:flex;min-width:0;scroll-snap-align:start} .rx-card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:14px;width:100%;margin:0;padding:6px 6px 20px; background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);color:inherit;font:inherit;text-align:left;cursor:pointer; transition:transform var(--rx-d1) var(--ease),box-shadow var(--rx-d1) var(--ease),border-color var(--rx-d1) var(--ease),opacity var(--rx-d2) var(--ease)} /* WIDTH IS STATED, NOT INHERITED FROM STRETCH. .rx-face carries container-type:inline-size (so a card's words can drop out on a tile too small for them), and size containment makes its intrinsic width ZERO. Inside a