/* ========================================================================== vp2-novo.css — 20/08/2026 Os blocos novos aprovados por ele na noite de 20/08. ⛔ REGRA DESTE ARQUIVO: nada aqui redefine seletor que ja existe em vp2-base.css ou vp2-tela.css. Tudo nasce com prefixo proprio (.vpn-), para nunca brigar na cascata com o que ja funciona. ========================================================================== */ /* -------------------------------------------------------------------------- 1 · A LUPA DAS PAGINAS DE IMPRENSA — ler a coluna no celular Hoje o toque abre o arquivo -alta.jpg numa aba, e no celular a pagina chega inteira na tela: ninguem le. Aqui ela abre num visor que aproxima e arrasta com o dedo. ⚠️ Fica FORA de #vp2-root, pendurada no : o runtime do site recria o DOM dentro do root e mataria os eventos. -------------------------------------------------------------------------- */ .vpn-visor{ position:fixed; inset:0; z-index:120; display:none; background:#040B1A; color:#F7F8FA; font-family:'Jost',system-ui,sans-serif; } .vpn-visor[data-aberto]{ display:flex; flex-direction:column; } .vpn-visor-palco{ position:relative; flex:1 1 auto; overflow:hidden; touch-action:none; cursor:grab; background:#040B1A; } .vpn-visor-palco.arrastando{ cursor:grabbing; } .vpn-visor-palco img{ position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; } .vpn-visor-barra{ flex:none; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px)); background:#0A1B3A; border-top:1px solid #ffffff14; } .vpn-visor-barra button{ font-family:'Jost',system-ui,sans-serif; font-weight:500; font-size:0.9375rem; letter-spacing:0.06em; color:#F7F8FA; background:#12244A; border:1px solid #C9A24B55; border-radius:999px; padding:9px 16px; cursor:pointer; min-height:42px; } .vpn-visor-barra button:hover{ border-color:#E4C173; color:#E4C173; } .vpn-visor-barra button:focus-visible{ outline:2px solid #E4C173; outline-offset:2px; } .vpn-visor-barra .vpn-z{ font-variant-numeric:tabular-nums; font-size:0.875rem; letter-spacing:0.12em; color:#E4C173; min-width:52px; } .vpn-visor-barra .vpn-fechar{ margin-left:auto; } .vpn-visor-topo{ flex:none; padding:calc(12px + env(safe-area-inset-top,0px)) 16px 10px; background:#0A1B3A; border-bottom:1px solid #ffffff14; font-weight:300; font-size:0.9375rem; line-height:1.5; color:#C9D3E9; } .vpn-visor-topo b{ font-weight:500; color:#F7F8FA; } @media (min-width:900px){ .vpn-visor-topo{ font-size:1rem; } } /* -------------------------------------------------------------------------- 2 · A LINHA DO PEDIDO POR E-MAIL Ordem dele, 20/08: quem quiser a imagem pede por e-mail, e ele autoriza caso a caso. ⛔ A pagina nao promete envio — diz que o pedido e analisado. -------------------------------------------------------------------------- */ .vpn-pedido{ font-family:'Jost',system-ui,sans-serif; font-weight:300; font-size:0.875rem; line-height:1.6; color:#8FA0C4; margin:12px 0 0; text-wrap:pretty; } .vpn-pedido a{ color:#E4C173; text-decoration:none; border-bottom:1px solid #C9A24B55; } .vpn-pedido a:hover{ border-bottom-color:#E4C173; } /* -------------------------------------------------------------------------- 3 · HOJE NA HISTORIA DO VIP -------------------------------------------------------------------------- */ .vpn-efem{ max-width:660px; margin:0 auto; text-align:center; font-family:'Jost',system-ui,sans-serif; } .vpn-efem-dia{ font-family:'Playfair Display',Georgia,serif; font-style:italic; font-weight:400; font-size:1.125rem; color:#E4C173; letter-spacing:0.02em; margin:0 0 6px; } .vpn-efem-ano{ font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:clamp(3rem,11vw,5.5rem); line-height:.92; color:#F7F8FA; letter-spacing:-0.03em; margin:0 0 18px; font-variant-numeric:tabular-nums; } .vpn-efem-fato{ font-weight:300; font-size:1.125rem; line-height:1.85; color:#C9D3E9; margin:0 auto; max-width:44ch; text-wrap:pretty; } .vpn-efem-outro{ margin-top:30px; font-family:'Jost',system-ui,sans-serif; font-weight:500; font-size:0.875rem; letter-spacing:0.22em; text-transform:uppercase; color:#E4C173; background:transparent; border:1px solid #C9A24B55; border-radius:999px; padding:12px 26px; cursor:pointer; min-height:44px; } .vpn-efem-outro:hover{ border-color:#E4C173; background:#E4C1731a; } .vpn-efem-outro:focus-visible{ outline:2px solid #E4C173; outline-offset:3px; } /* -------------------------------------------------------------------------- 4 · A VOZ DELE — 21/08/2026 Ele gravou sete audios de improviso contando as proprias cenas. ⛔ preload="none": peso ZERO na abertura da pagina. So baixa no play. ⛔ Nao toca sozinho. Quem nao apertar nem sabe que existe. ⛔ Nome de arquivo NEUTRO no servidor: voz-jogador, voz-cantora — a regra de nao pôr nome de terceiro em nome de arquivo continua de pe. -------------------------------------------------------------------------- */ /* o botao dentro da lupa — mesmo desenho dos outros (classe .vpn-btn-foto), so muda que ele SOME nas fotos que nao tem voz */ .vpn-ouvir{ display:none !important; } .vpn-ouvir[data-tem]{ display:flex !important; } /* a barrinha que anda enquanto toca */ .vpn-tempo{ display:none; height:3px; width:100%; margin-top:10px; background:#ffffff1f; border-radius:99px; overflow:hidden; } .vpn-tempo[data-tem]{ display:block; } .vpn-tempo i{ display:block; height:100%; width:0; background:#E4C173; } /* o bloco de voz avulso — no bordao e nas honras ⭐ 21/08, correcao dele: usa O MESMO botao dourado da galeria, que ele aprovou, e o texto na PRIMEIRA PESSOA — "aperte e escute na minha voz". ⛔ O desenho antigo, com botao de um lado e explicacao do outro, saiu: ficava comprido e, sem o css, virava um botao cru de navegador. */ .vpn-fala{ max-width:520px; margin:34px auto 0; } /* -------------------------------------------------------------------------- O BOTAO NA LEGENDA DA FOTO — pedido dele em 21/08, e ele tem razao: "as pessoas que vao ver sao tudo acima de quarenta, cinquenta anos, tem que ser bem explicadinho". Dentro da lupa estava escondido: so aparecia depois de abrir a foto. Aqui ele fica DEBAIXO DA LEGENDA, com o dedo apontando e dizendo o nome de quem se fala. ⛔ O nome de terceiro aparece SO no texto visivel do botao — nunca em alt, title, meta ou nome de arquivo. -------------------------------------------------------------------------- */ .vpn-btn-foto{ position:relative; overflow:hidden; display:flex; align-items:center; gap:11px; width:100%; margin:16px 0 2px; padding:13px 16px; min-height:56px; font-family:'Jost',system-ui,sans-serif; font-weight:400; font-size:1rem; line-height:1.35; text-align:left; letter-spacing:.005em; color:#0A1730; border:0; border-radius:14px; background:linear-gradient(180deg,#EFCE86 0%,#E4C173 52%,#D6B15F 100%); box-shadow:0 1px 0 #FFFFFF55 inset, 0 6px 18px -8px #00000099; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .12s ease, box-shadow .18s ease, filter .18s ease; } .vpn-btn-foto:hover{ filter:brightness(1.05); } .vpn-btn-foto:active{ transform:translateY(1px); box-shadow:0 3px 10px -6px #000000aa; } .vpn-btn-foto:focus-visible{ outline:3px solid #E4C173; outline-offset:3px; } /* o dedo aponta, e chama a atencao sem incomodar */ .vpn-btn-foto .mao{ flex:none; font-size:1.3125rem; line-height:1; animation:vpn-aponta 2.6s ease-in-out infinite; } @keyframes vpn-aponta{ 0%,72%,100%{ transform:translateX(0) } 80%{ transform:translateX(4px) } 88%{ transform:translateX(0) } } @media (prefers-reduced-motion:reduce){ .vpn-btn-foto .mao{ animation:none } } .vpn-btn-foto .ico{ flex:none; width:30px; height:30px; border-radius:50%; background:#0A1730; color:#E4C173; font-size:12px; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 2px 6px -2px #00000088; } .vpn-btn-foto[data-tocando] .ico::after{ content:'❚❚'; letter-spacing:-1px; } .vpn-btn-foto:not([data-tocando]) .ico::after{ content:'▶'; margin-left:2px; } .vpn-btn-foto .rot{ flex:1 1 auto; } .vpn-btn-foto .rot b{ font-weight:600; } /* ⛔ 21/08 — o tempo saiu de todos os botoes, por ordem dele: "tire o tempo aí de todos esses comentários". */ /* enquanto toca, uma faixa fina anda no pe do proprio botao — ⛔ nao mexe no fundo, que ficava sujo com o degrade */ .vpn-btn-foto::after{ content:''; position:absolute; left:0; bottom:0; height:3px; width:0; background:#0A1730; opacity:.34; transition:width .25s linear; } .vpn-btn-foto[data-tocando]::after{ width:var(--andou,0%); } .vpn-btn-foto[data-tocando]{ box-shadow:0 0 0 2px #E4C17355, 0 8px 20px -8px #000000aa; } /* a legenda cresce para caber o botao sem espremer o texto */ .vp2-item-txt:has(.vpn-btn-foto){ min-height:0; } /* a dica na galeria, para a pessoa saber que existe voz la dentro */ .vpn-dica-voz{ font-family:'Jost',system-ui,sans-serif; font-weight:300; font-size:1rem; line-height:1.7; color:#8FA0C4; text-align:center; margin:26px auto 0; max-width:620px; } .vpn-dica-voz b{ font-weight:500; color:#E4C173; } /* -------------------------------------------------------------------------- 5 · A SANFONA DO TEXTO JURIDICO — 21/08/2026 Pedido dele: "fica descendo, descendo, é texto que não acaba nunca mais". Eram 8,6 telas de celular so de texto legal. ⛔

NATIVOS: abrem com UM TOQUE, sem programa nenhum. Se o motor do site falhar, a sanfona continua abrindo — e o texto fica no codigo, entao robo, leitor de tela e impressao acham tudo. ⛔ NADA de :hover — 80% do publico dele e celular. ⛔ E o que a lei manda ficar a vista NAO ENTRA aqui dentro. Em especial o link de recusa da contagem: sem ele o banner de cookie volta ao site. -------------------------------------------------------------------------- */ .vpn-legal{ margin-top:16px; } .vpn-legal > summary{ display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; padding:13px 16px; min-height:48px; border-radius:10px; font-family:'Jost',system-ui,sans-serif; font-weight:500; font-size:.9375rem; letter-spacing:.04em; color:#E4C173; background:#0E2246; border:1px solid #C9A24B44; -webkit-tap-highlight-color:transparent; } .vpn-legal > summary::-webkit-details-marker{ display:none; } .vpn-legal > summary::before{ content:'+'; flex:none; width:22px; height:22px; border-radius:50%; background:#E4C173; color:#0A1730; font-size:14px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; } .vpn-legal[open] > summary::before{ content:'−'; } .vpn-legal > summary:hover{ border-color:#E4C173; } .vpn-legal > summary:focus-visible{ outline:2px solid #E4C173; outline-offset:3px; } .vpn-legal[open] > summary{ border-radius:10px 10px 0 0; } .vpn-legal > p{ font-family:'Jost',system-ui,sans-serif; font-weight:300; font-size:1rem; line-height:1.9; color:#8FA0C4; margin:0; padding:14px 16px 0; border-left:1px solid #C9A24B22; border-right:1px solid #C9A24B22; } .vpn-legal > p:last-of-type{ padding-bottom:16px; border-bottom:1px solid #C9A24B22; border-radius:0 0 10px 10px; } .vpn-legal > p strong{ color:#C9D3E9; font-weight:500; } .vpn-legal > p em{ font-style:italic; color:#E4C173; } .vpn-legal > p a{ color:#E4C173; }