/* ./static/css/consorcios/simulacao/modules/lead/lead-capture.css Estilos do Gate (blur + FAB + hint) e do formulário híbrido (sheet/modal). */ /* ============================ BLUR / GATE ============================ */ .lc-blur { filter: blur(6px) saturate(60%) grayscale(35%); pointer-events: none; user-select: none; transition: filter .18s ease-in-out; } /* compat legado (caso a classe seja aplicada só no #planosContainer) */ #planosContainer.lc-blur .plan-card, .plans-container.lc-blur .plan-card { filter: blur(6px) saturate(60%) grayscale(35%); pointer-events: none; user-select: none; } /* Classe global aplicada ao quando gate ativo body.lc-gated {} se desejar, pode travar scroll global aqui */ /* ============================ FAB e Hint ============================ */ .lc-fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1000; display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-radius: 999px; background: var(--color-primary-600, #1C267F); color: #fff; border: none; box-shadow: 0 8px 24px rgba(0,0,0,.2); cursor: pointer; font-weight: 600; line-height: 1; transform: translateZ(0); will-change: transform, box-shadow; animation: lc-fab-pop .25s ease-out both, lc-fab-pulse 2.6s ease-in-out infinite; } .lc-fab:hover { box-shadow: 0 10px 28px rgba(0,0,0,.28); } .lc-fab:active { transform: scale(.98); } .lc-fab-icon { display: inline-flex; } .lc-fab-text { display: inline-block; white-space: nowrap; font-size: .95rem; } @media (max-width: 380px) { .lc-fab { padding: .7rem .8rem; gap: 0; } .lc-fab-text { display: none; } } @keyframes lc-fab-pop { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes lc-fab-pulse { 0%, 100% { box-shadow: 0 8px 24px rgba(var(--bs-primary-rgb,28,38,127), .35); } 50% { box-shadow: 0 8px 28px rgba(var(--bs-primary-rgb,28,38,127), .55); } } /* Hint acima do FAB */ .lc-fab-hint { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 999; display: grid; gap: .15rem; padding: .55rem .7rem; background: #0f172a; color: #e2e8f0; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: 0; transform: translateY(6px); transition: all .22s ease-out; max-width: 260px; font-size: .9rem; } .lc-fab-hint strong { color: #fff; font-weight: 700; } .lc-fab-hint.show { opacity: 1; transform: translateY(0); } /* setinha para ligar o hint ao FAB */ .lc-fab-hint.show::after { content: ""; position: absolute; right: 20px; bottom: -8px; border-width: 8px 8px 0 8px; border-style: solid; border-color: #0f172a transparent transparent transparent; } /* ============================ MODAL / SHEET ============================ */ .lc-modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; } .lc-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); } .lc-modal-dialog { position: relative; width: min(92vw, 620px); max-height: 86vh; overflow: auto; background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.35); padding: 1rem 1rem 1.25rem; } /* ============================ OVERLAY (backdrop-filter) ============================ */ .lc-gate-overlay{ position:absolute; inset:0; z-index: 1040; /* abaixo do modal (1100), acima do conteúdo */ background: rgba(255,255,255,.38); -webkit-backdrop-filter: blur(5px) saturate(80%); backdrop-filter: blur(5px) saturate(80%); cursor: pointer; border-radius: 12px; } @media (prefers-reduced-motion: no-preference){ .lc-gate-overlay{ animation: lc-overlay-fade .18s ease-out; } } @keyframes lc-overlay-fade{ from{ opacity: .85 } to{ opacity: 1 } } .lc-modal.as-sheet { place-items: end; /* encosta embaixo */ } .lc-modal.as-sheet .lc-modal-dialog { width: 100%; max-width: 720px; border-radius: 16px 16px 0 0; max-height: 88vh; animation: lc-sheet-up .2s ease-out both; } @keyframes lc-sheet-up { from { transform: translateY(12px); opacity: .98; } to { transform: translateY(0); opacity: 1; } } .lc-modal-header { display: flex; align-items: center; justify-content: space-between; padding: .25rem .25rem .5rem; border-bottom: 1px solid rgba(0,0,0,.06); } .lc-modal-header h3 { font-size: 1.15rem; margin: 0; } .lc-modal-close { border: none; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; } .lc-resumo-top { display: grid; gap: .25rem; padding: .65rem .5rem .5rem; border-bottom: 1px dashed #e5e7eb; background: #fafafa; } .lc-resumo-top-title { font-weight: 600; font-size: .92rem; color: #334155; } .lc-resumo-top-line { font-size: .95rem; color: #111827; } .lc-modal-body { padding: 1rem .25rem .25rem; } .lc-form { display: grid; gap: 0rem; } .lc-step-desc { margin: 0 0 .25rem 0; color: #334155; } .lc-step.hidden { display: none; } .lc-field { display: grid; gap: .35rem; } .lc-label { font-weight: 600; font-size: .95rem; } .lc-input { width: 100%; height: 42px; border-radius: 10px; border: 1px solid #e5e7eb; padding: 0 .75rem; font-size: .96rem; } .lc-input:focus { outline: none; border-color: var(--color-primary-600, #1C267F); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb,28,38,127),.18); } .lc-error { color: #b91c1c; font-size: .85rem; min-height: 1em; } .lc-consent { display: flex; align-items: flex-start; gap: .65rem; font-size: .9rem; line-height: 1.4; margin: .75rem 0 .35rem; flex-wrap: wrap; } .lc-consent input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; margin-top: .15rem; } .lc-consent span { flex: 1; min-width: 0; } @media (max-width: 520px) { .lc-consent { flex-direction: column; align-items: flex-start; gap: .35rem; } .lc-consent input[type="checkbox"] { margin-top: 0; } .lc-consent span { width: 100%; } } /* Inline toast abaixo do consentimento (evita conflito com Bootstrap .toast) */ .lc-inline-toast { width: 100%; margin-top: .5rem; } .lc-inline-toast .toast { display: block !important; position: static; width: 100%; } .lc-inline-toast .toast { padding: 12px 18px; border-radius: 10px; border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,.04); text-align: center; animation: fadeIn .25s ease-out; } /* Estilos por tipo – iguais ao .error-message/.info-tip do simulador */ .lc-inline-toast .toast.error { background: rgba(239, 68, 68, .08); /* vermelho suave */ color: var(--danger); border-left: 6px solid var(--danger); } .lc-inline-toast .toast.success { background: rgba(22, 163, 74, .08); color: #16a34a; border-left: 6px solid #16a34a; } .lc-inline-toast .toast.warning { background: rgba(245, 158, 11, .08); color: #b45309; border-left: 6px solid #f59e0b; } .lc-inline-toast .toast.fade-out{ animation: fadeOut .25s forwards; } .lc-actions { display: flex; gap: .75rem; justify-content: flex-end; padding-top: .5rem; flex-wrap: wrap; } .lc-btn { height: 42px; border-radius: 10px; padding: 0 1rem; font-weight: 600; cursor: pointer; border: none; } .lc-btn-primary { background: var(--color-primary-600); color: #fff; transition: transform .08s ease, box-shadow .12s ease, filter .12s ease; border:1px solid var(--color-primary-600); } .lc-btn-primary:hover { filter: brightness(1.05); box-shadow: 0 6px 18px rgba(65,105,225,.35); transform: translateY(-1px); border-color: var(--color-primary-700); } .lc-btn-primary:active { transform: translateY(0); filter: brightness(.98); box-shadow: 0 3px 10px rgba(65,105,225,.25); } .lc-btn-ghost { background: var(--color-primary-50); color: var(--color-neutral-900); } .lc-btn-ghost { transition: transform .08s ease, box-shadow .12s ease, filter .12s ease; } .lc-btn-ghost:hover { filter: brightness(1.02); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(30,41,59,.15); } .lc-btn-ghost:active { transform: translateY(0); filter: brightness(.99); box-shadow: 0 3px 10px rgba(30,41,59,.1); } .lc-btn-danger { background: #fee2e2; color: #7f1d1d; } /* ============ Opcionais ============ */ .lc-optional { border: 1px solid #e5e7eb; border-radius: 12px; padding: .5rem .75rem .75rem; background: #fafafa; margin-top: 1rem; } .lc-optional > summary { cursor: pointer; font-weight: 600; outline: none; list-style: none; } .lc-optional > summary::-webkit-details-marker { display: none; } .lc-optional[open] > summary { margin-bottom: .5rem; } .lc-optional-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; } .lc-opt { display: grid; gap: .35rem; font-size: .92rem; } .lc-opt span { font-weight: 500; } /* Acessibilidade */ .lc-modal [tabindex="-1"] { outline: none; }