to invert its palette.
Primary red and accent yellow are preserved so callouts still pop. */
.light-mode {
background: #ffffff;
color: #0b0b0d;
}
.light-mode.light-mode-soft {
background: #f9f9fa;
}
.light-mode .eyebrow {
color: var(--primary);
}
.light-mode .section-title,
.light-mode h2,
.light-mode h3,
.light-mode h4 {
color: #0b0b0d;
}
.light-mode .section-title .italic {
color: var(--primary);
}
.light-mode .section-title .italic-lemon {
color: var(--accent-dark);
}
.light-mode .section-intro,
.light-mode p {
color: #4a4a52;
}
/* Check cards (Do I have a lemon?) in light mode */
.light-mode .check-card {
background: #f9f9fa;
border-color: #e5e5ea;
}
.light-mode .check-card:hover {
border-color: var(--primary);
box-shadow: 0 8px 24px rgba(11, 11, 13, 0.06);
}
.light-mode .check-card h3 {
color: #0b0b0d;
}
.light-mode .check-card p {
color: #4a4a52;
}
/* Icons keep their red — they already use var(--primary) and that's preserved */
/* How-it-works in light mode */
.light-mode .how-step h3 {
color: #0b0b0d;
}
.light-mode .how-step p {
color: #4a4a52;
}
/* Step numbers stay red via var(--primary) */
/* Testimonials in light mode */
.light-mode .testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 40px;
}
.light-mode .testimonial {
background: #ffffff;
border: 1px solid #e5e5ea;
padding: 36px 32px;
border-radius: 4px;
position: relative;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.light-mode.light-mode-soft .testimonial {
background: #ffffff;
}
.light-mode .testimonial:hover {
border-color: #d4d4da;
box-shadow: 0 6px 24px rgba(11, 11, 13, 0.05);
}
.light-mode .testimonial .quote-mark {
font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
font-style: italic;
font-size: 100px;
color: var(--primary);
line-height: 1;
opacity: 0.2;
position: absolute;
top: 20px; right: 30px;
}
.light-mode .testimonial .stars {
color: var(--accent-dark);
font-size: 18px;
margin-bottom: 16px;
letter-spacing: 2px;
}
.light-mode .testimonial p {
font-size: 16px;
line-height: 1.7;
color: #4a4a52;
margin-bottom: 24px;
font-style: italic;
}
.light-mode .testimonial .author {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-weight: 600;
letter-spacing: 0.5px;
color: #0b0b0d;
}
.light-mode .testimonial .author-sub {
font-size: 13px;
color: #7a7a82;
margin-top: 2px;
}
/* FAQ in light mode */
.light-mode .faq-item {
border-bottom: 1px solid #e5e5ea;
}
.light-mode .faq-item summary {
color: #0b0b0d;
}
.light-mode .faq-item summary:hover {
color: var(--primary);
}
.light-mode .faq-item p {
color: #4a4a52;
}
/* ================ FOOTER ================ */
footer {
background: #000;
padding: 70px 32px 30px;
border-top: 1px solid var(--border);
}
.footer-inner {
max-width: var(--max);
margin: 0 auto;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 48px;
border-bottom: 1px solid var(--border);
}
.footer-col h2 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 14px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--primary-accessible);
margin-bottom: 20px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
color: var(--text-muted);
font-size: 14.5px;
transition: color 0.2s;
display: inline-flex;
align-items: center;
min-height: 24px;
}
.footer-col a:hover { color: var(--primary); }
.footer-brand p {
color: var(--text-muted);
font-size: 14px;
line-height: 1.7;
margin: 16px 0;
}
.footer-phone {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 22px;
color: var(--primary-accessible);
font-weight: 700;
letter-spacing: 0.5px;
}
.footer-bottom {
padding-top: 28px;
display: flex;
justify-content: space-between;
font-size: 12.5px;
color: var(--text-dim);
flex-wrap: wrap;
gap: 16px;
}
.footer-bottom a {
color: var(--text-muted);
text-decoration: underline;
text-decoration-color: rgba(255,255,255,0.25);
text-underline-offset: 3px;
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 2px 0;
}
.footer-bottom a:hover, .footer-bottom a:focus-visible { color: var(--text); }
.disclaimer {
font-size: 12px;
color: var(--text-dim);
line-height: 1.6;
padding: 24px 0;
border-bottom: 1px solid var(--border);
margin-bottom: 28px;
}
/* ================ RESPONSIVE ================ */
@media (max-width: 1400px) {
nav.main-nav { gap: 22px; }
nav.main-nav a { font-size: 14px; }
}
@media (max-width: 1100px) {
nav.main-nav { gap: 18px; }
nav.main-nav a { font-size: 13px; }
}
@media (max-width: 960px) {
nav.main-nav { display: none; }
.hero-inner { grid-template-columns: 1fr; gap: 48px; }
.trust-bar-inner { grid-template-columns: repeat(2, 1fr); }
.trust-stat:nth-child(2) { border-right: none; }
.check-grid, .how-grid, .testimonials-grid, .footer-grid, .results-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.vehicle-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.why-inner { grid-template-columns: 1fr; gap: 40px; }
.cta-strip-inner { flex-direction: column; align-items: flex-start; }
.header-inner { flex-wrap: wrap; }
section.block { padding: 60px 24px; }
.hero { padding: 50px 24px 70px; }
.form-card { padding: 28px; }
/* Mobile: center the header CTA stack (availability, phone button, Se Habla) */
.header-cta {
align-items: center;
width: 100%;
}
.header-cta .phone { font-size: 22px; padding: 14px 28px; }
/* Mobile: tighten result cards so huge dollar amounts fit on one line */
.result-card { padding: 28px 22px 26px; }
.result-amount { font-size: 44px; }
.result-amount.result-text { font-size: 34px; }
.result-type { font-size: 16px; }
/* Mobile: make testimonial cards feel less cramped (they already stack at this breakpoint) */
.light-mode .testimonials-grid { grid-template-columns: 1fr; gap: 24px; }
.testimonial, .light-mode .testimonial { padding: 28px 24px; }
.testimonial .quote, .light-mode .testimonial .quote { font-size: 16px; line-height: 1.55; }
/* Mobile: keep "Top Rated on Google & Yelp" on one single line */
.hero-proof { gap: 10px; }
.proof-stars { font-size: 15px; letter-spacing: 1.5px; }
.proof-text { flex-wrap: nowrap; gap: 7px; font-size: 12.5px; letter-spacing: 0.3px; white-space: nowrap; }
.proof-lead { letter-spacing: 0.5px; }
.proof-platform { gap: 4px; letter-spacing: 0.3px; }
.proof-platform svg { width: 15px; height: 15px; }
.proof-amp { font-size: 15px; }
}
@media (max-width: 600px) {
.form-row { grid-template-columns: 1fr; }
.trust-bar-inner { grid-template-columns: 1fr; }
.vehicle-grid { grid-template-columns: 1fr; }
.problem-vehicles-intro { font-size: 11.5px; letter-spacing: 1.2px; }
.trust-stat { border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 20px; }
.trust-stat:last-child { border-bottom: none; }
.hero-ctas { flex-direction: column; align-items: stretch; }
.btn { justify-content: center; }
/* Keep "Stuck with a Lemon?" on one line on mobile — tighten font-size so it fits */
.hero-content h1 { font-size: 36px; letter-spacing: -0.8px; }
.hero-content h1 .line-1 { white-space: nowrap; }
/* Mobile: hide the hard-coded
after "Free Case Review • No Fees Unless We Win"
so it flows as one line, and shrink sub-copy slightly so "win." doesn't orphan */
.hero-sub { font-size: 16px; line-height: 1.55; }
.hero-sub strong { white-space: nowrap; }
.hero-sub strong + br { display: none; }
/* Mobile: stack the attorney spotlight vertically so the photo gets room
to breathe. Order: header (centered) → larger centered photo → full-width
bio quote below. Force title to one line. */
.attorney-spotlight {
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
}
.attorney-info { display: contents; }
.attorney-header {
order: 1;
text-align: center;
margin-bottom: 0;
width: 100%;
}
.attorney-photo {
order: 2;
width: 200px;
height: 280px;
border-radius: 5px;
}
.attorney-bio {
order: 3;
width: 100%;
}
.attorney-title { font-size: 10.5px; letter-spacing: 1px; white-space: nowrap; }
}
/* page-load animation */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-content > * { animation: fadeUp 0.8s ease both; }
.hero-content > *:nth-child(1) { animation-delay: 0.05s; }
.hero-content > *:nth-child(2) { animation-delay: 0.15s; }
.hero-content > *:nth-child(3) { animation-delay: 0.25s; }
.hero-content > *:nth-child(4) { animation-delay: 0.35s; }
.form-card { animation: fadeUp 0.9s 0.3s ease both; }
/* ============================================================
============== ABOUT US PAGE STYLES ========================
============================================================
Self-contained block of styles for the About Us page.
None of these class names collide with the homepage. */
/* ----- PAGE HEADER (mini hero used by About Us / inner pages) ----- */
.page-header {
position: relative;
padding: 70px 32px 60px;
overflow: hidden;
border-bottom: 1px solid var(--border);
}
.page-header::before {
content: ''; position: absolute;
top: -30%; right: -10%; width: 55%; height: 160%;
background: radial-gradient(ellipse at center, rgba(200, 16, 46, 0.10) 0%, transparent 60%);
pointer-events: none;
}
.page-header::after {
content: ''; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
background-size: 60px 60px; pointer-events: none;
mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
}
.page-header-inner {
max-width: var(--max); margin: 0 auto;
position: relative; z-index: 1;
}
.page-header-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 72px;
align-items: center;
}
.page-header-content { min-width: 0; }
.breadcrumbs {
font-size: 13px; color: var(--text-dim); letter-spacing: 0.4px;
margin-bottom: 18px;
}
.breadcrumbs a { color: var(--text-muted); transition: color 0.2s; }
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs .sep { margin: 0 8px; color: var(--text-dim); }
.breadcrumbs .current { color: var(--primary-accessible); }
.page-eyebrow {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 12px; color: var(--accent);
text-transform: uppercase; letter-spacing: 3.5px;
font-weight: 600; margin-bottom: 16px;
}
.page-title {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-weight: 700;
font-size: clamp(36px, 4vw, 54px);
line-height: 1.05; letter-spacing: -0.5px;
margin-bottom: 20px;
}
.page-title .italic {
font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
font-style: italic; font-weight: 800;
color: var(--primary); letter-spacing: -1px;
}
.page-title .italic-lemon {
font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
font-style: italic; font-weight: 800;
color: var(--accent); letter-spacing: -1px;
}
.page-sub {
font-size: 18px; color: var(--text-muted);
line-height: 1.65;
}
.page-sub strong { color: var(--text); font-weight: 600; }
/* ----- PAGE HEADER STAT STACK (right column) ----- */
.header-stats {
background: rgba(23, 23, 27, 0.55);
border: 1px solid var(--border);
border-radius: 4px;
padding: 8px 0;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
position: relative;
overflow: hidden;
}
.header-stats::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 3px;
background: var(--primary);
}
.header-stats .stat-row {
display: flex;
align-items: center;
gap: 20px;
padding: 22px 28px;
border-bottom: 1px solid var(--border);
}
.header-stats .stat-row:last-child { border-bottom: none; }
.header-stats .stat-num {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 42px;
font-weight: 700;
color: var(--primary);
line-height: 1;
letter-spacing: -0.5px;
min-width: 90px;
flex-shrink: 0;
}
.header-stats .stat-meta { min-width: 0; }
.header-stats .stat-label {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 15px;
font-weight: 600;
color: var(--text);
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 4px;
line-height: 1.15;
}
.header-stats .stat-desc {
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.45;
}
/* ----- STORY SECTION (2-column) ----- */
.story-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: start;
}
.story-copy p {
font-size: 16px; color: var(--text-muted);
line-height: 1.8; margin-bottom: 20px;
}
.story-copy p:last-child { margin-bottom: 0; }
.story-copy strong { color: var(--text); font-weight: 600; }
.story-callout {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--primary);
padding: 32px 32px 30px;
border-radius: 3px;
position: relative;
}
.story-callout .callout-label {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11px; color: var(--primary-accessible);
text-transform: uppercase; letter-spacing: 2.5px;
font-weight: 600; margin-bottom: 14px;
}
.story-callout h3 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 24px; font-weight: 600;
line-height: 1.25; letter-spacing: 0.2px;
margin-bottom: 16px;
}
.story-callout p {
font-size: 15px; color: var(--text-muted);
line-height: 1.7; margin-bottom: 14px;
}
.story-callout p:last-child { margin-bottom: 0; }
.story-callout .callout-points {
list-style: none;
margin-top: 24px;
padding-top: 22px;
border-top: 1px solid var(--border);
}
.story-callout .callout-points li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 9px 0;
font-size: 14.5px;
color: var(--text-muted);
line-height: 1.4;
}
.story-callout .callout-points .pt-icon {
color: var(--primary-accessible);
font-weight: 700;
font-size: 14px;
line-height: 1.4;
flex-shrink: 0;
}
/* ----- ATTORNEY SPOTLIGHT (large block on About Us) ----- */
.attorney-block {
display: grid;
grid-template-columns: 420px 1fr;
gap: 56px;
align-items: start;
}
.attorney-photo-lg {
width: 420px;
height: 560px;
border-radius: 4px;
overflow: hidden;
background: var(--surface);
border: 2px solid var(--border);
box-shadow: 0 20px 50px rgba(0,0,0,0.4);
position: relative;
transition: border-color 0.3s ease;
}
.attorney-photo-lg::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(200, 16, 46, 0.18) 0%, transparent 45%);
pointer-events: none;
z-index: 1;
}
.attorney-photo-lg:hover { border-color: var(--primary); }
.attorney-photo-lg img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center top;
display: block;
filter: grayscale(60%);
transition: filter 0.35s ease;
}
.attorney-photo-lg:hover img { filter: grayscale(0%); }
.attorney-details .a-eyebrow {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 12px; color: var(--primary-accessible);
text-transform: uppercase; letter-spacing: 3.5px;
font-weight: 600; margin-bottom: 12px;
}
.attorney-details .a-name {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 40px; font-weight: 700;
line-height: 1.05; letter-spacing: 0.2px;
margin-bottom: 10px;
}
.attorney-details .a-role {
font-size: 13px; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 1.8px;
font-weight: 500; margin-bottom: 24px;
}
.attorney-details .a-bio p {
font-size: 16px; color: var(--text-muted);
line-height: 1.8; margin-bottom: 18px;
}
.attorney-details .a-bio p:last-child { margin-bottom: 0; }
.attorney-creds {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 26px;
}
.cred-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 999px;
font-size: 12.5px;
color: var(--text-muted);
letter-spacing: 0.3px;
}
.cred-chip svg { color: var(--primary); flex-shrink: 0; }
/* ----- VALUES / WHAT SETS US APART ----- */
.values-block { background: var(--bg-2); }
.values-inner {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: start;
}
.values-intro h2 { margin-bottom: 20px; }
.values-intro p {
color: var(--text-muted);
font-size: 16px; line-height: 1.75;
margin-bottom: 18px;
}
.values-intro p:last-child { margin-bottom: 0; }
.values-list {
list-style: none;
margin: 0;
}
.values-list li {
padding: 24px 0;
border-bottom: 1px solid var(--border);
display: flex;
align-items: flex-start;
gap: 22px;
}
.values-list li:first-child { padding-top: 0; }
.values-list li:last-child { border-bottom: none; padding-bottom: 0; }
.values-list .num {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 14px; font-weight: 600;
color: var(--primary-accessible); letter-spacing: 2px;
min-width: 30px; padding-top: 4px;
}
.values-list .v-content h3 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 19px; font-weight: 600;
margin-bottom: 8px; letter-spacing: 0.3px;
}
.values-list .v-content p {
font-size: 15px; color: var(--text-muted);
line-height: 1.65;
}
/* ----- RESOURCES / COMMITMENT (light mode) ----- */
.resources-block.light-mode {
background: #ffffff;
color: #0b0b0d;
}
.resources-block.light-mode .eyebrow { color: var(--primary); }
.resources-block.light-mode h2.section-title { color: #0b0b0d; }
.resources-block.light-mode h2.section-title .italic { color: var(--primary); }
.resources-block.light-mode .section-intro { color: #4a4a52; }
.resources-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 40px;
}
.resource-card {
background: #f9f9fa;
border: 1px solid #e5e5ea;
border-radius: 4px;
padding: 36px 32px 32px;
transition: all 0.25s ease;
position: relative;
}
.resource-card:hover {
border-color: var(--primary);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(11, 11, 13, 0.07);
}
.resource-card .icon {
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
background: rgba(200, 16, 46, 0.10);
border-radius: 4px;
margin-bottom: 20px;
color: var(--primary);
}
.resource-card h3 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 20px; font-weight: 600;
margin-bottom: 10px; letter-spacing: 0.3px;
color: #0b0b0d;
}
.resource-card p {
font-size: 14.5px; color: #4a4a52;
line-height: 1.65;
}
/* ----- ABOUT US: page-header + stats fadeUp on first load ----- */
.page-header-content > * { animation: fadeUp 0.7s ease both; }
.page-header-content > *:nth-child(1) { animation-delay: 0.04s; }
.page-header-content > *:nth-child(2) { animation-delay: 0.12s; }
.page-header-content > *:nth-child(3) { animation-delay: 0.20s; }
.page-header-content > *:nth-child(4) { animation-delay: 0.28s; }
.header-stats { animation: fadeUp 0.8s 0.32s ease both; }
/* ----- ABOUT US RESPONSIVE OVERRIDES ----- */
@media (max-width: 960px) {
.page-header { padding: 48px 24px 40px; }
.page-header-grid { grid-template-columns: 1fr; gap: 36px; }
.header-stats .stat-row { padding: 18px 22px; gap: 16px; }
.header-stats .stat-num { font-size: 36px; min-width: 72px; }
.header-stats .stat-label { font-size: 14px; }
.story-grid { grid-template-columns: 1fr; gap: 40px; }
.attorney-block { grid-template-columns: 1fr; gap: 32px; }
.attorney-photo-lg { width: 100%; max-width: 320px; height: 360px; margin: 0 auto; }
.values-inner { grid-template-columns: 1fr; gap: 40px; }
.resources-grid { grid-template-columns: 1fr; gap: 20px; }
}
/* ============================================================
============== ATTORNEYS PAGE STYLES =======================
============================================================ */
/* ----- MEET CARD (page-header right column, small attorney card) ----- */
.meet-card {
background: rgba(23, 23, 27, 0.55);
border: 1px solid var(--border);
border-radius: 4px;
padding: 28px 28px 26px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
position: relative;
overflow: hidden;
}
.meet-card::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 3px;
background: var(--primary);
}
.meet-card .meet-label {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11px;
color: var(--primary);
letter-spacing: 3px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 20px;
}
.meet-card-inner {
display: grid;
grid-template-columns: 100px 1fr;
gap: 20px;
align-items: center;
}
.meet-photo {
width: 100px; height: 100px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--border);
background: var(--surface);
}
.meet-photo img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center top;
filter: grayscale(55%);
transition: filter 0.3s ease;
}
.meet-card:hover .meet-photo img { filter: grayscale(0%); }
.meet-photo:hover { border-color: var(--primary); }
.meet-info .m-name {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 22px; font-weight: 700;
letter-spacing: 0.3px;
line-height: 1.1;
margin-bottom: 6px;
}
.meet-info .m-role {
font-size: 11.5px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1.6px;
font-weight: 500;
margin-bottom: 10px;
}
.meet-info .m-tag {
font-size: 13px;
color: var(--text-muted);
line-height: 1.5;
}
.meet-card .m-footer {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.meet-card .m-footer a {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 13px;
letter-spacing: 1.2px;
color: var(--primary);
font-weight: 600;
text-transform: uppercase;
transition: color 0.2s;
}
.meet-card .m-footer a:hover { color: var(--accent); }
.meet-card .m-footer .arrow { display: inline-block; transition: transform 0.2s; }
.meet-card .m-footer a:hover .arrow { transform: translateX(4px); }
.meet-card .m-years {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 12px;
color: var(--text-dim);
letter-spacing: 1.3px;
text-transform: uppercase;
}
.meet-card .m-years strong { color: var(--accent); font-weight: 700; font-size: 14px; }
/* ----- LEAD ATTORNEY PROFILE ----- */
.lead-attorney {
background: var(--bg-2);
padding-top: 96px;
padding-bottom: 96px;
}
.lead-attorney-grid {
display: grid;
grid-template-columns: 380px 1fr;
gap: 72px;
align-items: start;
}
/* Photo + quick facts column */
.lead-attorney-media .photo-frame {
width: 100%;
aspect-ratio: 4 / 5;
border-radius: 4px;
overflow: hidden;
background: var(--surface);
border: 2px solid var(--border);
box-shadow: 0 22px 60px rgba(0,0,0,0.5);
position: relative;
transition: border-color 0.3s ease;
}
.lead-attorney-media .photo-frame::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(200, 16, 46, 0.22) 0%, transparent 40%);
pointer-events: none;
z-index: 1;
}
.lead-attorney-media .photo-frame:hover { border-color: var(--primary); }
.lead-attorney-media .photo-frame img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center top;
display: block;
filter: grayscale(50%);
transition: filter 0.35s ease;
}
.lead-attorney-media .photo-frame:hover img { filter: grayscale(0%); }
.quick-facts {
margin-top: 28px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
}
.quick-facts .qf-head {
background: rgba(200, 16, 46, 0.06);
border-bottom: 1px solid var(--border);
padding: 14px 20px;
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 12px;
color: var(--primary);
letter-spacing: 2.5px;
font-weight: 600;
text-transform: uppercase;
}
.quick-facts ul { list-style: none; }
.quick-facts li {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 13px 20px;
border-bottom: 1px solid var(--border);
gap: 14px;
}
.quick-facts li:last-child { border-bottom: none; }
.quick-facts li .lbl {
font-size: 12px;
color: var(--text-dim);
letter-spacing: 1.3px;
text-transform: uppercase;
font-weight: 500;
flex-shrink: 0;
}
.quick-facts li .val {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 14.5px;
color: var(--text);
font-weight: 600;
letter-spacing: 0.4px;
text-align: right;
}
/* Details column */
.lead-details .a-eyebrow {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 12px; color: var(--primary);
text-transform: uppercase; letter-spacing: 3.5px;
font-weight: 600; margin-bottom: 14px;
}
.lead-details .a-name {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: clamp(36px, 3.8vw, 52px);
font-weight: 700;
line-height: 1.04;
letter-spacing: 0.2px;
margin-bottom: 10px;
}
.lead-details .a-role {
font-size: 13px; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 1.8px;
font-weight: 500; margin-bottom: 28px;
}
/* Sub-sections inside lead details */
.lead-section { margin-bottom: 30px; }
.lead-section:last-of-type { margin-bottom: 0; }
.lead-section h3 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--primary);
letter-spacing: 2.5px;
text-transform: uppercase;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 12px;
}
.lead-section h3::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
.lead-section p {
font-size: 16px;
color: var(--text-muted);
line-height: 1.78;
margin-bottom: 14px;
}
.lead-section p:last-child { margin-bottom: 0; }
.lead-section p strong { color: var(--text); font-weight: 600; }
.lead-ctas {
margin-top: 32px;
display: flex;
gap: 14px;
flex-wrap: wrap;
}
/* ----- HOW WE WORK (light) ----- */
.how-block.light-mode {
background: #ffffff;
color: #0b0b0d;
}
.how-block.light-mode .eyebrow { color: var(--primary); }
.how-block.light-mode h2.section-title { color: #0b0b0d; }
.how-block.light-mode h2.section-title .italic { color: var(--primary); }
.how-block.light-mode .section-intro { color: #4a4a52; }
.how-inner {
display: grid;
grid-template-columns: 1fr 1.25fr;
gap: 72px;
align-items: start;
}
.how-intro h2 { margin-bottom: 18px; }
.how-intro p {
color: #4a4a52;
font-size: 16px;
line-height: 1.75;
margin-bottom: 18px;
}
.how-intro p:last-child { margin-bottom: 0; }
.how-intro p strong { color: #0b0b0d; }
.how-list {
list-style: none;
}
.how-list li {
display: grid;
grid-template-columns: 64px 1fr;
gap: 22px;
padding: 26px 0;
border-bottom: 1px solid #e5e5ea;
align-items: flex-start;
}
.how-list li:first-child { padding-top: 0; }
.how-list li:last-child { border-bottom: none; padding-bottom: 0; }
.how-list .step-num {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 48px;
font-weight: 700;
color: var(--primary);
line-height: 1;
letter-spacing: -1px;
}
.how-list .step-content h3 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 20px;
font-weight: 600;
color: #0b0b0d;
letter-spacing: 0.3px;
margin-bottom: 8px;
}
.how-list .step-content p {
font-size: 15px;
color: #4a4a52;
line-height: 1.7;
}
.promise-callout {
margin-top: 48px;
background: #faf9f6;
border: 1px solid #e5e5ea;
border-left: 4px solid var(--primary);
padding: 32px 32px 28px;
position: relative;
}
.promise-callout::before {
content: '';
position: absolute;
top: -1px;
right: -1px;
width: 80px;
height: 4px;
background: var(--accent);
}
.promise-callout .callout-eyebrow {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 12px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--primary);
margin-bottom: 14px;
font-weight: 700;
}
.promise-callout h4 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 22px;
font-weight: 600;
color: #0b0b0d;
line-height: 1.2;
margin-bottom: 18px;
letter-spacing: 0.2px;
}
.promise-callout ul {
list-style: none;
}
.promise-callout li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
font-size: 14px;
color: #2a2a30;
line-height: 1.55;
border-bottom: 1px dashed #e5e5ea;
}
.promise-callout li:last-child { border-bottom: none; padding-bottom: 0; }
.promise-callout li svg {
flex-shrink: 0;
margin-top: 2px;
color: var(--primary);
}
.promise-callout li strong {
color: #0b0b0d;
font-weight: 600;
}
/* ----- Attorneys page-header fade-in (uses .meet-card slot) ----- */
.meet-card { animation: fadeUp 0.8s 0.32s ease both; }
/* ----- ATTORNEYS RESPONSIVE OVERRIDES ----- */
@media (max-width: 1100px) {
.lead-attorney-grid { grid-template-columns: 320px 1fr; gap: 48px; }
}
@media (max-width: 960px) {
.meet-card-inner { grid-template-columns: 80px 1fr; gap: 16px; }
.meet-photo { width: 80px; height: 80px; }
.lead-attorney { padding-top: 60px; padding-bottom: 60px; }
.lead-attorney-grid { grid-template-columns: 1fr; gap: 40px; }
.lead-attorney-media { max-width: 380px; margin: 0 auto; }
.how-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
.lead-details .a-name { font-size: 34px; }
.how-list li { grid-template-columns: 48px 1fr; gap: 16px; }
.how-list .step-num { font-size: 38px; }
}
/* ============================================================
============== LEMON LAW PAGE STYLES =======================
============================================================ */
/* ----- Narrow section variant (used for long-form content) ----- */
.section-inner.narrow { max-width: 960px; }
/* ----- Page header CTA button group ----- */
.page-header-ctas {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 28px;
}
/* Compact header-stats variant (smaller numbers + tighter rows)
scoped to the lemon law body class so About Us keeps its larger style. */
body.page-lemon-law .header-stats .stat-num {
font-size: 34px;
width: 56px;
min-width: 0;
text-align: left;
font-variant-numeric: tabular-nums;
}
body.page-lemon-law .header-stats .stat-num--single { padding-left: 10px; }
body.page-lemon-law .header-stats .stat-row { gap: 18px; padding: 22px 28px; }
body.page-lemon-law .header-stats .stat-label {
font-size: 13px; letter-spacing: 2px; margin-bottom: 3px;
}
/* ----- TOC STRIP (sticky on-page navigation) ----- */
.toc-strip {
background: var(--bg-2);
border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 10;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.toc-strip-inner {
max-width: var(--max); margin: 0 auto;
padding: 14px 32px;
display: flex; align-items: center; gap: 24px;
overflow-x: auto;
scrollbar-width: none;
}
.toc-strip-inner::-webkit-scrollbar { display: none; }
.toc-label {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 2px;
color: var(--primary-accessible); flex-shrink: 0;
}
.toc-links {
display: flex; gap: 22px; flex: 1;
}
.toc-links a {
font-size: 13px; color: var(--text-muted);
font-weight: 500; white-space: nowrap;
letter-spacing: 0.3px; transition: color 0.2s;
}
.toc-links a:hover { color: var(--primary-accessible); }
/* ----- Long-form prose styling ----- */
.prose h3 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 26px; font-weight: 600;
line-height: 1.2; letter-spacing: 0.2px;
margin: 44px 0 16px;
color: var(--text);
}
.prose h3:first-child { margin-top: 0; }
.prose h4 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 19px; font-weight: 600;
letter-spacing: 0.3px;
margin: 28px 0 10px;
color: var(--text);
}
.prose p {
font-size: 16px; line-height: 1.75;
color: var(--text-muted);
margin-bottom: 18px;
}
.prose p strong { color: var(--text); font-weight: 600; }
.prose a {
color: var(--primary-accessible);
border-bottom: 1px solid rgba(232, 64, 87, 0.45);
transition: border-color 0.2s;
}
.prose a:hover { border-bottom-color: var(--primary-accessible); }
.prose ul, .prose ol {
margin: 0 0 20px 22px;
color: var(--text-muted);
}
.prose li {
font-size: 16px; line-height: 1.7;
margin-bottom: 8px;
}
.prose li strong { color: var(--text); font-weight: 600; }
/* Light mode prose overrides */
.light-mode .prose h3,
.light-mode .prose h4 { color: #0b0b0d; }
.light-mode .prose p,
.light-mode .prose li { color: #4a4a52; }
.light-mode .prose p strong,
.light-mode .prose li strong { color: #0b0b0d; }
.light-mode .prose a { color: var(--primary); }
/* ----- Callout / highlight box ----- */
.prose .callout {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--primary);
padding: 24px 28px;
border-radius: 3px;
margin: 28px 0;
}
.prose .callout .callout-label {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11px; color: var(--primary-accessible);
text-transform: uppercase; letter-spacing: 2.5px;
font-weight: 700; margin-bottom: 10px;
}
.prose .callout p { margin-bottom: 0; font-size: 15.5px; color: var(--text-muted); line-height: 1.7; }
.prose .callout p + p { margin-top: 14px; }
.light-mode .prose .callout {
background: #ffffff;
border-color: #e5e5ea;
border-left-color: var(--primary);
box-shadow: 0 2px 8px rgba(11, 11, 13, 0.04);
}
.light-mode .prose .callout p { color: #4a4a52; }
/* Warning callout — accent yellow bar */
.prose .callout.warning { border-left-color: var(--accent); }
.prose .callout.warning .callout-label { color: var(--accent-dark); }
/* ----- PRESUMPTION PATHS (3-up grid) ----- */
.path-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 36px 0 12px;
}
.path-card {
background: var(--surface);
border: 1px solid var(--border);
padding: 30px 26px;
border-radius: 4px;
position: relative;
transition: all 0.25s ease;
}
.path-card:hover {
border-color: var(--primary);
transform: translateY(-3px);
}
.path-card .path-num {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 12px;
color: var(--primary-accessible);
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 700;
margin-bottom: 14px;
}
.path-card h3 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 22px; font-weight: 600;
letter-spacing: 0.3px;
margin-bottom: 14px;
line-height: 1.2;
color: var(--text);
}
.path-card p {
font-size: 14.5px;
color: var(--text-muted);
line-height: 1.65;
}
.path-card .big-num {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 48px;
font-weight: 700;
color: var(--accent);
line-height: 1;
letter-spacing: -1px;
margin-bottom: 10px;
}
.light-mode .path-card {
background: #f9f9fa;
border-color: #e5e5ea;
}
.light-mode .path-card h3 { color: #0b0b0d; }
.light-mode .path-card p { color: #4a4a52; }
.light-mode .path-card .big-num { color: var(--accent-dark); }
/* ----- REMEDY CARDS (3-up) ----- */
.remedy-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin: 36px 0;
}
.remedy-card {
background: var(--surface);
border: 1px solid var(--border);
padding: 34px 30px;
border-radius: 4px;
position: relative;
overflow: hidden;
transition: all 0.25s ease;
}
.remedy-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--primary);
transform: scaleX(0.25);
transform-origin: left;
transition: transform 0.3s ease;
}
.remedy-card:hover {
border-color: var(--primary);
transform: translateY(-3px);
}
.remedy-card:hover::before { transform: scaleX(1); }
.remedy-card .remedy-icon {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: rgba(200, 16, 46, 0.12);
border-radius: 4px;
margin-bottom: 18px;
color: var(--primary);
}
.remedy-card h3 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 22px; font-weight: 600;
letter-spacing: 0.3px;
margin-bottom: 10px;
color: var(--text);
}
.remedy-card p {
font-size: 14.5px;
color: var(--text-muted);
line-height: 1.65;
}
.light-mode .remedy-card {
background: #ffffff;
border-color: #e5e5ea;
}
.light-mode .remedy-card h3 { color: #0b0b0d; }
.light-mode .remedy-card p { color: #4a4a52; }
/* ----- 2025 CHANGES TIMELINE ----- */
.timeline {
margin: 36px 0;
position: relative;
}
.timeline::before {
content: '';
position: absolute;
top: 8px; bottom: 8px; left: 13px;
width: 2px;
background: var(--border);
}
.timeline-item {
position: relative;
padding: 0 0 32px 48px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
position: absolute;
left: 6px; top: 4px;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--primary);
border: 3px solid var(--bg);
box-shadow: 0 0 0 2px var(--primary);
}
.timeline-date {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 13px;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 700;
margin-bottom: 8px;
}
.timeline-title {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 20px;
font-weight: 600;
letter-spacing: 0.3px;
margin-bottom: 8px;
color: var(--text);
}
.timeline-desc {
font-size: 15px;
color: var(--text-muted);
line-height: 1.7;
}
.light-mode .timeline::before { background: #e5e5ea; }
.light-mode .timeline-dot { border-color: #ffffff; }
.light-mode.light-mode-soft .timeline-dot { border-color: #f9f9fa; }
.light-mode .timeline-title { color: #0b0b0d; }
.light-mode .timeline-desc { color: #4a4a52; }
.light-mode .timeline-date { color: var(--accent-dark); }
/* ----- CALCULATION BOX (mileage offset formula) ----- */
.calc-box {
background: var(--surface);
border: 1px solid var(--border);
padding: 32px;
border-radius: 4px;
margin: 32px 0;
position: relative;
}
.calc-box::before {
content: '';
position: absolute;
top: -1px; left: -1px; right: -1px;
height: 3px;
background: var(--accent);
border-radius: 4px 4px 0 0;
}
.calc-box .calc-eyebrow {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11px;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 700;
margin-bottom: 10px;
}
.calc-formula {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 20px;
color: var(--text);
font-weight: 500;
letter-spacing: 0.3px;
margin: 16px 0 6px;
line-height: 1.4;
}
.calc-formula .frac {
display: inline-block;
vertical-align: middle;
text-align: center;
margin: 0 4px;
}
.calc-formula .frac .num {
display: block;
border-bottom: 2px solid var(--primary);
padding: 0 8px 2px;
}
.calc-formula .frac .den {
display: block;
padding: 2px 8px 0;
}
.calc-formula .op {
color: var(--primary);
margin: 0 10px;
font-weight: 700;
}
.calc-example {
margin-top: 22px;
padding-top: 22px;
border-top: 1px solid var(--border);
font-size: 15px;
color: var(--text-muted);
line-height: 1.7;
}
.calc-example p { margin-bottom: 12px; }
.calc-example p:last-child { margin-bottom: 0; }
.calc-example strong { color: var(--text); font-weight: 600; }
/* ----- STATS BAR (between sections) ----- */
.stats-bar {
background: var(--bg-2);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 36px 32px;
}
.stats-bar-inner {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
text-align: center;
}
.stats-bar .stat-item {
border-right: 1px solid var(--border);
padding: 6px 12px;
}
.stats-bar .stat-item:last-child { border-right: none; }
.stats-bar .stat-item .s-num {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 34px;
font-weight: 700;
color: var(--primary);
line-height: 1;
margin-bottom: 8px;
}
.stats-bar .stat-item .s-label {
font-size: 11.5px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 500;
line-height: 1.4;
}
/* ----- USED CAR COVERAGE TABLE ----- */
.coverage-table {
margin: 32px 0;
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
}
.coverage-row {
display: grid;
grid-template-columns: 1.4fr 0.6fr 2fr;
gap: 20px;
padding: 20px 24px;
border-bottom: 1px solid var(--border);
align-items: center;
}
.coverage-row:last-child { border-bottom: none; }
.coverage-row.header-row {
background: var(--bg-2);
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.8px;
color: var(--text-muted);
font-weight: 600;
padding: 16px 24px;
}
.coverage-type {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-weight: 600;
font-size: 16px;
letter-spacing: 0.3px;
color: var(--text);
}
.coverage-status {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 700;
padding: 6px 10px;
border-radius: 2px;
text-align: center;
display: inline-block;
white-space: nowrap;
}
.coverage-status.yes {
background: rgba(46, 204, 113, 0.15);
color: #2ecc71;
border: 1px solid rgba(46, 204, 113, 0.3);
}
.coverage-status.no {
background: rgba(200, 16, 46, 0.12);
color: var(--primary-accessible);
border: 1px solid rgba(200, 16, 46, 0.3);
}
.coverage-status.maybe {
background: rgba(245, 197, 24, 0.12);
color: var(--accent-dark);
border: 1px solid rgba(245, 197, 24, 0.3);
}
.coverage-note {
font-size: 14px;
color: var(--text-muted);
line-height: 1.55;
}
.light-mode .coverage-table { border-color: #e5e5ea; }
.light-mode .coverage-row { border-bottom-color: #e5e5ea; }
.light-mode .coverage-row.header-row { background: #f5f5f7; color: #6a6a72; }
.light-mode .coverage-type { color: #0b0b0d; }
.light-mode .coverage-note { color: #4a4a52; }
/* ----- DEFENSES LIST ----- */
.defense-list {
list-style: none;
margin: 32px 0 0;
}
.defense-item {
padding: 24px 0;
border-bottom: 1px solid var(--border);
display: grid;
grid-template-columns: 56px 1fr;
gap: 20px;
align-items: start;
}
.defense-item:last-child { border-bottom: none; }
.defense-num {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 14px;
color: var(--primary-accessible);
font-weight: 700;
letter-spacing: 2px;
padding-top: 4px;
}
.defense-content h3 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 19px; font-weight: 600;
letter-spacing: 0.3px; margin-bottom: 8px;
color: var(--text);
}
.defense-content p {
font-size: 15px;
color: var(--text-muted);
line-height: 1.7;
}
.defense-content p + p { margin-top: 10px; }
.defense-content strong { color: var(--text); font-weight: 600; }
.light-mode .defense-item { border-bottom-color: #e5e5ea; }
.light-mode .defense-content h3 { color: #0b0b0d; }
.light-mode .defense-content p { color: #4a4a52; }
.light-mode .defense-content strong { color: #0b0b0d; }
/* ----- 4-column override for the lemon-law process section
(homepage's .how-grid is 3-col; this lets us share the .how-step
visuals but with 4 cards) ----- */
#process .how-grid {
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
#process .how-step .step-num { font-size: 68px; }
/* ----- FAQ body wrapper (lemon-law variant has ) ----- */
.faq-item .faq-body {
padding: 0 0 24px;
}
.faq-item .faq-body p {
color: var(--text-muted);
font-size: 15.5px; line-height: 1.7;
margin-bottom: 12px;
padding: 0;
}
.faq-item .faq-body p:last-child { margin-bottom: 0; }
.light-mode .faq-item .faq-body p { color: #4a4a52; }
/* ----- LEMON LAW RESPONSIVE OVERRIDES ----- */
@media (max-width: 960px) {
.path-grid, .remedy-grid { grid-template-columns: 1fr; gap: 16px; }
.stats-bar-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.stats-bar .stat-item:nth-child(2) { border-right: none; }
.coverage-row { grid-template-columns: 1fr; gap: 10px; padding: 16px 18px; }
.coverage-row.header-row { display: none; }
.coverage-status { justify-self: start; }
#process .how-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.stats-bar-inner { grid-template-columns: 1fr; }
.stats-bar .stat-item { border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 20px; }
.stats-bar .stat-item:last-child { border-bottom: none; }
#process .how-grid { grid-template-columns: 1fr; }
}
/* ============================================================
============== RESULTS PAGE STYLES =========================
============================================================ */
/* ----- Header-stats modifier classes used on the Results page.
Base .header-stats rules already live in site.css (added when we
built About Us). The results layout centers the stat-num and
uses fixed-width buckets so $0 / 24hr / 3 line up vertically.
We scope these tweaks under body.page-results so other pages stay
untouched. ----- */
body.page-results .header-stats .stat-row {
align-items: stretch;
}
body.page-results .header-stats .stat-num {
width: 100px;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
}
body.page-results .header-stats .stat-num-sm {
font-size: 24px;
letter-spacing: -0.3px;
}
body.page-results .header-stats .stat-num-currency { transform: translateX(-4px); }
body.page-results .header-stats .stat-num-digit { transform: translateX(-2px); }
body.page-results .header-stats .stat-num-suffix { transform: translateX(3px); }
.header-stats .stat-num-unit {
font-size: 0.45em;
color: var(--accent);
margin-left: 4px;
font-weight: 600;
letter-spacing: 0;
}
body.page-results .header-stats .stat-meta {
display: flex;
flex-direction: column;
justify-content: center;
}
/* ----- Vehicle-forward result cards (Results page variant)
`.result-card` + `.vehicle-card` combo selects only the large outcome
cards on this page — NOT the small problem-vehicle anchors on the
homepage (those are `.vehicle-card` alone, no `.result-card`). ----- */
.result-card.vehicle-card {
padding: 38px 32px 34px;
/* Reset the border-left applied to homepage .vehicle-card anchors */
border-left-width: 1px;
border-left-color: var(--border);
cursor: default;
}
.result-card.vehicle-card:hover {
background: var(--surface); /* keep the gradient/background stable */
transform: translateY(-4px);
}
.vehicle-tag {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 500;
margin-bottom: 14px;
}
.vehicle-name {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-weight: 700;
color: var(--text);
line-height: 1.02;
letter-spacing: -0.5px;
font-size: 34px;
margin-bottom: 28px;
}
.vehicle-name .make {
display: block;
font-size: 15px;
color: var(--accent);
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 6px;
}
.vehicle-name .model {
display: block;
}
.outcome-block {
margin-top: auto;
border-top: 1px solid var(--border);
padding-top: 20px;
}
.outcome-label {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 10.5px;
color: var(--text-muted);
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 8px;
}
.outcome-headline {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 26px;
font-weight: 700;
color: var(--primary);
line-height: 1.05;
letter-spacing: -0.3px;
margin-bottom: 6px;
}
.outcome-plus {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 13px;
color: var(--text-muted);
line-height: 1.45;
font-weight: 500;
}
.outcome-plus .em {
color: var(--accent);
font-weight: 700;
letter-spacing: 0.2px;
}
/* ----- Featured (double-wide) variant — internal 2-column split layout
so the wider card feels full instead of having a dead-right side. ----- */
.result-card.vehicle-card.featured {
grid-column: span 2;
background: linear-gradient(135deg, var(--surface) 0%, #1c1c22 100%);
padding: 78px 32px 72px;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 36px;
align-items: stretch;
}
.result-card.vehicle-card.featured::before {
height: 4px;
transform: scaleX(0.7);
}
.result-card.vehicle-card.featured:hover::before { transform: scaleX(1); }
.result-card.vehicle-card.featured::after {
content: '';
position: absolute;
top: -60%;
right: -8%;
width: 50%;
height: 220%;
background: radial-gradient(ellipse at center, rgba(245, 197, 24, 0.05) 0%, transparent 65%);
pointer-events: none;
}
.result-card.vehicle-card.featured .featured-badge {
position: absolute;
top: 20px;
right: 20px;
background: var(--accent);
color: #0b0b0d;
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
padding: 5px 11px;
border-radius: 2px;
z-index: 2;
}
.featured-left,
.featured-right {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.featured-right {
border-left: 1px solid var(--border);
padding-left: 36px;
}
.featured-left {
padding-right: 36px;
}
.result-card.vehicle-card.featured .vehicle-name {
font-size: 56px;
line-height: 1;
letter-spacing: -1.5px;
margin-bottom: 0;
}
.result-card.vehicle-card.featured .vehicle-name .make {
font-size: 16px;
margin-bottom: 12px;
}
.result-card.vehicle-card.featured .outcome-block {
margin-top: 0;
border-top: none;
padding-top: 0;
}
.result-card.vehicle-card.featured .outcome-label {
font-size: 11px;
letter-spacing: 2.5px;
margin-bottom: 12px;
}
.result-card.vehicle-card.featured .outcome-headline {
font-size: 40px;
line-height: 1;
margin-bottom: 14px;
}
.result-card.vehicle-card.featured .outcome-plus {
font-size: 14.5px;
line-height: 1.55;
}
/* ----- RESULTS PAGE RESPONSIVE OVERRIDES ----- */
@media (max-width: 1100px) {
.result-card.vehicle-card.featured {
grid-template-columns: 1fr;
gap: 0;
padding: 40px 36px 36px;
}
.result-card.vehicle-card.featured .featured-left,
.result-card.vehicle-card.featured .featured-right {
align-items: flex-start;
text-align: left;
padding-right: 0;
}
.result-card.vehicle-card.featured .featured-right {
border-left: none;
border-top: 1px solid var(--border);
padding-left: 0;
padding-top: 28px;
margin-top: 28px;
}
.result-card.vehicle-card.featured .vehicle-name { font-size: 48px; }
.result-card.vehicle-card.featured .outcome-headline { font-size: 36px; }
}
@media (max-width: 960px) {
/* Force featured card to span only 1 column on mobile. Without this,
its `grid-column: span 2` implicitly creates a 2nd column in the
grid, causing the regular cards below to lay out 2-up and overflow
the viewport. */
.result-card.vehicle-card.featured { grid-column: auto; }
.result-card.vehicle-card { padding: 30px 26px 28px; }
.result-card.vehicle-card .vehicle-name { font-size: 30px; margin-bottom: 24px; }
.result-card.vehicle-card .vehicle-name .make { font-size: 13px; }
.result-card.vehicle-card .outcome-headline { font-size: 24px; }
.result-card.vehicle-card.featured { padding: 32px 26px 28px; }
.result-card.vehicle-card.featured .vehicle-name { font-size: 40px; }
.result-card.vehicle-card.featured .vehicle-name .make { font-size: 14px; }
.result-card.vehicle-card.featured .outcome-headline { font-size: 30px; }
}
/* ============================================================
============== TESTIMONIALS PAGE STYLES ====================
============================================================ */
/* ----- RATING AGGREGATE CARD (page-header right column) ----- */
.rating-card {
background: rgba(23, 23, 27, 0.55);
border: 1px solid var(--border);
border-radius: 4px;
padding: 0;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
position: relative;
overflow: hidden;
}
.rating-card::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 3px;
background: var(--accent);
}
.rating-card-header {
padding: 26px 28px 22px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}
.rating-stars-big {
color: var(--accent);
font-size: 32px;
letter-spacing: 4px;
line-height: 1;
margin-bottom: 8px;
}
.rating-big-label {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 18px;
font-weight: 700;
color: var(--text);
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1;
}
.rating-meta-right { text-align: right; }
.rating-count {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1.6px;
font-weight: 600;
line-height: 1.5;
}
.rating-card-platforms {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.rating-platform {
padding: 16px 18px;
border-right: 1px solid var(--border);
text-align: center;
}
.rating-platform:last-child { border-right: none; }
.rating-platform .pname {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1.8px;
font-weight: 600;
margin-bottom: 6px;
}
.rating-platform .pscore {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 4px;
}
.rating-platform .pstars {
color: var(--accent);
font-size: 14px;
letter-spacing: 2px;
}
.rating-platform .pcount {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
letter-spacing: 0.2px;
}
.rating-card-footer {
padding: 14px 28px 16px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--text-muted);
line-height: 1.55;
}
/* Page-load fade-in to match the .header-stats / .meet-card cards on the
other inner pages (About Us, Attorneys, Lemon Law, Results). Reuses
the @keyframes fadeUp already defined for the homepage hero. */
.rating-card { animation: fadeUp 0.8s 0.32s ease both; }
/* ----- NUMBERS STRIP (between page-header and testimonials grid) ----- */
.numbers-strip {
background: var(--bg-2);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 60px 32px;
}
.numbers-inner {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.number-item {
text-align: center;
padding: 8px 20px;
border-right: 1px solid var(--border);
}
.number-item:last-child { border-right: none; }
.number-item .n {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: clamp(42px, 4.5vw, 60px);
font-weight: 700;
color: var(--primary);
line-height: 1;
letter-spacing: -1px;
margin-bottom: 10px;
}
.number-item .n .sub {
font-size: 0.45em;
color: var(--accent);
margin-left: 4px;
font-weight: 600;
letter-spacing: 0;
}
.number-item .l {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 13px;
color: var(--text);
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 4px;
}
.number-item .d {
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.5;
}
/* ----- TESTIMONIAL CARDS (new figure-based markup) -----
The shared site.css already has .testimonials-grid from the homepage
(3-up grid). These styles add the .testimonial-card pattern used
specifically on the Testimonials page. .testimonial (no -card suffix)
on the homepage is a different class — no collision. */
.testimonial-card,
.testimonial-card blockquote,
.testimonial-card figcaption { margin: 0; }
.testimonial-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
padding: 32px 30px 28px;
position: relative;
overflow: hidden;
transition: all 0.25s ease;
display: flex;
flex-direction: column;
}
.testimonial-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--accent);
transform: scaleX(0.3);
transform-origin: left;
transition: transform 0.3s ease;
}
.testimonial-card:hover {
border-color: var(--accent);
transform: translateY(-3px);
}
.testimonial-card:hover::before { transform: scaleX(1); }
.tc-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.tc-stars {
color: var(--accent);
font-size: 16px;
letter-spacing: 3px;
line-height: 1;
}
.tc-source {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 10.5px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 1.8px;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
}
.tc-source .src-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--text-dim);
display: inline-block;
}
.tc-source.google .src-dot { background: #4285F4; }
.tc-source.yelp .src-dot { background: #D32323; }
.tc-source.avvo .src-dot { background: #0A2D82; }
.tc-source.direct .src-dot { background: var(--accent); }
.tc-quote {
font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
font-style: italic;
font-size: 42px;
color: var(--primary);
opacity: 0.25;
line-height: 0.5;
margin-bottom: 4px;
pointer-events: none;
}
.tc-text {
font-size: 15px;
color: var(--text-muted);
line-height: 1.65;
margin-bottom: 22px;
flex-grow: 1;
}
.tc-outcome {
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--border);
}
.tc-outcome-top {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 10px;
}
.tc-outcome-top:last-child { margin-bottom: 0; }
.tc-author {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.6px;
}
.tc-location {
font-size: 11.5px;
color: var(--text-muted);
letter-spacing: 0.3px;
}
/* Featured (double wide) testimonial */
.testimonial-card.featured {
grid-column: span 2;
background: linear-gradient(135deg, var(--surface) 0%, #1c1c22 100%);
padding: 38px 36px 32px;
}
.testimonial-card.featured::before {
height: 4px;
transform: scaleX(0.6);
background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
}
.testimonial-card.featured:hover::before { transform: scaleX(1); }
.testimonial-card.featured .tc-text {
font-size: 17px;
line-height: 1.7;
color: var(--text);
}
.testimonial-card.featured .feat-badge {
position: absolute;
top: 20px; right: 22px;
background: var(--accent);
color: #0b0b0d;
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.8px;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 2px;
z-index: 2;
}
/* On the featured card, move the source label below the featured badge */
.testimonial-card.featured .tc-top .tc-source {
position: absolute;
top: 52px;
right: 34px;
margin: 0;
}
.testimonials-disclaimer {
margin-top: 40px;
font-size: 12px;
color: var(--text-dim);
line-height: 1.65;
max-width: 1000px;
font-style: italic;
}
/* ----- LARGE PULL-QUOTE FEATURE (between grid and platforms strip) ----- */
.quote-feature {
padding: 80px 32px;
position: relative;
overflow: hidden;
border-bottom: 1px solid var(--border);
}
.quote-feature::before {
content: '';
position: absolute;
top: -40%; left: -10%;
width: 45%; height: 180%;
background: radial-gradient(ellipse at center, rgba(245, 197, 24, 0.06) 0%, transparent 60%);
pointer-events: none;
}
.quote-inner {
max-width: 960px;
margin: 0 auto;
position: relative;
z-index: 1;
text-align: center;
}
.quote-mark-big {
font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
font-style: italic;
font-size: 120px;
color: var(--primary);
line-height: 0.8;
opacity: 0.25;
margin-bottom: -30px;
}
.quote-text {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 500;
color: var(--text);
line-height: 1.45;
letter-spacing: -0.3px;
margin-bottom: 30px;
}
.quote-text .hl {
font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
font-style: italic;
font-weight: 800;
color: var(--accent);
}
.quote-author {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 14px;
color: var(--text-muted);
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
}
.quote-author .sep { margin: 0 12px; color: var(--text-dim); }
/* ----- REVIEW PLATFORMS STRIP (bottom of page) ----- */
.platforms-strip {
padding: 70px 32px;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.platforms-inner {
max-width: var(--max);
margin: 0 auto;
text-align: center;
}
.platforms-label {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 12px;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 600;
margin-bottom: 28px;
}
.platforms-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
.platform-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
padding: 30px 24px;
text-align: center;
transition: all 0.25s ease;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.platform-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--primary);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.platform-card:hover {
border-color: var(--primary);
transform: translateY(-3px);
}
.platform-card:hover::after { transform: scaleX(1); }
.platform-name {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 17px;
font-weight: 700;
color: var(--text);
letter-spacing: 1.2px;
text-transform: uppercase;
margin-bottom: 10px;
}
.platform-stars {
color: var(--accent);
font-size: 16px;
letter-spacing: 2.5px;
margin-bottom: 14px;
}
.platform-tagline {
font-size: 12px;
color: var(--text-muted);
letter-spacing: 0.3px;
margin-bottom: 14px;
}
.platform-cta {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--primary-accessible);
letter-spacing: 1.4px;
text-transform: uppercase;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: color 0.2s ease;
}
.platform-cta svg {
width: 12px;
height: 12px;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.platform-card:hover .platform-cta { color: var(--primary-hover); }
.platform-card:hover .platform-cta svg { transform: translate(2px, -2px); }
/* ----- TESTIMONIALS RESPONSIVE OVERRIDES ----- */
@media (max-width: 1100px) {
.testimonial-card.featured { grid-column: span 2; }
}
@media (max-width: 960px) {
.numbers-inner { grid-template-columns: repeat(2, 1fr); }
.number-item:nth-child(2) { border-right: none; }
.number-item:nth-child(1), .number-item:nth-child(2) {
border-bottom: 1px solid var(--border);
padding-bottom: 28px;
margin-bottom: 28px;
}
.rating-card-platforms { grid-template-columns: 1fr; }
.rating-platform { border-right: none; border-bottom: 1px solid var(--border); }
.rating-platform:last-child { border-bottom: none; }
.testimonial-card.featured { grid-column: span 1; }
.testimonial-card.featured .tc-top .tc-source {
position: static;
margin-top: 6px;
}
.platforms-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.numbers-inner { grid-template-columns: 1fr; }
.number-item { border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 24px; margin-bottom: 24px; }
.number-item:last-child { border-bottom: none; }
.rating-card-header { flex-direction: column; align-items: center; text-align: center; }
.rating-card-header > div { text-align: center; }
.rating-meta-right { text-align: center; }
}
/* ============================================================
============== BLOG PAGE STYLES ============================
============================================================ */
/* ----- Topics-at-a-glance card on the right side of the page header ----- */
.topics-card {
background: rgba(23, 23, 27, 0.55);
border: 1px solid var(--border);
border-radius: 4px;
padding: 28px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
position: relative;
overflow: hidden;
}
.topics-card::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 3px;
background: var(--primary);
}
.topics-card .topics-label {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11px; color: var(--primary-accessible);
letter-spacing: 3px; font-weight: 600;
text-transform: uppercase; margin-bottom: 18px;
}
.topics-card h2 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 22px;
font-weight: 600;
margin-bottom: 16px;
letter-spacing: 0.3px;
line-height: 1.2;
}
.topics-card ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 8px;
}
.topics-card li {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--text-muted);
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.topics-card li:last-child { border-bottom: none; }
.topics-card li svg { color: var(--primary-accessible); flex-shrink: 0; }
/* ----- FEATURED POST ----- */
.featured-section {
padding: 70px 32px 40px;
}
.featured-section .featured-eyebrow {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11px;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 600;
margin-bottom: 26px;
display: flex;
align-items: center;
gap: 14px;
}
.featured-section .featured-eyebrow::before {
content: '';
width: 28px;
height: 1.5px;
background: var(--accent);
display: inline-block;
}
.featured-eyebrow::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
margin-left: 6px;
}
.featured-card {
display: grid;
grid-template-columns: 1.25fr 1fr;
gap: 0;
background: linear-gradient(135deg, #17171b 0%, #131318 100%);
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s ease, box-shadow 0.4s ease;
position: relative;
box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}
/* Stretched-link pattern: the headline anchor covers the whole card via ::after,
so mouse users can click anywhere, but screen readers and keyboard users
get a single, properly-named link rather than a giant card-as-link. */
.featured-card .featured-title-link {
color: inherit;
text-decoration: none;
}
.featured-card .featured-title-link::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
.featured-card .featured-title-link:focus { outline: none; }
.featured-card:has(.featured-title-link:focus-visible) {
outline: 2px solid var(--primary-hover);
outline-offset: 2px;
}
.featured-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--primary) 0%, var(--primary-hover) 50%, var(--primary) 100%);
z-index: 2;
}
.featured-card::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0;
width: 40%;
background: radial-gradient(ellipse at right, rgba(200,16,46,0.06) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.featured-card:hover {
border-color: rgba(200,16,46,0.5);
transform: translateY(-4px);
box-shadow: 0 28px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(200,16,46,0.15);
}
.featured-thumb {
position: relative;
overflow: hidden;
min-height: 260px;
background: var(--bg-2);
border-right: 1px solid var(--border);
}
.featured-thumb svg,
.featured-thumb img.featured-thumb-art {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.featured-thumb .thumb-tag {
position: absolute;
top: 24px;
left: 24px;
background: var(--primary);
color: #fff;
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 2.2px;
text-transform: uppercase;
padding: 9px 15px;
border-radius: var(--radius);
z-index: 3;
box-shadow: 0 6px 18px rgba(200,16,46,0.35), 0 0 0 1px rgba(255,255,255,0.06) inset;
}
.featured-content {
padding: 28px 44px 16px;
display: flex;
flex-direction: column;
justify-content: flex-start;
position: relative;
z-index: 1;
}
.featured-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 18px;
font-size: 11.5px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
}
.featured-meta > span { white-space: nowrap; }
.featured-meta .category {
color: var(--primary-accessible);
position: relative;
padding-left: 14px;
}
.featured-meta .category::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: var(--primary);
border-radius: 50%;
box-shadow: 0 0 10px rgba(200,16,46,0.6);
}
.featured-meta .dot-sep {
width: 3px; height: 3px;
border-radius: 50%;
background: var(--text-dim);
opacity: 0.6;
}
.featured-card h2.featured-title {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: clamp(26px, 2.4vw, 34px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.4px;
margin-bottom: 14px;
color: var(--text);
transition: color 0.25s ease;
}
.featured-card:hover h2.featured-title { color: var(--primary-accessible); }
.featured-card h2.featured-title .italic {
font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
font-style: italic;
font-weight: 800;
color: var(--primary);
display: inline;
}
.featured-excerpt {
font-size: 15px;
line-height: 1.6;
color: var(--text-muted);
margin-bottom: 18px;
max-width: 95%;
}
.read-more {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 12.5px;
font-weight: 700;
color: var(--primary-accessible);
text-transform: uppercase;
letter-spacing: 2.2px;
padding: 10px 0;
border-bottom: 1.5px solid var(--primary-accessible);
align-self: flex-start;
transition: gap 0.25s ease, color 0.2s ease, border-color 0.2s ease;
position: relative;
z-index: 2;
}
.read-more:hover {
gap: 16px;
color: var(--primary-hover);
border-color: var(--primary-hover);
}
.read-more .arrow {
display: inline-block;
transition: transform 0.25s ease;
font-size: 14px;
}
.read-more:hover .arrow { transform: translateX(3px); }
/* Subtle note beneath the featured card while the blog is just one article. */
.more-coming-note {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 32px;
padding: 14px 20px;
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 1.8px;
text-transform: uppercase;
color: var(--text-dim);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.more-coming-note svg { color: var(--accent); flex-shrink: 0; }
.more-coming-note a {
color: var(--primary-accessible);
border-bottom: 1px solid var(--primary-accessible);
padding-bottom: 1px;
transition: color 0.2s;
}
.more-coming-note a:hover { color: var(--primary-hover); }
/* ----- NEWSLETTER STRIP ----- */
.newsletter {
background: var(--bg-2);
padding: 70px 32px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.newsletter::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 4px;
background: var(--primary);
}
.newsletter-inner {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.newsletter-content .eyebrow {
color: var(--accent);
margin-bottom: 14px;
}
.newsletter-content h2 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: clamp(26px, 2.6vw, 34px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.3px;
margin-bottom: 14px;
}
.newsletter-content h2 .italic {
font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
font-style: italic;
font-weight: 800;
color: var(--primary-accessible);
}
.newsletter-content p {
color: var(--text-muted);
font-size: 15.5px;
line-height: 1.65;
max-width: 480px;
}
.newsletter-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.newsletter-form .form-row {
display: flex;
gap: 10px;
margin-bottom: 0;
}
.newsletter-form input[type="email"] {
flex: 1;
padding: 16px 18px;
background: var(--field-bg);
border: 1px solid transparent;
border-radius: var(--radius);
font-size: 15px;
color: var(--field-text);
font-family: inherit;
transition: border-color 0.15s, box-shadow 0.15s;
}
.newsletter-form input[type="email"]:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18);
}
.newsletter-form input::placeholder { color: var(--field-placeholder); }
.newsletter-form button {
background: var(--primary);
color: #fff;
border: none;
padding: 0 28px;
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
border-radius: var(--radius);
transition: all 0.2s;
white-space: nowrap;
}
.newsletter-form button:hover {
background: var(--primary-hover);
box-shadow: 0 6px 20px rgba(200, 16, 46, 0.3);
}
/* Scope .consent to the newsletter form so it doesn't override the
homepage form-card .consent (which is a flex row with checkbox). */
.newsletter-form .consent {
display: block;
font-size: 11.5px;
color: var(--text-dim);
line-height: 1.5;
margin: 0;
}
.newsletter-form .consent a {
color: var(--text-muted);
border-bottom: 1px solid var(--border);
}
/* ----- Page-load fade-in for the topics card (matches other pages) ----- */
.topics-card { animation: fadeUp 0.8s 0.32s ease both; }
/* ----- BLOG RESPONSIVE OVERRIDES ----- */
@media (max-width: 960px) {
.featured-card { grid-template-columns: 1fr; }
.featured-thumb { min-height: 220px; border-right: none; border-bottom: 1px solid var(--border); }
.featured-content { padding: 28px 28px 16px; }
.newsletter-inner { grid-template-columns: 1fr; gap: 32px; }
.newsletter-form .form-row { flex-direction: column; gap: 12px; }
.newsletter-form button { padding: 16px 28px; }
}
/* ============================================================
============== BLOG POST PAGE STYLES =======================
============================================================
Long-form article layout: hero + quick-take card, feature image,
prose body with sticky TOC sidebar. Scoped under .article-body
where there's any chance of class-name collision with other pages
(notably .callout, which the Lemon Law page also uses but with a
different visual treatment). */
/* ----- ARTICLE HERO ----- */
.article-hero {
position: relative;
padding: 64px 32px 56px;
overflow: hidden;
border-bottom: 1px solid var(--border);
}
.article-hero::before {
content: ''; position: absolute;
top: -30%; right: -10%; width: 55%; height: 160%;
background: radial-gradient(ellipse at center, rgba(200, 16, 46, 0.10) 0%, transparent 60%);
pointer-events: none;
}
.article-hero::after {
content: ''; position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
background-size: 60px 60px; pointer-events: none;
mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
}
.article-hero-inner {
max-width: var(--max);
margin: 0 auto;
position: relative;
z-index: 1;
}
.article-hero-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 64px;
align-items: start;
}
.article-hero-content { min-width: 0; }
.article-eyebrow {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 12px; color: var(--accent);
text-transform: uppercase; letter-spacing: 3.5px;
font-weight: 600; margin-bottom: 18px;
}
.article-title {
font-family: 'Oswald', 'Oswald Fallback', sans-serif; font-weight: 700;
font-size: clamp(32px, 3.4vw, 48px);
line-height: 1.06; letter-spacing: -0.5px;
margin-bottom: 22px;
}
.article-title .italic {
font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
font-style: italic; font-weight: 800;
color: var(--primary); letter-spacing: -1px;
}
.article-title .italic-lemon {
font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
font-style: italic; font-weight: 800;
color: var(--accent); letter-spacing: -1px;
}
.article-deck {
font-size: 17.5px; color: var(--text-muted);
line-height: 1.65; max-width: 640px;
margin-bottom: 32px;
}
.article-deck strong { color: var(--text); font-weight: 600; }
/* Article meta bar — firm attribution, date, read time */
.article-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 18px 24px;
padding-top: 22px;
border-top: 1px solid var(--border);
}
.meta-item {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--text-muted);
letter-spacing: 0.2px;
}
.meta-item svg { color: var(--primary-accessible); flex-shrink: 0; }
.meta-item.firm {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 12.5px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--text);
font-weight: 600;
}
.meta-item.firm svg { color: var(--accent); }
.meta-divider {
width: 1px; height: 20px;
background: var(--border);
}
/* ----- QUICK-TAKE CARD (right side of article hero) ----- */
.quick-take {
background: rgba(23, 23, 27, 0.55);
border: 1px solid var(--border);
border-radius: 4px;
padding: 30px 28px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
position: relative;
overflow: hidden;
}
.quick-take::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 3px;
background: var(--primary);
}
.quick-take .qt-label {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11px; color: var(--primary-accessible);
letter-spacing: 3px; font-weight: 600;
text-transform: uppercase; margin-bottom: 16px;
}
.quick-take h2 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 20px;
font-weight: 600;
margin-bottom: 18px;
letter-spacing: 0.3px;
line-height: 1.25;
color: var(--text);
}
.quick-take .qt-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 22px;
}
.quick-take .qt-list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 13.5px;
line-height: 1.5;
color: var(--text-muted);
}
.quick-take .qt-list li svg {
color: var(--accent);
flex-shrink: 0;
margin-top: 3px;
}
.quick-take .qt-list li strong {
color: var(--text);
font-weight: 600;
}
.quick-take .qt-stat {
padding: 16px 0;
margin: 18px 0;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.quick-take .qt-stat-number {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 36px;
font-weight: 700;
color: var(--accent);
line-height: 1;
letter-spacing: -0.5px;
margin-bottom: 4px;
}
.quick-take .qt-stat-label {
font-size: 12px;
color: var(--text-muted);
letter-spacing: 0.3px;
line-height: 1.4;
}
.quick-take .qt-cta {
display: block;
text-align: center;
background: var(--primary);
color: #fff;
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 14px 18px;
border-radius: var(--radius);
transition: all 0.2s;
}
.quick-take .qt-cta:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(200, 16, 46, 0.3);
}
/* ----- FEATURE IMAGE (large hero photo below article-hero) ----- */
.feature-image {
max-width: 880px;
margin: 24px auto 0;
padding: 0 32px;
}
.feature-image figure { margin: 0; }
.feature-image .feature-image-frame {
position: relative;
border-radius: 4px;
overflow: hidden;
border: 1px solid var(--border);
box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.3);
background: var(--bg-2);
}
.feature-image .feature-image-frame::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
border-radius: 4px;
}
.feature-image img {
width: 100%;
height: auto;
display: block;
}
.feature-image figcaption {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 13px;
color: var(--text-dim);
text-align: center;
margin-top: 16px;
letter-spacing: 0.2px;
line-height: 1.5;
}
.feature-image figcaption strong {
color: var(--text-muted);
font-weight: 600;
}
/* ----- ARTICLE LAYOUT (prose + sticky sidebar) ----- */
.article-section {
padding: 40px 32px 80px;
position: relative;
}
.article-layout {
max-width: var(--max);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 64px;
align-items: start;
}
/* Sticky TOC sidebar (note: .toc class — NOT .toc-strip which is the
lemon law page's horizontal sticky strip) */
.toc {
position: sticky;
top: 32px;
background: rgba(23, 23, 27, 0.55);
border: 1px solid var(--border);
border-radius: 4px;
padding: 26px 24px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
overflow: hidden;
}
.toc::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 3px;
background: var(--primary);
}
.toc .toc-label {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11px; color: var(--primary-accessible);
letter-spacing: 3px; font-weight: 600;
text-transform: uppercase; margin-bottom: 16px;
}
.toc h2 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 17px;
font-weight: 600;
margin-bottom: 16px;
letter-spacing: 0.3px;
line-height: 1.25;
}
.toc ol {
list-style: none;
counter-reset: toc;
display: flex;
flex-direction: column;
gap: 2px;
}
.toc li {
counter-increment: toc;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.toc li:last-child { border-bottom: none; }
.toc li a {
display: flex;
align-items: baseline;
gap: 10px;
font-size: 13.5px;
color: var(--text-muted);
padding: 9px 0;
line-height: 1.4;
transition: color 0.2s, padding-left 0.2s;
}
.toc li a::before {
content: counter(toc, decimal-leading-zero);
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11px;
color: var(--accent);
font-weight: 600;
letter-spacing: 0.5px;
flex-shrink: 0;
min-width: 22px;
}
.toc li a:hover {
color: var(--text);
padding-left: 4px;
}
/* ----- ARTICLE PROSE ----- */
.article-body {
max-width: 760px;
min-width: 0;
}
.article-body p {
font-size: 17px;
line-height: 1.75;
color: #d4d4dc;
margin-bottom: 22px;
}
.article-body p strong { color: var(--text); font-weight: 600; }
.article-body a {
color: var(--primary-accessible);
border-bottom: 1px solid rgba(232, 64, 87, 0.35);
transition: color 0.2s, border-color 0.2s;
}
.article-body a:hover {
color: var(--accent);
border-bottom-color: var(--accent);
}
.article-body h2 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: clamp(26px, 2.4vw, 32px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.3px;
margin: 56px 0 22px;
color: var(--text);
position: relative;
padding-left: 18px;
scroll-margin-top: 32px;
}
.article-body h2::before {
content: '';
position: absolute;
left: 0; top: 0.35em;
bottom: 0.35em;
width: 4px;
background: var(--primary);
}
.article-body h2 .italic {
font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
font-style: italic; font-weight: 800;
color: var(--primary);
}
.article-body h3 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 21px;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.2px;
margin: 36px 0 14px;
color: var(--text);
}
.article-body ul, .article-body ol {
margin: 0 0 24px 0;
padding-left: 0;
list-style: none;
}
.article-body li {
position: relative;
padding-left: 28px;
margin-bottom: 12px;
font-size: 17px;
line-height: 1.7;
color: #d4d4dc;
}
.article-body ul li::before {
content: '';
position: absolute;
left: 4px; top: 0.7em;
width: 8px; height: 2px;
background: var(--primary);
}
.article-body ol { counter-reset: prose; }
.article-body ol li { counter-increment: prose; }
.article-body ol li::before {
content: counter(prose) '.';
position: absolute;
left: 0; top: 0;
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--accent);
letter-spacing: 0.5px;
}
.article-body li strong { color: var(--text); font-weight: 600; }
/* Lede / intro paragraph */
.article-body .lede {
font-size: 19px !important;
line-height: 1.7 !important;
color: var(--text-muted) !important;
margin-bottom: 30px !important;
}
.article-body .lede strong { color: var(--text); }
/* Pull quote — for Bobby Yaghoubian quotes */
.article-body .pull-quote {
margin: 40px 0;
padding: 28px 32px;
background: rgba(23, 23, 27, 0.6);
border: 1px solid var(--border);
border-radius: 4px;
position: relative;
overflow: hidden;
}
.article-body .pull-quote::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 4px;
background: var(--accent);
}
.article-body .pull-quote .quote-mark {
font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
font-style: italic;
font-size: 56px;
line-height: 0;
color: var(--accent);
position: absolute;
top: 32px; right: 28px;
opacity: 0.35;
pointer-events: none;
}
.article-body .pull-quote p {
font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
font-style: italic;
font-weight: 700;
font-size: 20px !important;
line-height: 1.5 !important;
color: var(--text) !important;
margin-bottom: 14px !important;
padding-right: 40px;
}
.article-body .pull-quote .attribution {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 12px;
color: var(--primary-accessible);
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 600;
line-height: 1.3;
}
.article-body .pull-quote .attribution span {
color: var(--text-dim);
letter-spacing: 1.5px;
}
/* Callout box — scoped to .article-body so it doesn't collide with
the .prose .callout used on the Lemon Law page. This version is
yellow-tinted (used for "Documents to Collect" / "Details to Write Down"). */
.article-body .callout {
margin: 32px 0;
padding: 24px 28px;
background: rgba(245, 197, 24, 0.04);
border: 1px solid rgba(245, 197, 24, 0.22);
border-radius: 4px;
position: relative;
}
.article-body .callout .callout-label {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11px;
color: var(--accent);
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.article-body .callout .callout-label svg { color: var(--accent); flex-shrink: 0; }
.article-body .callout p:last-child { margin-bottom: 0; }
.article-body .callout ul:last-child { margin-bottom: 0; }
/* Table */
.article-body .table-wrap {
margin: 28px 0 32px;
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
background: rgba(23, 23, 27, 0.5);
}
.article-body table {
width: 100%;
border-collapse: collapse;
font-size: 15px;
}
.article-body thead {
background: rgba(200, 16, 46, 0.08);
border-bottom: 1px solid var(--border);
}
.article-body th {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--primary-accessible);
text-align: left;
padding: 16px 20px;
vertical-align: top;
}
.article-body td {
padding: 16px 20px;
color: #d4d4dc;
line-height: 1.6;
border-top: 1px solid var(--border);
vertical-align: top;
}
.article-body td:first-child {
font-weight: 600;
color: var(--text);
}
/* Category grid (for "Which Defects Tend to Stay Viable" section) */
.category-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin: 24px 0 28px;
}
.category-card {
background: rgba(23, 23, 27, 0.55);
border: 1px solid var(--border);
border-radius: 4px;
padding: 18px 20px;
position: relative;
overflow: hidden;
transition: border-color 0.2s, transform 0.2s;
}
.category-card:hover {
border-color: var(--primary);
transform: translateY(-2px);
}
.category-card::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 3px;
background: var(--primary);
}
.category-card h4 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 14px;
font-weight: 600;
color: var(--text);
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.category-card p {
font-size: 13.5px !important;
line-height: 1.5 !important;
color: var(--text-muted) !important;
margin: 0 !important;
}
/* Inline CTA card mid-article */
.inline-cta {
margin: 48px 0;
padding: 32px;
background: linear-gradient(135deg, rgba(200, 16, 46, 0.12) 0%, rgba(11, 11, 13, 0.4) 100%);
border: 1px solid var(--primary);
border-radius: 4px;
position: relative;
overflow: hidden;
}
.inline-cta::after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0;
width: 35%;
background: repeating-linear-gradient(
-45deg,
transparent 0,
transparent 14px,
rgba(255,255,255,0.02) 14px,
rgba(255,255,255,0.02) 28px
);
pointer-events: none;
}
.inline-cta-content {
position: relative;
z-index: 1;
max-width: 540px;
}
.inline-cta .label {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11px;
color: var(--accent);
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 10px;
}
.inline-cta h3 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif !important;
font-size: 24px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
color: var(--text) !important;
margin: 0 0 14px 0 !important;
}
.inline-cta p {
font-size: 15px !important;
color: var(--text-muted) !important;
line-height: 1.6 !important;
margin-bottom: 20px !important;
}
.inline-cta .btn {
padding: 14px 26px;
font-size: 13px;
}
/* Article signature & disclaimer at end of article body */
.article-signature {
margin-top: 56px;
padding: 28px 30px;
background: rgba(23, 23, 27, 0.55);
border: 1px solid var(--border);
border-radius: 4px;
position: relative;
overflow: hidden;
}
.article-signature::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 3px;
background: var(--primary);
}
.article-signature .sig-label {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11px; color: var(--primary-accessible);
letter-spacing: 2.5px; text-transform: uppercase;
font-weight: 600; margin-bottom: 12px;
}
.article-signature .sig-firm {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 18px; font-weight: 700;
color: var(--text); letter-spacing: 0.3px;
margin-bottom: 8px;
}
.article-signature .sig-firm .italic {
font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
font-style: italic; font-weight: 800;
color: var(--accent);
}
.article-signature .sig-desc {
font-size: 14px; color: var(--text-muted);
line-height: 1.6; margin-bottom: 0;
}
.article-disclaimer {
font-size: 12.5px;
color: var(--text-dim);
line-height: 1.65;
padding: 16px 18px;
background: rgba(0,0,0,0.25);
border-left: 2px solid var(--border);
border-radius: 2px;
margin-top: 20px;
}
.article-disclaimer em { font-style: italic; }
/* ----- Page-load fade-in (matches other inner pages) ----- */
.article-hero-content > * { animation: fadeUp 0.7s ease both; }
.article-hero-content > *:nth-child(1) { animation-delay: 0.04s; }
.article-hero-content > *:nth-child(2) { animation-delay: 0.10s; }
.article-hero-content > *:nth-child(3) { animation-delay: 0.16s; }
.article-hero-content > *:nth-child(4) { animation-delay: 0.22s; }
.article-hero-content > *:nth-child(5) { animation-delay: 0.28s; }
.quick-take { animation: fadeUp 0.8s 0.32s ease both; }
/* ----- BLOG POST RESPONSIVE OVERRIDES ----- */
@media (max-width: 1100px) {
.article-hero-grid { gap: 40px; }
.article-layout { grid-template-columns: minmax(0, 1fr) 240px; gap: 48px; }
}
@media (max-width: 960px) {
.article-hero { padding: 48px 24px 40px; }
.article-hero-grid { grid-template-columns: 1fr; gap: 36px; }
.article-section { padding: 48px 24px 60px; }
.feature-image { padding: 0 24px; }
.article-layout { grid-template-columns: 1fr; gap: 40px; }
.toc { position: static; order: -1; }
.article-body h2 { font-size: 24px; margin: 44px 0 18px; }
.article-body h3 { font-size: 19px; }
.article-body p, .article-body li { font-size: 16px; }
.article-body .lede { font-size: 17.5px !important; }
.category-grid { grid-template-columns: 1fr; }
.article-body .pull-quote { padding: 24px; }
.article-body .pull-quote p { font-size: 17px !important; padding-right: 20px; }
.inline-cta { padding: 26px; }
.inline-cta h3 { font-size: 21px !important; }
.article-body .table-wrap { font-size: 13.5px; overflow-x: auto; }
.article-body th, .article-body td { padding: 12px 14px; }
}
@media (max-width: 700px) {
.article-hero { padding: 36px 20px 32px; }
.article-section { padding: 36px 20px 48px; }
.feature-image { padding: 0 20px; }
.article-meta { gap: 14px 18px; }
.meta-divider { display: none; }
.article-body .pull-quote .quote-mark { display: none; }
.quick-take { padding: 24px; }
.quick-take .qt-stat-number { font-size: 30px; }
}
/* ============================================================
============== CONTACT PAGE STYLES =========================
============================================================ */
/* ----- Top phone strip inside the page-header left column ----- */
.header-phone-strip {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
margin-top: 32px;
}
.header-phone-strip .big-phone {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--primary);
color: #fff;
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-weight: 700;
font-size: 22px;
padding: 14px 26px;
border-radius: var(--radius);
letter-spacing: 0.5px;
transition: all 0.2s;
}
.header-phone-strip .big-phone:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(200, 16, 46, 0.3);
}
.header-phone-strip .big-phone svg { flex-shrink: 0; }
.header-phone-strip .alt-line {
font-size: 14px;
color: var(--text-muted);
}
.header-phone-strip .alt-line strong { color: var(--text); }
/* Contact page uses a slightly wider left column in the page header */
body.page-contact .page-header-grid {
grid-template-columns: 1.35fr 1fr;
align-items: center;
}
body.page-contact .page-header-grid .hero-left { min-width: 0; }
/* ----- HERO TRUST CARD (right side of page-header) ----- */
.hero-trust-card {
background: linear-gradient(180deg, rgba(23,23,27,0.85) 0%, rgba(17,17,20,0.85) 100%);
border: 1px solid var(--border);
border-radius: 6px;
padding: 32px 32px 28px;
position: relative;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.hero-trust-card::before {
content: '';
position: absolute;
top: -1px; left: -1px; right: -1px;
height: 3px;
background: var(--primary);
border-radius: 6px 6px 0 0;
}
.hero-trust-card .trust-eyebrow {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11px;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 2.8px;
font-weight: 600;
margin-bottom: 10px;
}
.hero-trust-card .trust-heading,
.hero-trust-card h2.trust-heading {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 20px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.2px;
line-height: 1.2;
margin-bottom: 22px;
}
.hero-trust-card .trust-heading .italic {
font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
font-style: italic;
font-weight: 800;
color: var(--primary);
}
.trust-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;
background: var(--border);
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
margin-bottom: 22px;
}
.trust-stat {
background: var(--bg-2);
padding: 18px 16px 16px;
}
.trust-stat .num {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 28px;
font-weight: 700;
color: var(--text);
line-height: 1;
letter-spacing: -0.3px;
margin-bottom: 6px;
}
.trust-stat .num .accent { color: var(--primary); }
.trust-stat .num .lemon {
color: var(--accent);
font-size: 0.65em;
font-weight: 700;
letter-spacing: 0.5px;
margin-left: 2px;
}
.trust-stat .num.num-with-unit { margin-top: 14px; }
.trust-stat .label {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1.2px;
font-weight: 500;
line-height: 1.3;
}
.trust-checks {
display: flex;
flex-direction: column;
gap: 10px;
}
.trust-check {
display: flex;
align-items: center;
gap: 11px;
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.4;
}
.trust-check svg {
flex-shrink: 0;
color: var(--accent);
}
.trust-check strong { color: var(--text); font-weight: 600; }
/* ----- CONTACT GRID (form + sidebar) ----- */
.contact-section { padding: 80px 32px 90px; }
.contact-grid {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 48px;
align-items: start;
}
/* ----- FORM CARD overrides for the contact page.
The shared .form-card from the homepage already provides the base
surface, red top bar, fieldset/legend, and button-primary block.
The contact page form is bigger (padding/font sizes) and has visible
input borders so it scopes cleanly under body.page-contact. */
body.page-contact .form-card { padding: 40px; }
body.page-contact .form-card h2 {
font-size: 30px;
font-weight: 700;
margin-bottom: 8px;
line-height: 1.15;
}
body.page-contact .form-card h2 .italic {
font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
font-style: italic; font-weight: 800;
color: var(--primary);
}
body.page-contact .form-card .card-eyebrow {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11.5px;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 2.8px;
font-weight: 600;
margin-bottom: 12px;
}
body.page-contact .form-card .form-sub {
font-size: 15px;
color: var(--text-muted);
margin-bottom: 28px;
line-height: 1.6;
}
body.page-contact .form-card .form-sub strong { color: var(--text); font-weight: 600; }
/* Slightly bigger inputs with visible borders */
body.page-contact .form-field label {
color: var(--text);
font-size: 12px;
}
body.page-contact .form-field input,
body.page-contact .form-field textarea,
body.page-contact .form-field select {
border: 1px solid #6b6b75;
font-size: 16px;
min-height: 48px;
}
body.page-contact .form-field input:focus,
body.page-contact .form-field textarea:focus,
body.page-contact .form-field select:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.25);
}
body.page-contact .form-field input::placeholder,
body.page-contact .form-field textarea::placeholder { color: #6b6b75; }
body.page-contact .form-field textarea { min-height: 120px; resize: vertical; }
/* Consent row tuned for the larger contact form */
body.page-contact .form-card .consent {
font-size: 13px;
gap: 12px;
align-items: flex-start;
margin: 18px 0 22px;
}
body.page-contact .form-card .consent input[type="checkbox"] {
margin-top: 3px;
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--primary);
}
body.page-contact .form-card .consent > label {
flex: 1;
color: var(--text-muted);
font-size: 13px;
text-transform: none;
letter-spacing: 0;
font-weight: 400;
}
/* Form footer with the three benefit checks */
.form-foot {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--border);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
font-size: 13px;
color: var(--text-muted);
}
.form-foot .item { display: inline-flex; align-items: center; gap: 8px; }
.form-foot .item svg { color: var(--accent); flex-shrink: 0; }
/* ----- SIDEBAR (info-card + map + Spanish callout) ----- */
.contact-sidebar {
display: flex;
flex-direction: column;
gap: 24px;
position: sticky;
top: 24px;
}
.info-card {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--primary);
border-radius: 4px;
padding: 32px;
position: relative;
}
.info-card .info-eyebrow {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 11px;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 2.5px;
font-weight: 600;
margin-bottom: 14px;
}
.info-card h2.info-card-heading,
.info-card h3 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0.3px;
margin-bottom: 22px;
color: var(--text);
}
.contact-list {
list-style: none;
margin: 0;
}
.contact-list li {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--border);
}
.contact-list li:first-child { padding-top: 0; }
.contact-list li:last-child { border-bottom: none; padding-bottom: 0; }
.ci-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(200, 16, 46, 0.12);
color: var(--primary);
border-radius: 4px;
flex-shrink: 0;
margin-top: 2px;
}
.ci-meta { min-width: 0; flex: 1; }
.ci-label {
font-size: 11px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1.4px;
font-weight: 600;
margin-bottom: 4px;
}
.ci-value {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 19px;
color: var(--text);
font-weight: 600;
letter-spacing: 0.3px;
line-height: 1.3;
}
.ci-value.lemon { color: var(--primary); font-size: 22px; }
.ci-value.normal-font {
font-family: 'Inter', 'Inter Fallback', sans-serif;
font-size: 15px;
font-weight: 500;
line-height: 1.55;
letter-spacing: 0;
}
.ci-value a {
transition: color 0.2s;
text-decoration: underline;
text-decoration-color: rgba(255,255,255,0.25);
text-underline-offset: 3px;
}
.ci-value a:hover, .ci-value a:focus-visible { color: var(--primary-hover); text-decoration-color: var(--primary-hover); }
.ci-value.lemon a { text-decoration-color: rgba(200,16,46,0.5); }
.ci-sub {
font-size: 13px;
color: var(--text-muted);
margin-top: 4px;
line-height: 1.5;
}
/* Google Map embed card */
.map-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
}
.map-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
background: #1a1a1f;
overflow: hidden;
}
.map-frame iframe {
border: 0;
width: 100%;
height: 100%;
display: block;
filter: grayscale(40%) contrast(1.05);
}
.map-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 22px;
border-top: 1px solid var(--border);
gap: 12px;
flex-wrap: wrap;
}
.map-foot .place {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 14px;
color: var(--text);
letter-spacing: 0.4px;
}
.map-foot .place .pin { color: var(--primary); margin-right: 6px; }
.map-foot a.directions {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 1.2px;
transition: color 0.2s;
min-height: 24px;
padding: 2px 4px;
margin: -2px -4px;
}
.map-foot a.directions:hover { color: var(--accent-hover); }
/* Spanish callout */
.spanish-card {
background: linear-gradient(135deg, rgba(245, 197, 24, 0.08) 0%, rgba(200, 16, 46, 0.06) 100%);
border: 1px solid var(--border);
border-radius: 4px;
padding: 22px 24px;
display: flex;
align-items: center;
gap: 16px;
}
.spanish-card .flag {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: var(--accent);
color: #0b0b0d;
border-radius: 4px;
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 20px;
font-weight: 700;
flex-shrink: 0;
letter-spacing: 0;
}
.spanish-card .sp-text { min-width: 0; }
.spanish-card .sp-title {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 17px;
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
letter-spacing: 0.3px;
}
.spanish-card .sp-sub {
font-size: 13px;
color: var(--text-muted);
line-height: 1.55;
}
/* ----- WHAT HAPPENS NEXT (light-mode section) ----- */
.next-block {
background: #ffffff;
color: #0b0b0d;
padding: 90px 32px;
}
.next-block .eyebrow { color: var(--primary); }
.next-block h2.section-title { color: #0b0b0d; }
.next-block h2.section-title .italic { color: var(--primary); }
.next-block .section-intro { color: #4a4a52; }
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
margin-top: 40px;
}
.step-card {
background: #f9f9fa;
border: 1px solid #e5e5ea;
border-radius: 4px;
padding: 36px 32px 32px;
transition: all 0.25s ease;
position: relative;
}
.step-card:hover {
border-color: var(--primary);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(11, 11, 13, 0.07);
}
.step-card .step-num {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--primary);
letter-spacing: 2.5px;
text-transform: uppercase;
margin-bottom: 14px;
}
.step-card .icon {
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
background: rgba(200, 16, 46, 0.10);
border-radius: 4px;
margin-bottom: 20px;
color: var(--primary);
}
.step-card h3 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 21px; font-weight: 600;
margin-bottom: 10px; letter-spacing: 0.3px;
color: #0b0b0d;
line-height: 1.25;
}
.step-card p {
font-size: 14.5px; color: #4a4a52;
line-height: 1.65;
}
/* Reassurance bar inside the light section */
.reassurance-bar {
margin-top: 56px;
background: #0b0b0d;
color: #fff;
padding: 30px 36px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 24px;
position: relative;
overflow: hidden;
}
.reassurance-bar::before {
content: '';
position: absolute;
top: 0; bottom: 0; left: 0;
width: 4px;
background: var(--accent);
}
.reassurance-bar .reassurance-text {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 20px;
line-height: 1.3;
letter-spacing: 0.3px;
max-width: 720px;
}
.reassurance-bar .reassurance-text .italic {
font-family: 'Playfair Display', 'Playfair Display Fallback', serif;
font-style: italic;
font-weight: 800;
color: var(--accent);
}
.reassurance-bar .reassurance-cta {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-weight: 700;
font-size: 20px;
color: #fff;
letter-spacing: 0.5px;
transition: color 0.2s;
}
.reassurance-bar .reassurance-cta svg { color: var(--accent); flex-shrink: 0; }
.reassurance-bar .reassurance-cta:hover { color: var(--accent); }
/* ----- Page-load fade-in for the contact page hero columns -----
The contact page uses .hero-left (not .page-header-content), so the
generic .page-header-content > * fade-in rule from About Us doesn't
match. We cascade delays across the 5 children of .hero-left
(breadcrumbs, eyebrow, h1, sub, phone-strip), then the trust card
on the right lands a hair after — matching the timing on every
other inner page. */
body.page-contact .hero-left > * { animation: fadeUp 0.7s ease both; }
body.page-contact .hero-left > *:nth-child(1) { animation-delay: 0.04s; }
body.page-contact .hero-left > *:nth-child(2) { animation-delay: 0.12s; }
body.page-contact .hero-left > *:nth-child(3) { animation-delay: 0.20s; }
body.page-contact .hero-left > *:nth-child(4) { animation-delay: 0.28s; }
body.page-contact .hero-left > *:nth-child(5) { animation-delay: 0.36s; }
.hero-trust-card { animation: fadeUp 0.8s 0.32s ease both; }
/* ----- CONTACT RESPONSIVE OVERRIDES ----- */
@media (max-width: 1100px) {
.contact-grid { grid-template-columns: 1fr; gap: 36px; }
.contact-sidebar { position: static; }
}
@media (max-width: 960px) {
body.page-contact .page-header-grid { grid-template-columns: 1fr; gap: 32px; }
.trust-stats { grid-template-columns: 1fr 1fr; }
body.page-contact .form-card { padding: 28px; }
.steps-grid { grid-template-columns: 1fr; }
.reassurance-bar { padding: 24px 24px; }
.reassurance-bar .reassurance-text { font-size: 17px; }
.reassurance-bar .reassurance-cta { font-size: 18px; }
.next-block { padding: 60px 24px; }
.contact-section { padding: 60px 24px 70px; }
}
@media (max-width: 560px) {
.header-phone-strip .big-phone { font-size: 18px; padding: 12px 20px; }
.trust-stats { grid-template-columns: 1fr; }
.map-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
}
/* ============================================================
============== MOBILE HAMBURGER MENU =======================
============================================================
Mobile-only navigation: a 44x44 button appears at ≤960px,
opens a right-side slide-in panel containing the existing
nav links. Desktop is unaffected — the button is display:none
above 960px and the existing horizontal nav stays exactly as
it was. */
/* The toggle button itself — hidden on desktop. */
.nav-toggle {
display: none;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius);
width: 44px;
height: 44px;
padding: 0;
margin-left: auto;
cursor: pointer;
color: var(--text);
align-items: center;
justify-content: center;
transition: background 0.2s, border-color 0.2s;
flex-shrink: 0;
}
.nav-toggle:hover {
background: var(--surface);
border-color: var(--primary);
}
.nav-toggle:focus-visible {
outline: 2px solid var(--primary-hover);
outline-offset: 2px;
}
.nav-toggle .nav-toggle-icon { display: block; }
/* Animate the three hamburger bars into an X when menu is open. */
.nav-toggle .bar {
transition: transform 0.25s ease, opacity 0.2s ease;
transform-origin: center;
}
html.menu-open .nav-toggle .bar-1 { transform: translateY(6px) rotate(45deg); }
html.menu-open .nav-toggle .bar-2 { opacity: 0; }
html.menu-open .nav-toggle .bar-3 { transform: translateY(-6px) rotate(-45deg); }
/* Dim backdrop behind the open panel — click to close. */
.nav-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
html.menu-open .nav-backdrop {
opacity: 1;
pointer-events: auto;
}
@media (max-width: 960px) {
/* Show the hamburger button on mobile. */
.nav-toggle { display: flex; }
/* The nav becomes a slide-in panel from the right. This rule
comes later in the cascade than the earlier display:none
rule (same specificity), so it wins on mobile. */
nav.main-nav {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: 0;
flex: initial;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(320px, 85vw);
background: var(--bg);
border-left: 1px solid var(--border);
padding: 88px 28px 32px;
z-index: 999;
transform: translateX(100%);
transition: transform 0.3s ease;
box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
overflow-y: auto;
}
html.menu-open nav.main-nav { transform: translateX(0); }
/* Mobile nav links: bigger, stacked, full-width tap targets. */
nav.main-nav a {
display: block;
padding: 16px 0;
font-size: 17px;
font-weight: 500;
border-bottom: 1px solid var(--border);
letter-spacing: 0.3px;
text-align: left;
}
nav.main-nav a:last-child { border-bottom: none; }
/* The desktop active-link underline doesn't fit a vertical menu;
use a color highlight instead. */
nav.main-nav a.active { color: var(--primary); }
nav.main-nav a.active::after { display: none; }
nav.main-nav a:hover { color: var(--primary); }
/* Prevent the body from scrolling behind the open panel. */
html.menu-open,
html.menu-open body { overflow: hidden; }
}
/* ============================================================
===== MOBILE HEADER LAYOUT FIX =============================
============================================================
Tightens header padding, gap, and logo sizing on mobile so the
logo + hamburger fit on one row instead of wrapping. The
header-cta row still wraps below at width:100% (unchanged). */
@media (max-width: 960px) {
/* Reduce header chrome to give the content row more usable width. */
header { padding: 16px 20px; }
.header-inner { gap: 12px; }
/* Larger, centered logo on mobile/tablet (hamburger is absolute-
positioned top-right, so it doesn't crowd the centered logo). */
.logo-img { height: 72px; }
.logo-mark { height: 34px; }
.logo-text .primary { font-size: 18px; letter-spacing: 1px; }
.logo-text .secondary { font-size: 9px; letter-spacing: 1.8px; margin-top: 3px; }
}
@media (max-width: 480px) {
/* On very narrow phones, drop the secondary tagline entirely so the
primary "POWER LEMON LAW" wordmark sits comfortably alongside the
hamburger button. */
.logo-text .secondary { display: none; }
.logo-img { height: 84px; }
header { padding: 14px 16px; }
}
/* ============================================================
===== MOBILE HEADER LOGO CENTERING =========================
============================================================
Pulls the hamburger out of the flex flow (absolute-positioned
top-right) so the logo can sit centered in the header row.
Includes a fallback for very narrow phones (≤360px) where a
centered logo would overlap with the absolute hamburger —
there we revert to the prior left-aligned layout. */
@media (max-width: 960px) {
/* Make header a positioning context for the absolute hamburger */
header { position: relative; }
/* Center the logo in the header row */
.header-inner { justify-content: center; }
/* Pin the hamburger to the top-right corner, outside the flex flow.
Vertically centered against the header for any header height. */
.nav-toggle {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
margin-left: 0;
}
}
@media (max-width: 360px) {
/* Very narrow phones (iPhone SE etc): the new image logo is narrow
enough (~175px) to stay centered without overlapping the absolute
hamburger, so we keep it centered here too. */
.logo-img { height: 78px; }
.nav-toggle { right: 16px; }
}
/* ============================================================
===== FORM SUBMISSION STATUS (Web3Forms wiring) ============
============================================================
Inline status message that appears below the submit button
after a Web3Forms submission. Two states: success (green) and
error (red). Hidden by default via the [hidden] attribute. */
.form-status {
margin-top: 18px;
padding: 14px 18px;
border-radius: var(--radius);
font-size: 14.5px;
line-height: 1.55;
border: 1px solid;
font-weight: 500;
}
.form-status.success {
background: rgba(46, 204, 113, 0.10);
border-color: rgba(46, 204, 113, 0.35);
color: #2ecc71;
}
.form-status.error {
background: rgba(200, 16, 46, 0.10);
border-color: rgba(200, 16, 46, 0.35);
color: var(--primary-accessible);
}
.form-status[hidden] { display: none; }
/* Disabled submit button state during in-flight submission */
.form-card .btn-primary[disabled] {
opacity: 0.7;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
/* ============================================================
===== POLICY EMBED (CookieYes-injected policy content) =====
============================================================
Styles the privacy/cookies policy HTML that CookieYes injects
at runtime, so it's readable on the dark theme. */
.policy-embed {
max-width: 880px;
margin: 0 auto;
color: var(--text-muted);
font-size: 15.5px;
line-height: 1.75;
}
.policy-embed h1, .policy-embed h2 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
color: var(--text);
margin: 40px 0 16px;
letter-spacing: 0.2px;
line-height: 1.2;
}
.policy-embed h1:first-child, .policy-embed h2:first-child { margin-top: 0; }
.policy-embed h1 { font-size: 30px; }
.policy-embed h2 { font-size: 22px; }
.policy-embed h3 {
font-family: 'Oswald', 'Oswald Fallback', sans-serif;
font-size: 18px;
color: var(--text);
margin: 30px 0 12px;
}
.policy-embed p { margin: 0 0 16px; }
.policy-embed strong { color: var(--text); font-weight: 600; }
.policy-embed a {
color: var(--primary-accessible);
border-bottom: 1px solid rgba(232, 64, 87, 0.35);
transition: color 0.2s, border-color 0.2s;
}
.policy-embed a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.policy-embed ul, .policy-embed ol { margin: 0 0 18px 22px; }
.policy-embed li { margin-bottom: 6px; }
.policy-embed table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.policy-embed th, .policy-embed td {
border: 1px solid var(--border);
padding: 10px 14px;
text-align: left;
font-size: 14.5px;
vertical-align: top;
}
.policy-embed th { background: rgba(200, 16, 46, 0.06); color: var(--text); font-weight: 600; }