/* HÉLIO — camada de blocos. Este arquivo veste os blocos NATIVOS do WordPress com a direção de arte, para que a página possa ser montada e remontada no editor sem que o desenho dependa de um template PHP fechado. Ele é carregado também dentro do editor (add_editor_style), então o que se vê editando é o que sai no site. Regra de contraste inegociável, a mesma de sempre (medida): tinta sobre papel 18,1:1 leitura longa papel sobre grafite 12,6:1 leitura longa sinal sobre grafite 11,8:1 texto permitido tinta sobre sinal 16,5:1 prancha inteira sinal sobre papel 1,15:1 NUNCA como texto — só como massa */ /* ---------- raiz da escala ---------- Toda a escala é em rem, e o font-size do quem define é o customizador do Astra — 17px neste servidor. O tokens.css já fixa isso, mas ele só carrega na página do template HÉLIO; as páginas montadas em blocos ficavam 6% maiores, com o mesmo 0,61rem virando 10,37px em vez de 9,76px. É o mesmo defeito de antes escapando por uma porta nova. Fixar aqui também torna o desenho independente do customizador em qualquer página que use blocos. */ html { font-size: 100%; } /* ---------- bandas ---------- */ .is-style-banda-papel, .is-style-banda-grafite, .is-style-banda-sinal { position: relative; width: 100%; padding-block: clamp(52px, 6vw, 92px); padding-inline: clamp(20px, 4.2vw, 56px); } /* ---------- largura do conteúdo dentro da banda ---------- 1068 e não os 1180 do theme.json. No template antigo o recuo lateral fica DENTRO da largura máxima: `.h-wrap` mede 1180 e o conteúdo sobra com 1068. Aqui o recuo é da banda e a largura vinha por fora, então a página saía 112px mais larga que o original — a manchete ocupava menos da coluna e tudo lia mais frouxo. Precisa ser regra, e não `--wp--style--global--content-size`: o WordPress grava o número direto na folha que gera por container, e não lê a variável de volta. Redefini-la não muda nada, o que já custou uma rodada de "corrigi e continua igual". */ :is(.is-style-banda-papel, .is-style-banda-grafite, .is-style-banda-sinal).is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: 1068px; } :is(.is-style-banda-papel, .is-style-banda-grafite, .is-style-banda-sinal).is-layout-constrained > .alignwide { max-width: 1068px; } .is-style-banda-papel { --bg: #f4f5f2; --fg: #0b0b0c; --soft: #63656a; --line: #d3d4cf; --card: #fff; background-color: var(--bg); color: var(--fg); } .is-style-banda-grafite { --bg: #23272b; --fg: #f4f5f2; --soft: #a8abb0; --line: #3b4147; --card: #2c3136; background-color: var(--bg); color: var(--fg); } .is-style-banda-sinal { --bg: #ffe500; --fg: #0b0b0c; --soft: #5c5300; --line: #d9c300; --card: #0b0b0c; background-color: var(--bg); color: var(--fg); } .is-style-banda-papel :is(h1,h2,h3,h4,h5,h6), .is-style-banda-sinal :is(h1,h2,h3,h4,h5,h6) { color: #0b0b0c; } .is-style-banda-grafite :is(h1,h2,h3,h4,h5,h6) { color: #f4f5f2; } /* ---------- as duas famílias, declaradas ---------- Na frente o theme.json basta. Dentro do editor não: o CSS dinâmico do Astra vence a cascata, e o mesmo parágrafo que sai em Archivo no site aparecia em Anonymous Pro no editor, com os títulos em Rubik. Quem monta a página estaria escolhendo entrelinha e quebra de linha numa tipografia que não é a do site — que é exatamente o que esta camada existe para não acontecer. Declarar aqui resolve os dois lados de uma vez, porque este arquivo é o mesmo que o add_editor_style carrega. É o terceiro lugar por onde o mesmo defeito do Astra entra; ver o font-size do lá em cima. */ .is-style-banda-papel, .is-style-banda-grafite, .is-style-banda-sinal { font-family: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif; } .is-style-banda-papel :is(h1,h2,h3,h4,h5,h6), .is-style-banda-grafite :is(h1,h2,h3,h4,h5,h6), .is-style-banda-sinal :is(h1,h2,h3,h4,h5,h6) { font-family: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif; letter-spacing: -0.02em; } /* Textura de impressão: é o que separa "fundo colorido" de "página impressa". Fica em ::before para nunca interceptar clique — dentro do editor isso importa mais ainda, senão a banda deixa de ser selecionável. */ .is-style-banda-papel::before, .is-style-banda-grafite::before, .is-style-banda-sinal::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; } .is-style-banda-papel::before { background-image: radial-gradient(circle at 50% 50%, rgba(11,11,12,0.16) 1.4px, transparent 1.6px); background-size: 9px 9px; } .is-style-banda-grafite::before { background-image: radial-gradient(circle at 50% 50%, rgba(255,229,0,0.075) 1.3px, transparent 1.5px), repeating-linear-gradient(-38deg, rgba(255,255,255,0.028) 0 1px, transparent 1px 7px); background-size: 11px 11px, auto; } .is-style-banda-sinal::before { background-image: radial-gradient(circle at 50% 50%, rgba(11,11,12,0.14) 1.5px, transparent 1.7px); background-size: 12px 12px; } .is-style-banda-papel > *, .is-style-banda-grafite > *, .is-style-banda-sinal > * { position: relative; z-index: 1; } /* ---------- títulos ---------- As três variantes de banda repetidas de propósito: a regra que pinta os títulos da banda é `.is-style-banda-x :is(h1..h6)`, de especificidade (0,1,1), e venceria um `.is-style-vazado` sozinho — o título saía chapado em vez de vazado. */ .is-style-vazado, .is-style-banda-papel .is-style-vazado, .is-style-banda-grafite .is-style-vazado, .is-style-banda-sinal .is-style-vazado { color: transparent; -webkit-text-stroke: 3px #0b0b0c; } .is-style-banda-grafite .is-style-vazado { -webkit-text-stroke-color: #f4f5f2; } @media (max-width: 640px) { .is-style-vazado, .is-style-banda-papel .is-style-vazado, .is-style-banda-grafite .is-style-vazado, .is-style-banda-sinal .is-style-vazado { -webkit-text-stroke-width: 2px; } } .is-style-tarja { display: inline-block; background: #ffe500; color: #0b0b0c; padding: 0.12em 0.14em 0.04em; } /* ---------- quadro de HQ ---------- */ .is-style-quadro-hq img { display: block; border: 5px solid currentColor; background: #1a1d20; } .is-style-banda-grafite .is-style-quadro-hq img { border-color: #f4f5f2; } /* ---------- tira diagonal ---------- O grupo inclina; a imagem contra-inclina para o assunto ficar reto. A cunha do começo e do fim acompanha a hipotenusa, o que dá o corte de prancha sem serrilhar a borda. */ .is-style-tira-diagonal, .is-style-tira-diagonal-inv { --skew: -2.6deg; } .is-style-tira-diagonal-inv { --skew: 2.6deg; } .is-style-tira-diagonal, .is-style-tira-diagonal-inv { transform: skewY(var(--skew)); margin-block: clamp(28px, 4vw, 54px); } .is-style-tira-diagonal :is(img, .wp-block-image, p, h2, h3, figcaption), .is-style-tira-diagonal-inv :is(img, .wp-block-image, p, h2, h3, figcaption) { transform: skewY(calc(var(--skew) * -1)); } @media (max-width: 760px) { .is-style-tira-diagonal { --skew: -1.4deg; } .is-style-tira-diagonal-inv { --skew: 1.4deg; } } /* ---------- cunha triangular ---------- padding-top de 4,54% = tan(2,6°): assim o ângulo é o mesmo em qualquer largura, em vez de achatar em tela larga. */ .is-style-cunha { border: 0; height: 0; padding-top: 4.54%; margin: 0; background: #ffe500; clip-path: polygon(0 0, 100% 0, 0 100%); } .is-style-cunha.is-style-cunha--baixo { clip-path: polygon(100% 0, 100% 100%, 0 100%); } /* ---------- respiro dentro das bandas ---------- */ .is-style-banda-papel > :where(.wp-block-group, .wp-block-columns), .is-style-banda-grafite > :where(.wp-block-group, .wp-block-columns), .is-style-banda-sinal > :where(.wp-block-group, .wp-block-columns) { max-width: 1180px; margin-inline: auto; } /* Grades nativas nunca com piso rígido: minmax(Npx, 1fr) mantém o piso mesmo num container menor e devolve rolagem lateral no celular. */ .wp-block-columns { flex-wrap: wrap; } /* ---------- bloco: retrato em meio-tom ---------- */ .lfb-retrato { position: relative; aspect-ratio: 1 / 1; overflow: hidden; max-width: 420px; margin-inline: auto; } .lfb-retrato.alignwide, .lfb-retrato.alignfull { max-width: none; } .lfb-retrato-tela { display: block; width: 100%; height: 100%; } .lfb-retrato-reserva { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .lfb-retrato-anel { position: absolute; right: 16px; top: 16px; width: 38px; height: 38px; border-radius: 50%; border: 4px solid #ffe500; } .lfb-retrato-tag { position: absolute; left: 16px; bottom: 14px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: #f4f5f2; line-height: 1.9; text-shadow: 0 1px 6px #000; } .lfb-retrato-tag b { color: #ffe500; font-weight: 700; } .lfb-retrato-vazio { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 20px; text-align: center; color: #a8abb0; font-size: 0.9rem; } /* ---------- bloco: emenda op-art ---------- */ .lfb-opart { overflow: hidden; } .lfb-opart-tela { display: block; width: 100%; height: var(--lfb-op-altura, 74px); } @media (max-width: 640px) { .lfb-opart-tela { height: calc(var(--lfb-op-altura, 74px) * 0.68); } } /* ---------- botão nativo ---------- O theme.json define a cor do botão, mas o CSS dinâmico do Astra vence a cascata e devolve o amarelo dele (#fff700). Medido na página de teste: 255,247,0 no lugar de 255,229,0. Um croma só significa um croma só — a diferença é pequena e é exatamente por isso que passaria despercebida. */ .wp-block-button__link.wp-element-button, .wp-block-button .wp-block-button__link { background-color: #ffe500; color: #0b0b0c; border: 4px solid #0b0b0c; border-radius: 0; font-family: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: -0.01em; transition: transform 0.16s ease, box-shadow 0.16s ease; } .wp-block-button__link.wp-element-button:hover, .wp-block-button__link.wp-element-button:focus-visible { background-color: #ffe500; color: #0b0b0c; transform: translate(-3px, -3px); box-shadow: 6px 6px 0 #0b0b0c; } /* Variante escura: sobre a banda amarela, botão amarelo desaparece. */ .is-style-banda-sinal .wp-block-button:nth-child(2) .wp-block-button__link { background-color: #1a1d20; color: #f4f5f2; } /* Botão tinta: o segundo do par na capa. Cinco classes para vencer as cinco do Astra, pelo mesmo motivo do contorno logo abaixo. */ .wp-block-buttons .wp-block-button.is-style-tinta > .wp-block-button__link.wp-element-button, .wp-block-button.is-style-tinta > .wp-block-button__link { background-color: #1a1d20; color: #f4f5f2; border-color: #0b0b0c; } /* O contorno segue a cor da banda, e não a do tema. O botão "Falar comigo" da capa saía em #fff700 — o amarelo do Astra — sobre papel: 1,03:1, ilegível. Com a cor da banda ele mede 18,1:1 no papel, 12,6:1 no grafite e 16,5:1 no amarelo, sem regra por banda. O seletor comprido é medido, não superstição. O Astra pinta com `.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color)`, que são cinco classes; a versão curta aqui embaixo tem três e perdia calada. Esta tem seis. O segundo seletor cobre o botão solto, fora de um grupo de botões, onde a regra do Astra também não alcança. */ .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:not(.has-text-color), .wp-block-button.is-style-outline > .wp-block-button__link { background-color: transparent; color: var(--fg, #0b0b0c); border: 4px solid var(--fg, #0b0b0c); } .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:not(.has-text-color):hover, .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:not(.has-text-color):focus-visible, .wp-block-button.is-style-outline > .wp-block-button__link:hover, .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible { background-color: var(--fg, #0b0b0c); color: var(--bg, #f4f5f2); } .is-style-banda-grafite .wp-block-button__link.wp-element-button:hover { box-shadow: 6px 6px 0 #ffe500; } /* ---------- bloco: galeria em prancha ---------- Dois modos de tortura geométrica, e eles não se misturam: "tira" inclina o container com skewY e a imagem contra-inclina para compensar — é o arranjo original, e o único que usa skew. Os arranjos poligonais recortam cada quadro com clip-path. O quadro fica torto e a fotografia dentro continua reta, sem escala e sem cisalhamento. É como uma prancha de quadrinho é montada de verdade: quem é cortado é o quadro, nunca o desenho. A MOLDURA desses quadros não pode ser `border`: clip-path recorta a borda junto, e o quadro sai com a calha faltando justamente na diagonal. Por isso a moldura é fundo com recuo — o painel é pintado da cor da moldura e recortado pelo polígono; a imagem vive num quadro interno, recuado e recortado pelo MESMO polígono. A calha é a diferença entre os dois, e por isso acompanha o formato. */ .lfb-galeria { position: relative; } .lfb-galeria-cunha { height: 0; padding-top: var(--lfb-cunha-alt, 4.54%); background: var(--lfb-cunha, #ffe500); } .lfb-galeria-cunha--cima { clip-path: polygon(0 0, 100% 0, 0 100%); } .lfb-galeria-cunha--baixo { clip-path: polygon(100% 0, 100% 100%, 0 100%); } .lfb-galeria--inv .lfb-galeria-cunha--cima { clip-path: polygon(0 0, 100% 0, 100% 100%); } .lfb-galeria--inv .lfb-galeria-cunha--baixo { clip-path: polygon(0 0, 100% 100%, 0 100%); } /* O respiro entre cunha e prancha é um valor próprio, e aceita negativo. Ele existe porque a cunha cresce com o ângulo — a 15° ela ocupa 26,8% da largura — e o vão que servia a 2,6° vira buraco. */ .lfb-galeria-tira { display: grid; gap: var(--lfb-calha, 16px); margin-block: var(--lfb-respiro, 24px); } /* ---- arranjo: tira (skew) ---- */ .lfb-galeria--tira .lfb-galeria-tira { transform: skewY(var(--lfb-skew, -2.6deg)); } @media (min-width: 761px) { .lfb-galeria--tira .lfb-galeria-tira { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } .lfb-galeria--tira.lfb-galeria--inv .lfb-galeria-tira { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); } .lfb-galeria--tira.lfb-galeria--inv .lfb-galeria-capa { order: 2; } } .lfb-galeria-resto { display: grid; gap: var(--lfb-calha, 16px); grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); } .lfb-galeria--tira .lfb-galeria-painel img { /* só aqui a imagem contra-inclina, porque só aqui o pai inclinou */ transform: skewY(calc(var(--lfb-skew, -2.6deg) * -1)); } .lfb-galeria--tira .lfb-galeria-marcador { transform: skewY(calc(var(--lfb-skew, -2.6deg) * -1)) translateY(6px); } .lfb-galeria--tira .lfb-galeria-painel:hover .lfb-galeria-marcador, .lfb-galeria--tira .lfb-galeria-painel:focus-visible .lfb-galeria-marcador { transform: skewY(calc(var(--lfb-skew, -2.6deg) * -1)) translateY(0); } @media (max-width: 760px) { .lfb-galeria--tira .lfb-galeria-tira { transform: skewY(var(--lfb-skew-movel, -1.4deg)); } .lfb-galeria--tira .lfb-galeria-painel img { transform: skewY(calc(var(--lfb-skew-movel, -1.4deg) * -1)); } .lfb-galeria-cunha { padding-top: var(--lfb-cunha-alt-movel, 2.44%); } .lfb-galeria-resto { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- modo ficha: capa e ficha lado a lado, miniaturas embaixo ---- É a prancha clássica da direção. A ficha é conteúdo interno do bloco, montada com blocos nativos — tabela, parágrafo, botão — porque campos meus refariam pior o que o editor já faz bem. QUEM INCLINA É A FILEIRA, e as peças vão junto. A versão anterior inclinava cada peça por conta própria, e é geometria que não fecha: skewY gira em torno do centro do próprio elemento, então a capa cisalhava a partir do centro dela e a ficha a partir do centro dela. Duas retas com origens diferentes não continuam uma na outra — a borda de cima da ficha nascia num nível e a da capa em outro, e o corte que devia atravessar a prancha inteira aparecia quebrado no vão. Com um corte só na fileira as duas bordas ficam na mesma reta por construção, sem depender da largura das colunas. Cada interruptor agora diz se a peça ACOMPANHA o corte: desligar contra-inclina só aquela peça, que fica reta no lugar onde o corte a deixou — que é a assimetria proposital, agora escolhida em vez de acidental. */ .lfb-galeria--modo-ficha .lfb-galeria-tira--ficha { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: stretch; transform: none; } /* A fileira só corta se alguma peça acompanha. Com as duas retas, um corte na fileira só deslocaria as peças para lados opostos. */ .lfb-galeria--modo-ficha.lfb-galeria--corta-fileira .lfb-galeria-tira--ficha { transform: skewY(var(--lfb-skew, -2.6deg)); } @media (max-width: 860px) { .lfb-galeria--modo-ficha .lfb-galeria-tira--ficha { grid-template-columns: 1fr; } } .lfb-galeria--modo-ficha.lfb-galeria--inv .lfb-galeria-tira--ficha { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } @media (min-width: 861px) { .lfb-galeria--modo-ficha.lfb-galeria--inv .lfb-galeria-capa { order: 2; } } /* ---- a capa ---- Acompanhando o corte, a moldura não faz nada: já vem inclinada da fileira, e só a foto contra-inclina para não distorcer. Fora dele, a moldura desfaz o corte por dentro e a foto fica reta com ela. */ .lfb-galeria--modo-ficha .lfb-galeria-capa .lfb-galeria-painel { transform: none; } .lfb-galeria--modo-ficha .lfb-galeria-capa img { transform: none; } .lfb-galeria--modo-ficha.lfb-galeria--corta-fileira.lfb-galeria--incl-capa .lfb-galeria-capa img { transform: skewY(calc(var(--lfb-skew, -2.6deg) * -1)); } .lfb-galeria--modo-ficha.lfb-galeria--corta-fileira:not(.lfb-galeria--incl-capa) .lfb-galeria-capa .lfb-galeria-painel { transform: skewY(calc(var(--lfb-skew, -2.6deg) * -1)); } /* ---- a ficha ---- O deslocamento é o controle que faltava: zero deixa as bordas coincidindo com as da capa, e qualquer outro valor é assimetria pedida. Vale mesmo com a fileira reta, para desencontrar as duas peças sem precisar inclinar nada. */ .lfb-galeria-ficha { border: 5px solid var(--lfb-moldura, #f4f5f2); padding: clamp(20px, 2.4vw, 34px); line-height: 1.62; min-width: 0; transform: translateY(var(--lfb-desloca-ficha, 0px)); } .lfb-galeria--modo-ficha.lfb-galeria--corta-fileira.lfb-galeria--incl-ficha .lfb-galeria-ficha-int { transform: skewY(calc(var(--lfb-skew, -2.6deg) * -1)); } .lfb-galeria--modo-ficha.lfb-galeria--corta-fileira:not(.lfb-galeria--incl-ficha) .lfb-galeria-ficha { transform: skewY(calc(var(--lfb-skew, -2.6deg) * -1)) translateY(var(--lfb-desloca-ficha, 0px)); } .lfb-galeria-ficha-int > :first-child { margin-top: 0; } .lfb-galeria-ficha-int > :last-child { margin-bottom: 0; } /* ---- a tabela da ficha ---- O bloco Tabela nativo não oferece largura de coluna nem respiro de célula, e sem isso a ficha sai espremida. Estes dois vêm do painel. Os valores de tipo e de linha são os da prancha original, não novos: rótulo em 0,61rem com entreletra de 0,16em na cor de apoio, valor em 0,9rem na cor do texto, e a linha separadora em `--line` — o cinza discreto da banda. Com a linha na cor do TEXTO, como estava, a tabela ganha um gradeado claro que não existe no desenho. */ .lfb-galeria-ficha-int table { width: 100%; table-layout: fixed; border-collapse: collapse; border-top: 3px solid var(--line, #3b4147); } .lfb-galeria-ficha-int td, .lfb-galeria-ficha-int th { padding: var(--lfb-celula, 9px) 0; vertical-align: top; word-break: normal; overflow-wrap: anywhere; border: 0; border-bottom: 3px solid var(--line, #3b4147); font-size: 0.9rem; color: var(--fg, inherit); } .lfb-galeria-ficha-int td:first-child { width: var(--lfb-rotulo, 24%); padding-right: 12px; font-size: 0.61rem; font-weight: 800; letter-spacing: 0.16em; line-height: 1.6; text-transform: uppercase; color: var(--soft, inherit); } .lfb-galeria-ficha-int figure.wp-block-table { margin: 0; overflow: visible; } .lfb-galeria-ficha-int p { font-size: 0.95rem; } /* ---- a capa ---- Duas maneiras de a foto ocupar o quadro alto, e a escolha é de quem monta: "caber" mostra o enquadramento inteiro e deixa tarja em cima e embaixo — é o desenho da prancha original; "preencher" corta a foto para ela tomar o quadro todo. */ .lfb-galeria--modo-ficha .lfb-galeria-capa { display: grid; grid-template-rows: minmax(0, 1fr); } .lfb-galeria--modo-ficha .lfb-galeria-capa .lfb-galeria-painel { height: 100%; } .lfb-galeria--modo-ficha .lfb-galeria-capa .lfb-galeria-quadro { height: auto; align-self: stretch; display: block; position: relative; overflow: hidden; } /* Posicionamento absoluto de propósito. Como item de grade com altura automática a foto é esticada pelo align-items implícito e vaza; como item de flex o piso min-width: auto a segura na largura intrínseca — 1620px, e a altura vem junto pela proporção. Com inset: 0 e margin auto ela centra nos dois eixos e a largura é a do quadro. */ .lfb-galeria--modo-ficha .lfb-galeria-capa img { position: absolute; inset: 0; margin: auto; width: 100%; } .lfb-galeria--capa-caber .lfb-galeria-capa img { height: auto; max-height: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .lfb-galeria--capa-preencher .lfb-galeria-capa img { height: 100%; aspect-ratio: auto; object-fit: cover; } /* Altura fixa da capa, quando escolhida: sem ela a moldura acompanha a ficha, e ficha longa vira tarja escura de sobra. */ .lfb-galeria--modo-ficha .lfb-galeria-tira--ficha { grid-template-rows: minmax(var(--lfb-capa-alt, auto), auto); } .lfb-galeria--modo-ficha .lfb-galeria-capa .lfb-galeria-painel { max-height: var(--lfb-capa-alt, none); } /* A faixa de miniaturas é uma segunda tira, não um resto espremido na coluna da direita — e inclina por conta própria. */ .lfb-galeria-tiras { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: var(--lfb-calha, 16px); margin-block: var(--lfb-respiro, 24px); } .lfb-galeria--incl-tiras .lfb-galeria-tiras { transform: skewY(var(--lfb-skew, -2.6deg)); } .lfb-galeria--incl-tiras .lfb-galeria-tiras img { transform: skewY(calc(var(--lfb-skew, -2.6deg) * -1)); } .lfb-galeria--modo-ficha .lfb-galeria-tiras .lfb-galeria-painel img { aspect-ratio: 4 / 3; } @media (max-width: 760px) { .lfb-galeria-tiras { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lfb-galeria--incl-tiras .lfb-galeria-tiras { transform: skewY(var(--lfb-skew-movel, -1.4deg)); } .lfb-galeria--incl-tiras .lfb-galeria-tiras img { transform: skewY(calc(var(--lfb-skew-movel, -1.4deg) * -1)); } /* Mesmo desenho do desktop, com o ângulo do celular. Aqui a fileira já empilhou numa coluna só, então alinhamento não é mais questão — o que segue valendo é o corte ser um só e as peças escolherem se acompanham. O deslocamento fica de fora: numa coluna só ele empurra a ficha para cima do que veio antes. */ .lfb-galeria--modo-ficha.lfb-galeria--corta-fileira .lfb-galeria-tira--ficha { transform: skewY(var(--lfb-skew-movel, -1.4deg)); } .lfb-galeria--modo-ficha.lfb-galeria--corta-fileira.lfb-galeria--incl-capa .lfb-galeria-capa img { transform: skewY(calc(var(--lfb-skew-movel, -1.4deg) * -1)); } .lfb-galeria--modo-ficha.lfb-galeria--corta-fileira:not(.lfb-galeria--incl-capa) .lfb-galeria-capa .lfb-galeria-painel { transform: skewY(calc(var(--lfb-skew-movel, -1.4deg) * -1)); } .lfb-galeria-ficha { transform: none; } .lfb-galeria--modo-ficha.lfb-galeria--corta-fileira.lfb-galeria--incl-ficha .lfb-galeria-ficha-int { transform: skewY(calc(var(--lfb-skew-movel, -1.4deg) * -1)); } .lfb-galeria--modo-ficha.lfb-galeria--corta-fileira:not(.lfb-galeria--incl-ficha) .lfb-galeria-ficha { transform: skewY(calc(var(--lfb-skew-movel, -1.4deg) * -1)); } } /* ---- arranjo: hq — dois no alto, corte diagonal no meio, dois embaixo ---- Os dois quadros do meio ocupam a MESMA área da grade e se dividem por polígonos complementares. A folga entre eles é a diferença entre os dois cortes, não uma calha: assim a diagonal encosta de verdade. */ .lfb-galeria-tira--hq { grid-template-columns: 1fr 1fr; grid-template-rows: 0.85fr 1.5fr 0.85fr; aspect-ratio: 1 / var(--lfb-prop, 1.12); } .lfb-galeria-tira--hq > :nth-child(1) { grid-area: 1 / 1; } .lfb-galeria-tira--hq > :nth-child(2) { grid-area: 1 / 2; } .lfb-galeria-tira--hq > :nth-child(3) { grid-area: 2 / 1 / 3 / 3; } .lfb-galeria-tira--hq > :nth-child(4) { grid-area: 2 / 1 / 3 / 3; } .lfb-galeria-tira--hq > :nth-child(5) { grid-area: 3 / 1; } .lfb-galeria-tira--hq > :nth-child(6) { grid-area: 3 / 2; } /* ---- arranjos: leque e sol — quadros irradiando de um canto ---- Os limites dos raios não são chutados: o quarto de volta é dividido em quatro partes de 22,5°, e cada limite é o ponto onde aquele ângulo encontra a borda do quadro. Com aspect-ratio 1/0,86, isso cai em 35,62% e 86% na borda de cima e em 51,84% na da direita. Ângulo escolhido a olho dá um leque torto, e foi o que aconteceu antes. */ .lfb-galeria-tira--leque, .lfb-galeria-tira--sol { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 1 / var(--lfb-prop, 0.86); gap: 0; } .lfb-galeria-tira--leque > *, .lfb-galeria-tira--sol > * { grid-area: 1 / 1; } /* ---- sol — a peça inteira no disco, os detalhes nos raios ---- Os raios nascem do canto e passam POR BAIXO do disco; o disco fica por cima, inteiro, e cobre as pontas onde elas convergem. É por isso que o primeiro quadro é o disco: ele mostra a peça inteira, e os raios mostram o detalhe. A forma do disco vem do PHP como elipse em coordenadas normalizadas — círculo na tela exige elipse no sistema de coordenadas, porque x e y têm escalas diferentes. Aqui fica só o empilhamento. */ .lfb-galeria-tira--sol > :nth-child(1) { z-index: 3; } /* O traço do disco é mais grosso: contra fotos claras, uma linha fina da cor do papel desaparece e o círculo deixa de se ler como círculo. */ .lfb-galeria-tira--sol > :nth-child(1) .lfb-galeria-traco > * { stroke-width: calc(var(--lfb-borda, 5px) * 3.4); } @media (max-width: 700px) { /* Prancha de quadrinho não cabe em tela de celular sem virar selo. Abaixo de 700px todo arranjo poligonal vira uma coluna simples. */ .lfb-galeria-tira--hq, .lfb-galeria-tira--leque, .lfb-galeria-tira--sol { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: minmax(0, 1fr); aspect-ratio: auto; gap: var(--lfb-calha, 16px); } .lfb-galeria-tira--hq > *, .lfb-galeria-tira--leque > *, .lfb-galeria-tira--sol > * { grid-area: auto !important; --lfb-clip: none !important; aspect-ratio: 3 / 2; } } /* ---------- o quadro ---------- A moldura NÃO é `border` nem recuo. `clip-path` recorta a borda junto, e o recuo é uniforme na caixa mas não na perpendicular ao corte — num corte raso a faixa sai muito mais larga que num corte íngreme, e foi essa a disparidade de espessura entre quadros. O traço é um SVG com vector-effect: non-scaling-stroke, cuja espessura é constante em pixels de tela ao longo de todo o contorno, reto, diagonal ou curvo. O painel recorta, então a metade externa do traço é cortada e sobra exatamente a espessura pedida. */ .lfb-galeria-painel { position: relative; display: grid; /* A coluna precisa ser minmax(0, 1fr) e não o `auto` implícito. Com `auto` a trilha se dimensiona pelo max-content do quadro — a largura natural da foto, 1620px — e o quadro estoura o painel de 694px, invadindo a coluna vizinha. É o mesmo defeito que o diálogo do visor tinha com a trilha de miniaturas. */ grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); width: 100%; margin: 0; padding: 0; border: 0; background: #1a1d20; clip-path: var(--lfb-clip, none); cursor: zoom-in; line-height: 0; transition: transform var(--lfb-hover-t, 500ms) cubic-bezier(0.16, 0.84, 0.34, 1), filter var(--lfb-hover-t, 500ms) ease; } .lfb-galeria-traco { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; } .lfb-galeria-traco > * { fill: none; stroke: var(--lfb-moldura, #f4f5f2); stroke-width: calc(var(--lfb-borda, 5px) * 2); } .lfb-galeria-quadro { display: block; overflow: hidden; min-height: 0; min-width: 0; height: 100%; } /* :not() é obrigatório aqui. Esta regra vem DEPOIS da do modo ficha e tem a mesma especificidade, então vencia — e a proporção 3/2 aplicada a um quadro de altura esticada em 1080px devolvia 1620px de LARGURA, que era a foto invadindo a coluna da ficha. */ .lfb-galeria--tira:not(.lfb-galeria--modo-ficha) .lfb-galeria-capa .lfb-galeria-quadro { aspect-ratio: 3 / 2; height: auto; } .lfb-galeria-painel img { display: block; width: 100%; height: 100%; object-fit: cover; /* O tamanho da imagem exibida é controle do painel: 100% mostra o enquadramento inteiro, acima disso aproxima e corta. O acréscimo da intensidade de hover é a folga de onde o efeito sai sem revelar borda. */ scale: calc(var(--lfb-zoom, 1) + var(--lfb-hover-i, 0.06)); transition: scale var(--lfb-hover-t, 500ms) cubic-bezier(0.16, 0.84, 0.34, 1), translate var(--lfb-hover-t, 500ms) cubic-bezier(0.16, 0.84, 0.34, 1), filter var(--lfb-hover-t, 500ms) ease; } .lfb-galeria-painel:focus-visible { outline: 4px solid #ffe500; outline-offset: 3px; } /* ---------- efeitos de hover ---------- Governados pelas mesmas duas variáveis do painel: --lfb-hover-i é a intensidade e --lfb-hover-t a duração. Mexer na intensidade muda o efeito escolhido, seja ele qual for. */ .lfb-galeria--hover-zoom .lfb-galeria-painel:hover img, .lfb-galeria--hover-zoom .lfb-galeria-painel:focus-visible img { scale: calc(var(--lfb-zoom, 1) + var(--lfb-hover-i) * 2); } .lfb-galeria--hover-deslizar .lfb-galeria-painel:hover img, .lfb-galeria--hover-deslizar .lfb-galeria-painel:focus-visible img { translate: calc(var(--lfb-hover-i) * -60%) 0; } .lfb-galeria--hover-desfoque .lfb-galeria-painel img { filter: blur(calc(var(--lfb-hover-i) * 40px)) saturate(0.75); } .lfb-galeria--hover-desfoque .lfb-galeria-painel:hover img, .lfb-galeria--hover-desfoque .lfb-galeria-painel:focus-visible img { filter: blur(0) saturate(1); } .lfb-galeria--hover-inclinar .lfb-galeria-painel:hover, .lfb-galeria--hover-inclinar .lfb-galeria-painel:focus-visible { rotate: calc(var(--lfb-hover-i) * 20deg); } @keyframes lfb-tremer { 0%, 100% { translate: 0 0; } 20% { translate: calc(var(--lfb-hover-i) * -40px) 0; } 40% { translate: calc(var(--lfb-hover-i) * 34px) 0; } 60% { translate: calc(var(--lfb-hover-i) * -22px) 0; } 80% { translate: calc(var(--lfb-hover-i) * 12px) 0; } } .lfb-galeria--hover-tremer .lfb-galeria-painel:hover, .lfb-galeria--hover-tremer .lfb-galeria-painel:focus-visible { animation: lfb-tremer var(--lfb-hover-t, 500ms) cubic-bezier(0.36, 0.07, 0.19, 0.97); } .lfb-galeria--hover-nenhum .lfb-galeria-painel { cursor: zoom-in; } /* A moldura reage. A sombra é drop-shadow e não box-shadow porque box-shadow é desenhado FORA do clip-path e some no quadro recortado; drop-shadow segue o contorno real, seja retângulo ou raio de sol. */ .lfb-galeria--reage .lfb-galeria-painel:hover, .lfb-galeria--reage .lfb-galeria-painel:focus-visible { filter: drop-shadow(calc(var(--lfb-hover-i) * 80px) calc(var(--lfb-hover-i) * 80px) 0 rgba(11, 11, 12, 0.8)); } .lfb-galeria--reage .lfb-galeria-painel:hover .lfb-galeria-traco > *, .lfb-galeria--reage .lfb-galeria-painel:focus-visible .lfb-galeria-traco > * { stroke: #ffe500; transition: stroke 0.2s ease; } .lfb-galeria-marcador { position: absolute; right: 10px; bottom: 10px; z-index: 2; font-family: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1; padding: 8px 11px; background: #ffe500; color: #0b0b0c; border: 3px solid #0b0b0c; transform: translateY(6px); opacity: 0; transition: opacity var(--lfb-hover-t, 500ms) ease, transform var(--lfb-hover-t, 500ms) ease; } .lfb-galeria-painel:hover .lfb-galeria-marcador, .lfb-galeria-painel:focus-visible .lfb-galeria-marcador { opacity: 1; transform: translateY(0); } /* No sol e no leque a etiqueta cairia fora do recorte, num canto que o polígono não cobre. Ali ela some. */ .lfb-galeria--leque .lfb-galeria-marcador, .lfb-galeria--sol .lfb-galeria-marcador { display: none; } /* ---------- abertura ---------- Duas entradas só, e as duas discretas: aparecer, e crescer com fade. As cunhas entram primeiro, a prancha em seguida — o atraso é o que faz ler como duas etapas, e não como um fade só. */ .lfb-galeria--revelar .lfb-galeria-cunha { transition: opacity var(--lfb-ent-t, 700ms) ease, scale var(--lfb-ent-t, 700ms) cubic-bezier(0.16, 0.84, 0.34, 1); } .lfb-galeria--revelar .lfb-galeria-tira { transition: opacity var(--lfb-ent-t, 700ms) ease var(--lfb-ent-d, 260ms), scale var(--lfb-ent-t, 700ms) cubic-bezier(0.16, 0.84, 0.34, 1) var(--lfb-ent-d, 260ms); } .lfb-galeria--revelar:not(.is-revelado) .lfb-galeria-cunha, .lfb-galeria--revelar:not(.is-revelado) .lfb-galeria-tira { opacity: 0; } .lfb-galeria--ent-zoom:not(.is-revelado) .lfb-galeria-cunha, .lfb-galeria--ent-zoom:not(.is-revelado) .lfb-galeria-tira { scale: calc(1 - var(--lfb-ent-i, 0.1)); } /* Quem pediu menos movimento recebe menos movimento — e recebe o conteúdo inteiro, não uma prancha que nunca abre. */ @media (prefers-reduced-motion: reduce) { .lfb-galeria-painel, .lfb-galeria-painel img, .lfb-galeria-marcador, .lfb-galeria-cunha, .lfb-galeria-tira { transition: none !important; animation: none !important; } .lfb-galeria--revelar .lfb-galeria-cunha, .lfb-galeria--revelar .lfb-galeria-tira { opacity: 1 !important; scale: 1 !important; } } .lfb-galeria-mais { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 22px 0 0; } .lfb-galeria-abrir { font-family: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif; font-size: 0.82rem; text-transform: uppercase; letter-spacing: -0.01em; padding: 14px 24px; cursor: pointer; border: 4px solid #0b0b0c; background: #ffe500; color: #0b0b0c; transition: transform 0.16s ease, box-shadow 0.16s ease; } .lfb-galeria-abrir:hover, .lfb-galeria-abrir:focus-visible { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 #0b0b0c; outline: none; } .lfb-galeria-ocultas { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; } .lfb-galeria--vazia { border: 3px dashed currentColor; padding: 34px; text-align: center; opacity: 0.6; } /* ---------- visor ---------- */ .lfb-visor { border: 0; padding: 0; width: 100%; max-width: 100vw; height: 100%; max-height: 100vh; background: #23272b; color: #f4f5f2; display: none; overflow: hidden; } /* minmax(0, 1fr) e não o `auto` implícito: a trilha de miniaturas mede mais de 2000px com 21 imagens, e uma coluna auto se dimensiona por esse max-content — o diálogo estica junto e a foto sai pela esquerda. */ .lfb-visor[open] { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); } .lfb-visor::backdrop { background: #1a1d20; } .lfb-visor-topo { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 5px solid #f4f5f2; } .lfb-visor-cat { margin: 0; font-size: 0.63rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: #ffe500; } .lfb-visor-titulo { margin: 2px 0 0; font-family: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif; font-size: clamp(1rem, 2.4vw, 1.5rem); text-transform: uppercase; letter-spacing: -0.02em; } .lfb-visor-fechar { background: #ffe500; color: #0b0b0c; border: 3px solid #0b0b0c; font-family: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif; font-size: 0.78rem; text-transform: uppercase; padding: 9px 14px; cursor: pointer; } .lfb-visor-palco { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 18px 70px; } .lfb-visor-quadro { margin: 0; width: 100%; height: 100%; display: flex; min-height: 0; line-height: 0; } .lfb-visor-quadro img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; margin: auto; box-sizing: border-box; border: 5px solid #ffe500; background: #1a1d20; } .lfb-visor-seta { position: absolute; top: 50%; transform: translateY(-50%); background: #ffe500; color: #0b0b0c; border: 3px solid #0b0b0c; width: 46px; height: 46px; font-size: 1.4rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lfb-visor-ant { left: 14px; } .lfb-visor-prox { right: 14px; } .lfb-visor-seta:focus-visible, .lfb-visor-fechar:focus-visible { outline: 4px solid #f4f5f2; outline-offset: 2px; } .lfb-visor-rodape { border-top: 5px solid #f4f5f2; padding: 12px 20px 14px; min-width: 0; } .lfb-visor-legenda { margin: 0 0 10px; font-size: 0.85rem; color: #c8cbcf; } .lfb-visor-legenda b { color: #ffe500; font-weight: 800; } .lfb-visor-trilha { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0 0 4px; overflow-x: auto; scrollbar-width: thin; } .lfb-visor-trilha li { flex: 0 0 auto; } .lfb-visor-trilha button { width: 92px; height: 62px; padding: 0; cursor: pointer; border: 3px solid #3b4147; background: #1a1d20; overflow: hidden; opacity: 0.55; transition: opacity 0.2s ease, border-color 0.2s ease; } .lfb-visor-trilha img { width: 100%; height: 100%; object-fit: cover; display: block; } .lfb-visor-trilha button:hover { opacity: 1; } .lfb-visor-trilha button.is-atual { opacity: 1; border-color: #ffe500; } /* A área de edição da ficha, só dentro do editor. No site ela vive na coluna da direita; aqui ela fica abaixo da prévia, porque o ServerSideRender devolve HTML pronto e não aceita blocos editáveis dentro dele. */ .lfb-galeria-editor-ficha { margin-top: 18px; padding: 14px; border: 2px dashed currentColor; opacity: 0.92; } /* ---------- menu fixo do topo ---------- Preso no alto com position: sticky e não fixed. Fixed tira a barra do fluxo e o conteúdo passa por baixo dela na primeira tela; sticky ocupa o lugar dela e o resto da página desce sozinho, sem compensação de altura em lugar nenhum. */ .lfb-topo { position: relative; z-index: 60; background: var(--lfb-topo-fundo, #0b0b0c); color: var(--lfb-topo-texto, #f4f5f2); border-bottom: 5px solid var(--lfb-topo-realce, #ffe500); /* A barra não fica dentro de banda nenhuma, então não herda a família declarada lá. Na frente o theme.json cobriria; dentro do editor o CSS dinâmico do Astra vence e os links saíam em Anonymous Pro enquanto a marca, que declara a família, saía em Archivo Black. */ font-family: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif; } .lfb-topo--fixo { position: sticky; top: 0; } .lfb-topo-int { display: flex; align-items: center; gap: 20px; max-width: 1180px; margin-inline: auto; padding: 10px clamp(16px, 4vw, 40px); } .lfb-topo-marca { font-family: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif; font-size: 0.98rem; text-transform: uppercase; letter-spacing: -0.02em; color: inherit; text-decoration: none; white-space: nowrap; } .lfb-topo-marca:hover { color: var(--lfb-topo-realce, #ffe500); } .lfb-topo-nav { margin-left: auto; } .lfb-topo-lista { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .lfb-topo-item { position: relative; display: flex; align-items: center; } .lfb-topo-item > a { display: block; padding: 9px 11px; color: inherit; text-decoration: none; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; } .lfb-topo-item > a:hover, .lfb-topo-item > a.esta-aqui { color: var(--lfb-topo-realce, #ffe500); } /* A seção em que se está ganha um filete, não só cor: quem não distingue o amarelo continua sabendo onde está. */ .lfb-topo-item > a.esta-aqui { box-shadow: inset 0 -4px 0 var(--lfb-topo-realce, #ffe500); } .lfb-topo-sub-botao { background: none; border: 0; color: inherit; cursor: pointer; padding: 9px 6px 9px 0; font-size: 0.7rem; line-height: 1; } .lfb-topo-item--tem-sub:hover .lfb-topo-sub-botao, .lfb-topo-item.esta-aberto .lfb-topo-sub-botao { color: var(--lfb-topo-realce, #ffe500); } /* a cascata */ .lfb-topo-sub { position: absolute; top: 100%; right: 0; min-width: 220px; list-style: none; margin: 0; padding: 6px 0; background: var(--lfb-topo-fundo, #0b0b0c); border: 3px solid var(--lfb-topo-realce, #ffe500); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s; } .lfb-topo-item--tem-sub:hover > .lfb-topo-sub, .lfb-topo-item.esta-aberto > .lfb-topo-sub, .lfb-topo-item:focus-within > .lfb-topo-sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .lfb-topo-sub a { display: block; padding: 9px 14px; color: inherit; text-decoration: none; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; } .lfb-topo-sub a:hover { background: var(--lfb-topo-realce, #ffe500); color: #0b0b0c; } .lfb-topo-sub-nota { display: block; margin-top: 2px; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.04em; opacity: 0.66; } .lfb-topo-status { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lfb-topo-realce, #ffe500); white-space: nowrap; } .lfb-topo :is(a, button):focus-visible { outline: 3px solid var(--lfb-topo-realce, #ffe500); outline-offset: 2px; } /* o botão de três traços, só no celular */ .lfb-topo-botao { display: none; margin-left: auto; width: 42px; height: 38px; background: none; border: 3px solid currentColor; color: inherit; cursor: pointer; position: relative; } .lfb-topo-tracos, .lfb-topo-tracos::before, .lfb-topo-tracos::after { position: absolute; left: 50%; width: 18px; height: 3px; background: currentColor; transform: translateX(-50%); } .lfb-topo-tracos { top: 50%; margin-top: -1.5px; } .lfb-topo-tracos::before { content: ""; top: -6px; } .lfb-topo-tracos::after { content: ""; top: 6px; } @media (max-width: 900px) { .lfb-topo-botao { display: block; } .lfb-topo-status { display: none; } .lfb-topo-nav { position: absolute; inset: 100% 0 auto 0; margin: 0; background: var(--lfb-topo-fundo, #0b0b0c); border-bottom: 5px solid var(--lfb-topo-realce, #ffe500); display: none; } .lfb-topo.esta-aberto .lfb-topo-nav { display: block; } .lfb-topo-lista { flex-direction: column; align-items: stretch; gap: 0; } .lfb-topo-item { flex-wrap: wrap; border-top: 2px solid rgba(255, 255, 255, 0.14); } .lfb-topo-item > a { flex: 1; padding: 14px clamp(16px, 4vw, 40px); } .lfb-topo-sub-botao { padding: 14px 20px; font-size: 0.9rem; } /* No celular a cascata empurra o resto para baixo em vez de flutuar: camada sobreposta dentro de um menu já sobreposto vira armadilha de toque. */ .lfb-topo-sub { position: static; width: 100%; border-width: 0; border-left: 5px solid var(--lfb-topo-realce, #ffe500); margin-left: clamp(16px, 4vw, 40px); display: none; opacity: 1; visibility: visible; transform: none; } .lfb-topo-item.esta-aberto > .lfb-topo-sub { display: block; } .lfb-topo-item--tem-sub:hover > .lfb-topo-sub { display: none; } .lfb-topo-item--tem-sub.esta-aberto:hover > .lfb-topo-sub { display: block; } } .lfb-topo--vazio { border: 3px dashed currentColor; padding: 26px; text-align: center; opacity: 0.6; } /* Âncora que para embaixo da barra presa, e não atrás dela. */ :where(.lfb-blocos) [id] { scroll-margin-top: 78px; } /* ---------- capa ---------- A manchete são três linhas em caixa-alta, cada uma com um tratamento: cheia, tarja amarela, e vazada. Vem de três blocos e não de um título com marcação por dentro, porque o RichText do editor devolve span com classe pela metade — e uma manchete que se desmonta ao ser editada é pior que uma linha a menos de semântica. Entrelinha 0,94 e não menos: com caixa-alta acentuada o til do "Ã" sobe e encosta na linha de cima. */ .lfb-giant { margin-block: 22px 0; } .lfb-giant > * { display: block; margin: 0; font-family: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif; font-size: clamp(2.2rem, 0.24rem + 10.33vw, 8.5rem); line-height: 0.94; letter-spacing: -0.035em; text-transform: uppercase; color: var(--fg, #0b0b0c); } /* A tarja tem a largura da palavra, não a da linha: daí o fit-content num bloco que de outro modo ocuparia a fileira inteira. */ .lfb-giant .lfb-mark-linha { width: fit-content; background: #ffe500; color: #0b0b0c; line-height: 0.86; padding: 0.12em 0.1em 0.04em; margin-left: -0.03em; } .lfb-giant .lfb-hollow { color: transparent; -webkit-text-stroke: 3px var(--fg, #0b0b0c); } @media (max-width: 640px) { .lfb-giant .lfb-hollow { -webkit-text-stroke-width: 2px; } } /* Lede e botões de um lado, retrato do outro, alinhados pela base — é o que faz a manchete, o texto e a foto fecharem na mesma linha. */ .lfb-capa-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 38px; align-items: end; /* Os 12px do recuo são o respiro desenhado; a margem entre blocos acrescentava outros 24 por cima e empurrava a capa inteira. */ margin-block-start: 0; padding-top: 12px; } @media (max-width: 900px) { .lfb-capa-grid { grid-template-columns: 1fr; gap: 26px; } } /* O retrato sangra para dentro da margem direita da banda: ganha presença sem sair do container. Sangrar até a borda da tela reintroduziria a rolagem horizontal. */ @media (min-width: 901px) { .lfb-capa-grid > :last-child { margin-right: calc(-1 * clamp(20px, 4.2vw, 56px)); } /* margin-right explícito: só `margin-left: auto` deixava o retrato centrado, porque outra regra já punha `auto` do lado direito e dois autos centram em vez de empurrar. */ .lfb-capa-grid .lfb-retrato { max-width: 420px; margin-left: auto; margin-right: 0; } } .lfb-capa-grid .wp-block-buttons { margin-top: 28px; } /* A tarja de fatos que fecha a capa. */ .lfb-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); border-block: 5px solid var(--fg, #0b0b0c); margin-top: 30px; } .lfb-strip > * { padding: 14px 16px; border-right: 2px solid var(--fg, #0b0b0c); /* O espaçamento entre blocos põe 24px no topo de todas as células menos a primeira, e numa fileira isso desalinha os quatro rótulos. Numa grade o espaço já vem das colunas. */ margin-block: 0; } .lfb-strip > :last-child { border-right: 0; } .lfb-strip p { margin: 0; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft, #63656a); } .lfb-strip p.lfb-strip-valor { margin-top: 3px; font-family: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: 400; letter-spacing: -0.01em; color: var(--fg, #0b0b0c); } /* ---------- cabeçalho de prancha ---------- Fólio à esquerda, título no meio, nota curta à direita, e o filete fechando embaixo. É a assinatura das seções no desenho original, e sem ela a prancha vira "um título e um texto" — foi exatamente o que aconteceu quando estas seções nasceram como parágrafos soltos. */ .lfb-ph { display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: start; margin-bottom: 34px; padding-bottom: 34px; border-bottom: 5px solid var(--fg, #0b0b0c); } @media (max-width: 760px) { .lfb-ph { grid-template-columns: 1fr; gap: 10px; } } .lfb-ph > :is(h1,h2,h3) { margin: 0; padding-top: 0.12em; text-transform: uppercase; } .lfb-ph .lfb-side { margin: 0; padding-top: 0.5em; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--soft, #63656a); text-align: right; line-height: 1.95; } @media (max-width: 760px) { .lfb-ph .lfb-side { text-align: left; } } /* ---------- tipos de texto que as pranchas usam ---------- */ .lfb-sub-titulo { font-family: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif; font-size: clamp(1.1rem, 2.6vw, 1.7rem); text-transform: uppercase; margin: 0 0 14px; padding-bottom: 9px; border-bottom: 5px solid var(--fg, #0b0b0c); } /* Mesma escala do template antigo (--t-base): com 1,02rem fixo o lede media 16,3px onde o original media 17,9px, e a diferença aparecia comparando as duas capas lado a lado. */ .lfb-lede { font-size: clamp(1rem, 0.94rem + 0.25vw, 1.12rem); max-width: 60ch; color: var(--soft, #63656a); } .lfb-lede b, .lfb-lede strong { color: var(--fg, #0b0b0c); font-weight: 700; } /* ---------- trajetória: a fileira de quadros ---------- Período à esquerda em corpo de display, conteúdo à direita. 176px é o que "DEZ 2013 — JAN 2014" mede: com menos, o período mais longo quebra em duas linhas e desalinha a fileira inteira. */ .lfb-quadros { border-top: 3px solid var(--line, #d3d4cf); } .lfb-quadro { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: 22px; padding: 20px 0; border-bottom: 3px solid var(--line, #d3d4cf); } @media (max-width: 620px) { .lfb-quadro { grid-template-columns: 1fr; gap: 6px; } } .lfb-quadro-per { margin: 0; font-family: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif; font-size: 0.86rem; letter-spacing: -0.01em; text-transform: uppercase; color: #ffe500; } .is-style-banda-papel .lfb-quadro-per, .is-style-banda-sinal .lfb-quadro-per { color: var(--fg, #0b0b0c); } .lfb-quadro > :last-child > :is(h3,h4) { font-size: 1.05rem; margin: 0 0 6px; text-transform: uppercase; } .lfb-quadro > :last-child > p { font-size: 0.93rem; color: var(--soft, #63656a); margin: 0; } /* a caixa amarela de destaque, com a etiqueta pousada em cima */ .lfb-destaque { border: 4px solid #ffe500; padding: 20px 22px; margin-top: 30px; } .is-style-banda-sinal .lfb-destaque { border-color: #0b0b0c; } .lfb-tag { display: inline-block; background: #ffe500; color: #0b0b0c; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; padding: 5px 10px; margin: 0 0 12px; } .lfb-destaque > p:not(.lfb-tag) { margin: 0; color: var(--soft, #63656a); font-size: 0.95rem; } .lfb-destaque b, .lfb-destaque strong { color: var(--fg, #0b0b0c); } /* ---------- número gigante vazado ---------- */ .lfb-bignum { margin: 0; font-family: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif; font-size: clamp(5rem, 16vw, 12rem); line-height: 0.74; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 3px #ffe500; } .is-style-banda-papel .lfb-bignum, .is-style-banda-sinal .lfb-bignum { -webkit-text-stroke-color: #0b0b0c; } .lfb-bignum-cap { margin: 14px 0 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; } .lfb-bignum-sub { margin: 10px 0 0; font-size: 0.92rem; color: var(--soft, #63656a); max-width: 34ch; } /* ---------- cartões: repertório, mercados, formação ---------- Um cartão é um grupo com borda e fundo de carta; o título dele é uma tarja amarela. Encaixam quantos couberem, e cada um continua sendo um grupo comum que aceita qualquer bloco dentro. */ .lfb-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; } .lfb-cartao { border: 5px solid var(--fg, #0b0b0c); background: var(--card, #fff); padding: 22px 22px 10px; } .lfb-cartao > :is(h2,h3,h4).lfb-cartao-titulo, p.lfb-cartao-titulo { font-family: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif; font-size: 1.05rem; text-transform: uppercase; color: #0b0b0c; background: #ffe500; display: inline-block; padding: 8px 13px; margin: 0 0 16px; } /* Cada item do cartão é um par título+descrição separado por filete. Lista nativa não dá conta disso: ela tem um nível de texto só. */ .lfb-item { padding: 12px 0; border-bottom: 2px solid var(--line, #d3d4cf); } .lfb-cartao > .lfb-item:last-of-type { border-bottom: 0; } .lfb-item > :is(h4,h5) { font-family: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif; font-size: 0.95rem; text-transform: uppercase; margin: 0 0 4px; } .lfb-item > p { margin: 0; font-size: 0.88rem; color: var(--soft, #63656a); } /* ---------- filmes da obra ---------- O bloco de vídeo é o nativo do WordPress: ele já sabe pôster, controles e legenda, e a moldura é toda daqui. Um bloco meu só repetiria isso pior. */ .lfb-filmes { margin-top: 34px; border-top: 5px solid var(--fg, #0b0b0c); padding-top: 24px; } .lfb-filmes-topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; } .lfb-filmes-nota { margin: 0; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft, #63656a); } .lfb-filmes-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 18px; } .lfb-filmes-grade .wp-block-video { margin: 0; border: 5px solid var(--fg, #0b0b0c); background: var(--card, #fff); } .lfb-filmes-grade .wp-block-video video { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #1a1d20; } .lfb-filmes-grade .wp-block-video figcaption { margin: 0; padding: 11px 14px; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg, #0b0b0c); text-align: left; } /* ---------- a oficina: ferramentas em fichas ---------- Cada ferramenta é uma etiqueta, não um item de lista com marcador: é inventário, e inventário se lê varrendo, não linha a linha. */ .lfb-ferramentas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 16px; } .lfb-fgrupo { border: 3px solid var(--line, #d3d4cf); padding: 16px 18px; } .lfb-fgrupo > :is(h3,h4) { font-family: "Archivo", "Segoe UI", system-ui, sans-serif; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #ffe500; margin: 0 0 10px; } .is-style-banda-papel .lfb-fgrupo > :is(h3,h4), .is-style-banda-sinal .lfb-fgrupo > :is(h3,h4) { color: var(--fg, #0b0b0c); } .lfb-fgrupo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .lfb-fgrupo li { font-size: 0.78rem; font-weight: 600; border: 2px solid var(--line, #d3d4cf); padding: 5px 9px; } /* ---------- duas colunas que viram uma no celular ---------- */ .lfb-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 30px; align-items: start; } .lfb-duas--desigual { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } @media (max-width: 900px) { .lfb-duas--desigual { grid-template-columns: 1fr; } } .lfb-origem { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); } @media (max-width: 860px) { .lfb-origem { grid-template-columns: 1fr; } } /* Filete entre as duas colunas. Ele tinha resolvido isso com uma terceira coluna de 1% levando um grupo de 653px de altura dentro — funciona enquanto as duas colunas medirem isso, e o filete fica curto ou sobrando assim que uma delas crescer. Aqui a régua é a borda da segunda coluna: acompanha a altura sozinha, e some quando a grade empilha, onde uma linha vertical entre blocos empilhados não quer dizer nada. */ .lfb-duas--divide { column-gap: clamp(30px, 5vw, 62px); /* stretch e não o `start` herdado: a régua é a borda da coluna, então ela só atravessa a fileira inteira se a coluna atravessar. Com start o filete media a altura do próprio texto e parava no meio. */ align-items: stretch; } @media (min-width: 761px) { .lfb-duas--divide > * + * { /* Tinta, e não o cinza de filete: é a mesma espessura e a mesma cor dos outros cortes da página. O cinza sobre papel mede 1,2:1 e sumia. */ border-left: 5px solid var(--fg, #0b0b0c); padding-left: clamp(30px, 5vw, 62px); margin-left: calc(clamp(30px, 5vw, 62px) * -1); } /* O espaçamento entre blocos do WordPress põe 24px no topo do segundo grupo, e a coluna esticada perde essa altura: o filete parava 24px antes do fim. Numa grade o espaço já vem do gap. */ .lfb-duas--divide > * { margin-block: 0; } } /* Dentro de uma coluna estreita o período não precisa dos 176px que a fileira larga pede: sobrava um terço da coluna vazio antes do título. */ .lfb-duas .lfb-quadro { grid-template-columns: 92px minmax(0, 1fr); gap: 16px; } /* ---------- fólio da prancha ---------- O algarismo grande e vazado que abre cada seção. É um parágrafo comum com uma classe, e não um bloco meu, porque a única coisa que ele faz é ser grande — o editor já sabe escrever parágrafo, mover e apagar. */ .lfb-folio { font-family: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif; font-size: clamp(3.2rem, 8vw, 6.2rem); line-height: 0.76; letter-spacing: -0.05em; margin: 0 0 0.1em; color: transparent; -webkit-text-stroke: 2px var(--fg, #0b0b0c); } @media (max-width: 640px) { .lfb-folio { -webkit-text-stroke-width: 1.5px; } } /* A linha fina que abre a prancha de obra: o número da obra e a categoria. Não usa o fólio gigante de propósito — numa página com seis obras e seis seções os dois numerais correriam em paralelo e o mesmo "04" apareceria com dois significados. */ .lfb-kicker { margin: 0 0 0.4em; font-size: 0.63rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--soft, #63656a); } .is-style-banda-grafite .lfb-kicker { color: #ffe500; } .is-style-banda-sinal .lfb-kicker { color: #0b0b0c; } /* ---------- contadores ---------- As variáveis --bg/--fg/--soft vêm da banda em volta; os valores depois da vírgula são o que vale quando o bloco é usado solto, fora de banda. */ .lfb-contadores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: var(--lfb-cont-cols, repeat(auto-fit, minmax(min(210px, 100%), 1fr))); /* a calha de 1px sobre fundo de tinta é o filete entre cartões — é borda desenhada por vão, e por isso nunca dobra nos encontros */ gap: 1px; background: var(--fg, #0b0b0c); border: 5px solid var(--fg, #0b0b0c); } .lfb-contadores li { background: var(--bg, #f4f5f2); padding: 22px 20px; } .lfb-contador-num { display: block; font-family: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif; font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--lfb-cont-cor, var(--fg, #0b0b0c)); font-variant-numeric: tabular-nums; } .lfb-contador-rot { display: block; margin-top: 8px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg, #0b0b0c); } .lfb-contador-nota { display: block; margin-top: 6px; font-size: 0.82rem; color: var(--soft, #63656a); } /* Um número de colunas fixo é escolha de desenho para a largura cheia. No celular ele vira quatro colunas de 68px com uma manchete de 38px dentro, então abaixo de 640px o cartão volta a encaixar quantos couberem. A faixa não entra aqui: ela foi feita compacta. */ @media (max-width: 640px) { .lfb-contadores--cartao { grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); } } /* faixa: o recorte por ano, onde o rótulo é curto e o número não precisa de escala de manchete */ .lfb-contadores--faixa { border-width: 3px; } .lfb-contadores--faixa li { padding: 10px 8px; text-align: center; } .lfb-contadores--faixa .lfb-contador-num { font-size: 1.3rem; line-height: 1; letter-spacing: -0.02em; order: 2; } .lfb-contadores--faixa li { display: flex; flex-direction: column; gap: 2px; } .lfb-contadores--faixa .lfb-contador-rot { order: 1; margin-top: 0; font-size: 0.6rem; letter-spacing: 0.14em; color: var(--soft, #63656a); } .lfb-contadores--faixa .lfb-contador-nota { order: 3; font-size: 0.72rem; } .lfb-contadores--vazio { display: block; border: 3px dashed currentColor; background: none; padding: 34px; text-align: center; opacity: 0.6; } /* ---------- gráfico de barras ---------- */ .lfb-barras { border: 5px solid var(--fg, #0b0b0c); background: var(--card, #fff); padding: 24px; } .lfb-barras--sem-moldura { border: 0; background: none; padding: 0; } .lfb-barras-lista { list-style: none; margin: 0; padding: 0; } /* o rótulo ocupa a linha inteira e a barra vem embaixo: com o rótulo ao lado, nome longo comprime a barra e a comparação entre linhas some */ .lfb-barras-lista li { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 4px 12px; align-items: center; padding: 10px 0; } .lfb-barra-rot { grid-column: 1 / -1; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg, #0b0b0c); } .lfb-barra-trilho { display: block; height: 14px; border: 3px solid var(--fg, #0b0b0c); overflow: hidden; } .lfb-barra-fita { display: block; height: 100%; width: var(--ate, 0%); background: var(--lfb-barra-cor, #ffe500); } /* a classe só existe quando o view.js roda; sem ele a barra fica no tamanho final que o servidor calculou */ .lfb-barras--anima .lfb-barra-fita { width: 0; transition: width 0.9s cubic-bezier(0.16, 0.84, 0.34, 1); } .lfb-barras--anima .lfb-barra-fita.is-cheia { width: var(--ate, 0%); } /* O número NÃO herda a cor da barra. Amarelo é massa legível como fita sobre qualquer fundo, mas como texto sobre papel dá 1,15:1 e some — e o gráfico na banda clara ficaria sem os valores. Só na banda grafite, onde o amarelo mede 11,8:1, o número acompanha a barra. */ .lfb-barra-num { font-family: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif; font-size: 1.05rem; text-align: right; color: var(--fg, #0b0b0c); font-variant-numeric: tabular-nums; } .is-style-banda-grafite .lfb-barra-num { color: var(--lfb-barra-cor, #ffe500); } .lfb-barras-eixo { display: flex; justify-content: space-between; margin: 12px 0 0; padding-top: 9px; border-top: 3px solid var(--line, #d3d4cf); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft, #63656a); } .lfb-barras--vazio { border: 3px dashed currentColor; background: none; padding: 34px; text-align: center; opacity: 0.6; } @media (prefers-reduced-motion: reduce) { .lfb-barras--anima .lfb-barra-fita { transition: none; } } /* ---------- panorama 360° ---------- A prancha é só um grid de miniaturas. A foto equirretangular inteira tem 4096px de largura e só desce quando alguém abre o visor. */ .lfb-pano-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--lfb-pano-cols, 4), minmax(0, 1fr)); gap: var(--lfb-calha, 16px); } @media (max-width: 900px) { .lfb-pano-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .lfb-pano-lista { grid-template-columns: minmax(0, 1fr); } } .lfb-pano-item { position: relative; display: block; width: 100%; padding: 0; border: 5px solid var(--lfb-moldura, #f4f5f2); background: #1a1d20; color: inherit; cursor: pointer; text-align: left; overflow: hidden; } .lfb-pano-mini { display: block; aspect-ratio: 2 / 1; overflow: hidden; } .lfb-pano-mini img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; } .lfb-pano-item:hover .lfb-pano-mini img, .lfb-pano-item:focus-visible .lfb-pano-mini img { transform: scale(1.06); } .lfb-pano-item:focus-visible { outline: 4px solid #ffe500; outline-offset: 3px; } /* O selo fica sobre a foto e por isso não pode depender da cor dela: tinta atrás do amarelo dá 16,5:1 em qualquer imagem. */ .lfb-pano-selo { position: absolute; top: 0; left: 0; z-index: 2; font-family: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif; font-size: 0.78rem; line-height: 1; padding: 9px 12px; background: #0b0b0c; color: #ffe500; } .lfb-pano-nome { display: block; padding: 11px 13px; background: #0b0b0c; color: #f4f5f2; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .lfb-pano-nome:empty { display: none; } .lfb-pano--vazio { border: 3px dashed currentColor; padding: 34px; text-align: center; opacity: 0.6; } /* o palco do visor: a tela ocupa tudo, sem recuo lateral — no 360 a moldura atrapalha, porque a imagem é o ambiente inteiro */ .lfb-visor--pano .lfb-pano-palco { position: relative; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); } .lfb-pano-tela { display: block; width: 100%; height: 100%; background: #1a1d20; cursor: grab; touch-action: none; } .lfb-pano-tela:active { cursor: grabbing; } .lfb-pano-aviso { position: absolute; inset: auto 0 0 0; margin: 0; padding: 12px 20px; background: #0b0b0c; color: #f4f5f2; font-size: 0.85rem; text-align: center; } .lfb-pano-aviso a { color: #ffe500; } /* a trilha aqui é de nomes, não de miniaturas: o retângulo de 92px herdado do visor de fotos cortaria o texto */ .lfb-visor--pano .lfb-visor-trilha button { width: auto; height: auto; padding: 9px 13px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #f4f5f2; white-space: nowrap; } /* Selo de acervo na última miniatura: diz quantas fotos ficaram de fora sem precisar de uma frase ao lado do botão. */ .lfb-galeria-selo { position: absolute; right: 0; top: 0; z-index: 3; font-family: "Archivo Black", "Arial Black", Helvetica, Arial, sans-serif; font-size: 0.78rem; line-height: 1; padding: 9px 12px; background: #0b0b0c; color: #ffe500; }