/* Bloqueio parcial de leitura (captura de lead) — compartilhado pelos 4 blogs. Usa as variáveis de tema, então recolore sozinho em cada blog. */ /* O conteúdo só some quando o está marcado como bloqueado. Sem JS (e para leitores que já se cadastraram) o artigo aparece inteiro. */ .scavi-locked .paywall { display: none; } .gate-wrap { display: none; } .scavi-locked .gate-wrap { display: block; } .gate-wrap { position: relative; margin: 0 0 8px; } /* O formulário só aparece dentro do pop-up. Enquanto o gate.js não confirmar que carregou (.gate-pronto), a caixa fica visível no texto como reserva — assim uma falha de rede nunca deixa a pessoa sem nenhuma forma de liberar. */ .scavi-locked.gate-pronto .gate-wrap .gate-box { display: none; } .scavi-locked.gate-pronto .gate-wrap .gate-fade { margin-bottom: 40px; } /* Degradê que "corta" o último parágrafo livre */ .gate-fade { height: 180px; margin-top: -180px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--bg) 92%); } .gate-box { padding: 40px 36px; border: 1px solid var(--brd-g); border-radius: var(--radius-lg, 24px); background: radial-gradient(120% 100% at 50% 0%, var(--gold-glow2), transparent 70%), var(--bg-card); text-align: center; } .gate-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; margin-bottom: 18px; border: 1px solid var(--brd-g); border-radius: 999px; font-family: var(--body); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-l); } .gate-box h2 { margin: 0 0 10px !important; font-family: var(--heading); font-size: clamp(1.6rem, 3.2vw, 2.1rem) !important; font-weight: 500; line-height: 1.2; color: var(--txt); } .gate-box h2::after { display: none; } .gate-sub { max-width: 480px; margin: 0 auto 26px; font-size: .95rem; line-height: 1.6; color: var(--txt2); } .gate-form { display: grid; gap: 12px; max-width: 420px; margin: 0 auto; text-align: left; } .gate-form input[type="text"], .gate-form input[type="email"], .gate-form input[type="tel"] { width: 100%; padding: 15px 18px; border: 1px solid var(--brd-g); border-radius: 12px; background: var(--bg); color: var(--txt); font-family: var(--body); font-size: 1rem; transition: border-color .2s, box-shadow .2s; } .gate-form input::placeholder { color: var(--txt3); } .gate-form input:focus { outline: 0; border-color: var(--brd-g2); box-shadow: 0 0 0 3px var(--gold-glow2); } .gate-form input[aria-invalid="true"] { border-color: #E0645F; } .gate-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; font-size: .8125rem; line-height: 1.5; color: var(--txt2); cursor: pointer; } .gate-consent input { flex: none; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--gold); cursor: pointer; } .gate-consent a { color: var(--gold-l); text-decoration: underline; } .gate-submit { margin-top: 6px; padding: 16px 24px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--gold-l), var(--gold-d)); color: #0A1A12; font-family: var(--body); font-size: 1rem; font-weight: 700; letter-spacing: .01em; cursor: pointer; transition: transform .2s var(--ease), filter .2s, opacity .2s; } .gate-submit:hover { transform: translateY(-1px); filter: brightness(1.06); } .gate-submit[disabled] { opacity: .6; cursor: progress; transform: none; } .gate-error { display: none; margin: 4px 0 0; font-size: .8125rem; color: #E0645F; } .gate-error.show { display: block; } .gate-foot { margin: 20px 0 0; font-size: .8125rem; color: var(--txt3); } .gate-foot a { color: var(--txt2); text-decoration: underline; } /* ---------- pop-up que trava a tela ---------- */ .gate-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(3, 8, 5, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; animation: gateEntra .28s var(--ease, ease-out) forwards; overflow-y: auto; } @keyframes gateEntra { to { opacity: 1; } } .gate-modal .gate-box { width: 100%; max-width: 460px; margin: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); transform: translateY(14px); animation: gateSobe .32s var(--ease, ease-out) .04s forwards; } @keyframes gateSobe { to { transform: translateY(0); } } /* trava a rolagem enquanto o pop-up está aberto */ html.gate-aberto, html.gate-aberto body { overflow: hidden; } .gate-voltar { display: block; margin: 16px auto 0; padding: 4px; border: 0; background: none; color: var(--txt3); font-family: var(--body); font-size: .8125rem; text-decoration: underline; cursor: pointer; } .gate-voltar:hover { color: var(--txt2); } @media (max-width: 600px) { .gate-box { padding: 30px 20px; } .gate-fade { height: 140px; margin-top: -140px; } .gate-modal { padding: 14px; } .gate-modal .gate-box { padding: 26px 18px; } .gate-modal .gate-sub { font-size: .875rem; margin-bottom: 20px; } }