/*
* TPA Landing Page Stylesheet
* All classes use lp- prefix to avoid conflicts with child theme client.css
* FIXED design — same fonts (Raleway), same layout, same structure on every site.
* Only the COLOR PALETTE adapts per client via 3 custom properties.
* Child themes set --lp-primary, --lp-secondary, --lp-accent in their style.css.
* Defaults: purple/brown/taupe from the original winning template.
*/
/* ============================================================
COLOR PALETTE — the ONLY customizable part per client
Child themes override these 3 values. Everything else is fixed.
CASCADE DESIGN: defaults declared on `:root` (applies to , the
highest ancestor of body.landing-page). Child themes declare overrides
under `.landing-page` which sets the variables on body.landing-page —
a closer ancestor than html. CSS variable inheritance picks the
nearest declaration, so the child's `.landing-page` override wins for
every descendant of the LP body without needing source-order tricks
or !important.
============================================================ */
:root {
--lp-primary: #641e5b;
--lp-secondary: #735c43;
--lp-accent: #9e8d7b;
}
/* ============================================================
BASE
============================================================ */
body.landing-page {
padding-top: 0;
margin: 0;
}
/* ============================================================
UTILITY
============================================================ */
.lp-container {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
}
/* ============================================================
SCROLL ANIMATIONS — disabled on landing pages.
All content renders at full visibility on page load (no opacity: 0
initial state, no scroll-triggered reveal). This avoids the
"invisible content when JS fails / observer races" class of bugs
and keeps ad traffic seeing copy immediately above the fold.
============================================================ */
.lp-fade-up {
opacity: 1;
transform: none;
}
/* ============================================================
BUTTONS
============================================================ */
.lp-btn {
display: inline-block;
padding: 17px 36px;
font-family: 'Raleway', sans-serif;
font-weight: 600;
text-decoration: none;
text-align: center;
transition: all 0.3s ease;
font-size: 1rem;
cursor: pointer;
border-radius: 0;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0;
}
.lp-btn-primary {
background: var(--lp-accent);
border: 1px solid var(--lp-accent);
color: #fff;
}
.lp-btn-primary:hover {
background: var(--lp-secondary);
border-color: var(--lp-secondary);
}
.lp-btn-white {
background: #fff;
border: 1px solid #fff;
color: var(--lp-primary);
}
.lp-btn-white:hover {
background: var(--lp-secondary);
border-color: var(--lp-secondary);
color: #fff;
}
.lp-btn-popup {
background-color: var(--lp-accent);
border: 1px solid var(--lp-accent);
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 500;
font-size: clamp(1.125rem, 0.9375rem + 0.3846vw, 1.25rem);
min-width: 220px;
padding: 12px 20px;
text-shadow: none;
text-transform: none;
letter-spacing: 0;
line-height: 1.6;
border-radius: 0;
text-decoration: none;
cursor: pointer;
display: block;
text-align: center;
box-sizing: border-box;
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.lp-btn-popup:hover {
background-color: var(--lp-secondary);
border-color: var(--lp-secondary);
color: #fff;
}
/* ============================================================
HEADER
============================================================ */
.lp-header {
position: relative;
left: 0;
width: 100%;
z-index: 9999;
background: #fff;
transition: all 0.3s ease;
padding: 20px 0;
}
.lp-header--scrolled {
box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
}
.lp-header-inner {
display: flex;
align-items: center;
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
}
.lp-brand,
.lp-logo {
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: 18px;
color: var(--lp-primary);
text-decoration: none;
letter-spacing: 0.04em;
}
/* Brand sits in a flex row with nav + phone. Allow it to shrink so it
never visually overlaps its siblings; each child theme supplies its
own brand markup + styling via template-parts/lp-brand.php so the
intrinsic brand size is always appropriate for its content. */
.lp-brand {
flex: 0 1 auto;
min-width: 0;
}
/* Kill any inherited underline from client CSS or WP defaults. */
.lp-brand,
.lp-brand:hover,
.lp-logo,
.lp-logo:hover {
text-decoration: none;
border-bottom: 0;
}
.lp-logo-img {
flex-shrink: 0;
height: 52px;
width: auto;
object-fit: contain;
object-position: left center;
max-width: 240px;
}
.lp-nav {
flex: 1 1 auto;
display: flex;
justify-content: center;
margin-top: 5px;
min-width: 0;
}
.lp-nav-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: clamp(16px, 2.2vw, 40px);
flex-wrap: nowrap;
white-space: nowrap;
}
.lp-nav-links a {
font-family: 'Raleway', sans-serif;
font-size: clamp(12px, 0.7rem + 0.35vw, 14px);
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #1a1a1a;
text-decoration: none;
transition: color 0.3s ease;
position: relative;
padding-bottom: 4px;
}
.lp-nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--lp-primary);
transition: width 0.3s ease, left 0.3s ease;
}
.lp-nav-links a:hover {
color: var(--lp-primary);
}
.lp-nav-links a:hover::after {
width: 100%;
left: 0;
}
/* Always styled as a button at rest, not just on hover — visitors must see
it as a tap target on first paint (mobile) and desktop alike. */
.lp-header-phone {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: clamp(13px, 0.75rem + 0.3vw, 15px);
color: #fff;
background: var(--lp-primary);
text-decoration: none;
padding: 10px 18px;
border: 2px solid var(--lp-primary);
border-radius: 6px;
margin-left: auto;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease;
}
.lp-header-phone:hover,
.lp-header-phone:focus-visible {
background: var(--lp-accent);
border-color: var(--lp-accent);
color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
transform: translateY(-1px);
}
.lp-header-phone svg {
width: 16px;
height: 16px;
stroke: #fff;
flex-shrink: 0;
}
.lp-header-phone:hover svg,
.lp-header-phone:focus-visible svg {
stroke: #fff;
}
.lp-menu-toggle {
display: none;
background: transparent;
border: none;
cursor: pointer;
padding: 4px;
}
.lp-menu-toggle span {
display: block;
width: 22px;
height: 2px;
background: #000;
border-radius: 2px;
margin: 5px 0;
transition: all 0.3s ease;
}
/* ============================================================
MOBILE MENU
============================================================ */
.lp-mobile-menu {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
z-index: 9998;
padding: 80px 24px 40px;
text-align: center;
transform: translateY(-100%);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
pointer-events: none;
overflow-y: auto;
}
.lp-mobile-menu--open {
display: block;
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.lp-mobile-menu ul {
list-style: none;
margin: 0 0 30px;
padding: 0;
}
.lp-mobile-menu li {
margin-bottom: 0;
}
.lp-mobile-menu a {
display: block;
padding: 15px 0;
font-family: 'Raleway', sans-serif;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #000;
text-decoration: none;
border-bottom: 1px solid #ddd;
}
.lp-mobile-menu a:hover {
color: var(--lp-primary);
}
.lp-mobile-phone {
display: inline-block;
margin-top: 20px;
padding: 14px 28px;
background: var(--lp-primary);
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 700;
border-radius: 0;
text-decoration: none;
}
/* ============================================================
CREDIBILITY STRIPE
============================================================ */
.lp-credibility {
background: #fff;
padding: 20px 0;
}
.lp-credibility-row {
display: flex;
align-items: center;
justify-content: center;
gap: 50px;
flex-wrap: nowrap;
}
.lp-credibility-row img {
height: 52px;
width: auto;
object-fit: contain;
flex-shrink: 0;
}
@media (max-width: 980px) {
.lp-credibility-row {
flex-wrap: wrap;
gap: 30px;
}
.lp-credibility-row img {
height: 40px;
}
}
@media (max-width: 600px) {
.lp-credibility-row {
gap: 20px;
}
.lp-credibility-row img {
height: 32px;
max-width: 48%;
}
}
/* ============================================================
HERO
============================================================ */
.lp-hero {
background: #eaeaea;
padding: clamp(2.5rem, 1.5625rem + 1.9231vw, 3.125rem) 0;
position: relative;
overflow: hidden;
}
.lp-hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
align-items: center;
max-width: 1080px;
margin: 0 auto;
padding: 0 clamp(1.5625rem, -3.2227rem + 7.8125vw, 3.125rem);
}
.lp-hero-text {
text-align: center;
}
.lp-hero-text h1 {
font-family: 'Raleway', sans-serif;
font-size: clamp(21.536px, 1.346rem + ((1vw - 3.2px) * 1.202), 35px);
font-weight: 700;
font-style: italic;
color: #000;
line-height: 1.2;
margin: 0;
}
/* Progressive enhancement: modern browsers rebalance lines and avoid
widows automatically. Server-side nbsp glue (tpa_lp_no_widow) guards
the last-word case for older browsers. */
.lp-hero-text h1,
.lp-kicker,
.lp-subheadline,
.lp-section-title,
.lp-trust-title,
.lp-cta-band h2,
.lp-cta-band h3,
.lp-pain h3,
.lp-authority h3,
.lp-form-content h3 {
text-wrap: pretty;
}
.lp-kicker {
font-family: 'Raleway', sans-serif;
font-size: clamp(1.375rem, 0.446rem + 1.905vw, 1.875rem);
font-weight: 400;
font-style: italic;
color: #000;
margin: 20px 0 0;
}
.lp-subheadline {
font-family: 'Raleway', sans-serif;
font-size: clamp(1.25rem, 0.67rem + 1.19vw, 1.563rem);
font-weight: 700;
color: #000;
margin: 20px 0 0;
line-height: 1.5;
}
.lp-hero-ctas {
margin: 30px auto 0;
max-width: 400px;
}
.lp-hero-cta-box {
background: #fff;
padding: 16px 24px;
margin: 0;
text-align: center;
}
.lp-hero-cta-box p {
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: clamp(1.125rem, 0.661rem + 0.952vw, 1.375rem);
text-align: center;
color: #000;
}
.lp-hero-ctas .lp-btn-popup {
width: 100%;
}
.lp-hero-image {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding-right: 20px;
padding-bottom: 20px;
}
.lp-hero-image img {
width: 100%;
max-width: 500px;
aspect-ratio: 1 / 1;
object-fit: cover;
object-position: center top;
border-radius: 0 0 500px 500px;
position: relative;
z-index: 2;
}
.lp-hero-image::after {
content: '';
position: absolute;
top: 30px;
bottom: 0;
left: 0;
right: 0;
background: var(--lp-secondary);
border-radius: 0 0 500px 500px;
z-index: 1;
}
/* ============================================================
PAIN SECTION
============================================================ */
.lp-pain {
background: #eaeaea;
padding: clamp(2.5rem, 1.5625rem + 1.9231vw, 3.125rem) 0;
}
.lp-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
align-items: stretch;
max-width: 1080px;
margin: 0 auto;
}
/* Image column is constrained to the TEXT column's height — the text
drives vertical size, the image fills that box via object-fit:cover.
This prevents tall images from inflating the section past what the copy
actually needs. Position:absolute takes the flex item out of normal
flow so it doesn't contribute to row auto-sizing; the container
holds the shape.
Picture-aware: when tpa_picture() (introduced in parent v1.1.0) wraps
the ![]()
in , the picture wrapper becomes the flex/grid
item — selectors below target both wrapping styles so the same layout
behavior applies to legacy bare-img markup AND new picture-wrapped
markup. */
.lp-img-col {
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
min-height: 280px;
min-width: 0;
}
.lp-img-col img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Single-image variant: pin the flex item (picture wrapper or bare img)
so the image fills the column without inflating the row past the text.
When the flex item is , the inner ![]()
picks up width:100%
height:100% from the rule above and fills the picture. */
.lp-img-col > picture,
.lp-img-col > img:only-child {
position: absolute;
inset: 0;
}
/* Multi-image variant: switch to grid with 1fr rows + min-height:0 on
the items. Grid rows share the column height equally; min-height:0
lets items shrink below their natural size so they don't inflate the
row past what the text column needs. :has() detection covers both
wrapping styles. */
.lp-img-col:has(> img + img),
.lp-img-col:has(> picture + picture) {
display: grid;
grid-auto-rows: 1fr;
}
.lp-img-col:has(> img + img) > img,
.lp-img-col:has(> picture + picture) > picture {
position: static;
min-height: 0;
min-width: 0;
}
.lp-img-col:has(> picture + picture) > picture > img {
min-height: 0;
min-width: 0;
}
.lp-text-col h2,
.lp-text-col h3 {
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: clamp(1.375rem, 0.446rem + 1.905vw, 1.875rem);
color: #000;
margin: 0 0 15px;
}
.lp-body-copy {
font-family: 'Raleway', sans-serif;
font-size: clamp(1.125rem, 0.9375rem + 0.3846vw, 1.25rem);
line-height: 1.5;
color: #000;
font-weight: 400;
}
.lp-body-copy p {
margin: 0 0 15px;
}
.lp-body-copy p:last-child {
margin-bottom: 0;
}
.lp-body-copy h3,
.lp-body-copy h4,
.lp-body-copy h5 {
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: clamp(1.25rem, 0.95rem + 0.9vw, 1.5rem);
color: #000;
margin: 32px 0 16px;
line-height: 1.25;
}
.lp-body-copy > *:first-child {
margin-top: 0;
}
.lp-body-copy strong {
font-weight: 700;
}
.lp-body-copy ul {
padding-left: 25px;
}
.lp-body-copy li {
margin-bottom: 15px;
list-style: inside;
}
.lp-body-copy .lp-btn {
margin-top: 15px;
}
.lp-single-col {
grid-template-columns: 1fr;
}
.lp-two-col--reverse {
direction: ltr;
}
/* ============================================================
CTA BAND
============================================================ */
.lp-cta-band {
background: var(--lp-primary);
padding: clamp(2.5rem, 1.5625rem + 1.9231vw, 3.125rem) 0;
text-align: center;
}
.lp-cta-band h2,
.lp-cta-band h3 {
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 400;
margin: 0 0 30px;
font-size: clamp(1.375rem, 0.446rem + 1.905vw, 1.875rem);
line-height: 1.35;
}
.lp-cta-band p {
color: rgba(255, 255, 255, 0.85);
margin: 0 auto 30px;
max-width: 700px;
font-family: 'Raleway', sans-serif;
}
.lp-cta-band .lp-btn {
text-transform: capitalize;
}
.lp-cta2-eyebrow {
font-family: 'Raleway', sans-serif;
font-size: clamp(1.125rem, 0.661rem + 0.952vw, 1.375rem);
font-weight: 400;
letter-spacing: 0;
line-height: 1.66;
color: #fff;
margin: 0;
text-align: center;
}
.lp-cta-band-2 .lp-btn {
display: inline-block;
width: auto;
}
/* ============================================================
AUTHORITY SECTION
============================================================ */
.lp-authority {
background: #fff;
padding: clamp(2.5rem, 1.5625rem + 1.9231vw, 3.125rem) 0;
}
/* ============================================================
PROCESS SECTION
============================================================ */
.lp-process {
background: #eaeaea;
padding: clamp(2.5rem, 1.5625rem + 1.9231vw, 3.125rem) 0;
}
.lp-section-title {
text-align: center;
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: clamp(1.75rem, 0.3571rem + 2.8571vw, 2.5rem);
color: #000;
margin: 0 0 50px;
}
.lp-process-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 30px;
}
.lp-process-card {
background: #fff;
text-align: center;
overflow: visible;
position: relative;
}
.lp-process-card-top {
border-radius: 0 0 60px 60px;
padding: 40px 24px 100px;
text-align: center;
}
.lp-process-card-top h3 {
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: clamp(1.25rem, 0.67rem + 1.19vw, 1.563rem);
margin: 0;
line-height: 1.3;
}
.lp-process-card:nth-child(1) .lp-process-card-top {
background: var(--lp-secondary);
}
.lp-process-card:nth-child(2) .lp-process-card-top {
background: var(--lp-primary);
}
.lp-process-card:nth-child(3) .lp-process-card-top {
background: var(--lp-accent);
}
.lp-process-card:nth-child(4) .lp-process-card-top {
background: color-mix(in srgb, var(--lp-secondary) 65%, var(--lp-primary));
}
.lp-step-number {
display: flex;
align-items: center;
justify-content: center;
width: 130px;
height: 130px;
border-radius: 100%;
border: 5px solid #fff;
color: #fff;
font-size: 50px;
font-weight: 700;
font-family: 'Raleway', sans-serif;
margin: -75px auto 10px;
position: relative;
z-index: 9;
}
.lp-process-card:nth-child(1) .lp-step-number {
background: var(--lp-secondary);
}
.lp-process-card:nth-child(2) .lp-step-number {
background: var(--lp-primary);
}
.lp-process-card:nth-child(3) .lp-step-number {
background: var(--lp-accent);
}
.lp-process-card:nth-child(4) .lp-step-number {
background: color-mix(in srgb, var(--lp-secondary) 65%, var(--lp-primary));
}
.lp-process-card-body {
padding: 20px 30px 40px;
}
.lp-process-card-body p {
font-family: 'Raleway', sans-serif;
font-size: 1rem;
line-height: 1.7;
color: #000;
}
/* ============================================================
TRUST SECTION — full-width colored band with value props
============================================================ */
.lp-trust {
background: var(--lp-primary);
color: #fff;
padding: clamp(3rem, 2rem + 2vw, 5rem) 0;
}
.lp-trust .lp-container {
max-width: 1140px;
margin: 0 auto;
padding: 0 clamp(24px, 4vw, 48px);
}
.lp-trust-title {
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: clamp(1.75rem, 0.36rem + 2.86vw, 2.5rem);
color: #fff;
text-align: center;
margin: 0 0 48px;
line-height: 1.2;
}
.lp-trust-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: stretch;
}
/* Image and items columns each fill the grid row evenly — prevents the
"headline squished against image" look when items stack taller than the
image or vice-versa. */
.lp-trust-grid .lp-trust-items {
justify-content: center;
}
/* Trust image confined to the items column height — image never inflates
the row past what the trust items themselves need. */
.lp-trust-grid .lp-trust-image {
position: relative;
min-height: 280px;
}
.lp-trust-grid .lp-trust-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.lp-trust-grid--no-image {
grid-template-columns: 1fr;
}
.lp-trust-items {
display: flex;
flex-direction: column;
gap: 28px;
}
.lp-trust-item {
padding: 22px 26px;
background: rgba(255, 255, 255, 0.06);
border-left: 3px solid var(--lp-accent);
border-radius: 2px;
backdrop-filter: blur(4px);
}
/* Trust item titles must READ against any client's --lp-primary. Accent
colors are often dark/saturated and fail contrast on dark backgrounds.
Use white by default; the border-left on .lp-trust-item still delivers
the brand accent touch. */
.lp-trust-item h4 {
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: clamp(1.125rem, 0.9rem + 0.5vw, 1.25rem);
color: #fff;
margin: 0 0 10px;
letter-spacing: 0.01em;
}
.lp-trust-item p {
font-family: 'Raleway', sans-serif;
font-size: 1rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.92);
margin: 0;
}
.lp-trust-image {
border-radius: 6px;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.lp-trust-image img {
width: 100%;
height: auto;
display: block;
}
/* ============================================================
TESTIMONIALS
============================================================ */
.lp-testimonials {
background: #fef5ea;
padding: clamp(2.5rem, 1.5625rem + 1.9231vw, 3.125rem) 0;
}
.lp-testimonials-grid {
max-width: 800px;
margin: 0 auto;
}
.lp-testimonial {
background: #fff;
padding: 35px;
margin-bottom: 30px;
font-family: 'Raleway', sans-serif;
}
.lp-testimonial p {
font-style: italic;
line-height: 1.7;
color: #000;
margin: 0 0 10px;
}
.lp-testimonial cite {
display: block;
font-style: normal;
font-weight: 700;
color: #000;
font-size: 0.95rem;
}
/* ============================================================
FAQ
============================================================ */
.lp-faq {
background: #fff;
padding: clamp(2.5rem, 1.5625rem + 1.9231vw, 3.125rem) 0;
}
.lp-faq-list {
max-width: 1080px;
margin: 0 auto;
}
.lp-faq-item {
position: relative;
padding-bottom: 15px;
margin-bottom: 15px;
}
.lp-faq-item::after {
content: '';
border-bottom: 1px solid #000;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.lp-faq-item:last-child::after {
display: none;
}
.lp-faq-question {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
width: 100%;
padding: 10px 0;
background: none;
border: none;
cursor: pointer;
font-family: 'Raleway', sans-serif;
font-size: clamp(1.25rem, 0.9rem + 0.7vw, 1.5rem);
font-weight: 400;
color: #000;
text-align: left;
line-height: 1.35;
}
.lp-faq-question:hover {
text-decoration: none;
}
.lp-faq-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
color: #000;
transition: transform 0.35s ease;
}
.lp-faq-item--open .lp-faq-icon {
transform: rotate(180deg);
}
.lp-faq-item--open .lp-faq-v {
transform: rotate(90deg);
opacity: 0;
}
.lp-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.lp-faq-item--open .lp-faq-answer {
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.lp-faq-answer-inner {
padding: 8px 0 15px;
font-family: 'Raleway', sans-serif;
font-size: clamp(0.875rem, 0.411rem + 0.952vw, 1.125rem);
line-height: 1.5;
color: #000;
}
.lp-faq-answer-inner p {
margin: 0 0 15px;
}
.lp-faq-answer-inner p:last-child {
margin-bottom: 0;
}
/* ============================================================
FORM SECTION
============================================================ */
.lp-form-section {
background: #eaeaea;
padding: clamp(2.5rem, 1.5625rem + 1.9231vw, 3.125rem) 0;
}
.lp-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
align-items: start;
max-width: 1080px;
margin: 0 auto;
}
.lp-form-content h3 {
font-family: 'Raleway', sans-serif;
font-weight: 400;
font-size: clamp(1.375rem, 0.446rem + 1.905vw, 1.875rem);
color: #000;
margin: 0 0 30px;
line-height: 1.35;
}
.lp-form-content p,
.lp-form-content .lp-body-copy p {
font-family: 'Raleway', sans-serif;
font-size: clamp(1.125rem, 0.9375rem + 0.3846vw, 1.25rem);
line-height: 1.5;
color: #000;
margin: 0 0 15px;
}
.lp-form-steps {
background: #fff;
padding: 30px;
margin: 30px 0;
}
.lp-form-steps h4 {
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: clamp(1.125rem, 0.9375rem + 0.3846vw, 1.25rem);
margin: 0 0 15px;
}
.lp-form-steps ol {
padding-left: 25px;
font-family: 'Raleway', sans-serif;
font-size: clamp(1.125rem, 0.9375rem + 0.3846vw, 1.25rem);
line-height: 1.5;
margin: 0;
}
.lp-form-steps li {
margin-bottom: 15px;
}
.lp-form-steps li:last-child {
margin-bottom: 0;
}
.lp-form-trust {
margin-top: 30px;
}
.lp-form-trust-item {
display: flex;
gap: 15px;
align-items: flex-start;
flex-wrap: nowrap;
margin-bottom: 20px;
}
img.lp-form-trust-icon {
width: 44px;
height: auto;
flex-shrink: 0;
margin-top: 4px;
}
.lp-form-trust-text {
font-family: 'Raleway', sans-serif;
line-height: 1.5;
}
.lp-form-trust-text h4 {
font-family: 'Raleway', sans-serif;
font-size: clamp(1.25rem, 0.67rem + 1.19vw, 1.563rem);
font-weight: 400;
line-height: 1.15;
margin: 0 0 8px;
}
.lp-form-trust-text p {
font-family: 'Raleway', sans-serif;
font-size: clamp(0.875rem, 0.411rem + 0.952vw, 1.125rem) !important;
line-height: 1.5;
margin: 0 0 8px !important;
}
.lp-form-trust-text p:last-child {
margin-bottom: 0 !important;
}
.lp-form-sidebar {
background: #fff;
padding: 30px;
box-shadow: 12px 12px 50px rgba(0, 0, 0, 0.4);
position: sticky;
top: 20px;
}
.lp-form-sidebar h4 {
font-family: 'Raleway', sans-serif;
font-size: clamp(1.25rem, 0.67rem + 1.19vw, 1.563rem);
text-align: center;
font-weight: 400;
margin: 0;
line-height: 1.15;
}
.lp-form-sidebar h3 {
font-family: 'Raleway', sans-serif;
font-size: clamp(1.375rem, 0.446rem + 1.905vw, 1.875rem);
text-align: center;
font-weight: 400;
margin: 0 0 20px;
padding: 0;
line-height: 1.35;
}
.lp-form-disclaimer {
font-family: 'Raleway', sans-serif;
font-size: clamp(0.875rem, 0.411rem + 0.952vw, 1.125rem);
text-align: center;
margin-top: 15px;
}
/* WPForms inside form sidebar */
.lp-form-sidebar .wpforms-form input,
.lp-form-sidebar .wpforms-form select,
.lp-form-sidebar .wpforms-form textarea {
background-color: #fff;
border: 1px solid #000 !important;
border-radius: 0 !important;
padding: 12px 20px !important;
height: 54px !important;
font-family: 'Raleway', sans-serif;
font-size: clamp(0.875rem, 0.411rem + 0.952vw, 1.125rem) !important;
font-weight: 400;
line-height: 1.15;
color: #000;
width: 100% !important;
box-sizing: border-box;
}
.lp-form-sidebar .wpforms-form textarea {
height: 112px !important;
}
.lp-form-sidebar .wpforms-submit-container {
margin-top: 0 !important;
text-align: center;
}
.lp-form-sidebar .wpforms-form .wpforms-submit,
.lp-form-sidebar .wpforms-submit-container button {
background: var(--lp-accent) !important;
border: 1px solid var(--lp-accent) !important;
color: #fff !important;
padding: 17px 36px !important;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: clamp(1.125rem, 0.9375rem + 0.3846vw, 1.25rem) !important;
text-transform: uppercase;
letter-spacing: 0;
line-height: normal;
border-radius: 0 !important;
width: 100%;
height: auto !important;
cursor: pointer;
}
.lp-form-sidebar .wpforms-form .wpforms-submit:hover,
.lp-form-sidebar .wpforms-submit-container button:hover {
background: var(--lp-secondary) !important;
border-color: var(--lp-secondary) !important;
color: #fff !important;
}
.lp-form-sidebar .wpforms-form label {
font-family: 'Raleway', sans-serif;
font-size: clamp(0.875rem, 0.411rem + 0.952vw, 1.125rem) !important;
text-transform: uppercase;
font-weight: 400;
color: #000;
margin-bottom: 5px;
}
.lp-form-sidebar .wpforms-required-label {
display: none;
}
/* ============================================================
FOOTER
============================================================ */
.lp-footer {
background: #FFF3E0;
padding: 36px 0 22px;
border-top: 1px solid rgba(63,111,167,0.06);
}
.lp-footer .lp-container {
max-width: 1140px;
margin: 0 auto;
padding: 0 24px;
}
.lp-footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 14px;
}
.lp-footer-logo img {
height: 56px;
width: auto;
opacity: 0.65;
transition: opacity 0.3s;
}
.lp-footer-logo img:hover {
opacity: 1;
}
.lp-footer-copy {
font-family: 'Raleway', sans-serif;
font-size: 0.75rem;
color: #9aa5ad;
text-align: center;
margin: 0;
}
.lp-footer-legal {
display: flex;
align-items: center;
gap: 0;
}
.lp-footer-legal a {
font-family: 'Raleway', sans-serif;
font-size: 1rem;
color: #9aa5ad;
text-decoration: none;
transition: color 0.2s;
}
.lp-footer-legal a:hover {
color: var(--lp-primary);
}
.lp-footer-legal-sep {
margin: 0 8px;
color: #9aa5ad;
font-size: 0.6rem;
}
/* ============================================================
RESPONSIVE — 1100px (hamburger takeover earlier so long practice
names + 5 nav items never overlap the logo or phone CTA)
============================================================ */
@media (max-width: 1240px) {
.lp-header {
position: relative;
}
.lp-nav,
.lp-header-phone {
display: none;
}
.lp-menu-toggle {
display: flex;
flex-direction: column;
gap: 5px;
margin-left: auto;
}
.lp-hero-grid {
grid-template-columns: 1fr;
}
.lp-hero-image {
max-width: 350px;
margin: 0 auto;
order: -1;
}
.lp-hero-ctas {
float: none;
margin: 20px auto 0;
max-width: 275px;
}
.lp-two-col,
.lp-form-grid {
grid-template-columns: 1fr;
}
.lp-process-grid {
grid-template-columns: 1fr;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.lp-trust-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.lp-trust-image {
order: -1;
max-width: 400px;
margin: 0 auto;
}
.lp-footer-inner {
flex-direction: column;
text-align: center;
gap: 18px;
}
.lp-footer-copy {
text-align: center;
}
.lp-footer-legal {
justify-content: center;
}
}
/* ============================================================
RESPONSIVE — 600px
============================================================ */
@media (max-width: 600px) {
.lp-container {
padding: 0 16px;
}
/* ── HERO IMAGE — wider on phones ──
Was 260px (≈55% of a 390px viewport, with 65px gutters that
looked unintentional). Bump to a fluid clamp that lets the
image breathe to ~330px while keeping ≥30px gutters on either
side. Also clear the asymmetric padding-right/bottom that was
designed for the desktop offset accent — at this size the image
is the LCP element and shouldn't be visually shoved off-center. */
.lp-hero-image {
max-width: clamp(280px, 88vw, 360px);
padding: 0;
width: 100%;
margin: 0 auto;
}
.lp-hero-image::after {
top: 15px;
left: 15px;
}
/* ── HAMBURGER — tighter line spacing ──
Was margin:5px which made the icon visually 26px tall in a 44px
button — too spread out. Tighten to a standard ≈18px-tall
hamburger that reads as one mark, not three floating bars. */
.lp-menu-toggle span {
margin: 3px 0;
}
/* ── MOBILE-MENU PHONE CTA — readable + roomy ──
The default rule sets color:#fff but a lower-specificity ancestor
rule was repainting it to body text color, leaving dark text on a
dark brand button (unreadable). Force white via !important and
add generous padding so the number floats inside the button
instead of butting against the edges. Min-height satisfies the
44px touch baseline. */
/* Use a.lp-mobile-phone to outrank a[href^="tel:"] from the
touch-device baseline at the same specificity, then !important
on padding for absolute certainty (the baseline applies a flat
"padding: 12px 0" that strips horizontal padding). */
a.lp-mobile-phone {
color: #fff !important;
padding: 16px 32px !important;
min-height: 44px;
line-height: 1.2;
letter-spacing: 0.02em;
box-sizing: border-box;
background: var(--lp-primary);
border-radius: 4px;
}
/* ── CREDIBILITY BADGES — substantial, not stamp-sized ──
Were 32px tall in a 2x2 wrap (so small the text was nearly
unreadable). Lay out as a 2-column grid with generous breathing
room and bump heights to 56px. Constrain each badge's max-width
so they all fit at the same visual weight without overflowing. */
.lp-credibility {
padding: 32px 0;
}
.lp-credibility-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px 20px;
align-items: center;
justify-items: center;
flex-wrap: initial;
}
.lp-credibility-row img {
height: 56px;
max-width: 100%;
width: auto;
object-fit: contain;
}
/* ── BODY IMAGES — flow naturally on mobile single-stack ──
The desktop rule pins the flex item (picture or bare img) with
position:absolute so the image fills the column matching text-col
height in the grid. On mobile the layout collapses to a single
stack — absolute positioning would make the image collapse the
row, since the absolute item contributes 0 to row sizing and
min-height fails to engage in grid auto-row contexts.
Undo the absolute positioning so picture+img flow naturally and
contribute to row sizing; the column shrinks to image height
and the text col cleanly clears below.
Also force-center on the cross axis since some browsers treat
the auto-margin differently inside flex columns. */
.lp-img-col {
min-height: 0;
}
.lp-img-col > picture,
.lp-img-col > img:only-child {
position: static;
inset: auto;
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
.lp-img-col > picture > img {
position: static;
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
/* ── TRUST IMAGE — actually render it ──
The desktop CSS uses position:absolute on the inner img and
min-height:280px on the wrapper. When the grid collapses to
a single column on mobile, the wrapper has no intrinsic width
(because the absolute child contributes none) and shrinks to 0.
Force width:100% so the wrapper takes the column it's placed in,
then the absolute-positioned img can fill it. */
.lp-trust-image {
width: 100% !important;
max-width: 480px;
aspect-ratio: 4 / 3;
min-height: 0;
margin: 0 auto;
}
}
/* ════════════════════════════════════════════════════
TOUCH-DEVICE BASELINE for landing-page elements
The LP template loads this file directly (page-landing.php
enqueues it) but does NOT load the child theme's client.css.
So the touch-device baseline that lives in client.css for the
rest of the site has to be duplicated here for LP-specific
selectors. Per CLAUDE.md: 44x44 tap targets, 14px min font.
════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
/* LP brand link — has nested , use padding not flex. */
.lp-brand,
a.lp-brand,
a.lp-brand.nav-brand {
min-height: 44px !important;
padding-top: 6px !important;
padding-bottom: 6px !important;
box-sizing: border-box !important;
}
/* LP hamburger button — landing.css sets it to ~30px wide. */
.lp-menu-toggle,
button.lp-menu-toggle {
min-width: 44px !important;
min-height: 44px !important;
}
/* LP mobile menu links + footer legal links — image/text anchors. */
.lp-mobile-menu a,
.lp-footer-legal a {
min-height: 44px !important;
min-width: 44px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
/* LP footer logo + Psychology Today badge — image-wrapping anchors. */
.lp-footer-logo,
.lp-footer-logo a,
.lp-footer-logo img,
.footer-pt-badge,
.footer-pt-badge img {
min-height: 44px !important;
min-width: 44px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
/* LP footer copyright + name + legal text — 14px floor on touch. */
.lp-footer-copy,
.lp-footer-copy p,
.lp-footer-name,
.lp-footer-legal,
.lp-footer-legal a {
font-size: 14px !important;
}
/* LP form labels (WPForms cascade requires !important + double selector). */
.lp-form-sidebar .wpforms-form label,
.lp-form-sidebar .wpforms-container .wpforms-field-label {
font-size: 14px !important;
}
/* LP form submit button — landing.css sets it to ~41px tall. */
.lp-form-sidebar .wpforms-form .wpforms-submit,
.lp-form-sidebar button[type="submit"] {
min-height: 44px !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
}
}