/* ==========================================================================
Al teu Ventre — fundações da identidade
==========================================================================
Fonte de verdade VERSIONADA da marca: fontes, paleta e tipografia base.
Rebranding entregue pela designer em 2026-08-11 (manual em _brand/manual/).
Regras deste ficheiro:
· Nenhuma cor aparece fora de um token --av-*. Quem precisar de uma cor
consome o token, nunca o hex.
· A ponte para o Porto (secção 4) cobre APENAS tipografia. As cores entram
pelas Theme Options do Porto, e há uma razão técnica: o Porto calcula em
PHP mais de vinte tons derivados (--porto-primary-dark-5, -10, -15, …)
a partir das cores das opções. Sobrepor aqui só a cor-base deixaria os
derivados calculados a partir do azul de fábrica — hovers e sombras
errados de forma subtil. A configuração das opções está exportada em
docs/porto-theme-options.json.
========================================================================== */
/* --------------------------------------------------------------------------
1. Fontes — @font-face
--------------------------------------------------------------------------
WOFF2 gerados a partir dos originais em _brand/fonts/ (fora do webroot).
Licença: uso web confirmado pelo cliente em 2026-08-11 — ver LICENSING.md.
ATENÇÃO ao peso 300 da Modulus: o ficheiro original NÃO TEM os glifos
¿ (U+00BF) nem ¡ (U+00A1). Um título castelhano em peso 300 que comece por
"¡" renderiza esse carácter na fonte de fallback — visível e feio. Os pesos
400 e 700 estão completos. Não usar o 300 em copy castelhana com pontuação
invertida; se vier a ser preciso, pedir o ficheiro corrigido à foundry.
-------------------------------------------------------------------------- */
@font-face {
font-family: "Modulus";
src: url("../fonts/modulus-300.woff2") format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Modulus";
src: url("../fonts/modulus-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Modulus";
src: url("../fonts/modulus-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Elm Sans é variável (wght 100–900): um ficheiro cobre todos os pesos. */
@font-face {
font-family: "Elms Sans";
src: url("../fonts/elmsans-var.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Elms Sans";
src: url("../fonts/elmsans-var-italic.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
/* --------------------------------------------------------------------------
2. Tokens da marca
-------------------------------------------------------------------------- */
:root {
/* Paleta — nomes do manual de marca */
--av-verde-oliva: #98b75c; /* cor-âncora: acentos, destaques, grafismo */
--av-verde-floresta: #086842; /* verde principal: títulos, botões primários */
--av-verde-escuro: #0a3c23; /* estabilidade: texto escuro, hover */
--av-azul-kawaii: #7e9ee8; /* delicadeza: detalhes, links secundários */
--av-branco-linho: #f5eee6; /* fundo neutro cremoso */
--av-branco: #ffffff;
/* Papéis semânticos — o site consome estes, não os de cima, para a
intenção sobreviver a um ajuste de paleta */
--av-color-primary: var(--av-verde-floresta);
--av-color-primary-hover: var(--av-verde-escuro);
--av-color-accent: var(--av-verde-oliva);
--av-color-detail: var(--av-azul-kawaii);
--av-color-bg-soft: var(--av-branco-linho);
--av-color-bg: var(--av-branco);
--av-color-heading: var(--av-verde-floresta);
--av-color-text-strong: var(--av-verde-escuro);
/* Tipografia.
Fallback da Modulus: geométricas arredondadas de sistema — ui-rounded
é SF Rounded em Apple; as restantes cobrem Windows/Android sem carregar
nada de terceiros.
Fallback da Elm Sans: sans neutra de sistema. */
--av-font-display: "Modulus", ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
--av-font-text: "Elms Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
/* --------------------------------------------------------------------------
3. Tagline
--------------------------------------------------------------------------
"On comença tot" — em catalão por decisão de marca, em TODOS os idiomas.
Não traduzir. Quem a renderizar deve usá-la literalmente.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
4. Ponte Porto — SÓ tipografia (ver cabeçalho para o porquê)
--------------------------------------------------------------------------
O CSS gerado do Porto consome --porto-body-ff e --porto-alt-ff. Este bloco
carrega DEPOIS do theme_css_vars.css (prioridade 1001 > 1000), portanto em
igualdade de especificidade (:root) ganha a declaração posterior.
-------------------------------------------------------------------------- */
:root {
--porto-body-ff: var(--av-font-text);
--porto-alt-ff: var(--av-font-display);
/* Cores cujo valor está HARDCODADO no gerador do Porto
(config_css_vars.php:196-202) — não existe Theme Option para elas,
portanto a única via limpa é sobrepor a variável. Seguras de sobrepor:
são consumidas directamente pelo CSS, sem tons derivados em PHP.
O heading-light-8 é a excepção (lighten(heading, 8%) calculado em PHP)
e leva o valor pré-calculado do Verde Floresta +8%. */
--porto-heading-color: var(--av-color-heading);
--porto-heading-light-8: #0b8e5a; /* lighten(--av-verde-floresta, 8%) */
--porto-color-price: var(--av-color-text-strong);
}
/* --------------------------------------------------------------------------
Regras de contraste da paleta (auditoria WCAG de 2026-08-11)
--------------------------------------------------------------------------
Medido com a fórmula WCAG. Pares aprovados e proibidos:
PODEM levar texto:
Verde Escuro s/ branco 12,5:1 · s/ linho 10,8:1 (corpo)
Verde Floresta s/ branco 6,8:1 · s/ linho 6,0:1 (títulos, links)
Branco s/ Verde Floresta 6,8:1 · s/ Verde Escuro 12,5:1 (botões)
Verde Escuro s/ Verde Oliva 5,5:1 (badge "hot")
Verde Escuro s/ Azul Kawaii 4,7:1 (badge "sale")
NÃO podem levar texto (falham AA, alguns até AA-large 3:1):
Azul Kawaii como texto s/ claro (2,6:1) — nem em texto grande
Verde Oliva como texto s/ claro (2,3:1)
Branco s/ Azul Kawaii (2,6:1) · Branco s/ Verde Oliva (2,3:1)
Consequência de marca: "links secundários em Azul Kawaii" (brief) não é
cumprível como COR DE TEXTO em fundo claro. O azul entra como detalhe
não-textual: linhas, fundos de chip com texto Verde Escuro, hovers
decorativos, ícones grandes. Oliva idem: grafismo e fundos, nunca texto.
========================================================================== */
/* --------------------------------------------------------------------------
5. Tipografia base
--------------------------------------------------------------------------
Headings e botões em Modulus; corpo em Elm Sans. Selectores de elemento,
sem !important: este ficheiro entra na cascata depois das folhas do Porto,
e é suposto qualquer regra mais específica de um template poder afinar.
-------------------------------------------------------------------------- */
body {
font-family: var(--av-font-text);
}
/* --------------------------------------------------------------------------
6. Logos — ajustes que as opções do Porto não cobrem
--------------------------------------------------------------------------
O Porto só tem UMA imagem de logo para todos os breakpoints (mais a sticky).
A 110px de largura, o lockup horizontal completo (ícone + wordmark +
tagline) fica ilegível, por isso em ecrãs pequenos troca-se para o wordmark
simples via content:url() — suportado em ![]()
por todos os browsers
actuais; onde não for, fica o horizontal (degradação inofensiva).
PROVISÓRIO: quando a designer entregar o header definitivo (e a variante
horizontal sem tagline, já pedida), isto é revisto.
-------------------------------------------------------------------------- */
@media (max-width: 991px) {
#header .logo img.standard-logo {
content: url("../img/logo-wordmark.svg");
}
}
/* Rodapé: o logo entra pelo footer-bottom nativo do Porto (opção footer-logo),
que não tem controlo de largura próprio. 220px conforme aprovado. */
.footer-bottom .logo img {
max-width: 220px;
height: auto;
}
/* --------------------------------------------------------------------------
7. Excepções da auditoria de cores (2026-08-11)
--------------------------------------------------------------------------
O preço na pesquisa ao vivo tem #222529 hardcodado no style.php do Porto
(sem opção). Visível ao utilizador → mapeado aqui por token.
Excepções DELIBERADAS que ficam com as cores do Porto:
· .text-dark — utilitário genérico cujo contrato é "quase-preto";
pintá-lo de verde trairia o nome em conteúdo futuro do WPBakery.
· .page-header-8 — layout de breadcrumbs que não usamos.
-------------------------------------------------------------------------- */
.live-search-list .autocomplete-suggestion .search-price {
color: var(--av-color-text-strong);
}
/* ==========================================================================
8. Utilitários de marca — linhas decorativas e pictogramas
==========================================================================
Pensados para serem usados SEM CÓDIGO: no WPBakery, editar o elemento →
campo "Extra class name" → colar o nome da classe. Guia visual completo
com exemplos em docs/guia-marca.html.
São imagens de FUNDO de propósito: conteúdo decorativo que os leitores de
ecrã devem ignorar — um background-image nunca é anunciado, um ![]()
exigiria alt="" que um editor pode esquecer.
Pictogramas (manual, p.11): cochecito = carrinho de passeio · seguridad =
segurança rodoviária · atencion = atendimento personalizado · bebe =
acessórios de bebé · lista = listas de nascimento.
========================================================================== */
/* --- Linhas decorativas ---------------------------------------------------
A verde é horizontal (separador de secções); a azul é um traço ascendente
(acento lateral, como no mockup do hero). Altura por omissão pensada para
separadores; .av-linea--grande para zonas hero. */
.av-linea-verde,
.av-linea-azul {
display: block;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 90px;
}
.av-linea-verde { background-image: url("../img/linea-verde.svg"); }
.av-linea-azul { background-image: url("../img/linea-azul.svg"); }
.av-linea--grande { height: 180px; }
/* --- Pictogramas ----------------------------------------------------------
Quadrados, 64px por omissão. Modificadores: --sm 40px, --lg 96px.
Alinham à linha de base do texto quando usados dentro de parágrafos. */
.av-picto-cochecito,
.av-picto-seguridad,
.av-picto-atencion,
.av-picto-bebe,
.av-picto-lista {
display: inline-block;
width: 64px;
height: 64px;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
}
.av-picto-cochecito { background-image: url("../img/picto-cochecito.svg"); }
.av-picto-seguridad { background-image: url("../img/picto-seguridad.svg"); }
.av-picto-atencion { background-image: url("../img/picto-atencion.svg"); }
.av-picto-bebe { background-image: url("../img/picto-bebe.svg"); }
.av-picto-lista { background-image: url("../img/picto-lista.svg"); }
.av-picto--sm { width: 40px; height: 40px; }
.av-picto--lg { width: 96px; height: 96px; }
/* Fundo Branco Linho para secções, pronto para o layout da homepage. */
.av-fondo-lino { background-color: var(--av-color-bg-soft); }
h1, h2, h3, h4, h5, h6,
.btn,
button,
input[type="submit"],
input[type="button"],
.woocommerce a.button,
.woocommerce button.button {
font-family: var(--av-font-display);
}