/* ===================================================================== components.css — the pieces used by more than one slide. If a rule here is only ever used by a single slide, it belongs in css/slides/.css instead. Keeping that line sharp is the whole point of the split. ===================================================================== */ /* --------------------------------------------------------------------- Surfaces --------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1.1rem,2.2vw,1.6rem); } /* 3-up / 2-up feature grid — the 1px gap over a border-coloured background is what draws the hairlines between cells. */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); } .grid-3 > *, .grid-2 > * { background: var(--surface); padding: clamp(0.9rem,1.8vw,1.3rem); display: flex; flex-direction: column; gap: 0.5rem; } @media (max-width: 700px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } } /* plain two-column layout — no hairlines, no cell backgrounds. Exists so slides don't reach for .grid-2 and then inline-style away everything it does. Columns stretch by default (grid's own default); .middle centres them. */ .cols-2 { display: grid; grid-template-columns: var(--cols, 1fr 1fr); gap: clamp(1.2rem,3vw,2.4rem); } .cols-2.middle { align-items: center; } @media (max-width: 760px) { .cols-2 { grid-template-columns: 1fr; } } /* stat strip */ .stat-strip { display: grid; grid-template-columns: repeat(var(--tiles, 4), 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); } .stat-tile { background: var(--surface); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; } .stat-tile .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 500; color: var(--accent); line-height: 1.1; } .stat-tile .lbl { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); } @media (max-width: 700px) { .stat-strip { grid-template-columns: repeat(2, 1fr) !important; } } /* --------------------------------------------------------------------- Inline type --------------------------------------------------------------------- */ .mono { font-family: var(--font-mono); } .od { color: var(--accent); } .eyebrow-num { font-family: var(--font-mono); color: var(--accent); font-size: 0.85rem; } /* the source / caveat line under a chart or table. Eight slides use it. */ .source-note { font-size: 0.7rem; color: var(--fg-muted); max-width: none; } .badge { display: inline-block; color: var(--on-accent); background: var(--accent-grad); border-radius: var(--radius); font-weight: 500; } .badge.block { display: block; text-align: center; font-size: 0.7rem; padding: 0.45rem 0.6rem; } .badge.tag { align-self: flex-start; font-family: var(--font-mono); font-size: 0.68rem; padding: 0.22rem 0.55rem; font-weight: 400; } .cta { font: inherit; font-weight: 500; color: var(--on-accent); background: var(--accent-grad); border: 0; border-radius: var(--radius); padding: 0.8rem 1.4rem; cursor: pointer; transition: transform 0.15s var(--ease), opacity 0.15s var(--ease); display: inline-block; text-decoration: none; } .cta:hover { transform: translateY(-2px); opacity: 0.92; } .link-quiet { color: var(--fg-muted); font-size: 0.85rem; text-decoration: none; border-bottom: 1px solid var(--border); } .link-quiet:hover { color: var(--accent); border-color: var(--accent); } /* --------------------------------------------------------------------- Progress rows — one implementation for what used to be four. Slides 06, 07, 09, 11 and 14 all drew the same thing (bordered track, accent gradient fill revealed by scaleX when the slide becomes visible) under four different class prefixes, which meant the reduced-motion and print overrides had to hand-list every variant and would silently miss a new one. Layout differences are modifiers; size differences are tokens. .stacked label + value above a full-width track (06, 09, 14) .inline label | track | value on one line (07, 11) --track-h track height --track-bg track background --label-w inline label floor --track-fr inline track share --row-gap label→track gap --label-size / --value-size --label-weight / --value-weight The tokens exist because the five original variants were not quite the same size as each other, and the deck is a fundraising artifact — "close enough" would silently restyle slides nobody asked to change. Defaults here match the funnel; the others set what differs in their own stylesheet. --------------------------------------------------------------------- */ .progress-list { display: flex; flex-direction: column; gap: 0.7rem; } /* the allocation variant (slides 09, 14): roomier, lighter label, bold figure — its value used to be a , so it carries the browser's bold weight. */ .progress-list.loose { gap: 1rem; --row-gap: 0.35rem; --label-size: 0.85rem; --value-size: 0.85rem; --label-weight: 400; --value-weight: 700; } .progress-row { display: grid; gap: var(--row-gap, 0.2rem) var(--col-gap, 1rem); align-items: center; transition: opacity 0.3s var(--ease); } .progress-row.stacked { grid-template-columns: 1fr auto; } .progress-row.stacked .progress-track, .progress-row.stacked .progress-sub { grid-column: 1 / -1; } .progress-row.inline { grid-template-columns: minmax(var(--label-w, 120px), 1fr) var(--track-fr, 2fr) auto; } .progress-row.off { opacity: 0.35; } .progress-track { position: relative; height: var(--track-h, 22px); background: var(--track-bg, var(--surface)); border: 1px solid var(--border); } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent-dark), var(--accent)); transform-origin: left; transform: scaleX(0); transition: transform 0.7s var(--ease); } .stage[aria-hidden="false"] .progress-fill { transform: scaleX(1); } /* a slide file opened on its own has no .stage wrapper to trigger the reveal */ body:not(.deck-host) .progress-fill { transform: scaleX(1); } .progress-label { font-size: var(--label-size, 0.82rem); color: var(--fg); font-weight: var(--label-weight, 500); } /* no weight of its own — inherits the label's, which is what the original did */ .progress-label small { display: block; color: var(--fg-muted); font-size: 0.7rem; } .progress-value { font-family: var(--font-mono); font-size: var(--value-size, 0.82rem); color: var(--fg-muted); font-weight: var(--value-weight, 400); text-align: right; white-space: nowrap; } .progress-value.accent { color: var(--accent); } .progress-sub { font-size: 0.76rem; color: var(--fg-muted); margin-top: -0.3rem; } /* --------------------------------------------------------------------- Interactive chart card — slides 10 and 11 share this header shape --------------------------------------------------------------------- */ .card.chart-card { display: grid; gap: clamp(0.55rem, 1.3vw, 0.8rem); padding: clamp(0.85rem,1.7vw,1.2rem); } .chart-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; } .metric-label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; color: var(--fg-muted); } .metric-value { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; } .chart-legend { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; font-size: 0.74rem; color: var(--fg-muted); text-align: right; }