/* ========================================================================== INSTITUTO MARTINS THEODORO — theme.css Global: tokens, reset, base, header, gaveta, rodapé, botões flutuantes. REGRAS DESTA REESCRITA (o motivo de ela existir): 1. Cada seletor aparece UMA vez. A versão anterior declarava .imt-hero 5 vezes, .imt-hero-mark-outer 9 vezes — cada pedido virava um bloco novo no fim do arquivo em vez de uma edição na regra. 2. Zero !important. Especificidade de uma classe em tudo, então a ordem do arquivo é a única coisa que decide — e ela é legível de cima a baixo. 3. Cada token existe em um lugar só. --g-grain tinha 6 valores diferentes. 4. Nada anima o que custa layout. Só transform, opacity e cor. ========================================================================== */ /* ══════════════════════════════════════════════════════════════════ 1. TOKENS ══════════════════════════════════════════════════════════════════ */ :root{ /* ── Cor da marca ───────────────────────────────────────────── */ --noir:#141414; --paper:#FFFFFF; /* SUPERFÍCIE — o tom em que peça e fundo se confundem. Existe para os cartões modelados a luz: no neumorfismo os dois precisam da MESMA cor, e ela não pode ser branca, senão não há para onde clarear. É o caramelo do hero alguns degraus acima. */ --superficie:#F5EFE4; /* SUPERFÍCIE ESCURA — a mesma ideia, do outro lado. A trilha do dentista usa os mesmos arquétipos da trilha do paciente, e para a luz existir lá peça e fundo também precisam se confundir. #141414 não serve: é escuro demais para a sombra ter para onde ir. Este tom é quente (o caramelo levado ao escuro) e fica alguns graus acima do preto, então sobra caminho nos dois sentidos. A LUZ É O OURO DA MARCA em alfa muito baixo, não branco. Sobre um escuro quente, realce branco esverdeia e denuncia plástico; ouro aprofunda. Mesmo princípio da sombra cor de ouro no lado claro. */ --superficie-noir:#1E1C18; /* O PAR DE LUZ DE CADA LADO, agora global. Estes dois viviam declarados DENTRO do cartão de tratamento e da lâmina. Enquanto só essas duas peças existiam, funcionava; quando a vitrine dos fundadores passou a usar a mesma matéria, a variável não resolvia lá e o navegador descartava a declaração inteira — `box-shadow` caía para `none` sem erro nenhum no console. É o modo mais silencioso de uma variável quebrar: não é a linha que some, é a regra toda. */ --neu-luz:rgba(255,253,247,.92); --neu-sombra:rgba(124,90,33,.12); --neu-luz-noir:rgba(244,227,176,.07); --neu-sombra-noir:rgba(0,0,0,.55); /* Neutro de apoio, agora QUENTE. Era #F6F5F3, um cinza frio — ao lado da superfície caramelo ele lia como emenda, o mesmo defeito que o wayfinding tinha. Numa marca de ouro e caramelo, cinza frio nunca foi a escolha certa; era herança. */ --paper-dim:#F0EADD; --gray:#555555; --gray-soft:#8A8783; --gold-1:#F4E3B0; /* claro — sobre fundo escuro */ --gold-2:#CBA045; /* o ouro da marca */ --gold-3:#7C5A21; /* escuro — sobre fundo claro */ --gold-grad:linear-gradient(115deg,var(--gold-1) 0%,var(--gold-2) 48%,var(--gold-3) 100%); /* ── OURO PARA TEXTO: DOIS GRADIENTES, UM POR FUNDO ─────────────── O `--gold-grad` acima é para SUPERFÍCIE — botões, fios, faixas. Ali o ouro é o fundo e o contraste é problema do texto por cima. Em texto recortado o ouro É a tinta, e aí a conta muda. O mesmo gradiente aplicado às onze chamadas douradas da home começava em #F4E3B0 sobre creme: 1,07 de contraste no hero. Um é fundo igual à tinta. A chamada "arte da harmonização" praticamente não existia. E havia um agravante silencioso: `background-size:220%` mostra só os primeiros 45% da rampa, então a ponta escura — a única legível — nunca chegava a aparecer nos títulos parados. Os dois gradientes abaixo foram MEDIDOS contra os fundos reais da página, não escolhidos no olho. Cada parada passa de 3:1, o mínimo para texto grande, no fundo mais difícil de cada lado: o creme do hero (230,220,198) para o claro, o preto quente da trilha do dentista (30,28,24) para o escuro. A rampa clara perde o realce quase branco e ganha percurso: de 3,1 a 7,4 de contraste. É ouro velho em vez de ouro claro — e ouro velho sobre papel é o que a ourivesaria faz há séculos, porque o claro sobre claro nunca funcionou. */ --gold-grad-texto:linear-gradient(115deg, #9C742A 0%, #87621F 38%, #6E4E19 70%, #573E13 100%); --gold-grad-texto-escuro:linear-gradient(115deg, #F4E3B0 0%, #DCBE72 38%, #C79F4A 70%, #AE8837 100%); /* Fios. Um par por fundo, não sete variações. */ --hair-l:rgba(20,20,20,.12); --hair-l-soft:rgba(20,20,20,.07); --hair-d:rgba(255,255,255,.14); --hair-d-strong:rgba(255,255,255,.24); /* ── Tipografia ───────────────────────────────────────────────── Kiona Regular é a fonte oficial da marca e exige licença Web paga (ellenlufftype.com/kiona). Ao adquirir, troque 'Jost' por 'Kiona' em --display e o resto do sistema acompanha sozinho. */ --voice:'Fraunces',Georgia,serif; --display:'Jost',system-ui,sans-serif; --sans:'Inter',system-ui,-apple-system,sans-serif; /* Escala de razão 1,2. Nove degraus, não treze. */ --t-micro:.6875rem; /* 11 — rótulos */ --t-xs:.8125rem; /* 13 — legendas */ --t-s:.875rem; /* 14 — apoio */ --t-base:1rem; /* 16 — corpo */ --t-m:1.1875rem; /* 19 — lead */ --t-l:1.4375rem; /* 23 — h4 */ --t-xl:1.75rem; /* 28 — h3 */ --t-2xl:2.5rem; /* 40 — h2 */ --t-3xl:3rem; /* 48 — h2 de abertura */ /* Medida de leitura: nenhum texto corrido passa de 68 caracteres. */ --medida:34em; /* ── Ritmo ────────────────────────────────────────────────────── Três pesos, porque três coisas diferentes acontecem: seção comum, troca de assunto e troca de audiência. Respiro uniforme é o mesmo erro da tipografia uniforme — quando tudo tem o mesmo peso, nada tem peso. */ --r-justo:clamp(3.5rem,6vw,5rem); --r-normal:clamp(5rem,9vw,8rem); --r-amplo:clamp(7rem,13vw,11.5rem); /* ── Estrutura ──────────────────────────────────────────────── */ --wrap:1260px; --gut:clamp(20px,5vw,60px); --header-h:clamp(68px,8vw,82px); /* ── Movimento ────────────────────────────────────────────────── ESCALA DE TEMPO. Havia 12 durações diferentes espalhadas pelo arquivo (.25 .3 .35 .4 .45 .5 .55 .6 .8 .9 1.1 1.6) — o mesmo problema da tipografia: variação sem intenção não lê como riqueza, lê como descuido. Cinco degraus, cada um com um PAPEL: --t-toque resposta imediata (cor, borda, ícone) --t-resposta resposta de componente (hover de botão, cartão) --t-deliberado hover lento e proposital — é o que dá o ar caro --t-entrada elemento entrando em cena (reveal, cortina) --t-ambiente movimento de fundo (zoom de imagem) Regra: se você precisar de um sexto valor, o movimento provavelmente está fazendo algo que já existe — reveja antes de acrescentar. */ --ease:cubic-bezier(.16,1,.3,1); --t-toque:.3s; --t-resposta:.45s; --t-deliberado:.8s; --t-entrada:1.1s; --t-ambiente:1.6s; /* Passo de sequência: intervalo entre irmãos que entram em cascata. É ordem, não velocidade — por isso vive fora da escala acima. */ --t-passo:.15s; /* O header tem tempo próprio: ele transiciona cor de fundo enquanto o usuário rola, e precisa ser mais lento que um hover para não piscar. */ /* .2s é o valor da Lavytier, e o motivo está lá: a troca de tema da barra tem que COLAR na rolagem. Meio segundo faz o menu chegar atrasado na seção em que já se está. */ --t-bar:.2s; } /* ══════════════════════════════════════════════════════════════════ 2. RESET ══════════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--paper); color:var(--noir); font-family:var(--sans); font-size:var(--t-base); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } /* NO iOS O `overflow-x` DO BODY NÃO SEGURA A ROLAGEM LATERAL sozinho: o html precisa acompanhar, senão qualquer peça que passe 1px da borda (a arte do hero, a espiral do login) deixa a página balançar de lado. `clip` em vez de `hidden` porque clip NÃO cria contêiner de rolagem — e é isso que mantém o `position:sticky` da coluna de envio vivo. */ @supports (overflow-x:clip){html,body{overflow-x:clip}} img,svg,video{display:block;max-width:100%} img{height:auto} h1,h2,h3,h4,h5,h6,p,ul,ol,figure{margin:0} ul,ol{padding:0;list-style:none} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} button{background:none;border:0;padding:0;cursor:pointer} /* Foco visível em tudo que recebe teclado — nunca remover sem repor. */ :focus-visible{outline:2px solid var(--gold-2);outline-offset:3px} .imt-skip{ position:absolute;left:-9999px;top:0;z-index:999; background:var(--noir);color:var(--paper); padding:.9rem 1.4rem;font-family:var(--display);font-size:var(--t-s); } .imt-skip:focus{left:0} /* Só para leitor de tela. */ .imt-sr{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ══════════════════════════════════════════════════════════════════ 3. PRIMITIVAS COMPARTILHADAS ══════════════════════════════════════════════════════════════════ */ .imt-wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); } /* ── Rótulo de seção (eyebrow) ───────────────────────────────────── */ .imt-eyebrow{ display:inline-flex;align-items:center;gap:.75rem; font-family:var(--display); font-size:.68rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-3); margin-bottom:1.4rem; } .imt-eyebrow-line{ display:block;width:26px;height:1px; background:currentColor;opacity:.55;flex:none; } /* ── Texto com o gradiente de ouro ──────────────────────────────── O brilho percorre o gradiente. Isso é REPINTURA (o navegador recalcula o gradiente e reaplica o recorte nos glifos a cada quadro), então o JS pausa o que está fora da tela. Ver home.js. background-image em vez de background: o atalho zeraria background-position, e background-position é justamente o que a animação move. Foi assim que este efeito morreu duas vezes. */ .imt-grad-text{ background-image:var(--gold-grad-texto); /* A RAMPA INTEIRA CABE NO TÍTULO. Era 220%, e 220% mostra só os primeiros 45% do gradiente: os dez títulos parados da página exibiam apenas a metade clara, que é justamente a que não se lia. A largura maior existe para o brilho do hero ter por onde correr — e só o hero corre. Aqui, 100%. */ background-size:100% 100%; background-position:0% 50%; -webkit-background-clip:text; background-clip:text; color:transparent; } /* O BRILHO PERCORRE UM TÍTULO SÓ: a linha 3 do hero. Antes rodava nos 11 títulos dourados da página, para sempre. Não guia, não conecta e não responde — é decoração — e é a animação mais cara que existe aqui: anima background-position em texto com background-clip:text, o que é REPINTURA, não composição; a GPU não participa. Repetido onze vezes, o gesto vira maneirismo e some. Uma vez, na abertura, ele é o gesto. Os outros dez títulos mantêm o mesmo ouro, parado. E O GESTO TEM FIM. Duas passagens — catorze segundos — e o ouro descansa. Um brilho que corre para sempre é protetor de tela, e custa repintura de texto a cada quadro enquanto o hero estiver na tela: era a única animação perpétua de pintura que sobrava na página. O quadro final coincide com o inicial, então não há salto quando ela para. */ .imt-l3.imt-grad-text{ /* O brilho precisa de sobra para correr, mas 220% deixava fora da vista tudo o que passa dos 45% da rampa. 160% dá quase dois terços dela em repouso — do ouro claro ao bronze — e ainda guarda 60% de largura para a passagem da luz. */ background-size:160% 100%; animation:imt-shine 7s var(--ease) 2; } @keyframes imt-shine{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} } /* ── Botões ──────────────────────────────────────────────────────── */ .imt-btn{ display:inline-flex;align-items:center;justify-content:center;gap:.65rem; font-family:var(--display); font-size:.75rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; padding:1.08rem 2.15rem; border-radius:1px; border:1px solid transparent; transition:transform var(--t-resposta) var(--ease),box-shadow var(--t-resposta) var(--ease), background-color var(--t-resposta) var(--ease),color var(--t-resposta) var(--ease), border-color var(--t-resposta) var(--ease); } .imt-btn:hover{transform:translateY(-2px)} .imt-btn-gold{ background:linear-gradient(100deg,var(--gold-1) 0%,var(--gold-2) 40%,var(--gold-3) 68%,var(--gold-2) 100%); background-size:200% auto; color:#2E2205; box-shadow:0 4px 16px -8px rgba(124,90,33,.45); } .imt-btn-gold:hover{box-shadow:0 10px 26px -10px rgba(124,90,33,.6)} .imt-btn-ghost{ border-color:var(--hair-l); color:var(--noir); } .imt-btn-ghost:hover{border-color:var(--noir);background-color:rgba(20,20,20,.04)} .imt-btn-ghost-dark{ border-color:var(--hair-d-strong); color:var(--paper); } .imt-btn-ghost-dark:hover{border-color:var(--paper);background-color:rgba(255,255,255,.08)} /* ══════════════════════════════════════════════════════════════════ 4. HEADER — vidro líquido adaptativo O desfoque é CONSTANTE: nunca entra nem sai. Mudar o valor de backdrop-filter obriga o navegador a reconstruir o desfoque a cada quadro, e era essa a causa da travada ao rolar na primeira versão. Só a cor de fundo transiciona. A altura é FIXA. Animar a altura do header reflui o documento inteiro. ══════════════════════════════════════════════════════════════════ */ /* Estado claro — o padrão. Sobre o hero e as seções de papel. OS VALORES SÃO OS DA LAVYTIER, copiados e não reinterpretados: véu de 20% no topo, 34% ao rolar, `saturate(200%) blur(12px)` constante. O RAIO CURTO É O SEGREDO, e é contraintuitivo. Raio largo dilui o conteúdo escuro no claro em volta e o vidro volta a parecer plástico fosco; com 12px as formas continuam reconhecíveis passando por trás, e é isso que o olho lê como vidro. A saturação alta devolve a cor que o desfoque lava. A minha versão anterior fazia o oposto — 22px de raio e véu de 52% — e por isso lia como painel translúcido, não como vidro. */ .imt-header{ --g-veu:rgba(255,255,255,.20); --g-veu-stuck:rgba(255,255,255,.34); --g-fio:rgba(0,0,0,.12); --g-text:#282828; --g-text-forte:#000000; --g-text-soft:#555555; --g-pastilha:rgba(0,0,0,.045); /* O VIDRO DO PAINEL VAI ALÉM DA LAVYTIER, e por pedido. A receita dela (véu 45%, desfoque 28px) foi desenhada para uma pastilha de 44px. Numa lâmina de ponta a ponta, com o título do hero de 74px passando atrás, 28px de raio não desmancham a letra: ela continua legível e briga com o menu. O resultado lê como vidro COLORIDO, não como vidro fosco. A correção é nas duas pontas ao mesmo tempo, e uma depende da outra: baixar o véu sozinho deixaria o fundo ainda mais legível. Véu de 26% deixa passar muito mais luz; raio de 55px transforma o que passa em mancha de cor sem forma. É a física do vidro fosco — você vê a luz e a cor, não o desenho. */ --g-veu-painel:rgba(255,255,255,.26); --g-anel:rgba(0,0,0,.12); --g-luz:rgba(255,255,255,.75); --g-sombra-painel:0 2px 8px -2px rgba(0,0,0,.12),0 14px 32px -10px rgba(0,0,0,.24); position:fixed; inset:0 0 auto; /* ACIMA DA GAVETA (310) E DO VÉU (290). Antes era 300, e no celular a gaveta de 88vw cobria o próprio botão que a abriu: o X ficava escondido e só restava tocar numa tira de 45px à esquerda para fechar. A gaveta já reserva a altura da barra no topo, então nada dela fica atrás do vidro. */ z-index:320; height:var(--header-h); display:flex; align-items:center; font-family:var(--display); color:var(--g-text); /* NADA DE VIDRO NESTE ELEMENTO, e a razão é estrutural, não estética. `backdrop-filter` só borra o que está atrás DENTRO DA MESMA RAIZ DE FUNDO. E um elemento vira raiz de fundo quando tem `isolation`, `filter`, `opacity` menor que 1, máscara, mistura — ou o próprio `backdrop-filter`. Este cabeçalho tinha duas dessas ao mesmo tempo. Resultado: a cortina, que é filha dele, só conseguia amostrar o interior do cabeçalho, que é transparente. Ela borrava o NADA, e a página aparecia nítida através do véu — foi exatamente o que apareceu com o título do hero legível atrás do menu. A correção é mover o vidro da barra para o ::before logo abaixo. O pseudo-elemento vira raiz de fundo dele mesmo, o cabeçalho volta a ser um contêiner comum, e a cortina passa a enxergar a página. */ /* O DESFOQUE VOLTOU A FICAR SEMPRE LIGADO, e a premissa que o havia desligado deixou de valer. Vale registrar por quê, porque foi ele que travou o site por segundos. O laço era este: `backdrop-filter` re-amostra e re-desfoca tudo que passa atrás, a cada quadro em que esse conteúdo muda — e a arte do hero começava em y=31px, DENTRO desta faixa, repintando sem parar por `stroke-dashoffset`. Um alimentava o outro. No perfil daquele dia: 2.560ms de renderização e 1.469ms de pintura contra 87ms de script. O que mudou: o hero passou a reservar a altura do cabeçalho no próprio `padding-top`, então o conteúdo dele começa ABAIXO da faixa por construção, não por sorte. Medido em 1440 × 900: 48px de folga entre o topo da arte e a base do cabeçalho. Em repouso o vidro desfoca um gradiente parado, que o navegador guarda pronto. O custo real passou a ser durante a ROLAGEM, quando o conteúdo atrás muda de fato. É o preço normal de um cabeçalho de vidro, e a contenção de seção limita a área envolvida. Se algum dia voltar a arrastar, o ajuste é o raio, não o efeito. */ transition:color var(--t-bar) linear; } /* O VIDRO DA BARRA, agora numa camada própria. SÓ A COR TRANSICIONA, e o filtro fica constante entre os dois estados. Mudar o valor do backdrop-filter obriga o navegador a reconstruir o desfoque, e é isso que trava a rolagem. A regra vale para animá-lo, não para ligá-lo uma vez. */ .imt-header::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background-color:var(--g-veu); -webkit-backdrop-filter:saturate(200%) blur(12px); backdrop-filter:saturate(200%) blur(12px); transition:background-color var(--t-bar) linear; } .imt-header.is-stuck::before{background-color:var(--g-veu-stuck)} /* Estado escuro. Não é o vidro claro escurecido: é vidro escuro — véu preto baixo, fio claro, tinta clara. Mesmo desenho, luz virada. E ele NÃO adensa ao rolar, também como na Lavytier: sobre fundo escuro o véu de 30% já garante o contraste do texto, e subir mais fecharia o vidro à toa. */ .imt-header.is-over-dark{ --g-veu:rgba(10,10,10,.30); --g-veu-stuck:rgba(10,10,10,.30); --g-fio:rgba(255,255,255,.16); --g-text:rgba(255,255,255,.82); --g-text-forte:#FFFFFF; --g-text-soft:rgba(255,255,255,.62); --g-pastilha:rgba(255,255,255,.12); /* NO ESCURO O VÉU DO PAINEL VIRA PRETO, e isso é uma troca deliberada em relação à Lavytier. Lá o véu escuro é branco a 10%, porque a peça dela é uma pastilha pequena que precisa se destacar do fundo preto. Uma lâmina inteira em véu branco CLAREIA a página atrás e o texto branco do menu perde contraste. Véu preto a 30% faz o oposto: aprofunda o fundo e a tinta clara sobe. */ --g-veu-painel:rgba(10,10,10,.30); --g-anel:rgba(255,255,255,.18); --g-luz:rgba(255,255,255,.22); --g-sombra-painel:0 2px 8px -2px rgba(0,0,0,.5),0 14px 32px -10px rgba(0,0,0,.6); } /* Ao rolar, o vidro claro abre menos. A razão é legibilidade: no topo passa o hero, uma superfície calma; rolando passa a página inteira, foto e bloco escuro incluídos, e é aí que o texto do menu corre risco de sumir. */ /* Fio de base que ganha densidade ao rolar. Ele SOME NAS PONTAS em vez de cortar a página com uma linha dura de ponta a ponta — detalhe pequeno e é metade do refinamento da barra. */ .imt-header::after{ content:""; position:absolute; left:0;right:0;bottom:0;height:1px; background:linear-gradient(90deg,transparent,var(--g-fio) 18%,var(--g-fio) 82%,transparent); opacity:0; transition:opacity var(--t-bar) linear; } .imt-header.is-stuck::after{opacity:1} /* Sem desfoque não há vidro possível: o que protege o texto some, e aí o véu PRECISA tapar. É o único caso em que a barra volta a ser opaca. */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .imt-header::before{background-color:rgba(255,255,255,.94)} .imt-header.is-over-dark::before{background-color:rgba(20,19,17,.94)} .imt-panel{background-color:rgba(255,255,255,.97)} .imt-header.is-over-dark .imt-panel{background-color:rgba(20,19,17,.97)} } .imt-header-bar{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem); } /* ── Logo ────────────────────────────────────────────────────────── */ .imt-logo{ display:flex;align-items:center;gap:.7rem; flex:none;margin-right:auto; } .imt-logo-img{ width:auto;height:clamp(38px,4.4vw,46px); transform-origin:left center; transition:transform var(--t-deliberado) var(--ease),filter var(--t-bar) linear; } .imt-header.is-stuck .imt-logo-img{transform:scale(.9)} .imt-header.is-over-dark .imt-logo-img{filter:brightness(1.35) saturate(1.15)} .imt-logo-word{ font-family:var(--voice); font-size:var(--t-xs); line-height:1.2; letter-spacing:.02em; color:var(--g-text); transform-origin:left center; transition:transform var(--t-deliberado) var(--ease),color var(--t-bar) linear; } .imt-header.is-stuck .imt-logo-word{transform:scale(.94)} /* A logo horizontal só existe abaixo de 980px (ver bloco responsivo). No desktop a marca continua sendo símbolo + nome tipográfico. */ .imt-logo-h{ display:none; width:auto; /* O ARQUIVO MANDA NA ALTURA. Na logo oficial o nome tem 15% da altura do símbolo; a 36px o nome vira 5px e ninguém lê. A 56px o nome passa de 8px, que é o mínimo para versalete fino no celular — e é por isso que a barra cresce para 76px abaixo de 980px. Em telas de 320px o clamp encolhe para caber ao lado do botão do menu. */ height:clamp(44px,14.5vw,56px); transform-origin:left center; transition:transform var(--t-deliberado) var(--ease); } .imt-header.is-stuck .imt-logo-h{transform:scale(.92)} /* ── Navegação ───────────────────────────────────────────────────── */ .imt-nav{display:flex;align-items:center;gap:.2rem} .imt-nav-link{ display:inline-flex;align-items:center;gap:.4rem; font-size:var(--t-s); font-weight:400; letter-spacing:.04em; color:var(--g-text); padding:.6rem .85rem; border-radius:3px; transition:color var(--t-bar) linear,background-color var(--t-resposta) var(--ease); } /* A PASTILHA DE FUNDO É UM PSEUDO-ELEMENTO QUE CRESCE POR TRANSFORM. Animar `background-color` no próprio link repinta a área a cada quadro; crescer uma camada já pronta é composição. É a técnica da Lavytier, com os mesmos valores: 4,5% de preto no claro, 12% de branco no escuro. */ .imt-nav-link{position:relative;isolation:isolate} .imt-nav-link::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--g-pastilha); opacity:0; transform:scale(.86); transition:opacity var(--t-toque) var(--ease), transform var(--t-toque) var(--ease), background-color var(--t-bar) linear; } .imt-nav-link:hover::before, .imt-drop[data-open="true"] > .imt-nav-link::before{opacity:1;transform:scale(1)} .imt-nav-link:hover{color:var(--g-text-forte)} /* A PONTE SOBRE A FAIXA MORTA. O gatilho tem a altura do texto e fica centrado na barra; a cortina começa na BASE da barra. Entre os dois sobra uma faixa de nada, e atravessá-la tira o ponteiro do item — o painel some no meio do caminho, que é o defeito que apareceu. Esta ponte é área de acerto invisível ligando um ao outro. Ela só EXISTE com o item ativo: fora disso tem altura zero, senão viraria um bloqueio invisível sobre o conteúdo logo abaixo do menu. A cortina vem depois na marcação, então ela pinta por cima da ponte e os links dela continuam clicáveis. */ .imt-drop > .imt-nav-link::after{ content:""; position:absolute; left:0;right:0; top:100%; bottom:0; } .imt-drop:hover > .imt-nav-link::after, .imt-drop[data-open="true"] > .imt-nav-link::after{ bottom:calc(var(--header-h) / -2); } .imt-caret{ width:9px;height:6px;flex:none; transition:transform var(--t-toque) var(--ease); } .imt-drop[data-open="true"] .imt-caret{transform:rotate(180deg)} /* ══════════════════════════════════════════════════════════════════ PAINEL — CORTINA O painel não é uma caixinha ancorada sob o item: é uma LÂMINA de vidro que desce de ponta a ponta, com a declaração à esquerda e as colunas de links à direita. O menu vira um momento da página, não uma listinha suspensa. `.imt-drop` volta a ser `static` de propósito: assim o bloco de contenção do painel passa a ser o próprio cabeçalho, que é `fixed`, e `left:0;right:0` significam a largura da tela em vez da largura do item. Sem isso a cortina nasceria do tamanho da palavra "Cursos". ══════════════════════════════════════════════════════════════════ */ /* O CABEÇALHO É FIXO, ENTÃO TODA ÂNCORA PRECISA DE FOLGA. Sem isto o alvo do link para embaixo do próprio menu. Não existia porque, até agora, os únicos destinos eram topos de seção com muito respiro; com a cortina apontando para cartões no meio da grade, a falta apareceria na primeira tentativa. */ [id]{scroll-margin-top:calc(var(--header-h) + 1.5rem)} .imt-drop{position:static} .imt-panel{ position:absolute; top:100%; left:0;right:0; padding-block:clamp(1.9rem,3.6vw,3rem) clamp(1.2rem,2.2vw,1.8rem); /* O RAIO AQUI É O OPOSTO DO DA BARRA, e os dois estão certos. A barra usa 12px porque ela quer que você RECONHEÇA o que passa atrás: é isso que a faz ler como vidro em vez de plástico. O painel quer o contrário — ele carrega uma lista para ler, e o que passa atrás precisa virar fundo, não conteúdo. 55px é o ponto em que uma letra de 74px deixa de ser letra. A saturação alta nos dois devolve a cor que o desfoque lava. */ color:var(--g-text); background-color:var(--g-veu-painel); -webkit-backdrop-filter:blur(55px) saturate(200%); backdrop-filter:blur(55px) saturate(200%); box-shadow: inset 0 1px 0 var(--g-luz), inset 0 -1px 0 var(--g-anel), var(--g-sombra-painel); opacity:0; visibility:hidden; transform:translateY(-14px); transition:opacity var(--t-resposta) var(--ease), transform var(--t-deliberado) var(--ease), visibility var(--t-resposta), background-color var(--t-bar) linear, color var(--t-bar) linear; } .imt-drop[data-open="true"] .imt-panel{ opacity:1;visibility:visible;transform:translateY(0); } .imt-panel-corpo{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.618fr); gap:clamp(1.8rem,5vw,4.5rem); align-items:start; } .imt-panel-rotulo{ display:block; font-size:var(--t-micro); font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-3); margin-bottom:.7rem; } .imt-header.is-over-dark .imt-panel-rotulo{color:var(--gold-1)} .imt-panel-head b{ display:block; font-family:var(--voice); font-size:var(--t-xl); font-weight:300; line-height:1.12; letter-spacing:-.02em; margin-bottom:.5rem; } .imt-panel-head p{ font-size:var(--t-s); font-weight:300; line-height:1.7; color:var(--g-text-soft); max-width:34ch; } .imt-panel-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.4rem,3vw,2.6rem); } .imt-panel-grupo h4{ font-size:var(--t-micro); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-3); padding-bottom:.6rem; margin-bottom:.8rem; border-bottom:1px solid var(--g-anel); } .imt-header.is-over-dark .imt-panel-grupo h4{color:var(--gold-1)} /* Cada entrada avança no hover. `translateX` é compositor: a cortina inteira não repinta por causa de um link. */ .imt-panel-item{ display:block; padding:.4rem 0; font-family:var(--sans); font-size:var(--t-s); font-weight:300; line-height:1.5; color:var(--g-text); transition:transform var(--t-resposta) var(--ease),color var(--t-resposta) var(--ease); } .imt-panel-item:hover{transform:translateX(5px);color:var(--gold-3)} .imt-header.is-over-dark .imt-panel-item:hover{color:var(--gold-1)} .imt-panel-item em{ display:block; font-style:normal; font-family:var(--display); font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--g-text-soft); margin-top:.12rem; } /* A CASCATA DE ENTRADA. Os grupos chegam depois da lâmina, não junto — a folha desce, e só então o conteúdo assenta. */ .imt-panel-cols > *{ opacity:0; transform:translateY(10px); transition:opacity var(--t-resposta) var(--ease),transform var(--t-resposta) var(--ease); } .imt-drop[data-open="true"] .imt-panel-cols > *{opacity:1;transform:none} .imt-drop[data-open="true"] .imt-panel-cols > *:nth-child(1){transition-delay:.09s} .imt-drop[data-open="true"] .imt-panel-cols > *:nth-child(2){transition-delay:.16s} .imt-badge-mec{ font-family:var(--display); font-size:var(--t-micro); font-style:normal; font-weight:600; letter-spacing:.1em; padding:.14rem .38rem; border-radius:2px; background:var(--gold-grad); color:#2E2205; margin-left:.45rem; } .imt-panel-foot{ width:100%; max-width:var(--wrap); margin:clamp(1.4rem,2.6vw,2.2rem) auto 0; padding:1.2rem var(--gut) 0; border-top:1px solid var(--g-anel); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:var(--t-xs); color:var(--g-text-soft); } .imt-panel-foot a{ display:inline-flex;align-items:center;gap:.5rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-3); transition:gap var(--t-resposta) var(--ease); } .imt-header.is-over-dark .imt-panel-foot a{color:var(--gold-1)} .imt-panel-foot a:hover{gap:.85rem} /* ── CTAs do header ──────────────────────────────────────────────── */ .imt-header-ctas{display:flex;align-items:center;gap:.5rem;flex:none} .imt-header-btn{ display:inline-flex;align-items:center;gap:.45rem; font-size:var(--t-xs); font-weight:500; letter-spacing:.06em; padding:.62rem 1.05rem; border-radius:3px; border:1px solid transparent; transition:background-color var(--t-resposta) var(--ease),color var(--t-bar) linear, border-color var(--t-bar) linear,transform var(--t-resposta) var(--ease); } .imt-header-btn:hover{transform:translateY(-1px)} .imt-header-btn-ghost{border-color:var(--g-anel);color:var(--g-text)} .imt-header-btn-ghost:hover{border-color:currentColor} .imt-header-btn-gold{background:var(--gold-grad);color:#2E2205} /* ── Botão da gaveta ─────────────────────────────────────────────── */ .imt-burger{ display:none; width:42px;height:42px; align-items:center;justify-content:center; border-radius:3px; border:1px solid var(--g-anel); } .imt-burger i, .imt-burger i::before, .imt-burger i::after{ display:block; width:18px;height:1.5px; background:var(--g-text); transition:transform var(--t-resposta) var(--ease),opacity var(--t-toque) linear,background-color var(--t-bar) linear; } .imt-burger i{position:relative} .imt-burger i::before, .imt-burger i::after{content:"";position:absolute;left:0} .imt-burger i::before{top:-6px} .imt-burger i::after{top:6px} .imt-burger[aria-expanded="true"] i{background-color:transparent} .imt-burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)} .imt-burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)} /* ══════════════════════════════════════════════════════════════════ 5. GAVETA MOBILE ══════════════════════════════════════════════════════════════════ */ .imt-scrim{ position:fixed;inset:0;z-index:290; background:rgba(20,20,20,.5); opacity:0; transition:opacity var(--t-resposta) var(--ease); } .imt-scrim.is-on{opacity:1} .imt-drawer{ position:fixed; top:0;right:0;bottom:0; z-index:310; width:min(400px,88vw); padding:calc(var(--header-h) + 1.5rem) 1.5rem 2rem; background-color:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(30px) saturate(170%); backdrop-filter:blur(30px) saturate(170%); border-left:1px solid var(--hair-l-soft); overflow-y:auto; overscroll-behavior:contain; transform:translateX(100%); visibility:hidden; transition:transform var(--t-resposta) var(--ease),visibility var(--t-resposta); } .imt-drawer.is-open{transform:translateX(0);visibility:visible} .imt-drawer-n{ font-size:var(--t-micro); letter-spacing:.1em; color:var(--gold-3); margin-right:.7rem; } .imt-drawer-sub, .imt-drawer-link{ display:flex;align-items:center;width:100%; font-family:var(--display); font-size:var(--t-m); font-weight:400; text-align:left; padding:1rem 0; border-bottom:1px solid var(--hair-l-soft); } .imt-drawer-sub .imt-caret{margin-left:auto;transition:transform var(--t-toque) var(--ease)} .imt-drawer-sub[aria-expanded="true"] .imt-caret{transform:rotate(180deg)} /* 0fr → 1fr anima altura sem conhecer a altura. */ .imt-sub{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--t-resposta) var(--ease); } .imt-sub.is-open{grid-template-rows:1fr} .imt-sub > div{overflow:hidden} .imt-sub a{ display:block; font-size:var(--t-s); color:var(--gray); padding:.6rem 0 .6rem 2.1rem; } .imt-sub a:hover{color:var(--gold-3)} .imt-drawer-foot{display:flex;flex-direction:column;gap:.6rem;margin-top:1.8rem} .imt-drawer-foot .imt-header-btn{justify-content:center;padding:.9rem 1.2rem} .imt-drawer-nota{ font-size:var(--t-micro); line-height:1.6; color:var(--gray-soft); margin-top:.6rem; } /* ══════════════════════════════════════════════════════════════════ 6. RODAPÉ O tema base entregava