, e qualquer mudança na altura do cabeçalho quebraria o alinhamento. ========================================================================= */ /* * Fixo, e não sticky. * * Na home o cabeçalho fica POR CIMA do carrossel, que ocupa a tela inteira — * pedido dela na revisão da etapa 1, seguindo o site oficial da HoYoverse que * ela mandou de referência. Para isso o cabeçalho precisa sair do fluxo, senão * empurraria a arte para baixo. * * Quem reserva o espaço nas demais páginas é o padding do , em style.css. */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header); border-bottom: 1px solid var(--border); transition: box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease); } /* * O vidro fica numa camada própria, atrás do conteúdo, e não no

. * * Isto não é enfeite de organização: backdrop-filter transforma o elemento em * bloco de contenção para qualquer descendente com position:fixed. Com o * filtro aplicado no

, a gaveta do menu — que é filha dele — passava a * se posicionar dentro dos 62px do cabeçalho em vez de ocupar a tela inteira, * e o mesmo acontecia com o fundo escurecido. Numa camada separada o efeito é * idêntico e o problema desaparece. */ .site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--header-bg); transition: background-color var(--speed) var(--ease), opacity var(--speed) var(--ease); } /* O desfoque só é aplicado quando o navegador realmente sabe fazê-lo. Sem esta verificação, navegadores antigos mostram um fundo quase transparente e o menu fica ilegível sobre a imagem do carrossel. */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .site-header::before { -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header::before { background: var(--header-bg-up); } } /* Depois que a página rola, o cabeçalho fecha um pouco mais e ganha sombra — separa o menu do conteúdo que passa por baixo. Classe aplicada pelo JS. */ .site-header.is-scrolled::before { background: var(--header-bg-up); } .site-header.is-scrolled { border-bottom-color: var(--gold-deep); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); } /* * Sobre o carrossel: cabeçalho sem fundo nenhum. * * As classes 'tem-heroi' e 'tem-capa' entram no quando a página abre * com arte no topo — o carrossel de destaque na home, a capa do personagem na * guia. No topo o cabeçalho é só o logo e o menu sobre a * arte; assim que a página rola, o vidro e o filete aparecem e ele volta a se * separar do conteúdo. * * Isto também responde à dúvida dela sobre o menu parecer opaco: o desfoque * existia desde o começo, mas atrás dele só havia preto liso, então não havia * o que desfocar. Com a arte por baixo o efeito finalmente aparece. */ @media (min-width: 901px) { body.tem-heroi .site-header:not(.is-scrolled), body.tem-capa .site-header:not(.is-scrolled) { border-bottom-color: transparent; } body.tem-heroi .site-header:not(.is-scrolled)::before, body.tem-heroi .site-header:not(.is-scrolled)::after, body.tem-capa .site-header:not(.is-scrolled)::before, body.tem-capa .site-header:not(.is-scrolled)::after { opacity: 0; } } /* Fio dourado bem fino sob a borda. É o detalhe que faz o cabeçalho parecer acabado em vez de apenas escuro. */ .site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.55) 25%, rgba(242, 223, 160, 0.75) 50%, rgba(212, 175, 55, 0.55) 75%, transparent); opacity: 0.6; pointer-events: none; transition: opacity var(--speed) var(--ease); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--header-h); } /* ------------------------------------------------------------------------- Logotipo ---------------------------------------------------------------------- */ .site-branding { margin: 0; font-size: 0; line-height: 0; flex-shrink: 0; } .site-branding__link { display: block; transition: opacity var(--speed) var(--ease), filter var(--speed) var(--ease); } /* * Tamanho da marca. * * A altura sai da altura do nome, e não do que "cabe bem": o nome ocupa cerca * de 20% do lockup, porque vem em duas linhas. * * lockup 54px -> cada linha do nome com ~10,8px (desktop) * lockup 48px -> cada linha do nome com ~9,6px (celular e tablet) */ .site-branding__logo { display: block; width: auto; /* * 48px em todo o celular e tablet, dentro de um cabeçalho de 64px. * * É o maior valor que ainda deixa respiro em cima e embaixo, e cada pixel * aqui é um pixel a mais no nome dela: em 48px cada linha de "TEYVAT" e * "BRASIL" sai com uns 9,6px. Pequeno, mas é o tamanho de quem lê de * relance — que é exatamente o uso que ela descreveu. * * Na largura não chega perto de apertar: 48px de altura dão 115px de * largura, e mesmo numa tela de 320px sobra folga para o botão do menu. */ height: 48px; } @media (min-width: 901px) { .site-branding__logo { height: 54px; } } .site-branding__link:hover, .site-branding__link:focus-visible { opacity: 0.85; /* Brilho dourado discreto — a marca reage sem trocar de cor. */ filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.45)); } /* ------------------------------------------------------------------------- Menu — desktop ---------------------------------------------------------------------- */ .nav__list, .nav__submenu { list-style: none; margin: 0; padding: 0; } .nav__list { display: flex; align-items: center; gap: 0.25rem; } .nav__item { position: relative; } .nav__link { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.85rem; background: none; border: 0; border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-body); font-size: 0.8125rem; /* 13px */ font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color var(--speed) var(--ease), background-color var(--speed) var(--ease); } /* Filete dourado que cresce do centro ao passar o mouse. */ .nav__list > .nav__item > .nav__link::before { content: ''; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.28rem; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: center; transition: transform var(--speed) var(--ease); } .nav__link:hover, .nav__link:focus-visible { color: var(--gold-bright); } .nav__list > .nav__item > .nav__link:hover::before, .nav__list > .nav__item > .nav__link:focus-visible::before, .nav__list > .nav__item.is-open > .nav__link::before { transform: scaleX(1); } /* * Item sem destino ainda. * * Aparece apagado e não responde ao mouse. É o estado de Rotas, Encontros e * companhia até ela escrever os guias e apontar o link. Melhor assim do que * um item que parece funcionar e abre um erro. */ .nav__link--vazio { color: var(--text-muted); opacity: 0.5; cursor: default; } .nav__link--vazio:hover { color: var(--text-muted); background: none; } /* Página atual — dourado cheio, o único item que pode usá-lo. */ .nav__link.is-current { color: var(--gold); } .nav__list > .nav__item > .nav__link.is-current::before { transform: scaleX(1); opacity: 0.7; } .nav__chevron { flex-shrink: 0; transition: transform var(--speed) var(--ease); opacity: 0.7; } .nav__item.is-open > .nav__link .nav__chevron { transform: rotate(180deg); } /* ------------------------------------------------------------------------- Submenus — desktop ---------------------------------------------------------------------- */ @media (min-width: 901px) { .nav__item--has-children > .nav__submenu { position: absolute; top: calc(100% + 0.5rem); left: 0; /* * Acima do filete dourado do rodapé do cabeçalho. * * O filete é o ::after do

. Pseudo-elemento e submenu estavam * os dois posicionados sem z-index, então quem desenhava por último * ganhava, e o ::after vem depois no documento: a linha cruzava por * cima do dropdown. Ela reportou isso na revisão da etapa 1. */ z-index: 2; min-width: 216px; padding: 0.4rem; background: rgba(20, 20, 26, 0.92); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--speed) var(--ease), transform var(--speed) var(--ease), visibility var(--speed); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .nav__item--has-children > .nav__submenu { -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); } } /* * Abre no mouse, no foco por teclado e no clique. Os três caminhos levam * ao mesmo estado visual. * * O :not(.is-travado) conserta o que ela encontrou: com o mouse parado em * cima, clicar no botão girava a setinha mas o painel continuava aberto, * porque o :hover manda sozinho e não sabe do clique. Quando a pessoa * fecha no clique, o JavaScript trava o hover até o ponteiro sair do item. */ .nav__item--has-children:hover:not(.is-travado) > .nav__submenu, .nav__item--has-children:focus-within:not(.is-travado) > .nav__submenu, .nav__item--has-children.is-open > .nav__submenu { opacity: 1; visibility: visible; transform: translateY(0); } /* Ponte invisível entre o item e o submenu. Sem ela o submenu fecha no meio do caminho quando o mouse atravessa o vão de 0,5rem. */ .nav__list > .nav__item--has-children::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 0.6rem; } /* --------------------------------------------------------------------- Terceiro nível Utilidades tem Mapas e Rotas dentro, e cada um abre a própria lista. Esse nível sai para o lado, não para baixo: para baixo ele cobriria os irmãos do item que o abriu. --------------------------------------------------------------------- */ .nav__submenu .nav__item--has-children > .nav__submenu { top: -0.4rem; left: 100%; margin-left: 0.35rem; transform: translateX(-6px); } .nav__submenu .nav__item--has-children:hover:not(.is-travado) > .nav__submenu, .nav__submenu .nav__item--has-children:focus-within:not(.is-travado) > .nav__submenu, .nav__submenu .nav__item--has-children.is-open > .nav__submenu { transform: translateX(0); } /* A ponte aqui é lateral, acompanhando a direção em que o menu abre. */ .nav__submenu .nav__item--has-children::after { content: ''; position: absolute; top: 0; left: 100%; width: 0.5rem; height: 100%; } /* O pai do terceiro nível é um botão: o nome de um lado, a seta do outro. */ .nav__submenu .nav__link--parent { justify-content: space-between; } /* Seta apontando para o lado, como no desenho que ela mandou. */ .nav__submenu .nav__item--has-children > .nav__link .nav__chevron { transform: rotate(-90deg); } .nav__submenu .nav__item--has-children.is-open > .nav__link .nav__chevron { transform: rotate(-90deg); } .nav__item--child .nav__link { display: flex; width: 100%; padding: 0.5rem 0.7rem; font-size: 0.8125rem; letter-spacing: 0.03em; text-transform: none; color: var(--text-muted); } .nav__item--child .nav__link:hover, .nav__item--child .nav__link:focus-visible { background: rgba(212, 175, 55, 0.10); color: var(--gold-bright); } } /* ------------------------------------------------------------------------- Botão do menu no celular ---------------------------------------------------------------------- */ .nav-toggle { display: none; position: relative; width: 42px; height: 42px; padding: 0; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: border-color var(--speed) var(--ease), background-color var(--speed) var(--ease); } .nav-toggle:hover { border-color: var(--gold); background: rgba(212, 175, 55, 0.08); } .nav-toggle__bars { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .nav-toggle__bars span { display: block; width: 18px; height: 1.6px; border-radius: 2px; background: var(--text); transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease); } /* Vira um X quando aberto. */ .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); } .nav-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity var(--speed) var(--ease); } .nav-backdrop.is-visible { opacity: 1; } /* ------------------------------------------------------------------------- Gaveta — celular e tablet em pé ---------------------------------------------------------------------- */ @media (max-width: 900px) { .nav-toggle { display: block; } .nav { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer); width: min(320px, 84vw); padding: calc(var(--header-h) + 1.25rem) 1.25rem 2rem; background: var(--surface); border-left: 1px solid var(--border); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); /* visibility, e não só o transform. Um elemento apenas deslocado continua focável: sem isto, quem navega por teclado passa por todos os links da gaveta fechada antes de chegar ao conteúdo. A transição atrasa a visibility para a saída ainda ser vista. */ visibility: hidden; transition: transform var(--speed) var(--ease), visibility 0s linear var(--speed); } .nav.is-open { transform: translateX(0); visibility: visible; transition: transform var(--speed) var(--ease), visibility 0s linear 0s; } .nav__list { flex-direction: column; align-items: stretch; gap: 0.15rem; } .nav__item { width: 100%; } .nav__link { width: 100%; justify-content: space-between; padding: 0.8rem 0.75rem; font-size: 0.875rem; border-radius: var(--radius-sm); } /* O filete animado não funciona numa lista vertical — vira um fundo. */ .nav__list > .nav__item > .nav__link::before { display: none; } .nav__link:hover, .nav__link:focus-visible { background: rgba(212, 175, 55, 0.09); } /* Submenu sanfonado: fechado tem altura zero, aberto cresce até o conteúdo. grid-template-rows anima a altura sem precisar medir nada em JavaScript. A grade fica no

, não no

tem exatamente duas linhas — o botão e o submenu. Se a grade ficasse no