body { background-color: #FFFFFF; color: #000000; font-family: Arial; font-weight: normal; font-size: 16px; line-height: 1.1875; margin: 0; padding: 0; } /* Desabilitar seleção de texto */ body { -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE/Edge */ user-select: none; /* Padrão */ } /* Estilos base simples e robustos */ html, body { /* Impede que o conteúdo "transborde" horizontalmente, evitando a aparição de uma barra de scroll horizontal indesejada. */ overflow-x: hidden; } /* Estilo para o elemento */ html { /* Faz com que a rolagem da página seja suave ao clicar em links internos, em vez de saltar instantaneamente. */ scroll-behavior: smooth; } /* Estilos para o corpo (body) da página */ body { /* --- ADIÇÃO 1: CÓDIGO PARA ESCONDER E FAZER FADE-IN --- */ opacity: 0; transition: opacity 0.4s ease-in-out; /* -------------------------------------------------------- */ font-family: 'Inter', sans-serif; background-color: #f8fafc; color: #1e293b; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* As próximas 3 linhas usam o modelo Flexbox para garantir que o rodapé fique no fundo da página, mesmo que o conteúdo seja curto. */ display: flex; /* Ativa o layout flex. */ flex-direction: column; /* Organiza os elementos filhos (header, container, footer) em uma coluna. */ min-height: 100vh; /* Garante que o corpo tenha, no mínimo, 100% da altura do ecrã. */ } /* --- ADIÇÃO 2: CLASSE PARA REVELAR O CORPO DA PÁGINA --- */ body.ready { opacity: 1; } /* Estilo para a classe 'container' */ .container { /* Faz com que este elemento cresça para ocupar todo o espaço vertical disponível, empurrando o rodapé para baixo. */ flex-grow: 1; } /* Estilo para os botões principais da página inicial */ .main-button { /* Adiciona uma transição suave de 0.2 segundos para todas as propriedades que mudam (como sombra e posição). */ transition: all 0.2s ease-in-out; /* Adiciona uma sombra subtil debaixo do botão para lhe dar profundidade. */ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } /* Estilo que se aplica quando o cursor do rato está sobre o botão. */ .main-button:hover { /* Move o botão 2 pixels para cima e aumenta o seu tamanho em 2% para criar um efeito de "elevação". */ transform: translateY(-2px) scale(1.02); /* Aumenta a sombra para dar mais profundidade ao efeito de "elevação". */ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.1); } /* Estilo para as secções de conteúdo que são carregadas dinamicamente. */ .content-section { /* Por padrão, estas secções estão escondidas. O JavaScript as tornará visíveis quando necessário. */ display: none; } /* A regra '@media' aplica estilos específicos apenas em determinadas condições. */ /* Neste caso, os estilos seguintes só se aplicam em ecrãs com largura máxima de 1023px (tablets e telemóveis). */ @media (max-width: 1023px) { .main-button { /* Altera a animação de transição para ser um pouco mais rápida em dispositivos móveis. */ transition: all 0.15s ease-out; } .main-button:hover { /* Em ecrãs táteis, o 'hover' não existe, então o efeito de elevação é removido para evitar comportamentos estranhos. */ transform: none; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } /* As próximas regras adicionam uma borda colorida na parte inferior dos botões em ecrãs pequenos, para um feedback visual diferente. */ .main-button.button-blue { border-bottom: 5px solid #dbeafe; } .main-button.button-green { border-bottom: 5px solid #dcfce7; } .main-button.button-purple { border-bottom: 5px solid #ede9fe; } .main-button.button-pink { border-bottom: 5px solid #fce7f3; } /* Estilo que se aplica quando o botão está a ser pressionado (clicado). */ .main-button:active { /* Move o botão um pouco para baixo para simular um clique físico. */ transform: translateY(3px); /* Reduz a borda inferior para acentuar o efeito de clique. */ border-bottom-width: 2px; } }