/* ============================================================ Tava — Hero CTA + Modal de contato ============================================================ */ /* CTA do hero fica inline no do index.html (evita FOUC). Aqui só o modal e estados. */ /* ---------- Modal ---------- */ html.tava-modal-lock, html.tava-modal-lock body { overflow: hidden; } .tava-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1.5rem; visibility: hidden; pointer-events: none; } .tava-modal.is-open { visibility: visible; pointer-events: auto; } .tava-modal__overlay { position: absolute; inset: 0; background: rgba(43, 32, 23, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.35s ease; } .tava-modal.is-open .tava-modal__overlay { opacity: 1; } .tava-modal__card { position: relative; width: 100%; max-width: 34rem; max-height: calc(100vh - 3rem); overflow-y: auto; background: linear-gradient(160deg, #856a4e 0%, #6e563e 100%); border: 1px solid rgba(249, 246, 241, 0.22); border-radius: 1.25rem; padding: 2.75rem 2.5rem 2.5rem; color: #f9f6f1; box-shadow: 0 30px 80px rgba(31, 22, 15, 0.5); opacity: 0; transform: translateY(24px) scale(0.97); transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .tava-modal.is-open .tava-modal__card { opacity: 1; transform: none; } .tava-modal__card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #f9f6f1, transparent); opacity: 0.65; } .tava-modal__close { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(249, 246, 241, 0.18); border-radius: 50%; color: rgba(249, 246, 241, 0.75); cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; } .tava-modal__close:hover { color: #fff; border-color: rgba(249, 246, 241, 0.55); transform: rotate(90deg); } .tava-modal__close svg { width: 1rem; height: 1rem; } .tava-modal__header { text-align: center; margin-bottom: 2rem; } .tava-modal__eyebrow { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(249, 246, 241, 0.72); margin-bottom: 0.75rem; } .tava-modal__title { font-size: 1.75rem; font-weight: 400; line-height: 1.2; margin: 0 0 0.6rem; color: #f9f6f1; text-transform: none; } .tava-modal__subtitle { font-size: 0.95rem; line-height: 1.55; color: rgba(249, 246, 241, 0.78); margin: 0 auto; max-width: 24rem; } /* ---------- Formulário dentro do modal ---------- */ .tava-modal .form-field-wrapper.contact2 { display: grid; grid-template-columns: 1fr; gap: 0.4rem; padding: 0.35rem 0; } .tava-modal .field-label { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(249, 246, 241, 0.8); } .tava-modal .form-input { width: 100%; min-width: 0; background: transparent; border: 0; padding: 0.5rem 0 0.65rem; color: #f9f6f1; font-size: 1rem; } .tava-modal .form-input:focus { outline: none; } .tava-modal .form-input::placeholder { color: rgba(249, 246, 241, 0.45); } .tava-modal .form-input.is-text-area { min-height: 5.5rem; resize: vertical; } .tava-modal .animated-horizontal { width: 100%; height: 1px; background: rgba(249, 246, 241, 0.25); transition: background 0.3s ease; } .tava-modal .form-field-wrapper.contact2:focus-within + .animated-horizontal { background: #f9f6f1; } .tava-modal .flex-align-right-copy.is-service { display: flex; justify-content: flex-end; margin-top: 1.75rem; } .tava-modal input[type="submit"] { cursor: pointer; } /* ---------- Mobile ---------- */ @media (max-width: 767px) { .tava-modal { padding: 0; align-items: flex-end; } .tava-modal__card { max-width: none; max-height: calc(100svh - 3.5rem); border-radius: 1.25rem 1.25rem 0 0; border-left: 0; border-right: 0; border-bottom: 0; padding: 2.25rem 1.5rem 2rem; } .tava-modal__title { font-size: 1.45rem; } .tava-modal .flex-align-right-copy.is-service { justify-content: stretch; } .tava-modal input[type="submit"] { width: 100%; } }