/* ============================================================ JETPAY — base styles Consumes tokens.css. tokens.css is loaded directly in each page's BEFORE this file (no @import — more robust). ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--jp-font-body); font-size: var(--jp-size-body); line-height: var(--jp-leading-body); color: var(--jp-text); background: var(--jp-bg); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--jp-font-display); line-height: var(--jp-leading-tight); font-weight: var(--jp-weight-semibold); margin: 0 0 var(--jp-space-3); } h1 { font-size: var(--jp-size-hero); } h2 { font-size: var(--jp-size-h2); } h3 { font-size: var(--jp-size-h3); } p { margin: 0 0 var(--jp-space-2); color: var(--jp-text); } a { color: inherit; text-decoration: none; } /* Skip navigation — visually hidden until focused */ .jp-skip-link { position: absolute; left: var(--jp-gutter); top: var(--jp-space-2); z-index: 200; background: var(--jp-lime); color: var(--jp-ink); font-weight: var(--jp-weight-medium); padding: 0.5rem 1rem; border-radius: var(--jp-radius-sm); transform: translateY(-200%); transition: transform 0.2s var(--jp-ease); } .jp-skip-link:focus { transform: translateY(0); } /* Focus visible — branded ring, adapts to dark/light surfaces */ :focus-visible { outline: 2px solid var(--jp-lime); outline-offset: 3px; } .jp-hero :focus-visible, .jp-nav :focus-visible, .jp-stories :focus-visible, .jp-pricing :focus-visible, .jp-finalcta :focus-visible, .jp-footer :focus-visible, .jp-story-hero :focus-visible { outline-color: var(--jp-white); } .jp-container { max-width: var(--jp-maxw); margin-inline: auto; padding-inline: var(--jp-gutter); } .jp-section { padding-block: clamp(3rem, 6vw, 5rem); } .jp-section--dark { background: var(--jp-bg-dark); color: var(--jp-text-on-dark); } /* Center-aligned sections (pricing, final CTA, trust, quote) get their inner content constrained so text doesn't stretch edge to edge. */ .jp-pricing .jp-container, .jp-finalcta .jp-container, .jp-trust .jp-container { max-width: 760px; } .jp-pricing h2, .jp-finalcta h2 { margin-bottom: var(--jp-space-1); } /* Trust strip is a short centered block — give it tighter padding so it doesn't float in a giant white band. */ .jp-trust { padding-block: clamp(2rem, 4vw, 3rem); } .jp-trust p { margin-bottom: 0; } /* When two same-tone sections stack, the seam gets doubled padding. Pull adjacent white/cream/grey sections closer. */ .jp-section + .jp-section { padding-top: 0; } /* ...but keep breathing room when the background color actually changes. */ .jp-section--cream + .jp-section:not(.jp-section--cream), .jp-section--grey + .jp-section:not(.jp-section--grey), .jp-section:not(.jp-section--cream) + .jp-section--cream, .jp-section:not(.jp-section--grey) + .jp-section--grey, .jp-section--dark + .jp-section, .jp-section + .jp-section--dark, .jp-trust + .jp-section, .jp-section + .jp-trust { padding-top: clamp(3rem, 6vw, 5rem); } .jp-eyebrow { font-size: var(--jp-size-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; font-weight: var(--jp-weight-medium); color: var(--jp-text-muted); } /* Buttons */ .jp-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; border-radius: var(--jp-radius-pill); font-weight: var(--jp-weight-medium); font-size: var(--jp-size-body); cursor: pointer; transition: transform var(--jp-dur) var(--jp-ease), background var(--jp-dur) var(--jp-ease); } .jp-btn:hover { transform: translateY(-2px); } .jp-btn--primary { background: var(--jp-accent); color: var(--jp-accent-text); } .jp-btn--primary:hover { background: var(--jp-lime-deep); } .jp-btn--ghost { background: transparent; border: 1.5px solid currentColor; } /* Display type uses Acumin Pro (Typekit) */ .jp-display { font-family: var(--jp-font-wide); } /* ---------- Top nav ---------- */ .jp-nav { position: sticky; top: 0; z-index: 50; background: rgba(16, 24, 40, 0.92); /* fallback for Safari <16.2 */ background: color-mix(in srgb, var(--jp-ink) 92%, transparent); backdrop-filter: saturate(140%) blur(8px); color: var(--jp-text-on-dark); } .jp-nav__inner { max-width: var(--jp-maxw); margin-inline: auto; padding: var(--jp-space-2) var(--jp-gutter); display: flex; align-items: center; gap: var(--jp-space-4); } .jp-nav__logo { height: 28px; width: auto; display: block; } .jp-nav__links { display: flex; gap: var(--jp-space-3); margin-left: var(--jp-space-2); } .jp-nav__links a { font-weight: var(--jp-weight-medium); opacity: 0.9; transition: color 0.15s var(--jp-ease), opacity 0.15s var(--jp-ease); } .jp-nav__links a:hover { opacity: 1; color: var(--jp-lime); } .jp-nav.is-scrolled { box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 4px 24px rgba(0,0,0,0.3); } .jp-nav__actions { margin-left: auto; display: flex; align-items: center; gap: var(--jp-space-2); } .jp-nav__login { font-weight: var(--jp-weight-medium); opacity: 0.9; } .jp-nav__toggle { display: none; background: none; border: 0; color: inherit; cursor: pointer; padding: 8px; line-height: 0; } @media (max-width: 860px) { .jp-nav__login { display: none; } .jp-nav__toggle { display: block; } .jp-nav__links { position: absolute; inset: 64px 0 auto 0; flex-direction: column; background: var(--jp-ink); padding: var(--jp-gutter); visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 0.22s var(--jp-ease), transform 0.22s var(--jp-ease), visibility 0s 0.22s; } .jp-nav__links.is-open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.22s var(--jp-ease), transform 0.22s var(--jp-ease); } } /* ---------- Hero ---------- */ .jp-hero { background: var(--jp-ink); color: var(--jp-text-on-dark); padding-block: clamp(4rem, 10vw, 7rem); position: relative; overflow: hidden; } /* Animated gradient wash — slow purple <-> lime drift over the dark base. Oversized layer whose position loops, so it reads as a living glow. Speed/intensity get tuned in the Impeccable motion pass. */ .jp-hero::before { content: ""; position: absolute; inset: -40%; z-index: 0; pointer-events: none; background: radial-gradient(40% 55% at 30% 35%, rgba(129, 37, 210, 0.55) 0%, rgba(129, 37, 210, 0) 60%), radial-gradient(45% 55% at 70% 65%, rgba(209, 246, 70, 0.30) 0%, rgba(209, 246, 70, 0) 62%), radial-gradient(50% 60% at 55% 50%, rgba(83, 56, 158, 0.40) 0%, rgba(83, 56, 158, 0) 65%); background-size: 200% 200%; filter: blur(40px); will-change: background-position; animation: jp-hero-drift 12s ease-in-out infinite; } @keyframes jp-hero-drift { 0% { background-position: 0% 50%, 100% 50%, 50% 0%; } 50% { background-position: 100% 50%, 0% 50%, 50% 100%; } 100% { background-position: 0% 50%, 100% 50%, 50% 0%; } } .jp-hero__title { font-family: var(--jp-font-wide); font-size: var(--jp-size-hero); letter-spacing: -0.02em; } .jp-hero__sub { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--jp-grey-300); max-width: 40ch; } .jp-hero__sub strong { color: var(--jp-white); } .jp-hero__cta { display: flex; gap: var(--jp-space-2); margin-top: var(--jp-space-4); flex-wrap: wrap; } @keyframes jp-hero-enter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .jp-hero__title { animation: jp-hero-enter 0.7s var(--jp-ease) 0.05s backwards; } .jp-hero__sub { animation: jp-hero-enter 0.7s var(--jp-ease) 0.2s backwards; } .jp-hero__cta { animation: jp-hero-enter 0.7s var(--jp-ease) 0.35s backwards; } .jp-hero__inner { display: grid; grid-template-columns: 1fr; align-items: center; min-height: clamp(500px, 62vh, 720px); } .jp-hero__copy { max-width: clamp(360px, 44vw, 560px); } /* Art — full hero overlay, lets base6-08.svg fill at live-site scale */ .jp-hero__art { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } /* Consoles — replace base6-08.svg as the machine anchor. Console SVG is 722×300. Machine body sits in the left half (x 0–340), cable exits right (x 340–722). width:45vw + right:-8.4vw → dome centre at ~74% of viewport. bottom:3vw gives breathing room between machine base and hero bottom edge. */ .jp-console { position: absolute; right: -8.4vw; bottom: 3vw; width: 45vw; height: auto; display: block; z-index: 2; } .jp-console--send { opacity: 1; } .jp-console--recv { opacity: 0; } /* ── Animated overlay scene ───────────────────────────────────────── Console: right:-8.4vw; width:45vw (10% smaller) → dome centre at ~74% vp. (console left = 63.4vw; dome = 63.4 + 10.6 = 74vw) Scene: left:43%; width:54vw; height:28.1vw (10% smaller). Dome within scene: (74-43)/54 = 57.4% from scene left. bottom:6.5vw lifts scene for breathing room above hero bottom. Key positions (scene width = 54vw): Women: left 20% — viewport 43+20x54% = 53.8% UFO A (40%): left 37% — centre 37+20=57% UFO B (60%): left 24% — CSS centre 54%, SVG visual +3% = ~74vw Rocket A(44%):left 35% — centre 35+22=57% Rocket B(46%):left 33% — CSS centre 56%, visual +1% = ~74vw Shadow (38%): left 38% — centre 38+19=57% ─────────────────────────────────────────────────────────────────── */ .jp-scene { position: absolute; left: 43%; bottom: 6.5vw; width: 54vw; height: 28.1vw; overflow: visible; } .jp-scene > * { position: absolute; display: block; } /* Clouds */ .jp-scene__cloud { z-index: 1; opacity: 0; } /* Cloud 1 — right edge of page, drifts in from the right */ .jp-scene__cloud--1 { width: 40%; right: -2%; top: -14%; } /* Cloud 2 — above scene, left of machine, clear of copy text */ .jp-scene__cloud--2 { width: 35%; left: 8%; top: -20%; } /* UFO shadow — cast on dome surface; centred on dome (57.4% from scene left) */ .jp-scene__shadow { width: 38%; left: 38%; top: 28%; z-index: 3; opacity: 0; transform-origin: center center; } /* Crafts — all start hidden, centred on dome (57.4% from scene left) */ .jp-scene__craft { position: absolute; display: block; opacity: 0; z-index: 2; } /* Series A — ufo.svg (473x572) send, receive-rocket.svg (432x677) recv */ .jp-scene__craft--a-send { width: 40%; left: 37%; top: -14%; } .jp-scene__craft--a-recv { width: 44%; left: 35%; top: -16%; z-index: 5; } /* Series B — ufo_1.svg (889x900) send; left:24% corrects for SVG visual offset. r2-i.svg (509x720) recv. */ .jp-scene__craft--b-send { width: 60%; left: 24%; top: -18%; } .jp-scene__craft--b-recv { width: 46%; left: 33%; top: -14%; z-index: 5; } /* Women — scene left 43%, left 20% → viewport 43+20x54% = 53.8% w-1 (alien sign) and r2-w (flashlight) have 334px-tall viewboxes vs ~215px for w-2/w-3. Scale height up so the figure appears the same rendered size. */ .jp-scene__woman { height: 44%; width: auto; bottom: 3%; left: 20%; z-index: 6; opacity: 0; } .jp-scene__woman.js-b-send, .jp-scene__woman.js-b-recv { height: 68%; } /* 44% x (334/215) = 68% */ .jp-hero__art--media { position: relative; inset: auto; display: flex; align-items: center; overflow: visible; } .jp-hero__inner:has(.jp-hero__art--media) { grid-template-columns: 1fr 1fr; } .jp-about-hero__img { display: block; width: 100%; height: auto; border-radius: var(--jp-radius-lg); opacity: 0.9; } @media (max-width: 760px) { .jp-hero__art { display: none; } .jp-hero__copy { max-width: none; } } /* ---------- Logo / trust strip ---------- */ .jp-trust { background: var(--jp-white); text-align: center; } .jp-trust__eyebrow { letter-spacing: 0.1em; } .jp-trust__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--jp-space-6); margin-top: var(--jp-space-4); } .jp-trust__logos img { height: 40px; width: auto; opacity: 0.85; } /* ---------- Section heading ---------- */ .jp-section__head { max-width: 60ch; margin-bottom: var(--jp-space-6); } .jp-section__head--center { margin-inline: auto; text-align: center; } .jp-section--cream { background: var(--jp-cream); } .jp-section--grey { background: var(--jp-grey-50); } .jp-section--dark { background: var(--jp-ink); color: var(--jp-white); } .jp-section--dark h2, .jp-section--dark h3 { color: var(--jp-white); } .jp-section--dark p { color: rgba(255,255,255,0.75); } .jp-section--dark .jp-features li { color: rgba(255,255,255,0.75); } /* ---------- How it works cards ---------- */ .jp-hiw { display: grid; gap: var(--jp-space-6); } .jp-hiw__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--jp-space-6); align-items: center; } .jp-hiw__row:nth-child(even) .jp-hiw__media { order: -1; } .jp-hiw__copy { align-self: center; } .jp-hiw__media { position: relative; display: flex; justify-content: center; align-items: center; overflow: visible; } /* Gradient glow behind each feature image — solid gradient images masked to a soft ellipse so they fade out rather than block as a hard rectangle */ .jp-hiw__media::before { content: ""; position: absolute; inset: -15% -25%; background-size: cover; background-position: center; background-repeat: no-repeat; pointer-events: none; z-index: 0; mask-image: radial-gradient(ellipse 68% 68% at center, black 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 68% 68% at center, black 0%, transparent 70%); } .jp-hiw__row:nth-child(1) .jp-hiw__media::before { background-image: url('/assets/images/Card-Gradient-02.webp'); } .jp-hiw__row:nth-child(2) .jp-hiw__media::before { background-image: url('/assets/images/Card-Gradient-02.webp'); } .jp-hiw__row:nth-child(3) .jp-hiw__media::before { background-image: url('/assets/images/Card-Gradient-03.webp'); } .jp-hiw__media img { position: relative; z-index: 1; width: auto; max-width: 100%; max-height: 500px; height: auto; border-radius: var(--jp-radius-lg); } .jp-hiw__check { list-style: none; padding: 0; margin: var(--jp-space-2) 0; } .jp-hiw__check li { padding-left: 1.75rem; position: relative; margin-bottom: 0.5rem; } .jp-hiw__check li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 1rem; height: 1rem; border-radius: 50%; background: var(--jp-lime); } @media (max-width: 820px) { .jp-hiw__row { grid-template-columns: 1fr; } .jp-hiw__row:nth-child(even) .jp-hiw__media { order: 0; } } /* ---------- Pricing band ---------- */ .jp-pricing { background: radial-gradient(120% 140% at 50% 0%, var(--jp-ink-2) 0%, var(--jp-ink) 60%); color: var(--jp-text-on-dark); text-align: center; padding-block: clamp(4rem, 8vw, 7rem); } .jp-pricing__cta { display: flex; gap: var(--jp-space-2); justify-content: center; flex-wrap: wrap; margin-top: var(--jp-space-3); } /* ---------- About page — dark branded section ---------- */ .jp-about-dark { background: var(--jp-ink-2); color: var(--jp-white); position: relative; overflow: hidden; padding: clamp(5rem, 10vw, 8rem) 0; } .jp-about-dark::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: url("/assets/images/c3-bg-arrows.svg") repeat; background-size: 500px; opacity: 0.12; } .jp-about-dark::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 15% 35%, rgba(129,37,210,0.38) 0%, transparent 55%); } .jp-about-dark .jp-container { position: relative; z-index: 1; } .jp-about-dark__intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-bottom: clamp(4rem, 8vw, 7rem); } .jp-about-dark__heading h2 { font-family: var(--jp-font-wide); font-size: clamp(1.9rem, 3.8vw, 3rem); font-weight: var(--jp-weight-semibold); letter-spacing: -0.02em; line-height: 1.1; color: var(--jp-white); margin: 0; } .jp-about-dark__copy p { color: rgba(255,255,255,0.75); margin-bottom: var(--jp-space-2); } .jp-about-dark__cta-btn { color: var(--jp-white); border-color: rgba(255,255,255,0.45); display: inline-flex; margin-top: var(--jp-space-2); } .jp-about-dark__cta-btn:hover { color: var(--jp-lime); border-color: var(--jp-lime); } .jp-about-dark__innovation { text-align: center; max-width: 58ch; margin: 0 auto clamp(3rem, 6vw, 5rem); } .jp-about-dark__innovation h2 { font-family: var(--jp-font-wide); font-size: clamp(2rem, 4vw, 3rem); font-weight: var(--jp-weight-semibold); letter-spacing: -0.02em; color: var(--jp-white); margin-bottom: var(--jp-space-2); } .jp-about-dark__innovation p { color: rgba(255,255,255,0.7); } .jp-about-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--jp-space-3); } .jp-about-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--jp-radius-lg); padding: var(--jp-space-5) var(--jp-space-4); position: relative; overflow: hidden; text-align: center; } .jp-about-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 115%, rgba(209,246,70,0.30) 0%, transparent 62%); } .jp-about-card--purple::after { background: radial-gradient(ellipse at 50% 115%, rgba(129,37,210,0.50) 0%, transparent 62%); } .jp-about-card__label { font-size: var(--jp-size-small); color: rgba(255,255,255,0.72); margin: 0 0 var(--jp-space-1); } .jp-about-card__value { font-family: var(--jp-font-wide); font-size: clamp(1.3rem, 2.5vw, 1.8rem); font-weight: var(--jp-weight-semibold); letter-spacing: 0.04em; color: var(--jp-white); margin: 0; text-transform: uppercase; } @media (max-width: 760px) { .jp-about-dark__intro { grid-template-columns: 1fr; } .jp-about-cards { grid-template-columns: 1fr; gap: var(--jp-space-2); } } /* ---------- Final CTA ---------- */ .jp-finalcta { background: linear-gradient(120deg, var(--jp-purple-3) 0%, var(--jp-purple) 55%, var(--jp-purple-light) 100%); color: var(--jp-white); text-align: center; padding-block: clamp(4rem, 8vw, 7rem); } /* Adjacency rule (.jp-section + .jp-section) strips padding-top; restore it for the finalcta since it's a full background change, not a same-tone continuation. */ .jp-section + .jp-finalcta { padding-top: clamp(4rem, 8vw, 7rem); } .jp-finalcta .jp-btn--primary { background: var(--jp-lime); color: var(--jp-ink); } /* ---------- Footer ---------- */ .jp-footer { background: var(--jp-ink); color: var(--jp-grey-300); } .jp-footer a { color: var(--jp-grey-300); } .jp-footer a:hover { color: var(--jp-lime); } .jp-footer .jp-btn--primary { color: #000; } .jp-footer .jp-btn--primary:hover { color: #000; } .jp-footer__top { display: flex; flex-wrap: wrap; gap: var(--jp-space-6); justify-content: space-between; align-items: flex-start; } .jp-footer__brand { max-width: 34ch; } .jp-footer__logo { height: 40px; width: auto; display: block; margin-bottom: var(--jp-space-3); } .jp-footer__tagline { font-family: var(--jp-font-wide); font-size: var(--jp-size-h3); color: var(--jp-white); line-height: 1.2; } .jp-footer__cta { display: flex; flex-wrap: wrap; gap: var(--jp-space-2); margin-top: var(--jp-space-3); } .jp-footer__nav { display: flex; flex-wrap: wrap; gap: var(--jp-space-3); align-items: center; } .jp-footer__divider { border: 0; border-top: 1px solid rgba(255,255,255,0.12); margin: var(--jp-space-4) 0 var(--jp-space-3); } .jp-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--jp-space-2); justify-content: space-between; align-items: center; } .jp-footer__legal { font-size: var(--jp-size-small); opacity: 0.7; margin: 0; } .jp-footer__social { display: flex; gap: var(--jp-space-2); } .jp-footer__social a { font-size: var(--jp-size-small); } @media (max-width: 760px) { .jp-footer__top { flex-direction: column; gap: var(--jp-space-4); } } /* ---------- Feature list (checkmark bullets, standalone) ---------- */ .jp-features { list-style: none; padding: 0; margin: var(--jp-space-3) 0; display: grid; gap: 0.6rem; } .jp-features li { padding-left: 1.75rem; position: relative; } .jp-features li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 1rem; height: 1rem; border-radius: 50%; background: var(--jp-lime); } .jp-features--2col { grid-template-columns: 1fr 1fr; } @media (max-width: 620px) { .jp-features--2col { grid-template-columns: 1fr; } } /* ---------- Three-up value cards ---------- */ .jp-valuegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--jp-space-4); margin-top: var(--jp-space-6); } .jp-valuecard { background: var(--jp-white); border-radius: var(--jp-radius-lg); padding: var(--jp-space-4); border: 1px solid var(--jp-grey-300); } .jp-valuecard h3 { font-size: var(--jp-size-h3); } .jp-valuecard .jp-num { font-family: var(--jp-font-wide); font-size: 2.5rem; color: var(--jp-lime-deep); display: block; } @media (max-width: 900px) { .jp-valuegrid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .jp-valuegrid { grid-template-columns: 1fr; } } /* ---------- Bank / integration logo grid ---------- */ .jp-bankgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: var(--jp-space-5); } .jp-bankgrid__item { width: 66px; height: 66px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--jp-white); display: flex; align-items: center; justify-content: center; padding: 5px; box-shadow: 0 1px 8px rgba(0,0,0,0.1); } .jp-bankgrid__item img { width: 100%; height: 100%; object-fit: contain; } /* ---------- Testimonial ---------- */ .jp-quote { max-width: 60ch; margin-inline: auto; text-align: center; } .jp-quote blockquote { font-family: var(--jp-font-wide); font-size: var(--jp-size-h3); margin: 0 0 var(--jp-space-2); } .jp-quote cite { font-style: normal; color: var(--jp-text-muted); } /* ---------- Accordion (FAQ) ---------- */ .jp-accordion { border-top: 1px solid var(--jp-grey-300); } .jp-accordion__item { border-bottom: 1px solid var(--jp-grey-300); } .jp-accordion__trigger { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: var(--jp-space-3) 0; font-size: var(--jp-size-h3); font-weight: var(--jp-weight-medium); color: var(--jp-text); display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .jp-accordion__trigger::after { content: "+"; font-size: 1.5rem; color: var(--jp-purple); } .jp-accordion__item.is-open .jp-accordion__trigger::after { content: "–"; } .jp-accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--jp-dur) var(--jp-ease); } .jp-accordion__panel > p { min-height: 0; overflow: hidden; } .jp-accordion__item.is-open .jp-accordion__panel { grid-template-rows: 1fr; } .jp-accordion__panel p { padding-bottom: var(--jp-space-3); color: var(--jp-text-muted); } /* ---------- Two-column generic split ---------- */ .jp-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--jp-space-6); align-items: center; } .jp-split img { width: 100%; height: auto; border-radius: var(--jp-radius-lg); } @media (max-width: 760px) { .jp-split { grid-template-columns: 1fr; } } /* ---------- Step list (numbered) ---------- */ .jp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--jp-space-4); margin-top: var(--jp-space-6); } .jp-steps__num { font-family: var(--jp-font-wide); color: var(--jp-purple); font-weight: var(--jp-weight-bold); } @media (max-width: 820px) { .jp-steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .jp-steps { grid-template-columns: 1fr; } } /* ---------- Decorative floating graphics in hero ---------- */ .jp-hero__decor { position: absolute; pointer-events: none; opacity: 0.9; z-index: 1; } .jp-hero__decor--ufo { right: 6%; top: 18%; width: clamp(120px, 18vw, 260px); animation: jp-float 5s ease-in-out infinite; } .jp-hero__decor--cloud { right: 30%; top: 30%; width: clamp(80px, 10vw, 150px); opacity: 0.45; animation: jp-float 7s ease-in-out infinite reverse; } .jp-hero .jp-container { position: relative; z-index: 1; } @keyframes jp-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @media (max-width: 760px) { .jp-hero__decor { display: none; } } /* ---------- Responsive video embed ---------- */ .jp-video { position: relative; width: 100%; max-width: 900px; margin: var(--jp-space-4) auto 0; aspect-ratio: 16 / 9; border-radius: var(--jp-radius-lg); overflow: hidden; box-shadow: 0 20px 60px rgba(16,24,40,0.18); } .jp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---------- "Ready for the next step?" split CTA card ---------- */ .jp-nextstep { background: var(--jp-ink); padding-block: clamp(3rem, 6vw, 5rem); } .jp-nextstep__card { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--jp-radius-lg); overflow: hidden; max-width: var(--jp-maxw); margin-inline: auto; } .jp-nextstep__copy { background: var(--jp-white); color: var(--jp-ink); padding: clamp(2rem, 5vw, 3.5rem); display: flex; flex-direction: column; justify-content: center; } .jp-nextstep__copy h2 { color: var(--jp-ink); } .jp-nextstep__cta { display: flex; gap: var(--jp-space-2); margin-top: var(--jp-space-3); flex-wrap: wrap; } .jp-nextstep__cta .jp-btn--primary { background: var(--jp-purple); color: var(--jp-white); } .jp-nextstep__cta .jp-btn--ghost { border-color: var(--jp-grey-300); color: var(--jp-ink); } .jp-nextstep__art { background: var(--jp-lime); display: flex; align-items: center; justify-content: center; padding: var(--jp-space-4); min-height: 280px; } .jp-nextstep__ufo-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 300px; } .jp-nextstep__ufo { width: 100%; height: auto; } .jp-nextstep__bags { display: flex; align-items: flex-end; justify-content: center; gap: var(--jp-space-1); margin-top: -52%; width: 44%; opacity: 0.55; } .jp-bag { height: auto; } .jp-bag--1 { width: 30%; animation: jp-bag-float 3.2s ease-in-out 0s infinite; } .jp-bag--2 { width: 38%; animation: jp-bag-float 3.2s ease-in-out 0.35s infinite; } .jp-bag--3 { width: 30%; animation: jp-bag-float 3.2s ease-in-out 0.7s infinite; } @keyframes jp-bag-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .jp-bag { animation: none; } } @media (max-width: 720px) { .jp-nextstep__card { grid-template-columns: 1fr; } .jp-nextstep__art { order: -1; min-height: 200px; } } /* ---------- Decorative graphics on CTA / pricing bands ---------- */ .jp-pricing, .jp-finalcta { position: relative; overflow: hidden; } .jp-band-decor { position: absolute; pointer-events: none; z-index: 0; } .jp-band-decor--arrows { left: -2%; bottom: -10%; width: clamp(140px, 22vw, 320px); opacity: 0.18; } .jp-band-decor--rocket { right: 3%; top: 50%; transform: translateY(-50%); width: clamp(90px, 14vw, 180px); opacity: 0.95; } .jp-pricing .jp-container, .jp-finalcta .jp-container { position: relative; z-index: 1; } @media (max-width: 760px) { .jp-band-decor--rocket { display: none; } } /* Repeating arrow-grid motif — brand texture on dark conversion panels */ .jp-finalcta::before, .jp-pricing::before { content: ''; position: absolute; inset: 0; background: url('/assets/images/c3-bg-arrows.svg') repeat; background-size: 400px; opacity: 0.15; pointer-events: none; z-index: 0; } /* Skewed perspective grid on the right edge of pricing and finalcta bands */ .jp-pricing::after, .jp-finalcta::after { content: ''; position: absolute; right: -8%; top: -25%; bottom: -25%; width: 55%; background: url('/assets/images/grid-flat-lime2.svg'); background-size: auto; transform: perspective(500px) rotateY(-30deg); transform-origin: right center; opacity: 0.10; pointer-events: none; z-index: 0; } /* ---------- Customer-stories carousel (dark, photo-driven) ---------- */ .jp-stories { position: relative; overflow: hidden; background: var(--jp-ink); color: var(--jp-text-on-dark); } @keyframes jp-arrow-drift { from { background-position: 0 0; } to { background-position: 500px 0; } } .jp-stories__bg { position: absolute; inset: 0; z-index: 0; background: url("/assets/images/c3-bg-arrows.svg") repeat; background-size: 500px; opacity: 0.25; animation: jp-arrow-drift 28s linear infinite; } @media (prefers-reduced-motion: reduce) { .jp-stories__bg { animation: none; } } .jp-stories .jp-container { position: relative; z-index: 1; } .jp-stories .jp-eyebrow { color: var(--jp-lime); } .jp-stories h2 { color: var(--jp-white); } .jp-stories__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--jp-space-4); flex-wrap: wrap; } .jp-stories__demo { border-color: rgba(255,255,255,0.35); color: var(--jp-white); flex-shrink: 0; } .jp-stories__demo:hover { border-color: var(--jp-white); } .jp-carousel { position: relative; } .jp-carousel__track { display: flex; gap: var(--jp-space-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: var(--jp-space-2); -webkit-overflow-scrolling: touch; } .jp-carousel__track::-webkit-scrollbar { height: 6px; } .jp-carousel__track::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 999px; } .jp-story { flex: 0 0 clamp(300px, 32%, 420px); scroll-snap-align: start; border-radius: var(--jp-radius-lg); overflow: hidden; text-decoration: none; color: var(--jp-white); display: flex; flex-direction: column; transition: transform var(--jp-dur) var(--jp-ease); } @media (hover: hover) { .jp-story:hover { transform: translateY(-4px); } } /* Photo area — real portrait sits here as background-image (set inline per card). Until a photo is provided, the brand gradient shows through. */ .jp-story__photo { position: relative; aspect-ratio: 3 / 4; background: linear-gradient(160deg, var(--jp-purple-3), var(--jp-ink-2)); background-size: cover; background-position: center top; display: flex; align-items: flex-end; padding: var(--jp-space-3); } /* Purple corner accent — top-left only, tight radius */ .jp-story__photo::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 0% 0%, rgba(129,37,210,0.55) 0%, transparent 38%); } /* Bottom scrim for text legibility */ .jp-story__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,24,40,0.70) 0%, rgba(16,24,40,0) 55%); } /* Glassy quote overlay */ .jp-story__overlay { position: relative; z-index: 1; background: rgba(255,255,255,0.12); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--jp-radius-md); padding: var(--jp-space-3); width: 100%; color: var(--jp-white); } .jp-story__quote { font-family: var(--jp-font-wide); font-size: 1.05rem; line-height: 1.3; margin-bottom: var(--jp-space-2); color: var(--jp-white); } .jp-story__name { font-weight: var(--jp-weight-medium); color: var(--jp-white); } .jp-story__role { font-size: var(--jp-size-small); opacity: 0.8; color: var(--jp-white); } /* Purple stat footer */ .jp-story__stat { background: var(--jp-purple); color: var(--jp-white); padding: var(--jp-space-3); display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .jp-story__stat strong { font-family: var(--jp-font-wide); font-size: 1.05rem; font-weight: var(--jp-weight-semibold); display: block; } .jp-story__stat span { font-size: var(--jp-size-small); opacity: 0.9; } .jp-story__stat-arrow { font-size: 1.3rem; flex-shrink: 0; } .jp-carousel__nav { display: flex; gap: var(--jp-space-1); justify-content: flex-end; margin-top: var(--jp-space-3); } .jp-carousel__btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); background: transparent; color: var(--jp-white); cursor: pointer; font-size: 1.2rem; line-height: 1; transition: background var(--jp-dur) var(--jp-ease), color var(--jp-dur) var(--jp-ease); } .jp-carousel__btn:hover { background: var(--jp-lime); color: var(--jp-ink); border-color: var(--jp-lime); } /* ---------- Get in touch ---------- */ .jp-contact-hero { background: var(--jp-ink); color: var(--jp-text-on-dark); padding: clamp(3rem, 8vw, 8rem) 0 clamp(2.5rem, 6vw, 6rem); } .jp-contact__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--jp-space-8); align-items: start; } .jp-contact__heading { font-family: var(--jp-font-wide); font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: var(--jp-weight-semibold); letter-spacing: -0.02em; line-height: 1.05; color: var(--jp-white); margin-bottom: var(--jp-space-3); text-wrap: balance; } .jp-contact__sub { color: var(--jp-grey-300); font-size: clamp(1rem, 2vw, 1.2rem); max-width: 38ch; margin-bottom: var(--jp-space-4); } .jp-contact__trust { list-style: none; padding: 0; margin: var(--jp-space-4) 0 0; display: flex; flex-direction: column; gap: var(--jp-space-2); } .jp-contact__trust li { display: flex; align-items: center; gap: 0.625rem; font-size: var(--jp-size-small); color: var(--jp-grey-300); } .jp-contact__trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--jp-lime); flex-shrink: 0; } .jp-contact__form { background: var(--jp-white); border-radius: var(--jp-radius-lg); padding: var(--jp-space-6); } /* HubSpot form overrides — scoped to contact card */ .jp-contact__form .hs-form { font-family: var(--jp-font-body); color: var(--jp-ink); } .jp-contact__form .hs-form-field { margin-bottom: var(--jp-space-3); } .jp-contact__form label:not(.hs-form-booleancheckbox) { display: block; font-size: var(--jp-size-small); font-weight: var(--jp-weight-medium); color: var(--jp-ink); margin-bottom: 0.375rem; } .jp-contact__form .hs-input { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--jp-grey-300); border-radius: var(--jp-radius-sm); font-family: var(--jp-font-body); font-size: var(--jp-size-body); color: var(--jp-ink); background: var(--jp-white); box-sizing: border-box; appearance: none; transition: border-color 0.2s ease, outline-color 0.2s ease; } .jp-contact__form .hs-input:focus { outline: 2px solid var(--jp-lime); outline-offset: 1px; border-color: var(--jp-lime); } .jp-contact__form textarea.hs-input { min-height: 100px; resize: vertical; } .jp-contact__form select.hs-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23576872' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.5rem; cursor: pointer; } .jp-contact__form .hs-button.primary { width: 100%; padding: 0.75rem 1.5rem; margin-top: var(--jp-space-2); background: var(--jp-lime); color: var(--jp-ink); border: none; border-radius: var(--jp-radius-sm); cursor: pointer; appearance: none; font-family: var(--jp-font-body); font-size: var(--jp-size-body); font-weight: var(--jp-weight-medium); transition: filter var(--jp-dur) var(--jp-ease), transform var(--jp-dur) var(--jp-ease); } .jp-contact__form .hs-button.primary:hover { filter: brightness(0.92); transform: translateY(-1px); } .jp-contact__form .form-columns-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--jp-space-2); } .jp-contact__form .hs-error-msgs { list-style: none; padding: 0; margin: 0.25rem 0 0; } .jp-contact__form .hs-error-msgs li { font-size: 0.8125rem; color: #c53030; } .jp-contact__form .hs-form-required { color: var(--jp-purple); margin-left: 2px; } .jp-contact__form .submitted-message { padding: var(--jp-space-4) 0; color: var(--jp-ink); font-size: var(--jp-size-body); } @media (max-width: 780px) { .jp-contact__grid { grid-template-columns: 1fr; } .jp-contact__form .form-columns-2 { grid-template-columns: 1fr; } } /* ---------- Customer story detail page ---------- */ .jp-story-hero { background: var(--jp-ink); color: var(--jp-text-on-dark); padding-bottom: clamp(5rem, 10vw, 8rem); } .jp-story-hero .jp-eyebrow { color: var(--jp-lime); } .jp-story-hero__quote { font-family: var(--jp-font-wide); font-size: clamp(2rem, 5vw, 3.75rem); letter-spacing: -0.02em; max-width: 22ch; color: var(--jp-lime); } @media (max-width: 480px) { .jp-story-hero__quote { font-size: clamp(1.75rem, 7vw, 2.5rem); } } .jp-story-hero__pull { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--jp-grey-300); max-width: 60ch; margin-top: var(--jp-space-3); } .jp-story-hero__who { margin-top: var(--jp-space-3); } .jp-story-hero__who strong { display: block; color: var(--jp-white); font-weight: var(--jp-weight-medium); } .jp-story-hero__who span { color: var(--jp-grey-300); font-size: var(--jp-size-small); } .jp-story-stats { display: flex; flex-wrap: wrap; gap: var(--jp-space-2); margin-top: var(--jp-space-4); } .jp-story-stats div { display: inline-flex; align-items: baseline; gap: 0.35em; background: var(--jp-lime); color: var(--jp-ink); border-radius: var(--jp-radius-pill); padding: 0.5rem 1.25rem; font-family: var(--jp-font-wide); font-size: var(--jp-size-small); line-height: 1.2; } .jp-story-stats div strong { font-weight: var(--jp-weight-semibold); font-size: 1rem; } .jp-story-block { max-width: 760px; } .jp-story-block h2 { font-size: var(--jp-size-h2); } .jp-story-block .jp-eyebrow { margin-bottom: var(--jp-space-1); } .jp-story-block h3 { font-family: var(--jp-font-wide); font-size: var(--jp-size-h3); margin-top: var(--jp-space-2); } .jp-story-tags { display: flex; flex-wrap: wrap; gap: var(--jp-space-2); margin-top: var(--jp-space-2); } .jp-story-tags span { background: var(--jp-grey-50); border: 1px solid var(--jp-grey-300); border-radius: var(--jp-radius-pill); padding: 0.35rem 0.9rem; font-size: var(--jp-size-small); } .jp-story-img { width: 100%; max-width: 760px; height: auto; border-radius: var(--jp-radius-lg); margin: var(--jp-space-4) 0; } /* Hero split card: big quote-mark panel + customer photo (matches live) */ .jp-story-card { display: grid; grid-template-columns: 1fr 1fr; max-width: 800px; margin: var(--jp-space-4) auto 0; border-radius: var(--jp-radius-lg); overflow: hidden; background: var(--jp-white); } .jp-story-card__mark { padding: var(--jp-space-4); display: flex; align-items: flex-end; font-family: Georgia, serif; font-size: 2.5rem; line-height: 1; color: var(--jp-purple); opacity: 0.55; } .jp-story-card__photo { background-size: cover; background-position: center; min-height: 280px; } @media (max-width: 620px) { .jp-story-card { grid-template-columns: 1fr; } .jp-story-card__mark { display: none; } } @media (prefers-reduced-motion: reduce) { /* Stop looping / spatial animations that cause vestibular issues */ .jp-hero::before, .jp-hero__decor, .jp-hero__woman, .jp-sec-hero__woman, .jp-plat-scene__ship { animation: none !important; } .jp-plat-scene__parts { animation: none !important; transform: translateX(-50%) !important; } /* Make all other transitions instant so state changes still register */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------- Scroll-reveal system (active only when JS adds js-reveal-ready) ---------- */ .js-reveal-ready [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.55s var(--jp-ease), transform 0.55s var(--jp-ease); } .js-reveal-ready [data-reveal="lift"] { transform: translateY(14px) scale(0.97); transform-origin: bottom center; } .js-reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; } .js-reveal-ready [data-stagger] > * { opacity: 0; transform: translateY(14px); transition: opacity 0.45s var(--jp-ease), transform 0.45s var(--jp-ease); } .js-reveal-ready [data-stagger].is-visible > * { opacity: 1; transform: none; } .js-reveal-ready [data-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; } .js-reveal-ready [data-stagger].is-visible > *:nth-child(2) { transition-delay: 75ms; } .js-reveal-ready [data-stagger].is-visible > *:nth-child(3) { transition-delay: 150ms; } .js-reveal-ready [data-stagger].is-visible > *:nth-child(4) { transition-delay: 225ms; } .js-reveal-ready [data-stagger].is-visible > *:nth-child(5) { transition-delay: 300ms; } .js-reveal-ready [data-stagger].is-visible > *:nth-child(6) { transition-delay: 375ms; } @media (prefers-reduced-motion: reduce) { .js-reveal-ready [data-reveal], .js-reveal-ready [data-stagger] > * { opacity: 1 !important; transform: none !important; } .jp-hero__title, .jp-hero__sub, .jp-hero__cta { animation: none; } } /* ---------- Hover micro-interactions (pointer device only) ---------- */ .jp-valuecard { transition: transform var(--jp-dur) var(--jp-ease), box-shadow var(--jp-dur) var(--jp-ease); } .jp-steps__num { transition: color var(--jp-dur) var(--jp-ease); } .jp-steps > div { transition: transform var(--jp-dur) var(--jp-ease); } @media (hover: hover) { .jp-valuecard:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.08); } .jp-steps > div:hover { transform: translateY(-3px); } .jp-steps > div:hover .jp-steps__num { color: var(--jp-lime-deep); } } /* ============================================================ Platforms page — hero with floating UFO ============================================================ */ .jp-platform-hero { background: var(--jp-ink-2); color: var(--jp-white); padding: clamp(4rem, 8vw, 7rem) 0; position: relative; overflow: hidden; } .jp-platform-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 72% 55%, rgba(129,37,210,0.22) 0%, transparent 55%); } .jp-platform-hero .jp-container { position: relative; } .jp-platform-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .jp-platform-hero__eyebrow { font-size: var(--jp-size-small); font-weight: var(--jp-weight-medium); color: var(--jp-white); margin-bottom: var(--jp-space-2); } .jp-platform-hero__title { font-family: var(--jp-font-wide); font-size: clamp(2.5rem, 5.5vw, 4.25rem); font-weight: var(--jp-weight-semibold); letter-spacing: -0.02em; line-height: 1.05; margin-bottom: var(--jp-space-3); text-wrap: balance; } .jp-platform-hero__sub { font-size: clamp(1rem, 2vw, 1.1rem); color: rgba(255,255,255,0.72); max-width: 50ch; margin-bottom: var(--jp-space-4); } .jp-platform-hero__cta { display: flex; gap: var(--jp-space-2); flex-wrap: wrap; } .jp-platform-hero__cta .jp-btn--primary { background: var(--jp-purple); color: var(--jp-white); } .jp-platform-hero__cta .jp-btn--ghost { background: var(--jp-lime); color: var(--jp-ink); border-color: var(--jp-lime); } .jp-platform-hero__art { display: flex; justify-content: center; align-items: center; } /* Platforms hero — layered UFO scene */ /* Platforms hero: UFO (sec-h-ship) + beam (sec-h-grad) + icons (sec-h-parts). All three layers use absolute positioning against a fixed-ratio container so we can precisely close the ship→beam gap and center the parts on the beam. */ /* Flex column keeps ship and beam on the same center axis */ .jp-plat-scene { display: flex; flex-direction: column; align-items: center; width: 100%; } /* sec-h-ship.svg 398.8×202.1 — UFO craft, full width */ .jp-plat-scene__ship { display: block; width: 100%; height: auto; position: relative; z-index: 3; /* Large negative margin pulls beam up to meet the UFO underside. Ship SVG has ~40% blank canvas below the disc, beam SVG has ~4% blank above. */ margin-bottom: -28%; animation: jp-ufo-float 5s ease-in-out infinite; } /* Beam wrapper — narrower than ship so grad + parts share a centered column */ .jp-plat-scene__beam { position: relative; width: 68%; flex-shrink: 0; } /* sec-h-grad.svg 338.9×396 — lime beam. z-index 2 puts it OVER the icons so they appear to be sucked up through the beam (matches live site). */ .jp-plat-scene__grad { display: block; width: 100%; height: auto; position: relative; z-index: 2; } /* sec-h-parts.svg 218.1×266.8 — icons. SVG content is right-biased (53–89% of canvas), so left: 38% shifts the element left to center visuals on beam. Uses jp-parts-float (not jp-ufo-float) so translateX(-50%) isn't overridden. */ .jp-plat-scene__parts { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); width: 80%; height: auto; z-index: 1; animation: jp-parts-float 6s ease-in-out infinite reverse; } @keyframes jp-ufo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } /* Parts need translateX(-50%) baked in so the float animation doesn't override the x-offset */ @keyframes jp-parts-float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-16px); } } @media (max-width: 820px) { .jp-platform-hero__inner { grid-template-columns: 1fr; } .jp-platform-hero__art { display: none; } } /* ============================================================ Security page — hero, panels, feature cards, nextstep ============================================================ */ /* Hero */ .jp-sec-hero { background: var(--jp-ink-2); color: var(--jp-white); padding: clamp(5rem, 10vw, 9rem) 0; position: relative; overflow: hidden; } .jp-sec-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 72% 55%, rgba(129,37,210,0.28) 0%, transparent 58%); } .jp-sec-hero .jp-container { position: relative; } .jp-sec-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .jp-sec-hero__title { font-family: var(--jp-font-wide); font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: var(--jp-weight-semibold); letter-spacing: -0.02em; line-height: 1.05; margin-bottom: var(--jp-space-3); text-wrap: balance; } .jp-sec-hero__sub { font-size: clamp(1rem, 2vw, 1.1rem); color: rgba(255,255,255,0.72); max-width: 42ch; } .jp-sec-hero__art { position: relative; display: flex; justify-content: center; align-items: center; } .jp-sec-hero__vault { width: 100%; max-width: 440px; height: auto; } /* Security hero: woman figure + vault side by side */ .jp-sec-hero__art-inner { display: flex; align-items: flex-end; justify-content: center; gap: var(--jp-space-4); } .jp-sec-hero__woman { height: clamp(150px, 21vw, 225px); width: auto; flex-shrink: 0; opacity: 0.9; animation: jp-ufo-float 7s ease-in-out infinite; } /* Vault illustration: logos sit inside the lime beam at the top of sec-box-2.svg */ .jp-sec-vault { position: relative; width: 100%; max-width: 460px; margin: 0 auto; } .jp-sec-vault__logos { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); width: 54%; z-index: 2; } .jp-sec-vault__box { display: block; width: 100%; height: auto; position: relative; z-index: 1; } .jp-sec-vault__shadow { display: block; width: 65%; margin: -3% auto 0; opacity: 0.5; position: relative; z-index: 0; } .jp-sec-hero__cloud { position: absolute; pointer-events: none; opacity: 0.85; animation: jp-cloud-drift 7s ease-in-out infinite; } .jp-sec-hero__cloud--tl { top: 10%; left: -3%; width: clamp(140px, 18vw, 260px); animation-delay: 0s; animation-duration: 8s; } .jp-sec-hero__cloud--tr { top: 30%; right: -4%; width: clamp(160px, 20vw, 300px); animation-delay: -3s; animation-duration: 7s; } @keyframes jp-cloud-drift { 0% { transform: translateX(0); } 50% { transform: translateX(10px); } 100% { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .jp-sec-hero__cloud { animation: none; } } /* Panel sections — System / App / Compliance */ .jp-sec-panel { background: var(--jp-ink); color: var(--jp-white); } .jp-sec-panel__inner { display: grid; grid-template-columns: 280px 1fr; gap: var(--jp-space-8); align-items: start; } .jp-sec-panel__left h2 { font-family: var(--jp-font-wide); font-size: clamp(1.9rem, 3.5vw, 2.5rem); font-weight: var(--jp-weight-semibold); letter-spacing: -0.02em; line-height: 1.1; color: var(--jp-white); margin-bottom: var(--jp-space-4); } .jp-sec-panel__photo { position: relative; border-radius: var(--jp-radius-lg); overflow: hidden; aspect-ratio: 3 / 4; } .jp-sec-panel__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .jp-sec-panel__testimonial { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,0.13); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,0.18); padding: var(--jp-space-3); color: var(--jp-white); } .jp-sec-panel__testimonial blockquote { font-family: var(--jp-font-wide); font-size: 0.95rem; font-weight: var(--jp-weight-semibold); line-height: 1.35; margin: 0 0 var(--jp-space-1); } .jp-sec-panel__testimonial cite { display: block; font-style: normal; font-size: var(--jp-size-small); opacity: 0.82; } /* Feature card grid */ .jp-sec-features { display: grid; grid-template-columns: 1fr 1fr; gap: var(--jp-space-3); align-content: start; } .jp-sec-feature { background: rgba(255,255,255,0.04); border-radius: var(--jp-radius-lg); padding: var(--jp-space-4); position: relative; overflow: hidden; } .jp-sec-feature::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 115%, rgba(209,246,70,0.22) 0%, transparent 60%); } .jp-sec-feature--purple::after { background: radial-gradient(ellipse at 50% 115%, rgba(129,37,210,0.38) 0%, transparent 60%); } .jp-sec-feature h3 { font-family: var(--jp-font-wide); font-size: 0.9rem; font-weight: var(--jp-weight-semibold); color: var(--jp-white); margin-bottom: var(--jp-space-2); position: relative; z-index: 1; } .jp-sec-feature p { font-size: var(--jp-size-small); line-height: 1.65; color: rgba(255,255,255,0.78); margin: 0; position: relative; z-index: 1; } .jp-sec-feature p + p { margin-top: 0.625rem; } .jp-sec-feature a { color: rgba(255,255,255,0.7); text-decoration: underline; text-underline-offset: 2px; } .jp-sec-feature a:hover { color: var(--jp-lime); } /* Works with any bank */ .jp-sec-banks { background: var(--jp-white); padding: clamp(4rem, 8vw, 6rem) 0; text-align: center; } .jp-sec-banks h2 { color: var(--jp-ink); margin-bottom: var(--jp-space-2); } .jp-sec-banks p { color: var(--jp-text-muted); max-width: 60ch; margin-inline: auto; } /* Security nextstep split card */ .jp-sec-nextstep { background: var(--jp-ink); padding: clamp(3rem, 6vw, 5rem) 0; } .jp-sec-nextstep__card { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--jp-radius-lg); overflow: hidden; } .jp-sec-nextstep__copy { background: var(--jp-white); padding: clamp(2.5rem, 5vw, 4rem); display: flex; flex-direction: column; justify-content: center; } .jp-sec-nextstep__copy h2 { font-family: var(--jp-font-wide); font-size: clamp(1.3rem, 2.5vw, 1.7rem); font-weight: var(--jp-weight-semibold); letter-spacing: -0.02em; color: var(--jp-ink); margin-bottom: 0.25rem; } .jp-sec-nextstep__copy p { color: var(--jp-ink); margin-bottom: var(--jp-space-4); } .jp-sec-nextstep__cta { display: flex; gap: var(--jp-space-2); flex-wrap: wrap; } .jp-sec-nextstep__cta .jp-btn--primary { background: var(--jp-purple); color: var(--jp-white); } .jp-sec-nextstep__cta .jp-btn--ghost { border-color: var(--jp-grey-300); color: var(--jp-ink); } .jp-sec-nextstep__art { background: var(--jp-lime); display: flex; align-items: center; justify-content: center; overflow: hidden; min-height: 260px; } .jp-sec-nextstep__art img { width: 100%; height: 100%; object-fit: cover; } /* Security responsive */ @media (max-width: 860px) { .jp-sec-hero__inner { grid-template-columns: 1fr; } .jp-sec-hero__art { display: none; } .jp-sec-panel__inner { grid-template-columns: 1fr; } .jp-sec-panel__photo { aspect-ratio: 4/3; } .jp-sec-nextstep__card { grid-template-columns: 1fr; } .jp-sec-nextstep__art { min-height: 200px; } } @media (max-width: 560px) { .jp-sec-features { grid-template-columns: 1fr; } } /* ---------- Vimeo click-to-play facade ---------- */ .jp-video--facade { background: var(--jp-ink) url('https://i.vimeocdn.com/video/2024083551-795d29837429364cb97a134a2c2a94db9bff7cff543bd5d7990ad85a071274d8-d_1280x720?r=pad') center / cover no-repeat; cursor: pointer; display: flex; align-items: center; justify-content: center; } .jp-video__play { background: none; border: none; cursor: pointer; padding: 0; transition: transform var(--jp-dur) var(--jp-ease); } .jp-video__play:hover, .jp-video__play:focus-visible { transform: scale(1.12); }