Manual de
Personalização

01

Estrutura de Ficheiros

Os ficheiros HTML principais ficam na raiz. As páginas de detalhe de cada template estão na pasta templates/. Os recursos estáticos ficam em assets/ e os handlers PHP em php/.

02

Sistema de Design — Tokens CSS

Toda a aparência do site é controlada por variáveis CSS definidas no bloco :root no início de assets/css/style.css. Alterar um token actualiza automaticamente todos os elementos que o usam — nunca é necessário procurar valores dispersos pelo ficheiro.

03

Paleta de Cores

O conceito Silent Luxury assenta numa paleta neutra e quente, com dois acentos cromáticos — musgo e bronze. Para alterar a paleta, edite apenas as variáveis em :root.

Cores actuais

Como alterar uma cor

Abra assets/css/style.css e localize o bloco :root no início do ficheiro (linha 10). Substitua o valor hexadecimal:

/* Exemplo: mudar o acento musgo de verde para azul profundo */
:root {
  --color-moss:      #2A4A6B; /* era #4A5C4E */
  --color-moss-dark: #1C3348; /* era #354039 */
}

04

Tipografia

Famílias de tipo

O site usa duas famílias carregadas via Google Fonts — uma serifada para títulos, outra sem serifas para corpo de texto.

Substituir a fonte serifada

<!-- Substituir o href abaixo pelo URL da nova fonte -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display..."
      rel="stylesheet" />

--font-serif: 'Playfair Display', Georgia, serif;

Escala de tamanhos

05

Conteúdo das Páginas

index.html — secções e o que alterar

Alterar ícones (Lucide)

Os ícones são carregados via Lucide Icons. Para trocar um ícone, altere o atributo data-lucide pelo nome do ícone desejado. Consulte o catálogo completo em lucide.dev/icons.

<!-- Era "globe", passou a "layout-dashboard" -->
<i data-lucide="layout-dashboard"
   width="20" height="20"
   stroke-width="1"></i>

06

Imagens dos Templates

Todas as imagens são colocadas em assets/img/. Cada template tem 3 imagens numeradas (ex: ritual1.jpg, ritual2.jpg, ritual3.jpg) usadas no card do catálogo, no carousel da página de detalhe e nos cards "Outros templates".

Formato e dimensões recomendados

Estrutura do card com imagem real

<div class="template-card__thumb">
  <a href="templates/template-ritual-studio.html"
     tabindex="-1" aria-hidden="true">
    <img src="assets/img/ritual1.jpg"
         alt="Ritual Studio — template de beleza e bem-estar"
         loading="lazy" />
  </a>
</div>

07

Catálogo — Adicionar um Novo Template

O catálogo (catalogo.html) usa um sistema de filtros baseado no atributo data-category. Para adicionar um novo template, copie e cole um bloco de card existente e actualize os valores.

Estrutura de um card

<!-- O data-category define a qual filtro este card pertence -->
<div class="col-md-6 col-lg-4"
     data-category="restaurante">   <!-- ① categoria -->
  <article class="template-card reveal">
    <div class="template-card__image">
      <img src="assets/img/nome-template.webp"  <!-- ② imagem -->
           alt="Template Nome — preview"
           loading="lazy"
           width="800" height="540" />
    </div>
    <div class="template-card__body">
      <p class="template-card__tag">Restaurante</p>  <!-- ③ tag -->
      <h3 class="template-card__title">Mesa do Chef</h3>  <!-- ④ título -->
      <p class="template-card__desc">
        Descrição breve do template, 1 a 2 linhas.  <!-- ⑤ descrição -->
      </p>
      <div class="template-card__footer">
        <span class="template-card__price">€ 290</span>  <!-- ⑥ preço -->
        <a href="template-detalhe.html"
           class="btn-oaa-ghost btn-oaa--sm">Saber mais</a>
      </div>
    </div>
  </article>
</div>

Categorias disponíveis

Para adicionar uma nova categoria, adicione um botão de filtro na barra de filtros do catálogo e atribua o novo valor nos cards respectivos:

<!-- Adicionar este botão junto aos outros filtros -->
<button class="catalog-filter__btn"
        data-filter="hotelaria">Hotelaria</button>

08

Página de Detalhe do Template

O ficheiro template-detalhe.html serve de base para todos os templates. Cada template deve ter a sua própria cópia desta página (ex: ritual-studio.html, mesa-do-chef.html).

O que actualizar em cada cópia

Ligar o card do catálogo à página correcta

<!-- Actualizar href para o ficheiro de detalhe específico -->
<a href="ritual-studio.html"
   class="btn-oaa-ghost btn-oaa--sm">Saber mais</a>

09

Rodapé e Contactos

O rodapé é repetido em todos os ficheiros HTML. Qualquer alteração deve ser aplicada em todos os ficheiros: index.html, catalogo.html, template-detalhe.html, politica-privacidade.html, termos-utilizacao.html, cookies.html.

Morada

<address class="footer__address">
  O Alfaiate do Algoritmo<br />
  Rua Alecrim, 26<br />
  2735-268 Rio de Mouro<br />
  Sintra / Portugal
</address>

Redes sociais

<a href="https://www.linkedin.com/company/oaa-webdesign"
   class="footer__social-link" aria-label="LinkedIn"
   target="_blank" rel="noopener">...</a>

<a href="https://www.facebook.com/oalfaiatedoalgoritmo"
   class="footer__social-link" aria-label="Facebook"
   target="_blank" rel="noopener">...</a>

<a href="https://wa.me/351937177802"
   class="footer__social-link" aria-label="WhatsApp"
   target="_blank" rel="noopener">...</a>

10

Páginas Legais

As três páginas legais contêm dados que precisam de ser preenchidos com informação real antes de o site entrar em produção.

Campos em falta (placeholders)

Datas das políticas

Sempre que actualizar o conteúdo de uma página legal, actualize também a data de "Última actualização" no hero da respectiva página:

<span>
  <i data-lucide="calendar"...></i>
  Última actualização: 20 de Março de 2026  <!-- ← actualizar -->
</span>

11

Formulários e Envio de Email

Os formulários de contacto e newsletter enviam email via Resend (resend.com), um serviço transaccional externo. O envio usa a API REST do Resend por cURL — sem dependências externas ou Composer.

Configurar a API Key

A API key é guardada em php/config.php. Após criar conta no Resend e verificar o domínio oaa.pt, substitua o valor:

define('RESEND_API_KEY', 're_SUA_API_KEY_AQUI');

Verificar o domínio no Resend

Alterar destinatário dos emails

define('MAIL_TO',        'orcamentos@oaa.pt');  // recebe os contactos
define('MAIL_REPLY_TO',  'farc@oaa.pt');         // reply-to nas newsletters
define('MAIL_FROM_ADDR', 'noreply@oaa.pt');      // remetente (domínio verificado)