/* ==========================================================================
Componentes emitidos pelo plugin Via Media Core (classes vm-*)
Referência visual: docs/superpowers/mockups/identidade-via-media.html
========================================================================== */
/* Botão */
.vm-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--vm-ink);
color: #fff !important;
border-radius: 999px;
padding: 12px 22px;
font: 600 14px/1 var(--vm-font-ui);
text-decoration: none;
transition: background .2s var(--vm-ease), transform .2s var(--vm-ease);
}
.vm-btn,
.vm-hero-acoes a.vm-btn {
text-decoration: none !important;
}
button.vm-btn {
border: 0;
cursor: pointer;
}
.vm-btn:hover {
background: var(--vm-amber-text);
transform: translateY(-1px);
}
/* Referência bíblica */
.vm-ref {
color: var(--vm-amber-text);
text-decoration-color: rgba(180, 83, 42, .35);
}
/* Navegação da série */
.vm-serie-nav {
margin: 2em 0;
padding: 20px 22px;
border: 1px solid var(--vm-line);
border-radius: var(--vm-radius);
background: var(--vm-bg);
font-family: var(--vm-font-ui);
}
.vm-serie-meta {
margin: 0 0 10px;
font-size: 12px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--vm-muted);
padding: 0;
}
.vm-serie-name {
color: var(--vm-amber-text);
}
.vm-serie-bar {
display: flex;
gap: 6px;
margin-bottom: 14px;
}
.vm-serie-seg {
flex: 1;
height: 4px;
border-radius: 4px;
background: var(--vm-line);
}
.vm-serie-seg.is-on {
background: var(--vm-amber);
}
.vm-serie-links {
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.vm-serie-links a {
color: var(--vm-ink);
text-decoration: none;
font-size: 15px;
max-width: 48%;
}
.vm-serie-next {
margin-left: auto;
text-align: right;
}
.vm-serie-dir {
display: block;
font-size: 12px;
color: var(--vm-muted);
}
.vm-serie-title {
font-family: var(--vm-font-title);
font-weight: 600;
}
.vm-serie-all {
display: inline-block;
margin-top: 12px;
font-size: 14px;
}
.vm-serie-indice {
list-style: none;
margin: 1.5em 0;
padding: 0;
counter-reset: none;
font-family: var(--vm-font-ui);
}
.vm-serie-indice li {
display: flex;
gap: 14px;
align-items: baseline;
padding: 14px 0;
border-top: 1px solid var(--vm-line);
}
.vm-serie-indice li:last-child {
border-bottom: 1px solid var(--vm-line);
}
.vm-serie-num {
font-weight: 600;
color: var(--vm-amber);
min-width: 1.5em;
}
.vm-serie-indice a {
color: var(--vm-ink);
text-decoration: none;
font-family: var(--vm-font-title);
font-weight: 600;
font-size: 18px;
}
.vm-serie-indice .is-current a {
color: var(--vm-amber-text);
}
/* Ficha do livro resenhado */
.vm-livro {
margin: 2em 0;
padding: 20px 22px;
border-left: 2px solid var(--vm-amber);
background: var(--vm-soft);
border-radius: 0 var(--vm-radius) var(--vm-radius) 0;
font-family: var(--vm-font-ui);
}
.vm-livro-label {
margin: 0;
padding: 0;
font-size: 12px;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--vm-muted);
}
.vm-livro-titulo {
margin: 4px 0 12px;
padding: 0;
font-family: var(--vm-font-title);
font-weight: 600;
font-size: 20px;
color: var(--vm-ink);
}
.vm-livro dl {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px 20px;
margin: 0;
}
.vm-livro dt {
font-size: 12px;
color: var(--vm-muted);
}
.vm-livro dd {
margin: 0;
font-size: 15px;
color: var(--vm-ink);
}
/* Sermão: vídeo 16:9, áudio e meta */
.vm-sermao-midia {
margin: 0 0 2em;
font-family: var(--vm-font-ui);
}
.vm-video {
aspect-ratio: 16 / 9;
border-radius: var(--vm-radius);
overflow: hidden;
background: var(--vm-ink);
}
.vm-video iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.vm-audio {
width: 100%;
accent-color: var(--vm-amber);
}
.vm-sermao-meta {
margin: 12px 0 0;
padding: 0;
font-size: 14px;
color: var(--vm-muted);
}
/* Material: download */
.vm-material-download {
margin: 1.5em 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 18px;
font-family: var(--vm-font-ui);
}
.vm-material-info {
margin: 0;
padding: 0;
font-size: 14px;
color: var(--vm-muted);
}
/* Pensadores */
.vm-pensadores {
font-family: var(--vm-font-ui);
font-size: 14px;
color: var(--vm-muted);
}
.vm-pensadores span {
font-weight: 600;
color: var(--vm-ink);
}
/* Selo do tempo litúrgico */
.vm-tempo {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0 6px 6px 0;
padding: 6px 12px;
border: 1px solid var(--vm-line);
border-radius: 999px;
font: 500 12px/1 var(--vm-font-ui);
color: var(--vm-ink);
text-decoration: none;
}
.vm-tempo-dot {
width: 8px;
height: 8px;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
/* Tempo litúrgico de hoje: [vm_tempo_atual] */
.vm-cor-branco {
box-shadow: inset 0 0 0 1px var(--vm-line), 0 0 0 1px rgba(0, 0, 0, .12);
}
.vm-tempo-faixa {
font: 500 13px/1.4 var(--vm-font-ui);
color: var(--vm-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vm-tempo-faixa a {
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 100%;
color: inherit;
text-decoration: none;
}
.vm-tempo-faixa a:hover {
color: var(--vm-ink);
}
.vm-tempo-card,
.vm-tempo-pagina {
font-family: var(--vm-font-ui);
color: var(--vm-text);
}
/* O Divi dá padding, margens e line-height próprios a ,
e listas do módulo de texto. */
/* :where() zera a especificidade, para as margens de cada classe abaixo valerem. */
:where(.vm-tempo-card, .vm-tempo-pagina) :where(p, h3) {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
line-height: 1.5;
}
.vm-tempo-card ul,
.vm-tempo-pagina ul {
padding-left: 0 !important;
list-style: none !important;
}
.vm-tempo-card li,
.vm-tempo-pagina li {
list-style: none !important;
}
.vm-tempo-card li::before,
.vm-tempo-pagina li::before,
.vm-tempo-card li::after,
.vm-tempo-pagina li::after {
content: none !important;
}
.vm-tempo-card {
padding: 28px 32px;
border: 1px solid var(--vm-line);
border-radius: 16px;
background: var(--vm-bg);
}
.vm-tempo-eyebrow {
margin-bottom: 10px !important;
font: 600 12px/1.4 var(--vm-font-ui);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--vm-amber-text);
padding-bottom: 8px !important;
}
.vm-tempo-nome {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding: 0 !important;
font: 600 28px/1.2 var(--vm-font-title);
color: var(--vm-ink);
}
.vm-tempo-nome .vm-tempo-dot {
width: 12px;
height: 12px;
flex: none;
}
.vm-tempo-nome + .vm-tempo-dia {
margin-top: 6px !important;
}
.vm-tempo-dia,
.vm-tempo-contagem {
font-size: 15px;
}
.vm-tempo-contagem {
margin-top: 10px !important;
}
.vm-tempo-dia {
color: var(--vm-ink);
font-weight: 500;
}
.vm-tempo-texto {
margin-top: 16px !important;
font: 17px/1.7 var(--vm-font-read);
}
.vm-tempo-avisos {
margin-top: 18px !important;
padding: 14px 18px;
border-left: 2px solid var(--vm-amber);
background: var(--vm-amber-soft);
border-radius: 0 var(--vm-radius) var(--vm-radius) 0;
font-size: 14px;
}
.vm-tempo-avisos-titulo {
font-weight: 600;
color: var(--vm-ink);
padding-bottom: 4px !important;
}
.vm-tempo-avisos ul {
margin: 0;
}
.vm-tempo-avisos li {
position: relative;
padding-left: 14px;
}
.vm-tempo-avisos li::before {
content: "·" !important;
position: absolute;
left: 2px;
color: var(--vm-amber-text);
font-weight: 700;
}
.vm-tempo-link {
margin-top: 18px !important;
font-size: 15px;
font-weight: 600;
}
.vm-tempo-link a {
color: var(--vm-amber-text);
text-decoration: none;
}
.vm-tempo-intro {
margin-top: 24px !important;
font: 18px/1.7 var(--vm-font-read);
}
.vm-tempo-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 24px 0 8px;
padding: 0;
list-style: none;
}
.vm-tempo-pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px;
border: 1px solid var(--vm-line);
border-radius: 999px;
font-size: 13px;
}
.vm-tempo-pill.is-current {
border-color: var(--vm-ink);
color: var(--vm-ink);
font-weight: 600;
}
.vm-tempo-lista-titulo {
margin-top: 40px;
font: 600 22px/1.3 var(--vm-font-title);
color: var(--vm-ink);
}
.vm-tempo-lista {
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.vm-tempo-lista li {
padding: 12px 0;
border-bottom: 1px solid var(--vm-line);
}
.vm-tempo-lista a {
color: var(--vm-ink);
font-weight: 500;
text-decoration: none;
}
.vm-tempo-data {
margin-left: 8px;
font-size: 13px;
color: var(--vm-muted);
}
@media (max-width: 600px) {
.vm-tempo-card {
padding: 22px 20px;
}
.vm-tempo-nome {
font-size: 24px;
}
}
/* Leituras do LCR (card e página do tempo litúrgico) */
.vm-leituras {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--vm-line);
}
.vm-leituras-titulo {
margin: 0 0 10px !important;
padding: 0 !important;
font: 600 12px/1.4 var(--vm-font-ui);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--vm-muted);
}
.vm-leituras-conjunto,
.vm-leituras-nota {
margin: 0 0 6px !important;
font-size: 14px;
line-height: 1.5;
color: var(--vm-muted);
}
.vm-leituras-data {
margin-top: 10px !important;
font: 600 14px/1.4 var(--vm-font-ui) !important;
color: var(--vm-ink);
}
.vm-leituras-lista {
margin: 6px 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
.vm-leitura {
display: flex;
gap: 12px;
padding: 4px 0;
font-size: 15px;
line-height: 1.5;
}
.vm-leitura-rotulo {
flex: none;
width: 128px;
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--vm-muted);
padding-top: 2px;
}
.vm-leituras .vm-ref {
color: var(--vm-amber-text);
text-decoration: none;
}
.vm-leituras .vm-ref:hover {
text-decoration: underline;
}
.vm-leituras-alt {
margin-top: 8px;
font-size: 14px;
}
.vm-leituras-alt summary {
cursor: pointer;
color: var(--vm-muted);
}
.vm-leituras-dia + .vm-leituras-dia {
margin-top: 8px;
padding-top: 8px;
border-top: 1px dashed var(--vm-line);
}
.vm-leituras-ausentes {
margin-top: 4px !important;
font-size: 14px;
color: var(--vm-muted);
}
.vm-leituras-creditos {
margin-top: 14px !important;
font-size: 12px !important;
line-height: 1.6 !important;
color: var(--vm-muted);
}
.vm-leituras-creditos a {
color: inherit;
text-decoration: underline;
}
@media (max-width: 600px) {
.vm-leitura {
flex-direction: column;
gap: 0;
}
.vm-leitura-rotulo {
width: auto;
}
}
/* ==========================================================================
Ícones litúrgicos (fonte Litúrgica, OFL) e o estilo "Lecionário":
aba colorida da estação, fio na cor do dia e um ícone para cada leitura.
A cor vem do LCR em --vm-tempo; o branco litúrgico aparece em dourado.
========================================================================== */
.vm-icone::before {
display: inline-block;
font: 500 1em/1 "Liturgica";
speak: never;
-webkit-font-smoothing: antialiased;
}
.vm-icone--advento::before { content: "a"; }
.vm-icone--natal::before { content: "b"; }
.vm-icone--epifania::before { content: "c"; }
.vm-icone--batismo::before { content: "d"; }
.vm-icone--transfiguracao::before { content: "e"; }
.vm-icone--quaresma::before { content: "f"; }
.vm-icone--semana-santa::before,
.vm-icone--ramos::before { content: "g"; }
.vm-icone--pascoa::before { content: "h"; }
.vm-icone--pentecostes::before { content: "j"; }
.vm-icone--trindade::before { content: "k"; }
.vm-icone--tempo-apos-pentecostes::before { content: "l"; }
.vm-icone--todos-os-santos::before { content: "n"; }
.vm-icone--cristo-rei::before { content: "o"; }
.vm-icone--primeira::before { content: "C"; }
.vm-icone--salmo::before { content: "E"; }
.vm-icone--evangelho::before { content: "I"; }
.vm-icone--segunda::before { content: "K"; }
/* Branco litúrgico: dourado na tela (contraste de 4:1 sobre o branco) */
.vm-cor-branco,
[data-cor="branco"] {
--vm-tempo: #9a7a32 !important;
}
.vm-estacao {
display: flex;
align-items: center;
gap: 18px;
}
.vm-estacao__aba {
flex: none;
display: grid;
place-items: center;
width: 64px;
height: 72px;
border-radius: 12px;
background: var(--vm-tempo, var(--vm-amber));
color: #fff;
font-size: 38px;
}
.vm-estacao__texto {
min-width: 0;
}
/* Com a aba, o ponto colorido do título sai (a faixa do topo continua com ele) */
.vm-estacao .vm-tempo-nome .vm-tempo-dot {
display: none;
}
/* Lecionário: fio vertical na cor do dia, um ícone por leitura */
.vm-leituras .vm-leituras-lista {
margin-top: 10px !important;
padding-left: 18px !important;
border-left: 2px solid var(--vm-tempo, var(--vm-amber));
}
.vm-leitura {
align-items: baseline;
padding: 7px 0;
}
.vm-leitura + .vm-leitura {
border-top: 1px solid var(--vm-line);
}
.vm-leitura .vm-icone {
flex: none;
width: 28px;
font-size: 24px;
color: var(--vm-tempo, var(--vm-amber));
transform: translateY(5px);
}
.vm-leitura-rotulo {
font-weight: 600;
}
/* Página do tempo: as oito estações em faixas, como no lecionário impresso */
.vm-tempo-pagina .vm-tempo-pills {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.vm-tempo-pagina .vm-tempo-pill {
align-items: stretch;
gap: 14px;
padding: 10px;
border-radius: 14px;
font-size: 14px;
line-height: 1.45;
}
.vm-tempo-pill .vm-estacao__aba {
width: 48px;
height: auto;
min-height: 56px;
font-size: 28px;
border-radius: 10px;
}
.vm-tempo-pill__texto {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
min-width: 0;
}
.vm-tempo-pill__texto strong {
font: 600 15px/1.3 var(--vm-font-title);
color: var(--vm-ink);
}
.vm-tempo-pill__desc {
color: var(--vm-muted);
font-size: 13px;
}
.vm-tempo-pagina .vm-tempo-pill.is-current {
border-color: var(--vm-tempo);
box-shadow: inset 0 0 0 1px var(--vm-tempo);
}
@media (max-width: 600px) {
.vm-leitura {
display: grid;
grid-template-columns: 28px 1fr;
column-gap: 10px;
}
.vm-leitura .vm-icone {
grid-row: span 2;
align-self: center;
transform: none;
}
.vm-estacao {
gap: 14px;
}
.vm-estacao__aba {
width: 52px;
height: 60px;
font-size: 30px;
}
}
/* ==========================================================================
Salmodia ([vm_salmodia]): gêneros em seções, lista de salmos (estilo list-2)
e janela "Ver" com os dados do salmo e do gênero. Cor do gênero em --vm-genero.
========================================================================== */
.vm-salmodia {
font-family: var(--vm-font-ui);
color: var(--vm-text);
}
.vm-salmodia :where(p, h2, h3, ul, ol, dl, dd) {
margin-top: 0 !important;
padding-bottom: 0 !important;
}
/* Filtros e busca escondem com o atributo hidden: vale mesmo sobre display do Divi ou do tema */
.vm-salmodia [hidden] {
display: none !important;
}
.vm-salmodia ul,
.vm-salmodia ol {
padding-left: 0 !important;
list-style: none !important;
}
.vm-salmodia li::before,
.vm-salmodia li::after {
content: none !important;
}
.vm-salmodia__intro {
margin-bottom: 28px !important;
font: 18px/1.7 var(--vm-font-read);
}
.vm-salmodia__ferramentas {
position: sticky;
top: 0;
z-index: 5;
margin: 0 -12px 24px;
padding: 12px;
background: rgba(255, 255, 255, .96);
border-bottom: 1px solid var(--vm-line);
}
.vm-salmodia__busca {
display: block;
margin-bottom: 12px;
}
.vm-salmodia__busca-rotulo {
display: block;
margin-bottom: 6px;
font: 600 12px/1.4 var(--vm-font-ui);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--vm-ink);
}
.vm-salmodia__busca input {
width: 100%;
padding: 11px 14px !important;
border: 1px solid #c9c6c1 !important;
border-radius: 999px !important;
background: #fff !important;
font: 15px/1.4 var(--vm-font-ui) !important;
color: var(--vm-ink) !important;
}
.vm-salmodia__filtros {
display: flex;
gap: 6px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: thin;
}
.vm-salmodia__filtro {
flex: none;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid var(--vm-line);
border-radius: 999px;
background: #fff;
color: var(--vm-text);
font: 500 13px/1.3 var(--vm-font-ui);
cursor: pointer;
}
.vm-salmodia__filtro:hover {
border-color: var(--vm-ink);
}
.vm-salmodia__filtro[aria-pressed="true"] {
border-color: var(--vm-genero, var(--vm-ink));
background: var(--vm-genero, var(--vm-ink));
color: #fff;
}
.vm-salmodia__filtro:focus-visible,
.vm-salmo__ver:focus-visible,
.vm-salmodia__aplicacoes summary:focus-visible {
outline: 2px solid var(--vm-amber-text);
outline-offset: 2px;
}
.vm-salmodia__ponto {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--vm-genero);
}
.vm-salmodia__filtro[aria-pressed="true"] .vm-salmodia__ponto {
background: #fff;
}
.vm-salmodia__n {
font-variant-numeric: tabular-nums;
font-weight: 400;
}
.vm-salmodia__contagem {
margin: 8px 0 0 !important;
font-size: 13px;
color: var(--vm-muted);
}
.vm-salmodia__genero {
margin-bottom: 40px;
}
.vm-salmodia__cabeca {
margin-bottom: 8px;
padding: 18px 20px;
border-left: 4px solid var(--vm-genero);
border-radius: 0 var(--vm-radius) var(--vm-radius) 0;
background: var(--vm-soft);
}
.vm-salmodia .vm-salmodia__titulo {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 12px;
margin-bottom: 6px !important;
font: 600 22px/1.25 var(--vm-font-title) !important;
color: var(--vm-ink) !important;
}
.vm-salmodia__total {
font: 500 13px/1.3 var(--vm-font-ui);
color: var(--vm-muted);
}
.vm-salmodia__criterio {
margin-bottom: 0 !important;
font-size: 15px;
line-height: 1.6;
}
.vm-salmodia__aplicacoes {
margin-top: 12px;
font-size: 14px;
}
.vm-salmodia__aplicacoes summary {
cursor: pointer;
font-weight: 600;
color: var(--vm-ink);
}
.vm-salmodia__aplicacoes dl {
margin: 10px 0 0 !important;
}
.vm-salmodia dt {
font-weight: 600;
color: var(--vm-ink);
}
.vm-salmodia dd {
margin: 2px 0 10px !important;
line-height: 1.6;
}
.vm-salmodia__rascunho {
display: inline-block;
margin-left: 6px;
padding: 1px 8px;
border-radius: 999px;
background: #fff3cd;
color: #7a4b00;
font: 600 11px/1.6 var(--vm-font-ui);
letter-spacing: .04em;
text-transform: uppercase;
}
/* Lista (estilo list-2): número, texto e o botão "Ver" */
.vm-salmo {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 4px;
border-bottom: 1px solid var(--vm-line);
}
.vm-salmo__n {
flex: none;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1.5px solid var(--vm-genero);
border-radius: 12px;
font: 600 16px/1 var(--vm-font-title);
font-variant-numeric: tabular-nums;
color: var(--vm-ink);
}
.vm-salmo__texto {
flex: 1;
min-width: 0;
}
.vm-salmodia .vm-salmo__titulo {
margin-bottom: 2px !important;
font: 500 15.5px/1.45 var(--vm-font-ui);
color: var(--vm-ink);
}
.vm-salmodia .vm-salmo__meta {
margin-bottom: 0 !important;
font-size: 13px;
line-height: 1.6;
color: var(--vm-muted);
}
.vm-salmodia__tag {
display: inline-block;
margin: 2px 4px 0 0;
padding: 1px 8px;
border-radius: 999px;
background: var(--vm-soft);
border: 1px solid var(--vm-line);
font-size: 12px;
color: var(--vm-text);
white-space: nowrap;
}
.vm-salmodia__tag--mista {
border-style: dashed;
}
.vm-salmo__ver {
flex: none;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border: 1px solid var(--vm-ink);
border-radius: 999px;
background: #fff;
color: var(--vm-ink);
font: 600 13px/1.2 var(--vm-font-ui);
cursor: pointer;
transition: background-color .2s var(--vm-ease), color .2s var(--vm-ease);
}
.vm-salmo__ver::after {
content: "→";
}
.vm-salmo__ver:hover {
background: var(--vm-ink);
color: #fff;
}
.vm-salmodia__vazio {
padding: 24px 0;
color: var(--vm-muted);
}
.vm-salmodia__secao {
margin-top: 56px;
padding-top: 28px;
border-top: 1px solid var(--vm-line);
}
.vm-salmodia__secao h2 {
margin-bottom: 10px !important;
font: 600 24px/1.25 var(--vm-font-title) !important;
color: var(--vm-ink) !important;
}
.vm-salmodia__secao h3 {
margin: 28px 0 10px !important;
font: 600 13px/1.4 var(--vm-font-ui) !important;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--vm-ink) !important;
}
.vm-salmodia__secao > p {
font-size: 15px;
line-height: 1.6;
}
.vm-salmodia__tabela {
overflow-x: auto;
margin: 12px 0;
}
.vm-salmodia__tabela table {
width: 100%;
min-width: 620px;
border-collapse: collapse;
font-size: 14px;
}
.vm-salmodia__tabela th,
.vm-salmodia__tabela td {
padding: 8px 10px;
border-bottom: 1px solid var(--vm-line);
text-align: left;
vertical-align: top;
line-height: 1.5 !important;
}
.vm-salmodia__tabela thead th {
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--vm-muted);
}
.vm-salmodia__tabela tbody th {
font-weight: 600;
color: var(--vm-ink);
}
.vm-salmodia .vm-ref {
color: var(--vm-amber-text);
}
.vm-salmodia__metodo {
margin: 0 !important;
}
/* Mesma escala dos parágrafos da seção (15 px), sem herdar o corpo grande do Divi */
.vm-salmodia__metodo dt {
margin: 16px 0 2px !important;
font: 600 15px/1.45 var(--vm-font-ui) !important;
color: var(--vm-ink) !important;
}
.vm-salmodia__metodo dd {
margin: 0 !important;
padding: 0 !important;
font-size: 15px !important;
line-height: 1.6 !important;
color: var(--vm-muted);
}
.vm-salmodia__fontes li {
margin-bottom: 10px;
font-size: 14px;
line-height: 1.55;
}
.vm-salmodia__fontes a {
color: var(--vm-amber-text);
}
.vm-salmodia__fonte-id {
display: inline-block;
min-width: 3.4em;
font-weight: 600;
color: var(--vm-ink);
}
.vm-salmodia__escopo {
display: block;
color: var(--vm-muted);
font-size: 13px;
}
.vm-salmodia__aviso {
margin-top: 24px !important;
padding: 8px 12px;
border-radius: 8px;
}
/* Janela "Ver" (mesmo padrão do mapa: popover nativo, Esc e clique fora fecham) */
.vm-salmodia__popup {
position: fixed;
inset: 0;
margin: auto;
width: min(920px, calc(100vw - 32px));
height: fit-content;
max-height: calc(100vh - 48px);
overflow: auto;
padding: 28px 32px 32px;
border: 1px solid var(--vm-line);
border-top: 6px solid var(--vm-genero, var(--vm-ink));
border-radius: 22px;
background: #fff;
color: var(--vm-text);
box-shadow: 0 30px 70px -24px rgba(17, 17, 17, .35), 0 2px 8px rgba(17, 17, 17, .06);
font: 400 14px/1.55 var(--vm-font-ui);
}
.vm-salmodia__popup .vm-mapa__fechar span {
font-size: 22px;
line-height: 1;
}
.vm-salmodia__popup::backdrop {
background: rgba(17, 17, 17, .32);
}
.vm-salmodia__popup:popover-open {
animation: vm-perfil-abre .22s var(--vm-ease);
}
.vm-salmodia__popup-topo {
position: relative;
padding: 0 48px 18px 0;
margin-bottom: 22px;
border-bottom: 1px solid var(--vm-line);
}
.vm-salmodia .vm-salmodia__popup-rotulo {
margin: 0 0 4px !important;
font: 600 12px/1.4 var(--vm-font-ui);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--vm-amber-text);
}
.vm-salmodia .vm-salmodia__popup-titulo {
margin: 0 !important;
font: 600 30px/1.2 var(--vm-font-title) !important;
color: var(--vm-ink) !important;
}
.vm-salmodia__popup-corpo {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 32px;
}
.vm-salmodia .vm-salmodia__sintese {
margin: 0 0 14px !important;
font: italic 400 17px/1.5 var(--vm-font-read) !important;
color: var(--vm-ink);
}
.vm-salmodia .vm-salmodia__estudo {
grid-column: 1 / -1;
justify-self: start;
padding: 10px 18px;
border-radius: 999px;
background: var(--vm-ink);
font: 600 14px/1.3 var(--vm-font-ui);
color: #fff !important;
text-decoration: none !important;
}
.vm-salmodia .vm-salmodia__estudo:hover,
.vm-salmodia .vm-salmodia__estudo:focus-visible {
background: var(--vm-amber-text);
}
.vm-salmodia .vm-salmodia__popup-sub {
margin: 0 0 12px !important;
font: 600 12px/1.4 var(--vm-font-ui) !important;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--vm-ink) !important;
}
.vm-salmodia__dados dt {
font-size: 12px;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--vm-muted);
font-weight: 600;
}
.vm-salmodia__dados dd {
margin: 2px 0 12px !important;
font-size: 15px;
color: var(--vm-ink);
}
@media (max-width: 720px) {
.vm-salmo {
gap: 12px;
}
.vm-salmo__n {
width: 38px;
height: 38px;
font-size: 14px;
}
.vm-salmo__ver {
padding: 7px 12px;
}
.vm-salmodia__popup {
padding: 22px 20px 24px;
}
.vm-salmodia__popup-corpo {
grid-template-columns: 1fr;
gap: 20px;
}
.vm-salmodia .vm-salmodia__popup-titulo {
font-size: 24px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.vm-salmodia__popup:popover-open {
animation: none;
}
}
/* Tempo de leitura */
.vm-reading-time {
font: 500 12px/1.4 var(--vm-font-ui);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--vm-muted);
}
@media (max-width: 600px) {
.vm-serie-links a {
max-width: 100%;
}
.vm-serie-next {
margin-left: 0;
text-align: left;
}
}
/* ==========================================================================
Newsletter ([vm_newsletter]): rodapé e seção "Receba os textos por e-mail"
========================================================================== */
.vm-newsletter {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 12px;
max-width: 560px;
font-family: var(--vm-font-ui);
}
.vm-newsletter p {
margin: 0;
padding: 0;
}
.vm-newsletter__campo {
display: flex;
flex: 1 1 200px;
flex-direction: column;
gap: 4px;
}
.vm-newsletter label {
font-size: 14px;
color: var(--vm-ink);
}
.vm-newsletter__opcional {
color: var(--vm-muted);
}
.vm-newsletter input[type="email"],
.vm-newsletter input[type="text"] {
box-sizing: border-box;
width: 100%;
height: 46px;
padding: 0 14px;
border: 1px solid #b9b5b0;
border-radius: 999px;
background: var(--vm-bg);
color: var(--vm-ink);
font: 400 16px/1 var(--vm-font-ui);
}
.vm-newsletter__aceite {
flex: 1 1 100%;
font-size: 14px;
line-height: 1.5;
}
.vm-newsletter__aceite label {
color: var(--vm-text);
}
.vm-newsletter__aceite input {
width: 18px;
height: 18px;
margin: 0 6px 0 0;
vertical-align: -3px;
accent-color: var(--vm-ink);
}
.vm-newsletter__aceite a {
color: var(--vm-amber-text);
}
.vm-newsletter__botao {
height: 46px;
padding: 0 24px;
border: 0;
border-radius: 999px;
background: var(--vm-ink);
color: #fff;
font: 600 15px/1 var(--vm-font-ui);
cursor: pointer;
transition: background .2s var(--vm-ease);
}
.vm-newsletter__botao:hover {
background: var(--vm-amber-text);
}
.vm-newsletter input:focus-visible,
.vm-newsletter__botao:focus-visible {
outline: 2px solid var(--vm-amber-text);
outline-offset: 2px;
}
.vm-newsletter__msg {
flex: 1 1 100%;
font-size: 14px;
color: var(--vm-ink);
}
.vm-newsletter__msg:empty {
display: none;
}
.vm-footer-news {
margin-bottom: 12px;
color: var(--vm-muted);
}
@media (max-width: 600px) {
.vm-newsletter__campo,
.vm-newsletter__enviar,
.vm-newsletter__botao {
flex-basis: 100%;
width: 100%;
}
}
/* ==========================================================================
Acessibilidade (tools/a11y.mjs): links sublinhados no meio do texto,
comentários com rótulo visível e contraste, botão da busca
========================================================================== */
.vm-ref,
.vm-footer-credit a,
.vm-newsletter__privacidade,
.vm-grupo-form__privacidade,
.vm-footer-legal a,
.entry-content p a,
.entry-content li a,
.et_pb_post_content p a,
.et_pb_post_content li a,
.et_pb_post .post-meta a {
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 2px;
}
.vm-leituras .vm-ref {
text-decoration-color: rgba(180, 83, 42, .45) !important;
}
#commentform label,
#commentform .comment-form-comment label {
display: block !important;
position: static !important;
width: auto !important;
height: auto !important;
clip: auto !important;
margin-bottom: 4px;
font: 500 14px/1.4 var(--vm-font-ui);
color: var(--vm-ink);
}
#commentform .comment-form-cookies-consent label {
display: inline !important;
margin-left: 6px;
font-weight: 400;
}
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea {
border: 1px solid #b9b5b0 !important;
background: var(--vm-bg) !important;
color: var(--vm-text) !important; /* O Divi escreve o rótulo dentro do campo; tom de texto, não de título. */
font-size: 16px !important;
}
#commentform ::placeholder {
color: var(--vm-muted);
}
.et_pb_searchsubmit {
background: var(--vm-ink) !important;
color: #fff !important;
border-color: var(--vm-ink) !important;
}
/* ==========================================================================
Menu principal ([vm_menu], inc/Frontend/Nav.php + assets/js/nav.js)
========================================================================== */
.vm-menu {
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 4px;
font: 500 14px/1 var(--vm-font-ui);
}
.vm-menu ul {
list-style: none !important;
margin: 0 !important;
padding: 0;
}
.vm-menu .vm-icon {
width: 20px;
height: 20px;
flex: none;
}
.vm-menu__lista {
position: relative; /* Os painéis se alinham à direita da lista: nunca passam da borda da tela. */
display: flex;
align-items: center;
gap: 2px;
}
.vm-menu__item {
padding: 0 !important;
}
.vm-menu__link,
.vm-menu__abrir {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 10px 14px;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--vm-text);
font: inherit;
line-height: 1;
text-decoration: none !important;
cursor: pointer;
transition: background-color .2s var(--vm-ease), color .2s var(--vm-ease);
}
.vm-menu__link:hover,
.vm-menu__item.is-open > .vm-menu__link,
.vm-menu__busca-botao[aria-expanded="true"] {
background: var(--vm-amber-soft);
color: var(--vm-ink);
}
.vm-menu__link[aria-current],
.vm-menu__item.is-current > .vm-menu__link {
color: var(--vm-ink);
font-weight: 600;
}
.vm-menu .vm-menu__seta {
width: 16px;
height: 16px;
transition: transform .3s var(--vm-ease);
}
.vm-menu__botao[aria-expanded="true"] .vm-menu__seta {
transform: rotate(180deg);
}
/* Painel do grupo (a faixa transparente no topo liga o botão ao painel para o mouse) */
.vm-menu__painel {
position: absolute;
top: 100%;
right: 0;
z-index: 1000;
padding-top: 10px;
visibility: hidden;
opacity: 0;
transform: translateY(-4px);
transition: opacity .18s var(--vm-ease), transform .18s var(--vm-ease), visibility 0s linear .18s;
}
.vm-menu__item.is-open > .vm-menu__painel,
.vm-menu:not(.is-js) .vm-menu__item--grupo:hover > .vm-menu__painel,
.vm-menu:not(.is-js) .vm-menu__item--grupo:focus-within > .vm-menu__painel {
visibility: visible;
opacity: 1;
transform: none;
transition-delay: 0s;
}
.vm-menu__sub {
display: grid;
gap: 2px;
min-width: 290px;
padding: 10px !important;
border: 1px solid var(--vm-line);
border-radius: 16px;
background: var(--vm-bg);
box-shadow: 0 18px 40px rgba(17, 17, 17, .10);
}
.vm-menu__sub--colunas {
grid-template-columns: repeat(2, minmax(250px, 1fr));
}
.vm-menu__sub li {
padding: 0 !important;
}
.vm-menu__subitem {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px;
border-radius: 12px;
color: var(--vm-ink) !important;
text-decoration: none !important;
transition: background-color .2s var(--vm-ease);
}
.vm-menu__subitem:hover,
.vm-menu__subitem:focus-visible {
background: var(--vm-soft);
}
.vm-menu__icone {
display: grid;
place-items: center;
flex: none;
width: 38px;
height: 38px;
border: 1px solid var(--vm-line);
border-radius: 10px;
background: var(--vm-bg);
color: var(--vm-ink);
transition: background-color .2s var(--vm-ease), color .2s var(--vm-ease), border-color .2s var(--vm-ease);
}
.vm-menu__subitem:hover .vm-menu__icone,
.vm-menu__subitem[aria-current] .vm-menu__icone {
border-color: transparent;
background: var(--vm-amber-soft);
color: var(--vm-amber-text);
}
.vm-menu__titulo {
display: block;
font: 600 14px/1.3 var(--vm-font-ui);
}
.vm-menu__desc {
display: block;
margin-top: 3px;
font: 400 13px/1.4 var(--vm-font-ui);
color: var(--vm-muted);
}
/* Busca */
.vm-menu__busca {
position: relative;
}
.vm-menu__busca-painel {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 1000;
display: flex;
gap: 8px;
width: min(360px, calc(100vw - 32px));
padding: 10px;
border: 1px solid var(--vm-line);
border-radius: 16px;
background: var(--vm-bg);
box-shadow: 0 18px 40px rgba(17, 17, 17, .10);
visibility: hidden;
opacity: 0;
transition: opacity .18s var(--vm-ease), visibility 0s linear .18s;
}
.vm-menu__busca-botao[aria-expanded="true"] + .vm-menu__busca-painel,
.vm-menu:not(.is-js) .vm-menu__busca:focus-within .vm-menu__busca-painel {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}
.vm-menu__busca-painel input[type="search"] {
flex: 1;
min-width: 0;
height: 42px;
padding: 0 14px;
border: 1px solid #b9b5b0;
border-radius: 999px;
background: var(--vm-bg);
color: var(--vm-ink);
font: 400 16px/1 var(--vm-font-ui);
}
.vm-menu__busca-enviar {
height: 42px;
padding: 0 18px;
border: 0;
border-radius: 999px;
background: var(--vm-ink);
color: #fff;
font: 600 14px/1 var(--vm-font-ui);
cursor: pointer;
}
.vm-menu__busca-enviar:hover {
background: var(--vm-amber-text);
}
.vm-menu__abrir {
display: none;
border: 1px solid var(--vm-line);
color: var(--vm-ink);
gap: 6px;
}
.vm-menu__icone-fechar,
.vm-menu.is-aberto .vm-menu__icone-abrir {
display: none;
}
.vm-menu.is-aberto .vm-menu__icone-fechar {
display: block;
}
.vm-menu :focus-visible {
outline: 2px solid var(--vm-amber-text);
outline-offset: 2px;
}
/* Celular e tablet: hambúrguer + sanfona */
@media (max-width: 980px) {
/* Os painéis se ancoram na linha do cabeçalho (largura do conteúdo), não no botão. */
.vm-header .et_pb_column,
.vm-header .et_pb_column .et_pb_text,
.vm-header .et_pb_column .et_pb_text_inner,
.vm-menu,
.vm-menu__busca {
position: static;
}
.vm-menu.is-js .vm-menu__abrir {
display: inline-flex;
}
.vm-menu.is-js .vm-menu__nav {
position: absolute;
top: calc(100% + 8px);
right: 0;
left: 0;
z-index: 1000;
display: none;
max-height: calc(100vh - 140px);
overflow-y: auto;
padding: 8px;
border: 1px solid var(--vm-line);
border-radius: 16px;
background: var(--vm-bg);
box-shadow: 0 18px 40px rgba(17, 17, 17, .12);
}
.vm-menu.is-js.is-aberto .vm-menu__nav {
display: block;
}
.vm-menu__lista {
flex-direction: column;
align-items: stretch;
}
.vm-menu__lista .vm-menu__link {
justify-content: space-between;
width: 100%;
padding: 14px;
border-radius: 12px;
font-size: 15px;
}
.vm-menu__painel {
position: static;
display: none;
padding: 0 0 6px;
visibility: visible;
opacity: 1;
transform: none;
transition: none;
}
.vm-menu__item.is-open > .vm-menu__painel,
.vm-menu:not(.is-js) .vm-menu__painel {
display: block;
}
.vm-menu__busca-painel {
top: calc(100% + 8px);
left: 0;
width: auto;
}
.vm-menu__sub,
.vm-menu__sub--colunas {
grid-template-columns: 1fr;
min-width: 0;
padding: 0 0 0 6px !important;
border: 0;
box-shadow: none;
}
}
@media (prefers-reduced-motion: reduce) {
.vm-menu *,
.vm-menu__painel,
.vm-menu__busca-painel {
transition: none !important;
}
}
/* ==========================================================================
Abertura: "Teologia não se faz sozinho" + mapa ([vm_mapa_dialogo], inc/Frontend/Mapa.php)
========================================================================== */
.vm-hero-acoes {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 8px;
}
.vm-btn--linha {
background: transparent;
color: var(--vm-ink) !important;
box-shadow: inset 0 0 0 1px var(--vm-line);
}
.vm-btn--linha:hover {
background: var(--vm-amber-soft);
box-shadow: none;
}
.vm-mapa {
margin: 0;
}
.vm-mapa__svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.vm-mapa__terra {
fill: none;
stroke: #cfcac4;
stroke-width: .42;
stroke-linecap: round;
}
.vm-mapa__arco {
fill: none;
stroke: var(--vm-amber);
stroke-width: .28;
stroke-linecap: round;
opacity: .85;
stroke-dasharray: 1;
stroke-dashoffset: 0;
animation: vm-mapa-arco 1.4s var(--vm-ease) calc(.4s + var(--i) * .12s) both;
}
.vm-mapa__ponto {
fill: var(--vm-amber-text);
}
.vm-mapa__halo {
fill: var(--vm-amber);
opacity: .18;
}
.vm-mapa__lugar {
animation: vm-mapa-lugar .5s var(--vm-ease) calc(var(--i) * .05s) both;
transform-box: fill-box;
transform-origin: center;
}
.vm-mapa__lugar--aqui .vm-mapa__ponto {
fill: var(--vm-ink);
}
.vm-mapa__lugar--aqui .vm-mapa__halo {
fill: none;
stroke: var(--vm-ink);
stroke-width: .3;
opacity: 1;
}
@keyframes vm-mapa-arco {
from { stroke-dashoffset: 1; }
to { stroke-dashoffset: 0; }
}
@keyframes vm-mapa-lugar {
from { opacity: 0; transform: scale(.4); }
to { opacity: 1; transform: none; }
}
/* Legenda: passar o mouse num ramo destaca o ponto no mapa */
.vm-mapa__legenda {
margin-top: 14px;
}
.vm-mapa__lista {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
font: 400 13px/1.4 var(--vm-font-ui);
color: var(--vm-muted);
}
.vm-mapa__item {
display: inline-flex;
gap: 6px;
align-items: center;
padding: 0 !important;
}
.vm-mapa__item strong {
color: var(--vm-ink);
font-weight: 600;
}
.vm-mapa__marca {
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--vm-amber-text);
}
.vm-mapa__item--aqui .vm-mapa__marca {
background: var(--vm-ink);
box-shadow: 0 0 0 2px var(--vm-bg), 0 0 0 3px var(--vm-ink);
}
.vm-mapa__subtitulo {
margin: 10px 0 0 !important;
padding: 0 !important;
font: 600 12px/1.4 var(--vm-font-ui);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--vm-muted);
}
.vm-mapa__lugar .vm-mapa__halo {
transition: opacity .2s var(--vm-ease);
}
.vm-mapa:has(.vm-mapa__item:hover) .vm-mapa__arco {
opacity: .35;
}
.vm-mapa__abrir {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 14px;
padding: 8px 16px;
border: 1px solid var(--vm-line);
border-radius: 999px;
background: #fff;
font: 500 13px/1.3 var(--vm-font-ui);
color: var(--vm-ink);
cursor: pointer;
transition: border-color .2s var(--vm-ease), color .2s var(--vm-ease);
}
.vm-mapa__abrir::after {
content: "";
width: 7px;
height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(-45deg);
}
.vm-mapa__abrir:hover {
border-color: var(--vm-amber-text);
color: var(--vm-amber-text);
}
.vm-mapa__abrir:focus-visible,
.vm-mapa__fechar:focus-visible,
.vm-mapa__link:focus-visible {
outline: 2px solid var(--vm-amber-text);
outline-offset: 2px;
}
/* Popup centralizado (atributo popover: abre sem JavaScript, Esc e clique fora fecham) */
.vm-mapa__popup {
position: fixed;
inset: 0;
margin: auto;
width: min(920px, calc(100vw - 32px));
height: fit-content;
max-height: calc(100vh - 48px);
overflow: auto;
padding: 28px 32px 32px;
border: 1px solid var(--vm-line);
border-radius: 22px;
background: #fff;
color: var(--vm-text);
box-shadow: 0 30px 70px -24px rgba(17, 17, 17, .35), 0 2px 8px rgba(17, 17, 17, .06);
font: 400 14px/1.55 var(--vm-font-ui);
}
.vm-mapa__popup::backdrop {
background: rgba(17, 17, 17, .32);
}
.vm-mapa__popup:popover-open {
animation: vm-perfil-abre .22s var(--vm-ease);
}
.vm-mapa__popup-topo {
position: relative;
padding: 0 48px 18px 0;
margin-bottom: 22px;
border-bottom: 1px solid var(--vm-line);
}
.vm-mapa__popup-rotulo {
margin: 0 0 4px !important;
padding: 0 !important;
font: 600 12px/1.4 var(--vm-font-ui);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--vm-amber-text);
}
.vm-mapa__popup-titulo {
margin: 0 !important;
padding: 0 !important;
font: 600 26px/1.2 var(--vm-font-title) !important;
letter-spacing: -.01em;
color: var(--vm-ink) !important;
}
.vm-mapa__fechar {
position: absolute;
top: 0;
right: 0;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: var(--vm-soft);
color: var(--vm-ink);
cursor: pointer;
}
.vm-mapa__fechar:hover {
background: var(--vm-line);
}
.vm-mapa__colunas {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 32px;
}
.vm-mapa__coluna .vm-mapa__subtitulo {
margin: 0 0 12px !important;
padding: 0 !important;
font: 600 12px/1.4 var(--vm-font-ui) !important;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--vm-ink) !important;
}
.vm-mapa__ramos,
.vm-mapa__dialogos {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.vm-mapa__ramos li,
.vm-mapa__dialogos li {
padding: 10px 0 !important;
border-top: 1px solid var(--vm-line);
color: var(--vm-text);
}
.vm-mapa__ramos li:first-child,
.vm-mapa__dialogos li:first-child {
border-top: 0;
padding-top: 0 !important;
}
.vm-mapa__ramos strong {
color: var(--vm-ink);
}
.vm-mapa__dialogo {
display: block;
color: var(--vm-ink);
}
.vm-mapa__link {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 8px;
padding: 5px 12px;
border-radius: 999px;
background: var(--vm-amber-soft);
color: #9c4623 !important;
font: 600 12.5px/1.3 var(--vm-font-ui);
text-decoration: none !important;
transition: background-color .2s var(--vm-ease), color .2s var(--vm-ease);
}
.vm-mapa__link:hover {
background: #9c4623;
color: #fff !important;
}
@media (max-width: 720px) {
.vm-mapa__popup {
padding: 22px 20px 24px;
}
.vm-mapa__colunas {
grid-template-columns: 1fr;
gap: 24px;
}
.vm-mapa__popup-titulo {
font-size: 22px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.vm-mapa__popup:popover-open {
animation: none;
}
}
@media (max-width: 980px) {
.vm-home-hero .et_pb_row {
flex-wrap: wrap;
}
.vm-home-hero .et_pb_column {
width: 100% !important;
margin-right: 0 !important;
}
.vm-home-hero .et_pb_column + .et_pb_column {
margin-top: 32px;
}
}
@media (max-width: 600px) {
.vm-home-hero h1 {
font-size: 40px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.vm-mapa__arco,
.vm-mapa__lugar {
animation: none;
}
}
.vm-mapa:has(.vm-mapa__item--canterbury:hover) .vm-mapa__lugar--canterbury .vm-mapa__halo,
.vm-mapa:has(.vm-mapa__item--roma:hover) .vm-mapa__lugar--roma .vm-mapa__halo,
.vm-mapa:has(.vm-mapa__item--istambul:hover) .vm-mapa__lugar--istambul .vm-mapa__halo,
.vm-mapa:has(.vm-mapa__item--adis-abeba:hover) .vm-mapa__lugar--adis-abeba .vm-mapa__halo,
.vm-mapa:has(.vm-mapa__item--kerala:hover) .vm-mapa__lugar--kerala .vm-mapa__halo,
.vm-mapa:has(.vm-mapa__item--genebra:hover) .vm-mapa__lugar--genebra .vm-mapa__halo,
.vm-mapa:has(.vm-mapa__item--wittenberg:hover) .vm-mapa__lugar--wittenberg .vm-mapa__halo,
.vm-mapa:has(.vm-mapa__item--torre-pellice:hover) .vm-mapa__lugar--torre-pellice .vm-mapa__halo,
.vm-mapa:has(.vm-mapa__item--seul:hover) .vm-mapa__lugar--seul .vm-mapa__halo,
.vm-mapa:has(.vm-mapa__item--azusa:hover) .vm-mapa__lugar--azusa .vm-mapa__halo,
.vm-mapa:has(.vm-mapa__item--brasil:hover) .vm-mapa__lugar--brasil .vm-mapa__halo {
opacity: .6;
}
/* ==========================================================================
Player dos sermões ([vm_sermao_midia] no plugin + assets/js/player.js)
========================================================================== */
.vm-player {
display: grid;
grid-template-columns: 76px 1fr;
gap: 18px;
align-items: center;
margin: 20px 0;
padding: 16px;
border: 1px solid var(--vm-line);
border-radius: 18px;
background: var(--vm-bg);
box-shadow: 0 1px 2px rgba(17, 17, 17, .04);
}
.vm-player__capa {
display: grid;
place-items: center;
width: 76px;
height: 76px;
border-radius: 14px;
background: var(--vm-amber-soft);
color: var(--vm-amber-text);
}
/* Ondas: paradas até o áudio tocar; somem para quem pede menos movimento */
.vm-player__ondas {
display: flex;
align-items: center;
gap: 4px;
height: 30px;
}
.vm-player__ondas i {
display: block;
width: 4px;
height: 100%;
border-radius: 2px;
background: currentColor;
transform: scaleY(.35);
animation: vm-onda 1.1s ease-in-out infinite alternate;
animation-play-state: paused;
}
.vm-player__ondas i:nth-child(2) { animation-delay: -.3s; transform: scaleY(.7); }
.vm-player__ondas i:nth-child(3) { animation-delay: -.6s; transform: scaleY(.5); }
.vm-player__ondas i:nth-child(4) { animation-delay: -.2s; transform: scaleY(.85); }
.vm-player__ondas i:nth-child(5) { animation-delay: -.8s; transform: scaleY(.45); }
.vm-player.is-playing .vm-player__ondas i {
animation-play-state: running;
}
@keyframes vm-onda {
from { transform: scaleY(.25); }
to { transform: scaleY(1); }
}
.vm-player__corpo {
min-width: 0;
}
.vm-player__corpo p {
margin: 0 !important;
padding: 0 !important;
}
.vm-player__rotulo {
font: 600 12px/1.4 var(--vm-font-ui);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--vm-amber-text);
}
.vm-player__titulo {
margin-top: 2px !important;
font: 600 17px/1.35 var(--vm-font-title);
color: var(--vm-ink);
}
.vm-player .vm-audio {
display: block;
width: 100%;
margin-top: 10px;
}
.vm-player.is-js .vm-audio {
display: none;
}
.vm-player__controles {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.vm-player__controles button {
display: inline-grid;
place-items: center;
flex: none;
min-width: 36px;
height: 36px;
padding: 0 8px;
border: 1px solid var(--vm-line);
border-radius: 999px;
background: var(--vm-bg);
color: var(--vm-ink);
font: 600 13px/1 var(--vm-font-ui);
cursor: pointer;
transition: background-color .2s var(--vm-ease), border-color .2s var(--vm-ease);
}
.vm-player__controles button:hover {
border-color: transparent;
background: var(--vm-amber-soft);
}
.vm-player__controles .vm-player__play {
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: var(--vm-ink);
color: #fff;
}
.vm-player__controles .vm-player__play:hover {
background: var(--vm-amber-text);
}
.vm-player__controles button:focus-visible,
.vm-player__barra:focus-visible,
.vm-player__link:focus-visible {
outline: 2px solid var(--vm-amber-text);
outline-offset: 2px;
}
.vm-player .vm-player__barra {
-webkit-appearance: none;
appearance: none;
flex: 1;
width: auto;
min-width: 60px;
height: 6px;
margin: 9px 0;
padding: 0;
border: 0;
border-radius: 999px;
background: linear-gradient(var(--vm-amber-text), var(--vm-amber-text)) 0 / var(--p, 0%) 100% no-repeat, var(--vm-line);
cursor: pointer;
}
.vm-player__barra::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border: 2px solid #fff;
border-radius: 50%;
background: var(--vm-amber-text);
box-shadow: 0 1px 3px rgba(17, 17, 17, 0.25);
}
.vm-player__barra::-moz-range-thumb {
width: 12px;
height: 12px;
border: 2px solid #fff;
border-radius: 50%;
background: var(--vm-amber-text);
box-shadow: 0 1px 3px rgba(17, 17, 17, 0.25);
}
.vm-player__barra::-moz-range-track {
background: transparent;
}
.vm-player__tempo {
flex: none;
font: 500 13px/1 var(--vm-font-ui);
color: var(--vm-muted);
font-variant-numeric: tabular-nums;
}
.vm-player__links {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
margin-top: 12px !important;
font: 500 13px/1.4 var(--vm-font-ui);
}
.vm-player__link {
color: var(--vm-amber-text) !important;
text-decoration: underline !important;
text-underline-offset: 2px;
}
.vm-player.is-erro .vm-player__controles::after {
content: "Não foi possível carregar o áudio. Tente baixar o arquivo.";
font: 400 13px/1.4 var(--vm-font-ui);
color: var(--vm-muted);
}
@media (max-width: 600px) {
.vm-player {
grid-template-columns: 1fr;
}
.vm-player__capa {
display: none;
}
.vm-player__controles {
flex-wrap: wrap;
}
.vm-player .vm-player__barra {
order: 9;
flex-basis: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.vm-player__ondas i {
animation: none;
}
}
/* ==========================================================================
Grupos de estudo ([vm_grupos], [vm_grupo_abrir]): tabela, perfis em popover e formulário
========================================================================== */
.vm-home-grupos .et_pb_column:first-child {
row-gap: 8px;
}
.vm-grupos-intro {
color: var(--vm-text);
}
.vm-grupos-lista {
margin: 16px 0 24px !important;
padding: 0 !important;
list-style: none !important;
}
.vm-grupos-lista li {
position: relative;
padding: 0 0 8px 26px !important;
color: var(--vm-text);
}
.vm-grupos-lista li::before {
content: "";
position: absolute;
left: 4px;
top: .55em;
width: 10px;
height: 6px;
border-left: 2px solid var(--vm-amber-text);
border-bottom: 2px solid var(--vm-amber-text);
transform: rotate(-45deg);
}
.vm-grupos {
background: #fff;
border: 1px solid var(--vm-line);
border-radius: 18px;
padding: 8px 8px 4px;
box-shadow: 0 24px 46px -34px rgba(17, 17, 17, .25);
}
.vm-grupos__msg:empty {
display: none;
}
.vm-grupos__msg {
margin: 8px 8px 4px !important;
padding: 10px 14px !important;
border-radius: 10px;
background: var(--vm-amber-soft);
color: var(--vm-ink);
font-size: 14px;
}
.vm-grupos__vazio,
.vm-grupos__nada {
padding: 20px 16px !important;
color: var(--vm-muted);
}
.vm-grupos__busca {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px 8px 4px !important;
font: 500 13px/1.4 var(--vm-font-ui);
color: var(--vm-text);
}
.vm-grupos__busca[hidden] {
display: none;
}
.vm-grupos__busca input {
width: 100%;
padding: 9px 14px;
border: 1px solid var(--vm-line);
border-radius: 999px;
font: 400 15px/1.4 var(--vm-font-ui);
color: var(--vm-ink);
background: var(--vm-soft);
}
.vm-grupos__tabela {
width: 100%;
margin: 0 !important;
border: 0 !important;
border-collapse: collapse;
font: 400 14px/1.45 var(--vm-font-ui);
}
.vm-grupos__tabela th,
.vm-grupos__tabela td {
padding: 10px 8px !important;
border: 0 !important;
border-top: 1px solid var(--vm-line) !important;
text-align: left;
vertical-align: middle;
color: var(--vm-text);
}
.vm-grupos__tabela thead th {
border-top: 0 !important;
font: 600 11px/1.4 var(--vm-font-ui);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--vm-muted);
}
.vm-grupos__tabela tbody th {
font-weight: 400;
}
.vm-grupos__tabela tr[hidden] {
display: none;
}
.vm-grupos__pessoa {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 4px 6px;
margin: -4px -6px;
border: 0;
border-radius: 12px;
background: none;
text-align: left;
font: inherit;
color: inherit;
cursor: pointer;
transition: background-color .2s var(--vm-ease);
}
.vm-grupos__pessoa:hover {
background: var(--vm-soft);
}
.vm-grupos__pessoa:hover .vm-grupos__nome {
color: var(--vm-amber-text);
text-decoration: underline;
text-underline-offset: 2px;
}
.vm-grupos__pessoa:focus-visible,
.vm-perfil__fechar:focus-visible,
.vm-perfil__participar summary:focus-visible,
.vm-grupos__busca input:focus-visible,
.vm-grupo-form input:focus-visible,
.vm-grupo-form textarea:focus-visible {
outline: 2px solid var(--vm-amber-text);
outline-offset: 2px;
}
.vm-grupos__avatar {
flex: none;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
object-fit: cover;
}
.vm-iniciais {
display: grid;
place-items: center;
background: var(--vm-amber-soft);
color: #9c4623; /* amber-text escurecido: 4,5:1 sobre o fundo claro */
font: 600 14px/1 var(--vm-font-ui);
letter-spacing: .02em;
}
.vm-grupos__quem {
display: flex;
flex-direction: column;
min-width: 0;
}
.vm-grupos__nome {
font-weight: 600;
color: var(--vm-ink);
}
.vm-grupos__papel,
.vm-grupos__freq,
.vm-grupos__celular {
font-size: 12.5px;
color: var(--vm-muted);
}
.vm-grupos__celular {
display: none;
}
.vm-grupos__celular--quando {
font-weight: 600;
color: var(--vm-ink);
}
.vm-grupos__quando {
display: block;
font-weight: 600;
color: var(--vm-ink);
white-space: nowrap;
}
.vm-grupos__freq {
display: block;
}
/* Perfil (popover): o card de referência, sem vidro nem brilho, com a paleta do site. */
.vm-perfil {
position: fixed;
inset: 0;
margin: auto; /* O reset do tema zera a margem: sem isto o popover cola no canto. */
height: fit-content;
width: min(400px, calc(100vw - 32px));
max-height: calc(100vh - 32px);
overflow: auto;
padding: 28px 24px 24px;
border: 1px solid var(--vm-line);
border-radius: 22px;
background: #fff;
color: var(--vm-text);
box-shadow: 0 30px 60px -20px rgba(17, 17, 17, .35), 0 2px 8px rgba(17, 17, 17, .06);
font: 400 14px/1.55 var(--vm-font-ui);
}
.vm-perfil::backdrop {
background: rgba(17, 17, 17, .28);
}
.vm-perfil:popover-open {
animation: vm-perfil-abre .22s var(--vm-ease);
}
@keyframes vm-perfil-abre {
from {
opacity: 0;
transform: translateY(8px) scale(.98);
}
}
.vm-perfil__fechar {
position: absolute;
top: 12px;
right: 12px;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border: 0;
border-radius: 50%;
background: var(--vm-soft);
color: var(--vm-ink);
cursor: pointer;
}
.vm-perfil__fechar:hover {
background: var(--vm-line);
}
.vm-perfil__topo {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.vm-perfil__foto {
width: 96px !important;
height: 96px !important;
margin-bottom: 12px;
border-radius: 50% !important;
object-fit: cover;
box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--vm-line);
}
.vm-perfil__foto.vm-iniciais {
font-size: 30px;
}
.vm-perfil__nome {
margin: 0 !important;
padding: 0 !important;
font: 600 22px/1.25 var(--vm-font-title);
color: var(--vm-ink);
}
.vm-perfil__papel {
margin: 4px 0 0 !important;
padding: 0 !important;
font-weight: 500;
color: var(--vm-amber-text);
}
.vm-perfil__bio {
margin: 14px 0 0 !important;
padding: 0 !important;
text-align: center;
}
.vm-perfil--novo .vm-perfil__nome,
.vm-perfil--novo .vm-perfil__bio {
text-align: left;
padding-right: 36px !important;
}
.vm-perfil__dados {
margin: 18px 0 0;
padding-top: 16px;
border-top: 1px solid var(--vm-line);
}
.vm-perfil__dados > div {
display: grid;
grid-template-columns: 110px 1fr;
gap: 8px;
padding: 4px 0;
}
.vm-perfil__dados dt {
font-weight: 600;
color: var(--vm-muted);
}
.vm-perfil__dados dd {
margin: 0;
color: var(--vm-ink);
}
.vm-perfil__datas {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.vm-perfil__datas li {
padding: 2px 10px !important;
border-radius: 999px;
background: var(--vm-amber-soft);
color: #9c4623;
font-size: 12.5px;
font-weight: 600;
}
.vm-perfil__participar {
margin-top: 20px;
}
.vm-perfil__participar summary {
display: flex;
justify-content: center;
list-style: none;
cursor: pointer;
}
.vm-perfil__participar summary::-webkit-details-marker {
display: none;
}
.vm-perfil__participar[open] summary {
display: none;
}
/* Formulário de contato dos grupos */
.vm-grupo-form {
margin-top: 12px;
}
.vm-grupo-form p {
padding: 0 !important;
}
.vm-grupo-form__campo {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 10px !important;
}
.vm-grupo-form label {
font-weight: 500;
color: var(--vm-ink);
}
.vm-grupo-form__opcional {
font-weight: 400;
color: var(--vm-muted);
}
.vm-grupo-form input[type="text"],
.vm-grupo-form input[type="email"],
.vm-grupo-form textarea {
width: 100%;
padding: 9px 12px;
border: 1px solid #c9c5bf;
border-radius: 10px;
background: #fff;
font: 400 15px/1.4 var(--vm-font-ui);
color: var(--vm-ink);
}
.vm-grupo-form__aceite {
margin: 4px 0 12px !important;
font-size: 13px;
color: var(--vm-text);
}
.vm-grupo-form__aceite label {
font-weight: 400;
color: var(--vm-text);
}
.vm-grupo-form__botao {
width: 100%;
padding: 12px 20px;
border: 0;
border-radius: 999px;
background: var(--vm-ink);
color: #fff;
font: 600 15px/1.2 var(--vm-font-ui);
cursor: pointer;
}
.vm-grupo-form__botao:hover {
background: var(--vm-amber-text);
}
.vm-grupo-form__botao:focus-visible {
outline: 2px solid var(--vm-amber-text);
outline-offset: 3px;
}
/* Celular: uma coluna só; cidade e próxima reunião vão para baixo do nome. */
@media (max-width: 600px) {
.vm-grupos__col-cidade,
.vm-grupos__col-quando {
display: none;
}
.vm-grupos__celular {
display: block;
}
}
@media (prefers-reduced-motion: reduce) {
.vm-perfil:popover-open {
animation: none;
}
}
/* ==========================================================================
ABNT nos textos (plugin: [cita], [citacao], [nota], [referencia])
NBR 10520:2023 (citações) e NBR 6023:2018 (referências)
========================================================================== */
/* Citação longa: recuo de 4 cm, letra menor, espaço simples, sem aspas */
blockquote.vm-citacao-longa {
margin: 1.6em 0 1.6em 4cm !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
font-size: .9em !important;
line-height: 1.45 !important;
font-style: normal !important;
color: var(--vm-ink);
quotes: none;
}
blockquote.vm-citacao-longa::before,
blockquote.vm-citacao-longa::after {
content: none !important;
}
blockquote.vm-citacao-longa p {
margin: 0 !important;
padding: 0 !important;
}
.vm-abnt-nota {
line-height: 0;
font-size: .72em;
font-family: var(--vm-font-ui);
font-weight: 600;
}
.vm-abnt-nota a {
padding: 0 .15em;
color: var(--vm-amber-text) !important;
text-decoration: none !important;
}
.vm-abnt-nota a:focus-visible,
.vm-abnt-voltar:focus-visible {
outline: 2px solid var(--vm-amber-text);
outline-offset: 2px;
border-radius: 2px;
}
.vm-abnt {
margin-top: 2.4em;
padding-top: 1.4em;
border-top: 1px solid var(--vm-line);
}
.vm-abnt h2 {
margin: 0 0 .8em !important;
padding: 0 !important;
font: 600 13px/1.4 var(--vm-font-ui) !important;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--vm-ink) !important;
}
.vm-abnt-notas ol {
margin: 0 0 0 1.2em !important;
padding: 0 !important;
font-size: .88em;
line-height: 1.5;
}
.vm-abnt-notas li {
margin-bottom: .5em;
}
.vm-abnt-voltar {
color: var(--vm-amber-text) !important;
text-decoration: none !important;
}
/* Referências: alinhadas à esquerda, espaço simples, separadas por uma linha em branco */
.vm-abnt-ref {
margin: 0 0 1em !important;
padding: 0 !important;
text-align: left;
font-size: .9em;
line-height: 1.45;
overflow-wrap: anywhere;
}
.vm-abnt-citar {
padding: 1.2em 1.4em;
border: 1px solid var(--vm-line);
border-radius: var(--vm-radius);
background: var(--vm-soft);
}
.vm-abnt-citar p {
margin: 0 !important;
padding: 0 !important;
font-size: .9em;
line-height: 1.5;
overflow-wrap: anywhere;
}
.vm-abnt-citar .vm-abnt-citar__nota {
margin-top: .6em !important;
font: 400 12.5px/1.4 var(--vm-font-ui);
color: var(--vm-muted);
}
.vm-abnt-falta {
background: #fff3cd;
color: #7a4b00;
font: 600 .8em var(--vm-font-ui);
}
@media (max-width: 600px) {
blockquote.vm-citacao-longa {
margin-left: 1.5rem !important;
}
}
.vm-abnt-notas li:focus,
.vm-abnt-nota:focus {
outline: 2px solid var(--vm-amber-text);
outline-offset: 3px;
border-radius: 2px;
}
/* ==========================================================================
Quem escreveu: perfil no fim do texto (plugin, Authors\Profiles)
========================================================================== */
.vm-autor {
margin: 3em 0 0;
padding: 26px 28px 28px;
border: 1px solid var(--vm-line);
border-radius: var(--vm-radius);
background: var(--vm-soft);
}
.vm-autor .vm-autor__rotulo {
position: relative;
margin: 0 0 22px !important;
padding: 0 0 14px !important;
border-bottom: 1px solid var(--vm-line);
font: 600 11.5px/1.4 var(--vm-font-ui) !important;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--vm-muted) !important;
}
/* Fio com um trecho escuro, como uma linha de progresso */
.vm-autor__rotulo::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 88px;
height: 1px;
background: var(--vm-ink);
}
.vm-autor__corpo {
display: flex;
align-items: center;
gap: 20px;
}
.vm-autor__foto {
flex: none;
width: 68px;
height: 68px;
border-radius: 50%;
box-shadow: 0 0 0 4px var(--vm-soft), 0 0 0 5px var(--vm-amber);
overflow: hidden;
background: #ece9e4;
}
.vm-autor__foto img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.vm-autor__iniciais {
display: grid;
place-items: center;
width: 100%;
height: 100%;
font: 600 22px/1 var(--vm-font-title);
letter-spacing: .02em;
color: var(--vm-ink);
}
.vm-autor__texto {
min-width: 0;
padding-left: 20px;
border-left: 1px solid #d9d6d1;
}
.vm-autor .vm-autor__nome {
margin: 0 0 6px !important;
padding: 0 !important;
font: 600 19px/1.3 var(--vm-font-title) !important;
letter-spacing: -.01em;
color: var(--vm-ink) !important;
}
.vm-autor .vm-autor__linhas {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.vm-autor .vm-autor__linhas li {
position: relative;
margin: 0 !important;
padding: 0 0 0 14px !important;
font: 500 11.5px/1.9 var(--vm-font-ui) !important;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--vm-muted) !important;
list-style: none !important;
}
.vm-autor__linhas li::before {
content: "";
position: absolute;
left: 0;
top: .8em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--vm-amber);
}
@media (max-width: 480px) {
.vm-autor {
padding: 22px 20px 24px;
}
.vm-autor__corpo {
gap: 16px;
}
.vm-autor__foto {
width: 56px;
height: 56px;
}
.vm-autor__texto {
padding-left: 16px;
}
}
/* ==========================================================================
Imprimir ou salvar em PDF ([vm_imprimir]); a versão impressa fica em print.css
========================================================================== */
.vm-imprimir {
margin: 4px 0 0 !important;
padding: 0 !important;
}
.vm-imprimir[hidden],
.vm-imprimir__cabecalho {
display: none;
}
.vm-imprimir__botao {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid var(--vm-line);
border-radius: 999px;
background: #fff;
font: 500 13px/1.2 var(--vm-font-ui);
color: var(--vm-ink);
cursor: pointer;
transition: border-color .2s var(--vm-ease), color .2s var(--vm-ease);
}
.vm-imprimir__botao:hover {
border-color: var(--vm-amber-text);
color: var(--vm-amber-text);
}
.vm-imprimir__botao:focus-visible {
outline: 2px solid var(--vm-amber-text);
outline-offset: 2px;
}
/* ==========================================================================
Página do salmo (/salmos/N/, [vm_salmo]): cabeçalho curto, sumário lateral, texto em serifa
========================================================================== */
.vm-salmo-pag {
--vm-genero: var(--vm-amber-text);
color: var(--vm-text);
}
.vm-salmo-pag [hidden] {
display: none !important;
}
.vm-salmo-pag__cabeca {
max-width: var(--vm-read);
margin: 0 0 28px;
}
.vm-salmo-pag__rascunho {
display: inline-block;
margin: 0 0 16px !important;
padding: 4px 10px;
border: 1px dashed #8a5a12;
border-radius: 6px;
font: 500 12px/1.4 var(--vm-font-ui);
color: #6e470e;
}
.vm-salmo-pag__trilha {
margin: 0 0 10px !important;
padding: 0 !important;
font: 600 12px/1.4 var(--vm-font-ui) !important;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--vm-muted);
}
.vm-salmo-pag__trilha a {
color: var(--vm-amber-text);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.vm-salmo-pag .vm-salmo-pag__titulo {
margin: 0 0 8px !important;
padding: 0 !important;
font: 600 44px/1.1 var(--vm-font-title) !important;
letter-spacing: -.02em;
color: var(--vm-ink) !important;
}
.vm-salmo-pag__incipit {
display: block;
margin-top: 6px;
font: italic 400 24px/1.3 var(--vm-font-read);
letter-spacing: 0;
color: var(--vm-text);
}
.vm-salmo-pag__dados {
margin: 0 0 14px !important;
padding: 0 !important;
font: 400 14px/1.5 var(--vm-font-ui) !important;
color: var(--vm-muted);
}
.vm-salmo-pag__dados i {
font-family: var(--vm-font-read);
font-size: 15px;
}
.vm-salmo-pag__generos {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin: 0 0 22px !important;
padding: 0 !important;
}
.vm-salmo-pag__genero {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
border: 1px solid var(--vm-line);
border-radius: 999px;
font: 500 13px/1.3 var(--vm-font-ui);
color: var(--vm-ink) !important;
text-decoration: none !important;
}
.vm-salmo-pag__genero::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--vm-genero);
}
.vm-salmo-pag__genero:hover,
.vm-salmo-pag__genero:focus-visible {
border-color: var(--vm-genero);
}
.vm-salmo-pag__mista {
padding: 4px 10px;
border-radius: 999px;
background: var(--vm-soft);
font: 500 12px/1.3 var(--vm-font-ui);
color: var(--vm-muted);
}
.vm-salmo-pag__sintese {
margin: 0 !important;
padding: 2px 0 2px 18px !important;
border-left: 2px solid var(--vm-genero);
font: italic 400 21px/1.5 var(--vm-font-read) !important;
color: var(--vm-ink);
}
.vm-salmo-pag__par {
max-width: var(--vm-read);
margin: 0 0 28px !important;
padding: 10px 14px !important;
border-radius: 10px;
background: var(--vm-soft);
font: 400 14px/1.5 var(--vm-font-ui) !important;
color: var(--vm-text);
}
.vm-salmo-pag__par a {
color: var(--vm-amber-text);
font-weight: 500;
}
/* Grade: sumário à esquerda na tela larga, em cima (recolhido) no celular */
.vm-salmo-pag__grade {
display: grid;
gap: 8px;
}
@media (min-width: 1000px) {
.vm-salmo-pag__grade {
grid-template-columns: 220px minmax(0, var(--vm-read));
gap: 56px;
align-items: start;
}
.vm-salmo-pag__cabeca,
.vm-salmo-pag__par {
margin-left: 276px;
}
.vm-salmo-pag__sumario {
position: sticky;
top: 96px;
}
}
.vm-salmo-pag__sumario details {
border-bottom: 1px solid var(--vm-line);
}
.vm-salmo-pag__sumario summary {
padding: 12px 0;
cursor: pointer;
font: 600 12px/1.4 var(--vm-font-ui);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--vm-ink);
}
@media (min-width: 1000px) {
.vm-salmo-pag__sumario details {
border-bottom: 0;
}
.vm-salmo-pag__sumario summary {
padding-top: 0;
pointer-events: none;
list-style: none;
}
.vm-salmo-pag__sumario summary::-webkit-details-marker {
display: none;
}
}
.vm-salmo-pag__sumario ol {
margin: 0 0 12px !important;
padding: 0 !important;
list-style: none !important;
}
.vm-salmo-pag__sumario li {
margin: 0 !important;
padding: 0 !important;
}
.vm-salmo-pag__sumario li::before {
content: none !important;
}
.vm-salmo-pag__sumario a {
display: block;
padding: 6px 0 6px 12px;
border-left: 2px solid var(--vm-line);
font: 400 14px/1.4 var(--vm-font-ui);
color: var(--vm-text);
text-decoration: none;
}
.vm-salmo-pag__sumario a:hover,
.vm-salmo-pag__sumario a:focus-visible {
border-left-color: var(--vm-genero);
color: var(--vm-ink);
}
/* Texto: a mesma leitura dos artigos */
.vm-salmo-pag__texto {
font: 400 19px/1.75 var(--vm-font-read);
color: var(--vm-text);
}
.vm-salmo-pag__texto p,
.vm-salmo-pag__texto ul,
.vm-salmo-pag__texto ol {
margin: 0 0 1.1em !important;
padding-bottom: 0 !important;
}
.vm-salmo-pag__texto ul,
.vm-salmo-pag__texto ol {
padding-left: 1.2em !important;
}
.vm-salmo-pag__texto li {
margin-bottom: .4em;
}
.vm-salmo-pag__texto strong {
color: var(--vm-ink);
font-weight: 600;
}
.vm-salmo-pag__texto a {
color: var(--vm-amber-text);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.vm-salmo-pag__texto a.vm-salmo-link {
text-decoration-style: dotted;
}
.vm-salmo-pag__secao {
scroll-margin-top: 96px;
}
.vm-salmo-pag__texto h2 {
margin: 1.9em 0 .6em !important;
padding: 0 !important;
font: 600 26px/1.25 var(--vm-font-title) !important;
letter-spacing: -.01em;
color: var(--vm-ink) !important;
scroll-margin-top: 96px;
}
.vm-salmo-pag__secao:first-child h2 {
margin-top: 0 !important;
}
.vm-salmo-pag__texto h3 {
margin: 1.4em 0 .5em !important;
padding: 0 !important;
font: 600 15px/1.4 var(--vm-font-ui) !important;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--vm-ink) !important;
}
/* Seções recolhidas (notas sobre o hebraico, para aprofundar) */
.vm-salmo-pag__secao--recolhida details {
margin-top: 1.9em;
border-top: 1px solid var(--vm-line);
border-bottom: 1px solid var(--vm-line);
}
.vm-salmo-pag__secao--recolhida summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 0;
cursor: pointer;
list-style: none;
}
.vm-salmo-pag__secao--recolhida summary::-webkit-details-marker {
display: none;
}
.vm-salmo-pag__secao--recolhida summary::after {
content: "";
flex: none;
width: 18px;
height: 18px;
background: var(--vm-muted);
-webkit-mask: url(../icons/chevron-down.svg) center / contain no-repeat;
mask: url(../icons/chevron-down.svg) center / contain no-repeat;
transition: transform .2s var(--vm-ease);
}
.vm-salmo-pag__secao--recolhida details[open] summary::after {
transform: rotate(180deg);
}
.vm-salmo-pag__secao--recolhida summary h2 {
margin: 0 !important;
font-size: 20px !important;
}
.vm-salmo-pag__secao--recolhida details[open] {
padding-bottom: 8px;
}
/* Blocos de estatuto: discretos, com fio, ícone e rótulo próprios (não só a cor) */
.vm-estatuto {
--vm-marca: #5c5c5c;
--vm-icone: url(../icons/text-quote.svg);
margin: 1.4em 0 !important;
padding: 2px 0 2px 18px !important;
border-left: 2px solid var(--vm-marca);
font-size: 17px;
line-height: 1.7;
}
.vm-estatuto--hipotese {
--vm-marca: #8a5a12;
--vm-icone: url(../icons/flask-conical.svg);
}
.vm-estatuto--critica-textual {
--vm-marca: #4a5568;
--vm-icone: url(../icons/scroll-text.svg);
}
.vm-estatuto--canonica {
--vm-marca: #2f5da8;
--vm-icone: url(../icons/library-big.svg);
}
.vm-estatuto--recepcao-judaica {
--vm-marca: #6b3fa0;
--vm-icone: url(../icons/scroll.svg);
}
.vm-estatuto--recepcao-crista {
--vm-marca: #a3261b;
--vm-icone: url(../icons/cross.svg);
}
.vm-estatuto--aplicacao {
--vm-marca: #2e6b31;
--vm-icone: url(../icons/heart-handshake.svg);
}
.vm-salmo-pag__texto .vm-estatuto__rotulo {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 8px;
margin: 0 0 .35em !important;
font: 600 12px/1.4 var(--vm-font-ui) !important;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--vm-marca);
}
.vm-estatuto__icone {
width: 15px;
height: 15px;
background: var(--vm-marca);
-webkit-mask: var(--vm-icone) center / contain no-repeat;
mask: var(--vm-icone) center / contain no-repeat;
}
.vm-estatuto__grau {
padding: 1px 8px;
border: 1px solid currentColor;
border-radius: 999px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
.vm-salmo-pag__texto .vm-estatuto__ajuda {
margin-left: auto;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--vm-muted);
}
.vm-estatuto > :last-child {
margin-bottom: 0 !important;
}
/* Tabelas largas (Salmo 119) */
.vm-tabela-rolagem {
overflow-x: auto;
margin: 0 0 1.2em;
}
.vm-tabela-rolagem table {
min-width: 560px;
width: 100%;
border-collapse: collapse;
font: 400 14px/1.5 var(--vm-font-ui);
}
.vm-tabela-rolagem th,
.vm-tabela-rolagem td {
padding: 8px 10px;
border-bottom: 1px solid var(--vm-line);
text-align: left;
vertical-align: top;
}
/* Pendências: quem edita vê a marca; o visitante, um † com nota no fim */
.vm-a-conferir {
padding: 0 6px;
border-radius: 4px;
background: #fff4d6;
font: 500 13px/1.5 var(--vm-font-ui);
color: #6e470e;
}
.vm-em-verificacao {
position: relative;
top: -.45em;
margin-left: 1px;
font-size: .7em;
line-height: 0;
vertical-align: baseline;
color: var(--vm-muted);
cursor: help;
}
.vm-salmo-pag__nota-verificacao {
margin-top: 2em !important;
font: 400 13px/1.5 var(--vm-font-ui) !important;
color: var(--vm-muted);
}
/* Na liturgia: nota curta */
.vm-salmo-pag__liturgia {
margin-top: 2.4em;
padding: 20px 22px;
border-radius: var(--vm-radius);
background: var(--vm-soft);
}
.vm-salmo-pag__texto .vm-salmo-pag__liturgia h2 {
margin: 0 0 .4em !important;
font-size: 18px !important;
}
.vm-salmo-pag__liturgia p {
font-size: 16px;
line-height: 1.6;
}
.vm-salmo-pag__liturgia-nota {
margin: 0 !important;
font: 400 13px/1.5 var(--vm-font-ui) !important;
color: var(--vm-muted);
}
/* Anterior / todos / próximo */
.vm-salmo-pag__nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 16px;
align-items: center;
margin-top: 56px;
padding-top: 24px;
border-top: 1px solid var(--vm-line);
font: 500 14px/1.4 var(--vm-font-ui);
}
@media (min-width: 1000px) {
.vm-salmo-pag__nav {
margin-left: 276px;
max-width: var(--vm-read);
}
}
.vm-salmo-pag__nav a {
color: var(--vm-ink);
text-decoration: none;
}
.vm-salmo-pag__nav a:hover,
.vm-salmo-pag__nav a:focus-visible {
color: var(--vm-amber-text);
}
.vm-salmo-pag__nav-rotulo {
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--vm-muted);
}
.vm-salmo-pag__nav i {
display: block;
font: italic 400 14px/1.4 var(--vm-font-read);
color: var(--vm-text);
}
.vm-salmo-pag__nav-indice {
padding: 8px 14px;
border: 1px solid var(--vm-line);
border-radius: 999px;
font-size: 13px;
}
.vm-salmo-pag__nav-proximo {
text-align: right;
}
@media (max-width: 640px) {
.vm-salmo-pag .vm-salmo-pag__titulo {
font-size: 36px !important;
}
.vm-salmo-pag__incipit {
font-size: 20px;
}
.vm-salmo-pag__sintese {
font-size: 19px !important;
}
.vm-salmo-pag__texto {
font-size: 18px;
}
.vm-salmo-pag__nav {
grid-template-columns: 1fr 1fr;
}
.vm-salmo-pag__nav-indice {
grid-column: 1 / -1;
grid-row: 2;
justify-self: center;
}
.vm-salmo-pag__nav i {
display: none;
}
}
/* Como ler os estudos dos salmos (/salmodia/como-ler/) */
.vm-salmo-pag--guia .vm-salmo-pag__sintese {
margin-bottom: 24px !important;
}
.vm-salmo-pag__guia-sumario ol {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 36px !important;
padding: 0 !important;
list-style: none !important;
}
.vm-salmo-pag__guia-sumario li {
margin: 0 !important;
padding: 0 !important;
}
.vm-salmo-pag__guia-sumario li::before {
content: none !important;
}
.vm-salmo-pag__guia-sumario a {
display: inline-block;
padding: 6px 14px;
border: 1px solid var(--vm-line);
border-radius: 999px;
font: 500 13px/1.3 var(--vm-font-ui);
color: var(--vm-ink) !important;
text-decoration: none !important;
}
.vm-salmo-pag__guia-sumario a:hover,
.vm-salmo-pag__guia-sumario a:focus-visible {
border-color: var(--vm-amber);
}
.vm-salmo-pag--guia .vm-salmo-pag__secao {
scroll-margin-top: 96px;
}
.vm-salmo-pag__texto code {
padding: 1px 6px;
border-radius: 4px;
background: var(--vm-soft);
font-size: .85em;
color: var(--vm-ink);
}
.vm-salmo-pag__voltar {
margin-top: 48px !important;
font: 500 14px/1.4 var(--vm-font-ui) !important;
}
.vm-salmo-pag__voltar a {
color: var(--vm-amber-text);
}
/* ==========================================================================
Liturgia ([vm_liturgia], página /liturgia/)
========================================================================== */
.vm-liturgia {
color: var(--vm-text);
font: 400 18px/1.7 var(--vm-font-read);
}
.vm-liturgia p,
.vm-liturgia li {
font-size: inherit;
line-height: inherit;
}
.vm-liturgia strong {
color: var(--vm-ink);
}
.vm-liturgia__abertura p:first-child {
font-size: 20px;
color: var(--vm-ink);
}
.vm-liturgia__sumario ol {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 24px 0 8px !important;
padding: 0 !important;
list-style: none !important;
}
.vm-liturgia__sumario li {
margin: 0 !important;
padding: 0 !important;
}
.vm-liturgia__sumario li::before {
content: none !important;
}
.vm-liturgia__sumario a {
display: inline-block;
padding: 6px 14px;
border: 1px solid var(--vm-line);
border-radius: 999px;
font: 500 13px/1.3 var(--vm-font-ui);
color: var(--vm-ink) !important;
text-decoration: none !important;
}
.vm-liturgia__sumario a:hover,
.vm-liturgia__sumario a:focus-visible {
border-color: var(--vm-amber);
}
.vm-liturgia__secao,
.vm-liturgia__parte,
.vm-liturgia__elemento,
.vm-gesto {
scroll-margin-top: 96px;
}
.vm-liturgia__secao h2 {
margin: 64px 0 20px !important;
padding: 0 !important;
font: 600 30px/1.2 var(--vm-font-title) !important;
letter-spacing: -.01em;
color: var(--vm-ink) !important;
}
.vm-liturgia__parte h3,
.vm-gesto h3 {
margin: 0 0 8px !important;
padding: 0 !important;
font: 600 21px/1.3 var(--vm-font-title) !important;
color: var(--vm-ink) !important;
}
.vm-liturgia__parte {
margin-top: 36px;
}
.vm-liturgia__visao {
margin-bottom: 16px;
}
/* Elementos do culto: lista numerada de itens que se abrem */
.vm-liturgia__elementos {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
counter-reset: vm-elemento;
border-top: 1px solid var(--vm-line);
}
.vm-liturgia__elemento {
margin: 0 !important;
padding: 0 !important;
counter-increment: vm-elemento;
border-bottom: 1px solid var(--vm-line);
}
.vm-liturgia__elemento::before {
content: none !important;
}
.vm-liturgia__elemento summary,
.vm-gesto__mais summary {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 0;
cursor: pointer;
list-style: none;
font: 600 16px/1.4 var(--vm-font-ui);
color: var(--vm-ink);
}
.vm-liturgia__elemento summary::before {
content: counter(vm-elemento);
flex: none;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--vm-amber-soft);
color: var(--vm-amber-text);
font: 600 13px/28px var(--vm-font-ui);
text-align: center;
}
.vm-liturgia__elemento summary::-webkit-details-marker,
.vm-gesto__mais summary::-webkit-details-marker {
display: none;
}
.vm-liturgia__elemento summary::after,
.vm-gesto__mais summary::after {
content: "";
flex: none;
width: 18px;
height: 18px;
margin-left: auto;
background: var(--vm-muted);
-webkit-mask: url(../icons/chevron-down.svg) center / contain no-repeat;
mask: url(../icons/chevron-down.svg) center / contain no-repeat;
transition: transform .2s var(--vm-ease);
}
.vm-liturgia__elemento details[open] summary::after,
.vm-gesto__mais[open] summary::after {
transform: rotate(180deg);
}
.vm-liturgia__elemento summary:focus-visible,
.vm-gesto__mais summary:focus-visible {
outline: 2px solid var(--vm-amber-text);
outline-offset: 2px;
}
.vm-liturgia__elemento-corpo {
padding: 0 0 16px 40px;
font-size: 17px;
}
.vm-liturgia__elemento-corpo ul {
margin: 0 !important;
padding-left: 1.1em !important;
}
/* Gestos: cartões */
.vm-liturgia__gestos {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
gap: 20px;
margin-top: 28px;
align-items: start;
}
.vm-gesto {
padding: 22px 22px 6px;
border: 1px solid var(--vm-line);
border-radius: var(--vm-radius);
background: var(--vm-bg);
}
.vm-gesto__marcas {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 12px !important;
padding: 0 !important;
list-style: none !important;
}
.vm-gesto__marca {
margin: 0 !important;
padding: 2px 10px !important;
border-radius: 999px;
font: 600 12px/1.6 var(--vm-font-ui) !important;
letter-spacing: .02em;
color: var(--vm-marca-cor, var(--vm-ink));
background: var(--vm-marca-fundo, var(--vm-soft));
}
.vm-gesto__marca::before {
content: none !important;
}
.vm-gesto__marca--rubrica {
--vm-marca-cor: #8a2f12;
--vm-marca-fundo: #fbefe9;
}
.vm-gesto__marca--opcao {
--vm-marca-cor: #2f5da8;
--vm-marca-fundo: #eef3fb;
}
.vm-gesto__marca--norma-historica {
--vm-marca-cor: #4a5568;
--vm-marca-fundo: #f1f2f4;
}
.vm-gesto__marca--costume {
--vm-marca-cor: #6b3fa0;
--vm-marca-fundo: #f4effa;
}
.vm-gesto__marca--recomendacao-pastoral {
--vm-marca-cor: #2e6b31;
--vm-marca-fundo: #edf5ed;
}
.vm-gesto__resumo {
margin: 0 0 10px !important;
color: var(--vm-ink);
font-size: 17px !important;
}
.vm-gesto__estatuto {
margin: 0 0 6px !important;
font: 400 14px/1.55 var(--vm-font-ui) !important;
}
.vm-gesto__mais {
border-top: 1px solid var(--vm-line);
margin-top: 10px;
}
.vm-gesto__mais summary {
font-size: 14px;
color: var(--vm-amber-text);
}
.vm-gesto__corpo {
padding-bottom: 14px;
font-size: 16px;
}
.vm-gesto__corpo h4 {
margin: 16px 0 4px !important;
padding: 0 !important;
font: 600 12px/1.4 var(--vm-font-ui) !important;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--vm-muted) !important;
}
.vm-gesto__corpo h4:first-child {
margin-top: 4px !important;
}
.vm-gesto__corpo p,
.vm-gesto__corpo li {
font-size: 16px !important;
line-height: 1.6 !important;
}
.vm-gesto__corpo ul {
margin: 0 0 8px !important;
padding-left: 1.1em !important;
}
/* Palavras do clero e links finais */
.vm-liturgia__palavras,
.vm-liturgia__continuar {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.vm-liturgia__palavra,
.vm-liturgia__continuar li {
margin: 0 !important;
padding: 16px 0 !important;
border-bottom: 1px solid var(--vm-line);
}
.vm-liturgia__palavra::before,
.vm-liturgia__continuar li::before {
content: none !important;
}
.vm-liturgia__palavra > a,
.vm-liturgia__continuar a {
font: 600 19px/1.35 var(--vm-font-title);
color: var(--vm-ink) !important;
}
.vm-liturgia__palavra-meta {
margin: 4px 0 !important;
font: 400 13px/1.5 var(--vm-font-ui) !important;
color: var(--vm-muted);
}
.vm-liturgia__palavra-resumo {
margin: 0 !important;
font-size: 16px !important;
}
.vm-liturgia__continuar span {
display: block;
font: 400 14px/1.5 var(--vm-font-ui);
color: var(--vm-muted);
}
.vm-liturgia__vazio,
.vm-liturgia__mais {
font: 400 15px/1.6 var(--vm-font-ui) !important;
}
@media (max-width: 600px) {
.vm-liturgia {
font-size: 17px;
}
.vm-liturgia__secao h2 {
margin-top: 48px !important;
font-size: 25px !important;
}
.vm-liturgia__elemento-corpo {
padding-left: 0;
}
}
.vm-gesto__corpo p,
.vm-liturgia__visao p,
.vm-liturgia__elemento-corpo p {
margin: 0 !important;
padding-bottom: .6em !important;
}