# 📋 INFOREVIEW PRO — Manual do Template

## Arquivos do sistema

| Arquivo | Função | Editar? |
|---|---|---|
| `style.css` | Todo o CSS do site | Só para adicionar estilos novos |
| `scripts.js` | Menu, dropdown mobile, share | Nunca |
| `TEMPLATE-MESTRE.html` | Esqueleto base de toda página | Nunca (só copiar) |

---

## Como criar uma nova página

1. **Copie** o `TEMPLATE-MESTRE.html` e renomeie para a nova URL (ex: `nova-pagina.html`)
2. **Altere apenas 3 coisas na Parte A:**
   - `<title>` → título da página
   - `<meta name="description">` → descrição da página (até 155 caracteres)
3. **Substitua a Parte B** (entre `CONTEÚDO DINÂMICO` e `FIM DA PARTE B`) pelo conteúdo da página
4. **Não toque na Parte C** (newsletter + footer + script)

---

## Prompt padrão para pedir conteúdo à IA

```
Use o template padrão do inforeviewpro.com.
Gere APENAS o código da PARTE B (o que vai dentro de <article class="container">)
para o artigo: [NOME DO ARTIGO].

Imagem: [nome-da-imagem.png]
Próximo artigo: [link e título do próximo]
Links internos do grid: [lista de 4 a 6 artigos]
```

---

## Classes CSS disponíveis (Parte B)

### Estrutura
- `<article class="container">` — artigos/posts
- `<div class="container">` — índices e ferramentas

### Tipografia
- `<h2>` — título principal do artigo
- `<h3>` — subtítulos internos
- `<p>` — parágrafos (já vêm justificados)

### Componentes prontos
```html
<!-- Imagem de destaque -->
<img src="imagem.png" alt="..." class="featured-image">

<!-- Caixa amarela de destaque -->
<div class="highlight">
  <h3>Título</h3>
  <p>Texto...</p>
</div>

<!-- Card genérico -->
<div class="card">...</div>

<!-- Card de próximo artigo -->
<div class="card card-next">
  <span class="badge">Próxima Leitura</span>
  <h3>Título</h3>
  <p>Descrição</p>
  <a href="link.html" class="btn btn-dark">LER AGORA →</a>
</div>

<!-- Botões -->
<a href="#" class="btn">Laranja (padrão)</a>
<a href="#" class="btn btn-dark">Azul escuro</a>

<!-- Link interno -->
<a href="artigo.html" class="internal-link">Texto do link</a>

<!-- Grid de 4 links -->
<div class="cards-grid">
  <a href="artigo.html" class="link-card">👉 Título</a>
  ...
</div>

<!-- Lista de série (amarela) -->
<div class="mei-series">
  <h4>📚 Série: Título</h4>
  <ul>
    <li><a href="artigo.html">➔ Título do artigo</a></li>
  </ul>
</div>

<!-- Lista de série (vermelha) -->
<a href="artigo.html" class="red">➔ Título</a>
```

### Compartilhamento (copiar exatamente assim)
```html
<div class="share-box">
  <p>Compartilhe este artigo:</p>
  <div class="share-buttons">
    <a id="share-wa"  href="#" target="_blank" rel="noopener noreferrer" class="share-btn whatsapp"><i class="fab fa-whatsapp"></i> WhatsApp</a>
    <a id="share-fb"  href="#" target="_blank" rel="noopener noreferrer" class="share-btn facebook"><i class="fab fa-facebook-f"></i> Facebook</a>
    <a id="share-tw"  href="#" target="_blank" rel="noopener noreferrer" class="share-btn xtwitter"><i class="fab fa-x-twitter"></i> Twitter/X</a>
    <a id="share-in"  href="#" target="_blank" rel="noopener noreferrer" class="share-btn linkedin"><i class="fab fa-linkedin-in"></i> LinkedIn</a>
    <a id="share-pin" href="#" target="_blank" rel="noopener noreferrer" class="share-btn pinterest"><i class="fab fa-pinterest"></i> Pinterest</a>
  </div>
</div>
```
> Os links são preenchidos automaticamente pelo `scripts.js`. Não altere os IDs.

---

## Adicionando novo item ao menu

Edite **apenas** a seção `<div class="menu-links">` dentro do `TEMPLATE-MESTRE.html`
e replique a alteração em todas as páginas existentes.

---

## Cores do site (referência rápida)

| Cor | Hex | Uso |
|---|---|---|
| Azul escuro | `#0A1F44` | Header, nav, títulos, botão dark |
| Laranja | `#F5A623` | Botão padrão, destaques, links footer |
| Laranja newsletter | `#ff6600` | Borda e botão newsletter |
| Verde badge | `#27ae60` | Badges verdes |
| Vermelho alerta | `#e74c3c` | Bordas de alerta |
| Fundo cinza claro | `#F4F7FB` | Background do body |
| Fundo card azul | `#f0f4f8` | Cards de próximo artigo, card-guia |