/*=====================================================*/ /* CONFIGURAÇÃO INICIAL (RESET) */ /* Este bloco remove estilos padrão do navegador para */ /* garantir que nossa página tenha a mesma aparência */ /* em todos os lugares. */ /*=====================================================*/ * { margin: 0; /* Remove margens externas */ padding: 0; /* Remove preenchimento interno */ box-sizing: border-box; /* Faz com que o tamanho total inclua bordas e padding. */ font-family: 'Roboto Mono', monospace; /* Define uma fonte padrão para toda a página. */ } /*=====================================================*/ /* ORGANIZAÇÃO DO CORPO DA PÁGINA */ /* Aqui estilizamos o corpo (body) da página, */ /* definindo o layout principal e a imagem de fundo. */ /*=====================================================*/ body { display: flex; /* Ativa o layout flexível. */ flex-direction: column; /* Organiza os itens em coluna. */ overflow: hidden; /* Esconde conteúdo que sai da tela. */ z-index: 1; /* Define a ordem de empilhamento (camada 1). */ height: 100vh; /* Define a altura para ser 100% da tela. */ max-height: 100vh; /* Limita a altura máxima a 100% da tela. */ background-color: #f5f5f5; /* Cor de fundo caso a imagem não carregue. */ background-image: url(./img/biblia.png); /* Define a imagem de fundo da página. */ background-size: cover; /* Faz a imagem de fundo cobrir toda a área. */ background-position: center; /* Centraliza a imagem de fundo. */ background-attachment: fixed; /* Mantém a imagem fixa durante a rolagem. */ backdrop-filter: blur(2px); /* Aplica desfoque no fundo. */ font-family: 'Roboto Mono', monospace; /* Define a fonte específica para o corpo. */ font-style: italic; /* Deixa o texto em itálico. */ font-weight: bold; /* Deixa o texto em negrito. */ } /*=====================================================*/ /* EFEITO DE ESCURECIMENTO */ /* Cria uma camada com gradiente por cima da imagem */ /* de fundo para escurecê-la e melhorar a leitura. */ /*=====================================================*/ .gradiente { position: absolute; /* Permite posicionar livremente sobre a página. */ top: 0; /* Alinha no topo. */ right: 0; /* Alinha à direita. */ bottom: 0; /* Alinha na base. */ left: 0; /* Alinha à esquerda. */ z-index: 0; /* Fica na camada 0, abaixo do conteúdo. */ /* Cria efeito de escurecimento gradual. */ background: linear-gradient(180deg, rgba(128,128,128,0.1) 0%, rgba(128,128,128,0.3) 50%, rgba(128,128,128,0.5) 100% ); } /*=====================================================*/ /* ESTILO DO LINK DO TÍTULO */ /* Formata o link principal da página, que serve */ /* como título no cabeçalho. */ /*=====================================================*/ a { z-index: 2; /* Fica na camada 2, acima do fundo e gradiente. */ color: white; /* Define a cor do texto como branco. */ text-align: center; /* Centraliza o texto. */ font-size: 35px; /* Define o tamanho da fonte. */ text-decoration: none; /* Remove o sublinhado padrão dos links. */ } /*=====================================================*/ /* CABEÇALHO DA PÁGINA */ /* Define o estilo da barra preta no topo da página, */ /* que funciona como o cabeçalho. */ /*=====================================================*/ .cabecalho { display: flex; /* Ativa o layout flexível. */ flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha. */ justify-content: center; /* Centraliza horizontalmente. */ align-items: center; /* Centraliza verticalmente. */ padding: 15px; /* Adiciona um espaçamento interno. */ background: #000000; /* Define a cor de fundo como preta. */ } /*=====================================================*/ /* RODAPÉ DA PÁGINA */ /* Estiliza o rodapé, fixando-o na */ /* parte inferior da tela. */ /*=====================================================*/ footer { z-index: 2; /* Fica na camada 2, visível sobre o conteúdo. */ position: fixed; /* Mantém o rodapé fixo na tela. */ bottom: 0; /* Alinha o rodapé na parte de baixo. */ left: 0; /* Alinha à esquerda. */ right: 0; /* Alinha à direita. */ width: 100%; /* Faz o rodapé ocupar 100% da largura. */ padding: 15px; /* Adiciona um pequeno espaçamento interno. */ background: black; /* Define a cor de fundo como preta. */ color: white; /* Define a cor do texto como branca. */ text-align: center; /* Centraliza o texto. */ font-size: 1.4em; /* Define o tamanho da fonte. */ } /*=====================================================*/ /* JANELA DE BOAS-VINDAS */ /* Define o estilo da janela pop-up que aparece */ /* inicialmente. Por padrão, ela fica escondida. */ /*=====================================================*/ .seja-bem-vindo { position: fixed; /* Permite posicionar livremente na página. */ top: 310px; /* Define a distância do topo. */ left: calc(50% - 1px); /* Centraliza na horizontal. */ z-index: 4; /* Fica na camada 4, acima de quase tudo. */ transform: translateX(-50%); /* Ajusta o centro horizontal perfeitamente. */ display: none; /* Esconde o elemento por padrão. */ flex-direction: column; /* Organiza itens internos em coluna. */ width: 320px; /* Define uma largura fixa. */ height: 200px; /* Define uma altura fixa. */ background: rgba(22, 22, 22, 0.8); /* Fundo preto semi-transparente. */ border-radius: 30px; /* Deixa os cantos arredondados. */ color: white; /* Define a cor do texto como branca. */ } /*=====================================================*/ /* JANELA DE BOAS-VINDAS (QUANDO ATIVA) */ /* Este estilo é aplicado quando a janela pop-up */ /* deve ser mostrada, usando a classe "ativo". */ /*=====================================================*/ .seja-bem-vindo.ativo { display: flex; /* Ativa o layout flexível. */ justify-content: center; /* Centraliza horizontalmente. */ align-items: center; /* Centraliza verticalmente. */ height: auto; /* Deixa a altura se ajustar ao conteúdo. */ } /*=====================================================*/ /* BOTÃO PARA FECHAR A JANELA POP-UP */ /* Estiliza o botão "X" que fecha */ /* a janela de boas-vindas. */ /*=====================================================*/ .fechar-seja-bem-vindo { margin-left: 200px; /* Empurra o botão para a direita. */ padding-top: 10px; /* Espaçamento interno no topo. */ padding-bottom: 10px; /* Espaçamento interno na base. */ background: none; /* Remove a cor de fundo. */ border: none; /* Remove a borda. */ color: white; /* Cor do ícone/texto como branca. */ cursor: pointer; /* Mostra uma mãozinha ao passar o mouse. */ outline: none; /* Remove a borda de foco ao clicar. */ } /*=====================================================*/ /* TÍTULO DA JANELA POP-UP */ /* Formata o texto do título dentro */ /* da janela de boas-vindas. */ /*=====================================================*/ .seja-bem-vindo h2 { z-index: 1; /* Define a ordem de empilhamento. */ margin-bottom: 32px; /* Adiciona uma margem abaixo do título. */ width: 100%; /* Faz o título ocupar toda a largura. */ color: white; /* Cor do texto branca. */ font-size: 2rem; /* Define o tamanho da fonte. */ text-align: center; /* Centraliza o texto. */ } /*=====================================================*/ /* ESTILO DAS IMAGENS */ /* Define a aparência das imagens (capas das Bíblias), */ /* incluindo tamanho e um efeito de sombra. */ /*=====================================================*/ img { z-index: 1; /* Define a ordem de empilhamento. */ margin: 10px; /* Espaçamento ao redor da imagem. */ width: 233px; /* Define uma largura fixa. */ height: 350px; /* Define uma altura fixa. */ /* Adiciona múltiplas camadas de sombra. */ box-shadow: 0 0 20px rgba(255, 255, 255, 0.5), 0 0 30px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.2); /* Adiciona múltiplas camadas de sombra. */ transition: box-shadow 0.3s ease; /* Anima a mudança da sombra suavemente. */ } /*=====================================================*/ /* EFEITO AO PASSAR O MOUSE NA IMAGEM */ /* Intensifica a sombra da imagem quando */ /* o usuário passa o cursor sobre ela. */ /*=====================================================*/ img:hover { box-shadow: 0 0 25px rgba(255, 255, 255, 0.6), 0 0 35px rgba(255, 255, 255, 0.4), 0 0 45px rgba(255, 255, 255, 0.3); /* Sombra mais intensa ao passar o mouse. */ } /*=====================================================*/ /* LISTA DAS VERSÕES BÍBLICAS */ /* Estiliza a área principal onde as */ /* capas das Bíblias são exibidas. */ /*=====================================================*/ .lista-versoes { z-index: 2; /* Fica na camada 2, acima do fundo. */ display: flex; /* Ativa o layout flexível. */ flex-grow: 1; /* Faz a lista ocupar o espaço vertical disponível. */ flex-wrap: wrap; /* Permite que os itens quebrem a linha. */ justify-content: center; /* Centraliza horizontalmente. */ align-items: center; /* Centraliza verticalmente. */ width: 100%; /* Ocupa 100% da largura. */ overflow: auto; /* Adiciona barra de rolagem se necessário. */ list-style-type: none; /* Remove os marcadores de lista (bolinhas). */ scrollbar-width: none; /* Esconde a barra de rolagem no Firefox. */ padding-bottom: 50px; /* Espaço extra na base para não cobrir o rodapé. */ padding-left: 20px; /* Adiciona preenchimento à esquerda. */ padding-right: 20px; /* Adiciona preenchimento à direita. */ gap: 20px; /* Adiciona espaçamento entre os itens. */ } /* A linha abaixo remove a barra de rolagem em navegadores como Chrome, Safari e Edge */ .lista-versoes::-webkit-scrollbar { display: none; /* Esconde a barra de rolagem. */ } /*=====================================================*/ /* CADA ITEM DA LISTA (VERSÃO) */ /* Formata cada bloco individual que contém a */ /* capa e o título de uma versão da Bíblia. */ /*=====================================================*/ .lista-versoes li { display: flex; /* Ativa o layout flexível. */ flex-direction: column; /* Organiza os itens em coluna. */ justify-content: center; /* Centraliza horizontalmente. */ align-items: center; /* Centraliza verticalmente. */ z-index: 1; /* Define a ordem de empilhamento. */ transition: 100ms ease-in-out; /* Anima qualquer mudança de forma suave. */ } /*=====================================================*/ /* EFEITO AO PASSAR O MOUSE NO ITEM */ /* Aplica um efeito visual quando o mouse */ /* está sobre um dos itens da lista. */ /*=====================================================*/ .lista-versoes li:hover { cursor: pointer; /* Mostra uma mãozinha para indicar que é clicável. */ transform: scale(1.05); /* Aumenta um pouco o tamanho do item. */ } /*=====================================================*/ /* TÍTULO DE CADA VERSÃO */ /* Estiliza a faixa preta com o nome da */ /* versão que fica abaixo de cada capa. */ /*=====================================================*/ .lista-versoes h2 { z-index: 1; /* Define a ordem de empilhamento. */ margin-bottom: 10px; /* Espaço abaixo do título. */ width: 233px; /* Mesma largura da imagem da capa. */ background: black; /* Fundo preto. */ border-top: 1.7px solid white; /* Adiciona uma linha branca no topo. */ color: white; /* Cor do texto branca. */ text-align: center; /* Centraliza o texto. */ } /*=====================================================*/ /* JANELA (POP-UP) PARA NOVA VERSÃO */ /* Define a aparência da janela usada para adicionar */ /* uma nova versão da Bíblia. É oculta por padrão. */ /*=====================================================*/ .popup-nova-versao { position: absolute; /* Posicionamento livre na tela. */ top: calc(50% - 250px); /* Centraliza verticalmente. */ left: calc(50% - 175px); /* Centraliza horizontalmente. */ z-index: 3; /* Camada 3, acima da maioria dos elementos. */ display: none; /* Esconde a janela por padrão. */ flex-direction: column; /* Organiza itens internos em coluna. */ width: 320px; /* Largura fixa. */ height: 400px; /* Altura fixa. */ background: #161616; /* Cor de fundo escura. */ } /*=====================================================*/ /* MOSTRAR JANELA POP-UP */ /* Quando um elemento pai tem a classe "visible", */ /* esta regra torna a janela pop-up visível. */ /*=====================================================*/ .visible .popup-nova-versao { display: flex; /* Ativa o layout flexível. */ } /*=====================================================*/ /* FUNDO ESCURECIDO PARA POP-UP */ /* Cria uma camada escura que cobre a página inteira */ /* atrás do pop-up para dar foco a ele. */ /*=====================================================*/ .visible:after { content: ""; /* Necessário para o pseudo-elemento funcionar. */ position: fixed; /* Cobre a tela toda, mesmo com rolagem. */ top: 0; /* Alinha no topo. */ left: 0; /* Alinha à esquerda. */ right: 0; /* Alinha à direita. */ bottom: 0; /* Alinha na base. */ z-index: 2; /* Fica entre o pop-up e o conteúdo da página. */ background: rgba(0, 0, 0, 0.8); /* Cor preta com 80% de transparência. */ } /*=====================================================*/ /* BOTÕES DE ABRIR E FECHAR POP-UP */ /* Estilo base para os botões que abrem e fecham */ /* a janela de nova versão. */ /*=====================================================*/ .abrir-popup, .fechar-popup { z-index: 2; /* Garante que fiquem clicáveis. */ background: none; /* Sem cor de fundo. */ border: none; /* Sem borda. */ color: white; /* Texto branco. */ cursor: pointer; /* Mãozinha ao passar o mouse. */ outline: none; /* Remove contorno ao clicar. */ } /*=====================================================*/ /* VISUAL DO BOTÃO DE FECHAR POP-UP */ /* Ajustes específicos de posicionamento */ /* para o botão de fechar. */ /*=====================================================*/ .fechar-popup { margin-left: 250px; /* Empurra o botão para a direita. */ padding-top: 10px; /* Espaçamento interno no topo. */ padding-bottom: 10px; /* Espaçamento interno na base. */ } /*=====================================================*/ /* BOTÃO "SALVAR VERSÃO" */ /* Estilo do botão para confirmar e salvar */ /* os dados da nova versão no pop-up. */ /*=====================================================*/ .salvar-versao { width: 150px; /* Largura do botão. */ height: 40px; /* Altura do botão. */ margin-top: 12px; /* Margem no topo. */ margin-left: 85px; /* Margem à esquerda para centralizar. */ padding: 4px; /* Espaçamento interno. */ border: none; /* Sem borda. */ border-radius: 15px; /* Cantos arredondados. */ background: #111; /* Fundo cinza escuro. */ color: white; /* Texto branco. */ font-size: 18px; /* Tamanho do texto. */ cursor: pointer; /* Mãozinha ao passar o mouse. */ transition: 0.5s; /* Animação suave para mudanças. */ } /*=====================================================*/ /* EFEITO HOVER NO BOTÃO "SALVAR VERSÃO" */ /* Muda a aparência do botão quando */ /* o mouse está sobre ele. */ /*=====================================================*/ .salvar-versao:hover { background: white; /* Fundo fica branco. */ color: black; /* Texto fica preto. */ box-shadow: 0px 0px 6px white; /* Adiciona um brilho branco ao redor. */ } /*=====================================================*/ /* PRÉ-VISUALIZAÇÃO DA IMAGEM NO POP-UP */ /* Define o estilo para a imagem que aparece */ /* após o usuário escolher um arquivo. */ /*=====================================================*/ .imagem-previsualizacao { display: none; /* Escondida por padrão. */ width: 150px; /* Largura da imagem. */ height: 200px; /* Altura da imagem. */ margin-left: 85px; /* Margem para centralizar. */ } /*=====================================================*/ /* BOTÃO PARA ESCOLHER IMAGEM DE CAPA */ /* Estiliza a área tracejada onde o usuário clica */ /* para selecionar um arquivo de imagem. */ /*=====================================================*/ .botao-imagem { width: 150px; /* Largura da área clicável. */ height: 200px; /* Altura da área clicável. */ margin-left: 85px; /* Margem para centralizar. */ border: 3px dashed #000; /* Borda preta tracejada. */ background: none; /* Sem cor de fundo. */ color: #000; /* Cor do texto (ícone) preta. */ cursor: pointer; /* Mãozinha ao passar o mouse. */ transition: 0.5s; /* Animação suave para mudanças. */ } /*=====================================================*/ /* EFEITO HOVER NO BOTÃO DE ESCOLHER IMAGEM */ /* Muda a cor da borda e do texto quando o mouse */ /* passa sobre a área de seleção de imagem. */ /*=====================================================*/ .botao-imagem:hover { border-color: white; /* Borda fica branca. */ color: white; /* Texto/ícone fica branco. */ } /*=====================================================*/ /* CAMPO DE TEXTO PARA O TÍTULO DA NOVA VERSÃO */ /* Estiliza o campo de input onde o usuário digita */ /* o nome da nova versão da Bíblia. */ /*=====================================================*/ .titulo-nova-biblia { width: 250px; /* Largura do campo. */ height: 30px; /* Altura do campo. */ margin-top: 14px; /* Margem no topo. */ margin-left: 34px; /* Margem à esquerda. */ border: none; /* Sem borda. */ border-radius: 12px; /* Cantos arredondados. */ font-size: 18px; /* Tamanho do texto digitado. */ text-align: center; /* Centraliza o texto digitado. */ outline: none; /* Remove o contorno ao focar. */ } /*=====================================================*/ /* AJUSTES PARA TELAS GRANDES (MEDIA QUERY) */ /* Modifica o tamanho da imagem de fundo para se */ /* ajustar melhor em telas mais largas. */ /*=====================================================*/ @media (min-width: 1010px) { body { background-size: 100% auto; /* Fundo cobre 100% da largura, altura automática. */ } } /*======================================================*/ /* AJUSTES PARA TELAS MUITO GRANDES (MEDIA QUERY) */ /* Modifica o tamanho da imagem de fundo para se */ /* ajustar melhor em telas com mais altura. */ /*======================================================*/ @media (min-width: 1030px) { body { background-size: auto 100%; /* Fundo cobre 100% da altura, largura automática. */ } }