Partner Test

/* =========================================================
PRODUCERS XL — PARTNER PAGE
Page-specific styles only.
Does not alter the site header, footer, navigation or fonts.
========================================================= */

.pxl-partner-page {
–pxl-blue: var(–wp–preset–color–primary, #00498f);
–pxl-navy: #001f35;
–pxl-text: var(–wp–preset–color–contrast, #334155);
–pxl-muted: #64748b;
–pxl-light: #f5f8fb;
–pxl-border: #dfe7ee;
–pxl-white: #ffffff;

color: var(–pxl-text);
line-height: 1.65;
}

.pxl-partner-page *,
.pxl-partner-page *::before,
.pxl-partner-page *::after {
box-sizing: border-box;
}

.pxl-partner-page h2,
.pxl-partner-page h3 {
margin-top: 0;
}

.pxl-partner-page p:last-child {
margin-bottom: 0;
}

.pxl-partner-page a {
transition: all .18s ease;
}

/* HERO */

.pxl-partner-hero {
position: relative;
overflow: hidden;
padding: clamp(42px, 6vw, 72px);
margin-bottom: clamp(55px, 7vw, 85px);
border-radius: 8px;
background:
linear-gradient(
125deg,
var(–pxl-navy) 0%,
var(–pxl-blue) 100%
);
color: #fff;
}

.pxl-partner-hero::after {
content: “”;
position: absolute;
width: 360px;
height: 360px;
right: -130px;
top: -150px;
border: 1px solid rgba(255,255,255,.15);
border-radius: 50%;
}

.pxl-partner-eyebrow {
display: block;
margin-bottom: 12px;
font-size: 13px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.8);
}

.pxl-partner-hero h2 {
position: relative;
z-index: 1;
max-width: 850px;
margin-bottom: 18px;
font-size: clamp(32px, 5vw, 52px);
line-height: 1.12;
color: #fff;
}

.pxl-partner-hero p {
position: relative;
z-index: 1;
max-width: 780px;
margin: 0 0 27px;
font-size: clamp(17px, 2vw, 20px);
color: rgba(255,255,255,.9);
}

.pxl-partner-hero .wp-block-buttons {
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
}

.pxl-partner-hero .wp-block-button {
margin: 0;
}

.pxl-partner-hero .wp-block-button__link {
display: inline-block;
min-width: 160px;
padding: 13px 23px;
text-align: center;
font-weight: 700;
text-decoration: none;
}

.pxl-partner-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link {
background: #fff;
color: var(–pxl-blue);
}

.pxl-partner-hero .wp-block-button.is-style-outline .wp-block-button__link {
border: 2px solid rgba(255,255,255,.8);
background: transparent;
color: #fff;
}

.pxl-partner-hero .wp-block-button__link:hover {
transform: translateY(-2px);
}

/* GENERAL SECTIONS */

.pxl-partner-section {
margin: clamp(55px, 7vw, 85px) 0;
}

.pxl-partner-section-head {
max-width: 790px;
margin-bottom: 32px;
}

.pxl-partner-section-head.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}

.pxl-partner-kicker {
display: block;
margin-bottom: 8px;
font-size: 13px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(–pxl-blue);
}

.pxl-partner-section h2 {
margin-bottom: 14px;
font-size: clamp(28px, 4vw, 40px);
line-height: 1.2;
color: var(–pxl-navy);
}

.pxl-partner-section-head p {
margin: 0;
font-size: 18px;
color: var(–pxl-muted);
}

/* SUPPORT STRIP */

.pxl-support-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: -30px;
margin-bottom: clamp(60px, 8vw, 90px);
border: 1px solid var(–pxl-border);
border-radius: 7px;
background: #fff;
box-shadow: 0 10px 30px rgba(15, 23, 42, .07);
}

.pxl-support-item {
padding: 25px 28px;
text-align: center;
border-right: 1px solid var(–pxl-border);
}

.pxl-support-item:last-child {
border-right: 0;
}

.pxl-support-item strong {
display: block;
margin-bottom: 3px;
font-size: 18px;
color: var(–pxl-navy);
}

.pxl-support-item span {
font-size: 14px;
color: var(–pxl-muted);
}

/* CARDS */

.pxl-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.pxl-card {
height: 100%;
padding: 27px;
border: 1px solid var(–pxl-border);
border-radius: 7px;
background: #fff;
}

.pxl-card:hover {
border-color: rgba(0,73,143,.35);
box-shadow: 0 9px 24px rgba(15,23,42,.07);
transform: translateY(-2px);
}

