/* ========================================================================== Componentes proprios da Emito (fora do Webflow) Modal da Politica de Privacidade + aviso de cookies. Carregado depois de emito.css e de emito-theme-dark.css; funciona nos dois temas, lendo o mesmo do resto do site. ========================================================================== */ :root { --emito-ui--brand: #95c122; --emito-ui--surface: #fff; --emito-ui--surface-soft: #f6f6f6; --emito-ui--text: #383838; --emito-ui--text-soft: #5f5f5f; --emito-ui--border: #0000001f; --emito-ui--shadow: 0 18px 50px #0000002e; } :root[data-theme="dark"] { --emito-ui--surface: #141414; --emito-ui--surface-soft: #1e1e1e; --emito-ui--text: #fff; --emito-ui--text-soft: #ffffffb3; --emito-ui--border: #ffffff21; --emito-ui--shadow: 0 18px 50px #00000080; } /* ========================================================================== Botoes compartilhados pelo modal e pelo aviso de cookies ========================================================================== */ .emito-btn { cursor: pointer; border-radius: 999px; padding: .7rem 1.35rem; font-family: Figtree, sans-serif; font-size: .9375rem; font-weight: 500; line-height: 1.2; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; } .emito-btn:active { transform: translateY(1px); } .emito-btn:focus-visible { outline: 2px solid var(--emito-ui--brand); outline-offset: 2px; } .emito-btn.is-primary { color: #1c2a06; background-color: var(--emito-ui--brand); border: 1px solid var(--emito-ui--brand); } .emito-btn.is-primary:hover { background-color: #a5d329; border-color: #a5d329; } .emito-btn.is-ghost { color: var(--emito-ui--text); background-color: #0000; border: 1px solid var(--emito-ui--border); } .emito-btn.is-ghost:hover { border-color: var(--emito-ui--brand); background-color: #95c1221f; } /* ========================================================================== Modal da Politica de Privacidade E um nativo: o Esc, o foco preso dentro do modal e a camada por cima do resto da pagina ja vem do browser. ========================================================================== */ .emito-modal { color: var(--emito-ui--text); background-color: var(--emito-ui--surface); border: 1px solid var(--emito-ui--border); border-radius: 1rem; width: min(46rem, calc(100vw - 2rem)); max-width: none; max-height: min(46rem, calc(100vh - 3rem)); box-shadow: var(--emito-ui--shadow); flex-direction: column; padding: 0; font-family: Figtree, sans-serif; overflow: hidden; } .emito-modal[open] { display: flex; } /* O bloqueia o clique no fundo, mas nao a rolagem. Travar por CSS (e nao mexendo no style do body) evita a pagina ficar presa se o evento de fechamento nao chegar. */ html:has(.emito-modal[open]) { overflow: hidden; } .emito-modal::backdrop { background-color: #0f0f0fb8; backdrop-filter: blur(3px); } .emito-modal__header { border-bottom: 1px solid var(--emito-ui--border); justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.5rem 1.75rem 1.25rem; display: flex; flex: none; } /* O emito.css pinta h2/h3 com gradiente recortado no texto (background-clip: text + text-fill-color transparente). Dentro do modal isso deixa os titulos invisiveis, entao voltamos ao texto solido. */ .emito-modal__title, .emito-modal__body h3 { -webkit-text-fill-color: currentColor; background-image: none; -webkit-background-clip: border-box; background-clip: border-box; } .emito-modal__title { color: var(--emito-ui--text); margin: 0; font-size: 1.375rem; font-weight: 600; line-height: 1.25; } .emito-modal__subtitle { color: var(--emito-ui--text-soft); margin: .375rem 0 0; font-size: .8125rem; } .emito-modal__close { color: var(--emito-ui--text); cursor: pointer; background: none; border: 1px solid var(--emito-ui--border); border-radius: 999px; flex: none; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; display: grid; transition: border-color .2s ease, background-color .2s ease; } .emito-modal__close:hover { border-color: var(--emito-ui--brand); background-color: #95c1221f; } .emito-modal__close:focus-visible { outline: 2px solid var(--emito-ui--brand); outline-offset: 2px; } .emito-modal__close svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.7px; stroke-linecap: round; } .emito-modal__body { color: var(--emito-ui--text-soft); padding: 1.5rem 1.75rem; font-size: .9375rem; line-height: 1.65; overflow-y: auto; overscroll-behavior: contain; } .emito-modal__body h3 { color: var(--emito-ui--text); margin: 2rem 0 .5rem; font-size: 1rem; font-weight: 600; line-height: 1.35; } .emito-modal__body h3:first-child { margin-top: 0; } .emito-modal__body p { margin: 0 0 .75rem; } .emito-modal__body ul { margin: 0 0 .75rem; padding-left: 1.15rem; } .emito-modal__body li { margin-bottom: .375rem; } .emito-modal__body a { color: var(--emito-ui--brand); text-decoration: underline; } .emito-modal__body strong { color: var(--emito-ui--text); font-weight: 600; } .emito-modal__footer { border-top: 1px solid var(--emito-ui--border); background-color: var(--emito-ui--surface-soft); justify-content: flex-end; gap: .75rem; padding: 1rem 1.75rem; display: flex; flex: none; } @media screen and (max-width: 767px) { .emito-modal { width: 100%; max-width: 100%; max-height: 92vh; border-bottom-right-radius: 0; border-bottom-left-radius: 0; margin: auto auto 0; } .emito-modal__header, .emito-modal__body, .emito-modal__footer { padding-left: 1.25rem; padding-right: 1.25rem; } } /* ========================================================================== Aviso de cookies ========================================================================== */ .cookie-banner { z-index: 9998; color: var(--emito-ui--text); background-color: var(--emito-ui--surface); border: 1px solid var(--emito-ui--border); border-radius: 1rem; width: min(34rem, calc(100vw - 2rem)); box-shadow: var(--emito-ui--shadow); flex-direction: column; gap: 1rem; padding: 1.25rem 1.375rem; font-family: Figtree, sans-serif; display: none; position: fixed; bottom: 1.25rem; left: 1.25rem; } .cookie-banner.is-visible { animation: .35s ease-out cookie-banner-in; display: flex; } @keyframes cookie-banner-in { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } } .cookie-banner__text { color: var(--emito-ui--text-soft); margin: 0; font-size: .875rem; line-height: 1.6; } .cookie-banner__text a { color: var(--emito-ui--brand); text-decoration: underline; } .cookie-banner__actions { flex-wrap: wrap; justify-content: flex-end; gap: .625rem; display: flex; } .cookie-banner__actions .emito-btn { min-width: 9.5rem; } @media screen and (max-width: 479px) { .cookie-banner { width: calc(100vw - 1.5rem); left: .75rem; bottom: .75rem; } .cookie-banner__actions .emito-btn { flex: 1; } } @media (prefers-reduced-motion: reduce) { .emito-btn, .emito-modal__close { transition: none; } .cookie-banner.is-visible { animation: none; } }