/**
* N-GATEWAY — tokens de marca e componente de logo.
*
* Origem: design_handoff_ngateway_logo/ (brand.css + NGatewayLogo.jsx). Este é o
* PONTO ÚNICO dos valores de marca no painel: cor, tipografia, raio e a geometria
* do monograma. Trocar a cor da marca aqui vale para o painel inteiro — repetir o
* hex nas páginas é como metade das telas continuaria na cor antiga depois de um
* rebrand, sem quebrar nenhuma tela e sem ninguém notar.
*
* Carregado por includes/brand-head.php, que entra no de todas as telas.
*
* IMPORTANTE — este arquivo NÃO redesenha o painel. Ele apenas disponibiliza os
* tokens e desenha a marca. O tema atual (claro, style.css) continua valendo; a
* migração das telas para a paleta escura da identidade é decisão à parte, e ter
* os tokens prontos é o que permite fazê-la aos poucos em vez de num big bang.
*/
:root {
/* --- Cores (handoff §Design tokens) ------------------------------------ */
--ngw-accent: #35E0C6; /* teal primário — sobre fundo escuro */
--ngw-accent-ink: #0C9E8A; /* o mesmo teal sobre fundo claro (contraste AA) */
--ngw-bg: #0B0E13; /* fundo da aplicação */
--ngw-surface: #10141B; /* cards, painéis, barra de navegação */
--ngw-border: #1C2432;
--ngw-border-strong: #2A3547;
--ngw-text: #E8ECF2;
--ngw-text-muted: #93A1B5;
--ngw-text-dim: #6B7A90;
--ngw-bg-light: #F5F7FA;
/* --- Tipografia -------------------------------------------------------- */
/* Space Grotesk: logo, títulos, números/métricas.
IBM Plex Mono: dados, IPs, latência, trechos de script e micro-rótulos
em caixa alta. As duas são carregadas em includes/brand-head.php. */
--ngw-font-display: 'Space Grotesk', system-ui, sans-serif;
--ngw-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
/* --- Raios ------------------------------------------------------------- */
--ngw-radius-sm: 4px; /* chips */
--ngw-radius: 6px; /* inputs, stat cards */
--ngw-radius-lg: 8px; /* painéis */
--ngw-radius-icon: 20px; /* ícone do app */
}
/* ==========================================================================
Componente de logo — porte de NGatewayLogo.jsx para CSS/PHP
==========================================================================
O handoff entrega o componente em React; o painel é PHP puro, e o próprio
README manda recriar a geometria nas convenções do projeto em vez de colar o
JSX. A marca é montada com flex + bordas (não com ![]()
) por um motivo
concreto: os SVGs do handoff desenham o "N" e o "GATEWAY" com em Space
Grotesk, e SVG carregado via ![]()
é um documento isolado — não enxerga a
webfont da página e cai em Arial. Inline no HTML, a fonte da página vale.
Ver includes/ngateway-logo.php.
Toda medida deriva da altura do colchete (H), publicada como --ngw-logo-h
pelo elemento raiz do componente. Os valores são os do handoff §Geometry. */
.ngw-logo {
display: inline-flex;
align-items: center;
gap: calc(var(--ngw-logo-h) * 0.14);
line-height: 1;
/* A marca não é um link nem herda decoração do contexto (a sidebar
sublinha no hover; a logo é logo, não texto de link). */
text-decoration: none;
}
.ngw-logo--vertical {
flex-direction: column;
gap: calc(var(--ngw-logo-h) * 0.2);
}
/* --- O monograma [N] ---------------------------------------------------- */
.ngw-logo__mark {
display: inline-flex;
align-items: center;
}
/* Os colchetes são ABERTOS no lado interno: só três bordas cada um. Fechá-los
num retângulo em volta do N descaracteriza a marca (handoff: "never close
them into a full box"). */
.ngw-logo__bracket {
box-sizing: border-box;
width: calc(var(--ngw-logo-h) * 0.23);
height: var(--ngw-logo-h);
border-top: var(--ngw-logo-stroke) solid var(--ngw-logo-bracket);
border-bottom: var(--ngw-logo-stroke) solid var(--ngw-logo-bracket);
}
.ngw-logo__bracket--left { border-left: var(--ngw-logo-stroke) solid var(--ngw-logo-bracket); }
.ngw-logo__bracket--right { border-right: var(--ngw-logo-stroke) solid var(--ngw-logo-bracket); }
.ngw-logo__n {
font-family: var(--ngw-font-display);
font-weight: 700;
font-size: calc(var(--ngw-logo-h) * 0.9);
letter-spacing: -0.05em;
line-height: 1;
padding: 0 var(--ngw-logo-pad);
/* letter-spacing negativo é aplicado DEPOIS do último glifo também: sem esta
compensação sobra 0.05em (= 0.045 × H) de ar só do lado direito e o N fica
visivelmente descentralizado entre os colchetes — o SVG de referência
centraliza com text-anchor="middle" e não tem essa folga. */
margin-right: calc(var(--ngw-logo-h) * -0.045);
color: var(--ngw-logo-letter);
}
/* --- A parte escrita ---------------------------------------------------- */
.ngw-logo__lockup {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: calc(var(--ngw-logo-h) * 0.06);
}
.ngw-logo--vertical .ngw-logo__lockup { align-items: center; }
.ngw-logo__word {
font-family: var(--ngw-font-display);
font-weight: 700;
font-size: calc(var(--ngw-logo-h) * 0.46);
letter-spacing: -0.01em;
line-height: 1;
color: var(--ngw-logo-word);
white-space: nowrap;
}
.ngw-logo__descriptor {
font-family: var(--ngw-font-mono);
font-weight: 400;
/* Piso de 9px: abaixo disso o entreletras de 0.28em vira ruído ilegível. */
font-size: max(9px, calc(var(--ngw-logo-h) * 0.125));
letter-spacing: 0.28em;
line-height: 1;
/* Mesmo motivo do N, com o sinal invertido: o entreletras de 0.28em também
sobra depois da última letra. No lockup vertical, que é centralizado, essa
sobra joga o descritor para a esquerda — o SVG de referência compensa à
mão (descritor em x=136 contra x=134 do "GATEWAY"). */
margin-right: -0.28em;
color: var(--ngw-logo-sub);
/* nowrap por padrão: a quebra do descritor é decidida por quem chama, com "\n"
no texto (classe --desc-quebra abaixo), nunca pelo navegador — com 0.28em de
entreletras ele quebraria em lugar diferente conforme a largura de cada tela. */
white-space: nowrap;
}
/* Descritor em duas ou mais linhas: `pre-line` respeita o "\n" do texto e continua
ignorando qualquer outra quebra. O line-height sobe de 1 para 1.4 porque, colado,
texto de 9px com esse entreletras vira um bloco cinza ilegível. */
.ngw-logo--desc-quebra .ngw-logo__descriptor {
white-space: pre-line;
line-height: 1.4;
}