/* Deus Conosco — a liturgia do dia. * * A paleta vem do núcleo, não daqui: o `` carrega a classe da paleta * (`a12-paleta-terracota` no Reze no Santuário) e ela define os pares de token. * Cada `var()` traz uma reserva, para o componente continuar de pé numa página * sem paleta. * * O desenho tem uma regra acima das outras: **isto é para ler**. A liturgia não * é um painel de dados; é o folheto. Daí a medida de linha curta, o corpo em * 1.125rem e o espaço entre as peças — o site antigo serve o texto em linhas de * 1.028 px, quase o dobro do confortável (auditoria, §4). */ .a12-lit { --lit-medida: 62ch; --lit-borda: color-mix(in srgb, var(--a12-principal, #7a1c22) 18%, transparent); margin: 0 auto; max-width: 100%; } /* ------------------------------------------------------------- o cabeçalho */ .a12-lit__cabeca { margin-bottom: 1.75rem; } .a12-lit__data, .a12-lit__ordem { margin: 0 0 .35rem; color: var(--a12-secundaria, #4b2d22); font-size: .9375rem; font-weight: 600; letter-spacing: .02em; text-transform: lowercase; } .a12-lit__ordem .a12-lit__sep { margin: 0 .35em; opacity: .7; } .a12-lit__titulo { margin: 0 0 .75rem; color: var(--a12-principal, #7a1c22); font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.15; } .a12-lit__ficha { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: 0; font-size: .9375rem; } .a12-lit__ficha > span { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .7rem; border-radius: 999px; background: var(--a12-fundo-suave, #f6efe9); color: var(--a12-on-fundo-suave, #3b2119); } .a12-lit__ficha abbr { text-decoration: none; border: 0; } /* A cor litúrgica é vocabulário fechado de cinco valores, e o ponto é desenhado * aqui porque no banco de origem o branco está cadastrado como #666666 — cinza * médio, que pinta a etiqueta de 1.432 dias do acervo (auditoria, §5.7). */ .a12-lit__ponto { width: .7rem; height: .7rem; border-radius: 50%; background: currentColor; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); } .a12-lit__cor--branco .a12-lit__ponto { background: #fff; } .a12-lit__cor--verde .a12-lit__ponto { background: #236226; } .a12-lit__cor--vermelho .a12-lit__ponto { background: #ba0208; } .a12-lit__cor--roxo .a12-lit__ponto { background: #4b2191; } .a12-lit__cor--rosa .a12-lit__ponto { background: #d08cae; } .a12-lit__cor--dourado .a12-lit__ponto { background: #c9a227; } .a12-lit__cor--azul .a12-lit__ponto { background: #1e3b88; } /* ---------------------------------------------------------------- o índice */ .a12-lit__indice { margin: 0 0 2rem; padding: .35rem 0; border-top: 1px solid var(--lit-borda); border-bottom: 1px solid var(--lit-borda); } .a12-lit__indice ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; list-style: none; } .a12-lit__indice li { margin: 0; } /* o tema põe margem em li */ .a12-lit__indice li::marker { content: ''; } .a12-lit__salto { display: inline-block; padding: .45rem 0; color: var(--a12-secundaria, #4b2d22); font-size: .9375rem; font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; } .a12-lit__salto:hover, .a12-lit__salto:focus-visible { border-bottom-color: var(--a12-principal, #7a1c22); color: var(--a12-principal, #7a1c22); } /* ----------------------------------------------------------------- as peças */ .a12-lit__peca { margin: 0 0 2.5rem; scroll-margin-top: 6rem; /* o cabeçalho fixo do portal come a âncora */ } .a12-lit__peca-titulo { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .85rem; margin: 0 0 .85rem; color: var(--a12-principal, #7a1c22); font-size: 1.375rem; line-height: 1.25; } .a12-lit__ref { color: var(--a12-on-fundo-suave, #5a4038); font-size: .9375rem; font-weight: 500; opacity: .85; } .a12-lit__texto { max-width: var(--lit-medida); font-size: 1.125rem; line-height: 1.7; /* Resistência a contexto, não preferência: o container do Elementor que * segurava a busca do Santo do Dia tinha tipografia com peso 900, e ela * desceu por herança até o texto da leitura — a liturgia inteira saiu em * negrito. Texto para ler tem peso de texto para ler, dito aqui. */ font-weight: 400; } .a12-lit__texto strong, .a12-lit__texto b { font-weight: 700; } .a12-lit__texto p { margin: 0 0 1.05em; } .a12-lit__texto p:last-child { margin-bottom: 0; } /* O número do versículo vem do legado como em negrito no meio da frase. * Sem tratamento, ele é lido em voz alta junto com a palavra seguinte — "Irmãos, * um b o conhecimento incha" (auditoria, §4). Aqui ele recua e desbota: continua * disponível para quem acompanha a referência, e sai do caminho de quem lê. */ .a12-lit__texto span[style*="bold"] { margin-right: .15em; color: var(--a12-principal, #7a1c22); font-size: .75em; font-weight: 700; vertical-align: .35em; opacity: .65; } /* A oração e a meditação são de outra natureza: não são leitura proclamada, são * o que se reza e o que se medita. Ganham o fundo suave para se distinguirem à * primeira vista, como o folheto faz com o fio. */ .a12-lit__peca--oracao .a12-lit__texto, .a12-lit__peca--meditacao .a12-lit__texto { max-width: none; padding: 1.5rem 1.75rem; border-radius: 14px; background: var(--a12-fundo-suave, #f6efe9); color: var(--a12-on-fundo-suave, #3b2119); } .a12-lit__peca--oracao .a12-lit__texto > p, .a12-lit__peca--meditacao .a12-lit__texto > p { max-width: var(--lit-medida); } .a12-lit__celebracao + .a12-lit__celebracao { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--lit-borda); } /* -------------------------------------------------------- dia anterior/próximo */ .a12-lit__nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--lit-borda); } .a12-lit__nav-link { display: inline-flex; flex-direction: column; gap: .15rem; max-width: 48%; text-decoration: none; color: var(--a12-secundaria, #4b2d22); } .a12-lit__nav-link--proximo { text-align: right; } .a12-lit__nav-rotulo { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .75; } .a12-lit__nav-data { font-size: 1.0625rem; font-weight: 600; border-bottom: 2px solid transparent; } .a12-lit__nav-link:hover .a12-lit__nav-data, .a12-lit__nav-link:focus-visible .a12-lit__nav-data { border-bottom-color: currentColor; } /* ------------------------------------------------------------- o dia vazio */ .a12-lit--vazio { padding: 2.5rem 2rem; border-radius: 16px; background: var(--a12-fundo-suave, #f6efe9); text-align: center; } .a12-lit__aviso { margin: 0 0 1.25rem; font-size: 1.125rem; color: var(--a12-on-fundo-suave, #3b2119); } .a12-lit__botao { display: inline-block; padding: .7rem 1.4rem; border-radius: 999px; background: var(--a12-secundaria, #4b2d22); color: var(--a12-on-secundaria, #fff); font-weight: 600; text-decoration: none; } .a12-lit__botao:hover, .a12-lit__botao:focus-visible { background: var(--a12-principal, #7a1c22); color: var(--a12-on-principal, #fff); } /* ------------------------------------------------------------- o calendário */ .a12-cal--liturgia { max-width: 22rem; padding: 1rem 1.1rem 1.25rem; border-radius: 16px; background: var(--a12-fundo-suave, #f6efe9); color: var(--a12-on-fundo-suave, #3b2119); } .a12-cal--liturgia .a12-cal__cabeca { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; } .a12-cal--liturgia .a12-cal__mes { margin: 0; color: var(--a12-principal, #7a1c22); font-size: 1.0625rem; font-weight: 700; } .a12-cal--liturgia .a12-cal__ano { margin-left: .4em; font-weight: 500; opacity: .7; } .a12-cal--liturgia .a12-cal__seta { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--a12-secundaria, #4b2d22); text-decoration: none; } .a12-cal--liturgia .a12-cal__seta::before { content: ''; width: .55rem; height: .55rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; } .a12-cal--liturgia .a12-cal__seta--anterior::before { transform: rotate(-135deg); margin-left: .2rem; } .a12-cal--liturgia .a12-cal__seta--proximo::before { transform: rotate(45deg); margin-right: .2rem; } .a12-cal--liturgia .a12-cal__seta--vazia::before { opacity: .25; } .a12-cal--liturgia .a12-cal__seta:hover, .a12-cal--liturgia .a12-cal__seta:focus-visible { background: color-mix(in srgb, var(--a12-principal, #7a1c22) 12%, transparent); } .a12-cal--liturgia .a12-cal__semana, .a12-cal--liturgia .a12-cal__grade { display: grid; grid-template-columns: repeat(7, 1fr); gap: .15rem; } .a12-cal--liturgia .a12-cal__dia-semana { padding: .35rem 0; text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .05em; opacity: .6; } .a12-cal--liturgia .a12-cal__dia-semana abbr { text-decoration: none; border: 0; } .a12-cal--liturgia .a12-cal__dia { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 50%; color: var(--a12-secundaria, #4b2d22); font-size: .9375rem; font-weight: 600; text-decoration: none; } a.a12-cal__dia:hover, a.a12-cal__dia:focus-visible { background: color-mix(in srgb, var(--a12-principal, #7a1c22) 14%, transparent); color: var(--a12-principal, #7a1c22); } .a12-cal--liturgia .a12-cal__dia--vazio { color: var(--a12-on-fundo-suave, #3b2119); font-weight: 400; opacity: .35; cursor: default; } .a12-cal--liturgia .a12-cal__dia--hoje { box-shadow: inset 0 0 0 2px var(--a12-principal, #7a1c22); } .a12-cal--liturgia .a12-cal__dia--ativo { background: var(--a12-secundaria, #4b2d22); color: var(--a12-on-secundaria, #fff); } .a12-cal--liturgia .a12-cal__vazio { aspect-ratio: 1; } /* ------------------------------------------------------------------ mobile */ @media (max-width: 782px) { .a12-lit__peca--oracao .a12-lit__texto, .a12-lit__peca--meditacao .a12-lit__texto { padding: 1.25rem; } .a12-lit__nav { flex-direction: column; gap: 1.25rem; } .a12-lit__nav-link, .a12-lit__nav-link--proximo { max-width: none; text-align: left; } .a12-cal--liturgia { max-width: none; } } /* ------------------------------------------- o calendário atrás do gatilho * * As classes são as mesmas do Santo do Dia de propósito: é o mesmo componente * nas duas páginas do hub, e quem aprende a usar numa acha na outra. As regras * são repetidas aqui — e não herdadas — porque o CSS do santo pode não estar * na página, e um componente que depende do vizinho para não quebrar é um * componente que vai quebrar. */ .a12-cal-caixa--liturgia { position: relative; display: inline-block; max-width: 100%; } .a12-cal-caixa--liturgia > .a12-cal-gatilho { display: inline-flex; align-items: center; gap: .85rem; padding: .6rem .9rem; border-radius: 12px; color: var(--a12-secundaria, #4b2d22); cursor: pointer; list-style: none; } .a12-cal-caixa--liturgia > .a12-cal-gatilho::-webkit-details-marker { display: none; } .a12-cal-caixa--liturgia .a12-cal-gatilho__icone { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: var(--a12-secundaria, #4b2d22); color: var(--a12-on-secundaria, #fff); } .a12-cal-caixa--liturgia .a12-cal-gatilho__texto { display: flex; flex-direction: column; line-height: 1.25; text-align: left; } .a12-cal-caixa--liturgia .a12-cal-gatilho__rotulo { font-size: .875rem; opacity: .8; } .a12-cal-caixa--liturgia .a12-cal-gatilho__data { font-size: 1.125rem; font-weight: 700; } /* O painel sobe por cima da página, e não empurra o conteúdo: no cabeçalho ele * divide a linha com o título do serviço, e empurrar jogaria a liturgia para * baixo da dobra toda vez que alguém abrisse o calendário. */ .a12-cal-caixa--liturgia .a12-cal-painel { position: absolute; z-index: 20; top: calc(100% + .5rem); right: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .18); border-radius: 16px; } .a12-cal-caixa--liturgia .a12-cal--liturgia { min-width: 20rem; background: #fff; color: var(--a12-on-fundo-suave, #3b2119); } @media (max-width: 782px) { .a12-cal-caixa--liturgia { display: block; } .a12-cal-caixa--liturgia .a12-cal-painel { position: static; box-shadow: none; } .a12-cal-caixa--liturgia .a12-cal--liturgia { min-width: 0; } } /* Escrito, e ainda não aberto. A redação trabalha com semanas de antecedência: * tratar esses dias como ausentes seria negar na tela o que já existe. */ .a12-cal--liturgia .a12-cal__dia--agendado { color: var(--a12-secundaria, #4b2d22); font-weight: 600; opacity: .55; cursor: default; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a12-secundaria, #4b2d22) 30%, transparent); } /* O número do versículo, na mesma gramática da Bíblia do projeto (`.v__n`): * menor, sobrescrito, com respiro à direita e fora da seleção — quem copia um * trecho leva o texto, não a numeração. */ .a12-lit__vers { margin-right: .32em; color: var(--a12-principal, #7a1c22); font-size: .6em; font-weight: 800; vertical-align: .44em; font-variant-numeric: tabular-nums; user-select: none; opacity: .8; } /* ------------------------------------------------- a janela de três dias * * O Deus Conosco abre ontem, hoje e amanhã; o resto do ano é o folheto, e o * folheto se assina. A régua existe na origem — o que não existe lá é dizê-la * antes do clique (auditoria, §3.3). Daí o cadeado no calendário e a ficha que, * fechada, ainda diz de que dia é. */ .a12-cal--liturgia .a12-cal__dia--fechado { color: var(--a12-on-fundo-suave, #3b2119); font-weight: 500; opacity: .5; } .a12-cal--liturgia .a12-cal__dia--fechado::after { content: ''; position: absolute; width: .3rem; height: .3rem; margin-top: 1.55rem; border-radius: 50%; background: currentColor; opacity: .6; } .a12-cal--liturgia .a12-cal__dia--fechado { cursor: default; } .a12-lit__leituras-do-dia { margin: 2rem 0; } .a12-lit__leituras-do-dia h3 { margin: 0 0 .85rem; color: var(--a12-principal, #7a1c22); font-size: 1.125rem; } .a12-lit__leituras-do-dia ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lit-borda); } .a12-lit__leituras-do-dia li { display: flex; flex-wrap: wrap; gap: .35rem 1rem; justify-content: space-between; margin: 0; padding: .7rem .2rem; border-bottom: 1px solid var(--lit-borda); } .a12-lit__leituras-do-dia li::marker { content: ''; } .a12-lit__ref-rotulo { font-weight: 600; } .a12-lit__ref-valor { color: var(--a12-principal, #7a1c22); font-weight: 600; } .a12-lit__assine { margin-top: 2rem; padding: 1.75rem; border-radius: 16px; background: var(--a12-fundo-suave, #f6efe9); color: var(--a12-on-fundo-suave, #3b2119); } .a12-lit__assine-titulo { margin: 0 0 .5rem; font-size: 1.125rem; font-weight: 700; } .a12-lit__assine-texto { margin: 0 0 1.25rem; max-width: 54ch; } .a12-lit__link-hoje { display: inline-block; margin-left: .75rem; padding: .7rem 0; color: var(--a12-secundaria, #4b2d22); font-weight: 600; } @media (max-width: 782px) { .a12-lit__assine { padding: 1.25rem; } .a12-lit__link-hoje { display: block; margin-left: 0; } }