/* ========================================================================= FAESLA — folha única do site público. REGRA CENTRAL: toda cor vem de um token. Nenhum componente sabe em que tema está. `:root` define os tokens escuros; `.secao--light` REDEFINE os mesmos nomes. Por isso card, FAQ, formulário e tabela se adaptam sem regra própria. Ao escrever CSS novo aqui: nunca fixe uma cor literal. Use var(--texto), var(--suave), var(--linha), var(--cartao-bg). Cor literal quebra no claro. ========================================================================= */ /* --------------------------------------------------------------- tokens */ /* Paleta extraída do brasão real (logo-faesla-01_clipped_rev_1.png), não inventada: azul heráldico #000060, xadrez vermelho #900000, gelo das ondas do lago #b4d2f5. --brand é o vermelho (a cor de selo/lacre — o elemento que chama ação numa heráldica), --bg é o azul quase-preto do campo do escudo. Ver _docs/projeto/design.md. */ :root { /* Injetados pelo painel no : --brand --brand-2 --brand-3 --bg --surface e as famílias --f-display --f-body --f-accent --f-mono. Os de baixo derivam deles e mudam por tema. */ --texto: #f2ede1; --suave: #aab3d6; --linha: rgba(242, 237, 225, .14); --cartao-bg: rgba(242, 237, 225, .05); --cartao-borda: rgba(242, 237, 225, .12); --fundo: var(--bg); /* Exceção 1: a marca para TEXTO/ÍCONE precisa de contraste próprio. --brand (o vermelho) continua sendo o selo — fundo do CTA principal. Para link, ícone e etiqueta usamos o azul-gelo do brasão: distingue "ação" de "estrutura" sem sair da família heráldica. */ --brand-tinta: #b9cdf2; /* Exceção 2: logo de terceiro muda de tratamento conforme o tema. */ --logo-filtro: brightness(0) invert(1); --logo-opacidade: .75; /* Textura de selo gravado: xadrez muito sutil, no mesmo espírito do campo do escudo. Usada em faixas, nunca em cima de texto corrido. */ --xadrez: repeating-conic-gradient( color-mix(in srgb, var(--brand) 10%, transparent) 0% 25%, transparent 0% 50% ); --xadrez-tam: 56px; --raio: 14px; --raio-p: 9px; --envelope: 1180px; --respiro: clamp(2.5rem, 6vw, 4.5rem); --sombra: 0 18px 50px rgba(3, 7, 22, .45); } /* Tema claro: MESMOS nomes, outros valores — aqui, pergaminho, não cinza-azul genérico. Casa com o brasão em papel timbrado. */ .secao--light { --texto: #171d3f; --suave: #5a5748; --linha: rgba(23, 20, 10, .14); --cartao-bg: #fffdf7; --cartao-borda: rgba(23, 20, 10, .10); --fundo: #f6f1e4; --brand-tinta: #16265c; /* navy escurecido — passa contraste no claro */ --logo-filtro: brightness(0); --logo-opacidade: .55; --xadrez: repeating-conic-gradient( color-mix(in srgb, var(--brand) 6%, transparent) 0% 25%, transparent 0% 50% ); --sombra: 0 14px 36px rgba(23, 20, 10, .12); } /* ----------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html, body { overflow-x: hidden; } /* ARMADILHA: o menu mobile usa position:fixed + transform:translateX(100%) para deslizar da direita (painel full-screen, não dropdown estreito). Um elemento fixed com transform ainda soma na largura rolável do documento mesmo fora da tela — sem o overflow-x acima, a página ganha barra de rolagem horizontal em qualquer página com o menu mobile presente (ou seja, todas). Já pago uma vez; não remova esta linha sem testar a 390px. */ body { margin: 0; background: var(--bg); color: var(--texto); font-family: var(--f-body), system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* A navbar virou position:fixed (é uma ilha flutuante, saiu do fluxo). Sem isto o primeiro título de cada página nasce embaixo dela. Medido contra a altura real do cabeçalho (ver historico.md) com folga. */ main { display: block; padding-top: 8rem; } @media (max-width: 560px) { main { padding-top: 6.5rem; } /* mesma conta do fix acima, com a folga menor do cabeçalho no celular */ .heroi { margin-top: -6.5rem; padding-top: calc(6.5rem + clamp(2.5rem, 6vw, 4.5rem)); } .capa-curso { margin-top: -6.5rem; padding-top: calc(6.5rem + clamp(2rem, 5vw, 3.5rem)); } .capa-simples { margin-top: -6.5rem; padding-top: calc(6.5rem + clamp(1.5rem, 4vw, 2.5rem)); } } img { max-width: 100%; height: auto; display: block; } /* ARMADILHA: com height:auto, um SVG sem width/height explícitos renderiza com ~2px. Icons::svg() sempre emite os dois — não remova de lá. */ svg { height: auto; flex: none; } a { color: inherit; } /* ARMADILHA: table/button/input/select/textarea NÃO herdam a fonte do body por padrão no UA stylesheet — sem isto a matriz curricular (a peça mais lida do site) renderiza em Times New Roman do sistema, não na Libre Franklin da marca. Regra clássica de reset que falta em quase todo CSS novo; já pegou a tabela aqui. */ table, button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3 { font-family: var(--f-display), system-ui, sans-serif; line-height: 1.15; margin: 0 0 .5em; } p { margin: 0 0 1em; } ul { margin: 0; padding: 0; } :focus-visible { outline: 3px solid var(--brand-tinta); outline-offset: 3px; border-radius: 4px; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .pular { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--brand); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--raio-p) 0; } .pular:focus { left: 0; } /* Isca do antispam. Fora da tela, mas sem display:none — alguns robôs ignoram. */ .isca { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .envelope { width: min(100% - 2.5rem, var(--envelope)); margin-inline: auto; } .envelope--estreito { width: min(100% - 2.5rem, 760px); } /* --------------------------------------------------------------- seções */ .secao { position: relative; background: var(--fundo); color: var(--texto); padding-block: var(--respiro); } .secao--fina { padding-block: clamp(2rem, 4vw, 3rem); } /* A textura vai na FAIXA, não na seção: mascarar seção por seção vira listra nas emendas entre duas claras vizinhas. Por isso só a primeira da corrida recebe o grão, com altura total da faixa. */ .secao--light.band-start { border-top: 1px solid var(--linha); } .secao--light.band-end { border-bottom: 1px solid var(--linha); } /* Transição suave entre bloco escuro e bloco claro: em vez de só a linha fina (corte seco), um gradiente esmaece a cor escura na borda de entrada/ saída do bloco claro, por cima da própria textura. --bg NÃO é redefinido dentro de .secao--light (só --fundo é) — por isso o gradiente aqui ainda enxerga a cor escura real que vem antes/depois, mesmo estando "dentro" da seção clara. É esse detalhe do sistema de tokens que torna o efeito possível sem duplicar cor em nenhum lugar. Fica no padding da seção (nunca chega perto do título) e não intercepta clique — pointer-events:none. */ .secao--light.band-start { position: relative; } .secao--light.band-start::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 0; pointer-events: none; height: clamp(3rem, 8vw, 5.5rem); background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 45%, transparent), transparent); } .secao--light.band-end { position: relative; } .secao--light.band-end::after { content: ""; position: absolute; inset: auto 0 0 0; z-index: 0; pointer-events: none; height: clamp(3rem, 8vw, 5.5rem); background: linear-gradient(to top, color-mix(in srgb, var(--bg) 45%, transparent), transparent); } .secao--light.band-start > *, .secao--light.band-end > * { position: relative; z-index: 1; } .secao__titulo { font-family: var(--f-display), serif; font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 600; letter-spacing: -.015em; } .secao__titulo--centro { text-align: center; } /* 52ch bastava com Plus Jakarta Sans, mas o "0" de Bodoni Moda (a fonte geral trocada nesta rodada) é bem mais estreito que o de uma sans-serif — `ch` é definido pela largura do algarismo "0" da própria família, então a MESMA contagem de caracteres passou a caber bem menos pixel. Título "Como funciona estudar a distância" quebrava linha por causa disso. 68ch aqui ≈ os mesmos ~52ch de antes, medido de novo nesta fonte. */ .secao__cabecalho { max-width: 68ch; margin-bottom: 2.5rem; } .secao__linha-fina { color: var(--suave); font-size: 1.05rem; margin: 0; } /* A serifada itálica vale UMA vez por página. Repetir anula o efeito. */ .destaque { font-family: var(--f-accent), Georgia, serif; font-style: italic; font-weight: 500; background: linear-gradient(100deg, var(--brand-2), var(--brand-3)); -webkit-background-clip: text; background-clip: text; color: transparent; } .etiqueta { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-mono), ui-monospace, monospace; font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--brand-tinta); margin: 0 0 1rem; } .prosa { color: var(--suave); } .prosa p { margin-bottom: 1em; } .prosa--longa { font-size: 1.02rem; } .prosa .lista, .lista { list-style: none; display: grid; gap: .55rem; margin: 0 0 1.2rem; } .lista li { position: relative; padding-left: 1.5rem; } .lista li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-tinta); } .lista-limpa { list-style: none; } .sutil { color: var(--suave); font-size: .9rem; } .nota-rodape { color: var(--suave); font-size: .9rem; margin-top: 1.5rem; border-left: 3px solid var(--linha); padding-left: 1rem; } /* --------------------------------------------------------------- botões */ .botao { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .78rem 1.35rem; white-space: nowrap; border: 1px solid transparent; border-radius: 999px; font-family: var(--f-body), sans-serif; font-size: .96rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .18s ease, background-color .18s ease, border-color .18s ease; } .botao:hover { transform: translateY(-2px); } .botao--grande { padding: .95rem 1.7rem; font-size: 1rem; } .botao--pequeno { padding: .55rem 1rem; font-size: .87rem; } .botao--bloco { width: 100%; } .botao--brand { background: var(--brand); color: #fff; } .botao--brand:hover { background: color-mix(in srgb, var(--brand) 85%, #fff); } .botao--vazado { border-color: var(--linha); color: var(--texto); background: transparent; } .botao--vazado:hover { border-color: var(--brand-tinta); color: var(--brand-tinta); } .botao--zap { background: var(--cartao-bg); border-color: var(--cartao-borda); color: var(--texto); } .botao--zap:hover { border-color: var(--brand-tinta); color: var(--brand-tinta); } @media (prefers-reduced-motion: reduce) { .botao, .botao:hover { transition: none; transform: none; } } /* ------------------------------------------------------------ cabeçalho */ /* Navbar ILHA — flutua com respiro das bordas, não gruda na viewport (inspirado em portrait.so: fina, com espaço, sem faixa opaca colada no topo). SEMPRE visível ao rolar — não esconde mais (versão anterior escondia ao descer/reaparecia ao subir; pediu pra ficar sempre flutuante). O que muda com o scroll agora é só o acabamento: branco puro no topo da página, vidro translúcido depois de rolar alguns pixels (classe `.rolado`, alternada por `site.js`). `.cabecalho` é só o trilho fixo (sem fundo, sem bloquear clique); quem tem fundo, borda e sombra é `.cabecalho__interno`, a ilha em si. ILHA SEMPRE CLARA — mesmos nomes de token de `.secao--light` (design.md, "REGRA CENTRAL"), redeclarados aqui em vez de reaproveitar a classe `.secao--light` (a ilha não é uma "seção", reusar o nome confundiria quem for ler o HTML). Antes a ilha usava os tokens escuros do `:root` o tempo todo — pediu pra virar clara em toda página, herói escuro incluso, pelas mesmas duas razões: legibilidade de texto pequeno (as legendas dos ícones de portal ficavam borradas — ver mais abaixo) e porque a logo completa (`logo-horizontal.png`) é navy sólido, quase invisível sobre vidro escuro. ARMADILHA: `--bg` NÃO é redefinido aqui (só `--fundo` é, igual à `.secao--light` original) — mas o painel mobile (`.menu` no breakpoint ≤1240px) é filho de `.cabecalho__interno` e PRECISA continuar escuro (é a "página do brasão" cheia de tela, não a ilha). Por isso ele reafirma os tokens escuros por conta própria lá embaixo — sem isso, herdaria texto navy sobre fundo navy do painel full-screen e ficaria ilegível. */ .cabecalho { position: fixed; top: 0; left: 0; right: 0; z-index: 90; padding: .9rem 1rem 0; pointer-events: none; transition: transform .35s ease; } @media (prefers-reduced-motion: reduce) { .cabecalho { transition: none; } } .cabecalho__interno { --texto: #171d3f; --suave: #5a5748; --linha: rgba(23, 20, 10, .16); --cartao-bg: #fffdf7; --cartao-borda: rgba(23, 20, 10, .12); --fundo: #f6f1e4; --brand-tinta: #16265c; --sombra: 0 14px 36px rgba(23, 20, 10, .12); pointer-events: auto; display: flex; align-items: center; gap: 1.1rem; /* Mais larga que o `--envelope` das seções de propósito — "Pós- graduação" e "Fale no WhatsApp" quebravam linha com a ilha do mesmo tamanho do conteúdo (a navbar tem mais itens lado a lado que qualquer faixa de seção, então precisa de mais fôlego). Os gaps da navbar também foram apertados (aqui e em `.menu`/`.menu__lista` abaixo) — só aumentar a ilha não bastava, o conteúdo ainda transbordava do container em telas de 1280–1366px. */ /* `width:100%` é necessário além do `max-width` — um flex container em fluxo normal usa sizing "fit-content" (como inline-block), não "fill-available"; sem isso a ilha ficava do tamanho do conteúdo (encolhia pro `--envelope` antigo) e o botão de WhatsApp vazava pra fora da borda arredondada em vez de a ilha crescer pra caber nele. */ width: 100%; max-width: min(97vw, calc(var(--envelope) + 8rem)); margin-inline: auto; padding: .8rem 1rem; /* Branco puro no topo da página; vidro translúcido só depois de rolar (classe `.rolado`, ver `.cabecalho.rolado` abaixo) — as duas propriedades têm transição própria pra não caber notar o corte. */ background: #fff; backdrop-filter: none; border: 1px solid var(--cartao-borda); border-radius: var(--raio); box-shadow: 0 10px 30px rgba(23, 20, 10, .16); transition: background-color .3s ease, backdrop-filter .3s ease; } .cabecalho.rolado .cabecalho__interno { background: color-mix(in srgb, var(--cartao-bg) 82%, transparent); backdrop-filter: blur(18px); } @media (prefers-reduced-motion: reduce) { .cabecalho__interno { transition: none; } } /* Logo completa (brasão + FAESLA já desenhados juntos no arquivo), só ela — sem subtítulo institucional ao lado nem embaixo. Um "Faculdade de Ensino Superior do Lago" por extenso ao lado da logo já tinha invadido o primeiro item do menu antes (por isso o texto tinha virado coluna); a coluna resolvia a sobreposição mas ainda disputava altura com o resto da ilha. Tirado de vez — o nome completo já está tanto na imagem (pequeno demais pra ler, mas contextual) quanto na `alt` (acessível). */ .marca { text-decoration: none; display: flex; align-items: center; color: var(--texto); flex: none; } .marca__logo { height: 74px; width: auto; flex: none; } /* 64px +15% (seção 21 → 28 do historico.md) */ .menu { margin-left: auto; display: flex; align-items: center; gap: .9rem; } .menu__lista { display: flex; gap: .1rem; list-style: none; } .menu__item { position: relative; } .menu__item::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .6rem; } .menu__link { display: flex; align-items: center; gap: .3rem; white-space: nowrap; text-decoration: none; color: color-mix(in srgb, var(--texto) 82%, transparent); font-size: .93rem; font-weight: 600; padding: .55rem .4rem; border-radius: var(--raio-p); } .menu__link:hover, .menu__link:focus-visible { color: var(--texto); } .menu__seta { transition: transform .18s ease; } .menu__item:hover .menu__seta, .menu__item:focus-within .menu__seta { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .menu__seta { transition: none; } } /* Dropdown sem JS: só :hover e :focus-within. */ .submenu { position: absolute; top: calc(100% + .6rem); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 15rem; list-style: none; background: var(--cartao-bg); border: 1px solid var(--cartao-borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: .5rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; } .menu__item:hover .submenu, .menu__item:focus-within .submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition: opacity .16s ease, transform .16s ease; } @media (prefers-reduced-motion: reduce) { .submenu { transition: none; } } .submenu a { display: block; padding: .6rem .8rem; border-radius: var(--raio-p); color: var(--texto); text-decoration: none; font-size: .89rem; } .submenu a:hover, .submenu a:focus-visible { background: var(--cartao-bg); color: var(--brand-tinta); } .submenu__grau { display: block; font-size: .7rem; color: var(--suave); margin-top: .1rem; } /* Destaque de acesso — Portal do Aluno/Professor de volta na barra desktop, como par de botões compactos com mini legenda (ícone + palavra bem pequena EMBAIXO, não do lado). Rótulo por extenso ("Aluno"/"Professor") ao lado do ícone chegou a caber visualmente, mas espremia o CTA de "Fale no WhatsApp" para 3 linhas (`.menu__lista` já usa boa parte da largura da ilha) — empilhar em vez de colocar lado a lado resolve o mesmo problema de largura sem voltar a esconder o rótulo por trás de um `title` (só tooltip no mouse, some no toque). Mesmo raciocínio de espaço que tirou os portais da barra na rodada anterior (historico.md, seção 15), resolvido agora por empilhamento em vez de remoção ou de esconder texto. */ .portal-destaque { display: flex; align-items: center; gap: .35rem; padding-left: .7rem; margin-left: .1rem; border-left: 1px solid var(--linha); } .portal-pill { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem; min-width: 3.4rem; flex: none; /* Largura fixa (3.1rem) deixava "Professor" grudado nas bordas — a palavra não cabia no respiro. Virou min-width: cada botão cresce para o próprio conteúdo, com padding real dos dois lados. */ padding: .4rem .45rem .35rem; border-radius: calc(var(--raio-p) * .5); /* metade do raio padrão — pedido, menos arredondado que o resto da ilha */ border: 1px solid var(--linha); color: var(--texto); text-decoration: none; transition: border-color .16s ease, color .16s ease, background-color .16s ease, transform .16s ease; } .portal-pill svg { flex: none; } /* Era .58rem a 82% de opacidade — pequeno E semitransparente demais, ficava borrado (relatado pelo cliente). Maior e opaco: nítido. */ .portal-pill__legenda { font-size: .66rem; font-weight: 700; letter-spacing: .01em; line-height: 1; white-space: nowrap; } .portal-pill:hover, .portal-pill:focus-visible { border-color: var(--brand-tinta); color: var(--brand-tinta); background: color-mix(in srgb, var(--brand) 10%, transparent); transform: translateY(-1px); } .menu__portais { display: none; gap: .9rem; } .menu__portal { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--suave); text-decoration: none; } .menu__portal:hover { color: var(--brand-tinta); } /* Verde oficial do WhatsApp (#25d366), não o azul da marca — esse botão é a ÚNICA chamada para o WhatsApp que sobrou no site (as outras duas — bolha flutuante e botão do herói — foram removidas); o verde reforça de cara que é o canal de WhatsApp, sem precisar ler o texto. */ .menu__cta { --whatsapp: #25d366; background: var(--whatsapp); color: #fff; border: 1px solid color-mix(in srgb, var(--whatsapp) 55%, #06210f); box-shadow: 0 8px 20px color-mix(in srgb, var(--whatsapp) 45%, transparent); padding: .78rem .9rem; /* menor que o padrão do .botao — a navbar é apertada */ } .menu__cta:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--whatsapp) 88%, #000); } .menu-botao { display: none; margin-left: auto; /* Alvo de toque mínimo 44×44px — .5rem de padding + ícone de 24px não garantia isso sozinho (medido 42×49px). */ min-width: 44px; min-height: 44px; background: transparent; border: 1px solid var(--linha); border-radius: var(--raio-p); color: var(--texto); padding: .5rem; cursor: pointer; } .menu-botao__fechar { display: none; } .menu-botao[aria-expanded="true"] .menu-botao__abrir { display: none; } .menu-botao[aria-expanded="true"] .menu-botao__fechar { display: block; } /* ------------------------------------------------------------------ herói */ /* As três "capas" (heroi, capa-curso, capa-simples) têm um filho absolutamente posicionado (`inset:0`) que desenha o xadrez/gradiente — mas a CAIXA da seção só começa depois do `padding-top` do `main` (o respiro que evita que o título nasça atrás da ilha flutuante). Resultado: de y=0 até esse respiro, o que aparece é o `--bg` CHAPADO do `body`; a textura só começa depois — um corte visível bem na borda inferior do cabeçalho. Corrigido "puxando" a seção para cima com margin-top negativo (cancela o padding-top do `main`) e devolvendo o mesmo respiro visual via padding-top somado — a caixa (e a textura) agora cobre também a faixa atrás do cabeçalho, sem mudar a posição de nenhum conteúdo. */ .heroi { margin-top: -8rem; padding-top: calc(8rem + clamp(2.5rem, 6vw, 4.5rem)); padding-bottom: clamp(3.5rem, 9vw, 7.5rem); overflow: hidden; background: var(--bg); } /* Foto de campus (fachada de faculdade, licença Unsplash — ver creditos-imagens.md) cobrindo o herói inteiro, com uma camada navy por cima (~68% de opacidade — pedido "60% ou mais") pra manter o título e o texto legíveis sobre qualquer trecho da imagem. Os dois halos de cor ficam por cima da camada navy, mais discretos que antes, só pra não achatar o degradê em um retângulo sólido único. */ .heroi__foto { /* z-index 0, IGUAL ao de `.heroi__fundo` — negativo não funciona aqui: `.heroi` tem `background: var(--bg)` sólido no próprio elemento (não num pseudo/filho), e um z-index negativo pinta atrás desse fundo da seção, não só atrás dos outros filhos. Com z-index igual, quem manda é a ordem no HTML — a foto vem primeiro, a camada navy depois, então a camada cobre a foto (não o contrário). */ position: absolute; inset: 0; z-index: 0; pointer-events: none; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; } .heroi__fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(65% 55% at 12% -10%, color-mix(in srgb, var(--brand-3) 22%, transparent), transparent 70%), radial-gradient(55% 50% at 100% 110%, color-mix(in srgb, var(--brand) 24%, transparent), transparent 70%), color-mix(in srgb, var(--bg) 68%, transparent); } .heroi__marca-agua { position: absolute; z-index: 0; pointer-events: none; user-select: none; right: clamp(-8rem, -4vw, -2rem); top: 50%; transform: translateY(-50%); height: clamp(22rem, 46vw, 40rem); width: auto; opacity: .1; filter: brightness(0) invert(1); will-change: transform; } .heroi__interno { position: relative; z-index: 1; max-width: 62ch; } .heroi__etiqueta { display: inline-flex; align-items: center; gap: .55rem; background: color-mix(in srgb, var(--texto) 08%, transparent); backdrop-filter: blur(14px); border: 1px solid color-mix(in srgb, var(--texto) 18%, transparent); border-radius: 999px; padding: .5rem 1rem .5rem .7rem; font-family: var(--f-mono), monospace; font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--texto); } .heroi__etiqueta svg { color: var(--brand-3); } .heroi__titulo { font-family: var(--f-display), serif; font-weight: 600; font-size: clamp(2.3rem, 6.4vw, 4.4rem); line-height: 1.08; letter-spacing: -.01em; margin-top: 1.1rem; color: var(--texto); } .heroi__texto { color: color-mix(in srgb, var(--texto) 78%, transparent); font-size: clamp(1.02rem, 1.6vw, 1.18rem); max-width: 52ch; } .heroi__acoes { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; } .heroi__numeros { position: relative; z-index: 1; /* Consulta de contêiner (não de viewport) pro tamanho de fonte do `dd` abaixo — o card tem largura MÁXIMA fixa (62ch em px, não elástica), então além de um certo ponto ele para de crescer mas a viewport continua; um clamp baseado em `vw` não sabe disso e cresce sem parar, saindo maior que a própria coluna. Baseado no card (`cqi`), o texto sempre acompanha a largura real disponível. */ container-type: inline-size; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); /* Largura antiga (34rem) forçava quebra de linha em "100% a distância" e no texto mais longo do terceiro card — o card cresce com o texto agora, até o mesmo teto do parágrafo do herói (62ch), em vez de um teto fixo menor que o próprio conteúdo. */ gap: 1rem; margin: clamp(2.5rem, 6vw, 4rem) 0 0; max-width: 62ch; width: 100%; background: color-mix(in srgb, var(--texto) 07%, transparent); backdrop-filter: blur(16px); border: 1px solid color-mix(in srgb, var(--texto) 16%, transparent); border-radius: var(--raio); padding: 1.4rem 1.2rem; } .heroi__numeros div { text-align: center; border-right: 1px solid color-mix(in srgb, var(--texto) 14%, transparent); min-width: 0; } .heroi__numeros div:last-child { border-right: 0; } .heroi__numeros dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: color-mix(in srgb, var(--texto) 65%, transparent); white-space: nowrap; } .heroi__numeros dd { margin: .3rem 0 0; font-family: var(--f-mono), monospace; white-space: nowrap; font-size: clamp(.62rem, 2cqi, 1.15rem); font-weight: 600; color: var(--texto); } /* Contador: site.js sobe o número de 0 até o valor real quando entra na viewport. data-alvo carrega o valor final; o texto nasce em "0". */ [data-contador] { font-variant-numeric: tabular-nums; } /* Badges de vidro fosco — pequenos, sob o CTA, resumindo os diferenciais reais sem repetir a seção "O que você recebe" mais abaixo. */ .heroi__selos { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; } .badge-vidro { display: inline-flex; align-items: center; gap: .45rem; background: color-mix(in srgb, var(--texto) 8%, transparent); backdrop-filter: blur(14px); border: 1px solid color-mix(in srgb, var(--texto) 16%, transparent); border-radius: 999px; padding: .45rem .9rem; font-size: .82rem; color: color-mix(in srgb, var(--texto) 88%, transparent); } .badge-vidro svg { color: var(--brand-3); } /* ------------------------------------------------------------------ selo */ .selo { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; background: var(--cartao-bg); border: 1px solid var(--cartao-borda); border-left: 3px solid var(--brand); border-radius: var(--raio); padding: 1.5rem; } .selo__icone { color: var(--brand-tinta); } .selo__texto { flex: 1 1 20rem; min-width: 0; } .selo__titulo { font-size: 1.15rem; margin-bottom: .2rem; } .selo__texto p { margin: 0; color: var(--suave); font-size: .95rem; } /* Selo-documento: miniatura clicável do scan real da Portaria 530/2021 (não uma foto de banco de imagens — é o documento). A origem é baixa resolução (496×360), por isso o tratamento é "prova visual em miniatura", não "documento para ler na tela" — o link de verdade pro texto oficial continua sendo o botão "Conferir no e-MEC" ao lado. */ .selo__documento { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--suave); font-size: .82rem; border: 1px solid var(--cartao-borda); border-radius: var(--raio-p); padding: .4rem .7rem .4rem .4rem; } .selo__documento:hover { border-color: var(--brand-tinta); color: var(--brand-tinta); } .selo__documento img { width: 40px; height: 29px; object-fit: cover; border-radius: 4px; border: 1px solid var(--cartao-borda); } /* Modal do documento — nativo em vez de nova aba. O UA já dá de graça: centralização na tela, foco preso lá dentro, Esc fecha, e um ::backdrop pronto pra escurecer o resto. Só reseta a aparência default (borda/fundo/padding do navegador) para os tokens do projeto. */ .modal-documento { max-width: min(92vw, 30rem); width: 100%; padding: 1.3rem; margin: auto; border: 1px solid var(--cartao-borda); border-radius: var(--raio); background: var(--cartao-bg); color: var(--texto); box-shadow: var(--sombra); } .modal-documento[open] { display: flex; flex-direction: column; gap: 1rem; animation: modal-documento-entra .22s ease; } @keyframes modal-documento-entra { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .modal-documento[open] { animation: none; } } .modal-documento::backdrop { background: color-mix(in srgb, #080d24 72%, transparent); backdrop-filter: blur(3px); } .modal-documento__fechar { position: absolute; top: .7rem; right: .7rem; z-index: 1; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: 999px; border: 1px solid var(--cartao-borda); background: var(--cartao-bg); color: var(--texto); cursor: pointer; transition: border-color .16s ease, color .16s ease; } .modal-documento__fechar:hover, .modal-documento__fechar:focus-visible { border-color: var(--brand-tinta); color: var(--brand-tinta); } .modal-documento__img { display: block; width: 100%; margin-inline: auto; border-radius: var(--raio-p); border: 1px solid var(--cartao-borda); box-shadow: 0 8px 24px rgba(3, 7, 22, .18); } .modal-documento__legenda { margin: 0; font-size: .84rem; color: var(--suave); text-align: center; line-height: 1.5; } .modal-documento__legenda a { color: var(--brand-tinta); } /* ----------------------------------------------------------------- grades */ /* minmax(0,1fr) SEMPRE: sem isso conteúdo largo estoura a coluna. */ .grade { display: grid; gap: 1.25rem; } .grade--duas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); } .grade--tres { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .grade--cursos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); } .grade--pos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } .duas-colunas { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); align-items: start; } .duas-colunas--form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } @media (max-width: 900px) { .duas-colunas--form { grid-template-columns: minmax(0, 1fr); } } /* Fotos reais de pessoas (ver creditos-imagens.md — Unsplash, licença gratuita) ao lado de texto em `.duas-colunas`. Cor natural, sem grayscale/duotone: aqui a foto é conteúdo, não fundo atrás de texto — a regra "foto de fundo é relevo, não cor" (design.md, seção 5) vale para textura por trás de título, não para um retrato que precisa gerar afinidade com quem olha. */ .figura { position: relative; margin: 0; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--cartao-borda); box-shadow: var(--sombra); aspect-ratio: 4 / 5; } .figura img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Parallax leve: a foto some 18% maior que a moldura (`.figura` fica com overflow:hidden) e o JS desloca a `img` verticalmente conforme o scroll — sobra sempre imagem pra revelar, nunca aparece um vão vazio na borda. Só roda em telas > 560px e nunca com prefers-reduced-motion (ver site.js). Sem JS ou nesses casos a `img` fica parada em transform: none — a foto continua 100% legível, o parallax é só um extra. */ @media (min-width: 561px) { .figura[data-parallax] img { height: 122%; margin-top: -11%; will-change: transform; } } .figura__selo { position: absolute; left: 1.1rem; bottom: 1.1rem; right: 1.1rem; z-index: 1; display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; padding: .6rem .9rem; border-radius: var(--raio-p); background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(6px); color: #fff; font-size: .82rem; } .figura__selo strong { font-weight: 700; } /* Página de contato: a foto entra ao lado do texto, não como bloco inteiro de coluna — senão fica mais alta que o formulário vizinho. */ .figura--atendimento { float: left; width: 11rem; margin: 0 1.2rem .8rem 0; } @media (max-width: 560px) { .figura--atendimento { float: none; width: 100%; max-width: 16rem; margin-bottom: 1.2rem; } } /* Painel-selo: substitui foto de banco de imagens onde não há foto real e com boa procedência (ver creditos-imagens.md). O brasão + uma moldura de filete dupla, como o selo de um diploma — mais verdadeiro à marca do que um "executivo genérico de banco de imagens" comprado. */ .emblema-painel { position: relative; display: grid; place-items: center; gap: 1.4rem; padding: clamp(2.5rem, 6vw, 4rem) 2rem; border-radius: var(--raio); background: var(--surface); border: 1px solid var(--cartao-borda); text-align: center; overflow: hidden; } .emblema-painel::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--xadrez); background-size: var(--xadrez-tam) var(--xadrez-tam); opacity: .45; mask-image: radial-gradient(65% 65% at 50% 50%, #000, transparent 75%); } .emblema-painel__moldura { position: relative; z-index: 1; display: grid; place-items: center; gap: 1.1rem; padding: 2rem 1.5rem; border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--linha)); outline: 1px solid color-mix(in srgb, var(--brand) 45%, var(--linha)); outline-offset: 6px; border-radius: calc(var(--raio) - 4px); width: 100%; } .emblema-painel__brasao { height: clamp(5rem, 12vw, 7.5rem); width: auto; } .emblema-painel__legenda { font-family: var(--f-mono), monospace; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--suave); } .emblema-painel__ano { font-family: var(--f-display), serif; font-style: italic; font-weight: 600; font-size: 1.4rem; color: var(--brand-tinta); } /* ---------------------------------------------------------------- cartões */ .cartao { background: var(--cartao-bg); border: 1px solid var(--cartao-borda); border-radius: var(--raio); padding: 1.6rem; display: flex; flex-direction: column; gap: .35rem; } .cartao__icone { color: var(--brand-tinta); margin-bottom: .5rem; } .cartao__titulo { font-size: 1.08rem; margin-bottom: .3rem; } .cartao p { color: var(--suave); margin: 0 0 .6rem; font-size: .95rem; } /* ----------------------------------------------------------------- curso */ .curso { display: flex; flex-direction: column; background: var(--cartao-bg); border: 1px solid var(--cartao-borda); border-radius: var(--raio); padding: 1.5rem; transition: border-color .2s ease, transform .2s ease; } .curso:hover { border-color: var(--brand-tinta); transform: translateY(-3px); } @media (prefers-reduced-motion: reduce) { .curso, .curso:hover { transition: none; transform: none; } } .curso__grau { font-family: var(--f-mono), monospace; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--brand-tinta); } .curso__nome { font-size: 1.2rem; margin: .4rem 0 .6rem; } .curso__nome a { text-decoration: none; } .curso__nome a:hover { color: var(--brand-tinta); } .curso__chamada { color: var(--suave); font-size: .93rem; flex: 1; } .curso__dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; padding-top: 1rem; border-top: 1px solid var(--linha); } .curso__dados dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--suave); } .curso__dados dd { margin: .15rem 0 0; font-family: var(--f-mono), monospace; font-size: .9rem; font-weight: 600; } .curso__acoes { display: flex; flex-wrap: wrap; gap: .5rem; } /* --------------------------------------------------------------- passos */ .passos { list-style: none; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: passo; } .passo { position: relative; background: var(--cartao-bg); border: 1px solid var(--cartao-borda); border-radius: var(--raio); padding: 1.5rem; } .passo__numero { font-family: var(--f-mono), monospace; font-size: .8rem; font-weight: 600; color: var(--brand-tinta); letter-spacing: .1em; } .passo__icone { display: block; color: var(--brand-tinta); margin: .6rem 0 .3rem; } .passo__titulo { font-size: 1.05rem; margin: .4rem 0 .35rem; } .passo__texto { color: var(--suave); font-size: .93rem; margin: 0; } /* ---------------------------------------------------------- reconhecimento */ .registros { list-style: none; display: grid; gap: .8rem; max-width: 46rem; margin-inline: auto; } .registro { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; background: var(--cartao-bg); border: 1px solid var(--cartao-borda); border-radius: var(--raio-p); padding: 1rem 1.2rem; } .registro > svg { color: var(--brand-tinta); } .registro div { flex: 1 1 14rem; min-width: 0; display: grid; } .registro span { color: var(--suave); font-size: .88rem; } .registro a { display: inline-flex; align-items: center; gap: .3rem; color: var(--brand-tinta); font-size: .88rem; } /* ------------------------------------------------------------ depoimentos */ .depoimento { margin: 0; background: var(--cartao-bg); border: 1px solid var(--cartao-borda); border-radius: var(--raio); padding: 1.6rem; } .depoimento blockquote { margin: 0 0 1rem; color: var(--texto); font-size: .98rem; } .depoimento figcaption { display: grid; font-size: .88rem; } .depoimento figcaption span { color: var(--suave); } /* -------------------------------------------------------------------- FAQ */ /*
/ nativo: funciona sem JS. */ .faq { display: grid; gap: .6rem; margin-top: 2rem; } .faq__item { background: var(--cartao-bg); border: 1px solid var(--cartao-borda); border-radius: var(--raio-p); } .faq__pergunta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; cursor: pointer; font-weight: 600; list-style: none; } .faq__pergunta::-webkit-details-marker { display: none; } .faq__seta { color: var(--brand-tinta); transition: transform .2s ease; } .faq__item[open] .faq__seta { transform: rotate(180deg); } .faq__resposta { padding: 0 1.3rem 1.2rem; color: var(--suave); } .faq__resposta p:last-child { margin-bottom: 0; } @media (prefers-reduced-motion: reduce) { .faq__seta { transition: none; } } /* -------------------------------------------------------------- formulário */ .caixa-form { background: var(--cartao-bg); border: 1px solid var(--cartao-borda); border-radius: var(--raio); padding: clamp(1.25rem, 3vw, 2rem); } .form__linha { margin-bottom: 1rem; } .form__linha--duas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } .campo { display: grid; gap: .35rem; } .campo__rotulo { font-size: .85rem; font-weight: 600; color: var(--texto); } .campo__rotulo em { color: var(--brand-tinta); font-style: normal; } /* 16px é o mínimo: abaixo disso o iOS dá zoom ao focar o campo. */ .campo__entrada { width: 100%; font: inherit; font-size: 16px; padding: .75rem .9rem; background: var(--fundo); color: var(--texto); border: 1px solid var(--linha); border-radius: var(--raio-p); } .campo__entrada:focus { border-color: var(--brand-tinta); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); } textarea.campo__entrada { resize: vertical; min-height: 6rem; } select.campo__entrada { appearance: none; background-image: none; } .form__rodape { font-size: .88rem; color: var(--suave); text-align: center; margin: 1rem 0 0; } .form__rodape a { color: var(--brand-tinta); } /* --------------------------------------------------------------- contatos */ .contatos { list-style: none; display: grid; gap: .9rem; margin: 1.5rem 0; } .contato { display: flex; align-items: flex-start; gap: .75rem; } .contato__icone { color: var(--brand-tinta); } .contato a { color: var(--texto); text-decoration: none; } .contato a:hover { color: var(--brand-tinta); } .atalhos { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; } /* ------------------------------------------------------------------ capas */ /* O banner de curso herdado do site antigo (fsl_cursos.banner) é gráfico de campanha com paleta genérica — não combina com a marca e alguns têm texto embutido. Em vez de exibi-lo, a capa usa o MESMO tratamento heráldico do herói (xadrez + halo), com um selo de grau (bacharelado/pós/mba) em vez de foto. Ver _docs/projeto/creditos-imagens.md. */ .capa-curso { margin-top: -8rem; padding-top: calc(8rem + clamp(2rem, 5vw, 3.5rem)); padding-bottom: clamp(3rem, 7vw, 5rem); overflow: hidden; background: var(--bg); } .capa-curso__fundo { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(60% 60% at 100% 0%, color-mix(in srgb, var(--brand-3) 22%, transparent), transparent 70%), var(--xadrez); background-size: auto, var(--xadrez-tam) var(--xadrez-tam); } .capa-curso__brasao { position: absolute; z-index: 0; pointer-events: none; user-select: none; right: clamp(-6rem, -3vw, -1rem); bottom: clamp(-4rem, -6vw, -1rem); height: clamp(14rem, 26vw, 22rem); width: auto; opacity: .09; filter: brightness(0) invert(1); } .capa-curso__interno { position: relative; z-index: 1; } .capa-curso__titulo { font-family: var(--f-display), serif; font-weight: 600; font-size: clamp(2rem, 5.4vw, 3.4rem); letter-spacing: -.01em; color: var(--texto); } .capa-curso__chamada { color: color-mix(in srgb, var(--texto) 78%, transparent); font-size: 1.08rem; max-width: 50ch; } .capa-curso__acoes { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; } /* Selo de grau: pequeno emblema circular, como um selo de diploma. */ .selo-grau { display: inline-flex; align-items: center; gap: .5rem; background: color-mix(in srgb, var(--texto) 08%, transparent); backdrop-filter: blur(12px); border: 1px solid color-mix(in srgb, var(--texto) 2%, transparent); border-radius: 999px; padding: .45rem .95rem .45rem .5rem; margin-bottom: 1.1rem; } .selo-grau__icone { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--brand); color: var(--texto); flex: none; } .selo-grau__texto { font-family: var(--f-mono), monospace; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--texto); } .capa-simples { margin-top: -8rem; padding-top: calc(8rem + clamp(1.5rem, 4vw, 2.5rem)); padding-bottom: clamp(3rem, 7vw, 5rem); overflow: hidden; background: var(--bg); position: relative; } .capa-simples::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--xadrez); background-size: var(--xadrez-tam) var(--xadrez-tam); mask-image: radial-gradient(70% 100% at 0% 0%, #000, transparent 70%); } .capa-simples .envelope { position: relative; z-index: 1; } /* Único achado fotográfico real do acervo antigo sem logo/texto embutido: forma abstrata navy do próprio material institucional. Só na CPA — não espalhado pelo site. Ver _docs/projeto/creditos-imagens.md. site.css é servido estático (não passa por PHP) — caminho relativo direto, não o helper asset(). */ .capa-simples--cpa::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url('../img/decorativo/forma-navy-1440.webp'); background-size: cover; background-position: 85% 50%; opacity: .35; mask-image: linear-gradient(100deg, transparent, #000 55%); } .capa-simples__titulo { font-family: var(--f-display), serif; font-weight: 600; font-size: clamp(1.9rem, 4.8vw, 3rem); letter-spacing: -.01em; color: var(--texto); } .capa-simples__chamada { color: color-mix(in srgb, var(--texto) 78%, transparent); font-size: 1.05rem; max-width: 55ch; } .migalhas { font-size: .85rem; color: var(--suave); margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem; } .migalhas a { color: var(--suave); text-decoration: none; } .migalhas a:hover { color: var(--brand-tinta); } .ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(50%, 9rem), 1fr)); gap: 1.2rem; margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--linha); } .ficha dt { font-size: .73rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); } .ficha dd { margin: .25rem 0 0; font-family: var(--f-mono), monospace; font-weight: 600; font-size: 1rem; } /* ----------------------------------------------------------------- tabela */ /* 49 disciplinas no celular estouram a viewport: a rolagem é DA TABELA, nunca do body. */ .tabela-rolagem { overflow-x: auto; border: 1px solid var(--cartao-borda); border-radius: var(--raio); } .matriz { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 28rem; } .matriz th, .matriz td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--linha); } .matriz thead th { font-family: var(--f-mono), monospace; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); background: var(--cartao-bg); position: sticky; top: 0; } .matriz tbody tr:hover { background: var(--cartao-bg); } .matriz .col-numero { text-align: right; font-family: var(--f-mono), monospace; white-space: nowrap; } .matriz .col-sem { width: 3.5rem; color: var(--suave); font-family: var(--f-mono), monospace; } .matriz tfoot th, .matriz tfoot td { font-weight: 700; border-bottom: 0; background: var(--cartao-bg); } /* --------------------------------------------------------------- diversos */ .chamada-larga { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; background: var(--cartao-bg); border: 1px solid var(--cartao-borda); border-radius: var(--raio); padding: clamp(1.5rem, 4vw, 2.75rem); } .chamada-larga > div { flex: 1 1 22rem; min-width: 0; } .chamada-larga .secao__titulo { font-size: clamp(1.4rem, 2.8vw, 2rem); } .faixa-final { text-align: center; } .faixa-final__interno { max-width: 46rem; margin-inline: auto; } .faixa-final .botao { margin-top: 1.5rem; } .endereco { display: flex; align-items: center; justify-content: center; gap: .6rem; color: var(--suave); flex-wrap: wrap; text-align: center; } .endereco svg { color: var(--brand-tinta); } .mapa { margin-top: 1.5rem; border-radius: var(--raio); overflow: hidden; border: 1px solid var(--cartao-borda); aspect-ratio: 16 / 7; } .mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.6); } @media (max-width: 640px) { .mapa { aspect-ratio: 4 / 3; } } .baixar { margin-top: 2rem; } /* ---------------------------------------------------------------- rodapé */ .rodape { position: relative; overflow: hidden; background: var(--surface); color: var(--texto); border-top: 3px solid var(--brand); padding-top: clamp(2.5rem, 5vw, 4rem); } /* Xadrez do brasão como textura de fundo, quase invisível — o mesmo selo gravado do herói, ecoando no rodapé sem repetir o efeito principal. */ .rodape::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--xadrez); background-size: var(--xadrez-tam) var(--xadrez-tam); opacity: .5; mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6) 60%, transparent); } .rodape > * { position: relative; z-index: 1; } .rodape__grade { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } .rodape__bloco--marca { grid-column: span 1; } .rodape__brasao { height: 64px; width: auto; margin-bottom: 1rem; filter: drop-shadow(0 4px 10px rgba(3, 7, 22, .4)); } .rodape__sigla { font-family: var(--f-display), serif; font-weight: 600; font-size: 1.3rem; letter-spacing: .06em; color: var(--texto); margin: 0 0 .15rem; } .rodape__nome { color: var(--suave); font-size: .88rem; margin: .2rem 0 1rem; } .rodape__mec { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; color: var(--suave); } .rodape__mec svg { color: var(--brand-tinta); } .rodape__mantenedora { font-size: .82rem; color: var(--suave); } .rodape__titulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--suave); margin-bottom: .9rem; } .rodape__bloco ul { list-style: none; display: grid; gap: .5rem; } .rodape__bloco a { color: var(--texto); text-decoration: none; font-size: .9rem; display: inline-flex; align-items: center; gap: .3rem; } .rodape__bloco a:hover { color: var(--brand-tinta); } .rodape__endereco { color: var(--suave); font-size: .88rem; } .redes { list-style: none; display: flex; gap: .6rem; margin-top: 1.2rem; } .redes a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--linha); border-radius: 50%; color: var(--suave); } .redes a:hover { color: var(--brand-tinta); border-color: var(--brand-tinta); } .rodape__fim { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; padding-block: 1.3rem; border-top: 1px solid var(--linha); font-size: .84rem; color: var(--suave); } .rodape__fim p { margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; } .rodape__fim a { color: var(--suave); text-decoration: none; } .rodape__fim a:hover { color: var(--brand-tinta); } /* ------------------------------------------------------------ flutuantes */ /* O botão flutuante de WhatsApp (.zap) foi removido — o site tinha 3 chamadas para o mesmo número na primeira dobra (bolha flutuante, botão do herói e o CTA da ilha) e ficou reduzido a uma só, a da navbar (`.menu__cta`, ver seção "navbar"), agora com o verde oficial do WhatsApp em vez do azul da marca. */ /* O widget do VLibras (script do governo, fora do nosso controle) nasce no mesmo canto do botão de WhatsApp e cobria texto no mobile. Move para a esquerda — os dois flutuantes convivem sem se sobrepor. */ div[vw-access-button] { left: 1.1rem !important; right: auto !important; bottom: 1.1rem !important; top: auto !important; } .aviso-flutuante { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: .8rem; width: min(calc(100% - 2rem), 32rem); padding: .9rem 1.1rem; border-radius: var(--raio-p); background: var(--surface); border: 1px solid var(--cartao-borda); box-shadow: var(--sombra); font-size: .92rem; } .aviso-flutuante--ok { border-left: 4px solid #2fbf71; } .aviso-flutuante--erro { border-left: 4px solid #e2635f; } .aviso-flutuante__fechar { margin-left: auto; background: none; border: 0; color: var(--suave); cursor: pointer; padding: .2rem; } /* --------------------------------------------------------------- revelar */ /* Entrada escalonada: cada elemento define --atraso (inteiro) inline; .revelar converte em transition-delay. Sem --atraso, dispara junto. */ .revelar { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--atraso, 0) * 90ms); } .revelar.visivel { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .revelar { opacity: 1; transform: none; transition: none; } } /* ----------------------------------------------------------- responsivo */ /* Breakpoint subiu de 860px pra 1240px: com 6 itens de menu + os dois pills de portal + o CTA de WhatsApp tudo numa linha só (sem quebrar, pedido explícito), a navbar desktop simplesmente não cabe em telas de 861–1239px (notebook pequeno, tablet paisagem) — o CTA vazava pra fora da ilha. Abaixo de 1240px entra o hambúrguer em vez de espremer. */ @media (max-width: 1240px) { .menu-botao { display: block; } .portal-destaque { display: none; } /* .menu__portais assume, por completo, lá embaixo */ /* ARMADILHA: a largura "auto" de um contêiner flex em bloco usa shrink-to-fit (como tabela/inline-block), não preenche o espaço disponível como um bloco comum. Com só logo+hambúrguer visíveis no mobile, a ilha encolhia bem menos que a trilha (`.cabecalho`) — sobrava a mesma margem escura dos dois lados, só que centralizada, não importava o quanto o padding da trilha diminuísse. */ .cabecalho__interno { width: 100%; } /* Painel full-screen navy, não um dropdown estreito — desliza da direita. O brasão entra como marca d'água gigante, do mesmo jeito que no herói: o menu mobile é "mais uma página do escudo", não uma caixa genérica. */ .menu { /* A ilha (`.cabecalho__interno`, ancestral direto) agora é sempre clara — mas o painel mobile continua a "página do brasão" escura de sempre. Reafirma os tokens escuros do :root aqui, senão herdaria texto navy sobre fundo navy do painel full-screen. */ --texto: #f2ede1; --suave: #aab3d6; --linha: rgba(242, 237, 225, .14); --cartao-bg: rgba(242, 237, 225, .05); --cartao-borda: rgba(242, 237, 225, .12); --brand-tinta: #b9cdf2; --sombra: 0 18px 50px rgba(3, 7, 22, .45); --xadrez: repeating-conic-gradient( color-mix(in srgb, var(--brand) 10%, transparent) 0% 25%, transparent 0% 50% ); position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; background: var(--bg); padding: 5.5rem 1.75rem 2rem; transform: translateX(100%); transition: transform .32s ease; overflow-y: auto; } .menu::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--xadrez); background-size: var(--xadrez-tam) var(--xadrez-tam); opacity: .5; mask-image: radial-gradient(60% 50% at 100% 0%, #000, transparent 70%); } .menu.aberto { transform: none; } /* `.cabecalho__interno` tem backdrop-filter, que cria containing block para descendentes com position:fixed — o `.menu` (inset:0) media seu tamanho pela ilha pequena do cabeçalho, não pela viewport, e aparece cortado/atrás dos outros elementos fixos. Sem blur enquanto o menu está aberto, o `.menu` volta a preencher a tela de verdade. */ .cabecalho.menu-aberto .cabecalho__interno { backdrop-filter: none; } .menu__lista { flex-direction: column; gap: .1rem; } .menu__item { position: static; } .menu__link { display: flex; justify-content: space-between; padding: .85rem 0; font-size: 1.15rem; border-bottom: 1px solid var(--linha); } /* Sem hover no toque: o submenu fica sempre visível, indentado, como seção da lista — não como popup. */ .submenu { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; box-shadow: none; border: 0; background: transparent; padding: .1rem 0 .6rem 1rem; margin: 0; } .submenu a { padding: .55rem .4rem; font-size: .95rem; } .menu__portais { display: flex; flex-direction: column; gap: .7rem; margin-top: auto; padding-top: 1.5rem; border-top: 1px solid var(--linha); } .menu__cta { justify-content: center; } @media (prefers-reduced-motion: reduce) { .menu { transition: none; } } } @media (max-width: 560px) { /* Menos respiro lateral no celular — a ilha ganha largura real de tela em vez de sobrar tanta margem escura dos dois lados. */ .cabecalho { padding-inline: .5rem; } .heroi__numeros { grid-template-columns: minmax(0, 1fr); gap: .8rem; text-align: left; } .heroi__numeros div { display: flex; justify-content: space-between; gap: 1rem; } .heroi__numeros dd { margin: 0; } .curso__acoes .botao { flex: 1 1 100%; } .rodape__fim { flex-direction: column; align-items: flex-start; } } @media print { .cabecalho, .menu, .aviso-flutuante, .mapa, .caixa-form { display: none; } body { background: #fff; color: #000; } .secao { padding-block: 1rem; } }