) */ .jw-hero .wp-block-kadence-advancedheading { animation: jw-rise 0.9s var(--jw-ease) 0.2s both; font-family: var(--jw-font-body); font-size: 16px; font-weight: 300; color: var(--jw-warm) !important; line-height: 1.7; opacity: 0.8; max-width: 800px; margin: 0 0 2.5rem; } /* H1 — core/heading */ .jw-hero h1.wp-block-heading { animation: jw-rise 0.9s var(--jw-ease) 0.4s both; font-family: var(--jw-font-head); font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 600; color: var(--jw-white) !important; line-height: 1.05; margin: 0 0 0.25rem; } /* Subtitle — H2 styled as italic coral line (PHP used
) */
.jw-hero h2.wp-block-heading {
animation: jw-rise 0.9s var(--jw-ease) 0.6s both;
font-family: var(--jw-font-head);
font-size: clamp(1.25rem, 3.4vw, 2.8rem);
font-weight: 400;
font-style: italic;
color: var(--jw-coral) !important;
line-height: 1.18;
margin: 0 0 1.75rem;
}
/* Widow control on hero headings. Cap line length and let the browser balance lines */
.jw-hero h1.wp-block-heading,
.jw-hero h2.wp-block-heading {
max-width: 24ch;
margin-left: auto;
margin-right: auto;
text-wrap: balance;
}
/* Breathing room between H1 and H2 on the Prove It Checklist hero */
body.page-id-125 .jw-hero h2.wp-block-heading {
margin-top: 1rem;
}
/* Button wrapper — staggered entrance */
.jw-hero .wp-block-kadence-advancedbtn {
animation: jw-rise 0.9s var(--jw-ease) 0.9s both;
}
/* Kadence button — coral CTA with shimmer, glow, breathe.
Kadence renders singlebtn as ;
these rules mirror .jw-btn / .jw-btn--coral so the button
matches visually before JS adds the class at runtime. */
.jw-hero .wp-block-kadence-advancedbtn .kt-button {
display: inline-block;
font-family: var(--jw-font-body);
font-size: 1rem !important;
font-weight: 500;
letter-spacing: 0.04em;
text-decoration: none;
padding: 16px 40px !important;
min-width: 180px;
border-radius: 4px !important;
border: none;
cursor: pointer;
position: relative;
overflow: hidden;
background-color: var(--jw-coral) !important;
color: var(--jw-white) !important;
transition: background-color 0.2s ease,
color 0.2s ease,
box-shadow 0.25s ease !important;
}
/* Shimmer layer */
.jw-hero .kt-button::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.30) 50%, transparent 65%);
transform: translateX(-150%);
pointer-events: none;
z-index: 1;
}
.jw-hero .wp-block-kadence-advancedbtn .kt-button:hover,
.jw-hero .wp-block-kadence-advancedbtn .kt-button:focus {
background-color: var(--jw-coral-dark) !important;
color: var(--jw-white) !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18),
0 0 28px 10px rgba(240, 142, 128, 0.65) !important;
text-decoration: none;
animation: jw-btn-breathe 2.4s ease-in-out infinite;
}
.jw-hero .kt-button:hover::before,
.jw-hero .kt-button:focus::before {
animation: jw-shimmer 0.65s ease;
}
.jw-hero .kt-button:focus-visible {
outline: 2px solid #375a78;
outline-offset: 3px;
}
/* =============================================
② PROBLEM
============================================= */
.jw-problem {
background-color: var(--jw-white);
padding: 4rem 2rem 1.5rem;
}
/* Kadence kbVersion:2 wraps content in .kt-inside-inner-col, so paragraphs are
no longer direct children of .jw-problem__copy. This broader selector ensures
all paragraph text in this section is near-black regardless of nesting depth. */
.jw-problem p {
color: var(--jw-text); /* #1a1a1a */
}
.jw-problem__inner {
max-width: var(--jw-max);
margin: 0 auto;
}
/* Copy block — full inner width, same as icon row */
.jw-problem__copy {
max-width: var(--jw-max);
margin: 0 auto;
}
.jw-problem__h2 {
font-family: var(--jw-font-head);
font-size: clamp(1.45rem, 2.8vw, 2.1rem);
font-weight: 600;
color: var(--jw-navy);
line-height: 1.2;
margin: 0 0 1.5rem; /* tightened from 2.5rem */
}
.jw-problem__copy > p {
font-family: var(--jw-font-body);
font-size: 1.05rem;
font-weight: 300;
color: var(--jw-text);
line-height: 1.75;
margin: 0 0 1rem;
}
.jw-problem__copy > p:last-child { margin-bottom: 0; }
/* Resolution line — coral bold, no border */
.jw-problem__resolution {
font-weight: 700 !important;
color: var(--jw-coral) !important;
margin-top: 1.5rem !important;
}
/* ── Problem icons — horizontal row, directly below H2 ── */
.jw-problem__icons {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 3rem;
padding-left: 24px;
}
.jw-problem__icon-item {
flex: 1;
max-width: 300px;
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease;
border-radius: 10px;
padding: 1rem;
align-items: center;
text-align: center;
gap: 1rem;
background-color: #eef2f5;
border-radius: 12px;
padding: 24px;
}
.jw-problem__icon {
width: 76px;
height: 76px;
color: var(--jw-coral);
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto 12px auto;
overflow: visible;
padding-left: 8px;
}
.jw-problem__icon svg {
width: 100%;
height: 100%;
overflow: visible;
}
/* Label: base weight 400, bold opening phrase via */
.jw-problem__icon-label {
font-family: var(--jw-font-body);
font-size: 1rem;
font-weight: 400;
color: var(--jw-navy);
line-height: 1.5;
margin: 0;
}
.jw-problem__icon-label strong {
font-weight: 700;
}
.jw-problem__icon-item:hover {
transform: translateY(-4px);
box-shadow: 0 6px 20px rgba(55, 90, 120, 0.12);
}
@media (max-width: 860px) {
.jw-problem__icons { flex-direction: column; align-items: center; gap: 1.5rem; margin-bottom: 2.5rem; }
.jw-problem__icon-item { max-width: 340px; width: 100%; }
}
/* =============================================
③ YES FINALLY
============================================= */
/* Section shell */
.jw-yes {
position: relative;
background-color: var(--jw-coral);
padding: 7rem 2rem 8rem;
overflow: hidden;
}
/* Kadence sets overflow:hidden on .entry-content .wp-block-kadence-rowlayout.alignfull
— keep hidden to contain the watermark within bounds */
/* Watermark — absolute, anchored to .jw-yes, behind all content.
In PHP this is a direct child of .jw-yes so position:absolute naturally
anchors here. In Gutenberg the watermark is inside a Kadence column;
the column containers are forced to position:static (see below) so
this element still escapes to .jw-yes as its containing block. */
.jw-yes__watermark {
position: absolute;
bottom: -0.15em;
left: -0.05em;
font-family: var(--jw-font-head);
font-size: clamp(5rem, 20vw, 13rem);
font-weight: 700;
line-height: 1;
white-space: nowrap;
color: rgba(255, 255, 255, 0.18);
margin: 0;
padding: 0;
pointer-events: none;
user-select: none;
z-index: 0;
}
/* Watermark shimmer — per-character spans injected by homepage.js */
.jw-yes-wm-char {
display: inline;
transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease;
}
.jw-yes-wm-char--glow {
color: #f8b5aa;
text-shadow: 0 0 14px rgba(248, 181, 170, 0.75), 0 0 32px rgba(255, 220, 215, 0.45);
transform: translateY(-3px);
}
/* PHP only: single inner container, positions above the watermark */
.jw-yes__inner {
position: relative;
z-index: 1;
max-width: var(--jw-max);
margin: 0 auto;
}
/* Navy card — PHP: flex row containing card-body (left) + fig (right) */
.jw-yes__card {
background-color: var(--jw-navy);
border-radius: 12px;
padding: 3.5rem 3rem;
display: flex;
align-items: center;
gap: 2rem;
}
/* Card text body (PHP only — Gutenberg places text directly in kt-inside-inner-col) */
.jw-yes__card-body {
flex: 1;
min-width: 0;
}
/* H2 */
.jw-yes__h2 {
font-family: var(--jw-font-head);
font-size: clamp(1.2rem, 2.2vw, 1.6rem);
font-weight: 600;
color: var(--jw-white);
line-height: 1.25;
margin: 0 0 1.75rem;
}
/* Bullet list */
.jw-yes__list {
list-style: none;
padding-left: 24px;
margin: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.jw-yes__list li {
font-family: var(--jw-font-body);
font-size: 1.125rem;
font-weight: 300;
color: var(--jw-warm);
line-height: 1.75;
padding-left: 1.75rem;
position: relative;
}
.jw-yes__list li::before {
content: '✦';
position: absolute;
left: 0;
top: 0.08em;
color: var(--jw-coral);
font-size: 0.8rem;
}
.jw-yes__list em {
font-style: italic;
color: var(--jw-coral);
font-weight: 400;
}
/* Closing sentence inside the card, after the bullets */
.jw-yes__list-closer {
font-family: var(--jw-font-body);
font-size: 1.125rem;
font-weight: 300;
color: var(--jw-warm);
line-height: 1.75;
margin: 1rem 0 0;
}
/* Illustration — PHP: right-side fixed-width flex item inside the card */
.jw-yes__fig {
flex: 0 0 300px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
align-self: center;
}
.jw-yes__illus {
max-height: 380px;
height: auto;
width: auto;
display: block;
filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.28));
}
/* Closing italic line — below card, centered */
.jw-yes__closer {
font-family: var(--jw-font-head);
font-size: 1.125rem;
font-weight: 400;
font-style: italic;
color: rgba(255, 255, 255, 0.93);
line-height: 1.75;
text-align: center;
max-width: 680px;
margin: 0 auto;
padding: 2rem 1rem 5rem;
position: relative;
z-index: 2;
}
/* ================================================================
GUTENBERG OVERRIDES — v3 single-column structure
.jw-yes (rowlayout) → .kt-row-column-wrap → .jw-yes__inner (column)
→ .kt-inside-inner-col → .jw-yes__card + .jw-yes__closer
================================================================ */
/* Static ::before fallback — visible before JS runs.
Once JS appends .jw-yes__watermark--gb, the :has() rule below hides it. */
.entry-content .jw-yes::before {
content: 'Yes, finally!';
position: absolute;
bottom: -0.12em;
left: 0;
font-family: var(--jw-font-head);
font-size: clamp(5.5rem, 14vw, 11.5rem);
font-weight: 700;
line-height: 1;
white-space: nowrap;
color: rgba(255, 255, 255, 0.18);
pointer-events: none;
user-select: none;
z-index: 0;
}
.entry-content .jw-yes:has(.jw-yes__watermark)::before { display: none; }
/* Gutenberg-injected watermark element — same position/size as ::before fallback.
Shares .jw-yes__watermark base styles (font, color, pointer-events etc.)
via the existing rule; overrides position and size to match ::before version. */
.jw-yes__watermark--gb {
bottom: -0.12em;
left: -0.05em;
font-size: clamp(5rem, 22vw, 12rem);
}
/* Constrain the column wrapper width */
.jw-yes .kt-row-column-wrap {
max-width: var(--jw-max);
margin: 0 auto;
}
/* Zero out Kadence's default column inner padding */
.jw-yes .kt-inside-inner-col {
padding: 0 !important;
}
/* Gutenberg: core/column elements inside .jw-yes__card.
Overrides wp-block-column flex-grow:1 default so the figure column
stays fixed-width and the text column fills remaining space. */
.jw-yes__card .wp-block-column.jw-yes__card-body { flex: 1; min-width: 0; }
.jw-yes__card .wp-block-column.jw-yes__fig { flex: 0 0 340px; }
/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
.jw-yes__card { flex-direction: column; align-items: center; gap: 2rem; padding: 2.5rem 2rem; }
.jw-yes__fig { flex: none; align-items: center; }
.jw-yes__illus { max-height: 260px; height: auto; }
.jw-yes__watermark { font-size: clamp(3.5rem, 16vw, 5rem); left: -0.05em; }
.jw-yes__watermark--gb,
.entry-content .jw-yes::before { font-size: clamp(4rem, 22vw, 10rem); left: 0; }
.jw-yes__closer { padding: 3rem 1rem 4rem; }
}
/* =============================================
④ GUIDE / AUTHORITY
============================================= */
.jw-guide {
background-color: var(--jw-warm);
padding: 7rem 2rem;
}
/* Thank You page tightens the section vertically. Slim the dose, dial down further if still heavy */
body.page-id-124 .jw-guide {
padding-top: 5rem;
padding-bottom: 5rem;
}
body.page-id-124 .jw-guide h2.wp-block-heading {
margin-bottom: 2rem;
}
.jw-guide__inner {
max-width: var(--jw-max);
margin: 0 auto;
}
.jw-guide__headline {
font-family: var(--jw-font-head);
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 600;
color: var(--jw-navy);
text-align: center;
margin: 0 0 4.5rem;
max-width: 820px;
margin-left: auto;
margin-right: auto;
line-height: 1.18;
}
.jw-guide__cols {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 3rem;
align-items: start;
}
/* Left — photo */
.jw-guide__photo-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.75rem;
}
.jw-guide__photo-wrap {
width: 260px;
height: 260px;
border-radius: 50%;
overflow: hidden;
/* Ring uses box-shadow (not border) so it renders outside the overflow clip —
both the ring and the circular image crop share the same center point. */
box-shadow: 0 0 0 4px var(--jw-coral),
0 12px 40px rgba(55, 90, 120, 0.18);
flex-shrink: 0;
}
.jw-guide__photo {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.jw-guide__creds {
text-align: center;
font-family: var(--jw-font-body);
font-size: 0.875rem;
font-weight: 500;
color: var(--jw-navy);
line-height: 1.9;
}
/* Right — bio */
.jw-guide__bio-col {}
.jw-guide__bio p {
font-family: var(--jw-font-body);
font-size: 1.05rem;
font-weight: 300;
color: var(--jw-text);
line-height: 1.75;
margin: 0 0 1.1rem;
}
.jw-guide__bio p:last-child { margin-bottom: 0; }
.jw-guide__intro {
font-family: var(--jw-font-head);
font-style: italic;
font-size: 1.3rem;
font-weight: 400;
color: var(--jw-coral);
}
.jw-guide__cta-wrap {
margin-top: 2.25rem;
}
.jw-guide__support {
font-family: var(--jw-font-body);
font-size: 0.88rem;
font-weight: 300;
color: var(--jw-muted);
margin: 0.9rem 0 0;
line-height: 1.6;
font-style: italic;
}
@media (max-width: 860px) {
.jw-guide__cols { grid-template-columns: 1fr; gap: 3rem; }
.jw-guide__photo-col { order: -1; }
.jw-guide__headline { margin-bottom: 3rem; }
}
/* =============================================
⑤ TESTIMONIALS
============================================= */
.jw-testimonials {
background-color: var(--jw-white);
padding: 5rem 2rem 6rem;
}
.jw-testimonials__inner {
max-width: var(--jw-max-wide);
margin: 0 auto;
}
.jw-testimonials__heading {
font-family: var(--jw-font-head);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 600;
color: var(--jw-navy);
text-align: center;
margin: 0 0 3rem;
line-height: 1.25;
}
.jw-testimonials__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.jw-testimonials__closing-wrap {
text-align: center;
max-width: 860px;
margin: 4rem auto 0;
padding: 2rem 1rem;
}
/* Inline wrapper so the cluster can anchor to the "B" corner */
.jw-testimonials__closing-inner {
display: inline-block;
position: relative;
padding-left: 4px; /* minimal clearance — cluster sits right up against the "B" */
}
/* Three-star organic cluster around upper-left of the "B" */
.jw-testimonials__sparkle-cluster {
position: absolute;
top: 0;
left: -14px;
width: 0;
height: 0;
}
.jw-testimonials__sparkle-cluster svg:nth-child(1) {
/* 18px coral — above and just left of the "B" */
position: absolute;
width: 18px;
height: 18px;
top: -16px;
left: -2px;
}
.jw-testimonials__sparkle-cluster svg:nth-child(2) {
/* 13px navy — slightly lower and to the right of the first */
position: absolute;
width: 13px;
height: 13px;
top: -4px;
left: 8px;
}
.jw-testimonials__sparkle-cluster svg:nth-child(3) {
/* 10px coral — just below, trailing down the left side of the "B" */
position: absolute;
width: 10px;
height: 10px;
top: 10px;
left: 2px;
}
/* 16px navy flourish sparkle tucked after the closing period */
.jw-testimonials__closing-end-sparkle {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
margin-left: 3px;
position: relative;
top: -1px; /* optical alignment with text baseline */
flex-shrink: 0;
}
.jw-testimonials__closing {
font-family: var(--jw-font-head);
font-style: italic;
font-weight: 400;
font-size: 1.85rem;
color: var(--jw-navy);
text-align: center;
line-height: 1.4;
margin: 0;
}
.jw-testimonial {
position: relative;
background: var(--jw-warm);
border-radius: 16px;
padding: 2.4rem 2rem 2rem;
box-shadow: 0 4px 20px rgba(55, 90, 120, 0.08);
transition: transform 0.22s var(--jw-ease),
box-shadow 0.22s ease;
display: flex;
flex-direction: column;
}
.jw-testimonial:hover {
transform: translateY(-5px);
box-shadow: 0 10px 32px rgba(55, 90, 120, 0.13);
}
.jw-testimonial__sparkle {
position: absolute;
top: 1rem;
right: 1rem;
width: 20px;
height: 20px;
opacity: 0.85;
pointer-events: none;
}
.jw-testimonial__quote {
font-family: Georgia, serif;
font-size: 4rem;
line-height: 0.75;
color: var(--jw-coral);
margin: 0 0 1.2rem;
user-select: none;
}
.jw-testimonial__text {
font-family: var(--jw-font-body);
font-size: 1rem;
font-weight: 300;
color: var(--jw-muted);
line-height: 1.75;
font-style: italic;
margin: 0;
flex: 1;
}
@media (max-width: 860px) {
.jw-testimonials__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}
/* =============================================
⑥ THREE STEPS
============================================= */
.jw-steps {
position: relative;
background-color: var(--jw-warm);
padding: 7rem 2rem;
overflow: hidden;
}
.entry-content .jw-steps::after {
content: '';
display: block;
position: absolute;
inset: 0;
background-image: url('/wp-content/uploads/2026/04/GrowthChartPeach_Background_JWM.png');
background-size: cover;
background-position: center;
opacity: 0.22;
pointer-events: none;
z-index: 0;
}
.jw-steps__inner {
position: relative;
z-index: 1;
max-width: var(--jw-max);
margin: 0 auto;
}
.jw-steps__header {
text-align: center;
margin-bottom: 4rem;
}
/* Decorative four-pointed sparkle above the eyebrow */
.jw-steps__sparkle {
display: flex;
justify-content: center;
margin-bottom: 8px;
}
.jw-steps__sparkle svg {
width: 36px;
height: 36px;
}
.jw-steps__h2 {
font-family: var(--jw-font-head);
font-size: clamp(1.65rem, 3vw, 2.3rem);
font-weight: 600;
color: var(--jw-navy);
margin: 0;
line-height: 1.2;
}
.jw-steps__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
list-style: none;
padding: 0;
margin: 0 0 3.5rem;
}
@media (max-width: 860px) {
.jw-steps__grid { grid-template-columns: 1fr; max-width: 500px; margin-left: auto; margin-right: auto; }
}
.jw-step {
background-color: var(--jw-warm);
border-radius: 10px;
padding: 2.75rem 2.25rem 2.5rem;
position: relative;
transition: transform 0.25s var(--jw-ease),
box-shadow 0.25s var(--jw-ease);
}
.jw-step:hover {
transform: translateY(-7px);
box-shadow: 0 18px 44px rgba(240, 142, 128, 0.3);
}
.jw-step__num {
display: block;
position: absolute;
top: 1.5rem;
right: 2rem;
font-family: var(--jw-font-body);
font-size: 3.75rem;
font-weight: 300;
color: var(--jw-coral);
opacity: 0.28;
line-height: 1;
}
.jw-step__icon {
width: 32px;
height: 32px;
color: var(--jw-coral);
margin: 0 0 1.1rem;
}
.jw-step__icon svg { width: 100%; height: 100%; }
.jw-step__title {
font-family: var(--jw-font-head);
font-size: 1.5rem;
font-weight: 600;
color: var(--jw-navy);
margin: 0 0 0.85rem;
line-height: 1.15;
}
.jw-step__desc {
font-family: var(--jw-font-body);
font-size: 1rem;
font-weight: 300;
color: var(--jw-muted);
line-height: 1.85;
margin: 0;
}
.jw-steps__cta {
text-align: center;
}
/* =============================================
⑥ OBJECTION
============================================= */
.jw-obj {
background-color: var(--jw-navy);
padding: 7rem 2rem;
}
.jw-obj__inner {
max-width: var(--jw-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
}
.jw-obj__h2 {
font-family: var(--jw-font-head);
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 600;
color: var(--jw-white);
line-height: 1.18;
margin: 0 0 1.75rem;
}
.jw-obj__copy p {
font-family: var(--jw-font-body);
font-size: 1.05rem;
font-weight: 300;
color: rgba(253, 240, 230, 0.85);
line-height: 1.75;
margin: 0 0 1rem;
}
.jw-obj__copy p:last-child { margin-bottom: 0; }
/* Eyebrow inside the navy objection section — restore coral + semibold weight
so it passes WCAG AA 3:1 contrast for large/bold text.
The .jw-obj__copy p rule (specificity 0-1-1) would otherwise override
the base .jw-eyebrow color and font-weight. */
.jw-obj__copy .jw-eyebrow {
color: var(--jw-coral);
font-weight: 600;
}
.jw-obj__video {
background-color: rgba(255, 255, 255, 0.06);
border: 2px dashed rgba(255, 255, 255, 0.2);
border-radius: 10px;
aspect-ratio: 16 / 9;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 2rem;
}
.jw-obj__video-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(240, 142, 128, 0.2);
border: 2px solid var(--jw-coral);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
}
.jw-obj__video-icon svg {
width: 22px;
height: 22px;
color: var(--jw-coral);
}
.jw-obj__video-label {
font-family: var(--jw-font-body);
font-size: 0.9rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.04em;
}
.jw-obj__video-sub {
font-family: var(--jw-font-body);
font-size: 0.875rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.4);
}
@media (max-width: 860px) {
.jw-obj__inner { grid-template-columns: 1fr; gap: 3rem; }
}
/* =============================================
⑦ CHOICES / OFFERINGS
============================================= */
.jw-offers {
position: relative;
background-color: var(--jw-coral);
padding: 7rem 2rem;
overflow: hidden;
}
.entry-content .jw-offers::after {
content: '';
display: block;
position: absolute;
inset: 0;
background-image: url('/wp-content/uploads/2026/04/GrowthChartNavy_Background_JWM.png');
background-size: cover;
background-position: center;
opacity: 0.15;
pointer-events: none;
z-index: 0;
}
.jw-offers__inner {
position: relative;
z-index: 1;
max-width: var(--jw-max);
margin: 0 auto;
}
.jw-offers__header {
text-align: center;
margin-bottom: 4rem;
}
.jw-offers__h2 {
font-family: var(--jw-font-head);
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
font-weight: 600;
color: var(--jw-navy);
margin: 0 0 0.5rem;
line-height: 1.15;
}
.jw-offers__sub {
font-family: var(--jw-font-body);
font-size: 1.1rem;
font-weight: 300;
color: var(--jw-navy);
opacity: 0.75;
margin: 0;
line-height: 1.6;
}
.jw-offers__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
align-items: stretch;
padding-bottom: 1rem; /* room for hover lift within overflow:hidden section */
}
@media (max-width: 1060px) {
.jw-offers__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
.jw-offers__grid { grid-template-columns: 1fr; }
}
.jw-offer {
border-radius: 16px;
padding: 2.5rem 2rem;
display: flex;
flex-direction: column;
gap: 0;
position: relative;
border-top: 3px solid rgba(240, 142, 128, 0.35);
box-shadow: 0 4px 20px rgba(55, 90, 120, 0.12);
transition: transform 0.25s ease,
box-shadow 0.25s ease,
border-top-color 0.25s ease;
}
.jw-offer:hover {
transform: translateY(-4px);
box-shadow: 0 6px 20px rgba(55, 90, 120, 0.14);
border-top-color: #f08e80;
}
/* Featured card — navy */
.jw-offer--featured {
background-color: var(--jw-navy);
}
.jw-offer--featured .jw-offer__price,
.jw-offer--featured .jw-offer__title,
.jw-offer--featured .jw-offer__desc {
color: var(--jw-white);
}
.jw-offer--featured .jw-offer__price {
color: var(--jw-white);
}
/* Inline icon sits left of the category label */
.jw-offer__price-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
display: inline-block;
vertical-align: middle;
margin-top: -0.1em; /* optical alignment with uppercase label text */
}
/* Standard cards — warm white; icon matches navy card title */
.jw-offer--standard {
background-color: var(--jw-warm);
}
.jw-offer--standard .jw-offer__price {
color: var(--jw-navy);
}
.jw-offer__price {
display: flex;
align-items: center;
gap: 0.35rem;
font-family: var(--jw-font-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--jw-coral);
margin: 0 0 0.6rem;
}
.jw-offer__title {
font-family: var(--jw-font-head);
font-size: 1.25rem;
font-weight: 600;
color: var(--jw-navy);
line-height: 1.25;
margin: 0 0 0.5rem;
}
.jw-offer__amount {
font-family: var(--jw-font-body);
font-size: 0.88rem;
font-weight: 500;
color: var(--jw-coral);
margin: 0 0 0.75rem;
}
.jw-offer--featured .jw-offer__amount {
color: rgba(240, 142, 128, 0.9);
}
.jw-offer__desc {
font-family: var(--jw-font-body);
font-size: 0.95rem;
font-weight: 300;
color: var(--jw-muted);
line-height: 1.8;
margin: 0;
padding-bottom: 1.75rem;
}
.jw-offer--featured .jw-offer__desc {
color: rgba(253, 240, 230, 0.8);
}
.jw-offer .jw-btn {
align-self: flex-start;
font-size: 0.9rem;
padding: 0.75rem 1.75rem;
margin-top: auto;
}
/* ⑧ CLOSING CTA — now part of unified footer (see footer rules below) */
/* =============================================
SITE HEADER & NAVIGATION
============================================= */
/* Header shell — sticky positioning */
body #masthead {
position: sticky;
top: 0;
z-index: 100;
}
/* Header shell — appearance */
#masthead {
background-color: var(--jw-white);
border-bottom: 2px solid var(--jw-warm);
transition: transform 0.3s ease;
will-change: transform;
}
/* ── Site title + coral magnifying glass icon ── */
.site-branding .site-title,
.site-branding .site-title a,
.site-branding p.site-title {
font-family: var(--jw-font-head);
font-size: 22px;
font-weight: 600;
color: var(--jw-navy);
text-decoration: none;
margin: 0;
letter-spacing: -0.01em;
}
.site-branding .brand:hover .site-title,
.site-branding .brand:focus .site-title {
text-decoration: none;
}
/* ── Primary nav links ──────────────────────── */
#primary-menu .menu-item > a,
#primary-menu .menu-item > a:visited {
font-family: var(--jw-font-body);
font-size: 15px;
font-weight: 400;
color: var(--jw-navy);
text-decoration: none;
position: relative;
display: inline-block;
/* Extra top padding gives the sparkle room to appear without clipping */
padding-top: 0.5em;
}
/* Sparkle ✦ that fades in above the link on hover */
#primary-menu .menu-item > a::after {
content: '✦';
position: absolute;
top: -0.05em;
left: 50%;
transform: translateX(-50%) translateY(4px);
color: var(--jw-coral);
font-size: 9px;
line-height: 1;
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
#primary-menu .menu-item > a:hover::after,
#primary-menu .menu-item > a:focus::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ── "Let's Chat" nav CTA button ────────────── */
#primary-menu .jw-nav-cta {
margin-left: 0.5rem;
}
#primary-menu .jw-nav-cta > a,
#primary-menu .jw-nav-cta > a:visited {
background-color: var(--jw-coral);
color: var(--jw-white);
border-radius: 10px;
padding: 0.45rem 1.35rem;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
transition: background-color 0.2s ease,
color 0.2s ease,
box-shadow 0.25s ease;
display: inline-block;
position: relative;
overflow: hidden;
}
/* No sparkle on the button */
#primary-menu .jw-nav-cta > a::after {
display: none;
}
/* Shimmer layer */
#primary-menu .jw-nav-cta > a::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.30) 50%, transparent 65%);
transform: translateX(-150%);
pointer-events: none;
}
#primary-menu .jw-nav-cta > a:hover,
#primary-menu .jw-nav-cta > a:focus {
background-color: var(--jw-coral-dark);
color: var(--jw-white);
text-decoration: none;
box-shadow: 0 0 14px 3px rgba(240, 142, 128, 0.40);
animation: jw-btn-breathe 2.4s ease-in-out infinite;
}
#primary-menu .jw-nav-cta > a:hover::before,
#primary-menu .jw-nav-cta > a:focus::before {
animation: jw-shimmer 0.65s ease;
}
/* =============================================
BUTTON HOVER ANIMATIONS
============================================= */
@keyframes jw-btn-breathe {
0%, 100% { transform: translateY(-2px) scale(1.00); }
50% { transform: translateY(-4px) scale(1.04); }
}
@keyframes jw-shimmer {
from { transform: translateX(-150%); }
to { transform: translateX(150%); }
}
/* =============================================
UNIFIED FOOTER — Sunset photo background
Zones: CTA · Steps+Links · Tagline+Copyright
============================================= */
/* ── Wrapper ────────────────────────────────── */
#colophon {
position: relative;
overflow: hidden;
border-top: 3px solid var(--jw-navy);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
/* Full-bleed background image */
.jw-footer__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
z-index: 0;
display: block;
}
/* Minimal overlay — warm tint, lets sunset breathe through */
.jw-footer__overlay {
position: absolute;
inset: 0;
background-color: rgba(42, 69, 96, 0.15);
z-index: 1;
}
/* All zones sit above background and overlay */
.jw-footer__cta,
.jw-footer__steps,
.jw-footer__divider,
.jw-footer__base {
position: relative;
z-index: 2;
}
/* ── Zone 1: Closing CTA ────────────────────── */
.jw-footer__cta {
padding: 3.25rem 2rem 2.5rem;
text-align: center;
background: radial-gradient(ellipse 70% 100% at center, rgba(30, 45, 60, 0.35) 0%, transparent 100%);
}
.jw-footer__cta-h2 {
font-family: var(--jw-font-head);
font-size: clamp(2rem, 4.5vw, 3.25rem);
font-weight: 600;
color: var(--jw-white);
margin: 0 0 0.75rem;
line-height: 1.12;
}
.jw-footer__cta-sub {
font-family: var(--jw-font-body);
font-size: 1.15rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.90);
margin: 0 0 2.5rem;
line-height: 1.65;
}
/* ── Thin dividing lines ────────────────────── */
.jw-footer__divider {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.22);
}
/* ── Zone 2: Steps — centered, horizontal row ── */
.jw-footer__steps {
padding: 1.5rem 2rem;
text-align: center;
background: radial-gradient(ellipse 60% 100% at center, rgba(30, 45, 60, 0.35) 0%, transparent 100%);
}
.jw-footer__steps-inner {
display: flex;
justify-content: center;
gap: 3.5rem;
flex-wrap: wrap;
max-width: var(--jw-max);
margin: 0 auto;
}
.jw-footer__step-col {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
max-width: 220px;
}
/* Discover — narrowed so "Find the story" sits on line 1, "that sets you apart." on line 2 */
.jw-footer__step-col:first-child {
max-width: 130px;
}
.jw-footer__step-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
color: var(--jw-coral);
margin: 0 auto 0.5rem;
}
.jw-footer__step-icon svg {
width: 100%;
height: 100%;
}
.jw-footer__step-title {
font-family: var(--jw-font-body);
font-size: 0.85rem;
font-weight: 600;
color: var(--jw-white);
line-height: 1.2;
}
.jw-footer__step-desc {
font-family: var(--jw-font-body);
font-size: 0.78rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.80);
line-height: 1.45;
}
/* ── Zone 3: Tagline + copyright + nav ──────── */
.jw-footer__base {
padding: 1.6rem 2rem 2rem;
text-align: center;
background: radial-gradient(ellipse 55% 100% at center, rgba(30, 45, 60, 0.35) 0%, transparent 100%);
}
.jw-footer__tagline {
font-family: var(--jw-font-head);
font-size: clamp(1.15rem, 2.2vw, 1.6rem);
font-weight: 400;
font-style: italic;
color: var(--jw-coral);
margin: 0 0 0.6rem;
line-height: 1.3;
display: inline-block; /* keeps sparkle bounding rect tight to text */
cursor: default;
}
/* Individual character spans for the letter-by-letter ripple */
.jw-tagline-char {
display: inline;
transition: color 0.18s ease, text-shadow 0.18s ease;
}
.jw-tagline-char--glow {
color: #f5c842;
text-shadow: 0 0 10px rgba(245, 200, 66, 0.88),
0 0 24px rgba(240, 142, 128, 0.55);
}
.jw-footer__brand-name {
font-family: var(--jw-font-head);
}
.jw-footer__copy {
font-family: var(--jw-font-body);
font-size: 0.8rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.58);
margin: 0 0 0.75rem;
letter-spacing: 0.02em;
}
/* Single centered links row, dot-separated */
.jw-footer__nav {
font-family: var(--jw-font-body);
font-size: 0.78rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.55);
margin: 0;
}
.jw-footer__nav a {
color: rgba(255, 255, 255, 0.68);
text-decoration: none;
transition: color 0.2s ease;
}
.jw-footer__nav a:hover {
color: var(--jw-white);
text-decoration: none;
}
/* ── Responsive ─────────────────────────────── */
@media (max-width: 600px) {
.jw-footer__steps-inner { gap: 2rem; }
.jw-footer__step-col { max-width: 160px; }
}
/* ================================================================
GUTENBERG BRIDGE — SHARED (sections ②–⑨)
Full-bleed, max-width, padding normalization.
================================================================ */
/* Full-bleed — all section rows are alignnone.
Note: .jw-lg-form is intentionally excluded since it now renders as a centered card, not a full-bleed section */
.entry-content .jw-problem,
.entry-content .jw-yes,
.entry-content .jw-guide,
.entry-content .jw-steps,
.entry-content .jw-testimonials,
.entry-content .jw-obj,
.entry-content .jw-offers,
.entry-content .jw-cta,
.entry-content .jw-lg-intro,
.entry-content .jw-lg-signoff {
width: 100vw;
max-width: 100vw;
margin-left: calc(-50vw + 50%);
}
/* Content column wrap: constrain width + zero Kadence-generated padding.
Section-level padding comes from existing jw-* rules on the wrapper. */
.entry-content .jw-problem > .kt-row-column-wrap,
.entry-content .jw-yes > .kt-row-column-wrap,
.entry-content .jw-guide > .kt-row-column-wrap,
.entry-content .jw-steps > .kt-row-column-wrap,
.entry-content .jw-testimonials > .kt-row-column-wrap,
.entry-content .jw-obj > .kt-row-column-wrap,
.entry-content .jw-offers > .kt-row-column-wrap,
.entry-content .jw-cta > .kt-row-column-wrap,
.entry-content .jw-lg-intro > .kt-row-column-wrap,
.entry-content .jw-lg-form > .kt-row-column-wrap,
.entry-content .jw-lg-signoff > .kt-row-column-wrap {
max-width: var(--jw-max);
margin: 0 auto;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}
/* Zero Kadence padding on nested inner rows too */
.jw-problem .kb-row-layout-wrap .kt-row-column-wrap,
.jw-yes .kb-row-layout-wrap .kt-row-column-wrap,
.jw-guide .kb-row-layout-wrap .kt-row-column-wrap,
.jw-steps .kb-row-layout-wrap .kt-row-column-wrap,
.jw-testimonials .kb-row-layout-wrap .kt-row-column-wrap,
.jw-obj .kb-row-layout-wrap .kt-row-column-wrap,
.jw-offers .kb-row-layout-wrap .kt-row-column-wrap,
.jw-cta .kb-row-layout-wrap .kt-row-column-wrap {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ================================================================
GUTENBERG BRIDGE — ② PROBLEM
================================================================ */
/* Eyebrow */
.jw-problem .has-small-font-size {
font-family: var(--jw-font-body) !important;
font-size: 1rem !important;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #1a1a1a !important;
margin: 0 0 0.85rem;
}
/* H2 */
.jw-problem h2.wp-block-heading {
font-family: var(--jw-font-head);
font-size: clamp(1.45rem, 2.8vw, 2.1rem) !important;
font-weight: 600;
color: var(--jw-navy) !important;
line-height: 1.2;
margin: 0 0 1.5rem;
}
/* Icon row — 3-column Kadence row, columns as cards */
.jw-problem .kt-has-3-columns .wp-block-kadence-column {
background-color: #eef2f5;
border-radius: 12px;
padding: 20px 32px;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Problem section — vertically center the columns in the two-column variant.
.kt-row-column-wrap is display: grid in Kadence; align-items: center centers grid
items along the block axis. */
.jw-problem .kt-row-column-wrap {
align-items: center;
}
/* Problem section — photo treatment (About page two-column variant).
isolation: isolate forces a new stacking context so the ::after with z-index: -1
stays scoped beneath the image but inside the wrap, not behind the page background. */
.jw-problem .jw-problem-photo-wrap {
position: relative;
display: inline-block;
width: 100%;
isolation: isolate;
}
.jw-problem .jw-problem-photo-wrap::after {
content: '';
position: absolute;
bottom: -12px;
right: -12px;
width: 100%;
height: 100%;
background-color: #f08e80;
opacity: 0.85;
border-radius: 12px;
z-index: -1;
box-shadow: 0 8px 28px rgba(55, 90, 120, 0.22);
}
.jw-problem .jw-problem-photo-wrap img {
border-radius: 12px;
position: relative;
z-index: 1;
display: block;
width: 100%;
max-height: 500px;
object-fit: cover;
object-position: center 30%;
}
/* Sparkle-icon prefix line — used to flag the closing emphasis paragraph
in the Problem section. Flex container aligns the small coral sparkle
to the top-left of the line of text. */
.jw-problem-sparkle-line {
display: flex;
align-items: flex-start;
gap: 8px;
padding-left: 0;
}
.jw-problem-sparkle-line .jw-sparkle-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 3px;
}
/* Problem section — coral underline highlight (used inline within copy). */
.jw-problem-highlight {
text-decoration: underline;
text-decoration-color: #f08e80;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.jw-problem .kt-has-3-columns .wp-block-kadence-column:hover {
transform: translateY(-4px);
box-shadow: 0 6px 20px rgba(55, 90, 120, 0.12);
}
.jw-problem .kt-has-3-columns p {
font-family: var(--jw-font-body);
font-size: 1rem;
font-weight: 400;
color: #1a1a1a !important;
line-height: 1.5;
margin: 0;
}
/* Breathing room below the card row, above the body copy */
.jw-problem .kb-row-layout-wrap {
margin-bottom: 32px;
}
/* Body copy — lighter weight for narrative paragraphs */
.jw-problem > .kt-row-column-wrap .kt-inside-inner-col {
font-family: var(--jw-font-body);
font-weight: 300;
font-size: 1.05rem;
line-height: 1.75;
}
.jw-problem > .kt-row-column-wrap .kt-inside-inner-col > p {
margin: 0 0 1rem;
}
/* Resolution line — coral bold */
.jw-problem .has-theme-palette-2-color {
font-weight: 700 !important;
color: var(--jw-coral) !important;
margin-top: 1.5rem !important;
}
@media (max-width: 860px) {
.jw-problem .kt-has-3-columns {
grid-template-columns: 1fr !important;
max-width: 340px;
margin: 0 auto;
}
}
/* ================================================================
GUTENBERG BRIDGE — ③ YES FINALLY
Existing CSS already handles: section bg/padding, overflow:visible,
::before watermark fallback, --gb watermark styles.
JS (global.js) injects watermark element via Gutenberg path.
================================================================ */
/* Navy card — the inner Kadence row with palette1 background */
.jw-yes .kb-row-layout-wrap.has-theme-palette1-background-color {
border-radius: 12px;
padding: 3.5rem 3rem;
background-color: var(--jw-navy) !important;
}
/* Navy card col-wrap — flex row so text column and injected figure
lay out side-by-side (text left, figure right). svg-inject.js
appends the ). */
.jw-aboutjess-whoiserve > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > p {
font-family: var(--jw-font-body);
font-size: 1rem;
color: var(--jw-navy);
}
/* Force 6-col rowlayout into a 3-col grid.
ROOT CAUSE for prior failure: .kt-has-6-columns and .kt-row-column-wrap
are the SAME element (Kadence assigns both classes to the inner grid
wrapper). The previous parent>child selector matched nothing. Chained-
class selector targets the correct element. Specificity (0,3,0) beats
Kadence per-instance .kb-row-layout-id{uid} > .kt-row-column-wrap
(0,2,0). display:grid already set by Kadence base; no need to re-state. */
.jw-aboutjess-whoiserve .kt-row-column-wrap.kt-has-6-columns {
grid-template-columns: repeat(3, 180px) !important;
justify-content: center !important;
gap: 2rem !important;
}
/* Card base — applies to all 6. Circles via border-radius:50% + aspect-
ratio 1/1; max-width caps diameter so cards stay round (not oval) at
wider grid cells; flex column centers the eyebrow number + H3 inside
the circle. */
.jw-aboutjess-whoiserve .kt-has-6-columns .wp-block-kadence-column {
border-radius: 50%;
width: 180px;
height: 180px;
flex-shrink: 0;
margin: 0 auto;
padding: 1.75rem 1.25rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Alternating blush (odd) + navy (even).
Odd positions: 1, 3, 5 (Caregiving, Healthcare, Therapists)
Even positions: 2, 4, 6 (Environment, Nonprofits, Coaches) */
.jw-aboutjess-whoiserve .kt-has-6-columns .wp-block-kadence-column:nth-child(odd) {
background-color: var(--jw-warm);
}
.jw-aboutjess-whoiserve .kt-has-6-columns .wp-block-kadence-column:nth-child(even) {
background-color: var(--jw-navy);
}
/* Blush cards — navy text */
.jw-aboutjess-whoiserve .kt-has-6-columns .wp-block-kadence-column:nth-child(odd) .has-small-font-size,
.jw-aboutjess-whoiserve .kt-has-6-columns .wp-block-kadence-column:nth-child(odd) h3,
.jw-aboutjess-whoiserve .kt-has-6-columns .wp-block-kadence-column:nth-child(odd) p {
color: var(--jw-navy) !important;
}
/* Navy cards — light text */
.jw-aboutjess-whoiserve .kt-has-6-columns .wp-block-kadence-column:nth-child(even) .has-small-font-size,
.jw-aboutjess-whoiserve .kt-has-6-columns .wp-block-kadence-column:nth-child(even) h3,
.jw-aboutjess-whoiserve .kt-has-6-columns .wp-block-kadence-column:nth-child(even) p {
color: var(--jw-white) !important;
}
/* Hover lift */
.jw-aboutjess-whoiserve .kt-has-6-columns .wp-block-kadence-column:hover {
transform: translateY(-4px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
/* Card number eyebrow — small, locked weight */
.jw-aboutjess-whoiserve .kt-has-6-columns .has-small-font-size {
font-family: var(--jw-font-body) !important;
font-size: 0.875rem !important;
font-weight: 500;
letter-spacing: 0.16em;
margin: 0 0 0.5rem;
}
/* Card H3 — industry name */
.jw-aboutjess-whoiserve .kt-has-6-columns h3.wp-block-kadence-advancedheading {
font-family: var(--jw-font-head);
font-size: clamp(0.9rem, 1.5vw, 1.1rem) !important;
font-weight: 600;
line-height: 1.2;
margin: 0;
white-space: nowrap;
}
/* Mobile — keep 3-across, shrink padding + type per spec */
@media (max-width: 860px) {
.jw-aboutjess-whoiserve {
padding: 3rem 1rem;
}
.jw-aboutjess-whoiserve .kt-has-6-columns > .kt-row-column-wrap {
gap: 0.625rem !important;
}
.jw-aboutjess-whoiserve .kt-has-6-columns .wp-block-kadence-column {
padding: 1rem 0.5rem;
}
.jw-aboutjess-whoiserve .kt-has-6-columns .has-small-font-size {
font-size: 0.75rem !important;
margin: 0 0 0.25rem;
}
.jw-aboutjess-whoiserve .kt-has-6-columns h3.wp-block-kadence-advancedheading {
font-size: 0.95rem !important;
}
}
/* ── Section 5: Lead Generator (jw-aboutjess-leadgen) ──────────────── */
/* Near edge-to-edge form on the About page only — ~24px side padding.
Existing homepage .jw-lg-form rule (line 3460) caps width at 600px;
override via body.page-id-166 scope so homepage stays untouched. */
body.page-id-166 .jw-aboutjess-leadgen .jw-lg-form {
max-width: 1100px !important;
margin-inline: auto;
padding: 3rem 24px !important;
}
body.page-id-166 .jw-aboutjess-leadgen .jw-lg-form > .kt-row-column-wrap {
max-width: none !important;
}
/* Bullet list color match — existing .jw-lg-form rule (line 3627) only
targets `> p`, leaving
tags (previously three separate paragraphs). */
.jw-guide-photo-col .jw-creds-nowrap {
white-space: nowrap;
}
/* Bio column (Gutenberg). Body-size light text, left-aligned by default. */
.jw-guide-bio-col p {
font-family: var(--jw-font-body);
font-size: 1.05rem;
font-weight: 300;
color: var(--jw-text) !important;
line-height: 1.75;
margin: 0 0 0.65rem;
}
/* Coral italic opener "Someone who gets it." inside the first bio paragraph.
Bumps the opener slightly larger than surrounding body text to match the
"Hey, I'm Jess." weight on the homepage. */
.jw-guide-bio-col p em span[style] {
font-size: 1.15rem;
font-style: italic;
}
/* Guide section — magazine photo treatment (About page variant).
Adapts .jw-problem-photo-wrap with the coral peek-a-boo offset moved to
TOP-LEFT (opposite of Problem's bottom-right). isolation: isolate scopes
the ::after z-index: -1 to this stacking context. */
.jw-guide .jw-guide-photo-wrap {
position: relative;
display: block;
width: 100%;
max-width: 340px;
isolation: isolate;
margin: 0;
}
.jw-guide .jw-guide-photo-wrap::after {
content: '';
position: absolute;
top: -12px;
left: -12px;
width: 100%;
height: 100%;
background-color: #f08e80;
opacity: 0.85;
border-radius: 12px;
z-index: -1;
box-shadow: 0 8px 28px rgba(55, 90, 120, 0.22);
}
.jw-guide .jw-guide-photo-wrap .kb-img {
border-radius: 12px;
position: relative;
z-index: 1;
display: block;
width: 100%;
max-height: 480px;
object-fit: cover;
object-position: top center;
}
/* Credential bar — sits below the magazine photo. Navy bg, white text,
centered single line with pipe separators. */
.jw-guide-cred-bar {
background-color: #375a78;
color: #ffffff;
font-size: 0.72rem;
font-weight: 500;
text-align: center;
padding: 0.5rem 0.75rem;
margin-top: 1.5rem;
letter-spacing: 0.03em;
width: 100%;
}
/* Native-block credential bar — mirrors .jw-guide-cred-bar styling exactly for
the new paragraph-block variant used on the About page Guide section.
!important on color overrides the has-theme-palette-3-color class injected by
the block's textColor attr. border-radius: 0 explicit for defensive
"straight corners" guarantee against any cascade-injected rounding.
line-height: 1.5 tightens the three
-separated lines so the stacked bar
stays compact (body baseline of 1.6 would feel loose for label text). */
.jw-aboutjess-creds {
background-color: #375a78;
color: #ffffff !important;
font-size: 0.72rem;
font-weight: 500;
text-align: center;
padding: 0.5rem 0.75rem;
margin-top: 1.5rem;
letter-spacing: 0.03em;
width: 100%;
max-width: 22rem;
border-radius: 0;
line-height: 1.5;
}
/* =================================================================
About page — NEW native "Aboutjess" rebuild
Mirrors the OLD .jw-guide-* styling exactly so the rebuilt native
block section matches the established Guide section design token
for token. Each rule below maps to one item from the OLD section.
================================================================= */
/* Row = positioning context for the "Hey, I'm Jess." watermark (::before
below) and the "Someone who gets it." coral phrase. .jw-aboutjess-row
has no Kadence-supplied position; explicit position: relative anchors
absolute children to the row. */
.jw-aboutjess-row {
position: relative;
padding-top: 9rem;
}
/* "Someone who gets it." coral italic opener — mirrors homepage Guide
opener rule at line 2519. Selector list catches BOTH the mark and the
inside it; the em selector defeats the existing 1.15rem em rule
at line 2348 so the visible text actually renders at 1.3rem. */
.jw-aboutjess-row .has-inline-color.has-theme-palette-2-color,
.jw-aboutjess-row .has-inline-color.has-theme-palette-2-color em {
font-family: var(--jw-font-head);
font-style: italic;
font-size: 1.3rem;
font-weight: 400;
color: var(--jw-coral) !important;
background-color: transparent !important;
}
/* "Hey, I'm Jess." navy static label — uses ::after, NOT ::before, because
Kadence's plugin CSS sets .kb-row-layout-wrap::before { content: "" }
as a clearfix on the SAME element (the rowlayout outer wrapper carries
both .jw-aboutjess-row and .kb-row-layout-wrap classes). The Kadence
stylesheet loads after the child theme stylesheet, so its empty content
wins on equal specificity and overwrites our text. ::after is not
claimed by Kadence and renders cleanly. */
.jw-aboutjess-row::after {
content: "Hey, I'm Jess.";
position: absolute;
top: 2.5rem;
left: 50%;
transform: translateX(-64%);
font-family: var(--jw-font-head);
font-style: italic;
font-weight: 700;
font-size: clamp(4.5rem, 9vw, 7.5rem);
line-height: 1;
color: rgba(55, 90, 120, 0.65);
white-space: nowrap;
pointer-events: none;
z-index: 2;
}
/* (a) Photo + top-left coral peek-a-boo offset — mirrors .jw-guide-photo-wrap.
align-self:start defeats any Kadence flex-centering from align:"center" on
the image block; margin-inline 5rem auto inset positions the 340px box
inward from the column's left edge toward center. */
.jw-aboutjess-row .jw-aboutjess-photo {
position: relative;
display: block;
width: 100%;
max-width: 340px !important;
isolation: isolate;
margin: 0 1.5rem 0 auto !important;
align-self: start;
}
.jw-aboutjess-row .jw-aboutjess-photo::after {
content: '';
position: absolute;
top: -12px;
left: -12px;
width: 100%;
height: 100%;
background-color: #f08e80;
opacity: 0.85;
border-radius: 12px;
z-index: -1;
box-shadow: 0 8px 28px rgba(55, 90, 120, 0.22);
}
.jw-aboutjess-row .jw-aboutjess-photo .kb-img {
border-radius: 12px;
position: relative;
z-index: 1;
display: block;
width: 100%;
max-width: 340px !important;
max-height: 480px;
object-fit: cover;
object-position: top center;
}
/* (b) "Someone who gets it." coral italic lead-phrase. NEW markup wraps the
phrase in ; coral color comes from has-theme-palette-2-color on
the mark. This rule only asserts size + italic. */
.jw-aboutjess-intro mark em {
font-size: 1.15rem;
font-style: italic;
}
/* (c) Navy italic serif eyebrow "The instinct has been there…" — mirrors
.jw-guide-instinct. Navy color comes from has-theme-palette-1-color on
the block (palette1 textColor attr). */
.jw-aboutjess-eyebrow {
font-family: var(--jw-font-head);
font-style: italic;
text-align: center;
margin-top: 2rem;
font-size: clamp(1.5rem, 3vw, 2.25rem);
}
/* (d) Three proof columns with thin coral vertical dividers — mirrors
.jw-guide-proof-col + .jw-guide-proof-row. Targets the unclassed Kadence
columns inside .jw-aboutjess-proof rowlayout. */
.jw-aboutjess-proof {
margin-top: 2rem;
}
.jw-aboutjess-proof .wp-block-kadence-column {
padding: 0 2rem;
}
.jw-aboutjess-proof .wp-block-kadence-column:not(:last-child) {
border-right: 2px solid #f08e80;
}
.jw-aboutjess-proof .wp-block-kadence-column p {
font-family: var(--jw-font-body);
font-size: 1rem;
line-height: 1.6;
text-align: left;
color: var(--jw-text);
margin: 0;
}
/* (e) Coral sparkle ::before marker on each proof paragraph — replaces the
OLD manual SVG-injection approach. \2726 is ✦ (four-point sparkle), same
glyph used in the Problem section's sparkle divider for visual rhythm. */
.jw-aboutjess-proof .wp-block-kadence-column p::before {
content: "\2726";
color: #f08e80;
display: inline-block;
margin-right: 0.5rem;
vertical-align: middle;
font-size: 0.875em;
}
/* (d) Mobile — when proof columns stack at the 767px Kadence breakpoint,
swap the vertical divider for a horizontal one with padding breathing room. */
@media (max-width: 767px) {
.jw-aboutjess-proof .wp-block-kadence-column:not(:last-child) {
border-right: none;
border-bottom: 2px solid #f08e80;
padding-bottom: 1.5rem;
}
}
/* (f) Centered italic navy closer "The work was always good…" — mirrors
.jw-guide-closing. The NEW paragraph carries textColor:palette3 which
inherits down to the em as near-black; the descendant em rule overrides
that with navy via direct (non-!important) descendant cascade. */
.jw-aboutjess-closer {
display: block;
text-align: center;
padding-top: 3rem;
}
.jw-aboutjess-closer em {
color: var(--jw-navy);
font-style: italic;
}
/* =================================================================
About page — Aboutjess spacing-parity supplement
Three targeted fixes after colLayout flip to equal: bio text cap +
eyebrow group padding kill. Photo inset handled in modified rule above.
================================================================= */
/* Bio text width cap — pulls the intro and any subsequent bio paragraphs to a
comfortable line-length so they don't span the full half-column edge to edge.
:not(.jw-aboutjess-creds) excludes the credential bar which keeps its own
22rem cap (preserves the navy-bar visual we locked earlier). Default flex-
column align-items: stretch + max-width = element sits at column's left edge,
so no explicit margin override needed. */
.jw-aboutjess-intro,
.jw-aboutjess-intro ~ p:not(.jw-aboutjess-creds) {
max-width: 34rem;
}
/* Eyebrow group padding kill — neutralizes the wp:group wrapper's has-background
default ~1.25rem padding so eyebrow's own margin-top: 2rem is the only gap
above "The instinct…", and closer's padding-top: 3rem is the only gap above
it. :has() scopes the override to ONLY the group containing the Aboutjess
eyebrow, leaving any other has-background groups elsewhere on the site
unaffected. */
.wp-block-group:has(> .jw-aboutjess-eyebrow) {
padding: 0;
}
/* Magazine eyebrow heading between the bio row and the proof row. Noto Serif
Display italic at a responsive size, centered, navy. Floor of 1.5rem keeps
it from going smaller than Kadence's default H3 size. */
.jw-guide-instinct {
font-family: var(--jw-font-head);
font-style: italic;
color: var(--jw-navy);
text-align: center;
margin-top: 2rem;
font-size: clamp(1.5rem, 3vw, 2.25rem);
}
/* Vertically center the bio paragraphs in the stretched grid cell, so the short
intro block sits middle-aligned next to the taller photo column. */
.jw-guide-bio-col > .kt-inside-inner-col {
justify-content: center;
}
/* Three-column proof points — left-aligned text with inline coral sparkle bullet
and thin coral vertical divider between columns. On mobile (Kadence collapses
3-col rowlayouts to single column at 767px), the vertical dividers become
horizontal with breathing room above the line. */
.jw-guide-proof-col {
padding: 0 2rem;
}
.jw-guide-proof-col:not(:last-child) {
border-right: 2px solid #f08e80;
}
/* Breathing room above the proof row, separating it from the instinct heading. */
.jw-guide-proof-row {
margin-top: 2rem;
}
.jw-guide-proof-col p {
font-family: var(--jw-font-body);
font-size: 1rem;
line-height: 1.6;
text-align: left;
color: var(--jw-text);
max-width: none;
margin: 0;
}
@media (max-width: 767px) {
.jw-guide-proof-col:not(:last-child) {
border-right: none;
border-bottom: 2px solid #f08e80;
padding-bottom: 1.5rem;
}
}
/* Closing flourish below the proof columns — italic navy, centered, breathing
room above. Used on the wrap paragraph "The work was always good…". */
.jw-guide-closing {
display: block;
text-align: center;
padding-top: 3rem;
}
.jw-guide-closing em {
color: var(--jw-navy);
font-style: italic;
}
/* "Hey, I'm Jess" — coral italic opener */
.jw-guide .has-inline-color.has-theme-palette-2-color {
font-family: var(--jw-font-head);
font-style: italic;
font-size: 1.3rem;
font-weight: 400;
color: var(--jw-coral) !important;
background-color: transparent !important;
}
/* Support text below CTA. Scoped to .kt-has-2-columns so the eyebrow doesn't inherit italic */
.jw-guide .kt-has-2-columns .has-small-font-size {
font-family: var(--jw-font-body) !important;
font-size: 0.88rem !important;
font-weight: 300;
color: var(--jw-muted) !important;
margin: 0.9rem 0 0;
line-height: 1.6;
font-style: italic;
}
@media (max-width: 860px) {
.jw-guide .kt-has-2-columns {
grid-template-columns: 1fr !important;
}
.jw-guide-photo-col {
order: -1;
}
.jw-guide h2.wp-block-heading { margin-bottom: 3rem; }
}
/* Kadence button — same specificity fix as .jw-hero .kt-button.
Chained selector at (0,3,0) beats Kadence's .kb-button:not(...) base
and (0,4,0) hover beats Kadence's .kb-button:not(...):hover reset. */
.jw-guide .wp-block-kadence-advancedbtn .kt-button {
padding: 14px 32px !important;
min-width: 160px;
font-size: 1rem !important;
border-radius: 4px !important;
}
.jw-guide .wp-block-kadence-advancedbtn .kt-button:hover,
.jw-guide .wp-block-kadence-advancedbtn .kt-button:focus {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18),
0 0 28px 10px rgba(240, 142, 128, 0.65) !important;
animation: jw-btn-breathe 2.4s ease-in-out infinite;
}
/* ================================================================
GUTENBERG BRIDGE — ⑤ STEPS
Existing CSS handles: ::before texture overlay, section bg/padding,
z-index on inner content (via Kadence base .kt-row-column-wrap).
================================================================ */
/* Eyebrow */
.jw-steps .has-small-font-size {
font-family: var(--jw-font-body) !important;
font-size: 0.8rem !important;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--jw-coral) !important;
margin: 0 0 0.85rem;
}
/* H2 */
.jw-steps h2.wp-block-heading {
font-family: var(--jw-font-head);
font-size: clamp(1.65rem, 3vw, 2.3rem) !important;
font-weight: 600;
color: var(--jw-navy) !important;
margin: 0 0 4rem;
line-height: 1.2;
}
/* Step cards — 3-col inner row columns */
.jw-steps .kt-has-3-columns .wp-block-kadence-column {
background-color: var(--jw-warm);
border-radius: 10px;
padding: 2.75rem 2.25rem 2.5rem;
position: relative;
transition: transform 0.25s var(--jw-ease),
box-shadow 0.25s var(--jw-ease);
}
.jw-steps .kt-has-3-columns .wp-block-kadence-column:hover {
transform: translateY(-7px);
box-shadow: 0 18px 44px rgba(240, 142, 128, 0.3);
}
/* Clear Kadence's position:sticky from the inner col so the absolutely
positioned step number anchors to the card column instead of the inner. */
.jw-steps .kt-has-3-columns .kt-inside-inner-col {
position: static;
}
/* Step number — absolute positioned, large faded */
.jw-steps .kt-has-3-columns .has-small-font-size {
position: absolute;
top: 1.5rem;
right: 1.5rem;
font-size: 3.75rem !important;
font-weight: 300;
color: var(--jw-coral) !important;
opacity: 0.28;
line-height: 1;
margin: 0;
letter-spacing: normal;
text-transform: none;
pointer-events: none;
}
/* Step title */
.jw-steps .kt-has-3-columns .has-theme-palette-1-color:not(.has-small-font-size) {
font-family: var(--jw-font-head);
font-size: 1.5rem !important;
font-weight: 600;
color: var(--jw-navy) !important;
margin: 0 0 0.85rem;
line-height: 1.15;
padding-right: 3.5rem;
}
/* Step description */
.jw-steps .kt-has-3-columns .has-theme-palette-3-color {
font-family: var(--jw-font-body);
font-size: 1rem;
font-weight: 300;
color: var(--jw-muted) !important;
line-height: 1.85;
margin: 0;
}
/* CTA — centered below cards */
.jw-steps > .kt-row-column-wrap .wp-block-kadence-advancedbtn {
text-align: center;
margin-top: 3.5rem;
}
@media (max-width: 860px) {
.jw-steps .kt-has-3-columns {
grid-template-columns: 1fr !important;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
}
/* Kadence button — same specificity fix as .jw-hero / .jw-guide.
Chained selector at (0,3,0) beats Kadence's .kb-button:not(...) base
and (0,4,0) hover beats Kadence's .kb-button:not(...):hover reset. */
.jw-steps .wp-block-kadence-advancedbtn .kt-button {
padding: 14px 32px !important;
min-width: 160px;
font-size: 1rem !important;
border-radius: 4px !important;
}
.jw-steps .wp-block-kadence-advancedbtn .kt-button:hover,
.jw-steps .wp-block-kadence-advancedbtn .kt-button:focus {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18),
0 0 28px 10px rgba(240, 142, 128, 0.65) !important;
animation: jw-btn-breathe 2.4s ease-in-out infinite;
}
/* ================================================================
GUTENBERG BRIDGE — ⑥ TESTIMONIALS
================================================================ */
/* H2 */
.jw-testimonials h2.wp-block-heading {
font-family: var(--jw-font-head);
font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
font-weight: 600;
color: var(--jw-navy) !important;
text-align: center;
margin: 0 0 3rem;
line-height: 1.25;
}
/* Testimonial cards — 3-col inner row columns */
/* Clear Kadence's position:sticky from the inner col so the absolutely
positioned .jw-testimonial__sparkle anchors to the card column, not
the inner col (same fix we applied for the Steps number). */
.jw-testimonials .kt-has-3-columns .kt-inside-inner-col {
position: static;
}
.jw-testimonials .kt-has-3-columns .wp-block-kadence-column {
background: var(--jw-warm);
border-radius: 16px;
padding: 2.4rem 2rem 2rem;
box-shadow: 0 4px 20px rgba(55, 90, 120, 0.08);
transition: transform 0.22s var(--jw-ease),
box-shadow 0.22s ease;
position: relative;
}
.jw-testimonials .kt-has-3-columns .wp-block-kadence-column:hover {
transform: translateY(-5px);
box-shadow: 0 10px 32px rgba(55, 90, 120, 0.13);
}
/* Quote mark via pseudo-element */
.jw-testimonials .kt-has-3-columns .kt-inside-inner-col::before {
content: '\201C';
display: block;
font-family: Georgia, serif;
font-size: 4rem;
line-height: 0.75;
color: var(--jw-coral);
margin: 0 0 1.2rem;
user-select: none;
}
/* Testimonial text */
.jw-testimonials .kt-has-3-columns p {
font-family: var(--jw-font-body);
font-size: 1rem;
font-weight: 300;
color: var(--jw-muted) !important;
line-height: 1.75;
font-style: italic;
margin: 0;
}
/* Closing tagline */
.jw-testimonials > .kt-row-column-wrap .kt-inside-inner-col > p.has-text-align-center {
font-family: var(--jw-font-head);
font-style: italic;
font-weight: 400;
font-size: 1.85rem;
color: var(--jw-navy) !important;
text-align: center;
line-height: 1.4;
margin: 4rem auto 0;
max-width: 860px;
}
@media (max-width: 860px) {
.jw-testimonials .kt-has-3-columns {
grid-template-columns: 1fr !important;
max-width: 480px;
margin: 0 auto;
}
}
/* ================================================================
GUTENBERG BRIDGE — ⑦ OBJECTION
================================================================ */
/* 2-column inner layout */
.jw-obj .kt-has-2-columns {
gap: 5rem;
align-items: center;
}
/* Eyebrow — coral on navy */
.jw-obj .has-small-font-size {
font-family: var(--jw-font-body) !important;
font-size: 1rem !important;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--jw-coral) !important;
margin: 0 0 0.85rem;
}
/* H2 */
.jw-obj h2.wp-block-heading {
font-family: var(--jw-font-head);
font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
font-weight: 600;
color: var(--jw-white) !important;
line-height: 1.18;
margin: 0 0 1.75rem;
}
/* Copy paragraphs — left column */
.jw-obj .kt-has-2-columns .wp-block-kadence-column:first-child p:not(.has-small-font-size) {
font-family: var(--jw-font-body);
font-size: 1.05rem;
font-weight: 300;
color: rgba(253, 240, 230, 0.85) !important;
line-height: 1.75;
margin: 0 0 1rem;
}
/* Video placeholder — right column */
.jw-obj .kt-has-2-columns .wp-block-kadence-column:nth-child(2) .kt-inside-inner-col {
background-color: rgba(255, 255, 255, 0.06);
border: 2px dashed rgba(255, 255, 255, 0.2);
border-radius: 10px;
aspect-ratio: 16 / 9;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 2rem;
}
.jw-obj .kt-has-2-columns .wp-block-kadence-column:nth-child(2) p {
font-family: var(--jw-font-body);
font-size: 0.875rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.4) !important;
margin: 0;
}
.jw-obj .kt-has-2-columns .wp-block-kadence-column:nth-child(2) p:first-of-type {
font-size: 0.9rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.7) !important;
}
@media (max-width: 860px) {
.jw-obj .kt-has-2-columns {
grid-template-columns: 1fr !important;
gap: 3rem;
}
}
/* ================================================================
GUTENBERG BRIDGE — ⑧ OFFERINGS
Existing CSS handles: ::before navy texture overlay, section
bg/padding, overflow:hidden, z-index on inner content.
================================================================ */
/* Header H2 */
.jw-offers h2.wp-block-heading {
font-family: var(--jw-font-head);
font-size: clamp(1.75rem, 3.5vw, 2.75rem) !important;
font-weight: 600;
color: var(--jw-navy) !important;
margin: 0 0 0.5rem;
line-height: 1.15;
}
/* Header sub-text */
.jw-offers > .kt-row-column-wrap .kt-inside-inner-col > p.has-text-align-center {
font-family: var(--jw-font-body);
font-size: 1.1rem;
font-weight: 300;
color: var(--jw-navy) !important;
opacity: 0.75;
margin: 0 0 4rem;
line-height: 1.6;
}
/* 4-column card grid — shared card styling */
.jw-offers .kt-has-4-columns .wp-block-kadence-column {
border-radius: 16px;
padding: 2.5rem 2rem;
position: relative;
border-top: 3px solid rgba(240, 142, 128, 0.35);
box-shadow: 0 4px 20px rgba(55, 90, 120, 0.12);
transition: transform 0.25s ease,
box-shadow 0.25s ease,
border-top-color 0.25s ease;
}
.jw-offers .kt-has-4-columns .wp-block-kadence-column:hover {
transform: translateY(-4px);
box-shadow: 0 6px 20px rgba(55, 90, 120, 0.14);
border-top-color: #f08e80;
}
/* Card inner — flex column so button pushes to bottom */
.jw-offers .kt-has-4-columns .kt-inside-inner-col {
display: flex;
flex-direction: column;
height: 100%;
}
/* Standard cards (1-3) — warm background */
.jw-offers .kt-has-4-columns .wp-block-kadence-column:nth-child(-n+3) {
background-color: var(--jw-warm);
}
/* Featured card (4) — navy background */
.jw-offers .kt-has-4-columns .wp-block-kadence-column:nth-child(4) {
background-color: var(--jw-navy);
}
/* Price / category label */
.jw-offers .kt-has-4-columns .has-small-font-size {
font-family: var(--jw-font-body) !important;
font-size: 0.72rem !important;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
margin: 0 0 0.6rem;
line-height: 1.4;
}
/* Card title (h3) */
.jw-offers .kt-has-4-columns h3.wp-block-heading {
font-family: var(--jw-font-head);
font-size: 1.25rem !important;
font-weight: 600;
color: var(--jw-navy) !important;
line-height: 1.25;
margin: 0 0 0.5rem;
}
/* Amount — palette2 (coral) */
.jw-offers .kt-has-4-columns .has-theme-palette-2-color:not(.has-small-font-size) {
font-family: var(--jw-font-body);
font-size: 0.88rem;
font-weight: 500;
color: var(--jw-coral) !important;
margin: 0 0 0.75rem;
}
/* Description — palette3 (near-black on standard) */
.jw-offers .kt-has-4-columns .has-theme-palette-3-color:not(.has-small-font-size) {
font-family: var(--jw-font-body);
font-size: 0.95rem;
font-weight: 300;
color: var(--jw-muted) !important;
line-height: 1.8;
margin: 0;
padding-bottom: 1.75rem;
}
/* Featured card overrides — white/warm text on navy */
.jw-offers .kt-has-4-columns .wp-block-kadence-column:nth-child(4) h3 {
color: var(--jw-white) !important;
}
.jw-offers .kt-has-4-columns .wp-block-kadence-column:nth-child(4) .has-theme-palette-2-color {
color: rgba(240, 142, 128, 0.9) !important;
}
/* Featured desc — palette9 (white) with muted opacity */
.jw-offers .kt-has-4-columns .wp-block-kadence-column:nth-child(4) .has-theme-palette-9-color:not(.has-small-font-size):not(h3) {
font-family: var(--jw-font-body);
font-size: 0.95rem;
font-weight: 300;
color: rgba(253, 240, 230, 0.8) !important;
line-height: 1.8;
margin: 0;
padding-bottom: 1.75rem;
}
/* Buttons pushed to card bottom */
.jw-offers .kt-has-4-columns .wp-block-kadence-advancedbtn {
margin-top: auto;
}
.jw-offers .kt-has-4-columns .kt-button {
font-size: 0.9rem;
padding: 0.75rem 1.75rem;
}
@media (max-width: 1060px) {
.jw-offers .kt-has-4-columns {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 580px) {
.jw-offers .kt-has-4-columns {
grid-template-columns: 1fr !important;
}
}
/* Kadence button — same specificity fix as other sections. */
.jw-offers .wp-block-kadence-advancedbtn .kt-button {
padding: 14px 32px !important;
min-width: 160px;
font-size: 1rem !important;
border-radius: 4px !important;
}
.jw-offers .wp-block-kadence-advancedbtn .kt-button:hover,
.jw-offers .wp-block-kadence-advancedbtn .kt-button:focus {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18),
0 0 28px 10px rgba(240, 142, 128, 0.65) !important;
animation: jw-btn-breathe 2.4s ease-in-out infinite;
}
/* ================================================================
GUTENBERG BRIDGE — ⑨ FOOTER CTA
Replaces the CTA zone in the PHP footer.
================================================================ */
.entry-content .jw-cta {
background-color: var(--jw-navy);
background-image: url('https://jesswroughton.mystagingwebsite.com/wp-content/uploads/2026/04/JessWroughton_SunsetFooter_originalbyharli-marten-scaled.jpg') !important;
background-position: center 41%;
padding: 1.75rem 2rem 1.5rem;
text-align: center;
border-top: 4px solid var(--jw-navy);
}
/* Override Kadence's near-black 25% overlay with the PHP footer's
exact navy-blue 15% tint — rgba baked into background-color,
opacity set to 1 so the rgba alpha is the sole controller. */
.jw-cta .kt-row-layout-overlay {
background-color: rgba(30, 28, 70, 0.28) !important;
opacity: 1 !important;
}
.jw-cta h2.wp-block-heading {
font-family: var(--jw-font-head);
font-size: clamp(2rem, 4.5vw, 3.25rem) !important;
font-weight: 600;
color: var(--jw-white) !important;
margin: 0 0 0.5rem;
line-height: 1.12;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.jw-cta > .kt-row-column-wrap .kt-inside-inner-col > p {
font-family: var(--jw-font-body);
font-size: 1.15rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.90) !important;
margin: 0 0 1rem;
line-height: 1.65;
}
.jw-cta .wp-block-kadence-advancedbtn {
margin-top: 1.25rem !important;
margin-bottom: 1rem;
}
/* Kadence button — same specificity fix as other sections. */
.jw-cta .wp-block-kadence-advancedbtn .kt-button {
padding: 14px 32px !important;
min-width: 160px;
font-size: 1rem !important;
border-radius: 4px !important;
}
.jw-cta .wp-block-kadence-advancedbtn .kt-button:hover,
.jw-cta .wp-block-kadence-advancedbtn .kt-button:focus {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18),
0 0 28px 10px rgba(240, 142, 128, 0.65) !important;
animation: jw-btn-breathe 2.4s ease-in-out infinite;
}
/* Divider lines above and below the Discover / Clarify / Prove It row */
.jw-cta .kb-row-layout-wrap {
width: 100vw;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
border-top: 1px solid rgba(255, 255, 255, 0.35);
border-bottom: 1px solid rgba(255, 255, 255, 0.35);
padding: 1.1rem 2rem;
}
.jw-cta .kb-row-layout-wrap > .kt-row-column-wrap {
max-width: var(--jw-max);
margin: 0 auto;
}
/* 3-col steps summary */
.jw-cta .kt-has-3-columns .wp-block-kadence-column {
max-width: 200px;
margin: 0 auto;
}
.jw-cta .kt-has-3-columns .wp-block-kadence-column p {
font-family: var(--jw-font-body);
font-size: 0.72rem !important;
font-weight: 300;
color: rgba(255, 255, 255, 0.80) !important;
line-height: 1.2;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
margin: 0 !important;
max-width: 140px;
margin-left: auto !important;
margin-right: auto !important;
}
.jw-cta .kt-has-3-columns strong {
color: var(--jw-white) !important;
font-weight: 600;
font-size: 0.82rem;
display: block;
line-height: 1.2;
margin-bottom: 0.1rem;
}
/* "Cheers to changemakers!" */
.jw-cta h4 {
font-family: var(--jw-font-head);
font-style: italic;
font-size: 1.25rem;
font-weight: 300;
color: var(--jw-coral) !important;
margin: 0.25rem auto 0.05rem;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
width: fit-content;
margin-inline: auto !important;
cursor: default;
}
/* Copyright and links */
.jw-cta p.has-small-font-size {
font-family: var(--jw-font-body);
font-size: 0.8rem !important;
font-weight: 300;
color: rgba(255, 255, 255, 0.6) !important;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
margin: 0;
}
.jw-cta p.has-small-font-size + p.has-small-font-size {
margin-top: 0;
}
/* =============================================
FLOATING "LET'S CHAT" BUTTON
Fixed bottom-right, fades in after 300px scroll.
Uses .jw-btn and .jw-btn--coral for shared styles
(shimmer, glow, breathe animation, sparkles).
============================================= */
.jw-float-btn {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 9999;
border-radius: 50px;
padding: 12px 24px;
font-weight: 600;
font-size: 1rem;
box-shadow: 0 4px 16px rgba(55, 90, 120, 0.25);
opacity: 0;
pointer-events: none;
transform: translateY(10px);
transition: opacity 0.35s ease,
transform 0.35s ease;
}
.jw-float-btn--visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
@media (max-width: 767px) {
.jw-float-btn {
padding: 10px 20px;
font-size: 0.9rem;
}
}
/* =============================================
MOBILE OVERRIDES — 1024px (navigation / drawer)
Matches Kadence's hamburger menu breakpoint.
============================================= */
@media (max-width: 1024px) {
/* ── Logo wordmark stays navy ────────────────── */
.site-branding .site-title,
.site-branding .site-title a,
.site-branding p.site-title,
.site-title.vs-md-false,
div.site-title,
.mobile-header-logo .site-title,
.mobile-logo-area .site-title {
color: var(--jw-navy) !important;
}
/* ── Hamburger menu brand styling ───────────── */
.popup-drawer .drawer-inner,
.popup-drawer.popup-drawer-layout-sidepanel .drawer-inner {
background: var(--jw-navy) !important;
color: var(--jw-white) !important;
}
.mobile-navigation ul li > a,
.mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap,
.drawer-navigation ul li > a,
.drawer-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap {
color: var(--jw-white) !important;
}
.mobile-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap,
.mobile-navigation ul li:not(.menu-item-has-children) a,
.drawer-navigation ul li.menu-item-has-children .drawer-nav-drop-wrap,
.drawer-navigation ul li:not(.menu-item-has-children) a {
border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}
/* Drawer close button — white on navy */
.popup-drawer .drawer-header .drawer-toggle,
.popup-drawer .drawer-header .drawer-toggle:hover {
color: var(--jw-white) !important;
}
/* "Let's Chat" nav CTA in mobile drawer — styled as button */
.mobile-navigation .jw-nav-cta > a {
display: inline-block;
background-color: var(--jw-coral);
color: var(--jw-white) !important;
padding: 0.5rem 1.25rem;
border-radius: 6px;
margin-top: 0.5rem;
}
/* Mobile nav link hover — coral with sparkle */
.mobile-navigation ul li:not(.jw-nav-cta) > a:hover {
color: var(--jw-coral) !important;
}
.mobile-navigation ul li:not(.jw-nav-cta) > a:hover::after {
content: '✦';
color: var(--jw-coral);
font-size: 9px;
margin-left: 0.35em;
}
}
/* =============================================
MOBILE OVERRIDES — 860px
Matches existing child-theme mobile breakpoint.
============================================= */
@media (max-width: 860px) {
/* ── Fix 4: Background textures — mobile-safe ─ */
.entry-content .jw-steps::after,
.entry-content .jw-offers::after {
background-size: 80% auto;
background-repeat: repeat;
background-attachment: scroll;
}
/* ── Fix 5: Watermark contained on mobile ───── */
.jw-yes,
.entry-content .wp-block-kadence-rowlayout.jw-yes {
overflow: hidden !important;
}
.jw-yes__watermark,
.jw-yes__watermark--gb {
font-size: 16vw !important;
}
/* ── Fix 6: Tighter section spacing (−30%) ──── */
.jw-hero { padding-top: 5.6rem; padding-bottom: 4.9rem; }
.jw-problem { padding-top: 2.8rem; padding-bottom: 3.5rem; }
.jw-yes { padding-top: 4.9rem; padding-bottom: 5.6rem; }
.jw-guide { padding-top: 4.9rem; padding-bottom: 4.9rem; }
.jw-testimonials { padding-top: 3.5rem; padding-bottom: 4.2rem; }
.jw-obj { padding-top: 4.9rem; padding-bottom: 4.9rem; }
.jw-steps { padding-top: 4.9rem; padding-bottom: 4.9rem; }
.jw-offers { padding-top: 4.9rem; padding-bottom: 4.9rem; }
/* ── Fix 7: "Be found" sparkle bounds on mobile ─ */
.jw-testimonials__closing-inner {
width: fit-content;
margin: 0 auto;
}
.jw-testimonials__sparkle-cluster {
left: -4px;
}
/* ── Fix 8: Footer links tighter to avoid orphans ─ */
.jw-cta p.has-small-font-size {
font-size: 0.75rem !important;
letter-spacing: -0.01em;
}
/* ── Fix 9: Footer nav links wrap centered ──── */
.jw-footer__nav,
.jw-cta p.has-small-font-size {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.25em 0.5em;
}
}
/* =============================================
LEAD GEN PAGE — The Prove It Checklist
============================================= */
/* ── Hero: static particle SVG background ──── */
.jw-lg-hero {
position: relative;
background-color: var(--jw-navy);
background-image: url('../brand-assets/background-hero-particles.svg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
padding: 5rem 2rem 4.5rem;
overflow: hidden;
}
/* Particle SVG sits behind content via ::after so navy bg doesn't cover it */
.jw-lg-hero::after {
content: '';
position: absolute;
inset: 0;
background-image: url('../brand-assets/background-hero-particles.svg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
opacity: 0.85;
}
.entry-content .jw-lg-hero {
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
max-width: 100vw;
margin-left: calc(-50vw + 50%);
}
.entry-content .jw-lg-hero .kt-row-column-wrap {
padding-bottom: 0;
}
.jw-lg-hero .kt-inside-inner-col {
max-width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
}
/* Eyebrow — coral small caps, matches offers card eyebrows exactly */
.jw-lg-hero .jw-lg-eyebrow {
font-family: var(--jw-font-body) !important;
font-size: 0.72rem !important;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--jw-coral) !important;
margin: 0 0 1.2rem;
line-height: 1.4;
animation: jw-rise 0.9s var(--jw-ease) 0.2s both;
}
/* H1 — same treatment as homepage hero H1 */
.jw-lg-hero h1.wp-block-heading {
animation: jw-rise 0.9s var(--jw-ease) 0.4s both;
font-family: var(--jw-font-head);
font-size: clamp(2.4rem, 6vw, 4.2rem);
font-weight: 600;
color: var(--jw-warm) !important;
line-height: 1.1;
margin: 0 0 0.75rem;
max-width: 960px;
}
/* H2 — italic coral subtitle with breathing room from H1 */
.jw-lg-hero h2.wp-block-heading {
animation: jw-rise 0.9s var(--jw-ease) 0.6s both;
font-family: var(--jw-font-head);
font-size: clamp(1.4rem, 3.5vw, 2.2rem);
font-weight: 400;
font-style: italic;
color: var(--jw-coral) !important;
line-height: 1.25;
margin: 1.25rem 0 0;
}
/* ── Intro + Bullets section ──── */
.jw-lg-intro {
background-color: var(--jw-warm);
padding: 5rem 2rem 4rem;
}
.jw-lg-intro > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
max-width: var(--jw-max);
margin: 0 auto;
}
/* Constrain prose paragraphs for readability */
.jw-lg-intro > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > p {
max-width: var(--jw-max-text);
margin-left: auto;
margin-right: auto;
}
.jw-lg-intro > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col > h3 {
max-width: var(--jw-max-text);
margin-left: auto;
margin-right: auto;
}
.jw-lg-intro p {
color: var(--jw-text) !important;
text-align: center;
}
.jw-lg-intro h3.wp-block-heading {
font-family: var(--jw-font-head);
font-weight: 500;
color: var(--jw-navy) !important;
text-align: center;
margin: 2rem 0 1.25rem;
}
/* Three-card layout — matches jw-steps card aesthetic */
.jw-lg-cards .kt-row-column-wrap {
max-width: var(--jw-max) !important;
margin: 0 auto;
}
.jw-lg-cards .wp-block-kadence-column {
background-color: var(--jw-white);
border-radius: 10px;
padding: 2.25rem 2rem 2rem;
transition: transform 0.25s var(--jw-ease),
box-shadow 0.25s var(--jw-ease);
}
.jw-lg-cards .wp-block-kadence-column:hover {
transform: translateY(-7px);
box-shadow: 0 18px 44px rgba(240, 142, 128, 0.3);
}
.jw-lg-card__icon {
width: 36px;
height: 36px;
margin-bottom: 1rem;
}
.jw-lg-card__icon svg {
width: 100%;
height: 100%;
}
/* Card heading */
.jw-lg-cards .has-theme-palette-1-color {
font-family: var(--jw-font-head);
font-size: 1.25rem !important;
font-weight: 600;
color: var(--jw-navy) !important;
margin: 0 0 0.5rem;
line-height: 1.2;
}
/* Card description */
.jw-lg-cards .has-theme-palette-3-color {
font-family: var(--jw-font-body);
font-size: 0.95rem;
font-weight: 300;
color: var(--jw-muted) !important;
line-height: 1.8;
margin: 0;
}
@media (max-width: 860px) {
.jw-lg-cards .kt-row-column-wrap {
grid-template-columns: 1fr !important;
max-width: 500px;
}
}
/* ── Form + Preview section ──── */
/* Form section card. Navy arrows graphic shows as the outer card background, no overlay */
.jw-lg-form {
background-color: transparent !important;
background-image: url('/wp-content/uploads/2026/04/GrowthChartNavy_Background_JWM.png') !important;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 24px;
overflow: hidden;
max-width: 600px !important;
margin: 0 auto;
padding: 2rem;
}
/* Override Kadence's per-block max-width (720px from the editor sidebar setting)
so the visible card matches the 600px outer wrapper. */
.jw-lg-form > .kt-row-column-wrap {
max-width: 600px !important;
margin: 0 auto;
}
.jw-lg-form h3.wp-block-heading {
font-family: var(--jw-font-head);
font-weight: 600;
color: var(--jw-navy) !important;
margin: 0 0 1.5rem;
}
/* Kadence form field styling — navy border, generous padding */
.jw-lg-form .kadence-blocks-form-field input[type="text"],
.jw-lg-form .kadence-blocks-form-field input[type="email"],
.jw-lg-form .kadence-blocks-form-field input[type="url"] {
border: 1px solid var(--jw-navy) !important;
border-radius: 4px !important;
padding: 0.75rem 1rem !important;
font-family: var(--jw-font-body) !important;
font-size: 1rem !important;
background-color: var(--jw-white) !important;
color: var(--jw-text) !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.jw-lg-form .kadence-blocks-form-field input:focus {
border-color: var(--jw-coral) !important;
box-shadow: 0 0 0 2px rgba(240, 142, 128, 0.25) !important;
outline: none;
}
.jw-lg-form .kadence-blocks-form-field label {
font-family: var(--jw-font-body) !important;
font-weight: 500 !important;
color: var(--jw-navy) !important;
margin-bottom: 0.4rem !important;
}
/* Submit button — outlined coral variant for form contexts.
White background, coral text, coral border. On hover/focus, fills with coral
and inverts to white text. Covers both the legacy form (.kb-forms-submit) and
the Advanced Form (.kb-adv-form-submit-button). */
.jw-lg-form .kb-forms-submit,
.jw-lg-form .kb-adv-form-submit-button {
display: inline-block !important;
font-family: var(--jw-font-body) !important;
font-size: 1rem !important;
font-weight: 500 !important;
letter-spacing: 0.04em !important;
padding: 0.9rem 2.4rem !important;
border-radius: 4px !important;
border: 2px solid var(--jw-coral) !important;
cursor: pointer !important;
background-color: var(--jw-white) !important;
color: var(--jw-coral) !important;
position: relative;
overflow: hidden;
transition: background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.25s ease !important;
}
.jw-lg-form .kb-forms-submit:hover,
.jw-lg-form .kb-forms-submit:focus,
.jw-lg-form .kb-adv-form-submit-button:hover,
.jw-lg-form .kb-adv-form-submit-button:focus {
background-color: var(--jw-coral) !important;
color: var(--jw-white) !important;
border-color: var(--jw-coral) !important;
box-shadow: 0 0 14px 3px rgba(240, 142, 128, 0.40) !important;
}
.jw-lg-form .kb-forms-submit:focus-visible,
.jw-lg-form .kb-adv-form-submit-button:focus-visible {
outline: 2px solid var(--jw-navy);
outline-offset: 3px;
}
/* Center the submit button inside the form card. Kadence's per-block inline CSS
sets .kb-submit-field { justify-content: flex-start } from the editor's hAlign
default; the wrapper is a flex container, so overriding justify-content to
center horizontally centers the button. !important wins over the inline rule
which has equal specificity but loads after the child stylesheet. */
.jw-lg-form .kb-submit-field {
justify-content: center !important;
}
/* Microcopy below form */
.jw-lg-form .jw-lg-microcopy {
font-size: 0.85rem !important;
color: var(--jw-muted) !important;
font-style: italic;
margin-top: 1rem;
}
/* Preview image — subtle shadow */
.jw-lg-form .jw-lg-preview img {
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
border-radius: 4px;
}
/* Form section heading. Block-level centering uses width: fit-content + margin auto
instead of max-width + margin auto. Diagnostic note: with max-width alone and
width: auto, margin auto failed to center on this page (cause not pinpointed in
served CSS — no rule was found overriding margin, but the box rendered left-pinned).
width: fit-content shrink-wraps the H2 to its text width, after which margin auto
unambiguously centers the resulting smaller box. !important locks specificity. */
.jw-lg-form-heading {
font-family: var(--jw-font-head) !important;
font-weight: 600 !important;
color: var(--jw-navy) !important;
text-align: center !important;
display: block !important;
width: fit-content !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 2rem;
margin-bottom: 2rem;
}
/* Section divider above the form heading. Anchored to the column-inner (NOT the
heading) so the line spans the full content width of the section, breaking out of
the heading's content width. A 1px navy line at 30% opacity sits at vertical
center via background-image; three coral sparkle marks render on top of the line
as text content. The sparkles paint on top of the line because text renders
above background-image at the same vertical position.
Equal padding above/below balances the gap between the prior paragraph and the
line, and between the line and the heading. */
.kt-inside-inner-col:has(> .jw-lg-form-heading)::before {
content: "\2726\00a0\00a0\00a0\2726\00a0\00a0\00a0\2726";
display: block;
width: 100%;
color: var(--jw-coral);
font-size: 1.25rem;
letter-spacing: 0.1em;
text-align: center;
line-height: 1.6;
background-image: linear-gradient(to right,
rgba(55, 90, 120, 0.3),
rgba(55, 90, 120, 0.3));
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: center center;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
margin-bottom: 0;
}
/* Body paragraph above the form */
.jw-lg-form .kt-inside-inner-col > p {
font-family: var(--jw-font-body) !important;
color: var(--jw-navy) !important;
}
/* Advanced Form field labels */
.jw-lg-form .kb-adv-form-label {
font-family: var(--jw-font-body) !important;
font-weight: 700 !important;
color: var(--jw-navy) !important;
}
/* Required asterisk */
.jw-lg-form .kb-adv-form-required {
color: var(--jw-coral) !important;
}
/* Inner card frosting. Light blue translucent panel that holds form content.
.jw-lg-form is the same element as .kb-row-layout-wrap, so the chain skips that wrapper */
.jw-lg-form > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
background-color: rgba(176, 200, 220, 0.95);
border-radius: 16px;
padding: 3.5rem 2rem;
}
/* Coral magnifying-glass icon anchor at the top of the inner card.
Decorative only (purely visual), so a pseudo-element is appropriate — screen
readers correctly skip it. Sits centered above the paragraph with breathing
room below. */
.jw-lg-form > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col::before {
content: "";
display: block;
width: 72px;
height: 72px;
margin: 0 auto 1.25rem;
background-image: url('/wp-content/themes/kadence-child/brand-assets/icon-magnifying-glass-coral.svg');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* Outer section breathing room around the centered form card */
.entry-content > .wp-block-kadence-rowlayout:has(.jw-lg-form) {
padding: 2rem 2rem 4rem;
}
/* ── Sign-off ──── */
.jw-lg-signoff {
background-color: var(--jw-warm);
padding: 0.5rem 2rem 4rem;
}
.jw-lg-signoff .kt-inside-inner-col {
max-width: var(--jw-max-text);
margin: 0 auto;
}
.jw-lg-signoff p {
font-family: var(--jw-font-head) !important;
font-style: italic;
font-weight: 400;
color: var(--jw-navy) !important;
text-align: center;
font-size: 1.125rem;
line-height: 1.6;
}
/* ── Mobile adjustments ──── */
@media (max-width: 860px) {
.jw-lg-hero {
padding: 5rem 1.5rem 4rem;
}
.jw-lg-intro {
padding: 3.5rem 1.5rem 3rem;
}
.jw-lg-form {
padding: 1rem 1.5rem 3.5rem;
}
.jw-lg-signoff {
padding: 0.5rem 1.5rem 3rem;
}
}
/* ════════════════════════════════════════════════════════════════════════
About page (page-id-166) — section restoration
Mirrors homepage rules onto detached About-page classes.
Every selector is scoped to .jw-aboutjess-* or body.page-id-166.
════════════════════════════════════════════════════════════════════════ */
/* ── Section 1: Problem (jw-aboutjess-problem) ─────────────────────── */
/* Section container — mirrors line 469 .jw-problem */
.jw-aboutjess-problem {
background-color: var(--jw-white);
padding: 4rem 2rem 1.5rem 2rem;
}
/* Text column constrained to the same 820px-wide centered block that the
Commitment section uses. This aligns the Problem text's left edge with
the Commitment eyebrow + H2 + card row left edge, viewport-independent,
so the page reads with a consistent content left margin when scrolling. */
.jw-aboutjess-problem > .kt-row-column-wrap > .wp-block-kadence-column:first-child .kt-inside-inner-col {
max-width: 820px;
margin-inline: auto;
padding-left: 11.75rem;
}
/* Body paragraphs — mirrors line 477 .jw-problem p */
.jw-aboutjess-problem p {
color: #1a1a1a;
}
/* Eyebrow — mirrors line 1877 */
.jw-aboutjess-problem .has-small-font-size {
font-family: var(--jw-font-body) !important;
font-size: 1rem !important;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #1a1a1a !important;
margin: 0 0 0.85rem;
}
/* H2 — mirrors line 1888 */
.jw-aboutjess-problem h2.wp-block-heading {
font-family: var(--jw-font-head);
font-size: clamp(1.6rem, 3vw, 2.3rem) !important;
font-weight: 600;
color: var(--jw-navy) !important;
line-height: 1.2;
margin: 0 0 1.5rem;
}
/* Photo wrap — mirrors lines 1916, 1923, 1937. Width capped at 380px so
the aspect-ratio: 3/4 img inside renders as a true ~380x507 portrait,
not a wide landscape on full column width. margin-left: auto pulls the
photo frame to the right edge of its column. */
.jw-aboutjess-problem .jw-problem-photo-wrap {
position: relative;
display: inline-block;
width: 100%;
max-width: 380px;
margin-left: auto;
isolation: isolate;
}
.jw-aboutjess-problem .jw-problem-photo-wrap::after {
content: '';
position: absolute;
bottom: -12px;
right: -12px;
width: 100%;
height: 100%;
background-color: #f08e80;
opacity: 0.85;
border-radius: 12px;
z-index: -1;
box-shadow: 0 8px 28px rgba(55, 90, 120, 0.22);
}
.jw-aboutjess-problem .jw-problem-photo-wrap img {
border-radius: 12px;
position: relative;
z-index: 1;
display: block;
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: center;
}
/* Paragraph margin between body paragraphs — mirrors line 1997 */
.jw-aboutjess-problem > .kt-row-column-wrap .kt-inside-inner-col > p {
margin: 0 0 1rem;
}
/* Highlight on the two marked phrases in the closing line ("how good the
work is" / "how hard it is to communicate it"). Editor highlight tool
currently outputs mark + palette-3-color (near-black); selector chained
to that class so the rule actually fires. Override sets navy text with
coral underline, matching the original About design. */
.jw-aboutjess-problem mark.has-theme-palette-3-color {
color: var(--jw-navy) !important;
background-color: transparent;
text-decoration: underline;
text-decoration-color: #f08e80;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
/* Closing line — sparkle indent + bullet-style left padding.
Targets the last paragraph in the left column, which is the closer
containing the two highlighted phrases. Sparkle injected via ::before
so no HTML block is required. */
.jw-aboutjess-problem > .kt-row-column-wrap > .wp-block-kadence-column:first-child .kt-inside-inner-col > p:last-of-type {
position: relative;
padding-left: 28px;
color: var(--jw-navy) !important;
font-style: italic;
}
.jw-aboutjess-problem > .kt-row-column-wrap > .wp-block-kadence-column:first-child .kt-inside-inner-col > p:last-of-type::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
width: 18px;
height: 18px;
background-image: url("/wp-content/themes/kadence-child/brand-assets/icon-sparkle-single-coral.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* ── Section 2: About Jess proofrow H3 ─────────────────────────────── */
/* "The instinct has been there my whole career" — magazine-eyebrow size.
Reverted from combined selector: leadgen subhead needs to be smaller
than its section H2, so it gets its own rule below at a smaller clamp. */
.jw-aboutjess-proofrow > h3.wp-block-kadence-advancedheading {
font-family: var(--jw-font-head);
font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
font-weight: 600;
color: var(--jw-navy) !important;
line-height: 1.25;
margin: 0 0 1.5rem;
}
/* ── Section 3: Commitment to You (jw-aboutjess-workwithme) ────────── */
/* Section container — same padding as Problem */
.jw-aboutjess-workwithme {
background-color: var(--jw-white);
padding: 4rem 2rem 4rem;
}
/* Eyebrow — capped at 820px + margin-inline auto so it sits aligned to
the card row's left edge (same cap + centering as the .kt-has-3-columns
row below). */
.jw-aboutjess-workwithme .has-small-font-size {
font-family: var(--jw-font-body) !important;
font-size: 1rem !important;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #1a1a1a !important;
margin: 0 auto 0.85rem;
max-width: 820px;
}
/* H2 — capped at 820px + margin-inline auto so it sits aligned to the
card row's left edge (same cap + centering as the .kt-has-3-columns
row below). */
.jw-aboutjess-workwithme h2.wp-block-heading {
font-family: var(--jw-font-head);
font-size: clamp(1.6rem, 3vw, 2.3rem) !important;
font-weight: 600;
color: var(--jw-navy) !important;
line-height: 1.2;
margin: 0 auto 1.5rem;
max-width: 820px;
}
/* 3-column card styling — mirrors lines 1898, 1972 */
.jw-aboutjess-workwithme .kt-has-3-columns .wp-block-kadence-column {
background-color: #eef2f5;
border-radius: 12px;
padding: 20px 32px;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.jw-aboutjess-workwithme .kt-has-3-columns .wp-block-kadence-column:hover {
transform: translateY(-4px);
box-shadow: 0 6px 20px rgba(55, 90, 120, 0.12);
}
/* Card paragraph typography — mirrors line 1976 */
.jw-aboutjess-workwithme .kt-has-3-columns p {
font-family: var(--jw-font-body);
font-size: 1rem;
font-weight: 400;
color: #1a1a1a !important;
line-height: 1.5;
text-align: left;
}
/* Commitment cards faded label (Noticer / Clarifier / Storyteller).
Mirrors the homepage Steps number treatment at line 2658. Specificity
bumped to (0,4,1) so this beats the broader .jw-aboutjess-workwithme
.kt-has-3-columns p rule (0,3,1) which would otherwise win on every
property. !important on color matches that broader rule's !important
so the coral isn't overridden by its #1a1a1a near-black. */
.jw-aboutjess-workwithme .kt-has-3-columns p.jw-aboutjess-cardlabel {
font-family: var(--jw-font-head) !important;
font-size: 2rem !important;
font-weight: 300 !important;
color: var(--jw-coral) !important;
opacity: 0.55 !important;
line-height: 1 !important;
margin: 0 0 1.25rem !important;
text-align: center !important;
white-space: nowrap !important;
}
/* ── Section 4: Who I Serve (jw-aboutjess-whoiserve) ───────────────── */
/* Section bg stays coral (palette2) per user note — design review later.
6 cards forced into a 3-col grid (3 top, 3 bottom). Same 3-across on
mobile in compact size. Alternating blush/navy across the six.
H2 + subhead typography intentionally left out — tied to parked
color/contrast review. */
/* Section padding + positioning context for the texture overlay (item 4a) */
.jw-aboutjess-whoiserve {
position: relative;
padding: 4rem 2rem;
overflow: hidden;
}
/* Section H2 "Who I Serve:" — mirrors Steps H2 at line 2628.
Color stays navy per the locked palette; the navy-on-coral contrast
question is parked for the section bg design review. */
.jw-aboutjess-whoiserve h2.wp-block-heading {
font-family: var(--jw-font-head);
font-size: clamp(1.6rem, 3vw, 2.3rem) !important;
font-weight: 600;
color: var(--jw-navy) !important;
line-height: 1.2;
margin: 0 0 0.5rem;
}
/* Intro paragraph "Grateful to serve…" — direct-children chain isolates
the section-level intro paragraph so the rule does NOT catch the card
paragraphs inside the 6-col grid or the closing "Leaders…" line (that
one is an , not a