jcstream-stylesheet-author

name

jcstream-stylesheet-author

description

Use when editing web/static/style.css in the JCStream project. Covers the light-theme token system (--bg/--fg/--accent), the 10-tier .tier-F1…MM ladder palette, .ladder-* cells, body.is-table table-mode rules, content-visibility, mobile breakpoint at 720px, and the print at-rule. Trigger phrases: "restyle the cards", "fix the tier colors", "make the hero bigger", "add a CSS rule", "edit the stylesheet", "tweak the lightbox", "fix the table view", "recolor the F3 chip", "tune the print layout".

JCStream stylesheet author

You own web/static/style.css. The current theme is the "modern utility" light direction (warm-cream surfaces, slate-blue accent, Geist/Inter + JetBrains Mono). The dark editorial theme was retired in 2026; class names persisted but values shifted.

Token system (single source of truth)

The :root block at style.css defines every color, typography stack, and radius. Always extend tokens here before adding a new hex. Tokens you cannot rename without auditing the rest of the file:

| Surface | --bg --bg-soft --surface --surface-hi --border --border-hi | | Ink | --fg --fg-soft --fg-muted --fg-dim --fg-dim-raised | | Accent | --accent --accent-hi --accent-bg --accent-bg-2 | | Status | --danger --warn --warn-bg --ok --misd | | Tier | --tier-felony-fg/bg/bd, --tier-misd-fg/bg/bd (the -bd border twins of the bg pair, style.css) | | City | --cincy-navy --cincy-red (used by CFS captions) | | Type | --font-sans --font-serif --font-mono | | Radius | --radius --radius-sm | | Layout | --masthead-h --monthnav-h |

--font-serif is an alias for --font-sans in the current theme — don't rely on a serif being available unless you add one. Several status tokens currently share hex values (--ok and --misd are both #4f7c3a at style.css; --danger and --warn are both #b54545 at :26-27) — they're not independently tunable until you split them.

@view-transition { navigation: auto; } (style.css) and the prefers-reduced-motion smooth-scroll guard (:59) drive cross-page animation — don't break either.

Ten-tier ladder palette

Tier chips at style.css and ladder cells (.ladder-grid, .ladder-cell, .ladder-F1….ladder-MM) at style.css, inside the "Severity ladder" section that opens at style.css. The colors are intentional — warmer reds for F1-F3 (most severe), warm oranges/creams for F4-F5, olive/sage for M1-M3, neutral for MM. Don't recolor without auditing where each tier is also used: search results, card corner chip, ladder cells, recent-booking cards, calendar items.

body.is-table table mode

Rules at style.css reshape .month .card-inmate into a 5-column grid (52-1fr-140-70-100 px). When adding card content, ensure it survives both layouts. The toggle handle is .view-toggle[aria-pressed="true"] at style.css — that's what flips body.is-table.

content-visibility

Cards use content-visibility: auto with contain-intrinsic-size set (style.css, :768). Off-screen cards skip paint cost. Don't put tier tooltips inside .card-inmate — they'd be clipped by the paint container. The shared #tier-tip floats outside.

Mobile breakpoint

Primary breakpoint is @media (max-width: 720px) (twelve occurrences across the file at style.css, 513, 880, 1081, 1177, 1292, 1359, 1525, 1580, 1684, plus inline ones at :1498, :1616; the print-mode mobile block at :1684 is the canonical bottom anchor). Stack the hero strip, drop the brand-sub, collapse the bio grid to 1 col, etc. Prefer extending the existing 720 px block over adding a new breakpoint.

Exception: the recent-bookings photo grid .rb-grid ships with its own non-720 breakpoints at style.css (@media (max-width: 1080px) → 3 cols, @media (max-width: 540px) → 2 cols) because the 6-col photo strip needs intermediate stops. There is also a sanctioned tablet breakpoint, @media (max-width: 1024px) (six blocks: court hero, caselaw rows, CFS list, inmate hero, statute hero, ladder grid), and one small-phone block, @media (max-width: 480px) ("Small phones": masthead padding, 1-col bio grid). These are the only non-720 widths in the file — don't take that as license to add more.

Print

The @media print block at the bottom of the file forces a paper-style render. Add print suppression for any new feature that's interactive-only — existing examples are the lightbox (style.css), the dispatch/CFS map, and the comments/Giscus block (suppressed at :1665). Any new interactive component should be added to that suppression list.

Components you also own

• Lightbox (mugshot zoom, used on inmate pages): style.css, print-suppressed at :1664.
• Recent-bookings photo stack (.rb-grid, .rb-card): style.css, with its own content-visibility at :768 and the non-720 breakpoints noted above.
• Dispatch / CFS map: style.css.
• Comments / Giscus block: style.css.
• Stacked severity bar (.stacked-leg): style.css.
• Top-list: style.css.
• Court calendar: style.css.
• Bond box-and-whisker: style.css.
• Time-in-custody timeline: style.css.
• Stats KPIs: style.css.

Anti-patterns

• New hex literals outside :root. Add a token first.
• Recoloring .tier-F2 (or any ladder cell) without checking ladder + recent-bookings + statute page.
• Adding a box-shadow in light theme without considering print (@media print zeroes most shadows).
• Using font-serif expecting a different family — it's an alias.

Verify

JCSTREAM_SITE_BASE_URL="" JCSTREAM_CNAME="www.aretheyinjail.com" python -m web.build

Then open docs/index.html, docs/inmate/<id>/index.html, docs/stats/index.html, docs/statute/index.html in a browser. Toggle the card / table view on the homepage. Check the 720 px breakpoint.