/* ========================================================================== Bíblia Web — camada de refinamento visual -------------------------------------------------------------------------- Carregada por cima do CSS existente (que continua intacto nos templates). Todas as regras dependem da classe "bw2" no : removendo a classe, o site volta exatamente ao visual anterior. Princípios (inspirados em Bíblia On, Toda Matéria e Pensador): - mesma paleta de azuis; cinzas unificados numa escala só - fonte de sistema na interface, Georgia no texto bíblico - cartões com borda fina e sombra quase imperceptível - títulos maiores e mais firmes, com entrelinha justa ========================================================================== */ .bw2 { /* paleta original (não alterada) */ --bw-azul: #274ec6; --bw-azul-vivo: #446cfc; --bw-marinho: #1f3e74; /* tons derivados da paleta, para fundos e realces suaves */ --bw-azul-50: #f3f6fe; --bw-azul-100: #e7edfd; --bw-azul-200: #cdd9fb; /* escala única de neutros (substitui os ~9 cinzas soltos) */ --bw-texto: #262b36; --bw-texto-2: #525b6b; --bw-texto-3: #7d8697; --bw-borda: #e6e9ef; --bw-borda-2: #d6dbe4; --bw-fundo: #f7f8fb; --bw-branco: #ffffff; --bw-raio: 12px; --bw-raio-sm: 8px; --bw-sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .05); --bw-sombra-hover: 0 6px 16px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04); --bw-transicao: .18s ease; --bw-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --bw-serif: Georgia, "Iowan Old Style", "Times New Roman", serif; font-family: var(--bw-sans); color: var(--bw-texto); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ---------- Fontes: tira Verdana/Arial/Montserrat da interface ---------- */ .bw2 button, .bw2 input, .bw2 select, .bw2 textarea, .bw2 .menu-a, .bw2 .section, .bw2 .newsletter-box, .bw2 .capitulos-container, .bw2 .container-versiculo-diario h2, .bw2 .container-versiculo h2, .bw2 .historico-titulo, .bw2 .bible-character-body { font-family: var(--bw-sans); } /* texto bíblico e citações continuam serifados (de propósito) */ .bw2 .texto-versiculo, .bw2 .citacao, .bw2 .historico-citacao, .bw2 .verso-aleatorio-citacao { font-family: var(--bw-serif); } /* ---------- Títulos ---------- */ .bw2 h1 { font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; color: var(--bw-marinho); padding-bottom: 8px; } .bw2 h2, .bw2 h3 { letter-spacing: -.01em; } /* títulos de seção da home ("Livros da Bíblia", "Últimos Artigos"…) */ .bw2 .livros-titulo { font-size: 22px; font-weight: 700; color: var(--bw-marinho); letter-spacing: -.015em; } .bw2 a { transition: color var(--bw-transicao); } /* ========================================================================== Cabeçalho ========================================================================== */ .bw2 .header { background: var(--bw-marinho); box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 2px 8px rgba(16, 24, 40, .12); } .bw2 .menu-a { color: rgba(255, 255, 255, .86); font-size: 14.5px; font-weight: 500; padding: 8px 14px; border-radius: 8px; } /* antes: caixa cinza-clara sobre o marinho; agora um realce discreto */ .bw2 .menu-a:hover { background: rgba(255, 255, 255, .10); color: #fff; } .bw2 .more-menu { background: var(--bw-marinho); border-radius: 0 0 10px 10px; box-shadow: 0 10px 24px rgba(16, 24, 40, .18); padding: 6px; } .bw2 .more-menu li a { border-radius: 6px; font-size: 14px; } .bw2 .more-menu li a:hover { background: rgba(255, 255, 255, .10); color: #fff; } .bw2 .versao { border-color: rgba(255, 255, 255, .22); border-radius: 999px; padding: 5px 12px; } /* ========================================================================== Hero da home ========================================================================== */ /* as manchas decorativas ficam mais sutis (antes competiam com o título) */ .bw2 .hero-section [class^="hero-shape-"] { opacity: .28 !important; } .bw2 .hero-content-box h1, .bw2 .hero-section h1 { font-size: 36px; font-weight: 800; letter-spacing: -.025em; color: var(--bw-marinho); } /* antes: bloco cinza-azulado pesado em volta dos atalhos */ .bw2 .hero-menu-box { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; /* sem o fundo, o desfoque virava uma faixa branca */ gap: 14px; } .bw2 .hero-menu-link { background: var(--bw-branco); border: 1px solid var(--bw-borda); border-radius: 14px; box-shadow: var(--bw-sombra); color: var(--bw-marinho); font-weight: 600; font-size: 15px; transition: transform var(--bw-transicao), box-shadow var(--bw-transicao), border-color var(--bw-transicao); } .bw2 .hero-menu-link:hover { /* antes o cartão inteiro virava azul-marinho; agora só levanta e o texto ganha cor */ background: var(--bw-branco); color: var(--bw-azul); transform: translateY(-2px); box-shadow: var(--bw-sombra-hover); border-color: var(--bw-azul-200); } .bw2 .hero-menu-icon { width: 30px; height: 30px; } /* ========================================================================== Componentes gerais: seletor de versão e botões "Ver mais" ========================================================================== */ .bw2 .versao-label { color: var(--bw-texto-3); font-size: 14px; } .bw2 .versao-selector { background: var(--bw-branco); border: 1px solid var(--bw-borda-2); border-radius: 999px; color: var(--bw-texto-2); font-weight: 600; font-size: 13.5px; padding: 7px 14px; text-decoration: none; } .bw2 .versao-selector:hover { background: var(--bw-azul-50); border-color: var(--bw-azul-200); color: var(--bw-azul); } /* ========================================================================== Livros da Bíblia (Antigo e Novo Testamento) ========================================================================== */ .bw2 .testamento-panel { border: 1px solid var(--bw-borda); border-radius: 14px; box-shadow: var(--bw-sombra); } .bw2 .testamento-panel:hover { box-shadow: var(--bw-sombra-hover); } /* antes: faixa em degradê cinza; agora cabeçalho limpo com linha fina */ .bw2 .testamento-header { background: var(--bw-branco); border-bottom: 1px solid var(--bw-borda); padding: 14px 18px; } .bw2 .testamento-header h3, .bw2 .testamento-header span, .bw2 .testamento-header div:not(.testamento-icon):not(.testamento-arrow) { color: var(--bw-marinho); font-weight: 700; font-size: 16px; } .bw2 .livro-item { color: var(--bw-azul); font-size: 15px; border-color: #eef0f4; } .bw2 .livro-item:hover { color: var(--bw-marinho); background: var(--bw-azul-50); } /* ========================================================================== Últimos artigos ========================================================================== */ /* os cartões ocupam a coluna inteira (antes ficavam estreitos, com vãos) */ .bw2 .artigo_item { max-width: none; width: 100%; text-align: left; border: 1px solid var(--bw-borda); border-radius: var(--bw-raio); box-shadow: var(--bw-sombra); } .bw2 .artigo_item:hover { box-shadow: var(--bw-sombra-hover); transform: translateY(-2px); } .bw2 .artigo_item img { max-width: none; aspect-ratio: 16 / 10; } .bw2 .artigo_item:hover img { transform: scale(1.03); } .bw2 .artigo_item h3 { font-size: 15.5px; font-weight: 650; line-height: 1.38; color: var(--bw-texto); margin: 12px 14px 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .bw2 .artigo_item a:hover h3 { color: var(--bw-azul); } /* ========================================================================== Barra lateral: newsletter e atalhos ========================================================================== */ .bw2 .newsletter-box { background: linear-gradient(180deg, var(--bw-azul-50), #eef3fe); border: 1px solid var(--bw-azul-100); border-radius: 16px; box-shadow: none; } .bw2 .newsletter-box h2, .bw2 .newsletter-box h3, .bw2 .newsletter-box p:first-of-type:not(.newsletter-disclaimer) { color: var(--bw-marinho); font-weight: 700; letter-spacing: -.01em; } .bw2 .newsletter-email { border: 1px solid var(--bw-borda-2); border-radius: 10px; padding: 11px 14px; font-size: 14.5px; background: var(--bw-branco); transition: border-color var(--bw-transicao), box-shadow var(--bw-transicao); } .bw2 .newsletter-email:focus { outline: none; border-color: var(--bw-azul-vivo); box-shadow: 0 0 0 3px rgba(68, 108, 252, .15); } .bw2 .newsletter-submit { background: var(--bw-marinho); border-radius: 10px; font-weight: 600; font-size: 14.5px; padding: 11px 14px; transition: background var(--bw-transicao); } .bw2 .newsletter-submit:hover { background: var(--bw-azul); } .bw2 .newsletter-disclaimer { color: var(--bw-texto-3); } .bw2 .card-texto_card { background: var(--bw-branco); border: 1px solid var(--bw-borda); border-radius: 14px; box-shadow: var(--bw-sombra); transition: transform var(--bw-transicao), box-shadow var(--bw-transicao), border-color var(--bw-transicao); } /* antes: "zoom" do cartão inteiro; agora um levantar discreto */ .bw2 .card-texto_card:hover { transform: translateY(-2px); box-shadow: var(--bw-sombra-hover); border-color: var(--bw-azul-200); } .bw2 .card-texto_content p { color: var(--bw-texto-3); font-size: 13px; } .bw2 .card-texto_content h2 { color: var(--bw-marinho); font-weight: 700; font-size: 17px; } .bw2 .card-texto_arrow { opacity: .45; transition: opacity var(--bw-transicao), transform var(--bw-transicao); } .bw2 .card-texto_card:hover .card-texto_arrow { opacity: .8; transform: translateX(2px); } /* ========================================================================== Temas e personagens (home) ========================================================================== */ .bw2 .temas-biblicos-box { border: 1px solid var(--bw-borda); border-radius: 14px; box-shadow: var(--bw-sombra); } .bw2 .tema-link { color: var(--bw-azul); font-size: 15px; border-color: #eef0f4; } .bw2 .tema-link:hover { color: var(--bw-marinho); } /* antes: caixa azulada em volta dos cartões */ .bw2 .enciclopedia-box { background: transparent; border: 0; box-shadow: none; padding: 0; } .bw2 .personagem-card { padding-top: 14px; background: var(--bw-branco); border: 1px solid var(--bw-borda); border-radius: var(--bw-raio); box-shadow: var(--bw-sombra); transition: transform var(--bw-transicao), box-shadow var(--bw-transicao), border-color var(--bw-transicao); } .bw2 .personagem-link:hover .personagem-card { transform: translateY(-2px); box-shadow: var(--bw-sombra-hover); border-color: var(--bw-azul-200); } .bw2 .personagem-thumbnail { box-shadow: 0 0 0 3px var(--bw-branco), 0 0 0 4px var(--bw-borda); } .bw2 .personagem-nome { color: var(--bw-marinho); font-weight: 700; font-size: 14.5px; } .bw2 .personagem-descricao { color: var(--bw-texto-3); font-size: 12.5px; line-height: 1.45; } /* ========================================================================== Rodapé e botão flutuante ========================================================================== */ /* antes: cinza-chumbo com links sublinhados miúdos */ .bw2 .footer { background: var(--bw-marinho); padding: 28px 0; } .bw2 .footer-links { gap: 26px; flex-wrap: wrap; } .bw2 .footer-links a { color: rgba(255, 255, 255, .78); text-decoration: none; font-size: 14px; } .bw2 .footer-links a:hover { color: #fff; } .bw2 .footer-right { color: rgba(255, 255, 255, .6); font-size: 13px; } .bw2 .floating-icon { background: var(--bw-marinho); border: 0; box-shadow: 0 6px 18px rgba(31, 62, 116, .35); } /* ========================================================================== Página de capítulo ========================================================================== */ .bw2 .migalha-lista { font-size: 13.5px; } .bw2 .migalha-link { color: var(--bw-texto-3); } .bw2 .migalha-link:hover { color: var(--bw-azul); } .bw2 .subtitulo { color: var(--bw-texto-3); font-size: 14.5px; line-height: 1.55; } .bw2 .subtitulo strong { color: var(--bw-texto-2); font-weight: 600; } /* títulos de perícope ("A criação dos céus…") */ .bw2 .titulo-versiculo { font-size: 17px; font-weight: 700; color: var(--bw-marinho); letter-spacing: -.005em; margin: 30px 0 8px; } /* versículos: texto corrido para leitura, sem as faixas zebradas */ .bw2 .versiculo, .bw2 .versiculo.impar, .bw2 .versiculo.par { background: transparent; border-radius: 8px; padding: 6px 8px; margin-bottom: 0; transition: background var(--bw-transicao); } .bw2 .versiculo:hover { background: var(--bw-azul-50); } .bw2 .numero-versiculo { font-family: var(--bw-sans); font-size: 12px; font-weight: 700; color: var(--bw-azul-vivo); top: 12px; } .bw2 .texto-versiculo { font-size: 19px; line-height: 1.75; color: #1f2430; } /* o ícone de link só aparece ao passar o mouse (antes: um em cada linha) */ .bw2 .link-compartilhar { opacity: 0; transition: opacity var(--bw-transicao), background var(--bw-transicao); } .bw2 .versiculo:hover .link-compartilhar, .bw2 .link-compartilhar:focus { opacity: .7; } .bw2 .link-compartilhar:hover { opacity: 1; background: var(--bw-azul-100); } @media (hover: none) { /* no celular não existe "passar o mouse": fica visível, mas discreto */ .bw2 .link-compartilhar { opacity: .35; } } /* grade de capítulos: botões em vez de tabela com divisórias */ .bw2 h2.menucapitulos { color: var(--bw-marinho); font-size: 18px; font-weight: 700; } .bw2 .capitulos-grid { gap: 6px; grid-template-columns: repeat(10, 1fr); } .bw2 .capitulo::before { content: none !important; } .bw2 .capitulo, .bw2 .capitulo:hover { background: none; } .bw2 .capitulo a { display: block; padding: 8px 0; border: 1px solid var(--bw-borda); border-radius: 8px; color: var(--bw-azul); font-weight: 600; font-size: 13px; background: var(--bw-branco); transition: background var(--bw-transicao), border-color var(--bw-transicao), color var(--bw-transicao); } .bw2 .capitulo a:hover { background: var(--bw-azul-50); border-color: var(--bw-azul-200); color: var(--bw-marinho); } .bw2 .capitulo a.atual, .bw2 .atual { background: var(--bw-azul-vivo); border-color: var(--bw-azul-vivo); color: #fff; } /* navegação anterior / próximo */ .bw2 .botao-nav { background: var(--bw-branco); border: 1px solid var(--bw-borda-2); color: var(--bw-azul); font-weight: 600; padding: 10px 16px; border-radius: 999px; } .bw2 .botao-nav:hover { background: var(--bw-azul-50); border-color: var(--bw-azul-200); box-shadow: none; } .bw2 .capitulo-atual { color: var(--bw-texto-3); font-weight: 600; } @media (max-width: 480px) { .bw2 h1 { font-size: 27px; } .bw2 .hero-content-box h1, .bw2 .hero-section h1 { font-size: 28px; } .bw2 .texto-versiculo { font-size: 18px; line-height: 1.7; } .bw2 .capitulos-grid { grid-template-columns: repeat(8, 1fr); } } /* ========================================================================== Página de versículo, versículo do dia e busca ========================================================================== */ .bw2 .container-versiculo-diario, .bw2 .container-versiculo { background: var(--bw-branco); border: 1px solid var(--bw-borda); border-radius: 16px; box-shadow: var(--bw-sombra); } .bw2 .img_versiculo img { border-radius: 12px; } .bw2 .legenda { color: var(--bw-texto-3); } /* "Leia o capítulo na íntegra": antes uma faixa cinza pesada */ .bw2 .saibamais { background: var(--bw-azul-50); border: 1px solid var(--bw-azul-100); border-radius: 12px; padding: 16px; color: var(--bw-texto-2); } .bw2 .saibamais_link { color: var(--bw-azul); font-weight: 600; } .bw2 .saibamais_link:hover { color: var(--bw-marinho); } /* ========================================================================== Títulos de apoio dentro do conteúdo (ex.: "Temas em Destaque", "Gratidão na Bíblia"): antes num azul fora da paleta (#003cb5) ========================================================================== */ .bw2 .conteudo_box > h2:not([class]), .bw2 .conteudo_box > div > h2:not([class]) { color: var(--bw-marinho); font-weight: 700; font-size: 21px; } /* ========================================================================== Alfabeto (temas) e paginação ========================================================================== */ /* antes: letras sublinhadas numa caixa cinza com sombra */ .bw2 .navletras_navegacao { background: transparent; border: 0; box-shadow: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .bw2 .navletras_item { margin: 0; } .bw2 .navletras_link, .bw2 .navletras_texto { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; box-sizing: border-box; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; } .bw2 .navletras_link { background: var(--bw-branco); border: 1px solid var(--bw-borda); color: var(--bw-azul); transition: background var(--bw-transicao), border-color var(--bw-transicao); } .bw2 .navletras_link:hover, .bw2 .navletras_link:focus { background: var(--bw-azul-50); border-color: var(--bw-azul-200); color: var(--bw-marinho); } /* letra sem temas: aparece, mas apagada */ .bw2 .navletras_texto { color: #b7bdc8; border: 1px dashed var(--bw-borda); } .bw2 .pagination li a { border: 1px solid var(--bw-borda); border-radius: 8px; color: var(--bw-azul); font-weight: 600; text-decoration: none; } .bw2 .pagination li a:hover { background: var(--bw-azul-50); border-color: var(--bw-azul-200); } .bw2 .pagination li.active a { background: var(--bw-azul-vivo); border-color: var(--bw-azul-vivo); color: #fff; } /* ========================================================================== Lista de temas ========================================================================== */ .bw2 .temas-biblicos { border: 1px solid var(--bw-borda); border-radius: 14px; box-shadow: var(--bw-sombra); overflow: hidden; background: var(--bw-branco); } .bw2 .temas-biblicos li { background: var(--bw-branco); border-color: #eef0f4; transition: background var(--bw-transicao); } .bw2 .temas-biblicos li:hover { background: var(--bw-azul-50); } .bw2 .temas-biblicos a { color: var(--bw-azul); font-size: 15.5px; text-decoration: none; } .bw2 .temas-biblicos li:hover a { color: var(--bw-marinho); } /* ========================================================================== Página de tema: versículos como citações ========================================================================== */ .bw2 .citacao { line-height: 1.65; color: #1f2430; } .bw2 .icon-citacao { opacity: .35; } /* referência: antes sublinhada, agora discreta e firme */ .bw2 .referencia-versiculo a { text-decoration: none; font-family: var(--bw-sans); font-style: normal; font-weight: 600; font-size: 13.5px; color: var(--bw-azul); } .bw2 .referencia-versiculo a:hover { color: var(--bw-marinho); font-weight: 600; } .bw2 .imagem-tema { border-radius: 14px; box-shadow: var(--bw-sombra); } /* ========================================================================== Artigos (posts): leitura longa ========================================================================== */ .bw2 article > h1 { font-size: 34px; line-height: 1.18; letter-spacing: -.025em; } /* subtítulo */ .bw2 article > h2 { color: var(--bw-texto-3); font-size: 19px; font-weight: 400; line-height: 1.5; letter-spacing: 0; } .bw2 article > p, .bw2 article > ul li, .bw2 article > ol li { font-size: 17.5px; line-height: 1.75; color: var(--bw-texto); } /* intertítulos do texto */ .bw2 article h3 { font-size: 22px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; color: var(--bw-marinho); margin: 36px 0 8px; } .bw2 article > p a, .bw2 article li a { color: var(--bw-azul); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--bw-azul-200); } .bw2 article > p a:hover, .bw2 article li a:hover { text-decoration-color: currentColor; } .bw2 .author-name { color: var(--bw-texto-2); font-weight: 600; } .bw2 .data-artigo { color: var(--bw-texto-3); } @media (max-width: 768px) { .bw2 article > h1 { font-size: 27px; } .bw2 article > h2 { font-size: 16.5px; } .bw2 article > p, .bw2 article > ul li, .bw2 article > ol li { font-size: 17px; } } /* ========================================================================== Celular ========================================================================== */ /* barra inferior do capítulo (anterior / capítulos / próximo) */ .bw2 .navegacao-inferior { background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-top: 1px solid var(--bw-borda); box-shadow: 0 -4px 16px rgba(16, 24, 40, .06); } .bw2 .navegacao-inferior a { color: var(--bw-azul); font-weight: 600; } .bw2 .botao-menu-capitulos { border: 1px solid var(--bw-borda-2); border-radius: 10px; box-shadow: none; } .bw2 .menu-capitulos { background: var(--bw-fundo); border-top: 1px solid var(--bw-borda); } @media (max-width: 768px) { /* o botão de busca ia para cima dos números dos versículos (coluna da esquerda); no celular ele fica à direita, como nos apps */ .bw2 .floating-icon { left: auto; right: 16px; } } @media (max-width: 700px) { /* No celular os atalhos são 2x2 com largura "50% - 6px": o espaço entre eles precisa caber em 12px, senão viram uma coluna só e invadem a lista de livros */ .bw2 .hero-menu-box { gap: 10px; padding: 12px 0; } .bw2 .hero-menu-link { font-size: 13px; border-radius: 12px; } .bw2 .hero-menu-icon { width: 24px; height: 24px; } } @media (max-width: 700px) { .bw2 .hero-menu-link { text-align: left; line-height: 1.2; } .bw2 .testamento-header { padding: 12px 14px; } .bw2 .testamento-header h3, .bw2 .testamento-header span, .bw2 .testamento-header div:not(.testamento-icon):not(.testamento-arrow) { font-size: 14.5px; } } /* ========================================================================== Página do livro (/genesis, /exodo…): 66 páginas ========================================================================== */ /* antes: caixa cinza com sombra e faixa cinza-escura */ .bw2 .livro_container { background: var(--bw-branco); border: 1px solid var(--bw-borda); border-radius: 16px; box-shadow: var(--bw-sombra); } .bw2 .livro_cabecalho { border-bottom-color: var(--bw-borda); } .bw2 .livro_icone { opacity: .85; } .bw2 .livro_titulos h2 { color: var(--bw-texto-3); font-size: 18px; font-weight: 500; } .bw2 .livro_faixa_cinza { background: var(--bw-azul-50); border: 1px solid var(--bw-azul-100); border-radius: 10px; } .bw2 .livro_faixa_cinza p { color: var(--bw-marinho); font-weight: 600; } .bw2 .livro_descricao { color: var(--bw-texto-2); } .bw2 .livro_link { border: 1px solid var(--bw-borda); border-radius: 10px; color: var(--bw-azul); font-weight: 600; transition: background var(--bw-transicao), border-color var(--bw-transicao), color var(--bw-transicao); } .bw2 .livro_link:hover { background: var(--bw-azul-50); border-color: var(--bw-azul-200); color: var(--bw-marinho); }