/* ============================================
LENDSEEK UNIFIED DESIGN SYSTEM v2.0
Consistent theme across all pages
============================================ */
:root {
/* ========== COLOR PALETTE ========== */
/* Primary Brand Colors */
--brand: #20366a; /* Primary navy blue */
--brand-dark: #162849; /* Darker navy for hover/emphasis */
--brand-light: #2952a3; /* Lighter blue for accents */
--accent: #3b82f6; /* Bright blue accent for highlights */
/* Text Colors */
--text: #1a202c; /* Primary text - dark slate */
--text-secondary: #334155; /* Secondary text */
--muted: #64748b; /* Muted/helper text */
/* Background Colors */
--bg: #ffffff; /* White background */
--bg-alt: #f8fafc; /* Light gray-blue background */
--bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e8f4fc 50%, #f5f9ff 100%);
/* Border Colors */
--border: #e2e8f0; /* Standard border */
--border-light: #f1f5f9; /* Light border */
--card-border: #e2e8f0; /* Card borders */
/* Semantic Colors */
--success: #16a34a; /* Green for success/checks */
--warning: #f59e0b; /* Amber for stars/warnings */
--error: #ef4444; /* Red for errors */
/* ========== TYPOGRAPHY ========== */
--font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
/* Font Sizes - Consistent scale */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 2rem; /* 32px */
--text-4xl: 2.5rem; /* 40px */
--text-5xl: 3rem; /* 48px */
/* Font Weights */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
--font-extrabold: 800;
/* Line Heights */
--leading-tight: 1.15;
--leading-snug: 1.3;
--leading-normal: 1.5;
--leading-relaxed: 1.7;
/* ========== SPACING SCALE ========== */
/* 4px base unit */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
/* Section Padding - Consistent */
--section-padding: 4rem; /* 64px - standard section */
--section-padding-lg: 5rem; /* 80px - large section */
/* ========== BORDER RADIUS ========== */
--radius-sm: 0.5rem; /* 8px */
--radius-md: 0.75rem; /* 12px */
--radius-lg: 1rem; /* 16px */
--radius-xl: 1.25rem; /* 20px */
--radius-2xl: 1.5rem; /* 24px */
--radius-full: 9999px; /* Pill shape */
/* ========== SHADOWS ========== */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.12);
--shadow-card: 0 4px 20px rgba(32, 54, 106, 0.08);
--shadow-card-hover: 0 12px 32px rgba(32, 54, 106, 0.15);
/* ========== TRANSITIONS ========== */
--transition-fast: 0.15s ease;
--transition-base: 0.2s ease;
--transition-slow: 0.3s ease;
/* ========== CONTAINER ========== */
--container-max: 1140px;
--container-padding: 1.25rem;
}
.btn-dark{background:#0e1b3d;color:#fff}
.btn-dark:hover{background:#0b1530}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg);margin:0}
h1,h2,h3{line-height:1.2}
h1{font-size:40px}
h2{font-size:28px}
h3{font-size:20px}
p{line-height:1.7}
small{font-size:12px}
.lead{font-size:18px}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
/* Lucide Icons - Global Defaults */
[data-lucide]{
width:20px;
height:20px;
stroke-width:2px;
vertical-align:middle;
}
/* Lucide Icons - Large Card Icons */
.icon-circle{
width:72px;
height:72px;
border-radius:50%;
background:var(--brand);
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 20px;
}
.icon-circle svg{
width:32px;
height:32px;
stroke:#fff;
stroke-width:1.75px;
}
/* Lucide Icons - Step Icons */
.step-icon{
width:60px;
height:60px;
border-radius:50%;
background:#2952a3;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.step-icon svg{
width:26px;
height:26px;
stroke:#fff;
stroke-width:2px;
}
/* Lucide Icons - Perk/Benefit Icons */
.perk-icon{
width:56px;
height:56px;
margin:0 auto 16px;
}
.perk-icon svg{
width:100%;
height:100%;
stroke:var(--brand);
stroke-width:1.5px;
}
/* Lucide Icons - Industry Tags */
.industry-tag svg{
width:18px;
height:18px;
stroke:currentColor;
stroke-width:2px;
}
/* Lucide Icons - Star Ratings */
.star-icon{
width:16px;
height:16px;
fill:#f59e0b !important;
stroke:#f59e0b !important;
stroke-width:0;
}
/* ============================
GLOBAL ICON CONTRAST RULES
Ensures icons are visible against all backgrounds
============================ */
/* Icons on dark/brand backgrounds - always white */
.bg-mca-blue svg,
.bg-mca-blue i,
.bg-maindarkblue svg,
.bg-maindarkblue i,
.bg-blue svg,
.bg-blue i,
.cta-section svg,
.cta-section i,
.dark-section svg,
.dark-section i,
.band-primary svg,
.band-primary i,
[style*="background:#20366a"] svg,
[style*="background:#20366a"] i,
[style*="background: #20366a"] svg,
[style*="background: #20366a"] i,
[style*="background:var(--brand)"] svg,
[style*="background:var(--brand)"] i,
[style*="background: var(--brand)"] svg,
[style*="background: var(--brand)"] i {
color: #fff !important;
stroke: #fff !important;
}
/* Step icons - white on blue circle */
.step-icon svg,
.step-icon i {
color: #fff !important;
stroke: #fff !important;
}
/* Quote icons in testimonials - white on brand background */
[class*="testimonial"] [class*="quote"] svg,
[class*="testimonial"] [class*="quote"] i,
.about-testimonial-quote svg,
.about-testimonial-quote i {
color: #fff !important;
stroke: #fff !important;
}
/* Star ratings - filled gold */
.star-icon,
.star-icon svg,
[class*="star"] svg,
[class*="rating"] svg,
.testimonial-rating svg,
.testimonial-rating i,
.testimonial-stars svg,
.testimonial-stars i,
.about-testimonial-stars svg,
.about-testimonial-stars i {
color: #f59e0b !important;
stroke: #f59e0b !important;
fill: #f59e0b !important;
}
/* Check icons - green */
[class*="check-icon"] svg,
[class*="check-icon"] i,
.about-check-icon svg,
.about-check-icon i {
color: #16a34a !important;
stroke: #16a34a !important;
}
/* Icons in brand circles - white */
.icon-circle svg,
.icon-circle i {
color: #fff !important;
stroke: #fff !important;
}
/* Icons on light backgrounds - brand color */
.perk-icon svg,
.perk-icon i,
.feature-icon svg,
.feature-icon i,
.solution-card .icon svg,
.solution-card .icon i,
.about-mission-icon svg,
.about-mission-icon i,
.about-network-icon svg,
.about-network-icon i,
.about-value-icon svg,
.about-value-icon i {
color: var(--brand) !important;
stroke: var(--brand) !important;
}
/* License badge - green check */
.about-license-badge svg,
.about-license-badge i {
color: #16a34a !important;
stroke: #16a34a !important;
}
/* Footer and muted icons */
.footer svg,
.footer i,
[class*="muted"] svg {
opacity: 0.7;
}
/* Dropdown menu icons */
.dropdown-item svg,
.dropdown-item i {
stroke: #9ca3af !important;
transition: stroke 0.15s ease;
}
.dropdown-item:hover svg,
.dropdown-item:hover i {
stroke: var(--brand) !important;
}
/* Mobile nav icons */
.mobile-nav-links svg,
.mobile-nav-links i {
color: var(--brand) !important;
stroke: var(--brand) !important;
}
/* Mobile nav section headers */
.mobile-nav-section-header {
font-weight: 600;
color: #20366a;
padding: 16px 24px 8px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Mobile nav phone button */
.mobile-nav-phone-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* FAQ chevron icons */
.faq-question svg,
.faq-question i {
color: var(--brand) !important;
stroke: var(--brand) !important;
}
/* Industry tag icons */
.industry-tag svg,
.industry-tag i {
color: var(--brand) !important;
stroke: var(--brand) !important;
}
/* Benefit card icons - consolidated styling */
.benefit-card > svg,
.benefit-card > i {
width: 48px;
height: 48px;
min-width: 48px;
flex-shrink: 0;
color: var(--brand);
stroke: var(--brand);
background: linear-gradient(135deg, #e8f0fe 0%, #f0f4ff 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
box-sizing: border-box;
}
/* Button icons - hidden globally (no icons in buttons) */
[class*="btn"] > i[data-lucide],
[class*="btn"] > svg.lucide,
[class*="btn"] > i.lucide,
.btn-promo-cta > i,
.btn-promo-cta > svg {
display: none !important;
}
/* Primary button icons - white */
.btn-primary svg,
.btn-primary i,
.btn-blue svg,
.btn-blue i {
color: #fff !important;
stroke: #fff !important;
}
/* Outline button icons - inherit text color */
.btn-outline svg,
.btn-outline i {
color: inherit !important;
stroke: currentColor !important;
}
/* White button icons - brand color */
.btn-white svg,
.btn-white i {
color: var(--brand) !important;
stroke: var(--brand) !important;
}
/* Header & Navbar - Matching LendSeek.com */
/* Reset Bootstrap navbar defaults */
.header .navbar-nav .nav-link{padding:10px 16px}
.header .navbar-expand-lg .navbar-nav{flex-direction:row}
.header .navbar-expand-lg .navbar-collapse{display:flex;flex-basis:auto}
.header .dropdown-toggle::after{display:none}
.header{background:#fff;border-bottom:1px solid #e3e3e8}
.sticky{position:sticky;top:0;z-index:999}
.navbar-top-default{
height:90px;
background:#fff;
width:100%;
}
.navbar-top-default > .container{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
height:100%;
max-width:1140px;
margin:0 auto;
padding:0 20px;
}
/* Logo */
.header .logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.header .logo img{height:32px;width:auto}
/* Navbar Collapse (main nav area) */
.header .navbar-collapse{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
flex:1;
}
.header .navbar-nav{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
list-style:none;
margin:0;
padding:0;
gap:0;
}
/* Nav Items */
.header .nav-item{position:relative;list-style:none;display:inline-block}
.header .nav-link{
display:inline-flex;
align-items:center;
padding:10px 18px;
font-size:15px;
font-weight:500;
color:#3b3b3b;
text-decoration:none;
transition:all 0.2s ease;
cursor:pointer;
white-space:nowrap;
}
.header .nav-link:hover{color:var(--brand)}
/* Dropdown toggles - reduce right padding to account for chevron */
.header .dropdown-toggle{
padding-right:14px;
}
/* Dropdown */
.header .nav-item.dropdown{position:relative}
.header .dropdown-toggle::after{
display:none !important;
}
.header .dropdown-toggle .chevron{
width:14px;
height:14px;
margin-left:4px;
stroke-width:2.5px;
transition:transform 0.2s ease;
opacity:0.6;
}
.header .nav-item.dropdown:hover .chevron{
transform:rotate(180deg);
}
/* Dropdown Menu - Base */
.header .dropdown-menu{
position:absolute;
top:100%;
left:-12px;
display:flex;
flex-direction:column;
background:#fff;
border-radius:16px;
min-width:280px;
box-shadow:
0 0 0 1px rgba(0,0,0,.04),
0 8px 16px rgba(0,0,0,.06),
0 24px 56px rgba(0,0,0,.1);
padding:8px;
z-index:1000;
gap:2px;
/* Animation */
opacity:0;
visibility:hidden;
transform:translateY(8px) scale(0.98);
transition:all 0.2s cubic-bezier(0.2, 0, 0, 1);
pointer-events:none;
}
.header .nav-item.dropdown:hover .dropdown-menu{
opacity:1;
visibility:visible;
transform:translateY(0) scale(1);
pointer-events:auto;
}
/* Dropdown Item */
.header .dropdown-item{
display:flex;
align-items:flex-start;
gap:12px;
padding:12px 14px;
text-decoration:none;
border-radius:10px;
transition:all 0.15s ease;
}
.header .dropdown-item:hover{
background:#f1f5f9;
}
.header .dropdown-item svg,
.header .dropdown-item i[data-lucide]{
width:20px;
height:20px;
stroke:#94a3b8;
stroke-width:1.75px;
flex-shrink:0;
transition:all 0.15s ease;
margin-top:2px;
}
.header .dropdown-item:hover svg,
.header .dropdown-item:hover i[data-lucide]{
stroke:var(--brand);
}
.header .dropdown-item .dropdown-text{
display:flex;
flex-direction:column;
gap:2px;
}
.header .dropdown-item .dropdown-title{
font-size:14px;
font-weight:600;
color:#1f2937;
line-height:1.3;
}
.header .dropdown-item .dropdown-desc{
font-size:12px;
font-weight:400;
color:#64748b;
line-height:1.4;
}
.header .dropdown-item:hover .dropdown-title{
color:var(--brand);
}
.header .dropdown-item-viewall{
margin-top:4px;
padding-top:12px;
border-top:1px solid #e5e7eb;
border-radius:0 0 10px 10px;
}
.header .dropdown-item-viewall .dropdown-title{
color:var(--brand);
}
/* Nav Phone */
.header .nav-phone .nav-link{
color:var(--brand);
font-weight:600;
padding-left:14px;
display:inline-flex;
align-items:center;
gap:6px;
}
.header .nav-phone .nav-link svg{
width:16px;
height:16px;
stroke:var(--brand);
stroke-width:2px;
}
@media(max-width:1100px){
.header .nav-phone .phone-number{display:none}
.header .nav-phone .nav-link{padding:10px 18px}
}
/* Nav Login */
.header .nav-login .nav-link{
color:#6c757d;
}
.header .nav-login .nav-link:hover{
color:var(--brand);
}
/* Nav Button */
.header .navbar-nav .btn{margin-left:8px}
.header .nav-cta .btn{white-space:nowrap}
.header .btn-large{padding:12px 22px !important;font-size:14px !important}
.header .btn-rounded{border-radius:8px !important}
.header .btn-blue{
background:var(--brand) !important;
color:#fff !important;
border:none !important;
font-weight:600;
text-decoration:none;
display:inline-block;
transition:all 0.2s ease;
box-shadow:0 2px 8px rgba(32,54,106,0.25);
}
.header .btn-blue:hover{
background:#2952a3 !important;
color:#fff !important;
transform:translateY(-2px);
box-shadow:0 4px 12px rgba(32,54,106,0.35);
}
.hero-media{position:relative;overflow:hidden;border-radius:14px}
.hero-media::before{content:"";position:absolute;inset:0;background:radial-gradient(transparent, rgba(0,0,0,.25));pointer-events:none}
.hero-card{background:#0a58ca;color:#fff;border-radius:12px;padding:16px;display:grid;gap:8px;box-shadow:0 10px 28px rgba(10,25,41,.18)}
/* Button Styles - Clean & Modern */
.btn{display:inline-block;border-radius:8px;padding:12px 32px;text-decoration:none;font-size:15px;font-weight:600;border:none;transition:all .2s ease;cursor:pointer}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 2px 8px rgba(32,54,106,0.25)}
.btn-primary:hover{background:#2952a3;color:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(32,54,106,0.35)}
.btn-outline{background:transparent;border:2px solid var(--border);color:var(--text)}
.btn-outline:hover{background:var(--bg-alt);color:var(--brand);border-color:var(--brand)}
.btn-lg{padding:14px 40px;font-size:16px;font-weight:700}
.btn-white{background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.btn-white:hover{background:#f8f9fa;color:var(--brand);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.btn-ghost{background:transparent;color:var(--brand)}
.btn-ghost:hover{background:var(--bg-alt)}
/* ============================================
SECONDARY HERO - For all non-homepage pages
Consistent, clean, professional appearance
============================================ */
/* Base secondary hero wrapper */
.secondary-hero,
.hero-wrap,
.product-hero {
background: var(--bg-gradient);
padding: var(--section-padding) 0;
border-bottom: 1px solid var(--border);
}
/* Secondary hero with compact padding */
.secondary-hero--compact {
padding: var(--space-12) 0;
}
/* Breadcrumb navigation */
.page-breadcrumb {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--muted);
margin-bottom: var(--space-5);
}
.page-breadcrumb a {
color: var(--brand);
text-decoration: none;
font-weight: var(--font-medium);
transition: color var(--transition-fast);
}
.page-breadcrumb a:hover {
color: var(--brand-light);
text-decoration: underline;
}
.page-breadcrumb svg,
.page-breadcrumb i {
width: 14px;
height: 14px;
opacity: 0.5;
}
/* Secondary hero title - consistent 40px */
.secondary-hero h1,
.hero-wrap h1,
.product-hero h1 {
font-size: var(--text-4xl);
font-weight: var(--font-extrabold);
line-height: var(--leading-tight);
color: var(--text);
margin: 0 0 var(--space-4);
letter-spacing: -0.02em;
}
/* Secondary hero subtitle */
.secondary-hero .hero-subtitle,
.hero-wrap .subtitle,
.product-hero .subtitle {
font-size: var(--text-lg);
color: var(--muted);
line-height: var(--leading-relaxed);
margin: 0 0 var(--space-6);
max-width: 600px;
}
/* Centered variant */
.secondary-hero--centered,
.product-hero {
text-align: center;
}
.secondary-hero--centered h1,
.product-hero h1 {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.secondary-hero--centered .hero-subtitle,
.product-hero .subtitle {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
/* Hero CTA buttons */
.hero-cta {
display: flex;
align-items: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.hero-cta--centered {
justify-content: center;
}
.hero-cta .btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.hero-cta .btn svg {
width: 18px;
height: 18px;
}
/* Hero feature badges */
.hero-features {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-6);
}
.hero-features--centered {
justify-content: center;
}
.hero-feature {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: var(--bg);
border-radius: var(--radius-full);
box-shadow: inset 0 0 0 1px var(--border);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--text-secondary);
transition: all var(--transition-base);
}
.hero-feature:hover {
box-shadow: inset 0 0 0 1px var(--brand), 0 8px 24px rgba(32,54,106,0.12);
transform: translateY(-2px);
}
.hero-feature svg,
.hero-feature i {
width: 18px;
height: 18px;
color: var(--brand);
}
/* Phone link in hero */
.hero-phone {
display: flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
color: inherit;
padding: var(--space-2) 0;
}
.hero-phone-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
border-radius: var(--radius-full);
box-shadow: var(--shadow-md);
}
.hero-phone-icon svg {
width: 20px;
height: 20px;
color: var(--brand);
}
.hero-phone-text {
display: flex;
flex-direction: column;
}
.hero-phone-label {
font-size: var(--text-xs);
color: var(--muted);
}
.hero-phone-number {
font-size: var(--text-base);
font-weight: var(--font-bold);
color: var(--brand);
}
/* ============================================
STANDARDIZED SECTION STYLES
============================================ */
/* Standard section padding */
.section {
padding: var(--section-padding) 0;
}
.section--alt {
background: var(--bg-alt);
}
.section--lg {
padding: var(--section-padding-lg) 0;
}
/* Section header - centered */
.section-header {
text-align: center;
max-width: 700px;
margin: 0 auto var(--space-10);
}
.section-header h2 {
font-size: var(--text-3xl);
font-weight: var(--font-bold);
color: var(--text);
margin: 0 0 var(--space-3);
line-height: var(--leading-snug);
}
.section-header p {
font-size: var(--text-lg);
color: var(--muted);
margin: 0;
line-height: var(--leading-relaxed);
}
/* Section label/eyebrow */
.section-label {
display: inline-block;
font-size: var(--text-xs);
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--brand);
margin-bottom: var(--space-3);
}
/* ============================================
STANDARDIZED CARD STYLES
============================================ */
/* Base card */
.card {
background: var(--bg);
border-radius: var(--radius-xl);
padding: var(--space-8) var(--space-6);
box-shadow: inset 0 0 0 1px var(--border);
transition: all var(--transition-slow);
}
.card:hover {
box-shadow: inset 0 0 0 1px var(--brand), 0 8px 24px rgba(32,54,106,0.12);
transform: translateY(-4px);
}
/* Card with icon */
.card-icon {
width: 72px;
height: 72px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, #e8f0fe 0%, #f0f4ff 100%);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--space-5);
}
.card-icon svg {
width: 32px;
height: 32px;
color: var(--brand);
stroke: var(--brand);
stroke-width: 1.75px;
}
/* Card title */
.card-title {
font-size: var(--text-lg);
font-weight: var(--font-bold);
color: var(--text);
margin: 0 0 var(--space-2);
}
/* Card description */
.card-desc {
font-size: var(--text-base);
color: var(--muted);
line-height: var(--leading-relaxed);
margin: 0;
}
/* ============================================
STANDARDIZED STATS BAR
============================================ */
.stats-bar {
background: var(--bg);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: var(--space-8) 0;
}
.stats-bar .stats-row {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-12);
flex-wrap: wrap;
}
.stat-item {
text-align: center;
}
.stat-value {
display: block;
font-size: var(--text-4xl);
font-weight: var(--font-extrabold);
color: var(--brand);
line-height: 1;
letter-spacing: -0.02em;
}
.stat-label {
display: block;
font-size: var(--text-sm);
color: var(--muted);
margin-top: var(--space-2);
font-weight: var(--font-medium);
}
.stat-divider {
width: 1px;
height: 48px;
background: var(--border);
}
/* Legacy hero-wrap support - kept for backwards compatibility */
.hero-wrap{background:var(--bg-gradient);border-bottom:1px solid var(--border)}
.hero-banner{position:relative;min-height:380px;color:#fff;display:flex;align-items:center}
.hero-banner .overlay{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.hero-banner .content{position:relative;z-index:1}
.hero{padding:72px 0}
.hero h1{font-size:44px;line-height:1.12;margin:0 0 10px}
.hero p{color:var(--muted);max-width:60ch}
.section{padding:40px 0}
.section h2{margin:0 0 12px}
.grid{display:grid;gap:16px}
@media(min-width:800px){.grid-4{grid-template-columns:repeat(4,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:repeat(2,1fr)}}
.card{background:#fff;border-radius:16px;padding:2.2rem 1.2rem;-webkit-box-shadow:inset 0 0 0 1px var(--card-border);box-shadow:inset 0 0 0 1px var(--card-border);transition:all .4s}
.card:hover{-webkit-box-shadow:inset 0 0 0 1px var(--brand),0 8px 24px rgba(32,54,106,0.12);box-shadow:inset 0 0 0 1px var(--brand),0 8px 24px rgba(32,54,106,0.12);transform:translateY(-4px)}
.card-title{margin:0 0 6px}
.card-muted{color:var(--muted);margin:0}
.muted{color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:999px;padding:6px 10px;background:#fff}
.logos{display:flex;gap:24px;flex-wrap:wrap;opacity:.7}
.cta-band{background:var(--bg-alt);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;gap:12px;align-items:center;justify-content:space-between}
.footer{border-top:1px solid var(--border);padding:20px 0;color:var(--muted)}
/* utilities */
.mt-0{margin-top:0}.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}
.pt-0{padding-top:0}.pt-1{padding-top:6px}.pt-2{padding-top:12px}.pt-3{padding-top:18px}
.pb-0{padding-bottom:0}.pb-1{padding-bottom:6px}.pb-2{padding-bottom:12px}.pb-3{padding-bottom:18px}
.text-center{text-align:center}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:6px}.gap-2{gap:12px}
/* forms */
input,select,textarea{font:inherit;border:1px solid var(--border);border-radius:8px;padding:10px 12px}
input:focus,select:focus,textarea:focus{outline:2px solid #cfe0ff;border-color:#b7cdfa}
label{display:block;margin:6px 0 4px}
/* blog */
/* ===== BLOG CARD COMPONENT ===== */
.post-card-link {
display: block;
text-decoration: none;
color: inherit;
}
.post-card-link:hover {
text-decoration: none;
color: inherit;
}
.post-card-link:focus-visible {
outline: 2px solid var(--brand);
outline-offset: 4px;
border-radius: 12px;
}
.post-card {
border: 1px solid var(--border);
border-radius: 12px;
background: #fff;
transition: box-shadow 0.25s ease, transform 0.25s ease;
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.post-card-link:hover .post-card {
box-shadow: 0 8px 30px rgba(0,0,0,0.10);
transform: translateY(-4px);
}
.post-card-link:hover .post-image img {
transform: scale(1.04);
}
.post-card-link:hover .post-card h3 {
color: var(--brand);
}
.post-card .card-content {
padding: 1.25rem 1.5rem 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
}
.post-card .post-meta {
font-size: 0.8125rem;
color: var(--muted);
margin-bottom: 0.625rem;
font-weight: 500;
letter-spacing: 0.025em;
text-transform: uppercase;
/* Reset — prevent article-scoped .post-meta from leaking */
background: none;
border: none;
border-radius: 0;
padding: 0;
box-shadow: none;
}
.post-card h3 {
margin: 0 0 0.625rem 0;
line-height: 1.35;
font-size: 1.125rem;
font-weight: 600;
color: var(--text);
transition: color 0.2s ease;
}
.post-card p {
color: var(--muted);
font-size: 0.9375rem;
line-height: 1.6;
margin: 0 0 1rem 0;
flex: 1;
text-align: left;
}
.post-tags {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
margin-top: auto;
}
.post-tags .pill {
background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 70%, #4a7ac7) 0%, var(--brand) 100%);
color: white;
padding: 0.1875rem 0.625rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 500;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
border: none;
pointer-events: none;
}
.post-card-link:hover .post-tags .pill {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(41, 82, 163, 0.3);
}
/* Cards without images */
.post-card:not(:has(.post-image)) .card-content {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 12px;
}
/* blog post content styling — scoped to post detail only */
.article-container {
max-width: 720px;
margin: 0 auto;
padding: 40px 20px;
line-height: 1.8;
font-size: 1.1rem;
color: #2d3748;
}
.article-container h1 {
font-size: 2.75rem;
font-weight: 700;
line-height: 1.15;
margin: 0 0 2rem 0;
color: #1a202c; /* Darker for better contrast */
text-align: center;
letter-spacing: -0.02em; /* Tighter letter spacing for large text */
}
.article-container h2 {
font-size: 1.875rem;
font-weight: 600;
line-height: 1.25;
margin: 3rem 0 1.25rem 0;
color: #2d3748;
border-bottom: 3px solid #e2e8f0;
padding-bottom: 0.75rem;
letter-spacing: -0.01em;
}
.article-container h3 {
font-size: 1.375rem;
font-weight: 600;
line-height: 1.3;
margin: 2.5rem 0 1rem 0;
color: #2d3748;
letter-spacing: -0.005em;
}
.article-container h4 {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.35;
margin: 2rem 0 0.75rem 0;
color: #4a5568;
}
.article-container p {
margin: 0 0 1.75rem 0;
color: #4a5568; /* Softer paragraph color */
font-size: 1.1rem;
line-height: 1.8;
text-align: justify; /* Better text alignment */
hyphens: auto; /* Better word breaking */
}
.article-container ul, .article-container ol {
margin: 1.5rem 0 2rem 0;
padding-left: 2rem;
line-height: 1.8;
}
.article-container li {
margin: 0.75rem 0;
line-height: 1.8;
color: #4a5568;
position: relative;
}
.article-container ul li::marker {
color: var(--brand);
font-weight: bold;
}
.article-container ol li::marker {
color: var(--brand);
font-weight: bold;
}
.article-container strong {
font-weight: 600;
color: #2d3748;
background: linear-gradient(120deg, #f7fafc 0%, #edf2f7 100%);
padding: 0.1rem 0.3rem;
border-radius: 3px;
}
.article-container em {
font-style: italic;
color: #718096;
background: #f7fafc;
padding: 0.1rem 0.3rem;
border-radius: 3px;
}
.article-container blockquote {
border-left: 4px solid var(--brand);
margin: 2.5rem 0;
padding: 1.5rem 2rem;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 0 12px 12px 0;
font-style: italic;
color: #4a5568;
font-size: 1.05rem;
line-height: 1.7;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
position: relative;
}
.article-container blockquote::before {
content: '"';
font-size: 4rem;
color: var(--brand);
position: absolute;
top: -0.5rem;
left: 1rem;
opacity: 0.3;
font-family: serif;
}
.article-container code {
background: var(--bg-alt);
padding: 0.2rem 0.4rem;
border-radius: 4px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.9em;
color: var(--brand);
}
.article-container pre {
background: var(--bg-alt);
padding: 1.5rem;
border-radius: 8px;
overflow-x: auto;
margin: 1.5rem 0;
border: 1px solid var(--border);
}
.article-container pre code {
background: none;
padding: 0;
color: var(--text);
}
.article-container table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.article-container th, .article-container td {
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 1px solid var(--border);
}
.article-container th {
background: var(--bg-alt);
font-weight: 600;
color: var(--text);
}
.article-container tr:last-child td {
border-bottom: none;
}
.article-container img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 2rem 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.markdown-content {
font-size: 1.1rem;
line-height: 1.8;
color: #4a5568;
}
/* Post meta styling — scoped to post detail only */
.article-container .post-meta {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 12px;
padding: 1.25rem 1.5rem !important;
margin: 2rem 0 !important;
border: 1px solid #e2e8f0;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.article-container .post-meta .author {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 500;
color: #2d3748;
font-size: 0.95rem;
}
.article-container .post-meta .author-icon {
color: #718096;
font-size: 0.9rem;
}
.reading-time {
background: var(--brand) !important;
color: white !important;
padding: 0.4rem 0.8rem !important;
border-radius: 20px !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
letter-spacing: 0.5px;
}
/* Share buttons styling */
.share-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 8px;
background: #f7fafc;
border: 1px solid #e2e8f0;
transition: all 0.2s ease;
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
color: #4a5568;
}
.share-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
background: white;
text-decoration: none;
}
.share-icon {
font-size: 1rem;
}
.share-label {
font-size: 0.85rem;
font-weight: 500;
}
/* Platform-specific colors */
.share-twitter:hover {
background: #1da1f2;
color: white;
border-color: #1da1f2;
}
.share-linkedin:hover {
background: #0077b5;
color: white;
border-color: #0077b5;
}
.share-facebook:hover {
background: #1877f2;
color: white;
border-color: #1877f2;
}
.faq-section {
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: 12px;
padding: 2rem;
margin: 3rem 0;
}
.faq-section h2 {
margin-top: 0;
border-bottom: none;
padding-bottom: 0;
color: var(--brand);
}
.tags {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
}
.tags strong {
color: var(--muted);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Reading comfort enhancements */
.article-container {
scroll-behavior: smooth;
}
/* Better focus states for accessibility */
.article-container a:focus,
.article-container button:focus {
outline: 2px solid var(--brand);
outline-offset: 2px;
}
/* Improved selection styling */
.article-container ::selection {
background: rgba(31, 59, 138, 0.2);
color: inherit;
}
/* Responsive design for blog posts */
@media (max-width: 768px) {
.article-container {
padding: 20px 15px;
font-size: 1.05rem;
}
.article-container h1 {
font-size: 2.25rem;
margin-bottom: 1.5rem;
}
.article-container h2 {
font-size: 1.625rem;
margin-top: 2.5rem;
}
.article-container h3 {
font-size: 1.25rem;
}
.article-container p {
text-align: left;
}
.article-container .post-meta {
padding: 1rem !important;
}
.social-share {
justify-content: center;
margin-top: 1rem !important;
}
.share-btn {
padding: 0.4rem 0.6rem;
font-size: 0.8rem;
}
.share-label {
font-size: 0.8rem;
}
.faq-section {
padding: 1.5rem;
margin: 2rem 0;
}
}
/* Print styles for better printing */
@media print {
.post-meta,
.social-share,
.related-posts,
.reading-progress {
display: none !important;
}
.article-container {
max-width: none;
padding: 0;
font-size: 12pt;
line-height: 1.6;
}
.article-container h1, .article-container h2, .article-container h3 {
page-break-after: avoid;
}
}
/* slider calc */
.slider-card{background:#0a58ca;color:#fff;border-radius:12px;padding:18px;box-shadow:0 12px 34px rgba(10,25,41,.16)}
.slider-card h3{margin:0 0 8px}
input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:6px;border-radius:4px;background:#cfe0ff;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #0846a0;cursor:pointer}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid #0846a0;cursor:pointer}
/* Contact page "Seek No More" slider */
.seek-no-more-section{background:#20366a;padding:80px 0}
.seek-no-more-content{max-width:700px;margin:0 auto;text-align:center}
.seek-no-more-card{background:#2d4c8e;border-radius:20px;padding:50px 40px;box-shadow:0 12px 30px rgba(10,25,41,.18)}
.seek-slider-wrapper{position:relative;margin:32px 0 24px}
.seek-slider{appearance:none;-webkit-appearance:none;width:100%;height:12px;border-radius:10px;background:linear-gradient(to right,#4a90e2 0%,#4a90e2 var(--slider-value,1.25%),rgba(255,255,255,.3) var(--slider-value,1.25%),rgba(255,255,255,.3) 100%);outline:none;cursor:pointer;transition:background .15s}
.seek-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid #4a90e2;cursor:grab;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:all .2s}
.seek-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 3px 12px rgba(0,0,0,.3)}
.seek-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.05)}
.seek-slider::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid #4a90e2;cursor:grab;box-shadow:0 2px 8px rgba(0,0,0,.2);transition:all .2s}
.seek-slider::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 3px 12px rgba(0,0,0,.3)}
.seek-slider::-moz-range-thumb:active{cursor:grabbing;transform:scale(1.05)}
.seek-slider::-moz-range-track{background:transparent}
.seek-amount-display{font-size:48px;font-weight:800;color:#fff;letter-spacing:0.5px;margin:24px 0 16px;text-align:center}
.seek-disclaimer{font-size:0.7rem;font-style:italic;color:rgba(255,255,255,0.78);text-align:center;margin-top:16px;line-height:1.5}
/* testimonials */
.quote{display:grid;gap:8px}
.quote p{margin:0}
.quote cite{color:var(--muted)}
/* faq */
details{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:#fff}
details + details{margin-top:10px}
summary{cursor:pointer;font-weight:600}
/* iconography */
.icon-circle{width:44px;height:44px;border-radius:999px;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
/* dark band section */
.band-primary{background:var(--brand);color:#fff;padding:56px 0;text-align:center}
.band-primary .btn{background:#fff;color:var(--brand)}
/* cards grid for products */
.product-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:18px;display:grid;gap:8px;text-align:center;box-shadow:0 6px 22px rgba(10,25,41,.06)}
.product-card .title{font-weight:700}
.product-card .desc{color:var(--muted)}
/* logos row */
.logos-row{display:flex;gap:28px;flex-wrap:wrap;align-items:center;opacity:.85}
.logos-row .logo{height:26px;width:auto;filter:grayscale(100%);opacity:.9}
/* LendSeek-style components */
/* Hero sections for product pages - Unified secondary hero */
.product-hero{
background:var(--bg-gradient);
padding:var(--section-padding) 0;
text-align:center;
border-bottom:1px solid var(--border);
}
.product-hero h1{
font-size:var(--text-4xl);
font-weight:var(--font-extrabold);
line-height:var(--leading-tight);
margin:0 0 var(--space-4);
color:var(--text);
letter-spacing:-0.02em;
max-width:800px;
margin-left:auto;
margin-right:auto;
}
.product-hero .subtitle{
font-size:var(--text-lg);
font-weight:var(--font-normal);
color:var(--muted);
max-width:700px;
margin:0 auto var(--space-6);
line-height:var(--leading-relaxed);
}
.product-hero .btn-lg{
margin-top:var(--space-2);
transition:all var(--transition-slow);
font-size:var(--text-lg);
}
.product-hero .btn-lg:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-card-hover);
}
/* Loan parameter cards */
.loan-params{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:48px 0}
.param-card{background:#fff;border-radius:16px;padding:2.2rem 1.2rem;text-align:center;-webkit-box-shadow:inset 0 0 0 1px var(--card-border);box-shadow:inset 0 0 0 1px var(--card-border);transition:all .4s}
.param-card:hover{-webkit-box-shadow:inset 0 0 0 1px var(--brand),0 8px 24px rgba(32,54,106,0.12);box-shadow:inset 0 0 0 1px var(--brand),0 8px 24px rgba(32,54,106,0.12);transform:translateY(-4px)}
.param-card .label{color:var(--muted);font-size:13px;font-weight:600;margin-bottom:12px;text-transform:uppercase;letter-spacing:0.8px}
.param-card .value{font-size:28px;font-weight:800;color:var(--brand);margin:0;line-height:1.2}
/* Benefits grid with icons */
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin:40px 0}
.benefit-card{display:flex;gap:16px;align-items:start;padding:2.2rem 1.2rem;background:#fff;border-radius:16px;-webkit-box-shadow:inset 0 0 0 1px var(--card-border);box-shadow:inset 0 0 0 1px var(--card-border);transition:all .4s}
.benefit-card:hover{-webkit-box-shadow:inset 0 0 0 1px var(--brand),0 8px 24px rgba(32,54,106,0.12);box-shadow:inset 0 0 0 1px var(--brand),0 8px 24px rgba(32,54,106,0.12);transform:translateY(-4px)}
.benefit-card i{font-size:28px;color:var(--brand);min-width:28px;margin-top:2px}
.benefit-card .content h4{margin:0 0 8px;font-size:17px;font-weight:700;color:var(--text)}
.benefit-card .content p{margin:0;font-size:14px;color:var(--muted);line-height:1.6}
/* FAQ grid for help center */
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:40px 0}
/* Process steps */
.process-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;margin:48px 0}
.step-card{text-align:center;padding:32px 24px;background:#fff;border-radius:16px;-webkit-box-shadow:inset 0 0 0 1px var(--card-border);box-shadow:inset 0 0 0 1px var(--card-border);transition:all .4s}
.step-card:hover{-webkit-box-shadow:inset 0 0 0 1px var(--brand),0 8px 24px rgba(32,54,106,0.12);box-shadow:inset 0 0 0 1px var(--brand),0 8px 24px rgba(32,54,106,0.12);transform:translateY(-4px)}
.step-number{width:64px;height:64px;border-radius:50%;background:var(--brand);color:#fff;font-size:32px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;box-shadow:0 8px 20px rgba(32,54,106,.2)}
.step-card h3{font-size:20px;font-weight:700;margin:0 0 12px;color:var(--text)}
.step-card p{color:var(--muted);margin:0;line-height:1.7;font-size:15px}
/* Trust logos - minimal strip */
.trust-strip{background:#fff;padding:32px 0;border-top:1px solid var(--border);text-align:center}
.trust-strip .media-logos{display:flex;gap:40px;justify-content:center;align-items:center;flex-wrap:wrap}
.trust-strip .media-logos img{height:24px;width:auto;opacity:.4;transition:opacity .3s}
.trust-strip .media-logos img:hover{opacity:.6}
/* Industries grid */
.industries{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0;justify-content:center}
.industry-tag{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;background:#fff;border-radius:9999px;-webkit-box-shadow:inset 0 0 0 1px var(--card-border);box-shadow:inset 0 0 0 1px var(--card-border);font-size:14px;font-weight:500;color:var(--text);transition:all .3s}
.industry-tag:hover{-webkit-box-shadow:inset 0 0 0 1px var(--brand),0 8px 24px rgba(32,54,106,0.12);box-shadow:inset 0 0 0 1px var(--brand),0 8px 24px rgba(32,54,106,0.12);transform:translateY(-2px)}
.industry-tag i{color:var(--brand);font-size:16px}
/* CTA section - Unified dark call-to-action */
.cta-section{
background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);
color:#fff;
padding:var(--section-padding) 0;
text-align:center;
margin:0;
position:relative;
overflow:hidden;
}
.cta-section::before{
content:"";
position:absolute;
top:0;left:0;right:0;bottom:0;
background:url('data:image/svg+xml,') no-repeat bottom;
opacity:.1;
pointer-events:none;
}
.cta-section h2{
font-size:var(--text-3xl);
font-weight:var(--font-bold);
margin:0 0 var(--space-3);
color:#fff;
position:relative;
z-index:1;
}
.cta-section p{
font-size:var(--text-lg);
font-weight:var(--font-normal);
margin:0 0 var(--space-6);
opacity:.95;
position:relative;
z-index:1;
}
.cta-section .btn{
background:#fff;
color:var(--brand);
font-weight:var(--font-bold);
font-size:var(--text-lg);
padding:var(--space-4) var(--space-10);
border-radius:var(--radius-full);
transition:all var(--transition-slow);
position:relative;
z-index:1;
border:none;
margin-bottom:var(--space-4);
display:inline-block;
}
.cta-section .btn:hover{
background:#fff;
transform:translateY(-3px) scale(1.02);
box-shadow:0 12px 32px rgba(0,0,0,.3);
}
/* Feature highlights with icons */
.features-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;margin:56px 0}
.feature-highlight{text-align:center;padding:24px}
.feature-icon{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#e9f1ff 0%,#d0e1ff 100%);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;box-shadow:0 8px 24px rgba(32,54,106,.12);transition:all .3s}
.feature-highlight:hover .feature-icon{transform:translateY(-4px);box-shadow:0 12px 32px rgba(32,54,106,.2)}
.feature-icon i{font-size:36px;color:var(--brand)}
.feature-highlight h3{font-size:22px;font-weight:700;margin:0 0 12px;color:var(--text)}
.feature-highlight p{color:var(--muted);margin:0;line-height:1.7;font-size:15px}
/* Enhanced product grid for solutions page */
.solutions-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px;margin:40px 0}
.solution-card{background:#fff;border-radius:16px;padding:2.2rem 1.2rem;text-align:center;-webkit-box-shadow:inset 0 0 0 1px var(--card-border);box-shadow:inset 0 0 0 1px var(--card-border);transition:all .4s;text-decoration:none;display:block;color:inherit}
.solution-card:hover{transform:translateY(-4px);-webkit-box-shadow:inset 0 0 0 1px var(--brand),0 8px 24px rgba(32,54,106,0.12);box-shadow:inset 0 0 0 1px var(--brand),0 8px 24px rgba(32,54,106,0.12);text-decoration:none}
.solution-card .icon{width:72px;height:72px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#e9f1ff 0%,#d0e1ff 100%);border-radius:50%;box-shadow:0 8px 20px rgba(32,54,106,.12)}
.solution-card:hover .icon{transform:scale(1.05);box-shadow:0 12px 28px rgba(32,54,106,.2)}
.solution-card .icon img{max-width:100%;height:auto}
.solution-card .icon i{font-size:36px;color:var(--brand)}
.solution-card h3{font-size:22px;font-weight:700;margin:0 0 12px;color:var(--text)}
.solution-card p{color:var(--muted);margin:0 0 16px;line-height:1.7;font-size:15px}
.solution-card .learn-more{color:var(--brand);font-weight:700;margin-top:8px;display:inline-block;font-size:15px}
/* FAQ accordion */
.faq-container{max-width:800px;margin:0 auto}
.faq-item{border:1px solid var(--border);border-radius:12px;margin-bottom:12px;background:#fff;overflow:hidden}
.faq-question{padding:18px 20px;cursor:pointer;font-weight:600;font-size:16px;display:flex;justify-content:space-between;align-items:center;transition:background .2s}
.faq-question:hover{background:var(--bg-alt)}
.faq-question i{color:var(--brand);transition:transform .3s}
.faq-item.active .faq-question i{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 20px}
.faq-item.active .faq-answer{max-height:500px;padding:0 20px 20px}
.faq-answer p{margin:0;color:var(--muted);line-height:1.7}
/* Contact form */
.contact-form{max-width:600px;margin:0 auto;background:#fff;border-radius:20px;-webkit-box-shadow:inset 0 0 0 1px var(--card-border);box-shadow:inset 0 0 0 1px var(--card-border);padding:2.2rem 1.2rem}
.form-group{margin-bottom:24px}
.form-group label{display:block;margin-bottom:10px;font-weight:700;color:var(--text);font-size:15px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:14px;border:1px solid var(--border);border-radius:10px;font-size:15px;transition:all .3s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--brand);-webkit-box-shadow:0 0 0 3px rgba(32,54,106,.1);box-shadow:0 0 0 3px rgba(32,54,106,.1)}
.form-group textarea{min-height:140px;resize:vertical}
.submit-btn{width:100%;padding:16px;background:var(--brand);color:#fff;border:none;border-radius:50px;font-size:17px;font-weight:700;cursor:pointer;transition:all .4s}
.submit-btn:hover{background:var(--brand-dark);transform:translateY(-3px);box-shadow:0 8px 24px rgba(32,54,106,.3)}
/* Contact info display */
.contact-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px;margin:48px 0}
.contact-card{background:#fff;border-radius:16px;-webkit-box-shadow:inset 0 0 0 1px var(--card-border);box-shadow:inset 0 0 0 1px var(--card-border);padding:2.2rem 1.2rem;text-align:center;transition:all .4s}
.contact-card:hover{-webkit-box-shadow:inset 0 0 0 1px var(--brand),0 8px 24px rgba(32,54,106,0.12);box-shadow:inset 0 0 0 1px var(--brand),0 8px 24px rgba(32,54,106,0.12);transform:translateY(-4px)}
.contact-card i{font-size:36px;color:var(--brand);margin-bottom:16px;display:block}
.contact-card h4{margin:0 0 12px;font-size:19px;font-weight:700;color:var(--text)}
.contact-card p{margin:0;color:var(--muted);line-height:1.6}
.contact-card a{color:var(--brand);text-decoration:none;font-weight:700;transition:all .2s}
.contact-card a:hover{color:var(--brand-dark)}
/* Stats/metrics box cards (unused - kept for reference) */
.stat-box{background:#fff;border-radius:16px;-webkit-box-shadow:inset 0 0 0 1px var(--card-border);box-shadow:inset 0 0 0 1px var(--card-border);padding:2.2rem 1.2rem;text-align:center;transition:all .4s}
.stat-box:hover{-webkit-box-shadow:inset 0 0 0 1px var(--brand),0 8px 24px rgba(32,54,106,0.12);box-shadow:inset 0 0 0 1px var(--brand),0 8px 24px rgba(32,54,106,0.12);transform:translateY(-4px)}
.stat-number{font-size:40px;font-weight:800;color:var(--brand);margin:0 0 12px;line-height:1}
/* Calculator Components - Split Panel Design */
.calculator-split-container{display:grid;grid-template-columns:40% 1fr;gap:0;border-radius:20px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.15);margin:48px auto;max-width:1200px}
.calculator-left-panel{background:#2d4c8e;color:#fff;padding:60px 40px;display:flex;flex-direction:column}
.calculator-left-panel h2{font-size:32px;font-weight:700;margin:0 0 16px;line-height:1.2}
.qual-subtitle{font-size:16px;line-height:1.6;margin:0 0 40px;opacity:0.95}
.qualifications-section h3{font-size:20px;font-weight:600;margin:0 0 20px}
.qualifications-list{list-style:none;padding:0;margin:0}
.qualifications-list li{display:flex;align-items:center;gap:12px;font-size:17px;padding:12px 0;line-height:1.5}
.qualifications-list i{color:#4ade80;font-size:20px}
.calculator-right-panel{background:#fff;padding:50px 40px}
.calculator-content-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-bottom:32px}
.calculator-inputs-section{margin-bottom:0}
.calc-input-group{margin-bottom:24px}
.calc-input-group label{display:block;font-size:14px;font-weight:500;color:#6b7280;margin-bottom:8px}
.input-limit{font-weight:400;font-size:13px;color:#9ca3af;font-style:italic}
.input-with-prefix{position:relative}
.currency-prefix{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:16px;font-weight:600;color:#374151;pointer-events:none}
.calc-input-group input[type="text"],
.calc-input-group input[type="number"]{width:100%;padding:14px 16px;padding-left:36px;border:1px solid #d1d5db;border-radius:8px;font-size:16px;font-family:inherit;transition:all .2s}
.calc-input-group input[type="text"]:focus,
.calc-input-group input[type="number"]:focus{outline:none;border-color:#2d4c8e;box-shadow:0 0 0 3px rgba(45,76,142,.1)}
.calc-input-group input[type="number"]{padding-left:16px}
.apr-slider-wrapper{margin-bottom:12px}
.apr-slider{width:100%;height:8px;border-radius:999px;background:#e5e7eb;outline:none;-webkit-appearance:none;appearance:none}
.apr-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#2d4c8e;cursor:pointer;transition:all .2s}
.apr-slider::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 0 0 6px rgba(45,76,142,.1)}
.apr-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#2d4c8e;border:none;cursor:pointer;transition:all .2s}
.apr-slider::-moz-range-thumb:hover{transform:scale(1.15)}
.apr-slider::-moz-range-track{height:8px;border-radius:999px;background:#e5e7eb}
.apr-display-wrapper{display:flex;justify-content:flex-end}
.apr-input-with-suffix{position:relative;display:inline-block}
.apr-input{width:80px;padding:8px 32px 8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:16px;font-weight:600;text-align:center;color:#2d4c8e}
.apr-suffix{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:16px;font-weight:600;color:#2d4c8e;pointer-events:none}
.payment-breakdown{background:#f9fafb;border-radius:12px;padding:28px 24px;margin-bottom:0}
.payment-breakdown h3{font-size:18px;font-weight:600;color:#111827;margin:0 0 20px}
.breakdown-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #e5e7eb}
.breakdown-row.total-row{border-bottom:none;border-top:2px solid #d1d5db;margin-top:8px;padding-top:16px}
.breakdown-label{font-size:15px;color:#6b7280;font-weight:500}
.breakdown-value{font-size:20px;font-weight:700;color:#10b981}
.breakdown-row.total-row .breakdown-value{font-size:24px}
.breakdown-disclaimer{font-size:11px;color:#9ca3af;line-height:1.5;margin:16px 0 0;font-style:italic}
.btn-pre-approval{width:100%;background:#2d4c8e;color:#fff;padding:18px 32px;border:none;border-radius:10px;font-size:17px;font-weight:600;cursor:pointer;transition:all .3s;box-shadow:0 4px 12px rgba(45,76,142,.3)}
.btn-pre-approval:hover{background:#1e3a78;transform:translateY(-2px);box-shadow:0 6px 16px rgba(45,76,142,.4)}
/* ============================
LAYOUT VARIETY COMPONENTS
============================ */
/* Split Section Layouts (Image + Content Side-by-Side) */
.split-section{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin:60px 0}
.split-left .split-image{order:1}
.split-left .split-content{order:2}
.split-right .split-image{order:2}
.split-right .split-content{order:1}
.split-image{position:relative;border-radius:20px;overflow:hidden}
.split-image img{width:100%;height:auto;display:block;border-radius:20px;box-shadow:0 12px 40px rgba(32,54,106,.15)}
.split-content h2{font-size:36px;font-weight:700;margin:0 0 20px;color:var(--text);line-height:1.2}
.split-content p{font-size:17px;line-height:1.8;color:var(--muted);margin:0 0 16px}
.split-content ul{list-style:none;padding:0;margin:24px 0}
.split-content ul li{padding:12px 0;padding-left:32px;position:relative;font-size:16px;line-height:1.7;color:var(--muted)}
.split-content ul li::before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:700;font-size:20px}
/* Dark Section (Navy background with white text) */
.dark-section{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);color:#fff;padding:80px 0;position:relative;overflow:hidden}
.dark-section::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,') no-repeat bottom;opacity:.3}
.dark-section h2{color:#fff;font-size:40px;font-weight:700;margin:0 0 20px}
.dark-section p{color:rgba(255,255,255,.9);font-size:18px}
.dark-section .btn{background:#fff;color:var(--brand);font-weight:700}
.dark-section .btn:hover{background:#f5f5f5;transform:translateY(-2px)}
/* Asymmetric Grid Layouts */
.asymmetric-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin:48px 0}
.asymmetric-grid.reverse{grid-template-columns:1fr 2fr}
.asymmetric-grid .featured-card{grid-column:span 1;background:#fff;border-radius:20px;padding:2.5rem;-webkit-box-shadow:inset 0 0 0 1px var(--card-border);box-shadow:inset 0 0 0 1px var(--card-border)}
.asymmetric-grid .mini-cards{display:grid;gap:24px}
/* Offset Grid (Staggered Heights) */
.offset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:48px 0}
.offset-grid .card:nth-child(2){transform:translateY(30px)}
.offset-grid .card:nth-child(5){transform:translateY(30px)}
/* Timeline Layout (Vertical Process) */
.timeline-section{position:relative;max-width:900px;margin:60px auto;padding:0 20px}
.timeline-item{display:grid;grid-template-columns:60px 1fr;gap:32px;margin-bottom:48px;position:relative}
.timeline-item::before{content:"";position:absolute;left:30px;top:70px;bottom:-48px;width:3px;background:linear-gradient(180deg,var(--brand) 0%,rgba(32,54,106,.2) 100%)}
.timeline-item:last-child::before{display:none}
.timeline-number{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);color:#fff;font-size:26px;font-weight:800;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;box-shadow:0 8px 20px rgba(32,54,106,.25)}
.timeline-content{background:#fff;border-radius:20px;padding:2rem;-webkit-box-shadow:inset 0 0 0 1px var(--card-border);box-shadow:inset 0 0 0 1px var(--card-border)}
.timeline-content h3{margin:0 0 12px;font-size:22px;font-weight:700;color:var(--text)}
.timeline-content p{margin:0;color:var(--muted);line-height:1.7;font-size:15px}
/* Stat Hero (Large Numbers) */
.stat-hero{text-align:center;padding:80px 0;background:linear-gradient(135deg,#f8fafc 0%,#e9f1ff 100%)}
.stat-hero-number{font-size:72px;font-weight:800;color:var(--brand);line-height:1;margin:0 0 16px;letter-spacing:-0.03em}
.stat-hero-label{font-size:20px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:1px}
/* Comparison Table (legacy wrapper — overridden by post-detail rules below) */
/* Testimonial Cards */
.testimonial-section{padding:80px 0;background:var(--bg-alt)}
.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:32px;margin:48px 0}
.testimonial-card{background:#fff;border-radius:20px;padding:2.2rem;-webkit-box-shadow:inset 0 0 0 1px var(--card-border);box-shadow:inset 0 0 0 1px var(--card-border);position:relative}
.testimonial-quote{font-size:16px;line-height:1.8;color:var(--muted);margin:0 0 24px;font-style:italic}
.testimonial-quote::before{content:'"';font-size:48px;color:var(--brand);position:absolute;top:20px;left:20px;opacity:.3;font-family:serif}
.testimonial-author{display:flex;align-items:center;gap:12px}
.testimonial-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#e9f1ff 0%,#d0e1ff 100%);display:flex;align-items:center;justify-content:center;color:var(--brand);font-weight:700;font-size:18px}
.testimonial-info h5{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--text)}
.testimonial-info p{margin:0;font-size:13px;color:var(--muted)}
.testimonial-rating{color:#fbbf24;margin-left:auto;font-size:14px}
/* Full-Width Image Section */
.full-image-section{position:relative;min-height:400px;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;color:#fff;text-align:center;overflow:hidden}
.full-image-section::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(32,54,106,.85) 0%,rgba(22,40,73,.9) 100%)}
.full-image-content{position:relative;z-index:2;max-width:800px;padding:0 20px}
.full-image-content h2{font-size:48px;font-weight:700;margin:0 0 20px;color:#fff}
.full-image-content p{font-size:20px;margin:0 0 32px;opacity:.95}
/* Diagonal Section Divider */
.diagonal-section{position:relative;padding:100px 0;background:#fff}
.diagonal-section::before{content:"";position:absolute;top:-50px;left:0;right:0;height:100px;background:var(--bg-alt);transform:skewY(-2deg);transform-origin:left}
/* Mixed Benefits Layout (2-column wide + narrow cards) */
.mixed-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:48px 0}
.mixed-benefits .benefit-card.wide{grid-column:span 2}
/* Icon Grid (Large Icons) */
.icon-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;margin:48px 0;text-align:center}
.icon-grid-item i{font-size:48px;color:var(--brand);margin-bottom:16px;display:block}
.icon-grid-item h4{margin:0 0 10px;font-size:18px;font-weight:700;color:var(--text)}
.icon-grid-item p{margin:0;font-size:14px;color:var(--muted);line-height:1.6}
/* ============================
IMAGE STYLES
============================ */
/* Hero with Background Image */
.hero-with-image{background-size:cover;background-position:center;position:relative;min-height:500px;display:flex;align-items:center;color:#fff}
.hero-with-image::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(32,54,106,.92) 0%,rgba(22,40,73,.88) 100%)}
.hero-with-image .container{position:relative;z-index:2}
.hero-with-image h1,.hero-with-image p{color:#fff}
.hero-with-image .btn-primary{background:#fff;color:var(--brand);font-weight:700}
.hero-with-image .btn-primary:hover{background:#f5f5f5;transform:translateY(-2px)}
/* Profile Images (Testimonials) */
.profile-image{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.15)}
/* Industry Photos */
.industry-photo{width:100%;height:180px;object-fit:cover;border-radius:16px;margin-bottom:12px;transition:all .3s}
.industry-photo:hover{transform:scale(1.05);box-shadow:0 8px 24px rgba(32,54,106,.2)}
/* Split Section Images */
.split-image{position:relative}
.split-image::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(32,54,106,.45) 0%,rgba(22,40,73,.35) 100%);border-radius:20px;pointer-events:none;z-index:1}
.split-image img{position:relative;z-index:0;transition:all .4s}
.split-section:hover .split-image img{transform:scale(1.02)}
/* Section with Background Image */
.section-with-image{background-size:cover;background-position:center;position:relative}
.section-with-image::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5)}
.section-with-image .container{position:relative;z-index:2}
/* Lazy Loading - Removed opacity issue */
img[loading="lazy"]{transition:opacity .4s}
/* ============================================
UTILITIES (CSS-01)
Font weights, colors, spacing, images
============================================ */
/* Font Weights */
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
/* Colors */
.color-blue { color: var(--brand-light); }
.text-white { color: #fff; }
.text-muted { color: var(--muted); }
.text-brand { color: var(--brand); }
/* Max Widths */
.max-w-600 { max-width: 600px; }
.max-w-700 { max-width: 700px; }
.max-w-900 { max-width: 900px; }
/* Spacing */
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.mb-24 { margin-bottom: 24px; }
.mb-40 { margin-bottom: 40px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
/* Text Size */
.text-32 { font-size: 32px; }
.text-14 { font-size: 14px; }
.text-15 { font-size: 15px; }
.text-24 { font-size: 24px; }
/* Opacity */
.opacity-90 { opacity: 0.9; }
/* Images */
.img-rounded { border-radius: var(--radius-lg); }
.img-full { width: 100%; height: auto; }
.bbb-seal {
display: inline-block;
width: 150px;
height: auto;
}
/* Industry Page Utilities */
.section-64 { padding: 64px 0; }
.mt-32 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; }
.industries-centered { justify-content: center; }
/* Product Grid Components */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.product-card {
background: #fff;
border-radius: 12px;
padding: 24px;
text-decoration: none;
border: 1px solid var(--border);
transition: all 0.3s;
}
.product-card-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
color: var(--text);
}
.product-card-desc {
color: var(--muted);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
/* ============================================
SECTION COMPONENTS (CSS-02)
Marketing section layouts and variants
============================================ */
/* Standard Marketing Section */
.section-marketing {
padding: 75px 0;
}
/* Alternate Background Section */
.section-marketing--alt {
background: var(--bg-alt);
}
/* Dark Navy Section */
.section-marketing--dark {
background: var(--brand-dark);
color: #fff;
}
/* Section Header Paragraph Constraint */
.section-header p {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
/* ============================================
REUSABLE COMPONENTS (CSS-03)
Cross-page components and patterns
============================================ */
/* As Heard On - Logo Grid */
.as-heard-on {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 2rem;
align-items: center;
justify-items: center;
}
/* Step Row - Process Steps */
.step-row {
display: flex;
gap: 2rem;
align-items: flex-start;
margin-bottom: 2rem;
}
/* CTA Phone - Prominent Phone Number */
.cta-phone {
font-size: 1.5rem;
font-weight: 700;
color: var(--brand);
}
/* CTA Button - High-Contrast Action */
.btn--cta {
background: var(--brand);
color: #fff;
padding: 16px 40px;
font-size: 18px;
font-weight: 700;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
transition: all var(--transition-base);
}
.btn--cta:hover {
background: var(--brand-light);
box-shadow: var(--shadow-xl);
transform: translateY(-2px);
}
/* Split Content - Two-Column Layout */
.split-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
@media (max-width: 768px) {
.split-content {
grid-template-columns: 1fr;
}
}
/* Check List - Feature Lists */
.check-list {
list-style: none;
padding: 0;
}
.check-list li {
padding-left: 2rem;
position: relative;
margin-bottom: 1rem;
}
.check-list li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--success);
font-weight: 700;
}
/* Inline Testimonial - Quote Block */
.inline-testimonial {
background: var(--bg-alt);
border-left: 4px solid var(--brand);
padding: 1.5rem;
margin: 2rem 0;
font-style: italic;
}
/* Industry Page Components */
.split-wrap {
display: flex;
flex-wrap: wrap;
gap: 48px;
align-items: center;
}
.split-col {
flex: 1;
min-width: 300px;
}
.check-list-industry {
list-style: none;
padding: 0;
margin: 0 0 24px;
}
.check-list-industry li {
padding: 10px 0;
padding-left: 28px;
position: relative;
}
.check-list-industry li i[data-lucide] {
position: absolute;
left: 0;
color: var(--brand);
width: 18px;
height: 18px;
}
.testimonial-card-inline {
background: #fff;
border-radius: 16px;
padding: 28px;
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
margin: 0;
}
.testimonial-header-inline {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}
.testimonial-avatar-inline {
width: 48px;
height: 48px;
background: var(--brand);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
}
.testimonial-author-inline cite {
font-weight: 600;
font-style: normal;
}
.testimonial-meta-inline {
color: var(--muted);
font-size: 14px;
}
.testimonial-quote-inline {
font-style: italic;
color: #555;
line-height: 1.7;
margin-bottom: 12px;
}
.testimonial-stars-inline {
color: #f59e0b;
}
/* Footer Component Classes */
.footer {
background: #f8f9fa;
padding: 60px 0 40px 0;
}
.footer-col {
margin-bottom: 30px;
}
.footer-logo {
display: inline-block;
margin-bottom: 20px;
}
.footer-logo-img {
height: 32px;
width: auto;
}
.footer-heading {
font-weight: 600;
margin-bottom: 18px;
color: #2d3748;
font-size: 0.95rem;
}
.footer-list {
list-style: none;
padding: 0;
margin: 0;
}
.footer-list-item {
margin-bottom: 12px;
}
.footer-link {
color: #6c757d;
text-decoration: none;
font-size: 0.9rem;
transition: color 0.2s ease;
}
.footer-link:hover {
color: #2952a3;
}
.footer-text {
color: #6c757d;
line-height: 1.6;
margin-bottom: 14px;
}
.footer-text-primary {
font-size: 0.88rem;
}
.footer-text-small {
font-size: 0.82rem;
}
.footer-copyright {
color: #6c757d;
font-size: 0.9rem;
margin-top: 20px;
}
.footer-divider {
margin: 20px 0;
border-top: 1px solid #dee2e6;
}
.footer-address {
color: #6c757d;
line-height: 1.8;
font-size: 0.9rem;
}
.footer-phone {
color: #2952a3;
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}
.footer-phone:hover {
color: #20366a;
}
/* ============================================
PRODUCT PAGE COMPONENTS (CSS-11)
Testimonial cards, process steps, two-column layouts
============================================ */
/* Testimonial Card - White card with quote */
.testimonial-card {
background: #fff;
border-radius: 16px;
padding: 28px;
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.testimonial-card-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}
.testimonial-avatar {
width: 48px;
height: 48px;
background: var(--brand);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
}
.testimonial-author {
font-weight: 600;
}
.testimonial-meta {
color: var(--muted);
font-size: 14px;
}
.testimonial-quote {
font-style: italic;
color: #555;
line-height: 1.7;
margin-bottom: 12px;
}
.testimonial-stars {
color: #f59e0b;
}
/* Process Steps Grid */
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 32px;
max-width: 900px;
margin: 0 auto;
}
.step-item {
text-align: center;
}
.step-number {
width: 64px;
height: 64px;
background: var(--brand);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
color: #fff;
font-size: 24px;
font-weight: 700;
}
.step-item h4 {
margin-bottom: 8px;
}
.step-item p {
color: var(--muted);
font-size: 15px;
}
/* Two-Column Flexible Layout */
.flex-columns {
display: flex;
flex-wrap: wrap;
gap: 48px;
align-items: center;
}
.flex-col {
flex: 1;
min-width: 300px;
}
/* Check List with Icons (for features) */
.icon-check-list {
list-style: none;
padding: 0;
margin: 0 0 24px;
}
.icon-check-list li {
padding: 10px 0;
padding-left: 28px;
position: relative;
}
.icon-check-list li svg,
.icon-check-list li i {
position: absolute;
left: 0;
color: var(--brand);
width: 18px;
height: 18px;
}
/* Section Padding 64px */
.section-64 {
padding: 64px 0;
}
/* ============================================
INDUSTRY PAGES (CSS-08)
Shared styles for 55 industry templates
============================================ */
/* ============================================
FONT-WEIGHT STANDARDIZATION (CSS-14)
Consistent heading weights across pages
============================================ */
/* Section Headings - Standard Bold */
.section-header h2,
section h2 {
font-weight: 700;
}
/* Step Headings - Semi-Bold */
.step-row h4 {
font-weight: 600;
}
/* ============================================
PAGE-SPECIFIC STYLES (CSS-07)
Extracted from individual template embedded blocks
TODO: Full extraction with deduplication pending
============================================ */
/* NOTE: Large page-specific style blocks from the following templates
still need proper extraction and deduplication:
- about.html (535 lines)
- contact.html (293 lines)
- how_it_works.html (416 lines)
- calculator.html (458 lines)
- help_center.html (161 lines)
- thank_you.html (159 lines)
- post_detail.html (340 lines)
- post_list.html (143 lines)
These require careful deduplication analysis against existing theme.css rules.
Will be handled in subsequent CSS cleanup plans (Plan 02-05).
*/
/* ============================================
HOMEPAGE STYLES
Extracted from home.html embedded block
============================================ */
/* Hero Section */
.hero-section {
position: relative;
padding: 140px 0 120px;
min-height: 580px;
display: flex;
align-items: center;
overflow: hidden;
}
.hero-video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
z-index: 0;
}
.hero-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 0;
}
.hero-container {
position: relative;
z-index: 1;
}
.hero-content-wrapper {
max-width: 720px;
}
.hero-subtitle {
color: rgba(255,255,255,0.9);
margin-bottom: 32px;
}
.hero-cta-wrapper {
margin-bottom: 32px;
}
.hero-cta-btn {
padding: 16px 40px;
font-size: 1.05rem;
}
.hero-trust-badges {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.hero-bbb-badge {
border: 0;
height: 48px;
}
/* As Heard On Section */
.section-aho {
background: var(--bg-light);
padding: 48px 0;
}
.aho-container {
max-width: 900px;
margin: 0 auto;
}
.aho-logos {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.aho-logo {
width: auto;
}
.aho-logo-cnn {
height: 44px;
}
.aho-logo-espn {
height: 40px;
}
.aho-logo-sirius {
height: 38px;
}
.aho-logo-fox {
height: 42px;
}
.aho-logo-msnbc {
height: 44px;
}
/* Section Marketing Base */
.section-marketing {
padding: 75px 0;
background: white;
}
.section-marketing--alt {
background: var(--bg-light);
padding: 75px 0;
}
.section-header-mb {
margin-bottom: 48px;
}
.section-title {
font-size: 2rem;
color: var(--text-dark);
}
.section-subtitle {
margin: 16px auto 0;
}
/* Slider Card */
.slider-card {
border-radius: 16px;
margin: 0 auto 40px;
max-width: 800px;
box-shadow: var(--shadow-lg);
}
.slider-card-inner {
padding: 40px 36px;
}
.slider-card-logo {
width: 100px;
height: auto;
margin-bottom: 24px;
}
.slider-card-label {
color: white;
font-size: 1.65rem;
font-weight: 600;
margin-bottom: 32px;
}
.slider-card-amount-wrapper {
text-align: right;
}
.slider-card-amount {
color: white;
font-size: 3rem;
font-weight: 700;
}
.slider-card-disclaimer {
color: rgba(255,255,255,0.7);
font-size: 0.75rem;
font-style: italic;
margin-top: 16px;
}
/* Product Cards */
.product-cards-row {
margin-top: 16px;
}
.product-card-col {
padding: 12px;
margin-bottom: 24px;
}
.whitecard-desc {
margin-bottom: 20px;
}
/* Steps Section */
.steps-col {
margin-bottom: 32px;
}
.step-row {
display: flex;
align-items: flex-start;
margin-bottom: 40px;
}
.step-row-last {
margin-bottom: 0;
}
.step-content {
flex: 1;
padding-left: 20px;
}
.step-heading {
margin-bottom: 8px;
}
.step-text {
margin: 0;
}
.step-image {
width: 100%;
border-radius: 20px;
}
.step-cta-wrapper {
margin-top: 24px;
text-align: center;
}
.step-cta-btn {
padding: 16px 48px;
}
/* Promo Banner */
.promo-banner {
background-size: cover;
background-position: center;
border-radius: 20px;
padding: 80px 48px;
position: relative;
overflow: hidden;
}
.promo-banner-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(30, 58, 95, 0.9), rgba(15, 23, 42, 0.85));
}
.promo-banner-content {
position: relative;
z-index: 1;
max-width: 480px;
}
.promo-banner-title {
color: white;
font-size: 2rem;
font-weight: 600;
margin-bottom: 16px;
}
.promo-banner-text {
color: rgba(255,255,255,0.9);
margin-bottom: 28px;
}
/* Benefits Grid (homepage - uses Bootstrap row/col, not CSS grid) */
.row.benefits-grid {
display: flex !important;
flex-wrap: wrap;
grid-template-columns: none;
gap: normal;
margin-top: 56px;
}
.benefit-col {
padding: 16px;
}
/* Rows */
.row-stretch {
align-items: stretch;
}
/* Industries Section */
.industries-header {
margin-bottom: 40px;
}
/* CTA Phone */
.cta-phone-text {
margin-top: 16px;
font-size: 14px;
opacity: 0.9;
}
.cta-phone-link {
color: #fff;
font-weight: 600;
}
/* CTA Button Large */
.cta-btn-large {
padding: 16px 48px;
font-size: 1.05rem;
}
/* Utility Classes */
.max-w-600 {
max-width: 600px;
}
.max-w-700 {
max-width: 700px;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.section-cta-center {
text-align: center;
margin-top: 40px;
}
.section-cta-btn {
padding: 16px 48px;
font-size: 1.05rem;
}
.text-muted {
color: #6c757d;
}
/* ============================================
APPLYPROMO PAGE STYLES
============================================ */
/* Promo Hero */
.promo-hero-left {
margin-bottom: 40px;
}
.promo-hero-cta-wrapper {
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.btn-icon-sm {
width: 18px;
height: 18px;
}
.promo-hero-stats {
font-size: 0.85rem;
color: rgba(255,255,255,0.7);
line-height: 1.5;
}
.promo-stat-highlight {
font-weight: 700;
color: #fff;
}
.promo-stat-divider {
margin: 0 6px;
opacity: 0.4;
}
.promo-bbb-badge {
border: 0;
height: 48px;
}
.promo-slider-card-logo {
width: 100px;
height: auto;
margin-bottom: 24px;
}
/* As Heard On - Promo Variant */
.section-aho-promo {
padding: 36px 0;
background: var(--bg-alt, #f8fafc);
text-align: center;
}
.aho-container-sm {
max-width: 900px;
}
.aho-header {
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--muted, #64748b);
margin-bottom: 20px;
}
.aho-logos-muted img {
opacity: 0.8;
}
.aho-logo-cnn-sm {
height: 40px;
}
.aho-logo-espn-sm {
height: 36px;
}
.aho-logo-sirius-sm {
height: 34px;
}
.aho-logo-fox-sm {
height: 38px;
}
.aho-logo-msnbc-sm {
height: 40px;
}
/* Testimonial Rating Top */
.testimonial-rating-top {
margin-bottom: 16px;
}
/* ============================================
CL/RENEWAL PAGE STYLES
============================================ */
/* As Heard On - CL Variant */
.section-aho-cl {
background: #f8f9fa;
padding: 40px 0;
}
.aho-container-cl {
max-width: 920px;
margin: 0 auto;
}
.aho-text-mb {
margin-bottom: 22px;
}
.as-heard-row {
display: flex;
align-items: center;
justify-content: center;
gap: 48px;
flex-wrap: wrap;
}
.aho-logo-cnn-lg {
height: 50px;
width: auto;
display: block;
}
.aho-logo-espn-lg {
height: 45px;
width: auto;
display: block;
}
.aho-logo-sirius-lg {
height: 42px;
width: auto;
display: block;
}
.aho-logo-fox-lg {
height: 48px;
width: auto;
display: block;
}
.aho-logo-msnbc-lg {
height: 50px;
width: auto;
display: block;
}
/* CL Section Styles */
.cl-section-title {
width: 100%;
margin: 0 auto 40px;
font-weight: 700;
text-align: center;
}
.cl-image-col {
margin-bottom: 30px;
}
.cl-cta-wrapper {
margin-top: 25px;
text-align: center;
}
.cl-cta-btn {
display: inline-block;
}
.cl-steps-col {
text-align: left;
}
.cl-step-row {
margin-bottom: 50px;
display: flex;
align-items: flex-start;
}
.cl-step-row-last {
margin-bottom: 0;
}
.cl-step-content {
flex: 1;
padding-left: 20px;
}
/* CL FAQ Section */
.cl-faq-title {
margin-bottom: 24px;
}
.cl-faq-text {
margin-bottom: 24px;
}
.cl-faq-list {
color: #4a5568;
margin-bottom: 32px;
}
.cl-faq-question {
font-weight: 500;
margin-top: 24px;
}
/* CL Sidebar Card */
.cl-sidebar-card {
background: white;
border-radius: 16px;
padding: 32px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
position: sticky;
top: 100px;
}
.cl-feature-item {
display: flex;
align-items: center;
margin-bottom: 28px;
}
.cl-feature-icon {
width: 28px;
height: 28px;
margin-right: 12px;
}
.cl-feature-title {
margin-bottom: 4px;
}
.cl-feature-text {
font-size: 14px;
margin: 0;
}
.cl-sidebar-btn {
display: block;
text-align: center;
width: 100%;
}
/* CL Banner Section */
.section-padding-md {
padding: 60px 0;
}
.section-padding-md-top {
padding: 60px 0 0;
}
.cl-banner-title {
font-size: 2.25rem;
}
.cl-banner-cta {
text-align: center;
margin-top: 24px;
}
/* CL Testimonials */
.section-testimonial-bg {
background: #e8f4fc;
padding: 0 0 75px;
}
.testimonial-container-offset {
margin-top: -30px;
}
.cl-testimonial-header {
font-size: 2.25rem;
margin-bottom: 40px;
}
.cl-underline {
text-decoration: underline;
}
/* CL Final CTA */
.cl-final-cta-title {
font-size: 2.5rem;
margin-bottom: 16px;
}
.cl-final-cta-text {
opacity: 0.95;
margin-bottom: 24px;
}
/* ========================================
LendSeek Design System
Unified color palette and spacing
======================================== */
/* Color Variables - Matching LendSeek.com */
:root {
--primary: #20366a;
--primary-light: #2952a3;
--primary-dark: #162849;
--accent: #55ACEE;
--bg-light: #f8f9fa;
--bg-white: #ffffff;
--text-dark: #3b3b3b;
--text-muted: #585858;
--border-color: #e3e3e8;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 12px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
--radius-sm: 10px;
--radius-md: 20px;
--radius-lg: 50px;
--section-padding: 75px;
}
/* Custom Slider */
.custom-slider {
position: relative;
width: 100%;
height: 40px;
cursor: pointer;
touch-action: none;
-webkit-user-select: none;
user-select: none;
margin-bottom: 20px;
}
.custom-slider__track {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 6px;
margin-top: -3px;
background: rgba(255,255,255,0.25);
border-radius: 3px;
overflow: hidden;
}
.custom-slider__fill {
height: 100%;
background: #fff;
border-radius: 3px;
width: 0%;
}
.custom-slider__thumb {
position: absolute;
top: 50%;
width: 28px;
height: 28px;
margin-top: -14px;
margin-left: -14px;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
cursor: grab;
transition: box-shadow 0.15s ease;
left: 0%;
}
.custom-slider__thumb:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 0 8px rgba(255,255,255,0.1);
}
.custom-slider__thumb:active,
.custom-slider__thumb.dragging {
cursor: grabbing;
box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 0 10px rgba(255,255,255,0.15);
}
/* Background Colors */
.bg-mca-blue, .bg-maindarkblue, .bg-blue {
background-color: var(--primary) !important;
}
.bg-light {
background: var(--bg-light);
}
/* Text Colors */
.color-blue {
color: var(--primary-light);
}
.text-white {
color: white;
}
.text-dark {
color: var(--text-muted);
}
/* Typography */
.maintitlefix {
margin-bottom: 16px;
font-weight: 700;
font-size: 2.75rem;
line-height: 1.2;
color: white;
}
.subtitlefix {
font-weight: 400;
font-size: 1.15rem;
opacity: 0.95;
}
.herotextshad {
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.caps {
text-transform: capitalize;
}
.fw-600 {
font-weight: 600;
}
.fw-700 {
font-weight: 700;
}
/* Section Headers */
.section-title {
font-size: 2rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 16px;
}
.section-subtitle {
color: var(--text-muted);
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
/* Cards - Matching LendSeek.com */
.whitecard {
background: white;
box-shadow: inset 0 0 0 1px var(--border-color);
border-radius: 16px;
padding: 35px 20px;
text-align: center;
height: 100%;
transition: all 0.4s;
display: flex;
flex-direction: column;
}
.whitecard .text-dark {
flex: 1;
}
.whitecard-link {
text-decoration: none;
color: inherit;
display: flex;
height: 100%;
}
.whitecard:hover {
box-shadow: inset 0 0 0 1px var(--brand), 0 8px 24px rgba(32,54,106,0.12);
transform: translateY(-4px);
}
.bluecardicon {
margin-bottom: 20px;
display: flex;
justify-content: center;
}
.bluecardicon img {
width: 72px;
height: 72px;
}
.whitecardtitle {
font-weight: 600;
font-size: 1.2rem;
margin-bottom: 12px;
color: var(--text-dark);
display: flex;
align-items: center;
justify-content: center;
}
.height60 {
min-height: 56px;
}
/* Buttons - Clean & Modern */
.btn-white {
background: #ffffff;
color: var(--primary);
border-radius: 8px;
padding: 12px 32px;
text-decoration: none;
display: inline-block;
font-weight: 600;
font-size: 15px;
border: none;
transition: all 0.2s ease;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.btn-white:hover {
background: #f8f9fa;
color: var(--primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* As Heard On */
.asheardontext {
color: var(--text-muted);
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 24px;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;
}
/* Steps Icons - Matching LendSeek.com */
.stepsiconbg {
background: #2952a3;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.stepsiconsize {
color: white;
font-size: 24px;
}
/* Promo Image Section */
.pxp-promo-img {
border-radius: 20px;
padding-left: 80px;
}
.img-section-border-radius {
border-radius: 16px;
}
/* Perks */
.perk_component {
padding: 24px 16px;
}
.perk_component img {
height: 56px;
margin-bottom: 16px;
}
.heading-style-h5 {
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 8px;
color: var(--text-dark);
}
/* Utility Classes */
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.m-t-20 {
margin-top: 20px;
}
.m-tb-25 {
margin-top: 24px;
margin-bottom: 24px;
}
.mb-4 {
margin-bottom: 24px;
}
.p-t-75 {
padding-top: var(--section-padding);
}
.p-b-15em {
padding-bottom: 1.25em;
}
/* ============================================
CL/RENEWAL FORM STYLES
Extracted from cl.html and renewal.html
============================================ */
/* CL Page Custom Styles */
.cl-hero {
background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url('https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?q=80&w=1920&auto=format&fit=crop');
background-size: cover;
background-position: center;
padding: 100px 0;
min-height: 600px;
}
.cl-hero-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
flex-wrap: wrap;
}
.cl-hero-text {
flex: 1;
min-width: 300px;
max-width: 500px;
}
.cl-hero-text h1 {
font-size: 2.75rem;
font-weight: 700;
color: white;
margin-bottom: 16px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.cl-hero-text p {
font-size: 1.2rem;
color: white;
margin-bottom: 24px;
}
.cl-hero-text ul {
list-style: none;
padding: 0;
margin: 0;
}
.cl-hero-text ul li {
color: white;
font-size: 1rem;
margin-bottom: 12px;
padding-left: 28px;
position: relative;
}
.cl-hero-text ul li::before {
content: '\f00c';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
left: 0;
color: #4ade80;
}
.cl-form-container {
flex: 1;
min-width: 320px;
max-width: 450px;
}
.cl-form-card {
background: white;
border-radius: 16px;
padding: 36px;
box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}
.cl-form-title {
font-size: 1.5rem;
font-weight: 600;
text-align: center;
margin-bottom: 24px;
color: #1a202c;
}
.cl-input-group {
margin-bottom: 18px;
}
.cl-label {
display: block;
font-size: 13px;
font-weight: 500;
color: #4a5568;
margin-bottom: 6px;
}
.cl-input {
width: 100%;
padding: 12px 14px;
font-size: 15px;
border: 2px solid #e2e8f0;
border-radius: 8px;
transition: all 0.2s;
outline: none;
}
.cl-input:focus {
border-color: #20366a;
box-shadow: 0 0 0 3px rgba(32, 54, 106, 0.1);
}
.cl-input.valid {
border-color: #22c55e;
}
.cl-input.invalid {
border-color: #ef4444;
}
.cl-checkbox-group {
margin-bottom: 16px;
}
.cl-checkbox-label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: 13px;
color: #4a5568;
line-height: 1.4;
}
.cl-checkbox-label input[type="checkbox"] {
margin-top: 3px;
flex-shrink: 0;
}
.cl-checkbox-label a {
color: #2952a3;
text-decoration: underline;
}
.cl-submit-btn {
width: 100%;
padding: 14px 24px;
font-size: 16px;
font-weight: 600;
color: white;
background: #20366a;
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.cl-submit-btn:hover {
background: #162849;
}
.cl-submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.cl-error {
color: #ef4444;
font-size: 14px;
margin-top: 12px;
text-align: center;
display: none;
}
.cl-error.show {
display: block;
}
.cl-spinner {
display: none;
text-align: center;
padding: 40px;
}
/* Marketing sections */
.bg-mca-blue {
background-color: #20366a !important;
}
.bg-blue {
background-color: #20366a;
}
.color-blue {
color: #2952a3;
}
.fw-600 {
font-weight: 600;
}
.fw-700 {
font-weight: 700;
}
.text-white {
color: white;
}
.text-center {
text-align: center;
}
.asheardontext {
color: #6c757d;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
}
.ahoimg {
max-width: 100px;
height: auto;
opacity: 0.7;
}
.stepsiconbg {
background: #2952a3;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.stepsiconsize {
color: white;
font-size: 24px;
}
.whitecard {
background: white;
box-shadow: inset 0 0 0 1px #e3e3e8;
border-radius: 20px 0 20px 20px;
padding: 35px 20px;
text-align: center;
height: 100%;
transition: all 0.4s;
}
.whitecard:hover {
box-shadow: inset 0 0 0 1px var(--brand), 0 8px 24px rgba(32,54,106,0.12);
transform: translateY(-4px);
}
.whitecardtitle {
font-weight: 600;
font-size: 1.25rem;
margin-bottom: 15px;
color: #1a202c;
}
.bluecardicon {
margin-bottom: 20px;
display: flex;
justify-content: center;
}
.bluecardicon img {
width: 80px;
height: 80px;
}
.btn-white {
background-color: white;
color: #2952a3;
border-radius: 12px;
padding: 12px 32px;
text-decoration: none;
display: inline-block;
font-weight: 600;
border: none;
}
.testimonial-card {
background: white;
border-radius: 16px;
padding: 24px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
height: 100%;
}
.testimonial-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.testimonial-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.testimonial-name {
font-weight: 600;
color: #20366a;
margin-bottom: 4px;
}
.testimonial-stars {
color: #fbbf24;
}
.testimonial-title {
font-weight: 600;
color: #20366a;
margin-bottom: 8px;
}
.testimonial-text {
color: #4a5568;
font-size: 14px;
line-height: 1.6;
}
.testimonial-date {
color: #20366a;
font-size: 13px;
margin-top: 12px;
}
@media (max-width: 991px) {
.cl-hero-content {
flex-direction: column;
text-align: center;
}
.cl-hero-text {
max-width: 100%;
}
.cl-hero-text ul li {
text-align: left;
}
.cl-form-container {
max-width: 100%;
width: 100%;
}
}
/* ============================================
RENEWAL PAGE STYLES
Extracted from renewal.html
============================================ */
/* --- Hero --- */
.rnw-hero {
background: linear-gradient(135deg, #1a2e4a 0%, #1e3a5f 30%, #162849 100%);
padding: 32px 0 36px;
position: relative;
overflow: hidden;
}
.rnw-hero-dots {
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
background-size: 24px 24px;
pointer-events: none;
}
.rnw-hero-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 40px;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.rnw-hero-text {
flex: 1;
min-width: 300px;
max-width: 500px;
}
.rnw-hero-text h1 {
font-size: 2.25rem;
font-weight: 700;
color: #fff;
margin-bottom: 10px;
line-height: 1.2;
}
.rnw-hero-text h1 span {
color: #60a5fa;
}
.rnw-hero-text > p {
font-size: 1.05rem;
color: rgba(255,255,255,0.8);
margin-bottom: 14px;
line-height: 1.5;
}
/* Feature pills */
.rnw-features {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.rnw-feature-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 9999px;
color: rgba(255,255,255,0.92);
font-size: 14px;
font-weight: 500;
}
.rnw-feature-pill i {
width: 14px;
height: 14px;
color: #60a5fa;
}
/* Trust badges */
.rnw-trust-row {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.rnw-trust-row .trustpilot-widget {
flex-shrink: 0;
}
.rnw-bbb-badge {
border: 0;
height: 48px;
flex-shrink: 0;
}
.rnw-trust-badge {
display: flex;
align-items: center;
gap: 6px;
color: rgba(255,255,255,0.7);
font-size: 14px;
}
.rnw-trust-badge strong {
color: #fff;
font-weight: 700;
}
/* Social proof - reuse hero-social-proof classes, override colors for dark hero */
.rnw-hero .hero-social-proof-avatars span {
border-color: #162849;
}
.rnw-hero .hero-social-proof-text {
color: rgba(255,255,255,0.6);
}
.rnw-hero .hero-social-proof-text strong {
color: #fff;
}
/* Form card */
.rnw-form-container {
flex: 1;
min-width: 320px;
max-width: 450px;
}
.rnw-form-card {
background: #fff;
border-radius: 12px;
padding: 28px;
box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}
.rnw-form-title {
font-size: 1.35rem;
font-weight: 700;
color: #1a202c;
text-align: center;
margin-bottom: 18px;
}
.rnw-field {
margin-bottom: 14px;
}
.rnw-field label {
display: block;
font-size: 13px;
font-weight: 500;
color: #4a5568;
margin-bottom: 6px;
}
.rnw-field input[type="text"],
.rnw-field input[type="email"],
.rnw-field input[type="tel"] {
width: 100%;
padding: 10px 12px;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 15px;
font-family: inherit;
color: #1a202c;
background: #fff;
transition: all 0.2s ease;
box-sizing: border-box;
outline: none;
}
.rnw-field input:focus {
border-color: #20366a;
box-shadow: 0 0 0 3px rgba(32, 54, 106, 0.1);
}
.rnw-field input.valid { border-color: #22c55e; }
.rnw-field input.invalid { border-color: #ef4444; }
.rnw-check {
margin-bottom: 10px;
}
.rnw-check label {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
color: #4a5568;
line-height: 1.4;
cursor: pointer;
}
.rnw-check input[type="checkbox"] {
margin-top: 3px;
flex-shrink: 0;
}
.rnw-check a {
color: #2952a3;
text-decoration: underline;
}
.rnw-captcha {
margin: 10px 0;
display: flex;
justify-content: center;
}
.rnw-submit {
width: 100%;
padding: 12px 24px;
background: #20366a;
color: #fff;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.3s ease;
font-family: inherit;
margin-top: 14px;
}
.rnw-submit:hover { background: #162849; }
.rnw-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.rnw-submit i { width: 16px; height: 16px; }
.rnw-ssl {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-top: 12px;
font-size: 12px;
color: #94a3b8;
}
.rnw-ssl i { width: 12px; height: 12px; color: #22c55e; }
.rnw-error {
color: #ef4444;
font-size: 14px;
text-align: center;
margin-top: 12px;
display: none;
}
.rnw-error.show { display: block; }
.rnw-spinner {
display: none;
text-align: center;
padding: 40px;
}
/* --- Why Renew Now --- */
.rnw-benefits {
padding: 75px 0;
background: #fff;
}
.rnw-section-title {
font-size: 28px;
font-weight: 700;
color: #1a202c;
text-align: center;
margin-bottom: 8px;
}
.rnw-section-title span {
color: #2952a3;
}
.rnw-section-sub {
text-align: center;
color: #64748b;
font-size: 16px;
margin-bottom: 48px;
}
.rnw-benefits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.rnw-benefit-card {
background: #fff;
border-radius: 12px;
padding: 32px 28px;
box-shadow: inset 0 0 0 1px #e8ecf2;
transition: all 0.3s ease;
}
.rnw-benefit-card:hover {
box-shadow: inset 0 0 0 1px var(--brand), 0 8px 24px rgba(32,54,106,0.12);
transform: translateY(-4px);
}
.rnw-benefit-label {
display: inline-block;
padding: 5px 14px;
background: #20366a;
color: #fff;
border-radius: 9999px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: 18px;
}
.rnw-benefit-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #e8f0fe 0%, #f0f4ff 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.rnw-benefit-icon i {
width: 24px;
height: 24px;
color: #20366a;
}
.rnw-benefit-card h3 {
font-size: 20px;
font-weight: 700;
color: #1a202c;
margin-bottom: 10px;
}
.rnw-benefit-card p {
font-size: 15px;
color: #64748b;
line-height: 1.6;
}
/* --- How It Works --- */
.rnw-how {
padding: 75px 0;
background: #fff;
}
.rnw-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
position: relative;
max-width: 800px;
margin: 0 auto;
}
.rnw-steps::before {
content: '';
position: absolute;
top: 30px;
left: calc(16.67% + 28px);
right: calc(16.67% + 28px);
height: 2px;
background: #e2e8f0;
}
.rnw-step {
text-align: center;
position: relative;
}
.rnw-step-num {
width: 60px;
height: 60px;
background: #20366a;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
margin: 0 auto 18px;
position: relative;
z-index: 1;
}
.rnw-step h3 {
font-size: 18px;
font-weight: 700;
color: #1a202c;
margin-bottom: 8px;
}
.rnw-step p {
font-size: 14px;
color: #64748b;
line-height: 1.6;
}
/* --- Apply: Why LendSeek (Trust) --- */
.apply-trust {
padding: 75px 0;
background: #fff;
}
.apply-trust-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
max-width: 1020px;
margin: 0 auto;
}
.apply-trust-left h2 {
font-size: 28px;
font-weight: 700;
color: #1a202c;
line-height: 1.3;
margin: 0 0 14px;
}
.apply-trust-left h2 span {
color: #2952a3;
}
.apply-trust-left > p {
font-size: 16px;
color: #64748b;
line-height: 1.6;
margin: 0 0 36px;
}
.apply-trust-numbers {
display: flex;
align-items: center;
gap: 24px;
}
.apply-trust-num {
text-align: center;
}
.apply-trust-num-value {
display: block;
font-size: 28px;
font-weight: 800;
color: #20366a;
line-height: 1;
margin-bottom: 4px;
}
.apply-trust-num-label {
font-size: 13px;
color: #64748b;
font-weight: 500;
}
.apply-trust-num-divider {
width: 1px;
height: 36px;
background: #e2e8f0;
flex-shrink: 0;
}
.apply-trust-right {
display: flex;
flex-direction: column;
gap: 20px;
}
.apply-trust-item {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 20px;
border-radius: 12px;
box-shadow: inset 0 0 0 1px #e8ecf2;
transition: all 0.3s ease;
}
.apply-trust-item:hover {
box-shadow: inset 0 0 0 1px var(--brand), 0 8px 24px rgba(32,54,106,0.12);
transform: translateY(-4px);
}
.apply-trust-item-icon {
width: 44px;
height: 44px;
background: linear-gradient(135deg, #e8f0fe 0%, #f0f4ff 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.apply-trust-item-icon i,
.apply-trust-item-icon svg {
width: 22px;
height: 22px;
color: #20366a;
}
.apply-trust-item-text h3 {
font-size: 16px;
font-weight: 700;
color: #1a202c;
margin: 0 0 4px;
}
.apply-trust-item-text p {
font-size: 14px;
color: #64748b;
line-height: 1.5;
margin: 0;
}
.apply-trust-quote {
margin-top: 28px;
padding: 24px;
background: #f8fafc;
border-radius: 12px;
box-shadow: inset 0 0 0 1px #e8ecf2;
}
.apply-trust-quote-stars {
display: flex;
gap: 2px;
margin-bottom: 12px;
}
.apply-trust-quote-stars i,
.apply-trust-quote-stars svg {
width: 16px;
height: 16px;
color: #f59e0b;
fill: #f59e0b;
}
.apply-trust-quote p {
font-size: 15px;
color: #334155;
line-height: 1.6;
font-style: italic;
margin: 0 0 16px;
}
.apply-trust-quote-author {
display: flex;
align-items: center;
gap: 10px;
}
.apply-trust-quote-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: #20366a;
color: #fff;
font-size: 13px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.apply-trust-quote-name {
display: block;
font-size: 14px;
font-weight: 700;
color: #1a202c;
}
.apply-trust-quote-role {
display: block;
font-size: 12px;
color: #64748b;
}
.apply-trust-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 24px;
padding: 14px 28px;
background: #20366a;
color: #fff;
font-size: 15px;
font-weight: 700;
border-radius: 9999px;
text-decoration: none;
transition: all 0.3s ease;
}
.apply-trust-cta:hover {
background: #162849;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(32, 54, 106, 0.25);
color: #fff;
}
.apply-trust-cta i,
.apply-trust-cta svg {
width: 18px;
height: 18px;
}
@media (max-width: 768px) {
.apply-trust-layout {
grid-template-columns: 1fr;
gap: 40px;
}
.apply-trust-left {
text-align: center;
}
.apply-trust-left h2 {
font-size: 24px;
}
.apply-trust-numbers {
justify-content: center;
}
.apply-trust-quote-stars {
justify-content: center;
}
.apply-trust-quote-author {
justify-content: center;
}
.apply-trust-cta {
width: 100%;
justify-content: center;
}
}
/* --- Capital Uses --- */
.rnw-uses {
padding: 75px 0;
background: #fff;
}
.rnw-uses-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.rnw-use-card {
background: #fff;
border-radius: 12px;
padding: 35px 20px;
text-align: center;
height: 100%;
box-shadow: inset 0 0 0 1px #e8ecf2;
transition: all 0.3s ease;
}
.rnw-use-card:hover {
box-shadow: inset 0 0 0 1px var(--brand), 0 8px 24px rgba(32,54,106,0.12);
transform: translateY(-4px);
}
.rnw-use-icon {
width: 72px;
height: 72px;
background: linear-gradient(135deg, #e8f0fe 0%, #f0f4ff 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.rnw-use-icon i {
width: 32px;
height: 32px;
color: #20366a;
}
.rnw-use-card h3 {
font-size: 20px;
font-weight: 700;
color: #1a202c;
margin-bottom: 15px;
}
.rnw-use-card p {
font-size: 14px;
color: #64748b;
line-height: 1.6;
}
/* --- Compare Table --- */
.rnw-compare {
padding: 75px 0;
background: #f8fafc;
}
.rnw-compare-sub {
text-align: center;
color: #64748b;
font-size: 16px;
margin-bottom: 40px;
}
.rnw-table-wrap {
max-width: 900px;
margin: 0 auto;
background: #fff;
border-radius: 20px;
overflow: hidden;
border: 1px solid #cbd5e1;
}
.rnw-table {
width: 100%;
border-collapse: collapse;
}
.rnw-table th {
background: #20366a;
color: #fff;
padding: 20px;
text-align: center;
font-weight: 700;
font-size: 16px;
}
.rnw-table th:first-child {
text-align: left;
}
.rnw-table th.hl {
background: #2952a3;
}
.rnw-table td {
padding: 18px 20px;
border-bottom: 1px solid #e2e8f0;
font-size: 15px;
text-align: center;
color: #475569;
}
.rnw-table td:first-child {
text-align: left;
font-weight: 600;
color: #1a202c;
}
.rnw-table td.hl {
color: #20366a;
font-weight: 700;
}
.rnw-table tr:last-child td {
border-bottom: none;
}
.rnw-table tr:nth-child(even) {
background: #f8fafc;
}
.rnw-table .t-check { color: #22c55e; }
.rnw-table .t-x { color: #ef4444; }
.rnw-table .t-check i,
.rnw-table .t-x i {
width: 18px;
height: 18px;
vertical-align: middle;
}
/* --- Thinking It Over --- */
.rnw-thinking {
padding: 75px 0;
background: #fff;
}
.rnw-thinking-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.rnw-thinking-card {
background: #fff;
border-radius: 16px;
padding: 28px;
box-shadow: 0 4px 20px rgba(32, 54, 106, 0.08);
transition: all 0.3s ease;
}
.rnw-thinking-card:hover {
box-shadow: inset 0 0 0 1px var(--brand), 0 8px 24px rgba(32,54,106,0.12);
transform: translateY(-4px);
}
.rnw-thinking-card .quote-icon {
color: #3b82f6;
margin-bottom: 12px;
}
.rnw-thinking-card .quote-icon i {
width: 24px;
height: 24px;
}
.rnw-thinking-card h3 {
font-size: 15px;
font-weight: 700;
color: #20366a;
margin-bottom: 10px;
}
.rnw-thinking-card p {
font-size: 14px;
color: #64748b;
line-height: 1.6;
}
/* --- Testimonials --- */
/* --- Reviews Section --- */
.rnw-reviews {
padding: 75px 0;
background: #f8fafc;
}
.rnw-reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.rnw-review-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #e9f1ff 0%, #d0e1ff 100%);
color: #20366a;
font-size: 15px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* --- Quick Questions: uses standard .faq-* from design system --- */
/* --- CTA: uses standard .cta-section from design system --- */
/* --- Urgency Banner --- */
.rnw-urgency-bar {
background: linear-gradient(90deg, #b45309, #d97706);
padding: 10px 0;
position: relative;
z-index: 10;
}
.rnw-urgency-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #fff;
font-size: 14px;
font-weight: 500;
flex-wrap: wrap;
}
.rnw-urgency-inner i {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.rnw-urgency-inner strong {
font-weight: 700;
}
.rnw-urgency-sep {
opacity: 0.5;
margin: 0 4px;
}
/* --- Personalized Amount Teaser --- */
.rnw-amount-teaser {
background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(59, 130, 246, 0.08) 100%);
border: 1px solid rgba(96, 165, 250, 0.2);
border-radius: 14px;
padding: 18px 22px;
margin-bottom: 18px;
position: relative;
overflow: hidden;
}
.rnw-amount-teaser::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #60a5fa, #a78bfa, #60a5fa);
}
.rnw-amount-teaser-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
color: #a78bfa;
margin-bottom: 6px;
}
.rnw-amount-teaser-badge i {
width: 13px;
height: 13px;
}
.rnw-amount-teaser-value {
font-size: 20px;
font-weight: 800;
color: #fff;
line-height: 1.2;
margin-bottom: 4px;
}
.rnw-amount-teaser-label {
font-size: 13px;
color: rgba(255,255,255,0.55);
line-height: 1.4;
}
/* --- Form subtitle --- */
.rnw-form-subtitle {
font-size: 13px;
color: #64748b;
text-align: center;
margin-bottom: 16px;
line-height: 1.4;
}
/* --- Form field row (side by side) --- */
.rnw-field-row {
display: flex;
gap: 12px;
}
.rnw-field-row .rnw-field {
flex: 1;
}
/* --- What happens next --- */
.rnw-next-step {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 12px;
padding: 10px;
background: #f0fdf4;
border-radius: 8px;
font-size: 13px;
color: #166534;
font-weight: 500;
}
.rnw-next-step i {
width: 16px;
height: 16px;
color: #22c55e;
flex-shrink: 0;
}
/* --- Phone CTA below form --- */
.rnw-form-phone {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #e2e8f0;
font-size: 14px;
color: #64748b;
}
.rnw-form-phone a {
display: inline-flex;
align-items: center;
gap: 5px;
color: #20366a;
font-weight: 600;
text-decoration: none;
}
.rnw-form-phone a:hover {
color: #2952a3;
}
.rnw-form-phone a i {
width: 14px;
height: 14px;
}
/* --- Review tag --- */
.rnw-review-tag {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 12px;
padding: 4px 12px;
background: #eff6ff;
border-radius: 9999px;
font-size: 12px;
font-weight: 600;
color: #2952a3;
}
.rnw-review-tag i {
width: 12px;
height: 12px;
}
/* --- Agent Banner --- */
.rnw-agent-banner {
background: linear-gradient(135deg, #1a2e4a 0%, #20366a 100%);
padding: 50px 0;
position: relative;
overflow: hidden;
}
.rnw-agent-banner::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 20px 20px;
pointer-events: none;
}
.rnw-agent-banner-header {
text-align: center;
margin-bottom: 36px;
position: relative;
}
.rnw-agent-banner-header h2 {
font-size: 26px;
font-weight: 700;
color: #fff;
margin-bottom: 8px;
}
.rnw-agent-banner-header h2 span {
color: #60a5fa;
}
.rnw-agent-banner-header p {
font-size: 15px;
color: rgba(255,255,255,0.6);
}
.rnw-agent-banner-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
position: relative;
}
.rnw-agent-banner-item {
display: flex;
align-items: flex-start;
gap: 14px;
}
.rnw-agent-banner-item > i {
width: 40px;
height: 40px;
padding: 8px;
background: rgba(96, 165, 250, 0.15);
border-radius: 10px;
color: #60a5fa;
flex-shrink: 0;
}
.rnw-agent-banner-item strong {
display: block;
font-size: 15px;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
}
.rnw-agent-banner-item span {
font-size: 13px;
color: rgba(255,255,255,0.55);
line-height: 1.5;
}
/* --- Exit Intent Overlay --- */
.rnw-exit-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.rnw-exit-overlay.visible {
opacity: 1;
pointer-events: auto;
}
.rnw-exit-card {
background: #fff;
border-radius: 20px;
padding: 40px;
max-width: 460px;
width: 90%;
text-align: center;
position: relative;
transform: scale(0.9);
transition: transform 0.3s ease;
}
.rnw-exit-overlay.visible .rnw-exit-card {
transform: scale(1);
}
.rnw-exit-close {
position: absolute;
top: 14px;
right: 18px;
background: none;
border: none;
font-size: 28px;
color: #94a3b8;
cursor: pointer;
line-height: 1;
}
.rnw-exit-close:hover { color: #475569; }
.rnw-exit-icon {
margin-bottom: 16px;
}
.rnw-exit-icon i {
width: 48px;
height: 48px;
color: #d97706;
}
.rnw-exit-card h3 {
font-size: 22px;
font-weight: 700;
color: #1a202c;
margin-bottom: 10px;
}
.rnw-exit-card p {
font-size: 15px;
color: #64748b;
line-height: 1.6;
margin-bottom: 24px;
}
.rnw-exit-btn {
display: inline-block;
padding: 14px 32px;
background: #20366a;
color: #fff;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: background 0.2s ease;
}
.rnw-exit-btn:hover { background: #162849; color: #fff; }
.rnw-exit-sub {
display: block;
margin-top: 12px;
font-size: 13px;
color: #94a3b8;
}
/* --- Sticky Mobile CTA Bar --- */
.rnw-sticky-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid #e2e8f0;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 10px;
z-index: 999;
transform: translateY(100%);
transition: transform 0.3s ease;
box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}
.rnw-sticky-bar.visible {
transform: translateY(0);
}
.rnw-sticky-phone {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: #f0fdf4;
border-radius: 12px;
color: #22c55e;
flex-shrink: 0;
text-decoration: none;
}
.rnw-sticky-phone i {
width: 22px;
height: 22px;
}
.rnw-sticky-btn {
flex: 1;
padding: 14px 20px;
background: #20366a;
color: #fff;
border: none;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
transition: background 0.2s ease;
}
.rnw-sticky-btn:hover { background: #162849; }
/* --- Renewal Responsive --- */
@media (max-width: 991px) {
.rnw-hero-content {
flex-direction: column;
text-align: center;
}
.rnw-hero-text { max-width: 100%; }
.rnw-form-container { max-width: 100%; width: 100%; }
.rnw-features { justify-content: center; }
.rnw-trust-row { justify-content: center; }
.rnw-hero .hero-social-proof { justify-content: center; }
.rnw-amount-teaser { text-align: center; }
.rnw-benefits-grid,
.rnw-steps,
.rnw-reviews-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.rnw-agent-banner-row {
grid-template-columns: 1fr;
gap: 24px;
}
.rnw-steps::before { display: none; }
.rnw-uses-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.rnw-hero { padding: 40px 0 50px; min-height: auto; }
.rnw-hero-text h1 { font-size: 2rem; }
.rnw-uses-grid,
.rnw-thinking-grid { grid-template-columns: 1fr; }
.rnw-table { font-size: 13px; }
.rnw-table thead th,
.rnw-table tbody td { padding: 12px 10px; }
.rnw-section-title { font-size: 1.625rem; }
.rnw-field-row { flex-direction: column; gap: 0; }
.rnw-urgency-sep { display: none; }
.rnw-urgency-inner { flex-direction: column; gap: 4px; text-align: center; }
.rnw-amount-teaser-value { font-size: 18px; }
/* Hide sticky bar on desktop, show on mobile */
.rnw-sticky-bar { display: flex; }
}
@media (min-width: 768px) {
.rnw-sticky-bar { display: none; }
}
/* ============================================
APPLY PAGE STYLES
Extracted from apply.html and applypromo.html
============================================ */
/* Apply.html styles */
/* Apply Page Styles - Matching Site Theme */
/* Legacy apply-section (kept for backwards compat) */
.apply-section {
background: var(--bg-alt);
padding: 40px 0 80px;
}
.apply-layout {
display: grid;
grid-template-columns: 1fr 340px;
gap: 32px;
max-width: 1100px;
margin: 0 auto;
}
.apply-form-card {
background: var(--bg);
border-radius: 20px;
padding: 40px;
-webkit-box-shadow: inset 0 0 0 1px var(--card-border);
box-shadow: inset 0 0 0 1px var(--card-border);
}
/* Form fills card */
.apply-hero-form-card > form {
flex: 1;
display: flex;
flex-direction: column;
}
/* Step Content */
.apply-step {
display: none;
animation: fadeIn 0.3s ease;
flex: 1;
flex-direction: column;
}
.apply-step.active {
display: flex;
}
.apply-step .step-buttons {
margin-top: auto;
padding-top: 16px;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.step-header {
text-align: center;
margin-bottom: 20px;
}
/* Step Icon - matching site icon-circle pattern */
.step-icon {
width: 48px;
height: 48px;
background: var(--brand);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
}
.step-icon svg {
width: 22px;
height: 22px;
stroke: #fff;
stroke-width: 1.75px;
}
.step-icon.success {
background: var(--brand);
}
.step-icon.success svg {
stroke: #fff;
}
.step-header h2 {
font-size: 20px;
font-weight: 700;
color: var(--text);
margin: 0 0 4px;
}
.step-subtitle {
font-size: 14px;
color: var(--muted);
margin: 0;
}
/* Radio Cards (Step 0) - matching site card pattern */
.apply-radio-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.apply-radio-card {
position: relative;
cursor: pointer;
}
.apply-radio-card input {
position: absolute;
opacity: 0;
}
.radio-card-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 28px 20px;
background: var(--bg);
border-radius: 20px;
-webkit-box-shadow: inset 0 0 0 1px var(--card-border);
box-shadow: inset 0 0 0 1px var(--card-border);
transition: all 0.4s ease;
text-align: center;
}
.radio-card-content svg {
width: 32px;
height: 32px;
stroke: var(--brand);
}
.radio-card-title {
font-size: 16px;
font-weight: 700;
color: var(--text);
}
.radio-card-desc {
font-size: 13px;
color: var(--muted);
}
.radio-check {
position: absolute;
top: 12px;
right: 12px;
width: 24px;
height: 24px;
background: var(--brand);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.5);
transition: all 0.2s ease;
}
.radio-check svg {
width: 14px;
height: 14px;
stroke: #fff;
stroke-width: 3;
}
.apply-radio-card:hover .radio-card-content {
-webkit-box-shadow: inset 0 0 0 2px var(--brand);
box-shadow: inset 0 0 0 2px var(--brand);
transform: translateY(-4px);
}
.apply-radio-card input:checked + .radio-card-content {
-webkit-box-shadow: inset 0 0 0 2px var(--brand);
box-shadow: inset 0 0 0 2px var(--brand);
background: #eef3ff;
}
.apply-radio-card input:checked ~ .radio-check {
opacity: 1;
transform: scale(1);
}
/* Options Grid (Steps 2-4) - matching site card pattern */
.apply-options-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.apply-options-grid.cols-1 {
grid-template-columns: 1fr;
}
.apply-options-grid.cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.apply-option {
position: relative;
cursor: pointer;
}
.apply-option input {
position: absolute;
opacity: 0;
}
.apply-option span {
display: flex;
align-items: center;
justify-content: center;
padding: 14px 16px;
min-height: 48px;
background: var(--bg);
border-radius: 10px;
-webkit-box-shadow: inset 0 0 0 1px var(--card-border);
box-shadow: inset 0 0 0 1px var(--card-border);
font-size: 14px;
font-weight: 600;
color: var(--text);
text-align: center;
transition: all 0.2s ease;
position: relative;
}
.apply-option:hover span {
-webkit-box-shadow: inset 0 0 0 2px var(--brand);
box-shadow: inset 0 0 0 2px var(--brand);
transform: translateY(-2px);
}
.apply-option input:checked + span {
background: #eef3ff;
-webkit-box-shadow: inset 0 0 0 2px var(--brand);
box-shadow: inset 0 0 0 2px var(--brand);
color: var(--brand);
}
.apply-option input:checked + span::after {
content: '';
position: absolute;
top: 6px;
right: 6px;
width: 18px;
height: 18px;
background: var(--brand);
border-radius: 50%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 10px;
animation: optionCheck 0.2s ease;
}
@keyframes optionCheck {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
.apply-option.full-width {
grid-column: 1 / -1;
}
/* Input Groups */
.apply-input-group {
margin-bottom: 14px;
}
.apply-label {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--text);
margin-bottom: 5px;
}
.apply-input {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 15px;
color: var(--text);
transition: all 0.3s ease;
background: var(--bg);
}
.apply-input:focus {
outline: none;
border-color: var(--brand);
-webkit-box-shadow: 0 0 0 3px rgba(32, 54, 106, 0.1);
box-shadow: 0 0 0 3px rgba(32, 54, 106, 0.1);
}
.apply-input.valid {
border-color: var(--brand);
}
.apply-input.invalid {
border-color: #dc3545;
}
.input-with-icon {
position: relative;
}
.input-prefix {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
font-weight: 600;
color: var(--muted);
}
.input-with-icon .apply-input {
padding-left: 36px;
}
.input-hint {
display: block;
font-size: 13px;
color: var(--muted);
margin-top: 6px;
}
/* Funding Amount Slider */
.funding-display {
font-size: 32px;
font-weight: 800;
color: var(--brand);
text-align: center;
margin-bottom: 16px;
line-height: 1;
}
.funding-slider {
position: relative;
width: 100%;
height: 40px;
cursor: pointer;
touch-action: none;
-webkit-user-select: none;
user-select: none;
}
.funding-slider__track {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 6px;
margin-top: -3px;
background: #e2e8f0;
border-radius: 3px;
overflow: hidden;
}
.funding-slider__fill {
height: 100%;
background: var(--brand);
border-radius: 3px;
width: 0.8%;
}
.funding-slider__thumb {
position: absolute;
top: 50%;
width: 28px;
height: 28px;
margin-top: -14px;
margin-left: -14px;
background: var(--brand);
border-radius: 50%;
box-shadow: 0 0 0 4px #fff, 0 2px 8px rgba(0,0,0,0.18);
cursor: grab;
transition: box-shadow 0.15s ease;
left: 0.8%;
}
.funding-slider__thumb:hover {
box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(32, 54, 106, 0.1), 0 2px 8px rgba(0,0,0,0.18);
}
.funding-slider__thumb:active,
.funding-slider__thumb.dragging {
cursor: grabbing;
box-shadow: 0 0 0 4px #fff, 0 0 0 10px rgba(32, 54, 106, 0.15), 0 4px 12px rgba(0,0,0,0.22);
}
.funding-range-labels {
display: flex;
justify-content: space-between;
font-size: 12px;
color: var(--muted);
font-weight: 600;
margin-bottom: 14px;
}
.funding-input-row {
border-top: 1px solid var(--border);
padding-top: 12px;
}
.funding-input-row .apply-label {
font-size: 13px;
color: var(--muted);
font-weight: 500;
margin-bottom: 6px;
}
/* Form Grid */
.apply-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
/* Checkboxes */
.apply-checkbox-group {
margin-bottom: 10px;
}
.apply-checkbox {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.apply-checkbox input {
position: absolute;
opacity: 0;
}
.checkbox-mark {
width: 18px;
height: 18px;
border: 2px solid var(--border);
border-radius: 4px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
background: var(--bg);
}
.apply-checkbox input:checked + .checkbox-mark {
background: var(--brand);
border-color: var(--brand);
}
.apply-checkbox input:checked + .checkbox-mark::after {
content: '✓';
color: #fff;
font-size: 14px;
font-weight: 700;
}
.checkbox-text {
font-size: 12px;
color: var(--muted);
line-height: 1.5;
}
.checkbox-text a {
color: var(--brand);
text-decoration: none;
font-weight: 600;
}
.checkbox-text a:hover {
text-decoration: underline;
}
/* Turnstile */
.turnstile-container {
margin: 24px 0;
display: flex;
justify-content: center;
}
/* Buttons - matching site button pattern */
.step-buttons {
display: flex;
gap: 10px;
margin-top: 16px;
}
.apply-btn-next,
.apply-btn-submit {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 24px;
background: var(--brand);
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 700;
color: #fff;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(32, 54, 106, 0.25);
}
.apply-btn-next:hover,
.apply-btn-submit:hover {
background: #2952a3;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(32, 54, 106, 0.35);
}
.apply-btn-next svg,
.apply-btn-submit svg {
width: 18px;
height: 18px;
}
/* Error Messages */
.apply-error {
color: #dc3545;
font-size: 14px;
font-weight: 500;
margin-top: 12px;
text-align: center;
display: none;
}
.apply-error.show {
display: block;
animation: shake 0.3s ease;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
/* Spinner */
.apply-spinner {
display: none;
text-align: center;
padding: 60px 20px;
}
.spinner {
width: 48px;
height: 48px;
border: 4px solid var(--border);
border-top-color: var(--brand);
border-radius: 50%;
margin: 0 auto 20px;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Inline button spinner (inside submit buttons during verification) */
.btn-spinner {
display: inline-block;
width: 18px;
height: 18px;
border: 3px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.7s linear infinite;
vertical-align: middle;
margin-right: 6px;
}
/* Lock form inputs while verifying/submitting */
.form-locked input,
.form-locked textarea,
.form-locked select,
.form-locked .mca-checkbox-label,
.form-locked .apply-checkbox,
.form-locked label,
.form-locked .rnw-check label {
pointer-events: none;
opacity: 0.55;
}
.apply-spinner p {
font-size: 18px;
font-weight: 600;
color: var(--text);
margin: 0 0 8px;
}
.apply-spinner span {
font-size: 14px;
color: var(--muted);
}
/* Sidebar - matching site card pattern */
.apply-sidebar {
display: flex;
flex-direction: column;
gap: 20px;
}
.sidebar-card {
background: var(--bg);
border-radius: 20px;
padding: 2.2rem 1.2rem;
-webkit-box-shadow: inset 0 0 0 1px var(--card-border);
box-shadow: inset 0 0 0 1px var(--card-border);
transition: all 0.4s ease;
}
.sidebar-card:hover {
-webkit-box-shadow: inset 0 0 0 1px var(--brand), 0 8px 24px rgba(32,54,106,0.12);
box-shadow: inset 0 0 0 1px var(--brand), 0 8px 24px rgba(32,54,106,0.12);
transform: translateY(-4px);
}
.sidebar-card h3 {
display: flex;
align-items: center;
gap: 10px;
font-size: 17px;
font-weight: 700;
color: var(--text);
margin: 0 0 20px;
}
.sidebar-card h3 svg {
width: 20px;
height: 20px;
stroke: var(--brand);
}
.sidebar-benefits {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar-benefits li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.sidebar-benefits li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.sidebar-benefits li > svg {
width: 20px;
height: 20px;
stroke: var(--brand);
flex-shrink: 0;
margin-top: 2px;
}
.sidebar-benefits strong {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text);
margin-bottom: 2px;
}
.sidebar-benefits span {
font-size: 13px;
color: var(--muted);
}
/* Stats - matching site stat-box pattern */
.sidebar-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.sidebar-stat {
background: var(--bg);
border-radius: 20px;
padding: 16px 12px;
text-align: center;
-webkit-box-shadow: inset 0 0 0 1px var(--card-border);
box-shadow: inset 0 0 0 1px var(--card-border);
transition: all 0.4s ease;
}
.sidebar-stat:hover {
-webkit-box-shadow: inset 0 0 0 1px var(--brand), 0 8px 24px rgba(32,54,106,0.12);
box-shadow: inset 0 0 0 1px var(--brand), 0 8px 24px rgba(32,54,106,0.12);
transform: translateY(-4px);
}
.stat-value {
display: block;
font-size: 22px;
font-weight: 800;
color: var(--brand);
line-height: 1;
margin-bottom: 4px;
}
.stat-label {
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Help Card - matching site cta pattern */
.sidebar-help {
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
border-radius: 20px;
padding: 24px;
display: flex;
align-items: center;
gap: 16px;
color: #fff;
position: relative;
overflow: hidden;
}
.sidebar-help::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') no-repeat bottom;
opacity: .1;
pointer-events: none;
}
.help-icon {
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.15);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
z-index: 1;
}
.help-icon svg {
width: 24px;
height: 24px;
stroke: #fff;
}
.help-content {
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
.help-label {
font-size: 13px;
opacity: 0.85;
margin-bottom: 4px;
}
.help-phone {
font-size: 18px;
font-weight: 700;
color: #fff;
text-decoration: none;
}
.help-phone:hover {
text-decoration: underline;
}
.help-hours {
font-size: 12px;
opacity: 0.7;
margin-top: 2px;
}
/* Security Badge */
.sidebar-security {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
background: var(--bg);
border-radius: 10px;
-webkit-box-shadow: inset 0 0 0 1px var(--card-border);
box-shadow: inset 0 0 0 1px var(--card-border);
font-size: 13px;
font-weight: 600;
color: var(--muted);
}
.sidebar-security svg {
width: 16px;
height: 16px;
stroke: var(--brand);
}
/* Exit Intent Popup */
.exit-popup {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
align-items: center;
justify-content: center;
}
.exit-popup.show {
display: flex;
}
.exit-popup-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
}
.exit-popup-content {
position: relative;
background: var(--bg);
border-radius: 20px;
padding: 40px;
max-width: 480px;
width: 90%;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: popupSlideIn 0.3s ease;
}
@keyframes popupSlideIn {
from {
opacity: 0;
transform: translateY(-20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.exit-popup-close {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border: none;
background: var(--bg-alt);
border-radius: 50%;
font-size: 24px;
line-height: 1;
color: var(--muted);
cursor: pointer;
transition: all 0.2s ease;
}
.exit-popup-close:hover {
background: var(--border);
color: var(--text);
}
.exit-popup-icon {
width: 72px;
height: 72px;
background: linear-gradient(135deg, #fff3cd 0%, #ffeeba 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
}
.exit-popup-icon svg {
width: 36px;
height: 36px;
stroke: #856404;
}
.exit-popup-content h3 {
font-size: 24px;
font-weight: 700;
color: var(--text);
margin: 0 0 12px;
}
.exit-popup-content p {
font-size: 15px;
color: var(--muted);
line-height: 1.6;
margin: 0 0 24px;
}
.exit-popup-stats {
display: flex;
justify-content: center;
gap: 24px;
margin-bottom: 24px;
padding: 16px 0;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.exit-stat {
text-align: center;
}
.exit-stat strong {
display: block;
font-size: 20px;
font-weight: 800;
color: var(--brand);
}
.exit-stat span {
font-size: 12px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.exit-popup-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 16px 32px;
background: var(--brand);
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 700;
color: #fff;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(32, 54, 106, 0.25);
}
.exit-popup-btn:hover {
background: #2952a3;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(32, 54, 106, 0.35);
}
.exit-popup-btn svg {
width: 18px;
height: 18px;
}
.exit-popup-link {
display: block;
margin-top: 16px;
font-size: 13px;
color: var(--muted);
text-decoration: none;
}
.exit-popup-link:hover {
color: var(--text);
text-decoration: underline;
}
/* Responsive */
@media (max-width: 900px) {
.apply-layout {
grid-template-columns: 1fr;
}
.apply-sidebar {
order: -1;
}
.sidebar-card {
display: none;
}
.sidebar-stats {
grid-template-columns: repeat(3, 1fr);
}
.sidebar-help {
display: none;
}
}
@media (max-width: 640px) {
.apply-form-card {
padding: 24px 20px;
}
.apply-radio-group {
grid-template-columns: 1fr;
}
.apply-options-grid,
.apply-options-grid.cols-3 {
grid-template-columns: 1fr;
}
.apply-form-grid {
grid-template-columns: 1fr;
}
.step-buttons {
flex-direction: column;
}
}
/* Applypromo.html additional styles */
/* Homepage utility classes (defined inline on homepage, not in shared CSS)
Uses theme.css variable names: --brand, --muted, --card-border, etc. */
/* Typography utilities */
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.color-blue { color: var(--brand-light, #2952a3); }
.text-dark { color: var(--muted, #64748b); }
/* Cards - matches homepage whitecard pattern */
.whitecard { background: white; box-shadow: inset 0 0 0 1px var(--card-border, #e2e8f0); border-radius: 16px; padding: 35px 20px; text-align: center; height: 100%; transition: all 0.4s; display: flex; flex-direction: column; }
.whitecard .text-dark { flex: 1; }
.whitecard:hover { box-shadow: inset 0 0 0 1px var(--brand), 0 8px 24px rgba(32,54,106,0.12); transform: translateY(-4px); }
.whitecardtitle { font-weight: 600; font-size: 1.2rem; margin-bottom: 12px; color: var(--text, #1a202c); display: flex; align-items: center; justify-content: center; }
/* Buttons - matches homepage btn-blue */
.btn-blue { background: var(--brand, #20366a); color: white; border-radius: 8px; padding: 12px 32px; text-decoration: none; display: inline-block; font-weight: 600; font-size: 15px; border: none; transition: all 0.2s ease; cursor: pointer; box-shadow: 0 2px 8px rgba(32,54,106,0.25); }
.btn-blue:hover { background: var(--brand-light, #2952a3); color: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(32,54,106,0.35); }
/* Section headers */
.heading-style-h5 { font-size: 1.15rem; font-weight: 600; margin-bottom: 8px; color: var(--text, #1a202c); }
/* ============================================
APPLY PAGE - HERO WITH FORM LAYOUT
============================================ */
/* Hero section */
.apply-hero {
background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 30%, #f8fafc 60%, #eef2ff 100%);
padding: 48px 0 56px;
border-bottom: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.apply-hero::before {
content: "";
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(32,54,106,0.04) 0%, transparent 70%);
pointer-events: none;
}
.apply-hero::after {
content: "";
position: absolute;
bottom: -30%;
left: -10%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(59,130,246,0.03) 0%, transparent 70%);
pointer-events: none;
}
/* Two-column grid */
.apply-hero-grid {
display: grid;
grid-template-columns: 1fr 520px;
gap: 48px;
align-items: center;
}
/* Left content column */
.apply-hero-content {
padding-top: 8px;
}
.apply-hero-content h1 {
font-size: var(--text-4xl);
font-weight: var(--font-extrabold);
line-height: var(--leading-tight);
color: var(--text);
margin: 0 0 var(--space-4);
letter-spacing: -0.02em;
}
.apply-hero-subtitle {
font-size: var(--text-lg);
color: var(--muted);
line-height: var(--leading-relaxed);
margin: 0 0 var(--space-6);
max-width: 520px;
}
/* Feature badges */
.apply-hero-badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-8);
}
.apply-hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: var(--bg);
border-radius: var(--radius-full);
box-shadow: inset 0 0 0 1px var(--border), 0 1px 3px rgba(0,0,0,0.04);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--text-secondary);
transition: all var(--transition-base);
}
.apply-hero-badge:hover {
box-shadow: inset 0 0 0 2px var(--brand), 0 2px 8px rgba(32,54,106,0.1);
transform: translateY(-1px);
}
.apply-hero-badge svg,
.apply-hero-badge i {
width: 16px;
height: 16px;
color: var(--brand);
}
/* Testimonial in hero */
.apply-hero-testimonial {
background: var(--bg);
border-radius: 12px;
transition: opacity 0.3s ease;
padding: 20px 24px;
box-shadow: inset 0 0 0 1px var(--border), 0 2px 8px rgba(0,0,0,0.04);
margin-bottom: var(--space-6);
max-width: 460px;
}
.apply-hero-testimonial-stars {
display: flex;
gap: 2px;
margin-bottom: 8px;
}
.apply-hero-testimonial-stars svg {
width: 14px;
height: 14px;
fill: #f59e0b;
stroke: #f59e0b;
stroke-width: 0;
}
.apply-hero-testimonial-quote {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
margin: 0 0 10px;
font-style: italic;
}
.apply-hero-testimonial-author {
display: flex;
align-items: center;
gap: 10px;
}
.apply-hero-testimonial-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: linear-gradient(135deg, #e8f0fe, #d0e1ff);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: var(--font-bold);
color: var(--brand);
}
.apply-hero-testimonial-name {
display: block;
font-size: 13px;
font-weight: var(--font-semibold);
color: var(--text);
}
.apply-hero-testimonial-role {
display: block;
font-size: 12px;
color: var(--muted);
}
/* Social proof */
.apply-hero-social {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: var(--space-5);
}
.apply-hero-social-avatars {
display: flex;
}
.apply-hero-social-avatars span {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--brand);
color: #fff;
font-size: 11px;
font-weight: var(--font-bold);
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #e8f0fe;
margin-left: -8px;
}
.apply-hero-social-avatars span:first-child {
margin-left: 0;
}
.apply-hero-social-text {
font-size: var(--text-sm);
color: var(--muted);
}
.apply-hero-social-text strong {
color: var(--text);
font-weight: var(--font-semibold);
}
/* Phone CTA */
.apply-hero-phone a {
display: inline-flex;
align-items: center;
gap: var(--space-3);
text-decoration: none;
color: inherit;
}
.apply-hero-phone-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg);
border-radius: var(--radius-full);
box-shadow: var(--shadow-md);
}
.apply-hero-phone-icon svg {
width: 18px;
height: 18px;
color: var(--brand);
}
.apply-hero-phone-text {
display: flex;
flex-direction: column;
}
.apply-hero-phone-label {
font-size: var(--text-xs);
color: var(--muted);
}
.apply-hero-phone-number {
font-size: var(--text-base);
font-weight: var(--font-bold);
color: var(--brand);
}
/* Right: Form card wrapper */
.apply-hero-form-wrap {
position: relative;
z-index: 2;
}
/* Form card */
.apply-hero-form-card {
background: var(--bg);
border-radius: 12px;
padding: 32px;
box-shadow: 0 4px 24px rgba(32,54,106,0.1), 0 1px 3px rgba(0,0,0,0.06), inset 0 0 0 1px rgba(255,255,255,0.8);
position: relative;
display: flex;
flex-direction: column;
scroll-margin-top: 80px;
}
/* In-card progress bar */
.apply-card-progress {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border-light);
}
.apply-card-progress-bar {
flex: 1;
display: flex;
align-items: center;
gap: 4px;
}
.apply-card-progress-dot {
flex: 1;
height: 5px;
border-radius: var(--radius-full);
background: var(--border);
transition: background 0.4s ease;
}
.apply-card-progress-dot.completed {
background: var(--brand);
}
.apply-card-progress-dot.active {
background: var(--brand-light);
}
.apply-card-progress-label {
font-size: var(--text-xs);
font-weight: var(--font-bold);
color: var(--muted);
white-space: nowrap;
letter-spacing: 0.03em;
text-transform: uppercase;
}
.apply-card-progress-label span {
color: var(--brand);
}
/* Security badges under form */
.apply-card-security {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border-light);
font-size: 11px;
font-weight: var(--font-semibold);
color: var(--muted);
}
.apply-card-security-item {
display: flex;
align-items: center;
gap: 4px;
}
.apply-card-security-item svg {
width: 13px;
height: 13px;
stroke: var(--brand);
}
.apply-card-security-divider {
width: 1px;
height: 14px;
background: var(--border);
}
/* Responsive - Apply page hero */
@media (max-width: 1100px) {
.apply-hero-grid {
grid-template-columns: 1fr 460px;
gap: 32px;
}
}
@media (max-width: 968px) {
.apply-hero {
padding: 16px 0 24px;
}
.apply-hero-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.apply-hero-content {
text-align: center;
}
.apply-hero-content h1 {
font-size: var(--text-2xl);
margin-bottom: 8px;
}
.apply-hero-subtitle {
max-width: 100%;
margin-left: auto;
margin-right: auto;
font-size: 0.95rem;
margin-bottom: 12px;
}
.apply-hero-badges {
justify-content: center;
margin-bottom: 0;
}
/* Hide non-essential elements on mobile to keep form visible */
.apply-hero-testimonial {
display: none;
}
.apply-hero-social {
display: none;
}
.apply-hero-phone {
display: none;
}
}
@media (max-width: 640px) {
.apply-hero-form-card {
padding: 20px 16px;
}
.apply-hero-content h1 {
font-size: 28px;
}
.apply-hero-badge {
font-size: 12px;
padding: 6px 10px;
}
}
/* Back button */
.apply-btn-back {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
background: transparent;
border: 1px solid var(--border);
border-radius: 8px;
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--muted);
cursor: pointer;
transition: all var(--transition-base);
font-family: inherit;
}
.apply-btn-back:hover {
background: var(--bg-alt);
color: var(--text);
border-color: var(--text-secondary);
}
.apply-btn-back svg {
width: 16px;
height: 16px;
}
.step-buttons .apply-btn-next,
.step-buttons .apply-btn-submit {
flex: 1;
}
.step-buttons--back-only {
justify-content: flex-start;
}
/* Combined step sections */
.apply-combined-section {
margin-bottom: 16px;
}
.apply-combined-section:last-of-type {
margin-bottom: 4px;
}
.apply-combined-label {
display: block;
font-size: 13px;
font-weight: var(--font-bold);
color: var(--text);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.apply-options-grid.cols-2 {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
/* Match results interstitial */
/* Match preview card */
.match-card {
background: #fff;
border-radius: 12px;
padding: 28px 24px;
box-shadow: inset 0 0 0 1px #e8ecf2;
text-align: center;
}
.match-card-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px 6px 6px;
background: linear-gradient(135deg, #ecfdf5, #d1fae5);
border: 1px solid rgba(34,197,94,0.2);
border-radius: 9999px;
margin-bottom: 16px;
}
.match-card-badge span {
font-size: 13px;
font-weight: 700;
color: #15803d;
letter-spacing: 0.02em;
}
.match-card-check {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #22c55e, #16a34a);
display: flex;
align-items: center;
justify-content: center;
animation: matchPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
box-shadow: 0 2px 8px rgba(34,197,94,0.3);
}
.match-card-check svg {
width: 14px;
height: 14px;
stroke: #fff;
stroke-width: 3px;
}
@keyframes matchPop {
0% { transform: scale(0); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.match-card-title {
font-size: 22px;
font-weight: 800;
color: #20366a;
margin: 0 0 6px;
}
.match-card-sub {
font-size: 14px;
color: #64748b;
margin: 0 0 24px;
line-height: 1.5;
}
.match-card-amount {
background: linear-gradient(135deg, #20366a 0%, #2952a3 100%);
border-radius: 12px;
padding: 22px 16px;
margin-bottom: 16px;
}
.match-card-amount-label {
display: block;
font-size: 11px;
font-weight: 600;
color: rgba(255,255,255,0.7);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 6px;
}
.match-card-amount-value {
display: block;
font-size: 32px;
font-weight: 800;
color: #fff;
line-height: 1;
letter-spacing: -0.01em;
}
.match-card-details {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 16px;
}
.match-card-detail {
display: flex;
align-items: center;
gap: 8px;
text-align: left;
}
.match-card-detail > i,
.match-card-detail > svg {
width: 18px;
height: 18px;
color: #20366a;
flex-shrink: 0;
}
.match-card-detail-value {
display: block;
font-size: 16px;
font-weight: 800;
color: #20366a;
line-height: 1.1;
}
.match-card-detail-label {
display: block;
font-size: 11px;
color: #64748b;
font-weight: 500;
white-space: nowrap;
}
.match-card-detail-divider {
width: 1px;
height: 32px;
background: #e2e8f0;
flex-shrink: 0;
}
.match-card-urgency {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
background: rgba(34,197,94,0.06);
border-radius: 8px;
border: 1px solid rgba(34,197,94,0.12);
}
.match-card-urgency > i,
.match-card-urgency > svg {
width: 16px;
height: 16px;
stroke: #16a34a;
flex-shrink: 0;
}
.match-card-urgency span {
font-size: 13px;
color: #15803d;
line-height: 1.3;
}
.match-card-fine {
text-align: center;
font-size: 12px;
color: #94a3b8;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.match-card-fine svg {
width: 13px;
height: 13px;
stroke: #94a3b8;
}
/* Match card mobile responsive */
@media (max-width: 480px) {
.match-card {
padding: 20px 16px;
border-radius: 10px;
}
.match-card-title {
font-size: 18px;
line-height: 1.3;
}
.match-card-sub {
font-size: 13px;
margin-bottom: 16px;
}
.match-card-amount {
padding: 16px 12px;
border-radius: 10px;
margin-bottom: 14px;
}
.match-card-amount-value {
font-size: 26px;
}
.match-card-amount-label {
font-size: 10px;
}
.match-card-details {
flex-wrap: wrap;
gap: 0;
justify-content: space-around;
margin-bottom: 14px;
}
.match-card-detail {
flex: 1 1 30%;
flex-direction: column;
text-align: center;
gap: 4px;
padding: 8px 4px;
min-width: 0;
}
.match-card-detail > div {
text-align: center;
}
.match-card-detail-value {
font-size: 15px;
}
.match-card-detail-label {
font-size: 10px;
white-space: normal;
line-height: 1.2;
}
.match-card-detail-divider {
display: none;
}
.match-card-urgency {
padding: 8px 10px;
}
.match-card-urgency span {
font-size: 12px;
}
.match-card-badge {
padding: 5px 12px 5px 5px;
margin-bottom: 12px;
}
.match-card-badge span {
font-size: 12px;
}
.match-card-check {
width: 24px;
height: 24px;
}
.match-card-check svg {
width: 12px;
height: 12px;
}
.match-card-fine {
font-size: 11px;
flex-wrap: wrap;
}
}
/* Apply card security badges mobile */
@media (max-width: 480px) {
.apply-card-security {
flex-wrap: wrap;
gap: 6px 10px;
justify-content: center;
}
.apply-card-security-divider {
display: none;
}
}
.apply-btn-next--highlight {
background: linear-gradient(135deg, #20366a 0%, #2952a3 100%) !important;
box-shadow: 0 4px 16px rgba(32,54,106,0.3) !important;
}
.apply-btn-next--highlight:hover {
box-shadow: 0 6px 20px rgba(32,54,106,0.4) !important;
transform: translateY(-1px);
}
/* Submit microcopy */
.apply-submit-microcopy {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 12px;
font-size: 12px;
color: var(--muted);
font-weight: var(--font-medium);
}
.apply-submit-microcopy svg {
width: 14px;
height: 14px;
stroke: #22c55e;
}
/* Inline validation checkmarks */
.apply-input-wrap {
position: relative;
}
.apply-input-wrap .apply-input {
padding-right: 40px;
}
.apply-input-check {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.apply-input-check svg {
width: 18px;
height: 18px;
stroke: #22c55e;
}
.apply-input-wrap.validated .apply-input-check {
opacity: 1;
}
/* Spinner message transition */
#spinnerMessage {
transition: opacity 0.3s ease;
}
/* Live activity toast */
.apply-toast {
position: fixed;
bottom: 24px;
left: 24px;
z-index: 900;
pointer-events: none;
opacity: 0;
transform: translateY(20px);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.apply-toast.show {
opacity: 1;
transform: translateY(0);
}
.apply-toast-inner {
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border-radius: 12px;
padding: 12px 16px;
box-shadow: 0 8px 32px rgba(0,0,0,0.12), inset 0 0 0 1px #e8ecf2;
min-width: 260px;
max-width: 340px;
}
.apply-toast-icon {
width: 36px;
height: 36px;
border-radius: 12px;
background: linear-gradient(135deg, #e8f0fe, #f0f4ff);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.apply-toast-icon svg {
width: 18px;
height: 18px;
stroke: var(--brand);
}
.apply-toast-text {
flex: 1;
min-width: 0;
}
.apply-toast-text strong {
display: block;
font-size: 13px;
font-weight: var(--font-semibold);
color: var(--text);
}
.apply-toast-text span {
font-size: 12px;
color: var(--muted);
}
.apply-toast-time {
font-size: 11px;
color: var(--muted);
white-space: nowrap;
flex-shrink: 0;
}
/* Sticky Mobile CTA Bar */
.apply-sticky-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid var(--border);
padding: 10px 16px;
display: none;
align-items: center;
gap: 10px;
z-index: 998;
transform: translateY(100%);
transition: transform 0.3s ease;
box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
}
.apply-sticky-bar.visible {
transform: translateY(0);
}
.apply-sticky-phone {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: #f0fdf4;
border-radius: 12px;
color: #22c55e;
flex-shrink: 0;
text-decoration: none;
}
.apply-sticky-phone svg {
width: 22px;
height: 22px;
}
.apply-sticky-btn {
flex: 1;
padding: 14px 20px;
background: var(--brand);
color: #fff;
border: none;
border-radius: 12px;
font-size: 15px;
font-weight: var(--font-semibold);
cursor: pointer;
font-family: inherit;
transition: background 0.2s ease;
}
.apply-sticky-btn:hover {
background: #162849;
}
@media (max-width: 968px) {
.apply-sticky-bar {
display: flex;
}
.apply-toast {
bottom: 80px;
left: 16px;
}
}
/* Exit popup save & resume */
.exit-popup-save {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border-light);
}
.exit-popup-save-label {
font-size: 13px;
color: var(--muted);
margin: 0 0 8px;
}
.exit-popup-save-form {
display: flex;
gap: 8px;
}
.exit-popup-save-input {
flex: 1;
padding: 10px 14px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 14px;
font-family: inherit;
}
.exit-popup-save-input:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(32,54,106,0.1);
}
.exit-popup-save-btn {
padding: 10px 20px;
background: var(--brand);
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: var(--font-semibold);
cursor: pointer;
font-family: inherit;
transition: background 0.2s;
}
.exit-popup-save-btn:hover {
background: #2952a3;
}
.exit-popup-save-confirm {
font-size: 14px;
color: #22c55e;
font-weight: var(--font-semibold);
margin: 0;
}
/* Exit popup phone */
.exit-popup-phone {
margin-top: 12px;
font-size: 13px;
color: var(--muted);
}
.exit-popup-phone a {
color: var(--brand);
text-decoration: none;
}
.exit-popup-phone a:hover {
text-decoration: underline;
}
/* Social proof micro-bar under hero features */
.hero-social-proof {
display: flex;
align-items: center;
gap: 10px;
margin-top: var(--space-6);
}
.hero-social-proof-avatars {
display: flex;
}
.hero-social-proof-avatars span {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--brand);
color: #fff;
font-size: 11px;
font-weight: var(--font-bold);
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--bg-alt);
margin-left: -8px;
}
.hero-social-proof-avatars span:first-child {
margin-left: 0;
}
.hero-social-proof-text {
font-size: var(--text-sm);
color: var(--muted);
}
.hero-social-proof-text strong {
color: var(--text);
font-weight: var(--font-semibold);
}
/* Form social proof (under step 0) */
.form-social-proof {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid var(--border-light);
}
.form-social-proof-avatars {
display: flex;
}
.form-social-proof-avatars span {
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--brand);
color: #fff;
font-size: 10px;
font-weight: var(--font-bold);
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--bg);
margin-left: -7px;
}
.form-social-proof-avatars span:first-child {
margin-left: 0;
}
.form-social-proof-text {
font-size: var(--text-xs);
color: var(--muted);
font-weight: var(--font-medium);
}
.form-social-proof-text strong {
color: var(--text);
}
/* Sidebar testimonial card */
.sidebar-testimonial {
background: var(--bg);
border-radius: 20px;
padding: 1.5rem 1.2rem;
box-shadow: inset 0 0 0 1px var(--card-border);
transition: all 0.4s ease;
}
.sidebar-testimonial:hover {
box-shadow: inset 0 0 0 1px var(--brand), 0 8px 24px rgba(32,54,106,0.12);
transform: translateY(-4px);
}
.sidebar-testimonial-stars {
display: flex;
gap: 2px;
margin-bottom: 10px;
}
.sidebar-testimonial-stars svg {
width: 14px;
height: 14px;
fill: #f59e0b;
stroke: #f59e0b;
stroke-width: 0;
}
.sidebar-testimonial-quote {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
margin: 0 0 12px;
font-style: italic;
}
.sidebar-testimonial-author {
display: flex;
align-items: center;
gap: 10px;
}
.sidebar-testimonial-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #e8f0fe, #f0f4ff);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: var(--font-bold);
color: var(--brand);
flex-shrink: 0;
}
.sidebar-testimonial-name {
font-size: 13px;
font-weight: var(--font-bold);
color: var(--text);
display: block;
}
.sidebar-testimonial-role {
font-size: 11px;
color: var(--muted);
display: block;
}
/* ============================================
RESPONSIVE STYLES
Mobile-first approach with consistent breakpoints
============================================ */
/* Tablet and below (992px) */
@media(max-width:992px){
/* Hide desktop nav on tablet/mobile */
.header .navbar-collapse{display:none !important}
/* Section padding adjustment */
.section,
.section--lg {
padding: var(--space-12) 0;
}
/* Secondary hero responsive */
.secondary-hero,
.hero-wrap,
.product-hero {
padding: var(--space-12) 0;
}
/* Stats bar */
.stat-divider {
display: none;
}
.stats-bar .stats-row {
gap: var(--space-8);
}
}
/* Mobile devices (768px) */
@media(max-width:768px){
/* Header responsive */
.navbar-top-default{height:70px}
.logo img{height:28px}
.btn-lg{padding:10px 18px;font-size:14px}
.dropdown-menu{min-width:180px}
/* Typography scale down */
:root {
--text-4xl: 2rem; /* 32px on mobile */
--text-3xl: 1.5rem; /* 24px on mobile */
--text-2xl: 1.25rem; /* 20px on mobile */
}
/* Secondary hero mobile */
.secondary-hero h1,
.hero-wrap h1,
.product-hero h1 {
font-size: 2rem;
margin-bottom: var(--space-3);
}
.secondary-hero .hero-subtitle,
.hero-wrap .subtitle,
.product-hero .subtitle {
font-size: var(--text-base);
margin-bottom: var(--space-5);
}
/* Hero CTA mobile */
.hero-cta {
flex-direction: column;
align-items: stretch;
}
.hero-cta .btn {
justify-content: center;
width: 100%;
}
/* Hero features mobile */
.hero-features {
gap: var(--space-2);
}
.hero-feature {
padding: var(--space-2) var(--space-3);
font-size: var(--text-xs);
}
/* Stats mobile */
.stat-value {
font-size: var(--text-3xl);
}
.stats-bar .stats-row {
gap: var(--space-6);
}
/* Section header mobile */
.section-header h2 {
font-size: var(--text-2xl);
}
.section-header p {
font-size: var(--text-base);
}
/* Product hero (legacy support) */
.product-hero h1{font-size:2rem}
.product-hero .subtitle{font-size:var(--text-base)}
.loan-params{grid-template-columns:1fr}
.benefits-grid{grid-template-columns:1fr}
.process-steps{grid-template-columns:1fr}
.features-row{grid-template-columns:1fr}
.solutions-grid{grid-template-columns:1fr}
.trust-badges{flex-direction:column;gap:20px}
.media-logos{gap:16px}
.cta-section h2{font-size:28px}
.contact-info{grid-template-columns:1fr}
.faq-grid{grid-template-columns:1fr}
.split-section{grid-template-columns:1fr;gap:40px}
.split-left .split-image,.split-right .split-image{order:1}
.split-left .split-content,.split-right .split-content{order:2}
.asymmetric-grid,.asymmetric-grid.reverse{grid-template-columns:1fr}
.offset-grid{grid-template-columns:1fr}
.offset-grid .card:nth-child(2),.offset-grid .card:nth-child(5){transform:translateY(0)}
.timeline-section{padding:0 10px}
.timeline-item{grid-template-columns:50px 1fr;gap:20px}
.timeline-number{width:50px;height:50px;font-size:22px}
.stat-hero-number{font-size:48px}
.comparison-table{overflow-x:auto}
.testimonials-grid{grid-template-columns:1fr}
.mixed-benefits{grid-template-columns:1fr}
.mixed-benefits .benefit-card.wide{grid-column:span 1}
.icon-grid{grid-template-columns:1fr}
.calculator-split-container{grid-template-columns:1fr;max-width:100%}
.calculator-left-panel{padding:40px 24px}
.calculator-left-panel h2{font-size:28px}
.calculator-right-panel{padding:32px 24px}
.calculator-content-wrapper{grid-template-columns:1fr;gap:24px}
.breakdown-value{font-size:18px}
.breakdown-row.total-row .breakdown-value{font-size:20px}
.btn-pre-approval{padding:16px 24px;font-size:16px}
}
/* ============================================
BLOG POST DETAIL (CSS-13)
Article content, hero sections, sidebar components
============================================ */
/* Progress Bar */
.reading-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: var(--brand); z-index: 1000; transition: width 0.3s ease; }
/* Hero Section */
.post-hero-content { max-width: 760px; margin: 2rem auto 0; padding: 0 20px; }
/* Article Container */
.article-container { max-width: 900px; margin: 0 auto; padding: 60px 20px; }
.article-content { max-width: 900px; margin: 2rem auto 0; padding: 0 20px; }
/* Key Takeaways Section */
.key-takeaways-section { margin-top: 3rem; padding: 2.5rem; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-radius: 20px; border: 1px solid #e2e8f0; }
.key-takeaways-heading { color: #2952a3; margin-bottom: 1.5rem; font-size: 1.75rem; display: flex; align-items: center; gap: 0.75rem; }
/* Key Takeaways child elements */
.key-takeaways-list { margin: 0; padding: 0; list-style: none; }
.key-takeaways-item { margin-bottom: 1rem; padding: 1rem 1rem 1rem 3rem; position: relative; background: rgba(255, 255, 255, 0.7); border-radius: 10px; color: #1a202c; font-size: 1.05rem; line-height: 1.6; font-weight: 500; }
.key-takeaways-icon { position: absolute; left: 1rem; top: 1.125rem; }
.takeaway-card { background: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-left: 4px solid #2952a3; }
.takeaway-heading { color: #2952a3; margin-bottom: 1.5rem; font-size: 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
.takeaway-text { font-size: 1.175rem; line-height: 1.7; margin: 0; color: #0c4a6e; font-weight: 500; }
.takeaway-text p { margin: 0; }
.takeaway-text a { color: #2952a3; text-decoration: underline; text-underline-offset: 2px; }
.takeaway-text a:hover { color: #0284c7; }
/* Quick Answer Section */
.quick-answer-section { margin-top: 3rem; padding: 2rem; background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%); border-radius: 16px; }
.quick-answer-heading { text-align: center; margin-bottom: 1rem; color: #0369a1; font-size: 2rem; font-weight: 700; }
.quick-answer-text { text-align: center; color: #4a5568; margin-bottom: 3rem; max-width: 600px; margin-left: auto; margin-right: auto; }
/* Direct Answer Box */
.direct-answer-box { border: 2px solid #0284c7; padding: 1.75rem 2rem; border-radius: 18px; box-shadow: 0 2px 12px rgba(2,132,199,0.07); margin-bottom: 2.5rem; }
/* Data Cards Grid */
.data-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.data-card { background: linear-gradient(135deg, #2952a3 0%, #20366a 100%); color: white; }
.data-card-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; }
.data-card-icon { background: #0284c7; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.data-card-label { font-weight: 700; color: #0369a1; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; }
.data-card-value { font-size: 2rem; font-weight: 700; color: #2952a3; margin-bottom: 0.5rem; }
.data-card-desc { margin: 0; color: #4a5568; line-height: 1.7; font-size: 1rem; }
/* Comparison Table */
.comparison-table-section { margin-top: 3rem; }
.comparison-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.08); }
.comparison-table { width: 100%; border-collapse: collapse; background: #fff; min-width: 640px; }
.comparison-table thead th { background: linear-gradient(135deg, #2952a3 0%, #1e3a7a 100%); color: #fff; padding: 1rem 1.25rem; text-align: left; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.comparison-table thead th:first-child { border-radius: 16px 0 0 0; width: 3rem; text-align: center; }
.comparison-table thead th:last-child { border-radius: 0 16px 0 0; }
.comparison-table td { padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0; font-size: 0.95rem; line-height: 1.5; color: #334155; vertical-align: middle; }
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-table-row-even { background: #f8fafc; }
.comparison-table tbody tr:hover { background: #eef2ff; transition: background 0.15s ease; }
.comparison-rank { text-align: center; font-weight: 700; color: #2952a3; font-size: 1.1rem; }
.comparison-lender { font-weight: 600; }
.comparison-lender a { color: #2952a3; text-decoration: none; border-bottom: 1px dashed #93a4cb; transition: color 0.15s, border-color 0.15s; }
.comparison-lender a:hover { color: #0284c7; border-bottom-color: #0284c7; }
.comparison-bestfor { color: #64748b; font-size: 0.9rem; }
/* FAQ Section */
.faq-post-section { margin-top: 3rem; }
.faq-post-item { margin-bottom: 1rem; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: white; }
.faq-post-question { padding: 1.25rem 1.5rem; background: #f8fafc; cursor: pointer; font-weight: 600; color: #1a202c; font-size: 1.05rem; display: flex; align-items: center; gap: 0.75rem; list-style: none; }
.faq-post-answer { padding: 1.25rem 1.5rem; background: white; border-top: 1px solid #e2e8f0; }
.faq-post-text { font-size: 0.95rem; color: #1a202c; margin-bottom: 0.75rem; line-height: 1.5; }
.faq-post-icon { margin-left: auto; color: #718096; width: 14px; height: 14px; transition: transform 0.2s; }
/* CTA Links */
.cta-link { display: inline-flex; align-items: center; gap: 0.5rem; color: #0284c7; text-decoration: none; font-weight: 500; padding: 0.75rem 1rem; background: #f0f9ff; border-radius: 8px; transition: all 0.2s; }
/* Caption */
.caption-small { font-size: 0.8rem; color: #718096; font-style: normal; display: block; }
/* Image Styling */
.img-post-hero { width: 100%; height: auto; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.12); max-height: 400px; object-fit: cover; }
/* Border Left Variants */
.border-left-blue { border-left: 4px solid #0284c7; }
/* Icon Size Variants */
.icon-10 { width: 10px; height: 10px; }
.icon-14 { width: 14px; height: 14px; }
.icon-16 { width: 16px; height: 16px; }
.icon-18 { width: 18px; height: 18px; }
.icon-20 { width: 20px; height: 20px; }
.icon-24 { width: 24px; height: 24px; }
.icon-32 { width: 32px; height: 32px; }
/* Icon Colors */
.icon-brand { color: #2952a3; }
.icon-white { color: white; }
.icon-muted { color: #718096; }
/* Flexbox Helpers */
.flex-shrink-0 { flex-shrink: 0; }
/* Table Cell Styling */
.table-cell-muted { font-size: 0.9rem; color: #4a5568; }
/* ============================================
FUNDING SLIDER COMPONENT
Extracted from blog/includes/funding_slider.html
============================================ */
.custom-slider {
position: relative;
width: 100%;
height: 40px;
cursor: pointer;
touch-action: none;
-webkit-user-select: none;
user-select: none;
}
.custom-slider__track {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 6px;
margin-top: -3px;
background: #e2e8f0;
border-radius: 3px;
overflow: hidden;
}
.custom-slider__fill {
height: 100%;
background: var(--brand, #20366a);
border-radius: 3px;
}
.custom-slider__thumb {
position: absolute;
top: 50%;
width: 28px;
height: 28px;
margin-top: -14px;
margin-left: -14px;
background: var(--brand, #20366a);
border-radius: 50%;
box-shadow: 0 0 0 4px #fff, 0 2px 8px rgba(0,0,0,0.18);
cursor: grab;
transition: box-shadow 0.15s ease;
}
.custom-slider__thumb:hover {
box-shadow: 0 0 0 4px #fff, 0 0 0 8px rgba(32,54,106,0.1), 0 2px 8px rgba(0,0,0,0.18);
}
.custom-slider__thumb:active,
.custom-slider__thumb.dragging {
cursor: grabbing;
box-shadow: 0 0 0 4px #fff, 0 0 0 10px rgba(32,54,106,0.15), 0 4px 12px rgba(0,0,0,0.22);
}
/* Dark-background slider overrides (homepage slider card, etc.) */
.slider-card .custom-slider__track {
background: rgba(255,255,255,0.25);
}
.slider-card .custom-slider__fill {
background: #fff;
}
.slider-card .custom-slider__thumb {
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.slider-card .custom-slider__thumb:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 0 8px rgba(255,255,255,0.1);
}
.slider-card .custom-slider__thumb:active,
.slider-card .custom-slider__thumb.dragging {
box-shadow: 0 2px 8px rgba(0,0,0,0.2), 0 0 0 10px rgba(255,255,255,0.15);
}
/* ============================================
LEGAL PAGES (Privacy, Terms)
Extracted from pages/privacy.html and pages/terms.html
============================================ */
.legal-content {
max-width: 800px;
margin: 0 auto;
}
.legal-intro {
font-size: 17px;
color: var(--muted);
line-height: 1.7;
padding-bottom: 32px;
border-bottom: 1px solid var(--border);
margin-bottom: 40px;
}
.legal-section {
margin-bottom: 40px;
}
.legal-section h2 {
font-size: 22px;
font-weight: 700;
color: var(--text);
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 2px solid var(--brand);
display: inline-block;
}
.legal-section p {
font-size: 15px;
line-height: 1.7;
color: var(--text);
margin-bottom: 16px;
}
.legal-section ul {
margin: 0 0 16px 24px;
padding: 0;
}
.legal-section li {
font-size: 15px;
line-height: 1.7;
color: var(--text);
margin-bottom: 8px;
}
.legal-highlight {
background: var(--bg-alt);
border-left: 4px solid var(--brand);
padding: 16px 20px;
border-radius: 0 8px 8px 0;
margin-top: 16px;
}
.legal-highlight strong {
color: var(--brand);
}
.legal-contact {
background: var(--bg-alt);
border-radius: 12px;
padding: 24px;
margin-top: 16px;
}
.legal-contact p {
margin: 0 0 8px;
}
.legal-contact a {
color: var(--brand);
text-decoration: none;
font-weight: 600;
}
.legal-contact a:hover {
text-decoration: underline;
}
.legal-license {
font-size: 13px !important;
color: var(--muted) !important;
margin-top: 16px !important;
margin-bottom: 0 !important;
}
/* ============================================
INDUSTRIES PAGE
Extracted from pages/industries.html
============================================ */
.industry-card {
display: block;
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px;
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
}
.industry-card:hover {
border-color: var(--brand);
box-shadow: 0 8px 24px rgba(32, 54, 106, 0.12);
transform: translateY(-4px);
}
.industry-card-icon {
width: 56px;
height: 56px;
background: var(--bg-alt);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
transition: all 0.3s ease;
}
.industry-card:hover .industry-card-icon {
background: var(--brand);
}
.industry-card-icon i,
.industry-card-icon svg {
font-size: 24px;
width: 24px;
height: 24px;
color: var(--brand);
transition: all 0.3s ease;
}
.industry-card:hover .industry-card-icon i,
.industry-card:hover .industry-card-icon svg {
color: #fff;
}
.industry-card-content h3 {
font-size: 20px;
font-weight: 700;
margin: 0 0 8px;
color: var(--text);
}
.industry-card-content p {
font-size: 15px;
color: var(--muted);
margin: 0 0 16px;
line-height: 1.6;
}
.industry-card-link {
font-size: 14px;
font-weight: 600;
color: var(--brand);
display: inline-flex;
align-items: center;
gap: 6px;
}
.industry-card-link i {
font-size: 12px;
transition: transform 0.2s ease;
}
.industry-card:hover .industry-card-link i {
transform: translateX(4px);
}
/* ============================================
HELP CENTER PAGE
Extracted from pages/help_center.html
============================================ */
/* Category Links */
.hc-cat-link {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 24px 16px;
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: 12px;
text-decoration: none;
transition: all 0.2s ease;
}
.hc-cat-link:hover {
background: #fff;
border-color: var(--brand);
box-shadow: 0 4px 20px rgba(32, 54, 106, 0.1);
transform: translateY(-4px);
}
.hc-cat-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #20366a 0%, #2952a3 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.hc-cat-icon i,
.hc-cat-icon svg {
width: 22px;
height: 22px;
color: #fff;
stroke: #fff;
}
.hc-cat-link span {
font-size: 15px;
font-weight: 600;
color: var(--text);
}
/* FAQ Groups */
.hc-faq-group {
margin-bottom: 48px;
}
.hc-faq-group:last-child {
margin-bottom: 0;
}
.hc-faq-group h2 {
font-size: 24px;
font-weight: 700;
color: var(--text);
margin: 0 0 20px;
padding-bottom: 12px;
border-bottom: 2px solid var(--border);
}
/* FAQ List */
.hc-faq-list {
display: flex;
flex-direction: column;
gap: 12px;
}
/* FAQ Item */
.hc-faq {
background: #fff;
border-radius: 12px;
border: 1px solid var(--border);
overflow: hidden;
}
.hc-faq summary {
padding: 20px 24px;
font-size: 16px;
font-weight: 600;
color: var(--text);
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.hc-faq summary::-webkit-details-marker {
display: none;
}
.hc-faq summary::after {
content: '+';
font-size: 20px;
font-weight: 400;
color: var(--brand);
transition: transform 0.2s ease;
}
.hc-faq[open] summary::after {
content: '−';
}
.hc-faq summary:hover {
background: var(--bg-alt);
}
.hc-faq-answer {
padding: 0 24px 20px;
}
.hc-faq-answer p {
margin: 0;
font-size: 15px;
line-height: 1.7;
color: var(--muted);
}
/* Search States */
.hc-faq.search-hidden {
display: none;
}
.hc-faq.search-match {
outline: 2px solid var(--brand);
}
/* Responsive */
@media (max-width: 768px) {
.hc-cat-link {
padding: 20px 12px;
}
.hc-cat-icon {
width: 44px;
height: 44px;
}
.hc-cat-link span {
font-size: 13px;
}
.hc-faq-group h2 {
font-size: 20px;
}
.hc-faq summary {
padding: 16px 20px;
font-size: 15px;
}
.hc-faq-answer {
padding: 0 20px 16px;
}
}
@media (max-width: 600px) {
section[style*="grid-template-columns:repeat(4"] > .container > div {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* ============================================
THANK YOU PAGE
Extracted from pages/thank_you.html
============================================ */
.thank-you-section {
min-height: calc(100vh - 200px);
display: flex;
align-items: center;
justify-content: center;
padding: 60px 20px;
background: var(--bg-alt);
}
.thank-you-card {
max-width: 600px;
background: var(--bg);
border-radius: 20px;
padding: 48px 40px;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.thank-you-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px;
}
.thank-you-icon svg {
width: 40px;
height: 40px;
stroke: #28a745;
stroke-width: 2;
}
.thank-you-card h1 {
font-size: 28px;
font-weight: 700;
color: var(--text);
margin: 0 0 12px;
}
.thank-you-subtitle {
font-size: 16px;
color: var(--muted);
margin: 0 0 32px;
}
.thank-you-steps {
background: var(--bg-alt);
border-radius: 12px;
padding: 24px;
margin-bottom: 32px;
text-align: left;
}
.thank-you-steps h3 {
font-size: 16px;
font-weight: 600;
color: var(--text);
margin: 0 0 20px;
text-align: center;
}
.step-timeline {
display: flex;
flex-direction: column;
gap: 16px;
}
.timeline-step {
display: flex;
align-items: flex-start;
gap: 16px;
}
.step-number {
width: 32px;
height: 32px;
background: var(--brand);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}
.step-content strong {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text);
margin-bottom: 2px;
}
.step-content span {
font-size: 13px;
color: var(--muted);
}
.thank-you-contact {
margin-bottom: 24px;
}
.thank-you-contact p {
margin: 0;
font-size: 15px;
color: var(--text);
}
.thank-you-contact a {
color: var(--brand);
font-weight: 600;
text-decoration: none;
}
.thank-you-contact a:hover {
text-decoration: underline;
}
.contact-hours {
font-size: 13px !important;
color: var(--muted) !important;
margin-top: 4px !important;
}
.thank-you-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.thank-you-actions .btn {
padding: 12px 24px;
font-size: 14px;
}
/* Survey Section */
.survey-section {
background: var(--bg-alt);
border-radius: 12px;
padding: 24px;
margin-bottom: 24px;
text-align: center;
}
.survey-section h3 {
font-size: 16px;
font-weight: 700;
color: var(--text);
margin: 0 0 4px 0;
}
.survey-subtitle {
font-size: 14px;
color: var(--muted);
margin: 0 0 16px 0;
}
.survey-options {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-bottom: 0;
}
.survey-btn {
padding: 10px 18px;
border: 2px solid var(--border);
border-radius: 24px;
background: var(--bg);
color: var(--text);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.survey-btn:hover:not(:disabled) {
border-color: var(--brand);
color: var(--brand);
background: rgba(32, 54, 106, 0.04);
}
.survey-btn.selected {
border-color: var(--brand);
background: var(--brand);
color: #fff;
}
.survey-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.survey-other-input {
display: flex;
gap: 8px;
margin-top: 12px;
justify-content: center;
align-items: center;
}
.survey-other-input input {
padding: 10px 14px;
border: 2px solid var(--border);
border-radius: 8px;
font-size: 14px;
flex: 1;
max-width: 300px;
outline: none;
transition: border-color 0.2s;
}
.survey-other-input input:focus {
border-color: var(--brand);
}
.survey-other-submit {
padding: 10px 20px;
font-size: 14px;
}
.survey-confirmation {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
color: var(--success);
font-weight: 500;
font-size: 15px;
}
.survey-confirmation svg {
width: 20px;
height: 20px;
color: var(--success);
}
@media (max-width: 640px) {
.thank-you-card {
padding: 32px 24px;
}
.thank-you-card h1 {
font-size: 24px;
}
.thank-you-actions {
flex-direction: column;
}
.thank-you-actions .btn {
width: 100%;
}
.survey-options {
gap: 6px;
}
.survey-btn {
padding: 8px 14px;
font-size: 13px;
}
.survey-other-input {
flex-direction: column;
}
.survey-other-input input {
max-width: 100%;
}
}
/* ============================================
SOLUTIONS PAGE
Extracted from pages/solutions.html
============================================ */
.solution-card-new {
display: block;
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px;
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
}
.solution-card-new:hover {
border-color: var(--brand);
box-shadow: 0 8px 24px rgba(32, 54, 106, 0.12);
transform: translateY(-4px);
}
.solution-icon {
width: 56px;
height: 56px;
background: var(--bg-alt);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
transition: all 0.3s ease;
}
.solution-card-new:hover .solution-icon {
background: var(--brand);
}
.solution-icon i {
font-size: 24px;
color: var(--brand);
transition: all 0.3s ease;
}
.solution-card-new:hover .solution-icon i {
color: #fff;
}
.solution-content h3 {
font-size: 20px;
font-weight: 700;
margin: 0 0 8px;
color: var(--text);
}
.solution-content p {
font-size: 15px;
color: var(--muted);
margin: 0 0 16px;
line-height: 1.6;
}
.solution-stats {
display: flex;
gap: 16px;
margin-bottom: 16px;
}
.solution-stats span {
font-size: 13px;
color: var(--muted);
}
.solution-stats strong {
color: var(--brand);
}
.solution-link {
font-size: 14px;
font-weight: 600;
color: var(--brand);
display: inline-flex;
align-items: center;
gap: 6px;
}
.solution-link i {
font-size: 12px;
transition: transform 0.2s ease;
}
.solution-card-new:hover .solution-link i {
transform: translateX(4px);
}
/* ============================================
BLOG POST LIST PAGE
Extracted from blog/post_list.html
============================================ */
/* Blog Search */
.blog-search-container {
max-width: 500px;
margin: 2rem auto 0;
}
.blog-search-form {
display: flex;
gap: 0.75rem;
}
.search-input-wrap {
flex: 1;
position: relative;
}
.search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
stroke: var(--muted);
}
.blog-search-input {
width: 100%;
padding: 0.875rem 1.25rem 0.875rem 48px;
border: 2px solid var(--border);
border-radius: 10px;
font-size: 1rem;
background: white;
color: var(--text);
transition: all 0.2s ease;
}
.blog-search-input:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(32, 54, 106, 0.1);
}
.search-results-info {
margin-top: 1.5rem;
}
.search-results-info p {
color: var(--muted);
font-size: 1rem;
margin-bottom: 0.75rem;
}
.btn-sm {
padding: 0.5rem 1.25rem;
font-size: 14px;
}
/* Blog Posts Section */
.blog-posts-section {
padding: 3rem 0 4rem;
}
/* Post Image */
.post-image {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.post-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
/* Empty State */
.empty-state {
grid-column: 1 / -1;
text-align: center;
padding: 4rem 2rem;
background: var(--bg-alt);
border-radius: 16px;
}
.empty-state i,
.empty-state svg {
width: 48px;
height: 48px;
stroke: var(--muted);
margin-bottom: 1rem;
}
.empty-state p {
color: var(--muted);
font-size: 1.1rem;
margin: 0;
}
/* Pagination */
.pagination-nav {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(--border);
}
.pagination-nav .btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.pagination-nav .btn svg {
width: 16px;
height: 16px;
}
.page-info {
color: var(--muted);
font-size: 0.95rem;
font-weight: 500;
}
/* Responsive */
@media (max-width: 768px) {
.blog-search-form {
flex-direction: column;
}
.blog-search-form .btn {
width: 100%;
}
.pagination-nav {
flex-wrap: wrap;
}
}
/* ============================================
BLOG POST DETAIL PAGE
Extracted from blog/post_detail.html
============================================ */
.breadcrumb-nav {
max-width: 1200px;
margin: 0 auto;
padding: 20px 20px 0;
}
.breadcrumb-list {
display: flex;
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0;
font-size: 0.875rem;
color: var(--muted);
flex-wrap: wrap;
}
.breadcrumb-list a {
color: var(--brand);
text-decoration: none;
}
.breadcrumb-list a:hover {
text-decoration: underline;
}
.breadcrumb-list .separator {
color: var(--border);
}
.breadcrumb-list .topic-name {
color: var(--brand);
}
.breadcrumb-list .current {
color: var(--text);
font-weight: 500;
}
/* ===== POST DETAIL — SPLIT HERO ===== */
.post-detail-hero .hero-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.post-detail-hero .hero-split-text {
text-align: left;
}
.post-detail-hero .hero-split-text h1 {
text-align: left;
}
.post-detail-hero .hero-split-text .hero-subtitle {
text-align: left;
}
.post-detail-hero .hero-split-text .post-meta-row {
justify-content: flex-start;
}
.hero-split-image {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.hero-split-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
aspect-ratio: 4 / 3;
}
/* No image — text takes full width */
.post-detail-hero .hero-split:not(:has(.hero-split-image)) {
grid-template-columns: 1fr;
max-width: 720px;
}
@media (max-width: 768px) {
.post-detail-hero .hero-split {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.hero-split-image img {
aspect-ratio: 16 / 9;
}
}
/* Post Meta Row */
.post-meta-row {
display: flex;
gap: 1.5rem;
align-items: center;
justify-content: center;
flex-wrap: wrap;
color: var(--muted);
font-size: 0.95rem;
margin-top: 1rem;
}
.meta-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.meta-item i,
.meta-item svg {
width: 16px;
height: 16px;
stroke: var(--brand);
}
.meta-item.updated i,
.meta-item.updated svg {
stroke: #059669;
}
.meta-item.updated span {
color: #059669;
}
/* TOC Box */
.toc-box {
background: var(--bg-alt);
border: 2px solid var(--border);
padding: 2rem;
margin-bottom: 3rem;
border-radius: 12px;
}
.toc-box h2 {
color: var(--brand);
margin-bottom: 1.25rem;
font-size: 1.35rem;
display: flex;
align-items: center;
gap: 0.75rem;
border-bottom: none;
padding-bottom: 0;
}
.toc-box h2 i,
.toc-box h2 svg {
width: 18px;
height: 18px;
}
.toc-box nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.toc-box nav li {
margin-bottom: 0.625rem;
}
.toc-box nav li.level-3 {
margin-left: 1.5rem;
}
.toc-box nav a {
color: var(--brand);
text-decoration: none;
display: flex;
align-items: flex-start;
gap: 0.5rem;
transition: all 0.2s;
padding: 0.375rem 0.625rem;
border-radius: 6px;
font-weight: 500;
}
.toc-box nav a.level-2 {
font-weight: 600;
}
.toc-box nav a:hover {
background: rgba(32, 54, 106, 0.05);
}
.toc-box nav a i,
.toc-box nav a svg {
width: 12px;
height: 12px;
margin-top: 0.375rem;
stroke: var(--muted);
}
/* ============================================
SIDEBAR TOC LAYOUT
Desktop: article + sticky sidebar
Mobile: inline TOC box (no sidebar)
============================================ */
/* Layout wrapper */
.article-layout {
max-width: 900px;
margin: 0 auto;
}
.article-layout.has-sidebar {
max-width: 1200px;
padding: 0 20px;
}
/* When sidebar is present, article-container no longer self-centers */
.article-layout.has-sidebar .article-container {
max-width: 900px;
padding-left: 20px;
padding-right: 20px;
}
/* Sidebar hidden by default (mobile) */
.toc-sidebar {
display: none;
}
/* Inline TOC visible by default (mobile) */
.toc-inline-only {
display: block;
}
/* Sidebar visual styling — always defined, only shown on desktop */
.toc-sidebar .toc-sidebar-inner {
padding: 1.25rem 0;
}
.toc-sidebar .toc-sidebar-inner h2 {
color: var(--brand) !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 1rem !important;
padding: 0 0.75rem !important;
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: none !important;
line-height: 1.4;
}
.toc-sidebar .toc-sidebar-inner h2 i,
.toc-sidebar .toc-sidebar-inner h2 svg {
width: 14px !important;
height: 14px !important;
stroke: var(--muted);
}
.toc-sidebar .toc-sidebar-inner ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.toc-sidebar .toc-sidebar-inner li {
margin-bottom: 0;
list-style: none;
}
.toc-sidebar .toc-sidebar-inner li.level-3 {
margin-left: 0.875rem;
}
a.toc-sidebar-link,
a.toc-sidebar-link:link,
a.toc-sidebar-link:visited {
display: block;
padding: 0.4rem 0.75rem;
font-size: 0.825rem;
line-height: 1.4;
color: var(--muted);
text-decoration: none;
border-left: 2px solid transparent;
transition: all 0.15s ease;
font-weight: 500;
}
a.toc-sidebar-link:hover {
color: var(--text);
background: var(--bg-alt);
text-decoration: none;
}
a.toc-sidebar-link.level-2 {
font-weight: 600;
}
a.toc-sidebar-link.active,
a.toc-sidebar-link.active:link,
a.toc-sidebar-link.active:visited {
color: var(--brand);
border-left-color: var(--brand);
background: rgba(32, 54, 106, 0.04);
}
/* Slim scrollbar for sidebar */
.toc-sidebar::-webkit-scrollbar {
width: 3px;
}
.toc-sidebar::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 3px;
}
.toc-sidebar::-webkit-scrollbar-track {
background: transparent;
}
/* Desktop: sidebar layout at 1200px+ */
@media (min-width: 1200px) {
.article-layout.has-sidebar {
display: grid;
grid-template-columns: 240px 1fr;
gap: 2rem;
align-items: start;
}
.toc-sidebar {
display: block;
position: sticky;
top: 100px;
max-height: calc(100vh - 120px);
overflow-y: auto;
order: -1;
}
/* Hide inline TOC on desktop when sidebar is visible */
.toc-inline-only {
display: none;
}
}
/* Social Share Section */
.social-share-section {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 2px solid var(--border);
}
.share-label {
font-size: 0.875rem;
color: var(--muted);
margin-bottom: 0.75rem;
font-weight: 600;
}
.social-share {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.social-share .share-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
color: white;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
transition: all 0.2s;
}
.social-share .share-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.social-share .share-btn i,
.social-share .share-btn svg {
width: 16px;
height: 16px;
}
.share-twitter {
background: #1da1f2;
}
.share-linkedin {
background: #0077b5;
}
.share-facebook {
background: #1877f2;
}
/* Post Tags Section */
.post-tags-section {
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 2px solid var(--border);
}
.tags-wrap {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.tags-wrap strong {
color: var(--muted);
font-size: 0.95rem;
}
.tag-list {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.tag-pill {
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
color: white;
padding: 0.375rem 0.875rem;
border-radius: 20px;
font-size: 0.813rem;
font-weight: 500;
}
/* Related Posts Section */
.related-posts-section {
background: var(--bg-alt);
padding: 80px 0;
}
.related-posts-section h2 {
text-align: center;
margin-bottom: 3rem;
color: var(--brand);
font-size: 2rem;
font-weight: 700;
}
.related-posts-section .post-image {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.related-posts-section .post-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
/* Responsive */
@media (max-width: 768px) {
.post-meta-row {
gap: 1rem;
}
.toc-box {
padding: 1.5rem;
}
}
/* ============================================
CONTACT PAGE
Extracted from pages/contact.html
============================================ */
.contact-layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: 48px;
max-width: 1000px;
margin: 0 auto;
}
/* Contact Form */
.contact-form-wrap {
background: var(--bg-alt);
border-radius: 16px;
padding: 40px;
}
.contact-form-wrap h2 {
font-size: 24px;
font-weight: 700;
color: var(--text);
margin: 0 0 8px;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.form-group label {
font-size: 14px;
font-weight: 600;
color: var(--text);
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 14px 16px;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 15px;
font-family: inherit;
color: var(--text);
background: #fff;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(32, 54, 106, 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 100px;
}
.form-group select {
cursor: pointer;
}
/* Contact Info Sidebar */
.contact-info-wrap {
display: flex;
flex-direction: column;
gap: 24px;
}
.contact-info-card {
background: var(--brand);
border-radius: 16px;
padding: 32px;
text-align: center;
color: #fff;
}
.contact-info-card h3 {
font-size: 20px;
font-weight: 700;
margin: 0 0 12px;
}
.contact-info-card > p {
font-size: 15px;
color: rgba(255,255,255,0.85);
margin: 0 0 24px;
line-height: 1.6;
}
.contact-phone-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background: #fff;
color: var(--brand);
font-size: 18px;
font-weight: 700;
padding: 14px 28px;
border-radius: 10px;
text-decoration: none;
transition: all 0.2s ease;
}
.contact-phone-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.contact-phone-btn i,
.contact-phone-btn svg {
width: 20px;
height: 20px;
stroke: var(--brand);
}
.contact-hours {
font-size: 13px;
color: rgba(255,255,255,0.7);
margin: 16px 0 0;
}
/* Contact Info List */
.contact-info-list {
background: var(--bg-alt);
border-radius: 12px;
padding: 24px;
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-info-item {
display: flex;
align-items: flex-start;
gap: 14px;
}
.contact-info-icon {
width: 40px;
height: 40px;
background: #fff;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.contact-info-icon i,
.contact-info-icon svg {
width: 18px;
height: 18px;
stroke: var(--brand);
}
.contact-info-label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
}
.contact-info-item a,
.contact-info-item span:not(.contact-info-label) {
font-size: 15px;
font-weight: 600;
color: var(--text);
text-decoration: none;
}
.contact-info-item a:hover {
color: var(--brand);
}
/* Apply Card */
.contact-apply-card {
background: #fff;
border: 2px solid var(--border);
border-radius: 12px;
padding: 24px;
text-align: center;
}
.contact-apply-card h4 {
font-size: 16px;
font-weight: 700;
color: var(--text);
margin: 0 0 8px;
}
.contact-apply-card p {
font-size: 14px;
color: var(--muted);
margin: 0 0 16px;
line-height: 1.5;
}
/* FAQ Grid */
.contact-faq-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.contact-faq-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: #fff;
border-radius: 10px;
text-decoration: none;
transition: all 0.2s ease;
}
.contact-faq-item:hover {
box-shadow: inset 0 0 0 1px var(--brand), 0 8px 24px rgba(32,54,106,0.12);
transform: translateY(-4px);
}
.contact-faq-item span {
font-size: 15px;
font-weight: 600;
color: var(--text);
}
.contact-faq-item i,
.contact-faq-item svg {
width: 18px;
height: 18px;
stroke: var(--brand);
transition: transform 0.2s ease;
}
.contact-faq-item:hover svg {
transform: translateX(4px);
}
/* Responsive */
@media (max-width: 900px) {
.contact-layout {
grid-template-columns: 1fr;
gap: 32px;
}
.contact-info-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.contact-info-card {
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
.contact-form-wrap {
padding: 28px 24px;
}
.form-row {
grid-template-columns: 1fr;
}
.contact-info-wrap {
grid-template-columns: 1fr;
}
.contact-faq-grid {
grid-template-columns: 1fr;
}
}
/* ============================================
HOW IT WORKS PAGE
Extracted from pages/how_it_works.html
============================================ */
/* Hero Buttons */
.hero-btns {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 8px;
}
.hero-btns .btn {
display: inline-flex;
align-items: center;
gap: 8px;
}
.hero-btns .btn svg {
width: 18px;
height: 18px;
}
/* Section Headers */
.hiw-section-header {
text-align: center;
margin-bottom: 48px;
}
.hiw-section-header h2 {
font-size: 32px;
font-weight: 700;
color: var(--text, #111);
margin: 0 0 12px;
}
.hiw-section-header p {
font-size: 17px;
color: var(--muted, #555);
margin: 0;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
/* Process Steps */
.hiw-process {
padding: 80px 0;
background: #fff;
}
.hiw-steps {
max-width: 800px;
margin: 0 auto;
}
.hiw-step {
display: flex;
gap: 32px;
position: relative;
}
.hiw-step:not(:last-child) {
padding-bottom: 48px;
}
.hiw-step-marker {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
}
.hiw-step-num {
width: 48px;
height: 48px;
background: var(--brand, #20366a);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
position: relative;
z-index: 2;
}
.hiw-step-line {
width: 3px;
flex: 1;
background: linear-gradient(to bottom, var(--brand, #20366a), #e3e3e8);
margin-top: 8px;
border-radius: 2px;
}
.hiw-step-content {
display: flex;
gap: 24px;
flex: 1;
background: #fff;
border-radius: 16px;
padding: 28px;
box-shadow: inset 0 0 0 1px var(--border, #e3e3e8);
transition: all 0.3s ease;
}
.hiw-step-content:hover {
box-shadow: inset 0 0 0 1px var(--brand), 0 8px 24px rgba(32,54,106,0.12);
transform: translateY(-4px);
}
.hiw-step-icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, #e8f0fe 0%, #f0f4ff 100%);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hiw-step-icon i {
width: 28px;
height: 28px;
color: var(--brand, #20366a);
}
.hiw-step-text {
flex: 1;
}
.hiw-step-text h3 {
font-size: 20px;
font-weight: 600;
color: var(--text, #111);
margin: 0 0 10px;
}
.hiw-step-text p {
font-size: 15px;
line-height: 1.7;
color: var(--muted, #555);
margin: 0 0 16px;
}
.hiw-step-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--brand, #20366a);
background: linear-gradient(135deg, #e8f0fe 0%, #f0f4ff 100%);
padding: 6px 12px;
border-radius: 20px;
}
.hiw-step-tag i {
width: 14px;
height: 14px;
}
/* Requirements Section */
.hiw-requirements {
padding: 80px 0;
background: var(--bg-alt, #f7f9fc);
}
.hiw-req-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 1000px;
margin: 0 auto;
}
.hiw-req-card {
background: #fff;
border-radius: 16px;
padding: 28px 24px;
box-shadow: inset 0 0 0 1px var(--border, #e3e3e8);
transition: all 0.3s ease;
}
.hiw-req-card:hover {
box-shadow: inset 0 0 0 1px var(--brand), 0 8px 24px rgba(32,54,106,0.12);
transform: translateY(-4px);
}
.hiw-req-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #e8f0fe 0%, #f0f4ff 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
}
.hiw-req-icon i {
width: 24px;
height: 24px;
color: var(--brand, #20366a);
}
.hiw-req-card h4 {
font-size: 16px;
font-weight: 600;
color: var(--text, #111);
margin: 0 0 12px;
}
.hiw-req-card ul {
margin: 0;
padding: 0 0 0 18px;
font-size: 14px;
color: var(--muted, #555);
line-height: 1.8;
}
/* Timeline Section */
.hiw-timeline {
padding: 80px 0;
background: #fff;
}
.hiw-timeline-grid {
display: flex;
align-items: center;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
max-width: 900px;
margin: 0 auto;
}
.hiw-timeline-item {
text-align: center;
padding: 24px 32px;
}
.hiw-timeline-value {
font-size: 56px;
font-weight: 700;
color: var(--brand, #20366a);
line-height: 1;
margin-bottom: 8px;
}
.hiw-timeline-value span {
font-size: 24px;
font-weight: 600;
}
.hiw-timeline-value.hiw-highlight {
font-size: 28px;
background: linear-gradient(135deg, var(--brand, #20366a) 0%, #2952a3 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hiw-timeline-label {
font-size: 14px;
color: var(--muted, #555);
font-weight: 500;
}
.hiw-timeline-divider {
width: 1px;
height: 60px;
background: var(--border, #e3e3e8);
}
/* Benefits Section */
.hiw-benefits {
padding: 80px 0;
background: var(--bg-alt, #f7f9fc);
}
.hiw-benefits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1000px;
margin: 0 auto;
}
.hiw-benefit-card {
background: #fff;
border-radius: 16px;
padding: 32px 28px;
text-align: center;
box-shadow: inset 0 0 0 1px var(--border, #e3e3e8);
transition: all 0.3s ease;
}
.hiw-benefit-card:hover {
box-shadow: inset 0 0 0 1px var(--brand), 0 8px 24px rgba(32,54,106,0.12);
transform: translateY(-4px);
}
.hiw-benefit-icon {
width: 64px;
height: 64px;
background: linear-gradient(135deg, #e8f0fe 0%, #f0f4ff 100%);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.hiw-benefit-icon i {
width: 32px;
height: 32px;
color: var(--brand, #20366a);
}
.hiw-benefit-card h4 {
font-size: 17px;
font-weight: 600;
color: var(--text, #111);
margin: 0 0 10px;
}
.hiw-benefit-card p {
font-size: 14px;
line-height: 1.7;
color: var(--muted, #555);
margin: 0;
}
/* Responsive */
@media (max-width: 1024px) {
.hiw-req-grid {
grid-template-columns: repeat(2, 1fr);
}
.hiw-benefits-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.hiw-step {
flex-direction: column;
gap: 0;
}
.hiw-step-marker {
flex-direction: row;
gap: 16px;
margin-bottom: 16px;
}
.hiw-step-line {
width: auto;
height: 3px;
flex: 1;
margin-top: 0;
margin-left: 8px;
}
.hiw-step-content {
flex-direction: column;
gap: 16px;
}
.hiw-timeline-grid {
flex-direction: column;
gap: 24px;
}
.hiw-timeline-divider {
width: 60px;
height: 1px;
}
.hiw-timeline-value {
font-size: 48px;
}
}
@media (max-width: 640px) {
.hero-btns {
flex-direction: column;
gap: 12px;
}
.hero-btns .btn {
width: 100%;
justify-content: center;
}
.hiw-section-header h2 {
font-size: 28px;
}
.hiw-req-grid {
grid-template-columns: 1fr;
}
.hiw-benefits-grid {
grid-template-columns: 1fr;
}
.hiw-step-num {
width: 40px;
height: 40px;
font-size: 18px;
}
}
/* ============================================
CALCULATOR PAGE
Extracted from pages/calculator.html
============================================ */
/* Calculator Section */
.calc-section {
padding: 60px 0 80px;
background: var(--bg-alt, #f7f9fc);
}
.calc-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
max-width: 960px;
margin: 0 auto;
}
/* Inputs Card */
.calc-inputs-card {
background: #fff;
border-radius: 16px;
padding: 36px;
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.calc-inputs-card h2 {
font-size: 20px;
font-weight: 700;
color: var(--text, #111);
margin: 0 0 28px;
}
.calc-field {
margin-bottom: 24px;
}
.calc-field label {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--text, #111);
margin-bottom: 8px;
}
.calc-input-group {
position: relative;
display: flex;
align-items: center;
}
.calc-input-prefix {
position: absolute;
left: 16px;
font-size: 16px;
font-weight: 600;
color: var(--muted, #555);
}
.calc-input-group input[type="text"],
.calc-input-group input[type="number"] {
width: 100%;
padding: 14px 16px;
border: 2px solid var(--border, #e3e3e8);
border-radius: 10px;
font-size: 18px;
font-weight: 600;
font-family: inherit;
color: var(--text, #111);
transition: border-color 0.2s;
}
.calc-input-group input[type="text"] {
padding-left: 32px;
}
.calc-input-group input:focus {
outline: none;
border-color: var(--brand, #20366a);
}
.calc-field-note {
display: block;
font-size: 12px;
color: var(--muted, #555);
margin-top: 6px;
}
/* Slider */
.calc-apr-row {
display: flex;
align-items: center;
gap: 16px;
}
.calc-slider {
flex: 1;
height: 6px;
border-radius: 6px;
background: #e3e3e8;
-webkit-appearance: none;
appearance: none;
outline: none;
}
.calc-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--brand, #20366a);
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.calc-slider::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--brand, #20366a);
cursor: pointer;
border: none;
}
.calc-apr-input {
display: flex;
align-items: center;
flex-shrink: 0;
}
.calc-apr-input input {
width: 80px;
padding: 10px 8px;
border: 2px solid var(--border, #e3e3e8);
border-radius: 8px;
font-size: 16px;
font-weight: 600;
font-family: inherit;
color: var(--brand, #20366a);
text-align: right;
-moz-appearance: textfield;
}
.calc-apr-input input::-webkit-outer-spin-button,
.calc-apr-input input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.calc-apr-input input:focus {
outline: none;
border-color: var(--brand, #20366a);
}
.calc-apr-input span {
font-size: 16px;
font-weight: 600;
color: var(--brand, #20366a);
margin-left: 4px;
}
/* Qualifications Box */
.calc-qual-box {
background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fc 100%);
border-radius: 12px;
padding: 20px;
margin-top: 32px;
}
.calc-qual-box h4 {
font-size: 14px;
font-weight: 600;
color: var(--text, #111);
margin: 0 0 12px;
}
.calc-qual-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.calc-qual-list span {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--muted, #555);
}
.calc-qual-list i {
width: 16px;
height: 16px;
color: #22c55e;
}
/* Results Card */
.calc-results-card {
background: #fff;
border-radius: 16px;
padding: 36px;
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
}
.calc-results-header {
text-align: center;
margin-bottom: 8px;
}
.calc-results-title {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--muted, #555);
}
/* Payment Display */
.calc-payment-display {
text-align: center;
padding: 24px 0 32px;
border-bottom: 1px solid var(--border, #e3e3e8);
margin-bottom: 24px;
}
.calc-payment-amount {
display: block;
font-size: 52px;
font-weight: 700;
color: var(--brand, #20366a);
line-height: 1;
margin-bottom: 4px;
}
.calc-payment-period {
font-size: 15px;
color: var(--muted, #555);
}
/* Visual Bar */
.calc-visual-breakdown {
margin-bottom: 24px;
}
.calc-bar {
height: 12px;
border-radius: 6px;
background: #e3e3e8;
display: flex;
overflow: hidden;
margin-bottom: 12px;
}
.calc-bar-principal {
background: var(--brand, #20366a);
transition: width 0.3s ease;
}
.calc-bar-interest {
background: #64b5f6;
transition: width 0.3s ease;
}
.calc-bar-legend {
display: flex;
justify-content: center;
gap: 24px;
}
.calc-bar-legend span {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--muted, #555);
}
.legend-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.legend-principal .legend-dot {
background: var(--brand, #20366a);
}
.legend-interest .legend-dot {
background: #64b5f6;
}
/* Details */
.calc-details {
margin-bottom: 24px;
}
.calc-detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--border, #e3e3e8);
}
.calc-detail-row:last-child {
border-bottom: none;
}
.calc-detail-total {
border-top: 2px solid var(--brand, #20366a);
border-bottom: none;
margin-top: 8px;
padding-top: 16px;
}
.calc-detail-label {
font-size: 14px;
color: var(--muted, #555);
}
.calc-detail-value {
font-size: 16px;
font-weight: 600;
color: var(--text, #111);
}
.calc-detail-total .calc-detail-value {
font-size: 20px;
font-weight: 700;
color: var(--brand, #20366a);
}
/* Apply Button */
.calc-apply-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 16px 24px;
background: var(--brand, #20366a);
color: #fff;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-radius: 10px;
transition: all 0.2s ease;
margin-top: auto;
}
.calc-apply-btn:hover {
background: #2952a3;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(32, 54, 106, 0.3);
}
.calc-apply-btn i {
width: 18px;
height: 18px;
}
.calc-disclaimer {
font-size: 11px;
color: var(--muted, #555);
text-align: center;
margin: 16px 0 0;
line-height: 1.5;
}
/* Benefits Section */
.calc-benefits {
padding: 80px 0;
background: #fff;
}
.calc-benefits h2 {
text-align: center;
font-size: 28px;
font-weight: 700;
color: var(--text, #111);
margin: 0 0 40px;
}
.calc-benefits-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 900px;
margin: 0 auto;
}
.calc-benefit {
text-align: center;
}
.calc-benefit-icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, #e8f0fe 0%, #f0f4ff 100%);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}
.calc-benefit-icon i {
width: 26px;
height: 26px;
color: var(--brand, #20366a);
}
.calc-benefit h4 {
font-size: 15px;
font-weight: 600;
color: var(--text, #111);
margin: 0 0 8px;
}
.calc-benefit p {
font-size: 13px;
line-height: 1.6;
color: var(--muted, #555);
margin: 0;
}
/* Responsive */
@media (max-width: 900px) {
.calc-wrapper {
grid-template-columns: 1fr;
max-width: 500px;
}
.calc-benefits-grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
}
@media (max-width: 640px) {
.calc-section {
padding: 40px 0 60px;
}
.calc-inputs-card,
.calc-results-card {
padding: 28px 24px;
}
.calc-payment-amount {
font-size: 44px;
}
.calc-benefits-grid {
grid-template-columns: 1fr 1fr;
gap: 24px;
}
}
/* ============================================
ABOUT PAGE
Extracted from pages/about.html
============================================ */
.hero-btns {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 8px;
}
.hero-btns .btn {
display: inline-flex;
align-items: center;
gap: 8px;
}
.hero-btns .btn svg {
width: 18px;
height: 18px;
}
/* Section Label */
.about-label {
display: inline-block;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--brand);
margin-bottom: 12px;
}
/* Stats Bar */
.about-stats-bar {
background: #fff;
padding: 48px 0;
border-bottom: 1px solid var(--border);
}
.about-stats-row {
display: flex;
justify-content: center;
align-items: center;
gap: 48px;
flex-wrap: wrap;
}
.about-stat {
text-align: center;
}
.about-stat-num {
display: block;
font-size: 42px;
font-weight: 800;
color: var(--brand);
line-height: 1;
letter-spacing: -0.02em;
}
.about-stat-text {
display: block;
font-size: 14px;
color: var(--muted);
margin-top: 6px;
}
.about-stat-divider {
width: 1px;
height: 48px;
background: var(--border);
}
/* Mission Section */
.about-mission {
padding: 100px 0;
}
.about-mission-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.about-mission-text h2 {
font-size: 38px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 20px;
color: var(--text);
}
.about-mission-text .about-lead {
font-size: 18px;
line-height: 1.7;
color: var(--text);
margin-bottom: 16px;
}
.about-mission-text p {
font-size: 16px;
line-height: 1.8;
color: var(--muted);
}
.about-mission-cards {
display: flex;
flex-direction: column;
gap: 16px;
}
.about-mission-card {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 24px;
background: var(--bg-alt);
border-radius: 16px;
border: 1px solid var(--border);
transition: all 0.25s ease;
}
.about-mission-card:hover {
border-color: var(--brand);
box-shadow: 0 8px 24px rgba(32,54,106,0.12);
transform: translateY(-4px);
}
.about-mission-icon {
width: 48px;
height: 48px;
background: #fff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.about-mission-icon i {
width: 24px;
height: 24px;
color: var(--brand);
}
.about-mission-card-content h3 {
font-size: 17px;
font-weight: 700;
margin-bottom: 4px;
color: var(--text);
}
.about-mission-card-content p {
font-size: 14px;
color: var(--muted);
margin: 0;
line-height: 1.6;
}
/* Values Section */
.about-values {
background: var(--bg-alt);
padding: 100px 0;
}
.about-section-header {
text-align: center;
max-width: 560px;
margin: 0 auto 56px;
}
.about-section-header h2 {
font-size: 36px;
font-weight: 700;
margin-bottom: 12px;
color: var(--text);
}
.about-section-header p {
font-size: 17px;
color: var(--muted);
line-height: 1.6;
}
.about-values-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 900px;
margin: 0 auto;
}
.about-value-item {
display: flex;
gap: 20px;
padding: 32px;
background: #fff;
border-radius: 16px;
border: 1px solid var(--border);
transition: all 0.25s ease;
}
.about-value-item:hover {
border-color: var(--brand);
box-shadow: 0 8px 24px rgba(32,54,106,0.12);
transform: translateY(-4px);
}
.about-value-num {
font-size: 32px;
font-weight: 800;
color: var(--brand);
opacity: 0.25;
line-height: 1;
}
.about-value-content h3 {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
color: var(--text);
}
.about-value-content p {
font-size: 15px;
color: var(--muted);
line-height: 1.7;
margin: 0;
}
/* Why Different Section */
.about-different {
padding: 100px 0;
}
.about-different-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.about-different-content h2 {
font-size: 36px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 16px;
color: var(--text);
}
.about-different-content .about-lead {
font-size: 17px;
line-height: 1.7;
color: var(--muted);
margin-bottom: 32px;
}
.about-checklist {
display: flex;
flex-direction: column;
gap: 20px;
}
.about-check-item {
display: flex;
gap: 16px;
align-items: flex-start;
}
.about-check-icon {
width: 28px;
height: 28px;
background: #dcfce7;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.about-check-icon i {
width: 16px;
height: 16px;
color: #16a34a;
stroke-width: 3;
}
.about-check-text strong {
display: block;
font-size: 16px;
font-weight: 600;
color: var(--text);
margin-bottom: 2px;
}
.about-check-text span {
font-size: 14px;
color: var(--muted);
}
/* Testimonial */
.about-testimonial-wrap {
position: relative;
}
.about-testimonial {
background: linear-gradient(145deg, #f8fafc 0%, #eef4fb 100%);
border-radius: 24px;
padding: 40px;
position: relative;
}
.about-testimonial-quote {
position: absolute;
top: -16px;
left: 32px;
width: 48px;
height: 48px;
background: var(--brand);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.about-testimonial-quote i, .about-testimonial-quote svg {
width: 24px;
height: 24px;
color: #fff !important;
stroke: #fff !important;
}
.about-testimonial p {
font-size: 18px;
line-height: 1.8;
color: var(--text);
font-style: italic;
margin: 16px 0 24px;
}
.about-testimonial-author {
display: flex;
align-items: center;
gap: 14px;
}
.about-testimonial-avatar {
width: 48px;
height: 48px;
background: var(--brand);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 700;
font-size: 16px;
}
.about-testimonial-info strong {
display: block;
font-size: 15px;
color: var(--text);
}
.about-testimonial-info span {
font-size: 13px;
color: var(--muted);
}
.about-testimonial-stars {
display: flex;
gap: 4px;
margin-top: 20px;
}
.about-testimonial-stars i, .about-testimonial-stars svg {
width: 18px;
height: 18px;
color: #f59e0b !important;
fill: #f59e0b !important;
stroke: #f59e0b !important;
}
/* Network Section */
.about-network {
background: var(--bg-alt);
padding: 100px 0;
}
.about-network-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.about-network-item {
background: #fff;
border-radius: 16px;
padding: 32px 24px;
text-align: center;
border: 1px solid var(--border);
transition: all 0.25s ease;
}
.about-network-item:hover {
border-color: var(--brand);
box-shadow: 0 8px 24px rgba(32,54,106,0.12);
transform: translateY(-4px);
}
.about-network-icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, #e8f0fe 0%, #f0f4ff 100%);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
}
.about-network-icon i {
width: 26px;
height: 26px;
color: var(--brand);
}
.about-network-item h4 {
font-size: 16px;
font-weight: 700;
margin-bottom: 8px;
color: var(--text);
}
.about-network-item p {
font-size: 14px;
color: var(--muted);
line-height: 1.6;
margin: 0;
}
/* License Section */
.about-license {
padding: 80px 0;
}
.about-license-card {
display: flex;
align-items: flex-start;
gap: 32px;
max-width: 720px;
margin: 0 auto;
background: var(--bg-alt);
border-radius: 20px;
padding: 40px;
border: 1px solid var(--border);
}
.about-license-badge {
width: 64px;
height: 64px;
background: linear-gradient(135deg, #dcfce7 0%, #d1fae5 100%);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.about-license-badge i {
width: 32px;
height: 32px;
color: #16a34a;
}
.about-license-content h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
color: var(--text);
}
.about-license-content > p {
font-size: 15px;
color: var(--muted);
line-height: 1.7;
margin-bottom: 20px;
}
.about-license-details {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.about-license-detail {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--muted);
}
.about-license-detail i {
width: 16px;
height: 16px;
color: var(--brand);
}
.about-license-detail a {
color: var(--brand);
font-weight: 600;
text-decoration: none;
}
.about-license-detail a:hover {
text-decoration: underline;
}
/* Responsive */
@media (max-width: 1024px) {
.about-stats-row {
gap: 32px;
}
.about-stat-divider {
display: none;
}
.about-mission-wrapper,
.about-different-grid {
grid-template-columns: 1fr;
gap: 48px;
}
.about-values-grid {
grid-template-columns: 1fr;
}
.about-network-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.about-stats-bar {
padding: 32px 0;
}
.about-stats-row {
gap: 24px;
}
.about-stat-num {
font-size: 32px;
}
.about-mission,
.about-values,
.about-different,
.about-network {
padding: 64px 0;
}
.about-mission-text h2,
.about-different-content h2,
.about-section-header h2 {
font-size: 28px;
}
.about-value-item {
padding: 24px;
}
.about-value-num {
font-size: 24px;
}
.about-network-grid {
grid-template-columns: 1fr;
}
.about-license-card {
flex-direction: column;
text-align: center;
padding: 32px 24px;
}
.about-license-badge {
margin: 0 auto;
}
.about-license-details {
justify-content: center;
}
.about-testimonial {
padding: 32px 24px;
}
.about-testimonial p {
font-size: 16px;
}
.hero-btns {
flex-direction: column;
gap: 12px;
}
.hero-btns .btn {
width: 100%;
justify-content: center;
}
}
/* ============================================
UTILITY CLASSES FOR INLINE STYLE REMOVAL
Added to replace static inline style attributes
============================================ */
/* Icon Spacing */
.icon-mr-05 { margin-right: 0.5rem; }
.icon-mr-025 { margin-right: 0.25rem; }
.icon-mr-8 { margin-right: 8px; }
/* Icon Colors */
.icon-success { color: #22c55e; }
.icon-brand-navy { color: #20366a; }
/* Icon Sizes (additional) */
.icon-48 { width: 48px; height: 48px; }
/* Text Sizes */
.text-18 { font-size: 18px; }
.text-28 { font-size: 28px; }
/* Margins */
.mb-16-custom { margin-bottom: 16px; }
.mb-28 { margin: 0 0 28px; }
.mb-30 { margin-bottom: 30px; }
.mb-32-custom { margin: 0 0 32px; }
.mt-60 { margin-top: 60px; }
/* Flexbox Layouts */
.flex-shrink-0 { flex-shrink: 0; }
/* Search Container */
.search-container {
display: flex;
align-items: center;
gap: 12px;
background: var(--bg-alt);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 20px;
}
.search-input-custom {
flex: 1;
border: none;
outline: none;
font-size: 16px;
font-family: inherit;
color: var(--text);
background: transparent;
}
/* Category Grid (4 columns) */
.category-grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 768px) {
.category-grid-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.category-grid-4 {
grid-template-columns: 1fr 1fr;
}
}
/* Table Row Border */
.table-row-border {
border-bottom: 1px solid #e2e8f0;
}
/* Login Form */
.login-form {
display: grid;
gap: 0.5rem;
max-width: 420px;
}
.btn-no-border {
border: none;
}
/* Turnstile Container */
.turnstile-container {
margin: 16px 0;
}
/* Promo Banner Background */
.promo-banner-bg {
background-image: url(https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=1200&auto=format&fit=crop);
}
/* Welcome Hero Background */
.welcome-hero-bg {
background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url("/static/blog/img/welcome-bg.e81aab248344.jpg");
}
/* List Item Check Icons */
.check-list-item i,
.check-list-item svg {
color: #22c55e;
width: 18px;
height: 18px;
margin-right: 8px;
flex-shrink: 0;
}
/* Scroll offset for sticky header — DISP-02 */
.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
scroll-margin-top: 110px;
}
/* Author Bio Card — Phase 25 */
.author-bio-card {
margin-top: 3rem;
padding: 2rem;
background: var(--bg-alt);
border-radius: var(--radius-xl);
border: 1px solid var(--border);
}
.author-bio-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.author-bio-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--brand);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.author-bio-icon svg,
.author-bio-icon i {
color: #fff;
stroke: #fff;
width: 20px;
height: 20px;
}
.author-bio-name {
display: block;
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--text);
}
.author-bio-badge {
display: inline-block;
font-size: var(--text-xs);
font-weight: var(--font-medium);
color: var(--brand-light);
background: #e8f0fe;
border-radius: var(--radius-full);
padding: 2px 10px;
margin-top: 4px;
}
.author-bio-text {
margin: 0;
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-relaxed);
}
@media (max-width: 640px) {
.author-bio-card {
padding: 1.25rem;
}
}
ard {
padding: 1.25rem;
}
}
padding: 1.25rem;
}
}