/* =========================================================================== checklist/assets/tokens.css Tokens de marca do PORTAL INTERNO Construteck — BrandBook v2.2 (28/08/2026) --------------------------------------------------------------------------- FONTE ÚNICA de cor, fonte, raio e sombra do portal. Os valores aqui são CÓPIA VERBATIM do :root de /assets/css/style.css (site público). Portal e site leem a mesma régua — se divergirem, é bug. Trocou a marca? Muda AQUI e só aqui. Nenhuma página do portal deve ter cor escrita à mão (#E9651D solto em style inline é erro, não atalho). As fontes NÃO são duplicadas: apontam para /assets/fonts/, onde o site já as serve. Mesmo domínio, um arquivo só, um cache só. POR QUE ESTA PASTA E NÃO includes/: o .htaccess do checklist bloqueia includes/ com 403 — e deve bloquear, é onde fica o db.php com a senha do banco. Arquivo servido ao navegador não mora lá. =========================================================================== */ /* ── FONTES — Agrandir, 5 pesos oficiais ─────────────────────────────────── */ @font-face { font-family:'Agrandir Tight'; src:url('/assets/fonts/Agrandir-Tight.woff2') format('woff2'); font-display:swap; } @font-face { font-family:'Agrandir Narrow'; src:url('/assets/fonts/Agrandir-Narrow.woff2') format('woff2'); font-display:swap; } @font-face { font-family:'Agrandir Text Bold'; src:url('/assets/fonts/Agrandir-TextBold.woff2') format('woff2'); font-weight:700; font-display:swap; } @font-face { font-family:'Agrandir Regular'; src:url('/assets/fonts/Agrandir-Regular.woff2') format('woff2'); font-display:swap; } @font-face { font-family:'Agrandir Thin Italic'; src:url('/assets/fonts/Agrandir-ThinItalic.woff2') format('woff2'); font-style:italic; font-display:swap; } :root { /* ── PALETA OFICIAL — BrandBook v2.2 ───────────────────────────────── Substitui a paleta anterior do portal: #F57C20 -> #E9651D (laranja) #4A4A4A -> #706F6F (cinza de texto) Regra do manual: "laranja é DETALHE" — linha de 1 a 3px, ícone, bloco de apoio. Nunca fundo de peça inteira, nunca em título e subtítulo ao mesmo tempo. */ --laranja: #E9651D; --laranja-dark: #C9531A; /* so para hover; nao e cor de marca */ --laranja-soft: rgba(233, 101, 29, 0.08); --cinza: #706F6F; /* toda composicao de texto */ --cinza-claro: #9D9D9C; /* sub e titulos secundarios */ --cinza-bg: #F5F5F5; --cinza-borda: #C6C6C6; /* elemento grafico, linhas */ --branco: #FFFFFF; --preto: #706F6F; /* o tom mais escuro da marca */ --preto-fundo: #706F6F; /* nada mais escuro que isto */ /* sombras zeradas — o manual nao admite sombra projetada */ --shadow-sm: none; --shadow-md: none; --shadow-lg: none; /* tipografia */ --f-titulo: 'Agrandir Text Bold', Arial, sans-serif; --f-corpo: 'Agrandir Narrow', Arial, sans-serif; --f-curto: 'Agrandir Tight', Arial, sans-serif; --f-sub: 'Agrandir Regular', Arial, sans-serif; --transition: 0.3s ease; --container: 1280px; /* ── GEOMETRIA — BrandBook §07 ─────────────────────────────────────── "Toda peça é construída em linha reta. Única exceção: o círculo perfeito, e só onde o objeto representado é circular." Canto arredondado pertence à fase de desenvolvimento do conceito. Use --raio em tudo; --raio-circulo só em avatar e badge redondo. */ --raio: 0; --raio-circulo: 50%; /* ── COR DE FONTE EM DOCUMENTO — BrandBook §03 ─────────────────────── Documento (ofício, contrato, notificação, POP, declaração, relatório, memorial) usa #1A1A1A, NÃO #706F6F: o cinza da paleta some impresso por cima da marca d'água. Não usar em tela — é token de impressão. */ --preto-documento: #1A1A1A; } /* ── BASE DO PORTAL ──────────────────────────────────────────────────────── */ body { font-family: var(--f-corpo); color: var(--cinza); background: var(--cinza-bg); } /* Título usa Text Bold; sub/segundo título usa Regular (BrandBook §04) */ h1, h2, h3, h4 { font-family: var(--f-titulo); color: var(--cinza); } /* ── LARANJA COMO DETALHE — utilitários ────────────────────────────────── Classes prontas para o uso que o manual autoriza: fio, bloco de apoio, ícone. Preferir estas a escrever a cor à mão na página. */ .ct-fio { border-top: 2px solid var(--laranja); } .ct-fio-lateral{ border-left: 3px solid var(--laranja); } .ct-apoio { background: var(--laranja-soft); border-left: 3px solid var(--laranja); } .ct-destaque { color: var(--laranja); } .ct-bloco { background: var(--cinza-borda); } /* bloco de apoio cinza claro */ /* ── SISTEMA DE ÍCONES — BrandBook §10 ─────────────────────────────────── 27 SVGs (25 oficiais + sino e cadeado). Inseridos inline pelo helper includes/icones.php, que já aplica a classe .ct-ico. Os arquivos usam stroke="currentColor": a cor NÃO está no SVG, vem do `color` do elemento pai. Por isso nunca pinte o ícone com fill/stroke direto — mude o `color` do container e o ícone acompanha. Malha 48x48, traço 2,4px, junção em esquadro, sempre contorno. */ .ct-ico { display:block; flex-shrink:0; color:inherit } /* laranja no ícone é DETALHE (§03): use em hover ou estado, não por padrão */ .ct-ico-destaque { color:var(--laranja) } /* ═══════════════════════════════════════════════════════════════════════ PADRÃO D — COMPOSIÇÃO DO PORTAL Aprovado pelo Bruno em 04/09/2026 como padrão de todas as telas. --------------------------------------------------------------------- O diagnóstico que gerou este bloco: a primeira aplicação do BrandBook ficou correta e VAZIA. Motivo — o manual foi lido raso: o #C6C6C6 virou só fio de 1px, quando a §03 o define como "elementos gráficos, BLOCOS DE APOIO, linhas de 1 A 3px". Sem sombra, sem canto e sem as 5 cores antigas, não sobrou massa nenhuma na tela. As quatro alavancas deste bloco, todas com artigo no manual: · bloco laranja com palavra dentro → o dispositivo do PRÓPRIO logo (CONSTRU + bloco TECK). §03 "bloco de apoio a texto". · linha de 3px para hierarquia → §03 "linhas de 1 a 3px" · massa em cinza → §03 "blocos de apoio" · dado grande, laranja só na unidade→ §11 peça-padrão ═══════════════════════════════════════════════════════════════════════ */ /* ── GRADE §06 — derivada do bloco laranja TECK ────────────────────────── O bloco mede 151x71 num logo de 507x120. Com o logo a 30px na topbar: altura do bloco = 18px · largura = 38px. Daí saem os três recuos que a §06 define. Use estas variáveis em vez de rem solto: é o que dá o mesmo ritmo em todas as telas. */ :root { --mod: 18px; /* 1x altura do bloco — recuo por texto */ --lateral: 38px; /* largura do bloco — recuo lateral */ --cabecalho: 36px; /* 2x altura — recuo cabeçalho/rodapé*/ } /* ── O DISPOSITIVO DA MARCA — palavra em bloco laranja ─────────────────── É o logotipo virando composição. Área pequena, presença grande. Não engorde: se o bloco crescer até virar faixa, deixa de ser detalhe e passa a contrariar a §03 (e a decisão de fundo é do Lucas, §13). */ .ct-teck { background: var(--laranja); color: var(--branco); font-family: var(--f-curto); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; padding: 5px 11px 4px; display: inline-block; } /* rótulo de seção: bloco + fio que atravessa até a borda */ .ct-secrot { display: flex; align-items: center; margin-bottom: 16px } .ct-secrot > i { flex: 1; height: 3px; background: var(--laranja); opacity: .22 } /* ── SIDEBAR MACIÇA — a massa que sustenta a tela ──────────────────────── Cinza escuro, altura inteira. O item ativo é UM bloco laranja, não a barra toda. O pé é o lugar da silhueta de prédios (§05), que sangra. */ .ct-sb { background: var(--cinza); color: var(--branco); flex-shrink: 0; display: flex; flex-direction: column } /* Perfil EMPILHADO (Bruno, 04/09). Ao lado do avatar sobravam 80px para o texto — ate "Bruno Silva" quebrava e "Lucas Henrique de Souza" era cortado. Empilhado o nome usa os 140px inteiros. */ .ct-sb-id { padding: var(--cabecalho) var(--lateral) var(--mod); display: flex; flex-direction: column; align-items: flex-start; gap: 11px } .ct-sb-av { width: 52px; height: 52px; border-radius: var(--raio-circulo); background: var(--laranja); color: var(--branco); display: grid; place-items: center; font-family: var(--f-titulo); font-size: 20px; overflow: hidden; flex-shrink: 0 } .ct-sb-nm { font-family: var(--f-titulo); font-size: 17px; line-height: 1.15; word-break: break-word } .ct-sb-cg { font-size: 11px; opacity: .55; font-family: var(--f-curto); margin-top: 3px } .ct-sb-av img { width: 100%; height: 100%; object-fit: cover } .ct-sb nav { border-top: 1px solid rgba(255,255,255,.16); padding-top: var(--mod) } .ct-sb a { display: block; padding: 10px var(--lateral); font-size: 12.5px; color: rgba(255,255,255,.7); text-decoration: none; border-left: 3px solid transparent; cursor: pointer } .ct-sb a:hover { color: var(--branco); border-left-color: rgba(255,255,255,.3) } .ct-sb a.on { background: var(--laranja); color: var(--branco); font-family: var(--f-curto); border-left-color: var(--laranja) } /* pé da sidebar: sobra para assinatura/versão. A silhueta NÃO vem aqui — ver .ct-silhueta abaixo e o porquê. */ .ct-sb-pe { margin-top: auto; border-top: 1px solid rgba(255,255,255,.12); padding: var(--mod) var(--lateral); font-family: var(--f-curto); font-size: 9.5px; letter-spacing: .5px; color: rgba(255,255,255,.42) } /* ── DADO GRANDE — §11: laranja só na unidade e no fio ─────────────────── O número é o herói em Text Bold cinza; o laranja aponta para ele (a unidade, o denominador, a barra). Nunca o número inteiro em laranja. */ .ct-painel { background: var(--branco); border: 1px solid var(--cinza-borda); padding: var(--mod); display: flex; align-items: flex-end; gap: var(--cabecalho); flex-wrap: wrap } .ct-kpi-n { font-family: var(--f-titulo); font-size: 38px; line-height: .9; color: var(--cinza) } .ct-kpi-n em { font-style: normal; color: var(--laranja) } .ct-kpi-l { font-family: var(--f-curto); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--cinza-claro); margin-top: 6px } .ct-barra { flex: 1; min-width: 160px } .ct-barra .tr { height: 8px; background: var(--cinza-borda) } .ct-barra .tr i { display: block; height: 100%; background: var(--laranja) } .ct-barra .lg { display: flex; justify-content: space-between; gap: 12px; font-size: 10.5px; color: var(--cinza-claro); margin-top: 7px; font-family: var(--f-curto) } /* ── LINHA DE ACOMPANHAMENTO ───────────────────────────────────────────── Fio lateral de 3px: LARANJA quando o item pede ação sua, cinza quando está encerrado. É o que substitui as 5 cores de status antigas. */ .ct-linha { background: var(--branco); border: 1px solid var(--cinza-borda); border-left: 3px solid var(--cinza-borda); padding: 11px var(--mod); display: flex; align-items: center; gap: 14px; font-size: 12.5px; margin-bottom: 7px } .ct-linha.age { border-left-color: var(--laranja) } .ct-linha > b { font-family: var(--f-titulo); font-weight: normal; flex: 1; min-width: 0 } /* ── CHIP DE STATUS — escala aprovada em 03/09 ─────────────────────────── laranja cheio = exige ação SUA laranja contorno = esperando cinza cheio = encerrado cinza contorno = andando/vazio */ .ct-chip { font-family: var(--f-curto); font-size: 10.5px; padding: 3px 9px; border: 1px solid var(--cinza-borda); color: var(--cinza-claro); background: var(--branco); white-space: nowrap; border-radius: var(--raio) } .ct-chip.esperando { border-color: var(--laranja); color: var(--laranja) } .ct-chip.acao { background: var(--laranja); border-color: var(--laranja); color: var(--branco) } .ct-chip.fim { background: var(--cinza); border-color: var(--cinza); color: var(--branco) } /* ── SILHUETA DE PRÉDIOS §05 ───────────────────────────────────────────── POSIÇÃO NÃO É ESCOLHA — o manual crava: "colada na página, À DIREITA e no RODAPÉ, sangrando pela borda direita. O desenho sobe da esquerda para a direita: ancorado à esquerda fica boiando no meio da folha e atravessa o texto." Confirmado no arquivo (04/09): o perfil de altura vai de 33% na ponta esquerda a 100% na direita, monotônico. A orientação do PNG já está correta — nunca espelhar. Por isso ela NÃO vai no pé da sidebar: sidebar é o lado esquerdo, que é exatamente o que a §05 proíbe. Vai no rodapé da área de CONTEÚDO. Qual arquivo: 'cinza' sobre fundo claro (conteúdo), 'bco' sobre fundo escuro. A versão 'color' é laranja e faz a silhueta virar campo laranja largo — contraria a §03; reservada a peça, não a tela. pointer-events:none — é textura, nunca intercepta clique. */ .ct-silhueta { margin-top: var(--cabecalho); margin-right: calc(var(--lateral) * -1); /* sangra a borda direita */ display: flex; justify-content: flex-end; overflow: hidden; pointer-events: none; user-select: none; } .ct-silhueta img { display: block; height: 96px; width: auto; opacity: .5 } /* em tela estreita a silhueta come espaço útil sem ganhar leitura */ @media (max-width: 700px) { .ct-silhueta { display: none } } /* ── FAIXA SANGRANDO — massa em cinza para quebrar tela vazia ─────────── Alterna com o branco e dá ritmo vertical. Cinza, nunca laranja: laranja em faixa larga contraria a §03. */ .ct-faixa { padding: var(--cabecalho) var(--lateral) } .ct-faixa.apoio { background: var(--cinza-borda) } .ct-faixa.fundo { background: var(--cinza-bg) } /* ── IMPRESSÃO ─────────────────────────────────────────────────────────── Tela é uma coisa, papel é outra: no papel o texto vai para #1A1A1A. */ @media print { body, h1, h2, h3, h4, p, td, th, li { color: var(--preto-documento) !important; } body { background: var(--branco) !important; } }