/* ─────────────────────────────────────────────────────────── DFG ONLINE-RATE PROMO MODAL — "Lock in your rate / Save 10%" Scoped to .pp-* so it never collides with the host page. Source of truth / preview: /promo-prepaid-modal.html Bilingual via data-ppen/data-ppes (driven by , set by the site's applyLang) — does NOT touch the site's own [data-en]/[data-es]. ─────────────────────────────────────────────────────────── */ :root{ --ink:#0a0a0a; --ink-2:#15151a; --line:#e5e5e5; --muted:#6e6e6e; --red:#FD3049; --red-dark:#D90E26; --red-grad:linear-gradient(140deg,#FD3049 0%,#D90E26 100%); } /* ===== Overlay / backdrop ===== */ .pp-overlay{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(8,8,11,.66); backdrop-filter:blur(5px); opacity:0; pointer-events:none; transition:opacity .26s ease; } .pp-overlay.open{ opacity:1; pointer-events:auto; } /* ===== Modal card ===== */ .pp{ position:relative; width:100%; max-width:600px; max-height:94vh; overflow-y:auto; background:#fff; border-radius:28px; box-shadow:0 50px 130px -30px rgba(0,0,0,.7); transform:translateY(18px) scale(.975); transition:transform .34s cubic-bezier(.4,0,.2,1); } .pp-overlay.open .pp{ transform:none; } /* Close */ .pp-close{ position:absolute; top:16px; right:16px; z-index:6; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.20); color:#fff; font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; } .pp-close:hover{ background:rgba(255,255,255,.30); } .pp-close:focus-visible{ outline:2px solid #fff; outline-offset:2px; } /* ===== Top banner (DFG red) ===== */ .pp-top{ position:relative; background:var(--red-grad); padding:24px 28px 0; border-radius:28px 28px 0 0; } .pp-top__deco{ position:absolute; inset:0; border-radius:28px 28px 0 0; overflow:hidden; z-index:0; pointer-events:none; } .pp-top__deco::before{ content:""; position:absolute; right:-70px; top:-60px; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.12); } .pp-top__deco::after{ content:""; position:absolute; left:-60px; bottom:-70px; width:220px; height:220px; border-radius:50%; background:rgba(0,0,0,.10); } .pp-logo{ height:42px; width:auto; position:relative; z-index:3; filter:drop-shadow(0.6px 0 0 rgba(0,0,0,.40)) drop-shadow(-0.6px 0 0 rgba(0,0,0,.40)) drop-shadow(0 0.6px 0 rgba(0,0,0,.40)) drop-shadow(0 -0.6px 0 rgba(0,0,0,.40)) drop-shadow(0 1px 3px rgba(0,0,0,.30)); } /* ===== Device stage (laptop + phone) — dips into the white body ===== */ .pp-stage{ position:relative; z-index:2; width:100%; height:212px; margin:8px auto -46px; } /* Laptop / browser window */ .pp-laptop{ position:absolute; left:50%; top:6px; transform:translateX(-54%); width:340px; max-width:80%; background:#fff; border-radius:14px; box-shadow:0 30px 60px -22px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.18); overflow:hidden; } .pp-laptop__bar{ display:flex; align-items:center; gap:7px; height:26px; padding:0 11px; background:#f4f4f5; border-bottom:1px solid #ececed; } .pp-laptop__dot{ width:8px; height:8px; border-radius:50%; background:#dcdce0; } .pp-laptop__url{ flex:1; margin-left:6px; height:14px; border-radius:7px; background:#fff; border:1px solid #e7e7e9; display:flex; align-items:center; padding:0 8px; font-size:8px; font-weight:600; color:#9a9a9a; letter-spacing:.01em; } .pp-laptop__screen{ background:#fff; } /* Mini funnel header inside the laptop */ .pp-fhdr{ display:flex; align-items:center; gap:8px; padding:6px 9px; border-bottom:1px solid #f0f0f0; } .pp-fhdr__logo{ height:14px; width:auto; } .pp-pill{ flex:1; display:flex; align-items:center; height:20px; border-radius:100px; border:1px solid #e8e8e8; background:#FAFAFA; padding:0 8px; gap:6px; overflow:hidden; } .pp-pill__pin{ width:8px; height:8px; color:var(--red); flex:none; } .pp-pill__loc{ font-size:8px; font-weight:700; color:var(--ink); white-space:nowrap; } .pp-pill__sep{ width:1px; height:11px; background:rgba(253,48,73,.30); flex:none; } .pp-pill__dates{ font-size:8px; font-weight:600; color:#7a7a7a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Car card inside the laptop (mirrors the real funnel "studio" card) */ .pp-vcard{ position:relative; margin:8px; border-radius:12px; overflow:hidden; background:radial-gradient(120% 80% at 50% 22%, #7c828a 0%, #44484e 50%, #26282c 78%, #191b1e 100%); padding:9px 10px 0; } .pp-vcard__head{ display:flex; gap:6px; align-items:flex-start; } .pp-vcard__bar{ width:3px; height:22px; border-radius:2px; background:var(--red); flex:none; margin-top:1px; } .pp-vcard__cat{ color:#fff; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:11px; line-height:1.05; } .pp-vcard__model{ color:rgba(255,255,255,.5); font-size:7px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-top:2px; } .pp-vcard__pills{ display:flex; gap:4px; margin-top:7px; } .pp-pill2{ display:inline-flex; align-items:center; gap:3px; background:rgba(255,255,255,.12); color:rgba(255,255,255,.82); font-size:6.5px; font-weight:600; padding:2px 5px; border-radius:999px; white-space:nowrap; } .pp-pill2 svg{ width:6.5px; height:6.5px; } .pp-vcard__pick{ position:absolute; top:9px; right:8px; border:1.5px solid rgba(255,255,255,.85); color:#fff; font-weight:800; font-style:italic; font-size:7px; line-height:.95; text-align:center; padding:3px 5px; border-radius:5px; transform:rotate(-4deg); } .pp-vcard__car{ display:block; width:82%; max-width:158px; max-height:64px; object-fit:contain; margin:0 auto 2px; filter:drop-shadow(0 12px 11px rgba(0,0,0,.6)); } .pp-vcard__miles{ display:flex; align-items:center; gap:4px; color:rgba(255,255,255,.92); font-size:7.5px; font-weight:600; } .pp-vcard__miles svg{ width:8px; height:8px; color:var(--red); flex:none; } .pp-vcard__pricerow{ display:flex; align-items:flex-end; justify-content:space-between; margin-top:3px; } .pp-vcard__price{ color:#fff; line-height:1; } .pp-vcard__was{ display:block; font-size:8px; color:rgba(255,255,255,.45); text-decoration:line-through; font-weight:600; margin-bottom:2px; } .pp-vcard__now{ font-weight:900; } .pp-vcard__now .c{ font-size:10px; vertical-align:top; } .pp-vcard__now .n{ font-size:22px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; } .pp-vcard__now .d{ font-size:9px; vertical-align:top; } .pp-vcard__now .per{ font-size:8px; color:rgba(255,255,255,.65); font-weight:700; margin-left:1px; } .pp-vcard__total{ font-size:7px; color:rgba(255,255,255,.5); font-weight:600; margin-left:5px; } .pp-vcard__btn{ background:var(--red); color:#fff; font-weight:800; font-size:9px; border-radius:8px; padding:6px 12px; box-shadow:0 6px 14px -6px rgba(253,48,73,.6); } /* Green savings strip — full-bleed footer (mirrors the real card's member-rates band) */ .pp-vcard__foot{ display:flex; align-items:center; justify-content:space-between; margin:8px -10px 0; padding:6px 10px; background:rgba(22,163,74,.16); border-top:1px solid rgba(22,163,74,.32); } .pp-vcard__foot .lbl{ display:flex; align-items:center; gap:4px; color:#86efac; font-size:7px; font-weight:700; } .pp-vcard__foot .lbl svg{ width:8px; height:8px; flex:none; } .pp-vcard__foot .amt{ color:#4ade80; font-size:8.5px; font-weight:800; white-space:nowrap; } /* Phone, overlapping front-right — the "pay now & save" confirmation */ .pp-phone{ position:absolute; right:6%; bottom:-20px; width:104px; background:#0a0a0a; border-radius:18px; padding:5px; box-shadow:0 24px 44px -16px rgba(0,0,0,.6); z-index:4; } .pp-phone__notch{ position:absolute; top:9px; left:50%; transform:translateX(-50%); width:34px; height:4px; border-radius:999px; background:#26262b; z-index:2; } .pp-phone__screen{ background:#fff; border-radius:13px; overflow:hidden; padding:14px 10px 11px; text-align:center; } .pp-phone__check{ width:30px; height:30px; border-radius:50%; background:#eafaf0; color:#16a34a; margin:0 auto 7px; display:flex; align-items:center; justify-content:center; } .pp-phone__check svg{ width:16px; height:16px; } .pp-phone__ttl{ font-size:9px; font-weight:800; color:var(--ink); line-height:1.15; } .pp-phone__row{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; font-size:8px; color:#8a8a8a; } .pp-phone__row.tot{ color:var(--ink); font-weight:800; font-size:8px; gap:6px; border-top:1px solid #f0f0f0; padding-top:5px; margin-top:6px; } .pp-phone__row.tot span:last-child{ font-size:9px; } .pp-phone__row .ln{ text-decoration:line-through; color:#bdbdbd; } .pp-phone__save{ margin-top:8px; background:#e7f8ee; color:#15803d; font-weight:800; font-size:9px; border-radius:7px; padding:6px 6px; } .pp-phone__cta{ margin-top:8px; background:var(--red); color:#fff; font-weight:800; font-size:9px; border-radius:8px; padding:7px 0; } /* ===== Body ===== */ .pp-body{ padding:130px 34px 32px; text-align:center; } .pp-eyebrow{ font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--red); font-weight:800; margin:0 0 9px; } .pp-title{ margin:0 0 15px; } .pp-lead{ display:block; font-size:1.4rem; line-height:1.1; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin-bottom:10px; } .pp-title .hl{ display:inline-block; font-size:2.7rem; line-height:1; font-weight:900; letter-spacing:-.02em; background:var(--red); color:#fff; padding:.07em .2em .1em; border-radius:11px; box-shadow:0 12px 28px -10px rgba(253,48,73,.55); } .pp-desc{ font-size:1.02rem; line-height:1.6; color:var(--muted); margin:0 auto 22px; max-width:460px; } .pp-desc strong{ color:var(--ink); font-weight:700; } .pp-cta{ display:inline-flex; align-items:center; gap:.5rem; background:var(--red); color:#fff; border:none; border-radius:999px; padding:15px 40px; font-size:1.02rem; font-weight:800; cursor:pointer; text-decoration:none; transition:background .2s, transform .2s; box-shadow:0 12px 30px -8px rgba(253,48,73,.5); } .pp-cta:hover{ background:var(--red-dark); transform:translateY(-1px); } .pp-cta:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; } .pp-fine{ font-size:.74rem; color:#a4a4a4; margin:15px auto 0; line-height:1.5; max-width:480px; } /* Bilingual toggle — SCOPED to the modal (.pp); driven by . */ .pp [data-ppes]{ display:none; } html[lang="es"] .pp [data-ppen]{ display:none; } html[lang="es"] .pp [data-ppes]{ display:inline; } @media (max-width:520px){ .pp-lead{ font-size:1.2rem; } .pp-title .hl{ font-size:2.15rem; } .pp-body{ padding:144px 22px 26px; } .pp-top{ padding:22px 22px 0; } .pp-stage{ height:196px; margin:6px auto -42px; } .pp-laptop{ width:270px; transform:translateX(-52%); } .pp-phone{ width:88px; right:1%; } } @media (prefers-reduced-motion:reduce){ .pp-overlay,.pp{ transition:none; } }