` do App: uma camada `fixed` atrás de tudo, em toda página que não seja a home (lá a mesma arte já é o hero e o portal). O div mora na template part do rodapé, e não na do topo, porque o wrapper da part de cima é `position:sticky;z-index:30` — um filho `z-index:-1` dentro dele ficaria atrás só dos irmãos e ACIMA do conteúdo da página. O rodapé não cria contexto de empilhamento. Por que este arquivo existe em vez do CSS ir junto da part: o conversor engole o começo de seletores como `body:not(…)` / `body:has(…)` (sobra `.home) section…`, inválido e descartado calado pelo navegador) e joga fora regra que não cite nenhuma classe de bloco — que é justamente o caso das três regras daqui. ====================================================================== */ .eftl-page-bg{ position:fixed;inset:0;z-index:-1;pointer-events:none; /* sobreposição filha do conteúdo herda o max-width do layout constrained */ max-width:none;margin:0; /* A arte é a imagem mais pesada do site e carrega em TODA página que não é a home. O original é um PNG de 1536px e 928 KB; aqui ela aparece a 14% de opacidade e sob uma máscara que a apaga antes do rodapé, então nem o tamanho nem a precisão do PNG servem para nada. O WebP de 1024px que o `webp-converter-for-media` já gerou custa 188 KB — 80% a menos. Por que `image-set()` e não deixar o plugin trocar: o rewrite dele vale para ``, e esta é uma `background-image`; além disso as regras de WebP saíram do .htaccess, que hoje só tem as do LiteSpeed. O `url()` depois do `image-set()` é o que Safari antigo e leitores sem WebP pegam. */ background-image:url(/wp-content/uploads/2026/08/bg-eft21-1024x683.png); background-image:image-set( url(/wp-content/uploads/2026/08/bg-eft21-1024x683.png.webp) type("image/webp"), url(/wp-content/uploads/2026/08/bg-eft21-1024x683.png) type("image/png")); background-position:center top;background-size:cover;background-repeat:no-repeat; opacity:0.14; -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,0.35) 55%,transparent 90%); mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,0.35) 55%,transparent 90%); } /* na home a arte é o hero e o portal: nada de camada por baixo */ body.home .eftl-page-bg{display:none;} /* As faixas de cada página pintam `background:var(--eft-bg)` para garantir o escuro no tema de blocos — e é isso que tapava a arte. Elas ficam transparentes (tipo + classe ganha da classe sozinha, seja qual for a ordem de carregamento) e quem pinta o escuro passa a ser o . Cartões, pílulas e cabeçalhos internos não entram: só as faixas de nível superior. */ body:not(.home) section.wp-section, body:not(.home) .eftl-ck-wrap, body:not(.home) .eftl-ct-wrap, body:not(.home) .eftl-ob-wrap{background-color:transparent;} /* O do tema de blocos é quase preto (`basecolor`) e o roxo do layout se perdia quando as faixas deixaram de pintar. */ body:not(.home){background-color:var(--eft-bg,#0a0813);} /* O CSS global do Greenshift traz `header{position:sticky;top:20px;z-index:99}` (e `top:5px` no mobile) para grudar a barra do topo. A regra é por TIPO, então pega todo

da página: o cabeçalho da gaveta do quarto, o das gavetas de upgrade/transferir da conta, o do cartão de ingresso. Cada um descia 20px e passava por cima do conteúdo logo abaixo. Só a barra do topo (e o wrapper da template part dela) continua grudada. */ header:not(.eftl-topbar):not(.wp-block-template-part){position:static;top:auto;z-index:auto;} /* Gaveta aberta (quarto, upgrade, editar/transferir): o fundo não rola junto — senão o dedo/roda passa para a página atrás e a gaveta parece solta. Quem põe e tira a classe é o JS de cada gaveta, que também compensa a barra de rolagem que some (padding-right inline) para a página não saltar para a direita. */ body.eftl-travado{overflow:hidden;} /* Rolagem discreta, no feitio das barras finas do Safari: sem setas, sem calha, polegar arredondado que só ganha corpo ao passar o mouse. Vale para a página e para tudo que rola dentro dela (gavetas, listas, tabelas largas). As duas famílias de propriedade existem porque uma não cobre a outra: `scrollbar-width`/`scrollbar-color` são o padrão (Firefox, e Chromium 121+) e são HERDADAS, então bastam no ; os `::-webkit-scrollbar` são o que Safari entende, não herdam e por isso precisam do seletor universal. Onde as duas valem, o navegador segue o padrão e ignora os pseudo-elementos. O polegar é desenhado com `border` transparente + `background-clip:content-box`: é o que dá o respiro em volta sem precisar de calha pintada. */ html{ scrollbar-width:thin; scrollbar-color:rgba(163,150,176,.34) transparent; } *::-webkit-scrollbar{width:11px;height:11px;} *::-webkit-scrollbar-track, *::-webkit-scrollbar-corner{background:transparent;} *::-webkit-scrollbar-thumb{ background-color:rgba(163,150,176,.34); border:3px solid transparent;background-clip:content-box;border-radius:999px; } *::-webkit-scrollbar-thumb:hover{background-color:rgba(163,150,176,.62);} /* barra do admin e editor do WordPress ficam com a barra do sistema */ #wpadminbar *::-webkit-scrollbar{width:auto;height:auto;} /* O ingresso impresso — o botão da página chama `window.print()`. Antes o mesmo botão capturava a tela com html2canvas e montava um A4 com jsPDF: 550 KB de biblioteca vindos de um CDN para produzir um PDF que era uma foto. O navegador faz melhor, com texto vetorial. O ingresso NÃO sai do lugar: mover para o o desliga do CSS dos ancestrais (as classes do GreenShift que montam a grade) e o layout desmontava. Em vez disso o script marca a cadeia do ingresso até o com `eftl-print-cadeia`, e aqui somem só os irmãos de cada nível — a árvore, e portanto o estilo, fica de pé. Paisagem porque o ingresso é largo (proporção ~2:1): em retrato ele encolheria a ponto de quebrar as colunas. */ @media print{ @page{size:A4 landscape;margin:8mm;} body.eftl-imprimindo{background:#fff !important;} /* some tudo que não está no caminho do ingresso */ body.eftl-imprimindo > *:not(.eftl-print-cadeia), body.eftl-imprimindo .eftl-print-cadeia > *:not(.eftl-print-cadeia):not(#ingresso){ display:none !important; } /* os invólucros do caminho perdem só o respiro e o fundo — a largura fica como está, senão o cartão estica e deixa de ser o que se vê na tela */ body.eftl-imprimindo .eftl-print-cadeia{ margin:0 !important;padding:0 !important;background:none !important; min-height:0 !important;box-shadow:none !important; } /* a arte e os fundos só saem no papel com isto */ body.eftl-imprimindo #ingresso, body.eftl-imprimindo #ingresso *{ -webkit-print-color-adjust:exact !important;print-color-adjust:exact !important; } /* o cartão tem 1000px e a A4 deitada oferece ~1062: sai no tamanho da tela. Nenhuma declaração de largura aqui — um `max-width:100%` anularia o limite que o próprio cartão tem e ele voltaria a esticar */ body.eftl-imprimindo #ingresso{ margin:0 auto !important; break-inside:avoid;page-break-inside:avoid; } /* A arte lateral tem 200px de 1000 na tela, mas o cartão traz uma media query que vira 50/50 abaixo de 980px — e a folha do Chrome, com as margens padrão, cai nessa faixa: a imagem saía ocupando metade do ingresso e o texto quebrava palavra a palavra. Aqui a proporção é fixada, e vale em qualquer largura de papel. O `div` no seletor pula o