/* ============================================================================ DESIGN SYSTEM JUSELDER · CAMADA ELEMENTOR — ds-elementor.css ---------------------------------------------------------------------------- Divisão de trabalho: · ds-elementor-gerado.css — GERADO por reescopo.py a partir do ds.css e do site.css. Reescreve mecanicamente as regras do DS para a árvore do Elementor: sobe `.e-con` nas classes que caem em container, sobe `.elementor-widget` nas que caem no wrapper do widget, e reaponta o que mirava o elemento interno (botões, títulos animados). Carrega PRIMEIRO. · ds-elementor.css (este) — escrito à mão, só para o que o gerador não tem como saber: a estrutura que o Elementor inventa (wrapper do botão, corpo do Counter, itens do Icon List, campos do Form) e as armadilhas de especificidade da folha do próprio Elementor. Carrega DEPOIS. Regra do pipeline: o ds.css NUNCA é editado — é o artefato entregue ao cliente e comparado entre projetos. Alvo: Elementor 4.2 com e_optimized_markup (sem .elementor-widget-container). Por isso todos os seletores usam descendente, nunca filho: assim funcionam com o experimento ligado ou desligado. ========================================================================== */ /* ══ 1 · BASE ══════════════════════════════════════════════════════════════ */ /* O Elementor 4 dá a TODO container padding padrão de 10px por lado e gap de 20px (--container-default-padding-* e --widgets-spacing). No pipeline Nauweb o espaçamento é 100% do Design System — os defaults do site-settings já zeram os dois; estas linhas são o cinto de segurança caso o import não os aplique. */ .e-con { --container-default-padding-top: 0px; --container-default-padding-right: 0px; --container-default-padding-bottom: 0px; --container-default-padding-left: 0px; --widgets-spacing: 0px 0px; --widgets-spacing-row: 0px; --widgets-spacing-column: 0px; } /* Contêiner de componente não tem gap próprio: o espaçamento do DS vem das margens de cada elemento, como no site estático. */ .e-con[class*="jsld-"], .e-con[class*="post-card"], .e-con[class*="area-"], .e-con[class*="team-card"], .e-con[class*="quote-card"], .e-con[class*="ph"], .e-con[class*="ed-"], .e-con[class*="contact-"], .e-con[class*="strip"], .e-con[class*="footer-"], .e-con[class*="founder-"], .e-con[class*="page-hero"] { --gap: 0; } /* Nada de resetar título ou parágrafo aqui. O frontend do Elementor já traz `.elementor-heading-title{margin:0;line-height:1}` (0,1,0) — e a resposta a isso é do GERADOR: ele re-emite as regras de tag do ds.css/site.css como `h2.elementor-heading-title`, devolvendo margem e entrelinha aos títulos. A margem do texto corrido fica no

interno, presa dentro do wrapper — a coluna soma a MESMA altura do fluxo estático. */ /* O reset `line-height:1` do título quebra a HERANÇA nos títulos que são

//

(rótulos, eyebrows, linhas de índice) — eles não têm regra de tag com entrelinha no DS, viviam de herdar. Religa só neles; h1..h6 seguem com a escala do próprio DS. */ p.elementor-heading-title, span.elementor-heading-title, blockquote.elementor-heading-title, strong.elementor-heading-title { line-height: inherit; } .elementor-widget-icon .elementor-icon-wrapper, .elementor-widget-icon .elementor-icon { display: block; line-height: 0; } .elementor-widget-icon .elementor-icon svg { width: 1em; height: 1em; } /* Container com Link: o Elementor sobrepõe um absoluto ocupando a caixa. */ .e-con > a.elementor-element-overlay, .e-con > .e-con-inner > a.elementor-element-overlay { position: absolute; inset: 0; z-index: 5; } /* ══ 2 · BOTÃO ═════════════════════════════════════════════════════════════ A classe .jsld-btn* cai no WRAPPER do widget, e o ds.css desenharia a caixa do botão nele. O gerado já reaponta o desenho para o ; aqui o wrapper volta a ser só um invólucro. */ .elementor-widget-button[class*="jsld-btn"] { padding: 0; border: 0; background: none; box-shadow: none; overflow: visible; isolation: auto; animation: none; width: auto; max-width: none; flex: 0 0 auto; align-self: flex-start; display: inline-flex; text-transform: none; letter-spacing: normal; } .elementor-widget-button[class*="jsld-btn"]::before, .elementor-widget-button[class*="jsld-btn"]::after { content: none; } .elementor-widget-button[class*="jsld-btn"]:hover { transform: none; } .elementor-widget-button[class*="jsld-btn"] .elementor-button { white-space: nowrap; } .elementor-button-wrapper { display: flex; } .elementor-button-icon svg { width: 16px; height: 16px; flex: none; } /* ══ 3 · ÍCONES ════════════════════════════════════════════════════════════ */ /* Marca institucional: é preenchida, não traçada, e ocupa a caixa inteira — a regra genérica do widget Icon (svg = 1em) é mais específica e precisa ser vencida aqui. */ .elementor-widget-icon.jsld-hero__symbol .elementor-icon svg, .elementor-widget-icon.page-hero__mark .elementor-icon svg, .elementor-widget-icon.jsld-bg__monogram .elementor-icon svg { width: 100%; height: auto; display: block; fill: var(--jsld-simbolo, #000); stroke: none; } .elementor-widget-icon.jsld-hero__symbol .elementor-icon, .elementor-widget-icon.page-hero__mark .elementor-icon, .elementor-widget-icon.jsld-hero__symbol .elementor-icon-wrapper, .elementor-widget-icon.page-hero__mark .elementor-icon-wrapper { width: 100%; } /* ══ 4 · CONTADOR (Counter) ════════════════════════════════════════════════ No HTML os números eram e os rótulos , e o ds.css mira essas tags. O Counter usa para o número — sem isto o rótulo pequeno vence. */ .e-con.jsld-hero__stat .elementor-counter-number, .e-con.jsld-hero__stat .elementor-counter-number-prefix, .e-con.jsld-hero__stat .elementor-counter-number-suffix { font-family: var(--jsld-font-display); font-weight: 700; font-size: 2rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: normal; text-transform: none; } .e-con.jsld-hero__stat .elementor-counter-title { font-family: var(--jsld-font-ui); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--jsld-sand-500); margin-top: .25rem; line-height: 1.4; } .elementor-counter-number-wrapper { display: flex; } /* ══ 5 · ICON LIST ═════════════════════════════════════════════════════════ Substitui
    e
      . */ .elementor-widget-icon-list .elementor-icon-list-items { padding: 0; margin: 0; list-style: none; } .elementor-widget-icon-list .elementor-icon-list-item { padding: 0; margin: 0; } .elementor-icon-list-icon svg { width: 1em; height: 1em; } .elementor-widget.jsld-check .elementor-icon-list-items { display: flex; flex-direction: column; gap: .55rem; } .jsld-check .elementor-icon-list-item { display: flex; align-items: flex-start; gap: 0; position: relative; padding-left: 1.5rem; font-size: .9rem; line-height: 1.5; } /* o quadradinho vazio do DS é desenhado, não é ícone — assim cada item da lista continua sendo só texto e o cliente edita sem mexer em ícone */ .jsld-check .elementor-icon-list-item::before { content: ""; position: absolute; left: 0; top: .25em; width: 14px; height: 14px; box-sizing: border-box; border: 1px solid var(--jsld-teal-700); background: var(--jsld-teal-050); } .elementor-widget.footer-list .elementor-icon-list-items { display: flex; flex-direction: column; gap: .55rem; font-size: .84rem; } .footer-list .elementor-icon-list-item { display: flex; gap: .6rem; align-items: baseline; line-height: 1.65; } .footer-list .elementor-icon-list-icon svg { width: 13px; height: 13px; flex: 0 0 auto; transform: translateY(2px); color: var(--jsld-sand-500); } /* selo da hero: ícone + texto na mesma linha, dentro de um Icon List de 1 item */ .elementor-widget-icon-list.jsld-hero__badge .elementor-icon-list-items { display: flex; } .elementor-widget-icon-list.jsld-hero__badge .elementor-icon-list-item { display: inline-flex; align-items: center; gap: .5rem; line-height: 1; } .elementor-widget-icon-list.jsld-hero__badge .elementor-icon-list-icon { line-height: 0; } .elementor-widget-icon-list.jsld-hero__badge .elementor-icon-list-icon svg { width: 16px; height: 16px; } /* ══ 6 · TÍTULOS ANIMADOS ══════════════════════════════════════════════════ */ /* O gradiente do precisa do text-fill transparente também dentro do heading do Elementor. */ .jsld-hero__title em { background: var(--jsld-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* margem do título pertencia ao

      ; no wrapper ela contaria duas vezes */ .elementor-widget.jsld-hero__title .elementor-heading-title { margin-bottom: 0; } .elementor-widget.jsld-hero__title { margin-bottom: var(--jsld-sp-5); } /* ══ 7 · DIVISOR DE FORMA ══════════════════════════════════════════════════ Vira campo nativo do container; só a altura precisa bater com o DS. */ .e-con .elementor-shape svg { height: 64px; } /* ══ 8 · TRILHA DE NAVEGAÇÃO ═══════════════════════════════════════════════ Cada item é um Heading; o link fica dentro do do título. */ .page-hero__crumb .elementor-widget { width: auto; flex: 0 0 auto; } .page-hero__crumb .elementor-heading-title a { color: inherit; } .page-hero__crumb .elementor-heading-title a:hover { color: var(--jsld-teal-700); } .page-hero--deep .page-hero__crumb .elementor-heading-title a:hover { color: #fff; } /* ══ 9 · TIRA DE ASSOCIAÇÕES ═══════════════════════════════════════════════ Os separadores "·" saem do CSS: o cliente acrescenta ou remove um Heading e a pontuação se acerta sozinha. */ .strip__row .elementor-widget { width: auto; flex: 0 0 auto; position: relative; } .strip__row .elementor-widget + .elementor-widget::before { content: "·"; position: absolute; left: -1.3rem; top: 50%; transform: translateY(-50%); color: var(--jsld-sand-500); } /* ══ 10 · FORMULÁRIO (Form do Pro) ═════════════════════════════════════════ O rótulo flutuante do DS é reconstruído com :has(), porque no markup do Elementor o