/* ========================================================================== blocks/story-timeline/style.css — acf/story-timeline, the /our-stories/ "From Humble Beginnings" section (live section#from-humble-beginnings). Spec: docs/R4-PLAN.md §1.4, docs/scout/r4/R4-ADDENDUM.md C1/C7, measurements docs/scout/r4/STORIES.md §4 (+ docs/scout/r4/stories.json → viewports..story). Mobile-first: base = ≤478 (cards 25rem min, phone backgrounds), ≥479 (23rem, desktop backgrounds, the feature h4), ≥768 (two 50 % sides per row, the 6rem stagger and connectors). Section heights: 6020.30 / 4125.69 / 4180.42 at 390 / 768 / 1440; the spine 5180.30 / 3667.44 / 3657.33. The section's top padding is 36rem at ≤478 when it follows a hero with hanging tiles (parts/page-hero.css). ========================================================================== */ /* live .brxe-container.width--xl: 1092.8px, capped at the section's content box. */ .block-story-timeline__container { width: var(--width-xl); } /* ---- Intro (live .brxe-block.center--all): h2 + the text, --content-gap apart (R4-ADDENDUM C7) ------------- */ .block-story-timeline__intro { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--content-gap); width: 100%; text-align: center; } /* h2: the heading defaults (Nimbus 700 --h2, --tertiary). Text: Inter 16 / 27.25, --tertiary (body), live .width--m. */ .block-story-timeline__text { width: var(--width-m); max-width: 100%; } .block-story-timeline__text > * + * { margin-top: var(--paragraph-spacing); } /* ---- Timeline (live .brxe-block.gap--xs): the lead pill, centred, --space-xs above the spine ----------------- */ .block-story-timeline__timeline { display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--space-xs); width: 100%; } .block-story-timeline__timeline > .block-story-timeline__pill { align-self: center; } /* live .self--center */ /* Spine (live #brxe-djpldw): the centre bar is its background, live's out-of-order stops kept (an 8px bar from 50% − 2px to 50% + 6px, DI-R4-06; token --wfx-timeline-spine). It runs to --space-xxl below the last row; the cards (z 2, opaque photos) cover it. */ .block-story-timeline__spine { display: flex; flex-direction: column; align-items: center; row-gap: var(--content-gap); width: 100%; padding-bottom: var(--space-xxl); background-image: var(--wfx-timeline-spine); } /* Pill (live span.wlp-label-text): Inter 700 16 / 27.25, white on --primary, 47.25 tall. */ .block-story-timeline__pill { padding: 1rem 3rem; border-radius: var(--radius-s); background-color: var(--primary); color: var(--white); font-weight: 700; text-align: center; } .block-story-timeline__pill--capitalize { text-transform: capitalize; } /* live #brxe-tlbfji; DOM text unchanged */ /* ---- Rows (live .flex--row): ≤767 the two sides stack (left above right), ≥768 side by side ---------------- */ .block-story-timeline__row { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: var(--content-gap); column-gap: 0; width: 100%; } .block-story-timeline__row--space-before { margin-top: var(--space-xl); } /* live #brxe-civrps.margin-top--xl */ /* Side (live .wlp-hostory-box--left / --right): holds the card and, from 768px, the connector (::after). */ .block-story-timeline__side { display: flex; flex: 0 0 100%; flex-direction: column; align-items: flex-start; min-width: 0; } .block-story-timeline__side--empty { display: none; } /* a lone left / right story: nothing to stack below 768 */ /* ---- Card (live .wlp-history-textbox) -------------------------------------------------------------------- Content-driven above its min height: 40 + h3 + 10 + subtitle + 10 + text + 10 + button 40 + 40 (251.58 for "Tahlia Micallef" at 1440); shorter stacks sit centred at the min height. Backgrounds are CSS custom properties (render.php): --card-bg-m (≤478, the phone image) falls back to --card-bg; position top left (Bricks default) or centre. No transform at rest: the reveal owns it. */ .block-story-timeline__card { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 1rem; width: 100%; min-height: 25rem; /* live ≤478 */ padding: 4rem 2rem; overflow: hidden; border-radius: var(--radius-xl); background-image: var(--card-bg-m, var(--card-bg, none)); background-size: cover; background-position: 0 0; color: var(--white); text-align: center; } .block-story-timeline__card--center { background-position: 50% 50%; } /* The two colour photos (live #brxe-qzappi / #brxe-uzfclb): a flat .84 navy wash, the content above it (live :where(#id > *){position:relative}). */ .block-story-timeline__card--overlay::before { content: ""; position: absolute; inset: 0; background: var(--wfx-story-overlay); pointer-events: none; } .block-story-timeline__card--overlay > * { position: relative; } /* h3: Nimbus 700 at --h2 (live per-id font-size), heading line height (30.21 / 35.10 / 42.85), white. */ .block-story-timeline__card-title { color: inherit; font-size: var(--h2); } /* "3rd": base.css carries live's sub / sup normalize (integration 2026-09-29), so the superscript does not grow the line box (+10.41px on that card at 768 without it). */ /* Subtitle: a bold

kicker (Inter 700 --text-l: Tahlia, Jason) or the feature card's

(Nimbus 700 --text-l); each keeps its element's line height (32.57 / 25.24 at 1440). */ .block-story-timeline__card-kicker, .block-story-timeline__card-subtitle { color: inherit; font-size: var(--text-l); font-weight: 700; } .block-story-timeline__card-sub--hide-mobile { display: none; } /* live: the feature h4 is display:none ≤478 */ /* Text: Inter 400 15px / 26.17 (live .wlp-history-textbox__text). */ .block-story-timeline__card-text { width: 100%; font-size: 1.5rem; /* live literal */ } /* Buttons v2 lock (R4-ADDENDUM C1): live's "Click & view" is 140 × 40 at every width (sm is 32; --btn-min-width is the 14rem token default). A content-driven card keeps live's height (251.58 / 278.03 … at 1440). */ .block-story-timeline__button { --btn-h: 4rem; } /* Feature card (live #brxe-nyjqzh): full width, --space-l above and --space-xxl below; min height unset ≤478 (content 252.75 at 390), 36rem from 479. */ .block-story-timeline__card--feature { min-height: auto; margin-top: var(--space-l); margin-bottom: var(--space-xxl); } .block-story-timeline__card--feature .block-story-timeline__card-text { max-width: 36rem; } /* live #brxe-glczhi */ @media (min-width: 479px) { .block-story-timeline__card { min-height: 23rem; /* live .wlp-history-textbox */ background-image: var(--card-bg, var(--card-bg-m, none)); } .block-story-timeline__card--feature { min-height: 36rem; } .block-story-timeline__card-sub--hide-mobile { display: block; } } /* ≥768: two 50 % sides, the right one 6rem lower (the stagger), each 6rem clear of the centre line, with a 6rem × 6px connector from the card to the line (live per-id ::after on rows 2–8; content unset ≤767). */ @media (min-width: 768px) { .block-story-timeline__row { flex-wrap: nowrap; } /* Two 100 % sides shrunk to half each (live .brxe-block width:100%): Chrome snaps the halves to 546.41 + 546.39 at 1440 as live does; a 50 % basis gives 546.39 + 546.39 and every centred card text line 0.02px off (glyph AA). */ .block-story-timeline__side { position: relative; flex: 0 1 100%; } .block-story-timeline__side--left { padding-right: 6rem; } .block-story-timeline__side--right { margin-top: 6rem; padding-left: 6rem; } .block-story-timeline__side--empty { display: flex; } .block-story-timeline__side::after { content: ""; position: absolute; z-index: 1; width: 6rem; height: 6px; /* live literal */ background-color: var(--secondary-dark); } .block-story-timeline__side--left::after { top: 30%; right: 0; } .block-story-timeline__side--right::after { bottom: 30%; left: 0; } .block-story-timeline__side:is(.block-story-timeline__side--no-connector, .block-story-timeline__side--empty)::after { content: none; } }