/* * The page wipe -- see page-wipe.mjs for why it is two halves across two * documents rather than a View Transition, and why it is the shop's only * transition between places. * * Everything the gesture is made of is here: two panels, an ink gutter where * they meet, and a screen of dots over both. Nothing in the module knows what * it looks like; it sets a theme and a state and this decides the rest. * * The seven themes are repeated here rather than resolved from --accent * because the panels are appended to , which on a category page is * already wearing the OUTGOING category's theme. Reading --accent would close * the panels in the colour of the page being left, which is the one colour the * gesture must not use. Same list as the card themes in catalog.css; same * source values. */ .page-wipe { position: fixed; z-index: 9999; inset: 0; /* Never a click target, not even for the quarter second it exists. */ pointer-events: none; /* The panels start outside; without this they would widen the document. */ overflow: hidden; --wipe: #343139; --wipe-dot: rgba(242, 239, 233, .22); } /* * The two panels. Pseudo-elements because there is nothing to put inside them * and nothing to address them by. * * A little wider than half, so that at the moment they meet there is no * hairline of the old page showing between them on a viewport whose width does * not divide in two. The extra is under the borders, so the gutter stays ink. */ .page-wipe::before, .page-wipe::after { content: ""; position: absolute; top: 0; bottom: 0; width: calc(50% + 1px); box-sizing: border-box; background-color: var(--wipe); /* The halftone. Same screen the featured sheet and the quick look wear, so the transition is printed on the same press as the pages it moves between. */ background-image: radial-gradient(circle, var(--wipe-dot) 1.1px, transparent 1.7px); background-size: 6px 6px; transition: transform 250ms cubic-bezier(.4, 0, .2, 1); will-change: transform; } .page-wipe::before { left: 0; border-right: 3px solid var(--ink, #0c0b0e); } .page-wipe::after { right: 0; border-left: 3px solid var(--ink, #0c0b0e); } .page-wipe[data-theme="purple"] { --wipe: var(--brand, #877ebc); --wipe-dot: rgba(12, 11, 14, .26); } .page-wipe[data-theme="red"] { --wipe: var(--red, #c8393f); --wipe-dot: rgba(242, 239, 233, .24); } .page-wipe[data-theme="ink"] { --wipe: #343139; --wipe-dot: rgba(242, 239, 233, .22); } .page-wipe[data-theme="gold"] { --wipe: var(--gold, #e5ae37); --wipe-dot: rgba(12, 11, 14, .26); } .page-wipe[data-theme="blue"] { --wipe: var(--blue, #91bfe0); --wipe-dot: rgba(12, 11, 14, .26); } .page-wipe[data-theme="green"] { --wipe: var(--green, #477a4b); --wipe-dot: rgba(242, 239, 233, .24); } .page-wipe[data-theme="paper"] { --wipe: var(--brand-tint-deep, #ddd8f1); --wipe-dot: rgba(12, 11, 14, .26); } /* * The whole motion. Panels close inward over the page being left and open * outward on the page that arrives. * * The colour wash this replaced was a single sheet, and a single sheet that * reverses reads as the same sheet coming back -- "you did not go anywhere" -- * so it had to keep travelling one way. Panels are not that shape. Closing and * opening are two visibly different gestures, they happen either side of a * navigation, and what parts at the end is not what closed at the start. */ .page-wipe[data-state="out"]::before { transform: translateX(-100%); } .page-wipe[data-state="out"]::after { transform: translateX(100%); } .page-wipe[data-state="out-done"]::before, .page-wipe[data-state="out-done"]::after { transform: translateX(0); } .page-wipe[data-state="in"]::before, .page-wipe[data-state="in"]::after { transform: translateX(0); } .page-wipe[data-state="in-done"]::before { transform: translateX(-100%); } .page-wipe[data-state="in-done"]::after { transform: translateX(100%); } /* * A second lock on the same door. installPageWipe declines to bind at all * under reduced motion, so nothing should ever build the panels -- but if they * are built anyway they must not move, and they must not sit over the page * either. */ @media (prefers-reduced-motion: reduce) { .page-wipe { display: none; } }