/* ============================================================ tts.css — Motor de leitura acompanhada / karaokê TTS (AnaDita LP) FONTE ÚNICA do CSS do motor TTS, extraído das 3 cópias inline (index.html, privacidade.html, termos.html). Espelha o padrão do blog (blog-astro/public/read-aloud.js): "portar EXATAMENTE o sistema real da LP, sem inventar nada." Toda regra aqui veio AS-IS de uma das 3 páginas. Variáveis CSS (--ouro, --verde, --verde-fundo, --terra, --preto, etc.) são declaradas no :root de CADA página (já existem) — este arquivo as USA, não as declara. PONTOS DE ADAPTAÇÃO POR PÁGINA (via classe no ): - SEM classe (index/LP longa com autoplay): discos .tts-btn por trecho ATIVOS, .ouvir-tudo escondido (a leitura dispara pelo fim do vídeo), .tts-tocando com overlay inset (realça seção inteira). - (privacidade/termos, 1 bloco só): .tts-btn escondido (controller interno), .ouvir-tudo VISÍVEL (controle único), .tts-tocando SEM overlay inset (cobriria a página toda). As demais diferenças (audioDir, audioVer, chunkSelector, autoplayVideo) são lidas em tts.js via data-attrs do — não dependem deste CSS. ============================================================ */ /* ============================================================ TAP-TO-READ (modo leitura — read-aloud granular sob demanda) ============================================================ */ /* Bloco tocável: cria contexto de posição p/ o gatilho no canto */ [data-tts-id]{position:relative;} /* ---- index (LP longa): os discos por trecho ficam escondidos porque a leitura é AUTOMÁTICA (a página lê sozinha após o vídeo). O .ouvir-tudo também some (não há botão manual na index — dispara pelo fim do vídeo). Mantidos no DOM com display:none p/ não quebrar o JS que os referencia. ---- */ .tts-btn,.ouvir-tudo{display:none!important;} /* ---- subpáginas legais (1 bloco só): o disco continua escondido (vira só o controller interno do startPlayAll), mas o .ouvir-tudo é o controle VISÍVEL. ---- */ .tts-page-longread .ouvir-tudo{display:inline-flex!important;} /* Gatilho de áudio — alto-falante laranja, recorrente e IDÊNTICO em todo bloco. Canto superior-direito, alvo >=56px (WCAG 2.5.8 AAA + baixa literacia). */ .tts-btn{ position:absolute;top:12px;right:12px;z-index:5; width:56px;height:56px;flex:0 0 auto; display:inline-flex;align-items:center;justify-content:center; padding:0;margin:0;border:3px solid #fff;border-radius:50%;cursor:pointer; background:var(--laranja);color:#fff; /* LARANJA = ouvir (cor da Ana/logo). Anel branco + sombra: salta de qualquer fundo. Distinto do VERDE (ação). */ box-shadow:0 4px 14px rgba(199,90,27,.40), 0 0 0 1px rgba(0,0,0,.04); -webkit-tap-highlight-color:transparent; transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease; } .tts-btn:hover{transform:scale(1.06);} .tts-btn:active{transform:scale(.94);} /* Respiro idle "estou vivo, me toca" — pulsa suave e CONTÍNUO enquanto o bloco não foi tocado. Sem texto (público não lê): o movimento é a única instrução. Para nos estados loading/playing e em reduced-motion. Mantém a affordance acesa o tempo todo, não só 1x ao surgir. */ @keyframes tts-breathe{ 0%,100%{box-shadow:0 4px 14px rgba(46,125,50,.40), 0 0 0 0 rgba(46,125,50,.42);} 50% {box-shadow:0 4px 14px rgba(46,125,50,.40), 0 0 0 7px rgba(46,125,50,0);} } /* P1-1: respira SÓ no bloco visível (anti-"página piscando" — vários botões juntos cansam). A classe .tts-in-view é togglada pelo IntersectionObserver (add ao entrar, remove ao sair). */ .tts-btn.tts-in-view:not(.is-playing):not(.is-loading){animation:tts-breathe 2.6s ease-in-out infinite;} .tts-btn svg{width:26px;height:26px;display:block;fill:currentColor;pointer-events:none;} /* Ícones: mostra speaker por padrão, esconde os de estado */ .tts-btn .tts-ic-pause, .tts-btn .tts-ic-load{display:none;} /* Estado CARREGANDO (baixando o MP3) — onda/spinner, sem texto */ .tts-btn.is-loading{background:var(--verde-fundo);} .tts-btn.is-loading .tts-ic-speaker{display:none;} .tts-btn.is-loading .tts-ic-load{display:block;animation:tts-spin 1s linear infinite;} /* Estado TOCANDO — vira pause, fundo ouro (alto contraste, não depende de animação) */ .tts-btn.is-playing{background:var(--ouro);color:var(--preto);box-shadow:0 3px 12px rgba(255,215,0,.45);} .tts-btn.is-playing .tts-ic-speaker{display:none;} .tts-btn.is-playing .tts-ic-pause{display:block;} /* Realce do BLOCO ativo — borda/sombra ouro (independe de animação). index: overlay inset (realça a seção inteira). Subpáginas legais: SEM overlay inset (o bloco é a página inteira — cobriria tudo de amarelo). */ .tts-tocando{ box-shadow:0 0 0 3px var(--ouro), 0 8px 26px rgba(255,215,0,.30), inset 0 0 0 2000px rgba(255,215,0,.07)!important; border-radius:16px; } section.tts-tocando, header.tts-tocando{ box-shadow:inset 0 0 0 3px rgba(255,215,0,.85)!important; border-radius:0; } /* Subpáginas legais: anula o overlay inset (guia visual fica por conta do .rd-chunk-now + .rd-w.is-now). */ .tts-page-longread .tts-tocando{ box-shadow:none!important; border-radius:16px; } /* Pulso "me toca" — 1 onda quando o bloco entra na viewport (1x por bloco) */ @keyframes tts-pulse{ 0%{box-shadow:0 3px 10px rgba(46,125,50,.30), 0 0 0 0 rgba(46,125,50,.55);} 70%{box-shadow:0 3px 10px rgba(46,125,50,.30), 0 0 0 16px rgba(46,125,50,0);} 100%{box-shadow:0 3px 10px rgba(46,125,50,.30), 0 0 0 0 rgba(46,125,50,0);} } .tts-btn.tts-ping{animation:tts-pulse 1.1s ease-out 1;} @keyframes tts-spin{to{transform:rotate(360deg);}} /* Gatilho dentro do FAQ summary: posiciona junto ao "+" (não absoluto, p/ não cobrir o texto). margin-left:auto no botão joga ele + o ::after pro fim da linha, sem o "space-between" espalhar os três e criar buraco. */ .faq summary{position:relative;} .faq summary .tts-btn{position:static;width:56px;height:56px;box-shadow:none;margin-left:auto;} .faq summary .tts-btn svg{width:24px;height:24px;} /* P1-2: gatilho do bloco-PAI (seção que contém blocos-filhos tocáveis) ancora JUNTO ao título, NÃO no canto absoluto — senão cola no botão do 1º card filho. Fica centrado acima do h2, ouvindo o conteúdo-intro do pai (que os filhos não cobrem). */ .titulo-tts{display:flex;flex-direction:column;align-items:center;gap:14px;} .titulo-tts .tts-btn{position:static;margin:0 auto;} /* Gatilho menor nas bolhas de exemplo (micro-demo) e cards de agente já cabem no padrão */ .exemplo,.exemplo-bloco{position:relative;} /* ---------- REDUCED MOTION ---------- */ @media (prefers-reduced-motion:reduce){ /* Sem pulso, sem respiro idle e sem spinner girando; o estado vira só cor/ícone/anel branco */ .tts-btn.tts-ping{animation:none;} .tts-btn.tts-in-view:not(.is-playing):not(.is-loading){animation:none;} .tts-btn.is-loading .tts-ic-load{animation:none;} } /* ---------- VELOCIDADE DA LEITURA (aparece durante a narração) ---------- */ .tts-speed{ position:fixed;top:0;left:0;right:0;z-index:120; display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap;gap:8px; padding:10px 12px;background:var(--verde-fundo); box-shadow:0 4px 18px rgba(0,0,0,.30); transform:translateY(-110%);transition:transform .3s ease; } .tts-speed.is-visible{transform:translateY(0);} /* Transporte (▶/⏸ e ⏹) — sempre visível, mesmo se o botão do bloco rolou pra fora da tela */ .tts-trans{ display:flex;align-items:center;justify-content:center; min-width:56px;min-height:56px;padding:6px 10px; border:2px solid transparent;border-radius:12px; background:rgba(255,255,255,.18);color:#fff;cursor:pointer; } .tts-trans:hover{background:rgba(255,255,255,.30);} .tts-trans.tts-trans-play{background:var(--ouro);color:var(--preto);} .tts-trans svg{width:26px;height:26px;display:block;fill:currentColor;pointer-events:none;} .tts-speed-sep{width:2px;align-self:stretch;margin:6px 2px;background:rgba(255,255,255,.25);border-radius:2px;} .tts-speed-opt{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px; min-width:72px;min-height:56px;padding:6px 12px; border:2px solid transparent;border-radius:12px; background:rgba(255,255,255,.12);color:#fff; /* font-family herdada do de cada página (index=Montserrat, subpáginas=system-ui) — paridade exata com as 3 cópias inline sem hardcode aqui. */ font-family:inherit;font-weight:600;font-size:.82rem;line-height:1;cursor:pointer; } .tts-speed-opt .emoji{font-size:1.55rem;line-height:1;} .tts-speed-opt:hover{background:rgba(255,255,255,.20);} .tts-speed-opt[aria-pressed="true"]{background:var(--ouro);color:var(--preto);border-color:#fff;} @media (prefers-reduced-motion:reduce){ .tts-speed{transition:none;} } /* Telas estreitas: velocidade vira só emoji (cabe transporte + 3 velocidades numa linha) */ @media (max-width:410px){ .tts-speed-opt span:not(.emoji){display:none;} .tts-speed-opt{min-width:52px;padding:6px 8px;} .tts-trans{min-width:50px;padding:6px 8px;} } /* ---------- OUVIR TUDO + LEGENDA KARAOKÊ (leitura acompanhada palavra a palavra) ---------- */ /* Botão "ouvir a página toda" — laranja (=ouvir), grande, p/ quem não quer tocar bloco a bloco. */ .ouvir-tudo{ display:inline-flex;align-items:center;justify-content:center;gap:10px; margin:0 auto 22px;min-height:60px;padding:14px 28px; border:3px solid #fff;border-radius:50px;cursor:pointer; /* Laranja NEON (=ouvir, on-brand) p/ saltar do verde escuro — alvo de quem não lê. Texto branco com sombra sutil mantém legibilidade sobre o fill vibrante. */ background:linear-gradient(135deg,#FF8A1E 0%,#FF5A00 100%);color:#fff; text-shadow:0 1px 2px rgba(120,40,0,.55); font-family:inherit;font-weight:700;font-size:1.12rem; box-shadow:0 6px 20px rgba(255,90,0,.55), 0 0 22px rgba(255,120,0,.55); -webkit-tap-highlight-color:transparent;transition:transform .15s ease, box-shadow .15s ease; } .ouvir-tudo:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,90,0,.6), 0 0 30px rgba(255,140,0,.7);} .ouvir-tudo:active{transform:translateY(0);} .ouvir-tudo svg{width:28px;height:28px;fill:currentColor;flex:0 0 auto;display:block;} .ouvir-tudo.is-on{background:var(--verde-fundo);} /* Affordance p/ quem NÃO lê: o botão pulsa sozinho (= "me toca") + uma mãozinha animada apontando. Onda mais forte enquanto a Ana se apresenta (.ouvir-chama). */ .ouvir-tudo{position:relative;animation:ouvir-pulse 2.2s ease-in-out infinite;} .ouvir-tudo.is-on{animation:none;} @keyframes ouvir-pulse{ 0%,100%{box-shadow:0 6px 20px rgba(255,90,0,.55), 0 0 22px rgba(255,120,0,.5), 0 0 0 0 rgba(255,138,30,.6);} 50% {box-shadow:0 6px 20px rgba(255,90,0,.55), 0 0 22px rgba(255,120,0,.5), 0 0 0 16px rgba(255,138,30,0);} } .ouvir-tudo::after{content:"👆";position:absolute;left:50%;top:100%;transform:translateX(-50%); margin-top:6px;font-size:1.7rem;line-height:1;pointer-events:none;animation:ouvir-hand 1.1s ease-in-out infinite;} @keyframes ouvir-hand{0%,100%{transform:translateX(-50%) translateY(3px);}50%{transform:translateX(-50%) translateY(-5px);}} .ouvir-tudo.is-on::after{display:none;} .ouvir-tudo.ouvir-chama{animation:ouvir-chama-pulse 1s ease-in-out infinite;} @keyframes ouvir-chama-pulse{ 0%,100%{transform:scale(1);box-shadow:0 6px 20px rgba(199,90,27,.5), 0 0 0 0 rgba(255,215,0,.65);} 50% {transform:scale(1.05);box-shadow:0 8px 24px rgba(199,90,27,.55), 0 0 0 18px rgba(255,215,0,0);} } @media (prefers-reduced-motion:reduce){ .ouvir-tudo,.ouvir-tudo.ouvir-chama{animation:none;} .ouvir-tudo::after{animation:none;} } /* Leitura acompanhada NO PRÓPRIO TEXTO (sem janela separada) — diferença de cores: · parágrafo/bloco em leitura: realce ouro via .tts-tocando (overlay inset acima — NÃO usa `background`, que apagava o gradiente do hero e revelava o body creme atrás) · palavra JÁ lida: rastro ouro claro (mostra o caminho percorrido) · palavra ATUAL: fundo ouro forte + texto preto (o "dedo" que acompanha) Ajuda a associação som↔grafia (leitura por repetição). */ .rd-w{border-radius:5px;padding:0 1px;transition:background-color .12s ease, color .12s ease;} .rd-w.is-done{background:transparent;} .rd-w.is-now{background:var(--ouro);color:var(--preto);font-weight:700;} /* Trecho (parágrafo/item) atual — guia o olho. Default abrangente (cobre o corpo legal das subpáginas: p, li, .destaque, h2) + variantes específicas da LP. */ .rd-chunk-now{ background:rgba(255,215,0,.18)!important; box-shadow:inset 4px 0 0 var(--ouro), 0 6px 18px rgba(93,64,55,.10)!important; } /* Subpáginas legais: chunk com cantos arredondados e respiro lateral (corpo longo). */ .tts-page-longread .rd-chunk-now{ background:rgba(255,215,0,.16)!important; border-radius:10px;padding:4px 8px;margin-left:-8px;margin-right:-8px; } .agente p.rd-chunk-now, .agente li.rd-chunk-now, .agente .frase.rd-chunk-now{ background:rgba(255,215,0,.16)!important; box-shadow:inset 4px 0 0 var(--verde), 0 4px 14px rgba(46,125,50,.10)!important; } .pilha-item.rd-chunk-now, .pilha-subtotal.rd-chunk-now{ border-color:rgba(255,215,0,.95); background:#FFFDF3!important; } .pilha-total.rd-chunk-now{ box-shadow:0 8px 24px rgba(255,215,0,.38), inset 4px 0 0 var(--verde-fundo)!important; } .pilha-frame p.rd-chunk-now{ border-radius:10px; padding:4px 8px; margin-left:-8px; margin-right:-8px; } @media (prefers-reduced-motion:reduce){ .rd-w{transition:none;} } /* --- Anti-overflow mobile — flex sem min-width:0 era a causa-raiz --- */ .cta,.ouvir-tudo{max-width:100%;overflow-wrap:anywhere;flex-wrap:wrap;} .faq summary .tts-btn{flex:0 0 auto;} @media(max-width:767px){ .ouvir-tudo{padding:14px 18px;font-size:1.02rem;} }