/*Arquivo: custom.css
Descrição: Estilos personalizados para o site da Aline Nunes Psicóloga.
*/
/* --- Cores Base --- */
/*
Paleta de cores sugerida para um ambiente acolhedor e profissional.
Você pode ajustar estas variáveis conforme a identidade visual da Dra. Aline.
Fontes do Google: Este CSS sugere o uso das fontes 'Open Sans' e 'Montserrat'. Para que elas funcionem, você precisará importá-las do Google Fonts. Isso geralmente é feito adicionando um no do seu HTML. Muitos temas Pelican têm uma forma de fazer isso via pelicanconf.py. Se não, você terá que adicionar manualmente no themes/seu_tema/templates/base.html:
*/
:root {
--primary-color: #295288; /* Azul-acinzentado, suave e profissional */
--secondary-color: #fd5f56; /* Verde menta suave, para acentos */
--text-color: #333333; /* Texto principal, escuro mas não preto puro */
--light-text-color: #666666; /* Texto secundário ou descrições */
--background-light: #F8F8F8; /* Fundo claro, suave */
--background-white: #FFFFFF; /* Fundo branco para seções principais */
--border-color: #DDDDDD; /* Cor de borda leve */
--highlight-color: #D6E4FF; /* Para destaque de fundo sutil */
}
/* --- Estilos Gerais do Corpo --- */
body {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Fonte legível e profissional */
line-height: 1.6; /* Espaçamento entre linhas para melhor leitura */
color: var(--text-color); /* Cor do texto principal */
background-color: var(--background-light); /* Fundo geral claro */
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased; /* Suaviza a fonte em navegadores WebKit */
}
/* --- Cabeçalhos --- */
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif; /* Uma fonte mais impactante para títulos */
color: var(--primary-color); /* Cor dos títulos */
margin-top: 1.5em;
margin-bottom: 0.5em;
line-height: 1.2;
}
h1 { font-size: 2.2em; border-bottom: 2px solid var(--secondary-color); padding-bottom: 0.2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; color: var(--light-text-color); }
/* --- Parágrafos --- */
p {
margin-bottom: 1em;
font-size: 1em;
}
/* --- Links --- */
a {
color: var(--primary-color); /* Cor dos links */
text-decoration: none; /* Remove o sublinhado padrão */
}
a:hover {
text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
color: var(--secondary-color); /* Muda a cor ao passar o mouse */
}
/* --- Lista (Currículo, Serviços) --- */
ul {
list-style-type: disc; /* Marcador de disco */
margin-left: 20px;
margin-bottom: 1em;
}
ul li {
margin-bottom: 0.5em;
}
/* --- Blocos de Citação (se usados) --- */
blockquote {
border-left: 4px solid var(--secondary-color);
padding-left: 15px;
margin-left: 20px;
font-style: italic;
color: var(--light-text-color);
background-color: var(--highlight-color);
padding: 10px 15px;
border-radius: 4px;
}
/* --- Imagens --- */
img {
max-width: 100%; /* Garante que imagens não excedam a largura do contêiner */
height: auto; /* Mantém a proporção da imagem */
display: block; /* Para controle de margin/padding */
margin: 1em auto; /* Centraliza a imagem e adiciona espaço */
border-radius: 8px; /* Cantos arredondados para um toque suave */
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra sutil */
}
/* --- Layout Básico (Exemplo, pode variar com o tema) --- */
/*
O layout principal será definido pelo tema, mas você pode usar classes ou IDs
para estilizar áreas específicas do conteúdo gerado pelo Pelican.
Exemplo de um contêiner de conteúdo principal:
*/
.container {
max-width: 960px; /* Largura máxima do conteúdo */
margin: 2em auto; /* Centraliza o contêiner na página e adiciona espaço */
padding: 20px;
background-color: var(--background-white);
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
/* --- Estilo para o menu de navegação (Exemplo) --- */
/*
Este é um exemplo genérico. O tema terá sua própria estrutura para o menu,
e você precisará inspecionar o HTML gerado para saber as classes corretas.
*/
.main-nav ul {
list-style: none;
padding: 0;
text-align: center;
background-color: var(--primary-color);
margin-bottom: 0;
}
.main-nav li {
display: inline-block;
margin: 0 15px;
}
.main-nav a {
display: block;
padding: 15px 0;
color: var(--background-white);
font-weight: bold;
text-transform: uppercase;
}
.main-nav a:hover {
background-color: oklab(100% 0 -0.00011 / 0.1);
color: var(--secondary-color);
text-decoration: none;
}
/* --- Rodapé --- */
footer {
text-align: center;
padding: 20px;
margin-top: 3em;
background-color: var(--primary-color);
color: var(--background-light);
font-size: 0.9em;
}
footer a {
color: var(--secondary-color);
}
footer a:hover {
color: var(--background-white);
}
/* --- Responsividade Básica (Exemplo) --- */
/*
Media queries para adaptar o layout em telas menores.
Você pode precisar de mais, dependendo do tema.
*/
@media (max-width: 768px) {
h1 { font-size: 1.8em; }
h2 { font-size: 1.5em; }
.container {
margin: 1em auto;
padding: 15px;
}
.main-nav li {
display: block; /* Itens do menu empilhados em telas pequenas */
margin: 0;
}
}