/** Shopify CDN: Minification failed Line 135:57 Unexpected "12n" **/ /* ============================================================================ haiku-gallery — the collection page as an infinite scroll gallery Ported from the Codrops "Infinite Scroll Gallery with Page Transitions" demo (ISC). Layout, sizing and timings are the reference's; the changes are noted where they occur. THE PROGRESSIVE-ENHANCEMENT CONTRACT, which every rule below respects: no `.hg-live` on → a plain vertical list of linked products, normal document scrolling, no JS required `.hg-live` → the gallery takes the page over haiku-gallery.js adds that class only after GSAP, Flip, Observer and SplitText are all present, reduced-motion is not requested, we are not in the theme editor, and the images have settled. Anything short of that and the shopper still gets a working, scrollable, clickable collection. Contents 1. Stage + progressive enhancement 2. The gallery — layout, the sizing rhythm 3. The preview overlay (Flip target) 4. Modes, motion, small screens ========================================================================== */ /* ---------------------------------------------------------------------------- 1. Stage + progressive enhancement ---------------------------------------------------------------------------- */ /* The gallery drives itself, so the document must not also scroll — but ONLY once we have taken over. Until then the page behaves normally. */ html.hg-live, html.hg-live body { height: 100%; overflow: hidden; overscroll-behavior: none; touch-action: none; scrollbar-width: none; } html.hg-live body::-webkit-scrollbar { display: none; } /* The theme's header sits over the gallery; the footer is unreachable once scrolling is hijacked, so it is hidden rather than left dangling. */ html.hg-live .main-footer, html.hg-live #shopify-section-footer, html.hg-live .footer-group { display: none; } .hg { position: relative; width: 100%; } /* Pre-takeover: a legible stack of products, centred, nothing exotic. */ .hg:not(.is-live) .gallery { gap: clamp(32px, 6vh, 72px); padding-top: clamp(24px, 6vh, 64px); padding-bottom: clamp(48px, 10vh, 120px); } .hg:not(.is-live) .gallery__slide { /* No horizontal scatter without the loop to balance it. */ transform: none; } /* The overlay is inert until the gallery is live. */ .hg:not(.is-live) .content { display: none !important; } .hg.is-live { height: 100vh; height: 100dvh; overflow: hidden; } /* ---------------------------------------------------------------------------- 2. The gallery ---------------------------------------------------------------------------- */ .gallery { display: flex; flex-direction: column; align-items: center; gap: 12vh; width: 100%; padding-top: 14vh; margin: 0; list-style: none; } .gallery__slide { flex-shrink: 0; transform: translateX(var(--stagger, 0vw)); cursor: pointer; outline: none; padding: 0; margin: 0; } .gallery__slide:focus-visible .gallery__img-wrapper { outline: 2px solid var(--color-accent); outline-offset: 6px; } /* The slide's anchor is what makes this work without JS. Once the gallery is live the click is intercepted and the anchor is purely semantic. */ .gallery__link { display: block; color: inherit; text-decoration: none; } /* THE SIZING RHYTHM. ⚠️ nth-of-type, NOT nth-child. .gallery can hold non-figure children, so nth-child(12n+1) did not land on the first slide: it measured --img-w and --stagger as empty strings while slides 2-4 were correct. nth-of-type counts only the
slides. Same trap that made :first-child match nothing in the products row. ⚠️ AND NO NESTED COMMENTS. CSS has none. An explanatory /* ... */ opened inside this block ended it early, and everything after the first close was parsed as CSS — the parser then swallowed the whole 12n+1 rule looking for a declaration block. That is what left slide one unsized. If a note is needed here, it goes on its own line outside the block. The reference hardcodes --stagger and --img-w for exactly 17 slides. A collection has an arbitrary number of products, so the pattern here CYCLES every 12, and past the twelfth product the rhythm repeats instead of collapsing into a plain centred column. Widths start at 470px because that is what the longest caption needs to sit on ONE line: title 393 + price 46 + gap 18 = 457, measured in the browser. Below that the label wraps and the tiles go ragged. Staggers are pulled in to match — a 640px tile at +-36vw runs off a 1440 viewport, so |stagger| stays under (720 - width/2). The alternation of negative and positive --stagger is what keeps the eye moving side to side rather than tracking straight down. */ /* BASE, before the cycle. Slot 1 was measuring --img-w as an empty string on the live page even though the rule is present in the served stylesheet and the slide is the first
in .gallery — cause not established. A base declaration makes that unfalsifiable: every slide has a usable width and stagger, and the nth-of-type rules below simply override it. No slide can be unsized regardless of what the cycle does or does not match. */ .gallery__slide { --stagger: -26vw; --img-w: 480px; } .gallery__slide:nth-of-type(12n + 1) { --stagger: -26vw; --img-w: 480px; } .gallery__slide:nth-of-type(12n + 2) { --stagger: 18vw; --img-w: 540px; } .gallery__slide:nth-of-type(12n + 3) { --stagger: -24vw; --img-w: 470px; } .gallery__slide:nth-of-type(12n + 4) { --stagger: 22vw; --img-w: 620px; } .gallery__slide:nth-of-type(12n + 5) { --stagger: -28vw; --img-w: 490px; } .gallery__slide:nth-of-type(12n + 6) { --stagger: 24vw; --img-w: 500px; } .gallery__slide:nth-of-type(12n + 7) { --stagger: -26vw; --img-w: 480px; } .gallery__slide:nth-of-type(12n + 8) { --stagger: 16vw; --img-w: 640px; } .gallery__slide:nth-of-type(12n + 9) { --stagger: -22vw; --img-w: 470px; } .gallery__slide:nth-of-type(12n + 10) { --stagger: 20vw; --img-w: 510px; } .gallery__slide:nth-of-type(12n + 11) { --stagger: -26vw; --img-w: 580px; } .gallery__slide:nth-of-type(12n + 12) { --stagger: 24vw; --img-w: 520px; } .gallery__img-wrapper { position: relative; margin: 0; width: var(--img-w, 200px); height: auto; aspect-ratio: 0.8; overflow: hidden; pointer-events: none; user-select: none; background: var(--color-background-secondary); } .gallery__img-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; /* Overscaled at rest so the Flip morph can settle it to 1 rather than revealing an edge. */ transform: scale(1.2); } /* Without the gallery there is no morph to settle into, so sit at 1:1. */ .hg:not(.is-live) .gallery__img-wrapper img { transform: none; } .gallery__caption { display: block; margin-top: 0.5rem; color: rgba(var(--color-text-rgb), 0.66); font-size: 12px; letter-spacing: 0.04em; } .gallery__price { margin-left: 0.75em; opacity: 0.7; } .gallery__sold { margin-left: 0.75em; text-transform: uppercase; letter-spacing: 0.16em; font-size: 10px; opacity: 0.6; } /* ---------------------------------------------------------------------------- 3. The preview overlay `.content__preview-img` is the Flip target: the thumbnail's bounds are captured, then this element is animated from them. It is full-viewport-height at the same 0.8 aspect, so the product photograph is finally seen whole — which is the point of the interaction. ---------------------------------------------------------------------------- */ /* Deliberately NO background. The opening timeline fades the other slides out over 0.5s while the preview morphs — an opaque layer here would snap them away on frame one and there would be nothing to fade. The page ground shows through, which is what the reference relies on too. */ /* ⚠️ SCOPED TO .hg — `.content` IS NOT OURS ALONE. Unscoped, this rule reached `snippets/cart-form.liquid:39`, where the vendor theme wraps each cart line's title, variant and price in a plain `
`. Every cart item's text was therefore `display: none; position: fixed` — measured on /cart: the title span 0x0 inside a `.content` that was 0x0 and `display: none`, while the photograph beside it rendered normally. Reported as "item shows photo, but no title". Both preview panels sit inside `.hg` — verified in a browser on /collections/all (`hg is-live`) and on a product page (`hg is-live hlb-scope`) — so scoping costs nothing and the panels behave exactly as before. haiku-preview.js still reads `display` on `.content` as its open/closed state; that contract is untouched. */ .hg .content { display: none; position: fixed; inset: 0; z-index: 1000; } .content__preview-img { position: fixed; margin: 0; top: 0; left: 0; height: 100vh; height: 100dvh; aspect-ratio: 0.8; overflow: hidden; } .content__preview-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); } .content__group-list { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; /* Clears the preview column: 80vh is the preview's width at aspect 0.8. */ padding-inline: calc(80vh + 1.5vw) var(--hg-pad, 1.5rem); padding-block: var(--hg-pad, 1.5rem); } .content__back { font: inherit; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; align-self: flex-start; border: none; background: none; color: var(--color-text); cursor: pointer; padding: 0; line-height: inherit; } .content__back:hover, .content__back:focus-visible { text-decoration: underline; text-underline-offset: 4px; } .content__group { display: none; } .content__group.active { display: block; } .content__title { font-family: var(--font-stack-headings); font-weight: 400; font-size: clamp(2.5rem, 10vw, 6rem); line-height: 1; margin-bottom: 2rem; margin-top: 40vh; color: var(--color-text); } .content__title:focus { outline: none; } .content__price { font-size: clamp(1rem, 2vw, 1.25rem); margin-bottom: 1.5rem; color: var(--color-text); } .content__description { margin-right: 10vw; max-width: 50ch; font-size: clamp(1rem, 2.5vw, 1.5rem); color: rgba(var(--color-text-rgb), 0.66); } /* The preview is a staging post; this is the way to the actual product. */ .content__cta { display: inline-block; margin-top: 2.5rem; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; } .content__cta:hover, .content__cta:focus-visible { color: var(--color-accent); } /* SplitText leaves these behind; they must not intercept the overlay. */ .content .char { will-change: opacity; } /* ---------------------------------------------------------------------------- 4. Modes, motion, small screens ---------------------------------------------------------------------------- */ /* Ink and grounds come from the theme's tokens, so both appearance modes are correct with no remapping — same contract as haiku-icons. */ @media (prefers-reduced-motion: reduce) { /* The script bails entirely, so this only has to make the plain list good. */ .gallery__img-wrapper img { transform: none; } } /* Below the tablet breakpoint the horizontal scatter costs more than it gives: at 28vw a 450px slide is mostly off-screen. Narrow the stagger and let the widths follow the viewport. */ @media screen and (max-width: 1023px) { .gallery { gap: 8vh; padding-top: 10vh; } .gallery__slide { --stagger: 0vw !important; --img-w: min(72vw, 420px) !important; } .content__group-list { /* The preview no longer sits beside the text; it sits above it. */ padding-inline: var(--hg-pad, 1.5rem); padding-top: calc(60vh + 2rem); } .content__preview-img { height: 55vh; width: 100%; aspect-ratio: auto; } .content__title { margin-top: 0; } .content__description { margin-right: 0; } } /* ============================================================================ Mobile collection — a plain scrolling single column Paired with the `simple` branch in haiku-gallery.js: below 900px no timeline is built, so nothing transforms the slides and they can simply sit in flow. This undoes the fixed/absolute layout the timeline needs and stacks them. `html.hg-simple` is the marker for this mode. `hg-live` — the class that takes scrolling away from the document — is deliberately NOT added on mobile, so the browser scrolls the page normally: momentum, rubber-banding and the address bar all behave as they should. ========================================================================== */ @media screen and (max-width: 900px) { html.hg-simple, html.hg-simple body { overflow-y: auto !important; height: auto !important; position: static !important; } .hg-simple .gallery, .hg-simple .hg .gallery { position: static !important; display: block !important; height: auto !important; overflow: visible !important; padding: 2rem 1.2rem 6rem; } /* One column, in flow. Every slide-level variable the timeline used — --stagger, --img-w, the per-slide speeds — is irrelevant here. */ .hg-simple .gallery__slide { position: static !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 0 3.2rem !important; transform: none !important; opacity: 1 !important; visibility: visible !important; --stagger: 0 !important; --img-w: 100% !important; } .hg-simple .gallery__slide:last-child { margin-bottom: 0 !important; } .hg-simple .gallery__link, .hg-simple .gallery__figure { display: block; width: 100%; } .hg-simple .gallery__img { position: relative !important; width: 100% !important; height: auto !important; max-width: 100% !important; /* `transform: none !important` was here to undo the timeline's transforms. In simple mode the timeline never runs, and that !important was killing the lens effect's scale on the image — the frame shrank while the image stayed put, so nothing appeared to magnify. */ object-fit: cover; } /* The hover-reveal alt photograph has no gesture on a phone, and stacking it over the primary would double every image's height. */ .hg-simple .gallery__img--alt { display: none !important; } .hg-simple .gallery__caption, .hg-simple .gallery__meta { position: static !important; width: 100% !important; max-width: 100% !important; margin-top: 0.7rem; } /* The caption's transform and opacity stay pinned — the desktop timeline drove them and does not run here. `.gallery__meta` is deliberately NOT in this list. haiku-lens.js animates it, and an !important in a stylesheet beats the inline style GSAP writes, so leaving it here would have made the caption animation silently do nothing — the identical trap that left the image half of the lens dead earlier in this file. Animating the parent still dims the caption, since opacity composites down. */ .hg-simple .gallery__caption { transform: none !important; opacity: 1 !important; } /* The boot overlay belongs to the timeline's start-up, which never runs. */ .hg-simple .hg-boot, .hg-simple [class*="boot"] { display: none !important; } } /* ============================================================================ Mobile collection — smaller items, more air Full-bleed photographs stacked at 3.2rem apart read as a feed: each one fills the screen, so the eye never gets a boundary between them and the whole column feels relentless. Narrower and further apart gives each piece a margin to sit in, and the ground between them does the separating instead of an edge. 76% centred is still large enough to read the garment; 6.5rem between is roughly twice the caption's own height, which is what makes the gap read as deliberate rather than as a gap. ========================================================================== */ @media screen and (max-width: 900px) { .hg-simple .gallery, .hg-simple .hg .gallery { padding: 3rem 0 8rem !important; } .hg-simple .gallery__slide { width: 76% !important; max-width: 76% !important; margin: 0 auto 6.5rem !important; } .hg-simple .gallery__slide:last-child { margin-bottom: 0 !important; } /* The caption keeps the photograph's width so the two read as one object. */ .hg-simple .gallery__caption, .hg-simple .gallery__meta { width: 100% !important; max-width: 100% !important; margin-top: 0.45rem; } } /* Narrower phones need a little more of the screen, or the photograph becomes a postage stamp. */ @media screen and (max-width: 480px) { .hg-simple .gallery__slide { width: 84% !important; max-width: 84% !important; margin-bottom: 5.5rem !important; } } /* ── buy now ────────────────────────────────────────────────────────────── The second way out of the preview: `take a close look` goes to the product page, this goes straight to checkout. Quieter than the CTA above it on purpose — the panel is a look, and the loud control should be the one that lets you look closer, not the one that takes your money. ⚠️ Rendered only when the variant is available. These are one-of-one pieces, so a buy-now on a sold piece would take someone to a checkout that cannot complete. */ .content__buy { /* Centred UNDER the CTA, not in the column. `.content__acts` wraps both and takes its width from the wider one (the CTA), so `margin-inline: auto` here centres this against that button rather than against the paragraph. ⚠️ Must be a block — `margin-inline: auto` does nothing to an inline box, which is why an earlier `inline-block` sat at the panel's left edge. */ display: block; width: fit-content; margin-inline: auto; margin-top: 0.9rem; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text); opacity: 0.62; text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 4px; transition: opacity 200ms linear, border-color 200ms linear; } .content__buy:hover, .content__buy:focus-visible { opacity: 1; border-bottom-color: currentColor; } /* The two controls stack, so the CTA above must not sit on the same line. */ .content__cta { margin-bottom: 0; } /* The pair, as one box. Width comes from the wider child so the narrower one can centre against it. */ .content__acts { display: block; width: fit-content; max-width: 100%; }