/* * Animal tracks that keep the reader company while scrolling. * * The animal is the `data-trk` value: on the `.u-page-body` section for pages * with a fixed animal (the Beispielreisen), on on the home page, where * an inline script picks one of the Big Five per visit. The table below maps it * to a print shape (the SVGs in /images/tracks/, applied as CSS masks so one * file works in any colour), a size, a stride and the two label texts. * * Two presentations, by viewport width: * * >= 1340px: the gutter trail. Markup from src/lib/paws.ts: a `.u-paws` box is * the first child of a section and spans its height; each `.u-paw` is one * print, `--i` strides down. The box covers the gutter between the viewport * edge and the centred content column (1140px on the home page, 1000px on the * itinerary pages, see pages.css `.u-page-body .u-sheet`), the prints hug the * column, and `overflow: clip` keeps them inside, so a print can never overlap * content. With scroll-driven animations each print is stamped as it enters * the viewport, so the trail leads the reader by a step. Hovering a print * names the animal (DE, or EN under html.u-lang-en). * * < 1340px: there is no gutter. On the itinerary pages the animal takes over * the day rail instead: each day card's grey left line and its dot step aside * and the card's ::after draws the prints walking down where the line was * (the "-down" stride tile from /images/tracks/tiles/, repeat-y). On the home * page the animal crosses the page: the "across" tile drawn by a * pseudo-element in the whitespace that does exist, the gap above each * destination row and the top padding of the Wann-wohin and destination * sections, every other crossing walking the other way. Both tiles are built * from the single prints by tools/make-track-tiles.mjs. All prints are * revealed as they pass a line 12vh above the bottom of the screen, so the * trail always leads the reader by a step. * * Without scroll-driven animations, or under prefers-reduced-motion, all * prints simply stand still. The stylesheet is linked for all media so the * `display: none` default also holds in print (print.css repeats it for the * PDFs); everything visible is screen-only. */ .u-paws { display: none; } /* animal -> shape, print size, stride, label (DE / EN) */ [data-trk="lion"] { --trk: url(/images/tracks/lion.svg); --trk-tile: url(/images/tracks/tiles/lion.svg); --trk-rail: url(/images/tracks/tiles/lion-down.svg); --trk-size: 44px; --trk-gap: 150px; --trk-de: "Löwe"; --trk-en: "Lion"; } [data-trk="leopard"] { --trk: url(/images/tracks/leopard.svg); --trk-tile: url(/images/tracks/tiles/leopard.svg); --trk-rail: url(/images/tracks/tiles/leopard-down.svg); --trk-size: 32px; --trk-gap: 118px; --trk-de: "Leopard"; --trk-en: "Leopard"; --trk-o: 0.3; } [data-trk="elephant"] { --trk: url(/images/tracks/elephant.svg); --trk-tile: url(/images/tracks/tiles/elephant.svg); --trk-rail: url(/images/tracks/tiles/elephant-down.svg); --trk-size: 50px; --trk-gap: 200px; --trk-de: "Elefant"; --trk-en: "Elephant"; } [data-trk="rhino"] { --trk: url(/images/tracks/rhino.svg); --trk-tile: url(/images/tracks/tiles/rhino.svg); --trk-rail: url(/images/tracks/tiles/rhino-down.svg); --trk-size: 48px; --trk-gap: 175px; --trk-de: "Nashorn"; --trk-en: "Rhino"; } [data-trk="buffalo"] { --trk: url(/images/tracks/buffalo.svg); --trk-tile: url(/images/tracks/tiles/buffalo.svg); --trk-rail: url(/images/tracks/tiles/buffalo-down.svg); --trk-size: 40px; --trk-gap: 140px; --trk-de: "Büffel"; --trk-en: "Buffalo"; } [data-trk="gorilla"] { --trk: url(/images/tracks/gorilla.svg); --trk-tile: url(/images/tracks/tiles/gorilla.svg); --trk-rail: url(/images/tracks/tiles/gorilla-down.svg); --trk-size: 42px; --trk-gap: 125px; --trk-de: "Gorilla"; --trk-en: "Gorilla"; } [data-trk="giraffe"] { --trk: url(/images/tracks/giraffe.svg); --trk-tile: url(/images/tracks/tiles/giraffe.svg); --trk-rail: url(/images/tracks/tiles/giraffe-down.svg); --trk-size: 46px; --trk-gap: 215px; --trk-de: "Giraffe"; --trk-en: "Giraffe"; } [data-trk="oryx"] { --trk: url(/images/tracks/oryx.svg); --trk-tile: url(/images/tracks/tiles/oryx.svg); --trk-rail: url(/images/tracks/tiles/oryx-down.svg); --trk-size: 30px; --trk-gap: 130px; --trk-de: "Oryx"; --trk-en: "Oryx"; --trk-o: 0.3; } [data-trk="ostrich"] { --trk: url(/images/tracks/ostrich.svg); --trk-tile: url(/images/tracks/tiles/ostrich.svg); --trk-rail: url(/images/tracks/tiles/ostrich-down.svg); --trk-size: 44px; --trk-gap: 190px; --trk-de: "Strauß"; --trk-en: "Ostrich"; } /* ------------------------------------------------------------ gutter trail */ @supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) and (overflow: clip) { @media screen and (min-width: 1340px) { section:has(> .u-paws) { position: relative; } .u-paws { --fc-sheet: 1140px; display: block; position: absolute; top: 0; bottom: 0; left: 0; width: calc((100% - var(--fc-sheet)) / 2); overflow: clip; pointer-events: none; color: #6f5b46; } .u-page-body > .u-paws { --fc-sheet: 1000px; } /* The print is a hit box; the image sits in ::before, the label in ::after. */ .u-paw { position: absolute; /* 1.5rem off the content column, then half a print further out for this foot */ right: calc(1.5rem + var(--trk-size, 42px) * 0.5); top: calc(2.5rem + var(--i) * var(--trk-gap, 150px)); width: var(--trk-size, 42px); height: var(--trk-size, 42px); pointer-events: auto; } .u-paw::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: var(--trk-o, 0.24); -webkit-mask: var(--trk, url(/images/tracks/lion.svg)) center / contain no-repeat; mask: var(--trk, url(/images/tracks/lion.svg)) center / contain no-repeat; transform: rotate(-9deg); transition: opacity 0.2s; } /* The other foot: mirrored, and a step to the right. */ .u-paw:nth-child(even) { right: 1.5rem; } .u-paw:nth-child(even)::before { transform: scaleX(-1) rotate(-9deg); } .u-paw::after { content: var(--trk-de, "Löwe"); position: absolute; bottom: calc(100% + 0.35rem); left: 50%; translate: -50% 0; padding: 0.2rem 0.55rem; border-radius: 999px; background: #023b10; color: #ffffff; font: 700 0.6875rem/1.4 "Open Sans", Arial, sans-serif; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s; } html.u-lang-en .u-paw::after { content: var(--trk-en, "Lion"); } .u-paw:hover::before { opacity: 0.6; } .u-paw:hover::after { opacity: 1; visibility: visible; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { @keyframes u-paw-stamp { from { opacity: 0; scale: 0.55; } to { opacity: 1; scale: 1; } } .u-paw { animation: u-paw-stamp linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; } } } } } /* --------------------------------------------------------- crossing trails */ @supports ((mask-image: url("")) or (-webkit-mask-image: url(""))) { @media screen and (max-width: 1339px) { /* the gap above a destination row, and the top padding of the sections */ .u-dest-row + .u-dest-row::before, .u-dest-section::before, .u-ss::before { content: ""; position: absolute; left: 0; right: 0; height: 32px; pointer-events: none; background: #6f5b46; opacity: var(--trk-o, 0.24); -webkit-mask: var(--trk-tile, url(/images/tracks/tiles/lion.svg)) 0 50% / 64px 32px repeat-x; mask: var(--trk-tile, url(/images/tracks/tiles/lion.svg)) 0 50% / 64px 32px repeat-x; } .u-dest-row { position: relative; } .u-dest-row + .u-dest-row::before { top: -40px; } .u-dest-section::before, .u-ss::before { top: 22px; /* the sections' own side padding */ left: 30px; right: 30px; } /* every other crossing walks the other way */ .u-dest-row:nth-child(even) + .u-dest-row::before, .u-ss::before { transform: scaleX(-1); } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* prints pop in one at a time (one 32px print per step) while the gap travels the lower half of the screen */ @keyframes u-paw-cross { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } .u-dest-row + .u-dest-row::before, .u-dest-section::before, .u-ss::before { animation: u-paw-cross steps(11, jump-end) both; animation-timeline: view(); animation-range: cover 0% cover 45%; } } } /* ---- itinerary pages: the animal walks the day rail ---- */ .u-day { border-left-color: transparent; } .u-day::before { display: none; } /* 13px prints every 24px, inside the card's 26px left padding: the sticky route-map band is only as wide as the content column, so anything left of the card would show beside it while scrolling */ .u-day::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 26px; pointer-events: none; background: #6f5b46; opacity: var(--trk-o, 0.24); -webkit-mask: var(--trk-rail, url(/images/tracks/tiles/lion-down.svg)) 0 0 / 24px 48px repeat-y; mask: var(--trk-rail, url(/images/tracks/tiles/lion-down.svg)) 0 0 / 24px 48px repeat-y; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* each card's segment is uncovered top-down exactly as far as the reveal line (12vh above the bottom edge, hence the view() inset) has travelled down it — one continuous trail across all cards. entry-crossing, not entry: for a card taller than the screen the entry range ends when the card's top reaches the screen top, which would reveal the rest of the card early */ @keyframes u-paw-rail { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } .u-day::after { animation: u-paw-rail linear both; animation-timeline: view(block 0px 12vh); animation-range: entry-crossing 0% entry-crossing 100%; } } } } }