(or ) so it spans edge to edge and butts straight up against the footer. Also hosts the shared word-by-word headline reveal used by every major heading on the site ([data-split], see main.js). Loaded last on every page, after redesign.css. ============================================================ */ /* ------------------------------------------------------------ 1. WORD-BY-WORD HEADLINE REVEAL (site-wide) main.js wraps each word of a [data-split] heading in .w and sets --i to the word index; the stagger is pure CSS delay. ------------------------------------------------------------ */ [data-split] { perspective: 800px; } [data-split] .w { display: inline-block; will-change: transform, opacity, filter; opacity: 0; transform: translateY(0.5em) rotateX(-55deg) scale(0.96); filter: blur(8px); transition: opacity .62s cubic-bezier(.22, 1, .36, 1), transform .78s cubic-bezier(.22, 1, .36, 1), filter .62s ease-out; transition-delay: calc(var(--i, 0) * 58ms); } [data-split].split-in .w { opacity: 1; transform: none; filter: blur(0); } /* once the run has played, drop will-change so the compositor is not holding a layer for every word on the page */ [data-split].split-done .w { will-change: auto; } /* .w is a transport wrapper, never a style hook. Several selectors around the site decorate the emphasis element as `h2 > span` (redesign.css draws a blue rule under it); once main.js wraps each word those would match every word too. Cancel inherited decoration here and let the real emphasis element — which the word spans now sit *inside* — keep owning the look. */ [data-split] > .w { background: none !important; padding-bottom: 0 !important; color: inherit; -webkit-text-fill-color: inherit; } /* ------------------------------------------------------------ 2. THE BAND ------------------------------------------------------------ */ section.nx-cta { position: relative; isolation: isolate; overflow: hidden; width: 100%; max-width: none; margin: 0; padding: clamp(74px, 9vw, 136px) clamp(24px, 7vw, 96px); text-align: center; color: #fff; background: radial-gradient(120% 140% at 50% -20%, #123CB4 0%, #0A2A8F 42%, #05135A 100%); border-radius: 0; /* dark-context: flip the theme vars so anything nested reads correctly */ --text: #ffffff; --text-soft: rgba(255, 255, 255, 0.82); --line: rgba(255, 255, 255, 0.14); --line-2: rgba(255, 255, 255, 0.24); } /* hairline edges so the band reads as a deliberate slab */ section.nx-cta::before, section.nx-cta::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; z-index: 4; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.30) 22%, rgba(180, 210, 255, 0.55) 50%, rgba(255, 255, 255, 0.30) 78%, transparent); } section.nx-cta::before { top: 0; } section.nx-cta::after { bottom: 0; opacity: .45; } /* --- background video --- */ .nx-cta-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: .30; mix-blend-mode: luminosity; pointer-events: none; } /* --- veil: keeps copy legible over whatever frame is playing --- */ .nx-cta-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(4, 20, 90, 0.62) 0%, rgba(4, 20, 90, 0.44) 48%, rgba(4, 20, 90, 0.72) 100%); } /* --- aurora: two slow drifting light blooms --- */ .nx-cta-aurora { position: absolute; inset: -25%; z-index: 1; pointer-events: none; opacity: .85; background: radial-gradient(38% 46% at 22% 32%, rgba(46, 107, 255, 0.55), transparent 68%), radial-gradient(34% 42% at 78% 68%, rgba(255, 176, 136, 0.24), transparent 70%), radial-gradient(30% 38% at 62% 12%, rgba(120, 170, 255, 0.30), transparent 72%); filter: blur(28px); animation: nxAurora 22s ease-in-out infinite alternate; } @keyframes nxAurora { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 50% { transform: translate3d( 3%, 2%, 0) scale(1.08); } 100% { transform: translate3d(-2%, 3%, 0) scale(1.03); } } /* --- grid: faint engineered mesh, pans diagonally --- */ .nx-cta-grid { position: absolute; inset: -50%; z-index: 1; pointer-events: none; opacity: .16; background-image: linear-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.55) 1px, transparent 1px); background-size: 62px 62px; mask-image: radial-gradient(58% 62% at 50% 50%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(58% 62% at 50% 50%, #000 20%, transparent 78%); animation: nxGrid 26s linear infinite; } @keyframes nxGrid { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(62px, 62px, 0); } } /* --- a single sweeping light bar, top to bottom --- */ .nx-cta-sweep { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; } .nx-cta-sweep::after { content: ""; position: absolute; top: -60%; left: -30%; width: 55%; height: 220%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.10) 45%, transparent); transform: rotate(14deg); animation: nxSweep 9s ease-in-out infinite; } @keyframes nxSweep { 0%, 62% { transform: translateX(-40%) rotate(14deg); opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(260%) rotate(14deg); opacity: 0; } } /* ------------------------------------------------------------ 3. CONTENT ------------------------------------------------------------ */ .nx-cta-in { position: relative; z-index: 3; max-width: 940px; margin: 0 auto; } .nx-cta-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px; padding: 7px 16px 7px 13px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, 0.92); } .nx-cta-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #6EF3B0; box-shadow: 0 0 0 0 rgba(110, 243, 176, 0.65); animation: nxPulse 2.1s ease-out infinite; } @keyframes nxPulse { 0% { box-shadow: 0 0 0 0 rgba(110, 243, 176, 0.60); } 70% { box-shadow: 0 0 0 9px rgba(110, 243, 176, 0); } 100% { box-shadow: 0 0 0 0 rgba(110, 243, 176, 0); } } .nx-cta h2 { margin: 0; font-family: var(--font-head, 'Sora', sans-serif); font-size: clamp(30px, 4.9vw, 58px); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; color: #fff; text-wrap: balance; } /* ---- the highlighted half of the headline ---- background-clip:text cannot paint through a descendant that owns a stacking context, and every word span does (transform + filter). So the gradient goes on the *words*, and main.js gives each one a background-size/-position that continues the phrase's single gradient across them. `.nx-cta h2 > span` below is the pre-split / no-JS fallback only. */ .nx-cta h2 > span:not(.w), .nx-cta h2 > em { font-style: normal; } .nx-cta h2:not(.split-ready) > span, .nx-cta h2:not(.split-ready) > em, .nx-cta h2 .w.grad { background-image: linear-gradient(103deg, #FFE2D0 0%, #FFB088 34%, #DCE7FF 74%, #B6CEFF 100%); background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .nx-cta p { margin: 20px auto 0; max-width: 620px; font-size: clamp(15.5px, 1.25vw, 17.5px); line-height: 1.62; color: rgba(255, 255, 255, 0.84); text-wrap: pretty; } /* ------------------------------------------------------------ 4. ACTIONS ------------------------------------------------------------ */ .nx-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; } .nx-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 14px; border: 1px solid transparent; font-family: inherit; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease, background-color .28s ease, border-color .28s ease; } .nx-btn svg { width: 17px; height: 17px; transition: transform .28s cubic-bezier(.22, 1, .36, 1); } .nx-btn:hover svg { transform: translateX(4px); } /* shine that crosses the button on hover */ .nx-btn::after { content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.42), transparent); transform: skewX(-18deg); transition: left .62s cubic-bezier(.22, 1, .36, 1); pointer-events: none; } .nx-btn:hover::after { left: 130%; } .nx-btn-light { color: #0A2A8F; background: #fff; box-shadow: 0 14px 32px rgba(3, 12, 50, 0.34); } .nx-btn-light:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(3, 12, 50, 0.42); } .nx-btn-ghost { color: #fff; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.30); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .nx-btn-ghost:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.55); } .nx-btn-ghost::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent); } .nx-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* ------------------------------------------------------------ 5. TRUST STRIP ------------------------------------------------------------ */ .nx-cta-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 34px 0 0; padding: 0; list-style: none; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.74); } .nx-cta-trust li { display: inline-flex; align-items: center; gap: 8px; } .nx-cta-trust li::before { content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A2A8F' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px 10px no-repeat, #6EF3B0; } /* ------------------------------------------------------------ 6. NEWSLETTER VARIANT (blogs page) ------------------------------------------------------------ */ .nx-cta-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 540px; margin: 34px auto 0; } .nx-cta-form input[type="email"] { flex: 1; min-width: 220px; padding: 15px 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.07); color: #fff; font-family: inherit; font-size: 15px; outline: none; transition: border-color .25s ease, background-color .25s ease; } .nx-cta-form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.55); } .nx-cta-form input[type="email"]:focus { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.12); } .nx-cta-form .form-note { flex-basis: 100%; margin: 0; text-align: center; font-size: 14px; color: rgba(255, 255, 255, 0.82); } /* ------------------------------------------------------------ 7. RESPONSIVE ------------------------------------------------------------ */ @media (max-width: 640px) { section.nx-cta { padding: 64px 22px 68px; } .nx-cta-actions { flex-direction: column; align-items: stretch; } .nx-btn { justify-content: center; width: 100%; } .nx-cta-trust { gap: 8px 18px; font-size: 12.5px; } .nx-cta-grid { opacity: .10; } } /* ------------------------------------------------------------ 8. REDUCED MOTION ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { [data-split] .w { opacity: 1; transform: none; filter: none; transition: none; } .nx-cta-aurora, .nx-cta-grid, .nx-cta-sweep::after, .nx-cta-eyebrow i { animation: none; } .nx-btn, .nx-btn svg, .nx-btn::after { transition: none; } .nx-btn:hover { transform: none; } }