/* ========================================================================== wheel.css — DESIGN page components (the horizontal card wheel). Fonts, :root tokens and the reset now live in css/base.css — see the note at the top of style.css. ========================================================================== */ /* ---------------- stage ---------------------------------------------------- */ .stage{ position:relative; width:100%; height:100svh; overflow:hidden; background:linear-gradient(to bottom, var(--c-white) 0%, var(--c-fog) 162.59%); display:flex; align-items:center; justify-content:center; } .stage__title{ position:relative; z-index:5; /* behind the wheel */ margin:0; text-align:center; font-weight:400; text-transform:uppercase; letter-spacing:-.04em; font-size:clamp(2.75rem,6.7vw,8rem); line-height:.5; padding:.35em 0; background:linear-gradient(to top, rgba(195,195,195,0) 10%, var(--c-fade) 82%); -webkit-background-clip:text; background-clip:text; color:transparent; } /* Child selector, not descendant. `.stage__title span` also matched the inline .title__word wrapper added for the tick block, turning it into a block that filled the line — so the tick hung off the right edge of the LONGEST line instead of off the "p" of CRAP. */ .stage__title > span{ display:block; } .stage__title > span:first-child{ margin-bottom:.267em; } /* ---------------- wheel ------------------------------------------------------ */ .wheel-viewport{ position:absolute; inset:0; z-index:20; perspective:1800px; perspective-origin:50% 50%; touch-action:none; /* No grab/grabbing cursor. The ring is driven by scroll and by pointer movement, not by picking it up, so a hand cursor promises a gesture that is not there. */ } .wheel-stage{ position:absolute; top:50%; left:50%; width:0; height:0; transform-style:preserve-3d; will-change:transform; } .wheel-card{ position:absolute; top:0; left:0; width:var(--card-w,190px); height:var(--card-h,127px); overflow:hidden; border-radius:var(--card-r,0); background:#0000; /* Same reason as the sphere: with the default 50% origin the trailing translate(-50%,-50%) composes with the origin shift and offsets every card in stage space, so the ring would orbit its own centre. */ transform-origin:0 0; backface-visibility:visible; } .wheel-card img{ width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; -webkit-user-drag:none; } /* ---------------- the cursor blobs (js/work-cursor.js) ---------------------- Above the wheel and the title so it can invert both, below the bar and the film grain so the page's chrome is never flipped with them. INSIDE .stage, and that matters more than the z-index. A blend mode composites against its own stacking context's backdrop; .stage is what paints the page's gradient, so difference here has the whole page to invert. Hung on instead it would blend against nothing wherever the page had not painted, and the blobs would read as solid white patches. */ .work-blobs{ position: absolute; inset: 0; /* z-index 1: above .stage's own gradient and BELOW everything the page draws — the title at 5, the wheel at 20. The characters are the page's ground now, not something laid over it, so the cards and the type sit on top of them the way they sit on the gradient. It was 20 when the blobs were the foreground and had to invert what they covered; that is the whole change in the stacking, and it is why the blend mode below went back to normal at the same time. A background layer has the gradient as its backdrop and nothing else, so `difference` there would only ever have been inverting a gradient. */ z-index: 1; display: block; width: 100%; height: 100%; pointer-events: none; visibility: hidden; }