/* ========================================================================== Faixa Exclusiva — editoria Elétricos Vale só no arquivo /eletricos/ e nas matérias dessa categoria. Ativada pela classe .fx-skin-eletricos no . ========================================================================== */ .fx-skin-eletricos{ /* Verde da editoria. Como fundo, com texto azul-noite: contraste 6,09 — ok. Como TEXTO sobre branco daria só 2,76, abaixo do mínimo legível; por isso existe a versão escura, que sobre branco dá 5,44. */ --fx-eletrico: #72AC01; --fx-eletrico-escuro: #4D7500; --fx-eletrico-noite: #16250B; --fx-eletrico-suave: #F2F8E6; /* Todo componente do tema usa var(--fx-amarelo) nos destaques. Redefinir aqui re-tinge etiquetas, réguas, marcadores e números de uma vez. */ --fx-amarelo: var(--fx-eletrico); } /* ========================================================================== 1. CORREÇÕES DE LEGIBILIDADE O amarelo original tinha luminância diferente. Onde o verde vira texto sobre fundo claro, trocamos pela versão escura. ========================================================================== */ .fx-skin-eletricos .fx-lermais, .fx-skin-eletricos .fx-sechead .fx-todas, .fx-skin-eletricos .fx-autor__link, .fx-skin-eletricos .fx-vazio__link, .fx-skin-eletricos .fx-editorias a:hover, .fx-skin-eletricos .fx-corpo a{color:var(--fx-eletrico-escuro)} /* Etiqueta de seção sobre fundo claro. */ .fx-skin-eletricos .fx-kicker{color:var(--fx-eletrico-escuro)} /* Sobre fundo escuro o verde puro tem contraste de sobra. */ .fx-skin-eletricos .fx-arqhead--categoria .fx-kicker, .fx-skin-eletricos .fx-raiox .fx-kicker, .fx-skin-eletricos .fx-memoria .fx-kicker, .fx-skin-eletricos .fx-arqhead--categoria .fx-arqhead__rotulo{color:var(--fx-eletrico)} /* ========================================================================== 2. FIO DE ENERGIA Faixa fina que corre no topo da página. É a assinatura da editoria. ========================================================================== */ .fx-skin-eletricos .fx-arqhead--categoria, .fx-skin-eletricos .fx-trilha{position:relative} .fx-skin-eletricos .fx-arqhead--categoria::before, .fx-skin-eletricos .fx-artigo .fx-trilha::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2; background:linear-gradient(90deg, transparent 0%, var(--fx-eletrico) 18%, #A6E533 38%, var(--fx-eletrico) 58%, transparent 100%); background-size:220% 100%; animation:fx-carga 5.5s linear infinite; } @keyframes fx-carga{ from{background-position:-110% 0} to{background-position:110% 0} } /* Quem pediu menos movimento no sistema recebe a faixa parada. */ @media (prefers-reduced-motion:reduce){ .fx-skin-eletricos .fx-arqhead--categoria::before, .fx-skin-eletricos .fx-artigo .fx-trilha::before{animation:none;background-position:0 0} } /* ========================================================================== 3. CABEÇALHO DA CATEGORIA Fundo verde-noite com malha de circuito e um raio d'água. ========================================================================== */ .fx-skin-eletricos .fx-arqhead--categoria{ background: /* raio grande, marca d'água à direita */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2372AC01' fill-opacity='0.13' d='M13 2 4.5 13.5H11l-1 8.5 8.5-11.5H12z'/%3E%3C/svg%3E") right -40px center / auto 200% no-repeat, linear-gradient(135deg, var(--fx-eletrico-noite) 0%, #0B1D3A 58%, #0B1D3A 100%); padding:48px 0 44px; } /* Raio antes do nome da editoria. */ .fx-skin-eletricos .fx-arqhead--categoria .fx-arqhead__titulo{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; } .fx-skin-eletricos .fx-arqhead--categoria .fx-arqhead__titulo::before{ content:"";width:38px;height:38px;flex-shrink:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2372AC01' d='M13 2 4.5 13.5H11l-1 8.5 8.5-11.5H12z'/%3E%3C/svg%3E") center/contain no-repeat; } .fx-skin-eletricos .fx-arqhead--categoria .fx-arqhead__titulo::after{ bottom:-6px;background:var(--fx-eletrico); } /* Contagem em formato de carga. */ .fx-skin-eletricos .fx-arqhead--categoria .fx-arqhead__conta{ background:rgba(114,172,1,.18); border:1px solid rgba(114,172,1,.45); color:#D6F29A; } .fx-skin-eletricos .fx-arqhead__irmas{border-top-color:rgba(114,172,1,.28)} .fx-skin-eletricos .fx-arqhead__irmas a{border-color:rgba(114,172,1,.34)} .fx-skin-eletricos .fx-arqhead__irmas a:hover{ background:var(--fx-eletrico);border-color:var(--fx-eletrico);color:var(--fx-eletrico-noite); } /* ========================================================================== 4. CARTÕES DO ARQUIVO ========================================================================== */ .fx-skin-eletricos .fx-card--destaque{border-bottom-color:var(--fx-eletrico)} .fx-skin-eletricos .fx-card__midia{position:relative} /* Selo de raio no canto da imagem. */ .fx-skin-eletricos .fx-card__midia::after{ content:"";position:absolute;left:10px;bottom:10px;width:26px;height:26px; border-radius:50%;background:var(--fx-eletrico) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2316250B' d='M13 2 4.5 13.5H11l-1 8.5 8.5-11.5H12z'/%3E%3C/svg%3E") center/15px 15px no-repeat; box-shadow:0 2px 8px rgba(22,37,11,.35); } .fx-skin-eletricos .fx-card--destaque .fx-card__midia::after{width:34px;height:34px;background-size:19px 19px} .fx-skin-eletricos .fx-card:hover .fx-card__titulo, .fx-skin-eletricos .fx-lida:hover .fx-lida__titulo, .fx-skin-eletricos .fx-mini:hover .fx-mini__titulo, .fx-skin-eletricos .fx-rel:hover .fx-rel__titulo{color:var(--fx-eletrico-escuro)} /* ========================================================================== 5. MATÉRIA ========================================================================== */ /* Etiqueta da categoria com raio. */ .fx-skin-eletricos .fx-cat{ background:var(--fx-eletrico);color:var(--fx-eletrico-noite); display:inline-flex;align-items:center;gap:7px;padding-left:11px; } .fx-skin-eletricos .fx-cat::before{ content:"";width:13px;height:13px;flex-shrink:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2316250B' d='M13 2 4.5 13.5H11l-1 8.5 8.5-11.5H12z'/%3E%3C/svg%3E") center/contain no-repeat; } .fx-skin-eletricos .fx-cat:hover, .fx-skin-eletricos .fx-cat:focus-visible{background:var(--fx-eletrico-noite);color:#fff} .fx-skin-eletricos .fx-cat:hover::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2372AC01' d='M13 2 4.5 13.5H11l-1 8.5 8.5-11.5H12z'/%3E%3C/svg%3E"); } /* Régua verde nos subtítulos do texto. */ .fx-skin-eletricos .fx-corpo h2::before{background:var(--fx-eletrico)} .fx-skin-eletricos .fx-corpo li::marker{color:var(--fx-eletrico)} .fx-skin-eletricos .fx-corpo blockquote{border-left-color:var(--fx-eletrico)} /* Bloco de números vira painel de carga. */ .fx-skin-eletricos .fx-numeros{background:var(--fx-eletrico)} .fx-skin-eletricos .fx-numeros div{ background:var(--fx-eletrico-suave); border-top:3px solid var(--fx-eletrico); } .fx-skin-eletricos .fx-numeros b{color:var(--fx-eletrico-noite)} .fx-skin-eletricos .fx-numeros span{color:#5A6B44} /* Legenda da foto com fio verde. */ .fx-skin-eletricos .fx-figura figcaption{ border-left:3px solid var(--fx-eletrico);padding-left:12px; } /* Caixa lateral de horários fica na cor da editoria. */ .fx-skin-eletricos .fx-box--servico-lado{ background:var(--fx-eletrico-noite); border:1px solid rgba(114,172,1,.4); } .fx-skin-eletricos .fx-box--servico-lado h2{color:#D6F29A} .fx-skin-eletricos .fx-artigo a.fx-btn-servico, .fx-skin-eletricos .fx-arquivo a.fx-btn-servico{background:var(--fx-eletrico);color:var(--fx-eletrico-noite)} .fx-skin-eletricos .fx-artigo a.fx-btn-servico:hover, .fx-skin-eletricos .fx-arquivo a.fx-btn-servico:hover{background:#fff;color:var(--fx-eletrico-escuro)} /* Faixa "Leia também" com a moldura da editoria. */ .fx-skin-eletricos .fx-leia{border-top-color:var(--fx-eletrico)} .fx-skin-eletricos .fx-leia:hover .fx-leia__seta{background:var(--fx-eletrico)} .fx-skin-eletricos .fx-leia:hover .fx-leia__titulo{color:var(--fx-eletrico-escuro)} /* Tags e caixa do autor. */ .fx-skin-eletricos .fx-tag:hover{background:var(--fx-eletrico-escuro);color:#fff} .fx-skin-eletricos .fx-autor{ background:var(--fx-eletrico-suave); border-left:4px solid var(--fx-eletrico); } /* Compartilhar: o realce segue a editoria. */ .fx-skin-eletricos .fx-compartilha a:hover, .fx-skin-eletricos .fx-compartilha button:hover{background:var(--fx-eletrico);color:var(--fx-eletrico-noite)} .fx-skin-eletricos .fx-compartilha a:focus-visible, .fx-skin-eletricos .fx-compartilha button:focus-visible{outline-color:var(--fx-eletrico)} /* Rodapé da matéria: faixa de energia antes das relacionadas. */ .fx-skin-eletricos .fx-relacionadas{ background:var(--fx-eletrico-suave); border-top:3px solid var(--fx-eletrico); } /* ========================================================================== 6. RESPONSIVO ========================================================================== */ @media (max-width:620px){ .fx-skin-eletricos .fx-arqhead--categoria{ padding:32px 0 30px;background-size:auto 150%, auto; } .fx-skin-eletricos .fx-arqhead--categoria .fx-arqhead__titulo::before{width:28px;height:28px} .fx-skin-eletricos .fx-card__midia::after{width:22px;height:22px;background-size:13px 13px} }