/* ============================================================ 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; } } /* ============================================================ 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 `--background-white` (src/styles/tokens.css). */ background: var(--background-white); } /* 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; } /* ≥1200 the pill is absolute in the block's corner and the copy is centred on the spread, so as the spread shrinks the copy climbs into the pill — 5px apart at 1200 (owner, 2026-10-22). In the block that carries the pill the copy is centred by two equal spacers instead, and the top one never drops below 64px: the same 26px pill + 38px clearance the block reserves below 1200. Where there is room (≈1340 up, 1512 included) the spacers are equal and the copy sits exactly where it did; below that it stops 38px under the pill, and the row grows by what it needs (the spread is `cover`). The spacers' -36px margins cancel the column's `gap` around them. */ @media (min-width: 1200px) { .data-report-findings__block:has(> .data-report-findings__badge) .data-report-findings__text { align-self: stretch; } .data-report-findings__block:has(> .data-report-findings__badge) .data-report-findings__text::before, .data-report-findings__block:has(> .data-report-findings__badge) .data-report-findings__text::after { content: ''; flex: 1 1 0; } .data-report-findings__block:has(> .data-report-findings__badge) .data-report-findings__text::before { min-height: 4rem; /* 64px — 26px pill + 38px */ margin-bottom: -2.25rem; } .data-report-findings__block:has(> .data-report-findings__badge) .data-report-findings__text::after { margin-top: -2.25rem; } } /* 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 is the `.hp-badge--cream` variant (src/styles/section.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 `.serif-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 `.hp-section--stepped` (src/styles/section.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 `--background-white` (src/styles/tokens.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; } }