/* ============================================================================= SYLISION · SITE INSTITUCIONAL — sistema visual ============================================================================= Fonte da verdade: docs/BRIEFING_REDESENHO_2026-08.md. Onde este arquivo e o briefing discordarem, vale o briefing. AS QUATRO REGRAS DELE, NENHUMA OPCIONAL 1. Branco, preto e VERDE MUSGO, com o verde predominando. 2. Verde NUNCA e cor de letra sobre claro: #9FB088 sobre #FAFAF7 da 1,29:1, e foi o proprio fundador quem levantou. Verde e CAMPO, MASSA, FORMA; o texto em cima dele e o preto da marca (13,6:1). 3. A paleta vai virar post e metade daquele feed e escuro: tudo e token, nenhum componente usa hex, e nenhum componente sabe em que tema esta. 4. Muita animacao com POUCOS elementos: um protagonista por momento do scroll. O verde morreu aqui: com a REGUA DO PISO na tela a POSICAO ja diz "passou", e dois sistemas de "passou" e um demais. #00E599 segue vivo na ferramenta. Hierarquia vem de TAMANHO E ESPACO: toda vez que este arquivo ficou mais colorido, ficou pior. ============================================================================= */ /* ------------------------------------------------------------------ fontes Proibidos pelo briefing: Inter, Roboto, Space Grotesk. Archivo e IBM Plex sao OFL e moram em app/web/fontes/ (o que tambem resolve o CSP da previa). Nao uso o peso 600 do Plex Sans: os arquivos 400 e 600 do repositorio sao byte a byte identicos, entao o navegador sintetiza. Peso forte e Archivo, variavel de verdade. */ :root { --display: Archivo, "Archivo", system-ui, sans-serif; /* titulo, numero grande */ --corpo: "IBM Plex Sans", system-ui, sans-serif; /* leitura */ --dado: "IBM Plex Mono", ui-monospace, monospace; /* etiqueta, numero, conta */ /* ---------------------------------------------------------------- cor */ --tinta: #0b0b0c; /* a materia. preto com vies quente */ --tinta-2: #1c1c1e; /* superficie escura elevada */ --papel: #fafaf7; /* papel, nao branco de navegador */ --papel-2: #1c1c1e; /* superficie elevada. escuro, como o resto do site */ --verde: #acc28e; /* CAMPO E MASSA. nunca letra sobre claro */ --verde-2: #cddcbe; /* campo amplo, onde o saturado cansaria */ --cinza: #6e6e6b; /* 5,4:1 sobre --papel */ --cinza-2: #a3a29c; /* SO decorativo: linha, borda, nunca texto corrido */ --sobre-verde: var(--tinta); /* 10,2:1 (AAA). o unico texto que vai sobre verde. Era 8,47:1 ate 18/08/2026, quando o verde ficou mais forte a pedido do fundador ("deixa um verde um pouco mais forte, musgo mais claro, nao clarao, porque ele esta muito apagado ali com o preto"). Mesmo matiz de musgo (85 graus), saturacao de 20% pra 30%, luz de 61% pra 66%. O numero foi RECALCULADO junto com a cor: contraste anotado em comentario que ninguem refaz vira mentira na primeira troca de tinta. */ --sobre-tinta: var(--papel); /* tokens de superficie. O SITE E ESCURO, E SO ESCURO (ordem do fundador, 15/08/2026: "deixe so preto"). Ate aqui estes tokens nasciam CLAROS e o escuro vinha por cima, por media query ou pelo alternador -- o que significava que o visitante de sistema claro via o site branco, e o alternador podia deixa-lo branco pra sempre no localStorage. Agora o escuro e o valor de base, nao a excecao: nao existe caminho, nem de preferencia do sistema nem de memoria do navegador, que devolva a versao clara. */ --fundo: var(--tinta); --texto: var(--papel); --texto-fraco: #a8a7a1; /* 7,2:1 sobre --tinta */ --linha: rgba(250, 250, 247, .14); --linha-forte: rgba(250, 250, 247, .3); /* ------------------------------------------------------------ O ACENTO Acento nao e "verde": e a cor que CONTRASTA COM O CHAO. No papel e no preto ele e verde; na secao verde ele e PRETO, senao o tracinho da etiqueta, o fio do grifo, o marcador da lista e o botao ficariam verde sobre verde -- que e a definicao de nao ter acento. O chao troca DOIS valores e o componente inteiro obedece. */ --acento: var(--verde); --sobre-acento: var(--sobre-verde); /* --------------------------------------------------------- O CONTRASTE O SEGUNDO botao cheio do site, o que NAO e verde: massa da cor OPOSTA ao chao. Ele era "preto, com papel por cima" fixo, e isso estava publicado como BOTAO INVISIVEL em duas telas de verdade, as duas so no tema escuro, as duas medidas em 1:1 (#0b0b0c sobre #0b0b0c): · o CTA "Testar 7 dias" do cabecalho, nas CINCO paginas; · "Entrar no radar" em index.html#c-candidato, que ninguem tinha visto. A home consertou o dela sozinha, so o do cabecalho e so com verde (14 linhas em index.html, tres regras de tema em `.topo-dir .gota--tinta`). O canone e este par de token, e nao aquele remendo, por dois motivos: com verde o botao TROCA DE IDENTIDADE conforme o tema, enquanto o resto da pagina apenas inverte; e no escuro ele ficaria da mesma cor do sublinhado da aba ativa, a 77px de distancia, deixando a barra sem hierarquia. As 14 linhas da home podem sair -- o conserto delas vale so pra uma das duas telas. PARA QUEM PINTA UM CHAO PROPRIO: quem declara --texto/--texto-fraco tem que declarar tambem este par, senao o botao chega com o contraste do chao errado. E o caso de `.plan-card--teste` em empresas.html, que e verde por conta propria e precisa de duas linhas: --contraste: var(--tinta); --sobre-contraste: var(--papel); */ /* Invertidos junto com a superficie: no site escuro o elemento de contraste maximo e o CLARO. Sem isto o botao primario nasceria preto sobre preto. */ --contraste: var(--papel); --sobre-contraste: var(--tinta); /* ------------------------------------------------------------ tipo Sete degraus em clamp(), pra escalar sem media query. O teto por ALTURA de janela mora no .heroi, em secoes.css. */ --t-rot: .6875rem; /* 11px etiqueta, mono, maiuscula */ --t-dado: .8125rem; /* 13px numero, metadado */ --t-corpo: clamp(1rem, .95rem + .3vw, 1.125rem); /* 16 -> 18 */ --t-lead: clamp(1.125rem, 1.05rem + .5vw, 1.375rem); /* 18 -> 22 */ --t-h3: clamp(1.375rem, 1.2rem + .9vw, 1.875rem); /* 22 -> 30 */ --t-h2: clamp(2rem, 1.5rem + 2.6vw, 3.75rem); /* 32 -> 60 */ --t-h1: clamp(2.75rem, 1.6rem + 6vw, 7.25rem); /* 44 -> 116 */ /* ---------------------------------------------------- espaco e forma */ --e1: .25rem; --e2: .5rem; --e3: .75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2.5rem; --e7: 4rem; --e8: 7rem; --col: min(1180px, calc(100% - 2 * var(--e5))); --leitura: 62ch; /* linha de leitura confortavel */ /* RAIO E RACIONADO. Raio arredondado em tudo e um dos tells de site gerado por IA, entao a caixa padrao deste site nao tem raio: tem FIO. Estes valores sao da gota e do campo de texto, e nao servem pra vestir cartao. Nao ha token pra arredondar barra: ponta arredondada RECUA a ponta, e a ponta da barra e a nota. */ --r1: 6px; --r2: 14px; --r3: 28px; --transicao: 480ms cubic-bezier(.22, 1, .36, 1); } /* ============================================ INVERSAO CLARA / ESCURA So os TOKENS mudam. O alternador do visitante tem que VENCER a media query nos dois sentidos, por isso os tres blocos. */ :root[data-theme="dark"] { --fundo: var(--tinta); --texto: var(--papel); --texto-fraco: #a8a7a1; --linha: rgba(250, 250, 247, .14); --linha-forte: rgba(250, 250, 247, .3); --papel-2: var(--tinta-2); --contraste: var(--papel); --sobre-contraste: var(--tinta); } /* ==================================================================== base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--corpo); font-size: var(--t-corpo); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; /* as manchas passam da borda de proposito */ } h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: .95; letter-spacing: -.03em; /* display grande PRECISA de tracking negativo */ text-wrap: balance; margin: 0; } h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); margin-bottom: var(--e5); } h3 { font-size: var(--t-h3); line-height: 1.1; letter-spacing: -.02em; } p { margin: 0; max-width: var(--leitura); } a { color: inherit; } /* ------------------------------------------------- A REGUA DO PISO E UM
As cinco paginas desenham o piso de 85 com
de verdade, e nao com uma div pintada: e a unica linha da pagina que muda o SIGNIFICADO do documento (acima dela a Sylision entrega, abaixo ela se cala), e regra semantica tem que ser estrutura. A regua NAO e verde: verde aqui e a coluna de nota, e piso e limite. `height: auto` COM `min-height`, e nunca `height: 2px`: na horizontal o
nao tem conteudo, entao quem desenha os 2px e o min-height; na VERTICAL (o fio do piso, posicionado com top E bottom) altura fixa manda a especificacao IGNORAR o bottom e o fio vira um ponto de 2x2 no meio do quadro. */ hr { border: 0; margin: 0; height: auto; min-height: 2px; background: var(--texto); } /* foco visivel, um so, nunca removivel: e a unica forma de operar o site por teclado. O ANEL SEGUE O ACENTO -- na secao verde o anel verde sumia no chao, e e la que moram os links de contrato. */ :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: var(--r1); } /* O ANEL DE FOCO NAO GANHA CONTORNO ESCURO. Ele existia pra quando o chao era papel; num site que e sempre preto, sombra preta debaixo do anel verde some no fundo e o foco fica invisivel pra quem navega por teclado. */ /* O ATRIBUTO `hidden` TEM QUE VENCER (13/08/2026). O navegador esconde `[hidden]` com `display:none` na folha DELE, que perde pra qualquer regra de classe na folha do site. Como `.gota` declara `display:inline-flex`, o botao "Acionar a busca ativa" nascia com `hidden` no HTML e aparecia mesmo assim -- e foi o QA de navegador que pegou: dava pra clicar em acionar com a vaga incompleta. O backend recusava, entao nada disparava de verdade, mas a tela oferecia um caminho que nao existe, e isso e pior do que nao oferecer: o cliente clica, nada visivel acontece, e ele conclui que o produto esta quebrado. `!important` aqui e o uso legitimo da palavra: `hidden` e declaracao de ESTADO, e estado nao negocia com estilo. */ [hidden] { display: none !important; } /* ================================================================ estrutura */ .col { width: var(--col); margin-inline: auto; } /* A ESPINHA E UM FIO DE 1px, e a reducao foi de proposito: a estrutura vertical da pagina e a regua do piso, e duas colunas verticais nao somam, dividem. Sobra a unica funcao que ninguem mais faz -- dizer quanto falta de leitura. */ .espinha { position: fixed; left: max(1.5rem, calc((100vw - var(--col)) / 2 - 1.75rem)); top: 0; bottom: 0; width: 1px; z-index: 2; pointer-events: none; background: var(--linha); } .espinha i { display: block; width: 100%; height: 100%; background: var(--verde); transform-origin: top; transform: scaleY(var(--progresso, 0)); } @media (max-width: 900px) { .espinha { display: none; } } section { position: relative; padding-block: var(--e8); /* a barra e sticky e mede 81px medidos em 1366 (48 de botao + 2x16 de padding + 1 de fio), nas cinco paginas e nos dois temas. Sem esta linha, pular por ancora deixa a etiqueta e o comeco do titulo ESCONDIDOS atras dela; com 96 a folga e de 15px. */ scroll-margin-top: 96px; } /* etiqueta de secao: mono, maiuscula, um tracinho. O tracinho e o UNICO marcador de secao do site -- os simbolos ◎ ▤ ➤ ⇄ ▦ que moravam aqui eram o tell de site gerado por IA que o briefing proibe. grid e nao inline-flex: com inline-flex o tracinho contava como item e "…ATE O SEU / CRM" quebrava deixando CRM sozinho na segunda linha (1366). */ .rot { display: grid; grid-template-columns: 2.5rem 1fr; align-items: center; gap: var(--e3); font-family: var(--dado); font-size: var(--t-rot); text-transform: uppercase; letter-spacing: .12em; color: var(--texto-fraco); margin-bottom: var(--e5); max-width: 52ch; } .rot::before { content: ""; height: 2px; background: var(--acento); } .lead { font-size: var(--t-lead); color: var(--texto-fraco); line-height: 1.45; } .lead strong { color: var(--texto); font-weight: 600; } /* mono pequeno em cinza: era UM desenho com DOIS nomes (.micro na pagina, .conta-cab em cima da tabela). Um nome escreve o desenho; o outro so diz o que muda nele. */ .micro, .conta-cab { font-family: var(--dado); font-size: var(--t-rot); color: var(--texto-fraco); letter-spacing: .04em; } .conta-cab { display: block; margin-bottom: var(--e3); text-transform: uppercase; letter-spacing: .12em; } .cinza { color: var(--texto-fraco); } /* ============================================ O GRIFO ============================================================================= EM TEXTO DE LEITURA SAO DOIS FIOS, acima e abaixo, pintados ATRAS da caixa por box-shadow. O campo verde cheio morreu porque a letra nasce em --sobre-acento (preto) e, no heroi, todo pedaco que o campo ainda nao tinha alcancado era preto sobre preto. Com dois fios nada cobre letra nenhuma e a palavra continua da cor do chao. `clone` da a cada pedaco do inline o proprio par. O fio e --acento e nao --verde: na secao verde o acento e preto, e fio verde sobre chao verde nao existe. O leading de 1.45 separa o par da linha anterior: em .95 o fio de cima nascia a 15px da linha de cima e lia como SUBLINHADO DELA. Medido no navegador. REGRA EDITORIAL: em texto de leitura nao se grifa trecho que quebre em duas linhas -- dois fios viram quatro e leem como texto riscado. `nowrap` nao serve: em trecho longo estoura a coluna e o overflow-x corta a frase. */ .preenche { display: inline; padding: 0; background: none; color: inherit; line-height: 1.45; box-shadow: 0 .08em 0 var(--acento), 0 -.08em 0 var(--acento); -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* EM DISPLAY O PAR DE FIOS DEGENERA NO TELL QUE O BRIEFING PROIBE, e isso foi medido: box-shadow pendura o fio na caixa da FONTE, que num titulo de 60px abre ~28px acima da altura de caixa-alta. O que sobra na tela e uma barra verde FLUTUANDO sobre o titulo -- a mesma "barra de acento no topo do cartao" que matou .pilar e .tres. A pagina /candidatos chegou a RECUSAR o grifo do proprio titulo por isso, e grifo que a pagina recusa nao e sistema. Em display o grifo vira UM traco, e quem o posiciona nao sou eu: e a metrica de sublinhado da fonte, que acerta em qualquer corpo. Mesmo idioma de .ex:hover. O leading volta pro do titulo, e era o unico motivo de banco.html ter tido line-height local. */ :is(h1, h2, h3) .preenche { box-shadow: none; line-height: inherit; text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: .085em; text-underline-offset: .05em; text-decoration-skip-ink: none; } /* ==================================================== BOTAO EM GOTA Briefing: "nada de retangulo nem de oval: o botao e uma gota da mesma materia". Com os cuidados que ele mesmo listou: area de clique previsivel, foco visivel, texto nunca cortado pela borda, ondulacao desligada em reduced-motion. */ .gota { --gota-fundo: var(--acento); --gota-texto: var(--sobre-acento); position: relative; display: inline-flex; align-items: center; gap: var(--e2); /* padding generoso: e ele que garante que a borda irregular nunca chegue perto da letra. Texto cortado pela borda foi o risco que ele apontou. */ padding: var(--e4) var(--e6); min-height: 56px; font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; color: var(--gota-texto); background: var(--gota-fundo); border: 0; cursor: pointer; text-decoration: none; /* RAIO EM PX, NUNCA EM PORCENTAGEM: em elemento largo e baixo a porcentagem SEMPRE da elipse (num botao de 250x56 os raios saem 28px x 115px). Tres cantos generosos e um puxado leem como gota que acabou de assentar. O RAIO E VARIAVEL porque o botao pequeno nao pode herdar o do grande: quando a soma dos dois raios de um lado passa da altura, o navegador ESCALA TODOS na mesma proporcao. Com 30px numa altura de 44 a conta e 60/44, os cantos caem pra 22px -- metade exata da altura -- e a gota vira PILULA, que e a forma que o briefing proibe por escrito. Era o CTA do cabecalho, nas cinco paginas. */ --raio-g: 30px; --raio-p: 8px; border-radius: var(--raio-g) var(--raio-g) var(--raio-g) var(--raio-p); transition: border-radius var(--transicao), transform 220ms ease, background 220ms ease; } /* tensao superficial: o canto puxado TROCA DE LADO, como a gota se reacomodando. A forma se reorganiza, ela nao "cresce" -- sem scale, que e o gesto de PowerPoint que ele nao quer. */ .gota:hover { border-radius: var(--raio-g) var(--raio-p) var(--raio-g) var(--raio-g); } .gota:active { transform: translateY(1px); } /* O SEGUNDO CHEIO, hoje o CTA do cabecalho nas cinco paginas. O nome continua --tinta porque as cinco paginas o escrevem assim e markup nao e meu; o que mudou e que ele deixou de ser preto fixo e passou a ser o par --contraste, que cada chao define. Foi o que resolveu o botao invisivel no tema escuro. */ .gota--tinta { --gota-fundo: var(--contraste); --gota-texto: var(--sobre-contraste); } /* O BOTAO DE CONTORNO NAO SABE EM QUE CHAO ESTA: a borda vem de --linha-forte (que cada chao redefine) e o hover de currentColor, que E a cor do texto daquele chao -- no papel escurece, no preto e no verde clareia. */ .gota--vazia { --gota-fundo: transparent; --gota-texto: var(--texto); box-shadow: inset 0 0 0 2px var(--linha-forte); } .gota--vazia:hover { --gota-fundo: color-mix(in srgb, currentColor 10%, transparent); } /* 18 e 5, e nao 30 e 8 reduzidos por regra de tres: com 18 a soma de um lado da 36 numa altura de 44, o navegador nao escala nada, e sobra segmento reto no meio da borda direita. E o segmento reto que separa gota de pilula. */ .gota--pequena { min-height: 44px; padding: var(--e3) var(--e5); font-size: .9375rem; --raio-g: 18px; --raio-p: 5px; } /* quem pediu menos movimento perde a reacomodacao, nao a forma: sem transicao, mas a gota continua assimetrica em vez de virar cápsula */ @media (prefers-reduced-motion: reduce) { .gota, .gota:hover { transition: none; border-radius: var(--raio-g) var(--raio-g) var(--raio-g) var(--raio-p); } } /* ==================================================== O NOME EM VERDE Pedido do fundador (18/08/2026): "onde tiver Sylision escrito, ficar verde, esse verde musgo". Nao e --verde direto: e --acento, que E o verde em toda secao escura (a maioria do site) e vira PRETO sozinho nas duas secoes de chao verde (.sec-virada, .chao-verde) -- senao a palavra desapareceria em cima do proprio chao dela, o mesmo problema que o resto do sistema de token ja resolve pra grifo, marcador e botao. Um componente, zero hex. */ .nome-verde { color: var(--acento); } /* ============================================ A FRASE QUE JA VENDE, PALAVRA A PALAVRA Pedido do fundador (18/08/2026), sobre a frase do heroi: "que ela fique realmente bem interessante". Nao e ANIMACAO DE SCROLL: o heroi mora sempre dentro da primeira janela, e e por isso que .sobe (linhas abaixo) proibe exatamente esse caso -- elemento que nasce dentro da dobra com opacity 0 preso a scroll e elemento que quem chega direto na home nunca ve entrar. Esta e a UNICA animacao de CARGA da pagina (liga sozinha, uma vez, no primeiro frame), e por isso segue regra propria e nao a de .sobe. MESMA CAUTELA DE SEMPRE: cada palavra nasce sem opacity nenhum declarado (== visivel, herda o normal). So DENTRO do bloco que testa suporte a scroll-driven animation moderno + prefers-reduced-motion e que ela ganha opacity:0 de partida -- e so porque o proprio bloco garante, na mesma respiracao, a animacao que devolve pra 1. Sem os dois, ou com este arquivo bloqueado por CSP, o h1 e texto normal, inteiro, no primeiro frame. */ .pal { display: inline-block; } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .pal { opacity: 0; animation: pal-entra 640ms cubic-bezier(.22, 1, .36, 1) both; /* --i vem escrito no HTML, uma palavra por indice: e o mesmo principio do --progresso da espinha, uma variavel simples, sem precisar de nth-child pra cada palavra de cada pagina. */ animation-delay: calc(var(--i, 0) * 60ms); } @keyframes pal-entra { from { opacity: 0; transform: translateY(.55em); } to { opacity: 1; transform: none; } } } } /* ============================================== REVELACAO POR SCROLL Funcao pura do scroll e REVERSIVEL: `animation-timeline: view()` e reversivel por construcao, porque o progresso E a posicao. Onde o navegador nao tem scroll-driven animation o conteudo aparece INTEIRO -- nunca escondido, e tres secoes ja foram publicadas invisiveis neste projeto. O QUE NAO PODE RECEBER .sobe, e a rodada 5 cobrou isto de tres paginas: nada que ja esteja dentro da primeira janela, e nada que carregue o argumento da secao. Elemento que nasce na dobra com opacity 0 e elemento que alguem le como pagina quebrada. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .sobe { animation: sobe linear both; animation-timeline: view(); /* NAO MEXA NESTE ALCANCE SEM MEDIR COM A ROLAGEM SUAVE DESLIGADA. Em 15/08/2026 eu troquei 62%/70%/78% por 30%/36%/42% porque um teste meu acusou DEZESSEIS textos que nunca chegavam a opacity 1 no fim das paginas. O teste estava errado: `html { scroll-behavior: smooth }` mora neste arquivo, e o teste rolava de 90 em 90ms -- cada rolagem suave interrompia a anterior e a pagina nunca chegava onde ele pensava que chegava, entao os elementos "invisiveis" so nunca tinham entrado na tela. Com `scroll-behavior: auto` no teste: 37 de 37 aparecem, em 390x844 e em 1366x768, nas cinco paginas. O valor original volta porque nao havia defeito pra consertar, e mexer no tempo do site inteiro sem motivo e churn com cara de conserto. */ animation-range: entry 0% entry 62%; } @keyframes sobe { from { opacity: 0; transform: translateY(2.5rem); } to { opacity: 1; transform: none; } } /* atraso em cascata por RANGE e nao por animation-delay, que em timeline de scroll nao se comporta. Sao dois degraus: o terceiro nao tinha uso em nenhuma das cinco paginas. */ .sobe--2 { animation-range: entry 8% entry 70%; } .sobe--3 { animation-range: entry 16% entry 78%; } } }