/* ============================================================ Home page — exact Figma canvas (1440 wide) + draggable gallery ============================================================ */ /* out of the flow: transform: scale() does not shrink the layout box, so a relatively-positioned canvas would keep reserving its full unscaled height and leave dead space at the bottom on narrow windows. The real scroll height is set on by Site.initCanvas(). */ .canvas { position: absolute; top: 0; left: 0; width: 1440px; transform-origin: top left; } .canvas .tx { position: absolute; font-size: 10px; line-height: 1.35; } .canvas .tx p + p { margin-top: 1.35em; } .canvas .row { display: flex; } .canvas .row i { font-style: normal; flex: none; } /* animated head */ .head-gif { position: absolute; left: 469px; top: 266px; width: 501px; height: 470px; object-fit: contain; pointer-events: none; } /* ---------- draggable gallery ---------- */ .hgallery { position: absolute; left: -24px; top: 842px; width: 1654px; height: 666px; overflow: visible; cursor: grab; } .hgallery.dragging { cursor: grabbing; } .hgallery__clip { position: absolute; left: 24px; /* back to viewport x = 0 */ top: 0; width: 1440px; height: 666px; overflow: hidden; } .hgallery__track { position: absolute; top: 0; left: 0; height: 100%; will-change: transform; } .htile { position: absolute; } .htile img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; } .htile__caption { position: absolute; display: flex; justify-content: space-between; align-items: flex-start; white-space: nowrap; font-size: 10px; line-height: 1.35; }