/* ============================================================ The Warranty Hub — shared landing-page stylesheet ------------------------------------------------------------ Used by all 9 asset landing pages under /landing/. Uses the same design tokens and patterns as preview.html so landing pages read as part of the same brand system. For production, WP developer should inline this into each page's or serve via a cached CSS handle. ============================================================ */ :root{ --navy:#1A2138; --navy-2:#252E4F; --navy-3:#0F1424; --green:#8DC63F; --green-dk:#74A832; --green-dk2:#5C8A28; --green-soft:#EEF6E0; --ink:#0F1424; --body:#374151; --muted:#6B7280; --line:#E5E7EB; --line-2:#EEF1F5; --bg:#FFFFFF; --bg-alt:#F7F9FB; --shadow-sm:0 1px 2px rgba(15,20,36,.06),0 1px 3px rgba(15,20,36,.08); --shadow:0 4px 14px rgba(15,20,36,.08),0 2px 6px rgba(15,20,36,.06); --shadow-lg:0 18px 40px rgba(15,20,36,.14); --radius:14px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--body);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;font-size:16px;padding-bottom:70px} @media (min-width:900px){body{padding-bottom:0}} img{max-width:100%;height:auto;display:block} a{color:var(--green-dk);text-decoration:none} a:hover{color:var(--green-dk2)} h1,h2,h3,h4{color:var(--ink);font-weight:800;line-height:1.12;margin:0 0 .55em;letter-spacing:-.018em} h1{font-size:clamp(2.1rem,5vw,3.6rem);letter-spacing:-.028em} h2{font-size:clamp(1.7rem,3.2vw,2.5rem)} h3{font-size:1.18rem;font-weight:700;letter-spacing:-.01em} p{margin:0 0 1em} /* topbar */ .topbar{position:fixed;top:0;left:0;right:0;z-index:60;padding-top:6px;background:rgba(15,20,36,.82);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid rgba(255,255,255,.06)} .topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;max-width:1280px;margin:0 auto;gap:28px} .brand{display:flex;align-items:center;text-decoration:none} .brand img{height:84px;width:auto;display:block;object-fit:contain;flex:none} @media (max-width:760px){.brand img{height:64px}.topbar-inner{padding:12px 22px}} @media (max-width:480px){.brand img{height:50px}.topbar-inner{padding:10px 18px;gap:16px}} .header-phone{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:.95rem;padding:9px 16px;border-radius:999px;background:rgba(141,198,63,.14);border:1px solid rgba(141,198,63,.45);transition:background .15s,border-color .15s,box-shadow .15s} .header-phone:hover{background:rgba(141,198,63,.26);border-color:var(--green);box-shadow:0 8px 22px rgba(141,198,63,.28);color:#fff} .header-phone svg{width:16px;height:16px;fill:var(--green);flex:none} @media (max-width:520px){.header-phone{padding:7px 12px;font-size:.85rem}.header-phone svg{width:14px;height:14px}} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:700;font-size:1rem;cursor:pointer;border:0;transition:transform .12s ease,box-shadow .15s ease,background .15s,border-color .15s;text-decoration:none;line-height:1;white-space:nowrap} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--green);color:#0E1A04;box-shadow:0 8px 20px rgba(141,198,63,.36)} .btn-primary:hover{background:var(--green-dk);box-shadow:0 10px 24px rgba(141,198,63,.45)} .btn-dark{background:var(--navy);color:#fff;box-shadow:0 6px 16px rgba(15,20,36,.2)} .btn-dark:hover{background:var(--navy-2);color:#fff} .btn-ghost-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5)} .btn-ghost-light:hover{background:#fff;color:var(--navy)} .btn-ghost-dark{background:transparent;color:var(--ink);border:1.5px solid var(--line)} .btn-ghost-dark:hover{background:var(--bg-alt);border-color:var(--green);color:var(--ink)} /* hero */ .hero{position:relative;background:#0F1424;color:#E5EAF5;overflow:hidden;min-height:720px} .hero-bg,.hero-overlay{position:absolute;inset:0;pointer-events:none;z-index:0} .hero-bg{ background:url('../branding/hero-vehicles.png') no-repeat 103% center; background-size:auto 108%; filter:brightness(.58) saturate(.82) contrast(.95); -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 26%,rgba(0,0,0,.18) 34%,rgba(0,0,0,.45) 41%,rgba(0,0,0,.78) 49%,#000 60%,#000 100%); mask-image:linear-gradient(90deg,transparent 0%,transparent 26%,rgba(0,0,0,.18) 34%,rgba(0,0,0,.45) 41%,rgba(0,0,0,.78) 49%,#000 60%,#000 100%); } .hero-overlay{z-index:1;background:linear-gradient(90deg,transparent 0%,transparent 35%,rgba(15,20,36,.18) 60%,rgba(15,20,36,.28) 100%),linear-gradient(180deg,rgba(15,20,36,.55) 0%,rgba(15,20,36,0) 28%,rgba(15,20,36,0) 65%,rgba(15,20,36,.85) 100%)} @media (max-width:980px){ .hero-bg{background-size:auto 100%;background-position:80% bottom;opacity:.45;-webkit-mask-image:none;mask-image:none} .hero-overlay{background:linear-gradient(180deg,rgba(15,20,36,.85) 0%,rgba(15,20,36,.6) 50%,rgba(15,20,36,.95) 100%)} } .hero-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:140px 28px 90px} .hero-content{max-width:640px} .hero-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--green);font-size:.9rem;font-weight:600;letter-spacing:.005em;margin-bottom:14px} .hero-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(141,198,63,.2)} .hero h1{font-size:clamp(2.6rem,5.8vw,4.6rem);font-weight:800;letter-spacing:-.025em;color:#fff;line-height:1.05;margin:0 0 .25em} .hero h1 .hl{color:var(--green)} .hero-sub{font-size:1.05rem;color:#B5BCCB;max-width:560px;margin:0 0 24px;line-height:1.55;font-weight:400} /* trust pills */ .trust-pills{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px;list-style:none;padding:0} .trust-pill{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);padding:6px 16px 6px 6px;border-radius:999px;color:#E5EAF5;font-size:.88rem;font-weight:500} .trust-pill-ico{width:32px;height:32px;border-radius:50%;background:var(--green-soft);display:inline-flex;align-items:center;justify-content:center;flex:none} .trust-pill-ico svg{width:16px;height:16px;fill:var(--green-dk2)} .hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px} .hero-price{display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding:8px 18px 8px 8px;border-radius:999px;background:rgba(141,198,63,.14);border:1px solid rgba(141,198,63,.5);color:var(--green);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em} .hero-price-ico{width:30px;height:30px;border-radius:50%;background:var(--green);display:inline-flex;align-items:center;justify-content:center;flex:none;color:#0E1A04;font-weight:800;font-size:.8rem} /* sections */ .section{padding:80px 0} .section--alt{background:var(--bg-alt)} .section--navy{background:var(--navy-3);color:#E2E6F1;text-align:center} .section--navy h2,.section--navy h3{color:#fff} .section--after-hero{padding-top:80px} .wrap{max-width:1180px;margin:0 auto;padding:0 22px} .center{text-align:center} .eyebrow{display:inline-block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green-dk);font-weight:700;margin-bottom:.8em} .lead{font-size:1.12rem;color:var(--muted);max-width:680px;margin:0 auto 2em} /* stat strip */ .stat-strip{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;text-align:center} .stat-strip p{margin:0;color:var(--ink);font-size:1.02rem;font-weight:500;max-width:800px;margin-left:auto;margin-right:auto;padding:0 22px} .stat-strip strong{color:var(--green-dk2);font-weight:800} /* benefit tiles — reuses plan-card pattern */ .plans{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:38px} @media (max-width:900px){.plans{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.plans{grid-template-columns:1fr}} .plan-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 26px 22px;transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .25s;text-align:left;display:flex;flex-direction:column;text-decoration:none;color:inherit;position:relative;overflow:hidden} .plan-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green),var(--green-dk));transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)} .plan-card:hover{border-color:var(--green);box-shadow:0 16px 36px rgba(141,198,63,.16),0 2px 6px rgba(26,33,56,.05);transform:translateY(-4px)} .plan-card:hover::before{transform:scaleX(1)} .plan-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:linear-gradient(135deg,var(--green-soft) 0%,rgba(141,198,63,.2) 100%);border-radius:14px;transition:background .25s ease;margin-bottom:16px} .plan-icon svg{width:28px;height:28px;fill:var(--green-dk2);transition:fill .25s ease} .plan-card:hover .plan-icon{background:linear-gradient(135deg,var(--green) 0%,var(--green-dk) 100%)} .plan-card:hover .plan-icon svg{fill:#fff} .plan-card h3{margin:0 0 .4em;color:var(--ink);font-size:1.05rem;letter-spacing:-.01em} .plan-card p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.55} /* compare-grid — Total Cover vs Endurance side-by-side on Cars landing page. Redesigned with tighter blurbs, definition-list feature rows (label/value pairs), prominent price, primary CTA button + warning-style exclusions link opening the PDS directly at page 12 (§4 "What's not included"). */ .compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px;text-align:left} @media (max-width:820px){.compare-grid{grid-template-columns:1fr}} .compare-card{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);padding:28px 28px 22px;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s} .compare-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(15,20,36,.09)} .compare-card--primary{background:linear-gradient(180deg,rgba(141,198,63,.06),#fff 55%);border-color:var(--green-dk);box-shadow:0 0 0 1px var(--green-dk) inset,0 8px 20px rgba(141,198,63,.10)} .compare-tag{display:inline-block;align-self:flex-start;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:6px;margin-bottom:14px} .compare-tag--primary{background:var(--green);color:#0E1A04} .compare-tag--alt{background:var(--bg-alt);color:var(--ink);border:1px solid var(--line)} .compare-card h3{font-size:1.7rem;font-weight:800;color:var(--ink);margin:0 0 6px;letter-spacing:-.02em} .compare-sub{font-size:.95rem;color:var(--muted);line-height:1.5;margin:0 0 18px} .compare-list{padding:0;margin:0 0 18px;border-top:1px solid var(--line-2)} .compare-list > div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-2)} .compare-list dt{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);flex:none;min-width:5em} .compare-list dd{margin:0;font-size:.9rem;font-weight:600;color:var(--ink);text-align:right;line-height:1.4} .compare-price{display:flex;align-items:baseline;justify-content:flex-end;gap:7px;padding:14px 0 16px;margin-top:auto;margin-bottom:14px} .compare-price span{font-size:.88rem;color:var(--muted);font-weight:500} .compare-price strong{color:var(--ink);font-weight:800;font-size:2rem;letter-spacing:-.03em;line-height:1} .compare-price small{color:var(--muted);font-weight:500;font-size:.84rem} .btn-block{width:100%;justify-content:center;text-align:center} .btn-secondary{background:#fff;color:var(--ink);border:1.5px solid var(--ink);padding:12px 20px;border-radius:999px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:background .15s,color .15s} .btn-secondary:hover{background:var(--ink);color:#fff} .compare-exclusions{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;padding:10px 14px;color:#8B2A21;background:#FDECEA;border:1px solid #F5C3BD;text-decoration:none;font-size:.82rem;font-weight:600;border-radius:8px;transition:background .15s,border-color .15s} .compare-exclusions:hover{background:#F5C3BD;border-color:#B4453A;text-decoration:none} .compare-exclusions svg{width:15px;height:15px;fill:currentColor;flex:none} .compare-exclusions strong{font-weight:800} .compare-help{margin:26px auto 0;max-width:640px;font-size:.9rem;color:var(--muted);text-align:center} .compare-help a{color:var(--green-dk);text-decoration:none} /* incl-grid — what's covered */ .incl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:32px} .incl-item{display:flex;gap:14px;align-items:stretch;padding:18px;background:#fff;border:1px solid var(--line);border-radius:14px;text-align:left;transition:border-color .15s,box-shadow .15s} .incl-item:hover{border-color:var(--green);box-shadow:var(--shadow-sm)} .incl-tick{width:34px;height:34px;border-radius:50%;background:var(--green-soft);display:inline-flex;align-items:center;justify-content:center;flex:none} .incl-tick svg{width:18px;height:18px;fill:var(--green-dk2)} .incl-text{display:flex;flex-direction:column;flex:1} .incl-text h4{font-size:1rem;margin:0 0 4px;color:var(--ink);font-weight:700;letter-spacing:-.005em} .incl-text p{font-size:.88rem;color:var(--muted);margin:0;line-height:1.5;flex:1} @media (max-width:1024px){.incl-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.incl-grid{grid-template-columns:1fr;gap:12px}} /* claims strip — navy dollar tiles */ .claims{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px} .claim-card{background:linear-gradient(180deg,var(--navy) 0,var(--navy-2) 100%);color:#E5EAF5;border-radius:var(--radius);padding:32px 28px;position:relative;overflow:hidden;text-align:left} .claim-card::before{content:"";position:absolute;top:-40px;right:-30px;width:140px;height:140px;background:var(--green);opacity:.12;border-radius:50%;filter:blur(24px)} .claim-dollar{display:block;font-size:2.4rem;font-weight:800;color:var(--green);margin-bottom:6px;letter-spacing:-.02em;font-variant-numeric:tabular-nums} .claim-card h3{color:#fff;margin:0 0 6px;font-size:1.05rem;font-weight:700} .claim-card p{color:#B5BCCB;font-size:.9rem;margin:0} .claim-tag{display:inline-block;background:rgba(141,198,63,.14);color:var(--green);font-size:.7rem;font-weight:700;padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.06em;margin-top:16px} @media (max-width:900px){.claims{grid-template-columns:1fr;gap:16px}} /* steps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px} .step{text-align:center;padding:38px 20px 26px;background:#fff;border:1px solid var(--line);border-radius:18px;position:relative;transition:transform .15s,box-shadow .15s} .step:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .step-num{position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:44px;height:44px;background:var(--green);color:#0E1A04;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.15rem;border:4px solid #fff;box-shadow:var(--shadow-sm)} .step h3{font-size:1.1rem;margin:8px 0 .4em} .step p{font-size:.95rem;color:var(--muted);margin:0} @media (max-width:900px){.steps{grid-template-columns:1fr}} /* testimonial */ .tm-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:36px 32px;text-align:center;max-width:720px;margin:38px auto 0;box-shadow:var(--shadow-sm)} .tm-stars{color:var(--green);margin-bottom:14px;letter-spacing:.08em;font-size:1.1rem} .tm-quote{color:var(--ink);font-size:1.12rem;line-height:1.55;font-weight:500;margin:0 0 18px} .tm-who{font-weight:700;color:var(--ink);font-size:.92rem} .tm-who small{color:var(--muted);font-weight:500;display:block;margin-top:2px} /* faq */ .faq-wrap{max-width:820px;margin:38px auto 0} .faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:12px;overflow:hidden;transition:border-color .15s,box-shadow .15s} .faq-item:hover{border-color:var(--green)} .faq-item[open]{border-color:var(--green);box-shadow:var(--shadow)} .faq-q{cursor:pointer;list-style:none;padding:20px 56px 20px 26px;font-weight:700;color:var(--ink);font-size:1.02rem;position:relative;display:block;line-height:1.4;letter-spacing:-.005em} .faq-q::-webkit-details-marker{display:none} .faq-q::after{content:"";position:absolute;right:24px;top:50%;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 14px no-repeat;transform:translateY(-50%) rotate(0deg);transition:transform .2s ease;color:var(--green-dk2)} .faq-item[open] .faq-q::after{transform:translateY(-50%) rotate(45deg);background:linear-gradient(currentColor,currentColor) center/14px 2px no-repeat} .faq-a{padding:0 26px 22px;color:var(--body);font-size:.96rem;line-height:1.6} .faq-a p{margin:0} @media (max-width:560px){.faq-q{padding:16px 48px 16px 18px;font-size:.98rem}.faq-q::after{right:18px}.faq-a{padding:0 18px 18px}} /* footer */ .footer{background:var(--navy-3);color:#B5BCCB;padding:56px 0 26px} .footer-inner{max-width:900px;margin:0 auto;padding:0 22px;text-align:center} .footer-inner p{font-size:.9rem;color:#B5BCCB;max-width:720px;margin:0 auto 14px;line-height:1.6} .footer-inner p strong{color:#fff} .footer-links{margin:18px 0 0} .footer-links a{color:#E2E6F1;font-size:.88rem;margin:0 10px;display:inline-block;padding:4px 0} .footer-links a:hover{color:var(--green)} .footer-bottom{border-top:1px solid #252E4F;margin-top:26px;padding:18px 22px 0;max-width:900px;margin-left:auto;margin-right:auto;color:#7B8398;font-size:.8rem;text-align:center} /* phone icon ring */ @keyframes phoneRing{0%,72%,100%{transform:rotate(0)}74%,80%,86%,92%{transform:rotate(-14deg)}77%,83%,89%,95%{transform:rotate(14deg)}} a[href^="tel:"] svg{transform-origin:center;animation:phoneRing 3.4s ease-in-out infinite;animation-delay:1.5s} @media (prefers-reduced-motion:reduce){a[href^="tel:"] svg{animation:none}} /* sticky mobile CTA */ .sticky-cta{position:fixed;bottom:0;left:0;right:0;background:var(--navy);border-top:1px solid rgba(255,255,255,.08);padding:10px 16px;display:flex;gap:8px;align-items:center;z-index:100;box-shadow:0 -6px 20px rgba(15,20,36,.35)} .sticky-cta .btn{flex:1;justify-content:center;padding:12px 16px;font-size:.95rem} .sticky-cta .btn-ghost{color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,.35);flex:0 0 auto;padding:12px 14px;border-radius:999px} .sticky-cta .btn-ghost svg{width:18px;height:18px;fill:#fff} @media (min-width:900px){.sticky-cta{display:none}}