/* ================================================================= MUSEU DA PIXELANDIA Dois modos de exibição controlados por [data-modo] no . "sala" = modo museu, padrão "retro" = como se via em 2018 ================================================================= */ :root { --parede: #10141c; --parede-alta: #161c27; --vitrine: #1b2230; --linha: #29323f; --texto: #e9e7e2; --fraco: #8b94a8; --ouro: #f0b429; --brasa: #c4483f; --display: 'Bricolage Grotesque', system-ui, sans-serif; --corpo: 'IBM Plex Sans', system-ui, sans-serif; --dado: 'IBM Plex Mono', ui-monospace, monospace; --raio: 3px; --borda-vitrine: 1px solid var(--linha); --sombra-vitrine: none; --piso-op: .05; --transicao: 260ms cubic-bezier(.2,.7,.3,1); } /* ---------- modo retrô: o site da Pixelandia ---------- Tokens extraídos de css/style.css do site original: vermelho #C33333, filetes #BD4646, seções alternando branco e #f6f6f6, Open Sans, navbar e rodapé em #222. */ [data-modo='retro'] { --parede: #ffffff; --parede-alta: #f6f6f6; --vitrine: #ffffff; --linha: #e3e3e3; --texto: #333333; --fraco: #666666; --ouro: #c33333; --brasa: #bd4646; --display: 'Open Sans', 'Lato', sans-serif; --corpo: 'Open Sans', sans-serif; --dado: 'Open Sans', sans-serif; --raio: 4px; --borda-vitrine: 1px solid #e3e3e3; --sombra-vitrine: none; --piso-op: 0; } *, *::before, *::after { box-sizing: border-box; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--parede); color: var(--texto); font-family: var(--corpo); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background var(--transicao), color var(--transicao); } /* ---------- piso isométrico ---------- O Habbo desenhava suas salas numa grade de losangos 2:1. Aqui ela vira o papel de parede do museu: quase invisível no modo sala, gritante no modo retrô. */ .piso { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--piso-op); transition: opacity var(--transicao); background-image: repeating-linear-gradient( 26.565deg, transparent 0 31px, currentColor 31px 32px), repeating-linear-gradient(-26.565deg, transparent 0 31px, currentColor 31px 32px); color: var(--ouro); } /* ---------- barra fixa ---------- */ .barra { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px; padding: 10px clamp(16px, 4vw, 48px); background: color-mix(in srgb, var(--parede) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); } .barra__marca { font-family: var(--dado); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--fraco); margin-right: auto; } .barra__marca b { color: var(--texto); font-weight: 600; } .interruptor { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; font-family: var(--dado); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--texto); background: var(--parede-alta); border: var(--borda-vitrine); border-radius: var(--raio); cursor: pointer; transition: background var(--transicao), border-color var(--transicao); } .interruptor:hover { border-color: var(--ouro); } .interruptor__luz { width: 8px; height: 8px; border-radius: 50%; background: var(--linha); box-shadow: none; transition: background var(--transicao), box-shadow var(--transicao); } [data-modo='retro'] .interruptor__luz { background: #c33333; box-shadow: 0 0 0 3px rgba(195,51,51,.3); } :focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; } /* ---------- estrutura ---------- */ .envoltorio { position: relative; z-index: 1; } .faixa { padding: clamp(56px, 9vw, 120px) clamp(16px, 4vw, 48px); } .limite { max-width: 1180px; margin: 0 auto; } .olho { font-family: var(--dado); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ouro); margin: 0 0 14px; } h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.05; margin: 0; } h2 { font-size: clamp(28px, 4vw, 46px); letter-spacing: -.02em; } h3 { font-size: clamp(19px, 2vw, 24px); letter-spacing: -.01em; } .faixa > .limite > p { max-width: 62ch; color: var(--fraco); } .faixa > .limite > p strong { color: var(--texto); font-weight: 600; } /* ---------- abertura ---------- */ .abertura { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(40px, 6vw, 72px); } .abertura__logo { width: min(420px, 82vw); height: auto; display: block; margin-bottom: 28px; image-rendering: -webkit-optimize-contrast; } .abertura h1 { font-size: clamp(38px, 7.5vw, 88px); letter-spacing: -.035em; max-width: 17ch; margin-bottom: 22px; } .abertura h1 em { font-style: normal; color: var(--fraco); } .abertura__linha { max-width: 60ch; font-size: clamp(16px, 1.5vw, 18px); color: var(--fraco); } /* ---------- placar ---------- */ .placar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin-top: 52px; background: var(--linha); border: var(--borda-vitrine); border-radius: var(--raio); overflow: hidden; } .placar__cela { background: var(--parede-alta); padding: 22px 20px; } .placar__num { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4vw, 44px); line-height: 1; letter-spacing: -.03em; display: block; margin-bottom: 8px; } .placar__cela--zero .placar__num { color: var(--brasa); } .placar__rot { font-family: var(--dado); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fraco); } #grade-antes { margin-top: 44px; } /* ---------- filtros ---------- */ .filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 40px; } .filtro { font-family: var(--dado); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 7px 14px; color: var(--fraco); background: transparent; border: 1px solid var(--linha); border-radius: var(--raio); cursor: pointer; transition: color var(--transicao), border-color var(--transicao), background var(--transicao); } .filtro:hover { color: var(--texto); border-color: var(--fraco); } .filtro[aria-pressed='true'] { color: var(--parede); background: var(--ouro); border-color: var(--ouro); } /* ---------- saída para a página ---------- */ .externo { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 30px 0 0; } .botao-externo { display: inline-block; padding: 11px 22px; font-family: var(--dado); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--ouro); background: transparent; border: 1px solid var(--ouro); border-radius: var(--raio); transition: background var(--transicao), color var(--transicao); } .botao-externo:hover, .botao-externo:focus-visible { background: var(--ouro); color: var(--parede); } .externo__nota { font-size: 13.5px; color: var(--fraco); } /* No retrô vira o .btn-default do site original: mesma cor, mesma borda de 1px, mesmo preenchimento no hover, mesmo meio segundo. */ [data-modo='retro'] .externo { justify-content: center; } [data-modo='retro'] .botao-externo { font-family: 'Open Sans', sans-serif; font-size: 18px; letter-spacing: 0; text-transform: none; color: #c33333; border: 1px solid #c33333; border-radius: 4px; padding: 10px 26px; transition: all .5s; } [data-modo='retro'] .botao-externo:hover, [data-modo='retro'] .botao-externo:focus-visible { background: #c33333; border-color: #c33333; color: #eeeeee; } /* ---------- grade do acervo ---------- */ .grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-flow: dense; gap: clamp(20px, 2.6vw, 34px); } /* As peças ocupam espaço conforme sua proporção real. As capas de Facebook são quase 3:1 e ficavam espremidas numa grade uniforme. */ @media (min-width: 700px) { .peca[data-formato='larga'] { grid-column: span 2; } .peca[data-formato='larga'] .peca__moldura { min-height: 260px; } .peca[data-formato='alta'] .peca__moldura { min-height: 420px; } .peca[data-formato='alta'] .peca__moldura img { max-height: 520px; width: auto; } } @media (min-width: 1120px) { .peca[data-formato='larga'] .peca__moldura { min-height: 300px; } } .peca { display: flex; flex-direction: column; background: var(--parede-alta); border: var(--borda-vitrine); border-radius: var(--raio); box-shadow: var(--sombra-vitrine); overflow: hidden; transition: transform var(--transicao), border-color var(--transicao); } .peca:hover { border-color: color-mix(in srgb, var(--ouro) 55%, var(--linha)); } .peca.oculta { display: none; } .peca__moldura { position: relative; margin: 0; padding: 20px; background: var(--vitrine); border-bottom: 1px solid var(--linha); display: flex; align-items: center; justify-content: center; min-height: 190px; } [data-modo='sala'] .peca__moldura { background: #0a0d13; } .peca__moldura img, .peca__moldura video { max-width: 100%; height: auto; display: block; border-radius: 1px; } /* Capturas são documento, não obra: moldura mais discreta e altura contida, para não competirem com o acervo da Sala 1. */ .peca__moldura--doc { padding: 0; min-height: 0; } .peca__moldura--doc img { max-height: 460px; object-fit: cover; object-position: top; width: 100%; } .peca__moldura img.miuda, .ampliar img.miuda { image-rendering: pixelated; image-rendering: crisp-edges; } .peca__lupa { position: absolute; inset: 0; border: 0; padding: 0; background: transparent; cursor: zoom-in; } .peca__selo { position: absolute; top: 10px; right: 10px; font-family: var(--dado); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 8px; color: var(--parede); background: var(--ouro); border-radius: var(--raio); } /* ---------- carrossel ---------- Peças com muitas telas da mesma interface entram como uma peça só, navegável, em vez de inundarem a grade com imagens quase iguais. */ .carrossel { position: relative; width: 100%; } .carrossel__palco { position: relative; display: flex; align-items: center; justify-content: center; min-height: 240px; cursor: zoom-in; } /* Especificidade elevada: `.peca__moldura img` (0,1,1) declara display:block e venceria um `.carrossel__img` simples (0,1,0). */ .peca__moldura .carrossel__img { display: none; max-width: 100%; height: auto; } .peca__moldura .carrossel__img.ativa { display: block; } .carrossel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 34px; height: 46px; display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; color: var(--texto); background: color-mix(in srgb, var(--parede-alta) 82%, transparent); border: var(--borda-vitrine); border-radius: var(--raio); cursor: pointer; transition: background var(--transicao), color var(--transicao), border-color var(--transicao); } .carrossel__nav:hover { border-color: var(--ouro); color: var(--ouro); } .carrossel__nav--ant { left: 6px; } .carrossel__nav--prox { right: 6px; } .carrossel__barra { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linha); font-family: var(--dado); font-size: 11px; color: var(--fraco); } .carrossel__conta { flex: none; letter-spacing: .1em; } .carrossel__conta b { color: var(--ouro); font-weight: 600; } .carrossel__rot { line-height: 1.4; } [data-modo='retro'] .carrossel__nav { border-radius: 4px; } [data-modo='retro'] .carrossel__nav:hover { background: #c33333; color: #eeeeee; border-color: #c33333; } [data-modo='retro'] .carrossel__conta b { color: #c33333; } @media (max-width: 620px) { .carrossel__palco { min-height: 170px; } .carrossel__nav { width: 28px; height: 38px; font-size: 20px; } } /* ---------- etiqueta de parede ---------- */ .etiqueta { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .etiqueta__num { font-family: var(--dado); font-size: 10.5px; letter-spacing: .12em; color: var(--fraco); } .etiqueta h3 { font-size: 20px; } .etiqueta__meta { font-family: var(--dado); font-size: 11px; color: var(--fraco); display: flex; flex-wrap: wrap; gap: 6px 10px; } .etiqueta__nota { font-size: 13.5px; line-height: 1.6; color: var(--fraco); margin: 0; } /* o carimbo que se repete em toda etiqueta — o argumento do museu */ .carimbo { margin-top: auto; padding-top: 13px; border-top: 1px dashed var(--linha); font-family: var(--dado); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--brasa); display: flex; align-items: center; gap: 8px; } .carimbo::before { content: ''; width: 6px; height: 6px; flex: none; background: var(--brasa); transform: rotate(45deg); } .carimbo--vazio { color: var(--fraco); } .carimbo--vazio::before { background: var(--fraco); } /* ---------- sala vazia ---------- */ .vazio { border: 1px dashed var(--linha); border-radius: var(--raio); padding: clamp(32px, 6vw, 64px); text-align: center; color: var(--fraco); } .vazio h3 { color: var(--texto); margin-bottom: 12px; } .vazio p { max-width: 48ch; margin: 0 auto; font-size: 14.5px; } /* ---------- encerramento ---------- */ .fim { border-top: 1px solid var(--linha); } .fim h2 { max-width: 20ch; margin-bottom: 24px; } .fim__data { font-family: var(--dado); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brasa); margin-bottom: 18px; } .rodape { padding: 34px clamp(16px, 4vw, 48px) 60px; border-top: 1px solid var(--linha); font-family: var(--dado); font-size: 11px; color: var(--fraco); display: flex; flex-wrap: wrap; gap: 10px 26px; } /* ---------- ampliação ---------- */ .ampliar { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 56px); background: rgba(4,6,10,.94); backdrop-filter: blur(6px); } .ampliar[open], .ampliar.aberto { display: flex; } .ampliar img, .ampliar video { max-width: 100%; max-height: 82vh; height: auto; border: 1px solid var(--linha); } .ampliar__fechar { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; font-size: 20px; line-height: 1; color: var(--texto); background: transparent; border: 1px solid var(--linha); border-radius: var(--raio); cursor: pointer; } .ampliar__fechar:hover { border-color: var(--ouro); } .ampliar__pe { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; font-family: var(--dado); font-size: 11px; letter-spacing: .1em; color: var(--fraco); } @media (max-width: 620px) { .barra__marca span { display: none; } .peca__moldura { min-height: 150px; padding: 14px; } } /* ================================================================= MODO RETRÔ — reconstrução do layout da index original ================================================================= */ /* A barra vira a navbar fixa em #222, com as marcas do template. */ [data-modo='retro'] .barra { background: #222222; backdrop-filter: none; border-bottom: 0; padding-top: 14px; padding-bottom: 14px; } [data-modo='retro'] .barra__marca { font-size: 22px; font-weight: 700; color: #dddddd; letter-spacing: 0; text-transform: none; } [data-modo='retro'] .barra__marca b { color: #dddddd; font-weight: 700; } [data-modo='retro'] .barra__marca span { color: #bbbbbb; font-size: 12px; } [data-modo='retro'] .interruptor { background: transparent; border: 1px solid #c33333; color: #c33333; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; border-radius: 4px; padding: 8px 16px; transition: all .5s; } [data-modo='retro'] .interruptor:hover { background: #c33333; color: #eeeeee; } [data-modo='retro'] .interruptor:hover .interruptor__luz { background: #eeeeee; box-shadow: none; } /* Abertura sobre a imagem de cabeçalho do site original. */ [data-modo='retro'] .abertura { background: url(../marca/cineheader.png) no-repeat bottom center; background-size: cover; text-align: center; padding-top: clamp(70px, 12vw, 150px); padding-bottom: clamp(60px, 10vw, 120px); } [data-modo='retro'] .abertura__logo { margin: 0 auto 30px; } [data-modo='retro'] .abertura h1 { font-weight: 300; color: #ffffff; max-width: none; margin-left: auto; margin-right: auto; text-shadow: 1px 1px 6px rgba(0,0,0,.7); } [data-modo='retro'] .abertura h1 em { color: #f0c9c9; } /* Especificidade elevada de propósito: a regra base `.faixa > .limite > p` (0,2,1) sobrepunha a versão curta desta e devolvia o texto para --fraco, ilegível sobre o cabeçalho. */ [data-modo='retro'] .faixa.abertura > .limite > .abertura__linha { color: #f5f5f5; font-weight: 300; font-size: 18px; margin-left: auto; margin-right: auto; text-shadow: 1px 1px 4px rgba(0,0,0,.75); } [data-modo='retro'] .faixa.abertura > .limite > .abertura__linha strong { color: #ffffff; font-weight: 600; } /* Seções alternando branco e #f6f6f6, como no original. */ [data-modo='retro'] #antes { background: #ffffff; } [data-modo='retro'] #acervo { background: #f6f6f6; } [data-modo='retro'] #arquivo { background: #ffffff; } [data-modo='retro'] .fim { background: #f6f6f6; border-top: 0; } /* Títulos centrados com o filete vermelho por baixo. */ [data-modo='retro'] .faixa > .limite > .olho, [data-modo='retro'] .faixa > .limite > h2 { text-align: center; } [data-modo='retro'] .olho { color: #999999; font-size: 12px; letter-spacing: 1px; } [data-modo='retro'] h2 { font-weight: 300; color: #666666; letter-spacing: 0; margin-bottom: 20px; } [data-modo='retro'] .faixa > .limite > h2::after { content: ''; display: block; width: 70px; height: 1px; background: #bd4646; margin: 20px auto 0; } [data-modo='retro'] .faixa > .limite > p { margin-left: auto; margin-right: auto; text-align: center; } [data-modo='retro'] .filtros { justify-content: center; } [data-modo='retro'] .filtro { border-radius: 4px; letter-spacing: 1px; } [data-modo='retro'] .filtro[aria-pressed='true'] { background: #c33333; border-color: #c33333; color: #eeeeee; } [data-modo='retro'] .placar__cela { background: #ffffff; } [data-modo='retro'] .placar__num { font-weight: 300; } [data-modo='retro'] .placar__cela--zero .placar__num { color: #c33333; } /* Vitrine clara e o overlay de hover do portfólio antigo. */ [data-modo='retro'] .peca__moldura { background: #ffffff; } [data-modo='retro'] .peca:hover { border-color: #c33333; } [data-modo='retro'] .peca__moldura:not(.peca__moldura--video)::after { content: attr(data-titulo); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; background: rgba(0,0,0,.66); color: #f6f6f6; font-size: 18px; font-weight: 300; opacity: 0; transition: opacity .5s; pointer-events: none; } [data-modo='retro'] .peca:hover .peca__moldura:not(.peca__moldura--video)::after { opacity: 1; } [data-modo='retro'] .etiqueta h3 { font-size: 16px; font-weight: 600; border-bottom: 1px solid #bd4646; padding-bottom: 12px; display: inline-block; } [data-modo='retro'] .carimbo { border-top-color: #e3e3e3; } [data-modo='retro'] .peca__selo { color: #eeeeee; background: #c33333; } [data-modo='retro'] .vazio { border-color: #dddddd; } [data-modo='retro'] .fim__data { color: #c33333; letter-spacing: 1px; text-align: center; } /* .fim h2 tem max-width: 20ch; sem margens automáticas ele encosta à esquerda mesmo com text-align: center. */ [data-modo='retro'] .fim > .limite > h2 { margin-left: auto; margin-right: auto; } [data-modo='retro'] .rodape { background: #222222; color: #777777; border-top: 0; justify-content: center; text-align: center; } [data-modo='retro'] .ampliar { background: rgba(0,0,0,.9); } [data-modo='retro'] .ampliar__fechar { color: #eeeeee; border-color: #c33333; }