/* News article (the CMS template behind every /news/ page, 14 stories; 15 Oct, full-site pass). The phone top gap (375 px of empty navy above the headline on a 390 px screen) came from the shared hero headline box (.container-hero-headline.home): Webflow's 15em padding-top, sized to clear the old fixed navigation (the redesign shell made it sticky, so nothing sits under it now), plus 6em margins above and below at 479 px and down, inside .section-hero-news's own 8em top padding and -4em pull-up. Here the story starts just under the header. One reading column (about 70 characters a line): the date as a lime kicker, the headline in white Bungee, the story's own picture (the one the news list shows for it, added wordless by news-article.fixes.json into the template's empty box), then the text. Pictures are shown whole and clean (rule 8); each lead picture's shape is reserved before it loads. Words, order and links are untouched; every rule is scoped to this template's page id. */ html[data-wf-page="685a16ca2630e792c86911e0"] { --wl-na-col: min(800px, 100% - 2 * var(--wl-gutter)); } /* ---------- headline band ---------- */ html[data-wf-page="685a16ca2630e792c86911e0"] .section-hero-news { display: block; margin: 0; padding: clamp(26px, 4.4vw, 72px) 0 clamp(24px, 3vw, 40px); background: none; color: #fff; } html[data-wf-page="685a16ca2630e792c86911e0"] .section-hero-news :is(.container-hero, .container-for-hero) { display: block; width: var(--wl-na-col); max-width: none; margin: 0 auto; padding: 0; } html[data-wf-page="685a16ca2630e792c86911e0"] .section-hero-news .container-for-hero { width: 100%; } html[data-wf-page="685a16ca2630e792c86911e0"] .section-hero-news .container-hero-headline.home { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; margin: 0; padding: 0; border-radius: 0; font-size: 16px; text-align: left; } html[data-wf-page="685a16ca2630e792c86911e0"] .section-hero-news .text-hero-pretitle { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 0; color: var(--wl-lime); font-family: Poppins, sans-serif; font-size: clamp(12px, 11.4px + .2vw, 14px); font-weight: 600; line-height: 1.35; letter-spacing: .16em; text-align: left; text-transform: uppercase; } html[data-wf-page="685a16ca2630e792c86911e0"] .section-hero-news .text-hero-pretitle::before { content: ""; flex: none; width: 28px; height: 3px; border-radius: 2px; background: var(--wl-lime); } html[data-wf-page="685a16ca2630e792c86911e0"] .section-hero-news .spacer-0-5em { display: none; } html[data-wf-page="685a16ca2630e792c86911e0"] .section-hero-news h1.h-page-hero { margin: 0; color: #fff; font-family: Bungee, sans-serif; font-size: clamp(1.7rem, 1rem + 2.7vw, 3.4rem); font-weight: 400; line-height: 1.04; letter-spacing: 0; text-align: left; text-wrap: balance; } /* ---------- the story's picture (the template's empty box) ---------- */ html[data-wf-page="685a16ca2630e792c86911e0"] #team.section-white { padding: 0 0 clamp(28px, 3.6vw, 48px); background: none; } html[data-wf-page="685a16ca2630e792c86911e0"] #team.section-white > .container.centered { width: var(--wl-na-col); max-width: none; margin: 0 auto; padding: 0; } html[data-wf-page="685a16ca2630e792c86911e0"] #team .container-960-left { display: block; width: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; } html[data-wf-page="685a16ca2630e792c86911e0"] .wl-na-lead { display: none; /* a story without a picture listed below keeps the box empty */ width: 100%; border-radius: var(--wl-r-lg); background: var(--wl-ink-2) center / cover no-repeat; box-shadow: 0 0 0 1px var(--wl-line); } /* ---------- the text ---------- */ html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext { width: var(--wl-na-col); max-width: none; margin: 0 auto; padding: 0 0 clamp(48px, 6vw, 88px); color: rgba(255, 255, 255, .8); font-family: Poppins, sans-serif; font-size: clamp(16px, 15.2px + .3vw, 18px); line-height: 1.75; } html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext p { margin: 0 0 1.15em; color: inherit; font-size: inherit; line-height: inherit; } /* the first paragraph opens the story a size up */ html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext > p:first-child { color: #fff; font-size: clamp(17.5px, 16px + .45vw, 21px); line-height: 1.6; } html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext :is(strong, b) { color: #fff; font-weight: 600; } html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext :is(h2, h3, h4) { margin: 1.9em 0 .6em; color: #fff; font-family: Poppins, sans-serif; font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; } html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext :is(h2, h3, h4)::before { content: ""; display: block; width: 28px; height: 3px; margin: 0 0 14px; border-radius: 2px; background: var(--wl-lime); } html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(210, 248, 1, .6); transition: color .15s, border-color .15s; } html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext a:hover { color: var(--wl-lime); border-color: var(--wl-lime); } html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext :is(ul, ol) { margin: 0 0 1.3em; padding: 0; } html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext ul { list-style: none; } html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext ol { padding-left: 1.4em; } html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext li { margin: 0 0 .6em; } html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext ul > li { position: relative; padding-left: 24px; } html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext ul > li::before { content: ""; position: absolute; left: 2px; top: .72em; width: 8px; height: 8px; border-radius: 2px; background: var(--wl-lime); transform: rotate(45deg); } html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext ol > li::marker { color: var(--wl-lime); font-weight: 600; } /* pictures in the text: the full column, rounded, never stretched past their own pixels */ html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext figure { width: auto; max-width: 100%; margin: 2em 0; clear: both; } html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext figure > div { display: block; } html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext figure img { display: block; width: auto; max-width: 100%; height: auto; margin: 0; border-radius: var(--wl-r-md); } html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext figcaption { margin: 10px 0 0; color: var(--wl-faint); font-size: 14px; line-height: 1.5; text-align: left; } html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext .w-embed { margin: 1.5em 0; } html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext iframe { display: block; max-width: 100%; border: 0; border-radius: var(--wl-r-md); background: #fff; } /* the campaigns band under the story starts with a hairline */ html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext + .section-dark-cloud { border-top: 1px solid var(--wl-line); } /* ---------- phones ---------- */ @media screen and (max-width: 767px) { html[data-wf-page="685a16ca2630e792c86911e0"] .section-hero-news { padding: 22px 0 22px; } html[data-wf-page="685a16ca2630e792c86911e0"] .section-hero-news .text-hero-pretitle { margin-bottom: 12px; } html[data-wf-page="685a16ca2630e792c86911e0"] .wl-na-lead { border-radius: 20px; } html[data-wf-page="685a16ca2630e792c86911e0"] body > .w-richtext figure { margin: 1.6em 0; } } /* ---------- each story's own picture and shape (data-wl-path = the story's address) ---------- */ /* 19 Oct (go-live gate L1: this story was slower than live on a phone, 3.4 s vs 2.5 s, its picture a 185 KB JPEG on Webflow's CDN found only once this file had loaded): the same photo as WebP from the site itself (800 px 40 KB, 1400 px 80 KB; master in _source.nosync/news-leads/), preloaded with the CSS (hero_preload.mjs finds .wl-na-lead) */ html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-backing-the-builders-investec-early-stage-entrepreneur-of-the-year-awards"] .wl-na-lead { display: block; aspect-ratio: 1400 / 934; background-image: url("/_redesign/images/news/investec-lead-800.webp"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-maria-bodaj-sets-new-world-record"] .wl-na-lead { display: block; aspect-ratio: 1080 / 1350; width: min(100%, 480px); background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/6a889784ab14f09912d8d9b6_Maria%20Bodaj-p-800.png"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-meet-us-at-dmwf-in-london"] .wl-na-lead { display: block; aspect-ratio: 1200 / 630; background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/685a2a107930bfb64f3d29ac_DMWF-p-800.jpg"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-meet-us-at-mad-fest-london"] .wl-na-lead { display: block; aspect-ratio: 1200 / 630; background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/685f37854ca502a297c41572_MADFest-p-800.jpg"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-second-installment-of-the-bridge-by-wavelength-londons-regular-get-together-for-creators-influencers-brands-traditional-emerging-media-investors-founders-and-entrepreneurs"] .wl-na-lead { display: block; aspect-ratio: 1274 / 496; background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/6a479cf9fb0c19543f36bb51_The%20bridge%20invite-p-800.png"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-the-bridge-july-14"] .wl-na-lead { display: block; aspect-ratio: 480 / 320; width: min(100%, 480px); background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/6a82cb98c7479729d0d900d1_1784280194420%20pp.jpg"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-the-bridge-september-brands-athletes-and-the-changing-rules-of-sports-culture"] .wl-na-lead { display: block; aspect-ratio: 3024 / 4032; width: min(100%, 480px); background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/6aa3f1d68eb930dbe63cb909_IMG_0700-p-800.jpg"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-the-creator-collective-2"] .wl-na-lead { display: block; aspect-ratio: 1024 / 768; background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/6a047afa0b58ffbe1e1ed629_Creator_nation_london_1777391323797-CkghQB-0-p-800.jpeg"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-the-wavelength-creator-pier-at-cannes-lions-2026"] .wl-na-lead { display: block; aspect-ratio: 1600 / 900; background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/6a0f0af5cb6887cdfb72337c_cannes%20picture-p-800.png"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-the-wavelength-creator-pier-in-cannes-2026----thats-a-wrap"] .wl-na-lead { display: block; aspect-ratio: 1 / 1; width: min(100%, 600px); background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/6a47a4232a4d5cf10324c4d2_WhatsApp%20Image%202026-07-02%20at%2016.53.16-p-800.jpeg"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-unreel-at-red-bull-cerro-abajo-2026"] .wl-na-lead { display: block; aspect-ratio: 1200 / 630; background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/6a9af395d85771b42a7e1ca6_download-p-800.jpg"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-walt-disney-and-tiktok-partnership"] .wl-na-lead { display: block; aspect-ratio: 800 / 459; width: min(100%, 800px); background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/6a82cab21c3e1073824c91f1_1786124632952.jpg"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-wavelength-is-heading-to-cannes"] .wl-na-lead { display: block; aspect-ratio: 1200 / 630; background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/685a256abe316c4e158fb3b6_Cannes-p-800.jpg"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-wavelength-partners-with-supercar-blondie"] .wl-na-lead { display: block; aspect-ratio: 650 / 202; width: min(100%, 650px); background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/6a05aeefae1e91e362865b0f_Wavelength%20updated%20signature.png"); } @media screen and (min-width: 768px) { html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-backing-the-builders-investec-early-stage-entrepreneur-of-the-year-awards"] .wl-na-lead { background-image: url("/_redesign/images/news/investec-lead-1400.webp"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-meet-us-at-dmwf-in-london"] .wl-na-lead { background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/685a2a107930bfb64f3d29ac_DMWF-p-1080.jpg"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-meet-us-at-mad-fest-london"] .wl-na-lead { background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/685f37854ca502a297c41572_MADFest-p-1080.jpg"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-second-installment-of-the-bridge-by-wavelength-londons-regular-get-together-for-creators-influencers-brands-traditional-emerging-media-investors-founders-and-entrepreneurs"] .wl-na-lead { background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/6a479cf9fb0c19543f36bb51_The%20bridge%20invite-p-1080.png"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-the-bridge-september-brands-athletes-and-the-changing-rules-of-sports-culture"] .wl-na-lead { background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/6aa3f1d68eb930dbe63cb909_IMG_0700-p-1080.jpg"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-the-creator-collective-2"] .wl-na-lead { background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/6a047afa0b58ffbe1e1ed629_Creator_nation_london_1777391323797-CkghQB-0.jpeg"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-the-wavelength-creator-pier-at-cannes-lions-2026"] .wl-na-lead { background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/6a0f0af5cb6887cdfb72337c_cannes%20picture-p-1080.png"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-the-wavelength-creator-pier-in-cannes-2026----thats-a-wrap"] .wl-na-lead { background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/6a47a4232a4d5cf10324c4d2_WhatsApp%20Image%202026-07-02%20at%2016.53.16-p-1080.jpeg"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-unreel-at-red-bull-cerro-abajo-2026"] .wl-na-lead { background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/6a9af395d85771b42a7e1ca6_download.jpg"); } html[data-wf-page="685a16ca2630e792c86911e0"][data-wl-path="news-wavelength-is-heading-to-cannes"] .wl-na-lead { background-image: url("https://cdn.prod.website-files.com/681067c98d823efc71021301/685a256abe316c4e158fb3b6_Cannes-p-1080.jpg"); } } /* the campaigns button under "Some of our high-impact social campaigns" (shared): buttons.css gives it line-height: 48px, which beats redesign.css's phone rule, so on phones its two-line label became two 48 px lines in a 120 px pill. Reported to the lead; held here on this page until the shared fix lands. */ @media screen and (max-width: 767px) { html[data-wf-page="685a16ca2630e792c86911e0"] body .section-dark-cloud .button-highlight { height: auto; min-height: 48px; padding: 13px 22px; line-height: 1.3; text-align: left; } } /* an empty block before Let's Talk (.section-contact > .div-block-40: two spacers on a #f8f8f8 fill) read as a white slab on the navy page; it holds no words and is the first #contact on the page, so it keeps its place (links to #contact still land here, just above the form) with no height and no fill */ html[data-wf-page="685a16ca2630e792c86911e0"] .section-contact { height: 0; padding: 0; overflow: hidden; } html[data-wf-page="685a16ca2630e792c86911e0"] .section-contact .div-block-40 { background: none; }