/* ========================================================================= TOPO DA GUIA DE PERSONAGEM A montagem dela, de trás para a frente: a capa 1920 × 640 que ela monta no Photoshop o brilho de estrelas por cima, em mistura de tela o degradê que apaga a capa no preto o nome e as três pastilhas, centralizados O menu passa por cima da capa, transparente — as regras disso estão em header.css, na classe 'tem-capa' do body, dividida com o carrossel da home. A altura sai da medida que ela desenhou: a arte tem 640px numa tela de 1920, e o degradê morre por volta de 575. Em tela menor a seção encolhe junto e a capa é recortada pelas laterais — no celular sobra a faixa central de uns 800px, que é o número passado a ela para desenhar. ========================================================================= */ .guia-capa { position: relative; /* * Sobe por baixo do cabeçalho fixo, como a faixa de título das páginas * padrão: é o que faz a arte encostar no topo da tela. * * Quem sobe é só esta margem — o continua reservando o espaço do * cabeçalho normalmente. Zerar os dois puxaria a capa 80px para cima e * comeria o topo da arte dela. */ margin-top: calc(var(--header-h) * -1); /* * O piso de 300px não é estético, é aritmético. * * A capa é 3:1 e preenche por recorte. Num celular de 375px, uma seção de * 300px de altura mostra a faixa central de 800px da arte; uma de 360px * mostraria só 670. Cada pixel de altura a mais aqui é arte dela cortada * das laterais — e é esse número que ela precisa saber para desenhar. */ min-height: clamp(300px, 33vw, 640px); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background-color: var(--bg-deep); } /* Sem capa publicada o topo vira só o nome sobre o preto, sem buraco. */ .guia-capa--sem-arte { min-height: clamp(220px, 20vw, 320px); } .guia-capa__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; /* O recorte acontece nas laterais, que é por que o personagem tem de ficar no meio da arte. */ object-fit: cover; object-position: center; } /* * O brilho de estrelas. * * 'screen' é o que faz o preto do vídeo sumir: em mistura de tela, preto é * elemento neutro e branco é o que soma. Sobra o brilho, sem moldura e sem * caixa escura por cima da arte dela. */ .guia-capa__estrelas { position: absolute; inset: 0; /* * Acima do degradê, abaixo do nome e das pastilhas — foi o que ela pediu: * o brilho por cima do degradê, atrás do texto. * * Era o contrário, e é de onde vinha a faixa que ela fotografou no * celular. Por baixo, o vídeo era visto através da parte translúcida do * degradê e desaparecia de uma vez na altura em que o degradê fica opaco. * Isso desenha uma borda reta e clara atravessando a capa, que muda de * lugar conforme a altura da tela — daí ela ver "em algumas telas". */ z-index: 1; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; pointer-events: none; } /* * O brilho sobe para cima do degradê — mas só onde a máscara funciona. * * Por cima, o vídeo precisa apagar sozinho: sem máscara ele iria aceso até a * borda de baixo da capa e terminaria num corte reto contra o preto da * página — a mesma faixa que ela fotografou, só que mais forte. * * Mas a máscara serve só para matar essa emenda, e não para escurecer o * brilho. Na primeira versão ela começava na metade da capa e apagava o vídeo * justamente no trecho onde ela queria vê-lo — era eu refazendo, com a * máscara, o abafamento que ela estava pedindo para tirar. * * Hoje ela age só no fim: o vídeo vai inteiro até 85% e apaga nos últimos * 15%. Ela pediu mais brilho embaixo duas vezes, e este é o limite útil — * o pouco que sobra é o que impede o corte reto na borda. Se um dia parecer * pouco de novo, o que falta não é máscara, é o degradê estar apagando a * arte antes; mexer aqui embaixo de 85% só traz a faixa de volta. * * Navegador sem máscara fica com a ordem antiga, que é discreta demais mas * nunca desenha uma borda por cima da arte dela. Na prática é ninguém: * mask-image existe em tudo que é atual. Está aqui para o caso raro não ser o * caso feio. */ @supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) { .guia-capa__estrelas { z-index: 2; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 85%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 85%, transparent 100%); } } /* * O degradê que fecha a capa no fundo do site. * * Vai de transparente a opaco e termina no preto exato do site, senão * apareceria uma emenda entre a capa e o corpo da página. Ele começa mais ou * menos na metade da altura: acima disso a arte dela aparece limpa. */ .guia-capa__degrade { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 65%; background: linear-gradient( to bottom, transparent, color-mix(in srgb, var(--bg) 65%, transparent) 45%, var(--bg) 92% ); pointer-events: none; } .guia-capa__wrap { position: relative; z-index: 3; width: 100%; max-width: var(--wrap); /* O respiro de baixo é o que sustenta o nome e as pastilhas na altura que ela desenhou, logo acima do fim do degradê. */ /* * O respiro de baixo encolheu no desktop, de 3rem para 2rem. * * Ela achou que a caixa da introdução ainda estava longe das pastilhas e * pediu metade da distância. Metade dos 64px que sobravam são estes 16px * e os 16 do topo do corpo, em guia.css — ver lá. * * No celular nada muda: lá o valor já era o piso de 1.75rem. */ padding: 0 var(--gutter) clamp(1.75rem, 4vw, 2rem); text-align: center; } .guia-capa__titulo { margin: 0 0 clamp(0.85rem, 2vw, 1.25rem); font-family: var(--font-display); font-size: clamp(2rem, 5.5vw, 4rem); font-weight: 700; line-height: 1.1; color: #FFF; /* A capa pode ser clara ou escura conforme a arte que ela montar; a sombra garante o nome legível nas duas. */ text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75); } /* ------------------------------------------------------------------------- As pastilhas Contorno grosso e cantos redondos, como ela desenhou: "eu fiz os botões assim mais grosso porque eu achei bonito". A cor vem do PHP, uma por pastilha. Sem cor definida a pastilha é branca — é o caso da arma e do caminho, que ela pediu sempre brancos. ---------------------------------------------------------------------- */ .guia-capa__pastilhas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(0.5rem, 1.5vw, 0.85rem); } .guia-pastilha { --pastilha-cor: #FFF; /* * O tamanho do ícone mora numa variável porque a altura da pastilha sai * dele: assim a de raridade, que não tem ícone, fica exatamente da mesma * altura das outras — ela reparou que estava mais baixinha. */ --icone: clamp(28px, 3vw, 34px); box-sizing: border-box; display: inline-flex; align-items: center; /* * Centraliza o conteúdo quando a pastilha é maior que ele. * * No computador nunca é: a pastilha tem a largura do que está dentro. No * celular, porém, elas viram grade de duas colunas, e a coluna toma a * largura da pastilha mais larga — então a mais curta do par ganha uma * folga. Sem isto a folga inteira cai do lado direito e o texto fica * encostado à esquerda: era o que ela viu em "Genshin Impact" e "Hydro", * 11px fora do meio. * * A sobra se reparte depois do recheio, então o desconto que o ícone tem * à esquerda continua valendo — ver o padding-left mais abaixo. */ justify-content: center; gap: 0.45rem; min-height: calc(var(--icone) + 0.7rem + 6px); padding: 0.35rem 1.1rem; border: 3px solid var(--pastilha-cor); border-radius: 999px; /* Escuro por dentro, e não transparente: sobre uma capa clara o contorno sozinho não sustentaria o texto. */ background: rgba(10, 10, 14, 0.72); color: var(--pastilha-cor); font-family: var(--font-display); font-size: clamp(0.8125rem, 1.6vw, 1rem); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } @supports (backdrop-filter: blur(6px)) { .guia-pastilha { background: rgba(10, 10, 14, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } } /* * O ícone inteiro, sem recorte. * * "Mantém tudo nele sem recorte, senão eles ficam muito feios", ela pediu. * Por isso ele é maior que a altura útil da pastilha e a margem negativa o * deixa sobrar um pouco para fora, encostado na borda — que é como ela * desenhou. */ /* * O ícone não é mais puxado para fora da pastilha. * * A margem negativa que existia aqui deixava o espaço da esquerda com metade * do da direita — foi o que ela viu no Electro e no Anemo. Agora os dois lados * são iguais: como todo ícone tem a mesma sobra transparente em volta (68% de * desenho, o resto vazio), basta descontar essa sobra do respiro da esquerda. * Ver a normalização dos arquivos em assets/img/jogos. */ .guia-pastilha__icone { flex: none; width: var(--icone); height: auto; object-fit: contain; } /* * O respiro da esquerda desconta a sobra transparente do ícone. * * É a receita que ela descreveu do Photoshop: alinhar ícone e palavra com a * distância que se quer entre eles, juntar os dois num bloco só e centralizar * esse bloco na pastilha. * * Aqui o bloco é o próprio flex, e centralizar quer dizer: o vazio antes do * ícone tem de medir o mesmo que o vazio depois da palavra. Só que o ícone * carrega uma borda transparente de 7% em volta do desenho (os arquivos estão * todos em 86% de desenho), e essa borda já é espaço. Então o padding daqui é * o da direita menos essa sobra. */ .guia-pastilha--arma, .guia-pastilha--elemento { padding-left: 0.95rem; } .guia-pastilha__texto { line-height: 1; } /* ------------------------------------------------------------------------- Introdução, agora no corpo Desceu do cabeçalho quando ele virou capa. Continua sendo o único texto que o Google lê nesta página, já que o resto está desenhado dentro das imagens dela. ---------------------------------------------------------------------- */ /* * A introdução numa caixa da cor do elemento. * * Ela pediu a mesma caixa da página de Códigos, "só que SEMPRE NA COR do * ELEMENTO escolhido", e mais perto das pastilhas — daí o respiro de cima * curto e o de baixo folgado. * * O dourado é o valor de partida, para a guia que ainda não tem elemento * marcado não ficar sem cor nenhuma. */ .guia__intro { --guia-cor: var(--gold); max-width: var(--wrap-text); /* * Sem margem em cima: quem dá o respiro é a capa, que já termina em preto * abaixo das pastilhas. Ela pediu a caixa colada nelas. */ margin: 0 auto clamp(1.75rem, 4vw, 2.5rem); padding: clamp(0.9rem, 2vw, 1.25rem) clamp(1.1rem, 2.5vw, 1.75rem); background: color-mix(in srgb, var(--guia-cor) 14%, transparent); border: 1px solid color-mix(in srgb, var(--guia-cor) 50%, transparent); border-radius: var(--radius-sm); color: var(--text); font-size: 1.0625rem; line-height: 1.8; text-align: center; } /* * Quando ela revisou a guia pela última vez. * * Discreto de propósito: informa quem quer saber se o guia está em dia, sem * competir com o texto que está logo acima. */ .guia__atualizado { max-width: var(--wrap-text); margin: 0 auto clamp(1.25rem, 3vw, 1.75rem); color: var(--text-muted); font-size: 0.8125rem; text-align: center; } .guia__intro p { margin: 0 0 0.9rem; } .guia__intro p:last-child { margin-bottom: 0; } /* Quem pediu menos movimento fica com a capa parada — o vídeo nem baixa, decidido em assets/js/guia-topo.js. */ @media (prefers-reduced-motion: reduce) { .guia-capa__estrelas { display: none; } } /* * O ícone de arma e de caminho, clareado até o branco. * * Ela pediu branco — "ficou apagadinho na pastilha" — mas na primeira * tentativa eu achatei tudo numa cor só e sumiu a moldura de trás, que ela * fez questão de ter de volta. * * O truque estava no arquivo: as duas camadas do ícone são o mesmo cinza, o * que as separa é a opacidade — a moldura fica a uns 55%, a arma a 100%. * Clarear o cinza leva a arma ao branco e deixa a moldura num branco mais * fraco, na mesma proporção. É branco e continua tendo as duas partes. * * Vale para os três jogos: os ícones de caminho do Honkai e de arma do * Wuthering Waves já são claros, e clarear o que já é branco não muda nada. * * O elemento fica de fora de propósito — ali a cor é a informação. */ .guia-pastilha--arma .guia-pastilha__icone { filter: brightness(2); } /* ------------------------------------------------------------------------- Celular Ela pediu as pastilhas em 2 por linha — jogo e raridade em cima, arma e elemento embaixo — e o bloco de nome e pastilhas mais para baixo, "só até o começo do degradê". ---------------------------------------------------------------------- */ @media (max-width: 700px) { /* * Grade de duas colunas em vez de fila que quebra sozinha. * * Com quatro pastilhas de larguras diferentes, deixar a quebra por conta * do navegador dá 3+1 ou 1+3 conforme o tamanho das palavras. Em grade, * são sempre duas em cima e duas embaixo, na ordem em que ela pediu. * * As colunas têm a largura do conteúdo, e não metade da tela: pastilha * esticada com a palavra perdida no meio ficaria pior do que a fila. */ .guia-capa__pastilhas { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; } /* * A capa ganha altura no celular. * * Com o nome em duas linhas e as pastilhas em duas fileiras, o bloco de * texto tomava quase toda a capa e encostava no topo da arte. Mais altura * devolve o respiro e empurra o bloco para baixo, que foi o pedido. * * Custa recorte: a arte é 3:1 e preenche por corte, então cada pixel de * altura estreita a faixa visível. Em 360px sobra a faixa central de uns * 670px da arte, contra 800px que sobravam em 300px de altura. */ .guia-capa { min-height: 360px; } }