/* ===================================================================== Peles (skins) do sistema. O tema PADRÃO continua sendo o CSS principal (km.css) — nada aqui o altera. Estas duas peles entram por cima quando a gestão global escolhe, através do atributo `data-pele` no . Uma pele muda superfície, profundidade e movimento; NÃO muda o significado das cores. Verde continua sendo aprovado, vermelho continua sendo problema, e as cores das faixas seguem sendo as faixas — trocar isso quebraria o que a equipe já aprendeu a ler de relance. ===================================================================== */ /* ===================================================================== PELE 1 — DOJÔ NOTURNO Escuro, com camadas de vidro e um brilho contido nas cores das faixas. Pensada para a academia à noite, com a tela projetada no tatame: fundo profundo cansa menos a vista em ambiente de pouca luz, e o contorno luminoso dá hierarquia sem precisar de bordas duras. ===================================================================== */ html[data-pele="dojo"] { --tinta: #EDEDF2; --tinta-suave: #9A9AA6; --superficie: rgba(30, 32, 42, 0.72); --fundo: #0C0D12; --linha: rgba(255, 255, 255, 0.09); color-scheme: dark; } html[data-pele="dojo"] body { background: radial-gradient(1100px 600px at 12% -8%, rgba(30, 144, 255, .20), transparent 60%), radial-gradient(900px 520px at 92% 4%, rgba(255, 127, 0, .16), transparent 62%), radial-gradient(760px 760px at 50% 118%, rgba(46, 139, 87, .16), transparent 60%), #0C0D12; background-attachment: fixed; color: var(--tinta); } /* Vidro: superfície translúcida com desfoque do que está atrás */ html[data-pele="dojo"] .cartao, html[data-pele="dojo"] .quadro, html[data-pele="dojo"] .bloco-form, html[data-pele="dojo"] .cartao-form, html[data-pele="dojo"] table.dados { background: var(--superficie); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25); border: 1px solid var(--linha); border-radius: 16px; box-shadow: 0 18px 44px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); } html[data-pele="dojo"] .cabecalho, html[data-pele="dojo"] .linha-um { background: rgba(12, 13, 18, .74); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--linha); } /* O menu ganha um rastro luminoso no item ativo */ html[data-pele="dojo"] .modulos a { color: #A9A9B6; border-radius: 8px; } html[data-pele="dojo"] .modulos a:hover { background: rgba(255,255,255,.06); } html[data-pele="dojo"] .modulos a.ativo { color: #fff; background: rgba(255, 255, 255, .07); box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 6px 22px -8px currentColor; } html[data-pele="dojo"] input, html[data-pele="dojo"] select, html[data-pele="dojo"] textarea { background: rgba(255, 255, 255, .05); border: 1px solid var(--linha); color: var(--tinta); border-radius: 10px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } html[data-pele="dojo"] input:focus, html[data-pele="dojo"] select:focus, html[data-pele="dojo"] textarea:focus { border-color: rgba(30, 144, 255, .8); box-shadow: 0 0 0 4px rgba(30, 144, 255, .18); background: rgba(255, 255, 255, .08); outline: none; } html[data-pele="dojo"] .botao { border-radius: 10px; background: linear-gradient(180deg, #FFE24D, #FFD700); color: #1C1C1C; border: none; font-weight: 700; box-shadow: 0 8px 22px -10px rgba(255, 215, 0, .9); transition: transform .12s ease, box-shadow .18s ease; } html[data-pele="dojo"] .botao:hover { transform: translateY(-1px); box-shadow: 0 12px 28px -10px rgba(255, 215, 0, 1); } html[data-pele="dojo"] .botao.secundario { background: rgba(255, 255, 255, .07); color: var(--tinta); border: 1px solid var(--linha); box-shadow: none; } html[data-pele="dojo"] .selo { border-radius: 999px; font-weight: 600; } html[data-pele="dojo"] .selo.ativo { box-shadow: 0 0 18px -4px rgba(46,139,87,.8); } html[data-pele="dojo"] .selo.critico { box-shadow: 0 0 18px -4px rgba(192,57,43,.8); } html[data-pele="dojo"] .selo.pendente{ box-shadow: 0 0 18px -4px rgba(212,161,0,.8); } html[data-pele="dojo"] table.dados thead th { background: rgba(255, 255, 255, .05); color: var(--tinta-suave); border-bottom: 1px solid var(--linha); } html[data-pele="dojo"] table.dados tbody tr:hover { background: rgba(255,255,255,.04); } html[data-pele="dojo"] .rodape { background: rgba(12, 13, 18, .72); border-top: 1px solid var(--linha); } html[data-pele="dojo"] .vazio { color: var(--tinta-suave); } /* A pele Dojô é escura nas duas variantes de tema: vale sempre a arte de fundo escuro, mesmo com o tema claro ativo. */ html[data-pele="dojo"] .marca-logo .para-fundo-claro { display: none; } html[data-pele="dojo"] .marca-logo .para-fundo-escuro { display: block; } /* ===================================================================== PELE 2 — AURORA Clara, arejada e fluida: fundo com gradientes suaves em movimento lento, cartões que flutuam, cantos generosos e tipografia com mais respiro. Pensada para a recepção durante o dia, onde a tela fica muito tempo aberta e o cansaço vem do aperto visual, não do brilho. ===================================================================== */ html[data-pele="aurora"] { --tinta: #1B2233; --tinta-suave: #6B7488; --superficie: rgba(255, 255, 255, 0.86); --fundo: #F2F5FB; --linha: rgba(27, 34, 51, 0.08); } html[data-pele="aurora"] body { background: radial-gradient(760px 520px at 8% -6%, rgba(255, 215, 0, .28), transparent 58%), radial-gradient(720px 520px at 96% 2%, rgba(30, 144, 255, .22), transparent 60%), radial-gradient(900px 620px at 46% 108%, rgba(46, 139, 87, .18), transparent 62%), #F2F5FB; background-attachment: fixed; color: var(--tinta); animation: aurora-respira 26s ease-in-out infinite alternate; } @keyframes aurora-respira { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 3% 2%, -3% 1%, 2% -2%, 0 0; } } @media (prefers-reduced-motion: reduce) { html[data-pele="aurora"] body { animation: none; } } html[data-pele="aurora"] .cartao, html[data-pele="aurora"] .quadro, html[data-pele="aurora"] .bloco-form, html[data-pele="aurora"] .cartao-form, html[data-pele="aurora"] table.dados { background: var(--superficie); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .7); border-radius: 20px; box-shadow: 0 12px 34px -18px rgba(27, 34, 51, .35), 0 2px 6px -3px rgba(27, 34, 51, .10); transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease; } html[data-pele="aurora"] .cartao:hover, html[data-pele="aurora"] .quadro:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -20px rgba(27, 34, 51, .40); } html[data-pele="aurora"] .cabecalho, html[data-pele="aurora"] .linha-um { background: rgba(255, 255, 255, .78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--linha); color: var(--tinta); } html[data-pele="aurora"] .cabecalho a, html[data-pele="aurora"] .modulos a { color: #55607A; border-radius: 999px; } html[data-pele="aurora"] .modulos a:hover { background: rgba(27,34,51,.05); } html[data-pele="aurora"] .modulos a.ativo { color: var(--tinta); background: #fff; box-shadow: 0 6px 18px -8px rgba(27,34,51,.35); } html[data-pele="aurora"] .identidade strong { color: var(--tinta); } /* A pele Aurora é clara até na barra, que nas outras peles é escura. */ html[data-pele="aurora"] .marca-logo .para-fundo-claro { display: block; } html[data-pele="aurora"] .marca-logo .para-fundo-escuro { display: none; } html[data-pele="aurora"] .barra .marca-logo .para-fundo-claro { display: block; } html[data-pele="aurora"] .barra .marca-logo .para-fundo-escuro { display: none; } html[data-pele="aurora"] input, html[data-pele="aurora"] select, html[data-pele="aurora"] textarea { background: rgba(255, 255, 255, .9); border: 1px solid var(--linha); border-radius: 14px; padding: 9px 12px; color: var(--tinta); transition: border-color .18s ease, box-shadow .18s ease; } html[data-pele="aurora"] input:focus, html[data-pele="aurora"] select:focus, html[data-pele="aurora"] textarea:focus { border-color: rgba(30, 144, 255, .55); box-shadow: 0 0 0 5px rgba(30, 144, 255, .12); outline: none; } html[data-pele="aurora"] .botao { border-radius: 999px; border: none; font-weight: 700; background: linear-gradient(135deg, #1C1C1C, #2E3446); color: #fff; padding: 9px 20px; box-shadow: 0 10px 24px -12px rgba(27, 34, 51, .8); transition: transform .12s ease, box-shadow .18s ease, filter .18s ease; } html[data-pele="aurora"] .botao:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 16px 30px -14px rgba(27, 34, 51, .85); } html[data-pele="aurora"] .botao.secundario { background: rgba(255,255,255,.9); color: var(--tinta); border: 1px solid var(--linha); box-shadow: none; } html[data-pele="aurora"] .selo { border-radius: 999px; font-weight: 600; padding: 3px 12px; } html[data-pele="aurora"] table.dados { overflow: hidden; } html[data-pele="aurora"] table.dados thead th { background: rgba(27, 34, 51, .045); color: var(--tinta-suave); border-bottom: 1px solid var(--linha); font-weight: 700; } html[data-pele="aurora"] table.dados tbody tr { transition: background .15s ease; } html[data-pele="aurora"] table.dados tbody tr:hover { background: rgba(30,144,255,.05); } html[data-pele="aurora"] .rodape { background: rgba(255, 255, 255, .8); border-top: 1px solid var(--linha); color: var(--tinta-suave); } html[data-pele="aurora"] h1, html[data-pele="aurora"] h2 { letter-spacing: -0.3px; } /* O tema pessoal continua mandando: alto contraste desliga os efeitos das duas peles, porque legibilidade vence estética. */ html[data-tema="contraste"][data-pele] .cartao, html[data-tema="contraste"][data-pele] .quadro, html[data-tema="contraste"][data-pele] .bloco-form, html[data-tema="contraste"][data-pele] table.dados { background: #fff !important; backdrop-filter: none !important; border: 2px solid #000 !important; box-shadow: none !important; border-radius: 4px !important; } html[data-tema="contraste"][data-pele] body { background: #fff !important; animation: none !important; color: #000; } /* ===================================================================== PELES 3, 4 e 5 — as três artes da marca As três usam as MESMAS três imagens, em papéis trocados. Não é economia de arte: é o que faz a diferença entre elas ser de temperatura e de hierarquia, e não de acervo. A mesma foto que é fundo numa é tarja na outra e moldura na terceira. REGRA QUE VALE PARA AS TRÊS, E É INEGOCIÁVEL A régua de faixas (`.regua-faixas`) NÃO é tocada por nenhuma delas. As cores das faixas são a régua da federação: branca, amarela, laranja, verde, azul, marrom, preta, nessa ordem, sempre. Quem olha a barra aprende a ler graduação de relance, e uma pele que "harmonizasse" isso com a paleta da foto destruiria a única informação da tela que não é decoração. O mesmo vale para os selos de estado — verde é aprovado, vermelho é problema, em qualquer pele. LEGIBILIDADE ANTES DE BELEZA Foto atrás de texto é o caminho mais curto para uma tela bonita e ilegível. Por isso toda imagem aqui entra com uma camada de degradê por cima, e o conteúdo fica sobre superfície opaca ou quase — nunca direto sobre a arte. As fotos têm 750 px de largura; num monitor grande elas desfocam, e o desfoque é justamente o que o degradê disfarça. ===================================================================== */ /* ===================================================================== PELE 3 — MADRUGADA Do céu estrelado ao primeiro sol. Escura, fria na base e quente nos acentos. Paleta tirada da arte do céu (#071956 → #2071B4) com o âmbar do pôr do sol (#E89B32) marcando o que exige ação. ===================================================================== */ html[data-pele="madrugada"] { --tinta: #E8ECF7; --tinta-suave: #93A0BE; --superficie: rgba(9, 20, 54, .78); --fundo: #050C22; --linha: rgba(150, 180, 255, .14); --acento: #E89B32; color-scheme: dark; } html[data-pele="madrugada"] body { background: linear-gradient(180deg, rgba(5,12,34,.55) 0%, rgba(5,12,34,.88) 55%, rgba(5,12,34,.97) 100%), url("../img/peles/ceu.e60bbb9bfc13.webp") center top / cover no-repeat, #050C22; background-attachment: fixed, fixed, fixed; color: var(--tinta); } /* A tarja do pôr do sol vira o topo do sistema: é a faixa de luz que separa a noite do dia, e serve bem como separador de cabeçalho. */ html[data-pele="madrugada"] .barra, html[data-pele="madrugada"] .cabecalho, html[data-pele="madrugada"] .linha-um { background: linear-gradient(180deg, rgba(5,12,34,.80), rgba(5,12,34,.93)), url("../img/peles/sol-tarja.2ddc1c4f54af.webp") center 40% / cover no-repeat; border-bottom: 1px solid var(--linha); } html[data-pele="madrugada"] .cartao, html[data-pele="madrugada"] .quadro, html[data-pele="madrugada"] .bloco-form, html[data-pele="madrugada"] .cartao-form, html[data-pele="madrugada"] table.dados { background: var(--superficie); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); border: 1px solid var(--linha); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.48); } /* A montanha aparece onde há espaço grande e pouca informação: a caixa de entrada e os estados vazios. É a arte com pessoas treinando — o lugar certo para ela é onde a tela ainda não tem dado nenhum para mostrar. */ html[data-pele="madrugada"] .portico .caixa, html[data-pele="madrugada"] .portal-cabecalho { background: linear-gradient(180deg, rgba(9,20,54,.90), rgba(5,12,34,.96)), url("../img/peles/montanha.9847dd47d743.webp") center 55% / cover no-repeat; border: 1px solid var(--linha); } html[data-pele="madrugada"] input, html[data-pele="madrugada"] select, html[data-pele="madrugada"] textarea { background: rgba(3,8,22,.72); border: 1px solid var(--linha); color: var(--tinta); border-radius: 10px; } html[data-pele="madrugada"] input:focus, html[data-pele="madrugada"] select:focus, html[data-pele="madrugada"] textarea:focus { border-color: rgba(232,155,50,.55); box-shadow: 0 0 0 3px rgba(232,155,50,.18); } html[data-pele="madrugada"] .botao { background: linear-gradient(180deg, #E89B32, #C87A1E); color: #1A1004; border: none; border-radius: 10px; font-weight: 600; } html[data-pele="madrugada"] .botao:hover { filter: brightness(1.08); } html[data-pele="madrugada"] .botao.secundario { background: rgba(255,255,255,.08); color: var(--tinta); border: 1px solid var(--linha); } html[data-pele="madrugada"] .vazio { color: var(--tinta-suave); } /* ===================================================================== PELE 4 — TRAVESSIA Clara e terrosa, tirada da arte da montanha ao amanhecer (#FDEDA1, #F3D186, #331804). É a pele para tela em sala iluminada e para quem passa o dia no sistema: fundo de papel, contraste alto no texto. ===================================================================== */ html[data-pele="travessia"] { --tinta: #2A1F10; --tinta-suave: #7A6647; --superficie: rgba(255, 253, 246, .93); --fundo: #F6EFDF; --linha: rgba(122, 102, 71, .20); --acento: #8A4B18; color-scheme: light; } html[data-pele="travessia"] body { background: linear-gradient(180deg, rgba(246,239,223,.72) 0%, rgba(246,239,223,.94) 45%, #F6EFDF 100%), url("../img/peles/montanha.9847dd47d743.webp") center top / cover no-repeat, #F6EFDF; background-attachment: fixed, fixed, fixed; color: var(--tinta); } /* Aqui o céu noturno vira a tarja do topo: numa pele clara, a barra escura é o que separa o sistema do conteúdo sem precisar de borda grossa. */ html[data-pele="travessia"] .barra, html[data-pele="travessia"] .cabecalho, html[data-pele="travessia"] .linha-um { background: linear-gradient(180deg, rgba(7,25,86,.86), rgba(5,18,64,.94)), url("../img/peles/ceu-tarja.a6ac8ecd1a19.webp") center 45% / cover no-repeat; border-bottom: none; color: #EDF1FB; } html[data-pele="travessia"] .cabecalho a, html[data-pele="travessia"] .identidade strong, html[data-pele="travessia"] .barra .vazio { color: #EDF1FB; } html[data-pele="travessia"] .cartao, html[data-pele="travessia"] .quadro, html[data-pele="travessia"] .bloco-form, html[data-pele="travessia"] .cartao-form, html[data-pele="travessia"] table.dados { background: var(--superficie); border: 1px solid var(--linha); border-radius: 12px; box-shadow: 0 2px 10px rgba(122,102,71,.10); } /* O pôr do sol entra como moldura da entrada e dos estados vazios. */ html[data-pele="travessia"] .portico .caixa, html[data-pele="travessia"] .portal-cabecalho { background: linear-gradient(180deg, rgba(255,253,246,.93), rgba(255,251,240,.97)), url("../img/peles/sol.6a60314e3d23.webp") center 60% / cover no-repeat; border: 1px solid rgba(138,75,24,.24); } html[data-pele="travessia"] input, html[data-pele="travessia"] select, html[data-pele="travessia"] textarea { background: #FFFDF7; border: 1px solid var(--linha); color: var(--tinta); border-radius: 8px; } html[data-pele="travessia"] input:focus, html[data-pele="travessia"] select:focus, html[data-pele="travessia"] textarea:focus { border-color: rgba(138,75,24,.55); box-shadow: 0 0 0 3px rgba(138,75,24,.14); } html[data-pele="travessia"] .botao { background: linear-gradient(180deg, #8A4B18, #6E3A11); color: #FFF6E6; border: none; border-radius: 8px; font-weight: 600; } html[data-pele="travessia"] .botao:hover { filter: brightness(1.10); } html[data-pele="travessia"] .botao.secundario { background: #FFFDF7; color: var(--tinta); border: 1px solid var(--linha); } /* ===================================================================== PELE 5 — HORIZONTE O pôr do sol sobre a água. Quente e de contraste alto, com bronze nas superfícies e brasa nos acentos (#E46728, #FAD74A). Pensada para telão e para recepção: lê bem de longe. ===================================================================== */ html[data-pele="horizonte"] { --tinta: #FFF1E0; --tinta-suave: #C9A183; --superficie: rgba(38, 18, 10, .82); --fundo: #1A0B05; --linha: rgba(250, 215, 74, .18); --acento: #FAD74A; color-scheme: dark; } html[data-pele="horizonte"] body { background: linear-gradient(180deg, rgba(26,11,5,.42) 0%, rgba(26,11,5,.86) 52%, rgba(26,11,5,.97) 100%), url("../img/peles/sol.6a60314e3d23.webp") center 30% / cover no-repeat, #1A0B05; background-attachment: fixed, fixed, fixed; color: var(--tinta); } /* A montanha no topo: as pessoas treinando ficam na barra, que é o que se vê o tempo todo. */ html[data-pele="horizonte"] .barra, html[data-pele="horizonte"] .cabecalho, html[data-pele="horizonte"] .linha-um { background: linear-gradient(180deg, rgba(26,11,5,.72), rgba(26,11,5,.92)), url("../img/peles/montanha-tarja.2c2ebe2e5869.webp") center 50% / cover no-repeat; border-bottom: 1px solid var(--linha); } html[data-pele="horizonte"] .cartao, html[data-pele="horizonte"] .quadro, html[data-pele="horizonte"] .bloco-form, html[data-pele="horizonte"] .cartao-form, html[data-pele="horizonte"] table.dados { background: var(--superficie); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); border: 1px solid var(--linha); border-radius: 14px; box-shadow: 0 16px 38px rgba(0,0,0,.52); } /* E o céu estrelado fecha o ciclo na entrada: a noite antes do treino. */ html[data-pele="horizonte"] .portico .caixa, html[data-pele="horizonte"] .portal-cabecalho { background: linear-gradient(180deg, rgba(38,18,10,.88), rgba(26,11,5,.96)), url("../img/peles/ceu.e60bbb9bfc13.webp") center 40% / cover no-repeat; border: 1px solid var(--linha); } html[data-pele="horizonte"] input, html[data-pele="horizonte"] select, html[data-pele="horizonte"] textarea { background: rgba(16,7,3,.78); border: 1px solid var(--linha); color: var(--tinta); border-radius: 10px; } html[data-pele="horizonte"] input:focus, html[data-pele="horizonte"] select:focus, html[data-pele="horizonte"] textarea:focus { border-color: rgba(250,215,74,.60); box-shadow: 0 0 0 3px rgba(250,215,74,.18); } html[data-pele="horizonte"] .botao { background: linear-gradient(180deg, #E46728, #B94A18); color: #FFF6E6; border: none; border-radius: 10px; font-weight: 600; } html[data-pele="horizonte"] .botao:hover { filter: brightness(1.10); } html[data-pele="horizonte"] .botao.secundario { background: rgba(255,255,255,.08); color: var(--tinta); border: 1px solid var(--linha); } html[data-pele="horizonte"] .vazio { color: var(--tinta-suave); } /* --------------------------------------------------------------------- As três peles usam o logotipo de fundo escuro, inclusive TRAVESSIA: nela a barra é escura mesmo com o corpo claro. Sem esta regra a arte preta cairia sobre o azul-noite da tarja e sumiria. --------------------------------------------------------------------- */ html[data-pele="madrugada"] .marca-logo .para-fundo-claro, html[data-pele="horizonte"] .marca-logo .para-fundo-claro, html[data-pele="travessia"] .barra .marca-logo .para-fundo-claro { display: none; } html[data-pele="madrugada"] .marca-logo .para-fundo-escuro, html[data-pele="horizonte"] .marca-logo .para-fundo-escuro, html[data-pele="travessia"] .barra .marca-logo .para-fundo-escuro { display: block; } /* Quem pediu menos movimento não recebe fundo fixo: `background-attachment: fixed` provoca enjoo em quem tem sensibilidade vestibular, e o efeito de paralaxe não vale esse preço. */ @media (prefers-reduced-motion: reduce) { html[data-pele="madrugada"] body, html[data-pele="travessia"] body, html[data-pele="horizonte"] body { background-attachment: scroll; } } /* ===================================================================== NAVEGAÇÃO DAS TRÊS PELES NOVAS ATENÇÃO A QUEM FOR MEXER AQUI: a barra de módulos é `.navegacao`, e não `.modulos`. As peles Dojô e Aurora estilizam `.modulos a` — seletor que NÃO existe neste template. É código morto: as duas peles nunca chegaram a pintar a navegação, que segue com o preto do km.css nas duas. Está registrado no CHANGELOG para a gestão decidir se quer que mudem. O QUE ESTAS REGRAS FAZEM E O QUE NÃO FAZEM Fazem: fundo e cor de texto da barra, e o realce do item ativo. NÃO fazem: encostar em `a.faixa-*.ativo`. O sublinhado colorido de cada módulo É a régua de graduação — branca em Início e Alunos, amarela em Captação, verde em Inscrições e Graduação, azul em Aulas e Painéis, marrom em Importar e Uniformes. Quem trabalha no sistema aprende a achar o módulo pela cor antes de ler o nome. Harmonizar isso com a paleta da foto trocaria a única informação da barra por decoração. ===================================================================== */ html[data-pele="madrugada"] .navegacao { background: rgba(5, 12, 34, .88); border-bottom: 1px solid rgba(150, 180, 255, .14); } html[data-pele="madrugada"] .navegacao a { color: #A9B6D6; } html[data-pele="madrugada"] .navegacao a:hover { color: #FFFFFF; background: rgba(255,255,255,.07); } html[data-pele="madrugada"] .navegacao a.ativo { color: #FFFFFF; background: rgba(232,155,50,.14); } html[data-pele="madrugada"] .navegacao .global { color: #FFD9A0; } html[data-pele="travessia"] .navegacao { background: rgba(5, 18, 64, .94); border-bottom: 1px solid rgba(255, 255, 255, .10); } html[data-pele="travessia"] .navegacao a { color: #C9D6F2; } html[data-pele="travessia"] .navegacao a:hover { color: #FFFFFF; background: rgba(255,255,255,.10); } html[data-pele="travessia"] .navegacao a.ativo { color: #FFFFFF; background: rgba(255,255,255,.14); } html[data-pele="travessia"] .navegacao .global { color: #FFE9A3; } html[data-pele="horizonte"] .navegacao { background: rgba(26, 11, 5, .90); border-bottom: 1px solid rgba(250, 215, 74, .18); } html[data-pele="horizonte"] .navegacao a { color: #E0BFA2; } html[data-pele="horizonte"] .navegacao a:hover { color: #FFF6E6; background: rgba(250,215,74,.10); } html[data-pele="horizonte"] .navegacao a.ativo { color: #FFF6E6; background: rgba(250,215,74,.16); } html[data-pele="horizonte"] .navegacao .global { color: #FAD74A; }