/* ============================================================
Container — shared responsive layout constraint
Provides 1024px max content width with responsive side padding.
Import this in any component that uses the .container class.
============================================================ */
.container {
position: relative;
width: 100%;
max-width: calc(1024px + 160px); /* 1024px content + 80px × 2 */
padding: 0 80px;
margin: 0 auto;
box-sizing: border-box;
}
/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
.container {
padding: 0 60px;
}
}
/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
.container {
padding: 0 2rem;
}
}
/* ============================================================
Wide container — 1360px content + 48px side padding
Used for full-bleed section content blocks (slider, big cards)
that need to be wider than the standard 1024px text container.
============================================================ */
.container-wide {
width: 100%;
max-width: calc(1384px + 96px); /* 1384px content + 48px × 2 */
padding: 0 3rem; /* 48px sides */
margin: 0 auto;
box-sizing: border-box;
}
/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
.container-wide {
padding: 0 44px;
}
}
/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
.container-wide {
padding: 0 1rem;
}
}
/* ============================================================
Data Report LP — page-wide design language.
Figma 6JdV8D0ZGECx2whzGAnTrs, frame "Redesign mockup" (6797:2035).
This page introduces three things the rest of the site does not have, and
all three are used by SIX sections — hence one page-level stylesheet rather
than six copies. Every `data-report/*` section imports this file.
1. A DISPLAY SERIF (`--dr-font-display`) for headlines, stat figures and
pull quotes. See the font note below — it is not yet hosted.
2. A YELLOW MARKER HIGHLIGHT (`.dr-mark`) drawn behind phrases inside a
headline.
3. A WHITE PAGE GROUND. The rest of the site is cream ground (#F5F0E7)
with white cards; this LP inverts that — white ground with cream
(#FAF6F0 = `--secondary`) panels and note cards. Do not "fix" a
data-report section to `var(--background)`; that is the inversion, not
a mistake.
============================================================ */
/* ---- 1. Display serif ------------------------------------- */
/* Figma specifies "Rowan" (Light 300 + Light Italic) for every headline on
this page, and the licensed faces are now hosted: the `@font-face` blocks
live in `src/webfont/fonts.css` alongside II Increments Sans, served as
.woff2 from `src/webfont/Rowan/`.
That file is reached from `src/globals.ts`, which `webflow.json` declares
as the library's `globals` entry — so the face loads in the Webflow
components, the Vite app (`src/main.tsx`) and Storybook
(`.storybook/preview.ts`) alike. There is nothing per-component to wire.
The serif fallbacks below are kept as a genuine fallback (font blocked,
404, `font-display: swap` before load) — not as a stand-in. */
:host {
--dr-font-display:
'Rowan',
ui-serif,
Georgia,
'Iowan Old Style',
'Times New Roman',
serif;
/* 48px / 1.25 — Figma's headline size. The repo scale stops at
`--font-size-3xl` (30px), so this is page-local rather than a fake
`--font-size-5xl`. */
--dr-font-size-display: 3rem;
--dr-line-height-display: 1.25;
/* The marker wash: a left-to-right fade, 0.7 → 0.49 alpha, on #E3E96A.
Figma draws it as an absolutely-positioned rounded rect behind the text;
here it is a background on the text itself so it reflows. */
--dr-mark-from: rgba(227, 233, 106, 0.7);
--dr-mark-to: rgba(227, 233, 106, 0.49);
}
/* ---- 2. Marker highlight ---------------------------------- */
/* Usage: where firms win or lose clients.
`box-decoration-break: clone` is what makes a multi-line highlight render
as one wash per line instead of a single box with the middle lines
unpainted — without it a phrase that wraps loses its highlight on every
line but the first. The vertical padding pads the 60px text line box out
to Figma's 64px rect. */
.dr-mark {
background: linear-gradient(90deg, var(--dr-mark-from), var(--dr-mark-to));
color: inherit;
border-radius: 2px;
padding: 0.125rem 0; /* 2px — 60px line box → 64px rect */
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
/* ---- 3. Page ground --------------------------------------- */
/* The white ground every data-report section sits on. Named so a section
reads `background: var(--dr-ground)` and the intent is obvious. */
:host {
--dr-ground: var(--card); /* #FFFFFF */
--dr-panel: var(--secondary); /* #FAF6F0 — cream panels + note cards */
}
/* ---- Section rhythm --------------------------------------- */
/* `.hp-section` holds its desktop 128px until 991px, so between 992 and
1199 two white sections stood 256px apart (and 192 at tablet) — far looser
than this page's hero and CTA, which already step down. Figma has no frame
between desktop and 402, so the page steps its white sections down in line
with those two:
≥1200 128 Figma desktop (`.hp-section` as-is)
≤1199 96 same step as DataReportCtaSection's `__cta`
≤991 80 the hero's and CTA's tablet padding
≤767 64 `.hp-section`'s own mobile value, restated because the
rules above would otherwise still apply
Two classes so it beats `.hp-section`'s media rules regardless of which
stylesheet lands first. A section that needs its own value at a width
(findings at ≤767) overrides with the same two-class weight. */
@media (max-width: 1199px) {
.hp-section.dr-section { padding-block: 6rem; } /* 96px */
}
@media (max-width: 991px) {
.hp-section.dr-section { padding-block: 5rem; } /* 80px */
}
@media (max-width: 767px) {
.hp-section.dr-section { padding-block: 4rem; } /* 64px */
}
/* ---- Shared display heading ------------------------------- */
/* Every headline on this page is the same face/size/weight; only the copy
and the highlighted run change. */
.dr-display {
margin: 0;
font-family: var(--dr-font-display);
font-size: var(--dr-font-size-display);
line-height: var(--dr-line-height-display);
font-weight: var(--font-weight-light); /* 300 — Rowan Light */
color: var(--foreground);
}
.dr-display em,
.dr-display .dr-italic {
font-style: italic;
}
/* Tablet (≤991px) is still the repo's usual proportional reduction — there is
no tablet frame. Mobile (≤767px) is MEASURED: see
DataReportPage.mobile.figma.md. Figma's 402px hero headline text node is
322 x 270 over six lines, i.e. 45px leading, and `.dr-display`'s 1.25 ratio
puts the face at 36px. The earlier 32px was a guess made before the mobile
frame existed. */
@media (max-width: 991px) {
:host { --dr-font-size-display: 2.5rem; } /* 40px */
}
@media (max-width: 767px) {
:host { --dr-font-size-display: 2.25rem; } /* 36px — Figma 6850:13075 */
}
/* ---- Display heading, section size ------------------------ */
/* The section headings (methodology, inside-the-report) are 36px/40px, not
the hero's 48px. Same face and weight — this is `.hp-heading`'s size in the
display serif, so it lines up with every other section heading on the site
while carrying this page's typeface. */
.dr-display--sm {
font-size: 2.25rem; /* 36px */
line-height: 2.5rem; /* 40px */
}
/* Confirmed against the mobile frame: Figma's 402px section headings
(methodology 6850:13649, inside 6853:13911) are 338 x 72 over two lines =
36px leading, and "The full picture" (6853:15100) is a single 36px line. */
@media (max-width: 767px) {
.dr-display--sm {
font-size: 1.875rem; /* 30px — matches .hp-heading's mobile step-down */
line-height: 2.25rem; /* 36px */
}
}
/* ---- Mobile body copy: 18px / 28px ------------------------
Every body text node on the 402px frame is `--font-size-lg` over
`--line-height-lg` — ONE step down from the desktop 20px/28px, with the
leading unchanged. Before the mobile frame existed each section dropped two
steps to 16px/24px as a guess.
Both halves of that are easy to get wrong, so here is how it was measured
rather than inferred — the node heights alone only give the LEADING:
- Line count. Figma's methodology caveat (6850:13723) is 338 x 112 = four
28px lines. Rendered in the real II Increments Sans at 338px, that copy
takes four lines at 16/17/18px and five at 19/20px.
- Line width. Figma's third line, "that critical first step. Full
definitions,", measures 282px of ink in the frame; the same string in the
real face is 269px at 17px, 285px at 18px, 316px at 20px.
Caveat for anyone re-measuring: the cream panels' background (249,246,239)
reads as "not white", so a naive non-white ink test inside `.data-report-quote`
or `.data-report-cta` returns the panel, not the glyphs. Threshold on real
glyph darkness instead. */
/* ---- Badge pill, inverted --------------------------------- */
/* `.hp-badge` fills with `var(--card)` (white), which works everywhere else
on the site because sections sit on the cream `--background`. On THIS page
the ground IS white, so the stock pill is invisible — Figma fills it with
the cream `#F5F0E7` instead (sampled from the render to confirm; note that
is `--background`, not the slightly different `--secondary` #FAF6F0 used
for the panels and note cards).
Scoped to `.dr-section` rather than overriding `.hp-badge` globally, so
every other page's badge is untouched. Applies to both the sticky rail
badge and the inline one. */
.dr-section .hp-badge {
background: var(--background);
}
/* ============================================================
DataReportHeroSection — Figma 6JdV8D0ZGECx2whzGAnTrs, node 6817:3489.
Spec: DataReportHeroSection.figma.md.
Escape-the-container grid, fixed-width variant
(docs/escape-the-container-grid.md). The wrapper is 1512/16px rather than
`.container-wide`'s 1480/48px because the design's visual bleeds to 16px
from the viewport edge — further than the wide container reaches.
============================================================ */
/* ---- Outer section ---------------------------------------- */
.data-report-hero {
position: relative;
width: 100%;
/* White ground — NOT `var(--background)`. This page inverts the site's
cream-ground/white-card scheme; see ../data-report.css. */
background: var(--dr-ground);
/* ALL of the hero's vertical spacing is here — the copy column and the
book box carry no padding or margins of their own. Figma spreads it over
three nested layers; the sums are what matter:
top 144 = frame pt-128 + the Copy frame's own pt-16 (6817:3494 y=16).
Eyebrow row at y=144, exactly as Figma.
bottom 124 = body text → the quote panel's white border. In Figma the
body ends at y=682 and the panel's border starts at 806:
108 inside the 790 frame (Copy pb-32 + the hidden, EMPTY
Action frame's 40 + its 36 gap) + 16 of bottom padding on
the parent frame (6797:2036 is 894 = 88 + 790 + 16). The
build had lost that last 16 and sat 16px short. Body →
cream is 140 with the border, as in Figma. */
padding: 9rem 0 7.75rem; /* 144px / 124px */
font-family: var(--font-family-default);
box-sizing: border-box;
/* The visual's layout box is the book alone; its drop shadow is painted
outside that box. Clip the X axis ONLY, so the right-hand bleed can never
produce a scrollbar — but let the shadow fall past the section's bottom.
Its faint tail runs ~27% of the book's width below the book (~112px on
tablet, ~81px on mobile), more than the stacked layouts leave under it.
With `overflow: hidden` it was sliced off flat at the hero's bottom edge,
and the quote panel's 16px white border directly beneath made that cut
read as a hard line. Now it spills over the border onto the panel, like
a real shadow on the surface below.
`clip`, not `hidden`: `overflow-x: hidden` would force `overflow-y` to
`auto` and clip (or scroll) the bottom anyway; `clip` has no such
coupling. `position: relative` (above) is also what makes the hero paint
OVER the quote section that follows it — that section is unpositioned. */
overflow-x: clip;
overflow-y: visible;
}
/* ---- Content wrapper -------------------------------------- */
.data-report-hero__wrap {
width: 100%;
max-width: 1512px;
padding: 0 16px;
margin: 0 auto;
box-sizing: border-box;
}
/* ---- Grid ------------------------------------------------- */
/* The spacer is 64px, not the doc's 32px, and the gutter cap is 164px:
(1480 - 1024) / 2 - 64 = 164. Both follow from this wrapper's 16px page
inset, and together they keep column 3 on `.container`'s left edge at
EVERY width, not just wide ones:
- Wide (>=1184px viewport): 16 + 164 + 64 = 244 = (1512 - 1024) / 2. ✔
- The gutter reaches 0 at exactly a 1184px viewport — which is also
`.container`'s max-width, below which it becomes full-width with 80px
padding. There, column 3 starts at 16 + 0 + 64 = 80px. ✔
That second line is why the spacer is 64 and not 32. The doc's canonical
48px wrapper + 32px spacer also sums to 80; a 16px wrapper needs a 64px
spacer to land on the same number. With a 32px spacer the copy column
would sit 32px left of every other section on the page between 992 and
1184px wide.
`minmax(0, X)` on the fixed tracks, never a bare `X` — a bare fixed track
cannot shrink, so once the gutter has collapsed to 0 the row overflows.
The same goes for the last track: a bare `1fr` will not go below the
book's 412.5px width, and on small desktops it squeezes the copy instead.
The 75px gap is measured to the BOOK, not to Figma's Img node: the node
starts at x=807 (a 59px gap) but the cover's own left edge is at 823. */
.data-report-hero__grid {
display: grid;
grid-template-columns: clamp(0px, calc((100% - 1024px) / 2 - 64px), 164px)
64px
minmax(0, 504px)
minmax(0, 75px)
minmax(0, 1fr);
column-gap: 0;
/* The copy is flush to the top padding; the visual overrides this with
`align-self: center`. */
align-items: start;
}
/* ---- Copy column (Figma 6817:3493) ------------------------ */
/* No padding. Figma's pt-16 / pb-32 are folded into the section's padding,
and its pr-32 did nothing: the headline and body carry their own max-widths
(439 / 472), both inside the 504px track. */
.data-report-hero__copy {
grid-column: 3;
display: flex;
flex-direction: column;
min-width: 0;
}
/* 6817:3494 — heading block → body */
.data-report-hero__intro {
display: flex;
flex-direction: column;
gap: var(--spacing-8); /* 32px */
}
/* 6817:3496 — eyebrow → headline */
.data-report-hero__heading {
display: flex;
flex-direction: column;
gap: var(--spacing-6); /* 24px */
}
/* ---- Eyebrow (6817:3497) ---------------------------------- */
/* No pill background: Figma's `noice-bg` rect (6817:3499) is hidden. */
.data-report-hero__eyebrow {
display: flex;
align-items: center;
gap: var(--spacing-2); /* 8px */
/* Figma's eyebrow row is 38px tall (1px padding + 8px py + 20px line box
+ 8px + 1px), not the 20px its line box alone would give. Dropping it
pulls the headline ~9px closer than the design. */
min-height: 38px;
margin: 0;
font-size: var(--font-size-sm); /* 14px */
line-height: var(--line-height-sm); /* 20px */
font-weight: var(--font-weight-medium);
/* Figma: rgba(40,40,37,0.6). There is no --opacity-neutral-60 (the scale
stops at 50), so derive it from --foreground rather than hardcoding. */
color: color-mix(in srgb, var(--foreground) 60%, transparent);
}
.data-report-hero__eyebrow svg {
flex-shrink: 0;
}
/* ---- Headline (6817:3505) --------------------------------- */
/* Face/size/weight come from `.dr-display` (../data-report.css); the marker
wash comes from `.dr-mark`. Only the measure is section-local.
`pre-line` is what reproduces Figma's authored line breaks (after “part”,
after “is”, and before “lose clients.”) without hard-coding `
` elements
that the Webflow text props could not express. It still wraps normally on
top of those breaks. They matter: Rowan is narrow enough that free wrapping
at 456px yields five lines instead of Figma's six, which moves the marker
highlight to start mid-line instead of at a line start. */
.data-report-hero__title {
max-width: 439px; /* Figma text-node width */
white-space: pre-line;
}
/* ---- Body (6817:3509) ------------------------------------- */
.data-report-hero__body {
margin: 0;
max-width: 472px; /* Figma text-node width */
font-size: var(--font-size-xl); /* 20px */
line-height: var(--line-height-xl); /* 28px */
font-weight: var(--font-weight-regular);
color: var(--foreground);
}
/* ---- Visual (6817:3524) ----------------------------------- */
/* SUBJECT-FRAMED. The layout box is the BOOK, not the image file.
The export (1158 x 1310, transparent) holds the cover at (30,51)–(855,1086)
— 825 x 1035 — and the rest is drop shadow and empty canvas. Sizing the
`![]()
` sizes the shadow, so every spacing decision ends up relative to how
big the shadow happens to be. Instead `__visual` IS the book's box and
takes part in layout; the image is absolutely positioned inside it, scaled
so the book lands exactly on the box's edges, and the shadow spills out
without moving anything.
Measured against the Figma render (cover pixels, shadow excluded): the book
is 410 x 518 at x=823, y=153 — i.e. the export at exactly 0.5x. So:
- width 412.5px = 825 x 0.5 — the design's book, NOT the column width.
The first attempt at this (rolled back 2026-09-28) let the book
fill the 689px column and rendered it 1.67x too large.
- x the book's left edge sits on the last track's start — the grid's
75px gap track is the copy → book distance, as in Figma.
- y CENTRED against the copy (`align-self: center`; with no padding on
the copy column, the row is exactly the text's height).
A deliberate departure from Figma, which top-aligns the book with
the eyebrow — the owner's call, 2026-09-29. Horizontal stays as
Figma draws it; only the stacked layouts centre horizontally.
The `max-width: 79%` keeps the shadow on screen as the column narrows: the
visible shadow (alpha >= 10) reaches 1041/825 of the book's width to the
right of its left edge, and 825/1041 = 79%. Above ~1200px the 412.5px book
fits with room to spare, so the cap only engages on small desktops, where
it scales book + shadow down together instead of letting
`overflow: hidden` crop the shadow.
The book (517.5px) is shorter than the copy (538px), so the copy still
sets the row height: 144 + 538 + 124 = 806, Figma's 790 frame + the 16px
below it.
Replacing `visualSrc` with a differently-composed file breaks this framing:
re-measure the book's bounds (alpha >= 128) and re-derive the three
percentages on `__visual-img` and the aspect-ratio here. */
.data-report-hero__visual {
grid-column: 5;
position: relative;
width: 412.5px; /* 825 x 0.5 — the book at design size */
max-width: 79%; /* 825 / 1041 — see above */
aspect-ratio: 825 / 1035; /* the book's own bounds in the export */
align-self: center; /* vertically centred against the copy */
}
/* Every value is a ratio against the BOOK, so it holds at any rendered size.
`top` is a percentage of the box's HEIGHT, hence /1035 rather than /825. */
.data-report-hero__visual-img {
position: absolute;
top: -4.9275%; /* -51 / 1035 */
left: -3.6364%; /* -30 / 825 */
width: 140.3636%; /* 1158 / 825 */
max-width: none;
height: auto;
display: block;
/* The shadow can overhang the next section — never let it eat clicks. */
pointer-events: none;
}
/* Placeholder until the real report-cover asset is on the Webflow CDN.
A soft blue wash in the book's box, so the hero's proportions are
reviewable without the artwork. */
.data-report-hero__visual-placeholder {
position: absolute;
inset: 0;
border-radius: 12px; /* Figma rounded-box; no --radius token is 12px */
background:
linear-gradient(160deg,
color-mix(in srgb, var(--info) 28%, var(--card)),
color-mix(in srgb, var(--info) 10%, var(--card)) 55%,
var(--card));
border: 1px dashed color-mix(in srgb, var(--info) 45%, transparent);
}
/* ---- Responsive ------------------------------------------- */
/* Below the gutter's collapse point the two columns stop making sense side by
side — stack them, copy first. Figma has no tablet frame; ≤767 is measured
against the mobile frame (see ../DataReportPage.mobile.figma.md). */
@media (max-width: 991px) {
/* Top 80px. The top padding only ever steps DOWN as the screen narrows
(144 → 80 → 64) — a narrower screen never gets more of it than a wider
one. Bottom 80px: room for the book's shadow (~19% of its width ≈ 78px). */
.data-report-hero {
padding: 5rem 0; /* 80px */
}
/* Once stacked, the wrapper IS the content edge, so it has to carry
`.container`'s padding verbatim (60px here, 2rem below) — otherwise the
hero's copy sits 44px left of every section under it. */
.data-report-hero__wrap {
padding: 0 60px;
}
.data-report-hero__grid {
grid-template-columns: 1fr;
row-gap: 3rem; /* 48px */
}
.data-report-hero__copy {
grid-column: 1;
}
/* Stacked: the book centres horizontally and is FLUID — it fills the
column when the column is narrower than the book's design size, and
stops at that size (412.5px, as on desktop) when there is more room.
So phones get the biggest book the screen allows, and tablets do not get
a giant one. The desktop 79% shadow cap is dropped: the frame itself lets
the shadow's faint edge run off the viewport at phone widths, and
`overflow-x: clip` keeps that from producing a scrollbar. */
.data-report-hero__visual {
grid-column: 1;
align-self: start;
justify-self: center;
width: 100%;
max-width: 412.5px;
}
.data-report-hero__title,
.data-report-hero__body {
max-width: none;
}
/* Drop the desktop line breaks once stacked — they were composed for a
504px column and read as ragged short lines at any other width. */
.data-report-hero__title {
white-space: normal;
}
}
/* Mobile is MEASURED against Figma CRrdcRif8N6jgEWK28BDb5 node 6850:8739
(402 x 6336) — see ../DataReportPage.mobile.figma.md. */
@media (max-width: 767px) {
/* Top 64px — deliberately LESS than the frame's 96 (owner's call,
2026-09-29). Figma's 96 would put more space above the eyebrow on a phone
than the 80 the tablet layout uses, and the top padding must only step
down as the screen narrows: 144 → 80 → 64.
Bottom 58px: Figma's book ends at y=1069 and the quote panel starts at
1127 (its white gutter is horizontal-only at this width). Figma gets
there as 26px inside the Img container + 32px section padding. */
.data-report-hero {
padding: 4rem 0 3.625rem; /* 64px / 58px */
}
.data-report-hero__wrap {
padding: 0 2rem; /* 32px — Figma's TEXT inset (Heading 6850:13065 x=32) */
}
/* Body → book 50px. Figma: intro ends at y=572, the Img container starts
at 604 and the book 18px inside it at 622 — one gap here, not a row gap
plus a margin. */
.data-report-hero__grid {
row-gap: 3.125rem; /* 50px */
}
/* No headline override here: it inherits the ≤991 block's full width and
natural wrap. Deliberately so — this block used to restore a 322px cap +
`pre-line` to hit Figma's exact six mobile lines at 402px, but that left
the heading stuck at 322px on every wider phone/small tablet (~500–767px),
with half the column empty. Full width won (owner's call, 2026-09-29); at
402px the wrap differs from the frame in where the lines break. */
/* Figma's intro (6850:13079) is 338 x 112 — four 28px lines of 18px type. */
.data-report-hero__body {
font-size: var(--font-size-lg);
line-height: var(--line-height-lg);
}
/* The book needs no rule here: the ≤991 one (fluid, centred, max
412.5px) already gives it the full 338px column at 402. Figma draws it at
298 x 375 pinned to x=27; filling the column instead was the owner's
call, 2026-09-29 — use the space on phones rather than hold a fixed
share of it. */
}