/* ================================================== =Floating ice cream =scoops Used differently by landing vs apply pages. (Hidden by default on landing as of this writing.) @related stacking_order ================================================== */ /* a fixed layer escapes ancestor clipping and browsers disagree on the overhang (Chrome: page stays 350px; Safari: strip of empty canvas), so this fixed sheet clips it. Not `overflow` on /: that propagates to the viewport */ .ice-cream-clip { position: fixed; inset: 0; z-index: var(--z-ice-cream); overflow: hidden; pointer-events: none; } .ice-cream-layer { position: absolute; top: 0; left: 50%; z-index: var(--z-ice-cream); display: none; width: var(--container-w); height: 0; transform: translateX(-50%); pointer-events: none; } .has-ice-cream .ice-cream-layer { display: block; } /* GIFs sit on a 500x500 canvas with a wide transparent margin; clip-path drives hit-testing as well as painting, so trimming it hands stray clicks back. --scoop-top/right/bottom/left: tightest trim that never cuts the artwork, measured from the union of every frame. --scoop-round: softens the corners; up to 24% clips nothing on pink and green. @related pixel_parity */ .ice-cream { position: absolute; --scoop-top: 0%; --scoop-right: 0%; --scoop-bottom: 0%; --scoop-left: 0%; --scoop-round: 22%; overflow: hidden; clip-path: inset(var(--scoop-top) var(--scoop-right) var(--scoop-bottom) var(--scoop-left) round var(--scoop-round)); cursor: grab; pointer-events: auto; touch-action: none; } .ice-cream.is-dragging { cursor: grabbing; } .ice-cream__image { position: absolute; max-width: none; -webkit-user-drag: none; user-select: none; } /* ------------------------------------- Individual placements @match scoop_hit_trim (partial) - scoop artwork bounds, restated against each page's own framing of the same GIFs ------------------------------------- */ .ice-cream--pink { top: 68.5px; left: -290px; width: 391.5px; height: 388.5px; --scoop-top: 12.155%; --scoop-right: 8.800%; --scoop-bottom: 10.880%; --scoop-left: 5.200%; } .ice-cream--pink .ice-cream__image { top: -0.74%; left: 0; width: 100%; height: 100.74%; } .ice-cream--green { top: 150.5px; left: 845.5px; width: 358px; height: 342.5px; --scoop-top: 5.775%; --scoop-right: 8.358%; --scoop-bottom: 5.192%; --scoop-left: 12.571%; } .ice-cream--green .ice-cream__image { top: -6.04%; left: -0.04%; width: 100.09%; height: 105.49%; } .ice-cream--brown { top: 448.5px; left: 43.5px; width: 434px; height: 384px; /* bottom stays 0: the artwork runs past the box and overflow crops it, matching Figma's framing */ --scoop-top: 11.116%; --scoop-right: 2.360%; --scoop-bottom: 0%; --scoop-left: 4.335%; } .ice-cream--brown .ice-cream__image { top: -24.04%; left: -11.38%; width: 122.77%; height: 141.76%; } /* ------------------------------------- =Mobile @match scoop_hit_trim (partial) - scoop artwork bounds, restated against each page's own framing of the same GIFs @related stacking_order ------------------------------------- */ @media ( max-width: 1076px ) { .ice-cream-clip { z-index: var(--z-ice-cream-mobile); } .ice-cream-layer { z-index: var(--z-ice-cream-mobile); width: 100%; max-width: var(--mobile-col-w); } .ice-cream { height: auto; /* no drag on mobile; touches pass through to the feed beneath */ pointer-events: none; } .ice-cream--pink { /* top: -60.75px; */ top: -34.75px; /* left: 63.94%; */ left: 70%; width: 51.774%; /* 181.21 / 350 */ aspect-ratio: 181.21 / 179.88; } .ice-cream--brown { /* top: 343.25px; */ top: 337px; left: -12.04%; /* -42.14 / 350 */ width: 57.732%; /* 202.06 / 350 */ aspect-ratio: 202.06 / 178.74; } .ice-cream--green { /* top: 416.25px; */ top: 436px; left: 54.334%; /* 190.17 / 350 */ width: 67.16%; /* 235.06 / 350 */ aspect-ratio: 235.06 / 224.89; } }