/* COPY THAT newsletter. Loaded by BOTH the Vercel page and the Webflow embed at burstdigital.co.nz/copy-that, so the 2 cannot drift. Everything is namespaced under .bd-lp: on Vercel that class is on , on Webflow it is a wrapper div. That namespace is what stops these rules leaking onto the rest of the site, and the site's rules leaking in. Do not flatten it to bare element selectors. Edit here, redeploy to Vercel, and the live Webflow page updates with NO Webflow publish. That is the whole point of it being external. */ /* ========================================================================== Burst Digital · COPY THAT newsletter signup Built 04 September 2026. Design system lifted from the apply page (_manager/outputs/agency-funnel/apply), which took it from the Profitable Ads sales page, so all three stay a family. Same palette, same type, same red-means-act button, same logo rail. EVERYTHING IS NAMESPACED UNDER .bd-lp ON PURPOSE. This page goes onto the Webflow site after Vercel, and on Webflow it will be a code embed sitting inside somebody else's stylesheet. A namespace is what stops these rules leaking onto the rest of the site and stops the site's rules leaking in. Do not flatten it to bare element selectors. The two documented palette exceptions carry over with their original standing, they are not new decisions made here: --alert red, approved by Roi 30 Jul 2026, only ever on white or as a fill with white on top. It is the only thing that means "act". --display Newsreader, approved by Roi 12 Aug 2026, narrative headings only. standards.md says Poppins exclusively on web, so it stays flagged rather than quietly kept. ========================================================================== */ .bd-lp *, .bd-lp *::before, .bd-lp *::after { box-sizing: border-box; } .bd-lp { --white: #ffffff; --navy: #0e132a; --off: #fdfdfe; --lavender: #a6a0e9; --lav-soft: rgba(166, 160, 233, 0.34); --border: #eeeef2; --ink-2: rgba(14, 19, 42, 0.68); --alert: #c62828; --alert-d: #a81f1f; --display: 'Newsreader', Georgia, 'Times New Roman', serif; --quiet: #f5f4fc; font-family: 'Poppins', system-ui, sans-serif; color: var(--navy); background: var(--white); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; } .bd-lp p { margin: 0 0 16px; } .bd-lp p:last-child { margin-bottom: 0; } .bd-lp strong { font-weight: 600; } .bd-lp img { max-width: 100%; display: block; } .bd-lp .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; } .bd-lp h1, .bd-lp h2 { margin: 0 0 18px; line-height: 1.12; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; } .bd-lp h2 { font-size: clamp(24px, 3vw, 34px); } .bd-lp .center { text-align: center; } .bd-lp .lead { font-size: clamp(16px, 1.6vw, 18px); color: var(--ink-2); text-wrap: pretty; } /* screen reader only, for the labels the design does not show */ .bd-lp .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- the lavender highlight ---------- Navy text on a lavender fill, never lavender text on white (1.45:1). Navy on this fill is 7.7:1. clone gives every wrapped line fragment its own padded block, otherwise one stretched box sits behind both lines with the padding only on the outer ends. Sharp corners, per brand-guidelines. */ .bd-lp .hl { background: var(--lav-soft); padding: 2px 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } @media (forced-colors: active) { .bd-lp .hl { background: Highlight; color: HighlightText; } } /* ---------- masthead ---------- */ .bd-lp .masthead { padding: 34px 0 0; text-align: center; } .bd-lp .masthead img { width: 168px; margin: 0 auto; } /* ---------- hero ---------- */ .bd-lp .hero { padding: 46px 0 54px; text-align: center; } .bd-lp .eyebrow { text-align: center; margin: 0 0 18px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); } .bd-lp .hero h1 { font-size: clamp(29px, 4.1vw, 50px); max-width: 22ch; margin: 0 auto 22px; } .bd-lp .hero .promise { font-size: clamp(17px, 2.05vw, 24px); font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; max-width: 60ch; margin: 0 auto 30px; text-wrap: balance; } /* ---------- the form ---------- Fields are 16px and that is not a style choice. iOS Safari zooms the whole page in on any input under 16px and never zooms back out, which on a page whose only job is one form is the difference between a signup and a bounce. The apply page has this exact bug and cannot fix it, because its form is an iframe on somebody else's domain. Ours is not, so it gets fixed here. */ .bd-lp .signup { max-width: 470px; margin: 0 auto; } .bd-lp .fields { display: grid; gap: 10px; margin-bottom: 12px; } @media (min-width: 620px) { .bd-lp .fields { grid-template-columns: 1fr 1fr; } } .bd-lp .signup input { width: 100%; font-family: inherit; font-size: 16px; color: var(--navy); background: var(--white); padding: 15px 16px; border: 1px solid var(--border); border-radius: 11px; transition: border-color 0.15s ease; } .bd-lp .signup input::placeholder { color: rgba(14, 19, 42, 0.44); } .bd-lp .signup input:focus { outline: none; border-color: var(--lavender); box-shadow: 0 0 0 3px var(--lav-soft); } .bd-lp .signup input:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } /* One button design, used everywhere, and red every time. Navy is structure, lavender is accent, red is the only thing on the page that means "act". */ .bd-lp .btn-cta { display: block; width: 100%; background: var(--alert); color: var(--white); font-family: inherit; padding: 16px 28px; border: none; border-radius: 11px; text-align: center; text-decoration: none; cursor: pointer; transition: background 0.15s ease; } .bd-lp .btn-cta:hover { background: var(--alert-d); } .bd-lp .btn-cta:focus-visible { background: var(--alert-d); outline: 3px solid var(--navy); outline-offset: 4px; } .bd-lp .btn-cta[disabled] { opacity: 0.72; cursor: default; } .bd-lp .btn-cta .l1 { display: block; font-size: clamp(18px, 1.9vw, 21px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } .bd-lp .btn-cta .l2 { display: block; margin-top: 5px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; line-height: 1.45; text-transform: uppercase; color: rgba(255, 255, 255, 0.86); } /* centred on the element, not inherited from a parent. The hero band is text-align:center and the closing band is not, so relying on inheritance left these 2 lines aligned differently in the 2 copies of the same form. */ .bd-lp .ctameta { margin: 14px auto 0; max-width: 46ch; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); text-align: center; text-wrap: pretty; } .bd-lp .err { margin: 12px 0 0; font-size: 14px; font-weight: 600; color: var(--alert); text-align: center; } /* the confirmation. Replaces the form in place rather than sending them to a second page, so there is one less thing to deploy and one less thing to break when this moves to Webflow. */ .bd-lp .done { max-width: 470px; margin: 0 auto; background: var(--quiet); border: 1px solid var(--border); border-radius: 14px; padding: 30px 26px; text-align: center; } .bd-lp .done h2 { font-size: clamp(21px, 2.4vw, 27px); margin-bottom: 12px; } .bd-lp .done p { font-size: 15.5px; color: var(--ink-2); } /* ---------- numbers banner ---------- */ .bd-lp .banner { background: var(--navy); color: var(--white); padding: 32px 0; } .bd-lp .banner ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 56px; } .bd-lp .banner li { text-align: center; } .bd-lp .banner .bfig { display: block; font-size: clamp(26px, 3vw, 36px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--lavender); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .bd-lp .banner .blab { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); } /* ---------- bands ---------- */ .bd-lp section { padding: 58px 0; } .bd-lp .band-off { background: var(--off); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* the display heading. Bold roman, then the turn into italic: the sentence changes voice halfway through. */ .bd-lp .dhead { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.05; letter-spacing: -0.02em; max-width: 19ch; margin: 0 auto 20px; text-align: center; text-wrap: balance; } .bd-lp .dhead em { font-style: italic; font-weight: 400; } /* ---------- client logo rail ---------- Lifted from the apply page unchanged. The track holds the same 14 logos TWICE and slides exactly -50%, so the moment the first set leaves the frame the second set is sitting in precisely the position the first started from and the loop is seamless. Any other distance and it visibly jumps. NO greyscale filter. Several of these logos ship with their own dark background baked into the file, so desaturating them turned 4 of the 14 into grey blocks with nothing readable in them. Pauses on hover, because a logo somebody is trying to read should hold still. Under a stated preference for less motion it stops being a rail at all and falls back to a static grid, with the duplicate set hidden so nothing shows up twice. */ .bd-lp .logorail { margin-top: 30px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .bd-lp .logotrack { display: flex; align-items: center; gap: 58px; width: max-content; animation: bdLogoScroll 46s linear infinite; } .bd-lp .logorail:hover .logotrack, .bd-lp .logorail:focus-within .logotrack { animation-play-state: paused; } .bd-lp .logotrack img { flex: 0 0 auto; height: 46px; width: auto; max-width: 170px; object-fit: contain; opacity: 0.82; } @keyframes bdLogoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- what turns up ---------- */ .bd-lp .pgrid { display: grid; gap: 16px; grid-template-columns: 1fr; max-width: 980px; margin: 30px auto 0; } @media (min-width: 760px) { .bd-lp .pgrid { grid-template-columns: repeat(3, 1fr); } } .bd-lp .pcard { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 26px 24px; } .bd-lp .pcard h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; } .bd-lp .pcard p { font-size: 15px; color: var(--ink-2); } /* ---------- footer ---------- */ .bd-lp .foot { background: var(--navy); color: rgba(255, 255, 255, 0.72); padding: 40px 0; text-align: center; } .bd-lp .foot img { width: 148px; margin: 0 auto 16px; } .bd-lp .foot p { font-size: 13px; } .bd-lp .foot a { color: var(--lavender); } @media (prefers-reduced-motion: reduce) { .bd-lp *, .bd-lp *::before, .bd-lp *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } /* The rail stops being a rail. Killing the animation alone would leave the track frozen mid-slide with half the logos off screen, so it reverts to a static wrapped grid and the duplicate set is dropped. */ .bd-lp .logorail { -webkit-mask-image: none; mask-image: none; } .bd-lp .logotrack { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 28px 44px; } .bd-lp .logotrack .dupe { display: none; } }