/** * CSS especifico do tema do site pessoal. * * O compartilhado esta em shared/css/. Este arquivo existe para o tema ter * onde crescer sem contaminar o outro site. */ /* --------------------------------------------------------------- * * Logomarca * * O lockup da Andrea e monocromatico (traco preto puro sobre transparente) e * horizontal, na proporcao ~5,1:1. Duas consequencias: * * 1. Dimensionar pela ALTURA, nunca pela largura. Num lockup tao deitado, * poucos pixels de largura viram muitos de altura, e o logo estoura ou * afunda em relacao ao menu ao lado. * * 2. A versao branca sai de `filter: invert( 1 )` sobre a preta. Preto puro * invertido da branco puro e o alpha nao e tocado — mesmo resultado do PNG * branco, com um arquivo em vez de dois e sem risco de as duas versoes * divergirem de recorte. A versao branca segue na biblioteca de midia para * uso fora do site (e-mail, redes, impresso). * * 🔴 A inversao vale SO para este site. O logo da escola e colorido (turquesa, * laranja, amarelo) — invertido, viraria um negativo. Por isso estas regras * vivem aqui e nao em shared/css/base.css. * --------------------------------------------------------------- */ .al-header__logo img { height: clamp( 2rem, 2.6vw, 2.5rem ); } /* * Enquanto o cabecalho flutua sobre uma foto, o logo e branco. Ao rolar, * `.is-fixo` traz o fundo claro e ele volta ao preto. * * A condicao e' a classe `al-capa-flutuante`, que o al-core poe no * (inc/body-class.php) — a MESMA que o base.css usa para deixar o cabecalho * transparente. Antes era uma lista de classes repetida aqui e la; enquanto esta * regra dizia so `body.home` e a do base.css ja cobria as paginas, o resultado * era menu branco com logo preto sobre a foto: os links liam, a marca nao. * * O escopo continua sendo obrigatorio: num arquivo ou numa busca o cabecalho * tambem nao tem `.is-fixo` antes da primeira rolagem, e sem escopo o logo sairia * branco sobre cabecalho branco. */ body.al-capa-flutuante .al-header:not( .is-fixo ) .al-header__logo img { filter: invert( 1 ); } /* Rodape em petroleo: logo branco sempre. */ .al-footer__logo { margin-bottom: var( --al-space-40 ); line-height: 0; } .al-footer__logo img { width: 100%; max-width: 230px; height: auto; filter: invert( 1 ); }