/* * Janela do STORY 9:16 do hero de clima. * * Espelha a do story da vazão (.elo-vazao-story-modal): fundo escurecido, caixa * central com prévia do canvas à esquerda e ações à direita, empilhando no * celular. Escrita aqui, e não reaproveitada de lá, porque são plugins * independentes - um site pode ter só um dos dois instalado, e depender do CSS * do outro deixaria a janela sem estilo nenhum, sem aviso. * * A PRÉVIA É LIMITADA PELA ALTURA, não pela largura: o canvas é 9:16, então em * qualquer tela larga o que estoura primeiro é a vertical. max-height em vh com * width:auto resolve sem precisar medir nada em JS. */ .elo-clima-story-modal, .elo-clima-story-modal * { box-sizing: border-box; } /* z-index ALTO E REPARENT - a dupla que faz a janela ficar de fato acima do site. O z-index sozinho não resolve: qualquer ancestral com transform, filter ou position cria um CONTEXTO DE EMPILHAMENTO próprio, e dentro dele nenhum número, por maior que seja, vence um elemento fixo do TEMA que esteja fora daquele contexto. Numa linha do WPBakery isso é a regra, não a exceção (o parallax escreve transform na .row-bg o tempo todo). Por isso o JS move a janela pra ser filha direta de ao abrir - ver moverParaFinalDoBody. O mesmo par foi o que corrigiu os dois modais do plugin de vazão. Centralizada na viewport a partir de 640px; abaixo disso vira FOLHA ancorada na base (ver a media query logo abaixo). */ .elo-clima-story-modal { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 24px; } /* CELULAR: folha ancorada na base, colada nas laterais e no rodapé. */ @media (max-width: 639px) { .elo-clima-story-modal { align-items: flex-end; padding: 0; } } .elo-clima-story-modal[hidden] { display: none; } /* Escurece E DESFOCA a página atrás (10px, o mesmo do story da vazão - 3px, que era o valor daqui, mal se percebia). O desfoque só funciona de verdade depois do reparent: dentro de um ancestral com transform, backdrop-filter passa a filtrar aquele contexto em vez da página inteira. */ .elo-clima-story-modal__fundo { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .elo-clima-story-modal__caixa { position: relative; display: flex; flex-direction: column; gap: 18px; width: 100%; max-width: 1000px; max-height: 90vh; overflow-y: auto; padding: 32px; border-radius: 24px; background: #ffffff; box-shadow: 0 24px 64px rgba(2, 6, 23, 0.35); color: #0f172a; font-family: inherit; } .elo-clima-story-modal__caixa:focus { outline: none; } @media (min-width: 640px) { .elo-clima-story-modal__caixa { padding: 48px; } } /* CELULAR: folha na base - cantos arredondados só em cima, largura inteira, e o rodapé respeitando a área segura do aparelho (barra de gestos do iPhone). */ @media (max-width: 639px) { .elo-clima-story-modal__caixa { max-width: 100%; max-height: 85vh; border-radius: 24px 24px 0 0; padding: 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); } } .elo-clima-story-modal__fechar { position: absolute; top: 24px; right: 24px; z-index: 1; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(15, 23, 42, 0.06); color: #0f172a; font-size: 20px; line-height: 1; cursor: pointer; } .elo-clima-story-modal__fechar:hover { background: rgba(15, 23, 42, 0.12); } /* Reserva o espaço do X (absoluto, canto superior direito) pra ele nunca sobrepor o título numa caixa estreita. */ .elo-clima-story-modal__cabecalho { padding-right: 56px; } .elo-clima-story-modal__rotulo-topo { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #64748b; } .elo-clima-story-modal__titulo { margin: 2px 0 0; font-size: 1.3rem; line-height: 1.2; } /* Mobile-first, como no vazão: coluna (prévia em cima, ações embaixo) até 639px, lado a lado a partir de 640px - a ordem no DOM já resolve o empilhamento sozinha. */ .elo-clima-story-modal__corpo { display: flex; flex-direction: column; gap: 24px; } @media (min-width: 640px) { .elo-clima-story-modal__corpo { flex-direction: row; align-items: flex-start; gap: 32px; } } .elo-clima-story-modal__previa { position: relative; flex: 0 0 auto; } /* 9:16: a ALTURA é o limite em qualquer tela larga (ver o cabeçalho). */ .elo-clima-story-modal__canvas { display: block; width: auto; max-width: 100%; height: auto; max-height: 62vh; border-radius: 12px; background: #0f172a; } .elo-clima-story-modal__estado { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 16px; border-radius: 12px; background: rgba(15, 23, 42, 0.82); color: #ffffff; font-size: 0.9rem; text-align: center; } .elo-clima-story-modal__estado[hidden] { display: none; } .elo-clima-story-modal__lado { flex: 1 1 auto; min-width: 0; } .elo-clima-story-modal__apoio { margin: 0 0 16px; font-size: 0.92rem; line-height: 1.5; color: #475569; } .elo-clima-story-modal__acoes { display: flex; flex-direction: column; gap: 10px; } .elo-clima-story-modal__acao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; } .elo-clima-story-modal__acao[disabled] { opacity: 0.5; cursor: default; } .elo-clima-story-modal__acao--solida { border: 0; background: #0f172a; color: #ffffff; } .elo-clima-story-modal__acao--outline { border: 1px solid rgba(15, 23, 42, 0.25); background: transparent; color: #0f172a; } @media (max-width: 639px) { .elo-clima-story-modal__canvas { max-height: 46vh; margin: 0 auto; } }