/* ========================================================================= base.css — fundações partilhadas por TODAS as páginas (landing, entrada, legais e a app): tipos de letra, paleta, botões. O que é específico da app vive no app.css; o das páginas de conteúdo, no site.css. O SISTEMA VISUAL É O DO mundoutil.pt (projeto "Descontos de Aniversário"), copiado de lá e não reinventado. Em resumo, para quem tiver de mexer: - Inter, com o peso a fazer o trabalho do destaque: títulos grandes em 300 (leve) com / a 800. Não é um erro, é o desenho. - Neutros quase puros (#111 / #555 / #aaa) sobre branco, com linhas de 1px a #e8e8e8. SEM sombras. - Cantos pequenos: 12px nos cartões, 8px nas caixas, 4px nos botões. - A cor entra em dois sítios e só nesses: fundos pastel de etiqueta e cores de estado em ícones/números. Texto decorativo é neutro. - Botão primário = fundo #111, texto branco, 4px de canto. Ao acrescentar componentes, usa os tokens abaixo em vez de escrever cores. ========================================================================= */ /* Inter alojado localmente (o mesmo ficheiro e os mesmos pesos do mundoutil.pt): evita um terceiro no caminho crítico e permite font-src 'self' no CSP. */ @font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/Inter-Light.woff2?v=2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Inter-Regular.woff2?v=2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/Inter-Medium.woff2?v=2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Inter-SemiBold.woff2?v=2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/Inter-Bold.woff2?v=2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/Inter-ExtraBold.woff2?v=2') format('woff2')} :root{ --font:'Inter',system-ui,-apple-system,sans-serif; /* ---- neutros (iguais ao mundoutil.pt) ---- */ --ink:#111; --ink-2:#555; --ink-3:#aaa; --line:#e8e8e8; --bg:#fff; --row-alt:#fafafa; /* ---- pastéis: as cores das categorias do mundoutil.pt. Cada família tem fundo (-c), tom médio (-b) e texto (-t). O -t é o único que se pode usar como cor de letra sobre branco. ---- */ --rosa-c:#FFD6E0; --rosa-b:#F4A0B8; --rosa-t:#7b0030; --lilas-c:#E8D5F5; --lilas-b:#C9A8E8; --lilas-t:#4a1a6e; --ambar-c:#FFF3CD; --ambar-b:#F0D060; --ambar-t:#7d5a00; --verde-c:#D5F5E3; --verde-b:#7DD4A0; --verde-t:#1a5c33; --azul-c:#D6EAF8; --azul-b:#80BBE8; --azul-t:#1a4a6e; --areia-c:#F5E6D3; --areia-b:#D4A870; --areia-t:#5a3010; --turquesa-c:#B2F5EC; --turquesa-b:#50D8C8; --turquesa-t:#005040; --laranja-c:#FFE0B5; --laranja-b:#F0A860; --laranja-t:#7d3a00; /* A décima família do mundoutil.pt (lá é a categoria "viagens"). Entrou por ser o último tom da barra de acento do hero — sem ela o degradê não é o mesmo — e é hoje a única família que NÃO etiqueta nenhum estado nem modalidade. É por isso que é ela que veste o total do contador da página inicial: é a soma de todos os estados, e não podia vestir a cor de um deles. Se um dia precisares de uma cor que não signifique estado nenhum, é esta — e então deixa de o ser. */ --viagens-c:#C5D8F0; --viagens-b:#80A8E0; --viagens-t:#0d3a7a; /* ---- cores de estado: as mesmas cinco do CONF_NIVEIS do mundoutil.pt. São as únicas cores que se usam em letra e ícones. ---- */ --ok:#3a9e6a; --info:#2563eb; --aviso:#e67e22; --erro:#c0392b; --neutro:#999; /* ---- escala tipográfica do mundoutil.pt (em px, de propósito) ---- */ --fs-h1:clamp(30px,4vw,52px); --fs-h2:15px; --fs-h3:13px; --fs-body:14px; --fs-small:12px; --fs-tiny:11px; --fs-tag:11px; --fs-counter:24px; --fs-label:10px; /* ---- formas ---- */ --radius-lg:12px; --radius-md:8px; --radius-sm:4px; --shadow:none; --shadow-sm:none; /* ---- nomes herdados do draft. Continuam porque são usados em muitos sítios e descrevem bem o papel; os antigos --coral/--mint/--lavender/ --yellow foram todos convertidos para as famílias acima e já não existem, para não haver duas maneiras de dizer a mesma cor. ---- */ --cream:var(--bg); --card:var(--bg); --stripe:var(--row-alt); --ink-soft:var(--ink-2); --border:var(--line); --grey-light:#f0f0f0; } *{box-sizing:border-box;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:var(--fs-body); -webkit-font-smoothing:antialiased; transition:background .2s,color .2s; } /* Títulos leves com destaque a negrito — a assinatura tipográfica do mundoutil.pt (lá é `h1{font-weight:300}` com `h1 strong{font-weight:800}`). O faz aqui o papel do de lá. */ h1{ font-family:var(--font); font-size:var(--fs-h1); font-weight:300; letter-spacing:-.04em; line-height:1.02; margin:0 0 10px; } h1 span,h1 strong{font-weight:800;} h2,h3,.display{font-family:var(--font);font-weight:700;letter-spacing:-.01em;} .wrap{max-width:1400px;width:98%;margin:0 auto;padding:8px 0 60px;} a{color:inherit;} .icon{width:16px;height:16px;flex-shrink:0;stroke:currentColor;} .icon-lg{width:20px;height:20px;} /* A barra de acento do hero do mundoutil.pt: 4px na vertical, com as cores das categorias por ordem. Os tons são os **pastel** (`-c`), como lá — beleza, moda, supermercado, saúde, viagens. Estava a usar os tons médios (`-b`) e dava um arco-íris saturado que não é o mesmo objeto. */ .accent-bar{ width:4px;align-self:stretch;flex-shrink:0;border-radius:0; background:linear-gradient(180deg,var(--rosa-c),var(--lilas-c),var(--verde-c),var(--azul-c),var(--viagens-c)); } /* ---------- BOTÕES ---------- */ /* O botão do mundoutil.pt é `background:var(--ink);color:#fff;border-radius:4px` — sem sombra e sem cor de marca. */ .btn{ border:none;cursor:pointer;font-family:var(--font);font-weight:600; border-radius:var(--radius-sm);padding:10px 20px;font-size:var(--fs-small); transition:opacity .15s,background .15s,border-color .15s,color .15s; display:inline-flex;align-items:center;gap:6px;white-space:nowrap; } .btn-primary{background:var(--ink);color:var(--bg);} .btn-primary:hover{opacity:.85;} .btn-ghost{background:var(--bg);color:var(--ink-2);border:1px solid var(--line);} .btn-ghost:hover{color:var(--ink);border-color:var(--ink-3);} .btn-sm{padding:7px 12px;font-size:var(--fs-small);} .btn-danger{background:var(--erro);color:#fff;} .btn-danger:hover{opacity:.85;} input[type=file]{display:none;} /* ========================================================================== ACESSIBILIDADE — o que é transversal aos três sites Bloco IGUAL nos três (no Descontos vive no private/moldura.php). Nada aqui muda o desenho de quem usa o rato: o salto é invisível até levar foco, e o anel de foco só aparece a quem navega por teclado. ========================================================================== */ /* ---------- saltar para o conteúdo ---------- O primeiro elemento focável da página. Quem navega por teclado ou com leitor de ecrã atravessava a barra de marca e a navegação inteira em cada página antes de chegar ao conteúdo; isto oferece um atalho na primeira tabulação. Fica fora do ecrã até receber foco — não é `display:none`, que o tiraria da ordem de tabulação e não serviria para nada. */ .salta-conteudo{position:absolute;left:-9999px;top:0;z-index:1000; background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:0 0 var(--radius-sm) 0; font-size:var(--fs-small);font-weight:700;text-decoration:none;} .salta-conteudo:focus{left:0;} /* ---------- foco visível ---------- `:focus-visible` e não `:focus`: o browser só o aplica quando a navegação é por teclado, por isso um clique do rato num botão não deixa o anel pendurado. O anel é da cor da tinta com 2px de afastamento, para se ver por igual sobre branco, sobre creme e sobre um botão preto. Não há aqui nenhum `outline:none`, e não deve passar a haver: tirar o anel de foco é a maneira mais rápida de tornar um site inutilizável sem rato. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px;} /* Sobre fundo escuro (o botão primário, o banner de cookies em tinta) o anel da cor da tinta desaparecia: ali é branco. */ .btn-primary:focus-visible, .cookie-barra .btn-primary:focus-visible{outline-color:var(--bg);} /* ---------- alvos de toque ---------- As orientações de acessibilidade pedem 24px de lado mínimo para um alvo, e as de interface móvel 44. Os botões de ícone estavam a 20px: acertar o dedo era sorte. Sobem para 28 (e o ícone lá dentro fica igual), que com o espaçamento à volta dá os 44 de área efetiva. */ .icon-btn{min-width:28px;min-height:28px;} /* ---------- um parágrafo que é só um link ---------- "Ver tudo o que dá para fazer", "Ler a política de privacidade": um

com um link e mais nada é um destino, não uma frase, e por isso conta como alvo de toque — tinha 17px de altura. Um link NO MEIO de um parágrafo está dispensado da regra 2.5.8 (a exceção dos alvos em linha). ⚠️ O :only-child IGNORA o texto: apanha também o link único no meio de uma frase. Por isso fica `inline` — o padding vertical de um inline alarga a área de toque sem mexer na altura da linha. Com inline-block, esse link puxava a linha dele para baixo e o parágrafo ficava com o espaçamento desigual (viu-se na FAQ do portal). O :not(.btn) é porque um botão sozinho num

(o "Ir para a entrada" da 404) perdia o padding lateral do .btn para este 4px 0. */ p > a:only-child:not(.btn){padding:4px 0;} /* ---------- o que só o leitor de ecrã lê ---------- Para dar nome a um controlo cujo rótulo é um ícone, ou para anunciar o que mudou numa zona da página. Fora do ecrã, mas não escondido: `display:none` e `visibility:hidden` são ignorados pelos leitores. */ .so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} /* ---------- quem pediu menos movimento ---------- O sistema operativo tem uma preferência para isto e nós tínhamos transições em barras, cartões e gráficos. Respeitá-la é uma linha. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important;} }