/*
* plr-modern.css
* New design system for pastliferegressiondallas.com
* City/State dynamic page, Header, Footer
*
* ALL selectors are prefixed with .plr- or target
* specific new IDs to avoid any conflict with the
* existing styles.css file.
*
* Link AFTER styles.css:
*
*
* Google Fonts (add to before this stylesheet):
*
*
*
*/
/* ============================================================
DESIGN TOKENS
============================================================ */
:root {
--plr-navy: #0d1b2a;
--plr-navy-mid: #122236;
--plr-navy-light: #1a3050;
--plr-gold: #c9a84c;
--plr-gold-light: #e8c96a;
--plr-cream: #f0ebe0;
--plr-text: #e8e4dc;
--plr-muted: #9ba8b5;
--plr-border: rgba(201, 168, 76, 0.25);
--plr-white: #ffffff;
--plr-radius: 12px;
--plr-radius-sm: 8px;
--plr-radius-pill: 32px;
--plr-shadow-gold: 0 4px 20px rgba(201, 168, 76, 0.35);
--plr-transition: 0.25s ease;
--plr-max-width: 1100px;
--plr-content-width: 820px;
}
/* ============================================================
GLOBAL PAGE RESET (scoped to .plr-page body wrapper)
============================================================ */
.plr-page {
font-family: 'Inter', Verdana, Arial, sans-serif;
background-color: var(--plr-navy);
color: var(--plr-text);
line-height: 1.7;
font-size: 16px;
margin: 0;
padding: 0;
}
.plr-page *,
.plr-page *::before,
.plr-page *::after {
box-sizing: border-box;
}
.plr-page img {
max-width: 100%;
height: auto;
display: block;
}
.plr-page a {
color: inherit;
text-decoration: none;
}
/* ============================================================
STICKY SHRINKING HEADER — TheHeaderR2.ascx
============================================================ */
.plr-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(13, 27, 42, 0.92);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--plr-border);
transition: padding var(--plr-transition), background var(--plr-transition);
padding: 18px 0;
}
.plr-header.plr-scrolled {
padding: 10px 0;
background: rgba(13, 27, 42, 0.98);
}
.plr-header-inner {
max-width: var(--plr-max-width);
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
/* Logo */
.plr-logo {
display: flex;
flex-direction: column;
line-height: 1.5;
transition: transform var(--plr-transition);
text-decoration: none;
}
.plr-header.plr-scrolled .plr-logo {
transform: scale(0.9);
transform-origin: left center;
}
.plr-logo-name {
font-family: 'Playfair Display', 'Times New Roman', serif;
font-size: 1.3rem;
font-weight: 600;
color: var(--plr-cream);
letter-spacing: 0.02em;
}
.plr-logo-title {
font-size: 0.68rem;
font-weight: 400;
color: var(--plr-gold);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-top: 4px;
}
/* Desktop nav */
.plr-nav {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.plr-nav li a {
font-size: 0.82rem;
font-weight: 500;
color: var(--plr-muted);
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 4px;
transition: color var(--plr-transition);
text-decoration: none;
display: block;
}
.plr-nav li a:hover,
.plr-nav li a:visited:hover {
color: var(--plr-cream);
text-decoration: none;
}
.plr-nav li.plr-nav-cta a {
background: var(--plr-gold);
color: var(--plr-navy);
font-weight: 600;
padding: 8px 18px;
border-radius: var(--plr-radius-pill);
transition: background var(--plr-transition), transform var(--plr-transition);
}
.plr-nav li.plr-nav-cta a:hover {
background: var(--plr-gold-light);
transform: translateY(-1px);
text-decoration: none;
color: var(--plr-navy);
}
/* Hamburger */
.plr-hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
background: none;
border: none;
}
.plr-hamburger span {
display: block;
width: 24px;
height: 2px;
background: var(--plr-cream);
border-radius: 2px;
transition: all 0.3s ease;
}
/* Mobile full-screen menu */
.plr-mobile-menu {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(13, 27, 42, 0.98);
z-index: 999;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 28px;
}
.plr-mobile-menu.plr-open {
display: flex;
}
.plr-mobile-menu a {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
color: var(--plr-cream);
transition: color var(--plr-transition);
text-decoration: none;
}
.plr-mobile-menu a:hover {
color: var(--plr-gold);
text-decoration: none;
}
.plr-mobile-menu .plr-mobile-cta {
color: var(--plr-gold) !important;
}
.plr-mobile-close {
position: absolute;
top: 20px;
right: 24px;
background: none;
border: none;
color: var(--plr-cream);
cursor: pointer;
font-size: 1.5rem;
line-height: 1;
}
/* ============================================================
HERO SECTION
============================================================ */
.plr-hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
}
.plr-hero-bg {
position: absolute;
inset: 0;
background-image: url('/images/plr-hero-stars.jpg');
background-size: cover;
background-position: center 30%;
filter: brightness(0.60);
z-index: 0;
}
/* CSS star particles layered on top of the photo */
.plr-stars-overlay {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
}
.plr-stars-overlay::before,
.plr-stars-overlay::after {
content: '';
position: absolute;
inset: 0;
}
.plr-stars-overlay::before {
background-image:
radial-gradient(1px 1px at 4% 8%, rgba(255,255,255,0.95) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 11% 20%, rgba(255,255,255,0.85) 0%, transparent 100%),
radial-gradient(1px 1px at 18% 5%, rgba(255,255,255,0.90) 0%, transparent 100%),
radial-gradient(2px 2px at 24% 35%, rgba(255,255,255,0.60) 0%, transparent 100%),
radial-gradient(1px 1px at 31% 14%, rgba(255,255,255,0.80) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 38% 28%, rgba(201,168,76,0.55) 0%, transparent 100%),
radial-gradient(1px 1px at 44% 7%, rgba(255,255,255,0.90) 0%, transparent 100%),
radial-gradient(1px 1px at 50% 42%, rgba(255,255,255,0.70) 0%, transparent 100%),
radial-gradient(2px 2px at 57% 18%, rgba(255,255,255,0.85) 0%, transparent 100%),
radial-gradient(1px 1px at 63% 32%, rgba(255,255,255,0.75) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 70% 10%, rgba(255,255,255,0.95) 0%, transparent 100%),
radial-gradient(1px 1px at 76% 25%, rgba(201,168,76,0.50) 0%, transparent 100%),
radial-gradient(1px 1px at 82% 5%, rgba(255,255,255,0.80) 0%, transparent 100%),
radial-gradient(2px 2px at 88% 38%, rgba(255,255,255,0.65) 0%, transparent 100%),
radial-gradient(1px 1px at 94% 15%, rgba(255,255,255,0.90) 0%, transparent 100%),
radial-gradient(1px 1px at 7% 52%, rgba(255,255,255,0.70) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 15% 65%, rgba(255,255,255,0.60) 0%, transparent 100%),
radial-gradient(1px 1px at 22% 78%, rgba(255,255,255,0.75) 0%, transparent 100%),
radial-gradient(1px 1px at 29% 58%, rgba(201,168,76,0.40) 0%, transparent 100%),
radial-gradient(2px 2px at 36% 72%, rgba(255,255,255,0.55) 0%, transparent 100%),
radial-gradient(1px 1px at 43% 85%, rgba(255,255,255,0.80) 0%, transparent 100%),
radial-gradient(1px 1px at 51% 62%, rgba(255,255,255,0.70) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 58% 75%, rgba(255,255,255,0.85) 0%, transparent 100%),
radial-gradient(1px 1px at 65% 55%, rgba(255,255,255,0.65) 0%, transparent 100%),
radial-gradient(1px 1px at 72% 88%, rgba(201,168,76,0.45) 0%, transparent 100%),
radial-gradient(2px 2px at 79% 68%, rgba(255,255,255,0.60) 0%, transparent 100%),
radial-gradient(1px 1px at 86% 80%, rgba(255,255,255,0.80) 0%, transparent 100%),
radial-gradient(1px 1px at 92% 60%, rgba(255,255,255,0.70) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 97% 45%, rgba(255,255,255,0.90) 0%, transparent 100%),
radial-gradient(1px 1px at 3% 90%, rgba(255,255,255,0.65) 0%, transparent 100%);
}
.plr-stars-overlay::after {
background-image:
radial-gradient(1px 1px at 8% 30%, rgba(201,168,76,0.55) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 16% 48%, rgba(255,255,255,0.80) 0%, transparent 100%),
radial-gradient(1px 1px at 23% 22%, rgba(255,255,255,0.70) 0%, transparent 100%),
radial-gradient(2px 2px at 33% 55%, rgba(255,255,255,0.50) 0%, transparent 100%),
radial-gradient(1px 1px at 41% 38%, rgba(201,168,76,0.45) 0%, transparent 100%),
radial-gradient(1px 1px at 48% 68%, rgba(255,255,255,0.75) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 55% 45%, rgba(255,255,255,0.85) 0%, transparent 100%),
radial-gradient(1px 1px at 62% 82%, rgba(255,255,255,0.65) 0%, transparent 100%),
radial-gradient(1px 1px at 69% 28%, rgba(201,168,76,0.50) 0%, transparent 100%),
radial-gradient(2px 2px at 75% 62%, rgba(255,255,255,0.60) 0%, transparent 100%),
radial-gradient(1px 1px at 81% 42%, rgba(255,255,255,0.80) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 87% 72%, rgba(255,255,255,0.70) 0%, transparent 100%),
radial-gradient(1px 1px at 93% 35%, rgba(201,168,76,0.40) 0%, transparent 100%),
radial-gradient(1px 1px at 98% 80%, rgba(255,255,255,0.75) 0%, transparent 100%);
animation: plr-twinkle 4s ease-in-out infinite alternate;
}
@keyframes plr-twinkle {
0% { opacity: 0.55; }
100% { opacity: 1; }
}
.plr-hero-gradient {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(13,27,42,0.10) 0%,
rgba(13,27,42,0.05) 35%,
rgba(13,27,42,0.50) 75%,
rgba(13,27,42,1.00) 100%
);
z-index: 2;
}
.plr-hero-content {
position: relative;
z-index: 3;
max-width: 800px;
padding: 120px 24px 80px;
}
.plr-hero-eyebrow {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--plr-gold);
margin-bottom: 20px;
}
.plr-hero-title {
font-family: 'Playfair Display', 'Times New Roman', serif;
font-size: clamp(2.2rem, 5.5vw, 3.8rem);
font-weight: 700;
line-height: 1.15;
color: var(--plr-white);
margin-bottom: 12px;
}
.plr-hero-city {
color: var(--plr-gold-light);
}
.plr-hero-subtitle {
font-family: 'Playfair Display', serif;
font-size: clamp(1rem, 2vw, 1.2rem);
font-weight: 400;
font-style: italic;
color: rgba(240,235,224,0.85);
margin-bottom: 28px;
letter-spacing: 0.02em;
}
.plr-hero-desc {
font-size: 1.05rem;
color: rgba(232,228,220,0.82);
max-width: 620px;
margin: 0 auto 38px;
line-height: 1.75;
}
.plr-hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 14px;
justify-content: center;
}
.plr-scroll-hint {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: rgba(232,228,220,0.45);
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
animation: plr-bounce 2.5s ease-in-out infinite;
}
@keyframes plr-bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(7px); }
}
/* ============================================================
BUTTONS
============================================================ */
.plr-btn-primary,
a.plr-btn-primary {
display: inline-block;
background: var(--plr-gold);
color: var(--plr-navy) !important;
font-family: 'Inter', Arial, sans-serif;
font-size: 0.88rem;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 15px 32px;
border-radius: var(--plr-radius-pill);
border: none;
cursor: pointer;
transition: background var(--plr-transition), transform var(--plr-transition), box-shadow var(--plr-transition);
box-shadow: var(--plr-shadow-gold);
text-decoration: none !important;
}
.plr-btn-primary:hover,
a.plr-btn-primary:hover {
background: var(--plr-gold-light);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(201,168,76,0.5);
text-decoration: none !important;
color: var(--plr-navy) !important;
}
.plr-btn-outline,
a.plr-btn-outline {
display: inline-block;
background: transparent;
color: var(--plr-cream) !important;
font-family: 'Inter', Arial, sans-serif;
font-size: 0.88rem;
font-weight: 500;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 14px 30px;
border-radius: var(--plr-radius-pill);
border: 1.5px solid rgba(240,235,224,0.45);
cursor: pointer;
transition: border-color var(--plr-transition), color var(--plr-transition), transform var(--plr-transition);
text-decoration: none !important;
}
.plr-btn-outline:hover,
a.plr-btn-outline:hover {
border-color: var(--plr-gold);
color: var(--plr-gold-light) !important;
transform: translateY(-2px);
text-decoration: none !important;
}
/* ============================================================
TRUST BAR
============================================================ */
.plr-trust-bar {
background: var(--plr-navy-mid);
border-top: 1px solid var(--plr-border);
border-bottom: 1px solid var(--plr-border);
padding: 20px 24px;
}
.plr-trust-bar-inner {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 28px;
align-items: center;
}
.plr-trust-item {
display: flex;
align-items: center;
gap: 9px;
font-size: 0.82rem;
color: var(--plr-muted);
letter-spacing: 0.03em;
}
.plr-trust-item svg { color: var(--plr-gold); flex-shrink: 0; }
.plr-trust-item strong { color: var(--plr-cream); }
/* ============================================================
MAIN CONTENT WRAPPER
============================================================ */
.plr-main {
max-width: var(--plr-content-width);
margin: 0 auto;
padding: 0 24px;
}
/* ============================================================
SECTION TYPOGRAPHY
============================================================ */
.plr-section {
padding: 68px 0;
}
.plr-section-label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--plr-gold);
margin-bottom: 10px;
display: block;
}
.plr-section-title {
font-family: 'Playfair Display', 'Times New Roman', serif;
font-size: clamp(1.6rem, 3.5vw, 2.3rem);
font-weight: 600;
color: var(--plr-cream);
line-height: 1.25;
margin-bottom: 18px;
}
.plr-divider {
width: 48px;
height: 2px;
background: var(--plr-gold);
margin-bottom: 26px;
border-radius: 2px;
border: none;
}
.plr-body-text {
color: rgba(232,228,220,0.85);
font-size: 1rem;
line-height: 1.75;
margin-bottom: 18px;
}
.plr-body-text:last-child { margin-bottom: 0; }
/* Center images inside generated content regardless of inline styles */
.plr-body-text p img,
.plr-main p img,
.plr-section p img {
display: block !important;
max-width: 100% !important;
height: auto !important;
margin: 0 auto !important;
float: none !important;
}
.plr-inline-link,
.plr-page a.plr-inline-link {
color: var(--plr-gold) !important;
font-weight: 600;
border-bottom: 1px solid rgba(201,168,76,0.4);
transition: border-color var(--plr-transition);
text-decoration: none !important;
}
.plr-inline-link:hover,
.plr-page a.plr-inline-link:hover {
border-color: var(--plr-gold);
text-decoration: none !important;
}
/* ============================================================
3-STEP PROCESS CARDS
============================================================ */
.plr-steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 32px;
}
.plr-step-card {
background: var(--plr-navy-mid);
border: 1px solid var(--plr-border);
border-radius: var(--plr-radius);
padding: 28px 22px;
text-align: center;
transition: border-color var(--plr-transition), transform var(--plr-transition);
}
.plr-step-card:hover {
border-color: var(--plr-gold);
transform: translateY(-3px);
}
.plr-step-number {
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(201,168,76,0.10);
border: 1.5px solid var(--plr-gold);
color: var(--plr-gold);
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}
.plr-step-title {
font-family: 'Playfair Display', serif;
font-size: 1rem;
font-weight: 600;
color: var(--plr-cream);
margin-bottom: 8px;
}
.plr-step-desc {
font-size: 0.85rem;
color: var(--plr-muted);
line-height: 1.6;
margin-bottom: 16px;
}
.plr-step-link,
a.plr-step-link {
font-size: 0.82rem;
font-weight: 600;
color: var(--plr-gold) !important;
letter-spacing: 0.06em;
text-transform: uppercase;
border-bottom: 1px solid transparent;
transition: border-color var(--plr-transition);
text-decoration: none !important;
}
.plr-step-link:hover,
a.plr-step-link:hover {
border-color: var(--plr-gold);
text-decoration: none !important;
}
/* ============================================================
ABOUT / CREDENTIALS SECTION
============================================================ */
.plr-about-grid {
display: grid;
grid-template-columns: 1fr 1.65fr;
gap: 48px;
align-items: start;
}
.plr-credentials-card {
background: var(--plr-navy-mid);
border: 1px solid var(--plr-border);
border-radius: var(--plr-radius);
padding: 28px;
position: sticky;
top: 90px;
}
.plr-credentials-name {
font-family: 'Playfair Display', serif;
font-size: 1.15rem;
font-weight: 600;
color: var(--plr-cream);
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid var(--plr-border);
}
.plr-credential-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 11px;
font-size: 0.85rem;
color: var(--plr-muted);
line-height: 1.5;
}
.plr-credential-item svg {
color: var(--plr-gold);
flex-shrink: 0;
margin-top: 2px;
}
.plr-contact-block {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--plr-border);
}
.plr-contact-block a,
.plr-page .plr-contact-block a {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
color: var(--plr-cream) !important;
margin-bottom: 10px;
transition: color var(--plr-transition);
text-decoration: none !important;
}
.plr-contact-block a:hover,
.plr-page .plr-contact-block a:hover {
color: var(--plr-gold) !important;
text-decoration: none !important;
}
.plr-contact-block svg { color: var(--plr-gold); }
/* ============================================================
WHY ONLINE — REASONS GRID
============================================================ */
.plr-reasons-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 30px;
}
.plr-reason-card {
background: var(--plr-navy-mid);
border: 1px solid var(--plr-border);
border-radius: var(--plr-radius-sm);
padding: 22px 18px;
}
.plr-reason-icon {
width: 40px;
height: 40px;
border-radius: var(--plr-radius-sm);
background: rgba(201,168,76,0.10);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
.plr-reason-icon svg { color: var(--plr-gold); }
.plr-reason-title {
font-family: 'Playfair Display', serif;
font-size: 0.95rem;
font-weight: 600;
color: var(--plr-cream);
margin-bottom: 8px;
}
.plr-reason-text {
font-size: 0.83rem;
color: var(--plr-muted);
line-height: 1.65;
margin-bottom: 0;
}
/* ============================================================
TESTIMONIALS SECTION
Overrides the table-based Testimonial.ascx output
============================================================ */
.plr-testimonials-section {
background: var(--plr-navy-mid);
padding: 68px 24px;
}
.plr-testimonials-inner {
max-width: var(--plr-content-width);
margin: 0 auto;
}
.plr-testimonials-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 32px;
}
/* Override the rendered from Testimonial.ascx */
.plr-testimonials-grid table {
width: 100% !important;
border: none !important;
border-collapse: collapse;
background: var(--plr-navy);
border-radius: var(--plr-radius);
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.3);
position: relative;
}
/* Replace the purple header row with a gold-accent top bar */
.plr-testimonials-grid table tr:first-child th {
background: var(--plr-navy-light) !important;
border-bottom: 2px solid var(--plr-gold) !important;
padding: 14px 20px !important;
text-align: left !important;
}
.plr-testimonials-grid table tr:first-child th label,
.plr-testimonials-grid table tr:first-child th .lblHeader {
color: var(--plr-gold) !important;
font-family: 'Playfair Display', serif !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
}
/* Content cell */
.plr-testimonials-grid table td {
padding: 20px 22px 22px !important;
border: none !important;
background: var(--plr-navy) !important;
}
/* Google link row */
.plr-testimonials-grid table td p:first-child {
font-size: 0.78rem !important;
color: var(--plr-gold) !important;
font-weight: 600 !important;
margin-bottom: 10px !important;
text-align: left !important;
}
.plr-testimonials-grid table td p:first-child a {
color: var(--plr-gold) !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(201,168,76,0.35) !important;
}
/* Testimonial quote text (.Emphasis label) */
.plr-testimonials-grid table .CellText .Emphasis,
.plr-testimonials-grid table .CellText span {
font-style: italic !important;
font-size: 0.9rem !important;
color: rgba(232,228,220,0.88) !important;
line-height: 1.75 !important;
font-weight: normal !important;
}
/* Author name / city row */
.plr-testimonials-grid table .CellText:last-child {
font-size: 0.82rem !important;
font-weight: 600 !important;
color: var(--plr-gold) !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
padding-top: 12px !important;
border-top: 1px solid var(--plr-border) !important;
margin-top: 10px !important;
}
/* Star rating row injected by lblGoogleLink */
.plr-testimonials-grid table td p:first-child {
display: flex;
align-items: center;
gap: 4px;
}
/* ============================================================
TESTIMONIALV2.ASCX — DIV-BASED CARD STYLES
(used when TestimonialV2.ascx replaces Testimonial.ascx)
============================================================ */
.plr-testimonial-card {
background: var(--plr-navy);
border: 1px solid var(--plr-border);
border-radius: var(--plr-radius);
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.3);
display: flex;
flex-direction: column;
width: 100%;
}
.plr-testimonial-header {
background: var(--plr-navy-light);
border-bottom: 2px solid var(--plr-gold);
padding: 14px 20px;
font-family: 'Playfair Display', serif;
font-size: 0.88rem;
font-weight: 600;
color: var(--plr-gold);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.plr-testimonial-body {
padding: 20px 22px 22px;
flex: 1;
display: flex;
flex-direction: column;
}
.plr-testimonial-link {
font-size: 0.78rem;
color: var(--plr-gold);
font-weight: 600;
margin-bottom: 10px;
}
.plr-testimonial-link a {
color: var(--plr-gold) !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(201,168,76,0.35);
}
.plr-testimonial-quote {
font-style: italic;
font-size: 0.9rem;
color: rgba(232,228,220,0.88);
line-height: 1.75;
flex: 1;
margin-bottom: 14px;
}
.plr-testimonial-author {
font-size: 0.82rem;
font-weight: 600;
color: var(--plr-gold);
letter-spacing: 0.06em;
text-transform: uppercase;
padding-top: 12px;
border-top: 1px solid var(--plr-border);
margin-top: auto;
}
.plr-testimonial-sep {
color: var(--plr-muted);
font-weight: 300;
margin: 0 4px;
}
/* "Read all reviews" link */
.plr-reviews-link,
a.plr-reviews-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
font-weight: 600;
color: var(--plr-gold) !important;
letter-spacing: 0.06em;
text-transform: uppercase;
transition: gap var(--plr-transition);
text-decoration: none !important;
margin-top: 32px;
}
.plr-reviews-link:hover,
a.plr-reviews-link:hover {
gap: 10px;
text-decoration: none !important;
}
/* ============================================================
CTA BANNER
============================================================ */
.plr-cta-banner {
background: linear-gradient(135deg, var(--plr-navy-light) 0%, var(--plr-navy-mid) 100%);
border: 1px solid var(--plr-border);
border-radius: 16px;
padding: 52px 40px;
text-align: center;
margin: 0 0 68px;
}
.plr-cta-banner .plr-section-title { margin-bottom: 12px; }
.plr-cta-banner .plr-body-text {
max-width: 560px;
margin: 0 auto 30px;
}
/* ============================================================
OTHER CITIES (OtherCity.ascx override)
============================================================ */
.plr-cities-section {
background: var(--plr-navy-mid);
padding: 48px 24px;
}
.plr-cities-inner {
max-width: var(--plr-content-width);
margin: 0 auto;
}
/* Override the table rendered by OtherCity.ascx */
.plr-cities-section table {
width: 100% !important;
border: none !important;
border-collapse: collapse !important;
margin: 0 !important;
background: transparent !important;
}
.plr-cities-section table td {
border: none !important;
padding: 0 !important;
line-height: normal !important;
font-size: inherit !important;
background: transparent !important;
}
/* Hide the duplicate heading OtherCity.ascx injects */
.plr-cities-section table td h3 {
display: none !important;
}
/* Target the urlList span regardless of ASP.NET ID mangling.
OtherCity.ascx renders: */
.plr-cities-section table td span[id$="urlList"],
.plr-cities-section table td label {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
margin-top: 20px !important;
}
/* Style all anchor tags inside the cities section as pills */
.plr-cities-section a,
.plr-page .plr-cities-section a {
display: inline-block !important;
background: var(--plr-navy) !important;
border: 1px solid var(--plr-border) !important;
color: var(--plr-muted) !important;
font-size: 0.82rem !important;
padding: 7px 16px !important;
border-radius: 20px !important;
transition: border-color var(--plr-transition), color var(--plr-transition) !important;
text-decoration: none !important;
font-weight: normal !important;
line-height: 1.4 !important;
}
.plr-cities-section a:hover,
.plr-page .plr-cities-section a:hover {
border-color: var(--plr-gold) !important;
color: var(--plr-gold-light) !important;
text-decoration: none !important;
}
/* ============================================================
EMAIL LIST / LEAD MAGNET SECTION
Supports both inline form and FancyBox popup trigger
============================================================ */
.plr-email-section {
background: linear-gradient(135deg, var(--plr-navy-light) 0%, var(--plr-navy-mid) 100%);
border: 1px solid var(--plr-border);
border-radius: var(--plr-radius);
padding: 44px 40px;
text-align: center;
margin: 0 0 68px;
}
.plr-email-section .plr-section-title {
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
margin-bottom: 10px;
}
.plr-email-section .plr-body-text {
max-width: 520px;
margin: 0 auto 24px;
}
/* Inline form wrapper — drop Ontraport/GHL embed inside this */
.plr-email-form-wrap {
max-width: 360px;
margin: 0 auto 16px;
border: 1px solid var(--plr-border);
border-radius: var(--plr-radius);
padding: 28px 28px;
background: var(--plr-navy-mid);
box-shadow: 0 4px 24px rgba(0,0,0,0.25);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.plr-email-form-wrap iframe,
.plr-email-form-wrap form {
width: 100% !important;
border: none !important;
border-radius: var(--plr-radius-sm) !important;
overflow: hidden !important;
}
/* FancyBox trigger link */
.plr-fancybox-trigger,
a.plr-fancybox-trigger {
display: inline-block;
font-size: 0.8rem;
color: var(--plr-muted) !important;
border-bottom: 1px solid rgba(155,168,181,0.35);
transition: color var(--plr-transition);
cursor: pointer;
text-decoration: none !important;
}
.plr-fancybox-trigger:hover,
a.plr-fancybox-trigger:hover {
color: var(--plr-gold) !important;
text-decoration: none !important;
}
/* ============================================================
FOOTER — FooterR2.ascx
============================================================ */
.plr-footer {
background: var(--plr-navy) !important;
border-top: 1px solid var(--plr-border);
padding: 48px 24px 28px;
/* Defensive resets — prevent styles.css global rules bleeding in */
font-family: 'Inter', sans-serif !important;
color: var(--plr-muted) !important;
line-height: 1.6 !important;
}
.plr-footer-inner {
max-width: var(--plr-max-width);
margin: 0 auto;
}
.plr-footer-grid {
display: grid !important;
grid-template-columns: 1.5fr 1fr 1fr !important;
gap: 40px !important;
margin-bottom: 36px !important;
align-items: start !important;
}
.plr-footer-brand .plr-logo-name {
font-size: 1.2rem;
margin-bottom: 4px;
display: block;
}
.plr-footer-brand .plr-logo-title {
display: block;
margin-bottom: 12px;
}
.plr-footer-brand p {
font-size: 0.83rem;
color: var(--plr-muted);
line-height: 1.65;
margin-top: 0;
margin-bottom: 10px;
}
.plr-footer-brand .plr-footer-phone,
a.plr-footer-phone {
color: var(--plr-gold) !important;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none !important;
}
.plr-footer-col-title {
font-size: 0.72rem !important;
font-weight: 600 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--plr-gold) !important;
margin-bottom: 14px !important;
margin-top: 0 !important;
display: block !important;
line-height: 1.4 !important;
}
.plr-footer-links {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 9px !important;
}
.plr-footer-links li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
line-height: 1.4 !important;
}
.plr-footer-links a,
.plr-page .plr-footer-links a {
font-size: 0.85rem;
color: var(--plr-muted) !important;
transition: color var(--plr-transition);
text-decoration: none !important;
}
.plr-footer-links a:hover,
.plr-page .plr-footer-links a:hover {
color: var(--plr-cream) !important;
text-decoration: none !important;
}
.plr-footer-bottom {
border-top: 1px solid rgba(201,168,76,0.12);
padding-top: 18px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.plr-footer-bottom p {
font-size: 0.78rem;
color: var(--plr-muted);
margin: 0;
line-height: 1.5;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 768px) {
.plr-nav { display: none; }
.plr-hamburger { display: flex; }
/* Shrink header so it doesn't eat the top of the hero */
.plr-header { padding: 10px 0; }
.plr-header.plr-scrolled { padding: 8px 0; }
/* Tighten inner padding so logo + hamburger both fit on narrow screens */
.plr-header-inner { padding: 0 14px; gap: 12px; }
.plr-logo-name { font-size: 0.95rem; white-space: nowrap; }
.plr-logo-title { font-size: 0.56rem; letter-spacing: 0.07em; white-space: normal; }
/* Keep hamburger from being pushed off screen */
.plr-hamburger { flex-shrink: 0; margin-left: auto; }
.plr-steps-grid { grid-template-columns: 1fr; }
.plr-testimonials-grid { grid-template-columns: 1fr; }
.plr-about-grid { grid-template-columns: 1fr; }
.plr-credentials-card { position: static; }
.plr-reasons-grid { grid-template-columns: 1fr; }
.plr-footer-grid { grid-template-columns: 1fr; gap: 28px; }
.plr-footer-bottom { flex-direction: column; text-align: center; }
.plr-cta-banner { padding: 36px 24px; }
.plr-email-section { padding: 32px 20px; }
/* Reduce top padding on hero now that header is smaller */
.plr-hero-content { padding: 80px 20px 60px; }
}
@media (max-width: 480px) {
.plr-hero-ctas { flex-direction: column; align-items: center; }
.plr-btn-primary,
.plr-btn-outline {
width: 100%;
max-width: 320px;
text-align: center;
white-space: normal;
line-height: 1.35;
padding: 14px 24px;
}
.plr-trust-bar-inner { gap: 16px; }
}
/* ============================================================
STATS BAR
============================================================ */
.plr-stats-bar {
background: var(--plr-navy-mid);
border-top: 1px solid var(--plr-border);
border-bottom: 1px solid var(--plr-border);
padding: 30px 24px;
}
.plr-stats-inner {
max-width: var(--plr-content-width);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 48px;
text-align: center;
}
.plr-stat-item {
display: flex;
flex-direction: column;
align-items: center;
}
.plr-stat-value {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 700;
color: var(--plr-gold);
line-height: 1.5;
margin-bottom: 4px;
}
.plr-stat-label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--plr-muted);
}
/* ============================================================
ABOUT HERO VARIANT
============================================================ */
.plr-hero.plr-hero-short {
min-height: 60vh;
}
.plr-hero.plr-hero-short .plr-hero-content {
padding: 160px 24px 80px;
}
.plr-hero-image-wrap {
margin-top: 40px;
border-radius: var(--plr-radius);
overflow: hidden;
border: 1px solid var(--plr-border);
max-width: 200px;
margin-left: auto;
margin-right: auto;
box-shadow: var(--plr-shadow-gold);
}
.plr-hero-image-wrap img {
width: 100%;
height: auto;
display: block;
}
/* ============================================================
YOUTUBE EMBED WRAPPER
============================================================ */
.plr-video-wrap {
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
height: 0;
overflow: hidden;
border-radius: var(--plr-radius);
border: 1px solid var(--plr-border);
background: #000;
margin-bottom: 24px;
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.plr-video-wrap iframe,
.plr-video-wrap object,
.plr-video-wrap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* ============================================================
MODAL / SCHEDULING OVERLAY
============================================================ */
.plr-modal-backdrop {
position: fixed;
inset: 0;
background: rgba(13, 27, 42, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
transition: opacity var(--plr-transition);
}
.plr-modal-backdrop.plr-modal-open {
display: flex;
opacity: 1;
}
.plr-modal-container {
background: var(--plr-navy-mid);
border: 1px solid var(--plr-border);
border-radius: var(--plr-radius);
width: 100%;
max-width: 900px;
height: 90vh;
max-height: 800px;
position: relative;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
transform: translateY(20px);
transition: transform var(--plr-transition);
}
.plr-modal-backdrop.plr-modal-open .plr-modal-container {
transform: translateY(0);
}
.plr-modal-close {
position: absolute;
top: 16px;
right: 20px;
background: rgba(13, 27, 42, 0.8);
border: 1px solid var(--plr-border);
color: var(--plr-cream);
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
cursor: pointer;
z-index: 10;
transition: all var(--plr-transition);
}
.plr-modal-close:hover {
background: var(--plr-gold);
color: var(--plr-navy);
border-color: var(--plr-gold);
}
.plr-modal-iframe {
width: 100%;
height: 100%;
border: none;
border-radius: var(--plr-radius);
background: #fff; /* Acuity background is usually white */
}
/* ============================================================
ONTRAPORT / MOONRAY FORM OVERRIDES
Targets the JS-embedded form inside .plr-email-section
The submit button (input[type=image]) is hidden via CSS;
a styled replacement is injected by JS in testSpin2.aspx
============================================================ */
/* Outer form wrapper — remove Ontraport's own background/border.
Only target the top-level .moonray-form-p2c7214f19 wrapper, NOT
.moonray-form-clearfix (which wraps the fields and buttons inside). */
.plr-email-section .moonray-form-p2c7214f19,
.plr-email-form-wrap .moonray-form-p2c7214f19 {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 auto !important;
width: 100% !important;
max-width: 100% !important;
display: block !important;
float: none !important;
position: static !important;
}
/* The inner clearfix div — reset background/border only, leave display alone */
.plr-email-section .moonray-form-clearfix,
.plr-email-form-wrap .moonray-form-clearfix {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
text-align: left !important;
}
/* Each field row */
.plr-email-section .moonray-form-element-wrapper {
margin-bottom: 16px !important;
padding: 0 !important;
}
/* Labels */
.plr-email-section .moonray-form-label {
display: block !important;
font-family: 'Inter', Arial, sans-serif !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--plr-gold) !important;
margin-bottom: 6px !important;
}
/* Text inputs and selects */
.plr-email-section .moonray-form-input[type="text"],
.plr-email-section .moonray-form-input[type="email"],
.plr-email-section .moonray-form-input[type="tel"],
.plr-email-section select.moonray-form-input {
width: 100% !important;
background: var(--plr-navy) !important;
border: 1px solid var(--plr-border) !important;
border-radius: var(--plr-radius-sm) !important;
color: var(--plr-cream) !important;
font-family: 'Inter', Arial, sans-serif !important;
font-size: 0.92rem !important;
padding: 11px 14px !important;
outline: none !important;
transition: border-color var(--plr-transition) !important;
-webkit-appearance: none !important;
appearance: none !important;
box-shadow: none !important;
}
.plr-email-section .moonray-form-input[type="text"]:focus,
.plr-email-section .moonray-form-input[type="email"]:focus,
.plr-email-section .moonray-form-input[type="tel"]:focus,
.plr-email-section select.moonray-form-input:focus {
border-color: var(--plr-gold) !important;
background: var(--plr-navy-mid) !important;
}
/* Select arrow — custom gold chevron */
.plr-email-section .moonray-form-input-type-select {
position: relative !important;
}
.plr-email-section .moonray-form-input-type-select::after {
content: '▾' !important;
position: absolute !important;
right: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: var(--plr-gold) !important;
pointer-events: none !important;
font-size: 0.9rem !important;
margin-top: 12px !important; /* offset for label height */
}
/* Sub-text hints below selects */
.plr-email-section .moonray-form-element-sub-text {
font-size: 0.72rem !important;
color: var(--plr-muted) !important;
margin-top: 4px !important;
font-style: italic !important;
}
/* ── Submit button: pure-CSS approach (no JS needed) ──────────────────
The Ontraport image button is made transparent and stretched to fill
its wrapper. A gold pill is painted behind it via the wrapper's
::after pseudo-element. The invisible image button sits on top so
clicks still submit the form.
─────────────────────────────────────────────────────────────────── */
/* Make the wrapper a gold pill button shape */
.plr-email-section .moonray-form-input-type-image,
.plr-email-form-wrap .moonray-form-input-type-image {
position: relative !important;
display: block !important;
width: 100% !important;
margin-top: 8px !important;
background: var(--plr-gold) !important;
border-radius: var(--plr-radius-pill) !important;
border: none !important;
cursor: pointer !important;
transition: background var(--plr-transition) !important;
overflow: hidden !important;
min-height: 52px !important;
}
.plr-email-section .moonray-form-input-type-image:hover,
.plr-email-form-wrap .moonray-form-input-type-image:hover {
background: var(--plr-gold-light) !important;
}
/* Label text painted via ::after */
.plr-email-section .moonray-form-input-type-image::after,
.plr-email-form-wrap .moonray-form-input-type-image::after {
content: 'JOIN THE LIST' !important;
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-family: 'Inter', Arial, sans-serif !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
letter-spacing: 0.07em !important;
color: var(--plr-navy) !important;
pointer-events: none !important;
}
/* Make the actual image button transparent and fill the wrapper */
.plr-email-section .moonray-form-input-type-image input[type="image"],
.plr-email-section .moonray-form-input-type-image input[name="submit"],
.plr-email-form-wrap .moonray-form-input-type-image input[type="image"],
.plr-email-form-wrap .moonray-form-input-type-image input[name="submit"] {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
opacity: 0 !important;
cursor: pointer !important;
z-index: 1 !important;
}
/* JS-injected replacement button (kept for fallback) */
.plr-email-section .plr-form-submit-btn {
display: block !important;
width: 100% !important;
background: var(--plr-gold) !important;
color: var(--plr-navy) !important;
font-family: 'Inter', Arial, sans-serif !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
letter-spacing: 0.07em !important;
text-transform: uppercase !important;
padding: 15px 32px !important;
border-radius: var(--plr-radius-pill) !important;
border: none !important;
cursor: pointer !important;
margin-top: 8px !important;
transition: background var(--plr-transition), transform var(--plr-transition) !important;
}
.plr-email-section .plr-form-submit-btn:hover {
background: var(--plr-gold-light) !important;
transform: translateY(-1px) !important;
}
/* Error state */
.plr-email-section .moonray-form-state-error {
border-color: #e05c5c !important;
}
.plr-email-section .moonray-form-error-message {
font-size: 0.75rem !important;
color: #e05c5c !important;
margin-top: 4px !important;
}
/* ============================================================
ONTRAPORT POPUP MODAL — OntraportPopup.ascx
============================================================ */
/* Red attention trigger link */
a.plr-op-popup-trigger {
color: #e03030 !important;
font-weight: 700 !important;
font-family: 'Inter', Arial, sans-serif !important;
font-size: 0.95rem !important;
text-decoration: underline !important;
cursor: pointer !important;
transition: color var(--plr-transition) !important;
}
a.plr-op-popup-trigger:hover {
color: #ff5555 !important;
}
/* Override the base .plr-modal-container for the form popup —
narrower and auto-height instead of the full 90vh iframe size */
.plr-op-modal-inner {
max-width: 480px !important;
height: auto !important;
max-height: 90vh !important;
overflow-y: auto !important;
padding: 40px 36px 36px !important;
}
/* Modal header */
.plr-op-modal-header {
margin-bottom: 24px;
text-align: center;
}
.plr-op-modal-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.5rem;
font-weight: 700;
color: var(--plr-cream);
margin: 8px 0 12px;
line-height: 1.3;
}
.plr-op-modal-desc {
font-size: 0.85rem;
color: var(--plr-muted);
line-height: 1.6;
margin: 0;
}
/* Form wrapper inside the popup */
.plr-op-modal-form-wrap .moonray-form-p2c7214f19,
.plr-op-modal-form-wrap .moonray-form-clearfix {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 auto !important;
width: 100% !important;
max-width: 100% !important;
}
.plr-op-modal-form-wrap .moonray-form-element-wrapper {
margin-bottom: 14px !important;
padding: 0 !important;
}
.plr-op-modal-form-wrap .moonray-form-label {
display: block !important;
font-family: 'Inter', Arial, sans-serif !important;
font-size: 0.75rem !important;
font-weight: 500 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--plr-gold) !important;
margin-bottom: 5px !important;
}
.plr-op-modal-form-wrap .moonray-form-input[type="text"],
.plr-op-modal-form-wrap .moonray-form-input[type="email"],
.plr-op-modal-form-wrap .moonray-form-input[type="tel"],
.plr-op-modal-form-wrap select.moonray-form-input {
width: 100% !important;
background: var(--plr-navy) !important;
border: 1px solid var(--plr-border) !important;
border-radius: var(--plr-radius-sm) !important;
color: var(--plr-cream) !important;
font-family: 'Inter', Arial, sans-serif !important;
font-size: 0.9rem !important;
padding: 10px 13px !important;
outline: none !important;
transition: border-color var(--plr-transition) !important;
-webkit-appearance: none !important;
appearance: none !important;
box-shadow: none !important;
}
.plr-op-modal-form-wrap .moonray-form-input[type="text"]:focus,
.plr-op-modal-form-wrap .moonray-form-input[type="email"]:focus,
.plr-op-modal-form-wrap .moonray-form-input[type="tel"]:focus,
.plr-op-modal-form-wrap select.moonray-form-input:focus {
border-color: var(--plr-gold) !important;
}
.plr-op-modal-form-wrap .moonray-form-element-sub-text {
font-size: 0.7rem !important;
color: var(--plr-muted) !important;
margin-top: 3px !important;
font-style: italic !important;
}
/* Hide the purple PNG submit image inside the popup */
.plr-op-modal-form-wrap input[type="image"].moonray-form-input,
.plr-op-modal-form-wrap .moonray-form-input-type-image {
display: none !important;
}
/* Gold pill submit button injected by JS */
.plr-op-modal-form-wrap .plr-form-submit-btn {
display: block !important;
width: 100% !important;
background: var(--plr-gold) !important;
color: var(--plr-navy) !important;
font-family: 'Inter', Arial, sans-serif !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
letter-spacing: 0.07em !important;
text-transform: uppercase !important;
padding: 14px 32px !important;
border-radius: var(--plr-radius-pill) !important;
border: none !important;
cursor: pointer !important;
margin-top: 8px !important;
transition: background var(--plr-transition), transform var(--plr-transition) !important;
}
.plr-op-modal-form-wrap .plr-form-submit-btn:hover {
background: var(--plr-gold-light) !important;
transform: translateY(-1px) !important;
}
/* Privacy note below the form */
.plr-op-modal-privacy {
font-size: 0.72rem;
color: var(--plr-muted);
text-align: center;
margin-top: 14px;
line-height: 1.5;
}
/* ── OntraportPopup teaser block (benefit list + trigger link) ── */
.plr-op-teaser {
font-family: 'Inter', Arial, sans-serif;
color: var(--plr-cream);
line-height: 1.6;
}
.plr-op-teaser-headline {
font-size: 0.95rem;
font-weight: 700;
color: var(--plr-cream);
margin: 0 0 10px;
text-transform: none;
}
.plr-op-teaser-list {
list-style: none !important;
padding: 0 !important;
margin: 0 0 14px !important;
}
.plr-op-teaser-list li {
font-size: 0.83rem;
color: var(--plr-muted);
padding: 3px 0 3px 18px;
position: relative;
}
.plr-op-teaser-list li::before {
content: '•';
position: absolute;
left: 4px;
color: var(--plr-gold);
}
/* ============================================================
FAQ ACCORDION — FaqSection.ascx
============================================================ */
.plr-faq-section {
padding-top: 72px;
padding-bottom: 80px;
}
.plr-faq-list {
max-width: var(--plr-content-width);
margin: 40px auto 0;
display: flex;
flex-direction: column;
gap: 12px;
}
/* ── Individual item ── */
.plr-faq-item {
background: var(--plr-navy-mid);
border: 1px solid var(--plr-border);
border-radius: var(--plr-radius);
overflow: hidden;
transition: border-color var(--plr-transition);
}
.plr-faq-item:hover {
border-color: rgba(201, 168, 76, 0.55);
}
/* ── Question button ── */
.plr-faq-question {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 24px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
color: var(--plr-cream);
font-family: 'Inter', Verdana, Arial, sans-serif;
font-size: 1rem;
font-weight: 600;
line-height: 1.45;
transition: color var(--plr-transition);
}
.plr-faq-question:hover {
color: var(--plr-gold-light);
}
.plr-faq-question[aria-expanded="true"] {
color: var(--plr-gold);
border-bottom: 1px solid var(--plr-border);
}
.plr-faq-question-text {
flex: 1;
}
/* ── Plus / minus icon ── */
.plr-faq-icon {
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1.5px solid var(--plr-gold);
position: relative;
transition: transform var(--plr-transition), background var(--plr-transition);
}
.plr-faq-icon::before,
.plr-faq-icon::after {
content: '';
position: absolute;
background: var(--plr-gold);
border-radius: 2px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Horizontal bar */
.plr-faq-icon::before {
width: 10px;
height: 1.5px;
}
/* Vertical bar — hidden when open */
.plr-faq-icon::after {
width: 1.5px;
height: 10px;
transition: opacity var(--plr-transition), transform var(--plr-transition);
}
.plr-faq-question[aria-expanded="true"] .plr-faq-icon {
background: rgba(201, 168, 76, 0.15);
transform: rotate(0deg);
}
.plr-faq-question[aria-expanded="true"] .plr-faq-icon::after {
opacity: 0;
transform: translate(-50%, -50%) rotate(90deg);
}
/* ── Answer panel ── */
.plr-faq-answer {
padding: 0 24px;
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease, padding 0.25s ease;
}
.plr-faq-answer.is-open {
padding: 18px 24px 22px;
max-height: 600px;
}
.plr-faq-answer p {
margin: 0;
color: var(--plr-text);
font-size: 0.96rem;
line-height: 1.75;
}
/* ── Question open state via JS class ── */
.plr-faq-question.is-open {
color: var(--plr-gold);
border-bottom: 1px solid var(--plr-border);
}
.plr-faq-question.is-open .plr-faq-icon {
background: rgba(201, 168, 76, 0.15);
}
.plr-faq-question.is-open .plr-faq-icon::after {
opacity: 0;
}
/* ── CTA button ── */
.plr-faq-cta {
text-align: center;
margin-top: 40px;
}
.plr-faq-cta a {
display: inline-block;
padding: 14px 36px;
background: var(--plr-gold);
color: var(--plr-navy-deep) !important;
font-family: 'Inter', Verdana, Arial, sans-serif;
font-size: 0.95rem;
font-weight: 700;
border-radius: 32px;
text-decoration: none !important;
letter-spacing: 0.04em;
transition: background var(--plr-transition), transform 0.2s ease;
}
.plr-faq-cta a:hover {
background: var(--plr-gold-light);
transform: translateY(-2px);
}
/* ── Responsive ── */
@media (max-width: 600px) {
.plr-faq-question {
padding: 16px 18px;
font-size: 0.93rem;
}
.plr-faq-answer.is-open {
padding: 14px 18px 18px;
}
}