embaixo com o título; ele saiu quando os vídeos de verdade entraram, porque a capa que o YouTube entrega já traz o título desenhado nela — a legenda virava a mesma informação duas vezes. São 8 linhas, e elas guardam duas decisões que custaram a ser tomadas. Se a legenda voltar um dia, ela volta certa; se for reescrita do zero, estes dois pontos se perdem: 1. A LEGENDA É IRMÃ DA MOLDURA, NÃO FILHA. Ao clicar no play, o JS faz `caixa.innerHTML = ''` para trocar a capa pelo iframe — tudo que estivesse DENTRO da moldura seria apagado junto. Fora dela, a legenda sobrevive ao clique e continua identificando o vídeo que está tocando. 2. A COR É DECLARADA, NÃO HERDADA. Esta é uma legenda de verdade, e alguns temas de WordPress redecoram
dentro de
Título do vídeo
----------------------------------------------------------------------- */ #rn-site-wrapper .rn-video-item__cap { margin-top: .9rem; font-size: .85rem; font-weight: 600; line-height: 1.5; color: var(--rn-text); text-align: left; } /* ========================================================================== 2. GALERIA Mosaico de seis fotos, com a primeira dominante. Seis quadrados iguais leriam como planilha; uma foto grande dá hierarquia e faz o olho entrar pela galeria em vez de varrê-la. >>> A CONTA DAS CÉLULAS É O QUE DECIDE O NÚMERO DE COLUNAS. <<< No desktop são TRÊS colunas, e não quatro. Com a foto grande ocupando 2x2, três colunas fecham exatamente: [ GRANDE ][ GRANDE ][ foto 2 ] [ GRANDE ][ GRANDE ][ foto 3 ] [ foto 4 ][ foto 5 ][ foto 6 ] Em quatro colunas sobraria uma célula vazia na última linha, e o mosaico fecharia torto. Se um dia o número de fotos mudar, a conta muda junto: 6 fotos só tilam assim. Com 8, quatro colunas voltam a fechar. No celular são DUAS colunas, e aí quem fecha a conta é a ÚLTIMA foto, que também se estica na largura toda: [ ---- GRANDE ---- ] [ foto 2 ][ foto 3 ] [ foto 4 ][ foto 5 ] [ ---- foto 6 ---- ] >>> AS CÉLULAS ERAM QUADRADAS E DEIXARAM DE SER. <<< O comentário antigo avisava: o 1/1 só era aceitável porque as fotos eram de ambiente, e um retrato enquadrado não serviria porque o corte quadrado deceparia a cabeça. Foi o que chegou — as seis definitivas são planos fechados do Renan, e numa delas a cabeça começa a 3% do topo. Como as seis têm a mesma medida (800x900), a moldura é que cedeu: a célula é 8/9, a proporção exata dos arquivos. Com isso o `cover` não corta nada — ele preenche sem sobrar, que é o melhor caso. O MOSAICO NÃO MUDOU DE DESENHO: as células só ficaram 12% mais altas que largas, e as contas de coluna abaixo continuam valendo, porque elas contam CÉLULAS, não pixels. A foto grande continua ocupando 2x2. ========================================================================== */ #rn-site-wrapper .rn-galeria__sub { margin-top: 1.4rem; } #rn-site-wrapper .rn-galeria__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.6rem, 1.4vw, 1rem); margin-top: clamp(2.4rem, 4.5vw, 3.5rem); } /* Celular: a grande e a última ocupam a largura toda (ver o desenho no comentário da seção). */ @media (max-width: 759px) { #rn-site-wrapper .rn-galeria__item--grande, #rn-site-wrapper .rn-galeria__item:last-child { grid-column: span 2; } } @media (min-width: 760px) { #rn-site-wrapper .rn-galeria__grid { grid-template-columns: repeat(3, 1fr); } #rn-site-wrapper .rn-galeria__item--grande { grid-column: span 2; grid-row: span 2; } } /* >>> 8/9 É A MEDIDA DOS ARQUIVOS (800x900), NÃO UM GOSTO. <<< Trocar uma foto por outra de proporção diferente traz o corte de volta. Recorte para 800x900 antes de subir para o WordPress. */ #rn-site-wrapper .rn-galeria__item { position: relative; aspect-ratio: 8 / 9; overflow: hidden; border-radius: var(--rn-radius); border: 1px solid var(--rn-line); background: var(--rn-bg-card); } #rn-site-wrapper .rn-galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); } #rn-site-wrapper .rn-galeria__item:hover img { transform: scale(1.05); } /* >>> O VÉU AZUL DAS SEIS CÉLULAS FOI REMOVIDO. <<< Ele tingia as fotos para dar a elas uma temperatura de cor só. Com as definitivas — que são o Renan, e não cenário — isso passou a custar mais do que rendia: azul sobre pele lê como correção de cor mal feita. As seis realmente têm luzes diferentes (duas em verde de palco, uma em âmbar, uma em luz de escritório, uma com fundo amarelo). O que costura isso agora é o mosaico em si: mesma moldura, mesma borda, mesmo raio, mesmo espaçamento. Se a diferença de temperatura ainda incomodar, o lugar de resolver é o tratamento dos arquivos — uma camada de cor não corrige uma foto, só a suja por igual. SAIU JUNTO o `:hover::after { opacity: .6 }`, que aliviava o véu ao passar o mouse. Sem véu não há o que aliviar. O zoom de 1.05 do hover continua logo acima, e é ele que dá o retorno do ponteiro. */ /* ========================================================================== 3. CANAIS + MÍDIA KIT ========================================================================== */ #rn-site-wrapper .rn-canais__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2.4rem, 4.5vw, 3.5rem); } /* O card de canal é um inteiro, e não uma div com link dentro: assim a área clicável é o card todo e o leitor de tela anuncia UM link, em vez de um bloco com um link perdido no meio. Ele é uma coluna flex pelo mesmo motivo do .rn-card do global: o texto de apoio tem comprimentos diferentes ("A comunidade de empresários do Grupo TS." quebra em duas linhas, "Bastidores, cortes e o dia a dia." em uma), e sem o `margin-top: auto` do último elemento os cards fechariam em alturas diferentes. */ #rn-site-wrapper .rn-canal { position: relative; display: flex; flex-direction: column; height: 100%; padding: clamp(1.5rem, 2.6vw, 2.1rem); background: var(--rn-bg-card); border: 1px solid var(--rn-line); border-radius: var(--rn-radius); transition: border-color .4s ease, background-color .4s ease, transform .4s ease, box-shadow .4s ease; } #rn-site-wrapper .rn-canal:hover { border-color: var(--rn-accent-line); transform: translateY(-6px); box-shadow: 0 22px 50px -22px rgba(0,0,0,.9); } #rn-site-wrapper .rn-canal__label { font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rn-muted); margin-bottom: .45rem; } /* O `word-break: break-word` existe por causa do @ do YouTube: "@Renan.Nicolini" não tem espaço, e num card estreito ele vazaria para fora da caixa em vez de quebrar. */ #rn-site-wrapper .rn-canal__handle { font-family: var(--rn-font-display); font-size: clamp(1.05rem, 1.7vw, 1.25rem); font-weight: 700; line-height: 1.25; color: var(--rn-text); word-break: break-word; margin-bottom: .8rem; transition: color .3s ease; } #rn-site-wrapper .rn-canal:hover .rn-canal__handle { color: var(--rn-accent); } #rn-site-wrapper .rn-canal__desc { font-size: .88rem; line-height: 1.6; color: var(--rn-muted); } /* A CHAMADA DO PÉ. Substituiu a seta que ficava no canto do card. Ela é melhor que a seta por duas razões. A primeira é de conteúdo: ela diz o que vai acontecer ao clicar, e "assistir", "seguir" e "conhecer" são três coisas diferentes — uma seta diz só "vai para algum lugar". A segunda é de layout: o `margin-top: auto` empurra a chamada para o PÉ do card, e é isso que faz os três terminarem na mesma linha mesmo com descrições de tamanhos diferentes. Sem ele, o card de descrição mais curta ficaria com a chamada subindo e a fileira desmontaria — que é a causa quase sempre esquecida de "os cards ficaram desalinhados". */ #rn-site-wrapper .rn-canal__go { margin-top: auto; padding-top: 1.1rem; font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rn-accent); transition: transform .3s ease; } #rn-site-wrapper .rn-canal:hover .rn-canal__go { transform: translateX(3px); } /* --- O TS Club ----------------------------------------------------------- Mesma caixa dos outros, MESMO TAMANHO, mas com a borda azul já acesa no repouso (nos outros ela só aparece no hover) e um brilho descendo do topo. É o mesmo desenho que o site da Débora dá ao TS Club dela. O motivo: os outros cards são REDES — lugares onde se acompanha alguém. O TS Club é uma COMUNIDADE, tem site próprio e é o único item que leva para FORA do domínio. Ele não é "mais um canal". >>> ELE NÃO FICA MAIOR, E ISSO É O PONTO. <<< Aumentar a caixa quebraria o alinhamento da fileira e transformaria a seção numa oferta. A força deste desenho está em ser do mesmo tamanho e mesmo assim se distinguir: quem varre a fileira para nele sem que nada tenha gritado. >>> ESTA REGRA EXISTE TAMBÉM NO CONTATO-CSS.html E, com outro nome (.rn-social__item--club), no 1-GLOBAL-CSS.html para o rodapé. Mexeu numa, mexa nas três. <<< ----------------------------------------------------------------------- */ #rn-site-wrapper .rn-canal--club { border-color: var(--rn-accent-line); background: radial-gradient(120% 140% at 50% 0%, rgba(47,111,178,.16) 0%, rgba(47,111,178,0) 62%), var(--rn-bg-card); } /* --- O bloco do mídia kit ------------------------------------------------ */ #rn-site-wrapper .rn-kit { margin-top: clamp(2.6rem, 5vw, 4rem); padding: clamp(1.8rem, 3.5vw, 2.8rem); border: 1px solid var(--rn-accent-line); border-radius: var(--rn-radius); background: var(--rn-accent-dim); text-align: center; } #rn-site-wrapper .rn-kit__txt { font-family: var(--rn-font-display); font-size: clamp(1.05rem, 2vw, 1.45rem); font-weight: 700; line-height: 1.35; letter-spacing: .01em; color: var(--rn-text); max-width: 34ch; margin-inline: auto; text-wrap: balance; } #rn-site-wrapper .rn-kit .rn-btn-row { justify-content: center; margin-top: 1.8rem; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f6d5f1e */#rn-site-wrapper .rn-cortes__sub { margin-top: 1.4rem; } #rn-site-wrapper .rn-videos { display: grid; gap: clamp(1.2rem, 2.6vw, 2rem); margin-top: clamp(2.4rem, 4.5vw, 3.5rem); } /* --- Cortes (Shorts) ----------------------------------------------------- O mínimo é 220px porque abaixo disso um bloco 9/16 fica com menos de 400px de altura e o botão de play (que tem até 68px) começa a ocupar metade da largura da capa. `auto-fit` e não `repeat(3,1fr)`: a lista pode crescer. Se um quarto corte entrar, a grade se ajusta sozinha. ----------------------------------------------------------------------- */ #rn-site-wrapper .rn-videos--curtos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } /* No celular UMA coluna só, e com largura limitada: um Short esticado na largura inteira de um telefone fica com quase 700px de altura e não cabe na tela junto da legenda. O `margin-inline: auto` centraliza o que sobra. */ @media (max-width: 559px) { #rn-site-wrapper .rn-videos--curtos { grid-template-columns: 1fr; } #rn-site-wrapper .rn-videos--curtos .rn-video-item { max-width: 320px; margin-inline: auto; } } /* --- Vídeos longos ------------------------------------------------------- */ #rn-site-wrapper .rn-videos--longos { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /* --- A legenda de cada vídeo --------------------------------------------- Ela é IRMÃ da moldura, não filha. Isso importa: ao clicar no play, o JS faz `caixa.innerHTML = ''` para trocar a capa pelo iframe — tudo que estivesse DENTRO da moldura seria apagado junto, inclusive a legenda. Fora dela, a legenda sobrevive ao clique e continua identificando o vídeo que está tocando. A cor é declarada aqui, e não herdada, porque esta é uma legenda de verdade e alguns temas de WordPress redecoramdentro de