/* ========================================================================== La Casa de EPS — camada de adaptação para o Elementor O `la-casa-de-eps.css` é o mesmo arquivo do preview, sem uma linha alterada: ele é a fonte única do desenho. Este arquivo existe só para o markup que o Elementor gera (widgets de Título, Texto, Imagem e Botão) se comportar como o markup do preview — nada aqui muda o desenho, só encaixa a estrutura. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Containers Os containers do Elementor entram com padding e gap próprios. Como todo o espaçamento já vem das classes do projeto, zeramos os padrões. -------------------------------------------------------------------------- */ .e-con.topo, .e-con.wrap, .e-con.sec, .e-con[class*="__linha"], .e-con[class*="__col-"], .e-con.menu, .e-con.menu__nav, .e-con.quero, .e-con.hero__palco, .e-con.hero__cena, .e-con.hero__texto, .e-con.camadas, .e-con.carrossel, .e-con.carrossel__trilho, .e-con.nav-setas, .e-con.faixa-cta, .e-con.aplicacoes__linha, .e-con.indicado__linha, .e-con.solucoes__cabecalho, .e-con.obras__galeria, .e-con.selos__linha, .e-con.pronto__grade, .e-con.entrada, .e-con.entrada__palco, .e-con.entrada__cena { --padding-block-start: 0; --padding-block-end: 0; --padding-inline-start: 0; --padding-inline-end: 0; --gap: 0px; --width: auto; } /* O display de cada container vem do CSS do projeto (o gerador escreve o `--display` correspondente). Uma regra fixa aqui venceria as exceções — foi o que derrubava as duas colunas do CTA final. */ /* O container do Elementor nasce com 100% de largura. Nas caixas que no projeto se ajustam ao conteúdo, isso precisa voltar para `auto` — senão elas disputam o espaço da linha e saem das medidas do Figma. */ @media (min-width: 1025px) { .e-con.menu__nav, .e-con.selos__col, .e-con.selos__marcas, .e-con.card-quero__texto { width: auto; } .e-con.menu__nav, .e-con.selos__col, .e-con.selos__marcas { flex: none; } } /* -------------------------------------------------------------------------- 2. Widgets de texto O widget traz margens e tipografia próprias; aqui ele passa a herdar do elemento pai, que é onde o desenho está definido. -------------------------------------------------------------------------- */ .elementor-widget-container { margin: 0; } /* A classe do projeto fica no WIDGET; o título por dentro precisa herdar dela. Uma regra só, para todos: nenhuma tipografia deste projeto vem do Elementor. */ :where(.elementor-widget-heading) .elementor-heading-title { font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; margin: 0; } /* O `:where` deixa esta regra com o mesmo peso da do Elementor (que ela precisa vencer, por vir depois) e menos peso que qualquer regra do projeto que mire o elemento de dentro — como `.camadas__nota h3`, que continua mandando. */ /* Exceção: onde o projeto estiliza a TAG dentro do bloco (`.faixa-cta p`), essa regra alcança o

interno do widget e ganha da herança sem peso. Aqui o título volta a mandar na própria caixa. */ .faixa-cta__titulo .elementor-heading-title { font: inherit; line-height: inherit; } /* Quando a classe do projeto é uma caixa flex que centra o conteúdo (a etiqueta das obras, por exemplo), o invólucro do widget vira um bloco no meio do caminho e o texto encosta no topo. Dissolvê-lo devolve o alinhamento. */ .obras__tag > .elementor-widget-container { display: contents; } /* o widget de Texto herda o corpo definido pelo elemento pai. Com `:where` a regra fica sem peso: ela desfaz a tipografia do Elementor, mas perde para qualquer regra do projeto que mire a própria classe do widget — como `.card-quero__lista`, que define corpo e entrelinha. */ :where(.elementor-widget-text-editor) { font: inherit; color: inherit; } .texto p:last-child, .elementor-widget-text-editor p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 3. Imagens -------------------------------------------------------------------------- */ .elementor-widget-image .elementor-widget-container, .elementor-widget-image figure, .elementor-widget-image a { display: block; line-height: 0; } .elementor-widget-image img { display: block; } /* Nas cenas posicionadas o CSS do projeto dimensiona o WIDGET; a imagem de dentro precisa acompanhar. Onde o projeto define só a largura, a altura continua vindo da proporção da imagem. */ .hero__planta img, .hero__equipe img, .hero__casa img, .possibilidades__img img, .entrada__logo img, .selos__marca img, .selos__marcas img { width: 100%; height: auto; } .camadas__img img, .feito__img img { width: 100%; height: 100%; object-fit: contain; } /* Na cena do hero as posições estão em `.hero__cena img`, e no Elementor a imagem fica dentro de um widget. Quem passa a ser posicionado é o widget; a imagem volta para o fluxo dentro dele. */ .hero__cena > .elementor-element { position: absolute; } .hero__cena img { position: static; } .pronto__foto img { width: 100%; height: 100%; object-fit: cover; object-position: right bottom; } /* Na splash a foto escala pela altura e mantém a proporção — a largura do widget acompanha a imagem, como o `width: auto` do preview. */ .entrada__foto > .elementor-widget-container, .entrada__foto figure { height: 100%; } .entrada__foto img { width: auto; max-width: none; height: 100%; object-fit: contain; object-position: center bottom; } /* No empilhado a foto volta para o fluxo e ocupa a largura toda; sem isto o

do widget deixava a imagem encostada à esquerda. */ @media (max-width: 1024px) { .entrada__foto > .elementor-widget-container, .entrada__foto figure { height: 100%; display: flex; justify-content: center; align-items: flex-end; } .entrada__foto img { margin-inline: auto; } } .obras__item img { width: 100%; height: 100%; object-fit: cover; } /* só no desktop: a partir do tablet a maquete volta para o fluxo e a altura passa a vir da própria imagem (é o que o CSS do projeto faz) */ @media (min-width: 1025px) { .rodape__casa img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; } } /* a seta do canto dos cards "Quero..." vira um container vazio no Elementor: o desenho continua vindo do CSS do projeto e a seta entra como fundo */ .e-con.card-quero__acao::after { content: ''; width: 15px; height: 15px; background: url(../assets/icons/icon-arrow-branca-direita.svg) no-repeat center / 15px 15px; } .card-quero:hover .card-quero__acao::after { background-image: url(../assets/icons/icon-arrow-branca-direita.svg); } /* -------------------------------------------------------------------------- 4. Botões A classe .btn vai no WIDGET. O quadrado com a seta é desenhado em ::after, com a seta como imagem de fundo — assim não depende de biblioteca de ícones. -------------------------------------------------------------------------- */ /* A classe .btn cai no WIDGET, e o CSS do projeto desenha o botão inteiro nela. Como quem vira o botão de verdade é o interno, a caixa do widget é zerada aqui — senão fundo, altura e recuos apareceriam duas vezes. O raio fica, porque a borda em degradê é um ::before do widget. */ .elementor-widget.btn, .elementor-widget.btn-mini { display: inline-flex; height: auto; min-height: 0; padding: 0; gap: 0; border: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* dentro de uma coluna, o widget esticaria de ponta a ponta; o botão do projeto acompanha o próprio conteúdo */ .e-con[class*="__col-txt"] > .elementor-widget.btn, .e-con.hero__texto > .elementor-widget.btn, .e-con.entrada__conteudo > .elementor-widget.btn { align-self: flex-start; } /* o "Saiba mais" acompanha o texto; a largura fica com o interno */ .elementor-widget.btn-mini { width: auto; } /* O widget é inline-flex; sem isto o invólucro interno encolhe para o tamanho do texto e o botão fica mais estreito que a largura definida para o widget — era o que deixava o CTA do rodapé menor do que o ajuste feito no builder. */ .elementor-widget.btn > .elementor-widget-container, .elementor-widget.btn-mini > .elementor-widget-container { flex: 1 1 auto; width: 100%; } .btn .elementor-button-wrapper { display: block; width: 100%; } .btn .elementor-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 40px; padding: 0 6px 0 14px; border: 0; border-radius: var(--raio-btn); background: var(--azul); color: var(--branco); font: 600 var(--t-corpo)/1 var(--fonte); text-transform: uppercase; white-space: nowrap; transition: background var(--transicao), color var(--transicao); } .btn .elementor-button-content-wrapper { display: contents; } .btn .elementor-button-text { flex: 0 1 auto; min-width: 0; } .btn .elementor-button::after { content: ''; flex: none; width: 30px; height: 30px; border-radius: var(--raio-btn); background: var(--branco) url(../assets/icons/icon-arrow-azul-direita.svg) no-repeat center / 15px 15px; transition: background-color var(--transicao); } .btn .elementor-button:hover { background: var(--branco); color: var(--azul); } .btn .elementor-button:hover::after { background-color: var(--azul); background-image: url(../assets/icons/icon-arrow-branca-direita.svg); } /* Recuos e espaçamento que o projeto ajusta por contexto. No preview eles caem direto no ; aqui a classe está no widget, então precisam ser repassados ao de dentro, senão a caixa do botão fica com outra medida. */ .faixa-cta .btn .elementor-button { gap: 8px; padding: 0 7px 0 11px; letter-spacing: -.028em; } .obras__col-txt .btn .elementor-button { padding: 0 5px 0 11px; } /* na splash o CTA escala com a tela; o herda o corpo do widget */ .entrada__cta .elementor-button { font-size: inherit; } .menu .btn--vidro .elementor-button { padding: 0 5px 0 15px; } /* CTA de vidro (menu): o quadrado permanece azul nos dois estados */ .btn--vidro .elementor-button { border-radius: var(--raio); background: var(--vidro-azul); backdrop-filter: var(--vidro); -webkit-backdrop-filter: var(--vidro); } .btn--vidro .elementor-button::after, .btn--vidro .elementor-button:hover::after { background-color: var(--azul); background-image: url(../assets/icons/icon-arrow-branca-direita.svg); } .btn--vidro .elementor-button:hover { background: var(--branco); color: var(--azul); } /* CTA claro do rodapé: fundo branco, texto azul, quadrado azul */ .btn--claro .elementor-button { background: var(--branco); color: var(--azul); } .btn--claro .elementor-button::after { background-color: var(--azul); background-image: url(../assets/icons/icon-arrow-branca-direita.svg); } .btn--claro .elementor-button:hover { background: var(--azul-escuro); color: var(--branco); } .btn--claro .elementor-button:hover::after { background-color: var(--branco); background-image: url(../assets/icons/icon-arrow-azul-escura-direita.svg); } /* larguras fixas de cada CTA, medidas no Figma */ .menu .btn--vidro .elementor-button { padding: 0 5px 0 15px; } .obras__col-txt .btn .elementor-button { padding: 0 5px 0 11px; } /* na splash o CTA escala com a tela; o herda o corpo do widget */ .entrada__cta .elementor-button { font-size: inherit; } .pronto__cta .elementor-button { padding: 0 5px 0 14px; } .rodape__cta .elementor-button { padding: 0 5px 0 11px; } .entrada__cta .elementor-button { padding: 0 5px 0 14px; } /* CTA "Saiba mais" dos cards de solução */ .btn-mini .elementor-button { display: inline-flex; align-items: center; justify-content: space-between; width: 117px; height: 26px; padding: 0 4px 0 13px; border: 0; border-radius: var(--raio-mini); background: var(--vidro-azul); backdrop-filter: var(--vidro); color: var(--branco); font: 600 var(--t-peq)/1 var(--fonte); text-transform: uppercase; } .btn-mini .elementor-button::after { content: ''; flex: none; width: 10px; height: 10px; background: url(../assets/icons/icon-arrow-branca-direita.svg) no-repeat center / 10px 10px; } .btn-mini .elementor-button:hover { background: var(--branco); color: var(--azul); } .btn-mini .elementor-button:hover::after { background-image: url(../assets/icons/icon-arrow-azul-escura-direita.svg); } /* variante sólida do "Saiba mais", usada nos cards de matéria — mesmos valores da regra .btn-mini--solido do CSS do projeto */ .btn-mini--solido .elementor-button { width: auto; height: 22px; gap: 6px; padding: 0 8px; justify-content: flex-start; background: var(--azul); font-size: var(--t-micro); } .btn-mini--solido .elementor-button::after { width: 9px; height: 9px; border-radius: 0; background: url(../assets/icons/icon-arrow-branca-direita.svg) no-repeat center / 9px 9px; } .btn-mini--solido .elementor-button:hover { background: var(--azul); color: var(--branco); } .btn-mini--solido .elementor-button:hover::after { background-image: url(../assets/icons/icon-arrow-branca-direita.svg); } /* -------------------------------------------------------------------------- 5. Botão do menu (widget de HTML) O botão vem dentro de um widget, e é o widget que é o item flex do menu. Dissolvendo o invólucro, o `margin-left: auto` do botão volta a empurrá-lo para a direita da barra — sem isto ele fica no meio. -------------------------------------------------------------------------- */ .menu__toggle-bloco, .menu__toggle-bloco > .elementor-widget-container { display: contents; } /* -------------------------------------------------------------------------- 5.1 Cena da página de entrada (as duas faixas em degradê) As faixas moram num SVG dentro de um widget de HTML. O Elementor dá `position: relative` a todo widget, e o invólucro fica com altura zero — então a cena, que é absoluta com `height: 100%`, media 100% de zero e sumia da tela. Dissolvendo o invólucro, a cena volta a se medir pelo palco, como no preview. O `:has` alcança o widget mesmo sem classe nossa, então isto vale para a página já importada, sem precisar reimportar. A classe `entrada__cena-bloco` fica como caminho alternativo. -------------------------------------------------------------------------- */ .entrada__cena-bloco, .entrada__cena-bloco > .elementor-widget-container, .entrada__palco .elementor-widget:has(> .entrada__cena), .entrada__palco .elementor-widget:has(> .elementor-widget-container > .entrada__cena), .entrada__palco .elementor-widget:has(> .elementor-widget-container > .entrada__cena) > .elementor-widget-container { display: contents; } /* -------------------------------------------------------------------------- 6. Editor Dentro do editor o Elementor adiciona molduras e áreas de arrastar que atrapalham as cenas posicionadas. Isso só vale no editor. -------------------------------------------------------------------------- */ .elementor-editor-active .hero__cena, .elementor-editor-active .camadas, .elementor-editor-active .pronto__grade { pointer-events: auto; } /* -------------------------------------------------------------------------- 7. Maquete do rodapé O widget de Imagem não faz com troca por dispositivo, então são duas imagens e a visibilidade fica com o CSS (no builder, o mesmo efeito sai de Avançado -> Responsivo -> Ocultar em ...). -------------------------------------------------------------------------- */ .rodape__casa--estreita { display: none; } @media (max-width: 767px) { .rodape__casa--larga { display: none; } .rodape__casa--estreita { display: block; } /* No preview o botão é um só, e as regras de mobile do projeto pegam direto nele. Aqui a classe .btn está no WIDGET e o desenho está no de dentro, então este bloco repete no o que o projeto faz no mobile. */ .btn .elementor-button { height: 40px; gap: 8px; padding: 0 4px 0 12px; font-size: var(--t-peq); letter-spacing: -.01em; } .btn .elementor-button::after { width: 26px; height: 26px; background-size: 13px 13px; } /* Único CTA que não cabe em uma linha a 375px. No preview ele quebra num
; o widget de Botão não aceita marcação no rótulo, então a quebra vem do limite de largura — o mesmo ponto do texto, entre "possibilidades" e "do Monopainel®". */ .faixa-cta .elementor-widget.btn { max-width: 236px; } .faixa-cta .btn .elementor-button { height: auto; min-height: 40px; padding-block: 7px; line-height: 1.25; white-space: normal; text-align: left; } } /* -------------------------------------------------------------------------- 8. Largura e recuos do container O `display`, a direção e o `flex` de cada container vêm do próprio CSS do projeto: o gerador acrescenta a variável equivalente junto de cada regra, inclusive dentro das media queries. Aqui ficam só os dois padrões do Elementor que precisam sair de cena. -------------------------------------------------------------------------- */ .elementor-page .e-con { --content-width: 100%; /* o padrão de 1140px limitava as faixas */ --padding-block-start: 0px; --padding-block-end: 0px; --padding-inline-start: 0px; --padding-inline-end: 0px; } /* -------------------------------------------------------------------------- 10. Ícones que mudam de cor no hover No preview os ícones dos cards "Quero..." são SVG embutido com `fill: currentColor`, então o hover só troca a cor herdada. Como widget de Imagem eles viram com o branco gravado dentro do arquivo, e `color` não os alcança. O filtro abaixo leva branco puro exatamente a #0095FF — conferido em canvas, erro zero. -------------------------------------------------------------------------- */ .card-quero:hover .card-quero__icone img { filter: brightness(0) saturate(100%) invert(43.4%) sepia(90.6%) saturate(1909%) hue-rotate(181deg) brightness(95.7%) contrast(114.8%); } /* sem transição: interpolar uma cadeia de filtros passa por cores intermediárias — o ícone piscava verde antes de chegar ao azul */ /* -------------------------------------------------------------------------- 11. Blocos que o Figma deixa vazios para receber imagem depois A faixa escura dos cards de aplicação e os blocos da galeria de obras são containers no template. Ao arrastar um widget de Imagem para dentro deles, a imagem preenche o bloco sem alterar o enquadramento. -------------------------------------------------------------------------- */ .card-app__topo { overflow: hidden; } .card-app__topo img, .obras__item img, .post__destaque img { width: 100%; height: 100%; object-fit: cover; } .card-app__topo .elementor-widget-image, .card-app__topo .elementor-widget-container, .card-app__topo figure, .obras__item .elementor-widget-image, .obras__item .elementor-widget-container, .obras__item figure { width: 100%; height: 100%; } /* -------------------------------------------------------------------------- 12. Faixa diagonal do CTA final No preview o SVG é filho direto da seção; como widget de HTML ele ganha um container em volta, e a altura de 100% passa a valer sobre esse container. Quem recebe o posicionamento aqui é o widget. -------------------------------------------------------------------------- */ .elementor-widget.pronto__diagonal-widget { position: absolute; left: calc(50% - 205px); top: 0; width: 402px; height: 100%; z-index: 0; } .elementor-widget.pronto__diagonal-widget .elementor-widget-container, .elementor-widget.pronto__diagonal-widget .pronto__diagonal { position: static; width: 100%; height: 100%; } /* No mobile a faixa desce para o fim da seção, atrás da foto — o mesmo que o CSS do projeto faz com o SVG no preview. */ @media (max-width: 1024px) { .elementor-widget.pronto__diagonal-widget { left: 50%; top: auto; bottom: 0; width: 320px; height: 320px; transform: translateX(-50%); } } /* -------------------------------------------------------------------------- 13. Menu colapsado `.elementor-widget.btn { display: inline-flex }` zera a caixa do widget e, com isso, vencia o `display: none` do menu fechado. Restabelecido aqui. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .menu .elementor-widget.btn { display: none; } .menu.aberto .elementor-widget.btn { display: inline-flex; } } /* -------------------------------------------------------------------------- 14. Estados que o card inteiro passa para o CTA No preview o card é um e o hover chega ao botão por herança de seletor. Como widget, o desenho do botão está no interno — os estados precisam alcançá-lo. -------------------------------------------------------------------------- */ .card-solucao:hover .btn-mini .elementor-button { background: var(--branco); color: var(--azul); } .card-solucao:hover .btn-mini .elementor-button::after { background-color: transparent; background-image: url(../assets/icons/icon-arrow-azul-escura-direita.svg); } .card-solucao:hover .btn-mini::before { opacity: 0; } .card-materia:hover .btn-mini--solido .elementor-button { background: var(--azul); color: var(--branco); } /* -------------------------------------------------------------------------- 15. Animação de entrada Mesmo comportamento do preview: a seção entra deslocada e o JavaScript acrescenta `.visivel` quando ela aparece na tela. No builder o efeito fica desligado, para não atrapalhar a edição. -------------------------------------------------------------------------- */ .elementor-editor-active .revelar { opacity: 1; transform: none; }