/* Partial read block + lead capture — Scavi US blog. Same contract as the BR blogs: the article only hides when carries .scavi-locked, so no-JS readers and known leads see everything. */ .scavi-locked .paywall { display: none; } .gate-wrap { display: none; } .scavi-locked .gate-wrap { display: block; } .gate-wrap { position: relative; margin: 0 0 8px; } /* The form only lives inside the modal. Until gate.js confirms it loaded (.gate-pronto), the box stays visible inline as a fallback — a network failure must never leave the reader with no way to unlock. */ .scavi-locked.gate-pronto .gate-wrap .gate-box { display: none; } .scavi-locked.gate-pronto .gate-wrap .gate-fade { margin-bottom: 40px; } .gate-fade { height: 180px; margin-top: -180px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--l0) 92%); } .gate-box { padding: 38px 34px; background: linear-gradient(165deg, #FFFFFF, #F7FBF9); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-lg); text-align: left; position: relative; overflow: hidden; } .gate-box::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--emerald-l), var(--gold-l)); } .gate-box .gate-eyebrow { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } .gate-box h2 { font-family: var(--display); font-size: 1.32rem; color: var(--ink); letter-spacing: -.02em; line-height: 1.28; margin: 0 0 10px; } .gate-box .gate-sub { font-size: .95rem; color: var(--txt2); margin-bottom: 24px; } .gate-field { margin-bottom: 14px; } .gate-field label { display: block; font-size: .8rem; font-weight: 600; color: var(--txt); margin-bottom: 6px; } .gate-field input[type="text"], .gate-field input[type="email"], .gate-field input[type="tel"] { width: 100%; font-family: var(--body); font-size: .96rem; color: var(--ink); padding: 12px 14px; background: #fff; border: 1px solid var(--line-2); border-radius: var(--r-sm); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .gate-field input:focus { outline: 0; border-color: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-soft); } .gate-field input[aria-invalid="true"] { border-color: #C0392B; } .gate-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: var(--txt2); margin: 16px 0 18px; line-height: 1.5; } .gate-consent input { margin-top: 3px; accent-color: var(--emerald); flex-shrink: 0; } .gate-consent a { color: var(--emerald); text-decoration: underline; } .gate-submit { width: 100%; font-family: var(--body); font-size: .96rem; font-weight: 600; padding: 14px 20px; border: 0; border-radius: var(--r-pill); background: var(--emerald); color: #fff; cursor: pointer; transition: background .2s var(--ease); } .gate-submit:hover { background: var(--emerald-d); } .gate-submit:disabled { opacity: .6; cursor: default; } .gate-error { display: none; margin-top: 12px; font-size: .85rem; color: #C0392B; } .gate-error.show { display: block; } .gate-foot { margin-top: 16px; font-size: .8rem; color: var(--txt3); text-align: center; } .gate-foot a { color: var(--txt2); text-decoration: underline; } /* ---------- modal ---------- */ .gate-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(4, 16, 10, .62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); overflow-y: auto; animation: gateIn .28s var(--ease); } .gate-modal .gate-box { width: 100%; max-width: 460px; margin: auto; } @keyframes gateIn { from { opacity: 0; } to { opacity: 1; } } .gate-aberto { overflow: hidden; } .gate-voltar { display: block; width: 100%; margin-top: 14px; background: none; border: 0; cursor: pointer; font-family: var(--body); font-size: .84rem; color: var(--txt3); text-decoration: underline; } .gate-voltar:hover { color: var(--txt2); } @media (max-width: 560px) { .gate-box { padding: 28px 22px; } .gate-modal { padding: 14px; align-items: flex-start; padding-top: 28px; } }