Arquitetura · CSS por Painel e Tela¶

O CSS está organizado em style/ por responsabilidade, não por arquivo monolítico — cada painel/tela do sistema tem seu próprio arquivo, o que permite evoluir um módulo sem risco de quebrar outro.

Organização do CSS

Estrutura de pastas¶

style/
├── base/            → fundação visual (aplicada a toda a página)
│   ├── head.css
│   └── responsive.css
├── layout/          → estrutura macro do SPA
│   ├── body.css
│   ├── hero.css
│   └── panels.css
├── components/      → peças reutilizáveis entre painéis
│   ├── ads.css
│   ├── modules.css
│   ├── cookie-banner.css
│   ├── dropdown-menu.css
│   ├── topbar-menu.css
│   ├── demo-api-modal.css
│   └── api-users-modal.css
├── panels/          → um arquivo por painel administrativo
│   ├── courses.css
│   ├── datascience.css
│   ├── datasecurity.css
│   ├── erp.css
│   ├── marketing.css
│   ├── saas.css
│   └── tecnologia.css
│   └── tcpip.css
└── pages/           → páginas standalone (fora do SPA principal)
    ├── contact.css
    ├── termos.css
    ├── thank-you.css
    ├── 404.css
    ├── about.css
    ├── privacy.css
    ├── palestras.css
    └── pentest.css

Convenção de nomenclatura¶

Camada	Quando usar	Exemplo
`base/`	Estilos globais aplicados a `<head>`/`<body>` e breakpoints responsivos	`head.css`, `responsive.css`
`layout/`	Estrutura macro do SPA (grid principal, hero, painéis)	`body.css`, `panels.css`
`components/`	Widgets reutilizados por múltiplos painéis (menus, modais, banners)	`dropdown-menu.css`, `cookie-banner.css`
`panels/`	Estilo específico de UM painel administrativo	`marketing.css` → aba LINKEDIN ADS
`pages/`	Páginas fora do SPA (`pages/*.html`) ou telas com CSS próprio dentro do SPA (ex.: pentest)	`pentest.css`, `about.css`

Regra de ouro: ao criar um painel novo, o CSS correspondente nasce em panels/{nome}.css — nunca em um arquivo compartilhado. Isso é parte do Definition of Done de todo épico de painel.

Módulo Pentest — caso de estudo¶

O painel PENTEST (data-tab="pentest") tem CSS dedicado em style/pages/pentest.css, cobrindo os componentes específicos do módulo: .pt-panel, .pt-phase-card, .pt-type-card, .pt-tool-card, .pt-fw-card, .pt-lab-card, .pt-kill-chain — nomenclatura com prefixo pt- para evitar colisão com outros painéis.