/* ========================================================== O tema do Lumen: papel, tinta e rubricas. Nasceu nas páginas de oração (Horas, Terço, Devoções) e hoje vale para todas as páginas públicas, para o site não trocar de cara no meio da navegação. A referência é o livro de horas impresso: papel, tinta, e as rubricas em vermelho — "rubrica" vem de ruber, vermelho, porque nos breviários as instruções sempre foram impressas nessa cor. Tudo aqui vale só dentro de . ========================================================== */ body.oracao { --tinta: #2c2621; --tinta-suave: #6b6056; --rubrica: #9e2a2b; --papel: #fdfaf3; --mesa: #f1eadb; --filete: #ddd0b3; --ouro: #a88537; /* A cor litúrgica do dia; o script troca conforme o calendário. */ --liturgica: var(--ouro); --livro: 'EB Garamond', Georgia, 'Times New Roman', serif; background: var(--mesa); color: var(--tinta); } /* ---------------------------------------------------------- Cabeçalho da página ---------------------------------------------------------- */ .oracao .hero:not(.hero-capa) { background: none; color: var(--tinta); padding: 46px 20px 8px; } .oracao .hero:not(.hero-capa) h1 { font-family: var(--livro); font-weight: 400; font-size: 2.5rem; letter-spacing: 0.01em; color: var(--tinta); text-shadow: none; } .oracao .hero:not(.hero-capa) p { font-family: var(--livro); font-style: italic; font-size: 1.12rem; color: var(--tinta-suave); opacity: 1; } /* Linha com o dia litúrgico e a sua cor */ .dia-liturgico { font-family: var(--livro); font-size: 1rem; font-style: italic; color: var(--tinta-suave); text-align: center; margin: 10px auto 0; min-height: 1.4em; } .dia-liturgico .dia-cor { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--liturgica); margin-right: 8px; vertical-align: 1px; } .oracao .dia-liturgico.no-topo { margin: 0 auto 22px; } /* ---------------------------------------------------------- A folha: onde o texto é impresso ---------------------------------------------------------- */ .oracao .hours-card, .oracao .hours-guide, .oracao .terco-abertura, .oracao .terco-reza, .oracao .terco-fim, .oracao .devo-folha, .oracao .devo-cartao { background: var(--papel); border: 1px solid var(--filete); border-radius: 3px; box-shadow: 0 1px 2px rgba(60, 40, 20, 0.06), 0 10px 28px rgba(60, 40, 20, 0.07); } /* O filete duplo no alto, na cor litúrgica do dia */ .oracao .hours-card, .oracao .terco-abertura, .oracao .terco-reza, .oracao .terco-fim, .oracao .devo-folha { border-top: 4px double var(--liturgica); } .oracao .hours-card { max-width: 720px; } /* ---------------------------------------------------------- Títulos ---------------------------------------------------------- */ .oracao .liturgy-day, .oracao .terco-abertura h1, .oracao .terco-misterio h2, .oracao .terco-fim h2, .oracao .devo-intro h1, .oracao .devo-topo h1, .oracao .devo-cartao h2, .oracao .devo-fim h2, .oracao .hours-done h3, .oracao .hours-guide-body h3 { font-family: var(--livro); font-weight: 400; color: var(--tinta); } .oracao .hours-card .liturgy-day { text-align: center; font-size: 1.9rem; padding-top: 28px; } .oracao .hours-hint { text-align: center; font-family: var(--livro); font-style: italic; font-size: 1.02rem; color: var(--tinta-suave); } .oracao .hours-source-top { text-align: center; font-family: var(--livro); } /* Título de cada parte do ofício: versalete em vermelho, com a cruz que os livros litúrgicos usam para marcar as divisões. */ .oracao .hours-section, .oracao .devo-secao { font-family: var(--livro); font-weight: 400; font-variant: small-caps; letter-spacing: 0.08em; font-size: 1.28rem; color: var(--rubrica); text-align: center; border: none; padding: 0; margin: 34px 0 4px; } .oracao .hours-section::before, .oracao .devo-secao::before { content: "✠"; display: block; font-variant: normal; font-size: 0.8rem; letter-spacing: 0; margin-bottom: 4px; opacity: 0.8; } /* Nota curta que explica, para quem não conhece, o que é aquela parte */ .secao-nota { font-family: var(--livro); font-style: italic; font-size: 0.98rem; color: var(--tinta-suave); text-align: center; max-width: 28rem; margin: 0 auto 18px; line-height: 1.5; } /* ---------------------------------------------------------- O texto ---------------------------------------------------------- */ .oracao .hours-office, .oracao .hours-step, .oracao .devo-corpo { max-width: 36rem; margin: 0 auto; } .oracao .hours-text, .oracao .devo-texto { font-family: var(--livro); font-size: 1.2rem; line-height: 1.75; color: var(--tinta); margin-bottom: 16px; hyphens: auto; } /* Rubricas: V., R., Ant. — em vermelho, como no breviário */ .oracao .rubrica { color: var(--rubrica); font-weight: 600; } /* Instruções longas: vermelhas e em itálico, sem caixa em volta */ .oracao .hours-rubric, .oracao .devo-rubrica { font-family: var(--livro); font-style: italic; font-size: 1.04rem; color: var(--rubrica); background: none; border: none; padding: 0; margin: 10px 0 18px; line-height: 1.55; } /* A capitular: primeira letra grande, no começo de hinos e orações */ .oracao .capitular::first-letter { float: left; font-family: var(--livro); font-size: 3.6em; line-height: 0.82; padding: 6px 8px 0 0; color: var(--rubrica); } /* ---------------------------------------------------------- Guia para quem está começando ---------------------------------------------------------- */ .oracao .hours-guide { max-width: 720px; } .oracao .hours-guide > summary { background: none; border-bottom: 1px solid transparent; padding: 18px 24px; } .oracao .hours-guide[open] > summary { border-bottom-color: var(--filete); } .oracao .hours-guide > summary strong { font-family: var(--livro); font-weight: 400; font-size: 1.22rem; color: var(--tinta); } .oracao .hours-guide > summary small { font-family: var(--livro); font-style: italic; font-size: 0.98rem; } .oracao .hours-guide > summary::after { color: var(--rubrica); } .oracao .hours-guide-body { font-family: var(--livro); font-size: 1.1rem; line-height: 1.7; } .oracao .hours-guide-body h3 { font-variant: small-caps; letter-spacing: 0.06em; color: var(--rubrica); font-size: 1.15rem; } .oracao .hours-glossary dt { color: var(--rubrica); font-weight: 600; } /* ---------------------------------------------------------- Abas e botões: texto de livro, não de aplicativo ---------------------------------------------------------- */ .oracao .liturgy-tabs { justify-content: center; gap: 2px 18px; padding: 12px 18px 0; border-bottom: 1px solid var(--filete); } .oracao .liturgy-tab, .oracao .hours-mode, .oracao .devo-modo { font-family: var(--livro); font-variant: small-caps; letter-spacing: 0.06em; font-size: 1.1rem; font-weight: 400; color: var(--tinta-suave); background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 2px; } .oracao .liturgy-tab:hover, .oracao .hours-mode:hover, .oracao .devo-modo:hover { color: var(--tinta); } .oracao .liturgy-tab.active, .oracao .hours-mode.active, .oracao .devo-modo.active { color: var(--rubrica); background: none; border-bottom-color: var(--rubrica); } .oracao .hours-modes { justify-content: center; gap: 22px; } .oracao .devo-modos { background: none; justify-content: center; gap: 24px; border-bottom-color: var(--filete); } .oracao .devo-modo { flex: none; } /* Botões: o principal é tinta sobre papel; o secundário só o contorno */ .oracao .btn, .oracao .terco-passo.principal, .oracao .devo-passo.principal, .oracao .terco-botao-conta, .oracao .terco-comecar { font-family: var(--livro); font-variant: small-caps; letter-spacing: 0.07em; font-size: 1.12rem; font-weight: 400; background: var(--tinta); border: 1px solid var(--tinta); color: var(--papel); border-radius: 2px; box-shadow: none; } .oracao .btn:hover, .oracao .terco-passo.principal:hover, .oracao .devo-passo.principal:hover, .oracao .terco-botao-conta:hover, .oracao .terco-comecar:hover { background: var(--rubrica); border-color: var(--rubrica); color: var(--papel); transform: none; } .oracao .btn-ghost, .oracao .terco-passo, .oracao .devo-passo { font-family: var(--livro); font-variant: small-caps; letter-spacing: 0.07em; font-size: 1.12rem; font-weight: 400; background: transparent; border: 1px solid var(--filete); color: var(--tinta); border-radius: 2px; } .oracao .btn-ghost:hover, .oracao .terco-passo:hover:not(:disabled), .oracao .devo-passo:hover:not(:disabled) { border-color: var(--tinta); color: var(--tinta); } /* A regra acima é do botão vazado, mas ".principal" também é um ".devo-passo" — e, com a mesma especificidade e vindo depois, ela roubava a letra do botão cheio: no "Começar" da Confissão dava letra escura sobre o vermelho da rubrica, 1,44:1. O cheio volta a mandar na sua própria cor. */ .oracao .terco-passo.principal:hover:not(:disabled), .oracao .devo-passo.principal:hover:not(:disabled) { background: var(--rubrica); border-color: var(--rubrica); color: var(--papel); } .oracao .hours-nav-tip, .oracao .hours-step-count, .oracao .devo-contagem { font-family: var(--livro); font-style: italic; font-size: 0.95rem; color: var(--tinta-suave); } /* Barras de progresso: um filete fino que vai se enchendo de vermelho */ .oracao .hours-progress, .oracao .devo-barra { height: 2px; background: var(--filete); border-radius: 0; } .oracao .hours-progress-bar, .oracao .devo-barra-cheia { background: var(--rubrica); border-radius: 0; } /* ---------------------------------------------------------- Créditos e avisos ---------------------------------------------------------- */ .oracao .hours-credit { background: none; border-top: 1px solid var(--filete); } .oracao .hours-credit-text, .oracao .terco-fonte, .oracao .devo-fonte { font-family: var(--livro); font-style: italic; font-size: 0.98rem; color: var(--tinta-suave); } .oracao .hours-credit-text a, .oracao .terco-fonte a, .oracao .devo-fonte a, .oracao .hours-source-top a { color: var(--rubrica); font-weight: 400; } .oracao .hours-more { font-family: var(--livro); font-style: italic; font-size: 1.02rem; background: none; border-top: 1px solid var(--filete); border-radius: 0; text-align: center; color: var(--tinta-suave); } .oracao .hours-done h3, .oracao .devo-fim h2, .oracao .terco-fim h2 { font-size: 1.8rem; } .oracao .hours-done p, .oracao .devo-fim p, .oracao .terco-fim p { font-family: var(--livro); font-style: italic; font-size: 1.1rem; } /* ---------------------------------------------------------- Terço ---------------------------------------------------------- */ .oracao .terco-dia { font-family: var(--livro); font-variant: small-caps; font-size: 1.1rem; letter-spacing: 0.1em; text-transform: none; font-weight: 400; color: var(--rubrica); } .oracao .terco-abertura h1 { font-size: 2.3rem; } .oracao .terco-misterios li { font-family: var(--livro); font-size: 1.2rem; border-bottom-color: var(--filete); } /* Os mistérios numerados em algarismos romanos, sem bolinha */ .oracao .terco-num { width: 2.2em; height: auto; line-height: inherit; background: none; border-radius: 0; font-family: var(--livro); font-size: 1.05rem; font-weight: 400; color: var(--rubrica); text-align: right; } .oracao .terco-outras { border-top-color: var(--filete); } .oracao .terco-outras > span { font-family: var(--livro); font-style: italic; font-size: 1rem; } .oracao .terco-coroa { font-family: var(--livro); font-variant: small-caps; letter-spacing: 0.05em; font-size: 1.08rem; font-weight: 400; background: none; border: none; border-bottom: 1px solid transparent; border-radius: 0; padding: 4px 6px; color: var(--tinta-suave); } .oracao .terco-coroa:hover { color: var(--tinta); } .oracao .terco-coroa.active { background: none; color: var(--rubrica); border-bottom-color: var(--rubrica); } /* As cinco dezenas, em algarismos romanos */ .oracao .terco-dezena { width: auto; min-width: 2.2em; height: auto; padding: 2px 6px; line-height: 1.4; border: none; border-radius: 0; background: none; font-family: var(--livro); font-size: 1.05rem; font-weight: 400; color: var(--filete); transform: none; } .oracao .terco-dezena.feita { background: none; color: var(--tinta-suave); } .oracao .terco-dezena.atual { background: none; color: var(--rubrica); border-bottom: 2px solid var(--rubrica); transform: none; } .oracao .terco-rotulo { font-family: var(--livro); font-variant: small-caps; text-transform: none; letter-spacing: 0.1em; font-size: 1.05rem; font-weight: 400; color: var(--rubrica); } .oracao .terco-misterio h2 { font-size: 2.05rem; } .oracao .terco-pausa { font-family: var(--livro); font-size: 1.08rem; } .oracao .terco-oracao { font-family: var(--livro); font-size: 1.32rem; line-height: 1.7; color: var(--tinta); } /* ---------- Ladainha de Nossa Senhora ---------- */ /* Chamado e resposta, como num folheto: as invocações em coluna, a resposta dita uma vez no alto. Sem a capitular vermelha das outras orações — aqui são cinquenta e quatro começos, e cinquenta e quatro capitulares viram confete. */ .oracao .terco-ladainha { text-align: center; } .oracao .terco-ladainha ul { list-style: none; margin: 0 auto 18px; padding: 0; max-width: 30em; } .oracao .terco-ladainha li { font-family: var(--livro); font-size: 1.12rem; line-height: 1.55; color: var(--tinta); padding: 3px 0; } .oracao .ladainha-abertura li, .oracao .ladainha-cordeiro li { border-bottom: 1px solid var(--filete); padding: 7px 0; } .oracao .ladainha-abertura li:last-child, .oracao .ladainha-cordeiro li:last-child { border-bottom: 0; } .oracao .ladainha-cordeiro li span, .oracao .ladainha-versiculo span { display: block; font-style: italic; color: var(--rubrica); } .oracao .ladainha-resposta { margin: 0 auto 18px; padding: 10px 14px; max-width: 28em; background: var(--mesa); border: 1px solid var(--filete); border-radius: 3px; font-family: var(--livro); font-size: 1rem; font-style: italic; color: var(--tinta-suave); } .oracao .ladainha-resposta strong { font-style: normal; color: var(--rubrica); } .oracao .ladainha-versiculo { margin: 0 auto; max-width: 30em; font-family: var(--livro); font-size: 1.12rem; line-height: 1.55; color: var(--tinta); } @media (max-width: 700px) { .oracao .terco-ladainha li { font-size: 1.06rem; } } /* Inicial em vermelho no começo de cada oração do terço */ .oracao .terco-oracao::first-letter { color: var(--rubrica); font-size: 1.5em; line-height: 1; } /* As dez contas enfiadas num fio */ .oracao .terco-contas { position: relative; gap: 14px; padding: 10px 0; } .oracao .terco-contas::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(100%, 290px); height: 1px; background: var(--tinta-suave); opacity: 0.45; transform: translate(-50%, -50%); } .oracao .terco-conta { position: relative; width: 15px; height: 15px; border: 1px solid var(--tinta-suave); background: var(--papel); } /* Conta rezada: parece uma conta de rosário, com brilho e volume */ .oracao .terco-conta.feita { border-color: #6d1c1d; background: radial-gradient(circle at 35% 30%, #d0706c 0%, #9e2a2b 45%, #5e1414 100%); } .oracao .terco-conta.proxima { border: 1px solid var(--ouro); box-shadow: 0 0 0 3px rgba(168, 133, 55, 0.22); transform: scale(1.25); } .oracao .terco-botao-conta { border-radius: 2px; padding: 13px 24px; } .oracao .terco-botao-conta.completa { background: transparent; border-color: var(--filete); color: var(--tinta-suave); } .oracao .terco-sair { font-family: var(--livro); font-style: italic; font-size: 1rem; color: var(--tinta-suave); } .oracao .terco-bencao { font-family: var(--livro); font-size: 1.2rem; } /* ---------------------------------------------------------- Devoções ---------------------------------------------------------- */ .oracao .devo-intro h1 { font-size: 2.4rem; } .oracao .devo-intro p, .oracao .devo-resumo { font-family: var(--livro); font-size: 1.14rem; color: var(--tinta); } .oracao .devo-intro p { color: var(--tinta-suave); font-style: italic; } .oracao .devo-cartao { border-left: 1px solid var(--filete); padding: 26px 30px; } .oracao .devo-cartao:hover { transform: none; border-color: var(--rubrica); box-shadow: 0 1px 2px rgba(60, 40, 20, 0.06), 0 14px 32px rgba(60, 40, 20, 0.1); } .oracao .devo-cartao h2 { font-size: 1.55rem; } .oracao .devo-quando { font-family: var(--livro); font-size: 1.02rem; } .oracao .devo-abrir { font-family: var(--livro); font-variant: small-caps; letter-spacing: 0.07em; font-size: 1.08rem; font-weight: 400; color: var(--rubrica); } .oracao .devo-voltar { font-family: var(--livro); font-style: italic; font-size: 1.02rem; color: var(--tinta-suave); } .oracao .devo-topo h1 { font-size: 2.2rem; } /* ---------------------------------------------------------- Celular ---------------------------------------------------------- */ @media (max-width: 600px) { .oracao .hero:not(.hero-capa) { padding-top: 30px; } .oracao .hero:not(.hero-capa) h1 { font-size: 1.95rem; } .oracao .hours-text, .oracao .devo-texto { font-size: 1.12rem; } .oracao .liturgy-tabs { gap: 2px 12px; } .oracao .terco-abertura h1 { font-size: 1.8rem; } .oracao .terco-misterio h2 { font-size: 1.6rem; } .oracao .terco-oracao { font-size: 1.18rem; } .oracao .terco-contas { gap: 9px; } .oracao .terco-contas::before { width: 100%; } .oracao .devo-intro h1, .oracao .devo-topo h1 { font-size: 1.8rem; } .oracao .capitular::first-letter { font-size: 3em; } } /* ---------------------------------------------------------- Terço: escolha entre o Santo Terço e o da Misericórdia ---------------------------------------------------------- */ .terco-tipos { display: flex; justify-content: center; gap: 26px; margin: 0 0 18px; } .terco-tipo { border: none; background: none; padding: 6px 2px; font-family: var(--livro); font-variant: small-caps; letter-spacing: 0.06em; font-size: 1.18rem; color: var(--tinta-suave); border-bottom: 2px solid transparent; cursor: pointer; } .terco-tipo:hover { color: var(--tinta); } .terco-tipo.active { color: var(--rubrica); border-bottom-color: var(--rubrica); } .terco-explica { font-family: var(--livro); font-style: italic; font-size: 1.1rem; line-height: 1.65; color: var(--tinta-suave); max-width: 30rem; margin: 0 auto 26px; } /* ---------------------------------------------------------- A leitura de cada dezena: o Evangelho do mistério, ou a promessa do Diário de Santa Faustina ---------------------------------------------------------- */ .terco-leitura { margin: 4px auto 18px; max-width: 32rem; padding: 18px 20px 16px; border-top: 1px solid var(--filete); border-bottom: 1px solid var(--filete); } .terco-leitura figcaption { font-family: var(--livro); font-variant: small-caps; letter-spacing: 0.1em; font-size: 1rem; color: var(--rubrica); margin-bottom: 10px; } .terco-leitura blockquote { margin: 0; font-family: var(--livro); font-style: italic; font-size: 1.16rem; line-height: 1.7; color: var(--tinta); } .terco-leitura cite { display: block; margin-top: 10px; font-family: var(--livro); font-style: normal; font-size: 1rem; color: var(--rubrica); } /* A referência do parágrafo do Diário: (D 754) */ .diario-ref { font-style: normal; font-size: 0.86em; color: var(--rubrica); white-space: nowrap; } .oracao .terco-misterio h2.terco-promessa { font-size: 1.5rem; line-height: 1.35; max-width: 28rem; margin-left: auto; margin-right: auto; } .terco-contador { font-family: var(--livro); font-style: italic; font-size: 1.02rem; color: var(--tinta-suave); margin: -8px 0 16px; } /* ---------------------------------------------------------- Celular: tudo ao alcance do polegar ---------------------------------------------------------- */ @media (max-width: 600px) { .oracao .section { padding-top: 18px; } .oracao .container { padding-left: 14px; padding-right: 14px; } .terco-tipos { gap: 14px; margin-bottom: 14px; } .terco-tipo { font-size: 1.06rem; } .oracao .terco-abertura { padding: 26px 18px 24px; } .oracao .terco-reza { padding: 18px 16px 0; } .oracao .terco-misterios li { font-size: 1.08rem; gap: 10px; } .terco-explica { font-size: 1.04rem; } .terco-leitura { padding: 14px 4px 12px; } .terco-leitura blockquote { font-size: 1.08rem; } .oracao .terco-misterio h2.terco-promessa { font-size: 1.28rem; } /* Voltar e Seguir presos ao pé da tela enquanto se lê a dezena */ .oracao .terco-nav { position: sticky; bottom: var(--barra-baixo, 0px); z-index: 5; margin: 22px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--papel); border-top: 1px solid var(--filete); } .oracao .terco-passo { max-width: none; min-height: 48px; } .oracao .terco-passo.principal { flex-grow: 1.6; } .oracao .terco-botao-conta { max-width: none; min-height: 56px; font-size: 1.2rem; } .oracao .terco-sair { margin: 12px 0 14px; } .oracao .devo-nav { position: sticky; bottom: var(--barra-baixo, 0px); background: var(--papel); padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--filete); } .oracao .devo-passo { max-width: none; min-height: 48px; } .oracao .hours-nav { position: sticky; bottom: var(--barra-baixo, 0px); background: var(--papel); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--filete); } .oracao .hours-nav .btn, .oracao .hours-nav .btn-ghost { min-height: 48px; flex: 1 1 0; } } /* O cabeçalho geral do site foi feito para o banner com foto da página inicial (460px de altura, sombra no texto). Nas páginas de oração ele é só o título: sem altura mínima, sem sombra. */ .oracao .hero:not(.hero-capa) { min-height: 0; display: block; } .oracao .hero:not(.hero-capa) h1, .oracao .hero:not(.hero-capa) p { text-shadow: none; animation: none; } /* Ao tocar em "Rezei" a etapa é redesenhada; sem isto a animação de entrada rodava de novo e a oração piscava a cada Ave-Maria. */ .terco-reza.mesmo-passo .terco-dezena-corpo, .terco-reza.mesmo-passo .terco-misterio, .terco-reza.mesmo-passo .terco-oracao-bloco { animation: none; } /* A conta que acabou de ser rezada ganha um toque curto, só ela */ .terco-conta.acabou { animation: contaRezada 0.35s ease; } @keyframes contaRezada { from { transform: scale(1.35); } to { transform: scale(1); } } @media (max-width: 600px) { .oracao .hero:not(.hero-capa) { padding: 26px 16px 6px; } .oracao .hero:not(.hero-capa) h1 { font-size: 1.9rem; margin-bottom: 6px; } .oracao .hero:not(.hero-capa) p { font-size: 1.04rem; } } /* ========================================================== Barra do topo e rodapé no mesmo tema Antes só o miolo da página virava papel e tinta; a barra seguia branca com o nome em azul e o rodapé azul-marinho — parecia que o site trocava de tema no meio da tela. ========================================================== */ .oracao .navbar { background: var(--papel); border-bottom: 1px solid var(--filete); } .oracao .navbar .logo { font-family: var(--livro); font-weight: 400; font-size: 1.55em; letter-spacing: 0.02em; color: var(--tinta); } .oracao .navbar nav a { font-family: var(--livro); font-size: 1.12em; font-weight: 400; color: var(--tinta-suave); } .oracao .navbar nav a:hover, .oracao .navbar nav a.active { color: var(--rubrica); } .oracao .navbar nav a::after { background: var(--rubrica); } .oracao .nav-search input { background: var(--mesa); border-color: var(--filete); color: var(--tinta); font-family: var(--livro); font-size: 1em; } .oracao .menu-botao { background: var(--papel); border-color: var(--filete); color: var(--tinta); font-family: var(--livro); font-size: 1.08em; font-weight: 400; } @media (max-width: 940px) { .oracao .navbar.menu-aberto nav { border-top-color: var(--filete); } .oracao .navbar.menu-aberto nav a { border-bottom-color: var(--filete); font-size: 1.15em; } .oracao .navbar .logo { font-size: 1.4em; } } /* Rodapé em tinta escura, com os filetes dourados */ .oracao .footer { background: radial-gradient(circle at 50% 0%, rgba(168, 133, 55, 0.14), transparent 60%), #2a231e; border-top: 4px double var(--ouro); color: #e6dac2; } .oracao .footer-logo { font-family: var(--livro); font-size: 1.6rem; color: var(--papel); } .oracao .footer-brand p, .oracao .footer-blessing { font-family: var(--livro); font-size: 1.05rem; color: #c9b99a; } .oracao .footer h4 { font-family: var(--livro); font-variant: small-caps; letter-spacing: 0.08em; font-weight: 400; font-size: 1.15rem; color: var(--ouro); } .oracao .footer-links a { font-family: var(--livro); font-size: 1.05rem; color: #e6dac2; } .oracao .footer-links a:hover, .oracao .footer-socials a:hover { color: var(--ouro); } .oracao .footer-socials a { color: #e6dac2; border-color: rgba(230, 218, 194, 0.25); } .oracao .footer-bottom { border-top-color: rgba(230, 218, 194, 0.15); color: #a8997e; font-family: var(--livro); } /* As seções pares do site têm fundo branco; aqui o fundo é sempre a mesa, senão aparece uma faixa branca entre a barra e a folha. */ .oracao .section, .oracao .section:nth-child(even) { background: transparent; } /* Botão de voltar ao topo, em papel e tinta */ .oracao #to-top { background: var(--papel); border-color: var(--filete); color: var(--rubrica); font-family: var(--livro); box-shadow: 0 2px 10px rgba(60, 40, 20, 0.12); } /* No celular ele sobe um pouco, para não cobrir Voltar e Seguir */ @media (max-width: 600px) { .oracao #to-top { bottom: 96px; } } /* ========================================================== Folha de rosto (página inicial) É a única página que mantém a foto no cabeçalho, como a gravura no começo de um livro. O véu sobre ela é cor de tinta, e o botão é papel — tinta sobre a foto escura sumiria. ========================================================== */ .oracao .hero-capa { border-bottom: 4px double var(--ouro); /* A foto tem proporção 1,6:1. Com altura fixa, numa tela larga ela virava uma tira e perdia o altar; agora a altura acompanha a largura. */ min-height: clamp(460px, 44vw, 820px); background-position: center, center 40%; } .oracao .hero-capa h1 { font-family: var(--livro); font-weight: 400; font-size: 2.9rem; letter-spacing: 0.01em; } .oracao .hero-capa p { font-family: var(--livro); font-style: italic; font-size: 1.22rem; color: #efe6d4; } .oracao .hero-capa .btn { background: var(--papel); border-color: var(--papel); color: var(--tinta); } /* No "mouse em cima" o botão da capa vira ouro. Com letra cor de papel ficava 2,47:1 — clarinho sobre claro. Sobre ouro a letra tem de ser a tinta escura, que é a mesma escolha que o botão faz em repouso. */ .oracao .hero-capa .btn:hover { background: var(--ouro); border-color: var(--ouro); color: #2c2621; } @media (max-width: 600px) { .oracao .hero-capa { min-height: 340px; } .oracao .hero-capa h1 { font-size: 2.1rem; } .oracao .hero-capa p { font-size: 1.08rem; } } /* ========================================================== Devoções em grupos: orações, novenas e ofícios ========================================================== */ .oracao .devo-grupo { margin-top: 40px; } .oracao .devo-grupo-titulo { font-family: var(--livro); font-weight: 400; font-variant: small-caps; letter-spacing: 0.08em; font-size: 1.5rem; color: var(--rubrica); text-align: center; margin: 0 0 4px; } .oracao .devo-grupo-explica { font-family: var(--livro); font-style: italic; color: var(--tinta-suave); text-align: center; margin: 0 0 20px; } /* A novena que está acontecendo ganha destaque discreto */ .oracao .devo-cartao.em-andamento { border-color: var(--ouro); } .oracao .devo-aviso { font-family: var(--livro); font-style: italic; color: var(--rubrica); font-size: 1.05rem; margin: 2px 0 8px; } /* Os nove dias da novena */ .oracao .devo-dias { margin: 18px auto 4px; text-align: center; } .oracao .devo-dias-rotulo { font-family: var(--livro); font-variant: small-caps; letter-spacing: 0.07em; color: var(--tinta-suave); margin: 0 0 8px; } .oracao .devo-dias-botoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; } .oracao .devo-dia { /* A borda entra na conta do tamanho: o dia de hoje tem borda de 2px e, sem isto, ficava maior que os outros e pulava para fora da linha. */ box-sizing: border-box; width: 38px; height: 38px; border: 1px solid var(--filete); border-radius: 50%; background: var(--papel); color: var(--tinta); font-family: var(--livro); font-size: 1.1rem; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease; } .oracao .devo-dia:hover { border-color: var(--rubrica); color: var(--rubrica); } .oracao .devo-dia.hoje { border: 2px solid var(--ouro); } .oracao .devo-dia.active { background: var(--tinta); border-color: var(--tinta); color: var(--papel); } .oracao .devo-dias .devo-aviso { margin-top: 10px; } /* ========================================================== Guia de Confissão ========================================================== */ .oracao .conf-folha { max-width: 760px; margin: 0 auto; } .oracao .conf-exame { list-style: none; padding: 0; margin: 8px 0 0; } .oracao .conf-exame li { border-bottom: 1px solid var(--filete); } .oracao .conf-exame li:last-child { border-bottom: 0; } .oracao .conf-pergunta { display: flex; gap: 14px; align-items: flex-start; padding: 12px 4px; cursor: pointer; font-family: var(--livro); font-size: 1.14rem; line-height: 1.55; color: var(--tinta); } .oracao .conf-pergunta input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 5px; accent-color: var(--rubrica); } .oracao .conf-pergunta:hover span { color: var(--rubrica); } .oracao .conf-ajuda { margin: 18px 0 0; padding: 12px 16px; border-left: 3px solid var(--rubrica); background: var(--mesa); font-family: var(--livro); font-size: 1.05rem; color: var(--tinta); } /* Quem fala, na conversa com o padre */ .oracao .conf-fala { font-family: var(--livro); font-size: 1.14rem; line-height: 1.65; margin: 0 0 12px; color: var(--tinta); } .oracao .conf-quem { font-variant: small-caps; letter-spacing: 0.06em; color: var(--rubrica); margin-right: 6px; } .oracao .conf-lembrete { margin: 6px 0 18px; padding: 14px 18px; border: 1px dashed var(--ouro); background: var(--mesa); } .oracao .conf-lembrete-titulo { font-family: var(--livro); font-variant: small-caps; letter-spacing: 0.06em; color: var(--tinta-suave); margin: 0 0 6px; } .oracao .conf-lembrete ul { margin: 0 0 8px 18px; padding: 0; } .oracao .conf-lembrete li { font-family: var(--livro); font-size: 1.06rem; margin-bottom: 4px; } .oracao .conf-lembrete-nota { font-family: var(--livro); font-style: italic; font-size: 0.98rem; color: var(--tinta-suave); margin: 0 0 8px; } .oracao .conf-apagar { background: none; border: 0; padding: 0; font-family: var(--livro); font-size: 1rem; color: var(--rubrica); text-decoration: underline; cursor: pointer; } .oracao .conf-citacao { margin: 22px 0 6px; padding: 0 0 0 18px; border-left: 2px solid var(--ouro); font-family: var(--livro); font-style: italic; font-size: 1.18rem; color: var(--tinta); } .oracao .conf-citacao cite { display: block; margin-top: 6px; font-style: normal; font-variant: small-caps; letter-spacing: 0.06em; font-size: 1rem; color: var(--tinta-suave); } .oracao .conf-depois-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; font-family: var(--livro); font-size: 1.1rem; } .oracao .conf-depois-links a { color: var(--rubrica); } /* Dúvidas, abertas uma de cada vez */ .oracao .conf-duvidas { max-width: 760px; margin: 48px auto 0; } .oracao .conf-duvidas details { border-bottom: 1px solid var(--filete); padding: 4px 0; } .oracao .conf-duvidas summary { cursor: pointer; list-style: none; padding: 12px 28px 12px 0; position: relative; font-family: var(--livro); font-size: 1.2rem; color: var(--tinta); } .oracao .conf-duvidas summary::-webkit-details-marker { display: none; } .oracao .conf-duvidas summary::after { content: '+'; position: absolute; right: 4px; top: 10px; font-size: 1.4rem; color: var(--rubrica); } .oracao .conf-duvidas details[open] summary::after { content: '−'; } .oracao .conf-duvidas details p { font-family: var(--livro); font-size: 1.1rem; line-height: 1.7; color: var(--tinta); margin: 0 0 14px; } /* Página inicial: "Para rezar hoje" */ .oracao .rezar-hoje { list-style: none; margin: 0; padding: 0; } .oracao .rezar-hoje li { border-bottom: 1px solid var(--filete); } .oracao .rezar-hoje li:last-child { border-bottom: 0; } .oracao .rezar-hoje a { display: block; padding: 11px 2px; color: var(--tinta); text-decoration: none; } .oracao .rezar-hoje strong { display: block; font-family: var(--livro); font-weight: 600; font-size: 1.12rem; } .oracao .rezar-hoje span { display: block; font-family: var(--livro); font-style: italic; color: var(--tinta-suave); font-size: 1rem; } .oracao .rezar-hoje a:hover strong { color: var(--rubrica); } /* A− A+ no alto das páginas de oração */ .tamanho-letra { display: flex; justify-content: flex-end; gap: 6px; max-width: 760px; margin: 0 auto 4px; } .tamanho-letra button { min-width: 44px; height: 36px; padding: 0 10px; border: 1px solid var(--filete, #ddd0b3); border-radius: 2px; background: var(--papel, #fdfaf3); color: var(--tinta, #2c2621); font-family: var(--livro, Georgia, serif); font-size: 1.05rem; cursor: pointer; } .tamanho-letra button:hover:not(:disabled) { border-color: var(--rubrica, #9e2a2b); color: var(--rubrica, #9e2a2b); } .tamanho-letra button:disabled { opacity: 0.4; cursor: default; } /* ========================================================== Bíblia ========================================================== */ .oracao .biblia-page .container { max-width: 860px; } .oracao .biblia-trilha { font-family: var(--livro); font-size: 1rem; color: var(--tinta-suave); margin: 4px 0 10px; } .oracao .biblia-trilha a { color: var(--tinta-suave); } .oracao .biblia-trilha a:hover { color: var(--rubrica); } .oracao .biblia-topo { text-align: center; margin: 6px 0 26px; } .oracao .biblia-topo h1, .oracao .biblia-cabeca h1 { font-family: var(--livro); font-weight: 400; font-size: 2.4rem; color: var(--tinta); margin: 0 0 4px; } .oracao .biblia-cabeca h1 span { color: var(--rubrica); } .oracao .biblia-sub { font-family: var(--livro); font-style: italic; color: var(--tinta-suave); margin: 0 0 14px; } .oracao .biblia-sub a { color: var(--rubrica); } .oracao .biblia-busca { display: flex; gap: 8px; max-width: 520px; margin: 12px auto 0; } .oracao .biblia-busca input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--filete); border-radius: 2px; background: var(--papel); font-family: var(--livro); font-size: 1.1rem; color: var(--tinta); } .oracao .biblia-busca input:focus { outline: none; border-color: var(--tinta); } .oracao .biblia-busca .btn { padding: 0 20px; } .oracao .biblia-continuar { font-family: var(--livro); font-size: 1.08rem; margin: 14px 0 0; } .oracao .biblia-continuar a { color: var(--rubrica); } .oracao .biblia-testamento { margin-top: 30px; } .oracao .biblia-testamento h2 { font-family: var(--livro); font-weight: 400; font-variant: small-caps; letter-spacing: 0.08em; color: var(--rubrica); text-align: center; font-size: 1.6rem; border-bottom: 4px double var(--filete); padding-bottom: 8px; margin: 0 0 8px; } .oracao .biblia-grupo h3 { font-family: var(--livro); font-style: italic; font-weight: 400; color: var(--tinta-suave); font-size: 1.12rem; margin: 18px 0 8px; } .oracao .biblia-livros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; } .oracao .biblia-livros a { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 2px; font-family: var(--livro); font-size: 1.12rem; color: var(--tinta); text-decoration: none; background: var(--papel); } .oracao .biblia-livros a:hover { border-color: var(--filete); color: var(--rubrica); } .oracao .biblia-abrev { min-width: 34px; font-size: 0.85rem; font-variant: small-caps; letter-spacing: 0.04em; color: var(--ouro); } .oracao .biblia-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; } .oracao .biblia-caps a { display: flex; align-items: center; justify-content: center; height: 48px; border: 1px solid var(--filete); border-radius: 2px; background: var(--papel); font-family: var(--livro); font-size: 1.15rem; color: var(--tinta); text-decoration: none; } .oracao .biblia-caps a:hover { border-color: var(--rubrica); color: var(--rubrica); } /* O capítulo: folha de livro, texto corrido */ .oracao .biblia-capitulo { background: var(--papel); border: 1px solid var(--filete); border-top: 4px double var(--liturgica); padding: 30px 44px 20px; box-shadow: 0 1px 2px rgba(60, 40, 20, 0.06), 0 10px 28px rgba(60, 40, 20, 0.07); } .oracao .biblia-cabeca { text-align: center; margin-bottom: 18px; } .oracao .biblia-texto { font-family: var(--livro); font-size: 1.22rem; line-height: 1.8; color: var(--tinta); } .oracao .biblia-texto .vers { margin: 0 0 6px; padding: 2px 6px; border-radius: 2px; transition: background 0.2s ease; } .oracao .biblia-texto .vn { font-size: 0.7em; vertical-align: super; line-height: 0; color: var(--rubrica); text-decoration: none; font-weight: 600; padding: 0 3px 0 0; } .oracao .biblia-texto .vers.destaque { background: #f3e7c6; box-shadow: inset 3px 0 0 var(--ouro); } .oracao .biblia-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--filete); font-family: var(--livro); } .oracao .biblia-nav a { color: var(--tinta); text-decoration: none; font-size: 1.05rem; } .oracao .biblia-nav a span { display: block; font-style: italic; color: var(--tinta-suave); font-size: 0.95rem; } .oracao .biblia-nav .proximo { text-align: right; } .oracao .biblia-nav a:hover { color: var(--rubrica); } .oracao .biblia-nav-livro { font-variant: small-caps; letter-spacing: 0.06em; color: var(--rubrica) !important; } .oracao .biblia-resultados { list-style: none; margin: 0; padding: 0; } .oracao .biblia-resultados li { border-bottom: 1px solid var(--filete); } .oracao .biblia-resultados a { display: block; padding: 12px 4px; color: var(--tinta); text-decoration: none; font-family: var(--livro); font-size: 1.12rem; line-height: 1.6; } .oracao .biblia-resultados strong { color: var(--rubrica); font-weight: 600; margin-right: 6px; } .oracao .biblia-resultados a:hover strong { text-decoration: underline; } .oracao .biblia-fonte { margin: 22px 0 0; text-align: center; font-family: var(--livro); font-style: italic; font-size: 0.98rem; color: var(--tinta-suave); } .oracao .biblia-fonte a { color: var(--tinta-suave); } @media (max-width: 600px) { .oracao .biblia-topo h1, .oracao .biblia-cabeca h1 { font-size: 2rem; } .oracao .biblia-capitulo { padding: 22px 16px 14px; margin: 0 -8px; } .oracao .biblia-texto { font-size: 1.16rem; } .oracao .biblia-livros { grid-template-columns: repeat(2, minmax(0, 1fr)); } .oracao .biblia-livros a { gap: 6px; padding: 8px 8px; font-size: 1.04rem; overflow-wrap: anywhere; } .oracao .biblia-abrev { min-width: 28px; } /* Anterior e Próximo ficam ao alcance do polegar */ .oracao .biblia-nav { position: sticky; bottom: var(--barra-baixo, 0px); z-index: 5; background: var(--papel); margin: 20px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); } } /* ========================================================== Barra de baixo (celular): Hoje, Liturgia, Bíblia, Horas, Terço ========================================================== */ .barra-baixo { display: none; } @media (max-width: 940px) { .com-barra-baixo { --barra-baixo: calc(58px + env(safe-area-inset-bottom)); padding-bottom: var(--barra-baixo); } /* Descendo a página, a barra sai junto com a do topo */ .com-barra-baixo.barras-escondidas { --barra-baixo: 0px; } .barra-baixo { font-size: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; height: calc(58px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--papel, #fdfaf3); border-top: 1px solid var(--filete, #ddd0b3); box-shadow: 0 -4px 16px rgba(60, 40, 20, 0.06); transition: transform 0.25s ease; } .barras-escondidas .barra-baixo { transform: translateY(100%); } .barra-baixo a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--tinta-suave, #6b6056); text-decoration: none; font-family: var(--livro, Georgia, serif); font-size: 0.82em; letter-spacing: 0.02em; -webkit-tap-highlight-color: transparent; } .barra-baixo svg { width: 23px; height: 23px; } .barra-baixo a.active { color: var(--rubrica, #9e2a2b); } .barra-baixo a.active span { font-weight: 600; } .barra-baixo a:active { background: var(--mesa, #f1eadb); } /* O botão de voltar ao topo sobe para não ficar em cima das abas */ .com-barra-baixo #to-top { bottom: calc(var(--barra-baixo) + 14px); transition: opacity 0.25s ease, bottom 0.25s ease; } } /* Convite para instalar no celular (página inicial) */ .convite-instalar { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 26px; padding: 14px 16px; background: var(--papel, #fdfaf3); border: 1px solid var(--filete, #ddd0b3); border-left: 3px solid var(--ouro, #a88537); border-radius: 2px; } .convite-instalar img { border-radius: 10px; flex: none; } .convite-instalar strong { font-family: var(--livro, Georgia, serif); font-size: 1.15rem; font-weight: 600; color: var(--tinta, #2c2621); } .convite-instalar p { margin: 4px 0 10px; font-family: var(--livro, Georgia, serif); font-size: 1.02rem; line-height: 1.5; color: var(--tinta-suave, #6b6056); } .convite-acoes { display: flex; gap: 14px; align-items: center; } .convite-acoes .btn { padding: 7px 18px; font-size: 1rem; } /* "Agora não" tinha 21px de altura — abaixo do mínimo para acertar com o dedo. O texto continua do mesmo tamanho; só a área de toque cresceu. */ .convite-fechar { background: none; border: 0; padding: 6px 10px; min-height: 32px; font-family: var(--livro, Georgia, serif); font-size: 1rem; color: var(--tinta-suave, #6b6056); text-decoration: underline; cursor: pointer; } /* Resumo que abre o capítulo (tradução Figueiredo) */ .oracao .biblia-resumo { max-width: 600px; margin: 6px auto 12px; font-family: var(--livro); font-style: italic; font-size: 1.02rem; line-height: 1.55; color: var(--tinta-suave); } /* ========================================================== Pinturas (mistérios do terço, ofícios e orações) ========================================================== */ .oracao .arte { margin: 14px auto 22px; text-align: center; } .oracao .arte img { display: block; margin: 0 auto; max-width: 100%; max-height: min(56vh, 460px); width: auto; height: auto; border: 1px solid var(--filete); outline: 4px solid var(--papel); box-shadow: 0 0 0 5px var(--filete), 0 10px 26px rgba(60, 40, 20, 0.18); background: var(--mesa); } .oracao .arte figcaption { max-width: 34rem; margin: 14px auto 0; font-family: var(--livro); font-size: 0.95rem; line-height: 1.45; color: var(--tinta-suave); } .oracao .arte figcaption cite { font-style: italic; color: var(--tinta); } .oracao .arte figcaption a { color: var(--tinta-suave); text-decoration: underline; text-decoration-thickness: 1px; } .oracao .arte-misericordia img { max-height: min(60vh, 520px); } /* Miniatura no alto do cartão da devoção */ /* A pintura do cartão no formato dela, inteira: nada de corte. */ .oracao .devo-cartao.com-arte { padding-top: 0; overflow: hidden; } .oracao .devo-miniatura { display: block; width: 100%; max-height: 300px; object-fit: contain; object-position: center; margin: 0 auto 18px; background: var(--mesa); border-bottom: 1px solid var(--filete); } @media (max-width: 600px) { .oracao .arte img { max-height: 48vh; } .oracao .devo-miniatura { max-height: 220px; margin-bottom: 14px; } } .oracao .hero .link-galeria { margin-top: 10px; font-style: normal; } .oracao .hero .link-galeria a { color: var(--rubrica); font-variant: small-caps; letter-spacing: 0.05em; } /* ========================================================== Galeria ========================================================== */ .oracao .galeria-page .container { max-width: 1180px; } .oracao .galeria-previa { max-width: 640px; margin: 0 auto 20px; padding: 10px 14px; border-left: 3px solid var(--rubrica); background: #f7e9e5; font-family: var(--livro); font-style: italic; color: var(--rubrica); text-align: center; } .oracao .galeria-filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 24px; } .oracao .galeria-filtro { background: transparent; border: 1px solid var(--filete); border-radius: 2px; padding: 6px 14px; font-family: var(--livro); font-variant: small-caps; letter-spacing: 0.05em; font-size: 1.05rem; color: var(--tinta-suave); cursor: pointer; } .oracao .galeria-filtro span { font-variant: normal; font-size: 0.85em; opacity: 0.7; margin-left: 2px; } .oracao .galeria-filtro:hover { border-color: var(--rubrica); color: var(--rubrica); } .oracao .galeria-filtro.active { background: var(--tinta); border-color: var(--tinta); color: var(--papel); } /* Colunas: cada imagem no seu formato, sem corte */ .oracao .galeria-grade { columns: 4 240px; column-gap: 16px; } .oracao .galeria-item { break-inside: avoid; margin: 0 0 16px; background: var(--papel); border: 1px solid var(--filete); box-shadow: 0 1px 2px rgba(60, 40, 20, 0.06), 0 8px 20px rgba(60, 40, 20, 0.06); } .oracao .galeria-item button { display: block; width: 100%; padding: 0; border: 0; background: var(--mesa); cursor: zoom-in; } .oracao .galeria-item img { display: block; width: 100%; height: auto; transition: opacity 0.2s ease; } .oracao .galeria-item button:hover img { opacity: 0.9; } .oracao .galeria-item figcaption { padding: 9px 12px 11px; font-family: var(--livro); font-size: 1.02rem; line-height: 1.35; color: var(--tinta); } .oracao .galeria-item figcaption span { display: block; font-size: 0.85rem; font-variant: small-caps; letter-spacing: 0.05em; color: var(--ouro); margin-top: 2px; } /* O visor: a imagem grande sobre fundo escuro */ .visor { position: fixed; inset: 0; z-index: 600; display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; background: rgba(24, 19, 15, 0.985); padding: 16px 8px calc(16px + env(safe-area-inset-bottom)); } .visor[hidden] { display: none; } .visor-figura { margin: 0; grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-width: 0; } .visor-figura img { max-width: 100%; max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); object-fit: contain; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } .visor-figura figcaption { max-width: 720px; margin-top: 14px; text-align: center; font-family: 'EB Garamond', Georgia, serif; color: #efe6d4; } .visor-figura figcaption strong { display: block; font-size: 1.3rem; font-weight: 400; color: #fdfaf3; } .visor-descricao { display: block; font-size: 1.02rem; margin-top: 4px; color: #d9ccb4; } .visor-credito { display: block; font-size: 0.9rem; font-style: italic; margin-top: 6px; color: #b9ab93; } .visor-credito a { color: #d8c089; } .visor-original { display: inline-block; margin-top: 10px; padding: 5px 14px; border: 1px solid rgba(216, 192, 137, 0.6); color: #d8c089; font-variant: small-caps; letter-spacing: 0.05em; text-decoration: none; } .visor-original:hover { background: rgba(216, 192, 137, 0.12); } .visor-seta, .visor-fechar { background: none; border: 0; color: #efe6d4; cursor: pointer; font-family: 'EB Garamond', Georgia, serif; line-height: 1; } .visor-seta { font-size: 3.2rem; height: 100%; opacity: 0.75; } .visor-seta:hover { opacity: 1; } .visor-seta.anterior { grid-column: 1; } .visor-seta.proxima { grid-column: 3; } .visor-fechar { position: absolute; top: 8px; right: 14px; font-size: 2.6rem; z-index: 2; } @media (max-width: 600px) { .oracao .galeria-grade { columns: 2 150px; column-gap: 10px; } .oracao .galeria-item { margin-bottom: 10px; } .oracao .galeria-item figcaption { font-size: 0.95rem; padding: 7px 9px 9px; } .visor { grid-template-columns: 0 1fr 0; padding: 50px 6px calc(12px + env(safe-area-inset-bottom)); } .visor-seta { display: none; } .visor-figura img { max-height: calc(100dvh - 230px); } } /* ---------- ouvir a oração ---------- */ /* Discreto: um ícone pequeno no canto, que não disputa com o texto. */ .oracao .voz { display: flex; justify-content: flex-end; gap: 2px; margin: 0 0 2px; } .oracao .voz-botao { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--tinta-suave); opacity: 0.45; cursor: pointer; transition: opacity 0.2s ease, color 0.2s ease; } .oracao .voz-botao:hover, .oracao .voz-botao:focus-visible { opacity: 1; color: var(--rubrica); } /* Falando, o ícone fica aceso: é o sinal de que a voz está ligada. */ .oracao .voz[data-voz="falando"] .voz-botao, .oracao .voz[data-voz="pausado"] .voz-botao { opacity: 0.8; color: var(--rubrica); } .oracao .voz-botao svg { width: 17px; height: 17px; } /* o display do botão não pode vencer o hidden */ .oracao .voz-botao[hidden] { display: none; } /* O trecho que está sendo lido fica marcado, para quem acompanha com os olhos não se perder. */ .oracao .lendo { background: linear-gradient(transparent 12%, rgba(168, 133, 55, 0.16) 12%); border-radius: 3px; } /* Remissões da edição impressa: "Veja também Mt 12,46-50". Abrem o trecho, em letra miúda, sem atrapalhar a leitura do texto sagrado. */ .oracao .vers-paralelos { margin: 22px 0 6px; font-family: var(--liturgica); font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-suave); opacity: 0.85; } .oracao .vers-paralelos a { color: var(--rubrica); text-decoration: none; border-bottom: 1px solid var(--filete); } .oracao .vers-paralelos a:hover { border-bottom-color: var(--ouro); } /* "Continuar de onde parei": o segundo botão fica discreto, para o principal continuar sendo um só. */ .oracao .terco-comecar.secundario, .oracao .devo-passo.secundario { background: transparent; color: var(--tinta-suave); border: 1px solid var(--filete); } .oracao .terco-retomar, .oracao .devo-retomar { margin: 8px 0 18px; font-family: var(--livro); font-size: 0.88rem; font-style: italic; color: var(--tinta-suave); text-align: center; } /* Link dentro de um aviso ("Continuar de lá"). */ .oracao .devo-link { background: none; border: none; padding: 0; font: inherit; color: var(--rubrica); text-decoration: underline; cursor: pointer; } /* ---------- instalado como aplicativo ---------- */ /* Com viewport-fit=cover a página vai até as bordas do aparelho, então o topo precisa desviar do recorte da câmera (iPhone) e das laterais quando o celular está deitado. A barra de baixo já desvia do risco do iPhone. */ .oracao .navbar { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } body.app-instalado { /* Puxar a página para baixo não "descola" o app do fundo. */ overscroll-behavior-y: contain; } /* Dentro do aplicativo não faz sentido convidar a instalar. */ body.app-instalado .convite-instalar { display: none; } /* Sem internet: a tarja discreta avisa, e o que está guardado continua. */ .sem-rede { position: fixed; left: 0; right: 0; bottom: var(--barra-baixo, 0px); z-index: 60; padding: 7px 14px calc(7px + env(safe-area-inset-bottom)); background: var(--tinta); color: var(--papel); font-family: var(--liturgica); font-size: 0.8rem; letter-spacing: 0.06em; text-align: center; } /* Falha ao abrir uma oração: o motivo aparece, em letra miúda, e dá para tentar de novo sem recarregar a página. */ .oracao .devo-falha { text-align: center; padding: 30px 16px; } .oracao .devo-detalhe { margin-top: 14px; font-family: var(--livro); font-size: 0.85rem; color: var(--tinta-suave); word-break: break-word; } /* Lista da página "sem internet". */ .oracao .offline-lista { margin: 0 0 18px; padding-left: 20px; } .oracao .offline-lista li { font-family: var(--livro); font-size: 1.04rem; line-height: 1.8; color: var(--tinta); } .oracao .offline-lista a { color: var(--rubrica); } /* ---------- o que rezar hoje, no alto da página inicial ---------- */ .oracao .hoje-bloco { margin: 38px auto 10px; } /* O nome do dia no lugar de um rótulo qualquer: quarta-feira da 25ª semana, São Pio de Pietrelcina. A bolinha leva a cor litúrgica. */ .oracao .hoje-dia { margin: 0 0 16px; text-align: center; font-family: var(--livro); font-size: 1.02rem; font-style: italic; color: var(--tinta-suave); } .oracao .hoje-dia .dia-cor { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--liturgica); vertical-align: 0.06em; } .oracao .hoje-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; } .oracao .hoje-cartao { display: block; padding: 18px 18px 16px; border: 1px solid var(--filete); border-radius: 4px; background: var(--papel); color: var(--tinta); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; } .oracao .hoje-cartao:hover { border-color: var(--ouro); transform: translateY(-2px); } .oracao .hoje-cartao svg { width: 26px; height: 26px; color: var(--rubrica); margin-bottom: 8px; } .oracao .hoje-rotulo { display: block; font-family: var(--liturgica); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 3px; } .oracao .hoje-cartao strong { display: block; font-family: var(--livro); font-size: 1.22rem; line-height: 1.25; font-weight: 600; } .oracao .hoje-detalhe { display: block; margin-top: 5px; font-family: var(--livro); font-size: 0.9rem; font-style: italic; color: var(--tinta-suave); } @media (max-width: 700px) { .oracao .hoje-bloco { margin-top: 26px; } .oracao .hoje-cartoes { grid-template-columns: 1fr 1fr; gap: 10px; } .oracao .hoje-cartao { padding: 14px 13px 12px; } .oracao .hoje-cartao strong { font-size: 1.05rem; } .oracao .hoje-cartao svg { width: 22px; height: 22px; } .oracao .hoje-detalhe { display: none; } } /* ---------- busca do site ---------- */ .oracao .busca-caixa { display: flex; gap: 10px; max-width: 560px; margin: 0 auto 26px; } .oracao .busca-caixa input { flex: 1; padding: 11px 14px; border: 1px solid var(--filete); border-radius: 3px; background: var(--papel); color: var(--tinta); font-family: var(--livro); font-size: 1.05rem; } .oracao .busca-caixa input:focus { outline: none; border-color: var(--ouro); } .oracao .busca-grupo { margin-bottom: 26px; } .oracao .busca-grupo h2 { margin: 0 0 10px; font-family: var(--liturgica); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rubrica); } .oracao .busca-grupo h2 span { color: var(--tinta-suave); letter-spacing: 0.04em; text-transform: none; } .oracao .busca-item { display: block; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--filete); border-radius: 3px; background: var(--papel); color: var(--tinta); text-decoration: none; } .oracao .busca-item:hover { border-color: var(--ouro); } .oracao .busca-item strong { display: block; font-family: var(--livro); font-size: 1.12rem; } .oracao .busca-item span { display: block; margin-top: 3px; font-family: var(--livro); font-size: 0.92rem; color: var(--tinta-suave); } /* ========================================================== Modo noite — para rezar Completas com a luz apagada. Não é um tema novo: é o mesmo livro visto à luz de vela. O papel vira couro escuro, a tinta vira creme, e a rubrica continua vermelha, só que a do tijolo queimado, que não fere o olho no escuro. O ouro fica. Só liga quem pede: nunca segue o modo escuro do sistema sozinho, para quem gosta do papel claro não ser surpreendido. ========================================================== */ html[data-tema="noite"] { --color-primary: #e9dfc9; --color-secondary: #c9a227; --color-accent: #221c16; --color-dark: #15120e; --color-light: #17130f; --color-surface: #1f1a14; --color-rubric: #d1786a; --color-text: #e9dfc9; --color-muted: #a2957e; --color-border: #3a3129; color-scheme: dark; } html[data-tema="noite"] body.oracao { --tinta: #e9dfc9; --tinta-suave: #a2957e; --rubrica: #d1786a; --papel: #1f1a14; --mesa: #17130f; --filete: #3a3129; --ouro: #c9a227; } /* A capa e as pinturas ficam um pouco mais calmas à noite. */ html[data-tema="noite"] .hero-capa::after { background: rgba(10, 8, 6, 0.55); } html[data-tema="noite"] .oracao .arte img, html[data-tema="noite"] .card img, html[data-tema="noite"] .oracao .devo-miniatura { filter: brightness(0.86) saturate(0.9); } /* Letras claras sobre fundo escuro pedem um traço um pouco mais leve. */ html[data-tema="noite"] body.oracao { -webkit-font-smoothing: antialiased; } /* O botão da lua, ao lado do A+ e do A−. */ .tamanho-letra .botao-noite { font-family: inherit; } .tamanho-letra .botao-noite svg { width: 1em; height: 1em; vertical-align: -0.12em; } /* No modo noite, os campos de escrever não podem ficar brancos com letra creme — some o que se digita. O painel fixa o fundo em #fff nas suas próprias regras, então estas precisam ter mais peso que as de lá. */ html[data-tema="noite"] body.oracao input, html[data-tema="noite"] body.oracao select, html[data-tema="noite"] body.oracao textarea, html[data-tema="noite"] .painel input, html[data-tema="noite"] .painel select, html[data-tema="noite"] .painel textarea, html[data-tema="noite"] .painel .field input, html[data-tema="noite"] .painel .field select, html[data-tema="noite"] .painel .field textarea { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } html[data-tema="noite"] body.oracao ::placeholder { color: var(--color-muted); opacity: 1; } /* Caixinhas de marcar e escolhas seguem a mesma tinta. */ html[data-tema="noite"] body.oracao input[type="checkbox"], html[data-tema="noite"] body.oracao input[type="radio"] { accent-color: var(--color-secondary); } /* O editor de matérias tem barra de ferramentas e miolo com fundo próprio. */ html[data-tema="noite"] .painel .editor-barra, html[data-tema="noite"] .painel .editor-corpo, html[data-tema="noite"] .painel .admin-card, html[data-tema="noite"] .painel .msg { background: var(--color-surface); color: var(--color-text); } /* O painel tem vários fundos brancos escritos à mão (barra lateral, cartões, botões, janelas). No modo noite todos viram o papel escuro. */ html[data-tema="noite"] .painel .admin-nav, html[data-tema="noite"] .painel .admin-card, html[data-tema="noite"] .painel .toolbar button, html[data-tema="noite"] .painel .btn-ghost, html[data-tema="noite"] .painel .btn-del, html[data-tema="noite"] .painel .modal-box, html[data-tema="noite"] .painel .gal-item, html[data-tema="noite"] .painel .agendar-campo input { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); } html[data-tema="noite"] .painel .btn-del { color: #e08b84; border-color: #5a3a35; } html[data-tema="noite"] .painel .admin-nav button.active { background: var(--color-secondary); color: #17130f; } html[data-tema="noite"] .painel .admin-nav button:hover { background: var(--color-accent); } html[data-tema="noite"] .painel .modal-box { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); } /* Botões e destaques que, no claro, são letra branca sobre tinta escura. No escuro a tinta vira creme, e branco sobre creme não se lê: aqui a letra passa a ser escura, como acontece num papel claro. */ html[data-tema="noite"] .btn, html[data-tema="noite"] body.oracao .btn, html[data-tema="noite"] .terco-passo.principal, html[data-tema="noite"] .devo-passo.principal, html[data-tema="noite"] .terco-passo.principal:hover, html[data-tema="noite"] .devo-passo.principal:hover, html[data-tema="noite"] .hours-nav .btn { color: #17130f; } /* A regra acima vale para botão preenchido: fundo creme pede letra escura. O secundário é só contorno, e herdava a mesma letra escura — "Começar do início" ficava tinta escura sobre página escura, ilegível. Estas vêm depois e são mais específicas, e é só assim que devem vencer: pôr um :not(.secundario) na regra de cima resolveria aqui e quebraria o botão da capa da home, que depende de vencer aquela por especificidade. */ html[data-tema="noite"] .terco-comecar.secundario, html[data-tema="noite"] body.oracao .btn.secundario, html[data-tema="noite"] .devo-passo.secundario { background: transparent; color: var(--tinta); border-color: var(--filete); } html[data-tema="noite"] .terco-comecar.secundario:hover, html[data-tema="noite"] body.oracao .btn.secundario:hover, html[data-tema="noite"] .devo-passo.secundario:hover { background: transparent; color: var(--ouro); border-color: var(--ouro); } /* O nome do santo escurecia ao passar o dedo — e sumia no escuro. */ html[data-tema="noite"] .saint-day-link:hover .saint-name { color: var(--color-secondary); } /* O rodapé é escuro nos dois modos: à noite o nome não pode virar papel escuro sobre fundo escuro. */ html[data-tema="noite"] .oracao .footer-logo { color: var(--tinta); } /* O botão da capa tem fundo de papel — que à noite é escuro. Ali a letra continua clara, ao contrário dos outros botões. */ html[data-tema="noite"] .oracao .hero-capa .btn { color: var(--tinta); } html[data-tema="noite"] .oracao .hero-capa .btn:hover { color: #17130f; } /* A tarja da cor litúrgica ("Branco", "Verde") fica com a letra clara e o fundo só como um filete, para se ler no escuro. */ html[data-tema="noite"] .liturgy-color { color: var(--color-text); background: transparent; border: 1px solid var(--color-border); } html[data-tema="noite"] .liturgy-color::before { background: var(--lit-color, var(--color-secondary)); } /* O versículo destacado tinha um amarelo claro fixo: no escuro, a letra creme sumia dentro dele. À noite o destaque vira um brilho discreto. */ html[data-tema="noite"] .oracao .biblia-texto .vers.destaque { background: rgba(201, 162, 39, 0.14); box-shadow: inset 3px 0 0 var(--ouro); } /* O mesmo com o aviso da galeria em pré-visualização. */ html[data-tema="noite"] .oracao .galeria-previa { background: rgba(209, 120, 106, 0.12); } /* ========================================================== Milagres eucarísticos ========================================================== */ .oracao .euc-pagina { max-width: 920px; } /* ---------- índice ---------- */ /* Os três filtros formam um painel só, com a coluna dos rótulos alinhada: antes cada linha era um flex solto e "O que houve" quebrava em duas, empurrando os botões para fora do prumo das outras. */ .oracao .euc-filtros { margin: 0 auto 22px; max-width: 860px; padding: 14px 18px 12px; background: var(--mesa); border: 1px solid var(--filete); border-radius: 4px; } .oracao .euc-filtro-linha { display: grid; grid-template-columns: 104px 1fr; align-items: start; gap: 8px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--filete); } .oracao .euc-filtro-linha:last-of-type { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .oracao .euc-filtro-grupo { display: flex; flex-wrap: wrap; gap: 6px; } .oracao .euc-filtro-rotulo { padding-top: 7px; font-family: var(--liturgica); font-size: 0.74rem; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); } .oracao .euc-filtro { padding: 5px 12px; border: 1px solid var(--filete); border-radius: 999px; background: var(--papel); color: var(--tinta-suave); font-family: var(--livro); font-size: 0.92rem; cursor: pointer; } .oracao .euc-filtro span { color: var(--ouro); font-size: 0.82rem; } .oracao .euc-filtro:hover { border-color: var(--ouro); } .oracao .euc-filtro.active { background: var(--tinta); border-color: var(--tinta); color: var(--papel); } .oracao .euc-filtro.active span { color: var(--ouro); } /* Dentro do painel, no rodapé: acompanha o que os filtros deixaram à vista. */ .oracao .euc-contagem { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--filete); text-align: right; font-family: var(--liturgica); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); } /* ---------- o mapa dos casos ---------- */ /* Mapa de livro, não de aplicativo: o mar é o papel da página, a terra é a mesa, o contorno é o filete, e o ponto é a rubrica — as mesmas cores dos cartões logo abaixo. Vira sozinho no modo noite, porque tudo aqui sai dos tokens do tema. */ .oracao .euc-mapa { margin: 0 auto 22px; max-width: 860px; } /* O enquadramento sai dos casos, e com um do México e outro da Argentina no mesmo quadro o mapa fica alto. O teto impede que ele empurre os cartões para fora da tela; o SVG encolhe inteiro e se centraliza, sem deformar. */ .oracao .euc-mapa svg { display: block; width: 100%; height: auto; max-height: min(58vh, 460px); background: var(--papel); border: 1px solid var(--filete); border-radius: 4px; } .oracao .euc-terra { fill: var(--mesa); stroke: var(--filete); stroke-width: 0.18; stroke-linejoin: round; } .oracao .euc-marca { cursor: pointer; } .oracao .euc-marca-ponto { fill: var(--rubrica); transition: r 0.15s ease; } /* O halo é o alvo do dedo: invisível, mas grande o bastante para acertar num ponto de poucos pixels. */ .oracao .euc-marca-halo { fill: transparent; } .oracao .euc-marca:hover .euc-marca-ponto, .oracao .euc-marca:focus .euc-marca-ponto { fill: var(--ouro); } .oracao .euc-marca:focus { outline: none; } .oracao .euc-marca:focus .euc-marca-halo { fill: color-mix(in srgb, var(--ouro) 28%, transparent); } .oracao .euc-marca[hidden] { display: none; } .oracao .euc-mapa figcaption { margin-top: 8px; text-align: center; font-family: var(--livro); font-size: 0.86rem; font-style: italic; color: var(--tinta-suave); } .oracao .euc-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .oracao .euc-cartao { display: flex; flex-direction: column; border: 1px solid var(--filete); border-radius: 4px; background: var(--papel); color: var(--tinta); text-decoration: none; overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease; } .oracao .euc-cartao:hover { border-color: var(--ouro); transform: translateY(-2px); } .oracao .euc-cartao[hidden] { display: none; } /* Retrato e paisagem vinham de fontes diferentes e, encaixadas inteiras numa altura fixa, cada foto sobrava de um jeito: a grade ficava um remendo. Todas ganham o mesmo recorte 4:3 e preenchem o quadro. */ .oracao .euc-cartao img, .oracao .euc-sem-foto { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; background: var(--mesa); border-bottom: 1px solid var(--filete); } /* O cartão cresce com o vizinho mais alto da fileira; a linha do ano desce para o pé, e assim elas ficam no mesmo nível em toda a fileira. */ .oracao .euc-cartao-texto { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; } .oracao .euc-cartao-lugar { display: block; font-family: var(--liturgica); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rubrica); margin-bottom: 4px; } .oracao .euc-cartao strong { display: block; font-family: var(--livro); font-size: 1.12rem; line-height: 1.3; } .oracao .euc-cartao-ano { display: block; margin-top: auto; padding-top: 8px; font-family: var(--livro); font-size: 0.9rem; font-style: italic; color: var(--tinta-suave); } .oracao .euc-acutis { margin: 30px auto 0; max-width: 640px; text-align: center; font-family: var(--livro); font-style: italic; color: var(--tinta-suave); } .oracao .euc-acutis a { color: var(--rubrica); } /* ---------- um caso ---------- */ .oracao .euc-caso { max-width: 720px; margin: 0 auto; padding: 30px 32px 34px; background: var(--papel); border: 1px solid var(--filete); border-top: 3px double var(--ouro); border-radius: 3px; } .oracao .euc-cabeca { text-align: center; margin-bottom: 22px; } .oracao .euc-lugar { margin: 0 0 6px; font-family: var(--liturgica); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rubrica); } .oracao .euc-caso h1 { margin: 0; font-family: var(--livro); font-weight: 400; font-size: 2rem; line-height: 1.15; } .oracao .euc-resumo { margin: 10px auto 0; max-width: 540px; font-family: var(--livro); font-style: italic; font-size: 1.08rem; color: var(--tinta-suave); } .oracao .euc-figura { margin: 0 0 22px; } /* A foto documenta o caso, então não se corta nada dela. Mas a moldura agora acompanha a imagem em vez de ser uma faixa da largura toda: um retrato deixava duas tarjas vazias, uma de cada lado. */ .oracao .euc-figura img { display: block; margin: 0 auto; width: auto; max-width: 100%; max-height: 480px; background: var(--mesa); border: 1px solid var(--filete); } .oracao .euc-figura figcaption { margin-top: 6px; font-family: var(--livro); font-size: 0.86rem; font-style: italic; color: var(--tinta-suave); text-align: center; } .oracao .euc-ficha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px; margin: 0 0 24px; padding: 14px 18px; background: var(--mesa); border: 1px solid var(--filete); border-radius: 3px; } /* Onde/Quando/O que houve dividem a linha de cima; o endereço da relíquia, que é uma frase, ocupa a de baixo inteira em vez de deixar dois terços vazios ao lado. */ .oracao .euc-ficha-item.largo { grid-column: 1 / -1; } .oracao .euc-ficha dt { font-family: var(--liturgica); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); margin-bottom: 2px; } .oracao .euc-ficha dd { margin: 0; font-family: var(--livro); font-size: 1rem; line-height: 1.4; } .oracao .euc-texto p, .oracao .euc-reconhecimento p { font-family: var(--livro); font-size: 1.12rem; line-height: 1.75; margin: 0 0 16px; } .oracao .euc-texto h2, .oracao .euc-reconhecimento h2, .oracao .euc-fontes h2 { margin: 26px 0 10px; font-family: var(--liturgica); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rubrica); font-weight: 400; } .oracao .euc-texto blockquote { margin: 0 0 16px; padding-left: 16px; border-left: 3px solid var(--ouro); font-family: var(--livro); font-style: italic; color: var(--tinta-suave); } .oracao .euc-texto ul { margin: 0 0 16px; padding-left: 20px; } .oracao .euc-texto li { font-family: var(--livro); font-size: 1.08rem; line-height: 1.7; } .oracao .euc-reconhecimento { margin-top: 24px; padding: 14px 18px; background: var(--mesa); border-left: 3px solid var(--rubrica); border-radius: 0 3px 3px 0; } .oracao .euc-reconhecimento p { margin: 0; font-size: 1.04rem; } .oracao .euc-fontes ul { margin: 0 0 10px; padding-left: 20px; } .oracao .euc-fontes li { font-family: var(--livro); font-size: 1rem; line-height: 1.7; } .oracao .euc-fontes a { color: var(--rubrica); } .oracao .euc-nota { font-family: var(--livro); font-size: 0.88rem; font-style: italic; color: var(--tinta-suave); } .oracao .euc-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--filete); } .oracao .euc-nav a { font-family: var(--livro); color: var(--tinta-suave); text-decoration: none; font-size: 0.92rem; } .oracao .euc-nav a:hover { color: var(--rubrica); } .oracao .euc-nav .proximo { text-align: right; } .oracao .euc-nav a span { display: block; font-style: italic; color: var(--tinta); } .oracao .euc-indice { font-family: var(--liturgica); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; } @media (max-width: 700px) { .oracao .euc-caso { padding: 22px 18px 26px; } .oracao .euc-caso h1 { font-size: 1.6rem; } /* Sem largura para a coluna dos rótulos: cada um vira o título da sua fileira de botões. */ .oracao .euc-filtros { padding: 12px 14px 10px; } .oracao .euc-filtro-linha { grid-template-columns: 1fr; gap: 6px; } .oracao .euc-filtro-rotulo { padding-top: 0; } /* Numa coluna só: em duas, "O que houve" deixava meia linha vazia. */ .oracao .euc-ficha { grid-template-columns: 1fr; gap: 10px; padding: 12px 14px; } .oracao .euc-grade { grid-template-columns: 1fr 1fr; gap: 10px; } .oracao .euc-cartao-texto { padding: 10px 12px 12px; } .oracao .euc-cartao strong { font-size: 0.98rem; } }