/* * CM Núcleo — Conforto de leitura. * * Três blocos: (1) o widget (botão + painel), (2) a escala de leitura, * (3) o modo noturno desenhado sobre o Azul Profundo do manual. * * O estado mora no : a classe .cmn-conforto-pagina marca as páginas * devocionais, .cmn-noite liga o noturno, e as variáveis --cmn-escala e * --cmn-entrelinha vêm do script anti-piscada no . */ /* ========================================================================= 1 · WIDGET — botão "anel de ouro" (par do sanduíche) + painel ========================================================================= */ .cmn-conforto { position: absolute; top: 20px; right: 12px; z-index: 90; text-align: left; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Sem isto, o toque sobre o TEXTO dos botões (A−, A+, Compacto…) pode virar início de seleção em navegadores de toque — que engole o clique (visto na simulação de toque do Firefox; o interruptor do noturno só funcionava porque já tinha user-select:none). */ .cmn-conforto button, .cmn-conforto label { -webkit-user-select: none; user-select: none; touch-action: manipulation; } .cmn-conforto.cmn-conforto-fixo { position: fixed; top: 14px; right: 12px; } .cmn-conforto-botao { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #FCFAF5; border: 1px solid rgba(191, 137, 42, 0.75); /* Ouro Envelhecido */ color: var(--cmn-cor-1, #024F97); /* Azul Mariano */ box-shadow: 0 2px 8px rgba(36, 33, 29, 0.12); cursor: pointer; -webkit-appearance: none; appearance: none; } .cmn-conforto-botao:hover { color: var(--cmn-cor-2, #BF892A); } .cmn-conforto-aa { font-family: 'EB Garamond', Georgia, "Times New Roman", serif; font-weight: 500; /* Medium — o 600 ficava denso no círculo de 44px */ font-size: 1.1rem; line-height: 1; letter-spacing: .01em; } .cmn-conforto-painel { position: absolute; top: calc(100% + 10px); right: 0; width: 19rem; max-width: calc(100vw - 24px); background: #FCFAF5; color: #24211D; border: 1px solid #E7DFD2; border-radius: 14px; box-shadow: 0 10px 30px rgba(36, 33, 29, 0.16); padding: 1.1rem 1.2rem 1rem; } .cmn-conforto-titulo { display: flex; align-items: center; justify-content: space-between; margin: 0 0 .85rem; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(36, 33, 29, 0.62); } .cmn-conforto-titulo button { background: none; border: 0; color: inherit; cursor: pointer; padding: .2rem; font-size: .95rem; line-height: 1; } .cmn-conforto-grupo { margin: 0 0 1rem; } .cmn-conforto-rotulo { font-size: .86rem; font-weight: 600; margin: 0 0 .5rem; color: inherit; } .cmn-conforto-fonte { display: flex; align-items: center; gap: .4rem; } .cmn-conforto-fonte button { /* Largos, crescendo até as laterais — o percentual fica fixo ao centro (pedido do usuário, prancha 2026-08-03). */ flex: 1 1 3.6rem; min-width: 2.6rem; height: 2.2rem; /* Sem zerar o padding nativo do botão, o miolo estreita e o sinal quebra para baixo do "A" (visto no Firefox). */ padding: 0; white-space: nowrap; line-height: 1; border-radius: 8px; border: 1px solid #E7DFD2; background: transparent; color: inherit; font-family: Georgia, "Times New Roman", serif; font-weight: 600; font-size: .95rem; cursor: pointer; } .cmn-conforto-fonte button:hover { border-color: var(--cmn-cor-1, #024F97); } .cmn-conforto-fonte button:disabled { opacity: .35; cursor: default; } .cmn-conforto-valor { flex: 0 0 auto; min-width: 3.4rem; text-align: center; font-variant-numeric: tabular-nums; font-size: .86rem; font-weight: 600; color: rgba(36, 33, 29, 0.62); } .cmn-conforto-reset-mini { flex: 0 0 auto !important; width: 1.9rem !important; min-width: 0 !important; height: 1.9rem !important; border-radius: 50% !important; border-color: transparent !important; font-size: .95rem !important; } .cmn-conforto-reset-mini:hover { border-color: #E7DFD2 !important; } .cmn-conforto-interruptor { display: flex; align-items: center; /* Central e sem rótulo de estado: o polegar aciona o noturno no meio da janela, longe dos alvos A− e A+ das laterais. */ justify-content: center; padding: .1rem 0; cursor: pointer; user-select: none; } .cmn-conforto-interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; } .cmn-conforto-trilho { width: 3.4rem; height: 1.8rem; border-radius: 999px; background: #E7DFD2; position: relative; flex: 0 0 auto; transition: background .15s ease; } .cmn-conforto-bola { position: absolute; top: 2px; left: 2px; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #FCFAF5; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform .15s ease; display: flex; align-items: center; justify-content: center; color: rgba(36, 33, 29, 0.6); } .cmn-conforto-bola svg { width: .95rem; height: .95rem; } .cmn-conforto-interruptor input:checked + .cmn-conforto-trilho { background: var(--cmn-cor-1, #024F97); } .cmn-conforto-interruptor input:checked + .cmn-conforto-trilho .cmn-conforto-bola { transform: translateX(1.6rem); color: var(--cmn-cor-1, #024F97); } .cmn-conforto-interruptor input:focus-visible + .cmn-conforto-trilho { outline: 2px solid #A00302; outline-offset: 2px; } .cmn-conforto-segmentado { display: flex; border: 1px solid #E7DFD2; border-radius: 9px; overflow: hidden; } .cmn-conforto-segmentado button { flex: 1; background: transparent; border: 0; border-right: 1px solid #E7DFD2; color: inherit; font-family: inherit; font-size: .76rem; font-weight: 600; padding: .5rem .3rem; cursor: pointer; } .cmn-conforto-segmentado button:last-child { border-right: 0; } /* Numerais romanos na voz da marca. */ .cmn-conforto-romano button { font-family: 'EB Garamond', Georgia, "Times New Roman", serif; font-size: 1.05rem; font-weight: 500; letter-spacing: .05em; } .cmn-conforto-segmentado button[aria-pressed="true"] { background: var(--cmn-cor-1, #024F97); color: #FCFAF5; } .cmn-conforto-reset { display: flex; align-items: center; gap: .4rem; width: 100%; background: none; border: 0; border-top: 1px solid #E7DFD2; color: rgba(36, 33, 29, 0.62); font-family: inherit; font-size: .78rem; font-weight: 600; padding: .8rem 0 0; margin-top: .2rem; cursor: pointer; } .cmn-conforto-reset:hover { color: var(--cmn-cor-1, #024F97); } .cmn-conforto-nota { font-size: .72rem; color: rgba(36, 33, 29, 0.55); margin: .6rem 0 0; line-height: 1.4; } .cmn-conforto button:focus-visible { outline: 2px solid #A00302; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .cmn-conforto-trilho, .cmn-conforto-bola { transition: none; } } /* ========================================================================= 2 · ESCALA DE LEITURA — só o texto devocional, nunca a identidade ========================================================================= */ /* Sem condição de classe no html: esta folha só é carregada nas páginas devocionais, então o escopo já está garantido pelo enfileiramento. ARMADILHA RESOLVIDA: o módulo Tipografia estiliza "body, .entry-content, p" — tamanho e entrelinha aplicados DIRETO em cada

, por faixa de tela. Regra direta vence herança, então escalar só o contêiner não movia os parágrafos. Daí o segundo bloco: os filhos de texto herdam à força, com :is() (0,1,1) vencendo o "p" dinâmico (0,0,1) em qualquer ordem de carregamento — e herança única evita escala composta em listas aninhadas. */ /* Classe duplicada: vence o empate com a regra dinâmica da Tipografia ("body, .entry-content, p"), que é injetada depois desta folha. */ .entry-content.entry-content { font-size: calc(1em * var(--cmn-escala, 1)); line-height: var(--cmn-entrelinha, 1.8); } /* !important à altura: os parágrafos do conteúdo antigo carregam classes de preset do editor (has-medium-font-size…), que o WP core emite COM !important — só outro !important devolve o controle ao leitor. Nas páginas devocionais a uniformidade é desejável; presets de tamanho do editor deixam de valer aqui, de propósito. */ .entry-content :is(p, li, blockquote, figcaption, dd, dt, td, th) { font-size: inherit !important; line-height: inherit !important; } /* ========================================================================= 3 · MODO NOTURNO — desenhado sobre o Azul Profundo do manual Fundo base #0A1830 (um degrau abaixo do Azul Profundo #0F264A), texto marfim aquecido #E7DFC9 (nunca branco puro), títulos e links em ouro (o azul da marca não tem contraste sobre fundo azul), rubi #C6493F só como acento. O brasão NUNCA é recolorido — ganha apenas um halo dourado para não afundar no escuro. ========================================================================= */ html.cmn-noite body { background-color: #0A1830; color: #E7DFC9; } /* O módulo Cores pinta invólucros de conteúdo com o marfim da página — à noite eles ficam transparentes para o fundo profundo assumir. */ html.cmn-noite .site-content, html.cmn-noite .entry-content, html.cmn-noite .cm-contido { background-color: transparent; color: #E7DFC9; } /* Títulos do conteúdo em ouro. */ html.cmn-noite .entry-title, html.cmn-noite .entry-content h1, html.cmn-noite .entry-content h2, html.cmn-noite .entry-content h3, html.cmn-noite .entry-content h4, html.cmn-noite .entry-content h5, html.cmn-noite .entry-content h6 { color: #D9A94A; } /* Links: o módulo Cores emite a:not()×4 (e a gêmea :hover) — este espelho com a mesma cadeia + a classe do html sempre vence. */ html.cmn-noite a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not([class*="btn"]) { color: #E0B65A; } html.cmn-noite a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not([class*="btn"]):hover, html.cmn-noite a:not(.wp-element-button):not(.wp-block-button__link):not(.button):not([class*="btn"]):focus { color: #EDC77D; } /* Imagens do conteúdo levemente atenuadas. */ html.cmn-noite .entry-content img { filter: brightness(0.88); } /* ---- Frontispício ---- */ html.cmn-noite .cm-frontispicio.cm-frontispicio { background-color: #0A1830; } html.cmn-noite .cm-front-sub { color: rgba(231, 223, 201, 0.75); } html.cmn-noite .cmn-layout-tipo-cabecalho { border-bottom-color: rgba(191, 137, 42, 0.28); } /* Halo dourado atrás do brasão — o escudo em si permanece intocado. */ html.cmn-noite .cm-front-brasao { position: relative; } html.cmn-noite .cm-front-brasao::before { content: ""; position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(217, 169, 74, 0.26), transparent 70%); pointer-events: none; } /* ---- Cartão de pergaminho (acordeão mobile e balão desktop) ---- */ html.cmn-noite .cmn-menu-nav .sub-menu.sub-menu, html.cmn-noite .cm-menu .sub-menu { background-color: #11294F; border-color: rgba(191, 137, 42, 0.35); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); } html.cmn-noite .cmn-menu-nav .sub-menu.sub-menu li + li, html.cmn-noite .cm-menu .sub-menu li + li { border-top-color: rgba(231, 223, 201, 0.12); } /* Véu de ouro à noite: mais opaco para vencer o fundo escuro. */ html.cmn-noite .cmn-menu-nav .sub-menu.sub-menu a:hover, html.cmn-noite .cmn-menu-nav .sub-menu.sub-menu a:focus-visible, html.cmn-noite .cmn-menu-nav .sub-menu.sub-menu a:active, html.cmn-noite .cm-menu .sub-menu.sub-menu.sub-menu a:hover, html.cmn-noite .cm-menu .sub-menu.sub-menu.sub-menu a:focus { background-color: rgba(217, 169, 74, 0.16); } html.cmn-noite .cmn-menu-nav .sub-menu.sub-menu li.current-menu-item > a, html.cmn-noite .cm-menu .sub-menu li.current-menu-item.current-menu-item > a { background-color: rgba(217, 169, 74, 0.24); } /* ---- Botões redondos (sanduíche e conforto) ---- */ html.cmn-noite .cm-frontispicio > .cmn-mob-botao-solto, html.cmn-noite .cmn-layout-tipo-cabecalho > .cmn-mob-botao-solto, html.cmn-noite .cmn-conforto-botao { background: #11294F; color: #E0B65A; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); } /* ---- Painel deslizante do menu ---- */ html.cmn-noite .cmn-mob-painel { background-color: #11294F; color: #E7DFC9; } html.cmn-noite .cmn-mob-menu li { border-bottom-color: rgba(231, 223, 201, 0.12); } html.cmn-noite .cmn-mob-menu a:hover, html.cmn-noite .cmn-mob-menu a:focus-visible, html.cmn-noite .cmn-mob-menu a:active { background-color: rgba(217, 169, 74, 0.16); } html.cmn-noite .cmn-mob-painel .cmn-mob-menu li.current-menu-item.current-menu-item > a, html.cmn-noite .cmn-mob-painel .cmn-mob-menu li.current_page_item.current_page_item > a { background-color: rgba(217, 169, 74, 0.24); color: #E0B65A; } /* ---- Rodapé: um degrau mais fundo que o corpo ---- */ html.cmn-noite .cmn-layout-tipo-rodape .wp-block-group.has-background { background-color: #081426 !important; /* vence o estilo embutido do bloco */ } /* ---- Painel do conforto à noite ---- */ html.cmn-noite .cmn-conforto-painel { background: #11294F; color: #E7DFC9; border-color: rgba(191, 137, 42, 0.35); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5); } html.cmn-noite .cmn-conforto-titulo { color: rgba(231, 223, 201, 0.66); } html.cmn-noite .cmn-conforto-valor, html.cmn-noite .cmn-conforto-estado, html.cmn-noite .cmn-conforto-nota { color: rgba(231, 223, 201, 0.66); } html.cmn-noite .cmn-conforto-fonte button, html.cmn-noite .cmn-conforto-segmentado, html.cmn-noite .cmn-conforto-segmentado button { border-color: rgba(191, 137, 42, 0.32); } html.cmn-noite .cmn-conforto-fonte button:hover { border-color: #E0B65A; } html.cmn-noite .cmn-conforto-segmentado button[aria-pressed="true"] { background: #D9A94A; color: #11294F; } html.cmn-noite .cmn-conforto-trilho { background: rgba(231, 223, 201, 0.25); } html.cmn-noite .cmn-conforto-interruptor input:checked + .cmn-conforto-trilho { background: #D9A94A; } html.cmn-noite .cmn-conforto-interruptor input:checked + .cmn-conforto-trilho .cmn-conforto-bola { color: #8C6420; } html.cmn-noite .cmn-conforto-reset { border-top-color: rgba(231, 223, 201, 0.15); color: rgba(231, 223, 201, 0.66); } html.cmn-noite .cmn-conforto-reset:hover { color: #E0B65A; }