/* ============================================================= CENTRAL DE VÍDEOS — folha de estilo Mobile-first. Tema claro e escuro via [data-tema] no . ============================================================= */ /* ------------------------------------------------- 1. Tokens ------------------------------------------------- */ :root { --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; --corpo: 'Instrument Sans', system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --raio-p: 6px; --raio-m: 10px; --raio-g: 16px; --largura: 1180px; --gutter: 20px; --transicao: 170ms cubic-bezier(.2, .7, .3, 1); } html[data-tema='dark'] { --fundo: #0F1317; --fundo-fosco: rgba(15, 19, 23, .84); --superficie: #171C21; --superficie-alta:#1F262C; --borda: #262F37; --borda-forte: #3A4650; --tinta: #EAEFF3; --tinta-suave: #97A3AE; --tinta-fraca: #6B7883; --acento: #22C8AE; --acento-suave: rgba(34, 200, 174, .13); --acento-tinta: #052622; --sombra: 0 20px 50px rgba(0, 0, 0, .6); --realce: rgba(34, 200, 174, .28); --trama: rgba(255, 255, 255, .04); --sobre-cor: #0C1216; /* texto que fica em cima de uma cor de módulo */ /* Cores dos módulos — versões luminosas para o fundo escuro */ --c0: #2BCFB4; --c0-fraco: rgba(43, 207, 180, .15); --c1: #8E90F5; --c1-fraco: rgba(142, 144, 245, .16); --c2: #E3A83A; --c2-fraco: rgba(227, 168, 58, .15); --c3: #F5799B; --c3-fraco: rgba(245, 121, 155, .15); --c4: #58A6F7; --c4-fraco: rgba(88, 166, 247, .15); --c5: #86CC57; --c5-fraco: rgba(134, 204, 87, .15); --c6: #F0884C; --c6-fraco: rgba(240, 136, 76, .15); --c7: #3DBDDE; --c7-fraco: rgba(61, 189, 222, .15); } html[data-tema='light'] { --fundo: #F4F6F8; --fundo-fosco: rgba(244, 246, 248, .88); --superficie: #FFFFFF; --superficie-alta:#EFF2F5; --borda: #E1E6EB; --borda-forte: #C4CDD5; --tinta: #10161B; --tinta-suave: #55636E; --tinta-fraca: #7C8A96; --acento: #0A8F7D; --acento-suave: rgba(10, 143, 125, .11); --acento-tinta: #FFFFFF; --sombra: 0 20px 50px rgba(16, 26, 36, .2); --realce: rgba(10, 143, 125, .19); --trama: rgba(16, 26, 36, .04); --sobre-cor: #FFFFFF; /* texto que fica em cima de uma cor de módulo */ /* Cores dos módulos — versões profundas para o fundo claro */ --c0: #08806F; --c0-fraco: rgba(8, 128, 111, .11); --c1: #5457D6; --c1-fraco: rgba(84, 87, 214, .11); --c2: #97680F; --c2-fraco: rgba(151, 104, 15, .12); --c3: #C43D63; --c3-fraco: rgba(196, 61, 99, .11); --c4: #1F6FD0; --c4-fraco: rgba(31, 111, 208, .11); --c5: #3F7A26; --c5-fraco: rgba(63, 122, 38, .12); --c6: #C05621; --c6-fraco: rgba(192, 86, 33, .11); --c7: #0B7A96; --c7-fraco: rgba(11, 122, 150, .11); } /* Cada elemento marcado com data-cor herda o par cor/cor-fraca. Quem não tiver data-cor cai no acento padrão. */ [data-cor='0'] { --cor: var(--c0); --cor-fraca: var(--c0-fraco); } [data-cor='1'] { --cor: var(--c1); --cor-fraca: var(--c1-fraco); } [data-cor='2'] { --cor: var(--c2); --cor-fraca: var(--c2-fraco); } [data-cor='3'] { --cor: var(--c3); --cor-fraca: var(--c3-fraco); } [data-cor='4'] { --cor: var(--c4); --cor-fraca: var(--c4-fraco); } [data-cor='5'] { --cor: var(--c5); --cor-fraca: var(--c5-fraco); } [data-cor='6'] { --cor: var(--c6); --cor-fraca: var(--c6-fraco); } [data-cor='7'] { --cor: var(--c7); --cor-fraca: var(--c7-fraco); } /* ------------------------------------------------- 2. Base ------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* O atributo hidden precisa vencer qualquer classe que defina display. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--corpo); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } body.travado { overflow: hidden; } h1, h2, h3 { margin: 0; font-family: var(--display); line-height: 1.1; letter-spacing: -.025em; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .mono { font-family: var(--mono); font-variant-ligatures: none; } .conteudo { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); } :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--raio-p); } .pular { position: absolute; left: -9999px; top: 8px; z-index: 90; background: var(--acento); color: var(--acento-tinta); padding: 10px 16px; border-radius: var(--raio-p); font-size: .9rem; font-weight: 600; text-decoration: none; } .pular:focus { left: 12px; } mark { background: var(--realce); color: inherit; padding: 0 .1em; border-radius: 3px; } /* ------------------------------------------------- 3. Topo ------------------------------------------------- */ .topo { position: sticky; top: 0; z-index: 40; background: var(--fundo-fosco); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--borda); } .topo__interno { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; } .marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); } /* três barras crescentes: referência ao nível de reprodução */ .marca__sinal { width: 15px; height: 14px; flex: none; background: linear-gradient(var(--c3), var(--c3)) 0 100% / 3px 46% no-repeat, linear-gradient(var(--c0), var(--c0)) 6px 100% / 3px 100% no-repeat, linear-gradient(var(--c4), var(--c4)) 12px 100% / 3px 70% no-repeat; } .marca__nome { font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: -.03em; } .botao-tema { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding-inline: 12px; background: var(--superficie); color: var(--tinta); border: 1px solid var(--borda); border-radius: 999px; font-family: var(--corpo); font-size: .84rem; font-weight: 500; cursor: pointer; transition: border-color var(--transicao), background var(--transicao); } .botao-tema:hover { border-color: var(--borda-forte); background: var(--superficie-alta); } .botao-tema__icone { width: 16px; height: 16px; flex: none; color: var(--acento); } .botao-tema__texto { display: none; } html[data-tema='dark'] .icone-sol { display: none; } html[data-tema='light'] .icone-lua { display: none; } /* ------------------------------------------------- 4. Abertura ------------------------------------------------- */ .abertura { position: relative; border-bottom: 1px solid var(--borda); background: radial-gradient(90% 120% at 4% -20%, var(--c0-fraco), transparent 60%), radial-gradient(70% 110% at 48% -30%, var(--c4-fraco), transparent 62%), radial-gradient(80% 120% at 96% -10%, var(--c1-fraco), transparent 60%), var(--superficie); } /* fio colorido separando a abertura do acervo */ .abertura::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--c0), var(--c4), var(--c1), var(--c3), var(--c2)); opacity: .55; } .abertura__interno { padding-block: 40px 30px; } .abertura__titulo { font-size: clamp(2.05rem, 8.5vw, 2.7rem); font-weight: 800; letter-spacing: -.04em; } .abertura__texto { margin-top: 12px; max-width: 52ch; color: var(--tinta-suave); font-size: 1rem; } .abertura__resumo { margin-top: 14px; font-size: .72rem; color: var(--tinta-fraca); letter-spacing: .02em; } /* ------------------------------------------------- 5. Busca ------------------------------------------------- */ .busca { position: relative; display: flex; align-items: center; margin-top: 24px; } .busca__lupa { position: absolute; left: 15px; width: 18px; height: 18px; color: var(--tinta-fraca); pointer-events: none; } .busca__campo { width: 100%; height: 50px; padding: 0 46px 0 44px; background: var(--fundo); color: var(--tinta); border: 1px solid var(--borda-forte); border-radius: var(--raio-m); font-family: var(--corpo); font-size: 1rem; transition: border-color var(--transicao), box-shadow var(--transicao); } .busca__campo::placeholder { color: var(--tinta-fraca); } .busca__campo:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); } .busca__campo::-webkit-search-cancel-button { display: none; } .busca__limpar { position: absolute; right: 9px; width: 30px; height: 30px; padding: 8px; background: none; border: 0; border-radius: 50%; color: var(--tinta-suave); cursor: pointer; } .busca__limpar:hover { background: var(--superficie-alta); color: var(--tinta); } .busca__atalho { display: none; position: absolute; right: 13px; padding: 2px 7px; font-size: .72rem; color: var(--tinta-fraca); background: var(--superficie-alta); border: 1px solid var(--borda); border-radius: var(--raio-p); } /* ------------------------------------------------- 6. Painel: índice + acervo ------------------------------------------------- */ .painel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-block: 22px 60px; align-items: start; } /* --- índice de módulos --- */ .indice { position: sticky; top: 56px; z-index: 20; min-width: 0; margin-inline: calc(var(--gutter) * -1); padding: 10px var(--gutter); background: var(--fundo-fosco); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--borda); } .indice__rotulo { display: none; } .indice__lista { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .indice__lista::-webkit-scrollbar { display: none; } .indice__item { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding-inline: 13px; background: var(--superficie); color: var(--tinta-suave); border: 1px solid var(--borda); border-radius: 999px; font-family: var(--corpo); font-size: .86rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: color var(--transicao), border-color var(--transicao), background var(--transicao); } .indice__item:hover { color: var(--tinta); border-color: var(--borda-forte); } .indice__item--ativo { background: var(--cor, var(--acento)); border-color: var(--cor, var(--acento)); color: var(--sobre-cor); } .indice__contagem { font-size: .7rem; padding: 1px 6px; border-radius: 999px; background: var(--superficie-alta); color: var(--tinta-fraca); } .indice__item--ativo .indice__contagem { background: rgba(0, 0, 0, .17); color: inherit; } .indice__nota { display: none; } /* anel de progresso do módulo */ .anel { position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%; background: conic-gradient(var(--cor, var(--acento)) calc(var(--pct, 0) * 1%), var(--borda) 0); display: grid; place-items: center; } .indice__item--ativo .anel { background: conic-gradient(currentColor calc(var(--pct, 0) * 1%), rgba(0, 0, 0, .22) 0); } .anel__miolo { position: absolute; inset: 2px; display: grid; place-items: center; border-radius: 50%; background: var(--superficie); color: var(--cor, var(--tinta-fraca)); font-size: .5rem; font-weight: 700; letter-spacing: .02em; } .indice__item--ativo .anel__miolo { background: var(--cor, var(--acento)); color: inherit; } /* --- acervo --- */ .resultado { margin-bottom: 16px; font-size: .76rem; color: var(--tinta-suave); letter-spacing: .03em; } .modulo { margin-bottom: 34px; } .modulo:last-of-type { margin-bottom: 0; } .modulo__cabecalho { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding-bottom: 10px; } .modulo__codigo { flex: none; font-size: .64rem; font-weight: 700; letter-spacing: .1em; padding: 4px 8px; border-radius: var(--raio-p); color: var(--cor, var(--acento)); background: var(--cor-fraca, var(--acento-suave)); } .modulo__nome { font-size: 1.16rem; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; } .modulo__linha { flex: 1 1 auto; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cor-fraca, var(--borda)) 0 46px, var(--borda) 46px); } .modulo__total { flex: none; font-size: .72rem; color: var(--tinta-fraca); } /* ------------------------------------------------- 7. Linhas de vídeo ------------------------------------------------- */ .lista { border: 1px solid var(--borda); border-radius: var(--raio-g); background: var(--superficie); overflow: hidden; } .linha + .linha { border-top: 1px solid var(--borda); } .linha__botao { position: relative; display: flex; align-items: center; gap: 13px; width: 100%; padding: 12px; text-align: left; text-decoration: none; background: none; border: 0; cursor: pointer; font-family: inherit; color: inherit; transition: background var(--transicao); } .linha__botao::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cor, var(--acento)); scale: 1 0; transition: scale var(--transicao); } .linha__botao:hover { background: var(--cor-fraca, var(--superficie-alta)); } .linha__botao:hover::before { scale: 1 1; } /* --- quadro (miniatura) --- */ .quadro { position: relative; flex: none; width: 108px; aspect-ratio: 16 / 9; border-radius: var(--raio-m); overflow: hidden; background: var(--superficie-alta); border: 1px solid var(--borda); } .quadro__img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--superficie-alta); } .quadro__veu { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, rgba(6, 10, 14, .1), rgba(6, 10, 14, .45)); opacity: 0; transition: opacity var(--transicao); } .quadro__veu svg { width: 26px; height: 26px; fill: #FFF; stroke: none; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); } .linha__botao:hover .quadro__veu { opacity: 1; } .quadro__tempo { position: absolute; right: 5px; bottom: 5px; font-size: .62rem; font-weight: 500; padding: 2px 5px; border-radius: 4px; background: rgba(8, 12, 16, .78); color: #EEF3F7; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .quadro__progresso { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(8, 12, 16, .55); } .quadro__progresso i { display: block; height: 100%; width: var(--pct, 0%); background: var(--cor, var(--acento)); } /* vídeo ainda não enviado para o servidor */ .quadro--sem-arquivo { background-image: repeating-linear-gradient(-45deg, var(--trama) 0 1px, transparent 1px 7px); } .quadro--sem-arquivo .quadro__tempo { display: none; } .quadro--sem-arquivo::after { content: 'sem arquivo'; position: absolute; inset: auto 0 4px; text-align: center; font-family: var(--mono); font-size: .55rem; color: var(--tinta-fraca); } /* --- texto da linha --- */ .linha__texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; } .linha__alto { display: flex; align-items: center; gap: 8px; } .linha__ref { font-size: .6rem; font-weight: 700; letter-spacing: .09em; color: var(--cor, var(--tinta-fraca)); opacity: .85; } .linha__visto { display: inline-flex; align-items: center; gap: 3px; font-size: .6rem; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: var(--acento-suave); color: var(--acento); } .linha__visto svg { width: 10px; height: 10px; stroke-width: 2.8; } .linha__titulo { font-family: var(--display); font-size: .97rem; font-weight: 700; letter-spacing: -.024em; line-height: 1.28; } .linha__descricao { font-size: .83rem; color: var(--tinta-suave); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .linha__seta { display: none; flex: none; width: 18px; height: 18px; color: var(--tinta-fraca); transition: transform var(--transicao), color var(--transicao); } .linha__botao:hover .linha__seta { color: var(--acento); transform: translateX(3px); } /* ------------------------------------------------- 8. Estado vazio ------------------------------------------------- */ .vazio { padding: 48px 20px; text-align: center; border: 1px dashed var(--borda-forte); border-radius: var(--raio-g); } .vazio__titulo { font-family: var(--display); font-size: 1.14rem; font-weight: 700; letter-spacing: -.025em; } .vazio__texto { margin-top: 6px; color: var(--tinta-suave); font-size: .9rem; } .vazio--config { color: var(--tinta-suave); font-size: .94rem; } .vazio--config code { background: var(--superficie-alta); border: 1px solid var(--borda); border-radius: var(--raio-p); padding: 2px 6px; font-size: .86em; color: var(--acento); } .botao-fantasma { margin-top: 16px; height: 38px; padding-inline: 20px; background: none; color: var(--tinta); border: 1px solid var(--borda-forte); border-radius: 999px; font-family: var(--corpo); font-size: .87rem; font-weight: 500; cursor: pointer; transition: background var(--transicao), border-color var(--transicao); } .botao-fantasma:hover { background: var(--superficie); border-color: var(--acento); } /* ------------------------------------------------- 9. Player ------------------------------------------------- */ .player { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; } .player__fundo { position: absolute; inset: 0; background: rgba(6, 9, 12, .74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: aparecer 200ms ease both; } .player__caixa { position: relative; width: 100%; max-height: 94dvh; display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borda); border-top: 3px solid var(--cor, var(--acento)); border-radius: var(--raio-g) var(--raio-g) 0 0; box-shadow: var(--sombra); overflow: hidden; animation: subir 250ms cubic-bezier(.2, .8, .3, 1) both; } .player__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-bottom: 1px solid var(--borda); } .player__identificacao { display: flex; align-items: center; gap: 9px; min-width: 0; } .player__ref { flex: none; font-size: .66rem; font-weight: 700; letter-spacing: .09em; padding: 4px 8px; color: var(--cor, var(--acento)); background: var(--cor-fraca, var(--acento-suave)); border-radius: var(--raio-p); } .player__modulo { font-size: .71rem; color: var(--tinta-fraca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player__acoes { display: flex; align-items: center; gap: 8px; flex: none; } .player__copiar { display: inline-flex; align-items: center; gap: 7px; height: 33px; padding-inline: 12px; background: var(--superficie-alta); color: var(--tinta-suave); border: 1px solid var(--borda); border-radius: 999px; font-family: var(--corpo); font-size: .78rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: color var(--transicao), border-color var(--transicao); } .player__copiar:hover { color: var(--acento); border-color: var(--acento); } .player__copiar svg { width: 14px; height: 14px; flex: none; } .player__fechar { flex: none; width: 33px; height: 33px; padding: 9px; background: var(--superficie-alta); color: var(--tinta-suave); border: 1px solid var(--borda); border-radius: 50%; cursor: pointer; transition: color var(--transicao), border-color var(--transicao); } .player__fechar:hover { color: var(--tinta); border-color: var(--borda-forte); } .player__tela { background: #000; } .player__tela video, .player__tela iframe { width: 100%; max-height: 56dvh; aspect-ratio: 16 / 9; display: block; border: 0; } /* miniatura de embed sem capa própria */ .quadro__img--vazio { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(-45deg, var(--trama) 0 1px, transparent 1px 7px), var(--superficie-alta); } /* marcar como assistido — usado nos vídeos em embed */ .marcar { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; height: 38px; padding-inline: 14px 16px; background: none; color: var(--tinta-suave); border: 1px solid var(--borda-forte); border-radius: 999px; font-family: var(--corpo); font-size: .85rem; font-weight: 500; cursor: pointer; transition: color var(--transicao), border-color var(--transicao), background var(--transicao); } .marcar:hover { color: var(--tinta); border-color: var(--cor, var(--acento)); } .marcar__caixa { width: 18px; height: 18px; flex: none; display: grid; place-items: center; padding: 3px; border: 1.5px solid var(--borda-forte); border-radius: 5px; color: transparent; transition: background var(--transicao), border-color var(--transicao), color var(--transicao); } .marcar__caixa svg { stroke-width: 3; } .marcar--ativo { color: var(--cor, var(--acento)); border-color: var(--cor, var(--acento)); background: var(--cor-fraca, var(--acento-suave)); } .marcar--ativo .marcar__caixa { background: var(--cor, var(--acento)); border-color: var(--cor, var(--acento)); color: var(--sobre-cor); } .player__descricao { padding: 15px 16px 22px; overflow-y: auto; } .player__titulo { font-size: 1.1rem; font-weight: 700; letter-spacing: -.028em; } .player__texto { margin-top: 7px; color: var(--tinta-suave); font-size: .9rem; } .player__texto:empty { display: none; } @keyframes aparecer { from { opacity: 0; } to { opacity: 1; } } @keyframes subir { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* ------------------------------------------------- 10. Rodapé ------------------------------------------------- */ .rodape { border-top: 1px solid var(--borda); padding-block: 20px; background: var(--superficie); } .rodape__interno { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .rodape__marca { font-family: var(--display); font-weight: 700; font-size: .9rem; letter-spacing: -.025em; } .rodape__nota { font-size: .71rem; color: var(--tinta-fraca); } /* ------------------------------------------------- 11. Telas médias ------------------------------------------------- */ @media (min-width: 620px) { .botao-tema__texto { display: inline; } .quadro { width: 148px; } .linha__botao { padding: 14px; gap: 16px; } .linha__titulo { font-size: 1.02rem; } .linha__seta { display: block; } } /* ------------------------------------------------- 12. Desktop: índice vira coluna fixa ------------------------------------------------- */ @media (min-width: 940px) { :root { --gutter: 32px; } .topo__interno { height: 64px; } .abertura__interno { padding-block: 64px 44px; } .abertura__titulo { font-size: clamp(2.8rem, 4.6vw, 3.5rem); } .abertura__texto { font-size: 1.07rem; } .busca { max-width: 560px; } .busca__campo { padding-right: 88px; } .busca__atalho { display: block; right: 44px; } .painel { grid-template-columns: 232px minmax(0, 1fr); gap: 44px; padding-block: 40px 80px; } /* a coluna deixa de ser barra rolável e vira índice de verdade */ .indice { position: sticky; top: 88px; margin-inline: 0; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; } .indice__rotulo { display: block; font-size: .62rem; letter-spacing: .19em; text-transform: uppercase; color: var(--tinta-fraca); padding-inline: 12px; margin-bottom: 10px; } .indice__lista { flex-direction: column; gap: 2px; overflow: visible; } .indice__item { width: 100%; height: auto; min-height: 40px; padding: 8px 12px; justify-content: flex-start; border-radius: var(--raio-m); border-color: transparent; background: none; white-space: normal; text-align: left; } .indice__item:hover { background: var(--superficie); border-color: var(--borda); } .indice__item--ativo, .indice__item--ativo:hover { background: var(--cor-fraca, var(--superficie)); border-color: transparent; color: var(--tinta); font-weight: 600; box-shadow: inset 3px 0 0 var(--cor, var(--acento)); } .indice__nome { flex: 1 1 auto; } .indice__contagem { background: none; } .indice__item--ativo .indice__contagem { background: none; color: var(--cor, var(--acento)); } .indice__item--ativo .anel { background: conic-gradient(var(--cor, var(--acento)) calc(var(--pct, 0) * 1%), var(--borda) 0); } .indice__item--ativo .anel__miolo { background: var(--superficie); color: var(--cor, var(--acento)); } .indice__nota { display: block; margin-top: 14px; padding: 10px 12px 0; border-top: 1px solid var(--borda); font-size: .74rem; color: var(--tinta-fraca); } .indice__nota .mono { color: var(--acento); font-weight: 700; } .modulo { margin-bottom: 44px; } .modulo__nome { font-size: 1.3rem; } .quadro { width: 168px; } .linha__botao { padding: 16px; } .player { align-items: center; padding: 30px; } .player__caixa { max-width: 980px; border-radius: var(--raio-g); } .player__tela video, .player__tela iframe { max-height: 64dvh; } .player__descricao { padding: 18px 22px 24px; } } /* ------------------------------------------------- 13. Preferências do sistema ------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } @media print { .topo, .indice, .player, .botao-tema, .busca, .rodape { display: none; } .painel { grid-template-columns: 1fr; } .linha { break-inside: avoid; } }