becomes a card and each
* | becomes a labeled line inside it. Cells whose data-label is empty
* render the value without a label (use for trailing action cells). */
@media (max-width: 576px) {
table.responsive-stack,
table.responsive-stack thead,
table.responsive-stack tbody,
table.responsive-stack tr,
table.responsive-stack th,
table.responsive-stack td {
display: block;
width: auto;
}
table.responsive-stack thead {
display: none;
}
table.responsive-stack tr {
border: 1px solid var(--pico-muted-border-color);
border-radius: var(--pico-border-radius);
padding: 0.75rem;
margin-bottom: 0.5rem;
}
table.responsive-stack td {
border: none;
padding: 0.25rem 0;
}
table.responsive-stack td[data-label]:not([data-label=""])::before {
content: attr(data-label);
display: block;
font-size: 0.7rem;
font-weight: 600;
color: var(--pico-muted-color);
text-transform: uppercase;
letter-spacing: 0.03em;
margin-bottom: 0.15rem;
}
}
/* Markdown-rendered blocks (type descriptions/instructions, submission
bodies): tighten default block margins so short content doesn't balloon,
while paragraphs and lists still read as such. */
.md-block p { margin: 0 0 0.5em; }
.md-block p:last-child { margin-bottom: 0; }
.md-block ul, .md-block ol { margin: 0.25em 0 0.5em; padding-left: 1.25em; }
.md-block li { margin-bottom: 0.15em; }
/* ---------------------------------------------------------------------------
* Recap page (pages/recap_view.html)
*
* The recap is a two-column reading surface: the recap prose on the left, a
* navigational rail on the right tying it back to the community, the series,
* and what happens next. Deliberately NOT the shared .admin-layout /
* .admin-sidebar pair from narratory-spa.css — that is a 180px left-hand nav
* rail with admin-dashboard semantics, and member pages are outside the SPA
* standard's scope (see Convene AGENTS.md "Known deviations").
* ------------------------------------------------------------------------ */
.recap-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 2rem;
align-items: start;
}
/* min-width:0 stops a long URL or code block in the recap from blowing out
* the grid track — the default `min-width:auto` on a grid item won't shrink. */
.recap-main { min-width: 0; }
/* The headline, podcast link and share control sit above the grid so the rail
starts level with the recap body rather than with the title. */
/* Occurrence banner above the recap headline. Fixed aspect so a missing or
slow image doesn't reflow the page, and object-fit so an admin upload that
isn't 1.91:1 fills the frame without distorting. */
/* Presenter list in the recap rail. Avatars are the same 512px square JPEGs
the agenda email uses, rendered small and round. */
.presenter-list { list-style: none; padding: 0; margin: 0; }
.presenter-list li {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.6rem;
}
.presenter-list li:last-child { margin-bottom: 0; }
.presenter-meta { display: flex; flex-direction: column; min-width: 0; }
.presenter-name { font-weight: 600; }
.presenter-meta a { font-size: 0.8rem; }
.presenter-list img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.recap-banner {
display: block;
width: 100%;
aspect-ratio: 1200 / 630;
object-fit: cover;
border-radius: var(--pico-border-radius);
margin-bottom: 1.25rem;
}
.recap-header { margin-bottom: 1.5rem; }
/* The rail sits alongside the recap and starts level with it. It deliberately
does NOT scroll independently: a second scroll region beside a document the
reader is already scrolling is a nuisance, and the rail is short enough to
simply flow with the page. `.recap-layout` aligns both columns to start. */
.recap-rail {
align-self: start;
}
/* A link material is labelled with its full URL, which has no spaces to break
on — without this it overflows the column. */
.material-list a {
overflow-wrap: anywhere;
}
.rail-card {
background: var(--pico-card-background-color);
border: 1px solid var(--pico-muted-border-color);
border-radius: var(--pico-border-radius);
padding: 0.75rem 1rem;
margin-bottom: 1rem;
}
.rail-card:last-child { margin-bottom: 0; }
.rail-card > h4 {
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--pico-muted-color);
margin: 0 0 0.5rem;
}
.rail-card ul { list-style: none; margin: 0; padding: 0; }
.rail-card li { margin: 0 0 0.5rem; font-size: 0.9rem; line-height: 1.4; }
.rail-card li:last-child { margin-bottom: 0; }
.rail-card p { margin: 0 0 0.5rem; font-size: 0.9rem; }
.rail-card p:last-child { margin-bottom: 0; }
/* Prev/next through a series' recaps, at the foot of the recap prose. */
.recap-pager {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid var(--pico-muted-border-color);
}
@media (max-width: 768px) {
.recap-layout { grid-template-columns: 1fr; gap: 1.5rem; }
}
/* A recap is a document people archive and print. Navigation isn't part of it. */
@media print {
.recap-rail,
.recap-pager,
.recap-share { display: none !important; }
.recap-layout { display: block; }
}
/* --- Branded links -------------------------------------------------------
*
* The public community / series / occurrence pages set --brand-primary and
* --brand-secondary from the configured hex in their {% block brand_style %}.
* Every link on those pages has to follow that hex: Pico's default #0172ad
* collides with the brand and reads as "generic web link" in the middle of an
* otherwise branded page. Previously each anchor opted in with an inline
* `style="color:var(--brand-primary)"`, so any link that was added without one
* — table cells, markdown-rendered descriptions, recap lists — silently stayed
* blue. This makes brand colour the default instead of the exception.
*
* Pico's own link rule is `:where(a:not([role=button]))`, i.e. zero
* specificity, so this wins wherever the vars are defined. Where they aren't
* (dashboard, member pages) each var falls back to the exact Pico value it
* replaces, so those pages are unchanged: Pico's --pico-primary-underline is
* --pico-primary at 50% alpha, and its hover underline is the solid hover
* colour.
*
* Excluded: role=button links (styled as buttons, see .cta-btn) and
* .secondary/.contrast links, where the class is an explicit "not the primary
* colour" choice. A page that needs white-on-gradient links still wins on
* specificity — see `.brand-banner a` in member_event_detail.html.
*/
a:not([role=button]):not(.secondary):not(.contrast) {
--pico-color: var(--brand-primary, var(--pico-primary));
--pico-underline: color-mix(in srgb, var(--brand-primary, var(--pico-primary)) 50%, transparent);
}
a:not([role=button]):not(.secondary):not(.contrast):is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
--pico-color: var(--brand-secondary, var(--pico-primary-hover));
--pico-underline: var(--brand-secondary, var(--pico-primary-hover));
}
/* --- Next-event spotlight card -------------------------------------------
*
* The shared card rendered by pages/_next_event_card.html on both the series
* page and the community page. Lives here rather than as inline styles because
* two templates now share it — see design_standards.md §10.
*
* Depends on --brand-primary / --brand-secondary, which every page that
* includes the card defines in its {% block brand_style %}.
*/
.next-event-card {
border: 1px solid var(--pico-muted-border-color);
border-radius: var(--pico-border-radius);
padding: 1rem 1.25rem;
margin-bottom: 1.5rem;
}
.next-event-card .eyebrow {
margin: 0 0 0.25rem;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--brand-secondary);
}
.next-event-card h3 { margin: 0 0 0.5rem; }
/* The headline and CTA are the card, not links inside prose — no underline. */
.next-event-card h3 a { text-decoration: none; }
.next-event-card .meta,
.next-event-card .phase { margin: 0 0 0.5rem; }
.next-event-card .meta,
.next-event-card .phase small { color: var(--pico-muted-color); }
.next-event-card .cta { margin: 0.75rem 0 0; }
.next-event-card .cta a {
color: var(--brand-secondary);
font-weight: 600;
text-decoration: none;
}
|