The drawer (.collapse) sits inside the section, so when it opens it becomes the bottom
of the card: the join with the main panel is square and the rounded corners move down.
Vertical margins collapse between siblings, so 20px top + 20px bottom = a 20px gap between cards
(and 20px under the header / above the footer).
*/
.fb-card {
margin: 20px 0;
border-radius: 40px;
overflow: hidden; /* clips full-bleed images and the drawer to the corners */
isolation: isolate; /* keeps Safari clipping to the corners while animated (AOS) content moves */
}
@media (max-width: 767.98px) {
.fb-card {
border-radius: 30px;
}
}
/* ---------- Extra colours ----------
Light cream used for drawers in the 2026 layouts (lighter than bg-cream #F2F2E2).
If the same class is added to Spinnr's styles it will also show in the Spinnr editor. */
.bg-cream-light {
background-color: #F7F7EF;
}
/* ---------- Report typography ----------
Body text in card sections: 18px on 24px lines, as in the 2026 layouts (site default is 27px). */
.fb-card p,
.fb-card li {
line-height: 1.35;
}
/* Big section title ("A nation under pressure"): 64px, tight lines. Use on the section's h2.
.section .fb-title beats Spinnr's .section h2 (44px). */
.section .fb-title {
font-size: 4rem;
line-height: 1;
}
@media (max-width: 767.98px) {
.section .fb-title {
font-size: 2.75rem;
}
}
/* Links in body text: purple, bold, underlined (Spinnr removes underlines from all links) */
.fb-card a.fb-link {
color: #671E75;
font-weight: 700;
text-decoration: underline;
}
.fb-card a.fb-link:hover,
.fb-card a.fb-link:focus {
color: #332336;
}
/* Chart titles: 18px bold (Spinnr's h5 is 20px/600, which wraps the longer titles) */
.section .fb-chart-title {
font-size: 1.125rem;
font-weight: 700;
}
/* Smaller Work Sans title, e.g. the people queue heading: 26px on 30px lines */
.section .fb-title-sm {
font-size: 1.625rem;
line-height: 1.15;
}
/* Chart footnotes / sources: 11px */
.fb-card .fb-note {
font-size: 0.6875rem;
line-height: 1.4;
}
/* ---------- People queue ----------
A line of people that grows as the reader scrolls, with a counter.
fb-report.js builds the figures from the sprite in data-sprite (one
per figure).
3,600,000 households
Figures take their colour from the text colour (text-primary = purple).
--fb-queue-height is the height of the tallest figure; the others keep their relative sizes. */
.fb-queue {
--fb-queue-height: 45px;
position: relative;
overflow: hidden;
min-height: var(--fb-queue-height);
/* fade the right edge to hint that the line keeps going */
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 60px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 60px), transparent);
}
@media (max-width: 767.98px) {
.fb-queue {
--fb-queue-height: 34px;
}
}
.fb-queue-track {
display: flex;
align-items: flex-end;
width: max-content;
will-change: transform;
transition: transform 0.2s ease-out;
}
/* --h: figure height as a share of the tallest; --g: gap before it (can be negative, people overlap) */
.fb-queue-item {
display: block;
flex: none;
width: auto;
height: calc(var(--h, 1) * var(--fb-queue-height));
margin-left: calc(var(--g, 0) * var(--fb-queue-height));
fill: currentColor;
opacity: 0;
transform: translateY(6px) scale(0.92);
transform-origin: 50% 100%;
transition: opacity 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fb-queue-item.on {
opacity: 1;
transform: none;
}
.fb-queue-count {
font-weight: 700;
font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
.fb-queue-item {
opacity: 1;
transform: none;
transition: none;
}
.fb-queue-track {
transition: none;
}
}
/* ---------- Report cover hero ----------
Add fb-hero to the cover's .hero-banner (inside .report-cover-collapsible):
Spinnr fixes the hero at 46rem tall from 768px up, so on narrower screens the photo keeps
its height, crops in from the left and the faces end up under the text.
- 1200px and up: height scales with the width (45vw = 720px at 1600px, like the design),
so the right-anchored photo keeps the faces clear of the text.
- below 1200px: stack image above text, as Spinnr already does under 768px.
Give the .hero-banner a background class (e.g. bg-plum) for the text area. */
@media (min-width: 1200px) {
.report-cover-collapsible > div.hero-banner.fb-hero > div {
min-height: 45vw;
}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.report-cover-collapsible > div.hero-banner.fb-hero > img {
position: static;
height: 24rem;
}
.report-cover-collapsible > div.hero-banner.fb-hero > div {
min-height: 0;
padding-top: 2.5rem !important;
padding-bottom: 3rem !important;
}
}
/* Card drawer animation (opening/closing is handled by fb-report.js)
The drawer's own padding (py-5) can't shrink, so the drawer jumped 96px on the first frame.
Move the padding onto the content inside so the height animates from a true 0.
Bootstrap swaps .collapse for .collapsing while animating, so every rule targets both. */
.fb-card > .collapse,
.fb-card > .collapsing {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.fb-card > .collapse > .container,
.fb-card > .collapsing > .container {
padding-top: 3rem; /* same as py-5 */
padding-bottom: 3rem;
}
/* 0.5s with a soft start and finish. Keep in step with DRAWER_DURATION in fb-report.js.
Bootstrap 4.0.0 cuts animations off at 600ms, so don't go above 0.6s. */
.fb-card > .collapsing {
transition: height 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
/* Content fade. fb-report.js adds .fb-anim to each card (so content stays visible if the JS
doesn't load) and .fb-open while the drawer is open or opening. */
.fb-card.fb-anim > .collapse > .container,
.fb-card.fb-anim > .collapsing > .container {
opacity: 0;
transition: opacity 0.25s ease;
}
.fb-card.fb-anim.fb-open > .collapse > .container,
.fb-card.fb-anim.fb-open > .collapsing > .container {
opacity: 1;
transition: opacity 0.4s ease 0.15s;
}