/* ========================================================================= site.css — o portal. Depende do base.css (que é o mesmo ficheiro dos outros dois projetos: mesma paleta, mesma letra, mesmos botões). Se mexeres no base.css de um projeto, copia-o para os outros — é o preço de não haver um pacote partilhado, e é deliberado: nenhum destes sites tem passo de build. ========================================================================= */ body.site{background:var(--bg);} /* ---------- cabeçalho ---------- */ /* ========================================================================== CABEÇALHO E RODAPÉ — TRANSVERSAIS AOS TRÊS SITES Este bloco é IGUAL no Portal, nas Candidaturas e no Descontos (lá vive no private/moldura.php, porque esse site não carrega CSS externo). Se mexeres aqui, mexe nos três — é a mesma regra do base.css. O conceito manda no desenho: o MundoÚtil é uma porta de entrada para várias valências, e cada valência é um site à parte. O que diz que são a mesma casa é a moldura: a mesma barra de marca em cima (o logo e a seta de voltar) e o mesmo rodapé em baixo, com a mesma informação transversal. O que muda de site para site é só o miolo. Antes disto, os três tinham três rodapés diferentes: o portal em quatro colunas, as Candidaturas em quatro mas com outras (Ferramenta/MundoÚtil, sem contacto), e o Descontos uma linha centrada com a legenda das etiquetas pelo meio. Quem passava de um para o outro não via a mesma casa. ========================================================================== */ /* ---------- A MEDIDA DA CASA ---------- Uma só largura para os três sites: 1400px de teto, 98% do ecrã, e um recuo fixo de 16px no telemóvel (1% de 390px são 4px, e a essa distância o texto encosta ao vidro). É a medida que o miolo do Descontos e a app das Candidaturas já usavam, e é ela que faz a barra de marca, o conteúdo e o rodapé começarem e acabarem na MESMA VERTICAL em qualquer página dos três sites. A moldura esteve nos 1080: ao passar do portal para um tema, o conteúdo saltava 107px para fora da moldura que o devia enquadrar — o detalhe que mais desmentia a ideia de ser tudo a mesma casa. */ .site-top,.fundo-cols{max-width:1400px;width:98%;margin-left:auto;margin-right:auto;} @media (max-width:700px){ .site-top,.fundo-cols{width:auto;margin-left:16px;margin-right:16px;} } /* ---------- os valores da moldura são DELA ---------- `--m-*` e não os tokens da página: as páginas do Descontos declaram conjuntos de tokens diferentes uns dos outros (a de categoria não tem `--fs-small`, a 404 não tem token nenhum) e um `var()` sem valor faz a declaração inteira ser ignorada — era por isso que ali a moldura saía com a letra do browser (Times New Roman) e sem tamanhos. Assim a moldura é a mesma em qualquer página, em qualquer dos três sites, e não depende do que a página trouxer. */ .site-top,.site-fundo{ --m-ink:#111;--m-ink-2:#555;--m-ink-3:#6b6b6b;--m-line:#e8e8e8;--m-alt:#fafafa; --m-small:12px;--m-tiny:11px; font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5; } /* ---------- barra de marca (topo) ---------- */ .site-top{padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;} /* ---------- a marca é o LOGO ---------- O logo do MundoÚtil — globo mais palavra, num ficheiro só: `public/icons/logo-mundoutil.svg`. Substituiu o risco de 4px em degradê e o texto " · MundoÚtil": a barra de marca passa a ser **a mesma** nos três sites, e quem chega vê a casa antes do tema. O logo é SEMPRE o ficheiro. Não há versão desenhada em CSS nem reconstruída a partir de peças — enquanto o ficheiro não existir sai o nome em texto (ver o `marca_logo()` no PHP), que é honesto, e não um logo parecido, que não é. A REGRA DO LOGO: à volta dele fica sempre livre metade do diâmetro do globo. O globo é tão alto como o logo (`--marca-h`), logo são `--marca-h / 2` — 14px nos 28px de agora. Não está num `padding` porque já vem de três sítios, e é isso que mantém o logo alinhado com o conteúdo em vez de recuado: em cima e em baixo, dos 18px da barra; à esquerda, da goteira da página (14px a 1400px, 16px em telemóvel); à direita, da margem aqui em baixo. **Ao mexer nesses números, confirmar que nenhum desce de `--marca-h/2`.** O nome vai em TEXTO e não dentro da imagem: fica na letra da casa, escala com a página, é selecionável e um leitor de ecrã lê-o (por isso o globo leva `alt=""` — o nome está ao lado, e repetido seria lido duas vezes). */ .marca{--marca-h:28px;display:inline-flex;align-items:center; text-decoration:none;border:none;margin-right:calc(var(--marca-h) / 2);} /* A altura manda, a largura vem do ficheiro: o logo é um bloco só (globo mais palavra) e a proporção é dele. */ .marca-logo{height:var(--marca-h);width:auto;display:block;} /* O nome em texto é o que aparece ENQUANTO o ficheiro do logo não existir (ver o marca_logo() no PHP). Não é o logo nem tenta parecer-se com ele — é o nome da casa, na letra da casa. */ .marca-nome{font-size:calc(var(--marca-h) * 0.60);font-weight:800;letter-spacing:-.02em; color:var(--m-ink);line-height:1;white-space:nowrap;} /* ---------- A SETA DE VOLTAR ---------- A classe é `voltar-atras` e não `voltar`: essa já existe no Descontos, no `public/confirmar.php`, e é um LINK ("Voltar ao site") com estilo próprio. Hoje não colidem — essa página não carrega a moldura — mas no dia em que carregasse, o link saía vestido de botão. Parte da moldura, e por isso este bloco existe nas MESMAS QUATRO CÓPIAS que o resto dela — mexer numa, mexer nas quatro. É um `