/** * PREVIEW LOCK CSS — Defesa Express * Estilos do sistema de bloqueio de preview. * Complementa preview-lock.js. * * Classes geradas pelo JS: * .preview-locked-container — wrapper do preview * .preview-locked-content — conteúdo do documento (folha A4) * .preview-lock-overlay — overlay exibido quando bloqueado * .is-locked — estado bloqueado * .is-unlocked — estado desbloqueado */ /* ── Container principal ───────────────────────────────────────── */ .preview-locked-container { position: relative; overflow: auto; border-radius: inherit; } /* Travado: sem rolagem — evita ver o documento branco abaixo do cadeado */ .preview-locked-container.is-locked { overflow: hidden !important; overscroll-behavior: none; touch-action: none; -webkit-overflow-scrolling: auto; border-radius: inherit; } /* Oculta totalmente a folha A4 por trás do cadeado, eliminando qualquer vazamento branco nos 4 cantos arredondados */ .preview-locked-container.is-locked .preview-locked-content, .preview-locked-container.is-locked .folha-a4, .preview-locked-container.is-locked #folha-a4, .preview-locked-container.is-locked #preview-content, .preview-locked-container.is-locked #a4Preview, .preview-locked-container.is-locked .a4-page { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .preview-locked-container.is-unlocked { overflow: auto; touch-action: auto; } /* ── Overlay de bloqueio ───────────────────────────────────────── */ .preview-lock-overlay { position: absolute; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; text-align: center; border-radius: inherit; background: rgba(15, 15, 18, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); /* Invisível por padrão — só aparece quando .is-locked */ opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } /* Mostra o overlay apenas quando o container está bloqueado */ .preview-locked-container.is-locked .preview-lock-overlay { display: flex !important; /* ★ blindagem: garante display mesmo contra !important externos */ opacity: 1; pointer-events: auto; } /* Oculta o overlay quando desbloqueado */ .preview-locked-container.is-unlocked .preview-lock-overlay { display: none !important; opacity: 0; pointer-events: none; } /* ── Ícone do cadeado ──────────────────────────────────────────── */ .preview-lock-overlay .lock-icon { width: 52px; height: 52px; color: var(--gold, #d4af37); margin-bottom: 20px; filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.35)); animation: lockPulse 2.5s ease-in-out infinite; } @keyframes lockPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 18px rgba(212,175,55,.35)); } 50% { transform: scale(1.06); filter: drop-shadow(0 0 28px rgba(212,175,55,.55)); } } /* ── Textos e Blindagem Tipográfica do Bloqueio ────────────────── */ .preview-lock-overlay, .preview-lock-overlay * { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; } .preview-lock-overlay .lock-title, .preview-lock-overlay h4 { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; font-size: 1.15rem; font-weight: 700; color: #f0f0f5 !important; margin-bottom: 10px; letter-spacing: 0.02em; text-transform: none !important; } .preview-lock-overlay .lock-desc, .preview-lock-overlay p { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; font-size: 0.88rem; color: rgba(240, 240, 245, 0.7) !important; line-height: 1.65; max-width: 280px; margin-bottom: 24px; text-transform: none !important; } /* ── Botão de pagamento ────────────────────────────────────────── */ .preview-lock-overlay .lock-btn { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 28px; min-height: 48px; /* touch target mínimo */ border: none; border-radius: 10px; cursor: pointer; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; background: linear-gradient(135deg, var(--gold, #d4af37), #c8a020); color: #1a1a24; box-shadow: 0 0 0 0 rgba(212,175,55,.4); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .preview-lock-overlay .lock-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px -8px rgba(212,175,55,.55); background: linear-gradient(135deg, #e0bc44, #d4a825); } .preview-lock-overlay .lock-btn:active { transform: translateY(0); box-shadow: none; } /* ── Conteúdo bloqueado: efeito de blur ───────────────────────── */ .preview-locked-container.is-locked .preview-locked-content { filter: blur(3px); pointer-events: none; user-select: none; -webkit-user-select: none; /* Limita altura visível enquanto bloqueado */ max-height: calc(100vh - 220px); overflow: hidden; } .preview-locked-container.is-unlocked .preview-locked-content { filter: none; pointer-events: auto; user-select: auto; } /* ── Sem animação para impressão ──────────────────────────────── */ @media print { .preview-lock-overlay { display: none !important; } .preview-locked-content { filter: none !important; } } /* ── Botão de Alternar Template de Luxo e Tipografia (Visíveis apenas quando o preview estiver DESBLOQUEADO) ── */ .btn-alternar-template-luxo, .btn-alternar-fonte-luxo { display: none; opacity: 1; pointer-events: auto; cursor: pointer; transition: opacity 0.25s ease, transform 0.2s ease; } /* Quando bloqueado, oculta totalmente */ body.preview-bloqueado .btn-alternar-template-luxo, body.preview-bloqueado .btn-alternar-fonte-luxo, .is-locked .btn-alternar-template-luxo, .is-locked .btn-alternar-fonte-luxo, .preview-locked-container.is-locked ~ * .btn-alternar-template-luxo, .preview-locked-container.is-locked ~ * .btn-alternar-fonte-luxo, #previewPanel.is-locked .btn-alternar-template-luxo, #previewPanel.is-locked .btn-alternar-fonte-luxo { display: none !important; pointer-events: none !important; } /* Quando desbloqueado (pelo admin ou por pagamento), exibe o botão */ body.preview-desbloqueado .btn-alternar-template-luxo, body.preview-desbloqueado .btn-alternar-fonte-luxo, .is-unlocked .btn-alternar-template-luxo, .is-unlocked .btn-alternar-fonte-luxo, .preview-locked-container.is-unlocked ~ * .btn-alternar-template-luxo, .preview-locked-container.is-unlocked ~ * .btn-alternar-fonte-luxo, #previewPanel.is-unlocked .btn-alternar-template-luxo, #previewPanel.is-unlocked .btn-alternar-fonte-luxo { display: grid !important; pointer-events: auto !important; }