/* Bloqueio parcial de leitura (captura de lead) — mesma mecânica dos blogs da Scavi, repintada para o tema claro daqui. O lead cai na mesma base. */ /* O conteúdo só some quando o está marcado como bloqueado. Sem JS (e para quem já se cadastrou) o artigo aparece inteiro. */ .veylo-locked .paywall { display: none; } .gate-wrap { display: none; } .veylo-locked .gate-wrap { display: block; } .gate-wrap { position: relative; margin: 0 0 0.5rem; } /* 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 forma de liberar. */ .veylo-locked.gate-pronto .gate-wrap .gate-box { display: none; } .veylo-locked.gate-pronto .gate-wrap .gate-fade { margin-bottom: 2.5rem; } /* Degradê que "corta" o último parágrafo livre */ .gate-fade { height: 11rem; margin-top: -11rem; pointer-events: none; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 92%); } .gate-box { padding: 2.25rem 2rem; border: 1px solid var(--linha); border-radius: 1.1rem; background: radial-gradient(120% 100% at 50% 0%, rgba(124, 58, 237, 0.08), transparent 70%), #fff; box-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.25); text-align: center; } .gate-eyebrow { display: inline-flex; align-items: center; padding: 0.35rem 0.85rem; margin-bottom: 1rem; border-radius: 999px; background: var(--violeta-claro); font-family: "Sora", sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--violeta-escuro); } .gate-box h2 { margin: 0 0 0.6rem !important; font-family: "Sora", sans-serif; font-size: clamp(1.35rem, 3.2vw, 1.75rem) !important; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--tinta); } .gate-sub { margin: 0 auto 1.5rem; max-width: 30rem; font-size: 0.9375rem; line-height: 1.6; color: var(--tinta-suave); } .gate-form { display: grid; gap: 0.65rem; max-width: 25rem; margin: 0 auto; text-align: left; } .gate-form input[type="text"], .gate-form input[type="email"], .gate-form input[type="tel"] { width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--linha); border-radius: 0.7rem; background: #fff; font-family: inherit; font-size: 1rem; color: var(--tinta); transition: border-color 0.15s, box-shadow 0.15s; } .gate-form input::placeholder { color: var(--tinta-fraca); } .gate-form input:focus { outline: 0; border-color: #c4b5fd; box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12); } .gate-form input[aria-invalid="true"] { border-color: #f87171; box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.12); } .gate-consent { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.8125rem; line-height: 1.5; color: var(--tinta-suave); } .gate-consent input { margin-top: 0.2rem; width: 1rem; height: 1rem; accent-color: var(--violeta); flex: none; } .gate-error { display: none; margin: 0; font-size: 0.8125rem; color: #dc2626; } .gate-error.show { display: block; } .gate-submit { padding: 0.95rem 1.25rem; border: 0; border-radius: 0.7rem; background: var(--violeta); font-family: "Sora", sans-serif; font-size: 1rem; font-weight: 700; color: #fff; cursor: pointer; transition: background 0.15s, transform 0.1s; } .gate-submit:hover { background: var(--violeta-escuro); } .gate-submit:active { transform: translateY(1px); } .gate-submit:disabled { opacity: 0.6; cursor: default; } .gate-foot { margin: 1rem 0 0; font-size: 0.8125rem; color: var(--tinta-fraca); } /* ---------- Pop-up ---------- */ .gate-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow-y: auto; } .gate-modal .gate-box { display: block !important; width: 100%; max-width: 30rem; margin: auto; } .gate-aberto { overflow: hidden; } .gate-voltar { display: block; width: 100%; margin-top: 1rem; padding: 0.5rem; border: 0; background: transparent; font-family: inherit; font-size: 0.8125rem; color: var(--tinta-fraca); text-decoration: underline; cursor: pointer; } .gate-voltar:hover { color: var(--violeta-escuro); } @media (max-width: 40rem) { .gate-box { padding: 1.75rem 1.25rem; } .gate-modal { padding: 0.75rem; align-items: flex-start; } } /* Tema escuro: o degradê precisa terminar na cor do fundo, senão aparece uma faixa branca no meio do artigo. */ @media (prefers-color-scheme: dark) { .gate-fade { background: linear-gradient(to bottom, rgba(5, 7, 15, 0), #05070f 92%); } .gate-box { background: radial-gradient(120% 100% at 50% 0%, rgba(124, 58, 237, 0.18), transparent 70%), #0a0f1e; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.75); } .gate-form input[type="text"], .gate-form input[type="email"], .gate-form input[type="tel"] { background: #05070f; color: var(--tinta); } .gate-form input:focus { border-color: rgba(167, 139, 250, 0.55); } .gate-modal { background: rgba(2, 4, 10, 0.72); } .gate-error { color: #fca5a5; } }