#approved-offer-hero { color-scheme: dark; --ink: #05080e; --cyan: #00d4ff; --gold: #ffe38a; --white: #f4f8ff; --muted: #c9d7e5; --silver: #b8bbc1; } #approved-offer-hero * { box-sizing: border-box; } #approved-offer-hero { background: var(--ink); scroll-behavior: smooth; } #approved-offer-hero { margin: 0; background: var(--ink); color: var(--white); font-family: Barlow, Arial, sans-serif; overflow-x: hidden; } #approved-offer-hero a { color: inherit; text-decoration: none; } #approved-offer-hero { min-height: 100vh; background: #05080e; container-type: inline-size; } #approved-offer-hero .promo { height: 34px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; background: linear-gradient(100deg,#a5001e,#f01835 47%,#a5001e); border-bottom: 1px solid #ff8b9a; box-shadow: 0 6px 24px #d30b3438; } #approved-offer-hero .promo-track { width: max-content; animation: marquee 34s linear infinite; color: #fff; font: 800 13px/1 'Barlow Condensed',sans-serif; letter-spacing: .14em; text-transform: uppercase; } #approved-offer-hero .promo-track span { padding-right: 64px; } @keyframes marquee { to { transform: translateX(-50%); } } #approved-offer-hero .site-nav { position: relative; z-index: 8; height: 88px; padding: 0 max(5vw,calc((100vw - 1320px)/2)); display: flex; align-items: center; justify-content: space-between; background: #05080ef5; border-bottom: 1px solid #8fd9ec24; } #approved-offer-hero .brand img { width: 182px; height: 72px; object-fit: cover; object-position: center; } #approved-offer-hero .nav-actions { display: flex; align-items: center; gap: 34px; font: 700 16px 'Barlow Condensed',sans-serif; letter-spacing: .06em; text-transform: uppercase; } #approved-offer-hero .nav-actions a:first-child { color: #d7e4f1; } #approved-offer-hero .nav-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 23px; border-radius: 5px; color: #001018; background: var(--cyan); box-shadow: 0 0 24px #00d4ff2a; } #approved-offer-hero .hero-scene { position: relative; min-height: 650px; height: min(75svh,780px); max-height: 780px; isolation: isolate; overflow: hidden; background: #08141e; } #approved-offer-hero .hero-water { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 58%; } #approved-offer-hero .hero-scene::before { position: absolute; z-index: -1; inset: 0; content: ""; background: none; } #approved-offer-hero .hero-shoreline { position: absolute; z-index: -2; left: 0; bottom: -2%; width: 100%; height: min(51.7787vw,709.127px); object-fit: cover; object-position: left bottom; pointer-events: none; -webkit-mask-image: linear-gradient(90deg,#000 48%,transparent 52%); mask-image: linear-gradient(90deg,#000 48%,transparent 52%); } #approved-offer-hero .hero-rivian { position: absolute; z-index: -2; left: 66%; bottom: -2%; width: min(92vw,1260px); max-width: none; height: auto; transform: translateX(-50%); filter: none; pointer-events: none; -webkit-mask-image: linear-gradient(90deg,transparent,#000 14%); mask-image: linear-gradient(90deg,transparent,#000 14%); } #approved-offer-hero .hero-copy { position: relative; z-index: 2; width: min(620px,47vw); padding-top: clamp(42px,6vh,68px); margin-left: max(5vw,calc((100vw - 1320px)/2)); } #approved-offer-hero .hero-kicker { margin: 0 0 16px; color: var(--cyan); font: 800 14px/1.3 'Barlow Condensed',sans-serif; letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 2px 10px #000e; } #approved-offer-hero h1,#approved-offer-hero h2,#approved-offer-hero p { margin-top: 0; } #approved-offer-hero .hero-copy h1 { margin: 0; font: 700 clamp(72px,6.1vw,90px)/.8 Teko,'Arial Narrow',sans-serif; letter-spacing: -.015em; text-transform: uppercase; text-shadow: 0 4px 20px #02060ddd; } #approved-offer-hero .hero-copy h1 .first-line { color: var(--gold); display: block; white-space: nowrap; } #approved-offer-hero .hero-copy h1 .second-line { display: block; } #approved-offer-hero .hero-copy h2 { max-width: 540px; margin: 17px 0 0; color: var(--cyan); font: 700 clamp(36px,4.1vw,56px)/.84 Teko,'Arial Narrow',sans-serif; text-transform: uppercase; text-shadow: 0 2px 18px #001018c9; } #approved-offer-hero .hero-lede { max-width: 490px; margin: 20px 0 0; color: #ecf4fb; font-size: 18px; line-height: 1.5; text-shadow: 0 2px 15px #02060d; } #approved-offer-hero .hero-actions { display: flex; flex-direction:column; align-items:flex-start; gap: 12px; margin-top: 23px; } #approved-offer-hero .hero-button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: 0 23px; border: 1px solid var(--cyan); border-radius: 5px; background: linear-gradient(105deg,#00d4ff,#57e9ff); color: #001018; box-shadow: 0 6px 26px #00d4ff35; text-align: center; font: 900 16px/1.1 'Barlow Condensed',sans-serif; letter-spacing: .07em; text-transform: uppercase; } #approved-offer-hero .hero-button.secondary { border-color:#39718f; background:#103b56; color:#eef6fd; box-shadow:none; min-height:40px; padding:10px 16px; font-size:13px; max-width:390px; } #approved-offer-hero .hero-proof { display: flex; flex-wrap: wrap; gap: 9px 20px; margin: 20px 0 0; padding: 0; list-style: none; color: #eef6fd; font: 700 13px/1.3 'Barlow Condensed',sans-serif; letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 1px 9px #000; } #approved-offer-hero .hero-proof li::before { content: "✓"; margin-right: 6px; color: #4cff9b; } #approved-offer-hero .trust-strip { position: relative; padding: 24px max(4vw,calc((100vw - 1360px)/2)) 28px; border-top: 1px solid #5ec5dd46; border-bottom: 1px solid #314453; background: linear-gradient(180deg,#070b12,#05080e); } #approved-offer-hero .trust-awards { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(22px,4vw,64px); max-width: 1320px; margin: auto; } #approved-offer-hero .trust-award { min-height: 124px; display: grid; grid-template-columns: minmax(46px,72px) minmax(0,1fr) minmax(46px,72px); align-items: center; gap: clamp(10px,1.8vw,24px); padding: 8px clamp(8px,1.4vw,18px); text-align: center; } #approved-offer-hero .trust-award:not(.editorial-award) { display: none; } #approved-offer-hero .laurel { display: block; width: 100%; height: 96px; overflow: visible; color: #d0ab58; opacity: .94; } #approved-offer-hero .laurel path { fill: currentColor; } #approved-offer-hero .laurel .stem { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } #approved-offer-hero .laurel--right { transform: scaleX(-1); } #approved-offer-hero .trust-copy { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #f4f4f2; } #approved-offer-hero .trust-copy .lead { font: 600 clamp(25px,2.4vw,35px)/1.02 Georgia,'Times New Roman',serif; } #approved-offer-hero .trust-copy strong { font: 800 clamp(29px,3vw,40px)/.96 'Barlow Condensed',sans-serif; letter-spacing: .015em; } #approved-offer-hero .trust-copy .detail { max-width: 460px; font: 800 clamp(20px,2vw,28px)/1.02 'Barlow Condensed',sans-serif; } #approved-offer-hero .trust-copy .byline { margin-top: 3px; color: #b9c1c9; font: 600 11px/1.2 Barlow,sans-serif; letter-spacing: .16em; text-transform: uppercase; } #approved-offer-hero .after-hero { height: 82px; background: linear-gradient(180deg,#06101a,#07111a); border-top: 1px solid #111e2b; } #approved-offer-hero .play-water { position: absolute; z-index: 6; right: 18px; bottom: 18px; display: none; width: 44px; height: 44px; place-items: center; border: 1px solid #ffffff9c; border-radius: 50%; background: #06101cd9; color: #fff; font-size: 17px; cursor: pointer; } #approved-offer-hero .play-water[hidden] { display: none; } @media (max-width: 760px) { #approved-offer-hero { width: 100%; max-width: 430px; margin-inline: auto; overflow: hidden; box-shadow: 0 0 50px #0008; } #approved-offer-hero .promo { height: 30px; } #approved-offer-hero .promo-track { font-size: 11px; } #approved-offer-hero .site-nav { height: 72px; padding: 0 18px; } #approved-offer-hero .brand img { width: 160px; height: 60px; } #approved-offer-hero .nav-actions { gap: 0; } #approved-offer-hero .nav-actions>a:first-child { display: none; } #approved-offer-hero .nav-cta { min-height: 42px; padding: 0 14px; font-size: 14px; } #approved-offer-hero .hero-scene { height: auto; min-height: 0; max-height: none; padding-bottom: calc(50cqw + 24px); } #approved-offer-hero .hero-water { object-position: 53% 56%; } #approved-offer-hero .hero-scene::before { background: none; } #approved-offer-hero .hero-shoreline { display: none; } #approved-offer-hero .hero-rivian { left: 54%; bottom: 0; width: 133%; -webkit-mask-image: none; mask-image: none; } #approved-offer-hero .hero-copy { width: auto; padding: 38px 22px 0; margin: 0; } #approved-offer-hero .hero-kicker { margin-bottom: 13px; font-size: 12px; letter-spacing: .16em; } #approved-offer-hero .hero-copy h1 { font-size: clamp(51px,13.8vw,58px); line-height: .78; } #approved-offer-hero .hero-copy h2 { max-width: 360px; margin-top: 12px; font-size: clamp(34px,9.5vw,43px); line-height: .86; } #approved-offer-hero .hero-lede { max-width: 360px; margin-top: 13px; font-size: 15px; line-height: 1.42; } #approved-offer-hero .hero-actions { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 14px; max-width: 350px; } #approved-offer-hero .hero-button { min-height: 47px; padding-inline: 15px; font-size: 14px; } #approved-offer-hero .hero-proof { gap: 6px 12px; margin-top: 13px; font-size: 11px; } #approved-offer-hero .trust-strip { padding: 10px 16px 14px; } #approved-offer-hero .trust-awards { grid-template-columns: 1fr; gap: 2px; } #approved-offer-hero .trust-award { grid-template-columns: 44px minmax(0,1fr) 44px; min-height: 96px; gap: 8px; padding: 7px 0; } #approved-offer-hero .laurel { height: 70px; } #approved-offer-hero .trust-copy { gap: 3px; } #approved-offer-hero .trust-copy .lead { font-size: 25px; } #approved-offer-hero .trust-copy strong { font-size: 28px; } #approved-offer-hero .trust-copy .detail { font-size: 21px; } #approved-offer-hero .trust-copy .byline { font-size: 10px; } #approved-offer-hero .after-hero { height: 54px; } } @container (max-width: 760px) { #approved-offer-hero .promo { height: 30px; } #approved-offer-hero .promo-track { font-size: 11px; } #approved-offer-hero .site-nav { height: 72px; padding: 0 18px; } #approved-offer-hero .brand img { width: 160px; height: 60px; } #approved-offer-hero .nav-actions { gap: 0; } #approved-offer-hero .nav-actions>a:first-child { display: none; } #approved-offer-hero .nav-cta { min-height: 42px; padding: 0 14px; font-size: 14px; } #approved-offer-hero .hero-scene { height: auto; min-height: 0; max-height: none; padding-bottom: calc(50cqw + 24px); } #approved-offer-hero .hero-water { object-position: 53% 56%; } #approved-offer-hero .hero-scene::before { background: none; } #approved-offer-hero .hero-shoreline { display: none; } #approved-offer-hero .hero-rivian { left: 54%; bottom: 0; width: 133%; -webkit-mask-image: none; mask-image: none; } #approved-offer-hero .hero-copy { width: auto; padding: 38px 22px 0; margin: 0; } #approved-offer-hero .hero-kicker { margin-bottom: 13px; font-size: 12px; letter-spacing: .16em; } #approved-offer-hero .hero-copy h1 { font-size: clamp(51px,13.8vw,58px); line-height: .78; } #approved-offer-hero .hero-copy h2 { max-width: 360px; margin-top: 12px; font-size: clamp(34px,9.5vw,43px); line-height: .86; } #approved-offer-hero .hero-lede { max-width: 360px; margin-top: 13px; font-size: 15px; line-height: 1.42; } #approved-offer-hero .hero-actions { display: grid; grid-template-columns: 1fr; gap: 9px; margin-top: 14px; max-width: 350px; } #approved-offer-hero .hero-button { min-height: 47px; padding-inline: 15px; font-size: 14px; } #approved-offer-hero .hero-proof { gap: 6px 12px; margin-top: 13px; font-size: 11px; } #approved-offer-hero .trust-strip { padding: 10px 16px 14px; } #approved-offer-hero .trust-awards { grid-template-columns: 1fr; gap: 2px; } #approved-offer-hero .trust-award { grid-template-columns: 44px minmax(0,1fr) 44px; min-height: 96px; gap: 8px; padding: 7px 0; } #approved-offer-hero .laurel { height: 70px; } #approved-offer-hero .trust-copy { gap: 3px; } #approved-offer-hero .trust-copy .lead { font-size: 25px; } #approved-offer-hero .trust-copy strong { font-size: 28px; } #approved-offer-hero .trust-copy .detail { font-size: 21px; } #approved-offer-hero .trust-copy .byline { font-size: 10px; } #approved-offer-hero .after-hero { height: 54px; } } @container (max-width: 360px) { #approved-offer-hero .hero-copy { padding-inline: 17px; } #approved-offer-hero .hero-copy h1 { font-size: 45px; } #approved-offer-hero .hero-copy h2 { font-size: 32px; } #approved-offer-hero .hero-proof { font-size: 10px; } } @media (prefers-reduced-motion: reduce) { #approved-offer-hero { scroll-behavior: auto; } #approved-offer-hero .promo-track { animation: none; } } #approved-offer-hero { width:100%; max-width:none; margin:0; min-height:0; container-type:inline-size; box-shadow:none; } #approved-offer-hero .hero-copy h1 { padding:0; } #approved-offer-hero .hero-actions { width:auto; } #approved-offer-hero .hero-button[hidden] { display:none!important; } #approved-offer-hero .offer-zip-slot { max-width:100%; min-height:0; } #approved-offer-hero .offer-zip-slot:has(.offer-zip-gate:not([hidden])) { min-height:112px; } .offer-payment-trust[aria-label="Supported checkout payment options"] { display:none!important; } #approved-offer-hero .offer-zip-gate { color:#f4f8ff; } #approved-offer-hero .offer-zip-slot:has(.offer-zip-gate:not([hidden])) { min-height:0; } #approved-offer-hero .offer-zip-slot > .offer-zip-gate { position:static; inset:auto; } #approved-offer-hero .offer-zip-slot > .offer-zip-status { position:static; inset:auto; width:100%; box-sizing:border-box; margin:10px 0 0; padding:10px 12px; border-radius:7px; background:rgba(4,18,16,.94); color:#c4f9d8; font-size:14px; line-height:1.45; font-weight:700; text-shadow:none; } #approved-offer-hero .offer-zip-slot > .offer-zip-status.is-confirmed { color:#79ffac; } #approved-offer-hero .offer-zip-slot > .offer-zip-status.is-error { color:#ffcfce; background:rgba(35,10,14,.94); } @media(max-width:760px) { #approved-offer-hero .hero-lede { padding:0; border-radius:0; background:transparent; color:#fff; font-weight:700; line-height:1.5; -webkit-text-stroke:.35px rgba(20,12,5,.85); paint-order:stroke fill; text-shadow:0 1px 2px #241406,0 2px 5px rgba(20,12,5,.85),0 0 12px rgba(20,12,5,.55); } } .offer-proof-window{overflow:hidden;width:100%;margin-top:16px} #approved-offer-hero.offer-angle-convenience h1{font-size:clamp(52px,5.1vw,76px)} #approved-offer-hero.offer-angle-convenience h2{font-size:clamp(36px,3.6vw,52px)} @media(max-width:760px){#approved-offer-hero.offer-angle-convenience h1{font-size:clamp(40px,11vw,52px)}#approved-offer-hero.offer-angle-convenience h2{font-size:34px}} .offer-proof-track{display:flex;width:max-content;animation:offer-proof-scroll 30s linear infinite} #approved-offer-hero .offer-proof-track .hero-proof{flex:none;flex-wrap:nowrap;white-space:nowrap;margin:0;padding-right:30px;gap:30px} @keyframes offer-proof-scroll{to{transform:translateX(-50%)}} .offer-steps-book{display:flex;justify-content:center;padding:0 22px 42px} .offer-steps-book .mw-electric-book{display:inline-flex;align-items:center;justify-content:center;min-width:190px;min-height:52px;font:700 24px/1 Teko,sans-serif;letter-spacing:.06em;text-decoration:none;color:#fff;animation:offer-book-nudge 5s ease-in-out infinite} @keyframes offer-book-nudge{0%,84%,100%{transform:translateX(0)}88%{transform:translateX(-3px)}92%{transform:translateX(3px)}96%{transform:translateX(-1px)}} .offer-steps-book .mw-electric-book:hover,.offer-steps-book .mw-electric-book:focus-visible{animation-play-state:paused} @media(prefers-reduced-motion:reduce){.offer-proof-track,.offer-steps-book .mw-electric-book{animation:none}.offer-proof-window{overflow:auto}} .offer-nav { height:88px; padding:0 max(5vw,calc((100vw - 1320px)/2)); } .offer-nav > a > img { width:182px; height:72px; object-fit:cover; object-position:center; } .offer-links .offer-nav-cta { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 23px; } @media(max-width:760px) { .offer-nav { height:72px; padding:0 18px; } .offer-nav > a > img { width:160px; height:60px; } .offer-links .offer-nav-cta { min-height:42px; padding:0 14px; } #approved-offer-hero .hero-actions { display:grid; } #approved-offer-hero .hero-button { width:100%; } } @media (max-width:760px) { html:has(body.offer-shell), body.offer-shell { overflow-x:clip; } .offer-shell .offer-services { display:block; position:relative; isolation:isolate; } .offer-shell .offer-services > .offer-service { position:sticky; top:calc(var(--mw-promo-h, 32px) + 84px); margin-bottom:18px; background-color:#081323; box-shadow:0 -8px 24px rgba(0,0,0,.28); z-index:1; } .offer-shell .offer-services > .offer-service:nth-child(2) { top:calc(var(--mw-promo-h, 32px) + 102px); z-index:2; } .offer-shell .offer-services > .offer-service:nth-child(3) { top:calc(var(--mw-promo-h, 32px) + 120px); z-index:3; margin-bottom:0; } }