/* ==========================================================================
N-THREAD v0.2 — a camada de assinatura do N•GROUP
--------------------------------------------------------------------------
O que é: SOMENTE o fio que liga NYB, NICE, NOCCI e NoNAP.
Adoção (10 minutos): 1 + . Só isso.
Sem JS a assinatura já aparece inteira (body::before = a Fita,
body::after = a Frase). Com n-thread.js (opcional) a Fita vira link,
abre o Índice das casas e faz o ritual de entrada.
Constantes editáveis (§8 do briefing):
SIGNATURE_MAX_ELEMENTS = 3 (usados: 2 — a Fita e a Frase)
SIGNATURE_VIEWPORT_SHARE = 8% (a Fita ocupa 0,13% de 1440×900)
FITA_W × FITA_H = 32 × 52 px (0,62 = proporção do "id do selo", 83×133; 28×45 ficou fino demais para o N a 1×)
ICON_MIN_SIZE = 16px (glifos só aparecem no Índice, a 14px + folga)
Regras deste arquivo:
- Só tokens --nt-*, os componentes da assinatura, hooks [data-brand]
e reduced-motion. Nada de layout, botão, card ou escala tipográfica.
- Nenhum hex de marca-filha aqui. Tokens de marca ficam no site dela.
A única cor compartilhada é o royal — e só na Fita.
========================================================================== */
:root {
/* A cor do grupo. Única cor autorizada nas cinco marcas — e só na Fita. */
--nt-royal: #0039A6;
/* Neutros do grupo: usados só dentro da Fita e do Índice. Sem #FFF, sem #000. */
--nt-cream: #F0EDE6;
--nt-ink: #111110;
/* A Fita: geometria fixa. Muda-se o inset (para não colidir com o menu), nunca o tamanho. */
--nt-fita-w: 32px;
--nt-fita-h: 52px;
--nt-fita-inset: 20px;
--nt-fita-fill: var(--nt-royal);
--nt-fita-z: 2147483000; /* acima de tudo; só cursores customizados ficam por cima */
--nt-fita-shape: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); /* bookmark com corte em V */
/* A Frase: tamanho em px para não depender da escala tipográfica da marca. */
--nt-line-size: 13px;
--nt-line-pad: 18px;
/* Ritual (só com JS e sem prefers-reduced-motion). */
--nt-dur: .7s;
--nt-ease: cubic-bezier(.16, 1, .3, 1);
/* O N em círculo (logos/n-group_*.svg). Data URI não aceita var(): uma cópia
como máscara (cor = currentColor), uma cream (Fita e Frase em página escura) e uma ink (Frase em página clara). */
--nt-mark: url("data:image/svg+xml;utf8,");
--nt-mark-cream: url("data:image/svg+xml;utf8,");
--nt-mark-ink: url("data:image/svg+xml;utf8,");
--nt-mark-inline: var(--nt-mark-ink); /* páginas claras: N ink. Marcas escuras trocam via hook abaixo. */
/* Os glifos do "id do selo", como máscaras. Só aparecem no Índice (JS). */
--nt-g-nyb: url("data:image/svg+xml;utf8,");
--nt-g-nice: url("data:image/svg+xml;utf8,");
--nt-g-nocci: url("data:image/svg+xml;utf8,");
--nt-g-nonap: url("data:image/svg+xml;utf8,");
}
/* Hooks de marca: só o que a assinatura precisa saber de cada uma (esquema claro/escuro).
Nenhum hex de marca aqui. NYB vive no escuro: o N da Frase vira cream. */
[data-brand="nyb"] { --nt-mark-inline: var(--nt-mark-cream); }
[data-nt-scheme="dark"] { --nt-mark-inline: var(--nt-mark-cream); } /* qualquer marca pode forçar */
/* ==========================================================================
1. A FITA — pendurada no topo, à direita, sempre royal, sempre com o N.
Sem JS: pseudo-elemento fixo do body. Zero markup no site da marca.
========================================================================== */
body::before {
content: "";
position: fixed;
top: 0;
right: var(--nt-fita-inset);
width: var(--nt-fita-w);
height: var(--nt-fita-h);
z-index: var(--nt-fita-z);
pointer-events: none; /* sem JS não é link: não rouba nenhum clique da marca */
background-color: var(--nt-fita-fill);
background-image: var(--nt-mark-cream);
background-repeat: no-repeat;
background-size: 22px 22px;
background-position: 50% 10px; /* o N no terço superior, como no selo do Figma */
clip-path: var(--nt-fita-shape);
}
html[data-nt-js] body::before { display: none; } /* com JS, a fita real substitui o pseudo */
/* A fita real (injetada pelo n-thread.js): mesma geometria, agora é link e abre o Índice. */
.nt-fita {
position: fixed;
top: 0;
right: var(--nt-fita-inset);
z-index: var(--nt-fita-z);
width: var(--nt-fita-w);
font: 500 12px/1.3 system-ui, sans-serif; /* fonte neutra de propósito: o Índice é do grupo, não da marca */
color: var(--nt-cream);
}
.nt-fita__tab {
display: block;
width: var(--nt-fita-w);
height: var(--nt-fita-h);
background-color: var(--nt-fita-fill);
background-image: var(--nt-mark-cream);
background-repeat: no-repeat;
background-size: 22px 22px;
background-position: 50% 10px;
clip-path: var(--nt-fita-shape);
transition: height var(--nt-dur) var(--nt-ease);
}
.nt-fita:hover .nt-fita__tab,
.nt-fita:focus-within .nt-fita__tab,
.nt-fita[data-open] .nt-fita__tab { height: calc(var(--nt-fita-h) + 8px); } /* a fita "desce" 8px ao abrir */
/* Ritual de entrada: a fita cai do topo uma vez por sessão (JS adiciona .is-in). */
.nt-fita[data-ritual] { transform: translateY(-110%); }
.nt-fita[data-ritual].is-in { transform: none; transition: transform var(--nt-dur) var(--nt-ease); }
/* ==========================================================================
2. O ÍNDICE — as cinco marcas atrás da Fita (só com JS). É o mecanismo de
descoberta cruzada. Regra de acendimento: a marca da página fica acesa;
as outras, apagadas. No site do grupo, todas acesas.
========================================================================== */
.nt-index {
position: absolute;
top: calc(var(--nt-fita-h) + 10px);
right: 0;
min-width: 236px;
padding: 14px 16px 12px;
background: var(--nt-ink);
color: var(--nt-cream);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity .25s var(--nt-ease), transform .25s var(--nt-ease), visibility 0s .25s;
}
.nt-fita:hover .nt-index,
.nt-fita:focus-within .nt-index,
.nt-fita[data-open] .nt-index { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nt-index__line { margin: 0 0 10px; font-size: 12px; opacity: .72; white-space: nowrap; }
.nt-index a {
display: grid;
grid-template-columns: 14px 1fr auto;
align-items: center;
gap: 10px;
padding: 6px 0;
color: inherit;
text-decoration: none;
opacity: .45; /* apagada */
white-space: nowrap;
}
.nt-index a:hover, .nt-index a:focus-visible, .nt-index a[aria-current] { opacity: 1; }
.nt-index a small { font-size: 10px; opacity: .8; }
.nt-index a::before { /* o glifo da marca (id do selo), 14px, na cor do texto */
content: "";
width: 14px; height: 14px;
background: currentColor;
-webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat;
}
.nt-index a[data-nt="nyb"] { --g: var(--nt-g-nyb); }
.nt-index a[data-nt="nice"] { --g: var(--nt-g-nice); }
.nt-index a[data-nt="nocci"] { --g: var(--nt-g-nocci); }
.nt-index a[data-nt="nonap"] { --g: var(--nt-g-nonap); }
[data-brand="ngroup"] .nt-index a { opacity: 1; }
/* ==========================================================================
3. A FRASE — "Um coletivo. Ⓝ possibilidades." Última linha de toda página.
Sem markup: body::after entra em fluxo DEPOIS do footer da marca, e herda
fonte, cor e fundo da marca (é a marca dizendo a frase do grupo).
========================================================================== */
body::after {
content: "Um coletivo. " var(--nt-mark-inline) " possibilidades.";
display: block;
padding: var(--nt-line-pad) var(--nt-fita-inset);
font-size: var(--nt-line-size);
line-height: 1;
letter-spacing: .01em;
color: inherit;
}
/* Se a marca preferir a Frase DENTRO do footer dela:
Um coletivo.
possibilidades.
— e o body::after some. O N herda a cor do texto. */
body:has(.nt-line)::after { display: none; }
.nt-line { font-size: var(--nt-line-size); line-height: 1; letter-spacing: .01em; }
.nt-n {
display: inline-block; width: 1em; height: 1em; vertical-align: -.1em;
background: currentColor;
-webkit-mask: var(--nt-mark) center / contain no-repeat; mask: var(--nt-mark) center / contain no-repeat;
}
/* ==========================================================================
4. Acessibilidade e degradação
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.nt-fita[data-ritual] { transform: none; transition: none; }
.nt-fita__tab, .nt-index { transition: none; }
}
@media (max-width: 600px) {
:root { --nt-fita-inset: 16px; } /* 390px: mesma fita, mesmo canto, 16px da borda */
.nt-index { min-width: 212px; }
}
@media print {
body::before, .nt-fita { position: absolute; } /* a fita imprime no topo da primeira página */
}