/* Os filtros e o índice do atlas. * * **Por que estas regras existem duas vezes.** O empacotador recusa módulo que * declara asset de outro — e faz bem: um módulo que some não pode levar o * estilo do vizinho junto. As regras de `.a12-filtros` são as mesmas do Santo * do Dia porque o formulário é o mesmo desenho; se um dos dois mudar, o outro * não muda sozinho, e isso é deliberado. * * O que é só daqui é `.a12-letras`: o índice alfabético, que no atlas faz o * papel que o calendário faz no serviço diário. * * A paleta não está aqui. Vem dos tokens `--a12-*` que o `` define pela * classe do núcleo. Cada `var()` traz um valor de reserva, para o componente * não sumir onde não houver paleta. */ .a12-filtros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem 1.5rem; margin: 0 0 1.25rem; align-items: end; } .a12-filtros--texto { grid-template-columns: 1fr; } .a12-filtros__campo { display: flex; flex-direction: column; gap: .3rem; min-width: 0; } .a12-filtros__rotulo { margin: 0; color: var(--a12-secundaria, #4b2d22); font-size: .9rem; font-weight: 400; line-height: 1.3; } .a12-filtros select, .a12-filtros input[type="search"] { width: 100%; min-height: 48px; padding: .6rem 2.4rem .6rem 1rem; border: 1px solid #d5d4d4; border-radius: 10px; background: #fff; color: var(--a12-secundaria, #4b2d22); font: inherit; font-size: 1rem; font-weight: 400; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23616161' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; } .a12-filtros input[type="search"] { background-image: none; padding-right: 1rem; color: var(--a12-secundaria, #4b2d22); font-weight: 400; } .a12-filtros input[type="search"]::placeholder { color: #8a7a70; font-weight: 400; } .a12-filtros select:focus-visible, .a12-filtros input[type="search"]:focus-visible { outline: 2px solid var(--a12-secundaria, #4b2d22); outline-offset: 1px; border-color: var(--a12-secundaria, #4b2d22); } .a12-filtros__acoes { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: .25rem; } .a12-filtros__enviar { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .6rem 1.8rem; border: 1px solid var(--a12-secundaria, #4b2d22); border-radius: 10px; background: var(--a12-secundaria, #4b2d22); color: var(--a12-on-secundaria, #fff); font: inherit; font-weight: 500; cursor: pointer; transition: background-color .15s ease; } .a12-filtros__enviar:hover, .a12-filtros__enviar:focus, .a12-filtros__enviar:active { border-color: var(--a12-principal, #6b4227); background: var(--a12-principal, #6b4227); color: var(--a12-on-secundaria, #fff); } .a12-filtros__enviar:focus-visible { outline: 3px solid var(--a12-secundaria, #4b2d22); outline-offset: 2px; } .a12-filtros__limpar { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .25rem; color: var(--a12-principal, #6b4227); font-size: .95rem; font-weight: 400; text-decoration: none; } .a12-filtros__limpar:hover { color: var(--a12-secundaria, #4b2d22); text-decoration: underline; text-underline-offset: 3px; } .a12-filtros__girando { display: none; } .a12-filtros--ocupado .a12-filtros__lupa { display: none; } .a12-filtros--ocupado .a12-filtros__girando { display: inline-block; animation: a12-girar .8s linear infinite; } @media (prefers-reduced-motion: reduce) { .a12-filtros--ocupado .a12-filtros__girando { animation: none; } } .a12-filtros--ocupado .a12-filtros__enviar { cursor: progress; } .a12-filtros--ocupado .a12-filtros__campo { opacity: .75; transition: opacity .1s ease; } @media (max-width: 760px) { .a12-filtros { grid-template-columns: 1fr; } } .a12-letras { margin: 0 0 1.5rem; } .a12-letras__lista { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; padding: 0; list-style: none; } .a12-letras__letra { display: grid; place-items: center; min-width: 2.25rem; min-height: 2.25rem; padding: 0 .4rem; border-radius: .5rem; font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; color: var(--a12-principal, #6b4227); background: var(--a12-fundo-suave, #f2e7df); transition: background .12s ease, color .12s ease; } .a12-letras__letra:hover { background: var(--a12-intermediaria, #7a5438); color: var(--a12-on-intermediaria, #fff); } .a12-letras__letra--ativa, .a12-letras__letra--ativa:hover { background: var(--a12-secundaria, #4b2d22); color: var(--a12-on-secundaria, #fff); } .a12-letras__letra:focus-visible { outline: 3px solid var(--a12-principal, #6b4227); outline-offset: 2px; } .a12-filtros__titulo { grid-column: 1 / -1; margin: 0 0 .25rem; font-size: 1.25rem; font-weight: 800; color: var(--a12-principal, #6b4227); } /* ------------------------------------------------- colisão de nome de classe * * O WordPress põe o nome do tipo de post como classe no item do loop, então * cada cartão sai com `class="… titulo type-titulo …"`. E o portal tem uma * regra de utilidade escrita para o **título de um cartão**: * * .titulo { height: 84px; -webkit-line-clamp: 3 !important; } * * Três linhas de texto. Aplicada ao cartão inteiro, ela o corta em 84 px com * `overflow: hidden` — a imagem de 272 px transborda e o nome fica pela * metade. Foi o que apareceu na primeira montagem desta página. * * O Santo do Dia não sofre porque a classe dele é `santo`, e ninguém escreveu * `.santo`. É sorte, não desenho: qualquer CPT cujo nome coincida com uma * classe de utilidade do tema cai no mesmo buraco. * * Na ficha individual o estrago é maior: o invólucro * `.elementor-location-single` também carrega a classe, e a **página inteira** * fica com 84 px de altura e o resto cortado — 84 px contra os 2.791 px da * mesma página no Santo do Dia. * * Desfaz-se só onde é nosso: elemento que é invólucro do Elementor **e** carrega * a classe do tipo. Um `.titulo` de verdade — o título de um cartão, que foi * para quem a regra foi escrita — não tem `.elementor` junto, e continua * intacto. */ .elementor.titulo, .elementor.type-titulo, .e-loop-item.titulo, .e-loop-item.type-titulo { height: auto; max-height: none; overflow: visible; -webkit-line-clamp: none !important; display: block; } /* ------------------------------------------------------- a ficha sem recheio * * O acervo dos Títulos é desigual de um jeito que o do Santo do Dia não é: * **221 das 265 fichas não têm reflexão**, 29 não têm oração, 55 não têm lugar * e 157 não têm padroado. No Santo do Dia falta reflexão em uma ficha de 407 — * daí o modelo nunca ter precisado pensar no vazio. * * O Elementor já não imprime um widget cujo conteúdo dinâmico é vazio. O que * sobra é a moldura em volta dele: o olho "PARA SUA CAMINHADA", o título * "Reflexão de …", o traço — uma seção que anuncia um texto que não existe. * * O modelo marca essas seções com `a12-secao-opcional`, e aqui elas somem * quando o widget que era o motivo delas não veio. O olho e o título ficam num * contêiner interno, então `>` os exclui da conta de propósito. */ .a12-secao-opcional:not(:has(> .elementor-widget-text-editor)) { display: none; } /* Mesma história na linha de dados do topo: sem data, sem lugar ou sem * padroado, o item continua ocupando o seu lugar na lista — com o ícone, e com * o traço separador que o antecede. É o `| 📍 Alemanha` que aparecia na ficha * da Desatadora dos Nós: o traço era o padroado vazio. */ .elementor.type-titulo .elementor-icon-list-item:has(> .elementor-icon-list-text:empty) { display: none; } /* O traço separador é `::after` do item, e some junto com ele — menos quando o * item escondido é o último: aí o traço que sobra é o do vizinho anterior, e a * linha termina com uma barra solta. Tira-se o traço de quem não tem, depois de * si, nenhum item com texto. */ .elementor.type-titulo .elementor-icon-list-item:not(:has(~ .elementor-icon-list-item > .elementor-icon-list-text:not(:empty)))::after { content: none; } /* =========================================================== o calendário * * As classes são as do Santo do Dia de propósito — `.a12-cal*` — e as regras * vêm de lá. Não é cópia por pressa: o calendário é o mesmo objeto de tela nos * dois serviços, e o que diverge é o **dado** (lá todo dia tem verbete, aqui 232 * dos 366 não têm festa) e a **navegação** (lá o dia é rota, aqui é recorte). * * Três diferenças estão escritas abaixo, nos comentários de cada uma: * o dia sem festa deixou de usar um cinza da paleta terracota; o painel flutua * por CSS em vez de por ilha React; e as regras da ilha não vieram, porque aqui * não há ilha. * * Se um dia a folha do santo mudar, esta não muda com ela. É o preço de os * módulos não compartilharem assets — e é menor que o de um módulo declarar a * folha do outro, que o empacotador recusa, com razão. */ /* ---------------------------------------------- o gatilho e o painel * * O calendário não ocupa mais a página: fica atrás de um botão com a data em * foco e aparece por cima quando alguém pede. Sem JavaScript o mesmo HTML é um * `

`, que abre no lugar — o conteúdo não some, muda de forma. */ .a12-cal-caixa { position: relative; display: inline-block; max-width: 100%; } /* O gatilho do santo é um `