# The Cookie Factory — Notas Técnicas

## Botão WhatsApp fixo no mobile

Usar `left: calc(100vw - 86px)` em vez de `right: 28px`.  
`100vw` é sempre a largura exata do viewport. `right` pode ser calculado a partir do documento quando há overflow, jogando o botão para fora do ecrã.

Forçar camada GPU própria para evitar artefactos ao fazer scroll:
```css
transform: translateZ(0);
-webkit-transform: translateZ(0);
```

## Banner de cookies fixo no mobile

Usar `width: 100vw` em vez de depender de `left: 0; right: 0`.  
Com overflow no documento, `right: 0` pode expandir o banner além do viewport.

```css
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  overflow: hidden;
  box-sizing: border-box;
}
```

## Overflow horizontal e position:fixed — regra principal

**Nunca usar `overflow-x: hidden` no `html` ou `body`** quando há elementos `position: fixed`.  
Cria um scroll container que quebra o fixed no mobile.

**Cuidado:** `overflow-x: clip` no `html`/`body` evita esse problema para `position: fixed`, mas **quebra `position: sticky`** em qualquer elemento filho direto do `<body>` (ex: um header sticky) — confirmado em browser real: o header deixa de colar ao topo e desliza com a página assim que se faz scroll. Não é só um detalhe teórico do spec, é um bug visível.

**Solução:**
- **Não** colocar `overflow-x: clip` no `html` nem no `body`.
- Conter o overflow **localmente**, no componente que o causa (ex: `.brand-carousel { overflow: hidden }` num carrossel de logos), não no root do documento.
- Se precisar de um wrapper de conteúdo, use `.page-clip { overflow-x: clip }` apenas num `<main>` ou `<div>` interno — nunca no `html`/`body` — e mantenha elementos `fixed` e `sticky` **fora** desse wrapper, como filhos diretos do `<body>`.

## Nav mobile — não usar translateX

`transform: translateX(100%)` para esconder a nav duplica a largura do documento (ex: 860px num viewport de 430px), causando overflow horizontal.

**Usar fade em vez de slide horizontal:**
```css
.header__nav {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0s linear 0.35s;
}
.header__nav.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s, visibility 0s linear 0s;
}
```

## position:sticky no header

`position: sticky` quebra quando o elemento está dentro de um pai com `overflow` definido.  
O header deve ficar **fora** de qualquer wrapper com `overflow-x: clip/hidden`.

## Não usar custom property + url() para imagens de fundo inline

Padrão como `style="--bg:url('/caminho/img.jpg')"` combinado com `background-image: var(--bg)` no CSS externo **parece** funcionar num servidor local, mas o caminho dentro do `url()` resolve em relação ao **ficheiro CSS**, não ao HTML — daí a necessidade de usar `/` no início. Esse `/` por sua vez parte do princípio de que o site está alojado na raiz do domínio: quebra ao abrir o ficheiro diretamente (`file://`, onde `/` aponta para a raiz da drive) e pode quebrar em hospedagens que servem o site numa subpasta.

**Solução:** nunca usar este padrão para imagens de conteúdo. Usar uma `<img>` real posicionada em `absolute; inset:0; object-fit:cover` como camada de fundo, com um `<div>` irmão para o gradiente/overlay por cima. Caminhos relativos em `src` de `<img>` resolvem sempre corretamente em relação ao documento HTML, em qualquer contexto (servidor, `file://`, subpasta).

## Botões com a mesma cor do fundo onde são usados

Um `.btn--light` (fundo claro) ou `.btn--primary` (fundo escuro) pode ficar invisível — só o texto "a flutuar" — se for colocado dentro de um contentor com exatamente essa mesma cor de fundo (ex: botão `--primary` dentro do banner de cookies que também é `--primary`). Verificar sempre o contraste do botão **contra o contentor imediato**, não só contra o resto da página. `.btn--light` tem `border` para mitigar isto; para `.btn--primary` em contexto escuro, trocar para `.btn--white` em vez de assumir que a cor de texto branca chega.
