, so `.mrow > article` matched nothing and the cards
had no flex-basis at all. With placeholder text inside they merely looked
narrow; the moment real photos went in they blew up to the image's own
width - one and a half cards filled the screen.
clamp() keeps at least four cards visible at every desktop width:
1024 -> 230px (5.2 cards), 1280 -> 269px (4.5), 1920 -> 300px (6.1).
--------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
How many faces are on screen at a time.
--mq-n comes from the `marquee_cards` site_settings row, printed onto
the container by index.php as an inline style. --mq-gap must stay in
step with the 16px gap on .mrow AND with the keyframe's `- 8px`, which
is half of it.
--mq-vw is the row's usable width. The 100vw fallback is right before
JS runs but ignores the scrollbar, so site.js overwrites it with the
container's real clientWidth (and again on resize). max() is only a
safety floor for a big number on a small window - it never bites at
nine faces on a 1280px screen, which computes to 128px.
THIS SELECTOR MUST MATCH .rcard. The mockup wrapped each topper in
; index.php renders
, so `.mrow > article`
alone matched nothing and the cards had no flex-basis at all.
--------------------------------------------------------------------- */
.marquee { --mq-n: 6; --mq-gap: 16px; --mq-vw: 100vw; }
.mrow > .rcard,
.mrow > article {
flex: 0 0 max(120px, calc((var(--mq-vw) - (var(--mq-n) - 1) * var(--mq-gap)) / var(--mq-n)));
}
@media (max-width: 620px) {
/* --mq-n is deliberately ignored here - nine faces on a phone would be
unreadable, so the small screen always shows about two. */
.mrow > .rcard,
.mrow > article { flex: 0 0 52vw; }
}
@keyframes ct-marquee {
0% { transform: translate3d(0px, 0px, 0px); }
100% { transform: translate3d(calc(-50% - 8px), 0px, 0px); }
}
.marquee { overflow-x: hidden; }
.marquee::-webkit-scrollbar { display: none; }
@media print {
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
:not(.mrow) { animation: auto ease 0s 1 normal none running none !important; }
}
/* ---------------------------------------------------------------------
Restored from the artifact frame's own reset. The design was authored
inside a frame that already supplied these; served directly they have
to be stated.
--------------------------------------------------------------------- */
:root { color-scheme: light; }
body { padding: 0; }
/* ---------------------------------------------------------------------
toppers.php - the results wall
Added 2026-08-27.
The CARDS are not here. toppers.php renders the same .res-grid and
.rcard components the homepage marquee uses, so the whole card - the
square photo slot, the absolutely positioned ![]()
, the rank badge,
the score, the college chip - is already styled above and the two
pages can never drift apart. Only the page head, the filter bar and
the empty state are new, plus one badge the marquee has no room for.
Ported from mockups/ctree-toppers.html. The mockup's chips were