/* MePixa! — página dedicada de um jogo (tema escuro) * * Carregue DEPOIS de css/style.css e ponha class="game-page" no . * O bloco abaixo só troca as variáveis do site — todo o resto (botões, * cards, navbar, rodapé) continua vindo do style.css. * * O sotaque de cor de cada jogo vem de --game-accent: mude só essa * variável para reaproveitar a página em outro título. */ html.game-page { --mp-heading: #f3efe9; --mp-text: #b4aebd; --mp-text-soft: #8a8497; --mp-bg: #0e0d12; --mp-bg-alt: #15131c; --mp-border: #2a2733; /* sobre fundo escuro o laranja vivo já rende 6.3:1 como texto, então aqui a variável volta a ser o laranja da marca */ --mp-orange-text: var(--mp-orange); --game-accent: #b8323c; /* o vermelho dos selos */ --game-glow: rgba(184, 50, 60, 0.35); color-scheme: dark only; background-color: var(--mp-bg); } html.game-page body { background-color: var(--mp-bg); } html.game-page .navbar { background-color: rgba(14, 13, 18, 0.88); border-bottom-color: var(--mp-border); } html.game-page .card, html.game-page .game-card { background-color: var(--mp-bg-alt); } html.game-page .text-secondary { color: var(--mp-text) !important; } /* ---------- Hero da página do jogo ---------- */ .game-hero { position: relative; min-height: 82vh; display: flex; align-items: flex-end; padding: 116px 0 3rem; background-position: center 30%; background-size: cover; background-repeat: no-repeat; overflow: hidden; } /* o vídeo de fundo cobre o topo inteiro; o poster segura o quadro enquanto o arquivo carrega (e para quem bloqueia autoplay) */ .game-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: 0; pointer-events: none; } .game-hero::after { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 50% 35%, transparent 0%, rgba(14, 13, 18, 0.55) 70%), linear-gradient(180deg, rgba(14, 13, 18, 0.85) 0%, rgba(14, 13, 18, 0.25) 38%, rgba(14, 13, 18, 0.97) 100%); } .game-hero > .container { position: relative; z-index: 1; } .game-hero .game-logo { /* o logo em pt é mais alto que o em inglês (título em duas linhas): a altura máxima segura os dois no mesmo lugar */ width: min(420px, 74%); max-height: 42vh; object-fit: contain; object-position: left center; filter: drop-shadow(0 6px 26px rgba(0, 0, 0, 0.85)); } .game-hero .game-tagline { font-size: clamp(1.05rem, 2.4vw, 1.45rem); font-weight: 700; font-style: italic; color: #ded7e4; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9); max-width: 34ch; } .back-link { color: var(--mp-text-soft); font-weight: 700; text-decoration: none; font-size: 0.95rem; } .back-link:hover { color: var(--mp-orange); } /* ---------- Logo com selo ao lado ---------- Jogo que tem selo (edição comemorativa, prêmio) põe a arte ao lado do logo. Os dois têm texto desenhado, então os dois trocam com o idioma. */ .logo-seal { display: flex; align-items: flex-end; gap: clamp(0.8rem, 2.5vw, 1.6rem); } .logo-seal .game-logo { margin-bottom: 0; } .game-seal { width: clamp(78px, 11vw, 128px); height: auto; flex-shrink: 0; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.8)); } /* ---------- Faixa de números ---------- Marcos do jogo (ano, público, tempo). Fica logo abaixo do hero, onde o fundo escuro do vídeo termina, então ela usa o tom alternativo. */ .stat-band { background-color: var(--mp-bg-alt); border-top: 1px solid var(--mp-border); border-bottom: 1px solid var(--mp-border); padding: 2.4rem 0; } .stat b { display: block; font-size: clamp(1.9rem, 5vw, 2.7rem); line-height: 1.1; font-weight: 800; color: var(--game-accent); } .stat span { display: block; margin-top: 0.35rem; font-size: 0.95rem; color: var(--mp-text-soft); } /* ---------- Comparação entre versões ---------- Dois quadros lado a lado da mesma cena, um por versão do jogo. */ .compare { display: flex; flex-direction: column; gap: 3rem; } .compare-lede { max-width: 62ch; } .compare-pair { margin: 0; } /* As duas artes têm proporções diferentes (a de 2006 é mais alta, porque a barra de inventário fazia parte do quadro). Casar a ALTURA das duas e deixar a largura seguir a proporção de cada uma é o que faz a comparação funcionar: o mesmo cenário aparece na mesma escala dos dois lados. Por isso a linha é flex e a imagem manda na largura, e não o contrário. */ .compare-shots { display: flex; align-items: flex-start; gap: 1rem; } /* Cada lado cresce na proporção da própria arte (--ar = largura ÷ altura, declarado no HTML). Como a largura de cada um fica proporcional à proporção dele, a altura das duas imagens dá exatamente igual, em qualquer tamanho de tela, e a linha nunca passa da largura disponível. */ .compare-side { position: relative; flex: var(--ar, 1.6) 1 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--mp-border); background-color: #000; } .compare-side img { display: block; width: 100%; height: auto; cursor: zoom-in; } /* o ano é a informação principal do bloco, então ele fica sobre a arte */ .compare .year { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 1; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; color: #fff; background-color: rgba(0, 0, 0, 0.72); border: 1px solid rgba(255, 255, 255, 0.25); } /* verde do papel de parede antigo para a versão velha, brasa para a nova: a cor já diz qual é qual antes de a pessoa ler o número */ .compare .year-old { border-color: #7d8446; color: #d8e0a8; } .compare .year-new { border-color: var(--game-accent); background-color: var(--game-glow); color: #ffdcc9; } .compare figcaption { margin-top: 0.9rem; font-size: 0.97rem; line-height: 1.7; color: var(--mp-text-soft); } @media (max-width: 575.98px) { /* no celular, um embaixo do outro e na largura toda: lado a lado ficaria pequeno demais para enxergar a diferença, que é o motivo do bloco existir */ .compare-shots { flex-direction: column; gap: 0.7rem; } .compare-side img { height: auto; width: 100%; } .logo-seal { align-items: center; } } /* ---------- Chips (gênero, plataforma, status) ---------- */ .chip { display: inline-block; padding: 0.3rem 0.85rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.22); background-color: rgba(0, 0, 0, 0.45); color: #e9e4ee; } .chip-accent { border-color: var(--game-accent); background-color: var(--game-glow); color: #ffd9db; } /* ---------- Sinopse ---------- */ .synopsis p { font-size: 1.08rem; line-height: 1.85; } .synopsis p:first-of-type::first-letter { float: left; font-size: 3.4rem; line-height: 0.86; font-weight: 800; padding: 0.1em 0.14em 0 0; color: var(--game-accent); } /* height:auto é obrigatório aqui: os atributos width/height do entram como dica de apresentação (height: 1536px), e sem isto a imagem sai com a altura crua do arquivo em vez da proporção. */ .game-cover { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--mp-border); box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6); } /* arte em pé numa coluna larga: sem o limite ela seria esticada além do tamanho original e perderia nitidez, então ela para no tamanho real e fica centrada na coluna */ .game-cover-tall { max-width: 473px; height: auto; margin-inline: auto; display: block; } .pull-quote { border-left: 3px solid var(--game-accent); padding: 0.35rem 0 0.35rem 1.15rem; margin: 2rem 0 0; font-size: 1.12rem; font-style: italic; color: #d7cfdd; } .pull-quote cite { display: block; margin-top: 0.6rem; font-size: 0.85rem; font-style: normal; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mp-text-soft); } /* ---------- Blocos de mecânica ---------- */ .feature { height: 100%; padding: 1.6rem; border: 1px solid var(--mp-border); border-radius: 14px; background-color: var(--mp-bg); transition: border-color 0.25s ease, transform 0.25s ease; display: flex; align-items: flex-start; gap: 1.4rem; } .feature:hover { border-color: rgba(184, 50, 60, 0.6); transform: translateY(-4px); } .feature-body { flex: 1 1 auto; min-width: 0; /* deixa o texto quebrar em vez de esticar o box */ } /* a ilustração de cada mecânica, encostada na direita do box. As artes vêm em 190×190 com fundo transparente. */ .feature-art { flex: 0 0 auto; width: clamp(140px, 30%, 190px); height: auto; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.6)); } /* Grade espelhada: as artes ficam nas EXTREMIDADES — a da coluna esquerda encosta na esquerda do box, a da coluna direita encosta na direita —, e o texto acompanha o lado da própria arte. As quatro ilustrações emolduram a seção pelas bordas, e o texto corre por dentro. Só a partir de md, que é onde a grade vira duas colunas; abaixo disso tudo empilha numa coluna só e o espelho perde o sentido. */ @media (min-width: 768px) { .feature-grid > [class*="col-"]:nth-child(odd) .feature { flex-direction: row-reverse; } .feature-grid > [class*="col-"]:nth-child(even) .feature-body { text-align: right; } } .feature h3 { font-size: 1.05rem; margin-bottom: 0.6rem; } .feature p { margin: 0; font-size: 0.97rem; line-height: 1.7; } /* ---------- Screenshots (carrossel) ---------- */ .screenshots .carousel { border-radius: 14px; overflow: hidden; border: 1px solid var(--mp-border); background-color: #000; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55); } .screenshots .carousel-item img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; cursor: zoom-in; } .screenshots .carousel-indicators { margin-bottom: 0.7rem; } .screenshots .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; border: 0; margin: 0 5px; background-color: rgba(255, 255, 255, 0.45); opacity: 1; transition: background-color 0.2s ease, transform 0.2s ease; } .screenshots .carousel-indicators .active { background-color: var(--mp-orange); transform: scale(1.2); } .screenshots .carousel-control-prev, .screenshots .carousel-control-next { width: 12%; opacity: 0.55; } .screenshots .carousel-control-prev:hover, .screenshots .carousel-control-next:hover { opacity: 1; } /* ---------- Galeria (figuras soltas) ---------- */ .shot { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--mp-border); background-color: #000; } .shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; cursor: zoom-in; transition: transform 0.4s ease, opacity 0.25s ease; } .shot:hover img { transform: scale(1.03); } .shot figcaption { padding: 0.85rem 1rem; font-size: 0.9rem; color: var(--mp-text-soft); background-color: var(--mp-bg-alt); } /* lightbox simples (js/jogo.js) */ .lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 3vmin; background-color: rgba(6, 5, 9, 0.94); cursor: zoom-out; } .lightbox.open { display: flex; } .lightbox img { max-width: 100%; max-height: 92vh; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8); } /* ---------- Faixa de chamada ---------- */ .game-cta { background: radial-gradient(ellipse at 50% 120%, var(--game-glow), transparent 65%), var(--mp-bg-alt); border-top: 1px solid var(--mp-border); } @media (max-width: 767.98px) { .game-hero { min-height: 68vh; padding-top: 110px; background-position: 62% 30%; } /* no celular o box não comporta texto e arte lado a lado: a ilustração sobe para cima do texto e ocupa a largura toda, e o texto volta todo para a esquerda (o espelho da grade some junto com as duas colunas) */ .feature { flex-direction: column-reverse; gap: 1rem; } .feature-art { align-self: stretch; width: 100%; } .feature-body { text-align: left; } /* no celular o vídeo sai de cena e fica o poster (a imagem de fundo que a própria página declara), para não gastar dado de ninguém */ .game-hero-video { display: none; } .synopsis p { font-size: 1rem; } } /* quem pede menos movimento no sistema também recebe só o quadro parado */ @media (prefers-reduced-motion: reduce) { .game-hero-video { display: none; } } /* ---------- Elenco ---------- Retratos de corpo inteiro recortados (PNG com alfa), um por card. As artes têm larguras diferentes de propósito — o Norbert é comprido, o Ludwig é redondo —, então quem manda no tamanho aqui é a ALTURA: fixar a largura esticaria cada personagem de um jeito e a fileira perderia a escala entre eles. */ .cast-card { height: 100%; display: flex; flex-direction: column; border: 1px solid var(--mp-border); border-radius: 14px; background-color: var(--mp-bg); overflow: hidden; transition: border-color 0.25s ease, transform 0.25s ease; } .cast-card:hover { border-color: var(--cast-tone, var(--game-accent)); transform: translateY(-4px); } /* a arte fica encostada no fundo do quadro, como se o personagem estivesse de pé sobre a linha do texto; o brilho por baixo dá o chão */ .cast-art-box { display: flex; align-items: flex-end; justify-content: center; padding: 1.4rem 1rem 0; background: radial-gradient(ellipse at 50% 100%, var(--cast-glow, var(--game-glow)), transparent 68%); } .cast-art { display: block; height: clamp(190px, 24vw, 290px); width: auto; max-width: 100%; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.7)); } .cast-body { padding: 1.2rem 1.3rem 1.5rem; border-top: 1px solid var(--mp-border); } .cast-role { display: block; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cast-tone, var(--game-accent)); } .cast-body h3 { font-size: 1.15rem; margin: 0.25rem 0 0.6rem; } .cast-body p { margin: 0; font-size: 0.95rem; line-height: 1.7; color: var(--mp-text); } /* ---------- Carrossel de telas em pé ---------- O jogo roda em celular, e é assim que as capturas vêm: altas. Um slide 16/9 as cortaria justamente no meio do tabuleiro, então cada slide aqui é a captura inteira ao lado da legenda — a tela em pé de um lado, o texto do outro. Como todas as capturas têm a mesma proporção, a altura do quadro não muda de um slide para o outro e o carrossel não pula. */ .screenshots .carousel { max-width: 900px; margin-inline: auto; } .shot-slide { display: flex; align-items: center; gap: clamp(1.2rem, 4vw, 2.8rem); /* o padding lateral tem de passar da largura dos controles (abaixo), senão a seta cai por cima da arte */ padding: 1.8rem clamp(3.4rem, 9%, 5rem); } /* seletor comprido de propósito: precisa passar por cima do `.screenshots .carousel-item img`, que força 16/9 recortado — e é exatamente disso que estas capturas em pé precisam escapar. */ .screenshots .carousel-item img.shot-slide-art { flex: 0 0 auto; width: clamp(190px, 38%, 300px); height: auto; /* anula a dica de apresentação do atributo height */ aspect-ratio: auto; object-fit: fill; border-radius: 14px; border: 1px solid var(--mp-border); cursor: zoom-in; } .shot-slide-text { margin: 0; font-size: 1.1rem; line-height: 1.8; color: var(--mp-text); } .screenshots .carousel-control-prev, .screenshots .carousel-control-next { width: 9%; } @media (max-width: 575.98px) { /* no celular a tela em pé e o texto lado a lado não cabem: empilha, e a legenda passa a correr embaixo da arte */ .shot-slide { flex-direction: column; gap: 1rem; padding: 1.4rem 2.6rem 1.8rem; } .screenshots .carousel-item img.shot-slide-art { width: min(210px, 62%); } .shot-slide-text { font-size: 0.95rem; text-align: center; } } /* Grade de mecânicas sem ilustração: o espelho da grade existe para emoldurar a seção com as quatro artes nas bordas. Sem arte não há o que espelhar, e o texto alinhado à direita ficaria solto no meio do nada. */ @media (min-width: 768px) { .feature-grid-plain > [class*="col-"]:nth-child(even) .feature-body { text-align: left; } } /* ================================================================== VARIANTE CLARA DA PÁGINA DE JOGO (class="game-page-clara" no ) Jogo leve pede página leve. Quem usa esta variante NÃO põe o `game-page` junto: sem ele a paleta clara do style.css continua valendo por padrão, a navbar e o rodapé voltam ao branco, e não há uma segunda paleta para manter em dia. O que sobra para consertar aqui são só as peças deste arquivo que nasceram supondo fundo escuro — o véu do hero, os textos claros e as sombras pretas. Cuidado com o --game-accent: nesta variante ele é lido sobre BRANCO (número, versalete, capitular), então precisa de tom escuro. O que cai sobre o hero, que continua escuro, recebe o tom vivo abaixo. ================================================================== */ /* O véu do hero fica bem mais fraco: com a navbar clara não há mais o que escurecer em cima, e o pôr do sol é a parte alegre da arte. O pé segue escuro porque é onde ficam o texto branco e os botões. */ html.game-page-clara .game-hero::after { background: radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(26, 18, 36, 0.30) 75%), linear-gradient(180deg, rgba(26, 18, 36, 0.38) 0%, rgba(26, 18, 36, 0.06) 30%, rgba(26, 18, 36, 0.74) 100%); } /* dentro do hero o fundo continua escuro: estes três seguem claros */ html.game-page-clara .back-link { color: rgba(255, 255, 255, 0.82); } html.game-page-clara .back-link:hover { color: #fff; } html.game-page-clara .chip-accent { border-color: #f0c257; background-color: rgba(240, 194, 87, 0.28); color: #ffeec4; } /* daqui para baixo é tudo sobre branco */ html.game-page-clara .stat span { color: var(--mp-text); } html.game-page-clara .pull-quote { color: var(--mp-heading); } html.game-page-clara .game-cover { box-shadow: 0 18px 44px rgba(43, 43, 46, 0.16); } html.game-page-clara .feature:hover { border-color: var(--game-accent); } /* sombra preta de fundo escuro vira sombra de objeto sobre papel */ html.game-page-clara .cast-art { filter: drop-shadow(0 10px 20px rgba(43, 43, 46, 0.3)); } html.game-page-clara .shot, html.game-page-clara .screenshots .carousel { background-color: var(--mp-bg); border-color: var(--mp-border); box-shadow: 0 16px 40px rgba(43, 43, 46, 0.1); } html.game-page-clara .shot figcaption { color: var(--mp-text); } /* as setas do Bootstrap são brancas: sobre a folha branca elas somem */ html.game-page-clara .carousel-control-prev-icon, html.game-page-clara .carousel-control-next-icon { filter: invert(1); } html.game-page-clara .screenshots .carousel-indicators [data-bs-target] { background-color: rgba(43, 43, 46, 0.28); }