/* ============================================================================================ PRODUCT WALKTHROUGH - /loquelle and /iris -------------------------------------------------------------------------------------------- Deliberately NOT the pinned home-page treatment. Someone on /loquelle navigated there on purpose; trapping them in a 400vh scroll-jack to read how the product works is hostile. Here the steps scroll normally and only the VISUAL is sticky, so the reader keeps control of the page. Consequences of that choice, which are the point: - No scroll listener and no per-frame work at all. An IntersectionObserver fires when a step reaches the middle of the screen; everything else is a CSS transition. - position:sticky needs an ancestor that is not a scroll container. body no longer sets overflow-x (see nx-2.css) - that fix is load-bearing here too. - No transform on any ancestor of a position:fixed element. Transforms are confined to .wlk-fig, which never contains the download modal on /cue. - Without JS every step and every figure is simply visible in order. Nothing is hidden behind a class the browser might never add. ============================================================================================ */ .wlk{display:grid;grid-template-columns:1fr;gap:34px} /*
    for semantics (a numbered process), but the markers must go: each step already renders its own numbered circle, so the browser's "1." sat beside it as double numbering. */ .wlk-steps{display:grid;gap:0;list-style:none;margin:0;padding:0} .wlk-steps>li::marker{content:''} .wlk-step{ padding:34px 0;border-top:1px solid var(--line); /* No-JS default: fully legible. The driver only ever DIMS a step, never reveals one. */ } .wlk-step:first-child{border-top:0;padding-top:6px} .wlk-num{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px; font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px} .wlk-num i{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:grid; place-items:center;font-style:normal;font-size:10.5px;color:var(--muted-2); transition:border-color .35s ease,color .35s ease,background .35s ease} .wlk-step h3{font-family:var(--display);font-size:clamp(23px,2.5vw,32px);line-height:1.16; letter-spacing:-.025em;margin-bottom:12px} .wlk-do,.wlk-how{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start; font-size:15.5px;line-height:1.62;color:var(--muted);margin-top:9px} .wlk-do b,.wlk-how b{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;padding:3px 8px;border-radius:6px;white-space:nowrap;margin-top:3px} .wlk-do b{color:#DE6A1E;background:rgba(222,106,30,.12)} .wlk-how b{color:var(--muted-2);background:var(--panel-2);border:1px solid var(--line)} /* ---- the sticky visual ---- */ .wlk-viz{position:relative;display:grid;gap:18px} .wlk-fig{ margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md); padding:20px;overflow:hidden; } .wlk-fig img,.wlk-fig svg{width:100%;height:auto;display:block} .wlk-fig svg{max-height:340px} .wlk-cap{font-size:13px;color:var(--muted-2);margin-top:12px;font-family:var(--mono);letter-spacing:.04em} @media(min-width:1000px){ .wlk{grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:60px;align-items:start} .wlk-viz{ position:sticky;top:104px; /* clears the fixed nav */ height:min(70svh,600px);display:block; } .wlk-fig{ position:absolute;inset:0;display:grid;place-items:center;align-content:center; /* Zoom in / zoom out, driven by a class the observer toggles - no scroll maths involved. */ opacity:0;transform:scale(.94);pointer-events:none; transition:opacity .5s ease,transform .6s cubic-bezier(.2,.9,.25,1); } .wlk-fig.is-cur{opacity:1;transform:scale(1);pointer-events:auto} .wlk-fig.is-past{opacity:0;transform:scale(1.06)} .wlk-fig svg{max-height:min(52svh,430px)} .wlk-fig img{max-height:min(52svh,430px);width:auto;max-width:100%;margin:0 auto} /* Only dim once JS is running - the class is added by the driver, never authored. */ .wlk.is-on .wlk-step{opacity:.42;transition:opacity .45s ease} .wlk.is-on .wlk-step.is-cur{opacity:1} .wlk.is-on .wlk-step.is-cur .wlk-num i{border-color:#DE6A1E;color:#DE6A1E;background:rgba(222,106,30,.1)} .wlk.is-on .wlk-step.is-past .wlk-num i{border-color:rgba(63,164,106,.5);color:#3FA46A} } /* Same three layers as the home glyphs, and the same reasoning: assemble, breathe, halo - never a shake. See nx-handoff.css for the full note. */ @keyframes wlkFloat{0%,100%{transform:translate3d(0,-4px,0) scale(1)}50%{transform:translate3d(0,4px,0) scale(1)}} @keyframes wlkAssemble{from{opacity:0}to{opacity:1}} @media(min-width:1000px){ .wlk-fig.is-cur svg{animation:wlkFloat 8.5s ease-in-out infinite} .wlk-fig.is-cur svg>*{animation:wlkAssemble .5s ease backwards} .wlk-fig.is-cur svg>*:nth-child(1){animation-delay:.05s} .wlk-fig.is-cur svg>*:nth-child(2){animation-delay:.12s} .wlk-fig.is-cur svg>*:nth-child(3){animation-delay:.19s} .wlk-fig.is-cur svg>*:nth-child(4){animation-delay:.26s} .wlk-fig.is-cur svg>*:nth-child(n+5){animation-delay:.33s} /* The big product mockups are raster-dense; float them but do not take them apart. */ .wlk-fig.is-cur img{animation:wlkFloat 10s ease-in-out infinite} } /* MOBILE - the figures are hidden, deliberately, and this is the third attempt at this block. History, so nobody repeats it: 1. No rule at all. The base display:grid rendered all eight diagrams as full-width boxes piled after the last step. A comment here claimed otherwise; the CSS did nothing. 2. A sticky band above the steps showing only the current figure. Correct in principle and the band positioned fine, but the figure inside never appeared - percentage max-height on an auto-sized child of an absolutely positioned grid item is fragile on iOS Safari. It shipped as an empty 170px box eating a fifth of every phone screen, which is worse than either the pile or nothing. 3. This. The pane is hidden and the steps carry the page. The steps already explain themselves in full sentences - the figures are support, not content, and on a phone the text is what someone is there to read. I have no way to render below 1000px, so a fourth speculative attempt would just be spending someone else's testing time. If the visual is wanted on mobile later, it needs object-fit:contain with a definite height, verified on a real device before it ships. */ @media(max-width:999px){ .wlk{grid-template-columns:minmax(0,1fr);gap:0} .wlk-viz{display:none} .wlk-step{padding:24px 0} .wlk-step h3{font-size:clamp(20px,5.6vw,26px)} /* The YOU / CUE badge sat on its own line above the sentence, leaving sixteen orphaned chips down the page. Inline it so each line reads as one thought. This part was right. */ .wlk-do,.wlk-how{display:block;font-size:15px;margin-top:10px} .wlk-do b,.wlk-how b{display:inline-block;margin:0 8px 0 0;vertical-align:1px} } @media(max-width:430px){ .wlk-step{padding:22px 0} .wlk-do,.wlk-how{font-size:14.5px} .wlk-num{font-size:10.5px;letter-spacing:.14em} } @media(prefers-reduced-motion:reduce){ /* Reduce motion means stop MOVING things, not destroy the layout. Unpicking the sticky pane here would hand a phone user with reduce-motion enabled the eight-box pile this file exists to prevent - punishing the accessibility setting. Transitions and animations go; the positioning stays, and position:sticky is not animation. */ .wlk-fig{transition:none!important} .wlk.is-on .wlk-step{opacity:1!important;transition:none} .wlk-num i{transition:none} .wlk-fig.is-cur svg,.wlk-fig.is-cur svg>*,.wlk-fig.is-cur img{animation:none!important} .wlk.is-on .wlk-step{opacity:1!important;transition:none} .wlk-num i{transition:none} } @media(prefers-reduced-motion:reduce) and (min-width:1000px){ /* On a wide screen there is room to simply stack figure-after-figure with no pinning at all. */ .wlk-viz{position:static;height:auto;display:grid;gap:18px} .wlk-fig{position:relative;inset:auto;opacity:1!important;transform:none!important;pointer-events:auto} }