/* ========================================================================== partners-v2.css — Bespoke redesign layer for /partners -------------------------------------------------------------------------- Rides on the shared v2 layer (site-v2.css). Requires: • • css/site-v2.css loaded before this file • Inter Tight loaded via WebFont (body face) Everything is scoped under `.nm-v2` and uses `pv-` (partners-v2) classes so it cannot leak into other pages. Follows DESIGN-SYSTEM.md — non-bold type (≤600), sharp shell / curved interior, dark-band gaps via margin, one fluid rhythm. See REDESIGN-ROLLOUT.md. ========================================================================== */ /* ========================================================================== 0. TRANSPARENT → SOLID NAV over the dark hero Ported from home-v2.css (§7), rescoped .home-v2 → .nm-v2 so this page gets the same transparent-over-hero nav that fills solid on scroll. Toggled by the .nm-nav-solid class (inline scroll handler at the bottom of the page). ========================================================================== */ .nm-v2 .navbar { background-color: transparent; background-image: linear-gradient(180deg, rgba(8, 10, 14, 0.55) 0%, rgba(8, 10, 14, 0) 100%); box-shadow: none; transition: background-color 0.35s ease, background-image 0.35s ease, box-shadow 0.35s ease; } .nm-v2 .navbar.nm-nav-solid { background-color: #ffffff; background-image: none; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 8px 30px rgba(0, 0, 0, 0.10); } .nm-v2 .navbar .menu-item-text, .nm-v2 .navbar .logo-name, .nm-v2 .navbar .logo-icon, .nm-v2 .navbar .dropdown-menu-arrow, .nm-v2 .navbar .hamburger-container img, .nm-v2 .navbar .nav-btn.filled-bg { transition: color 0.35s ease, background-color 0.35s ease, filter 0.35s ease, border-color 0.35s ease; } .nm-v2 .navbar .logo-wrapper { width: auto; overflow: visible; } .nm-v2 .navbar .logo-wrapper .nm-logo-white { display: block; height: 3.6rem; width: auto; transition: filter 0.35s ease; } .nm-v2 .navbar .logo-wrapper .div-block-30, .nm-v2 .navbar .logo-wrapper .logo-name { display: none; } .nm-v2 .navbar.nm-nav-solid .logo-wrapper .nm-logo-white { filter: brightness(0); } .nm-v2 .navbar.nm-nav-solid .menu-item-text { color: var(--very-dark); } .nm-v2 .navbar.nm-nav-solid .dropdown-menu-arrow { filter: brightness(0); } .nm-v2 .navbar.nm-nav-solid .hamburger-container img { filter: brightness(0); } .nm-v2 .navbar.nm-nav-solid .nav-btn.filled-bg { background-color: var(--very-dark); color: #ffffff; } @media (prefers-reduced-motion: reduce) { .nm-v2 .navbar, .nm-v2 .navbar .menu-item-text, .nm-v2 .navbar .logo-wrapper .nm-logo-white, .nm-v2 .navbar .nav-btn.filled-bg { transition: none; } } @media (max-width: 991px) { .nm-v2 .navbar .mobile-nav.pad-layout { background-color: transparent; transition: background-color 0.35s ease, box-shadow 0.35s ease; } .nm-v2 .navbar.nm-nav-solid .mobile-nav.pad-layout { background-color: #ffffff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 8px 30px rgba(0, 0, 0, 0.10); } .nm-v2.no-scroll .navbar .mobile-nav .logo-wrapper .nm-logo-white { filter: brightness(0); } .nm-v2.no-scroll .navbar .mobile-nav .hamburger-container img { filter: brightness(0); } .nm-v2 .navbar .mobile-nav .nm-nav-mobile-cta { margin-left: auto; margin-right: 1.4rem; height: 3.8rem; padding: 0 1.6rem; font-size: 1.4rem; line-height: 1; white-space: nowrap; flex: 0 0 auto; } .nm-v2.no-scroll .navbar .mobile-nav .nm-nav-mobile-cta { display: none; } } /* ========================================================================== 1. SHARED PAGE PRIMITIVES ========================================================================== */ .nm-v2 .pv-eyebrow { display: inline-block; font-family: "PT Mono", monospace; font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--v2-blue-bright); margin: 0 0 1.6rem; } .nm-v2 .pv-section { padding: clamp(6rem, 10vw, 10rem) 0; } .nm-v2 .pv-section--wash { background: #f5f6f9; } .nm-v2 .pv-head { max-width: 72rem; margin: 0 0 clamp(3.6rem, 5vw, 5.6rem); } .nm-v2 .pv-head--center { margin-left: auto; margin-right: auto; text-align: center; } .nm-v2 .pv-head .big-heading-n { margin: 0; } .nm-v2 .pv-head__sub { margin: 1.8rem 0 0; font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--v2-muted); font-weight: 400; } .nm-v2 .pv-head__sub strong { color: var(--v2-ink); font-weight: 500; } /* ========================================================================== 2. HERO — dark cinematic band, matches the homepage feel ========================================================================== */ .nm-v2 #Hero-section.pv-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: radial-gradient(120% 150% at 50% -25%, #1f2a52 0%, #12111c 58%); color: #f8f8fb; padding: 0; overflow: hidden; } .nm-v2 .pv-hero__inner { position: relative; z-index: 2; flex: 1 1 auto; width: 100%; max-width: 96rem; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: clamp(11rem, 15vw, 15rem); padding-bottom: clamp(2rem, 4vw, 4rem); } .nm-v2 .pv-hero .pv-eyebrow { color: #9db6ff; } .nm-v2 .pv-hero__badge { display: inline-flex; align-items: center; gap: 0.9rem; padding: 0.6rem 1.4rem; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.04); font-family: "PT Mono", monospace; font-size: 1.15rem; letter-spacing: 0.1em; text-transform: uppercase; color: #cdd6ea; margin-bottom: 2.8rem; } .nm-v2 .pv-hero__badge .pv-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0.4rem rgba(74, 222, 128, 0.16); } .nm-v2 .pv-hero__title.big-heading-n.hero { font-family: var(--v2-display); font-weight: 300; font-size: clamp(4rem, 6.2vw, 7rem); line-height: 1.04; letter-spacing: -0.02em; color: #ffffff; margin: 0; text-transform: none; } .nm-v2 .pv-hero__lead { max-width: 62rem; margin: 2.4rem auto 0; font-size: var(--fs-lead); line-height: 1.6; color: #c4c8d4; font-weight: 400; } .nm-v2 .pv-hero__lead strong { color: #ffffff; font-weight: 500; } .nm-v2 .pv-hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin-top: 3.6rem; } /* Reuse the homepage hero buttons. Ensure the secondary reads on dark. */ .nm-v2 .pv-hero__cta .main-btn, .nm-v2 .pv-hero__cta .secondary-btn, .nm-v2 .pv-final .main-btn, .nm-v2 .pv-final .secondary-btn { width: auto; min-width: 0; padding: 1.4rem 2.8rem; white-space: nowrap; /* .secondary-btn ships with no font-family (falls back to Inter Tight); pin both CTAs to PT Mono so primary + secondary match. */ font-family: "PT Mono", sans-serif; } .nm-v2 .pv-hero__cta .main-btn span, .nm-v2 .pv-hero__cta .secondary-btn span, .nm-v2 .pv-final .main-btn span, .nm-v2 .pv-final .secondary-btn span { white-space: nowrap; } .nm-v2 .pv-hero__cta .main-btn { background: #ffffff; color: var(--very-dark); } .nm-v2 .pv-hero__cta .secondary-btn { border: 1px solid rgba(255, 255, 255, 0.32); color: #ffffff; background: transparent; } .nm-v2 .pv-hero__cta .secondary-btn:hover { border-color: #ffffff; } .nm-v2 .pv-hero__micro { margin: 2rem 0 0; font-family: "PT Mono", monospace; font-size: 1.2rem; letter-spacing: 0.04em; color: #7f889c; } .nm-v2 .pv-final__micro { margin: 2rem 0 0; font-family: "PT Mono", monospace; font-size: 1.2rem; letter-spacing: 0.04em; color: #7f889c; } /* Brand marquee (homepage brands) pinned to the bottom of the hero */ .nm-v2 .pv-brands { position: relative; z-index: 2; flex: 0 0 auto; margin-top: 0; padding-bottom: clamp(3rem, 5vw, 4.5rem); } .nm-v2 .pv-brands__label { display: block; text-align: center; font-family: "PT Mono", monospace; font-size: 1.2rem; letter-spacing: 0.16em; text-transform: uppercase; color: #7f889c; margin-bottom: 2.6rem; } .nm-v2 .pv-brands__row { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .nm-v2 .pv-brands__track { display: flex; align-items: center; gap: clamp(4rem, 7vw, 8rem); width: max-content; animation: pv-brands-marquee 34s linear infinite; } .nm-v2 .pv-brands__row:hover .pv-brands__track { animation-play-state: paused; } @keyframes pv-brands-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .nm-v2 .pv-brands__track img { height: 2.1rem; width: auto; flex: 0 0 auto; opacity: 0.62; filter: brightness(0) invert(1); transition: opacity 0.25s ease; } .nm-v2 .pv-brands__track img:hover { opacity: 1; } @media (prefers-reduced-motion: reduce) { .nm-v2 .pv-brands__track { animation: none; flex-wrap: wrap; justify-content: center; } } @media (max-width: 767px) { .nm-v2 .pv-brands__track img { height: 1.7rem; } } /* -------- Floating app-partner constellation (hero background) ---------- The signature of the original /partners hero: partner app icons scattered behind the content. Full-colour circular tiles, dimmed with a soft blue glow, gently drifting. Sits below the content (z-index 1). Desktop only — hidden on tablet/mobile so the hero copy stays clean. */ .nm-v2 .pv-hero__apps { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .nm-v2 .pv-app { position: absolute; width: 6rem; height: auto; border-radius: 50%; opacity: 0.42; filter: drop-shadow(0 6px 22px rgba(67, 128, 249, 0.22)); animation: pv-app-float 9s ease-in-out infinite; } @keyframes pv-app-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4rem); } } /* Scatter — kept in the side margins / corners, clear of the centred column. */ .nm-v2 .pv-app--1 { width: 5.8rem; top: 15%; left: 7%; animation-delay: -0.4s; } .nm-v2 .pv-app--2 { width: 7.2rem; top: 30%; left: 15%; animation-delay: -2.1s; } .nm-v2 .pv-app--3 { width: 5rem; top: 52%; left: 5%; animation-delay: -3.4s; } .nm-v2 .pv-app--4 { width: 6.4rem; bottom: 24%; left: 12%; animation-delay: -1.2s; } .nm-v2 .pv-app--5 { width: 4.6rem; bottom: 30%; left: 26%; animation-delay: -4.6s; } .nm-v2 .pv-app--6 { width: 5.6rem; top: 16%; right: 8%; animation-delay: -0.9s; } .nm-v2 .pv-app--7 { width: 7rem; top: 32%; right: 15%; animation-delay: -2.8s; } .nm-v2 .pv-app--8 { width: 4.8rem; top: 54%; right: 6%; animation-delay: -3.9s; } .nm-v2 .pv-app--9 { width: 6.2rem; bottom: 24%; right: 12%; animation-delay: -1.7s; } .nm-v2 .pv-app--10 { width: 4.8rem; bottom: 31%; right: 26%; animation-delay: -5.2s; } .nm-v2 .pv-app:hover { opacity: 0.85; } @media (prefers-reduced-motion: reduce) { .nm-v2 .pv-app { animation: none; } } /* Pull the closest-to-centre icons out on mid widths, hide entirely on tablet and below so they never collide with the hero copy. */ @media (max-width: 1200px) { .nm-v2 .pv-app--2, .nm-v2 .pv-app--5, .nm-v2 .pv-app--7, .nm-v2 .pv-app--10 { display: none; } } @media (max-width: 991px) { .nm-v2 .pv-hero__apps { display: none; } } /* ========================================================================== 3. PROOF BAR — four KPIs in an elevated card that lifts off a wash band (icon chip + gradient number + label; hover tints the cell). Replaces the flat divider row so it reads alive, not neutral. ========================================================================== */ .nm-v2 .pv-stats { background: #f5f6f9; padding: clamp(5rem, 8vw, 8rem) 0; } .nm-v2 .pv-stats__bar { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); background: #ffffff; border: 1px solid var(--v2-line); box-shadow: 0 24px 60px rgba(18, 17, 28, 0.09); overflow: hidden; } /* Thin brand-gradient accent along the very top edge. */ .nm-v2 .pv-stats__bar::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #003baf, #4380f9, #fbbf24); } .nm-v2 .pv-stat { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(3rem, 3.6vw, 4rem) clamp(1.6rem, 2vw, 2.4rem); border-left: 1px solid var(--v2-line); transition: background 0.25s ease; } .nm-v2 .pv-stat:first-child { border-left: 0; } .nm-v2 .pv-stat:hover { background: linear-gradient(180deg, rgba(67,128,249,0.05), rgba(67,128,249,0)); } .nm-v2 .pv-stat__ico { display: inline-flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; margin-bottom: 1.8rem; border-radius: 1.3rem; color: #fff; background: linear-gradient(135deg, #003baf, #4380f9); box-shadow: 0 8px 20px rgba(0, 59, 175, 0.28); transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); } .nm-v2 .pv-stat:hover .pv-stat__ico { transform: translateY(-3px) scale(1.05); } .nm-v2 .pv-stat__ico svg { width: 2.2rem; height: 2.2rem; } .nm-v2 .pv-stat__num { font-family: var(--v2-display); font-weight: 400; font-size: clamp(3.4rem, 4.2vw, 4.6rem); line-height: 1; letter-spacing: -0.02em; color: var(--v2-ink); background: linear-gradient(90deg, #03369a, #5e93fb); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .nm-v2 .pv-stat__label { margin-top: 1rem; font-family: "PT Mono", monospace; font-size: 1.25rem; letter-spacing: 0.04em; line-height: 1.4; color: var(--v2-muted); } @media (max-width: 767px) { .nm-v2 .pv-stats__bar { grid-template-columns: repeat(2, 1fr); } .nm-v2 .pv-stat:nth-child(odd) { border-left: 0; } .nm-v2 .pv-stat:nth-child(n+3) { border-top: 1px solid var(--v2-line); } } @media (max-width: 399px) { .nm-v2 .pv-stats__bar { grid-template-columns: 1fr; } .nm-v2 .pv-stat { border-left: 0; } .nm-v2 .pv-stat:nth-child(n+2) { border-top: 1px solid var(--v2-line); } } /* ========================================================================== 4. CARD PRIMITIVE — sharp shell, curved interior, soft shadow + hover lift ========================================================================== */ .nm-v2 .pv-card { position: relative; display: flex; flex-direction: column; background: #ffffff; border: 1px solid var(--v2-line); border-radius: 0; padding: clamp(2.8rem, 3vw, 3.6rem); box-shadow: 0 1px 2px rgba(18, 17, 28, 0.04); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .nm-v2 a.pv-card { text-decoration: none; color: inherit; } .nm-v2 .pv-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(18, 17, 28, 0.10); border-color: #d3d8e4; } .nm-v2 .pv-ico { display: inline-flex; align-items: center; justify-content: center; width: 4.8rem; height: 4.8rem; border-radius: 1.4rem; background: linear-gradient(135deg, rgba(0, 59, 175, 0.10), rgba(67, 128, 249, 0.14)); color: var(--v2-blue); margin-bottom: 2rem; } .nm-v2 .pv-ico svg { width: 2.4rem; height: 2.4rem; } .nm-v2 .pv-card__title { font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.15; color: var(--v2-ink); margin: 0 0 1rem; } .nm-v2 .pv-card__text { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--v2-muted); margin: 0; } .nm-v2 .pv-card__link { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 2.2rem; font-family: "PT Mono", monospace; font-size: 1.3rem; letter-spacing: 0.04em; color: var(--v2-blue); } .nm-v2 .pv-card__link svg { width: 1.6rem; height: 1.6rem; transition: transform 0.25s ease; } .nm-v2 .pv-card:hover .pv-card__link svg { transform: translateX(4px); } /* ========================================================================== 5. PATHS — "three ways to partner" (3 cards) ========================================================================== */ .nm-v2 .pv-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; } .nm-v2 .pv-paths .pv-card { margin-top: auto; } .nm-v2 .pv-paths .pv-card__link { margin-top: auto; padding-top: 2.2rem; } @media (max-width: 991px) { .nm-v2 .pv-paths { grid-template-columns: 1fr; max-width: 52rem; margin-inline: auto; } } /* ========================================================================== 6. VALUE PROPS — "why partner" (4 up) ========================================================================== */ .nm-v2 .pv-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; } .nm-v2 .pv-values .pv-card { padding: clamp(2.4rem, 2.6vw, 3rem); } .nm-v2 .pv-values .pv-ico { width: 4rem; height: 4rem; border-radius: 1.1rem; margin-bottom: 1.6rem; } .nm-v2 .pv-values .pv-ico svg { width: 2rem; height: 2rem; } .nm-v2 .pv-values .pv-card__title { font-size: var(--fs-h4); } @media (max-width: 991px) { .nm-v2 .pv-values { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 559px) { .nm-v2 .pv-values { grid-template-columns: 1fr; } } /* ========================================================================== 7. EARNINGS — dark full-bleed highlight band (gap = margin, per rhythm rule) ========================================================================== */ .nm-v2 .pv-earn { background: radial-gradient(120% 160% at 50% -30%, #1f2a52 0%, #12111c 60%); color: #f2f4fa; border-radius: 0; padding: clamp(6rem, 9vw, 9rem) 0; margin: clamp(6rem, 10vw, 10rem) 0; overflow: hidden; } .nm-v2 .pv-earn__inner { display: grid; grid-template-columns: 1.05fr 1.4fr; gap: clamp(3.2rem, 6vw, 7rem); align-items: center; } .nm-v2 .pv-earn .pv-eyebrow { color: #ffd27a; } .nm-v2 .pv-earn__title { font-family: var(--v2-display); font-weight: 300; font-size: clamp(2.8rem, 3.6vw, 4rem); line-height: 1.1; letter-spacing: -0.015em; color: #ffffff; margin: 0 0 1.6rem; } .nm-v2 .pv-earn__copy { font-size: var(--fs-lead); line-height: 1.6; color: #b9c0d2; margin: 0 0 2.8rem; } .nm-v2 .pv-earn__copy strong { color: #ffffff; font-weight: 500; } .nm-v2 .pv-earn .white-btn.filled-bg { background: #ffffff; color: var(--very-dark); } .nm-v2 .pv-earn__figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.10); } .nm-v2 .pv-figure { background: rgba(255, 255, 255, 0.02); padding: clamp(2.4rem, 3vw, 3.2rem) 1.8rem; text-align: center; } .nm-v2 .pv-figure__num { font-family: var(--v2-display); font-weight: 400; font-size: clamp(3.6rem, 4.6vw, 5rem); line-height: 1; letter-spacing: -0.02em; color: #ffd27a; } .nm-v2 .pv-figure__label { margin-top: 1.2rem; font-size: var(--fs-body-sm); line-height: 1.4; color: #aeb5c7; } @media (max-width: 860px) { .nm-v2 .pv-earn__inner { grid-template-columns: 1fr; } .nm-v2 .pv-earn__figures { grid-template-columns: 1fr; } .nm-v2 .pv-figure { padding: 2.4rem 1.8rem; } } /* ========================================================================== 8. MEET PARTNERS — tabbed logo grids (replaces the fiddly focal carousel) ========================================================================== */ .nm-v2 .pv-tabs { display: inline-flex; gap: 0.4rem; padding: 0.5rem; background: #eef0f5; border-radius: 999px; margin-bottom: clamp(3.2rem, 5vw, 4.8rem); } .nm-v2 .pv-tab { appearance: none; border: 0; cursor: pointer; background: transparent; padding: 1rem 2.2rem; border-radius: 999px; font-family: "Inter Tight", sans-serif; font-size: var(--fs-body-sm); font-weight: 500; color: var(--v2-muted); transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .nm-v2 .pv-tab:hover { color: var(--v2-ink); } .nm-v2 .pv-tab.is-active { background: #ffffff; color: var(--v2-ink); box-shadow: 0 2px 8px rgba(18, 17, 28, 0.08); } .nm-v2 .pv-panel { display: none; } .nm-v2 .pv-panel.is-active { display: block; animation: pv-fade 0.35s ease; } @keyframes pv-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .nm-v2 .pv-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } @media (max-width: 991px) { .nm-v2 .pv-logos { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 479px) { .nm-v2 .pv-logos { grid-template-columns: 1fr; } } .nm-v2 .pv-logo { display: flex; flex-direction: column; text-decoration: none; background: #ffffff; border: 1px solid var(--v2-line); border-radius: 0; padding: 2.8rem; min-height: 20rem; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .nm-v2 .pv-logo:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(18, 17, 28, 0.10); border-color: #d3d8e4; } .nm-v2 .pv-logo__mark { height: 4.4rem; display: flex; align-items: center; margin-bottom: 1.8rem; } .nm-v2 .pv-logo__mark img { max-height: 4.4rem; max-width: 14rem; width: auto; object-fit: contain; } .nm-v2 .pv-logo__name { font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); color: var(--v2-ink); margin: 0 0 0.6rem; } .nm-v2 .pv-logo__desc { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--v2-muted); margin: 0 0 1.8rem; } .nm-v2 .pv-logo__link { margin-top: auto; display: inline-flex; align-items: center; gap: 0.5rem; font-family: "PT Mono", monospace; font-size: 1.25rem; letter-spacing: 0.04em; color: var(--v2-blue); } .nm-v2 .pv-logo__link svg { width: 1.5rem; height: 1.5rem; transition: transform 0.25s ease; } .nm-v2 .pv-logo:hover .pv-logo__link svg { transform: translateX(4px); } .nm-v2 .pv-panel__cta { margin-top: clamp(3rem, 4vw, 4rem); text-align: center; } .nm-v2 .pv-panel__cta .blue-button { display: inline-flex; align-items: center; width: auto; padding: 1.4rem 3.6rem; border-radius: 999px; } /* ========================================================================== 9. RESULTS — three merchant proof cards ========================================================================== */ .nm-v2 .pv-proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; } @media (max-width: 991px) { .nm-v2 .pv-proof { grid-template-columns: 1fr; max-width: 56rem; margin-inline: auto; } } .nm-v2 .pv-proof .pv-card { padding: clamp(2.8rem, 3vw, 3.4rem); } .nm-v2 .pv-proof__merchant { font-family: "PT Mono", monospace; font-size: 1.2rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v2-muted); margin-bottom: 1.8rem; } .nm-v2 .pv-proof__stat { font-family: var(--v2-display); font-weight: 400; font-size: clamp(3.4rem, 4vw, 4.2rem); line-height: 1; letter-spacing: -0.02em; color: var(--v2-ink); background: linear-gradient(90deg, #03369a, #5e93fb); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.8rem; } .nm-v2 .pv-proof__stat-label { font-size: var(--fs-body-sm); line-height: 1.45; color: var(--v2-muted); margin-bottom: 2.2rem; } .nm-v2 .pv-proof__quote { font-size: var(--fs-body); line-height: 1.6; color: var(--v2-ink); border-top: 1px solid var(--v2-line); padding-top: 2.2rem; margin-bottom: 2.2rem; flex: 1 1 auto; } .nm-v2 .pv-proof__link { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: auto; font-family: "PT Mono", monospace; font-size: 1.3rem; color: var(--v2-blue); } .nm-v2 .pv-proof__link svg { width: 1.6rem; height: 1.6rem; transition: transform 0.25s ease; } .nm-v2 .pv-proof .pv-card:hover .pv-proof__link svg { transform: translateX(4px); } /* ========================================================================== 10. APPLY — form + "prefer to talk" aside ========================================================================== */ .nm-v2 .pv-apply__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(3.2rem, 5vw, 6rem); align-items: start; } @media (max-width: 991px) { .nm-v2 .pv-apply__grid { grid-template-columns: 1fr; } } .nm-v2 .pv-apply__aside .pv-eyebrow { color: var(--v2-blue-bright); } .nm-v2 .pv-apply__title { font-family: var(--v2-display); font-weight: 300; font-size: clamp(3rem, 3.8vw, 4rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--v2-ink); margin: 0 0 1.8rem; } .nm-v2 .pv-apply__copy { font-size: var(--fs-lead); line-height: 1.6; color: var(--v2-muted); margin: 0 0 2.8rem; } .nm-v2 .pv-checklist { list-style: none; margin: 0 0 3rem; padding: 0; } .nm-v2 .pv-checklist li { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.2rem 0; border-bottom: 1px solid var(--v2-line); font-size: var(--fs-body); line-height: 1.5; color: var(--v2-ink); } .nm-v2 .pv-checklist li:last-child { border-bottom: 0; } .nm-v2 .pv-checklist svg { flex: 0 0 auto; width: 2rem; height: 2rem; margin-top: 0.1rem; color: var(--v2-blue); } .nm-v2 .pv-apply__talk { display: inline-flex; align-items: center; gap: 0.8rem; font-family: "PT Mono", monospace; font-size: 1.3rem; color: var(--v2-blue); } .nm-v2 .pv-apply__talk svg { width: 1.7rem; height: 1.7rem; } /* Form card — restyled from the old .partner-form-* markup (kept), v2 look */ .nm-v2 .pv-form-card { background: #ffffff; border: 1px solid var(--v2-line); border-radius: 0; padding: clamp(2.8rem, 3.5vw, 4rem); box-shadow: 0 20px 60px rgba(18, 17, 28, 0.07); } .nm-v2 .partner-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 2rem; } .nm-v2 .partner-form-field { display: flex; flex-direction: column; } .nm-v2 .partner-form-field.full-width { grid-column: 1 / -1; } .nm-v2 .partner-form-label { font-size: 1.3rem; font-weight: 500; color: var(--v2-ink); margin-bottom: 0.8rem; } .nm-v2 .partner-form-label .required { color: #ee442e; } .nm-v2 .partner-form-input, .nm-v2 .partner-form-select, .nm-v2 .partner-form-textarea { width: 100%; font-family: "Inter Tight", sans-serif; font-size: 1.5rem; color: var(--v2-ink); background: #f7f8fb; border: 1px solid var(--v2-line); border-radius: 1rem; padding: 1.2rem 1.4rem; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .nm-v2 .partner-form-textarea { min-height: 12rem; resize: vertical; } .nm-v2 .partner-form-input::placeholder, .nm-v2 .partner-form-textarea::placeholder { color: #9aa0ad; } .nm-v2 .partner-form-input:focus, .nm-v2 .partner-form-select:focus, .nm-v2 .partner-form-textarea:focus { outline: 0; border-color: var(--v2-blue-bright); background: #ffffff; box-shadow: 0 0 0 3px rgba(67, 128, 249, 0.14); } .nm-v2 .partner-form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b606b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.4rem center; padding-right: 4rem; cursor: pointer; } .nm-v2 .partner-checkbox-group { display: flex; flex-wrap: wrap; gap: 0.8rem; } .nm-v2 .partner-checkbox-label { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.8rem 1.3rem; border: 1px solid var(--v2-line); border-radius: 999px; font-size: 1.35rem; color: var(--v2-ink); cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; user-select: none; } .nm-v2 .partner-checkbox-label:hover { border-color: #c3cad8; } .nm-v2 .partner-checkbox-label span { font-weight: 400; } .nm-v2 .partner-checkbox-label input { accent-color: var(--v2-blue); width: 1.5rem; height: 1.5rem; } .nm-v2 .partner-checkbox-label:has(input:checked) { border-color: var(--v2-blue-bright); background: rgba(67, 128, 249, 0.08); } .nm-v2 .partner-consent-label { display: flex; gap: 1rem; align-items: flex-start; font-size: 1.35rem; line-height: 1.5; color: var(--v2-muted); } .nm-v2 .partner-consent-label span { font-weight: 400; } .nm-v2 .partner-consent-label input { accent-color: var(--v2-blue); width: 1.6rem; height: 1.6rem; margin-top: 0.2rem; flex: 0 0 auto; } .nm-v2 .pv-form-card .blue-button { width: 100%; border-radius: 999px; padding: 1.5rem 3.2rem; font-size: 1.5rem; } .nm-v2 .partner-form-success { display: none; text-align: center; padding: 2rem 0; } .nm-v2 .partner-form-success.visible { display: block; } .nm-v2 .partner-form-success h3 { font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h2); color: var(--v2-ink); margin: 0 0 1rem; } .nm-v2 .partner-form-success p { font-size: var(--fs-body-lg); color: var(--v2-muted); margin: 0 0 2.4rem; } .nm-v2 .w-form-fail { margin-top: 1.6rem; padding: 1.4rem 1.8rem; border-radius: 1rem; background: #fdecea; color: #b3261e; font-size: 1.4rem; } @media (max-width: 559px) { .nm-v2 .partner-form-grid { grid-template-columns: 1fr; } } /* ========================================================================== 11. TALK — Calendly band ========================================================================== */ .nm-v2 .pv-talk__grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(3rem, 5vw, 5.6rem); align-items: center; } @media (max-width: 991px) { .nm-v2 .pv-talk__grid { grid-template-columns: 1fr; } } .nm-v2 .pv-talk__title { font-family: var(--v2-display); font-weight: 300; font-size: clamp(2.8rem, 3.6vw, 3.8rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--v2-ink); margin: 0 0 1.6rem; } .nm-v2 .pv-talk__copy { font-size: var(--fs-lead); line-height: 1.6; color: var(--v2-muted); margin: 0; } .nm-v2 .pv-talk__embed { background: #ffffff; border: 1px solid var(--v2-line); border-radius: 0; overflow: hidden; box-shadow: 0 20px 60px rgba(18, 17, 28, 0.07); } .nm-v2 .pv-talk__embed .calendly-inline-widget { min-width: 320px; height: 72rem; } @media (max-width: 767px) { .nm-v2 .pv-talk__embed .calendly-inline-widget { height: 90rem; } } /* ========================================================================== 12. FINAL CTA — dark closing band ========================================================================== */ .nm-v2 .pv-final { background: radial-gradient(120% 160% at 50% -30%, #1f2a52 0%, #12111c 60%); color: #f2f4fa; padding: clamp(6rem, 9vw, 9rem) 0; margin-top: clamp(6rem, 10vw, 10rem); text-align: center; } .nm-v2 .pv-final__inner { max-width: 72rem; margin: 0 auto; } .nm-v2 .pv-final__title { font-family: var(--v2-display); font-weight: 300; font-size: clamp(3rem, 4.4vw, 4.8rem); line-height: 1.06; letter-spacing: -0.02em; color: #ffffff; margin: 0 0 1.8rem; } .nm-v2 .pv-final__copy { font-size: var(--fs-lead); line-height: 1.6; color: #b9c0d2; margin: 0 0 3.2rem; } .nm-v2 .pv-final__cta { display: flex; flex-wrap: wrap; gap: 1.4rem; justify-content: center; } .nm-v2 .pv-final .main-btn { background: #ffffff; color: var(--very-dark); } .nm-v2 .pv-final .secondary-btn { border: 1px solid rgba(255, 255, 255, 0.32); color: #fff; background: transparent; } .nm-v2 .pv-final .secondary-btn:hover { border-color: #fff; } /* ========================================================================== 13. Section-title scale used across the page ========================================================================== */ .nm-v2 .pv-section .big-heading-n, .nm-v2 .pv-head .big-heading-n { font-family: var(--v2-display); font-weight: 400; font-size: var(--v2-h2); line-height: 1.08; letter-spacing: -0.015em; color: var(--v2-ink); text-transform: none; } /* ========================================================================== 14. INTEGRATIONS STRIP + DEVELOPER API (ported from homepage css/home-v2.css) Re-scoped .nm-v2 -> .nm-v2 so the partners page picks them up. Sits between the results proof and the apply form. The dev-API typing animation is progressively enhanced by an inline script in partners.html. ========================================================================== */ .nm-v2 .nm-integrations { padding: clamp(5rem, 8vw, 8rem) 0; text-align: center; } .nm-v2 .nm-integrations__head { max-width: 60rem; margin: 0 auto clamp(3rem, 5vw, 4.5rem); } .nm-v2 .nm-integrations__badge { display: inline-block; margin: 0 0 1.8rem; padding: 0.55rem 1.4rem; border: 1px solid var(--v2-line); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(18, 17, 28, 0.05); font-family: "PT Mono", monospace; font-size: 1.15rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--v2-blue); } .nm-v2 .nm-integrations__sub { margin-top: 1.2rem; font-size: 1.7rem; font-weight: 300; line-height: 1.5; color: var(--v2-muted); } /* ---- The flow diagram: hub → wires → marquee ---------------------------- */ .nm-v2 .nm-intflow { position: relative; max-width: 108rem; margin: 0 auto; padding-top: 2rem; } /* Faint blueprint grid behind the hub + wires only, faded toward the edges. Lives on a pseudo-element so its radial mask never touches the logo tiles. */ .nm-v2 .nm-intflow::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 26rem; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(18, 17, 28, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(18, 17, 28, 0.04) 1px, transparent 1px); background-size: 4.4rem 4.4rem; background-position: center top; -webkit-mask-image: radial-gradient(115% 90% at 50% 26%, #000 28%, transparent 72%); mask-image: radial-gradient(115% 90% at 50% 26%, #000 28%, transparent 72%); } /* Central hub */ .nm-v2 .nm-intflow__hub { position: relative; z-index: 3; width: 7.6rem; height: 7.6rem; margin: 0 auto; } .nm-v2 .nm-intflow__core { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(140deg, var(--v2-blue-bright) 0%, var(--v2-blue) 62%, #022a7e 100%); border: 1px solid rgba(67, 128, 249, 0.55); border-radius: 1.4rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(18, 17, 28, 0.04), 0 18px 44px rgba(0, 59, 175, 0.32); } .nm-v2 .nm-intflow__core img { width: 3.6rem; height: auto; } .nm-v2 .nm-intflow__ring { position: absolute; inset: 0; z-index: 1; border-radius: 1.8rem; border: 1px solid rgba(67, 128, 249, 0.5); animation: nm-intflow-ring 3.2s ease-out infinite; } .nm-v2 .nm-intflow__ring--2 { animation-delay: 1.6s; } @keyframes nm-intflow-ring { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.3); } } /* Flow wires */ .nm-v2 .nm-intflow__wires { display: block; width: 100%; height: clamp(7.2rem, 10.8vw, 9.6rem); margin-top: -0.6rem; position: relative; z-index: 1; } .nm-v2 .nm-intflow__wire-base path { stroke: rgba(0, 59, 175, 0.16); } .nm-v2 .nm-intflow__wire-flow path { stroke-dasharray: 80 920; stroke-dashoffset: 0; filter: drop-shadow(0 0 3px rgba(67, 128, 249, 0.6)); animation: nm-intflow-pulse 2.6s linear infinite; animation-delay: var(--d, 0s); } @keyframes nm-intflow-pulse { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1000; } } /* Marquee rows */ .nm-v2 .nm-intflow__rows { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1.6rem; margin-top: -1rem; -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); } .nm-v2 .nm-intflow__row { /* Clip the scrolling track horizontally, but let a hovered tile's lift and shadow spill vertically. `overflow: hidden` cropped both axes; `clip visible` clips only the X axis and leaves Y visible (no forced auto/scroll). The `hidden` line is a fallback for engines without the `clip` keyword. */ overflow: hidden; overflow: clip visible; } .nm-v2 .nm-intflow__track { display: flex; width: max-content; will-change: transform; } /* Spacing lives on each tile (margin-right) rather than a flex `gap` on the track. This is what makes the loop truly seamless: every tile occupies a uniform `tile + gap` unit, so the two identical sets are each exactly half the track and translateX(-50%) lands pixel-perfectly on the duplicate — no half-gap drift, no visible "end of list" at the loop reset. */ .nm-v2 .nm-intflow__row--a .nm-intflow__track { animation: nm-intflow-marquee 42s linear infinite; } @keyframes nm-intflow-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .nm-v2 .nm-intflow__tile { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 9rem; height: 9rem; margin-right: 1.6rem; background: #fff; border: 1px solid var(--v2-line); border-radius: 1.4rem; box-shadow: 0 1px 2px rgba(18, 17, 28, 0.05); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .nm-v2 .nm-intflow__tile:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(18, 17, 28, 0.10); border-color: rgba(0, 59, 175, 0.28); } .nm-v2 .nm-intflow__tile img { width: 4.6rem; height: 4.6rem; object-fit: contain; } @media (max-width: 575px) { .nm-v2 .nm-intflow__tile { width: 7.4rem; height: 7.4rem; border-radius: 1.2rem; } .nm-v2 .nm-intflow__tile img { width: 3.8rem; height: 3.8rem; } .nm-v2 .nm-intflow__rows { gap: 1.2rem; } } @media (prefers-reduced-motion: reduce) { .nm-v2 .nm-intflow__track, .nm-v2 .nm-intflow__wire-flow path, .nm-v2 .nm-intflow__ring { animation: none; } .nm-v2 .nm-intflow__ring { opacity: 0; } } /* Full-bleed two-tone split (edge to edge on any screen width). */ .nm-v2 .nm-devapi { padding: 0; } .nm-v2 .nm-devapi__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; } /* Left half — full-bleed blue panel holding the code window */ .nm-v2 .nm-devapi__visual { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; padding: clamp(4rem, 6vw, 8rem) clamp(2rem, 5vw, 7rem); background: radial-gradient(60% 70% at 32% 24%, rgba(67, 128, 249, 0.32), rgba(67, 128, 249, 0) 70%), linear-gradient(135deg, #c8d6ff 0%, #eef2ff 100%); } .nm-v2 .nm-devapi__glow { display: none; } /* Right half — full-bleed light panel holding the copy */ .nm-v2 .nm-devapi__copy { display: flex; align-items: center; background: #f4f5f8; padding: clamp(4rem, 6vw, 8rem) clamp(2.4rem, 6vw, 9rem); } .nm-v2 .nm-devapi__copy-inner { width: 100%; max-width: 52rem; } .nm-v2 .nm-devapi__window { position: relative; z-index: 1; width: 100%; max-width: 56rem; margin: 0; background: #14131d; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.2rem; box-shadow: 0 30px 60px rgba(18, 17, 28, 0.28); overflow: visible; } .nm-v2 .nm-devapi__bar { display: flex; align-items: center; gap: 0.7rem; padding: 1.1rem 1.4rem; background: #1c1b27; border-bottom: 1px solid rgba(255, 255, 255, 0.06); border-top-left-radius: 1.2rem; border-top-right-radius: 1.2rem; } .nm-v2 .nm-devapi__dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #3a3a48; } .nm-v2 .nm-devapi__dot:nth-child(1) { background: #ff5f57; } .nm-v2 .nm-devapi__dot:nth-child(2) { background: #febc2e; } .nm-v2 .nm-devapi__dot:nth-child(3) { background: #28c840; } .nm-v2 .nm-devapi__file { margin-left: 0.6rem; font-family: "PT Mono", monospace; font-size: 1.2rem; color: rgba(255, 255, 255, 0.5); } .nm-v2 .nm-devapi__code { margin: 0; padding: clamp(1.6rem, 2.2vw, 2.4rem); font-family: "PT Mono", ui-monospace, monospace; font-size: clamp(1.2rem, 1.15vw, 1.4rem); line-height: 1.7; color: #d7d8e2; overflow-x: auto; white-space: normal; } .nm-v2 .nm-devapi__code .tok-key { color: #7aa2ff; } .nm-v2 .nm-devapi__code .tok-str { color: #7fe0b6; } .nm-v2 .nm-devapi__code .tok-com { color: #6b6b7d; font-style: italic; } .nm-v2 .nm-devapi__code .tok-fn { color: #fbbf24; } .nm-v2 .nm-devapi__code .tok-cst { color: #c9a6ff; } .nm-v2 .nm-devapi__event { position: absolute; z-index: 3; right: clamp(-1.4rem, -0.6vw, -0.6rem); bottom: clamp(1.4rem, 2.5vw, 2.4rem); display: flex; align-items: center; gap: 1rem; max-width: 27rem; padding: 1.1rem 1.4rem; background: #fff; border: 1px solid var(--v2-line); border-radius: 1rem; box-shadow: 0 18px 40px rgba(18, 17, 28, 0.18); } .nm-v2 .nm-devapi__event-ico { flex: none; width: 3.4rem; height: 3.4rem; border-radius: 0.9rem; background: var(--v2-blue); display: flex; align-items: center; justify-content: center; } .nm-v2 .nm-devapi__event-ico img { width: 2rem; height: 2rem; } .nm-v2 .nm-devapi__event-title { display: block; font-weight: 500; font-size: 1.4rem; color: var(--v2-ink); } .nm-v2 .nm-devapi__event-meta { display: block; font-size: 1.2rem; color: var(--v2-muted); } .nm-v2 .nm-devapi__event-pulse { flex: none; margin-left: auto; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: #28c840; box-shadow: 0 0 0 0 rgba(40, 200, 64, 0.5); animation: nm-devapi-pulse 2s infinite; } @keyframes nm-devapi-pulse { 0% { box-shadow: 0 0 0 0 rgba(40, 200, 64, 0.5); } 70% { box-shadow: 0 0 0 0.8rem rgba(40, 200, 64, 0); } 100% { box-shadow: 0 0 0 0 rgba(40, 200, 64, 0); } } /* Right copy */ .nm-v2 .nm-devapi__eyebrow { font-family: "PT Mono", monospace; font-size: 1.2rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v2-blue); margin: 0 0 1.4rem; } .nm-v2 .nm-devapi__title { margin: 0; text-align: left; } .nm-v2 .nm-devapi__lede { margin: 1.8rem 0 0; font-size: 1.7rem; font-weight: 300; line-height: 1.6; color: var(--v2-muted); max-width: 46rem; } .nm-v2 .nm-devapi__feats { list-style: none; margin: 2.4rem 0 0; padding: 0; display: grid; gap: 1.1rem; } .nm-v2 .nm-devapi__feats li { font-size: 1.5rem; line-height: 1.4; color: var(--v2-ink); } .nm-v2 .nm-devapi__feat-k { display: inline-block; margin-right: 0.8rem; padding: 0.3rem 1rem; font-family: "PT Mono", monospace; font-size: 1.15rem; letter-spacing: 0.04em; color: var(--v2-blue); background: rgba(0, 59, 175, 0.07); border: 1px solid rgba(0, 59, 175, 0.16); border-radius: 999px; } .nm-v2 .nm-devapi__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.8rem; } @media (prefers-reduced-motion: reduce) { .nm-v2 .nm-devapi__event-pulse { animation: none; } } @media (max-width: 991px) { .nm-v2 .nm-devapi__inner { grid-template-columns: 1fr; gap: 0; } /* Grid items default to min-width:auto, so the code window's unbreakable content refuses to shrink below its intrinsic width and pushes the column ~21px past the viewport (the page's horizontal-scroll bug). Let them shrink. */ .nm-v2 .nm-devapi__visual, .nm-v2 .nm-devapi__copy { min-width: 0; } .nm-v2 .nm-devapi__window { max-width: 100%; } .nm-v2 .nm-devapi__copy { order: -1; } .nm-v2 .nm-devapi__copy-inner { max-width: 56rem; margin: 0 auto; } } @media (max-width: 575px) { .nm-v2 .nm-devapi__event { position: static; max-width: none; margin: 1.2rem 1.2rem 0; } } /* ---- Dev-API: "writing code → webhook arrives" animation ----------------- Reveal is gated by .anim-ready (added by JS only when motion is allowed), so with JS off or reduced-motion the section renders fully visible. */ .nm-v2 .nm-devapi__code .ln { display: block; white-space: pre; } .nm-v2 .nm-devapi__code .ln:empty { height: 1.1em; } .nm-v2 .nm-devapi__caret { display: none; width: 0.55ch; height: 1.05em; margin-left: 1px; vertical-align: -0.18em; background: #7aa2ff; } .nm-v2 .nm-devapi.anim-ready .nm-devapi__caret { display: inline-block; animation: nm-caret 1s steps(1) infinite; } @keyframes nm-caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } .nm-v2 .nm-devapi.anim-ready .nm-devapi__code .ln { opacity: 0; transform: translateY(2px); transition: opacity 0.2s ease, transform 0.2s ease; } .nm-v2 .nm-devapi.anim-ready .nm-devapi__code .ln.is-in { opacity: 1; transform: none; } .nm-v2 .nm-devapi.anim-ready .nm-devapi__event { opacity: 0; transform: translateY(16px) scale(0.97); transition: opacity 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); } .nm-v2 .nm-devapi.anim-ready .nm-devapi__event.is-in { opacity: 1; transform: translateY(0) scale(1); } /* Recharge-style inline doc link (replaces the filled button here) */ .nm-v2 .nm-devapi__doclink { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 2.8rem; font-weight: 500; font-size: 1.7rem; color: var(--v2-blue); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 0.5rem; } .nm-v2 .nm-devapi__doclink svg { transition: transform 0.2s ease; } .nm-v2 .nm-devapi__doclink:hover svg { transform: translateX(4px); } /* ========================================================================== 15. SECTION BACKGROUND RHYTHM — light / wash / dark / cream contrast Dark and cream full-bleed bands take their inter-section gap as the section's own padding (they are opaque), and neighbours are opaque too, so no margin trick is needed here — the colour change itself reads as the seam. ========================================================================== */ .nm-v2 .pv-section--dark { background: radial-gradient(120% 150% at 50% -20%, #1f2a52 0%, #12111c 60%); color: #eef1f8; } .nm-v2 .pv-section--cream { background: #f9f7e5; } /* Dark-context text: eyebrow, headings, subs, links flip to light. */ .nm-v2 .pv-section--dark .pv-eyebrow { color: #9db6ff; } .nm-v2 .pv-section--dark .big-heading-n, .nm-v2 .pv-section--dark .pv-head .big-heading-n { color: #ffffff; } .nm-v2 .pv-section--dark .pv-head__sub { color: #b4bcd0; } .nm-v2 .pv-section--dark .pv-head__sub strong { color: #ffffff; } /* ========================================================================== 16. ZIGZAG — "three ways to partner" as alternating editorial rows ========================================================================== */ .nm-v2 .pv-zig { display: flex; flex-direction: column; gap: clamp(4rem, 6vw, 7.5rem); } .nm-v2 .pv-zig__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 5vw, 6rem); align-items: center; } /* Alternate sides: even rows put the visual on the left. */ .nm-v2 .pv-zig__row:nth-child(even) .pv-zig__copy { order: 2; } .nm-v2 .pv-zig__row:nth-child(even) .pv-zig__visual { order: 1; } .nm-v2 .pv-zig__num { font-family: "PT Mono", monospace; font-size: 1.3rem; letter-spacing: 0.14em; color: var(--v2-blue-bright); margin-bottom: 1.4rem; } .nm-v2 .pv-zig__title { font-family: var(--v2-display); font-weight: 400; font-size: clamp(2.6rem, 3.4vw, 3.6rem); line-height: 1.08; letter-spacing: -0.015em; color: var(--v2-ink); margin: 0 0 1.2rem; } .nm-v2 .pv-zig__text { font-size: var(--fs-lead); line-height: 1.55; color: var(--v2-muted); margin: 0 0 2.2rem; max-width: 40rem; } .nm-v2 .pv-zig__link { display: inline-flex; align-items: center; gap: 0.6rem; font-family: "PT Mono", monospace; font-size: 1.3rem; color: var(--v2-blue); text-decoration: none; } .nm-v2 .pv-zig__link svg { width: 1.6rem; height: 1.6rem; transition: transform 0.25s ease; } .nm-v2 .pv-zig__link:hover svg { transform: translateX(4px); } /* Visual scene — gradient panel + glyph tile + two floating chips. */ .nm-v2 .pv-scene { position: relative; aspect-ratio: 5 / 4; border: 1px solid var(--v2-line); border-radius: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 50px rgba(18, 17, 28, 0.07); } .nm-v2 .pv-scene--a { background: radial-gradient(110% 110% at 28% 18%, #e7eeff 0%, #f3f6fc 62%); } .nm-v2 .pv-scene--b { background: radial-gradient(110% 110% at 72% 18%, #efe9ff 0%, #f4f3fb 62%); } .nm-v2 .pv-scene--c { background: radial-gradient(110% 110% at 30% 82%, #eafaf1 0%, #f4f8f2 62%); } .nm-v2 .pv-scene__glyph { width: clamp(8rem, 12vw, 11rem); height: clamp(8rem, 12vw, 11rem); border-radius: 2.4rem; background: #ffffff; box-shadow: 0 14px 34px rgba(18, 17, 28, 0.12); display: flex; align-items: center; justify-content: center; } .nm-v2 .pv-scene__glyph svg { width: 46%; height: 46%; } .nm-v2 .pv-scene--a .pv-scene__glyph { color: #003baf; } .nm-v2 .pv-scene--b .pv-scene__glyph { color: #6d28d9; } .nm-v2 .pv-scene--c .pv-scene__glyph { color: #0e9f6e; } .nm-v2 .pv-chip { position: absolute; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.75rem 1.25rem; border-radius: 999px; background: #ffffff; box-shadow: 0 8px 22px rgba(18, 17, 28, 0.12); font-family: "PT Mono", monospace; font-size: 1.15rem; letter-spacing: 0.02em; color: var(--v2-ink); white-space: nowrap; } .nm-v2 .pv-chip b { color: var(--v2-blue); font-weight: 500; } .nm-v2 .pv-chip--tl { top: 11%; left: 7%; } .nm-v2 .pv-chip--br { bottom: 11%; right: 7%; } .nm-v2 .pv-chip__dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #0e9f6e; } @media (max-width: 767px) { .nm-v2 .pv-zig__row { grid-template-columns: 1fr; gap: 2.4rem; } /* Mobile: stack EVERY row the same way — image (visual) first, then the copy block (title / description / button). Include the :nth-child(even) selectors so this overrides the desktop side-swap above at matching specificity (they sit later in the source, so they win). */ .nm-v2 .pv-zig__row .pv-zig__visual, .nm-v2 .pv-zig__row:nth-child(even) .pv-zig__visual { order: -1; } .nm-v2 .pv-zig__row .pv-zig__copy, .nm-v2 .pv-zig__row:nth-child(even) .pv-zig__copy { order: 0; } } /* ========================================================================== 17. BENTO — "why partner" + the economics, as one asymmetric grid ========================================================================== */ .nm-v2 .pv-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(20rem, 1fr)); gap: 2rem; } .nm-v2 .pv-bento__feature { grid-column: 1 / 3; grid-row: 1 / 3; background: radial-gradient(120% 130% at 20% 0%, #223061 0%, #12111c 62%); color: #fff; padding: clamp(3rem, 3.4vw, 4rem); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; } .nm-v2 .pv-bento__feature .pv-eyebrow { color: #ffd27a; } .nm-v2 .pv-bento__feature-title { font-family: var(--v2-display); font-weight: 300; font-size: clamp(2.4rem, 2.9vw, 3.2rem); line-height: 1.1; letter-spacing: -0.015em; color: #fff; margin: 0.4rem 0 0; } .nm-v2 .pv-bento__figures { display: flex; gap: clamp(1.6rem, 2.4vw, 3rem); margin-top: clamp(2.4rem, 3vw, 3.4rem); flex-wrap: wrap; } .nm-v2 .pv-bento__fig-num { font-family: var(--v2-display); font-weight: 400; font-size: clamp(3rem, 3.6vw, 4rem); line-height: 1; letter-spacing: -0.02em; color: #ffd27a; } .nm-v2 .pv-bento__fig-label { margin-top: 0.6rem; font-size: var(--fs-caption); line-height: 1.35; color: #b4bcd0; } .nm-v2 .pv-bento__cell { background: #fff; border: 1px solid var(--v2-line); padding: clamp(2.2rem, 2.6vw, 2.8rem); display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(18, 17, 28, 0.04); transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .nm-v2 .pv-bento__cell:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(18, 17, 28, 0.10); border-color: #d3d8e4; } .nm-v2 .pv-bento__cell--wide { grid-column: 3 / 5; grid-row: 2 / 3; } .nm-v2 .pv-bento__cell .pv-ico { width: 4rem; height: 4rem; border-radius: 1.1rem; margin-bottom: 1.4rem; } .nm-v2 .pv-bento__cell .pv-ico svg { width: 2rem; height: 2rem; } .nm-v2 .pv-bento__cell-title { font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); color: var(--v2-ink); margin: 0 0 0.6rem; } .nm-v2 .pv-bento__cell-text { font-size: var(--fs-body-sm); line-height: 1.5; color: var(--v2-muted); margin: 0; } @media (max-width: 860px) { .nm-v2 .pv-bento { grid-template-columns: 1fr 1fr; grid-template-rows: none; } .nm-v2 .pv-bento__feature { grid-column: 1 / 3; grid-row: auto; } .nm-v2 .pv-bento__cell--wide { grid-column: 1 / 3; grid-row: auto; } } @media (max-width: 519px) { .nm-v2 .pv-bento { grid-template-columns: 1fr; } .nm-v2 .pv-bento__feature, .nm-v2 .pv-bento__cell--wide { grid-column: auto; } } /* ========================================================================== 18. SPOTLIGHT — results as one featured proof + two compact cards (on cream) ========================================================================== */ .nm-v2 .pv-spot { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.4rem; align-items: stretch; } .nm-v2 .pv-spot__feature { background: #fff; border: 1px solid #ebe6cd; padding: clamp(3rem, 4vw, 4.4rem); display: flex; flex-direction: column; text-decoration: none; box-shadow: 0 20px 50px rgba(120, 110, 60, 0.10); } .nm-v2 .pv-spot__merchant { font-family: "PT Mono", monospace; font-size: 1.2rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v2-muted); margin-bottom: 2rem; } .nm-v2 .pv-spot__quote { font-family: var(--v2-display); font-weight: 300; font-size: var(--fs-quote); line-height: 1.3; letter-spacing: -0.01em; color: var(--v2-ink); margin: 0 0 auto; } .nm-v2 .pv-spot__author { margin-top: 2.4rem; font-size: var(--fs-body-sm); color: var(--v2-muted); } .nm-v2 .pv-spot__author b { color: var(--v2-ink); font-weight: 500; } .nm-v2 .pv-spot__stats { display: flex; gap: clamp(2rem, 3vw, 3.4rem); margin-top: 2.8rem; padding-top: 2.8rem; border-top: 1px solid #ebe6cd; } .nm-v2 .pv-spot__stat-num { font-family: var(--v2-display); font-weight: 400; font-size: clamp(2.6rem, 3vw, 3.2rem); line-height: 1; letter-spacing: -0.02em; background: linear-gradient(90deg, #03369a, #5e93fb); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .nm-v2 .pv-spot__stat-label { margin-top: 0.5rem; font-size: var(--fs-caption); color: var(--v2-muted); line-height: 1.3; } .nm-v2 .pv-spot__side { display: flex; flex-direction: column; gap: 2.4rem; } .nm-v2 .pv-spot__card { background: #fff; border: 1px solid #ebe6cd; padding: clamp(2.4rem, 2.8vw, 3rem); display: flex; flex-direction: column; flex: 1; text-decoration: none; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease; } .nm-v2 .pv-spot__card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(120, 110, 60, 0.12); } .nm-v2 .pv-spot__card .pv-spot__merchant { margin-bottom: 1.2rem; } .nm-v2 .pv-spot__card-num { font-family: var(--v2-display); font-weight: 400; font-size: clamp(2.8rem, 3.2vw, 3.4rem); line-height: 1; letter-spacing: -0.02em; color: var(--v2-ink); background: linear-gradient(90deg, #03369a, #5e93fb); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.6rem; } .nm-v2 .pv-spot__card-label { font-size: var(--fs-body-sm); color: var(--v2-muted); line-height: 1.4; margin: 0 0 auto; } .nm-v2 .pv-spot__card-link { margin-top: 1.8rem; display: inline-flex; align-items: center; gap: 0.5rem; font-family: "PT Mono", monospace; font-size: 1.2rem; color: var(--v2-blue); } .nm-v2 .pv-spot__card-link svg { width: 1.5rem; height: 1.5rem; transition: transform 0.25s ease; } .nm-v2 .pv-spot__card:hover .pv-spot__card-link svg { transform: translateX(4px); } @media (max-width: 860px) { .nm-v2 .pv-spot { grid-template-columns: 1fr; } .nm-v2 .pv-spot__side { flex-direction: row; } } @media (max-width: 559px) { .nm-v2 .pv-spot__side { flex-direction: column; } } /* ========================================================================== 19. Dark-context overrides for the MEET-PARTNERS tabs when on a dark band ========================================================================== */ .nm-v2 .pv-section--dark .pv-tabs { background: rgba(255,255,255,0.07); } .nm-v2 .pv-section--dark .pv-tab { color: #c4c8d4; } .nm-v2 .pv-section--dark .pv-tab:hover { color: #fff; } .nm-v2 .pv-section--dark .pv-tab.is-active { background: #fff; color: var(--v2-ink); } /* Dark DEV-API — override its own two-tone light split to a full dark band. */ .nm-v2 .nm-devapi.pv-section--dark { padding: 0; } .nm-v2 .nm-devapi.pv-section--dark .nm-devapi__visual { background: radial-gradient(60% 70% at 32% 24%, rgba(67, 128, 249, 0.30), rgba(67, 128, 249, 0) 70%), linear-gradient(135deg, #1b2749 0%, #12111c 100%); } .nm-v2 .nm-devapi.pv-section--dark .nm-devapi__copy { background: #12111c; } .nm-v2 .nm-devapi.pv-section--dark .nm-devapi__title { color: #ffffff; } .nm-v2 .nm-devapi.pv-section--dark .nm-devapi__lede { color: #b4bcd0; } .nm-v2 .nm-devapi.pv-section--dark .nm-devapi__eyebrow { color: #9db6ff; } .nm-v2 .nm-devapi.pv-section--dark .nm-devapi__doclink { color: #9db6ff; }