.pxl-card-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-bottom: 18px;
border-radius: 50%;
background: var(–pxl-light);
color: var(–pxl-blue);
font-size: 14px;
font-weight: 700;
}

.pxl-card h3 {
margin-bottom: 9px;
font-size: 21px;
color: var(–pxl-navy);
}

.pxl-card p {
margin: 0;
color: var(–pxl-muted);
}

/* MARKETS */

.pxl-market-area {
padding: clamp(42px, 6vw, 65px);
border-radius: 8px;
background: var(–pxl-light);
}

.pxl-market-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 30px;
}

.pxl-market {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 82px;
padding: 20px 22px;
border: 1px solid var(–pxl-border);
border-radius: 6px;
background: #fff;
color: var(–pxl-navy);
font-size: 18px;
font-weight: 700;
text-decoration: none;
}

.pxl-market span {
color: var(–pxl-blue);
font-size: 22px;
line-height: 1;
}

.pxl-market:hover {
border-color: var(–pxl-blue);
color: var(–pxl-blue);
transform: translateY(-2px);
}

/* RELATIONSHIP SECTION */

.pxl-relationship {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(35px, 6vw, 70px);
align-items: center;
}

.pxl-relationship-copy p {
font-size: 17px;
color: var(–pxl-muted);
}

.pxl-checklist {
margin: 25px 0 0;
padding: 0;
list-style: none;
}

.pxl-checklist li {
position: relative;
margin: 0 0 13px;
padding-left: 29px;
}

.pxl-checklist li::before {
content: “✓”;
position: absolute;
left: 0;
top: 0;
color: var(–pxl-blue);
font-weight: 700;
}

.pxl-contact-card {
padding: clamp(30px, 5vw, 42px);
border-left: 5px solid var(–pxl-blue);
background: var(–pxl-light);
}

.pxl-contact-card h3 {
margin-bottom: 13px;
font-size: 25px;
color: var(–pxl-navy);
}

.pxl-contact-card p {
margin-bottom: 20px;
}

.pxl-contact-card a:not(.wp-block-button__link) {
font-weight: 700;
color: var(–pxl-blue);
}

/* FINAL CTA */

.pxl-final-cta {
padding: clamp(40px, 6vw, 62px);
margin-top: clamp(60px, 8vw, 90px);
border-radius: 8px;
text-align: center;
background: var(–pxl-navy);
color: #fff;
}

.pxl-final-cta .pxl-partner-kicker {
color: rgba(255,255,255,.7);
}

.pxl-final-cta h2 {
max-width: 750px;
margin: 0 auto 14px;
color: #fff;
}

.pxl-final-cta p {
max-width: 700px;
margin: 0 auto 25px;
color: rgba(255,255,255,.85);
font-size: 17px;
}

.pxl-final-cta .wp-block-buttons {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}

.pxl-final-cta .wp-block-button {
margin: 0;
}

.pxl-final-cta .wp-block-button__link {
padding: 13px 23px;
font-weight: 700;
text-decoration: none;
}

.pxl-final-cta .wp-block-button:not(.is-style-outline) .wp-block-button__link {
background: #fff;
color: var(–pxl-blue);
}

.pxl-final-cta .wp-block-button.is-style-outline .wp-block-button__link {
border: 2px solid rgba(255,255,255,.8);
background: transparent;
color: #fff;
}

.pxl-existing-agent {
margin-top: 18px !important;
font-size: 14px !important;
}

.pxl-existing-agent a {
color: #fff;
text-decoration: underline;
}

/* MOBILE */

@media (max-width: 900px) {

.pxl-card-grid,
.pxl-market-grid {
grid-template-columns: repeat(2, 1fr);
}

.pxl-relationship {
grid-template-columns: 1fr;
}

}

@media (max-width: 650px) {

.pxl-partner-hero {
padding: 38px 27px;
}

.pxl-support-strip,
.pxl-card-grid,
.pxl-market-grid {
grid-template-columns: 1fr;
}

.pxl-support-item {
border-right: 0;
border-bottom: 1px solid var(–pxl-border);
}

.pxl-support-item:last-child {
border-bottom: 0;
}

.pxl-market-area {
padding: 35px 23px;
}

.pxl-partner-hero .wp-block-buttons,
.pxl-final-cta .wp-block-buttons {
flex-direction: column;
}

.pxl-partner-hero .wp-block-button,
.pxl-partner-hero .wp-block-button__link,
.pxl-final-cta .wp-block-button,
.pxl-final-cta .wp-block-button__link {
width: 100%;
}

}