.ebiom-content-page { width: 100%; /* This class lands on , so `overflow: clip` clipped the whole document and killed vertical scrolling on Contact and Insights. Only the horizontal axis needs containing. */ overflow-x: clip; background: var(--color-cream); color: var(--color-ink); font-family: "Geist Local", Geist, Arial, sans-serif; } .ebiom-content-page h1, .ebiom-content-page h2 { font-family: "Exposure Local", Exposure, "Times New Roman", serif; font-weight: 400; /* * Figma sets letter-spacing 0 on these headings, not -.035em. Client pin * 05aca2fc, "some headlines look too tight". Measured against the frames: * the Insights H1 is node 56:1273 at 95.3px with tracking 0, and the "Want * more insights" heading is node 56:1493 at 60px with tracking 0, where we * were pulling 2.5 to 3.5px out of every line. */ letter-spacing: 0; } .ebiom-content-page h2 em { font-family: "Exposure Local", Exposure, "Times New Roman", serif; font-style: italic; } .content-hero, .single-insight-hero { position: relative; min-height: 852px; display: grid; place-items: center; overflow: hidden; background: var(--color-forest); color: var(--color-cream); text-align: center; } .content-hero > img, .single-insight-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } .content-hero-tint { position: absolute; inset: 0; background: rgba(8, 12, 10, .14); } .content-hero-copy, .single-insight-hero-copy { position: relative; z-index: 2; width: min(920px, calc(100% - 108px)); } .content-kicker { margin: 0 0 31px; font-size: 18px; } .content-hero h1 { margin: 0 auto; font-size: clamp(72px, 7vw, 101px); /* Frame node 56:1273 is 95.3px over 108.6, a 1.14 ratio. We were at .98, which is what "too tight" looks like on a two line hero. */ line-height: 1.14; text-wrap: balance; } /* The insights hero title carries a manual two-line break (see page-insights.php); the shared 920px content-hero-copy width is too narrow to keep "Raising awareness on" on a single line at the shared clamp size, so this hero alone gets a wider column. */ .insights-hero .content-hero-copy { width: min(1180px, calc(100% - 72px)); } .content-hero-copy > p:last-child { width: min(650px, 100%); margin: 46px auto 0; font-size: 18px; line-height: 1.3; } .contact-hero { min-height: 850px; } .contact-hero > img { object-position: center 49%; } .contact-hero h1 { font-size: clamp(82px, 7.5vw, 108px); } .contact-section { width: min(1244px, calc(100% - 108px)); display: grid; grid-template-columns: 405px minmax(0, 1fr); gap: 75px; margin: 0 auto; padding: 124px 0 84px; } .contact-section h2 { margin: 0 0 52px; font-size: 62px; line-height: 1; } .contact-details address { display: grid; gap: 31px; margin: 0; font-style: normal; } .contact-detail { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 18px; align-items: start; } .contact-detail-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--color-yellow); line-height: 1; } .contact-detail-icon img { width: 24px; height: 24px; display: block; } .contact-detail p { margin: 0; color: #4a4d4a; font-size: 16px; line-height: 1.48; } .contact-detail strong, .contact-detail a { display: block; } .contact-detail strong { margin-bottom: 4px; color: var(--color-ink); font-weight: 650; } .contact-socials { margin-top: 48px; } .contact-socials > strong { font-size: 18px; font-weight: var(--weight-emphasis); } .contact-socials .social-links { margin-top: 15px; } /* * The pending Instagram mark renders as a span, not an anchor, until * global.instagram_url is filled in. Sizing only the anchor left it at its * intrinsic 26px between two 32px siblings, which read as a broken icon on the * Contact page. Both selectors carry the size so the row stays even whether or * not the account exists yet. */ .contact-socials .social-links a, .contact-socials .social-links .social-link-pending { width: 32px; height: 32px; } .contact-socials .social-links .social-link-pending img, .contact-socials .social-links a img { width: 100%; height: 100%; } .contact-form { display: grid; gap: 24px; } .contact-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .contact-form label:not(.contact-consent) { display: grid; gap: 11px; font-size: 18px; line-height: 1.2; } .contact-form input, .contact-form textarea { width: 100%; border: 1px solid #d4d4d1; border-radius: 4px; background: #fff; color: var(--color-ink); } .contact-form input { height: 50px; padding: 0 16px; } .contact-form textarea { min-height: 166px; resize: vertical; padding: 15px 16px; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: #8f969d; } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--color-forest); outline: 3px solid rgba(170, 187, 255, .55); outline-offset: 1px; } .contact-consent { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; line-height: 1.4; } .contact-consent input { flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0; } .contact-submit { width: 100%; min-height: 61px; border: 0; border-radius: 999px; background: var(--color-yellow); color: var(--color-ink); font-size: 18px; font-weight: var(--weight-emphasis); } .contact-submit:disabled { cursor: not-allowed; opacity: .74; } .contact-preview-note { margin: -12px 0 0; color: #5f635f; font-size: 12px; } .contact-map { position: relative; width: min(1244px, calc(100% - 108px)); height: 390px; margin: 0 auto 94px; overflow: hidden; border-radius: 5px; background: #e5e5e4; } .contact-map iframe { width: 100%; height: 100%; border: 0; filter: saturate(.7) contrast(.94); } .contact-map > a { position: absolute; right: 18px; bottom: 18px; min-height: 42px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; background: var(--color-forest); color: var(--color-cream); font-size: 13px; font-weight: 600; } .insights-hero > img { object-position: center 62%; } .insights-feature { width: min(1296px, calc(100% - 108px)); display: grid; grid-template-columns: 455px minmax(0, 1fr); align-items: center; gap: 76px; margin: 0 auto; padding: 105px 0; } .insights-feature-intro h2 { max-width: 360px; margin: 0 0 32px; font-size: 72px; line-height: .93; } .insights-feature-intro h2 span, .insights-feature-intro h2 em { display: block; } .insights-feature-intro p { max-width: 330px; margin: 0 0 32px; font-size: 17px; line-height: 1.4; } .insights-feature-intro .button { width: 268px; } .insights-feature-card { width: min(100%, 660px); justify-self: center; } .insights-feature-media, .archive-insight-media, .related-insight-card a > span:first-child { display: block; overflow: hidden; border-radius: 5px; background: var(--color-forest); } .insights-feature-image { width: 100%; height: 430px; object-fit: cover; } .insights-feature-card .tag { margin-top: 20px; } .insights-feature-card h3 { margin: 17px 0 11px; font-family: "Geist Local", Geist, Inter, Arial, sans-serif; font-size: 31px; font-weight: 600; line-height: 1.1; } .insights-feature-card p { max-width: 590px; margin: 0; font-size: 15px; line-height: 1.42; } /* * The two feature bands are one repeated module: copy column left, card right, * ground colour the only difference. This used to mirror the case study band, * which read as two unrelated sections stacked rather than as a pair. */ .insights-feature-article { width: 100%; grid-template-columns: 455px minmax(0, 1fr); gap: 76px; padding: 105px max(54px, calc((100vw - 1296px) / 2)); background: var(--color-blue); } .insights-archive { width: min(1296px, calc(100% - 108px)); margin: 0 auto; padding: 126px 0 144px; } .insights-archive > h2 { width: min(820px, 100%); margin: 0 auto 56px; font-size: 70px; line-height: .98; text-align: center; text-wrap: balance; } .insights-filters { display: flex; align-items: center; justify-content: center; gap: 15px; margin-bottom: 68px; } .insight-type-filters { display: inline-flex; gap: 8px; } .insight-type-filters a { min-height: 31px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; padding: 0 16px; background: var(--color-blue-light); color: var(--color-ink); font-size: 12px; cursor: pointer; } .insight-type-filters a.is-active { background: var(--color-forest); color: var(--color-cream); } .insights-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 73px 18px; } .archive-insight-image { width: 100%; aspect-ratio: 1.82; object-fit: cover; transition: transform 380ms cubic-bezier(.16, 1, .3, 1); } /* * The card's anchor wraps the image, the tag, the title and the excerpt, but it * was left as an inline box. An inline anchor's hit area is the union of its * text fragments, so it broke into five rectangles with two dead bands on a * 564px card: 62px between the image and the tag, and 76px at the bottom. A * click in either did nothing while the title worked, which reads as a broken * card rather than as a missed target. Block gives it one contiguous box. */ .archive-insight-card > a { display: block; height: 100%; } .archive-insight-card a:hover .archive-insight-image, .archive-insight-card a:focus-visible .archive-insight-image { transform: scale(1.025); } .archive-insight-card .tag { margin-top: 15px; } .archive-insight-card h3 { margin: 17px 0 13px; font-family: "Exposure Local", Exposure, "Times New Roman", serif; font-size: 30px; font-weight: 400; line-height: 1.03; } .archive-insight-card p { display: -webkit-box; margin: 0; overflow: hidden; font-size: 14px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .insights-empty { min-height: 250px; display: grid; place-items: center; font-family: "Exposure Local", Exposure, "Times New Roman", serif; font-size: 34px; text-align: center; } .archive-cta { min-height: 400px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; padding: 72px max(54px, calc((100vw - 1296px) / 2)); background: var(--color-forest); color: var(--color-cream); } .archive-cta h2 { max-width: 450px; margin: 0; /* Frame node 56:1493 is 60px over 62.4, a 1.04 ratio. We drew it at 72 over 68.4, which is both bigger and tighter than the comp: the exact heading the client pinned as too tight. */ font-size: 60px; line-height: 1.04; } .archive-cta p { max-width: 560px; margin: 0 0 42px; font-size: 17px; line-height: 1.45; } .archive-cta .button { min-width: 230px; } .content-project-cta { min-height: 590px; } .content-project-cta > img { object-position: center 58%; } /* * Single article and case study body, measured off Figma frame "Articles/Cases" * 56:1088 (1440 wide). Block geometry and type sizes below are the frame's own * numbers, not approximations: Intro Title is 60px Exposure on 62.4 line, the * split bodies are Geist 22 on 28.6 and Geist 20 on 28, the centred stack body * is Geist 24 on 33.6, and the photo band body is Geist 22 on 28.6. */ .single-insight-hero { min-height: 913px; } .single-insight-hero > img { object-position: center 60%; } .single-insight-hero-copy { width: min(1110px, calc(100% - 108px)); } .single-insight-hero-copy > p { margin: 0 0 36px; font-size: 20px; line-height: 1.3; } .single-insight-hero h1 { margin: 0; font-size: clamp(56px, 6.62vw, 95px); line-height: 1.14; text-wrap: balance; } /* variation-1-split-screen, media left, cream ground. Frame 56:1127. */ .article-split { width: min(1306px, calc(100% - 134px)); display: grid; grid-template-columns: minmax(0, 602fr) minmax(0, 654fr); align-items: center; gap: 50px; margin: 0 auto; padding: 138px 0; } .article-split-media { height: 724px; overflow: hidden; border-radius: 7px; } .article-section-image { width: 100%; height: 100%; object-fit: cover; } .article-split-copy { padding: 0; } .article-split h2, .article-centered h2, .article-practice h2 { margin: 0 0 24px; font-size: 60px; line-height: 1.04; text-wrap: balance; } .article-split-copy p, .article-centered p, .article-practice-copy p, .article-split-copy li, .article-centered li, .article-practice-copy li { margin: 0 0 22px; font-size: 22px; line-height: 1.3; } .article-split-copy > :last-child, .article-centered > :last-child, .article-practice-copy > :last-child { margin-bottom: 0; } /* variation-1-split-screen, media right, periwinkle ground. Frame 56:1135. */ .article-split-media-right { width: 100%; max-width: none; grid-template-columns: minmax(0, 580fr) minmax(0, 630fr); gap: 75px; padding: 129px max(24px, calc((100vw - 1285px) / 2 - 28.5px)) 129px max(32px, calc((100vw - 1285px) / 2 + 28.5px)); background: var(--color-blue); } .article-split-media-right .article-split-media { height: 742px; border-radius: 10px; } .article-split-media-right .article-split-copy p, .article-split-media-right .article-split-copy li { font-size: 20px; line-height: 1.4; } /* variation-2-centered-stack. Frame 56:1145. */ .article-centered-stack { padding: 120px 0; } .article-centered { width: min(934px, calc(100% - 240px)); margin: 0 auto; padding: 0; text-align: center; } .article-centered h2 { margin: 0 auto 32px; font-size: 60px; } .article-centered p, .article-centered li { font-size: 24px; line-height: 1.4; } .article-wide-media { width: min(1370px, calc(100% - 70px)); height: 695px; margin: 80px auto 0; overflow: hidden; border-radius: 5px; } /* Section - Innovation / R&D used inside the article body. Frame 56:1152. */ .article-practice { position: relative; min-height: 646px; display: grid; grid-template-columns: minmax(0, 640fr) minmax(0, 638fr); align-items: center; gap: 38px; overflow: hidden; padding: 100px max(54px, calc((100vw - 1332px) / 2)); background: var(--color-forest); color: var(--color-cream); } .article-practice-visual { position: absolute; inset: 0; } /* * The frame declares a 20% forest fill under this photograph, which is what * this rule matched. Measured on rendered glyphs rather than declared colour, * that scrim leaves the cream heading and body copy at 2.6 to 3.4:1 against * the brightest water in the image on every article that uses this band, in * both languages, which fails WCAG AA (4.5:1 body, 3:1 large text) and fails * even the large text floor on some records. * * Deliberate divergence from the frame's own declared value, the same way the * Geist weight point was: raised to 45%, which measures 4.8 to 4.9:1 across * the sampled articles, comfortably over the 4.5:1 floor with margin for a * brighter photograph, while staying visibly the frame's cyan rather than * flattening it to forest. */ .article-practice-visual::after { content: ""; position: absolute; inset: 0; background: rgba(30, 56, 50, .45); } .article-practice-visual img { width: 100%; height: 100%; object-fit: cover; } .article-practice-heading, .article-practice-copy { position: relative; z-index: 2; } .article-practice h2 { margin: 0; } .article-rich-content { width: min(900px, calc(100% - 108px)); max-width: none; margin: 0 auto; padding: 35px 0 125px; } .article-rich-content > :first-child { margin-top: 0; } .article-rich-content img { width: 100%; height: auto; border-radius: 5px; } /* Expertise Section. Frame 56:1173. */ .related-insights { width: min(1334px, calc(100% - 106px)); margin: 0 auto; padding: 100px 0; } /* * The heading and its button share one row only while both fit at their own * width. The French label "Voir toutes les perspectives" needs 270px and the * row used to squeeze the pill down to 220px, so the text spilled out of it * with the arrow drawn on top. Wrapping puts the pill on its own line instead, * which is what the same block already does on a phone, and it re-tunes itself * for whatever label the client types in either language. */ .related-insights-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 68px; } .related-insights-heading h2 { width: min(660px, 100%); margin: 0; font-size: 80px; line-height: 1.04; } .related-insights-heading .button { min-width: 220px; flex-shrink: 0; } .related-insights-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .related-insight-card a > span:first-child { height: 355px; border-radius: 5px; } .related-insight-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 380ms cubic-bezier(.16, 1, .3, 1); } .related-insight-card a:hover img, .related-insight-card a:focus-visible img { transform: scale(1.025); } .related-insight-card h3 { margin: 21px 13px 0; font-size: 22px; font-weight: var(--weight-emphasis); line-height: 1.4545; } /* * One tag colour on the site. This pill used to be #a9baff at 50% alpha, which * only happens to land near the real tag colour because it sits on cream: on * any other ground it would be a different blue. It is the shared #d4daf9 now, * the same blue as the homepage tags, stated rather than approximated. * Horizontal padding is left to the site wide --tag-pill-padding token. */ .related-insight-card .tag { min-height: 31px; margin: 20px 13px 0; background: var(--color-blue-light); font-size: 14px; line-height: 1.12; } /* Section - Innovation / R&D used as the closing call to action. Frame 56:1205. */ .single-insight-page .content-project-cta { min-height: 583px; } .single-insight-page .content-project-cta h2 { font-size: 80px; line-height: 1.2; } @media (max-width: 980px) { .content-hero, .single-insight-hero { min-height: 760px; } /* * minmax(0, 1fr) rather than 1fr: a bare 1fr floors at the track's * min-content width, so one long French compound ("L'impermeabilisation") * pushed .article-split-copy to 399px inside a 354px container and * main { overflow-x: clip } silently cut every line of the article. */ .contact-section, .insights-feature, .article-split { width: calc(100% - 48px); grid-template-columns: minmax(0, 1fr); } /* Same reason as the hero h1 below 620: let the long word break instead of * setting the track width. */ .article-split h2, .article-split h3 { overflow-wrap: anywhere; word-break: break-word; hyphens: auto; } .contact-section { gap: 80px; } .insights-feature { gap: 50px; } .insights-feature-article { width: 100%; padding-inline: 24px; } /* * No source order override is needed any more. Both bands now put the copy * column first in the markup, so the stacked order is copy then card without * a flex/grid reorder that a screen reader would not follow. */ .insights-feature-intro h2, .insights-feature-intro p { max-width: 600px; } .insights-card-grid, .related-insights-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .archive-cta { grid-template-columns: 1fr; gap: 42px; padding-inline: 24px; } .article-split-media { height: 620px; } .article-split-media-right { width: 100%; grid-template-columns: 1fr; padding-inline: 24px; } .article-split-media-right .article-split-copy { order: 2; } .article-split-media-right .article-split-media { height: 620px; } .article-centered { width: calc(100% - 48px); } .article-wide-media { width: calc(100% - 48px); height: 520px; } .article-practice { grid-template-columns: 1fr; gap: 34px; padding-inline: 24px; } .related-insights { width: calc(100% - 48px); } } @media (max-width: 620px) { .content-hero, .single-insight-hero { min-height: 700px; } .content-hero-copy, .single-insight-hero-copy { width: calc(100% - 36px); } .content-hero h1, .contact-hero h1, .single-insight-hero h1 { font-size: 54px; } /* * French article titles carry words the 54px hero column cannot hold on a * phone: "environnemental" measures 405px against a 369px column at 390, so * it ran off the right edge. Hyphenation breaks it at a real syllable in the * language the page declares, and break-word is only the safety net for a * browser that has no dictionary for that language. */ .single-insight-hero h1 { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } .content-hero-copy > p:last-child { margin-top: 30px; font-size: 15px; } .contact-hero > img { object-position: 58% center; } .contact-section { width: calc(100% - 36px); gap: 68px; padding: 76px 0 64px; } .contact-section h2 { margin-bottom: 38px; font-size: 49px; } .contact-form-row { grid-template-columns: 1fr; } .contact-map { width: calc(100% - 36px); height: 440px; margin-bottom: 72px; } .insights-feature { width: calc(100% - 36px); padding: 72px 0; } .insights-feature-article { width: 100%; padding-inline: 18px; } .insights-feature-intro h2, .insights-archive > h2, .archive-cta h2, .related-insights-heading h2 { font-size: 50px; } .insights-feature-image { height: 330px; } .insights-archive { width: calc(100% - 36px); padding: 85px 0 100px; } .insights-filters { align-items: stretch; flex-direction: column; } .insight-type-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .insights-card-grid, .related-insights-grid { grid-template-columns: 1fr; } .archive-cta { min-height: 500px; padding: 70px 18px; } .single-insight-hero-copy > p { font-size: 14px; } .article-split { width: calc(100% - 36px); gap: 42px; padding: 78px 0; } .article-split-media, .article-split-media-right .article-split-media { height: 470px; } .article-split-copy { padding: 0; } .article-split h2, .article-centered h2, .article-practice h2 { font-size: 44px; } .article-split-copy p, .article-centered p, .article-practice-copy p, .article-split-media-right .article-split-copy p, .article-split-copy li, .article-centered li, .article-practice-copy li { font-size: 18px; } .article-centered-stack { padding: 78px 0; } .article-centered { width: calc(100% - 36px); padding: 0; text-align: left; } .article-centered h2 { margin-inline: 0; } .article-wide-media { width: calc(100% - 36px); height: 430px; margin-top: 48px; } .article-practice { min-height: 0; padding: 84px 18px; } .article-split-media-right { width: 100%; padding: 78px 18px; } .article-rich-content { width: calc(100% - 36px); padding-bottom: 90px; } .related-insights { width: calc(100% - 36px); padding: 78px 0 90px; } .related-insights-heading { align-items: flex-start; flex-direction: column; } .related-insight-card a > span:first-child { height: 330px; } } @media (prefers-reduced-motion: reduce) { .archive-insight-image, .related-insight-card img { transition: none; } } /* * The photo band and the periwinkle split are full bleed, so they must not * inherit the centred article-split gutter when they follow one another. */ .article-block + .article-block { margin-top: 0; } .article-practice + .article-split, .article-split-media-right + .article-split { padding-top: 138px; } /* * A section with no photograph of its own. * * The client's rule, left as review notes 13, 15 and 16 on 13 September: where a * case study has no picture for a section, do not reach for a stock photograph. * A split block becomes centred text, and the full bleed band drops its plate * for the periwinkle used elsewhere on the site. The band's copy is cream * against the forest photograph, so on periwinkle it has to invert to forest or * it would read at roughly 1.3:1. */ .article-block.article-practice--plain { min-height: 0; padding-top: 86px; padding-bottom: 86px; background: var(--color-blue); color: var(--color-forest); } .article-practice--plain h2, .article-practice--plain .article-practice-copy p, .article-practice--plain .article-practice-copy li, .article-practice--plain .article-practice-heading { color: var(--color-forest); } /* * A text only block keeps the block rhythm of every other section. It briefly * had padding-bottom: 0 here on the assumption that the stack's bottom padding * only existed to separate the copy from its photograph, which is wrong: it is * the gap between one section and the next, so zeroing it ran the first * section's copy straight into the block below with no margin at all. */