const { Button, IconButton, Icon, Card, Badge, Tag } = window.SuperiorPrintingHouseDesignSystem_81d178;
const TONES = ["mid", "light", "dark", "mid"];
/* Work rail. Full-bleed and always moving: the track carries the item list twice, so
translating it by exactly one list-width lands on an identical frame and the loop is
seamless. Motion, pause-on-hover and card width all live in responsive.css — this is
a CSS marquee, so there is no step index, no resize listener and no rAF loop.
Photography is still placeholder — supplied shots drop into `images`. */
function RailCard({ p, t, go, photoPath, rail }) {
const v = cardView(t, p);
return (
go("work", { rail: rail, cat: workCats(p)[0] })} style={{ display: "flex", flexDirection: "column", background: "var(--surface-card)", borderRadius: "var(--radius-2xl)", padding: 12, cursor: "pointer", boxShadow: "var(--elevation-panel)" }}>
{/* Ph takes a fixed prop list and does not spread the rest, so the image tag
rides on a plain wrapper. It carries no styles, so nothing moves. */}
{v.c && {v.c}}
{v.t}{v.d}
);
}
function WorkSlider({ t , go, title, titleTh, text, items, photoPathPrefix, aside, more }) {
const revealHead = useReveal();
/* Constant speed regardless of list length: seconds per card, not per loop. */
const duration = `${items.length * 7}s`;
const track = React.useRef(null);
const tween = React.useRef(0);
/* The arrows steer the marquee itself rather than adding a second transform:
one loop covers exactly one list, so one card is duration/items.length of
animation time. Tweening currentTime keeps the CSS animation the only owner
of the track's position, so a nudge cannot desync from the auto-scroll and
the infinite loop handles the wrap for free.
ponytail: 420ms ease-out by hand because currentTime is not a CSS property
and so cannot be transitioned. */
const nudge = (dir) => {
const el = track.current;
if (!el) return;
const an = el.getAnimations()[0];
if (!an) { // reduced-motion: no animation, native scroll instead
const card = el.querySelector(".rail-card");
el.parentElement.scrollBy({ left: dir * (card.offsetWidth + 16), behavior: "smooth" });
return;
}
cancelAnimationFrame(tween.current); // impatient clicks chain from wherever we are
const total = an.effect.getTiming().duration;
const step = total / items.length;
/* Minus, not plus: the keyframe runs `reverse`, so a rising currentTime slides
the track to the RIGHT and walks the list backwards. The right arrow has to
lower it to travel forward. Measured, not assumed — one step of +7000ms moved
the track from -2338px to -2041px. */
let from = Number(an.currentTime), to = from - dir * step;
/* currentTime cannot go negative, and in the first seconds of the loop a
backwards nudge would. The animation is periodic, so lifting both ends by a
whole loop lands on the identical frame and keeps the travel to one card. */
if (to < 0) { const bump = Math.ceil(-to / total) * total; from += bump; to += bump; an.currentTime = from; }
an.pause();
const t0 = performance.now();
const tick = (now) => {
const k = Math.min(1, (now - t0) / 420);
an.currentTime = from + (to - from) * (1 - Math.pow(1 - k, 3));
if (k < 1) tween.current = requestAnimationFrame(tick); else an.play();
};
tween.current = requestAnimationFrame(tick);
};
return (
{/* Title and rule share a baseline row; the description sits under both.
The head keeps the page inset — only the rail below runs full-bleed. */}
{title}
|{titleTh}
{text}
{aside}
{/* Full-bleed: the rail is the page width, so cards run off both edges. The
shell already clips, so nothing here can produce a horizontal scrollbar. */}
{items.map((p, n) => )}
{/* Second pass is the seam. Hidden from assistive tech so the list is not
announced twice; it exists only so the loop has somewhere to land. */}
{items.map((p, n) => )}
{/* Over the rail's own edges, up to full strength only on hover — at rest the
cards stay the focus. The loop is infinite, so neither arrow ever disables. */}
{/* The rail loops forever, so it never reaches an end that says "there is more
over here". This does. Only the main rail carries it — one way out is a
route, three is a wall. */}
{more && (
{/* A text link, not a Button: every Button in the kit is a pill
(--radius-control is --radius-pill), and a third pill under a wall of
cards reads as another card action rather than the way out. */}
)}
);
}
/* The proposition band: what we do differently, said once, between the client marks
and the work itself. Three columns — the claim, a photograph of it in use, and the
three reasons behind it.
Numbered rather than icon-led: readme.md rules icons out as a bullet substitute,
and the sanctioned glyph set has nothing that reads as "colour accuracy", so mono
lining numerals index the list instead.
No background of its own — .trust-section directly above already spends the page's
one tinted band, and two in a row read as a single block. */
function Why({ t, go }) {
const w = t.statement;
const reveal = useReveal();
return (
/* Inside the rail now, between its heading and its track — so the spacing is the
rail's business, not the page grid's: marginBottom mirrors .rail-head's own.
.grid-3 for its breakpoints alone (3 -> 2 -> 1 at 900 and 560), .pad-x to keep
the same inset as the heading directly above it.
Centred, not top-aligned: the photograph is the tallest thing here, so starting
the text at the top left it stranded against a much longer edge with a hole
underneath. */
{w.eyebrow}
{w.title}
{w.text}
{/* Scoped like every other way in: there is no page that mixes the rails. */}
{/* Ph takes a fixed prop list and does not spread the rest, so the admin's
image hook rides on a plain wrapper.
The frame is a fixed 2016x1512 — 4:3 landscape. Written as the full pair
rather than 4/3 so the intended plate size stays legible. object-fit is
cover, so a portrait photograph is cropped to it; the focal control in the
panel is how you choose which part survives. */}
{w.points.map((pt, n) => (
{"0" + (n + 1)}{pt.t}{pt.d}
))}
);
}
/* Hero slideshow. One slide renders exactly as the old static hero — no dots, no
timer — so a single-slide site is unchanged. Auto-advance pauses on hover and
never starts under prefers-reduced-motion. */
function Hero({ t, go }) {
const slides = t.hero.slides || [];
const [i, setI] = React.useState(0);
const [hold, setHold] = React.useState(false);
const at = Math.min(i, Math.max(0, slides.length - 1));
const s = slides[at] || {};
const reduce = typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
React.useEffect(() => {
if (slides.length < 2 || hold || reduce) return;
const id = setTimeout(() => setI((at + 1) % slides.length), 7000);
return () => clearTimeout(id);
}, [at, hold, slides.length, reduce]);
return (
setHold(true)} onMouseLeave={() => setHold(false)}>
{s.eyebrow[0]} {s.eyebrow[1]}
{s.title[0]} {s.title[1]}
{s.lede[0]} {s.lede[1]}
{slides.length > 1 && (
{slides.map((_, n) => (
)}
{t.hero.social[0]} {t.hero.social[1]}
);
}
function Home({ go, t }) {
const revealTrust = useReveal();
return (
/* One rhythm, one owner: the wrapper's rowGap is the only vertical space between
sections, so adjacent paddings can never add up. Sections carry inset only.
minmax(0,1fr) is load-bearing: an auto grid column sizes to its widest item, so
without it the full-bleed rail's max-content track drags the whole page wide. */
{/* ---- hero ---- */}
{/* Photo-led banner: the image carries the page, so the type sits centred and
deliberately quiet — small caps eyebrow, a modest headline weight, and the
supporting meta demoted to one hairline-separated line at the foot. */}
{/* ---- trusted by ---- */}
{/* Client marks are the supplied artwork, shown at full colour and uniform height. */}
{t.trust.title}
{t.trust.text}
{t.clients.map((c, i) => (
))}
{/* ---- work carousel ---- */}
{/* The proposition rides inside this rail, under its heading and above its
cards — only this one, not the category rails below. */}
} />
{/* ---- category carousels ---- */}
{/* display:contents keeps these as direct grid items, so the wrapper does not
disturb the wrapper grid's rowGap rhythm. */}
))}