/* ============================================================================= SYLISION · SITE INSTITUCIONAL — componentes ============================================================================= Consome SO os tokens de base.css. Nenhum hex aqui, e nao por purismo: a paleta vai virar post e metade daquele feed e escuro, entao componente com hex fixo e componente que quebra na inversao. O QUE MORREU AQUI, EM UMA LINHA CADA (11 a 13/08) .pilar .tres .explore .demo .selo .vaga-fake .assinatura .pilula .texto-duplo .passos .passo-n os quatro tells de site gerado por IA: cartao com raio, BARRA DE ACENTO no topo do cartao, simbolo ◎ ▤ ➤ ⇄ ▦ como icone e grade de tres cartoes iguais. O tell nao volta pela classe, volta pela FORMA -- `.passos` era o mesmo desenho com outro nome. Conferido: zero ocorrencia nas 5 paginas. .grifo fundido no .preenche: mesmo desenho, mesmo proposito. 22 regras de chao cada chao repintando cada componente. Viraram 2 blocos de token: --texto, --texto-fraco, --linha, --acento. 10 regras da conta cinco pro chao verde, cinco pro preto. Zero agora. .conta-lin.piso a tabela fecha no TOTAL; o piso e a REGUA, que e um
. .conta (envolucro) apelido sem uso: o markup escreve .razao nas 5 paginas. .pe margin-top 7rem de margem que 3 das 5 paginas zeravam no proprio . Regra que a maioria anula nao e regra, e defeito. .refaz .ok utilitarios de uma linha usados por ninguem. No lugar de tudo isso ficou UM componente, A CONTA, e e nela que a ousadia do site foi gasta inteira. ============================================================================= */ /* ============================================================================= O CABECALHO CANONICO — este bloco e a fonte da verdade, nao o HTML ============================================================================= Ordem da rodada 5: "Um header so, nas 5 paginas". Antes eram cinco CTAs diferentes na mesma barra ("Teste de 7 dias", "Testar 7 dias · 3 vagas", "Enviar meu CV", "Descrever minha vaga", "Uma vaga gratis") -- ou seja, cinco ofertas onde existe UMA. O markup abaixo e o unico permitido:
SYLISION IA Recruiter
Testar 7 dias
DUAS diferencas sao permitidas, e nenhuma terceira: 1. `aria-current="page"` na aba da propria pagina; 2. em empresas.html o href do CTA pode ser `#c-planos`, porque a pagina do preco nao se linka; o TEXTO continua sendo "Testar 7 dias". ADOCAO, medida hoje (comentario removido, aria-current normalizado, espacos colapsados, md5 dos 699 caracteres): index, plataforma, candidatos e banco dao o MESMO hash. empresas.html diverge em um ponto -- a ordem das abas, com "Sou dev" em terceiro e "Para Empresas" em quarto. Nao vou cobrar isso em prosa: as cinco regras de `order` logo abaixo IMPOEM a ordem canonica na tela seja qual for a ordem no markup, entao a divergencia deixou de existir pro visitante e nao pode voltar pela mao de nenhum dos sete donos de pagina. ============================================================================= */ .topo { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--e5); /* largura CHEIA com recuo calculado, e nao `width: var(--col)`: com largura de coluna o fundo vira faixa flutuante e o chao da secao aparece nas pontas. */ width: 100%; padding-block: var(--e4); padding-inline: max(var(--e5), calc((100% - var(--col)) / 2)); /* o blend `difference` saiu daqui: sobre a secao AMARELA ele dava AZUL (#fafaf7 x #9fb088 = #0526f7). Contraste bom nao salva cor errada. */ background: var(--fundo); border-bottom: 1px solid var(--linha); color: var(--texto); } /* 44px de altura: e link, e no celular ele media 32px. O logo e o unico jeito de voltar pra home nas cinco paginas depois que o menu fecha, entao alvo curto aqui e navegacao que falha justo em quem se perdeu. A linha de base do texto nao muda -- o ganho vem de padding, nao de fonte maior. */ .marca { display: flex; align-items: baseline; gap: var(--e2); text-decoration: none; min-height: 44px; padding-block: 6px; } .marca-txt { font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; /* "onde tiver Sylision escrito, ficar verde" (fundador, 18/08/2026) -- e a marca no cabecalho e no rodape E "Sylision" escrito, nas cinco paginas, entao uma linha aqui cobre as duas ocorrencias mais repetidas do site inteiro sem tocar em HTML nenhum. --acento e nao --verde: token que sabe virar preto sozinho se um dia a marca aparecer sobre chao verde. */ color: var(--acento); } .marca-sub { font-family: var(--dado); font-size: var(--t-rot); opacity: .7; } .menu { display: flex; gap: var(--e5); margin-left: auto; } .menu a { font-size: .9375rem; text-decoration: none; position: relative; padding-block: var(--e1); } /* A ORDEM DAS ABAS E DO SISTEMA, NAO DA PAGINA. Ela conta a jornada: quem chega, como funciona, quanto custa, de onde vem a gente, e por ultimo o lado do dev, que e o publico secundario. Uma pagina que se promove pra terceira posicao no proprio menu deixa a barra de navegacao diferente da que o visitante acabou de usar, e barra que se remonta a cada clique nao e navegacao. */ .menu a[href^="index"] { order: 1; } .menu a[href^="plataforma"] { order: 2; } .menu a[href^="empresas"] { order: 3; } .menu a[href^="banco"] { order: 4; } .menu a[href^="candidatos"] { order: 5; } /* o sublinhado cresce do centro: gesto pequeno, e o unico do menu */ .menu a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px; background: var(--verde); transition: left var(--transicao), right var(--transicao); } .menu a:hover::after, .menu a[aria-current]::after { left: 0; right: 0; } /* o alternador de tema fica SEMPRE a direita do CTA, e quem garante isso e o `order` e nao a boa vontade de quem escrever o proximo */ .topo-dir { display: flex; align-items: center; gap: var(--e4); } .topo-dir .gota { order: 1; } .topo-dir .tema-btn { order: 2; } .tema-btn { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid currentColor; border-radius: 999px; color: inherit; font-size: 1rem; cursor: pointer; opacity: .75; } .tema-btn:hover { opacity: 1; } .menu-btn { display: none; margin-left: auto; background: none; border: 0; color: inherit; font-size: 1.75rem; line-height: 1; cursor: pointer; padding: var(--e2); } /* ================================================================= HEROI 88vh e nao 100vh: tela cheia empurra a proxima secao pra fora e o visitante nao descobre que ha pagina embaixo. O HEROI E ESCURO por roteiro do briefing ("massa preta com a escrita por cima"), e tambem porque em papel a captura de 390px mostrou o titulo preto sobre a massa preta -- a massa e IRMA do texto, entao z-index nao salva: estar na frente nao cria contraste. A secao commita um chao so, e a virada fica mais dramatica: sai do preto, passa pelo papel, chega no verde. */ .heroi { min-height: 88vh; display: flex; align-items: center; padding-block: var(--e7) var(--e8); overflow: hidden; } .heroi-col { position: relative; z-index: 2; } /* O H1 E LIMITADO PELA ALTURA DA JANELA, e nao so pela largura. Medido em 1366x768, que e o notebook do fundador: com --t-h1 escalando so por vw o h1 dava 409px e empurrava o botao principal pra 128px ABAIXO da dobra. 12vh / 20ch -> 4 linhas, h1 350px, botao em 839px (71px abaixo) 10.5vh/ 26ch -> 4 linhas, h1 306px, botao em 796px (28px abaixo) 9.5vh / 26ch -> 2 LINHAS, h1 139px, botao em 628px (140px de folga) Foi o salto de 4 pra 2 linhas que devolveu a dobra, e nao o corpo da fonte. */ .heroi h1 { font-size: min(var(--t-h1), 9.5vh); margin-bottom: var(--e5); max-width: 26ch; } /* em janela baixa o respiro do heroi encolhe: e o unico lugar da pagina onde padding disputa espaco com a acao principal */ @media (max-height: 820px) { .heroi { padding-block: var(--e5) var(--e6); min-height: auto; } .heroi-leads { gap: var(--e3); margin-bottom: var(--e5); } .dica-scroll { margin-top: var(--e4); } } .heroi-leads { display: grid; gap: var(--e4); margin-bottom: var(--e6); } /* O ULTIMO LEAD VIRA REMATE EM TIPO DISPLAY, mas so se HOUVER MAIS DE UM: com `:last-child` sozinho, um heroi de paragrafo unico teria esse paragrafo promovido, e seis frases em 30px viram cartaz ilegivel. */ .heroi-leads .lead:last-child:not(:first-child) { font-family: var(--display); font-weight: 700; font-size: var(--t-h3); color: var(--texto); letter-spacing: -.02em; } .acoes { display: flex; flex-wrap: wrap; gap: var(--e4); align-items: center; } .dica-scroll { margin-top: var(--e6); } /* ================================================= OS TRES CHAOS Cada secao COMMITA um chao so. Papel com massa verde flutuando atras fazia o texto cair ora sobre papel ora sobre verde, e deu 8 trechos abaixo de 3:1 -- o pior a 1,0:1, e era uma clausula de contrato. O CHAO NAO REPINTA COMPONENTE: ele TROCA OS TOKENS e cala a boca. O componente le --texto, --texto-fraco, --linha, --acento e --contraste; o chao diz quanto vale cada um. Componente novo ja nasce certo nos tres, e erro de contraste vira erro de token. O ACENTO E O CONTRASTE INVERTEM AQUI. Papel e preto ficam com o verde herdado da raiz; o verde vira PRETO, senao etiqueta, grifo, marcador e botao seriam verde sobre verde. Verde e preto sao chao commitado e nao mudam com o alternador de tema -- por isso fixam token em vez de herdar. */ /* ---------------------------------------------------------- chao escuro Heroi, manifesto e rodape sao o MESMO chao e dizem isso uma vez so. --texto-fraco em .72 e nao em .45: em .45 a etiqueta mono de 11px tinha luminancia de 6,8:1 mas peso de fantasma, e a linha que ela rotula e a conta. (Quatro paginas ainda repintam .micro pra 72% de papel no proprio : sao quatro copias de uma regra que ja mora aqui, e podem sair.) */ .heroi, .sec-mani, .pe, .chao-tinta { background: var(--tinta); --texto: var(--papel); --texto-fraco: rgba(250, 250, 247, .72); --linha: rgba(250, 250, 247, .14); --linha-forte: rgba(250, 250, 247, .3); --contraste: var(--papel); --sobre-contraste: var(--tinta); /* a mancha no chao escuro e AMARELA, e nao cinza. No heroi ela e --tinta-2 (silhueta tom sobre tom, de proposito, pra nao competir com o titulo); numa secao de conteudo escura ela e o verde que o fundador pediu que predominasse. Quem escolhe continua sendo a variante --materia--*. */ color: var(--texto); } /* ---------------------------------------------------------- chao verde Dentro do verde "texto fraco" nao pode ser cinza claro: vira preto com alfa, que escurece em vez de clarear e continua passando com folga (>= 8:1). Aqui acento e contraste coincidem em preto, e isso esta certo: sobre verde so existe UM campo cheio possivel, entao os dois botoes cheios sao o mesmo botao. Quem separa acao primaria de secundaria nesta secao e o .gota--vazia. */ .sec-virada, .chao-verde { overflow: hidden; background: var(--verde); --texto: var(--sobre-verde); --texto-fraco: rgba(11, 11, 12, .74); --linha: rgba(11, 11, 12, .22); --linha-forte: rgba(11, 11, 12, .34); --acento: var(--tinta); --sobre-acento: var(--papel); --contraste: var(--tinta); --sobre-contraste: var(--papel); color: var(--texto); } /* ---------------------------------------------------------- chao claro elevado O unico que NAO fixa token: ele acompanha o tema de proposito, porque e o chao neutro onde a conta e a lista sao lidas. */ .sec-assinatura, .chao-neutro { background: var(--papel-2); } /* =============================================================== O RITMO ============================================================================= POR QUE ESTAS TRES CLASSES EXISTEM (13/08/2026) O fundador, olhando o site pronto: "de sessão pra sessão fica tudo uma sessão branca. Tenta ir revezando as cores. Uma sessão ou está branca, ou está preta, ou está verde. Trabalha com essas três cores." Ele estava certo, e dava pra contar: das 23
das cinco paginas, 10 nao declaravam chao nenhum e caiam no fundo da pagina. Na home eram TRES SEGUIDAS -- c-versus, c-72h e c-candidato --, e tres brancas em sequencia leem como uma pagina so, comprida, sem batida. O sistema de chao ja existia e era bom: `.heroi`, `.sec-virada` e `.sec-assinatura` ja trocavam o conjunto de tokens, e todo componente ja obedecia a --acento e --contraste em vez de escrever hex. O que faltava era NOME GENERICO: enquanto o chao se chamava pelo papel da secao ("a virada", "a assinatura"), pintar uma secao nova exigia inventar uma classe nova ou emprestar um nome que mente. `.chao-tinta`, `.chao-verde` e `.chao-neutro` sao os mesmos tres chaos com nome do que eles SAO. A REGRA DE LETRA, que e a segunda metade do pedido dele ("no verde pode colocar o preto; no preto, o branco e o verde"), nao precisou de codigo novo: ela ja e o par --texto/--sobre-acento de cada chao. Sobre verde o texto e preto (13,6:1) e o acento vira PRETO; sobre tinta o texto e papel e o acento continua verde. Nenhum componente sabe em que chao esta. E POR QUE O NEUTRO NAO FIXA TOKEN: ele acompanha o tema do visitante de proposito. No tema claro a sequencia le branco / preto / verde, que e exatamente o que ele pediu. No escuro le grafite / preto / verde, que continua alternando. Forcar branco no tema escuro entregaria um lampejo de papel no meio de uma pagina preta -- e o briefing manda o site inteiro obedecer ao tema, nao o contrario. */ .col--estreita { width: min(760px, calc(100% - 2 * var(--e5))); } /* ============================================================== A CONTA ============================================================================= ESTA E A PECA, e a ousadia do site foi gasta aqui e em nenhum outro lugar. Nenhum concorrente publica a aritmetica da nota. Por isso ela nao e "cartao de destaque": e um RAZAO CONTABIL -- rotulo, valor, detalhe, parcela, fio duplo, total -- que e a forma que a humanidade inventou pra dizer "confira em vez de acreditar". O MARKUP E O MESMO DA FERRAMENTA, byte a byte: parcelasHtml() em app/web/v2/v2.js emite exatamente isto, e nada alem disto:
obrigatorios 6 de 6 · Java · Spring · SQL · REST · Git · SOLID +48
... tempo na tech +22 · senioridade +12 · local +10 ...
total soma das quatro parcelas acima 92
ESTE ARQUIVO E A UNICA COPIA. Copia de componente nao diverge no dia em que e feita, diverge no dia em que alguem conserta UMA: quando plataforma ainda carregava as ~40 linhas no proprio , duas medidas ja tinham divergido em silencio (min-width do 7rem contra 6.5rem, peso da parcela 600 contra 700). O QUE MATA ESTE COMPONENTE: a conta nao fechar na tela. A soma das parcelas tem que dar o total impresso, e o total tem que vir de sum(parcelas) na origem, nunca digitado. Razao que nao soma e pior que razao nenhum, porque a pagina promete "confira" -- e por isso .conta-tab e proibido em lista que nao soma (um "01 / 02 / 03" na coluna de parcela e um convite a somar tres passos). Lista de passos e
    com fio. A LINHA DO PISO SAIU EM 12/08, aqui e no v2.js: ela era a unica linha que NAO era parcela e convidava o olho a somar o corte junto. A tabela fecha no TOTAL. E ELE NASCE VISIVEL, aqui e em pagina nenhuma: o scroll pode GRIFAR a parcela que esta sendo somada, nunca revelar a tabela. NOME: o envolucro e .razao (as 5 paginas escrevem assim); o apelido .conta era um segundo nome pra mesma coisa e nao existe mais. */ .razao { margin-top: var(--e6); max-width: 66ch; opacity: 1; } /* o fio de cima e o do total sao FORTES, os de dentro sao fracos: e assim que uma tabela de conta se le, o bloco inteiro primeiro, a linha depois. AS LARGURAS FORAM MEDIDAS: 8.5rem cabe "obrigatorios" e "tempo na tech" sem quebrar, e 3.25rem cabe "+48" e "100" sem a coluna dançar. */ .conta-tab { border-top: 2px solid var(--texto); font-family: var(--dado); font-size: var(--t-dado); font-variant-numeric: tabular-nums; } .conta-lin { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 3.25rem; gap: var(--e3); align-items: baseline; padding: var(--e3) 0; border-bottom: 1px solid var(--linha); line-height: 1.5; } .conta-rot { color: var(--texto-fraco); font-size: var(--t-rot); text-transform: uppercase; letter-spacing: .12em; } .conta-val { color: var(--texto-fraco); } /* A QUARTA COLUNA MORA DENTRO DA TERCEIRA. O v2.js emite valor e detalhe no mesmo ("6 de 6 · Java · Spring · ..."), entao a coluna do VALOR e o com largura minima fixa: sem isso "6 de 6", "16 anos", "senior" e "Porto Alegre" comecam alinhados e terminam cada um num lugar. 6.5rem cabe "Porto Alegre" em 13px de mono, que e o valor mais longo do v2.js. */ .conta-val b { display: inline-block; min-width: 6.5rem; color: var(--texto); font-weight: 700; } .conta-pontos { text-align: right; color: var(--texto); font-weight: 700; } /* FIO DUPLO ANTES DO TOTAL: e a convencao contabil, e ela existe pra dizer "daqui pra baixo e resultado, nao lancamento". E a unica linha que o olho procura. */ .conta-lin.total { border-top: 3px double var(--texto); border-bottom: 0; margin-top: var(--e2); padding-top: var(--e3); } .conta-lin.total .conta-rot { color: var(--texto); } /* o total fica em MONO e nao no display: ele tem que cair na mesma coluna dos "+48 +22 +12 +10" logo acima, e fonte proporcional muda a largura do digito e desalinha a unica coluna que a pagina pede pra o visitante somar. */ .conta-lin.total .conta-pontos { font-size: 1.375rem; line-height: 1; } /* EM 720px, E NAO EM 560: a tabela tem 8.5 + 6.5 + 3.25rem mais dois vaos, ou seja 19.5rem so de coluna fixa, e abaixo de 720 o detalhe cai pra menos de 20 caracteres e quebra em tres linhas. O rotulo sobe pra cima do valor e a PARCELA CONTINUA na direita, porque e a unica coluna que a pessoa soma. */ @media (max-width: 720px) { .conta-lin { grid-template-columns: minmax(0, 1fr) 3.25rem; } .conta-rot { grid-column: 1 / -1; } .conta-val b { display: inline; min-width: 0; } } /* ================================================================ VERSUS O lado velho NAO ganha verde: pintar de verde o que a pagina esta criticando premiaria o concorrente com a cor da marca. Teto de 5 linhas por lado -- lista comparativa que passa de cinco deixa de ser comparacao e vira inventario. ESTA COMPARACAO E O ARGUMENTO DA HOME E NAO PODE NASCER EM opacity 0: `.sobe` nas duas colunas foi cobrado na rodada 5 e nao volta. */ .versus { display: grid; gap: var(--e5); margin-top: var(--e6); } @media (min-width: 860px) { .versus { grid-template-columns: 1fr 1fr; gap: var(--e6); } } .vs h3 { margin-bottom: var(--e4); } .vs ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--e3); } .vs li { position: relative; padding-left: var(--e5); font-size: .9375rem; line-height: 1.5; } /* UM MARCADOR SO, EM DOIS PESOS. Eram duas regras completas de ::before, iguais em tudo menos em tres valores. Nenhum dos dois e simbolo: ▪ e X vermelho sao o mesmo tell dos icones que morreram, e a diferenca entre os lados vem de PESO. */ .vs li::before { content: ""; position: absolute; left: 0; top: var(--mk-y, .62em); width: var(--mk-w, .625rem); height: var(--mk-h, 3px); background: var(--mk-cor, var(--acento)); } .vs--velho { color: var(--texto-fraco); --mk-y: .7em; --mk-w: .75rem; --mk-h: 1px; --mk-cor: var(--cinza-2); } .vs--velho h3 { color: var(--texto-fraco); font-weight: 400; } /* a ancora: a coluna da Sylision e a unica ancorada, e e do acento do chao */ .vs--novo { position: relative; padding-left: var(--e5); } .vs--novo::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; background: var(--acento); } /* ============================================================== A PONTE O que sobrou de #explore: os quatro tiles com ◇ ◆ ✦ ◎ eram navegacao fantasiada de conteudo, e desceram pro rodape como links. Sobra UM link por pagina, o da proxima leitura, e ele nao e cartao: e uma linha com um fio em cima, do mesmo jeito que uma nota de rodape aponta pro capitulo seguinte. */ .ex { display: grid; gap: var(--e1); margin-top: var(--e6); padding-top: var(--e3); border-top: 2px solid var(--texto); text-decoration: none; max-width: 46ch; transition: border-top-color var(--transicao); } .ex b { font-family: var(--display); font-size: var(--t-h3); letter-spacing: -.02em; } .ex span { font-size: .9375rem; color: var(--texto-fraco); } .ex i { font-style: normal; color: var(--texto-fraco); } /* o hover mexe no FIO e no sublinhado, e nao no fundo: campo verde atras de uma linha inteira faria do link de rodape de secao o elemento mais forte da tela, disputando com a conta */ .ex:hover { border-top-color: var(--acento); } .ex:hover b { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--acento); text-underline-offset: .16em; } /* ============================================================================= O RODAPE CANONICO — tambem fonte da verdade, e ele ja esta adotado ============================================================================= Eram quatro variantes. Medido hoje, comentarios fora e espacos colapsados, as CINCO paginas dao o mesmo md5 nos mesmos 914 caracteres, com tres colunas: marca + endereco · Produto (4 links) · Privacidade & LGPD (3 links) e a linha final: © Sylision · A IA tria. Quem contrata é gente. · LGPD AS DUAS REGRAS QUE O MANTEM ASSIM: 1. UM link por destino. banco.html aparecia DUAS vezes nas cinco paginas (o `.pe-dado` solto mais a coluna Produto) e ainda apontava pra tres destinos diferentes: banco.html, banco.html#c-medimos e #c-medimos. Fica o da coluna Produto, "De onde vêm os devs". O `.pe-dado` nao existe mais, e por isso nao ha regra pra ele aqui. 2. Nenhum numero de estoque no rodape. O total do banco morava em cinco rodapes: cinco lugares pra o mesmo numero envelhecer, e o primeiro que envelhecesse desmentia os outros quatro. Ele mora em banco.html, que e a pagina que responde por ele. O chao escuro do rodape foi declarado la em cima, junto com heroi e manifesto. ============================================================================= */ /* SEM margin-top. A margem de 7rem que morava aqui somava com o padding-block de 7rem da ultima secao e abria 14rem de vazio antes do rodape -- tanto que TRES das cinco paginas a zeravam no proprio . Regra que a maioria das paginas anula nao e regra, e defeito com tres remendos. */ .pe { padding-block: var(--e7) var(--e5); } .pe-grid { display: grid; gap: var(--e6); } @media (min-width: 760px) { .pe-grid { grid-template-columns: 2fr 1fr 1fr; } } .pe h4 { font-family: var(--dado); font-size: var(--t-rot); text-transform: uppercase; letter-spacing: .14em; margin: 0 0 var(--e3); color: var(--acento); } .pe-grid div > a { display: block; text-decoration: none; font-size: .9375rem; padding-block: var(--e1); color: var(--texto-fraco); } .pe-grid div > a:hover { color: var(--texto); } .pe .marca-txt { display: block; margin-bottom: var(--e3); } .pe-grid p { margin-bottom: var(--e3); } .pe-fim { border-top: 1px solid var(--linha); margin-top: var(--e6); padding-top: var(--e4); } /* ================================================================ CELULAR */ @media (max-width: 860px) { .menu, .topo-dir { display: none; } .menu-btn { display: block; } /* o menu aberto: lista simples e completa, sem gaveta animada. Gaveta que depende de JS e gaveta que trava a navegacao quando o JS falha. */ .topo.aberto { flex-wrap: wrap; } .topo.aberto .menu { display: grid; width: 100%; gap: var(--e3); margin: var(--e4) 0 0; order: 3; } .topo.aberto .menu a { font-size: 1.125rem; font-family: var(--display); font-weight: 700; } .topo.aberto .topo-dir { display: flex; order: 4; width: 100%; margin-top: var(--e4); } .heroi { min-height: auto; padding-block: var(--e6) var(--e7); } .heroi h1 { max-width: none; } section { padding-block: var(--e7); } } /* ===================================== O ORÁCULO E O ENVIO DE CURRÍCULO ============================================================================= ESTE BLOCO NASCEU DENTRO DO