/* ============================================================================= cadiz-institutional-v1.css — Páginas institucionais (page.tpl) + Contato (contact.tpl). Título/tipografia/margens padronizados com a referência do checkout (max-width:1000px + margem automática, em vez dos 1300px/margem fixa de 70px usados na grade de produtos). Escopado por classe do que o próprio tema já define por template (ver layouts/layout.tpl, ) — nunca vaza pra outras páginas (confirmado: template-category, ou seja a grade de produtos, fica de fora). ============================================================================= */ /* ----------------------------------------------------------------------- 1. Título das páginas institucionais e do Contato ----------------------------------------------------------------------- */ /* Tenor Sans (mesma fonte do logo "CADIZ" do cabeçalho, .logo-text), 36px, negrito. O peso 700 é sintetizado pelo navegador (a fonte Tenor Sans só tem o peso regular disponível no Google Fonts), mas ainda assim fica visivelmente mais forte. */ body.template-page .page-header .h1-huge-md, body.template-contact .page-header .h1-huge-md { font-family: 'Tenor Sans', serif !important; font-size: 36px !important; font-weight: 700 !important; } /* Margem acima do título: a referência (grade de produtos, template- category) tem um breadcrumb "Início . Novidades" + padding-top:56px antes do H1. As institucionais não tinham nenhum breadcrumb ativo (ver fix em snipplets/breadcrumbs.tpl), só o padding-top nativo de 24px (classe .py-4) — por isso o título ficava bem mais colado no cabeçalho. O Contato já tinha breadcrumb nativo, só faltava o padding. Repete os mesmos 56px nos dois casos. */ body.template-page .page-header, body.template-contact .page-header { padding-top: 56px !important; } /* ----------------------------------------------------------------------- 2. Margens laterais (mesma referência do checkout: max-width:1000px + margem automática, centralizado de verdade em qualquer largura de tela — diferente do resto do site, que usa max-width:1300px com margem FIXA de 70px, o que descentraliza em telas muito largas). ----------------------------------------------------------------------- */ body.template-page .container, body.template-contact .container { max-width: 1000px !important; margin-left: auto !important; margin-right: auto !important; } /* ----------------------------------------------------------------------- 3. Conteúdo das institucionais (Sobre nós / Trocas e Devoluções / Privacidade e Segurança) — texto justificado, coluna cheia. ----------------------------------------------------------------------- */ /* O texto ficava numa coluna col-md-8 (66% de largura) deslocada à esquerda dentro do container, com um vão vazio à direita. Estica pra ocupar 100% do container (que já tem a margem de 1000px acima). */ body.template-page .user-content .col-md-8 { flex: 0 0 100% !important; max-width: 100% !important; } /* Texto justificado, alinhado à margem esquerda (padrão de leitura). */ body.template-page .user-content p, body.template-page .user-content li { text-align: justify !important; } /* Margem inferior (antes do rodapé) igual à margem superior (56px) — o .user-content nativo não tinha padding-bottom próprio nenhum. */ body.template-page .user-content { padding-bottom: 56px !important; } /* Números/bullets das listas (ol/li, ul/li) dentro do conteúdo: list-style-position:outside nativo + padding-left:0 fazia o marcador (número ou bullet) renderizar FORA da caixa da lista, à esquerda da margem do container (mesmo x do texto/breadcrumb) — reparado por Nina em "Trocas e Devoluções" e confirmado em todas as páginas com listas (inclusive listas aninhadas, como em "Privacidade e Segurança"). Adiciona padding-left pra abrir espaço pro marcador dentro da margem — texto fica levemente mais indentado que o marcador, marcador alinhado com a margem esquerda do container (mesma referência do resto do texto). */ body.template-page .user-content ol, body.template-page .user-content ul { padding-left: 20px !important; margin-left: 0 !important; } /* ----------------------------------------------------------------------- 4. Contato — formulário (Nome/E-mail/Telefone/Mensagem) ----------------------------------------------------------------------- */ /* Os campos não tinham NENHUM estilo do tema aplicado (borda cinza nativa do navegador, rgb(118,118,118), fundo branco) — por isso destoavam do padrão do resto do site. Mesmo tratamento underline-only usado no checkout e no CEP do popup do carrinho. */ .contact-page input.form-control, .contact-page textarea.form-control { border: none !important; border-bottom: 1px solid rgba(29, 29, 29, 0.25) !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; font-family: 'DM Sans', sans-serif !important; color: #1d1d1d !important; } .contact-page input.form-control:focus, .contact-page textarea.form-control:focus { outline: none !important; box-shadow: none !important; border-bottom-color: #1d1d1d !important; } /* Coluna do formulário (col-md-5) só ocupava 5/12 da linha, junto com a coluna de dados de contato (col-md-4) = 9/12 no total, sobrando 3/12 vazios à direita — por isso a margem direita parecia bem maior que a esquerda. Estica a coluna do formulário pra preencher o restante do espaço até a borda direita do container (mesma margem dos dois lados). */ body.template-contact .row > .col-md-5 { flex: 1 1 0 !important; max-width: none !important; } /* Botão "Enviar": fundo transparente, texto preto sublinhado (mesmo padrão do "Continuar para pagamento" no checkout), sem borda/caixa (era um botão preto sólido de largura total, .btn.btn-primary.btn- big.btn-block). */ .contact-page button.btn-primary { background: transparent !important; color: #1d1d1d !important; text-decoration: underline !important; border: none !important; border-radius: 0 !important; } /* ----------------------------------------------------------------------- 5. Contato — bloco de links (Whatsapp / Instagram / E-mail / Endereço) HTML novo em snipplets/cadiz/contact/contact-info.tpl. Reaproveita as MESMAS classes do link "Whatsapp"/"Email" do rodapé (.cadiz-contact-link/.cadiz-contact-icon, já com estilo base em cadiz.css), só recolorido pro tema claro desta página (rodapé é fundo escuro, aqui é bege claro) — por isso o escopo é ".contact-page", NUNCA "body.template-contact" sozinho: o rodapé (que usa as mesmas classes) também está dentro de body.template-contact na própria página de Contato, e uma regra escopada só pelo vazaria pro rodapé (erro cometido e corrigido durante os testes ao vivo). ----------------------------------------------------------------------- */ .contact-page .cadiz-contact-link, .contact-page .cadiz-contact-link span { color: rgba(29, 29, 29, 0.6) !important; text-decoration: none !important; } .contact-page .cadiz-contact-icon { color: #1d1d1d !important; fill: #1d1d1d !important; width: 14px !important; height: 14px !important; } /* Linha "+55 31 98573-9871" abaixo de "Whatsapp" (única com 2 linhas). */ .contact-page .cadiz-contact-sub, .contact-page .cadiz-contact-address { font-family: 'DM Sans', sans-serif !important; font-size: 12px !important; color: rgba(29, 29, 29, 0.6) !important; } .contact-page .cadiz-contact-sub { margin-top: 4px; margin-left: 20px; /* alinhado com o texto: ícone 14px + gap 6px */ } /* Palavras em destaque ("Whatsapp", "Follow us", "cadizoficial.com.br"): negrito + preto sólido, sempre (não só no hover). Precisou de especificidade extra (".cadiz-contact-link .cadiz-contact-bold") pra vencer a regra de cor cinza acima, que também mira "span" dentro do link e empatava/ganhava por especificidade mesmo com !important nos dois lados. */ .contact-page .cadiz-contact-link .cadiz-contact-bold, .contact-page .cadiz-contact-link span.cadiz-contact-bold { font-weight: 700 !important; color: #1d1d1d !important; } /* Hover: ícone + todo o texto (inclusive a parte não-negrito) ficam pretos sólidos. */ .contact-page .cadiz-contact-link:hover, .contact-page .cadiz-contact-link:hover span { color: #1d1d1d !important; } .contact-page .cadiz-contact-link:hover .cadiz-contact-icon { color: #1d1d1d !important; fill: #1d1d1d !important; } /* Espaçamento mínimo de 18px entre os itens da lista de contato. */ .contact-page .cadiz-contact-item { margin-bottom: 18px !important; } .contact-page ul.list.py-2 { padding-top: 0 !important; } /* ----------------------------------------------------------------------- 6. Contato — linha final: "Enviar" (esquerda) + reCAPTCHA (direita) O

é injetado em runtime pelo script do Nuvemshop/Google (não existe no HTML de origem do template) — por isso o agrupamento dos dois elementos num wrapper é feito via JS (static/cadiz/js/cadiz-contact-v1.js), não HTML estático. Este CSS só estiliza o wrapper depois que o JS o cria. ----------------------------------------------------------------------- */ #cadiz-contact-submit-row { display: flex !important; align-items: flex-start !important; /* Enviar alinhado com o TOPO do reCAPTCHA */ justify-content: space-between !important; /* Enviar na borda esquerda, reCAPTCHA na direita */ width: 100% !important; margin-top: 8px !important; /* próximo da linha do box de Mensagem */ } #cadiz-contact-submit-row button.btn-primary { order: 1; width: auto !important; flex: 0 0 auto !important; } #cadiz-contact-submit-row .g-recaptcha { order: 2; margin: 0 !important; }