/* MonDossierPTP — Popup styles Aligned with /mon_dossier_ptp_brand_guidelines.md - Brand primary: #409D94 (deep #1F6E63) - Surfaces: paper #FAF7F2 / cream #F7F1EE — never pure white at full-card level - Accents: terracotta #EEA886 / peach #FACDC2 - Hairlines: #E5DED3 - CTA: pill (border-radius: 9999px) - Type: Sora primary, Inter fallback */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap'); /* Tokens scoped to the popup-owned elements. We deliberately don't put these on :root so the plugin can't accidentally re-color the host theme. Both #mdptp-root and the overlay carry the tokens because popup.js appends overlays directly to — outside #mdptp-root — for z-index and positioning reasons. */ #mdptp-root, .mdptp-overlay, .mdptp-testmode { /* Brand */ --mdptp-teal: #409D94; --mdptp-teal-d: #1F6E63; --mdptp-teal-50: #F5FAFA; --mdptp-teal-100: #ECF5F4; --mdptp-teal-200: #CFE7E4; --mdptp-teal-300: #B3D8D4; --mdptp-teal-400: #79BAB4; /* Ink + accents */ --mdptp-ink: #0D1F1E; --mdptp-ink-soft: #132F2C; --mdptp-mute: #697581; --mdptp-accent: #EEA886; /* terracotta */ --mdptp-bloom: #FACDC2; /* soft peach */ --mdptp-red: #B53A1A; --mdptp-red-bg: #FBE7E0; /* Surfaces */ --mdptp-paper: #FAF7F2; --mdptp-cream: #F7F1EE; --mdptp-line: #E5DED3; /* Geometry */ --mdptp-r-sm: 6px; --mdptp-r-md: 10px; --mdptp-r-lg: 16px; --mdptp-r-pill: 9999px; --mdptp-shadow: 0 30px 60px -20px rgba(13,31,30,0.5), 0 18px 36px -18px rgba(13,31,30,0.4); font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } #mdptp-root *, #mdptp-root *::before, #mdptp-root *::after { box-sizing: border-box; } /* Global SVG clamp (applies in both the live overlay and the test-mode gallery). */ .mdptp-overlay svg, .mdptp-testmode svg { width: 1em; height: 1em; flex-shrink: 0; vertical-align: middle; } .mdptp-btn svg { width: 18px; height: 18px; } .mdptp-link svg { width: 16px; height: 16px; } /* Overlay */ .mdptp-overlay { position: fixed; inset: 0; background: rgba(13, 31, 30, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 999998; opacity: 0; transition: opacity .25s ease; display: flex; align-items: center; justify-content: center; padding: 24px; } .mdptp-overlay.is-open { opacity: 1; } /* Card — paper/cream surface, never pure white at the card level */ .mdptp-card { position: relative; background: var(--mdptp-paper); color: var(--mdptp-ink); border-radius: var(--mdptp-r-lg); box-shadow: var(--mdptp-shadow); width: 100%; max-width: 560px; overflow: hidden; transform: translateY(20px) scale(.96); opacity: 0; transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .25s ease; border: 1px solid var(--mdptp-line); } .mdptp-overlay.is-open .mdptp-card { transform: translateY(0) scale(1); opacity: 1; } .mdptp-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: var(--mdptp-r-pill); border: 0; background: transparent; color: var(--mdptp-mute); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; z-index: 4; } .mdptp-close:hover { background: var(--mdptp-cream); color: var(--mdptp-ink); } .mdptp-close svg { width: 18px; height: 18px; } /* Logo */ .mdptp-logo { display: inline-flex; align-items: center; height: 26px; } .mdptp-logo svg, .mdptp-logo .mdptp-logo-img { height: 100%; width: auto; max-width: 150px; display: block; } /* Logo bar for cards whose layout has no header row (warning / thanks / testimonial). */ .mdptp-logo-bar { margin: 0 0 12px; } .mdptp-card--testimonial .mdptp-logo-bar { margin-bottom: 14px; } /* "Why this helps" copy — soft teal callout used on step 1 (guide/eligibility) and step 2 (booking "we can call now"). */ .mdptp-why { font-size: 13px; line-height: 1.5; color: var(--mdptp-ink-soft, #3c4a4a); background: var(--mdptp-cream, #f3f8f7); border-left: 3px solid var(--mdptp-teal, #409d94); border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; font-style: italic; } /* Italic supporting copy: warning body, thanks spam note, testimonial eyebrow. */ .mdptp-card--warning .mdptp-body > p:not(.mdptp-lead), .mdptp-spam, .mdptp-eyebrow { font-style: italic; } /* Buttons — pill primary per brand guidelines */ .mdptp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border-radius: var(--mdptp-r-pill); font-weight: 600; font-size: 15px; font-family: inherit; line-height: 1; border: 0; cursor: pointer; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; width: 100%; } .mdptp-btn:hover { transform: translateY(-2px); } .mdptp-btn:active { transform: translateY(0); } .mdptp-btn--primary { background: var(--mdptp-teal); color: #fff; box-shadow: 0 8px 24px -10px var(--mdptp-teal); } .mdptp-btn--primary:hover { background: var(--mdptp-teal-d); } .mdptp-btn--ghost { background: transparent; color: var(--mdptp-teal-d); border: 1.5px solid var(--mdptp-teal); } .mdptp-btn--ghost:hover { background: var(--mdptp-teal-100); } .mdptp-btn--danger { background: var(--mdptp-red); color: #fff; box-shadow: 0 8px 24px -10px var(--mdptp-red); } .mdptp-btn--danger:hover { background: #8a2810; } .mdptp-input { width: 100%; padding: 14px 18px; border-radius: var(--mdptp-r-md); border: 1.5px solid var(--mdptp-line); background: #fff; font-size: 15px; font-family: inherit; color: var(--mdptp-ink); transition: border-color .15s ease, box-shadow .15s ease; } .mdptp-input:focus { outline: none; border-color: var(--mdptp-teal); box-shadow: 0 0 0 4px rgba(64, 157, 148, .18); } .mdptp-honey { position: absolute; left: -9999px; opacity: 0; pointer-events: none; } .mdptp-error { background: var(--mdptp-red-bg); color: var(--mdptp-red); padding: 10px 14px; border-radius: var(--mdptp-r-md); font-size: 14px; margin-bottom: 12px; } .mdptp-reassurance { display: flex; align-items: center; gap: 8px; color: var(--mdptp-mute); font-size: 13px; margin-top: 10px; } .mdptp-reassurance svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--mdptp-teal-d); } /* Headlines: italic word in deep teal */ .mdptp-card h2 em, .mdptp-card h3 em { color: var(--mdptp-teal-d); font-style: italic; } /* ========== POPUP: GUIDE (lead magnet capture) ========== */ .mdptp-card--guide { display: grid; grid-template-columns: 220px 1fr; max-width: 600px; /* Uniform cream background across the whole card so the photo's baked-in cream paper backdrop blends with the body section seamlessly. */ background: var(--mdptp-cream); } .mdptp-card--guide .mdptp-cover { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .mdptp-card--guide .mdptp-cover-img { /* `cover` so the photo's cream background bleeds to the panel edges, hiding any color seam between the photo and the body section. */ width: 100%; height: 100%; object-fit: cover; display: block; } .mdptp-card--guide .mdptp-cover-overlay { display: none; } .mdptp-card--guide .mdptp-body { padding: 28px 28px 28px; display: flex; flex-direction: column; position: relative; z-index: 1; } .mdptp-card--guide header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .mdptp-card--guide h2 { font-size: 26px; font-weight: 600; color: var(--mdptp-ink); margin: 0 0 12px; line-height: 1.15; } .mdptp-card--guide p { color: var(--mdptp-ink-soft); font-size: 15px; line-height: 1.55; margin: 0 0 16px; } .mdptp-card--guide p strong { color: var(--mdptp-teal-d); font-weight: 600; } .mdptp-card--guide form { display: flex; flex-direction: column; gap: 12px; } /* Decorative bottom wave — peach/cream, spans the full card width */ .mdptp-card--guide::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; background: linear-gradient(180deg, rgba(250,205,194,0) 0%, var(--mdptp-bloom) 100%); -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%; mask: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%; pointer-events: none; z-index: 2; } /* ========== POPUP: ELIGIBILITY (compact teaser) ========== */ .mdptp-card--eligibility { max-width: 420px; padding: 22px 24px 24px; background: var(--mdptp-paper); } .mdptp-card--eligibility header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .mdptp-card--eligibility header .mdptp-logo { height: 30px; } .mdptp-card--eligibility .mdptp-grid { display: grid; grid-template-columns: 80px 1fr; gap: 14px; align-items: center; margin-bottom: 14px; } .mdptp-card--eligibility .mdptp-illu { width: 80px; height: 80px; border-radius: var(--mdptp-r-md); overflow: hidden; background: transparent; } .mdptp-card--eligibility .mdptp-illu img { width: 100%; height: 100%; object-fit: contain; display: block; } .mdptp-card--eligibility h2 { font-size: 18px; font-weight: 600; color: var(--mdptp-ink); margin: 0 0 8px; line-height: 1.3; } .mdptp-card--eligibility p { font-size: 14px; line-height: 1.55; color: var(--mdptp-ink-soft); margin: 0; } .mdptp-card--eligibility .mdptp-btn { padding: 14px 22px; font-size: 15px; } /* Space the email field / button / reassurance like the guide form. */ .mdptp-card--eligibility form { display: flex; flex-direction: column; gap: 12px; } /* Tight 4px gap between the "why" callout and the email field (this card only). */ .mdptp-card--eligibility .mdptp-why { margin-bottom: 4px; } .mdptp-card--eligibility .mdptp-or { font-size: 13px; margin: 12px 0; } .mdptp-card--eligibility .mdptp-link { padding: 12px 18px; font-size: 14px; } .mdptp-card--eligibility .mdptp-or { text-align: center; color: var(--mdptp-mute); font-size: 13px; margin: 12px 0; position: relative; } .mdptp-card--eligibility .mdptp-or::before, .mdptp-card--eligibility .mdptp-or::after { content: ""; position: absolute; top: 50%; width: calc(50% - 24px); height: 1px; background: var(--mdptp-line); } .mdptp-card--eligibility .mdptp-or::before { left: 0; } .mdptp-card--eligibility .mdptp-or::after { right: 0; } .mdptp-card--eligibility .mdptp-link { display: flex; gap: 8px; align-items: center; justify-content: center; background: #fff; color: var(--mdptp-teal-d); border: 1.5px solid var(--mdptp-line); border-radius: var(--mdptp-r-pill); padding: 12px; font-size: 14px; font-weight: 600; cursor: pointer; width: 100%; font-family: inherit; transition: background .15s ease, border-color .15s ease; } .mdptp-card--eligibility .mdptp-link:hover { background: var(--mdptp-cream); border-color: var(--mdptp-teal-200); } /* ========== POPUP: BOOKING ========== */ .mdptp-card--booking { max-width: 560px; padding: 26px 26px 28px; background: var(--mdptp-paper); } .mdptp-card--booking header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .mdptp-card--booking .mdptp-grid { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; } .mdptp-card--booking .mdptp-illu { background: var(--mdptp-cream); border: 1px solid var(--mdptp-line); border-radius: var(--mdptp-r-md); height: 160px; overflow: hidden; padding: 14px; position: relative; } .mdptp-card--booking .mdptp-illu img { width: 100%; height: 100%; object-fit: contain; display: block; } .mdptp-card--booking h2 { margin: 0 0 8px; font-size: 20px; font-weight: 600; color: var(--mdptp-ink); line-height: 1.25; } .mdptp-card--booking p { font-size: 14.5px; line-height: 1.55; margin: 0 0 12px; color: var(--mdptp-ink-soft); } .mdptp-card--booking p strong { color: var(--mdptp-teal-d); font-weight: 600; } .mdptp-card--booking ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .mdptp-card--booking ul li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mdptp-ink-soft); } .mdptp-card--booking ul li svg { width: 18px; height: 18px; color: var(--mdptp-teal); flex-shrink: 0; } .mdptp-card--booking form { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; } /* ========== POPUP: WARNING ========== */ .mdptp-card--warning { max-width: 480px; background: var(--mdptp-paper); } .mdptp-card--warning .mdptp-warning-top { height: 44px; background: var(--mdptp-bloom); } .mdptp-card--warning .mdptp-body { padding: 6px 26px 22px; } .mdptp-card--warning header { display: flex; align-items: center; gap: 12px; margin: 8px 0 14px; } .mdptp-card--warning .mdptp-warning-icon { width: 48px; height: 48px; border-radius: 12px; background: #fff; border: 1.5px solid var(--mdptp-red); display: inline-flex; align-items: center; justify-content: center; color: var(--mdptp-red); flex-shrink: 0; box-shadow: 0 6px 16px -8px rgba(181, 58, 26, .35); } .mdptp-card--warning .mdptp-warning-icon svg { width: 26px; height: 26px; } .mdptp-card--warning h2 { margin: 0; font-size: 28px; font-weight: 700; color: var(--mdptp-red); line-height: 1; } .mdptp-card--warning .mdptp-lead { font-size: 17px; line-height: 1.4; margin: 0 0 14px; color: var(--mdptp-ink); } .mdptp-card--warning .mdptp-lead strong { color: var(--mdptp-red); font-weight: 600; } .mdptp-card--warning hr { border: 0; border-top: 1px solid var(--mdptp-line); margin: 14px 0; } .mdptp-card--warning p { font-size: 14.5px; line-height: 1.55; color: var(--mdptp-ink-soft); margin: 0 0 16px; } .mdptp-card--warning p strong { color: var(--mdptp-red); font-weight: 600; } .mdptp-card--warning .mdptp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mdptp-card--warning .mdptp-foot { background: var(--mdptp-cream); padding: 14px 26px; display: flex; gap: 8px; align-items: center; color: var(--mdptp-mute); font-size: 13px; border-top: 1px solid var(--mdptp-line); } /* ========== POPUP: THANKS ========== */ .mdptp-card--thanks { display: grid; grid-template-columns: 220px 1fr; max-width: 580px; background: var(--mdptp-paper); } .mdptp-card--thanks .mdptp-confetti { background: var(--mdptp-cream); position: relative; overflow: hidden; border-right: 1px solid var(--mdptp-line); display: flex; align-items: center; justify-content: center; padding: 16px; } .mdptp-card--thanks .mdptp-confetti-img { width: 100%; height: 100%; object-fit: contain; display: block; } .mdptp-card--thanks .mdptp-body { padding: 30px 28px 28px; position: relative; } .mdptp-card--thanks h2 { font-size: 28px; font-weight: 600; color: var(--mdptp-teal-d); margin: 0; line-height: 1; } .mdptp-card--thanks h2::after { content: ""; display: block; width: 40px; height: 3px; background: var(--mdptp-teal); margin-top: 10px; border-radius: 999px; } .mdptp-card--thanks p { font-size: 14.5px; line-height: 1.6; color: var(--mdptp-ink-soft); margin: 16px 0; } .mdptp-card--thanks .mdptp-spam { display: flex; align-items: flex-start; gap: 10px; background: var(--mdptp-cream); border: 1px solid var(--mdptp-line); border-radius: var(--mdptp-r-md); padding: 12px 14px; font-size: 13.5px; color: var(--mdptp-ink-soft); margin: 14px 0 18px; } .mdptp-card--thanks .mdptp-spam svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--mdptp-teal); margin-top: 2px; } /* ========== POPUP: TESTIMONIAL (centered modal, photo-left, layered backdrop) ========== */ .mdptp-card--testimonial { display: grid; grid-template-columns: 240px 1fr; max-width: 600px; padding: 0; background: var(--mdptp-paper); position: relative; /* "Card behind card" — single hard-edge box-shadow offset to bottom-right creates the navy panel peeking out behind the white card. Plus a small white sparkle as ::after positioned over the visible bottom-right corner of the shadow. */ box-shadow: 18px 18px 0 0 var(--mdptp-teal-d), var(--mdptp-shadow); } .mdptp-card--testimonial::after { content: ""; position: absolute; right: -10px; bottom: -10px; width: 22px; height: 22px; background: url("data:image/svg+xml;utf8,") no-repeat center / contain; pointer-events: none; } .mdptp-card--testimonial .mdptp-photo { position: relative; overflow: hidden; background: var(--mdptp-cream); border-right: 1px solid var(--mdptp-line); border-radius: var(--mdptp-r-lg) 0 0 var(--mdptp-r-lg); } .mdptp-card--testimonial .mdptp-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; } .mdptp-card--testimonial .mdptp-body { padding: 24px 26px 22px; position: relative; display: flex; flex-direction: column; justify-content: space-between; } .mdptp-card--testimonial .mdptp-quote { font-size: 14.5px; line-height: 1.5; color: var(--mdptp-ink); margin: 0 0 8px; font-weight: 500; } .mdptp-card--testimonial .mdptp-author { font-size: 13px; color: var(--mdptp-mute); margin: 0 0 18px; font-style: italic; } .mdptp-card--testimonial .mdptp-cta-wrap { align-self: stretch; text-align: center; } .mdptp-card--testimonial .mdptp-cta-wrap .mdptp-input { margin: 0 0 8px; } .mdptp-card--testimonial .mdptp-eyebrow { font-size: 12px; color: var(--mdptp-mute); margin-bottom: 8px; line-height: 1.3; } .mdptp-card--testimonial .mdptp-btn--inline { width: auto; padding: 10px 18px; font-size: 13px; } /* Mobile */ @media (max-width: 640px) { .mdptp-card--guide, .mdptp-card--thanks, .mdptp-card--testimonial { grid-template-columns: 1fr; } .mdptp-card--guide .mdptp-cover { display: none; } .mdptp-card--thanks .mdptp-confetti { height: 130px; border-right: 0; border-bottom: 1px solid var(--mdptp-line); } /* Testimonial: stack photo on top, and pull the crop up so the face shows (the portrait photo cropped to a short landscape box otherwise shows the torso). */ .mdptp-card--testimonial .mdptp-photo { height: 200px; border-right: 0; border-bottom: 1px solid var(--mdptp-line); border-radius: var(--mdptp-r-lg) var(--mdptp-r-lg) 0 0; } .mdptp-card--testimonial .mdptp-photo-img { object-position: center 22%; } .mdptp-card--booking .mdptp-grid { grid-template-columns: 1fr; } .mdptp-card--booking .mdptp-illu { height: 120px; } .mdptp-card--warning .mdptp-row { grid-template-columns: 1fr; } /* Eligibility: stack the illustration above the text, centered. */ .mdptp-card--eligibility .mdptp-grid { grid-template-columns: 1fr; text-align: center; } .mdptp-card--eligibility .mdptp-illu { margin: 0 auto; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .mdptp-overlay, .mdptp-card { transition: none !important; } .mdptp-btn:hover { transform: none !important; } } /* ========== TEST MODE: every popup stacked in a column (admin ?mdptp_test=1) ========== */ .mdptp-testmode { position: fixed; inset: 0; z-index: 999990; overflow-y: auto; background: rgba(13, 31, 30, .55); } .mdptp-testmode-bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #0d1f1e; color: #fff; padding: 12px 18px; font: 600 13px/1.4 -apple-system, Segoe UI, Roboto, sans-serif; } .mdptp-testmode-close { background: var(--mdptp-teal, #409d94); color: #fff; border: 0; border-radius: 6px; padding: 7px 14px; font-weight: 700; cursor: pointer; } .mdptp-testmode-col { display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 30px 16px 80px; } .mdptp-testmode-item { width: 100%; max-width: 620px; } .mdptp-testmode-label { color: #cfe6e3; font: 700 12px/1 ui-monospace, monospace; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 8px 4px; } /* Cards are opacity:0 until .is-open inside the overlay — force visible in the gallery. */ .mdptp-testmode-item .mdptp-card { opacity: 1 !important; transform: none !important; max-width: 100% !important; } /* ========== Defensive reset against host-theme CSS bleed ========== The site theme styles inputs/buttons globally (rounded "pill" fields, etc.), which overrides the popup's own field styling on the live front-end. Re-assert the popup's box model + field look so it renders the same everywhere. */ .mdptp-overlay, .mdptp-overlay *, .mdptp-testmode, .mdptp-testmode * { box-sizing: border-box; } .mdptp-card .mdptp-input { box-sizing: border-box !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-width: 100% !important; padding: 14px 18px !important; border: 1.5px solid var(--mdptp-line) !important; border-radius: var(--mdptp-r-md) !important; background: #fff !important; font-size: 15px !important; font-family: inherit !important; line-height: 1.3 !important; color: var(--mdptp-ink) !important; box-shadow: none !important; }