/* ========================================================================== affiliate-v2.css — page layer for /affiliate-program -------------------------------------------------------------------------- Scoped to `.nm-af` on , loaded AFTER site-v2.css. Consumes the shared v2 tokens (site-v2.css §1) and declares no colours or type sizes of its own beyond composition values. Modelled on tech-partners-v2.css — the closest sibling (the other partnership landing page) — so the two read as one system. Rhythm is NOT set here. Every section reuses a shell the shared layer already owns (`.shopify-first-sec`, `.section.pad-layout`, `.bg-light`, `.bg-dark-wrapper`, `.qoute-box-section`, `.pricing-hero-faq`, `.nm-final-cta`), so site-v2.css §6 keeps owning the vertical gaps: plain sections take `padding-top`, bands take transparent `margin-top` plus their own `--v2-band-pad`. No new section class is introduced, deliberately — a new shell would have to be added to two allowlists to get any spacing. The hero keeps `.shopify-first-sec` because that class is load-bearing in two places: site-v2.css §10 (full-fold 100svh, nav clearance as padding, room reserved for the pinned trust bar) and js/nav-overlay.js's selector list. Only the INSIDE of the hero is relaid out here. Radius follows DESIGN-SYSTEM.md "sharp shell, curved interior": outer cells, panels and section shells are square; everything nested inside them takes `--v2-radius-inner`, a pill, or a circle. Eyebrows reuse `.badge-hero` — the ONE canonical label treatment registered in site-v2.css §12. Buttons reuse the site's pill classes; their single canonical hover (scale) lives in site-v2.css §4 and is never restated here. ========================================================================== */ .nm-af { --af-gap: clamp(1.6rem, 1.6vw, 2.4rem); --af-cell-pad: clamp(2.4rem, 2.4vw, 3.2rem); --af-hairline: var(--v2-line); --af-hairline-dark: rgba(254, 254, 252, 0.14); --af-on-dark: rgba(254, 254, 252, 0.72); --af-on-dark-dim: rgba(254, 254, 252, 0.5); --af-green: #5fd0a6; } /* Smooth scrolling for the hero's #how-it-works anchor. It has to sit on the ROOT element — the viewport's scrolling box reads `scroll-behavior` from , not — so the page is selected with :has() rather than declaring it unscoped and changing every other page on the site. */ :root:has(body.nm-af) { scroll-behavior: smooth; } /* The navbar is fixed, so an anchor target must clear it or it lands underneath. */ .nm-af #how-it-works { scroll-margin-top: var(--nm-nav-h); } ::selection { background: rgba(0, 59, 175, 0.15); color: inherit; } /* Left-aligned eyebrows drop the leading hairline — a rule before a flush-left block reads as an indent (same call site-v2.css §12 makes for hero eyebrows). */ .nm-af .nm-af-hero__copy .badge-hero:before, .nm-af .nm-af-earn__copy .badge-hero:before, .nm-af .nm-af-tracks__copy .badge-hero:before { display: none; } /* Centred section intro, shared by every section that has one */ .nm-af .nm-af-intro { max-width: 78rem; margin-bottom: clamp(4rem, 5vw, 6rem); } .nm-af .nm-af-intro .badge-hero { margin-bottom: 1.6rem; } .nm-af .nm-af-intro .big-heading-n { margin-bottom: 1.6rem; } .nm-af .nm-af-lead { margin: 0; font-size: var(--fs-lead); font-weight: 300; line-height: var(--lh-lead); color: var(--v2-muted); } .nm-af .bg-dark-wrapper .nm-af-lead { color: var(--af-on-dark); } /* One shared link affordance for the whole page: mono, uppercase, arrow. Not a button — buttons here are the site's own pill classes. */ .nm-af .nm-af-link { display: inline-flex; align-items: center; gap: 0.6rem; font-family: "PT Mono", monospace; font-size: var(--fs-caption); letter-spacing: 0.06em; text-transform: uppercase; color: var(--v2-blue); text-decoration: none; transition: color 0.2s ease; } .nm-af .nm-af-link:after { content: "\2192"; transition: transform 0.2s ease; } .nm-af .nm-af-link:hover { color: var(--v2-blue-bright); } .nm-af .nm-af-link:hover:after { transform: translateX(3px); } .nm-af .bg-dark-wrapper .nm-af-link, .nm-af .nm-af-hero .nm-af-link { color: var(--_apps---colors--secondary); } /* A caption that marks illustrative figures as illustrative. Used under the two panels that do arithmetic on the published "up to $1,000" rate — the numbers are a worked example, and the page has to say so. */ .nm-af .nm-af-note { margin: 1.6rem 0 0; font-size: var(--fs-caption); line-height: 1.5; color: var(--v2-muted); } .nm-af .nm-af-hero .nm-af-note { color: var(--af-on-dark-dim); } .nm-af .nm-af-note a { color: inherit; text-decoration: underline; text-underline-offset: 0.3em; } /* ========================================================================== 1. HERO — the offer, the proof, and the payout ledger ========================================================================== */ .nm-af .nm-af-hero { flex-flow: row; align-items: center; justify-content: space-between; grid-column-gap: clamp(4rem, 6vw, 9rem); background-image: radial-gradient(ellipse 60% 50% at 20% 24%, rgba(67, 128, 249, 0.16) 0%, transparent 68%), radial-gradient(ellipse 46% 46% at 88% 76%, rgba(95, 208, 166, 0.07) 0%, transparent 62%); overflow: hidden; } /* A hairline that closes the fold, same idiom as the other v2 dark heroes. */ .nm-af .nm-af-hero:after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(67, 128, 249, 0.28), transparent); } .nm-af .nm-af-hero__copy { z-index: 2; position: relative; flex: 1 1 50%; max-width: 64rem; text-align: left; } .nm-af .nm-af-hero__copy .badge-hero { margin-bottom: 2rem; } .nm-af .nm-af-hero__copy .big-heading-n { margin: 0 0 2.4rem; text-align: left; } .nm-af .nm-af-hero__sub { max-width: 56rem; margin: 0; font-size: var(--fs-lead); font-weight: 300; line-height: var(--lh-lead); color: var(--af-on-dark); } .nm-af .nm-af-hero__btns { display: flex; flex-wrap: wrap; grid-column-gap: 1.2rem; grid-row-gap: 1.2rem; margin-top: 3.2rem; } /* ---- The payout ledger (the hero's signature visual) --------------------- Decorative and `aria-hidden`: it is a worked example of what a month of referral commission looks like, not live data. */ .nm-af .nm-af-ledger { z-index: 2; flex: 0 1 46rem; position: relative; max-width: 46rem; } .nm-af .nm-af-ledger__glow { position: absolute; inset: -16% -10% -10%; background: radial-gradient(58% 54% at 60% 34%, rgba(67, 128, 249, 0.4), rgba(67, 128, 249, 0) 70%); filter: blur(0.6rem); pointer-events: none; } .nm-af .nm-af-ledger__panel { position: relative; border: 1px solid rgba(254, 254, 252, 0.12); border-radius: var(--v2-radius-inner); background: linear-gradient(180deg, rgba(39, 38, 50, 0.94), rgba(18, 17, 28, 0.94)); box-shadow: 0 3.2rem 8rem rgba(0, 0, 0, 0.45); backdrop-filter: blur(0.8rem); overflow: hidden; } .nm-af .nm-af-ledger__bar { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; padding: 1.8rem 2.4rem; border-bottom: 1px solid rgba(254, 254, 252, 0.09); } .nm-af .nm-af-ledger__title { font-size: var(--fs-body-sm); color: rgba(254, 254, 252, 0.92); } .nm-af .nm-af-ledger__tag { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.3rem 1rem; border-radius: 999px; background: rgba(67, 128, 249, 0.16); font-family: "PT Mono", monospace; font-size: var(--fs-caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--_apps---colors--secondary); } .nm-af .nm-af-ledger__tag i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--af-green); animation: nmAfPulse 2.4s ease-in-out infinite; } @keyframes nmAfPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .nm-af .nm-af-ledger__rows { display: grid; } .nm-af .nm-af-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; padding: 1.5rem 2.4rem; animation: nmAfRowIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .nm-af .nm-af-row + .nm-af-row { border-top: 1px solid rgba(254, 254, 252, 0.07); } .nm-af .nm-af-row:nth-child(2) { animation-delay: 0.12s; } .nm-af .nm-af-row:nth-child(3) { animation-delay: 0.24s; } .nm-af .nm-af-row:nth-child(4) { animation-delay: 0.36s; } @keyframes nmAfRowIn { from { opacity: 0; transform: translateY(0.8rem); } to { opacity: 1; transform: none; } } .nm-af .nm-af-row__dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--v2-blue-bright); box-shadow: 0 0 0 0.4rem rgba(67, 128, 249, 0.14); } .nm-af .nm-af-row--paid .nm-af-row__dot { background: var(--af-green); box-shadow: 0 0 0 0.4rem rgba(95, 208, 166, 0.14); } .nm-af .nm-af-row__store { min-width: 0; font-size: var(--fs-body-sm); color: rgba(254, 254, 252, 0.86); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nm-af .nm-af-row__plan { display: block; margin-top: 0.2rem; font-family: "PT Mono", monospace; font-size: var(--fs-caption); color: var(--af-on-dark-dim); } .nm-af .nm-af-row__amount { font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); letter-spacing: var(--tr-heading); white-space: nowrap; color: #fefefc; } .nm-af .nm-af-ledger__foot { border-top: 1px solid rgba(254, 254, 252, 0.09); } .nm-af .nm-af-ledger__stat { padding: 1.8rem 2.4rem; } .nm-af .nm-af-ledger__stat-num { display: block; font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h3); color: #fefefc; } .nm-af .nm-af-ledger__stat-lbl { display: block; margin-top: 0.4rem; font-size: var(--fs-caption); color: var(--af-on-dark-dim); } /* ========================================================================== 2. HOW IT WORKS — three steps on a rail ========================================================================== */ .nm-af .nm-af-rail { width: 100%; } .nm-af .nm-af-rail__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--af-gap); } .nm-af .nm-af-node { /* The rail sits on a tinted band where --v2-line all but disappears — it is a hairline tuned for white. This one is a touch darker so the connection between the three dots actually reads. */ --af-rail: rgba(18, 17, 28, 0.14); position: relative; display: flex; flex-direction: column; min-width: 0; padding-top: 3.6rem; } /* The rail itself: a hairline through the dots, dimming after the last node. */ .nm-af .nm-af-node:before { content: ""; position: absolute; top: 0.7rem; left: 1.6rem; right: calc(var(--af-gap) * -1); height: 1px; background: var(--af-rail); } .nm-af .nm-af-node:last-child:before { right: 0; background: linear-gradient(90deg, var(--af-rail), transparent); } .nm-af .nm-af-node:after { content: ""; position: absolute; top: 0; left: 0; width: 1.5rem; height: 1.5rem; border: 1px solid var(--v2-blue); border-radius: 50%; background: #fff; } .nm-af .nm-af-node--live:after { background: var(--v2-blue); box-shadow: 0 0 0 0.5rem rgba(0, 59, 175, 0.1); } .nm-af .nm-af-node__num { display: block; margin-bottom: 1rem; font-family: "PT Mono", monospace; font-size: var(--fs-caption); letter-spacing: 0.12em; color: var(--v2-blue); } .nm-af .nm-af-node__title { margin: 0 0 1rem; font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); color: var(--_apps---colors--foreground); } .nm-af .nm-af-node p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--v2-muted); } .nm-af .nm-af-node .nm-af-link { margin-top: auto; padding-top: 2rem; } /* The facts about the mechanics — a mono chip row under the rail. */ .nm-af .nm-af-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; width: 100%; margin-top: clamp(4rem, 5vw, 5.6rem); padding-top: clamp(3.2rem, 4vw, 4rem); border-top: 1px solid var(--af-hairline); } .nm-af .nm-af-facts__label { margin-right: 0.8rem; font-size: var(--fs-caption); color: var(--v2-muted); } .nm-af .nm-af-facts code { padding: 0.5rem 1.2rem; border: 1px solid var(--af-hairline); border-radius: 999px; background: #fff; font-family: "PT Mono", monospace; font-size: var(--fs-caption); color: var(--_apps---colors--foreground); } /* ========================================================================== 3. EARNINGS — the money section: copy + two benefit cards + the maths panel ========================================================================== */ .nm-af .nm-af-earn__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(4rem, 6vw, 8rem); width: 100%; } .nm-af .nm-af-earn__copy .badge-hero { margin-bottom: 1.6rem; } .nm-af .nm-af-earn__copy .big-heading-n { margin: 0 0 1.6rem; text-align: left; } .nm-af .nm-af-earn__cards { display: grid; gap: var(--af-gap); margin-top: clamp(3.2rem, 4vw, 4rem); } .nm-af .nm-af-benefit { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 2rem; padding: var(--af-cell-pad); border: 1px solid var(--af-hairline); background: var(--web-white); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .nm-af .nm-af-benefit:hover { transform: translateY(-4px); border-color: rgba(67, 128, 249, 0.35); box-shadow: 0 1.6rem 4rem rgba(18, 17, 28, 0.07); } .nm-af .nm-af-benefit__icon { width: 4.8rem; height: 4.8rem; border-radius: var(--v2-radius-inner); background: #f4f5f8; object-fit: contain; padding: 1rem; } .nm-af .nm-af-benefit__title { margin: 0 0 0.8rem; font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); color: var(--_apps---colors--foreground); } .nm-af .nm-af-benefit p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--v2-muted); } .nm-af .nm-af-benefit p a { color: var(--v2-blue); text-decoration: underline; text-underline-offset: 0.3em; } /* ---- The maths panel: what N referrals add up to ------------------------- */ /* The note is a sibling of the panel, not a child — inside the card it read as an unpadded last row of the table. */ .nm-af .nm-af-earn__grid > .nm-af-note { grid-column: 2; } .nm-af .nm-af-calc { position: sticky; top: calc(var(--nm-nav-h) + 3rem); border: 1px solid var(--af-hairline); background: #fff; box-shadow: 0 2.4rem 6rem rgba(18, 17, 28, 0.07); } .nm-af .nm-af-calc__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 1.6rem; padding: 2rem var(--af-cell-pad); border-bottom: 1px solid var(--af-hairline); } .nm-af .nm-af-calc__title { font-family: "PT Mono", monospace; font-size: var(--fs-caption); letter-spacing: 0.14em; text-transform: uppercase; color: var(--v2-muted); } .nm-af .nm-af-calc__rate { font-size: var(--fs-caption); color: var(--v2-muted); } .nm-af .nm-af-calc__rows { padding: 0.8rem 0; } .nm-af .nm-af-tier { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; align-items: center; gap: 1.6rem; padding: 1.4rem var(--af-cell-pad); } .nm-af .nm-af-tier__label { font-size: var(--fs-body-sm); color: var(--v2-muted); } .nm-af .nm-af-tier__meter { height: 0.6rem; border-radius: 999px; background: #eef0f5; overflow: hidden; } .nm-af .nm-af-tier__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--v2-blue), var(--v2-blue-bright)); transform-origin: left center; animation: nmAfMeter 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; } .nm-af .nm-af-tier:nth-child(2) .nm-af-tier__fill { animation-delay: 0.1s; } .nm-af .nm-af-tier:nth-child(3) .nm-af-tier__fill { animation-delay: 0.2s; } .nm-af .nm-af-tier:nth-child(4) .nm-af-tier__fill { animation-delay: 0.3s; } @keyframes nmAfMeter { from { transform: scaleX(0); } to { transform: scaleX(1); } } .nm-af .nm-af-tier__value { font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); letter-spacing: var(--tr-heading); white-space: nowrap; color: var(--_apps---colors--foreground); } .nm-af .nm-af-calc__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; padding: 2rem var(--af-cell-pad); border-top: 1px solid var(--af-hairline); background: #f8f9fb; } .nm-af .nm-af-calc__foot-lbl { font-size: var(--fs-body-sm); color: var(--v2-muted); } .nm-af .nm-af-calc__foot-val { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.3rem 1.2rem; border-radius: 999px; background: rgba(95, 208, 166, 0.16); font-family: "PT Mono", monospace; font-size: var(--fs-caption); letter-spacing: 0.06em; text-transform: uppercase; color: #2f8f6d; } /* ========================================================================== 4. WHAT YOU PROMOTE — the product bento ========================================================================== */ .nm-af .nm-af-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--af-gap); width: 100%; } .nm-af .nm-af-cell { display: flex; flex-direction: column; min-width: 0; padding: var(--af-cell-pad); border: 1px solid var(--af-hairline); background: var(--web-white); transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .nm-af .nm-af-cell:hover { transform: translateY(-4px); border-color: rgba(67, 128, 249, 0.35); box-shadow: 0 1.6rem 4rem rgba(18, 17, 28, 0.07); } .nm-af .nm-af-cell--wide { grid-column: span 4; flex-direction: row; align-items: center; gap: clamp(3.2rem, 4vw, 6rem); } .nm-af .nm-af-cell--wide .nm-af-cell__body { flex: 1 1 46%; min-width: 0; } /* These are wide lockups (bell mark + two-line wordmark), not square icons — boxing them at 4×4rem shrank the whole lockup to fit the narrower axis and the wordmark became unreadable. Size on HEIGHT and let the width follow. */ .nm-af .nm-af-cell__icon { width: auto; max-width: 100%; height: clamp(3.6rem, 3.6vw, 4.4rem); margin-bottom: 2.4rem; object-fit: contain; object-position: 0 50%; } .nm-af .nm-af-cell__title { margin: 0 0 1.2rem; font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); color: var(--_apps---colors--foreground); } .nm-af .nm-af-cell--wide .nm-af-cell__title { font-size: var(--fs-h2); } .nm-af .nm-af-cell__copy { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--v2-muted); } .nm-af .nm-af-cell__copy strong { font-weight: 600; color: var(--_apps---colors--foreground); } .nm-af .nm-af-cell .nm-af-link { margin-top: auto; padding-top: 2rem; } .nm-af .nm-af-cell--wide .nm-af-link { margin-top: 2.4rem; padding-top: 0; } /* The proof column inside the wide cell: the App Store rating, then the pitch. */ .nm-af .nm-af-proof { flex: 1 1 54%; min-width: 0; } .nm-af .nm-af-proof__rating { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8rem 1.2rem; margin-bottom: 1.6rem; } .nm-af .nm-af-proof__rating .nm-tm-stars { font-size: 1.8rem; letter-spacing: 0.15em; color: var(--v2-gold); } .nm-af .nm-af-proof__score { font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h2); line-height: 1; letter-spacing: var(--tr-display); color: var(--_apps---colors--foreground); } .nm-af .nm-af-proof__meta { font-size: var(--fs-body-sm); color: var(--v2-muted); } /* The pitch list inside the wide cell — the reasons a merchant says yes. */ .nm-af .nm-af-pitch { min-width: 0; display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; border: 1px solid var(--af-hairline); border-radius: var(--v2-radius-inner); background: var(--af-hairline); overflow: hidden; } .nm-af .nm-af-pitch li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 1.2rem; padding: 1.6rem 2rem; background: #fff; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--v2-muted); } .nm-af .nm-af-pitch li strong { font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); letter-spacing: var(--tr-heading); color: var(--v2-blue); } /* ========================================================================== 5. WHO IT'S FOR — dark band, three audiences ========================================================================== */ .nm-af .nm-af-who__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--af-gap); width: 100%; } .nm-af .nm-af-who__card { min-width: 0; padding: var(--af-cell-pad); border: 1px solid var(--af-hairline-dark); background: rgba(254, 254, 252, 0.035); transition: border-color 0.3s ease, transform 0.3s ease; } .nm-af .nm-af-who__card:hover { transform: translateY(-4px); border-color: rgba(67, 128, 249, 0.4); } .nm-af .nm-af-who__title { margin: 0 0 1.2rem; font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h4); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); color: #fefefc; } .nm-af .nm-af-who__card p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--af-on-dark); } /* ========================================================================== 6. TWO TRACKS — affiliate vs partner program -------------------------------------------------------------------------- The old page put "Like to partner with us?" in its own full-width panel, where it competed with the affiliate CTA it sat next to. Framing the two programmes side by side turns that competition into a routing decision. ========================================================================== */ .nm-af .nm-af-tracks__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--af-gap); width: 100%; } .nm-af .nm-af-track { display: flex; flex-direction: column; min-width: 0; padding: clamp(3.2rem, 3.6vw, 4.8rem); border: 1px solid var(--af-hairline); background: var(--web-white); } .nm-af .nm-af-track--primary { border-color: rgba(0, 59, 175, 0.28); background: linear-gradient(180deg, rgba(67, 128, 249, 0.06), rgba(67, 128, 249, 0) 40%), var(--web-white); } .nm-af .nm-af-track__head { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; margin-bottom: 2rem; } .nm-af .nm-af-track__flag { display: inline-flex; align-items: center; padding: 0.3rem 1.2rem; border-radius: 999px; background: rgba(0, 59, 175, 0.1); font-family: "PT Mono", monospace; font-size: var(--fs-caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--v2-blue); } .nm-af .nm-af-track__title { margin: 0 0 1.2rem; font-family: var(--v2-display); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); color: var(--_apps---colors--foreground); } .nm-af .nm-af-track p { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--v2-muted); } .nm-af .nm-af-track__list { display: grid; gap: 1rem; margin: 2.4rem 0 0; padding: 2.4rem 0 0; border-top: 1px solid var(--af-hairline); list-style: none; } .nm-af .nm-af-track__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; font-size: var(--fs-body-sm); line-height: 1.5; color: var(--v2-muted); } .nm-af .nm-af-track__list li:before { content: "\2713"; font-size: 1.1rem; line-height: 1.6; color: var(--v2-blue); } .nm-af .nm-af-track > .w-button, .nm-af .nm-af-track > a[class*="button"], .nm-af .nm-af-track > a[class*="btn"] { align-self: flex-start; margin-top: 3.2rem; } /* A minimal icon tile instead of an illustration plate. The old page's photo art carried a baked-in gradient wash: at card width it read as a barely visible grey rectangle, and the two cards' artwork cropped differently. An icon states the same thing in one glance and costs no vertical space. */ .nm-af .nm-af-track__icon, .nm-af .nm-af-who__icon { display: grid; place-items: center; width: 5.6rem; height: 5.6rem; margin-bottom: 2.4rem; border-radius: var(--v2-radius-inner); background: rgba(0, 59, 175, 0.07); } .nm-af .nm-af-track__icon img, .nm-af .nm-af-who__icon img { width: 2.8rem; height: 2.8rem; object-fit: contain; } /* On the dark band the icons ship in their own brand colours and several of them are near-black. Flatten every one to white so the three cards read as one set. */ .nm-af .nm-af-who__icon { background: rgba(67, 128, 249, 0.14); } .nm-af .nm-af-who__icon img { filter: brightness(0) invert(1); opacity: 0.92; } /* The CTA closes the card, so the list above it takes the slack. */ .nm-af .nm-af-track__list { margin-bottom: auto; } /* ========================================================================== 7. FINAL CTA — retargeted to the affiliate action -------------------------------------------------------------------------- `.nm-final-cta` is the shared component (site-v2.css §14). Nothing is restyled here; only its copy and hrefs change in the markup. ========================================================================== */ /* ========================================================================== 8. RESPONSIVE ========================================================================== */ @media (max-width: 1199px) { .nm-af .nm-af-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nm-af .nm-af-cell--wide { grid-column: span 2; } } @media (max-width: 991px) { .nm-af .nm-af-hero { flex-flow: column; align-items: flex-start; } .nm-af .nm-af-hero__copy { flex: none; max-width: none; } .nm-af .nm-af-ledger { flex: none; width: 100%; max-width: 52rem; margin-top: clamp(4rem, 6vw, 6rem); } .nm-af .nm-af-earn__grid, .nm-af .nm-af-tracks__grid { grid-template-columns: minmax(0, 1fr); } .nm-af .nm-af-earn__grid > .nm-af-note { grid-column: 1; } /* Sticky only earns its keep beside a tall scrolling column. */ .nm-af .nm-af-calc { position: static; } .nm-af .nm-af-who__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { /* Stacked: the rail becomes a vertical spine down the left edge. */ .nm-af .nm-af-rail__track { grid-template-columns: minmax(0, 1fr); gap: 0; } .nm-af .nm-af-node { padding: 0 0 3.2rem 3.2rem; } .nm-af .nm-af-node:before { top: 1.5rem; bottom: 0; left: 0.7rem; right: auto; width: 1px; height: auto; } .nm-af .nm-af-node:last-child { padding-bottom: 0; } .nm-af .nm-af-node:last-child:before { background: linear-gradient(180deg, var(--af-rail), transparent); } .nm-af .nm-af-node__num { margin-bottom: 0.6rem; } .nm-af .nm-af-node .nm-af-link { padding-top: 1.6rem; } .nm-af .nm-af-tier { grid-template-columns: minmax(0, 1fr) auto; } /* The meter is decoration once the row has to wrap; the number is the point. */ .nm-af .nm-af-tier__meter { display: none; } .nm-af .nm-af-tier__value { justify-self: end; } .nm-af .nm-af-bento, .nm-af .nm-af-who__grid { grid-template-columns: minmax(0, 1fr); } .nm-af .nm-af-cell--wide { grid-column: span 1; flex-direction: column; align-items: stretch; } .nm-af .nm-af-proof { margin-top: 2.8rem; } .nm-af .nm-af-benefit { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; } } /* Motion is an enhancement, never a gate. */ @media (prefers-reduced-motion: reduce) { :root:has(body.nm-af) { scroll-behavior: auto; } .nm-af .nm-af-ledger__tag i, .nm-af .nm-af-row, .nm-af .nm-af-tier__fill { animation: none; } .nm-af .nm-af-cell, .nm-af .nm-af-benefit, .nm-af .nm-af-who__card, .nm-af .nm-af-link:after { transition: none; } }