Hugging Face's logo

Spaces:
lablab-ai-amd-developer-hackathon
/
riprap-nyc
Running

App Files Community
3
riprap-nyc / slides /riprap.css
seriffic's picture
seriffic
Claude Sonnet 4.6
sync: bring HF Space to parity with origin/main (squash, XET-backed)
b2f95f6
Raw History Blame Contribute Delete
16.8 kB
/* @theme riprap
*
* Marp theme that mirrors the SvelteKit UI's design tokens 1:1.
* Civic Hydrology palette (v0.4.6, 2026-05-06): USWDS federal blue,
* cool slate register, deep navy synthesis. Replaces the warm-paper +
* burnt-orange register that read as editorial / Anthropic-adjacent.
* IBM Plex Sans drives display + body; serif retained only for the
* single hero quote-mark on slide 7. Layouts are box/grid framed —
* the deck reads like a dashboard, not an essay.
*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Serif:wght@400;600&display=swap');
:root {
/* USWDS-aligned tier palette. */
--tier-empirical: #005EA2;
--tier-modeled: #1A4480;
--tier-proxy: #475569;
--tier-synthetic: #1A4480;
/* Stones (water-themed). */
--stone-cornerstone: #475569; /* slate (hazard ground) */
--stone-keystone: #1A4480; /* federal navy (assets) */
--stone-touchstone: #0E7490; /* cyan (live water) */
--stone-lodestone: #92400E; /* amber (forecast / hazard) */
--stone-capstone: #162E51; /* deepest navy (synthesis) */
/* Cool register. */
--paper: #F4F6F9;
--paper-deep: #E8ECF2;
--paper-cool: #DCE3EC;
--ink: #0F172A;
--ink-2: #334155;
--ink-3: #64748B;
--rule: #0F172A;
--rule-soft: #CBD5E1;
/* Accent — federal blue is the action. Amber + red used only for
warning / alert pills. */
--accent: #005EA2;
--accent-text: #005EA2;
--accent-warn: #92400E;
--accent-alert: #B91C1C;
/* Inverted (dark slides). */
--paper-dark: #0F172A;
--paper-darker: #0A0F1F;
--font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
--font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
}
/* ── Section ──────────────────────────────────────────────────────────── */
section {
width: 1280px;
height: 720px;
padding: 48px 64px;
background: var(--paper);
color: var(--ink);
font-family: var(--font-sans);
font-size: 22px;
line-height: 1.45;
letter-spacing: 0;
position: relative;
display: flex;
flex-direction: column;
}
/* Bottom-left wordmark on every slide except lead/cta. */
section::before {
content: "▌ riprap";
position: absolute;
left: 64px;
bottom: 28px;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: lowercase;
color: var(--ink);
}
/* Bottom-right slide counter. */
section::after {
content: attr(data-marpit-pagination) " / " attr(data-marpit-pagination-total);
position: absolute;
right: 64px;
bottom: 28px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--ink-3);
}
/* ── Headings — sans-led civic-tech hierarchy ─────────────────────────── */
h1 {
font-family: var(--font-sans);
font-weight: 700;
font-size: 56px;
line-height: 1.05;
letter-spacing: -0.025em;
margin: 0 0 16px;
color: var(--ink);
}
h2 {
font-family: var(--font-mono);
font-weight: 500;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-text);
margin: 0 0 16px;
display: inline-block;
padding-bottom: 4px;
border-bottom: 2px solid var(--accent);
}
h3 {
font-family: var(--font-sans);
font-weight: 600;
font-size: 24px;
line-height: 1.25;
margin: 0 0 8px;
color: var(--ink);
}
/* ── Body ─────────────────────────────────────────────────────────────── */
p {
margin: 0 0 14px;
max-width: 60ch;
}
strong {
font-weight: 600;
color: var(--ink);
}
em {
font-style: normal;
color: var(--accent-text);
font-weight: 600;
}
ul, ol {
margin: 0 0 14px;
padding-left: 0;
list-style: none;
}
ul li, ol li {
position: relative;
padding-left: 24px;
margin: 0 0 12px;
font-size: 20px;
line-height: 1.4;
max-width: 60ch;
}
ul li::before {
content: "";
position: absolute;
left: 0;
top: 0.65em;
width: 12px;
height: 2px;
background: var(--accent);
}
ol { counter-reset: ol-num; }
ol li { counter-increment: ol-num; }
ol li::before {
content: counter(ol-num, decimal-leading-zero);
position: absolute;
left: 0;
top: 0;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--accent-text);
width: auto;
height: auto;
background: transparent;
}
/* ── Code ─────────────────────────────────────────────────────────────── */
code {
font-family: var(--font-mono);
font-size: 0.92em;
background: var(--paper-deep);
padding: 1px 6px;
border-radius: 2px;
color: var(--ink);
border: 1px solid var(--rule-soft);
}
pre {
font-family: var(--font-mono);
font-size: 14px;
line-height: 1.5;
background: var(--paper-deep);
border: 1px solid var(--rule-soft);
border-left: 3px solid var(--accent);
padding: 14px 18px;
margin: 8px 0;
color: var(--ink);
}
pre code { background: transparent; padding: 0; border: 0; }
/* ── Quote ────────────────────────────────────────────────────────────── */
blockquote {
font-family: var(--font-sans);
font-style: normal;
font-size: 24px;
font-weight: 500;
line-height: 1.3;
color: var(--ink-2);
border-left: 3px solid var(--accent-warn);
padding: 4px 0 4px 18px;
margin: 16px 0;
max-width: 56ch;
}
/* ── Rules ────────────────────────────────────────────────────────────── */
hr {
border: 0;
border-top: 1px solid var(--rule-soft);
margin: 16px 0;
}
/* ── Tables ───────────────────────────────────────────────────────────── */
table {
border-collapse: collapse;
font-family: var(--font-sans);
font-size: 17px;
margin: 8px 0;
width: 100%;
border: 1px solid var(--rule-soft);
}
th {
text-align: left;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
padding: 10px 14px;
background: var(--paper-deep);
border-bottom: 1px solid var(--rule);
}
td {
padding: 12px 14px;
border-bottom: 1px solid var(--rule-soft);
vertical-align: top;
}
tr:last-child td { border-bottom: 0; }
/* ── Title slide — bold sans display, dashboard frame ─────────────────── */
section.lead {
display: flex;
flex-direction: column;
justify-content: center;
background: var(--paper);
padding-left: 88px;
padding-right: 88px;
}
section.lead::before {
/* Mark is now an inline <img> sitting at the top-left of the slide
content (see deck.md). Pseudo-element no longer renders the
▌ block — kept as a no-op so the bottom-left wordmark on
non-lead slides still wins via the base section::before. */
content: none;
}
section.lead .lead-mark {
position: absolute;
left: 88px;
top: 56px;
width: 64px;
height: 64px;
display: block;
}
section.lead .eyebrow {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent-text);
margin-bottom: 24px;
margin-top: 0;
padding-top: 80px;
display: flex;
align-items: center;
gap: 12px;
}
section.lead .eyebrow::after {
content: "";
flex: 1;
height: 1px;
background: var(--rule-soft);
max-width: 280px;
}
section.lead h1 {
font-family: var(--font-sans);
font-weight: 700;
font-size: 104px;
line-height: 0.92;
letter-spacing: -0.035em;
margin: 0 0 16px;
}
section.lead h2 {
font-family: var(--font-sans);
font-weight: 400;
font-size: 26px;
letter-spacing: -0.005em;
text-transform: none;
color: var(--ink-2);
margin: 0 0 32px;
max-width: 30ch;
border: 0;
padding: 0;
display: block;
}
section.lead .meta {
margin-top: 24px;
display: grid;
grid-template-columns: auto 1px auto auto;
gap: 16px;
align-items: center;
width: fit-content;
}
section.lead .meta-divider {
width: 1px;
height: 14px;
background: var(--rule-soft);
}
section.lead .meta-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
}
section.lead .meta-value {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink);
}
/* ── CTA / closing slide — dark inverted ─────────────────────────────── */
section.cta {
background: var(--paper-dark);
color: var(--paper);
padding-left: 88px;
padding-right: 88px;
justify-content: center;
}
section.cta::before {
/* Replaced by inline mark in deck.md (.cta-mark). */
content: none;
}
section.cta .cta-mark {
position: absolute;
left: 88px;
top: 56px;
width: 56px;
height: 56px;
display: block;
}
section.cta::after { color: rgba(244, 246, 249, 0.42); }
section.cta h1 {
font-family: var(--font-sans);
font-weight: 700;
font-size: 96px;
line-height: 0.95;
letter-spacing: -0.03em;
color: var(--paper);
margin: 80px 0 16px;
}
section.cta h2 {
font-family: var(--font-mono);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 32px;
border: 0;
padding: 0;
display: block;
}
section.cta p {
font-size: 20px;
color: rgba(244, 246, 249, 0.85);
max-width: 70ch;
}
section.cta hr { border-top-color: rgba(203, 213, 225, 0.2); margin: 24px 0; }
section.cta .pill { background: rgba(244, 246, 249, 0.08); color: rgba(244, 246, 249, 0.85); border-color: rgba(203, 213, 225, 0.2); }
/* ── Slide chrome: eyebrow + heading frame ───────────────────────────── */
.eyebrow {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent-text);
margin: 0 0 8px;
display: flex;
align-items: center;
gap: 10px;
}
.eyebrow::before {
content: "▌";
color: var(--accent);
font-family: var(--font-mono);
font-weight: 600;
font-size: 14px;
}
/* ── Box / card primitives — the dashboard shape ─────────────────────── */
.box {
border: 1px solid var(--rule-soft);
background: var(--paper);
padding: 18px 22px;
position: relative;
}
.box.tinted {
background: var(--paper-deep);
}
.box.dark {
background: var(--paper-dark);
color: var(--paper);
border: 0;
}
.box.dark .lbl,
.box.dark .smallcaps {
color: rgba(244, 246, 249, 0.6);
}
.box.dark .stat-value {
color: var(--paper);
}
.box.dark .body {
color: var(--paper);
font-size: 17px;
line-height: 1.4;
}
.box.dark .body strong {
color: var(--paper);
}
.box-grid {
display: grid;
gap: 12px;
margin-top: 12px;
}
.box-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.box-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.box-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.box .lbl {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: 6px;
}
.box .body {
font-size: 18px;
line-height: 1.4;
color: var(--ink);
}
.box .body strong { color: var(--ink); }
/* ── Track-flag stack (slide 4) ──────────────────────────────────────── */
.track-row {
display: grid;
grid-template-columns: 28px 200px 1fr 90px;
gap: 16px;
align-items: center;
padding: 14px 18px;
border: 1px solid var(--rule-soft);
background: var(--paper);
margin-bottom: 8px;
}
.track-row.engaged {
background: var(--paper);
border-left: 3px solid var(--accent);
}
.track-row.unengaged {
opacity: 0.55;
border-left: 3px solid transparent;
}
.track-row .check {
font-family: var(--font-mono);
font-weight: 700;
font-size: 16px;
text-align: center;
color: var(--accent);
}
.track-row.unengaged .check { color: var(--ink-3); }
.track-row .name {
font-family: var(--font-sans);
font-weight: 600;
font-size: 17px;
color: var(--ink);
}
.track-row .detail {
font-size: 16px;
color: var(--ink-2);
line-height: 1.35;
}
.track-row .badge {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-3);
text-align: right;
}
/* ── Big stat / number card ──────────────────────────────────────────── */
.stat {
display: flex;
flex-direction: column;
gap: 4px;
}
.stat-value {
font-family: var(--font-sans);
font-weight: 700;
font-size: 56px;
line-height: 1;
color: var(--ink);
letter-spacing: -0.025em;
}
.stat-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
margin-top: 6px;
}
/* ── Codeblock (HTML-rendered, so inline spans keep color) ───────────── */
.codeblock {
font-family: var(--font-mono);
font-size: 14px;
line-height: 1.55;
background: var(--paper-deep);
border: 1px solid var(--rule-soft);
border-left: 3px solid var(--accent);
padding: 16px 20px;
margin: 8px 0;
color: var(--ink);
}
.codeblock .cite {
color: var(--accent-text);
font-weight: 600;
}
.codeblock .label {
font-weight: 700;
color: var(--ink);
}
/* ── Pill ─────────────────────────────────────────────────────────────── */
.pill {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
background: var(--paper-deep);
border: 1px solid var(--rule-soft);
padding: 4px 10px;
color: var(--ink-2);
margin-right: 6px;
}
.pill.accent {
background: var(--accent);
color: var(--paper);
border-color: var(--accent);
}
.pill.warn {
background: var(--accent-warn);
color: var(--paper);
border-color: var(--accent-warn);
}
.pill.dim {
opacity: 0.55;
}
/* ── Small caps utility ──────────────────────────────────────────────── */
.smallcaps {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
}
/* ── Two-column layout (slides 2, 6) ─────────────────────────────────── */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
margin-top: 8px;
}
.two-col > div p,
.two-col > div li { font-size: 18px; line-height: 1.45; max-width: none; }
.two-col > div p:last-child,
.two-col > div li:last-child { margin-bottom: 0; }
/* ── Stone-tinted heading rules ──────────────────────────────────────── */
section[data-stone="cornerstone"] h2 { color: var(--stone-cornerstone); border-bottom-color: var(--stone-cornerstone); }
section[data-stone="keystone"] h2 { color: var(--stone-keystone); border-bottom-color: var(--stone-keystone); }
section[data-stone="touchstone"] h2 { color: var(--stone-touchstone); border-bottom-color: var(--stone-touchstone); }
section[data-stone="lodestone"] h2 { color: var(--stone-lodestone); border-bottom-color: var(--stone-lodestone); }
section[data-stone="capstone"] h2 { color: var(--stone-capstone); border-bottom-color: var(--stone-capstone); }