/* apps/landing/styles/qr-popup.css QR D2D lead-capture popup — vanilla CSS, no framework. Target: (HTML native dialog — avoids ad-blocker generic popup rules) Theme: matches landing brand (terracotta / cream / ink) Imported in index.html after other stylesheets. */ /* ── CSS custom properties (local scope) ─────────────────────────────── */ #qrCapture { --qr-terracotta: #a44a3f; --qr-terracotta-hover: #8b3d33; --qr-cream: #f5ead8; --qr-ink: #1a0f08; --qr-muted: rgba(26, 15, 8, 0.62); --qr-border: rgba(164, 74, 63, 0.22); --qr-input-bg: #fff; --qr-error: #c0392b; --qr-success: #2d7a4f; --qr-radius: 14px; --qr-shadow: 0 24px 64px rgba(26, 15, 8, 0.28), 0 4px 16px rgba(26, 15, 8, 0.12); /* Override native dialog default styles */ padding: 0; border: none; border-radius: 20px; background: var(--qr-cream); color: var(--qr-ink); box-shadow: var(--qr-shadow); max-width: 480px; width: 92vw; font-family: 'Inter', system-ui, sans-serif; overflow: hidden; /* Entry animation */ opacity: 0; transform: translateY(20px) scale(0.98); transition: opacity 0.3s ease-out, transform 0.3s ease-out; } /* dialog::backdrop — semi-opaque dark overlay */ #qrCapture::backdrop { background: rgba(26, 15, 8, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Active state (added by JS after showModal()) */ #qrCapture.qr-open { opacity: 1; transform: translateY(0) scale(1); } /* ── Inner wrapper ───────────────────────────────────────────────────── */ .qr-inner { padding: 32px 28px 28px; } @media (max-width: 480px) { .qr-inner { padding: 24px 20px 20px; } } /* ── Header ─────────────────────────────────────────────────────────── */ .qr-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; } .qr-title { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.45rem; line-height: 1.2; color: var(--qr-ink); margin: 0; letter-spacing: -0.3px; } .qr-subtitle { font-size: 0.88rem; color: var(--qr-muted); margin: 6px 0 0; line-height: 1.45; } /* Close button × */ .qr-close { appearance: none; background: none; border: none; cursor: pointer; color: var(--qr-muted); font-size: 1.4rem; line-height: 1; padding: 4px 6px; border-radius: 8px; margin-left: 8px; flex-shrink: 0; transition: color 0.15s, background 0.15s; } .qr-close:hover { color: var(--qr-terracotta); background: rgba(164, 74, 63, 0.08); } /* ── Step indicator ─────────────────────────────────────────────────── */ .qr-step-bar { display: flex; gap: 6px; margin-bottom: 20px; } .qr-step-dot { height: 3px; flex: 1; border-radius: 99px; background: rgba(164, 74, 63, 0.2); transition: background 0.3s; } .qr-step-dot.active { background: var(--qr-terracotta); } /* ── Steps (2 steps) ────────────────────────────────────────────────── */ .qr-capture-step { display: none; } .qr-capture-step.visible { display: block; } /* ── Form fields ────────────────────────────────────────────────────── */ .qr-field { margin-bottom: 16px; } .qr-field label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--qr-ink); margin-bottom: 6px; letter-spacing: 0.3px; text-transform: uppercase; } .qr-field label .qr-optional { font-weight: 400; color: var(--qr-muted); text-transform: none; letter-spacing: 0; font-size: 0.8rem; } .qr-field input[type="email"], .qr-field input[type="tel"], .qr-field input[type="text"], .qr-field input[type="date"] { width: 100%; box-sizing: border-box; background: var(--qr-input-bg); border: 1.5px solid rgba(26, 15, 8, 0.18); border-radius: var(--qr-radius); padding: 12px 16px; font-size: 1rem; font-family: 'Inter', system-ui, sans-serif; color: var(--qr-ink); outline: none; transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; } .qr-field input:focus { border-color: var(--qr-terracotta); box-shadow: 0 0 0 3px rgba(164, 74, 63, 0.15); } .qr-field input.qr-has-error { border-color: var(--qr-error); } .qr-field input[readonly] { background: rgba(245, 234, 216, 0.5); color: var(--qr-muted); cursor: default; } /* Hint below field */ .qr-field-hint { font-size: 0.78rem; color: var(--qr-muted); margin-top: 5px; } /* Error message below field */ .qr-field-error { font-size: 0.8rem; color: var(--qr-error); margin-top: 5px; display: none; } .qr-field-error.visible { display: block; } /* ── City auto-detect row ────────────────────────────────────────────── */ .qr-city-row { display: flex; gap: 10px; } .qr-city-row .qr-field { flex: 1; } /* ── RGPD checkbox ───────────────────────────────────────────────────── */ .qr-rgpd { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 20px; font-size: 0.83rem; color: var(--qr-muted); line-height: 1.5; } .qr-rgpd input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--qr-terracotta); margin-top: 2px; cursor: pointer; } .qr-rgpd a { color: var(--qr-terracotta); text-decoration: underline; text-underline-offset: 2px; } /* ── Buttons ─────────────────────────────────────────────────────────── */ .qr-actions { display: flex; flex-direction: column; gap: 10px; } .qr-btn-primary { width: 100%; background: var(--qr-terracotta); color: #fbf8f4; border: none; border-radius: 100px; padding: 14px 24px; font-family: 'Inter', system-ui, sans-serif; font-size: 0.96rem; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.1s; letter-spacing: 0.1px; } .qr-btn-primary:hover { background: var(--qr-terracotta-hover); } .qr-btn-primary:active { transform: scale(0.98); } .qr-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .qr-btn-secondary { width: 100%; background: transparent; color: var(--qr-muted); border: 1.5px solid rgba(26, 15, 8, 0.18); border-radius: 100px; padding: 12px 24px; font-family: 'Inter', system-ui, sans-serif; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; } .qr-btn-secondary:hover { background: rgba(26, 15, 8, 0.06); color: var(--qr-ink); } /* Submit-level error (below buttons) */ .qr-submit-error { font-size: 0.83rem; color: var(--qr-error); text-align: center; margin-top: 8px; display: none; } .qr-submit-error.visible { display: block; } /* ── Success state ───────────────────────────────────────────────────── */ .qr-success-msg { text-align: center; padding: 12px 0 4px; } .qr-success-msg .qr-success-icon { font-size: 2.4rem; display: block; margin-bottom: 12px; } .qr-success-msg h3 { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.35rem; color: var(--qr-ink); margin: 0 0 10px; } .qr-success-msg p { font-size: 0.9rem; color: var(--qr-muted); margin: 0 0 20px; line-height: 1.5; } /* ── Honeypot (invisible) ────────────────────────────────────────────── */ .qr-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* ── Loading spinner inside button ──────────────────────────────────── */ .qr-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: qrSpin 0.7s linear infinite; vertical-align: middle; margin-right: 6px; } @keyframes qrSpin { to { transform: rotate(360deg); } }