/* ============================================================
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);
}
/* ============================================================
DataReportFindingsSection — Figma 6JdV8D0ZGECx2whzGAnTrs, node 6797:2286.
Spec: DataReportFindingsSection.figma.md.
SPACING MODEL — everything is a gap or a grid track; nothing inside a
block carries padding or margins. If a distance looks wrong, it is one of:
section `.hp-section` padding (top/bottom of the whole section)
__inner `gap` — spread → spread (Figma's 64 + its 8px Img inset
above and below each spread)
__block its grid TRACKS — every horizontal distance, named below
`row-gap` — text → spread, once stacked
__text `gap` — heading → body
badge pinned to the block's corner; below 1200 the block's
`padding-top` reserves its row so the copy clears it
============================================================ */
.data-report-findings {
/* White ground — NOT `var(--background)`; this page inverts the site's
scheme. See ../data-report.css. */
background: var(--dr-ground);
}
/* A 1384px track — `.container-wide`'s content width exactly. */
.data-report-findings__inner {
display: flex;
flex-direction: column;
/* 80px: Figma's blocks are 800 tall, 64 apart, with each 784px spread
inset 8px top and bottom — so spread to spread is 64 + 8 + 8. Blocks
here are content-height (no 8px insets), so the gap carries all 80. */
gap: 5rem; /* 80px */
}
/* ---- One finding block (6797:2303 / 6797:2289) ------------ */
/* Five tracks, gutters included, so the whole row reads left to right:
outer 64 container edge → copy
text 365.33fr
gap 48 copy → spread
media 890.67fr
edge 16 spread → container edge
64 + 365.33 + 48 + 890.67 + 16 = 1384 — Figma's geometry at 1512 to the
pixel (its text area is 1384/3 = 461.33 wide with 64/32 padding, its Img
area 922.67 with 16px padding round an 891px panel). The fr weights are
those two widths, so the split holds its design proportions as the
container narrows instead of being re-derived from paddings.
The mirrored block swaps the AREAS, not individual paddings: the same five
distances, read right to left.
HEIGHT is content, not a fixed 800: the block is as tall as the taller of
the copy and the spread (see `__img`), with the copy centred beside it.
A fixed 800 left ~270px of dead white at 1280, where the spread is only
~530 tall. */
.data-report-findings__block {
--dr-outer: 4rem; /* 64px — container edge → copy */
--dr-edge: 1rem; /* 16px — spread → container edge */
--dr-text-fr: 365.33fr;
--dr-media-fr: 890.67fr;
position: relative; /* anchors the badge */
display: grid;
grid-template-columns: var(--dr-outer)
minmax(0, var(--dr-text-fr))
3rem /* 48px */
minmax(0, var(--dr-media-fr))
var(--dr-edge);
grid-template-areas: ". text . media .";
align-items: center;
}
.data-report-findings__block[data-media='left'] {
grid-template-columns: var(--dr-edge)
minmax(0, var(--dr-media-fr))
3rem
minmax(0, var(--dr-text-fr))
var(--dr-outer);
grid-template-areas: ". media . text .";
}
/* Text stays first in the DOM, so reading order is right for screen readers
and both blocks stack text-first — the areas do the mirroring. */
.data-report-findings__text {
grid-area: text;
display: flex;
flex-direction: column;
gap: 2.25rem; /* 36px — heading → body */
min-width: 0;
}
/* Stretched to the row, so the spread can fill the height the copy needs. */
.data-report-findings__visual {
grid-area: media;
align-self: stretch;
min-width: 0;
}
/* ---- Badge (6797:2313) ------------------------------------ */
/* Figma's "Section tag area" (6797:2313): a row pinned to the TOP-LEFT of the
first block, with the pill on the container edge — 64px left of the copy
at 1512, level with the top of the spread. The copy is centred on its own,
so the pill is absolute rather than in its flow. Same tag-area pattern as
`SectionRail`, which is not used here only because the rail works beside a
regular `.container` and this section runs on `.container-wide`. The cream
fill comes from `.dr-section .hp-badge` in ../data-report.css. */
.data-report-findings__badge {
position: absolute;
top: 0;
left: 0;
}
/* ---- Text area (6797:2304) -------------------------------- */
/* 28px/34px — smaller than both the hero (48) and the section headings (36).
Face and weight come from `.dr-display`. */
.data-report-findings__heading {
font-size: 1.75rem; /* 28px */
line-height: 2.125rem; /* 34px */
}
.data-report-findings__body {
display: flex;
flex-direction: column;
/* Figma draws the paragraph break as an empty 28px line rather than a gap,
so the spacing between paragraphs is one full line-height. */
gap: 1.75rem; /* 28px */
font-size: var(--font-size-xl); /* 20px */
line-height: var(--line-height-xl);/* 28px */
color: var(--foreground);
}
.data-report-findings__body p {
margin: 0;
}
.data-report-findings__body strong {
font-weight: var(--font-weight-bold);
}
.data-report-findings__body em {
font-style: italic;
}
/* ---- Visual (6797:2316) ----------------------------------- */
/* The exports are the 891 x 784 panel alone, with transparent corners; the
white frame Figma's "Img area" draws round it is the grid's 48 / 16 tracks,
not padding here. */
/* Figma: Img is `rounded-xl` = 12px. There is no 12px radius token (the scale
runs 8 / 16 / 24), so it is written out. The artwork's own corners are cut
to the same radius, so this clips nothing at 12px — it is what keeps the
corners crisp at other sizes and what to change if the radius ever moves. */
/* Never shorter than the copy beside it. While the row is being sized the
100% height has nothing definite to resolve against, so the image
contributes its natural 891:784 height; the visual is then stretched to the
row and the 100% resolves to it. So the row is max(copy, natural spread),
and when the copy is the taller one the spread grows to match, cropped by
`object-fit: cover` rather than letterboxed. When stacked nothing stretches
it and it simply renders at its ratio. */
.data-report-findings__img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 891 / 784;
object-fit: cover;
border-radius: 0.75rem; /* 12px */
}
/* Dev fallback only, for an instance with no image URL. Figma paints a
rgba(89,183,217,0.1) wash under the spread, so the placeholder uses the
design's own color rather than an invented one. */
.data-report-findings__img--placeholder {
aspect-ratio: 891 / 784;
border-radius: 0.75rem;
background: rgba(89, 183, 217, 0.1);
border: 1px dashed color-mix(in srgb, var(--info) 45%, transparent);
}
/* ---- Responsive ------------------------------------------- */
/* No room for the outer insets: the copy AND the spread start on the
container edge, like every other section — so the two blocks' outer edges
line up. The split drops to 40 / 60: Figma's 2/3 for the spread is too
much once it shrinks, and the text track is the one that pays for it.
Without the 64px outer inset the copy starts on the container edge — the
same x as the pill — and can be as tall as the row, so it would run into
the pill. The block that carries the pill reserves its row instead: 26px
pill + 38px clearance. */
@media (max-width: 1199px) {
.data-report-findings__block {
--dr-outer: 0px;
--dr-edge: 0px;
--dr-text-fr: 2fr;
--dr-media-fr: 3fr;
}
.data-report-findings__block:has(> .data-report-findings__badge) {
padding-top: 4rem; /* 64px */
}
}
/* Stacked, text-first. Three columns: the spread spans all of them, the copy
sits in the middle one — so the copy is inset 16px further than the spread,
the same text-inset / media-out split as the quote and CTA panels. */
@media (max-width: 991px) {
.data-report-findings__block,
.data-report-findings__block[data-media='left'] {
grid-template-columns: 1rem minmax(0, 1fr) 1rem;
grid-template-areas: ". text ."
"media media media";
row-gap: 2rem; /* 32px — text → spread */
}
/* The desktop 80 is Figma's side-by-side geometry; stacked, it is spread →
next heading, and stays the page's 64. */
.data-report-findings__inner {
gap: 4rem; /* 64px */
}
/* Stacked, the pill moves onto the copy's 16px text inset and its row
tightens to the mobile frame's: 26px pill + 16px to the heading
(6850:13855 — pill at x=32 on a 402 frame, heading 16px below it). */
.data-report-findings__block:has(> .data-report-findings__badge) {
padding-top: 3rem; /* 48px */
}
.data-report-findings__badge {
left: 1rem;
}
}
/* Mobile is MEASURED against Figma CRrdcRif8N6jgEWK28BDb5 node 6850:13811
— see ../DataReportPage.mobile.figma.md. */
@media (max-width: 767px) {
/* Figma runs this section almost flush: the badge sits 47px below the
methodology section and the last spread ends 8px above the next one.
`.hp-section`'s 64/64 is the page default, not this frame. Two classes
to outweigh the page rhythm in ../data-report.css. */
.hp-section.data-report-findings {
padding-top: 3rem; /* 48px */
padding-bottom: 0.5rem; /* 8px */
}
.data-report-findings__inner {
gap: 3rem; /* 48px — Figma: spread bottom to the next heading */
}
.data-report-findings__text {
gap: 1.5rem; /* 24px — Figma heading ends y=3169, body starts 3193 */
}
/* 24px over 34px LEADING — the size steps down from the desktop 28px but the
leading does not, which is why the old 24px/30px looked cramped. Figma's
heading (6850:13834) is 338 x 170: the `
` after the marked title gives
one line, and the lead takes four more at 34px. The lead is four lines at
24-27px and five at 28px, and its first line ("Simply asking a qualified
caller") is 314px of ink in the frame against 318px at 24px in the real
Rowan Light. */
.data-report-findings__heading {
line-height: 2.125rem; /* 34px — size stays .data-report-findings__heading's 24px */
font-size: 1.5rem; /* 24px */
}
/* 18px/28px — see ../data-report.css. */
.data-report-findings__body {
font-size: var(--font-size-lg);
line-height: var(--line-height-lg);
gap: var(--line-height-lg); /* the blank line between paragraphs */
}
/* Figma crops both spreads to 370 x 370 SQUARES at this width rather than
letterboxing the desktop landscape.
WATCH: the only exports on the CDN are the desktop 891 x 784 panels, so
this covers them into a square — same content, a little less zoomed than
the design, which crops in tighter on the right-hand page. A proper square
export would close the gap; nothing here needs to change when it lands
except dropping `object-fit`. */
.data-report-findings__img {
aspect-ratio: 1;
object-fit: cover;
}
.data-report-findings__img--placeholder {
aspect-ratio: 1;
}
}