/* ========================================================================== ESTILO.CSS — Objeto Educacional Digital (OED) multimídia "Teatro e MPB: a resistência cultural à ditadura militar no Brasil" COMO LER ESTE ARQUIVO • Cada bloco abaixo tem um título numerado [N]. Use Ctrl+F e digite "[7]" para ir direto. • Tamanhos estão em px (pixels), cores em #hex ou rgba(). "var(--nome)" usa uma variável definida em [1]: mude a variável e todos os lugares que a usam mudam juntos. • A ordem das regras importa: uma regra mais abaixo vence uma igual mais acima. Por isso NÃO reordene os blocos sem testar. ÍNDICE [1] Variáveis (cores, medidas) e identidade por série/área [2] Base: reset, foco visível, texto só para leitor de tela, movimento reduzido [3] Fundos e grafismo (fundo colorido da página) [4] Estrutura da página e ícones [5] Botões [6] Tela de abertura (capa) [7] Painel de teste (ferramenta do protótipo, não faz parte do OED) [8] Tela interna: cabeçalho e cartão branco de conteúdo [9] Nível 1: fotografia com marcadores + lista "Por onde começar" [10] Nível 2: abas MPB / Teatro [11] Cards de conteúdo (lista de itens, miniaturas, discos de vinil) [12] Tela de encerramento [13] Ajustes para telas grandes (a partir de 1024px) [14] Menu lateral e janelas de texto (Orientações, Expediente) [15] Janela do conteúdo (item aberto) e animação de troca [16] Players de áudio e vídeo, letra sincronizada [17] Ampliação de imagem (zoom) [18] Avisos (toast) e barra de ajuste ACESSIBILIDADE: este projeto segue WCAG 2.2 AA e ABNT NBR 16452. Itens marcados com "A11Y" abaixo existem por causa disso — não remova sem avaliar o impacto. ========================================================================== */ /* ========================================================================== [1] VARIÁVEIS — o "painel de controle" visual do projeto Para trocar uma cor ou medida do projeto inteiro, edite aqui. ========================================================================== */ :root{ /* Pede ao navegador para usar sempre o tema claro nos controles nativos (barra de rolagem, campos). */ color-scheme: light; /* Verdes da marca: --neon = verde vivo (faixa e destaques); --neon-base = verde de fundo da página. */ --neon:#cdd409; --neon-base:#a6bc3e; /* Neutros: --superficie = fundo dos cartões; --fundo-sutil = bege claro (áreas secundárias); --borda / --borda-forte = linhas finas e linhas de campos (a forte atende contraste 3:1, WCAG 1.4.11). */ --superficie:#ffffff; --fundo-sutil:#f1efe8; --borda:#d3d1c7; --borda-forte:#888780; /* Cores de texto: --texto = principal; --texto-sutil = apoio (legendas, créditos); --marca-fundo = verde-claro de fundo para itens selecionados. */ --texto:#2c2c2a; --texto-sutil:#65645d; --marca-fundo:#eef3db; /* Azul de ação: botões, links, abas e anel de foco. -hover e -press são o azul ao passar o mouse e ao clicar. */ --acao:#4c549e; --acao-hover:#414887; --acao-press:#383e75; --foco:#4c549e; /* --serie-sutil = lilás claro (fundo dos ícones); --ok = verde de "concluído"; --grade = linhas divisórias. */ --serie-sutil:#e5def8; --ok:#1d9e75; --grade:#e3e1d9; /* Cores de botões desabilitados (indisponíveis). */ --desab-fundo:#f1efe8; --desab-borda:#d3d1c7; --desab-texto:#64635c; /* Fonte do projeto. Se a Montserrat não carregar, o navegador usa as seguintes, em ordem. */ --fonte:"Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* --r = arredondamento dos cartões. --alvo = tamanho MÍNIMO de qualquer botão tocável (44px, WCAG 2.5.8). */ --r:12px; --alvo:44px; /* Medidas do layout: altura da faixa verde no topo da tela interna e da área acima do título na capa. */ --faixa-neon:clamp(200px, 30vh, 300px); --linha-conteudo:192px; /* Sombra padrão de painéis flutuantes. */ --sombra:0 4px 20px rgba(26,26,26,.16); /* Valores PADRÃO de série/área. O JavaScript (app.js, no início) troca o atributo data-serie e data-area no , e as regras logo abaixo substituem estas cores. */ --serie:#d39f2b; --area:#b14d3d; --area-suporte:#b14d3d; } /* Cor da SÉRIE (1ª, 2ª, 3ª): pinta o fundo da capa. Este OED é da 3ª série (amarelo). */ [data-serie="1"]{ --serie:#4f85b2; } [data-serie="2"]{ --serie:#6c62c4; } [data-serie="3"]{ --serie:#d39f2b; } /* Cor da ÁREA do conhecimento: LGG (Linguagens), MAT (Matemática), CNT (Ciências da Natureza), CHS (Ciências Humanas). Este OED é CHS (terracota). --area-suporte é a versão escurecida usada em textos/ícones. */ [data-area="LGG"]{ --area:#da5184; --area-suporte:#c44977; } [data-area="MAT"]{ --area:#df6708; --area-suporte:#c05907; } [data-area="CNT"]{ --area:#007c5e; --area-suporte:#007c5e; } [data-area="CHS"]{ --area:#b14d3d; --area-suporte:#b14d3d; } /* ========================================================================== [2] BASE — regras gerais que valem para a página toda ========================================================================== */ /* Faz width/height já incluírem borda e preenchimento (facilita calcular tamanhos). */ *,*::before,*::after{box-sizing:border-box} /* Atributo "hidden" sempre esconde o elemento, mesmo que outra regra defina display. O JavaScript usa hidden para mostrar/ocultar telas e painéis. */ [hidden]{display:none!important} /* Margem de segurança ao rolar até um elemento (evita ficar sob o "notch" do celular). */ html{scroll-padding-top:env(safe-area-inset-top,0px)} /* Corpo da página: fonte, tamanho base (16px), cor do texto e fundo verde de segurança. */ body{margin:0;font-family:var(--fonte);font-size:16px;line-height:1.5;color:var(--texto);background:var(--neon-base);-webkit-font-smoothing:antialiased} /* Botões e campos herdam a fonte da página (por padrão o navegador usa outra). */ button,input,select{font:inherit;color:inherit} /* Mãozinha ao passar sobre botões. */ button{cursor:pointer} /* Imagens nunca passam da largura do espaço onde estão. */ img{max-width:100%} /* A11Y — ANEL DE FOCO: contorno azul de 3px que aparece ao navegar pelo teclado (Tab). WCAG 2.4.7 e 2.4.11. NÃO remova. */ :focus-visible{outline:3px solid var(--foco);outline-offset:2px;border-radius:4px} /* A11Y — "visually hidden": o texto fica invisível mas é lido por leitores de tela. Use a classe vh em textos só para quem não enxerga. */ .vh{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Títulos sem margem própria; "balance" equilibra o tamanho das linhas quebradas. */ h1,h2,h3{margin:0;text-wrap:balance} /* Parágrafos sem margem própria (o espaçamento vem de "gap" nos contêineres). */ p{margin:0} /* A11Y — MOVIMENTO REDUZIDO: quem ativou "reduzir movimento" no sistema não vê animações nem transições (WCAG 2.3.3). */ @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}} /* ========================================================================== [3] FUNDOS E GRAFISMO Duas camadas coloridas fixas atrás de tudo (.fundo.capa e .fundo.interna). O JavaScript alterna a classe "visivel" para mostrar uma ou outra. O .grafismo é o desenho de hexágonos por cima. ========================================================================== */ /* Fundos e grafismo */ .fundo{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .35s ease} .fundo.visivel{opacity:1} .fundo.capa{background:var(--serie)} .fundo.capa::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 34%,var(--neon) 100%)} .fundo.interna{background:var(--neon-base)} .fundo.interna::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 0,transparent var(--faixa-neon),var(--area) 100%)} .grafismo{position:fixed;inset:0;z-index:1;pointer-events:none;color:var(--neon);opacity:.6} .grafismo svg{width:100%;height:100%} /* ========================================================================== [4] ESTRUTURA DA PÁGINA E ÍCONES .app = envelope de tudo; .tela = cada tela (capa, interna, fim); .env = coluna central com largura máxima; .nav = barra de topo (voltar / menu); .icone = tamanho e traço padrão dos ícones SVG. ========================================================================== */ .app{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column} .tela{display:flex;flex:1;flex-direction:column} .env{width:100%;max-width:1280px;margin:0 auto;padding:0 16px} .nav{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding-top:12px;position:relative;z-index:3} /* Botão redondo só com ícone (voltar, menu, fechar). 44x44px = alvo mínimo de toque. */ .icone-btn{display:inline-grid;place-items:center;width:var(--alvo);height:var(--alvo);border:0;background:transparent;border-radius:999px;color:var(--texto)} .icone-btn:hover{background:rgba(255,255,255,.35)} /* Ícones: desenhados só com traço (stroke) na cor do texto (currentColor). A classe "cheio" preenche em vez de traçar (usada em play/pausa). */ .icone{width:24px;height:24px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .icone.cheio{fill:currentColor;stroke:none} .icone-btn .icone{width:26px;height:26px} /* ========================================================================== [5] BOTÕES .btn-primario = ação principal (azul cheio); .btn-terciario = link discreto; .btn-sec = secundário (contorno azul), usado em Anterior/Próximo; .btn-chip = botão em forma de pílula (Legendas, Audiodescrição, Transcrição...). Estado "ligado" dos chips usa aria-pressed / aria-expanded (azul mais grosso). ========================================================================== */ /* Botões */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--alvo);padding:12px 24px;border-radius:8px;border:1.5px solid transparent;font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase} .btn-primario{background:var(--acao);color:#fff} .btn-primario:hover{background:var(--acao-hover)} .btn-primario:active{background:var(--acao-press)} .btn-terciario{background:transparent;color:var(--acao);text-transform:none;letter-spacing:0;font-weight:500;padding:10px 8px;text-decoration:underline;text-underline-offset:3px} .btn-terciario:hover{background:var(--serie-sutil)} .btn-largo{width:100%} .btn-sec{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--alvo);padding:8px 14px;border:1.5px solid var(--acao);border-radius:8px;background:#fff;color:var(--acao);font-size:14px;font-weight:600} .btn-sec:hover{background:var(--serie-sutil)} .btn-sec.btn-final{background:var(--acao);border-color:var(--acao);color:#fff} .btn-sec.btn-final:hover{background:var(--acao-hover)} .btn-sec:disabled{border-color:var(--desab-borda);color:var(--desab-texto);background:var(--desab-fundo);cursor:default} .btn-sec .icone{width:20px;height:20px} .btn-chip{display:inline-flex;align-items:center;gap:6px;min-height:var(--alvo);padding:6px 14px;border:1px solid var(--borda-forte);border-radius:22px;background:#fff;font-size:13px;font-weight:600;color:var(--texto)} .btn-chip:hover{background:var(--fundo-sutil)} .btn-chip[aria-pressed="true"],.btn-chip[aria-expanded="true"]{border:2px solid var(--acao);background:var(--marca-fundo);padding:5px 13px} .btn-chip .icone{width:18px;height:18px} /* ========================================================================== [6] TELA DE ABERTURA (CAPA) .capa-topo = selo e logotipo no alto; .bloco = cartão branco com título, texto e botão Iniciar. .capa-corpo usa espaços flexíveis (::before / ::after) para centralizar o cartão na vertical. ========================================================================== */ /* Abertura */ .capa-topo{position:absolute;top:0;left:0;right:0;z-index:1} .marca{position:relative;max-width:810px;margin:clamp(-34px,-3.4vh,-10px) auto 0;min-height:clamp(190px,27vh,230px)} .selo{color:#fff;display:block;position:absolute;left:0;top:0;z-index:1} .selo svg{height:133px;width:auto;display:block} .colecao{position:absolute;right:-16px;top:clamp(8px,2.4vh,22px)} .colecao svg{height:209px;width:auto;display:block} .tela-capa{position:relative} .capa-corpo{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;position:relative;z-index:1;pointer-events:none} .capa-corpo::before{content:"";flex:1 1 0;min-height:var(--linha-conteudo)} .capa-corpo::after{content:"";flex:1 1 0;min-height:88px} .capa-corpo > *{pointer-events:auto} .bloco{background:var(--superficie);border-radius:var(--r);padding:clamp(18px,3.4vh,28px) 24px;max-width:560px;width:100%;position:relative;z-index:2;flex:0 0 auto} .ident{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;font-weight:500;color:var(--texto-sutil);letter-spacing:.04em;text-transform:uppercase} .dot{width:8px;height:8px;border-radius:999px;background:var(--area);flex:0 0 8px} .bloco h1{margin:8px 0 0;font-size:clamp(24px,5vw,34px);font-weight:700;line-height:1.16} .sub{margin:4px 0 0;font-size:19px;font-weight:500;color:var(--texto-sutil)} .intro{margin:16px 0 20px} /* ========================================================================== [7] PAINEL DE TESTE Ferramenta APENAS do protótipo (trocar série/área e posicionar marcadores). Não faz parte do OED: na versão final, remova o
do index.html e este bloco. ========================================================================== */ /* Painel de teste */ .painel-teste{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:50;width:calc(100% - 32px);max-width:560px;max-height:calc(100vh - 32px);overflow-y:auto;background:var(--superficie);border:1.5px dashed var(--borda);border-radius:var(--r);font-size:13px} .painel-teste summary{cursor:pointer;padding:12px 16px;font-weight:600;color:var(--texto-sutil);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:var(--alvo);position:sticky;top:0;background:var(--superficie);z-index:1} .painel-teste summary::-webkit-details-marker{display:none} .painel-acao::after{content:"Abrir";color:var(--acao)} .painel-teste[open] .painel-acao::after{content:"Fechar ✕"} .painel-veu{position:fixed;inset:0;z-index:49;background:rgba(28,28,26,.55);cursor:pointer} .painel-teste .conteudo{padding:14px 16px;display:grid;gap:12px;border-top:1px solid var(--borda)} .painel-teste label{display:block;font-weight:600;margin-bottom:4px;color:var(--texto-sutil);font-size:12px} .painel-teste select{font-size:14px;padding:10px;border-radius:6px;border:1px solid var(--borda);width:100%;min-height:var(--alvo);background:#fff} .painel-teste .nota-p{color:var(--texto-sutil)} .campos{display:grid;gap:12px} @media (min-width:700px){.campos{grid-template-columns:1fr 1fr}} .miniatura{display:grid;grid-template-columns:120px 1fr;gap:12px;align-items:start} .miniatura img{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;display:block} /* ========================================================================== [8] TELA INTERNA .cabecalho = ícone da área + série/área + título; .card-conteudo = grande cartão branco onde ficam a fotografia (nível 1) e as abas (nível 2). ========================================================================== */ /* Interna */ .topo-interna{min-height:var(--linha-conteudo);display:flex;flex-direction:column} .cabecalho{display:flex;align-items:center;gap:16px;padding:20px 0 36px;margin-top:auto} .icone-area{color:var(--area-suporte);flex:0 0 auto} .icone-area svg{width:56px;height:56px;display:block} .cabecalho .ident{color:var(--texto)} .cabecalho h1{margin:2px 0 0;font-size:clamp(20px,3.2vw,32px);font-weight:600;line-height:1.25} .card-conteudo{background:#fff;border-radius:var(--r);padding:16px;display:grid;gap:16px;margin-bottom:32px;min-width:0} /* Dica de uso da fotografia: quadro lilás com ícone, colado acima da foto. */ .dica-foto{display:flex;align-items:flex-start;gap:10px;background:var(--serie-sutil);border-radius:10px;padding:12px 16px;font-size:14px;line-height:1.5;color:var(--texto)} .dica-foto .icone{width:22px;height:22px;margin-top:1px;color:var(--acao)} .dica-foto strong{font-weight:700} /* ========================================================================== [9] NÍVEL 1 — FOTOGRAFIA COM MARCADORES .foto-moldura = foto da Passeata dos Cem Mil; por cima, um SVG (.foto-svg) com os contornos das pessoas e os números (.marca-p) que levam às abas. .grade-foto = foto à esquerda e lista "Por onde começar" à direita. ========================================================================== */ /* Nível 1: fotografia de abertura com marcadores */ .grade-foto{display:grid;gap:20px;min-width:0} .col-vis,.col-lado{display:grid;gap:12px;align-content:start;min-width:0} .foto-moldura{position:relative;border-radius:8px;background:var(--fundo-sutil);user-select:none;-webkit-user-select:none} .foto-moldura img{display:block;width:100%;height:auto;border-radius:8px} .foto-svg{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:8px;overflow:hidden} .foto-svg .veu-foto{opacity:0;transition:opacity .2s ease;pointer-events:none} .foto-moldura.com-destaque .veu-foto{opacity:.55} .foto-svg .sil{fill:transparent;stroke:none;pointer-events:none} .foto-svg .sil.ativa{pointer-events:all;cursor:pointer} .foto-svg .dest-halo,.foto-svg .dest-linha{fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;pointer-events:none} .foto-svg .dest-halo{stroke:#1c1c1a;stroke-width:6} .foto-svg .dest-linha{stroke:var(--neon);stroke-width:3} .marca-p{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--acao);color:#fff;border:2px solid #fff;font-size:13px;font-weight:700;display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.6);z-index:2;cursor:pointer;transition:transform .15s} .marca-p.realce{transform:scale(1.2);background:var(--acao-press);z-index:4} .marca-p .nome{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);background:#fff;color:var(--texto);border:1px solid var(--borda-forte);border-radius:6px;padding:4px 8px;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.3);display:none} .marca-p.realce .nome{display:block} @media (max-width:639.98px){.marca-p{width:22px;height:22px;margin:-11px 0 0 -11px;font-size:11px;border-width:1.5px}} .foto-ctrl{position:absolute;right:10px;bottom:10px;display:flex;gap:8px;z-index:5} .foto-ctrl button{height:44px;min-width:44px;border-radius:22px;border:1px solid var(--borda);background:rgba(255,255,255,.95);display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;font-size:13px;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.2)} .foto-ctrl button:hover{background:var(--fundo-sutil)} .foto-ctrl button[aria-pressed="true"]{border:2px solid var(--acao);background:var(--marca-fundo)} .foto-ctrl .icone{width:20px;height:20px} .so-toque{display:none} @media (hover:none){.so-ponteiro{display:none}.so-toque{display:inline}} .foto-moldura.ajuste .marca-p{cursor:move;touch-action:none;background:#8a4b00;outline:2px dashed #fff;outline-offset:2px} .foto-moldura.ajuste .marca-p .nome{display:block} .foto-moldura.ajuste .sil{stroke:#fff;stroke-width:1.5;stroke-dasharray:4 3;vector-effect:non-scaling-stroke;pointer-events:all} /* Legenda e crédito de imagens (usados também dentro das janelas de conteúdo). */ .legenda{font-size:15px;line-height:1.5} .credito{font-size:13px;color:var(--texto-sutil);background:var(--fundo-sutil);border-radius:8px;padding:8px 12px;margin-top:6px} /* Lista "Por onde começar": um cartão (.escolha) por aba, com miniatura, nome da aba e artistas. */ .grupo-art{display:grid;gap:4px} .grupo-art h3{font-size:13px;font-weight:600;color:var(--texto-sutil);letter-spacing:.04em;text-transform:uppercase;padding-left:2px} .lista-esc{list-style:none;margin:0;padding:0;display:grid;gap:10px} .escolha{width:100%;display:grid;grid-template-columns:88px 1fr 20px;align-items:start;gap:14px;padding:10px 12px 10px 10px;border:1.5px solid var(--borda);border-radius:10px;background:#fff;text-align:left} .escolha:hover,.escolha.realce{border-color:var(--acao);background:var(--marca-fundo);box-shadow:inset 0 0 0 1px var(--acao)} .esc-lista{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:3px} .esc-lista li{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--texto-sutil);line-height:1.3} .esc-lista .num{width:18px;height:18px;border-radius:50%;background:var(--acao);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;flex:none} .esc-lista li.realce{color:var(--texto);font-weight:700} .escolha img{width:88px;height:66px;object-fit:cover;border-radius:6px;display:block} .esc-tit{display:block;font-size:17px;font-weight:700;line-height:1.25} .esc-art{display:block;font-size:13px;color:var(--texto-sutil);line-height:1.35;margin-top:2px} .esc-cont{display:block;font-size:12px;font-weight:600;color:var(--texto-sutil);margin-top:4px} .escolha > .icone{width:20px;height:20px;color:var(--texto-sutil);align-self:center} .progresso{font-size:14px;color:var(--texto-sutil)} .progresso strong{color:var(--texto);font-weight:600} /* ========================================================================== [10] NÍVEL 2 — ABAS MPB / TEATRO .abas-mid = barra de abas; .aba-ind = cada aba (a selecionada tem aria-selected="true" e sublinhado azul); .painel-mid = painel da aba, com figura + texto (.intro-aba) e a lista de conteúdos (.conteudos). A classe "correndo" é ligada pelo JavaScript durante a animação de troca de aba (corta o que passa da borda). ========================================================================== */ /* Nível 2: abas MPB e Teatro */ .vista-abas{display:grid;gap:18px;min-width:0;position:relative} .vista-abas.correndo{overflow-x:clip} .btn-voltar-foto{justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 12px 8px 6px;border:0;border-radius:8px;background:transparent;color:var(--acao);font-size:14px;font-weight:600} .btn-voltar-foto:hover{background:var(--serie-sutil)} .abas-mid{display:flex;border-bottom:1px solid var(--borda);overflow-x:auto;scrollbar-width:thin} .aba-ind{flex:none;min-height:52px;padding:8px 20px;border:0;border-bottom:3px solid transparent;background:transparent;font-size:16px;font-weight:500;color:var(--texto)} .aba-ind[aria-selected="true"]{border-bottom-color:var(--acao);color:var(--acao);font-weight:700} .aba-ind:hover:not([aria-selected="true"]){background:var(--fundo-sutil)} .painel-mid{display:grid;gap:24px;min-width:0} .painel-mid:focus{outline:none} .intro-aba{display:grid;gap:18px;min-width:0} @media (min-width:1024px){.intro-aba{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}} .texto-aba{font-size:16px;line-height:1.6;max-width:66ch;display:grid;gap:12px} .texto-aba strong{font-weight:700} /* Figura (imagem + legenda + crédito) e botão de ampliar. */ .fig{margin:0;display:grid;gap:8px;min-width:0} .fig-caixa{position:relative;border-radius:8px;overflow:hidden;background:var(--fundo-sutil)} .fig-caixa img{width:100%;height:100%;object-fit:cover;display:block} .fig-zoom{position:absolute;right:10px;bottom:10px;width:44px;height:44px;border-radius:50%;border:1px solid var(--borda);background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.2)} .fig-zoom:hover{background:#fff} .fig-zoom .icone{width:22px;height:22px} .fig figcaption .legenda{font-size:14px} /* ========================================================================== [11] CARDS DE CONTEÚDO A lista "Conteúdos para explorar": um .item-card por item (Pra não dizer..., Apesar de você...). Cada card mostra à esquerda um ÍCONE do tipo (.tipo-ic), uma MINIATURA (.foto) ou um DISCO DE VINIL (.vinil), e à direita o tipo, o título, o subtítulo e a marca "Visto". ========================================================================== */ .conteudos{display:grid;gap:12px} .conteudos-topo{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px} .conteudos-topo h3{font-size:17px;font-weight:600} .itens{list-style:none;margin:0;padding:0;display:grid;gap:12px} @media (min-width:640px){.itens{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}} /* O card em si: 3 colunas (ícone/miniatura | textos | seta). */ .item-card{width:100%;height:100%;display:grid;grid-template-columns:48px 1fr 20px;align-items:center;gap:14px;padding:14px 14px 14px 16px;border:1.5px solid var(--borda);border-radius:10px;background:#fff;text-align:left} .item-card:hover{border-color:var(--acao);background:var(--fundo-sutil)} /* Círculo lilás com o ícone do tipo (áudio, música, imagem, vídeo...). "duplo" = dois tipos num só card. */ .item-card .tipo-ic{width:48px;height:48px;border-radius:50%;background:var(--serie-sutil);color:var(--acao);display:grid;place-items:center} .item-card .tipo-ic .icone{width:24px;height:24px} .item-card .tipo-ic.duplo{border-radius:24px;width:48px} /* Miniatura do conteúdo: foto recortada em quadrado de cantos arredondados */ .item-card.com-mini{grid-template-columns:auto 1fr 20px} /* a imagem aparece inteira, sem corte, mantendo a proporção (cartazes têm texto) */ .item-card .tipo-ic.foto{width:auto;height:auto;border-radius:8px;background:none;display:block;line-height:0;box-shadow:0 0 0 1px rgba(0,0,0,.18)} .item-card .tipo-ic.foto img{display:block;max-width:132px;max-height:92px;width:auto;height:auto;border-radius:8px} /* Disco de vinil: a capa do álbum em recorte circular; gira ao passar o mouse ou receber foco */ .item-card .tipo-ic.disco{background:none;overflow:visible} .vinil{position:relative;display:block;width:48px;height:48px;border-radius:50%;background-color:#1c1c1a;background-size:cover;background-position:58% 22%;box-shadow:0 1px 4px rgba(0,0,0,.35);animation:vinil-gira 2.4s linear infinite;animation-play-state:paused} .vinil::after{content:"";position:absolute;inset:0;border-radius:50%;background: radial-gradient(circle at center,#f1efe8 0 3px,#1c1c1a 3px 5px,transparent 5px), repeating-radial-gradient(circle at center,rgba(0,0,0,var(--sulco,.22)) 0 1px,transparent 1px 3px); box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.6)} .item-card:hover .vinil,.item-card:focus-visible .vinil{animation-play-state:running} @keyframes vinil-gira{to{transform:rotate(360deg)}} /* Disco grande no player de áudio: gira só enquanto toca */ .vinil.grande{width:100%;height:100%;animation-duration:3s} /* O disco é o botão de play/pausa: o ícone aparece parado sobre o disco */ .disco-btn{position:relative;flex:none;width:88px;height:88px;padding:0;border:0;border-radius:50%;background:none} .disco-btn:focus-visible{border-radius:50%} .disco-ic{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.94);color:var(--acao);display:grid;place-items:center;box-shadow:0 1px 6px rgba(0,0,0,.4);opacity:1;transition:opacity .15s} .disco-ic .icone{width:20px;height:20px} .midia.tocando .disco-ic{opacity:0} .midia.tocando .disco-btn:hover .disco-ic,.midia.tocando .disco-btn:focus-visible .disco-ic{opacity:1} .vinil.grande::after{background: radial-gradient(circle at center,#f1efe8 0 5px,#1c1c1a 5px 8px,transparent 8px), repeating-radial-gradient(circle at center,rgba(0,0,0,var(--sulco,.22)) 0 1px,transparent 1px 4px)} /* Enquanto o áudio toca (classe "tocando" posta pelo JS), o disco gira. */ .midia.tocando .vinil{animation-play-state:running} /* Textos do card: tipo (pequeno, em maiúsculas), título, subtítulo e a marca verde "Visto". */ .item-card .tipos{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-sutil)} .item-card .tit{display:block;font-size:16px;font-weight:600;line-height:1.3;margin-top:2px} .item-card .meta{display:block;font-size:13px;color:var(--texto-sutil);margin-top:2px} .item-card .visto{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:12px;font-weight:600;color:#137a5b} .item-card .visto .icone{width:16px;height:16px} .item-card > .icone{width:20px;height:20px;color:var(--texto-sutil)} /* Linha do botão "Concluir" que fica abaixo dos cards. */ .acoes{display:flex;justify-content:center;padding-top:4px} .acoes .btn{min-width:min(100%,282px)} /* ========================================================================== [12] TELA DE ENCERRAMENTO ("Você concluiu") Cartão central com selo, texto e botões. O JavaScript (montarFim) troca o texto conforme o aluno viu tudo ou não. ========================================================================== */ /* Encerramento */ .fim-centro{flex:1;display:flex;align-items:center;justify-content:center;padding-top:24px;padding-bottom:40px} .fim-card{position:relative;background:var(--superficie);border-radius:var(--r);padding:32px 24px;max-width:560px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px} .fim-card h1{font-size:26px;font-weight:700} .selo-ok{width:64px;height:64px;border-radius:999px;background:var(--ok);display:flex;align-items:center;justify-content:center;color:#fff} .selo-ok .icone{width:32px;height:32px} .nota-registro{font-size:14px;color:var(--texto-sutil)} .acoes-fim{display:grid;gap:8px;width:100%;max-width:320px} /* ========================================================================== [13] AJUSTES PARA TELAS GRANDES (>= 1024px) Neste bloco ficam as mudanças de layout do computador: colunas lado a lado, margens maiores, cartões com mais respiro. ========================================================================== */ @media (min-width:1024px){ .env{padding:0 56px} .nav{padding-top:24px} .marca{min-height:250px} .colecao{right:0;top:22px} .cabecalho{padding:16px 0 28px} .icone-area svg{width:76px;height:76px} .card-conteudo{padding:32px;margin-bottom:48px} .painel-teste{width:calc(100% - 112px)} .grade-foto{grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start} .col-lado{position:sticky;top:16px} } /* ========================================================================== [14] MENU LATERAL E JANELAS DE TEXTO .veu = película escura atrás das janelas; .gaveta = menu que desliza da direita; .dialogo = janelas de "Orientações pedagógicas" e "Expediente" (no celular sobem de baixo; no computador ficam no centro). ========================================================================== */ /* Menu e diálogos */ .veu{position:fixed;inset:0;background:rgba(26,26,26,.5);z-index:40} .gaveta{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:420px;background:#fff;z-index:41;overflow-y:auto;padding:calc(12px + env(safe-area-inset-top,0px)) 20px 24px;display:grid;align-content:start;gap:8px} .gaveta-topo{display:flex;justify-content:space-between;align-items:center;gap:12px} .gaveta h2{font-size:20px;font-weight:600} .grupo-menu{font-size:14px;font-weight:600;margin-top:12px} .menu-lista{list-style:none;margin:0;padding:0;display:grid} .item-menu{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:8px;border:0;border-bottom:1px solid var(--grade);background:transparent;text-align:left;font-size:15px} .item-menu:hover{background:var(--fundo-sutil)} .item-menu[aria-current="true"]{font-weight:600;color:var(--acao)} .dialogo{position:fixed;z-index:41;background:#fff;left:0;right:0;bottom:0;max-height:92vh;overflow-y:auto;border-radius:16px 16px 0 0;padding:20px 24px calc(28px + env(safe-area-inset-bottom,0px));display:grid;gap:14px} @media (min-width:768px){.dialogo{left:50%;top:50%;bottom:auto;right:auto;transform:translate(-50%,-50%);width:min(720px,calc(100% - 64px));max-height:86vh;border-radius:var(--r);padding:32px}} .dialogo h2{font-size:24px;font-weight:600} .dialogo h3{font-size:16px;font-weight:600;margin-top:6px} .dialogo p,.dialogo ul{font-size:15px} .dialogo ul{margin:0;padding-left:20px;display:grid;gap:6px} .dialogo dl{margin:0;display:grid;gap:10px;font-size:15px} .dialogo dt{font-size:13px;font-weight:600;color:var(--texto-sutil)} .dialogo dd{margin:0} .vaga{font-style:italic;color:var(--texto-sutil)} /* ========================================================================== [15] JANELA DO CONTEÚDO (ITEM ABERTO) Janela com cabeçalho (.dlg-cab), corpo que rola (.dlg-corpo) e rodapé Anterior / contador / Próximo (.dlg-rodape). No celular ocupa a tela toda; a partir de 768px vira uma janela centralizada. A animação de troca (virarPagina no app.js) usa uma cópia da página que sai: .pagina-saindo. ========================================================================== */ /* Diálogo de conteúdo (item clicável) */ .dlg-item{position:fixed;inset:0;z-index:41;background:#fff;display:flex;flex-direction:column} @media (min-width:768px){.dlg-item{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(780px,calc(100% - 64px));height:auto;max-height:88vh;border-radius:var(--r);box-shadow:0 12px 48px rgba(0,0,0,.32);overflow:hidden}} .dlg-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px 24px;border-bottom:1px solid var(--borda);flex:none} .dlg-ctx{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--texto-sutil);min-width:0} .dlg-ctx .icone{width:20px;height:20px;color:var(--acao)} /* A janela corta tudo que passa da borda e NÃO rola de lado (a segunda linha vale nos navegadores novos). Necessário para a animação de correr. */ .dlg-item{overflow:hidden;overflow:clip} /* cabeçalho e rodapé ficam parados acima do conteúdo que corre: só o texto deles muda */ .dlg-cab,.dlg-rodape{position:relative;z-index:3;background:#fff} .pagina-saindo{position:absolute;z-index:2;pointer-events:none} .dlg-item .pagina-saindo{background:#fff;overflow:hidden!important} .dlg-corpo{flex:1 1 auto;min-height:0;overflow-y:auto;padding:22px 24px 28px;display:grid;gap:16px;align-content:start;overscroll-behavior:contain} .dlg-corpo h2{font-size:clamp(22px,3vw,28px);font-weight:700;line-height:1.2} .dlg-corpo h2:focus{outline:none} .dlg-meta{font-size:15px;color:var(--texto-sutil);margin-top:4px} .dlg-corpo > p{font-size:16px;line-height:1.65;max-width:68ch} .dlg-corpo strong{font-weight:700} .dlg-rodape{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--borda);background:#fff;flex:none} .dlg-cont{font-size:13px;color:var(--texto-sutil);font-variant-numeric:tabular-nums;text-align:center} .lnk-midia{color:var(--acao);font-weight:600;text-decoration:underline;text-underline-offset:3px} .lnk-midia:hover{text-decoration-thickness:2px} /* ========================================================================== [16] PLAYERS DE ÁUDIO E VÍDEO .midia = bloco de uma mídia (a classe "tocando" é ligada pelo JS enquanto toca; "terminou" ao fim). .player = cartão cinza com botão de play, título, barra de tempo e botões extras (.player-extra). O disco de vinil (.disco-btn) é o botão de play/pausa dos áudios com capa. ========================================================================== */ /* Blocos de mídia */ .midia{display:grid;gap:8px;scroll-margin:16px;border-radius:10px} .midia:focus{outline:none} .midia.alvo{box-shadow:0 0 0 3px var(--serie-sutil),0 0 0 5px var(--acao)} /* Cartão cinza do player. */ .player{background:var(--fundo-sutil);border-radius:10px;padding:14px 16px;display:grid;gap:10px} .player-linha{display:flex;align-items:center;gap:14px;min-width:0} /* Botão azul redondo de play/pausa (para áudios sem capa de disco e para vídeo). */ .player-play{flex:none;width:52px;height:52px;border-radius:50%;border:0;background:var(--acao);color:#fff;display:grid;place-items:center} .player-play:hover{background:var(--acao-hover)} .player-play .icone{width:22px;height:22px} .player-info{min-width:0} .player-tipo{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-sutil)} .player-tit{font-weight:600;font-size:15px;line-height:1.3} /* Barra de tempo: "0:00 ----o---- 4:08". O campo é um . */ .player-barra{display:flex;align-items:center;gap:10px;font-size:13px;font-variant-numeric:tabular-nums;color:var(--texto-sutil);min-width:0} /* Barra de progresso: preenche conforme o tempo avança (--p é atualizado pelo JS) */ @property --p{syntax:'';inherits:true;initial-value:0%} .player-barra input{flex:1;min-width:0;height:32px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer} .player-barra input::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--acao) var(--p,0%),#dedcd2 var(--p,0%));box-shadow:inset 0 0 0 1px var(--borda-forte)} .player-barra input::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-5px;border-radius:50%;background:var(--acao);border:2px solid #fff;box-shadow:0 0 0 1px var(--acao)} .player-barra input::-moz-range-track{height:8px;border-radius:4px;background:#dedcd2;box-shadow:inset 0 0 0 1px var(--borda-forte)} .player-barra input::-moz-range-progress{height:8px;border-radius:4px;background:var(--acao)} .player-barra input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--acao);border:2px solid #fff;box-shadow:0 0 0 1px var(--acao)} /* Linha de botões extras (Legendas, Audiodescrição, Transcrição, Tela cheia). */ .player-extra{display:flex;flex-wrap:wrap;gap:8px} /* Caixa de transcrição/letra que abre ao clicar no botão correspondente. */ .transcricao{background:#fff;border:1px solid var(--borda);border-radius:8px;padding:12px 14px;font-size:14px;display:grid;gap:6px} .transcricao h4{margin:0;font-size:13px;font-weight:600;color:var(--texto-sutil);letter-spacing:.04em;text-transform:uppercase} /* Letra sincronizada: linhas já cantadas em azul, a atual em negrito com preenchimento e marca lateral (não depende só da cor: WCAG 1.4.1) */ .letra-sync{position:relative;max-height:300px;overflow-y:auto;display:grid;gap:16px;padding:4px 8px 4px 4px;overscroll-behavior:contain} .estrofe{display:grid;gap:2px;margin:0} .ln{display:block;width:fit-content;max-width:100%;font-size:16px;line-height:1.5;color:var(--texto-sutil);padding:2px 6px 2px 10px;border-left:4px solid transparent;border-radius:2px} .ln.cantada{color:var(--acao)} .ln.atual{font-weight:700;border-left-color:var(--acao);color:transparent;background:linear-gradient(to right,var(--acao) var(--f,0%),var(--texto) var(--f,0%));-webkit-background-clip:text;background-clip:text} .letra-sync.tem-tempos .ln{cursor:pointer} .letra-sync.tem-tempos .ln:hover{background-color:var(--fundo-sutil)} @media (forced-colors:active){.ln.atual{color:Highlight;background:none;-webkit-background-clip:border-box;background-clip:border-box}.ln.cantada{color:LinkText}} /* Modo de sincronização (abrir o objeto com ?sync no endereço): realça a linha que será marcada. */ .ln.sync-prox{outline:2px dashed var(--acao);outline-offset:1px} .ln.sync-prox::before{content:"▶ "} /* Barra preta com os botões "Marcar linha / Desfazer / Copiar tempos" do modo ?sync. Ferramenta de produção. */ .sync-bar{background:var(--texto);color:#fff;border-radius:10px;padding:12px 14px;display:grid;gap:8px;font-size:13px} .sync-bar code{display:block;background:rgba(255,255,255,.1);border-radius:6px;padding:8px 10px;font-size:12px;white-space:pre-wrap;word-break:break-all;font-family:ui-monospace,Menlo,monospace} .sync-bar .linha{display:flex;flex-wrap:wrap;gap:8px} .sync-bar button{min-height:44px;padding:6px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:13px;font-weight:600} .sync-bar button:hover{background:rgba(255,255,255,.14)} /* Texto "Prévia simulada · mídia a licenciar" dos players ainda sem arquivo real. */ /* Transcrição em parágrafos (quando o conteúdo traz o texto completo) */ .transcricao p{line-height:1.6} .transcricao p + p{margin-top:6px} /* Legendas reais (WebVTT) desenhadas pelo navegador sobre o vídeo: fundo escuro e texto branco, com contraste alto */ .video-quadro video::cue{background:rgba(0,0,0,.85);color:#fff;font-family:var(--fonte);font-size:clamp(14px,2.4vw,20px);line-height:1.35} .estado-sim{font-size:12px;color:var(--texto-sutil)} /* VÍDEO: .video-quadro é a caixa 16:9 preta; dentro dela ficam o