/* ============================================================================
JP-727 — One-JTL "Talk to Sales" contact card: organic light-blue shape.
The Figma (restyle/imgs/img5.svg, node 1184-12551) shows the form on a
FULL-HEIGHT light-blue region whose curved left edge sweeps into the navy —
navy widest at the TOP, narrowing to ~y60%, widening slightly to the bottom
(boundary sampled directly from the SVG). jp-644-one-jtl.css instead renders
the form container as a plain light-blue rounded RECTANGLE.
Fix: paint the exact organic shape (jp727-onejtl-form-shape.svg — light-blue
on the form side, transparent on the navy side) as a BACKGROUND layer on the
navy card. Backgrounds always sit behind content, so the text + form ride on
top with no z-index/stacking fragility. Loads after jp-644; all four ids.
============================================================================ */
body:is(.page-id-325408, .page-id-325712, .page-id-326092, .page-id-326404)
.basic-card-widget:has(#jtl-onejtl-form) {
background-color: #0b1b45 !important; /* navy base */
background-image: url("jp727-onejtl-form-shape.svg?v=2") !important; /* light-blue organic region (bump ?v on shape edits — static SVGs are Cloudflare-cached 4h with no query string) */
background-repeat: no-repeat !important;
background-position: 0 0 !important;
background-size: 100% 100% !important;
overflow: hidden; /* clip to rounded card */
border-radius: 46px !important; /* Figma rounded-[46px] */
padding: 46px 64px !important; /* Figma px-64 py-46 (single layer) */
}
/* remove the theme's second padding layer (card + card-body were doubling to
128px, inflating the card height and the empty navy space). */
@media (min-width: 992px) {
body:is(.page-id-325408, .page-id-325712, .page-id-326092, .page-id-326404)
.basic-card-widget:has(#jtl-onejtl-form) .card-body {
padding: 0 !important;
}
/* Figma content is vertically centered (items-center): center the narrow
text column against the taller form column instead of top-aligning. */
body:is(.page-id-325408, .page-id-325712, .page-id-326092, .page-id-326404)
.basic-card-widget:has(#jtl-onejtl-form) .row {
align-items: center !important;
}
}
/* Keep the navy text clear of the curve. In the Figma the text sits in a
narrow ~350px column with a gap to the light-blue; on the live page the text
fills the wide col-lg-6 and runs into the curve. Constrain it (desktop only;
the columns stack on mobile). */
@media (min-width: 992px) {
body:is(.page-id-325408, .page-id-325712, .page-id-326092, .page-id-326404)
.basic-card-widget:has(#jtl-onejtl-form) .col-lg-6:has(.jp644-contact-phone) {
padding-right: 26% !important;
}
}
/* DESKTOP ONLY: kill jp-644's light-blue rounded-rectangle fill on the form
container — the light-blue there comes from the card background shape behind
the form. On mobile the columns stack (the horizontal wave can't apply), so
we DON'T override and jp-644's blue rounded form-box returns (see the mobile
block below). */
@media (min-width: 992px) {
body:is(.page-id-325408, .page-id-325712, .page-id-326092, .page-id-326404)
.basic-card-widget .wpb_raw_code:has(form),
body:is(.page-id-325408, .page-id-325712, .page-id-326092, .page-id-326404)
.basic-card-widget .hbspt-form,
body:is(.page-id-325408, .page-id-325712, .page-id-326092, .page-id-326404)
.basic-card-widget .hs-form-frame:has(form),
body:is(.page-id-325408, .page-id-325712, .page-id-326092, .page-id-326404)
#jtl-onejtl-form {
background: transparent !important;
border-radius: 0 !important;
}
}
/* MOBILE (<992px): the columns stack, so the desktop VERTICAL wave can't apply
as-is. Instead we rotate the same idea 90°: the organic curve runs HORIZONTALLY
across the TOP of the form, navy above it (clear of the text), and the
light-blue fills everything BELOW the curve as the form's background.
- card stays solid navy (drop the stretched vertical wave)
- the FORM COLUMN becomes the light-blue region: solid #89d2ff fill + a fixed-
height navy curve band pinned to its top (jp727-onejtl-curve-mobile.svg —
navy above the curve, transparent below so the light-blue shows through).
Anchoring to the column (not the card) keeps the curve correctly placed no
matter how tall the navy text runs (DE copy is longer than EN).
- a margin-top gap + the navy band together keep the curve OFF the text.
- jp-644's inner .hbspt-form blue box is flattened so we don't get box-in-box. */
@media (max-width: 991px) {
/* Zero the card's HORIZONTAL padding (and card-body / row gutters) so the
light-blue form column can fill the FULL card width edge-to-edge. The text
gets its own side inset instead (below). Keep the card's top padding only. */
body:is(.page-id-325408, .page-id-325712, .page-id-326092, .page-id-326404)
.basic-card-widget:has(#jtl-onejtl-form) {
background-image: none !important; /* solid navy — no vertical wave */
padding: 28px 0 0 0 !important; /* top only; no side/bottom padding */
}
body:is(.page-id-325408, .page-id-325712, .page-id-326092, .page-id-326404)
.basic-card-widget:has(#jtl-onejtl-form) .card-body {
padding: 0 !important;
}
body:is(.page-id-325408, .page-id-325712, .page-id-326092, .page-id-326404)
.basic-card-widget:has(#jtl-onejtl-form) .row {
margin-left: 0 !important; margin-right: 0 !important;
}
/* text column keeps a comfortable side inset (the card no longer pads it) */
body:is(.page-id-325408, .page-id-325712, .page-id-326092, .page-id-326404)
.basic-card-widget:has(#jtl-onejtl-form) .col-lg-6:has(.jp644-contact-phone) {
padding: 0 22px !important;
}
/* the form column = the FULL-WIDTH light-blue region with the navy curve on top */
body:is(.page-id-325408, .page-id-325712, .page-id-326092, .page-id-326404)
.basic-card-widget:has(#jtl-onejtl-form) .col-lg-6:has(#jtl-onejtl-form) {
background-color: #89d2ff !important; /* light-blue under the curve */
background-image: url("jp727-onejtl-curve-mobile.svg?v=4") !important; /* navy curve band, transparent below */
background-repeat: no-repeat !important;
background-position: top center !important;
background-size: 100% 112px !important; /* taller band -> deeper curve */
border-radius: 0 0 46px 46px !important; /* match the card's bottom radius */
margin: 28px 0 0 0 !important; /* navy gap above; full-bleed sides (no negative margin needed) */
padding: 104px 20px 36px !important; /* top clears the deeper navy band; small side inset for the fields */
overflow: hidden !important;
}
/* flatten jp-644's inner blue box — the column IS the light-blue region now */
body:is(.page-id-325408, .page-id-325712, .page-id-326092, .page-id-326404)
.basic-card-widget:has(#jtl-onejtl-form) #jtl-onejtl-form,
body:is(.page-id-325408, .page-id-325712, .page-id-326092, .page-id-326404)
.basic-card-widget:has(#jtl-onejtl-form) .hbspt-form,
body:is(.page-id-325408, .page-id-325712, .page-id-326092, .page-id-326404)
.basic-card-widget:has(#jtl-onejtl-form) .hs-form-frame:has(form) {
background: transparent !important;
border-radius: 0 !important;
padding: 0 !important;
margin-top: 0 !important;
}
}
/* Bump the navy-column body copy up a touch — the description s render at a
light 16px next to the big heading. 18px/28px gives them more presence. The
copy is unclassed
in the text column (this page uses
product-management-section markup, not jp644-aio). */
body:is(.page-id-325408, .page-id-325712, .page-id-326092, .page-id-326404)
.basic-card-widget:has(#jtl-onejtl-form) .col-lg-6:has(.jp644-contact-phone) p {
font-size: 18px !important;
line-height: 28px !important;
}
/* "Or call us directly" + the number — nudge up to match. */
body:is(.page-id-325408, .page-id-325712, .page-id-326092, .page-id-326404)
.basic-card-widget:has(#jtl-onejtl-form) .jp644-contact-phone {
font-size: 18px !important;
}
body:is(.page-id-325408, .page-id-325712, .page-id-326092, .page-id-326404)
.basic-card-widget:has(#jtl-onejtl-form) .jp644-contact-phone strong {
font-size: 20px !important;
}