/* ════════════════════════════════════════════ apply-lp.css MIDsource — Apply Landing Page Styles Save to: css/apply-lp.css Load in AFTER style-v3.css ════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── CSS VARIABLES ── */ :root { --blue: #0d70b7; --blue-dark: #0a5a94; --navy: #011733; --navy-mid: #03294f; --white: #ffffff; --off-white: #f4f8fc; --border: rgba(13,112,183,0.14); --text: #1a1a2e; --text-muted: #666; --gold: #f5a623; --green: #22c55e; --font-head: 'Nunito Sans', sans-serif; --font-body: 'Open Sans', sans-serif; } body { font-family: var(--font-body); color: var(--text); background: #fff; line-height: 1.6; } a { color: var(--blue); text-decoration: none; } img { max-width: 100%; display: block; } /* ════════════════════════════════════════════ TOP TRUST BAR ════════════════════════════════════════════ */ .top-trust-bar { background: var(--navy); padding: 10px 0; text-align: center; } .top-trust-bar .inner { max-width: 1140px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 24px; } .top-trust-bar span { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.85); display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); } .top-trust-bar span i { color: var(--gold); font-size: 13px; } /* ════════════════════════════════════════════ HERO ════════════════════════════════════════════ */ .lp-hero { background: linear-gradient(-45deg, #011733, #03294f, #062040, #010f24); background-size: 400% 400%; animation: bgFlow 14s ease infinite; padding: 64px 0 72px; position: relative; overflow: hidden; } .lp-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 40%, rgba(13,112,183,0.22) 0%, transparent 65%); pointer-events: none; } @keyframes bgFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .lp-hero .inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 440px; gap: 56px; align-items: center; position: relative; z-index: 1; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.70); margin-bottom: 16px; font-family: var(--font-head); } .hero-eyebrow::before, .hero-eyebrow::after { content: ''; display: block; width: 24px; height: 1px; background: rgba(255,255,255,0.40); } .lp-hero h1 { font-size: clamp(30px, 4vw, 52px); font-weight: 900; color: #fff; line-height: 1.12; letter-spacing: -0.03em; margin-bottom: 20px; font-family: var(--font-head); } .lp-hero h1 span { color: #5bbfff; } .lp-hero .hero-sub { font-size: 17px; color: rgba(255,255,255,0.72); line-height: 1.7; margin-bottom: 32px; font-weight: 300; } .hero-bullets { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; } .hero-bullets li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(255,255,255,0.88); font-weight: 400; } .hero-bullets li i { color: var(--green); font-size: 16px; flex-shrink: 0; } .hero-proof { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .hero-proof .stars { color: var(--gold); font-size: 16px; letter-spacing: 1px; } .hero-proof .proof-text { font-size: 13px; color: rgba(255,255,255,0.65); font-family: var(--font-head); } .hero-proof .proof-text strong { color: rgba(255,255,255,0.90); } /* ── HERO FORM CARD ── */ .hero-form-card { background: #fff; border-radius: 18px; box-shadow: 0 24px 64px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.15); overflow: hidden; } .hfc-header { background: var(--blue); padding: 18px 24px; text-align: center; } .hfc-header h3 { font-size: 16px; font-weight: 800; color: #fff; margin: 0; font-family: var(--font-head); letter-spacing: 0.01em; } .hfc-header p { font-size: 12px; color: rgba(255,255,255,0.80); margin: 4px 0 0; font-family: var(--font-head); } /* Progress bar */ .progress-wrap { padding: 16px 24px 0; } .progress-label { font-size: 11px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-head); margin-bottom: 6px; display: flex; justify-content: space-between; } .progress-bar-track { height: 5px; background: #e8f0fb; border-radius: 10px; overflow: hidden; } .progress-bar-fill { height: 100%; background: var(--blue); border-radius: 10px; transition: width 0.4s ease; } /* Form steps */ .hfc-body { padding: 20px 24px 24px; } .form-step { display: none; } .form-step.active { display: block; } .hfc-body label { font-size: 12px; font-weight: 700; color: #333; display: block; margin-bottom: 4px; margin-top: 14px; font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.06em; } .hfc-body label:first-child { margin-top: 0; } .hfc-body input[type="text"], .hfc-body input[type="email"], .hfc-body select, .hfc-body textarea { width: 100%; height: 44px; padding: 10px 13px; font-size: 14px; color: #333; background: #fafbfc; border: 1px solid #dde3ea; border-radius: 8px; font-family: var(--font-body); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .hfc-body input:focus, .hfc-body select:focus, .hfc-body textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(13,112,183,0.10); background: #fff; } .hfc-body textarea { height: 80px; resize: none; } .hfc-body .check-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #444; margin-bottom: 6px; cursor: pointer; font-family: var(--font-body); text-transform: none; font-weight: 400; letter-spacing: 0; } .hfc-body .check-label input { accent-color: var(--blue); width: 15px; height: 15px; flex-shrink: 0; } /* Step navigation buttons */ .step-nav { display: flex; gap: 10px; margin-top: 18px; } .btn-next, .btn-prev, .btn-submit { flex: 1; padding: 13px; border: none; border-radius: 8px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--font-head); letter-spacing: 0.04em; text-transform: uppercase; transition: all 0.22s ease; } .btn-next, .btn-submit { background: var(--blue); color: #fff; box-shadow: 0 4px 16px rgba(13,112,183,0.35); } .btn-next:hover, .btn-submit:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(13,112,183,0.45); } .btn-prev { background: #f0f4f8; color: #555; flex: 0 0 80px; } .btn-prev:hover { background: #e0e8f0; } .submit-trust { text-align: center; margin-top: 12px; font-size: 12px; color: #888; font-family: var(--font-head); display: flex; align-items: center; justify-content: center; gap: 5px; } .submit-trust i { color: var(--green); } /* ════════════════════════════════════════════ URGENCY BANNER ════════════════════════════════════════════ */ .urgency-banner { background: linear-gradient(90deg, #22c55e, #00C3F5); padding: 12px 0; text-align: center; } .urgency-banner p { font-size: 14px; font-weight: 700; color: #fff; font-family: var(--font-head); letter-spacing: 0.03em; display: flex; align-items: center; justify-content: center; gap: 8px; } .urgency-banner i { font-size: 15px; } /* ════════════════════════════════════════════ HOW IT WORKS ════════════════════════════════════════════ */ .how-section { padding: 72px 0; background: var(--off-white); } .section-inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; } .section-eyebrow { text-align: center; display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; font-family: var(--font-head); } .section-h2 { text-align: center; font-size: clamp(26px, 3vw, 38px); font-weight: 800; color: var(--text); margin-bottom: 48px; font-family: var(--font-head); letter-spacing: -0.02em; } .section-h2 span { color: var(--blue); } .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } /* ── Step Card base ── */ .step-card { background: #fff; border-radius: 14px; padding: 32px 28px; border: 1px solid var(--border); text-align: center; box-shadow: 0 4px 18px rgba(0,0,0,0.06); position: relative; overflow: hidden; /* Smooth transition for ALL changing properties */ transition: background 0.30s ease, border-color 0.25s ease, box-shadow 0.30s ease, transform 0.25s ease; } /* ── Step Card HOVER ── */ .step-card:hover { background: var(--blue); border-color: var(--blue-dark); box-shadow: 0 14px 44px rgba(13,112,183,0.42); transform: translateY(-5px); } /* Number circle */ .step-card .step-num { width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: #fff; font-size: 20px; font-weight: 900; font-family: var(--font-head); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; transition: background 0.25s ease, color 0.25s ease; } .step-card:hover .step-num { background: #fff; color: var(--blue); } /* Heading */ .step-card h4 { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 10px; font-family: var(--font-head); transition: color 0.25s ease; } .step-card:hover h4 { color: #fff; } /* Body text */ .step-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; transition: color 0.25s ease; } .step-card:hover p { color: rgba(255,255,255,0.88); } /* Arrow connector between cards */ .step-card::after { content: '→'; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--blue); font-weight: 700; transition: color 0.25s ease; /* Must be above the card but not intercept pointer events */ z-index: 2; pointer-events: none; } .step-card:hover::after { color: rgba(13,112,183,0.60); } .step-card:last-child::after { display: none; } /* ════════════════════════════════════════════ STATS BAR + ANIMATED COUNTER ════════════════════════════════════════════ */ .stats-bar { background: var(--blue); padding: 40px 0; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: 1140px; margin: 0 auto; padding: 0 24px; } .stat-item { text-align: center; padding: 0 20px; border-right: 1px solid rgba(255,255,255,0.20); } .stat-item:last-child { border-right: none; } .stat-item .num { font-size: clamp(28px, 3vw, 42px); font-weight: 900; color: #fff; font-family: var(--font-head); line-height: 1; margin-bottom: 6px; /* smooth pop when count starts */ transition: transform 0.2s ease; } .stat-item .label { font-size: 13px; color: rgba(255,255,255,0.72); font-family: var(--font-head); } /* ════════════════════════════════════════════ FAQ ════════════════════════════════════════════ */ .faq-section { padding: 72px 0; background: var(--off-white); } .faq-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .faq-video-col { position: sticky; top: 100px; } .faq-video-wrap { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,0.18); background: #000; } .faq-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .faq-video-label { margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--text-muted); text-align: center; font-family: var(--font-head); } .faq-list { margin: 0; } .faq-item { background: #fff; border-radius: 10px; margin-bottom: 12px; border: 1px solid var(--border); overflow: hidden; } .faq-q { width: 100%; text-align: left; padding: 18px 22px; background: none; border: none; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--text); font-family: var(--font-head); display: flex; justify-content: space-between; align-items: center; } .faq-q .faq-icon { color: var(--blue); font-size: 18px; flex-shrink: 0; transition: transform 0.25s ease; } .faq-item.open .faq-icon { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.25s ease; font-size: 14px; color: #555; line-height: 1.8; padding: 0 22px; font-family: var(--font-body); } .faq-item.open .faq-a { max-height: 200px; padding: 0 22px 18px; } /* ════════════════════════════════════════════ SOCIAL PROOF / TESTIMONIAL CAROUSEL ════════════════════════════════════════════ */ .proof-section { padding: 56px 0; background: #fff; } /* Owl Carousel wrapper */ .proof-carousel { padding-bottom: 12px; } /* Individual cards inside carousel */ .proof-carousel .proof-card { background: var(--off-white); border-radius: 12px; padding: 28px 24px; border: 1px solid var(--border); margin: 8px 12px 20px; /* side margin so shadow doesn't clip */ box-shadow: 0 2px 12px rgba(0,0,0,0.05); transition: box-shadow 0.25s ease, transform 0.25s ease; } .proof-carousel .proof-card:hover { box-shadow: 0 8px 28px rgba(13,112,183,0.14); transform: translateY(-2px); } .proof-card .stars { color: var(--gold); font-size: 15px; margin-bottom: 12px; letter-spacing: 2px; } .proof-card p { font-size: 14px; color: #555; line-height: 1.75; font-style: italic; margin-bottom: 16px; } .proof-card .reviewer { font-size: 13px; font-weight: 700; color: var(--text); font-family: var(--font-head); } .proof-card .reviewer span { font-weight: 400; color: #888; } /* Owl Carousel dots */ .proof-carousel .owl-dots { margin-top: 10px; text-align: center; } .proof-carousel .owl-dots .owl-dot span { display: block; width: 10px; height: 10px; border-radius: 50%; background: #ccd9e8; margin: 0 4px; transition: background 0.25s ease, transform 0.25s ease; } .proof-carousel .owl-dots .owl-dot.active span, .proof-carousel .owl-dots .owl-dot:hover span { background: var(--blue); transform: scale(1.25); } /* Owl nav arrows (hidden by default, shown if you enable nav:true) */ .proof-carousel .owl-nav button { background: var(--blue) !important; color: #fff !important; border-radius: 50% !important; width: 36px; height: 36px; font-size: 18px !important; line-height: 36px !important; } .proof-carousel .owl-nav button:hover { background: var(--blue-dark) !important; } /* ════════════════════════════════════════════ BOTTOM CTA BAND ════════════════════════════════════════════ */ .cta-band { background: linear-gradient(-45deg, #011733, #03294f, #062040, #010f24); background-size: 400% 400%; animation: bgFlow 14s ease infinite; padding: 64px 0; text-align: center; } .cta-band h2 { font-size: clamp(24px, 3vw, 40px); font-weight: 900; color: #fff; font-family: var(--font-head); margin-bottom: 14px; letter-spacing: -0.02em; } .cta-band h2 span { color: #5bbfff; } .cta-band p { font-size: 16px; color: rgba(255,255,255,0.70); margin-bottom: 32px; } .cta-band .cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .cta-band .btn-primary { display: inline-block; padding: 16px 36px; background: var(--blue); color: #fff; border-radius: 10px; font-size: 15px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; font-family: var(--font-head); box-shadow: 0 4px 20px rgba(13,112,183,0.45); transition: background 0.2s ease, transform 0.18s ease; } .cta-band .btn-primary:hover { background: var(--blue-dark); transform: translateY(-2px); color: #fff; } .cta-band .btn-outline { display: inline-flex; align-items: center; gap: 8px; padding: 16px 32px; border: 2px solid rgba(255,255,255,0.35); color: #fff; border-radius: 10px; font-size: 15px; font-weight: 700; font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.05em; transition: border-color 0.2s ease, background 0.2s ease; } .cta-band .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.08); color: #fff; } /* ════════════════════════════════════════════ FOOTER ════════════════════════════════════════════ */ .lp-footer { background: var(--navy); padding: 28px 0; text-align: center; } .lp-footer .inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .lp-footer .copy { font-size: 13px; color: rgba(255,255,255,0.45); font-family: var(--font-head); } .lp-footer .footer-links { display: flex; gap: 20px; } .lp-footer .footer-links a { font-size: 13px; color: rgba(255,255,255,0.50); font-family: var(--font-head); } .lp-footer .footer-links a:hover { color: rgba(255,255,255,0.80); } /* ════════════════════════════════════════════ MOBILE STICKY CTA ════════════════════════════════════════════ */ .mobile-cta-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: var(--blue); padding: 14px 20px; box-shadow: 0 -4px 20px rgba(0,0,0,0.20); } .mobile-cta-bar a { display: block; text-align: center; font-size: 16px; font-weight: 800; color: #fff; font-family: var(--font-head); letter-spacing: 0.04em; } /* ════════════════════════════════════════════ SCROLL REVEAL ════════════════════════════════════════════ */ .sr { opacity: 0; transform: translateY(24px); transition: opacity 0.80s ease, transform 0.80s ease; } .sr.visible { opacity: 1; transform: none; } .sr-delay-1 { transition-delay: 0.12s; } .sr-delay-2 { transition-delay: 0.24s; } .sr-delay-3 { transition-delay: 0.36s; } /* ════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════ */ @media (max-width: 991px) { .lp-hero .inner { grid-template-columns: 1fr; gap: 40px; } .hero-form-card { max-width: 500px; margin: 0 auto; } .steps-grid { grid-template-columns: 1fr; } .step-card::after { display: none; } .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.15); padding: 12px 0; } .stat-item:nth-child(3), .stat-item:last-child { border-bottom: none; } .faq-inner { grid-template-columns: 1fr; gap: 40px; } .faq-video-col { position: static; } } @media (max-width: 640px) { .top-trust-bar .inner { gap: 12px; } .mobile-cta-bar { display: block; } body { padding-bottom: 56px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } }