/* ============================================================ — the page-to-page "Next" pager. A full-width black bar that closes every page and steps to the NEXT page in the primary menu, cycling back to Home at the end. Shipped as ONE web component (scripts/site-pager.js) so the order, destination and label are computed in a single place and can't drift — the same idea as . → Next Work → Next About → Next Essays → Next Recent The component renders LIGHT DOM (one ), so these DLS tokens apply exactly as authored — no shadow DOM, no duplicated CSS. The host is a plain block that sits as the last child of
, so the PAGE's own section rhythm (.home / .work `> * + *`) sets the gap above it — one scaffold, no special-casing. Height is HALF the viewport (min-height: 50vh): the Figma drew a fixed 400px block, and 50vh holds that proportion on any screen while never crowding a short one. Nothing here is hard-coded — every colour, size, space and radius is a DLS token. ============================================================ */ /* The host is a normal block box (custom elements are inline by default) so the page's `> * + *` section rhythm applies its top margin to it, exactly like any other movement. */ site-pager { display: block; } /* The bar itself — the whole card is the link. Text pinned top-left, arrow top-right (flex-start), matching the Figma "Next Work" frame. */ .site-pager { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-24); min-height: 50vh; /* half the viewport — dynamic height */ margin-inline: var(--grid-margin); /* 24px edge margins, like the page */ padding: var(--space-24); /* 24px inset */ background: var(--fg); /* black surface */ border-radius: var(--radius) var(--radius) 0 0; /* top corners only — it meets the page bottom */ text-decoration: none; } /* "Next " dim + destination white, one 120px display line (the hero size). "Next" uses --black-50 (#808080) — the DLS muted read against a black surface. The label WRAPS — no `white-space: nowrap`. It used to be pinned to one line, which is what made every page scroll sideways: a long destination is wider than a phone at 120px, and because a flex item's automatic minimum size is its CONTENT width, the label refused to shrink and shoved the arrow off the viewport. Left to wrap it still reads as one line wherever one line fits — only the widths that genuinely can't hold it break, between the prefix and the destination. `min-inline-size: 0` is the companion guard: it lets the box shrink past even its longest single word, so nothing can push the arrow out again. */ .site-pager__label { font-size: var(--text-7xl); /* 120px "XXLarge" */ line-height: var(--lh-7xl); letter-spacing: var(--tracking-tighter); font-weight: var(--weight-regular); min-inline-size: 0; } .site-pager__next { color: var(--black-50); } /* dim prefix on black */ .site-pager__dest { color: var(--bg); } /* white destination */ /* Forward arrow — sized to the label's cap run, nudges on hover. */ .site-pager__arrow { flex: none; inline-size: var(--text-7xl); /* 120px, matches the label size */ block-size: var(--text-7xl); color: var(--bg); transition: transform 0.2s ease; } .site-pager__arrow svg { width: 100%; height: 100%; display: block; } .site-pager:hover .site-pager__arrow { transform: translateX(var(--space-8)); } @media (prefers-reduced-motion: reduce) { .site-pager__arrow { transition: none; } } /* Type steps down the DLS scale, token → token, at the same breakpoints as the page heroes — always a real --text-* value, never an overflow. */ @media (max-width: 900px) { .site-pager__label { font-size: var(--text-5xl); line-height: var(--lh-5xl); } .site-pager__arrow { inline-size: var(--text-5xl); block-size: var(--text-5xl); } } /* Phones land on --text-3xl (48px) — one step above the --text-2xl the section headings take at this breakpoint, so the pager is still the biggest thing on the page, while "vanStelko" (the widest single word it ever has to set) clears the arrow down to a 320px viewport without the wrap having to break inside a word. */ @media (max-width: 640px) { .site-pager__label { font-size: var(--text-3xl); line-height: var(--lh-3xl); } .site-pager__arrow { inline-size: var(--text-3xl); block-size: var(--text-3xl); } } /* ============================================================= Essay variant — The same black bar at the foot of an essay, but the destination is the next essay's TITLE rather than a one-word section name. A title at --text-7xl (120px) is a wall of text — "30 Things I've learnt as a Product Designer, coming from agencies" runs to ten lines and the bar becomes taller than the essay's own hero. So the label starts two steps down, at --text-4xl (60px), and takes the same breakpoint ladder one step lower than the section pager throughout. Only the label + arrow SIZE changes. The surface, the dim "Next" prefix, the white destination, the radius, the hover nudge and the 50vh height are all inherited from .site-pager — the two bars are the same object at two type sizes, not two components. ============================================================= */ .site-pager--essay .site-pager__label { font-size: var(--text-4xl); /* 60px — a title, not a word */ line-height: var(--lh-4xl); } .site-pager--essay .site-pager__arrow { inline-size: var(--text-4xl); block-size: var(--text-4xl); } @media (max-width: 900px) { .site-pager--essay .site-pager__label { font-size: var(--text-3xl); line-height: var(--lh-3xl); } .site-pager--essay .site-pager__arrow { inline-size: var(--text-3xl); block-size: var(--text-3xl); } } /* Phones: --text-2xl (38px). One step below the section pager's floor, because the longest thing this bar ever has to set is a full title, not the single word "vanStelko". */ @media (max-width: 640px) { .site-pager--essay .site-pager__label { font-size: var(--text-2xl); line-height: var(--lh-2xl); } .site-pager--essay .site-pager__arrow { inline-size: var(--text-2xl); block-size: var(--text-2xl); } }