/* Estados de botão, para o produto inteiro. * * POR QUE ESTA FOLHA EXISTE. Em 04/09/2026 o produto tinha 286 botões escritos à * mão em 59 telas, e só 11 tinham qualquer estado visual. A ficha da empresa * tinha 17 botões e nenhum: passar o mouse não mudava nada, clicar não mudava * nada, e navegar por teclado não mostrava onde o foco estava. * * Estado escrito botão a botão são 286 lugares para divergir. Aqui é um. * * POR QUE NÃO NO DESIGN SYSTEM. `_ds/cenco-ds-/` é artefato exportado, e * regra nossa escrita lá se perde na próxima exportação. Esta folha é nossa, e * carrega DEPOIS da dele -- o que vier de lá continua valendo, e isto acrescenta. * * POR QUE ESTAS TRÊS PROPRIEDADES, e não outras. Os botões trazem `background`, * `color`, `border` e `cursor` no atributo `style`, e style inline vence folha * para a MESMA propriedade. `box-shadow`, `outline` e `transform` não são usados * por nenhum deles -- conferido em 04/09 --, então a regra pega em todos sem * brigar com nenhum. */ /* A SOMBRA INTERNA, e não `filter: brightness`. * * `brightness` escurece o que tem cor e não faz nada no que é transparente -- * e metade dos botões daqui é de contorno, com fundo transparente. A sombra * interna pinta por cima do fundo seja ele qual for: escurece o preenchido e * tinge o vazado, com o mesmo valor. */ button:not(:disabled):not([aria-disabled="true"]):hover, [role="button"]:not([aria-disabled="true"]):hover { box-shadow: inset 0 0 0 999px rgba(17, 17, 17, 0.06); } /* Pressionado. Um pixel, e não mais: o gesto precisa responder, não saltar. */ button:not(:disabled):not([aria-disabled="true"]):active, [role="button"]:not([aria-disabled="true"]):active { box-shadow: inset 0 0 0 999px rgba(17, 17, 17, 0.12); transform: translateY(1px); } /* O FOCO DE TECLADO, que não existia em lugar nenhum. * * `:focus-visible` e não `:focus`: o anel aparece para quem navega por teclado e * não para quem clica com o mouse, que é a diferença entre acessibilidade e * ruído. Sem ele, quem depende de teclado não sabe onde está. */ button:focus-visible, [role="button"]:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--fas-ink, #111); outline-offset: 2px; } /* A transição existe para o estado ser percebido como resposta, e não como * piscada. `motion.css` do design system define a duração; o valor aqui é a * reserva para quando ele não estiver carregado. */ button, [role="button"] { transition: box-shadow var(--fas-motion-fast, 120ms) ease, transform var(--fas-motion-fast, 120ms) ease; } /* QUEM PEDIU PARA NÃO SE MEXER. Respeitar isto não é enfeite: movimento * involuntário na tela é sintoma para parte das pessoas, e o sistema operacional * já carrega a resposta delas. */ @media (prefers-reduced-motion: reduce) { button, [role="button"] { transition: none; } button:not(:disabled):active, [role="button"]:not([aria-disabled="true"]):active { transform: none; } } /* --------------------------------------------------------------------------- * SELO DE ESTADO — a pílula amarela clara * --------------------------------------------------------------------------- * O padrão nasceu em `Trilhas.dc.html`, no selo "Iniciada", e vivia lá como uma * linha escrita à mão: `background: rgba(255, 217, 91, 0.35)`, um literal num * atributo `style`, num arquivo só. Em 04/09/2026 a Área da Empresa precisou do * mesmo selo para o estado do colaborador, e o Igor pediu o padrão do Figma -- * "já construímos antes. Precisamos levar esse padrão ao design system". * * Copiar a linha para a segunda tela faria duas cópias do mesmo valor, e a * terceira sairia diferente. Aqui é um. * * O AMARELO É O DA MARCA, a 35% — o mesmo `#ffd95b` de `--fas-primary`, e não * um amarelo novo. `color-mix` com o token faria isso sozinho, mas o valor * literal é o que a tela do Figma mostra e o que `Trilhas` já usava: mudar o * cálculo junto com o lugar tornaria impossível dizer se algo mudou de cor. * * CLARO, E NÃO CHEIO. Selo diz um estado; ele acompanha o texto em vez de * competir com ele. O amarelo cheio (`--fas-primary`) continua sendo do que * ESCOLHE -- filtro ligado, aba corrente --, e é a diferença entre "isto está * assim" e "você marcou isto". */ /* A SUPERFÍCIE QUE NÃO INVERTE, e a tinta sobre ela. * * O rodapé é uma faixa escura em qualquer tema. Ele pintava o fundo com * `var(--fas-ink)`, que é a TINTA -- funcionava só enquanto a tinta fosse * escura. No tema escuro, `--fas-ink` vira `#f2f2f2`: o fundo inverteria para * quase branco e os onze links em branco translúcido sumiriam. * * O mapa que o design system mandou levava esses brancos para `--fas-veil-*`, * que pioraria: `--fas-veil-80` no escuro é `rgba(255,255,255,0.20)`. Véu é * superfície translúcida sobre o fundo da página; aqui o que se quer é TINTA * sobre um fundo que se sabe escuro. São coisas diferentes. * * ESTES TOKENS NÃO TÊM VERSÃO ESCURA de propósito. É isso que os torna * estáveis: a faixa é escura nos dois temas, e o `turbobee-logo-dark.svg` * continua correto sobre ela. Se o design system um dia trouxer um token de * superfície invertida, estes saem e aquele entra. * * Os valores são exatamente os que estavam escritos à mão no rodapé, então * nada muda de pixel hoje. */ :root { --tb-selo-fundo: rgba(255, 217, 91, 0.35); --tb-selo-borda: rgba(255, 217, 91, 0.55); --tb-superficie-escura: #111111; --tb-sobre-escuro: #ffffff; --tb-sobre-escuro-forte: rgba(255, 255, 255, 0.75); --tb-sobre-escuro-medio: rgba(255, 255, 255, 0.6); --tb-sobre-escuro-fraco: rgba(255, 255, 255, 0.45); --tb-sobre-escuro-rotulo: rgba(255, 255, 255, 0.4); --tb-sobre-escuro-linha: rgba(255, 255, 255, 0.12); } .selo { display: inline-flex; align-items: center; padding: 3px 11px; background: var(--tb-selo-fundo); border: 1px solid var(--tb-selo-borda); border-radius: 9999px; color: var(--fas-ink); white-space: nowrap; } /* O estado que NÃO está de pé — convite vencido, trilha fora do catálogo. * Amarelo diz "está valendo", e vencido não está: sai em contorno neutro, com a * mesma forma, para a linha continuar lendo como uma família só. */ .selo--apagado { background: transparent; border-color: var(--fas-edge); color: var(--fas-neutral-600); } /* TINTA SOBRE O AMARELO DA MARCA, em qualquer tema. * * Igor, em 06/09/2026, olhando o backoffice no escuro: "percebi um problema de * contraste no botão amarelo. pode estar se repetindo." Estava: sondando * produção, 47 de 57 elementos amarelos com texto davam razão 1.22 -- tinta * `rgb(242,242,242)` sobre `#ffd95b`, onde o mínimo legível é 4.5. * * A CAUSA ERA HERANÇA, e por isso não aparecia lendo o código: 110 dos 121 * elementos amarelos não declaravam cor. No claro herdavam tinta escura e * ficava certo; no escuro `--fas-ink` virou `#f2f2f2` e a herança passou a * trazer tinta clara sobre amarelo. * * POR QUE UMA REGRA, E NÃO 121 EDIÇÕES. A metade dos casos pinta o amarelo por * ligação (`background: {{ c.fill }}`), então não há literal no arquivo para * procurar. E botão novo amarelo nasceria com o mesmo defeito. Aqui é um lugar. * * O SELETOR CASA O FUNDO, E NÃO A BORDA: `background: var(--fas-primary)` * inteiro. Chip de borda amarela e fundo transparente não é alcançado, e a * tinta dele continua acompanhando o tema, que é o certo. * * Folha perde para `style` inline na MESMA propriedade, mas ganha da herança -- * e herança é o que estes elementos tinham. Onde a tinta estava declarada * inline, ela foi corrigida no arquivo. */ /* E O QUE ESTÁ DENTRO DELE TAMBÉM, quando declara a própria cor. * * Igor, em 07/09/2026: "no darkmode, o número da pílula ficou sem contraste." * Os chips de área e cargo trazem a contagem de gente num `` com * `color: var(--fas-neutral-600)` escrito no `style` — e a regra de baixo não * o alcançava, porque ela corrige a HERANÇA e ali a cor está declarada. * * No claro `--fas-neutral-600` é escuro e o número lia sobre o amarelo; no * escuro ele vira claro, e o número sumiu no chip aceso. * * `inherit` E DEPOIS `opacity`, e não uma terceira cor: o número é secundário * ao rótulo, e era isso que o cinza dizia. Herdar a tinta e apagá-la um pouco * diz a mesma coisa sem depender de qual é o fundo. * * SÃO NOVE `` EM DUAS TELAS, e a regra existe para não serem nove * edições — nem dez, quando alguém acrescentar o próximo chip. */ [style*="background: var(--fas-primary)"] span[style*="color"], [style*="background: var(--fas-accent)"] span[style*="color"], [style*="background-color: var(--fas-primary)"] span[style*="color"], [style*="background-color: var(--fas-accent)"] span[style*="color"] { color: inherit !important; opacity: 0.62; } [style*="background: var(--fas-primary)"], [style*="background: var(--fas-accent)"], [style*="background-color: var(--fas-primary)"], [style*="background-color: var(--fas-accent)"] { color: var(--fas-text-on-accent); } /* O LOGO TROCA COM O TEMA. * * Sao dois arquivos, e nao um que se adapta: `turbobee-logo.svg` traz a * palavra em preto, para fundo claro, e `turbobee-logo-dark.svg` em branco, * para fundo escuro. O simbolo hexagonal e igual nos dois. * * Cada lugar que mostra o logo traz OS DOIS, e esta folha esconde um. Trocar * `src` por JavaScript pediria script em sete telas e piscaria o logo errado * ate ele rodar. * * `!important` PORQUE OS DOIS TRAZEM `display: block` no proprio `style`, e * inline vence folha. E a mesma razao pela qual esta folha existe. Sem ele, a * regra nao teria efeito nenhum -- e o defeito seria invisivel no claro, que e * onde quase todo mundo olha. * * O RODAPE NAO ENTRA: ele e escuro nos dois temas, entao usa o logo branco * sempre, e trocar ali seria erro. */ [data-logo-tema="escuro"] { display: none !important; } [data-theme="dark"] [data-logo-tema="claro"] { display: none !important; } [data-theme="dark"] [data-logo-tema="escuro"] { display: block !important; } /* A MALHA DE PONTOS NO ESCURO. `malha-pontos.png` e branca e totalmente opaca * (brilho medio 252, nenhum pixel transparente), desenhada a 30% sobre o topo * das telas. No claro ela some no fundo claro; no escuro ela pintava 30% de * branco por cima do fundo escuro, e o topo inteiro ficava cinza claro (Igor, * 25/09/2026). Invertida, a base vira preta e os pontos viram claros; misturada * por "screen", o preto nao pinta nada e sobram so os pontos. * O seletor pega a imagem pelo estilo em linha porque ela esta assim em 15 * telas, e esta folha e a que todas carregam. */ [data-theme="dark"] [style*="malha-pontos"] { filter: invert(1); mix-blend-mode: screen; } /* O CABECALHO NO ESCURO. Ele pintava `--fas-veil-80`, que no claro e branco a * 80% e no escuro e branco a 20% -- sobre o fundo escuro, isso da uma faixa * cinza clara em cima de toda tela (Igor, 25/09/2026: "o header esta muito * claro no modo escuro"). Veu e superficie translucida CLARA; o cabecalho quer * o fundo da pagina, translucido, nos dois temas. No claro nada muda. */ :root { --tb-cabecalho-fundo: var(--fas-veil-80); } [data-theme="dark"] { --tb-cabecalho-fundo: rgba(22, 22, 22, 0.85); } /* DENTRO DE UMA FAIXA DA MARCA, NADA ACOMPANHA O TEMA. * * A faixa do hero e a faixa CTA da Home tem por fundo `hero-bg.jpg`, uma * imagem laranja: ela e a mesma imagem no tema claro e no escuro. Tudo que * esta por cima dela, porem, seguia o tema, e no escuro invertia para tinta * clara sobre laranja claro. Medindo a imagem em 06/09/2026: tinta escura da * 6.83 no ponto mais claro dela, tinta clara nao passa de 2.22 em ponto * nenhum, contra um minimo de 4.5. * * Os textos foram resolvidos na propria tela, com `--fas-text-on-accent`. * OS BOTOES NAO PODEM SER: eles sao o `PillButton` do design system, que vem * do bundle e e regerado pelo CD a cada sincronizacao. Editar la se perde no * proximo export. * * O SELETOR MIRA O `style` INLINE, e nao um `data-pill-variant`. Escrevi a * regra com esse atributo primeiro, e ele NAO EXISTE no DOM: o PillButton * despeja tudo em `style`. A regra teria ido para producao sem agir. Pelo * mesmo motivo, tirei de `HomeHero.dc.html` um `[data-pill-variant="outline"] * :hover` que estava la desde antes e nunca pintou nada -- o hover amarelo * daquele botao nunca existiu. * * Como o DS os distingue, e o que esta sendo mirado: * solido -> `background: var(--fas-ink)` (Acesse as trilhas) * outline -> `background: var(--fas-surface-control)` (Como funciona) * Os dois passam por `--fas-ink`, que inverte. Sobre a faixa, os dois ficam * congelados no desenho que o tema claro ja tinha, que e o que funciona. * * A MARCA E `data-sobre-marca` NA FAIXA, e nao um seletor por id de secao. * Assim a proxima faixa de marca que alguem criar ja nasce certa, e a regra * nao quebra se `#top` ou `#curtos` mudarem de nome. * * `!important` pela razao de sempre nesta folha: o que se combate esta em * `style` inline, e inline vence folha sem ele. */ [data-sobre-marca] a[style*="background: var(--fas-ink)"] { background: var(--fas-text-on-accent) !important; color: var(--tb-sobre-escuro) !important; } [data-sobre-marca] a[style*="background: var(--fas-surface-control)"] { background: rgba(255, 255, 255, 0.5) !important; color: var(--fas-text-on-accent) !important; border-color: rgba(17, 17, 17, 0.25) !important; } [data-sobre-marca] a[style*="background: var(--fas-surface-control)"]:hover { background: var(--fas-primary) !important; } /* --------------------------------------------------------------------------- * O ` do produto pintam o campo com `background: * var(--fas-veil-50)`, que no tema escuro vale `rgba(255,255,255,0.12)`. O * campo FECHADO fica certo, porque esse veu de 12% compoe sobre o fundo escuro * da pagina e da escuro. A LISTA que o navegador abre e outra superficie: ela * compoe sobre branco, entao o mesmo veu vira quase branco -- e a tinta, que e * `--fas-ink` (#f2f2f2 no escuro), some nele. * * Igor viu em 07/09/2026, na lista de cargos: "Sem cargo" invisivel, e so a * linha destacada legivel, salva pelo azul de selecao do sistema. * * `color-scheme: dark` JA ESTAVA CERTO -- o design system o declara em * `[data-theme="dark"]`, e ele esta ativo. Ele nao resolve este caso porque a * cor declarada no elemento vence o esquema do navegador. * * A CORRECAO E DAR SUPERFICIE OPACA AS OPCOES. `--fas-surface` e #ffffff no * claro e #232323 no escuro, entao a mesma regra serve aos dois temas, e o * campo fechado continua com o veu que o desenho pede. */ select option, select optgroup { background-color: var(--fas-surface); color: var(--fas-ink); } /* A LINHA ESCOLHIDA USA O AMARELO DA MARCA, e nao o azul do sistema. * * Igor, em 07/09/2026, vendo a lista de areas aberta: "essa cor de selecao e * estranha a identidade grafica." Era o destaque do sistema operacional, que e * o que aparece quando ninguem diz outra coisa. * * E O AMARELO CHEIO E EXATAMENTE O CERTO AQUI, pela regra que esta escrita mais * acima nesta folha: o amarelo cheio e do que ESCOLHE -- filtro ligado, aba * corrente --, e o selo claro e do que INFORMA. Linha escolhida numa lista e do * primeiro tipo. `--fas-text-on-accent` e a tinta que o amarelo pede, e vale * #111111 nos dois temas. */ select option:checked { background: var(--fas-primary); color: var(--fas-text-on-accent); } /* E O CHEVRON PRECISA DE MARGEM, que a pilula come. * * Os selects tem `border-radius: 9999px` e `padding: 12px 18px`, e a seta fica * encostada na curva. Igor, em 07/09: "nao ha espaco entre o chevron e o fim do * componente." * * `padding-right` NAO RESOLVE, e a primeira tentativa foi essa. No Chromium o * padding empurra o TEXTO; a seta nativa e desenhada pelo widget na * extremidade e ignora o padding. Publiquei 38px e a seta ficou no mesmo pixel * -- e a checagem que escrevi media `padding-right`, isto e, a minha propria * implementacao, entao ficou verde com o defeito na tela. So o Igor viu. * * A SETA PASSA A SER NOSSA. `appearance: none` tira a nativa, e o chevron vem * como imagem de fundo, posicionada em pixels que a gente controla. * * SAO DUAS DECLARACOES porque `var()` nao resolve dentro de um `data:` URI: a * cor do traco tem de estar escrita no SVG, entao ha uma para cada tema. * * `!important` em tudo porque os nove selects trazem `background:` SHORTHAND no * `style` inline, e shorthand zera `background-image`. Sem ele a seta some e o * campo fica sem indicacao nenhuma de que abre. */ select { appearance: none !important; -webkit-appearance: none !important; padding-right: 42px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 18px center !important; } [data-theme="dark"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f2f2f2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* O SELECT DESLIGADO continua legivel como desligado, e nao como sumido: sem * esta linha ele herdaria a seta cheia e pareceria clicavel. */ select:disabled { opacity: 0.55; } /* --------------------------------------------------------------------------- * VER A SENHA QUE SE ESTA DIGITANDO * --------------------------------------------------------------------------- * Igor pediu em 07/09/2026, apontando o canto direito do campo de senha da tela * de entrada. Senha digitada as cegas e erro de digitacao que so aparece como * "senha incorreta", e quem esta num teclado de celular erra mais. * * `mask-image` E NAO `background-image`, e a diferenca importa: com mascara o * desenho e pintado por `background-color`, entao ele acompanha o tema com UMA * regra. Com imagem de fundo seriam duas, uma por tema, como foi preciso fazer * no chevron do `